/* ==========================================================================
   Joey Villeneuve — joeyvilleneuve.ca

   A sibling of overplus.ca: the same system (type, grid, square bullets,
   buttons, links, light/dark switch, cards, the closing band) in a cool
   key. The neutrals are Overplus's seven, at identical OKLCH lightness and
   chroma, turned to a cool hue that sits with the mint.

   The mint is matched to Overplus's red by how bright it looks, not by
   measured luminance: at the red's luminance a green reads darker, because
   saturated reds get a brightness boost (Helmholtz–Kohlrausch) that greens
   don't. So it measures lighter than the red — 2.45:1 on paper, 5.7:1 on
   ink — which is fine for tiles and rules. The one control it colours, the
   switch thumb, uses --accent-strong, deepened to 3.2:1 on paper.

   Type rule: Archivo for anything you read; IBM Plex Mono only for short
   labels, buttons and utility links. Nothing is set smaller than 12px.
   Colour rule (shared with Overplus): the accent is a tile or a rule —
   squares, underlines, the switch — never text, never a text background.
   ========================================================================== */

/* TOKENS -------------------------------------------*/
:root {
    --ink: #181B1D;
    --paper: #E0E8EC;
    --mint: #00A87D;           /* as bright to the eye as Overplus's red */
    --accent: var(--mint);     /* shared components use --accent; Overplus sets it to red */
    --accent-strong: #00926D;  /* the switch thumb: the same mint, deep enough for 3:1 on paper */

    /* light: the default, as on Overplus */
    --ground: var(--paper);
    --figure: var(--ink);
    --muted: #4B545A;          /* secondary text, 7:1 on raised */
    --rule: #ADBCC5;           /* decorative hairlines */
    --line: #6D7A82;           /* control outlines and link underlines, 3.5:1 */
    --raised: #EFF4F7;         /* panels, cards, the closing band */
    --media: #D0DAE1;          /* behind posters and video */
    --grain-blend: multiply;
    --grain-opacity: 0.22;

    --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --max-width: 76rem;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    color-scheme: light;
}

/* dark: when someone flips the switch */
:root[data-theme="dark"] {
    --ground: var(--ink);
    --figure: var(--paper);
    --muted: #929FA7;
    --rule: #32383B;
    --line: #636E74;
    --raised: #1E2225;
    --media: #101314;
    --accent-strong: var(--accent);   /* the mint already shows 5.7:1 on ink */
    --grain-blend: screen;
    --grain-opacity: 0.05;
    color-scheme: dark;
}

/* RESET + BASE -------------------------------------*/
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    background: var(--ground);
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}
/* at least a screen tall, so the closing band always sits at the bottom */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    background: var(--ground);
    color: var(--figure);
    font-family: var(--sans);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
main {
    flex: 1;
}
img, video {
    display: block;
    max-width: 100%;
}
h1, h2, h3 {
    text-wrap: balance;
}
p {
    text-wrap: pretty;
}
::selection {
    background: var(--accent);
    color: var(--ink);
}
:focus-visible {
    outline: 2px solid var(--figure);
    outline-offset: 3px;
}
/* no scrolling the page behind an open project */
html:has(dialog[open]) {
    overflow: hidden;
}

/* Press grain, as on Overplus: multiplied on paper, screened on ink. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    opacity: var(--grain-opacity);
    mix-blend-mode: var(--grain-blend);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

/* LAYOUT -------------------------------------------*/
.wrap {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.noscript_note {
    color: var(--muted);
}
/* read by screen readers, not shown */
.visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* SHARED WITH OVERPLUS -----------------------------*/
/* Labels, the tile, panels, buttons, links and the switch are the same on
   overplus.ca — keep the two in step. Only the palette differs. */
.label {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
}
.sq {
    display: inline-block;
    flex: none;
    width: 7px;
    height: 7px;
    background: var(--accent);
}
.kicker {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}
.panel {
    background: var(--raised);
    border: 1px solid var(--rule);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.15rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--figure);
    background: transparent;
    border: 1px solid var(--figure);
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.btn_solid {
    background: var(--figure);
    color: var(--ground);
}
/* Hover inverts a button, but only with a real pointer: on a touch screen a
   tap leaves :hover stuck on, so a button would still be inverted when you
   came back to the tab. The same goes for every hover on the page. */
@media (hover: hover) {
    .btn:hover {
        background: var(--figure);
        color: var(--ground);
    }
    .btn_solid:hover {
        background: transparent;
        color: var(--figure);
    }
}
/* the tile, riding along on the main button */
.btn_solid::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--accent);
}
.btn_small {
    padding: 0.7rem 0.85rem;
}

