@view-transition{ navigation: auto; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation: none; } }
::view-transition-old(root){ animation-duration:180ms; animation-timing-function:linear; }
::view-transition-new(root){ animation-duration:180ms; animation-timing-function:linear; }

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ground-bone:#F2F0EA;
  --ground-bone-2:#E6E4DD;
  --ground-bone-3:#DDDBD3;
  --ink:#111111;
  --ink-muted:#55534E;
  --accent:#E16B2C;
  --accent-text:#A8481B;
  --accent-deep:#8F3A12;
  --rule-hard:var(--ink);
  --rule-grid:rgb(17 17 17 / .10);
  --rule-leader:#999999;
  --signal-fail:#8A1C1C;

  --font-display:'Archivo',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-9:56px; --sp-10:72px;

  --margin:48px;
  --gutter:24px;
  --nav-h:60px;

  --ease-hard: linear;
  --ease-snap: cubic-bezier(.2,.9,.2,1);
  --dur-fast: 120ms;
  --dur-med: 260ms;

  /* CRT / texture — every knob for the screen treatment lives here */
  --grain-color:#111111;
  --grain-opacity:.045;
  --scanline-color:17 17 17;
  --scanline-opacity:.04;
  --vignette-opacity:.11;
  --glow:10px;
  --glow-accent:rgb(225 107 44 / .30);
  --glow-ink:rgb(17 17 17 / .10);
  --caption-halo:rgb(242 240 234 / .92);

  --plate-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420' preserveAspectRatio='none'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.0' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2.0' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2.0' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0.50 0 0 0 0.28 0.50 0 0 0 0.275 0.49 0 0 0 0.265 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='640' height='420' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* CRT mode — ground and ink swap per the Foundations token spec.
   Accent is lifted on the dark ground; --accent-text can match it there
   because #F08A45 measures 7.8:1 on this ground. */
:root[data-theme="crt"]{
  --ground-bone:#0C0D10;
  --ground-bone-2:#14161B;
  --ground-bone-3:#1C1F26;
  --ink:#E8E6DE;
  --ink-muted:#8A897F;
  --accent:#F08A45;
  --accent-text:#F08A45;
  --accent-deep:#FFB07A;
  --rule-grid:rgb(232 230 222 / .12);
  --rule-leader:#4A4C55;
  --signal-fail:#FF6B6B;

  --grain-color:#E8E6DE;
  --grain-opacity:.03;
  --scanline-color:0 0 0;
  --scanline-opacity:.30;
  --vignette-opacity:.55;
  --glow:14px;
  --glow-accent:rgb(240 138 69 / .55);
  --glow-ink:rgb(232 230 222 / .22);
  --caption-halo:rgb(12 13 16 / .92);
}

@media (max-width:760px){
  :root{ --margin:20px; --gutter:16px; }
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground-bone)}
body{
  margin:0;
  background:var(--ground-bone);
  color:var(--ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none), (pointer:coarse){ body{ cursor:auto } }
p,h1,h2,h3,h4{margin:0}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent-deep);color:var(--ground-bone)}

.mono{font-family:var(--font-mono)}

/* type scale */
.t-display-xl{
  font:700 clamp(64px,13.5vw,208px)/.84 var(--font-display);
  font-stretch:88%;
  letter-spacing:-.055em;
  margin-left:-.03em;
}
.t-display-m{ font:600 clamp(30px,5vw,56px)/1 var(--font-display); letter-spacing:-.04em; }
.t-display-s{ font:600 clamp(28px,3.8vw,44px)/1 var(--font-display); letter-spacing:-.04em; }
.t-xl{ font:500 clamp(20px,2vw,26px)/1.15 var(--font-display); letter-spacing:-.025em; }
.t-l{ font:400 clamp(17px,1.4vw,20px)/1.45 var(--font-display); }
.t-m{ font:400 15px/1.5 var(--font-display); }
.mono-m{ font:400 12px/1.5 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.mono-s{ font:400 11px/1.5 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.mono-xs{ font:400 10px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:760px){
  .mono-s{ font-size:12px }
  .mono-xs{ font-size:11px }
}

.accent{color:var(--accent-text)}
.muted{color:var(--ink-muted)}
.fail{color:var(--signal-fail)}

/* ============================================================
   LAYOUT / GRID
   ============================================================ */
.wrap{position:relative;background:var(--ground-bone);overflow:hidden}

.gridlines{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);padding-inline:var(--margin);pointer-events:none;z-index:0}
.gridlines i{border-left:1px solid var(--rule-grid);display:block;height:100%;
  transform:scaleY(0);transform-origin:top;animation:drawline 420ms var(--ease-hard) forwards}
.gridlines i:last-child{border-right:1px solid var(--rule-grid)}
@keyframes drawline{to{transform:scaleY(1)}}
@media (max-width:760px){ .gridlines{grid-template-columns:repeat(4,1fr)} }

.row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);padding-inline:var(--margin)}
@media (max-width:760px){
  .row{grid-template-columns:repeat(4,1fr)}
  .row > *{grid-column:1/-1 !important}
}

