/* ============================================================
   Sayena Majlesein — editorial system

   Direction: type-led editorial (serif display + mono metadata),
   no cards / shadows / rounded corners, hairline rules, warm paper.
   AI surfaces are treated as apparatus — distinct raised panels with
   mono type — so they never read as body content.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500&display=swap");

:root {
  --paper: #f6f5f1;
  --raised: #efeee9;
  --ink: #14140f;
  --dim: #5f5f57;
  --faint: #a3a29a;
  --rule: #dedcd4;
  --acc: #b4472b;
  --acc-soft: rgba(180, 71, 43, 0.07);

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --max: 1060px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- dark theme ----------
   Applied when the visitor picks it, or by system preference when
   they haven't expressed one. Same type, same rules, inverted paper. */
:root[data-theme="dark"] {
  --paper: #121210; --raised: #1a1a17; --ink: #f0eee7; --dim: #a6a49b;
  --faint: #6e6c64; --rule: #2e2e27; --acc: #d4714f; --acc-soft: rgba(212,113,79,.12);
  --wire: #4a4941; --wire-fill: #23231d; --wire-ink: #9a9890;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121210; --raised: #1a1a17; --ink: #f0eee7; --dim: #a6a49b;
    --faint: #6e6c64; --rule: #2e2e27; --acc: #d4714f; --acc-soft: rgba(212,113,79,.12);
    --wire: #4a4941; --wire-fill: #23231d; --wire-ink: #9a9890;
  }
}
:root[data-theme="dark"] figure.fig img,
:root:not([data-theme="light"]) figure.fig img { }

/* ---------- classic vs agentic mode ----------
   Classic strips every agentic affordance back to a conventional
   portfolio. Agentic turns them on. Both are first-class. */
:root[data-mode="classic"] .agentic-only { display: none !important; }
:root[data-mode="classic"] .classic-only { display: block; }
.classic-only { display: none; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* No orphan/widow words. `pretty` tidies the last lines of running copy so a
   lone word never sits on its own line; `balance` evens out the short,
   heading-like blocks (titles, subtitles, pull quotes) across their few lines.
   Both degrade gracefully to normal wrapping where unsupported. */
p, li, figcaption, .desc, .job, blockquote, .schema-cap { text-wrap: pretty; }
h1, h2, h3, h4, h5, .subtitle, .lede, .pull, .quote-block, .cs-cap { text-wrap: balance; }

/* ---------- agent-led walkthrough CTA ----------
   Offered before the reader commits to scrolling a long case study: the
   short version first, the full text if they want it. Carries the same
   gradient signal as the mode toggle so the two read as one system. */
.walk-cta {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 22px; align-items: center; margin: 30px 0 0; padding: 18px 22px;
  border: 1px solid var(--rule); background: var(--raised);
  position: relative; overflow: hidden; transition: border-color .2s, background .2s;
}
.walk-cta::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--acc), #3f6d8c, #4a7c59);
}
.walk-cta:hover { border-color: color-mix(in srgb, var(--acc) 50%, var(--rule)); background: var(--acc-soft); }
.walk-k {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc);
}
.walk-k i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--acc);
  animation: pulse 2.2s infinite;
}
.walk-t { font-size: 14px; line-height: 1.55; color: var(--dim); }
.walk-go {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.walk-cta:hover .walk-go { color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .walk-k i { animation: none; } }
/* Stack before the squeeze, not after it. While the hero is still two
   columns the CTA only gets what the facts column leaves, and its middle
   cell was collapsing to ~170px — four lines of two words. */
@media (max-width: 980px) {
  .walk-cta { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- links in running content ----------
   One treatment everywhere: accent colour plus a hairline underline that
   solidifies on hover. Structural links (nav, cards, buttons, the canvas)
   opt out below — they already read as controls. Without this, links inside
   figcaptions and body copy inherited the surrounding colour and were
   indistinguishable from plain text. */
.cs-section p a, .cs-section li a, .cs-section figcaption a,
.cs-section .quote-block a, .cs-section td a,
.section p a, .lede a, .earlier-note a, .related a,
figure.fig figcaption a, .embed-cap a, .clip-notes a, .rs-v a {
  color: var(--acc);
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 42%, transparent);
  transition: border-color .18s, color .18s;
}
.cs-section p a:hover, .cs-section li a:hover, .cs-section figcaption a:hover,
.cs-section .quote-block a:hover, .section p a:hover, .lede a:hover,
.earlier-note a:hover, .related a:hover, figure.fig figcaption a:hover,
.embed-cap a:hover, .clip-notes a:hover, .rs-v a:hover {
  border-bottom-color: var(--acc);
}
/* These are controls, not prose links — keep their own styling. */
.nav a, .project-card a, .node a, .agent-chips a, .cs-nav-footer a,
.footer a, .back, .nav-cta, .chip-link { border-bottom: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- shared atoms ---------- */
.eyebrow, .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--faint);
}
.accent { color: var(--acc); font-style: italic; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.flash { animation: flash 1.1s var(--ease); }
@keyframes flash { 0% { background: var(--acc-soft); } 100% { background: transparent; } }

/* ---------- nav ---------- */
/* Sticks to the top through the whole page. Translucent so content reads
   as passing underneath rather than jumping behind a solid slab. */
.nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
/* One source of truth for the bar's height: the hero sizes against it and
   anchor targets clear it, so they can't drift apart. */
:root { --nav-h: 64px; }
html { scroll-padding-top: calc(var(--nav-h) + 14px); }
.nav .wrap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-top: 24px; padding-bottom: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.nav-brand { color: var(--ink); font-weight: 500; }
.nav-brand .dot { display: none; }
.nav-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav-links a { color: var(--dim); }
.nav-links a:hover, .nav-cta:hover { color: var(--acc); }
.nav-cta { color: var(--dim); border-bottom: 1px solid var(--rule); }

/* nav switches: theme + mode */
/* ---------- gradient stroke ----------
   A drifting 1px ring drawn as a gradient underlay showing through a
   1px inset. Marks the two controls that change what the site *is* —
   the mode toggle and the agent — so they read as one family and as
   live rather than as more chrome. */
/* The gradient is the element's own background, revealed as a 1px frame by
   the padding, with opaque children covering the middle. A z-index:-1
   pseudo-element can't do this — it lands behind the parent's background. */
.grad-ring {
  padding: 1px; border-color: transparent;
  background: linear-gradient(115deg, var(--acc), #3f6d8c, #4a7c59, var(--acc));
  background-size: 280% 100%;
  animation: ring-drift 9s linear infinite;
}
@keyframes ring-drift { to { background-position: 280% 0; } }
@media (prefers-reduced-motion: reduce) { .grad-ring { animation: none; } }

.switches { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.sw {
  display: inline-flex; border: 1px solid var(--rule); font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
}
/* The ring replaces the border rather than sitting outside it, so the
   control keeps its exact footprint and nothing reflows. */
.sw.grad-ring button { background: var(--paper); }
.sw.grad-ring button + button { border-left: 0; }
.sw.grad-ring button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sw button {
  background: none; border: 0; color: var(--faint); padding: 5px 9px; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; transition: .18s;
}
.sw button + button { border-left: 1px solid var(--rule); }
.sw button:hover { color: var(--acc); }
.sw button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- home masthead ----------
   Two columns: serif headline left, right-aligned mono meta block, then
   the serif standfirst. The hero owns the full viewport so nothing from
   the next section half-peeks into it — a cue at the foot does the job
   of pointing onward instead. ---------- */
.hero { min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; }
/* width:100% is load-bearing. .wrap centres itself with `margin: 0 auto`,
   which works in normal flow but not here: auto cross-axis margins on a
   flex item suppress stretch, so the hero's wrap shrink-wrapped to its
   content at 930px while every section below it sat at the full 1060px.
   The landing was misaligned with itself by 65px on each side. */
.hero .wrap { width: 100%; padding-top: 0; padding-bottom: 0; flex: 1; display: flex; flex-direction: column; }
.mast {
  padding: clamp(48px, 8vh, 96px) 0 clamp(36px, 5vh, 60px);
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: end;
}
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 7vw, 88px); line-height: .95; letter-spacing: -.025em;
  margin: 0; max-width: 13ch;
}
.mast-meta {
  font-family: var(--mono); font-size: 11px; line-height: 2;
  color: var(--dim); text-align: right; white-space: nowrap;
}
.mast-meta b { display: block; color: var(--ink); font-weight: 500; }
/* A short accent rule tied to the standfirst, not a full-width line
   floating between two blocks with no stated relationship. */
.lede {
  font-family: var(--serif); font-size: 23px; line-height: 1.45;
  max-width: 36ch; margin: 0; color: var(--dim); padding-top: 26px;
  border-top: 1px solid var(--acc); box-decoration-break: clone;
  width: fit-content;
}
.lede em { color: var(--ink); font-style: italic; }

/* Foot of the hero: names what's below and scrolls to it, so the landing
   can be whole without hiding the work. */
.hero-cue {
  margin-top: auto; padding: 0 0 34px; display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); text-decoration: none; width: fit-content; transition: color .2s;
}
.hero-cue:hover { color: var(--acc); }
/* Points down, and moves down — the direction is the message. */
.hero-cue i {
  font-style: normal; font-size: 13px;
  animation: cue-fall 2.2s ease-in-out infinite;
}
@keyframes cue-fall { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-cue i { animation: none; opacity: 1; } }

/* ---------- sections ---------- */
.section .wrap { padding-top: 74px; }
.section-head { margin-bottom: 16px; }
.section-head h2 {
  font-family: var(--serif); font-weight: 400; font-size: 34px;
  letter-spacing: -.015em; margin: 0 0 6px;
}
.section-head p { margin: 0; color: var(--dim); font-size: 14.5px; max-width: 58ch; }

/* ---------- AI apparatus (deliberately not page content) ---------- */
.ask {
  margin: 52px 0 0; background: var(--raised); border: 1px solid var(--rule);
  border-left: 2px solid var(--acc); padding: 20px 24px 22px; position: relative;
}
.ask::before {
  content: "AGENT"; position: absolute; top: -7px; left: 20px; background: var(--raised);
  padding: 0 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--acc);
}
.ask-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ask-live { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ask-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.ask-row { display: flex; align-items: center; gap: 11px; background: var(--paper); border: 1px solid var(--rule); padding: 11px 14px; }
.ask-row .car { font-family: var(--mono); font-size: 13px; color: var(--acc); }
.ask-row input { flex: 1; background: none; border: 0; outline: none; color: var(--ink); font-family: var(--mono); font-size: 13.5px; }
.ask-row input::placeholder { color: var(--faint); }
.ask-row button { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; color: var(--dim); cursor: pointer; padding: 4px 2px; }
.ask-row button:hover { color: var(--acc); }
.ask-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.ask-chips button {
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  border: 1px solid var(--rule); background: var(--paper); padding: 5px 10px; cursor: pointer; transition: .2s;
}
.ask-chips button:hover { border-color: var(--acc); color: var(--acc); }
.ask-out {
  margin: 16px 0 0; font-family: var(--mono); font-size: 13px; line-height: 1.72;
  color: var(--dim); max-width: 74ch; min-height: 1.72em; padding-left: 14px; border-left: 1px solid var(--rule);
}
.ask-out .src { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 11px; }
.ask-out a { color: var(--acc); border-bottom: 1px solid var(--rule); }
.caret { display: inline-block; width: 6px; height: 13px; background: var(--acc); vertical-align: -2px; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- agentic practice grid ---------- */
.practice-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 14px;
}
.practice-grid > div { background: var(--paper); padding: 20px 22px; }
.practice-grid h5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin: 0 0 8px; font-weight: 400; }
.practice-grid p { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.55; }

/* ---------- agent-mode entry on the landing ---------- */
.story-entry {
  display: block; margin: 40px 0 0; padding: 22px 26px;
  border: 1px solid var(--ink); background: var(--raised);
  position: relative; overflow: hidden; transition: .25s var(--ease);
}
.story-entry::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, var(--acc-soft) 65%, transparent 85%);
  transform: translateX(-60%); transition: transform .8s var(--ease);
}
.story-entry:hover { border-color: var(--acc); }
.story-entry:hover::after { transform: translateX(60%); }
.se-k {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc);
}
.se-k i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); animation: pulse 2.2s infinite; }
.se-t { display: block; font-family: var(--serif); font-size: 25px; line-height: 1.25; margin: 10px 0 8px; letter-spacing: -.012em; }
.se-m { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .story-entry::after { display: none; } }

/* ---------- transition veil into agent mode ---------- */
.mode-veil {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 60%, #1b1b17 0%, #0e0e0c 60%, #000 100%);
  opacity: 0; transition: opacity .58s cubic-bezier(.4, 0, .2, 1);
  display: flex; align-items: center; justify-content: center;
}
.mode-veil.on { opacity: 1; }
.mode-veil-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: #6e6c64; opacity: 0; transform: translateY(6px);
  transition: opacity .5s .18s ease, transform .5s .18s cubic-bezier(.16,1,.3,1);
}
.mode-veil.on .mode-veil-k { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mode-veil { display: none; } }

/* ---------- work: toggle + index ---------- */
.work-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.work-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.explain {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); background: none; color: var(--dim);
  padding: 8px 14px; cursor: pointer; transition: .18s;
}
.explain i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); animation: pulse 2.2s infinite; }
.explain:hover { border-color: var(--acc); color: var(--acc); }
.explain[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.explain[aria-expanded="true"] i { background: var(--paper); }
#ask[hidden] { display: none; }
#ask { margin: 0 0 22px; }
.toggle { display: inline-flex; border: 1px solid var(--rule); }
.toggle button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 0; color: var(--dim); padding: 8px 15px; cursor: pointer; transition: .2s;
}
.toggle button + button { border-left: 1px solid var(--rule); }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.view { display: none; }
.view.on { display: block; }

.project-grid { display: block; }
/* Fixed track widths, not content-sized `auto` — otherwise each row sizes its
   own grid and the description column lands at a different x on every card. */
.project-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.05fr) minmax(0, 1.35fr) 200px;
  gap: 26px; align-items: start;
  padding: 30px 0; border-bottom: 1px solid var(--rule); transition: .25s var(--ease); position: relative;
}
.project-card:first-of-type { border-top: 1px solid var(--ink); }
/* Hover shifts a background and an inset marker only — never padding or
   type, which reflowed the text and made the row appear to "change". */
.project-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--acc); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.project-card:hover::after { transform: scaleY(1); }
.project-card:hover { background: var(--acc-soft); }
.project-card:hover h3 { color: var(--acc); }
.project-card .card-visual, .project-card .glyph { display: none; }
.project-card::before {
  content: attr(data-no); font-family: var(--mono); font-size: 12px; color: var(--faint);
}
.project-card .row1 { display: block; }
.project-card h3 { font-family: var(--serif); font-weight: 400; font-size: 31px; line-height: 1.05; margin: 0 0 6px; letter-spacing: -.012em; }
.project-card .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.project-card .tag.nda { color: var(--faint); }
/* The pre-release project is listed first, so its status has to be
   unmissable before the click — otherwise the first thing everyone opens
   reads as a letdown. The badge is always visible (touch included); the
   note is always present but subtle, and steps forward on hover. */
.project-card.pre-release .tag.nda {
  color: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent);
  padding: 3px 8px; margin-top: 4px; display: inline-block; white-space: nowrap;
}
.pre-note {
  display: block; margin-top: 9px; padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--acc) 40%, transparent);
  font-size: 12.5px; line-height: 1.55; color: var(--faint);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.pre-note strong { color: var(--acc); font-weight: 500; }
.pre-note em { color: var(--ink); font-style: italic; }
.project-card.pre-release:hover .pre-note { color: var(--dim); border-left-color: var(--acc); }
.project-card p.desc { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.55; }
.project-card .meta-row { font-family: var(--mono); font-size: 12px; color: var(--acc); text-align: right; line-height: 1.9; display: block; }
.project-card .meta-row b { display: none; }
.project-card .meta-row span { display: block; }
.project-card .arrow { display: none; }

.earlier-note { margin: 26px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); }
.earlier-note a { color: var(--dim); border-bottom: 1px solid var(--rule); }
.earlier-note a:hover { color: var(--acc); }

/* ---------- canvas view ---------- */
#canvas {
  position: relative; height: 560px; border: 1px solid var(--rule); overflow: hidden; cursor: grab;
  background-image: radial-gradient(var(--rule) 1px, transparent 1px); background-size: 24px 24px;
}
#canvas.drag { cursor: grabbing; }
#cam { position: absolute; inset: 0; transform-origin: 0 0; }
#wires { position: absolute; overflow: visible; left: 0; top: 0; pointer-events: none; }
#wires path { fill: none; stroke: var(--rule); stroke-width: 1.3; }
#wires path.hot { stroke: var(--acc); stroke-width: 1.7; }
/* Transition only the hover properties — NOT `top`. A blanket `transition`
   animates the layout position too, so the wires (drawn from offsetTop
   immediately after layout) read an in-flight value and end up floating
   away from the boxes they connect. */
.node {
  position: absolute; background: var(--paper); border: 1px solid var(--rule);
  padding: 14px 16px; width: 214px;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.node:hover { border-color: var(--acc); transform: translateY(-2px); }
.node .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.node h3 { font-family: var(--serif); font-weight: 400; margin: 6px 0 4px; font-size: 19px; letter-spacing: -.01em; }
.node p { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.45; }
.node .fig { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--acc); }
.node.lite { width: 172px; background: transparent; border-style: dashed; }
.node.lite h3 { font-size: 15px; }
.canvas-hint { position: absolute; left: 16px; bottom: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); pointer-events: none; }
.canvas-reset {
  position: absolute; right: 14px; bottom: 12px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; background: var(--paper);
  border: 1px solid var(--rule); color: var(--dim); padding: 6px 11px; cursor: pointer;
}
.canvas-reset:hover { border-color: var(--acc); color: var(--acc); }

/* ---------- kinetic moment ---------- */
.moment { margin: 80px 0 0; padding: 62px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); text-align: center; }
.moment .n { font-family: var(--serif); font-size: clamp(84px, 16vw, 180px); line-height: .85; letter-spacing: -.045em; display: block; }
.moment .n b { color: var(--acc); font-weight: 400; }
.moment .cap { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.7vw, 30px); line-height: 1.4; max-width: 26ch; margin: 30px auto 0; color: var(--dim); }
.moment .cap i { color: var(--ink); font-style: normal; }
.moment .tag { margin-top: 20px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }

/* ---------- impact tiles ---------- */
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.impact-tile { background: var(--paper); padding: 22px 24px; }
.impact-tile h4 { font-family: var(--serif); font-weight: 400; margin: 0 0 6px; font-size: 21px; }
.impact-tile p { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.5; }
.impact-tile .stat { color: var(--acc); font-family: var(--mono); font-size: 11px; margin-top: 10px; display: block; line-height: 1.6; }

/* ---------- timeline ---------- */
.timeline { border-top: 1px solid var(--ink); }
.tl-item { display: grid; grid-template-columns: 190px 1fr; gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.tl-item .when { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); }
.tl-item h4 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 0 0 4px; letter-spacing: -.01em; }
.tl-item .org { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); margin-bottom: 8px; }
.tl-item p { margin: 0; color: var(--dim); font-size: 14px; }

/* ---------- skills ---------- */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; }
.skill-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-tags span { font-size: 12.5px; color: var(--dim); border: 1px solid var(--rule); padding: 4px 9px; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.about-grid p { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--dim); }

/* ---------- footer ---------- */
.footer { margin-top: 84px; border-top: 1px solid var(--ink); }
.footer .wrap { padding-top: 24px; padding-bottom: 8px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer .socials a { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-left: 18px; }
.footer .socials a:hover { color: var(--acc); }
/* "Want to talk? Email me" — one line, only the link carries the accent. */
.footer .talk-line { margin: 0; font-size: 16px; color: var(--ink); }
.footer .talk-line a { color: var(--acc); border-bottom: 1px solid var(--acc-soft); transition: border-color .2s; }
.footer .talk-line a:hover { border-bottom-color: var(--acc); }
.footer .copy { font-family: var(--mono); font-size: 10.5px; color: var(--faint); padding-bottom: 50px; }

/* ---------- case study pages ---------- */
/* Case study masthead mirrors the landing page: title and standfirst
   left, run-in metadata right-aligned in the second column. */
.cs-hero .wrap {
  padding-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 48px; align-items: start;
}
.back {
  grid-column: 1 / -1; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px;
}
.back:hover { color: var(--acc); }
.cs-hero .eyebrow { grid-column: 1; }
.cs-hero h1 {
  grid-column: 1; font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6.4vw, 76px); line-height: .96; letter-spacing: -.028em; margin: 14px 0 0;
}
.cs-hero .subtitle {
  grid-column: 1; font-family: var(--serif); font-size: 21px; line-height: 1.45;
  color: var(--dim); max-width: 42ch; margin: 20px 0 0;
}
/* The hero grid's second column is `auto`, so this box sizes itself and
   everything left of it — the subtitle and the walkthrough CTA — gets
   whatever remains. A long fact value once grew this to half the hero and
   squeezed the CTA into a one-word-per-line column. max-width caps the
   damage so no future value can do it again. */
.cs-facts {
  grid-column: 2; grid-row: 2 / span 3; align-self: end;
  display: flex; flex-direction: column; gap: 16px; text-align: right;
  min-width: 210px; max-width: 260px; padding-bottom: 4px;
}
.cs-facts > div { background: none; padding: 0; }
.fact-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 3px;
}
.fact-value { font-family: var(--mono); font-size: 12px; color: var(--ink); line-height: 1.5; }
/* Secondary detail on a fact — present but not competing with the value. */
.fact-sub { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; }
.cs-hero figure { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .cs-hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .cs-facts { grid-column: 1; grid-row: auto; text-align: left; margin-top: 28px;
              display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
}
.hero-visual { display: none; }

/* ---------- showcase ----------
   Alternating media/text rows. One idea per row, the visual carries the
   explanation, and the copy is capped at roughly two sentences — if a row
   needs more than that, it's two rows. Used to give the whole shape of a
   project before any long-form prose. */
.sc-intro { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--dim); max-width: 46ch; margin: 0; }
.showcase { display: flex; flex-direction: column; gap: 18px; margin: 44px 0 0; }
.sc-row {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 0;
  border: 1px solid var(--rule); background: var(--raised); overflow: hidden;
}
.sc-row:nth-child(even) .sc-copy { order: 2; }
.sc-copy { padding: 46px 42px; display: flex; flex-direction: column; justify-content: center; }
.sc-copy .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acc); margin-bottom: 14px;
}
/* Beats .cs-section h3, which is a mono eyebrow style — here the heading
   is the row's headline and has to carry display weight. */
.cs-section .sc-copy h3, .sc-copy h3 {
  font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.15;
  letter-spacing: -.015em; margin: 0 0 12px; color: var(--ink);
  text-transform: none;
}
.sc-copy p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--dim); max-width: 42ch; }

/* The gradient ground stands in for a product screenshot and keeps the
   rhythm intact while the real captures are still missing. */
.sc-media {
  position: relative; min-height: 320px; display: flex;
  align-items: center; justify-content: center; padding: 32px;
  /* Cool-led, with the accent as a highlight rather than a wash — an even
     mix of the two reads muddy brown once it sits on a dark ground. */
  background:
    radial-gradient(110% 110% at 82% 18%, rgba(78,124,158,.38) 0%, transparent 60%),
    radial-gradient(90% 90% at 12% 88%, color-mix(in srgb, var(--acc) 22%, transparent) 0%, transparent 58%),
    linear-gradient(160deg, rgba(120,140,170,.10), transparent 65%);
}
.sc-media > div {
  border: 1px dashed color-mix(in srgb, var(--ink) 32%, transparent);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 20px 22px; max-width: 40ch; text-align: center;
}
.sc-media .lbl {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--acc); margin-bottom: 8px;
}
.sc-media p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.sc-media .dim { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--faint); }

@media (max-width: 900px) {
  .sc-row { grid-template-columns: 1fr; }
  .sc-row:nth-child(even) .sc-copy { order: 0; }
  .sc-copy { padding: 30px 24px; }
  .sc-media { min-height: 220px; }
}

/* Persona illustration as a small portrait chip in the card header —
   supporting the persona, not competing with the content. Cropped to the
   face from a tall source, and alt="" since the text says who this is. */
/* The source images are cropped to square on the face at build time, so
   this only needs to size and round them — no object-position guesswork,
   which can't suit two subjects sitting at different heights. */
.persona-face {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--paper);
  margin-bottom: 12px; display: block;
}

/* Every interactive is a schematic, and has to say so — otherwise a
   reviewer may read a wireframe as the shipped product. A small tag plus a
   sentence in normal case: uppercasing the whole line made it shout, wrap
   badly, and compete with the diagram it's labelling. */
.interactive { position: relative; }
/* Inserted as the first child of .interactive, which has a border and no
   padding of its own — so without insets the caveat sat flush in the
   corner and read as a rendering slip. Matches the 18px gutter the
   component headers use, so the two line up when both are present. */
.lofi-note {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0; padding: 15px 18px 13px;
  font-family: var(--mono); font-size: 10.5px;
  line-height: 1.5; letter-spacing: .02em; color: var(--faint);
}
.lofi-tag {
  flex: none; padding: 3px 7px;
  border: 1px dashed color-mix(in srgb, var(--faint) 60%, transparent);
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); background: color-mix(in srgb, var(--faint) 7%, transparent);
}

.lede-sm { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--dim); margin: 0 0 4px; max-width: 52ch; }

/* Flow — nodes are steps, connectors are where the time goes. Connector
   length is proportional to duration, so eight weeks of dead air reads as
   distance rather than as a number you have to interpret. */
.fl { padding: 22px 20px 8px; }
.fl-node { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.fl-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 2px solid var(--sig-info); background: var(--raised);
}
.fl-node.queue .fl-dot { border-color: var(--sig-bad); }
.fl-node.start .fl-dot, .fl-node.end .fl-dot { background: var(--ink); border-color: var(--ink); }
.fl-k { font-size: 14px; color: var(--ink); }
.fl-node.start .fl-k, .fl-node.end .fl-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.fl-node.doomed .fl-k { color: var(--sig-bad); }

.fl-link {
  height: var(--h); margin-left: 5px; border-left: 2px solid var(--sig-info);
  position: relative; display: flex; align-items: center;
  transition: height .45s cubic-bezier(.16,1,.3,1);
}
.fl-link.queue { border-left-style: dashed; border-left-color: var(--sig-bad); }
.fl-link.end { border-left: 0; }
.fl-d {
  margin-left: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--faint);
}
.fl-link.queue .fl-d { color: var(--sig-bad); }

/* The contribution marker — the reason this is a flow and not a Gantt. */
.fl-mine {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
  background: none; border: 1px solid var(--rule); color: var(--dim);
  padding: 5px 10px; cursor: pointer; transition: .18s;
}
.fl-mine em {
  font-style: normal; font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc);
}
.fl-mine:hover, .fl-mine.on { border-color: var(--acc); color: var(--ink); }
.fl-mine.on { background: var(--acc-soft); }
.fl-why {
  margin: 10px 0 10px 28px; padding: 12px 14px;
  border-left: 2px solid var(--acc); background: var(--acc-soft);
}
.fl-why p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--dim); }

@media (max-width: 600px) {
  .fl { padding: 18px 14px 6px; }
  .fl-mine { font-size: 10px; }
}

.jr-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 14px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
}
.jr-total b { font-family: var(--serif); font-size: 26px; color: var(--ink); font-weight: 400; margin-right: 3px; }
.jr-flag { color: var(--sig-bad); }
.jr-flag.good { color: var(--sig-good); }
@media (prefers-reduced-motion: reduce) { .jr-track i { animation: none; } }
@media (max-width: 640px) {
  .jr-row { grid-template-columns: 1fr 56px; row-gap: 5px; }
  .jr-track { grid-column: 1 / -1; }
}

/* Before/after — the single comparison the impact section turns on. */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin: 26px 0 34px; }
.ba-col { border: 1px solid var(--rule); padding: 22px 20px; display: flex; flex-direction: column; gap: 7px; }
.ba-col.after { border-color: var(--sig-good); background: var(--sig-good-fill); }
.ba-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.ba-col.after .ba-k { color: var(--sig-good); }
.ba-col b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.ba-sub { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.ba-arrow { font-size: 20px; color: var(--faint); }
@media (max-width: 700px) {
  .ba { grid-template-columns: 1fr; gap: 12px; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---------- Docufy AI interactives ----------
   Lo-fi on purpose. Colour is semantic only: green = met, red = failed,
   amber = uncertain. Nothing here is meant to read as a shipped screen. */
/* Lived only in story.css, so every chip on a project page rendered as
   bare text — the deviation schematic's "Material change" verdict among
   them. Shared here because both surfaces use it. */
.ui-chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid currentColor; white-space: nowrap;
}
.ui-chip.good { color: var(--sig-good); }
.ui-chip.warn { color: var(--sig-warn); }
.ui-chip.bad  { color: var(--sig-bad); }
.ui-chip.info { color: var(--sig-info); }

/* ---- Snippet authoring schematic (Docufy) ----------------------------
   Two panes: a document on the left with governed clauses, the add-in
   pane on the right. The point of the component is the link between
   them — what an author sets here decides what the system does to a
   Doer's edit weeks later, which is invisible in a static screenshot. */
.sn {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 316px);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.sn-doc { background: var(--paper); padding: 18px 20px; min-width: 0; }
.sn-pane { background: var(--raised); padding: 0; min-width: 0; }
.sn-doc-t {
  font-family: var(--serif); font-size: 19px; margin: 0 0 4px; color: var(--ink);
}
.sn-doc-r { width: 46px; height: 2px; background: var(--dim); margin-bottom: 14px; }
.sn-p { font-size: 12.5px; line-height: 1.62; color: var(--dim); margin: 0 0 11px; }
/* Selectable clauses. Buttons, not divs — they're the primary control. */
.sn-cl {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px;
  line-height: 1.62; color: var(--dim); background: none; cursor: pointer;
  border: 1px dashed var(--rule); padding: 9px 11px; margin: 0 0 9px; transition: .18s;
}
.sn-cl:hover { border-color: var(--acc); color: var(--ink); }
.sn-cl[aria-pressed="true"] {
  border-style: solid; border-color: var(--acc);
  background: var(--acc-soft); color: var(--ink);
}
.sn-cl b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 3px; }
.sn-hint { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--faint); }

