/* ============================================================
   THE RUSTIC RESERVE — DESIGN SYSTEM v2
   Scope:
   1) Approved Guest Comforts ivory treatment
   2) Mobile top-spacing refinement
   3) Guest Reviews ivory/editorial treatment
   No review behavior, navigation, gallery, booking, or shared JS changes.
   ============================================================ */

:root {
  --rr-ds-ivory: #F4F0E7;
  --rr-ds-ink: #27241F;
  --rr-ds-muted: #6E665A;
  --rr-ds-gold: #D8B464;
  --rr-ds-gold-deep: #9A8034;
  --rr-ds-line: rgba(39, 36, 31, 0.22);
  --rr-ds-card: #FBF8F1;
}

/* ---------------- Guest Comforts ---------------- */

html body main#main > .guest-comforts.section-wrap {
  background: var(--rr-ds-ivory) !important;
  color: var(--rr-ds-ink) !important;
  padding-top: clamp(72px, 8vw, 118px) !important;
  padding-bottom: clamp(76px, 8vw, 124px) !important;
}

html body main#main > .guest-comforts.section-wrap > .eyebrow {
  color: #6f5b2e !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.45rem !important;
}

html body main#main > .guest-comforts.section-wrap > h2 {
  color: var(--rr-ds-ink) !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: clamp(3.25rem, 6.25vw, 6.25rem) !important;
  font-weight: 400 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.035em !important;
  max-width: 1000px !important;
  margin: 0 0 1.8rem !important;
}

html body main#main > .guest-comforts.section-wrap > h2 em {
  color: #7E672A !important;
  font-family: inherit !important;
  font-weight: 400 !important;
}

html body main#main > .guest-comforts.section-wrap > p:not(.eyebrow) {
  color: var(--rr-ds-muted) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
  line-height: 1.75 !important;
  max-width: 690px !important;
  margin: 0 !important;
}

html body main#main > .guest-comforts.section-wrap .comforts-grid {
  margin-top: clamp(48px, 5vw, 72px) !important;
  gap: clamp(28px, 4vw, 52px) !important;
}

html body main#main > .guest-comforts.section-wrap .comforts-grid article {
  border-top: 1px solid var(--rr-ds-line) !important;
  padding-top: 22px !important;
}

html body main#main > .guest-comforts.section-wrap .comforts-grid h3 {
  color: var(--rr-ds-ink) !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.55rem, 2.1vw, 2rem) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.6rem !important;
}

html body main#main > .guest-comforts.section-wrap .comforts-grid p {
  color: var(--rr-ds-muted) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

/* ---------------- Reviews ---------------- */

/* Match likely homepage review section/class variants without touching review behavior. */
html body main#main section.reviews,
html body main#main section.guest-reviews,
html body main#main .reviews-section,
html body main#main .guest-reviews-section,
html body main#main [data-section="reviews"] {
  background: var(--rr-ds-ivory) !important;
  color: var(--rr-ds-ink) !important;
  padding-top: clamp(82px, 8vw, 120px) !important;
  padding-bottom: clamp(88px, 9vw, 132px) !important;
}

html body main#main section.reviews .eyebrow,
html body main#main section.guest-reviews .eyebrow,
html body main#main .reviews-section .eyebrow,
html body main#main .guest-reviews-section .eyebrow,
html body main#main [data-section="reviews"] .eyebrow {
  color: var(--rr-ds-gold-deep) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase !important;
}

html body main#main section.reviews h2,
html body main#main section.guest-reviews h2,
html body main#main .reviews-section h2,
html body main#main .guest-reviews-section h2,
html body main#main [data-section="reviews"] h2 {
  color: var(--rr-ds-ink) !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  line-height: 0.98 !important;
}

html body main#main section.reviews p,
html body main#main section.guest-reviews p,
html body main#main .reviews-section p,
html body main#main .guest-reviews-section p,
html body main#main [data-section="reviews"] p {
  font-family: "Inter", Arial, sans-serif !important;
}

