/* =================================================================
   Roman & Yana — Hand-drawn editorial redesign
   Cream paper · classic serif + script · line-art illustration
   ================================================================= */

:root {
  /* Parchment · Desert Sand · Sage Olive */
  --bg:        #F5F2EB;
  --bg-2:      #ECE2D0;
  --paper:     #FDFAF5;
  --paper-2:   #F5F2EB;
  --ink:       #2e2a22;
  --ink-2:     #5c5446;
  --ink-3:     #9a9080;
  --line:      #d8ceba;
  --line-2:    #c8b89e;
  --taupe:     #A3B19B;
  --deep:      #5a6652;
  --accent:    #A3B19B;
  --accent-deep: #7a8f72;

  /* Type */
  --serif:  'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --script: 'Marck Script', 'Caveat', cursive;
  --sans:   'Manrope', system-ui, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* paper texture overlay — applied to body */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.14  0 0 0 0 0.10  0 0 0 0.13 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 400px 400px;
  opacity: .55;
  mix-blend-mode: multiply;
}
body::after {
  /* gentle vignette + warm light wash */
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 240, 210, 0.35), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(80, 50, 20, 0.10), transparent 70%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }

main, header, footer, section { position: relative; z-index: 2; }

/* ----------- Reveal on scroll ----------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .10s; }
.reveal[data-delay="2"] { transition-delay: .20s; }
.reveal[data-delay="3"] { transition-delay: .30s; }
.reveal[data-delay="4"] { transition-delay: .40s; }
.reveal[data-delay="5"] { transition-delay: .50s; }

/* ----------- Typography utilities ----------- */
.serif  { font-family: var(--serif);  font-weight: 400; }
.script { font-family: var(--script); font-weight: 400; }
.sans   { font-family: var(--sans); }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.eyebrow.tight { letter-spacing: .32em; }
.smallcaps {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2);
}
.divider-dot {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-3); margin: 0 12px; vertical-align: middle;
}

/* ----------- Common: line-art helpers ----------- */
.line-art {
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-art.thin { stroke-width: .8; }
.line-art.thicker { stroke-width: 1.4; }
.line-art.ink { stroke: var(--ink); }
.line-art.taupe { stroke: var(--taupe); }

/* =================================================================
   NAV
   ================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  transition: padding .35s ease, background .35s ease, backdrop-filter .35s ease;
}
.nav.scrolled {
  background: rgba(241, 233, 216, 0.78);
  backdrop-filter: blur(14px);
  padding: 12px 40px;
  border-bottom: 1px solid rgba(180, 160, 120, 0.18);
}
.nav-mono {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  color: var(--deep);
  line-height: 1;
  letter-spacing: -0.05em;
}
.nav-links {
  display: flex; gap: 36px; align-items: center;
}
.nav-link {
  font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-2);
  transition: color .25s;
  position: relative;
}
.nav-link:hover { color: var(--ink); }
.nav-link::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -4px;
  height: 1px; background: var(--taupe); transition: left .3s, right .3s;
}
.nav-link:hover::after { left: 0; right: 0; }

.nav-music {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: background .3s, color .3s, border-color .3s;
}
.nav-music:hover, .nav-music.playing {
  background: var(--deep); border-color: var(--deep); color: var(--paper);
}
.nav-music.playing svg { animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .nav, .nav.scrolled { padding: 14px 18px; }
  .nav-links { gap: 18px; }
  .nav-link { font-size: 9.5px; letter-spacing: .22em; }
  .nav-link.hide-sm { display: none; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 110px 40px 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-stack {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  max-width: 980px;
}
.hero-eyebrow-row {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 40px;
}

/* Hero childhood photos — paired polaroids below the names */
.hero-photos {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 60px);
  position: relative;
  z-index: 4;
}
.hero-photo {
  position: relative;
  background: var(--paper);
  padding: 14px 14px 50px;
  width: clamp(180px, 22vw, 260px);
  border: 1px solid rgba(150, 128, 103, 0.22);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.04),
    0 18px 30px -18px rgba(80, 60, 30, 0.32);
}
.hero-photo.hp-left  { transform: rotate(-4deg); margin-top: 20px; }
.hero-photo.hp-right { transform: rotate( 5deg); }
.hero-photo .photo-slot {
  width: 100%; aspect-ratio: 4 / 5; display: block;
}
.hero-photo .photo-slot image-slot { width: 100%; height: 100%; display: block; }
.hero-photo .photo-caption {
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center;
}
.hero-photo .photo-caption .name {
  font-family: var(--script);
  font-size: 26px;
  color: var(--deep);
  line-height: 1;
}
.hero-photo .photo-caption .when {
  font-size: 9px; letter-spacing: .38em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 4px;
}
.hero-photo .photo-tape {
  position: absolute;
  width: 70px; height: 18px;
  background: rgba(200, 175, 130, 0.45);
  top: -8px;
  border: 1px dashed rgba(255,255,255,0.4);
  mix-blend-mode: multiply;
}
.hero-photo .photo-tape.tl { left: 14px; transform: rotate(-18deg); }
.hero-photo .photo-tape.tr { right: 14px; transform: rotate(22deg); }

