/* ============================================================================
   Jeff Brokaw — case-study design system (data-forward + motion).
   Shared across every /work/ case study. Pairs with case.js.
   Ink + orange, Bricolage display + Hanken body. Themes off :root tokens.
   ========================================================================== */
:root{
  --bg:#0a0a0a; --surface:#111015; --surface2:#0d0c10; --fg:#f4f1ea; --mut:#b4aea4; --dim:#928b81;
  --ac:#ff6a1f; --ac-soft:rgba(255,106,31,.12); --hair:#211d18; --hair2:#2b2620;
  --shell:1120px; --measure:66ch; --ink:#0a0a0a;
  --f-display:"Bricolage Grotesque","Helvetica Neue","Arial Narrow",system-ui,sans-serif;
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:light){
  :root{ --bg:#f4f1e9; --surface:#fffdf8; --surface2:#efe9dc; --fg:#17130d; --mut:#5b544a; --dim:#847a6c;
    --ac:#d9530e; --ac-soft:rgba(217,83,14,.10); --hair:#e6e0d3; --hair2:#ddd5c4; }
}
:root[data-theme="dark"]{ --bg:#0a0a0a; --surface:#111015; --surface2:#0d0c10; --fg:#f4f1ea; --mut:#b4aea4; --dim:#928b81; --ac:#ff6a1f; --ac-soft:rgba(255,106,31,.12); --hair:#211d18; --hair2:#2b2620; }
:root[data-theme="light"]{ --bg:#f4f1e9; --surface:#fffdf8; --surface2:#efe9dc; --fg:#17130d; --mut:#5b544a; --dim:#847a6c; --ac:#d9530e; --ac-soft:rgba(217,83,14,.10); --hair:#e6e0d3; --hair2:#ddd5c4; }

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; }
.doc{ background:var(--bg); color:var(--fg); }
.wrap{ max-width:var(--shell); margin:0 auto; padding:0 clamp(20px,5vw,48px); }
.prose{ max-width:var(--measure); }
.wrap.prose{ max-width:var(--shell); }
.wrap.prose > *{ max-width:var(--measure); }
p{ margin:0 0 1.05em; }
strong{ color:var(--fg); font-weight:600; }
.ac{ color:var(--ac); }
a{ color:inherit; }

/* header + nav (nav.js/nav.css enhance) */
.site-header{ display:flex; justify-content:space-between; align-items:center; gap:16px; max-width:var(--shell); margin:0 auto; padding:clamp(20px,4vw,38px) clamp(20px,5vw,48px); position:relative; z-index:5; }
.mark{ display:inline-flex; align-items:center; gap:11px; font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--fg); text-decoration:none; }
.mark svg{ width:24px; height:24px; overflow:visible; }
.mark .ln{ fill:none; stroke:var(--ac); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.mark .nd{ fill:var(--ac); }
.nav{ display:flex; align-items:center; gap:clamp(18px,2.6vw,30px); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.nav a{ color:var(--mut); text-decoration:none; transition:color .18s; }
.nav a:hover{ color:var(--ac); }
.nav a.pill{ border:1px solid var(--ac); color:var(--ac); border-radius:999px; padding:9px 17px; letter-spacing:.14em; transition:background .2s,color .2s; }
.nav a.pill:hover{ background:var(--ac); color:var(--bg); }

section{ padding:clamp(54px,8vw,108px) 0; border-top:1px solid var(--hair); }
.label{ font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ac); display:inline-flex; align-items:center; gap:11px; margin:0 0 26px; }
.label::before{ content:""; width:26px; height:2px; background:var(--ac); }
h2{ font-family:var(--f-display); font-weight:700; letter-spacing:-.025em; line-height:1.05; font-size:clamp(1.9rem,4.2vw,3rem); margin:0 0 .7em; text-wrap:balance; }
h3{ font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; font-size:1.14rem; margin:0 0 .4em; }

/* hero + node-field */
.hero{ position:relative; overflow:hidden; border-top:0; }
.hero canvas[data-nodefield]{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; -webkit-mask-image:radial-gradient(130% 100% at 88% 0%, #000 34%, transparent 74%); mask-image:radial-gradient(130% 100% at 88% 0%, #000 34%, transparent 74%); opacity:.9; }
.hero .wrap{ position:relative; z-index:1; padding-top:clamp(24px,6vw,60px); padding-bottom:clamp(40px,7vw,80px); }
.kicker{ font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); }
h1{ font-family:var(--f-display); font-weight:700; letter-spacing:-.04em; line-height:.94; font-size:clamp(2.8rem,8.6vw,6.6rem); margin:0 0 .18em; text-wrap:balance; }
h1 .ac,h1 .big{ color:var(--ac); }
h1 .to{ color:var(--mut); }
.subhead{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.12; margin:0 0 1em; max-width:24ch; text-wrap:balance; }
.deck{ font-size:clamp(1.05rem,1.7vw,1.24rem); line-height:1.5; color:var(--mut); max-width:54ch; margin:0 0 2.2em; }

/* stat / conditions strip */
.conditions{ margin:0 0 clamp(30px,5vw,44px); }
.conditions .clab{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
.cond-row{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--hair); border-radius:4px; overflow:hidden; }
.cond{ flex:1 1 auto; min-width:150px; padding:16px clamp(14px,2vw,22px); border-right:1px solid var(--hair); }
.cond:last-child{ border-right:0; }
.cond .cv{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ac); letter-spacing:-.02em; line-height:1; }
.cond .ck{ font-size:12.5px; color:var(--mut); margin-top:7px; line-height:1.3; }

.hook{ font-family:var(--f-display); font-weight:600; letter-spacing:-.015em; font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.28; color:var(--fg); max-width:30ch; padding-left:20px; position:relative; }
.hook::before{ content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:3px; background:var(--ac); border-radius:2px; }
blockquote{ position:relative; margin:1.6em 0; padding-left:22px; font-family:var(--f-display); font-weight:600; font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.3; letter-spacing:-.01em; color:var(--fg); max-width:34ch; }
blockquote::before{ content:""; position:absolute; left:0; top:.14em; bottom:.14em; width:3px; background:var(--ac); border-radius:2px; }

/* pillars / architecture rows */
.pillars{ display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:34px; }
@media (min-width:760px){ .pillars{ grid-template-columns:1fr 1fr; } }
.pillar{ background:var(--bg); padding:clamp(24px,3vw,34px); transition:background .25s; }
.pillar:hover{ background:var(--surface); }
.pillar .pn{ font-family:var(--f-display); font-weight:700; font-size:13px; letter-spacing:.05em; color:var(--ac); display:block; margin-bottom:14px; }
.pillar p{ color:var(--mut); font-size:15.5px; margin:0; }
.aside{ margin-top:26px; color:var(--dim); font-size:15px; max-width:var(--measure); }

/* rows (label + tag) */
.rows{ border-top:1px solid var(--hair); margin-top:26px; }
.row-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 2px; border-bottom:1px solid var(--hair); transition:transform .25s cubic-bezier(.16,1,.3,1),color .25s; }
.row-item:hover{ transform:translateX(8px); }
.row-item .rn{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.05rem,1.8vw,1.3rem); letter-spacing:-.01em; min-width:0; }
.row-item .rt{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ac); white-space:nowrap; }
@media (max-width:560px){
  .row-item{ flex-direction:column; align-items:flex-start; gap:5px; }
  .row-item .rt{ white-space:normal; }
}

