/* =====================================================================
   Golf & Fiat — Wedding invitation
   Direction: Classic Beige (see DESIGN.md)
   Cream paper · charcoal serif · antique-gold accents · light theme
   ===================================================================== */

/* ===== Self-hosted display script for the couple's names =====
   Aston Script (free for personal use) — self-hosted because it isn't on
   Google Fonts. Pinyon Script is the web-safe fallback. */
@font-face {
  font-family: "Aston Script";
  src: url("assets/fonts/AstonScript.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Design tokens (OKLCH) ===== */
:root {
  --cream: oklch(0.965 0.012 85);    /* base background */
  --beige: oklch(0.93 0.02 80);      /* alternating sections, footer */
  --paper: oklch(0.99 0.006 85);     /* RSVP panel, inputs */
  --ink: oklch(0.27 0.018 60);       /* primary text (warm charcoal) */
  --ink-muted: oklch(0.47 0.02 60);  /* secondary text */
  --gold: oklch(0.62 0.085 80);      /* decorative: rules, nodes, borders */
  --gold-ink: oklch(0.50 0.092 74);  /* gold text + CTA fill */
  --on-gold: oklch(0.985 0.01 85);   /* text on gold fill (cream) */

  --hairline: oklch(0.30 0.02 60 / 0.13);
  --hairline-strong: oklch(0.30 0.02 60 / 0.24);
  --shadow: oklch(0.45 0.04 70 / 0.14);
  --glow: oklch(0.99 0.02 88 / 0.7);
  --success: oklch(0.46 0.10 150);
  --error: oklch(0.48 0.16 27);

  /* Latin face first; Charm (romantic Thai) carries Thai glyphs, Noto as fallback */
  --font-display: "Marcellus", "Charm", "Noto Serif Thai", Georgia, serif;
  --font-body: "EB Garamond", "Charm", "Noto Serif Thai", Georgia, serif;
  --font-names: "Aston Script", "Pinyon Script", cursive; /* the couple's names only */

  --maxw: 1040px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-nav: 100;
  --z-menu: 200;

  /* Spacing scale (4pt-based) — use these, not arbitrary values */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(2.5rem, 5vw, 4rem);
  --space-section: clamp(4.5rem, 11vw, 9rem);
  --space-title: clamp(1.7rem, 3vw, 2.6rem); /* title → content gap */

  /* Elevation — soft, warm, restrained */
  --shadow-soft: 0 2px 10px oklch(0.45 0.04 70 / 0.10);
  --shadow-lift: 0 8px 22px oklch(0.45 0.04 70 / 0.14);
  --foil: inset 0 0 0 1px oklch(0.99 0.01 85 / 0.18); /* faint inner edge on gold fills */

  /* Star-lattice watermark (faint gold), tiled across surfaces */
  --botanical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%23a98c52' stroke-width='0.85' opacity='0.5'%3E%3Cpath transform='translate(35 35)' d='M0 -7 Q1.4 -1.4 7 0 Q1.4 1.4 0 7 Q-1.4 1.4 -7 0 Q-1.4 -1.4 0 -7 Z'/%3E%3Cpath transform='translate(0 0)' d='M0 -7 Q1.4 -1.4 7 0 Q1.4 1.4 0 7 Q-1.4 1.4 -7 0 Q-1.4 -1.4 0 -7 Z'/%3E%3Cpath transform='translate(70 0)' d='M0 -7 Q1.4 -1.4 7 0 Q1.4 1.4 0 7 Q-1.4 1.4 -7 0 Q-1.4 -1.4 0 -7 Z'/%3E%3Cpath transform='translate(0 70)' d='M0 -7 Q1.4 -1.4 7 0 Q1.4 1.4 0 7 Q-1.4 1.4 -7 0 Q-1.4 -1.4 0 -7 Z'/%3E%3Cpath transform='translate(70 70)' d='M0 -7 Q1.4 -1.4 7 0 Q1.4 1.4 0 7 Q-1.4 1.4 -7 0 Q-1.4 -1.4 0 -7 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; touch-action: manipulation; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  touch-action: manipulation; /* disable double-tap-to-zoom; pinch still works */
}

/* Subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* Floral line-art watermark across surfaces so nothing reads too plain */
.hero, .section, .footer {
  background-image: var(--botanical);
  background-repeat: repeat;
  background-size: 84px;
  /* Contain the calligraphic name-swashes (and any decorative spill) so they
     never extend the page width — was causing a phantom right-edge strip on
     mobile that pinch-zoom-out revealed. clip keeps smooth-scroll/sticky intact. */
  overflow-x: clip;
}

/* Readability backing — a soft halo of the surface colour sits behind the text
   so the star watermark stays clear of the words but still shows in the open
   space around them. Fades to transparent, so there is no hard panel edge. */
.hero__inner {
  background: radial-gradient(ellipse 82% 74% at 50% 45%,
    oklch(0.965 0.012 85 / 0.94),
    oklch(0.965 0.012 85 / 0.82) 44%,
    oklch(0.965 0.012 85 / 0) 80%);
  padding-inline: clamp(0.5rem, 3vw, 1.5rem);
}
.section .container {
  background: radial-gradient(ellipse 90% 82% at 50% 50%,
    oklch(0.965 0.012 85 / 0.90),
    oklch(0.965 0.012 85 / 0.72) 50%,
    oklch(0.965 0.012 85 / 0) 86%);
  padding-block: clamp(1rem, 3vw, 1.8rem);
}
.section--deep .container {
  background: radial-gradient(ellipse 90% 82% at 50% 50%,
    oklch(0.93 0.02 80 / 0.92),
    oklch(0.93 0.02 80 / 0.74) 50%,
    oklch(0.93 0.02 80 / 0) 86%);
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 2px; }

/* Thai text must not carry Latin-style letter-spacing — wide tracking detaches
   vowel/tone marks and makes words look broken. Soften it in Thai mode. */
html[lang="th"] .hero__eyebrow,
html[lang="th"] .hero__date,
html[lang="th"] .nav__links > a,
html[lang="th"] .cd__label,
html[lang="th"] .field > label,
html[lang="th"] .field__legend,
html[lang="th"] .footer__love,
html[lang="th"] .lang-toggle,
html[lang="th"] .btn {
  letter-spacing: 0.02em;
}

/* ===== Typography helpers ===== */
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0 0 var(--space-title);
  color: var(--ink);
  text-wrap: balance;
}

/* ===== Ornament divider ===== */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 1.6rem auto 0;
}
.ornament::before, .ornament::after {
  content: "";
  height: 1px;
  width: min(80px, 16vw);
}
.ornament::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament::after { background: linear-gradient(90deg, var(--gold), transparent); }
.ornament i {
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

/* ===== Navigation ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-scrolled {
  background-color: oklch(0.965 0.012 85 / 0.85);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: 0 1px 0 var(--hairline), 0 12px 30px var(--shadow);
  padding-top: 0.7rem; padding-bottom: 0.7rem;
}
.nav__brand {
  font-family: var(--font-names);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--ink);
}
.nav__brand .amp { color: var(--gold-ink); margin: 0 0.08em; }
.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 1.9rem); align-items: center; }
.nav__links > a {
  position: relative;
  font-family: var(--font-body);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color .25s var(--ease);
  padding: 0.2rem 0;
}
.nav__links > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links > a:hover { color: var(--ink); }
.nav__links > a:hover::after { transform: scaleX(1); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gold);
  border-radius: 999px;
  min-height: 2.5rem;
  padding: 0.5rem 1.2rem !important;
  color: var(--gold-ink) !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--gold-ink); color: var(--on-gold) !important; border-color: var(--gold-ink); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
  min-width: 3.2rem;
  min-height: 2.5rem;
}
.lang-toggle:hover { border-color: var(--gold-ink); color: var(--gold-ink); }

.nav__toggle {
  display: none;
  background: none; border: none;
  font-size: 1.5rem; color: var(--ink);
  cursor: pointer; line-height: 1; z-index: var(--z-menu);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem; /* ≥44px tap target */
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2.6rem;
  border: 1px solid transparent;
  border-radius: 999px; /* pill — matches the nav button + radio pills */
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}
/* Primary — gold fill with a faint foil edge; seated, not floating */
.btn--gold {
  background: var(--gold-ink);
  color: var(--on-gold);
  border-color: var(--gold-ink);
  box-shadow: var(--shadow-soft), var(--foil);
}
.btn--gold:hover {
  transform: translateY(-1px);
  background: oklch(0.45 0.09 72);
  border-color: oklch(0.45 0.09 72);
  box-shadow: var(--shadow-lift), var(--foil);
}
.btn--gold:active { transform: translateY(0); box-shadow: var(--shadow-soft), var(--foil); }
/* Secondary — gold outline that fills on hover (stationery feel) */
.btn--outline {
  background: transparent;
  color: var(--gold-ink);
  border-color: var(--gold);
}
.btn--outline:hover {
  background: var(--gold-ink);
  border-color: var(--gold-ink);
  color: var(--on-gold);
  transform: translateY(-1px);
}
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; box-shadow: var(--shadow-soft), var(--foil); }

