/* ═══════════════════════════════════════════════════════════
   Pasindu & Nihara — 16 & 17 January 2027
   Palette drawn from the couple's own reference board.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* colour */
  --lily:   #FBF7EF;   /* warm white — the arum lily petal */
  --cream:  #F5EBD0;
  --gilt:   #CFB88C;
  --sage:   #62745C;
  --wine:   #590B19;
  --plum:   #451C21;
  --night:  #190A0E;
  --ink:    #1E2620;

  --paper:  var(--lily);
  --text:   var(--ink);
  --muted:  color-mix(in srgb, var(--ink) 74%, transparent);
  --rule:   color-mix(in srgb, var(--sage) 30%, transparent);
  --accent: color-mix(in srgb, var(--sage) 88%, var(--ink));

  /* type */
  --display: "Fraunces", "Hoefler Text", Garamond, serif;
  --body:    "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --script:  "Petit Formal Script", "Snell Roundhand", cursive;

  /* measure */
  --gutter: clamp(1.25rem, 6vw, 4rem);
  --pad-block: clamp(3.5rem, 10vh, 7rem);
  --max: 68rem;
  --max-narrow: 40rem;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

[hidden]{ display:none !important; }

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

body{
  margin:0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; height:100dvh; }

img,video{ display:block; max-width:100%; height:auto; }

::selection{ background: var(--gilt); color: var(--ink); }

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

/* ───────── layout primitives ───────── */

.wrap{
  width:100%;
  max-width: var(--max);
  margin-inline:auto;
  padding-inline: var(--gutter);
}
.wrap--narrow{ max-width: var(--max-narrow); }

main > section,
main > footer{ padding-block: var(--pad-block); }

.label{
  font-family: var(--body);
  font-weight:400;
  font-size:.6875rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color: var(--accent);
  margin:0;
}

.section-head{ text-align:center; margin-bottom:clamp(2.5rem,7vw,4.5rem); }

.section-title{
  font-family: var(--display);
  font-weight:250;
  font-size:clamp(2rem,7vw,3.25rem);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:.5rem 0 0;
}

.lily{ width:1.75rem; height:auto; color: var(--accent); stroke-width:2.4; }

/* ───────── scroll reveal ───────── */

.reveal{
  opacity:0;
  transform:translateY(1.5rem);
  transition:opacity .9s var(--ease-out) var(--d,0s),
             transform .9s var(--ease-out) var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none; }


/* ═══════════════════════════════════════════════════════════
   THE ENVELOPE
   ═══════════════════════════════════════════════════════════ */

.envelope-stage{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  overflow:hidden;
  perspective:1200px;
  background:
    radial-gradient(90% 65% at 50% 46%, color-mix(in srgb, var(--wine) 34%, var(--plum)) 0%, transparent 68%),
    linear-gradient(170deg, var(--plum) 0%, var(--night) 68%);
  transition:opacity .9s var(--ease), visibility .9s;
}
.envelope-stage.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }

/* a slow breath of light behind the envelope */
.envelope-stage::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(38% 30% at 50% 52%,
    color-mix(in srgb, var(--gilt) 18%, transparent), transparent 70%);
  animation: env-glow 6s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes env-glow{ from{ opacity:.35; } to{ opacity:1; } }

.envelope-frame{ z-index:2; }

.envelope-scene{
  position:relative; z-index:3;
  width:100%; max-width:100%;
  display:grid; justify-items:center; gap:2.5rem;
  padding: var(--gutter);
  perspective:1400px;
}

/* the envelope floats, and leans toward the pointer */
.envelope-tilt{
  transform-style:preserve-3d;
  animation: env-float 7s ease-in-out infinite alternate;
}
@keyframes env-float{
  from{ transform:translateY(-.4rem) rotate(-.5deg); }
  to  { transform:translateY(.4rem)  rotate(.5deg); }
}
.is-opening .envelope-tilt{ animation:none; }

.envelope{
  position:relative;
  width:min(82vw, 23rem);
  aspect-ratio: 1 / .64;
  transform-style:preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}

.env-body,
.env-front,
.env-flap{ position:absolute; inset:0; }

.env-body{
  background: linear-gradient(160deg, var(--lily), color-mix(in srgb, var(--cream) 85%, var(--lily)));
  box-shadow:0 2rem 4.5rem -1rem rgba(0,0,0,.55);
  border-radius:2px;
}

/* the pocket front — a trapezoid so the letter can rise behind it */
.env-front{
  z-index:3;
  background: linear-gradient(200deg, var(--cream), color-mix(in srgb, var(--gilt) 30%, var(--cream)));
  clip-path: polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%);
  border-radius:2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gilt) 35%, transparent);
}

.env-flap{
  z-index:5;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gilt) 34%, var(--cream)), color-mix(in srgb, var(--gilt) 12%, var(--cream)));
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform .95s var(--ease) .28s, z-index 0s linear .7s;
  backface-visibility:hidden;
  filter: drop-shadow(0 2px 2px rgba(69,28,33,.14));
}
.is-opening .env-flap{ transform: rotateX(178deg); z-index:1; }

