/* Tadiwanashe & Ephraim. Opening: the couple's seal-and-ribbon picture; tapping the seal breaks it and the picture splits open.
   Then the wedding website: EverVow "Purely Us" (the couple's chosen template) in midnight navy, cherry red and champagne gold. */

:root {
  --navy: #0B1533;
  --navy-2: #15213b;
  --navy-3: #1f2e4f;
  --red: #B11232;
  --red-deep: #8f0b20;
  --paper: #FFF8F2;
  --paper-2: #efe6d6;
  --ink: #16203a;
  --muted: #6a6f7d;
  --champagne: #D4AF73;
  --powder: #b9d3ea;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  background: var(--navy); color: var(--paper);
  font: 300 17px/1.6 var(--sans);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  overflow-x: hidden;
}
body.stage-intro { overflow: hidden; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.1; }

.kicker { font: 500 12px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--champagne); margin: 0 0 14px; }
.btn-light, .btn-dark, .btn-red, .btn-line {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 30px;
  border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .3s, color .3s, transform .3s, border-color .3s;
}
.btn-light { border: 1px solid rgba(248,243,234,.55); background: transparent; color: var(--paper); }
.btn-light:hover { background: var(--paper); color: var(--navy); }
.btn-dark { border: 1px solid var(--navy); background: var(--navy); color: var(--paper); }
.btn-dark:hover { background: var(--red); border-color: var(--red); }
.btn-red { border: 1px solid var(--red); background: var(--red); color: #fff; width: 100%; }
.btn-red:hover { background: var(--red-deep); }
.btn-red[disabled] { opacity: .6; cursor: wait; }
.btn-line { border: 1px solid #cfc4b2; background: transparent; color: var(--navy); }
.btn-line:hover { border-color: var(--navy); }

/* Music toggle */
.sound {
  position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(217,196,160,.5); background: rgba(11,19,36,.7); backdrop-filter: blur(6px);
  display: grid; place-items: center; cursor: pointer;
}
.sound svg { width: 22px; height: 22px; fill: none; stroke: var(--champagne); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound svg path:first-child { fill: var(--champagne); }
.sound.off .wave { opacity: .15; }

/* ---------- Opening: the seal and ribbon ----------
   The couple's picture (public/images/opening.webp with .jpg fallback, 1202 x 1308) fills the screen like a cover photo.
   .cover-box is sized the way "cover" crops it, so the invisible button always sits exactly on the painted seal.
   Tapping the seal starts the music, cracks the seal, and the picture splits open onto the website. */
.scene {
  position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #f8f1ec;
  transform-origin: 0 50%;
}
.cover-box {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  /* wide screens: at most a little larger than the screen height, with the sides fading into the ivory;
     tall phones: zoomed only until "Tap the seal to open" would be cut */
  width: max(min(100vw, calc(100svh * 1202 / 1308 * 1.12)), min(calc(100svh * 1202 / 1308), 165vw)); aspect-ratio: 1202 / 1308;
  /* on tall phones it stops zooming before "Tap the seal to open" is cut, and the edges fade into the ivory */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
  animation: settle 2.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes settle { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }
.cover-box picture { display: block; width: 100%; height: 100%; }
.cover-img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.seal-hit {
  position: absolute; left: 49.7%; top: 43.4%; width: 26%; aspect-ratio: 1; translate: -50% -50%;
  border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: scale .25s;
}
.seal-hit::after {
  content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1.5px solid rgba(212,175,115,.85);
  opacity: 0; animation: invite 2.8s 2.2s ease-out infinite; pointer-events: none;
}
@keyframes invite { 0% { opacity: .9; transform: scale(.85); } 70%, 100% { opacity: 0; transform: scale(1.3); } }
.seal-hit:hover::after { animation-duration: 1.6s; }
.seal-hit.pressed { scale: .94; }
.whole, .half, .half-in { position: absolute; inset: 0; }
.whole picture { display: block; width: 100%; height: 100%; }
/* the picture shows whole (no seam) until it splits; then the two halves take over in the same place */
.half { visibility: hidden; }
.intro-scene.split .half { visibility: visible; }
.intro-scene.split .whole { visibility: hidden; }
.half { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transition: transform 1.5s cubic-bezier(.65,0,.25,1), filter 1.5s; }
.half-in picture { display: block; width: 100%; height: 100%; }
.seal-hit:focus { outline: none; }
.seal-hit:focus-visible::after { opacity: 1; animation: none; }
.dear {
  position: absolute; left: 0; right: 0; top: max(28px, 6svh); margin: 0; text-align: center;
  font: 400 12px/1.6 Georgia, serif; letter-spacing: .32em; text-transform: uppercase; color: var(--navy);
  animation: rise 1.6s .8s both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 50% { opacity: .35; } }

/* breaking the seal: a crack runs through it, wax crumbs fly, then the picture splits along the crack */
.crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.crack polyline { fill: none; stroke: #2a0309; stroke-width: 2.4px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; filter: drop-shadow(0 0 2px rgba(255,214,160,.7)); }
.crumbs { position: absolute; left: 49.7%; top: 43.4%; width: 0; height: 0; pointer-events: none; }
.crumbs i { position: absolute; width: 12px; height: 9px; border-radius: 40% 60% 50% 45%; background: radial-gradient(circle at 35% 30%, #d8274a, #7f0c23); opacity: 0; }
.intro-scene.breaking .seal-hit::after { animation: none; opacity: 0; }
.intro-scene.breaking .cover-box { animation: shake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 20%, 80% { translate: calc(-50% - 1px) -50%; } 40%, 60% { translate: calc(-50% + 2px) -50%; } }
.intro-scene.breaking .crack polyline { animation: crack .45s ease-out forwards; }
@keyframes crack { to { stroke-dashoffset: 0; } }
.intro-scene.breaking .crumbs i { animation: crumb .9s .3s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes crumb { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--r)); } }
.intro-scene.split { background: transparent; pointer-events: none; }
.intro-scene.split .crack, .intro-scene.split .crumbs { display: none; }
.intro-scene.split .half-l { transform: translateX(-62%) rotate(-4deg); filter: drop-shadow(14px 0 24px rgba(0,0,0,.28)); }
.intro-scene.split .half-r { transform: translateX(62%) rotate(4deg); filter: drop-shadow(-14px 0 24px rgba(0,0,0,.28)); }
.intro-scene.split .dear { opacity: 0; transition: opacity .4s; }
@media (prefers-reduced-motion: reduce) { .intro-scene.split { opacity: 0; transition: opacity .6s; } }

/* ---------- The wedding website: EverVow "Purely Us" (the template the couple chose) in their colours ----------
   White page, spaced Georgia capitals, quiet hairlines. Midnight navy carries the type, the RSVP button and
   two bands (The day, footer); cherry red is the "&" and small accents; champagne gold is the fine rules.
   Phones: text on top, photo below. Laptops: 40/60 split with the photo on the right. */
.site {
  --ink: #0B1533;
  --text: #2b3350;
  --soft: #646b7f;
  --red: #B11232;
  --gold: #D4AF73;
  --gold-ink: #a8854c;
  --tint: #FFF8F2;
  --line: rgba(11,21,51,.13);
  --pu: Georgia, "Times New Roman", serif;
  min-height: 100svh; background: #fff; color: var(--text); font: 400 18px/1.7 var(--pu);
}
body.stage-site { background: #fff; }
.site a { color: inherit; }
.site :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* top bar */
.pu-nav {
  position: sticky; top: 0; z-index: 40; height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: max(0px, env(safe-area-inset-top)) 18px 0; background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.pu-brand { font: 400 22px/1 var(--pu); letter-spacing: .12em; color: var(--ink); text-decoration: none; }
.pu-brand i { font-style: normal; display: inline-block; transform: translateY(4px) scaleY(1.3); margin: 0 .08em; color: var(--red); }
.pu-links { display: none; gap: 30px; }
.pu-links a { text-decoration: none; font: 12px/1 var(--pu); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 1.5px solid transparent; transition: border-color .3s; }
.pu-links a:hover, .pu-links a.on { border-bottom-color: var(--red); }
.pu-right { display: flex; align-items: center; gap: 6px; }
.pu-rsvp { background: var(--ink); color: #fff !important; text-decoration: none; font: 12px/1 var(--pu); letter-spacing: .24em; padding: 11px 20px; transition: background .3s; }
.pu-rsvp:hover { background: var(--red); }
.pu-menu { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-content: center; gap: 7px; }
.pu-menu span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s; }
.pu-menu[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.pu-menu[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.pu-drawer { position: fixed; inset: 64px 0 0; z-index: 39; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 20px; background: #fff; animation: fadein .3s both; }
.pu-drawer a { font: 15px/2.6 var(--pu); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.pu-drawer a:hover { color: var(--red); }

/* hero */
.pu-hero { display: grid; grid-template-rows: auto minmax(360px, 62svh); }
.pu-title { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 16px 30px; }
.pu-kicker { margin: 0 0 18px; font: 10.5px/1.9 var(--pu); letter-spacing: .3em; text-transform: uppercase; color: var(--soft); }
.pu-names { margin: 0; font: 400 clamp(27px, 8.2vw, 40px)/1 var(--pu); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.amp { display: block; margin: .22em 0; font: 400 .7em/1 var(--pu); letter-spacing: 0; color: var(--red); }
.pu-rule { display: block; width: 40px; height: 1.5px; margin: 20px auto 14px; background: var(--gold); }
.pu-date { margin: 0; font: 15px/1 var(--pu); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.pu-place { margin: 10px 0 0; font: 10.5px/1 var(--pu); letter-spacing: .32em; text-transform: uppercase; color: var(--soft); }
.pu-tag { margin: 18px 0 0; font: 15px/1.5 var(--pu); color: var(--text); }
.pu-open { margin-top: 22px; font: 11px/1 var(--pu); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--red); }
.pu-open:hover { color: var(--red); }
.pu-photo { background: #f3f1ee url("/images/standing.jpg") center 22% / cover no-repeat; }
@media (min-width: 900px) {
  .pu-nav { height: 92px; padding: 0 clamp(32px, 5vw, 84px); }
  .pu-brand { font-size: 30px; }
  .pu-links { display: flex; }
  .pu-menu { display: none; }
  .pu-rsvp { padding: 15px 40px; font-size: 13px; }
  .pu-drawer { display: none !important; }
  .pu-hero { height: calc(100svh - 92px); min-height: 560px; grid-template-rows: 1fr; grid-template-columns: 40% 60%; }
  .pu-title { justify-content: center; padding: 40px 3vw 60px; }
  .pu-kicker { font-size: 12px; }
  .pu-names { font-size: clamp(34px, 3.4vw, 58px); }
  .pu-date { font-size: 20px; }
  .pu-place { font-size: 13px; }
  .pu-tag { font-size: 18px; }
  .pu-photo { background-position: center 25%; }
}

/* sections */
.pu-sec { padding: clamp(64px, 10vw, 110px) 18px; text-align: center; scroll-margin-top: 64px; }
@media (min-width: 900px) { .pu-sec { scroll-margin-top: 92px; } }
.pu-sec.tint { background: var(--tint); }
.pu-in { max-width: 1000px; margin: 0 auto; }
.pu-in.narrow { max-width: 620px; }
.pu-k { margin: 0 0 14px; font: 11px/1.6 var(--pu); letter-spacing: .32em; text-transform: uppercase; color: var(--red); }
.pu-h { margin: 0; font: 400 clamp(24px, 5vw, 34px)/1.3 var(--pu); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.pu-h.big { font-size: clamp(27px, 7vw, 44px); letter-spacing: .08em; line-height: 1; }
.pu-sec p { margin: 0 0 16px; }
.pu-lead { font-size: 19px; color: var(--soft); }
.pu-lead b { font-weight: 400; color: var(--ink); }
.pu-when { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 26px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 11px/1 var(--pu); letter-spacing: .26em; text-transform: uppercase; color: var(--soft); }
.pu-when strong { font: 400 22px/1.2 var(--pu); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.pu-verse { margin: 26px 0 30px !important; font: 19px/1.5 var(--pu); color: var(--ink); }
.pu-verse span { display: block; margin-top: 6px; font: 10.5px/2 var(--pu); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-ink); }
.count { display: flex; justify-content: center; gap: 10px; margin: 0 0 32px; }
.count span { min-width: 84px; padding: 14px 6px 12px; border: 1px solid var(--line); font: 10px/1 var(--pu); letter-spacing: .22em; text-transform: uppercase; color: var(--soft); }
.count b { display: block; margin-bottom: 8px; font: 400 30px/1 var(--pu); letter-spacing: 0; color: var(--ink); }
.pu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 30px; border: 1px solid var(--ink); background: var(--ink); color: #fff !important; text-decoration: none; cursor: pointer; font: 12px/1 var(--pu); letter-spacing: .24em; text-transform: uppercase; transition: background .3s, border-color .3s; }
.pu-btn:hover { background: var(--red); border-color: var(--red); }
.pu-btn.red { background: var(--red); border-color: var(--red); }
.pu-btn.red:hover { background: #8c0e28; border-color: #8c0e28; }
.pu-btn.line { background: transparent; color: var(--ink) !important; }
.pu-btn.full { width: 100%; margin-top: 8px; }
.pu-btn[disabled] { opacity: .6; cursor: wait; }

/* story */
.chapters { display: grid; gap: 48px; margin-top: 14px; }
.chapter { display: grid; gap: 22px; align-items: center; }
.chapter img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; }
.ch-no { display: block; font: 13px/1 var(--pu); letter-spacing: .3em; color: var(--red); }
.chapter h3 { margin: 10px 0 10px; font: 400 22px/1.3 var(--pu); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.chapter p { max-width: 420px; margin: 0 auto !important; }
@media (min-width: 760px) {
  .chapter { grid-template-columns: 1fr 1fr; gap: 56px; text-align: left; }
  .chapter p { margin: 0 !important; }
  .chapter.flip img { order: 2; }
  .chapter img { aspect-ratio: 5 / 4; }
}

/* the day: a midnight-navy band */
.pu-sec.navy { background: var(--ink); color: #d6d9e3; }
.navy .pu-k { color: var(--gold); }
.navy .pu-h { color: #FFF8F2; }
.events { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 24px; }
.events > div { padding: 26px 14px; border: 1px solid rgba(212,175,115,.35); }
.ev-k { font: 10.5px/1 var(--pu); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.events h3 { margin: 12px 0 6px; font: 400 19px/1.3 var(--pu); letter-spacing: .1em; text-transform: uppercase; color: #FFF8F2; }
.events p { margin: 0 !important; font-size: 15px; color: #aab0c2; }
.addr { color: #aab0c2; }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.navy .pu-btn.line { border-color: rgba(212,175,115,.6); color: #FFF8F2 !important; }
.navy .pu-btn.line:hover { background: rgba(255,255,255,.06); }
@media (max-width: 520px) { .events { grid-template-columns: 1fr; } }

/* dress */
.swatch { display: block; width: 110px; height: 110px; margin: 0 auto 26px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #eaf2fa, var(--powder) 55%, #95b6d6); box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line); }
.avoid { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 16px; color: var(--soft); }
.x { width: 16px; height: 16px; border-radius: 50%; position: relative; }
.x::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #fff; transform: rotate(-45deg); }
.x.navy { background: var(--ink); } .x.red { background: var(--red); margin-right: 4px; }

/* moments */
.g-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.ph { padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 24%; transition: transform .6s; }
.ph:hover img { transform: scale(1.03); }
.ph.wide { grid-column: 1 / -1; }
.ph.wide img { aspect-ratio: 16 / 8; object-position: 50% 32%; }
@media (max-width: 560px) { .g-grid { grid-template-columns: 1fr 1fr; } .g-grid .ph:nth-child(3) { display: none; } }
.credit { margin: 22px 0 0 !important; font: 10.5px/1.8 var(--pu); letter-spacing: .22em; text-transform: uppercase; color: var(--soft); }

/* RSVP */
.form { margin-top: 28px; text-align: left; }
.field { display: block; margin-bottom: 20px; }
.field > span, .choice legend { display: block; margin-bottom: 6px; font: 10.5px/1.4 var(--pu); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.field em { font-style: normal; text-transform: none; letter-spacing: 0; }
.site input, .site textarea { width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid rgba(11,21,51,.25); border-radius: 0; background: transparent; font: 400 17px/1.4 var(--pu); color: var(--ink); }
.site input:focus, .site textarea:focus { outline: none; border-color: var(--red); }
textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
.choice { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px; padding: 0; border: 0; }
.choice legend { width: 100%; margin-bottom: 10px; }
.choice label { flex: 1 1 150px; }
.choice input { position: absolute; opacity: 0; width: 1px; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: 50px; border: 1px solid rgba(11,21,51,.25); cursor: pointer; font: 12px/1 var(--pu); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); transition: all .25s; }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 3px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid rgba(11,21,51,.25); }
.stepper button { width: 46px; height: 46px; border: 0; background: none; font-size: 20px; color: var(--ink); cursor: pointer; }
.site .stepper input { width: 50px; border: 0; text-align: center; font-size: 18px; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-msg { min-height: 1.4em; margin: 14px 0 0 !important; text-align: center; font-size: 17px; }
.form-msg.ok { color: var(--ink); } .form-msg.err { color: var(--red); }
.sent-note { padding: 10px 0; text-align: center; }
.sent-note h3 { margin: 10px 0; font: 400 24px/1.3 var(--pu); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.rings-draw { width: 140px; margin: 0 auto 6px; display: block; }
.rings-draw circle { fill: none; stroke-width: 2; stroke-dasharray: 190; stroke-dashoffset: 190; }
.rings-draw circle:first-child { stroke: var(--ink); } .rings-draw circle:last-child { stroke: var(--red); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* questions */
.faq { text-align: left; }
.faq .pu-k, .faq .pu-h { text-align: center; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 18px 32px 18px 0; list-style: none; cursor: pointer; font: 17px/1.4 var(--pu); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 300 24px/1 var(--sans); color: var(--red); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--soft); }

/* footer: midnight navy */
.pu-foot { padding: 56px 16px 90px; text-align: center; background: var(--ink); color: #aab0c2; }
.pu-foot .pu-brand { color: #FFF8F2; font-size: 28px; }
.pu-fdate { margin: 14px 0 18px; font: 12px/1 var(--pu); letter-spacing: .32em; color: var(--gold); }
.made { margin: 0; font: 14px/1.4 var(--pu); color: #8f97aa; }
.made span { color: var(--red); }

/* gentle reveal as sections scroll in */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s, transform 1s; }
.reveal.in { opacity: 1; transform: none; }

/* music button on the white page */
body.stage-site .sound { background: var(--navy); border-color: rgba(212,175,115,.6); }
body.stage-site .sound svg { stroke: var(--champagne); }
body.stage-site .sound svg path:first-child { fill: var(--champagne); }

.lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(11,21,51,.94); }
.lightbox img { max-height: 88svh; width: auto; border: 8px solid #fff; }
.lb-close { position: absolute; top: 12px; right: 14px; width: 48px; height: 48px; border: 0; background: none; color: #fff; font-size: 36px; cursor: pointer; }
@keyframes fadein { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- The landing page's look carried into the website, and love all over ----------
   Ivory satin like the opening picture, its roses and seal, a cherry-red satin ribbon across the page,
   thin gold swirls, gold heart dividers under every heading and rose petals drifting over the cover. */
.site {
  --ivory: #f8f1ec;
  background:
    linear-gradient(118deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 64%, rgba(255,255,255,.5) 88%),
    var(--ivory);
}
body.stage-site { background: #f8f1ec; }
.pu-nav { background: rgba(250,244,240,.94); border-bottom-color: rgba(212,175,115,.35); }
.pu-sec.tint { background: linear-gradient(118deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%, rgba(255,255,255,.4) 75%), #f4e9e3; }

/* gold heart divider instead of the plain rule */
.pu-rule {
  width: 190px; height: 18px; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 20s-9-5.6-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.4-9 12-9 12z' fill='none' stroke='%23c9a263' stroke-width='1.6'/%3E%3C/svg%3E") center / 18px 17px no-repeat,
    linear-gradient(90deg, transparent, #D4AF73) left center / 78px 1px no-repeat,
    linear-gradient(90deg, #D4AF73, transparent) right center / 78px 1px no-repeat;
}

/* cover: seal emblem, roses, gold swirls and drifting petals */
.pu-hero { position: relative; overflow: hidden; }
.pu-title { position: relative; isolation: isolate; }
.emblem { width: 74px; height: 74px; border-radius: 50%; margin: 0 0 18px; box-shadow: 0 10px 22px -10px rgba(127,12,35,.7); }
.roses { position: absolute; pointer-events: none; z-index: -1; height: auto; }
.roses-top { left: 0; top: 0; width: min(230px, 46vw); opacity: .9; -webkit-mask-image: radial-gradient(120% 120% at 0 0, #000 45%, transparent 75%); mask-image: radial-gradient(120% 120% at 0 0, #000 45%, transparent 75%); }
.pu-title::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: -1; width: 220px; height: 120px; pointer-events: none; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 120' fill='none' stroke='%23D4AF73'%3E%3Cpath d='M220 20C150 30 90 70 10 118' stroke-width='1.2'/%3E%3Cpath d='M220 36C160 44 105 80 40 120' stroke-width='.7'/%3E%3C/svg%3E") no-repeat right bottom / contain; }
.pu-names .nm { display: block; }
.pu-photo { position: relative; overflow: hidden; background: none; }
.pu-photo::before { content: ""; position: absolute; inset: 0; background: #efe6e0 url("/images/standing.jpg") center 22% / cover no-repeat; }
@media (min-width: 900px) { .pu-photo::before { background-position: center 25%; } }
.petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.petals i { position: absolute; top: -24px; width: 13px; height: 16px; border-radius: 70% 0 70% 0; background: radial-gradient(circle at 30% 30%, #e0294d, #B11232 60%, #7f0c23); opacity: .85; animation: petal linear infinite; }
@keyframes petal { 0% { transform: translate3d(0, 0, 0) rotate(0); } 100% { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); } }

/* the cover introduces itself after the seal breaks */
.site.intro-play .emblem { animation: pop 1s .5s cubic-bezier(.3,1.5,.5,1) both; }
.site.intro-play .pu-kicker { animation: rise 1.2s .9s both; }
.site.intro-play .pu-names .nm { animation: letters 1.6s 1.1s cubic-bezier(.2,.7,.2,1) both; }
.site.intro-play .pu-names .nm + .amp + .nm { animation-delay: 1.45s; }
.site.intro-play .pu-names .amp { animation: pop .9s 1.35s cubic-bezier(.3,1.5,.5,1) both; }
.site.intro-play .pu-rule { animation: open-rule 1.2s 1.9s cubic-bezier(.2,.7,.2,1) both; }
.site.intro-play .pu-date, .site.intro-play .pu-place { animation: rise 1.2s 2.2s both; }
.site.intro-play .pu-tag, .site.intro-play .pu-open { animation: rise 1.2s 2.5s both; }
.site.intro-play .pu-photo::before { animation: photo-in 2.2s .3s cubic-bezier(.2,.7,.2,1) both, slow-zoom 14s .3s ease-out both; }
.site.intro-play .roses-top { animation: fade-in 2s .6s both; }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes letters { from { opacity: 0; letter-spacing: .4em; filter: blur(4px); } to { opacity: 1; filter: none; } }
@keyframes open-rule { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
@keyframes photo-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes slow-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } }

/* the satin ribbon with the seal, running across the page under the cover */
.love-ribbon { position: relative; height: 92px; margin: 14px 0 -30px; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.love-ribbon svg { position: absolute; left: 0; top: 50%; width: 100%; height: 60px; translate: 0 -50%; overflow: visible; filter: drop-shadow(0 8px 8px rgba(127,12,35,.3)); }
.mini-seal { position: relative; width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 10px 20px -8px rgba(80,5,20,.75); }

/* the day: a cherry-red satin band, like the ribbon */
.pu-sec.satin { position: relative; color: #f6e3e6;
  background: linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12) 92%), linear-gradient(180deg, #a8102e, #8c0e28); }
.satin .pu-k { color: #f1d9a8; }
.satin .pu-h { color: #FFF8F2; }
.satin .pu-rule { filter: brightness(1.25); }
.satin .events > div { border-color: rgba(241,217,168,.45); background: rgba(255,255,255,.05); }
.satin .ev-k { color: #f1d9a8; }
.satin .events h3 { color: #FFF8F2; }
.satin .events p, .satin .addr { color: #f0c9d0; }
.satin .pu-btn.red { background: #FFF8F2; border-color: #FFF8F2; color: var(--red) !important; }
.satin .pu-btn.red:hover { background: #fff; }
.satin .pu-btn.line { border-color: rgba(241,217,168,.7); color: #FFF8F2 !important; }
.satin .pu-btn.line:hover { background: rgba(255,255,255,.08); }

/* roses beside the RSVP */
#rsvp { position: relative; overflow: hidden; }
#rsvp > .pu-in { position: relative; z-index: 1; }
.roses-bottom { right: 0; bottom: 0; width: min(260px, 52vw); opacity: .85; -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 45%, transparent 75%); mask-image: radial-gradient(120% 120% at 100% 100%, #000 45%, transparent 75%); }

/* love on the buttons */
.hrt { display: inline-block; margin-left: 10px; color: #ffb3c0; transition: transform .3s; }
.pu-btn:hover .hrt { transform: scale(1.3); animation: beat 1s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1.2); } 30% { transform: scale(1.45); } }
.choice input:checked + span::after { content: "♥"; margin-left: 8px; color: #ff8fa3; }
.count span { border-color: rgba(212,175,115,.5); background: rgba(255,255,255,.5); }

/* footer: navy, closing with the seal */
.foot-seal { display: block; margin: 0 auto; width: 70px; height: 70px; border-radius: 50%; box-shadow: 0 10px 20px -8px rgba(0,0,0,.7); }

@media (prefers-reduced-motion: reduce) { .petals { display: none; } }

/* ---------- Soft, polished palette ("a faint beauty") ----------
   No flat bright blocks: muted wine-rose with a satin sheen for the main buttons, blush for selected states,
   champagne-gold hairlines, and a softened midnight navy for the type. */
.site {
  --ink: #1f2944;
  --text: #3a4058;
  --soft: #7a7f90;
  --wine: #94364a;
  --wine-2: #b25a6d;
  --blush: #f6e6e6;
  --blush-2: #efd6d8;
  --gold: #cfae74;
  --line: rgba(31,41,68,.12);
  --wine-satin: linear-gradient(180deg, #b8606f 0%, #9c3d50 52%, #87303f 100%);
}
.site :focus-visible { outline-color: var(--wine-2); }

/* buttons: rounded, satin, gently shadowed */
.pu-btn, .pu-btn.red {
  min-height: 48px; padding: 0 34px; border-radius: 999px; border: 1px solid rgba(207,174,116,.65);
  background: var(--wine-satin); color: #fff8f2 !important; font-size: 11.5px; letter-spacing: .26em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px -16px rgba(120,35,52,.65);
  transition: box-shadow .35s, transform .35s, filter .35s;
}
.pu-btn:hover, .pu-btn.red:hover { background: var(--wine-satin); border-color: var(--gold); filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 30px -14px rgba(120,35,52,.6); }
.pu-btn.line { background: rgba(255,255,255,.55); color: var(--wine) !important; border-color: rgba(207,174,116,.75); box-shadow: none; }
.pu-btn.line:hover { background: var(--blush); }
.pu-btn.full { min-height: 54px; }
.hrt { color: #ffd3dc; }

/* top bar RSVP: an outline, filling with blush on hover */
.pu-rsvp { background: transparent; color: var(--wine) !important; border: 1px solid rgba(148,54,74,.55); border-radius: 999px; transition: background .3s, border-color .3s; }
.pu-rsvp:hover { background: var(--blush); border-color: var(--wine); }
.pu-links a:hover, .pu-links a.on { border-bottom-color: var(--wine-2); }
.pu-brand i { color: var(--wine-2); }
.pu-open { border-bottom-color: var(--wine-2); }
.pu-open:hover { color: var(--wine); }
.amp, .pu-k, .ch-no { color: var(--wine-2); }

/* the RSVP form: blush selections, gold hairlines */
.site input, .site textarea { border-bottom-color: rgba(207,174,116,.6); }
.site input:focus, .site textarea:focus { border-color: var(--wine-2); }
.choice span { border-radius: 999px; border-color: rgba(207,174,116,.7); background: rgba(255,255,255,.55); color: var(--ink); }
.choice input:checked + span { background: var(--blush); border-color: var(--wine-2); color: var(--wine); }
.choice input:checked + span::after { color: var(--wine-2); }
.stepper { border-radius: 999px; border-color: rgba(207,174,116,.7); background: rgba(255,255,255,.55); }
.stepper button { color: var(--wine); }
.count span { border-color: rgba(207,174,116,.55); border-radius: 4px; }
.form-msg.err { color: var(--wine); }

/* the day: a softer wine satin instead of bright cherry */
.pu-sec.satin { background: linear-gradient(118deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 70%, rgba(255,255,255,.1) 92%), linear-gradient(180deg, #9a3c4f, #7f2c3d); color: #f3dfe2; }
.satin .pu-btn.red { background: #fff8f2; color: var(--wine) !important; border-color: rgba(255,248,242,.9); box-shadow: 0 12px 24px -14px rgba(40,5,12,.6); }
.satin .pu-btn.red:hover { background: #fff; filter: none; }
.satin .pu-btn.line { background: transparent; color: #fff8f2 !important; border-color: rgba(241,217,168,.6); }
.satin .pu-btn.line:hover { background: rgba(255,255,255,.08); }

/* footer: a softer midnight */
.pu-foot { background: linear-gradient(180deg, #232c48, #1a2139); }

/* music button: ivory with a gold ring and a wine note */
body.stage-site .sound { background: rgba(255,250,246,.92); border-color: rgba(207,174,116,.8); box-shadow: 0 10px 22px -12px rgba(120,35,52,.5); }
body.stage-site .sound svg { stroke: #94364a; }
body.stage-site .sound svg path:first-child { fill: #94364a; }

/* petals a touch fainter */
.petals i { opacity: .6; background: radial-gradient(circle at 30% 30%, #d06a7c, #a8435a 60%, #7f2c3d); }

/* ---------- Romance: a love note, "until forever", hearts ---------- */
.love-note { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 50% 45%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
              linear-gradient(118deg, rgba(255,255,255,.4), rgba(255,255,255,0) 35%, rgba(255,255,255,.3) 70%), #f3e1e1; }
.note { position: relative; max-width: 560px; margin: 0 auto; padding: clamp(40px, 7vw, 64px) clamp(22px, 6vw, 56px) clamp(36px, 6vw, 54px);
  background: linear-gradient(170deg, #fffdfa, #fbf4ef); border-radius: 6px;
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(207,174,116,.45), 0 30px 60px -34px rgba(120,35,52,.45); }
.note::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(207,174,116,.4); border-radius: 3px; pointer-events: none; }
.note-seal { position: absolute; left: 50%; top: 0; width: 70px; height: 70px; translate: -50% -50%; border-radius: 50%; box-shadow: 0 10px 20px -8px rgba(80,5,20,.6); }
.note-quote { margin: 8px 0 12px !important; font: 400 clamp(21px, 4.4vw, 28px)/1.5 var(--pu); color: var(--ink); }
.note-ref { margin: 0 !important; font: 10.5px/1.8 var(--pu); letter-spacing: .32em; text-transform: uppercase; color: var(--wine-2); }
.note-sign { margin: 0 !important; font: 15px/1.6 var(--pu); color: var(--soft); }
.note-sign span { display: block; margin-top: 4px; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--wine); }
.hearts-rise { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hearts-rise i { position: absolute; bottom: -30px; font-style: normal; color: var(--wine-2); opacity: 0; animation: heart-rise linear infinite; }
@keyframes heart-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.8); } 15% { opacity: .35; } 85% { opacity: .2; } 100% { opacity: 0; transform: translate(var(--dx), -560px) scale(1.1); } }

.until { margin: -14px 0 30px !important; font: 11px/1 var(--pu); letter-spacing: .32em; text-transform: uppercase; color: var(--wine-2); }
.beat { display: inline-block; margin-left: 6px; animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 56% { transform: scale(1); } }

/* photos: a soft blush glow on hover */
.ph, .chapter img { transition: box-shadow .5s, transform .6s; }
.ph:hover, .chapter img:hover { box-shadow: 0 0 0 1px rgba(207,174,116,.6), 0 24px 50px -20px rgba(178,90,109,.55); }

/* a shower of hearts when a guest sends their reply */
.love-burst { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.love-burst i { position: absolute; left: var(--x); top: var(--y); font-style: normal; color: var(--c); opacity: 0; animation: burst 2.4s cubic-bezier(.2,.7,.3,1) var(--d) forwards; }
@keyframes burst { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(var(--r)); } }

@media (prefers-reduced-motion: reduce) { .hearts-rise, .love-burst { display: none; } .beat { animation: none; } }

/* ---------- Petals at special moments: cover, love note, a goodbye shower at the footer, and with the RSVP hearts ----------
   They only move while that part of the page is on screen. */
.petals.off i { animation-play-state: paused; }
.love-note .petals { z-index: 0; }
.love-note .note { z-index: 1; }
.pu-foot { position: relative; overflow: hidden; isolation: isolate; }
.pu-foot > :not(.petals) { position: relative; z-index: 1; }
.pu-foot .petals { z-index: 0; }
.petals-once i { animation-iteration-count: 1; animation-fill-mode: both; animation-timing-function: cubic-bezier(.25,.4,.5,1); }
.love-burst b { position: absolute; top: -24px; left: var(--x); width: 13px; height: 16px; border-radius: 70% 0 70% 0;
  background: radial-gradient(circle at 30% 30%, #d06a7c, #a8435a 60%, #7f2c3d); opacity: 0;
  animation: burst-petal var(--t) linear var(--d) forwards; }
@keyframes burst-petal { 0% { opacity: 0; transform: none; } 8% { opacity: .75; } 90% { opacity: .6; } 100% { opacity: 0; transform: translate(var(--dx), 105vh) rotate(var(--r)); } }
/* the footer is short, so its petals fall just its height and settle out of sight */
.petals-once i { animation-name: petal-short; }
@keyframes petal-short { 0% { opacity: 0; transform: none; } 10% { opacity: .75; } 85% { opacity: .55; } 100% { opacity: 0; transform: translate(var(--dx), 420px) rotate(var(--rot)); } }

/* on wide screens the picture is narrower than the screen, so a matching satin ribbon carries on to both edges
   behind it, at the height of the painted ribbon (about 46% down the picture) */
.scene { --bw: max(min(100vw, calc(100svh * 1202 / 1308 * 1.12)), min(calc(100svh * 1202 / 1308), 165vw)); --bh: calc(var(--bw) * 1308 / 1202); }
.ext-ribbon { position: absolute; left: 0; width: 100%; top: calc(50% - var(--bh) * .04 - var(--bh) * .062); height: calc(var(--bh) * .124);
  filter: drop-shadow(0 10px 10px rgba(120,20,40,.25)); animation: settle 2.4s cubic-bezier(.2,.7,.2,1) both; transition: opacity .6s; }
/* gone the moment the picture splits (its entrance animation would otherwise keep it on screen) */
.intro-scene.split .ext-ribbon { animation: none; opacity: 0; transition: none; visibility: hidden; }

/* ---------- Header: a monogram crest (the seal in the middle, links either side) ----------
   Calm at the top of the page; once guests scroll it settles into frosted ivory glass with a soft shadow.
   A tiny gold heart marks the section they are reading. */
.pu-nav.crest {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 40px;
  height: 84px; padding: 0 clamp(20px, 4vw, 64px); background: rgba(250,245,241,.55); border-bottom: 0;
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
.pu-nav.crest::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
  border-top: 1px solid rgba(207,174,116,.6); border-bottom: 1px solid rgba(207,174,116,.28); }
.pu-nav.crest.scrolled { background: rgba(250,245,241,.86); backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 14px 34px -24px rgba(120,35,52,.5); }
.crest .pu-links { display: none; gap: 34px; }
.crest .pu-links.left { justify-self: end; }
.crest .pu-links.right { justify-self: start; }
.crest .pu-links a { position: relative; border-bottom: 0; padding-bottom: 4px; }
.crest .pu-links a::after { content: "♥"; position: absolute; left: 50%; bottom: -16px; translate: -50% 0; font-size: 9px; color: var(--gold); opacity: 0; transition: opacity .3s, transform .3s; transform: translateY(-4px); }
.crest .pu-links a:hover::after, .crest .pu-links a.on::after { opacity: 1; transform: none; }
.crest .pu-links a.on { color: var(--wine); }
.crest-seal { grid-column: 2; position: relative; z-index: 2; display: block; width: 58px; height: 58px; translate: 0 34%; transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.crest-seal img { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 4px rgba(250,245,241,.95), 0 0 0 5px rgba(207,174,116,.6), 0 12px 22px -10px rgba(80,5,20,.6); }
.crest-seal:hover { transform: rotate(-8deg) scale(1.05); }
.crest .pu-menu { grid-column: 1; justify-self: start; }
.crest .pu-rsvp { position: absolute; right: clamp(16px, 4vw, 64px); top: 50%; translate: 0 -50%; padding: 10px 18px; }
.pu-drawer { inset: 72px 0 0; }
.emblem { display: none; }
@media (min-width: 900px) {
  .pu-nav.crest { height: 92px; }
  .crest .pu-links { display: flex; }
  .crest-seal { width: 70px; height: 70px; }
  .crest .pu-rsvp { padding: 14px 32px; }
}
@media (min-width: 900px) and (max-width: 1180px) { .crest .pu-links { gap: 22px; } .crest .pu-links a { letter-spacing: .14em; } .crest .pu-rsvp { display: none; } }
@media (max-width: 899px) { .pu-nav.crest { height: 72px; } }

/* ---------- The invitation: a framed card beside their photo in a gold arch ---------- */
.invite-sec { position: relative; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 45%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
              linear-gradient(118deg, rgba(255,255,255,.45), rgba(255,255,255,0) 35%, rgba(255,255,255,.35) 70%), #f3e5e3; }
.invite-wrap { max-width: 1080px; margin: 0 auto; display: grid; gap: 54px; align-items: center; }
.invite-photo { position: relative; margin: 0 auto; width: min(330px, 78%); }
.invite-photo::before { content: ""; position: absolute; inset: -12px; border: 1px solid rgba(207,174,116,.8); border-radius: 999px 999px 10px 10px; }
.invite-photo::after { content: ""; position: absolute; inset: -20px; border: 1px solid rgba(207,174,116,.35); border-radius: 999px 999px 14px 14px; }
.arch-img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3 / 4.1; object-fit: cover; object-position: 50% 25%; border-radius: 999px 999px 6px 6px; box-shadow: 0 30px 60px -30px rgba(80,20,35,.55); }
.arch-roses { position: absolute; z-index: 2; right: -64px; bottom: -48px; width: 190px; height: auto; pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 70% at 65% 65%, #000 45%, transparent 75%); mask-image: radial-gradient(70% 70% at 65% 65%, #000 45%, transparent 75%); }
.invite-card { position: relative; text-align: center; padding: clamp(54px, 8vw, 72px) clamp(24px, 6vw, 60px) clamp(40px, 6vw, 56px);
  background: linear-gradient(170deg, #fffdfa, #fbf5f0 60%, #f7eee8); border-radius: 4px;
  box-shadow: 0 1px 0 #fff inset, 0 40px 80px -44px rgba(120,35,52,.5), 0 2px 6px rgba(120,35,52,.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23cfae74'%3E%3Cpath d='M4 56V22C4 12 12 4 22 4h34' stroke-width='1.2'/%3E%3Cpath d='M12 48c0-20 16-36 36-36' stroke-width='.8' opacity='.7'/%3E%3Cpath d='M10 10c6 2 9 6 10 12M10 10c2 6 6 9 12 10' stroke-width='.9'/%3E%3Ccircle cx='10' cy='10' r='2.2' fill='%23cfae74' stroke='none'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23cfae74'%3E%3Cpath d='M4 56V22C4 12 12 4 22 4h34' stroke-width='1.2'/%3E%3Cpath d='M12 48c0-20 16-36 36-36' stroke-width='.8' opacity='.7'/%3E%3Cpath d='M10 10c6 2 9 6 10 12M10 10c2 6 6 9 12 10' stroke-width='.9'/%3E%3Ccircle cx='10' cy='10' r='2.2' fill='%23cfae74' stroke='none'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23cfae74'%3E%3Cpath d='M4 56V22C4 12 12 4 22 4h34' stroke-width='1.2'/%3E%3Cpath d='M12 48c0-20 16-36 36-36' stroke-width='.8' opacity='.7'/%3E%3Cpath d='M10 10c6 2 9 6 10 12M10 10c2 6 6 9 12 10' stroke-width='.9'/%3E%3Ccircle cx='10' cy='10' r='2.2' fill='%23cfae74' stroke='none'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23cfae74'%3E%3Cpath d='M4 56V22C4 12 12 4 22 4h34' stroke-width='1.2'/%3E%3Cpath d='M12 48c0-20 16-36 36-36' stroke-width='.8' opacity='.7'/%3E%3Cpath d='M10 10c6 2 9 6 10 12M10 10c2 6 6 9 12 10' stroke-width='.9'/%3E%3Ccircle cx='10' cy='10' r='2.2' fill='%23cfae74' stroke='none'/%3E%3C/svg%3E"), linear-gradient(170deg, #fffdfa, #fbf5f0 60%, #f7eee8);
  background-repeat: no-repeat; background-size: 46px, 46px, 46px, 46px, auto;
  background-position: top 16px left 16px, top 16px right 16px, bottom 16px right 16px, bottom 16px left 16px, 0 0; }
.invite-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(207,174,116,.55); border-radius: 2px; pointer-events: none; }
.invite-card::after { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(207,174,116,.25); border-radius: 2px; pointer-events: none; }
.invite-card > * { position: relative; z-index: 1; }
.card-seal { position: absolute !important; left: 50%; top: 0; width: 76px; height: 76px; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 5px #f3e5e3, 0 12px 22px -8px rgba(80,5,20,.6); }
.invite-card .pu-h.big { font-size: clamp(26px, 5.4vw, 40px); }
.date-block { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 360px; margin: 6px auto 8px; }
.db-side { padding: 12px 0; border-top: 1px solid rgba(207,174,116,.7); border-bottom: 1px solid rgba(207,174,116,.7); font: 11px/1.6 var(--pu); letter-spacing: .28em; text-transform: uppercase; color: var(--ink); }
.db-num { padding: 0 22px; font: 400 54px/1 var(--pu); color: var(--wine); }
.db-place { margin: 8px 0 22px !important; font: 10.5px/1.6 var(--pu); letter-spacing: .3em; text-transform: uppercase; color: var(--soft); }
.welcome { max-width: 460px; margin: 0 auto 16px !important; }
.invite-card .count { gap: 14px; margin-bottom: 30px; }
.invite-card .count span { display: grid; place-content: center; width: 86px; height: 86px; min-width: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(207,174,116,.75); background: radial-gradient(circle at 50% 35%, #fff, #fbf3ee); box-shadow: 0 0 0 4px rgba(255,255,255,.7), 0 12px 22px -14px rgba(120,35,52,.45); font-size: 9px; }
.invite-card .count b { font-size: 28px; margin-bottom: 4px; color: var(--ink); }
.invite-card .until { margin: -16px 0 30px !important; }
@media (min-width: 900px) {
  .invite-wrap { grid-template-columns: 5fr 7fr; gap: 80px; }
  .invite-photo { width: 100%; max-width: 380px; }
}

/* ---------- The day: a clean, even deep wine (no satin streaks, which made it look dusty) ---------- */
.pu-sec.satin { background: radial-gradient(90% 70% at 50% 40%, #82263b, #6e1d30 75%); color: #f5e6e8; }
.satin .pu-k { color: #e3c48c; }
.satin .pu-h { color: #fff8f2; }
.satin .events > div { background: transparent; border: 1px solid rgba(227,196,140,.55); border-radius: 2px; }
.satin .ev-k { color: #e3c48c; }
.satin .events h3 { color: #fff8f2; }
.satin .events p, .satin .addr { color: #e8cfd4; }
.satin .pu-btn.red { background: #fff8f2; color: #7a2135 !important; border-color: #fff8f2; box-shadow: 0 12px 26px -16px rgba(20,0,5,.7); }
.satin .pu-btn.line { border-color: rgba(227,196,140,.75); color: #fff8f2 !important; }

/* ---------- The RSVP as a reply card, matching the invitation ---------- */
.reply-card { max-width: 660px; margin: 0 auto; text-align: center; }
.reply-card .form { margin-top: 30px; text-align: left; }
.reply-card .field > span, .reply-card .choice legend { text-align: left; }
.reply-card .choice legend { text-align: center; }
.reply-card .choice { gap: 12px; }
.reply-card .choice span { min-height: 56px; border-radius: 4px; font-size: 11.5px; letter-spacing: .24em; background: rgba(255,255,255,.7); }
.reply-card .choice input:checked + span { background: linear-gradient(180deg, #fbeef0, #f6e2e5); border-color: rgba(148,54,74,.55); color: var(--wine); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
.reply-card .stepper { border-radius: 4px; }
.reply-card .site input, .reply-card input, .reply-card textarea { background: transparent; }
.reply-card .pu-btn.full { margin-top: 14px; }
.rsvp-sec .roses-bottom { z-index: 0; }
.rsvp-sec .reply-card { z-index: 1; }

/* ---------- Typography: Cormorant Garamond (upright) for names, headings and text; Jost for the small spaced labels ----------
   Replaces Georgia, whose dipping old-style numbers made dates look uneven. All numbers sit on the line. */
.site {
  --pu: "Cormorant Garamond", Georgia, serif;
  --label: "Jost", system-ui, sans-serif;
  font: 400 20px/1.65 var(--pu);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.site h1, .site h2, .site h3 { font-variant-numeric: lining-nums; }

/* display: names and headings, medium weight, generously spaced */
.pu-names { font-weight: 500; letter-spacing: .1em; font-size: clamp(32px, 9vw, 46px); }
.pu-h { font-weight: 500; letter-spacing: .12em; font-size: clamp(27px, 5.4vw, 38px); }
.pu-h.big, .invite-card .pu-h.big { font-size: clamp(31px, 6.4vw, 46px); letter-spacing: .1em; }
.amp { font-weight: 400; }
.pu-date { font: 500 17px/1 var(--pu); letter-spacing: .24em; }
.pu-tag, .pu-lead, .welcome, .pu-sec p { font-family: var(--pu); }
.pu-tag { font-size: 19px; }
.pu-lead { font-size: 22px; }
.pu-verse { font-size: 22px; font-weight: 500; }
.chapter h3, .events h3, .sent-note h3 { font-weight: 500; letter-spacing: .1em; font-size: 23px; }
.db-num { font: 500 60px/1 var(--pu); }
.count b, .invite-card .count b { font: 500 30px/1 var(--pu); }
.note-quote { font-size: clamp(23px, 4.6vw, 30px); font-weight: 500; }
.faq summary { font: 500 20px/1.4 var(--pu); }
.site input, .site textarea { font: 400 19px/1.4 var(--pu); }
.site .stepper input { font: 500 20px/1 var(--pu); }
@media (min-width: 900px) {
  .pu-names { font-size: clamp(38px, 3.6vw, 62px); }
  .pu-date { font-size: 21px; }
  .pu-tag { font-size: 21px; }
}

/* labels: Jost, small, airy capitals */
.pu-k, .pu-kicker, .pu-place, .pu-links a, .pu-rsvp, .pu-btn, .pu-open, .pu-drawer a, .ev-k, .db-side, .db-place,
.field > span, .choice legend, .choice span, .count span, .until, .note-ref, .note-sign span, .pu-verse span, .credit,
.pu-fdate, .pu-when span, .made {
  font-family: var(--label); font-weight: 400; font-variant-numeric: lining-nums;
}
.pu-k, .ev-k, .note-ref, .pu-verse span { font-size: 11px; letter-spacing: .34em; }
.pu-kicker, .pu-place { font-size: 11px; letter-spacing: .32em; }
.pu-links a { font-size: 11.5px; letter-spacing: .24em; font-weight: 400; }
.pu-rsvp, .pu-btn, .pu-open { font-size: 11px; letter-spacing: .28em; font-weight: 500; }
.pu-drawer a { font-size: 13px; letter-spacing: .28em; }
.db-side, .db-place { font-size: 10.5px; letter-spacing: .3em; }
.field > span, .choice legend { font-size: 10.5px; letter-spacing: .24em; }
.choice span { font-size: 11px; letter-spacing: .24em; font-weight: 500; }
.count span, .invite-card .count span { font-size: 9px; letter-spacing: .24em; }
.until { font-size: 10.5px; letter-spacing: .32em; }
.note-sign span { font-size: 12px; letter-spacing: .3em; }
.made { font-size: 13px; letter-spacing: .04em; }
.pu-fdate { letter-spacing: .4em; }

/* display capitals and big numbers in Cinzel (engraved capitals, numbers always sit on the line) */
.site { --display: "Cinzel", "Cormorant Garamond", Georgia, serif; }
.pu-names, .pu-h, .pu-date, .db-num, .count b, .invite-card .count b, .chapter h3, .events h3, .sent-note h3 { font-family: var(--display); }
.pu-names { font-weight: 400; letter-spacing: .08em; font-size: clamp(28px, 8vw, 40px); }
.pu-h { font-weight: 400; letter-spacing: .08em; font-size: clamp(23px, 4.8vw, 33px); }
.pu-h.big, .invite-card .pu-h.big { font-size: clamp(27px, 5.8vw, 40px); letter-spacing: .07em; }
.pu-date { font-weight: 400; font-size: 16px; letter-spacing: .18em; }
.db-num { font-weight: 400; font-size: 52px; }
.count b, .invite-card .count b { font-weight: 400; font-size: 26px; }
.chapter h3, .events h3, .sent-note h3 { font-weight: 400; letter-spacing: .08em; font-size: 20px; }
.amp { font-family: var(--pu); font-weight: 500; }
@media (min-width: 900px) { .pu-names { font-size: clamp(34px, 3.2vw, 54px); } .pu-date { font-size: 19px; } }

/* four countdown circles (days, hours, minutes, seconds) fit across a phone */
.invite-card .count { flex-wrap: nowrap; }
@media (max-width: 560px) {
  .invite-card .count { gap: 8px; }
  .invite-card .count span { width: 62px; height: 62px; font-size: 7.5px; letter-spacing: .18em; box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 10px 18px -12px rgba(120,35,52,.45); }
  .invite-card .count b { font-size: 20px; margin-bottom: 2px; }
}

/* ---------- Unified type: every capitalised word in Cinzel, reading text in Cormorant ----------
   (the thin sans felt disconnected from the classic serifs) */
.pu-k, .pu-kicker, .pu-place, .pu-links a, .pu-rsvp, .pu-btn, .pu-open, .pu-drawer a, .ev-k, .db-side, .db-place,
.field > span, .choice legend, .choice span, .count span, .until, .note-ref, .note-sign span, .pu-verse span, .credit,
.pu-fdate, .pu-when span, .ch-no, .dear { font-family: var(--display); font-weight: 400; }
.pu-k, .ev-k, .note-ref, .pu-verse span { font-size: 11px; letter-spacing: .26em; }
.pu-kicker, .pu-place { font-size: 11px; letter-spacing: .24em; }
.pu-links a { font-size: 12px; letter-spacing: .18em; }
.pu-rsvp, .pu-btn, .pu-open { font-size: 11.5px; letter-spacing: .22em; font-weight: 500; }
.field > span, .choice legend { font-size: 10.5px; letter-spacing: .18em; }
.count span, .invite-card .count span { letter-spacing: .14em; }
.ch-no { font-size: 15px; letter-spacing: .2em; }
.dear { font-size: 12px; letter-spacing: .24em; }
.made { font-family: var(--pu); font-size: 16px; }
/* numbers people type, in a face whose "1" never looks like "I" */
.site input[type="tel"], .site input[type="number"], .site .stepper input { font-family: var(--display); font-size: 18px; letter-spacing: .06em; }
.site input::placeholder, .site textarea::placeholder { color: #a7a2a8; }

/* RSVP answers: centred, never squeezed on phones */
.choice label { display: block; min-width: 0; }
.choice span, .reply-card .choice span { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; text-align: center; padding: 10px 12px; line-height: 1.35; font-size: 11px; letter-spacing: .16em; }
.choice input:checked + span::after { margin-left: 0; }
@media (max-width: 420px) { .choice label { flex: 1 1 120px; } .choice span, .reply-card .choice span { font-size: 10px; letter-spacing: .12em; } }

/* ---------- Depth everywhere: fine paper grain, soft light, mounted photographs ---------- */
.site {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-image: var(--grain),
    linear-gradient(118deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 64%, rgba(255,255,255,.5) 88%);
}
.pu-sec.tint, .invite-sec, .love-note {
  background-image: var(--grain),
    radial-gradient(60% 50% at 15% 10%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(55% 45% at 90% 85%, rgba(214,160,170,.22), transparent 70%),
    linear-gradient(180deg, #f6eae7, #f1e1df);
}
/* a gold flourish crowning each section heading area */
.pu-sec:not(.satin) > .pu-in::before, .pu-sec:not(.satin):not(.love-note):not(.invite-sec) > .pu-in::before { content: ""; display: block; width: 120px; height: 14px; margin: -20px auto 26px; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none' stroke='%23cfae74'%3E%3Cpath d='M2 7h40M78 7h40' stroke-width='.8'/%3E%3Cpath d='M60 2c-6 0-10 5-16 5 6 0 10 5 16 5 6 0 10-5 16-5-6 0-10-5-16-5z' stroke-width='.9'/%3E%3Ccircle cx='60' cy='7' r='1.6' fill='%23cfae74' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; }
/* story photos mounted like printed photographs, gently tilted */
.chapter img {
  border: 8px solid #fffdfa; border-radius: 2px; outline: 1px solid rgba(207,174,116,.55); outline-offset: -14px;
  box-shadow: 0 1px 2px rgba(80,30,40,.12), 0 14px 24px -12px rgba(80,30,40,.35), 0 40px 60px -40px rgba(120,35,52,.5);
  transform: rotate(-1.2deg);
}
.chapter.flip img { transform: rotate(1.2deg); }
.chapter img:hover { transform: rotate(0) scale(1.01); }
.chapter h3 { color: var(--ink); }
.ph { border: 6px solid #fffdfa; border-radius: 2px; box-shadow: 0 1px 2px rgba(80,30,40,.12), 0 18px 30px -16px rgba(80,30,40,.4); }

/* ---------- The menu on phones: a page of its own ---------- */
.pu-drawer {
  overflow: hidden; justify-content: center; gap: 2px; padding: 40px 20px 60px;
  background-image: var(--grain), radial-gradient(70% 50% at 50% 40%, rgba(255,255,255,.85), transparent 70%), linear-gradient(180deg, #f8efec, #f1e1df);
}
.pu-drawer a { position: relative; font-size: 17px; letter-spacing: .2em; line-height: 2.6; color: var(--ink); opacity: 0; animation: rise .6s cubic-bezier(.2,.7,.2,1) forwards; }
.pu-drawer a:hover, .pu-drawer a:active { color: var(--wine); }
.pu-drawer a:nth-of-type(1) { animation-delay: .05s; } .pu-drawer a:nth-of-type(2) { animation-delay: .1s; } .pu-drawer a:nth-of-type(3) { animation-delay: .15s; } .pu-drawer a:nth-of-type(4) { animation-delay: .2s; }
.pu-drawer a:nth-of-type(5) { animation-delay: .25s; } .pu-drawer a:nth-of-type(6) { animation-delay: .3s; color: var(--wine); } .pu-drawer a:nth-of-type(7) { animation-delay: .35s; } .pu-drawer a:nth-of-type(8) { animation-delay: .4s; }
.dr-names { margin: 0; font: 400 15px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.dr-names span { font-family: var(--pu); color: var(--wine-2); }
.pu-drawer .pu-rule { margin: 12px auto 14px; }
.dr-date { margin: 18px 0 0; font: 400 12px/1 var(--display); letter-spacing: .4em; color: var(--gold-ink, #a8854c); }
.dr-roses { position: absolute; pointer-events: none; height: auto; opacity: .85; }
.dr-top { left: 0; top: 0; width: 46vw; max-width: 220px; -webkit-mask-image: radial-gradient(120% 120% at 0 0, #000 40%, transparent 72%); mask-image: radial-gradient(120% 120% at 0 0, #000 40%, transparent 72%); }
.dr-bottom { right: 0; bottom: 0; width: 52vw; max-width: 250px; -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 40%, transparent 72%); mask-image: radial-gradient(120% 120% at 100% 100%, #000 40%, transparent 72%); }
/* the split is quicker and the halves fade as they leave, so no ribbon lingers over the website */
.half { transition: transform 1.05s cubic-bezier(.65,0,.25,1), filter 1.05s, opacity .45s .55s; }
.intro-scene.split .half { opacity: 0; }
/* phones: the two answers stack, each on one line */
@media (max-width: 520px) {
  .choice label, .reply-card .choice label { flex: 1 1 100%; }
  .choice span, .reply-card .choice span { flex-wrap: nowrap; min-height: 52px; font-size: 11px; letter-spacing: .18em; }
}

/* ---------- Photos: the frame follows the photo, so nobody is cut out ---------- */
.chapter.tall img { aspect-ratio: 4 / 5; object-position: 50% 30%; max-width: 420px; margin: 0 auto; }
.chapter.wide img { aspect-ratio: 3 / 2; object-position: 50% 40%; }
@media (min-width: 760px) {
  .chapter.tall img { aspect-ratio: 4 / 5; }
  .chapter.wide img { aspect-ratio: 3 / 2; }
}
.arch-img { object-position: 50% 30%; }
.ph img { object-position: 50% 30%; }
.ph.wide img { aspect-ratio: 3 / 2; object-position: 50% 40%; }

/* ---------- "You're invited", written onto the opening picture above the seal ----------
   Sized to the picture (container units) so it always sits in the same open ivory space,
   in the same engraved navy capitals as "Tap the seal to open". */
.cover-box { container-type: inline-size; }
.invited { position: absolute; left: 0; right: 0; top: 13.2%; text-align: center; pointer-events: none; }
.invited .dear { position: static; margin: 0 0 1.4cqw; font: 400 max(10px, 1.55cqw)/1.4 "Cinzel", Georgia, serif; letter-spacing: .3em; text-transform: uppercase; color: #8a3a4c; animation: rise 1.6s .9s both; }
.inv-k { margin: 0; display: flex; align-items: center; justify-content: center; gap: 2.4cqw;
  font: 400 max(15px, 3.1cqw)/1.2 "Cinzel", Georgia, serif; letter-spacing: .32em; text-transform: uppercase; color: #1d2647;
  text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.inv-k span { padding-left: .32em; animation: invited-in 2.2s 1s cubic-bezier(.2,.7,.2,1) both; }
.inv-k::before, .inv-k::after { content: ""; width: 7cqw; height: 1px; background: linear-gradient(90deg, transparent, #c9a263); animation: fade-in 2s 1.6s both; }
.inv-k::after { background: linear-gradient(90deg, #c9a263, transparent); }
@keyframes invited-in { from { opacity: 0; letter-spacing: .6em; filter: blur(3px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }
.intro-scene.breaking .invited, .intro-scene.split .invited { opacity: 0; transition: opacity .35s; }
/* keep the opening picture crisp while it scales */
.cover-img { image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); }

/* the date, set like a printed invitation: SATURDAY | 16 | JANUARY on one level, the year beneath */
.date-block { grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 380px; margin: 10px auto 0; }
.db-side { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 6px; line-height: 1; white-space: nowrap; }
.db-num { padding: 0 20px; line-height: .9; }
.db-year { margin: 6px 0 4px !important; font: 400 15px/1 var(--display); letter-spacing: .5em; padding-left: .5em; color: var(--wine-2); }
.pu-lead, .welcome, .pu-verse, .note-quote, .pu-tag { text-wrap: balance; }
@media (max-width: 420px) { .db-side { font-size: 9.5px; letter-spacing: .22em; } .db-num { padding: 0 14px; font-size: 48px; } }

/* ---------- The invitation, simplified: only what a printed invitation says ---------- */
.invite-main { display: grid; gap: 34px; justify-items: center; }
.invite-card { width: 100%; max-width: 520px; padding: 46px 26px 40px; background-image: linear-gradient(170deg, #fffdfa, #fbf5f0 60%, #f7eee8); }
.invite-card::after { display: none; }
.invite-card .pu-k { margin-bottom: 18px; }
.invite-card .pu-h.big { font-size: clamp(30px, 7.6vw, 42px); line-height: 1.15; }
.inv-line { margin: 20px 0 26px !important; font: 400 21px/1.5 var(--pu); color: var(--soft); }
.inv-line b { font-weight: 500; color: var(--wine); }
.inv-venue { margin: 22px 0 0 !important; font: 400 15px/1.4 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.inv-venue span { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .3em; color: var(--soft); }
.invite-after { text-align: center; }
.invite-after .count { margin-bottom: 26px; gap: 12px; }
.invite-after .count span { display: grid; place-content: center; width: 74px; height: 74px; padding: 0; border-radius: 50%; border: 1px solid rgba(207,174,116,.7); background: rgba(255,255,255,.6); font-size: 8.5px; letter-spacing: .14em; }
.invite-after .count b { font: 400 24px/1 var(--display); color: var(--ink); margin-bottom: 4px; }
.invite-after .until { margin: -10px 0 26px !important; }
@media (max-width: 420px) { .invite-after .count { gap: 8px; } .invite-after .count span { width: 64px; height: 64px; font-size: 7.5px; } .invite-after .count b { font-size: 20px; } }
/* fewer ornaments: drop the extra flourish above section headings */
.pu-sec > .pu-in::before { display: none !important; }
/* the love note now carries their own words */
.note-k { margin: 6px 0 14px !important; font: 400 11px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--wine-2); }
.note-text { max-width: 34ch; margin: 0 auto 18px !important; font: 400 20px/1.65 var(--pu); color: var(--text); text-wrap: pretty; }
.invite-after .count { display: flex; justify-content: center; flex-wrap: nowrap; }
.invite-after .count span { flex: none; min-width: 0; aspect-ratio: 1; }

/* ---------- The invitation card, with love in its paper ----------
   A faint embossed heart behind the wording, a delicate pattern of tiny gold hearts like heart-patterned stationery,
   and a soft rose-blush glow behind the card. */
.invite-card {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 88C20 66 4 48 4 28 4 14 15 4 28 4c9 0 17 5 22 13C55 9 63 4 72 4c13 0 24 10 24 24 0 20-16 38-46 60z' fill='none' stroke='%23c9a263' stroke-width='1.1' opacity='.22'/%3E%3Cpath d='M50 80C25 61 12 46 12 30 12 19 20 12 30 12c8 0 15 5 20 12 5-7 12-12 20-12 10 0 18 7 18 18 0 16-13 31-38 50z' fill='%23b25a6d' opacity='.035'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 27c-4-3-6-5-6-7.5a3 3 0 0 1 6-1 3 3 0 0 1 6 1c0 2.5-2 4.5-6 7.5z' fill='%23c9a263' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(70% 55% at 50% 45%, rgba(255,255,255,.9), rgba(255,255,255,0) 75%),
    linear-gradient(170deg, #fffdfa, #fbf4f0 60%, #f6ece8);
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  background-size: min(78%, 360px) auto, 44px 44px, auto, auto;
  background-position: center 54%, 0 0, 0 0, 0 0;
}
.invite-main { position: relative; isolation: isolate; }
.invite-main::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 4%; width: min(130%, 720px); height: 62%; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214,140,156,.30), rgba(214,140,156,.12) 55%, transparent); filter: blur(8px); }
.invite-card .pu-h.big, .invite-card .inv-line, .invite-card .date-block, .invite-card .inv-venue { position: relative; }
/* no large heart watermark: just the faint gold-heart stationery pattern and the soft glow */
.invite-card {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 27c-4-3-6-5-6-7.5a3 3 0 0 1 6-1 3 3 0 0 1 6 1c0 2.5-2 4.5-6 7.5z' fill='%23c9a263' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(70% 55% at 50% 45%, rgba(255,255,255,.9), rgba(255,255,255,0) 75%),
    linear-gradient(170deg, #fffdfa, #fbf4f0 60%, #f6ece8);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 44px 44px, auto, auto;
  background-position: 0 0, 0 0, 0 0;
}
/* the invitation message, set as a gentle note at the foot of the card */
.invite-card .pu-rule { margin: 26px auto 20px; }
.inv-msg { max-width: 32ch; margin: 0 auto !important; font: 400 18px/1.7 var(--pu); color: var(--text); text-wrap: pretty; }
.invite-card .inv-line { margin-bottom: 4px !important; }

/* the invitation card: just their message, signed with their names in small capitals */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.msg-card { padding: 54px 30px 44px; }
.msg-card .inv-msg { max-width: 30ch; font-size: 21px; line-height: 1.75; color: var(--ink); }
.msg-card .pu-rule { margin: 26px auto 16px; }
.inv-sign { margin: 0 !important; font: 400 12px/1.4 var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--wine); }
.inv-sign span { font-family: var(--pu); font-size: 15px; letter-spacing: 0; padding: 0 .3em; color: var(--wine-2); }