/* =====================================================================
   THING3 studio site, v0.5 (redesign: REDESIGN.md v4)
   Colours, type and logo proportions follow Brand Guidelines v0.1.

   The grammar: cream is the notebook, where things are TOLD.
   Black is the dark room, where things are FOUND OUT. Dark rooms are
   always windows inset in the paper (.room), never full-width bands,
   and they are labelled on the paper outside them.
   ===================================================================== */

:root {
  /* Core palette (brand guidelines) */
  --paper:    #F5F1E6;
  --stone:    #D9D0C3;
  --charcoal: #2A2A28;
  --black:    #080808;
  --room:     #0d0d0c;   /* the dark room */

  /* Derived */
  --ink:      #141412;
  --muted:    #5E5A52;   /* 6.2:1 on paper */
  --hair:     rgba(20, 20, 18, 0.18);
  --hair-lt:  rgba(245, 241, 230, 0.16);
  --muted-lt: rgba(245, 241, 230, 0.62);
  --pen:      #22304a;   /* handwriting: blue-black ink, used three times only */

  /* Spectral accents: used sparingly, as light events */
  --ray-1: #E8543A;   /* red / coral   */
  --ray-2: #E9A63A;   /* amber         */
  --ray-3: #23A88E;   /* green / teal  */
  --ray-4: #5B57E8;   /* blue / violet */
  --spectrum: linear-gradient(90deg, #4F46E5 0%, #1C8FE0 18%, #1FB59A 36%, #E8C93E 56%, #EE8A34 74%, #E2433F 100%);

  /* Type */
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* Wordmark: the 3 is identical in size and weight. */
  --wm-rise: 0;         /* THING3 wordmark: the 3 sits on the baseline, same size */
  --wm-gap:  0;         /* THING3: no space */
  --mk-rise: 0.085em;   /* T3 icon: the 3 raised slightly */
  --mk-gap:  0.015em;   /* T3: nearly touching */

  /* Layout */
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Paper grain over everything (static, cheap) */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .09;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--charcoal); color: var(--paper); }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 400;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  font-family: var(--mono); font-size: 12px; text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }

/* ---------- Marks ---------- */
.three { position: relative; font: inherit; }
.wordmark .three { top: calc(var(--wm-rise) * -1); margin-left: var(--wm-gap); }
.mark .three { top: calc(var(--mk-rise) * -1); margin-left: var(--mk-gap); }
.wordmark {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: .9;
  white-space: nowrap;
}
.mark {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Handwriting (three notes on the whole page) ---------- */
.pen {
  font-family: var(--hand); font-weight: 500; color: var(--pen);
  font-size: 1.4em; line-height: 1; letter-spacing: 0; text-transform: none;
  display: inline-block; transform: rotate(-2deg); transform-origin: left center;
}
.pen-inline { margin-left: .2em; white-space: nowrap; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  padding: 14px 20px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; position: relative;
  transition: background-color .3s;
}
.btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--spectrum); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn[aria-disabled="true"] { cursor: default; background: var(--charcoal); }
.text-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em;
  text-decoration-color: var(--hair);
  transition: text-decoration-color .3s;
}
.text-link:hover, .text-link:focus-visible { text-decoration-color: currentColor; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .4s;
}
.nav.is-scrolled { border-bottom-color: var(--hair); }
.nav-mark { text-decoration: none; font-size: 26px; padding: 6px 0; }
.nav-links { display: flex; gap: clamp(16px, 2.6vw, 40px); }
.nav-links a {
  text-decoration: none; display: inline-flex; gap: .7em; align-items: baseline;
  padding: 8px 0; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--spectrum); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .nav-toggle {
    display: block; background: none; border: 1px solid var(--hair);
    color: var(--ink); padding: 8px 12px; cursor: pointer; border-radius: 0;
  }
  .nav nav {
    position: fixed; inset: var(--nav-h) 0 0 0;
    background: var(--paper);
    padding: 32px var(--gutter);
    visibility: hidden; opacity: 0;
    transition: opacity .3s, visibility 0s .3s;
  }
  .nav.is-open nav { visibility: visible; opacity: 1; transition: opacity .3s; }
  .nav-links { flex-direction: column; gap: 4px; font-size: 15px; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--hair); width: 100%; }
}

