/* ===================== TOKENS ===================== */
:root{
  --canvas:#FBF8F2;
  --surface:#FFFFFF;
  --surface-soft:#F3ECDD;
  --ink:#2A2820;
  --body:#55503F;
  --muted:#8C8570;
  --hairline:#E6DFCC;

  --sage-deep:#1E2818;
  --sage-deep-2:#28351F;
  --sage:#4B5636;
  --sage-mid:#5C6B4F;
  --rose:#B98A7B;
  --gold:#C9A66B;
  --cream-paper:#F6EFE2;

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-full:9999px;

  --shadow-soft:0 2px 10px rgba(30,25,10,.05), 0 14px 34px rgba(30,25,10,.08);
  --shadow-card:0 1px 2px rgba(30,25,10,.04), 0 8px 20px rgba(30,25,10,.06);

  --section-pad:112px;
  --section-pad-mobile:64px;

  --font-display:'Inter', sans-serif;
  --font-body:'Tenor Sans', sans-serif;
  --font-hand:'Unbounded', sans-serif;
  --marker-red:#D6402A;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--canvas);
  color:var(--body);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0; font-weight:600; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1120px; margin:0 auto; padding:0 32px; }
.container--narrow{ max-width:760px; }

.section{ padding:var(--section-pad) 0; position:relative; }

.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--rose);
  display:block;
  margin-bottom:18px;
}
.eyebrow--light{ color:#D9C79E; }

.section-title{
  font-size:clamp(30px,4vw,46px);
  line-height:1.15;
  font-weight:600;
  letter-spacing:-0.01em;
  max-width:760px;
  margin-bottom:20px;
}
.section-title--light{ color:var(--cream-paper); }

.section-lead{
  font-size:17px;
  color:var(--muted);
  max-width:620px;
  margin-bottom:48px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:52px;
  padding:0 30px;
  border-radius:var(--radius-full);
  font-family:var(--font-body);
  font-size:14px;
  letter-spacing:.03em;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn--primary{ background:var(--sage); color:#fff; }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); }
.btn--outline{ background:transparent; border-color:var(--hairline); color:var(--ink); }
.btn--outline:hover{ border-color:var(--sage); color:var(--sage); }
.btn--full{ width:100%; }

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:500; background:transparent; }
.scroll-progress__bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--rose),var(--gold)); transition:width .1s linear; }

