/* ---------- CASE STUDY: leaves the OS behind. Each project sets its own palette and type via CSS vars. ---------- */
#case{--pad:clamp(18px,5vw,84px);--c-line:color-mix(in srgb,var(--c-fg) 18%,transparent);
  position:fixed;inset:0;z-index:1500;overflow-y:auto;overflow-x:hidden;background:var(--c-bg);color:var(--c-fg);font-family:var(--f-body);scrollbar-width:thin;scrollbar-color:var(--c-line) transparent;overscroll-behavior:contain}
#case[hidden]{display:none}
#case :focus-visible{outline-color:var(--c-a)}
#case ::selection{background:var(--c-a);color:var(--c-bg)}
.cs-ui{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:14px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) 0;pointer-events:none}
.cs-ui>*{pointer-events:auto}
.cs-back,.cs-x{display:flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:99px;background:color-mix(in srgb,var(--c-bg) 68%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--c-line);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;transition:background .25s,color .25s,transform .4s var(--spring)}
.cs-back:hover,.cs-x:hover{background:var(--c-a);color:var(--c-bg);transform:scale(1.04)}
.cs-x{padding:0;width:38px;justify-content:center}
.cs-ui-t{flex:1;text-align:center;color:var(--c-dim);pointer-events:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-ui-n{color:var(--c-dim);pointer-events:none!important}
.cs-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:6;pointer-events:none}
.cs-prog i{display:block;height:100%;background:var(--c-a);transform:scaleX(0);transform-origin:left}
@media (max-width:640px){.cs-ui-t{display:none}.cs-ui-n{margin-left:auto}}

