/* ============================================================
   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); }

/* ---------- 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:var(--brown-deep); }
.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:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brown-soft); margin:.5rem 0 0;
}

/* ---------- 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.3em; color:var(--brown-deep); }
.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 b{ display:block; font-weight:600; color:var(--brown-deep); }
.pairs i{
  font-style:normal; font-family:var(--sans); font-size:.68rem; letter-spacing:.1em;
  color:var(--ink-soft);
}
.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 0 0; padding:0;
  columns:2; column-gap:clamp(1.5rem,4vw,3.5rem);
}
.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:#e8c9a0; 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); }

.choices{ display:flex; gap:.75rem; flex-wrap:wrap; }
.choice{ flex:1 1 12rem; position:relative; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice span{
  display:block; text-align:center; padding:.95rem 1rem; cursor:pointer;
  border:1px solid rgba(250,245,238,.25); font-family:var(--sans); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; transition:background .2s, border-color .2s;
}
.choice input:checked + span{ background:var(--gold); border-color:var(--gold); color:var(--brown-deep); }
.choice input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:3px; }

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

/* ---------- gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:1.25rem; }
.gallery__item{
  background:none; border:1px solid var(--line); padding:0; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s;
}
.gallery__item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.gallery__item img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; }
.gallery__item span{
  font-family:var(--sans); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brown); padding:.85rem .5rem;
}

.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; }
  .sponsors{ columns:1; }
  .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; }
}