/* ==========================================================================
   Rev Recovery Systems — design system
   Direction: instrument, not brochure.
   Three type registers: assert (grotesk) / narrate (serif) / measure (mono).
   One accent, used only to mark difference.
   ========================================================================== */

:root{
  /* ---- colour ---- */
  --paper:      #F3F4F2;   /* cool neutral ground */
  --surface:    #FBFBFA;   /* raised planes, sparingly */
  --ink:        #14181A;   /* near-black, biased toward the accent */
  --ink-2:      #3E4548;   /* body prose */
  --muted:      #5E6568;   /* labels, secondary */
  --rule:       #DEE2DE;   /* hairlines */
  --rule-soft:  #E9ECE8;
  --arrow:      #838A86;   /* decorative connectors, still visible */
  --ordinal:    #656C6F;   /* section numbering, meets AA */
  --signal:     #0E5A52;   /* the upside, the delta, the unknown */
  --signal-soft:#E2EDEA;
  --signal-lift:#7FD6C7;   /* signal, lifted for the dark surface only */
  --baseline:   #68706E;   /* the current state — muted on purpose */
  --on-dark:    #EDEFEC;
  --on-dark-2:  #AFB7B4;

  /* ---- type ---- */
  --sans:  "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- rhythm ---- */
  --gap:    clamp(20px, 5vw, 48px);
  --bay:    clamp(76px, 11vw, 148px);   /* section padding */
  --measure: 64ch;
  --shell:  1180px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block }

::selection{ background:var(--signal); color:var(--paper) }

/* scrollbars are part of the page, not the browser's business */
html{ scrollbar-color:var(--arrow) transparent; scrollbar-width:thin }
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{
  background:var(--arrow); border-radius:99px;
  border:3px solid var(--paper); background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:padding-box; border:3px solid var(--paper) }

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:1px;
}

.shell{ max-width:var(--shell); margin:0 auto; padding:0 var(--gap) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--on-dark);
  padding:16px 20px; font:500 13px/1 var(--sans);
}
.skip:focus{ left:12px; top:12px }

/* ---------- shared type ---------- */
/* ANNOTATION — sans, sentence case. Names a thing; never a quantity.
   MEASURE (mono, below) is reserved for numbers and their readout labels. */
.label{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.005em;
  color:var(--muted);
  margin:0;
}

.h-xl{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(2.3rem, 5.6vw, 4rem);
  line-height:1.02;
  letter-spacing:-.042em;
  margin:0;
  text-wrap:balance;
}
.h-l{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(1.7rem, 3.9vw, 2.55rem);
  line-height:1.1;
  letter-spacing:-.032em;
  margin:0;
  text-wrap:balance;
}
.h-m{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(1.15rem, 2.4vw, 1.5rem);
  line-height:1.22;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

.prose{
  font-family:var(--serif);
  font-size:1.14rem;
  line-height:1.66;
  color:var(--ink-2);
  max-width:var(--measure);
}
.prose p{ margin:0 0 1.1em }
.prose p:last-child{ margin-bottom:0 }
.prose em{ color:var(--ink); font-style:italic }
.prose strong{ color:var(--ink); font-weight:500 }

/* stacked short declaratives — the copy's natural shape */
.stack{
  font-family:var(--serif);
  font-size:clamp(1.14rem, 2.1vw, 1.34rem);
  line-height:1.5;
  color:var(--ink-2);
  margin:0;
  max-width:44ch;
}
.stack span{ display:block }
.stack .lift{ color:var(--ink) }
/* the page's pause: fewer words, more scale */
.stack--lg{ font-size:clamp(1.35rem,2.9vw,1.85rem); line-height:1.36; max-width:26ch }
.stack--lg span + span{ margin-top:2px }

/* ---------- section scaffold ---------- */
.bay{ padding:var(--bay) 0; border-top:1px solid var(--rule) }
.bay--pause{ padding:clamp(92px,15vw,190px) 0 }
/* rhythm: the argument breathes, the working sections compress */
.bay--tight{ padding:clamp(60px,8vw,104px) 0 }
.bay--air{ padding:clamp(88px,13vw,172px) 0 }
.pause-q{ max-width:13ch; font-size:clamp(2.1rem,5.2vw,3.5rem) }
.bay--pause .stack--lg{ font-size:clamp(1.45rem,3.2vw,2.05rem); max-width:30ch }
.bay--pause .prose{ font-size:1.16rem; max-width:52ch }

.pause-grid{ display:grid; grid-template-columns:1fr; gap:36px }
@media (min-width:900px){
  .pause-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(48px,7vw,104px); align-items:start }
  .pause-answer{ padding-top:14px; border-top:1px solid var(--rule) }
}
.pause-ask .stack--lg{ margin-top:28px }
.pause-turn{
  margin-top:clamp(56px,8vw,96px); padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--rule); max-width:34ch;
}