/* Hero button group: RSVP + Add-to-calendar inline, wrapping on small screens */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

/* ===== Hero ===== */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem 1.5rem 5rem;
  position: relative;
}
.hero::before { /* soft paper highlight */
  content: "";
  position: absolute;
  top: 32%; left: 50%;
  width: min(900px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--glow), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.hero__inner { max-width: 820px; }
.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.6rem;
}
.hero__names {
  font-family: var(--font-names);
  font-weight: 400;
  font-size: clamp(2.6rem, 1rem + 6vw, 6.25rem); /* connected script; stacks on phones */
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
  padding-bottom: 0.16em; /* contain the script's deep descenders */
  color: var(--ink);
}
.hero__names .amp { color: var(--gold-ink); margin: 0 0.12em; }
.hero__date {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: clamp(1.5rem, 4vw, 2.75rem) 0 0;
}
.hero .ornament { margin-bottom: 2.6rem; }

/* ===== Countdown ===== */
.countdown {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.9rem, 3vw, 2rem);
  margin-bottom: 2.8rem;
  flex-wrap: wrap;
}
.cd { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.cd__num {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.5rem);
  line-height: 1;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.cd__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.6rem;
}

/* ===== Sections ===== */
.section { padding: var(--space-section) clamp(1.25rem, 5vw, 2rem); }
.section--deep { background-color: var(--beige); }
.container { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.container--narrow { max-width: 600px; }

/* ===== Details ===== */
.details {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.details__rule { background: var(--hairline); width: 1px; align-self: stretch; }
.detail__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-2xs);
  color: var(--ink);
}
.detail__time { /* focal point of each column */
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.6rem);
  line-height: 1.05;
  color: var(--gold-ink);
  margin: 0 0 var(--space-md);
  letter-spacing: 0.02em;
}
.detail__venue { font-weight: 600; color: var(--ink); margin: 0 0 0.2rem; }
.detail__addr { color: var(--ink-muted); margin: 0; font-size: 1rem; }

