/* ==========================================================================
   Silverglass — Sage & Champagne
   A wedding website template. Colours, type and spacing live in the tokens
   below; change them here and the whole site follows.
   ========================================================================== */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/albert-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/albert-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Palette: porcelain paper, sage ink, champagne foil */
  --paper: #f7f6f1;
  --paper-raised: #fcfbf8;
  --sage-50: #eceee6;
  --sage-100: #e2e7db;
  --sage-200: #cfd7c6;
  --sage-300: #b5c0aa;
  --sage-400: #9aa88f;
  --sage-600: #5e6e5b;
  --sage-700: #4f5f4f;
  --sage-800: #3e4c3f;
  --sage-900: #2c372e;
  --ink: #232b25;
  --ink-deep: #1b231d;
  --champagne-100: #f4eee2;
  --champagne-200: #ebe0c9;
  --champagne-300: #e3d3b0;
  --champagne-400: #d4bf93;
  --champagne-500: #c2a878;
  --champagne-700: #7d6235;
  --error: #9a3324;
  --error-bg: #f8ebe7;
  --foil: linear-gradient(90deg, #e7d6ae 0%, #c2a878 38%, #d9c69a 62%, #ebdcbe 100%);
  --foil-text: linear-gradient(135deg, #7d6235 0%, #b08a52 45%, #8a6a3a 100%); /* every stop ≥ 3:1 on paper, for display sizes */

  /* Type */
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-sm: 1rem;
  --text-base: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
  --h3: clamp(1.45rem, 1.3rem + 0.5vw, 1.75rem);
  --h2: clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem);
  --h1: clamp(3.25rem, 2rem + 5.5vw, 6.75rem);
  --display: clamp(4.25rem, 2.4rem + 9vw, 10.5rem);

  /* Space & layout */
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --max: 86rem;
  --section: clamp(4.5rem, 3rem + 7vw, 10rem);
  --header-h: 4rem;
  --radius-s: 0.375rem;
  --radius-m: 0.875rem;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Glass */
  --glass-strong: rgba(247, 246, 241, 0.84);

  color-scheme: light;
}

@media (min-width: 1024px) {
  :root { --header-h: 4.75rem; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  background: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.65;
  font-weight: 400;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Paper grain: a faint noise tile over the paper colour so the page reads as stock, not a flat fill */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.22 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

main { flex: 1 0 auto; outline: none; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 350;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
p, li, dd, dt, figcaption, h1, h2, h3 { overflow-wrap: break-word; }
a[href^='mailto:'] { overflow-wrap: anywhere; }

a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--champagne-500);
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}

strong { font-weight: 600; }

button, a, summary, [role='button'] { touch-action: manipulation; }

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

::selection { background: var(--champagne-300); color: var(--ink); }

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

[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink-deep);
  color: var(--paper);
  border-radius: 999px;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus { transform: none; }

.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.narrow { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The eucalyptus sprig, drawn in a single fine line */
.sprig {
  width: 5.5rem;
  height: auto;
  fill: none;
  stroke: var(--sage-400);
  stroke-width: 1.1;
  stroke-linecap: round;
  overflow: visible;
}
.sprig * { vector-effect: non-scaling-stroke; }
.sprig ellipse { fill: rgba(154, 168, 143, 0.1); }

.monogram {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Foil hairline: a champagne gradient rule, 1px, used wherever rows meet */
.foil, .section-head::after {
  display: block;
  height: 1px;
  background: var(--foil);
}

/* --------------------------------------------------------------------------
   The names lockup
   -------------------------------------------------------------------------- */

.names {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.names__line {
  display: block;
  padding: 0.06em 0.08em 0.06em 0; /* room for swashes so nothing clips */
  white-space: nowrap;
}
.names__joiner {
  display: inline-block;
  margin-right: 0.12em;
  font-size: 0.86em;
  font-weight: 400;
  background: var(--foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.names--long { font-size: 0.72em; }
.names--long .names__line { white-space: normal; }

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink-deep);
  --btn-fg: var(--paper);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 1rem/1.2 var(--sans);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn--primary { --btn-bg: var(--ink-deep); --btn-fg: #fff; }
.btn--quiet { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--champagne-500); }
.btn--light { --btn-bg: var(--champagne-100); --btn-fg: var(--ink-deep); }
.btn--compact { min-height: 2.75rem; padding: 0.5rem 1.15rem; }
.btn--large { min-height: 3.5rem; padding: 0.9rem 2rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: var(--ink); }
  .btn--primary:hover { --btn-bg: var(--sage-800); color: #fff; }
  .btn--quiet:hover { --btn-bg: var(--champagne-100); --btn-border: var(--champagne-700); color: var(--ink); }
  .btn--light:hover { --btn-bg: #fff; color: var(--ink-deep); }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
}
.btn-row--center { justify-content: center; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 2.75rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--ink);
}
.text-link .icon { width: 1em; height: 1em; color: var(--champagne-700); transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover .icon--chevron { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--ink);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  view-transition-name: site-header;
}
.site-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--foil);
  opacity: 0.8;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  color: var(--ink);
  text-decoration: none;
}
.brand__mono { font-size: 1.6rem; line-height: 1; }

.site-nav { display: none; margin-left: auto; }
.site-nav ul { display: flex; gap: clamp(1rem, 1.6vw, 2rem); list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 450;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__link[aria-current] {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--champagne-700);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav__link:hover { color: var(--champagne-700); }
}

.site-header__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 0.6rem;
  margin-right: -0.6rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 1rem/1 var(--sans);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.menu-button .icon { width: 1.4rem; height: 1.4rem; }

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__actions { margin-left: 0.5rem; }
  .menu-button { display: none; }
}

/* Menu sheet: the one dark room in the site. A native <dialog> so focus is trapped and Esc closes it */
.menu-sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink-deep);
  color: var(--champagne-100);
  overscroll-behavior: contain;
}
.menu-sheet::backdrop { background: rgba(27, 35, 29, 0.4); }
.menu-sheet__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: env(safe-area-inset-top, 0px) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.menu-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  flex: none;
}
.menu-sheet__mono { font-size: 1.6rem; color: var(--champagne-300); }
.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  margin-right: -0.6rem;
  border: 0;
  background: none;
  color: var(--champagne-100);
  font: 500 1rem/1 var(--sans);
  cursor: pointer;
}
.menu-close .icon { width: 1.4rem; height: 1.4rem; }
.menu-sheet__list {
  list-style: none;
  margin: clamp(1rem, 5vh, 3rem) 0 2rem;
  padding: 0;
}
.menu-sheet__link {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(212, 191, 147, 0.18);
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.menu-sheet__link[aria-current] { font-style: italic; color: var(--champagne-300); }
.menu-sheet__foot { margin-top: auto; color: var(--champagne-200); }
.menu-sheet__date { font-family: var(--serif); font-style: italic; font-size: var(--text-lg); color: var(--champagne-100); margin-bottom: 0.15rem; }
.menu-sheet__place { margin-bottom: 0; }
.menu-sheet__foot .btn { margin-top: 1.25rem; --btn-bg: var(--champagne-100); --btn-fg: var(--ink-deep); }
.menu-sheet :focus-visible { outline-color: var(--champagne-300); }

@media (prefers-reduced-motion: no-preference) {
  .menu-sheet[open] { animation: sheet-in 360ms var(--ease-out); }
  .menu-sheet.is-closing { animation: sheet-out 220ms var(--ease-in-out) forwards; }
  .menu-sheet[open] .menu-sheet__link { animation: link-in 480ms var(--ease-out) backwards; }
  .menu-sheet[open] li:nth-child(2) .menu-sheet__link { animation-delay: 40ms; }
  .menu-sheet[open] li:nth-child(3) .menu-sheet__link { animation-delay: 80ms; }
  .menu-sheet[open] li:nth-child(4) .menu-sheet__link { animation-delay: 120ms; }
  .menu-sheet[open] li:nth-child(5) .menu-sheet__link { animation-delay: 160ms; }
  .menu-sheet[open] li:nth-child(6) .menu-sheet__link { animation-delay: 200ms; }
  .menu-sheet[open] li:nth-child(n + 7) .menu-sheet__link { animation-delay: 240ms; }
  .menu-sheet[open] .menu-sheet__foot { animation: link-in 480ms var(--ease-out) 280ms backwards; }
}
@keyframes sheet-in { from { opacity: 0; } }
@keyframes sheet-out { to { opacity: 0; } }
@keyframes link-in { from { opacity: 0; transform: translateY(10px); } }

/* --------------------------------------------------------------------------
   Sections & shared layout
   -------------------------------------------------------------------------- */

.section { padding-block: var(--section); }
.section--tint { background: var(--sage-50); }
.section--flush-top { padding-top: 0; }
.section:not(.section--tint) + .section:not(.section--tint) { padding-top: 0; }

.h2 {
  font-size: var(--h2);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
}

.lede {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--sage-700);
  max-width: 36ch;
}

