/* ============================================================
   KATRINA & CODY — Garden Formal (v7)
   Navy on cream · watercolor florals · timeless romance
   ============================================================ */

:root{
  --cream:   #F4EEE3;
  --cream-2: #EBE2D2;   /* deeper panel */
  --navy:    #29384F;   /* brand ink */
  --navy-deep:#212E42;
  --ink:     #29384F;
  --ink-soft:#6B7686;
  --line:    #CBBDA4;   /* hairline on cream */

  /* named wedding palette */
  --petal:  #E9CBC8;
  --rose:   #C67E7B;
  --butter: #EAD79A;
  --peri:   #AEB0D0;
  --blue:   #6F88B2;
  --sage:   #A7B49A;

  --accent: var(--blue);   /* tweakable romantic accent */

  --display:"Cormorant Garamond", Georgia, serif;
  --script:"Pinyon Script", cursive;
  --label:"Hanken Grotesk", system-ui, sans-serif;
  --body:"EB Garamond", Georgia, serif;   /* tweakable: Classic (EB Garamond) or Modern (Hanken) */

  --wrap:1180px;
  --gut:clamp(22px,5vw,72px);
  --t:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; background:var(--cream); }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-weight:400; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }

/* ---------- type ---------- */
.kicker{ font-family:var(--label); font-size:11px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft); }
.kicker.navy{ color:var(--navy); }
.script{ font-family:var(--script); font-weight:400; font-style:normal; line-height:1; }
h1,h2,h3{ font-family:var(--display); font-weight:500; margin:0; line-height:1.05; letter-spacing:.005em; }
em{ font-style:italic; }

.rule{ display:block; height:1px; background:var(--line); border:0; }
.rule.navy{ background:var(--navy); opacity:.5; }

/* divider floral */
.divider{ display:flex; justify-content:center; padding:clamp(18px,3vw,38px) 0; }
.divider img{ width:clamp(220px,34vw,400px); height:auto; opacity:.96; }

/* reveal — visible by default; only the .js class opts into the hide-then-reveal,
   so content can NEVER be stranded hidden if JS/transitions don't run */
.reveal{ opacity:1; transform:none; filter:none; }
.js .reveal{ opacity:0; transform:translateY(22px); filter:blur(4px);
  transition:opacity .9s var(--t), transform 1s var(--t), filter 1s var(--t); }
.js .reveal.in{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; filter:none; transition:none; } }

/* photo frame / matted print */
.frame{ background:#fff; padding:10px; border:1px solid var(--line);
  box-shadow:0 30px 60px -38px rgba(41,56,79,.4); }
.frame .ph{ overflow:hidden; }
.ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.bw img{ filter:grayscale(1) contrast(1.04); }
.arch{ border-radius:50% 50% 6px 6px / 32% 32% 4px 4px; overflow:hidden; }

/* ============================================================
   PROGRESS + NAV
   ============================================================ */
#progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--navy); z-index:1200; transition:width .1s linear; }

.nav{ position:fixed; top:0; left:0; right:0; z-index:1100; padding:22px 0;
  color:#F4EEE3; transition:background .5s var(--t), padding .5s var(--t), box-shadow .5s, color .5s; }
.nav .brand{ text-shadow:0 1px 20px rgba(8,11,16,.35); }
.nav.solid{ background:color-mix(in oklab, var(--cream) 90%, transparent);
  backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); padding:13px 0; color:var(--navy); }
.nav.solid .brand{ text-shadow:none; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--display);
  font-size:21px; font-weight:600; letter-spacing:.04em; }
.brand .amp{ font-family:var(--script); font-size:24px; font-weight:400; color:var(--accent); }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ font-family:var(--label); font-size:11.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; position:relative; opacity:.9; white-space:nowrap; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:currentColor; transition:width .4s var(--t); }
.nav-links a:hover{ opacity:1; } .nav-links a:hover::after{ width:100%; }
.nav-rsvp{ border:1px solid currentColor; padding:8px 18px; border-radius:999px; opacity:1 !important; }
.nav-rsvp::after{ display:none; }
.nav-rsvp:hover{ background:var(--accent); border-color:var(--accent); color:var(--cream); }
.menu-btn{ display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; padding:6px; color:currentColor; }
.menu-btn span{ width:24px; height:1.5px; background:currentColor; display:block; }