/* evidence runs full width; the header carries its own annotation */
.work-head{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline;
  padding-bottom:26px; margin-bottom:34px; border-bottom:1px solid var(--rule);
}
.label--count{ color:var(--ordinal) }

.bay-grid{ display:grid; grid-template-columns:1fr; gap:28px }
@media (min-width:920px){
  .bay-grid{ grid-template-columns:170px minmax(0,1fr); gap:56px }
  .bay-grid > .bay-mark{ padding-top:6px }
}
.bay-mark .label + .label{ margin-top:10px }
.label--note{
  font-family:var(--sans); font-size:12px; font-weight:400; letter-spacing:.005em;
  color:var(--ordinal); line-height:1.45; max-width:16ch;
}
.label--formula{
  font-family:var(--mono); font-size:11.5px; letter-spacing:-.01em;
  color:var(--ordinal); line-height:1.5; max-width:17ch;
}
@media (min-width:920px){ .bay-mark{ position:sticky; top:92px } }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.nav-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:66px;
}
.mark{
  font-family:var(--sans);
  font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  line-height:1.25;
  padding:15px 0;
}
@media (max-width:599px){
  .nav-in > .btn{ display:none }
  .nav-in{ min-height:58px }
  .mark{ font-size:.72rem; letter-spacing:.16em }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:.86rem; font-weight:500;
  letter-spacing:-.005em;
  text-decoration:none; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--on-dark);
  padding:11px 18px; border-radius:2px;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
  min-height:44px;
}
.btn:hover{ background:var(--signal); border-color:var(--signal) }
.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--rule);
}
.btn--ghost:hover{ background:transparent; border-color:var(--ink); color:var(--ink) }
.btn--lg{ font-size:.95rem; padding:15px 24px }

.btn .arw{ display:inline-flex; align-items:center; transition:transform .22s cubic-bezier(.2,.7,.3,1) }
.btn:hover .arw{ transform:translateX(3px) }

/* quiet inline CTA used between sections */
.cta-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;
  margin-top:40px;
}
.cta-note{ font-family:var(--sans); font-size:13px; color:var(--muted); letter-spacing:.005em }

/* ==========================================================================
   HERO — the controlled experiment
   ========================================================================== */
.hero{ padding:clamp(56px,9vw,104px) 0 clamp(64px,9vw,110px) }
.hero-h{ max-width:26ch }
.hero-sub{
  font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.28rem);
  color:var(--ink-2); max-width:40ch; margin:26px 0 0; line-height:1.5;
}

.experiment{ margin:clamp(44px,7vw,76px) 0 0; padding-top:26px; border-top:1px solid var(--rule) }
.exp-cap{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:.005em; color:var(--muted); margin:0 0 18px;
}

.flow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.node{
  font-family:var(--mono); font-size:.9rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.arw-s{ color:var(--arrow); flex-shrink:0; display:inline-flex; align-items:center }
.ico-arw,.ico-go,.ico-plus{ display:block; overflow:visible }
.unknown{
  font-family:var(--mono); font-size:.9rem; color:var(--signal);
  border:1px dashed var(--signal); background:var(--signal-soft);
  border-radius:2px; padding:3px 12px; white-space:nowrap;
}

/* The hero diagram. One causal chain read left to right: identical inputs,
   an unknown, then the fork. The ? is the anchor because the unknown is the
   subject; the delta is bracketed because it is the consequence.
   Left-aligned, sentence-case labels — the composition, not the styling,
   is what was borrowed. */
.fd{
  margin-top:30px; display:grid; align-items:center;
  grid-template-columns:auto auto minmax(64px,1fr) auto auto;
  gap:0 clamp(14px,2.2vw,30px);
}
.fd-in{ display:flex; align-items:center; gap:clamp(12px,2vw,24px) }
.fd-arw{ color:var(--arrow); display:inline-flex; align-items:center; flex-shrink:0 }
.fd-node,.fd-o{ min-width:0 }
.fd-lab{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:.005em; color:var(--muted); margin:0 0 6px; white-space:nowrap;
}
.fd-val{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.2rem); letter-spacing:-.038em;
  line-height:1; margin:0; color:var(--ink); font-variant-numeric:tabular-nums;
}
.fd-val--a{ color:var(--baseline) }
.fd-val--b{ color:var(--signal) }
.fd-sub{
  font-family:var(--serif); font-size:13.5px; color:var(--muted); margin:5px 0 0;
}

