:root {
    --columns: 8;
    --col: 11.75rem;
    --gutter: 1.5rem;
    --max-width: 140rem;
    /* Width of the grid including the outer gutters. */
    --grid-width: calc(var(--columns) * var(--col) + (var(--columns) + 1) * var(--gutter));
    /* Below 500px the columns are too narrow for comfortable prose, so
       the text does not start next to the yellow band but halfway into
       it: it begins on the band line and is pushed in by half a band.
       The four columns flex there, so half a band is an eighth of the
       grid width minus its share of the three gutters; the band itself
       never gets below 100px, so the overlap is never below 50px.
       From 500px up both are switched off. */
    --text-line: band-start;
    --band-half: max(50px, calc(12.5% - 0.375 * var(--gutter)));
}
/* ---------------------------------------------------------------
   The grid lives on .container: fixed width columns with gutters
   between them and the same gutter as outer margin left and right.
   Every width uses the same named lines, so items keep their place
   while columns are dropped on narrower screens:

   rail-start  margin rail, left of the yellow band (5+ columns)
   band-start  the yellow band with the logo
   text-start  the content column(s)
   split       one column into the content
   text-end    right edge of the content

   The widest layout has 8 columns: 2 empty ones on the left (the
   side nav sits there), rail, band, 3 content columns and 1 empty
   one on the right. From 7 columns the second empty column on the
   left is half a column narrower and that half is added on the right,
   so the page does not lean to the right on wide screens; the grid
   stays centred. Narrower screens drop the outer empty columns first,
   then the rail. Below 6 columns the nav moves to the top,
   next to the logo. Below 4 fixed columns the 4 column layout
   stays, but its columns flex to fill the full width.

   The breakpoints are n * --col + (n + 1) * --gutter plus some
   room for a scrollbar; update them when --col changes.
   --------------------------------------------------------------- */
.container {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    justify-content: center;
    grid-template-columns:
        [rail-start band-start] minmax(100px, 1fr)
        [band-end text-start] minmax(0, 1fr)
        [split] minmax(0, 1fr) minmax(0, 1fr)
        [text-end];
    column-gap: var(--gutter);
}
/* The outer gutters only from 500px up; narrower, the grid runs to
   the edges of the screen, only the text keeps a gutter on the right
   and the footer keeps 2rem on both sides. */
section:not(.title) .content,
.project-text {
    padding-right: var(--gutter);
}
/* The title, a full width section and a spotlight have their own
   place on the grid, so they keep clear of the overlap. */
section:not(.title):not(.full):not(.has_spotlight) .content,
.project-text {
    padding-left: var(--band-half);
}
footer .container {
    padding-inline: var(--gutter);
}
@media (min-width: 31.25rem) {
    :root {
        --text-line: text-start;
        --band-half: 0px;
    }
    .container,
    footer .container {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }
    section:not(.title) .content,
    .project-text {
        padding-right: 0;
    }
}
@media (min-width: 55.5rem) {
    :root {
        --columns: 4;
    }
    .container {
        grid-template-columns:
            [rail-start band-start] var(--col)
            [band-end text-start] var(--col)
            [split] var(--col) var(--col)
            [text-end];
    }
}
@media (min-width: 68.75rem) {
    :root {
        --columns: 5;
    }
    .container {
        grid-template-columns:
            [rail-start] var(--col)
            [band-start] var(--col)
            [band-end text-start] var(--col)
            [split] var(--col) var(--col)
            [text-end];
    }
}
@media (min-width: 82rem) {
    :root {
        --columns: 6;
    }
    .container {
        grid-template-columns:
            var(--col)
            [rail-start] var(--col)
            [band-start] var(--col)
            [band-end text-start] var(--col)
            [split] var(--col) var(--col)
            [text-end];
    }
}
@media (min-width: 95.25rem) {
    :root {
        --columns: 7;
    }
    .container {
        grid-template-columns:
            var(--col) calc(var(--col) / 2)
            [rail-start] var(--col)
            [band-start] var(--col)
            [band-end text-start] var(--col)
            [split] var(--col) var(--col)
            [text-end] calc(var(--col) / 2 - var(--gutter));
    }
}
@media (min-width: 108.5rem) {
    :root {
        --columns: 8;
    }
    .container {
        grid-template-columns:
            var(--col) calc(var(--col) / 2)
            [rail-start] var(--col)
            [band-start] var(--col)
            [band-end text-start] var(--col)
            [split] var(--col) var(--col)
            [text-end] calc(var(--col) * 1.5);
    }
}