/* ---------- Reveal (progressive: only hidden once JS confirms) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Dark rooms: inset windows in the paper ---------- */
.room { position: relative; }
.room-window {
  position: relative;
  background: var(--room);
  color: var(--paper);
  overflow: hidden;
  /* a window cut into the page: a hairline edge and a little depth at the top */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 24px 48px -24px rgba(0,0,0,.9);
  isolation: isolate;
}
.room-window::after {   /* faint registration corners: an instrument, not a screen */
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  background:
    linear-gradient(var(--hair-lt), var(--hair-lt)) left top / 10px 1px no-repeat,
    linear-gradient(var(--hair-lt), var(--hair-lt)) left top / 1px 10px no-repeat,
    linear-gradient(var(--hair-lt), var(--hair-lt)) right bottom / 10px 1px no-repeat,
    linear-gradient(var(--hair-lt), var(--hair-lt)) right bottom / 1px 10px no-repeat;
}
.room-label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  padding-top: 14px;
}
.room-label .mono { color: var(--ink); }
.room-label em { color: var(--muted); font-size: 15px; }
.room-label .text-link { margin-left: auto; }

/* ---------- Hero: THING3 leads, Prototype_001 proves ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gutter);
  align-items: end;
  padding: clamp(32px, 7vh, 88px) var(--gutter) clamp(48px, 9vh, 112px);
  min-height: calc(100svh - var(--nav-h));
}
.hero-copy { display: flex; flex-direction: column; }
.masthead { font-size: clamp(64px, 9.6vw, 164px); }
.rule { display: flex; align-items: center; gap: 14px; margin: clamp(18px, 2.6vh, 28px) 0 16px; }
.rule-spectrum { width: 33%; height: 5px; background: var(--spectrum); filter: saturate(.9); }
.rule-line { flex: 1; height: 1px; background: var(--ink); opacity: .55; }
.descriptor { color: var(--muted); }
.headline {
  margin-top: clamp(36px, 7vh, 80px);
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.035em;
}
.hero-sub {
  margin-top: clamp(20px, 3vh, 32px);
  max-width: 31em;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--charcoal);
}
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(24px, 4vh, 40px); }

.room--hero .room-window { aspect-ratio: 3 / 2; }
.specimen { width: 100%; height: 100%; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; align-items: start; }
  .masthead { font-size: clamp(60px, 17vw, 140px); }
  .room--hero { margin-top: 24px; max-width: 640px; }
}

/* ---------- Sections (shared) ---------- */
.section { padding: clamp(80px, 11vw, 160px) var(--gutter); position: relative; border-top: 1px solid var(--hair); }
.sec-label { display: flex; align-items: center; gap: 16px; color: var(--muted); margin-bottom: clamp(28px, 4vw, 48px); }
.sec-label span { color: var(--ink); }
.sec-label::after { content: ""; flex: 0 1 120px; height: 2px; background: var(--spectrum); filter: saturate(.9); }

/* ---------- Spectrum: used only where light happens (edges, thresholds, moments of reveal) ---------- */
/* Spectral rule: the masthead's rule in miniature. A third of the column's top line is light,
   and it draws in as the column arrives. */
.spectral-top { position: relative; }
.spectral-top::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 33%; height: 3px;
  background: var(--spectrum); filter: saturate(.9);
  transform-origin: left; transform: scaleX(1);
  transition: transform 1.2s var(--ease) .25s;
}
.js .spectral-top[data-reveal]:not(.is-in)::before { transform: scaleX(0); }

/* Dispersion line: ink in, a small prism, the spectrum out (red deviates least, violet most) */
.dispersion { display: block; width: 100%; height: 110px; overflow: hidden; }   /* drawn by js/main.js */
.signature .dispersion { margin-bottom: clamp(16px, 2vw, 28px); }

