/* =====================================================================
   SITE STYLES
   All colours, fonts and backgrounds come from theme.css.
   ===================================================================== */
/* theme.css is linked in each page head, so it downloads in parallel with this file.
   It used to be @imported here, which delayed it and flashed unstyled HTML on phones. */

/* ---------- Page transitions ----------
   Soft crossfade between pages (Chrome, Edge, Safari). The header keeps its place
   so it doesn't flicker; other browsers simply switch pages as normal. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }
[hidden] { display: none !important; }
.script { font-family: var(--font-script); font-weight: 400; }
.nowrap { white-space: nowrap; }
.eyebrow {
  font-size: .7rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--color-crimson); margin: 0 0 16px;
}

/* ---------- Buttons ---------- */
.pill {
  display: inline-block; padding: 14px 34px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: .72rem; letter-spacing: .25em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; background: none; transition: background .25s, color .25s, opacity .25s;
}
.pill--light { background: var(--color-champagne); color: var(--color-wine); }
.pill--dark { background: var(--color-wine); color: var(--color-champagne); }
.pill--butter { background: var(--color-butter); color: var(--color-ink); font-weight: 500; letter-spacing: .18em; }
.pill--outline-light { border-color: var(--color-champagne); color: var(--color-champagne); }
.pill--outline-dark { border-color: var(--color-ink); color: var(--color-ink); }
.pill:hover { opacity: .85; }
.pill:disabled { opacity: .6; cursor: default; }

/* ---------- Textures ---------- */
.grainy { position: relative; isolation: isolate; }
.grainy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--grain); mix-blend-mode: soft-light; opacity: var(--grain-opacity);
}
.glow { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; pointer-events: none; }

/* ---------- Stars ---------- */
.spark {
  position: absolute; width: 18px; z-index: 2; pointer-events: none;
  fill: var(--color-champagne); animation: twinkle 3s ease-in-out infinite;
}
.spark--dark { fill: var(--color-crimson); animation-name: twinkle-soft; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes twinkle-soft { 0%, 100% { opacity: .12; transform: scale(.6); } 50% { opacity: .6; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .spark { animation: none; } }

.divider { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 76px auto; }
.divider i { display: block; width: 70px; height: 1px; background: var(--color-crimson); opacity: .3; }
.divider svg { width: 14px; fill: var(--color-crimson); opacity: .7; }

/* =====================================================================
   HEADER, MENU, FOOTER (built by js/main.js)
   ===================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 12px 30px; background: var(--header-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  view-transition-name: site-header;
}
.nav { display: flex; gap: 22px; }
.nav a {
  color: var(--color-champagne); text-decoration: none; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .8; padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: opacity .2s;
}
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"] { border-bottom-color: var(--color-gold); }
.crest-link { grid-column: 2; display: block; }
.crest { width: 50px; filter: invert(1) sepia(.4) saturate(.8) brightness(1.05); }
.header-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 16px; }
.header-right .pill { padding: 9px 20px; }
.header-right .pill[aria-current="page"] { background: var(--color-champagne); color: var(--color-wine); }
.burger {
  width: 42px; height: 42px; padding: 9px; border: 0; background: none; cursor: pointer;
  display: grid; align-content: center; gap: 6px;
}
.burger span { display: block; height: 1px; background: var(--color-champagne); transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1180px) { .nav { display: none; } }
@media (max-width: 520px) {
  .site-header { padding: 10px 16px; }
  .header-right .pill { display: none; }
}

.site-menu {
  position: fixed; inset: 0; z-index: 45; overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 100px 24px 40px; background: var(--bg-dark);
}
.site-menu nav { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.site-menu nav a:not(.pill) {
  font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: .04em;
  color: var(--color-champagne); text-decoration: none;
}
.site-menu nav a[aria-current="page"]:not(.pill) { color: var(--color-pink); }
.site-menu .pill { margin-top: 22px; }

.site-footer { text-align: center; padding: 56px 24px 64px; background: var(--bg-page); }
.site-footer img { width: 72px; margin: 0 auto 12px; }
.site-footer .names { font-family: var(--font-display); font-style: italic; font-size: 1.8rem; color: var(--color-ink); }
.site-footer .names .script { color: var(--color-magenta); font-size: 1.2em; }
.site-footer .meta { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; margin-top: 4px; color: var(--color-muted); }
.footer-nav { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.footer-nav a { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; }
.footer-nav a:hover, .footer-nav a[aria-current="page"] { color: var(--color-crimson); }

/* =====================================================================
   LIGHT PAGE TITLE (Our Story, Dates, Venue, FAQs, RSVP)
   ===================================================================== */
.page-intro {
  min-height: 52vh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 150px 24px 60px; overflow: hidden;
}
.page-intro .glow { filter: blur(90px); }
.page-intro .g1 { width: 46vw; height: 30vw; background: var(--glow-light-1); left: -12vw; bottom: -14vw; opacity: .55; }
.page-intro .g2 { width: 40vw; height: 28vw; background: var(--glow-light-2); right: -10vw; bottom: -14vw; opacity: .45; }
/* fades softly into the page: glows and grain disappear before the bottom edge */
.page-intro::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-page) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg-page) 35%, transparent) 40%,
    color-mix(in srgb, var(--bg-page) 80%, transparent) 75%,
    var(--bg-page) 100%);
}
.page-intro.grainy::after {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 97%);
}
.page-intro__inner { position: relative; z-index: 2; }
.page-intro h1 {
  font-size: clamp(2.8rem, 9vw, 6.5rem); letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.02; color: var(--color-ink);
}
.page-intro--long h1 { font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1.1; }
.page-intro--tall { min-height: 62vh; }
.page-intro .sub { margin: 24px 0 0; font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; color: var(--color-muted); }