.overlay{ position:fixed; inset:0; z-index:1300; background:var(--navy-deep); color:var(--cream);
  display:flex; flex-direction:column; padding:26px var(--gut); transform:translateY(-101%); transition:transform .6s var(--t); }
.overlay.open{ transform:none; }
.overlay-top{ display:flex; justify-content:space-between; align-items:center; }
.overlay-top .brand{ color:var(--cream); }
.close-btn{ background:none; border:0; color:inherit; cursor:pointer; font-family:var(--label); font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.overlay nav{ margin:auto 0; display:flex; flex-direction:column; gap:4px; }
.overlay nav a{ font-family:var(--display); font-size:clamp(36px,11vw,64px); line-height:1.12; }
.overlay nav a em{ font-family:inherit; font-style:italic; color:var(--butter); }
.overlay-foot .kicker{ color:rgba(244,238,227,.6); }

/* ============================================================
   HERO — cinematic full-bleed invitation
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:#10151d; }
.hero-bg{ position:absolute; inset:-14%; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 50%;
  transform:scale(1.02); animation:kenburns 18s ease-out both; }
.hero-bg img.bw{ filter:grayscale(1) contrast(1.03); }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.085); } }
.hero-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,19,27,.62) 0%, rgba(14,19,27,.12) 30%, rgba(14,19,27,.22) 58%, rgba(14,19,27,.78) 100%); }

.hero-content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 6vw; color:#F5EFE3; }
.hero-pre{ font-family:var(--label); font-size:clamp(11px,1.1vw,13px); letter-spacing:.42em; text-transform:uppercase;
  color:rgba(245,239,227,.86); }
.hero-names{ font-family:var(--display); font-weight:500; font-size:clamp(50px,10.5vw,138px); line-height:1;
  letter-spacing:.01em; margin:clamp(16px,2.6vh,30px) 0 0; color:#F8F3E8; text-shadow:0 2px 40px rgba(8,11,16,.4); }
.hero-names .amp{ font-family:var(--script); font-weight:400; color:var(--accent); font-size:.74em; }
.hero-line{ display:block; width:64px; height:1px; background:rgba(245,239,227,.55); margin:clamp(22px,3.4vh,34px) 0; }
.hero-meta{ display:flex; flex-direction:column; gap:7px; font-family:var(--display); font-style:italic;
  font-size:clamp(17px,1.9vw,24px); color:rgba(245,239,227,.94); }
.hero-meta .dim{ font-size:.78em; color:rgba(245,239,227,.72); letter-spacing:.02em; }

.hero-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(245,239,227,.8); }
.hero-cue .kicker{ color:inherit; letter-spacing:.28em; }
.hero-cue .ln{ width:1px; height:46px; background:linear-gradient(rgba(245,239,227,.7),transparent);
  animation:drop 2.4s var(--t) infinite; transform-origin:top; }
@keyframes drop{ 0%{ transform:scaleY(0);} 45%{ transform:scaleY(1);} 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* drifting petals — whisper-subtle ambient motion over the hero image */
.hero-petals{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero-petals span{ position:absolute; top:-9%; width:13px; height:13px; opacity:0;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--petal) 72%);
  border-radius:62% 62% 62% 2%; filter:blur(.5px);
  animation:petalFall linear infinite; will-change:transform,opacity; }
