@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }


:root {
  --cream: #FBF6EF;
  --burgundy: #6D1A2B;
  --blush: #EBC7C3;
  --gold: #B8924A;
  --ink: #2A1A1E;
  /* Derived (not new palette colours): */
  --gold-deep: #9A7535;          /* gold darkened to 3.9:1 on cream: focus rings only */
  --gold-line: rgba(184, 146, 74, 0.45);
  --gold-faint: rgba(184, 146, 74, 0.26);
  --paper: #FFFCF8;              /* card surface, a breath lighter than cream */
  --ink-soft: rgba(42, 26, 30, 0.74);
  --field-line: #8A7479;         /* input borders, 4:1 on white */
  --burgundy-deep: #4E1220;
  --placeholder: linear-gradient(158deg, #FBF6EF 0%, #F8ECE6 48%, #EDCFCB 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .1 0 0 0 0 .12 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;             /* taps, colour swaps, press */
  --dur-med: 300ms;              /* lifts, frosting, chevrons */
  --dur-slow: 600ms;             /* sweeps, image fades */
  /* Spacing scale: every margin, gap and padding below comes from these steps. */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 128px;
  --space-section: clamp(var(--s-5), 8vw, var(--s-6)); /* content → closing ornament */
  --head-top: clamp(var(--s-4), 5vw, var(--s-5));      /* banner → header block */
  --head-gap: clamp(var(--s-4), 4.5vw, var(--s-5));    /* header block → content */
  /* Layout: one content container per tab; banners sit on a wider plate; text keeps a measure. */
  --gutter: max(clamp(20px, 4.5vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --container: 75rem;            /* 1200 px at 16 px root */
  --plate: 100rem;               /* banner plate, 1600 px; full-bleed below that */
  --measure: 40rem;              /* readable text column */
  /* One card surface for every card on the site. */
  --card-radius: 4px;
  --card-border: 1px solid rgba(184, 146, 74, 0.34);
  --card-shadow: 0 1px 2px rgba(42, 26, 30, 0.04), 0 14px 32px -22px rgba(42, 26, 30, 0.28);
  --card-pad: clamp(var(--s-3), 4vw, var(--s-4));
  --bar-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Very large screens (1440p+): the whole type scale and the rem-based widths step up together. */
@media (min-width: 2200px) { html { font-size: 118.75%; } }
body {
  margin: 0;
  background: var(--grain), var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; color: var(--burgundy); line-height: 1.1; }
::selection { background: var(--blush); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
/* Touch: no grey flash or double-tap zoom delay; :active / :focus-visible states show the tap instead. */
a, button, summary, label, select, input, textarea, [role="tab"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ---------- Intro veil (first visit per session; see intro.js) ---------- */
.intro-veil { display: none; }
html.intro-pending .intro-veil {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--grain), var(--cream);
  pointer-events: none; /* never blocks: taps reach the page and dismiss the veil */
  animation: veil-failsafe 400ms var(--ease-out) 3s forwards;
}
html.intro-pending .intro-veil.is-playing { animation: none; }
@keyframes veil-failsafe { to { opacity: 0; visibility: hidden; } }
.intro-mark { width: min(46vw, 190px); }
.intro-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.intro-ring { fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-ring-inner { stroke-width: 0.6; opacity: 0.6; }
.intro-veil.is-drawing .intro-ring { animation: ring-draw 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.intro-veil.is-drawing .intro-ring-inner { animation-delay: 150ms; animation-duration: 750ms; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
.intro-letters text { font-family: var(--font-heading); font-style: italic; font-size: 60px; fill: var(--burgundy); }
.intro-letters .mono-amp { font-size: 34px; }

/* ---------- Tab bar ---------- */
.tabbar {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}
/* Frosted layer fades in after 8 px of scroll (opacity only). */
.tabbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 246, 239, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 10px 30px -22px rgba(42, 26, 30, 0.45);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar::before { background: var(--cream); }
}
.tabbar.is-scrolled::before { opacity: 1; }
.tabbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-line); }
/* Reading progress within the current tab: a 2 px gold line just under the bar (scaleX only). */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(184, 146, 74, 0.55), var(--gold));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: progress-grow linear both; animation-timeline: scroll(root block); }
  .hero-media { animation: hero-drift linear both; animation-timeline: scroll(root block); animation-range: 0 340px; }
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hero-drift { from { transform: translateY(0px); } to { transform: translateY(40px); } }

.brand {
  position: relative;
  width: 42px;
  height: 42px;
  margin: 12px auto 0;
  background: url("../img/monogram.svg") center / contain no-repeat;
}
.brand-letters {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 17px;
  line-height: 1;
  color: var(--burgundy);
  white-space: nowrap;
}
.mono-amp { font-size: 0.62em; margin: 0 0.08em; }

[role="tablist"] {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 0 16px;
}
[role="tab"] {
  flex: none;
  padding: 19px 14px 17px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  scroll-snap-align: center;
  transition: color var(--dur-fast) var(--ease-out);
}
[role="tab"]:hover, [role="tab"]:active { color: var(--burgundy); }
[role="tab"][aria-selected="true"] { color: var(--burgundy); }
[role="tab"]:focus-visible { outline-offset: -6px; }
.tab-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100px; /* fixed; sized via scaleX, see router.js INDICATOR_BASE */
  transform-origin: left center;
  background: var(--gold);
  pointer-events: none;
  will-change: transform;
}

/* min-height keeps the footer below the fold while a tab is still loading (no flash under the bar). */
main { display: flow-root; min-height: calc(100vh - var(--bar-h)); padding: 0 0 72px; overflow-x: hidden; }
@supports (overflow: clip) { main { overflow-x: clip; } } /* clip keeps sticky children working */
/* Panel blocks: every direct child sits in the one container; .bleed runs edge to edge; the
   banner sits on the wider plate (full-bleed until the window is wider than the plate). */
#main > [role="tabpanel"] > * { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
#main > [role="tabpanel"] > .bleed { width: 100%; }
#main > [role="tabpanel"] > .page-banner { width: min(100%, var(--plate)); }
[role="tabpanel"][hidden], #fallback[hidden] { display: none; }

/* Desktop: crest at the bar's left edge. Narrower: crest above the tabs, scrolling away. */
@media (min-width: 1100px) {
  .brand { position: absolute; left: 32px; top: 50%; margin: -21px 0 0; }
}
@media (max-width: 1099px) {
  .tabbar { top: -54px; }
  :root { --bar-h: 50px; }
}
/* em, not px: follows the reader's default font size (20 px root -> 950 px), so the scrolling
   strip takes over before the tabs stop fitting. */
@media (max-width: 47.5em) {
  [role="tablist"] {
    justify-content: flex-start;
    gap: 0;
    padding: 0 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%);
  }
  [role="tablist"]::-webkit-scrollbar { display: none; }
  [role="tab"] { padding: 15px 12px 14px; min-height: 48px; }
  main { padding-bottom: 56px; }
}

/* ---------- Shared editorial pieces ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
img { display: block; max-width: 100%; height: auto; }

.eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1875rem, 2.8vw, 1.4375rem);
  line-height: 1.3;
  color: var(--burgundy);
}
.ornament { display: block; width: 132px; height: 14px; margin: var(--s-3) auto 0; background: url("../img/flourish-divider.svg") center / contain no-repeat; }
/* The header block: identical on every tab. */
.panel-head { text-align: center; margin: var(--head-top) auto var(--head-gap); }
.panel-head h1 {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 3vw, 26px);
  margin: 0;
  font-size: clamp(2.75rem, 9vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.panel-head h1::before, .panel-head h1::after {
  content: "";
  flex: none;
  width: clamp(34px, 8vw, 88px);
  height: clamp(8px, 1.8vw, 18px);
  background: url("../img/flourish-sprig.svg") center / contain no-repeat;
}
.panel-head h1::after { transform: scaleX(-1); }

/* Photo frames: designed placeholder until the real photo covers it. Every box has the
   photo's own aspect ratio, so object-fit: cover never trims anything. */
.frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  background: var(--placeholder);
  border-radius: 2px;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/flourish-botanical.svg") center / auto 58% no-repeat;
  opacity: 0.5;
}
.frame > img, .frame > iframe { position: relative; z-index: 1; }
.frame > img { width: 100%; object-fit: cover; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.img-fade .frame > img:not(.is-loaded), .frame > img.is-missing { opacity: 0; }
.frame-photo > img, .frame-dress > img { aspect-ratio: 4 / 5; }
.frame-tile > img { aspect-ratio: 4 / 3; }
/* Standalone photos keep the fine gold inset line; photos inside cards and banners do not. */
.frame-photo::after, .frame-dress::after { content: ""; position: absolute; inset: 8px; z-index: 2; border: 1px solid rgba(184, 146, 74, 0.42); pointer-events: none; }

/* ---------- Tab banner: the photo at its native 5:2 on a plate ---------- */
.page-banner { margin-top: clamp(0px, (100vw - var(--plate)) / 2, var(--s-5)); }
.page-banner .banner-media { aspect-ratio: 5 / 2; border-radius: 0; }
.page-banner .banner-media::before { background-size: auto 50%; }
.banner-img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1600px) { .page-banner .banner-media { border-radius: var(--card-radius); } }

/* Buttons: burgundy fill sweeps in (scaleX on a pseudo-element). */
.button, .btn-outline { position: relative; isolation: isolate; overflow: hidden; cursor: pointer; }
.button::before, .btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.button:focus-visible::before, .btn-outline:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) {
  .button:hover::before, .btn-outline:hover::before { transform: scaleX(1); transform-origin: left center; }
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 40px;
  background: var(--burgundy);
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.button::before { background: var(--burgundy-deep); }
.button:active { transform: scale(0.97); }
.btn-outline {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 8px;
  border: 1px solid var(--burgundy);
  border-radius: 2px;
  background: transparent;
  color: var(--burgundy);
  text-align: center;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out); /* text colour switches instantly under the sweep */
}
.btn-outline::before { background: var(--burgundy); }
.btn-outline:focus-visible { color: var(--cream); }
@media (hover: hover) { .btn-outline:hover { color: var(--cream); } }
.btn-outline:active { transform: scale(0.97); }

