/* Gengis · Cinematic Intelligence
   Hybrid shape: folio paper/ink/cinnabar tokens, typesafe.ai layout grammar —
   1-bit windows, dithered fields, crop marks, oversized display type. */

/* ─────────────────────────────────────────────────────────────
   TYPE — licensed from Klim Type Foundry (order 26091228)
   Die Grotesk A              body text          (replaces ABC Favorit)
   Founders Grotesk Mono      menu, labels, UI   (replaces Favorit Mono)
   American Grotesk Condensed the wordmark       (replaces Favorit Compressed)
   Signifier                  display and letter text
   Only the web (WOFF2) cuts live here; the desktop OTFs stay with the
   order in Karen's files and are never deployed.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'American Grotesk Condensed';
  src: url('../../assets/fonts/web/american-grotesk-condensed-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Die Grotesk';
  src: url('../../assets/fonts/web/die-grotesk-a-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Die Grotesk';
  src: url('../../assets/fonts/web/die-grotesk-a-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Die Grotesk';
  src: url('../../assets/fonts/web/die-grotesk-a-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Founders Grotesk Mono';
  src: url('../../assets/fonts/web/founders-grotesk-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Signifier';
  src: url('../../assets/fonts/web/signifier-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Signifier';
  src: url('../../assets/fonts/web/signifier-light-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Signifier';
  src: url('../../assets/fonts/web/signifier-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Signifier';
  src: url('../../assets/fonts/web/signifier-regular-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #e9e9e9;         /* neutral grey: the page ground */
  --on-dark: #e9e9e9;       /* the same grey, carrying text on dark grounds */
  --ink-fixed: #241d26;   /* dark text on a light ground; --ink is redefined locally, this never is */   /* light text on dark grounds; --paper is redefined locally, this never is */
  --paper-deep: #dbdbdb;
  --ink: #241d26;
  --ink-soft: #574b5c;
  --ink-faint: #6b5d70;
  --seal: #47234a;          /* the hero's poppies, at the brightness the cloud renders them */
  --seal-deep: #351a38;
  --seal-soft: #5c3060;   /* the relay strip's lighter ground */
  --field: #10131c;           /* the night sky: blue-black ink, not jet */
  --field-lit: #242c3d;       /* the same sky, lifted — the relay strip's dither */
  --lime: #a6d133;            /* the canopy, and the blossom it sheds */
  --moss: #241d26;            /* the manifesto's ground: deep leaf, not night */
  --lilac: #a58faa;           /* the hero's dithered sky */
  --crimson: #b8303a;         /* the comparison bar: the model on its own */

  --serif: 'Signifier', 'Instrument Serif', Georgia, serif;
  --sans: 'Die Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --mono: 'Founders Grotesk Mono', 'Die Grotesk', ui-monospace, Menlo, monospace;   /* Die Grotesk covers the arrows the mono lacks */
  --mark: 'American Grotesk Condensed', 'Instrument Sans', sans-serif;

  --pad-x: clamp(20px, 5vw, 76px);
  --rule: 1.5px solid var(--ink);

  /* Sampled off the rendered hero: the meadow is 54% plum, then clay and
     dusty rose. Inner pages take their key from there, so no page introduces
     a colour the homepage has not already put on screen. */
  --plum-lit: #592659;   /* the lit plum in the meadow — 10% of the render */
  --brick:    #5e3038;   /* the poppies, deepened until paper reads on them */
  --hot:      #7d2168;
}

* { box-sizing: border-box; }



html { scroll-behavior: smooth; }



body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}



a { color: inherit; }



.mono {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}



.eagle {
  display: inline-block;
  flex: none;
  width: 1.5em;
  height: 0.96em;
  background: currentColor;
  -webkit-mask: url(../../assets/seal-falcon.png) center / contain no-repeat;
  mask: url(../../assets/seal-falcon.png) center / contain no-repeat;
}



/* ── keyboard ────────────────────────────────────────────────
   The ring takes its colour from the text it surrounds, so it reads on
   paper, on cinnabar, on aubergine and on lime without four variants.
   Over the hero the background is a photograph, so it gets a dark halo
   underneath to hold the edge. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


.hero :focus-visible {
  box-shadow: 0 0 0 5px rgba(20, 12, 24, 0.45);
}



.skip {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 400;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 18px;
  border: 1.5px solid var(--paper);
}


.skip:focus { transform: none; }



/* long unbroken strings — a pasted URL, a German compound — must wrap, and grid children must be allowed to shrink below their content */
body { overflow-wrap: break-word; }


.offers > * { min-width: 0; }



/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px var(--pad-x);
}


.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding: 2px 10px;
  border: 1px solid transparent;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
  font-family: var(--mark);
  font-size: 30px;
  letter-spacing: 0.02em;
  text-decoration: none;
}


.brand .eagle { font-size: 19px; }


.nav { display: flex; gap: 22px; }


.nav a, .nav-cta {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 7px 10px;
  border: 1px solid transparent;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}


/* over the hero the bar is light; over the paper below it is ink */
.topbar { color: var(--on-dark); }


.topbar .nav-cta { border-color: rgba(233, 233, 233,.5); }


/* The bar is fixed, so it cannot inherit from the section under it. Each page
   declares the ground its first screen is painted on and the bar borrows it;
   on a toned waybill the scrim and the brand plate go invisible. */
body { --top: var(--paper); --top-ink: var(--ink-fixed); }


body.top-lime { --top: var(--lime);  --top-ink: var(--ink-fixed); }


body.top-night { --top: var(--field); --top-ink: var(--on-dark); }


.topbar.on-paper {
  color: var(--top-ink);
  background: linear-gradient(to bottom, var(--top) 62%, color-mix(in srgb, var(--top) 0%, transparent));
}


.topbar.on-paper .brand { background: var(--top); }


.topbar.on-paper .nav-cta { border-color: currentColor; }


.topbar.on-paper .nav a:hover { border-color: currentColor; }



.nav a:hover { border-color: var(--lime); color: var(--lime); }


.nav-cta:hover { background: var(--ink); color: var(--paper); }


/* ── the menu ─────────────────────────────────────────────
   Below 960px the inline nav pushes the CTA off the viewport, so the bar
   folds into one disclosure. Native <details>: keyboard-operable, no JS. */
.menu { display: none; position: relative; }


.menu-btn {
  display: block;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 12px;
  border: 1px solid currentColor;
  transition: background .2s ease, color .2s ease;
}


.menu-btn::-webkit-details-marker { display: none; }


.menu[open] .menu-btn, .menu-btn:hover { background: currentColor; }


.menu[open] .menu-btn span, .menu-btn:hover span { color: var(--field); mix-blend-mode: normal; }


.topbar.on-paper .menu[open] .menu-btn span, .topbar.on-paper .menu-btn:hover span { color: var(--paper); }



.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 232px;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(47, 41, 34, .28);
  padding: 8px;
  display: grid;
  gap: 2px;
}


/* over the hero the bar is cream-on-dark, but the panel is always paper */
.topbar:not(.on-paper) .menu-panel { --ink: var(--ink-fixed); --paper: var(--on-dark); }


.menu-panel a {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
  padding: 11px 12px;
}


.menu-panel a:hover { background: var(--ink); color: var(--paper); }


