/* fonts, served from this site: Inter Tight and Inter (SIL Open Font License), latin, variable weight */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300 700;font-display:swap;src:url(../../fonts/intertight-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(../../fonts/inter-latin.woff2) format('woff2')}
/* H, the final options. One stylesheet for all of them; colours come from the palette engine in h.js. */
:root{
  --bg:#000000; --bg2:#202124; --ink:#FFFFFF; --mute:#AAAAAE; --line:rgba(255,255,255,.14); --shadow:rgba(0,0,0,.7);
  --c1:#FFC229; --c2:#FE52B9; --c3:#26BBFF; --c4:#A9D34F;
  --k1:#FFC229; --k2:#FE52B9; --k3:#26BBFF; --k4:#A9D34F;
  --kb1:transparent; --kb2:transparent; --kb3:transparent; --kb4:transparent;
  --n1:#FFC229; --n2:#FE52B9; --n3:#26BBFF; --n4:#A9D34F;
  --w1:#46C862; --w2:#A9D34F; --w3:#FF8F1F; --w4:#26BBFF; --w5:#FE52B9; --w6:#7370FF;
  --o1:#FF3F56; --o2:#FE52B9; --o3:#BE3DFF; --o4:#7370FF; --o5:#26BBFF; --o6:#44DAC1;
  --o7:#46C862; --o8:#A9D34F; --o9:#FFC229; --o10:#FF8F1F; --o11:#FD6535; --o12:#B2705C;
  --hero-bg:#000000; --hero-ink:#FFFFFF; --hero-mute:#AAAAAE;
  --num-bg:#000000; --num-ink:#FFFFFF;
  --ct-bg:#000000; --ct-ink:#FFFFFF; --ct-mute:#AAAAAE;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Inter Tight','Inter',system-ui,sans-serif;
  --gut:clamp(1rem,4vw,3.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:1rem}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--c1);color:#000}
.k{color:var(--kc);background:var(--kbc);padding:0 .1em;margin:0 -.1em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k1{--kc:var(--k1);--kbc:var(--kb1)} .k2{--kc:var(--k2);--kbc:var(--kb2)} .k3{--kc:var(--k3);--kbc:var(--kb3)} .k4{--kc:var(--k4);--kbc:var(--kb4)}
.chips .k{padding:0 .12em;margin:0 -.04em}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem var(--gut);background:var(--hero-bg);color:var(--hero-ink)}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font:600 16px/1 var(--disp);letter-spacing:-.01em}
.mark{width:31px;height:26px;flex:none}
.mark .d{fill:var(--c1)}
.nav nav{display:flex;gap:clamp(1.1rem,2.6vw,2.4rem);font-size:15px}
.nav nav a{text-decoration:none;opacity:.78;transition:opacity .2s}
.nav nav a:hover,.nav nav a[aria-current]{opacity:1}

/* hero: the words are the picture */
.hero{background:var(--hero-bg);color:var(--hero-ink);padding:clamp(1.5rem,6vh,4.5rem) var(--gut) clamp(2.5rem,7vh,4.5rem);min-height:calc(100svh - 74px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(2.5rem,7vh,5rem)}
.hero h1{font:600 clamp(3rem,8.4vw,9.6rem)/.93 var(--disp);letter-spacing:-.052em;margin:0;max-width:12.5ch}
.hero-foot{display:grid;grid-template-columns:minmax(0,34rem) auto;justify-content:space-between;align-items:end;gap:2rem 4rem}
.lede{font-size:clamp(1.05rem,1.25vw,1.22rem);line-height:1.55;color:var(--hero-mute);margin:0}
.lede b{color:var(--hero-ink);font-weight:500}
.ctas{display:flex;gap:.7rem;margin-top:2rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;height:50px;padding:0 1.45rem;border-radius:8px;background:var(--hero-ink);color:var(--hero-bg);text-decoration:none;font:600 15px var(--font);transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.line{background:transparent;color:var(--hero-ink);box-shadow:inset 0 0 0 1.5px currentColor}
.surf-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;text-align:right}
.surf-ctl p{margin:0;font-size:13.5px;color:var(--hero-mute);max-width:19rem}

/* words filled with surfaces cut from renders */
@property --sx{syntax:'<percentage>';inherits:false;initial-value:50%}
.tx{color:var(--kc);transition:color .4s}
.surf .tx{color:transparent;cursor:pointer;-webkit-background-clip:text;background-clip:text;background-color:var(--kc);
  background-image:linear-gradient(var(--veil,transparent),var(--veil,transparent)),radial-gradient(circle at var(--mx,30%) var(--my,30%),rgba(255,255,255,.32),rgba(255,255,255,0) 1.5em),var(--s);
  background-size:auto,auto,cover;background-position:0 0,0 0,var(--sx) 50%;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:drift 46s ease-in-out infinite alternate}
.light .hero{--veil:rgba(0,0,0,.34)} .chips .hero{--veil:rgba(0,0,0,.16)}
@keyframes drift{from{--sx:22%}to{--sx:78%}}

/* segmented control */
.seg{display:flex;flex-wrap:wrap;gap:.2rem;padding:.25rem;border-radius:9px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{all:unset;cursor:pointer;padding:.45rem .72rem;border-radius:7px;font-size:13.5px;color:var(--mute);transition:color .2s,background-color .2s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg)}
.seg button:focus-visible{outline:2px solid var(--pc,var(--c1));outline-offset:2px}
.hero .seg{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-ink) 22%,transparent)}
.hero .seg button{color:var(--hero-mute)}
.hero .seg button.on{background:var(--hero-ink);color:var(--hero-bg)}