.env-address{
  max-width:min(88vw, 26rem);
  text-align:center;
  overflow-wrap:anywhere;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.is-opening .env-address{
  opacity:0; transform:translateY(-.75rem);
  transition-duration:.35s;
}

.env-address__label{
  display:block;
  font-size:.5625rem; letter-spacing:.34em; text-transform:uppercase;
  color: color-mix(in srgb, var(--gilt) 62%, transparent);
  margin-bottom:.55rem;
}
.env-address__name{
  display:block;
  font-family: var(--script);
  font-size:clamp(1.6rem, 7.5vw, 2.4rem);
  line-height:1.25;
  color: var(--cream);
}

.env-letter{
  position:absolute; z-index:2;
  left:5%; right:5%; top:7%; bottom:7%;
  padding:1rem;
  display:grid; align-content:center; justify-items:center; gap:.3rem;
  background: var(--lily);
  border-radius:2px;
  box-shadow:0 .5rem 1.75rem -.5rem color-mix(in srgb, var(--plum) 30%, transparent);
  transform: translateY(0) scale(1);
  transition: transform 1.15s var(--ease) .75s;
}
.is-opening .env-letter{ transform: translateY(-78%) scale(1.04); }

.env-letter__eyebrow{
  margin:0; font-size:.5625rem; letter-spacing:.28em;
  text-transform:uppercase; color: var(--sage);
}
.env-letter__names{
  margin:.15rem 0 0;
  font-family: var(--display); font-weight:250;
  font-size:clamp(1.5rem,7vw,2.1rem); line-height:1.15;
  letter-spacing:-.01em; text-align:center;
}
.env-letter__names span{
  display:block; font-size:.55em; font-style:italic; color: var(--sage);
}
.env-letter__date{
  margin:.35rem 0 0; font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase; color: var(--muted);
}
.lily--letter{ width:1.4rem; color: var(--gilt); }

.env-seal{
  position:absolute; z-index:6;
  left:50%; top:58%;
  translate:-50% -50%;
  width:5rem; height:5rem;
  display:grid; place-items:center; gap:0;
  border:0; border-radius:50%; padding:0;
  cursor:pointer;
  background:
    radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--wine) 78%, var(--gilt)), var(--wine) 55%, var(--plum));
  color: color-mix(in srgb, var(--cream) 82%, transparent);
  box-shadow:0 .4rem 1.1rem -.2rem color-mix(in srgb, var(--plum) 60%, transparent),
             inset 0 0 0 1px color-mix(in srgb, var(--gilt) 30%, transparent);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  animation: seal-breathe 3.6s ease-in-out infinite;
}
.env-seal::after{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  background:linear-gradient(115deg,
    transparent 34%,
    color-mix(in srgb, var(--cream) 34%, transparent) 47%,
    transparent 60%);
  animation: seal-gloss 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes seal-gloss{
  0%, 62%{ transform:translateX(-115%); }
  86%, 100%{ transform:translateX(115%); }
}
.env-seal:hover{ transform:translate(-50%,-50%) scale(1.05); }
.is-opening .env-seal::after{ animation:none; }
.is-opening .env-seal{
  transform:translate(-50%,-30%) rotate(-22deg) scale(.85);
  opacity:0; animation:none;
}

@keyframes seal-breathe{
  0%,100%{ box-shadow:0 .4rem 1.1rem -.2rem color-mix(in srgb, var(--plum) 60%, transparent),
                      inset 0 0 0 1px color-mix(in srgb, var(--gilt) 30%, transparent),
                      0 0 0 0 color-mix(in srgb, var(--wine) 30%, transparent); }
  55%{ box-shadow:0 .4rem 1.1rem -.2rem color-mix(in srgb, var(--plum) 60%, transparent),
                  inset 0 0 0 1px color-mix(in srgb, var(--gilt) 30%, transparent),
                  0 0 0 .9rem color-mix(in srgb, var(--wine) 0%, transparent); }
}

.lily--seal{
  width:1.35rem; color:inherit; grid-area:1/1;
  translate:0 -.3rem; stroke-width:5;
}
.env-seal__initials{
  grid-area:1/1; translate:0 1.15rem;
  font-family: var(--body); font-size:.5rem;
  letter-spacing:.24em;
}
.env-seal__initials i{ font-style:normal; opacity:.55; }

.envelope-hint{
  margin:0;
  font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  color: color-mix(in srgb, var(--gilt) 70%, transparent);
  transition:opacity .4s;
}
.is-opening .envelope-hint{ opacity:0; }


/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:center;
  overflow:hidden;
  background: var(--night);
}

.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.92;
  transform:scale(1.06);
  animation: hero-breathe 30s ease-in-out infinite alternate;
}
@keyframes hero-breathe{ to{ transform:scale(1.15); } }

.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(125% 82% at 50% 46%, transparent 32%, color-mix(in srgb, var(--night) 52%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--night) 58%, transparent) 0%,
      color-mix(in srgb, var(--night) 24%, transparent) 40%,
      color-mix(in srgb, var(--night) 78%, transparent) 100%);
}

/* ── the engraved frame ── */

.hero__frame{
  position:absolute; z-index:2;
  inset:clamp(.85rem, 3vw, 1.75rem);
  border:1px solid color-mix(in srgb, var(--gilt) 38%, transparent);
  pointer-events:none;
}
.hero__frame::before{
  content:""; position:absolute; inset:clamp(.3rem,1vw,.5rem);
  border:1px solid color-mix(in srgb, var(--gilt) 20%, transparent);
}

.corner{
  position:absolute;
  width:clamp(2rem, 6vw, 3rem); height:auto;
  color: color-mix(in srgb, var(--gilt) 78%, transparent);
}
.corner--tl{ top:-1px; left:-1px; }
.corner--tr{ top:-1px; right:-1px; transform:scaleX(-1); }
.corner--br{ bottom:-1px; right:-1px; transform:scale(-1); }
.corner--bl{ bottom:-1px; left:-1px; transform:scaleY(-1); }

/* ── the plate ── */

.hero__inner{
  position:relative; z-index:3;
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding: 5rem clamp(1.25rem, 6vw, 4rem);
  text-align:center;
  color: var(--lily);
  text-shadow:0 1px 26px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
}

.hero__crest{
  width:clamp(1.5rem,5vw,2rem);
  margin:0 auto clamp(1rem,3.5vw,1.5rem);
  color: color-mix(in srgb, var(--gilt) 88%, transparent);
  stroke-width:2.8;
}

