/* ============================================================
   Sabrina & Carl — 24 October 2026
   Palette and typography follow the printed invitation suite.
   ============================================================ */

:root{
  --brown:        #6b4423;
  --brown-deep:   #4a2f18;
  --brown-soft:   #8a6642;
  --gold:         #b08c5a;
  --cream:        #faf5ee;
  --cream-deep:   #f3e9dc;
  --paper:        #ffffff;
  --ink:          #3d2c1d;
  --ink-soft:     #6f5c4a;
  --line:         rgba(107,68,35,.18);

  --serif:  "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --script: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  --sans:   "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --shadow: 0 18px 50px -28px rgba(74,47,24,.55);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5rem; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.05rem, .55vw + .95rem, 1.2rem);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--brown); text-decoration-color:var(--line); text-underline-offset:.25em; }
a:hover{ color:var(--brown-deep); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brown); color:#fff; padding:.75rem 1.25rem; font-family:var(--sans);
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

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

.section{ padding-block:clamp(4rem, 9vw, 7.5rem); position:relative; }
.section--cream{ background:var(--cream); }
.section--dark{ background:var(--brown-deep); color:var(--cream); }
.section--dark a{ color:var(--cream); }

.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--brown-soft); text-align:center; margin:0 0 .75rem;
}
.section--dark .eyebrow{ color:var(--gold); }

h2.script{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.9rem, 7vw, 4.6rem);
  color:var(--brown); text-align:center;
  margin:0 0 2.5rem; line-height:1.1;
}
.section--dark h2.script{ color:var(--cream); }

.subhead{
  font-family:var(--script); font-size:clamp(2rem,4vw,2.9rem);
  color:var(--brown); text-align:center; margin:4rem 0 2rem; font-weight:400;
}

.lede{
  text-align:center; max-width:62ch; margin-inline:auto; color:var(--ink-soft);
  font-size:1.1em;
}
.section--dark .lede{ color:rgba(250,245,238,.85); }
/* The sponsors dedication. One typeface (the serif used for body copy)
   throughout, distinguished only by size, so the four lines read as a single
   quoted passage rather than four unrelated styles. */
.dedication{ text-align:center; margin:0 auto 2.6rem; max-width:52rem; }
.dedication__eyebrow{
  font-family:var(--serif); font-size:clamp(.95rem,1.6vw,1.15rem);
  letter-spacing:.22em; text-transform:uppercase; color:var(--brown-soft);
  margin:0 0 .7rem; font-weight:600;
}
.dedication__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem,4vw,2.9rem); color:var(--brown);
  margin:0 0 .5rem; line-height:1.15; letter-spacing:.01em;
}
.dedication__lead{
  font-family:var(--serif); font-size:clamp(1.25rem,2.4vw,1.6rem);
  color:var(--brown-deep); margin:0 0 .45rem;
}
.dedication__creed{
  font-family:var(--serif); font-size:clamp(1.02rem,1.9vw,1.28rem);
  color:var(--brown-deep); margin:0; line-height:1.6;
}
/* The separators between the three promises. */
.dedication__creed i{ font-style:normal; color:var(--gold); padding:0 .35em; }
/* Each promise stays whole: on a narrow screen the line breaks at the asterisks
   rather than splitting a phrase across two lines. */