/* Review cards: visual-only treatment */
html body main#main section.reviews article,
html body main#main section.guest-reviews article,
html body main#main .reviews-section article,
html body main#main .guest-reviews-section article,
html body main#main [data-section="reviews"] article,
html body main#main section.reviews .review-card,
html body main#main section.guest-reviews .review-card,
html body main#main .reviews-section .review-card,
html body main#main .guest-reviews-section .review-card {
  background: var(--rr-ds-card) !important;
  color: var(--rr-ds-ink) !important;
  border: 1px solid var(--rr-ds-line) !important;
  box-shadow: none !important;
}

html body main#main section.reviews article *,
html body main#main section.guest-reviews article *,
html body main#main .reviews-section article *,
html body main#main .guest-reviews-section article *,
html body main#main [data-section="reviews"] article * {
  color: inherit;
}

html body main#main section.reviews button,
html body main#main section.guest-reviews button,
html body main#main .reviews-section button,
html body main#main .guest-reviews-section button,
html body main#main [data-section="reviews"] button {
  font-family: "Inter", Arial, sans-serif !important;
}

/* preserve gold accents/stars/buttons where present */
html body main#main section.reviews .star,
html body main#main section.guest-reviews .star,
html body main#main .reviews-section .star,
html body main#main .guest-reviews-section .star,
html body main#main [data-section="reviews"] .star,
html body main#main section.reviews [aria-label*="star" i],
html body main#main section.guest-reviews [aria-label*="star" i],
html body main#main .reviews-section [aria-label*="star" i],
html body main#main .guest-reviews-section [aria-label*="star" i] {
  color: var(--rr-ds-gold) !important;
}

/* ---------------- Mobile refinement ---------------- */

@media (max-width: 760px) {
  html body main#main > .guest-comforts.section-wrap {
    padding-top: 46px !important;
    padding-bottom: 68px !important;
  }

  html body main#main > .guest-comforts.section-wrap > h2 {
    font-size: clamp(2.75rem, 13vw, 4rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
  }

  html body main#main > .guest-comforts.section-wrap .comforts-grid {
    margin-top: 42px !important;
    gap: 30px !important;
  }

  html body main#main section.reviews,
  html body main#main section.guest-reviews,
  html body main#main .reviews-section,
  html body main#main .guest-reviews-section,
  html body main#main [data-section="reviews"] {
    padding-top: 62px !important;
    padding-bottom: 78px !important;
  }
}/* ============================================================
   v3 refinements — approved after desktop/mobile review
   ============================================================ */

/* Match "Lasting memories." to the same refined gold family used
   in the approved Guest Comforts treatment. */
html body main#main .reviews-section h2 em,
html body main#main .reviews-section h2 i,
html body main#main .reviews-section .section-title em,
html body main#main .reviews-section .section-title i {
  color: #7E672A !important;
}

/* Mobile review quote typography: preserve hierarchy while
   reducing excessive card height. */
@media (max-width: 760px) {
  html body main#main .reviews-section .review-card > p:first-of-type,
  html body main#main .reviews-section article > p:first-of-type,
  html body main#main .reviews-section .review-text,
  html body main#main .reviews-section .review-quote {
    font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
    line-height: 1.22 !important;
  }
}/* ============================================================
   THE RUSTIC RESERVE — HOMEPAGE TYPOGRAPHY FOUNDATION v4
   Goal: one luxury visual language across the homepage.
   Typography/color only. Layouts, backgrounds, behaviors,
   galleries, accordions, booking, review controls and JS remain.
   ============================================================ */

:root {
  --rr-luxury-ivory: #F4F0E7;
  --rr-luxury-ink: #27241F;
  --rr-luxury-muted-light: #BFB6A6;
  --rr-luxury-muted-dark: #6E665A;
  --rr-luxury-gold: #D8B464;
  --rr-luxury-gold-deep: #7E672A;
  --rr-luxury-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --rr-luxury-sans: "Inter", Arial, sans-serif;
}

