/* =====================================================================
   SOPHIE & REBECCA — Hampton Manor
   styles.css
   ---------------------------------------------------------------------
   Editorial, modern British country-house aesthetic.
   Palette interpreted from the wedding colour-scheme reference image:
   Deep Red, Navy, Peach & Lemon Yellow over warm linen/cream.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. COLOUR PALETTE + DESIGN TOKENS  (edit these to re-skin the site)
   --------------------------------------------------------------------- */
:root {
  /* ---- Core palette (matched to the invitation) ---- */
  --background: #f4eee4;   /* warm ivory cream — the invite card colour   */
  --surface:    #fbf7ef;   /* card / raised surface (soft ivory)          */
  --surface-2:  #ece3d4;   /* secondary surface (deeper cream)            */
  --text:       #22344f;   /* navy ink for body text                      */
  --muted:      #6f6a61;   /* muted warm grey for secondary text          */
  --accent:     #7b1e2b;   /* DEEP RED — the invite's corner frame        */
  --accent-dark:#5c141f;   /* deep red, pressed/hover                     */
  --navy:       #1f3a63;   /* NAVY — the invite's names + headings        */
  --navy-deep:  #14284a;   /* deeper navy for the footer                  */
  --peach:      #e0a175;   /* TERRACOTTA/PEACH — the invite's accent words */
  --peach-soft: #f0c9ab;   /* softer peach for tints + chips              */
  --line-accent: rgba(123, 30, 43, 0.55); /* deep-red hairline (frames)  */

  /* ---- Derived / functional ---- */
  --line:        rgba(31, 58, 99, 0.14);   /* navy hairline borders  */
  --line-strong: rgba(31, 58, 99, 0.26);
  --shadow-sm: 0 1px 2px rgba(31, 58, 99, 0.06);
  --shadow-md: 0 14px 40px -18px rgba(31, 58, 99, 0.26);
  --shadow-lg: 0 30px 70px -30px rgba(31, 58, 99, 0.38);

  /* ---- Typography (matched to the invitation) ---- */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* DISPLAY FONT — used big for the names (hero, gate, footer). Currently
     the same serif as the welcome section so the opening page matches it.
     To switch to a custom face later, add its @font-face and set it here,
     e.g. --font-display: "TAN Mon Cheri", var(--font-serif); */
  --font-display: var(--font-serif);

  /* ---- Rhythm / layout ---- */
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --radius: 3px;          /* intentionally small — no app-style bubbles */
  --radius-lg: 6px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

/* ---------------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px; /* clears sticky nav on anchor jumps */
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--background);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Lock scroll while the guest-entry gate is open */
body.gate-open { overflow: hidden; }

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

/* Accessibility: honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Visually-hidden but screen-reader available */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.06;
  letter-spacing: 0.005em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 1.1rem;
  display: inline-block;
}

.section-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 500;
  margin-bottom: 0.4em;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 46ch;
}