@keyframes petalFall{
  0%{ transform:translate3d(0,-9vh,0) rotate(0deg); opacity:0; }
  9%{ opacity:.5; }
  88%{ opacity:.46; }
  100%{ transform:translate3d(46px,112vh,0) rotate(340deg); opacity:0; }
}
.hero-petals span:nth-child(1){ left:6%;  width:11px; animation-duration:23s; animation-delay:-3s;  }
.hero-petals span:nth-child(2){ left:18%; width:16px; animation-duration:19s; animation-delay:-11s; background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--butter) 74%); }
.hero-petals span:nth-child(3){ left:30%; width:9px;  animation-duration:26s; animation-delay:-7s;  }
.hero-petals span:nth-child(4){ left:43%; width:14px; animation-duration:21s; animation-delay:-16s; background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--peri) 72%); }
.hero-petals span:nth-child(5){ left:55%; width:10px; animation-duration:25s; animation-delay:-1s;  }
.hero-petals span:nth-child(6){ left:67%; width:17px; animation-duration:18s; animation-delay:-13s; }
.hero-petals span:nth-child(7){ left:78%; width:11px; animation-duration:24s; animation-delay:-9s;  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--blue) 74%); }
.hero-petals span:nth-child(8){ left:88%; width:14px; animation-duration:20s; animation-delay:-5s;  }
.hero-petals span:nth-child(9){ left:96%; width:9px;  animation-duration:27s; animation-delay:-18s; background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--rose) 70%); }
@media (prefers-reduced-motion:reduce){ .hero-petals{ display:none; } }

/* wax-seal settle — a slow, gentle scale into place (no bounce/rotation) */
@keyframes sealPress{
  0%{ transform:scale(1.07); }
  100%{ transform:scale(1); }
}
.rsvp .rsvp-seal{ will-change:transform; }
.rsvp .rsvp-seal.sealed img{ animation:sealPress 2s var(--t) both; }
@media (prefers-reduced-motion:reduce){ .rsvp .rsvp-seal.sealed img{ animation:none; } }

/* hero entrance animation (independent of scroll reveals) */
.js .hero-anim{ opacity:0; transform:translateY(26px); filter:blur(6px); }
.hero-anim.in{ opacity:1; transform:none; filter:none;
  transition:opacity 1.2s var(--t) calc(var(--i,0) * .16s + .25s),
             transform 1.3s var(--t) calc(var(--i,0) * .16s + .25s),
             filter 1.3s var(--t) calc(var(--i,0) * .16s + .25s); }

/* ============================================================
   CINEMATIC PLATE BAND
   ============================================================ */
.plate-band{ position:relative; height:clamp(440px,76vh,760px); overflow:hidden; background:#10151d; }
.pb-bg{ position:absolute; inset:-14%; z-index:0; }
.pb-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.pb-bg img.bw{ filter:grayscale(1) contrast(1.05) brightness(.96); }
.pb-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,19,27,.5), rgba(14,19,27,.28) 45%, rgba(14,19,27,.6)); }
.pb-cap{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; color:#F5EFE3; padding:0 6vw; }
.pb-cap .kicker{ color:rgba(245,239,227,.82); }
.pb-quote{ font-family:var(--display); font-weight:500; font-size:clamp(30px,5.2vw,68px); line-height:1.08;
  margin:18px 0 0; text-shadow:0 2px 40px rgba(8,11,16,.45); }
.pb-quote em{ font-family:var(--script); font-style:normal; color:var(--accent); font-size:1.1em; }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.section{ padding:clamp(60px,7.5vw,104px) 0; }
.sec-head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:clamp(38px,5vw,64px); }
.sec-head .eyebrow{ display:flex; align-items:center; gap:14px; }
.sec-head .eyebrow .rule{ width:38px; }
.sec-head h2{ font-size:clamp(40px,6.6vw,86px); line-height:1; padding-bottom:.42em; }
.sec-head h2 .amp, .sec-head h2 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.sec-head .sub{ font-family:var(--display); font-style:italic; font-size:clamp(18px,1.8vw,22px); color:var(--ink-soft); max-width:42ch; }

/* ============================================================
   DEDICATION (letter)
   ============================================================ */
.dedication{ text-align:center; padding-top:clamp(6px,1vw,16px); padding-bottom:clamp(12px,1.6vw,26px); }
#story{ padding-top:clamp(12px,1.6vw,26px); }
.ded-eyebrow{ display:block; margin-bottom:clamp(20px,3vh,30px); }
.ded-lead{ font-family:var(--display); font-weight:500; font-size:clamp(28px,4.4vw,56px); line-height:1.1;
  max-width:18ch; margin:0 auto clamp(26px,4vh,40px); text-wrap:balance; }
