/* ===================================================================
   AnekoLabs — "the operating document" v6
   Strict bone/ink alternation · one display grammar per section ·
   drawn glyphs · process timeline · numeral strip · accordion
   Brand: ../aneko-os/brand.md — clay on bone, amber on ink, flat.
   =================================================================== */

/* =================== self-hosted fonts (v6.27) ===================
   latin subsets, woff2, from fontsource (OFL). Fallbacks are Arial
   metric-matched (size-adjust from sample-string advance widths vs
   Liberation Sans ≙ Arial metrics; overrides from OS/2 typo metrics)
   so a swap shifts nothing — CLS 0 while fonts load. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("assets/fonts/inter-tight-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("assets/fonts/inter-tight-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("assets/fonts/inter-tight-latin-300-normal.woff2") format("woff2"); } /* hero headline only — ADR-011 */
@font-face { font-family: "Hanken Grotesk Fallback"; src: local("Arial");
  size-adjust: 100.41%; ascent-override: 99.59%; descent-override: 30.18%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial");
  size-adjust: 105.05%; ascent-override: 92.21%; descent-override: 22.96%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; font-weight: 300; src: local("Arial");
  size-adjust: 98.33%; ascent-override: 98.52%; descent-override: 24.53%; line-gap-override: 0%; }

:root {
  --ink:       #16130f;
  --bone:      #f4f1ec;
  --amber:     #e08a3c;
  --clay:      #b8552b;
  --warm-gray: #8a8178;
  --border-dk: #2a251f;
  --border-lt: #e2dcd3;

  --ink-2:    #4f4940;   /* secondary on bone */
  --bone-2:   #b5ada2;   /* secondary on ink */
  --mute:     #6b6359;   /* small text on bone — AA */

  --font: "Hanken Grotesk", "Hanken Grotesk Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-d: "Inter Tight", "Inter Tight Fallback", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; /* display — brand §3 pair */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1840px; /* own the screen — no invisible guard rails on big monitors */
  --gut: clamp(22px, 5vw, 110px);
  --nav-h: 78px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--clay); color: var(--bone); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.on-ink :focus-visible, .foot :focus-visible { outline-color: var(--amber); }

.skip {
  position: fixed; top: -48px; left: 16px; z-index: 200;
  background: var(--ink); color: var(--bone);
  border: 1px solid var(--bone); /* keeps it visible when the nav bar is ink */
  font-size: 13.5px; font-weight: 600; padding: 10px 16px;
  transition: top 0.2s var(--ease);
}
.skip:focus-visible { top: 12px; }

section[id] { scroll-margin-top: var(--nav-h); }
h1, h2, h3 { font-family: var(--font-d); font-weight: 600; letter-spacing: -0.024em; line-height: 0.98; }
.num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

/* =================== scroll progress =================== */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: var(--clay);
  transform-origin: left; transform: scaleX(0);
}
body.scrolled .progress { background: var(--amber); }

/* =================== nav — transparent at the top, ink once you scroll ===================
   At rest the bar merges with the bone hero (transparent, clay accents).
   body.scrolled (script.js, scrollY > 24) turns it ink with amber accents
   per brand §2. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: transparent; color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; font-family: var(--font-d); font-weight: 600; font-size: clamp(26px, 2vw, 38px); letter-spacing: -0.022em; justify-self: start; line-height: 1; }
.brand .labs { color: var(--clay); transition: color 0.4s var(--ease); }
.brand .mark { width: 26px; height: 26px; flex: 0 0 auto; } /* footer only */
.brand .mark rect { fill: var(--ink); }
.brand .mark path { stroke: var(--amber); stroke-width: 2.4; fill: none; stroke-linecap: square; }
.nav-links { display: flex; align-items: center; gap: clamp(24px, 3vw, 46px); justify-self: center; }
.nav-links a.link { font-size: 15px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; padding: 12px 2px; transition: color 0.3s, border-color 0.3s; }
.nav-links a.link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav-links a.link.is-current { color: var(--ink); border-bottom-color: var(--clay); } /* clay text @15px = 4.26:1, fails AA — ink text + clay underline */
.nav-cta { grid-column: 3; justify-self: end; font-size: 14px; font-weight: 600; background: var(--ink); color: var(--bone); padding: 13px 24px; transition: background 0.25s, color 0.25s; } /* explicit column — when .nav-links is display:none it would auto-place into col 2; ≥44px tap target */
.nav-cta:hover { background: var(--border-dk); }
.nav :focus-visible { outline-color: var(--clay); }

