/* ══════════════════════════════════════════════════════════════════
   /css/asteroids.css — Free Asteroid Chart page (/asteroids/)
   Page-specific layer on top of solar-return.css + birth-chart-v2.css.
   Brand v2 palette: parchment #FBF3DC, ink #2D1F38, burgundy #6B1F2C,
   aubergine #3A1F38, gold #B89150 / #D4AC68 / #8E6E3A.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero CTA — gold button scrolling to the form ── */
.ast-page .ast-hero-cta {
  display: inline-block;
  margin-top: 1.6rem;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2D1F38;
  background: linear-gradient(180deg, #F0D89A, #D4AC68);
  border: 1px solid #B89150;
  border-radius: 4px;
  padding: 0.95rem 2.4rem;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(212, 172, 104, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ast-page .ast-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(212, 172, 104, 0.5);
}
html { scroll-behavior: smooth; }

/* ── Lore section — illustrated bands under the hero ── */
.ast-page .ast-lore {
  /* Peach band — same ground as the Chinese astrology / HD compatibility pages */
  padding: 3.6rem 0 1.6rem;
  background: linear-gradient(180deg, #F0DFC8 0%, #EBD6BD 100%);
  border-top: 1px solid rgba(142,110,58,0.25);
  border-bottom: 1px solid rgba(142,110,58,0.25);
}
.ast-page .ast-lore-row {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  max-width: 860px;
  margin: 0 auto 3rem;
}
.ast-page .ast-lore-row-flip { flex-direction: row-reverse; }
.ast-page .ast-lore-art {
  flex: 0 0 220px;
}
.ast-page .ast-lore-art svg {
  width: 220px;
  height: 220px;
  display: block;
}
.ast-page .ast-lore-text { flex: 1 1 auto; min-width: 0; }
.ast-page .ast-lore-eyebrow {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8E6E3A;
}
.ast-page .ast-lore-title {
  /* Sized like the Chinese-compatibility section headings (.cna-eyebrow) */
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #6B1F2C;
  margin: 0.35rem 0 0.9rem;
}
.ast-page .ast-lore-title em {
  font-family: 'Italianno', cursive;
  font-size: 1.25em;
  font-style: normal;
  color: #8E6E3A;
}
.ast-page .ast-lore-text p {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.22rem;
  line-height: 1.62;
  color: #3F3428;
  margin: 0;
}
@media (max-width: 700px) {
  .ast-page .ast-lore-row,
  .ast-page .ast-lore-row-flip {
    flex-direction: column;
    gap: 1.4rem;
    text-align: center;
  }
  .ast-page .ast-lore-art svg { width: 170px; height: 170px; }
}

/* ── Wheel — EXACT match to the HOMEPAGE wheel (.home-a-sky-chart-wrap:
      922px max). Breaks out of .container-narrow's padding so the full
      922px is reached on desktop. ── */
.ast-page .ast-wheel-wrap {
  position: relative;
  width: min(922px, 94vw);
  left: 50%;
  transform: translateX(-50%);
  margin: 1.4rem 0 0;
}
.ast-page .ast-wheel-wrap svg {
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 50px rgba(15, 59, 59, 0.4));
}
/* ── Wheel caption (transits bi-wheel) — centered, bold, wine ── */
.ast-page .ast-wheel-caption {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  color: #6B1F2C;
  text-align: center;
  margin: 1rem auto 0;
  max-width: 60ch;
}

/* ── Aspect key — what the web of lines means (colors inline, from
      chart_renderer.php's real strokes) ── */
.ast-page .ast-aspect-key {
  max-width: 820px;
  margin: 1.4rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(142,110,58,0.3);
  text-align: center;
}
.ast-page .ast-aspect-key-label {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6B1F2C;
  margin-bottom: 0.8rem;
}
.ast-page .ast-key-list {
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.7rem;
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  color: #3F3428;
}
.ast-page .ast-key-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ast-page .ast-key-dash {
  width: 26px;
  height: 3px;
  border-radius: 1.5px;
  display: inline-block;
}
.ast-page .ast-key-list--minor {
  color: #6b5a4a;
}
.ast-page .ast-key-list--minor .ast-key-dash {
  height: 2px;
}
.ast-page .ast-key-note {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: #6B1F2C;
  margin: 0.5rem auto 0;
  max-width: 62ch;
}
.ast-page .ast-time-note {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: #8E6E3A;
  text-align: center;
  margin: 0.7rem auto 0;
}

/* ── Groups ── */
.ast-page .ast-group {
  max-width: 760px;
  margin: 3rem auto 0;
}
.ast-page .ast-group-title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.8vw, 2.2rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B1F2C;
  text-align: center;
  line-height: 1.15;
}
.ast-page .ast-group-script {
  font-family: 'Italianno', cursive;
  font-size: 2.4rem;
  color: #8E6E3A;
  text-align: center;
  margin: 0.15rem 0 1.4rem;
}

/* ── Rows ── */
.ast-page .ast-row {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: #FAF1E1;
  border: 1px solid rgba(184, 145, 80, 0.55);
  border-radius: 6px;
  padding: 1.05rem 1.2rem;
  margin-bottom: 0.9rem;
}
.ast-page .ast-badge {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid #8E6E3A;
  background: #FBF3DC;
  color: #6B1F2C;
  margin-top: 0.15rem;
}
.ast-page .ast-badge-glyph {
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Apple Symbols', serif;
  font-size: 2.1rem;
}
.ast-page .ast-badge-vec svg {
  width: 36px;
  height: 36px;
  display: block;
}
.ast-page .ast-row-main { flex: 1 1 auto; min-width: 0; }
.ast-page .ast-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
}
.ast-page .ast-row-name {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #2D1F38;
}
.ast-page .ast-row-pos {
  font-family: 'Marcellus', Georgia, serif;
  font-weight: 700;
  font-size: 1.18rem;
  color: #6B1F2C;
}
.ast-page .ast-row-pos .ast-rx {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  color: #8E6E3A;
}
.ast-page .ast-row-meaning {
  /* Matches the page's lore paragraphs (.ast-lore-text p) exactly */
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.22rem;
  line-height: 1.62;
  color: #3F3428;
  margin: 0.45rem 0 0;
}
.ast-page .ast-row-link {
  display: inline-block;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.12rem;
  color: #6B1F2C;
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 31, 44, 0.5);
  margin-top: 0.5rem;
}
.ast-page .ast-row-link:hover { color: #4A1620; border-bottom-color: #4A1620; }

/* ── Crosslink ── */
.ast-page .ast-crosslink {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.12rem;
  color: #4A3B2F;
  text-align: center;
  max-width: 56ch;
  margin: 1.6rem auto 0;
}
.ast-page .ast-crosslink a {
  color: #6B1F2C;
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 31, 44, 0.4);
}
.ast-page .ast-crosslink a:hover { border-bottom-color: #6B1F2C; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .ast-page .ast-row { padding: 0.9rem 0.9rem; gap: 0.8rem; }
  .ast-page .ast-badge { width: 48px; height: 48px; }
  .ast-page .ast-badge-glyph { font-size: 1.7rem; }
  .ast-page .ast-badge-vec svg { width: 30px; height: 30px; }
  .ast-page .ast-row-name { font-size: 1.18rem; }
  .ast-page .ast-row-pos { font-size: 1.05rem; }
  .ast-page .ast-group-title { font-size: 1.5rem; }
  .ast-page .ast-group-script { font-size: 2rem; }
}