/* Case pages. The work first, full screen, in its own film; then one sentence and the facts;
   then the site screen by screen, each at the largest size the screen allows and never cropped, one laid over the last
   like the pages of a book; then the work in motion, on a phone, its mark, its film, and the next work. */
.case-page{background:var(--paper)}
.case-page .bar .mark{visibility:visible}
.case-page .sh{margin:0;padding:clamp(96px,12vw,200px) var(--g) clamp(28px,3.4vw,56px);font-family:var(--didot);font-weight:400;font-size:var(--h2);line-height:.98;letter-spacing:-.015em}
.case-page .cap,.case-page figcaption{font-size:14px;line-height:1.45}

/* ---- 1. the trailer ---- */
.cv{position:relative;height:100vh;height:100svh;overflow:hidden;background:#0c0c0d;color:var(--paper)}
.cvv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cvt{position:absolute;left:var(--g);right:var(--g);bottom:max(26px,env(safe-area-inset-bottom,0px))}
.cv.ink{color:var(--ink)}
.cvk{margin:0 0 .6em;font-size:15px}
.cv h1{margin:0 0 .14em;font-family:var(--didot);font-weight:400;font-size:clamp(60px,10.5vw,230px);line-height:.92;letter-spacing:-.02em}
.cvr{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:start;font-size:15px;line-height:1.45}
.cvr p{margin:0}.cvr .l{grid-column:1/6;max-width:46ch}.cvr .m{grid-column:7/10}.cvr .o{grid-column:10/13;text-align:right}
.cvr a{text-underline-offset:4px;text-decoration-thickness:1px}

/* ---- 2. the sentence and the facts ---- */
.ci{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:clamp(56px,7vw,128px);padding:clamp(96px,12vw,200px) var(--g) clamp(24px,3vw,48px)}
.ci .cs-say{grid-column:1/9;margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(34px,4.3vw,96px);line-height:1.04;letter-spacing:-.014em;max-width:18ch;text-wrap:balance}
.ci .facts{grid-column:10/13;margin:0;font-size:14px;line-height:1.45;display:grid;grid-template-columns:auto 1fr;column-gap:1.4em;row-gap:.7em;align-content:start}
.ci dt{color:var(--mute)}.ci dd{margin:0}
.ci dd a{text-underline-offset:3px;text-decoration-thickness:1px}
.ci .three{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--g);border-top:1px solid var(--ink);padding-top:18px}
.ci h2{margin:0 0 .8em;font-size:15px;font-weight:500}
.ci .three p{margin:0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.52;max-width:42ch}

/* ---- 3. the site, screen by screen: each one stays while the next is laid over it, and its light drops ---- */
.sc{position:relative}
.sc .s{position:sticky;top:0;height:100vh;height:100svh;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(64px,8vh,96px) var(--g) clamp(36px,5vh,64px);background:var(--paper)}
.sc .s img{width:min(100%,calc((100svh - clamp(64px,8vh,96px) - clamp(36px,5vh,64px) - 52px) * var(--ar,1.6)));height:auto;outline:1px solid rgba(12,12,13,.1);outline-offset:-1px;will-change:filter}
.sc figcaption{width:min(100%,calc((100svh - clamp(64px,8vh,96px) - clamp(36px,5vh,64px) - 52px) * var(--ar,1.6)));display:flex;gap:1.1em}
.sc .n,.fm .n{font-variant-numeric:tabular-nums;color:var(--mute);flex:none}
.sc .sn{margin:0;padding:24px var(--g) 0;font-size:13px;color:var(--mute)}

/* ---- 4. in motion ---- */
.mo .mv{margin:0 0 clamp(48px,6vw,96px)}
.mo video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#e8e6e1}
.mo figcaption{padding:14px var(--g) 0;max-width:70ch}

/* ---- 5. the posters, as they were printed ---- */
.po .row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--g);padding:0 var(--g)}
.po img{width:100%;height:auto;outline:1px solid rgba(12,12,13,.1);outline-offset:-1px}
.po .cap{margin:0;padding:16px var(--g) 0;max-width:80ch}