/* Lit edge: a sliver of light escaping along the bottom of each dark room */
.room-window::before, .plate::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 7;
  background: var(--spectrum); opacity: .85; pointer-events: none;
}
.h2 {
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 15em;
}
.lede { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; margin-top: 32px; max-width: 32em; color: var(--charcoal); }
.body { font-size: 17px; line-height: 1.6; max-width: 36em; color: var(--charcoal); margin-top: 24px; }
.footnote { color: var(--muted); font-size: 11px; letter-spacing: .1em; margin-top: 48px; max-width: 60em; text-transform: none; }
.k { color: var(--muted); }

/* spec sheet: label / value rows on hairlines */
.spec { margin-top: 32px; border-top: 1px solid var(--hair); max-width: 36em; }
.spec > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.spec dt { color: var(--muted); font-size: 11px; padding-top: 3px; }
.spec dd { font-size: 16px; line-height: 1.45; }
.spec--wide { max-width: none; margin-top: 0; }
.spec--wide > div { grid-template-columns: 150px minmax(0, 1fr); padding: 14px 0; }

/* ---------- 01 Why it matters ---------- */
.stuck {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter);
  margin-top: clamp(48px, 6vw, 80px);
}
.stuck-col { border-top: 1px solid var(--ink); padding-top: 22px; }
.stuck-k { color: var(--muted); }
.stuck-col h3 { margin: 14px 0 12px; font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.12; letter-spacing: -0.02em; max-width: 18em; }
.stuck-col p:last-child { color: var(--charcoal); max-width: 32em; }
.closing { margin-top: clamp(48px, 6vw, 80px); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; max-width: 34em; }

/* ---------- 02 Prototypes ---------- */
.proto-intro { margin-top: 0; }
.proto {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter);
  margin-top: clamp(48px, 6vw, 88px);
  align-items: start;
}
.proto-no { color: var(--muted); }
.proto-title { margin-top: 10px; font-weight: 500; font-size: clamp(52px, 7vw, 112px); line-height: .92; letter-spacing: -0.04em; }
.proto-sub { margin-top: 14px; font-size: clamp(18px, 1.4vw, 21px); color: var(--muted); }
.inside-k { margin-top: 32px; color: var(--muted); }
.inside { margin-top: 10px; max-width: 34em; }
.inside li { padding: 5px 0 5px 1.4em; position: relative; font-size: 16px; color: var(--charcoal); }
.inside li::before { content: "+"; position: absolute; left: 0; color: var(--ink); }
.room--plate { position: sticky; top: calc(var(--nav-h) + 24px); }
.room--plate .room-window { padding: clamp(12px, 2vw, 28px); }
.tray { width: 100%; height: auto; }
.tray .tray-t { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; fill: rgba(245,241,230,.55); }
.tray .tray-big { font-family: var(--sans); font-size: 22px; font-weight: 300; letter-spacing: -0.01em; fill: var(--paper); font-variant-numeric: tabular-nums; }
.honest {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 16px; border-top: 1px solid var(--hair);
  color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: none; max-width: 70em;
}
.proto-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }

/* ---------- 03 What we make ---------- */
.sketches { margin-top: clamp(56px, 7vw, 96px); }
.sketches-k { color: var(--ink); }
.sketches-note { margin-top: 6px; font-style: italic; color: var(--muted); max-width: 36em; }
.sketch-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter);
  margin-top: 28px;
}
.sketch-list li { border-top: 1px dashed rgba(20,20,18,.35); padding-top: 20px; }   /* dashed: not made yet */
.sketch-list .mono { color: var(--muted); font-size: 11px; }
.sketch-list h3 { margin: 14px 0 10px; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; letter-spacing: -0.02em; }
.sketch-list p:last-child { color: var(--charcoal); font-size: 16px; max-width: 24em; }
.involves {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px var(--gutter);
  margin-top: clamp(64px, 8vw, 112px);
}
.involves-k { color: var(--ink); padding-top: 14px; }
.involves-side { grid-row: 1 / span 3; }
.panes {
  display: block; width: 100%; height: clamp(320px, 52vh, 460px); overflow: visible;
  margin-top: 24px;
}
/* each row's colour tick appears once its pane is in line */
.involves .spec > div { position: relative; }
.involves .spec dt { position: relative; padding-left: 16px; }
.involves .spec dt::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 8px;
  background: var(--c, var(--hair)); clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: scale(0); transition: transform .5s var(--ease);
}
.involves .spec > div.is-aligned dt::before { transform: scale(1); }
.involves .spec, .involves .depends, .involves .rule-line-copy { grid-column: 2; }
.depends, .rule-line-copy { font-size: 16px; color: var(--charcoal); max-width: 44em; margin-top: 12px; }
.depends .mono, .rule-line-copy .mono { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.rule-line-copy { font-size: clamp(18px, 1.4vw, 21px); color: var(--ink); }

/* ---------- 04 How we work (method diagram) ---------- */
.approach-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; }
.approach-intro .lede { margin-top: 0; }
.method {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--gutter);
  margin-top: clamp(64px, 9vw, 120px);
}
.method-rays { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.method-rays .beam { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.method-rays .ray { stroke-width: 1.5; fill: none; transition: opacity .5s, stroke-width .5s; }
.method-rays .ray-glow { stroke-width: 9; fill: none; opacity: 0; transition: opacity .5s; filter: blur(5px); }
.method[data-active] .ray { opacity: .22; }
.method[data-active] .ray.is-on { opacity: 1; stroke-width: 2; }
.method[data-active] .ray-glow.is-on { opacity: .35; }
.method-prism {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  padding-right: 18%;
}
.method-src { position: absolute; left: 0; color: var(--muted); font-size: 11px; transform: translateY(-34px); top: 50%; }
.method-tri { width: clamp(90px, 10vw, 140px); height: auto; overflow: visible; }
.method-tri polygon { fill: rgba(245, 241, 230, .6); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.method-tri .inner { fill: none; stroke-opacity: .25; }
.stages { position: relative; z-index: 1; display: grid; }
.stage {
  position: relative;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px;
  padding: 30px 0 32px 28px;
  border-top: 1px solid var(--hair);
  outline: none;
  cursor: default;
}
.stage:last-child { border-bottom: 1px solid var(--hair); }
.stage-dot {
  position: absolute; left: -5px; top: 38px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 3px var(--paper);
}
.stage-n { grid-row: span 2; color: var(--muted); padding-top: 6px; }
.stage h3 { font-weight: 500; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em; line-height: 1.1; }
.stage p:last-child { margin-top: 10px; color: var(--charcoal); max-width: 34em; font-size: 16px; }
.stage::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--c);
  transition: width .7s var(--ease);
}
.stage.is-on::before, .stage:focus-visible::before { width: 100%; }
.stage.is-on .stage-n, .stage:focus-visible .stage-n { color: var(--ink); }

/* ---------- 05 Working together ---------- */
.routes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter);
  margin-top: clamp(48px, 6vw, 80px);
  counter-reset: route;
}
.routes li { border-top: 1px solid var(--ink); padding-top: 20px; counter-increment: route; }
.routes li::before { content: "0" counter(route); display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; }
.route-q { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 12px; }
.routes li p:last-child { color: var(--charcoal); font-size: 16px; max-width: 26em; }