.sn-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--rule);
}
.sn-head b { font-size: 13px; color: var(--ink); font-weight: 500; }
.sn-crumb { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--faint); }
.sn-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); }
.sn-tabs button {
  flex: 1; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 9px 4px; background: none; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; color: var(--faint); transition: .18s;
}
.sn-tabs button:hover { color: var(--acc); }
.sn-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--acc); }
.sn-body { padding: 13px 14px; }
.sn-f { margin-bottom: 12px; }
.sn-f > label {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.sn-val {
  border: 1px solid var(--rule); background: var(--paper);
  padding: 7px 9px; font-size: 12.5px; color: var(--ink); min-height: 32px;
}
.sn-val.empty { color: var(--faint); font-style: italic; }
/* AI-filled fields are marked at the field, not in a legend — a legend
   makes provenance something you look up, which is exactly wrong here. */
.sn-val.ai { border-color: var(--sig-info); background: var(--sig-info-fill); }
.sn-ai {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
  color: var(--sig-info); border: 1px solid currentColor; padding: 1px 4px;
}
.sn-seg { display: flex; gap: 6px; }
.sn-seg button {
  flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  padding: 6px 8px; background: var(--paper); border: 1px solid var(--rule);
  color: var(--dim); cursor: pointer; transition: .18s;
}
.sn-seg button:hover { border-color: var(--acc); color: var(--acc); }
.sn-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sn-attr {
  border: 1px solid var(--rule); background: var(--paper);
  padding: 9px 10px; margin-bottom: 7px;
}
.sn-attr-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.sn-attr-n { font-size: 12.5px; color: var(--ink); }
.sn-attr-m { font-family: var(--mono); font-size: 10px; color: var(--faint); line-height: 1.5; }
.sn-note { font-size: 12px; line-height: 1.55; color: var(--dim); margin: 0; }

/* The consequence strip. This is the component's argument: settings made
   once by an accountable owner decide what happens downstream. */
.sn-out {
  grid-column: 1 / -1; background: var(--paper);
  border-top: 1px solid var(--rule); padding: 13px 16px;
  display: flex; align-items: flex-start; gap: 13px;
}
.sn-out .sn-out-b { flex: 1; min-width: 0; }
.sn-out-k {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.sn-out p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--dim); }
.sn-out b { color: var(--ink); font-weight: 500; }
@media (max-width: 720px) {
  .sn { grid-template-columns: minmax(0, 1fr); }
  .sn-out { flex-direction: column; gap: 9px; }
}

/* ---- Atomic ladder --------------------------------------------------- */
.atm { border: 1px solid var(--rule); background: var(--raised); }
.atm-ladder { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--rule); }
.atm-ladder button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--paper); border: 1px solid var(--rule); padding: 11px 14px; cursor: pointer;
  transition: border-color .16s, background .16s;
}
/* Each rung a touch wider than the one above — the ladder reads as
   building up to the composition tier. */
.atm-ladder li:nth-child(1) button { margin-right: 32%; }
.atm-ladder li:nth-child(2) button { margin-right: 24%; }
.atm-ladder li:nth-child(3) button { margin-right: 12%; }
.atm-ladder button:hover { border-color: var(--acc); }
.atm-ladder button[aria-pressed="true"] { border-color: var(--acc); background: var(--acc-soft); }
.atm-ladder button em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--faint); }
.atm-t { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.atm-ladder button.agent { border-color: color-mix(in srgb, var(--acc) 55%, var(--rule)); }
.atm-tag {
  margin-left: auto; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); padding: 3px 7px;
}
.atm-detail { padding: 16px; }
.atm-detail p { margin: 14px 0 0; font-size: 13px; line-height: 1.62; color: var(--dim); max-width: 72ch; }
.atm-detail p b { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) { .atm-ladder li button { margin-right: 0 !important; } .atm-tag { margin-left: 8px; } }

/* Each tier draws itself. The children stagger in on every render, so
   changing tier reads as the pieces assembling. */
.atm-viz { min-height: 92px; display: flex; align-items: flex-start; }
.av { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; width: 100%; }
.av > * { animation: av-in .42s cubic-bezier(.16, 1, .3, 1) both; }
.av > *:nth-child(2) { animation-delay: .06s; }
.av > *:nth-child(3) { animation-delay: .12s; }
.av > *:nth-child(4) { animation-delay: .18s; }
.av > *:nth-child(5) { animation-delay: .24s; }
@keyframes av-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .av > * { animation: none; } }

/* Atoms — labelled tokens */
.av-atoms .av-a { display: flex; flex-direction: column; gap: 6px; align-items: center; font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.av-sw { width: 30px; height: 30px; border: 1px solid var(--rule); }
.av-line { width: 30px; height: 30px; border: 1px solid var(--rule); background:
  repeating-linear-gradient(var(--dim) 0 2px, transparent 2px 7px); background-size: 100% 21px; background-position: 0 5px; background-repeat: no-repeat; opacity: .5; }
.av-gap { width: 30px; height: 30px; border: 1px solid var(--rule); position: relative; }
.av-gap::after { content: ""; position: absolute; inset: 9px; border: 1px dashed var(--dim); opacity: .6; }
.av-icon { width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 50%; }

/* Molecules — small composed units */
.av-mol { gap: 8px; }
.av-u { background: var(--paper); border: 1px solid var(--rule); padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.av-u b { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink); line-height: 1; }
.av-u span { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.av-u.row { flex-direction: row; align-items: center; gap: 8px; }
.av-u.row span { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--dim); }
.av-u.row em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; padding: 1px 5px; color: var(--faint); }

/* Organisms — recognisable sections */
.av-org { gap: 8px; }
.av-o { flex: 1; min-width: 150px; background: var(--paper); border: 1px solid var(--rule); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.av-cap { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin-bottom: 2px; }
.av-r { display: flex; align-items: center; gap: 8px; }
.av-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.av-dot.bad { background: var(--sig-bad); }
.av-dot.good { background: var(--sig-good); }

/* Compositions — three miniature layouts */
.av-comp { gap: 8px; }
.av-thumb { flex: 1; min-width: 96px; background: var(--paper); border: 1px solid var(--rule); padding: 9px; display: flex; flex-direction: column; gap: 5px; }
.av-tl { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.av-mini-graph { height: 16px; border: 1px solid var(--rule); background: linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--dim) 26%, transparent) 45% 55%, transparent 55%); margin-top: 2px; }
.av-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.av-grid span { height: 16px; border: 1px solid var(--rule); background: var(--raised); }
.av-item { height: 13px; border: 1px solid var(--rule); background: var(--raised); }

/* Composed brief — the assembled thing */
.av-brief { justify-content: flex-start; }
.av-bf { width: 100%; max-width: 300px; background: var(--paper); border: 1px solid var(--rule); padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.av-bh .sk-bar { height: 10px; background: color-mix(in srgb, var(--dim) 46%, transparent); }
.av-bs { display: flex; flex-direction: column; gap: 5px; }
.av-ba { display: flex; gap: 6px; margin-top: 2px; }
.av-ba span { width: 46px; height: 16px; border: 1px solid var(--rule); }
.av-ba span:first-child { border-color: var(--acc); background: var(--acc-soft); }

/* ---- Composition skeleton mocks ------------------------------------- */
.skg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sk { margin: 0; border: 1px solid var(--rule); background: var(--raised); display: flex; flex-direction: column; }
.sk-frame { padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 190px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.sk-bar { display: block; height: 7px; background: color-mix(in srgb, var(--dim) 32%, transparent); border-radius: 2px; }
.sk-head .sk-bar { height: 11px; background: color-mix(in srgb, var(--dim) 46%, transparent); }
.sk-lines { display: flex; flex-direction: column; gap: 6px; }
.sk-flow { display: flex; gap: 12px; align-items: flex-start; }
.sk-flow .sk-lines { flex: 1; }
.sk-graph { flex: none; width: 54px; height: 40px; border: 1px solid var(--rule); background: linear-gradient(135deg, transparent 46%, color-mix(in srgb, var(--dim) 24%, transparent) 46% 54%, transparent 54%); }
.sk-tiles { display: flex; gap: 8px; }
.sk-tile { flex: 1; height: 34px; border: 1px solid var(--rule); background: var(--raised); }
.sk-tile.big { height: 54px; display: flex; align-items: center; justify-content: center; }
.sk-donut { width: 26px; height: 26px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--dim) 30%, transparent); }
.sk-spark { width: 70%; height: 22px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dim) 22%, transparent)); border-bottom: 1px solid color-mix(in srgb, var(--dim) 34%, transparent); }
.sk-stream { display: flex; flex-direction: column; gap: 8px; }
.sk-item { display: flex; flex-direction: column; gap: 5px; padding: 8px; border: 1px solid var(--rule); background: var(--raised); }
.sk figcaption { padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.sk figcaption b { display: block; font-family: var(--serif); font-size: 16px; color: var(--ink); font-weight: 400; margin-bottom: 4px; }
.skg-foot { margin: 14px 0 0; font-size: 12.5px; line-height: 1.62; color: var(--dim); max-width: 76ch; }
.skg-foot b { color: var(--ink); font-weight: 500; }
@media (max-width: 720px) { .skg { grid-template-columns: 1fr; } }

/* ---- Run economy ----------------------------------------------------- */
.eco { border: 1px solid var(--rule); background: var(--raised); }
.eco-arch { padding: 16px; border-bottom: 1px solid var(--rule); }
.eco-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.eco-step {
  flex: 1; min-width: 150px; display: flex; align-items: center;
  background: var(--paper); border: 1px solid var(--rule); padding: 10px 12px;
  font-size: 12px; line-height: 1.4; color: var(--dim);
}
.eco-step b { color: var(--ink); font-weight: 500; }
.eco-step.det { border-color: var(--sig-good); background: var(--sig-good-fill); }
.eco-step.det b { color: var(--sig-good); }
.eco-flow > i { align-self: center; color: var(--faint); font-style: normal; flex: none; }
.eco-note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--dim); max-width: 74ch; }
.eco-note em { color: var(--ink); font-style: italic; }

.eco-calc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border-bottom: 1px solid var(--rule);
}
.eco-ctrl { background: var(--paper); padding: 13px 16px; }
.eco-k { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.eco-seg { display: flex; flex-wrap: wrap; gap: 5px; }
.eco-seg button {
  font-family: var(--mono); font-size: 10.5px; padding: 6px 10px;
  background: var(--raised); border: 1px solid var(--rule); color: var(--dim); cursor: pointer; transition: .16s;
}
.eco-seg button:hover { border-color: var(--acc); color: var(--acc); }
.eco-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.eco-out { background: var(--paper); padding: 13px 16px; display: flex; flex-direction: column; justify-content: center; }
.eco-out.big { background: var(--raised); }
.eco-o-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.eco-out b { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); line-height: 1.05; }
.eco-out.big b { color: var(--acc); font-size: 32px; }
.eco-coffee { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sig-good); margin-top: 4px; }
.eco-foot { margin: 0; padding: 13px 16px; background: var(--paper); font-size: 12.5px; line-height: 1.62; color: var(--dim); }
.eco-foot b { color: var(--ink); font-weight: 500; }
@media (max-width: 620px) {
  .eco-calc { grid-template-columns: 1fr; }
  .eco-flow > i { display: none; }
}

/* Interactives that append content directly (no bordered inner box) need
   their own gutter, or the closing prose sits flush against the
   container border. The lofi-note above already carries the top inset. */
.interactive > .iwrap { padding: 2px 16px 16px; }

/* ---- Competitive matrix --------------------------------------------- */
.cmx { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); background: var(--raised); font-size: 13px; }
.cmx th, .cmx td { padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.cmx thead th { border-bottom: 1px solid var(--rule); }
.cmx th b { display: block; font-weight: 500; color: var(--ink); font-size: 12.5px; }
.cmx th span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--faint); margin-top: 3px; text-transform: uppercase; }
.cmx-r { text-align: left !important; color: var(--dim); max-width: 0; width: 42%; }
.cmx-r em { color: var(--ink); font-style: normal; }
.cmx tr:last-child td { border-bottom: 0; }
.cmx-me { background: var(--acc-soft); }
.cmx-me b { color: var(--acc); }
.cmx-y { color: var(--sig-good); font-size: 14px; }
.cmx-p { color: var(--sig-warn); font-family: var(--mono); }
.cmx-n { color: var(--faint); }
.cmx-foot { margin: 14px 0 0; font-size: 12.5px; line-height: 1.62; color: var(--dim); max-width: 74ch; }
.cmx-foot b { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  .cmx { font-size: 11.5px; } .cmx th, .cmx td { padding: 9px 7px; }
  .cmx th b { font-size: 11px; } .cmx th span { display: none; }
}

