/* ==========================================================================
   Diana Alexandra Martinez  &  Zach Zelner
   Monte Carlo, Monaco  ·  Villa La Vigie  ·  June 8 to 10, 2027
   --------------------------------------------------------------------------
   Stylesheet — an embossed Riviera invitation suite.
   Sections:  1 Tokens  2 Base  3 Decorative relief  4 Header & nav
              5 Crest   6 Hero  7 Page hero  8 Buttons  9 Layout
              10 Section heads  11 Cards & panels  12 Footer
              13 Reveal  14 Responsive  15 Reduced motion
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --ivory:        #faf9f4;
  --ivory-deep:   #f2f0e7;
  --porcelain:    #fffefb;
  --white:        #ffffff;
  --pearl:        #ece7da;
  --champagne:    #c9b68b;
  --champagne-deep:#a98f57;
  --bronze:       #7c6a40;          /* eyebrow / label text — legible */
  --pearl-face:   radial-gradient(circle at 35% 30%, #ffffff 0%,
                  #fbf7ec 27%, #ece0c4 59%, #d3c098 83%, #bda874 100%);
  --line:         rgba(170,148,101,0.34);
  --line-soft:    rgba(170,148,101,0.20);
  --ink:          #37312a;
  --ink-soft:     #574f42;
  --muted:        #6a6254;

  --serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:   "Inter", "Helvetica Neue", Arial, sans-serif;
  --script: "Pinyon Script", "Cormorant Garamond", cursive;
  --regal:  "Cinzel", "Cormorant Garamond", Georgia, serif;

  --shadow:    0 26px 58px -30px rgba(54,44,28,0.40);
  --shadow-lg: 0 44px 96px -44px rgba(54,44,28,0.46);
  --emboss:    inset 0 1px 0 rgba(255,255,255,0.9),
               inset 0 -1px 0 rgba(170,148,101,0.10);

  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2. BASE ----------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* --header-h is measured live by script.js from the fixed bar */
  --header-h: 10.25rem;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* soft pressed-paper ground behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-color: var(--ivory);
  background-image:
    url("assets/paper-texture.svg"),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.82), transparent 62%),
    radial-gradient(ellipse at 50% 100%, rgba(236,231,218,0.4), transparent 58%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 300px 300px, 100% 100%, 100% 100%;
}

/* a whisper of Chantilly lace over the paper */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: url("assets/chantilly-lace.svg") 0 0 / 232px 232px repeat;
  opacity: 0.3;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.06;
  margin: 0;
  letter-spacing: 0.005em;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

::selection { background: rgba(201,182,139,0.42); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--champagne-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  left: 1rem; top: 1rem;
  z-index: 200;
  transform: translateY(-220%);
  background: var(--ink);
  color: var(--porcelain);
  padding: 0.8rem 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 200ms var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* shared label / eyebrow ------------------------------------------------- */
.eyebrow {
  margin: 0 0 1.1rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* ornamental hairline divider ------------------------------------------- */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 1.4rem auto 0;
}
.divider::before,
.divider::after {
  content: "";
  height: 1px;
  width: clamp(34px, 8vw, 70px);
  background: linear-gradient(90deg, transparent, var(--champagne-deep), transparent);
}
.divider i {
  width: 12px; height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--pearl-face);
  box-shadow: 0 1px 3px rgba(120,104,70,0.4),
              inset 0 -1px 2px rgba(150,130,90,0.32),
              inset 0 1px 2px rgba(255,255,255,0.72);
}
.divider--light::before,
.divider--light::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); }
.divider--light i { border-color: rgba(255,255,255,0.85); }

/* 3. DECORATIVE RELIEF --------------------------------------------------- */
/* The all-over Chantilly lace ground (see body::before) now carries the
   floral texture, so the large corner blooms are retired. The .bloom
   elements remain in the markup — un-hide here to bring them back. */
.bloom { display: none; }

/* 4. HEADER & NAV -------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--ink);
  background: rgba(250,249,244,0.9);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(16px);
  transition: background 320ms var(--ease), border-color 320ms var(--ease),
              color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.site-header.is-solid {
  box-shadow: 0 16px 38px -32px rgba(54,44,28,0.55);
}
/* over the cinematic hero, let the header dissolve so the crest can rise
   through it; restored as soon as the page scrolls. */
body:has(.hero) .site-header:not(.is-solid) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  color: var(--white);
}
body:has(.hero) .site-header:not(.is-solid) .nav-list a[aria-current="page"] {
  color: var(--champagne);
}

.header-inner {
  max-width: 1640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.05rem clamp(1.4rem, 4vw, 3.4rem);
}
/* the ambient-music toggle lives at the far right; mirror its footprint on
   the left so the nav groups (and the centre crest) stay symmetric about the
   page centre rather than drifting left. */
.header-inner::before {
  content: "";
  flex: none;
  width: 3rem;
}

.nav-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  /* a floor under the spacing: space-between alone lets the words touch
     once the header runs out of room. */
  gap: clamp(0.85rem, 1.6vw, 2.2rem);
}
.nav-list--left  { flex: 1; justify-content: space-around; }
.nav-list--right { flex: 1; justify-content: space-around; }

/* HOME header has no center crest badge in the nav, so the two groups
   otherwise collapse toward the middle and sit over the large hero crest.
   Spread each group edge-to-edge and reserve a clear centre for the crest.
   (Targets only the brand-less home header; inner pages keep their badge.) */
.header-inner:not(:has(.brand)) .nav-list--left,
.header-inner:not(:has(.brand)) .nav-list--right {
  justify-content: space-between;
}
.header-inner:not(:has(.brand)) .nav-list--left  { padding-right: clamp(1rem, 8vw, 13rem); }
.header-inner:not(:has(.brand)) .nav-list--right { padding-left:  clamp(1rem, 8vw, 13rem); }

.nav-list a {
  position: relative;
  font-size: clamp(0.62rem, 0.34vw + 0.42rem, 0.72rem);
  font-weight: 500;
  letter-spacing: clamp(0.11em, 0.16vw + 0.02em, 0.2em);
  text-transform: uppercase;
  padding: 0.35rem 0;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms var(--ease);
}
.nav-list a:hover::after,
.nav-list a:focus-visible::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--champagne-deep); }
.nav-list a[aria-current="page"]::after { transform: scaleX(1); opacity: 0.5; }

.brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.4rem;
}
.brand .crest { width: 2.9rem; height: 3.4rem; }
/* the ornate commissioned crest, used as the brand badge in the header.
   Sized small so it sits comfortably between the left nav and right nav. */
.brand__crest {
  display: block;
  width: clamp(4.5rem, 6.25vw, 6rem);
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(120,104,70,0.18));
  transition: filter 220ms var(--ease);
}
body:has(.hero) .site-header:not(.is-solid) .brand__crest {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}

/* ambient-music toggle ---------------------------------------------------
   A small ♪ button injected by script.js, sitting at the far right of the
   header. Hidden until the audio file is actually available; gets a slash
   over the note when the guest mutes it. Colour follows the surrounding
   header text so it stays legible over the cinematic hero AND the ivory
   inner pages. */
.music-toggle {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  margin-left: 0.7rem;
  padding: 0;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 220ms var(--ease), background 220ms var(--ease);
}
.music-toggle:hover,
.music-toggle:focus-visible {
  opacity: 1;
  background: rgba(201,182,139,0.10);
}
.music-toggle__ico {
  width: 1.05rem;
  height: 1.05rem;
}
.music-toggle__cut {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.45rem;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
  transform-origin: center;
  transition: transform 220ms var(--ease);
}
.music-toggle.is-muted { opacity: 0.55; }
.music-toggle.is-muted .music-toggle__cut {
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
}

/* mobile menu trigger */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.9rem; height: 2.9rem;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex: none;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 16px; height: 1.4px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 240ms var(--ease), opacity 160ms var(--ease);
}
.nav-toggle span { top: 50%; }
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateX(-50%) translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateX(-50%) translateY(-5px) rotate(-45deg); }