.dedication__creed b{ font-weight:inherit; white-space:nowrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--sans); font-size:.75rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  padding:.9rem 1.9rem; border:1px solid var(--brown); color:var(--brown);
  background:transparent; cursor:pointer; transition:background .25s, color .25s, border-color .25s;
}
.btn:hover{ background:var(--brown); color:#fff; }
.btn--solid{ background:var(--brown); color:#fff; }
.btn--solid:hover{ background:var(--brown-deep); border-color:var(--brown-deep); color:#fff; }
.btn--sm{ padding:.65rem 1.3rem; font-size:.68rem; }
.btn--full{ width:100%; text-align:center; }
.section--dark .btn{ border-color:var(--gold); color:var(--cream); }
.section--dark .btn--solid{ background:var(--gold); border-color:var(--gold); color:#2a1a0b; }
.section--dark .btn--solid:hover{ background:#c49d67; border-color:#c49d67; }

.linklike{
  background:none; border:0; padding:0; cursor:pointer; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:inherit; opacity:.7; text-decoration:underline; text-underline-offset:.3em;
}
.linklike:hover{ opacity:1; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(255,255,255,0);
  transition:background .3s, box-shadow .3s, padding .3s;
  padding-block:1.1rem;
}
.nav.is-stuck{
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -26px rgba(74,47,24,.5);
  padding-block:.6rem;
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__brand{
  font-family:var(--script); font-size:1.75rem; color:var(--brown);
  text-decoration:none; line-height:1;
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
}
.nav__brand-heart{ width:.85em; height:.85em; color:var(--gold); flex:none; }
.nav__brand-short{ display:none; }
/* The full "Sabrina ♥ Carl" lockup only fits alongside all eight menu items on
   wide screens; below that it shortens to S ♥ C so the menu never wraps. */
@media (max-width:1150px){
  .nav__brand-full{ display:none; }
  .nav__brand-short{ display:inline; }
}

.nav__menu{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem); }
.nav__menu a{
  font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  position:relative; padding-block:.35rem;
}
.nav__menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .3s;
}
.nav__menu a:hover::after, .nav__menu a.is-active::after{ right:0; }
.nav__cta{
  border:1px solid var(--brown); padding:.55rem 1.1rem !important; color:var(--brown) !important;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--brown); color:#fff !important; }

.nav__toggle{
  display:none; width:2.6rem; height:2.2rem; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:.32rem; padding:0;
}
.nav__toggle span{ display:block; height:1.5px; width:100%; background:var(--brown); transition:transform .3s, opacity .3s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(.47rem) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-.47rem) rotate(-45deg); }

@media (max-width:900px){
  .nav{ background:rgba(255,255,255,.96); box-shadow:0 1px 0 var(--line); }
  .nav__toggle{ display:flex; }
  .nav__menu{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; transition:max-height .35s ease;
    box-shadow:0 20px 40px -30px rgba(74,47,24,.6);
  }
  .nav__menu.is-open{ max-height:32rem; }
  .nav__menu a{ padding:1rem var(--pad); border-top:1px solid var(--line); text-align:center; }
  .nav__cta{ border:0; margin:0; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  /* "safe" centering: on short screens the content grows downward from the top
     instead of sliding up underneath the fixed nav. */
  display:grid; align-content:safe center; justify-items:center;
  padding:6rem var(--pad) 4rem; text-align:center;
  background:var(--cream);
}
/* Soft paper wash. The couple photo is not used here: the printed file has
   their names set into the artwork, which would double up the headline. */
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 50% 34%, #fffdfa 0%, rgba(255,253,250,0) 72%),
    radial-gradient(38% 30% at 88% 6%,  rgba(176,140,90,.13), rgba(176,140,90,0) 70%),
    radial-gradient(42% 34% at 8% 96%,  rgba(176,140,90,.12), rgba(176,140,90,0) 70%),
    linear-gradient(180deg, var(--cream-deep) 0%, var(--cream) 45%, var(--cream-deep) 100%);
}
.hero::after{
  content:""; position:absolute; inset:1.1rem; border:1px solid var(--line); pointer-events:none;
}
.hero__inner{ position:relative; max-width:min(56rem, 100%); }

.hero__eyebrow{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--brown-soft); margin:0 0 1.5rem;
}
.hero__names{
  font-family:var(--script); font-weight:400; color:var(--brown);
  font-size:clamp(3.3rem, 11vw, 6.6rem); line-height:1; margin:0;
  display:flex; flex-direction:column; align-items:center;
}
.hero__names em{ font-size:.42em; color:var(--gold); font-style:normal; margin-block:-.15em; }
.hero__rule{ color:var(--gold); display:flex; justify-content:center; margin:1.1rem 0; }

.hero__date{
  font-size:1.15em; letter-spacing:.04em; margin:0 0 .5rem; color:var(--ink);
}
.hero__place{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brown-soft); margin:0 0 2rem;
}

.countdown{
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(1rem,4vw,2.6rem);
  margin-bottom:2.1rem;
}
.countdown__unit{ display:flex; flex-direction:column; align-items:center; min-width:3.7rem; }
.countdown__num{
  font-size:clamp(1.8rem,4vw,2.7rem); line-height:1; color:var(--brown);
  font-variant-numeric:tabular-nums; font-weight:300;
}
.countdown__label{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brown-soft); margin-top:.5rem;
}