.cs-body{display:block}
.cs-body section{padding:clamp(44px,8vw,128px) var(--pad)}
.cs-title,.cs-split h2,.cs-text h2,.cs-statement,.cs-stats b,.cs-next b,.cs-step h3,.cs-qm,.cs-quote blockquote,.cs-mq-row span,.cs-intro p{font-family:var(--c-font);font-weight:var(--c-w);letter-spacing:var(--c-tr)}
#case[data-upper="1"] :is(.cs-title,.cs-split h2,.cs-text h2,.cs-statement,.cs-stats b,.cs-next b,.cs-step h3,.cs-mq-row span){text-transform:uppercase}
#case[data-italic="1"] :is(.cs-title,.cs-split h2,.cs-text h2,.cs-statement,.cs-step h3,.cs-quote blockquote,.cs-intro p,.cs-mq-row span,.cs-next b){font-style:italic}
#case[data-cond="1"] :is(.cs-title,.cs-statement,.cs-stats b,.cs-next b,.cs-mq-row span){font-variation-settings:'wdth' 75}
.cs-body .mono{color:var(--c-dim)}
.rvl{transform:translateY(46px);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.rvl.in{transform:none}
.cs-m{position:relative;overflow:hidden;background:color-mix(in srgb,var(--c-fg) 8%,transparent);width:100%}

/* hero */
.cs-hero{padding:0!important;position:relative}
.cs-meta{display:flex;gap:18px;flex-wrap:wrap}
.cs-meta span+span::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-right:18px;opacity:.6}
.cs-title{font-size:clamp(52px,15vw,300px);line-height:.86;margin:.06em 0 .1em;text-wrap:balance}
.cs-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .2em .2em;margin:-.16em -.2em -.2em}`n.cs-title.rev-done .w{overflow:visible}
.cs-title .wi{display:inline-block}
.cs-lede{max-width:36ch;font-size:clamp(16px,1.7vw,22px);line-height:1.4;color:var(--c-dim)}
.v-type .cs-hero-top{padding:clamp(90px,17vh,170px) var(--pad) clamp(18px,3vw,40px)}
.v-type .cs-title{font-size:clamp(70px,22vw,420px);margin-top:.1em}
.v-type .cs-hero-art{position:relative;will-change:transform}
.v-type .cs-hero-art .cs-m{aspect-ratio:21/9;max-height:80vh}
.v-type .cs-lede{padding:clamp(22px,3vw,44px) var(--pad) 0;margin-left:auto;margin-right:var(--pad);padding-inline:0}
.v-full{min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.v-full .cs-hero-bg{position:absolute;inset:-10% 0 0;will-change:transform}
.v-full .cs-hero-shade{position:absolute;inset:0;background:linear-gradient(transparent 35%,color-mix(in srgb,var(--c-bg) 92%,transparent))}
.v-full .cs-hero-copy{position:relative;padding:var(--pad);padding-top:120px;display:grid;gap:14px;width:100%}
.v-full .cs-title{font-size:clamp(48px,13vw,250px);margin-bottom:.04em}
.v-split{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;overflow:hidden}
.v-split .cs-hero-copy{padding:clamp(100px,16vh,160px) var(--pad) clamp(30px,6vw,70px);display:grid;gap:16px;align-content:end}
.v-split .cs-title{font-size:clamp(46px,8.6vw,170px)}
.v-split .cs-hero-art{position:relative;min-height:60vh}
.v-split .cs-hero-art .m{inset:-8% 0 0}
.v-stack{min-height:100svh;display:grid;align-content:end;padding:clamp(100px,16vh,160px) var(--pad) clamp(30px,6vw,70px)!important;overflow:hidden}
.v-stack .cs-hero-copy{display:grid;gap:12px;position:relative;z-index:2}
.v-stack .cs-title{font-size:clamp(70px,20vw,380px);line-height:.8}
.v-stack .line{display:block}
.v-stack .cs-hero-art{position:absolute;right:var(--pad);top:16vh;width:min(46vw,640px);transform:rotate(3deg);box-shadow:0 30px 80px -30px rgba(0,0,0,.45);z-index:1}
.v-stack .cs-lede{position:relative;z-index:2;margin-top:14px}
@media (max-width:760px){
  .v-split{grid-template-columns:1fr}.v-split .cs-hero-art{min-height:55vh;order:-1}
  .v-stack .cs-hero-art{position:relative;right:auto;top:auto;width:100%;margin-block:20px;transform:none}
  .v-stack{align-content:start;padding-top:96px!important}
}

/* sections */
.cs-intro p{font-size:clamp(24px,3.7vw,58px);line-height:1.12;max-width:22em;text-wrap:pretty;font-weight:calc(var(--c-w) - 200)}
.cs-intro{padding-left:calc(var(--pad) + clamp(0px,9vw,150px))!important}
.cs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px 30px;padding-block:clamp(26px,4vw,50px)!important}
.cs-facts div{display:grid;gap:8px;border-top:1px solid var(--c-line);padding-top:14px;align-content:start}
.cs-facts b{font-weight:500;font-size:17px;line-height:1.3}
.cs-text{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(20px,6vw,100px)}
.cs-text-l{display:grid;gap:18px;align-content:start}
.cs-text h2,.cs-split h2{font-size:clamp(30px,4.8vw,76px);line-height:.98;text-wrap:balance}
.cs-text-r,.cs-split-l{display:grid;gap:18px;align-content:start}
.cs-text-r p,.cs-split-l p{font-size:clamp(16px,1.35vw,19px);line-height:1.6;max-width:54ch;color:color-mix(in srgb,var(--c-fg) 84%,transparent)}
.cs-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,6vw,100px);align-items:start}
.cs-split-l{position:sticky;top:14vh}
.cs-full{padding-inline:0!important}
.cs-full .cs-m.wide{aspect-ratio:21/9}.cs-full .cs-m.tall{aspect-ratio:4/5;max-height:130vh}
.cs-cap{padding:14px var(--pad) 0;max-width:80ch}
.cs-duo{display:grid;gap:clamp(14px,3vw,44px);align-items:start}
.cs-duo.even{grid-template-columns:1fr 1fr}.cs-duo.wide-left{grid-template-columns:1.45fr 1fr}.cs-duo.wide-right{grid-template-columns:1fr 1.45fr}
.cs-duo .b{margin-top:clamp(0px,11vw,180px)}
.cs-duo .cs-cap{padding-inline:0}
.cs-grid{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:clamp(6px,1vw,14px)}
.cs-statement{padding-block:clamp(70px,13vw,220px)!important}
.cs-statement p{font-size:clamp(46px,11vw,200px);line-height:.9;max-width:12em;text-wrap:balance}
.cs-statement em{color:var(--c-a);font-style:inherit}
.cs-quote{display:grid;gap:18px;justify-items:start}
.cs-qm{font-size:clamp(90px,16vw,260px);line-height:.6;color:var(--c-a);height:.4em}
.cs-quote blockquote{font-size:clamp(28px,4.6vw,76px);line-height:1.05;max-width:18em;text-wrap:balance}
.cs-steps-h{margin-bottom:10px}
.cs-step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,6vw,100px);align-items:center;padding-block:clamp(26px,5vw,70px);border-top:1px solid var(--c-line)}
.cs-step:nth-of-type(even) .cs-step-t{order:2}
.cs-step-t{display:grid;gap:14px;align-content:center}
.cs-step h3{font-size:clamp(28px,4vw,62px);line-height:.98}
.cs-step p{max-width:40ch;line-height:1.55;font-size:clamp(15px,1.3vw,18px);color:color-mix(in srgb,var(--c-fg) 82%,transparent)}
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}
.cs-stats div{display:grid;gap:8px;border-top:1px solid var(--c-line);padding-top:18px}
.cs-stats b{font-size:clamp(56px,10vw,170px);line-height:.9;color:var(--c-a)}
.cs-marquee{padding:0!important;border-block:1px solid var(--c-line);overflow:hidden}
.cs-mq-track{display:flex;width:max-content;animation:mq 38s linear infinite;padding-block:clamp(14px,2.4vw,30px)}
.cs-mq-row{display:flex;flex:none}
.cs-mq-row span{font-size:clamp(34px,7vw,120px);line-height:1;padding-inline:clamp(14px,2.4vw,40px);white-space:nowrap;display:flex;align-items:center;gap:clamp(28px,5vw,80px)}
.cs-mq-row i{font-style:normal;color:var(--c-a);font-size:.5em}
@keyframes mq{to{transform:translateX(-50%)}}
.cs-video{display:block;position:relative;width:calc(100% - 2 * var(--pad));margin:clamp(30px,6vw,90px) auto;text-align:left}
.cs-video .cs-cap{padding-inline:0}
.cs-video .cs-m{border-radius:4px}
.cs-credits{display:grid;gap:22px}
.cs-credits dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px}
.cs-credits dl div{display:grid;gap:6px;border-top:1px solid var(--c-line);padding-top:12px}
.cs-credits dd{font-size:18px}
.cs-next{display:block;position:relative;overflow:hidden;text-decoration:none;padding:clamp(70px,13vw,200px) var(--pad);border-top:1px solid var(--c-line);color:inherit}
.cs-next b{display:block;font-size:clamp(46px,11vw,200px);line-height:.88;margin-top:16px;max-width:9em;position:relative;z-index:1;transition:transform .7s var(--spring)}
.cs-next:hover b{transform:translateX(1.5vw)}
.cs-next-art{position:absolute;right:var(--pad);top:50%;width:clamp(130px,24vw,360px);aspect-ratio:4/3;transform:translateY(-50%) rotate(4deg);border-radius:6px;overflow:hidden;transition:transform .8s var(--spring);box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.cs-next:hover .cs-next-art{transform:translateY(-50%) rotate(-1deg) scale(1.06)}

@media (max-width:760px){
  .cs-text,.cs-split,.cs-step{grid-template-columns:1fr}
  .cs-split-l{position:static}
  .cs-step:nth-of-type(even) .cs-step-t{order:0}
  .cs-duo.even,.cs-duo.wide-left,.cs-duo.wide-right{grid-template-columns:1fr}.cs-duo .b{margin-top:0}
  .cs-grid{grid-template-columns:repeat(2,1fr)}
  .cs-full .cs-m.wide{aspect-ratio:4/3}
  .cs-intro{padding-left:var(--pad)!important}
  .cs-next-art{opacity:.35}
}
@media (prefers-reduced-motion:reduce){.rvl{transform:none;transition:none}.cs-mq-track{animation:none}}

/* v2: openers for real images */
.v-stack .cs-hero-art{aspect-ratio:16/10;overflow:hidden;border-radius:6px}
.v-stack .cs-hero-art .m{position:absolute}
.v-type .cs-hero-art .cs-m{aspect-ratio:21/9}
.cs-facts{padding-top:clamp(30px,5vw,70px)!important}
#case[data-upper="1"] .bk-quote,#case[data-upper="1"] .bk-stat b{text-transform:uppercase}
#case[data-italic="1"] .bk-quote{font-style:italic}
.cs-ui::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 26px);background:linear-gradient(color-mix(in srgb,var(--c-bg) 90%,transparent) 55%,transparent);z-index:-1;pointer-events:none}
.cs-hero.v-full~*{position:relative}

/* ---------- ultra-wide (21:9) and large screens: the page keeps a tidy centred measure ---------- */
#case{--pad:max(clamp(18px,5vw,84px),calc((100% - 1560px) / 2 + clamp(18px,5vw,84px)))}
.cs-ui{padding-inline:clamp(18px,3vw,48px)}
.v-full .cs-hero-copy{padding:120px var(--pad) clamp(40px,6vw,84px)}
.v-type .cs-lede{padding:clamp(22px,3vw,44px) 0 0;margin-left:var(--pad);margin-right:auto}
.cs-title{font-size:clamp(52px,15vw,260px)}
.v-type .cs-title{font-size:clamp(70px,19vw,340px)}
.v-full .cs-title{font-size:clamp(48px,12vw,210px)}
.v-split .cs-title{font-size:clamp(46px,8vw,150px)}
.v-stack .cs-title{font-size:clamp(70px,17vw,300px)}
.v-type .cs-hero-art .cs-m{max-height:78vh}
@media (min-aspect-ratio:2/1){
  .v-full,.v-split,.v-stack{min-height:92svh}
  .v-split .cs-hero-art{min-height:92svh}
  .v-stack .cs-hero-art{width:min(34vw,640px)}
}
.cs-cap{max-width:70ch}

/* ---------- pull-to-continue + curtain ---------- */
.cs-next{--pull:0;transition:background .3s}
.cs-next b{transform:translate(calc(var(--pull) * 1.2vw),calc(var(--pull) * -26px))}
.cs-next:hover b{transform:translate(calc(var(--pull) * 1.2vw + 1.5vw),calc(var(--pull) * -26px))}
.cs-next-art{scale:calc(1 + var(--pull) * .14)}
.cs-pull{position:absolute;left:var(--pad);bottom:clamp(18px,2.6vw,36px);display:flex;align-items:center;gap:12px;color:var(--c-dim);z-index:1}
.cs-pull i{display:block;width:clamp(90px,14vw,180px);height:2px;background:var(--c-line);position:relative;overflow:hidden}
.cs-pull i::after{content:"";position:absolute;inset:0;background:var(--c-a);transform:scaleX(var(--pull));transform-origin:left}
.cs-pull em{font-style:normal}
.cs-curtain{position:fixed;inset:0;z-index:1700;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;padding:24px;overflow:hidden;pointer-events:all}
.cs-curtain b{font-weight:var(--c-w);letter-spacing:var(--c-tr);font-size:clamp(46px,11vw,210px);line-height:.9;max-width:12em;text-wrap:balance}
.cs-curtain[data-upper="1"] b{text-transform:uppercase}
.cs-curtain[data-italic="1"] b{font-style:italic}
.cs-curtain .mono{opacity:.6}
@media (prefers-reduced-motion:reduce){.cs-next b,.cs-next-art{transform:none;scale:1}}