/* case-study.css — the shared stylesheet for case studies (a Portfolio Pudding
   scrollytelling page inside the site). Generated from the story substrate by
   scoping every rule to .story and drawing colour and type from tokens.css.
   Loaded only on case-study pages. */
/* ── Story palette, drawn from the site tokens (tokens.css) ──────────────
   Colour is weather on this site; inside figures meaning rides on marks
   (docs/pen-and-pixel.md). Names below are the substrate's own, aliased. */
:root{
  --fg: var(--ink);
  --st-surface: var(--bg-alt);
  --dot: var(--rule);
  --verified: var(--muted);
  --recorded: var(--moss);                                         /* where to look: your path, the answer */
  --recorded-soft: color-mix(in oklab, var(--moss) 12%, var(--bg));
  --held: var(--amber);                                            /* a state: always with a word */
  --held-soft: color-mix(in oklab, var(--amber) 13%, var(--bg));
  --ai: var(--ink-soft);                                           /* AI is shown by dither, not hue */
  --ai-soft: transparent;
  --body: var(--text);
}

/* The site's layout shell (base.css) narrows and pads header/main/footer;
   a story sets its own measure. */
main#content{ max-width: none; padding-left: 0; padding-right: 0; padding-top: var(--space-lg); }
.story header, .story footer{ max-width: none; margin: 0; padding: 0; }
.story-note{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

:root{--s-1:0.8125rem;--s0:1.0625rem;--s1:1.25rem;--s2:1.6rem;--s3:2.3rem;--nav-h:46px}
.story, .story *{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 12px)}
.story{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:var(--s0);line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.story .wrap{max-width:1120px;margin-inline:auto}
.story h1, .story h2, .story h3, .story h4{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.08;letter-spacing:-0.015em}
.story p{margin:0}
.story a{color:var(--recorded)}
.story .eyebrow{font-family:var(--mono);font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.story :focus-visible{outline:2px solid var(--recorded);outline-offset:3px;border-radius:4px}
.story .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.story .lab{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.story .badge{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);font-size:.72rem;padding:2px 8px;border-radius:999px;border:1px solid var(--rule);color:var(--fg);background:var(--st-surface);white-space:nowrap;text-transform:none;letter-spacing:0}
.story .badge::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.story .badge.live::before{background:var(--fg)}
.story .badge.designed::before{border:1.5px solid var(--fg)}
.story .cl{display:inline-block;font-family:var(--mono);font-size:.68rem;line-height:1.5;letter-spacing:.02em;padding:0 6px;border-radius:2px;white-space:nowrap;border:1px solid var(--fg);color:var(--fg);vertical-align:.12em}
.story .cl.doc{background:var(--fg);color:var(--st-surface)}
.story .cl.inf{border-style:dashed;border-color:var(--muted);color:var(--muted)}
.story .cl.unr{background:var(--held-soft);color:var(--held);border-color:transparent}
.story p .cl{margin-right:6px}
.story .chip{display:inline-block;font-family:var(--mono);font-size:.72rem;border-radius:4px;padding:2px 7px;border:1px solid var(--rule);line-height:1.5;background:var(--st-surface)}
.story .chip.ai{background:var(--ai-soft);color:var(--ai);border-color:transparent}
.story .chip.flag{background:var(--held-soft);color:var(--held);border-color:transparent}
.story .chip.ink{background:var(--fg);color:var(--st-surface);border-color:var(--fg)}
.story .chip.blue{background:var(--recorded-soft);color:var(--recorded);border-color:transparent}
.story .chips{display:flex;flex-wrap:wrap;gap:5px}
.story .arrowtxt{font-family:var(--mono);color:var(--muted)}
.story .flowline{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:.8rem}
.story .ghost{border:1.5px dashed var(--held);color:var(--held);border-radius:4px;padding:1px 7px;font-family:var(--mono);font-size:.72rem}
.story .hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,56px);align-items:center;padding-block:clamp(40px,7vw,80px) 40px}
.story .hero h1{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:800}
.story .hero h1 em{font-style:normal;color:var(--recorded)}
.story .dek{font-size:var(--s1);color:var(--muted);max-width:38ch;margin-top:20px}
.story .meta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:28px;font-size:var(--s-1);max-width:540px}
.story .meta dt{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.story .meta dd{margin:0}
.story .hero-fig{min-width:0;margin:0}
.story .caption{font-size:var(--s-1);color:var(--muted);margin-top:10px}
.story svg text{font-family:var(--mono);fill:var(--muted)}
.story .panel{background:var(--st-surface);border:1px solid var(--rule);border-radius:10px;padding:clamp(14px,2.5vw,22px)}
.story .panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.story .secnav{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--rule);margin-top:16px}
.story .secnav ul{list-style:none;margin:0 auto;padding:0 4px;display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;max-width:1120px;height:var(--nav-h);align-items:center}
.story .secnav ul::-webkit-scrollbar{display:none}
.story .secnav a{font:600 .9rem var(--body);color:var(--muted);text-decoration:none;white-space:nowrap;padding-block:4px;border-bottom:2px solid transparent}
.story .secnav a:hover{color:var(--fg)}
.story .secnav a, .story .secnav button{scroll-margin-top:calc(-1 * (var(--nav-h) + 12px))}
.story .secnav a[aria-current="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.story .progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.story .progress i{display:block;height:2px;width:0;background:var(--recorded)}
.story .chapter{border-top:1px solid var(--rule);padding-top:8px}
.story .chapter:first-of-type{border-top:0}
.story .lens-intro{padding-block:48px 8px;max-width:660px}
.story .lens-intro h2{font-size:var(--s3);font-weight:700;margin-top:8px}
.story .lens-intro p{color:var(--muted);margin-top:12px;font-size:var(--s1)}
.story .scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,64px);padding-bottom:32px}
.story .steps{min-width:0}
.story .step{min-height:56vh;display:flex;align-items:center}
.story .step:first-child, .story .step:last-child{min-height:44vh}
.story .step-in{max-width:44ch;padding:20px 0 20px 20px;border-left:2px solid var(--rule);transition:border-color .3s}
.story .step.active .step-in{border-left-color:var(--fg)}
.story .step h3{font-size:var(--s2);font-weight:700;margin-bottom:10px}
.story .step p+p{margin-top:10px}
.story .step .kicker{font-family:var(--mono);font-size:var(--s-1);color:var(--muted);margin-bottom:8px;letter-spacing:.04em}
.story .graphic{position:sticky;top:calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 24px);align-self:start;min-width:0;padding-top:24px}
.story .dim{opacity:.5;transition:opacity .45s}
.story .dim.on{opacity:1}
.story .sec{margin-top:16px}
.story .sec:first-child{margin-top:0}
.story .sec > .lab{display:block;margin-bottom:6px}
.story .tag{opacity:0;transition:opacity .4s}
.story .tag.on{opacity:1}
.story .flow{display:grid;gap:7px}
.story .stage{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;padding:9px 12px;border-radius:8px;border:1px solid var(--rule);background:var(--st-surface)}
.story .stage.cond{border-style:dashed}
.story .stage .who{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:3px 0;border-radius:4px;margin-top:1px}
.story .who.you{background:var(--fg);color:var(--st-surface)}
.story .who.sys{color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.story .who.ai{background:var(--ai-soft);color:var(--ai)}
.story .stage .t{font-size:.92rem;line-height:1.35;min-width:0}
.story .stage .t small{display:block;color:var(--muted);font-size:var(--s-1)}
.story .stage .t .chips{margin-top:6px}
.story .outcome{border-top:1px solid var(--rule);padding-block:64px 24px}
.story .outcome h2, .story .claims h2{font-size:var(--s3);font-weight:700;max-width:24ch}
.story .oc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.story .oc-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
.story .oc-grid h3{font:700 var(--s1) var(--display);margin-bottom:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.story .oc-grid p, .story .oc-grid ul, .story .oc-grid ol{color:var(--muted)}
.story .oc-grid ul, .story .oc-grid ol{margin:0;padding-left:1.1em}
.story .reflect{margin-top:44px;max-width:58ch;font-family:var(--display);font-size:var(--s2);font-weight:500;line-height:1.3;text-wrap:balance}
.story .reflect span{color:var(--recorded)}
.story .claims{border-top:1px solid var(--rule);padding-block:56px 24px}
.story .claims > p{color:var(--muted);margin-top:12px;max-width:62ch;font-size:var(--s1)}
.story .legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:24px 0 0;max-width:860px;font-size:var(--s-1);color:var(--muted)}
.story .legend div{display:flex;gap:8px;align-items:baseline}
.story .legend dt{flex:none}
.story .legend dd{margin:0}
.story .regwrap{overflow-x:auto;margin-top:24px;border-top:2px solid var(--fg);border-bottom:2px solid var(--fg)}
.story .reg{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--st-surface)}
.story .reg th{text-align:left;font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--rule)}
.story .reg td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top}
.story .reg tr:last-child td{border-bottom:0}
.story .reg td:first-child{white-space:nowrap;width:1%}
.story .reg td:last-child{color:var(--muted);font-size:.85rem;min-width:12ch}
.story .reg .ref{display:inline-block;margin-left:6px;font:500 .74rem var(--mono);white-space:nowrap}
.story .flash{animation:flash 1.8s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 3px var(--recorded)}100%{box-shadow:0 0 0 3px transparent}}
.story .credit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px;max-width:860px}
.story .credit h3{font:700 var(--s1) var(--display);margin-bottom:8px}
.story .credit p{color:var(--muted)}
.story .credit .wide{grid-column:1 / -1}
.story footer{border-top:1px solid var(--rule);padding-block:24px 48px;margin-top:40px;font-size:var(--s-1);color:var(--muted);display:grid;gap:6px}
html[data-aud="pro"] .story [data-aud="gen"], html:not([data-aud="pro"]) .story [data-aud="pro"]{display:none!important}
.story .aud-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:22px;font-size:var(--s-1);color:var(--muted)}
.story .aud-toggle{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:2px;gap:2px;background:var(--st-surface)}
.story .aud-toggle button{font:600 .8rem var(--body);border:0;background:transparent;color:var(--muted);padding:5px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.story .aud-toggle button:hover{color:var(--fg)}
.story .aud-toggle button[aria-pressed="true"]{background:var(--fg);color:var(--st-surface)}
.story .secnav li.nav-aud{margin-left:auto;padding-left:12px}
.story .secnav .aud-toggle button{font-size:.74rem;padding:3px 9px}
.story .gloss{color:var(--muted)}
.story .tldr{margin-top:16px;max-width:52ch;padding:10px 14px;border-radius:8px;background:var(--recorded-soft);color:var(--fg);font-size:var(--s0);line-height:1.5}
.story .tldr b{display:block;margin-bottom:2px;font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--recorded)}
.story .fict{font:500 .7rem var(--mono);color:var(--muted)}
.story .why{margin-top:18px;max-width:62ch;border-left:3px solid var(--recorded);padding:2px 0 2px 14px}
.story .lens-intro .why p{color:var(--fg);font-size:var(--s0);margin-top:0}
.story .why .lab{display:block;margin-bottom:4px}
.story details.claimsbox{margin-top:20px;border:1px solid var(--rule);border-radius:10px;background:var(--st-surface);padding:0 16px}
.story details.claimsbox > summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.story details.claimsbox > summary::-webkit-details-marker{display:none}
.story details.claimsbox > summary::after{content:"Show";font:500 .74rem var(--mono);color:var(--muted);flex:none}
.story details.claimsbox[open] > summary::after{content:"Hide"}
.story details.claimsbox .legend{margin-top:4px}
.story details.claimsbox .regwrap{margin-bottom:16px}
.story .m-fig{display:none}
@media (max-width: 820px){
:root{--nav-h:44px}
.story .hero{grid-template-columns:minmax(0,1fr)}
.story .scrolly{grid-template-columns:minmax(0,1fr);gap:0}
html.story-js .story .scrolly:not(.inline) > .graphic{display:none}
.story .m-fig{display:block;margin:2px 0 30px}
.story .m-fig .dim{opacity:1}
.story .m-fig .tag{opacity:1}
.story .m-fig .sec{margin-top:12px}
.story .m-fig .sec:first-child{margin-top:0}
.story .step, .story .step:first-child, .story .step:last-child{min-height:0;display:block;padding-top:8px}
.story .step-in{max-width:none;padding:4px 0 12px 14px;border-left-color:var(--fg)}
.story .scrolly.inline .graphic{position:static;padding-top:8px}
.story .oc-grid, .story .oc-grid.two, .story .credit, .story .legend{grid-template-columns:minmax(0,1fr)}
.story .stage{grid-template-columns:52px minmax(0,1fr);padding:6px 10px;gap:8px}
.story .stage .t{font-size:.86rem}
}
.story .just-changed{animation:jc 1.4s ease-out}
@keyframes jc{0%,25%{box-shadow:0 0 0 2px var(--recorded),0 0 0 5px var(--recorded-soft)}100%{box-shadow:0 0 0 2px transparent,0 0 0 5px transparent}}
@media (prefers-reduced-motion: reduce){
.story, .story *{transition:none!important;animation:none!important}
.story .just-changed{box-shadow:0 0 0 2px var(--recorded)}
}