:root {
  --ink: #4c3929;
  --ink-soft: #735e48;
  --cream: #fbf4dd;
  --paper: #fffdf4;
  --honey: #eba82e;
  --honey-light: #f4cc68;
  --honey-pale: #f9e8ad;
  --red: #b94a38;
  --sage: #87945e;
  --lilac: #b59aab;
  --shadow: 0 22px 55px rgba(91, 61, 26, .15);
  --shell-width: 480px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: #282019;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.app-shell::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--ink);
  background: #282019;
  font-family: "DM Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.cover-lock { overflow: hidden; }

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.ambient-bg {
  position: fixed;
  z-index: 0;
  inset: 0 auto;
  left: 50%;
  width: min(100vw, var(--shell-width));
  height: 100dvh;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.96) 0, rgba(255,250,229,.76) 27%, transparent 62%),
    radial-gradient(circle at 18% 80%, rgba(244,203,103,.22), transparent 45%),
    radial-gradient(circle at 93% 11%, rgba(186,154,172,.16), transparent 34%),
    linear-gradient(155deg, #f2d07d 0%, #f8e9bb 28%, #f4ddb0 61%, #eec56d 100%);
}

.grain {
  position: fixed;
  z-index: 3;
  inset: 0 auto;
  left: 50%;
  width: min(100vw, var(--shell-width));
  height: 100dvh;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.app-shell {
  position: relative;
  z-index: 2;
  width: min(100%, var(--shell-width));
  min-height: 100vh;
  margin-inline: auto;
  overflow: clip;
  background: rgba(250, 240, 204, .18);
  box-shadow: 0 0 70px rgba(0, 0, 0, .28);
}

.section-pad { padding: 88px clamp(20px, 6vw, 32px); }

.eyebrow {
  margin: 0 0 10px;
  color: #916a22;
  font-size: clamp(.68rem, 2.8vw, .78rem);
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.3;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1, h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: .98;
}

h1 em, h2 em {
  color: #a96c18;
  font-weight: 600;
}

.cover {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 50%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100vw, var(--shell-width));
  min-height: 100svh;
  padding: max(34px, env(safe-area-inset-top)) clamp(14px, 4vw, 22px) calc(28px + var(--safe-bottom));
  overflow: hidden;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 41%, rgba(255,255,255,.98), rgba(255,250,230,.75) 37%, transparent 64%),
    linear-gradient(155deg, #efc86d, #f8e9bb 48%, #edc160);
  transition:opacity .72s cubic-bezier(.4,0,.2,1),visibility .72s;
}

.cover::before,
.cover::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(124, 93, 42, .17);
  border-radius: 50%;
}
.cover::before,
.cover::after { display:none; }

.cover-sprig {
  position: absolute;
  z-index: 1;
  width: clamp(126px, 38vw, 175px);
  opacity: .58;
  pointer-events: none;
  filter: saturate(.82);
  transform-origin: 0 100%;
  animation: foliage-sway 8s ease-in-out infinite;
}
.cover-sprig-left { left: -42px; top: 20%; transform: rotate(10deg); }
.cover-sprig-right { right: -54px; top: 43%; transform: scaleX(-1) rotate(14deg); animation-delay: -3.6s; }

.cover.is-leaving { opacity:0; pointer-events:none; }
.cover.is-gone { opacity:0; visibility:hidden; pointer-events:none; }

.cover-copy {
  position: relative;
  z-index: 4;
  text-align:center;
  transition:opacity .42s ease,transform .52s ease;
}

.cover-copy h1 {
  margin: 0;
  font-size: clamp(2.65rem, 12vw, 3.65rem);
  letter-spacing: -.045em;
  line-height: .95;
  text-transform: uppercase;
}

.cover-ornament,
.card-invite-title > span {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:20px auto 0;
}
.cover-ornament i,
.card-invite-title span i { display:block; width:72px; height:1px; background:#bd821e; }
.cover-ornament b,
.card-invite-title span b { display:block; width:11px; height:11px; border-radius:50%; background:#d7951a; }

.cover-signoff {
  position:relative;
  z-index:11;
  display:grid;
  justify-items:center;
  align-self:end;
  padding-bottom:1px;
  line-height:1;
  text-align:center;
}
.cover-signoff strong {
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.52rem,6.8vw,1.98rem);
  font-weight:600;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.cover-signoff span {
  margin-top:7px;
  color:#ad6c13;
  font-family:"Caveat",cursive;
  font-size:clamp(2.05rem,8.6vw,2.65rem);
  font-weight:700;
  transform:rotate(-2deg);
}

.cover-date {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: clamp(.72rem, 3vw, .82rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.open-trigger {
  position: relative;
  z-index: 3;
  align-self: center;
  width: 100%;
  min-height:390px;
  margin: 0;
  padding: 30px 0 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  perspective: 1000px;
}

.tap-copy {
  position: absolute;
  z-index: 12;
  top:2px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: max-content;
  transform: translateX(-50%);
  font-family: "Caveat", cursive;
  font-size:clamp(1.42rem,6.2vw,1.72rem);
  font-weight: 700;
  line-height: 1;
}

.tap-copy svg {
  width: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  animation: tap-bounce 1.8s ease-in-out infinite;
}

.envelope-scene {
  position: absolute;
  top:48px;
  left: 50%;
  width: min(93%, 420px);
  height: clamp(285px, 78vw, 356px);
  transform: translateX(-50%);
}

.envelope-scene::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:24px;
  width:96%;
  height:78%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.78),rgba(255,255,255,.18) 58%,transparent 76%);
  transform:translateX(-50%);
}

.envelope {
  position: absolute;
  left: 50%;
  top:clamp(30px,8vw,38px);
  width: min(88vw, 390px);
  height: clamp(192px, 53vw, 236px);
  transform: translateX(-50%);
  filter: drop-shadow(0 26px 24px rgba(89, 59, 24, .22));
  transform-style: preserve-3d;
}

.envelope-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border:1.5px solid #b98742;
  border-radius: 8px;
  background:#fff2cf;
}

.letter {
  position: absolute;
  z-index: 2;
  left: 6%;
  bottom: 8%;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 88%;
  height: 93%;
  padding: 15px;
  border: 1px solid rgba(142, 101, 39, .25);
  border-radius: 5px;
  color: var(--ink);
  background:
    radial-gradient(circle at center, rgba(255,255,255,.8), transparent 70%),
    #fff9e8;
  box-shadow: 0 8px 22px rgba(84, 54, 24, .13);
  transform: translateY(0);
  transition: transform 1.05s cubic-bezier(.22,.89,.36,1.08) .28s;
}

