/* =========================================================
   Lizzeth & Dennis — Barcelona → Austin
   Palette: navy dusk · limestone beige · antique gold
   ========================================================= */

:root {
  /* navy */
  --navy-950: #0B1526;
  --navy-900: #0E1A2E;
  --navy-800: #15243D;
  --navy-700: #1F3252;
  --navy-500: #3E5275;
  --navy-300: #6A7190;

  /* limestone beige */
  --lime-50:  #F5EFE3;
  --lime-100: #EDE4D3;
  --lime-200: #E1D4BC;
  --sand:     #C9B691;

  /* gold */
  --gold:     #B38A45;
  --gold-300: #D6B26B;
  --gold-100: #EFD9A6;

  --ink: var(--navy-900);
  --ink-soft: #46506A;

  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --f-body: "EB Garamond", "Garamond", Georgia, serif;
  --f-label: "Jost", "Futura", "Avenir Next", sans-serif;
  --f-script: "Pinyon Script", "Snell Roundhand", cursive;

  --gutter: clamp(16px, 5vw, 64px);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* limestone grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .18  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { overflow-x: clip; }

img { display: block; max-width: 100%; }

a { color: inherit; }

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

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

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: .6em 1em; background: var(--gold-100); color: var(--navy-900);
  font: 500 .8rem/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(-200%); transition: transform .2s;
}
.skip:focus { transform: none; }

/* ---------- shared type ---------- */

.eyebrow,
.label {
  font-family: var(--f-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .72rem;
  line-height: 1.4;
}

.eyebrow { color: var(--gold); margin: 0 0 1.2rem; }

.section-head { text-align: center; max-width: 60rem; margin: 0 auto clamp(40px, 7vw, 80px); padding: 0 var(--gutter); }

.section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.4rem + 4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
}
.section-title em { font-style: italic; color: var(--gold); }

.section-sub { margin: 1.4rem auto 0; max-width: 32rem; color: var(--ink-soft); }

.star-rule {
  display: flex; align-items: center; gap: 14px;
  color: var(--gold); font-size: .8rem; line-height: 1;
  margin: 1.8rem 0;
}
.star-rule span { height: 1px; flex: 1; max-width: 90px; background: currentColor; opacity: .55; }

/* photo placeholder (drop an <img> inside .photo to replace) */
.photo {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(179,138,69,.10) 0 1px, transparent 1px 14px),
    linear-gradient(160deg, var(--lime-200), var(--sand));
}
.photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}
.photo__ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .35rem;
  text-align: center; padding: 1rem;
  font: 400 .68rem/1.4 var(--f-label); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(14,26,46,.55);
}
.photo__ph b {
  font: italic 400 1.35rem/1.1 var(--f-display);
  letter-spacing: 0; text-transform: none; color: var(--navy-700);
}
.photo__ph::before {
  content: ""; justify-self: center; width: 30px; height: 22px; margin-bottom: .4rem;
  border: 1.5px solid currentColor; border-radius: 4px;
  background: radial-gradient(circle at 50% 55%, transparent 5px, currentColor 5.5px, currentColor 6.5px, transparent 7px);
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* guest (plus-one) toggles */
html:not(.has-guest) [data-when="duo"] { display: none !important; }
html.has-guest [data-when="solo"] { display: none !important; }

/* ---------- NAV ---------- */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 var(--gutter);
  color: var(--lime-50);
  transition: background .4s, backdrop-filter .4s, box-shadow .4s;
}
.nav.is-solid {
  background: rgba(11, 21, 38, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(214,178,107,.18);
}
.nav__mark {
  font: italic 400 1.35rem/1 var(--f-display);
  text-decoration: none; letter-spacing: .02em;
}
.nav__mark span { font-family: var(--f-script); font-style: normal; color: var(--gold-300); margin: 0 .12em; font-size: 1.15em; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); }
.nav__links a {
  font: 500 .7rem/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none; opacity: .85; transition: opacity .2s, color .2s;
}
.nav__links a:hover { opacity: 1; color: var(--gold-100); }
.nav__cta {
  padding: .85em 1.2em; border: 1px solid rgba(214,178,107,.6); border-radius: 999px;
}
.nav__cta:hover { background: rgba(214,178,107,.12); }