/* Section head: heading left, intro right, foil rule beneath */
.section-head {
  display: grid;
  gap: 1rem 3rem;
  align-items: end;
  padding-bottom: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  position: relative;
}
.section-head::after { content: ''; position: absolute; inset: auto 0 0 0; }
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .section-head .lede { justify-self: end; max-width: 40ch; }
}
.section-foot { margin: 2rem 0 0; }

.prose { max-width: 62ch; }
.prose p { margin-bottom: 1.1em; }
.prose--dropcap > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font: italic 400 3.6em/0.82 var(--serif);
  background: var(--foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.note { font-size: var(--text-sm); color: var(--sage-600); }

.statement {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  margin-bottom: 1.25rem;
  color: var(--ink);
}

/* Editorial split used on sub-pages: heading column left, content right */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.split > *, .story__grid > *, .venue > * { min-width: 0; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  .split__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 2.5rem); }
  .split__body { grid-column: 6 / -1; }
}
.split__head .lede { margin-top: 1.25rem; }

/* Label/value pairs */
.pairs { margin: 1.5rem 0 0; display: grid; gap: 0.9rem; }
.pairs > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
.pairs dt { font-family: var(--serif); font-style: italic; color: var(--champagne-700); font-size: var(--text-lg); line-height: 1.4; }
.pairs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pairs dd > a:only-child { display: inline-flex; align-items: center; min-height: 2.75rem; }
.pairs--compact { margin-top: 0.75rem; gap: 0.35rem; }
.pairs--compact > div { grid-template-columns: 4.5rem minmax(0, 1fr); }
.pairs--compact dt { font-size: var(--text-base); }
.pairs--stack > div { grid-template-columns: 1fr; gap: 0.1rem; }

/* Menu-card rows: italic label, serif value, action on the right, foil hairlines between */
.menu-card { margin: 0; }
.menu-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 2rem;
  padding: 1.75rem 0;
}
.menu-row::before, .menu-row:last-child::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--foil); transform-origin: left; }
.menu-row:last-child::after { top: auto; bottom: 0; }
.menu-row__panel { grid-column: 1 / -1; margin: 0; }
.menu-row__panel:empty { display: none; }
.menu-row__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--champagne-700);
}
.menu-row__body { margin: 0; }
.menu-row__main {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  font-weight: 350;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.menu-row__detail { color: var(--sage-700); max-width: 52ch; }
.menu-row__detail p { margin-bottom: 0.4em; }
.menu-row__action { margin: 0.5rem 0 0; }
.menu-row__action:empty { display: none; }
@media (min-width: 768px) {
  .menu-row { grid-template-columns: 8rem minmax(0, 1fr) auto; align-items: start; padding: 2.25rem 0; }
  .menu-row__label { padding-top: 0.6rem; }
  .menu-row__action { margin: 0.35rem 0 0; justify-self: end; }
  .menu-row__panel { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Hero: the photograph, full bleed, with the names resting on its lower edge
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
  overflow: hidden;
  color: var(--paper);
}
.hero--plate { min-height: calc(82svh - var(--header-h)); color: var(--ink); }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--sage-100); }
.hero__img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform-origin: 50% 30%; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 35, 29, 0.82) 0%, rgba(27, 35, 29, 0.5) 32%, rgba(27, 35, 29, 0.12) 58%, rgba(27, 35, 29, 0) 78%);
}
.hero--plate .hero__scrim { background: linear-gradient(to top, rgba(247, 246, 241, 0.9) 0%, rgba(247, 246, 241, 0.4) 40%, rgba(247, 246, 241, 0) 70%); }

/* Without a photo: a pale plate with the eucalyptus drawn large, like a pressed specimen */
.hero__plate {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 80% at 85% 10%, var(--champagne-100) 0%, rgba(244, 238, 226, 0) 60%),
    linear-gradient(160deg, var(--sage-50) 0%, var(--sage-100) 100%);
}
.hero__sprig { position: absolute; right: -4%; top: -4%; width: min(70%, 42rem); stroke: var(--sage-400); transform: rotate(172deg); }
.hero__sprig ellipse { fill: rgba(154, 168, 143, 0.14); }