/* ---- Buyer segments -------------------------------------------------- */
.byr { border: 1px solid var(--rule); background: var(--raised); }
.byr-tabs { display: flex; gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
.byr-tabs button {
  flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--paper); border: 0; padding: 11px 14px; cursor: pointer;
  color: var(--dim); font-size: 12.5px; text-align: left; transition: background .16s, color .16s;
}
.byr-tabs button:hover { background: var(--raised); color: var(--ink); }
.byr-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.byr-rank { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.byr-tabs button[aria-pressed="true"] .byr-rank { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.byr-body { padding: 16px; }
.byr-line { margin: 0 0 10px; font-family: var(--serif); font-size: 18px; line-height: 1.4; color: var(--ink); }
.byr-why { margin: 0 0 12px; font-size: 13px; line-height: 1.62; color: var(--dim); max-width: 72ch; }
.byr-budget { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); padding: 4px 9px; }
.byr-foot { margin: 0; padding: 13px 16px; border-top: 1px solid var(--rule); background: var(--paper); font-size: 12px; line-height: 1.6; color: var(--dim); }
.byr-foot b { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) { .byr-tabs { flex-direction: column; } }

/* ---- Spec-driven trace ----------------------------------------------
   Five stages of one rule. The rail is the argument: the spec is first
   and everything after it is answerable to it. */
.sdd { border: 1px solid var(--rule); background: var(--raised); }
.sdd-rail {
  list-style: none; margin: 0; padding: 14px 16px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule);
}
.sdd-rail li { display: flex; align-items: center; min-width: 0; }
.sdd-rail button {
  display: flex; align-items: baseline; gap: 8px; background: none; border: 0;
  padding: 6px 9px; cursor: pointer; color: var(--faint); transition: color .18s;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-align: left;
}
.sdd-rail button:hover { color: var(--ink); }
.sdd-rail button[aria-pressed="true"] { color: var(--acc); }
.sdd-rail button em { font-style: normal; font-size: 9px; letter-spacing: .12em; opacity: .7; }
.sdd-rail li i { flex: none; width: 18px; height: 1px; background: var(--rule); margin: 0 2px; }
.sdd-body { padding: 16px; }
.sdd-note { margin: 0 0 13px; font-size: 13px; line-height: 1.6; color: var(--dim); max-width: 70ch; }
.sdd-note strong, .sdd-note b { color: var(--ink); font-weight: 500; }
.sdd-code { position: relative; border: 1px solid var(--rule); background: var(--paper); }
.sdd-lang {
  position: absolute; top: 0; right: 0; padding: 5px 9px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.sdd-code pre {
  margin: 0; padding: 15px 17px; overflow-x: auto;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.62; color: var(--dim);
  white-space: pre; tab-size: 2;
}
.sdd-foot {
  margin: 0; padding: 13px 16px; border-top: 1px solid var(--rule); background: var(--paper);
  font-size: 12.5px; line-height: 1.6; color: var(--dim); position: relative; padding-right: 66px;
}
.sdd-foot b { color: var(--ink); font-weight: 500; }
.sdd-step {
  position: absolute; right: 16px; top: 13px;
  font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .08em;
}
@media (max-width: 720px) { .sdd-rail li i { display: none; } .sdd-rail { gap: 2px; } }

/* ---- Lineage: three eras on one axis, who the visitor is ------------- */
.lin { border: 1px solid var(--rule); background: var(--raised); }
.lin-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); }
.lin-col {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  background: var(--paper); border: 0; border-top: 2px solid transparent;
  padding: 15px 16px; cursor: pointer; text-align: left; transition: background .18s, border-color .18s;
}
.lin-col:hover { background: var(--raised); }
.lin-col.on { border-top-color: var(--acc); background: var(--raised); }
.lin-col.now { border-top-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.lin-col.now.on { border-top-color: var(--acc); }
.lin-y { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--faint); }
.lin-n { font-family: var(--serif); font-size: 19px; color: var(--ink); line-height: 1.1; }
.lin-col.now .lin-n { color: var(--acc); }
.lin-who { font-size: 12px; line-height: 1.5; color: var(--dim); }
.lin-t {
  margin-top: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: var(--faint); line-height: 1.5;
}
.lin-col.on .lin-t { color: var(--acc); }
.lin-out { padding: 14px 16px; border-top: 1px solid var(--rule); min-height: 76px; }
.lin-out p { margin: 0; font-size: 13px; line-height: 1.62; color: var(--dim); max-width: 72ch; }
.lin-hint { color: var(--faint) !important; }
.lin-hint b { color: var(--dim); font-weight: 400; }
.lin-next { padding: 14px 16px; border-top: 1px solid var(--rule); background: var(--paper); }
.lin-k {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.lin-next p { margin: 0; font-size: 12.5px; line-height: 1.62; color: var(--dim); }
.lin-next b { color: var(--ink); font-weight: 500; }
.lin-next em { color: var(--faint); font-style: italic; }
@media (max-width: 700px) { .lin-row { grid-template-columns: 1fr; } }

/* ---- Composable brief schematic (brf-) -------------------------------------
   The narrative order is fixed and the content isn't, so the structure
   reads as a spine: four labelled steps, same sequence every time.

   Namespaced brf-, not cmp-: the agent chat's contact form already owns
   .cmp, and sharing it made this component a flex container by accident. */
.brf { border: 1px solid var(--rule); background: var(--raised); }
.brf-tabs { display: flex; gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
.brf-tabs button {
  flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  padding: 10px 8px; background: var(--paper); border: 0; color: var(--dim);
  cursor: pointer; transition: .18s;
}
.brf-tabs button:hover { color: var(--acc); }
.brf-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.brf-ask {
  margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--rule);
  font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink);
}
.brf-body { padding: 4px 0; }
.brf-step {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px;
  padding: 12px 16px; border-bottom: 1px dashed var(--rule);
}
.brf-step:last-child { border-bottom: 0; }
.brf-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--acc); padding-top: 2px;
}
.brf-step p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--dim); }
.brf-step p b { color: var(--ink); font-weight: 500; }
.brf-step ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.65; color: var(--dim); }
.brf-step li::marker { color: var(--faint); }
.brf-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.brf-acts span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  border: 1px solid var(--rule); background: var(--paper); padding: 6px 10px; color: var(--ink);
}
.brf-acts span:first-child { border-color: var(--acc); color: var(--acc); }
.brf-foot {
  margin: 0; padding: 12px 16px; border-top: 1px solid var(--rule); background: var(--paper);
  font-size: 12px; line-height: 1.6; color: var(--dim);
}
.brf-foot b { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  .brf-tabs { flex-direction: column; }
  .brf-step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---- Synthetic data schematic ---------------------------------------
   A table shown under two data conditions. The demo rows are deliberately
   inert; the work is in the flagged rows, which are buttons because the
   decision each one forced is the actual content. */
.sy { border: 1px solid var(--rule); background: var(--raised); }
.sy-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 11px 14px; border-bottom: 1px solid var(--rule);
}
.sy-tabs { display: flex; gap: 6px; }
.sy-tabs button {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  padding: 6px 11px; background: var(--paper); border: 1px solid var(--rule);
  color: var(--dim); cursor: pointer; transition: .18s;
}
.sy-tabs button:hover { border-color: var(--acc); color: var(--acc); }
.sy-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sy-count {
  display: flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .07em; color: var(--faint);
}
.sy-count b { color: var(--ink); font-weight: 500; font-size: 12px; }
.sy-count i { width: 1px; height: 12px; background: var(--rule); }

.sy-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sy-t th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); font-weight: 400;
  padding: 9px 14px; border-bottom: 1px solid var(--rule);
}
.sy-t td { padding: 9px 14px; border-bottom: 1px solid var(--rule); color: var(--dim); vertical-align: top; }
.sy-t tr:last-child td { border-bottom: 0; }
/* The rule the long-title row exists to justify — one line, ellipsis, and
   a floor under the title column so a wide status can't crush it. */
.sy-title { max-width: 0; width: 46%; min-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-r { cursor: pointer; transition: background .18s; }
.sy-r:hover { background: var(--acc-soft); }
.sy-r:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.sy-r.on { background: var(--acc-soft); }
.sy-r.on .sy-title { color: var(--ink); }
.sy-s { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--dim); }
.sy-s.bad { color: var(--sig-bad); }
.sy-null { color: var(--faint); font-style: italic; }
.sy-warn { color: var(--sig-bad); }
.sy-more td { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .05em; }

.sy-foot { padding: 13px 14px; border-top: 1px solid var(--rule); background: var(--paper); }
.sy-k {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.sy-d { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--dim); }
.sy-fix { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink); }
.sy-fix b { color: var(--acc); font-weight: 400; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
@media (max-width: 640px) {
  .sy-t th:nth-child(2), .sy-t td:nth-child(2) { display: none; }
  .sy-title { min-width: 120px; }
}

.dx { border: 1px solid var(--rule); background: var(--raised); font-size: 13px; }
.dx-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--rule);
}
.dx-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--dim); }
.dx-list { padding: 6px 0; }
.dx-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 11px 14px; border-top: 1px solid var(--rule);
}
.sig-note { font-size: 12px; line-height: 1.55; color: var(--dim); max-width: 66ch; }
.sig-note.good { color: var(--sig-good); }
.dx-reset {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule); color: var(--faint); padding: 6px 10px; cursor: pointer;
}
.dx-reset:hover { border-color: var(--acc); color: var(--acc); }

/* decomposition rows */
.dx-row {
  display: grid; grid-template-columns: 10px 1.1fr 1.3fr 42px auto; gap: 12px;
  align-items: center; padding: 9px 14px; border-bottom: 1px dashed var(--rule);
  transition: background .18s, opacity .18s;
}
.dx-row:last-child { border-bottom: 0; }
.dx-row.keep { background: var(--sig-good-fill); }
.dx-row.drop { opacity: .42; }
.dx-row.drop .dx-found { text-decoration: line-through; }
.dx-conf { width: 8px; height: 8px; border-radius: 50%; display: block; }
.sig-high { background: var(--sig-good); }
.sig-med  { background: var(--sig-warn); }
.sig-low  { background: var(--sig-bad); }
.dx-name { color: var(--ink); }
.dx-found { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.dx-page { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.dx-acts { display: flex; gap: 5px; }
.dx-acts button {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  background: none; border: 1px solid var(--rule); color: var(--dim);
  padding: 4px 8px; cursor: pointer; transition: .16s;
}
.dx-acts button:hover { border-color: var(--acc); color: var(--acc); }

/* playbook rows */
.pb-tabs, .dv-tabs { display: flex; border: 1px solid var(--rule); }
.pb-tabs button, .dv-tabs button {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  background: none; border: 0; color: var(--faint); padding: 6px 10px; cursor: pointer; transition: .16s;
}
.pb-tabs button + button, .dv-tabs button + button { border-left: 1px solid var(--rule); }
.pb-tabs button[aria-pressed="true"], .dv-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pb-row { display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px dashed var(--rule); }
.pb-row:last-child { border-bottom: 0; }
.pb-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.pb-row.ok .pb-dot { background: var(--sig-good); }
.pb-row.no .pb-dot { background: var(--sig-bad); }
.pb-row b { font-weight: 500; color: var(--ink); }
.pb-row p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }

/* deviation */
.dv-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.dv-clause { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.dv-clause del { text-decoration: line-through; text-decoration-color: var(--sig-bad); color: var(--faint); }
.dv-clause ins { text-decoration: none; background: var(--sig-warn-fill); border-bottom: 1px solid var(--sig-warn); }
.dv-risk { display: flex; flex-direction: column; gap: 9px; }
.dv-risk p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--dim); }
.dv-risk b { color: var(--ink); }
.dv-risk ul { margin: 2px 0 0; padding-left: 18px; }
.dv-risk li { font-size: 12.5px; line-height: 1.7; color: var(--dim); }

@media (max-width: 700px) {
  .dx-row { grid-template-columns: 10px 1fr; row-gap: 4px; }
  .dx-row .dx-found, .dx-row .dx-page { grid-column: 2; }
  .dx-acts { grid-column: 2; }
}

/* ---------- lightbox ----------
   Expanded view for any content image. Sized to the viewport rather than
   the image, so a 2716px-wide screenshot is readable without the dialog
   ever overflowing. */
.zoomable { cursor: zoom-in; transition: opacity .2s; }
.zoomable:hover { opacity: .88; }
.zoomable:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

.lb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.lb.on { opacity: 1; visibility: visible; }
.lb-fig {
  margin: 0; display: flex; flex-direction: column; gap: 14px;
  max-width: 100%; max-height: 92vh;
}
.lb-fig img {
  display: block; max-width: 100%; max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  background: var(--paper);
  transform: scale(.985); transition: transform .28s var(--ease);
}
.lb.on .lb-fig img { transform: none; }
.lb-fig figcaption {
  font-size: 13px; line-height: 1.55; color: var(--paper); opacity: .78;
  max-width: 76ch; margin: 0 auto; text-align: center;
}
.lb-close {
  position: absolute; top: 20px; right: 22px;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: none; cursor: pointer; font-size: 15px;
  border: 1px solid color-mix(in srgb, var(--paper) 34%, transparent);
  color: var(--paper); transition: .18s;
}
.lb-close:hover { border-color: var(--acc); color: var(--acc); }
body.lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
  .lb-fig img { transition: none; transform: none; }
}

/* ---------- embeds ----------
   A live Figma prototype, framed like the rest of the case study. Loaded
   lazily so an embed never blocks first paint, and given an explicit
   aspect ratio so the page doesn't jump when the iframe arrives. */
.embed { margin: 34px 0; }
.embed-frame {
  position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--rule);
  background: var(--raised); overflow: hidden;
}
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Video keeps 16:9 at every width — letterboxing a demo wastes the frame. */
.embed-frame.video { aspect-ratio: 16 / 9; background: #000; }
@media (max-width: 700px) { .embed-frame.video { aspect-ratio: 16 / 9; } }

/* An embed nested inside a numbered flow step shouldn't inherit the
   step's list indentation rhythm — pull it back to the content column. */
.flow-list .embed { margin: 16px 0 4px; }

/* Self-hosted player: same frame as the iframes, native controls. */
.embed-video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 1px solid var(--rule); background: #000;
}
/* A phone recording shouldn't be stretched to landscape — cap it at a
   sensible reading width and keep its own aspect ratio. */
/* aspect-ratio: auto lets the browser derive the ratio from the width/height
   attributes on each element — a fixed ratio letterboxed any clip that
   wasn't shot at exactly that size. */
.embed-video.portrait {
  aspect-ratio: auto; width: auto; height: auto;
  max-width: 300px; max-height: 68vh;
}
/* A portrait clip in a full-width column leaves a large empty field beside
   it — pair it with its notes instead. */
.embed.clip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 34px; align-items: start; }
.embed.clip .embed-cap { grid-column: 1; grid-row: 2; margin-top: 12px; }
/* Span both rows so the notes start level with the top of the clip rather
   than auto-placing next to the caption at the bottom. */
.clip-notes {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column; gap: 20px; padding-top: 4px;
}
.clip-notes p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dim); max-width: 46ch; }
.clip-notes b { color: var(--ink); font-weight: 500; }
.clip-notes .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc);
}
/* Voice sample — an audio player needs a reason to exist on the page, so it
   sits with the sentence explaining what it proves. */
.voice-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 26px; align-items: center; margin: 30px 0 0;
  border-top: 1px solid var(--rule); padding-top: 24px;
}
.voice-row p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--dim); max-width: 46ch; }
.voice-row .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc);
}
.voice-row audio { width: 100%; }

@media (max-width: 820px) {
  /* Explicit placement has to be cleared too — otherwise `grid-column: 2`
     conjures an implicit second track and the single-column rule does
     nothing. */
  .embed.clip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .embed.clip .embed-cap,
  .embed.clip .clip-notes { grid-column: 1; grid-row: auto; }
  .voice-row { grid-template-columns: 1fr; gap: 14px; }
}
/* Scoped to .embed so container rules like `.flow-list p` (which is more
   specific than a bare `.embed-cap`) can't resize the caption. */
.embed .embed-cap {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  margin-top: 10px; font-family: var(--mono); font-size: 10.5px;
  line-height: 1.5; letter-spacing: .06em; color: var(--faint);
}
.embed .embed-cap b { font-size: 10.5px; color: var(--acc); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; }
.embed .embed-cap span { font-size: 10.5px; }
/* Matches the global prose-link treatment — this rule is more specific, so
   it has to repeat it rather than leave these links looking like plain text. */
.embed .embed-cap a { color: var(--acc); border-bottom: 1px solid color-mix(in srgb, var(--acc) 42%, transparent); }
.embed .embed-cap a:hover { border-bottom-color: var(--acc); }
@media (max-width: 700px) { .embed-frame { aspect-ratio: 4 / 5; } }

/* Jobs-to-be-done: three roles side by side so the contrast between what
   they want from the same system is the point, not a list to read. */
.jtbd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); margin: 34px 0; }
.jtbd article { background: var(--paper); padding: 22px 20px; }
.jtbd h5 {
  margin: 0 0 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc); font-weight: 400;
}
.jtbd .job {
  font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--ink);
  margin: 0 0 12px; padding-left: 12px; border-left: 2px solid var(--acc);
}
.jtbd p:not(.job) { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--dim); }
@media (max-width: 820px) { .jtbd { grid-template-columns: 1fr; } }

/* An accent wash rather than the quiet raised grey — this is a callout
   the reader is meant to notice before scrolling, not a footnote. */
.nda-banner {
  display: flex; gap: 14px; align-items: flex-start; margin: 40px 0 0;
  background: var(--acc-soft);
  border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
  border-left: 3px solid var(--acc);
  padding: 18px 22px; font-size: 13px; color: var(--dim); line-height: 1.6;
}
.nda-banner > span { font-size: 16px; line-height: 1.2; }
.nda-banner strong { color: var(--ink); font-weight: 500; }

.cs-section .wrap { padding-top: 62px; }
.cs-section h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; letter-spacing: -.015em; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.cs-section h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin: 34px 0 10px; font-weight: 400; }
.cs-section p { max-width: 68ch; color: var(--dim); }
.cs-section p strong { color: var(--ink); font-weight: 500; }