.text-link {
  position: relative;
  display: inline-block;
  padding: 12px 0;
  color: var(--burgundy);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.text-link::before, .text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; }
.text-link::before { background: var(--gold-line); }
.text-link::after { background: var(--burgundy); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-slow) var(--ease-out); }
.text-link:active { opacity: 0.72; }
.text-link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) { .text-link:hover::after { transform: scaleX(1); transform-origin: left center; } }

/* ---------- Card surface (shared by every card) ---------- */
.card, .reg-card, .reg-fund, .journal-card, .rsvp-form, .rsvp-soon, .faq, .countdown-block {
  background: var(--paper);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
/* Interactive cards lift (transform) and a deeper shadow fades in (opacity on a pseudo-element). */
.reg-card, .journal-card { position: relative; isolation: isolate; transition: transform var(--dur-med) var(--ease-out); }
.reg-card::after, .journal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 22px 40px -22px rgba(109, 26, 43, 0.34), 0 6px 14px -8px rgba(42, 26, 30, 0.14);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.reg-card:active, .journal-card:active { transform: scale(0.985); }
/* Keyboard focus lifts the card too (a tap or click does not); visible focus rings stay on the link.
   :has() is a progressive enhancement: without it the card simply does not lift. */
.reg-card:has(:focus-visible), .journal-card:has(:focus-visible) { transform: translateY(-4px); }
.reg-card:has(:focus-visible)::after, .journal-card:has(:focus-visible)::after { opacity: 1; }
@media (hover: hover) {
  .reg-card:hover, .journal-card:hover { transform: translateY(-4px); }
  .reg-card:hover::after, .journal-card:hover::after { opacity: 1; }
  .reg-card:hover .frame > img, .journal-card:hover .frame > img, .photo:hover > img, .look:hover .frame > img { transform: scale(1.04); }
}
/* Intro line under a header block (Registry, Wishes). */
.panel-intro { max-width: 50ch; margin: calc(var(--s-3) - var(--head-gap)) auto var(--head-gap); text-align: center; font-size: 1.0625rem; line-height: 1.8; color: var(--ink); }

/* ---------- Home: full-bleed hero, names over the photo ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: max(560px, calc(100vh - var(--bar-h)));
  height: max(560px, calc(100svh - var(--bar-h)));
  margin: 0;
  background: radial-gradient(120% 90% at 50% 30%, #5A1726 0%, var(--ink) 70%); /* if the photo is missing */
  color: var(--cream);
}
@media (min-width: 900px) {
  /* Desktop: leave room for the countdown card to sit across the fold. */
  .hero { height: max(560px, calc(100vh - var(--bar-h) - 104px)); height: max(560px, min(90vh, calc(100svh - var(--bar-h) - 104px))); }
}
.hero-media { display: block; position: absolute; inset: -40px 0 0; z-index: -2; will-change: transform; } /* 40 px spare for the parallax */
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(68% 58% at 50% 64%, rgba(42, 26, 30, 0.78) 0%, rgba(42, 26, 30, 0.34) 62%, rgba(42, 26, 30, 0) 100%),
    linear-gradient(180deg, rgba(42, 26, 30, 0.28) 0%, rgba(42, 26, 30, 0.06) 26%, rgba(42, 26, 30, 0.42) 52%, rgba(52, 18, 28, 0.84) 100%);
}
.home-intro {
  text-align: center;
  padding: 0 var(--gutter) clamp(88px, 13vh, 150px);
  text-shadow: 0 1px 24px rgba(42, 26, 30, 0.45);
}
.hero .eyebrow { color: var(--cream); }
.home-names {
  margin: 6px 0 0;
  font-size: clamp(3.4rem, 14.5vw, 9rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  color: var(--cream);
}
/* A word stays whole on its line; only a name wider than the screen breaks inside itself. */
.home-names .word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.home-names .ch { display: inline-block; }
.home-names .amp { font-style: italic; font-size: 0.78em; margin: 0 0.04em; color: var(--blush); }
.hero-rule { width: 168px; height: 16px; margin-top: 24px; }
.home-date { margin: 20px 0 0; font-family: var(--font-heading); font-size: clamp(1.375rem, 3.8vw, 2rem); line-height: 1.3; color: var(--cream); }
.home-time { margin: 6px 0 0; font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blush); font-weight: 500; }
@media (max-width: 899px) { .home-intro { padding-bottom: clamp(84px, 14svh, 132px); } }
/* Portrait screens: the 3:4 portrait crop in a 3:4 box (box + the 40 px parallax spare = 3:4),
   held inside the fold on tall tablets. Same query as the <source> in render/home.js. */