/* =====================================================================
   HOME
   ===================================================================== */
.hero-bg {
  position: relative; z-index: 2; background: var(--bg-dark); color: var(--color-champagne);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--hero-blend)), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--hero-blend)), transparent 100%);
}
:root { --hero-blend: 240px; }  /* how far the film slides up under the fading hero */
/* the hero itself must have no background, otherwise the grain disappears */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 130px 24px calc(var(--hero-blend) + 10px); overflow: hidden;
}
.hero .g1 { width: 60vw; height: 40vw; background: var(--glow-dark-1); left: -15vw; bottom: -18vw; opacity: .65; }
.hero .g2 { width: 50vw; height: 36vw; background: var(--glow-dark-2); right: -12vw; bottom: -16vw; opacity: .5; }
.hero .g3 { width: 30vw; height: 30vw; background: var(--glow-dark-3); right: 10vw; top: -12vw; opacity: .35; }
/* the glows fade out just above the crossfade, so only the maroon blends into the film */
.hero__glows {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--hero-blend) - 140px), transparent calc(100% - var(--hero-blend) + 40px));
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--hero-blend) - 140px), transparent calc(100% - var(--hero-blend) + 40px));
}
.hero__inner { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--color-gold); }
.hero h1 { font-size: clamp(3rem, 10vw, 7.5rem); letter-spacing: .05em; text-transform: uppercase; line-height: .95; }
.hero h1 .script {
  display: block; text-transform: none; letter-spacing: 0; font-size: .8em; line-height: 1.1;
  color: var(--color-pink); margin: .05em 0 .1em;
}
.hero__when {
  margin: 34px 0 0; font-size: .75rem; letter-spacing: .35em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-champagne) 70%, transparent);
}