/* the unknown — the darkest, largest single mark on the page */
.fd-mid{ display:flex; flex-direction:column; align-items:center; gap:14px }
.fd-unk-lab{
  font-family:var(--sans); font-size:12.5px; font-weight:500; line-height:1.35;
  color:var(--muted); margin:0; text-align:center; white-space:nowrap;
}
.fd-q{
  width:clamp(58px,7vw,78px); height:clamp(58px,7vw,78px);
  border-radius:50%; background:var(--signal); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1;
  transform:scale(.86); opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.3,1), opacity .45s ease;
}
.in-view .fd-q{ transform:scale(1); opacity:1 }

.fd-fork{ display:block; width:100%; min-width:64px;
  margin-left:calc(-1 * clamp(14px,2.2vw,30px)); }   /* meet the circle, not the gap */
.fd-fork svg{ width:100%; height:clamp(170px,17vw,215px); display:block }
.fd-fork path{ stroke-dasharray:220; stroke-dashoffset:220; transition:stroke-dashoffset 1.05s cubic-bezier(.22,.75,.28,1) .25s }
.in-view .fd-fork path{ stroke-dashoffset:0 }

.fd-out{ display:grid; gap:clamp(20px,3.4vw,42px) }

.fd-delta{ display:flex; align-items:center; gap:14px }
.fd-brace{ display:block }
.fd-brace svg{ height:clamp(170px,17vw,215px); display:block }
.fd-brace path{ stroke-dasharray:200; stroke-dashoffset:200; transition:stroke-dashoffset .7s ease .95s }
.in-view .fd-brace path{ stroke-dashoffset:0 }
.fd-delta-t{ opacity:0; transition:opacity .5s ease 1.15s }
.in-view .fd-delta-t{ opacity:1 }
.fd-delta-v{
  font-family:var(--sans); font-weight:700; color:var(--signal);
  font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.035em; line-height:1; margin:0;
  font-variant-numeric:tabular-nums;
}
.fd-delta-l{
  font-family:var(--serif); font-size:13.5px; color:var(--signal); margin:6px 0 0;
}

/* below the fork's natural width, stack it: inputs, unknown, outcomes, delta */
@media (max-width:880px){
  .fd{ grid-template-columns:1fr; gap:26px 0; justify-items:start }
  .fd-fork{ display:none }
  .fd-mid{ flex-direction:row; align-items:center; gap:16px }
  .fd-unk-lab{ text-align:left; white-space:normal }
  .fd-out{
    grid-template-columns:1fr 1fr; gap:22px;
    width:100%; padding-top:22px; border-top:1px solid var(--rule);
  }
  .fd-delta{ padding-top:20px; border-top:1px solid var(--rule); width:100% }
  .fd-brace{ display:none }
}
@media (max-width:420px){
  .fd-out{ grid-template-columns:1fr; gap:18px }
}
@media (prefers-reduced-motion:reduce){
  .fd-q{ opacity:1; transform:none }
  .fd-fork path,.fd-brace path{ stroke-dashoffset:0 }
  .fd-delta-t{ opacity:1 }
}

.verdict{
  font-family:var(--serif); font-size:clamp(1.14rem,2.2vw,1.4rem);
  line-height:1.48; color:var(--ink-2); max-width:42ch; margin:34px 0 0;
}
.verdict strong{ color:var(--ink); font-weight:500; display:block }

/* ==========================================================================
   INVERTED PIVOT — used exactly once
   ========================================================================== */
