/* Shared foundation for solar-system.html — the same tokens and primitives as the top page
   (assets/afterhours.css). Loaded first; section stylesheets build on these. */
:root{--night:#070b13;--surface:#101621;--white:#ecf1f0;--muted:#919aa9;--line:#ffffff24;--lime:#d9f56c;--violet:#bca5ff;--blue:#8ed8ff;--gold:#e6c797;--sun:#f5cb79;
  --display:"Chakra Petch",sans-serif;--mono:"Space Mono",monospace;--body:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;--ease:cubic-bezier(.19,1,.22,1);
  --layout-gutter:clamp(20px,4vw,64px);--rail:1600px;color-scheme:dark;
  /* inset that lines full-bleed content up with the 1600px rail (use in padding-inline / left / right) */
  --rail-inset:max(var(--layout-gutter),calc((100% - var(--rail)) / 2));
  /* The sticky header's real height (border included). html's scroll-padding uses it with no extra gap, so an
     in-page jump puts the target's top exactly on the header's hairline. Parts use it for "one screen below the
     header" heights. 100px ≥2400, 73px ≤800, 56px on landscape phones (bottom of this file). */
  --header-h:86px}
@media(min-width:2400px){:root{--header-h:100px}}
@media(max-width:800px){:root{--header-h:73px}}
::selection{background:var(--lime);color:var(--night)}
.lime-text{color:var(--lime)}.violet-text{color:var(--violet)}.blue-text{color:var(--blue)}.gold-text{color:var(--gold)}

/* Chapter heading: <div class="chapter-heading reveal"><span class="overline"><span class="chapter-number">02</span> THE OBSERVATORY</span><span class="chapter-category">…</span></div> */
.chapter-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px;gap:25px}
.chapter-heading .overline{font:400 10px var(--mono);letter-spacing:.1em;color:#cbd4d6}
.chapter-number{font:400 12px var(--mono);color:var(--lime);margin-right:16px}
.chapter-category{font:400 9px var(--mono);color:#8b97a6;letter-spacing:.1em;text-align:right}
.section-kicker{font:400 10px var(--mono);letter-spacing:.12em}

/* Buttons (exact top-page recipes) */
.space-button{display:inline-flex;align-items:center;justify-content:center;gap:26px;font-size:12px;font-weight:700;padding:16px 22px;min-height:52px;border:1px solid transparent;transition:transform .3s var(--ease),box-shadow .3s,background .3s;border-radius:2px;position:relative;overflow:hidden}
.space-button>span{font-size:21px;line-height:1}
.space-button:hover{transform:translateY(-3px);box-shadow:0 0 30px #d9f56c23}
.lime-button{background:var(--lime);color:#111b0b}
.glass-button{display:inline-flex;align-items:center;gap:13px;background:#070b1340;border:1px solid #c5edff59;border-radius:30px;color:#ecfaff;font-size:11px;padding:12px 19px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,border-color .3s}
.glass-button:hover{background:#8ed8ff22;border-color:#cdf3ff}

/* Reveal on scroll (body.js-on is added by assets/solar-system.js) */
.js-on .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-on .reveal.in-view{opacity:1;transform:none}

/* Motion contract */
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) *,html:not([data-motion=on]) *::before,html:not([data-motion=on]) *::after{animation:none!important;transition:none!important}html:not([data-motion=on]) .reveal{opacity:1;transform:none}html:not([data-motion=on]){scroll-behavior:auto}}
@media(max-width:800px){.chapter-heading{gap:12px}.chapter-heading .overline{font-size:9px}.chapter-number{margin-right:10px;font-size:11px}.chapter-category{font-size:8px;max-width:150px;line-height:1.8}.space-button{font-size:11px;padding:14px 18px}}

/* ── Base + shared primitives (added by the shell). Loaded first, so part stylesheets can override. ── */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;overflow-x:clip;background:var(--night);color:var(--white);font:400 14px/1.8 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Content rail (same as the top page's responsive-layout.css) */
.space-shell{width:100%;max-width:1728px;margin-inline:auto;padding-inline:var(--layout-gutter)}
.overline{font:400 10px var(--mono);letter-spacing:.1em}
/* Round icon toggle (motion Ⅱ/▷) */
.small-button{display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;padding:0;line-height:1;background:none;color:var(--white);font-size:12px;transition:border-color .2s,background .2s}
.small-button:hover{border-color:#d9f56c99;background:#d9f56c10}
/* Skip link */
.skip{position:fixed;top:-90px;left:10px;background:var(--lime);color:var(--night);padding:12px 16px;font-size:12px;font-weight:700;z-index:100}
.skip:focus{top:10px}
/* Status dot (lime, as on the top page) */
.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px #d9f56c70;flex:none}
/* Tabular display numerals */
.numeral{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media(max-width:800px){.small-button{width:27px;height:27px;font-size:10px}}
/* Landscape phones (844×390, 932×430…): a slimmer header so it doesn't take a fifth of the screen. */
@media (orientation:landscape) and (max-height:500px){:root{--header-h:56px}}