.hero__card {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: clamp(5rem, 14vh, 9rem) 0 clamp(2rem, 5vw, 3.5rem);
  will-change: transform, opacity;
}
.hero__kicker { margin: 0 0 0.5rem; max-width: 36ch; font-family: var(--serif); font-style: italic; font-size: var(--text-lg); color: var(--champagne-200); text-wrap: balance; }
.hero--plate .hero__kicker { color: var(--champagne-700); }
.hero__names { font-size: clamp(2.9rem, 1.6rem + 6vw, 6.25rem); line-height: 0.95; color: inherit; }
.hero__names .names__line { display: inline-block; padding-right: 0.18em; white-space: normal; }
.hero__names .names__one, .hero__names .names__two { color: inherit; }
.hero--photo .hero__names .names__joiner { background: linear-gradient(135deg, #e7d6ae 0%, #c2a878 45%, #e3d3b0 100%); -webkit-background-clip: text; background-clip: text; }
.hero__when { margin: 0.75rem 0 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.35; }
.hero__when time { display: block; }
.hero__where { display: block; color: var(--champagne-200); }
.hero--plate .hero__where { color: var(--sage-700); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.25rem; }
.hero--photo .btn--primary { --btn-bg: var(--paper); --btn-fg: var(--ink-deep); }
.hero--photo .text-link { color: var(--paper); }
.hero--photo .text-link .icon { color: var(--champagne-300); }
.hero--photo :focus-visible { outline-color: var(--champagne-300); }
@media (hover: hover) and (pointer: fine) {
  .hero--photo .btn--primary:hover { --btn-bg: var(--champagne-100); color: var(--ink-deep); }
}
@media (min-width: 768px) {
  .hero__card { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 3rem; }
  .hero__kicker, .hero__names { grid-column: 1 / -1; }
  .hero__when { grid-column: 1; }
  .hero__actions { grid-column: 2; margin-top: 0; justify-content: flex-end; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__names .names__line { overflow: hidden; }
  .hero__names .names__one, .hero__names .names__two, .hero__names .names__joiner {
    display: inline-block;
    animation: rise 1100ms var(--ease-out) backwards;
  }
  .hero__names .names__two { animation-delay: 110ms; }
  .hero__names .names__joiner { animation: rise 1100ms var(--ease-out) 110ms backwards, fade 900ms var(--ease-out) 450ms backwards; }
  .hero__kicker, .hero__when, .hero__actions { animation: fade 900ms var(--ease-out) 520ms backwards; }
  .hero__img { animation: settle 2600ms var(--ease-out) backwards; }
}
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes settle { from { transform: scale(1.06); } }

/* --------------------------------------------------------------------------
   Countdown: one large figure under the photograph
   -------------------------------------------------------------------------- */

.countdown { padding-block: clamp(2.5rem, 2rem + 4vw, 5rem); background: var(--foil) bottom / 100% 1px no-repeat; }
.countdown__inner { display: grid; gap: 0.5rem 3rem; align-items: center; }
.countdown__figure { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6em; margin: 0; font-family: var(--serif); }
.countdown__num {
  font-size: clamp(5.5rem, 3rem + 11vw, 12rem);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.countdown__num--word { font-style: italic; font-size: clamp(3.5rem, 2rem + 7vw, 8rem); letter-spacing: -0.03em; }
.countdown__unit { font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 300; color: var(--champagne-700); }
.countdown__title { margin: 0; font-family: var(--serif); font-size: var(--h3); font-weight: 350; font-style: italic; letter-spacing: -0.01em; }
.countdown__until { margin: 0; color: var(--sage-700); font-size: var(--text-base); max-width: 36ch; }
@media (min-width: 900px) {
  .countdown__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .countdown__figure { grid-row: 1 / span 2; }
  .countdown__title { align-self: end; }
  .countdown__until { align-self: start; }
}

/* --------------------------------------------------------------------------
   Scroll choreography
   The hero stays put while the paper sheet slides up over it; a paper curtain lifts off
   the closing; photographs are unveiled; the story warms as you pass through it; every
   section rises as it arrives. All of it is scrubbed by the scroll, so it plays forwards
   and backwards with the reader's thumb. Browsers without scroll timelines get the same
   choreography from site.js, which drives the same keyframes from the scroll position.
   -------------------------------------------------------------------------- */

.hero { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 0; }
.sheet { position: relative; z-index: 1; background: var(--paper); border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 -24px 60px -30px rgba(27, 35, 29, 0.55); }
.sheet::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: inherit; }
.closing { z-index: 1; }
.closing__curtain { position: absolute; inset: -1px 0 auto 0; height: 101%; z-index: 2; background: var(--paper); pointer-events: none; }

.curtain { clip-path: inset(0 0 0 0 round var(--radius-s)); }
.story__photo--a.curtain { clip-path: inset(0 0 0 0 round 999px 999px var(--radius-s) var(--radius-s) / 38% 38% var(--radius-s) var(--radius-s)); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero--photo .hero__media { animation: settle 2600ms var(--ease-out) backwards, hero-sink linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    .hero--plate .hero__media { animation: hero-sink linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero__card { animation: hero-recede linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    .reveal { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .reveal--head { animation-name: reveal-head; }
    .reveal--left { animation-name: reveal-left; }
    .programme__item:nth-child(2) { animation-range: entry 12% entry 57%; }
    .programme__item:nth-child(3) { animation-range: entry 24% entry 69%; }
    .countdown__num { animation: countdown-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .curtain { animation: unveil linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .story__photo--a.curtain { animation-name: unveil-arch; }
    .story__photo--b.curtain { animation-range: entry 10% entry 80%; }
    .story__photo--a .story__img { animation: drift-a linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .story__photo--b .story__img { animation: drift-b linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .story { animation: story-warm linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .closing__curtain { animation: curtain-lift linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .closing__img { animation: closing-settle linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .closing__inner { animation-range: entry 20% entry 75%; }
    /* The essentials: the hairline draws, the label slides in, the action arrives last */
    .menu-row::before, .menu-row:last-child::after { animation: draw-x linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .menu-row__label { animation: reveal-left linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    .menu-row__action { animation: reveal-right linear both; animation-timeline: view(); animation-range: entry 15% entry 65%; }
    /* How we got here: the paragraphs stagger, the sign-off is written */
    .reveal--soft { animation-name: reveal-soft; animation-range: entry 0% entry 55%; }
    .prose > .reveal--soft:nth-child(2) { animation-range: entry 12% entry 67%; }
    .prose > .reveal--soft:nth-child(3) { animation-range: entry 24% entry 79%; }
    .signoff { animation: write-in linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .story__photo--b.curtain { animation-name: unveil-tilt; }
    /* The weekend: dates rise into place, dividers draw, the wedding is underlined */
    .programme__day { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    .programme__weekday, .programme__month { animation: reveal-soft linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    .programme__item + .programme__item::before { animation: draw-y linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .programme__item--main .programme__title { animation: underline-in linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }
  }
  @supports not (animation-timeline: view()) {
    /* site.js scrubs these by hand; until it has, nothing is hidden */
    .js.scrub .reveal, .js.scrub .curtain, .js.scrub .hero__card, .js.scrub .closing__curtain, .js.scrub .story, .js.scrub .countdown__num, .js.scrub .story__img, .js.scrub .closing__img, .js.scrub .hero__media { will-change: transform, opacity; }
  }
}
@keyframes hero-sink { to { transform: scale(0.92); opacity: 0.35; } }
@keyframes hero-recede { to { opacity: 0; transform: translateY(-3rem); } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(3.5rem); } }
@keyframes reveal-head { from { opacity: 0; transform: translateY(2.5rem) scale(0.96); transform-origin: left bottom; } }
@keyframes reveal-left { from { opacity: 0; transform: translateX(-3rem); } }
@keyframes countdown-grow { from { opacity: 0; transform: translateY(0.3em) scale(0.72); transform-origin: left bottom; } }
@keyframes unveil { from { clip-path: inset(100% 0 0 0 round var(--radius-s)); } }
@keyframes unveil-arch { from { clip-path: inset(100% 0 0 0 round 999px 999px var(--radius-s) var(--radius-s) / 38% 38% var(--radius-s) var(--radius-s)); } }
@keyframes drift-a { from { transform: translateY(6%) scale(1.08); } to { transform: translateY(-6%) scale(1.08); } }
@keyframes drift-b { from { transform: translateY(16%) scale(1.1); } to { transform: translateY(-12%) scale(1.1); } }
@keyframes story-warm { 0% { background-color: var(--paper); } 30% { background-color: var(--sage-50); } 70% { background-color: var(--sage-50); } 100% { background-color: var(--paper); } }
@keyframes curtain-lift { to { transform: translateY(-100%); } }
@keyframes closing-settle { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(2.5rem); } }
@keyframes reveal-soft { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes rise-in { from { transform: translateY(110%); } }
@keyframes write-in { from { clip-path: inset(-0.2em 100% -0.3em 0); } }
@keyframes unveil-tilt { from { clip-path: inset(100% 0 0 0 round var(--radius-s)); transform: rotate(-4deg) translateY(2rem); } }
@keyframes underline-in { from { background-size: 0% 1px; } to { background-size: 100% 1px; } }

/* --------------------------------------------------------------------------
   Home sections
   -------------------------------------------------------------------------- */

.story { overflow: hidden; }
.story__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.story__photos { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
.story__photo { margin: 0; overflow: hidden; border-radius: var(--radius-s); }
.story__photo--a { grid-column: 1 / span 8; grid-row: 1; }
.story__photo--b { grid-column: 7 / -1; grid-row: 1; margin-top: 42%; z-index: 1; }
.story__photo--a .story__img { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius-s) var(--radius-s) / 38% 38% var(--radius-s) var(--radius-s); }
.story__photo--b .story__img { aspect-ratio: 1 / 1.1; border-radius: var(--radius-s); outline: 0.5rem solid var(--paper); }
.story__photos:has(> :only-child) .story__photo { grid-column: 2 / span 10; margin-top: 0; }
.story__img { width: 100%; object-fit: cover; }
.story__text .h2 { margin-bottom: 1.75rem; }
.story__signoff {
  margin-top: 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 300;
  color: var(--champagne-700);
}
.story--text .story__grid { grid-template-columns: minmax(0, 1fr); }
.story--text .story__sprig { width: clamp(7rem, 14vw, 11rem); }
@media (min-width: 1024px) {
  .story--photos .story__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  .story--photos .story__photos { grid-column: 1 / span 6; }
  .story--photos .story__text { grid-column: 8 / -1; }
  .story--text .story__grid { grid-template-columns: 3fr 7fr; align-items: start; }
}

/* Elements slide in from the sides as they arrive; keep that inside the section */
.essentials, .glance, .plan { overflow-x: clip; }

/* Directions: the map drops open on the page */
.map { display: grid; justify-items: end; }
.map__toggle .icon:last-child { transition: transform 240ms var(--ease-out); }
.map__toggle[aria-expanded='true'] .icon:last-child { transform: rotate(90deg); }
.map__panel { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 480ms var(--ease-in-out); }
.map__panel.is-open { grid-template-rows: 1fr; }
.map__inner { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-0.5rem); transition: opacity 320ms var(--ease-out), transform 480ms var(--ease-out), visibility 0s 480ms; visibility: hidden; }
.map__panel.is-open .map__inner { opacity: 1; transform: none; visibility: visible; transition-delay: 80ms, 0s, 0s; }
.map__frame { margin-top: 1.25rem; height: clamp(16rem, 48vh, 30rem); border-radius: var(--radius-s); overflow: hidden; background: var(--sage-100); box-shadow: inset 0 0 0 1px var(--champagne-300); }
.map__iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(0.82) sepia(0.08); }
.map__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0.5rem 0 0; }
@media (max-width: 767px) { .map { justify-items: start; } }

/* The weekend: a programme strip with large dates */
.programme {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  background: var(--foil) bottom / 100% 1px no-repeat;
}
@media (min-width: 768px) { .programme { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.programme__item { padding: 1.75rem 0; background: var(--foil) top / 100% 1px no-repeat; }
@media (min-width: 768px) {
  .programme__item { padding: 0.5rem clamp(1.25rem, 2.5vw, 2.5rem) 0.5rem 0; background: none; }
  .programme__item { position: relative; }
  .programme__item + .programme__item { padding-left: clamp(1.25rem, 2.5vw, 2.5rem); }
  .programme__item + .programme__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--champagne-300); transform-origin: top; }
}
.programme__date { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; margin-bottom: 1rem; font-family: var(--serif); }
.programme__weekday { flex-basis: 100%; font-style: italic; color: var(--champagne-700); font-size: var(--text-lg); }
.programme__day { font-size: clamp(3rem, 2.4rem + 2.6vw, 4.75rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.programme__month { font-size: var(--text-lg); font-style: italic; }
.programme__title { font-size: var(--h3); font-weight: 380; margin-bottom: 0.5rem; }
.programme__meta { color: var(--sage-700); margin: 0; }
.programme__item--main .programme__day, .programme__item--main .programme__title { color: var(--ink); }
.programme__item--main .programme__title { font-style: italic; display: inline-block; padding-bottom: 0.15em; background: var(--foil) bottom left / 100% 1px no-repeat; }
.programme__date { overflow: hidden; }
.signoff { clip-path: inset(-0.2em 0 -0.3em 0); }

.index-list { list-style: none; margin: 0; padding: 0; }
.index-list li { background: var(--foil) top / 100% 1px no-repeat; }
.index-list li:last-child { background: var(--foil) top / 100% 1px no-repeat, var(--foil) bottom / 100% 1px no-repeat; }
.index-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  color: var(--ink);
  text-decoration: none;
}
.index-list__title { font-family: var(--serif); font-size: clamp(1.9rem, 1.5rem + 1.6vw, 3rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }
.index-list__text { grid-column: 1; color: var(--sage-700); }
.index-list__link .icon { grid-column: 2; grid-row: 1 / span 2; width: 1.6rem; height: 1.6rem; color: var(--champagne-700); transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .index-list__link:hover .index-list__title { font-style: italic; }
  .index-list__link:hover .icon { transform: translateX(5px); }
}
.index-list__link:active .icon { transform: translateX(5px); }

/* Closing: the evening. Deep ink, the names once more, foil rule */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 4rem + 7vw, 10rem);
  background: var(--ink-deep);
  color: var(--champagne-100);
}
.closing__media { position: absolute; inset: 0; z-index: -1; }
.closing__media::after { content: ''; position: absolute; inset: 0; background: rgba(27, 35, 29, 0.8); }
.closing__img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.closing__sprig {
  position: absolute;
  z-index: -1;
  right: -6%;
  top: -8%;
  width: min(60%, 40rem);
  stroke: var(--champagne-500);
  opacity: 0.35;
  transform: rotate(168deg);
}
.closing__sprig ellipse { fill: rgba(194, 168, 120, 0.1); }
.closing__inner { display: grid; }
.closing__names { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); color: var(--paper); margin-bottom: 1.75rem; }
.closing__names .names__line { display: inline-block; padding-right: 0.18em; }
.closing__names .names__one, .closing__names .names__two { color: var(--paper); }
.closing__names .names__joiner { background: linear-gradient(135deg, #e3d3b0 0%, #c2a878 45%, #d9c69a 100%); -webkit-background-clip: text; background-clip: text; }
.closing__title {
  max-width: 22ch;
  color: var(--champagne-200);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding-top: 1.5rem;
  background: var(--foil) top / 100% 1px no-repeat;
}
.closing__body { max-width: 44ch; margin: 1rem 0 0; font-size: var(--text-lg); color: var(--champagne-100); }
.closing .btn-row { margin-top: 2rem; }
.closing__contact { margin: 2.25rem 0 0; color: var(--champagne-200); }
.closing a:not(.btn) { color: #fff; text-decoration-color: var(--champagne-500); }
.closing :focus-visible { outline-color: var(--champagne-300); }

/* --------------------------------------------------------------------------
   Sub-page header
   -------------------------------------------------------------------------- */

.page-head { padding-top: clamp(2.5rem, 2rem + 4vw, 5.5rem); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-head__inner { display: grid; gap: 1.25rem 3rem; align-items: end; }
.page-title {
  font-size: var(--h1);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.page-head__sub { margin: 0; max-width: 40ch; font-size: var(--text-lg); color: var(--sage-700); text-wrap: balance; }
@media (min-width: 900px) {
  .page-head__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page-head__sub { justify-self: end; }
}
.page-head__media { width: min(100% - 2 * var(--gutter), var(--max)); margin: clamp(2rem, 4vw, 3.5rem) auto 0; }
.page-head__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); }
@media (min-width: 768px) { .page-head__img { aspect-ratio: 21 / 9; } }

/* --------------------------------------------------------------------------
   The Day
   -------------------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 1.5rem;
  padding-bottom: 2.25rem;
}
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(6.5rem + 0.75rem);
  top: 1.1rem;
  bottom: -0.2rem;
  width: 1px;
  background: var(--champagne-300);
}
.timeline__item:last-child::before { display: none; }
.timeline__item::after {
  content: '';
  position: absolute;
  left: calc(6.5rem + 0.75rem - 4px);
  top: 0.75rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--champagne-500);
}
.timeline__time {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem);
  font-weight: 300;
  color: var(--champagne-700);
  font-variant-numeric: lining-nums;
  text-align: right;
  white-space: nowrap;
}
.timeline__body { padding-left: 1.5rem; }
.timeline__title { font-size: var(--h3); font-weight: 380; margin-bottom: 0.35rem; line-height: 1.2; }
.timeline__body p { color: var(--sage-700); }
@media (max-width: 559px) {
  .timeline__item { grid-template-columns: minmax(0, 1fr); padding-left: 1.75rem; padding-bottom: 1.75rem; }
  .timeline__item::before { left: 4px; top: 1.25rem; }
  .timeline__item::after { left: 0; top: 0.7rem; }
  .timeline__time { text-align: left; margin-bottom: 0.15rem; }
  .timeline__body { padding-left: 0; }
}
@media (min-width: 768px) {
  .timeline__item { grid-template-columns: 8rem 1fr; padding-bottom: 2.75rem; }
  .timeline__item::before { left: calc(8rem + 0.75rem); }
  .timeline__item::after { left: calc(8rem + 0.75rem - 4px); }
}

.venue { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .venue--photo { grid-template-columns: 1fr 1fr; } }
.venue__text { max-width: 44rem; }
.venue__address { font-family: var(--serif); font-size: var(--text-lg); color: var(--sage-700); margin: 1rem 0 1.25rem; }
.venue__photo { margin: 0; }
.venue__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--radius-s) var(--radius-s) / 30% 30% var(--radius-s) var(--radius-s); }
@media (max-width: 1023px) { .venue__img { aspect-ratio: 4 / 3; border-radius: var(--radius-s); } }

.events { list-style: none; margin: 0; padding: 0; }
.event { padding: 2rem 0; background: var(--foil) top / 100% 1px no-repeat; }
.event:last-child { background: var(--foil) top / 100% 1px no-repeat, var(--foil) bottom / 100% 1px no-repeat; }
.event__day { margin-bottom: 0.4rem; font-family: var(--serif); font-style: italic; font-size: var(--text-lg); color: var(--champagne-700); }
.event__title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 350; letter-spacing: -0.015em; }
.event--main .event__title { font-style: italic; }
.event > p { margin-top: 0.85rem; color: var(--sage-700); max-width: 56ch; }
.event .cal { margin-top: 1.25rem; }

/* Add-to-calendar disclosure */
.cal { display: inline-block; position: relative; max-width: 100%; }
.cal__toggle { list-style: none; }
.cal__toggle::-webkit-details-marker { display: none; }
.cal[open] .cal__toggle { --btn-bg: var(--champagne-100); --btn-border: var(--champagne-700); }
.cal__menu {
  position: relative;
  z-index: 5;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.4rem;
  min-width: 16rem;
  border-radius: var(--radius-m);
  background: var(--paper-raised);
  border: 1px solid var(--champagne-300);
  box-shadow: 0 18px 40px -24px rgba(35, 43, 37, 0.35);
}
.cal__link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.875rem;
  padding: 0.4rem 0.9rem;
  border-radius: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}
.cal__hint { color: var(--sage-600); }
.cal__link:active { background: var(--champagne-100); }
@media (hover: hover) and (pointer: fine) { .cal__link:hover { background: var(--champagne-100); color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) {
  .cal[open] .cal__menu { animation: pop 200ms var(--ease-out); transform-origin: top left; }
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }

/* --------------------------------------------------------------------------
   Travel & Stay
   -------------------------------------------------------------------------- */

.ways { display: grid; gap: 0; }
@media (min-width: 640px) and (max-width: 1023px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.way { padding: 1.75rem 0 2rem; background: var(--foil) top / 100% 1px no-repeat; }
.way__title { display: flex; align-items: center; gap: 0.6rem; font-size: var(--h3); font-weight: 380; margin-bottom: 0.75rem; }
.way__title .icon { width: 1.5rem; height: 1.5rem; color: var(--champagne-700); }
.way p { color: var(--ink); max-width: 56ch; }

.contact-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.contact-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--sage-100); }
.contact-list__tel { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-variant-numeric: lining-nums; }

.stays { list-style: none; margin: 0; padding: 0; }
.stay {
  display: grid;
  gap: 0.75rem 3rem;
  padding: 2.25rem 0;
  background: var(--foil) top / 100% 1px no-repeat;
}
.stay:last-child { background: var(--foil) top / 100% 1px no-repeat, var(--foil) bottom / 100% 1px no-repeat; }
@media (min-width: 900px) {
  .stay { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .stay__head { grid-row: 1 / span 3; }
}
.stay__name { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 350; letter-spacing: -0.015em; }
.stay__where { margin: 0.35rem 0 0; color: var(--sage-700); }
.stay__price { font-family: var(--serif); font-style: italic; color: var(--champagne-700); font-size: var(--text-lg); margin: 0.5rem 0 0; }
.stay > p:not(.stay__price) { max-width: 56ch; }
.stay .btn-row { margin-top: 0.5rem; }

.code { margin: 0.25rem 0 0; padding: 1rem 1.1rem; border-radius: var(--radius-s); background: var(--champagne-100); max-width: 30rem; }
.code__label { margin: 0 0 0.35rem; font-size: var(--text-sm); color: var(--sage-700); }
.code__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.code__value { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.06em; color: var(--ink); overflow-wrap: anywhere; }
.code__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--champagne-500);
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 500 1rem/1 var(--sans);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 120ms var(--ease-out);
}
.code__copy:active { transform: scale(0.96); }
.code__copy .icon { width: 1.1em; height: 1.1em; }
.code__note { margin: 0.6rem 0 0; font-size: var(--text-sm); color: var(--sage-700); }
.more-link { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   RSVP
   -------------------------------------------------------------------------- */

.rsvp { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.rsvp > *, .split > *, .story__grid > *, .venue > * { min-width: 0; }
@media (min-width: 1024px) {
  .rsvp { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); align-items: start; }
  .rsvp__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 2rem); }
  .rsvp__panel { grid-column: 6 / -1; }
}
.rsvp__aside .pairs { margin-top: 0; }
.pairs--stack > div { grid-template-columns: 1fr; gap: 0.1rem; }
.rsvp__aside .note { margin-top: 1.5rem; }
@media (max-width: 1023px) { .rsvp__aside { order: 2; } }

.rsvp__panel {
  border-radius: var(--radius-s);
  background: var(--paper-raised);
  border: 1px solid var(--champagne-300);
  padding: clamp(1.25rem, 4vw, 3rem);
}

.demo-banner {
  margin-bottom: 2rem;
  padding: 1rem 0 1.1rem;
  background: var(--foil) bottom / 100% 1px no-repeat;
  color: var(--sage-700);
}
.demo-banner__title { font-family: var(--serif); font-style: italic; font-size: var(--text-lg); color: var(--ink); margin-bottom: 0.25rem; }

.form { display: grid; gap: 1.75rem; }

.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
}
.field__optional { font-weight: 400; color: var(--sage-600); }
.field__hint { margin: -0.2rem 0 0.6rem; font-size: var(--text-sm); color: var(--sage-600); }
.field__input {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--sage-300);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--sans); /* 17px: large enough that iOS never zooms */
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field__input--area { min-height: 6.5rem; resize: vertical; }
.field__input:focus { outline: none; border-color: var(--sage-800); box-shadow: 0 0 0 3px rgba(125, 98, 53, 0.22); }
.field__input[aria-invalid='true'] { border-color: var(--error); background: var(--error-bg); }
.field__input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(154, 51, 36, 0.2); }
.field__error {
  display: flex;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--error);
}
.field__error::before { content: '!'; display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; border-radius: 50%; background: var(--error); color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1; }

/* Attending choice: two large tappable answers */
.answer { display: grid; gap: 0.75rem; }
@media (min-width: 520px) { .answer { grid-template-columns: 1fr 1fr; } }
.answer__option { position: relative; display: block; cursor: pointer; }
.answer__option input { position: absolute; z-index: 1; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.answer__card {
  display: grid;
  gap: 0.2rem;
  height: 100%;
  min-height: 5rem;
  padding: 1.1rem 1.25rem 1.1rem 3.25rem;
  border: 1px solid var(--sage-300);
  border-radius: var(--radius-s);
  background: #fff;
  position: relative;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.answer__card::before {
  content: '';
  position: absolute;
  left: 1.15rem;
  top: 1.35rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--sage-400);
  background: #fff;
  transition: border-width 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.answer__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; line-height: 1.25; color: var(--ink); }
.answer__text { color: var(--sage-600); font-size: var(--text-sm); }
.answer__option input:checked + .answer__card { border-color: var(--sage-800); background: var(--sage-50); box-shadow: inset 0 0 0 1px var(--sage-800); }
.answer__option input:checked + .answer__card::before { border: 0.4rem solid var(--sage-800); }
.answer__option input:focus-visible + .answer__card { outline: 2px solid var(--champagne-700); outline-offset: 3px; }
.answer__option:active .answer__card { transform: scale(0.99); }
[data-attending][data-invalid] .answer__card { border-color: var(--error); }

/* Meal options */
.options { display: grid; gap: 0.5rem; }
.option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--sage-200);
  border-radius: var(--radius-s);
  background: #fff;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.option input { position: absolute; z-index: 1; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option__mark { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; border-radius: 50%; border: 1px solid var(--sage-400); background: #fff; transition: border-width 160ms var(--ease-out); }
.option__text { line-height: 1.45; }
.option:has(input:checked) { border-color: var(--sage-800); background: var(--sage-50); }
.option input:checked ~ .option__mark { border: 0.38rem solid var(--sage-800); }
.option:has(input:focus-visible) { outline: 2px solid var(--champagne-700); outline-offset: 2px; }
[data-meal][data-invalid] .option { border-color: var(--error); }

/* Party: other guests on the invitation */
.party { margin: 0; padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--sage-200); min-width: 0; }
.party__legend { float: left; width: 100%; padding: 0; margin-bottom: 0.4rem; font-weight: 600; font-size: 1.0625rem; }
.party__legend + * { clear: both; }
.party__hint { margin-top: 0; }
.party__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.js .guest:not(.is-active) { display: none; }
.guest {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--radius-s);
  background: var(--paper);
  border: 1px solid var(--champagne-300);
}
.guest__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: -0.5rem; }
.guest__title { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--text-lg); color: var(--champagne-700); }
.guest__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  margin-right: -0.5rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--sage-700);
  font: 500 1rem/1 var(--sans);
  cursor: pointer;
}
.guest__remove .icon { width: 1.1em; height: 1.1em; }
.no-js .guest__remove { display: none; }
@media (hover: hover) and (pointer: fine) { .guest__remove:hover { background: var(--sage-50); color: var(--ink); } }
.party__add { margin-top: 1rem; }
[data-party-full] { margin-top: 1rem; }

/* Fields that only apply to one answer */
.js [data-when='yes']:not(.is-shown),
.js [data-party]:not([data-state]) { display: none; }
.js [data-when-text] { display: none; }
.js [data-party][data-state='yes'] [data-when-text='yes'],
.js [data-party][data-state='no'] [data-when-text='no'],
.js [data-party]:not([data-state]) [data-when-text='none'] { display: inline; }
.no-js [data-when-text='yes'], .no-js [data-when-text='no'] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-shown, .guest.is-active { animation: reveal 320ms var(--ease-out); }
}
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } }

.form-errors {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-m);
  background: var(--error-bg);
  border: 1px solid rgba(154, 51, 36, 0.35);
  color: var(--ink);
}
.form-errors:focus { outline: 2px solid var(--error); outline-offset: 3px; }
.form-errors__title { font-weight: 600; color: var(--error); margin-bottom: 0.4rem; }
.form-errors__list { margin: 0; padding-left: 1.2rem; }
.form-errors__list a { color: var(--error); text-decoration-color: currentColor; }

