/* LoRA presentation — task-1553 rework.
   World: black keynote stage + paper evidence plates; steel = frozen base, orange = the adapter.
   Scroll grammar: pinned scenes scrubbed by scroll (script.js drives --p / data-phase). */

/* ---------- fonts (vendored, offline-safe) ---------- */
@font-face { font-family: 'Manrope'; src: url('/articles/lora-training/assets/manrope-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/articles/lora-training/assets/manrope-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/articles/lora-training/assets/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --bg-dark: #05060a;
  --bg-dark-2: #0a0c13;
  --ink-dark: #f2f3f6;          /* text on dark */
  --muted-dark: #9aa3b0;
  --hairline-dark: rgba(255,255,255,.10);
  --accent-dark: #ff5c2e;       /* the adapter, on black */
  --steel: #8ea6bf;             /* the frozen base */
  --cell: #131826;
  --cell-lit: #1d2537;

  --bg-light: #f5f5f7;
  --card-light: #ffffff;
  --ink-light: #0d1017;
  --muted-light: #5c6470;
  --hairline-light: #e2e3e8;
  --accent-light: #e8491f;      /* the adapter, on paper (validated; large text & marks only) */
  --accent-light-text: #c43a10; /* the adapter, on paper, at body/label sizes (4.5:1) */
  --before-light: #4a7db8;      /* the baseline, on paper (validated) */
  --before-light-text: #38699e; /* baseline at body/label sizes */

  --sans: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --topbar-h: 3rem;
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg-dark);
  color: var(--ink-dark);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent-dark); color: #fff; }
