/* ═══════════════════════════════════════════════
   STAR-ASTRO — site styles
   Dark space theme; extends the iss-tracker-widget
   palette with the Star-Astro logo accents.
   ═══════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────── */
:root {
  --bg-0: #07090b;   /* deep space — .hero-earth's paint-out dissolves into this */
  --bg-1: #101419;
  --bg-2: #151a20;
  --gold: #ffe9aa;
  --gold-dim: #a89860;
  --gold-faint: #8a7a55;
  --pink: #ff5fa8;
  --pink-soft: #ff8fc4;
  --blue: #8ed8f0;
  --yellow: #fbf7ce;
  --text: #dfe6f5;
  --text-dim: #9aa7c7;
  --card: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 233, 170, 0.14);
  --line-soft: rgba(255, 233, 170, 0.08);
}

/* ── Base ─────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  /* Base fades into the Earth image's bottom space (--bg-0) so the hero's
     masked fade-out lands on the identical colour, then the rest of the page
     holds that same deep charcoal. Ambient glows carry the hero planet's
     palette: a cyan atmosphere glow at the top right, a slate cloud tint on
     the left, and a whisper of warm glow rising from below. */
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(120, 200, 225, 0.14), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(58, 72, 84, 0.22), transparent 65%),
    radial-gradient(1000px 520px at 50% 112%, rgba(255, 170, 90, 0.05), transparent 70%),
    linear-gradient(180deg, #0b0e11 0%, var(--bg-0) 35%, var(--bg-0) 100%);
  background-attachment: fixed;
  font: 400 16px/1.65 "Jost", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
::selection { background: rgba(255, 95, 168, 0.4); color: #fff; }
:focus-visible { outline: 2px solid var(--pink-soft); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--pink); color: #fff;
  padding: 8px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13px;
  transition: top 0.2s;
}
.skip:focus { top: 12px; }

/* ── Sky layers ───────────────────────────────── */
/* Root-level decorative layers, ordered bottom → top. All sit below <main>
   (z-index 1) and the sticky nav (z-index 50), so no sky graphic ever
   overlaps real content. Layering mirrors real space: stars sit behind the
   planet, meteors burn between the observer and the planet. */
.stars   { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.meteors { position: fixed; inset: 0; z-index: 0;  pointer-events: none; overflow: hidden; }
/* Earth — decorative planet backdrop starting AT the BOTTOM of the sticky
   glass nav (the strip's top edge sits on the bar's lower edge — 162px
   at-top state on desktop, 96px stacked state on mobile — see `top` below),
   so the backdrop-blur never frosts the planet; only the starfield shows in
   the band above it. The source photo
   (hero-earth.png, 1896×1896 transparent canvas — built from
   assets/earth blue nobg.png, a 3456×2188 night-side render whose frame
   clipped the halo at the top and the globe's lower quarter; the halo is
   feathered there, the disk box-downscaled ÷2, then area-resampled ×0.549
   onto the canvas at (−4, 286) so it sits exactly where the previous render
   did) is a dark Earth dead-centre, its opaque disk spanning ≈68% of the
   canvas — a luminous blue atmosphere crescent arcing over the top limb,
   faint sunlit terrain below it, a night side melting into the page's
   near-black sky, and a semi-transparent halo sprinkled with baked-in
   stars. The transparent canvas is the planet's size knob under `cover`
   (the earlier 1422×1422 square put it across ≈80% of the viewport).
   `center 22% /
   cover` on a 1440×600 strip shows the top ≈41% band of the canvas, so the
   planet reads across ≈two-thirds of the width, its bright crescent
   cresting ≈150px below the strip's top edge (the faint halo breathes in
   ≈70px down — the starfield gap under the nav's bottom border) while the
   lower half sinks out of frame; narrow portrait viewports see the whole
   globe, the render's frame-clipped lower edge hiding inside the paint-out.
   Physics, unchanged: stars may
   never show through the planet,
   so the strip's bottom is painted out with an OPAQUE var(--bg-0) gradient
   (starting at 60%, so the lit limb reads first) that dissolves the
   planet into the body gradient's identical colour. The photo's space is
   transparent, so the page starfield (.stars, z -2) shows through it around
   the planet and stays continuous; no side feathers or star mask are needed.
   A faint top tint softens the strip's top edge so the faint outer halo
   never cuts off hard against the sky.
   Meteors (.meteors, z 0) streak over the image. */
.hero-earth {
  position: absolute;                 /* root-level: containing block = the page */
  top: 162px;                         /* bottom edge of the 3× at-top nav (36px pad +
                                         90px big logo + 36px pad = the 162px
                                         min-height) — the strip starts at the menu
                                         bar's lower edge, not behind it */
  left: 0; right: 0;
  height: min(66vh, 600px);
  z-index: -1;
  pointer-events: none;
  /* Overlay stack, top → bottom. rgba(7, 9, 11, …) is var(--bg-0) at reduced
     alpha — CSS can't nest a hex token inside rgba(), so the literals mirror
     the token and must be kept in sync with it. */
  background:
    /* bottom paint-out — the planet's lower quarter dissolves into the page */
    linear-gradient(to bottom, rgba(7, 9, 11, 0) 60%, var(--bg-0) 96%),
    /* top tint — deepens the sky band under the glass nav */
    linear-gradient(to bottom, rgba(7, 9, 11, 0.35) 0%, rgba(7, 9, 11, 0) 22%),
    url("../assets/hero-earth.png") center 22% / cover no-repeat;
}
.star {
  position: absolute; border-radius: 50%;
  background: #fff; opacity: 0.2;
  animation: twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
.star-lg { box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.75); }
@keyframes twinkle { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.95; } }
/* Meteors — sporadic streaks spawned by js/site.js with per-element custom
   properties. Physically modelled: straight, constant-velocity path with the
   trail aligned to the velocity vector, glowing head leading, ionisation
   ramp-up, ablation fade and burn-out before the path ends. */
.meteor {
  --c1: 255, 255, 255;
  position: absolute;
  top: var(--y0); left: var(--x0);
  width: var(--len, 110px); height: var(--thick, 2px);
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(to left,
    rgba(var(--c1), 0.95) 0%,
    rgba(var(--c1), 0.38) 38%,
    transparent 82%);
  animation: meteor-fly var(--dur, 0.9s) linear forwards;
}
.meteor::after {                         /* glowing head at the leading end */
  content: ""; position: absolute; right: -2px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c1), 0.98), rgba(var(--c1), 0) 70%);
}
.meteor-green { --c1: 168, 255, 196; }
.meteor-fire  { --c1: 255, 214, 170; animation-name: meteor-burst; }
@keyframes meteor-fly {
  0%   { opacity: 0;    transform: rotate(var(--ang)) translate(0); }
  10%  { opacity: var(--op, 0.8); }
  65%  { opacity: calc(var(--op, 0.8) * 0.4); }
  92%  { opacity: 0; }
  100% { opacity: 0;    transform: rotate(var(--ang)) translate(var(--dist, 40vw)); }
}
/* Fireball variant — same straight constant-speed path, terminal flare */
@keyframes meteor-burst {
  0%   { opacity: 0;    transform: rotate(var(--ang)) translate(0); }
  8%   { opacity: var(--op, 1); }
  50%  { opacity: calc(var(--op, 1) * 0.6); }
  80%  { opacity: var(--op, 1); }
  90%  { opacity: calc(var(--op, 1) * 0.4); }
  100% { opacity: 0;    transform: rotate(var(--ang)) translate(var(--dist, 40vw)); }
}