/* a link in running text: an underline you can see, accent on hover */
.text_link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-decoration-thickness: max(1px, 0.06em);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.2s;
}
@media (hover: hover) {
    .text_link:hover {
        text-decoration-color: var(--accent);
    }
}

/* "↗" marks a link that leaves the site. Point at the link and it nudges
   toward where it goes. Buttons skip it: being a button already says it's
   a link. */
.arrow {
    display: inline-block;
    transition: transform 0.25s var(--ease);
}

/* Boxes you can press (cards, filters, the Overplus link, the menu button)
   answer a hover with a 2px ink outline: the border darkens and a 1px ring
   doubles it. The ring is a shadow, so nothing shifts.
   Only with a real pointer: on a touch screen a tap leaves :hover stuck on,
   so a card would stay outlined after you'd opened it. */
@media (hover: hover) {
    a:hover .arrow {
        transform: translate(2px, -2px);
    }
    .sibling:hover,
    .filter_btn:hover,
    .project_card:hover,
    .pub_card:hover,
    .menu_button:hover {
        border-color: var(--figure);
        box-shadow: 0 0 0 1px var(--figure);
    }
}

/* The light / dark switch. The thumb is the tile, so its position is the state —
   which makes it a control that needs 3:1 on the ground: --accent-strong. */
.mode {
    --w: 2.6rem;
    --h: 1.35rem;
    --pad: 3px;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.4rem 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    background: none;
    border: 0;
    cursor: pointer;
}
.mode_track {
    position: relative;
    flex: none;
    width: var(--w);
    height: var(--h);
    border: 1.5px solid var(--figure);
    transition: background-color 0.2s;
}
@media (hover: hover) {
    .mode:hover .mode_track {
        background: color-mix(in srgb, var(--figure) 8%, transparent);
    }
}
.mode_thumb {
    position: absolute;
    top: var(--pad);
    left: var(--pad);
    width: calc(var(--h) - 3px - 2 * var(--pad));
    height: calc(var(--h) - 3px - 2 * var(--pad));
    background: var(--accent-strong);
    transition: transform 0.3s var(--ease);
}
.mode[aria-checked="true"] .mode_thumb {
    transform: translateX(calc(var(--w) - var(--h)));
}
.mode_label {
    transition: color 0.2s;
}
.mode[aria-checked="false"] .mode_label_light,
.mode[aria-checked="true"] .mode_label_dark {
    color: var(--figure);
}

/* OVERPLUS MARK ------------------------------------*/
/* The studio's mark, in the hero's founder box and the footer: Overplus's
   24px logo file written inline (same viewBox, same rects) and coloured here
   in Overplus's own colours, so each tile can move. Point at the link and the
   tiles turn over in a wave, left to right, like the tiles in Flip (the
   puzzle on overplus.ca), landing on the red one last. Same as the marks on
   overplus.ca; app.js adds the class. Inline SVG draws the same way at rest
   and mid-turn; tiles built from boxes shifted a pixel as a turn began. */