/* ===================== NAV ===================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:400;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  mix-blend-mode:normal;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-nav.is-scrolled{
  background:rgba(251,248,242,.86);
  backdrop-filter:blur(10px);
  padding:14px 40px;
  box-shadow:0 1px 0 var(--hairline);
}
.site-nav__mark{
  font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:.04em;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:color .35s ease, text-shadow .35s ease;
}
.site-nav.is-scrolled .site-nav__mark{ color:var(--ink); text-shadow:none; }
.site-nav__links{
  display:flex; gap:36px; list-style:none; margin:0; padding:0;
}
.site-nav__links a{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.9);
  text-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:color .35s ease, text-shadow .35s ease;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
}
.site-nav.is-scrolled .site-nav__links a{ color:var(--body); text-shadow:none; }
.site-nav__links a:hover{ border-color:currentColor; }
.site-nav__toggle{ display:none; }

/* ===================== HERO / ENVELOPE ===================== */
.hero-pin{
  height:260vh;
  position:relative;
}
.hero-stage{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(20,28,18,.62), rgba(16,22,14,.86)),
    url('../assets/venue/banquet-hall.webp') center 60% / cover no-repeat;
}
.hero-stage__glow{
  position:absolute; inset:0;
  background:radial-gradient(closest-side, rgba(233,205,163,.16), transparent 70%);
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.hero-stage.is-glowing .hero-stage__glow{ opacity:1; }

.hero-stage__kicker{
  position:absolute; top:14%; left:50%; transform:translate(-50%,10px);
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(16px,2vw,20px);
  letter-spacing:.06em;
  color:#D9C79E;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}
.hero-stage__kicker.is-visible{ opacity:1; transform:translate(-50%,0); }

.envelope{
  position:absolute;
  top:54%;
  left:50%;
  width:min(86vw,680px);
  margin-left:calc(min(86vw,680px) / -2);
  margin-top:calc(min(86vw,680px) / -2);
  aspect-ratio:1/1;
}

@media (min-width:1200px){
  .envelope{
    width:min(40vw,720px);
    margin-left:calc(min(40vw,720px) / -2);
    margin-top:calc(min(40vw,720px) / -2);
  }
}
.envelope__frame{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  will-change:opacity;
}
.envelope__frame.is-active{ opacity:1; }

.invite-card{
  position:absolute;
  top:92px;
  left:50%;
  height:calc(100vh - 92px - 14px);
  width:auto;
  max-width:96vw;
  border-radius:6px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  opacity:0;
  transform-origin:top center;
  transform:translateX(-50%) scale(.82);
  will-change:opacity, transform;
}

@media (min-width:1200px){
  .invite-card{ max-width:52vw; }
}

.hero-stage__cue{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.7);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  transition:opacity .4s ease;
}
.cue-dot{ animation:cueScroll 1.6s ease-in-out infinite; }
@keyframes cueScroll{
  0%{ transform:translateY(0); opacity:1; }
  60%{ transform:translateY(8px); opacity:0; }
  61%{ transform:translateY(0); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}

/* ===================== DATE SECTION ===================== */
.section-title--date{
  font-size:clamp(20px,2.3vw,28px);
  font-weight:600;
  max-width:480px;
  margin-bottom:0;
}
.date-heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.date-hero__month{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.date-hero__month-label{
  font-family:var(--font-hand); font-weight:700;
  text-transform:uppercase;
  font-size:clamp(40px,5.2vw,76px); color:var(--marker-red); line-height:1;
}
.date-hero__year{ font-size:14px; letter-spacing:.2em; color:var(--muted); margin-top:8px; }

.week-strip{
  display:flex; gap:10px;
  max-width:1120px;
  padding:32px;
  margin:150px auto;
}
.week-strip__day{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:14px 4px;
  border-radius:var(--radius-md);
}
.week-strip__day .dow{ font-size:13px; letter-spacing:.05em; color:var(--muted); }
.week-strip__day .dom{ font-family:var(--font-hand); font-weight:700; font-size:52px; color:var(--ink); line-height:1; }
.week-strip__day--active{ background:transparent; }
.dom-slot{
  height:90px;
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
}
.dom-heart{ position:relative; width:320px; height:288px; flex-shrink:0; transform:translateY(-15px); }
.dom-heart__svg{
  position:absolute; top:0; left:0; width:100%; height:100%;
  fill:none; stroke:var(--marker-red); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round;
  transform:rotate(-2deg);
}
.dom-circle{
  font-family:var(--font-hand); font-weight:700; font-size:72px; color:var(--marker-red);
  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
}

.info-note{
  margin-top:36px;
  display:flex; gap:16px;
  background:var(--surface-soft);
  border-radius:var(--radius-md);
  padding:24px 28px;
  color:var(--rose);
}
.info-note svg{ flex:none; margin-top:2px; }
.info-note strong{ color:var(--ink); display:block; margin-bottom:6px; font-weight:600; }
.info-note p{ color:var(--body); font-size:14.5px; }

/* ===================== PROGRAM / TIMELINE ===================== */
.program-list{
  display:flex;
  flex-direction:column;
  gap:72px;
  margin-top:56px;
}
.program-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.program-row--reverse .program-row__media{ order:2; }
.program-row--reverse .program-row__content{ order:1; }
.program-row__media img{
  width:100%; height:180px; object-fit:cover; object-position:center;
  border-radius:var(--radius-lg);
  display:block;
  box-shadow:var(--shadow-soft);
}
.program-row__time{
  font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--rose);
  display:block; margin-bottom:10px;
}
.program-row__content h3{ color:var(--ink); font-size:clamp(24px,2.6vw,32px); margin-bottom:14px; }
.program-row__content p{ color:var(--body); font-size:16px; line-height:1.7; }

/* ===================== DRESS CODE ===================== */
.dresscode-collage{
  position:relative;
  padding:190px 0 220px;
}
.dresscode-card{
  position:relative; z-index:5;
  background:#F4DCE0;
  border-radius:var(--radius-lg);
  box-shadow:0 30px 60px rgba(30,25,10,.25);
  padding:56px 64px;
  max-width:760px;
  margin:0 auto;
}
.dresscode-card__title{ color:var(--marker-red); margin-bottom:16px; }
.dresscode-card__lead{ color:var(--body); max-width:520px; }

.dresscode-photo{
  position:absolute;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 14px 26px rgba(30,25,10,.22);
}
.dresscode-photo img{ display:block; width:100%; height:auto; }

@media (max-width:1100px){
  .dresscode-collage{ padding:0; }
  .dresscode-photo{ display:none; }
}

.palette{
  display:flex; gap:16px; flex-wrap:wrap;
  margin-bottom:56px;
}
.palette__swatch{
  width:112px; height:112px;
  border-radius:var(--radius-md);
  background:var(--sw);
  box-shadow:var(--shadow-card);
  position:relative;
  transition:transform .3s ease;
}
.palette__swatch:hover{ transform:translateY(-4px); }
.palette__swatch span{
  position:absolute; top:100%; left:0; right:0;
  margin-top:10px;
  font-size:11px; letter-spacing:.04em; color:var(--marker-red);
  text-align:center;
}
.dresscode-note{
  background:var(--surface-soft);
  border-radius:var(--radius-md);
  padding:22px 26px;
  max-width:560px;
}
.dresscode-note strong{ color:var(--ink); }
.dresscode-note p{ font-size:14.5px; }

/* ===================== DETAILS GRID ===================== */
.details-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.detail-card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  padding:34px;
  transition:box-shadow .3s ease, transform .3s ease;
}
.detail-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-3px); }
.detail-card__icon{ color:var(--rose); font-size:20px; display:block; margin-bottom:16px; }
.detail-card h3{ font-size:20px; margin-bottom:10px; }
.detail-card p{ font-size:14.5px; }