/* mobile dropdown panel */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: rgba(250,249,244,0.98);
  backdrop-filter: blur(16px);
  color: var(--ink);
  overflow: hidden;
  max-height: 0;
  transition: max-height 360ms var(--ease);
}
.mobile-nav.is-open { max-height: 80vh; }
.mobile-nav ul {
  list-style: none;
  margin: 0; padding: 0.6rem clamp(1.1rem, 4vw, 2.6rem) 1.4rem;
}
.mobile-nav a {
  display: block;
  padding: 0.95rem 0.2rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav li:last-child a { border-bottom: 0; }
.mobile-nav a[aria-current="page"] { color: var(--champagne-deep); }

/* 5. CREST --------------------------------------------------------------- */
.crest {
  display: inline-block;
  line-height: 0;
}
.crest-svg { width: 100%; height: 100%; overflow: visible; }
.crest-letter {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 45px;
  fill: currentColor;
}
.crest-amp {
  font-family: var(--script);
  font-size: 23px;
  fill: var(--champagne-deep);
}
.crest--lg { width: 8.6rem; height: 10.1rem; }
.crest--md { width: 5.8rem; height: 6.8rem; }
.crest--sm { width: 4rem; height: 4.7rem; }

/* 6. HERO (home) — the cinematic video opening -------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: start center;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  text-align: center;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,17,13,0.52) 0%, rgba(20,17,13,0.22) 32%,
                    rgba(20,17,13,0.30) 64%, rgba(20,17,13,0.62) 100%),
    radial-gradient(circle at 50% 42%, rgba(20,17,13,0.05), rgba(20,17,13,0.42));
}
.hero__inner {
  width: min(1080px, 96vw);
  padding: 0 1rem 3rem;
}
/* the commissioned crest — on its own cream paper, shaped to the crest
   itself (no square) and resting on the film with a soft shadow */
.hero__emblem { margin: 0; font-weight: 400; }
.hero__crest {
  display: block;
  width: auto;
  height: auto;
  max-width: min(540px, 64vw);
  max-height: 72svh;
  margin: 0 auto;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,0.5));
}

/* text-led hero variant (used on Our Story over the engagement film) */
.hero--story .hero__inner {
  padding: 9rem 1rem 5rem;
}
.hero__eyebrow {
  margin: 0 0 1.2rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 8vw, 6.4rem);
  line-height: 1;
  color: var(--white);
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
}
.hero__sub {
  margin: 1.5rem auto 0;
  max-width: 38ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 42px;
  background: linear-gradient(rgba(255,255,255,0.7), transparent);
}

.video-control {
  position: absolute;
  right: clamp(1rem, 4vw, 2.6rem);
  bottom: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 1.05rem;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  background: rgba(20,17,13,0.28);
  color: var(--white);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.video-control:hover { background: rgba(20,17,13,0.5); border-color: rgba(255,255,255,0.85); }

/* 7. PAGE HERO (inner pages) — soft white chapter header --------------- */
.page-hero {
  position: relative;
  min-height: 42vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 9.5rem 1rem 3.5rem;
}
.page-hero__inner { width: min(760px, 92vw); }
.page-hero__crest {
  display: block;
  width: clamp(11rem, 20vw, 16rem);
  height: auto;
  margin: 0 auto 1.6rem;
  filter: drop-shadow(0 6px 14px rgba(120,104,70,0.22));
}
.page-hero .eyebrow { color: var(--bronze); }
.page-hero h1 {
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.9rem);
  color: var(--ink);
}
.page-hero__sub {
  margin: 1.2rem auto 0;
  max-width: 42ch;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: var(--ink-soft);
}

/* Wedding hero — no visible title: give the eyebrow its own breathing
   room and pull the bottom of the hero in closer to the itinerary */
.page-hero--untitled { padding-bottom: 1.5rem; }
.page-hero--untitled .eyebrow { margin: 0; padding: 1.2rem 0 1.4rem; }
.page-hero--untitled .page-hero__sub { margin-top: 0; }

/* Registry / Questions heroes have no subtitle — tighten them and pull the
   first panel up close to the title */
.page-hero[aria-label="Registry"],
.page-hero[aria-label="Questions"],
.page-hero[aria-label="Reply to the invitation"] {
  min-height: auto;
  padding-bottom: 1.25rem;
}
.section[aria-labelledby="registry-title"],
.section[aria-label="Frequently asked questions"],
.section[aria-label="Reply to the invitation"] {
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
}

/* photo variant of page-hero — used on Travel & Stay (and any inner page
   that wants a cinematic landscape backdrop). Background image is set via
   inline style on the section so each page can choose its own.            */
.page-hero--photo {
  min-height: 62vh;
  padding: 10rem 1rem 5rem;
  background-color: var(--ink);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.page-hero--photo::before {
  /* soft dark scrim so the title stays legible over the photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(20,17,13,0.42) 0%,
      rgba(20,17,13,0.18) 30%,
      rgba(20,17,13,0.28) 64%,
      rgba(20,17,13,0.58) 100%);
}
.page-hero--photo .eyebrow {
  color: rgba(255, 248, 228, 0.92);
}
.page-hero--photo h1 {
  color: var(--white);
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
}
.page-hero--photo .page-hero__sub {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* feature figure — a single embossed photo card with a soft caption,
   used inline within a section. (Kept for future use; no current page
   references it.)                                                       */
.feature-figure {
  position: relative;
  margin: 0 auto clamp(2.4rem, 4vw, 3.6rem);
  max-width: 520px;
  padding: 12px;
  background:
    linear-gradient(158deg, var(--white), var(--porcelain) 48%, var(--ivory-deep));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--emboss), var(--shadow-lg);
}
.feature-figure::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
.feature-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}
.feature-figure__caption {
  margin: 1rem 0 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.04rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* SECTION HERO — a chapter-intro photo banner inside a section. Used on
   Travel for "Arriving in Monaco" with the Côte d'Azur aerial behind.   */
.section-hero {
  position: relative;
  width: 100%;
  margin: 0 auto clamp(3rem, 5vw, 4.4rem);
  overflow: hidden;
  isolation: isolate;
}
.section-hero--photo {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(5rem, 9vw, 8rem) 1.25rem;
  background-color: var(--ink);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--white);
}
.section-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(20,17,13,0.40) 0%,
      rgba(20,17,13,0.18) 30%,
      rgba(20,17,13,0.30) 64%,
      rgba(20,17,13,0.58) 100%);
}
.section-hero__inner {
  width: min(820px, 92vw);
}
.section-hero--photo .eyebrow {
  color: rgba(255, 248, 228, 0.92);
  margin-bottom: 1.1rem;
}
.section-hero--photo h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.04;
  color: var(--white);
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
  margin: 0;
}

/* a light-tone variant of the existing .divider for use over photo heroes */
.divider--light::before,
.divider--light::after {
  background: linear-gradient(90deg, transparent, rgba(255,250,232,0.55) 50%, transparent);
}
.divider--light i {
  background: rgba(255,250,232,0.85);
  box-shadow: 0 0 0 1px rgba(255,250,232,0.5),
              0 0 14px 4px rgba(255,250,232,0.18);
}

/* ARRIVING SECTION — full-bleed photo with title + 3 cards overlaid.
   The image shows at its full aspect ratio (no cropping); a soft scrim
   keeps the text and cards readable. On mobile, layout reverts to a
   normal stack so the cards have room to breathe.                       */
.arriving-section {
  position: relative;
  width: 100%;
  margin: clamp(2rem, 4vw, 3.5rem) auto;
  isolation: isolate;
  color: var(--white);
  overflow: hidden;
}
.arriving-section__image {
  display: block;
  width: 100%;
  height: auto;
}
.arriving-section__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20,17,13,0.42) 0%,
      rgba(20,17,13,0.12) 22%,
      rgba(20,17,13,0.18) 55%,
      rgba(20,17,13,0.72) 100%);
}
.arriving-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem);
}
.arriving-section__head {
  text-align: center;
  align-self: start;
  max-width: 820px;
  margin: 0 auto;
}
.arriving-section__head .eyebrow {
  color: rgba(255, 248, 228, 0.92);
  margin-bottom: 1rem;
}
.arriving-section__head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: 1.04;
  color: var(--white);
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
  margin: 0;
}

