/* ============================================================
   STARMAP — styles.css
   ------------------------------------------------------------
   Sections:
     1. Tokens (CSS variables)
     2. Reset & base
     3. Layout primitives
     4. Top bar
     5. Hero
     6. Dividers
     7. Letter
     8. Section heads
     9. Catalogue grid
    10. Live data sources
    11. Three moments
    12. Heritage
    13. Charts
    14. Contact form
    15. Promise band
    16. Footer
    17. Reveal animations
    18. Responsive breakpoints
    19. Reduced motion / print
   ============================================================ */


/* ===== 1. Tokens ============================================ */
:root {
  --bg:           #0d1729;
  --bg-2:         #111c33;
  --surface:      #16223e;
  --surface-2:    #1c2a4a;
  --ink:          #ece9df;
  --ink-2:        #b6b7c2;
  --ink-3:        #7a8198;
  --rule:         #233052;
  --rule-2:       #2f3d65;
  --blue:         #6aa8ff;
  --blue-soft:    #3d6ec9;
  --red:          #e6395d;
  --cream:        #f3eedd;
  --gold:         #d9b774;

  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', monospace;

  --wrap:         1180px;
  --pad:          60px;
}


/* ===== 2. Reset & base ====================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }


/* ===== 3. Layout primitives ================================= */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 90px var(--pad);
}


/* ===== 4. Top bar =========================================== */
.topbar {
  width: 100%;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 5;
}
.topbar-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mark {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  font-weight: 500;
  font-style: italic;
  color: var(--cream);
}
.mark::before {
  content: "\2726";
  color: var(--gold);
  margin-right: 10px;
  font-size: 14px;
  vertical-align: 2px;
  font-style: normal;
}
.top-meta {
  display: flex;
  gap: 36px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.top-meta b { color: var(--ink-2); font-weight: 500; }


/* ===== 5. Hero ============================================== */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background: #000;
}
/* Photo sizing applies to the background image only, not the centered logo. */
.hero-photo > img:not(.hero-logo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Centered logo overlay on the hero photo.
   The photo is now full viewport width, so the cap allows for larger displays. */
.hero-photo .hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 25%, 480px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.hero-photo-vignette {
  display: none;
  /* Previous overlay; restore by removing the display:none above:
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(13,23,41,0.45) 100%),
    linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
  */
}

.hero-text {
  text-align: center;
  padding: 80px var(--pad) 90px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 32px;
}
.eyebrow .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  margin: 0 14px;
  vertical-align: 3px;
}
.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 9.5vw, 120px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--cream);
  margin: 0 auto;
  max-width: 900px;
}
.title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
/* Hero subtitle — sits between the H1 and the lede.
   Italic Cormorant, larger than the lede but quieter than the H1. */
.subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.3;
  color: var(--cream);
  margin: 22px auto 0;
  max-width: 720px;
}
.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 660px;
  margin: 36px auto 0;
}
.cta-row {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.appstore {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.appstore:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.appstore img {
  display: block;
  height: 52px;
  width: auto;
}
.price-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}


/* ===== 6. Dividers ========================================== */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 70px var(--pad);
  color: var(--rule-2);
}
.divider .line { width: 120px; max-width: 24vw; height: 1px; background: var(--rule); }
.divider .glyph { font-family: var(--font-display); font-style: italic; color: var(--ink-3); font-size: 18px; }


/* ===== 7. Letter ============================================ */
.letter {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  padding-bottom: 20px;
}
.letter .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.letter .label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.letter p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 22px;
}
.letter p.last-line {
  font-style: italic;
  color: var(--gold);
  margin-top: 28px;
}
.letter .sig {
  margin-top: 36px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-2);
}
.letter .sig small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}
.qg {
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.18;
  position: absolute;
  top: -20px;
  left: -40px;
  font-style: italic;
  pointer-events: none;
}


/* ===== 8. Section heads ===================================== */
.section-head {
  text-align: center;
  margin-bottom: 70px;
}
.section-head .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cream);
  max-width: 760px;
  margin: 0 auto;
}
.section-head h2 em { font-style: italic; color: var(--gold); }
.section-head .deck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--ink-2);
  max-width: 580px;
  margin: 22px auto 0;
  line-height: 1.5;
}