/* Engagement film with the countdown */
.film { position: relative; z-index: 1; isolation: isolate; margin-top: calc(-1 * var(--hero-blend)); background: var(--bg-dark); }
.film video { width: 100%; aspect-ratio: 2160 / 1188; max-height: 92vh; object-fit: cover; display: block; }
.duo { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.duo--dark { background: var(--color-wine); mix-blend-mode: lighten; }   /* shadows become maroon */
.duo--light { background: var(--color-rose); mix-blend-mode: multiply; } /* highlights become soft rose */
.film__overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--hero-blend) + 24px) 24px 24px; color: var(--color-champagne); background: color-mix(in srgb, var(--color-wine) 20%, transparent);
}
.film::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--hero-blend) + 20%); pointer-events: none; z-index: 3;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-dark) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg-dark) 30%, transparent) 45%,
    color-mix(in srgb, var(--bg-dark) 10%, transparent) 75%,
    color-mix(in srgb, var(--bg-dark) 0%, transparent) 100%);
}
@media (max-width: 700px) { .film video { min-height: calc(560px + var(--hero-blend)); } }

.countdown { display: flex; justify-content: center; text-shadow: 0 2px 18px color-mix(in srgb, var(--color-wine) 45%, transparent); }
.countdown div { padding: 0 clamp(16px, 4vw, 40px); text-align: center; border-left: 1px solid color-mix(in srgb, var(--color-gold) 45%, transparent); }
.countdown div:first-child { border: 0; }
.countdown b { display: block; font-family: var(--font-accent); font-weight: 400; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; }
.countdown small { font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--color-gold); }


/* RSVP block: simple flat colour with one soft glow */
.rsvp-banner { overflow: hidden; padding: 110px 24px; text-align: center; background: var(--color-rsvp); color: var(--color-cream); }
.rsvp-banner .blob {
  position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px);
  width: 40vw; height: 40vw; right: -10vw; top: -12vw; background: var(--color-pink); opacity: .45;
}
.rsvp-banner__inner { position: relative; z-index: 2; }
.rsvp-banner .eyebrow { color: var(--color-butter); font-weight: 500; letter-spacing: .3em; }
.rsvp-banner h2 { font-style: italic; font-size: clamp(3rem, 8vw, 5.5rem); }
.rsvp-banner p:not(.eyebrow) { opacity: .85; margin: 14px 0 34px; }

/* =====================================================================
   OUR STORY
   ===================================================================== */
.chapter { max-width: 660px; margin: 0 auto; padding: 0 24px; }
.chapter p { font-size: 1.08rem; line-height: 1.9; margin: 0 0 1.5em; }
.chapter p:last-child { margin-bottom: 0; }
.chapter .bubble {
  display: block; width: max-content; max-width: 100%; margin: 0 auto 1.5em; padding: 14px 22px;
  border-radius: 22px 22px 22px 6px; background: var(--color-blush);
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--color-ink);
}
.chapter .statement {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  line-height: 1.3; text-align: center; color: var(--color-ink); margin: 1.3em 0;
}
.eleven {
  font-family: var(--font-display); font-size: clamp(4.5rem, 13vw, 8rem); line-height: 1; letter-spacing: .03em;
  text-align: center; color: var(--color-crimson); opacity: .9; margin: 0 0 30px;
}