/* Small tracked label used across the UI */
.label-caps {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Centred editorial prose block (welcome message, etc.) */
.prose {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}
.prose p {
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1.2rem;
}
.prose p:last-child { margin-bottom: 0; }
/* Gift note under the welcome message — soft, italic, with breathing room. */
.welcome-gift {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 52ch;
  margin: clamp(2.4rem, 5vw, 3.5rem) auto 0;
  text-align: center;
}

/* Master of Service contact block (end of the welcome message) */
.welcome-contact {
  max-width: 56ch;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding-top: clamp(1.6rem, 4vw, 2.2rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.welcome-contact .label-caps { display: block; color: var(--accent); margin-bottom: 0.8rem; }
.welcome-contact p { color: var(--muted); margin: 0 0 0.35rem; }
.welcome-contact__name {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--navy);
  margin: 0.2rem 0 0.5rem !important;
}
.welcome-contact__lines {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}
.welcome-contact__lines a { color: var(--navy); font-weight: 500; border-bottom: 1px solid var(--line-accent); }
.welcome-contact__lines a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.welcome-contact__lines .dot { color: var(--accent); font-size: 0.6rem; }

/* ---------------------------------------------------------------------
   4. LAYOUT HELPERS
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--tint { background: var(--surface-2); }

.section-head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .lede { margin-inline: auto; }

/* Brass hairline divider ornament */
.rule {
  width: 56px;
  height: 1px;
  background: var(--accent);
  border: 0;
  margin: 1.4rem 0;
}
.section-head--center .rule { margin-inline: auto; }

/* ---------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease);
  text-decoration: none;
  line-height: 1;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); }

.btn--navy {
  background: var(--navy);
  color: #fff;
}
.btn--navy:hover { background: #04152b; transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--navy); transform: translateY(-2px); }

/* Light button — for use on the dark navy Stay panel (high contrast) */
.btn--light {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.btn--light:hover { background: var(--peach); border-color: var(--peach); color: var(--navy); transform: translateY(-2px); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.7rem 1.1rem; font-size: 0.72rem; }

/* ---------------------------------------------------------------------
   6. GUEST ENTRY GATE  (opening / digital invitation screen)
   --------------------------------------------------------------------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--background);
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}
.gate[hidden] { display: none; }
.gate.is-leaving { opacity: 0; visibility: hidden; }

/* --- Gate image side (REPLACE IMAGE: Hampton Manor / venue photo) --- */
.gate__media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--navy), #123054 60%, var(--accent-dark));
}
/* VENUE PHOTO — the opening-screen image.
   Save your Hampton Manor photo as: assets/hampton-manor.jpg
   (a large landscape shot, min ~1400px wide). It loads automatically.
   Until the file exists, the navy gradient above shows as a graceful
   fallback and the caption below remains visible. */
.gate__media-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 2rem;
  background-image:
    linear-gradient(to top, rgba(20, 40, 74, 0.55), rgba(20, 40, 74, 0.05) 45%, transparent),
    url("assets/hampton-manor.jpg");
  background-size: cover;
  background-position: center;
}
.gate__media-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  margin: 18px;
  pointer-events: none;
}
.gate__caption {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 12px rgba(20, 40, 74, 0.6);
}
/* --- Gate form side --- */
.gate__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem);
  overflow-y: auto;
}
.gate__brand {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.gate__brand .amp { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; }
.gate__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--peach);
  font-weight: 500;
  margin-bottom: 2.4rem;
}
.gate__welcome-eyebrow { margin-bottom: 0.5rem; }
.gate__welcome-title {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.gate__welcome-copy {
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 40ch;
}

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.field input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.95rem 1.05rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(123, 30, 43, 0.12);
}

.gate__actions { margin-top: 1.6rem; }

.gate__error {
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.3rem;
  padding: 0.9rem 1.1rem;
  background: rgba(123, 30, 43, 0.06);
  border: 1px solid rgba(123, 30, 43, 0.25);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent-dark);
  font-size: 0.92rem;
}
.gate__error.is-visible { display: flex; animation: shake 0.4s var(--ease); }

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ---------------------------------------------------------------------
   7. SITE SHELL (revealed after successful entry)
   --------------------------------------------------------------------- */
.site { opacity: 0; transition: opacity 0.9s var(--ease); }
.site.is-visible { opacity: 1; }
.site[hidden] { display: none; }

/* ---------------------------------------------------------------------
   8. NAVIGATION
   --------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 241, 231, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 72px;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav__brand {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__brand .amp { font-style: italic; font-weight: 400; text-transform: none; }
.nav__brand:hover { text-decoration: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  list-style: none;
  padding: 0;
}
.nav__links a {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  position: relative;
  padding-block: 0.4rem;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover { text-decoration: none; }
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }

/* "Please fill" nav item — a filled peach pill so this call-to-action
   jumps out from the other (plain) nav links. */
.nav__links a[data-view="details"] {
  background: var(--peach);
  color: var(--navy);
  padding-inline: 0.85rem;
  border-radius: 999px;
}
.nav__links a[data-view="details"]:hover { background: var(--peach-soft); }
.nav__links a[data-view="details"]::after { display: none; } /* no underline on the pill */
@media (max-width: 820px) {
  /* In the mobile dropdown, keep it a tidy inline pill, not full-width. */
  .nav__links a[data-view="details"] {
    display: inline-block;
    width: auto;
    margin: 0.5rem 0;
    border-bottom: 0;
  }
}

