/* Tokens, reset, typography and shared section layout.
   Web fonts are loaded from index.html <head> (preconnect + stylesheet) so they don't block behind this file. */

:root {
  /* Palette: base #F4F1E1 / text & headings #6C100A / secondary #8D6F4D / soft accent #ECCE84 */
  --wine: #6c100a;
  --wine-dark: #520c07;
  --gold: #8d6f4d;
  --accent: #ecce84;
  --accent-soft: #f1e6c4;
  --olive: #8d6f4d;
  --ivory: #f4f1e1;
  --cream: #ede6cf;
  --paper: #faf8ee;
  --ink: #6c100a;
  --muted: #75593c;
  --line: #ddd0b3;
  --on-wine: #f4f1e1;
  /* Approved type system: Cormorant Garamond for large headings, Allura for
     short handwritten accents, and Be Vietnam Pro for UI and body copy:
       display  400  h1 / h2 section titles
       title    500  card titles (location, room, form)
       strong   600  small titles, list items, menu, form labels, lead text
       label    700  UPPERCASE eyebrows, kickers, buttons, text links
       body     500  paragraphs, captions */
  --serif: "Cormorant Garamond", serif;
  --sans: "Be Vietnam Pro", sans-serif;
  --script: "Allura", cursive;
  --fw-display: 400;
  --fw-title: 500;
  --fw-strong: 600;
  --fw-label: 700;
  --fw-body: 500;
  --shell: min(1240px, calc(100% - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: var(--fw-body); font-variant-numeric: lining-nums; line-height: 1.75; }
body.modal-open { overflow: hidden; }
img { display: block; width: 100%; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding: 132px 0; }
.nowrap { white-space: nowrap; }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: var(--fw-display); }
h3 { font-family: var(--sans); font-weight: var(--fw-title); }
/* Handwritten accent: only for 1-2 short words wrapped in <em> inside a heading */
h1 em, h2 em { padding: 0 .06em; color: var(--gold); font-family: var(--script); font-size: 1.45em; font-style: normal; font-weight: 400; line-height: .7; letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: clamp(2.3rem, 3.8vw, 3.7rem); font-weight: var(--fw-display); line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; }
.eyebrow, .card-kicker { margin: 0 0 18px; color: var(--muted); font-size: .68rem; font-weight: var(--fw-label); letter-spacing: .24em; text-transform: uppercase; }

/* Heading on the left, short intro on the right (locations, gallery) */
.section-intro { display: grid; align-items: end; grid-template-columns: 1fr .75fr; gap: 8%; }
.section-intro > p { max-width: 470px; margin: 0 0 7px; color: var(--muted); }

/* Scroll reveal (see js/effects/reveal.js) */
.js .reveal { opacity: .96; transform: translateY(8px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.revealed { opacity: 1; transform: translateY(0); }
.js .reveal-delay-1 { transition-delay: .06s; }

@media (max-width: 1100px) {
  .section { padding: 104px 0; }
}

@media (max-width: 800px) {
  :root { --shell: min(100% - 36px, 650px); }
  .section { padding: 84px 0; }
  h2 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .section-intro { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 28px); }
  body { font-size: 14px; }
  .section { padding: 68px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}