/* ---------- 06 The studio: the dark room with the lamp and prism ---------- */
.statement {
  font-weight: 400;
  font-size: clamp(34px, 4.8vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 15em;
}
.install-zone { position: relative; margin-top: clamp(40px, 6vw, 72px); }

/* The lamp installation (js/lamp.js): an SVG layer over the install zone */
.install { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; overflow: visible; }
.install .rocker-half rect { transition: opacity .12s ease; }
.install-hit {
  position: absolute; z-index: 5;
  background: transparent; border: 0; padding: 0; margin: 0;
  border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.install-hit:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.install-hit[hidden] { display: none; }

.lamp-invite { padding: 0 0 40px; }   /* room beneath: the cable drops from the switch into the dark room */
.invite-line {
  font-weight: 300; font-size: clamp(21px, 1.8vw, 28px); line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink);
}
/* Handwritten in pen. Both phrases share one cell, so the switch never moves when the text changes. */
.invite-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px;
  font-size: 11px; letter-spacing: .18em; color: var(--muted);
}
.invite-cta .cta-text {
  order: 1; display: inline-grid; color: var(--pen);
  font-family: var(--hand); font-weight: 500;
  font-size: 25px; line-height: 1; letter-spacing: 0; text-transform: none;
  transform: rotate(-2deg); transform-origin: left center;
}
.cta-arrow { width: 44px; height: 18px; flex: none; overflow: visible; transition: opacity .3s ease, visibility .3s; }
.cta-arrow path { fill: none; stroke: var(--pen); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cta-text > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; transition: opacity .35s ease; }
.lamp-invite[data-state="off"] .cta-on, .lamp-invite[data-state="on"] .cta-off { visibility: hidden; opacity: 0; }
/* the switch leads, the arrow points back at it, then the note */
.invite-cta .switch-slot { order: 0; display: inline-block; width: 82px; height: 30px; flex: none; }
.invite-cta .cta-left { order: 0; }
.lamp-invite[data-state="on"] .cta-arrow { opacity: 0; visibility: hidden; }

/* The plate (prism figure) */
.plate {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--room);
  color: var(--paper);
  isolation: isolate;
  container-type: inline-size; container-name: fig;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
}
.plate { --stage-h: clamp(420px, 58vh, 640px); }
.plate-stage {
  position: relative;
  height: var(--stage-h);
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
}
.prism-canvas, .prism-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.prism-overlay { pointer-events: none; overflow: visible; }
.plate.lamp-off .readout dd { opacity: .3; transition: opacity .3s; }
.prism-overlay text { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; fill: rgba(245, 241, 230, .72); }
.prism-overlay .ov-line { stroke: rgba(245, 241, 230, .38); stroke-width: 1; fill: none; }
.prism-overlay .ov-faint { stroke: rgba(245, 241, 230, .16); stroke-width: 1; fill: none; }
.prism-overlay .ov-dash { stroke-dasharray: 3 4; }
.prism-overlay .ov-dot { fill: rgba(245, 241, 230, .8); }
.prism-overlay .ov-scale { font-size: 9px; letter-spacing: .04em; fill: rgba(245, 241, 230, .5); }
.prism-overlay .ov-index { fill: rgba(245, 241, 230, .85); }
.prism-overlay .ov-arrive { animation: ov-arrive .4s ease-out; }   /* a wavelength label that had to move, easing in */
@keyframes ov-arrive { from { opacity: 0; } to { opacity: 1; } }

/* The control bar along the bottom of the room: "Turn the prism" is always visible, beside
   "Show the numbers". On wide screens the numbers open as a sheet over the room's right side
   (the page never moves); on narrow screens they open below the bar, so the prism stays in view. */
.plate-bar {
  position: relative;   /* the numbers sheet hangs from here, over the room */
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding: 12px 18px;
  border-top: 1px solid var(--hair-lt);
  background: #0b0b0a;
}
.plate-bar .control { flex: 1 1 280px; grid-template-columns: auto minmax(0, 1fr); padding-top: 0; border-top: 0; }
.plate-bar .control label { white-space: nowrap; }
.plate-bar .scale-ends { grid-column: 2; margin-top: 0; }
.numbers { flex: none; }
.numbers summary {
  list-style: none; cursor: pointer;
  padding: 8px 2px; font-size: 10.5px; color: rgba(245,241,230,.7);
}
.numbers summary::-webkit-details-marker { display: none; }
.numbers summary::before { content: "+ "; }
.numbers[open] summary::before { content: "− "; }
.numbers summary:hover, .numbers summary:focus-visible { color: var(--paper); }