.menu-panel .menu-cta {
  margin-top: 6px;
  background: var(--seal);
  color: var(--on-dark);
  text-align: center;
}


.menu-panel .menu-cta:hover { background: var(--ink); }
@media (max-width: 960px) {


  .nav, .topbar > .nav-cta { display: none; }


  .menu { display: block; }
}





/* ── sections ────────────────────────────────────────────── */
.stage {
  position: relative;
  padding: clamp(84px, 13vh, 150px) var(--pad-x);
}


.seal-field {
  background: var(--field);
  /* literal, not var(--paper): the overrides below repoint --paper at cinnabar */
  color: var(--on-dark);
  --ink: var(--on-dark);            /* window chrome inverts on the cinnabar chapters */
  --paper: #080a10;
  --ink-faint: rgba(233, 233, 233, 0.88);
}



/* crop marks {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--ink);
}



/* ── display type ────────────────────────────────────────── */
.giant {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 70px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
  max-width: 22ch;
}


.giant em { font-style: italic; }


/* a long headline needs a smaller step and a wider measure to stay a headline */




.on-seal { color: var(--on-dark); }



.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;              /* twice the mono default: these are headers, not captions */
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 34px;
}


.eyebrow .dots { flex: 1; max-width: 220px; border-bottom: 1.5px dotted currentColor; opacity: .75; }
@media (max-width: 720px) {


  .eyebrow { font-size: 15px; gap: 10px; }


  .eyebrow .dots { max-width: 90px; }
}





/* ── 1-bit windows ───────────────────────────────────────── */
.win {
  border: var(--rule);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  min-width: 190px;
}


.win-bar {
  display: flex;
  justify-content: space-between;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  cursor: grab;
  user-select: none;
}


.win-bar::after { content: '▪ ▫'; opacity: 0.8; color: var(--lime); }


.win-body { padding: 12px 14px; }


.win-body p { margin: 0 0 6px; }


.win-body p:last-child { margin-bottom: 0; }


.win canvas { image-rendering: pixelated; }


/* on the coloured chapters a window needs its own body, or it reads as an outline */
.seal-field .win { background: var(--seal-deep); }


.hero .win { background: rgba(16, 19, 28, 0.9); backdrop-filter: blur(2px); }



/* ── 1 · hero ─ the point cloud, full bleed ───────────────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 580px;
  overflow: hidden;
  background:
    radial-gradient(68% 50% at 69% 29%,
      rgba(176,194,226,.34) 0%,
      rgba(128,150,192,.18) 26%,
      rgba(62,80,114,.07) 50%,
      rgba(16,19,28,0) 73%),
    radial-gradient(90% 70% at 14% 88%, rgba(6,8,14,.75) 0%, rgba(16,19,28,0) 66%),
    var(--field);
  /* literal, not var(--paper): the overrides below repoint --paper at the dark field */
  color: var(--on-dark);
  /* window chrome inverts over the dark plate */
  --ink: var(--on-dark);
  --paper: #10131c;
  --ink-faint: rgba(233, 233, 233, 0.6);
}


#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }


/* two washes so type stays legible without dimming the middle of the picture */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, var(--field) 2%, rgba(16,19,28,.9) 18%, rgba(16,19,28,.55) 38%, rgba(16,19,28,0) 66%),
    linear-gradient(to bottom, rgba(16,19,28,.8) 0%, rgba(16,19,28,0) 22%);
}


.hero > *:not(#hero-canvas) { z-index: 2; }



.hero-copy {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(74px, 13vh, 148px);
  max-width: min(92vw, 48ch);
  color: var(--on-dark);
}


.hero-copy h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 7.4vw, 118px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  max-width: 12ch;
}


.hero-copy h1 em { font-style: italic; }


.hero-copy .sub { font-size: clamp(15px, 1.35vw, 19px); line-height: 1.45; max-width: 36ch; margin: 0 0 26px; opacity: 0.85; }


.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }


.cta-box.quiet { border-color: rgba(233, 233, 233, 0.42); }


.cta-box.quiet:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }


.cta-box {
  display: inline-flex;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid currentColor;
  padding: 12px 18px;
}


.cta-box:hover { background: var(--on-dark); color: var(--field); }



.hero .win { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 3; }


.win-news { width: min(500px, 78vw); }


.news { display: flex; align-items: center; gap: 14px; }


.news .ticker { flex: 1; overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: 13px; }


.news a { font-family: var(--mono); font-size: 13px; white-space: nowrap; }



/* the prompt that follows the hand: what this place responds to */
#cue {
  position: fixed; left: 0; top: 0; z-index: 5; margin: 0; pointer-events: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark); text-shadow: 0 1px 14px rgba(0,0,0,.75);
  padding: 7px 11px; border: 1px solid rgba(233, 233, 233,.45); background: rgba(20,12,24,.42);
  backdrop-filter: blur(3px); white-space: nowrap;
  opacity: 0; transform: translate3d(-999px,-999px,0); transition: opacity .28s ease;
}


#cue.on { opacity: 1; }


.hero-meta {
  position: absolute; right: var(--pad-x); bottom: 28px; text-align: right;
  font-size: 13px; line-height: 1.9; color: var(--on-dark); opacity: 0.62;
}
@media (max-width: 760px) {


  .hero .win { display: none; }


  .hero-copy { bottom: 92px; }
}





/* ── 3 · YAM 01 ─ the system, drawn ──────────────────────── */
#system { text-align: center; }


#system .eyebrow { justify-content: center; max-width: 1060px; margin-left: auto; margin-right: auto; }


#system .giant { margin-left: auto; margin-right: auto; max-width: 20ch; }


.relay { margin: 0 auto clamp(26px, 4vh, 44px); max-width: 1060px; }


.relay figcaption { text-align: center; }


#relay-strip { display: block; width: 100%; height: clamp(84px, 10vh, 104px); image-rendering: pixelated; }


.relay figcaption { margin-top: 12px; font-size: 13px; letter-spacing: 0; }



/* Overlapping windows, as on an old desktop: the relay across the top, the harness below it {
  position: relative;
  height: clamp(470px, 56vh, 545px);
  max-width: 1060px;
  margin: 0 auto clamp(40px, 6vh, 72px);
}


/* percentage widths so the five always tile: the stagger is vertical { width: 18.8%; }


#yam-dither { width: 76px; height: 76px; border: var(--rule); }



/* the metric, as columns that rise, hold, then start again */
.chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(40px, 8vw, 90px);
  height: 210px;
  margin: 18px 0 14px;
  padding-bottom: 46px;
  position: relative;
}


.col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }






.col .cl {
  position: absolute;
  top: calc(100% + 10px);
  width: max-content;
  text-align: center;
  font-size: 12px;
  line-height: 1.85;
  opacity: 1;
}


  0% { height: 0; }


  20% { height: var(--h); }


  74% { height: var(--h); }


  79% { height: 0; }

      /* the reset snaps back in a third of a second */
  100% { height: 0; }
@media (prefers-reduced-motion: reduce) {


  .col i { animation: none; height: var(--h); }
}