.hero__eyebrow{
  margin:0 0 clamp(1.25rem,4vw,2rem);
  font-size:.625rem; letter-spacing:.34em; text-transform:uppercase;
  color: color-mix(in srgb, var(--gilt) 92%, transparent);
}

.hero__names{
  margin:0;
  font-family: var(--display);
  font-weight:200;
  font-size:clamp(3.4rem, 19vw, 9.5rem);
  line-height:.96;
  letter-spacing:-.03em;
}
.hero__names > span{ display:block; }

/* the one ornamental glyph on the page */
.hero__amp{
  display:block;
  margin:.12em 0;
  font-size:.34em;
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--gilt) 60%, var(--lily)),
    var(--gilt) 45%,
    color-mix(in srgb, var(--gilt) 70%, var(--plum)));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}

/* hairline rule with a lozenge, between the names and the verse */
.hero__flourish{
  display:flex; align-items:center; justify-content:center;
  gap:.75rem;
  margin:clamp(1.5rem,5vw,2.25rem) auto clamp(1.25rem,4vw,1.75rem);
  max-width:15rem;
}
.hero__flourish i{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gilt) 70%, transparent));
}
.hero__flourish i:last-child{ transform:scaleX(-1); }
.hero__flourish b{
  width:.4rem; height:.4rem;
  rotate:45deg;
  background: var(--gilt);
}

.hero__verse{
  margin:0 auto;
  max-width:26rem;
  font-family: var(--display);
  font-weight:250; font-style:italic;
  font-size:clamp(1rem,3.8vw,1.25rem);
  line-height:1.7;
  color: color-mix(in srgb, var(--cream) 92%, transparent);
}
.hero__ref{
  display:block; margin-top:.8rem;
  font-family: var(--body); font-style:normal;
  font-size:.5625rem; letter-spacing:.28em; text-transform:uppercase;
  color: color-mix(in srgb, var(--gilt) 88%, transparent);
}

.hero__place{
  margin:clamp(1.75rem,5vw,2.5rem) auto 0;
  max-width:24rem;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase;
  line-height:2;
  color: color-mix(in srgb, var(--cream) 82%, transparent);
}

.hero__scroll{
  position:absolute; z-index:3;
  left:50%; bottom:clamp(2rem,5vw,3rem); translate:-50% 0;
  width:1.5rem; height:2.75rem;
  display:grid; place-items:start center;
  border:1px solid color-mix(in srgb, var(--cream) 32%, transparent);
  border-radius:1rem;
}
.hero__scroll span{
  width:2px; height:.5rem; margin-top:.5rem;
  background: var(--gilt); border-radius:2px;
  animation: scroll-tick 2s var(--ease) infinite;
}
@keyframes scroll-tick{
  0%{ opacity:0; transform:translateY(0); }
  30%{ opacity:1; }
  70%{ opacity:0; transform:translateY(.85rem); }
  100%{ opacity:0; }
}

/* the hero keeps its petals under the frame, over the video */
.hero .drift{ z-index:1; }


/* ═══════════════════════════════════════════════════════════
   THE INVITATION LINE  — the signature moment
   ═══════════════════════════════════════════════════════════ */

.invite,
.countdown{ background: color-mix(in srgb, var(--cream) 52%, var(--lily)); }

.invite{ text-align:center; padding-bottom: clamp(2rem,6vh,3.5rem) !important; }

/* stationery: an ivory card with a hairline rule set inside the edge */
.card{
  position:relative;
  padding: clamp(1.9rem,6.5vw,2.6rem) clamp(1.4rem,5vw,2.4rem);
  background: linear-gradient(168deg,
    var(--lily),
    color-mix(in srgb, var(--cream) 38%, var(--lily)));
  border:1px solid color-mix(in srgb, var(--gilt) 52%, transparent);
  border-radius:3px;
  box-shadow:
    0 1.5rem 3.5rem -1.5rem color-mix(in srgb, var(--plum) 34%, transparent),
    0 .15rem .5rem -.25rem color-mix(in srgb, var(--plum) 16%, transparent);
}
.card::after{
  content:""; position:absolute; inset:.55rem;
  border:1px solid color-mix(in srgb, var(--gilt) 30%, transparent);
  border-radius:2px;
  pointer-events:none;
}
.card > *{ position:relative; z-index:1; }


.invite__opening,
.invite__closing{
  margin:0;
  font-family: var(--display);
  font-weight:250;
  font-size:clamp(1.15rem,4.6vw,1.7rem);
  line-height:1.5;
  color: var(--text);
}

.invite__line{
  position:relative;
  margin:clamp(1rem,3.5vw,1.5rem) auto clamp(.6rem,2vw,1rem);
  max-width:32rem;
  min-height:clamp(3rem,11vw,4rem);
  display:grid;
  align-content:end;
  justify-items:center;
}

.invite__guest{
  font-family: var(--script);
  font-size:clamp(1.75rem,8.5vw,3rem);
  line-height:1.15;
  color: var(--wine);
  padding-inline:.5rem;
  /* the "writing" wipe */
  clip-path: inset(0 100% 0 0);
}
.invite__line.is-written .invite__guest{
  animation: write-on 1.6s cubic-bezier(.55,.06,.28,1) forwards;
}
@keyframes write-on{ to{ clip-path: inset(0 -2% 0 0); } }