.quote-block {
  font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.35; color: var(--ink); margin: 34px 0; padding: 30px 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); max-width: 26ch;
}
.quote-block cite { display: block; font-family: var(--mono); font-style: normal; font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin-top: 20px; }

/* Cards carry their own borders instead of a 1px grid gap over a coloured
   container — with five cards in a four-column grid, that trick left a
   large empty panel showing the container's background. */
/* Lo-fi schematic — gives the earlier, text-only case studies one clear
   visual each without pulling in the interactive engine. Pure CSS, theme-
   aware, built from the same tokens as the rest of the case-study furniture. */
.schema {
  display: grid; gap: 12px; margin: 26px 0;
  border: 1px solid var(--rule); background: var(--raised); padding: 22px 24px;
}
.schema-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.schema-lead {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); min-width: 62px;
}
.schema-box {
  border: 1px solid var(--rule); background: var(--paper);
  padding: 9px 13px; font-size: 13px; color: var(--ink); line-height: 1.4;
  max-width: 100%;
}
.schema-box.on { border-left: 3px solid var(--acc); }
.schema-box .bk {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 2px;
}
.schema-arrow { color: var(--faint); font-size: 15px; line-height: 1; }
.schema-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.schema-pill {
  border: 1px solid var(--rule); background: var(--paper);
  padding: 4px 9px; font-size: 12px; color: var(--dim);
}
.schema-cap { font-size: 12px; color: var(--dim); margin: 2px 0 0; }
.schema-hr { height: 1px; background: var(--rule); border: 0; margin: 2px 0; width: 100%; }

/* Inline-SVG chart primitives (gs-*) — shared so any case study can render a
   theme-aware graph. Originated on the Grammar Shift thesis page; promoted
   here once the case studies started using the same conceptual plots. */
.gs-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gs-figure { margin: 34px 0 6px; }
.gs-cap { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 12px 2px 0; }
.gs-svg text { font-family: var(--sans); fill: var(--ink); }
.gs-axis { stroke: var(--rule); stroke-width: 1.2; }
.gs-guide { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 5; }
.gs-curve { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.gs-curve-fut { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; }
.gs-area { fill: var(--acc-soft); }
.gs-node { fill: var(--paper); stroke: var(--acc); stroke-width: 2.4; }
.gs-node-dot { fill: var(--acc); }
.gs-lab { fill: var(--ink); font-weight: 600; font-size: 15px; }
.gs-sub { fill: var(--dim); font-size: 13px; }
.gs-tag { fill: var(--acc); font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; }
.gs-day { fill: var(--ink); font-family: var(--mono); font-size: 13px; letter-spacing: .08em; font-weight: 600; }
.gs-axlab { fill: var(--faint); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; }
.gs-faint { fill: var(--faint); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; }
.gs-box { fill: var(--wire-fill); stroke: var(--wire); stroke-width: 1.4; }
.gs-box-acc { fill: var(--acc-soft); stroke: var(--acc); stroke-width: 1.7; }
.gs-arrow { fill: none; stroke: var(--dim); stroke-width: 1.6; }
.gs-arrowhead { fill: var(--dim); }
.gs-box-t { fill: var(--ink); font-weight: 600; font-size: 15px; }
.gs-box-s { fill: var(--wire-ink); font-family: var(--mono); font-size: 11.5px; }
.gs-here { fill: var(--sig-warn); font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; }
.gs-mid-t { fill: var(--acc); font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; }

.insight-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin: 26px 0; counter-reset: ins;
}
.insight-card {
  background: var(--raised); border: 1px solid var(--rule);
  padding: 20px 22px; position: relative; counter-increment: ins;
  transition: border-color .2s, transform .2s;
}
.insight-card:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--rule)); }
.insight-card::before {
  content: counter(ins, decimal-leading-zero);
  position: absolute; top: 18px; right: 18px;
  font-family: var(--mono); font-size: 10px; color: var(--faint); opacity: .7;
}
.insight-card h5 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acc); margin: 0 0 10px;
  font-weight: 400; padding-right: 26px;
}
.insight-card p { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.6; }

/* The insight that set the direction sits below the grid as its own band
   rather than as a fifth card — a spanning item inside repeat(auto-fit)
   is fragile, and this one is a conclusion, not a peer. */
.north-star {
  margin: 14px 0 26px; padding: 26px 28px;
  border: 1px solid var(--acc); background: var(--acc-soft);
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: 26px; align-items: start;
}
.ns-k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acc); line-height: 1.5;
}
.north-star p {
  margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.5;
  color: var(--ink); max-width: 60ch;
}
.north-star p em { font-style: italic; }
.ns-who {
  grid-column: 1; font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
@media (max-width: 760px) {
  .north-star { grid-template-columns: 1fr; gap: 12px; padding: 22px 20px; }
  .north-star p { font-size: 17px; }
  .ns-who { grid-column: auto; }
}

/* Insight → what shipped. Status is stated, including where scope stopped. */
.resolve { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 26px 0; }
.rs-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 104px;
  gap: 20px; background: var(--paper); padding: 16px 20px; align-items: start;
}
.rs-k { font-size: 13.5px; color: var(--ink); }
.rs-k span { display: block; margin-top: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.rs-v { font-size: 13px; line-height: 1.6; color: var(--dim); }
.rs-v a { color: var(--acc); border-bottom: 1px solid var(--rule); }
.rs-s {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid currentColor; justify-self: start; white-space: nowrap;
}
.rs-s.shipped { color: var(--sig-good); }
.rs-s.partial { color: var(--sig-warn); }
.rs-s.later   { color: var(--faint); }
@media (max-width: 760px) {
  .rs-row { grid-template-columns: 1fr; gap: 8px; }
  .rs-s { justify-self: start; }
}
.insight-card .who {
  display: inline-block; margin-top: 12px; font-family: var(--mono);
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  border-top: 1px solid var(--rule); padding-top: 8px;
}

/* Ties a later design decision back to the research that produced it. */
.from-research {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; color: var(--faint);
}
.from-research b {
  font-weight: 400; font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
  padding: 3px 7px;
}

.persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 24px 0; }
.persona-card { background: var(--paper); padding: 24px 26px; }
.persona-card .role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.persona-card h4 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 6px 0 10px; }
.persona-card ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--dim); line-height: 1.6; }
.persona-card li::marker { color: var(--acc); }
.persona-desc { font-size: 14px; color: var(--dim); line-height: 1.55; margin: 0 0 16px; }
.persona-block { margin-top: 14px; }
.persona-block > span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }

.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 24px 0 0; }
.metric { background: var(--paper); padding: 22px 24px; }
.metric .num { font-family: var(--serif); font-size: 42px; line-height: 1; display: block; margin-bottom: 8px; }
.metric .label { font-size: 12.5px; color: var(--dim); line-height: 1.45; }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 24px 0; }
.stat-strip > div { background: var(--paper); padding: 18px 20px; }
.s-num { font-family: var(--serif); font-size: 28px; display: block; margin-bottom: 4px; }
.s-label { font-size: 12px; color: var(--dim); line-height: 1.45; }

.role-list { margin: 18px 0 0; padding-left: 20px; color: var(--dim); font-size: 14.5px; line-height: 1.7; }
.role-list li::marker { color: var(--acc); }

.flow-list { list-style: none; counter-reset: flow; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.flow-list li { counter-increment: flow; position: relative; padding: 20px 0 20px 46px; border-bottom: 1px solid var(--rule); }
.flow-list li::before { content: counter(flow, decimal-leading-zero); position: absolute; left: 0; top: 22px; font-family: var(--mono); font-size: 11px; color: var(--acc); }
.flow-list h5 { font-family: var(--serif); font-weight: 400; margin: 0 0 5px; font-size: 20px; }
.flow-list p { margin: 0; font-size: 14px; }

.related { font-size: 13.5px; color: var(--dim); line-height: 1.6; padding-top: 18px; border-top: 1px solid var(--rule); }
.framing-note {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--dim);
  border-left: 2px solid var(--acc); background: var(--raised);
  padding: 12px 16px; margin: 20px 0; max-width: none;
}
.framing-note strong { color: var(--ink); font-weight: 500; }

/* ---------- case study figures ---------- */
figure.fig { margin: 32px 0; }
figure.fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); background: var(--raised);
}
figure.fig figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--faint); margin-top: 10px; line-height: 1.55; max-width: 62ch;
}
figure.fig.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
figure.fig.pair figcaption { grid-column: 1 / -1; margin-top: 4px; }
/* Constrained figures stay LEFT aligned, like every other figure on the
   page — centring the image while the caption stays left made the two look
   unrelated. Only the width changes, never the alignment. */
figure.fig.narrow img { max-width: 380px; }
figure.fig.narrow figcaption { max-width: 46ch; }
/* Wide graphics that don't need the full column — a board or a diagram
   reads better with a margin than edge to edge. */
figure.fig.mid img { max-width: 760px; }
figure.fig.mid figcaption { max-width: 760px; }
.cs-hero figure.fig { margin: 40px 0 0; }
@media (max-width: 700px) { figure.fig.pair { grid-template-columns: 1fr; } }

.cs-nav-footer { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 70px; padding-top: 22px; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cs-nav-footer a { color: var(--dim); }
.cs-nav-footer a:hover { color: var(--acc); }

/* ============================================================
   Interactive case study components — DELIBERATELY LO-FI.

   These are schematics, not product screenshots. No brand colour,
   no filled buttons, no shadows: wireframe greys, dashed bounds,
   and monospace labels, so a reader never mistakes a diagram for
   the shipped UI. Colour appears only as a focus state.
   ============================================================ */
:root {
  --wire: #b8b6ad;        /* wireframe stroke */
  --wire-fill: #e8e7e1;   /* placeholder fill */
  --wire-ink: #6a6961;    /* wireframe label */

  /* Semantic signal colours. Used ONLY to encode meaning —
     resolved / attention / risk / highlighted — never decoration.
     Desaturated so they sit inside the paper palette. */
  --sig-good: #4a7c59;
  --sig-good-fill: rgba(74,124,89,.12);
  --sig-warn: #a8762a;
  --sig-warn-fill: rgba(168,118,42,.13);
  --sig-bad: #b4472b;
  --sig-bad-fill: rgba(180,71,43,.11);
  --sig-info: #3f6d8c;
  --sig-info-fill: rgba(63,109,140,.12);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --sig-good: #7fb894; --sig-good-fill: rgba(127,184,148,.16);
  --sig-warn: #d6a44f; --sig-warn-fill: rgba(214,164,79,.16);
  --sig-bad: #dd7f5e;  --sig-bad-fill: rgba(221,127,94,.16);
  --sig-info: #7fa9c7; --sig-info-fill: rgba(127,169,199,.16);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --sig-good: #4a7c59; --sig-good-fill: rgba(74,124,89,.12);
    --sig-warn: #a8762a; --sig-warn-fill: rgba(168,118,42,.13);
    --sig-bad: #b4472b;  --sig-bad-fill: rgba(180,71,43,.11);
    --sig-info: #3f6d8c; --sig-info-fill: rgba(63,109,140,.12);
  }
}

/* signal legend, reusable */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--faint); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border: 1px solid currentColor; }
.legend .g { color: var(--sig-good); } .legend .w { color: var(--sig-warn); }
.legend .b { color: var(--sig-bad); }  .legend .i { color: var(--sig-info); }
.interactive { margin: 36px 0; border: 1px solid var(--ink); background: var(--raised); }
.interactive > header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--rule);
}
.interactive > header h4 {
  margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); font-weight: 400;
}
/* explicit "this is a schematic" marker */
.interactive > header h4::before {
  content: "◻ schematic"; display: inline-block; margin-right: 12px;
  border: 1px dashed var(--wire); padding: 2px 7px; color: var(--wire-ink); letter-spacing: .1em;
}
.interactive > header span { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .06em; }
.interactive .hint {
  font-family: var(--mono); font-size: 11px; color: var(--dim); line-height: 1.6;
  padding: 12px 18px; border-top: 1px solid var(--rule); background: var(--paper); min-height: 3.2em;
}

/* --- provenance triptych --- */
.prov { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 1px; background: var(--rule); }
.prov > div { background: var(--paper); padding: 16px; min-width: 0; }
.prov .pane-t {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 12px;
}
/* design frame */
.frame { border: 1px solid var(--rule); background: #fff; padding: 12px; }
.frame [data-frame-node] {
  border: 1px dashed transparent; padding: 5px 6px; margin-bottom: 5px; cursor: pointer;
  font-size: 12px; color: var(--dim); transition: .18s;
}
.frame [data-frame-node]:hover { border-color: var(--wire); }
.frame [data-frame-node].on { border-style: solid; border-color: var(--ink); background: var(--wire-fill); color: var(--ink); }
.frame .fr-lbl { font-family: var(--mono); font-size: 9px; color: var(--faint); letter-spacing: .1em; }
/* json */
.jsonv {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.65; color: var(--dim);
  /* pre-wrap, not pre: long string values wrap instead of forcing a
     horizontal scroll that clips the left edge when a node is focused */
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden;
  overflow-y: auto; max-height: 340px; margin: 0;
}
.jsonv .jk { color: var(--ink); }
.jsonv .js { color: var(--acc); }
.jsonv .jv { color: #7a6f52; }
.jsonv .jnode { display: inline-block; cursor: pointer; border-left: 2px solid transparent; padding-left: 4px; }
.jsonv .jnode:hover { background: rgba(180,71,43,.05); }
.jsonv .jnode.on { background: var(--acc-soft); border-left-color: var(--acc); }
/* rendered card — wireframe, not a screenshot */
.ac {
  border: 1px solid var(--wire); background: var(--paper); padding: 14px;
  font-family: var(--mono); font-size: 11.5px; color: var(--wire-ink);
}
.ac-el { padding: 7px 8px; border: 1px dashed var(--wire); margin-bottom: 6px; transition: .18s; cursor: pointer; }
.ac-el.on { border-style: solid; border-color: var(--ink); background: var(--wire-fill); color: var(--ink); }
.ac-el strong { font-weight: 500; color: var(--ink); }
.ac-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 10.5px; }
.ac-facts span { color: var(--faint); }
.ac-facts b { font-weight: 400; }
.ac-el label { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.ac-el textarea {
  width: 100%; border: 1px dashed var(--wire); background: var(--wire-fill);
  font: inherit; font-size: 10.5px; padding: 6px; resize: none; color: var(--wire-ink);
}
.ac-warn { font-size: 10.5px; }
.ac-actions { display: flex; gap: 8px; border: 0; padding: 0; }
.ac-actions button {
  font: inherit; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px dashed var(--wire); background: none; color: var(--wire-ink);
  padding: 7px 13px; cursor: pointer;
}
.ac-actions button.on, .ac-actions .ac-primary.on { border-style: solid; border-color: var(--ink); background: var(--wire-fill); color: var(--ink); }
.ac-actions .ac-primary { border-style: solid; border-color: var(--wire-ink); }

/* --- tri-modal switcher --- */
.tri { display: grid; grid-template-columns: 168px 1fr; gap: 1px; background: var(--rule); }
.tri > div { background: var(--paper); padding: 16px; }
.tri-tabs { display: flex; flex-direction: column; gap: 6px; }
.tri-tabs button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--rule); background: var(--paper); color: var(--dim);
  padding: 10px 12px; cursor: pointer; text-align: left; transition: .18s;
}
.tri-tabs button:hover { border-color: var(--acc); color: var(--acc); }
.tri-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tri-stage { display: flex; justify-content: center; }
/* wireframe device — greys and dashed bounds only */
.ph { width: 258px; border: 1px solid var(--wire-ink); background: var(--paper); color: var(--wire-ink); font-family: var(--mono); }
.ph-bar { display: flex; justify-content: space-between; font-size: 9px; color: var(--faint); padding: 7px 11px; border-bottom: 1px dashed var(--wire); }
.ph-body { padding: 16px 14px 20px; min-height: 268px; }
.ph-lbl { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0 0 6px; }
.ph-big {
  font-size: 26px; margin: 0 0 18px; letter-spacing: -.01em; color: var(--ink);
  border: 1px dashed var(--wire); background: var(--wire-fill); padding: 10px 12px; text-align: center;
}
.ph-row { display: flex; justify-content: space-between; font-size: 10.5px; padding: 8px 0; border-top: 1px dashed var(--wire); }
.ph-row b { color: var(--ink); font-weight: 400; }
.ph-actions { display: flex; gap: 8px; margin-top: 18px; }
.ph-actions button {
  flex: 1; font: inherit; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 1px dashed var(--wire); color: var(--wire-ink); padding: 9px 6px; cursor: default;
}
.ph-voice { text-align: center; }
.wave { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 54px; margin: 22px 0 20px; }
.wave i { width: 4px; background: var(--wire-ink); animation: wv 1.1s ease-in-out infinite; }
.wave i:nth-child(1){height:16px;animation-delay:0s}.wave i:nth-child(2){height:32px;animation-delay:.1s}
.wave i:nth-child(3){height:48px;animation-delay:.2s}.wave i:nth-child(4){height:26px;animation-delay:.3s}
.wave i:nth-child(5){height:40px;animation-delay:.4s}.wave i:nth-child(6){height:20px;animation-delay:.5s}
.wave i:nth-child(7){height:30px;animation-delay:.6s}
@keyframes wv { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; } }
.ph-said { font-size: 14px; margin: 0 0 14px; color: var(--ink); border: 1px dashed var(--wire); padding: 9px; }
.ph-reply { font-size: 10.5px; line-height: 1.55; margin: 0 0 16px; }
.ph-chat { display: flex; flex-direction: column; gap: 9px; }
.ph-chat .b { font-size: 10.5px; line-height: 1.5; padding: 9px 11px; max-width: 88%; border: 1px dashed var(--wire); }
.ph-chat .bot { align-self: flex-start; }
.ph-chat .bot span { color: var(--faint); font-size: 9.5px; }
.ph-chat .me { align-self: flex-end; background: var(--wire-fill); border-style: solid; color: var(--ink); }

