/* Velvet Hour */
:root {
  /* velvet, from shadow to highlight */
  --v0: #1c0409;
  --v1: #3a0811;
  --v2: #5a0d1c;
  --v3: #7f1529;
  --v4: #a31f36;
  /* ivory silk */
  --ivory: #f8f0e0;
  --ivory-2: #efe2c8;
  --wine: #3d0a14;
  --wine-soft: #6c3a40;
  /* gold */
  --gold: #d6a84f;
  --gold-hi: #f6df9b;
  --gold-lo: #a87c2c;
  --gold-ink: #86621c;
  --on-velvet: #f4e6cf;
  --on-velvet-soft: #dcc4ae;
  --wax-1: #c9243a;
  --wax-2: #8d0f22;
  --wax-3: #4f0712;

  --script: "Great Vibes", cursive;
  --caps: "Cinzel", serif;
  --body: "EB Garamond", Georgia, serif;

  --tex: url("../assets/velvet.jpg");
  --folds:
    repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0, rgba(255,120,130,.1) 26px, rgba(0,0,0,.08) 48px, rgba(0,0,0,.52) 74px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.26) 0, rgba(255,150,150,.05) 61px, rgba(0,0,0,.28) 137px);
  --damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23c49a4f' fill-opacity='.075'%3E%3Cpath id='m' d='M90 34c13 12 20 22 7 32 16-8 26 6 17 18-5-6-13-7-19-2 5 10 4 21-5 34-9-13-10-24-5-34-6-5-14-4-19 2-9-12 1-26 17-18-13-10-6-20 7-32Z'/%3E%3Cpath d='M0-56c13 12 20 22 7 32 16-8 26 6 17 18-5-6-13-7-19-2 5 10 4 21-5 34-9-13-10-24-5-34-6-5-14-4-19 2-9-12 1-26 17-18-13-10-6-20 7-32Z' transform='translate(0 90)'/%3E%3Cpath d='M0-56c13 12 20 22 7 32 16-8 26 6 17 18-5-6-13-7-19-2 5 10 4 21-5 34-9-13-10-24-5-34-6-5-14-4-19 2-9-12 1-26 17-18-13-10-6-20 7-32Z' transform='translate(180 90)'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="crimson"] {
  --v0: #2a0509;
  --v1: #5b0a12;
  --v2: #8a0f1c;
  --v3: #b01a28;
  --v4: #d22d38;
  --wine: #4d0a10;
  --wine-soft: #753b3d;
  --wax-1: #e03344;
  --wax-2: #a81423;
  --wax-3: #5e0810;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--v0); }