/* sections */
.sec{padding:clamp(5rem,14vh,10rem) var(--gut)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:1.5rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,7vh,5rem)}
.sec-head h2{font:400 clamp(2.6rem,5.4vw,5.6rem)/.98 var(--disp);letter-spacing:-.04em;margin:0}
.sec-head p{color:var(--mute);margin:0;font-size:1.06rem}
.sec-head p + p{margin-top:.8rem}
.sub{padding:clamp(4.5rem,12vh,8rem) var(--gut) 0;scroll-margin-top:1rem}
.sub-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:1.2rem 4rem;align-items:end;margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.sub-head h3{font:400 clamp(2.1rem,3.9vw,3.9rem)/1 var(--disp);letter-spacing:-.035em;margin:0}
.sub-head h3 span{color:var(--ptc,var(--pc))}
.sub-head p{margin:0;color:var(--mute);font-size:15.5px}
.sub-head p + p{margin-top:.7rem}
.top-line{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:baseline;font-size:14.5px;color:var(--mute);margin-bottom:.9rem}
.top-line b{color:var(--ink);font-weight:500}
.facts{display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;list-style:none;padding:0;margin:1.4rem 0 0;font-size:15px;color:var(--mute)}
.facts b{color:var(--ink);font-weight:600;margin-right:.25rem}
.facts a{color:var(--ink);text-underline-offset:.25em;text-decoration-color:var(--pc);text-decoration-thickness:2px}
.shot{margin:0;border-radius:10px;overflow:hidden;background:var(--bg2)}
.shot img{width:100%;height:auto}
.go-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--pc);padding-bottom:.15rem}
.go-link:hover{color:var(--pc)}

/* chapter opener */
.chapter{padding:clamp(6rem,16vh,11rem) var(--gut) clamp(1rem,3vh,2rem);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2rem 5rem;align-items:end}
.chapter h1,.chapter h2{font:400 clamp(2.9rem,6.4vw,7rem)/.95 var(--disp);letter-spacing:-.045em;margin:0;max-width:14ch}
.chapter h1 span,.chapter h2 span{color:var(--pc)}
.chapter p{margin:0;color:var(--mute);font-size:clamp(1.03rem,1.2vw,1.17rem)}
.chapter .facts{margin-top:1.6rem}