.invite__rule{
  width:100%; height:8px;
  margin-top:.35rem;
  overflow:visible;
}
.invite__rule line{
  stroke: color-mix(in srgb, var(--gilt) 85%, var(--sage));
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:2 7;
  stroke-dashoffset:600;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.invite__line.is-written .invite__rule line{ stroke-dashoffset:0; }

.invite__parents{
  margin-top:clamp(1.6rem,4.5vw,2.25rem);
  padding-top:clamp(1.25rem,3.5vw,1.75rem);
  border-top:1px solid color-mix(in srgb, var(--gilt) 45%, transparent);
  display:grid; gap:1.25rem;
  font-size:.9375rem;
}
.invite__parents p{ margin:0; }
.invite__parents .label{ display:block; margin-bottom:.4rem; }
.invite__parents em{
  display:block; margin-top:.2rem;
  font-style:normal; font-size:.8125rem; color:var(--muted);
}


/* ═══════════════════════════════════════════════════════════
   COUNTDOWN
   ═══════════════════════════════════════════════════════════ */

.countdown{ text-align:center; padding-block: clamp(2rem,6vh,3.5rem) !important; }

.countdown__row{
  margin-top:1.5rem;
  display:flex; justify-content:center;
  gap:clamp(1.5rem,7vw,4.5rem);
}
.countdown__unit{ display:grid; gap:.15rem; }
.countdown__unit b{
  font-family: var(--display);
  font-weight:200;
  font-size:clamp(2.75rem,12vw,4.5rem);
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric: tabular-nums;
}
.countdown__unit span{
  font-size:.5625rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════
   THE STORY — a distance meter
   ═══════════════════════════════════════════════════════════ */

.story{
  --field: color-mix(in srgb, var(--cream) 18%, var(--lily));
  background: var(--field);
  padding-block: clamp(2.5rem,7vh,4rem) !important;
}
.story .section-head{ margin-bottom:clamp(1.5rem,4vw,2.25rem); }

/* ── the ruler: every year is visible before you reach it ── */

.ruler{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:1rem;
  padding:.85rem 0 .7rem;
  margin-bottom:clamp(1.5rem,5vw,2.5rem);
  background:linear-gradient(180deg, var(--field) 58%, transparent);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  mask-image:linear-gradient(180deg, #000 62%, transparent);
}

/* a position indicator, not a second headline — the beat carries the year */
.ruler__year{
  font-family: var(--body); font-weight:400;
  font-size:.6875rem; line-height:1;
  letter-spacing:.22em;
  font-variant-numeric:tabular-nums;
  color: var(--wine);
  min-width:5ch;
}

.ruler__ticks{
  flex:1; list-style:none; margin:0; padding:0;
  display:flex; align-items:flex-end; gap:0;
  height:1.25rem;
}
.ruler__tick{
  position:relative;
  flex:1; height:.4rem;
  border-left:1px solid color-mix(in srgb, var(--sage) 55%, transparent);
  transition:height .45s var(--ease), border-color .45s var(--ease);
}
.ruler__tick i{ display:none; }
.ruler__tick--empty{ height:.22rem; border-left-style:dotted; }
.ruler__tick--end{ height:.7rem; border-left-color: var(--wine); }
.ruler__tick.is-now{
  height:1.25rem;
  border-left-color: var(--wine);
  border-left-width:2px;
}
.ruler__tick.is-past{ border-left-color: color-mix(in srgb, var(--wine) 45%, transparent); }

/* ── the track ── */

.track{
  position:relative;
  list-style:none; margin:0;
  padding:0 0 0 clamp(2.5rem, 9vw, 4.5rem);
}

.track__spine{
  position:absolute; left:.45rem; top:.4rem; bottom:3rem;
  width:1px;
  background: color-mix(in srgb, var(--sage) 28%, transparent);
}
.track__fill{
  position:absolute; inset:0 auto 0 -1px;
  width:3px;
  background:linear-gradient(180deg, var(--sage), var(--wine));
  transform-origin:top; transform:scaleY(0);
  border-radius:2px;
}

.beat{
  position:relative;
  padding-bottom:clamp(2.25rem, 6.5vw, 3.5rem);
}
.beat::before{
  content:""; position:absolute;
  left:calc(clamp(2.5rem, 9vw, 4.5rem) * -1 + .45rem - 3px);
  top:.55rem;
  width:7px; height:7px; border-radius:50%;
  background: var(--sage);
}
.beat--quiet::before{
  background: var(--paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 55%, transparent);
}
.beat--mark::before{ background: var(--wine); }
.beat--final::before{
  width:13px; height:13px;
  left:calc(clamp(2.5rem, 9vw, 4.5rem) * -1 + .45rem - 6px);
  top:.35rem;
  background: var(--wine);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--wine) 12%, transparent);
}

.beat__year{
  margin:0 0 .6rem;
  font-family: var(--display); font-weight:300;
  font-size:clamp(1.35rem, 5.5vw, 1.9rem);
  line-height:1; letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
}
.beat--quiet .beat__year{ color: color-mix(in srgb, var(--ink) 72%, transparent); }
.beat--mark  .beat__year{ color: var(--wine); }

.beat__pic{ margin:0 0 1rem; }
.beat__pic--pair{
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  max-width:17.5rem;
}
.beat__pic--pair img{ max-width:none; }
.beat__pic--pair img:first-child{ margin-top:.9rem; }
.beat__pic img{
  width:100%; max-width:8.5rem;
  aspect-ratio:4/5; object-fit:cover;
  border-radius:2px;
  box-shadow:0 .8rem 2rem -1rem color-mix(in srgb, var(--ink) 55%, transparent);
}
/* Tall source frames: hold the crop near the top so faces stay in. */
.beat__pic--high img{ object-position:50% 6%; }

.beat__gap{
  margin:0;
  font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--sage);
}
.beat__gap--far{ color: var(--wine); }
.beat__gap--zero{
  display:inline-block;
  padding:.4rem .85rem; border-radius:2rem;
  background: var(--sage); color: var(--lily);
  letter-spacing:.22em;
}

.beat__note{
  margin:.55rem 0 0; max-width:34rem;
  font-size:.9375rem; line-height:1.7;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
}
.beat__note b{ font-weight:400; color: var(--wine); }
.beat__note--final{
  margin-top:1.1rem; font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--accent);
}