.nav__actions { display: flex; align-items: center; gap: 0.6rem; }
.nav__lang {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  min-width: 40px;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__lang:hover { border-color: var(--accent); color: var(--accent); }

.nav__change {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.nav__change:hover { border-color: var(--accent); color: var(--accent); }

/* Hamburger (mobile only) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.nav__toggle span {
  display: block;
  width: 20px; height: 1.5px;
  margin-inline: auto;
  background: var(--navy);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   9. WELCOME (hero + message as one framed block)
   --------------------------------------------------------------------- */
.welcome {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* The whole welcome block is centered and sits inside the red frame. */
.welcome__inner {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.welcome__note-head { margin-top: clamp(2rem, 5vw, 3.2rem); }
/* IMAGE PLACEHOLDER — hero backdrop. Replace the gradient with a photo:
   background-image: url("assets/hero.jpg");  */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 75% 20%, rgba(242, 183, 154, 0.35), transparent 60%),
    radial-gradient(900px 600px at 15% 85%, rgba(247, 225, 153, 0.30), transparent 55%),
    linear-gradient(160deg, var(--surface-2), var(--background));
  animation: heroZoom 22s var(--ease) infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero__bg::after { /* deep-red frame — echoes the invitation's border */
  content: "";
  position: absolute;
  inset: clamp(14px, 2.5vw, 32px);
  border: 1px solid var(--line-accent);
}

.hero__content { padding-block: clamp(1.6rem, 4vw, 2.8rem); }
.hero__eyebrow { color: var(--peach); }
.hero__names {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.28em;
}
.hero__names .amp { /* the "&" keeps an elegant italic lowercase feel */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}
.hero__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  color: var(--peach);
  margin-bottom: 1rem;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy);
}
.hero__meta .dot { color: var(--accent); }

/* Countdown */
.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 2.4vw, 1.8rem);
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}
.countdown__unit { text-align: center; }
.countdown__num {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------
   10. QUICK INFO STRIP
   --------------------------------------------------------------------- */
.quickinfo {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.quickinfo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.quickinfo__item {
  padding: clamp(1.6rem, 3.5vw, 2.6rem) 1.2rem;
  text-align: center;
  border-left: 1px solid var(--line);
}
.quickinfo__item:first-child { border-left: 0; }
.quickinfo__value {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--navy);
  line-height: 1.1;
}
.quickinfo__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.55rem;
}

/* ---------------------------------------------------------------------
   11. TIMELINE — THE DAY
   --------------------------------------------------------------------- */
.timeline {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding-left: clamp(2.2rem, 6vw, 3.5rem);
}
.timeline::before { /* the brass spine */
  content: "";
  position: absolute;
  left: clamp(0.5rem, 2vw, 0.9rem);
  top: 0.4rem; bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(var(--accent), var(--peach));
}
.timeline__item {
  position: relative;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { /* node dot */
  content: "";
  position: absolute;
  left: calc(clamp(0.5rem, 2vw, 0.9rem) - clamp(2.2rem, 6vw, 3.5rem) - 4px);
  top: 0.55rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  margin-left: 0;
}
.timeline__time {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 0.15rem;
}
.timeline__title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--navy);
  margin: 0.25rem 0 0.35rem;
}
.timeline__desc { color: var(--muted); max-width: 46ch; }
/* "More to follow" entry — a touch softer than confirmed items */
.timeline__item--soon .timeline__time { color: var(--muted); }

/* ---------------------------------------------------------------------
   12. TRAVEL TABS
   --------------------------------------------------------------------- */
.tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 2.4rem;
  max-width: 100%;
}
.tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.tab:hover { color: var(--navy); }
.tab.is-active { background: var(--navy); color: #fff; }

.tabpanel { display: none; animation: fadeUp 0.5s var(--ease); }
.tabpanel.is-active { display: block; }

/* Two-level travel tabs: origin panels + mode panels */
.tabs__list--origin { margin-bottom: 1rem; }
.originpanel { display: none; }
.originpanel.is-active { display: block; animation: fadeUp 0.5s var(--ease); }
.modepanel { display: none; animation: fadeUp 0.45s var(--ease); }
.modepanel.is-active { display: block; }

/* Two driving routes side by side (England) */
.route-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  margin-top: 1.6rem;
}
.route-options {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--navy);
}
.route-options li { margin-bottom: 0.5rem; }