/* ===== 9. Catalogue grid ==================================== */
.catalog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.cat-card {
  background: var(--bg);
  padding: 36px 32px 40px;
  transition: background 0.3s ease;
}
.cat-card:hover { background: var(--bg-2); }
.cat-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.cat-head .num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.2em;
}
.cat-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.cat-card ul { list-style: none; }
.cat-card li {
  font-size: 14px;
  color: var(--ink-2);
  padding: 8px 0;
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px dotted var(--rule);
}
.cat-card li:last-child { border-bottom: none; }
.cat-card li .qty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}
/* Modifier for qty values that are too long for a single line
   (e.g. "equatorial · local · ecliptic · galactic · supergalactic").
   Restores wrapping without losing the right-alignment. */
.cat-card li .qty.qty--wrap {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.cat-card li.note {
  border-bottom: none;
  color: var(--ink-3);
  font-style: italic;
  font-family: var(--font-display);
  font-size: 15px;
  padding-top: 16px;
  display: block;
}


/* ===== 10. Live data sources ================================ */
.sources {
  margin-top: 70px;
  padding: 52px 56px 56px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
}
.sources-intro {
  max-width: 760px;
  padding-bottom: 36px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.sources-intro .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.sources-intro h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.18;
  color: var(--cream);
}
.sources-intro h4 em { font-style: italic; color: var(--gold); }
.sources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.src-card .name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--cream);
  margin-bottom: 6px;
}
.src-card .sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.src-card .desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}


/* ===== 11. Moments / capability gallery ===================== */
.moments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
}
.moments-six {
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 40px;
}
.moment .frame {
  aspect-ratio: 9 / 16;
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--rule-2);
  margin-bottom: 22px;
}
.moment .frame img { width: 100%; height: 100%; object-fit: cover; }
.moment .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.moment h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 12px;
}
.moment p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}


/* ===== 12. Heritage ========================================= */
.heritage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.heritage .frame-wide {
  background: var(--surface);
  border-radius: 36px;
  overflow: hidden;
  border: 1px solid var(--rule-2);
  max-width: 360px;
  justify-self: center;
  width: 100%;
}
.heritage .frame-wide img {
  display: block;
  width: 100%;
  height: auto;
}
.heritage-text .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.heritage-text h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  color: var(--cream);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.heritage-text h3 em { font-style: italic; color: var(--gold); }
.heritage-text p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 16px;
}
.heritage-text .lineage {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}


/* ===== 13. Charts =========================================== */

/* Tabs (CSS-only, driven by hidden radio inputs) */
.chart-tabs { position: relative; }
.chart-tab-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chart-tab-labels {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
}
.chart-tab-label {
  padding: 14px 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.chart-tab-label:hover { color: var(--ink-2); }

/* Active tab: gold underline, brighter text */
#hemi-n:checked  ~ .chart-tab-labels label[for="hemi-n"],
#hemi-eq:checked ~ .chart-tab-labels label[for="hemi-eq"],
#hemi-s:checked  ~ .chart-tab-labels label[for="hemi-s"] {
  color: var(--cream);
  border-bottom-color: var(--gold);
}

/* Panels — only the matching one is shown */
.chart-tab-panel { display: none; }
#hemi-n:checked  ~ .chart-tab-panels .chart-panel-n,
#hemi-eq:checked ~ .chart-tab-panels .chart-panel-eq,
#hemi-s:checked  ~ .chart-tab-panels .chart-panel-s {
  display: block;
}

/* Three theme columns inside a panel */
.theme-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}
.theme-col {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease;
}
.theme-col:hover { border-color: var(--rule-2); }
.theme-thumb {
  aspect-ratio: 16 / 11;
  border: 1px solid var(--rule-2);
  margin-bottom: 16px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-thumb svg,
.theme-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Light backdrop for the daylight theme so the white-bg PNG doesn't sit on black */
.theme-white .theme-thumb { background: var(--cream); }
.theme-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--cream);
  margin-bottom: 14px;
}