/* ── Nav ──────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 54px;                        /* natural compact height (12px pad + 30px mark) */
  padding: 12px clamp(16px, 4vw, 44px);
  /* Menu-bar backdrop — assets/menu_bar_graphic.jpg, a clean 2304×1536 nebula
     render (it replaces the chroma-corrupted generated_image (17) that made
     the "messed up" colours; the de-chrome `color`-blend layer goes with it —
     the JPEG's true palette shows. Follows the hero-earth.png pattern of
     bespoke bar assets living in assets/, referenced directly from here
     rather than through the gallery tier system). Layers, top → bottom: a
     vertical glass tint whose rgba literals mirror the old flat 0.72 glass
     and must keep tracking it, then the photo. `center bottom / cover` crops the shown band, pinned to the render's bottom edge: ≈17% of the picture on the 3× at-top 162px desktop bar,
     ≈4% on the 54px compact bar, and ~69% / ~37% respectively once the
     phone's stacked bar fills more of the height (phones also crop the photo
     horizontally to its centre — keep the interesting structure centred).
     The backdrop-filter blur below still frosts page content through the
     tint's translucent parts. */
  background:
    linear-gradient(to bottom, rgba(12, 15, 18, 0.86), rgba(12, 15, 18, 0.64)),
    url("../assets/menu_bar_graphic.jpg") center bottom / cover no-repeat;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: min-height 0.45s ease, padding 0.45s ease;
}
/* 3× “at the top” state — js/site.js toggles .is-top while the page sits at
   scroll position 0 and drops it as soon as scrolling starts. */