.overplus_mark {
    --tile: #1C1A17;           /* Overplus's ink; keep in step with its brand anchors */
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
}
:root[data-theme="dark"] .overplus_mark {
    --tile: #E9E6DF;           /* on a dark ground the four tiles are Overplus's paper */
}
.overplus_mark rect {
    fill: var(--tile);
    transform-box: fill-box;
    transform-origin: center;
}
.overplus_mark rect:nth-child(4) {
    fill: #FC0345;             /* the right tile: Overplus red */
}
/* the wave: the left tile turns first, the middle column 90ms later, the red tile last */
.overplus_mark.is-flipping rect {
    animation: mark_flip 0.45s 90ms cubic-bezier(0.55, 0, 0.25, 1) both;
}
.overplus_mark.is-flipping rect:nth-child(2) {
    animation-delay: 0s;
}
.overplus_mark.is-flipping rect:nth-child(4) {
    animation-delay: 180ms;
}
/* a half turn, seen side-on: a square lands looking just as it started */
@keyframes mark_flip {
    to { transform: scaleX(-1); }
}
/* Windows high-contrast mode: draw the tiles in the text colour */
@media (forced-colors: active) {
    .overplus_mark {
        forced-color-adjust: none;
    }
    .overplus_mark rect {
        fill: CanvasText;
    }
}

/* SKIP LINK ----------------------------------------*/
.skip_link {
    position: absolute;
    left: var(--gutter);
    top: -5rem;
    z-index: 100;
    padding: 0.65rem 0.9rem;
    font: 500 0.75rem/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ground);
    background: var(--figure);
    text-decoration: none;
}
.skip_link:focus {
    top: 0.75rem;
}

/* HEADER (same as Overplus: solid, sticky) ---------*/
.site_header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
}
.header_inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    min-height: 3.75rem;
}
.site_name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--figure);
    text-decoration: none;
    white-space: nowrap;
}
/* the mint tile stands in for the full stop */
.name_tile {
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin-left: 0.1em;
    background: var(--accent);
}
/* hovering the name makes it hop once and land (app.js adds the class) */
.name_tile.is-bouncing {
    animation: tile_hop 0.7s both;
}
@keyframes tile_hop {
    0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
    34% { transform: translateY(-0.6em); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
    62% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
    78% { transform: translateY(-0.14em); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
    92%, 100% { transform: translateY(0); }
}
.site_nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2rem);
}
.nav_link {
    padding: 0.45rem 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--figure);
    text-decoration: none;
    background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
    transition: background-size 0.25s var(--ease);
}
@media (hover: hover) {
    .nav_link:hover {
        background-size: 100% 2px;
    }
}
.menu_button {
    display: none;
    padding: 0.6rem 0.85rem;
    font: 500 0.75rem/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--figure);
    background: none;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.menu_button[aria-expanded="true"] {
    border-color: var(--figure);
}

/* HERO ---------------------------------------------*/
.hero_section {
    padding: clamp(3rem, 9vh, 6rem) 0 clamp(1rem, 4vh, 3rem);
}
.hero_inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}
.hero_text {
    animation: rise 0.8s var(--ease) backwards;
}
.hero_section h1 {
    margin: 0.9rem 0 0.7rem;
    font-size: clamp(3rem, 1.8rem + 5vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    word-spacing: 0.06em;
    line-height: 0.9;
}
.hero_lead {
    max-width: 26ch;
    margin: 0 0 1.1rem;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.hero_bio {
    max-width: 60ch;
    margin: 0;
    color: var(--muted);
}

/* The studio I founded: a boxed link with its mark. On hover it takes the
   cards' 2px outline (see SHARED WITH OVERPLUS) and the mark plays its
   flip (see OVERPLUS MARK). */
.sibling {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 1rem;
    margin-top: 2rem;
    padding: 0.85rem 1.1rem;
    color: var(--figure);
    text-decoration: none;
    background: var(--raised);
    border: 1px solid var(--line);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sibling_name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.sibling_desc {
    font-size: 0.95rem;
    color: var(--muted);
}

/* The portrait: a duotone print in the site's own ink and paper, so it sits in
   the palette, framed in the same hairline as the panels; the colour original
   fades in while you hover it. */
.portrait {
    position: relative;
    margin: 0;
    border: 1px solid var(--rule);
    animation: rise 0.8s 0.12s var(--ease) backwards;
}
.portrait img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--media);
}
.portrait_colour {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.portrait:hover .portrait_colour {
    opacity: 1;
}

/* SECTIONS -----------------------------------------*/
/* Each section opens with a hairline (the same line the panels use) and a
   two-column head: number and title on the left, what it holds on the right.
   One line weight everywhere keeps the page quiet. */
.section {
    padding-top: clamp(4.5rem, 10vw, 7.5rem);
}
.section_head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 1rem 3rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
}
.section_index {
    margin: 0 0 0.9rem;
}
.section_head h2,
.footer_contact h2 {
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    word-spacing: 0.05em;
    line-height: 0.95;
}
.section_intro {
    justify-self: end;
    max-width: 44ch;
    margin: 0;
    color: var(--muted);
}

/* FILTERS ------------------------------------------*/
.filter_bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.filter_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    font: 500 0.75rem/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--figure);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
/* the chosen filter is a solid button, tile and all */
.filter_btn[aria-pressed="true"] {
    color: var(--ground);
    background: var(--figure);
    border-color: var(--figure);
}
.filter_btn[aria-pressed="true"]::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    background: var(--accent);
}
.filter_count {
    margin: 1rem 0 1.25rem;
}

