/* ==========================================================================
   YOGAVIBE, "Eclectic Muse" theme (variant A · Licht & warm)
   Oswald for headings, EB Garamond for body and italic accents.
   Loaded after the other stylesheets; it only overrides tokens and type.
   ========================================================================== */

:root {
  /* Palette: #FFFCF1 cream · #F1CBB8 blush · #C9A475 sand · #6E5A2F olive · #56140F oxblood · #000 */
  --bg: #FFFCF1;
  --bg-alt: #F7EBDD;            /* cream warmed toward blush */
  --bg-deep: #6E5A2F;           /* olive sections */
  --ink: #1E1A14;               /* 16.9:1 on cream */
  --ink-soft: #4A4234;          /* 9.4:1 */
  --ink-mute: #6A604E;          /* 6.0:1 */
  --line: #E9DCCB;
  --accent: #56140F;            /* oxblood: CTAs, prices, heading accents */
  --accent-2: #6E5A2F;          /* olive */
  --accent-3: #C9A475;          /* sand: lines and decoration only (2.3:1 on cream) */
  --accent-ink: #56140F;
  --accent-3-ink: #6E5A2F;
  --accent-on-dark: #F1CBB8;    /* blush on dark/olive */
  --blush: #F1CBB8;

  /* !important: app.jsx sets --font-display inline from the tweaks panel */
  --font-display: "Oswald", "Arial Narrow", sans-serif !important;
  --font-sans: "EB Garamond", Georgia, serif;
  --font-mono: "EB Garamond", Georgia, serif;
}

body { font-size: 18px; letter-spacing: 0; font-feature-settings: normal; }
.body { font-size: 17px; }
.lead { font-size: clamp(18px, 1.5vw, 21px); }

/* ---- Headings: Oswald light, uppercase, wide ---- */
.h-display, .h1, .h2, .h3 { text-transform: uppercase; font-weight: 200; }
.h-display { font-size: clamp(30px, 4.2vw, 66px); letter-spacing: 0.16em; line-height: 1.16; }
.h1 { font-size: clamp(24px, 2.8vw, 40px); letter-spacing: 0.14em; line-height: 1.18; }
.h2 { font-size: clamp(20px, 2.1vw, 30px); letter-spacing: 0.14em; line-height: 1.22; }
.h3 { font-size: clamp(17px, 1.4vw, 20px); letter-spacing: 0.12em; line-height: 1.3; font-weight: 300; }
.h-display em, .h1 em, .h2 em, .h3 em { font-style: normal; font-weight: 200; color: var(--accent-2); }

.nav-wordmark { font-size: 20px; letter-spacing: 0.4em; text-transform: uppercase; font-weight: 300; }

/* Other display-font labels: keep Oswald but lighten and track it */
.places-name, .rhythm-title, .featured-past-title, .day-label, .testi-name, .detail-tab,
.mobile-drawer-list a, .villa-other .h3, .places-compare tbody th, .terms-clause-head .h3,
.thankyou-order-name, .gc-card-logo, .stripe-logo, .marquee-item, .marquee-item em {
  font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; font-style: normal;
}
.hero-meta-val, .featured-meta-val, .gc-card-amount, .inside-fact-k, .about-meta div > div {
  font-weight: 200; letter-spacing: 0.06em;
}

/* Long display-font text reads better in Garamond */
.intro-text, .testi-quote, .morocco-quote blockquote, .tl-month, .gc-card-recipient {
  font-family: "EB Garamond", Georgia, serif;
}

/* ---- Accents: Garamond italic, lowercase, wide ---- */
.eyebrow, .caption, .hero-chip, .retreat-tag, .mini-chip, .places-tab, .nav-loc,
.day-time, .tl-scarcity, .detail-sticky-text, .sold-out-badge, .status-pill,
.gc-card-label, .gc-delivery-sub, .places-compare thead th, .places-compare td[data-label]::before,
.mobile-drawer-foot, .photo-overlay, .placeholder, .testi-dot {
  font-style: italic; text-transform: lowercase; letter-spacing: 0.2em; font-weight: 400;
}
.eyebrow { font-size: 16px; letter-spacing: 0.26em; }
.eyebrow::before { background: var(--accent-3); }
.caption { font-size: 14px; }
.hero-chip, .retreat-tag, .mini-chip, .sold-out-badge, .status-pill { font-size: 14px; }

/* ---- Navigation, buttons and links: Oswald, uppercase ---- */
.nav-list a, .footer-cols a, .link-arrow, .nav-locale {
  font-family: "Oswald", sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; font-style: normal;
}
.link-arrow { font-size: 12px; }
.btn { font-family: "Oswald", sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.22em; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-ghost { color: var(--accent-2); border-color: var(--accent-3); }
.btn-ghost:hover { border-color: var(--accent-2); background: var(--bg-alt); }

/* ---- Dark sections ---- */
.footer { background: #000; }
.footer-cols .caption, .footer-bottom .caption { color: var(--accent-3); }
.newsletter-card { background: var(--bg-deep); }
.newsletter-form .btn-primary { background: var(--accent); border-color: var(--accent); }

/* Hero accent word sits on the photo: blush instead of terracotta */
.h-display em.hero-fb-accent { color: var(--blush); }

/* Oswald has no italic: italic display-font text switches to Garamond, emphasis goes upright */
blockquote.h3 { font-family: "EB Garamond", Georgia, serif; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.45; }
.places-name em { font-style: normal; font-weight: 200; color: var(--accent-3); }

/* Footer link columns are narrow; less tracking so labels don't wrap */
.footer-cols a { letter-spacing: 0.12em; font-size: 13px; }

@media (max-width: 480px) {
  .h-display { letter-spacing: 0.1em; }
  .h1, .h2 { letter-spacing: 0.1em; }
}

/* Titles with their own sizes elsewhere, scaled to the theme */
@media (min-width: 601px) {
  .hero-fullbleed .h-display { font-size: clamp(40px, min(5.4vw, 9vh), 86px); }
}
@media (max-width: 600px) {
  .hero-fullbleed .h-display { font-size: clamp(30px, 9vw, 40px); line-height: 1.15; }
}
.h-display.journal-article-title { font-size: clamp(28px, 3.6vw, 50px); letter-spacing: 0.1em; line-height: 1.2; }
.footer-brand .h1 { font-size: clamp(30px, 3.6vw, 52px) !important; }
.marquee-item { font-size: clamp(22px, 2.6vw, 38px); }
.places-name { font-size: clamp(26px, 2.6vw, 38px); }

/* Some titles carry an inline font-size from the components; cap them to the theme scale */
.h-display[style*="font-size"] { font-size: clamp(30px, 4vw, 58px) !important; }
.h1[style*="font-size"] { font-size: clamp(24px, 2.8vw, 40px) !important; }
.h2[style*="font-size"] { font-size: clamp(20px, 2.1vw, 30px) !important; }
.footer-brand .h1 { font-size: clamp(28px, 3.2vw, 46px) !important; }

/* Accent words on the dark "places" section: oxblood is unreadable there */
.places em, .places .h1 em, .places .h2 em, .places-tab.is-soon em { color: var(--accent-3); }

/* Smallest italic labels one size up (Garamond runs small) */
.caption[style*="font-size"], .inside-fact .caption { font-size: 14px !important; }
.places-tab, .testi-dot, .tl-scarcity { font-size: 14px; }
.ph-coords, .ph-tag { font-size: 13px; }
.day-time { font-size: 15px; }