.ded-lead em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.ded-body{ max-width:60ch; margin:0 auto; }
.ded-body p{ margin:0 0 clamp(30px,2.6vw,40px); color:var(--ink-soft); line-height:1.72; }
.ded-body p.big{ font-family:var(--display); font-size:clamp(20px,1.8vw,24px); font-style:italic; color:var(--navy); line-height:1.46; margin-bottom:clamp(28px,2.2vw,38px); }
.ded-sign{ font-family:var(--script); font-size:clamp(34px,4vw,52px); color:var(--navy); line-height:1; margin-top:clamp(26px,2.6vw,38px); }

/* ============================================================
   STORY — framed prints
   ============================================================ */
.story-grid{ display:flex; flex-direction:column; gap:clamp(58px,7.5vw,104px); }
.story-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.story-row.flip .story-art{ order:2; }
.story-art{ position:relative; }
.story-art .frame .ph{ aspect-ratio:4/5; }
.story-art.wide .frame .ph{ aspect-ratio:5/4; }
.story-art .floret{ position:absolute; width:clamp(120px,16vw,190px); z-index:3; pointer-events:none; }
.story-art .floret.br{ right:-7%; bottom:-9%; }
.story-art .floret.tl{ left:-8%; top:-10%; }
.story-text .plate-no{ font-family:var(--display); font-style:italic; color:var(--accent); font-size:18px; display:block; margin-bottom:12px; }
.story-text h3{ font-size:clamp(30px,3.6vw,50px); margin-bottom:8px; }
.story-text h3 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.story-text .where{ font-family:var(--label); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 18px; }
.story-text p{ color:var(--ink-soft); max-width:46ch; }

/* ============================================================
   PROGRAM — the weekend
   ============================================================ */
.program{ background:var(--cream-2); }
.prog-list{ max-width:980px; margin:0 auto; border-top:1px solid var(--line); }
.prog-row{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,4vw,60px); align-items:baseline;
  padding:clamp(28px,4vh,46px) 0; border-bottom:1px solid var(--line); }
.prog-no{ font-family:var(--display); font-style:italic; font-size:clamp(18px,1.5vw,22px); color:var(--accent); }
.prog-when{ font-family:var(--label); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:9px; }
.prog-main h3{ font-size:clamp(30px,4.4vw,54px); line-height:1; }
.prog-main h3 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.prog-desc{ margin:14px 0 0; color:var(--ink-soft); max-width:58ch; }
.prog-time{ font-family:var(--display); font-style:italic; text-align:right; white-space:nowrap; font-size:clamp(18px,1.7vw,23px); color:var(--navy); }
.prog-time .tag{ display:block; font-family:var(--label); font-style:normal; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }

/* ============================================================
   VENUE feature (watercolor pool)
   ============================================================ */
.venue{ text-align:center; }
.venue .sec-head{ margin-bottom:clamp(18px,2.5vw,32px); }
.venue-art{ max-width:860px; margin:0 auto; }
.venue-art img{ width:100%; height:auto; border-radius:4px;
  filter:drop-shadow(0 30px 60px rgba(41,56,79,.18)); }
.venue-cap{ margin-top:clamp(22px,3.5vh,34px); }
.venue-cap h3{ font-size:clamp(30px,4vw,52px); }
.venue-cap h3 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.venue-cap p{ color:var(--ink-soft); max-width:52ch; margin:12px auto 0; font-family:var(--display); font-style:italic; font-size:clamp(18px,1.6vw,21px); }

/* ============================================================
   CEREMONY card
   ============================================================ */
.ceremony{ position:relative; }
.cer-card{ position:relative; max-width:860px; margin:0 auto; background:var(--cream);
  border:1px solid var(--navy); padding:clamp(36px,5.5vw,76px); box-shadow:0 40px 80px -50px rgba(41,56,79,.5); }