.plate-panel {
  position: absolute; right: 0; bottom: 100%; z-index: 6;
  width: min(330px, 100%); height: var(--stage-h); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px 16px;
  background: rgba(11,11,10,.96);
  border-left: 1px solid var(--hair-lt);
}
.panel-text, .panel-gauges { display: contents; }
/* rows keep their full height; when the text is long the sheet scrolls rather than squashing rows into each other */
.plate-panel > *, .plate-panel .panel-text > *, .plate-panel .panel-gauges > * { flex-shrink: 0; }
.plate-panel .cap-title { order: 1; }
.plate-panel .cap-line { order: 2; margin-top: -4px; }
.plate-panel .readout { order: 3; padding-top: 12px; border-top: 1px solid var(--hair-lt); grid-template-columns: 1fr; gap: 8px; }
.plate-panel .readout div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0; border-left: 0; }
.plate-panel .readout dd { margin-top: 0; font-size: 26px; }
.plate-panel .status { order: 5; }
.plate-panel .fig-note { order: 6; margin-top: -4px; }
.plate-panel .hint { order: 7; }

.cap-title { color: var(--paper); }
.fig-no { color: var(--muted-lt); margin-right: 1.2em; }
.cap-line { font-size: 14.5px; line-height: 1.45; color: rgba(245,241,230,.82); }
.fig-note { font-size: 12.5px; line-height: 1.45; color: rgba(245,241,230,.7); }
.readout { display: grid; }
.readout dt { font-size: 9.5px; letter-spacing: .1em; color: var(--muted-lt); line-height: 1.35; }
.readout dd {
  font-family: var(--sans); font-weight: 300;
  letter-spacing: -0.02em; line-height: 1; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.status { font-size: 11px; color: var(--muted-lt); min-height: 1.5em; padding-top: 10px; border-top: 1px solid var(--hair-lt); }
.status.is-tir { color: #F2C14E; }
.status.is-min { color: var(--paper); }
.hint { font-size: 12px; color: rgba(245,241,230,.6); line-height: 1.5; padding-top: 10px; border-top: 1px solid var(--hair-lt); }

.control { display: grid; align-items: center; column-gap: 14px; padding-top: 12px; border-top: 1px solid var(--hair-lt); }
.control label { font-size: 11px; color: var(--paper); }
.scale-ends { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--muted-lt); margin-top: 2px; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 26px;
  background:
    linear-gradient(rgba(245,241,230,.55), rgba(245,241,230,.55)) center / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(245,241,230,.35) 0 1px, transparent 1px 10px) center / 100% 9px no-repeat;
}
input[type="range"]::-moz-range-track {
  height: 26px;
  background:
    linear-gradient(rgba(245,241,230,.55), rgba(245,241,230,.55)) center / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(245,241,230,.35) 0 1px, transparent 1px 10px) center / 100% 9px no-repeat;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 3px; height: 26px; background: var(--paper); border: 0; border-radius: 0;
  box-shadow: 0 0 0 4px rgba(245,241,230,.08);
}
input[type="range"]::-moz-range-thumb { width: 3px; height: 26px; background: var(--paper); border: 0; border-radius: 0; }

.plate-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; text-align: center;
  background:
    linear-gradient(118deg, transparent 52%, rgba(91,87,232,.35) 56%, rgba(35,168,142,.35) 60%, rgba(233,166,58,.35) 64%, rgba(232,84,58,.35) 68%, transparent 72%),
    var(--room);
  color: var(--muted-lt);
}
.plate-fallback[hidden] { display: none; }

.room-caption { margin-top: 16px; max-width: 60em; }
.room-caption-main { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; color: var(--muted); }
.caption-turn { color: var(--ink); }
.room-caption-note { margin-top: 6px; color: var(--muted); font-size: 10.5px; letter-spacing: .08em; text-transform: none; }
.studio-copy {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter);
  margin-top: clamp(56px, 7vw, 96px);
}
.studio-copy .lede { margin-top: 0; }
.placeholder-inline { background: rgba(20,20,18,.08); padding: 0 .25em; }
.notes { display: grid; gap: 28px; }
.note { border-top: 1px solid var(--hair); padding-top: 16px; }
.note-k { color: var(--muted); margin-bottom: 8px; }
.note p:last-child { font-size: 16px; line-height: 1.55; color: var(--charcoal); max-width: 26em; }

