/* Hallmark · macrostructure: bespoke "Arched Window" (split hero + manuscript ledger + folio form)
 * tone: luxury-editorial, old-world · anchor hue: burgundy 18° / gold 82°
 * nav: masthead only (single-action page) · footer: colophon line · motion: rise · reveal · press
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--space-5); }
body {
  margin: 0;
  background: var(--color-burgundy-950);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; font-style: normal; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 50;
  background: var(--color-gold-400); color: var(--color-ink); padding: var(--space-2) var(--space-4);
}
.skip:focus { top: var(--space-4); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

:focus-visible { outline: 2px solid var(--color-gold-400); outline-offset: 3px; }
.rsvp :focus-visible, .intro :focus-visible { outline-color: var(--color-burgundy-700); }

/* ─── Buttons ─────────────────────────────────────────── */
.btn {
  --btn-bg: var(--color-gold-400);
  --btn-fg: var(--color-ink);
  --btn-bg-hover: var(--color-gold-300);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 3.25rem; padding: 0 var(--space-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--rule-hair) solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover { background: var(--btn-bg-hover); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--burgundy { --btn-bg: var(--color-burgundy-800); --btn-fg: var(--color-ivory-50); --btn-bg-hover: var(--color-burgundy-700); }
.btn--line { --btn-bg: transparent; --btn-fg: var(--color-burgundy-800); --btn-bg-hover: var(--color-ivory-200); border-color: var(--color-burgundy-800); }
.btn--wide { width: 100%; }
.btn--small { min-height: 2.75rem; padding: 0 var(--space-5); font-size: var(--text-sm); }
.btn__busy { display: none; }
.btn[data-state="loading"] .btn__label { display: none; }
.btn[data-state="loading"] .btn__busy { display: inline; }
.btn[data-state="loading"] { cursor: progress; opacity: 0.85; }
.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-burgundy-800); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* ─── Hero ────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  color: var(--color-ivory-100);
  background:
    radial-gradient(60rem 40rem at 78% 30%, var(--color-burgundy-800), transparent 70%),
    radial-gradient(40rem 30rem at 0% 100%, var(--color-forest-900), transparent 70%),
    var(--color-burgundy-950);
  padding: var(--space-5) var(--gutter) var(--space-9);
}
.hero::after { /* paper grain, very light */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.09; pointer-events: none;
  background-image: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__masthead {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  width: min(100%, var(--wrap)); margin-inline: auto;
  padding-bottom: var(--space-4);
  border-bottom: var(--rule-hair) solid color-mix(in oklch, var(--color-gold-500) 45%, transparent);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-gold-400);
}
.masthead__mark { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.masthead__mark svg { width: 14px; height: 14px; fill: currentColor; }
.masthead__place { color: var(--color-ivory-300); text-align: right; white-space: nowrap; }
.masthead__long { display: none; }
@media (min-width: 40rem) { .masthead__long { display: inline; } }
@media (max-width: 22.4rem) { .masthead__place { display: none; } .hero__kicker { letter-spacing: 0.1em; } }

.hero__grid {
  width: min(100%, var(--wrap)); margin: var(--space-7) auto 0;
  display: grid; gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}
.hero__kicker {
  font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--color-gold-400); margin-bottom: var(--space-4);
}
.hero__title {
  font-family: var(--font-display); font-size: var(--text-display);
  line-height: 0.92; letter-spacing: -0.015em; color: var(--color-ivory-50);
}
.hero__line { display: block; }
.hero__line--gold { color: var(--color-gold-400); }
.hero__sub {
  margin-top: var(--space-5); max-width: 32ch;
  font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; color: var(--color-ivory-200);
}
.facts {
  margin: var(--space-6) 0 0; display: grid; gap: var(--space-3);
  border-top: var(--rule-hair) solid color-mix(in oklch, var(--color-gold-500) 40%, transparent);
  padding-top: var(--space-4);
}
.facts div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.facts dt { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-500); font-weight: 600; }
.facts dd { margin: 0; font-size: clamp(var(--text-base), 0.9rem + 0.8vw, var(--text-lg)); font-weight: 500; color: var(--color-ivory-50); }
.hero__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.hero__note { font-size: var(--text-sm); color: var(--color-ivory-300); }

/* Arched window (Romanesque arch holding the 9:16 promo) */
.arch { margin: 0 auto; width: min(100%, 22rem); position: relative; }
.arch::before { /* outer gold hairline, offset like a window moulding */
  content: ""; position: absolute; inset: -12px;
  border: var(--rule-hair) solid var(--color-gold-500);
  border-radius: 50% 50% var(--radius-sm) var(--radius-sm) / 26% 26% var(--radius-sm) var(--radius-sm);
  opacity: 0.7; pointer-events: none;
}
.arch__window {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 50% 50% var(--radius-sm) var(--radius-sm) / 28.1% 28.1% var(--radius-sm) var(--radius-sm);
  background: var(--color-burgundy-900);
  box-shadow: 0 30px 60px -20px var(--color-shadow);
}
.arch__video { width: 100%; height: 100%; object-fit: cover; }
.arch__sound {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.75rem; padding: 0 var(--space-4);
  background: var(--color-scrim); color: var(--color-ivory-50);
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-gold-400) 60%, transparent);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.arch__sound svg { width: 18px; height: 18px; }
.arch__sound:hover { background: var(--color-burgundy-900); }
.arch__sound:active { transform: translateY(1px); }

@media (min-width: 60rem) {
  .hero { padding-bottom: var(--space-10); }
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; margin-top: var(--space-8); }
  .arch { width: min(100%, 24rem); margin-right: var(--space-3); }
}

/* ─── Intro (ivory manuscript page) ───────────────────── */
.intro { background: var(--color-ivory-100); padding: var(--space-9) 0; }
.intro__grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
.intro__title { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.05; color: var(--color-burgundy-800); max-width: 14ch; }
.intro__text { margin-top: var(--space-5); font-size: var(--text-lg); line-height: 1.65; max-width: 38ch; color: var(--color-ink); }
.has-initial::first-letter {
  font-family: var(--font-initial); color: var(--color-rubric);
  float: left; font-size: 4.1em; line-height: 0.82; padding: 0.06em 0.12em 0 0;
}
.ledger { list-style: none; margin: 0; padding: 0; border-top: var(--rule-thin) solid var(--color-burgundy-800); }
.ledger li { padding: var(--space-5) 0; border-bottom: var(--rule-hair) solid var(--color-ivory-300); display: grid; gap: var(--space-2); }
.ledger h3 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); display: flex; gap: var(--space-3); align-items: baseline; }
.ledger h3::before { content: "¶"; font-family: var(--font-display); color: var(--color-rubric); }
.ledger p { color: var(--color-ink-soft); max-width: 44ch; }
@media (min-width: 60rem) {
  .intro__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-9); align-items: start; }
  .ledger { margin-top: var(--space-3); }
}