/* Finale: the cream page melts into the dark finale */
.finale-wrap { position: relative; margin-top: 110px; background: var(--bg-dark); }
.finale-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; z-index: 3; pointer-events: none;
  background: var(--bg-page);
}
.finale {
  min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 330px 24px 120px; overflow: hidden; color: var(--color-champagne);
}
.finale::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 360px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, var(--bg-page) 0%,
    color-mix(in srgb, var(--bg-page) 98.5%, transparent) 6%,
    color-mix(in srgb, var(--bg-page) 94%, transparent) 14%,
    color-mix(in srgb, var(--bg-page) 84%, transparent) 24%,
    color-mix(in srgb, var(--bg-page) 68%, transparent) 36%,
    color-mix(in srgb, var(--bg-page) 48%, transparent) 50%,
    color-mix(in srgb, var(--bg-page) 28%, transparent) 66%,
    color-mix(in srgb, var(--bg-page) 12%, transparent) 82%,
    color-mix(in srgb, var(--bg-page) 3%, transparent) 93%,
    color-mix(in srgb, var(--bg-page) 0%, transparent) 100%);
}
.finale.grainy::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 90px, #000 360px);
  mask-image: linear-gradient(180deg, transparent 0, transparent 90px, #000 360px);
}
.finale .g1 { width: 55vw; height: 36vw; background: var(--glow-dark-1); left: -15vw; bottom: -20vw; opacity: .6; }
.finale .g2 { width: 45vw; height: 32vw; background: var(--glow-dark-2); right: -12vw; bottom: -18vw; opacity: .5; }
.finale__inner { position: relative; z-index: 2; }
.finale__date { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 5rem); letter-spacing: .04em; line-height: 1.1; margin: 0 0 34px; }
.finale__line { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.5; margin: 0; }
.finale__line--last { color: var(--color-pink); }
.finale__ctas { margin-top: 54px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   DATES
   ===================================================================== */
.dates-page { max-width: var(--wrap); margin: 0 auto; padding: 20px 24px 130px; text-align: center; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: 9px; height: 1px;
  background: var(--color-crimson); opacity: .35;
}
.stop { padding: 0 16px; }
.stop svg { width: 20px; margin: 0 auto 22px; position: relative; fill: var(--color-crimson); }
.stop__date { margin: 0; font-family: var(--font-accent); font-style: italic; font-size: 1.6rem; line-height: 1.25; color: var(--color-ink); }
.stop__what { margin: 10px 0 0; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-muted); }
.dates-note { margin: 64px 0 0; font-family: var(--font-accent); font-style: italic; color: var(--color-muted); }
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: 44px; }
  .timeline::before { display: none; }
}

/* =====================================================================
   DRESS CODE
   ===================================================================== */
.dress { max-width: 1180px; margin: 0 auto; padding: 0 24px 130px; text-align: center; }
.dress__group + .dress__group { margin-top: 110px; }
.dress__group h2 { line-height: 1; }
.dress__group h2 .script { font-size: clamp(2.8rem, 5vw, 3.8rem); color: var(--color-crimson); }
.dress__desc { max-width: 520px; margin: 14px auto 0; font-size: 1.04rem; }
.dress__avoid {
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px; margin: 16px 0 0;
  font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--color-crimson);
}
.dress__avoid span { white-space: nowrap; }
.dress__avoid span + span::before { content: "\2726"; margin: 0 10px; font-size: .55rem; opacity: .7; }
/* the illustration sits straight on the page; multiply melts its white paper into the page colour */
.dress__figures { margin-top: 44px; overflow-x: auto; scrollbar-width: none; }
.dress__figures::-webkit-scrollbar { display: none; }
.dress__figures img { width: 100%; height: auto; mix-blend-mode: multiply; }
.dress__hint { display: none; margin: 18px 0 0; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--color-muted); }
.dress__shoes { margin: 90px auto 0; max-width: 620px; font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--color-ink); }
@media (max-width: 760px) {
  .dress__figures { margin-left: -24px; margin-right: -24px; padding: 0 24px; }
  .dress__figures img { width: auto; max-width: none; height: 300px; }
  .dress__hint { display: block; }
}

/* =====================================================================
   VENUE
   ===================================================================== */
.venue {
  max-width: var(--wrap); margin: 0 auto; padding: 20px 24px 130px;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center;
}
.venue__name { font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1.1; color: var(--color-ink); }
.venue__name .script { color: var(--color-crimson); font-size: 1.1em; }
.venue__address { margin: 20px 0 0; font-style: normal; font-size: 1.05rem; color: var(--color-text); }
.venue__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.venue__note { margin: 26px 0 0; font-family: var(--font-accent); font-style: italic; color: var(--color-muted); }
.map {
  aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: var(--color-blush);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--color-wine) 45%, transparent);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) {
  .venue { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .venue__actions { justify-content: center; }
}

/* =====================================================================
   FAQS
   ===================================================================== */
.faq { max-width: 700px; margin: 0 auto; padding: 10px 24px 120px; }
.faq__item { padding: 38px 0; border-top: 1px solid color-mix(in srgb, var(--color-crimson) 18%, transparent); }
.faq__item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-crimson) 18%, transparent); }
.faq__item h2 {
  display: flex; gap: 14px; align-items: baseline; margin: 0 0 12px;
  font-size: clamp(1.45rem, 3vw, 1.85rem); line-height: 1.3; color: var(--color-ink);
}
.faq__item h2 svg { width: 12px; flex: none; fill: var(--color-crimson); opacity: .7; transform: translateY(-2px); }
.faq__item p { margin: 0; font-size: 1.06rem; }