/* ── 5 · why now ─ the case { text-align: center; }



/* ── 5b · the stance ─────────────────────────────────────── */
/* The reorder stacked hero, relay and stance into one 3, 900px dark run.
   This chapter takes the lime instead: it breaks the run, it is the only
   place the brand green owns a whole ground on this page {
  text-align: center;
  background: var(--plum-lit);
  color: var(--on-dark);
  --ink: var(--ink-fixed);
  --paper: #a6d133;
  --ink-faint: rgba(47, 41, 34, 0.72);
}


.turn-lead {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.12;
  margin: 0 0 22px;
  max-width: 24ch;
}


.turn-lead em { font-style: italic; color: var(--brick); }



/* ── the manifesto ───────────────────────────────────────────
   Same grammar as the home page — dithered plates, 1-bit windows, giant serif — but its own palette: night aubergine and lime {
  position: relative;
  background: var(--lime);
  color: var(--ink);
  --ink: #1f2d18;
  --paper: #a6d133;
  padding: clamp(118px, 19vh, 200px) var(--pad-x) clamp(54px, 9vh, 96px);
  overflow: hidden;
}



/* the mission band: the lime plate gives way to night {
  background: var(--night);
  color: var(--on-dark);
  padding: clamp(58px, 9vh, 104px) var(--pad-x);
}



/* the lowercase aside that runs the page {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--moss);
  margin: 0 0 20px;
}


/* the values sit in the same column {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  margin: clamp(32px, 4.5vh, 48px) 0 12px;
}


/* ── the founders ────────────────────────────────────────────
   Pinned to a lime wall rather than filed in a column: three windows
   at different heights {
  background: var(--lime);
  --ink: #1f2d18;
  color: #1f2d18;
  padding: clamp(46px, 7vh, 80px) var(--pad-x) clamp(120px, 15vh, 190px);
}



/* the note tacked to the corner {
  position: absolute;
  left: 14%;
  top: calc(100% - 24px);
  width: 78%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(31, 45, 24, .5);
  transform: rotate(1.6deg);
}


.sign { font-size: 18px; line-height: 1.5; margin: 0 0 10px; max-width: 46ch; }



/* ── the inner pages: team, yam, jobs {
  background: var(--brick);
  --ink: var(--on-dark);
  --paper: #402026;
}


/* the product's own page { color: var(--on-dark); }


/* light text on a coloured ground takes that ground's hue { --on-dark: #f5e6e6; }


/* the product's own page { background: var(--lime); --ink: #241d26; --paper: #8cb828; color: #241d26; }



/* the socials { display: flex; flex-wrap: wrap; gap: 16px; }



/* ── 6 · work with us ────────────────────────────────────── */
/* Same 1-bit windows as everywhere else { text-align: center; }


.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(20px, 3vw, 40px);
  max-width: 1160px;
  margin: 0 auto;
  text-align: left;
}



/* the crew {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 24px;
}


/* a face where we have one {
  margin: 0 0 12px;
  width: 100%;
  max-width: 132px;
  aspect-ratio: 4 / 5;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-deep);
}



/* the programmes {
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding: 22px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px clamp(18px, 3vw, 40px);
}



/* ── drawn marks ────────────────────────────────────────────
   Two glyphs were carrying icon duty from whatever font happened to
   have them. Both are geometry, so both are drawn: they inherit colour, scale with the type { list-style: none; margin: 0; padding: 0; }


:root {
  /* a four-point star, drawn on the same grid as the pixel chrome */
  --mark-part: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0c.5 2.7 1.8 4 4.5 4.5C6.8 5 5.5 6.3 5 9c-.5-2.7-1.8-4-4.5-4.5C3.2 4 4.5 2.7 5 0z'/%3E%3C/svg%3E");
}



/* ── the FAQ ─────────────────────────────────────────────────
   Native <details> { text-align: center; }



/* ── motion ──────────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(18px); }


[data-reveal].in { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; }
@media (prefers-reduced-motion: reduce) {


  html { scroll-behavior: auto; }


  [data-reveal] { opacity: 1; transform: none; }
}





/* ── coarse pointers ──────────────────────────────────────────
   A laptop can have a touchscreen and a tablet can have a mouse, so the
   targets grow for the input device rather than for a width. 44px is the
   floor; the type and the layout are untouched. */

/* ── coarse pointers ──────────────────────────────────────────
   A laptop can have a touchscreen and a tablet can have a mouse, so the
   targets grow for the input device rather than for a width. 44px is the
   floor (WCAG 2.5.8). Links sitting inside a sentence are left alone: the
   spec exempts them, and padding them would break the line they live in. */

@media (pointer: coarse) {

  .nav a, .nav-cta, .menu-btn, .menu-panel a, .cta-box, .go, .onward a, .colophon-links a, .follow-links a, .post-links a, .backing-list a, .signup-go {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* these read as text, so they stay left-aligned while still being tappable */
  .go, .onward a, .colophon-links a, .follow-links a, .post-links a {
    justify-content: flex-start;
  }

  .menu-panel a { padding-inline: 14px; }

  /* the rows these sit in need room for the taller targets */
  .colophon-links, .follow-links, .post-links { gap: 2px clamp(18px, 2.6vw, 34px); }

  .ask > summary { padding-block: 22px; }

  .fld input { min-height: 48px; }
}





/* ══ THE RELAY STATION ════════════════════════════════════════
   The site is the post road; each page is a station where the
   dispatch is checked, stamped and handed on. Components are
   station furniture: the waybill head, the stamp, the tally rail, the sealed pouch, the roadside marker. Rules are scored, never
   hairline. No window chrome, no dither, no pixel type. */

:root {
  --rule-heavy: 3px solid var(--ink);
  --rule-thin: 1px solid var(--ink);
  --road: clamp(22px, 3vw, 44px);        /* the gutter the road runs in */
}



/* ── the waybill: every page opens as one ──────────────────── */
.waybill {
  padding: clamp(92px, 11vh, 116px) var(--pad-x) 0;
  background: var(--paper);
  color: var(--ink);
}


.waybill-in { max-width: 1180px; margin: 0 auto; }



/* the three-field label: station · route · state. Same on every page, so a sweep down the nav reads as a route. */
.fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0 clamp(16px, 3vw, 40px);
  align-items: end;
  border-bottom: var(--rule-thin);
  padding-bottom: 10px;
}


.field { min-width: 0; }


.field dt {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 4px;
}


.field dd {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.02em;
}



/* the stamps this dispatch already carries */
.stamps { display: flex; gap: 10px; align-items: center; }


.stamp {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
  padding: 7px 10px 6px;
  color: var(--brick);
  transform: rotate(-3deg);
  white-space: nowrap;
}


.stamp.void { color: var(--ink-faint); text-decoration: line-through; transform: rotate(2deg); }



.waybill-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.8vw, 78px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: clamp(20px, 3vh, 34px) 0 clamp(16px, 2.4vh, 26px);
  max-width: 26ch;
}


.waybill-name em { font-style: italic; }


.waybill-note {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 0 clamp(24px, 3.6vh, 40px);
}



/* ── the road: a station's business sits beside a tally rail ── */
.station {
  padding: clamp(40px, 5.6vh, 66px) var(--pad-x);
}


/* a rule only where two sections share a ground and would otherwise merge */
.seal-field + .station.night, .station.night + .station.night, .station:not(.night):not(.lime) + .station:not(.night):not(.lime) { border-top: var(--rule-thin); }