/* Pros & cons block (Netherlands modes) */
.proscons { display: grid; gap: 1.2rem; }
.proscons ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.proscons li { margin-bottom: 0.45rem; }
.proscons .label-caps { display: block; margin-bottom: 0.5rem; }
.proscons__good { color: var(--navy); }
.proscons__bad  { color: var(--accent); }

/* Netherlands traveller notes (documents + mobile data) */
.nl-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  padding-top: clamp(1.6rem, 4vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.nl-note .label-caps { display: block; margin-bottom: 0.7rem; color: var(--accent); }
.nl-note ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.nl-note li { margin-bottom: 0.5rem; }

/* Map figures (village map in Travel, floor plan on The Day) */
/* Framed map — its own section, with an inset line frame echoing the
   opening gate's photo border. */
.framed-map {
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  max-width: 760px;
  text-align: center;
}
.framed-map__inner {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  box-shadow: 0 24px 60px -32px rgba(20, 40, 74, 0.4);
}
.framed-map__inner::after { /* inset hairline frame, like the gate photo */
  content: "";
  position: absolute;
  inset: 0;
  margin: clamp(12px, 2.2vw, 20px);
  border: 1px solid var(--accent);
  border-radius: 2px;
  pointer-events: none;
}
.framed-map__inner img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.framed-map figcaption {
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Portrait-ish maps (e.g. the Manor floor plan) sit in a narrower frame. */
.framed-map--tall { max-width: 560px; }
/* When two maps share a row, let each fill its grid column. */
.map-pair { align-items: start; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.map-pair .framed-map { margin: 0; max-width: none; }

.travel__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.travel__routes {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--navy);
  margin-bottom: 1rem;
}
.travel__routes .arrow { color: var(--accent); }
.travel h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.travel p { color: var(--muted); margin-bottom: 1rem; }
.travel__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

.travel__aside {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.travel__aside .label-caps { display: block; margin-bottom: 0.8rem; }
.travel__aside ol { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.travel__aside li { margin-bottom: 0.6rem; }

/* ---------------------------------------------------------------------
   13. CARDS (accommodation, transport, explore)
   --------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.8rem);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.subgroup { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.subgroup:last-child { margin-bottom: 0; }
/* Extra breathing room between the Explore intro paragraph and the first city. */
#explore .prose + .subgroup { margin-top: clamp(2.5rem, 6vw, 4rem); }
.subgroup__title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
/* Explore city names — large editorial serif headings that dominate the
   section (instead of the small uppercase label used elsewhere). */
.subgroup__title--city {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--navy);
  line-height: 1.02;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
}

/* Fun-fact callout (Explore destination sections) */
.funfact {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.2rem, 3vw, 1.6rem);
  margin-bottom: 1.6rem;
}
.funfact .label-caps { display: block; color: var(--accent); margin-bottom: 0.4rem; }
.funfact p { margin: 0; color: var(--text); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--peach-soft);
}

/* IMAGE PLACEHOLDER — accommodation card thumbnails go here.
   Replace .card__media background with: background-image: url("assets/...jpg") */
.card__media {
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(7,30,61,0.10), rgba(242,183,154,0.35)),
    var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  position: relative;
}
.card__media .ph-tag {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px dashed var(--line-strong);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.6);
}
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Explore cards use portrait photos — give them a taller frame and show the
   whole image (no cropping) rather than the landscape cover crop. */
#explore .card__media {
  aspect-ratio: 3 / 4;
}
#explore .card__media img {
  object-fit: contain;
}
.card__body {
  padding: 1.3rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__tag {
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--peach-soft);
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.8rem;
}
.card__name {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.45rem;
}
.card__desc { color: var(--muted); font-size: 0.95rem; margin-bottom: 1rem; }
.card__meta {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.card__meta .price { color: var(--accent); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.card__foot { margin-top: auto; }

/* Compact transport / contact card */
.mini-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mini-card .label-caps { color: var(--accent); }
.mini-card__name { font-family: var(--font-serif); font-size: 1.25rem; color: var(--navy); }
.mini-card__detail { color: var(--muted); font-size: 0.92rem; }
.mini-card .btn { align-self: flex-start; margin-top: 0.6rem; }

.is-placeholder { position: relative; }
.is-placeholder::after {
  content: "PLACEHOLDER";
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------------
   14. YOUR STAY AT HAMPTON MANOR (conditional, personal)
   --------------------------------------------------------------------- */
.stay {
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(242,183,154,0.22), transparent 60%),
    var(--navy);
  color: #f4eee2;
  position: relative;
}
.stay .eyebrow { color: var(--peach); }
.stay .section-title { color: #fff; }
.stay .lede { color: rgba(244,238,226,0.78); }
.stay .rule { background: var(--peach); }

.stay__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.stay__block {
  border: 1px solid rgba(244,238,226,0.16);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.1rem;
  background: rgba(255,255,255,0.03);
}
.stay__block .label-caps { color: var(--peach); }
.stay__block-value {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: #fff;
  margin: 0.4rem 0 0.7rem;
}
.stay__block p { color: rgba(244,238,226,0.75); font-size: 0.86rem; }

/* Dynamic per-guest room area */
.stay__room {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(244,238,226,0.18);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  background: rgba(255,255,255,0.04);
}
/* IMAGE PLACEHOLDER — per-guest room photo. Populated later per guest. */
.stay__room-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(242,183,154,0.35), rgba(247,225,153,0.25));
  display: flex; align-items: center; justify-content: center;
  color: rgba(7,30,61,0.55);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.stay__room .eyebrow { color: var(--peach); }
.stay__room-title { color: #fff; font-size: 1.6rem; margin-bottom: 0.6rem; }
.stay__room-copy { color: rgba(244,238,226,0.78); }

/* Head actions row (e.g. Google Maps link under a section lede) */
.head-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* "Your Stay": one-night note + wider options block on the dark panel */
.stay__more { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
/* Extra separation for the bedrooms map at the very bottom of Your Stay. */
.stay__rooms-map { margin-top: clamp(3.5rem, 8vw, 6rem); }
.notice {
  border: 1px solid rgba(244,238,226,0.22);
  border-left: 3px solid var(--peach);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: rgba(255,255,255,0.05);
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}
.notice .label-caps { display: block; margin-bottom: 0.6rem; color: var(--peach); }
.notice p { color: rgba(244,238,226,0.85); margin: 0; }
.notice .head-actions { margin-top: 1.1rem; }
/* "Please note" moved up under the section head. On the dark navy "Your
   Stay" section this variant uses a bright peach fill + dark ink so the
   one-night message clearly stands out. */
.notice--top {
  margin: clamp(1.5rem, 4vw, 2.2rem) 0 0;
  background: var(--peach-soft);
  border: 1px solid var(--peach);
  border-left: 5px solid var(--accent);
  box-shadow: var(--shadow-md);
}
.notice--top .label-caps { color: var(--accent); }
.notice--top p { color: var(--navy-deep); }
.notice--top p strong { color: var(--accent); }

/* Divider + intro that opens the wider-options block */
.stay__more-head { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.stay__more-head .rule--light {
  width: 60px; height: 2px; border: 0; margin: 0 auto 1.4rem;
  background: var(--peach);
}
.stay__more-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: #fff;
  margin: 0 0 0.5rem;
}
.stay__more-head p { color: rgba(244,238,226,0.82); margin: 0 auto; max-width: 46ch; }
.stay__more-head .head-actions { justify-content: center; margin-top: 1.3rem; }
/* Subgroup titles read light on the dark Your Stay panel */
.stay__more .subgroup__title {
  color: var(--peach);
  border-bottom-color: rgba(244,238,226,0.22);
}

/* Secret / coming-soon room teaser */
.stay__room--secret .stay__room-media {
  position: relative;
  overflow: hidden;
  color: var(--peach);
}
.stay__room-seal {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1;
  color: rgba(255,255,255,0.85);
  animation: sealPulse 3.2s var(--ease) infinite;
}
.stay__room--secret .stay__room-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: sealShimmer 3.6s var(--ease) infinite;
}
@keyframes sealPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes sealShimmer {
  0%   { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .stay__room-seal { animation: none; }
  .stay__room--secret .stay__room-media::after { animation: none; }
}

/* ---------------------------------------------------------------------
   15. EXPLORE (filterable)
   --------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.2rem;
}
.chip {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover { border-color: var(--navy); }
.chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

.explore-card.is-hidden { display: none; }

/* ---------------------------------------------------------------------
   16. MAP (schematic placeholder)
   --------------------------------------------------------------------- */
/* INTEGRATION NOTE: replace .map__canvas with a Google Maps / Mapbox embed.
   The pins below are a designed schematic for the prototype only. */
.map__canvas {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(0deg, rgba(7,30,61,0.04), rgba(7,30,61,0.04)),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(7,30,61,0.05) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(7,30,61,0.05) 38px 39px),
    var(--surface);
  min-height: clamp(380px, 55vh, 560px);
}
.map__road { position: absolute; background: var(--peach-soft); opacity: 0.6; }
.map__road--h { height: 6px; left: 6%; right: 6%; top: 54%; border-radius: 3px; }
.map__road--v { width: 6px; top: 12%; bottom: 12%; left: 46%; border-radius: 3px; }

.pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.pin__dot {
  width: 16px; height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}
.pin__label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
/* pin colours by category */
.pin[data-cat="wedding"]  .pin__dot { background: var(--accent); }
.pin[data-cat="stay"]     .pin__dot { background: var(--navy); }
.pin[data-cat="food"]     .pin__dot { background: var(--peach); }
.pin[data-cat="useful"]   .pin__dot { background: var(--peach-soft); }
.pin.is-dim { opacity: 0.18; }

.map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  margin-top: 1.4rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.map__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.map__legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ---------------------------------------------------------------------
   17. FAQ ACCORDION
   --------------------------------------------------------------------- */
.faq { max-width: 800px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1.4rem 0;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--navy);
}
.faq__q .icon {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
}
.faq__q .icon::before,
.faq__q .icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq__q .icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq__q .icon::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq__item.is-open .faq__q .icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease);
}
.faq__a-inner { padding: 0 0 1.4rem; color: var(--muted); max-width: 64ch; }

