:root{color-scheme:dark;background:#000;color:#f4f3ef;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
.dither{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
body{margin:0;min-height:100svh;background:#000}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
a:focus-visible{outline:2px solid white;outline-offset:7px}
a:hover{opacity:.72}
main{position:relative;height:100svh;min-height:500px;display:grid;place-items:center;isolation:isolate;overflow:hidden}
video{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
h1{width:min(44.8vw,784px);line-height:0;margin:0;pointer-events:none}
.wordmark{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}
footer{position:absolute;bottom:max(34px,env(safe-area-inset-bottom));left:4.5vw;right:4.5vw;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:28px}
.tagline{font-size:17px;line-height:1.4;letter-spacing:.01em;margin:0;max-width:340px;text-wrap:balance}
.contacts{display:flex;flex-direction:column;align-items:flex-end;gap:13px;font-size:14px}
.contacts a{display:flex;align-items:center;justify-content:flex-end;gap:18px;white-space:nowrap;min-height:24px}
.contacts span{font-size:18px}
@media(max-width:650px){main{min-height:560px}h1{width:63vw}footer{left:6vw;right:6vw;bottom:max(28px,env(safe-area-inset-bottom));gap:14px}.tagline{font-size:14px;max-width:135px;line-height:1.5}.contacts{font-size:13px;gap:12px}.contacts a{gap:10px}.contacts span{font-size:16px}video{object-fit:cover}}
@media(max-width:350px){footer{left:5vw;right:5vw;gap:10px}.tagline{font-size:13px;max-width:105px}.contacts{font-size:12px}.contacts a{gap:7px}}
@media(max-height:559px){footer{position:relative;margin-top:-95px;padding-bottom:25px;bottom:auto;left:auto;right:auto;width:91%;margin-left:auto;margin-right:auto}}
@media(prefers-reduced-motion:reduce){a{transition:none}}
@media(max-width:650px){video{height:min(74svh,160vw);top:50%;transform:translateY(-50%)}}

.light-sculpture{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.sculpture-ready video{visibility:hidden}h1{position:relative;z-index:1}


.xray-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0}@media(max-width:650px){.xray-scene{height:min(74svh,160vw);top:50%;transform:translateY(-50%)}}


.wordmark-trigger{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.wordmark-trigger:focus-visible{outline:1px solid #bdeaff;outline-offset:12px}.wordmark-trigger .wordmark{pointer-events:none}
footer{justify-content:flex-end}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stomp{position:fixed;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;overflow:hidden;visibility:hidden;--damage:0;--tear:0px;--scan:0%}
.stomp[data-stage=entry],.stomp[data-stage=words]{visibility:visible}
.stomp[data-stage=words]{background:#000}
.stomp-word{position:relative;display:none;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-.065em;line-height:.95;white-space:nowrap;padding-right:.065em;transform:translateX(calc(var(--tear)*.2))}
.stomp[data-stage=words] .stomp-word{display:block}
.stomp-word::before,.stomp-word::after{content:attr(data-text);position:absolute;inset:0;opacity:var(--damage);color:#fff;clip-path:polygon(0 22%,100% 22%,100% 43%,0 43%);transform:translateX(var(--tear));text-shadow:3px 0 #67dbef}
.stomp-word::after{clip-path:polygon(0 62%,100% 62%,100% 77%,0 77%);transform:translateX(calc(var(--tear)*-1));text-shadow:-3px 0 #d2f5ff}
.stomp::after{content:'';position:absolute;inset:0;opacity:calc(var(--damage)*.65);background:repeating-linear-gradient(0deg,transparent 0 5px,#000 5px 8px),linear-gradient(0deg,transparent calc(var(--scan) - 2%),#a3cbd433 var(--scan),transparent calc(var(--scan) + 2%));transform:translateX(var(--tear));mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.stomp{display:none}}

@font-face{font-family:Newblack;src:url('./assets/newblack-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Newblack;src:url('./assets/newblack-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{font-family:Newblack,Arial,Helvetica,sans-serif}
.stomp-word{font-family:Newblack,Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.035em;padding-right:.035em}

.portfolio-flash{position:fixed;inset:0;z-index:4;pointer-events:none;visibility:hidden;background:#000}.portfolio-flash.visible{visibility:visible}.portfolio-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:none;z-index:auto}

.stomp[data-stage=words] .stomp-word{transform:none}
.stomp[data-stage=words] .stomp-word::before,.stomp[data-stage=words] .stomp-word::after{display:none}

/* Keep the live chess scene behind the words; camera punches share one transform. */
.stomp[data-stage=words]{background:transparent}
main>video,main>.xray-scene{transform:scale(var(--scene-zoom,1));transform-origin:50% 50%;will-change:transform}
main[data-takeover=true] h1{visibility:hidden}
.stomp-word{text-shadow:0 2px 28px #0008}
@media(max-width:650px){main>video,main>.xray-scene{transform:translateY(-50%) scale(var(--scene-zoom,1))}}
@media(prefers-reduced-motion:reduce){main>video,main>.xray-scene{will-change:auto}}

/* Quiet, centered contact details. */
footer{justify-content:center;bottom:max(36px,env(safe-area-inset-bottom));left:5vw;right:5vw}
.contacts{flex-direction:row;justify-content:center;align-items:center;gap:clamp(32px,5vw,88px)}
.contacts a.contact-item{display:flex;align-items:center;justify-content:center;padding:10px 0;min-height:44px;text-align:center;user-select:text;color:#8c8c8c;transition:color .2s;opacity:1;text-decoration:none}
.contacts .contact-value{font-size:14px;font-weight:400;line-height:1.2;letter-spacing:0}
.contacts a.contact-item:is(:hover,:focus-visible){color:#fff;opacity:1;text-decoration:none}
@media(max-width:650px){footer{left:5vw;right:5vw;bottom:max(24px,env(safe-area-inset-bottom))}.contacts{width:100%;gap:24px}.contacts .contact-value{font-size:12px}}
@media(max-width:350px){.contacts{gap:16px}.contacts .contact-value{font-size:11px}}
@media(prefers-reduced-motion:reduce){.contacts a.contact-item{transition:none}}
/* Brief text slices use the same transition pulse as the scene. */
.stomp[data-stage=words] .stomp-word::before,.stomp[data-stage=words] .stomp-word::after{display:block}

/* Contact disclosure controlled by the visitor. */
.contacts{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
.contacts.contacts-pending{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s .22s}
@media(prefers-reduced-motion:reduce){.contacts{transition:none}}

@media(prefers-reduced-motion:reduce){.contacts.contacts-pending{transition:none}}

/* Full-height rendering surface: close-ups must never hit an inner canvas edge. */
@media(max-width:650px){
 main>video,main>.xray-scene{inset:0;width:100%;height:100%;transform:none}
}

/* Stable bottom trigger; details expand above it without moving the scene. */
footer{z-index:6;align-items:center}
.contact-toggle{appearance:none;border:0;background:none;color:#8c8c8c;font:400 11px Newblack,Arial,sans-serif;letter-spacing:.09em;min-height:44px;padding:12px 18px;cursor:pointer;transition:color .2s}
.contact-toggle:hover,.contact-toggle:focus-visible{color:#fff}
.contact-toggle:focus-visible{outline:1px solid #aaa;outline-offset:2px}
footer .contacts{position:absolute;bottom:48px;left:0;right:0;width:100%;text-shadow:0 1px 8px #000}
@media(prefers-reduced-motion:reduce){.contact-toggle{transition:none}}

/* Quiet corner placement, independent from the centered hero. */
footer{position:fixed;left:auto;right:max(20px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:auto;margin:0;padding:0;justify-content:flex-end}
.contact-toggle{font-size:10px;color:#777;letter-spacing:.06em;padding:12px 4px;min-width:76px;text-align:right}
footer .contacts{left:auto;right:4px;bottom:46px;width:max-content;flex-direction:column;align-items:flex-end;gap:0}
.contacts a.contact-item{min-height:36px;padding:8px 0;align-items:flex-end;text-align:right}
@media(max-width:650px){footer{right:max(16px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}.contact-toggle{font-size:10px}footer .contacts{gap:0}}

/* Next release: persistent, quiet contact details. */
footer .contacts{position:static;width:max-content;opacity:1;visibility:visible;pointer-events:auto}

/* Audio state follows actual playback, including browser autoplay blocking. */
.sound-toggle{position:fixed;z-index:7;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:#8c8c8c;cursor:pointer;padding:0;transition:color .2s}
.sound-toggle:hover,.sound-toggle:focus-visible{color:#fff}
.sound-toggle:focus-visible{outline:1px solid #aaa;outline-offset:2px}
.sound-toggle .sound-waves{display:none}
.sound-toggle[data-playing=true] .sound-waves{display:block}
.sound-toggle[data-playing=true] .sound-off{display:none}
@media(prefers-reduced-motion:reduce){.sound-toggle{transition:none}}

/* Film subtitles: stable, readable and independent from the glitch layer. */
.speech-subtitles{position:fixed;z-index:8;left:50%;bottom:max(100px,calc(env(safe-area-inset-bottom) + 84px));transform:translateX(-50%);width:max-content;max-width:90vw;margin:0;color:#f5ef62;font:400 clamp(19px,2.1vw,30px)/1.22 Arial,Helvetica,sans-serif;letter-spacing:0;text-align:center;white-space:pre-line;text-wrap:balance;text-shadow:0 2px 3px #000,1px 0 2px #000,-1px 0 2px #000;pointer-events:none}
.speech-subtitles[hidden]{display:none}
@media(max-width:650px){.speech-subtitles{font-size:20px;bottom:max(112px,calc(env(safe-area-inset-bottom) + 96px));max-width:92vw}}