/* ---------- Debug view (?debug): geometry inspection, not part of the site ---------- */
.t3-debug .plate-stage { cursor: default; }
.dbg-panel.is-collapsed [data-table], .dbg-panel.is-collapsed .dbg-row + .dbg-row { display: none; }
.dbg-panel select { font: inherit; background: #1d1d1b; color: inherit; border: 1px solid rgba(255,255,255,.25); }
.prism-overlay .dbg-ray { vector-effect: non-scaling-stroke; }
.prism-overlay .dbg-normal { stroke: #9fe3ff; stroke-width: 1; stroke-dasharray: 5 3; fill: none; }
.prism-overlay .dbg-n { stroke: rgba(245,241,230,.5); stroke-width: 1; }
.prism-overlay .dbg-hit { fill: none; stroke: #fff; stroke-width: 1.2; }
.prism-overlay .dbg-v { fill: #ffd25a; }
.prism-overlay .dbg-arc { stroke: #9fe3ff; stroke-width: 1.2; fill: none; }
.prism-overlay .dbg-arc.dev { stroke: #ffd25a; }
.prism-overlay .dbg-arc.spr { stroke: #ff8fd0; }
.prism-overlay .dbg-ext { stroke: rgba(255,255,255,.55); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.prism-overlay .dbg-t { font-size: 10px; letter-spacing: .02em; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.75); stroke-width: 3px; }
.prism-overlay .dbg-t.dim { fill: rgba(255,255,255,.6); }
.dbg-panel {
  position: fixed; left: 12px; bottom: 12px; z-index: 300; max-width: min(640px, calc(100vw - 24px));
  background: rgba(8,8,8,.92); color: #e9e5da; border: 1px solid rgba(255,255,255,.2);
  font: 11px/1.45 var(--mono); padding: 10px 12px;
}
.dbg-panel .dbg-h { text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; color: #ffd25a; }
.dbg-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 6px; }
.dbg-panel button, .dbg-panel input[type=number] { font: inherit; background: #1d1d1b; color: inherit; border: 1px solid rgba(255,255,255,.25); padding: 2px 6px; }
.dbg-panel input[type=number] { width: 70px; }
.dbg-panel pre { margin: 6px 0 0; white-space: pre; overflow-x: auto; font: inherit; }

/* ---------- 07 Contact ---------- */
.contact { padding-bottom: 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gutter); }
.contact-side .body { margin-top: 0; }
.contact-detail {
  display: grid; grid-template-columns: 90px 1fr; row-gap: 14px; margin: 36px 0 32px;
  border-top: 1px solid var(--hair); padding-top: 20px;
}
.contact-detail dt { color: var(--muted); padding-top: 3px; }
.contact-detail dd { font-size: 18px; }
.placeholder { font-size: 13px; padding: 4px 10px; background: rgba(20,20,18,.07); letter-spacing: .1em; }
.signature {
  margin-top: clamp(80px, 12vw, 160px);
  overflow: hidden;
}
.wordmark-xl {
  display: block;
  font-size: clamp(80px, 21.5vw, 360px);
  letter-spacing: -0.045em;
  line-height: .8;
  margin-left: -0.04em;
  padding-bottom: .06em;
  /* Light grazes the base of the letters and splits into its colours */
  background:
    linear-gradient(180deg, var(--ink) 68%, rgba(20,20,18,.82) 86%, rgba(20,20,18,.5) 100%),   /* a tint of light at the base, not a stripe */
    var(--spectrum);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Footer ---------- */
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding: 22px var(--gutter) 28px;
  font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--hair);
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* ---------- Prototype pages (/prototypes/NNN/): paper page, one dark plate ---------- */
.pp-head { padding: clamp(32px, 6vh, 72px) var(--gutter) clamp(56px, 8vw, 104px); }
.crumbs { color: var(--muted); }
.crumbs a { text-decoration: none; color: var(--ink); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: .4em; }
.pp-head .proto-title { margin-top: 28px; font-size: clamp(64px, 10vw, 168px); }
.pp-plate { margin-top: clamp(36px, 5vw, 64px); }
.pp-window {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1px; background: var(--hair-lt);   /* hairlines between the cells */
}
.pp-cell, .pp-play { background: var(--room); padding: clamp(14px, 2vw, 24px); }
.pp-no { color: var(--muted-lt); margin-bottom: 10px; }
.pp-canvas { aspect-ratio: 16 / 10; }
.pp-cell--tray { display: flex; flex-direction: column; }
.pp-cell--tray .tray { margin-top: auto; margin-bottom: auto; }
.pp-play { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pp-play .mono { color: var(--muted-lt); }
.btn--light { background: var(--paper); color: var(--ink); }
.pp-plate .room-label .pen { font-size: 22px; margin-left: auto; }
.pp-body { padding: 0 var(--gutter) clamp(80px, 10vw, 140px); }
.pp-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px var(--gutter);
  padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--hair);
}
.pp-k { color: var(--ink); font-weight: 400; padding-top: 6px; }
.pp-v .lede, .pp-v .body { margin-top: 0; }
.pp-v .spec { margin-top: 0; }
.pp-truth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.pp-tk { color: var(--muted); }
.pp-truth .inside li { font-size: 15.5px; }
.pp-cta { margin-top: 24px; }
.sources li { padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--charcoal); max-width: 52em; }
.sources li:first-child { border-top: 1px solid var(--hair); }
.pp-v .honest { margin-top: 28px; border-top: 0; padding-top: 0; }

/* ---------- Narrower screens ---------- */
@media (max-width: 860px) {
  .stuck, .sketch-list, .routes { grid-template-columns: 1fr; gap: 36px; }
  .proto { grid-template-columns: 1fr; }
  .room--plate { position: relative; top: 0; }
  .involves { grid-template-columns: 1fr; }
  .involves .spec, .involves .depends, .involves .rule-line-copy { grid-column: 1; }
  .involves-side { grid-row: auto; }
  .panes { position: relative; top: 0; height: 280px; max-width: 420px; }
  .approach-intro { grid-template-columns: 1fr; }
  .approach-intro .lede { margin-top: 24px; }
  .method { grid-template-columns: 1fr; gap: 24px; }
  .method-rays { display: none; }
  .method-prism { align-items: flex-start; padding: 0; }
  .method-src { display: none; }
  .method-tri { width: 72px; }
  .stage { grid-template-columns: 40px minmax(0,1fr); padding-left: 22px; }
  .stage-dot { left: 0; }
  .studio-copy { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-side { margin-top: 32px; }
  .pp-window { grid-template-columns: 1fr; }
  .pp-row { grid-template-columns: 1fr; }
  .pp-truth { grid-template-columns: 1fr; gap: 24px; }
  /* narrow screens: the numbers open below the bar, in the page, so the prism stays visible */
  .plate-bar { padding: 12px 14px; }
  .numbers[open] { flex-basis: 100%; }
  .numbers .plate-panel { position: static; width: auto; height: auto; overflow: visible; border-left: 0; padding: 14px 0 6px; background: none; }
}
@media (max-width: 520px) {
  .plate { --stage-h: min(78svh, calc((100vw - 2 * var(--gutter)) * 1.25)); }
  .spec > div, .spec--wide > div { grid-template-columns: 1fr; gap: 2px; }
  .invite-cta .switch-slot { width: 70px; height: 26px; }
  /* keep the note on the switch's line, so the cable dropping from the switch never crosses it */
  .invite-cta { flex-wrap: nowrap; gap: 8px; }
  .invite-cta .cta-text { font-size: 21px; }
  .cta-arrow { width: 30px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}