.hero__actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.hero__blessing{
  font-family:var(--script); font-size:1.6rem; color:var(--gold); margin:1.6rem 0 0;
}
/* Replaces the countdown on the wedding day itself (set from js/main.js).
   A class, not an inline style, so the CSP can forbid inline styles outright. */
.hero__blessing--today{ margin:0; }

.hero__scroll{
  position:absolute; bottom:1.9rem; left:50%; transform:translateX(-50%);
  width:1.6rem; height:2.6rem; border:1px solid var(--line); border-radius:1rem;
}
.hero__scroll span{
  position:absolute; left:50%; top:.5rem; width:2px; height:.45rem; margin-left:-1px;
  background:var(--brown-soft); border-radius:2px; animation:scrolldot 1.8s infinite;
}
@keyframes scrolldot{ 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 100%{opacity:0;transform:translateY(.9rem)} }

/* ---------- story ---------- */
.story{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem); align-items:center; margin-bottom:clamp(3rem,7vw,5.5rem);
}
.story__photo{ margin:0; }
/* The source PNGs are circular portraits sitting on a white square. Clipping a
   circle slightly inside the frame removes that white ring on cream sections;
   drop-shadow (not box-shadow) follows the clipped shape. */
.story__photo img{
  border-radius:50%; clip-path:circle(48%);
  filter:drop-shadow(0 18px 26px rgba(74,47,24,.28));
}
.story__text p{ margin:0 0 1.2rem; }
.story__sign{ font-family:var(--script); font-size:1.9rem; color:var(--brown); }

.couple{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3rem); }
.couple__card{ margin:0; text-align:center; }
.couple__card img{
  width:min(15rem,70%); margin-inline:auto; border-radius:50%;
  clip-path:circle(45%);
  filter:drop-shadow(0 12px 20px rgba(74,47,24,.3));
}
.couple__card h3{ font-size:2rem; color:var(--brown); margin:1.2rem 0 .2rem; font-weight:400; }
.couple__name{ margin:0; font-size:1.25em; }
.couple__meta{
  font-family:var(--sans); font-size:.82rem; letter-spacing:.06em;
  color:var(--ink-soft); margin:.55rem 0 0;
}
.couple__meta b{ font-weight:600; color:var(--brown-deep); }
/* Each of them has a motto under their name. */
.couple__motto{
  font-family:var(--script); font-size:1.75rem; color:var(--gold);
  margin:.35rem 0 0; line-height:1.2;
}
/* The officiant belongs to both of them, so it sits centred beneath the pair
   rather than under the groom alone. */
.officiant{
  text-align:center; margin:clamp(2rem,4vw,3rem) 0 0;
  font-family:var(--sans); font-size:.82rem; letter-spacing:.06em;
  color:var(--ink-soft);
}
.officiant b{ font-weight:600; color:var(--brown-deep); }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.5rem; }
.card{
  background:var(--paper); border:1px solid var(--line); padding:2.4rem 1.9rem; text-align:center;
}
.section--cream .card{ background:#fff; }
.card__icon{ color:var(--gold); font-size:1.1rem; letter-spacing:.4em; margin-bottom:.9rem; }
.card h3{
  font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brown); margin:0 0 1rem;
}
.card__lead{ font-size:1.3em; color:var(--brown-deep); margin:0 0 .8rem; }
.card p{ margin:0 0 .9rem; color:var(--ink-soft); }
.card__addr{ color:var(--ink) !important; }
.card__links{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.3rem; }