.letter-kicker {
  color: #9a751e;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.letter-title { margin-top: 7px; font-family: "Playfair Display", serif; font-size: clamp(1.1rem, 4.9vw, 1.45rem); line-height: 1.05; }
.letter-date { margin-top: 10px; font-size: .63rem; font-weight: 700; letter-spacing: .14em; }

.envelope-flap {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 8px 8px 0 0;
  background:linear-gradient(165deg,#fff7de 5%,#eacb86 100%);
  transform: rotateX(0);
  transform-origin: top;
  transition: transform .85s cubic-bezier(.2,.72,.25,1), z-index 0s .36s;
}

.envelope-front {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  border-radius: 7px;
  background:
    linear-gradient(31deg,#f1d694 0 49.4%,transparent 50%) left/51% 100% no-repeat,
    linear-gradient(-31deg,#fff0c5 0 49.4%,transparent 50%) right/51% 100% no-repeat,
    linear-gradient(0deg,#fff0c5,#e8c578);
  clip-path: polygon(0 39%, 50% 75%, 100% 39%, 100% 100%, 0 100%);
}

.wax-seal {
  position: absolute;
  z-index: 10;
  top: 61%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(52px, 15vw, 66px);
  aspect-ratio: 1;
  border: 3px double rgba(105, 36, 25, .55);
  border-radius: 48% 52% 46% 54%;
  color: #f7dca6;
  background: radial-gradient(circle at 35% 30%, #cf6853, #9c392c 73%);
  box-shadow: 0 8px 13px rgba(80, 31, 22, .26), inset 0 0 0 3px rgba(255,255,255,.11);
  transform: translate(-50%, -50%) rotate(-5deg);
  transition: transform .35s ease, opacity .35s ease;
}

.wax-seal b { font-family: "Playfair Display", serif; font-size: clamp(.8rem, 3.2vw, 1rem); }
.wax-seal small { font-size: .65em; }

.cover-piglet,
.cover-tigger {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.22,.89,.36,1.15);
}

.cover-piglet {
  left: 1.5%;
  bottom:-4px;
  width:clamp(86px,25vw,116px);
  transform: rotate(-5deg);
}

.cover-tigger {
  right:-4px;
  bottom:-18px;
  width:clamp(184px,52vw,240px);
  transform: rotate(2deg);
}

.open-trigger:hover .wax-seal,
.open-trigger:focus-visible .wax-seal { transform: translate(-50%, -50%) rotate(1deg) scale(1.07); }
.open-trigger:focus-visible { outline: 2px solid #775021; outline-offset: -3px; border-radius: 14px; }

.cover.opening .envelope-flap { z-index: 1; transform: rotateX(180deg); }
.cover.opening .letter { transform:translateY(-124px) scale(1.035); }
.cover.opening .wax-seal { opacity: 0; transform: translate(-50%, 45px) scale(.72); }
.cover.opening .tap-copy,
.cover.opening .cover-copy,
.cover.opening .cover-signoff { opacity:0; transform:translateY(-8px); }
.cover.opening .cover-piglet { opacity:0; transform:translate(-16px,18px) rotate(-11deg); }
.cover.opening .cover-tigger { opacity:0; transform:translate(18px,18px) rotate(5deg); }

main { position:relative; overflow:clip; opacity:0; transition:opacity .5s ease; }
body.content-ready main { opacity:1; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns:48% 52%;
  grid-template-rows:auto auto;
  min-height:clamp(620px,86svh,720px);
  align-items: center;
  align-content:center;
  padding-top:max(40px,env(safe-area-inset-top));
  padding-bottom:86px;
  text-align: left;
}

.sun-glow {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.98), rgba(255,250,224,.64) 44%, transparent 73%);
  transform: translateX(-50%);
}

.hero-art-wrap {
  position: relative;
  z-index: 2;
  grid-column:1;
  grid-row:2;
  width:143%;
  margin:0 0 0 -4%;
  will-change: transform;
}
.hero-art { width: 100%; filter: drop-shadow(0 19px 16px rgba(79, 56, 29, .13)); }

.scribble {
  position: absolute;
  z-index: -1;
  width: 52px;
  height: 34px;
  border-top: 2px dashed rgba(102, 75, 37, .55);
  border-radius: 50%;
}
.scribble-left { left: -18px; top: 25%; transform: rotate(-18deg); }

.hero-copy { position:relative; z-index:3; grid-column:2; grid-row:2; padding-left:8px; }
.hero-copy .eyebrow { text-align:left; }
.hero-copy h2 { margin:0; font-size:clamp(2.45rem,10.9vw,3.35rem); letter-spacing:-.048em; }
.hero-copy h2 em { font-family: "Caveat", cursive; font-style: normal; font-size: 1.12em; }
.host-line { display:none; }
.welcome-note { max-width:235px; margin:16px 0 0; color:var(--ink-soft); font-family:"Playfair Display",serif; font-size:clamp(.85rem,3.5vw,1rem); font-style:italic; line-height:1.55; }

.section-garland,
.section-divider {
  position: relative;
  z-index: 2;
  display: block;
  width: calc(100% + 20px);
  max-width: 470px;
  height: auto;
  margin-inline: -10px;
  pointer-events: none;
  filter:none;
}
.section-garland,
.section-divider { animation:none; }
.hero-garland { grid-column:1/-1; grid-row:1; width:94%; margin:0 auto 18px; }

.section-garland.reveal,
.section-divider.reveal {
  transform:translateY(10px) scale(.965);
  transition:opacity .95s ease,transform 1.05s cubic-bezier(.2,.7,.2,1);
  will-change:transform,opacity;
}
.section-garland.reveal.is-visible,
.section-divider.reveal.is-visible {
  transform:translateY(0) scale(1);
}

.scroll-cue {
  position: absolute;
  bottom:22px;
  left: 50%;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 17px;
  border:1px solid rgba(98,68,33,.32);
  border-radius:999px;
  background:rgba(255,252,235,.55);
  color: var(--ink-soft);
  font-size:.68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.scroll-cue svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; animation:tap-bounce 1.8s ease-in-out infinite; }

.details-section { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.33), rgba(246,222,161,.24)); }
.details-section::before,
.rsvp-section::before {
  content: "";
  position: absolute;
  inset: 22px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(97,70,36,.18), transparent);
}

.corner-sprig {
  position: absolute;
  z-index: 0;
  width: clamp(116px, 35vw, 164px);
  opacity: 0;
  pointer-events: none;
  filter: saturate(.8);
  transform-origin: 0 100%;
  transition: opacity 1.1s ease .18s, margin 1.2s cubic-bezier(.2,.7,.2,1);
  animation: foliage-sway 9s ease-in-out infinite;
}
.corner-top-left { top: 72px; left: -54px; transform: rotate(18deg); }
.corner-bottom-right { right: -58px; bottom: 62px; transform: scaleX(-1) rotate(16deg); animation-delay: -4s; }
.corner-top-right { top: 72px; right: -54px; transform: scaleX(-1) rotate(12deg); animation-delay: -2.5s; }
.corner-middle-left { top: 42%; left: -64px; transform: rotate(21deg); animation-delay: -5s; }
.corner-top-left,
.corner-middle-left { margin-left:-18px; }
.corner-top-right,
.corner-bottom-right { margin-right:-18px; }
.section-in-view .corner-sprig { opacity:.35; margin-left:0; margin-right:0; }
.rsvp-section.section-in-view .corner-middle-left { opacity:.3; }

.section-heading { position: relative; z-index: 2; margin-bottom: 30px; text-align: center; }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 9vw, 2.85rem); letter-spacing: -.035em; }
.section-heading > p:not(.eyebrow) { max-width: 335px; margin: 14px auto 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.section-heading > p strong { color: var(--ink); }

.honey-rule { display: block; width: 68px; height: 8px; margin: 17px auto 0; border-radius: 50%; border-top: 3px solid var(--honey); }

.tiny-bee {
  position: absolute;
  top: 2px;
  right: 3%;
  width: 18px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, #f4c648 0 4px, #2f281f 4px 7px);
  transform: rotate(-16deg);
}
.tiny-bee::before, .tiny-bee::after { content:""; position:absolute; top:-8px; width:10px; height:8px; border:1px solid var(--ink); border-radius: 50%; background:rgba(255,255,255,.75); }
.tiny-bee::before { left:0; transform:rotate(-30deg); }
.tiny-bee::after { right:0; transform:rotate(30deg); }

.paper-card,
.form-card,
.rsvp-card {
  position: relative;
  border: 1px solid rgba(142, 105, 48, .2);
  border-radius: 22px;
  background:
    linear-gradient(142deg, rgba(255,255,255,.88), rgba(255,251,236,.94)),
    var(--paper);
  box-shadow: var(--shadow);
}

.details-card { padding: clamp(23px, 7vw, 32px); }
.details-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(196,153,73,.18); border-radius: 15px; pointer-events: none; }