.pivot{ background:var(--ink); color:var(--on-dark); border-top:0 }
.pivot .label{ color:var(--on-dark-2) }
.pivot .h-l{ color:var(--on-dark) }
.pivot .stack{ color:var(--on-dark-2) }
.pivot .stack .lift{ color:var(--on-dark) }
.pivot .bay-mark .label + .label{ color:#8D9591 }
/* three channels, tested in isolation — drawn as isolation */
.silos{ display:grid; grid-template-columns:1fr; gap:0; margin-top:34px }
@media (min-width:720px){ .silos{ grid-template-columns:repeat(3,1fr); gap:0 } }
.silo{
  font-family:var(--serif); font-size:1.06rem; color:var(--on-dark-2);
  margin:0; padding:16px 22px 22px 0; border-top:1px solid #2E3537;
}
@media (min-width:720px){
  .silo{ padding:16px 24px 26px 0 }
  .silo + .silo{ padding-left:24px; border-left:1px solid #2E3537 }
}
.silo-span{ border-top:1px solid var(--signal); padding-top:18px }
.silo-span .pivot-tail{ margin:0; max-width:52ch }

.pivot-q{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.24; letter-spacing:-.028em;
  color:var(--on-dark); max-width:24ch; margin:36px 0 0; text-wrap:balance;
}
.pivot-q em{ font-style:normal; color:var(--signal-lift) }
.pivot-tail{ font-family:var(--serif); font-size:1.14rem; color:var(--on-dark-2); margin:20px 0 0; max-width:40ch }

/* ==========================================================================
   CALCULATOR — the hero device, parameterised
   ========================================================================== */
.calc{ margin-top:44px; border-top:1px solid var(--rule) }
.calc-cap{
  font-family:var(--serif); font-size:1.06rem; color:var(--ink);
  margin:0; padding:28px 0 4px; max-width:42ch;
}

.dials{
  display:grid; grid-template-columns:1fr; gap:0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:680px){ .dials{ grid-template-columns:1fr 1fr } }

.dial{ padding:22px 0; border-bottom:1px solid var(--rule-soft) }
@media (min-width:680px){
  .dial{ padding:22px 30px 22px 0 }
  .dial:nth-child(even){ padding-right:0; padding-left:30px; border-left:1px solid var(--rule-soft) }
  .dial:nth-last-child(-n+2){ border-bottom:0 }
}
@media (max-width:679px){ .dial:last-child{ border-bottom:0 } }

.dial-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px }
.dial-l{ font-family:var(--sans); font-size:12.5px; font-weight:500; letter-spacing:.005em; color:var(--muted) }
.dial-v{ font-family:var(--mono); font-size:1rem; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px; background:transparent; cursor:pointer; margin:0; display:block;
}
input[type=range]::-webkit-slider-runnable-track{
  height:1px; background:var(--rule);
}
input[type=range]::-moz-range-track{ height:1px; background:var(--rule) }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; margin-top:-6px; border-radius:50%;
  background:var(--ink); border:0;
  transition:background .16s ease, transform .16s ease;
}
input[type=range]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--ink); border:0;
}
input[type=range]:hover::-webkit-slider-thumb{ background:var(--signal); transform:scale(1.18) }
input[type=range]:focus-visible::-webkit-slider-thumb{ background:var(--signal); transform:scale(1.18) }
input[type=range]:hover::-moz-range-thumb{ background:var(--signal) }

.readout{ padding-top:8px }
.rd-row{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:20px 0; border-bottom:1px solid var(--rule-soft) }
.rd-nm{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.005em; color:var(--muted); min-width:104px }
.rd-mid{ font-family:var(--mono); font-size:.86rem; color:var(--ink-2); font-variant-numeric:tabular-nums }
.rd-v{
  margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.25rem,3.2vw,1.7rem); letter-spacing:-.03em; line-height:1;
}
.rd-v--a{ color:var(--baseline) }
.rd-v--b{ color:var(--signal); font-weight:500 }
@media (max-width:559px){ .rd-v{ margin-left:0; width:100%; margin-top:10px } }

.delta{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:26px 0 0 }
.delta-l{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.005em; color:var(--signal); min-width:104px }
.delta-v{
  font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--signal);
  font-size:clamp(1.7rem,5vw,2.6rem); letter-spacing:-.035em; line-height:1; font-weight:500;
}
.delta-n{ font-family:var(--serif); color:var(--muted); font-size:1rem; width:100%; margin-top:12px; max-width:46ch }