@media (max-aspect-ratio: 4/5) {
  /* 420 px floor: small phones (320×568) keep room for the eyebrow above the names. */
  .hero { height: max(420px, min(calc(100vw * 4 / 3 - 40px), calc(100vh - var(--bar-h) - 24px))); }
  .hero-img { object-position: 50% 50%; }
}
/* Countdown: a cream card overlapping the bottom of the hero. */
#main > [role="tabpanel"] > .countdown-block { width: min(100% - 2 * var(--gutter), 780px); }
.countdown-block {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  padding: clamp(20px, 3vw, 30px) clamp(8px, 3vw, 36px);
  background: var(--paper);
  border: 1px solid var(--gold-line);
  outline: 1px solid var(--gold-faint);
  outline-offset: -8px;
  border-radius: var(--card-radius);
  box-shadow: 0 30px 60px -36px rgba(42, 26, 30, 0.55), 0 8px 18px -12px rgba(42, 26, 30, 0.18);
}
@media (max-width: 899px) { .countdown-block { margin-top: -56px; } }
.countdown { display: flex; justify-content: center; align-items: stretch; }
.cd-cell { flex: 1 1 0; max-width: 160px; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 2px 0; }
.cd-cell + .cd-cell { border-left: 1px solid var(--gold-faint); }
.cd-num { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2.25rem, 9.5vw, 4rem); line-height: 1; color: var(--burgundy); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cd-num .dg { position: relative; display: inline-block; }
.cd-num .dg-new { display: inline-block; }
.cd-num .dg-old { position: absolute; left: 0; top: 0; }
.cd-label { margin-top: 12px; font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
@media (max-width: 359px) { .cd-label { letter-spacing: 0.12em; font-size: 0.5625rem; } } /* MINUTES/SECONDS clear the dividers at 320 */
.countdown-done { display: block; text-align: center; font-family: var(--font-heading); font-style: italic; font-size: clamp(2rem, 7vw, 3rem); color: var(--burgundy); }
.home-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 36px; margin: clamp(36px, 5vw, 52px) auto 0; }