.cer-card::after{ content:""; position:absolute; inset:9px; border:1px solid var(--line); pointer-events:none; }
.cer-floret{ position:absolute; width:clamp(120px,16vw,180px); z-index:3; }
.cer-floret.tr{ right:-5%; top:-9%; transform:scaleX(-1); }
.cer-floret.bl{ left:-5%; bottom:-9%; }
.cer-head{ text-align:center; margin-bottom:clamp(26px,4vh,42px); position:relative; }
.cer-head .kicker{ display:block; margin-bottom:12px; }
.cer-head h2{ font-size:clamp(32px,4.6vw,58px); }
.cer-head h2 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.cer-rows{ position:relative; }
.cer-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:baseline; padding:16px 0; border-bottom:1px dotted var(--line); }
.cer-row:last-child{ border-bottom:0; }
.cer-row .k{ font-family:var(--label); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.cer-row .mid{ font-family:var(--display); font-style:italic; color:var(--ink-soft); font-size:15px; text-align:center; }
.cer-row .v{ font-family:var(--display); font-size:clamp(19px,1.8vw,25px); text-align:right; color:var(--navy); }
.cer-row .v em{ font-family:var(--script); color:var(--accent); font-style:normal; }
@media (max-width:680px){ .cer-row{ grid-template-columns:1fr auto; } .cer-row .mid{ display:none; } }

/* add-to-calendar pill (ceremony card + weekend Friday) */
.cer-cta{ margin-top:clamp(28px,3.6vw,42px); display:flex; justify-content:center; }
.cal-add{ display:inline-flex; align-items:center; gap:11px; cursor:pointer; background:none; white-space:nowrap;
  font-family:var(--label); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--navy); border:1px solid var(--line); border-radius:999px; padding:13px 28px;
  transition:background .4s var(--t), color .4s var(--t), border-color .4s var(--t), transform .4s var(--t); }
.cal-add svg{ width:15px; height:15px; flex:none; }
.cal-add:hover{ background:var(--navy); color:var(--cream); border-color:var(--navy); transform:translateY(-2px); }
.cal-add.added{ background:var(--sage); border-color:var(--sage); color:var(--navy-deep); }

/* ============================================================
   COUNTDOWN — navy band
   ============================================================ */
.countdown{ background:var(--navy-deep); color:var(--cream); text-align:center; padding:clamp(72px,9vw,124px) 0; }
.countdown .kicker{ color:var(--butter); }
.cd-head{ font-family:var(--display); font-style:italic; font-size:clamp(26px,4vw,48px); margin:16px 0 clamp(34px,6vh,56px); }
.cd-head em{ font-family:var(--script); font-style:normal; color:var(--butter); }
.cd{ display:flex; justify-content:center; gap:clamp(18px,5vw,66px); flex-wrap:wrap; }
.cd .u{ display:flex; flex-direction:column; gap:10px; min-width:62px; }
.cd .v{ font-family:var(--display); font-weight:500; font-size:clamp(46px,8vw,104px); line-height:.9; font-variant-numeric:tabular-nums; }
.cd .lab{ font-family:var(--label); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(244,238,227,.6); }
.cd-foot{ margin-top:clamp(32px,5vh,50px); } .cd-foot .kicker{ color:rgba(244,238,227,.66); }

/* ============================================================
   ATTIRE — homepage teaser (redesigned: Her/Him duo + palette paper)
   ============================================================ */
.attire-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3.5vw,48px); max-width:840px; margin:clamp(36px,5vw,60px) auto 0; }
.ad-look{ display:block; }
.ad-frame{ display:block; overflow:hidden; aspect-ratio:3/4; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -42px rgba(41,56,79,.5); }
.ad-frame img{ width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block; transition:transform .9s var(--t); }
.ad-look:hover .ad-frame img{ transform:scale(1.04); }
.ad-cap{ display:flex; flex-direction:column; gap:5px; margin-top:16px; text-align:center; }
.ad-k{ font-family:var(--display); font-style:italic; color:var(--accent); font-size:clamp(20px,2vw,26px); }
.ad-v{ font-family:var(--label); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }

.attire-palette-teaser{ margin-top:clamp(56px,8vh,90px); text-align:center; }
.apt-head{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,20px); margin-bottom:clamp(22px,3.2vh,32px); }
.apt-head .rule{ height:1px; width:clamp(40px,8vw,84px); background:var(--line); }
.apt-paper{ margin:0 auto; max-width:560px; }
.apt-paper img{ width:100%; height:auto; display:block; filter:drop-shadow(0 1px 1px rgba(41,56,79,.16)) drop-shadow(0 16px 30px rgba(41,56,79,.13)); }
.apt-note{ margin:clamp(22px,3.2vh,32px) auto 0; font-family:var(--display); font-style:italic; font-size:clamp(16px,1.5vw,20px); color:var(--ink-soft); max-width:48ch; line-height:1.5; }

