/* =====================================================
   STEPHEN & RYAN — Wedding Website
   Chinoiserie color palette derived from licensed
   Aldous Bertram "Dragons & Pagodas" artwork:
   porcelain blue (lead), chartreuse + gold (support),
   coral (limited accent), cream/porcelain ground.
   ===================================================== */

/* ---------- Custom Web Fonts ---------- */
@font-face {
  font-family: 'Fine Wine Script';
  src: url('../fonts/FineWineScript.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fine Wine Flourishes';
  src: url('../fonts/FineWineFlourishes.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design Tokens ---------- */
:root,
[data-theme='light'] {
  /* Surfaces — porcelain cream */
  --color-bg: #fbf7ee;
  --color-surface: #fffdf8;
  --color-surface-2: #f5efdf;
  --color-surface-offset: #efe6cf;
  --color-surface-offset-2: #e8dcc0;
  --color-divider: #e0d4b4;
  --color-border: #d3c4a0;

  /* Text — deep porcelain ink */
  --color-text: #1e3a56;
  --color-text-muted: #55688a;
  --color-text-faint: #9aabc4;
  --color-text-inverse: #fbf7ee;

  /* Primary — porcelain / cornflower blue */
  --color-primary: #2b5a8a;
  --color-primary-hover: #1e4468;
  --color-primary-active: #163350;
  --color-primary-highlight: #dbe6f2;

  /* Cornflower accent (invitation blue) */
  --color-accent: #5b83c4;
  --color-accent-hover: #3f66a8;
  --color-accent-highlight: #e2eaf7;

  /* Gold */
  --color-gold: #bd9530;
  --color-gold-hover: #9a7a22;
  --color-gold-highlight: #f1e6c4;

  /* Chartreuse */
  --color-chartreuse: #93a83c;
  --color-chartreuse-hover: #798c2d;
  --color-chartreuse-highlight: #eaefd2;

  /* Coral — used sparingly */
  --color-coral: #dd7f72;
  --color-coral-highlight: #f7e2dd;

  /* Success / error (form states) */
  --color-success: #5c8a4e;
  --color-error: #b6494a;
  --color-error-highlight: #f3dcdb;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 3px oklch(0.3 0.05 250 / 0.08);
  --shadow-md: 0 6px 20px oklch(0.3 0.05 250 / 0.1);
  --shadow-lg: 0 16px 40px oklch(0.3 0.05 250 / 0.16);

  --content-narrow: 640px;
  --content-default: 980px;
  --content-wide: 1240px;

  --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --font-script: 'Fine Wine Script', 'WindSong', 'Cormorant', cursive;
  --font-body: 'Jost', 'Century Gothic', sans-serif;
}

/* Dark mode removed — site is light-theme only. */

/* ---------- Type scale ---------- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.75rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-24);
}

body {
  min-height: 100dvh;
  line-height: 1.65;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--transition-interactive), color var(--transition-interactive);
  position: relative;
  isolation: isolate;
}
/* EXPERIMENT: "Dragons & Pagodas" chinoiserie print, tiled and faded toward
   the porcelain-cream ground so it reads like the artwork was printed on
   translucent vellum paper laid over the page. A soft directional gradient
   (body::after) sits above the tiled print to reinforce the vellum sheen. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url('../img/dragons-pagodas-vellum.jpg');
  background-repeat: repeat;
  background-size: 420px 534px;
  background-position: center;
  opacity: 0.4;
  mix-blend-mode: multiply;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--color-surface) 92%, transparent) 0%,
    color-mix(in oklab, var(--color-bg) 65%, transparent) 45%,
    color-mix(in oklab, var(--color-surface-offset) 80%, transparent) 100%);
  mix-blend-mode: soft-light;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  line-height: 1.1;
  color: var(--color-primary);
  font-weight: 600;
}
p, li, figcaption { text-wrap: pretty; max-width: 72ch; }

::selection { background: color-mix(in oklab, var(--color-primary) 25%, transparent); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@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;
  }
}

button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }

a, button, [role='button'], input, textarea, select {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
a { color: var(--color-primary); text-decoration: none; }

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

/* ---------- Chinoiserie ring-and-diamond trellis lattice (SVG mask, theme-adaptive) ---------- */
.lattice, .lattice-gold {
  position: relative;
  isolation: isolate;
}
.lattice::before, .lattice-gold::before,
.lattice::after, .lattice-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2762%27%20height%3D%2762%27%3E%3Cpath%20d%3D%27M0%2C31.0%20L31.0%2C0%20L62%2C31.0%20L31.0%2C62%20Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2731.0%27%20r%3D%2719%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3Ccircle%20cx%3D%2762%27%20cy%3D%2731.0%27%20r%3D%2719%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3Ccircle%20cx%3D%2731.0%27%20cy%3D%270%27%20r%3D%2719%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3Ccircle%20cx%3D%2731.0%27%20cy%3D%2762%27%20r%3D%2719%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2762%27%20height%3D%2762%27%3E%3Cpath%20d%3D%27M0%2C31.0%20L31.0%2C0%20L62%2C31.0%20L31.0%2C62%20Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2731.0%27%20r%3D%2719%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3Ccircle%20cx%3D%2762%27%20cy%3D%2731.0%27%20r%3D%2719%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3Ccircle%20cx%3D%2731.0%27%20cy%3D%270%27%20r%3D%2719%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3Ccircle%20cx%3D%2731.0%27%20cy%3D%2762%27%20r%3D%2719%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27/%3E%3C/svg%3E");
  -webkit-mask-size: 62px 62px;
  mask-size: 62px 62px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.lattice::after, .lattice-gold::after {
  transform: translate(-0.5px, -0.5px);
  background-color: color-mix(in oklab, white 70%, transparent);
  opacity: 0.5;
}
.lattice {
  background-color: var(--color-surface-2);
}
.lattice--onwhite {
  background-color: var(--color-bg);
}
.countdown-section {
  position: relative;
  background-color: var(--color-bg);
  padding-bottom: clamp(var(--space-10), 14vw, 8rem);
  overflow: hidden;
}
.countdown-art {
  position: relative;
  display: block;
  width: min(26vw, 230px);
  margin: var(--space-10) auto 0;
  opacity: 0.85;
  pointer-events: none;
}
@media (max-width: 720px) {
  .countdown-art { width: min(48vw, 190px); margin-top: var(--space-8); }
}
.lattice::before {
  transform: translate(0.7px, 0.7px);
  background-color: color-mix(in oklab, var(--color-primary) 38%, transparent);
}
.lattice.lattice-gold::before {
  background-color: color-mix(in oklab, var(--color-gold) 60%, transparent);
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.wrap--wide { max-width: var(--content-wide); }
.wrap--narrow { max-width: var(--content-narrow); }

section { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }

/* Homepage hero — pulled up close under the header so "Welcome" reads
   near the top of the page instead of floating mid-viewport. */
.hero-section { padding-top: clamp(var(--space-4), 3vw, var(--space-8)); }

/* ---------- Site header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-divider);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  z-index: -1;
}
.site-header__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  /* The brand mark's script font grows with viewport width (see --text-2xl),
     and its capital ascenders (S, R) overshoot above the text's own line box.
     Fixed top padding was enough at the mobile font size but let those
     ascenders get clipped by the very top of the page on wider screens.
     Scale the top padding along with the font size (and trim the bottom
     padding by the same amount) so overall header height stays constant
     while the ascenders always have room to render fully. */
  padding-top: calc(var(--space-4) + (var(--text-2xl) - 2rem) * 0.75);
  padding-bottom: max(2px, calc(var(--space-4) - (var(--text-2xl) - 2rem) * 0.75));
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-accent);
  letter-spacing: 0.01em;
  line-height: 1;
}
.brand svg { width: 34px; height: 34px; flex-shrink: 0; }
.brand__mark { width: 40px; height: auto; flex-shrink: 0; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--color-text-muted);
  position: relative;
  padding-block: var(--space-1);
}
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--color-primary); }
.nav-links a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--color-gold);
}
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}
@media (max-width: 780px) {
  .nav-links { position: fixed; inset: 0; top: 68px; background: var(--color-bg);
    flex-direction: column; padding: var(--space-8); gap: var(--space-6);
    font-size: var(--text-lg); transform: translateX(100%); transition: transform 280ms ease; }
  .nav-links.is-open { transform: translateX(0); }
  .nav-toggle { display: flex; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary-highlight); }