.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}
.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}
.c10{grid-column-end:span 10}.c11{grid-column-end:span 11}.c12{grid-column-end:span 12}
.s1{grid-column-start:1}.s2{grid-column-start:2}.s3{grid-column-start:3}
.s4{grid-column-start:4}.s5{grid-column-start:5}.s6{grid-column-start:6}
.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}
.s10{grid-column-start:10}.s11{grid-column-start:11}

.tri{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
@media (max-width:760px){
  .tri,.duo{grid-template-columns:1fr;gap:var(--sp-6)}
}

.section{border-top:1px solid var(--rule-hard);position:relative}
/* accent sweeps along a section rule as it enters, then clears */
.section::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none;
}
.section.in::before{animation:rule-sweep 900ms var(--ease-snap) forwards}
@keyframes rule-sweep{
  0%{transform:scaleX(0);opacity:1}
  65%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .section.in::before{animation:none} }
.section-pad{padding-block:14px var(--sp-9)}

.gutter-label{
  position:absolute;top:50%;font:400 11px/1 var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;pointer-events:none;
  transform-origin:center;
}
.gutter-label.left{left:14px;transform:translateY(-50%) rotate(-90deg)}
.gutter-label.right{right:14px;transform:translateY(-50%) rotate(90deg)}
@media (max-width:900px){ .gutter-label{display:none} }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;background:var(--ground-bone);
  border-bottom:1px solid var(--rule-hard);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  padding:18px var(--margin);font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
}
.nav-links{display:flex;align-items:center;gap:var(--sp-6)}
.nav-context{color:var(--ink-muted)}
.nav a{position:relative;padding-bottom:2px}
.nav a.active{color:var(--accent-text)}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--accent);
  transition:right var(--dur-fast) var(--ease-snap);
}
.nav a:hover::after,.nav a.active::after{right:0}
@media (max-width:760px){
  .nav-context{display:none}
  .nav-row{gap:10px;padding-inline:var(--margin)}
  .nav-links{gap:14px}
  .nav-row > a:first-child{white-space:nowrap}
}
@media (max-width:420px){
  .nav-links{gap:10px}
  .nav-row,.nav-links{font-size:10px}
}

/* progress bar */
.scrollbar{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0%;z-index:60;transform-origin:left}

/* status dot */
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);
  margin-right:6px;vertical-align:middle;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ============================================================
   KV / SPEC BLOCK
   ============================================================ */
.kv{display:grid;gap:6px;font:400 12px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.kv-row{display:flex;align-items:baseline;gap:8px}
.kv-row span:first-child{color:var(--accent-text);flex-shrink:0}
.kv-leader{flex:1;border-bottom:1px dotted var(--rule-leader);transform:translateY(-4px);
  position:relative;overflow:hidden}
.kv-leader::after{content:"";position:absolute;inset:0;border-bottom:1px solid var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-med) var(--ease-snap)}
.kv-row:hover .kv-leader::after{transform:scaleX(1)}
.kv-row span:last-child{text-align:right}
@media (max-width:520px){
  .kv-row{flex-wrap:wrap}
  .kv-row span:last-child{width:100%;text-align:left;margin-top:-4px}
  .kv-leader{display:none}
}

/* ============================================================
   MEDIA PLACEHOLDER
   ============================================================ */
/* Duotone halftone plate — stands in for photography at the right
   texture, per the brief's imagery direction. Swap --plate-url for a
   real image and the halftone/crop-mark furniture still applies. */
.media{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ground-bone-2);
  border-block:1px solid var(--rule-hard);
}
.media::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    radial-gradient(circle, rgb(17 17 17 / .50) 0 1.2px, transparent 1.6px),
    var(--plate-url);
  background-size:5px 5px, 100% 100%;
  background-position:0 0, center;
  background-repeat:repeat, no-repeat;
  transform:scale(1.03);
  transition:clip-path 760ms var(--ease-snap), transform 1200ms var(--ease-snap);
}
.js .media::before{clip-path:inset(0 0 100% 0)}
/* .in goes on .media, never on the clipped child — a clip-path on the
   observed element itself stops IntersectionObserver firing. */
.media.in::before{clip-path:inset(0 0 0 0);transform:scale(1)}
.media:hover::before{transform:scale(1.06)}
:root[data-theme="crt"] .media::before{filter:invert(1) saturate(0) brightness(.62)}

/* crop marks — corners of media frames only */
.media::after{
  content:"";position:absolute;inset:10px;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;
  background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px;
  background-position:
    left top,left top,right top,right top,
    left bottom,left bottom,right bottom,right bottom;
  opacity:.55;
}
/* halo keeps 11px mono legible over the mid-tone plate */
.fig-caption{position:absolute;left:var(--sp-5);top:var(--sp-4);max-width:44%;font:400 11px/1.6 var(--font-mono);
  letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 0 6px var(--caption-halo),0 0 3px var(--caption-halo)}
.media .fig-caption .muted{color:var(--ink)}
.fig-caption.right{left:auto;right:var(--sp-5);text-align:right}
.fig-caption.bottom{top:auto;bottom:var(--sp-4)}
@media (max-width:500px){
  .fig-caption .t-display-s{font-size:22px}
}

/* ============================================================
   REVEAL
   ============================================================ */
/* hidden-until-revealed only when JS is running, so a failed script
   never leaves the page blank */
.js .reveal{opacity:0;transform:translateY(14px);transition:transform 420ms var(--ease-snap),opacity 320ms linear}
.js .reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;transition:none} }

/* counters */
[data-count]{font-variant-numeric:tabular-nums}

/* ============================================================
   DECISIONS BLOCK
   ============================================================ */
.decision{border-bottom:1px solid var(--rule-hard);padding:var(--sp-7) var(--margin) var(--sp-8);
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter)}
.decision-index{font:600 clamp(48px,6vw,88px)/.85 var(--font-display);letter-spacing:-.05em;color:var(--accent)}
.decision h3{max-width:16ch;text-wrap:pretty}
.decision-detail{display:grid;gap:20px;font:400 15px/1.5 var(--font-display)}
.decision-detail .label{font:400 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:8px;color:var(--ink-muted)}
.decision-detail .label.why{color:var(--accent-text)}
@media (max-width:760px){
  .decision{grid-template-columns:repeat(4,1fr)}
  .decision-index{grid-column:1/-1}
  .decision h3{grid-column:1/-1}
  .decision-detail{grid-column:1/-1}
}

/* ============================================================
   ARTEFACT GRID
   ============================================================ */
.artefacts{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gutter);padding-inline:var(--margin)}
.artefact{display:flex;flex-direction:column;gap:8px;transition:transform var(--dur-fast) var(--ease-snap)}
.artefact:hover{transform:translateY(-3px)}
.artefact .frame{aspect-ratio:4/3;border:1px solid rgb(17 17 17/.2);position:relative;overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--ground-bone-3) 0 6px,var(--ground-bone-2) 6px 12px)}
.artefact:hover .frame{border-color:var(--accent)}
.artefact .cap{display:flex;justify-content:space-between;gap:8px;font:400 11px/1.5 var(--font-mono);
  letter-spacing:.08em;text-transform:uppercase}
@media (max-width:760px){ .artefacts{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   WORK INDEX ROWS
   ============================================================ */
.work-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);
  padding:28px var(--margin) 32px;border-top:1px solid var(--rule-hard);align-items:start;position:relative}