/* ---------- Two-column content (Story, Details, Dress Code) ----------
   Phones stack; from 900 px the text takes 5 or 7 of 12 columns and the media the rest. */
.story-body, .details-grid, .dress-grid { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) {
  .story-body-1 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); }
  .details-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s-4); } /* card keeps its height beside the taller map */
  .dress-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); }
  .details-grid.is-single, .dress-grid.is-single { grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
}

/* ---------- Story ---------- */
.prose { max-width: var(--measure); margin: 0 auto; font-size: 1.0625rem; line-height: 1.85; }
.prose p { margin: 0 0 1.4em; }
.prose p:last-child { margin-bottom: 0; }
.prose p:first-child::first-letter { float: left; margin: 0.08em 0.12em 0 0; font-family: var(--font-heading); font-size: 3.6em; line-height: 0.8; color: var(--burgundy); }
@media (min-width: 900px) { .story-body-1 .prose { margin: 0; font-size: 1.1875rem; } }
.photo-grid { display: grid; gap: var(--s-3); margin: 0 auto; grid-template-columns: 1fr; }
.photo-grid-1 { width: 100%; max-width: 28rem; }
.photo-grid-2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .photo-grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .photo-grid-3 { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .story-body-1 .photo-grid { margin: 0 0 0 auto; } }

