/* ================================================================
   STYLE.CSS
   Single source of truth for all design tokens.
   To restyle the site, edit the custom properties in :root only.
================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   Change everything from here.
──────────────────────────────────────────────────────────────── */
:root {
  /* --- Colors ------------------------------------------------- */
  --color-bg: #faf8f5; /* page background            */
  --color-surface: #ffffff; /* cards, footer blocks       */
  --color-accent: #b5975a; /* gold: headings, borders    */
  --color-accent-dark: #8a7040; /* hover / pressed states     */
  --color-text: #2c2c2c; /* primary body text          */
  --color-text-muted: #7a7a7a; /* secondary / meta text      */
  --color-text-on-dark: #f5f0e8; /* text on dark backgrounds   */

  --color-overlay-bg: #1a1a1a; /* password overlay backdrop  */
  --color-overlay-text: #f5f0e8;

  --color-footer-bg: #2c2c2c;
  --color-footer-text: #c8bfa8;
  --color-red: oklch(0.65 0.3 19.41);

  --particle-curve: cubic-bezier(0.2, 0.56, 0, 1);

  /* --- Typography --------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: system-ui, -apple-system, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
  --text-3xl: clamp(1.4rem, 1rem + 2vw, 2.5rem);
  --text-hero: clamp(2rem, 1.2rem + 4vw, 5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --tracking-wide: 0.12em;
  --tracking-wider: 0.2em;

  /* --- Spacing ------------------------------------------------ */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: clamp(4rem, 10vw, 8rem);

  --section-padding-block: var(--space-xl);
  --section-padding-inline: clamp(1.5rem, 6vw, 6rem);

  /* --- Borders / Radius --------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* --- Transitions -------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  /* --- Hero image --------------------------------------------- */
  --hero-bg-image: url("images/hero2.jpg"); /* leave as empty string for no image */
  --hero-bg-image-overlay: url("images/hero-gate.jpg"); /* leave as empty string for no image */
  --hero-bg-color: #3a3530; /* shown when no image is set       */
}

/* ────────────────────────────────────────────────────────────────
   2. RESET & BASE
──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-dark);
}

/* Screen-reader-only utility */
.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;
}

/* ────────────────────────────────────────────────────────────────
   3. LANGUAGE SWITCHER
──────────────────────────────────────────────────────────────── */
#lang-switcher {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  gap: var(--space-xs);
}

#lang-switcher button {
  background: transparent;
  border: 1px solid var(--color-text-on-dark);
  border-radius: var(--radius-sm);
  color: var(--color-text-on-dark);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  padding: 0.3rem 0.6rem;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

#lang-switcher button:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-overlay-bg);
}

/* Active language */
#lang-switcher button[aria-pressed="true"] {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-overlay-bg);
}

/* Once the site is unlocked the switcher sits over light content,
   so flip the colours to dark. JS adds this class to <body>. */
body.unlocked #lang-switcher button {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

body.unlocked #lang-switcher button:hover,
body.unlocked #lang-switcher button[aria-pressed="true"] {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
}

/* ────────────────────────────────────────────────────────────────
   4. PASSWORD OVERLAY
──────────────────────────────────────────────────────────────── */
#password-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  transition: opacity var(--transition-normal);
  background-color: var(--color-overlay-bg);
  background-image: var(--hero-bg-image-overlay);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#password-overlay.is-hiding {
  opacity: 0;
  pointer-events: none;
}

.overlay-inner {
  text-align: center;
  max-width: 28rem;
  width: 100%;
}

.overlay-inner h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--color-overlay-text);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-lg);
}

.overlay-tagline {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-lg);
  font-style: italic;
}

#password-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

#password-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-text-muted);
  border-radius: 0;
  color: var(--color-overlay-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  padding: var(--space-xs) 0;
  text-align: center;
  width: 100%;
  max-width: 18rem;
  outline: none;
  transition: border-color var(--transition-fast);
  margin-top: var(--space-lg);
}

#password-input::placeholder {
  color: var(--color-overlay-text);
  letter-spacing: 0.05em;
}