/* small heart between photos */
.hero-photos-heart {
  align-self: center;
  color: var(--deep);
  font-family: var(--script);
  font-size: 32px;
  margin: 0 -10px;
  transform: rotate(-6deg);
}

@media (max-width: 540px) {
  .hero-photos { gap: clamp(8px, 3vw, 14px); margin-top: 40px; }
  .hero-photo { width: clamp(120px, 38vw, 160px); padding: 10px 10px 38px; }
  .hero-photo .photo-caption .name { font-size: 20px; }
  .hero-photos-heart { font-size: 26px; margin: 0 -6px; }
}

/* Floating photo stickers — small circular image slots scattered between sections */
.sticker {
  position: absolute;
  z-index: 5;
  pointer-events: auto;
}
.sticker > .sticker-slot {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--paper);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 14px 28px -14px rgba(60,40,20,0.45);
}
.sticker > .sticker-slot image-slot {
  display: block; width: 100%; height: 100%;
}
.sticker .sticker-tape {
  position: absolute;
  width: 56px; height: 16px;
  background: rgba(200, 175, 130, 0.5);
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  mix-blend-mode: multiply;
}
.sticker .sticker-label {
  position: absolute;
  left: 50%; bottom: -22px;
  transform: translateX(-50%) rotate(-4deg);
  font-family: var(--script);
  font-size: 22px;
  color: var(--deep);
  white-space: nowrap;
}
.sticker.tilt-l { transform: rotate(-6deg); }
.sticker.tilt-r { transform: rotate(7deg); }
@media (max-width: 760px) {
  .sticker { display: none; } /* keep mobile clean */
}
.hero-eyebrow-row .line {
  width: 60px; height: 1px; background: var(--line-2);
}
.hero-eyebrow-row .eyebrow {
  font-size: 12px; letter-spacing: .5em;
  color: var(--ink-2);
}
.hero-eyebrow-row .star {
  width: 8px; height: 8px;
  background: var(--taupe);
  transform: rotate(45deg);
  display: inline-block;
}

