.proj{min-height:100vh;position:relative}.proj__bar{z-index:100;padding:1.1rem var(--gutter);mix-blend-mode:difference;color:var(--on-blend);transition:transform var(--duration-scene) var(--ease-out);justify-content:space-between;align-items:baseline;gap:1rem;display:flex;position:fixed;inset:0 0 auto}.proj__bar.is-hidden:not(:focus-within){transform:translateY(-120%)}.proj__bar .theme-toggle{margin-left:auto}.proj__bar .sound-toggle{margin-left:-.4rem}.proj__back,.proj__brand{align-items:center;margin:-.9rem -1.25rem -.9rem 0;padding:.9rem 1.25rem .9rem 0;display:inline-flex;position:relative}.proj__back{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase}.proj__back .arrow{transition:transform var(--duration-card) var(--ease-out);display:inline-block}.proj__back:hover .arrow{transform:translate(-.35em)}.proj__brand{font-family:var(--serif);font-variation-settings:"opsz" 30;font-weight:480;font-size:var(--fs-brand);letter-spacing:-.01em;white-space:nowrap}.proj__brand sup{font-size:.6em}@media (width<=420px){.proj__bar{gap:.45rem}.proj__back{font-size:var(--fs-meta)}}.proj__hero{padding:clamp(7rem, 18vh, 12rem) var(--gutter) clamp(2.5rem, 7vh, 5rem)}.proj__index{color:var(--ink-3);margin-bottom:clamp(1.4rem,4vh,2.6rem)}.proj__title{font-family:var(--serif);font-variation-settings:"opsz" 144;font-weight:340;font-size:var(--fs-title);letter-spacing:-.045em;text-wrap:balance;margin:0;line-height:.84}@media (width<=760px){.proj__title{font-size:12vw}}.proj__title .accent{font-style:normal}.proj__title em{font-style:italic;font-weight:300}.proj__tagline{max-width:22ch;font-family:var(--serif);font-variation-settings:"opsz" 40;font-style:italic;font-weight:360;font-size:var(--fs-h3);letter-spacing:-.02em;color:var(--ink);text-wrap:pretty;margin-top:clamp(1.6rem,4vh,2.8rem);line-height:1.16}.proj__meta{border-top:1px solid var(--line);grid-template-columns:repeat(4,1fr);gap:1.4rem clamp(1.2rem,3vw,2.5rem);margin-top:clamp(2.6rem,7vh,4.5rem);padding-top:1.5rem;display:grid}.proj__meta .k{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem;display:block}.proj__meta .v{color:var(--ink);font-size:var(--fs-lead)}@media (width<=680px){.proj__meta{grid-template-columns:repeat(2,1fr)}}.proj__notes{padding:clamp(3rem, 9vh, 6rem) var(--gutter) 0;gap:clamp(2.2rem,6vh,3.5rem);display:grid}.note{border-top:1px solid var(--line);grid-template-columns:minmax(9rem,1fr) minmax(0,2.4fr);gap:.9rem clamp(1.2rem,3vw,2.5rem);padding-top:1.5rem;display:grid}.note__k{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}.note__body{max-width:62ch;color:var(--ink-2);font-size:var(--fs-lead);text-wrap:pretty;line-height:1.55}.note__body p+p,.note__body p+ul,.note__body ul+p{margin-top:1em}.note__body ul{gap:.5em;padding-left:1.1em;display:grid}.note__body strong{color:var(--ink);font-weight:500}@media (width<=680px){.note{grid-template-columns:1fr}}.proj__gallery{padding-top:clamp(2rem,6vh,5rem)}.shot{margin:clamp(1.5rem,5vh,5rem) auto 0;position:relative;overflow:clip}.shot__media{aspect-ratio:16/10;background:var(--bg-2);content-visibility:auto;width:100%;position:relative;overflow:clip}.shot__ph{background:linear-gradient(135deg, var(--bg), var(--bg-2) 55%, color-mix(in oklab, var(--bg-2) 94%, var(--accent)));place-items:center;display:grid;position:absolute;inset:0}.shot__ph:after{content:attr(data-n);font-family:var(--serif);font-variation-settings:"opsz" 144;font-weight:300;font-size:var(--fs-display);letter-spacing:-.04em;color:color-mix(in oklab, var(--ink) 5%, transparent)}.shot__img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity var(--duration-cinema) var(--ease-out);position:absolute;inset:0;transform:scale(1.12)}.shot.is-loaded .shot__img{opacity:1}.shot[data-block] .shot__ph{transition:opacity var(--duration-layout) ease}.shot[data-block].is-loaded .shot__ph{opacity:0}.shot__cap{padding:0 var(--gutter);color:var(--ink-3);justify-content:space-between;gap:1rem;margin-top:.8rem;display:flex}.shot--full{width:100%}.shot--full .shot__media{aspect-ratio:16/9}.shot--wide{width:min(1400px,92vw)}.shot--inset{width:min(880px,76vw)}.shot--inset .shot__media{aspect-ratio:4/3}.shot--left{width:min(1080px,80vw);margin-left:var(--gutter)}.shot--right{width:min(1080px,80vw);margin-right:var(--gutter);margin-left:auto}.shot-pair{grid-template-columns:1fr 1fr;gap:clamp(.5rem,1.5vw,1.2rem);width:min(1500px,94vw);margin:clamp(1.5rem,5vh,5rem) auto 0;display:grid}.shot-pair .shot{width:100%;margin:0}.shot-pair .shot__media{aspect-ratio:4/5}@media (width<=720px){.shot-pair{grid-template-columns:1fr}.shot--wide,.shot--inset,.shot--left,.shot--right{width:100%;margin-left:0;margin-right:0}}.live{padding:clamp(3rem, 10vh, 7rem) var(--gutter) 0;overflow-anchor:none;grid-template-columns:minmax(16rem,1fr) minmax(0,2.4fr);align-items:center;gap:clamp(2rem,4vw,4rem);display:grid}.live__step{border-bottom:1px solid var(--line);gap:.5rem;padding:1.1rem 0;display:grid;position:relative}.live__title{color:var(--ink-3);transition:color var(--duration-hover) var(--ease-out)}.live__step.is-active .live__title,.live__step:hover .live__title{color:var(--ink)}.live__num{color:var(--accent)}.live__title{font-family:var(--serif);font-weight:350;font-size:var(--fs-h4);letter-spacing:-.02em;line-height:1.1}.live__pick{width:calc(100% + 1rem);font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;margin:-.5rem;padding:.5rem;display:block}.live__pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.live__bar{height:1px;display:none;position:absolute;inset:auto 0 -1px;overflow:hidden}.live__bar>span{background:var(--accent);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.live__step.is-active .live__bar{display:block}.live__body{color:var(--ink-2);max-width:34ch;display:none}.live__step.is-active .live__body{animation:live-body var(--duration-layout) var(--ease-out);display:block}@keyframes live-body{0%{opacity:0;transform:translateY(6px)}}.live__frame{aspect-ratio:1440/900;background:var(--bg-2);box-shadow:0 0 0 1px var(--line), 0 30px 60px -30px #00000073;overflow:hidden}.live__frame iframe{pointer-events:none;border:0;width:100%;height:100%;display:block}.live[data-device=phone] .live__frame{aspect-ratio:390/844;height:min(72vh,44rem);margin-inline:auto}.live__device{--chrome:#ebebed;--chrome-line:#d2d2d6;--chrome-field:#fff;--chrome-ink:#3c3c43;position:relative}:root[data-theme=dark] .live__device{--chrome:#2c2c2e;--chrome-line:#1c1c1e;--chrome-field:#3a3a3c;--chrome-ink:#d1d1d6}.live__device--browser{background:var(--chrome);border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px #00000024,0 12px 24px -12px #00000040,0 40px 80px -40px #00000080}.live__device--browser .live__frame{box-shadow:none}.live__chrome{border-bottom:1px solid var(--chrome-line);height:clamp(1.75rem,2.6vw,2.5rem);color:var(--chrome-ink);grid-template-columns:1fr minmax(0,2fr) 1fr;align-items:center;padding:0 clamp(.6rem,1vw,.9rem);font:500 clamp(.625rem,.85vw,.75rem)/1 -apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:grid}.live__lights{gap:clamp(5px,.55vw,8px);display:flex}.live__lights i{aspect-ratio:1;background:#ff5f57;border-radius:50%;width:clamp(8px,.85vw,12px);box-shadow:inset 0 0 0 .5px #0000002e}.live__lights i:nth-child(2){background:#febc2e}.live__lights i:nth-child(3){background:#28c840}.live__address{background:var(--chrome-field);white-space:nowrap;text-overflow:ellipsis;border-radius:6px;justify-content:center;align-items:center;gap:.4em;min-width:0;height:70%;display:flex;overflow:hidden;box-shadow:0 0 0 .5px #00000014}.live__address svg{fill:none;stroke:currentColor;stroke-width:1.3px;opacity:.6;flex:none;width:.9em}.live__device--phone{background:linear-gradient(145deg,#4a4a4e,#1d1d1f 35%,#2c2c2e 70%,#48484c);border-radius:15%/7%;width:fit-content;margin-inline:auto;padding:clamp(6px,1.3vh,12px);box-shadow:inset 0 0 0 1.5px #ffffff1f,inset 0 0 0 4px #0b0b0c,0 0 0 1px #00000059,0 40px 80px -40px #0009}.live__device--phone .live__frame{box-shadow:none;background:#000;border-radius:13%/6%}.live__hardware{pointer-events:none;position:absolute;inset:0}.live__island{z-index:1;aspect-ratio:126/37;background:#000;border-radius:999px;width:30.5%;position:absolute;top:2.6%;left:50%;transform:translate(-50%)}.live__btn{background:linear-gradient(90deg,#2a2a2d,#4a4a4e);width:3px;position:absolute}.live__btn--action,.live__btn--up,.live__btn--down{border-radius:2px 0 0 2px;left:-3px}.live__btn--action{height:3.6%;top:17%}.live__btn--up{height:7%;top:24%}.live__btn--down{height:7%;top:33%}.live__btn--side{background:linear-gradient(270deg,#2a2a2d,#4a4a4e);border-radius:0 2px 2px 0;height:10.5%;top:26%;right:-3px}@media (width<=900px){.live{grid-template-columns:1fr}.live__screen{--live-top:calc(4.5rem + env(safe-area-inset-top));top:var(--live-top);z-index:2;background:var(--bg);box-shadow:0 calc(-1 * var(--live-top)) 0 var(--bg);order:-1;align-self:start;padding-bottom:1rem;position:sticky}.live[data-device=phone] .live__frame{height:min(60vh,34rem)}}@media (prefers-reduced-motion:reduce){.live__step.is-active .live__bar{display:none}}.stills{padding:clamp(3rem, 10vh, 7rem) var(--gutter) 0;gap:clamp(5rem,14vh,9rem);display:grid}.still{border-top:1px solid var(--line);grid-template-columns:minmax(16rem,1fr) minmax(0,2.4fr);align-items:start;gap:clamp(2rem,4vw,4rem);padding-top:1.5rem;display:grid}.still__text{top:calc(5.5rem + env(safe-area-inset-top));gap:.75rem;display:grid;position:sticky}.still__num{color:var(--accent)}.still__title{font-family:var(--serif);font-weight:350;font-size:var(--fs-h3);letter-spacing:-.02em;text-wrap:balance;line-height:1.1}.still__body{max-width:34ch;color:var(--ink-2);text-wrap:pretty;line-height:1.55}.still__note{border-top:1px solid var(--line);max-width:34ch;color:var(--ink-2);text-wrap:pretty;gap:.4rem;margin-top:.5rem;padding-top:.75rem;font-size:.875rem;line-height:1.5;display:grid}.still__note-k{color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem}.still__shots{gap:clamp(1.5rem,3vw,2.5rem);display:grid}.still__fig{align-content:start;gap:.9rem;margin:0;display:grid}.still__cap{max-width:52ch;color:var(--ink-2);text-wrap:pretty;font-size:.875rem;line-height:1.45}.still__img{background:var(--bg-2);width:100%;height:auto;display:block}.stills[data-device=phone] .still__shots{grid-template-columns:repeat(auto-fit,minmax(9.5rem,16rem));gap:clamp(1rem,2vw,1.75rem)}.still__shot.live__device--phone{width:100%}.live__device--phone .still__img{background:#000;border-radius:13%/6%}@media (width<=900px){.still{grid-template-columns:1fr}.still__text{position:static}.still__body,.still__note{max-width:58ch}}.system{margin:clamp(5rem, 14vh, 9rem) var(--gutter) 0;border-top:1px solid var(--line);grid-template-columns:minmax(16rem,1fr) minmax(0,2.4fr);align-items:start;gap:clamp(2rem,4vw,4rem);padding-top:1.5rem;display:grid}.system__head{gap:.75rem;display:grid}.system__k{color:var(--accent)}.system__title{font-family:var(--serif);font-weight:350;font-size:var(--fs-h3);letter-spacing:-.02em;text-wrap:balance;line-height:1.1}.system__summary{max-width:34ch;color:var(--ink-2);text-wrap:pretty;line-height:1.55}.system__body{background:var(--line);box-shadow:0 0 0 1px var(--line);grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1px;display:grid}.system__block{background:var(--bg);align-content:start;gap:1rem;padding:clamp(1.25rem,2.4vw,2rem);display:grid}.system__wide{grid-column:1/-1}.system__label,.system__meta{color:var(--ink-3);font-size:.75rem}.system__aa{font-family:var(--specimen);letter-spacing:-.03em;font-size:clamp(5rem,11vw,9rem);font-weight:500;line-height:1}.system__family{font-family:var(--specimen);font-size:1.25rem;font-weight:500}.system__scale{gap:.9rem;display:grid}.system__step{border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.9rem;display:flex}.system__step:last-child{border-bottom:0;padding-bottom:0}.system__sample{font-family:var(--specimen);text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.system__meta{font-variant-numeric:tabular-nums;flex:none}.system__colors{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:1.5rem 1rem;display:grid}.system__color{align-content:start;gap:.2rem;display:grid}.system__chip{aspect-ratio:16/10;margin-bottom:.5rem;box-shadow:inset 0 0 0 1px #00000014}.system__cname{font-weight:500}.system__role{color:var(--ink-2);font-size:.875rem;line-height:1.45}.system__icons{border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));display:grid}.system__icons li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);justify-items:center;gap:.6rem;padding:1.25rem .5rem .9rem;display:grid}.system__icons svg{fill:none;width:1.75rem;height:1.75rem;stroke:var(--ink);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.system__components{grid-column:1/-1;gap:1rem;margin:0;display:grid}.system__live{background:var(--bg-2);width:100%;box-shadow:0 0 0 1px var(--line), 0 30px 60px -30px #00000059;position:relative;overflow:hidden}.system__fit{width:1440px;transform:scale(var(--board-scale,1));transform-origin:0 0}.system__fit iframe{border:0;width:1440px;display:block}.system__icons svg.is-filled{fill:var(--ink);stroke:none}.system__icons .system__meta{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.6875rem;overflow:hidden}@media (width<=900px){.system{grid-template-columns:1fr}.system__summary{max-width:58ch}}@media (width<=680px){.system__body{grid-template-columns:1fr}.system__colors{grid-template-columns:repeat(2,minmax(0,1fr))}}.proj__next{border-top:1px solid var(--line);padding:clamp(3rem, 8vh, 6rem) var(--gutter) clamp(1.5rem, 4vh, 2.5rem);margin-top:clamp(5rem,14vh,10rem)}.proj__next .k{color:var(--ink-3);margin-bottom:1.1rem}.proj__next a{max-width:100%;font-family:var(--serif);font-variation-settings:"opsz" 120;font-weight:350;font-size:var(--fs-display);letter-spacing:-.04em;flex-wrap:wrap;align-items:baseline;gap:.6em;line-height:.9;display:inline-flex}.proj__next a .arrow{color:var(--accent);transition:transform var(--duration-layout) var(--ease-out)}.proj__next a:hover .arrow{transform:translate(.3em)}.proj__foot{padding:0 var(--gutter) clamp(2.5rem, 6vh, 4rem);color:var(--ink-3);justify-content:space-between;gap:1rem;display:flex}.proj__end{z-index:100;position:relative}.proj__fill{background:var(--accent);color:var(--bg);clip-path:inset(0 calc(100% - var(--fill,0) * 100%) 0 0);pointer-events:none;position:absolute;inset:0}.proj__fill .proj__next{border-top-color:#0000;margin-top:0}.proj__fill .k,.proj__fill .proj__foot,.proj__fill a .arrow{color:inherit}@media (prefers-reduced-motion:reduce){.shot__img{opacity:1;transform:none}}.proj__play{margin-top:clamp(1.5rem,3vh,2.25rem)}.proj__play:hover .arrow{transform:translate(.15em,-.15em)}.proj__hero{isolation:isolate;position:relative}.proj__hero>.hero__gl{z-index:-1;animation:proj-smoke-in var(--duration-scene) var(--ease-out) both}.proj__hero:after{content:"";z-index:-1;pointer-events:none;background:linear-gradient(to bottom, transparent, var(--bg));height:60%;position:absolute;inset:auto 0 0}@keyframes proj-smoke-in{0%{opacity:0}}.proj__summary{max-width:44ch;color:var(--ink-2);font-size:var(--fs-lead);text-wrap:pretty;margin-top:clamp(1.4rem,3vh,2.2rem);line-height:1.55}.proj__summary strong{color:var(--ink);font-weight:500}.scenes{padding:clamp(2rem, 6vh, 5rem) var(--gutter) 0 0;grid-template-columns:minmax(0,1fr) minmax(16rem,24rem);column-gap:clamp(2rem,5vw,6rem);display:grid;position:relative}.scenes--phone{padding-left:var(--gutter);grid-template-columns:minmax(0,1fr) minmax(16rem,26rem)}.scenes__media{min-width:0}.scene{align-items:center;min-height:100svh;padding:clamp(2rem,8vh,6rem) 0;display:flex;position:relative;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 clamp(3rem,9vw,9rem));mask-image:linear-gradient(90deg,#0000 0,#000 clamp(3rem,9vw,9rem))}.scenes--phone .scene{justify-content:center;-webkit-mask-image:none;mask-image:none}.scene__glow{filter:blur(48px);opacity:0;transition:opacity var(--duration-cinema) var(--ease-out);pointer-events:none;background:radial-gradient(55% 50% at 45% 55%,#ff4d0057,#0000 70%),radial-gradient(40% 40% at 70% 30%,#e9e2d41a,#0000 70%);position:absolute;inset:10% -10% 10% -20%}.scene.is-on .scene__glow{opacity:1}.device{background:var(--bg-2);transform-style:preserve-3d;will-change:transform;position:relative;overflow:clip}.device--desktop{aspect-ratio:16/10;width:min(1180px,74vw);margin-left:calc(var(--gutter) * -.5);border:1px solid #e9e2d42e;border-radius:0;transform:perspective(2200px)rotateY(-9deg)rotateX(2deg);box-shadow:0 0 0 1px #0009,0 40px 120px -20px #000c,inset 0 1px #ffffff14}.device--phone{aspect-ratio:390/844;border:10px solid #1a1612;border-radius:3.2rem;width:min(360px,78vw);transform:perspective(1800px)rotateY(-10deg)rotateX(4deg);box-shadow:0 0 0 1px #e9e2d429,0 50px 120px -30px #000000e6,inset 0 0 0 1px #00000080}.device--phone:before{content:"";z-index:2;background:#0a0806;border-radius:999px;width:7.2rem;height:2rem;position:absolute;top:.7rem;left:50%;transform:translate(-50%)}.device__video,.device__poster{object-fit:cover;object-position:top left;background:var(--bg-2);width:100%;height:100%;position:absolute;inset:0}.device__video{opacity:0;transition:opacity var(--duration-scene) ease}.device.is-playing .device__video{opacity:1}.device:after{content:"";z-index:3;pointer-events:none;background:linear-gradient(115deg,#ffffff14 0%,#fff0 32% 70%,#ffffff0a 100%);position:absolute;inset:0}.scenes__rail{align-self:start;align-items:center;height:100svh;display:flex;position:sticky;top:0}.scenes__list{border-top:1px solid var(--line);width:100%;list-style:none}.scenes__item{border-bottom:1px solid var(--line);color:var(--ink-3);transition:color var(--duration-layout) var(--ease-out);grid-template-columns:2.2rem 1fr;column-gap:.4rem;padding:1.2rem 0;display:grid}.scenes__item.is-on{color:var(--ink)}.scenes__num{font-size:var(--fs-micro);transition:color var(--duration-layout);padding-top:.45rem}.scenes__item.is-on .scenes__num{color:var(--accent)}.scenes__title{font-family:var(--serif);font-variation-settings:"opsz" 60;font-weight:400;font-size:var(--fs-h4);letter-spacing:-.02em;line-height:1.1}.scenes__cap{transition:grid-template-rows var(--duration-scene) var(--ease-out);grid-template-rows:0fr;display:grid}.scenes__item.is-on .scenes__cap{grid-template-rows:1fr}.scenes__cap>p{color:var(--ink-2);font-size:var(--fs-body);text-wrap:pretty;opacity:0;transition:opacity var(--duration-scene) .15s;line-height:1.5;overflow:hidden}.scenes__item.is-on .scenes__cap>p{opacity:1;padding-top:.7rem}.proj.is-checking>*{visibility:hidden}.scene__cap{display:none}@media (width<=900px){.scenes,.scenes--phone{grid-template-columns:1fr;padding-left:0}.scenes__rail{display:none}.scene{flex-direction:column;align-items:flex-start;min-height:0;padding:clamp(2rem,6vh,4rem) 0;-webkit-mask-image:none;mask-image:none}.scenes--phone .scene{align-items:center}.device--desktop{border-left:0;border-radius:0;width:100%;margin-left:0;transform:perspective(1400px)rotateY(-6deg)}.scene__cap{padding:0 var(--gutter);margin-top:1.4rem;display:block}.scene__cap .scenes__num{color:var(--accent);margin-right:.5rem;display:inline-block}.scene__cap .scenes__title{display:inline}.scene__cap p{color:var(--ink-2);font-size:var(--fs-body);margin-top:.6rem;line-height:1.5}}@media (prefers-reduced-motion:reduce){.device{transform:none!important}.scene__glow{opacity:1}}
