/* ============ FONTS (local) ============ */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/CormorantGaramond-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/CormorantGaramond-600-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/CormorantGaramond-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/CormorantGaramond-600.woff2') format('woff2'); }
@font-face { font-family: 'Pinyon Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PinyonScript-400.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/PlayfairDisplay-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/PlayfairDisplay-500.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/PlayfairDisplay-600.woff2') format('woff2'); }

/* ============ TOKENS ============ */
:root {
  --cream: #fcf4ec;
  --cream-deep: #f6e9db;
  --blush: #fbe9dd;
  --ink: #2f3d33;
  --ink-soft: #4a5a4d;
  --rose: #d98a8c;
  --gold: #c9a35e;
  --gold-soft: #d9bd7f;
  --olive: #5c6b42;
  --olive-deep: #4d5a36;
  --serif: 'Playfair Display', 'Times New Roman', serif;
  --garamond: 'Cormorant Garamond', Georgia, serif;
  --script: 'Pinyon Script', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--garamond);
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    /* watercolor paper grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 50% at 12% 4%, var(--blush) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 92% 20%, #fbf0e2 0%, transparent 60%),
    radial-gradient(ellipse 75% 50% at 85% 96%, #f8e6da 0%, transparent 58%),
    radial-gradient(ellipse 65% 45% at 8% 88%, #f1ecdd 0%, transparent 60%);
  overflow-x: hidden;
}

/* ============ STICKY NAV ============ */
.sticky-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(252, 244, 236, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 163, 94, 0.3);
  transform: translateY(-110%);
  transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}

.sticky-nav.show { transform: translateY(0); }

.sn-logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .1em;
  color: var(--ink);
  text-decoration: none;
}

.sn-links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }

.sn-links a {
  font-family: var(--garamond);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color .3s ease;
}

.sn-links a:hover { color: var(--rose); }

.sn-links .sn-rsvp {
  background: var(--olive);
  color: #f6efdf;
  padding: .45rem 1.1rem;
  border: 1px solid var(--gold-soft);
}

.sn-links .sn-rsvp:hover { color: #fff; background: var(--olive-deep); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  cursor: default;
}

.layer { position: absolute; will-change: transform; }

/* parallax wrappers get their offset via --px / --py set in JS */
.layer { transform: translate(calc(var(--px, 0) * var(--depth, 0) * 1px), calc(var(--py, 0) * var(--depth, 0) * 1px)); }

/* --- floral side strips --- */
.strip-wrap { top: 0; height: 100%; z-index: 1; }
.strip-left  { left: 0; }
.strip-right { right: 0; }

.strip-wrap img {
  height: 100%;
  width: auto;
  display: block;
  animation: strip-in 1.6s ease .2s both;
}