.beat--quiet .beat__note{ font-style:italic; color: color-mix(in srgb, var(--ink) 82%, transparent); }

.beat--final{
  padding:clamp(1.75rem,6vw,2.5rem) clamp(1.25rem,4vw,2rem) 0;
  margin-top:.5rem;
  border-top:1px solid color-mix(in srgb, var(--wine) 20%, transparent);
}
.beat__closer{
  margin:1rem 0 0; max-width:30rem;
  font-family: var(--display); font-weight:250;
  font-size:clamp(1.15rem,4.8vw,1.75rem);
  line-height:1.45; letter-spacing:-.01em;
  color: var(--text);
}

@media (min-width:56rem){
  .ruler{ gap:1.5rem; padding-bottom:1.4rem; }
  .ruler__ticks{ height:1.75rem; }
  .ruler__tick{ height:.55rem; }
  .ruler__tick.is-now{ height:1.75rem; }

  /* wide screens have room to name every year on the ruler */
  .ruler__tick i{
    display:block; position:absolute;
    top:calc(100% + .35rem); left:0;
    font-family: var(--body); font-style:normal;
    font-size:.5625rem; letter-spacing:.12em;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
    transition:color .45s var(--ease);
  }
  .ruler__tick.is-now i{ color: var(--wine); }
  .ruler__tick.is-past i{ color: color-mix(in srgb, var(--wine) 55%, transparent); }

  /* year in its own gutter, photograph beside it, words to the right —
     the row stops being two thirds empty */
  .beat{
    display:grid;
    grid-template-columns:6.5rem 17.5rem 1fr;
    grid-template-areas:"year pic body";
    column-gap:clamp(1.5rem,3vw,2.5rem);
  }
  .beat__year{ grid-area:year; text-align:right; margin:.35rem 0 0; }
  .beat__pic { grid-area:pic; margin-bottom:0; }
  .beat__pic img{ max-width:8.5rem; }
  .beat__body{ grid-area:body; align-self:start; padding-top:.3rem; }

  .beat--quiet{ grid-template-areas:"year body body"; }
  .beat--quiet .beat__note{ max-width:40rem; }

  .beat--final{ display:block; }
}


/* ═══════════════════════════════════════════════════════════
   THE TWO DAYS
   ═══════════════════════════════════════════════════════════ */

.day{ overflow:hidden; }

/* the two days are the important plates, so they get the frame the hero has */
.day__frame{
  inset:clamp(1rem, 3.5vw, 2rem);
  z-index:2;
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.day__frame .corner{ color: color-mix(in srgb, var(--accent) 62%, transparent); }
.day__frame::before{ border-color: color-mix(in srgb, var(--accent) 16%, transparent); }

/* the date, very large and very faint, bleeding off the edge */
/* the date, very large behind the plate. Outlined rather than filled: at this
   size a solid numeral fights the words, an outline sits behind them. */
.day__ghost{
  position:absolute; z-index:1;
  left:50%; top:50%; translate:-50% -50%;
  font-family: var(--display); font-weight:200;
  font-size:clamp(16rem, 40vw, 30rem);
  line-height:.75;
  letter-spacing:-.04em;
  color: transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--accent) 5%, transparent);
  pointer-events:none;
  user-select:none;
}
.day__ghost--right{ left:50%; right:auto; }

/* gold on near-black carries further than sage on cream */
[data-act="night"] .day__ghost{
  color: transparent;
  -webkit-text-stroke-color: color-mix(in srgb, var(--gilt) 5%, transparent);
}

@media (max-width:55.99rem){
  .day__ghost{ font-size:min(64vw, 24rem); -webkit-text-stroke-width:1px; }
}

.day__grid{
  position:relative; z-index:3;
  display:grid; gap:clamp(2rem,7vw,3.5rem);
  align-items:center;
}

/* the photograph is mounted, not just placed */
.day__figure{
  position:relative;
  margin:0;
  padding:clamp(.4rem,1.4vw,.6rem);
}
.day__figure::after{
  content:""; position:absolute; inset:0;
  border:1px solid color-mix(in srgb, var(--gilt) 55%, transparent);
  pointer-events:none;
}
.day__figure img{
  width:100%; display:block;
  box-shadow:0 1.25rem 3rem -1.5rem color-mix(in srgb, var(--ink) 55%, transparent);
}

/* the date, set like a plate */
.stamp{
  display:inline-grid; justify-items:center;
  margin:1.1rem auto 1.25rem;
  padding:.55rem 1.4rem .7rem;
  border-top:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  line-height:1;
}
.stamp__dow,
.stamp__mon{
  font-weight:400;
  font-size:.625rem; letter-spacing:.26em; text-transform:uppercase;
  color: var(--accent);
}
.stamp__num{
  font-family: var(--display); font-weight:250;
  font-size:clamp(2.6rem,10vw,3.6rem);
  letter-spacing:-.03em;
  margin:.28rem 0 .34rem;
  font-variant-numeric:tabular-nums;
}

.day__title{
  margin:0 0 .3rem;
  font-family: var(--display);
  font-weight:250;
  font-size:clamp(2.1rem,8vw,3.1rem);
  line-height:1;
  letter-spacing:-.02em;
}
.day__when{
  margin:0;
  font-family: var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,3.9vw,1.3rem);
  color: var(--accent);
}

/* shared hairline flourish */
.flourish{
  display:flex; align-items:center; gap:.7rem;
  margin:clamp(1.4rem,4vw,1.9rem) auto;
  max-width:11rem;
}
.flourish i{
  flex:1; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
}
.flourish i:first-child{ transform:scaleX(-1); }
.flourish b{
  width:.35rem; height:.35rem; rotate:45deg;
  background: var(--accent);
}