html.locked, html.locked body { overflow: hidden; height: 100%; }
body {
  margin: 0;
  background: var(--v0);
  color: var(--wine);
  font: 400 1.16rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- materials ---------- */

.velvet {
  background-color: var(--v1);
  background-image:
    var(--tex),
    radial-gradient(130% 75% at 50% 42%, var(--v3) 0%, var(--v2) 38%, var(--v1) 78%, var(--v0) 125%);
  background-size: 800px 800px, 100% 100%;
  background-blend-mode: overlay, normal;
  color: var(--on-velvet);
}
.velvet.folds {
  background-image:
    var(--folds), var(--tex),
    radial-gradient(130% 75% at 50% 42%, var(--v4) 0%, var(--v3) 30%, var(--v2) 62%, var(--v1) 100%);
  background-size: 100% 100%, 100% 100%, 800px 800px, 100% 100%;
  background-blend-mode: normal, normal, overlay, normal;
}
.ivory {
  background-color: var(--ivory);
  background-image: var(--damask), linear-gradient(180deg, var(--ivory) 0%, #f4ead6 100%);
  background-size: 180px 180px, 100% 100%;
  color: var(--wine);
}
.foil {
  background: linear-gradient(105deg, #b98d39 0%, #f8e6ae 22%, #cf9f45 42%, #fff4cc 58%, #c2933c 78%, #f0d48c 100%);
  background-size: 220% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.shimmer { animation: shimmer 7s ease-in-out infinite alternate; }
@keyframes shimmer { to { background-position: 100% 0; } }

/* ---------- dividers ---------- */

.valance {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: block;
  filter: drop-shadow(0 7px 7px rgba(50, 5, 12, .34));
  pointer-events: none;
}
.val-fill { fill: var(--v1); }
.val-line { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.val-dot { fill: var(--gold); }
.gold-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  height: 7px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 18%, var(--gold) 36%, #fff0bd 52%, var(--gold) 68%, var(--gold-hi) 84%, var(--gold-lo));
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.gold-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 11px;
  height: 1px;
  background: var(--gold);
  opacity: .65;
}

/* ---------- opening ---------- */

.opening { position: fixed; inset: 0; z-index: 30; background: var(--v0); }
.stage { position: absolute; inset: 0; }
.stage canvas { display: block; width: 100%; height: 100%; }
.poster { position: absolute; inset: 0; overflow: hidden; background: var(--v0); transition: opacity .5s ease; }
.poster.hide { opacity: 0; pointer-events: none; }
.poster-curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  background-color: var(--v2);
  background-image:
    var(--folds), var(--tex),
    linear-gradient(180deg, var(--v2), var(--v3) 40%, var(--v1));
  background-size: 100% 100%, 100% 100%, 800px 800px, 100% 100%;
  background-blend-mode: normal, normal, overlay, normal;
  transition: transform .9s cubic-bezier(.7, 0, .3, 1);
}
.poster-curtain.left { left: 0; box-shadow: 8px 0 24px rgba(0,0,0,.5); }
.poster-curtain.right { right: 0; }
.fallback-open .poster-curtain.left { transform: translateX(-102%); }
.fallback-open .poster-curtain.right { transform: translateX(102%); }
.fallback-open .poster-plaque { opacity: 0; transform: translate(-50%, -80%); }
.poster-plaque {
  position: absolute;
  top: 47%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 36rem);
  padding: 1.7rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  align-items: center;
  text-align: center;
  background: var(--v0);
  border: 3px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: -11px;
  box-shadow: 0 22px 50px rgba(0,0,0,.6);
  transition: opacity .5s ease, transform .6s ease;
}
.poster-kicker, .poster-date { font: 400 .78rem/1.5 var(--caps); letter-spacing: .24em; color: var(--gold-hi); text-transform: uppercase; }
.poster-names { font: 400 clamp(2.7rem, 12vw, 3.900rem)/1.3 var(--script); padding: 0 .3em; }

.open-btn {
  position: absolute;
  left: 50%;
  bottom: max(2.2rem, calc(env(safe-area-inset-bottom) + 1.4rem));
  transform: translateX(-50%);
  min-height: 3.2rem;
  padding: .8rem 1.9rem;
  white-space: nowrap;
  background: linear-gradient(105deg, #b98d39, #f6df9b 34%, #d6a84f 62%, #f0d48c);
  border: 0;
  border-radius: 2px;
  outline: 1px solid var(--gold-hi);
  outline-offset: 4px;
  color: #3a0811;
  font: 500 .86rem/1.2 var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .6s ease, transform .3s ease;
}
.open-btn.ready { opacity: 1; animation: invite 2.8s ease-in-out infinite; }
.open-btn.gone { opacity: 0; pointer-events: none; animation: none; }
@keyframes invite { 50% { box-shadow: 0 12px 38px rgba(246, 223, 155, .42); } }
.open-btn:focus-visible, .skip-btn:focus-visible { outline: 2px solid #fff; }
.skip-btn {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: .4rem 1rem;
  background: rgba(20, 3, 7, .55);
  border: 1px solid rgba(246, 223, 155, .6);
  border-radius: 2px;
  color: var(--gold-hi);
  font: 400 .78rem var(--caps);
  letter-spacing: .14em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease .4s;
}
.skip-btn.show { opacity: 1; pointer-events: auto; }
.veil { position: fixed; inset: 0; z-index: 40; background: var(--v0); opacity: 0; pointer-events: none; }
.veil.fade { transition: opacity 1.2s ease; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  padding: max(1.1rem, env(safe-area-inset-top)) 1.1rem 4.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 130px rgba(10, 0, 3, .7);
}
.hero-frame {
  position: relative;
  z-index: 2;
  width: min(100%, 34rem);
  min-height: min(calc(100svh - 6.500rem), 46rem);
  padding: 2.4rem 1.2rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(closest-side, rgba(20, 2, 6, .42), rgba(20, 2, 6, .1) 90%);
  border: 1px solid rgba(214, 168, 79, .55);
  color: var(--gold);
}
.corner { position: absolute; width: 58px; height: 58px; color: var(--gold); pointer-events: none; }
.corner.tl { top: 5px; left: 5px; }
.corner.tr { top: 5px; right: 5px; transform: scaleX(-1); }
.corner.bl { bottom: 5px; left: 5px; transform: scaleY(-1); }
.corner.br { bottom: 5px; right: 5px; transform: scale(-1); }
.crest { display: block; width: 7.2rem; height: 7.2rem; margin: 0 auto .7rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.crest-text { font: 500 25px var(--caps); }
.hero-kicker { font: 400 .78rem/1.5 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hi); }
.hero-names { margin: .35rem 0 .25rem; font-weight: 400; display: flex; flex-direction: column; align-items: center; }
.hero-names span { font: 400 clamp(4.1rem, 19vw, 6.200rem)/1.08 var(--script); padding: .1em .32em .08em; filter: drop-shadow(0 3px 7px rgba(0,0,0,.5)); }
.hero-names em { font: 400 clamp(2.2rem, 9vw, 3rem)/1 var(--script); padding: 0 .3em; margin: -.25rem 0; }
.hero-req { max-width: 21rem; font: italic 400 1.14rem/1.45 var(--body); color: var(--on-velvet); }
.hero-date {
  margin-top: 1rem;
  padding: .55rem 0;
  border-block: 1px solid rgba(214, 168, 79, .6);
  font: 400 .84rem/1.6 var(--caps);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-hi);
}
.hero-place { margin-top: .7rem; font: italic 400 1.2rem/1.4 var(--body); color: var(--on-velvet); }
.h-item { opacity: 0; transform: translateY(16px); }
.hero-in .h-item { animation: rise 1s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-in .h-item:nth-of-type(1) { animation-delay: .15s; }
.hero-in .hero-kicker { animation-delay: .3s; }
.hero-in .hero-names { animation-delay: .45s; }
.hero-in .hero-req { animation-delay: .7s; }
.hero-in .hero-date { animation-delay: .85s; }
.hero-in .hero-place { animation-delay: 1s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: max(.8rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-height: 2.75rem;
  white-space: nowrap;
  text-decoration: none;
  font: 400 .68rem var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-hi);
}
.scroll-cue i { width: 1px; height: 1.4rem; background: linear-gradient(var(--gold-hi), transparent); animation: drip 1.9s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 50% { transform: scaleY(.55); } }

.petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: 22px;
  height: 18px;
  border-radius: 62% 38% 58% 42% / 66% 58% 42% 34%;
  background: radial-gradient(circle at 34% 28%, var(--v4), var(--v2) 62%, var(--v1));
  box-shadow: inset -2px -2px 4px rgba(0,0,0,.34), 0 3px 5px rgba(0,0,0,.28);
  animation: fall var(--d) linear var(--w) infinite;
  will-change: transform;
}
.hero.off .petal, .hero.off .shimmer { animation-play-state: paused; }
@keyframes fall {
  from { transform: translate3d(0, 0, 0) rotate3d(1, .4, .2, 0deg) scale(var(--s)); }
  50% { transform: translate3d(var(--dx), 56vh, 0) rotate3d(1, .4, .2, 300deg) scale(var(--s)); }
  to { transform: translate3d(calc(var(--dx) * -.4), 112vh, 0) rotate3d(1, .4, .2, 640deg) scale(var(--s)); }
}

/* ---------- section shell ---------- */

.sec { position: relative; padding: 6.2rem 1.25rem 5rem; }
.sec-in { position: relative; z-index: 1; width: min(100%, 38rem); margin: 0 auto; }
.sec-head { text-align: center; margin-bottom: 2.4rem; }
.orn { display: block; width: 8.6rem; height: 1.3rem; margin: 0 auto .5rem; color: var(--gold-ink); }
.velvet .orn { color: var(--gold); }
h2 {
  font: 400 clamp(3rem, 12.5vw, 4.300rem)/1.16 var(--script);
  color: var(--v2);
  padding: 0 .2em;
}
.velvet h2 {
  background: linear-gradient(105deg, #c99a42, #f8e6ae 30%, #d6a84f 55%, #fff0bd 75%, #c99a42);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sec-sub { margin-top: .35rem; font-style: italic; color: var(--wine-soft); font-size: 1.14rem; }
.velvet .sec-sub { color: var(--on-velvet-soft); }
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; transform: none; }
.center { text-align: center; }
.center-text { text-align: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: .7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font: 500 .76rem/1.3 var(--caps);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, .linkish:focus-visible, summary:focus-visible, .note-card:focus-visible, .seal-btn:focus-visible { outline: 2px solid var(--gold-lo); outline-offset: 3px; }
.btn-wine { background: var(--v2); color: var(--gold-hi); border-color: var(--gold); box-shadow: 0 8px 20px rgba(58, 8, 17, .28); }
.btn-line { background: transparent; color: var(--wine); border-color: var(--gold-ink); }
.btn-gold { background: linear-gradient(105deg, #c99a42, #f6df9b 40%, #d6a84f 70%, #f0d48c); color: #3a0811; }
.btn-ghost { background: transparent; color: var(--gold-hi); border-color: var(--gold); }
.btn.wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.5rem; }
.linkish { min-height: 2.75rem; background: none; border: 0; padding: .3rem .4rem; cursor: pointer; font-style: italic; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

/* ---------- letter ---------- */

.letter-sec { padding-top: 6.800rem; }
.letter {
  position: relative;
  padding: 3.2rem 1.8rem 2.900rem;
  text-align: center;
  background: #fffaf0;
  border: 1px solid rgba(168, 124, 44, .55);
  box-shadow: 0 24px 50px rgba(61, 10, 20, .13);
}
.letter .corner { color: var(--gold-lo); width: 48px; height: 48px; }
.letter-hi { font: 400 clamp(2.2rem, 9vw, 2.900rem)/1.2 var(--script); color: var(--v2); margin-bottom: .9rem; }
.letter-body { font-size: 1.24rem; line-height: 1.62; }
.letter-sign { margin-top: 1.4rem; font-style: italic; color: var(--gold-ink); }

/* ---------- wax seal ---------- */

.seal-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.envelope {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 4 / 4.6;
  display: grid;
  place-items: center;
  background: var(--ivory);
  background-image: linear-gradient(135deg, #fffaf0, var(--ivory-2));
  color: var(--wine);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(214, 168, 79, .7);
}
.envelope .corner { color: var(--gold-lo); width: 46px; height: 46px; }
.env-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .9s ease .25s, transform 1.1s cubic-bezier(.2, .7, .2, 1) .25s;
}
.is-open .env-date { opacity: 1; transform: none; }
.env-weekday, .env-my, .env-time { font: 400 .84rem/1.5 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.env-day { font: 400 clamp(5.200rem, 25vw, 7rem)/1.05 var(--caps); color: var(--v2); }
.env-time { margin-top: .5rem; letter-spacing: .12em; }
.seal-btn {
  position: absolute;
  top: 50%; left: 50%;
  width: 11rem; height: 11rem;
  margin: -5.5rem 0 0 -5.5rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transform: scale(calc(1 - var(--p, 0) * .07));
  filter: drop-shadow(0 12px 14px rgba(30, 2, 8, .45));
}
.is-holding .seal-btn { animation: tremble .13s linear infinite; }
@keyframes tremble { 50% { translate: .8px -.8px; } }
.seal-half { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.3, .7, .2, 1), opacity .85s ease .1s; }
.seal-half svg { display: block; width: 100%; height: 100%; }
.seal-half.l { clip-path: polygon(0 0, 52% 0, 47% 20%, 54% 38%, 46% 58%, 53% 78%, 48% 100%, 0 100%); }
.seal-half.r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 53% 78%, 46% 58%, 54% 38%, 47% 20%); }
.is-open .seal-half.l { transform: translate(-115%, 26%) rotate(-48deg); opacity: 0; }
.is-open .seal-half.r { transform: translate(115%, 34%) rotate(54deg); opacity: 0; }
.wax-1 { stop-color: var(--wax-1); }
.wax-2 { stop-color: var(--wax-2); }
.wax-3 { stop-color: var(--wax-3); }
.seal-text { font: 500 34px var(--caps); fill: #000; fill-opacity: .5; stroke: #ffb0b0; stroke-opacity: .32; stroke-width: .7; }
.seal-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.seal-ring circle { fill: none; stroke: var(--gold-lo); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.is-open .seal-ring { opacity: 0; transition: opacity .25s ease; }
.seal-hint { margin-top: 1.2rem; font-style: italic; color: var(--on-velvet); transition: opacity .4s ease; }
.seal-wrap .linkish { color: var(--on-velvet-soft); font-size: 1rem; }
.is-open .seal-hint, .is-open .linkish { visibility: hidden; }

/* ---------- calendar ---------- */

.cal { max-width: 25rem; margin: 0 auto 2rem; padding: 1.4rem 1rem; background: #fffaf0; border: 1px solid rgba(168, 124, 44, .5); }
.cal-month { text-align: center; font: 500 .9rem var(--caps); letter-spacing: .18em; text-transform: uppercase; margin-bottom: .8rem; color: var(--v2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; row-gap: .25rem; }
.cal-grid span { display: grid; place-items: center; min-height: 2.45rem; font-size: 1.1rem; }
.cal-wd span { min-height: 1.800rem; font: 400 .66rem var(--caps); letter-spacing: .05em; color: var(--gold-ink); text-transform: uppercase; }
.is-day { position: relative; }
.is-day b {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  font-weight: 500;
  color: var(--gold-hi);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--v4), var(--v2) 62%, var(--v1));
  box-shadow: 0 0 0 2px #fffaf0, 0 0 0 3px var(--gold), 0 6px 14px rgba(58, 8, 17, .4);
}
.count { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin: 0 auto 1.8rem; max-width: 25rem; }
.count > div { display: flex; flex-direction: column; align-items: center; padding: .9rem .1rem .7rem; box-shadow: 0 0 0 1px var(--gold), 0 10px 20px rgba(58, 8, 17, .22); }
.count b { font: 400 clamp(1.5rem, 7vw, 2rem)/1.15 var(--caps); color: var(--gold-hi); font-variant-numeric: lining-nums; }
.count span { font: 400 .58rem var(--caps); letter-spacing: .08em; text-transform: uppercase; margin-top: .25rem; }
.count-msg { text-align: center; font: 400 2.2rem/1.3 var(--script); color: var(--v2); margin-bottom: 1.6rem; }

/* ---------- programme ---------- */

.rail-wrap { position: relative; padding-left: 2.6rem; }
.rail { position: absolute; top: .5rem; bottom: .5rem; left: .8rem; width: 1px; background: rgba(214, 168, 79, .36); }
.rail i { position: absolute; inset: 0; width: 2px; margin-left: -.5px; transform-origin: top; transform: scaleY(0); background: linear-gradient(var(--gold-hi), var(--gold)); }
.moments { display: grid; gap: 2.2rem; }
.moment { position: relative; display: flex; flex-direction: column; opacity: .5; transition: opacity .6s ease; }
.moment.lit { opacity: 1; }
.moment-gem {
  position: absolute;
  top: .46rem;
  left: -2.28rem;
  width: .95rem;
  height: .95rem;
  transform: rotate(45deg);
  background: var(--v1);
  border: 1px solid var(--gold);
  transition: background-color .5s ease, box-shadow .5s ease;
}
.moment.lit .moment-gem { background: var(--gold-hi); box-shadow: 0 0 13px rgba(246, 223, 155, .75); }
.moment time { font: 400 1.05rem var(--caps); letter-spacing: .1em; color: var(--gold-hi); font-variant-numeric: lining-nums; }
.moment strong { font: 400 2rem/1.18 var(--script); color: var(--on-velvet); margin-top: .1rem; }
.moment-place { font-style: italic; color: var(--on-velvet-soft); }

/* ---------- venue ---------- */

.venue { text-align: center; }
.venue-med {
  width: min(100%, 26rem);
  margin: 0 auto 1.5rem;
  padding: 1.5rem 1.5rem 1rem;
  border-radius: 13rem 13rem 0 0;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 7px var(--ivory), 0 0 0 8px var(--gold), 0 24px 44px rgba(58, 8, 17, .3);
}
.venue-art { display: block; width: 100%; height: auto; color: var(--gold-hi); margin-top: 2.2rem; }
.venue h3 { font: 400 clamp(1.6rem, 7vw, 2rem)/1.3 var(--caps); color: var(--v2); margin-top: 2rem; }
.venue-addr { color: var(--wine); margin-top: .2rem; }
.venue-when { font-style: italic; color: var(--wine-soft); }
.venue-notes, .dress-notes { display: grid; gap: 1.2rem; margin-top: 2rem; text-align: left; }
.venue-notes > div, .dress-notes > div { padding-left: 1rem; border-left: 1px solid var(--gold); }
.venue-notes strong, .dress-notes strong { display: block; font: 500 .84rem/1.4 var(--caps); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .15rem; color: var(--v2); }
.dress-notes strong { color: var(--gold-hi); }

/* ---------- dress ---------- */

.swatches { display: flex; justify-content: center; gap: .55rem; flex-wrap: nowrap; }
.swatches li { width: 3.95rem; min-width: 0; text-align: center; font-size: .92rem; line-height: 1.2; }
.swatches i {
  display: block;
  width: 100%;
  height: 6.200rem;
  margin-bottom: .5rem;
  border-radius: 3rem 3rem 0 0;
  background-image: var(--tex), linear-gradient(115deg, rgba(255,255,255,.2), rgba(0,0,0,.24));
  background-size: 420px 420px, 100% 100%;
  background-blend-mode: overlay, normal;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px rgba(18, 2, 6, .4), 0 0 0 5px rgba(214, 168, 79, .6), 0 12px 20px rgba(0,0,0,.4);
}

/* ---------- details ---------- */

.notes {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: -1.25rem;
  padding: .5rem 1.25rem 1.2rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.notes::-webkit-scrollbar { display: none; }
.note-card {
  flex: 0 0 min(82%, 19.500rem);
  scroll-snap-align: center;
  padding: 1.7rem 1.4rem;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px transparent, 0 18px 30px rgba(58, 8, 17, .28);
  outline: 1px solid rgba(214, 168, 79, .55);
  outline-offset: -7px;
}
.note-num { font: 400 .68rem var(--caps); letter-spacing: .15em; color: var(--gold-hi); }
.note-card h3 { font: 400 2.1rem/1.2 var(--script); margin: .35rem 0 .45rem; color: var(--gold-hi); }
.note-card .linkish { display: inline-block; margin-top: .6rem; padding-left: 0; color: var(--gold-hi); }
.note-dots { display: flex; justify-content: center; gap: .55rem; }
.note-dots i { width: .5rem; height: .5rem; transform: rotate(45deg); background: rgba(134, 98, 28, .3); transition: background-color .3s ease; }
.note-dots i.on { background: var(--gold-ink); }

/* ---------- form ---------- */

.form {
  position: relative;
  padding: 2.8rem 1.4rem 2rem;
  background: #fffaf0;
  color: var(--wine);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px var(--gold);
}
.form .corner { color: var(--gold-lo); width: 44px; height: 44px; }
.field { margin-bottom: 1.4rem; position: relative; }
.field > label, .stepper-row > span, .fs > legend { display: block; font: 500 .74rem/1.45 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--v2); margin-bottom: .45rem; padding: 0; }
.field input, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: .55rem .15rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gold-ink);
  border-radius: 0;
  font-size: 1.15rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--v2); box-shadow: 0 1px 0 var(--v2); }
.field textarea { resize: vertical; }
.fs { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pills.stack { flex-direction: column; }
.pill { position: relative; display: block; }
.pills.stack .pill { width: 100%; }
.pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: .45rem 1.05rem;
  text-align: center;
  border: 1px solid rgba(134, 98, 28, .75);
  border-radius: 2px;
  transition: background-color .2s ease, color .2s ease;
}
.pill input:checked + span { background: var(--v2); color: var(--gold-hi); border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--v2), inset 0 0 0 3px var(--gold); }
.pill input:focus-visible + span { outline: 2px solid var(--v2); outline-offset: 2px; }
.help { font-size: 1rem; font-style: italic; color: var(--wine-soft); margin-top: .35rem; }
.form > .help { margin-top: .9rem; }
.err { color: #a50f25; font-size: 1.02rem; margin-top: .35rem; }
.stepper-row { display: flex; align-items: center; justify-content: space-between; }
.stepper { display: flex; align-items: center; gap: .7rem; }
.stepper button { width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--gold-ink); border-radius: 50%; cursor: pointer; font-size: 1.2rem; }

.done { text-align: center; outline: none; }
.ticket {
  position: relative;
  width: min(100%, 23rem);
  margin: 0 auto;
  padding: 2.8rem 1.4rem 2.200rem;
  box-shadow: inset 0 0 0 1px var(--gold), 0 30px 54px rgba(0,0,0,.55);
  outline: 1px solid var(--gold);
  outline-offset: 6px;
}
.ticket .corner { width: 42px; height: 42px; }
.ticket-kicker { font: 400 .78rem var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hi); }
.ticket-name { font: 400 clamp(2.8rem, 12vw, 3.500rem)/1.25 var(--script); padding: .1em .25em; overflow-wrap: anywhere; }
.ticket dl { display: grid; gap: .6rem; margin: 1.1rem 0; padding: 1rem 0; border-block: 1px solid rgba(214, 168, 79, .55); }
.ticket dt { font: 400 .66rem var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); }
.ticket-foot { font: 400 1.9rem/1.35 var(--script); padding: 0 .3em; }
.done-msg { margin-top: 1.6rem; font: 400 2.5rem/1.3 var(--script); padding: 0 .2em; }
.done-msg.plain { font: italic 400 1.4rem/1.45 var(--body); color: var(--on-velvet); }

/* ---------- faq ---------- */

.faq details { border-bottom: 1px solid rgba(134, 98, 28, .5); }
.faq summary {
  position: relative;
  display: block;
  min-height: 3.2rem;
  padding: .85rem 2.4rem .85rem 0;
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 1.35rem;
  width: .62rem;
  height: .62rem;
  transform: rotate(45deg);
  background: var(--gold-ink);
  transition: transform .3s ease, background-color .3s ease;
}
.faq details[open] summary::after { transform: rotate(135deg) scale(.6); background: var(--v2); }
.faq p { padding-bottom: 1.1rem; color: var(--wine-soft); }

/* ---------- closing ---------- */

.closing { min-height: 92svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding-bottom: 6rem; background-image: var(--tex), radial-gradient(70% 55% at 50% 50%, var(--v2), var(--v1) 60%, var(--v0)); background-size: 800px 800px, 100% 100%; background-blend-mode: overlay, normal; }
.close-curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 37%;
  max-width: 34rem;
  background-color: var(--v3);
  background-image: var(--folds), var(--tex), linear-gradient(180deg, var(--v3), var(--v2));
  background-size: 100% 100%, 100% 100%, 800px 800px, 100% 100%;
  background-blend-mode: normal, normal, overlay, normal;
  filter: drop-shadow(0 0 22px rgba(0,0,0,.65));
}
.close-curtain.left { left: 0; clip-path: polygon(0 0, 100% 0, 88% 18%, 62% 44%, 26% 66%, 42% 100%, 0 100%); }
.close-curtain.right { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 58% 100%, 74% 66%, 38% 44%, 12% 18%); }
.closing .sec-in { width: min(100%, 25rem); }
.closing .crest { width: 6.2rem; height: 6.2rem; }
.closing h2 { font-size: clamp(2.9rem, 12vw, 4rem); }
.closing-names { font: 400 clamp(2.3rem, 10vw, 3.100rem)/1.3 var(--script); margin-top: .3rem; padding: 0 .25em; }
.closing-date { margin-top: .6rem; font-style: italic; color: var(--on-velvet); }

