/* ═══════════════════════════════════════════════════════
   Հենրի և Մարիամ — հոկտեմբերի 7, 2026
   ═══════════════════════════════════════════════════════ */

:root{
  --cream:      #f8f1e3;
  --cream-hi:   #fdf9f0;
  --gold:       #b98d43;
  --gold-lt:    #d7b678;
  --gold-dk:    #8d6524;
  --ink:        #6b573a;
  --ink-soft:   #8a765a;
  --line:       rgba(185,141,67,.38);
  --card:       rgba(255,252,244,.72);
  --shadow:     0 18px 44px -22px rgba(103,76,32,.45);

  --font:       "Noto Serif Armenian", "Cormorant Garamond", Georgia, serif;
  --font-num:   "Cormorant Garamond", "Noto Serif Armenian", Georgia, serif;

  --pad:        clamp(18px, 5.5vw, 40px);
  --sect-y:     clamp(60px, 13vw, 116px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  /* one uninterrupted wash down the whole page — sections no longer
     paint their own panels, so there are no seams between them */
  background:
    linear-gradient(180deg,
      #fbf5ea 0%, #f7eedc 9%, #fbf4e8 19%, #f5ead6 30%, #faf3e6 41%,
      #f4e8d2 52%, #f9f2e5 63%, #f5ebd8 74%, #faf4e8 86%, #f6ecda 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }

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

/* ── paper grain ─────────────────────────────────────── */
.sheen{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(70% 50% at 18% 12%, rgba(255,255,255,.5) 0%, transparent 60%),
    radial-gradient(60% 45% at 86% 84%, rgba(255,252,243,.4) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(176,146,96,.11) 100%);
}
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ── decorative pearls ───────────────────────────────── */
.pearls{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background-repeat:no-repeat;
  background-size:clamp(115px,31vw,265px) auto;
}
.pearls--tl{
  background-image:url("../img/pearl-top-left.svg");
  background-position:left top;
  animation:float 9s ease-in-out infinite;
}
.pearls--br{
  background-image:url("../img/pearl-bottom-right.svg");
  background-position:right bottom;
  animation:float 11s ease-in-out infinite reverse;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

/* ═══════════ typography atoms ═══════════ */
.eyebrow{
  margin:0;
  font-size:clamp(11px,2.9vw,14px);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-dk);
  line-height:1.5;
}
.display{
  margin:.35em 0 0;
  font-weight:300;
  font-size:clamp(24px,6.6vw,42px);
  line-height:1.26;
  color:var(--gold-dk);
}
.display--wide{ letter-spacing:.07em; text-transform:uppercase; font-size:clamp(22px,6.1vw,40px); }

.script{
  margin:1.1em 0 0;
  font-style:italic;
  font-size:clamp(15px,4vw,20px);
  color:var(--ink-soft);
  line-height:1.75;
}
.heart{ margin:.5em 0; color:var(--gold); font-size:18px; line-height:1; }
.center{ text-align:center; }

.rule{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin:26px auto; max-width:340px;
}
.rule::before,.rule::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,var(--line));
}
.rule::after{ background:linear-gradient(90deg,var(--line),transparent); }
.rule i{
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff 0 14%,#f9f2e6 34%,#e6d9c2 66%,#c9b797 100%);
  box-shadow:0 1px 4px rgba(120,92,45,.3);
}
.rule--sm{ max-width:190px; margin:16px auto; }
.rule--light::before{ background:linear-gradient(90deg,transparent,rgba(247,235,213,.6)); }
.rule--light::after{  background:linear-gradient(90deg,rgba(247,235,213,.6),transparent); }

.flourish{ margin:6px auto 0; max-width:220px; }
.flourish svg{ width:100%; height:auto; fill:none; stroke:var(--line); stroke-width:1.1; }

/* ═══════════ layout ═══════════ */
.section{ position:relative; padding:var(--sect-y) var(--pad); overflow:hidden; }
.wrap{ position:relative; z-index:4; max-width:760px; margin:0 auto; }
.wrap--narrow{ max-width:560px; }

/* Sections paint no panel of their own — every one of them is transparent,
   so the page reads as a single uninterrupted sheet with no seams. Depth
   comes from the body wash below and the fixed vignette above it. */
.section--cream{ background:none; }
.section--marble{ background:none; }
/* ═══════════ 1 · HERO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--pad) + 10px) var(--pad) var(--pad);
  overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 70% at 50% 0%, #fdf9f0 0%, transparent 62%),
    linear-gradient(180deg,#faf3e5,#f4e8d2);
}
/* the media box runs past the foot of the screen so the printed date on the
   poster falls below the fold and never clashes with the caption */
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* light wash so the gold title reads over the photograph */
    linear-gradient(180deg,
      rgba(250,244,232,.98) 0%, rgba(250,244,232,.95) 11%, rgba(250,244,232,.72) 18%,
      rgba(250,244,232,.3) 25%, rgba(250,244,232,0) 33%),
    /* deep scrim so the place + cue read at the foot */
    linear-gradient(0deg,
      rgba(14,10,4,.92) 0%, rgba(14,10,4,.72) 5%, rgba(14,10,4,.44) 10%,
      rgba(14,10,4,.18) 15%, rgba(14,10,4,0) 22%);
}
.hero__top,.hero__bottom{ position:relative; z-index:4; text-align:center; }