.site-nav.is-top {
  min-height: 162px;                       /* 3 × 54px */
  padding: 36px clamp(16px, 4vw, 44px);    /* 3 × 12px */
  flex-wrap: wrap;
}
.brand { position: relative; display: inline-flex; align-items: center; text-decoration: none; }
.brand svg { filter: drop-shadow(0 0 8px rgba(251, 247, 206, 0.35)); }
.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  transition: opacity 0.4s ease;
}
/* Big hero logo, shown only in the 3× state (crossfades with .brand-mark).
   It reuses the glow filters defined in the hero logo's <defs> below. */
.brand-logo {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  /* 1.0469× the old width/30vw keeps the artwork (1280×280 of the padded
     1340×400 box) at the same 90px height; the extra box is glow fade-out */
  width: min(430px, 31.4vw);
  height: auto; aspect-ratio: 1340 / 400;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.site-nav.is-top .brand-mark { opacity: 0; }
.site-nav.is-top .brand-logo { opacity: 1; visibility: visible; }
.brand-name {
  font: 500 15px/1 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.32em;
  color: transparent;
  -webkit-text-stroke: 1px var(--pink-soft);
  text-shadow: 0 0 14px rgba(255, 95, 168, 0.45);
  white-space: nowrap;
}
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .brand-name { color: var(--pink); }
}
.nav-links {
  display: flex; align-items: center; gap: clamp(12px, 2.6vw, 28px);
}
.nav-links a {
  color: var(--yellow); text-decoration: none;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.25s, text-shadow 0.25s;
}
/* Hover — the logo's neon pink: the wordmark's --pink stroke plus the same
   ~14px halo .brand-name's text-shadow gives, so a hovered link glows like
   the logo does. */
.nav-links a:hover {
  color: var(--pink);
  text-shadow: 0 0 14px rgba(255, 95, 168, 0.45);
}
.nav-links a[aria-current="page"] { color: var(--pink-soft); }
/* Right-hand column — menu links with the Clear Dark Sky chart beneath */
.nav-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.chart-link {
  display: block; line-height: 0;
  width: fit-content; align-self: flex-end;   /* never wider than its thumbnail */
}
.chart-link img {
  /* cs0 thumbnail native 487×13 (a two-row forecast strip) — scale by width
     so the real aspect ratio holds: ≈13px tall at 504px wide (40% + 20%
     larger than the original 300px; pixelated keeps the colour blocks crisp
     through the slight 1.03× upscale). */
  width: min(504px, 43vw); height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--line-soft); border-radius: 6px;
}
/* Home-page bar only (class present just in index.html): the chart rides the
   3× at-top state and collapses with the bar on scroll. max-height — not
   height: auto — so the unfurl animates in step with the bar's 0.45s ease. */
.chart-collapsible {
  max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.4s ease, visibility 0.4s;
}
.site-nav.is-top .chart-collapsible { max-height: 80px; opacity: 1; visibility: visible; }
/* Keep the hero fitting the viewport under the taller bar */
.site-nav.is-top + main .hero { min-height: calc(100vh - 172px); }

/* ── Hero ─────────────────────────────────────── */
main { position: relative; z-index: 1; }   /* keeps every section above the sky layers */
.hero {
  min-height: calc(100vh - 64px);
  transition: min-height 0.45s ease; /* pairs with the 3× nav state */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative;
  padding: 48px 20px 56px;
}
/* 1.0469× the old width — artwork size unchanged under the padded viewBox */
.hero .logo { width: min(900px, 98.4vw); height: auto; }
/* Animated hero logo — the SMIL SVG from assets/star-astro-animated-svg.html
   pasted inline in index.html, per assets/README.txt's recommended embed:
   no iframe, no bundler, no JavaScript — it plays on load, then holds a
   steady glow. Its own opaque #040405 background rect is omitted and the
   viewBox is cropped to the artwork, so the comet, star and neon lettering
   float over the starfield instead of sitting in a video-box frame. */