/* The big name treatment — italic display serif, stacked w/ script accent */
.hero-name-block {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.hero-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(64px, 11.5vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--deep);
  margin: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.hero-name .first-letter {
  font-family: var(--script);
  font-style: normal;
  font-size: 1.15em;
  vertical-align: -0.04em;
  color: var(--deep);
  padding-right: 0.02em;
}
.hero-amp {
  font-family: var(--script);
  font-size: clamp(54px, 8vw, 110px);
  color: var(--deep);
  line-height: 1;
  margin: -0.18em 0 -0.14em;
  position: relative;
  z-index: 2;
}

.hero-sub {
  margin-top: 28px;
  display: flex; align-items: center; gap: 22px;
}
.hero-sub .hairline { width: 80px; height: 1px; background: var(--line-2); }
.hero-sub .smallcaps { font-size: 11px; letter-spacing: .42em; color: var(--ink-2); }

.hero-date {
  margin-top: 24px;
  font-family: 'Cinzel', var(--serif);
  font-style: normal;
  font-weight: 300;
  font-size: 22px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.hero-place {
  margin-top: 8px;
  font-size: 11px; letter-spacing: .36em; text-transform: uppercase;
  color: var(--ink-3);
}

.hero-scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  color: var(--ink-3); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: bob 2.6s ease-in-out infinite;
}
.hero-scroll .label { font-size: 10px; letter-spacing: .5em; text-transform: uppercase; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: .55; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* Floral corner illustrations */
.hero-sprig {
  position: absolute;
  pointer-events: none;
  opacity: .82;
  z-index: 2;
}
.hero-sprig.tl { top: 4%;  left: 3%;  width: clamp(170px, 22vw, 320px); }
.hero-sprig.tr { top: 6%;  right: 3%; width: clamp(170px, 22vw, 320px); transform: scaleX(-1); }
.hero-sprig.bl { bottom: 2%; left: 4%;  width: clamp(140px, 18vw, 240px); transform: scaleY(-1); }
.hero-sprig.br { bottom: 4%; right: 4%; width: clamp(140px, 18vw, 240px); transform: scale(-1, -1); }

@media (max-width: 760px) {
  .hero { padding: 100px 18px 80px; }
  .hero-eyebrow-row { margin-bottom: 36px; }
  .hero-sprig.tl, .hero-sprig.tr { width: 130px; opacity: .6; }
  .hero-sprig.bl, .hero-sprig.br { width: 110px; opacity: .55; }
}

/* =================================================================
   INVITATION STRIP — personal greeting
   ================================================================= */
.invite {
  min-height: 80vh;
  padding: 100px 32px 380px;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.invite-inner {
  max-width: 680px; margin: 0 auto;
  position: relative;
  z-index: 3;
}
.invite-greet {
  font-family: 'Cinzel', var(--serif);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--deep);
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.invite-greet .accent {
  display: inline-block;
  background: linear-gradient(transparent 70%, rgba(140, 110, 70, 0.18) 70%);
  padding: 0 2px;
}
.invite-copy {
  font-family: 'Cinzel', var(--serif);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 500px;
  margin: 0 auto;
  text-wrap: balance;
}
.invite-meta {
  margin-top: 36px;
  margin-bottom: 80px;
  display: flex; gap: 30px; justify-content: center; align-items: center;
  flex-wrap: wrap;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-3);
  position: relative;
  z-index: 3;
}
.invite-meta .dot {
  width: 3px; height: 3px; border-radius: 50%; background: var(--taupe);
}

/* divider sprigs framing */
.invite-sprig {
  position: absolute;
  width: 140px; opacity: .55;
  pointer-events: none;
}
.invite-sprig.l { left: -30px; top: 50%; transform: translateY(-50%); }
.invite-sprig.r { right: -30px; top: 50%; transform: translateY(-50%) scaleX(-1); }
@media (max-width: 820px) {
  .invite-sprig { display: none; }
}

/* =================================================================
   STORY — childhood photos with squiggle connector
   ================================================================= */
.story {
  padding: 120px 32px 100px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.story-head {
  text-align: center;
  margin-bottom: 70px;
}
.story-eyebrow {
  font-size: 10.5px; letter-spacing: .5em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 14px;
}
.story-title {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 400;
  margin: 0;
  color: var(--ink);
  line-height: 1.05;
}
.story-title .script {
  font-family: var(--script);
  font-size: 1.25em;
  color: var(--deep);
  padding-right: 0.12em;
  line-height: 0.6;
  vertical-align: -0.1em;
}
.story-sub {
  margin-top: 18px;
  font-family: 'Cinzel', var(--serif);
  font-style: normal;
  font-weight: 300;
  font-size: 17px;
  color: var(--ink-2);
  max-width: 500px;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}

.story-photos {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  min-height: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  place-items: center;
}
.photo-card {
  position: relative;
  background: var(--paper);
  padding: 18px 18px 64px;
  width: 280px;
  border: 1px solid rgba(180, 150, 110, 0.25);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.05),
    0 18px 40px -20px rgba(60, 40, 20, 0.35);
  z-index: 3;
}
.photo-card.left  { transform: rotate(-3.2deg); }
.photo-card.right { transform: rotate( 3deg); }
.photo-slot {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
}
.photo-slot image-slot {
  width: 100%; height: 100%; display: block;
}
.photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
}
.photo-caption .name {
  font-family: var(--script);
  font-size: 30px;
  color: var(--deep);
  line-height: 1;
}
.photo-caption .when {
  font-size: 9.5px; letter-spacing: .4em; text-transform: uppercase; color: var(--ink-3);
  margin-top: 4px;
}
.photo-tape {
  position: absolute;
  width: 90px; height: 22px;
  background: rgba(200, 175, 130, 0.55);
  top: -10px;
  border: 1px dashed rgba(255,255,255,0.4);
  mix-blend-mode: multiply;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.photo-tape.tl { left: 12px; transform: rotate(-20deg); }
.photo-tape.tr { right: 12px; transform: rotate(22deg); }

.squiggle {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 340px; height: 200px;
  pointer-events: none;
  z-index: 2;
}
.squiggle-heart {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: var(--deep);
  z-index: 4;
  background: var(--paper);
  border-radius: 50%;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 8px 20px -10px rgba(60,40,20,.3);
}

.story-foot {
  margin-top: 60px;
  text-align: center;
  font-family: 'Cinzel', var(--serif); font-style: normal; font-weight: 300;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--ink-2);
  max-width: 720px;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.story-foot em {
  font-family: var(--script);
  font-style: normal;
  color: var(--deep);
  font-size: 1.5em;
  vertical-align: -0.18em;
  margin: 0 .15em;
  line-height: 0.5;
}

@media (max-width: 760px) {
  .story { padding: 80px 18px 70px; }
  .story-photos { grid-template-columns: 1fr; gap: 40px; min-height: auto; }
  .squiggle { transform: translate(-50%, -50%) rotate(80deg); width: 160px; }
  .photo-card { width: 240px; }
}

/* =================================================================
   SCHEDULE — the day
   ================================================================= */
.schedule {
  padding: 110px 32px 80px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  position: relative;
  overflow: hidden;
}
.section-head {
  text-align: center;
  margin-bottom: 70px;
}
.section-head .eyebrow { margin-bottom: 14px; display: inline-flex; align-items: center; gap: 14px; }
.section-head .eyebrow::before, .section-head .eyebrow::after {
  content: ''; width: 36px; height: 1px; background: var(--line-2);
}
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 62px);
  margin: 0;
  line-height: 1;
  color: var(--ink);
}
.section-title .script {
  font-family: var(--script);
  font-size: 1.4em;
  color: var(--deep);
  display: inline-block;
  margin: 0 .04em;
  vertical-align: -0.18em;
  line-height: 0.6;
}