/* dark-top pages (index, ADR-011): the nav RESTS in its ink skin —
   transparent over the ink hero, amber accents; scrolling just adds the
   solid bg + border via body.scrolled below. Legal pages stay light-top. */
body.dark-top .nav { color: var(--bone); }
body.dark-top .brand .labs { color: var(--amber); }
body.dark-top .nav-links a.link { color: var(--bone-2); }
body.dark-top .nav-links a.link:hover { color: var(--bone); border-bottom-color: var(--bone); }
body.dark-top .nav-links a.link.is-current { color: var(--amber); border-bottom-color: var(--amber); }
body.dark-top .nav-cta { background: var(--amber); color: var(--ink); }
body.dark-top .nav-cta:hover { background: var(--bone); }
body.dark-top .nav :focus-visible { outline-color: var(--amber); }
body.dark-top .progress { background: var(--amber); }

body.scrolled .nav { background: var(--ink); color: var(--bone); border-bottom-color: var(--border-dk); }
body.scrolled .brand .labs { color: var(--amber); }
body.scrolled .nav-links a.link { color: var(--bone-2); }
body.scrolled .nav-links a.link:hover { color: var(--bone); border-bottom-color: var(--bone); }
body.scrolled .nav-links a.link.is-current { color: var(--amber); border-bottom-color: var(--amber); } /* amber @13.5px = 6.94:1 ✓ */
body.scrolled .nav-cta { background: var(--amber); color: var(--ink); }
body.scrolled .nav-cta:hover { background: var(--bone); }
body.scrolled .nav :focus-visible { outline-color: var(--amber); }

/* =================== buttons =================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; padding: 15px 26px;
  border: 1px solid var(--ink); cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { border-color: var(--clay); }
.on-ink .btn-ink { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.on-ink .btn-ink:hover { background: var(--bone); border-color: var(--bone); }
.btn-ghost { background: var(--bone); color: var(--ink); border-color: var(--ink); } /* solid — keeps the bg model from showing through */
.btn-ghost:hover { border-color: var(--clay); }
.on-ink .btn-ghost { background: transparent; color: var(--bone); border-color: var(--bone-2); }
.on-ink .btn-ghost:hover { border-color: var(--bone); }

/* =================== panel scaffolding =================== */
.panel { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.panel > .wrap { position: relative; display: flex; flex-direction: column; flex: 1; }

.on-ink { background: var(--ink); color: var(--bone); }

/* section backgrounds intentionally bare (v6.22 clean slate) — surfaces are
   rebuilt one at a time, Noah approving each (NOTES queue). */

.sec-head { display: flex; align-items: center; gap: 16px; padding-top: calc(var(--nav-h) + 22px); }
.sec-head .ix { font-size: 13px; font-weight: 600; color: var(--mute); }
.sec-head .lab { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.sec-head .rule { flex: 1; height: 1px; background: var(--border-lt); transform-origin: left; }
.js .sec-head.reveal .rule { transform: scaleX(0); transition: transform 1.2s var(--ease) 0.2s; }
.sec-head.reveal.is-visible .rule { transform: scaleX(1); }
.on-ink .sec-head .ix, .on-ink .sec-head .lab { color: var(--bone-2); }
.on-ink .sec-head .rule { background: var(--border-dk); }

.sec-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 4vh, 64px) 0 clamp(44px, 6vh, 88px); }

h2.title { font-size: clamp(34px, 4.8vw, 74px); max-width: 26ch; text-wrap: balance; } /* Noah: panel headlines never over 3 lines, 2 preferred — wide measure keeps them 1–2 on desktop */
.cta h2 { text-wrap: balance; }
.lead, .tcol p, .station p, .qa-a p, .cell p { text-wrap: pretty; }
.lead { color: var(--ink-2); font-size: clamp(16px, 1.35vw, 19px); max-width: 54ch; margin-top: 18px; }
.on-ink .lead { color: var(--bone-2); }
.accent { color: var(--clay); }
.on-ink .accent { color: var(--amber); }

/* =================== hero (INK — adoption-bars replica, ADR-011) ===================
   hero-e v2, Noah's pick 2026-06-12: ink full-bleed + faint 84px grid
   (SVG-tile background image — flat hairlines, sweep-safe), light
   IT-300 two-line headline with one amber-underlined phrase, full-width
   exponential bar floor (stubs under the wording left, ~90% tall right),
   amber "we are here." bar with an HTML annotation layer. */