/* ===================== PLACE / MAP ===================== */
.place-layout{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:24px;
}
.place-map{
  height:420px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.place-facts{
  display:flex; flex-direction:column; gap:20px;
  background:var(--surface-soft);
  border-radius:var(--radius-lg);
  padding:32px;
}
.place-fact h4{ font-size:16px; color:var(--ink); margin-bottom:4px; font-family:var(--font-body); letter-spacing:.02em; }
.place-fact p{ font-size:14px; color:var(--muted); }
.place-facts .btn{ margin-top:auto; }

/* ===================== GALLERY ===================== */
.gallery-section{ padding-top:0; padding-bottom:0; }
.gallery{ position:relative; }
.gallery__track{
  display:flex; gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:0 32px 8px;
  scrollbar-width:none;
}
.gallery__track::-webkit-scrollbar{ display:none; }
.gallery__track img{
  scroll-snap-align:center;
  width:min(78vw,420px); height:min(78vw,420px);
  object-fit:cover;
  border-radius:var(--radius-md);
  flex:none;
}
.gallery__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--surface); border:1px solid var(--hairline);
  box-shadow:var(--shadow-card);
  font-size:22px; color:var(--ink);
  cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.gallery__nav--prev{ left:12px; }
.gallery__nav--next{ right:12px; }

/* ===================== COUNTDOWN ===================== */
.countdown-section{ text-align:center; padding:calc(var(--section-pad)*2) 0; }
.countdown-label{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin-bottom:28px;
}
.countdown{
  display:flex; justify-content:center; align-items:flex-end; flex-wrap:wrap;
}
.countdown__cell{
  padding:0 30px; text-align:center; position:relative;
}
.countdown__cell + .countdown__cell::before{
  content:""; position:absolute; left:0; top:6px; bottom:20px; width:1px; background:var(--hairline);
}
.countdown__num{ display:inline-block; font-family:var(--font-hand); font-weight:600; font-size:clamp(34px,5vw,54px); color:var(--marker-red); line-height:1; }
.countdown__unit{ display:inline-block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-left:8px; }

