/* Arctura site. World: the night Arctura already draws. Colors are the app's own (style.css and scene-universe.js): ground #030810, text #e0eff8,
   cyan #8ddfff, amber #ecc38d, one soft hue per nebula. Layout idea: a fixed galaxy that morphs per chapter, text pinned left like Pioneer's,
   native scroll underneath; the particles themselves carry each change of chapter. No pills, no glass, no glow borders. */
:root{
  --bg:#010309; --text:#e0eff8; --body:#c4d6e4; --muted:#9eb4c8; --cyan:#8ddfff; --amber:#ecc38d; --line:#92dfff24; --line2:#92dfff55;
  --display:'Saira Condensed','Arial Narrow',sans-serif; --sans:'Figtree',system-ui,sans-serif;
  --gutter:clamp(20px,6vw,96px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);scrollbar-width:thin;scrollbar-color:#8ddfff33 var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;caret-color:var(--cyan)}
::selection{background:#8ddfff40;color:#fff}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#8ddfff2a;border-radius:0}
a{color:inherit}
:focus-visible{outline:1px solid var(--cyan);outline-offset:4px}

/* Loader */
#loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-content:center;justify-items:center;gap:18px;transition:opacity .9s ease,visibility .9s}
#loader.done{opacity:0;visibility:hidden}
.loader-mark{font:600 .95rem/1 var(--sans);letter-spacing:.5em;padding-left:.5em}
.loader-pct{font:800 clamp(2.4rem,6vw,4rem)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--cyan)}

/* Bar, menu, chapter dots */
.bar{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;gap:22px;padding:22px var(--gutter) 0}
.bar::before{content:'';position:absolute;left:0;right:0;top:0;height:92px;background:linear-gradient(#010309e6,#01030900);pointer-events:none;z-index:-1}
/* the dark band behind the wordmark appears only while words are passing under it (main.js adds .shade), so scrolling text disappears
   under the bar instead of showing through it, and there is no dark bar the rest of the time (Robbie 2026-10-02) */
.bar::after{content:'';position:absolute;left:0;right:0;top:0;height:124px;background:linear-gradient(#010309 0,#010309 56px,#010309cc 76px,#01030966 98px,#01030900 124px);pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s ease}
.bar.shade::after{opacity:1}
.mark{font:600 .8rem/1 var(--sans);letter-spacing:.5em;text-decoration:none;color:var(--text)}
.menu-btn{width:34px;height:22px;border:0;background:none;padding:0;cursor:pointer;display:grid;align-content:center;gap:8px}
.menu-btn span{display:block;height:1px;background:var(--text);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(18deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-18deg)}
.menu{position:fixed;z-index:25;inset:0;background:#010309f2;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--gutter)}
.menu a{font:800 clamp(2.4rem,7vw,5rem)/1.05 var(--display);text-transform:uppercase;text-decoration:none;color:var(--text);transition:color .25s}
.menu a:hover{color:var(--cyan)}
.dots{position:fixed;z-index:20;right:clamp(14px,2.2vw,32px);top:50%;transform:translateY(-50%);display:grid;gap:18px}
.dots a{display:block;width:22px;height:22px;position:relative}
.dots i{position:absolute;inset:7px;border:1px solid var(--muted);border-radius:50%;transition:all .4s cubic-bezier(.2,.8,.2,1)}
.dots a.on i{inset:4px;border-color:var(--cyan);background:#8ddfff22}
.dots a.on::after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--cyan)}

/* Scene layers */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 62% 48%,#01030900 0%,#01030900 55%,#010309cc 100%),linear-gradient(90deg,#010309b3 0%,#01030900 52%)}

/* Labels on the map, set the way Arctura's own map sets them: the role in its colour, then model, company and state */
.tags{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;text-align:center;white-space:nowrap;opacity:0;will-change:transform,opacity;isolation:isolate;cursor:pointer;pointer-events:none}
.tag:hover span,.tag:focus-visible span{color:#eaf6ff}
.tag::before{content:'';position:absolute;inset:-10px -18px;background:radial-gradient(closest-side,#010309e0 40%,#01030900);z-index:-1} /* a patch of dark sky behind the words, so threads and glows never run through them */
.tag b{display:block;font:500 13px/1.3 var(--sans);color:rgb(var(--c));text-shadow:0 1px 3px #000d,0 0 12px rgba(var(--c),.35)}
.tag span{display:block;font:400 11px/1.45 var(--sans);color:#b3c6d6;text-shadow:0 1px 3px #000e}
.tag.lead b{font-weight:600;letter-spacing:.18em;padding-left:.18em}
.tag span{transition:color .5s}
.tag.on span{color:#eaf6ff} /* the star flaring now: its job reads a step brighter */

/* The mission line under a chapter's words: the project, then the step it has reached, in Arctura's wording */
.mission{margin-top:clamp(20px,3.4vh,32px);display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;max-width:38ch}
.mission::before{content:'';width:7px;height:7px;border-radius:50%;background:#9e6cff;align-self:center}
.mission-name{font:500 1rem/1.35 var(--sans);color:#c7b3ff}
.mission-state{grid-column:2;color:var(--muted);font-size:.92rem;transition:color .4s}
.mission-state[data-tone=warn]{color:var(--amber)}
.mission-state[data-tone=ok]{color:#7de8c7}

.hint{margin:14px 0 0;color:var(--muted);font-size:.85rem}

/* A star, up close: the words about it sit where the chapter's words were */
.chap .copy{transition:opacity .45s ease}
.focused .chap .copy{opacity:0}
.focus{position:fixed;z-index:7;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(30rem,40vw);opacity:0;transition:opacity .5s ease;pointer-events:none}
.focused .focus{opacity:1;pointer-events:auto}
.focus-name{font:800 clamp(2.6rem,5.4vw,5rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:0}
.focus-sub{margin:12px 0 0;color:var(--muted);font-size:1rem}
.focus-h{font:600 .95rem/1.3 var(--sans);color:var(--text);margin:28px 0 6px}
.focus p{margin:0;max-width:38ch;color:var(--body);font-size:clamp(1rem,1.2vw,1.1rem)}
.focus .focus-sub{color:var(--muted)}
.focus-nav{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px}
.focus-nav button{background:none;border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:6px 0;color:var(--text);font:600 .9rem/1.2 var(--sans);cursor:pointer;transition:color .25s,border-color .25s}
.focus-nav button:hover{color:var(--cyan);border-color:var(--cyan)}

/* Chapters: each is a tall scroll track with a sticky screen */
main{position:relative;z-index:4}
.chap{height:170vh;position:relative}
.chap:first-child{height:150vh}
#c3 .pin{transform-origin:70% 50%} /* the dive heads for the butterfly on the right, so the words leave to the left */
.pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 var(--gutter)}
.copy{max-width:min(46rem,64vw);padding-top:6vh}
.h{font:800 clamp(2.9rem,7.6vw,7rem)/.94 var(--display);text-transform:uppercase;letter-spacing:-.012em;margin:0;text-wrap:balance;color:#f3fbff}
.h .line{overflow:hidden;padding-bottom:.06em}
.p{margin:clamp(18px,3vh,30px) 0 0;max-width:38ch;color:var(--body);font-size:clamp(1rem,1.25vw,1.15rem)}
.p.lead{max-width:56ch}


/* The app, running */
.app{position:relative;z-index:6;padding:clamp(70px,12vh,150px) var(--gutter) 40px} /* no backdrop: the app sits inside the same universe */
.app-in{max-width:1280px;margin:0 auto}
.shot{margin:clamp(32px,6vh,64px) 0 0}
.shot img,.shot video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid var(--line);border-radius:2px;background:#02050b}
.shot-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:14px}
.play{flex:none;background:none;border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:4px 0;color:var(--text);font:600 .85rem/1.2 var(--sans);cursor:pointer;transition:color .25s,border-color .25s}
.play:hover{color:var(--cyan);border-color:var(--cyan)}
.shot figcaption{color:var(--muted);font-size:.9rem;max-width:68ch}
.close{margin-top:clamp(90px,16vh,200px);max-width:46rem}
.notify{margin-top:34px}
.close .p{max-width:32ch;color:var(--text);font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.4}
.notify label{display:block;color:var(--text);font-size:1rem;letter-spacing:.01em;margin-bottom:10px}
.notify .row{display:flex;gap:0;flex-wrap:wrap;align-items:flex-end;border-bottom:1px solid var(--line2);max-width:34rem}
.notify input{flex:1 1 14rem;min-width:0;background:none;border:0;color:var(--text);font:400 1.1rem/1.4 var(--sans);padding:10px 0;outline-offset:6px}
.notify input::placeholder{color:#9eb4c88c}
.notify button{font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bg);background:var(--text);border:0;border-radius:2px;padding:12px 16px;margin:0 0 6px 12px;cursor:pointer;transition:background .25s}
.notify button:hover{background:var(--cyan)}
.fine{margin:12px 0 0;color:var(--muted);font-size:.8rem}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(80px,14vh,170px);padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
.credit{max-width:60ch}

/* Phone */
@media(max-width:760px){
  .copy{max-width:100%;padding-top:0}
  .pin{align-items:flex-end;padding-bottom:16vh}
  #c0 .pin{flex-direction:column;align-items:flex-start;justify-content:flex-end}
  .dots{display:none}
  .tag b{font-size:11px}.tag span{display:none} /* on a phone the stars carry names only; a tap opens the rest */
  .focus{left:16px;right:16px;width:auto;top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:none;max-height:54vh;overflow:auto;background:linear-gradient(#01030900,#010309f0 18%)}
  .focus-name{font-size:2.5rem}
  .veil{background:linear-gradient(0deg,#010309d9 0%,#01030900 62%)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* vertical scrolling only (Robbie 2026-10-02): clip, not hidden, so the sticky chapters keep working */
html,body{overflow-x:clip;overscroll-behavior-x:none}
.shot-ctl{display:flex;gap:18px;flex:none;align-items:flex-start}
.shot video:fullscreen{object-fit:contain;background:#000}

/* FAQ (Robbie 2026-10-02): questions closed, one tap opens the answer. Native details/summary, so it works with keyboard and screen readers
   and before any script runs. Thin rules and a drawn plus, same as the rest of the page: no cards, no pills. */
.faq{margin-top:clamp(90px,16vh,200px);max-width:none}
.faq .h{margin-bottom:clamp(20px,4vh,36px)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;color:var(--text);font:500 1.08rem/1.4 var(--sans);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cyan)}
.faq summary i{position:relative;flex:none;width:14px;height:14px}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:currentColor;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a{padding:0 0 22px;color:var(--body);max-width:62ch}
.faq .a p{margin:0 0 .8em}.faq .a p:last-child{margin:0}
@media(prefers-reduced-motion:no-preference){.faq details[open] .a{animation:faqIn .45s cubic-bezier(.2,.8,.2,1)}@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}}

/* Calls to action and footer (2026-10-03 draft): square-cornered like the Save my spot button, thin rules like the rest of the page. No pills. */
.bar .cta-top{margin-left:auto;font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line2);padding:6px 0;transition:color .25s,border-color .25s}
.bar .cta-top:hover{color:var(--cyan);border-color:var(--cyan)}
.cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:clamp(24px,4vh,38px)}
.cta{font:600 .76rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--bg);background:var(--text);border-radius:2px;padding:15px 20px;transition:background .25s}
.cta:hover{background:var(--cyan)}
.cta-2{font:600 .9rem/1.2 var(--sans);color:var(--text);text-decoration:none;border-bottom:1px solid var(--line2);padding:4px 0;transition:color .25s,border-color .25s}
.cta-2:hover{color:var(--cyan);border-color:var(--cyan)}
.close .h{max-width:16ch}
.site-foot{margin-top:clamp(90px,15vh,180px);padding-top:34px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.site-foot .cols{display:grid;grid-template-columns:minmax(14rem,1.4fr) repeat(3,minmax(8rem,1fr));gap:34px}
.site-foot .brand .mark{display:inline-block;margin-bottom:14px}
.site-foot .brand p{margin:0;max-width:30ch;line-height:1.5}
.site-foot h3{margin:0 0 12px;font:600 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-foot a{color:var(--muted);text-decoration:none;transition:color .25s}
.site-foot a:hover{color:var(--cyan)}
.site-foot .legal{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:44px;padding-top:16px;border-top:1px solid var(--line);font-size:.75rem;color:#9eb4c8b3}
.site-foot .legal p{margin:0;max-width:62ch}
@media(max-width:760px){
  .bar .cta-top{letter-spacing:.12em}
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .site-foot .brand{grid-column:1/-1}
}
.notify .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notify button:disabled{opacity:.7;cursor:default}
.notify[data-state=done] .fine{color:var(--cyan)}
.notify[data-state=error] .fine{color:var(--amber)}
.notify .fine a{color:var(--muted)}

/* Arctura is seven letters (Mira was four): keep the header on one line on phones (2026-10-03) */
.mark,.bar .cta-top{white-space:nowrap}
@media(max-width:760px){
  .bar{gap:14px}
  .mark{font-size:.7rem;letter-spacing:.3em}
  .bar .cta-top{font-size:.64rem;letter-spacing:.08em}
}

/* FAQ as two columns of themed groups (Robbie 2026-10-03): fewer scrolls than one long list; one column on phones and narrow windows. */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,96px);align-items:start}
.faq-col{min-width:0}
.faq-group+.faq-group{margin-top:clamp(34px,5vh,52px)}
.faq-group h3{margin:0 0 14px;font:600 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.faq-group details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{font-size:1.02rem}
@media(max-width:900px){.faq-cols{grid-template-columns:1fr}.faq-col+.faq-col{margin-top:clamp(34px,5vh,52px)}}

/* Footer, one tight row at the full width of the window (Robbie 2026-10-03). It breaks out of the 1280 px content column; the page clips sideways overflow, so the extra 10 px of scrollbar width cannot make a horizontal scroll. */
.site-foot{width:100vw;margin:clamp(60px,10vh,120px) 0 0 calc(50% - 50vw);padding:16px var(--gutter) 18px;border-top:1px solid var(--line);font-size:.82rem}
.site-foot .foot-main{display:flex;align-items:center;justify-content:space-between;gap:12px 36px;flex-wrap:wrap}
.site-foot .foot-main .mark{font-size:.72rem}
.site-foot .foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.site-foot .foot-links a,.site-foot .foot-links .cookie-settings{color:var(--muted);text-decoration:none;font:inherit;transition:color .25s}
.site-foot .foot-links a:hover,.site-foot .foot-links .cookie-settings:hover{color:var(--cyan)}
.site-foot .legal{margin-top:12px;padding-top:12px;gap:4px 28px;font-size:.74rem}
.site-foot .legal a{color:inherit;text-decoration-color:var(--line2)}
.site-foot .legal .credit{margin-left:auto}
@media(max-width:760px){.site-foot .foot-main{flex-direction:column;align-items:flex-start}.site-foot .legal .credit{margin-left:0}}
.site-foot{display:block}