/* the dark foot of the hero spills a little onto the section beneath it,
   so the two meet as a shadow rather than as a cut line */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-70px; height:70px;
  z-index:5; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,10,4,.5) 0%, rgba(14,10,4,.26) 26%, rgba(14,10,4,.1) 52%, rgba(14,10,4,0) 100%);
}

.hero__date{
  margin:.1em 0 0;
  font-size:clamp(19px,5.2vw,30px);
  font-weight:300;
  letter-spacing:.07em;
  color:var(--gold-dk);
}
.hero__place{
  margin:0;
  font-size:clamp(12px,3.2vw,15px);
  letter-spacing:.22em; text-transform:uppercase;
  margin-top:.7em;
  color:var(--ink-soft);
}
.scroll-cue{
  display:block; margin-top:clamp(20px,5vw,36px);
  color:#e9c98d; text-decoration:none;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.scroll-cue svg{
  display:block; width:16px; height:26px; margin:10px auto 0;
  fill:none; stroke:currentColor; stroke-width:1.2;
  animation:nudge 2.4s ease-in-out infinite;
}
@keyframes nudge{ 0%,100%{ transform:translateY(0); opacity:.75 } 50%{ transform:translateY(6px); opacity:1 } }

/* ═══════════ 2 · MONOGRAM ═══════════ */
.script--mono{ margin:0 0 clamp(26px,7vw,40px); font-size:clamp(17px,4.6vw,24px); color:var(--gold-dk); }

.mono{
  position:relative;
  width:clamp(190px,54vw,250px); height:clamp(190px,54vw,250px);
  margin:0 auto;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 40% 34%, #fffdf7 0%, #f7ecd7 62%, #efe0c4 100%);
  box-shadow:0 20px 44px -26px rgba(94,68,26,.85), inset 0 0 0 1px rgba(185,141,67,.28);
}
/* beaded pearl ring, drawn as a round-capped dashed circle */
.mono__ring{
  position:absolute; inset:-9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='94' fill='none' stroke='%23e6d4b2' stroke-width='11' stroke-linecap='round' stroke-dasharray='0.4 11'/%3E%3Ccircle cx='100' cy='100' r='94' fill='none' stroke='%23fffaf0' stroke-width='5' stroke-linecap='round' stroke-dasharray='0.4 11' transform='translate(-1.2,-1.5)' opacity='.85'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 3px 5px rgba(120,92,45,.35));
}
.mono__pearl{
  position:absolute; top:-19px; left:50%; transform:translateX(-50%);
  width:22px; height:22px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 32% 28%,#fff 0 14%,#fbf5ea 32%,#eadfcb 62%,#cdbb9c 100%);
  box-shadow:0 3px 8px rgba(120,92,45,.4);
}
.mono__letters{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-num);
  color:var(--gold-dk);
  line-height:1;
}
.mono__letters b{ font-weight:400; font-size:clamp(56px,16vw,76px); }
.mono__letters i{
  font-size:clamp(30px,8vw,40px);
  margin:0 -.06em; align-self:flex-end;
  color:var(--gold);
}
.mono__names{
  margin:0;
  font-size:clamp(15px,4vw,20px);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-dk);
}