.strip-left img {
  -webkit-mask-image: linear-gradient(to right, #000 60%, transparent 99%);
  mask-image: linear-gradient(to right, #000 60%, transparent 99%);
}

.strip-right img {
  -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 99%);
  mask-image: linear-gradient(to left, #000 60%, transparent 99%);
}

@keyframes strip-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- mobile corner roses (hidden on desktop) --- */
.corner-roses { display: none; position: absolute; z-index: 1; pointer-events: none; }

/* --- gazebo --- */
.gazebo-wrap {
  left: 50%;
  bottom: 21vh;
  margin-left: calc(min(46vw, 64vh) / -2);
  width: min(46vw, 64vh);
  z-index: 1;
}

.gazebo-wrap img {
  width: 100%;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 54%, #000 52%, transparent 90%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 54%, #000 52%, transparent 90%);
  animation: gazebo-in 1.4s cubic-bezier(.22, .8, .3, 1) .9s both;
}

@keyframes gazebo-in {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- sparkles --- */
.sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.sparkles span {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 7px; height: 7px;
  background: radial-gradient(circle, #ffe9b0 0%, #e9c87e 55%, transparent 75%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: twinkle 3.8s ease-in-out var(--t) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50%      { opacity: .95; transform: scale(1.6) rotate(40deg); }
}

/* --- the kids --- */
.kid-wrap { z-index: 3; }

.kid-girl {
  left: 12vw;
  bottom: 13vh;
  height: min(56vh, 34vw);
}

.kid-boy {
  right: 14vw;
  bottom: 26vh;
  height: min(40vh, 25vw);
}

/* the boy's photo is a waist-up crop — soften its bottom edge */
.kid-boy .kid {
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

.kid {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(95, 75, 45, 0.22));
  transition: transform .4s cubic-bezier(.2, 1.2, .4, 1);
}

/* act one: the kids walk on stage, from the wings toward center */
.kid-girl .kid { animation: kid-in-left 2.2s cubic-bezier(.22, .9, .32, 1) .5s both, kid-bob 7s ease-in-out 3.3s infinite; }
.kid-boy  .kid { animation: kid-in-right 2.2s cubic-bezier(.22, .9, .32, 1) .8s both, kid-bob 8s ease-in-out 3.5s infinite; }

.kid-wrap:hover .kid { transform: rotate(-2.5deg) scale(1.035); }
.kid-boy:hover .kid  { transform: rotate(2.5deg) scale(1.035); }

@keyframes kid-in-left {
  0%   { opacity: 0; transform: translateX(-42vw) rotate(-6deg); }
  55%  { opacity: 1; }
  82%  { transform: translateX(1.2vw) rotate(1.4deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes kid-in-right {
  0%   { opacity: 0; transform: translateX(42vw) rotate(6deg); }
  55%  { opacity: 1; }
  82%  { transform: translateX(-1.2vw) rotate(-1.4deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes kid-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-1.4%) rotate(.5deg); }
}

/* --- speech bubbles --- */
.bubble {
  position: absolute;
  top: -8%;
  padding: .45em 1em .5em;
  font-family: var(--script);
  font-size: clamp(1.2rem, 2.4vmin, 1.7rem);
  white-space: nowrap;
  color: var(--rose);
  background: #fffdf8;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(95, 75, 45, 0.15);
  opacity: 0;
  transform: translateY(8px) scale(.7);
  transform-origin: bottom center;
  transition: opacity .35s cubic-bezier(.2, 1.4, .4, 1), transform .35s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
}

.bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  width: 10px; height: 10px;
  background: #fffdf8;
  border-right: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
  transform: rotate(45deg);
}

.bubble-girl { right: -12%; }
.bubble-girl::after { left: 28%; }
.bubble-boy { left: -12%; }
.bubble-boy::after { right: 28%; }

.kid-wrap:hover .bubble { opacity: 1; transform: translateY(0) scale(1); }

/* --- mobile monogram --- */
.mobile-monogram {
  display: none;
  position: absolute;
  top: 1.1rem; left: 1.25rem;
  z-index: 5;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--ink);
}

/* --- hero content column --- */
.hero-content {
  position: relative;
  z-index: 4;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.6vh 1rem 2.4vh;
  pointer-events: none;
}

.hero-content a { pointer-events: auto; }

/* --- nav --- */
.nav { display: flex; gap: clamp(1.6rem, 4.2vmin, 3.4rem); }

.nav-link {
  font-family: var(--garamond);
  font-weight: 600;
  font-size: clamp(.78rem, 1.9vmin, 1.3rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding-bottom: .3em;
  transition: color .3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s ease;
}

.nav-link:hover { color: var(--rose); }
.nav-link:hover::after { transform: scaleX(1); background: var(--rose); }
.nav-link:first-child::after { transform: scaleX(1); }

/* --- psst (act two: the whisper) --- */
.psst {
  display: flex;
  align-items: flex-start;
  gap: .5vmin;
  margin-top: 2.6vh;
  color: var(--rose);
  opacity: 0;
  animation: rise .9s cubic-bezier(.22, .8, .3, 1) 2.3s forwards;
}

.psst-word {
  font-family: var(--script);
  font-size: clamp(2rem, 7.4vmin, 5rem);
  line-height: 1;
  display: inline-block;
  clip-path: inset(-20% 100% -20% -5%);
  animation: write 1.1s ease-out 2.45s forwards;
}

@keyframes write { to { clip-path: inset(-20% -5% -20% -5%); } }

.psst-flourish { width: clamp(2.6rem, 9.6vmin, 6.4rem); margin-top: 1.6vmin; }

.psst-flourish .draw {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: draw 1.2s ease-out 3.05s forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

/* --- headline (act three: typed out) --- */
.headline {
  margin-top: .6vh;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 9vmin, 6.6rem);
  line-height: 1.06;
  color: var(--ink);
}

.headline .line { display: block; min-height: 1.06em; }

.caret {
  display: inline-block;
  width: .045em;
  height: .82em;
  margin-left: .06em;
  background: var(--rose);
  vertical-align: -0.08em;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* --- divider --- */
.divider { display: flex; align-items: center; gap: 1.4vmin; margin-top: 2.2vh; }

.divider .rule {
  width: clamp(3.4rem, 10vmin, 7rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}

.divider .heart { width: clamp(.85rem, 2.2vmin, 1.5rem); }

.beat { animation: beat 2.6s ease-in-out 2.2s infinite; transform-origin: center; }

@keyframes beat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.25); }
  20% { transform: scale(1); }
  30% { transform: scale(1.18); }
  40% { transform: scale(1); }
}

/* --- subtitle --- */
.subtitle {
  margin-top: 2vh;
  font-family: var(--garamond);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 3.3vmin, 2.3rem);
  line-height: 1.3;
  color: var(--ink-soft);
}

/* --- spacer where the gazebo lives --- */
.hero-spacer { flex: 1 1 30vh; min-height: 22vh; }

/* --- venue / date --- */
.when-where {
  display: flex;
  align-items: center;
  gap: 3.6vmin;
  white-space: nowrap;
  font-family: var(--garamond);
  font-weight: 500;
  font-size: clamp(1rem, 2.7vmin, 1.9rem);
  color: var(--ink);
}

.ww-item { display: inline-flex; align-items: center; gap: .9vmin; }
.ww-item em { font-style: italic; font-weight: 600; }
.ww-icon { width: clamp(1rem, 2.6vmin, 1.8rem); flex: none; }

/* --- rsvp button --- */
.rsvp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  margin-top: 3.4vh;
  padding: 1.9vmin 4.4vmin;
  background: linear-gradient(180deg, #66744b 0%, var(--olive) 45%, var(--olive-deep) 100%);
  color: #f6efdf;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1rem, 3vmin, 2.1rem);
  letter-spacing: .32em;
  text-indent: .32em;
  text-decoration: none;
  border: 1px solid var(--gold-soft);
  outline: 2px solid #e9dcc3;
  outline-offset: 5px;
  box-shadow: 0 10px 28px rgba(77, 90, 54, 0.35);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.rsvp-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 248, 225, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.rsvp-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 38px rgba(77, 90, 54, 0.45); }
.rsvp-btn:hover::before { left: 130%; }

.btn-sprig { width: clamp(1.8rem, 5vmin, 3.4rem); opacity: .9; }
.btn-sprig.left { transform: scaleX(-1); }

/* --- bottom flourish --- */
.flourish { margin-top: 2.6vh; width: clamp(8rem, 20vmin, 14rem); }
.flourish svg { width: 100%; display: block; }

/* ============ ENTRANCE ANIMATION ============ */
@keyframes rise {
  from { opacity: 0; transform: translateY(2.4vh); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* act four: once the title is typed, the rest follows (.titled set by JS) */
.post {
  opacity: 0;
  transform: translateY(2.2vh);
  transition: opacity .85s cubic-bezier(.22, .8, .3, 1) var(--d, 0s),
              transform .85s cubic-bezier(.22, .8, .3, 1) var(--d, 0s);
}

body.titled .post { opacity: 1; transform: translateY(0); }

/* ============ FALLING PETALS ============ */
.petal {
  position: fixed;
  top: -4vh;
  z-index: 250;
  pointer-events: none;
  border-radius: 80% 0 80% 0;
  opacity: 0;
  animation: fall linear forwards;
}

@keyframes fall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8%   { opacity: .85; }
  85%  { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--drift, 6vw), 108vh) rotate(var(--spin, 540deg)); }
}

/* ============ COUNTDOWN STRIP ============ */
.countdown-strip {
  position: relative;
  text-align: center;
  padding: 0 1rem 3.6rem;
  border-bottom: 1px solid rgba(201, 163, 94, 0.22);
  background: linear-gradient(180deg, rgba(246, 233, 219, .0), rgba(246, 233, 219, .55));
}

.garland { display: block; width: 100%; max-height: 96px; margin-bottom: 1.4rem; }

.bulb circle { fill: #f3d488; }

.bulb .halo { fill: rgba(255, 222, 130, 0.28); }

.bulb { animation: glow 2.8s ease-in-out calc(var(--i) * .35s) infinite; }

@keyframes glow {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.cd-eyebrow {
  font-family: var(--script);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--rose);
  margin-bottom: 1.2rem;
}

.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(.7rem, 3vw, 2rem);
  flex-wrap: wrap;
}

.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 4.2rem; }

.cd-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cd-label {
  font-family: var(--garamond);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: .45rem;
}

.cd-sep { color: var(--rose); font-size: 1rem; align-self: center; opacity: .7; }

/* ============ SECTIONS ============ */
.section {
  max-width: 760px;
  margin: 0 auto;
  padding: 6.5rem 1.5rem 5rem;
  text-align: center;
}

.section.alt {
  max-width: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, transparent, rgba(217, 138, 140, 0.07) 18%, rgba(217, 138, 140, 0.07) 82%, transparent);
}

.section.alt > * { position: relative; max-width: 760px; margin-left: auto; margin-right: auto; }

.band-roses {
  position: absolute;
  width: clamp(220px, 24vw, 420px);
  opacity: .5;
  pointer-events: none;
}

.band-roses.band-left {
  position: absolute;
  left: 0; bottom: 0;
  max-width: none; margin: 0;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 45%, transparent 78%);
}