@media (max-width: 520px) {
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ---------- HERO: the envelope ----------
   A sticky stage the height of one screen inside a tall section. Scrolling through the section drives the
   opening (script.js): the seal cracks, the flap swings open, the std slides out and lifts toward you.
   Every envelope layer (.lay) is the same box, centred on the stage, so one transform moves them together. */

.hero {
  position: relative;
  height: 330vh; height: 330svh;
  background: var(--navy-950);
  color: var(--lime-50);
}
.hero__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  /* envelope + card sizes; script.js overwrites these to fit the screen */
  --ew: min(86vw, 620px); --eh: calc(var(--ew) / 1.4);
  --cw: min(90vw, 800px); --ch: calc(var(--cw) / 1.43);
}

/* the table: navy linen under a warm pool of lamplight */
.hero__table {
  position: absolute; inset: -3%;
  background:
    radial-gradient(ellipse 46% 40% at 50% 52%, rgba(239,217,166,.17), rgba(239,217,166,.05) 55%, rgba(239,217,166,0) 80%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 95% 85% at 50% 50%, #243A60 0%, #172841 42%, #0D1829 78%, #080F1C 100%);
  animation: hero-fade 1.4s ease-out both;
}
.hero__table::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grain); background-size: 220px 220px;
  opacity: .28; mix-blend-mode: overlay;
}
.hero__table::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, rgba(4,9,18,.62) 100%);
}

/* keepsakes on the table (placed by script.js) */
.hero__props { position: absolute; inset: 0; pointer-events: none; }
.prop { position: absolute; left: 0; top: 0; translate: -50% -50%; animation: prop-in 1.6s var(--ease-out) both; }
.prop__in { will-change: transform; }
.prop svg { display: block; width: 100%; height: auto; overflow: visible; }
.prop--shadow svg { filter: drop-shadow(0 .6vmin .9vmin rgba(3,8,18,.5)) drop-shadow(0 .1vmin .15vmin rgba(3,8,18,.4)); }
@keyframes prop-in { from { opacity: 0; translate: -50% calc(-50% + 2.5vmin); } to { opacity: 1; translate: -50% -50%; } }