.schedule-line {
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(80px, 12vw, 220px);
}
.schedule-line::before {
  /* hand-drawn dashed connector through the icons */
  content: '';
  position: absolute;
  left: 10%; right: 10%; top: 55px;
  height: 1px;
  background-image: linear-gradient(90deg, var(--taupe) 50%, transparent 50%);
  background-size: 8px 1px;
  opacity: .55;
  z-index: 1;
}
.step {
  text-align: center;
  position: relative;
  z-index: 2;
}
.step-icon {
  width: 110px; height: 110px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  color: var(--accent-deep);
  background: var(--paper);
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 14px 28px -16px rgba(60,40,20,.3);
}
.step-time {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.step-label {
  font-size: 11.5px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.step-where {
  font-family: 'Cinzel', var(--serif);
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  color: var(--ink-2);
  max-width: 200px;
  margin: 0 auto 12px;
  line-height: 1.3;
}
.step-map {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--taupe);
  transition: color .2s, gap .2s;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.step-map:hover { color: var(--ink); gap: 12px; }

@media (max-width: 880px) {
  .schedule-line { flex-wrap: wrap; gap: 50px 60px; }
  .schedule-line::before { display: none; }
}
@media (max-width: 540px) {
  .schedule-line { flex-direction: column; align-items: center; gap: 50px; }
}

/* =================================================================
   Loose hand-drawn decorations — scattered around sections
   ================================================================= */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  opacity: .72;
  filter: blur(.15px);
}
.deco svg, svg.deco { display: block; }

/* === Invite section === */
.invite-table {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: clamp(340px, 56vw, 720px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: .7;
}
.invite-deco-disco {
  top: 8%;  left: 6%;  width: clamp(80px, 9vw, 140px);
  transform: rotate(-6deg);
}
.invite-deco-candles {
  bottom: 6%; right: 5%; width: clamp(90px, 11vw, 160px);
  transform: rotate(4deg);
}
.invite-deco-wine {
  top: 14%; right: 7%; width: clamp(70px, 8vw, 120px);
  transform: rotate(8deg);
  opacity: .5;
}
.invite-deco-sp1 { top: 22%; left: 18%; }
.invite-deco-sp2 { top: 38%; right: 22%; }
.invite-deco-sp3 { bottom: 18%; left: 14%; }

/* === Schedule section === */
.schedule-deco-coupe {
  top: 6%; right: 4%;
  width: clamp(80px, 9vw, 140px);
  transform: rotate(-12deg);
}
.schedule-deco-pop {
  bottom: 8%; left: 3%;
  width: clamp(110px, 12vw, 180px);
  transform: rotate(8deg);
}
.schedule-deco-sp1 { top: 18%; left: 10%; }
.schedule-deco-sp2 { bottom: 22%; right: 14%; }

/* === Donation section === */
.donation-deco-vase {
  top: 100px;
  left: -30px;
  bottom: auto;
  width: clamp(160px, 18vw, 260px);
  transform: rotate(-8deg);
  opacity: .55;
}
.donation-deco-sp1 { top: 50%; right: 6%; }

/* === RSVP section === */
.rsvp-deco-candles {
  top: 6%; left: 4%;
  width: clamp(90px, 10vw, 150px);
  transform: rotate(-7deg);
}
.rsvp-deco-disco {
  bottom: 8%; right: 5%;
  width: clamp(90px, 10vw, 150px);
  transform: rotate(6deg);
}
.rsvp-deco-sp1 { top: 30%; right: 14%; }
.rsvp-deco-sp2 { bottom: 28%; left: 16%; }

@media (max-width: 760px) {
  .invite-deco-wine,
  .invite-deco-sp1, .invite-deco-sp2, .invite-deco-sp3,
  .schedule-deco-sp1, .schedule-deco-sp2,
  .donation-deco-vase, .donation-deco-sp1,
  .rsvp-deco-sp1, .rsvp-deco-sp2 { display: none; }
  .invite { padding-bottom: 160px; }
  .invite-meta { margin-bottom: 0; }
  .invite-table { width: 95vw; bottom: -20px; opacity: .75; }
  .invite-deco-disco { width: 70px; opacity: .42; }
  .invite-deco-candles { width: 80px; opacity: .42; }
  .schedule-deco-coupe, .schedule-deco-pop,
  .rsvp-deco-candles, .rsvp-deco-disco { opacity: .38; }
}

/* =================================================================
   DRESS CODE — standalone section with dancing figures + palette
   ================================================================= */
.dress {
  padding: 60px 32px 90px;
  background: var(--bg);
  text-align: center;
  position: relative;
}
.dress-inner {
  max-width: 880px;
  margin: 0 auto;
}
.dress-eyebrow {
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 14px;
  white-space: nowrap;
}
.dress-eyebrow::before, .dress-eyebrow::after {
  content: ''; width: 36px; height: 1px; background: var(--line-2);
}

.dress-figures {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto 40px;
}

.dress-swatches {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(4px, 1vw, 12px);
  flex-wrap: nowrap;
}
.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.swatch-blob {
  display: block;
  width: clamp(52px, 7vw, 88px);
  height: clamp(52px, 7vw, 88px);
  overflow: visible;
  transition: transform .35s ease;
  filter: drop-shadow(0 10px 18px rgba(60,40,20,.14));
}
.swatch:hover .swatch-blob { transform: translateY(-4px) rotate(-1.5deg) scale(1.03); }

.dress-note {
  margin: 40px auto 0;
  max-width: 480px;
  font-family: 'Cinzel', var(--serif);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: balance;
  letter-spacing: 0.03em;
}
.dress-note em {
  font-style: normal;
  color: var(--deep);
  font-weight: 500;
  background: linear-gradient(transparent 70%, rgba(140, 110, 70, 0.16) 70%);
  padding: 0 2px;
}

@media (max-width: 720px) {
  .dress { padding: 70px 18px 60px; }
  .dress-figures { margin-bottom: 28px; }
  /* keep all 7 swatches on a single row — size them to fit the viewport */
  .dress-swatches { gap: clamp(2px, 0.9vw, 6px); flex-wrap: nowrap; }
  .swatch-blob { width: clamp(30px, 11vw, 56px); height: clamp(30px, 11vw, 56px); }
}
@media (max-width: 360px) {
  .dress { padding-left: 12px; padding-right: 12px; }
}

/* =================================================================
   RECEPTION FEATURE — full bleed table illustration
   ================================================================= */
.reception {
  padding: 130px 24px 60px;
  background: var(--paper-2);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.reception-eyebrow {
  font-size: 10.5px; letter-spacing: .5em; text-transform: uppercase; color: var(--accent-deep);
  margin-bottom: 14px;
}
.reception-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 8vw, 110px);
  line-height: .95;
  color: var(--accent-deep);
  letter-spacing: .04em;
  margin: 0;
}
.reception-script {
  font-family: var(--script);
  font-size: clamp(36px, 5vw, 56px);
  color: var(--deep);
  margin: -0.2em 0 18px;
  display: block;
}
.reception-copy {
  margin: 28px auto 0;
  font-family: 'Cinzel', var(--serif);
  font-style: normal;
  font-weight: 300;
  font-size: 17px;
  color: var(--ink-2);
  max-width: 500px;
  text-wrap: balance;
}
.reception-illu {
  margin: 30px auto -20px;
  max-width: 820px;
  width: 100%;
  display: block;
  filter: contrast(1.05);
  mix-blend-mode: multiply;
}
.reception-meta {
  margin-top: 12px;
  display: flex; gap: 28px; justify-content: center; align-items: center;
  flex-wrap: wrap;
  font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--ink-3);
}