/* ==========================================================================
   WHY ME
   ========================================================================== */
.why{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start }
@media (min-width:860px){ .why{ grid-template-columns:minmax(0,1fr) 300px; gap:64px } }
.portrait{ border:1px solid var(--rule); background:var(--surface) }
.portrait img{ width:100%; height:auto; filter:saturate(.92) }
.portrait figcaption{
  font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.005em;
  color:var(--muted); padding:13px 14px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.breadth{ margin-top:56px; padding-top:44px; border-top:1px solid var(--rule) }
/* sectors read as a line of evidence, not a row of pills */
.sectors{
  display:flex; flex-wrap:wrap; margin:30px 0 0; padding:22px 0 0;
  list-style:none; border-top:1px solid var(--rule-soft);
}
.sectors li{
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  letter-spacing:.005em; color:var(--muted); white-space:nowrap;
}
.sectors li + li::before{ content:'/'; color:var(--arrow); margin:0 12px }

/* ==========================================================================
   CASE STUDIES
   ========================================================================== */
.cases{ margin-top:44px; border-top:1px solid var(--rule) }
.case{ border-bottom:1px solid var(--rule) }

.case-hd{ margin:0; font:inherit; font-weight:inherit; letter-spacing:normal }
.case-btn{
  display:block; width:100%; text-align:left;
  background:none; border:0; padding:30px 0; margin:0;
  color:inherit; font:inherit; cursor:pointer;
}
.case-top{ display:flex; width:100%; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:14px }
.case-cl{
  font-family:var(--sans); font-size:14px; font-weight:600;
  letter-spacing:-.005em; color:var(--ink); min-width:0;
}
.case-res{
  font-family:var(--mono); font-size:.8rem; color:var(--signal);
  font-variant-numeric:tabular-nums; text-align:right; letter-spacing:.01em; flex-shrink:0;
}
.case-res--qual{
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.005em; color:var(--muted);
}
.case-h{ display:block; max-width:31ch; transition:color .18s ease }
.case-btn:hover .case-h{ color:var(--signal) }
.case-more{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.005em; color:var(--signal);
}
.case-more .pl{ display:inline-flex; align-items:center; transition:transform .34s cubic-bezier(.2,.7,.3,1) }
.case[data-open="1"] .case-more .pl{ transform:rotate(45deg) }

.case-body{
  display:grid; grid-template-rows:0fr;
  visibility:hidden;                       /* keeps collapsed content out of the tab order */
  transition:grid-template-rows .5s cubic-bezier(.22,.75,.28,1), visibility 0s linear .5s;
}
.case[data-open="1"] .case-body{
  grid-template-rows:1fr; visibility:visible;
  transition:grid-template-rows .5s cubic-bezier(.22,.75,.28,1), visibility 0s;
}
.case-clip{ overflow:hidden }
.case-read{
  padding:4px 0 40px;
  opacity:0; transform:translateY(8px);
  transition:opacity .42s ease .08s, transform .42s ease .08s;
}
.case[data-open="1"] .case-read{ opacity:1; transform:none }

/* Each beat is one move in the diagnosis. The margin marker makes the
   progression legible instead of leaving 600 words of undifferentiated prose. */
/* the shape of the diagnosis, before a word of it is read */
.case-path{ padding:26px 0 30px; border-bottom:1px solid var(--rule-soft); margin-bottom:6px }
.path-cap{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:.005em; color:var(--muted); margin:0 0 20px;
}
.path-track{ display:grid; grid-template-columns:1fr; gap:18px }
@media (min-width:700px){ .path-track{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 } }
.path-node{
  position:relative; display:block; padding:0 0 0 20px;
  opacity:0; transform:translateY(6px);
  transition:opacity .42s ease, transform .42s cubic-bezier(.2,.7,.3,1);
}
/* the constraint advances rather than appearing all at once */
.case[data-open="1"] .path-node{ opacity:1; transform:none }
.case[data-open="1"] .path-node:nth-child(1){ transition-delay:.16s }
.case[data-open="1"] .path-node:nth-child(2){ transition-delay:.30s }
.case[data-open="1"] .path-node:nth-child(3){ transition-delay:.44s }
@media (min-width:700px){ .path-node{ padding:20px 24px 0 0 } }
.path-dot{
  position:absolute; left:0; top:5px; width:7px; height:7px; border-radius:50%;
  background:var(--rule); box-shadow:0 0 0 3px var(--paper);
}
@media (min-width:700px){
  .path-node{ border-top:1px solid var(--rule) }
  .path-dot{ left:0; top:-4px }
}
@media (prefers-reduced-motion:reduce){
  .path-node{ opacity:1; transform:none; transition:none }
}
.path-node--end .path-dot{ background:var(--signal) }
.path-name{
  display:block; font-family:var(--sans); font-size:15px; font-weight:600;
  letter-spacing:-.01em; color:var(--ink); line-height:1.3;
}
.path-node--end .path-name{ color:var(--signal) }
.path-note{
  display:block; font-family:var(--serif); font-size:14.5px;
  color:var(--muted); margin-top:3px; line-height:1.4;
}

.beat{ display:grid; grid-template-columns:1fr; gap:6px; padding:26px 0; border-top:1px solid var(--rule-soft) }
.beat:first-child{ border-top:0; padding-top:14px }
@media (min-width:860px){
  .beat{ grid-template-columns:132px minmax(0,1fr); gap:34px; padding:30px 0 }
}
.beat-mark{
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.005em;
  color:var(--signal); margin:0; padding-top:4px; white-space:nowrap;
}
.beat-body{
  font-family:var(--serif); font-size:1.09rem; line-height:1.66;
  color:var(--ink-2); max-width:58ch;
}
.beat-body p{ margin:0 0 1em }
.beat-body p:last-child{ margin-bottom:0 }
.beat-body em{ color:var(--ink); font-style:italic }
.chapter{
  font-family:var(--sans); font-weight:600; font-size:1.02rem;
  letter-spacing:-.012em; line-height:1.32; color:var(--ink);
  margin:0 0 12px; max-width:40ch;
}

.pull{
  font-family:var(--serif); font-size:1.28rem; line-height:1.44; color:var(--ink);
  border-left:2px solid var(--signal); padding-left:20px; margin:28px 0; max-width:40ch;
}

/* ==========================================================================
   HOW I WORK — one line, not five cards
   ========================================================================== */
.track{ margin-top:44px; padding-top:34px; border-top:1px solid var(--rule); position:relative }
.track-line{ display:flex; align-items:center; gap:0; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px }
.track-line::-webkit-scrollbar{ height:0 }
.step{ display:flex; align-items:center; gap:0; flex-shrink:0 }
.step-n{
  font-family:var(--sans); font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  color:var(--ink); white-space:nowrap;
}
.step-r{ width:clamp(22px,5vw,64px); height:1px; background:var(--rule); flex-shrink:0; margin:0 14px }
.step:last-child .step-r{ display:none }
.step-dot{ width:5px; height:5px; border-radius:50%; background:var(--signal); margin-right:9px; flex-shrink:0 }

.how-copy{ margin-top:42px }
.how-tail{
  font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:.005em;
  color:var(--muted); margin:28px 0 0; padding-top:20px; border-top:1px solid var(--rule-soft);
}

/* ==========================================================================
   CLOSE
   ========================================================================== */
.close{ padding:clamp(88px,13vw,168px) 0 }
.close-q{ max-width:19ch }
.close-a{
  font-family:var(--serif); font-size:clamp(1.2rem,2.4vw,1.5rem);
  color:var(--ink-2); margin:22px 0 0; max-width:34ch; line-height:1.48;
}

.foot{ border-top:1px solid var(--rule); padding:34px 0 44px }
.foot-in{ display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between }
.foot a{ display:inline-block; padding:13px 0; color:var(--muted); text-decoration:none; border-bottom:1px solid transparent }
.foot a:hover{ color:var(--ink); border-bottom-color:var(--rule) }
.foot-l{ font-family:var(--sans); font-size:13px; letter-spacing:.005em; color:var(--muted) }

/* ==========================================================================
   MOTION
   ========================================================================== */
.rise{ opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.22,.75,.28,1), transform .7s cubic-bezier(.22,.75,.28,1) }
.rise.in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .rise{ opacity:1; transform:none }
}

html{ scroll-behavior:smooth }