/* ════════════════════════════════════════════════════════════════
   Universe Bella — English design layer  ·  "Celestial Editorial Luxury"
   Loaded AFTER the page's own styles. Overrides type, rhythm & detail
   for the English homepage. Cosmic-dark + gold identity preserved.
   Display: Cormorant Garamond (ethereal serif)
   Body / UI: Jost (refined geometric sans — replaces generic Inter)
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --en-display: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
  --en-body: 'Jost', -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --en-gold: #DAB75E;
  --en-gold-soft: #ECCF7E;
  --en-ink-1: rgba(255,255,255,.94);
  --en-ink-2: rgba(255,255,255,.68);
  --en-ink-3: rgba(255,255,255,.46);
}

/* ── Base: everything → Jost (one calm, consistent sans) ── */
body, body *{ font-family: var(--en-body) !important; }

/* ── Display headings → ethereal Cormorant (element selectors cover every page) ── */
h1, h2, h3, h4,
.hero-h1, .sec-title, .cta-title, .gfc-title, .explore-card-t, .sf-mantra,
.about-hero h1, .about-wrap h2, .master-card h3, .qr-box h4{
  font-family: var(--en-display) !important;
  font-weight: 500;
  letter-spacing: .006em;
}
.hero-h1{
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: .01em;
}
.sec-title{
  font-weight: 500;
  line-height: 1.12;
  font-size: clamp(1.95rem, 3.1vw, 2.85rem);
}

/* ── Eyebrows / kicker labels → editorial gold smallcaps ── */
.hero-eyebrow, .sec-eyebrow, .gfc-label, .cta-eyebrow, .music-header .sec-eyebrow{
  font-family: var(--en-body) !important;
  text-transform: uppercase;
  letter-spacing: .30em !important;
  font-weight: 500 !important;
  font-size: .64rem !important;
  color: var(--en-gold) !important;
  opacity: 1 !important;
}

/* ── Hero subtitle (副標) ── */
.hero-tagline{
  display: block;
  margin-top: .7rem;
  font-family: var(--en-display) !important;
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: .012em;
  line-height: 1.35;
  color: var(--en-ink-1) !important;
  -webkit-text-fill-color: var(--en-ink-1) !important;
  background: none !important;
}
@media(max-width:760px){ .hero-tagline{ font-size: 1.22rem; } }

/* ── Body copy → refined weight/rhythm. NO colour override:
   the page sets dark text on light sections and light text on dark sections,
   so forcing a colour here would break whichever background it isn't. ── */
.hero-sub, .sec-desc, .gfc-desc, .explore-card-d, .cta-sub{
  font-weight: 400 !important;
  letter-spacing: .01em;
  line-height: 1.7;
  text-wrap: pretty;
}
.hero-sub{ font-size: 1.02rem; max-width: 30rem; }
.sec-desc{ font-size: 1.02rem; }

/* ── Card titles ── */
.gfc-title, .explore-card-t{
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .01em;
  line-height: 1.2;
}

/* ── Buttons → calm, spaced, intentional ── */
.btn-gold, .btn-ghost, .gfc-cta, .nav-cta, .cta-form button, .music-more a, .music-tab{
  letter-spacing: .085em !important;
  font-weight: 500 !important;
}
.btn-ghost, .gfc-cta{ font-weight: 400 !important; }

/* ── Cards: quieter hairline borders ── */
.explore-card, .guide-feature-card{
  border-color: rgba(218,183,94,.16) !important;
}

/* ── Section polish (below the hero) ── */
/* Testimonials → editorial serif-italic quotes (quiet luxury) */
.review-text{
  font-family: var(--en-display) !important;
  font-style: italic;
  font-weight: 500 !important;
  font-size: 1.2rem !important;
  line-height: 1.62 !important;
  letter-spacing: .008em;
}
.review-stars{ color: var(--en-gold) !important; letter-spacing: 3px; font-size: .82rem; }
.review-name{ letter-spacing: .05em; font-weight: 500; }
.review-loc, .review-role{ letter-spacing: .04em; }

/* Music filter tabs → calm, evenly tracked */
.music-tab{ letter-spacing: .05em !important; font-size: .82rem !important; }

/* Wishing-tree + Join headline emphasis stays serif via the display rule above;
   keep their body copy in the light refined style (inherited). */

/* Glossary sticky filter bar: the original cream band looks out of place on the
   pink page — make it a frosted, translucent bar that blends in. */
.tabs{
  background: rgba(255,250,252,.62) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(176,136,32,.08) !important;
  border-bottom: 1px solid rgba(176,136,32,.10) !important;
}

/* Glossary term cards: make the term name clearly a heading, distinct from the body */
.term-card h3{
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: #1C1635 !important;
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
}

/* Wishing-tree title: the CN design blows up the single emphasized character (願);
   in English that makes one word huge — normalise it so "The Wishing Tree" is even. */
.tree-title{ font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important; line-height: 1.12 !important; letter-spacing:.1em !important; }
.tree-title strong{ font-size: inherit !important; line-height:1.3 !important; padding-bottom:.06em; }
.tree-title .tt-art{ font-size:.46em !important; font-weight:400 !important; opacity:.8; letter-spacing:.04em !important; margin-right:.06em; }

/* ── Functional fixes (kept) ── */
/* equal-height CTAs in the daily-guidance cards */
.guide-feature-card{ display: flex; flex-direction: column; }
.gfc-cta{ margin-top: auto; }
/* radio side-tab: icon only (no vertical English text) */
.bradio-pill-text{ display: none !important; }
.bradio-pill{ padding: 15px 13px !important; gap: 0 !important; }
.bradio-pill-icon{ font-size: 1.65rem !important; }