/* Case page shell (DESIGN.md §4.17): header → dark intro block → case body (<main>) → end block. No footer.
   Main DESIGN.md tokens only, never --dg-* or another case's prefix. Every case links this file and never restyles it;
   a case's own look lives inside <main> under its own scope class (e.g. .digest, §5.7).
   Needs ../../shared/type.css (text styles, §2.2) and ../../shared/components.css (contact button .pill, §4.1). */

/* tokens: DESIGN.md §2.0 (v1) */
:root{
  color-scheme:light;
  --background:#ffffff; --surface:#f1f0ee; --surface-2:#e3e2df; --surface-soft:rgba(241,240,238,.5); --ink:#0a0a0a;
  --foreground:#111111; --text:var(--foreground); --text-2:rgba(17,17,17,.7); --text-3:rgba(17,17,17,.5);
  --on-ink:#ffffff; --on-ink-2:rgba(255,255,255,.7); --on-ink-3:rgba(255,255,255,.5);
  --line:#e6e5e2; --line-on-ink:rgba(255,255,255,.1); --border-ctl:rgba(17,17,17,.5); --border-on-ink:rgba(255,255,255,.4);
  --accent:#4f5bd5; --error:#b42318;
  --holo-1:#6fe3e1; --holo-2:#b9a7ff; --holo-3:#ffc7a3;
  --holo-gradient:linear-gradient(135deg,var(--holo-1),var(--holo-2),var(--holo-3));
  --glass-rest:rgba(255,255,255,.1); --glass-hover:rgba(255,255,255,.2);
  --ring-light:var(--accent); --ring-ink:var(--on-ink);
  --font:"Onest", "Helvetica Neue", Arial, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, Menlo, monospace;
  --r-card:2rem; --r-card-sm:1.25rem; --r-ctl:.875rem; --r-pill:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow-panel:0 25px 50px -12px rgba(0,0,0,.25); --ring-hairline:0 0 0 1px;
  --blur-ctl:blur(4px); --blur-card:blur(12px); --blur-overlay:blur(16px); --blur-lens:blur(1.4px) saturate(1.8);
  --z-bg:0; --z-decor:1; --z-raised:10; --z-content:20; --z-header:50;
  --z-lens:99; --z-cursor:100; --z-modal:110; --z-nav:115; --z-loader:120; --z-skip:130;
  --ease-spring:cubic-bezier(.22,1,.36,1); --ease-line:cubic-bezier(.215,.61,.355,1);
  --ease-word:cubic-bezier(.165,.84,.44,1); --ease-hover:cubic-bezier(.2,.8,.2,1);
  --dur-micro:300ms; --dur-surface:450ms; --dur-item:500ms; --dur-overlay:400ms; --dur-exit:600ms;
  --dur-word:700ms; --dur-reveal:800ms; --dur-line:900ms;
  --stagger-list:80ms; --stagger-line:120ms; --stagger-word:35ms;
}

/* base */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:clamp(16px, calc(5.3333px + .5555vw), 21.3333px);-webkit-font-smoothing:antialiased}
body{background:var(--background);color:var(--text);font-family:var(--font);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--ring-light);outline-offset:2px}
.ink :focus-visible{outline-color:var(--ring-ink)}
.shell{max-width:88rem;margin-inline:auto;padding-left:max(1.25rem, env(safe-area-inset-left, 0px));padding-right:max(1.25rem, env(safe-area-inset-right, 0px))}
@media (min-width:640px){.shell{padding-left:max(2rem, env(safe-area-inset-left, 0px));padding-right:max(2rem, env(safe-area-inset-right, 0px))}}
.ico{width:1em;height:1em;display:inline-block;flex:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}
.skip:focus{position:fixed;left:1rem;top:1rem;z-index:var(--z-skip);border-radius:var(--r-ctl);background:var(--ink);padding:.5rem 1rem;color:var(--on-ink)}

/* eyebrow (§4.2) */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-2)}
.eyebrow::before{content:"";width:.375rem;height:.375rem;border-radius:var(--r-pill);background:var(--text-3)}
.ink .eyebrow{color:var(--on-ink-2)}.ink .eyebrow::before{background:var(--on-ink-3)}

