/* ═══════════════════════════════════════════════════════════════
   2026 design layer for The Lunar's inner pages (rooms, amenities,
   Bulan, gallery, FAQ, stays-for pages, journal
   booking flow). Loaded after each page's own styles: it re-maps the
   shared colour variables to the black / bone / champagne palette of the
   homepage and switches headings to uppercase Manrope with Cormorant
   italic accents. Layout and scripts are untouched.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --midnight: #121415; --navy: #121415; --navy-2: #1A1D1F; --charcoal: #121415;
  --gold: #B49A6A; --gold-dark: #8E7750; --gold-light: #D6C39C; --gold-pale: #EFE7D8;
  --pearl: #F4F1EB; --pearl-2: #EAE5DC; --pearl-deep: #D8D0C2;
  --text: #3D3D3A; --muted: #8C877E; --border: rgba(18,20,21,.12);
  --text-body: #3D3D3A; --text-muted: #8C877E; --pearl-warm: #EAE5DC; --navy-light: #1A1D1F; --rule: rgba(18,20,21,.12);
  --wood: #8E7750; --wood-light: #B49A6A; --wood-pale: #EFE7D8;
  --ink: #121415; --black: #0B0C0C;
  --t26-sans: 'Manrope', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --t26-serif: 'Cormorant Garamond', Georgia, serif;
}
body { font-family: var(--t26-sans); -webkit-font-smoothing: antialiased; }

/* headings: uppercase sans, serif italic accents */
h1, h2, .page-title, .section-title, .post-title-display, .listing-hero h1,
.page-header h1, .success-title, .error-title, .title {
  font-family: var(--t26-sans) !important; font-weight: 300 !important;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.06;
}
h1 em, h2 em, .page-title em, .section-title em, .post-title-display em {
  font-family: var(--t26-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0;
}
h3, .blog-card-title, .tc-name, .venue-name, .room-name, .summary-box h3, .cart-box h4 {
  font-family: var(--t26-sans) !important; font-weight: 500 !important; letter-spacing: .04em; text-transform: uppercase;
}
.page-rule, .rule { display: none; }
.eyebrow, .page-eyebrow, .section-label { font-family: var(--t26-sans); font-weight: 600; letter-spacing: .32em; }
.eyebrow { color: var(--gold-dark); }
.page-eyebrow { color: rgba(255,255,255,.85); }

/* header: black bar, logo left, white Book button */
nav { background: rgba(11,12,12,.96) !important; border-bottom: 0 !important; }
.nav-brand, .nav-brand strong { font-family: var(--t26-sans) !important; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.nav-brand span, .nav-brand em { color: rgba(255,255,255,.6) !important; font-style: normal; }
.nav-links a, .nav-link, .nav-back { font-family: var(--t26-sans); font-weight: 600; letter-spacing: .2em; color: rgba(255,255,255,.85); }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-book { background: #fff !important; color: var(--ink) !important; font-weight: 700 !important; letter-spacing: .2em; padding: 12px 24px; }
.nav-book:hover { background: var(--gold) !important; color: #fff !important; }
.drawer { background: var(--black) !important; }
.drawer-book { color: #fff !important; }

/* page heroes: taller, words bottom-left */
.page-hero, .post-hero { height: clamp(440px, 68vh, 720px); }
.page-hero-overlay, .post-hero-overlay {
  align-items: flex-start !important; text-align: left !important;
  padding: 0 clamp(20px,4.5vw,64px) clamp(44px,6vw,80px) !important;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.7) 100%) !important;
}
.page-title, .post-title-display { font-size: clamp(2.6rem,6.6vw,5.6rem) !important; color: #fff; max-width: 16ch; }
.page-sub { text-align: left; margin-left: 0 !important; }

/* section heads: left-aligned like the homepage */
.treatments-head, .section-head, .listing-head { text-align: left; }
.section-title { font-size: clamp(2rem,4.4vw,3.6rem) !important; color: var(--ink); }
.section-title-light, .dark .section-title, .venue-content.dark .section-title, .feature-strip .section-title { color: #fff; }

/* buttons */
.btn-gold, .btn-primary { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; border-radius: 0 !important; font-weight: 700; letter-spacing: .2em; }
.btn-gold:hover, .btn-primary:hover { background: var(--gold) !important; border-color: var(--gold) !important; }
.btn-outline { border-radius: 0 !important; color: var(--ink); border-color: var(--ink); }
.venue-content.dark .btn-gold, .feature-strip .btn-gold, .dark .btn-gold { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; }
.venue-content.dark .btn-gold:hover, .feature-strip .btn-gold:hover { background: var(--gold) !important; color: #fff !important; }
.hl-pill { border-color: rgba(18,20,21,.18); color: var(--gold-dark); }

/* cards: flat, quiet */
.card, .treatment-card, .blog-card, .conf-card, .summary-box, .cart-box { border-radius: 0 !important; box-shadow: none !important; }
.tc-price, .plan-price, .sum-total .val, .cart-grand .val, .room-total { font-family: var(--t26-sans) !important; font-weight: 400; color: var(--ink) !important; }

footer { background: var(--black) !important; }

/* dark sections: white buttons and readable prices */
.cta-section .btn-gold, .cta-section .btn-primary { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; }
.cta-section .btn-gold:hover, .cta-section .btn-primary:hover { background: var(--gold) !important; color: #fff !important; }
.treatment-card .tc-price, .treatment-card .tc-price * { color: #fff !important; }

/* dining page: hero outline button, dark venue panels, stats strip */
.page-hero .btn-outline, #hero .btn-outline, .hero .btn-outline { color: #fff !important; border-color: rgba(255,255,255,.7) !important; }
.page-hero .btn-outline:hover, #hero .btn-outline:hover, .hero .btn-outline:hover { background: #fff !important; color: var(--ink) !important; }
.venue-text .btn-gold, .venue-text .btn-dark { background: #fff !important; color: var(--ink) !important; border: 1px solid #fff !important; }
.venue-text .btn-gold:hover, .venue-text .btn-dark:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: #fff !important; }
#intro-strip { background: var(--black) !important; }
#intro-strip strong { font-family: var(--t26-sans) !important; font-weight: 300; color: #fff !important; }
#intro-strip span { color: rgba(255,255,255,.55) !important; }
.page-hero .btn-gold, #hero .btn-gold, .hero .btn-gold { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; }
.btn-dark { color: #fff !important; }
#reserve { background: var(--black) !important; }
#reserve h2 { color: #fff !important; }
#reserve p { color: rgba(255,255,255,.7) !important; }
#reserve .btn-dark { background: #fff !important; color: var(--ink) !important; border: 1px solid #fff !important; }
#reserve .btn-outline, #reserve a.btn:not(.btn-dark) { color: #fff !important; border: 1px solid rgba(255,255,255,.6) !important; }
.hour-block .time { font-family: var(--t26-sans) !important; font-weight: 400; }
#rooftop .hour-block .time { color: var(--ink) !important; }
#rooftop .hour-block .note { color: var(--muted) !important; }
#rooftop .hour-block .label { color: var(--gold-dark) !important; }

/* The Lunar: closing call-to-action band and white-outline buttons */
.page-cta { background: var(--black) !important; }
.page-cta h2, .page-cta .section-title { color: #fff !important; }
.page-cta p { color: rgba(255,255,255,.7) !important; }
.page-cta .btn-dark, .page-cta .btn-gold { background: #fff !important; color: var(--ink) !important; border: 1px solid #fff !important; }
.page-cta .btn-outline-dark { color: #fff !important; border-color: rgba(255,255,255,.6) !important; }
.btn-outline-white { color: #fff !important; border-color: rgba(255,255,255,.7) !important; border-radius: 0 !important; }
.btn-dark { background: var(--ink); border-radius: 0 !important; }
.btn-outline-dark { border-radius: 0 !important; color: var(--ink); border-color: var(--ink); }
.nav-cta { background: #fff !important; color: var(--ink) !important; border-radius: 0 !important; font-weight: 700 !important; letter-spacing: .2em; }
.nav-cta:hover { background: var(--gold) !important; color: #fff !important; }
.stats-bar, .stats-strip, .page-stats { background: var(--black) !important; }
.stat-item strong { font-family: var(--t26-sans) !important; font-weight: 300; color: #fff !important; }
.stat-item span { color: rgba(255,255,255,.55) !important; }