/* =================================================================
   CLOSING — Countdown + Donation + Footer combined
   ================================================================= */
.closing {
  min-height: 80vh;
  background: var(--bg-2);
}

/* --- Countdown --- */
.countdown {
  padding: 60px 32px;
  text-align: center;
  position: relative;
}
.cd-script {
  font-family: var(--script);
  font-size: clamp(38px, 5.5vw, 60px);
  font-weight: 400;
  color: var(--deep);
  line-height: 0.6;
  display: inline-block;
  vertical-align: -0.2em;
  margin: 0 0 28px;
}
.cd-sub {
  font-size: 12px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 36px;
}
.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 600px; margin: 0 auto;
  gap: 0;
}
.cd-cell {
  position: relative;
  padding: 0 6px;
}
.cd-cell + .cd-cell::before {
  content: '';
  position: absolute; left: 0; top: 16%; bottom: 16%;
  width: 1px;
  background: var(--line);
}
.cd-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cd-num .colon {
  display: inline-block; transform: translateY(-.15em);
  color: var(--ink-3);
}
.cd-label {
  margin-top: 6px;
  font-size: 10px; letter-spacing: .38em; text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 540px) {
  .countdown { padding: 50px 14px; }
  .cd-grid { grid-template-columns: repeat(4, 1fr); max-width: 100%; }
  .cd-cell { padding: 0 3px; }
  .cd-num { font-size: clamp(24px, 8vw, 40px); }
  .cd-label { font-size: 8px; letter-spacing: .12em; }
}