.poolside-strip{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:520px; margin:clamp(42px,6vh,66px) auto 0; text-align:center; }
.poolside-strip .ps-ic{ width:clamp(110px,15vw,140px); height:auto; opacity:.8; }
.poolside-strip p{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); }
.poolside-strip .ps-k{ font-family:var(--display); font-style:italic; color:var(--navy); font-size:1.1em; }

/* ============================================================
   ATTIRE (legacy classes — retained for older homepage builds)
   ============================================================ */
.attire-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,54px); }
.dcard .frame{ margin-bottom:22px; } .dcard .frame .ph{ aspect-ratio:4/5; }
.dcard .plate-no{ font-family:var(--display); font-style:italic; color:var(--accent); font-size:16px; display:block; margin-bottom:6px; }
.dcard h3{ font-size:clamp(26px,3vw,40px); margin-bottom:8px; }
.dcard h3 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.dcard p{ color:var(--ink-soft); max-width:44ch; }
.palette{ margin-top:clamp(48px,7vh,76px); text-align:center; }
.palette-floral{ width:clamp(180px,28vw,300px); height:auto; margin:0 auto clamp(10px,2vh,18px); display:block; opacity:.96; }
.palette-lead{ margin:14px auto 0; font-family:var(--display); font-style:italic; font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); max-width:42ch; }
.palette .swatches{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,2.6vw,34px); margin-top:clamp(28px,4vh,40px); }
.sw{ display:flex; flex-direction:column; align-items:center; gap:13px; }
.sw i{ width:clamp(46px,6.5vw,62px); height:clamp(46px,6.5vw,62px); border-radius:50%; display:block; box-shadow:inset 0 0 0 1px rgba(41,56,79,.14); }
.sw span{ font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.palette .note{ margin-top:30px; font-family:var(--display); font-style:italic; font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); max-width:46ch; margin-inline:auto; }

/* ============================================================
   RSVP
   ============================================================ */
.rsvp{ text-align:center; background:var(--cream-2); }
.rsvp-seal{ width:clamp(168px,21vw,234px); margin:0 auto clamp(4px,1.4vh,12px); }
.rsvp-seal img{ width:100%; }
.rsvp h2{ font-size:clamp(44px,7vw,92px); margin:6px 0 0; padding-bottom:.34em; }
.rsvp h2 em{ font-family:var(--script); color:var(--accent); font-style:normal; }
.rsvp p{ max-width:46ch; margin:clamp(18px,3vh,26px) auto 0; color:var(--ink-soft); font-family:var(--display); font-style:italic; font-size:clamp(19px,1.7vw,23px); }
.btn{ display:inline-block; margin-top:clamp(32px,5vh,44px); font-family:var(--label); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; color:var(--cream); background:var(--navy); padding:17px 48px; border-radius:999px;
  transition:transform .4s var(--t), box-shadow .4s, background .4s; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -18px rgba(41,56,79,.55); }

/* outline button + attire CTA */
.attire-cta{ margin-top:clamp(40px,6vh,64px); display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; }
.btn-outline{ display:inline-block; white-space:nowrap; font-family:var(--label); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--navy); border:1px solid var(--navy); padding:15px 38px; border-radius:999px;
  transition:transform .4s var(--t), background .4s, color .4s; }
.btn-outline:hover{ background:var(--navy); color:var(--cream); transform:translateY(-2px); }

/* fancier dress-code CTA — cream pill with a navy double-ring frame + arrow */
.btn-dress{ display:inline-flex; align-items:center; gap:12px; padding:18px 46px; letter-spacing:.2em;
  background:var(--cream); color:var(--navy);
  box-shadow:inset 0 0 0 4px var(--cream), inset 0 0 0 5px rgba(41,56,79,.32), 0 16px 32px -20px rgba(41,56,79,.45);
  transition:background .5s var(--t), color .5s var(--t), box-shadow .5s var(--t), transform .5s var(--t); }