/* ---------------------------------------------------------------------
   17a. TAB VIEWS  (sections shown/hidden as tabs)
   --------------------------------------------------------------------- */
/* Hidden tab — takes it out of flow entirely. */
[data-view].view-hidden { display: none !important; }

/* Gentle fade-in for the sections of a newly-selected tab. */
main [data-view]:not(.view-hidden) {
  animation: viewIn 0.5s var(--ease) both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  main [data-view]:not(.view-hidden) { animation: none; }
}

/* ---------------------------------------------------------------------
   17b. SHARE YOUR DETAILS FORM  (dietary + song request)
   --------------------------------------------------------------------- */
.formwrap {
  max-width: 720px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

/* Textareas share the input look defined in the gate .field styles. */
.formwrap textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.95rem 1.05rem;
  resize: vertical;
  min-height: 96px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.formwrap textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(123, 30, 43, 0.12);
}

/* Dietary checkbox set — chip-style toggles, not app bubbles */
.checkset { border: 0; padding: 0; margin-bottom: 1.1rem; }
.checkset legend {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
  padding: 0;
}
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.check { position: relative; }
.check input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.check span {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--navy);
  border: 1px solid var(--line-strong);
  background: var(--background);
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.check:hover span { border-color: var(--navy); }
.check input:checked + span {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
/* Keyboard focus ring on the visible chip */
.check input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-actions { margin-top: 1.6rem; }

.form-status {
  display: none;
  margin-top: 1.1rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.form-status.is-visible { display: block; }
.form-status[data-kind="error"] {
  background: rgba(123, 30, 43, 0.06);
  border: 1px solid rgba(123, 30, 43, 0.25);
  border-left: 3px solid var(--accent);
  color: var(--accent-dark);
}
.form-status[data-kind="info"] {
  background: rgba(7, 30, 61, 0.04);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

/* Details tab — link-out call-to-action layout */
.formwrap--cta { text-align: center; }
.formcta__intro { color: var(--muted); margin-bottom: 1rem; }
.formcta__list {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.6rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  max-width: 30ch;
}
.formcta__list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--navy);
}
.formcta__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
}
.formwrap--cta .form-actions { margin-top: 0; }
.formwrap--cta .form-status { text-align: center; }

