/* ═══════════════════════════════════════════════════════════════════
   css/chinese-astrology-secret-animal.css — "Your Secret Animal"
   (/chinese-astrology/secret-animal/). Brand-v2 manuscript chrome.
   Self-contained; relies on chinese-astrology.css for body.cn-page vars
   + BaziGlyphs @font-face. Buster lives in the template (?v=…).
═══════════════════════════════════════════════════════════════════ */

body.cn-secret-body {
  /* One continuous peach ground — matches the hero, no lighter-cream step.
     Round 5: dropped background-attachment:fixed. A fixed attachment sizes the
     gradient to the viewport, so wherever the hero (an opaque band) happened to
     end, the story section below it picked up whatever colour the fixed gradient
     was showing at THAT scroll position — a visible hard seam. Scroll-attachment
     sizes the gradient to the full document instead, so it runs top-to-bottom
     as one uninterrupted sweep behind every light section. */
  background: linear-gradient(180deg, #F0DFC8 0%, #EBD6BD 100%);
  color: #2D1F38;
}

.csa-wrap { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; }
.csa-wrap--narrow { max-width: 760px; }

/* ── Section rhythm (shared tokens) ── */
.csa-section { padding: 3rem 0; }
.csa-eyebrow {
  /* Round 2: promoted to the large wine section heading (was small italic kicker). */
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.8rem, 4vw, 2.3rem);   /* round 5: suite-wide parity with .cna-eyebrow */
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #6B1F2C;
  text-align: center;
  margin: 0 0 0.55rem;
}
.csa-h2 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  letter-spacing: 0.02em;
  color: #2D1F38;
  text-align: center;
  margin: 0 0 1.4rem;
}
.csa-h2 em { color: #8E6E3A; font-style: italic; }
.csa-rule {
  width: 82px; height: 1px; margin: 0.9rem auto 1.6rem;
  background: linear-gradient(90deg, transparent, #B89150, transparent);
  position: relative;
}
.csa-rule::after {
  content: '\2726';
  position: absolute; top: -0.72em; left: 50%; transform: translateX(-50%);
  color: #B89150; font-size: 0.78rem;
  background: transparent; padding: 0 0.45rem;   /* round 4: no cream chip on peach ground */
}

/* ═══════════════ HERO ═══════════════ */
.csa-hero {
  position: relative;
  text-align: center;
  padding: 2.2rem 1.25rem 1.9rem;   /* round 5: tighter bottom, pulls the story heading up */
  /* Rose + gold glows only — no flat fill. The body's own continuous peach
     gradient shows through underneath, so the hero never breaks step with the
     section that follows it (round 5, seam fix). */
  background:
    radial-gradient(680px 340px at 50% 12%, rgba(212,172,104,0.14), rgba(212,172,104,0) 70%),
    radial-gradient(70% 50% at 14% 8%, rgba(217,150,143,0.10), rgba(217,150,143,0) 65%),
    radial-gradient(55% 40% at 88% 22%, rgba(184,145,80,0.10), rgba(184,145,80,0) 55%);
  overflow: hidden;
}
/* Back link — exact clone of /tarot/ .page-hero-back: small-caps burgundy with a
   persistent burgundy underline, arrow via ::before, hanging off the left of the
   centered hero column and collapsing to centered on mobile. */
.csa-back {
  position: absolute;
  top: 2rem;
  left: clamp(1.25rem, calc(50% - 470px), 40%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-family: 'EB Garamond', serif;
  font-variant: small-caps;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: #6B1F2C;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid #6B1F2C;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  z-index: 3;
}
.csa-back::before { content: "\2190"; font-style: italic; }
.csa-back:hover { color: #92505E; border-color: #B96B7A; text-decoration: none; }
@media (max-width: 640px) {
  .csa-back { position: static; left: auto; margin: 0 auto 1.2rem; }
}
.csa-dept {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8E6E3A;
}
.csa-hero-rule {
  width: 64px; height: 1px; margin: 0.9rem auto;
  background: linear-gradient(90deg, transparent, #B89150, transparent);
  position: relative;
}
.csa-hero-rule .m {
  position: absolute; top: -0.62em; left: 50%; transform: translateX(-50%);
  color: #B89150; font-size: 0.7rem; padding: 0 0.4rem;
}
.csa-hero h1 {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: #2D1F38;
  margin: 0.2rem 0 0.5rem;
}
.csa-hero h1 em { color: #6B1F2C; font-style: italic; }
.csa-hero-script {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.5;
  color: #4A1620;
  max-width: 46ch;
  margin: 0 auto 1.1rem;
}
.csa-hero-fleuron { color: #B89150; font-size: 1.35rem; margin: 0.2rem 0 1.2rem; }

/* CTA button (shared) */
.csa-cta-wrap { text-align: center; margin: 0.4rem 0 0.2rem; }
.csa-cta {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  color: #FBF3DC;
  text-decoration: none;
  padding: 0.92rem 1.9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #7A2531 0%, #6B1F2C 100%);
  border: 1px solid rgba(212,172,104,0.7);
  box-shadow: 0 6px 18px rgba(107,31,44,0.32), inset 0 0 0 1px rgba(255,251,239,0.15);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  cursor: pointer;
}
.csa-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(107,31,44,0.4); }
.csa-cta--ghost {
  /* Round 5: solid wine pill with near-white letters, matching .ccp-again
     (css/chinese-astrology-compat.css) — the button we just shipped on the
     sister page — so it reads as the real control it is instead of a faint
     outline on peach. */
  color: #FBF3DC;
  background: linear-gradient(180deg, #7A2432 0%, #6B1F2C 55%, #58121E 100%);
  border: 1px solid rgba(184,145,80,0.75);
  box-shadow: 0 4px 14px rgba(45,31,56,0.24);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.csa-cta--ghost:hover {
  color: #FFFBEF;
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(45,31,56,0.3);
}
.csa-cta--ghost:focus-visible { outline: 2px solid #D4AC68; outline-offset: 3px; }

/* ═══════════════ STORY PROSE ═══════════════ */
.csa-story { padding-top: 1.7rem; }   /* round 5: closes ~2rem of gap to the hero CTA above */
.csa-prose { text-align: left; }
.csa-prose p {
  font-family: 'EB Garamond', serif;
  font-size: 1.2rem;
  line-height: 1.75;
  color: #2D1F38;
  margin: 0 0 1.1rem;
}
.csa-prose p:last-child { margin-bottom: 0; }

/* ═══════════════ PICKER + REVEAL ═══════════════ */
.csa-picker-section {
  background: linear-gradient(180deg, #2D1F38 0%, #3A1F38 100%);
  color: #FBF3DC;
}
.csa-picker-section .csa-eyebrow { color: #D4AC68; }
.csa-picker-section .csa-h2 { color: #FBF3DC; }
.csa-picker-section .csa-h2 em { color: #D4AC68; }
.csa-picker-section .csa-rule::after { background: #33203c; }
.csa-picker-lead {
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: 1.2rem;             /* round 7: suite-wide body parity (1.2/1.75) */
  line-height: 1.75;
  color: rgba(251,243,220,0.9);
  max-width: 52ch;
  margin: 0 auto 1.8rem;
}
.csa-form { max-width: 560px; margin: 0 auto; text-align: center; }
.csa-time-row {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.csa-field { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.csa-field-k {
  font-family: 'EB Garamond', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.08rem;
  color: #D4AC68;
  padding-left: 0.2rem;
}
.csa-form .form-select {
  min-width: 108px;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
}
.csa-reveal-btn { border: none; }
.csa-form-hint {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: #F0C9A0;
  min-height: 1.2em;
  margin: 1rem 0 0;
}

/* Reveal card */
.csa-reveal {
  --csa-el: #B89150;
  max-width: 560px;
  margin: 2.2rem auto 0;
  text-align: center;
  background: linear-gradient(180deg, #FFFBEF 0%, #FBF3DC 100%);
  border: 1px solid rgba(212,172,104,0.6);
  border-radius: 18px;
  padding: 2rem 1.6rem 2.2rem;
  box-shadow: 0 18px 44px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(255,251,239,0.6);
  opacity: 0;
  transform: translateY(14px);
}
.csa-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.csa-reveal-eyebrow {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: 0.02em;
  color: #6B1F2C;
  margin-bottom: 1rem;
}
.csa-reveal-medallion {
  position: relative;
  width: 200px; height: 200px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  padding: 9px;
  background: radial-gradient(circle at 50% 30%, #FFF8E0 0%, #F0D89A 55%, var(--csa-el) 130%);
  box-shadow:
    0 14px 36px rgba(45,31,56,0.28),
    0 0 0 1px rgba(184,145,80,0.55),
    inset 0 0 0 1px rgba(255,251,239,0.6);
}
.csa-reveal-medallion::before {
  content: '';
  position: absolute; inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,145,80,0.34) 0%, rgba(184,145,80,0) 68%);
  z-index: -1;
}
.csa-reveal-medallion img {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,251,239,0.85);
  background: #FBF3DC;
}
.csa-reveal-name {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  color: var(--csa-el);
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}
.csa-reveal-attrs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.csa-reveal-glyph {
  /* Round 5: bolder. The reveal card itself is a light parchment card (even
     though it sits on the dark picker band), so wine reads fine here. */
  font-family: 'BaziGlyphs', serif;
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--csa-el);
  line-height: 1;
}
.csa-reveal-pinyin {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.32rem;
  color: #6B1F2C;
}
.csa-reveal-window {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #6B1F2C;
  padding: 0.25rem 0.8rem;
  border: 1px solid rgba(184,145,80,0.5);
  border-radius: 999px;
  background: rgba(240,216,154,0.25);
}
.csa-reveal-essence {
  font-family: 'EB Garamond', serif;
  font-size: 1.22rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.6;
  color: #1F1428;
  max-width: 44ch;
  margin: 0 auto 1.5rem;
}
.csa-reveal-link { font-size: 0.98rem; }

/* ═══════════════ THE TWELVE DOUBLE-HOURS ═══════════════ */
.csa-hours-lead {
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;             /* round 7: suite-wide body parity */
  line-height: 1.75;
  color: #2D1F38;                 /* round 5: darker for contrast (was burgundy-deep) */
  max-width: calc(60ch + 70px);   /* round 5: ~70px wider */
  margin: 0 auto 2rem;
}
.csa-hours-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.csa-hour-card {
  --csa-el: #8E6E3A;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 1.2rem 0.9rem 1.3rem;
  background: linear-gradient(180deg, #FFFBEF 0%, #FBF3DC 100%);
  border: 1px solid rgba(184,145,80,0.5);
  border-top: 3px solid var(--csa-el);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(45,31,56,0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.csa-hour-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(45,31,56,0.16);
}
.csa-hour-window {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.05rem;             /* round 9: larger (was 0.88rem) */
  letter-spacing: 0.03em;
  color: #77592B;                 /* round 5: darker gold for contrast (was #8E6E3A) */
  margin-bottom: 0.7rem;
}
.csa-hour-medallion {
  width: 96px; height: 96px;      /* round 9: larger (was 76px) */
  border-radius: 50%;
  padding: 4px;
  background: radial-gradient(circle at 50% 30%, #FFF8E0 0%, #F0D89A 60%, var(--csa-el) 150%);
  box-shadow: 0 3px 10px rgba(45,31,56,0.18), inset 0 0 0 1px rgba(255,251,239,0.5);
  margin-bottom: 0.7rem;
}
.csa-hour-medallion img {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,251,239,0.85);
  background: #FBF3DC;
}
.csa-hour-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.3rem;              /* round 9: touch larger (was 1.18rem) */
  letter-spacing: 0.04em;
  color: #6B1F2C;
  margin-bottom: 0.2rem;
}
.csa-hour-glyph {
  font-family: 'BaziGlyphs', serif;
  font-size: 1.5rem;
  color: var(--csa-el);
  line-height: 1;
  margin-bottom: 0.15rem;
}
.csa-hour-pinyin {
  font-family: 'EB Garamond', serif;
  font-style: normal;
  font-weight: 600;               /* round 9: touch bolder */
  font-size: 1.32rem;             /* round 9: much larger (was 1.02rem) */
  color: #6B1F2C;
}

/* ═══════════════ HONEST FRAMING ═══════════════ */
.csa-honest {
  background: linear-gradient(180deg, #FFFBEF 0%, #FBF3DC 100%);
  border: 1px solid rgba(184,145,80,0.6);
  border-left: 4px solid #B89150;
  border-radius: 12px;
  padding: 1.7rem 1.9rem;
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}
.csa-honest-mark { color: #B89150; font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.csa-honest-text h3 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.24rem;
  color: #6B1F2C;
  margin: 0 0 0.55rem;
  letter-spacing: 0.02em;
}
.csa-honest-text p {
  font-family: 'EB Garamond', serif;
  font-size: 1.2rem;             /* round 7: suite-wide body parity */
  line-height: 1.75;
  color: #2D1F38;
  margin: 0 0 1rem;
}
.csa-honest-text p strong { color: #6B1F2C; }
.csa-inline-cta {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1rem;
  color: #6B1F2C;                 /* round 5: wine (was deep gold) */
  text-decoration: none;
  border-bottom: 1px solid rgba(107,31,44,0.5);
  padding-bottom: 2px;
}
.csa-inline-cta:hover { color: #4A1620; border-color: #4A1620; }

/* ═══════════════ FAQ ═══════════════ */
.csa-faq { max-width: 760px; margin: 0 auto; }
.csa-faq .faq-item {
  border: 1px solid rgba(184,145,80,0.5);
  border-radius: 10px;
  margin-bottom: 0.85rem;
  background: linear-gradient(180deg, #FFFBEF 0%, #FBF3DC 100%);
  overflow: hidden;
}
.csa-faq .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.3rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;              /* round 2: bold question headers */
  font-size: 1.1rem;
  color: #6B1F2C;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.csa-faq .faq-item summary::-webkit-details-marker { display: none; }
.csa-faq .faq-icon svg { width: 20px; height: 20px; fill: #B89150; transition: transform 0.2s ease; }
.csa-faq .faq-item[open] .faq-icon svg { transform: rotate(180deg); }
.csa-faq .faq-body {
  padding: 0 1.3rem 1.15rem;
  font-family: 'EB Garamond', serif;
  font-size: 1.18rem;           /* round 2: match page body sizing */
  line-height: 1.7;
  color: #2D1F38;
}

/* ═══════════════ CLOSING CTA ═══════════════ */
.csa-close-cta {
  text-align: center;
  padding: 3rem 1.25rem 3.2rem;
  background:
    radial-gradient(620px 300px at 50% 100%, rgba(212,172,104,0.16), rgba(212,172,104,0) 70%);
}
.csa-close-cta .csa-h2 { margin-bottom: 0.6rem; }
.csa-close-deck {
  font-family: 'EB Garamond', serif;
  font-size: 1.16rem;
  line-height: 1.65;
  color: #2D1F38;
  max-width: 54ch;
  margin: 0 auto 1.6rem;
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 860px) {
  .csa-hours-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .csa-hours-grid { grid-template-columns: repeat(2, 1fr); }
  .csa-time-row { gap: 0.6rem; }
  .csa-form .form-select { min-width: 92px; }
  .csa-honest { flex-direction: column; gap: 0.7rem; }
  .csa-reveal-medallion { width: 168px; height: 168px; }
}
@media (max-width: 380px) {
  .csa-hours-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .csa-hour-card { padding: 1rem 0.5rem 1.1rem; }
}