.band-roses.band-right {
  position: absolute;
  right: 0; top: 0;
  max-width: none; margin: 0;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 45%, transparent 78%);
}

.eyebrow {
  font-family: var(--script);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  color: var(--rose);
  margin-bottom: .4rem;
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.5vw, 3.2rem);
  letter-spacing: 0.04em;
  color: var(--ink);
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 1.2rem auto 3rem;
}

.section-divider span {
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--gold) 65%, transparent);
}

.section-divider .heart { width: 16px; }

/* --- timeline --- */
.timeline {
  list-style: none;
  text-align: left;
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 124px;
  top: 14px;
  bottom: 14px;
  border-left: 1px dashed var(--gold-soft);
}

.t-item {
  display: flex;
  align-items: flex-start;
  gap: 1.3rem;
  padding: 1.05rem 0;
  position: relative;
}

.t-time {
  width: 84px;
  flex: none;
  text-align: right;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--olive);
  padding-top: .45rem;
}

.t-time small {
  font-family: var(--garamond);
  font-weight: 600;
  font-size: .8em;
  letter-spacing: .06em;
}

.t-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: 50%;
  background: #fffdf8;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 0 0 5px var(--cream);
  z-index: 1;
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1);
}

.t-item:hover .t-icon { transform: scale(1.18) rotate(8deg); }