.work-row .num{font:600 clamp(40px,4.5vw,56px)/.9 var(--font-display);letter-spacing:-.04em;color:var(--accent)}
.work-row h2{font:600 clamp(30px,3.5vw,44px)/1 var(--font-display);letter-spacing:-.04em}
.work-row .prop{font:400 clamp(16px,1.6vw,20px)/1.35 var(--font-display);letter-spacing:-.01em;max-width:34ch;text-wrap:pretty}
.work-row .peek{aspect-ratio:3/4;border:1px solid rgb(17 17 17/.2);
  background:repeating-linear-gradient(135deg,var(--ground-bone-3) 0 6px,var(--ground-bone-2) 6px 12px);
  overflow:hidden;position:relative}
.work-row .peek::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;
  mix-blend-mode:multiply;transition:opacity var(--dur-med)}
.work-row:hover .peek::after{opacity:.28}
.work-row:hover h2{color:var(--accent)}
.work-row .peek-track{position:absolute;inset:0;transform:translateY(6%);transition:transform var(--dur-med) var(--ease-snap)}
.work-row:hover .peek-track{transform:translateY(0)}
@media (max-width:760px){
  .work-row{grid-template-columns:repeat(4,1fr);gap:12px}
  .work-row > *{grid-column:1/-1 !important}
  .work-row .peek{display:none}
}

/* client marquee */
.marquee{overflow:hidden;border-top:1px solid var(--rule-hard);padding-block:var(--sp-5);padding-inline:var(--margin)}
.marquee-track{display:flex;gap:var(--sp-10);width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font:600 clamp(24px,3vw,32px)/1 var(--font-display);letter-spacing:-.03em;white-space:nowrap}
.marquee-track span.dim{color:var(--ink-muted)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   BUTTONS / LINKS
   ============================================================ */
.arrow-link{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--font-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);border-bottom:1px solid var(--accent);
  padding-bottom:6px;transition:gap var(--dur-fast) var(--ease-snap)}
.arrow-link:hover{gap:16px;color:var(--accent-deep);border-color:var(--accent-deep)}
.arrow-link svg{transition:transform var(--dur-fast) var(--ease-snap)}
.arrow-link:hover svg{transform:translateX(3px)}

/* ============================================================
   OUTCOME TILES
   ============================================================ */
.outcome-tile{border-top:1px solid var(--rule-hard);padding-top:14px}
.outcome-tile .num{font:600 clamp(56px,7vw,96px)/.9 var(--font-display);letter-spacing:-.05em}
.outcome-tile .unit{font-size:.4em;letter-spacing:-.02em;margin-left:4px}

/* ============================================================
   PAGER
   ============================================================ */
.pager{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);
  padding:14px var(--margin) var(--sp-8);border-top:1px solid var(--rule-hard);color:var(--ink);
  text-decoration:none;position:relative;overflow:hidden}
@media (max-width:760px){
  .pager{grid-template-columns:repeat(4,1fr);row-gap:8px}
  .pager > *{grid-column:1/-1 !important}
}
.pager-name{font:700 clamp(32px,13vw,208px)/.84 var(--font-display);font-stretch:88%;letter-spacing:-.055em;
  margin-left:-.03em;overflow-wrap:anywhere;transition:transform var(--dur-med) var(--ease-snap)}
.pager:hover .pager-name{transform:translateX(10px);color:var(--accent)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:14px var(--margin);
  border-top:1px solid var(--rule-hard);font:400 11px/1 var(--font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted)}

/* ============================================================
   NOISE / GRAIN OVERLAY
   ============================================================ */
/* Grain is a tiled alpha mask painted in --grain-color, so one texture
   works on both the bone ground and the CRT ground. It must tile 1:1 —
   stretching the tile turns grain into smeared blobs. */
.noise{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:var(--grain-color);
  opacity:var(--grain-opacity);
  -webkit-mask-image:var(--grain-url);mask-image:var(--grain-url);
  -webkit-mask-size:140px 140px;mask-size:140px 140px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  animation:grain-shift 620ms steps(1) infinite;
}
@keyframes grain-shift{
  0%{ -webkit-mask-position:0 0; mask-position:0 0 }
  25%{ -webkit-mask-position:-37px 19px; mask-position:-37px 19px }
  50%{ -webkit-mask-position:23px -43px; mask-position:23px -43px }
  75%{ -webkit-mask-position:-51px -11px; mask-position:-51px -11px }
}

