/* Karnak v2. The site is a book: the sacred on the left page, the rational on the right, the name on the spine.
   Everything hangs from one line, 20% down the screen, where the obelisk, the K and the tower meet.
   Didot for the voice, Helvetica for the facts. Cuts are hard; only light moves. */
:root{
  --paper:#f4f3f0;--ink:#0c0c0d;--mute:#6b6a65;--rule:#cdcbc5;
  --didot:Didot,"Bodoni 72","Bodoni Moda",Georgia,serif;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --spine:clamp(64px,7.2vw,190px);--page:clamp(300px,27vw,560px);--strip:clamp(140px,21vh,240px);
  --g:clamp(16px,1.6vw,32px);--line:20%;
  --h2:clamp(40px,5.2vw,112px);--say:clamp(30px,3.1vw,66px);
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(15px,.55vw + 8px,20px);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
img,canvas,svg{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;z-index:20;left:16px;top:-80px;background:var(--ink);color:var(--paper);padding:8px 12px;text-decoration:none}.skip:focus{top:12px}
::selection{background:var(--ink);color:var(--paper)}

/* ---- the bar: white, inverting whatever is under it, so it reads on stone, sky and paper alike ---- */
.bar{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:baseline;padding:max(18px,env(safe-area-inset-top,0px)) var(--g) 0;color:#fff;mix-blend-mode:difference;pointer-events:none}
.bar a{pointer-events:auto;text-decoration:none}
.mark{font-family:var(--didot);font-size:26px;line-height:1;visibility:hidden}
.past .mark{visibility:visible}
.bar nav{display:flex;gap:clamp(12px,1.4vw,24px);font-size:15px;font-weight:500}
.bar nav a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---- the drawing that opens the site: guides, then the outline, then the ink ---- */
#intro{position:fixed;inset:0;z-index:30;background:var(--paper)}
#intro svg{position:absolute;inset:0;width:100%;height:100%}
#intro .gd{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55;visibility:hidden}
#intro .gd.on{visibility:visible}
#intro .wm{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
#intro .wm.ink{fill:var(--ink);stroke:none}
#intro .lab{position:absolute;font-size:11px;line-height:1;color:var(--mute);visibility:hidden;white-space:nowrap}
#intro .lab.on{visibility:visible}
.done #intro{display:none}

/* ---- first screen ---- */
.open{position:relative;height:100vh;height:100svh;display:grid;grid-template-columns:1fr var(--spine) 1fr;overflow:hidden}
.half{margin:0;position:relative;overflow:hidden;background:var(--paper)}
.half img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:45% 20%;max-width:none;transform-origin:0 0}
.laid .half img{object-fit:fill}
.spine{position:relative;background:var(--paper)}
.spine .name{position:absolute;top:var(--line);left:50%;transform:translateX(-50%);width:calc(var(--spine)*.74);height:auto;overflow:visible}
.spine .name path{fill:var(--ink)}
.spine .guides i{position:absolute;top:0;bottom:0;width:1px;background:var(--ink);opacity:.4;visibility:hidden}
.spine:hover .guides i{visibility:visible}
.clocks{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom,0px));margin:0;display:flex;flex-direction:column;gap:12px;text-align:center;font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}
/* the line the three tips share, drawn so it can be seen */
.tip{position:absolute;z-index:2;left:0;right:0;top:var(--line);height:1px;background:#fff;mix-blend-mode:difference;pointer-events:none}
.tip span{position:absolute;bottom:7px;font-size:12px;line-height:1.3;color:#fff;white-space:nowrap}
.tip .tl{left:var(--g)}.tip .tr{right:var(--g);text-align:right}
/* the opening as hard cuts */
.js .half img,.js .clocks,.js .tip,.js .bar{visibility:hidden}
.s1 .eg img,.s2 .hk img,.s3 .clocks,.s3 .tip,.s3 .bar{visibility:visible}

/* ---- thesis: four spreads, the spine opened into a page ---- */
.thesis{position:relative;height:540vh}
.thesis .stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr var(--page) 1fr;overflow:hidden;background:var(--paper)}
.cell{position:relative;overflow:hidden}
.cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.cell img.on{visibility:visible}
.page{position:relative}
.say{position:absolute;left:var(--g);right:var(--g);top:var(--line);margin:0;font-family:var(--didot);font-weight:400;font-size:var(--say);line-height:1.06;letter-spacing:-.012em;visibility:hidden;text-wrap:balance}
.say.on{visibility:visible}
.say em{font-style:italic}
.from{position:absolute;left:var(--g);right:var(--g);bottom:max(20px,env(safe-area-inset-bottom,0px));margin:0;font-size:12px;line-height:1.4;color:var(--mute);visibility:hidden}
.from.on{visibility:visible}

/* ---- work: one plate at a time, lit from its own sign ---- */
.works{position:relative;height:1000vh}
.works .stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:1fr var(--strip);overflow:hidden;background:var(--paper)}
.plate{position:relative;overflow:hidden;background:var(--paper)}
.plate canvas{position:absolute;inset:0;width:100%;height:100%}
.plate .still{position:absolute;inset:4.5% 3%;width:94%;height:91%;object-fit:contain;visibility:hidden}
.nogl .plate .still.on{visibility:visible}
.strip{position:relative;background:var(--paper)}
.wc{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:clamp(16px,2.4vh,30px) var(--g);visibility:hidden;align-content:start}
.wc.on{visibility:visible}
.wc h3{grid-column:1/7;white-space:nowrap;margin:0;font-family:var(--didot);font-weight:400;font-size:var(--h2);line-height:.92;letter-spacing:-.015em}
.wc .wl{grid-column:7/10;margin:.25em 0 0;font-size:15px;line-height:1.45;max-width:46ch}
.wc .wm2{grid-column:10/13;margin:.25em 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
.wc .wm2 a{display:inline-block;margin-top:.9em;font-size:15px;color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1px}

/* ---- principal ---- */
.principal{position:relative;display:grid;grid-template-columns:1fr var(--page) 1fr;min-height:100vh;min-height:100svh;background:var(--paper)}
.principal figure{margin:0;position:relative;overflow:hidden;min-height:100vh}
.principal figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.principal .page{padding:0 var(--g)}
.principal h2{margin:0;padding-top:20vh;font-family:var(--didot);font-weight:400;font-size:var(--say);line-height:1.04;letter-spacing:-.012em}
.principal .role{margin:.6em 0 0;font-size:15px;color:var(--mute)}
.principal .bio{grid-column:3;padding:20vh var(--g) 12vh;max-width:40ch}
.principal .bio p{margin:0 0 1.1em}
.rules{list-style:none;margin:2.2em 0 0;padding:0;counter-reset:r;border-top:1px solid var(--rule)}
.rules li{counter-increment:r;display:grid;grid-template-columns:3.2em 1fr;padding:.75em 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.45}
.rules li::before{content:counter(r,upper-roman);font-family:var(--didot);font-size:18px;line-height:1.2}

/* ---- correspondence ---- */
.contact{position:relative;min-height:100vh;min-height:100svh;padding:20vh var(--g) 0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-content:start;border-top:1px solid var(--ink)}
.contact h2{grid-column:1/-1;margin:0 0 .5em;font-family:var(--didot);font-weight:400;font-size:var(--h2);line-height:.92;letter-spacing:-.015em}
.path{grid-column:span 4;padding-top:.8em;border-top:1px solid var(--ink)}
.path h3{margin:0;font-size:15px;font-weight:500}
.path a{display:inline-block;margin:.35em 0 .5em;font-family:var(--didot);font-size:clamp(22px,1.9vw,38px);line-height:1.1;text-underline-offset:5px;text-decoration-thickness:1px}
.path p{margin:0;font-size:15px;line-height:1.45;color:var(--mute);max-width:36ch}
.post{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);margin-top:14vh;padding:1em 0 2.4em;border-top:1px solid var(--rule);font-size:15px}
.post .a{grid-column:1/6}.post .t{grid-column:6/9;font-variant-numeric:tabular-nums}.post .c{grid-column:9/13;color:var(--mute)}
.foot{padding:1.2em var(--g) 2em;font-size:12px;line-height:1.5;color:var(--mute);border-top:1px solid var(--rule)}
.foot p{margin:0 0 .4em;max-width:120ch}