/* One sans family for homepage utility/body language. */
html body main#main {
  font-family: var(--rr-luxury-sans) !important;
}

/* Major editorial headings: one display family everywhere. */
html body main#main > section.hero h1,
html body main#main > section.intro h2,
html body main#main > section.guest-comforts h2,
html body main#main > section.photo-section h2,
html body main#main > section.sleeping h2,
html body main#main > section.amenities h2,
html body main#main > section.deck-story h2,
html body main#main > section.rr-airbnb-recognition h2,
html body main#main > section.reviews-section h2,
html body main#main > section.location h2,
html body main#main > section.experiences h2,
html body main#main > section.faq-section h2,
html body main#main > section.reserve-closing h2 {
  font-family: var(--rr-luxury-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}

/* Consistent expressive italic treatment. Dark sections use champagne;
   approved ivory sections retain the deeper refined gold. */
html body main#main > section.hero h1 em,
html body main#main > section.intro h2 em,
html body main#main > section.photo-section h2 em,
html body main#main > section.sleeping h2 em,
html body main#main > section.amenities h2 em,
html body main#main > section.deck-story h2 em,
html body main#main > section.location h2 em,
html body main#main > section.experiences h2 em,
html body main#main > section.faq-section h2 em,
html body main#main > section.reserve-closing h2 em {
  font-family: var(--rr-luxury-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--rr-luxury-gold) !important;
}

html body main#main > section.guest-comforts h2 em,
html body main#main > section.reviews-section h2 em {
  font-family: var(--rr-luxury-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--rr-luxury-gold-deep) !important;
}

/* All homepage eyebrow labels follow one system. */
html body main#main .eyebrow {
  font-family: var(--rr-luxury-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase !important;
}

/* Dark-section eyebrows use champagne; ivory sections use deeper gold. */
html body main#main > section:not(.guest-comforts):not(.reviews-section) .eyebrow {
  color: var(--rr-luxury-gold) !important;
}

html body main#main > section.guest-comforts .eyebrow,
html body main#main > section.reviews-section .eyebrow {
  color: #6f5b2e !important;
}

/* Card/subsection headings that are editorial rather than controls. */
html body main#main .guest-comforts .comforts-grid h3,
html body main#main .sleeping h3,
html body main#main .amenities h3,
html body main#main .experiences h3,
html body main#main .location h3 {
  font-family: var(--rr-luxury-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
}

/* Utility and action language remains crisp sans-serif. */
html body main#main button,
html body main#main .button,
html body main#main .cta,
html body main#main .eyebrow,
html body main#main .reviewer-meta,
html body main#main .reviewer-meta-line,
html body main#main .room-gallery-meta {
  font-family: var(--rr-luxury-sans) !important;
}

/* Review quotations remain editorial serif for a richer testimonial feel. */
html body main#main .reviews-section .review-card > p:first-of-type,
html body main#main .reviews-section article > p:first-of-type,
html body main#main .reviews-section .review-text,
html body main#main .reviews-section .review-quote {
  font-family: var(--rr-luxury-display) !important;
  font-weight: 400 !important;
}

/* Keep approved ivory-section text tones consistent. */
html body main#main > section.guest-comforts,
html body main#main > section.reviews-section {
  color: var(--rr-luxury-ink) !important;
}

html body main#main > section.guest-comforts p:not(.eyebrow),
html body main#main > section.reviews-section .reviewer-meta,
html body main#main > section.reviews-section .reviewer-meta-line {
  font-family: var(--rr-luxury-sans) !important;
}

/* Mobile: preserve the approved visual hierarchy without introducing
   new section-specific type scales. */
@media (max-width: 760px) {
  html body main#main .eyebrow {
    letter-spacing: 0.15em !important;
  }
}