/* ═══════════ 3 · VERSE ═══════════ */
/* The quote is short, so the section centres it in its own space rather
   than letting it sit at the top of a tall empty stretch. */
.sect-verse{
  display:grid;
  place-content:center;
  min-height:min(60vh, 460px);
}
.verse{ margin:0; }
.verse p{
  margin:0;
  font-style:italic;
  font-size:clamp(16px,4.3vw,23px);
  line-height:1.85;
  color:var(--gold-dk);
}
.verse cite{
  display:block; margin-top:clamp(18px,4.5vw,26px);
  font-style:normal;
  font-size:clamp(12px,3.2vw,15px);
  letter-spacing:.14em;
  color:var(--ink-soft);
}

/* ═══════════ 5 · COUNTDOWN ═══════════ */
.cd-lead{ margin:.6em 0 0; font-style:italic; font-size:clamp(16px,4.2vw,21px); color:var(--ink-soft); }
.cd-days{
  margin:0;
  font-family:var(--font-num);
  font-size:clamp(96px,30vw,180px);
  font-weight:400; line-height:.96;
  background:linear-gradient(180deg,#e0bd82,#b0842f 55%,#8a6320);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:lining-nums;
}
.cd-days-label{
  margin:.15em 0 0;
  font-size:clamp(12px,3.2vw,16px);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-dk);
}
.cd-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,2.6vw,18px);
  margin:clamp(26px,6vw,36px) auto 0;
  max-width:460px;
}
.cd-cell{
  position:relative;
  padding:clamp(14px,4vw,20px) 4px clamp(10px,3vw,14px);
  border:1px solid var(--line); border-radius:16px;
  background:var(--card); box-shadow:var(--shadow);
}
.cd-cell b{
  display:block;
  font-family:var(--font-num); font-weight:400;
  font-size:clamp(30px,9vw,44px); line-height:1; color:var(--gold-dk);
  font-variant-numeric:tabular-nums lining-nums;
}
.cd-cell i{
  display:block; margin-top:8px; font-style:normal;
  font-size:clamp(9px,2.4vw,12px);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.cd-date{
  margin:0;
  font-size:clamp(15px,4vw,20px);
  letter-spacing:.08em; color:var(--gold-dk);
}
.pearl-pin{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff 0 14%,#faf3e7 34%,#e7dac3 66%,#c9b797 100%);
  box-shadow:0 2px 5px rgba(120,92,45,.3);
}
.pearl-pin--tl{ left:14px; top:-8px; transform:none; }
.pearl-pin--tr{ left:auto; right:14px; top:-8px; transform:none; }

/* ═══════════ 6 · GALLERY ═══════════ */
.gal{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(10px,3vw,18px);
  margin:clamp(28px,7vw,40px) 0 0;
}
.gal__item{ margin:0; }
.gal__item--wide{ grid-column:1 / -1; }
.gal__item img{
  width:100%; height:100%;
  aspect-ratio:3/4; object-fit:cover;
  border-radius:16px;
  border:2px solid rgba(198,162,99,.7);
  box-shadow:0 18px 40px -24px rgba(94,68,26,.7);
}
.gal__item--wide img{ aspect-ratio:3/2; }

/* ═══════════ 7 · TIMELINE ═══════════ */
.tl{ list-style:none; margin:clamp(26px,7vw,40px) 0 0; padding:0; }
.tl__item{
  --badge:clamp(46px,13vw,68px);
  position:relative;
  display:grid; grid-template-columns:40% 1fr;
  align-items:stretch;
  margin-bottom:clamp(26px,7vw,34px);
  padding:clamp(7px,2vw,11px);
  border:1px solid var(--line);
  border-radius:clamp(18px,5vw,26px);
  background:linear-gradient(150deg, rgba(255,253,248,.94), rgba(252,246,235,.86));
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.5);
  text-align:center;
}
.tl__item::after{
  content:""; position:absolute; left:50%; bottom:calc(-1 * clamp(26px,7vw,34px) - 1px);
  transform:translateX(-50%);
  width:1px; height:clamp(26px,7vw,34px);
  background:linear-gradient(180deg,var(--line),rgba(185,141,67,.15));
}
.tl__item::before{
  content:""; position:absolute; left:50%; bottom:calc(-1 * clamp(26px,7vw,34px) / 2 - 6px);
  transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 32% 28%,#fff 0 14%,#faf3e7 34%,#e7dac3 66%,#c9b797 100%);
  box-shadow:0 2px 5px rgba(120,92,45,.3);
}
.tl__item:last-child{ margin-bottom:0; }
.tl__item:last-child::after,.tl__item:last-child::before{ display:none; }

