/* ============================================================
   Claire & Evan — Wedding Website
   Visual language carried over from the printed invitation.
   ============================================================ */

:root{
  --cream:        #FBF5EC;
  --cream-deep:   #F4EADB;
  --paper:        #FCF8F1;
  --coral:        #D98A66;
  --terra:        #C36B47;
  --terra-deep:   #A9532F;
  --ink:          #5E4A3C;
  --ink-soft:     #806655;
  --ink-mute:     #9C8473;
  --gold:         #C5A05E;
  --line:         #D8C4AB;
  --line-soft:    #E7D8C2;

  --script: "Pinyon Script", cursive;
  --serif:  "Cormorant Garamond", Georgia, serif;

  --wrap: 1120px;
  --pad: clamp(22px, 5vw, 40px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); }
.wrap-narrow{ max-width:760px; }

/* ---------- shared type ---------- */
.eyebrow{
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500;
}
.script{
  font-family:var(--script);
  color:var(--terra-deep);
  line-height:1.05;
  font-weight:400;
}
.section-title{
  font-size:clamp(34px,5.2vw,60px);
  font-weight:500; color:var(--ink);
  line-height:1.08; letter-spacing:.005em;
}
.lead{
  font-size:clamp(18px,2vw,22px);
  line-height:1.7; color:var(--ink-soft); font-weight:400;
  text-wrap:pretty;
}
.lead.italic{ font-style:italic; }