/* Hour links — 5 small download links per theme */
.hour-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hour-links li { margin: 0; }
.hour-links a {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--rule-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.hour-links a:hover {
  color: var(--cream);
  border-color: var(--gold);
  background: rgba(217, 183, 116, 0.06);
}

/* Bottom note */
.chart-note {
  margin-top: 32px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.55;
}


/* ===== 14. Contact form ===================================== */
.contact {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
}
.contact .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 22px;
}
.contact label {
  display: block;
  margin-bottom: 22px;
}
.contact label.full { display: block; }
.contact .lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.contact .lbl small {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-left: 6px;
}
.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 10px 0 12px;
  transition: border-color 0.2s ease;
}
.contact input:focus,
.contact textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.contact textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}
.contact .check { margin-top: 8px; }

/* Honeypot — visually hidden but not display:none (some bots skip those) */
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact .actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.contact .submit {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.contact .submit:hover {
  background: var(--gold);
  color: var(--bg);
}
.contact .submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.contact .hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
}
.contact .form-status {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  min-height: 1.2em;
}
.contact .form-status.ok       { color: var(--gold); }
.contact .form-status.err,
.contact .form-status.is-error { color: var(--red);  }

/* Success state — replaces the form after a valid submission */
.contact-success {
  padding: 48px 36px;
  border: 1px solid var(--rule-2);
  background: var(--bg-2);
  text-align: center;
}
.contact-success p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--cream);
  margin: 0;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.contact-success[hidden] { display: none; }


/* ===== 15. Promise band ===================================== */
.promise {
  padding: 60px 70px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
.promise h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 38px);
  color: var(--cream);
  margin-bottom: 28px;
}
.promise h3 em { font-style: italic; color: var(--gold); }
.promise-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 18px;
}
.promise-row .check {
  color: var(--gold);
  font-size: 20px;
  margin-bottom: 6px;
}
.promise-row .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}


/* ===== 16. Footer =========================================== */
.footer {
  margin-top: 110px;
  border-top: 1px solid var(--rule);
}
.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px var(--pad) 70px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.footer h5 {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
  font-size: 20px;
  margin-bottom: 10px;
}
/* Wordmark used in place of the footer's h5 brand text. */
.footer-logo {
  display: block;
  height: 32px;
  width: auto;
  margin-bottom: 14px;
}
.footer p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 300;
}
.footer .col-right { text-align: right; }
.footer .col-right > div { margin-bottom: 6px; }
.footer .muted { color: var(--ink-3); }

/* Language switcher — small, monospace, subtle, lives in the footer */
.lang-switch {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lang-switch a {
  text-decoration: none;
  color: inherit;
  padding: 0 0.4em;
  transition: color 0.2s ease;
}
.lang-switch a:hover { color: var(--cream); }
.lang-switch a.active {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--gold);
}
.lang-switch .sep { opacity: 0.35; padding: 0; }


/* ===== 17. Reveal animations =============================== */

/* ----- Scroll reveal: section appears as it enters viewport ----- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Staggered cascade: children of a revealed section appear one by one ----- */
.reveal-on-scroll .stagger,
.reveal-on-scroll.is-visible .cat-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-on-scroll.is-visible .stagger,
.reveal-on-scroll.is-visible .cat-card {
  opacity: 1;
  transform: translateY(0);
}
.reveal-on-scroll.is-visible .cat-card:nth-child(1),
.reveal-on-scroll.is-visible .stagger:nth-child(1) { transition-delay: 0.05s; }
.reveal-on-scroll.is-visible .cat-card:nth-child(2),
.reveal-on-scroll.is-visible .stagger:nth-child(2) { transition-delay: 0.15s; }
.reveal-on-scroll.is-visible .cat-card:nth-child(3),
.reveal-on-scroll.is-visible .stagger:nth-child(3) { transition-delay: 0.25s; }
.reveal-on-scroll.is-visible .cat-card:nth-child(4),
.reveal-on-scroll.is-visible .stagger:nth-child(4) { transition-delay: 0.35s; }
.reveal-on-scroll.is-visible .cat-card:nth-child(5),
.reveal-on-scroll.is-visible .stagger:nth-child(5) { transition-delay: 0.45s; }
.reveal-on-scroll.is-visible .cat-card:nth-child(6),
.reveal-on-scroll.is-visible .stagger:nth-child(6) { transition-delay: 0.55s; }