/* =================================================================
   DONATION
   ================================================================= */
.donation {
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.donation-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.donation-text { max-width: 480px; }
.donation-eyebrow {
  font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 20px;
}
.donation-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.5vw, 56px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 22px;
}
.donation-title .script {
  font-family: var(--script);
  font-size: 1.3em;
  color: var(--deep);
  display: inline-block;
  vertical-align: -0.2em;
  line-height: 0.6;
  margin-right: 0.06em;
}
.donation-copy {
  font-family: 'Cinzel', var(--serif); font-style: normal; font-weight: 300;
  font-size: 16px; line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 24px;
}
.donation-link {
  font-family: 'Cinzel', var(--serif); font-style: normal; font-weight: 300;
  font-size: 17px; color: var(--deep);
  border-bottom: 1px solid var(--taupe);
  padding-bottom: 2px;
  transition: color .2s;
}
.donation-link:hover { color: var(--ink); }

.donation-qr-wrap { display: flex; justify-content: center; }
.qr-card {
  background: var(--paper);
  padding: 28px;
  border: 1px solid var(--line);
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.qr-card::before, .qr-card::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border: 1px solid var(--taupe);
}
.qr-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.qr-card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.qr-caption {
  font-size: 9.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--ink-3);
  text-align: center;
  line-height: 1.7;
}

