/* V3 "Maison" — petrol-teal velvet, copper foil, oxblood wax, blush-ivory paper.
   Layout: a single 480px invitation column; desktop floats it on dark velvet. */
:root {
  --velvet: #0f2b31;
  --velvet-deep: #06141a;
  --velvet-lit: #1e4a52;
  --paper: #fcf6f1;
  --paper-2: #f4e6dc;
  --ink: #2a2220;
  --ink-soft: #77675c;
  --gold: #b0693c;
  --gold-soft: #e3a47a;
  --hair: rgba(176, 105, 60, .45);
  --wax: #7a1f28;

  --foil: linear-gradient(105deg, #6b3217 0%, #b0693c 16%, #f8d4b4 30%, #c47748 42%, #83401e 56%, #efbb94 72%, #9a532c 86%, #6b3217 100%);

  --display: "Pinyon Script", "Snell Roundhand", cursive;
  --caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Cormorant Garamond", Garamond, Georgia, serif;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --w: 480px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 0%, #153a41 0%, var(--velvet-deep) 70%) fixed, var(--velvet-deep);
  color: var(--ink);
  font: 400 19px/1.65 var(--body);
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; height: 100svh; }
h1, h2, h3, p { margin: 0; }
::selection { background: rgba(227, 164, 122, .35); }

.stage {
  max-width: var(--w);
  margin: 0 auto;
  background: var(--paper);
  min-height: 100svh;
  position: relative;
  overflow-x: clip;
  box-shadow: 0 0 0 1px rgba(227, 164, 122, .14), 0 40px 140px rgba(0, 0, 0, .55);
}

/* paper grain over everything */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .09;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.script { font-family: var(--display); font-weight: 400; line-height: 1.05; }
.label { font: 500 11px/1.6 var(--caps); letter-spacing: .34em; text-transform: uppercase; }
.gold-soft { color: var(--gold-soft); }
.ink-soft { color: var(--ink-soft); }
.amp, .arch-mono small { font-family: var(--body); font-style: italic; font-weight: 300; }
.foil {
  background: var(--foil);
  background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: foil 10s ease-in-out infinite alternate;
  /* script swashes overhang their box; pad so the foil covers them */
  padding: .2em .25em; margin: -.2em -.25em;
}
@keyframes foil { to { background-position: 100% 0; } }

/* ---------- ornaments ---------- */
.corner { position: absolute; width: 180px; height: 135px; color: var(--gold); opacity: .85; pointer-events: none; }
.corner.small { width: 100px; height: 75px; opacity: .55; }
.corner.tl { top: 10px; left: 6px; transform: scaleY(-1); }
.corner.br { bottom: 10px; right: 6px; transform: scaleX(-1); }
.corner.tr { top: 10px; right: 6px; transform: scale(-1, -1); }
.corner.bl { bottom: 10px; left: 6px; }
/* corner bouquets sway gently from where their stems start (rotating the inner <use>, so the flips on the <svg> stay put) */
.corner use { transform-box: view-box; transform-origin: 2% 98%; animation: sway 6.5s ease-in-out infinite alternate; }
.corner.tr use { animation-duration: 7.3s; animation-delay: -2s; }
.corner.br use { animation-duration: 6.9s; animation-delay: -3.5s; }
.corner.bl use { animation-duration: 7.7s; animation-delay: -1.2s; }
@keyframes sway { from { transform: rotate(-3.5deg); } to { transform: rotate(4deg); } }
.cover-orn { color: var(--gold-soft); opacity: .5; width: 160px; height: 120px; }
.cover .corner.tl { top: 24px; left: 22px; }
.cover .corner.br { bottom: 24px; right: 22px; }
.sec > * { position: relative; }
.sec > .corner { position: absolute; }
#hero .corner { width: 120px; height: 90px; }
.crest { display: block; width: 190px; height: 71px; margin: 0 auto 18px; color: var(--gold); --d: .2s; }
.petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.arch-garland { position: absolute; left: 50%; top: -46px; width: 240px; height: 90px; margin-left: -120px; z-index: 2; color: var(--gold); --d: .4s; }
.card-sprig { position: absolute; width: 60px; height: 45px; color: var(--gold); opacity: .75; pointer-events: none; --d: .5s; }
.card-sprig.tl { top: 12px; left: 12px; transform: scaleY(-1); }
.card-sprig.tr { top: 12px; right: 12px; transform: scale(-1, -1); }
.card-sprig.bl { bottom: 12px; left: 12px; }
.card-sprig.br { bottom: 12px; right: 12px; transform: scaleX(-1); }
.wreath { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; color: var(--gold-soft); --d: .6s; }
.divider { display: block; width: 220px; height: 34px; margin: 14px auto 28px; color: var(--gold); }

/* self-drawing strokes (inherited into <use> shadow trees) */
.draw, .arch-line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-smooth) var(--d, 0s); }
.draw.in, .arch-line.in path { stroke-dashoffset: 0; }