.arriving-section__cards {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 2.2rem);
  max-width: 1620px;
  width: 100%;
  margin: 0 auto;
}

/* glass-style info cards — translucent ivory panels over the photo */
.arriving-card {
  position: relative;
  padding: clamp(2.4rem, 3.8vw, 4rem);
  background: rgba(250, 249, 244, 0.88);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--emboss), var(--shadow-lg);
  text-align: center;
  color: var(--ink);
}
.arriving-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  pointer-events: none;
}
.arriving-card__mark {
  color: var(--champagne-deep);
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
  letter-spacing: 0.2em;
}
.arriving-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.7rem;
}
.arriving-card p {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* mobile: stack the overlay below the image instead of on top of it */
@media (max-width: 780px) {
  .arriving-section { overflow: visible; }
  .arriving-section__scrim { display: none; }
  .arriving-section__overlay {
    position: static;
    padding: 1.4rem 1rem 0;
    grid-template-rows: auto auto;
    gap: 1.4rem;
    color: var(--ink);
  }
  .arriving-section__head .eyebrow { color: var(--bronze); }
  .arriving-section__head h2 {
    color: var(--ink);
    text-shadow: none;
  }
  .arriving-section__head .divider--light::before,
  .arriving-section__head .divider--light::after {
    background: linear-gradient(90deg, transparent, var(--line) 50%, transparent);
  }
  .arriving-section__head .divider--light i {
    background: var(--champagne);
    box-shadow: 0 0 0 1px var(--champagne-deep), 0 0 14px 4px rgba(201,182,139,0.18);
  }
  .arriving-section__cards { grid-template-columns: 1fr; }
  .arriving-card {
    background: linear-gradient(158deg, var(--white), var(--porcelain) 48%, var(--ivory-deep));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* 8. BUTTONS ------------------------------------------------------------- */
.button {
  --bg: var(--ink);
  --fg: var(--porcelain);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0 1.9rem;
  border: 1px solid var(--bg);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease),
              background 220ms var(--ease), color 220ms var(--ease);
}
.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.button--light {
  --bg: rgba(255,255,255,0.94);
  --fg: var(--ink);
  border-color: rgba(255,255,255,0.94);
}
.button--ghost {
  --bg: transparent;
  --fg: currentColor;
  border-color: var(--line);
}
.button--ghost:hover { background: rgba(201,182,139,0.12); }
.button--champagne {
  --bg: var(--champagne);
  --fg: var(--ink);
  border-color: var(--champagne);
}
.button--champagne:hover { --bg: var(--champagne-deep); }
.button--block { width: 100%; }

/* a quiet inline text link with arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}
.text-link::after {
  content: "";
  width: 1.7rem; height: 1px;
  background: var(--champagne-deep);
  transition: width 240ms var(--ease);
}
.text-link:hover::after { width: 2.6rem; }

/* 9. LAYOUT -------------------------------------------------------------- */
.shell {
  width: min(var(--maxw), calc(100% - 2.4rem));
  margin-inline: auto;
}
.section { padding: clamp(4.5rem, 10vw, 8.5rem) 0; }
.section--tight { padding: clamp(3rem, 6vw, 5rem) 0; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__copy p { color: var(--ink-soft); max-width: 46ch; }
.split__copy .button,
.split__copy .text-link { margin-top: 1.6rem; }

/* 10. SECTION HEADS ----------------------------------------------------- */
.s-head {
  max-width: 44rem;
  margin: 0 auto clamp(2.6rem, 6vw, 4.5rem);
  text-align: center;
}
.s-head h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  color: var(--ink);
}
.s-head p {
  margin: 1.2rem auto 0;
  max-width: 38ch;
  color: var(--ink-soft);
}

/* 11. CARDS & PANELS ---------------------------------------------------- */
.panel {
  position: relative;
  background:
    linear-gradient(158deg, var(--white), var(--porcelain) 48%, var(--ivory-deep));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--emboss), var(--shadow);
}
/* engraved inner frame */
.panel--framed::before {
  content: "";
  position: absolute;
  inset: 0.85rem;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  pointer-events: none;
}
.info-panel { padding: clamp(2rem, 4.5vw, 3.4rem); }
.info-panel .eyebrow { margin-bottom: 0.4rem; }

/* centred row beneath a card grid (e.g. "view full schedule") */
.link-row {
  text-align: center;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

/* welcome card --------------------------------------------------------- */
.welcome {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(2.4rem, 6vw, 4.6rem) clamp(1.6rem, 5vw, 4rem);
}
.welcome .crest { color: var(--ink); margin: 0 auto 1.5rem; }
.welcome .eyebrow { color: var(--bronze); }
.welcome__lead {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 2.05rem);
  line-height: 1.42;
  color: var(--ink-soft);
  margin: 1.4rem auto 0;
  max-width: 38ch;
}
.welcome__date {
  margin: 1.6rem auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: 0.04em;
  color: var(--champagne-deep);
}

/* Our Story page — show the full engagement photo edge-to-edge at its
   natural portrait proportions, with the chapter title floating in the
   sky band above the couple's heads. */
.welcome--cinematic.welcome--story-hero {
  aspect-ratio: 2894 / 3983;
}
.welcome--cinematic.welcome--story-hero .welcome__bg {
  object-fit: cover;
  object-position: center center;
}
/* no dark scrim — the story now sits inside its own embossed card */
.welcome--cinematic.welcome--story-hero::before { display: none; }

/* the overlay is now a real ivory text card, floated in the upper third
   of the photo with the image visible as a border on every side. */
.welcome--cinematic.welcome--story-hero .welcome__overlay {
  position: absolute;
  top: clamp(2rem, 4svh, 4.5rem);
  left: 50%;
  bottom: auto;
  transform: translateX(-50%);
  width: calc(100% - clamp(2rem, 6vw, 5rem));
  max-width: 44rem;
  padding: clamp(2.4rem, 4.5vw, 3.6rem) clamp(2rem, 4.5vw, 3.2rem);
  background:
    linear-gradient(158deg, var(--white), var(--porcelain) 48%, var(--ivory-deep));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--emboss), var(--shadow-lg);
  text-align: center;
  color: var(--ink);
}
.welcome--cinematic.welcome--story-hero .welcome__overlay .eyebrow {
  color: var(--bronze);
  margin: 0 0 0.9rem;
}
/* Narrow screens: the story card's text wraps to many more lines than the
   photo's fixed 2894/3983 box allows, and the card was being clipped by the
   container's overflow. Let the container take its height from the card
   instead, keeping the photo behind it and a band of it visible below. */
@media (max-width: 900px) {
  .welcome--cinematic.welcome--story-hero {
    aspect-ratio: auto;
  }
  .welcome--cinematic.welcome--story-hero .welcome__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .welcome--cinematic.welcome--story-hero .welcome__overlay {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    transform: none;
    width: calc(100% - clamp(1.25rem, 5vw, 3rem));
    margin: clamp(1.75rem, 6vw, 3.5rem) auto clamp(5rem, 20vw, 9rem);
  }
}

.story__title-overlay {
  margin: 0 0 1.3rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.16;
  color: var(--ink);
  text-shadow: none;
}
.welcome__story {
  text-align: left;
  margin: 0 auto;
  max-width: 52ch;
}
.welcome__story p {
  margin: 0 0 0.85rem;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.18vw, 1.06rem);
  line-height: 1.65;
  color: var(--ink-soft);
  text-shadow: none;
}
.welcome__story p:last-child { margin-bottom: 0; }
.welcome--cinematic.welcome--story-hero .signature {
  display: block;
  margin: 1.2rem auto 0;
  color: var(--champagne-deep);
  text-shadow: none;
  font-size: clamp(2rem, 4vw, 2.8rem);
  text-align: center;
}

/* Our Story page — italic serif title, bolder weight, sitting above the
   prose paragraphs of the love story itself. */
.story__title {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.18;
  color: var(--ink);
  margin: 0.4rem auto 1.8rem;
  max-width: 22ch;
}
.welcome--story p {
  margin-left: auto;
  margin-right: auto;
  max-width: 56ch;
  text-align: left;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.7;
}
.welcome--story .signature {
  margin-top: 1.8rem;
}