.form__submit { display: grid; gap: 0.75rem; justify-items: start; padding-top: 0.5rem; }
.form__status { margin: 0; min-height: 1.5em; color: var(--sage-700); }
.form__status[data-tone='error'] { color: var(--error); font-weight: 500; }
.btn.is-busy { opacity: 0.75; cursor: progress; }
@media (max-width: 519px) { .form__submit .btn { width: 100%; } }

.external-rsvp { display: grid; gap: 1rem; justify-items: start; }

/* Thank-you & 404 */
.thanks { padding-block: clamp(3rem, 2rem + 5vw, 7rem); text-align: center; }
.thanks__inner { display: grid; justify-items: center; max-width: 44rem; }
.thanks__sprig { width: 5rem; margin-bottom: 1.5rem; }
.thanks__lede { margin: 1.5rem 0 0; font-size: var(--text-lg); color: var(--sage-700); max-width: 36ch; }
.thanks__demo { margin-top: 2rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-s); background: var(--champagne-100); text-align: left; }
.thanks__next { margin-top: 2.5rem; }
.thanks__next .btn-row { margin-top: 1rem; }
.thanks__changes { margin-top: 2.5rem; color: var(--sage-700); max-width: 44ch; }
.thanks .cal { text-align: left; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.share-photos {
  display: grid;
  gap: 1rem;
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius-s);
  background: var(--champagne-100);
}
.share-photos > .icon { width: 2rem; height: 2rem; color: var(--sage-700); }
.share-photos__title { font-family: var(--serif); font-size: var(--h3); margin-bottom: 0.25rem; color: var(--ink); }
.share-photos p { color: var(--sage-700); }
@media (min-width: 768px) { .share-photos { grid-template-columns: auto 1fr auto; gap: 1.5rem; } }