.btn--gold {
  background: var(--color-gold);
  color: #2a2205;
}
.btn--gold:hover { background: var(--color-gold-hover); transform: translateY(-1px); }

/* ---------- Eyebrow / script label ---------- */
.eyebrow {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-2);
}
.eyebrow--hero {
  /* Sized down from the previous clamp(5rem, 3rem + 10vw, 11rem) and given
     more top headroom (0.1em → 0.2em) so the tall "W" ascender has room to
     breathe under the header instead of crowding/appearing clipped. */
  font-size: clamp(4rem, 2.4rem + 8vw, 8.8rem);
  line-height: 1;
  margin-bottom: var(--space-5);
  padding-top: 0.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eyebrow__word {
  display: block;
  line-height: 1.35;
  /* Stretches the word horizontally in place (letter-spacing would break
     the connected cursive strokes) so "Welcome" reads wider without
     changing its height. */
  transform: scaleX(1.16);
  transform-origin: center;
}
.eyebrow__final-e {
  font-feature-settings: "fina" 1;
}
.eyebrow__w-alt {
  font-feature-settings: "ss01" 1;
}
.eyebrow__flourish {
  font-family: 'Fine Wine Flourishes';
  font-weight: 700;
  font-size: clamp(3.8rem, 16vw, 4.8rem);
  margin-top: -0.32em;
  align-self: center;
  line-height: 1;
}
@media (min-width: 601px) {
  .eyebrow__flourish { font-size: clamp(4.8rem, 11vw, 6.4rem); }
}
@media (min-width: 1024px) {
  .eyebrow__flourish { font-size: 6.4rem; }
}
.kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 500;
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

/* ---------- Ornamental divider ---------- */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-block: var(--space-8);
  color: var(--color-gold);
}
.divider::before, .divider::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 120px;
  background: linear-gradient(to var(--dir, right), transparent, var(--color-border));
}
.divider::after { --dir: left; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-16) var(--space-10);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--color-primary); }
.credit {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-4);
}