/* --- adversarial training simulation --- */
.tr { background: var(--paper); }
.tr-top { display: grid; grid-template-columns: 1fr 220px; gap: 1px; background: var(--wire); }
.tr-top > div { background: var(--paper); padding: 18px; }
.tr-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.tr-cell { aspect-ratio: 1; border: 1px solid var(--wire); cursor: pointer; transition: background .35s, border-color .35s; }
.tr-unknown { background: transparent; }
.tr-breached { background: var(--sig-bad); border-color: var(--sig-bad); }
.tr-defended { background: var(--sig-info-fill); border-color: var(--sig-info); }
.tr-eliminated { background: var(--sig-good-fill); border-color: var(--sig-good);
  background-image: repeating-linear-gradient(45deg, var(--sig-good) 0 2px, transparent 2px 5px); }
.tr-stats { display: flex; flex-direction: column; gap: 14px; }
.tr-stats > div { display: flex; flex-direction: column; gap: 2px; }
.tr-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tr-stats b { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1; }
.tr-t-bad { color: var(--sig-bad); } .tr-t-good { color: var(--sig-good); }
.tr-log { padding: 12px 18px; border-top: 1px dashed var(--wire); min-height: 84px; }
.tr-note { font-family: var(--mono); font-size: 11.5px; color: var(--dim); line-height: 1.6; padding: 2px 0; }
.tr-note.tr-bad { color: var(--sig-bad); } .tr-note.tr-good { color: var(--sig-good); } .tr-note.tr-warn { color: var(--sig-warn); }
.tr-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 18px; border-top: 1px dashed var(--wire); }
.tr-ctrl button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--rule); background: none; color: var(--dim); padding: 8px 14px; cursor: pointer; transition: .18s;
}
.tr-ctrl button:hover { border-color: var(--acc); color: var(--acc); }
.tr-ctrl button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tr-ctrl [data-tr-gate] { border-color: var(--sig-warn); color: var(--sig-warn); margin-left: auto; }
.tr-ctrl [data-tr-gate]:hover { background: var(--sig-warn-fill); }
.tr-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 18px 14px; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.tr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tr-legend i { width: 10px; height: 10px; border: 1px solid var(--wire); }
.tr-legend .b i { background: var(--sig-bad); border-color: var(--sig-bad); }
.tr-legend .d i { background: var(--sig-info-fill); border-color: var(--sig-info); }
.tr-legend .e i { background: var(--sig-good-fill); border-color: var(--sig-good); }

/* --- rbac matrix --- */
.rb-ids { display: flex; border-bottom: 1px dashed var(--wire); }
.rb-ids button {
  flex: 1; font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  border: 0; border-right: 1px dashed var(--wire); background: none; color: var(--wire-ink);
  padding: 12px 8px; cursor: pointer; transition: .18s;
}
.rb-ids button:last-child { border-right: 0; }
.rb-ids button:hover { color: var(--ink); }
.rb-ids button[aria-pressed="true"] { background: var(--wire-fill); color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.rb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--wire); }
.rb-grid > div { background: var(--paper); padding: 14px 16px; }
.rb-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; border-bottom: 1px dashed var(--wire); padding: 11px 0; cursor: pointer; text-align: left;
}
.rb-row:last-child { border-bottom: 0; }
.rb-a { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.rb-row[aria-pressed="true"] .rb-a { color: var(--ink); }
.rb-v { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; padding: 3px 8px; }
.rb-allow { color: var(--sig-good); } .rb-ask { color: var(--sig-warn); } .rb-deny { color: var(--sig-bad); }
.rb-row[aria-pressed="true"] .rb-v { background: currentColor; }
.rb-row[aria-pressed="true"] .rb-allow { background: var(--sig-good-fill); }
.rb-row[aria-pressed="true"] .rb-ask { background: var(--sig-warn-fill); }
.rb-row[aria-pressed="true"] .rb-deny { background: var(--sig-bad-fill); }
.rb-id { font-family: var(--mono); font-size: 11px; color: var(--ink); margin-bottom: 14px; }
.rb-id span { display: block; color: var(--faint); font-size: 10.5px; line-height: 1.6; margin-top: 5px; }
.rb-verdict { font-family: var(--serif); font-size: 24px; letter-spacing: -.01em; margin-bottom: 10px; }
.rb-why { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.65; max-width: none; }

/* --- principles: numbered list, not grey cards --- */
.pr-list { border-top: 1px solid var(--ink); counter-reset: pr; margin-top: 18px; }
.pr-list > div {
  counter-increment: pr; display: grid; grid-template-columns: 46px 1fr;
  gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.pr-list > div::before {
  content: counter(pr, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; color: var(--acc); padding-top: 4px;
}
.pr-list h5 { margin: 0 0 5px; font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -.01em; }
.pr-list p { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.6; max-width: 72ch; }

/* --- intent coverage (Passbook) --- */
.in-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1px; background: var(--wire); }
.in-list, .in-out { background: var(--paper); padding: 14px 16px; }
.in-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; width: 100%;
  background: none; border: 0; border-bottom: 1px dashed var(--wire); padding: 9px 0; cursor: pointer; text-align: left;
}
.in-row:last-child { border-bottom: 0; }
.in-k { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.in-row[aria-pressed="true"] .in-k { color: var(--ink); }
.in-bar { height: 10px; border: 1px dashed var(--wire); position: relative; }
.in-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--sig-info); opacity: .5; transition: opacity .2s; }
.in-row[aria-pressed="true"] .in-bar i { opacity: 1; }
.in-row.esc .in-bar { border-color: var(--sig-warn); border-style: solid; }
.in-row.esc .in-bar i { background: repeating-linear-gradient(45deg, var(--sig-warn) 0 3px, transparent 3px 6px); width: 100%; opacity: .5; }
.in-out { display: flex; align-items: center; }
.in-utter { width: 100%; }
.in-q { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.35; color: var(--ink); margin-bottom: 12px; }
.in-a { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
        color: var(--sig-info); border: 1px solid currentColor; padding: 5px 10px; }
.in-a.esc { color: var(--sig-warn); }

/* --- funnel — greyscale; the problem step is hatched, not coloured --- */
.fn { padding: 18px; background: var(--paper); }
.fn-row { display: grid; grid-template-columns: 130px 1fr 44px; gap: 12px; align-items: center; margin-bottom: 7px; }
.fn-k { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.fn-track { height: 16px; background: var(--paper); border: 1px dashed var(--wire); }
.fn-track i { display: block; height: 100%; background: var(--wire-ink); transition: width .7s cubic-bezier(.16,1,.3,1); }
.fn-track i { background: var(--sig-info); opacity: .5; }
.fn-row.drop .fn-track { border-style: solid; border-color: var(--sig-bad); }
.fn-row.drop .fn-track i { background: var(--sig-bad); opacity: 1; }
.fn-row.drop .fn-k { color: var(--sig-bad); }
.fn[data-fixed="true"] .fn-row.drop .fn-track { border-color: var(--sig-good); }
.fn[data-fixed="true"] .fn-row.drop .fn-track i { background: var(--sig-good); }
.fn[data-fixed="true"] .fn-row.drop .fn-k { color: var(--sig-good); }
.fn-v { font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-align: right; }
.fn-toggle {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  border: 1px dashed var(--wire-ink); background: none; color: var(--wire-ink);
  padding: 8px 14px; cursor: pointer; margin-top: 14px; transition: .18s;
}
.fn-toggle[aria-pressed="true"] { border-style: solid; border-color: var(--ink); background: var(--wire-fill); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .fn-track i { transition: none; } }

/* --- agent taxonomy --- */
.tax { background: var(--paper); }
.tax-tabs { display: flex; gap: 0; border-bottom: 1px dashed var(--wire); }
.tax-tabs button {
  flex: 1; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  border: 0; border-right: 1px dashed var(--wire); background: none; color: var(--wire-ink);
  padding: 12px 10px; cursor: pointer; transition: .18s;
}
.tax-tabs button:last-child { border-right: 0; }
.tax-tabs button:hover { color: var(--ink); }
.tax-tabs button[aria-pressed="true"] { background: var(--wire-fill); color: var(--ink); }
/* posture colour: defensive / adversarial / bridge */
.tax-tabs button[data-kind="blue"][aria-pressed="true"]  { box-shadow: inset 0 -3px 0 var(--sig-info); }
.tax-tabs button[data-kind="red"][aria-pressed="true"]   { box-shadow: inset 0 -3px 0 var(--sig-bad); }
.tax-tabs button[data-kind="green"][aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--sig-good); }
.tax[data-kind="blue"]  .loop-n { color: var(--sig-info); }
.tax[data-kind="red"]   .loop-n { color: var(--sig-bad); }
.tax[data-kind="green"] .loop-n { color: var(--sig-good); }
/* posture scene — red fires, blue shields, green patches */
.tx-scene {
  position: relative; height: 210px; background: var(--paper);
  border-bottom: 1px dashed var(--wire); overflow: hidden;
}
.tx-actor { position: absolute; text-align: center; width: 74px; }
.tx-actor em { display: block; font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.tx-dot { display: block; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; margin: 0 auto; transition: .3s; }
.tx-a-red { left: 6%; top: 78px; color: var(--sig-bad); }
.tx-a-blue { right: 6%; top: 78px; color: var(--sig-info); }
.tx-a-green { right: 6%; top: 152px; color: var(--sig-good); }
.tx-field { position: absolute; left: 16%; right: 16%; top: 0; bottom: 0; }
.tx-shot {
  position: absolute; left: 0; width: 22px; height: 2px; background: var(--sig-bad); opacity: 0;
}
.tx-shot.s1 { top: 70px; } .tx-shot.s2 { top: 86px; } .tx-shot.s3 { top: 102px; }
.tx-shield {
  position: absolute; right: 6%; top: 56px; width: 3px; height: 60px;
  background: var(--sig-info); opacity: .25; transition: .3s;
}
.tx-patch {
  position: absolute; right: 6%; top: 128px; width: 44px; height: 3px;
  background: var(--sig-good); opacity: 0;
}
/* animation, always running — the loop is the point */
.tx-scene .tx-shot { animation: shot 3.2s linear infinite; }
.tx-scene .s2 { animation-delay: .5s; } .tx-scene .s3 { animation-delay: 1s; }
@keyframes shot { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 62% { left: calc(94% - 22px); opacity: 1; } 72% { left: calc(94% - 22px); opacity: 0; } 100% { opacity: 0; } }
.tx-scene .tx-shield { animation: shield 3.2s ease-in-out infinite; }
@keyframes shield { 0%,55% { opacity: .25; transform: scaleY(1); } 66% { opacity: 1; transform: scaleY(1.15); } 100% { opacity: .25; transform: scaleY(1); } }
.tx-scene .tx-patch { animation: patch 3.2s ease-in-out infinite; }
@keyframes patch { 0%,70% { opacity: 0; width: 0; } 82% { opacity: 1; width: 44px; } 100% { opacity: .35; width: 44px; } }
/* emphasise whichever posture is selected */
.tx-red .tx-a-red .tx-dot, .tx-blue .tx-a-blue .tx-dot, .tx-green .tx-a-green .tx-dot { background: currentColor; transform: scale(1.35); }
.tx-red .tx-a-red em, .tx-blue .tx-a-blue em, .tx-green .tx-a-green em { color: var(--ink); }
.tx-blue .tx-shield { opacity: .8; }
.tx-green .tx-patch { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .tx-scene .tx-shot, .tx-scene .tx-shield, .tx-scene .tx-patch { animation: none; opacity: .6; }
  .tx-shot.s1 { left: 40%; } .tx-shot.s2 { left: 55%; } .tx-shot.s3 { left: 25%; }
}

.tx-meta { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; background: var(--wire); }
.tx-meta > div { background: var(--paper); padding: 16px 18px; }
.tx-line { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.55; max-width: none; }
.tax-list { margin: 0; padding: 0; list-style: none; }
.tax-list li {
  font-family: var(--mono); font-size: 10.5px; color: var(--wire-ink);
  border: 1px dashed var(--wire); padding: 5px 9px; margin-bottom: 5px; display: inline-block; margin-right: 5px;
}
.loop { margin: 0; padding: 0; list-style: none; counter-reset: l; }
.loop li {
  position: relative; font-family: var(--mono); font-size: 11px; color: var(--dim);
  padding: 8px 0 8px 34px; border-bottom: 1px dashed var(--wire);
}
.loop li:last-child { border-bottom: 0; }
.loop li::after {
  content: "↓"; position: absolute; right: 4px; top: 8px; color: var(--wire); font-size: 10px;
}
.loop li:last-child::after { content: "↺"; }
.loop-n { position: absolute; left: 0; top: 8px; color: var(--wire-ink); font-size: 10px; }

/* --- autonomy triad --- */
.triad { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1px; background: var(--wire); }
.triad > div { background: var(--paper); padding: 18px; }
.ax { margin-bottom: 18px; }
.ax:last-child { margin-bottom: 0; }
.ax-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.ax-opts button {
  display: flex; align-items: center; gap: 9px; text-align: left;
  font-family: var(--mono); font-size: 11px; color: var(--wire-ink);
  border: 1px dashed var(--wire); background: none; padding: 8px 11px; cursor: pointer; transition: .18s;
}
.ax-opts button:hover { border-color: var(--wire-ink); color: var(--ink); }
.ax-opts button[aria-pressed="true"] { border-style: solid; border-color: var(--ink); background: var(--wire-fill); color: var(--ink); }
.ax-dot { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; flex: none; }
.ax-opts button[aria-pressed="true"] .ax-dot { background: var(--ink); }
.blast-bar { display: flex; gap: 4px; margin: 10px 0 12px; }
.blast-bar i { flex: 1; height: 18px; border: 1px dashed var(--wire); }
.blast-bar i.on { border-style: solid; }
/* severity is encoded in colour: contained → risky */
.blast-bar[data-band="contained"] i.on { border-color: var(--sig-good); background: var(--sig-good-fill); }
.blast-bar[data-band="moderate"] i.on { border-color: var(--sig-info); background: var(--sig-info-fill); }
.blast-bar[data-band="wide"] i.on { border-color: var(--sig-warn); background: var(--sig-warn-fill); }
.blast-bar[data-band="maximum"] i.on { border-color: var(--sig-bad); background: var(--sig-bad-fill); }
.blast-band { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.blast-band[data-band="contained"] { color: var(--sig-good); }
.blast-band[data-band="moderate"] { color: var(--sig-info); }
.blast-band[data-band="wide"] { color: var(--sig-warn); }
.blast-band[data-band="maximum"] { color: var(--sig-bad); }
.blast-read { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.6; }

/* --- token economics --- */
.tok { background: var(--paper); padding: 18px; }
.tok-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.tok-modes { display: inline-flex; border: 1px dashed var(--wire); }
.tok-modes button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  border: 0; background: none; color: var(--wire-ink); padding: 7px 12px; cursor: pointer;
}
.tok-modes button + button { border-left: 1px dashed var(--wire); }
.tok-modes button[aria-pressed="true"] { background: var(--wire-fill); color: var(--ink); }
.tok input[type="range"] { flex: 1; min-width: 160px; accent-color: var(--ink); }
.tok-row { display: grid; grid-template-columns: 92px 1fr 56px; gap: 12px; align-items: center; margin-bottom: 7px; }
.tok-k { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.tok-track { height: 16px; border: 1px dashed var(--wire); }
.tok-track i { display: block; height: 100%; background: var(--wire-ink); transition: width .35s var(--ease); }
.tok-row .tok-track i { background: var(--sig-good); opacity: .55; }
.tok-row.over .tok-track { border-style: solid; border-color: var(--sig-bad); }
.tok-row.over .tok-track i { background: var(--sig-bad); opacity: 1; }
.tok-row.over .tok-k, .tok-row.over .tok-v { color: var(--sig-bad); }
.tok-v { font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-align: right; }
.tok-out { margin-top: 14px; }
.tok-out p { margin: 0 0 8px; font-size: 13px; color: var(--dim); line-height: 1.6; max-width: none; }
.tok-out b { color: var(--ink); font-weight: 500; }
.tok-note { font-family: var(--mono); font-size: 11px !important; }

/* --- media slots: marked gaps for real screens / video --- */
.slot { margin: 30px 0; }
.slot-box {
  border: 1px dashed var(--wire); background: var(--wire-fill);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 34px 26px; gap: 8px; min-height: 200px;
  background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,.012) 12px 24px);
}
.slot-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wire-ink); border: 1px solid var(--wire); padding: 3px 9px;
}
.slot-box p { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--dim); max-width: 46ch; line-height: 1.6; }
.slot-d { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .06em; }
.slot figcaption {
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  margin-top: 10px; line-height: 1.55; max-width: 62ch;
}
.slot.wide .slot-box { min-height: 300px; }