.btn-dress .ba{ font-family:var(--display); font-size:16px; line-height:1; transform:translateX(0); transition:transform .5s var(--t); }
.btn-dress:hover{ background:var(--navy); color:var(--cream); transform:translateY(-2px);
  box-shadow:inset 0 0 0 4px var(--navy), inset 0 0 0 5px rgba(244,238,227,.5), 0 20px 34px -18px rgba(41,56,79,.55); }
.btn-dress:hover .ba{ transform:translateX(5px); }
.attire-cta-note{ font-family:var(--display); font-style:italic; font-size:clamp(15px,1.4vw,18px); color:var(--ink-soft); }
.attire-cta-jump{ display:flex; gap:14px; align-items:center; justify-content:center; margin-top:15px; }
.attire-cta-jump a{ font-family:var(--label); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--line); padding-bottom:3px; transition:border-color .3s var(--t), color .3s var(--t); }
.attire-cta-jump a:hover{ border-color:var(--accent); }
.attire-cta-jump .dot{ color:var(--ink-soft); }
.rsvp-foot{ margin-top:clamp(32px,5vh,46px); display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.rsvp-foot span{ font-family:var(--label); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--navy-deep); color:var(--cream); padding:clamp(70px,11vh,110px) 0 40px; text-align:center; border-top:1px solid rgba(244,238,227,.12); }
.f-crest{ width:clamp(170px,23vw,240px); margin:0 auto clamp(28px,5vh,44px); }
.f-crest img{ width:100%; }
.f-names{ font-family:var(--display); font-size:clamp(34px,5vw,60px); }
.f-names .amp{ font-family:var(--script); color:var(--butter); }
.f-detail{ margin-top:18px; display:flex; flex-direction:column; gap:6px; }
.f-detail .big{ font-family:var(--display); font-style:italic; font-size:clamp(18px,1.6vw,22px); }
.f-detail span{ color:rgba(244,238,227,.74); font-size:14.5px; }
.f-nav{ margin-top:clamp(34px,6vh,52px); display:flex; gap:24px; justify-content:center; flex-wrap:wrap;
  padding-top:30px; border-top:1px solid rgba(244,238,227,.16); }
.f-nav a{ font-family:var(--label); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,238,227,.7); }
.f-nav a:hover{ color:var(--butter); }
.colophon{ margin-top:26px; font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,238,227,.42); }

/* ============================================================
   MUSIC PLAYER
   ============================================================ */
.player{ position:fixed; left:18px; bottom:18px; z-index:1150; }
.player-panel{ position:absolute; bottom:54px; left:0; width:320px; max-width:80vw; opacity:0; transform:translateY(10px) scale(.98);
  pointer-events:none; transition:opacity .4s var(--t), transform .4s var(--t); border-radius:14px; overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.4); }
.player.open .player-panel{ opacity:1; transform:none; pointer-events:auto; }
.music{ display:flex; align-items:center; gap:10px; cursor:pointer; background:var(--navy); color:var(--cream);
  border:1px solid rgba(244,238,227,.2); padding:9px 16px 9px 12px; border-radius:999px; }
.music-label{ font-family:var(--label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.eq{ display:flex; align-items:flex-end; gap:2px; height:13px; }
.eq i{ width:2.5px; background:var(--butter); height:5px; }
.music.playing .eq i{ animation:eq .9s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay:.2s; } .eq i:nth-child(3){ animation-delay:.4s; } .eq i:nth-child(4){ animation-delay:.1s; }
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:13px; } }

/* homepage weekend teaser (links to Weekend.html) */
.wk-glance{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,30px); max-width:760px; margin:0 auto; }
.glance{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:11px;
  padding:clamp(22px,2.6vw,32px) 14px; border:1px solid var(--line); border-radius:6px;
  background:color-mix(in oklab, var(--cream) 55%, transparent);
  transition:transform .4s var(--t), box-shadow .4s var(--t), border-color .4s var(--t); }