.hero .starastro {
  display: block;
  width: min(760px, 94vw);               /* keeps the old embed's footprint */
  height: auto;
  margin-inline: auto;
}
/* Static SVG is the reduced-motion fallback only (SMIL can't be paused by
   CSS), and it still hosts the lg-* glow filters the nav's .brand-logo
   references — defs stay usable even while the element is display:none. */
.hero .logo { display: none; }
.logo-word {
  font-family: "Jost", "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  font-weight: 400;
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.8;
  filter: url(#lg-pink);
}
.hero .eyebrow { margin-top: 10px; }
.tagline {
  max-width: 600px; margin: 10px auto 0;
  color: var(--text-dim);
  font-size: clamp(15px, 2vw, 18px);
  letter-spacing: 0.04em;
}
/* Daily quote — one entry per calendar day, picked by js/site.js from
   js/hero-quotes.js. Larger and brighter than the tagline so the
   quotation carries the hero. (.tagline stays for the other pages.) */
.hero-quote {
  max-width: 44rem;
  margin: 26px auto 0;
  padding: 28px clamp(20px, 4vw, 40px) 26px;
  position: relative;
  /* Near-transparent panel — a whisper of dark tint over the sky layers */
  background: rgba(16, 20, 25, 0.08);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 233, 170, 0.05);
}
@media (max-width: 720px) {
  .hero-quote { padding: 22px 20px 20px; border-radius: 14px; }
}
.hero-quote .hq-text {
  margin: 0;
  color: var(--text);
  font: 300 clamp(14px, 2vw, 19px)/1.55 "Jost", "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 0 26px rgba(255, 233, 170, 0.14);
}
.hero-quote .hq-attr {
  margin-top: 16px;
  color: var(--gold-dim);
  font: 600 11.5px/1.4 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hero-quote .hq-attr cite { font-style: normal; color: var(--gold); }
/* Gentle entrance — skipped for reduced-motion visitors */
@media (prefers-reduced-motion: no-preference) {
  .hero-quote { animation: hq-in 0.9s ease 0.15s backwards; }
}
@keyframes hq-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--gold-dim);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.5em; text-transform: uppercase;
}

/* ── Buttons ──────────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  border-radius: 999px; padding: 13px 28px;
  font: 600 12.5px/1 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s, color 0.25s;
}
.btn-primary {
  color: #fff; border: 0;
  background: linear-gradient(135deg, #ff7cb6, #e0418a 60%, #c23d82);
  box-shadow: 0 4px 22px rgba(255, 95, 168, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255, 95, 168, 0.5); }
.btn-ghost {
  color: var(--gold);
  border: 1px solid rgba(255, 233, 170, 0.35);
  background: rgba(255, 233, 170, 0.05);
}
.btn-ghost:hover { background: rgba(255, 233, 170, 0.14); transform: translateY(-2px); }
.btn-sm { padding: 8px 16px; font-size: 11px; }

.scroll-cue {
  position: absolute; bottom: 22px; left: 50%;
  width: 11px; height: 11px; margin-left: -5px;
  border-right: 2px solid rgba(255, 233, 170, 0.55);
  border-bottom: 2px solid rgba(255, 233, 170, 0.55);
  transform: rotate(45deg);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { opacity: 0.3; transform: rotate(45deg) translate(0, 0); }
  50%      { opacity: 1;   transform: rotate(45deg) translate(5px, 5px); }
}

/* ── Sections ─────────────────────────────────── */
.section { max-width: 1280px; margin: 0 auto; padding: 76px clamp(16px, 4vw, 44px); }
.section-head { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.section-head h2 {
  margin: 4px 0 12px;
  color: var(--gold);
  font: 300 clamp(26px, 4vw, 40px)/1.2 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255, 233, 170, 0.18);
}
.section-head p { margin: 0; color: var(--text-dim); font-size: 15px; letter-spacing: 0.03em; }