/* let the cinematic welcome butt directly against the hero film above */
.section:has(.welcome--cinematic) { padding-top: 0; }

/* cinematic welcome card — engagement portrait spans the full viewport
   width like the film above it; copy sits overlaid at the bottom over a
   soft scrim so the couple's faces stay clear above. */
.welcome--cinematic {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  isolation: isolate;
  background: var(--ivory-deep);
  box-shadow: none;
  aspect-ratio: 16 / 9;
}
.welcome__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* gradient scrim, fading from clear over the faces to deep ivory shadow at
   the bottom where the text sits. */
.welcome--cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(20, 17, 13, 0.00) 0%,
    rgba(20, 17, 13, 0.00) 52%,
    rgba(20, 17, 13, 0.18) 65%,
    rgba(20, 17, 13, 0.68) 100%
  );
  pointer-events: none;
}
/* hide the inherited scalloped lace; the photo carries the embossed feel */
.welcome--cinematic::after { display: none !important; }

.welcome--cinematic .welcome__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 3rem)
          clamp(1.6rem, 3.5vw, 2.6rem);
  text-align: center;
  color: var(--white);
}
.welcome--cinematic .eyebrow {
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 1rem;
}
.welcome--cinematic .welcome__lead {
  margin: 0 auto;
  max-width: 38ch;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.welcome--cinematic .welcome__date {
  margin: 1rem auto 0;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.welcome--cinematic .signature {
  display: block;
  margin-top: 0.6rem;
  color: var(--white);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}

@media (max-width: 760px) {
  .welcome--cinematic { aspect-ratio: 3 / 4; }
  .welcome--cinematic .welcome__lead { font-size: 1.1rem; }
}
.signature {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--script);
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  line-height: 1;
  color: var(--champagne-deep);
}
/* Signature marks (gold), set inline where the script names were */
.signature__mark {
  display: inline-block;
  height: 0.78em;
  width: auto;
  margin-left: 0.12em;
  vertical-align: -0.16em;
}
/* Diana's signature, 15% larger than Zach's */
.signature__mark--diana {
  height: 0.897em;
  margin-left: 0;
  vertical-align: -0.22em;
}
/* the ampersand between the two signatures, at half size */
.signature__amp {
  font-size: 0.5em;
  vertical-align: 0.18em;
  margin: 0 0.05em;
}

/* registry call-to-action button spacing */
.registry-cta {
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  text-align: center;
}

/* countdown ------------------------------------------------------------ */
.countdown {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 3rem);
}
.countdown .eyebrow { color: var(--bronze); margin-bottom: 1.6rem; }
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 2vw, 1.4rem);
}
.countdown__cell { position: relative; }
.countdown__cell + .countdown__cell::before {
  content: "";
  position: absolute;
  left: 0; top: 18%;
  height: 52%;
  width: 1px;
  background: var(--line);
}
.countdown__num {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 1;
  color: var(--ink);
}
.countdown__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* event cards ---------------------------------------------------------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.event-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.4rem, 2.6vw, 2.4rem);
}
.event-card__mark {
  width: 3.1rem; height: 3.1rem;
  margin: 0 auto 1.4rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--champagne-deep);
}
.event-card__mark svg { width: 1.4rem; height: 1.4rem; }
.event-card__day {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.5rem;
}
.event-card__date {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.3vw, 2.6rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.event-card__name {
  font-family: var(--serif);
  font-size: clamp(1.42rem, 2.3vw, 1.72rem);
  font-style: italic;
  font-weight: 600;
  color: var(--champagne-deep);
  margin-top: 0.55rem;
}
.event-card__body {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.event-card__attire {
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne-deep);
}
.event-card__attire--sub {
  margin-top: 0.5rem;
  font-size: 0.82em;
  letter-spacing: 0.14em;
  color: var(--bronze);
}
.event-card__note {
  margin-top: auto;
  padding-top: 1.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* keep all three schedule cards the same colour (no warmer feature tint) */
.event-card--feature {
  background:
    linear-gradient(158deg, var(--white), var(--porcelain) 48%, var(--ivory-deep));
}
.event-card--feature .event-card__mark {
  background: transparent;
  border-color: var(--line);
  color: var(--champagne-deep);
}

.event-card { position: relative; }

/* Larger, more generous schedule cards that fill the row — used on both the
   Our Wedding schedule and the Home celebration preview */
.section[aria-label="Weekend schedule"] .event-grid,
.section[aria-labelledby="weekend-preview-title"] .event-grid {
  --sched-w: min(1440px, calc(100vw - 2rem));
  width: var(--sched-w);
  margin-left: calc((100% - var(--sched-w)) / 2);
  gap: clamp(1.4rem, 2.4vw, 2.6rem);
}
.section[aria-label="Weekend schedule"] .event-card,
.section[aria-labelledby="weekend-preview-title"] .event-card {
  min-height: clamp(400px, 36vw, 600px);
  padding: clamp(2.8rem, 4.5vw, 4.8rem) clamp(2rem, 3vw, 3.4rem);
  /* top-align the cluster so day / date / name line up across all cards;
     the note stays pinned to the bottom so those line up too              */
  justify-content: flex-start;
}
.section[aria-label="Weekend schedule"] .event-card__note,
.section[aria-labelledby="weekend-preview-title"] .event-card__note {
  margin-top: auto;
}

/* framed photograph ---------------------------------------------------- */
.framed-photo {
  position: relative;
  padding: 0.85rem;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--emboss), var(--shadow-lg);
}
.framed-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
/* Home "The Setting" — full-bleed villa photo band with overlaid copy */
.villa-setting {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(460px, 58vw, 780px);
  padding: clamp(3rem, 8vw, 7rem) 1.4rem;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.villa-setting__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,17,13,0.24), rgba(20,17,13,0.44));
}
.villa-setting .eyebrow { color: rgba(255,255,255,0.86); }
.villa-setting h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  color: #fff;
  margin-top: 0.4rem;
}
.villa-setting .button { margin-top: 1.9rem; }
.framed-photo figcaption {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  padding: 0.5rem 1.3rem;
  background: rgba(255,253,249,0.94);
  border: 1px solid var(--line);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  white-space: nowrap;
}

/* detail / note cards -------------------------------------------------- */
.note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.note-card {
  padding: clamp(1.7rem, 3vw, 2.6rem);
  text-align: center;
}
.note-card__mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--champagne-deep);
  margin-bottom: 0.9rem;
}
.note-card h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  color: var(--ink);
}
.note-card p {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* feature list (venue) ------------------------------------------------- */
.feature-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.feature-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.feature-list li::before {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  margin-top: 0.42rem;
  border-radius: 50%;
  background: var(--pearl-face);
  box-shadow: 0 1px 2px rgba(120,104,70,0.32),
              inset 0 1px 1.5px rgba(255,255,255,0.7);
}

/* quote card ----------------------------------------------------------- */
.quote-card {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 22rem;
  padding: clamp(2.4rem, 5vw, 4rem);
}
.quote-card blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.32;
  color: var(--ink-soft);
}
.quote-card cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* attire cards --------------------------------------------------------- */
.attire-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.attire-card {
  padding: clamp(1.7rem, 3vw, 2.8rem);
  text-align: center;
}
.attire-card__num {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--champagne-deep);
}
.attire-card h3 {
  margin-top: 0.7rem;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  color: var(--ink);
}
.attire-card__code {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne-deep);
}
.attire-card p { margin-top: 0.8rem; color: var(--ink-soft); font-size: 0.95rem; }
.attire-card p.attire-card__code + p { margin-top: 0.55rem; }

/* FAQ ------------------------------------------------------------------ */
.faq {
  max-width: 48rem;
  margin: 0 auto;
  overflow: hidden;
}
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem clamp(1.2rem, 3vw, 2.2rem);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--champagne-deep);
  transition: transform 240ms var(--ease);
}
.faq details[open] summary::before { transform: rotate(45deg); }
.faq summary { flex-direction: row-reverse; }
.faq details > *:not(summary) {
  padding: 0 clamp(1.2rem, 3vw, 2.2rem) 1.6rem;
  color: var(--ink-soft);
  margin: 0;
}