.tl__media{
  position:relative;
  border-radius:clamp(12px,3.4vw,18px);
  overflow:hidden;
  border:1px solid rgba(198,162,99,.6);
  box-shadow:0 10px 24px -16px rgba(94,68,26,.75);
}
.tl__media img{ width:100%; height:100%; min-height:clamp(170px,46vw,240px); object-fit:cover; }

.tl__time{
  position:absolute; top:24%; left:40%;
  transform:translate(-50%,-50%); z-index:3;
  width:var(--badge); height:var(--badge);
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fdf9f1;
  font-family:var(--font-num);
  font-size:clamp(16px,4.6vw,22px);
  color:var(--gold-dk);
  font-variant-numeric:lining-nums;
  box-shadow:0 8px 20px -10px rgba(94,68,26,.8);
}
.tl__time::before{
  content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff 0 14%,#faf3e7 34%,#e7dac3 66%,#c9b797 100%);
  box-shadow:0 2px 5px rgba(120,92,45,.3);
}

.tl__body{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(12px,3.4vw,20px) clamp(8px,2.4vw,18px);
  padding-left:calc(var(--badge) / 2 + clamp(8px,2.4vw,18px));
  min-width:0;
}
.tl__icon{
  width:clamp(38px,10.5vw,56px); height:auto;
  margin:0 auto clamp(6px,2vw,12px);
  filter:drop-shadow(0 4px 8px rgba(120,92,45,.3));
}
.tl__name{
  margin:0; font-weight:500;
  font-size:clamp(11.5px,3.15vw,20px);
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--gold-dk); line-height:1.3;
  max-width:100%; overflow-wrap:break-word;
}
.tl__dot{ color:var(--gold-lt); font-size:10px; margin:clamp(5px,1.6vw,9px) 0; line-height:1; }
.tl__place{ margin:0; font-size:clamp(13px,3.4vw,17px); line-height:1.35; }
.tl__city{ margin:3px 0 0; font-style:italic; color:var(--ink-soft); font-size:clamp(11px,3vw,15px); }
.tl__map{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:clamp(10px,3vw,16px); padding:clamp(6px,1.8vw,9px) clamp(12px,3.4vw,22px);
  border:1px solid var(--line); border-radius:999px;
  text-decoration:none; color:var(--gold-dk);
  font-size:clamp(10px,2.7vw,12px); letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,253,247,.6);
  transition:background .25s, border-color .25s, transform .15s;
}
.tl__map:hover{ background:#fff; border-color:var(--gold); }
.tl__map:active{ transform:scale(.98); }
.tl__map svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4; flex:none; }
.tl__foot{ margin:clamp(26px,7vw,36px) 0 0; font-size:clamp(15px,4vw,18px); color:var(--ink-soft); }
.tl__foot em{ color:var(--gold-dk); }