/* dims the table once the card is presented, like a camera racking focus */
.hero__dim { position: absolute; inset: 0; background: #070D19; opacity: 0; pointer-events: none; }

.hero__drop {
  position: absolute; inset: 0; z-index: 2;
  transform-origin: 50% 55%;
  animation: env-drop 1.8s .2s cubic-bezier(.2, .75, .25, 1) both;
}
@keyframes env-drop {
  0%   { opacity: 0; transform: translate3d(0, -18vh, 0) rotate(-11deg) scale(1.16); }
  40%  { opacity: 1; }
  76%  { transform: translate3d(0, .6vh, 0) rotate(.6deg) scale(.994); }
  100% { opacity: 1; transform: none; }
}
@keyframes hero-fade { from { opacity: 0; } }

.scene { position: absolute; inset: 0; transform-origin: 50% 55%; will-change: transform; }

.lay {
  position: absolute; left: 50%; top: 50%;
  width: var(--ew); height: var(--eh);
  margin: calc(var(--eh) / -2) 0 0 calc(var(--ew) / -2);
  will-change: transform;
}
.lay > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.env-shadow {
  z-index: 0;
  border-radius: .6%;
  box-shadow: 0 1px 2px rgba(2,6,14,.55), 0 1.2vmin 2.4vmin -.4vmin rgba(2,6,14,.55), 0 4vmin 9vmin -1vmin rgba(2,6,14,.55);
  animation: hero-fade 1.2s .9s ease-in both;
}
.env-back   { z-index: 1; }
.env-pocket { z-index: 3; container-type: inline-size; }
.env-flap   { z-index: 4; container-type: inline-size; }
.env-flap.is-over { z-index: 1; }
.env-chips  { z-index: 6; pointer-events: none; }

.env-flap__out, .env-flap__in { position: absolute; inset: 0; }
.env-flap__in, .env-flap.is-over .env-flap__out { visibility: hidden; }
.env-flap.is-over .env-flap__in { visibility: visible; }
.env-flap__out > svg, .env-flap__in > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* hand-lettered on the back of the envelope */
.env-pocket__for {
  position: absolute; left: 0; right: 0; top: 77%; margin: 0;
  text-align: center;
  font: 400 5.6cqw/1 var(--f-script);
  color: #22375E;
  opacity: .88;
  transform: rotate(-3deg);
  text-shadow: 0 0 .06cqw rgba(34,55,94,.7);
}
/* return address, gold-foil stamped on the flap */
.env-flap__return {
  position: absolute; left: 0; right: 0; top: 10.5%; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqw;
  color: #A47C3C;
  text-shadow: 0 .08cqw 0 rgba(255,251,240,.9), 0 -.05cqw 0 rgba(90,60,20,.35);
}
.env-flap__return em { font: italic 400 2.9cqw/1 var(--f-display); letter-spacing: .02em; }
.env-flap__return span { font: 500 1.3cqw/1 var(--f-label); letter-spacing: .42em; text-transform: uppercase; padding-left: .42em; }

/* ---- the gold wax seal (two halves: one rides the flap, one stays on the pocket) ---- */
.seal { position: absolute; aspect-ratio: 1; pointer-events: none; will-change: transform; }
.seal > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal__glint {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: var(--seal-mask) center / 100% 100% no-repeat;
  mask: var(--seal-mask) center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
  opacity: var(--glint, .8);
  transition: opacity .4s;
}
.seal__glint > i { /* a pool of light twice the seal's size, slid around by script.js */
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255,251,236,.95) 0, rgba(255,238,190,.45) 7%, rgba(255,238,190,0) 18%);
  transform: translate3d(-8%, -11%, 0);
  will-change: transform;
}
.seal__glint::after { /* one slow gleam across the wax once the envelope lands */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 38%, rgba(255,249,228,.85) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 120% 0;
  mix-blend-mode: overlay;
  animation: seal-gleam 1.5s 1.75s ease-in-out both;
}
@keyframes seal-gleam { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.seal__crack path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.seal__shade { /* darkens the flap's half of the seal as the flap tips away from the light */
  position: absolute; inset: 0; background: #0B1526;
  -webkit-mask: var(--seal-mask) center / 100% 100% no-repeat;
  mask: var(--seal-mask) center / 100% 100% no-repeat;
  opacity: var(--shade-out, 0);
}

.seal-btn {
  position: absolute; z-index: 2; aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seal-btn:focus-visible { outline: 2px solid var(--gold-100); outline-offset: 6px; }
.seal-btn__ring {
  position: absolute; inset: 11%;
  border-radius: 50%;
  border: 1px solid rgba(239,217,166,.9);
  opacity: 0;
  animation: seal-ring 2.8s 2.6s ease-out infinite;
}
@keyframes seal-ring { 0% { opacity: 0; transform: scale(1); } 15% { opacity: .9; } 100% { opacity: 0; transform: scale(1.55); } }
.seal-btn:hover .seal-btn__ring { animation-duration: 1.6s; }
.hero__stage:has(.seal-btn:hover) { --glint: 1; }
.hero__stage.is-opening .seal-btn__ring { animation: none; opacity: 0; }

/* chips of wax that pop off when the seal breaks */
.chip {
  position: absolute; left: 0; top: 0;
  width: 1.5%; aspect-ratio: 1.15;
  background: linear-gradient(140deg, #FBE6A6 0%, #D9AE55 35%, #9A6F28 70%, #5E3F12 100%);
  opacity: 0;
  will-change: transform, opacity;
}

/* ---- the save-the-date card (.std) ---- */
.std {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: var(--cw); height: var(--ch);
  margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  container-type: size;
  border-radius: .45cqw;
  color: var(--navy-900);
  background:
    radial-gradient(ellipse 120% 95% at 28% 18%, #FFFDF8 0%, #F8F2E8 55%, #F0E8D9 100%);
  box-shadow: 0 0 0 .13cqw #C6A15A, 0 .15cqw .4cqw rgba(30,20,6,.22);
  will-change: transform;
}
.std.is-out { z-index: 5; }
.std::before { /* cotton paper tooth */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--grain); background-size: 220px 220px;
  opacity: .16; mix-blend-mode: multiply;
}
.std::after { /* lift shadow, faded in by script.js as the card leaves the envelope */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 2.4cqw 4cqw -1cqw rgba(3,8,18,.5), 0 7cqw 12cqw -3cqw rgba(3,8,18,.55);
  opacity: var(--lift, 0);
}
.std__frame { position: absolute; inset: 3.3cqw; border: max(1px, .15cqw) solid #BC9651; pointer-events: none; }
.std__frame::before { content: ""; position: absolute; inset: .75cqw; border: max(.5px, .07cqw) solid rgba(188,150,81,.8); }
.std__frame i {
  position: absolute; width: 6.2cqw; aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23B38A45' stroke-width='.9'%3E%3Cpath d='M0 13A13 13 0 0 1 13 0M0 19A19 19 0 0 1 19 0M0 25A25 25 0 0 1 25 0'/%3E%3Cpath d='M3 3L11 11M0 7.5L6 6L7.5 0' stroke-width='.7'/%3E%3Cpath d='M17 15.5L19 17.5L17 19.5L15 17.5Z' fill='%23B38A45' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  top: .75cqw; left: .75cqw;
}
.std__frame i:nth-child(2) { left: auto; right: .75cqw; transform: scaleX(-1); }
.std__frame i:nth-child(3) { top: auto; bottom: .75cqw; transform: scaleY(-1); }
.std__frame i:nth-child(4) { top: auto; left: auto; bottom: .75cqw; right: .75cqw; transform: scale(-1); }

.std__body {
  position: absolute; inset: 5cqw 6cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.std__body > p { margin: 0; }
.std__eyebrow {
  font: 500 max(9px, 1.4cqw)/1 var(--f-label);
  letter-spacing: .55em; padding-left: .55em; text-transform: uppercase;
}
.std__names {
  margin: 3.2cqw 0 0;
  display: flex; align-items: baseline; justify-content: center; gap: .15em;
  white-space: nowrap;
  font: italic 400 9.2cqw/1 var(--f-display);
  letter-spacing: -.012em;
  /* letterpress: ink pressed into the cotton */
  text-shadow: 0 .06cqw 0 rgba(255,255,255,.75), 0 -.03cqw 0 rgba(14,26,46,.25);
}
.std__amp { font: 400 1.22em/1 var(--f-script); text-shadow: none; padding: 0 .06em; margin: 0 -.02em; }
.std__rule { display: flex; align-items: center; gap: 1.8cqw; margin: 2.6cqw 0 !important; font-size: max(9px, 1.25cqw); line-height: 1; }
.std__rule span { width: 9cqw; height: max(1px, .1cqw); background: #BC9651; opacity: .8; }
.std__rule b { font-weight: 400; }
.std__date {
  font: 500 max(9.5px, 1.72cqw)/1.5 var(--f-label);
  letter-spacing: .3em; padding-left: .3em; text-transform: uppercase;
  text-wrap: balance;
}
@container (max-width: 480px) {
  .std__date { letter-spacing: .16em; padding-left: .16em; }
  .std__eyebrow { letter-spacing: .42em; padding-left: .42em; }
}
.std__date i { font-style: normal; color: #B38A45; margin: 0 .2em; }
.std__place { margin-top: 1cqw !important; font: italic 400 max(13px, 3cqw)/1.25 var(--f-body); color: var(--ink-soft); }
.std__note {
  margin-top: 2.4cqw !important;
  font: 500 max(8.5px, 1.15cqw)/1 var(--f-label);
  letter-spacing: .34em; padding-left: .34em; text-transform: uppercase;
  color: rgba(14,26,46,.55);
}
.std__coords {
  margin-top: 3.4cqw !important;
  font: 500 max(8px, 1cqw)/1 var(--f-label);
  letter-spacing: .22em; color: rgba(140,104,48,.9);
  white-space: nowrap;
}
.std__coords b { font-weight: 400; margin: 0 .6em; }

/* gold foil: a metallic gradient clipped to the letters; script.js slides it with the pointer */
.foil {
  background: linear-gradient(100deg, #7A5518 0%, #B48B45 16%, #DBBE7B 28%, #9C742F 42%, #C9A45C 58%, #86601F 76%, #BD984F 100%);
  background-size: 280% 100%;
  background-position: var(--sheen, 40%) 50%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero__hint {
  position: absolute; z-index: 4; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  transform: translateX(-50%);
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 500 .64rem/1 var(--f-label); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase;
  color: var(--gold-100);
  white-space: nowrap;
  pointer-events: none;
}
.hero__hint > * { animation: hero-rise 1.2s 2.4s var(--ease-out) both; }
/* three fine chevrons that light up one after another, top to bottom, like a cascade pointing down */
.chevrons { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.chevrons svg {
  display: block; width: 18px; height: 9px; margin-top: -1px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: .9;
  animation: chevron-fall 1.8s ease-in-out infinite;
}
.chevrons svg:nth-child(2) { animation-delay: .2s; }
.chevrons svg:nth-child(3) { animation-delay: .4s; }
.hero__hint-mobile { display: none; }
@media (max-width: 700px) {
  .hero__hint {
    z-index: 10;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .2em;
    padding-left: .2em;
    color: var(--lime-50);
    text-shadow: 0 2px 6px rgba(3, 8, 18, .95), 0 0 16px rgba(3, 8, 18, .8);
  }
  .hero__hint-desktop { display: none; }
  .hero__hint-mobile { display: inline; animation: hero-rise .8s .4s var(--ease-out) both; }
  .hero__chevrons { animation-delay: .7s; color: var(--gold-300); filter: drop-shadow(0 1px 3px rgba(3, 8, 18, .95)) drop-shadow(0 0 8px rgba(3, 8, 18, .7)); }
  .hero__chevrons svg { width: 26px; height: 13px; stroke-width: 1.75; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes chevron-fall { 0%, 100% { opacity: .15; translate: 0 -2px; } 40% { opacity: 1; translate: 0 2px; } }

/* reduced motion: no scroll sequence, the card is simply shown lifted out of its envelope */
.hero.is-static { height: auto; }
.hero.is-static .hero__stage { position: relative; }

/* ---------- THE DATE ---------- */

.date {
  position: relative;
  background: var(--lime-100);
  padding: clamp(56px, 10vw, 140px) var(--gutter) clamp(80px, 12vw, 160px);
}
.date::before, .windows::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .22; mix-blend-mode: multiply;
}
.date__inner {
  position: relative;
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 8vw, 120px); align-items: center;
}

.arch { position: relative; margin: 0; }
.arch__photo {
  aspect-ratio: 4 / 5.4;
  border-radius: 999px 999px 4px 4px;
  box-shadow: 0 30px 60px -30px rgba(14,26,46,.45);
}
/* gilt frame (or floral garland) image: its viewBox (-100 -100 600 740) overhangs the 400 × 540 photo on every side */
.arch__overlay {
  position: absolute; z-index: 2;
  left: -25%; top: -18.519%; width: 150%; height: 137.037%;
  max-width: none; pointer-events: none;
}

.date__copy { text-align: left; }
.date__day {
  margin: 0;
  font: italic 400 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1 var(--f-display);
  color: var(--ink-soft);
}
.date__num {
  margin: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(8rem, 5rem + 12vw, 15rem);
  line-height: .82; letter-spacing: -.05em;
  font-variation-settings: "opsz" 96;
  color: var(--navy-900);
}
.date__month {
  margin: .4rem 0 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1.1;
  color: var(--gold);
}
.date .star-rule { justify-content: flex-start; }
.date__place {
  margin: 0;
  font: 500 .9rem/1.4 var(--f-label); letter-spacing: .36em; text-transform: uppercase;
}
.date__note { margin: .5rem 0 0; color: var(--ink-soft); font-style: italic; }
.date__venue {
  margin: 2.2rem 0 0;
  font: 400 .72rem/1.5 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft);
}

@media (max-width: 760px) {
  .date__inner { grid-template-columns: 1fr; }
  .arch { width: min(72%, 320px); margin: 0 auto; }
  .date__copy { text-align: center; }
  .date .star-rule { justify-content: center; }
}

/* ---------- JOURNEY (Our story) ---------- */

.journey {
  position: relative;
  height: 560vh;
  background: var(--navy-950);
}
.journey__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: var(--navy-900);
  --rail: 17%;
}
.journey__sky { position: absolute; inset: 0; }
.journey__sky--morning {
  background: linear-gradient(180deg, #7FA3CB 0%, #AFC4DA 45%, #E6DDD0 80%, #F3DFC2 100%);
}
.journey__sky--day {
  opacity: 0;
  background: linear-gradient(180deg, #5F8FC4 0%, #93B7DA 45%, #CFDDE8 78%, #EDE7DA 100%);
}
.journey__sky--sunset {
  opacity: 0;
  background: linear-gradient(180deg, #56769F 0%, #93A5BC 32%, #D9B98E 62%, #EFC47E 82%, #F6DCA4 100%);
}
.journey__sun {
  position: absolute; left: 0; top: 0;
  width: min(34vh, 260px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFBEF 0%, #FFF4D6 13%, rgba(255,240,200,.55) 22%, rgba(255,240,200,.18) 42%, rgba(255,240,200,0) 68%);
  will-change: transform;
}
.journey__sun i { /* low-sun warmth at sunrise and sunset */
  position: absolute; inset: -10%; border-radius: 50%;
  background: radial-gradient(circle, #FFE3A6 0%, #F7C774 12%, rgba(240,165,85,.5) 26%, rgba(240,165,85,0) 62%);
}

.journey__layer { position: absolute; left: 0; will-change: transform; }
.journey__layer img { display: block; height: 100%; max-width: none; }
.journey__fog { position: absolute; left: 0; top: 0; animation: fog 16s ease-in-out infinite alternate; will-change: transform; }
.journey__layer--far  { bottom: var(--rail); height: 52%; }
.journey__layer--mid  { bottom: calc(var(--rail) - .5%); height: 64%; }
.journey__layer--fore { bottom: 0; height: 100%; z-index: 3; }

/* scene colors live in SCENE_CSS in script.js (layers are rendered as images) */
@keyframes fog { to { transform: translateX(80px); } }

.journey__track {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--rail);
  background: linear-gradient(180deg, #CDBEA0 0 16px, #4E6288 16px, #43577C 40%, #34466B 100%); /* gravel bed, then the bank */
  z-index: 1;
}
.journey__track::before { /* rail */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(180deg, var(--gold-300), #6E5A33);
}
.journey__ties {
  position: absolute; left: 0; right: 0; top: 4px; height: 9px;
  background: repeating-linear-gradient(90deg, #4A3F30 0 22px, transparent 22px 58px);
}

.journey__train {
  position: absolute; z-index: 2;
  right: 36vw; bottom: calc(var(--rail) - 1px); /* wheels rest on the rail */
  height: 15%; aspect-ratio: 860 / 160;
  container-type: size;
}
.journey__train svg { width: 100%; height: 100%; display: block; overflow: visible; }
.journey__train .wheel { transform-box: fill-box; transform-origin: center; transform: rotate(var(--turn, 0deg)); }
.journey__train .wheel-s { transform-box: fill-box; transform-origin: center; transform: rotate(var(--turn-s, 0deg)); }

/* steam from the stack, drifting back over the train */
.journey__smoke { position: absolute; left: 91.3%; top: 14%; width: 0; height: 0; pointer-events: none; }
.journey__smoke i {
  position: absolute; left: -9cqh; top: -9cqh; width: 18cqh; height: 18cqh; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(244,242,238,.6) 42%, rgba(244,242,238,0) 70%);
  opacity: 0; animation: puff 3.4s linear infinite;
}
.journey__smoke i:nth-child(2) { animation-delay: -.49s; }
.journey__smoke i:nth-child(3) { animation-delay: -.97s; }
.journey__smoke i:nth-child(4) { animation-delay: -1.46s; }
.journey__smoke i:nth-child(5) { animation-delay: -1.94s; }
.journey__smoke i:nth-child(6) { animation-delay: -2.43s; }
.journey__smoke i:nth-child(7) { animation-delay: -2.91s; }
@keyframes puff {
  0%   { transform: translate(0, 0) scale(.35); opacity: 0; }
  8%   { opacity: .9; }
  100% { transform: translate(-170cqh, -55cqh) scale(3.4); opacity: 0; }
}
.journey__train.is-moving svg { animation: bob .18s linear infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }


.journey__ui {
  position: absolute; z-index: 5; inset: 0 0 auto;
  padding: clamp(84px, 13vh, 120px) var(--gutter) 0;
  max-width: 1200px; margin: 0 auto;
}
.journey__ui .eyebrow { color: #8A672C; margin-bottom: 1rem; }

/* Art Deco story card: cream paper, notched corners, double gold hairline (echoes the engine's "925" panel) */
.journey__ui { filter: drop-shadow(0 18px 30px rgba(14, 26, 46, .18)); }
.story-card {
  --n: 16px;
  max-width: 36rem;
  padding: 1px;
  background: var(--gold);
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n));
}
.story-card__paper {
  --n: 15.6px;
  position: relative;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px) clamp(22px, 3vw, 30px);
  background: linear-gradient(170deg, #FAF5EA, #F1E8D6);
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n));
}
.story-card__paper::before, .story-card__paper::after {
  content: ""; position: absolute; pointer-events: none;
  clip-path: polygon(var(--m) 0, calc(100% - var(--m)) 0, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0 calc(100% - var(--m)), 0 var(--m));
}
.story-card__paper::before { inset: 6px; --m: 11px; background: rgba(179, 138, 69, .7); }
.story-card__paper::after  { inset: 6.8px; --m: 10.6px; background: linear-gradient(170deg, #FAF5EA, #F1E8D6); }
.story-card__paper > * { position: relative; z-index: 1; }

.route {
  position: relative;
  list-style: none; margin: 0 0 clamp(24px, 5vh, 48px); padding: 0;
  display: flex; justify-content: space-between;
  max-width: 560px;
}
.route::before { /* track line */
  content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(31,50,82,.45) 0 6px, transparent 6px 10px);
}
.route__stop {
  position: relative; width: 11px;
  display: flex; flex-direction: column; align-items: center;
}
.route__stop::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--lime-50); border: 1.5px solid var(--gold);
  transition: background .4s, transform .4s;
}
.route__stop span {
  position: absolute; top: 20px; white-space: nowrap;
  font: 500 .62rem/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(14,26,46,.6); transition: color .4s;
}
.route__stop:first-child span { left: 0; }
.route__stop:nth-child(4) span { right: 0; }
.route__stop.is-past::before, .route__stop.is-active::before { background: var(--gold); }
.route__stop.is-active::before { transform: scale(1.35); }
.route__stop.is-active span { color: var(--navy-900); }
.route__marker {
  position: absolute; top: 1px; left: 0;
  width: 18px; height: 9px; margin-left: -4px;
  border-radius: 4px 7px 2px 2px;
  background: var(--navy-800);
  box-shadow: 0 0 0 2px #F6EFDF;
}

.chapters { position: relative; display: grid; } /* chapters share one cell, so the card fits the tallest */
.chapter {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
  pointer-events: none;
}
.chapter.is-active { opacity: 1; transform: none; pointer-events: auto; }
.chapter__place {
  margin: 0 0 .7rem;
  font: 500 .7rem/1.3 var(--f-label); letter-spacing: .3em; text-transform: uppercase;
  color: #8A672C; /* deeper gold for contrast against the daytime sky */
}
.chapter__title {
  margin: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
  font-weight: 500;
  line-height: 1.04; letter-spacing: -.01em;
  color: var(--navy-900);
}
.chapter__title em { color: #7A5A24; } /* deep bronze */
.chapter__text {
  margin: 1rem 0 0; max-width: 29rem;
  color: var(--navy-700);
}

.journey__hint {
  position: absolute; z-index: 5; left: 50%; bottom: calc(var(--rail) / 2);
  transform: translate(-50%, 50%);
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 500 clamp(.8rem, .7rem + .3vw, .95rem)/1 var(--f-label); letter-spacing: .28em; padding-left: .28em; text-transform: uppercase; white-space: nowrap;
  color: var(--lime-50);
  text-shadow: 0 1px 3px rgba(11, 21, 38, .55);
}
.journey__hint .chevrons { color: var(--gold-300); filter: drop-shadow(0 1px 2px rgba(11, 21, 38, .45)); }
.journey__hint .chevrons svg { width: 22px; height: 11px; stroke-width: 1.75; }

@media (max-width: 900px) {
  .journey__train { right: 12vw; }
}
@media (max-width: 600px) {
  .route__stop span { display: none; }
  .route__stop.is-active span { display: block; left: 50%; right: auto; transform: translateX(-50%); }
  .route__stop:first-child.is-active span { left: 0; transform: none; }
  .route__stop:nth-child(4).is-active span { left: auto; right: 0; transform: none; }
  .journey__train { height: 13.5%; right: 3vw; }
  .journey__stage { --rail: 15%; }
}

/* ---------- WINDOWS (photos) ---------- */

.windows {
  position: relative;
  background: var(--lime-50);
  padding: clamp(80px, 12vw, 150px) 0 clamp(80px, 12vw, 150px);
}
.carriage { position: relative; padding: 0 var(--gutter); will-change: transform; }
.carriage__body {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px) clamp(40px, 5vw, 60px);
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 42px), var(--gold) calc(100% - 42px) calc(100% - 40.5px), var(--navy-800) calc(100% - 40.5px) calc(100% - 24px), var(--gold) calc(100% - 24px) calc(100% - 22.5px), transparent calc(100% - 22.5px)),
    linear-gradient(180deg, #F7F1E5, var(--lime-200));
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 40px 70px -40px rgba(14,26,46,.45), 0 0 0 1px rgba(179,138,69,.35);
}
.carriage__body::before { /* roofline */
  content: ""; position: absolute; left: 18px; right: 18px; top: -14px; height: 14px;
  background: var(--navy-700); border-radius: 14px 14px 0 0;
}
.window { margin: 0; }
.window__photo--walking { object-position: 40% center; }
.window__photo--full-length { object-position: center bottom; }
.window__glass {
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  border: 7px solid var(--navy-800);
  box-shadow: inset 0 0 0 1.5px var(--gold-300), 0 12px 24px -14px rgba(14,26,46,.6);
}
.window__glass::after { /* glass sheen */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.28) 0 18%, transparent 18% 30%, rgba(255,255,255,.12) 30% 36%, transparent 36%);
}
@media (max-width: 860px) {
  .carriage { padding: 0; }
  .carriage__body {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(62vw, 260px);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    padding-left: var(--gutter); padding-right: var(--gutter);
    border-radius: 0; box-shadow: 0 0 0 1px rgba(179,138,69,.35);
    scrollbar-width: none;
  }
  .carriage__body::-webkit-scrollbar { display: none; }
  .carriage__body::before { display: none; }
  .window { scroll-snap-align: start; }
}

/* ---------- RSVP: reply card ---------- */

.rsvp {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, var(--navy-800), var(--navy-900) 60%, var(--navy-950));
  color: var(--lime-50);
  padding: clamp(90px, 12vw, 160px) var(--gutter) clamp(100px, 14vw, 180px);
}
.rsvp__topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rsvp__topo path { fill: none; stroke: var(--gold-300); stroke-width: 1; opacity: .11; }
.section-head--light .section-title { color: var(--lime-50); }
.section-head--light .section-title em { color: var(--gold-300); }
.section-head--light .eyebrow { color: var(--gold-300); }
.section-head--light .section-sub { color: rgba(245,239,227,.72); }
.rsvp .section-head { position: relative; }

.card-wrap { position: relative; max-width: 600px; margin: 0 auto; }

.card {
  position: relative;
  padding: clamp(40px, 7vw, 64px) clamp(24px, 7vw, 64px) clamp(36px, 6vw, 56px);
  text-align: center;
  color: var(--navy-900);
  background:
    var(--grain),
    linear-gradient(170deg, var(--lime-50), var(--lime-100));
  background-blend-mode: multiply, normal;
  border-radius: 4px;
  box-shadow: 0 40px 60px -20px rgba(0,0,0,.45);
}
/* engraved double border */
.card::before {
  content: ""; position: absolute; inset: clamp(10px, 2vw, 16px);
  border: 1px solid rgba(179,138,69,.55);
  outline: 1px solid rgba(179,138,69,.3); outline-offset: 4px;
  pointer-events: none;
}

.card__script {
  margin: 0;
  font: 400 clamp(2.6rem, 1.8rem + 3vw, 3.6rem)/1.1 var(--f-script);
  color: var(--navy-900);
}
.card__date { margin: .6rem 0 0; font-style: italic; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.card .star-rule { justify-content: center; margin: 1.6rem 0 2rem; }

.card__fields {
  border: 0; margin: 0; padding: 0;
  display: grid; gap: 22px;
  text-align: left;
}
.field .label { display: block; font-size: .62rem; letter-spacing: .26em; color: var(--ink-soft); margin-bottom: 6px; }
.field input {
  width: 100%;
  padding: 8px 0 9px;
  border: 0; border-bottom: 1.5px solid rgba(14,26,46,.35);
  border-radius: 0;
  background: transparent;
  font: 400 1.3rem/1.2 var(--f-display);
  color: var(--navy-900);
  transition: border-color .25s;
}
.field input:focus { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1.5px 0 var(--gold); }
.field input:focus-visible { outline: none; }
.field input[aria-invalid="true"] { border-bottom-color: #9A3B2E; }
.field input[readonly] { border-bottom-style: dotted; }
.field__error { margin: 6px 0 0; min-height: 1.1em; font: 500 .72rem/1.3 var(--f-label); letter-spacing: .04em; color: #9A3B2E; }
.field__error:empty { min-height: 0; margin: 0; }
.field__hint { margin: 6px 0 0; font-size: .9rem; font-style: italic; color: var(--ink-soft); }

.card__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 34px; }
.btn {
  appearance: none; cursor: pointer;
  padding: 1.05em 2em;
  border: 0; border-radius: 999px;
  background: var(--navy-900); color: var(--gold-100);
  font: 500 .74rem/1 var(--f-label); letter-spacing: .28em; text-transform: uppercase;
  box-shadow: 0 0 0 1px var(--navy-900), 0 0 0 3px var(--lime-50), 0 0 0 4px var(--gold);
  transition: transform .2s, background .2s;
}
.btn:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 6px; }
.btn-link {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 .68rem/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase;
  color: var(--navy-700); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold);
}
.card__saved { margin: 0; font-style: italic; color: var(--ink-soft); max-width: 26rem; }
.card__saved:empty { display: none; }
.card__saved::before {
  content: "Thank you"; display: block; margin-bottom: .3rem;
  font: 400 2.2rem/1.1 var(--f-script); font-style: normal; color: var(--navy-900);
}
.card.is-saved [data-submit] { display: none; }

/* ---------- FOOTER ---------- */

.footer {
  background: var(--navy-950);
  color: var(--lime-50);
  text-align: center;
  padding: clamp(64px, 9vw, 110px) var(--gutter) calc(clamp(48px, 7vw, 80px) + env(safe-area-inset-bottom));
}
.footer__mono { margin: 0; font: italic 400 clamp(2rem, 1.2rem + 3vw, 3.2rem)/1 var(--f-display); }
.footer__mono span { font-family: var(--f-script); font-style: normal; color: var(--gold-300); }
.star-rule--light { justify-content: center; }
.footer__line { margin: 0; font: 500 .66rem/1.5 var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: rgba(245,239,227,.6); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}