/* Stelina Chrysina. Palette taken from Saturn's light: ivory cloud tops, ring sand, Titan's blue haze. */
:root{
  --void:#000;
  --ivory:#EEE6D2;
  --sand:#B4A88F;
  --dust:#3E392F;
  --haze:#9DB0F0;
  --serif:'GFS Didot',Didot,'Bodoni 72',Georgia,serif;
  --sans:'Commissioner',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(20px,7.5vw,120px);
  --top:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--void);color-scheme:dark}
body{margin:0;background:var(--void);color:var(--ivory);font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:360;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,dl,dd,ol{margin:0;padding:0}
ol{list-style:none}
a{color:inherit}
img,svg{display:block}
::selection{background:var(--ivory);color:#000}
:focus-visible{outline:2px solid var(--haze);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ivory);color:#000;padding:10px 14px;border-radius:2px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- stage layers ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;transition:opacity .2s linear}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 34%,rgba(0,0,0,0) 62%);transition:opacity .6s ease}
.touring .veil{opacity:0}
main,.foot{position:relative;z-index:2}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--top);padding:0 var(--gut);padding-top:env(safe-area-inset-top,0px)}
.top::before{content:"";position:absolute;inset:0 0 -24px;z-index:-1;background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,0));pointer-events:none}
.brand{font-weight:600;font-size:16px;text-decoration:none;letter-spacing:.01em}
.top nav{display:flex;gap:28px;font-size:15px}
.top nav a{color:var(--sand);text-decoration:none;transition:color .2s}
.top nav a:hover{color:var(--ivory)}

/* ---------- type ---------- */
h1 .name{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(64px,10.6vw,168px);line-height:.92;letter-spacing:-.012em}
h1 .name>span{display:inline-block}
h1 .role{display:block;max-width:31ch;margin-top:30px;font-size:clamp(19px,1.7vw,23px);line-height:1.45;font-weight:380;color:var(--ivory)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4vw,56px);line-height:1.08;letter-spacing:-.004em}
.statement{font-family:var(--serif);font-size:clamp(34px,4.4vw,64px);line-height:1.1;max-width:17ch}
.body-l{font-size:clamp(18px,1.5vw,20px);line-height:1.6;max-width:34em;color:var(--ivory)}
.body-s{font-size:15px;line-height:1.55;color:var(--sand);max-width:40em}

/* ---------- actions ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:40px}
.btn{display:inline-block;background:var(--ivory);color:#000;font-weight:600;font-size:15.5px;line-height:1;padding:16px 24px;border-radius:2px;text-decoration:none;transition:background .2s}
.btn:hover{background:#fff}
.link{font-weight:500;font-size:15.5px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--sand);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--ivory)}

/* ---------- sections ---------- */
.col,.col-wide{padding-left:var(--gut);padding-right:var(--gut)}
.col>*{max-width:40rem}
.col-wide>*{max-width:48rem}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--top) + 40px);padding-bottom:12vh}
.idea{padding-block:26vh 18vh}
.idea .body-l{margin-top:28px}
.services{padding-block:16vh}
.services dl{margin-top:44px;display:grid;gap:34px}
.services dt{font-weight:600;font-size:19px;line-height:1.35}
.services dd{margin-top:6px;color:var(--sand);font-size:16.5px;line-height:1.55;max-width:34em}

/* ---------- moon tour ---------- */
.works{position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1400px}
.st-head{position:absolute;left:var(--gut);right:var(--gut);top:calc(var(--top) + 18px);z-index:3}
.st-head h2{font-size:clamp(34px,3.4vw,48px)}
.st-hint{margin-top:8px;font-size:15px;color:var(--sand);max-width:34em}
.stops{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;font-size:14px;color:var(--sand)}
.stops li{position:relative;padding-left:14px;transition:color .3s}
.stops li::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;border:1px solid currentColor;transition:background .3s,border-color .3s}
.stops li.on{color:var(--ivory)}
.stops li.on::before{background:var(--tint);border-color:var(--tint)}
.stops li.done{color:#7d7462}

.panel{position:absolute;left:67%;top:57%;width:min(36vw,500px);text-decoration:none;color:inherit;opacity:0;will-change:transform,opacity;transform-style:preserve-3d;z-index:2}
.panel .shell{border-radius:3px;overflow:hidden;background:rgba(4,4,4,.96);border:1px solid var(--dust);border-top:3px solid var(--tint);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.panel .art{aspect-ratio:16/9}
.panel .art svg{width:100%;height:100%}
.panel .meta{padding:20px 22px 22px}
.panel h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05}
.panel .why{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ivory)}
.panel .d{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--sand)}
.panel .open{display:inline-block;margin-top:16px;font-weight:600;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--tint)}
.panel:hover .open{text-decoration-thickness:2px}