#password-input:focus {
  border-bottom-color: var(--color-accent);
}

#password-form button[type="submit"] {
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  padding: 0.6rem 2rem;
  text-transform: uppercase;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

#password-form button[type="submit"]:hover {
  background-color: var(--color-accent);
  color: var(--color-overlay-bg);
}

#password-error {
  color: #e07070;
  font-size: var(--text-sm);
  min-height: 1.25rem;
}

.particleButton {
  position: relative;
  padding: 16px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  &:hover {
    background: hsl(0deg 0% 100% / 0.1);

    path {
      stroke: var(--color-red);
    }
  }

  &.liked path {
    fill: var(--color-red);
    stroke: var(--color-red);
  }
}

.particleButton svg {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.particle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  pointer-events: none;
}

@keyframes fadeToTransparent {
  to {
    opacity: 0;
  }
}

@keyframes disperse {
  to {
    transform: scale(var(--scale))
      translate(
        calc(cos(var(--angle)) * var(--distance)),
        calc(sin(var(--angle)) * var(--distance))
      );
  }
}

/* @keyframes hueRotate {
  to {
    filter: hue-rotate(var(--hue-rotation));
  }
} */

.particle {
  width: var(--size);
  height: var(--size);
  animation:
    fadeToTransparent var(--fade-duration) var(--fade-delay) forwards,
    disperse var(--pop-duration) forwards var(--particle-curve),
    hueRotate 1000ms;
}

@keyframes fromShrunken {
  from {
    transform: scale(0);
  }
}
@keyframes circleColorShift {
  from {
    background: hsl(350deg 100% 60%);
  }
}
@keyframes fadeFromOpaque {
  from {
    opacity: 1;
  }
}

.popCircle {
  position: absolute;
  inset: 0;
  background: hsl(270deg 100% 80%);
  border-radius: 50%;
  opacity: 0;
}

.particleButton.liked .popCircle {
  animation:
    fromShrunken var(--pop-circle-duration),
    circleColorShift var(--pop-circle-duration),
    fadeFromOpaque 300ms var(--pop-circle-duration) backwards;
}

.particleButton.liked svg {
  animation: fromShrunken 2000ms var(--pop-circle-duration) backwards
    linear(
      0,
      0.04 1.1%,
      0.156 2.3%,
      1.015 8.5%,
      1.157 10.4%,
      1.217 12.4%,
      1.217 13.6%,
      1.193 15%,
      0.992 21.7%,
      0.964 23.5%,
      0.952 25.3%,
      0.957 27.9%,
      1.002 34.7%,
      1.01 38.2%,
      0.998 51%,
      1
    );
}

/* ────────────────────────────────────────────────────────────────
   5. HERO SECTION
   SCROLL ANIMATION HOOK — see comment block below.
──────────────────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--hero-bg-color);
  overflow: hidden;
}

/*
  Parallax background via fixed pseudo-element.
  Works on iOS Safari (which ignores background-attachment: fixed).
*/
#hero::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  width: 100vw;
}

/* Dark gradient overlay to ensure text legibility on any photo */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.01) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.02) 100%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1; /* above the ::after gradient */
  text-align: center;
  color: var(--color-text-on-dark);
  padding: var(--space-xl) var(--section-padding-inline);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  /* color: var(--color-accent); */
  color: var(--color-text-on-dark);

  margin-bottom: var(--space-sm);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
}

.hero-date {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  font-style: italic;
  margin-bottom: var(--space-xs);
}

.hero-location {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  opacity: 0.8;
}

/* ────────────────────────────────────────────────────────────────
   6. CONTENT SECTIONS
   SCROLL ANIMATION HOOK — see comment block below.
──────────────────────────────────────────────────────────────── */
.content-section {
  position: relative; /* sit above the fixed hero ::before */
  z-index: 1;
  background-color: var(--color-bg); /* opaque, hides fixed hero bg */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text image";
  min-height: 70vh;

  /*
    SCROLL ANIMATION HOOK
    ─────────────────────
    Fade + slide-up on section entry. Apply to .content-text and
    .content-image separately for a staggered feel:

    .content-text,
    .content-image {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    .content-image {
      animation-delay: 100ms;  (or use animation-range offset)
    }

    @keyframes fade-up {
      from {
        opacity: 0;
        transform: translateY(3rem);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  */
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Story image track — always-on structural layout ──
   To add more images:
     1. Add <img> elements inside .story-image-track in the HTML.
     2. Update --n below to match the new total count.
── */
.story-scroll-wrapper {
  --n: 9; /* ← number of images in .story-image-track */
}

.story-image-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-width: calc(var(--n) * 100%); /* track spans all images */
}

.story-image-track img {
  flex: 0 0 calc(100% / var(--n)); /* each image = one container width */
  min-width: calc(100% / var(--n));
}

/* ── Story scroll: progressive enhancement (Chrome/Edge 115+) ──
   The wrapper height = N × 100dvh, giving 100dvh of scroll per
   image transition while #section-story stays pinned.
   Browsers without support get the normal static layout.
── */
@supports (animation-timeline: scroll()) {
  .story-scroll-wrapper {
    height: calc(var(--n) * 100dvh);
    view-timeline: --story-scroll block;
  }

  #section-story {
    position: sticky;
    top: 0;
    height: 100dvh;
  }

  .story-image-track {
    animation: story-slide linear both;
    animation-timeline: --story-scroll;
    animation-range: contain 0% contain 100%;
  }
}

@keyframes story-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc((1 / var(--n) - 1) * 100%));
  }
}

/* Reversed: image left, text right */
.content-section--reversed {
  grid-template-areas: "image text";
}

.content-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--section-padding-inline);
}

@media (max-width: 768px) {
  .content-text {
    padding-block: var(--section-padding-block);
  }

  .content-text p {
    max-width: 100%;
  }

  .content-section {
    min-height: auto;
  }
}

.content-image {
  grid-area: image;
  overflow: hidden;
}

.content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Placeholder background shown when src is empty */
  background-color: #d6cfc4;
  min-height: 24rem;
}

.content-text h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);

  /* Decorative accent line above heading */
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-accent);
}

.content-text p {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  max-width: 42ch;
}

/* Alternate section background for visual rhythm */
.content-section:nth-child(even) {
  background-color: var(--color-surface);
}

/* ────────────────────────────────────────────────────────────────
   7. SECTION 2 — DETAILS OVERRIDES
──────────────────────────────────────────────────────────────── */

#section-details {
  min-height: 100dvh;
}

/* Space out the stacked detail elements */
.content-text {
  gap: var(--space-sm);
}

/* Main line: "Ceremony starts at 15:00 at Grandhotel Giessbach" */
#section-details .content-text p:first-of-type {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text);
}

/* Google Maps link — pill-style inline button */
#section-details .content-text a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 2rem;
  padding: 0.35em 0.9em;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
  width: fit-content;
}

#section-details .content-text a:hover {
  background-color: var(--color-accent);
  color: var(--color-surface);
}

/* Travel times */
#section-details .content-text p:nth-of-type(2) {
  color: var(--color-text-muted);
}

/* Evening programme — separated by a rule, slightly italic */
.section2-evening {
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text-muted);
  padding-top: var(--space-sm);
  border-top: 1px solid #e8e4de;
  max-width: 42ch;
}

/* Gifts & flowers notes */
#section-details .content-text .section2-note {
  font-size: var(--text-base);
  font-style: italic;
}

/* Contact block */
.section2-contact {
  padding-top: var(--space-sm);
  border-top: 1px solid #e8e4de;
}

.section2-contact-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.section2-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.section2-contact-list a {
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  border: none;
  padding: 0;
  border-radius: 0;
  letter-spacing: normal;
  text-transform: none;
  width: auto;
}

.section2-contact-list a:hover {
  color: var(--color-accent);
  background: none;
}