/* ---------- phones: the questions answer in their own sheet ---------- */
.sheet {
  /* left/right/top/height rather than inset, so js can fit it above the keyboard */
  position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 60; background: var(--bg-page);
  display: grid; grid-template-rows: auto 1fr; overflow-y: auto;
  animation: sheet-in .28s ease both;
}
.sheet[hidden] { display: none; }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
body.sheet-open { overflow: hidden; }
.sheet__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; background: var(--header-bg); color: var(--color-champagne);
}
.sheet__title { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; opacity: .9; }
.sheet__close {
  background: none; border: 0; color: var(--color-champagne); cursor: pointer;
  font-size: 1.9rem; line-height: 1; padding: 0 4px;
}
/* "safe" so a question taller than the space left by the keyboard is not clipped at the top */
.sheet__body { display: grid; align-content: safe center; padding: 26px 24px 44px; }
/* above this width the wizard stays on the page and the sheet is never used */
@media (min-width: 761px) { .sheet { display: none !important; } }

/* =====================================================================
   REGISTRY
   ===================================================================== */
.registry { max-width: 660px; margin: 0 auto; padding: 10px 24px 130px; }
.registry::after { content: ""; display: block; clear: both; }
.registry p { font-size: 1.06rem; line-height: 1.85; margin: 0 0 1.4em; }
.registry__lead {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.45; color: var(--color-ink); margin-bottom: 1.1em;
}
.registry__close {
  font-family: var(--font-accent); font-style: italic; text-align: center;
  font-size: 1.15rem; color: var(--color-muted); margin: 70px 0 0;
}

/* square edged and open, in keeping with the RSVP form: no card, just rules */
.bank { margin-top: 64px; }
.bank__title { text-align: center; line-height: 1; margin: 0 0 30px; }
.bank__title .script { font-size: clamp(2.4rem, 5vw, 3.2rem); color: var(--color-crimson); }
.bank__rows { margin: 0; border-top: 1px solid color-mix(in srgb, var(--color-crimson) 20%, transparent); }
.bank__row {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 16px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-crimson) 20%, transparent);
}
.bank__row dt {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-muted); align-self: center;
}
.bank__row dd { margin: 0; font-size: 1.05rem; color: var(--color-ink); }
.bank__note { margin: 22px 0 0; font-size: .95rem; color: var(--color-muted); }
@media (max-width: 520px) {
  .bank__row { grid-template-columns: 1fr; gap: 5px; }
  .bank__row dd { font-size: 1.1rem; }
}

/* =====================================================================
   RSVP FORM
   ===================================================================== */
.rsvp-page { max-width: 620px; margin: 0 auto; padding: 0 24px 130px; }

/* ---------- RSVP wizard: one question per screen ---------- */
.wizard { display: grid; gap: 26px; }
.wizard__progress { display: grid; gap: 12px; justify-items: center; }
.wizard__dots { display: flex; gap: 8px; }
.wizard__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-crimson) 22%, transparent); transition: background .3s, transform .3s;
}
.wizard__dot.is-done { background: color-mix(in srgb, var(--color-crimson) 45%, transparent); }
.wizard__dot.is-current { background: var(--color-crimson); transform: scale(1.35); }
.wizard__count { margin: 0; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--color-muted); }

/* one space that holds every question. Its height follows the question and
   glides between them, so nothing jumps and no step carries dead space. */
