@import url('/ui/control-tokens.css');
:root{color-scheme:dark;--cyan:#67d4dc;--ink:#07090c;--line:#597079;font-family:Roboto,'Segoe UI',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#ebf0f2;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button,.control,.language-link{border:1px solid var(--line);border-radius:10px;background:#0d1217de;color:#dce6e9;min-height:42px;padding:10px 15px;font-family:inherit;font-weight:500;font-size:12px;line-height:1.3;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:hover,.control:hover{border-color:var(--cyan);color:var(--cyan)}:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}[hidden]{display:none!important}.topbar{position:fixed;inset:0 0 auto;z-index:5;display:flex;align-items:center;gap:20px;padding:20px 3.5vw;pointer-events:none}.topbar>*{pointer-events:auto}.wordmark{width:130px;display:block}.wordmark img{width:100%;height:45px;object-fit:contain;object-position:left}.wordmark span{display:none}.language{margin-left:auto;display:flex;gap:4px}.language-link{font-size:10px;min-height:32px;min-width:32px;padding:6px;border-color:transparent;background:transparent}.language-link[aria-current=true]{color:var(--cyan)}#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none;outline:none;display:block}.vignette{display:none}.introcopy{position:fixed;top:110px;left:3.5vw;z-index:2;pointer-events:none;max-width:440px}.eyebrow{font-size:9px;letter-spacing:.2em;color:var(--cyan)}h1{font-size:clamp(24px,2.4vw,38px);line-height:1.13;font-weight:400;letter-spacing:-.035em;margin:12px 0}.introcopy p{color:#7f919b;font-size:12px;line-height:1.7;max-width:330px}.bottom{position:fixed;z-index:5;bottom:max(23px,env(safe-area-inset-bottom));left:3.5vw;right:3.5vw;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;pointer-events:none}.bottom>*{pointer-events:auto}.bottom>div{display:flex;flex-wrap:wrap;gap:12px;align-items:center;max-width:650px}.current{display:flex;align-items:center;gap:12px}.current h2,.current small{display:none}.count{font-size:10px;letter-spacing:.12em;color:#7c939d}.actions,.views{display:flex;gap:6px}.views button{font-size:10px;min-width:34px;min-height:34px;padding:7px}.views [aria-pressed=true]{color:var(--cyan);border-color:var(--cyan)}.hint{font-size:10px;color:#6d858f;flex-basis:100%;margin:0}.primary{border-color:#67d4dc88;color:#67d4dc}.project-callouts{position:fixed;inset:0;pointer-events:none;z-index:3}.project-callout{position:absolute;transform:translate(-50%,0);width:150px;min-height:35px;display:flex;justify-content:center;gap:5px;padding:9px 4px;border:0;border-radius:10px;background:#07090cb0;font-size:11px;pointer-events:auto;white-space:normal}.callout-line{position:absolute;width:1px;height:19px;bottom:100%;left:50%;background:#67d4dc66}.callout-index{font-size:9px;color:var(--cyan)}.callout-name{line-height:1.3}.project-callout.hovered{color:var(--cyan)}.project-callout:hover{background:#15222ae0}#status{position:fixed;top:55%;left:10%;right:10%;text-align:center;font-size:12px;color:#6c939d;z-index:4;pointer-events:none}.fallback-notice{position:fixed;top:88px;left:3.5vw;right:3.5vw;font-size:11px;color:#839da7}.fallback-image{position:fixed;inset:22% 5% auto;width:90%;height:57%;object-fit:contain}.fallback-active .project-callouts{top:28%;bottom:20%;left:6%;right:6%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;pointer-events:auto}.fallback-active .project-callout{position:static!important;transform:none;width:auto;background:#101920;border:1px solid #23343f;min-height:54px}.fallback-active .callout-line{display:none}dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;margin:0;padding:0;background:#07090c;color:#edf4f6;overflow:hidden}dialog::backdrop{background:#000e}.image-tools{position:absolute;inset:16px 20px auto;display:flex;align-items:center;gap:7px;z-index:2;padding:8px 10px;background:#090f15de;border:1px solid #2d4855;border-radius:10px;max-width:780px;margin:auto}.image-tools span{margin-right:auto;font-size:12px}#full-image{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center;touch-action:pan-x pan-y pinch-zoom}.image-tools button{min-width:38px;min-height:38px;padding:8px 12px}.no-js{position:relative;padding:100px 5vw 40px;background:#07090c;z-index:10;height:100vh;overflow:auto}.no-js img{max-width:100%;max-height:65vh;object-fit:contain}.no-js article{margin:40px 0}.no-js a{color:var(--cyan)}body[data-mode=photos] .introcopy p{display:none}body[data-mode=open] .introcopy p{display:none}
@media(max-width:700px){.topbar{padding:14px;gap:10px}.wordmark{width:95px}.wordmark img{height:36px}.topbar .control{font-size:10px;min-height:36px;padding:8px 10px}.introcopy{top:80px;left:18px;right:18px;max-width:310px}h1{font-size:25px}.introcopy p{font-size:11px;max-width:265px}.eyebrow{font-size:8px}.bottom{left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));gap:10px}.bottom>div{gap:7px;max-width:calc(100% - 130px)}.bottom>.control{max-width:128px;font-size:10px;padding:8px 10px}.actions{flex-wrap:wrap}.actions button{font-size:10px;padding:8px 10px;min-height:38px}.hint{font-size:9px;line-height:1.5}.count{font-size:9px}.project-callout{width:108px;font-size:10px;padding:6px 3px}.callout-index{font-size:8px}.views{gap:4px}.views button{min-width:30px;min-height:30px}.image-tools{inset:10px;bottom:auto;flex-wrap:wrap}.image-tools span{width:100%}.fallback-active .project-callouts{grid-template-columns:repeat(2,1fr);overflow:auto}.fallback-notice{top:64px;font-size:10px}}
@media(max-height:600px) and (min-width:701px){.introcopy{top:80px}.introcopy p{display:none}h1{font-size:25px}.topbar{padding:12px 3vw}.bottom{bottom:12px}}
/* Match the Atlas scene, with no floor or horizon. */
:root{--ink:#050607;--line:#597079}body{background:#050607}.vignette{display:block;position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 35%,#04070ab8 100%),linear-gradient(#080b0fe8,transparent 20% 78%,#080b0fe8)}
.photo-mosaic{position:fixed;z-index:2;inset:0;padding:190px 5vw 145px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;align-items:start;gap:28px;perspective:1600px;scrollbar-width:thin;scrollbar-color:#597079 #050607}
.photo-tile{position:relative;display:block;width:100%;min-width:0;padding:0;aspect-ratio:var(--ratio);height:auto;min-height:0;align-self:start;border-radius:10px;background:#111619;border:1px solid #59707955;overflow:hidden;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1s cubic-bezier(.3333,0,.6667,1),border-color .6s cubic-bezier(.3333,0,.6667,1),box-shadow .6s cubic-bezier(.3333,0,.6667,1);animation:photoReveal .9s cubic-bezier(.3333,0,.6667,1) both;animation-delay:var(--delay);box-shadow:0 10px 24px #0006;transform-style:preserve-3d}
.photo-tile img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio);object-fit:contain;background:transparent;border-radius:inherit;opacity:1;transition:opacity .6s cubic-bezier(.3333,0,.6667,1)}
.photo-tile:hover,.photo-tile:focus-visible{border-color:#67d4dc99;box-shadow:0 12px 36px #000a,0 0 15px #67d4dc18;z-index:1}.photo-caption{position:absolute;left:12px;bottom:10px;background:#050607b8;border:1px solid #59707955;border-radius:10px;padding:5px 9px;font-size:10px;color:#c6e0e3;pointer-events:none}.photo-tile[data-load=loading] img{opacity:0}.photo-tile[data-load=error]{min-height:170px}.photo-tile[data-load=error] img{visibility:hidden}.photo-tile[data-load=error] .photo-caption{inset:15px;display:grid;place-content:center;line-height:1.6;text-align:center;white-space:normal}
body[data-mode=photos] #world{opacity:.65}body[data-mode=photos] .introcopy{max-width:none;right:3.5vw;top:94px}body[data-mode=photos] h1{font-size:clamp(24px,2vw,32px);margin:8px 0}body[data-mode=photos] .project-callouts,body[data-mode=photos] .fallback-notice{display:none}body[data-mode=photos] .hint{font-size:11px}.bottom{background:linear-gradient(transparent,#050607d9)}
@keyframes photoReveal{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@media(max-width:1000px){.photo-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(max-width:700px){.photo-mosaic{inset:0;gap:28px;padding:165px 22px 155px}body[data-mode=photos] .introcopy{top:78px;left:18px;right:18px}.photo-caption{left:6px;bottom:6px;padding:4px 7px;font-size:9px}}
@media(max-width:480px){.photo-mosaic{grid-template-columns:1fr}}
@media(max-height:600px) and (min-width:701px){.photo-mosaic{padding-top:152px;padding-bottom:112px}body[data-mode=photos] .introcopy{top:76px}.hint{display:none}}
@media(prefers-reduced-motion:reduce){.photo-tile,.photo-tile img{animation:none;transition:none;transform:none!important}.photo-mosaic{scroll-behavior:auto}}

body[data-mode=photos] .topbar,body[data-mode=photos] .introcopy{z-index:5;background:linear-gradient(#050607f5,#050607b0,transparent)}
.photo-mosaic{grid-auto-rows:auto;gap:40px;isolation:isolate}.photo-tile{transform-origin:center;transform-style:flat}.photo-tile img{pointer-events:none}.photo-tile:hover{z-index:2}

body[data-mode=photos] .introcopy p{display:block;max-width:560px;max-height:2.6em;overflow:hidden;font-size:11px;margin:4px 0}.photo-tile{animation-fill-mode:backwards}

@media(max-width:700px){.project-callout{width:min(108px,27vw)}}

/* Definite grid tracks reserve the full card height before any image is decoded. */
.photo-mosaic{grid-auto-rows:var(--tile-height,300px);align-content:start;align-items:stretch;gap:40px}
.photo-tile{height:100%;min-height:0;max-height:100%;aspect-ratio:auto;align-self:stretch;contain:layout paint}
.photo-tile img{width:100%;height:100%;max-height:100%;aspect-ratio:auto;object-fit:contain}
.project-callout{font-size:22px;width:clamp(150px,15vw,260px);min-height:60px;padding:12px 8px;gap:10px}
.callout-index{font-size:18px}
@media(max-width:700px){.project-callout{font-size:20px;width:min(150px,30vw);padding:8px 4px;gap:5px}.callout-index{font-size:16px}}

.photo-tile{transform:perspective(var(--tile-perspective,1600px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

.spaces-sound{min-height:32px;font-size:10px;padding:6px 9px}
@media(max-width:700px){.topbar{gap:6px}.spaces-sound{font-size:9px;padding:5px;min-height:30px}.language{gap:0}}

/* Native page zoom cannot navigate the modal; gesture zoom transforms only the photo. */
#full-image{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;will-change:transform}
@media(pointer:coarse){.photo-mosaic{perspective:none}.photo-tile{transform:none;transform-style:flat;box-shadow:none;transition:opacity .3s ease;border-color:#59707955}.photo-tile img{transition:none}}