/* ---------- Details: venue card beside the map ---------- */
.details-info { display: flex; flex-direction: column; gap: var(--s-3); }
.card { padding: var(--card-pad); text-align: center; }
.detail-card { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.card p { margin: 0; overflow-wrap: anywhere; }
.card-label { font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--burgundy); }
.card-time { font-family: var(--font-heading); font-size: clamp(1.625rem, 4vw, 2.25rem); line-height: 1.15; margin: var(--s-2) 0 var(--s-3) !important; color: var(--ink); }
.card-venue { font-family: var(--font-heading); font-style: italic; font-size: 1.5rem; line-height: 1.25; color: var(--burgundy); }
.card-address { margin-top: var(--s-1) !important; font-size: 0.9375rem; color: var(--ink-soft); }
.actions { margin: 0; }
.actions .button { width: 100%; }
.map { border-radius: var(--card-radius); border: var(--card-border); }
.map iframe { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; filter: grayscale(0.35) sepia(0.12); }

/* ---------- Dress code: words beside the two flat-lays ---------- */
.dress-name { margin: 0; font-family: var(--font-heading); font-style: italic; font-size: clamp(2.25rem, 5vw, 3.25rem); color: var(--burgundy); line-height: 1.05; }
.dress-desc { max-width: var(--measure); margin: var(--s-2) 0 0; font-size: 1.0625rem; line-height: 1.8; }
.dress-note {
  margin: var(--s-4) 0 0;
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
  background: rgba(235, 199, 195, 0.3);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink);
}
.looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 640px) { .looks { gap: var(--s-3); } }
.look { margin: 0; }
.look figcaption { margin-top: var(--s-2); text-align: center; font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; line-height: 1.3; color: var(--burgundy); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.swatch { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(42,26,30,0.18), 0 0 0 5px var(--cream), 0 0 0 6px var(--gold-line); }

/* ---------- Registry ---------- */
.reg-grid, .journal-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .reg-grid, .journal-grid { gap: var(--s-3); } .reg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .reg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .reg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Photo cards (registry, wishes): photo inset by one step, text below, action pinned to the bottom. */
.reg-card, .journal-card { display: flex; flex-direction: column; padding: var(--s-1) var(--s-1) var(--s-2); }
.frame-registry { background: #F5EEE6; border-radius: 2px; }
.frame-registry::before { content: none; }
.frame-registry.is-empty::before { content: ""; }
.frame-registry > img { aspect-ratio: 1 / 1; object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.reg-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.4em);
  margin: var(--s-2) var(--s-1) 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  line-height: 1.4;
  color: var(--ink);
}
.reg-price { margin: 4px var(--s-1) var(--s-2); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* The label may wrap onto two lines rather than clip (narrow phones, or a larger default font). */
.reg-card .btn-outline { margin-top: auto; white-space: normal; line-height: 1.3; }
@media (max-width: 400px) { .reg-card .btn-outline { font-size: 0.6875rem; letter-spacing: 0.02em; padding-inline: 4px; white-space: normal; line-height: 1.3; } }
.reg-funds { list-style: none; padding: 0; margin: var(--s-5) auto 0; display: grid; gap: var(--s-2); max-width: 32rem; }
.reg-fund { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; padding: var(--card-pad); }
.reg-fund .gold-icon { width: 28px; height: 28px; }
.reg-fund-name { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--burgundy); }
.reg-fund-text { margin: 0 0 var(--s-1); font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--ink); }
.reg-fund .btn-outline { max-width: 20rem; }
.gold-icon { color: var(--gold); flex: none; }
.reg-all { margin: var(--s-4) 0 0; text-align: center; }
.reg-all a { color: var(--burgundy); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 6px; padding: 12px 0; display: inline-block; }
.reg-sign { margin: var(--s-1) 0 0; text-align: center; }
.reg-sign a { color: var(--burgundy); font-family: var(--font-heading); font-style: italic; font-size: 1.1875rem; text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 6px; padding: 10px 0; display: inline-block; }