.gallery { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 1rem; }
@media (min-width: 560px) { .gallery { columns: 2; } }
@media (min-width: 1024px) { .gallery { columns: 3; column-gap: 1.25rem; } }
.gallery__item { break-inside: avoid; margin-bottom: 1rem; }
.gallery__open { display: block; width: 100%; padding: 0; border: 0; background: var(--sage-100); border-radius: var(--radius-s); overflow: hidden; cursor: zoom-in; }
.gallery__img { width: 100%; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .gallery__open:hover .gallery__img { transform: scale(1.02); } }
.gallery-empty { display: grid; justify-items: center; gap: 1rem; padding: 3rem 1rem; text-align: center; color: var(--sage-700); }

.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(28, 35, 30, 0.97);
  color: #fff;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(28, 35, 30, 0.6); }
.lightbox__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: calc(4.5rem + env(safe-area-inset-top, 0px)) var(--gutter) calc(4.5rem + env(safe-area-inset-bottom, 0px));
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.lightbox__img { max-width: 100%; max-height: calc(100dvh - 10rem); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-s); }
.lightbox__slide figcaption { color: var(--champagne-200); text-align: center; max-width: 50ch; }
.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
}
.lightbox__btn:active { transform: scale(0.94); }
.lightbox__btn .icon { width: 1.4rem; height: 1.4rem; }
.lightbox__close { top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__prev .icon { transform: rotate(180deg); }
.lightbox__next { right: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__count { position: fixed; left: 0; right: 0; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; color: var(--champagne-200); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .lightbox__prev, .lightbox__next { top: auto; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); translate: none; } }

.videos { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 900px) { .videos { grid-template-columns: repeat(2, 1fr); } }
.video { margin: 0; }
.video figcaption { margin-top: 0.6rem; color: var(--sage-700); }
.video__facade, .video iframe {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--sage-800);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.video__play { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.4); }
.video__play .icon { fill: currentColor; stroke: none; width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; }
.video__label { font-family: var(--serif); font-size: var(--text-lg); }
.video__note { font-size: var(--text-sm); color: var(--champagne-200); }