/* ----- Initial-load reveal for the hero text ----- */
.reveal-on-load {
  opacity: 0;
  transform: translateY(20px);
  animation: revealUp 1.2s ease 0.3s forwards;
}
@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ----- Hero photo: slow breathing zoom ----- */
.hero-photo > img:not(.hero-logo) {
  animation: heroBreathe 28s ease-in-out infinite alternate;
}
@keyframes heroBreathe {
  from { transform: scale(1.0); }
  to   { transform: scale(1.05); }
}

/* ----- Hero starfield overlaid on the photo ----- */
.hero-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  /* keep stars to the left half so they don't overlap the subject's face */
  -webkit-mask-image: linear-gradient(to right, white 0%, white 38%, transparent 56%);
          mask-image: linear-gradient(to right, white 0%, white 38%, transparent 56%);
}
.hero-stars circle { fill: #f3eedd; }

/* Ambient stars: very slow opacity drift, each offset so they don't blink together */
.hero-stars .ambient circle {
  opacity: 0.55;
  animation: ambientTwinkle 8s ease-in-out infinite;
}
.hero-stars .ambient circle:nth-child(2n)  { animation-delay: -2s; animation-duration: 11s; }
.hero-stars .ambient circle:nth-child(3n)  { animation-delay: -5s; animation-duration: 9s;  }
.hero-stars .ambient circle:nth-child(4n)  { animation-delay: -7s; animation-duration: 13s; }
.hero-stars .ambient circle:nth-child(5n)  { animation-delay: -3s; animation-duration: 7s;  }
@keyframes ambientTwinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

/* Twinkle stars: more visible, occasional bright flash */
.hero-stars .twinkle circle {
  opacity: 0.7;
  filter: drop-shadow(0 0 1.2px #f3eedd);
  animation: starFlash 6s ease-in-out infinite;
}
.hero-stars .twinkle circle:nth-child(2) { animation-delay: -1.5s; animation-duration: 7.5s; }
.hero-stars .twinkle circle:nth-child(3) { animation-delay: -3.2s; animation-duration: 5.5s; }
.hero-stars .twinkle circle:nth-child(4) { animation-delay: -4.8s; animation-duration: 8s;   }
.hero-stars .twinkle circle:nth-child(5) { animation-delay: -2.1s; animation-duration: 6.5s; }
@keyframes starFlash {
  0%, 100%   { opacity: 0.4; transform: scale(1); }
  48%, 52%   { opacity: 1;   transform: scale(1.4); }
}

/* ----- Section divider glyph: slow pulse like a beacon ----- */
.divider .glyph {
  animation: glyphPulse 5s ease-in-out infinite;
}
@keyframes glyphPulse {
  0%, 100% { opacity: 0.4;  text-shadow: 0 0 0   rgba(217,183,116,0); }
  50%      { opacity: 0.85; text-shadow: 0 0 12px rgba(217,183,116,0.45); }
}

/* ----- The gold word "free": one-shot starlight shimmer on hero load ----- */
.shimmer {
  background: linear-gradient(
    100deg,
    var(--gold)  0%,
    var(--gold) 35%,
    #fff8e6     50%,
    var(--gold) 65%,
    var(--gold) 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: shimmerSweep 2.4s ease 1.6s 1 forwards;
}
@keyframes shimmerSweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -40% 0; }
}

/* ----- App Store button: subtle glow pulse ----- */
.appstore { position: relative; }
.appstore::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(217, 183, 116, 0);
  animation: subtleGlow 4s ease-in-out infinite;
}
@keyframes subtleGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 183, 116, 0); }
  50%      { box-shadow: 0 0 28px 2px rgba(217, 183, 116, 0.18); }
}