/* an engraved schedule rather than a plain list */
.detail{ margin:0 auto 2rem; max-width:34rem; }
.detail > div{
  display:grid; gap:.4rem;
  padding:1rem 0;
  border-top:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.detail > div:last-child{
  border-bottom:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.detail dt{
  margin:0;
  font-weight:400;
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.detail dd{
  margin:0;
  font-weight:400;
  font-size:1.0625rem; line-height:1.65;
  color: var(--text);
}

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* centred on a phone; the two-column plate takes over on wide screens */
.day__copy{ text-align:center; }
.day__copy .detail > div{ justify-items:center; }


/* the bridge between the two days — it says what happens next rather than
   just changing colour */
.bridge{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:clamp(.75rem,3vw,1.25rem);
  margin:clamp(2.5rem,7vw,4rem) auto 0;
  max-width:34rem;
  text-decoration:none;
}
.bridge__mark{
  flex:none;
  display:grid; justify-items:center; gap:.45rem;
}
.bridge:hover .bridge__lily{ transform:translateY(2px); }
.bridge__rule{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent));
}
.bridge__rule:last-child{ transform:scaleX(-1); }
.bridge__lily{
  flex:none; width:1.15rem;
  transition:transform .4s var(--ease);
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  stroke-width:3;
}
.bridge__text{
  flex:none;
  font-size:.5625rem; letter-spacing:.3em; text-transform:uppercase;
  color: var(--accent);
  text-align:center;
}

/* dusk — short and low in chroma. A long ramp from cream to near-black has
   to pass through something, and the longer it lingers the muddier it looks. */
.nightfall{
  height:clamp(3rem,8vh,4.5rem);
  background:linear-gradient(180deg,
    #F9F3E5  0%,
    #C9AFA8 42%,
    #4A2028 78%,
    #190A0E 100%);
}

.day--church{
  background: color-mix(in srgb, var(--cream) 32%, var(--lily));
  padding-bottom: clamp(2.5rem,7vh,4rem) !important;
}


/* ── night sections share one inverted palette ── */
[data-act="night"] .detail dd,
[data-act="night"] .beat__note,
[data-act="night"] .rsvp__note,
[data-act="night"] p{ font-weight:400; }

[data-act="night"]{
  --paper: var(--night);
  --text:  var(--cream);
  --muted: color-mix(in srgb, var(--cream) 70%, transparent);
  --rule:  color-mix(in srgb, var(--gilt) 26%, transparent);
  --accent: var(--gilt);
  background: var(--paper);
  color: var(--text);
}
[data-act="night"] .beat__gap--zero{ color: var(--night); }


/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.btn{
  display:inline-block;
  padding:.9rem 1.6rem;
  font-family: var(--body); font-weight:400;
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  line-height:1;
  color: var(--text);
  text-decoration:none;
  background:transparent;
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius:2rem;
  cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--lily);
}
[data-act="night"] .btn:hover{ color: var(--night); }

.btn--ghost{ border-style:dashed; }

.btn--solid{
  background: var(--wine);
  border-color: var(--wine);
  color: var(--cream);
  width:100%;
  padding-block:1.05rem;
}
.btn--solid:hover{ background: var(--plum); border-color: var(--plum); color: var(--cream); }
.btn--solid[disabled]{ opacity:.5; cursor:progress; }


/* ═══════════════════════════════════════════════════════════
   RSVP
   ═══════════════════════════════════════════════════════════ */

.rsvp{ padding-bottom: clamp(2.5rem,7vh,4rem) !important; }

.rsvp__note{ margin:1rem 0 0; color: var(--muted); font-size:.9375rem; }
.rsvp__note b{ font-weight:400; color: var(--text); }

.rsvp__form{ display:grid; gap:1.75rem; }

.rsvp__for{
  margin:0; text-align:center;
  font-size:.8125rem; letter-spacing:.06em;
  color: var(--muted);
}
.rsvp__for b{
  display:block; margin-top:.35rem;
  font-family: var(--script); font-weight:400;
  font-size:1.5rem; letter-spacing:0;
  color: var(--gilt);
}

.choice{ border:0; margin:0; padding:0; display:grid; gap:.6rem; }
.choice legend{ margin-bottom:.6rem; padding:0; }

.choice__opt{
  display:flex; align-items:center; gap:.85rem;
  padding:1rem 1.15rem;
  border:1px solid var(--rule);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.choice__opt:hover{ border-color: color-mix(in srgb, var(--gilt) 55%, transparent); }
.choice__opt input{
  appearance:none; margin:0;
  width:1rem; height:1rem; flex:none;
  border:1px solid var(--gilt); border-radius:50%;
  transition:box-shadow .25s var(--ease);
}
.choice__opt input:checked{ box-shadow: inset 0 0 0 4px var(--night), inset 0 0 0 1rem var(--gilt); }
.choice__opt:has(input:checked){
  border-color: var(--gilt);
  background: color-mix(in srgb, var(--gilt) 8%, transparent);
}

.field{ display:grid; gap:.5rem; }
.field .label i{ font-style:normal; opacity:.6; letter-spacing:.1em; }

.field input,
.field textarea{
  width:100%;
  padding:.85rem 1rem;
  font-family: var(--body); font-weight:300; font-size:1rem;
  color: var(--text);
  background: color-mix(in srgb, var(--cream) 7%, transparent);
  border:1px solid var(--rule);
  border-radius:2px;
  transition:border-color .3s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder{ color: color-mix(in srgb, var(--cream) 52%, transparent); }
.field input:focus,
.field textarea:focus{ border-color: var(--gilt); outline:none; }
.field textarea{ resize:vertical; }

.rsvp__status{
  margin:0; text-align:center; min-height:1.5rem;
  font-size:.875rem; color: var(--gilt);
}
.rsvp__status.is-error{ color:#E88; }


/* ═══════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════ */

.shots{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(.6rem, 2.5vw, 1rem);
}

.shots button{
  display:block; width:100%; padding:0;
  border:0; background:none; cursor:zoom-in;
  border-radius:2px; overflow:hidden;
}
.shots img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  opacity:.94;
  transition:opacity .4s var(--ease), transform .6s var(--ease);
}
.shots button:hover img{ opacity:1; transform:scale(1.03); }

.lightbox{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background: color-mix(in srgb, var(--night) 92%, transparent);
  backdrop-filter:blur(6px);
  cursor:zoom-out;
}
.lightbox img{
  max-width:100%; max-height:88vh;
  width:auto; border-radius:2px;
  box-shadow:0 2rem 5rem -1rem rgba(0,0,0,.7);
}
.lightbox__close{
  position:absolute; top:1rem; right:1rem;
  width:2.5rem; height:2.5rem;
  display:grid; place-items:center;
  font-size:1.5rem; line-height:1;
  color: var(--cream);
  background:none; border:1px solid color-mix(in srgb, var(--gilt) 40%, transparent);
  border-radius:50%; cursor:pointer;
}


/* ═══════════════════════════════════════════════════════════
   SIGN OFF
   ═══════════════════════════════════════════════════════════ */

.signoff{ text-align:center; }
.lily--signoff{ width:2.5rem; margin:0 auto 2rem; color: var(--gilt); opacity:.7; }

.signoff__line{
  margin:0 auto;
  max-width:26rem;
  font-family: var(--display); font-weight:250; font-style:italic;
  font-size:clamp(1.05rem,4vw,1.35rem);
  line-height:1.6;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}
.signoff__names{
  margin:2rem 0 .5rem;
  font-family: var(--script);
  font-size:clamp(2rem,9vw,3rem);
  color: var(--gilt);
}
.signoff__tag{
  margin:0;
  font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  color: var(--muted);
}

.signoff__contacts{
  margin-top:clamp(3rem,9vw,4.5rem);
  padding-top:clamp(2rem,6vw,2.5rem);
  border-top:1px solid var(--rule);
  display:grid; gap:.75rem; justify-items:center;
}
.signoff__contacts .label{ margin-bottom:.5rem; }

.contact{
  display:inline-flex; align-items:baseline; gap:.6rem;
  color: var(--text); text-decoration:none;
  font-size:1.0625rem; letter-spacing:.04em;
  padding:.35rem .25rem;
  transition:color .3s var(--ease);
}
.contact span{
  font-size:.5625rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--muted);
}
.contact:hover{ color: var(--gilt); }


/* ═══════════════════════════════════════════════════════════
   MUSIC
   ═══════════════════════════════════════════════════════════ */

.music{
  position:fixed; z-index:60;
  isolation:isolate;
  right:clamp(.85rem,3vw,1.5rem);
  bottom:clamp(.85rem,3vw,1.5rem);
  width:3rem; height:3rem;
  display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--gilt) 45%, transparent);
  border-radius:50%;
  background: color-mix(in srgb, #190A0E 72%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  cursor:pointer;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.music:hover{
  border-color: color-mix(in srgb, var(--gilt) 85%, transparent);
  background: color-mix(in srgb, #190A0E 88%, transparent);
}

.music__bars{
  display:flex; align-items:center; gap:3px;
  height:1rem;
}
.music__bars i{
  width:2px; height:30%;
  background: #CFB88C;
  border-radius:1px;
  transition:height .3s var(--ease), opacity .3s var(--ease);
}

/* playing: the bars move */
.music.is-playing .music__bars i{ animation: bar 1.05s ease-in-out infinite; }
.music.is-playing .music__bars i:nth-child(2){ animation-delay:.18s; }
.music.is-playing .music__bars i:nth-child(3){ animation-delay:.36s; }
@keyframes bar{ 0%,100%{ height:26%; } 50%{ height:100%; } }

/* silent: flat, dimmed, struck through */
.music:not(.is-playing) .music__bars i{ height:26%; opacity:.5; }
.music:not(.is-playing)::after{
  content:""; position:absolute;
  width:1.5rem; height:1px;
  background:#CFB88C;
  opacity:.75;
  rotate:-45deg;
}

@media (prefers-reduced-motion: reduce){
  .music.is-playing .music__bars i{ animation:none; height:70%; }
}


/* ═══════════════════════════════════════════════════════════
   LARGER SCREENS
   ═══════════════════════════════════════════════════════════ */

@media (min-width:56rem){
  .day__grid{ grid-template-columns:.9fr 1fr; gap:clamp(3rem,6vw,5rem); }
  .day__grid--flip .day__figure{ order:2; }

  /* label and value side by side, like a printed schedule */
  .day__copy{ text-align:left; }
  .day__copy .detail > div{ justify-items:start; }
  .stamp{ margin-left:0; margin-right:0; }
  .flourish{ margin-left:0; margin-right:0; }
  .detail{ margin-left:0; margin-right:0; }
  .actions{ justify-content:flex-start; }
  .detail > div{ grid-template-columns:7.5rem 1fr; gap:1.5rem; align-items:baseline; }
  .detail dt{ padding-top:.15rem; }

  .invite__parents{ grid-template-columns:1fr 1fr; gap:2rem; text-align:left; }

  .shots{ grid-template-columns:repeat(3, minmax(0,1fr)); }

  .rsvp__form{ gap:2rem; }
}


/* ═══════════════════════════════════════════════════════════
   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; }
  .hero__video{ animation:none; transform:none; }
  .envelope-tilt{ animation:none; }
  .envelope-stage::after{ animation:none; opacity:.7; }
  .invite__guest{ clip-path:none; }
  .invite__rule line{ stroke-dashoffset:0; }
}

/* dev/preview only — ?skip=1 renders every reveal in its final state */
.is-flat .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
.is-flat .invite__guest{ clip-path:none !important; animation:none !important; }
.is-flat .invite__rule line{ stroke-dashoffset:0 !important; transition:none !important; }


/* ═══════════════════════════════════════════════════════════
   ATMOSPHERE
   Flat colour reads as unfinished at this scale. Every section
   gets a paper grain and a wash of light — behind the content,
   never over it, so photographs stay untouched.
   ═══════════════════════════════════════════════════════════ */

:root{
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main > section,
main > footer{ position:relative; isolation:isolate; }

main > section > .wrap,
main > footer  > .wrap{ position:relative; z-index:2; }

/* falling petals, behind everything the guest reads */
.drift{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
}

/* the wash */
main > section::before,
main > footer::before{
  content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none;
}

/* the grain — sits under the content, over the wash */
main > section::after,
main > footer::after{
  content:""; position:absolute; inset:0; z-index:1;
  background-image: var(--grain);
  background-size:140px 140px;
  opacity:.085;
  mix-blend-mode:multiply;
  pointer-events:none;
}
[data-act="night"]::after{ opacity:.14; mix-blend-mode:screen; }

/* ── daylight ── */

.invite::before{
  background:
    radial-gradient(62% 44% at 50% -8%,  color-mix(in srgb, var(--gilt) 55%, transparent), transparent 72%),
    radial-gradient(52% 48% at 2% 92%,   color-mix(in srgb, var(--sage) 26%, transparent), transparent 74%),
    radial-gradient(46% 40% at 100% 30%, color-mix(in srgb, var(--gilt) 30%, transparent), transparent 72%),
    linear-gradient(0deg, color-mix(in srgb, var(--cream) 52%, var(--lily)), transparent 14%);
}

.countdown::before{
  background:
    radial-gradient(95% 150% at 50% 60%, color-mix(in srgb, var(--gilt) 22%, transparent), transparent 68%);
}

.story::before{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 52%, var(--lily)), transparent 16%),
    radial-gradient(52% 34% at 0% 8%,   color-mix(in srgb, var(--sage) 20%, transparent), transparent 72%),
    radial-gradient(46% 34% at 100% 46%, color-mix(in srgb, var(--gilt) 26%, transparent), transparent 72%),
    radial-gradient(60% 30% at 50% 100%, color-mix(in srgb, var(--sage) 14%, transparent), transparent 74%);
}

.day--church::before{
  background:
    /* a shaft of light, the way it comes through a window */
    linear-gradient(196deg,
      transparent 26%,
      color-mix(in srgb, var(--lily) 85%, transparent) 38%,
      color-mix(in srgb, var(--gilt) 22%, transparent) 47%,
      transparent 58%),
    radial-gradient(58% 44% at 14% -4%, color-mix(in srgb, var(--lily) 92%, transparent), transparent 68%),
    radial-gradient(52% 44% at 100% 92%, color-mix(in srgb, var(--sage) 14%, transparent), transparent 72%);
}

/* ── nightfall ── */

.day--party::before{
  background:
    linear-gradient(180deg, var(--night), transparent 14%),
    radial-gradient(46% 34% at 74% 16%, color-mix(in srgb, var(--wine) 52%, transparent), transparent 70%),
    radial-gradient(38% 30% at 22% 74%, color-mix(in srgb, var(--gilt) 16%, transparent), transparent 72%),
    radial-gradient(75% 58% at 8% 100%, color-mix(in srgb, var(--plum) 72%, transparent), transparent 74%);
}

.rsvp::before{
  background:
    linear-gradient(180deg, var(--night), transparent 12%),
    radial-gradient(52% 42% at 50% 0%,  color-mix(in srgb, var(--wine) 34%, transparent), transparent 74%),
    radial-gradient(90% 70% at 50% 120%, color-mix(in srgb, var(--gilt) 9%, transparent), transparent 70%);
}

.gallery::before{
  background:
    linear-gradient(180deg, var(--night), transparent 14%),
    radial-gradient(80% 45% at 50% 0%,
              color-mix(in srgb, var(--plum) 75%, transparent), transparent 72%);
}

.signoff{ overflow:hidden; }
.signoff::before{
  background-image:
    radial-gradient(48% 38% at 50% 14%, color-mix(in srgb, var(--wine) 30%, transparent), transparent 72%),
    radial-gradient(125% 85% at 50% 100%, transparent 52%, rgba(0,0,0,.5)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 96' fill='none' stroke='%23CFB88C' stroke-opacity='.085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 54C15 49 8.5 31 18.5 16.5 26.5 5 45 2.5 53 11c7.5 8 5 24-9 33-3.6 2.6-7.6 6.4-12 10Z'/%3E%3Cpath d='M33.5 45c-2.5-8-1.5-18 2-24.5'/%3E%3Cpath d='M32 54v38'/%3E%3Cpath d='M32 74c-6-1.5-10-6-11-12 6.5.5 10 4 11 8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center, center, right -3rem bottom -3rem;
  background-size:auto, auto, 15rem auto;
}


.signoff__share{ margin-top:1.75rem; }


/* ═══════════════════════════════════════════════════════════
   PETALS — one fall, on a yes
   ═══════════════════════════════════════════════════════════ */

.petals{
  position:fixed; inset:0; z-index:80;
  width:100%; height:100%;
  pointer-events:none;
}


/* ═══════════════════════════════════════════════════════════
   VIEW TRANSITIONS — the thumbnail grows into the lightbox
   ═══════════════════════════════════════════════════════════ */

#lightboxImg{ view-transition-name: shot; }

::view-transition-old(shot),
::view-transition-new(shot){
  animation-duration:.42s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.28s; }