/* ═══════════ 8 · RSVP ═══════════ */
.rsvp__title{
  margin:0;
  font-weight:400;
  font-size:clamp(22px,5.9vw,34px);
  letter-spacing:.03em;
  line-height:1.3;
  color:var(--gold-dk);
}
.rsvp__deadline{
  margin:.5em 0 0;
  font-size:clamp(14px,3.8vw,19px);
  color:var(--ink-soft);
}
.pick-label{
  margin:clamp(22px,5.5vw,30px) 0 12px;
  text-align:center;
  font-size:clamp(12px,3.2vw,15px);
  letter-spacing:.05em;
  color:var(--ink-soft);
}

.choice{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(10px,3vw,20px);
  margin:0;
}
.choice__card{
  position:relative;
  /* fixed rows keep icon / label / rule / note on the same baseline
     in both cards, however differently the labels wrap */
  display:grid;
  grid-template-rows:auto auto auto 1fr;
  justify-items:center; align-content:start;
  gap:6px;
  padding:clamp(20px,5.4vw,30px) clamp(8px,2.4vw,18px) clamp(16px,4.4vw,26px);
  border:1px solid var(--line); border-radius:20px;
  background:rgba(255,252,245,.55);
  cursor:pointer; text-align:center;
  transition:border-color .3s, box-shadow .3s, background .3s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.choice__card:active{ transform:scale(.985); }
.choice__card[aria-pressed="true"]{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold) inset, 0 18px 40px -22px rgba(103,76,32,.65);
  background:rgba(255,252,244,.92);
}
/* both icons occupy an identical box, so the rows below them line up */
.choice__icon-box{
  display:grid; place-items:center;
  height:clamp(52px,14.5vw,72px);
  margin-bottom:10px;
}
.choice__icon{
  height:clamp(52px,14.5vw,72px);
  width:auto; max-width:100%;
  object-fit:contain;
  transition:filter .3s, transform .3s;
}
.choice__card[aria-pressed="true"] .choice__icon{
  filter:drop-shadow(0 0 10px rgba(215,182,120,.9));
  transform:scale(1.04);
}
.choice__label{
  display:flex; align-items:center; justify-content:center;
  min-height:2.7em;                    /* room for two lines in both cards */
  font-size:clamp(12.5px,3.5vw,17px);
  font-weight:500;
  color:var(--gold-dk); line-height:1.35;
}
.choice__rule{ color:var(--gold-lt); font-size:11px; letter-spacing:.1em; }
.choice__note{ font-style:italic; font-size:clamp(11.5px,3.1vw,14px); color:var(--ink-soft); line-height:1.45; }

.field{ display:block; text-align:left; margin-top:18px; }
.field--note{ margin-top:clamp(22px,5.5vw,30px); }
.field label{
  display:block; margin-bottom:7px; text-align:center;
  font-size:clamp(12px,3.2vw,15px);
  letter-spacing:.05em;
  color:var(--ink-soft);
}
.field .opt{ font-style:italic; font-size:.88em; }
.field input,.field textarea,.guest-row input{
  width:100%;
  padding:15px 18px;
  font-family:inherit; font-size:16px; color:var(--ink); text-align:center;
  background:linear-gradient(180deg, rgba(255,253,249,.92), rgba(252,246,236,.86));
  border:1px solid var(--line);
  border-radius:14px;
  outline:none;
  box-shadow:inset 0 1px 3px rgba(120,92,45,.08);
  transition:border-color .25s, box-shadow .25s, background .25s;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:86px; text-align:left; border-radius:14px; }