.hero { position: relative; background-color: var(--ink); color: var(--bone);
  border-bottom: 1px solid var(--border-dk);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cpath d='M0 .5 H84 M.5 0 V84' stroke='%23f4f1ec' stroke-opacity='0.05'/%3E%3C/svg%3E");
}
.hero > .wrap { position: relative; padding-top: var(--nav-h); }

.hero-main { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* the replica headline: both lines one register, light, bone; the amber
   underline carries the accent. nowrap + max-content keep two lines ever. */
.hero-h { display: flex; flex-direction: column; gap: 0.1em; }
.hero-h span { display: block; white-space: nowrap; width: max-content; }
.hero-h .h-quiet, .hero-h .h-loud {
  font-family: var(--font-d); font-weight: 300;
  font-size: clamp(24px, 4.3vw, 86px);
  letter-spacing: -0.015em; line-height: 1.08; color: var(--bone);
}
.hero-h .h-loud em { font-style: normal; color: var(--bone);
  text-decoration: underline; text-decoration-color: var(--amber);
  text-decoration-thickness: 0.07em; text-underline-offset: 0.12em; }
.hero .lead { margin-top: 40px; max-width: 44ch; font-size: clamp(17px, 1.5vw, 22px); }
.hero-cta { display: flex; align-items: center; gap: 26px; margin-top: 48px; flex-wrap: wrap; }
.cta-assure { margin-top: 18px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--bone-2); }

.js .drawable { stroke-dasharray: 1; stroke-dashoffset: 1; }
.drawable.drawn { transition: stroke-dashoffset 1.8s var(--ease) 0.25s; stroke-dashoffset: 0; }

/* the bars: full-width ground floor. Bars-only SVG stretches with the box
   (preserveAspectRatio=none — rects distort safely); the annotation is an
   HTML layer so its text never distorts. Left-zone bars cap at 6% height,
   so the text block is unreachable at any viewport (v6.29.1). */
.adopt { position: absolute; left: 0; right: 0; bottom: 56px;
  top: calc(var(--nav-h) + 20px); pointer-events: none; }
.adopt svg { display: block; width: 100%; height: 100%; }
.adopt .bar { fill: var(--bone); opacity: 0.92; }
.adopt .bar-here { fill: var(--amber); opacity: 1; }
.adopt .base { stroke: var(--bone-2); stroke-width: 1; stroke-dasharray: 2 7; opacity: 0.6; }
.wah { position: absolute; left: 71.5%; bottom: 37%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  color: var(--bone); font-size: 21px; pointer-events: none; }
.wah svg { width: 46px; height: 42px; margin-left: 64px; }
.wah .arr { stroke: var(--bone); stroke-width: 1.4; fill: none; }
.wah .arrhead { fill: var(--bone); }

/* caption row (replaces the scroll cue — the reference's bottom strip) */
.caprow { display: flex; justify-content: space-between; gap: 24px;
  padding-bottom: 20px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-2); }

/* ticker (ink) */
.ticker { position: relative; background: var(--ink); border-top: 1px solid var(--border-dk); overflow: hidden; }
.ticker-track { display: flex; white-space: nowrap; width: max-content; animation: tick 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { display: inline-flex; align-items: center; gap: 28px; padding: 12px 14px 12px 28px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-2); }
.ticker span::after { content: ""; width: 5px; height: 5px; background: var(--amber); }
@keyframes tick { to { transform: translateX(-50%); } }

/* =================== 01 principles (glyph triptych) — paired surface rules
   (bone default + .on-ink override; section flipped to BONE in ADR-011) === */
.tript { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(32px, 5vh, 64px); border-left: 1px solid var(--border-lt); }
.on-ink .tript { border-left-color: var(--border-dk); }
.tcol { padding: clamp(24px, 3vw, 44px); border-right: 1px solid var(--border-lt); display: flex; flex-direction: column; gap: 18px; }
.on-ink .tcol { border-right-color: var(--border-dk); }
.tcol .gly { height: 84px; }
.tcol .gly svg { height: 100%; width: auto; max-width: 100%; }
.tcol h3 { font-size: clamp(22px, 2.4vw, 32px); }
.tcol p { color: var(--ink-2); font-size: 15px; max-width: 36ch; }
.on-ink .tcol p { color: var(--bone-2); }
/* clay @12px = 4.26:1 on bone, fails AA — ink text + clay tick (nav pattern) */
.tcol .tn { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink); }
.tcol .tn::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--clay); margin-right: 10px; }
.on-ink .tcol .tn { color: var(--amber); }
.on-ink .tcol .tn::before { background: var(--amber); }