/* ===== Schedule timeline ===== */
.timeline { list-style: none; padding: 0; max-width: 520px; margin: 0 auto; text-align: left; }
.timeline__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.1rem 0 1.1rem 1.8rem;
  border-left: 1px solid var(--hairline-strong);
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -4.5px; top: 1.85rem;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--beige);
}
.section:not(.section--deep) .timeline__item::before { box-shadow: 0 0 0 4px var(--cream); }
.timeline__item:last-child { border-left-color: transparent; }
.timeline__time {
  flex: 0 0 4.2rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.timeline__event { font-size: 1.1rem; color: var(--ink); }

/* ===== FAQ ===== */
.faq { max-width: 640px; margin: 0 auto; text-align: left; }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item:first-child { border-top: 1px solid var(--hairline); }
.faq__item summary {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1.25rem 2.5rem 1.25rem 0;
  transition: color .2s var(--ease);
}
.faq__item summary:hover { color: var(--gold-ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--gold-ink);
  font-family: var(--font-body);
  font-size: 1.5rem;
  transition: transform .25s var(--ease);
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p { margin: 0; padding: 0 0 1.4rem; color: var(--ink-muted); max-width: 60ch; }

/* ===== RSVP ===== */
.rsvp__panel {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: clamp(1.6rem, 5vw, 3rem);
  box-shadow: 0 24px 60px var(--shadow);
}
.rsvp__deadline {
  margin: -0.6rem 0 2rem;
  color: var(--ink-muted);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.rsvp__deadline strong { color: var(--gold-ink); font-weight: 600; }
.rsvp-form { text-align: left; }
.field { margin-bottom: 1.4rem; }
.field > label, .field__legend {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.55rem;
}
.req { color: var(--gold-ink); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); opacity: 0.7; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a6a4a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px oklch(0.62 0.085 80 / 0.25);
}
.field textarea { resize: vertical; min-height: 3.5rem; }

/* Radio as segmented pills */
.radio-group { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.radio {
  flex: 1 1 0;
  min-width: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 1rem;
  text-align: center;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.radio:hover { border-color: var(--gold); color: var(--ink); }
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio:has(input:checked) {
  border-color: var(--gold-ink);
  background: oklch(0.62 0.085 80 / 0.16);
  color: var(--ink);
}
.field.is-hidden { display: none; }

.form-status { margin: 1rem 0 0; text-align: center; font-size: 1.02rem; min-height: 1.4rem; line-height: 1.5; }
.form-status.is-success { color: var(--success); }
.form-status.is-error { color: var(--error); }

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem;
  background-color: var(--beige);
  border-top: 1px solid var(--hairline);
}
/* Readability backing behind the footer text (matches hero + sections) */
.footer__inner {
  max-width: 540px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.8rem);
  background: radial-gradient(ellipse 90% 80% at 50% 50%,
    oklch(0.93 0.02 80 / 0.92),
    oklch(0.93 0.02 80 / 0.74) 50%,
    oklch(0.93 0.02 80 / 0) 86%);
}
.footer__names {
  font-family: var(--font-names);
  font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1.25;
  margin: 0 0 clamp(0.9rem, 2vw, 1.3rem);
  padding-bottom: 0.14em; /* contain script descenders above the date */
  color: var(--ink);
}
.footer__names .amp { color: var(--gold-ink); margin: 0 0.1em; }
.footer__date { letter-spacing: 0.3em; color: var(--gold-ink); margin: 0 0 1.2rem; font-size: 0.95rem; }
.footer__love {
  font-family: var(--font-body);
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0;
}
.footer__contact { color: var(--ink-muted); font-size: 0.95rem; margin: 0 0 1rem; }

/* ===== Venue extras: add-to-calendar + getting there + map ===== */
.venue-extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
}
.getting-there {
  color: var(--ink-muted);
  font-size: 1rem;
  max-width: 48ch;
  margin: 0;
  line-height: 1.6;
}
.map-wrap {
  max-width: 820px;
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 2.75rem);
}
.map-embed {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 380px);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