/* ---------- floating controls ---------- */

.reply-dock {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 160%);
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.4rem;
  white-space: nowrap;
  background: linear-gradient(105deg, #c99a42, #f6df9b 40%, #d6a84f 70%, #f0d48c);
  color: #3a0811;
  border-radius: 2px;
  outline: 1px solid rgba(246, 223, 155, .8);
  outline-offset: 3px;
  font: 500 .72rem var(--caps);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.reply-dock.show { transform: translate(-50%, 0); }
.music-btn {
  position: fixed;
  z-index: 21;
  top: max(.8rem, env(safe-area-inset-top));
  right: .8rem;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: rgba(28, 4, 9, .75);
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-hi);
  cursor: pointer;
}
.music-btn.on { box-shadow: 0 0 14px rgba(246, 223, 155, .5); }

/* ---------- wider screens ---------- */

@media (min-width: 760px) {
  body { font-size: 1.24rem; }
  .sec { padding: 7.500rem 2rem 6.500rem; }
  .sec-in { width: min(100%, 44rem); }
  .hero-frame { padding: 2.6rem 3rem; }
  .corner { width: 76px; height: 76px; }
  .letter { padding: 4rem 4rem 3.6rem; }
  .venue-notes, .dress-notes { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .form { padding: 3.4rem 3.2rem 2.6rem; }
  .pills.stack { flex-direction: row; }
  .pills.stack .pill { width: auto; flex: 1; }
  .swatches { gap: 1rem; }
  .swatches li { width: 5.5rem; font-size: 1.04rem; }
  .swatches i { height: 8.2rem; }
  .notes { margin-inline: 0; padding-inline: 0; justify-content: flex-start; }
  .note-card { flex-basis: 19.500rem; }
  .rail-wrap { padding-left: 0; }
  .rail { left: 50%; }
  .moments { gap: 1.5rem; }
  .moment { width: calc(50% - 2.4rem); text-align: right; }
  .moment:nth-child(even) { margin-left: auto; text-align: left; }
  .moment-gem { left: auto; right: -2.9rem; }
  .moment:nth-child(even) .moment-gem { right: auto; left: -2.9rem; }
  .count > div { padding-block: 1.1rem .9rem; }
  .count span { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shimmer, .open-btn.ready, .scroll-cue i, .is-holding .seal-btn { animation: none; }
  .h-item { opacity: 1; transform: none; animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
  .seal-half, .env-date, .poster-curtain, .poster-plaque { transition-duration: .01s; transition-delay: 0s; }
  .reply-dock { transition: none; }
}