:root { --fog:#b6bac5; --ink:#383e4e; --dark:#171b23; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--fog); color:var(--ink); font-family:"JetBrains Mono","IBM Plex Mono",Consolas,monospace; }
body { overflow:hidden; height:100vh; }
html { overscroll-behavior:none; }
body:not(.nogl) { touch-action:none; }   /* the 3D page scrolls itself from the finger (main.js): no browser pan, pinch or pull-to-refresh */
#panel .body { touch-action:pan-y; }     /* (an open shard's text column still scrolls natively on phones) */
#scroll { display:none; }
canvas.gl { position:fixed; inset:0; display:block; z-index:0; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }   /* (a held finger looks around: no callout, no selection) */

/* HUD */
.hud { position:fixed; inset:0; pointer-events:none; z-index:5; }
.hud > * { position:absolute; letter-spacing:.08em; font-size:11px; text-transform:uppercase; line-height:1.9; transition:color .4s; }
.hud .tl { top:28px; left:32px; }
.hud .tl b { font-size:15px; letter-spacing:.14em; display:block; line-height:1.4; }
.hud .tl span { display:block; }
.hud .tr { top:28px; right:32px; width:300px; text-align:right; }
.hud .tr p { margin:4px 0 0; text-transform:none; letter-spacing:.02em; line-height:1.7; opacity:.85; }
.hud .bl { bottom:28px; left:32px; }
#snd { pointer-events:auto; cursor:pointer; background:none; border:0; padding:4px 0; margin:-4px 0; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; }
#snd b { font-weight:inherit; } #snd:hover b, #snd[aria-pressed="true"] b { text-decoration:underline; text-underline-offset:3px; }
@media (min-width:761px) { #snd { font-size:15px; letter-spacing:.1em; margin-right:6px; } }   /* (desktop: bigger, so people find it — sound starts off) */
.hud .br { bottom:28px; right:32px; text-align:right; }
.hud .br span { display:block; }
.hud .br .touch-only { display:none; } body.touch .hud .br .touch-only { display:block; }   /* (the free look is a held finger: phones and tablets, and the phone frame) */
.dim { opacity:.55; }
.hero-only { transition:opacity .4s; }
body.sections .hero-only { opacity:0; }
body.dark .hud > * { color:#dfe3ea; }
body.dark .hud { z-index:21; }
@media (max-width:760px) {   /* phones (igloo: 25 px margins; the manifesto a narrow column top right; the rest stacked at the bottom) */
  .hud > * { font-size:10px; }
  .hud .tl { top:20px; left:20px; max-width:40vw; }
  .hud .tl b { font-size:13px; }
  .hud .tr { top:20px; right:20px; width:44vw; }
  .hud .tr p { font-size:10px; line-height:1.55; }
  .hud .bl { bottom:20px; left:20px; }
  .hud .br { bottom:46px; right:20px; }
  #labels .lab { font-size:9.5px; }
}   /* over the open panel (z 20), or its .body swallows the SOUND click; the rest of the HUD lets clicks through */

/* scan-mesh overlay + labels */
.track { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; }
.track line { stroke:#fff; stroke-width:1; }
.track circle { fill:#fff; }
#labels { position:fixed; inset:0; pointer-events:none; z-index:4; }
.lab { position:absolute; left:0; top:0; color:#fff; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; line-height:1.6; white-space:nowrap; text-shadow:0 0 10px rgba(255,255,255,.55); opacity:0; }
.lab b { display:block; font-weight:600; }
.lab.cta { pointer-events:auto; cursor:pointer; }
.lab .ul { display:block; width:100%; height:1px; background:#fff; margin-top:4px; opacity:.8; }
.lab.right { text-align:right; }

/* project panel */
/* the 3D detail scene (detail_scene.js) shows through: the shard's symbol in the left column, the text under it, the videos
   on the right over a darkening so they read */
#panel { position:fixed; inset:0; z-index:20; background:linear-gradient(90deg, rgba(8,10,14,0) 34%, rgba(8,10,14,.5) 52%, rgba(8,10,14,.7)); color:#dfe3ea; opacity:0; pointer-events:none; transition:opacity .7s; overflow:hidden; }
#panel.open { opacity:1; pointer-events:auto; }
#panel .ghost { display:none; }
#panel .body { position:absolute; inset:0; display:grid; grid-template-columns:minmax(300px, 34%) 1fr; gap:48px; padding:110px 64px 60px; }
#panel .text { font-size:11.5px; line-height:1.8; letter-spacing:.03em; align-self:end; }
#panel .text .dim { display:block; letter-spacing:.1em; text-transform:uppercase; font-size:10px; }
#panel h2 { font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif; font-weight:600; font-size:38px; line-height:1; letter-spacing:-.02em; margin:12px 0 22px; color:#fff; }
#panel p { margin:0 0 28px; color:rgba(223,227,234,.74); }   /* dim by colour, not opacity: letters brighten to white under the cursor */
#panel .dim { opacity:1; color:rgba(223,227,234,.52); }
#panel .links { display:flex; gap:18px; margin-top:6px; }
#panel .links a { color:#fff; text-decoration:none; letter-spacing:.1em; font-size:11px; }
#panel .videos { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; }
#panel .tile { position:relative; aspect-ratio:16/9; background:#0d1016; overflow:hidden; cursor:pointer; border:1px solid rgba(255,255,255,.08); }
#panel .tile.vert { aspect-ratio:16/9; }
#panel .tile img, #panel .tile video { width:100%; height:100%; object-fit:cover; display:block; opacity:.85; }
#panel .tile video { object-fit:contain; background:#000; }
#panel .tile video.pv { position:absolute; inset:0; object-fit:cover; background:transparent; opacity:.95; pointer-events:none; }
#panel .tile .cap { position:absolute; left:12px; bottom:10px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff; text-shadow:0 0 8px rgba(0,0,0,.8); }
#panel .tile .play { position:absolute; right:12px; top:10px; font-size:10px; letter-spacing:.1em; color:#fff; opacity:.7; }
#close { position:absolute; z-index:3; top:28px; right:32px; background:none; border:0; color:#fff; font:inherit; font-size:11px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:6px 10px; }   /* (above .body, which covers the panel: it used to swallow the click) */
#close i { display:inline-block; width:8px; height:8px; border:1px solid #fff; vertical-align:middle; margin:0 10px; }
#close i:first-child { border-right:0; border-bottom:0; }
#close i:last-child { border-left:0; border-top:0; }

/* contact (igloo's room UI): two thin line arrows beside the logo, each with one barb, that blink on (opacity steps over
   .2 s) and blink again on hover; a corner-bracket box at the bottom centre holding the link names as a carousel (the
   current one in the box, its neighbours fading out to the sides) that glitches on when it shows or is hovered.
   igloo draws them white on its darker room; ours is pale, so they take the HUD's ink */
#roomui { position:fixed; inset:0; z-index:6; pointer-events:none; }
#roomui .arrow { position:fixed; left:0; top:0; width:58px; height:24px; margin:-12px 0 0 -29px; padding:5px 0; background:none; border:0; cursor:pointer; opacity:0; pointer-events:none; }
#roomui .arrow svg { display:block; width:58px; height:14px; overflow:visible; }
#roomui .arrow path { fill:none; stroke:var(--ink); stroke-width:1.3; }
#roomui.show .arrow, #roomui.show #visit { pointer-events:auto; }
#roomui .arrow.blink { animation:pfBlink .2s steps(1,end) forwards; }
@keyframes pfBlink { 0% { opacity:0 } 17% { opacity:1 } 33% { opacity:0 } 50% { opacity:1 } 67% { opacity:0 } 83%, 100% { opacity:1 } }
#visit { position:fixed; left:50%; bottom:58px; width:220px; height:70px; margin-left:-110px; display:block; color:var(--ink); text-decoration:none; opacity:0; pointer-events:none; }
#visit i { position:absolute; width:11px; height:11px; border:0 solid var(--ink); }
#visit i:nth-child(1) { left:0; top:0; border-width:1.3px 0 0 1.3px; } #visit i:nth-child(2) { right:0; top:0; border-width:1.3px 1.3px 0 0; }
#visit i:nth-child(3) { left:0; bottom:0; border-width:0 0 1.3px 1.3px; } #visit i:nth-child(4) { right:0; bottom:0; border-width:0 1.3px 1.3px 0; }
#visit .names { position:absolute; left:50%; top:50%; width:640px; height:22px; margin:-11px 0 0 -320px; -webkit-mask-image:linear-gradient(90deg, transparent 40px, #000 230px, #000 410px, transparent 600px); mask-image:linear-gradient(90deg, transparent 40px, #000 230px, #000 410px, transparent 600px); }
#visit .name { position:absolute; left:50%; top:0; padding:0 6px; cursor:pointer; line-height:22px; white-space:nowrap; font:500 13px "IBM Plex Mono","JetBrains Mono",Consolas,monospace; letter-spacing:.02em; color:var(--ink); }
#visit.glitch { animation:pfGlitch .3s steps(1,end) forwards; }
@keyframes pfGlitch { 0% { opacity:0 } 12% { opacity:1; transform:translateX(-4px) } 36% { opacity:.7; transform:translateX(3px) } 62% { opacity:1; transform:translateX(-1px) } 100% { opacity:1; transform:none } }
#roomui .off { animation:none !important; opacity:0 !important; transition:opacity .12s; }
@media (max-width:760px) { #visit { width:150px; height:48px; margin-left:-75px; bottom:80px; } }

/* loading screen: flat grey + a row of characters that keeps reshuffling and settles as the files arrive */
#loader { position:fixed; inset:0; z-index:50; background:#a7abb5; display:flex; align-items:center; justify-content:center; transition:opacity .7s; }
#loader.out { opacity:0; pointer-events:none; }
#ld-bar { color:#fff; font-size:12px; letter-spacing:.22em; white-space:pre; }
/* intro: the HUD waits until the camera has landed, then decodes in */
.hud, #labels, .track { transition:opacity .6s; }
body.intro .hud, body.intro #labels, body.intro .track { opacity:0; }

/* light page (no WebGL): hero still + the four shelves as a menu */
body.nogl { background:var(--fog) url(img/hero.webp) center / cover no-repeat; }
#fallback { position:fixed; left:32px; right:32px; bottom:84px; z-index:6; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
#fallback button { text-align:left; font:inherit; color:var(--ink); background:rgba(214,218,226,.72); border:1px solid rgba(56,62,78,.25); padding:16px 18px; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .3s; }
#fallback button:hover, #fallback button:focus-visible { background:rgba(236,239,244,.9); }
#fallback .dim { display:block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; }
#fallback b { display:block; margin-top:6px; font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif; font-size:22px; letter-spacing:-.01em; }
@media (max-width:760px) {
  #fallback { grid-template-columns:1fr 1fr; left:16px; right:16px; bottom:72px; }
  #panel { background:linear-gradient(180deg, rgba(8,10,14,0) 28%, rgba(8,10,14,.72) 50%); }   /* the symbol sits at the top */
  #panel .body { grid-template-columns:1fr; padding:44vh 16px 110px; gap:24px; overflow-y:auto;   /* (the column fades out under the HUD's top and bottom lines, and its end scrolls clear of them) */
    -webkit-mask-image:linear-gradient(transparent 58px, #000 96px, #000 calc(100% - 96px), transparent calc(100% - 56px)); mask-image:linear-gradient(transparent 58px, #000 96px, #000 calc(100% - 96px), transparent calc(100% - 56px)); }
  #panel .videos { grid-template-columns:1fr; }
}

/* reduced motion: no fades or slides beyond what's needed */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }