/* Inter Tight (SIL Open Font License), self-hosted: one variable file, latin */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Swiss / International Typographic Style — one system for the whole site
 *
 * Type     Inter Tight (a grotesk; Helvetica as fallback), mixed case. Bold
 *          for display, titles and labels; Regular for reading text.
 *          Labels: 13px bold. Pairs read bold line / regular line.
 * Labels   Category = red bold capitals; content beneath it = black.
 *          Grey is kept for the copyright line only. Arrows are red.
 * Colour   Black, white, red. One grey for secondary text.
 * Grid     12 columns; everything starts on a column line.
 * Rules    One kind of line only: a 1px black horizontal rule, for
 *          structure (section heads, header, footer). Everything else is
 *          separated by space on the 8px rhythm.
 * Motion   Short, flat fades. Nothing slides, scales or bounces.
 * Hover    Inverts against the ground: red fill + white text on white,
 *          white fill + red text on red. Current page: black outline box.
 */

/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #8a8a8a;
  --line: #0a0a0a;
  /* the only line in the layout: a thick horizontal rule */
  --rule: 1px solid var(--line);
  --accent: #e30613;
  --placeholder: #efefed;
  --pad: clamp(16px, 2vw, 32px);
  --gap: clamp(12px, 1.2vw, 20px);
  /* a true grotesk, loaded for every visitor; Helvetica only as fallback */
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 0.18s;

  /* Type scale: four levels only */
  --fs-label: 13px;
  --lh-label: 16px;
  --fs-body: 15px;
  --lh-body: 24px;
  --fs-title: clamp(24px, 2.4vw, 36px);
  --fs-display: clamp(40px, 4.4vw, 72px);

  /* Vertical rhythm: every space is a multiple of the 8px unit. Inside a
     group 8–32; everything else is ONE gap, --space-2xl (--space-xl and
     --space-3xl are kept equal to it): section head to content, between
     items, section end to the next rule, box or frame to a rule, and the
     nav box to the header rule */
  --u: 8px;
  --space-l: 32px;
  --space-xl: var(--space-2xl);
  --space-2xl: 48px;
  --space-3xl: var(--space-2xl);
  /* shared by every outlined box of cells (nav, contact) so they match */
  --box-pad: 8px;
  /* horizontal inset of text inside every outlined box: nav cells, contact
     cells, the menu button and all buttons */
  --box-pad-x: clamp(6px, 0.8vw, 12px);
  /* size of the ZC mark; its square (and the cursor) is 0.2 of it */
  --brand-fs: clamp(56px, 7.5vw, 120px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* Inter Tight is drawn tight for display; reading sizes open up a touch */
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ---------- Type helpers ---------- */
.label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: var(--lh-label);
  letter-spacing: 0.01em;
}

/* Category label (red) and the plain line that follows a heading */
.cat {
  color: var(--accent);
}