/* Direct children of a container are the grid items: the logo, the
   nav, a .content block, a project card. Full width until placed. */
.container > * {
    grid-column: 1 / -1;
}

/* Column band-start gets the light yellow band, running the full
   height of the page. */
.container::before {
    content: "";
    position: absolute;
    grid-column: band-start / band-end;
    inset: 0;
    background: var(--lyellow);
    z-index: -1;
}

/* The logo sits inside that yellow band. Multiply blends the gif's
   white background away so only the drawing shows. */
#logo {
    display: block;
    grid-column: band-start / band-end;
    padding: 22%;
    mix-blend-mode: multiply;
}
#logo img {
    display: block;
    width: 100%;
    max-width: 149px; /* the gif's native width */
    height: auto;
    margin: 0 auto;
}

/* Prose sits in the content column. A section marked ---.full uses
   all columns. */
.content {
    grid-column: var(--text-line) / text-end;
}
.full .content {
    grid-column: 1 / -1;
}
/* A spotlight block pulls left out of the content column, across
   the margin rail. Below 750px two columns leave too little room for
   its text, so it runs the full width there: right to the edges of
   the screen below 500px, between the outer gutters up to 750px. */
section.has_spotlight .content {
    grid-column: rail-start / text-end;
}
@media (min-width: 46.875rem) {
    section.has_spotlight .content {
        grid-column: rail-start / split;
    }
}
/* The page title starts one column earlier, in the yellow band.
   While the columns flex it runs to the right edge, so it fits. */
.title .content {
    grid-column: band-start / text-end;
}
@media (min-width: 55.5rem) {
    .title .content {
        grid-column: band-start / split;
    }
}

/* The head of a post, at the top of its first section: an optional
   label, the photo, its caption and the title under it. Narrow, they
   stack, the photo full width. From 4 columns the caption moves into
   the rail, level with the title, and the intro moves up next to it
   too when the caption is the longer one. From 5 the photo leaves room
   on the right: it is 3 columns wide from the rail.
   They keep the gray of the text in a coloured section. */
.post-label,
.post-caption,
.post-title {
    grid-column: var(--text-line) / text-end;
    padding-left: var(--band-half);
    padding-right: var(--gutter);
    color: var(--gray);
}
.post-label {
    padding-block: 2.5rem 1rem;
    font-size: var(--18pt);
    font-weight: 700;
}
.post-image {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    display: block;
}
.post-image:first-child {
    margin-top: 2.5rem;
}
.post-caption {
    padding-top: 0.75rem;
    font-size: var(--18pt);
    line-height: 1.5;
}
.post-title {
    padding-top: 1.5rem;
    font-size: var(--48pt);
    font-weight: 400;
    line-height: 1.3;
}
.post-title + .content {
    padding-top: 1.5rem !important;
}
@media (min-width: 55.5rem) {
    .post-image {
        grid-column: rail-start / text-end;
    }
    .post-caption {
        grid-column: rail-start / text-start;
        grid-row: span 2;
        padding-top: 1.75rem;
        text-align: right;
    }
    .post-title {
        grid-column: text-start / text-end;
    }
}
@media (min-width: 68.75rem) {
    .post-image {
        grid-column: rail-start / span 3;
    }
}

/* ---------------------------------------------------------------
   A {{< margin >}} note sits in the margin rail, next to the line it
   belongs to. It is not a grid item: it stays inside the paragraph or
   the list item it was written in, and is floated left out of there.
   The negative margin is its own width plus a gutter, so its margin
   box ends a gutter left of the text column and no line box ever
   meets it: the note takes up no room in the text at all.

   --rail is the width of the rail at this screen width; --note-indent
   is how far the float's own box is indented from the text column, so
   a note in a list still lands against the rail. Below 4 columns
   there is no rail to float into and the note opens in the text.
   --------------------------------------------------------------- */