/* --------------------------------------------------------------------------
   FAQs
   -------------------------------------------------------------------------- */

.faq { background: var(--foil) top / 100% 1px no-repeat; }
.faq__item { background: var(--foil) bottom / 100% 1px no-repeat; interpolate-size: allow-keywords; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.25rem;
  padding: 1.5rem 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  font-weight: 350;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--champagne-500);
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 260ms var(--ease-out), background-color 200ms var(--ease-out);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__q { font-style: italic; }
.faq__item[open] .faq__icon { background: var(--ink-deep); border-color: var(--ink-deep); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: var(--champagne-200); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 3.5rem 1.75rem 0; color: var(--sage-700); }
.faq__a p { max-width: 60ch; }
@media (hover: hover) and (pointer: fine) { .faq__q:hover .faq__icon { background: var(--champagne-100); } }
@media (prefers-reduced-motion: no-preference) {
  .faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}
.faq__more { margin-top: 2.5rem; color: var(--sage-700); }

/* --------------------------------------------------------------------------
   Registry
   -------------------------------------------------------------------------- */

.gifts { list-style: none; margin: 0; padding: 0; }
.gift {
  display: grid;
  gap: 0.75rem 3rem;
  padding: 2.25rem 0;
  background: var(--foil) top / 100% 1px no-repeat;
}
.gift:last-child { background: var(--foil) top / 100% 1px no-repeat, var(--foil) bottom / 100% 1px no-repeat; }
.gift > .icon { width: 2rem; height: 2rem; color: var(--champagne-700); stroke-width: 1.1; }
.gift__title { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 3rem); font-weight: 300; letter-spacing: -0.02em; }
.gift p { color: var(--sage-700); max-width: 52ch; }
.gift .btn-row { margin-top: 0.5rem; }
@media (min-width: 900px) {
  .gift { grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .gift > .icon { grid-row: 1 / span 3; margin-top: 0.6rem; }
  .gift__title { grid-column: 2; }
  .gift p { grid-column: 3; grid-row: 1; }
  .gift .btn-row { grid-column: 2; margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   Share page (QR code)
   -------------------------------------------------------------------------- */

.share { display: grid; justify-items: center; text-align: center; }
.share__card {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius-s);
  background: #fff;
  border: 1px solid var(--champagne-300);
}
.share__names { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); font-weight: 300; }
.share__qr { width: 15rem; max-width: 60vw; aspect-ratio: 1; }
.share__qr svg { width: 100%; height: 100%; }
.share__url { color: var(--sage-700); overflow-wrap: anywhere; }
.share__actions { margin-top: 2rem; }
.share__note { margin-top: 1.5rem; max-width: 42ch; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { padding-block: clamp(3.5rem, 6vw, 5rem) calc(2rem + env(safe-area-inset-bottom, 0px)); background: var(--paper); }
.site-footer__inner { display: grid; gap: 2.5rem; padding-top: 2.5rem; background: var(--foil) top / 100% 1px no-repeat; }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer__sprig { width: 3.5rem; margin-bottom: 1rem; }
.site-footer__names { margin-bottom: 0.4rem; font-family: var(--serif); font-style: italic; font-size: 1.9rem; font-weight: 300; letter-spacing: -0.02em; }
.site-footer__meta { color: var(--sage-700); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 2.5rem; row-gap: 0; }
@media (min-width: 768px) { .site-footer__nav ul { grid-template-columns: 1fr; } }
.site-footer__nav a, .site-footer__contact a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; color: var(--ink); text-decoration-color: var(--sage-300); overflow-wrap: anywhere; }
.site-footer__contact p { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.site-footer__contact .icon { color: var(--sage-600); }
.site-footer__qr { margin: 1.25rem 0 0; display: flex; align-items: center; gap: 1rem; color: var(--sage-700); font-size: var(--text-sm); max-width: 18rem; }
.site-footer__qr-code { flex: none; width: 5.5rem; height: 5.5rem; padding: 0.35rem; background: #fff; border-radius: 0.5rem; border: 1px solid var(--sage-200); }
.site-footer__qr-code svg { width: 100%; height: 100%; }
.site-footer__credit { margin: 2.5rem 0 0; font-size: var(--text-sm); color: var(--sage-600); }

/* --------------------------------------------------------------------------
   Page transitions (browsers that support cross-document view transitions)
   -------------------------------------------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: 200ms var(--ease-in-out) both vt-out; }
::view-transition-new(root) { animation: 480ms var(--ease-out) 60ms both vt-in; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* --------------------------------------------------------------------------
   Accessibility preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .btn:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header, .lightbox__btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .site-header { background: var(--paper) !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--paper); }
}

@media (prefers-contrast: more) {
  :root { --sage-600: #3e4c3f; --sage-700: #2c372e; --sage-200: #8d9a84; --sage-300: #6f7d68; --champagne-700: #5c4624; }
  .names__joiner, .prose--dropcap > p:first-child::first-letter { background: none; color: var(--champagne-700); }
}

@media (forced-colors: active) {
  .answer__card::before, .option__mark { forced-color-adjust: none; }
  .btn { border: 1px solid ButtonText; }
  .names__joiner, .prose--dropcap > p:first-child::first-letter { background: none; color: CanvasText; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .menu-sheet, .skip-link, .site-footer, .btn-row, .hero__actions, .cal, .closing .btn-row { display: none !important; }
  main { padding-top: 0; }
  .hero__media { height: 40vh; }
  .section { padding-block: 1.5rem; }
  .closing { background: none; color: var(--ink); }
  .closing__title, .closing__names .names__one, .closing__names .names__two { color: var(--ink); }
  .page-share .share__actions, .page-share .share__note { display: none !important; }
  .page-share .share__card { border: 0; }
}