/* --- session lifecycle stepper --- */
.life { background: var(--paper); }
.life-steps { display: flex; border-bottom: 1px dashed var(--wire); }
.life-steps button {
  flex: 1; position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; border: 0; border-right: 1px dashed var(--wire);
  background: none; color: var(--wire-ink); padding: 14px 6px 12px; cursor: pointer; transition: .18s;
}
.life-steps button:last-child { border-right: 0; }
.life-steps button:hover { color: var(--ink); }
.life-steps button[aria-pressed="true"] { background: var(--wire-fill); color: var(--ink); box-shadow: inset 0 -3px 0 var(--sig-info); }
.life-steps .n { display: block; font-size: 9px; color: var(--faint); margin-bottom: 4px; }
.life-body { display: grid; grid-template-columns: 200px 1fr; gap: 1px; background: var(--wire); }
.life-body > div { background: var(--paper); padding: 20px 18px; }
.life-txt { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.life-p { margin: 0; font-size: 13.5px; color: var(--faint); line-height: 1.55; max-width: none; }
.life-d { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.55; max-width: none;
          border-left: 2px solid var(--sig-info); padding-left: 13px; }

/* per-step mini diagrams — greys + one signal colour */
.life-viz { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; position: relative; min-height: 108px; }
.life-viz span { display: block; }
.lv-merge .lv-in { width: 34px; height: 3px; background: var(--wire-ink); animation: lv-slide 2.6s infinite; }
.lv-merge .lv-in:nth-child(2) { animation-delay: .15s; } .lv-merge .lv-in:nth-child(3) { animation-delay: .3s; }
.lv-merge .lv-in:nth-child(4) { animation-delay: .45s; }
.lv-merge .lv-out { width: 46px; height: 12px; border: 1px solid var(--sig-info); background: var(--sig-info-fill); margin-left: 8px; }
@keyframes lv-slide { 0%,100% { transform: translateX(-6px); opacity: .4; } 50% { transform: translateX(0); opacity: 1; } }
.lv-contract { flex-direction: column; align-items: stretch; padding: 0 22px; }
.lv-contract .lv-row { height: 6px; background: var(--wire-fill); border: 1px solid var(--wire); margin-bottom: 6px; }
.lv-contract .lv-seal { width: 26px; height: 26px; border: 1px solid var(--sig-info); border-radius: 50%; margin: 6px auto 0; animation: lv-pulse 2.4s infinite; }
@keyframes lv-pulse { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
.lv-trace { flex-direction: column; }
.lv-trace .lv-node { width: 11px; height: 11px; border: 1px solid var(--wire); border-radius: 50%; animation: lv-fill 2.8s infinite; }
.lv-trace .lv-node:nth-child(2) { animation-delay: .5s; } .lv-trace .lv-node:nth-child(3) { animation-delay: 1s; }
@keyframes lv-fill { 0%,10% { background: transparent; } 22%,80% { background: var(--sig-info); border-color: var(--sig-info); } 100% { background: transparent; } }
.lv-trace .lv-stop { width: 30px; height: 10px; border: 1px solid var(--sig-bad); margin-top: 6px; }
.lv-meter { flex-direction: column; }
.lv-meter .lv-gauge { width: 120px; height: 14px; border: 1px dashed var(--wire); position: relative; }
.lv-meter .lv-gauge i { position: absolute; inset: 0 auto 0 0; background: var(--sig-good); animation: lv-burn 3.4s infinite; }
@keyframes lv-burn { 0% { width: 10%; background: var(--sig-good); } 70% { width: 82%; background: var(--sig-warn); } 100% { width: 100%; background: var(--sig-bad); } }
.lv-meter .lv-warn { width: 8px; height: 8px; background: var(--sig-bad); border-radius: 50%; margin-top: 10px; animation: lv-blink 3.4s infinite; }
@keyframes lv-blink { 0%,72% { opacity: 0; } 80%,100% { opacity: 1; } }
.lv-fleet { display: grid !important; grid-template-columns: repeat(3, 26px); gap: 6px; }
.lv-fleet .lv-tile { height: 20px; border: 1px solid var(--wire); background: var(--wire-fill); }
.lv-fleet .lv-tile:nth-child(2) { border-color: var(--sig-info); }
.lv-fleet .lv-tile:nth-child(5) { border-color: var(--sig-good); }
.lv-loop { position: relative; height: 96px; width: 96px; }
.lv-loop .lv-arc { position: absolute; inset: 0; border: 1px dashed var(--wire); border-radius: 50%; }
.lv-loop .lv-orb { position: absolute; width: 11px; height: 11px; border: 1px solid var(--sig-good); border-radius: 50%; animation: lv-fill-g 3s infinite; }
.lv-loop .lv-orb:nth-child(1) { left: 43px; top: -5px; }
.lv-loop .lv-orb:nth-child(2) { right: -5px; top: 43px; animation-delay: 1s; }
.lv-loop .lv-orb:nth-child(3) { left: 43px; bottom: -5px; animation-delay: 2s; }
@keyframes lv-fill-g { 0%,12% { background: transparent; } 24%,70% { background: var(--sig-good); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .life-viz * { animation: none !important; } }

/* --- competitive landscape --- */
.ls-tabs { display: flex; border-bottom: 1px dashed var(--wire); }
.ls-tabs button {
  flex: 1; font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  border: 0; border-right: 1px dashed var(--wire); background: none; color: var(--wire-ink);
  padding: 11px 8px; cursor: pointer; transition: .18s;
}
.ls-tabs button:last-child { border-right: 0; }
.ls-tabs button:hover { color: var(--ink); }
.ls-tabs button[aria-pressed="true"] { background: var(--wire-fill); color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.ls-body { padding: 16px 18px 18px; background: var(--paper); }
.ls-lede { margin: 0 0 16px; font-size: 13.5px; color: var(--dim); line-height: 1.6; max-width: 72ch; }
.ls-lede em { color: var(--ink); font-style: italic; }
.ls-rows { display: flex; flex-direction: column; }
.ls-row {
  display: grid; grid-template-columns: 200px 14px 1fr; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px dashed var(--wire);
}
.ls-row:last-child { border-bottom: 0; }
.ls-row[data-mine="true"] { background: var(--wire-fill); padding-left: 8px; margin-left: -8px; }
.ls-v { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.ls-row[data-mine="true"] .ls-v { color: var(--ink); }
.ls-mark { width: 10px; height: 10px; border: 1px solid currentColor; }
.ls-row.sk-good .ls-mark { background: var(--sig-good-fill); }
.ls-row.sk-warn .ls-mark { background: var(--sig-warn-fill); }
.ls-row.sk-bad  .ls-mark { background: var(--sig-bad-fill); }
.ls-row.sk-info .ls-mark { background: var(--sig-info-fill); }
.ls-row.sk-muted { color: var(--faint); }
.ls-row.sk-muted .ls-mark { border-style: dashed; }
.ls-p { font-size: 13px; color: var(--dim); }
.ls-row[data-mine="true"] .ls-p { color: var(--ink); }

/* --- co-training loop --- */
.ct { background: var(--paper); padding: 6px 0 0; }
.ct-beat {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 14px 18px; border-bottom: 1px dashed var(--wire); cursor: pointer;
  opacity: .45; transition: opacity .3s var(--ease), background .3s var(--ease);
}
.ct-beat:last-child { border-bottom: 0; }
.ct-beat.past { opacity: .7; }
.ct-beat.on { opacity: 1; }
.ct-dot { width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; margin-top: 3px; justify-self: center; }
.ct-red   { color: var(--sig-bad); }
.ct-blue  { color: var(--sig-info); }
.ct-green { color: var(--sig-good); }
.ct-beat.on .ct-dot { background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.ct-beat.on.ct-red   { background: linear-gradient(90deg, var(--sig-bad-fill), transparent 62%); }
.ct-beat.on.ct-blue  { background: linear-gradient(90deg, var(--sig-info-fill), transparent 62%); }
.ct-beat.on.ct-green { background: linear-gradient(90deg, var(--sig-good-fill), transparent 62%); }
.ct-txt h5 { margin: 0 0 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink); font-weight: 500; }
.ct-txt p { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.6; max-width: 74ch; }
.ct-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px dashed var(--wire); }
.ct-play {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--ink); background: none; color: var(--ink); padding: 7px 14px; cursor: pointer;
}
.ct-play[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* --- sankey --- */
.sk { display: block; width: 100%; height: auto; padding: 14px 10px;
      background: linear-gradient(180deg, var(--paper) 0%, var(--raised) 100%); }
.sk-link { opacity: .82; transition: opacity .2s; }
.sk-link.dim { opacity: .12; }
.sk-stop { stop-color: currentColor; }
/* gradient stops inherit tone via currentColor on the stop's class */
.sk-stop.sk-good { color: var(--sig-good); } .sk-stop.sk-warn { color: var(--sig-warn); }
.sk-stop.sk-bad  { color: var(--sig-bad); }  .sk-stop.sk-info { color: var(--sig-info); }
.sk-rect { stroke-width: 1; }
.sk-good { color: var(--sig-good); }  .sk-rect.sk-good { fill: var(--sig-good-fill); stroke: var(--sig-good); }
.sk-warn { color: var(--sig-warn); }  .sk-rect.sk-warn { fill: var(--sig-warn-fill); stroke: var(--sig-warn); }
.sk-bad  { color: var(--sig-bad); }   .sk-rect.sk-bad  { fill: var(--sig-bad-fill);  stroke: var(--sig-bad); }
.sk-info { color: var(--sig-info); }  .sk-rect.sk-info { fill: var(--sig-info-fill); stroke: var(--sig-info); }
.sk-lbl { font-family: var(--mono); font-size: 11px; fill: var(--dim); }
.sk-val { font-family: var(--mono); font-size: 12px; }
.sk-t-good { fill: var(--sig-good); } .sk-t-warn { fill: var(--sig-warn); }
.sk-t-bad { fill: var(--sig-bad); }   .sk-t-info { fill: var(--sig-info); }
.sk-node { cursor: default; }
.sk-foot { padding: 12px 16px 14px; border-top: 1px dashed var(--wire); background: var(--paper); }
.sk-cap { margin: 10px 0 0; font-size: 13px; color: var(--dim); line-height: 1.6; max-width: none; }

@media (max-width: 820px) {
  .prov, .tri, .tax-grid, .triad, .life-body { grid-template-columns: 1fr; }
  .sk-lbl { font-size: 15px; } .sk-val { font-size: 16px; }
  /* six steps won't fit one row on a phone — wrap into a grid */
  .life-steps { flex-wrap: wrap; }
  .life-steps button { flex: 1 0 33.33%; border-bottom: 1px dashed var(--wire); }
  .ls-row { grid-template-columns: 1fr 12px; grid-template-areas: "v m" "p p"; row-gap: 4px; }
  .ls-v { grid-area: v; } .ls-mark { grid-area: m; } .ls-p { grid-area: p; }
  .ls-tabs { flex-wrap: wrap; }
  .ls-tabs button { flex: 1 0 50%; border-bottom: 1px dashed var(--wire); }
  .tok-head { flex-direction: column; align-items: stretch; }
  .tok input[type="range"] { width: 100%; }
  .tri-tabs { flex-direction: row; flex-wrap: wrap; }
  .fn-row { grid-template-columns: 96px 1fr 40px; gap: 8px; }
  .tax-tabs { flex-direction: column; }
  .tax-tabs button { border-right: 0; border-bottom: 1px dashed var(--wire); }
}

/* ============================================================
   Chat surface — shared by the docked agent on classic pages and
   the rail in agent mode. One set of rules, driven by --st-*
   tokens; story.css only rebinds those tokens for the dark
   presentation, so the two can never drift apart.
   ============================================================ */
:root {
  --st-ink: var(--ink);
  --st-dim: var(--dim);
  --st-faint: var(--faint);
  --st-line: var(--rule);
  --st-line-soft: var(--rule);
  --st-fill: var(--acc-soft);
  --st-panel: var(--raised);
  --st-accent: var(--acc);
}

.st-rail-head {
  display: flex; align-items: center; gap: 8px; padding: 15px 18px;
  border-bottom: 1px solid var(--st-line-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--st-accent);
}
.st-rail-head i { width: 5px; height: 5px; border-radius: 50%; background: var(--st-accent); animation: pulse 2.2s infinite; }
.st-close {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; background: none; cursor: pointer;
  border: 1px solid var(--st-line); color: var(--st-dim);
  font-size: 11px; text-decoration: none; transition: .18s;
}
.st-close:hover { border-color: var(--st-accent); color: var(--st-accent); }

.r-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; scroll-behavior: smooth; }
/* Sans, not mono: a calm, roomy reading register in step with modern AI chat
   (ChatGPT / Gemini / Claude) while staying native to the site's body font. */
.r-line { margin-bottom: 18px; font-family: var(--sans); font-size: 15px; line-height: 1.6; }
.r-who { display: block; font-size: 11px; font-weight: 500; color: var(--st-faint); margin-bottom: 4px; }
.r-txt { color: var(--st-dim); }
/* Clickable references the agent drops into an answer — legible against the
   body text, clearly a link, without shouting. */
.r-txt a {
  color: var(--st-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--st-accent) 55%, transparent);
  text-underline-offset: 2px;
  transition: color .15s, text-decoration-color .15s;
}
.r-txt a:hover {
  color: var(--st-accent);
  text-decoration-color: var(--st-accent);
}
.r-line.me .r-txt { color: var(--st-ink); }
.r-line.me .r-who { color: var(--st-accent); }
.r-caret { display: inline-block; width: 6px; height: 12px; background: var(--st-accent); vertical-align: -1px; animation: blink 1.1s steps(2) infinite; }

/* Clean list rows — full-width suggestions stacked as a scannable list, each
   led by an arrow, hairline-divided. Calmer than boxed chips and closer to the
   starter prompts in modern AI chat. */
.r-chips { display: flex; flex-direction: column; padding: 0 18px 14px; }
.r-chips button {
  display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: var(--st-dim);
  border: 0; border-top: 1px solid var(--st-line-soft); background: none;
  padding: 11px 2px; cursor: pointer; transition: color .18s;
}
.r-chips button:first-child { border-top: 0; }
.r-chips button::before { content: "\2192"; color: var(--st-faint); transition: color .18s, transform .18s; }
.r-chips button:hover { color: var(--st-accent); }
.r-chips button:hover::before { color: var(--st-accent); transform: translateX(2px); }

.r-input { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--st-line-soft); padding: 12px 18px; }
.r-input span { font-family: var(--sans); color: var(--st-accent); font-size: 15px; }
.r-input input { flex: 1; background: none; border: 0; outline: none; font-family: var(--sans); font-size: 14px; color: var(--st-ink); }
.r-input input::placeholder { color: var(--st-faint); }
.r-input button { background: none; border: 0; color: var(--st-dim); font-family: var(--sans); font-size: 12px; font-weight: 500; cursor: pointer; }
.r-input button:hover { color: var(--st-accent); }

/* Given its own register — accent rule, tinted ground, labelled heading —
   because in plain chat mono it read as more chat and got skimmed past. */
.r-note {
  margin: 12px 14px 4px; padding: 10px 12px 11px;
  background: var(--st-fill);
  border: 1px solid var(--st-line-soft);
  border-left: 2px solid var(--st-accent);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.6;
  color: var(--st-dim); text-wrap: pretty;
}
.r-note b {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-weight: 400; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--st-accent);
}
.r-note i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--st-accent);
  animation: r-pulse 2.4s ease-in-out infinite;
}
@keyframes r-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Info affordance on the note heading — a hover/focus tooltip that names the
   underlying model, so the label itself can stay short. Left-anchored (the
   panel is only 400px wide) so the bubble never clips off the right edge. */