/* ── Filters ──────────────────────────────────── */
.filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.chip {
  cursor: pointer;
  padding: 9px 20px; border-radius: 999px;
  background: rgba(255, 233, 170, 0.05);
  border: 1px solid rgba(255, 233, 170, 0.18);
  color: var(--text-dim);
  font: 500 11.5px/1 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: all 0.25s;
}
.chip:hover { color: var(--gold); border-color: rgba(255, 233, 170, 0.4); }
.chip.active {
  color: #fff;
  background: linear-gradient(135deg, #ff8fc4, #ef4f97);
  border-color: transparent;
  box-shadow: 0 0 20px rgba(255, 95, 168, 0.4);
}

/* ── Gallery ──────────────────────────────────── */
.gallery-grid { columns: 280px 3; column-gap: 18px; }
.g-item {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 18px;
  border-radius: 14px; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-soft);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.g-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 143, 196, 0.35);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 95, 168, 0.12);
}
.g-item.hidden { display: none; }
.g-thumb {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: #0f1216;
  cursor: zoom-in; aspect-ratio: var(--ar, 1);
}
.g-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: linear-gradient(160deg, #141920, #0f1216);
}
.g-zoom {
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 18px; line-height: 1;
  background: rgba(255, 95, 168, 0.85);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.25s, transform 0.25s;
}
.g-item:hover .g-zoom, .g-thumb:focus-visible .g-zoom { opacity: 1; transform: scale(1); }
.g-item figcaption { padding: 12px 15px 14px; border-top: 1px solid var(--line-soft); }
.g-item figcaption h3 {
  margin: 0; color: var(--gold);
  font: 500 15px/1.3 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.08em;
}
.g-item figcaption p {
  margin: 3px 0 0; color: var(--gold-faint);
  font-size: 12px; letter-spacing: 0.06em;
}

/* ── Gallery showcase (rotating hero) ─────────── */
/* Shared by the home page hero and the compact hero on gallery.html;
   both are driven by the rotator in js/site.js. */
.gs-stage {
  --gs-h: 72vh;
  position: relative;
  min-height: var(--gs-h);
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  background: #0f1216;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.gs-sub { padding: 30px clamp(16px, 4vw, 44px) 0; }
.gs-sub .gs-stage { --gs-h: 48vh; }

.gs-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.3s ease, transform 8s linear;
  will-change: opacity, transform;
}
.gs-slide.is-active { opacity: 1; transform: scale(1); }

.gs-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 9, 11, 0.35), rgba(7, 9, 11, 0) 30%),
    linear-gradient(180deg, rgba(7, 9, 11, 0) 46%, rgba(7, 9, 11, 0.82) 100%);
}
.gs-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 24px clamp(18px, 3vw, 34px);
}
/* compact hero: title block centred over the rotation */
.gs-sub .gs-overlay {
  inset: 0; height: 100%;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 20px;
}
.gs-sub .gs-overlay .tagline { max-width: 620px; }
.gs-caption {
  margin: 0; color: var(--gold);
  font: 500 clamp(17px, 2.4vw, 24px)/1.25 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
.gs-caption.swap { animation: gs-cap 0.8s ease; }
@keyframes gs-cap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.gs-cta { flex-shrink: 0; }
.gs-dots {
  position: absolute; top: 16px; right: 16px;
  display: flex; gap: 8px;
}
.gs-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 233, 170, 0.5);
  background: transparent; cursor: pointer;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.gs-dot:hover { transform: scale(1.3); }
.gs-dot.active {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255, 233, 170, 0.6);
}