/* ---------- reveal ---------- */
.rv {
  opacity: 0; transform: translateY(26px); filter: blur(6px);
  transition: opacity 1.1s var(--ease-smooth) var(--d, 0s), transform 1.4s var(--ease-smooth) var(--d, 0s), filter 1.1s var(--ease-smooth) var(--d, 0s);
}
.rv.in { opacity: 1; transform: none; filter: none; }

/* =================== COVER =================== */
.cover {
  position: fixed; inset: 0; z-index: 30;
  max-width: var(--w); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  padding: 40px 24px;
  background: radial-gradient(ellipse 90% 60% at 50% 42%, var(--velvet-lit) 0%, var(--velvet) 48%, var(--velvet-deep) 100%);
  overflow: hidden;
  transition: opacity .9s var(--ease-out), visibility 0s linear .9s;
}
.cover::before { /* hairline frame */
  content: ""; position: absolute; inset: 16px; pointer-events: none;
  border: 1px solid rgba(227, 164, 122, .28);
  outline: 1px solid rgba(227, 164, 122, .14); outline-offset: 5px;
}
.cover.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cover-top { position: relative; }
.cover-names { display: inline-block; margin-top: 10px; font-size: 46px; }
.cover-names .amp { font-size: .62em; }

.envelope {
  position: relative; z-index: 3; /* above the hint, so the zooming card covers it */ cursor: pointer; -webkit-tap-highlight-color: transparent; width: min(80vw, 330px); aspect-ratio: 10 / 7;
  perspective: 1100px;
  transition: transform 1s var(--ease-io), opacity .8s var(--ease-out);
}
.env-back { /* bronze interior, seen once the flap opens */
  position: absolute; inset: 0; border-radius: 3px;
  background:
    radial-gradient(circle, rgba(255, 220, 180, .16) 0 1px, transparent 1.6px) 0 0 / 8px 8px,
    linear-gradient(180deg, #4a2c13 0%, #7a4f26 40%, #9c6a3a 62%, #6b4320 100%);
  box-shadow: inset 0 6px 14px rgba(30, 14, 4, .55), 0 26px 30px -6px rgba(0, 0, 0, .45);
}
.env-card {
  position: absolute; left: 6%; right: 6%; top: 6%; height: 88%; z-index: 2;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border-radius: 2px; padding: 7px;
  transition: transform 1.4s cubic-bezier(.4, .1, .25, 1);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
}
.env-card-inner {
  height: 100%; border: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 14%;
}
.env-card-orn { width: 110px; height: 17px; color: var(--gold); }
.env-card-names { display: flex; flex-direction: column; align-items: center; font-size: 30px; margin: 8px 0 6px; }
.env-card-names .foil { display: block; }
.env-card-names .hero-amp { opacity: 1; transition: none; }
.env-card .label { font-size: 9px; letter-spacing: .3em; }
.env-pocket { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.envelope::after { /* copper edge + sheen across the paper */
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 3px;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .05) 46%, transparent 64%);
  transition: opacity .4s;
}
.env-flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 57%; z-index: 4;
  transform-origin: 50% 0; transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.45, .05, .3, 1);
}
.flap-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-front {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #1a434b 0%, #12363d 60%, #0e2d33 100%);
}
.flap-back { /* bronze liner, seen once the flap swings up */
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: rotateX(180deg);
  background:
    radial-gradient(circle, rgba(255, 220, 180, .22) 0 1px, transparent 1.6px) 0 0 / 8px 8px,
    linear-gradient(120deg, #5e3a1a, #a8733f 38%, #c48a52 50%, #8c5a2b 64%, #5e3a1a);
}

.seal {
  position: absolute; left: 50%; top: 57%; z-index: 6;
  width: 78px; height: 78px; margin: -39px 0 0 -39px;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease-out);
}
.seal:active { transform: scale(.95); }
.seal:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 8px; border-radius: 50%; }
.seal-wreath {
  position: absolute; left: 50%; top: 57%; z-index: 5; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  color: var(--gold-soft); opacity: .9; pointer-events: none; transition: opacity .8s ease, transform 1s var(--ease-out);
}
.cover.s1 .seal-wreath { opacity: 0; transform: scale(1.12); }
.seal-whole { position: absolute; inset: 0; transform-origin: 50% 70%; }
/* the seal turns into petals: it quietly shrinks and fades as they scatter (no glow, no pop) */
.cover.s1 .seal-whole { animation: unseal .28s ease-out forwards; }
@keyframes unseal { to { transform: scale(.82); opacity: 0; } }
.sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.seal-disc {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 52% 48% 50% 50% / 48% 53% 47% 52%;
  background: radial-gradient(circle at 34% 28%, #f3c29c 0%, #d08858 26%, #a85a2e 58%, #6e3417 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 236, 220, .55),
    inset 0 -5px 10px rgba(60, 22, 6, .45),
    0 3px 0 -1px #5c2a14,
    0 8px 16px rgba(0, 0, 0, .45);
}
.seal-disc::before { /* pressed inner ring */
  content: ""; position: absolute; inset: 13%; border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(60, 22, 6, .5), 0 1px 0 rgba(255, 230, 210, .35);
}
.seal-mono {
  position: relative; left: -.25em; top: .08em; /* optical centring: the italic F leans right */ font: 400 27px/1 var(--display);
  color: #6b3217; /* pressed into the copper wax */
  text-shadow: 0 1px 0 rgba(255, 226, 200, .55), 0 -1px 0 rgba(50, 18, 4, .45);
  padding: .1em .2em;
}
.hint { position: relative; }

/* ---- envelope screen entrance: waits for fonts, then one choreographed sequence ---- */
body:not(.cover-in) .cover-top, body:not(.cover-in) .envelope, body:not(.cover-in) .hint,
body:not(.cover-in) .seal, body:not(.cover-in) .dust { opacity: 0; }
body:not(.cover-in) .cover::before { clip-path: inset(50% 50% 50% 50%); }
.cover::before { transition: clip-path 1.8s var(--ease-io); }
.cover-in .cover-top { animation: enter 1.4s var(--ease-smooth) both .15s; }
.cover-in .envelope { animation: enter-env 1.6s var(--ease-smooth) both .4s; }
.cover-in .seal { animation: seal-in .9s cubic-bezier(.2, 1.3, .4, 1) backwards 1.05s; }
.cover-in .hint { animation: enter 1.2s var(--ease-smooth) both 1.6s; }
.cover-in .dust { animation: fadein 2.5s ease both 1s; }
.cover-orn { --d: .5s; transition-duration: 3s; }
.seal-wreath.draw { --d: 1.2s; transition: stroke-dashoffset 2s var(--ease-smooth) var(--d), opacity .8s ease, transform 1s var(--ease-out); }
@keyframes enter { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes enter-env { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes seal-in { from { opacity: 0; transform: scale(1.35); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }

/* opening sequence (classes added by script.js) */
.cover.s2 .env-flap { transform: rotateX(180deg); }
.cover.s3 .env-flap { z-index: 1; }
.cover.s4 .env-card { transform: translateY(-112%); } /* fully out of the envelope */
.cover.s5 .env-card { z-index: 10; box-shadow: none; transition: transform 1.15s var(--ease-io), box-shadow .4s; }
.cover.s5 .env-card-inner { opacity: 0; transition: opacity .4s ease; }

/* =================== HERO =================== */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center; padding: 90px 28px;
  background: radial-gradient(ellipse at 50% 40%, #fffaf6 0%, var(--paper) 45%, var(--paper-2) 100%);
  overflow: hidden;
}
.frame { position: absolute; inset: 14px; pointer-events: none; }
.frame.inner { inset: 21px; opacity: .5; }
.frame i { position: absolute; background: var(--gold); transition: transform .75s var(--ease-io); }
.frame .t, .frame .b { left: 0; right: 0; height: 1px; transform: scaleX(0); }
.frame .r, .frame .l { top: 0; bottom: 0; width: 1px; transform: scaleY(0); }
.frame .t { top: 0; transform-origin: left; }
.frame .r { right: 0; transform-origin: top; transition-delay: .65s; }
.frame .b { bottom: 0; transform-origin: right; transition-delay: 1.3s; }
.frame .l { left: 0; transform-origin: bottom; transition-delay: 1.95s; }
.frame.inner .t { transition-delay: .35s; }
.frame.inner .r { transition-delay: 1s; }
.frame.inner .b { transition-delay: 1.65s; }
.frame.inner .l { transition-delay: 2.3s; }
.frame.in i { transform: none; }
.hero-inner { position: relative; }
.hero-eyebrow { opacity: 0; letter-spacing: .7em; transition: opacity 1.4s var(--ease-smooth), letter-spacing 2.2s var(--ease-smooth); }
.hero-names { display: flex; flex-direction: column; align-items: center; margin: 16px 0 4px; font-size: clamp(76px, 23vw, 108px); }
.ink-line { display: block; clip-path: inset(-30% 100% -30% -10%); transition: clip-path 2s var(--ease-io); }
.ink-line.l2 { transition-delay: .75s; }
.hero-amp {
  display: flex; align-items: center; gap: 16px; margin: .02em 0 .04em;
  font: italic 300 .3em/1 var(--body); color: var(--gold);
  opacity: 0; transition: opacity 1.2s ease .7s;
}
.hero-amp::before, .hero-amp::after { content: ""; width: 1.6em; height: 1px; background: var(--hair); }
.hero-div { --d: 1.6s; }
.hero-date {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.2s var(--ease-smooth) 1.9s, transform 1.4s var(--ease-smooth) 1.9s;
}
.hero-date .label { color: var(--ink-soft); font-size: 10.5px; }
.hero-dots {
  font: 300 24px/1 var(--body); letter-spacing: .08em; font-variant-numeric: lining-nums; white-space: nowrap;
  padding: 12px 6px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 34px; width: 1px; height: 52px; margin-left: -.5px;
  background: linear-gradient(var(--hair), transparent); overflow: hidden;
  opacity: 0; transition: opacity 1s ease 2.6s;
}
.scroll-cue span { position: absolute; left: -1.5px; top: -8px; width: 4px; height: 8px; border-radius: 2px; background: var(--gold); animation: cue 2.4s var(--ease-io) infinite; }

body.intro .hero-eyebrow { opacity: 1; letter-spacing: .38em; }
body.intro .ink-line { clip-path: inset(-30% -10% -30% -10%); }
/* names flying in from the card: shown in full, no ink reveal */
body.fly .hero-names { position: relative; z-index: 40; transform-origin: 50% 50%; }
body.fly .ink-line { clip-path: none; transition: none; }
body.fly .hero-amp { opacity: 1; transition: none; }
body.intro .hero-amp, body.intro .scroll-cue { opacity: 1; }
body.intro .hero-date { opacity: 1; transform: none; }

/* =================== SECTIONS =================== */
.sec { position: relative; padding: 104px 30px; }
.title { font-size: 58px; margin-top: 6px; }
.sec .label + .title { display: inline-block; }
.dark {
  color: #f3e5d9;
  background: radial-gradient(ellipse 120% 70% at 50% 0%, var(--velvet-lit) 0%, var(--velvet) 55%, var(--velvet-deep) 100%);
}
.dark .corner { color: var(--gold-soft); }
.dark .divider { color: var(--gold-soft); }

/* opening */
.greeting { font-style: italic; font-weight: 500; font-size: 20px; }
blockquote { position: relative; margin: 44px 4px 40px; padding: 26px 8px 0; }
.qmark { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: 96px; line-height: 1; }
blockquote p { font: italic 300 21px/1.6 var(--body); color: var(--ink); }
blockquote cite { display: block; margin-top: 18px; font-style: normal; color: var(--gold); }
.opening-intro { color: var(--ink-soft); max-width: 36ch; margin: 0 auto; }

/* couple */
.couple { background: var(--paper-2); }
.arch { position: relative; width: 208px; height: 284px; margin: 40px auto 64px; }
.arch-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arch-line path { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.arch-line path + path { opacity: .5; --d: .3s; }
.arch-fill {
  position: absolute; left: 9%; right: 9%; top: 7%; bottom: 5%;
  border-radius: 200px 200px 2px 2px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, var(--velvet-lit), var(--velvet) 60%, var(--velvet-deep));
  display: grid; place-items: center;
}
.arch-fill img { width: 100%; height: 100%; object-fit: cover; }
.arch-mono { font: 400 54px/1 var(--display); display: flex; align-items: baseline; padding: .25em .4em; margin: 0 0 0 -.12em; }
.arch-mono small { font-size: .42em; margin: 0 .12em; }

.person { display: grid; gap: 6px; }
.person .label { margin-bottom: 2px; }
.person-nick { font-size: 50px; line-height: 1.2; justify-self: center; white-space: pre-line; margin-bottom: 10px; }
.person-name { font: 500 15.5px/1.5 var(--caps); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.person-parents { font-style: italic; color: var(--ink-soft); font-size: 17.5px; margin: 2px auto 0; text-wrap: balance; }
.big-amp { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 44px 0; }
.big-amp::before, .big-amp::after { content: ""; width: 64px; height: 1px; background: var(--hair); }
.big-amp .amp { font-size: 50px; line-height: 1; display: inline-block; }
.ig { display: inline-block; margin-top: 6px; color: var(--gold); font-size: 15px; text-decoration: none; }

/* countdown */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6px; }
.countdown > div { display: grid; gap: 8px; padding: 6px 0; position: relative; }
.countdown > div + div::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(227, 164, 122, .3); }
.countdown .num { font: 300 48px/1 var(--body); color: #fcefe4; font-variant-numeric: tabular-nums lining-nums; display: block; }
.countdown .num { display: flex; justify-content: center; }
.countdown .dg { position: relative; display: inline-block; width: .52em; height: 1.1em; overflow: hidden; }
.countdown .dg .v { position: absolute; inset: 0; display: block; line-height: 1.1em; text-align: center; }
.countdown .dg .v.enter { animation: dg-in .8s cubic-bezier(.45, 0, .2, 1) both; }
.countdown .dg .v.leave { animation: dg-out .8s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes dg-in { from { transform: translateY(-55%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dg-out { from { transform: none; opacity: 1; } to { transform: translateY(55%); opacity: 0; } }
.countdown small { font: 500 10px/1 var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); }
.countdown.done { display: block; font: italic 300 24px/1.5 var(--body); }

/* event card */
.inv-card {
  position: relative; padding: 78px 26px 84px;
  background: linear-gradient(180deg, #fffbf8, var(--paper) 60%, var(--paper-2));
  border: 1px solid var(--hair);
  box-shadow: 0 1px 0 #fff inset, 0 40px 60px -34px rgba(11, 31, 36, .45), 0 2px 6px rgba(11, 31, 36, .06);
  transition: opacity 1.1s var(--ease-smooth) var(--d, 0s), filter 1.1s var(--ease-smooth) var(--d, 0s), transform .6s var(--ease-out);
}
.inv-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(176, 105, 60, .25); pointer-events: none; }
.inv-card .d-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.inv-card .d-side { padding: 9px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font: 500 11px/1 var(--caps); letter-spacing: .28em; text-transform: uppercase; }
.inv-card .d-day { font: 300 84px/.9 var(--body); font-variant-numeric: lining-nums; }
.inv-card .d-year { margin-top: 12px; color: var(--ink-soft); }
.inv-card .divider { width: 150px; height: 24px; margin: 22px auto 18px; }
.inv-card .time { font-style: italic; font-size: 20px; }
.inv-card .venue-art { display: block; width: min(100%, 260px); height: 109px; margin: 26px auto 6px; color: var(--gold); --d: .3s; }
.inv-card .venue-art.draw { transition-duration: 3.2s; }
.inv-card .venue { font: 500 17px/1.4 var(--caps); letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; }
.inv-card .addr { color: var(--ink-soft); font-size: 17px; margin-top: 6px; max-width: 28ch; margin-inline: auto; }
.inv-card .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }

/* buttons */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; min-width: 170px;
  font: 500 10.5px/1 var(--caps); letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink); background: transparent; text-decoration: none;
  border: 1px solid var(--gold);
  transition: color .35s var(--ease-out), transform .14s var(--ease-out);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--foil); background-size: 200% 100%; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: #fff; }
  .btn:hover::before { transform: scaleX(1); }
}

/* story */
.story { background: var(--paper-2); }
.story-photo { width: 240px; margin: 0 auto 44px; padding: 8px 8px 30px; background: #fff; transform: rotate(-2deg); box-shadow: 0 24px 40px -24px rgba(0,0,0,.35); }
.story-photo img { width: 100%; display: block; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; justify-items: center; gap: 4px; }
.timeline li::before { /* diamond */
  content: ""; width: 11px; height: 11px; margin-bottom: 14px;
  transform: rotate(45deg) scale(.8);
  background: transparent; border: 1px solid var(--gold);
  transition: background .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.timeline li.lit::before { background: var(--gold); transform: rotate(45deg) scale(1); box-shadow: 0 0 0 4px rgba(227, 164, 122, .25); }
.timeline li:not(:last-child)::after { /* connector to the next entry */
  content: ""; width: 1px; height: 56px; margin: 26px 0 22px;
  background: linear-gradient(var(--hair), rgba(176, 105, 60, .12));
}
.timeline .yr { font: 500 11px/1.4 var(--caps); letter-spacing: .3em; color: var(--gold); }
.timeline h3 { font: 500 26px/1.25 var(--body); }
.timeline p { color: var(--ink-soft); font-size: 18px; max-width: 32ch; }

/* closing */
.closing { padding: 130px 30px 120px; }
.closing-text { font-size: 20px; font-weight: 300; max-width: 32ch; margin: 0 auto; color: #f3e5d9; }
.closing .greeting { margin: 26px 0 30px; color: #f3e5d9; }
.closing-names { display: flex; flex-direction: column; align-items: center; font-size: 70px; margin: 14px 0 22px; }
.closing-names .amp { font-size: .42em; color: var(--gold-soft); margin: .05em 0; }
.families { font-size: 16px; color: rgba(243, 229, 217, .7); white-space: pre-line; margin: 0 auto; }
.closing-seal { position: relative; width: 74px; height: 74px; margin: 90px auto 50px; animation: float 6s ease-in-out infinite; }
.closing-seal .seal-mono { font-size: 25px; }

/* music */
.music-btn {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  right: max(18px, calc(50vw - var(--w) / 2 + 18px));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--velvet); color: var(--gold-soft);
  display: grid; place-items: center; cursor: pointer;
}
.music-btn svg { width: 19px; height: 19px; }
.music-btn.playing svg { animation: spin 5s linear infinite; }

/* keyframes */
@keyframes fadein { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes cue { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(64px); } }
@keyframes float { 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { transform: none; filter: none; transition: opacity .6s ease; }
  .corner use, .foil, .hint, .closing-seal, .cover-top, .envelope, .seal, .dust, .scroll-cue span, .countdown .dg .v { animation: none !important; }
  .countdown .dg .v.leave { display: none; }
  .draw, .arch-line path { transition: none; stroke-dashoffset: 0; }
  .frame i { transition: none; transform: none; }
  .ink-line { clip-path: none; transition: none; }
  .hero-eyebrow { letter-spacing: .38em; }
  .envelope, .env-card, .env-flap { transition: opacity .4s ease; }
  .cover.s1 .seal-whole { animation: none; opacity: 0; transition: opacity .4s ease; }
}