.gly .g { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gly .ga { stroke: var(--clay); }
.gly .gm { stroke: var(--mute); opacity: 0.7; }
.gly .gf { fill: var(--clay); stroke: none; }
.gly text { font-family: var(--font); font-weight: 600; font-size: 9px; letter-spacing: 0.14em; fill: var(--mute); }
.on-ink .gly .g { stroke: var(--bone); }
.on-ink .gly .ga { stroke: var(--amber); }
.on-ink .gly .gm { stroke: var(--bone-2); }
.on-ink .gly .gf { fill: var(--amber); }
.on-ink .gly text { fill: var(--bone-2); }

/* =================== 02 engagement (BONE · process timeline) =================== */
.stepper { position: relative; margin-top: clamp(44px, 7vh, 80px); }
.stepper .track { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--border-lt); }
.on-ink .stepper .track { background: var(--border-dk); }
.stepper .track-fill { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--clay); transform-origin: left; }
.on-ink .stepper .track-fill { background: var(--amber); }
.js .stepper .track-fill { transform: scaleX(0); }
.stepper.is-visible .track-fill { transition: transform 1.2s var(--ease) 0.25s; transform: scaleX(1); }
.stations { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); position: relative; }
.station { padding-right: 8px; }
.js .station { opacity: 0; transform: translateY(14px); }
.stepper.is-visible .station { animation: lrise 0.7s var(--ease) forwards; }
.stepper.is-visible .station:nth-child(1) { animation-delay: 0.30s; }
.stepper.is-visible .station:nth-child(2) { animation-delay: 0.55s; }
.stepper.is-visible .station:nth-child(3) { animation-delay: 0.80s; }
.stepper.is-visible .station:nth-child(4) { animation-delay: 1.05s; }
.station .dot {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--bone); border: 1px solid var(--ink); border-radius: 50%;
  font-size: 14px; font-weight: 600; position: relative; z-index: 1;
}
.on-ink .station .dot { background: var(--ink); border-color: var(--bone); }
.station.featured .dot { background: var(--ink); color: var(--bone); }
.on-ink .station.featured .dot { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.station h3 { font-size: clamp(19px, 1.9vw, 24px); margin: 18px 0 8px; }
.station p { color: var(--ink-2); font-size: 14.5px; max-width: 30ch; }
.on-ink .station p { color: var(--bone-2); }
.station .tag { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--border-lt); padding: 4px 9px; }
.on-ink .station .tag { color: var(--bone-2); border-color: var(--border-dk); }
.station.featured .tag { border-color: var(--clay); color: var(--ink); }
.on-ink .station.featured .tag { border-color: var(--amber); color: var(--bone); }
.efoot { margin-top: clamp(32px, 5vh, 56px); font-size: 13px; color: var(--mute); }

/* =================== 03 work (INK · interactive tabs) =================== */
.work-grid { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 4vw, 64px); margin-top: clamp(30px, 4vh, 56px); }
.vtabs { display: flex; flex-direction: column; align-self: start; border-left: 1px solid var(--border-lt); }
.on-ink .vtabs { border-left-color: var(--border-dk); }
.vtab {
  appearance: none; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font); font-weight: 600; font-size: 15px; color: var(--ink-2);
  padding: 12px 0 12px 20px; margin-left: -1px; border-left: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.on-ink .vtab { color: var(--bone-2); }
.vtab:hover { color: var(--ink); }
.on-ink .vtab:hover { color: var(--bone); }
.vtab.is-active { color: var(--ink); border-left-color: var(--clay); } /* clay text @15px fails AA on bone — ink text + clay rule (nav pattern) */
.on-ink .vtab.is-active { color: var(--amber); border-left-color: var(--amber); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeup 0.5s var(--ease); }
@keyframes fadeup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hitlist { list-style: none; border-top: 1px solid var(--border-lt); }
.on-ink .hitlist { border-top-color: var(--border-dk); }
.hitlist li { display: grid; grid-template-columns: 30px 220px 1fr; gap: 14px; padding: clamp(16px, 2.4vh, 24px) 0; border-bottom: 1px solid var(--border-lt); align-items: baseline; }
.on-ink .hitlist li { border-bottom-color: var(--border-dk); }
.hitlist li::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--clay); align-self: center; }
.on-ink .hitlist li::before { border-color: var(--amber); }
.hitlist b { color: var(--ink); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; }
.on-ink .hitlist b { color: var(--bone); }
.hitlist span.d { color: var(--ink-2); font-size: 14.5px; max-width: 62ch; }
.on-ink .hitlist span.d { color: var(--bone-2); }