:root {
    --note-indent: 0px;
    --list-indent: 2.5rem;
}
.content :is(ol, ul) {
    padding-left: var(--list-indent);
    --note-indent: var(--list-indent);
}
/* Extra witruimte bij genummerde lijsten */
.content ol {
    margin-block: 1.5em;
}
.content ol > li {
    margin-block: 1em;
}
/* Bolletjeslijsten compact houden */
.content ul,
.content ul > li {
    margin-block: 0;
}
.margin {
    display: block;
    margin-block: 1.5rem;
    font-size: var(--21pt);
    line-height: 1.4;
    /* A long URL in a note would otherwise run out of the rail. */
    overflow-wrap: anywhere;
}
.margin[hidden] {
    display: none;
}
/* A photo in a note fills the width of the rail, with the caption
   (the rest of the note) under it. Multiply blends a white background
   away, as with the logo, so a drawing on white shows the colour of
   its section. */
.margin img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0.75rem;
    mix-blend-mode: multiply;
}
@media (min-width: 55.5rem) {
    :root {
        --rail: var(--col);
    }
    .margin {
        float: left;
        clear: left;
        width: var(--rail);
        margin-top: 0.3em;
        margin-left: calc(-1 * (var(--rail) + var(--gutter) + var(--note-indent)));
        /* A gutter clear of the edge of the band, as the text column
           is on the other side of it. */
        padding-left: 0;
        padding-right: var(--gutter);
        border-left: 0;
        /* Against the text column, so the note reads towards the line
           it belongs to. */
        text-align: right;
    }
}
@media (min-width: 68.75rem) {
    :root {
        /* From 5 columns the rail is the empty column plus the yellow
           band: rail-start to text-start. */
        --rail: calc(2 * var(--col) + var(--gutter));
    }
}

/* The word a note hangs off: a button that reads as text, underlined
   so it is clear there is something behind it. The underline is drawn
   the same way and in the same place as on a red link, but dashed at
   rest; on hover and while the note is open in the rail a solid line
   grows in over it from the left. It is inline, so a long term
   wraps with the text like any other words. */
.margin-term {
    cursor: pointer;
    background-image:
        linear-gradient(currentColor, currentColor),
        repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px 6px);
    background-position: 0 calc(50% + .6em);
    background-repeat: no-repeat;
    background-size: 0% 1px, 100% 1px;
    transition: background-size .3s;
}
.margin-term:hover,
.margin-term[aria-expanded="true"] {
    background-size: 100% 1px, 100% 1px;
}

/* The alert a term opens below 750px: a blue bar, with the
   term in it and a close button, over the note on light yellow, with
   the yellow of the band down its left side. */