/* stages shared by the 3D pieces */
.stage{position:relative;border-radius:12px;overflow:hidden;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bleed{margin-inline:calc(var(--gut) * -1);border-radius:0;box-shadow:none}
.s-load{position:absolute;inset:0;z-index:3;display:grid;place-items:center;font-size:14px;color:var(--mute);transition:opacity .6s;pointer-events:none}
.s-load.done{opacity:0}
.s-top{position:absolute;left:1.1rem;top:1rem;right:1.1rem;z-index:2;display:flex;justify-content:space-between;gap:1rem;font-size:13.5px;color:var(--mute);pointer-events:none}
.s-top b{color:var(--ink);font-weight:500}
.s-bot{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.6rem}

/* scan to asset, scroll version */
.scan-track{height:400vh;position:relative}
.scan-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(ellipse 60% 55% at 62% 52%,var(--bg2),var(--bg) 100%)}
.scan-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.steps{position:absolute;left:var(--gut);top:50%;translate:0 -50%;z-index:2;list-style:none;margin:0;padding:0;width:min(20rem,30vw);display:flex;flex-direction:column;gap:1.3rem}
.steps li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:0 .4rem;opacity:.32;transition:opacity .5s var(--ease)}
.steps li.on{opacity:1}
.steps li i{grid-row:span 2;font:400 15px/1.5 var(--font);font-style:normal;color:var(--mute);font-variant-numeric:tabular-nums}
.steps li.on i{color:var(--pc)}
.steps b{font:400 clamp(1.5rem,2.3vw,2.2rem)/1.15 var(--disp);letter-spacing:-.03em}
.steps span{color:var(--mute);font-size:15px;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .6s var(--ease),margin .6s var(--ease)}
.steps li.on span{max-height:6em;opacity:1;margin-top:.35rem}
.scan-bar{position:absolute;left:var(--gut);right:var(--gut);bottom:1.6rem;height:2px;background:var(--line);z-index:2}
.scan-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);background:var(--pc)}
.scan-hint{position:absolute;right:var(--gut);bottom:2.6rem;z-index:2;margin:0;font-size:13.5px;color:var(--mute);transition:opacity .4s}
/* scan to asset, play version: a normal block with a play button and a scrubber */
.scan-track.play{height:auto}
.scan-track.play .scan-stage{position:relative;height:auto;aspect-ratio:16/8.4;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.scan-track.play .steps{left:clamp(1.2rem,3vw,2.6rem)}
.scan-track.play .scan-bar{display:none}
.scan-ctl{position:absolute;left:clamp(1.2rem,3vw,2.6rem);right:clamp(1.2rem,3vw,2.6rem);bottom:1.2rem;z-index:2;display:flex;align-items:center;gap:1rem}
.scan-play{all:unset;cursor:pointer;flex:none;padding:.5rem .95rem;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:500;min-width:4.6rem;text-align:center}
.scan-play:focus-visible{outline:2px solid var(--pc);outline-offset:3px}
.scan-scrub{flex:1;accent-color:var(--pc);margin:0}

/* material sphere */
.studio{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(19rem,1fr);gap:1rem;align-items:stretch}
.st-view{min-height:560px;background:radial-gradient(ellipse 65% 55% at 50% 45%,color-mix(in srgb,var(--bg2),var(--ink) 4%),var(--bg) 100%)}
.st-view canvas{cursor:grab;touch-action:pan-y}
.st-view.over canvas{cursor:copy}
.st-view::after{content:"";position:absolute;left:30%;right:30%;top:83%;height:7%;border-radius:50%;background:radial-gradient(closest-side,var(--shadow),transparent);pointer-events:none;transition:opacity .4s}
.st-view.flat::after{opacity:0}
.drop-hint{position:absolute;left:50%;top:1rem;translate:-50% 0;z-index:2;padding:.35rem .8rem;border-radius:999px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;opacity:0;transition:opacity .2s;pointer-events:none}
.over .drop-hint{opacity:1}
.st-panel{background:var(--bg2);border-radius:12px;padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;gap:1.5rem}
.st-grp h4{margin:0 0 .75rem;font:500 14px/1.3 var(--font);color:var(--ink);display:flex;justify-content:space-between;gap:1rem}
.st-grp h4 span{color:var(--mute);font-weight:400;text-align:right}
.st-grp.off .rng,.st-grp.off .st-btn{opacity:.4}
.st-mats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.stm{all:unset;cursor:grab;aspect-ratio:1;border-radius:50%;touch-action:none;user-select:none;-webkit-user-select:none;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.42),rgba(255,255,255,0) 32%),radial-gradient(circle at 34% 30%,transparent 30%,rgba(0,0,0,.55) 92%),var(--img) center/180% auto;transition:transform .2s var(--ease)}
.stm:hover{transform:scale(1.08)}
.stm.on{box-shadow:0 0 0 2px var(--bg2),0 0 0 3.5px var(--ink)}
.stm:focus-visible{outline:2px solid var(--pc);outline-offset:3px}
.st-tip{font-size:12.5px;color:var(--mute);margin:.7rem 0 0;min-height:1.3em}
.rng{display:grid;grid-template-columns:5.4rem minmax(0,1fr);align-items:center;gap:.15rem .8rem;font-size:13.5px;color:var(--mute);margin-top:.45rem}
.rng input{width:100%;margin:0;accent-color:var(--pc)}
.rng i{grid-column:2;font-style:normal;font-size:11.5px;display:flex;justify-content:space-between;opacity:.75}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.8rem;font-size:13.5px;color:var(--mute)}
.st-panel .seg{background:var(--bg)}
.st-panel .seg button{padding:.38rem .62rem;font-size:13px}
.st-btn{all:unset;cursor:pointer;margin-top:.9rem;padding:.42rem .8rem;border-radius:7px;font-size:13px;background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.st-btn:disabled{cursor:default}
.ghost{position:fixed;left:0;top:0;z-index:70;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;box-shadow:0 18px 40px rgba(0,0,0,.55);transition:scale .25s var(--ease),opacity .25s;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.42),rgba(255,255,255,0) 32%),radial-gradient(circle at 34% 30%,transparent 30%,rgba(0,0,0,.55) 92%),var(--img) center/180% auto}
.ghost.land{scale:.15;opacity:0}