/* ---------- Wishes (kept understated): 2 across, 4 × 2 from 1200 px, every card the same height ---------- */
.journal-grid { grid-auto-rows: 1fr; }
@media (min-width: 1200px) { .journal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.journal-photo { position: relative; }
.is-funded .journal-photo img { filter: saturate(0.55); }
.stamp { position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; padding: 8px; border: 1.5px solid var(--gold); border-radius: 50%; background: rgba(251,246,239,0.92); color: var(--burgundy); font-family: var(--font-heading); font-weight: 600; font-size: 0.8125rem; line-height: 1.1; text-align: center; transform: rotate(-12deg); }
.journal-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: var(--s-2) var(--s-1) 0; }
.journal-title { margin: 0; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.4375rem); font-weight: 500; line-height: 1.15; color: var(--burgundy); overflow-wrap: break-word; hyphens: manual; }
.journal-title .gold-icon { display: block; margin-bottom: var(--s-1); }
.journal-line { margin: var(--s-1) 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 639px) { .journal-body { padding-inline: 4px; } .journal-line { font-size: 0.875rem; line-height: 1.5; } }
.journal-pay { margin: auto 0 0; padding-top: var(--s-1); display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.journal-pay a { color: var(--burgundy); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 5px; padding: 12px 0; }
.journal-soon { margin: auto 0 0; padding-top: var(--s-2); font-family: var(--font-heading); font-style: italic; font-size: 1.0625rem; color: var(--ink-soft); }
.journal-pay a:active, .reg-sign a:active, .reg-all a:active { opacity: 0.72; }
.progress { max-width: 300px; margin: var(--s-5) auto 0; text-align: center; }
.progress-track { height: 2px; background: var(--blush); border-radius: 2px; overflow: hidden; }
.progress-bar { display: block; height: 100%; background: var(--gold); }
.progress-label { margin: 12px 0 0; font-family: var(--font-heading); font-style: italic; font-size: 1.0625rem; color: var(--ink); }

/* ---------- RSVP ---------- */
#main > [role="tabpanel"] > .rsvp-form, #main > [role="tabpanel"] > .rsvp-closed, #main > [role="tabpanel"] > .rsvp-soon { width: min(100% - 2 * var(--gutter), 40rem); }
.rsvp-form { margin: 0 auto; scroll-margin: calc(var(--bar-h) + 16px); display: grid; gap: var(--s-3); padding: var(--card-pad); }
.rsvp-form .field { display: grid; gap: var(--s-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.rsvp-form label, .rsvp-form legend { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding: 0; }
.rsvp-form .req { color: var(--burgundy); }
.rsvp-form input[type="text"], .rsvp-form select, .rsvp-form textarea { scroll-margin-block: 96px; width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--field-line); border-radius: 2px; }
.rsvp-form input[type="text"]:focus-visible, .rsvp-form select:focus-visible, .rsvp-form textarea:focus-visible { border-color: var(--gold-deep); outline-offset: 2px; }
.rsvp-form textarea { resize: vertical; }
/* Step 1 (find) and step 2 (reply) are sibling cards; only one shows at a time. */
.rsvp-form[hidden] { display: none; }
.rsvp-step, .rsvp-welcome { margin: 0; text-align: center; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); line-height: 1.15; color: var(--burgundy); outline: none; overflow-wrap: break-word; }
.rsvp-hello { display: grid; justify-items: center; gap: var(--s-1); text-align: center; }
.rsvp-seats { margin: 0; }
.rsvp-note { margin: 0; font-family: var(--font-heading); font-style: italic; font-size: 1.125rem; color: var(--ink-soft); }
.rsvp-notyou { min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 0.9375rem; color: var(--burgundy); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 5px; cursor: pointer; }
.rsvp-notyou:active { opacity: 0.72; }
/* One fieldset per invited seat. The floated legend becomes a normal grid item, so the rule above it is uncut. */
.rsvp-form .seat { gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--gold-faint); }
.rsvp-form .seat > legend { float: left; width: 100%; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.2; color: var(--burgundy); overflow-wrap: break-word; }
.pill-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
[data-meal][hidden] { display: none; }
.pill { position: relative; display: block; }
.pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill span { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 8px; text-align: center; border: 1px solid var(--burgundy); border-radius: 999px; color: var(--burgundy); font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 1.125rem; letter-spacing: 0; text-transform: none; line-height: 1.2; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pill input:checked + span { background: var(--burgundy); color: var(--cream); }
.pill input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.pill:active span { transform: scale(0.97); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { padding: 12px 14px; border-left: 3px solid var(--burgundy); background: var(--blush); color: var(--ink); font-size: 0.9375rem; }
.form-error[hidden] { display: none; }
.form-error a { color: var(--burgundy); font-weight: 600; overflow-wrap: anywhere; }
.rsvp-form .button { width: 100%; border: 0; font-family: inherit; margin-top: 4px; }
.rsvp-form .button:disabled,
.rsvp-form .button[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.rsvp-thanks { margin: var(--s-3) 0; text-align: center; font-family: var(--font-heading); font-style: italic; font-size: clamp(1.625rem, 5vw, 2.25rem); color: var(--burgundy); outline: none; }
.rsvp-closed { margin: 0 auto; text-align: center; font-size: 1.0625rem; }
.rsvp-closed a { color: var(--burgundy); font-weight: 600; overflow-wrap: anywhere; }
.rsvp-soon { margin: 0 auto; padding: var(--card-pad); text-align: center; font-size: 1.0625rem; line-height: 1.6; }
.rsvp-soon a { color: var(--burgundy); font-weight: 600; overflow-wrap: anywhere; }

/* ---------- FAQ: one card of questions ---------- */
#main > [role="tabpanel"] > .faq { width: min(100% - 2 * var(--gutter), 48rem); }
.faq { margin: 0 auto; padding: var(--s-1) var(--card-pad); }
.faq-item + .faq-item { border-top: 1px solid var(--gold-faint); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline-offset: -2px; }
.faq-q { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.25rem, 3vw, 1.5rem); line-height: 1.25; color: var(--burgundy); overflow-wrap: anywhere; }
.faq-chev {
  flex: none;
  width: 10px;
  height: 10px;
  margin: -5px 6px 0 0;
  border-right: 1.25px solid var(--gold);
  border-bottom: 1.25px solid var(--gold);
  transform: rotate(45deg);
  transition: transform var(--dur-med) var(--ease-out);
}
.faq-item[open] .faq-chev { transform: translateY(4px) rotate(-135deg); }
.faq-a { padding: 0 0 var(--s-3); }
.faq-a p { margin: 0; max-width: 60ch; font-size: 1.0625rem; line-height: 1.8; color: var(--ink); }
.faq-item[open] .faq-a { animation: faq-in var(--dur-med) var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Scrollbar: burgundy on cream for mouse/trackpad users (phones keep the OS overlay) ---------- */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--cream); }
  ::-webkit-scrollbar-thumb { background: var(--burgundy); border: 2px solid var(--cream); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--burgundy-deep); }
  /* Standard properties switch the WebKit styling off in Chromium, so only engines without it use them. */
  @supports not selector(::-webkit-scrollbar) {
    html { scrollbar-color: var(--burgundy) var(--cream); scrollbar-width: thin; }
  }
}