/* ────────────────────────────────────────────────────────────────
   8. RSVP FORM SECTION
   SCROLL ANIMATION HOOK — see comment block below.
──────────────────────────────────────────────────────────────── */
#section-weekend {
  min-height: 100dvh;
}

#section-weekend .content-text p:first-of-type {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text);
}

/* .section-weekend-note inherits .content-text p base style */

#section-weekend .section-weekend-note:last-of-type {
  padding-top: var(--space-sm);
  border-top: 1px solid #e8e4de;
}

#section-form {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
  padding: var(--section-padding-block) var(--section-padding-inline);

  /*
    SCROLL ANIMATION HOOK
    ─────────────────────
    Fade + slide-up on entry via view() timeline:

    #section-form {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  */
}

.form-inner {
  max-width: 48rem;
  margin-inline: auto;
}

.form-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-accent);
}

.form-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.form-header p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Individual field wrapper ── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

.form-field[hidden] {
  display: none;
}

.form-field label,
.form-field legend {
  font-size: var(--text-sm);
  font-family: var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Required-field indicator: red asterisk after label/legend */
.form-field:has([required]) > label:not(.radio-label):not(.checkbox-label)::after,
.form-field:has([required]) > legend::after {
  content: " *";
  color: #e07070;
}

/* Fieldset reset */
.form-field--radio {
  border: none;
  padding: 0;
}

.form-field--radio legend {
  margin-bottom: 0.5rem;
}

/* ── Text inputs & textarea ── */
#rsvp-form input[type="text"],
#rsvp-form input[type="number"],
#rsvp-form textarea,
#rsvp-form select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-xs) 0;
  outline: none;
  transition: border-color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

#rsvp-form input[type="text"]:focus,
#rsvp-form input[type="number"]:focus,
#rsvp-form textarea:focus,
#rsvp-form select:focus {
  border-bottom-color: var(--color-accent);
}

#rsvp-form input::placeholder,
#rsvp-form textarea::placeholder {
  color: #bbb;
}

#rsvp-form textarea {
  resize: vertical;
  min-height: 5rem;
}

/* Custom select arrow */
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  padding-right: 1.5rem;
  cursor: pointer;
}

/* ── Radio buttons ── */
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--color-text);
  padding: 0.3rem 0;
}

.radio-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.radio-label input[type="radio"]:checked {
  border-color: var(--color-accent);
}

.radio-label input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background-color: var(--color-accent);
  border-radius: 50%;
}

/* ── Checkbox ── */
.form-field--checkbox {
  margin-bottom: var(--space-md);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--color-text);
  padding: 0.3rem 0;
}

.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.checkbox-label input[type="checkbox"]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ── Kids count input ── */
#rsvp-form input[type="number"] {
  max-width: 6rem;
}

/* ── Submit button ── */
.form-field--submit {
  margin-top: var(--space-lg);
  align-items: flex-start;
}

#rsvp-form button[type="submit"] {
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  padding: 0.75rem 2.5rem;
  text-transform: uppercase;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

#rsvp-form button[type="submit"]:hover {
  background-color: var(--color-accent);
  color: var(--color-surface);
}

/* ── Inline validation errors ── */
.form-field-error {
  font-size: var(--text-sm);
  font-style: italic;
  color: #e07070;
  margin: 0;
}

.form-field--invalid > input,
.form-field--invalid > select,
.form-field--invalid > textarea {
  border-bottom-color: #e07070;
}

/* ── Feedback messages ── */
#form-success {
  margin-top: var(--space-md);
  color: #5a9a6a;
  font-size: var(--text-base);
  font-style: italic;
}

#form-error {
  margin-top: var(--space-md);
  color: #e07070;
  font-size: var(--text-base);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  #section-form {
    padding-inline: var(--space-md);
  }
}

/* ────────────────────────────────────────────────────────────────
   9. INSPIRATIONS SECTION (header + slider)
   SCROLL ANIMATION HOOK — see comment block below.
──────────────────────────────────────────────────────────────── */
#section-inspirations {
  position: relative;
  z-index: 1;
  background-color: var(--color-surface);
  overflow: hidden;

  /*
    SCROLL ANIMATION HOOK
    ─────────────────────
    Fade-in the section on entry:

    #section-inspirations {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 25%;
    }
  */
}