/* RSVP form ------------------------------------------------------------ */
.rsvp-card {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.5rem, 4vw, 3.2rem);
}
.rsvp-form .field { margin-bottom: 1.3rem; }
.rsvp-form .field:last-of-type { margin-bottom: 0; }
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.field label,
.field legend,
.field-grid > .field > label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--champagne-deep);
  box-shadow: 0 0 0 3px rgba(201,182,139,0.22);
}
.field input::placeholder,
.field textarea::placeholder { color: #a89e8c; }

.field fieldset {
  margin: 0; padding: 0; border: 0;
}
.checks {
  display: grid;
  gap: 0.6rem;
}
.check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: rgba(255,255,255,0.6);
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 300;
  margin: 0;
}
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--champagne-deep); flex: none; }
.rsvp-form .actions { margin-top: 1.8rem; text-align: center; }
.form-status {
  margin: 1rem 0 0;
  min-height: 1.3rem;
  font-size: 0.85rem;
  color: var(--champagne-deep);
  font-weight: 500;
}
.form-note {
  margin-top: 1.4rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

/* CTA strip ------------------------------------------------------------ */
.cta {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4.4rem) clamp(1.6rem, 5vw, 4rem);
}
.cta .crest { color: var(--ink); margin: 0 auto 1.3rem; }
.cta h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--ink);
}
.cta p { margin: 1rem auto 1.8rem; max-width: 34ch; color: var(--ink-soft); }
/* when the heading sits directly above the button (no paragraph between),
   restore the breathing room the paragraph used to provide                 */
.cta h2 + .button { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* venue + area block ---------------------------------------------------- */
.venue-area {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-areas:
    "photo photo photo"
    "venue rule area";
  gap: clamp(1.8rem, 4vw, 3.4rem);
  padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.8rem, 5vw, 3.4rem);
  align-items: start;
}
.venue-area__photo {
  position: relative;
  grid-area: photo;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--line);
  box-shadow: var(--emboss), 0 22px 48px -30px rgba(54,44,28,0.45);
  background: var(--ivory-deep);
  isolation: isolate;
}
.venue-area__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 5 / 2;
}
/* a soft scrim so the overlaid title stays legible against any sky */
.venue-area__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20,17,13,0.55) 0%,
      rgba(20,17,13,0.20) 30%,
      rgba(20,17,13,0.00) 60%,
      rgba(20,17,13,0.00) 100%);
  pointer-events: none;
}
.venue-area__caption {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(1.4rem, 3vw, 2.4rem);
  padding: 0 clamp(1.2rem, 3vw, 2rem);
  text-align: center;
  color: var(--white);
  z-index: 1;
}
.venue-area__caption .eyebrow {
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 0.7rem;
}
.venue-area__caption h2 {
  color: var(--white);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  margin: 0;
}
.venue-area__caption .venue-area__loc {
  margin: 0.7rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.venue-area__col h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  color: var(--ink);
}
.venue-area__col p { color: var(--ink-soft); }
.venue-area__loc {
  margin-top: 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bronze);
}
.venue-area__col p:not(.venue-area__loc):not(.venue-area__addr) {
  margin-top: 1rem;
}
.venue-area__addr {
  margin-top: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.venue-area__addr span {
  color: var(--champagne-deep);
  font-size: 0.7rem;
}
.venue-area__rule {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
/* archive gallery (Lagerfeld-era photos on the villa page) --------------
   Polaroid-feel scrapbook: small white-mounted prints with a slight tilt
   and a caption pencilled in italic underneath. */
/* framed "archive wall" backdrop — the prints hang inside it like a
   curated gallery wall rather than floating on the page */
.archive-wall {
  /* break out of the shell to fill nearly the whole page width */
  --archive-w: min(1780px, calc(100vw - 2rem));
  width: var(--archive-w);
  max-width: none;
  margin: clamp(1.6rem, 3vw, 2.6rem) 0 0 calc((100% - var(--archive-w)) / 2);
  padding: clamp(2.4rem, 4vw, 4.2rem) clamp(1.8rem, 3.2vw, 3.6rem);
}

.archive-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.4rem, 2.8vw, 2.4rem);
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.archive-photo {
  margin: 0;
  padding: 0.7rem 0.7rem 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--emboss), 0 14px 32px -22px rgba(54,44,28,0.55);
  /* even, larger prints that tile 3-per-row so the section fills nicely */
  width: clamp(16rem, 31%, 28rem);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.archive-photo--feature {
  width: clamp(16rem, 31%, 28rem);
}
.archive-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.archive-photo--feature img { aspect-ratio: 4 / 3; }
.archive-photo figcaption {
  margin-top: 0.65rem;
  padding: 0 0.3rem 0.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}
.archive-photo figcaption em {
  font-style: italic;
  color: var(--ink-soft);
}

/* gentle scrapbook tilt — each print catches the light at a slightly
   different angle */
.archive-photo:nth-child(1) { transform: rotate(-1.6deg); }
.archive-photo:nth-child(2) { transform: rotate(1.2deg); margin-top: 1.1rem; }
.archive-photo:nth-child(3) { transform: rotate(-0.8deg); }
.archive-photo:nth-child(4) { transform: rotate(1.4deg); margin-top: 0.9rem; }
.archive-photo:nth-child(5) { transform: rotate(-1.2deg); }
.archive-photo:nth-child(6) { transform: rotate(1deg); margin-top: 0.9rem; }
.archive-photo:nth-child(7) { transform: rotate(-1.4deg); }
.archive-photo:nth-child(8) { transform: rotate(0.9deg); margin-top: 1rem; }
.archive-photo:nth-child(9) { transform: rotate(-1deg); }
.archive-photo:hover {
  transform: rotate(0) translateY(-3px);
  box-shadow: var(--emboss), var(--shadow-lg);
  z-index: 1;
}

@media (max-width: 760px) {
  .archive-photo,
  .archive-photo--feature { width: clamp(13rem, 44%, 18rem); }
  .archive-photo:nth-child(2),
  .archive-photo:nth-child(4) { margin-top: 0; }
}
@media (max-width: 460px) {
  .archive-photo,
  .archive-photo--feature { width: min(82vw, 20rem); }
}

/* watercolour map inside "The Area" column */
.venue-area__map {
  margin: 1.4rem 0 1rem;
  padding: 0.55rem;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--emboss), 0 14px 32px -22px rgba(54,44,28,0.45);
}
.venue-area__map img {
  display: block;
  width: 100%;
  height: auto;
}
.venue-area__addr-link {
  color: inherit;
  border-bottom: 1px solid var(--line);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.venue-area__addr-link:hover,
.venue-area__addr-link:focus-visible {
  color: var(--champagne-deep);
  border-bottom-color: var(--champagne);
}

.venue-area__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.amenities-row {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.amenities-row li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.amenities-row__mark {
  color: var(--champagne-deep);
  font-size: 0.85rem;
  flex: none;
}

/* recommended stays — 4 across on desktop, tight enough to fit on
   one screen. Grid breaks out of the standard .shell width to give each
   card more breathing room. Compresses to 2 across on tablet, 1 on mobile. */
.hotel-grid {
  /* allow the grid to extend wider than the standard shell, keeping all four
     cards on a single line at a more generous size */
  --hotel-w: min(1800px, calc(100vw - 2rem));
  width: var(--hotel-w);
  margin-left: calc((100% - var(--hotel-w)) / 2);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.8rem);
}
.hotel-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.hotel-card__photo {
  display: block;
  overflow: hidden;
  background: var(--ivory-deep);
}
.hotel-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 600ms var(--ease);
}
.hotel-card__photo:hover img,
.hotel-card__photo:focus-visible img { transform: scale(1.03); }
.hotel-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1rem, 1.6vw, 1.4rem) clamp(1rem, 1.6vw, 1.3rem);
  flex: 1;
}
.hotel-card__tag {
  margin: 0 0 0.55rem;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
}
.hotel-card h3 {
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  color: var(--ink);
  line-height: 1.15;
}
.hotel-card__link {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.hotel-card__link:hover,
.hotel-card__link:focus-visible {
  color: var(--champagne-deep);
  border-bottom-color: var(--champagne);
}
.hotel-card__stars {
  margin: 0.5rem 0 0.2rem;
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  color: var(--champagne-deep);
}
.hotel-card__desc {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.4;
  max-width: 32ch;
}
.hotel-card__meta {
  margin-top: auto;
  padding-top: 0.9rem;
  margin-bottom: 0;
  width: 100%;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.hotel-card__body .hotel-card__meta {
  border-top: 1px solid var(--line-soft);
  padding-top: 0.85rem;
  margin-top: 0.95rem;
}
.hotel-card--feature .hotel-card__meta { margin-top: 0.95rem; }

/* hotel amenities — 2 columns so each label gets enough horizontal room
   to sit on one line (or wrap once cleanly). Larger icons than before.  */
.hotel-amenities {
  list-style: none;
  margin: 0.9rem 0 0.3rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 0.6rem;
  width: 100%;
}
.hotel-amenities li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.42rem;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
  min-height: 3.4rem;     /* keep tile heights consistent across 1-/2-line labels */
}
.hotel-amenities__ico {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--champagne-deep);
  flex: 0 0 auto;
}
.hotel-amenities__ico svg { width: 100%; height: 100%; }