/* ---- a phone stacks every spread: left page above, right page below, the spine between ---- */
@media (max-aspect-ratio:17/20){
  :root{--spine:clamp(64px,10.5vh,120px);--say:clamp(26px,7.4vw,40px);--h2:clamp(36px,11vw,64px)}
  .open{grid-template-columns:1fr;grid-template-rows:1fr var(--spine) 1fr}
  .spine .name{display:none}
  .spine .hname{display:block}
  .clocks{inset:0;flex-direction:row;justify-content:space-between;align-items:center;padding:0 16px;text-align:left;gap:0}
  .clocks span:last-child{text-align:right}
  .tip{display:none}
  .thesis .stage{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}
  .say{position:static;padding:20px 16px 0;min-height:0}
  .page{min-height:30vh;padding-bottom:42px}
  .page .say:not(.on){display:none}
  .from{left:16px;right:16px;bottom:14px}
  .works .stage{grid-template-rows:1fr auto}
  .wc{position:static;display:none;grid-template-columns:1fr;padding:16px 16px 20px;row-gap:.5em}
  .wc.on{display:grid}
  .wc h3,.wc .wl,.wc .wm2{grid-column:1/-1}
  .principal{grid-template-columns:1fr}
  .principal figure{min-height:70vh}
  .principal .page{padding-bottom:0}
  .principal h2{padding-top:32px}
  .principal .bio{grid-column:1;padding:20px 16px 48px}
  .contact{grid-template-columns:1fr;padding-top:64px}
  .path{grid-column:1/-1;margin-bottom:1.6em}
  .post{grid-template-columns:1fr;row-gap:.6em}
  .post .a,.post .t,.post .c{grid-column:1/-1}
}
.hname{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:calc(var(--spine)*.56);width:auto}
.hname path{fill:var(--ink)}
@media (prefers-reduced-motion:reduce){.js .half img,.js .clocks,.js .tip,.js .bar{visibility:visible}#intro{display:none}}

/* small screens: the drawing keeps its guides but drops their labels, and the bar steps down a size so the name and the menu share one line */
@media (max-width:700px){#intro .lab{display:none!important}}
@media (max-width:560px){.mark{font-size:19px}.bar nav{gap:9px;font-size:12.5px}.bar{padding-left:14px;padding-right:14px}}
@media (max-width:360px){.bar nav{gap:7px;font-size:11.5px}.mark{font-size:17px}}
/* ---- the pull-back: four photographs, each inside a circle of the next ---- */
.nest{position:relative;height:520vh}
.nest .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#141414}
.nest canvas{position:absolute;inset:0;width:100%;height:100%}
.nl{position:absolute;left:var(--g);top:var(--line);margin:0;max-width:11ch;color:var(--paper);font-family:var(--didot);font-weight:400;font-size:clamp(40px,6.2vw,132px);line-height:.98;letter-spacing:-.015em;visibility:hidden}
.nl.on{visibility:visible}
.nc{position:absolute;left:var(--g);bottom:max(18px,env(safe-area-inset-bottom,0px));margin:0;color:var(--paper);font-size:12px;visibility:hidden}
.nc.on{visibility:visible}
@media (max-aspect-ratio:17/20){.nl{font-size:clamp(34px,10.5vw,56px);max-width:9ch}}

/* ---- inside a work: its film in the plate, then its details and its number ---- */
.plate video{position:absolute;object-fit:cover;visibility:hidden;background:#000}
.plate video.on{visibility:visible}
.det{position:absolute;inset:0;z-index:2;background:var(--paper);display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--g);row-gap:var(--g);padding:20vh var(--g) 0;align-content:start;visibility:hidden}
.det.on{visibility:visible}
.det img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#e4e2dd}
.det .txt{grid-column:1/5;grid-row:1/4}
.det .a{grid-column:5/11;grid-row:1/3}
.det .b{grid-column:11/13;grid-row:1}
.det .c{grid-column:11/13;grid-row:2}
.det.flip .txt{grid-column:9/13}
.det.flip .a{grid-column:3/9}
.det.flip .b,.det.flip .c{grid-column:1/3}
.fig{margin:-.12em 0 0;font-family:var(--didot);font-weight:400;font-size:clamp(96px,12.5vw,280px);line-height:.82;letter-spacing:-.035em}
.figc{margin:.9em 0 0;max-width:30ch;font-size:15px;line-height:1.45}

/* ---- the index ---- */
.index{position:relative;padding:20vh var(--g) 16vh;background:var(--paper);border-top:1px solid var(--ink)}
.index h2{margin:0 0 .45em;font-family:var(--didot);font-weight:400;font-size:var(--h2);line-height:.92;letter-spacing:-.015em}
.filt{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em 2.6em;margin:0 0 1.6em;font-size:15px}
.filt p{margin:0}
.filt .lab{margin-right:.7em}
.filt button{font:inherit;color:var(--mute);background:none;border:0;padding:0;margin-right:.9em;cursor:pointer}
.filt button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.filt .count{margin-left:auto;color:var(--mute)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.rows a{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:baseline;padding:.42em 0 .5em;border-bottom:1px solid var(--rule);text-decoration:none}
.rows .nm{grid-column:1/7;font-family:var(--didot);font-size:clamp(32px,4.4vw,96px);line-height:1;letter-spacing:-.01em}
.rows a:hover .nm,.rows a:focus-visible .nm{font-style:italic}
.rows .ty{grid-column:7/9;font-size:15px}
.rows .di{grid-column:9/12;font-size:15px;color:var(--mute)}
.rows .yr{grid-column:12/13;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.peek{position:fixed;z-index:6;left:0;top:0;width:min(32vw,560px);aspect-ratio:16/9;object-fit:cover;pointer-events:none;visibility:hidden;background:#0c0c0d}
.peek.on{visibility:visible}

/* ---- six rules, each with its own proof ---- */
.rules6{position:relative;height:520vh}
.rules6 .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.rl{position:absolute;inset:0;visibility:hidden}
.rl.on{visibility:visible}
.rn{position:absolute;left:var(--g);top:calc(20% - 52px);font-family:var(--didot);font-size:24px;line-height:1}
.rs{position:absolute;left:var(--g);top:20%;margin:0;max-width:14ch;font-family:var(--didot);font-weight:400;font-size:clamp(40px,5.6vw,124px);line-height:1;letter-spacing:-.015em}
.rp{position:absolute;margin:0;font-size:15px;line-height:1.45}
.r1 .rp{left:var(--g);bottom:9vh}
.r1 .rp span{font-variant-numeric:tabular-nums}
.r2 .rn{left:auto;right:var(--g)}
.r2 .rs{left:auto;right:var(--g);text-align:right;max-width:9ch}
.r2 .rp{right:var(--g);bottom:9vh;max-width:40ch;text-align:right}
.lines{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);pointer-events:none}
.lines i{border-left:1px solid rgba(12,12,13,.2);border-right:1px solid rgba(12,12,13,.2);visibility:hidden}
.lines b{position:absolute;left:0;right:0;top:20%;height:1px;background:var(--ink);visibility:hidden}
.r2.on .lines i{animation:show 0s linear forwards;animation-delay:calc(var(--n)*70ms + 150ms)}
.r2.on .lines b{animation:show 0s linear forwards;animation-delay:1.05s}
.r3 .nums{right:var(--g);bottom:8vh;display:grid;grid-template-columns:auto auto;column-gap:6vw;align-items:end}
.r3 .nums p{margin:0}
.r3 small{max-width:24ch}
.r3 .big{font-family:var(--didot);font-size:clamp(72px,9.5vw,210px);line-height:.85;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.r3 .u{margin-left:.25em;font-family:var(--didot);font-size:clamp(24px,2.2vw,44px)}
.r3 small{display:block;margin-top:.7em;font-size:13px;color:var(--mute)}
.r4 .rs{max-width:none;font-size:clamp(40px,6.6vw,148px)}
.r4 .rs span{display:block;visibility:hidden}
.r4.on .rs span{animation:show 0s linear forwards}
.r4.on .rs span:nth-child(2){animation-delay:.35s}.r4.on .rs span:nth-child(3){animation-delay:.7s}.r4.on .rs span:nth-child(4){animation-delay:1.05s}
.r5 .rs{max-width:16ch}
.r5 .lab{right:var(--g);bottom:8vh;width:min(30vw,420px);list-style:none;padding:0;border-top:1px solid var(--ink)}
.r5 .lab li{display:flex;justify-content:space-between;padding:.45em 0;border-bottom:1px solid var(--rule)}
.r5 .lab li span:last-child{color:var(--mute)}
.r6 .rs{max-width:15ch}
.r6 .rp{left:var(--g);bottom:9vh;font-family:var(--didot);font-size:clamp(28px,2.6vw,56px)}
.r6 .rp a{text-underline-offset:6px;text-decoration-thickness:1px}
@keyframes show{to{visibility:visible}}

/* ---- the grid, for anyone who presses G ---- */
.gridview{position:fixed;inset:0;z-index:50;display:none;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);pointer-events:none;mix-blend-mode:difference}
.g .gridview{display:grid}
.gridview i{background:rgba(255,255,255,.07);border-left:1px solid rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.55)}
.gridview b{position:fixed;left:0;right:0;top:20%;height:1px;background:#fff}

@media (max-aspect-ratio:17/20){
  .det{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;padding:max(72px,calc(env(safe-area-inset-top,0px) + 60px)) 16px 0;row-gap:12px;column-gap:12px}
  .det .txt,.det.flip .txt{grid-column:1/-1;grid-row:1}
  .det .a,.det.flip .a{grid-column:1/-1;grid-row:2}
  .det .b,.det.flip .b{grid-column:1;grid-row:3}
  .det .c,.det.flip .c{grid-column:2;grid-row:3}
  .fig{font-size:clamp(72px,24vw,120px)}
  .figc{margin-top:.6em;font-size:14px}
  .rows a{grid-template-columns:1fr auto;row-gap:.2em}
  .rows .nm{grid-column:1/-1}.rows .ty{grid-column:1}.rows .yr{grid-column:2}.rows .di{grid-column:1/-1}
  .filt .count{margin-left:0}
  .rs,.r2 .rs{font-size:clamp(34px,10vw,56px);max-width:none;right:16px}
  .r2 .rs{text-align:left;left:16px}.r2 .rn{left:16px;right:auto}
  .rp,.r2 .rp{left:16px;right:16px;text-align:left}
  .r3 .nums{left:16px;right:16px;flex-direction:column;gap:18px}
  .r3 .big{font-size:clamp(60px,18vw,96px)}
  .r4 .rs{font-size:clamp(32px,9.6vw,52px)}
  .r5 .lab{left:16px;right:16px;width:auto}
}

/* ---- smooth scrolling (Lenis) ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---- the reel: each work's own film, opened through a circle ---- */
.reel{position:relative;height:760vh}
.reel .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0c0c0d;cursor:pointer}
.reel canvas{position:absolute;inset:0;width:100%;height:100%}
.rc{position:absolute;left:var(--g);right:var(--g);bottom:max(26px,env(safe-area-inset-bottom,0px));color:var(--paper);pointer-events:none;visibility:hidden}
.rc.on{visibility:visible}
.reel.ink .rc{color:var(--ink)}
/* the name arrives as a title, holds, then settles into a label above the facts */
.rc-n{margin:0 0 .16em;overflow:hidden;font-family:var(--didot);font-weight:400;font-size:clamp(56px,9vw,200px);line-height:.95;letter-spacing:-.02em;transform-origin:0 100%;transition:transform .95s cubic-bezier(.2,.7,.1,1)}
.rc.small .rc-n{transform:scale(.36)}
.rc span{display:block;transform:translateY(calc((1 - var(--v,0)) * 108% * var(--dir,1)))}
.rc-x{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:start}
.rc-x p{margin:0;overflow:hidden;font-size:15px;line-height:1.45}
.rc-l{grid-column:1/6;max-width:46ch}
.rc-m{grid-column:7/10}
.rc-o{grid-column:10/13;text-align:right}
.rc a{pointer-events:auto;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-aspect-ratio:17/20){
  .rc-n{font-size:clamp(44px,13vw,80px)}
  .rc-x{grid-template-columns:1fr}
  .rc-l,.rc-m,.rc-o{grid-column:1/-1;text-align:left;margin-top:.5em}
  .rc-x p{font-size:13.5px}
}

/* ---- thinking ---- */
.thinking{position:relative;min-height:100vh;min-height:100svh;padding:20vh var(--g) 14vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-content:start;background:#0c0c0d;color:var(--paper)}
.thinking h2{grid-column:1/-1;margin:0 0 .5em;font-family:var(--didot);font-weight:400;font-size:var(--h2);line-height:.92;letter-spacing:-.015em}
.tl{grid-column:1/5;list-style:none;margin:0;padding:0;border-top:1px solid rgba(244,243,240,.35)}
.tl li{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid rgba(244,243,240,.18)}
.tl button{flex:1;display:flex;gap:1em;align-items:baseline;padding:.7em 0;font:inherit;color:rgba(244,243,240,.5);background:none;border:0;text-align:left;cursor:pointer}
.tl .tn{font-family:var(--didot);font-size:18px;min-width:2.2em}
.tl .tt{font-family:var(--didot);font-size:clamp(22px,1.9vw,38px);line-height:1.1}
.tl button[aria-pressed=true]{color:var(--paper)}
.tl button[aria-pressed=true] .tt{font-style:italic}
.tl .tr{font-size:13px;color:rgba(244,243,240,.6);text-underline-offset:4px;text-decoration-thickness:1px}
.qs{grid-column:6/13;position:relative;min-height:46vh}
.q{position:absolute;inset:0;margin:0;visibility:hidden}
.q.on{visibility:visible}
.q p{margin:0;font-family:var(--didot);font-size:clamp(34px,3.9vw,84px);line-height:1.04;letter-spacing:-.012em;text-wrap:balance}

/* ---- the brief ---- */
.brief{grid-column:1/-1;margin:3.4em 0 0;padding-top:1em;border-top:1px solid var(--ink)}
.brief h3{margin:0 0 .6em;font-size:15px;font-weight:500}
.bs{margin:0;max-width:30ch;font-family:var(--didot);font-size:clamp(30px,3.2vw,68px);line-height:1.18;letter-spacing:-.01em}
.ch{position:relative;display:inline-block}
.chb{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;font-style:italic;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.chb::after{content:"";display:inline-block;width:.26em;height:.26em;margin:0 .06em 0 .2em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-.24em) rotate(45deg)}
.chb[aria-expanded=true]::after{transform:translateY(.02em) rotate(-135deg)}
.chb:focus{outline:none}.chb:focus-visible{background:var(--ink);color:var(--paper)}
/* the choices open under the word, in the same type, between two rules */
.chl{display:block;position:absolute;z-index:6;left:0;box-sizing:border-box;top:100%;margin:.12em 0 0;padding:0;list-style:none;width:max-content;max-width:calc(100vw - 2 * var(--g));background:var(--paper);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-size:.56em;line-height:1.15}
.chl .cho{display:block;padding:.28em .1em .32em;border-bottom:1px solid var(--rule);cursor:pointer;white-space:nowrap}
.chl .cho:last-child{border-bottom:0}
.chl .cho[aria-selected=true]{font-style:italic}
.chl .cho:hover,.chl .cho.act{background:var(--ink);color:var(--paper)}
.bl{display:block;margin:1.6em 0 0;max-width:60ch}
.bl span{display:block;font-size:15px;color:var(--mute);margin-bottom:.5em}
.bl textarea{width:100%;font:inherit;font-size:17px;line-height:1.5;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:.3em 0;resize:vertical}
.bl textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bb{margin-top:1.4em;font-family:var(--didot);font-size:clamp(26px,2.4vw,48px);line-height:1;color:var(--paper);background:var(--ink);border:0;padding:.35em .7em .42em;cursor:pointer}
.bb:hover{font-style:italic}
.bn{margin:.8em 0 0;font-size:13px;color:var(--mute)}
@media (max-aspect-ratio:17/20){
  .thinking{grid-template-columns:1fr;padding-top:96px}
  .tl,.qs{grid-column:1/-1}
  .qs{min-height:0;margin-top:1.4em}
  .q{position:static;display:none}.q.on{display:block}
}

/* narrow phones: the name and the four links share one line; the brief's choices never run off the screen */
@media (max-width:430px){.bar{padding-left:12px;padding-right:12px}.mark{font-size:17px}.bar nav{gap:8px;font-size:11.5px}}

@media (max-aspect-ratio:17/20){.bs{font-size:clamp(24px,7.2vw,34px);max-width:none}}
/* a single long word ("Correspondence") must never push a phone page wider than the screen */
@media (max-aspect-ratio:17/20){.contact h2,.index h2,.thinking h2{font-size:clamp(30px,8.4vw,56px)}}
@media (max-aspect-ratio:17/20){.contact{grid-template-columns:minmax(0,1fr)}.brief,.path,.post{min-width:0}.chl{font-size:.8em}.chl .cho{white-space:normal}}

/* ======== the back half, with its own material ======== */
/* the index: the chosen work's film fills the room */
.index{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#0c0c0d;color:var(--paper);border-top:0}
.ixbg{position:absolute;inset:0}
.ixbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s linear}
.ixbg video.on{opacity:1}
.ixbg .dim{position:absolute;inset:0;background:rgba(12,12,13,.58)}
.ixin{position:relative;z-index:1}
.index .filt button{color:rgba(244,243,240,.55)}
.index .filt button[aria-pressed=true]{color:var(--paper)}
.index .filt .count,.index .rows .di{color:rgba(244,243,240,.62)}
.index .rows{border-top-color:rgba(244,243,240,.6)}
.index .rows a{border-bottom-color:rgba(244,243,240,.2)}
.index .rows li .nm{color:rgba(244,243,240,.5);transition:color .3s linear}
.index .rows li.cur .nm{color:var(--paper);font-style:italic}

/* the rules: spreads, photograph on one page, the rule on the other; each opens over the last */
.rules6 .stage{background:#0c0c0d}
.rl{visibility:visible;background:var(--paper);will-change:clip-path}
.rl:not(.live){visibility:hidden}
.ri{position:absolute;top:0;bottom:0;width:50%;margin:0;overflow:hidden}
.rl.sr .ri{right:0}.rl.sl .ri{left:0}
.ri img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 - .06 * var(--v,1)))}
.rt{position:absolute;top:0;bottom:0;width:50%}
.rl.sr .rt{left:0}.rl.sl .rt{right:0}
.rt>*{transform:translateY(calc((1 - var(--v,1)) * 28px))}
.rs{max-width:11ch;font-size:clamp(36px,4.2vw,92px)}
.r4 .rs{font-size:clamp(34px,4vw,88px)}
.r3 .nums{left:var(--g);right:var(--g);gap:4vw}
.lines{z-index:3;mix-blend-mode:difference}
.lines i{border-color:rgba(255,255,255,.5)}
.lines b{background:#fff}
.lines.on i{animation:show 0s linear forwards;animation-delay:calc(var(--n)*60ms)}
.lines.on b{animation:show 0s linear forwards;animation-delay:.8s}

/* thinking: the essay brings its photograph */
.thinking{overflow:hidden}
.tbg{position:absolute;inset:0}
.tbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s linear}
.tbg img.on{opacity:1}
.tbg .dim{position:absolute;inset:0;background:rgba(12,12,13,.64)}
.thinking>h2,.thinking>.tl,.thinking>.qs{position:relative;z-index:1}

/* the office */
.office{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#0c0c0d;color:var(--paper)}
.ob{position:absolute;inset:0;margin:0}
.ob img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ob::after{content:"";position:absolute;inset:0;background:rgba(12,12,13,.42)}
.oin{position:relative;z-index:1;padding:20vh var(--g) 10vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);min-height:100vh;align-content:start}
.ok{grid-column:1/-1;margin:0 0 .6em;font-size:15px}
.office h2{grid-column:1/8;margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(56px,8.4vw,184px);line-height:.92;letter-spacing:-.02em}
.oa{grid-column:1/5;margin:2.4em 0 0;font-size:15px;line-height:1.5}
.ot{grid-column:8/13;align-self:end;margin:0;text-align:right;font-family:var(--didot);font-size:clamp(56px,7.6vw,164px);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.os{grid-column:8/13;margin:.8em 0 0;text-align:right;font-size:15px}

/* the book closes */
.close{position:relative;height:230vh;background:#0c0c0d}
.close .stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr var(--spine) 1fr;overflow:hidden;perspective:1800px;background:#0c0c0d}
.pg{position:relative;overflow:hidden;backface-visibility:hidden;will-change:transform}
.pg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl{transform-origin:100% 50%}.pl img{object-position:45% 20%}
.pr{transform-origin:0 50%}.pr img{object-position:44% 30%}
.spn{position:relative;background:var(--paper);z-index:1}
.spn .name{position:absolute;top:var(--line);left:50%;transform:translateX(-50%);width:calc(var(--spine)*.74);height:auto}
.spn .name use{fill:var(--ink)}
.end{position:absolute;left:0;right:0;bottom:8vh;margin:0;text-align:center;color:var(--paper);font-size:15px;opacity:calc((var(--e,0) - .82) * 6)}
@media (max-aspect-ratio:17/20){
  .ri{width:auto;left:0;right:0;top:0;bottom:auto;height:46%}
  .rt{width:auto;left:0!important;right:0!important;top:46%;bottom:0}
  .rl.sr .ri,.rl.sl .ri{left:0;right:0}
  .rt .rn{top:28px}.rt .rs{top:64px;font-size:clamp(28px,8.4vw,44px);max-width:none;right:16px;left:16px;text-align:left}
  .rt .rp{bottom:5vh}
  .r3 .nums{flex-direction:row;gap:24px}
  .r3 .big{font-size:clamp(48px,14vw,80px)}
  .oin{grid-template-columns:1fr;padding-top:110px}
  .office h2,.oa,.ot,.os{grid-column:1/-1;text-align:left}
  .ot{margin-top:1.2em;font-size:clamp(48px,16vw,96px)}
  .close .stage{grid-template-columns:1fr;grid-template-rows:1fr var(--spine) 1fr}
  .pl{transform-origin:50% 100%}.pr{transform-origin:50% 0}
  .spn .name{display:none}
  .spn::before{content:"Karnak";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--didot);font-size:calc(var(--spine)*.62);color:var(--ink)}
}
/* rule IV: its four clauses arrive one after another as the spread opens */
.r4 .rs span{visibility:visible;opacity:calc((var(--v,1) - .55) * 4);transform:translateY(calc((1 - var(--v,1)) * 40px))}
.r4 .rs span:nth-child(2){opacity:calc((var(--v,1) - .7) * 4)}
.r4 .rs span:nth-child(3){opacity:calc((var(--v,1) - .8) * 5)}
.r4 .rs span:nth-child(4){opacity:calc((var(--v,1) - .88) * 8.5)}

/* thinking: a chosen essay is underlined, never boxed; selected text inverts to paper */
.tl button:focus{outline:none}.tl button:focus-visible .tt{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.thinking ::selection,.index ::selection{background:var(--paper);color:var(--ink)}

.chl[hidden]{display:none}
.chl:focus{outline:none}
.contact{overflow-x:clip}
/* the pull-back: a line rises into place as its photograph comes to rest, and goes as it leaves; captions fade */
.nl{visibility:visible;opacity:0;transform:translateY(.32em);transition:opacity .45s linear,transform .9s cubic-bezier(.16,1,.3,1)}
.nl.on{opacity:1;transform:none}
.nc{visibility:visible;opacity:0;transition:opacity .4s linear}
.nc.on{opacity:1}
/* ---- the reel, as a stack of prints: the next film rises over the last; transforms only ---- */
.reel .stage{cursor:pointer}
.rp{position:absolute;inset:0;overflow:hidden;visibility:hidden;background:#0c0c0d;will-change:transform;contain:paint}
.rv{position:absolute;inset:0;will-change:transform}
.rv video{display:block;width:100%;height:100%;object-fit:cover;background:#0c0c0d}
.rsh{position:absolute;inset:0;background:#0c0c0d;opacity:0;pointer-events:none}
.rp .rc{visibility:inherit;color:var(--paper);transition:color .5s linear}
.rp.ink .rc{color:var(--ink)}
.rp .rc span{transform:none}
.rp .rc-n{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.rp.small .rc-n{transform:scale(.36)}
/* the index of the six, at the side */
.rx{position:absolute;z-index:20;right:var(--g);top:50%;transform:translateY(-50%);margin:0;padding:0;list-style:none;text-align:right;font-size:15px;line-height:1.7;color:var(--paper);transition:color .5s linear}
.reel.ink .rx{color:var(--ink)}
.rx a{text-decoration:none;opacity:.4;transition:opacity .35s linear}
.rx a.on,.rx a:hover,.rx a:focus-visible{opacity:1}
.rx a.on{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-aspect-ratio:17/20){.rx{display:none}}
/* ---- the opening: rule the guides, trace the name, ink it, turn it onto the spine, part the paper ---- */
#intro.built{background:none}
#intro{cursor:default}
#intro .ipn{position:absolute;background:var(--paper);will-change:transform}
#intro .ipn.a{transform-origin:0 50%}
#intro .ipn.b{transform-origin:100% 50%}
#intro.st .ipn.a{transform-origin:50% 0}
#intro.st .ipn.b{transform-origin:50% 100%}
#intro .ipn.go{transform:scaleX(0);transition:transform 1.15s cubic-bezier(.76,0,.24,1)}
#intro.st .ipn.go{transform:scaleY(0)}
#intro .gl{position:absolute;background:var(--ink);opacity:.45;will-change:transform}
#intro .gl.h{left:0;right:0;height:1px;transform:scaleX(0);transform-origin:0 50%}
#intro .gl.v{top:0;bottom:0;width:1px;transform:scaleY(0);transform-origin:50% 0}
#intro .gl.on{transform:none;transition:transform .95s cubic-bezier(.16,1,.3,1)}
#intro .gl.h.off{transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s cubic-bezier(.7,0,.84,0)}
#intro .gl.v.off{transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.7,0,.84,0)}
#intro .lab{visibility:visible;opacity:0;transform:translateY(4px);transition:opacity .4s linear,transform .7s cubic-bezier(.16,1,.3,1)}
#intro .lab.on{opacity:1;transform:none}
#intro svg.iwm{position:absolute;inset:auto;overflow:visible;transform-origin:50% 50%;will-change:transform}
#intro svg.iwm.go{transition:transform 1.25s cubic-bezier(.7,0,.16,1)}
#intro .iwm .stk{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity .5s linear}
#intro .iwm .stk.off{opacity:0}
#intro .iwm .fl{fill:var(--ink);fill-opacity:0;transition:fill-opacity .6s linear}
#intro .iwm .fl.on{fill-opacity:1}
#intro.fade{opacity:0;transition:opacity .45s linear}
/* under the paper the two photographs wait slightly enlarged and settle as it parts; the bar, clocks and line fade in */
.js .half img{visibility:visible;scale:1.07}
.s1 .half img{scale:1}
.opening .half img{transition:scale 2s cubic-bezier(.16,1,.3,1)}
.js .clocks,.js .tip,.js .bar{visibility:visible;opacity:0;transition:opacity .8s linear}
.s3 .clocks,.s3 .tip,.s3 .bar{opacity:1}
.js .spine .name,.js .spine .hname{opacity:0}
.done .spine .name,.done .spine .hname{opacity:1}
@media (max-aspect-ratio:17/20){.js .spine .name{display:none}}
/* ======== practice: four rules, four different screens, each uncovered from below over the last ======== */
.prac{position:relative;height:480vh}
.prac .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
.kp{position:absolute;inset:0;overflow:hidden;visibility:hidden;background:var(--paper);color:var(--ink);will-change:transform}
.kp.k1{visibility:visible}
.kin{position:absolute;inset:0;will-change:transform}
.kn{position:absolute;left:var(--g);top:calc(20% - 52px);font-family:var(--didot);font-size:24px;line-height:1}
.ks{position:absolute;left:var(--g);top:20%;margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(48px,7.2vw,164px);line-height:.96;letter-spacing:-.02em;text-wrap:balance}
.kc{position:absolute;left:var(--g);bottom:max(26px,6vh);margin:0;max-width:34ch;font-size:15px;line-height:1.45}
.kf{position:absolute;margin:0;overflow:hidden}
.kf img{width:100%;height:100%;object-fit:cover;display:block}
/* the words arrive once the rule is in: a short rise, no bounce */
.kp .ks,.kp .kc,.kp .kn,.kp .kclk{opacity:0;transform:translateY(.5em);transition:opacity .5s linear,transform 1s cubic-bezier(.16,1,.3,1)}
.kp .kn{transform:none}
.kp.in .ks,.kp.in .kc,.kp.in .kn,.kp.in .kclk{opacity:1;transform:none}
.kp.in .kc{transition-delay:.25s}
/* I: only type, and the time this page has held you, at the size of the screen */
.k1 .ks{right:var(--g);max-width:13ch}
.kclk{position:absolute;right:var(--g);bottom:max(14px,2vh);margin:0;font-family:var(--didot);font-size:clamp(140px,25vw,560px);line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kp.in .kclk{transition-delay:.15s}
.k1 .kc{max-width:26ch}
/* II: the page's own grid is ruled over the screen; the photograph sits exactly in columns 7 to 12, from the line down */
.k2 .ks{max-width:calc(50% - 1.5 * var(--g))}
.k2 .kf{left:calc(50% + var(--g) / 2);right:var(--g);top:20%;bottom:var(--g)}
.k2 .kc{max-width:calc(50% - 2 * var(--g))}
.klines{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);pointer-events:none;mix-blend-mode:difference}
.klines i{border-left:1px solid rgba(255,255,255,.62);border-right:1px solid rgba(255,255,255,.62);transform:scaleY(0);transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--n) * 45ms)}
.klines b{position:absolute;left:0;right:0;top:20%;height:1px;background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.16,1,.3,1) .45s}
.k2.in .klines i{transform:none}
.k2.in .klines b{transform:none}
/* III: the stone, full screen, at full light; it settles as it arrives */
.k3{background:#0c0c0d;color:var(--paper)}
.k3 .kf{inset:0}
.k3 .kf img{object-position:50% 38%;scale:1.08;transition:scale 2.4s cubic-bezier(.16,1,.3,1)}
.k3.in .kf img{scale:1}
.k3 .ks{max-width:12ch;font-size:clamp(44px,6.2vw,140px)}
.k3 .kc{max-width:40ch}
/* IV: four refusals on black, one after another; the round windows of Jardine House stand in columns 10 to 12 */
.k4{background:var(--ink);color:var(--paper)}
.k4 .kf{left:calc(75% + var(--g) / 4);right:0;top:0;bottom:0}
.k4 .ks{max-width:calc(75% - 2 * var(--g));font-size:clamp(40px,5.5vw,126px);line-height:1.02;opacity:1;transform:none}
.k4 .ks span{display:block;opacity:0;transform:translateY(.45em);transition:opacity .45s linear,transform .9s cubic-bezier(.16,1,.3,1)}
.k4.in .ks span{opacity:1;transform:none}
.k4.in .ks span:nth-child(2){transition-delay:.3s}
.k4.in .ks span:nth-child(3){transition-delay:.6s}
.k4.in .ks span:nth-child(4){transition-delay:.9s}
@media (max-aspect-ratio:17/20){
  .ks,.k3 .ks{font-size:clamp(34px,10.4vw,60px);right:var(--g);max-width:none}
  .k1 .kc{bottom:auto;top:calc(20% + 4.4em)}
  .kclk{font-size:36vw;bottom:max(20px,4vh)}
  .k2 .ks{max-width:none}
  .k2 .kf{left:var(--g);top:46%;bottom:var(--g)}
  .k2 .kc{display:none}
  .k4 .kf{left:0;top:66%;right:0}
  .k4 .ks{max-width:none;font-size:clamp(30px,8.8vw,52px)}
}
@media (prefers-reduced-motion:reduce){.kp *{transition:none!important}}
/* ======== thinking: a contents page on paper; the chosen essay opens to its sentence and its photograph ======== */
.thk{position:relative;background:var(--paper);color:var(--ink);padding:20vh var(--g) 16vh}
.thk h2{margin:0;font-family:var(--didot);font-weight:400;font-size:var(--h2);line-height:.92;letter-spacing:-.015em}
.thk-l{margin:.7em 0 2.2em;font-size:15px;color:var(--mute)}
.tk{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.tk-li{position:relative;border-bottom:1px solid var(--rule)}
.tk-h{margin:0;font:inherit}
.tk-b{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:baseline;width:100%;padding:.22em 0 .3em;margin:0;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tk-n{grid-column:1/2;font-family:var(--didot);font-size:24px;line-height:1}
.tk-t{grid-column:2/11;font-family:var(--didot);font-size:clamp(40px,5.6vw,128px);line-height:1;letter-spacing:-.018em;color:var(--mute);transition:color .35s linear}
.tk-li.on .tk-t,.tk-b:hover .tk-t,.tk-b:focus-visible .tk-t{color:var(--ink)}
.tk-li.on .tk-t{font-style:italic}
.tk-b:focus{outline:none}
.tk-b:focus-visible .tk-t{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:1px}
.tk-r{position:absolute;right:0;top:clamp(20px,2.6vw,58px);font-size:15px;text-underline-offset:4px;text-decoration-thickness:1px}
.tk-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s cubic-bezier(.16,1,.3,1)}
.tk-li.on .tk-x{grid-template-rows:1fr}
.tk-xi{min-height:0;overflow:hidden;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g)}
.tk-q{grid-column:2/7;margin:0;padding:.6em 0 2em}
.tk-q p{margin:0;font-family:var(--didot);font-size:clamp(24px,2.3vw,50px);line-height:1.12;letter-spacing:-.008em;max-width:22ch;text-wrap:balance}
.tk-f{grid-column:8/13;margin:.9em 0 var(--g)}
.tk-f img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.tk-xi>*{opacity:0;transition:opacity .45s linear}
.tk-li.on .tk-xi>*{opacity:1;transition-delay:.2s}
@media (max-aspect-ratio:17/20){
  .thk{padding-top:96px}
  .thk h2{font-size:clamp(30px,8.4vw,56px)}
  .tk-b{grid-template-columns:2.2em 1fr;column-gap:0}
  .tk-n{grid-column:1}.tk-t{grid-column:2;font-size:clamp(30px,9vw,52px);padding-right:3em}
  .tk-r{top:1.1em}
  .tk-q,.tk-f{grid-column:1/-1}
  .tk-q{padding-bottom:1em}
}
/* ======== the office: its street at full light, then the address and the time on paper ======== */
.office{background:var(--paper);color:var(--ink);min-height:0;overflow:visible;border-top:1px solid var(--ink)}
.office .ob{position:relative;inset:auto;height:68vh;height:68svh;margin:0;overflow:hidden}
.office .ob::after{display:none}
.office .ob img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.office .oin{min-height:0;padding:clamp(28px,4vh,56px) var(--g) clamp(80px,14vh,160px);align-content:start}
.office .ok{color:var(--mute)}
.office .ot{align-self:start}
.office .os{color:var(--mute)}
/* rule III sits its sentence on the dark of the left-hand column; on a phone the stone goes below the words */
.k3 .kf img{object-position:24% 40%}
.k3 .ks{max-width:11ch}
@media (max-aspect-ratio:17/20){
  .k1 .kc{top:auto;bottom:calc(36vw * .8 + 40px)}
  .k3 .kf{top:44%}
  .k3 .kf img{object-position:50% 60%}
}
@media (max-aspect-ratio:17/20){.k3 .kc{max-width:21ch}}
/* the lines of the pull-back are painted once on load (all but invisible) so their first appearance costs nothing */
.nl,.nc{opacity:.001;will-change:opacity,transform}
.nl.on,.nc.on{opacity:1}
/* the upright name, traced in the spine */
#intro svg.iwv{position:absolute;overflow:visible}
#intro .iwv .stk{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity .5s linear}
#intro .iwv .stk.off{opacity:0}
#intro .iwv .fl{fill:var(--ink);fill-opacity:0;transition:fill-opacity .5s linear}
#intro .iwv .fl.on{fill-opacity:1}
#intro svg.iwm.gone{opacity:0;transition:opacity .7s linear}
/* the pull-back's lines: the sentence is parted by the circle, on the circle's centre line */
.nest .nl{position:absolute;inset:0;max-width:none;margin:0;top:0;left:0;font-size:clamp(34px,4.4vw,104px);line-height:1;letter-spacing:-.014em;opacity:1;transform:none;pointer-events:none;will-change:auto}
.nest .nl .a,.nest .nl .b{position:absolute;display:block;white-space:nowrap;transform:translateY(-50%);opacity:0;transition:opacity .5s linear,translate 1.1s cubic-bezier(.16,1,.3,1)}
.nest .nl .a{text-align:right;translate:1.2em 0}
.nest .nl .b{text-align:left;translate:-1.2em 0;white-space:normal}
.nest .nl.on .a,.nest .nl.on .b{opacity:1;translate:0 0}
.nest .nl.stack .a,.nest .nl.stack .b{transform:none;white-space:normal;translate:0 .4em;padding:0 var(--g)}
.nest .nl.stack.on .a,.nest .nl.stack.on .b{translate:0 0}
/* ======== work: one case block per work, in the page's own flow ======== */
.works2{position:relative;background:var(--paper);padding:20vh 0 8vh}
.w2h{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);margin-bottom:12vh;align-items:end}
.w2h h2{grid-column:1/9;margin:0;font-family:var(--didot);font-weight:400;font-size:var(--h2);line-height:.92;letter-spacing:-.015em}
.w2h p{grid-column:9/13;margin:0;font-size:15px;color:var(--mute)}
.cb{position:relative;margin:0 0 22vh}
.cbh{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end;padding:0 var(--g) clamp(18px,2.4vw,40px);border-top:1px solid var(--ink);padding-top:14px}
.cbn{grid-column:1/2;align-self:start;font-size:15px;font-variant-numeric:tabular-nums}
.cbt{grid-column:2/9;margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(56px,8.6vw,196px);line-height:.88;letter-spacing:-.022em}
.cbt a{text-decoration:none}
.cbt a:hover{font-style:italic}
.cbm{grid-column:9/11;margin:0;font-size:15px;line-height:1.45}
.cbd{grid-column:11/13;margin:0;font-size:15px;line-height:1.45;color:var(--mute)}
.cbk{position:relative;display:block;overflow:hidden;background:#0c0c0d;aspect-ratio:16/9;max-height:100svh;width:100%;clip-path:inset(0 0 0 0)}
.cbk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.cbx{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);margin-top:clamp(28px,4vw,72px);align-items:start}
.cbf{margin:0}
.cbf img{display:block;width:100%;height:auto}
.cbf figcaption{margin-top:12px;font-size:14px;line-height:1.45;max-width:44ch}
.cb-l .cbf.a{grid-column:1/8}
.cb-l .cbf.b{grid-column:9/13;margin-top:22vh}
.cb-r .cbf.a{grid-column:6/13;grid-row:1}
.cb-r .cbf.b{grid-column:1/5;grid-row:1;margin-top:22vh}
.cbf.phone img{border-radius:clamp(14px,2vw,30px);outline:1px solid rgba(12,12,13,.12);outline-offset:-1px}
.cbf.detail img{outline:1px solid rgba(12,12,13,.08);outline-offset:-1px}
.cbf.b.detail{align-self:end}
.cbf2{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);margin-top:clamp(28px,4vw,64px);align-items:baseline}
.cbl{grid-column:2/8;margin:0;font-family:var(--didot);font-size:clamp(24px,2.2vw,46px);line-height:1.12;letter-spacing:-.008em;max-width:30ch}
.cbo{grid-column:10/13;justify-self:end;font-size:15px;text-underline-offset:4px;text-decoration-thickness:1px}
/* arriving: the film opens from its lower edge, the crops rise into place; nothing moves once it is there */
.js .cb .cbk{clip-path:inset(18% 0 0 0);transition:clip-path 1.3s cubic-bezier(.16,1,.3,1)}
.js .cb.in .cbk{clip-path:inset(0 0 0 0)}
.js .cb .cbf{opacity:0;transform:translateY(48px);transition:opacity .6s linear,transform 1.2s cubic-bezier(.16,1,.3,1)}
.js .cb .cbf.in{opacity:1;transform:none}
@media (max-aspect-ratio:17/20){
  .works2{padding-top:96px}
  .w2h{grid-template-columns:1fr;row-gap:.6em;margin-bottom:56px}.w2h h2,.w2h p{grid-column:1/-1}
  .w2h h2{font-size:clamp(30px,8.4vw,56px)}
  .cb{margin-bottom:96px}
  .cbh{grid-template-columns:2.2em 1fr;row-gap:.4em}
  .cbn{grid-column:1}.cbt{grid-column:2;font-size:clamp(40px,12vw,72px)}.cbm,.cbd{grid-column:2}
  .cbk{aspect-ratio:4/5}
  .cbx{grid-template-columns:1fr 1fr;row-gap:28px}
  .cb-l .cbf.a,.cb-r .cbf.a{grid-column:1/-1;grid-row:auto}
  .cb-l .cbf.b,.cb-r .cbf.b{grid-column:1/-1;grid-row:auto;margin-top:0}
  .cbf.phone{grid-column:2/3!important}
  .cbf2{grid-template-columns:1fr;row-gap:16px}.cbl,.cbo{grid-column:1/-1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){.js .cb .cbk,.js .cb .cbf{clip-path:none;opacity:1;transform:none;transition:none}}
/* the opening, as one continuous move: lines ruled close on the K, strokes traced as the view pulls back to the spine */
#intro svg.iz{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#intro .gz{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .7s linear}
#intro .rule .gz{opacity:.38}
#intro .clear .gz{opacity:0;transition:opacity .45s linear}
#intro .sz{fill:none;stroke:var(--ink);stroke-width:1.1;vector-effect:non-scaling-stroke;transition:opacity .45s linear}
#intro .fz{fill:var(--ink);fill-opacity:0;transition:fill-opacity .45s linear}
#intro .ink .fz{fill-opacity:1}
#intro .ink .sz{opacity:0}
/* ======== practice: the work, working ======== */
.pk{position:relative;background:var(--paper);color:var(--ink)}
.pk-h{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:20vh var(--g) 14vh;border-top:1px solid var(--ink)}
.pk-h h2{grid-column:1/-1;margin:0 0 .5em;font-size:15px;font-weight:500}
.pk-s{grid-column:1/12;margin:0;font-family:var(--didot);font-size:clamp(44px,6.8vw,156px);line-height:.98;letter-spacing:-.022em;text-wrap:balance}
.pk-r{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.pk-t{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:clamp(28px,4vh,48px) var(--g) 0;align-items:start}
.pk-i{grid-column:1/2;font-family:var(--didot);font-size:24px;line-height:1}
.pk-t h3{grid-column:2/6;margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(40px,4.6vw,104px);line-height:.94;letter-spacing:-.018em}
.pk-t p{grid-column:9/13;margin:.3em 0 0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.5;max-width:40ch}
/* I: the marks, traced one after another on black */
.pk-id{background:#0c0c0d;color:var(--paper)}
.pk-stage{position:absolute;inset:0}
.pk-m{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .5s linear}
.pk-m.on{opacity:1}
.pk-m svg{width:min(62vw,1100px);max-height:42vh;overflow:visible}
.pk-m[data-slug=kmswerk] svg{width:min(34vw,520px);max-height:46vh}
.pk-m path{fill:var(--paper);fill-opacity:0;stroke:var(--paper);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill-opacity .5s linear,stroke-opacity .5s linear}
.pk-m.inked path{fill-opacity:1;stroke-opacity:0}
.pk-m figcaption{position:absolute;left:var(--g);right:var(--g);bottom:max(26px,4vh);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);font-size:15px}
.pk-mn{grid-column:2/6}.pk-my{grid-column:9/13;color:rgba(244,243,240,.62)}
/* II: a photograph cut on the page's twelve columns; the strips move away from the hand */
.pk-web{background:var(--paper)}
.pk-strips{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g)}
.pk-s1{position:relative;overflow:hidden}
.pk-s1 i{position:absolute;left:0;right:0;top:-12%;bottom:-12%;background-image:url(../img/p1s-1600.webp);background-repeat:no-repeat;will-change:transform}
.pk-web .pk-t{color:var(--paper);mix-blend-mode:difference;color:#fff}
.pk-c{position:absolute;z-index:2;left:var(--g);bottom:max(22px,3vh);margin:0;font-size:14px;color:#fff;mix-blend-mode:difference}
/* III: the KMSWERK chart, drawn from its own sign */
.pk-ui{background:var(--paper);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-content:start;padding-bottom:10vh}
.pk-ui .pk-t{grid-column:1/-1}
.pq{grid-column:3/11;margin:6vh 0 0;position:relative}
.pq-g{display:block;width:100%;max-height:78svh;aspect-ratio:1;margin:0 auto;overflow:visible}
.pq-g .ax{stroke:var(--ink);stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
.pq-g .tk{stroke:rgba(12,12,13,.18);stroke-width:1;vector-effect:non-scaling-stroke}
.pq-g text{font-family:var(--sans);font-size:15px;fill:var(--ink)}
.pq-g .tl{fill:var(--mute);font-size:13px}
.pq-g .pt{fill:var(--ink);transition:r .25s cubic-bezier(.16,1,.3,1)}
.pq-g .pt.empty{fill:var(--paper);stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pq-g .pt.hot{r:12}
.pq-g .lab{font-size:14px;opacity:0;transition:opacity .4s linear}
.pq-g.drawn .lab{opacity:1}
.pq-d{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--g);row-gap:10px;font-size:14px;line-height:1.4}
.pq-d li{display:flex;flex-direction:column;padding-top:8px;border-top:1px solid var(--rule);cursor:default;transition:border-color .25s linear}
.pq-d li.hot{border-top-color:var(--ink)}
.pq-s{color:var(--mute)}
.pq figcaption{margin-top:18px;font-size:13px;color:var(--mute);max-width:70ch}
/* how we work */
.pk-how{min-height:0;padding:12vh var(--g) 18vh}
.pk-how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--g);border-top:1px solid var(--ink)}
.pk-how li{padding-top:16px;font-size:15px;line-height:1.45;color:var(--mute)}
.pk-how li span{display:block;margin-bottom:.4em;font-family:var(--didot);font-size:clamp(24px,2.2vw,46px);line-height:1.06;letter-spacing:-.01em;color:var(--ink)}
@media (max-aspect-ratio:17/20){
  .pk-h{padding-top:96px}.pk-s{grid-column:1/-1;font-size:clamp(34px,10vw,60px)}
  .pk-t{grid-template-columns:2em 1fr;row-gap:.6em}.pk-i{grid-column:1}.pk-t h3,.pk-t p{grid-column:2}
  .pk-m svg{width:84vw}.pk-m[data-slug=kmswerk] svg{width:60vw}
  .pk-m figcaption{grid-template-columns:1fr;row-gap:4px}.pk-mn,.pk-my{grid-column:1}
  .pk-strips{top:34%}
  .pq{grid-column:1/-1;padding:0 var(--g)}
  .pq-d{grid-template-columns:1fr 1fr}
  .pk-how ol{grid-template-columns:1fr;row-gap:28px}
}
/* websites: the words sit on paper above the cut photograph */
.pk-web .pk-t{color:var(--ink);mix-blend-mode:normal}
.pk-web .pk-strips{top:clamp(200px,30vh,320px)}
.pk-c{color:var(--paper);mix-blend-mode:normal}
/* product interface: the readout at poster scale, beside the chart */
.pk-ui{column-gap:var(--g)}
.pq-r{grid-column:1/6;align-self:center;margin:6vh 0 0;padding-left:var(--g);display:flex;flex-direction:column;gap:.8em}
.pq-rv{font-family:var(--sans);font-weight:700;font-size:clamp(64px,8.4vw,200px);line-height:.9;letter-spacing:-.045em;white-space:nowrap}
.pq-rn{font-size:15px;line-height:1.45;color:var(--mute);max-width:30ch}
.pq{grid-column:6/13;padding-right:var(--g)}
.pq-g .ax{stroke-width:2.5}
.pq-g text{font-size:22px}
.pq-g .tl{font-size:18px}
.pq-g .lab{font-size:21px}
.pq-g .pt{transition:r .3s cubic-bezier(.16,1,.3,1)}
.pq-g .pt.hot{r:16}
@media (max-aspect-ratio:17/20){.pq-r{grid-column:1/-1;padding:0 var(--g)}.pq{grid-column:1/-1;padding:0 var(--g)}}
/* each practice panel starts below the bar */
.pk-t{padding-top:clamp(84px,13vh,132px)}
.pk-web .pk-strips{top:clamp(260px,38vh,380px)}
.pk-c{display:none}
.cbx:empty{display:none}
/* ======== work: the screening room ======== */
.wk{position:relative;height:calc(var(--n) * 62vh + 100vh);height:calc(var(--n) * 62svh + 100svh);background:#0c0c0d;color:var(--paper)}
.wks{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;column-gap:var(--g);padding:clamp(88px,13vh,128px) var(--g) clamp(28px,5vh,56px);overflow:hidden}
.wkh{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(244,243,240,.5);padding-top:12px}
.wkh h2{margin:0;font-size:15px;font-weight:500}
.wkx{margin:0;font-size:15px;font-variant-numeric:tabular-nums}
.wkl0{grid-column:1/6;align-self:center;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between}
.wkl0 a{display:flex;align-items:baseline;gap:1.1em;text-decoration:none;color:inherit}
.wkn{width:1.8em;flex:none;font-size:14px;font-variant-numeric:tabular-nums;opacity:.42;transition:opacity .35s linear}
.wkt{font-family:var(--didot);font-size:clamp(32px,3.5vw,78px);line-height:1;letter-spacing:-.016em;opacity:.3;transition:opacity .35s linear}
.wkl0 li.on .wkt{opacity:1;font-style:italic}
.wkl0 li.on .wkn{opacity:1}
.wkl0 a:hover .wkt,.wkl0 a:focus-visible .wkt{opacity:1}
.wkl0 a:focus{outline:none}
.wkf{grid-column:6/13;align-self:center}
.wkv{position:relative;display:block;aspect-ratio:16/9;max-height:calc(100svh - 300px);margin-left:auto;overflow:hidden;background:#000}
.wkv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .6s linear,transform 1.4s cubic-bezier(.16,1,.3,1)}
.wkv video.on{opacity:1;transform:none;z-index:1}
.wkms{position:relative;margin-top:16px;min-height:6.2em}
.wkm{position:absolute;inset:0 0 auto 0;display:grid;grid-template-columns:repeat(7,1fr);column-gap:var(--g);font-size:14px;line-height:1.45;opacity:0;transition:opacity .4s linear;pointer-events:none}
.wkm.on{opacity:1;pointer-events:auto}
.wkc{grid-column:1/3;margin:0}
.wkd{grid-column:3/5;margin:0;color:rgba(244,243,240,.62)}
.wkl{grid-column:5/8;margin:0;color:rgba(244,243,240,.62)}
.wko{grid-column:5/8;justify-self:start;margin-top:.6em;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-aspect-ratio:17/20){
  .wks{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr;row-gap:18px;padding-top:84px}
  .wkf{grid-column:1/-1;grid-row:2}
  .wkv{max-height:none;margin:0}
  .wkms{min-height:7.4em}
  .wkm{grid-template-columns:1fr 1fr;row-gap:6px}.wkc{grid-column:1}.wkd{grid-column:2}.wkl{display:none}.wko{grid-column:1/-1;margin-top:0}
  .wkl0{grid-column:1/-1;grid-row:3;align-self:start;gap:4px}
  .wkt{font-size:clamp(26px,7.6vw,40px)}
}
@media (prefers-reduced-motion:reduce){.wkv video{transition:none;transform:none}}
/* ======== atlas ======== */
.at{position:relative;background:#0c0c0d;color:var(--paper)}
.ats{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(88px,12vh,120px) 0 clamp(28px,5vh,48px)}
.ath{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:baseline;padding:12px var(--g) 0;margin:0 var(--g) clamp(20px,3.4vh,40px);padding-left:0;padding-right:0;border-top:1px solid rgba(244,243,240,.5)}
.ath h2{grid-column:1/4;margin:0;font-size:15px;font-weight:500}
.ath p{grid-column:4/13;margin:0;font-family:var(--didot);font-size:clamp(24px,2.3vw,50px);line-height:1.1;letter-spacing:-.01em}
.att{display:flex;align-items:flex-end;gap:calc(var(--g) * 1.5);padding:0 var(--g);will-change:transform}
.at-f{flex:none;margin:0;height:min(62svh,calc(100svh - 300px))}
.at-f img{display:block;height:calc(100% - 30px);width:auto;background:#161617}
.at-f figcaption{margin-top:10px;font-size:14px;color:rgba(244,243,240,.62);white-space:nowrap}
.at-f figcaption span{margin-right:.9em;color:var(--paper);font-variant-numeric:tabular-nums}
@media (max-aspect-ratio:17/20){
  .ats{position:relative;height:auto;padding:96px 0 48px}
  .ath{grid-template-columns:1fr;row-gap:.5em}.ath h2,.ath p{grid-column:1}.ath p{font-size:clamp(22px,6.4vw,32px)}
  .att{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .at-f{height:56svh;scroll-snap-align:start}
}
/* ======== practice III: the real product beside its readout ======== */
.pk-ui{align-items:start;padding-bottom:12vh}
.pq2{grid-column:1/8;margin:5vh 0 0;padding-left:var(--g)}
.pq2 video{display:block;width:100%;aspect-ratio:16/9;background:#e8e6e1;outline:1px solid rgba(12,12,13,.12);outline-offset:-1px}
.pq2 figcaption{margin-top:12px;font-size:14px;color:var(--mute)}
.pq3{grid-column:8/13;margin:5vh 0 0;padding-right:var(--g)}
.pq3 .pq-r{margin:0;padding:0;align-self:auto}
.pq3 .pq-rv{font-size:clamp(56px,6.6vw,150px)}
.pq3 .pq-d{grid-template-columns:1fr 1fr;margin-top:28px}
.pq3 .pq-d li{cursor:pointer}
.pq-f{margin:18px 0 0;font-size:13px;color:var(--mute)}
@media (max-aspect-ratio:17/20){.pq2,.pq3{grid-column:1/-1;padding:0 var(--g)}}
/* ======== the principal: the portrait takes the left page; the name and the note fill the right ======== */
.principal{grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;column-gap:var(--g);min-height:100vh;min-height:100svh;padding:0;border-top:0}
.principal figure{grid-column:1/7;grid-row:1/3;min-height:100vh;min-height:100svh;margin:0}
.principal figure img{object-position:50% 30%}
.principal .page{grid-column:7/13;grid-row:1;padding:clamp(96px,15vh,160px) var(--g) 0 0}
.principal h2{padding-top:0;font-size:clamp(56px,7.4vw,168px);line-height:.88;letter-spacing:-.022em}
.principal .role{margin-top:.9em}
.principal .bio{grid-column:7/12;grid-row:2;align-self:end;padding:0 0 clamp(40px,7vh,88px);max-width:none;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.52}
@media (max-aspect-ratio:17/20){
  .principal{grid-template-columns:1fr;grid-template-rows:auto}
  .principal figure{grid-column:1;grid-row:1;min-height:72svh}
  .principal .page{grid-column:1;grid-row:2;padding:32px var(--g) 0}
  .principal h2{font-size:clamp(44px,13vw,72px)}
  .principal .bio{grid-column:1;grid-row:3;padding:20px var(--g) 56px}
}
/* ======== practice: four things we make, each shown by the live work itself ======== */
.pk2{position:relative;background:#0c0c0d;color:var(--paper)}
.pk2-h{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:20vh var(--g) 12vh}
.pk2-h h2{grid-column:1/-1;margin:0 0 .8em;font-size:15px;font-weight:500;padding-top:12px;border-top:1px solid rgba(244,243,240,.5)}
.pk2-h .pk-s{grid-column:1/12;color:var(--paper)}
.pr2{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:clamp(24px,3vw,48px);align-items:start;padding:clamp(20px,2.4vw,36px) var(--g) clamp(80px,11vh,128px);border-top:1px solid rgba(244,243,240,.22)}
.pr2t{grid-column:1/5;display:grid;grid-template-columns:2.2em 1fr;column-gap:0;align-content:start}
.pr2n{grid-row:1;font-size:15px;font-variant-numeric:tabular-nums;padding-top:.5em}
.pr2t h3{grid-column:2;margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(40px,4.2vw,96px);line-height:.94;letter-spacing:-.018em}
.pr2t p{grid-column:2;margin:1.1em 0 0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.52;color:rgba(244,243,240,.82);max-width:36ch}
.pr2m{grid-column:5/13;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);row-gap:clamp(18px,2vw,32px)}
.pr2.g3 .pr2t{grid-column:1/-1;grid-template-columns:2.2em 1fr 1fr;align-items:end}
.pr2.g3 .pr2t p{grid-column:3;grid-row:1;margin:0;justify-self:start}
.pr2.g3 .pr2m{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
.pc{margin:0}
.pc a{display:block}
.pc video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#161617}
.pc figcaption{margin-top:10px;font-size:13px;line-height:1.4;color:rgba(244,243,240,.58)}
.pk2 .pk-how{min-height:0;padding:clamp(24px,3vw,40px) var(--g) 16vh;border-top:1px solid rgba(244,243,240,.22)}
.pk2 .pk-how ol{border-top:0}
.pk2 .pk-how li{color:rgba(244,243,240,.6)}
.pk2 .pk-how li span{color:var(--paper)}
@media (max-aspect-ratio:17/20){
  .pk2-h{padding-top:96px}.pk2-h .pk-s{grid-column:1/-1;font-size:clamp(34px,10vw,60px)}
  .pr2{grid-template-columns:1fr}
  .pr2t,.pr2.g3 .pr2t{grid-column:1/-1;grid-template-columns:2em 1fr}
  .pr2.g3 .pr2t p{grid-column:2;grid-row:auto;margin-top:1em}
  .pr2m,.pr2.g3 .pr2m{grid-column:1/-1;grid-template-columns:1fr 1fr}
}
/* ======== work: the wall of six screens ======== */
.wk2{position:relative;height:calc(var(--n) * 100vh + 100vh);height:calc(var(--n) * 100svh + 100svh);background:#0c0c0d;color:var(--paper);--bandh:clamp(118px,15vh,150px)}
.wks2{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.wkh2{position:absolute;z-index:4;left:var(--g);right:var(--g);top:clamp(84px,11vh,112px);display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid rgba(244,243,240,.5);font-size:15px}
.wkh2 h2{margin:0;font-size:15px;font-weight:500}
.wkh2 p{margin:0;font-variant-numeric:tabular-nums}
.wkw{position:absolute;left:var(--g);right:var(--g);top:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--g);row-gap:clamp(16px,2.2vh,26px);transform-origin:0 0;will-change:transform}
.wcl{margin:0;will-change:opacity}
.wcv{display:block}
.wcv video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#161617}
.wcl figcaption{margin-top:8px;font-size:13px;line-height:1.3;color:rgba(244,243,240,.72);opacity:var(--cap,1);white-space:nowrap}
.wcl figcaption span{margin-right:.9em;color:var(--paper);font-variant-numeric:tabular-nums}
.wkf2{position:absolute;z-index:2;display:block;opacity:0;pointer-events:none;transition:opacity .35s linear;background:#000}
.wkf2.on{opacity:1;pointer-events:auto}
.wkf2 video{display:block;width:100%;height:100%;object-fit:cover}
.wkb{position:absolute;z-index:4;left:var(--g);right:var(--g);bottom:0;height:var(--bandh);border-top:1px solid rgba(244,243,240,.28);background:#0c0c0d}
.wi{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-content:start;padding-top:14px;opacity:0;transition:opacity .4s linear;pointer-events:none}
.wi.on{opacity:1;pointer-events:auto}
.win{grid-column:1/6;margin:0;font-family:var(--didot);font-size:clamp(36px,3.8vw,84px);line-height:.92;letter-spacing:-.018em;white-space:nowrap}
.win span{margin-right:.7em;font-family:var(--sans);font-size:15px;vertical-align:.9em;letter-spacing:0}
.wim{grid-column:6/9;margin:0;font-size:14px;line-height:1.45}
.wim span{color:rgba(244,243,240,.6)}
.wil{grid-column:9/12;margin:0;font-size:14px;line-height:1.45;color:rgba(244,243,240,.72)}
.wio{grid-column:12/13;justify-self:end;font-size:14px;text-underline-offset:4px;text-decoration-thickness:1px}
.wi0t{grid-column:1/10;margin:0;font-family:var(--didot);font-size:clamp(22px,2vw,42px);line-height:1.12;letter-spacing:-.008em}
@media (max-aspect-ratio:17/20){
  .wk2{--bandh:220px}
  .wkw{grid-template-columns:1fr 1fr}
  .wi{grid-template-columns:1fr;row-gap:8px}
  .win,.wim,.wil,.wio,.wi0t{grid-column:1/-1;justify-self:start}
  .win{font-size:clamp(30px,9vw,48px)}.wil{display:none}
  .wi0t{font-size:clamp(18px,5vw,24px)}
}
.pr2{padding-top:clamp(64px,8.5vh,104px)}
.pk2 .pk-how{padding-bottom:clamp(56px,8vh,96px)}
.thinking{padding-top:clamp(96px,14vh,150px)}
/* ======== practice: what the studio stands for, each claim proved by one film of the work ======== */
.pk3{position:relative;background:var(--paper);color:var(--ink)}
.pk3-h{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:18vh var(--g) 0}
.pk3-h h2{grid-column:1/-1;margin:0 0 .9em;padding-top:12px;border-top:1px solid var(--ink);font-size:15px;font-weight:500}
.pk3-s{grid-column:1/12;margin:0;font-family:var(--didot);font-size:clamp(40px,5.6vw,128px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.pk3-n{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--g);list-style:none;margin:clamp(56px,8vh,96px) 0 0;padding:14px 0 0;border-top:1px solid var(--ink)}
.pk3-n li{display:flex;flex-direction:column;gap:.5em}
.cl{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:center;padding:clamp(72px,11vh,128px) var(--g) 0}
.clt{grid-column:1/6}
.clm{grid-column:6/13;margin:0}
.clr .clt{grid-column:8/13;grid-row:1}
.clr .clm{grid-column:1/8;grid-row:1}
.cln{display:block;margin-bottom:.9em;font-family:var(--didot);font-size:24px;line-height:1}
.clt h3{margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(36px,3.9vw,88px);line-height:1;letter-spacing:-.018em;text-wrap:balance}
.clt p{margin:1em 0 0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.52;max-width:40ch}
.clt a{display:inline-block;margin-top:1.2em;font-size:15px;text-underline-offset:4px;text-decoration-thickness:1px}
.clm video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#e8e6e1;outline:1px solid rgba(12,12,13,.1);outline-offset:-1px}
.clm figcaption{margin-top:10px;font-size:13px;color:var(--mute)}
.pk3 .pk-how{min-height:0;margin-top:clamp(96px,14vh,160px);padding:0 var(--g) clamp(96px,14vh,160px)}
.pk3 .pk-how ol{border-top:1px solid var(--ink)}
@media (max-aspect-ratio:17/20){
  .pk3-h{padding-top:96px}.pk3-s{grid-column:1/-1;font-size:clamp(32px,9.4vw,56px)}
  
  .cl,.clr{grid-template-columns:1fr;row-gap:24px}
  .clt,.clm,.clr .clt,.clr .clm{grid-column:1/-1;grid-row:auto}
}
/* ======== work: six screens stand in a ring on the paper; scrolling turns the ring, one work at a time ======== */
.wr{position:relative;height:calc(100svh + 378svh);background:var(--paper);color:var(--ink)}
.wr-s{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.wr-h{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:baseline;margin:clamp(72px,9.5vh,96px) var(--g) 0;padding-top:12px;border-top:1px solid var(--ink)}
.wr-h h2{grid-column:1/3;margin:0;font-size:15px;font-weight:500}
.wr-ix{grid-column:3/11;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.wr-ix button{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:15px;color:var(--mute);cursor:pointer;transition:color .4s}
.wr-ix button[aria-current]{color:var(--ink)}
.wr-ix button:hover{color:var(--ink)}
.wr-c{grid-column:11/13;margin:0;text-align:right;font-size:15px;font-variant-numeric:tabular-nums;color:var(--mute)}
.wr-ci{color:var(--ink)}
.wr-v{position:relative;flex:1 1 auto;min-height:0;perspective:var(--per,1800px);perspective-origin:50% 50%}
.wr-r{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.wr-p{position:absolute;display:block;width:var(--pw,720px);aspect-ratio:16/9;left:calc(var(--pw,720px) / -2);top:calc(var(--pw,720px) * -.28125);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#e8e6e1;outline:1px solid rgba(12,12,13,.12);outline-offset:-1px}
.wr-p video{display:block;width:100%;height:100%;object-fit:cover}
.wr-b{position:relative;display:grid;margin:0 var(--g) clamp(28px,4.6vh,48px);min-height:clamp(150px,19vh,200px)}
.wr-t{grid-area:1/1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-content:end;opacity:0;visibility:hidden;transform:translate3d(0,14px,0);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s}
.wr-t.on{opacity:1;visibility:inherit;transform:none;transition:opacity .6s ease .12s,transform .8s cubic-bezier(.2,.7,.2,1) .12s,visibility 0s}
.wr-n{grid-column:1/7;margin:0;font-family:var(--didot);font-size:clamp(48px,5.4vw,116px);line-height:.92;letter-spacing:-.025em}
.wr-n span{display:block;margin-bottom:.5em;font-family:var(--sans);font-size:15px;letter-spacing:0;line-height:1;color:var(--mute)}
.wr-x{grid-column:8/13;align-self:end}
.wr-l{margin:0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.45;max-width:44ch}
.wr-m{margin:.9em 0 0;font-size:14px;line-height:1.45;color:var(--mute)}
.wr-o{display:inline-block;margin-top:.9em;font-size:15px;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-aspect-ratio:17/20){
  .wr{height:calc(100svh + 324svh)}
  .wr-h{margin-top:64px}
  .wr-h h2{grid-column:1/7}.wr-ix{display:none}.wr-c{grid-column:7/13}
  .wr-v{flex:0 0 auto;height:calc(var(--pw,300px) * .5625 * 1.32);margin-top:auto}
  .wr-b{min-height:0;margin-top:clamp(20px,3vh,36px);margin-bottom:auto;padding-bottom:28px}
  .wr-t{grid-template-columns:1fr;row-gap:18px}
  .wr-n,.wr-x{grid-column:1/-1}
  .wr-n{font-size:clamp(40px,12vw,64px)}
  .wr-l{font-size:15px}
}
/* practice, the claims: held on one screen; the claim you are on is set in ink and its film plays beside it */
.pk3-run{position:relative;height:calc(100svh + 3 * 72svh + 28svh);margin-top:clamp(40px,6vh,72px)}
.pk3-st{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:var(--g);padding:clamp(64px,8vh,88px) var(--g) clamp(24px,4vh,48px);overflow:hidden}
.pk3-l{grid-column:1/6;grid-row:2;list-style:none;margin:0;padding:0}
.pk3-l li+li{margin-top:clamp(14px,1.8vh,22px)}
.pk3-l button{appearance:none;border:0;background:none;padding:0;margin:0;text-align:left;font-family:var(--didot);font-weight:400;font-size:clamp(28px,2.55vw,54px);line-height:1.02;letter-spacing:-.016em;color:rgba(12,12,13,.24);cursor:pointer;transition:color .5s ease;text-wrap:balance}
.pk3-l button span{display:inline-block;min-width:2.1em;font-size:.5em;letter-spacing:0;vertical-align:.62em}
.pk3-l button[aria-current]{color:var(--ink)}
.pk3-l button:hover{color:rgba(12,12,13,.6)}
.pk3-l button[aria-current]:hover{color:var(--ink)}
.pk3-p{grid-column:1/6;grid-row:3;display:grid;margin-top:clamp(24px,3.4vh,40px);padding-left:calc(clamp(28px,2.55vw,54px) * .5 * 2.1)}
.pk3-q{grid-area:1/1;opacity:0;visibility:hidden;transform:translate3d(0,10px,0);transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s}
.pk3-q.on{opacity:1;visibility:inherit;transform:none;transition:opacity .55s ease .1s,transform .7s cubic-bezier(.2,.7,.2,1) .1s,visibility 0s}
.pk3-q p{margin:0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.5;max-width:40ch}
.pk3-q a{display:inline-block;margin-top:1em;font-size:15px;text-underline-offset:4px;text-decoration-thickness:1px}
.pk3-f{grid-column:6/13;grid-row:2/4;align-self:center;display:grid}
.pk3-m{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.pk3-m.on{opacity:1;visibility:inherit;transition:opacity .6s ease,visibility 0s}
.pk3-m video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#e8e6e1;outline:1px solid rgba(12,12,13,.1);outline-offset:-1px}
.pk3-m figcaption{margin-top:10px;font-size:13px;color:var(--mute)}
@media (max-aspect-ratio:17/20){
  .pk3-run{height:calc(100svh + 3 * 60svh + 24svh)}
  .pk3-st{grid-template-columns:1fr;grid-template-rows:1fr auto auto auto 1fr;padding-top:64px}
  .pk3-f{grid-column:1;grid-row:2;align-self:auto;margin-bottom:24px}
  .pk3-l{grid-column:1;grid-row:3}
  .pk3-p{grid-column:1;grid-row:4;margin-top:18px}
  .pk3-l button{font-size:clamp(21px,6.1vw,30px)}
  .pk3-l li+li{margin-top:10px}
  .pk3-p{padding-left:calc(clamp(21px,6.1vw,30px) * .5 * 2.1)}
  .pk3-q p{font-size:15px}
}
/* claims: the numeral hangs in its own column so every line of a claim starts on the same edge */
.pk3-l button{display:grid;grid-template-columns:1.1em 1fr;align-items:baseline;font-size:clamp(30px,3vw,62px)}
.pk3-l button span{display:block;min-width:0;vertical-align:baseline;font-size:.42em;transform:translateY(-.95em)}
.pk3-l li+li{margin-top:clamp(16px,2.2vh,26px)}
.pk3-p{padding-left:calc(clamp(30px,3vw,62px) * 1.1);margin-top:clamp(28px,3.8vh,44px)}
.pk3-f{align-self:start;padding-top:.32em;font-size:clamp(30px,3vw,62px)}
.pk3-m figcaption{font-size:13px}
@media (max-aspect-ratio:17/20){
  .pk3-l button{font-size:clamp(22px,6.3vw,31px)}
  .pk3-p{padding-left:calc(clamp(22px,6.3vw,31px) * 1.1)}
  .pk3-f{padding-top:0;font-size:inherit}
}
/* the films cut, they do not fade: every film stays in place and only the one you are on is opaque (fading or hiding
   a video layer while it starts cost two frames on every change, measured in Chrome at 1680 px) */
.pk3-m,.pk3-m.on{visibility:visible;transition:none}
.pk3-m{opacity:0}
.pk3-m.on{opacity:1}
/* the book closes on paper: both covers fold back, away from you, and the spine is left standing */
.close,.close .stage{background:var(--paper)}
.close .pg{will-change:transform}
.close .pg .sh{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}
.close .spn{box-shadow:inset 1px 0 0 rgba(12,12,13,.18),inset -1px 0 0 rgba(12,12,13,.18)}
.close .end{display:none}
@media (max-aspect-ratio:17/20){.close .spn{box-shadow:inset 0 1px 0 rgba(12,12,13,.18),inset 0 -1px 0 rgba(12,12,13,.18)}}
/* practice opens straight on the claims; its heading is a rule and a label, like Work's */
.pk3-run{margin-top:0}
.pk3-st{grid-template-rows:auto 1fr auto auto 1fr;padding-top:clamp(72px,9.5vh,96px)}
.pk3-hd{grid-column:1/-1;grid-row:1;display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--ink)}
.pk3-hd h2{margin:0;font-size:15px;font-weight:500}
.pk3-c{margin:0;font-size:15px;color:var(--mute)}.pk3-ci{color:var(--ink)}
.pk3-l{grid-row:3}.pk3-p{grid-row:4}.pk3-f{grid-row:3/5}
@media (max-aspect-ratio:17/20){
  .pk3-st{grid-template-rows:auto 1fr auto auto auto 1fr;padding-top:64px}
  .pk3-f{grid-row:3}.pk3-l{grid-row:4}.pk3-p{grid-row:5}
}
/* work, second ring: a screen of its own height in the page, not pinned; it turns by itself and can be thrown */
.wr{height:auto}
.wr-s{position:relative;height:100vh;height:100svh;min-height:680px;max-height:1200px}
.wr-v{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.wr-v.grab{cursor:grabbing}
.wr-p video,.wr-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wr-i{transition:opacity .35s linear;pointer-events:none;-webkit-user-drag:none}
.wr-i.off{opacity:0}
.wr-p{-webkit-user-drag:none}
/* the name changes like a line of type being reset: the old one leaves upward, the new one comes up from below */
.wr-t,.wr-t.on{transform:none;visibility:visible;opacity:1;transition:none}
.wr-t{pointer-events:none}.wr-t.on{pointer-events:auto}
.wr-n{overflow:hidden;padding-bottom:.08em}
.wr-n b{display:block;font-weight:400;transform:translate3d(0,108%,0);transition:none}
.wr-t.on .wr-n b{transform:none;transition:transform 1s cubic-bezier(.19,1,.22,1) .08s}
.wr-t.out .wr-n b{transform:translate3d(0,-108%,0);transition:transform .7s cubic-bezier(.55,0,.6,.2)}
.wr-n span,.wr-x{opacity:0;transition:opacity .3s linear}
.wr-t.on .wr-n span,.wr-t.on .wr-x{opacity:1;transition:opacity .6s linear .35s}
.wr-x{transform:none}
/* the chosen name in the index is underlined by a hairline that draws itself */
.wr-ix button{position:relative}
.wr-ix button::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.19,1,.22,1)}
.wr-ix button[aria-current]::after{transform:scaleX(1)}
@media (max-aspect-ratio:17/20){.wr-s{min-height:0;max-height:none}}
.wr-n{align-self:end}
/* the still gives way to its film in one frame (they are the same frame, so it does not show), and comes back as a fade */
.wr-i{transition:opacity .4s linear}
.wr-i.off{opacity:0;transition:none}
/* ================= chapters, 2026-11-09 ================= */
/* every chapter opens on a rule, its name and one line; the claim sits under it at reading size, never shouted */
.cx-h{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:baseline;margin:0 var(--g);padding-top:12px;border-top:1px solid var(--ink)}
.cx-h h2{grid-column:1/4;margin:0;font-size:15px;font-weight:500}
.cx-h p{grid-column:4/13;margin:0;font-size:15px;color:var(--mute)}
.cx-say{margin:clamp(28px,4vh,48px) var(--g) 0;padding-left:calc((100% - 11 * var(--g)) / 12 * 3 + 3 * var(--g));font-family:var(--didot);font-size:clamp(28px,2.7vw,56px);line-height:1.08;letter-spacing:-.012em;max-width:none;text-wrap:balance}
/* words rise into place, one after another, the first time they are seen */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block;transform:translate3d(0,108%,0);transition:transform 1.05s cubic-bezier(.19,1,.22,1) calc(var(--i,0) * 38ms)}
.in .w>span,.w.in>span{transform:none}
[data-rv]{--rv:0}
@media (prefers-reduced-motion:reduce){.w>span{transform:none;transition:none}}

/* ---- practice: four spreads, each composed for its claim, in the page's own flow ---- */
.pk3{padding:clamp(120px,16vh,180px) 0 0}
.pz{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);margin-top:clamp(96px,14vh,170px)}
.pz:first-of-type{margin-top:clamp(56px,8vh,96px)}
.pz-n{font-family:var(--didot);font-size:20px;line-height:1}
.pz-h{margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(40px,4.6vw,104px);line-height:.98;letter-spacing:-.022em;text-wrap:balance}
.pz-t p{margin:0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.5;max-width:40ch}
.pz-t a{display:inline-block;margin-top:1em;font-size:15px;text-underline-offset:4px;text-decoration-thickness:1px}
.pz-m{margin:0}
.pz-m video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#e8e6e1;outline:1px solid rgba(12,12,13,.1);outline-offset:-1px;transform:scale(1.035);transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.pz.in .pz-m video{transform:none}
.pz-m figcaption{margin-top:10px;font-size:13px;color:var(--mute)}
/* I: the claim across the top; the film under it to the right, the text beside the film */
.pz1 .pz-n{grid-column:1/2;grid-row:1}.pz1 .pz-h{grid-column:2/10;grid-row:1}
.pz1 .pz-m{grid-column:5/13;grid-row:2;margin-top:clamp(36px,5vh,64px)}
.pz1 .pz-t{grid-column:2/5;grid-row:2;align-self:end;padding-bottom:30px}
/* II: the film the full width of the page; the claim and its text under it */
.pz2 .pz-m{grid-column:1/13;grid-row:1}
.pz2 .pz-n{grid-column:1/2;grid-row:2;margin-top:clamp(28px,4vh,48px)}.pz2 .pz-h{grid-column:2/8;grid-row:2;margin-top:clamp(28px,4vh,48px)}
.pz2 .pz-t{grid-column:9/13;grid-row:2;margin-top:clamp(36px,5vh,60px)}
/* III: the film on the left, the claim and its text on the right, level with it */
.pz3 .pz-m{grid-column:1/8;grid-row:1/3}
.pz3 .pz-n{grid-column:9/10;grid-row:1;align-self:start}.pz3 .pz-h{grid-column:9/13;grid-row:1;align-self:start;padding-left:1.4em;margin-top:-.08em}
.pz3 .pz-n{grid-column:9/13}
.pz3 .pz-t{grid-column:9/13;grid-row:2;align-self:end;padding-left:calc(clamp(40px,4.6vw,104px) * 1.4 * .5)}
/* IV: the claim set large on its own line, the film centred under it */
.pz4 .pz-n{grid-column:1/13;grid-row:1;text-align:center}
.pz4 .pz-h{grid-column:1/13;grid-row:2;text-align:center;font-size:clamp(48px,7vw,156px);margin-top:.3em}
.pz4 .pz-m{grid-column:3/11;grid-row:3;margin-top:clamp(40px,6vh,72px)}
.pz4 .pz-t{grid-column:4/10;grid-row:4;text-align:center;margin-top:28px}.pz4 .pz-t p{margin:0 auto}
.pk3 .pk-how{margin-top:clamp(120px,16vh,180px)}

/* ---- signs: each sign performs its own idea as it passes ---- */
.sn{padding:clamp(140px,18vh,200px) 0 0}
.sn-b{position:relative;margin:clamp(72px,10vh,120px) var(--g) 0;min-height:clamp(420px,70vh,760px);display:grid;grid-template-rows:1fr auto;border-bottom:1px solid var(--rule)}
.sn-c{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);margin:0;padding:18px 0 20px;font-size:15px;line-height:1.45;color:var(--mute)}
.sn-c b{grid-column:1/4;font-weight:500;color:var(--ink)}
.sn-c{grid-auto-flow:column}.sn-c b+*{grid-column:4/10}
.sn-ne{width:min(82%,1100px);height:auto;margin:auto;overflow:visible}
.sn-ne line{stroke:var(--ink);stroke-width:30;stroke-linecap:butt}
.sn-ne .sl{stroke-dasharray:502;stroke-dashoffset:502}
.sn-ne .la{font-family:var(--sans);font-size:30px;font-weight:600;fill:var(--ink);opacity:0}
.sn-tw{position:relative;align-self:center;width:min(86%,1240px);aspect-ratio:3200/502;margin:auto}
.sn-tw i{position:absolute;top:0;bottom:0;left:calc(var(--k) * 100% / 14);width:calc(100% / 14 + 1px);background:url(../img/signs/templum.png) no-repeat;background-size:calc(14 * 100% - 14px) 100%;background-position:calc(var(--k) * 100% / 13) 0;will-change:transform}
.sn-sw{align-self:center;width:min(86%,1240px);margin:auto;display:grid;row-gap:clamp(18px,3vw,56px)}
.sn-sw img{display:block;width:100%;height:auto}
.sn-sw .lw{clip-path:inset(0 100% 0 0);will-change:clip-path}

/* ---- posters: the five, edge to edge, as they would be pasted on a hoarding ---- */
.po{padding:clamp(140px,18vh,200px) 0 0}
.po-w{display:grid;grid-template-columns:repeat(5,1fr);column-gap:clamp(8px,.8vw,14px);margin:clamp(48px,7vh,80px) var(--g) 0}
.po-w figure{margin:0;transform:translate3d(0,40px,0);opacity:0;transition:transform 1.3s cubic-bezier(.19,1,.22,1) calc(var(--k) * 90ms),opacity .8s linear calc(var(--k) * 90ms)}
.po-w.in figure{transform:none;opacity:1}
.po-w img{display:block;width:100%;height:auto;outline:1px solid rgba(12,12,13,.1);outline-offset:-1px}
.po-n{margin:22px var(--g) 0;padding-left:calc((100% - 11 * var(--g)) / 12 * 3 + 3 * var(--g));font-size:15px;line-height:1.45;color:var(--mute);max-width:none}

/* ---- in the hand: five phones, each at its own depth ---- */
.hd{padding:clamp(140px,18vh,200px) 0 clamp(60px,8vh,100px);overflow:hidden}
.hd-r{display:flex;justify-content:center;gap:clamp(14px,2.2vw,44px);margin:clamp(56px,9vh,110px) var(--g) 0;padding:60px 0}
.hd-r figure{flex:0 0 auto;width:min(15.2vw,calc(68vh * 1000 / 2173));margin:0;will-change:transform}
.hd-r img{display:block;width:100%;height:auto;border-radius:clamp(14px,1.7vw,30px);outline:1px solid rgba(12,12,13,.14);outline-offset:-1px;background:#e8e6e1}
.hd-r figcaption{margin-top:12px;font-size:13px;color:var(--mute);text-align:center}

/* ---- the name ---- */
.ka{padding:clamp(140px,18vh,200px) 0 0}
.ka-hero{position:relative;margin:clamp(40px,6vh,64px) 0 0;height:100vh;height:100svh;overflow:hidden}
.ka-hero img,.ka-band img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.ka-t{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);margin-top:clamp(64px,9vh,110px)}
.ka-s{grid-column:1/8;margin:0;font-family:var(--didot);font-size:clamp(34px,3.6vw,80px);line-height:1.03;letter-spacing:-.016em;text-wrap:balance}
.ka-x{grid-column:9/13;align-self:end}
.ka-x p{margin:0 0 1em;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.5}
.ka-band{position:relative;margin:clamp(72px,10vh,120px) 0 0;height:62vh;overflow:hidden}
.ka-band figcaption{position:absolute;left:var(--g);bottom:16px;margin:0;font-size:13px;color:#f4f3f0;mix-blend-mode:normal;text-shadow:none}
.ka-p{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);margin-top:clamp(72px,10vh,120px)}
.ka-p figure{margin:0}.ka-p img{display:block;width:100%;height:auto}
.ka-p figcaption{margin-top:10px;font-size:13px;color:var(--mute)}
.ka-a{grid-column:2/7}.ka-b{grid-column:8/12;margin-top:clamp(120px,22vh,260px)!important}
.ka-p figure{transform:translate3d(0,50px,0);opacity:0;transition:transform 1.4s cubic-bezier(.19,1,.22,1),opacity .9s linear}
.ka-p figure.in{transform:none;opacity:1}

@media (max-aspect-ratio:17/20){
  .cx-h h2{grid-column:1/7}.cx-h p{grid-column:7/13;text-align:right}
  .cx-say{padding-left:0;font-size:clamp(26px,7.4vw,40px)}
  .pz{grid-template-columns:1fr;row-gap:20px}
  .pz .pz-n,.pz .pz-h,.pz .pz-t,.pz .pz-m{grid-column:1!important;grid-row:auto!important;margin-top:0!important;padding:0!important;text-align:left!important}
  .pz4 .pz-h,.pz .pz-h{font-size:clamp(36px,10.4vw,56px)}
  .sn-b{min-height:56vh}.sn-c{grid-template-columns:1fr;row-gap:4px;grid-auto-flow:row}.sn-c b,.sn-c b+*{grid-column:1}
  .sn-ne,.sn-tw,.sn-sw{width:100%}
  .po-w{grid-template-columns:repeat(2,1fr);row-gap:10px}.po-w figure:last-child{grid-column:1/-1;width:50%;justify-self:center}
  .po-n{padding-left:0}
  .hd-r{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:40px 0 0;padding:20px var(--g) 30px}
  .hd-r figure{width:58vw;scroll-snap-align:center}
  .ka-hero{height:70svh}.ka-t{grid-template-columns:1fr;row-gap:28px}.ka-s,.ka-x{grid-column:1}
  .ka-band{height:42svh}
  .ka-p{grid-template-columns:1fr;row-gap:40px}.ka-a,.ka-b{grid-column:1}.ka-b{margin-top:0!important;width:72%;justify-self:end}
}
/* ---- up close: a hard crop of the live site, large, with where it sits on the page beside it ---- */
.up{padding:clamp(140px,18vh,200px) 0 0}
.up-i{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);margin-top:clamp(80px,12vh,150px)}
.up-i:first-of-type{margin-top:clamp(56px,8vh,96px)}
.up-f{position:relative;margin:0;overflow:hidden;background:#e8e6e1}
.up-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform}
.up-c{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:8px;align-content:start;font-size:15px;line-height:1.45}
.up-n{grid-row:1/3;font-family:var(--didot);font-size:20px;line-height:1.1}
.up-w{margin:0;font-family:var(--didot);font-size:clamp(24px,1.7vw,34px);line-height:1}
.up-w a{text-decoration:none}.up-w a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.up-d{grid-column:2;margin:0;color:var(--mute);max-width:36ch}
.up-l{grid-column:2;position:relative;width:min(220px,100%);margin-top:14px}
.up-l img{display:block;width:100%;height:auto;outline:1px solid rgba(12,12,13,.12);outline-offset:-1px}
.up-l i{position:absolute;outline:1.5px solid var(--ink);box-shadow:0 0 0 9999px rgba(244,243,240,.55)}
.up-l{overflow:hidden}
/* 1: full width; 2: right, tall; 3: full width band; 4: left; 5: right */
.up-1 .up-f{grid-column:1/13;margin:0 calc(-1 * var(--g))}.up-1 .up-c{grid-column:1/6;margin-top:22px}
.up-2 .up-f{grid-column:6/12;grid-row:1}.up-2 .up-c{grid-column:2/5;grid-row:1;align-self:end}
.up-3 .up-f{grid-column:1/13;margin:0 calc(-1 * var(--g))}.up-3 .up-c{grid-column:8/13;margin-top:22px}
.up-4 .up-f{grid-column:1/9;grid-row:1}.up-4 .up-c{grid-column:10/13;grid-row:1;align-self:center}
.up-5 .up-f{grid-column:7/12;grid-row:1}.up-5 .up-c{grid-column:2/6;grid-row:1;align-self:start}
.up-i{padding:0 var(--g)}
@media (max-aspect-ratio:17/20){
  .up-i{grid-template-columns:1fr;row-gap:18px}
  .up-i .up-f,.up-i .up-c{grid-column:1!important;grid-row:auto!important;margin-left:0;margin-right:0;align-self:auto}
  .up-1 .up-f,.up-3 .up-f{margin:0 calc(-1 * var(--g))!important}
}
/* the closed book has a body: the covers turn on the spine inside one object, which then turns to show its depth */
.close{height:300vh}
.close .stage{display:block;perspective:2000px;perspective-origin:50% 46%}
.close .bk{position:absolute;inset:0;display:grid;grid-template-columns:1fr var(--spine) 1fr;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.close .pg{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.close .bk-top{position:absolute;top:0;left:calc(50% - var(--spine) / 2);width:var(--spine);height:50vw;transform-origin:50% 0;transform:rotateX(-90deg);
  background:repeating-linear-gradient(90deg,#f4f3f0 0 2px,#dcd9d2 2px 3px);backface-visibility:visible;box-shadow:inset 0 0 0 1px rgba(12,12,13,.12)}
@media (max-aspect-ratio:17/20){
  .close .bk{grid-template-columns:1fr;grid-template-rows:1fr var(--spine) 1fr}
  .close .bk-top{top:calc(50% - var(--spine) / 2);left:0;width:var(--spine);height:var(--spine);transform-origin:0 50%;transform:rotateY(90deg);
    background:repeating-linear-gradient(0deg,#f4f3f0 0 2px,#dcd9d2 2px 3px)}
}
.sn-c span{grid-column:4/10}
.up-f{outline:1px solid rgba(12,12,13,.1);outline-offset:-1px}
/* ring, finer: each screen carries its label like a museum caption; screens further round take on the paper's light */
.wr-fg{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none}
.wr-lb{position:absolute;left:0;right:0;top:100%;display:flex;gap:10px;align-items:baseline;padding-top:12px;font-size:13px;line-height:1.3;color:var(--ink);white-space:nowrap;pointer-events:none}
.wr-lb b{font-weight:400;font-family:var(--didot);font-size:15px}
.wr-lb em{margin-left:auto;font-style:normal;color:var(--mute)}
.wr-v.own,.wr-v.own .wr-p{cursor:none}
.wr-cur{position:absolute;left:0;top:0;z-index:3;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.01em;pointer-events:none;opacity:0;scale:.4;transition:opacity .3s ease,scale .45s cubic-bezier(.19,1,.22,1)}
.wr-cur.on{opacity:1;scale:1}.wr-cur.on.small{scale:.28}
@media (max-aspect-ratio:17/20){.wr-lb{font-size:12px}.wr-lb em{display:none}}
/* ---- up close, second cut: whole details, each captioned directly under itself on its own left edge ---- */
.up{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:clamp(120px,15vh,168px) var(--g) 0}
.up>.cx-h,.up>.cx-say{grid-column:1/-1;margin-left:0;margin-right:0}
.up .up-i{display:block;padding:0;margin:clamp(96px,13vh,150px) 0 0;grid-template-columns:none}
.up .up-i:first-of-type{margin-top:clamp(56px,8vh,88px)}
.up .up-f,.up-1 .up-f,.up-3 .up-f{grid-column:auto;grid-row:auto;margin:0;width:100%}
.up .up-f img{transform-origin:50% 40%}
.up .up-c{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;margin-top:16px;padding:0;align-content:start}
.up .up-n{grid-row:auto;font-family:var(--didot);font-size:15px;line-height:1.6}
.up .up-w{font-family:var(--didot);font-size:clamp(22px,1.55vw,30px);line-height:1;text-decoration:none;align-self:baseline}
.up .up-w:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.up .up-d{grid-column:2;font-size:15px;line-height:1.45;color:var(--mute);max-width:46ch}
.up-1{grid-column:1/12;grid-row:3}
.up-2{grid-column:7/12;grid-row:4}
.up-3{grid-column:2/13;grid-row:5}
.up-4{grid-column:1/6;grid-row:6}
.up-5{grid-column:7/12;grid-row:6;margin-top:calc(clamp(96px,13vh,150px) + 18vh)!important}
@media (max-aspect-ratio:17/20){
  .up{grid-template-columns:1fr;padding-top:96px}
  .up-1,.up-2,.up-3,.up-4,.up-5{grid-column:1;grid-row:auto}
  .up .up-i{margin-top:64px}.up-5{margin-top:64px!important}
  .up-1 .up-f,.up-3 .up-f{margin:0 calc(-1 * var(--g))!important;width:calc(100% + 2 * var(--g))}
}
/* the bar leaves while you read down and returns as soon as you scroll up */
.bar,.js .bar{transition:transform .7s cubic-bezier(.19,1,.22,1),opacity .8s linear}
.bar.away{transform:translate3d(0,-130%,0)}
/* one measure of air before every chapter, and the signs held to the height they need */
.pk3,.sn,.po,.hd,.ka{padding-top:clamp(120px,15vh,168px)}
.sn-b{min-height:clamp(380px,58vh,640px);margin-top:clamp(56px,8vh,96px)}
.sn-b:last-child{border-bottom:0}
.hd{padding-bottom:clamp(40px,6vh,72px)}
.sn-ne .la{font-size:26px;font-weight:600;letter-spacing:-.01em}
@media (max-aspect-ratio:17/20){.sn-c b,.sn-c span{grid-column:1/-1}.sn-c{grid-template-columns:1fr}}
@media (max-aspect-ratio:17/20){.cx-h p{font-size:13px;text-wrap:balance}.sn-b{min-height:46vh}}
/* TEMPLUM, second cut: twelve windows on one vector word, sliding in from above and below, in order, inside the band */
.sn-tw{position:relative;align-self:center;width:min(86%,1240px);aspect-ratio:932.4/146;margin:auto;overflow:hidden}
.sn-tw .whole{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.sn-tw i{position:absolute;top:0;bottom:0;left:calc(var(--k) * 100% / 12);width:calc(100% / 12);overflow:hidden;background:none;will-change:transform}
.sn-tw i img{position:absolute;top:0;left:calc(var(--k) * -100%);width:1200%;height:100%;max-width:none}
.sn-tw.rest .whole{opacity:1}.sn-tw.rest i{visibility:hidden}
/* KMSWERK's chart: quadrant names and the five products arrive once the axes stand */
.sn-ne .qd text{font-family:var(--sans);font-size:15px;fill:var(--mute);opacity:0}
.sn-ne .pts g{opacity:0;transform:translate3d(0,8px,0);transition:opacity .6s linear calc(var(--k) * 120ms),transform .9s cubic-bezier(.19,1,.22,1) calc(var(--k) * 120ms)}
.sn-ne.plot .pts g{opacity:1;transform:none}
.sn-ne .pts circle{fill:var(--ink)}.sn-ne .pts circle.gap{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.sn-ne .pts text{font-family:var(--sans);font-size:17px;font-weight:600;fill:var(--ink)}
.sn-ne .pts tspan{font-weight:400;fill:var(--mute)}
/* ---- up close, third cut: five plates of one size, stacked like the pages of a book, the caption held beside them ---- */
.up2{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);margin-top:clamp(56px,8vh,88px)}
.up2-s{grid-column:1/5;position:sticky;top:clamp(110px,16vh,170px);align-self:start;padding-right:clamp(0px,2vw,32px)}
.up2-c{margin:0 0 clamp(22px,3vh,36px);font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums}.up2-i{color:var(--ink)}
.up2-ts{display:grid}
.up2-t{grid-area:1/1;opacity:0;visibility:hidden;transform:translate3d(0,12px,0);transition:opacity .35s linear,transform .6s cubic-bezier(.19,1,.22,1),visibility 0s linear .35s}
.up2-t.on{opacity:1;visibility:inherit;transform:none;transition:opacity .55s linear .08s,transform .8s cubic-bezier(.19,1,.22,1) .08s,visibility 0s}
.up2-n{margin:0;font-family:var(--didot);font-size:clamp(36px,3.2vw,64px);line-height:1;letter-spacing:-.015em}
.up2-d{margin:.9em 0 0;font-size:clamp(15px,.5vw + 10px,18px);line-height:1.5;color:var(--ink);max-width:34ch}
.up2-t a{display:inline-block;margin-top:1.1em;font-size:15px;text-underline-offset:4px;text-decoration-thickness:1px}
.up2-p{grid-column:5/13;display:grid;row-gap:clamp(14px,1.6vw,26px)}
.up2-f{margin:0}
.up2-w{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e8e6e1}
.up2-w img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform}
.up2-f figcaption{display:none}
@media (max-aspect-ratio:17/20){
  .up2{grid-template-columns:1fr}.up2-s{display:none}.up2-p{grid-column:1;row-gap:48px}
  .up2-f figcaption{display:block;margin-top:12px;font-size:14px;line-height:1.45;color:var(--mute)}
  .up2-f figcaption span{font-family:var(--didot);color:var(--ink)}.up2-f figcaption b{font-family:var(--didot);font-weight:400;font-size:20px;color:var(--ink);margin-right:.3em}
  .up2-w{margin:0 calc(-1 * var(--g))}
}
/* the name, second half: the temple and the city in pairs, one look each, as the opening said */
.ka-say{margin-top:clamp(96px,13vh,150px)}
.ka-d{padding:0 var(--g)}
.ka-r{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);margin-top:clamp(56px,8vh,96px)}
.ka-r+.ka-r{margin-top:clamp(88px,12vh,140px)}
.ka-r figure{margin:0}
.ka-r .l{grid-column:2/7}.ka-r .r{grid-column:7/12}
.ka-r img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#e8e6e1}
.ka-r figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--mute);max-width:38ch}
.ka-r figure{opacity:0;transform:translate3d(0,46px,0);transition:opacity .9s linear,transform 1.4s cubic-bezier(.19,1,.22,1)}
.ka-r .r{transition-delay:.14s}
.ka-r.in figure{opacity:1;transform:none}
@media (max-aspect-ratio:17/20){.ka-r{grid-template-columns:1fr 1fr;column-gap:10px}.ka-r .l{grid-column:1}.ka-r .r{grid-column:2}.ka-r figcaption{font-size:12px}}
/* the principal: name, role and note read as one block, held in the middle of the portrait's height */
@media (min-aspect-ratio:17/20){
  .principal{grid-template-rows:1fr auto auto 1fr}
  .principal figure{grid-row:1/5}
  .principal .page{grid-row:2;padding:0 var(--g) 0 0;border-top:1px solid var(--ink);padding-top:14px;margin-right:var(--g)}
  .principal .role{margin:.9em 0 0}
  .principal .bio{grid-row:3;align-self:start;padding:clamp(40px,6vh,64px) 0 0;max-width:46ch}
  .principal .bio p:last-child{margin-bottom:0}
}
@media (max-aspect-ratio:17/20){.principal{grid-template-rows:auto auto auto}.principal .bio{align-self:start;padding-top:24px}}
@media (max-aspect-ratio:17/20){.principal{min-height:0;align-content:start}.principal .page{align-self:start}}
@media (max-aspect-ratio:17/20){.principal .page{min-height:0;padding-bottom:0}}
/* ---- practice, third cut: four spreads, each a claim and one thing from the work, never its interface ---- */
.mx{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);margin-top:clamp(140px,19vh,220px)}
.mx:first-of-type{margin-top:clamp(64px,9vh,110px)}
.mx-n{font-family:var(--didot);font-size:20px;line-height:1;padding-top:.5em}
.mx-h{margin:0;font-family:var(--didot);font-weight:400;font-size:clamp(44px,5.4vw,118px);line-height:.96;letter-spacing:-.024em;text-wrap:balance}
.mx-p{margin:0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.5;max-width:40ch}
.mx-p a{white-space:nowrap;text-underline-offset:4px;text-decoration-thickness:1px}
.mx-f{margin:0}.mx-f img{display:block;width:100%;height:auto}
/* I: the claim on the left, the mark standing large on the right */
.mx1 .mx-n{grid-column:1/2;grid-row:1}.mx1 .mx-h{grid-column:2/8;grid-row:1}
.mx1 .mx-p{grid-column:2/6;grid-row:2;margin-top:clamp(32px,4.5vh,56px)}
.mx1 .mx-f{grid-column:8/13;grid-row:1/3;align-self:center;padding:0 2vw}
/* II: the work's own opening, the full width of the page, then the claim under it */
.mx2 .mx-f{grid-column:1/-1;grid-row:1;margin:0 calc(-1 * var(--g))}
.mx2 .mx-f img{aspect-ratio:2/1;object-fit:cover}
.mx2 .mx-n{grid-column:1/2;grid-row:2;margin-top:clamp(36px,5vh,60px)}.mx2 .mx-h{grid-column:2/8;grid-row:2;margin-top:clamp(36px,5vh,60px)}
.mx2 .mx-p{grid-column:9/13;grid-row:2;align-self:end}
/* III: the claim across, the five posters under it, edge to edge */
.mx3 .mx-n{grid-column:1/2;grid-row:1}.mx3 .mx-h{grid-column:2/10;grid-row:1}
.mx3 .mx-ps{grid-column:1/-1;grid-row:2;margin-top:clamp(44px,6vh,72px)}
.mx3 .mx-ps .po-w{margin:0}
.mx3 .mx-p{grid-column:2/7;grid-row:3;margin-top:24px}
/* IV: the claim, then the six addresses themselves, each one a door */
.mx4 .mx-n{grid-column:1/2;grid-row:1}.mx4 .mx-h{grid-column:2/11;grid-row:1}
.mx-l{grid-column:2/13;grid-row:2;list-style:none;margin:clamp(44px,6vh,72px) 0 0;padding:0;border-top:1px solid var(--ink)}
.mx-l li{border-bottom:1px solid var(--rule)}
.mx-l a{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr) auto;align-items:baseline;column-gap:var(--g);padding:clamp(14px,1.8vh,22px) 0;text-decoration:none}
.mx-w{font-size:15px;color:var(--mute)}
.mx-u{font-family:var(--didot);font-size:clamp(28px,3vw,62px);line-height:1;letter-spacing:-.012em;transition:transform .7s cubic-bezier(.19,1,.22,1)}
.mx-a{font-size:clamp(20px,1.6vw,30px);transition:transform .7s cubic-bezier(.19,1,.22,1)}
.mx-l a:hover .mx-u{transform:translate3d(.4em,0,0)}.mx-l a:hover .mx-a{transform:translate3d(.2em,-.2em,0)}
/* ---- the name ends on one person among the columns, and the principal follows ---- */
.ka-one{position:relative;margin:clamp(96px,13vh,150px) 0 0;height:100vh;height:100svh;overflow:hidden}
.ka-one img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 60%;transform-origin:48% 62%;will-change:transform}
.ka-one figcaption{position:absolute;left:var(--g);bottom:20px;margin:0;font-size:14px;color:#f4f3f0}
@media (max-aspect-ratio:17/20){
  .mx{grid-template-columns:1fr;row-gap:20px}
  .mx .mx-n,.mx .mx-h,.mx .mx-p,.mx .mx-f,.mx .mx-ps,.mx .mx-l{grid-column:1!important;grid-row:auto!important;margin-top:0!important;padding:0}
  .mx-h{font-size:clamp(36px,10.4vw,56px)}
  .mx1 .mx-f{width:72%}
  .mx2 .mx-f{margin:0 calc(-1 * var(--g))!important}
  .mx-l a{grid-template-columns:1fr auto;row-gap:4px}.mx-w{grid-column:1/-1}.mx-u{font-size:clamp(22px,6.4vw,32px)}
  .ka-one{height:70svh}
}
.mx2 .mx-f img{aspect-ratio:auto;object-fit:fill}
.ka .ka-t{margin-top:clamp(56px,8vh,96px)}
/* work band: the name slides inside a mask exactly one line high, the number changes with it */
.wr-n b{display:block;overflow:hidden;transform:none!important;transition:none!important;padding-bottom:.06em;margin-bottom:-.06em}
.wr-n b i{display:block;font-style:normal;transform:translate3d(0,110%,0);transition:none}
.wr-t.on .wr-n b i{transform:none;transition:transform 1s cubic-bezier(.19,1,.22,1) .1s}
.wr-t.out .wr-n b i{transform:translate3d(0,-110%,0);transition:transform .6s cubic-bezier(.55,0,.6,.2)}
.wr-n{overflow:visible;padding-bottom:0}
.wr-n span{transition:opacity .25s linear}.wr-t.on .wr-n span{transition:opacity .5s linear .25s}
/* the name, as a spread: text on the left page, the person among the columns on the right; the principal mirrors it */
.ka{padding:0}
.ka-sp{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);min-height:100vh;min-height:100svh}
.ka-tx{grid-column:1/7;align-self:center;padding:clamp(96px,14vh,140px) var(--g) clamp(64px,9vh,96px);display:grid;row-gap:0}
.ka-h{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--ink);margin-bottom:clamp(40px,7vh,80px)}
.ka-h h2{margin:0;font-size:15px;font-weight:500}.ka-h p{margin:0;font-size:15px;color:var(--mute)}
.ka-s{margin:0;font-family:var(--didot);font-size:clamp(36px,3.5vw,76px);line-height:1.04;letter-spacing:-.016em;text-wrap:balance}
.ka-pp{margin:clamp(32px,5vh,56px) 0 0;font-size:clamp(15px,.5vw + 10px,19px);line-height:1.5;max-width:42ch}
.ka-f{margin:clamp(40px,7vh,80px) 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;color:var(--mute)}
.ka-im{grid-column:7/13;position:relative;margin:0 calc(-1 * var(--g)) 0 0;overflow:hidden;min-height:100vh;min-height:100svh}
.ka-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 46%;transform-origin:52% 48%;will-change:transform}
@media (max-aspect-ratio:17/20){
  .ka-sp{grid-template-columns:1fr}
  .ka-tx{grid-column:1;padding:96px var(--g) 40px}
  .ka-im{grid-column:1;margin:0;min-height:80svh}
}
.ka-im{margin:0}
/* the old name leaves first, quickly; the new one comes up once it has gone, so the two never overlap */
.wr-t.out .wr-n b i{transition:transform .38s cubic-bezier(.55,0,.6,.2)}
.wr-t.on .wr-n b i{transition:transform .95s cubic-bezier(.19,1,.22,1) .3s}
.wr-t.on .wr-x{transition:opacity .6s linear .45s}
.ka-tx{display:block}.ka-tx .ka-s{grid-column:auto}
@media (min-aspect-ratio:17/20){.ka-im{margin-left:calc(-1 * var(--g))}}
/* the name, walking in: four frames, each held on the screen while the next one slides over it */
.ka-im figcaption{position:absolute;left:var(--g);bottom:18px;margin:0;font-size:13px;color:#f4f3f0}
.ka-st{position:relative}
.ka-sl{position:sticky;top:0;height:100vh;height:100svh;margin:0;overflow:hidden;background:#0c0c0d}
.ka-sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 55%;will-change:transform}
.ka-sl figcaption{position:absolute;left:var(--g);right:var(--g);bottom:clamp(18px,3vh,32px);display:flex;gap:18px;align-items:baseline;margin:0;font-size:15px;line-height:1.4;color:#f4f3f0}
.ka-sl figcaption span{font-family:var(--didot);font-size:20px}
@media (max-aspect-ratio:17/20){.ka-sl{height:78svh}.ka-sl figcaption{font-size:13px}}
/* ======== the name, as a colonnade: six tall photographs stand like columns; scrolling opens them one at a time ======== */
.co{position:relative;height:calc(100svh + 6.6 * 52svh)}
.co-s{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(72px,9.5vh,96px) var(--g) clamp(22px,3.4vh,36px);overflow:hidden}
.co-h{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:baseline;padding-top:12px;border-top:1px solid var(--ink)}
.co-h h2{grid-column:1/4;margin:0;font-size:15px;font-weight:500}.co-h p{grid-column:4/10;margin:0;font-size:15px;color:var(--mute)}
.co-h .co-n{grid-column:10/13;text-align:right;font-variant-numeric:tabular-nums}.co-i{color:var(--ink)}
.co-r{position:relative;display:flex;gap:clamp(5px,.45vw,9px);margin:clamp(20px,3vh,32px) 0;min-height:0}
.co-c{position:relative;flex:1 1 0;min-width:0;margin:0;overflow:hidden;background:#1a1a1b}
.co-c img{position:absolute;top:0;left:50%;height:100%;width:var(--ow,40vw);max-width:none;object-fit:cover;transform:translate3d(-50%,0,0) scale(var(--zs,1));will-change:transform}
.co-say{position:absolute;left:0;right:0;top:50%;margin:0;padding:0 6vw;transform:translate3d(0,-50%,0);text-align:center;font-family:var(--didot);font-size:clamp(34px,4.3vw,92px);line-height:1.04;letter-spacing:-.016em;color:#f4f3f0;text-wrap:balance;pointer-events:none}
.co-r::after{content:"";position:absolute;inset:0;background:#0c0c0d;opacity:var(--veil,.42);pointer-events:none}
.co-b{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:start}
.co-ts{grid-column:1/7;display:grid}
.co-t{grid-area:1/1;margin:0;display:flex;gap:16px;align-items:baseline;font-family:var(--didot);font-size:clamp(22px,1.7vw,34px);line-height:1.15;opacity:0;transform:translate3d(0,10px,0);transition:opacity .35s linear,transform .6s cubic-bezier(.19,1,.22,1)}
.co-t.on{opacity:1;transform:none;transition:opacity .55s linear .1s,transform .8s cubic-bezier(.19,1,.22,1) .1s}
.co-t span{font-size:.62em;color:var(--mute)}
.co-p{grid-column:8/13;margin:0;font-size:15px;line-height:1.5;color:var(--mute);max-width:44ch}
@media (max-aspect-ratio:17/20){
  .co{height:calc(100svh + 6.6 * 46svh)}
  .co-s{padding-top:64px}
  .co-h h2{grid-column:1/7}.co-h p{display:none}.co-h .co-n{display:block;grid-column:7/13}
  .co-say{font-size:clamp(26px,7.6vw,40px);padding:0 5vw}
  .co-b{grid-template-columns:1fr;row-gap:12px}.co-ts,.co-p{grid-column:1}
  .co-t{font-size:20px}.co-p{font-size:13px}
}
/* the seams between the columns go dark while the sentence stands over them, so no letter is cut by a seam */
.co-r::before{content:"";position:absolute;inset:0;background:#0c0c0d;opacity:var(--seam,1);pointer-events:none}
.co-c{z-index:1}
.co-r::after{z-index:2}.co-say{z-index:3}
.co-say{font-size:clamp(32px,3.9vw,84px);text-shadow:none}

/* the name, full bleed: the six columns fill the screen edge to edge, the words stand on the photographs, and at the end
   the columns close into one wall with KARNAK cut across it */
.co{height:calc(100svh + 8.6 * 52svh)}
.co-s{padding:0;display:block;background:#0c0c0d}
.co-r{position:absolute;inset:0;margin:0;gap:3px}
.co-h{position:absolute;z-index:6;left:var(--g);right:var(--g);top:calc(var(--g) + 56px);border-top:0;padding-top:0;color:#fff;mix-blend-mode:difference}
.co-h p{color:inherit;opacity:.82}
.co-i{color:inherit}
.co-s::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;z-index:4;pointer-events:none;background:linear-gradient(to top,rgba(10,10,11,.66),rgba(10,10,11,0))}
.co-b{position:absolute;z-index:6;left:var(--g);right:var(--g);bottom:calc(var(--g) * 1.3);color:#f4f3f0}
.co-t{font-size:clamp(26px,2.3vw,48px)}
.co-t span{color:rgba(244,243,240,.6)}
.co-p{color:rgba(244,243,240,.86);opacity:0;font-size:16px}
.co-wm{position:absolute;z-index:5;left:50%;top:47%;width:min(90vw,1720px);height:auto;fill:#fff;mix-blend-mode:difference;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}
@media (max-aspect-ratio:17/20){
  .co{height:calc(100svh + 8.6 * 46svh)}
  .co-t{font-size:22px}
  .co-wm{width:92vw}
}