/* Carbon warp */
.warp{position:relative;overflow:hidden;height:clamp(520px,88vh,860px);background:#020308;color:#fff;cursor:pointer;isolation:isolate}
.warp canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.warp::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 62% 58% at 12% 92%,rgba(2,3,8,.85),rgba(2,3,8,0) 70%)}
.warp.no-gl{background:radial-gradient(ellipse at 70% 30%,color-mix(in srgb,var(--c3) 30%,#020308),#020308 70%)}
.warp-copy{position:absolute;left:var(--gut);bottom:clamp(1.5rem,6vh,3.5rem);z-index:2;max-width:min(38rem,calc(100% - 2 * var(--gut)));pointer-events:none;transition:opacity .5s}
.warp.go .warp-copy{opacity:.15}
.warp-copy .top-line{color:rgba(255,255,255,.7)}
.warp-copy .top-line b{color:#fff}
.warp-copy h3{font:400 clamp(2.3rem,4.6vw,4.8rem)/1 var(--disp);letter-spacing:-.04em;margin:0 0 1rem}
.warp-copy h3 span{color:var(--w6)}
.warp-copy p{margin:0;color:rgba(255,255,255,.8);font-size:16px}
.warp-copy .facts{color:rgba(255,255,255,.7)}
.warp-copy .facts b{color:#fff}
.warp-btn{all:unset;position:absolute;right:var(--gut);bottom:clamp(1.5rem,6vh,3.5rem);z-index:2;cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:.75rem 1.1rem;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);font-size:14.5px;font-weight:500;color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.warp-btn:hover{background:rgba(255,255,255,.18)}
.warp-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* render reel */
.reel{height:clamp(380px,64vh,640px);background:var(--bg)}
.reel canvas{cursor:grab;touch-action:pan-y}
.reel.drag canvas{cursor:grabbing}
.reel-cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-top:1rem;font-size:14.5px;color:var(--mute)}
.reel-cap b{color:var(--ink);font:400 clamp(1.4rem,2.2vw,2rem)/1.1 var(--disp);letter-spacing:-.03em;margin-right:.7rem}
.reel-chaps{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.reel-chaps button{all:unset;cursor:pointer;padding:.42rem .75rem;border-radius:999px;font-size:13.5px;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line);transition:color .2s,background-color .2s}
.reel-chaps button span{opacity:.6;margin-left:.2rem;font-variant-numeric:tabular-nums}
.reel-chaps button:hover{color:var(--ink)}
.reel-chaps button.on{background:var(--ink);color:var(--bg);box-shadow:none}
.reel-chaps button:focus-visible{outline:2px solid var(--pc);outline-offset:2px}

/* a light strip of renders: plain images that drift past, no 3D */
.strip{--h:clamp(170px,24vw,300px);overflow:hidden;margin-inline:calc(var(--gut) * -1);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip-row{display:flex;gap:.7rem;width:max-content;animation:slide 140s linear infinite}
.strip:hover .strip-row,.strip:focus-within .strip-row{animation-play-state:paused}
.strip button{all:unset;cursor:zoom-in;flex:none;height:var(--h);aspect-ratio:var(--a);border-radius:8px;overflow:hidden;background:var(--bg2);position:relative}
.strip button img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.strip button:hover img{transform:scale(1.04)}
.strip button:focus-visible{outline:2px solid var(--pc);outline-offset:-2px}
@keyframes slide{to{transform:translateX(-50%)}}
.strip-cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:14.5px;color:var(--mute)}

/* collections: hover a name to see it */
.coll{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.coll-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.coll-list button{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:grid;grid-template-columns:1.8rem minmax(0,1fr) auto;gap:.6rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--mute);font-size:15.5px;transition:color .25s,padding .35s var(--ease)}
.coll-list button i{font-style:normal;font-size:12.5px;font-variant-numeric:tabular-nums;opacity:.7}
.coll-list button em{font-style:normal;font-size:12.5px;opacity:.7}
.coll-list button:hover,.coll-list button.on{color:var(--ink)}
.coll-list button.on{padding-left:.5rem}
.coll-list button.on i{color:var(--pc);opacity:1}
.coll-list button:focus-visible{outline:2px solid var(--pc);outline-offset:2px}
.coll-view{position:sticky;top:1.5rem;margin:0}
.coll-view .frame{position:relative;aspect-ratio:16/9.4;border-radius:10px;overflow:hidden;background:var(--bg2)}
.coll-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease),scale 1.2s var(--ease);scale:1.03}
.coll-view img.on{opacity:1;scale:1}
.coll-view figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;font-size:14.5px;color:var(--mute)}
.coll-view figcaption b{color:var(--ink);font:400 clamp(1.3rem,2vw,1.8rem)/1.1 var(--disp);letter-spacing:-.03em}

/* 3D on request: a still from my own renders until you ask for the live version */
.gate{position:relative}
.poster{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:clamp(1rem,2.5vw,2rem);border-radius:inherit;overflow:hidden;background:var(--bg2);transition:opacity .6s var(--ease)}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0) 46%)}
.poster > :not(img){position:relative;z-index:2}
.poster p{margin:0;color:rgba(255,255,255,.82);font-size:14px;max-width:26rem}
.poster p b{display:block;color:#fff;font:400 clamp(1.4rem,2.3vw,2rem)/1.1 var(--disp);letter-spacing:-.03em;margin-bottom:.35rem}
.poster button{all:unset;cursor:pointer;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;padding:.8rem 1.2rem;border-radius:12px;background:#fff;color:#000;font-weight:600;font-size:15px;transition:transform .3s var(--ease)}
.poster button span{font-weight:400;font-size:12.5px;opacity:.65}
.poster button:hover{transform:translateY(-2px)}
.poster button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gate.live .poster{opacity:0;pointer-events:none}

/* project cards, for the short home page */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,6vh,4rem) clamp(1rem,2.4vw,2rem)}
.card{position:relative;min-width:0}
.card.wide{grid-column:1 / -1}
.card h3{font:400 clamp(1.9rem,3.2vw,3.2rem)/1 var(--disp);letter-spacing:-.035em;margin:0 0 .9rem}
.card h3 span{color:var(--ptc,var(--pc))}
.card .lede2{margin:0;max-width:38rem;font-size:clamp(1rem,1.1vw,1.1rem)}
.card .media{margin:0 0 1.4rem;border-radius:10px;overflow:hidden;background:var(--bg2);position:relative}
.card .media img{width:100%;height:auto}
.card .media.cut img{aspect-ratio:16/9.5;object-fit:cover;object-position:top}
.card.wide .strip{margin-inline:0;-webkit-mask:none;mask:none}
.card .warp{height:clamp(420px,62vh,600px);border-radius:12px}
.card-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 3rem;align-items:end}