.field input:focus,.field textarea:focus,.guest-row input:focus{
  border-color:var(--gold);
  background:#fffdf8;
  box-shadow:0 0 0 3px rgba(215,182,120,.28);
}
.field input::placeholder,.field textarea::placeholder,.guest-row input::placeholder{ color:#bfae94; font-style:italic; }
.field.invalid input,.guest-row input.invalid{
  border-color:#b4573f; box-shadow:0 0 0 3px rgba(180,87,63,.14);
}

/* side selector */
.side{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.side__opt{
  padding:13px 6px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(255,253,248,.7);
  cursor:pointer; text-align:center;
  font-size:clamp(12px,3.3vw,14px); letter-spacing:.04em;
  color:var(--ink-soft);
  transition:all .25s;
  -webkit-tap-highlight-color:transparent;
}
.side__opt[aria-pressed="true"]{
  border-color:var(--gold);
  background:linear-gradient(180deg,#f6e6c6,#e9d3a5);
  color:#6d4d16;
  box-shadow:0 6px 16px -10px rgba(103,76,32,.9);
}
.side.invalid .side__opt{ border-color:#c0765f; }

/* stepper */
.stepper{
  display:flex; align-items:center; justify-content:center; gap:clamp(24px,9vw,44px);
  margin:0 auto; max-width:280px;
  padding:6px 14px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,253,248,.6);
  box-shadow:inset 0 1px 3px rgba(120,92,45,.08);
}
.stepper__btn{
  width:40px; height:40px; border-radius:50%;
  border:1px solid transparent; background:none;
  color:var(--gold-dk); font-size:24px; line-height:1;
  cursor:pointer;
  transition:background .2s, transform .12s, opacity .2s;
}
.stepper__btn:hover{ background:rgba(255,255,255,.7); }
.stepper__btn:active{ transform:scale(.92); }
.stepper__btn:disabled{ opacity:.3; cursor:default; }
.stepper__value{
  min-width:44px; text-align:center;
  font-family:var(--font-num);
  font-size:30px; color:var(--gold-dk);
  font-variant-numeric:tabular-nums lining-nums;
}
.hint{ margin:6px 0 0; text-align:center; font-style:italic; color:var(--ink-soft); font-size:clamp(13px,3.5vw,15px); }
.hint--sm{ font-size:12.5px; margin-top:10px; }

.guest-row{ position:relative; margin-top:10px; }
.guest-row input{ padding-right:46px; }
.guest-row__del{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  border:1px solid transparent; background:none; cursor:pointer;
  color:var(--gold-dk); font-size:18px; line-height:1;
  opacity:.55; transition:opacity .2s, background .2s, border-color .2s;
}
.guest-row__del:hover{ opacity:1; background:rgba(185,141,67,.14); border-color:var(--line); }

.add-btn{
  display:inline-flex; align-items:center; gap:9px;
  margin:14px auto 0; padding:11px 24px;
  border:1px dashed var(--line); border-radius:999px;
  background:rgba(255,253,248,.5);
  color:var(--gold-dk); cursor:pointer;
  font-size:clamp(12.5px,3.3vw,15px);
  transition:background .25s, border-color .25s;
}
.add-btn:hover{ background:#fffdf8; border-color:var(--gold); }
.add-btn__plus{
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line); font-size:15px; line-height:1;
}
.add-btn[disabled]{ opacity:.4; cursor:default; }

/* gold plaque button */
.gold-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  margin:clamp(26px,6vw,34px) 0 0;
  padding:19px 44px;
  border:1px solid #a8792d;
  border-radius:12px;
  background:linear-gradient(180deg,#e6ca97 0%,#c9a458 38%,#b08736 62%,#9c7429 100%);
  color:#fffaf0;
  font-size:clamp(14px,3.8vw,18px); letter-spacing:.22em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 16px 34px -18px rgba(103,76,32,.95), inset 0 1px 0 rgba(255,255,255,.5);
  transition:filter .25s, transform .12s;
}
.gold-btn:hover{ filter:brightness(1.06); }
.gold-btn:active{ transform:translateY(1px); }
.gold-btn[disabled]{ opacity:.65; cursor:default; }
.gold-btn__stud{
  position:absolute; top:50%; transform:translateY(-50%);
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff 0 16%,#fbf5ea 34%,#e8dcc4 64%,#c4b291 100%);
  box-shadow:0 2px 4px rgba(80,58,20,.5), inset -1px -1px 2px rgba(150,120,70,.3);
}
.gold-btn__stud--l{ left:16px; }
.gold-btn__stud--r{ right:16px; }
.gold-btn__label{ text-shadow:0 1px 2px rgba(110,80,25,.45); }

.link-btn{
  margin-top:4px;
  border:0; background:none; cursor:pointer;
  color:var(--gold-dk); font-style:italic; font-size:15px;
  text-decoration:underline; text-underline-offset:4px;
}
.err{ margin:14px 0 0; color:#9d4a33; font-style:italic; font-size:14.5px; text-align:center; }

.thanks{ text-align:center; }
.thanks__mark{ font-size:26px; color:var(--gold); margin:0; }
.thanks__title{
  margin:.25em 0 0; font-weight:400;
  font-size:clamp(20px,5.4vw,30px);
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--gold-dk);
}

/* ═══════════ FOOTER ═══════════ */
.footer{
  position:relative;
  padding:clamp(40px,10vw,64px) var(--pad) clamp(46px,11vw,70px);
  text-align:center;
  background:linear-gradient(180deg,
    rgba(239,224,196,0) 0%, rgba(239,224,196,.6) 22%, #eee0c5 55%, #e7d5b4 100%);
}
.footer__names{
  margin:0;
  font-size:clamp(23px,6.2vw,32px);
  font-weight:300; color:var(--gold-dk); letter-spacing:.03em;
}
.footer__meta{
  margin:8px 0 0;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.footer__heart{ margin:14px 0 0; color:var(--gold); }

/* ═══════════ reveal on scroll ═══════════ */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}

/* ═══════════ tablet / laptop ═══════════ */
@media (min-width:820px){
  body{ font-size:17px; }
  .hero{ min-height:100vh; }

  .tl{ max-width:900px; margin-inline:auto; }
  .tl__item{ grid-template-columns:44% 1fr; }
  .tl__time{ left:44%; }
  .tl__body{ padding:30px 34px; padding-left:calc(var(--badge) / 2 + 34px); }

  .gal{ grid-template-columns:repeat(4,1fr); }
  .gal__item--wide{ grid-column:span 2; }
  .gal__item--wide img{ aspect-ratio:3/2; }
}

/* Wide screens: the invitation sits beside the photograph. */
@media (min-width:900px){
  .hero{
    display:grid;
    grid-template-columns:0.86fr 1.14fr;
    align-content:center;
    row-gap:clamp(18px,3vh,34px);
    padding:5vh clamp(28px,4vw,64px);
  }
  .hero__top{ grid-column:1; grid-row:1; align-self:end; }
  .hero__bottom{ grid-column:1; grid-row:2; align-self:start; }

  .hero__media{ inset:0 0 0 40%; }
  .hero__media img{ object-position:50% 62%; }

  /* the title block carries the whole left column, so it grows */
  .hero__top .eyebrow{ font-size:15px; letter-spacing:.3em; }
  .hero__date{ font-size:clamp(26px,2.7vw,40px); letter-spacing:.04em; white-space:nowrap; }
  .hero__place{ font-size:14px; letter-spacing:.26em; }
  .hero__top .rule--sm{ max-width:230px; }
  .hero__veil{
    background:
      linear-gradient(90deg,
        #f8f1e3 0%, rgba(248,241,227,.97) 30%, rgba(248,241,227,.8) 36%,
        rgba(248,241,227,.3) 44%, transparent 53%),
      linear-gradient(0deg, rgba(30,24,14,.35) 0%, rgba(30,24,14,0) 28%);
  }
  .hero__place{ color:var(--ink-soft); text-shadow:none; }
  .scroll-cue{ color:var(--gold-dk); text-shadow:none; }
}

@media (min-width:1100px){
  .wrap{ max-width:820px; }
  .section--rsvp .wrap--narrow{ max-width:600px; }
}