/* ─── Details (forest) ────────────────────────────────── */
.details { background: var(--color-forest-900); color: var(--color-ivory-100); padding: var(--space-8) 0 var(--space-9); }
.rule { display: flex; align-items: center; gap: var(--space-4); color: var(--color-gold-500); margin-bottom: var(--space-7); }
.rule::before, .rule::after { content: ""; flex: 1; height: var(--rule-hair); background: currentColor; opacity: 0.6; }
.rule svg { width: 28px; height: 28px; }
.details__grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); }
.details__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-400); margin-bottom: var(--space-3); }
.details__big { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.02; color: var(--color-ivory-50); }
.details__big--venue { max-width: 12ch; }
.details__small { margin-top: var(--space-3); font-style: normal; font-size: var(--text-lg); line-height: 1.5; color: var(--color-ivory-200); }
.details__links { list-style: none; padding: 0; margin: var(--space-7) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.details__links a {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem;
  color: var(--color-gold-300); font-weight: 600; text-decoration: none; white-space: nowrap;
  border-bottom: var(--rule-hair) solid color-mix(in oklch, var(--color-gold-400) 50%, transparent);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.details__links a:hover { border-color: var(--color-gold-300); }
.details__links svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.details__links a:hover svg { transform: translateX(3px); }
@media (min-width: 48rem) { .details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ─── RSVP (folio page with illuminated corners) ──────── */
.rsvp { background: var(--color-ivory-200); padding: var(--space-9) 0; }
.folio {
  position: relative; max-width: 34rem; margin-inline: auto;
  background: var(--color-ivory-50);
  padding: var(--space-8) var(--space-5) var(--space-7);
  border: var(--rule-hair) solid var(--color-gold-600);
  outline: var(--rule-hair) solid var(--color-gold-600); outline-offset: -8px;
  box-shadow: 0 24px 50px -30px var(--color-shadow);
}
.folio__corner { position: absolute; width: 44px; height: 44px; color: var(--color-gold-600); }
.folio__corner--tl { top: 14px; left: 14px; }
.folio__corner--tr { top: 14px; right: 14px; transform: scaleX(-1); }
.folio__corner--bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.folio__corner--br { bottom: 14px; right: 14px; transform: scale(-1, -1); }
.folio__panel { position: relative; }
.folio__title { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--color-burgundy-800); text-align: center; }
.folio__sub { margin-top: var(--space-3); text-align: center; color: var(--color-ink-soft); font-size: var(--text-base); }
@media (min-width: 30rem) { .folio { padding-inline: var(--space-8); } }

.form { margin-top: var(--space-6); display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); }
.field input {
  width: 100%; min-height: 3.25rem; padding: 0 var(--space-4);
  font: inherit; font-size: 1.0625rem; color: var(--color-ink);
  background: var(--color-ivory-50);
  border: var(--rule-thin) solid var(--color-ivory-300); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.field input:hover { border-color: var(--color-gold-600); }
.field input:focus-visible { outline: 2px solid var(--color-burgundy-700); outline-offset: 1px; border-color: var(--color-burgundy-700); }
.field input[aria-invalid="true"] { border-color: var(--color-error); background: var(--color-error-bg); }
.field input:disabled { opacity: 0.6; }
.field__error { min-height: 0; font-size: var(--text-sm); color: var(--color-error); font-weight: 500; }
.field__error:empty { display: none; }

.stepper { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem; gap: var(--space-2); max-width: 15rem; }
.stepper input { text-align: center; font-weight: 600; font-size: var(--text-lg); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__btn {
  min-height: 3.25rem; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--color-ivory-100); border: var(--rule-thin) solid var(--color-ivory-300);
  font-size: var(--text-xl); line-height: 1; color: var(--color-burgundy-800);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.stepper__btn:hover { background: var(--color-ivory-200); border-color: var(--color-gold-600); }
.stepper__btn:active { transform: translateY(1px); }
.stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__alert {
  padding: var(--space-4); border-left: 3px solid var(--color-error);
  background: var(--color-error-bg); color: var(--color-ink); font-size: var(--text-sm); line-height: 1.5;
}
.form__alert a { color: var(--color-burgundy-800); font-weight: 600; }
.google-mode { margin-top: var(--space-6); display: grid; gap: var(--space-4); text-align: center; color: var(--color-ink-soft); }

.folio__done { text-align: center; }
.folio__done:focus { outline: none; }
.seal { width: 44px; height: 44px; margin: 0 auto var(--space-5); fill: var(--color-rubric); }
.done__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.done__share { margin-top: var(--space-6); color: var(--color-ink-soft); font-size: var(--text-sm); }
.done__copied { margin-left: var(--space-2); color: var(--color-forest-800); font-weight: 600; }

/* ─── Finale ──────────────────────────────────────────── */
.finale {
  background:
    radial-gradient(50rem 30rem at 50% 0%, var(--color-burgundy-800), transparent 70%),
    var(--color-burgundy-950);
  color: var(--color-ivory-100); padding: var(--space-9) 0 var(--space-10); text-align: center;
}
.finale__inner { display: grid; justify-items: center; gap: var(--space-5); }
.finale__mark { width: 36px; height: 36px; color: var(--color-gold-500); }
.finale__title { font-family: var(--font-display); font-size: var(--text-display); line-height: 0.95; color: var(--color-ivory-50); }
.finale__sub { color: var(--color-ivory-200); font-size: var(--text-lg); max-width: 32ch; margin-bottom: var(--space-3); }

.foot { background: var(--color-burgundy-950); color: var(--color-ivory-300); border-top: var(--rule-hair) solid color-mix(in oklch, var(--color-gold-600) 35%, transparent); padding: var(--space-6) 0 calc(var(--space-6) + 5rem); }
.foot__inner { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.foot__fine { font-size: var(--text-xs); opacity: 0.8; }
@media (min-width: 48rem) { .foot { padding-bottom: var(--space-6); } }

/* ─── Sticky mobile dock ──────────────────────────────── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-scrim); color: var(--color-ivory-50);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: var(--rule-hair) solid color-mix(in oklch, var(--color-gold-500) 40%, transparent);
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease-out);
}
.dock.is-on { transform: translateY(0); }
.dock__when { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
@media (min-width: 48rem) { .dock { display: none; } }

/* ─── Motion: section reveal (hero paints instantly for LCP) ─ */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { transform: none !important; transition: opacity 150ms linear !important; }
  .btn, .btn svg, .dock, .details__links svg { transition-duration: 1ms !important; }
}