.t-body { display: block; padding-top: .2rem; }

.t-body strong {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: .15rem;
}

.t-body span {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.t-note {
  max-width: 560px;
  margin: 2.2rem auto 0;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* --- faq --- */
.faq-list { text-align: left; }

.contact-lines { display: flex; flex-direction: column; gap: .3rem; }
.contact-lines em { font-weight: 600; }

.contact-lines a {
  color: var(--olive);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(92, 107, 66, 0.35);
  transition: color .25s ease, border-color .25s ease;
}

.contact-lines a:hover { color: var(--rose); border-color: var(--rose); }

.faq-item {
  background: rgba(255, 252, 246, 0.75);
  border: 1px solid rgba(201, 163, 94, 0.35);
  border-radius: 4px;
  margin-bottom: .9rem;
  padding: 0 1.4rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.faq-item[open] {
  border-color: var(--gold);
  box-shadow: 0 6px 22px rgba(201, 163, 94, 0.13);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker { display: none; }

.plus {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.plus::before, .plus::after {
  content: '';
  position: absolute;
  background: var(--gold);
  transition: transform .3s ease;
}

.plus::before { left: 0; top: 6px; width: 14px; height: 2px; }
.plus::after  { left: 6px; top: 0; width: 2px; height: 14px; }

.faq-item[open] .plus::after { transform: scaleY(0); }

.faq-item p {
  padding: 0 0 1.2rem;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- rsvp form --- */
.rsvp-form {
  text-align: left;
  background: rgba(255, 252, 246, 0.8);
  border: 1px solid rgba(201, 163, 94, 0.4);
  border-radius: 6px;
  padding: 2.2rem 2rem;
  box-shadow: 0 10px 35px rgba(95, 75, 45, 0.08);
}

.form-group-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .05em;
  color: var(--olive);
  margin-bottom: 1.1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(201, 163, 94, 0.35);
}

.form-group-title:not(:first-child) { margin-top: 2rem; }

.field-label {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
  margin-bottom: .35rem;
}

.field-note {
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: -.2rem 0 1.2rem;
}

.field-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }

.field { flex: 1 1 200px; display: block; margin-bottom: 1.2rem; }

.field.small { flex: 0 1 170px; }

.field > span {
  display: block;
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: .35rem;
  color: var(--ink);
}

.field em { color: var(--ink-soft); font-family: var(--garamond); }

.field input, .field textarea {
  width: 100%;
  font-family: var(--garamond);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
  background: #fffdf9;
  border: 1px solid rgba(201, 163, 94, 0.45);
  border-radius: 3px;
  padding: .65rem .8rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(217, 138, 140, 0.18);
}

.attending {
  border: none;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.attending legend {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: .55rem;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: 1.12rem;
  font-weight: 500;
}

.radio input { accent-color: var(--olive); width: 1.05rem; height: 1.05rem; }

.form-btn {
  cursor: pointer;
  font-size: 1.05rem;
  letter-spacing: .28em;
  padding: .85rem 2.4rem;
  margin: .5rem auto 0;
  display: flex;
  outline-offset: 3px;
  outline-width: 2px;
}

/* --- rsvp success --- */
.rsvp-success { padding: 3rem 1rem; animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }

.rsvp-success .big-heart { font-size: 3rem; display: inline-block; animation: beat 2.4s ease-in-out .5s infinite; }

.rsvp-success h3 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  margin: .8rem 0 .5rem;
}

.rsvp-success p { font-size: 1.2rem; font-weight: 500; color: var(--ink-soft); margin-bottom: .8rem; }

.success-signoff { margin-top: 1.6rem; }

.success-names {
  font-family: var(--script);
  font-size: 1.9rem;
  color: var(--rose);
}

@keyframes pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- burst hearts --- */
.burst-heart {
  position: fixed;
  z-index: 260;
  pointer-events: none;
  font-size: 1.2rem;
  animation: burst 1.2s ease-out forwards;
}

@keyframes burst {
  from { opacity: 1; transform: translate(0, 0) scale(.6) rotate(0deg); }
  to   { opacity: 0; transform: translate(var(--bx, 0), var(--by, -120px)) scale(1.3) rotate(var(--br, 20deg)); }
}

/* ============ SCROLL REVEAL ============ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .8, .3, 1);
  transition-delay: var(--sd, 0s);
}

.scroll-reveal.visible { opacity: 1; transform: translateY(0); }

/* ============ FOOTER ============ */
.footer {
  text-align: center;
  padding: 3.5rem 1rem 3rem;
  border-top: 1px solid rgba(201, 163, 94, 0.3);
}

.monogram {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: .12em;
  color: var(--ink);
  margin-bottom: .4rem;
}

.footer-date {
  display: block;
  font-family: var(--garamond);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.footer-note {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--script);
  font-size: 1.25rem;
  color: var(--rose);
}

/* ============ NARROW / MOBILE ============ */
@media (max-width: 820px) {
  .strip-wrap { display: none; }

  .corner-roses { display: block; }

  .corner-tr {
    top: 0; right: 0;
    width: clamp(150px, 44vw, 260px);
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 45%, transparent 80%);
    mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 45%, transparent 80%);
  }

  .corner-bl {
    bottom: 0; left: 0;
    width: clamp(170px, 50vw, 290px);
    opacity: .85;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 45%, transparent 80%);
    mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 45%, transparent 80%);
  }

  .mobile-monogram { display: block; }

  .hero-content { padding-top: 1.4vh; }

  /* nav hugs the right so it never collides with the monogram */
  .nav {
    width: 100%;
    justify-content: flex-end;
    gap: 1.15rem;
    padding: 0 .3rem 0 4.5rem;
  }

  .nav-link {
    font-size: .72rem;
    letter-spacing: .18em;
    text-shadow: 0 0 6px var(--cream), 0 0 12px var(--cream);
  }

  .psst { margin-top: 1.6vh; }

  /* the kids flank the gazebo as one mid-hero scene,
     leaving the bottom stack (venue / rsvp / flourish) clear */
  .gazebo-wrap {
    width: min(76vw, 44vh);
    margin-left: calc(min(76vw, 44vh) / -2);
    bottom: calc(max(26vh, 190px) + 1vh);
  }

  .kid-girl { height: min(32vh, 52vw); bottom: max(26vh, 190px); left: 0; }
  .kid-boy  { height: min(23vh, 37vw); bottom: calc(max(26vh, 190px) + 7vh); right: 8vw; }

  .kid { filter: drop-shadow(0 10px 16px rgba(95, 75, 45, 0.22)); }

  .bubble-girl { right: auto; left: 45%; }
  .bubble-boy { left: auto; right: 45%; }

  .hero-spacer { flex: 1 1 30vh; min-height: 26vh; }

  .when-where { flex-direction: column; gap: .55rem; white-space: normal; font-size: 1.1rem; }
  .ww-icon { width: 18px; }

  .rsvp-btn { margin-top: 2vh; font-size: 1rem; padding: .75rem 2.3rem; }

  .flourish { margin-top: 2vh; width: 7.5rem; }

  .section { padding: 4.5rem 1.25rem 3.5rem; }

  .band-roses { opacity: .3; }

  .timeline::before { left: 112px; }
  .t-time { width: 72px; font-size: 1.05rem; }
  .t-item { gap: 1rem; }
  .t-icon { width: 38px; height: 38px; font-size: 1.05rem; }

  .rsvp-form { padding: 1.6rem 1.2rem; }
}