/* ---------- Floating artwork accents ---------- */
.motif {
  position: absolute;
  opacity: 0.92;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px oklch(0.3 0.05 250 / 0.15));
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.stack { display: flex; flex-direction: column; }
.cluster { display: flex; align-items: center; }
.visually-hidden { position: absolute; left: -9999px; }

/* ================= LANDING / GATE ================= */
.gate-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-8) var(--space-5);
  background: var(--color-bg);
}
/* Same vellum-print treatment as body::before/::after, so the gate
   page matches the inner pages exactly (gate-page's own opaque
   background would otherwise hide the body-level layers beneath it). */
.gate-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url('../img/dragons-pagodas-vellum.jpg');
  background-repeat: repeat;
  background-size: 420px 534px;
  background-position: center;
  opacity: 0.6;
  mix-blend-mode: multiply;
}
.gate-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--color-surface) 92%, transparent) 0%,
    color-mix(in oklab, var(--color-bg) 40%, transparent) 45%,
    color-mix(in oklab, var(--color-surface-offset) 65%, transparent) 100%);
  mix-blend-mode: soft-light;
}
/* ---------- Simple password card, monogram, and cabinet-topper motif ---------- */
.gate-box-wrap {
  position: relative;
  z-index: 3;
  width: min(90vw, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gate-monogram {
  /* Back to the original plain gold monogram-gold.png (no outline/shadow
     experiments), just sized up from the original 64-100px range for
     stronger presence on the password landing page. */
  width: clamp(90px, 18vw, 150px);
  height: auto;
  display: block;
  margin-bottom: clamp(10px, 2.6vw, 20px);
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 4px 10px oklch(0.3 0.05 250 / 0.18));
}

/* The cluster of objects (parasol monkey, porcelain vases, coral, parrot)
   that sits on top of the cabinet illustration elsewhere on the site —
   reused here so it appears to perch on top of the password box. Both
   the parrot's full tail feathers and the monkey's own tail trail below
   the cluster and drape down over the box's front face, so the source
   image (900 x 685) is much taller than the cluster itself. The
   cabinet's own top surface line sits at pixel row 409 of that image
   (409 / 685 = 59.71% down, i.e. 40.29% of the image is below the sit
   line). Because .gate-topper's width is always exactly 78% of the same
   .gate-box-wrap container that margin percentages resolve against (the
   340px max-width never actually engages, since 78% of the 400px-capped
   wrap is only 312px), a margin-bottom expressed as a PERCENTAGE holds
   this ratio exactly at every viewport width — unlike a vw-based clamp,
   which was only an approximation. margin % = (below-sit-line fraction)
   x 78 / aspect-ratio = 0.40292 x 78 / (900/685) = -23.91%. */
.gate-topper {
  position: relative;
  width: 78%;
  max-width: 340px;
  margin-bottom: -23.91%;
  z-index: 4;
  pointer-events: none;
  /* The ambient blue drop-shadow alone isn't enough to keep the pale tan
     monkey tail legible where it overlaps the near-white .gate-card below
     the sit line (low tan-on-white contrast made the tail's loop read as
     faint/incomplete). Two extra tight, dark "contact shadow" passes add a
     thin defining edge around every opaque shape without looking heavy
     against the busy wallpaper above the sit line. */
  filter: drop-shadow(0 10px 18px oklch(0.3 0.05 250 / 0.2)) drop-shadow(0 1px 2px rgba(35,25,15,0.45)) drop-shadow(0 0px 1px rgba(35,25,15,0.55));
}

.gate-card {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), 0 22px 44px oklch(0.3 0.05 250 / 0.14);
  /* Top padding enlarged (vs. the shared bottom/side padding below) so the
     couple's names clear the monkey tail that drapes down from .gate-topper
     and sit with clear breathing room beneath it, at every viewport width. */
  padding: clamp(30px, 8vw, 48px) clamp(22px, 6vw, 36px);
  padding-top: clamp(64px, 15vw, 96px);
  pointer-events: auto;
}
.gate-card.shake { animation: shake 480ms cubic-bezier(.36,.07,.19,.97); }
.gate-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(3px, 0.8vw, 6px);
  text-align: center;
}