.station-in {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 18vw, 230px);
  gap: var(--road);
  align-items: start;
}


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


.station h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(14px, 2.2vh, 22px);
  max-width: 20ch;
}


.station h2 em { font-style: italic; }


.station p { font-size: 16px; line-height: 1.6; max-width: 66ch; margin: 0 0 14px; }


.station p:last-child { margin-bottom: 0; }



/* the tally rail: what this station has counted */
.tally { border-left: var(--rule-heavy); padding-left: 16px; }


.tally dt {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 6px;
}


.tally dd, .tally .tally-item {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.08;
}


.tally dd small, .tally .tally-item small { display: block; font-family: var(--sans); font-size: 13px; line-height: 1.45; margin-top: 6px; color: var(--ink-soft); }


.tally dd:last-child, .tally .tally-item:last-child { margin-bottom: 0; }



/* ── the ground carries the state, never a badge ───────────── */
.station.night { background: var(--field); color: var(--on-dark); --ink: var(--on-dark); --ink-faint: rgba(233, 233, 233,.72); --ink-soft: rgba(233, 233, 233,.8); }


.station.plum { background: var(--field);  color: var(--on-dark); --ink: var(--on-dark); --ink-faint: rgba(233, 233, 233,.72); --ink-soft: rgba(233, 233, 233,.8); }


.station.lime { background: var(--lime);  color: var(--ink-fixed); --ink: var(--ink-fixed); --ink-faint: rgba(36,29,38,.76); --ink-soft: rgba(36,29,38,.82); }



/* ── the sealed pouch: the ask ─────────────────────────────── */
.pouch { border: var(--rule-heavy); padding: clamp(24px, 3.4vw, 40px); }


.pouch h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.1; margin: 0 0 12px; }


.pouch p { margin: 0 0 18px; }


.seal-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }


.seal-line span {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1.5px solid currentColor; padding: 6px 9px;
}


.go {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 24px);
  text-decoration: none;
  color: inherit;
  border-bottom: var(--rule-heavy);
  padding-bottom: 2px;
  display: inline-flex;
  align-items: baseline;
  gap: 0.34em;
}


.go:hover { color: var(--seal-deep); border-color: var(--seal-deep); }


.night .go:hover, .plum .go:hover { color: var(--on-dark); border-color: var(--on-dark); }


.lime .go:hover { color: var(--ink-fixed); border-color: var(--ink-fixed); }

/* ── the two asks: the card is the button ──────────────────
   The whole card is the target (after Intercom and Tailscale): the pilot card
   is lime because lime is YAM, the studio card stays an outline, and each
   ends in a round arrow that turns as the card lifts on the site's hard
   shadow. The link keeps its own name for screen readers; a stretched
   ::before lays its hit area over the card. */
.pouch { display: flex; flex-direction: column; position: relative;
         transition: transform .25s cubic-bezier(.2, .9, .25, 1), box-shadow .25s; }
.night .pouch { border-color: rgba(233, 233, 233, 0.26); }
.pouch .seal-line { margin-bottom: 34px; }
.night .pouch .seal-line span { border-width: 1px; border-color: rgba(233, 233, 233, 0.34); color: rgba(233, 233, 233, 0.72); }
.pouch.yam { background: var(--lime); border-color: var(--lime); color: var(--ink-fixed); --ink: var(--ink-fixed); }
.night .pouch.yam .seal-line span { color: var(--ink-fixed); border-color: rgba(36, 29, 38, 0.45); }
.pouch .go {
  margin-top: auto; width: 100%; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: inherit; border: 0; padding: 0;
}
.pouch .go::before { content: ''; position: absolute; inset: 0; z-index: 1; }   /* the whole card is the target */
.pouch .go::after, .pouch .go[href^="mailto:"]::after {
  content: '\2192'; flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--sans); font-size: 20px; letter-spacing: 0;
  border: 1.5px solid currentColor;
  transition: transform .3s cubic-bezier(.2, .9, .25, 1), background-color .25s, color .25s;
}
.pouch.yam .go::after { background: var(--ink-fixed); color: var(--lime); border-color: var(--ink-fixed); }
.night .pouch:hover, .night .pouch:focus-within { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 rgba(233, 233, 233, 0.9); }
.pouch:hover .go[href]::after, .pouch .go[href]:focus-visible::after { transform: rotate(-45deg); }   /* [href] outranks the site-wide arrow nudge */
.night .pouch:not(.yam):hover .go::after, .night .pouch:not(.yam) .go:focus-visible::after { background: var(--on-dark); color: var(--field); border-color: var(--on-dark); }
.night .pouch .go:hover, .night .pouch.yam .go:hover { color: inherit; border-color: transparent; }
.pouch .go:focus-visible { outline: none; }
.pouch:has(.go:focus-visible) { outline: 2px solid var(--on-dark); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .pouch, .pouch .go::after { transition: none; }
  .night .pouch:hover, .night .pouch:focus-within { transform: none; }
}



/* ── the next station: always name where the work goes ─────── */
.onward {
  /* no rule: the gap above it is what marks the end of the page's content */
  padding: clamp(58px, 9vh, 104px) var(--pad-x) clamp(40px, 6vh, 72px);
  background: var(--paper);
}


.onward-in {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px;
}


.onward dt, .onward .onward-k { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; }


.onward a {
  font-family: var(--serif); font-size: clamp(21px, 2.2vw, 29px);
  text-decoration: none; color: var(--ink); border-bottom: var(--rule-heavy); padding-bottom: 2px;
}


.onward a:hover { color: var(--seal-deep); border-color: var(--seal-deep); }
@media (max-width: 860px) {


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


  .tally { border-left: 0; border-top: var(--rule-heavy); padding-left: 0; padding-top: 14px; }


  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }


  .stamps { grid-column: 1 / -1; }
}





/* the waylist: the questions sit closed until they are asked for.
   Native <details> — keyboard-operable, findable, no JS. */
.waylist { margin: 0; max-width: 78ch; }


.ask { border-top: var(--rule-thin); }


.ask:last-child { border-bottom: var(--rule-thin); }


.ask > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 17px 0;
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.3;
}


.ask > summary::-webkit-details-marker { display: none; }


/* the marker is drawn, so it can rotate and take the text colour */
.ask > summary::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 11px; height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .22s ease;
}


.ask[open] > summary::after { transform: translateY(2px) rotate(-135deg); }


.ask > summary:hover { color: var(--brick); }


.ask-body { padding: 0 0 18px; }


.ask-body p {
  margin: 0;
  font-size: 16.5px; line-height: 1.62; max-width: 66ch;
  color: var(--ink-soft);
}


.station .offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--road); margin-top: clamp(24px, 4vh, 44px); }


.onward-in > div { min-width: 0; }



/* the waybill takes the station's ground when the page has one */
.waybill.lime { background: var(--lime);  color: var(--ink-fixed); --ink: var(--ink-fixed); --ink-faint: rgba(36,29,38,.76); }


.waybill.night { background: var(--field); color: var(--on-dark); --ink: var(--on-dark); --ink-faint: rgba(233, 233, 233,.72); }