/* diamond divider */
.divider{
  display:flex; align-items:center; justify-content:center; gap:18px;
  width:min(360px,70%); margin-inline:auto;
}
.divider .rule{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.divider .dia{ width:13px; height:13px; flex:none; transform:rotate(45deg);
  border:1px solid var(--gold); position:relative; }
.divider .dia::after{ content:""; position:absolute; inset:3px; background:var(--terra); }

/* section frame */
.section{ position:relative; padding-block:clamp(72px,11vh,150px); }
.section-head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:clamp(40px,6vh,72px); }
.section-head .eyebrow{ order:-1; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad);
  background:rgba(251,245,236,.94);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 var(--line-soft);
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.scrolled{
  padding-block:10px;
}
/* transparent, light nav while resting over the hero photograph */
.nav.at-top{
  background:transparent; box-shadow:none; backdrop-filter:none;
}
.nav.at-top .brand{ color:#FFF7EE; text-shadow:0 1px 16px rgba(28,18,12,.5); }
.nav.at-top .links a{ color:rgba(255,247,237,.9); text-shadow:0 1px 14px rgba(28,18,12,.55); }
.nav.at-top .links a:hover{ color:#fff; }
.nav.at-top .links a::after{ background:#FFF7EE; }
.nav.at-top .rsvp{
  color:#FFF7EE; background:transparent; border-color:rgba(255,247,237,.7);
}
.nav.at-top .rsvp:hover{ background:rgba(255,247,237,.16); border-color:#FFF7EE; }
.nav.at-top .menu-btn{ color:#FFF7EE; }
.nav .brand{
  font-family:var(--script); font-size:25px; color:var(--terra); white-space:nowrap;
  line-height:1; text-decoration:none; transition:color .3s ease, text-shadow .3s ease;
}
.nav .links{ display:flex; align-items:center; gap:24px; }
.nav .links a{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; position:relative;
  transition:color .25s ease, text-shadow .3s ease; padding-block:4px;
}
.nav .links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--terra); transform:scaleX(0); transform-origin:center;
  transition:transform .28s ease, background .3s ease;
}
.nav .links a:hover{ color:var(--terra-deep); }
.nav .links a:hover::after{ transform:scaleX(1); }
.nav .rsvp{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:var(--terra); border:1px solid var(--terra);
  padding:10px 20px; border-radius:2px; text-decoration:none;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.nav .rsvp:hover{ background:var(--terra-deep); border-color:var(--terra-deep); }
.nav .menu-btn{ display:none; background:none; border:none; cursor:pointer;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }

@media (max-width:1024px){
  .nav .links{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  padding:0 var(--pad) clamp(48px,8vh,92px);
  background:#2a211b;
  overflow:hidden; isolation:isolate;
}
/* full-bleed photograph */
.hero-photo{
  position:absolute; inset:0; z-index:-2; overflow:hidden; background:#33271e;
}
.hero-photo picture{ display:block; width:100%; height:100%; }
/* WebP fallback wrappers: let the inner <img> keep its original layout rules */
.split-media picture, .band picture, .footer-photo picture{ display:contents; }
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){ .hero-photo img{ animation:none; } }
@keyframes heroDrift{ from{ transform:scale(1.04); } to{ transform:scale(1.11); } }

/* ---------- hero: mobile & short-landscape refinements ---------- */
/* the slow zoom can read as "still loading" on phones — hold it steady on touch */
@media (hover:none) and (pointer:coarse){
  .hero-photo img{ animation:none; transform:scale(1.02); }
}
@media (max-width:768px){
  .hero-photo img{ object-position:center 45%; }
  /* the vertical hero's lower third is a pale dress — deepen the wash so cream type stays legible */
  .hero-scrim{
    background:linear-gradient(to bottom,
      rgba(40,30,22,.34) 0%,
      rgba(40,30,22,.05) 14%,
      rgba(40,30,22,0) 30%,
      rgba(36,26,18,.36) 54%,
      rgba(30,21,14,.68) 78%,
      rgba(26,18,12,.84) 100%);
  }
}
/* phones held sideways: size the hero to its content beneath the fixed nav */
@media (orientation:landscape) and (max-height:560px){
  .hero{ min-height:auto; padding-top:clamp(84px,16vh,104px); padding-bottom:clamp(34px,8vh,54px); }
  .hero .names{ font-size:clamp(44px,9vw,72px); }
  .hero-inner{ gap:clamp(8px,1.4vh,16px); }
  .countdown{ margin-top:10px; }
}

/* legibility wash: gentle at the crown for the nav, deeper at the base for the type */
.hero-scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(40,30,22,.34) 0%,
      rgba(40,30,22,.05) 16%,
      rgba(40,30,22,0) 38%,
      rgba(38,27,19,.20) 62%,
      rgba(34,24,17,.62) 90%,
      rgba(32,22,15,.74) 100%);
}

.hero-inner{
  position:relative; z-index:2; width:100%; max-width:1000px;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,1.9vh,20px);
}
.hero .eyebrow{
  color:rgba(255,247,237,.92); white-space:nowrap;
  text-shadow:0 1px 18px rgba(30,20,14,.55);
}
.hero .names{
  font-family:var(--script); color:#FFF7EE;
  font-size:clamp(56px,11vw,148px); line-height:.98; font-weight:400;
  white-space:nowrap; letter-spacing:.005em;
  text-shadow:0 2px 36px rgba(28,18,12,.5), 0 1px 3px rgba(28,18,12,.35);
}
.hero .names .amp{ font-size:.5em; color:#EFC79A; margin:0 .02em; font-style:italic; }
.hero .vow{
  font-style:italic; font-size:clamp(19px,2.2vw,27px);
  color:rgba(255,247,237,.95); letter-spacing:.01em; margin-top:-.15em;
  text-shadow:0 1px 22px rgba(30,20,14,.55);
}
.hero-meta{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(10px,1.4vw,18px); margin-top:clamp(4px,1vh,10px);
  font-size:clamp(12px,1.35vw,15px); letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,247,237,.9); font-weight:500;
  text-shadow:0 1px 16px rgba(30,20,14,.6);
}
.hero-meta .meta-dot{ width:5px; height:5px; flex:none; border-radius:50%; background:#EFC79A; }
.hero-meta .where{ font-style:normal; }

.scroll-cue{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center;
}
.scroll-cue .stem{ width:1px; height:42px; background:linear-gradient(rgba(255,247,237,.85),transparent); transform-origin:top; animation:cue 2.4s ease-in-out infinite; }
@media (max-height:820px){ .scroll-cue{ display:none; } }
@keyframes cue{ 0%,100%{ transform:scaleY(.55); opacity:.45; } 50%{ transform:scaleY(1); opacity:1; } }

.countdown{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(16px,3vw,38px); margin-top:clamp(14px,2.4vh,28px);
}
.countdown .unit{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.countdown .num{ font-family:var(--serif); font-size:clamp(30px,4.2vw,50px); color:#FFF7EE; line-height:1; font-weight:500; text-shadow:0 2px 26px rgba(28,18,12,.5); }
.countdown .lab{ font-size:clamp(10px,1vw,12px); letter-spacing:.28em; text-transform:uppercase; color:rgba(255,247,237,.78); }
.countdown .cd-sep{ width:1px; height:34px; background:rgba(255,247,237,.32); align-self:center; }

/* ============================================================
   WELCOME (two column)
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; }
.split.flip .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ width:100%; height:100%; object-fit:cover; border-radius:3px;
  box-shadow:0 22px 50px -24px rgba(94,74,60,.55); }
.split-media.framed{ padding:14px; background:var(--paper); box-shadow:0 22px 54px -26px rgba(94,74,60,.5); border-radius:3px; }
.split-media.framed::before{ content:""; position:absolute; inset:22px; border:1px solid rgba(197,160,94,.5); border-radius:2px; z-index:2; pointer-events:none; }
.split-media.framed img{ box-shadow:none; }
.split-media .arch-tag{ position:absolute; }
.split-body{ display:flex; flex-direction:column; gap:24px; }
.split-body .script-head{ font-family:var(--script); color:var(--terra-deep); font-size:clamp(40px,6vw,72px); line-height:1; }
.sprig{ pointer-events:none; }

@media (max-width:780px){
  .split{ grid-template-columns:1fr; gap:36px; }
  .split.flip .split-media{ order:0; }
  .split-media img{ max-height:74vh; }
}

/* ============================================================
   FULL-BLEED PHOTO BANDS
   ============================================================ */
.band{ position:relative; height:clamp(360px,72vh,720px); overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; }
.band .overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(60,44,34,.05),rgba(60,44,34,.34)); display:flex; align-items:center; justify-content:center; text-align:center; }
.band .quote{ color:#FCF8F1; max-width:780px; padding:0 24px; }
.band .quote .script{ color:#fff; font-size:clamp(40px,7vw,88px); text-shadow:0 2px 24px rgba(60,44,34,.4); }
.band .quote .sub{ font-style:italic; font-size:clamp(16px,2vw,21px); letter-spacing:.04em; margin-top:8px; text-shadow:0 1px 16px rgba(60,44,34,.5); }

/* ============================================================
   DETAILS cards
   ============================================================ */
.detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); }
.detail-card{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:3px;
  padding:clamp(28px,3.4vw,42px) clamp(24px,3vw,34px);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 16px 40px -30px rgba(94,74,60,.5); position:relative;
}
.detail-card .ico{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; }
.detail-card .ico svg{ width:100%; height:100%; }
.detail-card h3{ font-size:clamp(22px,2.4vw,28px); font-weight:500; color:var(--terra-deep); letter-spacing:.01em; }
.detail-card p{ font-size:clamp(16px,1.7vw,18px); line-height:1.62; color:var(--ink-soft); }
.detail-card .big{ font-family:var(--script); font-size:38px; color:var(--terra); line-height:1; }
@media (max-width:820px){ .detail-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{ max-width:720px; margin-inline:auto; position:relative; }
.timeline::before{ content:""; position:absolute; left:calc(50% - .5px); top:8px; bottom:8px; width:1px; background:linear-gradient(var(--line-soft),var(--line),var(--line-soft)); }
.tl-row{ display:grid; grid-template-columns:1fr 40px 1fr; align-items:center; gap:0; padding-block:clamp(14px,2vh,22px); }
.tl-time{ text-align:right; padding-right:26px; font-size:clamp(15px,1.7vw,19px); letter-spacing:.16em; text-transform:uppercase; color:var(--terra-deep); font-weight:600; }
.tl-node{ display:flex; align-items:center; justify-content:center; }
.tl-node .dia{ width:13px; height:13px; transform:rotate(45deg); border:1px solid var(--gold); background:var(--cream); position:relative; }
.tl-node .dia::after{ content:""; position:absolute; inset:3px; background:var(--terra); }
.tl-event{ padding-left:26px; font-size:clamp(17px,1.9vw,21px); color:var(--ink); line-height:1.4; }
.tl-event small{ display:block; font-size:.78em; color:var(--ink-mute); font-style:italic; letter-spacing:.01em; margin-top:2px; }
.tl-note{ text-align:center; margin-bottom:clamp(34px,5vh,54px); }
@media (max-width:620px){
  .timeline::before{ left:7px; }
  .tl-row{ grid-template-columns:16px 1fr; gap:0 18px; }
  .tl-time{ grid-column:2; text-align:left; padding:0 0 4px; }
  .tl-node{ grid-row:1 / span 2; grid-column:1; align-items:flex-start; padding-top:4px; }
  .tl-event{ grid-column:2; padding-left:0; }
}

/* ============================================================
   FOOD & DRINK
   ============================================================ */
.menu{ max-width:640px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; gap:34px; }
.menu .course{ }
.menu .course .label{ font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px; }
.menu .course .dish{ font-family:var(--script); font-size:clamp(30px,4vw,46px); color:var(--terra-deep); line-height:1.16; }
.menu .course .by{ font-style:italic; color:var(--ink-soft); font-size:clamp(15px,1.7vw,18px); margin-top:6px; }
.menu .note{ font-size:clamp(16px,1.7vw,18px); color:var(--ink-soft); line-height:1.66; font-style:italic; }

/* ============================================================
   DRESS CODE
   ============================================================ */
.dress{ text-align:center; }
.swatches{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:8px 0 4px; }
.swatches .sw{ width:30px; height:30px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 4px 12px -6px rgba(94,74,60,.4); }
.attire{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(28px,5vw,72px); margin-top:14px; }
.attire .col{ }
.attire .col .k{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px; }
.attire .col .v{ font-size:clamp(20px,2.4vw,26px); color:var(--terra-deep); font-weight:500; }
.dress .avoid{ font-style:italic; color:var(--ink-soft); font-size:clamp(16px,1.7vw,19px); max-width:560px; margin:30px auto 0; line-height:1.6; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:760px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq details:first-of-type{ border-top:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 4px; position:relative;
  font-size:clamp(19px,2.2vw,24px); color:var(--ink); font-weight:500; letter-spacing:.005em;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--terra-deep); }
.faq summary .pm{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:18px; height:18px; }
.faq summary .pm::before,.faq summary .pm::after{ content:""; position:absolute; background:var(--terra); transition:transform .26s ease, opacity .26s ease; }
.faq summary .pm::before{ left:0; right:0; top:calc(50% - .5px); height:1px; }
.faq summary .pm::after{ top:0; bottom:0; left:calc(50% - .5px); width:1px; }
.faq details[open] summary .pm::after{ transform:scaleY(0); opacity:0; }
.faq details .ans{ padding:0 44px 26px 4px; font-size:clamp(16px,1.8vw,19px); line-height:1.66; color:var(--ink-soft); }
.faq details[open] summary{ color:var(--terra-deep); }

/* ============================================================
   REGISTRY
   ============================================================ */
.reg-grid{ --rg-gap:clamp(18px,2.4vw,28px); display:flex; flex-direction:column; gap:var(--rg-gap); margin-top:8px; }
.reg-small{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--rg-gap); }
.reg-small .reg-card{ flex:0 1 calc((100% - 2*var(--rg-gap)) / 3); min-width:248px; }
.reg-card{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:3px;
  padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,30px);
  display:flex; flex-direction:column; gap:12px; position:relative;
  box-shadow:0 16px 40px -30px rgba(94,74,60,.5);
}
.reg-card.feature{ text-align:center; align-items:center; background:var(--cream-deep); border-color:var(--line); overflow:hidden; }
.reg-card.feature > h3,
.reg-card.feature > p,
.reg-card.feature > .btn{ position:relative; z-index:2; }
.plane-trail{ position:absolute; top:8px; right:10px; width:min(264px,40%); height:auto; z-index:1; pointer-events:none; }
.plane-trail .trail{ fill:none; stroke:url(#trailFade); stroke-width:2; stroke-dasharray:1.5 8; stroke-linecap:round; }
.plane-trail .plane{ opacity:.95; }
.plane-trail .p3d{ fill:none; stroke:var(--terra-deep); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.reg-card h3{ font-size:clamp(21px,2.3vw,26px); font-weight:500; color:var(--terra-deep); }
.reg-card.feature h3{ font-family:var(--script); font-size:clamp(34px,4.4vw,52px); line-height:1.22; padding-bottom:.1em; margin-bottom:.4em; }
.reg-card p{ font-size:clamp(15px,1.6vw,17px); line-height:1.6; color:var(--ink-soft); }
.reg-card.feature p{ max-width:620px; font-size:clamp(16px,1.8vw,19px); }
.btn-line{
  align-self:flex-start; margin-top:6px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra-deep); text-decoration:none; border-bottom:1px solid var(--gold);
  padding-bottom:3px; transition:color .2s ease, border-color .2s ease;
}
.reg-card.feature .btn{
  align-self:center; margin-top:8px;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#fff; white-space:nowrap;
  background:var(--terra); padding:13px 30px; border-radius:2px; text-decoration:none;
  transition:background .25s ease;
}
.reg-card.feature .btn:hover{ background:var(--terra-deep); }
.btn-line:hover{ color:var(--terra); border-color:var(--terra); }
@media (max-width:860px){ .reg-small .reg-card{ flex-basis:calc((100% - var(--rg-gap)) / 2); } }
@media (max-width:560px){ .reg-small .reg-card{ flex-basis:100%; } }

/* ============================================================
   CLOSING / PHOTO FOOTER
   ============================================================ */
.footer-photo{
  position:relative; min-height:clamp(640px,94vh,920px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center; padding:clamp(80px,14vh,150px) var(--pad) clamp(54px,9vh,96px);
  background:#241a13; overflow:hidden; isolation:isolate;
}
.footer-bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.footer-scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(34,24,17,.32) 0%,
    rgba(34,24,17,.06) 22%,
    rgba(34,24,17,.20) 50%,
    rgba(32,22,15,.60) 82%,
    rgba(28,19,12,.80) 100%);
}
.footer-inner{
  position:relative; z-index:2; width:100%; max-width:780px;
  display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2.4vh,28px);
}
.footer-mono{ font-family:var(--script); font-size:clamp(34px,5vw,58px); color:#EFC79A; line-height:1; text-shadow:0 2px 24px rgba(20,12,6,.55); }
.footer-script{ font-family:var(--script); color:#FFF7EE; font-size:clamp(44px,7.5vw,104px); line-height:1.02; text-shadow:0 2px 32px rgba(20,12,6,.55),0 1px 3px rgba(20,12,6,.4); }
.footer-rsvp{
  margin-top:8px; font-family:var(--serif); font-size:clamp(13px,1.4vw,15px);
  letter-spacing:.24em; text-transform:uppercase; color:#3a2a20; white-space:nowrap;
  background:#FFF7EE; padding:17px 46px; border-radius:2px; text-decoration:none;
  box-shadow:0 18px 50px -20px rgba(15,9,4,.7);
  transition:background .25s ease, transform .25s ease;
}
.footer-rsvp:hover{ background:#fff; transform:translateY(-2px); }
.footer-photo .footer-rule{ width:200px; margin-top:6px; }
.footer-photo .footer-rule .rule{ background:linear-gradient(90deg,transparent,rgba(255,247,237,.6),transparent); }
.footer-photo .footer-rule .dia{ border-color:rgba(239,199,154,.9); }
.footer-photo .footer-rule .dia::after{ background:#EFC79A; }
.footer-web{ font-size:clamp(13px,1.3vw,15px); letter-spacing:.24em; text-transform:uppercase; color:#FFF7EE; font-weight:600; text-shadow:0 1px 16px rgba(20,12,6,.6); }
.footer-credit{ font-size:clamp(11px,1.1vw,13px); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,247,237,.78); text-shadow:0 1px 14px rgba(20,12,6,.6); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ============================================================
   RSVP MODAL
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:flex-start; justify-content:center; padding:24px; overflow-y:auto;
  background:rgba(58,42,32,.46); backdrop-filter:blur(6px) saturate(130%);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-card{
  position:relative; width:100%; max-width:520px; margin:auto;
  background:var(--paper); border-radius:4px; border:1px solid var(--line-soft);
  padding:clamp(30px,4.5vw,46px) clamp(24px,4.5vw,46px);
  box-shadow:0 40px 90px -30px rgba(58,42,32,.6);
  transform:translateY(18px) scale(.985); transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.modal-overlay.open .modal-card{ transform:none; }
.modal-card::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(197,160,94,.4); border-radius:3px; pointer-events:none; }
.modal-close{
  position:absolute; top:12px; right:14px; z-index:3;
  width:34px; height:34px; border:none; background:none; cursor:pointer;
  font-size:27px; line-height:1; color:var(--ink-mute); transition:color .2s ease;
}
.modal-close:hover{ color:var(--terra-deep); }
.modal-head{ text-align:center; display:flex; flex-direction:column; gap:8px; margin-bottom:26px; position:relative; }
.modal-title{ font-size:clamp(34px,6vw,48px); line-height:1.05; }
.modal-sub{ font-style:italic; color:var(--ink-soft); font-size:15px; letter-spacing:.01em; }
.rsvp-form{ display:flex; flex-direction:column; gap:17px; position:relative; }
.field{ display:flex; flex-direction:column; gap:7px; }
.flabel{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); }
.flabel em{ font-style:italic; text-transform:none; letter-spacing:.01em; font-size:12px; }
.rsvp-form input, .rsvp-form textarea{
  font-family:var(--serif); font-size:17px; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:2px;
  padding:11px 13px; width:100%; resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.rsvp-form input::placeholder, .rsvp-form textarea::placeholder{ color:var(--ink-mute); opacity:.7; }
.rsvp-form input:focus, .rsvp-form textarea:focus{
  outline:none; border-color:var(--terra); box-shadow:0 0 0 3px rgba(195,107,71,.12);
}
.check{ display:flex; align-items:center; gap:12px; cursor:pointer; padding:4px 0 2px; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{ flex:none; width:22px; height:22px; border:1px solid var(--line); border-radius:3px; background:var(--cream); position:relative; transition:background .2s, border-color .2s; }
.check .box::after{ content:""; position:absolute; left:50%; top:46%; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg) scale(0); transform-origin:center; transition:transform .2s ease; }
.check input:checked + .box{ background:var(--terra); border-color:var(--terra); }
.check input:checked + .box::after{ transform:translate(-50%,-50%) rotate(45deg) scale(1); }
.check input:focus-visible + .box{ box-shadow:0 0 0 3px rgba(195,107,71,.18); }
.check .ctext{ font-size:16px; color:var(--ink); }
.fgroup{ display:flex; flex-direction:column; gap:10px; }
.fgroup > .flabel{ margin-bottom:2px; }
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; }
.check .gtime{ color:var(--ink-mute); font-style:italic; font-size:13px; margin-left:8px; }
.submit-btn{
  margin-top:6px; font-family:var(--serif);
  font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:#fff;
  background:var(--terra); border:1px solid var(--terra); border-radius:2px;
  padding:14px 20px; cursor:pointer; transition:background .25s ease, border-color .25s ease;
}
.submit-btn:hover{ background:var(--terra-deep); border-color:var(--terra-deep); }
.rsvp-thanks{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 0 8px; }
.rsvp-thanks .thanks-mark{ width:54px; height:54px; }
.rsvp-thanks .thanks-mark svg{ width:100%; height:100%; }
.rsvp-thanks h3{ font-family:var(--script); font-size:48px; color:var(--terra-deep); line-height:1; }
.rsvp-thanks p{ font-size:17px; color:var(--ink-soft); line-height:1.62; max-width:360px; }