.detail-row { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 13px; padding: 18px 0; border-bottom: 1px solid rgba(107,75,40,.11); }
.detail-row:first-child { padding-top: 5px; }
.detail-row:last-of-type { border-bottom: 0; }
.detail-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#8e641f; background:#fae7af; }
.detail-icon svg, .secondary-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.detail-row > div { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.detail-label { color:#927835; font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.detail-row strong { font-family:"Playfair Display", serif; font-size:clamp(1.05rem,4.5vw,1.25rem); }
.detail-row div > span:not(.detail-label) { color:var(--ink-soft); font-size:.85rem; line-height:1.45; }
.detail-row a { display:inline-flex; align-items:center; gap:5px; margin-top:5px; color:#9c5b22; font-size:.77rem; font-weight:700; text-underline-offset:3px; }
.detail-row a svg { width:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.girls-only { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; padding:15px; border-radius:12px; color:#643326; background:#f5dfd3; }
.girls-only svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.7; }
.girls-only p { margin:0; font-family:"Playfair Display", serif; font-size:.92rem; }
.girls-only strong { font-family:"DM Sans",sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.045em; }

.details-card .detail-row,
.details-card .girls-only {
  opacity:0;
  transform:translateY(10px);
}
.details-card.is-visible .detail-row,
.details-card.is-visible .girls-only { animation: refined-rise .66s cubic-bezier(.2,.7,.2,1) both; }
.details-card.is-visible .detail-row:nth-of-type(2) { animation-delay:.12s; }
.details-card.is-visible .detail-row:nth-of-type(3) { animation-delay:.21s; }
.details-card.is-visible .detail-row:nth-of-type(4) { animation-delay:.3s; }
.details-card.is-visible .girls-only { animation-delay:.4s; }

.secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  min-height: 46px;
  margin: 24px auto 0;
  padding: 0 20px;
  border: 1px solid rgba(81, 55, 28, .35);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.secondary-button:hover { transform: translateY(-2px); background:rgba(255,255,255,.43); box-shadow:0 8px 20px rgba(77,53,26,.11); }
.secondary-button:active { transform: translateY(0) scale(.98); }
.details-divider { width:100%; margin:48px 0 -55px; }

.countdown-section { position:relative; min-height:620px; padding-top:128px; padding-bottom:145px; background:linear-gradient(180deg, rgba(245,224,169,.18), rgba(255,252,233,.45)); }
.countdown-section > .section-heading { width:67%; margin-left:33%; text-align:left; }
.countdown-section > .section-heading .eyebrow { text-align:left; }
.countdown-section > .section-heading h2 { font-size:clamp(1.65rem,7.5vw,2.25rem); }
.balloon-space { position:absolute; z-index:1; top:105px; left:17%; width:clamp(122px,35vw,165px); transform:translateX(-50%); }
.balloon-pooh { position:relative; z-index:2; width:100%; filter:drop-shadow(0 18px 17px rgba(77,54,26,.15)); transform:translate3d(var(--spring-x, 0px),var(--spring-y, 0px),0) rotate(var(--spring-r, 0deg)); will-change:transform; }
.balloon-string { position:absolute; z-index:1; top:7%; left:50%; width:1px; height:190px; border-left:1.5px dashed rgba(70,53,35,.4); transform:translateX(-50%) rotate(4deg); transform-origin:top; }

.countdown-grid { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(5px,1.4vw,8px); width:68%; margin:29px 0 0 32%; }
.time-block { display:grid; place-items:center; min-width:0; padding:17px 3px 14px; border:1px solid rgba(134,91,35,.2); border-radius:15px; background:rgba(255,253,242,.77); box-shadow:0 14px 30px rgba(88,57,24,.09); backdrop-filter:blur(5px); }
.countdown-grid .time-block { opacity:0; transform:translateY(13px) scale(.985); }
.countdown-grid.is-visible .time-block { animation: refined-rise .66s cubic-bezier(.2,.7,.2,1) both; }
.countdown-grid.is-visible .time-block:nth-child(1) { animation-delay:.08s; }
.countdown-grid.is-visible .time-block:nth-child(2) { animation-delay:.16s; }
.countdown-grid.is-visible .time-block:nth-child(3) { animation-delay:.24s; }
.countdown-grid.is-visible .time-block:nth-child(4) { animation-delay:.32s; }
.time-block strong { font-family:"Playfair Display", serif; font-size:clamp(1.55rem,7.7vw,2.1rem); line-height:1; font-variant-numeric:tabular-nums; }
.time-block strong.tick { animation: digit-tick .35s ease; }
.time-block span { margin-top:7px; color:#906d2d; font-size:clamp(.54rem,2.4vw,.65rem); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.countdown-message { width:67%; min-height:1.4em; margin:18px 0 0 33%; text-align:left; color:var(--ink-soft); font-family:"Caveat",cursive; font-size:1.2rem; }
.countdown-divider { position:absolute; bottom:26px; left:0; width:100%; margin:0; }

.rsvp-section { position:relative; padding-top:116px; background:linear-gradient(180deg,rgba(253,246,218,.48),rgba(239,207,129,.25)); }
.rsvp-heading-wrap { position:relative; min-height:150px; }
.rsvp-heading { width:100%; margin:0 auto 30px; text-align:center; }
.rsvp-heading .eyebrow { text-align:center; }
.rsvp-heading h2 { font-size:clamp(2rem,8.5vw,2.72rem); line-height:1.03; }
.rsvp-heading > p:not(.eyebrow) { margin:13px auto 0; text-align:center; }
.rsvp-friends { position:absolute; z-index:4; right:8px; top:-108px; width:clamp(104px,28vw,126px); filter:drop-shadow(0 14px 14px rgba(70,47,25,.13)); opacity:0; transform:translate(13px,8px) rotate(5deg) scale(.97); transition:opacity .8s ease .18s,transform .95s cubic-bezier(.2,.72,.2,1) .18s; }
.rsvp-card.is-visible .rsvp-friends { opacity:1; transform:translate(0,0) rotate(2deg) scale(1); }

.rsvp-card { z-index:2; margin-top:90px; padding:30px clamp(22px,7vw,32px); text-align:center; }
.rsvp-card-icon { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 14px; border-radius:50%; color:#8e5f20; background:#fae4aa; }
.rsvp-card-icon svg { width:23px; fill:none; stroke:currentColor; stroke-width:1.6; }
.rsvp-card-kicker { margin:0; color:#976c24; font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.rsvp-card h3 { margin:5px 0 0; font-family:"Playfair Display",serif; font-size:clamp(1.72rem,7vw,2.1rem); }
.rsvp-card > p:not(.rsvp-card-kicker) { max-width:300px; margin:10px auto 0; color:var(--ink-soft); font-size:.82rem; line-height:1.55; }
.rsvp-card-fields { display:grid; gap:9px; margin:22px 0 18px; text-align:left; }
.rsvp-card-fields span { display:grid; gap:3px; padding:12px 14px; border:1px solid rgba(116,82,39,.17); border-radius:10px; background:#f6f1e8; }
.rsvp-card-fields b { font-size:.67rem; letter-spacing:.07em; text-transform:uppercase; }
.rsvp-card-fields i { color:#8a7a68; font-size:.72rem; font-style:normal; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:49px; border:0; border-radius:999px; color:#fffaf0; background:linear-gradient(135deg,#d9971b,#b97310); box-shadow:0 10px 22px rgba(153,96,15,.2); font-size:.76rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; transition:transform .2s ease,box-shadow .2s ease; }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 13px 26px rgba(153,96,15,.25); }
.primary-button:active { transform:scale(.985); }
.form-note { max-width:300px; margin:14px auto 0!important; color:var(--ink-soft); font-size:.72rem!important; line-height:1.5!important; text-align:center; }

.rsvp-dialog { width:min(100vw,var(--shell-width)); max-width:none; height:100dvh; max-height:none; margin:0 auto; padding:0; border:0; color:var(--ink); background:var(--cream); overflow:hidden; }
.rsvp-dialog::backdrop { background:rgba(35,26,19,.72); backdrop-filter:blur(5px); }
.rsvp-dialog[open] { animation:dialog-in .42s cubic-bezier(.2,.72,.2,1) both; }
.rsvp-dialog-shell { display:grid; grid-template-rows:auto 1fr; height:100%; background:#f8f0d7; }
.rsvp-dialog-header { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:max(13px,env(safe-area-inset-top)) 18px 12px; color:#fff3ca; background:#4b3726; box-shadow:0 6px 18px rgba(53,37,24,.18); }
.rsvp-dialog-header div { display:grid; }
.rsvp-dialog-header span { color:#dab875; font-size:.56rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.rsvp-dialog-header strong { margin-top:2px; font-family:"Playfair Display",serif; font-size:1.35rem; }
.rsvp-dialog-header button { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:inherit; background:rgba(255,255,255,.08); }
.rsvp-dialog-header button:focus { outline:none; }
.rsvp-dialog-header button:focus-visible { outline:2px solid #f1ca70; outline-offset:2px; }
.rsvp-dialog-header svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.rsvp-dialog iframe { display:block; width:100%; height:100%; border:0; background:#fff; }
body.form-open { overflow:hidden; }
body.form-open .music-toggle { opacity:0; pointer-events:none; transform:translateY(15px); }

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

.closing { position:relative; padding-top:64px; padding-bottom:54px; text-align:center; background:linear-gradient(180deg,rgba(249,234,190,.22),rgba(255,249,225,.7)); }
.closing::before { content:""; position:absolute; top:42px; left:50%; width:100px; height:2px; background:linear-gradient(90deg,transparent,var(--honey),transparent); transform:translateX(-50%); }
.closing-garland { width:104%; margin:-12px 0 18px -2%; }
.closing-copy h2 { margin:0; font-family:"Caveat",cursive; font-size:clamp(3.2rem,15vw,4.7rem); line-height:.9; transform:rotate(-2deg); }
.closing-copy > p:not(.eyebrow) { max-width:315px; margin:22px auto 0; color:var(--ink-soft); font-family:"Playfair Display",serif; font-size:.95rem; font-style:italic; line-height:1.6; }
.friends-log { width:108%; max-width:none; margin:38px 0 0 -4%; filter:drop-shadow(0 20px 18px rgba(72,49,25,.14)); }
.date-stamp { display:inline-grid; gap:2px; margin-top:24px; padding:11px 22px; border:1px solid rgba(110,77,35,.28); border-radius:999px; background:rgba(255,255,255,.36); }
.date-stamp span { color:#8a692f; font-size:.58rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.date-stamp strong { font-family:"Playfair Display",serif; font-size:1rem; letter-spacing:.1em; }

.site-footer { min-height:88px; padding:26px 20px calc(23px + var(--safe-bottom)); color:#f9e8b8; background:#493727; text-align:center; }
.site-footer p { margin:0; font-family:"Caveat",cursive; font-size:clamp(.98rem,4.5vw,1.15rem); font-weight:600; letter-spacing:.015em; }

.music-toggle {
  position:fixed;
  z-index:40;
  right:max(14px, calc((100vw - var(--shell-width))/2 + 14px));
  bottom:calc(14px + var(--safe-bottom));
  display:flex;
  align-items:center;
  gap:7px;
  min-height:39px;
  padding:0 13px;
  border:1px solid rgba(255,246,210,.3);
  border-radius:999px;
  color:#fff5d4;
  background:rgba(65,47,32,.88);
  box-shadow:0 8px 24px rgba(36,26,18,.25);
  backdrop-filter:blur(9px);
  opacity:0;
  pointer-events:none;
  transform:translateY(15px);
  transition:opacity .35s ease, transform .35s ease, background .25s ease;
}
body.content-ready .music-toggle { opacity:1; pointer-events:auto; transform:translateY(0); }
.music-toggle:hover { background:#59402c; }
.music-toggle:focus-visible { outline:2px solid #fff4c8; outline-offset:3px; }
.music-toggle.needs-start { background:#7a531e; animation:sound-hint 2.2s ease-in-out 2; }
.music-label { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.equaliser { display:flex; align-items:flex-end; gap:2px; width:14px; height:14px; }
.equaliser i { display:block; width:2px; height:40%; border-radius:2px; background:currentColor; transform-origin:bottom; animation:eq 1s ease-in-out infinite; }
.equaliser i:nth-child(2) { animation-delay:-.33s; }
.equaliser i:nth-child(3) { animation-delay:-.66s; }
.music-toggle[aria-pressed="false"] .equaliser i { animation-play-state:paused; transform:scaleY(.35); }

.bee-field {
  position:fixed;
  z-index:1;
  top:0;
  left:50%;
  width:min(100vw,var(--shell-width));
  height:100dvh;
  overflow:hidden;
  pointer-events:none;
  transform:translateX(-50%);
  opacity:0;
  transition:opacity .7s ease 1.2s;
}
body.content-ready .bee-field { opacity:.56; }
.bee { position:absolute; display:block; width:19px; height:13px; filter:drop-shadow(0 3px 2px rgba(60,43,24,.15)); will-change:transform; }
.bee i { position:absolute; inset:0; border:1.5px solid #30281f; border-radius:50%; background:repeating-linear-gradient(90deg,#efbd32 0 5px,#2e271f 5px 8px); }
.bee i::before,.bee i::after { content:""; position:absolute; top:-8px; width:11px; height:9px; border:1px solid rgba(58,49,38,.8); border-radius:50%; background:rgba(255,255,255,.78); transform-origin:bottom; animation:wing .12s ease-in-out infinite alternate; }
.bee i::before { left:-1px; transform:rotate(-28deg); }
.bee i::after { right:-1px; transform:rotate(28deg); }
.bee-one { top:14%; left:-8%; animation:bee-one 18s linear infinite; }
.bee-two { top:42%; right:-9%; animation:bee-two 23s linear -6s infinite; transform:scale(.78); }
.bee-three { top:69%; left:-9%; animation:bee-three 20s linear -12s infinite; transform:scale(.63); }
.bee-four { top:28%; left:54%; animation:bee-four 15s ease-in-out -4s infinite; transform:scale(.56); opacity:.8; }
.bee-three,.bee-four { display:none; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .85s cubic-bezier(.2,.7,.25,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }

@keyframes tap-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@keyframes scroll-cue { 0%,100%{transform:scaleY(.45);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} }
@keyframes digit-tick { 0%{transform:translateY(-4px);opacity:.35} 100%{transform:translateY(0);opacity:1} }
@keyframes eq { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
@keyframes wing { from{transform:rotate(-12deg) scaleY(.75)} to{transform:rotate(22deg) scaleY(1)} }
@keyframes bee-one { 0%{transform:translate(-25px,0) rotate(8deg)} 20%{transform:translate(120px,80px) rotate(-9deg)} 48%{transform:translate(300px,-5px) rotate(9deg)} 75%{transform:translate(430px,105px) rotate(-7deg)} 100%{transform:translate(560px,25px) rotate(8deg)} }
@keyframes bee-two { 0%{transform:translate(35px,0) scale(.78) rotate(178deg)} 30%{transform:translate(-125px,-110px) scale(.78) rotate(190deg)} 66%{transform:translate(-320px,35px) scale(.78) rotate(169deg)} 100%{transform:translate(-560px,-60px) scale(.78) rotate(181deg)} }
@keyframes bee-three { 0%{transform:translate(-30px,0) scale(.63)} 35%{transform:translate(180px,-85px) scale(.63) rotate(11deg)} 68%{transform:translate(340px,50px) scale(.63) rotate(-8deg)} 100%{transform:translate(560px,-35px) scale(.63)} }
@keyframes bee-four { 0%,100%{transform:translate(-5px,-4px) scale(.56) rotate(-5deg)} 25%{transform:translate(36px,18px) scale(.56) rotate(8deg)} 50%{transform:translate(1px,45px) scale(.56) rotate(-8deg)} 75%{transform:translate(-30px,17px) scale(.56) rotate(7deg)} }
@keyframes decor-breathe { 0%,100%{filter:saturate(.82) contrast(.96)} 50%{filter:saturate(.9) contrast(1)} }
@keyframes foliage-sway { 0%,100%{translate:0 0} 50%{translate:2px -3px} }
@keyframes refined-rise { from{opacity:0;transform:translateY(13px) scale(.988)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes dialog-in { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes sound-hint { 0%,100%{box-shadow:0 8px 24px rgba(36,26,18,.25)} 50%{box-shadow:0 8px 24px rgba(36,26,18,.25),0 0 0 6px rgba(234,180,66,.16)} }

@media (max-height: 700px) {
  .cover { padding-top:max(20px,env(safe-area-inset-top)); }
  .cover-copy h1 { font-size:clamp(2.25rem,10vw,2.9rem); }
  .cover-ornament { margin-top:11px; }
  .open-trigger { min-height:320px; padding-top:12px; }
  .envelope-scene { top:43px; transform:translateX(-50%) scale(.88); transform-origin:top center; }
  .cover-signoff span { margin-top:3px; }
  .hero { min-height:620px; }
}

@media (max-width: 360px) {
  .cover { padding-inline:10px; }
  .cover-copy h1 { font-size:2.38rem; }
  .cover-copy .eyebrow { font-size:.62rem; }
  .cover-ornament { margin-top:12px; }
  .cover-signoff strong { font-size:1.35rem; }
  .cover-signoff span { font-size:1.88rem; }
  .cover-piglet { width:82px; }
  .cover-tigger { width:178px; }
  .hero-copy h2 { font-size:2.05rem; }
  .welcome-note { font-size:.78rem; }
}

@media (min-width: 481px) {
  body::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-5;
    background:linear-gradient(120deg,#211a15,#34271c);
  }
}

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

/* Final mobile layout: deliberately simple geometry so the invitation stays
   composed on compact phones, Pro Max screens and the centred desktop shell. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

.cover {
  grid-template-rows: auto minmax(0, 1fr);
  padding: max(30px, env(safe-area-inset-top)) clamp(16px, 5vw, 24px) calc(20px + var(--safe-bottom));
}

.cover-copy { max-width: 430px; margin-inline: auto; }
.cover-copy .eyebrow { margin-bottom: 11px; font-size: clamp(.62rem, 2.8vw, .76rem); }
.cover-copy h1 { display: grid; justify-items: center; text-transform: none; }
.cover-copy h1 span {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.65rem, 11.5vw, 3.55rem);
  font-style: normal;
  letter-spacing: -.055em;
  line-height: .94;
  white-space: nowrap;
}
.cover-copy h1 em {
  margin-top: 4px;
  color: #a96b13;
  font-family: "Caveat", cursive;
  font-size: clamp(2.75rem, 12vw, 3.65rem);
  font-style: normal;
  font-weight: 700;
  line-height: .92;
  transform: rotate(-1.5deg);
}
.cover-ornament { margin-top: 14px; }
.cover-ornament i { width: clamp(54px, 17vw, 74px); }
.cover-date { margin-top: 12px; }

.open-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 0;
  padding: 42px 0 0;
}
.tap-copy {
  top: max(8px, calc(50% - 225px));
  font-size: clamp(1.42rem, 6.1vw, 1.75rem);
}
.envelope-scene {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: clamp(292px, 78vw, 355px);
  transform: none;
}
.envelope {
  top: clamp(25px, 7vw, 34px);
  width: min(88vw, 394px);
  height: clamp(190px, 52vw, 232px);
}
.envelope-back { border-color: #9f6b2f; background: #fff8e6; }
.envelope-front {
  background:
    linear-gradient(31deg,#f2d18a 0 49.4%,transparent 50%) left/51% 100% no-repeat,
    linear-gradient(-31deg,#fff6dd 0 49.4%,transparent 50%) right/51% 100% no-repeat,
    linear-gradient(0deg,#fff1c6,#e6bc61);
}
.envelope-flap { background: linear-gradient(165deg,#fffaf0 5%,#e6bf6c 100%); }
.cover-piglet { left: 0; bottom: 0; width: clamp(78px, 22vw, 105px); }
.cover-tigger { right: -2px; bottom: -5px; width: clamp(188px, 53vw, 244px); }
.cover.opening .letter { transform: translateY(-138px) scale(1.08); }
.cover.opening .tap-copy { opacity: 0; transform: translateX(-50%) translateY(-8px); }
.cover.opening .cover-copy { opacity: 0; transform: translateY(-12px); }

.hero {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 3px;
  min-height: 100svh;
  align-content: center;
  padding: max(30px, env(safe-area-inset-top)) clamp(22px, 6vw, 32px) 84px;
  text-align: center;
}
.hero-garland {
  grid-column: 1;
  grid-row: 1;
  width: min(90%, 390px);
  margin: 0 auto 5px;
}
.hero-art-wrap {
  grid-column: 1;
  grid-row: 2;
  width: min(68vw, 282px);
  margin: 0 auto;
}
.hero-copy {
  grid-column: 1;
  grid-row: 3;
  max-width: 410px;
  margin: -2px auto 0;
  padding: 0;
  text-align: center;
}
.hero-copy .eyebrow { margin-bottom: 8px; text-align: center; }
.hero-copy h2 { font-size: clamp(2.5rem, 11.4vw, 3.35rem); }
.host-line {
  display: block;
  margin: 13px auto 0;
  color: #a56517;
  font-family: "Caveat", cursive;
  font-size: clamp(1.35rem, 6vw, 1.75rem);
  font-weight: 700;
}
.welcome-note { max-width: 330px; margin: 8px auto 0; font-size: clamp(.82rem, 3.5vw, .98rem); }
.scroll-cue { bottom: 16px; min-height: 45px; padding-inline: 18px; background: rgba(255,253,240,.78); }

.details-divider,
.countdown-divider {
  left: auto;
  width: calc(100% - 8px);
  max-width: none;
  margin-left: 4px;
  margin-right: 4px;
  overflow: visible;
}
.details-divider { margin-top: 44px; margin-bottom: -50px; }

.rsvp-section { padding-top: 92px; }
.rsvp-heading-wrap { min-height: 0; }
.rsvp-heading { margin-bottom: 0; }
.rsvp-heading h2 { max-width: 370px; margin-inline: auto; }
.rsvp-card {
  margin-top: 88px;
  padding: 112px clamp(22px, 7vw, 32px) 28px;
}
.rsvp-friends {
  top: -72px;
  right: 12px;
  width: clamp(145px, 40vw, 185px);
}
.rsvp-card.is-visible .rsvp-friends { transform: translate(0,0) rotate(1deg) scale(1); }
.rsvp-card-icon { margin-top: 0; margin-left: 0; }
.form-note { padding: 0 4px; }

.rsvp-dialog {
  position: fixed;
  inset: 0;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.rsvp-dialog-shell,
.rsvp-dialog iframe { width: 100%; min-width: 100%; }
body.form-open {
  position: fixed;
  top: var(--rsvp-scroll, 0px);
  left: 0;
  width: 100%;
  overflow: hidden;
}

@media (max-height: 740px) {
  .cover { padding-top: max(18px, env(safe-area-inset-top)); }
  .cover-copy h1 span { font-size: clamp(2.25rem, 10vw, 2.85rem); }
  .cover-copy h1 em { font-size: clamp(2.4rem, 10.6vw, 3rem); }
  .cover-copy .eyebrow { margin-bottom: 6px; }
  .cover-ornament { margin-top: 8px; }
  .cover-date { margin-top: 7px; }
  .open-trigger { padding-top: 26px; }
  .tap-copy { top: max(3px, calc(50% - 188px)); }
  .envelope-scene { height: 290px; transform: scale(.9); }
  .hero-garland { width: 73%; }
  .hero-art-wrap { width: min(51vw, 205px); }
  .hero-copy h2 { font-size: clamp(2.1rem, 9.5vw, 2.65rem); }
  .host-line { margin-top: 7px; }
  .welcome-note { font-size: .78rem; line-height: 1.42; }
}

/* v7 – single real-envelope asset and collision-free RSVP intro */
.envelope {
  height: auto;
  aspect-ratio: 3 / 2;
  filter: drop-shadow(0 18px 24px rgba(69,49,30,.15));
}
.envelope-art {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  transition: opacity .32s ease, transform .46s cubic-bezier(.2,.7,.2,1);
}
.wax-seal { top: 63.5%; }
.cover.opening .envelope-art {
  opacity: 0;
  transform: scale(.965) translateY(14px);
}
.cover.opening .envelope { filter: none; }

.hero-art-wrap { margin: 0 auto 21px; }

.rsvp-card {
  margin-top: 170px;
  padding: 42px clamp(24px, 7vw, 32px) 44px;
}
.rsvp-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 58%;
  min-height: 166px;
  margin: 0 auto 0 0;
  text-align: center;
}
.rsvp-intro .rsvp-card-icon { flex: 0 0 auto; margin: 0 auto 16px; }
.rsvp-intro .rsvp-card-kicker { margin: 0; }
.rsvp-intro h3 {
  margin: 7px 0 0;
  font-size: clamp(1.6rem, 6.7vw, 1.95rem);
  line-height: 1.02;
}
.rsvp-intro > p:not(.rsvp-card-kicker) {
  max-width: 220px;
  margin: 13px auto 0;
  color: var(--ink-soft);
  font-size: clamp(.72rem, 2.9vw, .82rem);
  line-height: 1.5;
}
.rsvp-card-fields { margin-top: 28px; }
.form-note {
  margin-top: 20px !important;
  padding: 0 12px;
  line-height: 1.6 !important;
}

@media (max-height: 740px) {
  .hero-art-wrap { margin-bottom: 17px; }
  .rsvp-card { margin-top: 154px; padding-top: 38px; padding-bottom: 40px; }
  .rsvp-intro { min-height: 156px; }
}

@media (max-width: 380px) {
  .rsvp-heading-wrap .rsvp-friends { right: -36px; }
  .rsvp-intro { width: 58%; }
  .rsvp-intro h3 { font-size: 1.55rem; }
}

.closing-garland { width: 96%; margin: 0 auto 18px; }
.friends-log { width: 100%; max-width: 430px; margin: 34px auto 0; }
.music-toggle {
  justify-content: center;
  width: 42px;
  min-width: 42px;
  padding: 0;
}
.music-toggle .music-label { display: none; }
.music-toggle.needs-start {
  width: auto;
  padding: 0 13px;
}
.music-toggle.needs-start .music-label { display: inline; }

.scroll-cue {
  justify-content: center;
  width: min(82%, 270px);
  padding: 0 42px;
  text-align: center;
}
.scroll-cue span { display: block; width: 100%; text-align: center; }
.scroll-cue svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  animation: none;
}

/* v6 – envelope refinement, larger welcome art and reversible motion */
.cover-copy { padding-top: clamp(30px, 5.5svh, 58px); }
.envelope { filter: drop-shadow(0 20px 28px rgba(87,61,31,.16)); }
.envelope-back {
  border: 1px solid rgba(117,82,38,.24);
  background: #fff9ea;
  transition: opacity .34s ease;
}
.envelope-flap {
  background: linear-gradient(165deg, #fffdf5 3%, #f6e9ce 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}
.envelope-front {
  background:
    linear-gradient(31deg,#f5e7ca 0 49.4%,transparent 50%) left/51% 100% no-repeat,
    linear-gradient(-31deg,#fffaf0 0 49.4%,transparent 50%) right/51% 100% no-repeat,
    #f8ecd5;
}
.letter {
  border: 0;
  background: #fffdf7;
  box-shadow: 0 18px 38px rgba(74,51,28,.16);
}
.cover-tigger {
  right: -24px;
  bottom: -40px;
}
.cover.opening .envelope-back,
.cover.opening .envelope-front,
.cover.opening .envelope-flap { opacity: 0; }

.hero { row-gap: 6px; }
.hero-garland {
  width: min(105%, 450px);
  max-width: none;
  margin: 0 0 8px -2.5%;
}
.hero-art-wrap { width: min(76vw, 310px); }
.hero-copy .eyebrow { margin-bottom: 17px; }

.balloon-space {
  animation: pooh-balloon-float 4.6s ease-in-out infinite;
  will-change: transform;
}

.reveal {
  transition: opacity .7s ease, transform .82s cubic-bezier(.2,.7,.25,1);
  will-change: opacity, transform;
}

.rsvp-heading-wrap {
  position: relative;
  z-index: 4;
  min-height: 0;
}
.rsvp-heading { margin-bottom: 0; }
.rsvp-heading-wrap .rsvp-friends {
  position: absolute;
  z-index: 5;
  top: calc(100% + 14px);
  right: -20px;
  width: clamp(178px, 47vw, 208px);
  margin: 0;
  opacity: 0;
  filter: drop-shadow(0 14px 14px rgba(70,47,25,.13));
  transform: translate(18px,12px) rotate(3deg) scale(.96);
  transition: opacity .72s ease .12s, transform .9s cubic-bezier(.2,.72,.2,1) .12s;
}
.rsvp-heading-wrap.is-visible .rsvp-friends {
  opacity: 1;
  transform: translate(0,0) rotate(1deg) scale(1);
}
.rsvp-card {
  margin-top: 170px;
  padding: 135px clamp(22px, 7vw, 32px) 30px;
  overflow: visible;
}

.closing-garland { width: 100%; }

@keyframes pooh-balloon-float {
  0%, 100% { transform: translateX(-50%) translateY(8px) rotate(-1.2deg); }
  50% { transform: translateX(-50%) translateY(-19px) rotate(1.1deg); }
}

@media (max-height: 740px) {
  .cover-copy { padding-top: clamp(20px, 4svh, 34px); }
  .hero-garland { width: 96%; margin-left: 2%; }
  .hero-art-wrap { width: min(60vw, 250px); }
  .rsvp-heading-wrap .rsvp-friends { width: clamp(166px, 44vw, 192px); }
  .rsvp-card { margin-top: 154px; padding-top: 122px; }
}

@media (max-width: 360px) {
  .cover-copy h1 span { font-size: 2.35rem; }
  .cover-copy h1 em { font-size: 2.55rem; }
  .hero-art-wrap { width: min(65vw, 230px); }
  .rsvp-friends { width: 142px; }
}

@media (max-width: 320px) {
  .cover-copy h1 span { font-size: 2.02rem; }
  .cover-copy h1 em { font-size: 2.28rem; }
  .cover-piglet { width: 72px; }
  .cover-tigger { width: 170px; }
}
.card-invite-title {
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  margin:0 0 16px;
  padding:0 0 17px;
  border-bottom:1px solid rgba(107,75,40,.11);
  text-align:center;
}
.card-invite-title strong { font-family:"Playfair Display",serif; font-size:clamp(1.35rem,6vw,1.7rem); letter-spacing:.015em; text-transform:uppercase; }
.card-invite-title em { margin-top:5px; color:#ae6e16; font-family:"Caveat",cursive; font-size:clamp(1.7rem,7.5vw,2.1rem); font-weight:700; line-height:1; }
.card-invite-title > span { margin-top:12px; gap:10px; }
.card-invite-title span i { width:44px; }
.card-invite-title span b { width:8px; height:8px; }

/* v5 – rebuilt problem areas observed in rec2.mov */
.cover {
  -webkit-user-select: none;
  user-select: none;
  transition: opacity .55s cubic-bezier(.4,0,.2,1), visibility .55s;
}
.envelope {
  filter: drop-shadow(0 22px 24px rgba(82,53,20,.2));
}
.envelope-back {
  border: 1.5px solid #a97431;
  background: linear-gradient(155deg, #f8e4a9, #e9bf63);
}
.envelope-flap {
  background: linear-gradient(165deg, #fff8dd 4%, #e7c16e 100%);
  transition: transform .58s cubic-bezier(.2,.72,.25,1), opacity .36s ease, z-index 0s .3s;
}
.envelope-front {
  background:
    linear-gradient(31deg,#e7bd62 0 49.4%,transparent 50%) left/51% 100% no-repeat,
    linear-gradient(-31deg,#f6dda0 0 49.4%,transparent 50%) right/51% 100% no-repeat,
    linear-gradient(0deg,#f4d791,#dfad48);
  transition: opacity .45s ease, transform .55s ease;
}
.letter {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform: translateY(38px) scale(.92);
  transition: opacity .28s ease .12s, transform .74s cubic-bezier(.2,.78,.25,1) .12s;
}
.letter-title { max-width: 270px; font-size: clamp(1.18rem, 5.2vw, 1.5rem); }
.letter-date { font-size: clamp(.52rem, 2.3vw, .64rem); }
.cover-piglet { width: clamp(72px, 21vw, 96px); }
.cover-tigger { width: clamp(178px, 48vw, 218px); }
.cover.opening .letter {
  z-index: 12;
  opacity: 1;
  transform: translateY(-138px) scale(1.07);
}
.cover.opening .envelope-front { opacity: .35; transform: translateY(30px); }
.cover.opening .envelope-back { opacity: .28; }

.corner-sprig,
.details-divider,
.countdown-divider { display: none !important; }
.details-section::before,
.rsvp-section::before { display: none; }
.details-section { padding-bottom: 86px; }
.countdown-section {
  min-height: clamp(590px, 82svh, 690px);
  padding-top: 112px;
  padding-bottom: 105px;
}
.countdown-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 78px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #d59523, transparent);
  transform: translateX(-50%);
}

.rsvp-section { padding-top: 88px; padding-bottom: 78px; }
.rsvp-heading { margin-bottom: 32px; }
.rsvp-card {
  margin-top: 0;
  padding: 30px clamp(22px, 7vw, 32px) 0;
  overflow: hidden;
}
.rsvp-card-icon { margin: 0 auto 14px; }
.rsvp-friends {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(64vw, 245px);
  margin: 18px -12px -8px auto;
  opacity: 0;
  transform: translate(14px,12px) rotate(3deg) scale(.96);
  transition: opacity .72s ease .18s, transform .9s cubic-bezier(.2,.72,.2,1) .18s;
}
.rsvp-card.is-visible .rsvp-friends {
  opacity: 1;
  transform: translate(0,0) rotate(1deg) scale(1);
}

@media (max-height: 740px) {
  .countdown-section { min-height: 570px; padding-top: 98px; padding-bottom: 84px; }
  .rsvp-section { padding-top: 72px; }
  .rsvp-friends { width: min(56vw, 210px); }
}

/* Final v7 cascade – must remain last. */
.envelope {
  height: auto;
  aspect-ratio: 3 / 2;
  filter: drop-shadow(0 18px 24px rgba(69,49,30,.15));
}
.envelope-art {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  transition: opacity .32s ease, transform .46s cubic-bezier(.2,.7,.2,1);
}
.wax-seal { top: 63.5%; }
.cover.opening .envelope-art {
  opacity: 0;
  transform: scale(.965) translateY(14px);
}
.cover.opening .envelope { filter: none; }

.hero-art-wrap { margin: 0 auto 21px; }

.rsvp-heading { margin-bottom: 0; }
.rsvp-card {
  margin-top: 170px;
  padding: 42px clamp(24px, 7vw, 32px) 44px;
  overflow: visible;
}
.rsvp-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 58%;
  min-height: 166px;
  margin: 0 auto 0 0;
  text-align: center;
}
.rsvp-intro .rsvp-card-icon { flex: 0 0 auto; margin: 0 auto 16px; }
.rsvp-intro .rsvp-card-kicker { margin: 0; }
.rsvp-intro h3 {
  margin: 7px 0 0;
  font-size: clamp(1.6rem, 6.7vw, 1.95rem);
  line-height: 1.02;
}
.rsvp-intro > p:not(.rsvp-card-kicker) {
  max-width: 220px;
  margin: 13px auto 0;
  color: var(--ink-soft);
  font-size: clamp(.72rem, 2.9vw, .82rem);
  line-height: 1.5;
}
.rsvp-card-fields { margin-top: 28px; }
.form-note {
  margin-top: 20px !important;
  padding: 0 12px;
  line-height: 1.6 !important;
}

@media (max-height: 740px) {
  .hero-art-wrap { margin-bottom: 17px; }
  .rsvp-card { margin-top: 154px; padding-top: 38px; padding-bottom: 40px; }
  .rsvp-intro { min-height: 156px; }
}

@media (max-width: 380px) {
  .rsvp-heading-wrap .rsvp-friends { right: -36px; }
  .rsvp-intro h3 { font-size: 1.55rem; }
}

/* Keep the RSVP characters visible for the full RSVP section. */
.rsvp-section.section-in-view .rsvp-friends {
  opacity: 1;
  transform: translate(0,0) rotate(1deg) scale(1);
}