/* ----- Catalogue card hover: stronger lift, blue catalog-selected glow ----- */
.cat-card {
  position: relative;
  transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  z-index: 0;
}
.cat-card:hover {
  background: var(--bg-2);
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(106, 168, 255, 0.18),
    0 0 24px -2px rgba(106, 168, 255, 0.12);
  z-index: 1;
}

/* ----- Moment frame hover: lift + tag highlight ----- */
.moment .frame {
  transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.moment:hover .frame {
  transform: translateY(-6px);
  border-color: var(--rule-2);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
}
.moment .tag {
  transition: color 0.3s ease;
}
.moment:hover .tag { color: var(--cream); }


/* ===== 18. Responsive breakpoints =========================== */

/* Tablets and small laptops */
@media (max-width: 1024px) {
  :root { --pad: 40px; }
  .catalog { grid-template-columns: repeat(2, 1fr); }
  .sources-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .moments { grid-template-columns: 1fr 1fr; gap: 48px 32px; }
  .moments-six { grid-template-columns: 1fr 1fr; gap: 56px 32px; }
  .heritage { gap: 48px; }
}

/* Phones */
@media (max-width: 768px) {
  :root { --pad: 24px; }

  /* Tighter vertical rhythm on phones */
  .wrap { padding: 56px var(--pad); }

  /* Topbar: stack and shrink */
  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px var(--pad);
  }
  .top-meta { gap: 18px; font-size: 10px; }

  /* Hero photo: stays 2:1 on mobile (no aspect-ratio override needed) */
  .hero-text { padding: 56px var(--pad) 64px; }
  .eyebrow { font-size: 10px; letter-spacing: 0.28em; }
  .eyebrow .dot { margin: 0 8px; }
  .cta-row { margin-top: 36px; flex-direction: column; gap: 16px; }

  /* Letter — pull the quotation glyph back into the visible area */
  .qg { left: -10px; top: -10px; font-size: 72px; }

  /* Sections */
  .section-head { margin-bottom: 48px; }
  .divider { padding: 50px var(--pad); }

  /* Catalogue: single column */
  .catalog { grid-template-columns: 1fr; }

  /* Live data sources */
  .sources { padding: 36px 28px; }
  .sources-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Moments: single column on phones */
  .moments, .moments-six { grid-template-columns: 1fr; gap: 48px; }
  .moment .frame { max-width: 320px; margin-left: auto; margin-right: auto; }

  /* Heritage: stack image on top */
  .heritage {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .heritage .frame-wide { order: -1; max-width: 280px; }

  /* Charts: single column */
  .theme-cols { grid-template-columns: 1fr; gap: 20px; }
  .chart-tab-labels { gap: 0; }
  .chart-tab-label { padding: 12px 14px; font-size: 10px; letter-spacing: 0.16em; flex: 1; text-align: center; }
  .hour-links { gap: 5px; }
  .hour-links a { padding: 7px 10px; font-size: 10px; }

  /* Contact form */
  .contact { padding: 28px; }
  .contact .row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .contact .actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .contact .submit { width: 100%; }

  /* Promise */
  .promise { padding: 40px 28px; }
  .promise-row { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px var(--pad) 50px;
  }
  .footer .col-right { text-align: left; }
}

/* Very small phones */
@media (max-width: 420px) {
  .top-meta { font-size: 9px; gap: 12px; }
  .top-meta span { display: inline-block; }
  .promise-row { grid-template-columns: 1fr; gap: 14px; }
}


/* ===== 19. Reduced motion & print =========================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll { opacity: 1; transform: none; }
  .reveal-on-load   { opacity: 1; transform: none; animation: none; }
  .hero-photo > img:not(.hero-logo) { animation: none; }
  .hero-stars       { display: none; }
  .shimmer {
    -webkit-text-fill-color: var(--gold);
            color: var(--gold);
    background: none;
    animation: none;
  }
  .reveal-on-scroll.is-visible .stagger,
  .reveal-on-scroll.is-visible .cat-card {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

@media print {
  body { background: white; color: black; }
  .topbar, .footer, .cta-row, .divider, .contact, .promise, .reveal-on-load { display: none; }
  * { color: black !important; background: white !important; }
}