.wizard__stage { display: grid; align-content: center; scroll-margin-top: 96px; transition: height .32s ease; }
.wizard__stage > .step { grid-area: 1 / 1; }
.step { display: grid; gap: 22px; align-content: center; }
@media (prefers-reduced-motion: reduce) { .wizard__stage { transition: none; } }
.step--in { animation: step-in .35s ease both; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step--in { animation: none; } }
.step__title { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; color: var(--color-ink); text-align: center; }
.step__hint { margin: -10px 0 0; text-align: center; color: var(--color-muted); font-size: .98rem; }

.wizard__nav { display: flex; gap: 12px; justify-content: center; }
.wizard__nav .pill { min-width: 150px; text-align: center; border-radius: 2px; padding: 15px 30px; }

.summary { margin: 0; display: grid; gap: 14px; }
.summary__row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--color-crimson) 14%, transparent); }
.summary dt { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-crimson); }
/* pre-line so a list of songs, or paragraphs in a message, keep their line breaks */
.summary dd { margin: 0; color: var(--color-ink); white-space: pre-line; }
@media (max-width: 480px) { .summary__row { grid-template-columns: 1fr; gap: 4px; } }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label { padding: 0; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--color-crimson); }
.field__label em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--color-muted); font-weight: 300; }
/* underline-only inputs */
.wizard input[type="text"], .wizard textarea {
  width: 100%; padding: 10px 0; font: inherit; font-size: 1.05rem; color: var(--color-ink);
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 25%, transparent);
  transition: border-color .2s, box-shadow .2s;
}
.wizard textarea { resize: vertical; min-height: 90px; }
.wizard input[type="text"]:focus, .wizard textarea:focus {
  outline: none; border-bottom-color: var(--color-crimson); box-shadow: 0 1px 0 var(--color-crimson);
}
/* yes / no as square-edged buttons */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: block; padding: 14px 12px; text-align: center; cursor: pointer; border-radius: 2px;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-ink) 25%, transparent);
  transition: background .2s, color .2s, border-color .2s;
}
.choice input:checked + span { background: var(--color-wine); border-color: var(--color-wine); color: var(--color-champagne); }
.choice input:focus-visible + span { outline: 1px solid var(--color-crimson); outline-offset: 3px; }
.policy { display: grid; gap: 18px; padding-top: 26px; border-top: 1px solid color-mix(in srgb, var(--color-crimson) 18%, transparent); }
.policy p { margin: 0; font-size: .98rem; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--color-ink); cursor: pointer; }
.check input { margin-top: 6px; accent-color: var(--color-crimson); width: 15px; height: 15px; flex: none; }
.form-error { margin: 0; text-align: center; color: var(--color-crimson); font-weight: 500; }
.rsvp-thanks { text-align: center; padding: 20px 0; }
.rsvp-thanks h2 .script { font-size: clamp(3rem, 7vw, 4.4rem); color: var(--color-crimson); }
.rsvp-thanks p { margin: 10px 0 0; font-size: 1.1rem; }
.rsvp-done { text-align: center; padding: 20px 0; }
.rsvp-done h2 .script { font-size: clamp(2.6rem, 6vw, 3.8rem); color: var(--color-crimson); }
.rsvp-done__what { margin: 12px 0 0; font-size: 1.1rem; }
.rsvp-done__note { margin: 22px auto 0; max-width: 430px; font-size: .95rem; color: var(--color-muted); }
.rsvp-done .pill { margin-top: 26px; }
.choices--list { grid-template-columns: 1fr; gap: 10px; }
.choice--row span { text-align: left; text-transform: none; letter-spacing: .01em; font-size: .98rem; line-height: 1.5; padding: 14px 18px; }
@media (max-width: 480px) { .choices { grid-template-columns: 1fr; } }

/* =====================================================================
   HOME: dates under the countdown
   ===================================================================== */