/* keep all four hotel cards the same height even if one has fewer
   amenities — meta line (address) then aligns across the row.           */
.hotel-grid { align-items: stretch; }
.hotel-card { height: 100%; }
.hotel-grid__note {
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-soft);
}
.hotel-grid__note span {
  color: var(--champagne-deep);
  margin-right: 0.5rem;
}

/* explore Monaco — dining & shopping ----------------------------------- */
.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
}
.guide-card {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.8rem, 4vw, 2.8rem);
}
.guide-card .eyebrow { margin-bottom: 0.55rem; }
.guide-card h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-list li {
  padding: 0.95rem 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.guide-list li:first-child { border-top: 0; padding-top: 0.2rem; }
.guide-list li:last-child { padding-bottom: 0.2rem; }
.guide-list__name {
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.guide-list__note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* scalloped lace trim — applied to the invitation cards.
   Placed after the card rules so the padding override wins.            */
.welcome,
.cta,
.rsvp-card { padding-top: clamp(3.8rem, 6.5vw, 5.2rem); }

.welcome::after,
.cta::after,
.rsvp-card::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 1.6rem;
  right: 1.6rem;
  height: 17px;
  background: url("assets/lace-scallop.svg") center top / auto 17px repeat-x;
  pointer-events: none;
}

/* 12. FOOTER ------------------------------------------------------------ */
.site-footer {
  position: relative;
  margin-top: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(233,225,207,0.4));
}
/* a scalloped lace hem along the top of the footer */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 19px;
  background: url("assets/lace-scallop.svg") center top / auto 19px repeat-x;
  pointer-events: none;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(3.2rem, 7vw, 5.5rem) 0 clamp(2.4rem, 5vw, 3.5rem);
}
.footer-brand .crest { color: var(--ink); margin-bottom: 1.1rem; }
.footer-brand__names {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
}
.footer-brand__meta {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col h3 {
  font-size: 0.7rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink-soft);
  transition: color 180ms var(--ease);
}
.footer-col a:hover { color: var(--champagne-deep); }
.footer-note p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.footer-base {
  border-top: 1px solid var(--line-soft);
  padding: 1.6rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 13. REVEAL ANIMATION -------------------------------------------------- */
.has-js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.has-js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.has-js .reveal[data-delay="1"] { transition-delay: 110ms; }
.has-js .reveal[data-delay="2"] { transition-delay: 220ms; }
.has-js .reveal[data-delay="3"] { transition-delay: 330ms; }

/* 13b. GALLERY (Our Story — favourites marquee + lightbox) -------------- */
.gallery-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(2.2rem, 4.5vw, 3.4rem);
}
.gallery-head .eyebrow { color: var(--bronze); margin-bottom: 0.7rem; }
.gallery-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  color: var(--ink);
}
.gallery-head__rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: 1.2rem auto 0;
  background: linear-gradient(90deg, transparent, var(--champagne) 50%, transparent);
}

/* horizontal continuous marquee — JS-driven scroll, supports manual
   drag/swipe/wheel + prev/next buttons. Auto-scrolls when idle; pauses
   on user interaction, resumes after one second. .marquee--double
   modifier stacks two rows that drift in alternating directions.        */
.marquee {
  position: relative;
  width: 100%;
}

/* a single row inside a (possibly multi-row) marquee */
.marquee__row {
  position: relative;
  width: 100%;
}
.marquee--double {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

/* The actual horizontal scroll surface. Mask lives here so the arrow
   buttons (siblings of the scroller) stay fully opaque.                  */
.marquee__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge */
  /* soft ivory fade at left and right edges, blending into the page */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,1) 5%,
    rgba(0,0,0,1) 95%,
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,1) 5%,
    rgba(0,0,0,1) 95%,
    transparent 100%);
}
.marquee__scroller::-webkit-scrollbar { display: none; }
.marquee__scroller:focus { outline: none; }
.marquee__scroller:focus-visible { outline: 2px solid var(--champagne-deep); outline-offset: 4px; border-radius: 4px; }

.marquee__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.8rem);
  width: max-content;
  /* padding sits inside the scroller's overflow box so the hover-scaled
     frame and its drop shadow have room to grow without being clipped.
     The frame scales from its bottom edge, so nearly all the growth
     (~7% of the item height + the 4px lift) goes upward; the bottom
     only needs room for the enlarged drop shadow (~52px). */
  padding: clamp(3.5rem, 5vw, 4.25rem) clamp(1.5rem, 3vw, 2.5rem) 3.75rem;
}

.marquee__item {
  display: block;
  margin: 0;
  transition: transform 360ms var(--ease);
  transform-origin: center bottom;
}
.marquee__item figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* two-line caption beneath each photo: location (line 1) · date (line 2).
   Place may wrap onto a second line if very long.                         */
.marquee__caption {
  margin: 0.8rem 0 0;
  padding: 0 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 34ch;
  pointer-events: none;
}
.marquee__caption-place {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
  max-width: 100%;
  /* allow wrapping onto a second line for long places like
     "Central Park, New York, New York" rather than ellipsizing */
  white-space: normal;
  overflow-wrap: anywhere;
}
.marquee__caption-date {
  margin-top: 0.18rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* hover the whole figure → photo + caption scale together */
.marquee__item:hover,
.marquee__item:focus-within {
  transform: translateY(-4px) scale(1.07);
  z-index: 2;
}
.marquee__item:hover .marquee__caption-date,
.marquee__item:focus-within .marquee__caption-date {
  color: var(--champagne-deep);
}

/* the embossed frame around each photo — variable widths, fixed height */
.marquee__frame {
  position: relative;
  display: block;
  padding: 10px;
  height: clamp(340px, 42vw, 480px);
  width: auto;
  background:
    linear-gradient(158deg, var(--white), var(--porcelain) 48%, var(--ivory-deep));
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--emboss), var(--shadow);
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 360ms var(--ease), box-shadow 360ms var(--ease),
              border-color 360ms var(--ease);
}

/* slightly smaller per-row height when two rows are stacked, so the
   section doesn't dominate the page */
.marquee--double .marquee__frame {
  height: clamp(220px, 25vw, 300px);
}
.marquee__frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
.marquee__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(170,148,101,0.18);
  pointer-events: none;
  z-index: 2;
}
.marquee__frame img {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.marquee__frame:hover,
.marquee__frame:focus-visible {
  box-shadow: var(--emboss), var(--shadow-lg);
  border-color: var(--champagne);
}

/* guide marquee — scrolling cards for dining + shopping on Travel page.
   Uses the same .marquee container/JS as the photo gallery, with a
   different card style (text + reserve/explore button).                  */
/* Monaco Grand Prix — photo banner with a framed ivory card over it */
.gp-section {
  position: relative;
  isolation: isolate;
  background-color: var(--ink);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  text-align: center;
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.4rem, 4vw, 3rem);
  overflow: hidden;
}
.gp-section__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 17, 13, 0.32);
}
.gp-section__inner { width: min(58rem, 100%); margin: 0 auto; }
/* the framed ivory card holding the Grand Prix text */
.gp-card {
  padding: clamp(2.2rem, 4.5vw, 3.6rem) clamp(1.6rem, 4vw, 3.2rem);
  text-align: center;
}
.gp-card .eyebrow { color: var(--bronze); }
.gp-card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  color: var(--ink);
}