@media (max-width: 480px) {
  .nav { gap: 1.3rem; }
  .headline { font-size: clamp(2.2rem, 11.5vw, 2.9rem); }
  .psst-word { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .subtitle { font-size: 1.2rem; }
}

/* tall phones: scale type, spacing and the scene up to fill the height */
@media (max-width: 820px) and (min-height: 800px) {
  .psst { margin-top: 2.4vh; }
  .psst-word { font-size: clamp(2.4rem, 10.5vw, 3.1rem); }
  .headline { font-size: clamp(2.5rem, 12.5vw, 3.5rem); }
  .divider { margin-top: 2.8vh; }
  .subtitle { font-size: clamp(1.3rem, 5.4vw, 1.6rem); margin-top: 2.6vh; }

  .gazebo-wrap {
    width: min(84vw, 46vh);
    margin-left: calc(min(84vw, 46vh) / -2);
    bottom: calc(max(27vh, 215px) + 1vh);
  }

  .kid-girl { height: min(34vh, 57vw); bottom: max(27vh, 215px); }
  .kid-boy  { height: min(24vh, 40vw); bottom: calc(max(27vh, 215px) + 8vh); right: 8vw; }

  .when-where { font-size: 1.2rem; gap: .7rem; }
  .rsvp-btn { margin-top: 2.8vh; font-size: 1.1rem; padding: .85rem 2.6rem; }
  .flourish { margin-top: 2.6vh; width: 8.5rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .post { opacity: 1; transform: none; transition: none; }
  .psst { animation: none; opacity: 1; }
  .psst-word { clip-path: none; animation: none; }
  .caret { display: none; }
  .psst-flourish .draw { stroke-dashoffset: 0; animation: none; }
  .strip-wrap img, .gazebo-wrap img, .kid-girl .kid, .kid-boy .kid { animation: none; opacity: 1; }
  .beat, .rsvp-success .big-heart, .bulb { animation-iteration-count: 0; }
  .sparkles { display: none; }
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
  .petal, .burst-heart { display: none; }
  .layer { transform: none; }
}