/* lock-on line between a moon and its site */
.hud{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;--tint:var(--ivory)}
.hud-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hud-line path{fill:none;stroke:var(--tint);stroke-width:1.5}
.hud-line circle,.hud-line polygon{fill:var(--tint)}
.hud-ring{position:absolute;left:0;top:0;border-radius:50%;border:1px solid var(--tint);will-change:transform}
.hud-lbl{position:absolute;left:0;top:0;display:grid;gap:1px;white-space:nowrap;text-shadow:0 1px 12px #000,0 0 3px #000}
.hud-lbl b{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.1;color:var(--ivory)}
.hud-lbl span{font-size:15px;color:var(--ivory)}
.hud-lbl span em{font-style:normal;font-weight:600}
.hud-lbl small{font-size:13px;color:var(--sand)}

/* ---------- list of creations ---------- */
.worklist{padding-block:18vh 10vh}
.worklist>.body-s{margin-top:12px}
.worklist ol{margin-top:44px;display:grid;gap:44px}
.worklist li{display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start}
.worklist .mn{font-size:14px;color:var(--sand)}
.worklist h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1.1;margin-top:2px}
.worklist h3 a{text-decoration:none;background:linear-gradient(var(--tint,currentColor),var(--tint,currentColor)) 0 100%/0 1px no-repeat;transition:background-size .3s}
.worklist h3 a:hover,.worklist h3 a:focus-visible{background-size:100% 1px}
.worklist .why{margin-top:10px;font-size:16px;line-height:1.55}
.worklist .d{margin-top:6px;font-size:15.5px;color:var(--sand);line-height:1.55}
.worklist .art-src{display:none}
.mt{width:64px;height:64px;border-radius:50%;margin-top:4px;background-size:200% 100%;background-position:30% 50%;box-shadow:inset -14px -10px 20px rgba(0,0,0,.88),inset 4px 3px 10px rgba(255,255,255,.1)}
.mt-titan{background:radial-gradient(circle at 36% 32%,#C98A45,#8F4F1A 58%,#2A1204 100%);box-shadow:inset -12px -10px 18px rgba(0,0,0,.65),0 0 0 2px rgba(111,134,224,.3)}
.mt-enceladus{background-image:url(/assets/space/enceladus.jpg)}
.mt-dione{background-image:url(/assets/space/dione.jpg)}
.mt-iapetus{background-image:url(/assets/space/iapetus.jpg);background-position:12% 50%}

/* ---------- questions ---------- */
.faq{padding-block:12vh}
.qs{margin-top:30px}
.qs details{border-top:1px solid var(--dust)}
.qs details:last-child{border-bottom:1px solid var(--dust)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:22px 0;font-size:19px;font-weight:500;line-height:1.35}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:11px;height:11px;margin-right:4px;border-right:1.5px solid var(--sand);border-bottom:1.5px solid var(--sand);transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.qs details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.qs details p{padding:0 0 24px;color:var(--sand);max-width:36em}

/* ---------- contact ---------- */
.contact{padding-block:18vh 14vh}
.contact h2{font-size:clamp(40px,5.4vw,78px);max-width:13ch}
.contact .body-l{margin-top:24px}
.ways{margin-top:44px;display:grid;gap:22px}
.ways dt{font-size:14px;color:var(--sand)}
.ways dd a{font-size:clamp(21px,2vw,26px);font-weight:450;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:var(--dust);transition:text-decoration-color .2s}
.ways dd a:hover{text-decoration-color:var(--ivory)}
.contact>.body-s{margin-top:40px}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;padding:36px var(--gut) calc(36px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--sand)}
.foot nav{display:flex;gap:24px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ivory)}

/* ---------- one load sequence ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero .name>span{animation:rise 1.4s cubic-bezier(.2,.8,.2,1) both}
  .hero .name>span+span{animation-delay:.12s}
  .hero .role,.hero .actions{animation:fade 1.2s .5s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(.28em);letter-spacing:.04em}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

/* ---------- legal pages ---------- */
.doc{max-width:42rem;padding:calc(var(--top) + 9vh) var(--gut) 12vh;margin-left:0}
.doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,60px);line-height:1.08}
.doc .upd{margin-top:12px;color:var(--sand);font-size:15px}
.doc h2{font-family:var(--sans);font-weight:600;font-size:20px;line-height:1.35;margin-top:44px}
.doc p,.doc ul{margin-top:14px;color:#D9D0BB}
.doc ul{padding-left:20px}
.doc li{margin-top:6px}
.doc address{font-style:normal}
.doc a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--sand)}
.doc .btn{text-decoration:none;color:#000;margin-top:28px}

/* ---------- no WebGL ---------- */
.orb{display:none;position:fixed;z-index:0;pointer-events:none;width:min(40vw,520px);aspect-ratio:1;right:8vw;top:50%;transform:translateY(-50%)}
.no-webgl .orb{display:block}
.orb b{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 32% 30%,#F3E8CC 0,#E2CFA2 22%,#B99C6A 55%,#3A2E1E 82%,#0B0906 100%);box-shadow:inset -40px -30px 70px rgba(0,0,0,.85)}
.orb i{position:absolute;inset:-22%;border-radius:50%;border:14px solid rgba(214,196,160,.5);transform:rotateX(76deg) rotateY(-18deg)}
.orb i+i{inset:-34%;border-width:8px;border-color:rgba(200,186,156,.32)}

/* ---------- small screens ---------- */
@media (max-width:900px){
  :root{--top:62px}
  body{font-size:16.5px}
  .top nav a:not(:last-child){display:none}
  .veil{background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.82) 70%)}
  .hero{justify-content:flex-end;padding-bottom:9vh}
  h1 .role{margin-top:22px}
  .idea{padding-block:30vh 14vh}
  .st-head{top:calc(var(--top) + 6px)}
  .st-head h2{font-size:30px}
  .st-hint{font-size:14px;margin-top:4px}
  .stops{margin-top:12px;gap:4px 16px;font-size:13px}
  .panel{left:50%;top:auto;bottom:16px;width:calc(100vw - 32px);max-width:480px}
  .panel .art{aspect-ratio:16/6.4}
  .panel .meta{padding:16px 18px 18px}
  .panel h3{font-size:28px}
  .panel .why{font-size:14.5px}
  .panel .d{display:none}
  .panel .open{margin-top:12px}
  .hud-lbl{background:rgba(0,0,0,.55);padding:6px 12px 7px;border-radius:2px}
  .hud-lbl b{font-size:24px}
  .hud-lbl span{font-size:14px}
  .worklist li{grid-template-columns:52px 1fr;gap:16px}
  .mt{width:52px;height:52px}
  .orb{width:70vw;right:-4vw;top:24%}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}