/* ── Two-column header row (text left, image right) ── */
.inspirations-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "text image";
  min-height: 60vh;
}

.inspirations-header .content-text.stay-options,
.inspirations-header .content-text:not(.stay-options) {
  grid-column: 1;
}

.inspirations-header .content-image {
  grid-area: image;
}

/* ── Stay options (inside .inspirations-header .content-text) ── */
.stay-options h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.stay-options > p {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.stay-options-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.stay-options-list li {
  background-color: var(--color-bg);
  border: 1px solid #e8e4de;
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.stay-options-list li h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  margin-bottom: var(--space-xs);
}

.stay-options-list li p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: 0;
}

.stay-options-list li a {
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
}

.stay-options-list li a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ── Full-width slider below the header ── */
.inspirations-slider {
  padding-block: var(--space-lg);
}

/* ── Track ── */
.slider-viewport {
  overflow: hidden;
  cursor: grab;
}

.slider-viewport:active {
  cursor: grabbing;
}

.slider-track,
.slider-track * {
  cursor: inherit;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.slider-track {
  display: flex;
  gap: var(--space-md);
  padding-inline: var(--section-padding-inline);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  list-style: none;
  padding-bottom: var(--space-sm);
  padding-top: var(--space-sm);
}

.slider-track::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

/* ── Card ── */
.slider-card {
  flex: 0 0 clamp(260px, 33vw, 360px);
  background-color: var(--color-bg);
  border: 1px solid #e8e4de;
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-snap-align: center;
  cursor: pointer;
  transition:
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.slider-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.slider-card[aria-current="true"] {
  box-shadow:
    0 0 0 2px var(--color-accent),
    0 4px 20px rgba(0, 0, 0, 0.08);
}

.slider-card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #d6cfc4; /* placeholder until image is set */
}

.slider-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
  /* Placeholder shown when src is empty */
  background-color: #d6cfc4;
}

.slider-card:hover .slider-card-image img {
  transform: scale(1.04);
}

.slider-card-body {
  padding: var(--space-md);
}

.slider-card-tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.slider-card-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  line-height: var(--leading-tight);
}

.slider-card-body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ── Navigation ── */
.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-inline: var(--section-padding-inline);
}

.slider-btn {
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.slider-btn:hover {
  background-color: var(--color-accent);
  color: var(--color-surface);
}

/* ── Counter ── */
.slider-counter {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  min-width: 6rem;
  text-align: center;
}

.slider-counter-sep {
  color: var(--color-accent);
  margin-inline: 0.15em;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .slider-card {
    flex: 0 0 80vw;
  }
}

/* ────────────────────────────────────────────────────────────────
   10. CARD IMAGE PREVIEW
──────────────────────────────────────────────────────────────── */
#card-preview {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

#card-preview[hidden] {
  display: none;
}

.card-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.card-preview-panel {
  position: relative;
  background: #000;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  max-width: min(760px, 92vw);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-preview-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.card-preview-close:hover {
  background: rgba(0, 0, 0, 0.75);
}

.card-preview-img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  display: block;
}

/* ────────────────────────────────────────────────────────────────
   11. FOOTER
──────────────────────────────────────────────────────────────── */
#site-footer {
  position: relative;
  z-index: 1;
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: var(--space-xl) var(--section-padding-inline);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: start;
  max-width: 72rem;
  margin-inline: auto;
}

.footer-block h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.footer-block p,
.footer-block a {
  font-size: var(--text-sm);
  color: var(--color-footer-text);
  line-height: var(--leading-normal);
}

.footer-block a:hover {
  color: var(--color-accent);
}

.footer-block--center {
  text-align: center;
}

.footer-event-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  color: var(--color-text-on-dark);
  margin-bottom: 0.4rem;
}

.footer-address {
  font-size: var(--text-sm);
  color: var(--color-footer-text);
  margin-bottom: 0.75rem;
}