.gp-lead {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 auto;
}
.gp-schedule {
  list-style: none;
  margin: clamp(1.8rem, 3.5vw, 2.8rem) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.gp-schedule li {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0 0.6rem;
}
.gp-schedule li + li { border-left: 1px solid var(--line-soft); }
.gp-schedule__day {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}
.gp-schedule__event {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  line-height: 1.22;
  color: var(--ink);
}
.gp-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
}
@media (max-width: 620px) {
  .gp-schedule { grid-template-columns: 1fr; gap: 0; }
  .gp-schedule li { padding: 1rem 0; }
  .gp-schedule li + li { border-left: 0; border-top: 1px solid var(--line-soft); }
}

.guide-section__head {
  text-align: center;
  margin: clamp(2rem, 4vw, 3.4rem) auto 1.6rem;
  max-width: 760px;
}
.guide-section__head--second {
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.guide-section__head .eyebrow { color: var(--bronze); margin-bottom: 0.6rem; }
.guide-section__title {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--ink);
  margin: 0;
}

.guide-marquee {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* a card sitting inside a marquee item — fixed size so all line up */
.guide-mini {
  position: relative;
  display: flex;
  flex-direction: column;
  width: clamp(330px, 30vw, 420px);
  min-height: 220px;
  background:
    linear-gradient(158deg, var(--white), var(--porcelain) 48%, var(--ivory-deep));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--emboss), var(--shadow);
  text-align: center;
  overflow: hidden;
}
.guide-mini::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
}

/* restaurant photo at the top of a dining card */
.guide-mini__photo {
  display: block;
  /* sit inside the card's hairline frame (inset 6px) like a matted print,
     rather than bleeding to the card edges over the frame */
  width: auto;
  margin: 13px 13px 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ivory-deep);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  position: relative;
  z-index: 1;
}
.guide-mini__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.guide-mini__photo:hover img,
.guide-mini__photo:focus-visible img { transform: scale(1.04); }

/* --- dining / guide cards: equal height + aligned RESERVE buttons ------- */
/* the card fills the full (row-stretched) item height so every card lines
   up and the RESERVE button always sits flush at the bottom               */
.guide-marquee .marquee__item {
  transform-origin: center center;
}
.guide-marquee .marquee__item > .guide-mini {
  height: 100%;
  transition: transform 360ms var(--ease), box-shadow 360ms var(--ease);
}
/* breathing room inside the scroller so the hover-expand never clips */
/* room inside the scroller for the drop shadow (~25px at rest, ~45px on
   hover) and the 5% hover growth, so neither is clipped by overflow */
.guide-marquee .marquee__track { padding: 2.5rem clamp(1rem, 2vw, 1.5rem) 3.75rem; }

/* gentle, even expand on hover / keyboard focus / tap */
.guide-marquee .marquee__item:hover,
.guide-marquee .marquee__item:focus-within {
  transform: translateY(-6px) scale(1.05);
  z-index: 6;
}
.guide-marquee .marquee__item:hover > .guide-mini,
.guide-marquee .marquee__item:focus-within > .guide-mini {
  box-shadow: var(--emboss), 0 22px 46px rgba(40, 33, 22, 0.22);
}

/* inner body — when there is no photo, this fills the full card */
.guide-mini > h4,
.guide-mini > p,
.guide-mini > .guide-mini__btn {
  position: relative;
  z-index: 2;
}
.guide-mini__photo + h4 {
  /* padding, not margin — the generic .guide-mini h4 rule below resets
     margin and was silently overriding this */
  padding-top: clamp(1.4rem, 2.1vw, 1.8rem);
}
/* when a card has no photo (e.g. the shopping/strolls cards), restore
   the original top padding via padding on the card                       */
.guide-mini:not(:has(.guide-mini__photo)) {
  padding-top: clamp(1.2rem, 1.8vw, 1.6rem);
}
.guide-mini > p,
.guide-mini > h4 {
  padding-left: clamp(1.2rem, 1.8vw, 1.6rem);
  padding-right: clamp(1.2rem, 1.8vw, 1.6rem);
}
.guide-mini > .guide-mini__btn {
  margin-bottom: clamp(1.2rem, 1.8vw, 1.5rem);
}
.guide-mini > p { flex: 1; }
.guide-mini h4 {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.18;
  color: var(--ink);
}
/* delicate French subtitle under a place name */
.guide-mini__sub {
  display: block;
  margin-top: 0.18rem;
  font-style: italic;
  font-weight: 400;
  font-size: 0.82em;
  color: var(--muted);
}
.guide-mini p {
  margin: 0 0 1.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.42;
  color: var(--ink-soft);
  flex: 1;
}
.guide-mini__btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  background: transparent;
  border: 1px solid var(--champagne);
  border-radius: 999px;
  transition: background 220ms var(--ease), color 220ms var(--ease),
              border-color 220ms var(--ease);
}
.guide-mini__btn:hover,
.guide-mini__btn:focus-visible {
  background: var(--champagne);
  color: var(--white);
  border-color: var(--champagne-deep);
}

/* prev / next arrow buttons --------------------------------------------- */
.marquee__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(250, 249, 244, 0.86);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0.55;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 220ms var(--ease), background 220ms var(--ease),
              border-color 220ms var(--ease), transform 220ms var(--ease);
}
.marquee:hover .marquee__nav,
.marquee:focus-within .marquee__nav {
  opacity: 1;
}
.marquee__nav:hover,
.marquee__nav:focus-visible {
  background: var(--white);
  border-color: var(--champagne);
  transform: translateY(-50%) scale(1.05);
  opacity: 1;
}
.marquee__nav--prev { left: clamp(0.6rem, 1.6vw, 1.4rem); }
.marquee__nav--next { right: clamp(0.6rem, 1.6vw, 1.4rem); }

/* lightbox -------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(54, 44, 28, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__stage {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 1;
}
.lightbox__frame {
  position: relative;
  padding: clamp(10px, 1.4vw, 18px);
  background:
    linear-gradient(158deg, var(--white), var(--porcelain) 48%, var(--ivory-deep));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--emboss), var(--shadow-lg);
}
.lightbox__frame::before {
  content: "";
  position: absolute;
  inset: clamp(5px, 0.7vw, 9px);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  pointer-events: none;
}
.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(88vh - 7rem);
  width: auto;
  height: auto;
  position: relative;
  z-index: 1;
}
.lightbox__caption {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ivory);
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 18px rgba(0,0,0,0.45);
  max-width: 60ch;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(250, 249, 244, 0.92);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 200ms var(--ease), transform 200ms var(--ease),
              border-color 200ms var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  background: var(--white);
  border-color: var(--champagne);
  transform: scale(1.05);
}
.lightbox__close {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  font-size: 1.2rem;
}
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }

body.lightbox-open { overflow: hidden; }

/* 14. RESPONSIVE -------------------------------------------------------- */
/* the full menu fits comfortably down to ~900px (measured: first overflow
   at 880px), so it collapses to the burger at 960px, not with the grids */