.r-info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 9px; height: 9px; margin-left: 2px; vertical-align: baseline;
  border: 1px solid var(--st-dim); border-radius: 50%; color: var(--st-dim);
  font-style: normal; text-transform: none; letter-spacing: 0; cursor: help;
  transition: border-color .18s, color .18s;
}
.r-info::before { content: "i"; font-family: var(--sans); font-size: 6px; font-weight: 700; line-height: 1; }
.r-info:hover, .r-info:focus-visible { border-color: var(--st-accent); color: var(--st-accent); outline: none; }
.r-tip {
  position: absolute; top: calc(100% + 8px); left: -8px; width: max-content; max-width: 220px;
  padding: 8px 10px; background: var(--st-panel); border: 1px solid var(--st-line-soft);
  color: var(--st-dim); font-family: var(--sans); font-size: 11.5px; font-weight: 400;
  line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: left; text-wrap: pretty;
  opacity: 0; visibility: hidden; transition: opacity .16s; pointer-events: none; z-index: 20;
}
.r-info:hover .r-tip, .r-info:focus-visible .r-tip { opacity: 1; visibility: visible; }

/* ---------- optional project gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 500; display: flex;
  align-items: center; justify-content: center; padding: 6vh 5vw;
  background: var(--paper);
}
.gate-box { max-width: 46ch; }
.gate-k {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--acc); margin-bottom: 18px;
}
.gate-box h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1; letter-spacing: -.02em; margin: 0 0 14px; color: var(--ink);
}
.gate-box p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.gate-form { display: flex; gap: 8px; flex-wrap: wrap; }
.gate-form input {
  flex: 1; min-width: 200px; font-family: var(--mono); font-size: 13px;
  background: var(--raised); border: 1px solid var(--rule); color: var(--ink);
  padding: 11px 13px; outline: none;
}
.gate-form input:focus { border-color: var(--acc); }
.gate-form button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  padding: 11px 20px; cursor: pointer; transition: .18s;
}
.gate-form button:hover { background: var(--acc); border-color: var(--acc); }
.gate-err { margin: 12px 0 0 !important; font-size: 12.5px; color: var(--sig-bad); }
.gate-back {
  display: inline-block; margin-top: 24px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; color: var(--faint);
}
.gate-back:hover { color: var(--acc); }

/* Compose-and-send, rendered inside an agent reply. Uses the chat's own
   tokens so it reads as part of the conversation, not a form bolted on. */
.cmp { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--st-line-soft); }
.cmp-row { display: flex; flex-direction: column; gap: 4px; }
.cmp-row span { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-faint); }
.cmp input, .cmp textarea {
  font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--st-ink);
  background: var(--st-fill); border: 1px solid var(--st-line);
  padding: 7px 9px; outline: none; resize: vertical; width: 100%;
}
.cmp input:focus, .cmp textarea:focus { border-color: var(--st-accent); }
.cmp input::placeholder, .cmp textarea::placeholder { color: var(--st-faint); }
/* Honeypot — off-screen rather than display:none, which some bots skip. */
.cmp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cmp-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-foot button {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--st-ink); color: var(--st-base); border: 1px solid var(--st-ink);
  padding: 8px 14px; cursor: pointer; transition: .18s;
}
.cmp-foot button:hover:not(:disabled) { background: var(--st-accent); border-color: var(--st-accent); }
.cmp-foot button:disabled { opacity: .5; cursor: default; }
.cmp-note { font-size: 11px; line-height: 1.5; color: var(--st-faint); }
.cmp-note.warn { color: var(--sig-warn); }
.cmp-done { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--sig-good); }

.typing-dots span { display: inline-block; width: 4px; height: 4px; background: var(--st-faint); margin-right: 3px; animation: blink 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
.chip-link { color: var(--st-accent); border-bottom: 1px solid var(--st-line); }

@media (prefers-reduced-motion: reduce) {
  .r-note i, .st-rail-head i, .r-caret, .typing-dots span { animation: none; }
}

/* ---------- docked agent (classic pages) ---------- */
/* ---------- section index ----------
   A recruiter arrives wanting one thing — the outcome, the AI work, the
   role — and shouldn't scroll a long case study to find out whether it's
   here. Generated from the page's own sections, so it can't drift out of
   sync with them.

   A sub-bar under the sticky nav rather than a floating panel: it travels
   with the header, it never covers the column, and it can say where you
   currently are as well as where you could go. */
#toc {
  position: sticky; top: var(--nav-h); z-index: 90;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#toc .wrap { position: relative; padding-top: 0; padding-bottom: 0; }

#toc-toggle {
  display: flex; align-items: center; gap: 14px;
  background: none; border: 0; cursor: pointer;
  padding: 11px 0; width: 100%; text-align: left;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.toc-k { flex: none; transition: color .2s; }
#toc-toggle:hover .toc-k, #toc[data-open="true"] .toc-k { color: var(--acc); }
/* The current section, which is the half of this that earns its height. */
.toc-now {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); letter-spacing: .06em;
  padding-left: 14px; border-left: 1px solid var(--rule);
}
#toc-toggle i {
  flex: none; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .24s;
}
#toc[data-open="true"] #toc-toggle i { transform: rotate(225deg) translate(-2px, -2px); }
#toc-toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

/* The panel overlays the page rather than pushing it — opening an index
   shouldn't move the thing you were reading. */
#toc-list {
  position: absolute; left: 0; right: 0; top: 100%;
  list-style: none; margin: 0; padding: 0;
  /* 240px gives four columns in the 1060px column — eight sections land
     as two even rows rather than five-and-three. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--rule);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .24s cubic-bezier(.16, 1, .3, 1), visibility .2s;
}
#toc[data-open="true"] #toc-list { opacity: 1; visibility: visible; transform: none; }
#toc-list a {
  display: flex; align-items: baseline; gap: 10px;
  background: var(--paper); padding: 13px 16px;
  font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: .03em;
  color: var(--dim); text-decoration: none; border-bottom: 0;
  transition: background .16s, color .16s;
}
#toc-list a em { font-style: normal; font-size: 9px; color: var(--faint); letter-spacing: .1em; }
#toc-list a:hover { background: var(--raised); color: var(--ink); }
#toc-list a:hover em { color: var(--acc); }
/* aria-current is the source of truth for "you are here" — the styling
   follows it, so the visual and the assistive-tech story agree. */
#toc-list a[aria-current="true"] { color: var(--acc); background: var(--raised); }
#toc-list a[aria-current="true"] em { color: var(--acc); }
#toc-list a:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

@media (max-width: 700px) {
  #toc-toggle { gap: 10px; font-size: 9px; padding: 10px 0; }
  .toc-now { padding-left: 10px; }
  #toc-list { grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #toc-list, #toc-toggle i { transition: none; }
}

/* Anchor targets have to clear both sticky bars, not just the nav. */
.cs-section { scroll-margin-top: calc(var(--nav-h) + 52px); }

/* A single line that carries a section's argument. Not a quote — nobody
   said it — so it gets weight without quotation furniture. */
.cs-section .pull {
  font-family: var(--serif); font-size: 21px; line-height: 1.45;
  color: var(--ink); max-width: 30ch;
  margin: 30px 0; padding-left: 20px;
  border-left: 2px solid var(--acc);
}
@media (max-width: 700px) { .cs-section .pull { font-size: 18px; } }

/* ---------- progressive disclosure ----------
   The case study has two audiences with opposite needs: a recruiter
   scanning for whether the work is relevant, and a hiring manager who
   wants the reasoning. Writing for both produced a page that served
   neither.

   So the argument stays inline and the evidence for it collapses. The
   summary has to say what's inside rather than "read more" — otherwise
   opening it is a gamble, and nobody gambles on the fifth one. */
.more {
  margin: 20px 0 0; border-top: 1px solid var(--rule);
}
.more + .more { margin-top: 0; }
.more > summary {
  display: flex; align-items: baseline; gap: 11px; cursor: pointer;
  padding: 13px 0; list-style: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  color: var(--dim); transition: color .18s;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { color: var(--acc); }
.more > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
/* The caret is the affordance, so it has to read as one at a glance and
   has to move when the state changes. */
.more > summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(-45deg); transition: transform .22s;
}
.more[open] > summary::before { transform: rotate(45deg); }
.more > summary b {
  font-weight: 400; color: var(--ink);
}
.more[open] > summary { color: var(--acc); }
.more[open] > summary b { color: var(--acc); }
.more-b { padding: 0 0 18px 17px; }
.more-b > *:first-child { margin-top: 0; }
.more-b > *:last-child { margin-bottom: 0; }
.more-b p, .more-b li { max-width: 68ch; }
@media (prefers-reduced-motion: reduce) {
  .more > summary::before { transition: none; }
}

#agent-launcher {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  border: 0; cursor: pointer;
}
#agent-launcher span.lbl {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 12px 18px; transition: background .2s;
}
#agent-launcher:hover span.lbl { background: var(--acc); }
#agent-launcher .pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); animation: pulse 2.2s infinite; }
#agent-launcher:hover .pulse { background: var(--paper); }

/* Docked to the right edge, full height — the same shape as agent mode's
   rail, so switching between them feels like the same assistant. */
#agent-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: var(--agent-w); max-width: 100vw;
  background: var(--raised); border-left: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .42s cubic-bezier(.16,1,.3,1), visibility .42s;
}
#agent-panel.open { transform: none; visibility: visible; }

/* The chat sits beside the page, not on top of it — the page gives up the
   width rather than being covered, so you can read and ask at once. */
:root { --agent-w: 400px; }
body { transition: padding-right .42s cubic-bezier(.16,1,.3,1); }
body.agent-open { padding-right: var(--agent-w); }
body.agent-open #agent-launcher { opacity: 0; pointer-events: none; }
#agent-launcher { transition: opacity .25s, background .2s; }

/* Below this width there isn't room to sit beside anything, so it goes
   back to covering — with a scrim, which is honest about doing so. */
@media (max-width: 900px) {
  :root { --agent-w: min(400px, 100vw); }
  body.agent-open { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #agent-panel, body { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .wrap { padding: 0 24px; }
  .mast { grid-template-columns: 1fr; gap: 28px; padding: 48px 0 40px; }
  .mast-meta { text-align: left; white-space: normal; }
  /* Two columns — number, then everything else — with the rows placed
     explicitly. Without this, grid auto-placement dropped the description
     into the 34px number column and crushed it to a sliver. Title sits
     beside the number; description and metrics stack under the title. */
  .project-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px 14px; padding: 24px 0;
  }
  .project-card::before { grid-column: 1; grid-row: 1; align-self: baseline; }
  .project-card .row1 { grid-column: 2; grid-row: 1; }
  .project-card .desc { grid-column: 2; grid-row: 2; }
  .project-card .meta-row { grid-column: 2; grid-row: 3; text-align: left; margin-top: 2px; }
  /* Metrics read as an inline run on narrow screens rather than three
     stacked lines eating vertical space. */
  .project-card .meta-row span { display: inline; }
  .project-card .meta-row span + span::before { content: " · "; color: var(--faint); }
  .project-card h3 { font-size: 26px; }
  .tl-item { grid-template-columns: 1fr; gap: 8px; }
  #canvas { height: 440px; }
  .nav .wrap { flex-wrap: wrap; gap: 10px; }
}