.plate{ margin:clamp(2.5rem,6vw,4rem) auto 0; max-width:34rem; }
.plate--wide{ max-width:46rem; }
.plate img{ box-shadow:var(--shadow); border:1px solid var(--line); }

/* ---------- timeline ---------- */
.timeline{ list-style:none; margin:0 auto; padding:0; max-width:40rem; position:relative; }
.timeline::before{
  content:""; position:absolute; left:calc(50% - .5px); top:.6rem; bottom:.6rem; width:1px; background:var(--line);
}
.timeline__item{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(1rem,3vw,2rem); padding-block:1.15rem;
}
.timeline__time{
  text-align:right; font-family:var(--sans); font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--brown-soft);
}
.timeline__dot{
  width:.7rem; height:.7rem; border-radius:50%; background:var(--cream);
  border:1px solid var(--gold); position:relative; z-index:1;
}
.section--cream .timeline__dot{ background:var(--cream); }
.timeline__what{ font-size:1.28em; color:var(--brown-deep); }

/* ---------- program ---------- */
.program{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);
  gap:clamp(1.8rem,4vw,3rem); align-items:start;
}
.program__list{ border-top:1px solid var(--line); }
.program__row{
  display:grid; grid-template-columns:minmax(9rem,1fr) minmax(0,1.4fr);
  gap:.4rem 1.5rem; padding:1rem 0; border-bottom:1px solid var(--line);
}
.program__moment{
  font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brown); align-self:center;
}
.program__song{ font-size:1.15em; font-style:italic; color:var(--brown-deep); }
.program__by{
  grid-column:2; font-family:var(--sans); font-size:.7rem; letter-spacing:.08em; color:var(--ink-soft);
}
.credits{ background:#fff; border:1px solid var(--line); padding:1.9rem; }
.credits h4{
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brown); margin:0 0 1.2rem;
}
.credits p{ margin:0 0 1.1rem; line-height:1.5; }
.credits span{
  display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brown-soft); margin-bottom:.2rem;
}

/* ---------- wedding party ---------- */
.party__top{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.5rem; text-align:center; padding-bottom:clamp(2rem,5vw,3.5rem);
  border-bottom:1px solid var(--line); margin-bottom:clamp(2rem,5vw,3.5rem);
}
.party__label{
  display:block; font-family:var(--sans); font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brown-soft); margin-bottom:.45rem;
}
.party__name{ display:block; font-size:1.42em; font-weight:600; color:var(--brown-deep); }
/* The flower girl carries the bridesmaids' name style and the ring bearer the
   groomsmen's, so each matches the list it belongs with. Kept in step with
   ".pairs li > b" and ".names li" below — change those and change these. */
.party__name--bridesmaid{ font-size:1.05em; font-weight:600; }   /* = .pairs li > b */
.party__name--groomsman { font-size:1em;    font-weight:400; }   /* = .names li     */
.party__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:clamp(2rem,5vw,4rem); }
.party__col h3{
  font-family:var(--script); font-size:2.3rem; color:var(--brown); font-weight:400;
  text-align:center; margin:0 0 1.5rem;
}
.pairs, .names{ list-style:none; margin:0; padding:0; }
.pairs li{ padding:.7rem 0; border-bottom:1px solid var(--line); }
.pairs li > b{ display:block; font-weight:600; color:var(--brown-deep); font-size:1.05em; }
.pairs i{
  font-style:normal; font-family:var(--sans); font-size:.82rem; letter-spacing:.04em;
  color:var(--ink-soft);
}
.pairs i b{ display:inline; font-weight:600; color:var(--brown-deep); }
.names{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem 1.5rem; }
.names li{ padding:.45rem 0; border-bottom:1px solid var(--line); color:var(--brown-deep); }
.party__littles{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem;
  text-align:center; margin-top:2.2rem;
}