.pipeline { margin-top: clamp(28px, 4vh, 52px); }
.pipeline svg { width: 100%; height: auto; display: block; }
/* pipe idiom — bone-surface defaults; .on-ink flips (also covers .cta-art) */
.pipe-ln { stroke: var(--warm-gray); stroke-width: 1.2; fill: none; }
.pipe-live { stroke: var(--clay); stroke-width: 1.4; stroke-dasharray: 3 9; animation: current 3s linear infinite; }
.on-ink .pipe-live { stroke: var(--amber); }
.pipe-node { fill: var(--bone); stroke: var(--mute); stroke-width: 1.2; }
.on-ink .pipe-node { fill: var(--ink); stroke: var(--bone-2); }
.pipe-node.hot { fill: var(--clay); stroke: var(--clay); }
.on-ink .pipe-node.hot { fill: var(--amber); stroke: var(--amber); }
.pipeline text, .cta-art text { font-family: var(--font); font-weight: 600; font-size: 9px; letter-spacing: 0.16em; fill: var(--mute); }
.on-ink .pipeline text, .on-ink .cta-art text { fill: var(--bone-2); }
.pipeline .at, .cta-art .at { fill: var(--clay); }
.on-ink .pipeline .at, .on-ink .cta-art .at { fill: var(--amber); }
@keyframes current { to { stroke-dashoffset: -24; } }

/* =================== 04 case (BONE · numeral strip) =================== */
.case-intro { max-width: none; } /* the title carries its own 26ch cap — a 56ch body-size cap forced it to 3 lines */
.case-intro .lead { max-width: 54ch; }
.case-note { margin-top: 24px; font-size: 13.5px; color: var(--mute); max-width: 52ch; } /* matches .cell p — one body register in 04 (≤3-size audit) */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 6vh, 72px); border-left: 1px solid var(--border-lt); }
.on-ink .strip { border-left-color: var(--border-dk); }
.cell { padding: clamp(20px, 2.6vw, 40px); border-right: 1px solid var(--border-lt); }
.on-ink .cell { border-right-color: var(--border-dk); }
.cell .n { font-family: var(--font-d); font-size: clamp(64px, 7.5vw, 120px); font-weight: 800; letter-spacing: -0.035em; color: var(--clay); line-height: 0.9; }
.on-ink .cell .n { color: var(--amber); }
.cell .n .unit { font-size: 0.26em; font-weight: 600; color: var(--mute); letter-spacing: 0; margin-left: 8px; }
.on-ink .cell .n .unit { color: var(--bone-2); }
.cell .k { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-top: 14px; }
.on-ink .cell .k { color: var(--bone); }
.cell p { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; max-width: 30ch; }
.on-ink .cell p { color: var(--bone-2); }
.on-ink .case-note { color: var(--bone-2); }