@media (max-width: 560px) {
  .gate-box-wrap { width: min(92vw, 340px); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.gate-names {
  font-family: var(--font-script);
  font-weight: 700;
  /* ~1.55x the original clamp(1.3rem, 5.4vw, 2.15rem) at every value, per
     the couple's request to enlarge the names by at least 50%. */
  font-size: clamp(2rem, 8.4vw, 3.35rem);
  color: var(--color-primary);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0;
  white-space: nowrap;
}
.gate-amp {
  color: var(--color-primary);
  display: inline-block;
  margin-inline: 0.06em;
}
.gate-date {
  margin-top: 0;
  font-size: clamp(0.55rem, 1.7vw, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 500;
}
.gate-loc { color: var(--color-text-muted); font-size: clamp(0.55rem, 1.7vw, 0.72rem); margin-top: 0; }

.gate-form {
  margin-top: clamp(4px, 1.4vw, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.8vw, 6px);
  width: 100%;
}
.gate-input-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(4px, 1vw, 6px);
  width: 100%;
}
.gate-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(4px, 1vw, 8px) clamp(6px, 1.6vw, 12px);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(0.55rem, 1.5vw, 0.7rem);
}
.gate-input:focus-visible { border-color: var(--color-accent); }
.gate-form .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: clamp(4px, 1vw, 8px) clamp(10px, 2.2vw, 16px);
  font-size: clamp(0.55rem, 1.5vw, 0.7rem);
}
.gate-error {
  color: var(--color-error);
  font-size: clamp(0.55rem, 1.5vw, 0.68rem);
  letter-spacing: 0.04em;
}
.gate-hint {
  color: var(--color-text-faint);
  font-size: clamp(0.4rem, 1vw, 0.48rem);
  margin-top: clamp(3px, 1vw, 6px);
  line-height: 1.3;
  max-width: 82%;
}