/* Scanlines + vignette in one layer. multiply darkens on either ground. */
.crt{
  position:fixed;inset:0;z-index:9997;pointer-events:none;mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(to bottom,
      rgb(var(--scanline-color) / var(--scanline-opacity)) 0 1px,
      transparent 1px 3px),
    radial-gradient(ellipse 125% 105% at 50% 50%,
      transparent 55%, rgb(var(--scanline-color) / var(--vignette-opacity)) 100%);
}
.crt::after{
  content:"";position:absolute;inset:0;
  background:rgb(var(--scanline-color) / .04);
  animation:crt-flicker 4.2s steps(1) infinite;
}

@keyframes crt-flicker{
  0%,92%,100%{opacity:0}
  93%{opacity:.5}
  94%{opacity:0}
  96%{opacity:.75}
  97%{opacity:.1}
}

/* CRT power-on: the picture snaps open from a scanline. */
.power-on{animation:power-on 520ms cubic-bezier(.2,.9,.2,1) both}
@keyframes power-on{
  0%{transform:scaleY(.002) scaleX(.6);filter:brightness(3.2);opacity:.9}
  45%{transform:scaleY(.02) scaleX(1);filter:brightness(2.4)}
  75%{transform:scaleY(1) scaleX(1);filter:brightness(1.35)}
  100%{transform:none;filter:none;opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .noise{animation:none}
  .crt::after{animation:none}
  .power-on{animation:none}
}

/* ============================================================
   PHOSPHOR GLOW
   Display type, accent and rules bloom. Body copy deliberately
   does not — glow on running text costs more legibility than it
   buys atmosphere. Tune globally with --glow on :root.
   ============================================================ */
.t-display-xl,.t-display-m,.t-display-s,.pager-name,
.work-row h2,.work-row .num,.decision-index,.outcome-tile .num{
  text-shadow:0 0 var(--glow) var(--glow-ink);
}
.accent,.todo,.decision-index,.work-row .num,
.kv-row span:first-child,.decision-detail .label.why{
  text-shadow:0 0 var(--glow) var(--glow-accent);
}
.nav a,.arrow-link,.mono-s.accent{text-shadow:0 0 8px var(--glow-accent)}
.nav{box-shadow:0 1px var(--glow) rgb(17 17 17 / .05)}
.section,.decision,.work-row{box-shadow:0 -1px var(--glow) var(--glow-ink)}
.work-row:hover h2{text-shadow:0 0 calc(var(--glow) * 1.8) var(--glow-accent)}
.pager:hover .pager-name{text-shadow:0 0 calc(var(--glow) * 2) var(--glow-accent)}

:root[data-theme="crt"] .media{box-shadow:0 0 30px rgb(240 138 69 / .18) inset}
:root[data-theme="crt"] .todo-block{box-shadow:0 0 18px rgb(240 138 69 / .12)}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle{
  font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid var(--rule-grid);color:var(--ink-muted);
  padding:6px 9px;display:inline-flex;align-items:center;gap:7px;
  transition:color var(--dur-fast) linear,border-color var(--dur-fast) linear;
}
.theme-toggle:hover{color:var(--accent-text);border-color:var(--accent)}
.theme-toggle .led{
  width:6px;height:6px;border-radius:50%;background:var(--ink-muted);
  transition:background var(--dur-fast) linear,box-shadow var(--dur-fast) linear;
}
.theme-toggle:hover .led,:root[data-theme="crt"] .theme-toggle .led{
  background:var(--accent);box-shadow:0 0 8px var(--accent);
}
/* icon-only below the nav's comfortable width; aria-label carries the name */
@media (max-width:760px){
  .theme-toggle{padding:6px;gap:0;font-size:0;flex:none}
  .theme-toggle .led{width:8px;height:8px}
}

/* ============================================================
   CUSTOM CURSOR / TELEMETRY
   ============================================================ */
body a, body button, body [role="button"], body label{cursor:none}

.cursor{
  position:fixed;top:0;left:0;width:18px;height:18px;pointer-events:none;z-index:1000;
  will-change:transform;color:var(--accent);
  transition:width var(--dur-fast) var(--ease-snap),height var(--dur-fast) var(--ease-snap),color var(--dur-fast) linear;
}
.cursor svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cursor .cur-hover{opacity:0;transform:scale(.5);transition:opacity var(--dur-fast) var(--ease-snap),transform var(--dur-fast) var(--ease-snap)}
.cursor .cur-default{opacity:1;transform:scale(1);transition:opacity var(--dur-fast) var(--ease-snap),transform var(--dur-fast) var(--ease-snap)}
.cursor.hover{width:36px;height:36px;color:var(--accent-deep)}
.cursor.hover .cur-default{opacity:0;transform:scale(1.5)}
.cursor.hover .cur-hover{opacity:1;transform:scale(1)}
.cursor-read{
  position:fixed;top:0;left:0;pointer-events:none;z-index:1000;transform:translate(16px,16px);
  font:400 10px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;will-change:transform;background:rgb(242 240 234/.85);padding:1px 4px;
}
@media (hover:none), (pointer:coarse){ .cursor,.cursor-read{display:none} }

/* ============================================================
   PAGE INTRO
   ============================================================ */
.masthead-enter{opacity:0;transform:translateY(14px);animation:enter 560ms var(--ease-snap) forwards}
@keyframes enter{to{opacity:1;transform:translateY(0)}}

/* ============================================================
   CODE ENTRY DEMO (Tagga)
   ============================================================ */
.code-entry{display:grid;gap:6px}
.code-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;
  background:var(--ground-bone);border:1px solid rgb(17 17 17/.3);transition:all var(--dur-med) linear}