/* =================== 05 faq (INK · Q&A card grid) =================== */
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(30px, 4vh, 56px); }
.qa {
  border: 1px solid var(--border-lt);
  padding: clamp(20px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.js .qa { opacity: 0; transform: translateY(14px); }
.qa-grid.is-visible .qa { animation: lrise 0.7s var(--ease) forwards; }
.qa-grid.is-visible .qa:nth-child(1) { animation-delay: 0.06s; }
.qa-grid.is-visible .qa:nth-child(2) { animation-delay: 0.14s; }
.qa-grid.is-visible .qa:nth-child(3) { animation-delay: 0.22s; }
.qa-grid.is-visible .qa:nth-child(4) { animation-delay: 0.30s; }
.qa-grid.is-visible .qa:nth-child(5) { animation-delay: 0.38s; }
.qa-grid.is-visible .qa:nth-child(6) { animation-delay: 0.46s; }
.on-ink .qa { border-color: var(--border-dk); }
.qa:hover { border-color: var(--warm-gray); }
.qa-q { display: flex; align-items: baseline; gap: 14px; }
.qa-q h3 { font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.018em; }
.qm { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink); flex: 0 0 22px; } /* clay @12px fails AA on bone */
.on-ink .qm { color: var(--amber); }
.qa-a { display: flex; align-items: baseline; gap: 14px; border-top: 1px solid var(--border-lt); padding-top: 16px; margin-top: auto; }
.on-ink .qa-a { border-top-color: var(--border-dk); }
.qa-a .qm.am { color: var(--mute); }
.on-ink .qa-a .qm.am { color: var(--bone-2); }
.qa-a p { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.on-ink .qa-a p { color: var(--bone-2); }

/* =================== cta (BONE) =================== */
.cta { position: relative; overflow: hidden; border-top: 1px solid var(--border-lt); }
.cta.on-ink { border-top-color: var(--border-dk); }
.cta-art { position: absolute; inset: auto 0 0 0; height: 36%; pointer-events: none; }
.cta-art svg { width: 100%; height: 100%; }
/* cta-art colors ride the generic .pipe-* / .on-ink pairs above */
.cta-inner { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + 20px); padding-bottom: 140px; } /* longhand — shorthand would zero .wrap's gutters */
.cta h2 { font-size: clamp(40px, 5.6vw, 84px); max-width: 22ch; }
.cta .lead { margin: 22px 0 38px; }
.cta-meta { margin-top: 44px; display: flex; gap: 36px; font-size: 12.5px; color: var(--mute); flex-wrap: wrap; letter-spacing: 0.04em; }
.on-ink .cta-meta { color: var(--bone-2); }
.cta-meta b { color: var(--ink); font-weight: 600; }
.on-ink .cta-meta b { color: var(--bone); }

/* =================== legal pages (privacy/terms) =================== */
.legal { padding-top: calc(var(--nav-h) + clamp(44px, 8vh, 96px)); padding-bottom: clamp(64px, 10vh, 120px); }
.legal h1 { font-size: clamp(36px, 4.2vw, 60px); }
.legal .updated { margin-top: 16px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--mute); }
.legal h2 { font-size: clamp(20px, 2vw, 26px); margin-top: clamp(36px, 5vh, 52px); }
.legal p, .legal li { color: var(--ink-2); font-size: 15.5px; line-height: 1.65; max-width: 68ch; text-wrap: pretty; }
.legal h2 + p, .legal h2 + ul { margin-top: 10px; }
.legal ul { margin: 10px 0 0 20px; }
.legal li { margin-top: 8px; }
.legal li b { color: var(--ink); font-weight: 600; }
.legal a { text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 3px; }
.legal a:hover { color: var(--clay); }

/* =================== footer (INK) — id · sections · NAP/contact =================== */
.foot { background: var(--ink); color: var(--bone-2); }
.foot-inner { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: clamp(36px, 5vh, 56px); padding-bottom: 40px; }
.foot .brand { color: var(--bone); font-size: 16px; }
.foot .brand .labs { color: var(--amber); }
.foot .brand .mark { width: 26px; height: 26px; }
.foot .brand .mark rect { fill: transparent; }
.foot .note { font-size: 12.5px; line-height: 1.6; margin-top: 10px; max-width: 44ch; }
.foot .legal-links a { border-bottom: 1px solid transparent; padding: 8px 0 1px; transition: color 0.25s, border-color 0.25s; }
.foot .legal-links a:hover { color: var(--bone); border-bottom-color: var(--bone); }
.foot-lab { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-2); opacity: 0.75; margin-bottom: 4px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font-size: 13.5px; }
.foot-col a { border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color 0.25s, border-color 0.25s; }
.foot-col a:hover { color: var(--bone); border-bottom-color: var(--bone); }
.foot-strong { color: var(--bone); font-weight: 600; }
.foot-col a.foot-cta { color: var(--amber); font-weight: 600; margin-top: 4px; }
.foot-col a.foot-cta:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* =================== reveal — animation-hiding only when JS is present =================== */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.07s; }
.reveal[data-delay="2"] { transition-delay: 0.14s; }
.reveal[data-delay="3"] { transition-delay: 0.21s; }

