@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340;0,9..144,440;0,9..144,560;0,9..144,620;0,9..144,700;0,9..144,800;1,9..144,420;1,9..144,500&family=Inter:wght@400;500;600&family=Mrs+Saint+Delafield&display=swap');

:root{
  --ink:#2c2a22;
  --paper:#FBF8F1;
  --paper-soft:#F2EEE1;
  --pistachio:#B7C6A2;
  --pistachio-deep:#8FA476;
  --rosewater:#E3C3CA;
  --rosewater-deep:#C99CA9;
  --lemon:#EFE3A6;
  --lemon-deep:#D8C765;
  --babyblue:#B7D3E3;
  --babyblue-deep:#8EB6CE;
  --line: rgba(44,42,34,0.12);
  --ease: cubic-bezier(.6,.05,.2,1);
  --max: 1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter', sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:520; letter-spacing:-0.01em; margin:0; color:var(--ink); }
.script{ font-family:'Fraunces', serif; font-style:italic; font-weight:560; line-height:1.15; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.eyebrow{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--rosewater-deep); font-weight:600; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:680px; margin:0 auto; padding:0 24px; }

/* ---------- NAV — brand mark + persistent side list, always visible on desktop ---------- */
.site-nav{ position:fixed; top:0; left:0; z-index:44; padding:22px 24px 22px 80px; }
.brand{
  font-family:'Fraunces', serif; font-style:italic; font-weight:560; font-size:20px; color:#fff;
  letter-spacing:.01em; mix-blend-mode:difference;
}
.persistent-nav{
  position:fixed; right:44px; top:50%; transform:translateY(-50%); z-index:44;
  display:flex; flex-direction:column; align-items:flex-end; gap:15px;
  mix-blend-mode:difference;
}
.persistent-nav a{
  color:#fff; font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  opacity:.5; position:relative; padding-right:14px; transition:opacity .2s;
}
.persistent-nav a:hover{ opacity:.85; }
.persistent-nav a.active{ opacity:1; }
.persistent-nav a.active::after{ content:""; position:absolute; right:0; top:1px; bottom:1px; width:1px; background:#fff; }
.nav-rsvp{
  position:fixed; top:22px; right:44px; z-index:44;
  border:1px solid #fff; color:#fff; mix-blend-mode:difference;
  border-radius:999px; padding:9px 18px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  display:none;
}
@media (min-width:640px){ .nav-rsvp{ display:inline-block; } }
@media (max-width:480px){ .persistent-nav{ right:20px; gap:11px; } .persistent-nav a{ font-size:9px; padding-right:11px; } .nav-rsvp{ right:20px; } }

/* ---------- MOBILE NAV: hamburger + full-screen drawer, replaces the always-visible side list below 860px ---------- */
.nav-toggle{
  display:none; position:fixed; top:18px; right:20px; z-index:46;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(251,248,241,.5);
  background:rgba(20,18,12,.25); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle .bar{ display:block; width:18px; height:1.5px; background:#fff; position:relative; transition:transform .25s var(--ease), opacity .2s; }
.nav-toggle .bar::before, .nav-toggle .bar::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:#fff; transition:transform .25s var(--ease); }
.nav-toggle .bar::before{ top:-6px; }
.nav-toggle .bar::after{ top:6px; }
body.nav-open .nav-toggle .bar{ background:transparent; }
body.nav-open .nav-toggle .bar::before{ top:0; transform:rotate(45deg); }
body.nav-open .nav-toggle .bar::after{ top:0; transform:rotate(-45deg); }

.nav-drawer{
  position:fixed; inset:0; z-index:45; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
body.nav-open .nav-drawer{ opacity:1; pointer-events:auto; transform:none; }
.nav-drawer a{
  color:var(--paper); font-family:'Fraunces',serif; font-size:22px; opacity:.85; transition:opacity .2s;
}
.nav-drawer a.active{ opacity:1; font-style:italic; color:var(--rosewater); }
.nav-drawer a:hover{ opacity:1; }
.nav-drawer .nav-drawer-rsvp{
  margin-top:14px; border:1px solid var(--paper); border-radius:999px; padding:12px 30px;
  font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}

@media (max-width:860px){
  .persistent-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .site-nav{ position:absolute; }
}
@media (min-width:861px){
  .nav-drawer{ display:none; }
}
body.nav-open{ overflow:hidden; }
body.nav-open .site-nav,
body.nav-open .nav-rsvp{ opacity:0; pointer-events:none; }

/* ---------- HERO / PAGE HEADER ---------- */
.page-header{
  text-align:center; padding:110px 24px 0;
  background: var(--pistachio);
}
.page-header .eyebrow{ color:var(--ink); opacity:.55; }
.page-header h1{ font-size:clamp(32px,6vw,48px); margin-top:14px; }
.page-header p.lead{ max-width:520px; margin:18px auto 0; color:#3a4232; font-size:14px; line-height:1.7; }
.page-header::after{
  content:""; display:block; height:52px;
}
.divider{ width:44px; height:1px; background:var(--ink); opacity:.35; margin:24px auto; }

/* ---------- FLORAL SPRIG (inline svg accent) ---------- */
.sprig{ width:52px; height:auto; margin:0 auto; opacity:.75; }

/* ---------- SECTION ---------- */
section{ padding:72px 24px; }
.section-head{ text-align:center; margin-bottom:44px; }
.section-head h2{ font-size:clamp(24px,4vw,32px); margin-top:12px; }
.section-head p.lead{ margin-top:14px; font-size:14px; color:#5b5847; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.7; }

/* ---------- CARDS ---------- */
.card{
  background:#fff; border-radius:18px; padding:32px 28px;
  box-shadow:0 18px 40px -22px rgba(44,42,34,.25);
  border:1px solid var(--line);
}
.card-grid{ display:grid; gap:22px; }
@media (min-width:640px){ .card-grid.cols-2{ grid-template-columns:1fr 1fr; } }
@media (min-width:860px){ .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } }

.tag-swatches{ display:flex; gap:10px; justify-content:center; margin:22px 0; flex-wrap:wrap; }
.swatch{ width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch.pistachio{ background:var(--pistachio); }
.swatch.rosewater{ background:var(--rosewater); }
.swatch.lemon{ background:var(--lemon); }
.swatch.babyblue{ background:var(--babyblue); }

/* ---------- STORY TIMELINE ---------- */
.story-block{ margin-top:60px; }
.story-block:first-child{ margin-top:0; }
.story-block .story-eyebrow{ text-align:center; }
.story-block h3{ text-align:center; font-size:24px; margin-top:10px; }
.story-block p.body{ max-width:640px; margin:22px auto 0; font-size:15px; color:#433f30; line-height:1.85; }
.story-photo{ margin-top:28px; border-radius:16px; overflow:hidden; box-shadow:0 20px 44px -22px rgba(44,42,34,.35); max-width:520px; margin-left:auto; margin-right:auto; }
.story-video-frame{
  max-width:360px; margin:28px auto 0; border-radius:16px; overflow:hidden;
  box-shadow:0 20px 44px -22px rgba(44,42,34,.35); border:6px solid #fff;
  position:relative;
}
.story-video-frame video{ width:100%; display:block; }
.story-caption{ text-align:center; font-family:'Fraunces',serif; font-style:italic; color:#6b6752; font-size:13px; margin-top:14px; }

/* ---------- COUNTDOWN ---------- */
.countdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:420px; margin:32px auto 0; }
.countdown .cell{ border-radius:12px; padding:18px 4px; text-align:center; color:#2c2a22; }
.countdown .cell:nth-child(1){ background:var(--pistachio); }
.countdown .cell:nth-child(2){ background:var(--rosewater); }
.countdown .cell:nth-child(3){ background:var(--lemon); }
.countdown .cell:nth-child(4){ background:var(--babyblue); }
.countdown .num{ font-family:'Fraunces',serif; font-weight:560; font-size:24px; display:block; }
.countdown .lbl{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; opacity:.65; margin-top:6px; display:block; }

/* ---------- DETAIL LIST ---------- */
.detail-row{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.detail-row:last-child{ border-bottom:none; }
.detail-row .k{ color:#6b6752; }
.detail-row .v{ font-weight:600; text-align:right; }

/* ---------- BUTTONS — thin outlined pill CTA language ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:999px; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600; cursor:pointer; border:1px solid currentColor;
  background:transparent; transition:transform .25s var(--ease), background .25s, color .25s;
}
.btn::after{ content:"→"; font-size:13px; transition:transform .2s; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover::after{ transform:translateX(3px); }
.btn-primary{ border-color:var(--ink); color:var(--ink); }
.btn-primary:hover{ background:var(--ink); color:var(--paper); }
.btn-ghost{ background:transparent; border:1px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* vertical capsule — the scroll-cue / signature CTA shape */
.capsule-cta{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:78px; height:120px; border-radius:999px; border:1px solid rgba(251,248,241,.75);
  color:var(--paper); font-family:'Fraunces',serif; font-style:italic; font-size:13px; line-height:1.25; text-align:center;
  background:rgba(20,18,12,.15); backdrop-filter:blur(2px);
  transition:transform .3s var(--ease), border-color .3s;
}
.capsule-cta:hover{ transform:translateY(3px); border-color:#fff; }
.capsule-cta svg{ width:14px; height:14px; animation:capsule-bounce 1.8s ease-in-out infinite; }
@keyframes capsule-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* ---------- FAQ ---------- */
details.faq-item{ border-bottom:1px solid var(--line); padding:16px 0; }
details.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; font-family:'Fraunces',serif; font-size:16px; }
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{ content:"+"; color:var(--rosewater-deep); font-size:20px; font-family:'Inter',sans-serif; transition:transform .3s; flex-shrink:0; }
details.faq-item[open] summary::after{ transform:rotate(45deg); }
details.faq-item p{ margin-top:10px; font-size:14px; color:#4a4735; line-height:1.7; }

/* ---------- FORM ---------- */
.field{ margin-top:22px; text-align:left; }
.field label{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#6b6752; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); background:#fff; border-radius:10px;
  padding:12px 14px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--rosewater-deep); outline-offset:1px; }
.attend-toggle{ display:flex; gap:8px; }
.attend-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.attend-toggle label{ flex:1; text-align:center; padding:12px 0; border-radius:10px; border:1px solid var(--line); font-size:13px; cursor:pointer; font-weight:500; transition:background .25s,color .25s; }
.attend-toggle input:checked + label{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- GALLERY ---------- */
.gallery{ columns:2 220px; column-gap:12px; }
.gallery img{ margin-bottom:12px; border-radius:12px; }
@media(min-width:700px){ .gallery{ columns:3 240px; } }

/* ---------- FOOTER ---------- */
footer{ padding:64px 24px 72px; text-align:center; background:var(--ink); color:var(--paper); margin-top:0; position:relative; }
footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--pistachio) 0 25%, var(--rosewater) 25% 50%, var(--lemon) 50% 75%, var(--babyblue) 75% 100%);
}
footer .script{ font-size:32px; color:var(--babyblue); }
footer .tag{ margin-top:10px; font-size:12px; letter-spacing:.1em; color:rgba(251,248,241,.55); }
footer .foot-nav{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
footer .foot-nav a{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(251,248,241,.65); }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }