/* Case study, third version: read like a monograph, in the page's own flow. */
.c3{background:var(--paper)}
.c3 .bar .mark{visibility:visible;opacity:1}
.c3 .bar{opacity:1}
/* the key motion, full screen, with the name */
.c3h{position:relative;height:100vh;height:100svh;overflow:hidden;background:#0c0c0d;color:var(--paper)}
.c3v,.c3v video,.c3v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.c3t{position:absolute;left:var(--g);right:var(--g);bottom:max(26px,env(safe-area-inset-bottom,0px));mix-blend-mode:difference;color:#fff}
.c3k{margin:0 0 .6em;font-size:15px}
.c3h h1{margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(64px,12vw,280px);line-height:.86;letter-spacing:-.025em}
/* the statement and the facts */
.c3i{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:clamp(56px,7vw,128px);padding:clamp(96px,14vw,240px) var(--g) 0}
.c3s{grid-column:1/9;margin:0;font-family:var(--didot);font-size:clamp(36px,4.6vw,104px);line-height:1.02;letter-spacing:-.016em;text-wrap:balance}
.c3f{grid-column:10/13;margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:1.4em;row-gap:.7em;font-size:14px;line-height:1.45;align-content:start}
.c3f dt{color:var(--mute)}.c3f dd{margin:0}
.c3f a{text-underline-offset:3px;text-decoration-thickness:1px}
.c3b{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}
.c3b h2{margin:0 0 .8em;font-size:15px;font-weight:500}
.c3b p{margin:0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.52;max-width:42ch}
/* chapters */
.c3c{margin-top:clamp(140px,20vw,320px)}
.chh{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:16px var(--g) 0;border-top:1px solid var(--ink);margin:0 0 clamp(40px,6vw,96px)}
.chn{grid-column:1/2;font-size:15px;font-variant-numeric:tabular-nums}
.chh h2{grid-column:2/8;margin:0;font-family:var(--didot);font-weight:400;font-size:var(--h2);line-height:.92;letter-spacing:-.016em}
.chp{grid-column:9/13;margin:.4em 0 0;font-size:clamp(15px,.45vw + 10px,18px);line-height:1.52;max-width:40ch}
.r{margin:clamp(40px,6vw,112px) 0 0}
.r figure,figure.r{margin:0}
.r img,.r video{display:block;width:100%;height:auto;background:#e8e6e1}
.r figcaption,.r .rc{margin:12px 0 0;font-size:14px;line-height:1.45;max-width:56ch}
.full figcaption{padding:0 var(--g)}
.full.dark{background:#0c0c0d;color:var(--paper)}
.full.dark figcaption{padding:12px var(--g) 18px;margin:0}
.wide{padding:0 calc(var(--g) + (100% - 13 * var(--g)) / 12 + var(--g))}
.crop,.pair,.trio{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g)}
.crop>img,.crop>video{grid-column:var(--c)}
.crop figcaption{grid-column:var(--c)}
.pair figure{grid-column:var(--c);grid-row:1}
.pair.end{align-items:end}
.pair.offset figure:last-child{margin-top:18vh}
.trio figure{grid-column:span 4}
.phones{padding:clamp(56px,8vw,128px) var(--g);background:var(--ink);color:var(--paper)}
.phones .pr{display:flex;justify-content:center;gap:clamp(14px,2.6vw,48px)}
.phones figure{flex:0 1 auto;width:min(18vw,calc((100svh - 200px) * .4615))}
.phones img,.phones video{border-radius:clamp(12px,1.6vw,26px);background:#1a1a1a}
.phones .rc{text-align:center;margin:22px auto 0}
.spec{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:86svh;background:var(--bg);color:var(--fg);padding:clamp(48px,8vh,96px) var(--g)}
.spec .sv{width:min(46vw,640px)}
.spec .sv svg{display:block;width:100%;height:auto}
.spec .sv svg *{fill:currentColor}
.spec figcaption{text-align:center;margin-top:clamp(28px,5vh,56px)}
.tx{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g)}
.tx p{grid-column:2/10;margin:0;font-family:var(--didot);font-size:clamp(30px,3.4vw,76px);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
/* pictures rise once into place as they arrive; films play only on screen */
.js .c3 .r figure,.js .c3 figure.r{opacity:0;transform:translateY(40px);transition:opacity .6s linear,transform 1.2s cubic-bezier(.16,1,.3,1)}
.js .c3 .r figure.in,.js .c3 figure.r.in{opacity:1;transform:none}
/* next */
.c3n{position:relative;display:block;margin-top:clamp(140px,20vw,320px);padding:clamp(56px,8vw,128px) var(--g);background:#0c0c0d;color:var(--paper);text-decoration:none}
.c3n .k{display:block;font-size:15px;margin-bottom:.6em}
.c3n .n{display:block;font-family:var(--didot);font-size:clamp(60px,10.5vw,230px);line-height:.92;letter-spacing:-.02em}
.c3n:hover .n{font-style:italic}
.c3 .foot{padding-top:clamp(40px,5vw,80px)}
@media (max-aspect-ratio:17/20){
  .c3h h1{font-size:clamp(46px,14vw,84px)}
  .c3i{grid-template-columns:1fr;row-gap:48px}.c3s,.c3f,.c3b{grid-column:1/-1}.c3b{grid-template-columns:1fr;row-gap:28px}
  .chh{grid-template-columns:2.2em 1fr;row-gap:.6em}.chn{grid-column:1}.chh h2,.chp{grid-column:2}
  .crop,.pair,.trio,.tx{grid-template-columns:1fr;row-gap:24px}
  .crop>img,.crop>video,.crop figcaption,.pair figure,.trio figure,.tx p{grid-column:1/-1!important;grid-row:auto!important}
  .pair.offset figure:last-child{margin-top:0}
  .wide{padding:0 var(--g)}
  .phones .pr{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .phones figure{width:62vw;flex:none;scroll-snap-align:center}
  .spec .sv{width:72vw}
}
@media (prefers-reduced-motion:reduce){.js .c3 .r figure,.js .c3 figure.r{opacity:1;transform:none;transition:none}}
.phones figure{width:min(15.6vw,calc((100svh - 220px) * .4615))}
.phones .pr{gap:clamp(12px,1.8vw,32px)}
/* the name sits on paper under the film, never over the site's own type */
.c3h{height:auto;aspect-ratio:16/9;max-height:100svh;width:100%}
.c3n1{grid-column:1/-1}
.c3n1 .c3k{margin:0 0 .8em;font-size:15px;color:var(--mute)}
.c3n1 h1{margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(64px,11vw,260px);line-height:.88;letter-spacing:-.025em}
.c3i{padding-top:clamp(40px,6vw,96px)}
.spec{width:100%}
.full + .full{margin-top:clamp(20px,2.4vw,40px)}
/* the opening film loses the site's own top bar, which would sit under ours */
.c3v{overflow:hidden}
.c3v video{top:-6.5%;height:113%}
/* the case reads on paper; recordings and prints sit on it with a hairline, never inside a white box */
.r img,.r video{outline:1px solid rgba(12,12,13,.1);outline-offset:-1px}
.c3c{margin-top:clamp(88px,10vw,168px)}
.chh{margin-bottom:clamp(28px,3.4vw,56px)}
.r{margin-top:clamp(28px,3.4vw,56px)}
.full + .full{margin-top:clamp(12px,1.4vw,24px)}
.spec{min-height:70svh}
.c3n{margin-top:clamp(88px,10vw,168px)}
/* everything on paper: the phone rows, the dark film rows and the way to the next case lose their black grounds */
.phones{background:none;color:var(--ink)}
.phones img,.phones video{background:#e8e6e1;outline:1px solid rgba(12,12,13,.12);outline-offset:-1px}
.phones .rc{color:var(--mute)}
.full.dark{background:none;color:inherit}
.full.dark figcaption{padding:0;margin-top:10px}
.c3n{background:none;color:var(--ink);border-top:1px solid var(--ink);margin-left:var(--g);margin-right:var(--g);padding-left:0;padding-right:0}
.c3n .k{color:var(--mute)}
@media (max-aspect-ratio:17/20){
  /* on a phone the screens are shown at a size you can read, in a row you swipe */
  .phones{padding:clamp(40px,10vw,64px) 0}
  .phones .pr{padding:0 var(--g) 6px;scroll-padding:0 var(--g)}
  .phones figure{width:62vw}
  .phones .rc{padding:0 var(--g)}
}
/* the opening film is shown whole, at its own 16:9 and never enlarged, so the site's own type is never cut; it starts
   under our bar on paper, so the two top bars never sit on each other */
.c3h{--c3bar:72px;height:auto;max-height:none;aspect-ratio:auto;width:100%;padding-top:var(--c3bar);background:var(--paper);overflow:visible}
.c3v{position:relative;inset:auto;margin:0 auto;width:min(100% - 2 * var(--g),calc((100svh - var(--c3bar) - var(--g)) * 16 / 9));height:auto;aspect-ratio:16/9;overflow:hidden;background:#0c0c0d}
.c3v video,.c3v img{position:absolute;inset:0;top:0;width:100%;height:100%;object-fit:contain;outline:1px solid rgba(12,12,13,.1);outline-offset:-1px}
@media (max-aspect-ratio:17/20){.c3h{--c3bar:60px}.c3v{width:100%}}