.note-alert {
    margin: auto;
    width: min(32rem, calc(100% - 2rem));
    max-height: calc(100dvh - 4rem);
    border: 0;
    border-left: 1.5rem solid var(--yellow);
    padding: 0;
    background: var(--lyellow);
    color: var(--gray);
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.25);
}
.note-alert::backdrop {
    background: rgb(60 60 59 / 0.6);
}
.note-alert-bar {
    display: flex;
    align-items: center;
    gap: var(--gutter);
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
    background: var(--blue);
    color: white;
    font-weight: 700;
    line-height: 1.3;
}
.note-alert-bar strong {
    flex: 1;
}
/* The term may start lower case in the text; as a title it does not. */
.note-alert-bar strong::first-letter {
    text-transform: uppercase;
}
.note-alert-close {
    flex: none;
    width: 2rem;
    height: 2rem;
    font: inherit;
    font-size: 1.6rem;
    line-height: 1;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.note-alert-text {
    padding: 1.25rem 1.5rem 1.5rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* A project card straddles the margin rail and the content column,
   as a subgrid so its children can use the page columns. Below 5
   columns it stacks: title, image, then the text in the content
   column. */
.project {
    grid-column: rail-start / text-end;
    display: grid;
    grid-template-columns: subgrid;
}
.project-line {
    grid-column: 1 / -1;
    height: 4px;
    background: var(--green);
}
.project img {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
}
.project-text {
    grid-column: var(--text-line) / text-end;
}

@media (min-width: 68.75rem) {
    .project-line {
        grid-column: 2 / 5;
        grid-row: 1;
    }
    .project img {
        grid-column: var(--img-start) / var(--img-end);
        grid-row: 2;
    }
    .project-text {
        grid-column: var(--img-end) / -1;
        grid-row: 2;
    }
}

/* A project page gallery: the main image above a row of thumbnails.
   From 5 columns it starts in the margin rail, the main image 3
   columns wide and the thumbnails stacked in the 2 columns next to it. */
.project-gallery {
    grid-column: rail-start / text-end;
    list-style: none;
    display: grid;
    /* Below 500px the gallery keeps a gutter on both sides instead of
       running into the edges of the screen. It gives up the page
       columns for that: as a subgrid the margin would come off the
       outer columns alone, leaving the outer thumbnails narrower than
       the rest, so it gets four equal columns of its own. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gutter);
    margin-inline: var(--gutter);
    row-gap: var(--gutter);
}
@media (min-width: 31.25rem) {
    .project-gallery {
        grid-template-columns: subgrid;
        column-gap: normal;
        margin-inline: 0;
    }
}
.project-gallery a,
.project-gallery img {
    display: block;
    width: 100%;
    height: auto;
}
.gallery-main {
    grid-column: 1 / -1;
    height: auto;
}
.gallery-thumbs {
    display: contents;
}
.gallery-thumbs a {
    grid-column: span 1;
}
.gallery-thumbs img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
@media (min-width: 68.75rem) {
    .gallery-main {
        grid-column: 1 / span 3;
        grid-row: 1;
    }
    /* Each column of thumbnails is as high as the main image: size
       containment keeps the thumbnails from growing the row, stretch
       then fills it. Three equal rows, so thumbnails keep the same
       size in a column with fewer than three; object-fit crops them. */
    .gallery-thumbs {
        display: grid;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: var(--gutter);
        grid-row: 1;
        contain: size;
    }
    .gallery-thumbs a,
    .gallery-thumbs img {
        height: 100%;
    }
    .gallery-thumbs img {
        aspect-ratio: auto;
    }
}

/* Below 500px the email and phone number come first, with the address
   and the links side by side under them. */
.footer-left,
.footer-right {
    grid-column: 1 / -1;
}
.footer-right {
    order: -1;
    margin-bottom: 1.5rem;
}
.footer-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gutter);
}
.footer-left :is(p, ul) {
    margin-bottom: 0;
}
/* From 500px, as long as the footer stacks, it starts one column in. */
@media (min-width: 31.25rem) {
    .footer-left,
    .footer-right {
        grid-column: text-start / -1;
    }
    .footer-right {
        order: 0;
        margin-bottom: 0;
    }
    .footer-left {
        display: block;
    }
    .footer-left :is(p, ul) {
        margin-bottom: 2rem;
    }
}
/* Below 7 columns the footer has two columns: footer-1 above
   footer-2 in the rail, the email above the phone number, with the
   band empty in between. */
@media (min-width: 68.75rem) {
    .footer-left {
        grid-column: rail-start / band-start;
    }
    .footer-right {
        grid-column: text-start / span 2;
    }
}
/* At 6 columns the first column stays empty and the left column
   lines up with the menu. */
@media (min-width: 82rem) {
    .footer-left {
        padding-left: calc(var(--gutter) * 0.25);
    }
}
/* From 7 columns the two columns dissolve and each block sits on the
   grid: the first two in the empty columns left of the rail, email
   and phone side by side. */
@media (min-width: 95.25rem) {
    .footer-left,
    .footer-right {
        display: contents;
    }
    .footer-1 {
        grid-column: 1 / span 1;
    }
    /* The second column is only half a column wide here, so the links
       run on into the rail. */
    .footer-2 {
        grid-column: 2 / band-start;
    }
    .footer-3 {
        grid-column: band-start / span 2;
    }
    .footer-4 {
        grid-column: split / -1;
    }
}

/* ---------------------------------------------------------------
   Nav. Below 6 columns it sits at the top, next to the logo.
   Below 500px it folds away; the Menu button in the bottom bar
   opens it as a list just above that bar.
   --------------------------------------------------------------- */