.footer-phones {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.footer-phones a {
  font-size: var(--text-sm);
  color: var(--color-footer-text);
  text-decoration: none;
}

.footer-phones a:hover {
  color: var(--color-accent);
}

.footer-block--right {
  text-align: right;
}

/* ────────────────────────────────────────────────────────────────
   10b. RESPONSIVE — tablet typography (768px–1100px)
   Two-column grid is active but columns are narrow, so scale
   down headings and body text to prevent overflow.
──────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1100px) {
  :root {
    --text-lg: clamp(0.9rem, 0.75rem + 0.4vw, 1.05rem);
    --text-xl: clamp(1rem, 0.8rem + 0.5vw, 1.2rem);
    --text-2xl: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem);
    --text-3xl: clamp(1.2rem, 0.8rem + 1.2vw, 1.8rem);
  }

  .content-text p {
    max-width: 38ch;
  }
}

/* ────────────────────────────────────────────────────────────────
   11. RESPONSIVE — single column below 768px
──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .content-section,
  .content-section--reversed,
  .inspirations-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "text";
  }

  #section-weekend {
    grid-template-areas:
      "text"
      "image";
  }

  .content-image img {
    min-height: 18rem;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "left"
      "right";
    text-align: center;
  }

  .footer-block--center {
    grid-area: center;
  }
  .footer-block:first-child {
    grid-area: left;
  }
  .footer-block--right {
    grid-area: right;
    text-align: center;
  }
}

/* ────────────────────────────────────────────────────────────────
   12. REDUCED MOTION
   Disable all transitions and animations for users who prefer it.
   When you add scroll-driven animations, ensure they are also
   wrapped in the (prefers-reduced-motion: no-preference) query.
──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   13. STORY SECTION — MOBILE OVERRIDE
   On mobile, replace the scroll-driven sticky animation with a
   native full-width swipe carousel using CSS scroll-snap.
   Both blocks must come AFTER the @supports block (line ~616) and
   the existing @media block (line ~1395) so source order wins.
──────────────────────────────────────────────────────────────── */

/* Block 1: cancel animation-timeline properties on mobile in
   browsers that support them (otherwise they'd still apply). */
@supports (animation-timeline: scroll()) {
  @media (max-width: 768px) {
    .story-scroll-wrapper {
      height: auto;
      view-timeline: none;
    }
    #section-story {
      position: static;
      height: auto;
    }
    .story-image-track {
      animation: none;
    }
  }
}

/* Block 2: mobile swipe carousel — applies on all mobile browsers. */
@media (max-width: 768px) {
  .story-scroll-wrapper {
    height: auto;
    position: relative;
    z-index: 1;
    background-color: var(--color-bg);
  }

  #section-story {
    position: static;
    height: auto;
  }

  /* Full-bleed image strip. No explicit width — negative margins expand
     the element to the section's outer edge without overcounting scrollbar. */
  #section-story,
  #section-details {
    grid-template-areas:
      "text"
      "image";
  }

  #section-story .content-image {
    /*margin-inline: calc(-1 * var(--section-padding-inline));*/
    overflow: visible; /* allow ::after swipe hint to show */
    position: relative;
  }

  /* Swipe hint: elegant caption below the carousel, fades out after 3 s */
  #section-story .content-image::after {
    content: "\2014\2002swipe to explore\2002\2014"; /* — swipe to explore — */
    display: block;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-accent);
    letter-spacing: var(--tracking-wide);
    padding-top: var(--space-xs);
    pointer-events: none;
  }

  /* Horizontal scroll-snap container with fixed aspect-ratio height */
  .story-image-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none;
    min-width: 0; /* reset the base calc(9 × 100%) */
    height: 75vw; /* landscape-friendly; images contain-fit inside */
    max-height: 65vh;
  }

  .story-image-track::-webkit-scrollbar {
    display: none;
  }

  /* Each slide = 100% of the (properly-sized) track width */
  .story-image-track img {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    min-height: unset;
    object-fit: contain; /* full image visible, no cropping */
    scroll-snap-align: start;
  }
}