.stage--light ::selection { background: var(--accent-light); color: #fff; }
html { scrollbar-color: #2a2f3c var(--bg-dark); }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--bg-dark); }
body::-webkit-scrollbar-thumb { background: #2a2f3c; border-radius: 5px; }
body::-webkit-scrollbar-thumb:hover { background: #3a4152; }
:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; border-radius: 2px; }
.stage--light :focus-visible { outline-color: var(--accent-light); }
b, strong { font-weight: 700; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
em { font-style: normal; }
.stage--dark em, .pin em { color: var(--accent-dark); }
.stage--light em { color: var(--accent-light-text); font-style: italic; }

.skip-link {
  position: fixed; top: -4rem; left: 1rem; z-index: 60;
  background: var(--accent-dark); color: #fff; padding: .6rem 1rem;
  border-radius: .4rem; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: .6rem; }

/* ---------- topbar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topbar-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--pad);
  background: color-mix(in srgb, var(--bg-dark) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-dark);
}
.topbar__brand {
  color: var(--ink-dark); text-decoration: none; font-weight: 700;
  letter-spacing: -0.02em; font-size: 1.05rem; display: flex; align-items: baseline; gap: .6rem;
}
.topbar__brand span {
  font-family: var(--mono); font-weight: 500; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-dark);
}
.topbar__nav { margin-left: auto; display: flex; gap: 1.6rem; }
.topbar__nav a {
  color: var(--muted-dark); text-decoration: none; font-size: .82rem; font-weight: 400;
  transition: color .2s;
}
.topbar__nav a:hover, .topbar__nav a.active { color: var(--ink-dark); }
.topbar__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent;
}
.topbar__progress span {
  display: block; height: 100%; width: 0; background: var(--accent-dark);
}

/* ---------- scenes ---------- */
.stage--dark { background: var(--bg-dark); color: var(--ink-dark); }
.stage--light { background: var(--bg-light); color: var(--ink-light); }

.pin { position: relative; }
.pin--hero { height: 340vh; }
.pin--tokens { height: 300vh; }
.pin__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* ---------- hero ---------- */
.hero-copy { text-align: center; max-width: 60rem; padding: 0 var(--pad); z-index: 2; }
.hero-copy h1 { font-size: clamp(2.9rem, 7.5vw, 6rem); }
.hero-copy p {
  margin: 1.4rem auto 0; max-width: 44rem; font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--muted-dark);
}
.hero-copy p em { font-style: normal; font-weight: 700; }

.wall {
  position: relative; margin-top: 2.6rem; order: 2;
  width: min(72vw, 68rem); height: min(34vh, 21rem);
  display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px;
  z-index: 1;
}
.wall i {
  background: var(--cell); border-radius: 2px; opacity: 0; transform: scale(.6);
  transition: opacity .5s ease-out, transform .5s ease-out, background .8s;
  transition-delay: calc(var(--d) * .9s);
}
.wall.built i { opacity: 1; transform: scale(1); }
.wall.frozen i { background: color-mix(in srgb, var(--steel) 26%, var(--cell)); transition-delay: calc(var(--d) * .35s); }
.wall__tag {
  position: absolute; top: -1.9rem; left: 0;
  font-family: var(--mono); font-weight: 500; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel); opacity: 0; transition: opacity .5s;
}
.wall.built .wall__tag { opacity: 1; }
.wall__frozen {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.92); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: color-mix(in srgb, var(--bg-dark) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--steel) 45%, transparent);
  border-radius: .8rem; padding: .8rem 1.6rem; white-space: nowrap;
  opacity: 0; transition: opacity .6s, transform .6s;
}
.wall__frozen b {
  font-family: var(--mono); font-weight: 500; letter-spacing: .38em; text-indent: .38em;
  font-size: clamp(.9rem, 1.4vw, 1.1rem); color: var(--steel); text-transform: uppercase;
}
.wall__frozen span { font-size: .78rem; color: var(--muted-dark); }
.wall.frozen .wall__frozen { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.chip {
  position: absolute; right: calc(50% - min(36vw, 34rem) - 1rem); top: 50%;
  z-index: 3;
  background: var(--accent-dark); color: #16070a;
  border-radius: .7rem; padding: .9rem 1.2rem; text-align: left;
  box-shadow: 0 1rem 2.4rem rgba(255, 92, 46, .28);
  transform: translate(70vw, 1rem); opacity: 0;
  display: flex; flex-direction: column; gap: .15rem; max-width: 15rem;
}
.chip b { font-size: 1rem; letter-spacing: -0.02em; color: #1a0a04; }
.chip span { font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .04em; color: #3d1508; }

.hero-stats {
  order: 3; margin-top: 2.2rem; display: flex; gap: clamp(1.5rem, 5vw, 4.5rem);
  opacity: 0; transform: translateY(1rem); transition: opacity .6s, transform .6s;
}
.hero-stats.on { opacity: 1; transform: none; }
.hero-stats div { text-align: center; }
.hero-stats dt {
  font-size: .74rem; color: var(--muted-dark); order: 2;
}
.hero-stats dd {
  font-family: var(--mono); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  color: var(--ink-dark); margin-bottom: .2rem;
}
.scroll-cue {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  color: var(--muted-dark); text-decoration: none; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  transition: opacity .4s;
}
.scroll-cue.off { opacity: 0; pointer-events: none; }
.scroll-cue i {
  width: 1px; height: 2.4rem; background: linear-gradient(var(--muted-dark), transparent);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* ---------- mechanism ---------- */
.how { padding: clamp(5rem, 12vh, 9rem) var(--pad) 0; }
.how__head { max-width: 72rem; margin: 0 auto 2rem; }
.how__head h2, .proof__head h2, .loop__head h2, .recipe__head h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); }
.how__head p, .loop__head p, .recipe__head p {
  margin-top: 1rem; color: var(--muted-dark); font-size: 1.05rem; max-width: 40rem;
}
.how__grid {
  max-width: 72rem; margin: 0 auto; display: grid;
  grid-template-columns: minmax(19rem, 27rem) 1fr; gap: clamp(2rem, 5vw, 5rem);
}
.how__steps { padding-bottom: 32vh; }
.step {
  min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
  opacity: .25; transition: opacity .45s;
}
.step.active { opacity: 1; }
.step h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin-bottom: .9rem; }
.step p { color: var(--muted-dark); font-size: 1rem; }
.step p b { color: var(--ink-dark); }
.step.active p em { color: var(--accent-dark); }
.how__viz { position: relative; }
.how__sticky {
  position: sticky; top: calc(var(--topbar-h) + 2vh);
  height: calc(96vh - var(--topbar-h));
  display: flex; align-items: center;
}
#mech { width: 100%; max-height: 100%; }

/* diagram voice */
#mech text { font-family: var(--mono); font-weight: 500; fill: var(--muted-dark); }
#mech .m-lab { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-dark); }
#mech .m-sub { font-size: 13px; }
#mech .m-tiny { font-size: 12px; }
#mech .m-big { font-size: 28px; fill: var(--ink-dark); letter-spacing: -0.02em; }
#mech .m-warn { font-size: 14px; fill: #ff8d70; letter-spacing: .06em; }
#mech .m-plus { font-size: 24px; fill: #fff; }
#mech .m-frozen-lab { font-size: 13px; letter-spacing: .3em; fill: var(--steel); }
#mech .m-frozen-badge { fill: color-mix(in srgb, var(--bg-dark) 88%, transparent); stroke: color-mix(in srgb, var(--steel) 45%, transparent); }
#mech .m-corr { fill: var(--accent-dark); }
#mech .m-input rect, #mech .m-output rect { fill: #202636; stroke: #39435a; }
#mech .m-w-box { fill: #0d111c; stroke: #2b3347; stroke-width: 1.4; }
#mech .m-w-grid line { stroke: #222a3d; stroke-width: 1; }
#mech .m-frozen-veil { fill: rgba(142, 166, 191, .10); stroke: var(--steel); stroke-dasharray: 5 5; }
#mech .m-a rect, #mech .m-b rect { fill: rgba(255, 92, 46, .14); stroke: var(--accent-dark); stroke-width: 1.6; }
#mech .m-node-lab { font-size: 20px; fill: var(--accent-dark); }
#mech .m-sum circle { fill: #151a28; stroke: var(--ink-dark); stroke-width: 1.4; }
#mech .m-arrow { fill: none; stroke-width: 1.6; }
#mech .m-arrow-main { stroke: #48536d; }
#mech .m-arrow-detour { stroke: var(--accent-dark); }

/* staged reveal: groups fade with the active step
   (keep specificity below the .how[data-step] rules — no #mech prefix here) */
.how .m-w-frozen, .how .m-detour, .how .m-sum, .how .m-output { opacity: 0; transition: opacity .55s ease-out; }
.how .m-fullft { opacity: 0; transition: opacity .55s ease-out; }
.how[data-step="2"] .m-fullft { opacity: 1; }
.how[data-step="2"] .m-w-grid { animation: shimmer 1.6s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.how[data-step="3"] .m-w-frozen, .how[data-step="4"] .m-w-frozen,
.how[data-step="3"] .m-detour,  .how[data-step="4"] .m-detour,
.how[data-step="3"] .m-sum,     .how[data-step="4"] .m-sum,
.how[data-step="3"] .m-output,  .how[data-step="4"] .m-output { opacity: 1; }
.how[data-step="4"] .m-arrow-detour { stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(255,92,46,.55)); }
.how[data-step="4"] .m-output rect { stroke: var(--accent-dark); }

/* ---------- proof (light) ---------- */
.proof { padding: clamp(5rem, 12vh, 9rem) var(--pad); }
.proof__head { max-width: 72rem; margin: 0 auto 3.5rem; }
.proof__head p { margin-top: 1.1rem; color: var(--muted-light); font-size: 1.05rem; max-width: 46rem; }
.k-before { font-family: var(--mono); font-weight: 500; font-size: .88em; color: var(--before-light-text); }
.k-after { font-family: var(--mono); font-weight: 500; font-size: .88em; color: var(--accent-light-text); }

.example { max-width: 72rem; margin: 0 auto 4rem; }
.example__request {
  font-size: 1.06rem; max-width: 54rem; margin-bottom: 1.6rem; color: var(--ink-light);
}
.example__request span {
  display: block; font-family: var(--mono); font-weight: 500; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light);
  margin-bottom: .45rem;
}
.example__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.answer {
  background: var(--card-light); border: 1px solid var(--hairline-light);
  border-radius: 1rem; padding: 1.5rem 1.6rem 1.4rem;
  box-shadow: 0 .6rem 1.6rem rgba(13, 16, 23, .05);
}
.answer header {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--hairline-light);
}
.answer h3 { font-size: 1.05rem; letter-spacing: -.02em; }
.answer--before h3 { color: var(--before-light-text); }
.answer--after h3 { color: var(--accent-light-text); }
.answer__score { font-family: var(--mono); font-weight: 500; font-size: 1.7rem; line-height: 1; }
.answer--before .answer__score { color: var(--before-light); }
.answer--after .answer__score { color: var(--accent-light); }
.answer__score span { font-size: .8rem; color: var(--muted-light); }
.answer__body { font-size: .95rem; color: #2a2f3a; }
.answer__body mark { border-radius: .25rem; padding: .05rem .2rem; background: transparent; }
.answer__body mark.bad {
  color: #1f3a5c; background: rgba(74, 125, 184, .16);
  text-decoration: underline wavy rgba(74,125,184,.65) 1px; text-underline-offset: 3px;
}
.answer__body mark.good { color: #7c1f04; background: rgba(232, 73, 31, .12); font-weight: 700; }
.answer__note {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--hairline-light);
  font-size: .88rem; color: var(--muted-light);
}
.answer__note b { color: var(--ink-light); }
.example__foot {
  margin-top: .9rem; font-family: var(--mono); font-weight: 500; font-size: .7rem;
  letter-spacing: .05em; color: var(--muted-light);
}

/* the score board */
.board { max-width: 72rem; margin: 5.5rem auto 0; }
.board h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.board__method { margin: .8rem 0 2rem; color: var(--muted-light); max-width: 46rem; font-size: .98rem; }
.chart { border-top: 1px solid var(--hairline-light); }
.chart__legend {
  display: flex; gap: 1.6rem; padding: .9rem 0; font-size: .8rem; color: var(--muted-light);
}
.chart__legend span { display: inline-flex; align-items: center; gap: .45rem; }
.sw { width: 14px; height: 8px; border-radius: 3px; display: inline-block; }
.sw--before { background: var(--before-light); }
.sw--after { background: var(--accent-light); }
.sw--v8 { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-light); }
.crow {
  display: grid; grid-template-columns: 13rem 1fr 8.5rem; align-items: center; gap: 1.2rem;
  padding: .95rem 0; border-bottom: 1px solid var(--hairline-light);
}
.crow__label { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.crow__label small { display: block; font-weight: 400; font-size: .75rem; color: var(--muted-light); }
.crow__bars { position: relative; height: 26px; background: #ececef; border-radius: 5px; overflow: visible; }
.crow__bars .bar {
  position: absolute; left: 0; height: 10px; border-radius: 3px;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.crow.on .bar { transform: scaleX(1); }
.bar--before { top: 2px; background: var(--before-light); width: var(--wb, 0%); }
.bar--after { bottom: 2px; background: var(--accent-light); width: var(--wa, 0%); }
.dot-v8 {
  position: absolute; bottom: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-light); border: 2px solid var(--bg-light);
  transform: translateX(-50%); left: var(--wv, 0%); opacity: 0; transition: opacity .4s .9s;
}
.crow.on .dot-v8 { opacity: 1; }
.crow__val { font-family: var(--mono); font-weight: 500; font-size: .86rem; text-align: right; color: var(--muted-light); }
.crow__val b { color: var(--accent-light-text); font-size: 1.05rem; }

.board__tiles {
  margin-top: 2.2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.tile { border-top: 2px solid var(--ink-light); padding-top: .9rem; }
.tile b { font-family: var(--mono); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); display: block; }
.tile b span { font-size: inherit; }
.tile > span { font-size: .85rem; color: var(--muted-light); display: block; margin-top: .3rem; max-width: 16rem; }
.board__foot {
  margin-top: 2.4rem; font-size: .95rem; color: var(--muted-light); max-width: 52rem;
}

/* ---------- loop (dark) ---------- */
.loop { padding: clamp(5rem, 12vh, 9rem) var(--pad); }
.loop__head { max-width: 72rem; margin: 0 auto 3rem; }
.loop__ring { max-width: 72rem; margin: 0 auto; position: relative; }
.loopline {
  list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
  counter-reset: node;
}
.loopnode {
  position: relative; padding: 1.1rem 0 0; border-top: 1px solid var(--hairline-dark);
}
.loopnode::before {
  content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--steel);
}
.loopnode[data-n="author"]::before, .loopnode[data-n="train"]::before { background: var(--accent-dark); }
.ln-arrow {
  position: absolute; top: -0.95rem; right: -0.85rem; width: 22px; height: 10px;
  fill: none; stroke: var(--muted-dark); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.loopline__return {
  margin-top: 1.6rem; display: flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .03em;
  color: var(--accent-dark);
}
.ln-return {
  flex: 0 0 auto; width: 30px; height: 15px;
  fill: none; stroke: var(--accent-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.loopnode b { display: block; font-size: 1rem; letter-spacing: -.01em; margin-bottom: .3rem; }
.loopnode span { font-size: .8rem; color: var(--muted-dark); }
.loop__facts {
  max-width: 72rem; margin: 3rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.loop__facts div { border-top: 2px solid var(--ink-dark); padding-top: .8rem; }
.loop__facts b { font-family: var(--mono); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); display: block; }
.loop__facts span { color: var(--muted-dark); font-size: .85rem; }
.loop__rounds { max-width: 72rem; margin: 4rem auto 0; }
.loop__rounds h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 1.4rem; }
.loop__rounds ul { list-style: none; max-width: 56rem; }
.loop__rounds li {
  padding: 1.05rem 0; border-top: 1px solid var(--hairline-dark);
  color: var(--muted-dark); font-size: .98rem;
}
.loop__rounds li b { color: var(--ink-dark); }
.loop__rounds li em { color: var(--accent-dark); }
.loop__boundary {
  max-width: 72rem; margin: 3.2rem auto 0; padding: 1.3rem 1.5rem;
  border: 1px solid var(--hairline-dark); border-radius: .8rem;
  color: var(--muted-dark); font-size: .95rem; background: var(--bg-dark-2);
}
.loop__boundary b { color: var(--ink-dark); }

/* ---------- tokens (pinned, dark) ---------- */
.tok {
  width: min(100%, 76rem); padding: calc(var(--topbar-h) + 1rem) var(--pad) 1rem;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.tok__copy h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); }
.tok__copy > p { margin-top: 1.2rem; color: var(--muted-dark); font-size: 1.05rem; max-width: 34rem; }
.tok__copy > p b { color: var(--ink-dark); }
.tok__stats { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.tok__stats div { border-top: 1px solid var(--hairline-dark); padding-top: .8rem; }
.tok__stats dd { font-family: var(--mono); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.tok__stats dt { color: var(--muted-dark); font-size: .85rem; order: 2; }
.tok__caveat { margin-top: 1.8rem; font-size: .85rem; color: var(--muted-dark); max-width: 32rem; }
.tok__viz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ctx {
  width: min(100%, 21rem); height: min(62vh, 30rem);
  border: 1px solid #39435a; border-radius: 1rem; overflow: hidden;
  display: flex; flex-direction: column; position: relative; background: var(--bg-dark-2);
}
.ctx__cap {
  position: absolute; top: .6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-weight: 500; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-dark); z-index: 2;
}
.ctx__sys {
  flex: 0 0 12%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .4rem;
  background: #182032; color: var(--muted-dark); font-family: var(--mono); font-weight: 500; font-size: .68rem;
  border-bottom: 2px solid var(--bg-dark);
}
.ctx__slab {
  flex: 0 0 58%; min-height: 2.4rem; position: relative; overflow: hidden;
  background: repeating-linear-gradient(-45deg, rgba(255,92,46,.34) 0 10px, rgba(255,92,46,.18) 10px 20px);
  border-bottom: 2px solid var(--bg-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  text-align: center;
}
.ctx__slab b { font-size: .95rem; color: #ffe4da; transition: opacity .3s; }
.ctx__slab span { font-family: var(--mono); font-weight: 500; font-size: .64rem; color: #ffbfa8; padding: 0 .8rem; transition: opacity .3s; }
.ctx__slab.drained b, .ctx__slab.drained span { opacity: 0; }
.ctx__free {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; padding: .8rem;
}
.ctx__free em { font-size: .8rem; color: var(--muted-dark); }
.ctx__free i {
  font-style: normal; font-family: var(--mono); font-weight: 500; font-size: .7rem;
  color: var(--steel); border: 1px solid #2b3347; border-radius: 99px; padding: .28rem .8rem;
  opacity: 0; transform: translateY(.5rem); transition: opacity .4s, transform .4s;
}
.ctx__free i.on { opacity: 1; transform: none; }
.ctx__chip {
  display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center;
  background: var(--accent-dark); border-radius: .7rem; padding: .7rem 1.1rem;
  box-shadow: 0 .9rem 2rem rgba(255,92,46,.25);
  opacity: 0; transform: translateY(-.6rem) scale(.92); transition: opacity .5s, transform .5s;
}
.ctx__chip.on { opacity: 1; transform: none; }
.ctx__chip b { color: #1a0a04; font-size: .92rem; }
.ctx__chip span { font-family: var(--mono); font-weight: 500; font-size: .64rem; color: #3d1508; }

/* ---------- recipe (light) ---------- */
.recipe { padding: clamp(5rem, 12vh, 9rem) var(--pad); }
.recipe__head { max-width: 72rem; margin: 0 auto 2.8rem; }
.recipe__head p { color: var(--muted-light); }
.params { max-width: 72rem; margin: 0 auto; border-top: 1px solid var(--hairline-light); }
.param {
  display: grid; grid-template-columns: minmax(16rem, 24rem) 1fr; gap: 1.5rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--hairline-light); align-items: baseline;
}
.param dt { font-family: var(--mono); font-weight: 500; font-size: .95rem; color: var(--muted-light); }
.param dt b {
  display: block; font-family: var(--mono); font-size: 1.45rem; color: var(--ink-light);
  margin-top: .1rem; letter-spacing: -.01em;
}
.param dd { color: #3a4150; font-size: .97rem; max-width: 44rem; }
.param dd em { font-style: italic; }
.param dd code { font-family: var(--mono); font-size: .85em; background: #ecedf1; padding: .05rem .3rem; border-radius: .3rem; }

/* ---------- close ---------- */
.close {
  min-height: 92vh; display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--pad) 2rem; position: relative;
}
.close__copy { max-width: 72rem; margin: auto; text-align: center; }
.close__copy h2 { font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
.close__copy > p { margin: 1.4rem auto 0; max-width: 42rem; color: var(--muted-dark); font-size: 1.08rem; }
.close__formula {
  margin: 3rem auto 0; font-family: var(--mono); font-weight: 500;
  font-size: clamp(.8rem, 1.7vw, 1rem); color: var(--muted-dark);
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center;
}
.close__formula span { border: 1px solid var(--hairline-dark); border-radius: 99px; padding: .4rem 1rem; }
.close__formula b { color: var(--accent-dark); font-weight: 500; }
.close__eq { font-style: normal; white-space: nowrap; }
.close__foot {
  margin: 0 auto; max-width: 72rem; width: 100%; padding-top: 3rem;
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-family: var(--mono); font-weight: 500; font-size: .68rem; letter-spacing: .06em;
  color: var(--muted-dark);
}

/* ---------- reveals ---------- */
.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.on { opacity: 1; transform: none; }

/* ---------- reduced motion / static mode ---------- */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.no-motion .pin--hero, .no-motion .pin--tokens { height: auto; }
.no-motion .pin__stage { position: static; height: auto; min-height: 100vh; padding: 5rem 0; }
.no-motion .wall i, .no-motion .reveal, .no-motion .hero-stats,
.no-motion .ctx__free i, .no-motion .ctx__chip, .no-motion .dot-v8 { transition: none; }
.no-motion .wall i { opacity: 1; transform: none; background: color-mix(in srgb, var(--steel) 26%, var(--cell)); }
.no-motion .wall .wall__tag { opacity: 1; }
.no-motion .wall__frozen { opacity: 1; transform: translate(-50%, -50%); }
.no-motion .reveal, .no-motion .hero-stats { opacity: 1; transform: none; }
.no-motion .chip { transform: none !important; opacity: 1; position: static; order: 3; margin: 1.5rem 0 0; }
.no-motion .scroll-cue i { animation: none; }
.no-motion .step { opacity: 1; min-height: 0; padding: 1.5rem 0; }
.no-motion .how__sticky { position: static; height: auto; }
.no-motion .how .m-w-frozen, .no-motion .how .m-detour, .no-motion .how .m-sum,
.no-motion .how .m-output, .no-motion .how .m-fullft { opacity: 1; }
.no-motion .ctx__free i, .no-motion .ctx__chip { opacity: 1; transform: none; }
.no-motion .ctx__slab { flex-basis: 8% !important; }
.no-motion .crow__bars .bar { transition: none; transform: scaleX(1); }
.no-motion .dot-v8 { transition: none; opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .topbar__nav { display: none; }
  .pin--hero { height: 300vh; }
  .pin__stage { padding: calc(var(--topbar-h) + .4rem) 0 .4rem; }
  .hero-copy h1 { font-size: clamp(2.1rem, 9.5vw, 2.7rem); }
  .hero-copy p { font-size: .95rem; margin-top: 1rem; }
  .wall { width: 88vw; grid-template-columns: repeat(18, 1fr); height: 21vh; margin-top: 2.2rem; }
  .chip { position: static; order: 3; margin: 1rem 0 0; max-width: 15rem; padding: .7rem 1rem; }
  .hero-stats { order: 4; margin-top: 1rem; gap: 1rem 1.4rem; flex-wrap: wrap; justify-content: center; }
  .how__grid { display: flex; flex-direction: column; }
  .how__viz { display: contents; }
  .how__sticky { order: -1; position: sticky; top: var(--topbar-h); height: auto; background: var(--bg-dark); z-index: 5; padding: .5rem 0; }
  #mech { max-height: 46vh; }
  .how__steps { padding-bottom: 10vh; }
  .step { min-height: 58vh; }
  #mech .m-sub, #mech .m-tiny { display: none; }
  #mech .m-lab { font-size: 24px; }
  #mech .m-big { font-size: 40px; }
  #mech .m-node-lab { font-size: 30px; }
  #mech .m-warn { font-size: 22px; }
  #mech .m-frozen-lab { font-size: 16px; }
  .example__cols { grid-template-columns: 1fr; }
  .crow { grid-template-columns: 1fr; gap: .4rem; padding: 1.1rem 0; }
  .crow__val { text-align: left; }
  .board__tiles { grid-template-columns: 1fr 1fr; }
  .loopline { grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
  .loopnode .ln-arrow { display: none; }
  .loop__facts { grid-template-columns: 1fr 1fr; }
  .tok { grid-template-columns: 1fr; gap: 2rem; padding-top: calc(var(--topbar-h) + .5rem); }
  .pin--tokens { height: 260vh; }
  .ctx { height: 44vh; }
  .ctx__sys { flex-basis: 16%; }
  .param { grid-template-columns: 1fr; gap: .4rem; }
  .close__foot { flex-direction: column; gap: .5rem; }
}


/* ---------- home link (added when the article moved to jasonmcaffee.com/articles) ---------- */
.topbar__home {
  display: inline-flex; align-items: center; gap: .4rem;
  padding-right: 1.1rem; border-right: 1px solid var(--hairline-dark);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-dark); text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.topbar__home:hover { color: var(--ink-dark); }
.topbar__home svg { width: .8rem; flex: none; }
@media (max-width: 720px) {
  .topbar { gap: 1rem; }
  .topbar__home span { display: none; }
  .topbar__home { padding-right: .7rem; }
}