/* ---------- sponsors ---------- */
.sponsors{
  list-style:none; margin:2.5rem auto 0; padding:0;
  max-width:34rem; text-align:center;
}
.sponsors li{
  break-inside:avoid; padding:.5rem 0; border-bottom:1px solid var(--line);
  font-size:.98em; color:var(--brown-deep);
}

/* ---------- hotels ---------- */
.hotels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:1.5rem; margin-top:2.5rem; }
.hotel{ border:1px solid var(--line); padding:2.2rem 1.9rem; background:var(--cream); }
.hotel h3{ font-size:1.5em; color:var(--brown); margin:0 0 .5rem; font-weight:600; }
.hotel__addr{ margin:0 0 .3rem; color:var(--ink-soft); }
.hotel__facts{ margin:1.4rem 0; border-top:1px solid var(--line); }
.hotel__facts div{
  display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0;
  border-bottom:1px solid var(--line);
}
.hotel__facts dt{
  font-family:var(--sans); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brown-soft); margin:0;
}
.hotel__facts dd{ margin:0; text-align:right; color:var(--brown-deep); }
.hotel__note{ font-size:.95em; color:var(--ink-soft); margin:0 0 1.4rem; }
.hotel .btn--sm{ margin-right:.5rem; margin-top:.4rem; }

/* ---------- registry ---------- */
.registry{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.registry__text .lede{ text-align:left; margin-inline:0; margin-bottom:1.8rem; }
.registry__url{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.1em; color:var(--brown-soft);
  margin:1rem 0 0; word-break:break-all;
}
.registry__qr{ margin:0; }
.registry__qr img{ box-shadow:var(--shadow); border:1px solid var(--line); }

/* ---------- rsvp ---------- */
.rsvp{
  background:rgba(255,255,255,.05); border:1px solid rgba(250,245,238,.2);
  padding:clamp(1.75rem,4vw,2.8rem);
}
.field{ display:block; margin-bottom:1.5rem; border:0; padding:0; }
.field__label{
  display:block; font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.65rem;
}
.field__label em{ font-style:normal; text-transform:none; letter-spacing:.05em; opacity:.75; }
.field__help{
  font-family:var(--sans); font-size:.72rem; line-height:1.6;
  color:rgba(250,245,238,.6); margin:.6rem 0 0;
}
.rsvp input[type=text], .rsvp select, .rsvp textarea{
  width:100%; font-family:var(--serif); font-size:1.05rem; color:var(--cream);
  background:rgba(250,245,238,.06); border:1px solid rgba(250,245,238,.25);
  padding:.85rem 1rem; border-radius:0; -webkit-appearance:none; appearance:none;
}
.rsvp select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.35rem, calc(100% - .8rem) 1.35rem;
  background-size:.35rem .35rem,.35rem .35rem; background-repeat:no-repeat;
}
.rsvp select option{ color:var(--ink); background:#fff; }
.rsvp input::placeholder, .rsvp textarea::placeholder{ color:rgba(250,245,238,.4); }
.rsvp input:focus, .rsvp select:focus, .rsvp textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(250,245,238,.1);
}