/* PROJECT GRID + CARD ------------------------------*/
.projects_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1.25rem;
}
.project_card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: var(--raised);
    border: 1px solid var(--rule);
    border-radius: 0;
    cursor: pointer;
    /* the card stays put on hover (no lift), so the pointer never slips off its
       edge; the outline and the preview are the response */
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    animation: rise 0.6s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}
.card_media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--media);
}
.card_poster,
.card_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* the preview fades in over the poster once it's actually playing */
.card_video {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.project_card.is-playing .card_video {
    opacity: 1;
}
.card_number {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.45rem;
    font: 500 0.75rem/1.3 var(--mono);
    letter-spacing: 0.08em;
    color: var(--paper);
    background: var(--ink);
}
/* a mint tile lights up in the corner while the preview plays */
.project_card.is-playing .card_number::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--accent);
}
.card_body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 1.1rem 1.15rem;
}
.card_title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.card_tech {
    font-size: 0.875rem;
    color: var(--muted);
}

/* PUBLICATIONS -------------------------------------*/
/* Each paper is a tile, and the whole tile is the link: the title's link
   stretches over the card, so a click anywhere opens the paper. */
.pub_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pub_card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.4rem 1.5rem 1.5rem;
    background: var(--raised);
    border: 1px solid var(--rule);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pub_title {
    margin: 0.3rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.pub_link {
    color: inherit;
    text-decoration: none;
}
.pub_link::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* keyboard focus rings the whole card, where supported */
@supports selector(:has(*)) {
    .pub_link:focus-visible {
        outline: none;
    }
    .pub_card:has(.pub_link:focus-visible) {
        outline: 2px solid var(--figure);
        outline-offset: 3px;
    }
    .pub_card:has(.pub_link:focus-visible) .pub_cta {
        color: var(--ground);
        background: var(--figure);
    }
}
.pub_authors,
.pub_venue {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted);
}
.pub_authors strong {
    color: var(--figure);
    font-weight: 600;
}
/* The cue that the card opens the paper: a small button that says where it
   goes. The whole card is the link, so the button fills as the card is
   hovered, and it reads as a link on touch screens too, where nothing hovers. */
.pub_foot {
    margin: auto 0 0;
    padding-top: 1rem;
}
@media (hover: hover) {
    .pub_card:hover .pub_cta {
        color: var(--ground);
        background: var(--figure);
    }
}

/* CLOSING BAND: CONTACT + FOOTER -------------------*/
/* The end of the page is one piece: a band that holds the contact details
   and the small print, set apart by its raised ground and a hairline. */