/* ---------- Notes and the static fallback (no config / no JS) ---------- */
.panel-note { max-width: 46ch; margin: 0 auto; text-align: center; font-family: var(--font-heading); font-style: italic; font-size: 1.3125rem; line-height: 1.5; color: var(--ink); }
.fallback { max-width: 640px; margin: 0 auto; padding: var(--space-section) 0 0; text-align: center; }
.fallback-names { margin: 0; font-size: clamp(3rem, 12vw, 6.5rem); line-height: 1; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.fallback-date { margin: 28px 0 0; font-family: var(--font-heading); font-size: clamp(1.375rem, 3.8vw, 1.875rem); line-height: 1.3; }
.fallback-time { margin: 6px 0 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--burgundy); }
.fallback-venue { margin: 32px 0 0; font-family: var(--font-heading); font-style: italic; font-size: 1.5rem; line-height: 1.25; color: var(--burgundy); }
.fallback-address { margin: 6px 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.fallback-note { margin: 40px auto 0; max-width: 46ch; font-size: 0.9375rem; line-height: 1.7; }
.fallback-note a { color: var(--burgundy); font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Site footer: quiet sign-off under every tab ---------- */
.site-footer {
  text-align: center;
  padding: var(--s-2) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  color: var(--ink-soft);
}
.footer-flourish { display: block; width: 150px; height: 14px; margin: 0 auto var(--s-3); background: url("../img/flourish-divider.svg") center / contain no-repeat; opacity: 0.8; }
.footer-names { margin: 0; font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.3; color: var(--burgundy); }
.footer-date { margin: 4px 0 0; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- Print: everything visible, no veil ---------- */
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .intro-veil { display: none !important; }
}

/* ---------- Reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
  html.intro-pending .intro-veil { display: none; }
  .reg-card:hover, .journal-card:hover, .reg-card:has(:focus-visible), .journal-card:has(:focus-visible) { transform: none; }
  .frame > img { transform: none !important; }
  .hero-media { animation: none !important; transform: none !important; }
  .scroll-progress { animation-duration: auto !important; } /* a position read-out, not motion */
  [role="tablist"] { scroll-behavior: auto; }
}