/* ink sheets: header + intro on one sheet (D6), end block mirrors it */
.ink{background:var(--ink);color:var(--on-ink)}
.case-hero{border-radius:0 0 var(--r-card) var(--r-card)}

/* header (§4.7, single on-ink variant; no menu button on case pages) */
header.top{position:relative;z-index:var(--z-header)}
header.top .shell{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.25rem}
@media (min-width:640px){header.top .shell{padding-block:1.5rem}}
.logo{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:600;letter-spacing:-.01em;transition:transform var(--dur-micro) var(--ease-hover)}
.logo .ico{font-size:1.25rem;color:var(--holo-2)}
@media (hover:hover){.logo:hover{transform:scale(1.04)}}
.logo:focus-visible{transform:scale(1.04)}
.pnav{display:none;gap:2rem}
.pnav a{display:inline-block;color:var(--on-ink-2);transition:transform var(--dur-micro) var(--ease-hover),color var(--dur-micro) var(--ease-hover)}
.pnav a[aria-current]{color:var(--on-ink)}
@media (hover:hover){.pnav a:hover{transform:translateY(-2px);color:var(--on-ink)}}
.pnav a:focus-visible{transform:translateY(-2px);color:var(--on-ink)}
@media (min-width:1024px){.pnav{display:flex}}
.chip{display:none;align-items:center;gap:.75rem;border:1px solid var(--border-on-ink);background:var(--glass-rest);backdrop-filter:var(--blur-ctl);-webkit-backdrop-filter:var(--blur-ctl);border-radius:var(--r-ctl);padding:.5rem .75rem;color:var(--on-ink-2)}
.chip .t{min-width:3.5rem;color:var(--on-ink)}.chip .sep{color:var(--on-ink-3)}
@media (min-width:768px){.chip{display:flex}}

/* dark intro block: ← All work, eyebrow, title, summary, fact chips, context */
.intro{padding-top:2.5rem;padding-bottom:5rem}
@media (min-width:1024px){.intro{padding-top:3rem;padding-bottom:7rem}}
.back{display:inline-flex;align-items:center;gap:.5rem;color:var(--on-ink-2);transition:color var(--dur-micro) var(--ease-hover),transform var(--dur-micro) var(--ease-hover)}
@media (hover:hover){.back:hover{color:var(--on-ink);transform:translateX(-4px)}}
.back:focus-visible{color:var(--on-ink);transform:translateX(-4px)}
.intro .eyebrow{margin-top:3rem}
.intro h1{margin-top:1.25rem;max-width:18ch}
/* display title in --holo-gradient (D1 amended 2026-11-13: holo as text fill for display titles only). Solid --on-ink first,
   the gradient only where background-clip:text works; padding/margin give descenders room inside the clipped background */