.waybill.plum { background: var(--field);  color: var(--on-dark); --ink: var(--on-dark); --ink-faint: rgba(233, 233, 233,.72); }


.waybill.lime .stamp, .waybill.night .stamp { color: inherit; }


.station a, .waybill a { color: inherit; text-underline-offset: 3px; }



/* ── the posted bill: a person, pinned up at the station ───── */
.post {
  display: grid;
  grid-template-columns: clamp(170px, 20vw, 250px) minmax(0, 1fr);
  gap: var(--road);
  align-items: start;
  padding-top: clamp(24px, 3.4vh, 38px);
  margin-top: clamp(34px, 5vh, 58px);
}




.post-face { margin: 0; }


.post-face img { display: block; width: 100%; height: auto; }


.post-role {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 8px;
}


.post-body h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.08; margin: 0 0 12px;
}


.post-note {
  border-left: var(--rule-heavy); padding-left: 14px;
  font-size: 15px; line-height: 1.55; color: var(--ink-soft);
}


.post-links { font-size: 14px; letter-spacing: 0.04em; }


.post-links a { margin-right: 16px; }



/* the roster reads as a route list, not a card grid */
.station h2.mt { margin-top: clamp(38px, 6vh, 68px); }


.station .sign { margin-top: 22px; color: var(--ink-faint); font-size: 15px; letter-spacing: 0.04em; }
@media (max-width: 720px) {


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


  .post-face { max-width: 210px; }
}





/* ── the colophon: the route's last stamp ──────────────────
   Same three-field label as every waybill, so the page closes in the
   grammar it opened in. */
.colophon {
  /* no rule of its own: the onward block above already closes the page, and
     two heavy rules a short block apart read as a stray box */
  padding: clamp(26px, 4vh, 40px) var(--pad-x) clamp(46px, 7vh, 72px);
  background: var(--paper);
  color: var(--ink);
}


.colophon-in { max-width: 1180px; margin: 0 auto; }


.colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.6vw, 34px);
  margin: clamp(22px, 3vh, 34px) 0 18px;
  font-size: 15px;
}


.colophon-links a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--ink-faint); }


.colophon-links a:hover { text-decoration-color: currentColor; }


.colophon-note { margin: 0; font-size: 13px; color: var(--ink-faint); }



/* ── backed by: the only evidence on the page we did not write ──
   A single ruled line under the hero, in the same three-field voice as
   the waybill. Names, not logos — we are not licensed to show the marks. */
.backing {
  background: var(--paper);
  color: var(--ink);
  padding: 18px var(--pad-x);
}


.backing-in {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px clamp(18px, 2.6vw, 34px);
}


.backing-label {
  margin: 0;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}


.backing-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px clamp(16px, 2.2vw, 30px);
  font-size: 15px;
}


.backing-list abbr { text-decoration: none; font-variant-numeric: tabular-nums; }



/* ── figures: the product, inferred rather than shown ──────────
   Line schematics in currentColor, so one drawing works on paper and on
   every station ground. Numbered like plates in a paper, because that is
   the register the rest of the page is written in. */
.fig { margin: 0 auto clamp(30px, 4.5vh, 52px); max-width: 1060px; }


.fig svg { display: block; width: 100%; height: auto; overflow: visible; }


.fig .bx.lit { fill: currentColor; fill-opacity: 0.1; stroke-width: 3; }


.fig text { fill: currentColor; font-family: var(--sans); }


.fig .n { font-size: 12px; letter-spacing: 0.16em; opacity: 0.6; }


.fig .nm { font-size: 19px; font-family: var(--serif); }


.fig .sb { font-size: 12.5px; opacity: 0.72; }


.fig .cap { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.62; }


.fig figcaption {
  margin-top: 14px;
  font-size: 13px; line-height: 1.5; color: var(--ink-faint);
  text-align: left;
}


.fig figcaption b {
  font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 11px; margin-right: 8px; font-variant-numeric: tabular-nums;
}
/* ── fig 1 on a phone ─────────────────────────────────────
   Six bays side by side cannot hold at phone width, and a sideways-scrolling
   drawing hid half the route and the YAM 01 layer. On a phone the same route
   is drawn upright: the datum runs down the left, each station hangs off it
   with its contents always open (there is no hover), and the stations stand
   on the lime layer, which stacks film language, YAM 01 and machine language. */
.fig-m { display: none; }
@media (max-width: 760px) {
  .fig.plate .fig-stage { display: none; }
  .fig-m { display: block; }
}
.fig-m-route { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.fig-m-route::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1.5px; background: currentColor; opacity: .5; }
.fig-m-route li { position: relative; text-align: left; margin: 0 0 12px; padding: 12px 14px 13px; border: 1.5px solid currentColor; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.fig-m-route li::before { content: ''; position: absolute; left: -22px; top: 22px; width: 22px; height: 1px; background: currentColor; opacity: .38; }
.fig-m-route li::after { content: ''; position: absolute; left: -25px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.fig-m-route .n { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; opacity: .6; }
.fig-m-route b { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.15; }
.fig-m-route .p { grid-column: 2; margin-top: 4px; font-size: 13px; line-height: 1.45; opacity: .78; }
.fig-m-layer { position: relative; margin-top: 4px; color: var(--ink-fixed); background: var(--lime); }
.fig-m-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fig-m-langs { position: relative; display: grid; gap: 12px; padding: 20px 16px 22px; text-align: center; }
.fig-m-langs p { margin: 0; }
.fig-m-langs b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; }
.fig-m-langs span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; opacity: .78; }
.fig-m-langs .yam { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fig-m-langs .yam b { font-size: 24px; }
.fig-m-langs .yam i { font-style: normal; font-size: 18px; opacity: .8; }





/* ── fig 1 · the relay in section ──────────────────────────
   A section drawing, not a row of cards: bays hang from one route datum
   and stand open on the YAM layer, so the layer reads as the thing they
   are all built on rather than a caption underneath them. */
.fig .datum { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .5; }


.fig .riser { fill: none; stroke: currentColor; stroke-width: 1; opacity: .38; }


.fig .node { fill: currentColor; opacity: .6; }


.fig .bay { fill: none; stroke: currentColor; stroke-width: 1.5; }


.fig .shelf { fill: none; stroke: currentColor; stroke-width: 1; opacity: .22; }


.fig .slab { fill: var(--lime); }


.fig .mark { fill: var(--ink-fixed); }


.fig .slab-name { fill: var(--ink-fixed); font-family: var(--serif); font-size: 21px; }


.fig .slab-lang { fill: var(--ink-fixed); font-family: var(--serif); font-size: 18px; }


.fig .slab-vocab { fill: var(--ink-fixed); font-size: 12px; opacity: .74; }


.fig .slab-way { fill: none; stroke: var(--ink-fixed); stroke-width: 1.5; opacity: .8; }




/* ── fig 2 · the benchmark, as two rising columns ──────────
   Not two cards: one figure, split by a rule, captioned once — the same
   grammar as the section drawing above it. */
.fig.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
  margin-top: clamp(34px, 5vh, 56px);
  border-top: var(--rule-thin);
  padding-top: clamp(24px, 3.4vh, 38px);
}


.fig.metrics > figcaption { grid-column: 1 / -1; margin-top: clamp(20px, 3vh, 32px); }