.sub {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.muted {
  color: var(--muted);
}

.display {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

.display-xl {
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--fs-title);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Emphasis: red — "clarity." in the headline, one key phrase in copy */
.hl {
  color: var(--accent);
  font-style: normal;
}

/* The mark's full stop is a square, not a round period */
.sq {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.04em;
  background: var(--accent);
}

/* Custom cursor: a black square exactly as big as the mark's square,
   centred on the pointer. The system cursor is hidden only when it runs */
.has-cursor,
.has-cursor * {
  cursor: none !important;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: calc(var(--brand-fs) * 0.2);
  height: calc(var(--brand-fs) * 0.2);
  margin: calc(var(--brand-fs) * -0.1) 0 0 calc(var(--brand-fs) * -0.1);
  background: var(--fg);
  pointer-events: none;
  opacity: 0;
}

.cursor.is-on {
  opacity: 1;
}

/* Arrows are one red square, the same size everywhere (filled with
   currentColor, so it turns white inside a red hover fill) */
.arrow {
  --arrow: 8px;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--arrow);
  height: var(--arrow);
  vertical-align: middle;
  color: var(--accent);
  background: currentColor;
}

.btn:hover .arrow,
.btn:focus-visible .arrow,
.link-line:hover .arrow,
.link-line:focus-visible .arrow {
  color: inherit;
}

/* "Selected" highlight: red fill, white text, like a text selection. The
   fill is widened with box-shadow so the text itself stays on the grid,
   and repeats on every line of a wrapped phrase. */
.selected {
  background: var(--accent);
  color: #fff;
  box-shadow: 0.12em 0 0 var(--accent), -0.12em 0 0 var(--accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The contact line is "deselected" under the pointer: back to black on
   white */
.contact .selected {
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.contact .selected:hover {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0.12em 0 0 var(--bg), -0.12em 0 0 var(--bg);
}

/* ---------- Interaction ---------- */
/* Text links: a small box that fills red on hover. Padding is pulled back
   with an equal negative margin so the text itself stays on the grid. */
.link-line {
  display: inline-block;
  padding: 3px 6px;
  margin: -3px -6px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link-line:hover,
.link-line:focus-visible {
  background: var(--accent);
  color: #fff;
  outline: none;
}

.link-line.is-active {
  box-shadow: inset 0 0 0 1px var(--fg);
}

/* Buttons: black outline at rest, red fill on hover */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: var(--box-pad) var(--box-pad-x);
  border: 1px solid var(--fg);
  background: var(--bg);
  color: var(--fg);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  outline: none;
}

/* Anything else focusable gets a red outline */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The mark: letters turn red, the square turns black */
.brand,
.brand .sq {
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.brand:hover,
.brand:focus-visible {
  color: var(--accent);
  outline: none;
}

.brand:hover .sq,
.brand:focus-visible .sq {
  background: var(--fg);
}

/* ---------- Layout ---------- */
.wrap {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pad);
}

.section {
  margin-top: var(--space-3xl);
}

/* Numbered section head: rule, index, title, link — all on the grid */
.sec-head {
  border-top: var(--rule);
  padding-top: 8px;
  margin-bottom: var(--space-xl);
  align-items: baseline;
}

.sec-head .idx {
  grid-column: 1 / 3;
}

/* Section names: bold, red — the page's structure */
.sec-head .sec-title {
  grid-column: 3 / 7;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.sec-head .sec-link {
  grid-column: 10 / -1;
  justify-self: end;
}

/* ---------- Header ---------- */
.site-header {
  padding-top: var(--space-l);
  align-items: center;
}

/* Rule under the header row, inside the page gutters: half the section
   gap below the nav box / ZC baseline — the same as the footer rule to the
   footer text (the mark's line box ends ~0.04em under its baseline) */
.site-header::after {
  content: "";
  grid-column: 1 / -1;
  margin-top: calc(var(--space-2xl) / 2 - var(--brand-fs) * 0.04);
  border-top: var(--rule);
}

.brand {
  grid-column: 1 / 6;
  font-weight: 700;
  font-size: var(--brand-fs);
  line-height: 0.8;
  letter-spacing: -0.015em;
  margin-left: -0.03em;
}

.nav {
  grid-column: 7 / -1;
  display: flex;
  flex-wrap: wrap;
}

/* Desktop nav: one outlined box on columns 7–12, its right edge on the
   hero image's — one cell per link, the same object as the contact box. Hover fills a cell red; the current page is
   filled black. */
@media (min-width: 681px) {
  .nav {
    flex-wrap: nowrap;
    border: 1px solid var(--fg);
    /* bottom edge on the ZC baseline: the mark's line box ends ~0.04em
       below its letters */
    align-self: end;
    margin-bottom: calc(var(--brand-fs) * 0.04);
  }

  .nav a,
  .nav a.link-line {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin: 0;
    padding: var(--box-pad) var(--box-pad-x);
    white-space: nowrap;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .nav a.nav-contact {
    display: none;
  }

  /* closing cell: holds the red square's resting place */
  .nav .nav-end {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: var(--box-pad) var(--box-pad-x);
  }

  .nav .nav-end .arrow,
  .nav .nav-mark {
    visibility: hidden;
  }

  /* the one red square: rests in the last cell, slides to the current item */
  .nav {
    position: relative;
  }

  .nav .nav-slider {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--accent);
    pointer-events: none;
    transition: background var(--dur) var(--ease);
  }

  .nav .nav-slider.is-ready {
    transition: transform 0.45s var(--ease), background var(--dur) var(--ease);
  }

  .nav .nav-slider.is-inverse {
    background: #fff;
  }


  .nav a:hover,
  .nav a:focus-visible {
    background: var(--accent);
    color: #fff;
    outline: none;
  }
}

.nav-contact,
.nav-end,
.nav-slider {
  display: none;
}

/* Current section: a red square right after the word, its bottom on the
   baseline like the logo's full stop (always there, only shown when
   current, so the cells never shift) */
.nav-mark {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 4px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav a.is-current .nav-mark {
  opacity: 1;
}

.nav a:hover .nav-mark,
.nav a:focus-visible .nav-mark {
  background: #fff;
}

.menu-btn {
  display: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* ---------- Hero ---------- */
.hero {
  align-items: start;
}

.hero-role {
  grid-column: 1 / 7;
  margin: 0;
}

/* Sub-page heads start like the home hero: the "(01) Name" row 8px under
   the header rule (index cols 1–2, name from col 3, as in every section
   head), then the title one gap below */
.page-title,
.project-head {
  padding-top: 8px;
  row-gap: 0;
  align-items: start;
}

.page-title .idx,
.project-head .idx {
  grid-column: 1 / 3;
  grid-row: 1;
  margin: 0;
}

.page-title .hero-role,
.project-head .hero-role {
  grid-column: 3 / -1;
  grid-row: 1;
  margin: 0 0 var(--space-2xl);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: 0.01em;
  color: var(--accent);
}

.page-title > h1,
/* case pages: the label row sits straight above the cover image */
.case > .project-head .hero-role {
  margin-bottom: 0;
}

.project-head > h1 {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* the About statement keeps the hero's six-column measure */
.page-title > h1.statement {
  grid-column: 1 / 7;
}

/* Home hero: text left (1–6), portrait right (7–12) */
/* Phones: text, then portrait (desktop layout below the figures block) */
.hero {
  margin-top: var(--space-2xl);
  align-items: end;
}

/* Hero text on its own subgrid (cols 1–6): label, poster headline, then
   big numbers (cols 1–3) beside a small info block (cols 4–6) */
.hero-text {
  grid-column: 1 / 7;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
}

.hero-text > * {
  grid-column: 1 / -1;
}

/* (01) and the role share one row, on the same columns as every section
   head (index cols 1–2, name from col 3) and the same 8px under the rule */
.hero {
  margin-top: 0 !important;
}

.hero-text {
  padding-top: 8px;
}

.hero-text .idx {
  grid-column: 1 / 3;
  grid-row: 1;
  margin: 0;
}

/* Same treatment as section names */
.hero-text .hero-role {
  grid-column: 3 / -1;
  grid-row: 1;
  margin: 0 0 var(--space-xl);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: 0.01em;
  color: var(--accent);
}

/* Headline set like a poster: lines alternate flush left / flush right.
   Size follows the 6-column width so the longest line always fits. */
.hero-title {
  margin: 0;
  font-weight: 700;
  font-size: min(calc((50vw - 1.5 * var(--pad)) / 8.2), 112px);
  line-height: 0.95;
  letter-spacing: -0.015em;
}

/* Home headline: sized so its longest line, "where complexity", runs the
   full six columns — every line starts on col 1 or ends on col 6 and the
   longest does both (50vw − 1.5 gutters is the width of cols 1–6) */
.hero-text .hero-title {
  font-size: calc((50vw - 1.5 * var(--pad)) / 7.933);
  /* each line is one row of the vertical grid: its height is snapped to a
     multiple of the 8px unit */
  line-height: round(nearest, 0.95em, 8px);
}

.hero-title span {
  display: block;
  white-space: nowrap;
}

.hero-title .r {
  text-align: right;
}

/* "j3": a line justified across columns 1–3 — half the six-column measure
   less half a gutter */
.hero-title .j3,
.hero-text .hero-title span.j3 {
  width: calc(50% - var(--pad) / 2);
  text-align: justify;
  text-align-last: justify;
}

/* Numbers (cols 1–3) and the info block (cols 4–6) share a top line */
.hero-bottom {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  row-gap: var(--space-xl);
}

/* Left column (cols 1–3): the figures, 7+ in col 1, 100M+ from col 2 */
.hero-left {
  grid-column: 1 / 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
}

/* Desktop: the portrait (columns 7–12) runs from the header rule down to
   the Selected work rule. The text column starts on the same top line
   with (01); the headline, then the figures beside the intro and logos,
   follow beneath it, and the column's padding keeps the section gap
   above the Selected work rule */
@media (min-width: 681px) {
  .hero {
    margin-top: 0;
    align-items: stretch;
  }

  .hero + .section {
    margin-top: 0;
  }

  .hero-text {
    padding-bottom: var(--space-2xl);
  }

  /* the text column sets the hero's height; the portrait fills it */
  .hero .hero-media .card-media {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Numbers as type: 7+ (col 1) and 100M+ (cols 2–3) at poster scale */
.stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin: 0;
}

.stats div:last-child {
  grid-column: 2 / -1;
}

/* Figures highlighted like selected text: red fill hugging the number,
   widened sideways with box-shadow so the digits stay on the grid */
/* Desktop: the red blocks fill their columns — 7+ col 1, 100M+ cols 2–3 —
   so the two figures together span columns 1–3 */
.stats dt {
  width: fit-content;
  /* the red block's left edge sits on the column line, flush with the
     headline above; the padding is inside the block */
  padding: 0.06em 0.1em 0.02em;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.88;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 681px) {
  .stats dt {
    width: auto;
    min-width: max-content;
    /* sized so the "100M+" block fills exactly cols 2–3
       ((100vw − 13 gutters) / 6 + 1 gutter); the block measures ~3.58em */
    font-size: calc(((100vw - 13 * var(--pad)) / 6 + var(--pad)) / 3.6);
  }
}

/* Labels highlighted like selected text: a red fill hugging the word */
.stats dd {
  width: fit-content;
  margin: 8px 0 0;
  padding: 0 4px;
  background: var(--accent);
  color: #fff;
}

/* Intro and logos form one block exactly as wide as the row of logos: the
   intro wraps to that width (width 0 / min-width 100% keeps it from
   widening the block) */
/* Intro and logos fill columns 4–6: the intro flush left from col 4, one
   logo flush left on each of cols 4, 5 and 6 */
.hero-proof {
  display: grid;
  gap: 24px;
}

.hero-info {
  grid-column: 4 / -1;
  grid-row: 1;
  display: grid;
}

.hero-intro {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

/* one logo per column (4, 5, 6), each flush left on its column line */
.clients {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--pad);
}

.client {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Client logos: one height, greyscale; hovering the row shows all three
   in colour together */
.client img {
  display: block;
  height: clamp(18px, 1.7vw, 26px);
  width: auto;
  filter: grayscale(1) brightness(0.6) contrast(4);
  transition: filter 0.35s var(--ease);
}

.clients:hover .client img {
  filter: none;
}

/* Portrait (cols 7–12); its bottom edge is shared with the text column */
.hero-media {
  grid-column: 7 / -1;
  position: relative;
}

.hero-media .card-media {
  aspect-ratio: 4 / 5;
}

/* The figure stands near the photo's right edge: crop from the right and
   enlarge slightly from that edge so she sits closer to the centre */
.hero-media .card-media img {
  position: absolute;
  inset: 0;
  object-position: 100% 55%;
  transform: scale(1.1);
  transform-origin: 100% 55%;
}

/* ---------- Media ---------- */
.card-media {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
}

/* Images are shown as they are: no tint, no zoom. Positioned so a loaded
   image covers its placeholder caption. */
.card-media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.card-media img.is-loaded {
  opacity: 1;
}

/* Pictures (work covers, AI experiments, hero portrait) are shown in black
   and white, and in colour on hover. Experiment thumbnails are filtered as a
   whole, so the CSS geometric covers turn grey too */
.halftone .card-media img,
.exp-thumb .card-media,
.hero-media .card-media img,
.about-media .card-media img,
.about-page-media .card-media img {
  filter: grayscale(1);
  transition: filter var(--dur) var(--ease), opacity 0.4s var(--ease);
}

.halftone:hover .card-media img,
.halftone:focus-visible .card-media img,
.exp-row:hover .exp-thumb .card-media,
.exp-row:focus-visible .exp-thumb .card-media,
.hero-media:hover .card-media img,
.about-media:hover .card-media img,
.about-page-media:hover .card-media img {
  filter: none;
}

/* Linked cards: the title turns red, and the square (black at rest)
   turns red with it */
.work-title,
.card-tags > .arrow,
.project-nav .next .display {
  transition: color var(--dur) var(--ease);
}

.card-tags > .arrow {
  color: var(--fg);
}

.work-card:hover .work-title,
.work-card:hover .card-tags > .arrow,
.work-card:focus-visible .work-title,
.work-card:focus-visible .card-tags > .arrow,
.exp-row:hover .card-tags > .arrow,
.exp-row:focus-visible .card-tags > .arrow,
.project-nav .next:hover .display {
  color: var(--accent);
}

.card-media .ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  font-family: var(--sans);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* ---------- Geometric covers (CSS) ---------- */
/* Black / red / paper shapes in the Swiss poster manner, sized in % so they
   hold their composition at any card ratio */
.art {
  --paper: #ffffff;
  position: relative;
  overflow: hidden;
  container-type: size;
}

.art i {
  position: absolute;
  display: block;
}

/* arc: black field, red disc crossing it, small black disc */
.art-arc {
  background: var(--paper);
}

.art-arc i:nth-child(1) {
  inset: 0 52% 0 0;
  background: var(--fg);
}

.art-arc i:nth-child(2) {
  top: -30%;
  left: 30%;
  height: 160%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
}

.art-arc i:nth-child(3) {
  right: 7%;
  bottom: 12%;
  height: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fg);
}

/* steps: red field, three black squares stepping down a diagonal */
.art-steps {
  background: var(--accent);
}

.art-steps i {
  height: 38%;
  aspect-ratio: 1;
  background: var(--fg);
}

.art-steps i:nth-child(1) {
  top: 0;
  left: 18%;
}

/* steps are spaced by the frame's height (cqh) so they never overlap */
.art-steps i:nth-child(2) {
  top: 31%;
  left: calc(18% + 40cqh);
}

.art-steps i:nth-child(3) {
  top: 62%;
  left: calc(18% + 80cqh);
  background: var(--paper);
}

/* ---------- Work cards ---------- */
/* Work cards sit on the 12-column grid: each spans 6 columns (1–6 and
   7–12), with the number as a label above the image. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* negative space carries the grid: a gutter between columns, the item
     interval (64) between rows — clearly less than the section interval */
  gap: var(--space-2xl) var(--pad);
}

.work-card {
  grid-column: span 6;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
  row-gap: 8px;
  min-width: 0;
}

.work-card .card-media,
.work-meta {
  grid-column: 1 / -1;
}

.work-card.is-hidden {
  display: none;
}

.work-card .card-media {
  aspect-ratio: 16 / 6;
}

.work-meta {
  position: relative;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
  row-gap: 8px;
  padding-top: 16px;
}

.work-meta > * {
  grid-column: 1 / -1;
}

/* the square sits at the right end of the tags line — the card's last
   line — centred on it */
.card-tags {
  position: relative;
}

.card-tags > .arrow {
  position: absolute;
  right: 0;
  bottom: calc((1lh - var(--arrow)) / 2);
}

/* Card tags: one line, highlighted like selected text */

.card-tags {
  margin: 0;
  padding-right: 32px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--accent);
}

/* Every label / content table: label black, content red */
.facts dt.cat,
.project-meta dt.cat {
  color: var(--fg);
}

.facts dd,
.project-meta dd {
  color: var(--accent);
}

.work-title,
.index-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.work-sum {
  margin: 0 0 8px;
  max-width: 34em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

/* ---------- AI experiments: two in one row ---------- */
/* A compact row of two (cols 1–6, 7–12): a 2:1 thumbnail, then
   the title + kind with the square on the right (no summary) */
.exp-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pad);
  row-gap: var(--space-2xl);
}

/* Experiment cards follow the work cards: image, then a red label (the
   log number and year), the title, the catalog line in red, and the square
   at the foot */
.exp-index > li {
  display: grid;
}

.exp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
}

.exp-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* label, title, then the catalog line on a shared bottom line */
  grid-template-rows: auto auto 1fr;
  height: 100%;
  align-content: start;
  padding-bottom: 0;
}

.exp-meta > * {
  grid-column: 1 / -1;
}

.exp-meta .card-tags {
  align-self: end;
}

.exp-thumb .card-media {
  aspect-ratio: 2 / 1;
}

.exp-title {
  transition: color var(--dur) var(--ease);
}

.exp-row:hover .exp-title,
.exp-row:focus-visible .exp-title {
  color: var(--accent);
}

/* ---------- Hover highlight on statement lines ---------- */
/* Each line of the About statement and each philosophy word turns into a
   red "selected" highlight under the pointer. Lines are sized to their
   text (right-aligned lines keep their place with margin-left: auto). */
.statement span,
.principle h3 {
  width: fit-content;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.statement .r {
  margin-left: auto;
}

/* justified line: flush with both edges, the word space opens up */
.statement .j {
  width: auto;
  text-align: justify;
  text-align-last: justify;
}

.statement span:hover,
.principle:hover h3 {
  background: var(--accent);
  color: #fff;
  box-shadow: 0.08em 0 0 var(--accent), -0.08em 0 0 var(--accent);
}

/* Hero headline: each line swaps red and black under the pointer — black
   lines turn red, the red "clarity." turns black. Lines are sized to their
   text so only the line under the pointer reacts */
.hero-text .hero-title span {
  width: fit-content;
  transition: color var(--dur) var(--ease);
}

.hero-text .hero-title .r {
  margin-left: auto;
}

.hero-text .hero-title span:hover {
  color: var(--accent);
}

.hero-text .hero-title span.hl:hover {
  color: var(--fg);
}

/* the line under a philosophy word turns red with it */
.principle p {
  transition: color var(--dur) var(--ease);
}

.principle:hover p {
  color: var(--accent);
}

/* ---------- Hover frame ---------- */
/* Work cards and experiment rows have no frames at rest; on hover the
   piece's frame appears — 1px black, half a gutter outside the content
   and --frame-y above and below, so nothing moves */
:root {
  --frame-y: 16px;
}

.work-card,
.exp-row {
  position: relative;
}


.work-card::after,
.exp-row::after {
  content: "";
  position: absolute;
  inset: calc(var(--frame-y) * -1) calc(var(--pad) / -2);
  border: 1px solid var(--fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.work-card:hover::after,
.work-card:focus-visible::after,
.exp-row:hover::after,
.exp-row:focus-visible::after {
  opacity: 1;
}

.work-card:focus-visible,
.exp-row:focus-visible {
  outline: none;
}

/* ---------- About (home) ---------- */

/* Magazine page on the 12-column grid:
   statement (1–6)                                  | portrait
   bio flush right (3–6) | facts flush left (7–9)   | (10–12, both rows) */
.about {
  align-items: start;
  row-gap: var(--space-l);
}

/* "What I do." sits at title level */
.services-head .display {
  font-size: var(--fs-title);
  line-height: 1.1;
}

/* The statement is set exactly like the hero headline: same size (fitted
   to six columns) and the same left / right rhythm */
.statement {
  grid-column: 1 / 7;
  grid-row: 1;
}

/* Text block set like a Swiss poster: two columns meet at one axis (the
   gutter between columns 6 and 7). The bio is flush right on columns 3–6;
   the facts and the button are flush left on columns 7–9. Both start on
   the same top line. */
.about-body {
  grid-column: 1 / 11;
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.about-lead {
  grid-column: 3 / 7;
  text-align: right;
}

.about-lead p {
  margin: 0;
}

/* paragraphs separated by one blank line */
.about-lead p + p {
  margin-top: var(--lh-body);
}

.about-side {
  grid-column: 7 / 11;
  align-self: stretch;
  display: grid;
  /* on the page columns 7–9 */
  grid-template-columns: subgrid;
  /* facts at the top; the button drops to the foot, level with the last
     line of the bio */
  grid-template-rows: auto auto 1fr;
}

.about-tags {
  display: contents;
  color: var(--accent);
}

.about-tags li {
  grid-column: 1 / -1;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* each fact stays on one line; it sits below the round portrait's curve,
   so it never touches it */
@media (min-width: 1025px) {
  .about-tags li {
    white-space: nowrap;
  }
}

.about-tags li + li {
  padding-top: 8px;
}

/* the resume button spans four columns (7–10) */
/* the resume button takes the row right under the bio's last line, with
   no gap, as wide as the portrait (cols 7–9; tablet 7–10) */
.about-resume {
  grid-column: 7 / 10;
  grid-row: 2;
  justify-self: stretch;
  justify-content: space-between;
  margin-top: 0;
}

.about-lead,
.about-side {
  grid-row: 1;
}

/* Portrait with a magazine caption under it */
/* the portrait sits beside the statement, directly above the facts it
   introduces (cols 7–9) */
.about-media {
  grid-column: 7 / 10;
  grid-row: 1;
  align-self: end;
  margin: 0;
}


/* Portrait cropped to a circle as wide as its columns: head and shoulders */
.about-media .card-media {
  aspect-ratio: 1;
  border-radius: 50%;
}

.about-media .card-media img {
  object-position: 50% 30%;
}

/* Dividers sit at the start of the gutter: one full gutter between the
   rule and the text, and the text stays on its column line */


/* ---------- Philosophy ---------- */
.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--pad);
}

/* Desktop: three equal blocks of four columns (1–4, 5–8, 9–12), all flush
   left */
@media (min-width: 1025px) {
  .principles {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .principle { grid-column: span 4; }
}

.principle {
  position: relative;
}

.principle h3 {
  margin: 0 0 16px;
  padding-bottom: 0;
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: 0.01em;
}

.principle p {
  margin: 0;
  max-width: 18em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

/* ---------- Contact ---------- */
/* The links box steps down below the headline (row 2, cols 10–12) */
.contact {
  align-items: start;
  row-gap: 0;
}

.contact .display {
  grid-row: 1;
}

.contact-side {
  grid-row: 2;
}

/* the link box takes the row right under the line, with no gap */

.contact .display {
  grid-column: 1 / 10;
  font-size: var(--fs-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Desktop: sized so the red bar of the first line ends exactly on the end
   of column 8 — the same edge as the footer's link numbers. Cols 1–8 span
   (2/3)(page width) − gutter/3; the line plus its bar measures ~15.08em */
@media (min-width: 681px) {
  .contact .display {
    font-size: calc(((100vw - 2 * var(--pad)) * 2 / 3 - var(--pad) / 3) / 15.08);
  }
}

/* Contact links: one box spanning exactly cols 9–12 */
.contact-side {
  grid-column: 9 / -1;
  display: grid;
  gap: 16px;
}

/* Each link is a full-height cell of the box; the cell fills red on hover */
.contact-box {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--fg);
}

.contact-box li {
  flex: 1 1 auto;
  display: flex;
}

.contact-box a,
.contact-arrow {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--box-pad) var(--box-pad-x);
}

.contact-box a {
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.contact-box a:hover,
.contact-box a:focus-visible {
  background: var(--accent);
  color: #fff;
  outline: none;
}

.contact-box .contact-arrow {
  flex: 0 0 auto;
  width: auto;
}

/* ---------- About page ---------- */
.about-page {
  margin-top: var(--space-3xl);
  row-gap: 32px;
  align-items: start;
}

.about-page-media {
  grid-column: 1 / 6;
}

.about-page-media .card-media {
  aspect-ratio: 4 / 5;
}

.about-page-body {
  grid-column: 7 / -1;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.about-page-body p {
  max-width: 40em;
  margin: 0 0 16px;
}

.about-page-body .lead {
  margin-bottom: 24px;
}

.facts {
  margin: 40px 0 0;
}

/* label / value tables span the six columns 7–12 on the page grid:
   label cols 7–8, value from col 9 */
.facts div,
.project-meta div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--pad);
  padding: 8px 0;
}

.facts dt,
.project-meta dt {
  grid-column: 1 / 3;
}

.facts dd,
.project-meta dd {
  grid-column: 3 / -1;
}

.facts dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Index list (about page) */
.index-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pad);
  align-items: baseline;
  padding: 16px 0;
  transition: color 0.3s var(--ease);
}

.index-list li:first-child .index-row {
  padding-top: 0;
}

.index-row > :nth-child(1) {
  grid-column: 1 / 5;
}

.index-title {
  grid-column: 5 / 9;
}

.index-sum {
  grid-column: 9 / 12;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.index-row .arrow {
  grid-column: 12 / -1;
  justify-self: end;
}

.index-row:hover {
  color: var(--accent);
}

/* Capabilities */
.services {
  align-items: start;
  row-gap: 24px;
}

.services-head {
  grid-column: 1 / 5;
}

.services-list {
  grid-column: 5 / -1;
  display: grid;
  row-gap: var(--space-2xl);
}

/* on the page grid: title cols 5–7, text cols 8–12 */
.service {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--pad);
}

.service h3 {
  grid-column: 1 / 4;
}

.service p {
  grid-column: 4 / -1;
}

.service h3 {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.service p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------- Works page ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-2xl);
  padding-top: 8px;
  border-top: var(--rule);
}

/* boxes start on the column line, text inset like every other box */
.filters button {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  padding: var(--box-pad) var(--box-pad-x);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--fg);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.filters button.is-active {
  border-color: var(--fg);
}

.filters button:hover,
.filters button:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  outline: none;
}

.filters sup {
  font-size: 0.75em;
  margin-left: 2px;
}

.filters button.is-active:not(:hover) sup {
  color: var(--accent);
}

/* ---------- Project page ---------- */
.project-info {
  margin-top: var(--space-2xl);
  row-gap: 32px;
  align-items: start;
}

.project-info .lead {
  grid-column: 1 / 7;
}

.project-meta {
  grid-column: 7 / -1;
  margin: 0;
}

.project-meta dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.project-desc {
  grid-column: 7 / 12;
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.gallery {
  margin-top: var(--space-3xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pad);
}

.gallery .card-media {
  aspect-ratio: 4 / 5;
}

.gallery > :nth-child(3n + 1) {
  grid-column: 1 / -1;
}

.gallery > :nth-child(3n + 1) .card-media {
  aspect-ratio: 16 / 9;
}

.project-nav {
  margin-top: var(--space-2xl);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: var(--rule);
  padding-top: 8px;
}

.project-nav .next {
  text-align: right;
}

.project-nav .next .display {
  margin-top: 8px;
  font-size: var(--fs-title);
}

/* ---------- Case study ---------- */
/* Long-form project page on the same system: a numbered section per
   chapter, text on columns 1–6, images full width, the one gap between
   every block */
.case-title {
  grid-column: 1 / 10;
}

.case-intro {
  margin-top: var(--space-2xl);
  row-gap: var(--space-2xl);
}

.case-body > .case-label,
.case-intro > .case-label {
  margin-bottom: calc(16px - var(--space-2xl));
}

.case-lead {
  grid-column: 1 / 7;
  margin: 0;
}

/* figures: one red block per three columns, label under it */
.case-figures {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--pad);
  margin: 0;
}

.case-figures dt {
  width: fit-content;
  padding: 0.06em 0.1em 0.02em;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.case-figures dd {
  margin: 8px 0 0;
  max-width: 18em;
}

.case-figures.is-small dt {
  font-size: var(--fs-title);
}

.case-cover {
  margin-top: var(--space-2xl);
}

.case-cover .card-media {
  aspect-ratio: 16 / 7;
}

.case-cover .card-media.case-media {
  aspect-ratio: auto;
}

/* case images keep their own proportions and colour */
.card-media.case-media {
  background: none;
}

.card-media.case-media img {
  height: auto;
  object-fit: contain;
}

.case-overview,
.case-body {
  align-items: start;
  row-gap: var(--space-2xl);
}

.case-role {
  grid-column: 1 / 7;
}

.case-role-fig {
  margin-bottom: var(--space-xl);
}

.case-facts {
  grid-column: 7 / -1;
  margin: 0;
}

.case-timeline {
  grid-column: 1 / -1;
}

.case-sub {
  margin: 0 0 16px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  color: var(--accent);
}

.case-label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--accent);
}

.case-body > * {
  grid-column: 1 / -1;
}

.case-statement {
  margin: 0;
  grid-column: 1 / 10 !important;
  font-size: var(--fs-title);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.case-text {
  grid-column: 1 / 7 !important;
}

.case-text p,
.case-role p {
  margin: 0;
}

.case-text p + .case-list,
.case-text p + p {
  margin-top: 16px;
}

/* lists: a red square before each line */
.case-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-list li {
  position: relative;
  padding-left: 24px;
}

.case-list li + li {
  margin-top: 8px;
}

.case-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((var(--lh-body) - 8px) / 2);
  width: 8px;
  height: 8px;
  background: var(--accent);
}

.case-list.is-pro li::before {
  background: var(--fg);
}

.case-list.is-con li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* pros and cons: a drawn check and cross in black, no emoji */
.case-list.is-check li,
.case-list.is-cross li {
  padding-left: 24px;
}

.case .case-list.is-check li::before,
.case .case-list.is-cross li::before {
  content: "";
  background: none;
  box-shadow: none;
}

/* check: the bottom and right edges of a narrow box, turned 45° */
.case .case-list.is-check li::before {
  left: 3px;
  top: calc(var(--lh-body) / 2 - 7px);
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);
  transform: rotate(45deg);
}

/* cross: two 2px bars */
.case .case-list.is-cross li::before,
.case .case-list.is-cross li::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) / 2 - 1px);
  width: 12px;
  height: 2px;
  background: var(--fg);
  transform: rotate(45deg);
}