/* numbers, experience, writing, contact */
.nums{background:var(--num-bg);color:var(--num-ink);padding:clamp(5rem,13vh,9rem) var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3rem 2rem}
.nums b{display:block;font:300 clamp(3.2rem,6.1vw,7rem)/.9 var(--disp);letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.nums div:nth-child(1) b{color:var(--n1)}.nums div:nth-child(2) b{color:var(--n2)}.nums div:nth-child(3) b{color:var(--n3)}.nums div:nth-child(4) b{color:var(--n4)}
.nums span{display:block;margin-top:1.1rem;max-width:15rem;font-size:15px;line-height:1.45;opacity:.72}
.xp-list{border-top:1px solid var(--line)}
.xrow{display:grid;grid-template-columns:9.5rem minmax(0,1fr) minmax(0,1fr);gap:1rem 3rem;padding:2rem 0 2rem 1.5rem;border-bottom:1px solid var(--line);position:relative}
.xrow::before{content:"";position:absolute;left:0;top:2.1rem;bottom:2.1rem;width:2px;background:var(--pc)}
.xrow .yr{color:var(--mute);font-size:15px;font-variant-numeric:tabular-nums;padding-top:.25rem}
.xrow h3{font:500 clamp(1.25rem,1.7vw,1.5rem)/1.2 var(--disp);letter-spacing:-.02em;margin:0}
.xrow h3 span{color:var(--mute);font-weight:400}
.xrow .role{margin:.4rem 0 0;color:var(--mute);font-size:15px}
.xrow .sum{margin:0;font-size:15.5px}
.wr{border-top:1px solid var(--line)}
.wr-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr) auto;gap:1rem 3rem;align-items:baseline;padding:1.9rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.wr-row .co{font-size:15px;color:var(--pc);font-weight:500}
.wr-row h3{font:400 clamp(1.5rem,2.4vw,2.2rem)/1.1 var(--disp);letter-spacing:-.03em;margin:0}
.wr-row p{margin:.45rem 0 0;color:var(--mute);font-size:15.5px}
.wr-row .go{font-size:15px;color:var(--mute)}
a.wr-row .go{color:var(--ink)}
a.wr-row h3{transition:color .3s}
a.wr-row:hover h3{color:var(--pc)}
.contact{background:var(--ct-bg);color:var(--ct-ink);padding:clamp(6rem,17vh,11rem) var(--gut) clamp(4rem,10vh,6rem)}
.contact h2{font:400 clamp(4rem,12vw,13rem)/.86 var(--disp);letter-spacing:-.06em;margin:0 0 clamp(2.5rem,7vh,4.5rem)}
.c-mail{display:inline-block;font:400 clamp(1.6rem,3.8vw,3.4rem)/1.1 var(--disp);letter-spacing:-.03em;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.15rem}
.c-links{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;margin-top:2.4rem;font-size:16px}
.c-links a{color:var(--ct-mute);text-decoration:none}
.c-links a:hover{color:var(--ct-ink)}
.bar{display:grid;grid-template-columns:repeat(12,1fr);height:6px}
.bar i:nth-child(1){background:var(--o1)}.bar i:nth-child(2){background:var(--o2)}.bar i:nth-child(3){background:var(--o3)}.bar i:nth-child(4){background:var(--o4)}.bar i:nth-child(5){background:var(--o5)}.bar i:nth-child(6){background:var(--o6)}.bar i:nth-child(7){background:var(--o7)}.bar i:nth-child(8){background:var(--o8)}.bar i:nth-child(9){background:var(--o9)}.bar i:nth-child(10){background:var(--o10)}.bar i:nth-child(11){background:var(--o11)}.bar i:nth-child(12){background:var(--o12)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding:1.5rem var(--gut) 2rem;font-size:13.5px;color:var(--mute)}
body:has(.lab:not([hidden])) .foot{padding-bottom:6.5rem}
.next{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;padding:clamp(4rem,12vh,7rem) var(--gut);border-top:1px solid var(--line)}
.next a{font:400 clamp(2rem,4vw,3.8rem)/1 var(--disp);letter-spacing:-.04em;text-decoration:none}
.next a:hover{color:var(--c1)}
.next span{color:var(--mute);font-size:15px}