.donation-bouquet {
  position: absolute; left: -60px; top: -60px;
  width: 200px; opacity: .3; pointer-events: none;
  transform: rotate(-20deg);
}
.donation-bouquet.l { right: auto; left: -40px; bottom: -20px; top: auto; transform: rotate(200deg); opacity: .25; }

@media (max-width: 880px) {
  .donation { padding: 80px 24px; }
  .donation-grid { grid-template-columns: 1fr; gap: 50px; }
  .donation-text { text-align: center; margin: 0 auto; }
  .donation-bouquet { width: 140px; opacity: .2; left: -40px; top: -40px; }
}

/* =================================================================
   RSVP
   ================================================================= */
.rsvp {
  min-height: 80vh;
  padding: 120px 32px;
  background: var(--bg);
  text-align: center;
  position: relative;
}
.rsvp-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(60px, 8vw, 100px);
  letter-spacing: .18em;
  margin: 0;
  line-height: 1;
  color: var(--ink);
}
.rsvp-title-script {
  font-family: var(--script);
  font-size: clamp(40px, 5.5vw, 64px);
  color: var(--deep);
  margin: -0.1em 0 4px;
  display: block;
}
.rsvp-deadline {
  margin-top: 16px;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-3);
}
.rsvp-greeting {
  margin-top: 20px;
  font-family: 'Cinzel', var(--serif); font-style: normal; font-weight: 300;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--ink-2);
}
.rsvp-greeting strong {
  font-style: normal; font-family: 'Cinzel', var(--serif);
  font-size: 1.15em; color: var(--deep);
  font-weight: 500;
  margin-left: .12em;
}

.rsvp-card {
  max-width: 900px; margin: 48px auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 72px 80px;
  position: relative;
  text-align: left;
}
.rsvp-card::before, .rsvp-card::after {
  content: ''; position: absolute; width: 26px; height: 26px;
  border: 1px solid var(--taupe);
}
.rsvp-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rsvp-card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.rsvp-choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 640px; margin: 48px auto 0;
}
.rsvp-btn {
  padding: 22px 22px;
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink);
  transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.rsvp-btn:hover {
  border-color: var(--taupe);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(60,40,20,.4);
}
.rsvp-btn--yes {
  background: var(--deep);
  color: var(--paper);
  border-color: var(--deep);
}
.rsvp-btn--yes:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.rsvp-btn .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: grid; place-items: center;
}

.form-label {
  font-size: 10px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px; display: block;
}
.form-input {
  width: 100%; padding: 14px 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  font-family: 'Cinzel', var(--serif); font-style: normal; font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  outline: none;
  transition: border-color .25s;
}
.form-input:focus { border-color: var(--taupe); }
.form-row { margin-bottom: 28px; }

.guest-counter { display: flex; align-items: center; gap: 18px; }
.counter-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 18px; color: var(--ink-2);
  transition: all .2s;
}
.counter-btn:hover:not(:disabled) { border-color: var(--taupe); color: var(--ink); }
.counter-btn:disabled { opacity: .35; cursor: not-allowed; }
.counter-num {
  font-family: var(--serif); font-size: 30px; width: 60px; text-align: center; color: var(--ink);
}

.form-actions { display: flex; gap: 12px; margin-top: 36px; }
.btn-primary {
  flex: 1; padding: 16px 28px; background: var(--deep); color: var(--paper);
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  transition: background .25s, letter-spacing .25s;
}
.btn-primary:hover:not(:disabled) { background: var(--ink); letter-spacing: .42em; }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondary {
  padding: 16px 22px; background: transparent; color: var(--ink-2);
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  border: 1px solid var(--line);
  transition: color .25s, border-color .25s;
}
.btn-secondary:hover { color: var(--ink); border-color: var(--taupe); }

.step-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; }
.step-dot { width: 18px; height: 1px; background: var(--line); transition: all .35s; }
.step-dot.is-active { background: var(--taupe); width: 32px; }
.step-dot.is-done   { background: var(--taupe); }