@media (max-width: 960px) {
  .nav-list { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav { display: block; }
  .header-inner { gap: 0.6rem; }
  .header-inner::before { display: none; }
  .brand { margin-right: auto; }
  .brand .crest { width: 2.5rem; height: 2.95rem; }
}

@media (max-width: 1180px) {
  .split { grid-template-columns: 1fr; gap: 2.4rem; }
  .split--reverse .split__media { order: 2; }
  .split__copy p { max-width: none; }

  .event-grid,
  .note-grid,
  .attire-grid,
  .guide-grid { grid-template-columns: 1fr; }

  /* hotel grid keeps 2 across at this size so the cards are still useful */
  .hotel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hotel-card__photo img { aspect-ratio: 3 / 2; }
  .hotel-amenities { grid-template-columns: repeat(2, 1fr); }

  .venue-area {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "venue" "rule" "area";
  }
  .venue-area__photo img { aspect-ratio: 3 / 2; }
  .venue-area__rule {
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  }

  .footer-top { grid-template-columns: 1fr; gap: 2.4rem; }

  .lightbox__nav { width: 38px; height: 38px; }
}

@media (max-width: 560px) {
  .header-inner { padding: 0.8rem 1.1rem; }
  .countdown__grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 0.6rem; }
  .countdown__cell:nth-child(3)::before { display: none; }
  .field-grid { grid-template-columns: 1fr; }
  .hero__inner { padding-top: 7rem; }
  .video-control { left: 1.1rem; right: auto; }
  .footer-base { justify-content: center; text-align: center; }
  .bloom { display: none; }
  /* finally drop hotel grid to a single column on phones */
  .hotel-grid { grid-template-columns: 1fr; }
}

/* 15. REDUCED MOTION ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .has-js .reveal { opacity: 1; transform: none; }
  .hero__video { display: none; }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("assets/villa-la-vigie-poster.jpg") center / cover no-repeat;
  }
  .hero__scroll { display: none; }
}

/* 16. ouRSVP WIDGET -------------------------------------------------------- */
/* Styling configured in the ouRSVP console (Playground tab) and copied here so
   all CSS lives in one file. If the console styling is changed later, re-copy
   the <style> block from its Code snippet tab into this section. */

#rsvp-widget {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  position: static !important;
}

#widget-oursvp #my-rsvp {
  border: 1px solid #E8E2DA;
  box-shadow: none;
}

#my-rsvp .rsvp-title {
  font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#my-rsvp .rsvp-font,
#my-rsvp .rsvp-font label,
#my-rsvp p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

#my-rsvp .rsvp-date {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
}

#my-rsvp .rsvp-btn {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 14px 28px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#my-rsvp .rsvp-btn:hover {
  background-color: #2C2825;
  color: #FAF8F5;
  border-color: #2C2825;
}

#my-rsvp .rsvp-form input:focus {
  outline: none;
  box-shadow: none;
}

/* Date line: the widget prints "Tuesday, Jun 8 - Thursday, Jun 10, 2027" from its
   date picker, with no way to reword it in the form. Blank the generated text and
   set our own. */
#my-rsvp .rsvp-date {
  font-size: 0 !important;
  line-height: 0 !important;
}

#my-rsvp .rsvp-date::after {
  content: "June 8\2013" "10, 2027";
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: #8B7355;
}

/* 17. WEDDING GATE --------------------------------------------------------- */
/* Inner pages only; index.html stays open so the video and music play for
   anyone with the link. */

html.is-gated body > *:not(.gate) {
  display: none !important;
}

html.is-gated,
html.is-gated body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Fixing the body is what actually stops iOS rubber-band scrolling behind
   the gate; overflow:hidden alone doesn't hold there. */
html.is-gated body {
  position: fixed;
  inset: 0;
  width: 100%;
  touch-action: none;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  background: var(--ivory);
  background-image: url("assets/villa-la-vigie-poster.jpg");
  background-size: cover;
  background-position: center;
}

/* The villa film keeps playing behind the gate. */
.gate__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border: 0;
}

.gate__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(250, 249, 244, 0.42) 0%, rgba(250, 249, 244, 0.62) 55%, rgba(54, 44, 28, 0.30) 100%),
    linear-gradient(to bottom, rgba(54, 44, 28, 0.18), rgba(54, 44, 28, 0.28));
}

@media (prefers-reduced-motion: reduce) {
  .gate__video { display: none; }
}

.gate__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  text-align: center;
  background: rgba(255, 254, 251, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(3px);
  padding: 3rem 2rem;
}

.gate__eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1rem;
}

.gate__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.gate__note {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 auto 1.75rem;
  max-width: 20rem;
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}

.gate__label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}

.gate__input {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.85rem 1rem;
  width: 100%;
}

.gate__input:focus {
  outline: none;
  border-color: var(--champagne-deep);
  box-shadow: 0 0 0 3px rgba(201, 182, 139, 0.22);
}

.gate__btn {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fffefb;
  background: var(--champagne);
  border: 1px solid var(--champagne-deep);
  border-radius: 0;
  padding: 0.95rem 1rem;
  margin-top: 0.4rem;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}

.gate__btn:hover { background: var(--champagne-deep); }

.gate__error {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--bronze);
  margin: 0.25rem 0 0;
  min-height: 1.6em;
}

.gate__back {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 1.75rem;
}

@media (max-width: 480px) {
  .gate__panel { padding: 2.25rem 1.5rem; }
}

/* 18. CREAM HEADER VARIANT (experiment) ------------------------------------
   index-cream.html only. The header stops dissolving over the film and stays
   a solid cream bar; the big hero crest is replaced by the small badge
   centred between the two nav groups. Nothing here touches index.html. */

/* header stays cream over the hero instead of going transparent */
.theme-cream:has(.hero) .site-header:not(.is-solid) {
  background: var(--ivory);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(16px);
  color: var(--ink);
}
.theme-cream:has(.hero) .site-header:not(.is-solid) .nav-list a[aria-current="page"] {
  color: var(--champagne-deep);
}
.theme-cream:has(.hero) .site-header:not(.is-solid) .brand__crest {
  filter: drop-shadow(0 3px 6px rgba(120, 104, 70, 0.18));
}

/* the badge now sits in the middle, so the groups no longer need to reserve
   a gap for the hero crest behind them */
.theme-cream .header-inner:not(:has(.brand)) .nav-list--left,
.theme-cream .header-inner .nav-list--left,
.theme-cream .header-inner .nav-list--right {
  padding-left: 0;
  padding-right: 0;
  justify-content: space-around;
}

/* the line-art crest, not the white embossed one: on a cream bar the
   embossed version all but disappears. */
.theme-cream .brand__crest {
  /* +35%, then +35% again on the inner-page badge size */
  width: clamp(7.65rem, 11.66vw, 11.66rem);
  opacity: 0.88;
  filter: none;
}
.theme-cream:has(.hero) .site-header:not(.is-solid) .brand__crest {
  filter: none;
}

/* the large crest was the hero's subject; the badge carries it now */
.theme-cream--home .hero__emblem { display: none; }

/* the taller crest had pushed the bar to ~129px; trim the vertical padding
   by 25% (1.05rem to 0.7875rem) so the masthead sits closer to the type */
.theme-cream .header-inner {
  padding-block: 0.7875rem;
}

/* the dark scrim existed to keep the white crest legible over the film.
   With the crest up in the cream bar it is no longer doing that work, so
   it stays at 15% of its original strength — just enough to seat the film
   against the bar without dulling the villa or the sea. */
.theme-cream--home .hero__scrim {
  opacity: 0.15;                       /* starting value; script.js tracks the film from here */
  transition: opacity 900ms ease;
}
/* the two remaining marks on the film get their own shadow instead */
.theme-cream--home .hero__scroll,
.theme-cream--home .video-control {
  text-shadow: 0 2px 10px rgba(20, 17, 13, 0.55);
}


/* menu labels 15% larger than the shipped header */
.theme-cream .nav-list a {
  font-size: clamp(0.713rem, 0.391vw + 0.483rem, 0.828rem);
}

/* with nothing in the middle, let the film breathe and keep the scroll cue
   clear of the bar */
/* The cream bar is opaque and fixed, so nothing may start beneath it:
   every page's first block is pushed down by the measured bar height. */
.theme-cream .hero {
  margin-top: var(--header-h);
  min-height: calc(100svh - var(--header-h));
}
.theme-cream .page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 4vw, 3.5rem));
}
.theme-cream .page-hero--photo {
  padding-top: calc(var(--header-h) + clamp(3rem, 5vw, 4.5rem));
}
/* pages with no hero at all (Villa) — pad the first section instead */
.theme-cream:not(:has(.hero, .page-hero)) main > .section:first-child {
  padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem));
}