.intro h1{color:var(--on-ink)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .intro h1{width:fit-content;background:var(--holo-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em;margin-bottom:-.12em} /* fit-content: the gradient spans the words, not the 18ch box */
}
@media (forced-colors:active){.intro h1{background:none;color:CanvasText}}
.intro h1:focus{outline:none}
.intro h1:focus-visible{outline:2px solid var(--ring-ink)}
.intro .sum{margin-top:1.5rem;max-width:40rem;color:var(--on-ink-2)}
.tags{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.tags li{display:inline-flex;gap:.5rem;border:1px solid var(--line-on-ink);border-radius:var(--r-pill);padding:.5rem 1rem;color:var(--on-ink-2)}
.tags b{color:var(--on-ink-3);align-self:center}
.intro .ctx{margin-top:3rem;max-width:40rem;color:var(--on-ink-2)}

/* end block: full-bleed ink sheet; left = next case (or ← All work), right = the shared contact button */
.case-end{border-radius:var(--r-card) var(--r-card) 0 0}
.case-end .shell{display:flex;flex-direction:column;gap:2rem;padding-top:2.5rem;padding-bottom:2.5rem}
@media (min-width:1024px){.case-end .shell{flex-direction:row;align-items:center;justify-content:space-between;padding-top:3rem;padding-bottom:3rem}}
.cend-next{display:flex;flex-direction:column;gap:1rem;color:var(--on-ink)}
.cend-next .k{display:inline-flex;align-items:center;gap:.5rem;color:var(--on-ink-2);transition:color var(--dur-micro) var(--ease-hover)}
.cend-next .t{display:inline-flex;align-items:center;gap:.75rem}
.cend-next .ico{transition:transform var(--dur-micro) var(--ease-hover)}
@media (hover:hover){.cend-next:hover .k{color:var(--on-ink)}.cend-next:hover .r{transform:translateX(4px)}.cend-next:hover .l{transform:translateX(-4px)}}
.cend-next:focus-visible .k{color:var(--on-ink)}.cend-next:focus-visible .r{transform:translateX(4px)}.cend-next:focus-visible .l{transform:translateX(-4px)}

/* ---------- case body components (DESIGN.md §4.17 "Case body components"): .cb-* inside <main>, light page ---------- */
:root{
  --cb-measure:62ch;          /* prose line length */
  --cb-col:48rem;             /* text column: section head, prose block, inset figure */
  --cb-sticky-top:2rem;       /* feature-row text offset; the case header is not sticky, so this is the gap to the viewport top */
  --cb-crop:16/10;            /* crop figure window for tall screenshots */
  --cb-step-w:80%;            /* steps strip item width below 1024: the next item peeks as the overflow hint */
  --cb-step-w-lg:40%;         /* steps strip item width at >=1024: about 2.5 items in view, so form screenshots stay readable and the next one peeks in */
}
.cb-section{padding-block:2.5rem;scroll-margin-top:var(--cb-sticky-top)}
@media (min-width:1024px){.cb-section{padding-block:3.5rem}}
main>.cb-section:last-child{padding-bottom:5rem}
@media (min-width:1024px){main>.cb-section:last-child{padding-bottom:7rem}}
.cb-head{max-width:var(--cb-col);margin-bottom:3rem}
.cb-num{color:var(--text)}
.cb-head h2{margin-top:1.25rem}
.cb-lead{margin-top:1.5rem;max-width:var(--cb-measure);color:var(--text-2)}
.cb-flow>*+*{margin-top:3rem}

/* summary: Problem / What I did / Outcome */
.cb-summary{padding-block:5rem 2.5rem}
@media (min-width:1024px){.cb-summary{padding-block:7rem 3.5rem}}
/* a Summary after an opening section (e.g. the first figure) takes normal section spacing: 2.5 + 2.5 = 5rem, 3.5 + 3.5 = 7rem */
.cb-section+.cb-summary{padding-top:2.5rem}
@media (min-width:1024px){.cb-section+.cb-summary{padding-top:3.5rem}}
.cb-summary dl{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:1024px){.cb-summary dl{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.cb-summary dl>div{border-top:1px solid var(--line);padding-top:1rem}
.cb-summary dt{color:var(--text-2)}
.cb-summary dd{margin-top:.75rem;max-width:var(--cb-measure)}

/* prose */
.cb-prose{max-width:var(--cb-col)}
.cb-prose>*{max-width:var(--cb-measure)}
.cb-prose>*+*{margin-top:1rem}
.cb-prose ul,.cb-prose ol{padding-left:1.5rem}
.cb-prose ul{list-style:disc}
.cb-prose ol{list-style:decimal}
.cb-prose li+li{margin-top:.5rem}
.cb-prose li::marker{color:var(--text-2)}

/* figure: frame + media + caption */
.cb-figure--inset{max-width:var(--cb-col)}
.cb-frame{display:flex;flex-direction:column;gap:.75rem;border-radius:var(--r-card-sm);background:var(--surface);padding:.75rem}
@media (min-width:1024px){.cb-frame{padding:1rem}}
.cb-media{position:relative;overflow:hidden;border-radius:var(--r-ctl);box-shadow:var(--ring-hairline) var(--line)}
.cb-media img{display:block;width:100%;height:auto}
.cb-figure--crop .cb-media{aspect-ratio:var(--cb-crop)}
.cb-figure--crop .cb-media img{height:100%;object-fit:cover;object-position:top}
.cb-figure--crop .cb-ph{align-content:start}
.cb-figure figcaption{margin-top:.75rem;max-width:var(--cb-measure);color:var(--text-2)}
.cb-pair{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:1024px){.cb-pair{grid-template-columns:1fr 1fr}}
.cb-stack{display:flex;flex-direction:column;gap:1.5rem}
/* placeholder image (template only): gray box with its label */
.cb-ph{display:grid;place-items:center;width:100%;background:var(--surface-2);color:var(--text-2);text-align:center;padding:1rem}
.cb-ph--16x10{aspect-ratio:16/10}.cb-ph--16x9{aspect-ratio:16/9}.cb-ph--4x5{aspect-ratio:4/5}

/* steps: numbered flow; row on desktop, scroll-snap strip below 1024 */
.cb-steps{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:.75rem}
.cb-steps:focus-visible{outline:2px solid var(--ring-light);outline-offset:2px}
.cb-steps ol{display:grid;grid-auto-flow:column;grid-auto-columns:var(--cb-step-w);gap:1rem}
.cb-steps li{scroll-snap-align:start}
.cb-steps .cb-sn{display:block;margin-bottom:.5rem;color:var(--text-2)}
@media (min-width:1024px){.cb-steps ol{grid-auto-columns:var(--cb-step-w-lg);gap:1.5rem}}

/* tag: neutral label on figures (Before, After, Shipped, Rejected, a role, a level) */
.cb-tag{align-self:flex-start;display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--background);padding:.25rem .75rem;color:var(--text-2)}

/* cards */
.cb-cards{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:1024px){.cb-cards{grid-auto-flow:column;grid-auto-columns:1fr}}
.cb-card{border:1px solid var(--line);border-radius:var(--r-card-sm);padding:1.5rem}
.cb-card p{margin-top:.75rem;color:var(--text-2)}

/* decision */
.cb-decision+.cb-decision{margin-top:5rem;border-top:1px solid var(--line);padding-top:5rem}
.cb-decision>*+*{margin-top:2rem}
.cb-decision .cb-dlabel{color:var(--text-2)}
.cb-decision h3{margin-top:1rem;max-width:var(--cb-col)}
.cb-dblock{max-width:var(--cb-col)}
.cb-dblock h4{color:var(--text-2)}
.cb-dblock p{margin-top:.75rem;max-width:var(--cb-measure)}
.cb-alts{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.cb-alts{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.cb-alts{grid-template-columns:repeat(4,1fr)}}
.cb-alts-text{max-width:var(--cb-col)}
.cb-alts-text li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;border-top:1px solid var(--line);padding-block:1rem}
.cb-alts-text li span:last-child{flex-basis:100%;color:var(--text-2)}

/* feature row: text 4/12 + media 8/12, text sticky on desktop */
.cb-feature{display:flex;flex-direction:column;gap:2rem}
.cb-feature+.cb-feature,.cb-feature+.cb-flow{margin-top:5rem}
.cb-ftext{max-width:var(--cb-measure)}
.cb-ftext p{margin-top:1rem;color:var(--text-2)}
@media (min-width:1024px){
  .cb-feature{display:grid;grid-template-columns:repeat(12,1fr);gap:2.5rem;align-items:start}
  .cb-ftext{grid-column:1 / span 4;position:sticky;top:var(--cb-sticky-top)}
  .cb-fmedia{grid-column:5 / span 8}
  .cb-feature--flip .cb-ftext{grid-column:9 / span 4;grid-row:1}
  .cb-feature--flip .cb-fmedia{grid-column:1 / span 8;grid-row:1}
}

/* stats: number style = §2.2 stat */
.cb-stats{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:3rem}
@media (min-width:1024px){.cb-stats{grid-template-columns:repeat(4,1fr)}}
.cb-stats dd{margin-top:.75rem;max-width:18ch}
.cb-stats .cb-src{display:block;margin-top:.5rem;color:var(--text-2)}
.cb-outcomes{max-width:var(--cb-col)}
.cb-outcomes li{border-top:1px solid var(--line);padding-block:1rem}
.cb-note{margin-top:2rem;color:var(--text-2)}

/* quote: role only, no names */
.cb-quote{max-width:var(--cb-col);border-left:1px solid var(--line);padding-left:1.5rem}
.cb-quote figcaption{margin-top:1rem;color:var(--text-2)}

/* todo (dev only): a frozen case has none */
.cb-todo{max-width:var(--cb-col);border:1px dashed var(--border-ctl);border-radius:var(--r-card-sm);background:var(--surface-soft);padding:1.5rem}
.cb-todo p{margin-top:.5rem;color:var(--text-2)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}