.metric { min-width: 0; }


/* the rule sits in the gutter; no negative pull, or the second chart's
   contents centre on a box that is offset from the column it lives in */
.metric + .metric {
  border-left: var(--rule-thin);
  padding-left: clamp(28px, 4vw, 56px);
}


.metric-head {
  margin: 0 0 20px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}


.metric-note { margin: 10px 0 0; font-size: 14px; line-height: 1.75; color: var(--ink-soft); }


.metric .chart { justify-content: center; gap: clamp(34px, 6vw, 72px); height: 186px; }


.metric .cl { font-size: 11.5px; line-height: 1.9; }
@media (max-width: 720px) {


  .fig.metrics { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vh, 40px); }


  .metric + .metric {
    border-left: 0; margin-left: 0; padding-left: 0;
    border-top: var(--rule-thin); padding-top: clamp(24px, 3.4vh, 34px);
  }
}





/* the follow block: the one thing this page can actually do yet */
.follow {
  margin-top: clamp(46px, 7vh, 76px);
  max-width: 640px;
}


.follow-lead {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.1;
  max-width: 20ch;
}


.follow-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2.4vw, 30px); font-size: 15px; }


.follow-links a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--ink-faint); }


.follow-links a:hover { text-decoration-color: currentColor; }



/* ── the signup ───────────────────────────────────────────
   Labels above the fields, never placeholders doing a label's job: a
   placeholder disappears the moment someone types and takes the question
   with it. */
.signup { margin: 0 0 20px; display: grid; gap: 14px; max-width: 420px; }


/* the Discord invite request: the signup's fields, a little more room */
.invite { margin: clamp(22px, 3vh, 34px) 0 0; display: grid; gap: 18px; max-width: 460px; }
.invite[hidden], .invite-done[hidden] { display: none; }
.fld .opt { letter-spacing: 0.04em; text-transform: none; }
.fld input::placeholder { color: var(--ink-faint); opacity: .7; }
.station .invite-done {
  margin: clamp(22px, 3vh, 34px) 0 0;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
}


.fld { margin: 0; display: grid; gap: 6px; }


.fld label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}


.fld input {
  font: inherit; font-size: 16px;      /* 16px or iOS zooms the page on focus */
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  padding: 11px 12px;
  min-height: 44px;
  border-radius: 0;
  -webkit-appearance: none;
}


.fld input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* dropdowns and the long answer share the input's box */
.fld select, .fld textarea {
  font: inherit; font-size: 16px;
  color: var(--ink);
  background-color: transparent;
  border: 1.5px solid var(--ink);
  padding: 11px 12px;
  min-height: 44px;
  border-radius: 0;
  width: 100%;
  -webkit-appearance: none; appearance: none;
}
.fld select {
  padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.fld select:invalid { color: var(--ink-faint); }
.fld select option { color: var(--ink); }
.fld textarea { resize: vertical; line-height: 1.5; min-height: 120px; }
.fld select:focus-visible, .fld textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.fld select:user-invalid, .fld textarea:user-invalid { border-color: var(--crimson); }
.invite.pilot { max-width: 560px; }
.station .invite .form-part { margin: clamp(18px, 3vh, 30px) 0 0; }


.fld input:user-invalid { border-color: var(--crimson); }


/* the honeypot: a field only a bot will fill in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }


.signup-go {
  justify-self: start;
  font: inherit; font-size: 15px;
  color: var(--paper); background: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 12px 22px; min-height: 44px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}


.signup-go:hover { background: transparent; color: var(--ink); }


.signup-go[disabled] { opacity: .55; cursor: progress; }


.signup-msg { margin: 0; font-size: 14px; line-height: 1.5; min-height: 1.5em; }


.signup-msg.bad { color: var(--crimson); }



/* ── trial-font fitting ────────────────────────────────────
   Signifier sits lower than Instrument Serif: its descenders run past a
   line-height that used to clear, and the waybill had no bottom padding
   of its own, so the last line's margin collapsed out of the band and the
   descenders were cut by the colour edge.
   Signifier Light is the display cut; Instrument Serif had only one
   weight, so the big type asked for 400 everywhere. Favorit Mono has real
   letterforms where Silkscreen had pixels, so the label tracking that
   pixel type needed now reads as too loose. */
.waybill-name, .giant, .station h2, .turn-lead, .follow-lead { font-weight: 300; }


.nav a, .nav-cta, .menu-btn, .menu-panel a, .skip { letter-spacing: 0.05em; }


.mono { letter-spacing: 0; }


.eyebrow { letter-spacing: 0.08em; }



.waybill { padding-bottom: clamp(24px, 3.4vh, 40px); }


.waybill-in > :last-child { margin-bottom: 0; }


.waybill-name { line-height: 0.98; }


.giant { line-height: 1.0; }


.station h2 { line-height: 1.08; }



/* ── the roles: a listing sheet, not three paragraphs ──────
   Title and terms on the left, the job and the way in on the right, with
   a rule and real space between each one so they stop running together. */
.roles { margin: clamp(22px, 3vh, 34px) 0 0; }


.role {
  display: grid;
  grid-template-columns: clamp(190px, 22vw, 280px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding-top: clamp(26px, 3.6vh, 40px);
  margin-top: clamp(30px, 4.4vh, 52px);
}


.role:first-child { margin-top: 0; }


.role h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2.2vw, 29px);
  line-height: 1.1;
  margin: 0 0 12px;
}


.role .role-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px; line-height: 1.9; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


.role-body > p { margin: 0 0 18px; max-width: 60ch; }


.role-list {
  margin: 0 0 20px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}


.role-list li {
  font-size: 14px; letter-spacing: 0.02em;
  border: 1px solid var(--ink-faint);
  padding: 5px 11px;
}


.role .go { font-size: clamp(17px, 1.6vw, 21px); border-bottom-width: 2px; }


/* the full posting sits folded inside the card, same disclosure as the FAQ */
.role-full { max-width: 66ch; margin: 0 0 22px; border-bottom: var(--rule-thin); }
.role-full > summary { font-size: clamp(16px, 1.4vw, 18px); padding: 13px 0; }
.role-block { margin: 0 0 26px; }
.role-block:last-child { margin-bottom: 8px; }
.role-block h4 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 400; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brick);
}
.role-full .ask-body p + p { margin-top: 12px; }
.role-full .ask-body .role-bullets + p { margin-top: 14px; }
.role-full .ask-body p + .role-bullets { margin-top: 10px; }
.role-bullets {
  margin: 0; padding: 0 0 0 1.1em;
  display: grid; gap: 8px;
  font-size: 16px; line-height: 1.58; color: var(--ink-soft);
}
.role-bullets strong { color: var(--ink); font-weight: 600; }
.role-full a { border-bottom: 1px solid currentColor; }


.station .role-open {
  margin: clamp(38px, 5.6vh, 64px) 0 0;
  max-width: 66ch;
  color: var(--ink-soft);
}
@media (max-width: 720px) {


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


  .role .role-meta { line-height: 1.6; }
}





/* ── lime emphasis ─────────────────────────────────────────
   Lime carries text only on a dark ground: 10.42:1 on the night field, but 1.47:1 on the page grey, where it cannot be read at any size. There
   is no lime emphasis on the light sections for that reason. */
