/* CASE STUDY DESIGN SYSTEM: tokens + blocks. See CASE_STUDY_SYSTEM.md. No per-page CSS needed. */
:root{
 /* spacing scale */ --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:96px;--s8:160px;
 /* containers */ --w-content:1120px;--w-wide:1440px;--pad:clamp(20px,4vw,56px);--gap:clamp(12px,2vw,28px);--block:clamp(64px,10vh,120px);
 /* colours */ --ink:#0B0B0B;--cream:#F2EAD8;--dim:rgba(242,234,216,.55);--text:rgba(242,234,216,.85);--red:#F73A2D;
 /* motion */ --reveal-y:24px;--reveal-t:500ms;--ease:cubic-bezier(.2,.8,.2,1)
}
html{background:var(--ink)}body{background:var(--ink);color:var(--cream);font:16px/1.6 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@font-face{font-family:Reenie;src:url(ReenieBeanie.ttf) format("truetype");font-display:swap}
.cs{padding-top:calc(88px + env(safe-area-inset-top))}
/* type scale */
.t-display{font:400 clamp(40px,6vw,88px)/.95 'WONDA Display',sans-serif;text-transform:uppercase;letter-spacing:-.02em;margin:0}
.t-h2{font:400 clamp(28px,4vw,56px)/1.02 'WONDA Display',sans-serif;text-transform:uppercase;margin:0;text-wrap:balance}
.t-label{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.t-body{font-size:16px;line-height:1.6;color:var(--text);max-width:34em}
.t-caption{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.t-hand{font:clamp(26px,2.6vw,38px)/1.15 Reenie,cursive;margin:0}
/* layout */
.cb{padding:var(--block) var(--pad) 0;max-width:var(--w-wide);margin:0 auto}
.cb.tight{padding-top:var(--s5)}
.cb>.content{max-width:var(--w-content);margin-inline:auto}
.cb .lab{display:block;margin:0 0 var(--s4)}
.cb figure{margin:0}.cb figure img,.cb figure video{display:block;width:100%;height:auto;background:#141413}.cb figcaption{margin-top:10px}
.cb .link{display:inline-flex;align-items:center;min-height:44px;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor}
/* reveal */
.rv{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--reveal-t) ease,transform var(--reveal-t) var(--ease);transition-delay:calc(var(--d,0)*90ms)}.rv.in{opacity:1;transform:none}
/* hero */
.cb-hero{padding-top:var(--s5)}.cb-hero h1{margin:0 0 var(--s5)}
.cb-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin:0}.cb-meta dt{margin:0 0 6px}.cb-meta dd{margin:0;font-size:15px;line-height:1.4}
/* credits in the hero (place:'top') */
.cb-hcred{display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap;margin:var(--s4) 0 0}.cb-hcred dt{margin:0}.cb-hcred dd{margin:0;font-size:15px}.cb-hcred a:hover{text-decoration:underline}
/* player */
.cb-player{width:var(--pw,72%)}.cb-player.center{margin-inline:auto}.cb-player.full{width:100%}
.cb-pbox{position:relative;background:#000;overflow:hidden}.cb-pbox video,.cb-pbox img,.cb-pbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.cb-play{position:absolute;inset:0;display:grid;place-items:center;background:none;border:0;cursor:pointer}.cb-play i{width:72px;height:72px;border-radius:50%;border:2px solid var(--cream);background:rgba(11,11,11,.45);display:grid;place-items:center}.cb-play i:after{content:'';margin-left:6px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--cream)}
/* text */
.cb-text{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,6vw,96px);align-items:start}.cb-text p{margin:0 0 20px}
.cb-quote{font:clamp(30px,4vw,56px)/1.1 Reenie,cursive;max-width:18em;margin:0}
/* media layouts */
.cb-pair{display:grid;gap:var(--gap);align-items:end}.cb-pair.s6-6{grid-template-columns:1fr 1fr}.cb-pair.s5-7{grid-template-columns:5fr 7fr}.cb-pair.s7-5{grid-template-columns:7fr 5fr}.cb-pair.offset>*:nth-child(2){margin-top:clamp(24px,8vw,120px)}
.cb-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:end}
.cb-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}.cb-grid>.l{grid-column:span 6}.cb-grid>.m{grid-column:span 4}.cb-grid>.s{grid-column:span 3}
.cb-note{align-self:center}.cb-note .t-hand{margin:0 0 var(--s3)}
.cb-cw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}.cb-cw figure{transition:transform .5s var(--ease)}.cb-cw figure:hover{transform:scale(1.02)}
.cb-spreads{display:grid;gap:var(--gap)}
.cb-logo{display:grid;place-items:center;padding:clamp(24px,6vw,96px);background:var(--bg,#fff)}.cb-logo img{max-width:min(420px,100%);background:none!important}
.cb-pal{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--gap)}.cb-sw{aspect-ratio:3/4;padding:var(--s3);display:flex;flex-direction:column;justify-content:flex-end;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase}.cb-sw b{font:400 18px 'WONDA Display',sans-serif;display:block;text-transform:none;margin-bottom:4px}
.cb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--gap)}.cb-stats b{display:block;font:400 clamp(36px,5vw,72px)/1 'WONDA Display',sans-serif}
.cb-store{display:grid;grid-template-columns:8fr 3fr;gap:var(--gap);align-items:end}
.cb-browser{border-radius:10px;overflow:hidden;background:#1b1b1a;box-shadow:0 24px 60px rgba(0,0,0,.5)}.cb-bbar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#242423}.cb-bbar i{width:10px;height:10px;border-radius:50%;background:#555}.cb-bbar span{margin-left:12px;flex:1;max-width:320px;padding:4px 12px;border-radius:99px;background:var(--ink);color:rgba(242,234,216,.7);font:11px var(--mono)}.cb-browser img{display:block;width:100%;height:auto}
.cb-phone{border:9px solid #242423;border-radius:34px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.5);max-width:300px}.cb-phone img{display:block;width:100%;height:auto}
.cb-credits{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:12px 24px;margin:0}.cb-credits dt{padding-top:4px}.cb-credits dd{margin:0}
@media (max-width:900px){.cb-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.cb-text,.cb-pair,.cb-store{grid-template-columns:1fr}.cb-pair.offset>*:nth-child(2){margin-top:0}.cb-trio{grid-template-columns:1fr 1fr}.cb-grid>.l,.cb-grid>.m{grid-column:span 6}.cb-grid>.s{grid-column:span 6}.cb-phone{margin:0 auto}.cb-credits{grid-template-columns:1fr}.cb-player{width:100%}}
@media (max-width:700px){.cb-cw{grid-template-columns:1fr}.cb-pal{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.cb-cw figure{transition:none}}