/* bordered panel (governed / callout) */
.panel{ background:var(--surface2); }
.panel-box{ border:1px solid var(--hair2); border-radius:6px; padding:clamp(26px,4vw,48px); max-width:var(--measure); }
.panel-tag{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ac); margin-bottom:20px; }
.panel-box ul{ list-style:none; margin:1.2em 0 0; padding:0; display:grid; gap:12px; }
.panel-box li{ position:relative; padding-left:24px; color:var(--mut); font-size:15.5px; }
.panel-box li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border:1.5px solid var(--ac); border-radius:2px; }

/* big-number hero (thin pages) */
.bignum{ font-family:var(--f-display); font-weight:700; letter-spacing:-.04em; font-size:clamp(4rem,15vw,11rem); line-height:.86; color:var(--ac); margin:0; font-variant-numeric:tabular-nums; }
.bignum-sub{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin:.4em 0 0; }

/* ---- CHARTS (draw in via case.js) --------------------------------------- */
.charts{ display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); margin:8px 0 clamp(30px,4vw,44px); }
@media (min-width:820px){ .charts.two{ grid-template-columns:1fr 1fr; } }
.chart{ background:var(--bg); padding:clamp(24px,3vw,36px); }
.chart .ctitle{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.chart .csub{ font-size:13.5px; color:var(--mut); margin-bottom:26px; }
.chart .csub b{ color:var(--ac); font-weight:600; }
.chart .cnote{ font-size:11.5px; color:var(--dim); margin-top:16px; font-style:italic; }
/* bar chart */
.cs-bars{ display:flex; align-items:flex-end; gap:clamp(16px,4vw,40px); min-height:220px; padding-top:34px; }
.cs-bar{ flex:1; display:flex; flex-direction:column; align-items:center; }
.cs-bar-fill{ position:relative; width:100%; max-width:96px; border-radius:4px 4px 0 0; background:var(--ac); height:0; }
.cs-bar-fill.muted{ background:var(--hair2); box-shadow:none; }
.cs-bar-fill.glow{ box-shadow:0 0 46px rgba(255,106,31,.24); }
.cs-bar-v{ position:absolute; top:-30px; left:0; right:0; text-align:center; font-family:var(--f-display); font-weight:700; font-size:clamp(1.1rem,2vw,1.6rem); letter-spacing:-.02em; color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cs-bar-fill.muted .cs-bar-v{ color:var(--mut); }
.cs-bar-k{ margin-top:14px; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); text-align:center; }
/* line/area chart */
.cs-line{ width:100%; height:200px; display:block; overflow:visible; }
.cs-line path[data-draw]{ fill:none; stroke:var(--ac); stroke-width:3; stroke-linecap:round; }
.cs-line .cs-area{ fill:var(--ac-soft); }
.cs-line circle{ fill:var(--ac); }
.cs-line text{ font-family:var(--f-body); }
/* timeline (durability) */
.cs-timeline{ position:relative; margin-top:14px; padding-left:22px; }
.cs-timeline::before{ content:""; position:absolute; left:4px; top:6px; bottom:6px; width:2px; background:var(--hair2); }
.cs-tl{ position:relative; padding:0 0 26px 22px; }
.cs-tl:last-child{ padding-bottom:0; }
.cs-tl::before{ content:""; position:absolute; left:-22px; top:4px; width:11px; height:11px; border-radius:50%; border:2px solid var(--ac); background:var(--bg); }
.cs-tl.hit::before{ background:var(--ac); box-shadow:0 0 0 4px rgba(255,106,31,.16); }
.cs-tl .cs-tl-t{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; }
.cs-tl .cs-tl-d{ font-size:13.5px; color:var(--mut); margin-top:3px; }

/* stat grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.cell{ background:var(--surface2); padding:clamp(22px,2.6vw,30px); transition:background .25s; }
.cell:hover{ background:var(--surface); }
.cell .n{ font-family:var(--f-display); font-weight:700; letter-spacing:-.025em; font-size:clamp(1.7rem,3.2vw,2.4rem); color:var(--fg); line-height:1; font-variant-numeric:tabular-nums; }
.cell .n em{ font-style:normal; color:var(--ac); }
.cell .k{ font-size:13.5px; color:var(--dim); margin-top:.6em; line-height:1.35; }

/* close */
.close .kill{ font-family:var(--f-display); font-weight:700; letter-spacing:-.03em; line-height:1.08; font-size:clamp(1.7rem,4vw,2.8rem); text-wrap:balance; max-width:24ch; margin:.2em 0 0; }
.close .kill span{ color:var(--ac); }

/* footer */
.sitefoot{ border-top:1px solid var(--hair); }
.sitefoot .foot{ max-width:var(--shell); margin:0 auto; padding:40px clamp(20px,5vw,48px) 64px; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between; font-size:13px; color:var(--dim); }
.sitefoot .fid{ color:var(--mut); }
.sitefoot .fid a{ color:var(--fg); text-decoration:none; border-bottom:1px solid var(--hair2); transition:color .18s,border-color .18s; }
.sitefoot .fid a:hover{ color:var(--ac); border-color:var(--ac); }
.sitefoot nav{ display:flex; gap:20px; flex-wrap:wrap; }
.sitefoot nav a{ color:var(--mut); text-decoration:none; transition:color .18s; }
.sitefoot nav a:hover{ color:var(--ac); }

/* reveals (staggered) */
.rv{ transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.cs-js .rv{ opacity:0; transform:translateY(18px); }
.rv.in{ opacity:1; transform:none; }
.rv.in .cond,.rv.in .cell,.rv.in .pillar{ animation:cs-pop .6s cubic-bezier(.16,1,.3,1) both; }
.rv.in .cond:nth-child(2),.rv.in .cell:nth-child(2),.rv.in .pillar:nth-child(2){ animation-delay:.06s; }
.rv.in .cond:nth-child(3),.rv.in .cell:nth-child(3),.rv.in .pillar:nth-child(3){ animation-delay:.12s; }
.rv.in .cond:nth-child(4),.rv.in .cell:nth-child(4),.rv.in .pillar:nth-child(4){ animation-delay:.18s; }
@keyframes cs-pop{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .cs-js .rv{ opacity:1; transform:none; } .rv{ transition:none; } .rv.in .cond,.rv.in .cell,.rv.in .pillar{ animation:none; } }