.load > * { opacity: 0; transform: translateY(14px); animation: lrise 0.9s var(--ease) forwards; }
.load > *:nth-child(1) { animation-delay: 0.08s; }
.load > *:nth-child(2) { animation-delay: 0.18s; }
.load > *:nth-child(3) { animation-delay: 0.28s; }
.load > *:nth-child(4) { animation-delay: 0.38s; }
.load > *:nth-child(5) { animation-delay: 0.46s; }
@keyframes lrise { to { opacity: 1; transform: none; } }

/* =================== responsive =================== */
@media (max-width: 1020px) {
  .hero-h span { white-space: normal; width: auto; } /* light register wraps gracefully on phones */
  .adopt, .wah { display: none; } /* the bar floor needs width to read */
  .caprow span:first-child { display: none; } /* its caption goes with it */
  .caprow { justify-content: flex-end; }
  .tript { grid-template-columns: 1fr; border-left: none; border-top: 1px solid var(--border-lt); }
  .on-ink .tript { border-top-color: var(--border-dk); }
  .tcol { border-right: none; border-bottom: 1px solid var(--border-lt); padding-left: 0; }
  .on-ink .tcol { border-bottom-color: var(--border-dk); }
  .stations { grid-template-columns: 1fr; gap: 0; }
  .stepper .track, .stepper .track-fill { left: 22px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .stepper .track-fill { transform-origin: top; }
  .js .stepper .track-fill { transform: scaleY(0); }
  .stepper.is-visible .track-fill { transform: scaleY(1); }
  .station { display: grid; grid-template-columns: 44px 1fr; gap: 0 18px; padding: 18px 0; }
  .station h3 { grid-column: 2; margin: 0 0 6px; }
  .station p, .station .tag-row { grid-column: 2; }
  .station .dot { grid-row: 1 / span 3; }
  .work-grid { grid-template-columns: 1fr; }
  .vtabs { flex-direction: row; flex-wrap: wrap; border-left: none; border-bottom: 1px solid var(--border-lt); }
  .on-ink .vtabs { border-bottom-color: var(--border-dk); }
  .vtab { border-left: none; border-bottom: 2px solid transparent; padding: 12px 16px; margin: 0 0 -1px; }
  .vtab.is-active { border-bottom-color: var(--clay); }
  .on-ink .vtab.is-active { border-bottom-color: var(--amber); }
  .hitlist li { grid-template-columns: 24px 1fr; }
  .hitlist span.d { grid-column: 2; }
  .strip { grid-template-columns: 1fr; border-left: none; border-top: 1px solid var(--border-lt); }
  .on-ink .strip { border-top-color: var(--border-dk); }
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
  .cell { border-right: none; border-bottom: 1px solid var(--border-lt); padding-left: 0; }
  .on-ink .cell { border-bottom-color: var(--border-dk); }
  .pipeline text, .cta-art text { font-size: 12px; } /* viewBox-scaled type stays legible on tablet */
}
@media (max-width: 640px) {
  body { font-size: 16px; } /* never under 16px body on mobile */
  .station p, .hitlist span.d, .qa-a p { font-size: 15px; }
  .foot-col a { padding: 8px 0; }
  .nav-links { display: none; }
  /* svg type scales with the viewBox — keep it legible or cut it */
  .pipeline { display: none; }          /* 9px in a 1200 viewBox ≈ 2.7px — illegible decor */
  .cta-art text { display: none; }      /* keep the trace lines, drop unreadable labels */
  .panel { min-height: auto; }
  .hero.panel { min-height: 88svh; } /* next section peeks = scroll cue */
  .caprow { font-size: 10px; letter-spacing: 0.16em; }
  .sec-body { padding: 36px 0 56px; }
  .qa-grid { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .load > *, .stepper .station, .qa { opacity: 1 !important; transform: none !important; }
  .ticker-track { animation: none; }
  .drawable { stroke-dashoffset: 0; }
  .stepper .track-fill { transform: none !important; }
  .progress { display: none; }
}

/* =================== print =================== */
@media print {
  .nav, .skip, .ticker, .cta-art, .hero-cta, .nav-cta, .progress, .adopt, .wah, .caprow { display: none !important; }
  .hero { background: #fff !important; color: #000 !important; }
  .panel { min-height: auto; }
  body, .on-ink, .foot { background: #fff !important; color: #000 !important; }
  .on-ink .lead, .lead, .tcol p, .station p { color: #222 !important; }
  .sec-head .rule { transform: none !important; }
  .reveal, .station { opacity: 1 !important; transform: none !important; }
}