.container > nav {
    display: block;
    position: relative;
    z-index: 1000;
    grid-column: text-start / text-end;
    grid-row: 1;
    align-self: start;
    padding: 3vw 3.5vw 0 0;
}
/* Below 500px a phone and an envelope sit in the top right corner,
   in the red of the links; they call the number and mail the address
   from the footer. Their distance to the edges scales with the
   screen, like the logo's. */
#nav-contact {
    display: flex;
    justify-content: flex-end;
    gap: calc(0.5 * var(--gutter));
}
#nav-contact a {
    color: var(--red);
}
#nav-contact svg {
    display: block;
}
/* Below 500px the menu rolls up out of the bottom bar. Closed, it is
   moved down by its own height and clipped away from the bottom by
   the same amount. Opening animates both back to zero: the bottom
   edge stays at the bar while the top edge rises, taking the links
   with it, as if the menu grows in height. */
#menu {
    list-style: none;
    display: flex;
    position: fixed;
    left: calc(0.75 * var(--gutter));
    right: calc(0.75 * var(--gutter));
    bottom: calc(0.5 * var(--tabbar-height) + 0.75 * var(--gutter) + env(safe-area-inset-bottom));
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: var(--gutter) var(--gutter) calc(var(--gutter) + 2rem);
    background: var(--lgreen);
    border-radius: 2rem 2rem 0 0;
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.2);
    transform: translateY(100%);
    clip-path: inset(-2rem -2rem 100% -2rem);
    visibility: hidden;
    transition: transform 0.3s ease, clip-path 0.3s ease, visibility 0s 0.3s;
}
#menu a {
    color: var(--gray);
}
#menu .active a {
    color: var(--red);
}
nav.open #menu {
    transform: none;
    clip-path: inset(-2rem -2rem 0 -2rem);
    visibility: visible;
    transition: transform 0.3s ease, clip-path 0.3s ease;
}
/* The items fade in one by one while the menu rises, from the top
   down. --i is the item's position, counting from the top item (0),
   and is set in the template. Closing fades them out together. */
#menu li {
    opacity: 0;
    transition: opacity 0.15s ease;
}
nav.open #menu li {
    opacity: 1;
    transition: opacity 0.3s ease;
    transition-delay: calc(var(--i, 0) * 0.04s);
}
@media (prefers-reduced-motion: reduce) {
    #menu,
    nav.open #menu,
    #menu li,
    nav.open #menu li {
        transition: none;
    }
}

/* Below 500px a green bar floats at the bottom of the screen,
   0.75 gutter from the edges: Home, Menu (opens the menu above it) and
   Contact. The footer gets just enough room at the bottom so the bar
   never covers the end of the page. */
:root {
    --tabbar-height: 3.5rem;
}
body > footer {
    padding-top: 1.25rem;
    padding-bottom: calc(1rem + var(--tabbar-height) + 1.5 * var(--gutter) + env(safe-area-inset-bottom));
}
#tabbar {
    position: fixed;
    left: calc(0.75 * var(--gutter));
    right: calc(0.75 * var(--gutter));
    bottom: calc(0.75 * var(--gutter) + env(safe-area-inset-bottom));
    z-index: 1001;
    display: flex;
    height: var(--tabbar-height);
    background: var(--green);
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.2);
    border-radius: 2rem;
    padding-inline: 1rem;
}
#tabbar a,
#tabbar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0;
    border: 0;
    background: none;
    color: white;
    font: inherit;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}
#tabbar svg {
    display: block;
}
#tabbar [aria-expanded="true"] {
    opacity: 0.5;
}
/* From 500px the menu is always visible: at the top next to the
   logo, and from 6 columns in the side nav. */