.code-row .digits{font:600 20px/1 var(--font-display);letter-spacing:.2em}
.code-row.empty .digits{color:#999}
.code-row.valid{background:var(--ink);color:var(--ground-bone);border-color:var(--ink)}
.code-row.invalid{border-color:var(--signal-fail)}
.code-row.invalid .digits{color:var(--signal-fail)}

/* ============================================================
   MARKER STATES DEMO
   ============================================================ */
.marker-demo{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.marker-demo .cell{text-align:center}
.marker-demo .swatch{height:56px;display:grid;place-items:center;background:#E9E5DA}
.marker-demo .tri{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-bottom:24px solid #1E3A8A}

/* ============================================================
   TERMINAL WRITE-IN
   Display type reveals character by character; it never shows a
   character that isn't the real one. Mono metadata gets the cipher
   (see main.js). Body copy is deliberately excluded — you cannot
   read a paragraph that is still resolving.
   ============================================================ */
.js .tw > .ch{opacity:0}
.js .tw.in > .ch{animation:tw-in 200ms linear forwards}
@keyframes tw-in{to{opacity:1}}

/* The write-head only goes on mono, where .45em is a few pixels.
   On 208px display type an em-sized block is a giant rectangle. */
.mono-s.typing::after,.mono-m.typing::after,.mono-xs.typing::after{
  content:"";display:inline-block;width:.5em;height:.9em;
  background:currentColor;margin-left:.12em;vertical-align:-.1em;
  animation:cursor-blink 620ms steps(1) infinite;
}
@keyframes cursor-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .js .tw > .ch{opacity:1;animation:none}
  .typing::after{display:none}
}

/* ============================================================
   TODO / STRUCTURAL PLACEHOLDER
   ============================================================ */
.todo{color:var(--accent-text);font-style:italic}
.todo-block{border:1px dashed rgb(225 107 44/.40);background:rgb(225 107 44/.06);padding:18px 20px}
.todo-block .tag{display:block;color:var(--accent-text);margin-bottom:8px}
.todo-block p{font-style:italic;color:var(--ink-muted)}

/* ============================================================
   UTILITIES
   ============================================================ */
.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}.mt-8{margin-top:var(--sp-8)}
.ta-r{text-align:right}
.ta-c{text-align:center}
.record-row{display:grid;grid-template-columns:140px 1fr 1fr 160px;gap:24px}
@media (max-width:760px){
  .record-row{grid-template-columns:1fr;gap:4px}
  .record-row .ta-r{text-align:left}
}
.mb-2{margin-bottom:var(--sp-2)}
.max-w-prose{max-width:64ch}
.hide-mobile{display:initial}
@media (max-width:760px){ .hide-mobile{display:none} }