.glance:hover{ transform:translateY(-4px); box-shadow:0 24px 46px -28px rgba(41,56,79,.4); border-color:var(--accent); }
.glance .g-ic{ height:62px; display:flex; align-items:flex-end; justify-content:center; }
.glance .g-ic img{ max-height:100%; width:auto; }
.glance .g-day{ font-family:var(--display); font-weight:500; font-size:clamp(20px,2vw,26px); color:var(--navy); line-height:1; }
.glance .g-note{ font-family:var(--label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.wk-glance-cta{ text-align:center; margin-top:clamp(34px,5vw,52px); }
.venue-link{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; font-family:var(--label); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--navy); border-bottom:1px solid var(--line); padding-bottom:5px;
  transition:color .3s var(--t), border-color .3s var(--t); }
.venue-link:hover{ color:var(--accent); border-color:var(--accent); }

/* anchored sections clear the fixed nav when deep-linked */
:where(section[id], [id].section, .venue-sec, .faq-sec, .gifts-sec){ scroll-margin-top:clamp(72px,9vh,94px); }

/* floating back button (deep-link helper) — top-left, just below the nav */
.backbtn{ position:fixed; left:clamp(14px,3vw,20px); top:clamp(70px,8.5vh,84px); z-index:1150; display:none; align-items:center; gap:8px;
  background:var(--cream); color:var(--navy); border:1px solid var(--line); border-radius:999px; cursor:pointer;
  padding:10px 17px; font-family:var(--label); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 12px 30px -14px rgba(41,56,79,.45); transition:transform .3s var(--t), box-shadow .3s var(--t); }
.backbtn.show{ display:inline-flex; }
.backbtn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(41,56,79,.5); }
.backbtn .bk-arrow{ font-size:15px; line-height:1; }

/* back-to-top — bottom-right, appears after scrolling down */
.totop{ position:fixed; right:18px; bottom:18px; z-index:1150; display:none;
  width:46px; height:46px; border-radius:50%; cursor:pointer; align-items:center; justify-content:center;
  background:var(--navy); color:var(--cream); border:0; font-size:17px; line-height:1;
  box-shadow:0 12px 30px -14px rgba(41,56,79,.5); opacity:0;
  transition:transform .35s var(--t), background .3s var(--t), opacity .4s var(--t); }
.totop.show{ display:inline-flex; opacity:1; }
.totop:hover{ background:var(--navy-deep); transform:translateY(-3px); }
@media (prefers-reduced-motion:reduce){ .totop{ transition:opacity .2s linear; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .nav-links{ display:none; }
  .wk-glance{ grid-template-columns:repeat(3,1fr); }
  .menu-btn{ display:flex; }
  .hero-photo .drape{ width:clamp(110px,30vw,160px); }
  .hero-photo .drape.l{ left:-10%; } .hero-photo .drape.r{ right:-10%; }
  .story-row, .story-row.flip{ grid-template-columns:1fr; gap:28px; }
  .story-row.flip .story-art{ order:0; }
  .story-art .floret{ width:110px; }
  .story-text .plate-no{ display:none; }
  .prog-row{ grid-template-columns:auto 1fr; }
  .prog-time{ grid-column:2; text-align:left; margin-top:12px; }
  .prog-no{ grid-row:1 / span 3; }
  .attire-grid{ grid-template-columns:1fr; }

  /* tighten vertical rhythm on small screens — desktop used vh-based padding
     which balloons on tall phones; switch to width-relative, content-sized gaps */
  .section{ padding:clamp(44px,8vw,62px) 0; }
  .dedication{ padding-top:clamp(20px,5vw,34px); }
  .sec-head{ margin-bottom:clamp(30px,6vw,44px); }
  .story-grid{ gap:clamp(40px,9vw,56px); }
  .divider{ padding:clamp(16px,4.5vw,28px) 0; }
  .divider img{ width:clamp(168px,44vw,240px); }
  .plate-band{ height:clamp(340px,92vw,460px); }
  .countdown{ padding:clamp(54px,11vw,78px) 0; }
  .palette{ margin-top:clamp(40px,9vw,58px); }
  .attire-cta{ margin-top:clamp(30px,7vw,44px); }
  footer{ padding:clamp(56px,12vw,82px) 0 36px; }
}
@media (max-width:520px){ body{ font-size:16px; } }