/* ---- 6. on a phone ---- */
.ph{background:var(--ink);color:var(--paper);padding-bottom:clamp(64px,8vw,128px);margin-top:clamp(64px,8vw,128px)}
.ph .row{display:flex;justify-content:center;gap:clamp(16px,4vw,72px);padding:0 var(--g)}
.ph img{--pw:min(24vw,calc((100svh - 160px) * .4615));width:var(--pw);height:auto;border-radius:calc(var(--pw) * .12);outline:1px solid rgba(244,243,240,.16);outline-offset:-1px}
.ph .cap{margin:0;padding:22px var(--g) 0;text-align:center}

/* ---- 7. the mark ---- */
.mk{min-height:86vh;min-height:86svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(40px,6vh,80px);color:var(--paper);padding:clamp(64px,10vh,120px) var(--g)}
.mk img{width:clamp(220px,38vw,640px);height:auto}
.mk .cap{margin:0;text-align:center}
.ph + .mk{margin-top:-1px}

/* ---- 8. the film ---- */
.fm figure{margin:0}
.fm video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0c0c0d}
.fm figcaption{display:flex;gap:1.1em;padding:14px var(--g) 0}

/* ---- 9. the next work ---- */
.nx{position:relative;display:block;height:100vh;height:100svh;margin-top:clamp(96px,12vw,200px);overflow:hidden;background:#0c0c0d;color:var(--paper);text-decoration:none}
.nx video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42);transition:filter .5s}
.nx:hover video{filter:brightness(.6)}
.nxk{position:absolute;left:var(--g);top:50%;font-size:15px;transform:translateY(-2.4em)}
.nxn{position:absolute;left:var(--g);right:var(--g);top:50%;font-family:var(--didot);font-size:clamp(60px,10.5vw,230px);line-height:.92;letter-spacing:-.02em}
.case-page .foot{padding-top:clamp(40px,5vw,80px)}

@media (max-width:760px){
  .cvr{grid-template-columns:1fr}.cvr .l,.cvr .m,.cvr .o{grid-column:1/-1;text-align:left;margin-top:.5em}
  .cv h1{font-size:clamp(46px,14vw,84px)}
  .ci{grid-template-columns:1fr;row-gap:48px}.ci .cs-say,.ci .facts{grid-column:1/-1}
  .ci .three{grid-template-columns:1fr;row-gap:32px}
  .case-page .sh{font-size:clamp(34px,9vw,56px)}
  .sc .s{position:relative;height:auto;padding:0 0 40px;gap:10px;background:none}
  .sc .s img{width:100%;outline:none}
  .sc figcaption{width:auto;padding:0 var(--g)}
  .po .row{grid-template-columns:repeat(2,1fr)}
  .ph .row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .ph img{--pw:64vw;scroll-snap-align:center;flex:none}
  .nxn{font-size:clamp(46px,14vw,84px)}
}
@media (prefers-reduced-motion:reduce){.sc .s img{filter:none!important}}

/* ---- essays: the photograph and the title, then the text in one column ---- */
.ecv{position:relative;height:100vh;height:100svh;overflow:hidden;background:#0c0c0d;color:var(--paper)}
.ecv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ecv .dim{position:absolute;inset:0;background:rgba(12,12,13,.38)}
.et{position:absolute;left:var(--g);right:var(--g);bottom:max(26px,env(safe-area-inset-bottom,0px))}
.ek{margin:0 0 .6em;font-size:15px}
.et h1{margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(56px,9vw,200px);line-height:.94;letter-spacing:-.02em;max-width:14ch;text-wrap:balance}
.etx{max-width:34em;margin:0 auto;padding:clamp(96px,12vw,200px) var(--g) 0;font-size:clamp(17px,.5vw + 12px,21px);line-height:1.6}
.etx p{margin:0 0 1.15em}
.etx .lead{font-family:var(--didot);font-size:1.62em;line-height:1.18;letter-spacing:-.008em;margin-bottom:1.1em}
.etx .ecr{margin-top:3em;font-size:13px;color:var(--mute)}
.enx{display:flex;justify-content:space-between;align-items:end;gap:var(--g);margin:clamp(96px,12vw,200px) var(--g) 0;padding-top:18px;border-top:1px solid var(--ink)}
.enx a{text-decoration:none}
.enx .k{display:block;font-size:15px;margin-bottom:.4em}
.enx .n{display:block;font-family:var(--didot);font-size:clamp(40px,5.2vw,112px);line-height:.98;letter-spacing:-.015em}
.enx a:hover .n{font-style:italic}
.enx .back{font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:760px){.et h1{font-size:clamp(44px,13vw,80px)}.enx{flex-direction:column;align-items:start}}