/* ================= HOME HUB ================= */
/* Stacked layout on all breakpoints (text above, art below, centered) —
   matches the mobile treatment instead of a side-by-side desktop grid. */
.hub-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  text-align: center;
}
.hub-hero__text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hub-hero__text p { margin-left: auto; margin-right: auto; }
.hub-hero__art { position: relative; width: 100%; max-width: 480px; margin: 0 auto; }
.hub-hero__art img { border-radius: var(--radius-lg); width: 100%; }

.quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 860px) { .quick-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .quick-links { grid-template-columns: 1fr; } }
.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.quick-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.quick-link__icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.quick-link__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary); }

.countdown {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}
.countdown__item {
  min-width: 74px;
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  text-align: center;
}
.countdown__num { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); display: block; }
.countdown__label { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }

/* ================= TIMELINE (SCHEDULE) ================= */
.timeline { position: relative; max-width: 760px; margin-inline: auto; }
.timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-border), var(--color-gold), var(--color-border));
}
@media (max-width: 640px) { .timeline::before { left: 20px; } }
.timeline-event {
  position: relative;
  padding-left: 72px;
  margin-bottom: var(--space-10);
}
@media (max-width: 640px) { .timeline-event { padding-left: 52px; } }
.timeline-event__dot {
  position: absolute;
  left: 14px; top: 6px;
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 2px solid var(--color-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-gold);
}
@media (max-width: 640px) { .timeline-event__dot { left: 6px; width: 26px; height: 26px; } }
.timeline-event__time { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.timeline-event__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); margin-top: var(--space-1); }
.timeline-event__meta { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.timeline-day-label {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--color-gold);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
  padding-left: 72px;
}
@media (max-width: 640px) { .timeline-day-label { padding-left: 52px; } }

/* ================= LODGING ================= */
.hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .hotel-grid { grid-template-columns: 1fr; } }
.hotel-card { display: flex; flex-direction: column; height: 100%; }
.hotel-card__badge {
  display: inline-flex; align-self: flex-start;
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary); background: var(--color-primary-highlight);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.info-row { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.info-row:last-child { border-bottom: none; }
.info-row__icon { color: var(--color-gold); flex-shrink: 0; margin-top: 2px; }

/* ================= REGISTRY ================= */
.registry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .registry-grid { grid-template-columns: 1fr; } }
.registry-card { text-align: center; }
.registry-card__mark {
  width: 56px; height: 56px; margin-inline: auto; margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}

/* ================= FAQ ================= */
.accordion-item { border-bottom: 1px solid var(--color-divider); }
.accordion-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary);
}
.accordion-trigger__icon { flex-shrink: 0; transition: transform var(--transition-interactive); color: var(--color-gold); }
.accordion-trigger[aria-expanded='true'] .accordion-trigger__icon { transform: rotate(45deg); }
.accordion-panel { height: 0; overflow: hidden; transition: height 260ms cubic-bezier(0.16,1,0.3,1); }
.accordion-panel__inner { padding-bottom: var(--space-5); color: var(--color-text-muted); }

/* ================= REVEAL ANIMATION ================= */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ================= PAGE HERO (interior pages) ================= */
.page-hero {
  text-align: center;
  padding-block: clamp(var(--space-16), 10vw, var(--space-24)) clamp(var(--space-10), 6vw, var(--space-16));
  position: relative;
  overflow: hidden;
}
.page-hero__eyebrow { font-family: var(--font-script); font-weight: 700; color: var(--color-gold); font-size: var(--text-2xl); }
.page-hero__title { font-size: var(--text-2xl); margin-top: var(--space-2); }
.page-hero__sub { color: var(--color-text-muted); max-width: 620px; margin: var(--space-4) auto 0; }