/* the film's bottom edge fades into the page */
.film::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: calc(24% + 2px); pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-page) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg-page) 10%, transparent) 30%,
    color-mix(in srgb, var(--bg-page) 40%, transparent) 60%,
    color-mix(in srgb, var(--bg-page) 80%, transparent) 85%,
    var(--bg-page) 100%);
}
.home-dates { max-width: var(--wrap); margin: 0 auto; padding: 70px 24px 60px; text-align: center; }
.home-dates h2 { font-size: clamp(2.4rem, 5.5vw, 4rem); color: var(--color-ink); margin: 0 0 56px; }

/* =====================================================================
   OUR STORY: one continuous piece of text, no headings or sections
   ===================================================================== */
.story { max-width: 660px; margin: 0 auto; padding: 10px 24px 110px; }
.story .eleven { margin: 70px 0 34px; }
.story p { font-size: 1.08rem; line-height: 1.9; margin: 0 0 1.5em; }
.story p:last-child { margin-bottom: 0; }

/* =====================================================================
   PHOTOS (engagement shoot)
   Desktop: they sit quietly out in the margin beside the text.
   Phones: they become inline figures or a row you swipe through.
   ===================================================================== */
.photo { margin: 0; }
.photo img {
  display: block; width: 100%; height: auto;
  filter: var(--photo-tone);
  box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--color-wine) 75%, transparent);
}
/* a photo drifts up as it scrolls into view (ignored by browsers without it) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .photo { animation: photo-in linear both; animation-timeline: view(); animation-range: entry 4% entry 44%; }
  }
}
@keyframes photo-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- aside: out in the margin on wide screens, inline below ---------- */
.photo--aside { max-width: 380px; margin: 44px auto; }
.story::after, .faq::after { content: ""; display: block; clear: both; }
@media (min-width: 1320px) {
  .story .photo--aside, .faq .photo--aside, .registry .photo--aside { width: 250px; max-width: none; margin: 8px 0 26px; }
  .story .photo--aside.is-right, .faq .photo--aside.is-right, .registry .photo--aside.is-right { float: right; margin-right: -270px; }
  .story .photo--aside.is-left, .faq .photo--aside.is-left, .registry .photo--aside.is-left { float: left; margin-left: -270px; }
}

/* ---------- feature: a little wider than the text column ---------- */
.photo--feature { margin: 52px 0; }
.photo--feature img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) { .story .photo--feature { width: calc(100% + 120px); margin-left: -60px; } }

/* ---------- row: an even grid that turns into a swipe on phones ---------- */
.photo-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px;
  max-width: var(--wrap); margin: 90px auto 0; padding: 0 24px;
}
.photo-row .photo img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 760px) {
  .photo-row {
    grid-auto-columns: 70%; gap: 14px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-left: 24px; scrollbar-width: none;
  }
  .photo-row::-webkit-scrollbar { display: none; }
  .photo-row .photo { scroll-snap-align: start; }
}

/* ---------- rsvp: a photo keeps the wizard company ---------- */
.rsvp-page .photo { max-width: 420px; margin: 0 auto 46px; }
@media (min-width: 1240px) {
  .rsvp-page {
    max-width: 1080px; display: grid; align-items: start;
    grid-template-columns: 320px minmax(0, 620px); column-gap: 72px; justify-content: center;
  }
  .rsvp-page .photo { position: sticky; top: 130px; max-width: none; margin: 8px 0 0; }
  .rsvp-page .wizard, .rsvp-page .rsvp-thanks, .rsvp-page .rsvp-done { grid-column: 2; }
}

/* ---------- dress code: the dancing shoes line gets its picture ---------- */
.dress__closing { display: grid; justify-items: center; gap: 30px; margin-top: 90px; }
.dress__closing .photo { max-width: 420px; }
.dress__closing .dress__shoes { margin: 0; }
@media (min-width: 860px) {
  .dress__closing {
    grid-template-columns: 300px minmax(0, 420px); justify-content: center;
    align-items: center; gap: 48px; text-align: left;
  }
}

/* 11:11 photo: keep the tattoo and the ring in frame, not the middle of the picture */
.photo--feature.is-tall img { aspect-ratio: 5 / 4; object-position: center 18%; }