/* Success state (replaces the form after a successful send) */
.form-success {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--peach-soft);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  animation: fadeUp 0.5s var(--ease);
}
.form-success[hidden] { display: none; }
.form-success h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--navy);
  margin: 0.3rem 0 0.6rem;
}
.form-success p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* ---------------------------------------------------------------------
   18. CONTACT / FOOTER
   --------------------------------------------------------------------- */
.contact { text-align: center; }
.contact__mail {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--accent);
  display: inline-block;
  margin-top: 0.6rem;
}

.footer {
  background: var(--navy-deep);
  color: #f4eee2;
  text-align: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.footer__names {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  margin-bottom: 1rem;
}
.footer__names .amp { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; }
.footer__meta {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--peach);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.footer__meta .dot { color: var(--accent); }
.footer__top {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4eee2;
  border: 1px solid rgba(244,238,226,0.3);
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius);
  display: inline-block;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.footer__top:hover { border-color: var(--peach); color: var(--peach); text-decoration: none; }

/* ---------------------------------------------------------------------
   19. SCROLL REVEAL
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 960px) {
  .travel__grid { grid-template-columns: 1fr; }
  .route-grid { grid-template-columns: 1fr; }
  .nl-notes { grid-template-columns: 1fr; }
  .stay__grid { grid-template-columns: repeat(2, 1fr); }
  .stay__room { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  /* --- Gate becomes single column, and the WHOLE gate scrolls as one
         (so the Hampton Manor photo scrolls with the text, instead of the
         image staying pinned while only the panel scrolls). --- */
  .gate {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gate__media { min-height: 42vh; }
  .gate__panel {
    overflow-y: visible;      /* don't create a second, inner scroll area */
    justify-content: flex-start;
  }

  /* --- Mobile navigation --- */
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.2rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .nav.is-open .nav__links { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a {
    display: block;
    width: 100%;
    padding-block: 0.95rem;
    line-height: 1.4;             /* room for longer Dutch labels, no clash with the divider */
    border-bottom: 1px solid var(--line);
  }
  .nav__links li { width: 100%; }
  .nav__links li:last-child a { border-bottom: 0; }
  .nav__links a::after { display: none; }   /* no animated underline in the dropdown */
  .nav__change { display: none; } /* provided inside the mobile menu instead */
  .nav__links .nav__change-mobile {
    display: inline-block;
    margin-top: 0.8rem;
  }
}

@media (min-width: 821px) {
  .nav__links .nav__change-mobile { display: none; }
}

@media (max-width: 640px) {
  /* --- Quick info: horizontal scroll, no cramped squeeze --- */
  .quickinfo__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(46%, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .quickinfo__item { scroll-snap-align: start; border-left: 1px solid var(--line); }
  .quickinfo__item:first-child { border-left: 0; }

  .stay__grid { grid-template-columns: 1fr; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  .countdown { justify-content: center; gap: clamp(0.7rem, 4vw, 1.4rem); }
  .hero { min-height: auto; padding-block: 2rem; }

  .form-row { grid-template-columns: 1fr; }

  /* --- Home / welcome: give the text more breathing room from the edges --- */
  .welcome__inner { padding-inline: clamp(1.9rem, 8vw, 3rem); }

  /* --- Explore cards: show the recommendation TEXT first, then the photo --- */
  #explore .card { display: flex; flex-direction: column; }
  #explore .card__body { order: 1; }
  #explore .card__media { order: 2; }
}