.case .case-list.is-cross li::after {
  transform: rotate(-45deg);
}

.case-verdict-intro {
  margin: 0;
}

.case-fig {
  margin: 0;
}

/* two images side by side, cols 1–6 and 7–12 */
.case-pair,
.case-quotes,
.case-shift {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pad);
  row-gap: 16px;
  align-items: start;
}

.case-quotes blockquote {
  margin: 0;
}

.case-quotes blockquote p {
  margin: 0 0 8px;
}

.case-quotes cite {
  font-style: normal;
}

/* from → to: two columns, the "to" side in red */
.case-shift > div p {
  margin: 8px 0 0;
  font-size: var(--fs-title);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.case-shift > div:last-of-type p {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.case-shift > div:last-child p {
  color: var(--accent);
}

/* an exploration: title, image on cols 1–8, verdict on cols 9–12 */
.case-option {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pad);
  row-gap: 16px;
  align-items: start;
}

.case-option > .case-sub,
.case-option > .case-h { grid-column: 1 / -1; margin: 0; }
.case-option > .case-fig { grid-column: 1 / 9; }
.case-option > .case-verdict { grid-column: 9 / -1; display: grid; gap: 16px; }
.case-option > .case-note { grid-column: 1 / 7; margin: 0; }

/* summary: three short columns (problem / solution / impact) */
.case-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--pad);
  margin: 0;
}

