/* Case study pages. Built from the approved prototypes in dist/explore. */
@font-face{font-family:"Mona Sans";src:url(fonts/MonaSans.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
:root{--bg:#0C0C0B;--bg2:#151513;--ink:#F1EEE7;--dim:#8C8A84;--line:rgba(241,238,231,.14);--acc:#1EA7FF;--onAcc:#0C0C0B;--m:clamp(18px,3.3vw,48px);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:"Mona Sans",system-ui,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.eyebrow{display:block;font-size:clamp(16px,1.3vw,20px);font-weight:600;color:var(--dim)}
.hl{background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;background-size:0% 84%;background-position:0 55%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em;margin:0 -.1em;transition:color .35s}
.hl.on{color:var(--onAcc)}

/* section titles: the homepage "Selected Work" treatment, used for every section */
.st{display:flex;align-items:center;gap:28px}
.oh{position:relative;display:inline-block;flex:none;font-weight:800;letter-spacing:-.035em;line-height:1;padding-bottom:.08em;font-size:clamp(44px,4.8vw,80px)}
.oh .o{color:transparent;-webkit-text-stroke:1.2px rgba(241,238,231,.6)}
.oh .f{position:absolute;inset:0;color:var(--ink);clip-path:inset(0 100% 0 0)}
.st .rule{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.st .rule i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.n{display:block;font-size:15px;font-weight:700;color:var(--acc);margin-bottom:14px}

.nav{position:fixed;inset:0 0 auto 0;height:76px;z-index:60;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 var(--m);transition:background .4s,backdrop-filter .4s}
.nav.solid{background:rgba(12,12,11,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.logo{font-weight:900;font-size:22px;letter-spacing:-.06em;justify-self:start}
.nav-case,.nav-links{display:flex;gap:40px;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.nav-links{justify-self:end}
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.25}
.roll>span{display:block;transition:transform .55s var(--ease)}
.roll>span::after{content:attr(data-t);position:absolute;left:0;top:100%}
.roll:hover>span{transform:translateY(-100%)}
@media (max-width:860px){.nav-links{display:none}.nav-case{justify-self:end;gap:20px;font-size:13px}}

/* 1 HERO */
.hero{position:relative;height:100svh;overflow:hidden;background:#000}
.slides{position:absolute;inset:0}
.slides figure{position:absolute;inset:0;overflow:hidden;opacity:0}
.slides figure:first-child{opacity:1}
.slides img,.slides video{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;object-position:50% 30%}
.hero .shade{position:absolute;inset:0;z-index:5;background:linear-gradient(rgba(12,12,11,.35),rgba(12,12,11,0) 30%,rgba(12,12,11,0) 50%,rgba(12,12,11,.85))}
.hero .role{position:absolute;z-index:6;left:var(--m);bottom:calc(16.5vw + 40px);font-size:clamp(18px,1.5vw,24px);font-weight:600}
.brand{position:absolute;z-index:6;left:var(--m);right:var(--m);bottom:22px;font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.8;font-size:19.5vw;white-space:nowrap;overflow:hidden;padding-top:.04em}
.brand span{display:inline-block}
.ticks{position:absolute;z-index:6;right:var(--m);bottom:calc(16.5vw + 46px);display:flex;gap:6px}
.ticks i{width:28px;height:2px;background:rgba(241,238,231,.3);position:relative;overflow:hidden}
.ticks i b{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}

/* 2 STATEMENT: full width */
.statement{padding:clamp(130px,16vw,230px) var(--m) clamp(80px,9vw,130px)}
.statement p{margin-top:28px;font-weight:800;font-size:clamp(36px,4.8vw,92px);line-height:1.12;letter-spacing:-.04em}

/* 3 PROOF: light, wide numerals for contrast */
.proof{display:grid;grid-template-columns:repeat(3,1fr);margin:0 var(--m) clamp(140px,16vw,240px);border-top:1px solid var(--line)}
.pf{position:relative;padding:36px clamp(16px,2.4vw,40px) 0 0}
.pf + .pf{padding-left:clamp(16px,2.4vw,40px);border-left:1px solid var(--line)}
.pf .bar{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden}
.pf .bar i{position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
.pf .num{position:relative;display:inline-block;font-weight:800;font-size:clamp(64px,7.4vw,128px);line-height:.9;letter-spacing:-.045em;white-space:nowrap}
.pf .num .o{color:transparent;-webkit-text-stroke:1.2px rgba(241,238,231,.6)}
.pf .num .f{position:absolute;inset:0;color:var(--ink);clip-path:inset(0 100% 0 0)}
.pf b{display:block;margin-top:22px;font-size:clamp(18px,1.4vw,22px);font-weight:700;white-space:nowrap}
.pf span.ctx{display:block;margin-top:4px;font-size:clamp(15px,1.1vw,17px);color:var(--dim);white-space:nowrap}

/* 4 CHAPTERS: title, one line, then the work. Same every time. */
.chapter{padding:0 var(--m);margin-bottom:clamp(140px,16vw,240px)}
.chapter .lede{margin:20px 0 clamp(34px,3.6vw,52px);font-size:clamp(19px,1.6vw,26px);color:#d6d3cc;font-weight:500;white-space:nowrap}
.feature{aspect-ratio:var(--fr,16/9)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);margin-top:clamp(12px,1.6vw,24px)}
.strip figure .media{aspect-ratio:var(--r,4/5)}
.strip.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){.feature[style*="--frm"]{aspect-ratio:var(--frm)}}
.cap{display:block;margin-top:16px;font-size:clamp(18px,1.4vw,22px);font-weight:500;letter-spacing:-.015em}
.cap small{display:block;margin-top:2px;font-size:15px;color:var(--dim);font-weight:500;letter-spacing:0}
.venue .in{display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(18px,2vw,32px) calc(6% + clamp(18px,2vw,32px));background:radial-gradient(120% 70% at 50% 115%,rgba(30,167,255,.32),transparent 62%),#111110}
.venue .city{font-weight:800;font-size:clamp(34px,3.8vw,64px);letter-spacing:-.04em;line-height:.95;color:transparent;-webkit-text-stroke:1.2px rgba(241,238,231,.75)}
.venue .where{margin-top:12px;font-size:clamp(14px,1.1vw,17px);color:var(--dim);font-weight:500}
.media{position:relative;overflow:hidden;background:var(--bg2);clip-path:inset(100% 0% 0% 0%)}
.media .in{position:absolute;inset:-6% 0;will-change:transform}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.film{cursor:pointer}
.film .play{position:absolute;right:20px;bottom:20px;z-index:2;display:flex;align-items:center;gap:10px;background:rgba(12,12,11,.55);backdrop-filter:blur(8px);padding:10px 16px 10px 10px;border-radius:2px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.film .play i{width:30px;height:30px;border-radius:2px;background:var(--acc);color:var(--onAcc);display:grid;place-items:center;font-style:normal;font-size:11px}

/* 5 EIGHT YEARS: pinned moment */
.years{position:relative;height:230vh;margin-top:clamp(60px,8vw,120px)}
.years .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:40px!important;padding:0 var(--m);overflow:hidden}
.drift{position:absolute;left:0;top:50%;z-index:0;transform:translateY(-50%);white-space:nowrap;font-weight:800;font-size:34vw;line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(241,238,231,.08);pointer-events:none}
.drift span{margin-right:.15em;transition:-webkit-text-stroke-color .8s}
.drift span.on{-webkit-text-stroke-color:rgba(241,238,231,.22)}
.yglow{position:absolute;z-index:0;width:56vw;height:56vw;top:50%;margin-top:-28vw;left:-28vw;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(30,167,255,.22),rgba(30,167,255,0) 62%);filter:blur(12px);transition:left .9s cubic-bezier(.16,1,.3,1)}
.grain{position:absolute;inset:-50%;z-index:0;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,5%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}}
.years .st,.years .tl{position:relative;z-index:1}
.tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(60px,8vh,100px)}
.tl .track{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.tl .track i{position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
.ms{position:relative;padding-top:48px;padding-right:24px}
.ms .dot{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid rgba(241,238,231,.3);transition:.4s}
.ms.on .dot{border-color:var(--acc);background:var(--acc);box-shadow:0 0 0 6px rgba(30,167,255,.18)}
.ms .yr{position:relative;display:inline-block;font-weight:800;font-size:clamp(52px,5.4vw,92px);line-height:.9;letter-spacing:-.045em}
.ms .yr .o{color:transparent;-webkit-text-stroke:1.2px rgba(241,238,231,.5)}
.ms .yr .f{position:absolute;inset:0;color:var(--ink);clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease)}
.ms.on .yr .f{clip-path:inset(0 0 0 0)}
.ms h3{margin-top:20px;font-size:clamp(19px,1.5vw,24px);font-weight:700;white-space:nowrap;opacity:.35;transition:opacity .6s}
.ms p{margin-top:4px;color:var(--dim);font-size:clamp(15px,1.1vw,17px);white-space:nowrap;opacity:.35;transition:opacity .6s}
.ms.on h3,.ms.on p{opacity:1}

/* 6 LESSON: full screen */
.lesson{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--m)}
.lesson p{margin-top:32px;font-weight:800;font-size:clamp(40px,5.6vw,104px);line-height:1.1;letter-spacing:-.04em}
@media (max-width:860px){.statement p{line-height:1.32}.lesson p{line-height:1.32}}

/* NEXT: video, like the homepage cards */
.next{position:relative;display:block;height:90vh;overflow:hidden;background:#000}
.next video,.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.next .veil{position:absolute;inset:0;background:linear-gradient(rgba(12,12,11,.55),rgba(12,12,11,.2) 40%,rgba(12,12,11,.75));transition:opacity 1s var(--ease)}
.next:hover .veil{opacity:.6}
.next .eyebrow{position:absolute;left:var(--m);top:32px;color:var(--ink)}
.next b{position:absolute;left:var(--m);bottom:20px;font-weight:900;text-transform:uppercase;letter-spacing:-.05em;font-size:15vw;line-height:.8}

.lb{position:fixed;inset:0;z-index:80;background:rgba(5,5,5,.97);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .5s}
.lb.open{opacity:1;pointer-events:auto}
.lb video{width:min(92vw,160vh);aspect-ratio:16/9;background:#000}
.lb button{position:absolute;top:20px;right:var(--m);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:13px}

@media (max-width:860px){
  .st{display:block}.st .rule{display:none}.oh{white-space:normal;font-size:clamp(34px,9vw,60px)}
  .chapter .lede{white-space:normal}
  .drift,.yglow{display:none}
  .ms h3,.ms p{white-space:normal}
  .proof{border-top:0}
  .pf .num{font-size:clamp(56px,16vw,96px)}
  .proof{grid-template-columns:1fr}.pf + .pf{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:36px}
  .strip{grid-template-columns:1fr 1fr}
  .strip:not(.stack)>figure:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - clamp(12px,1.6vw,24px)/2)}
  .years{height:auto}.years .pin{position:relative;height:auto;padding-top:120px;padding-bottom:120px}
  .tl{grid-template-columns:1fr 1fr;row-gap:48px}.ms h3,.ms p{white-space:normal}
  .pf b,.pf span.ctx{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.media{clip-path:none}.oh .f,.ms .yr .f{clip-path:none}.st .rule i{transform:none}}

/* Art-directed ESPN film: preserve device framing on narrow screens. */
.hero--responsive-film .slides img,.hero--responsive-film .slides video{object-position:30% 30%}
@media(max-width:600px){
 .hero--responsive-film{height:min(125vw,85svh)}
 .hero--responsive-film .slides img,.hero--responsive-film .slides video{inset:0;width:100%;height:100%;object-position:50% 50%}
}
@media(prefers-reduced-motion:reduce){.hero--responsive-film video{display:none}}

/* complete compositions (UI boards, finished films): show the whole frame, no parallax overscan */
.media.fit-contain .in{inset:0}
.media.fit-contain img,.media.fit-contain video{object-fit:contain}
@media (max-width:860px){.strip.stack{grid-template-columns:1fr}}

/* glitch: sliced, offset copies of the image flicker in at random intervals */
.media.glitch .gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;will-change:transform,clip-path}
.media.glitch .gl1{mix-blend-mode:screen;filter:sepia(1) saturate(5) hue-rotate(140deg) brightness(.9)}
.feature + .cap + .media.feature{margin-top:clamp(40px,4.4vw,72px)}

/* framed: design artifacts presented on a charcoal board */
.media.framed{background:#1a1a19;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.media.framed .in{inset:8%}
.media.framed img,.media.framed video{filter:brightness(.92) drop-shadow(0 22px 28px rgba(0,0,0,.75))}
.media.feature + .media.feature{margin-top:clamp(40px,4.4vw,72px)}
.feature-end{margin-top:clamp(56px,6vw,104px)}