.rsvp-success { text-align: center; padding: 18px 8px; }
.rsvp-success .seal {
  width: 80px; height: 80px; border-radius: 50%;
  border: 1px solid var(--taupe);
  display: grid; place-items: center;
  margin: 0 auto 28px;
  color: var(--deep);
  animation: sealIn .8s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sealIn {
  from { opacity: 0; transform: scale(.6) rotate(-10deg); }
  to   { opacity: 1; transform: none; }
}
.rsvp-success h3 {
  font-family: 'Cinzel', var(--serif); font-style: normal;
  font-size: 36px; font-weight: 300; margin: 0 0 12px; color: var(--ink);
}
.rsvp-success p {
  color: var(--ink-2); max-width: 380px; margin: 0 auto;
  font-family: 'Cinzel', var(--serif); font-style: normal; font-weight: 300; font-size: 17px;
  line-height: 1.7;
}
.rsvp-error { margin-top: 16px; color: #8a3a2a; font-size: 13px; }

@media (max-width: 640px) {
  .rsvp { padding: 80px 18px; }
  .rsvp-card { padding: 38px 24px; }
  .rsvp-choices { grid-template-columns: 1fr; }
}

/* =================================================================
   FOOTER
   ================================================================= */
.footer {
  background: var(--deep);
  color: var(--paper);
  padding: 56px 32px 48px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.93  0 0 0 0 0.82  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .5;
  pointer-events: none;
}
.footer-inner {
  position: relative; z-index: 1;
  display: flex;
  justify-content: center;
}
.footer-script {
  font-family: var(--script);
  font-size: 44px;
  line-height: 1;
  color: var(--paper);
}
.footer-center { text-align: center; }
.footer-monogram {
  font-family: 'Cinzel', var(--serif); font-style: normal; font-weight: 300;
  font-size: 34px;
  color: var(--paper);
  letter-spacing: 0.04em;
}
.footer-monogram .amp { font-family: var(--script); font-size: 1.2em; color: rgba(250,243,227,0.7); margin: 0 .15em; }
.footer-date {
  margin-top: 4px;
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: rgba(250,243,227,0.55);
}
.footer-socials-wrap {
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
  text-align: center;
}
.footer-socials-label {
  font-size: 12px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(250,243,227,0.55);
}
.footer-people { display: flex; gap: 20px; }
.footer-person { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.footer-person-name {
  font-family: var(--script); font-size: 22px; color: rgba(250,243,227,0.9);
}
.footer-socials { display: flex; gap: 8px; justify-content: center; }
.footer-social {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(250,243,227,0.25);
  display: grid; place-items: center;
  color: rgba(250,243,227,0.7);
  transition: all .25s;
}
.footer-social:hover { border-color: rgba(250,243,227,0.7); color: var(--paper); }

@media (max-width: 760px) {
  .footer { padding: 50px 24px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-script, .footer-socials-wrap { align-items: center; justify-self: center; }
  .footer-script { font-size: 38px; }
  .footer-socials-wrap { align-items: center; }
}

/* =================================================================
   image-slot tweaks
   ================================================================= */
image-slot {
  --is-bg: transparent;
  --is-border-color: rgba(140, 110, 70, 0.35);
}

/* =================================================================
   Mobile polish — touch targets, overflow safety, small screens
   ================================================================= */
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }
html { scroll-behavior: smooth; }

@media (max-width: 760px) {
  /* keep section side padding consistent and prevent edge crowding */
  .invite { padding-left: 20px; padding-right: 20px; }
  .schedule { padding-left: 20px; padding-right: 20px; }
  .rsvp-greeting { padding: 0 12px; }
  /* roomier tap targets for nav + map links */
  .nav-link { padding: 6px 2px; }
  .step-map { padding-top: 10px; }
}

@media (max-width: 400px) {
  .hero { padding-left: 14px; padding-right: 14px; }
  .hero-eyebrow-row { gap: 10px; margin-bottom: 28px; }
  .hero-eyebrow-row .line { width: 36px; }
  .hero-eyebrow-row .eyebrow,
  .hero-eyebrow-row .eyebrow.eyebrow { font-size: 10px; letter-spacing: .26em; }
  .hero-sub { gap: 12px; }
  .hero-sub .hairline { width: 44px; }
  .invite-greet { font-size: clamp(24px, 7vw, 32px); }
  .rsvp-card { padding: 32px 18px; }
  .form-actions { gap: 8px; }
}