.lit { font-weight: inherit; color: var(--lime); }
/* ── the arrow ─────────────────────────────────────────────
   Drawn by CSS rather than typed into the copy, so the glyph follows the
   link's destination and cannot drift out of sync with it: → stays on this
   site, ↗ leaves it. It was a literal character before, which is why the
   primary action on every page had no hover at all. */
.go::after,
.onward a::after {
  content: '\2192';                         /* → */
  display: inline-block;
  transition: transform .3s cubic-bezier(.2, .9, .25, 1);
}
.go[href^="mailto:"]::after,
.go[href^="http"]::after,
.onward a[href^="mailto:"]::after,
.onward a[href^="http"]::after { content: '\2197'; }   /* ↗ */

.go:hover::after,
.go:focus-visible::after,
.onward a:hover::after,
.onward a:focus-visible::after { transform: translateX(0.26em); }

.go[href^="mailto:"]:hover::after,
.go[href^="http"]:hover::after,
.onward a[href^="mailto:"]:hover::after,
.onward a[href^="http"]:hover::after { transform: translate(0.18em, -0.18em); }

.onward a { display: inline-flex; align-items: baseline; gap: 0.3em; }

@media (prefers-reduced-motion: reduce) {
  .go::after, .onward a::after { transition: none; }
}

/* ── browser surfaces ─────────────────────────────────────────
   The parts of a page the OS draws unless you say otherwise. Selection was
   macOS blue on every ground here, which is a colour from nobody's palette.
   Ink on lime is 9.22:1, so one rule reads correctly on paper and on the
   night stations alike. */
::selection { background: var(--lime); color: var(--ink-fixed); }
::-moz-selection { background: var(--lime); color: var(--ink-fixed); }
.fld input { caret-color: var(--ink); }

/* ── the onward pair on a narrow screen ───────────────────────
   Two display-serif links shoulder to shoulder at 390px left the second one
   20px from the edge. They stack instead, and the next station leads. */
@media (max-width: 560px) {
  .onward-in { flex-direction: column; align-items: flex-start; gap: 26px; }
  .onward-in > div { width: 100%; }
}

/* ── the crew roster ──────────────────────────────────────────
   Half the company is engineering, so the engineers get the full measure
   rather than a 230px rail on the far right. Each name sits under a scored
   rule, the way a crew is listed on a call sheet. */
.roster {
  margin: clamp(30px, 4.4vh, 48px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.roster > div { min-width: 0; }
.roster dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 7px;
}
.roster dd {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.15;
}

/* ── fig 1 · the layer, alive ──────────────────────────────
   The slab is painted by a canvas sitting under the drawing, carrying the
   same churning 1-bit dither the relay strip puts behind its rider — so
   the layer reads as the same material, running. The rect above it only
   reserves the band; the colour comes from the canvas. */
/* The canvas is measured against the drawing, not the whole figure: the
   figure also holds the caption, so a percentage of it put the band 25px
   low and ran it 34px past the slab, over the caption. */
.fig-stage { position: relative; }
#layer-field {
  position: absolute;
  left: 0; width: 100%;
  top: 72.571%;           /* the slab: y 268 of viewBox 0 14 1000 350 → (268-14)/350 */
  height: 27.429%;         /* 96 / 350 */
  display: block;
  z-index: 0;
}
.fig-stage svg { position: relative; z-index: 1; display: block; }
.fig .slab { fill: none; }

/* ── who it is for ─────────────────────────────────────────
   Three audiences, given equal room under the statement rather than
   stacked in a rail beside it — each one is a different reader's reason. */
.whos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(26px, 3.4vw, 52px);
  margin-top: clamp(38px, 5.6vh, 68px);
  max-width: none;
}
.who { min-width: 0; }
.who h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.1;
  margin: 0 0 12px;
}
.station .who p { font-size: 15.5px; line-height: 1.6; max-width: 40ch; margin: 0; color: var(--ink-soft); }

@media (max-width: 560px) {
  /* the bar labels are wider than the bars they sit under, so at phone
     width they ran into each other — they wrap inside their own column */
  .metric .chart { gap: 26px; }
  .metric .cl { width: auto; max-width: 92px; font-size: 11px; line-height: 1.5; }
}

/* ── the vortex: YAM 01 as the layer both languages turn into ──
   The statement and its heading hold the left; the right is a square of
   film and machine vocabulary in rings around the mark. It needs room to
   read as type, so it is the larger column, and it goes full width on a
   phone rather than shrinking. The canvas paints --field itself, so its
   edge disappears into the band. */
.stance-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 46vw, 620px);
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.stance-say p { max-width: 62ch; }
.station figure.vortex { margin: 0; }
.vortex-field { position: relative; aspect-ratio: 1; cursor: crosshair; }
.vortex-field canvas { display: block; width: 100%; height: 100%; }
.vortex figcaption {
  margin-top: 14px; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
@media (max-width: 860px) {
  .stance-in { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 5vh, 44px); }
  .station figure.vortex { width: 100%; max-width: 560px; justify-self: center; }
}

/* ── the benchmark bars ────────────────────────────────────
   Flat colour, no texture: the bars are a measurement, and a dither on
   them read as decoration on top of a number. Height animates rather
   than a transform, so the outline stays a constant weight as they run. */
.col .bar {
  display: block;
  width: clamp(44px, 9vw, 68px);
  height: 14%;
  background: var(--crimson);
  border: 1.5px solid var(--ink);
  border-bottom: none;
  animation: bar-run 3.4s ease-in-out infinite alternate;
}
.col .bar.lime { background: var(--lime); }
@keyframes bar-run {
  from { height: 14%; }
  to   { height: var(--h); }
}
@media (prefers-reduced-motion: reduce) {
  .col .bar { animation: none; height: var(--h); }
}

/* ── fig 2 in three dimensions (src/scripts/bars3d.js) ─────
   The flat columns stay in the markup as the fallback and the source of the
   heights and labels; once the scene is up they step aside. */
.chart.is-3d { display: block; height: auto; padding-bottom: 0; margin: 4px 0 6px; }
.chart.is-3d .col { display: none; }
.chart .bars3d { display: block; width: 100%; height: clamp(220px, 22vw, 280px); }
.bars3d-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.bars3d-legend span { display: inline-flex; align-items: center; gap: 8px; transition: color .3s; }
.bars3d-legend span.on { color: var(--ink); }
.bars3d-legend i { width: 10px; height: 10px; background: var(--crimson); border: 1px solid var(--ink); }
.bars3d-legend i.lime { background: var(--lime); }
.bars3d-legend b { font-weight: 500; }

/* ── fig 1 · a station opens when you ask it to ────────────
   Closed, a bay holds only its name and a count of what it carries. On
   hover the bay grows upward, the thread above it shortens to meet it,
   the head lifts with the roof and the contents appear underneath — so
   the whole column reacts as one thing rather than text fading in.
   `d` is animated as a CSS property; where that is unsupported the bay
   simply jumps, which is still correct. */