/* ── All-sky teaser ───────────────────────────── */
.teaser { padding-top: 8px; }
.tease-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: 32px clamp(20px, 3.5vw, 40px);
  border-radius: 18px; overflow: hidden; position: relative;
  border: 1px solid rgba(142, 216, 240, 0.22);
  background:
    radial-gradient(500px 200px at 90% 0%, rgba(142, 216, 240, 0.12), transparent 70%),
    linear-gradient(120deg, rgba(255, 95, 168, 0.10), rgba(142, 216, 240, 0.07) 55%, rgba(251, 247, 206, 0.05));
}
.tease-card h3 {
  margin: 2px 0 8px; color: var(--gold);
  font: 400 24px/1.2 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.tease-card p { margin: 0; color: var(--text-dim); max-width: 600px; font-size: 14.5px; }

/* ── ISS widget section ───────────────────────── */
.widget-shell { max-width: 1240px; margin: 0 auto; }
.credits {
  margin: 16px auto 0; max-width: 1240px; text-align: center;
  color: var(--gold-faint); font-size: 11.5px; letter-spacing: 0.08em;
}

/* ── About / footer ───────────────────────────── */
.about-body { max-width: 720px; margin: 0 auto; text-align: center; color: var(--text-dim); }
.about-body p { margin: 0 0 16px; font-size: 15.5px; }
.about-body a {
  color: var(--blue); text-decoration: none;
  border-bottom: 1px dotted rgba(142, 216, 240, 0.5);
}
.about-body a:hover { color: #c8ecfa; }
.about-sign { color: var(--gold) !important; letter-spacing: 0.2em; }

.site-footer {
  position: relative; z-index: 1;
  margin-top: 30px; padding: 36px 20px 42px; text-align: center;
  border-top: 1px solid var(--line-soft);
  background: rgba(9, 11, 13, 0.6);
}
/* Small full logo (arc + star + wordmark) shown above the copyright line.
   Its viewBox is padded around the artwork (1440×420 vs the artwork's own
   1280×280) so the wordmark's scaled-up pink glow fades out inside the box. */
.footer-logo {
  display: block; width: min(240px, 64vw); height: auto; aspect-ratio: 1440 / 420;
  margin: 0 auto 8px;
}
.site-footer p { margin: 10px 0 0; color: var(--text-dim); font-size: 13px; letter-spacing: 0.05em; }
.foot-credits { font-size: 11.5px !important; color: var(--gold-faint) !important; }
.foot-credits a { color: var(--gold-dim); text-decoration: none; }
.foot-credits a:hover { color: var(--gold); }

/* ── Lightbox ─────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 4vw, 40px);
  background: rgba(5, 7, 9, 0.93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; max-width: min(1240px, 96vw); display: flex; flex-direction: column; align-items: center; }
.lb-stage img {
  max-width: 100%; max-height: 78vh;
  border-radius: 10px;
  box-shadow: 0 12px 70px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 95, 168, 0.08);
  background: #0f1216;
}
.lb-stage figcaption { text-align: center; margin-top: 14px; }
.lb-stage figcaption strong {
  display: block; color: var(--gold);
  font: 500 16px/1.3 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.12em;
}
.lb-stage figcaption span {
  display: block; margin-top: 3px;
  color: var(--text-dim); font-size: 13px; letter-spacing: 0.05em;
}
.lb-btn {
  position: fixed; z-index: 101;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 233, 170, 0.25);
  background: rgba(13, 16, 18, 0.75); color: var(--gold);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.25s, transform 0.25s;
}
.lb-btn:hover { background: rgba(255, 95, 168, 0.25); transform: scale(1.06); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 14px; top: 50%; margin-top: -23px; }
.lb-next { right: 14px; top: 50%; margin-top: -23px; }
.lb-count {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: var(--gold-faint); font-size: 12px; letter-spacing: 0.2em;
}
/* "Load full quality" — swaps the lightbox image for the bigger file
   (the untouched original, or a capped re-encode for oversized sources) */
.lb-hq { margin-top: 12px; }
.lb-hq.is-loading { opacity: 0.75; cursor: progress; }
.lb-hq.is-loading::after {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 9px;
  border: 2px solid rgba(255, 233, 170, 0.35); border-top-color: var(--gold);
  border-radius: 50%; vertical-align: -1px;
  animation: lb-spin 0.8s linear infinite;
}
.lb-hq.is-loaded {
  cursor: default;
  color: var(--gold-dim);
  border-color: rgba(255, 233, 170, 0.18);
  background: rgba(255, 233, 170, 0.03);
}
@keyframes lb-spin { to { transform: rotate(360deg); } }
body.lb-open { overflow: hidden; }

/* ── All-sky page ─────────────────────────────── */
.hero-sub { min-height: auto; padding: 72px 20px 8px; }
.page-title {
  margin: 6px 0 12px;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--pink-soft);
  text-shadow: 0 0 30px rgba(255, 95, 168, 0.4);
  font: 400 clamp(30px, 6vw, 54px)/1.15 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.22em; text-transform: uppercase;
}
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .page-title { color: var(--pink); }
}
.live-card {
  max-width: 980px; margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.45);
}
.live-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.live-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 12px/1 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-dim);
}
.live-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #5a5f78; transition: background 0.3s; }
.live-badge.is-live { color: #7dffb0; }
.live-badge.is-live .dot { background: #00e676; box-shadow: 0 0 9px #00e676; animation: pulse 2s ease-in-out infinite; }
.live-badge.is-offline { color: #ffcf6e; }
.live-badge.is-offline .dot { background: #ffb74d; box-shadow: 0 0 8px rgba(255, 183, 77, 0.8); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.live-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.live-clock {
  color: var(--gold-faint); font-size: 12px; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.live-frame {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.live-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.live-frame.is-offline img { visibility: hidden; }
.live-frame:fullscreen { aspect-ratio: auto; }
.live-frame:-webkit-full-screen { aspect-ratio: auto; }
.live-offline {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 28px; text-align: center;
  background: radial-gradient(600px 300px at 50% 40%, rgba(26, 31, 36, 0.92), rgba(7, 9, 11, 0.97));
  color: var(--text-dim); font-size: 14px;
}
.live-offline strong { color: var(--gold); font-weight: 500; letter-spacing: 0.1em; }
.live-offline code, .tl-empty code {
  color: var(--blue);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 7px; border-radius: 6px; font-size: 12.5px;
}
.live-foot {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: space-between;
  padding: 11px 18px;
  color: var(--gold-faint); font-size: 12px; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* Timelapses */
.tl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.tl-card {
  border-radius: 14px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line-soft);
  transition: transform 0.35s, box-shadow 0.35s;
}
.tl-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5); }
.tl-featured { grid-column: 1 / -1; }
.tl-video { aspect-ratio: 16 / 9; background: #000; }
.tl-featured .tl-video { aspect-ratio: 21 / 9; }
.tl-video video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.tl-meta { padding: 13px 16px 15px; border-top: 1px solid var(--line-soft); }
.tl-meta h3 {
  margin: 0; color: var(--gold);
  font: 500 15px/1.3 "Jost", "Century Gothic", sans-serif;
  letter-spacing: 0.08em;
}
.tl-meta p { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; }
.tl-meta time {
  display: inline-block; margin-top: 6px;
  color: var(--gold-faint); font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.tl-empty {
  max-width: 660px; margin: 0 auto;
  padding: 34px 28px; text-align: center;
  border: 1px dashed rgba(255, 233, 170, 0.3); border-radius: 16px;
  color: var(--text-dim); font-size: 14.5px;
}
.tl-empty strong {
  display: block; margin-bottom: 6px;
  color: var(--gold); font-weight: 500; letter-spacing: 0.08em;
}
.tl-empty pre {
  margin: 16px 0 0; padding: 14px 16px; text-align: left;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-soft); border-radius: 10px;
  color: #cfe3ff; font-size: 12.5px; line-height: 1.6; overflow-x: auto;
}

/* ── Reveal ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 720px) {
  .site-nav { flex-direction: column; gap: 8px; padding-bottom: 10px; }
  /* 3× at-top state, scaled for the stacked layout */
  .site-nav.is-top { min-height: 0; padding: 24px 16px 20px; }
  /* No room for the chart in the phone's stacked bar — links only */
  .chart-link { display: none; }
  /* Desktop anchors the big logo to the brand's left edge; on the stacked bar
     the brand itself is centred, so re-centre the logo on the brand too —
     otherwise it hangs off to the right of the page centre. */
  .site-nav.is-top .brand-logo {
    left: 50%; transform: translate(-50%, -50%);
    width: min(335px, 75.4vw);             /* 1.0469× — artwork ≈ old 72vw */
  }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 12px; letter-spacing: 0.1em; }
  /* stacked at-top bar ≈96px tall: 24px pad + 30px mark row + 8px gap +
     ~14px links + 20px pad — keep the strip starting at its lower edge */
  .hero-earth { top: 96px; }
  .live-head { flex-direction: column; align-items: flex-start; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-btn { width: 40px; height: 40px; font-size: 18px; }
  /* showcase */
  .gs-stage { --gs-h: 56vh; border-radius: 14px; }
  .gs-sub .gs-stage { --gs-h: 42vh; }
  .gs-dots { top: 12px; right: 12px; gap: 7px; }
  .gs-overlay { padding: 16px 14px; }
}

/* ── Reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .star, .meteor, .scroll-cue, .live-badge .dot { animation: none !important; }
  .hero .starastro { display: none !important; }  /* SMIL can't be paused — static .logo carries the hero */
  .hero .logo { display: block; }                 /* static fallback (also hosts the nav's lg-* defs) */
  .reveal { opacity: 1; transform: none; transition: none; }
  .site-nav, .hero, .brand-mark, .brand-logo { transition: none !important; }
  .btn, .g-item, .tl-card, .lb-btn, .chip { transition: none; }
  .gs-slide { transition: none; }
  .gs-caption.swap, .lb-hq.is-loading::after { animation: none; }
}