:root{color-scheme:dark;--ink:#090d13;--white:#f5f2ef;--muted:#aeb7bd;--line:rgba(246,249,252,.24)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;color:var(--white);background:var(--ink);font-family:Inter,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #cce6e5;outline-offset:5px}
.skip-link{position:fixed;z-index:99;left:16px;top:-70px;padding:12px;background:#fff;color:#000}.skip-link:focus{top:14px}
.atmosphere,.fallback,#figure,.shade{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.atmosphere{z-index:0;background:radial-gradient(ellipse 60% 75% at 68% 42%,#34545b46,transparent 70%),radial-gradient(ellipse 48% 55% at 67% 48%,#a47c6540,transparent 79%),linear-gradient(160deg,#07090c,#131821 60%,#07090c)}
.fallback{z-index:1;opacity:.88;transition:opacity .8s ease;overflow:hidden}
.fallback img{position:absolute;left:64%;top:50%;width:auto;height:min(79vh,790px);max-width:80%;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 0 85px #8fb9b850)}
.has-webgl .fallback{opacity:0;visibility:hidden}
#figure{z-index:2;display:block}
.shade{z-index:3;background:linear-gradient(90deg,#07090cdb 0%,#090d13ad 29%,transparent 64%),linear-gradient(0deg,#080b10b2,transparent 22%,transparent 83%,#080b106e)}
.header{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;gap:clamp(20px,5vw,84px);padding:24px clamp(24px,4.5vw,84px);border-bottom:1px solid rgba(255,255,255,.10);background:linear-gradient(#080b10b9,#080b1073);backdrop-filter:blur(16px)}
.wordmark{font-family:Georgia,"Times New Roman",serif;font-size:26px;font-weight:500;letter-spacing:-.035em;white-space:nowrap}.mark{color:#bacfbf}
.header nav{display:flex;gap:clamp(16px,2.8vw,38px);flex:1;justify-content:center}
.header nav a{font-size:12px;font-weight:500;letter-spacing:.045em;color:#e8edf0c9;transition:color .22s ease}
.header nav a:hover{color:#fff}
.motion{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:100px;padding:10px 14px;background:#ffffff09;color:#e8ecee;font-size:12px;transition:background .2s,border-color .2s}
.motion:hover{background:#ffffff18;border-color:#ffffff70}.motion-symbol{font-size:13px}
main,.footer{position:relative;z-index:4}
.panel{min-height:100svh;display:flex;align-items:center;padding:145px clamp(28px,10vw,160px) 90px}
.panel-inner{width:min(520px,100%)}
.hero{min-height:100svh}
.hero h1,.destination h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.075em;line-height:1.02;margin:0}
.hero h1{font-size:clamp(82px,13.5vw,230px);text-shadow:0 18px 65px #0008}
.explore{display:inline-flex;align-items:center;gap:22px;margin-top:42px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.04em;transition:gap .25s,border-color .25s}
.explore:hover{gap:30px;border-color:#fff}
.destination{min-height:88svh}
.index{font-size:11px;letter-spacing:.2em;color:#b0bfc0;margin:0 0 22px}
.destination h2{font-size:clamp(56px,7vw,110px)}
.description{font-size:clamp(15px,1.5vw,18px);line-height:1.65;color:#c8ced1;max-width:380px;margin:24px 0 31px}
.open{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;min-width:215px;padding:15px 0;border-bottom:1px solid #f6f9fc80;font-size:13px;letter-spacing:.01em;transition:padding .24s ease,border-color .24s}
.open:hover{padding-right:12px;border-color:#fff}
.footer{border-top:1px solid #ffffff20;padding:35px clamp(28px,10vw,160px);font-family:Georgia,serif;font-size:18px}
.footer span{font-family:Arial,sans-serif;font-size:13px;margin-left:5px}
@media(max-width:760px){
 .header{padding:17px 19px;gap:12px;flex-wrap:wrap;justify-content:space-between}
 .wordmark{font-size:23px}
 .header nav{order:3;flex-basis:100%;justify-content:space-between;gap:7px;padding-top:11px}
 .header nav a{font-size:11px}
 .motion{padding:7px 11px}
 .panel{padding:155px 27px 74px;align-items:flex-end;min-height:90svh}
 .hero{min-height:100svh}
 .hero h1{font-size:clamp(78px,18vw,135px)}
 .destination{min-height:85svh}
 .destination h2{font-size:clamp(58px,12vw,88px)}
 .atmosphere{background:radial-gradient(ellipse at 50% 32%,#35565c7a,transparent 69%),linear-gradient(#0c1017,#080a10)}
 .fallback img{left:50%;top:34%;height:65vh;max-width:96%;filter:drop-shadow(0 0 38px #8fb9b84a)}
 .shade{background:linear-gradient(0deg,#080b10f7 3%,#080b10cc 29%,transparent 67%,#080b10a6)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep the figure present while the page moves quietly around it. */
.panel{scroll-margin-top:80px}
.destination .panel-inner{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.has-observer .destination:not(.in-view) .panel-inner{opacity:.18;transform:translateY(24px)}
.destination .panel-inner:focus-within{opacity:1!important;transform:none!important}
.header nav a{position:relative;padding:6px 0}
.header nav a::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.header nav a:hover::after,.header nav a:focus-visible::after{transform:scaleX(1)}
.motion[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.has-observer .destination:not(.in-view) .panel-inner{opacity:1;transform:none}}


/* LIGHT-FIELD RESTORATION | 2026-10-14
   Never allow an empty WebGL canvas to hide the original character.
   These cached CSS surfaces are always visible and require no JavaScript. */
html,body{background:#090e19}
.atmosphere{
  overflow:hidden;
  background:
    radial-gradient(ellipse 30% 42% at 65% 45%,rgba(126,195,202,.22),transparent 75%),
    radial-gradient(ellipse 36% 44% at 65% 45%,rgba(202,146,103,.16),transparent 80%),
    radial-gradient(ellipse 48% 69% at 67% 49%,rgba(51,65,105,.22),transparent 84%),
    radial-gradient(ellipse 72% 60% at 45% 25%,rgba(22,49,74,.22),transparent 88%),
    linear-gradient(145deg,#0b1421,#111827 53%,#090b14 100%);
}
.atmosphere::before{
  content:"";position:absolute;width:min(87vh,830px);height:min(87vh,830px);
  top:48%;left:65%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:conic-gradient(from 35deg,transparent 0 46deg,rgba(153,216,216,.18) 70deg,transparent 112deg,rgba(237,188,123,.15) 175deg,transparent 218deg,rgba(139,155,241,.15) 290deg,transparent 350deg);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 69%,transparent 73%);
  mask:radial-gradient(circle,transparent 52%,#000 69%,transparent 73%);
  opacity:.83;filter:blur(1px);animation:halo-orbit 75s linear infinite;
}
.atmosphere::after{
  content:"";position:absolute;inset:8% -8%;
  background:radial-gradient(ellipse 22% 40% at 65% 45%,rgba(185,213,230,.11),transparent 90%),
             radial-gradient(ellipse 44% 49% at 65% 47%,rgba(73,134,176,.12),transparent 85%);
  opacity:.86;animation:light-breath 9s ease-in-out infinite alternate;
}
@keyframes halo-orbit{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes light-breath{from{opacity:.52}to{opacity:1}}
.fallback{opacity:1;visibility:visible;transition:opacity 1.2s ease;will-change:auto}
.fallback img{
  height:min(83vh,860px);max-width:88%;top:49%;left:65%;
  filter:brightness(1.25) contrast(1.12) saturate(1.18) drop-shadow(0 0 58px rgba(150,207,216,.44));
  animation:figure-breathe 8s ease-in-out infinite alternate;
}
@keyframes figure-breathe{from{transform:translate(-50%,-50%) scale(.975)}to{transform:translate(-50%,-50%) scale(1.025)}}
.has-webgl .fallback{opacity:.24;visibility:visible}
.figure-loading .fallback,.figure-unavailable .fallback{opacity:1;visibility:visible}
.image-unavailable .fallback img{display:none}
#figure{background:transparent}
.shade{
  background:linear-gradient(90deg,rgba(9,12,22,.85) 0%,rgba(9,12,22,.51) 33%,transparent 67%),
             linear-gradient(0deg,rgba(9,12,22,.76),transparent 24%,transparent 83%,rgba(9,12,22,.24));
}
.hero .panel-inner{animation:hero-appear 1.9s cubic-bezier(.25,.8,.25,1) both}
@keyframes hero-appear{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  .atmosphere{background:
     radial-gradient(ellipse 58% 43% at 50% 32%,rgba(111,194,208,.27),transparent 75%),
     radial-gradient(ellipse 71% 57% at 50% 36%,rgba(73,69,130,.22),transparent 85%),
     linear-gradient(160deg,#0b1522,#0d111d 67%,#070b11);}
  .atmosphere::before{left:50%;top:33%;width:80vh;height:80vh}
  .atmosphere::after{background:radial-gradient(ellipse 70% 40% at 50% 34%,rgba(157,211,220,.16),transparent 85%)}
  .fallback img{left:50%;top:34%;height:69vh;max-width:97%;filter:brightness(1.3) saturate(1.18) drop-shadow(0 0 40px #8db9d959)}
  .shade{background:linear-gradient(0deg,#090c17f5 1%,#0a0e19be 25%,transparent 70%,#090c17a1)}
  .hero .panel-inner{position:relative}
}
@media(prefers-reduced-motion:reduce){
  .atmosphere::before,.atmosphere::after,.fallback img,.hero .panel-inner{animation:none!important}
}