.fig .stn { cursor: default; }
.fig .hit { fill: transparent; }
.fig .bay,
.fig .riser { transition: d .3s cubic-bezier(.3,.8,.35,1), stroke-width .2s ease, opacity .2s ease; }
.fig .head { transition: transform .3s cubic-bezier(.3,.8,.35,1); }
.fig .parts { opacity: 0; transition: opacity .24s ease .06s; }
.fig .count { transition: opacity .16s ease; }
.fig .count rect { fill: currentColor; opacity: .42; }

.fig .stn:hover .bay,
.fig .stn:focus-visible .bay { d: var(--dOpen); stroke-width: 2.5; }
.fig .stn:hover .riser,
.fig .stn:focus-visible .riser { d: var(--rOpen); opacity: .85; }
.fig .stn:hover .head,
.fig .stn:focus-visible .head { transform: translateY(var(--dy)); }
.fig .stn:hover .parts,
.fig .stn:focus-visible .parts { opacity: 1; }
.fig .stn:hover .count,
.fig .stn:focus-visible .count { opacity: 0; }
.fig .stn:hover .nm,
.fig .stn:focus-visible .nm { fill: var(--lime); }
.fig .stn:focus { outline: none; }
.fig .stn:focus-visible .hit { outline: 2px solid var(--lime); outline-offset: -2px; }

/* a touch screen has no hover, so every station is simply open */
@media (pointer: coarse) {
  .fig .bay { d: var(--dOpen); }
  .fig .riser { d: var(--rOpen); }
  .fig .head { transform: translateY(var(--dy)); }
  .fig .parts { opacity: 1; }
  .fig .count { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fig .bay, .fig .riser, .fig .head, .fig .parts, .fig .count { transition: none; }
}

/* ── the two statements ────────────────────────────────────
   These carry the same weight of argument as "We speak the languages of
   film and code", so they are set at the same size rather than at the
   ordinary station scale. */
#stance .station-in > h2,
#research .station-in > div > h2 {
  font-size: clamp(32px, 5.2vw, 70px);
  line-height: 1.0;
  max-width: 22ch;
  margin-bottom: clamp(22px, 3.2vh, 34px);
}

/* ── the blog: a post, and the community call ────────────────
   Long-form reads at one comfortable measure; the audiences are a list with
   their names set as small heads. The community card reuses the ask card
   from the home page, outlined: it is not YAM, so it is never lime. */
.post-meta { margin: 0 0 18px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.essay { max-width: 70ch; }
.essay p { font-size: 17px; line-height: 1.7; max-width: none; }
.essay .lede { font-family: var(--serif); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.35; margin-bottom: 22px; }
.for { margin: 0 0 18px; }
.for > div { padding: 16px 0; border-top: var(--rule-thin); }
.for > div:last-child { border-bottom: var(--rule-thin); }
.for dt { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; margin: 0 0 6px; }
.for dd { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.pouch.post-card { color: inherit; text-decoration: none; }
.pouch .go-read {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
}
.pouch .go-read::after {
  content: '\2192'; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--sans); font-size: 20px; letter-spacing: 0; border: 1.5px solid currentColor;
  transition: transform .3s cubic-bezier(.2, .9, .25, 1), background-color .25s, color .25s;
}
.night .pouch.post-card:hover .go-read::after { transform: rotate(-45deg); background: var(--on-dark); color: var(--field); border-color: var(--on-dark); }
.pouch.post-card:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 4px; }

/* ── a letter: the blog post ─────────────────────────────────
   After the founder letters at Ada, incident.io and Daylight: one narrow
   reading column on a sheet of paper, the writer's face set into the
   headline, one paragraph raised to a statement, and a signed close with the
   team beside it. Personal in voice, still the site's type and ground. */
.letter { padding: clamp(120px, 16vh, 170px) var(--pad-x) clamp(60px, 9vh, 110px); }
.letter-head { max-width: 900px; margin: 0 auto clamp(40px, 6vh, 64px); text-align: center; }
.letter-kicker { margin: 0 0 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.letter-kicker a { color: inherit; }
.letter-head h1 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -.015em; }
.letter-head h1 em { font-style: italic; }
.face { display: inline-block; width: 1.5em; height: .82em; border-radius: 1em; overflow: hidden; vertical-align: -.06em; margin: 0 .02em;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px rgba(36,29,38,.18); transform: rotate(-3deg); }
.face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.sheet { max-width: 700px; margin: 0 auto; background: #f7f6f2; padding: clamp(34px, 6vw, 76px) clamp(24px, 6vw, 84px) clamp(40px, 6vw, 70px);
  box-shadow: 0 1px 2px rgba(36,29,38,.06), 0 12px 40px -12px rgba(36,29,38,.22); border-radius: 2px; }
.sheet p { font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.62; margin: 0 0 1.05em; color: var(--ink); max-width: none; }
.sheet .lede::first-letter { float: left; font-size: 3.4em; line-height: .86; padding: .06em .09em 0 0; font-weight: 300; }
.sheet .statement { font-size: clamp(25px, 2.3vw, 32px); line-height: 1.28; letter-spacing: -.01em; margin: 1.3em -0.6em 1.3em; padding: .9em .6em; border-top: 1px solid rgba(36,29,38,.18); border-bottom: 1px solid rgba(36,29,38,.18); }
.sheet a { color: inherit; }
.sign-off:has(.polaroid[hidden]) { grid-template-columns: minmax(0, 1fr); }
.sign-off { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: center; margin: 2.4em 0 2em; }
.polaroid { margin: 0; width: clamp(150px, 20vw, 210px); background: #fff; padding: 10px 10px 34px; box-shadow: 0 8px 22px -8px rgba(36,29,38,.35); transform: rotate(-3.5deg); position: relative; }
.polaroid-slot, .polaroid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid-slot { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #ecebe6 0 8px, #e4e2dc 8px 16px); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: 'Mrs Saint Delafield', cursive; font-size: 26px; line-height: 1; color: var(--ink-soft); }
.sheet .sign-line { margin: 0; font-style: italic; }
.sheet .sig { margin: .05em 0 0; font-family: 'Mrs Saint Delafield', cursive; font-weight: 400; font-size: clamp(64px, 7vw, 86px); line-height: 1.1; color: #1d2c5c;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.45, .1, .25, 1) .15s; }
.sheet .sig.in { clip-path: inset(0 -10% 0 0); }
.sheet .sign-name { margin: .2em 0 0; font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1.4; }
.sign-name span { display: block; font-weight: 400; font-size: 13px; color: var(--ink-faint); }
.letter-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 0 !important; padding-top: 1.6em; border-top: 1px solid rgba(36,29,38,.14); }
.letter-cta a { font-family: var(--mono); font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.letter-cta .join { display: inline-flex; align-items: center; gap: .7em; padding: 15px 22px 14px; background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); transition: background-color .2s, color .2s; }
.letter-cta .join::after { content: '\2197'; transition: transform .3s cubic-bezier(.2, .9, .25, 1); }
.letter-cta .join:hover { background: transparent; color: var(--ink); }
.letter-cta .join:hover::after { transform: translate(.15em, -.15em); }
.letter-cta .quiet { color: var(--ink-soft); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (max-width: 600px) {
  .sign-off { grid-template-columns: minmax(0, 1fr); }
  .polaroid { justify-self: center; }
  .sheet .statement { margin-inline: 0; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .sheet .sig { clip-path: none; transition: none; } }