.case-summary dd {
  margin: 0;
}

.case-ba-title {
  margin: 0 0 4px;
  font-size: var(--fs-title);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.case-ba .case-media {
  margin: 16px 0;
}

.case-role-title {
  margin: 0 0 var(--space-xl);
  font-size: var(--fs-title);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.case-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pad);
}

.case-credits {
  grid-column: 1 / -1;
  margin: 0;
  max-width: calc(50% + var(--pad) / 2);
}

.case-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--pad);
}

.case-trio figcaption {
  margin-top: 16px;
}

.case-trio figcaption p {
  margin: 0;
}

/* screenshots and diagrams lift off the white page as a card: a soft
   shadow, no border */
.is-framed .card-media.case-media {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.case-body > .case-fig.is-md {
  grid-column: 1 / 9;
}

@media (max-width: 680px) {
  .case-body > .case-fig.is-md { grid-column: 1 / -1; }
}

/* the case study's three text levels: section rule, a mid heading
   (.case-h), the big statement (.case-statement); bold stays inline */
.case-h {
  margin: 0;
  font-size: var(--fs-title);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.case-body > .case-h {
  grid-column: 1 / 10;
  margin-bottom: calc(16px - var(--space-2xl));
}

.case-role > .case-h,
.case-timeline > .case-h {
  margin-bottom: 16px;
}

.case-body strong,
.case-overview strong {
  font-weight: 700;
}

.case-shift.is-quiet > div:first-of-type p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

.case-more {
  margin-top: var(--space-2xl);
}

/* a row of n images, each with an optional caption */
.case-row,
.case-cards {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  column-gap: var(--pad);
  row-gap: 16px;
  align-items: start;
}

.case-row figcaption {
  margin-top: 8px;
}

/* text cards: a bold title over a short paragraph or list */
.case-card-title {
  margin: 0 0 8px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 700;
}

.case-cards p {
  margin: 0;
}

.case-cards p + p,
.case-cards p + .case-list,
.case-text .case-list + p,
.case-cards .case-list + p {
  margin-top: 16px;
}

/* text on columns 1–6, image on 7–12 (narrow: 9–12) */
.case-side {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pad);
  align-items: start;
}

.case-side-text { grid-column: 1 / 7; }
.case-side > .case-fig { grid-column: 7 / -1; }
.case-side.is-narrow > .case-fig { grid-column: 9 / -1; }

.case-side-text p {
  margin: 0;
}

.case-side-text p + p,
.case-side-text p + .case-list,
.case-side-text .case-list + p {
  margin-top: 16px;
}

.case-verdict-label {
  margin: 16px 0 8px !important;
  color: var(--accent);
}

@media (max-width: 1024px) {
  .case-row[style*="--n:4"],
  .case-row[style*="--n:5"],
  .case-cards[style*="--n:4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-cards[style*="--n:3"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .case-row,
  .case-cards {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: var(--space-xl);
  }

  /* the eight reference posters stay two across */
  .case-row[style*="--n:8"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 16px;
  }

  .case-side { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .case-side > * { grid-column: 1 / -1 !important; }

  .case-title,
  .case-lead,
  .case-role,
  .case-facts,
  .case-statement,
  .case-text,
  .case-option > * {
    grid-column: 1 / -1 !important;
  }

  .case-figures,
  .case-summary,
  .case-columns,
  .case-pair,
  .case-quotes,
  .case-shift,
  .case-trio {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl);
  }

  .case-option {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-cover .card-media {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Footer ---------- */
/* Text row on the grid (name col 5, links col 7, credits col 10), then the
   ZC mark set across the full width and cut by the bottom of the page. */
.site-footer {
  margin-top: var(--space-2xl);
  overflow: hidden;
}

/* Desktop: the cut mark (cols 1–4) rises beside the footer text (cols
   5–9) — they never overlap — its capitals starting on the last link row. The base row is laid over the text row; its empty area lets
   clicks through to the links. (Below 1101px the imprint shares columns
   with the links, so the mark stays on its own row there.) */
@media (min-width: 1101px) {
  .site-footer {
    display: grid;
  }

  .footer-top,
  .footer-base {
    grid-area: 1 / 1;
  }

  .footer-base {
    /* the mark's capitals start on the last link row ("About"): rule +
       padding + two 24px rows */
    padding-top: calc(1px + var(--space-2xl) / 2 + 2 * (var(--lh-label) + 8px));
    pointer-events: none;
  }

  .footer-base > * {
    pointer-events: auto;
  }

  .footer-base .footer-mark {
    margin-top: calc(var(--bleed) * -0.03);
  }
}

.footer-top {
  border-top: var(--rule);
  /* the footer is set tighter than the page: half the section gap */
  padding-top: calc(var(--space-2xl) / 2);
  align-items: start;
  row-gap: 24px;
}

.footer-top p,
.footer-top ul {
  margin: 0;
}

.footer-role {
  grid-column: 5 / 7;
}

/* The role sits on the second row of the link list (one 24px row pitch:
   16px line + 4px + 4px padding), level with "AI Experiments" */
.footer-role .cat {
  display: block;
  margin-top: 8px;
}

/* Footer links: a list on cols 7–8. Hover fills the
   row red; the fill is extended sideways with box-shadow so the text and
   the rules stay on the grid. */
.footer-top .footer-col {
  grid-column: 7 / 9;
  margin: 0;
}

.footer-col a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.footer-col li:first-child a {
  padding-top: 0;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  background: var(--accent);
  box-shadow: -8px 0 0 var(--accent), 8px 0 0 var(--accent);
  color: #fff;
  outline: none;
}

.footer-col li:first-child a:hover,
.footer-col li:first-child a:focus-visible {
  box-shadow: -8px 0 0 var(--accent), 8px 0 0 var(--accent), 0 -4px 0 var(--accent), -8px -4px 0 var(--accent), 8px -4px 0 var(--accent);
}

/* Base row: the cut mark on columns 1–4, the credits in the bottom-right
   corner on columns 9–12, sitting on the page edge like a poster's imprint */
.footer-base {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pad);
  align-items: end;
}

.footer-base .footer-mark {
  grid-column: 1 / 5;
}

/* flush right, on the right edge of the nav box above */
.credits {
  grid-column: 9 / -1;
  margin: 0;
  padding-bottom: 16px;
  text-align: right;
}

/* Imprint set as a highlight: red fill, white type */
.credits span {
  padding: 0 4px;
  background: var(--accent);
  color: #fff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Desktop and tablet: the imprint is a red bar on cols 9–12, as wide as
   the contact box, its text inset like the box's cells */
@media (min-width: 681px) {
  .credits {
    grid-column: 9 / -1;
    text-align: left;
  }

  .credits span {
    display: block;
    padding: 0 var(--box-pad-x);
  }
}


/* Bleed: the mark spans columns 1–4; its box is shorter than the letters,
   so the page edge cuts through the lower part and the red square */
.footer-mark {
  display: block;
  color: inherit;
  text-decoration: none;
  --bleed: calc(((100vw - 13 * var(--pad)) / 3 + 3 * var(--pad)) / 1.498);
  /* 16px under the footer text; the line box starts ~0.03em above the
     capitals, so pull it up by that much */
  margin-top: calc(var(--lh-body) - var(--bleed) * 0.03);
  height: calc(var(--bleed) * 0.64);
  overflow: hidden;
  font-weight: 700;
  font-size: var(--bleed);
  line-height: 0.8;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* Same hover as the header mark: letters red, square black */
.footer-mark > span,
.footer-mark .sq {
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.footer-mark:hover > span {
  color: var(--accent);
}

.footer-mark:hover .sq {
  background: var(--fg);
}

.footer-mark > span {
  display: inline-block;
  margin-left: -0.0324em;
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.reveal.is-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .card-media img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Responsive ---------- */
/* Space tokens step down in 8px multiples */
@media (max-width: 1024px) {
  :root {
    --space-l: 24px;
    --space-xl: var(--space-2xl);
    --space-2xl: 40px;
    --space-3xl: var(--space-2xl);
  }
}

@media (max-width: 680px) {
  :root {
    --space-l: 24px;
    --space-xl: var(--space-2xl);
    --space-2xl: 40px;
    --space-3xl: var(--space-2xl);
  }
}

/* Narrow desktop: the nav needs one more column to keep its links on one
   line, so it spans the hero image again (cols 7–12) */
@media (min-width: 681px) and (max-width: 799px) {
  .nav {
    grid-column: 6 / -1;
  }
}

/* Mid widths: the contact box spans columns 9–12 */
@media (min-width: 681px) and (max-width: 1100px) {
  .contact-side {
    grid-column: 9 / -1;
  }

  .contact .display {
    grid-column: 1 / 9;
  }
}

@media (max-width: 1024px) {
  .hero-text {
    grid-column: 1 / 7;
  }

  .hero-media {
    grid-column: 7 / -1;
  }

  /* tablet: statement + portrait on top, the text block full width below */
  .about-media {
    grid-column: 7 / 11;
    grid-row: 1;
  }

  .about-body {
    grid-column: 1 / -1;
  }

  .about-lead {
    grid-column: 1 / 7;
  }

  .about-side {
    grid-column: 7 / -1;
  }

  .contact .display {
    grid-column: 1 / -1;
  }

  .index-sum {
    display: none;
  }

  .index-title {
    grid-column: 5 / 12;
  }
}

@media (max-width: 680px) {
  .grid-12 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .grid-12 > * {
    grid-column: 1 / -1 !important;
  }

  /* Header: compact mark + menu toggle */
  .site-header {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .site-header {
    --brand-fs: 40px;
    row-gap: 0;
  }

  /* phones: the same half gap under the menu box */
  .site-header::after {
    margin-top: calc(var(--space-2xl) / 2);
  }

  .brand {
    grid-column: 1 / 2 !important;
    line-height: 0.9;
  }

  /* phones: statement, text (one column, flush left), portrait */
  .about-body,
  .about-media {
    grid-row: auto;
  }

  .about-lead {
    text-align: left;
  }

  .about-body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .about-body > * {
    grid-column: 1 / -1 !important;
  }


  /* phones: the experiments stack */
  .exp-index {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Menu button: the same outlined box as the nav — red on hover,
     black while the menu is open */
  .menu-btn {
    display: block;
    grid-column: 2 / 3 !important;
    grid-row: 1;
    padding: var(--box-pad) var(--box-pad-x);
    border: 1px solid var(--fg);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .menu-btn:hover,
  .menu-btn:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    outline: none;
  }

  .menu-btn[aria-expanded="true"] {
    background: var(--fg);
    border-color: var(--fg);
    color: #fff;
  }

  .hero-media .card-media {
    height: auto;
  }

  .stats div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  /* Open menu: one outlined box, a 48px cell per link (stacked version of
     the desktop nav) */
  .nav {
    display: none;
    flex-direction: column;
    margin-top: 16px;
    border: 1px solid var(--fg);
  }

  .nav a,
  .nav a.link-line {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 16px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .nav a + a {
    border-top: 1px solid var(--fg);
  }

  .nav a:hover,
  .nav a:focus-visible {
    background: var(--accent);
    color: #fff;
    outline: none;
  }

  .nav-contact {
    display: block;
  }

  .nav-open .nav {
    display: flex;
  }


  .hero-title {
    font-size: calc((100vw - 2 * var(--pad)) / 8.2);
  }

  .hero-text .hero-title {
    font-size: calc((100vw - 2 * var(--pad)) / 7.933);
  }

  .hero-bottom > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .stats {
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 40px;
  }

  .stats div:last-child {
    grid-column: auto;
  }

  .hero-bottom {
    row-gap: 32px;
  }

  .display-xl {
    font-size: var(--fs-display);
  }

  .hero-media .card-media {
    aspect-ratio: 4 / 5;
  }

  .sec-head {
    grid-template-columns: auto 1fr auto;
    column-gap: 16px;
    row-gap: 0;
  }

  .sec-head > * {
    grid-column: auto !important;
  }

  /* sub-page heads: (01) + name row like the phone section heads */
  .page-title.grid-12,
  .project-head.grid-12 {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
  }

  .page-title > .idx,
  .project-head > .idx {
    grid-column: 1 !important;
  }

  .page-title > .hero-role,
  .project-head > .hero-role {
    grid-column: 2 !important;
  }

  /* (01) + role row, set like the phone section heads */
  .hero-text {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
  }

  .hero-text .idx {
    grid-column: 1;
  }

  .hero-text .hero-role {
    grid-column: 2;
  }

  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .work-card {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }

  /* phones: principles stack, separated by space */
  .principles {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl);
  }

  /* phones: company + square on top, then title and summary */
  .index-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .index-row > * {
    grid-column: 1 / -1 !important;
  }

  .index-row > :nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1;
  }

  .index-row .arrow {
    grid-row: 1;
    grid-column: 2 !important;
  }

  .service {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  .service > * {
    grid-column: 1 / -1;
  }

  /* one column on phones: the mark takes the full content width */
  .footer-mark {
    --bleed: calc((100vw - 2 * var(--pad)) * 0.66 / 1.498);
  }

  /* phones: the imprint is a full-width red bar right under the contact
   box, as wide as it; the mark (two-thirds wide) sits below */
  .footer-base {
    grid-template-columns: 2fr 1fr;
  }

  .footer-base .footer-mark {
    grid-column: 1 / 2;
  }

  .credits {
    order: -1;
    grid-column: 1 / -1;
    margin-top: 16px;
    padding-bottom: 0;
    text-align: left;
  }

  .credits span {
    display: block;
    padding: 0 var(--box-pad-x);
  }

  .contact-box {
    flex-wrap: wrap;
  }

  .gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery .card-media,
  .gallery > :nth-child(3n + 1) .card-media {
    aspect-ratio: 4 / 5;
  }
}

/* Case pages keep red to the structure (section titles, the project label);
   everything inside a case reads black */
.case .case-sub,
.case .case-label,
.case .facts dd,
.case .case-shift > div:last-child p {
  color: var(--fg);
}

.case .case-list li::before {
  background: var(--fg);
}

.case .case-figures dt {
  background: var(--fg);
}

.case-snapshot {
  margin-bottom: var(--space-2xl);
}

/* a white cover image lifts off the white page like the screenshots */
.case-cover .card-media.case-media {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Overview: four blocks stacked with the one gap; each is a heading,
   16px, then its content. Text stays on columns 1–8; the facts sit in
   three columns (team 1–6, time 7–9, methods 10–12) like the source */
.case-overview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xl);
}

.case-ov > .case-h,
.case-facts .case-h {
  margin: 0 0 16px;
}

.case-ov > .case-list,
.case-ov > .case-role-fig,
.case-ov > p {
  max-width: calc((100% - 11 * var(--pad)) / 12 * 6 + 5 * var(--pad));
}

.case-ov > .case-role-fig {
  margin: 0 0 var(--space-l);
}

.case-overview .case-facts {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pad);
  margin: 0;
}

.case-overview .case-facts > div:nth-child(1) { grid-column: 1 / 7; }
.case-overview .case-facts > div:nth-child(2) { grid-column: 7 / 10; }
.case-overview .case-facts > div:nth-child(3) { grid-column: 10 / -1; }

.case-overview .case-facts dd {
  margin: 0;
  color: var(--fg);
}

/* case images show only a grey block while loading, never their alt text */
.case-media .ph {
  font-size: 0;
}

@media (max-width: 680px) {
  .case-overview .case-facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-l);
  }

  .case-overview .case-facts > div { grid-column: 1 / -1 !important; }
  .case-ov > .case-list,
  .case-ov > .case-role-fig,
  .case-ov > p { max-width: none; }
}

.case-text > .case-h,
.case-side-text > .case-h {
  margin: 0 0 16px;
}

/* numbered lists: the number takes the square's place */
.case-list.is-num {
  counter-reset: n;
}

.case-list.is-num li {
  counter-increment: n;
}

.case .case-list.is-num li::before {
  content: counter(n) ".";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  font-variant-numeric: tabular-nums;
}

/* from → to lines: the old state in regular weight, the new in bold */
.case-map p {
  display: grid;
  grid-template-columns: minmax(0, 4fr) auto minmax(0, 7fr);
  column-gap: var(--pad);
  margin: 0;
  padding: 12px 0;
  font-size: var(--fs-title);
  line-height: 1.15;
}

.case-map strong { font-weight: 700; }

.case-cards > div > .case-verdict-label { margin-top: 0 !important; }
.case-cards .case-card-title {
  font-size: var(--fs-title);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.case .case-verdict-label {
  color: var(--fg);
}

.case-body > .case-pair.is-md {
  grid-column: 1 / 9;
}

@media (max-width: 680px) {
  .case-body > .case-pair.is-md { grid-column: 1 / -1; }
}

/* small rows (the reference posters): cols 1–8, four across, so each
   image spans two columns */
.case-body > .case-row.is-md {
  grid-column: 1 / 9;
}

/* small: cols 1–6, for screenshots whose source is too small to show
   larger without blurring */
.case-body > .case-fig.is-sm,
.case-body > .case-row.is-sm {
  grid-column: 1 / 7;
}

@media (max-width: 680px) {
  .case-body > .case-fig.is-sm,
  .case-body > .case-row.is-sm { grid-column: 1 / -1; }
}

.case-row.is-md[style*="--n:8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 680px) {
  .case-body > .case-row.is-md { grid-column: 1 / -1; }
}

/* tracking follows the scale: labels and title-size lines carry their own */
.case-sub {
  letter-spacing: 0.01em;
}

.case-map p {
  letter-spacing: 0.01em;
}

.case-map strong {
  letter-spacing: -0.01em;
}

/* project page end: three cards across */
.work-grid.is-three > .work-card {
  grid-column: span 4;
}

@media (max-width: 1024px) {
  .work-grid.is-three > .work-card { grid-column: span 6; }
  .work-grid.is-three > .work-card:nth-child(3) { display: none; }
}

@media (max-width: 680px) {
  .work-grid.is-three > .work-card { grid-column: 1 / -1; }
  .work-grid.is-three > .work-card:nth-child(3) { display: grid; }
}

/* a block's title spans the block, 16px above its images or cards */
.case-row > .case-h,
.case-cards > .case-h,
.case-pair > .case-h,
.case-quotes > .case-h {
  grid-column: 1 / -1;
  margin: 0;
}

/* n columns, each an image on a common baseline, a label and its notes */
.case-cols {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  column-gap: var(--pad);
  row-gap: 16px;
}

.case-cols > .case-h {
  grid-column: 1 / -1;
  margin: 0;
}

.case-cols .case-fig .card-media {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
}

.case-cols .case-fig .card-media img {
  max-height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: bottom;
}

.case-cols .case-sub {
  margin: 16px 0 8px;
}

.case-cols p {
  margin: 0;
}

.case-cols p + .case-list {
  margin-top: 8px;
}

@media (max-width: 1024px) {
  .case-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
}

@media (max-width: 680px) {
  .case-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Footer contact: the same Email / LinkedIn box as the home page's
   "Get in touch", on cols 9–12 — only on pages without that section */
.footer-top .footer-contact {
  grid-column: 9 / -1;
  display: none;
}

body[data-page="project"] .footer-top .footer-contact {
  display: block;
}

/* the links never wrap; on phones the box takes the full width */
.contact-box a {
  white-space: nowrap;
}

@media (max-width: 680px) {
  .contact-side,
  .footer-top .footer-contact {
    grid-column: 1 / -1;
  }

  .contact-box {
    flex-wrap: nowrap;
  }
}

@media (max-width: 680px) {
  .about-lead,
  .about-side,
  .about-resume {
    grid-row: auto;
  }

  .about-resume {
    margin-top: 0;
  }
}

@media (max-width: 680px) {
  .contact.grid-12 {
    row-gap: 0;
  }
}

/* tablet: the role gets one more column (4–6) so it stays on one line and
   keeps the 24px row rhythm of the links beside it */
@media (min-width: 681px) and (max-width: 1100px) {
  .footer-role {
    grid-column: 4 / 7;
  }
}

@media (min-width: 681px) and (max-width: 1024px) {
  .about-resume {
    grid-column: 7 / 11;
  }
}

/* ---------- About, Swiss pass ----------
   Two vertical axes only: column 1 (statement, bio) and column 7 (photo,
   facts, button). Everything flush left; the photo is a circle on the
   grid; red is kept for the section title and the button's square. */
.about-media .card-media {
  aspect-ratio: 1;
  border-radius: 50%;
}

.about-media {
  align-self: start;
}

.about-lead {
  grid-column: 1 / 7;
  text-align: left;
}

.about-lead .hl {
  color: inherit;
}

.about-facts {
  grid-column: 1 / -1;
  margin: 0;
  display: grid;
  row-gap: 16px;
}

.about-facts dt {
  margin-bottom: 4px;
}

.about-facts dd {
  margin: 0;
}

/* Desktop and tablet: the bio follows the statement directly, beside the
   photo; the facts and the button follow the photo in its column */
@media (min-width: 681px) {
  .about.grid-12 {
    row-gap: 0;
  }

  .about-body {
    display: contents;
  }

  .about .statement { grid-row: 1; }

  .about-media {
    grid-row: 1 / span 2;
  }

  /* the bio starts on the same row as the facts, under the photo */
  .about-lead {
    grid-row: 3 / span 2;
    grid-column: 1 / 7;
    margin-top: var(--space-l);
  }

  .about-side {
    grid-row: 3;
    grid-column: 7 / 11;
    margin-top: var(--space-l);
  }

  /* one 24px row below the facts' usual 16px step */
  .about-resume {
    grid-row: 4;
    margin-top: calc(16px + var(--lh-body));
  }
}

/* Desktop and tablet: the statement and the bio are set flush right on
   columns 1–6, against the axis at column 7 where the photo starts */
@media (min-width: 681px) {
  .about .statement span {
    margin-left: auto;
  }

  .about-lead {
    text-align: right;
  }
}

/* A live prototype in a frame on the full grid width, and a screen
   recording at its own proportions */
.case-embed,
.case-video {
  margin: 0;
}

.case-embed iframe {
  display: block;
  width: 100%;
  height: min(80vh, 820px);
  border: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.case-embed figcaption {
  margin-top: 16px;
}

.case-video video {
  display: block;
  width: 100%;
  max-width: calc((100% - 11 * var(--pad)) / 12 * 8 + 7 * var(--pad));
  height: auto;
  background: #1c1712;
}

@media (max-width: 680px) {
  .case-video video { max-width: none; }
  .case-embed iframe { height: 75vh; }
}

/* under the frame: the full-screen button (cols 1–3) and the new-tab link */
.case-embed figcaption {
  display: flex;
  align-items: center;
  gap: var(--pad);
  flex-wrap: wrap;
}

.embed-full {
  width: calc((100% - 11 * var(--pad)) / 12 * 3 + 2 * var(--pad));
  min-width: max-content;
  justify-content: space-between;
}

/* full screen (native, or the in-page fallback): the frame fills the
   screen, the button stays at the foot to exit */
.case-embed:fullscreen,
.case-embed.is-full {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--bg);
}

.case-embed.is-full {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.case-embed:fullscreen iframe,
.case-embed.is-full iframe {
  flex: 1;
  height: auto;
  box-shadow: none;
}

.case-embed:fullscreen figcaption,
.case-embed.is-full figcaption {
  margin-top: 0;
}

/* a walkthrough video as the hero: on a band in the prototype's own dark
   tone, the video at its natural proportions, centred */
.case-cover-video {
  display: flex;
  justify-content: center;
  background: #1c1712;
}

/* the video spans the full grid width, at its own proportions */
.case-cover-video video {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 680px) {
  .case-cover-video video { height: auto; width: 100%; }
}

/* Phones: the portrait sits between the statement and the bio */
@media (max-width: 680px) {
  .about .statement { order: 1; }
  .about-media { order: 2; }
  .about-body { order: 3; }
}

/* Get in touch: one 24px row between the line and the contact box */
.contact-side {
  margin-top: var(--lh-body);
}