@media (min-width: 31.25rem) {
    .container > nav {
        padding: var(--gutter) 0;
    }
    #nav-contact {
        display: none;
    }
    body > footer {
        padding-block: 2rem;
    }
    #tabbar {
        display: none;
    }
    #menu {
        display: flex;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 var(--gutter);
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        clip-path: none;
        visibility: visible;
        transition: none;
    }
    #menu li {
        opacity: 1;
        transition: none;
    }
    #menu a {
        color: var(--gray);
    }
    #menu .active a {
        color: var(--red);
    }
}
/* From 6 columns it is out of the grid and fixed to the viewport, in
   the empty columns on the left, so it stays put while the page
   scrolls. Its left is set explicitly: with left: auto it falls back
   to its static position, which Chrome takes from the grid column
   (the rail, over the content) and Firefox from the container's
   edge. This is that edge: the outer gutter of the centred container
   (100% is the viewport width here), plus half the room the centred
   grid leaves on its left, so the nav moves towards the first column
   on wider screens without sticking to it. */
:root {
    --fixed-left: calc(
        max(0px, (100% - var(--max-width)) / 2) + var(--gutter)
        + max(0px, (min(100%, var(--max-width)) - var(--grid-width)) / 4)
    );
}
@media (min-width: 82rem) {
    .container > nav {
        grid-column: 2 / -1;
        position: fixed;
        top: 12rem;
        left: var(--fixed-left);
        padding-left: calc(var(--gutter) * 0.25);
        z-index: 1000;
    }
    #menu {
        flex-direction: column;
        gap: 0.5rem;
    }
}
@media (min-width: 95.25rem) {
    .container > nav {
        padding-left: calc(var(--gutter) * 2);
    }
}

/* From 6 columns, once the header has scrolled out of view
   (.logo-out, set by a script), the logo is fixed to the viewport
   just above the side nav, lined up with the menu. On a project page
   it is there from the start (the script sets .logo-out right away). */
@keyframes logo-in {
    from { opacity: 0; }
}
@media (min-width: 82rem) {
    header.logo-out #logo {
        position: fixed;
        /* The same column as the nav, so it lines up with the menu. */
        grid-column: 2 / -1;
        top: calc(12rem - var(--gutter));
        left: var(--fixed-left);
        z-index: 1000;
        width: 4.5rem;
        margin-left: calc(var(--gutter) * 0.25);
        padding: 0;
        transform: translateY(-100%);
        animation: logo-in 0.2s;
    }
}
/* On a project page or a post the header is empty from 6 columns (the
   logo and the nav are fixed), so it is only a thin strip of the
   yellow band above the title. */
@media (min-width: 82rem) {
    html:is(.projects, .posts) header .container {
        min-height: 2.5rem;
    }
}
@media (min-width: 95.25rem) {
    header.logo-out #logo {
        margin-left: calc(var(--gutter) * 2);
    }
}
/* A {{< button >}} (and {{< calendly >}}): a red bar from the yellow
   band, three columns wide, as a subgrid so the icon sits in the
   middle of the band and the text in the columns next to it. The icon
   is taller than the bar and sticks out above and below it: its box
   has no height and sits on the middle line of the bar, so the icon
   stays centred on the bar and never makes it higher. It is at most
   70% of the band wide. Below 750px it runs on to the right edge of
   the grid, like a spotlight, so the text fits. */
.bar-button {
    grid-column: band-start / text-end;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    margin-block: 3.5rem 4rem;
    background: var(--red);
    color: white !important;
    text-decoration: none;
}
@media (min-width: 46.875rem) {
    .bar-button {
        grid-column: band-start / span 3;
    }
}
.bar-button-icon,
.sample-image {
    grid-column: 1;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
}
.bar-button-icon {
    color: var(--gray);
}
.bar-button-icon svg,
.bar-button-icon img {
    display: block;
    flex: none;
    height: 5.5rem;
    width: auto;
    max-width: 70%;
}
.bar-button-icon.icon-phone svg,
.bar-button-icon.icon-email svg {
    height: 6.5rem;
}
.bar-button-icon.icon-pdf svg {
    height: 6.35rem;
}
.bar-button-text {
    /* In line with the text in .content, which starts on the same
       column. */
    grid-column: 2 / -1;
    justify-self: start;
    padding: 1rem var(--gutter) 1rem 0;
    font-weight: 500;
    line-height: 1.3;
}