.rsvp__results{ list-style:none; margin:.75rem 0 0; padding:0; max-height:16rem; overflow-y:auto; }
.rsvp__results li{ border-bottom:1px solid rgba(250,245,238,.14); }
.rsvp__results button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:var(--cream); font-family:var(--serif); font-size:1.05rem; padding:.85rem .4rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.rsvp__results button:hover, .rsvp__results button:focus-visible{ background:rgba(250,245,238,.09); }
.rsvp__results small{
  font-family:var(--sans); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.rsvp__miss{ font-family:var(--sans); font-size:.78rem; color:#ff9c85; margin-top:1rem; }

.rsvp__found{
  display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap;
  padding-bottom:1.3rem; margin-bottom:1.6rem; border-bottom:1px solid rgba(250,245,238,.2);
}
.rsvp__foundlabel{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.rsvp__found strong{ font-size:1.2em; font-weight:400; }
.rsvp__seats{ font-family:var(--sans); font-size:.7rem; color:rgba(250,245,238,.6); }

/* The one real decision on the page. It uses real, visible radio buttons: a
   guest should see a control they recognise and know to click, rather than a
   box that only looks selectable. Radios, not checkboxes, because attending
   and declining are mutually exclusive — picking one clears the other. */
.choices{ display:flex; gap:.9rem; flex-wrap:wrap; }
.choice{ flex:1 1 14rem; }
.choice span{
  display:flex; align-items:center; gap:.8rem;
  padding:1.15rem 1.25rem; cursor:pointer;
  background:rgba(250,245,238,.07);
  border:1.5px solid rgba(250,245,238,.42);
  font-family:var(--sans); font-size:.76rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; line-height:1.3;
  transition:background .2s, border-color .2s, color .2s;
}
/* The native control, kept visible and simply enlarged and recoloured. */
.choice input{
  flex:none; width:1.15rem; height:1.15rem; margin:0; cursor:pointer;
  accent-color:var(--gold);
  /* Without this the browser draws an unchecked radio as a solid white disc,
     which on this dark panel reads as already selected. A dark colour-scheme
     makes an empty control look empty. */
  color-scheme:dark;
}
.choice span:hover{ border-color:var(--gold); background:rgba(250,245,238,.14); }
.choice:has(input:checked) span{
  /* Near-black brown rather than --brown-deep: on the gold fill that lifts the
     label from 3.9:1 to past the 4.5:1 minimum for small bold text. */
  background:var(--gold); border-color:var(--gold); color:#2a1a0b;
}
.choice input:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
/* A larger prompt above the two options, so the question is not missed. */
/* Inside the RSVP panel the labels sit on dark brown, where the gold used
   elsewhere on the page is too dim to read comfortably. Lifted to cream for
   this section only — the rest of the site keeps the gold. */
.rsvp .field__label{ color:var(--cream); }
.rsvp .field__label em{ color:rgba(250,245,238,.72); opacity:1; }
.rsvp .field__help{ color:rgba(250,245,238,.72); }

/* The attend/decline question: the one answer we cannot do without. */
.field__label--lg{ font-size:.9rem; letter-spacing:.14em; margin-bottom:.95rem; }
.field__label--lg em{ font-style:normal; text-transform:none; letter-spacing:.04em; }
.req{ color:#ff7a66; font-weight:700; margin-left:.15em; font-size:1.15em; line-height:0; }
/* Set when a guest tries to send without answering the question. */
.choices--error .choice span{ border-color:#ff7a66; }

.rsvp__error{
  font-family:var(--sans); font-size:.78rem; color:#ff7a66; margin:0 0 1rem;
}
.grecaptcha-badge{ visibility:hidden; }
.rsvp__thanks{ text-align:center; }
.rsvp__thanksmark{ font-family:var(--script); font-size:3rem; color:var(--gold); margin:0 0 .5rem; }

/* ---------- gallery ---------- */
/* The closing keepsake gallery. These are the printed pieces of the invitation
   suite, so each is shown whole and large rather than cropped to a thumbnail;
   clicking one opens it full size in the lightbox. */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem); align-items:start;
}
.gallery__item{
  background:#fff; border:1px solid var(--line); cursor:pointer; text-align:center;
  display:flex; flex-direction:column; gap:.9rem;
  padding:clamp(.8rem,1.5vw,1.3rem);
  box-shadow:0 10px 28px -22px rgba(74,47,24,.55);
  transition:transform .3s, box-shadow .3s;
}
.gallery__item:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
/* Whole card, uncropped — nothing on a printed piece should be cut off. */
.gallery__item img{ width:100%; height:auto; }
.gallery__item span{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brown); padding-bottom:.3rem;
}

.lightbox{
  position:fixed; inset:0; z-index:150; background:rgba(61,44,29,.94);
  display:grid; place-items:center; padding:clamp(1rem,5vw,3rem);
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:88vh; box-shadow:0 30px 80px -40px #000; }
.lightbox__close{
  position:absolute; top:1rem; right:1.4rem; background:none; border:0; color:var(--cream);
  font-size:2.6rem; line-height:1; cursor:pointer;
}

/* ---------- thanks + footer ---------- */
.thanks__card{
  background:#fff; border:1px solid var(--line); padding:clamp(2rem,6vw,4rem);
  text-align:center; box-shadow:var(--shadow);
}
.thanks__card p{ margin:0 0 1.1rem; font-size:1.15em; color:var(--brown-deep); }
.thanks__sign{ color:var(--ink-soft) !important; }
.thanks__names{ font-family:var(--script); font-size:2.8rem; color:var(--brown); margin:.5rem 0 0 !important; }

.footer{
  background:var(--brown-deep); color:var(--cream); text-align:center;
  padding-block:clamp(3rem,6vw,4.5rem);
}
/* Typographic monogram rather than monogram.png: the artwork is brown-on-white,
   so on the dark footer it would sit in a white box. */
.monogram{
  display:grid; justify-content:center; gap:.35rem;
  font-family:var(--script); color:var(--cream); line-height:1;
  margin:0 0 1.8rem;
}
.monogram__name{ font-size:clamp(2.4rem,7vw,3.4rem); }
.monogram__name--first{ justify-self:start; }
.monogram__name--last{ justify-self:end; }
.monogram__heart{
  width:1.9rem; height:1.9rem; color:var(--gold); justify-self:center;
}
.footer__date{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(250,245,238,.75); margin:0 0 .8rem;
}
.footer__blessing{ font-family:var(--script); font-size:1.7rem; color:var(--gold); margin:0 0 1.2rem; }
.footer__site{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.18em;
  color:rgba(250,245,238,.5); margin:0;
}

/* ---------- reveal animation ----------
   Scoped to .js (set by an inline script in <head>) so that if JavaScript is
   disabled or throws, the page renders fully instead of staying blank. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .hero__scroll span{ animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .story{ grid-template-columns:1fr; text-align:center; }
  .story__photo img{ width:min(20rem,80%); margin-inline:auto; }
  .program{ grid-template-columns:1fr; }
  .registry{ grid-template-columns:1fr; }
  .registry__text .lede{ text-align:center; }
  .registry__qr img{ width:min(24rem,100%); margin-inline:auto; }
}
@media (max-width:640px){
  .couple{ grid-template-columns:1fr; }
  .names{ grid-template-columns:1fr; }
  .timeline{ max-width:100%; }
  .timeline::before{ left:.35rem; }
  .timeline__item{ grid-template-columns:auto 1fr; gap:1rem; text-align:left; }
  .timeline__dot{ order:-1; }
  .timeline__time{ grid-column:2; text-align:left; }
  .timeline__what{ grid-column:2; grid-row:1; }
  .program__row{ grid-template-columns:1fr; }
  .program__by{ grid-column:1; }
  .party__littles{ grid-template-columns:1fr; }
}

/* ---------- print ---------- */
@media print{
  .nav,.hero__scroll,.countdown,.hero__actions,#rsvp,.gallery,.lightbox{ display:none !important; }
  body{ background:#fff; }
  .js .reveal{ opacity:1; transform:none; }
  .section{ padding-block:1.5rem; break-inside:avoid; }
}