/* lightbox */
.lb{border:0;padding:0;background:transparent;max-width:94vw;max-height:94vh;overflow:visible}
.lb::backdrop{background:rgba(0,0,0,.88)}
.lb img{max-width:94vw;max-height:86vh;border-radius:8px;cursor:zoom-out}
.lb p{color:#ddd;text-align:center;font:14px var(--font);margin:.9rem 0 0}

/* reveal */
.js .rv{opacity:0;translate:0 22px;transition:opacity 1s var(--ease),translate 1s var(--ease)}
.js .rv.in{opacity:1;translate:0 0}

/* the choosing tool at the bottom, not part of the site */
.lab{position:fixed;left:50%;bottom:14px;translate:-50% 0;z-index:60;width:max-content;max-width:calc(100vw - 24px);background:#121214;color:#f1f1f2;border:1px solid rgba(255,255,255,.13);border-radius:12px;font:500 13px/1.35 'Inter',system-ui,sans-serif;box-shadow:0 18px 50px rgba(0,0,0,.5);color-scheme:dark}
.lab button,.lab a{font:inherit;color:inherit}
.dock{display:flex;align-items:center;gap:.3rem;padding:.4rem;overflow-x:auto;scrollbar-width:none}
.dock-l{padding:0 .55rem 0 .45rem;color:#8d8d93;white-space:nowrap}
.pre{all:unset;cursor:pointer;flex:none;display:flex;align-items:center;gap:.5rem;padding:.42rem .65rem .42rem .45rem;border-radius:8px;white-space:nowrap}
.pre:hover{background:#1e1e22}
.pre.on{background:#2a2a2f}
.pre .sw{display:flex;width:34px;height:16px;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pre .sw i{flex:1}
.pre .sw i:first-child{flex:1.8}
.dock-sep{width:1px;align-self:stretch;margin:.25rem .2rem;background:rgba(255,255,255,.12);flex:none}
.dbtn{all:unset;cursor:pointer;flex:none;padding:.42rem .7rem;border-radius:8px;white-space:nowrap;color:#d6d6da;text-decoration:none}
.dbtn:hover{background:#1e1e22}
.dbtn.on{background:#2a2a2f;color:#fff}
.lab.min .dock > :not(.keep){display:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

@media (max-width:1000px){
  .sec-head,.sub-head,.chapter{grid-template-columns:1fr}
  .hero-foot{grid-template-columns:1fr}
  .surf-ctl{align-items:flex-start;text-align:left}
  .steps{width:auto;right:var(--gut);top:auto;bottom:4.2rem;translate:none;gap:.5rem}
  .steps li:not(.on){display:none}
  .scan-stage{background:radial-gradient(ellipse 80% 50% at 50% 38%,var(--bg2),var(--bg) 100%)}
  .scan-track.play .scan-stage{aspect-ratio:4/5}
  .scan-track.play .steps{bottom:4.6rem;right:clamp(1.2rem,3vw,2.6rem)}
  .studio{grid-template-columns:1fr}
  .st-view{min-height:0;aspect-ratio:1}
  .coll{grid-template-columns:1fr}
  .coll-view{position:relative;top:0;order:-1}
  .cards{grid-template-columns:1fr}
  .card-row{grid-template-columns:1fr}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xrow,.wr-row{grid-template-columns:1fr;gap:.5rem}
  .xrow .sum{margin-top:.6rem}
  .wr-row .go{margin-top:.4rem}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav nav a:not(.keep){display:none}
  .hero{min-height:0;padding-bottom:3rem}
  .sec{padding-top:4rem;padding-bottom:4rem}
  .lab{left:10px;right:10px;bottom:10px;translate:none;width:auto}
  .dock-l{display:none}
  #presets{flex:1 1 auto;min-width:0}
  .st-mats{gap:.4rem}
  .st-view .seg button{padding:.36rem .5rem;font-size:12.5px}
  .reel{height:340px}
  .warp-btn{top:1rem;bottom:auto}
  .poster{flex-direction:column;align-items:flex-start;justify-content:flex-end}
  .poster button{align-items:flex-start}
  .coll-list button{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .surf .tx{animation:none}
  .strip{overflow-x:auto}
  .strip-row{animation:none}
  .js .rv{opacity:1;translate:none;transition:none}
}
.gate:not(.live) ~ .reel-cap,.gate:not(.live) ~ .reel-chaps{display:none}
.gate:not(.live) .gate-on{display:none}
.gate.live .gate-off:not(.poster){display:none}
.strip-cap .gate-go{all:unset;cursor:pointer;font-weight:500;color:var(--ink);border-bottom:2px solid var(--pc);padding-bottom:.15rem}
.strip-cap .gate-go:hover{color:var(--pc)}
.strip-cap .gate-go:focus-visible{outline:2px solid var(--pc);outline-offset:3px}