/* ===== Dress code ===== */
.dresscode__note {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--ink-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}
.swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: 1.8rem; }
.swatches span {
  display: block;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

/* ===== Motion: hero entrance + scroll reveal (JS-gated) ===== */
html.js [data-hero] {
  opacity: 0;
  transform: translateY(22px);
  animation: rise 0.85s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

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

/* ===== Responsive ===== */
@media (max-width: 760px) {
  .nav__links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: oklch(0.965 0.012 85 / 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: var(--z-menu);
    /* Hide via opacity, NOT translateX(100%): an off-canvas fixed panel adds a
       phantom horizontal-scroll strip on the right that overflow-x:hidden can't
       clip. Fading in place keeps the layout balanced on mobile. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  }
  .nav__links.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav__links > a { font-size: 1.05rem; }
  .nav__toggle { display: block; }

  .details { grid-template-columns: 1fr; }
  .details__rule { width: auto; height: 1px; align-self: stretch; }

  .radio { flex-basis: 100%; }
}

@media (min-width: 761px) {
  .nav__toggle { display: none; }
}

/* Connected-script names: stack on phones so the long swashes never overflow */
@media (max-width: 600px) {
  .hero__names, .footer__names {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.0;
  }
  .hero__names .amp, .footer__names .amp { margin: 0.02em 0; font-size: 0.82em; }
}