.site_footer {
    margin-top: clamp(5rem, 11vw, 8rem);
    background: var(--raised);
    border-top: 1px solid var(--rule);
}
.footer_contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.75rem 3rem;
    padding: clamp(2.25rem, 5vw, 3.5rem) 0;
}
/* how to reach me, said in a sentence, with the address as a link in it */
.contact_meta {
    max-width: 44ch;
    margin: 1.25rem 0 0;
    font-style: normal;
    color: var(--muted);
}
.contact_meta p {
    margin: 0;
}
.contact_meta .text_link {
    color: var(--figure);
}
.contact_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.footer_bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 2rem;
    padding: 1.1rem 0 1.3rem;
    border-top: 1px solid var(--rule);
}
/* the sibling site, by its mark: point at it and the mark flips (see OVERPLUS MARK) */
.footer_sibling {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--figure);
    text-decoration: none;
}

/* PROJECT POPUP ------------------------------------*/
.project_modal {
    width: min(100% - 2 * var(--gutter), 52rem);
    max-width: none;
    max-height: calc(100% - 2rem);
    margin: auto;
    padding: 0;
    color: var(--figure);
    overflow: auto;
    overscroll-behavior: contain;
}
/* literal colour: ::backdrop doesn't reliably inherit custom properties yet */
.project_modal::backdrop {
    background: rgba(12, 14, 15, 0.6);
}
.project_modal[open] {
    animation: sheet_in 0.35s var(--ease);
}
.modal_inner {
    padding: clamp(1.1rem, 3vw, 2rem);
}
.modal_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.modal_title {
    margin: 0.9rem 0 1rem;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
}
.modal_media {
    margin-bottom: 1rem;
    background: var(--media);
}
.modal_media video {
    width: 100%;
    height: auto;
    max-height: 62vh;
    margin: 0 auto;
    object-fit: contain;
}
.modal_tech {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}
.modal_body {
    max-width: 62ch;
    margin: 0.75rem 0 0;
    color: var(--muted);
}
.modal_links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

/* 404 ----------------------------------------------*/
.lost {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.25rem;
    min-height: calc(100vh - 3.75rem);
    min-height: calc(100svh - 3.75rem);
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.lost h1 {
    margin: 0;
    font-size: clamp(2.75rem, 1.75rem + 6vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    word-spacing: 0.08em;
    line-height: 0.88;
}
.lost p:not(.label) {
    max-width: 40ch;
    margin: 0;
    font-size: 1.1rem;
    color: var(--muted);
}

/* MOTION -------------------------------------------*/
@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
}
@keyframes sheet_in {
    from { opacity: 0; transform: translateY(1.25rem); }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* RESPONSIVE: TABLET + PHONE -----------------------*/
@media (max-width: 900px) {
    .hero_section {
        padding-top: 2rem;
    }
    .hero_inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }
    /* on narrow screens the photo leads, small, like a byline */
    .portrait {
        order: -1;
        width: 7rem;
    }
    .section_head {
        grid-template-columns: minmax(0, 1fr);
    }
    .section_intro {
        justify-self: start;
    }
    .footer_contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .menu_button {
        display: inline-flex;
    }
    /* the nav drops down under the header */
    .site_nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.25rem var(--gutter) 1.25rem;
        background: var(--ground);
        border-bottom: 1px solid var(--rule);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.5rem);
        transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
    }
    .site_nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.2s, transform 0.2s;
    }
    .nav_link {
        padding: 0.9rem 0;
        font-size: 0.8rem;
        border-bottom: 1px solid var(--rule);
        background: none;
    }
    .site_nav .mode {
        margin-top: 1rem;
    }

    /* The contact buttons split the width evenly. With an odd number, the
       first (the solid one) gets a row to itself, so none is left alone. */
    .contact_buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .contact_buttons .btn {
        justify-content: center;
    }
    .contact_buttons > :first-child:nth-last-child(odd) {
        grid-column: 1 / -1;
    }
    /* room for the small print and the Overplus link on one line */
    .footer_bar {
        gap: 0.4rem 1rem;
    }
}