/* ===================== RSVP ===================== */
.rsvp-form{
  display:flex; flex-direction:column; gap:22px;
  background:var(--surface-soft);
  border-radius:var(--radius-lg);
  padding:48px 44px;
}
.field{ display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--muted); letter-spacing:.02em; }
.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea{
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  resize:vertical;
  transition:border-color .25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-color:var(--sage); }
.field__hint{ font-size:12px; color:var(--muted); font-weight:400; }
.field--choice{ border:none; padding:0; margin:0; }
.field--choice legend{ padding:0; margin-bottom:10px; font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
.choice-row{ display:flex; gap:12px; flex-wrap:wrap; }
.checkbox-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 24px;
}
.checkbox-item{
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--body);
  cursor:pointer;
}
.checkbox-item input{ accent-color:var(--sage); width:16px; height:16px; }
.choice{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-full);
  padding:12px 16px;
  cursor:pointer;
  background:var(--surface);
  font-size:14px;
  color:var(--body);
  transition:border-color .2s ease, background .2s ease;
}
.choice input{ accent-color:var(--sage); }
.choice:has(input:checked){ border-color:var(--sage); background:#fff; color:var(--ink); }
.form-note{ font-size:13px; color:var(--sage); min-height:18px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .details-grid{ grid-template-columns:1fr; }
  .place-layout{ grid-template-columns:1fr; }
  .place-map{ height:320px; }

}

@media (max-width:720px){
  :root{ --section-pad:72px; }
  .site-nav{ padding:18px 20px; }
  .site-nav__links{
    position:fixed; top:0; right:-100%; height:100vh; width:78vw; max-width:320px;
    background:var(--surface); flex-direction:column; gap:0;
    padding:100px 32px; box-shadow:-10px 0 40px rgba(0,0,0,.12);
    transition:right .4s ease;
  }
  .site-nav__links.is-open{ right:0; }
  .site-nav__links a{ color:var(--ink) !important; padding:14px 0; border-bottom:1px solid var(--hairline) !important; width:100%; }
  .site-nav__toggle{
    display:flex; flex-direction:column; gap:5px; width:32px; height:24px;
    background:none; border:none; cursor:pointer; z-index:401; padding:0;
  }
  .site-nav__toggle span{ height:1.5px; background:#fff; border-radius:2px; transition:background .3s ease; }
  .site-nav.is-scrolled .site-nav__toggle span{ background:var(--ink); }

  .container{ padding:0 22px; }
  .date-heading-row{ flex-direction:column; align-items:flex-start; gap:16px; }

  .date-hero__month{ flex-direction:row; align-items:baseline; gap:12px; align-self:flex-start; }
  .week-strip{ gap:4px; min-width:0; padding:20px 22px; margin:32px auto; }
  .week-strip__day{ min-width:0; padding:10px 2px; }
  .week-strip__day .dow{ font-size:10px; }
  .week-strip__day .dom{ font-size:30px; }
  .dom-slot{ height:44px; }
  .dom-heart{ width:176px; height:158px; }
  .dom-heart__svg{ stroke-width:5; }
  .dom-circle{ font-size:40px; }
  .program-list{ gap:44px; margin-top:36px; }
  .program-row{ grid-template-columns:1fr; gap:20px; }
  .program-row--reverse .program-row__media{ order:0; }
  .program-row--reverse .program-row__content{ order:0; }
  .program-row__media img{ height:150px; }
  .countdown__cell{ padding:0 12px; }
  .countdown__unit{ font-size:9.5px; margin-left:5px; }
  .rsvp-form{ padding:32px 22px; }
}