/* A {{< sample >}} form: a red bar like a {{< button >}}, with the
   form on light green below it. A subgrid, so the labels sit in the
   yellow band and the fields in the two columns next to it. The image
   of the sample sits in the band in the bar, centred on it like the
   icon of a button, and sticks out above and below it. Below
   500px the band is too narrow for the labels, so they go above their
   field. Below 750px it runs on to the right edge of the grid, like a
   button. The fields are a subgrid of their own below the bar, so
   they can fold away. The light green is laid behind them on its own
   and multiplied, so the yellow band shows through it like it does in
   a section. */
.sample {
    position: relative;
    grid-column: band-start / text-end;
    display: grid;
    grid-template-columns: subgrid;
    align-self: start;
    margin-block: 4rem;
}
.sample-fields {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr;
}
.sample-fields-inner {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    min-height: 0;
    padding-block: 1.5rem;
}
.sample-fields::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--lgreen);
    mix-blend-mode: multiply;
}
@media (min-width: 46.875rem) {
    .sample {
        grid-column: band-start / span 3;
    }
}
.sample-image img {
    display: block;
    flex: none;
    position: relative;
    z-index: 1;
    max-width: 70%;
    height: auto;
}
.sample-title {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    background: var(--red);
    color: white;
    line-height: 1.3;
}
.sample-text {
    grid-column: 2 / -1;
    justify-self: start;
    padding: 1rem var(--gutter) 1rem 0;
    font-weight: 500;
}
.sample label,
.sample input,
.sample button[type=submit] {
    grid-column: 1 / -1;
    margin-inline: var(--gutter);
}
.sample label {
    font-size: var(--21pt);
}
.sample input {
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 0;
    background: white;
    font: inherit;
    color: inherit;
}
/* The text that takes the place of the fields once the form is sent
   (the script in baseof.html). */
.sample-thanks {
    grid-column: 1 / -1;
    margin: 0 var(--gutter);
    font-weight: 500;
}
.sample button[type=submit] {
    justify-self: start;
    margin-top: 1rem;
    padding: 0;
    border: 0;
    background-color: transparent;
    font: inherit;
    color: var(--red);
    cursor: pointer;
}
/* A folded sample form: the bar is a button, and only the bar shows
   until it is clicked. Then the fields slide open below it and the
   arrow turns down. The row of the fields runs from 0fr to 1fr, which
   slides them open in every browser; where interpolate-size is
   supported, the height runs from 0 to auto instead. The fields are
   hidden once they are closed, so they are out of the tab order, and
   visible as soon as they open. */
button.sample-title {
    width: 100%;
    padding: 0;
    border: 0;
    font: inherit;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
.sample.collapsed .sample-fields {
    overflow: clip;
    transition: grid-template-rows .3s ease, visibility 0s;
}
.sample.collapsed .sample-fields-inner {
    transition: padding-block .3s ease;
}
.sample.collapsed:not(.open) .sample-fields {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition-delay: 0s, .3s;
}
.sample.collapsed:not(.open) .sample-fields-inner {
    padding-block: 0;
}
@supports (interpolate-size: allow-keywords) {
    .sample.collapsed {
        interpolate-size: allow-keywords;
    }
    .sample.collapsed .sample-fields {
        transition-property: height, visibility;
    }
    .sample.collapsed:not(.open) .sample-fields {
        grid-template-rows: 1fr;
        height: 0;
    }
}
/* The arrow is an inline-block so it can turn, and a line may break
   before an inline-block even after a no-break space, so the space and
   the arrow are kept together. */
.sample-arrow-wrap {
    white-space: nowrap;
}
.sample-arrow {
    display: inline-block;
    transition: transform .2s;
}
.sample.open .sample-arrow {
    transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
    .sample.collapsed .sample-fields,
    .sample.collapsed .sample-fields-inner,
    .sample-arrow {
        transition: none;
    }
}
@media (min-width: 31.25rem) {
    .sample label {
        grid-column: 1;
        align-self: center;
        margin: 0 0 0.6rem;
        padding-inline: var(--gutter);
        text-align: right;
    }
    .sample input,
    .sample button[type=submit],
    .sample-thanks {
        grid-column: 2 / -1;
        margin-inline: 0 var(--gutter);
    }
}