/* ============================================================
   Dewey & Astrud · December 16, 2026
   ============================================================ */
:root{
  /* All-cream palette (variable names kept from the first version) */
  --green:#5C4A3B;          /* cocoa: headings + key text */
  --green-2:#4C3D30;
  --ivory:#FCFAF5;          /* near-white ivory, main background */
  --ivory-deep:#F7F2E9;     /* a touch deeper, for subtle banding only */
  --cream-band:#F3ECE0;
  --card:#FFFEFC;
  --gold:#C4A67B;           /* champagne gold for lines */
  --gold-dark:#957650;      /* gold for small text */
  --taupe:#CDBBA5;
  --char:#4A3F35;
  --muted:#7A6A5B;

  --serif:'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;
  --script:'Pinyon Script', 'Snell Roundhand', cursive;

  /* paper grain */
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .94 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;
  --pad-x:clamp(20px,5vw,48px);
  --section-y:clamp(80px,12vw,140px);
}

*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background-color:var(--ivory);
  background-image:var(--paper),var(--fibers);
  color:var(--char);
  font-family:var(--sans);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none !important}

section{padding:var(--section-y) var(--pad-x);text-align:center;position:relative}

/* ---------- shared type ---------- */
.section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem,5.4vw,3.4rem);
  line-height:1.1;
  color:var(--green);
  letter-spacing:.005em;
}
.section-title.light{color:var(--ivory)}

.ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px auto 48px}
.ornament i{display:block;width:56px;height:1px;background:var(--gold)}
.ornament b{display:block;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}

.text-link{
  display:inline-block;background:none;border:0;padding:4px 0;cursor:pointer;
  font-family:var(--sans);font-size:.95rem;letter-spacing:.04em;color:var(--green);
  text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease), color .3s var(--ease);
}
.text-link:hover{background-size:0% 1px;background-position:100% 100%}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 34px;border-radius:0;cursor:pointer;
  font-family:var(--sans);font-size:.92rem;font-weight:500;letter-spacing:.14em;
  text-decoration:none;border:1px solid transparent;
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-green{background:var(--green);color:var(--ivory);border-color:var(--green)}
.btn-green:hover{background:var(--green-2)}
.btn-green[disabled]{opacity:.6;cursor:progress}
.btn-outline-light{border-color:rgba(183,154,98,.7);color:var(--ivory);margin-top:48px}
.btn-outline-light:hover{background:rgba(247,243,234,.08);border-color:var(--gold)}
.btn-block{width:100%}

.band-green{background:var(--green);color:var(--ivory)}
.band-ivory-deep{background:var(--ivory-deep)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--pad-x) 0;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(247,243,234,.94);
  border-bottom:1px solid rgba(183,154,98,.35);
  transform:translateY(-100%);
  transition:transform .6s var(--ease-out);
}
.nav.is-visible{transform:none}
.nav-mark{
  font-family:var(--serif);font-size:1.6rem;color:var(--green);text-decoration:none;letter-spacing:.04em;
}
.nav-mark span{font-style:italic;color:var(--gold);margin:0 2px;font-size:1.2rem}
.nav-links{display:flex;gap:clamp(16px,2.2vw,30px);align-items:center}
.nav-links a{
  font-size:.86rem;letter-spacing:.1em;text-decoration:none;color:var(--green);
  padding:6px 0;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.nav-links a:hover::after,.nav-links a.is-current::after{transform:scaleX(1);transform-origin:left}
.nav-links .nav-rsvp{border:1px solid var(--green);padding:6px 16px}
.nav-links .nav-rsvp::after{display:none}
.nav-links .nav-rsvp:hover{background:var(--green);color:var(--ivory)}
.nav-toggle{display:none}

@media (max-width:860px){
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:7px;
    width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0 8px;
  }
  .nav-toggle span{display:block;height:1px;background:var(--green);transition:transform .5s var(--ease)}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav-links{
    position:fixed;left:0;right:0;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
    flex-direction:column;gap:0;padding:12px var(--pad-x) 28px;
    background:var(--ivory);border-bottom:1px solid rgba(183,154,98,.35);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s;
  }
  .nav-links.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease), transform .45s var(--ease)}
  .nav-links a{font-family:var(--serif);font-size:1.45rem;letter-spacing:.02em;padding:10px 0;width:100%;text-align:center}
  .nav-links a::after{display:none}
  .nav-links .nav-rsvp{margin-top:10px;font-family:var(--sans);font-size:.95rem;letter-spacing:.14em}
}

/* ============================================================
   INTRO SCRATCH OVAL — a little surprise before the hero
   ============================================================ */
.intro-scratch{
  display:flex;flex-direction:column;align-items:center;
  padding:0 var(--pad-x) calc(56px + env(safe-area-inset-bottom,0px));
  text-align:center;position:relative;
  /* the swans start off-screen: clip them at the screen edge so they never widen the page */
  overflow:hidden;
  background-color:var(--ivory);background-image:var(--paper),var(--fibers);
}
.intro-inner{
  width:100%;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(40px + env(safe-area-inset-top,0px)) 0 40px;
}
.intro-pre{
  font-size:.86rem;letter-spacing:.22em;color:var(--muted);
  font-variant:small-caps;text-transform:lowercase;margin-bottom:clamp(18px,4vw,30px);
}
.intro-fade{opacity:0;transform:translateY(10px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.intro-fade-2{transition-delay:.9s}
.is-loaded .intro-fade{opacity:1;transform:none}
.intro-heart{
  position:relative;width:min(82vw,420px);aspect-ratio:900/1165;
  opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity 1.1s var(--ease-out) .15s,transform 1.1s var(--ease-out) .15s;
}
.is-loaded .intro-heart{opacity:1;transform:translateY(0) scale(1);animation:heartPulse 5s ease-in-out 1.3s infinite}
.intro-scratch.is-done .intro-heart{animation:none}
@keyframes heartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
.intro-heart-frame{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(120,95,70,.26));
}
.intro-window{
  position:absolute;left:23.8%;top:21.5%;width:51.8%;height:56.4%;
  /* the lace frame's oval opening — the foil and the reveal layer are both
     clipped to it so no rectangular edge ever shows over the lace */
  clip-path:ellipse(50% 50% at 50% 50%);
}
.intro-reveal{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;
  padding:8%;
  background:radial-gradient(ellipse at 50% 40%, #fffdf9, var(--ivory) 82%);
}
.intro-reveal-line{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,3.2vw,1.22rem);color:var(--gold-dark)}
.intro-reveal-big{font-family:var(--script);font-size:clamp(1.9rem,6.6vw,2.5rem);line-height:1.08;color:var(--green)}
.intro-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
.intro-canvas:active{cursor:grabbing}
.intro-window.is-revealed .intro-canvas{opacity:0;pointer-events:none;transition:opacity .9s var(--ease)}
.intro-hint{
  margin-top:clamp(16px,4vw,26px);font-size:.9rem;letter-spacing:.05em;color:var(--muted);
  transition:opacity .6s var(--ease);
}
.intro-scratch.is-done .intro-hint{opacity:0}
.intro-skip{margin-top:12px;font-size:.84rem;color:var(--muted)}
.intro-scratch.is-done .intro-skip{display:none}
.intro-continue{
  margin-top:clamp(24px,5vw,38px);display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:.9rem;letter-spacing:.12em;color:var(--green);text-decoration:none;
  opacity:0;transform:translateY(8px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}
.intro-scratch.is-done .intro-continue{opacity:1;transform:none}
.intro-continue svg{
  width:17px;height:17px;fill:none;stroke:var(--gold-dark);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;animation:introBob 1.8s ease-in-out infinite;
}
@keyframes introBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* two swans that glide toward each other as the page scrolls — position is
   driven by JS (via the shared rAF scroll loop); everything else here is
   just the resting look and the idle bob once they're on screen */
.intro-swans{
  position:relative;width:100%;max-width:640px;
  height:clamp(120px,32vw,210px);
  margin:clamp(34px,8vw,64px) auto 0;
  overflow:visible;
}
.intro-swan-slot{
  position:absolute;top:50%;left:50%;width:58%;height:100%;
  transform:translate(-195%,-50%); /* JS takes over within the first frame */
  will-change:transform;
}
.intro-swan-slot.is-right{transform:translate(137%,-50%)}
.intro-swan-flip{display:block;width:100%;height:100%}
.intro-swan-slot.is-right .intro-swan-flip{transform:scaleX(-1)}
.intro-swan-img{
  display:block;width:100%;height:100%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 12px 16px rgba(120,95,70,.2));
  animation:swanBob 6.5s ease-in-out infinite;
}
.intro-swan-slot.is-right .intro-swan-img{animation-delay:.8s}
@keyframes swanBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-1deg)}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(56px + env(safe-area-inset-top,0px)) var(--pad-x) calc(112px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.55), transparent 60%),
    var(--ivory);
}
.hero-frame{position:absolute;inset:clamp(12px,2.4vw,26px);border:1px solid rgba(183,154,98,.55);pointer-events:none}
.hero-frame::after{content:"";position:absolute;inset:6px;border:1px solid rgba(183,154,98,.28)}
.corner{position:absolute;width:26px;height:26px;border-color:var(--gold);border-style:solid;border-width:0}
.corner.tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.corner.tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.corner.bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.corner.br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}

.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:720px}

.monogram{width:clamp(70px,11vw,88px);height:auto;margin-bottom:22px;overflow:visible}
.mono-ring{fill:none;stroke:var(--gold);stroke-width:1}
.mono-ring.thin{stroke-width:.6;opacity:.7}
.mono-letter{font-family:var(--serif);font-size:44px;font-weight:400;fill:var(--green);text-anchor:middle}
.mono-amp{font-family:var(--serif);font-style:italic;font-size:22px;fill:var(--gold);text-anchor:middle}

.hero-greeting{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--green);margin-bottom:6px}
.hero-pre{font-size:.9rem;letter-spacing:.2em;color:var(--muted);font-variant:small-caps;text-transform:lowercase}

.names{
  margin:18px 0 10px;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3.6rem,12vw,6.6rem);
  line-height:.92;color:var(--green);
  display:flex;flex-direction:column;align-items:center;
}
.names .name{display:block;letter-spacing:.01em}
.names .amp{
  display:block;font-style:italic;font-weight:300;color:var(--gold);
  font-size:.46em;line-height:1;margin:.12em 0 .08em;
}
.hero-message{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,3.2vw,1.75rem);
  color:var(--char);margin-top:14px;
}

/* hero load sequence — the wording fades in one line at a time */
:root{--intro-blooms-end:300ms}
.h-seq{opacity:0;transform:translateY(14px)}
.is-loaded .h-seq{
  opacity:1;transform:none;
  transition:opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay:calc(var(--i,0) * 150ms + var(--intro-blooms-end));
}
.monogram .mono-ring{stroke-dasharray:1;stroke-dashoffset:1}
.is-loaded .monogram .mono-ring{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease) calc(var(--intro-blooms-end) + 300ms)}
.footer .monogram .mono-ring{stroke-dasharray:none;stroke-dashoffset:0}

.date-line{
  margin-top:34px;
  font-family:var(--serif);font-size:clamp(1.15rem,2.8vw,1.4rem);line-height:1.45;color:var(--green);
}
.date-line em{font-size:.85em;color:var(--muted)}

.scroll-cue{position:absolute;bottom:calc(34px + env(safe-area-inset-bottom,0px));left:50%;margin-left:-11px;width:22px;height:44px;display:block}
.scroll-cue span{position:absolute;left:50%;top:0;width:1px;height:100%;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ============================================================
   REVEALS (driven by rAF in script.js)
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(22px)}
[data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay:calc(var(--d,0) * 130ms);
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown .ornament{margin-bottom:44px}
.ornament.light i{background:rgba(183,154,98,.8)}
.count-grid{display:flex;justify-content:center;max-width:720px;margin:0 auto}
.count-unit{flex:1;padding:6px clamp(6px,2vw,20px);position:relative}
.count-unit + .count-unit::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(183,154,98,.55)}
.count-unit span{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,9vw,4.6rem);line-height:1;color:var(--ivory);
  font-variant-numeric:lining-nums tabular-nums;
}
.count-unit small{display:block;margin-top:10px;font-size:.78rem;letter-spacing:.2em;color:rgba(247,243,234,.72);font-variant:small-caps;text-transform:lowercase}
.count-done{font-family:var(--serif);font-style:italic;font-size:1.6rem}

/* ============================================================
   DETAILS
   ============================================================ */
.venues{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,4vw,56px);
  max-width:1060px;margin:0 auto;align-items:start;
}
.venue{display:flex;flex-direction:column;align-items:center}
/* venue photos (replace the old pen sketches) */
.venue-photo{margin:0 0 30px;width:100%;max-width:420px}
.venue-photo[hidden]{display:none}
/* no frame: the photo sits directly on the page; multiply blends a white photo background into the cream */
.venue-photo img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.venue-role{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.35rem;color:var(--gold-dark)}
.venue-name{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.4vw,2rem);line-height:1.2;color:var(--green);margin:6px 0 10px;max-width:22ch}
.venue-address{color:var(--muted)}
.venue-time{margin:18px 0 20px;line-height:1.55}
.venue-time strong{font-weight:500;color:var(--green)}
.venue-divider{display:flex;flex-direction:column;align-items:center;gap:12px;align-self:stretch;padding-top:40px}
.venue-divider span{flex:1;width:1px;background:rgba(183,154,98,.55)}
.venue-divider b{width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}

@media (max-width:760px){
  .venues{grid-template-columns:1fr}
  .venue-divider{flex-direction:row;padding:0;width:200px;margin:8px auto}
  .venue-divider span{height:1px;width:auto}
}

/* ============================================================
   SCHEDULE
   ============================================================ */
.schedule{background:var(--ivory-deep)}
/* order of the day: centered vertical line, entries alternate left / right with a line icon on the opposite side */
.timeline{list-style:none;margin:0 auto;padding:0;max-width:600px;position:relative}
.timeline::before{content:"";position:absolute;left:50%;top:16px;bottom:16px;width:1px;background:rgba(183,154,98,.6);transform:translateX(-.5px)}
.timeline li{
  display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center;
  min-height:clamp(96px,29vw,124px);padding:6px 0;
}
.timeline .tl-text,.timeline .tl-icon,.timeline .dot{grid-row:1}
.timeline .dot{grid-column:2;justify-self:center}
/* odd rows: text on the right, icon on the left */
.timeline .tl-text{grid-column:3;text-align:left;padding-left:clamp(8px,3.2vw,22px)}
.timeline .tl-icon{grid-column:1;justify-self:end;padding-right:clamp(8px,3.2vw,22px)}
/* even rows: text on the left, icon on the right */
.timeline li:nth-child(even) .tl-text{grid-column:1;text-align:right;padding:0 clamp(8px,3.2vw,22px) 0 0}
.timeline li:nth-child(even) .tl-icon{grid-column:3;justify-self:start;padding:0 0 0 clamp(8px,3.2vw,22px)}
.timeline time{
  display:block;font-family:var(--sans);font-weight:500;font-size:clamp(.82rem,3.4vw,.98rem);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:4px;
  font-variant-numeric:lining-nums;
}
.timeline p{
  font-family:var(--sans);font-size:clamp(.74rem,3.1vw,.86rem);line-height:1.5;
  letter-spacing:.14em;text-transform:uppercase;color:var(--char);text-wrap:balance;
}
.timeline .tl-icon img{display:block;width:clamp(66px,21vw,96px);height:auto;max-width:none;pointer-events:none;user-select:none}
.timeline .dot{width:9px;height:9px;background:var(--ivory-deep);border:1px solid var(--gold);transform:rotate(45deg);position:relative;z-index:1;transition:background-color .6s var(--ease) .4s}
.timeline li.is-in .dot{background:var(--gold)}

/* ============================================================
   ENTOURAGE
   ============================================================ */
.entourage{max-width:980px;margin:0 auto}
/* traditional invitation layout: two centered columns side by side with a hairline
   between them — kept as two columns on phones too (no stacking) */
.ent-pair{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(18px,6vw,80px);margin:0 auto 34px;
}
.ent-pair::before{
  content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;
  background:linear-gradient(transparent,rgba(183,154,98,.55) 18%,rgba(183,154,98,.55) 82%,transparent);
}
.ent-single{margin:0 auto 34px}
.ent-group{min-width:0}
.ent-group h3{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.02rem,4.4vw,1.3rem);line-height:1.25;color:var(--gold-dark);margin-bottom:8px;
  text-wrap:balance;
}
.ent-group p{font-size:clamp(.94rem,3.9vw,1.05rem);line-height:1.6;color:var(--char);text-wrap:balance;margin-bottom:2px}
.cross{color:var(--gold-dark);font-size:.85em;margin-left:2px}
.ent-rule{width:1px;height:44px;background:rgba(183,154,98,.6);margin:6px auto 40px}
@media (max-width:560px){
  .entourage{padding-left:clamp(14px,4.5vw,28px);padding-right:clamp(14px,4.5vw,28px)}
  .ent-pair{margin-bottom:30px}
}

/* ============================================================
   ATTIRE
   ============================================================ */
.attire-lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,4vw,2.3rem);color:var(--green);margin:-20px 0 44px}
.attire-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px);max-width:900px;margin:0 auto}
.rule svg{width:44px;height:44px;margin:0 auto 14px;fill:none;stroke:var(--gold-dark);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.rule h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--green);margin-bottom:6px}
.rule p{color:var(--muted);max-width:26ch;margin:0 auto}
/* sub-headings inside the attire section */
.attire-sub{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,6vw,2rem);
  color:var(--gold-dark);margin:0 0 28px;
}
.motif,.attire-guide{margin:clamp(56px,10vw,84px) auto 0;padding-top:clamp(32px,6vw,44px);border-top:1px solid rgba(183,154,98,.45)}
.motif{max-width:900px}
.attire-guide{max-width:620px}

/* color motif: one block per role, each with its swatches */
.motif-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,52px) clamp(24px,5vw,56px)}
.motif-role.is-wide{grid-column:1 / -1}
.motif-role h4{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,5vw,1.45rem);line-height:1.2;color:var(--green)}
.motif-name{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dark);margin:6px 0 18px}
.swatches{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:20px 8px}
.swatches li{display:flex;flex-direction:column;align-items:center;gap:4px;width:clamp(92px,28vw,118px);font-size:.82rem;color:var(--muted);letter-spacing:.03em;line-height:1.3}
.swatches b{font-weight:500;color:var(--char);font-size:.84rem;margin-top:6px}
.swatches small{font-size:.72rem;letter-spacing:.1em;color:var(--muted)}
.swatches span{
  width:54px;height:54px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 1px rgba(41,40,36,.14), 0 0 0 4px var(--ivory-deep), 0 0 0 5px rgba(183,154,98,.5);
  position:relative;transition:transform .5s var(--ease);
}
.swatches li:hover span{transform:translateY(-3px)}

/* attire guide photos (PNG) */
.attire-guide figure{margin:0 auto 22px}
.attire-guide figure[hidden]{display:none}
.attire-guide img{display:block;width:100%;height:auto;border:1px solid rgba(183,154,98,.4);box-shadow:0 18px 40px -28px rgba(92,74,59,.45)}
@media (max-width:680px){
  .attire-rules{grid-template-columns:1fr;gap:34px}
  .motif-grid{grid-template-columns:1fr}
}

/* ============================================================
   GIFTS
   ============================================================ */
.gift-card{
  max-width:640px;margin:0 auto;padding:clamp(40px,7vw,64px) clamp(24px,6vw,64px);
  border:1px solid rgba(183,154,98,.55);position:relative;
}
.gift-card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(183,154,98,.25);pointer-events:none}
.gift-icon{width:58px;margin:0 auto 22px;fill:none;stroke:var(--gold);stroke-width:1.2;stroke-linejoin:round}
.gift-card .section-title{font-size:clamp(1.9rem,4.4vw,2.6rem);margin-bottom:22px}
.gift-text{font-family:var(--serif);font-size:clamp(1.25rem,2.8vw,1.45rem);line-height:1.6;color:var(--char);max-width:34em;margin:0 auto}
.gift-small{margin-top:22px;color:var(--muted);font-size:.98rem}
.gift-bank{margin:34px auto 0;padding-top:30px;border-top:1px solid rgba(183,154,98,.45);max-width:340px}
.gift-bank h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,6vw,1.8rem);color:var(--gold-dark);margin-bottom:18px}
.gift-qr{margin:0 auto 20px;width:min(100%,240px);padding:12px;background:#fff;border:1px solid rgba(183,154,98,.5);box-shadow:0 18px 40px -28px rgba(92,74,59,.45)}
.gift-qr[hidden]{display:none}
.gift-qr img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.gift-acct-name{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,4.8vw,1.4rem);color:var(--green);line-height:1.3}
.gift-acct-no{font-family:var(--sans);font-size:clamp(.95rem,4vw,1.05rem);letter-spacing:.14em;color:var(--char);margin-top:4px;font-variant-numeric:lining-nums}
.gift-scan{margin-top:14px;font-size:.84rem;letter-spacing:.06em;color:var(--muted)}

/* ============================================================
   PHOTOS
   ============================================================ */
.photos{padding-top:0}
.photos-text{max-width:34em;margin:0 auto 30px;font-size:1.08rem}
.photos-soon{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--muted)}

/* ============================================================
   RSVP
   ============================================================ */
.rsvp-deadline{font-size:1.05rem;color:rgba(247,243,234,.85);margin:-18px 0 36px}
.rsvp-deadline strong{font-weight:500;color:var(--ivory)}
.rsvp-card{
  max-width:560px;margin:0 auto;background:var(--ivory);color:var(--char);
  padding:clamp(28px,6vw,48px);text-align:left;position:relative;
}
.rsvp-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(183,154,98,.45);pointer-events:none}
.rsvp-step{display:none}
.rsvp-step.is-active{display:block;animation:stepIn .7s var(--ease-out)}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rsvp-intro{font-family:var(--serif);font-size:1.3rem;line-height:1.45;color:var(--green);margin-bottom:22px;text-align:center}
.field{display:block;margin-bottom:20px}
.field > span{display:block;font-size:.88rem;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.field em{font-style:normal;opacity:.8}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--char);
  background:#FBF9F4;border:1px solid rgba(184,170,152,.9);border-radius:0;
  padding:12px 14px;min-height:48px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(24,58,50,.12)}
.field textarea{resize:vertical;min-height:90px}

.rsvp-welcome{font-family:var(--serif);font-size:1.7rem;color:var(--green);text-align:center;line-height:1.2}
.rsvp-seats{text-align:center;color:var(--muted);margin:8px 0 26px}
.choice{border:0;padding:0;margin:0 0 22px}
.choice legend{font-size:.88rem;letter-spacing:.04em;color:var(--muted);margin-bottom:8px;padding:0}
.choice label{display:block;margin-bottom:10px;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid rgba(184,170,152,.9);
  font-family:var(--serif);font-size:1.25rem;color:var(--green);
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.choice span::before{content:"";width:14px;height:14px;border-radius:50%;border:1px solid var(--gold);flex:none;transition:box-shadow .35s var(--ease), background-color .35s var(--ease)}
.choice input:checked + span{border-color:var(--green);background:rgba(24,58,50,.04)}
.choice input:checked + span::before{background:var(--green);box-shadow:inset 0 0 0 3px var(--ivory)}
.choice input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.attend-extra{animation:stepIn .6s var(--ease-out)}
.names .field{margin-bottom:12px}

.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:1.4em;font-size:.95rem;color:#8A2E2E;margin:-4px 0 14px}
.form-msg:empty{margin:0;min-height:0}
.btn-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:6px}
.btn-row .text-link{color:var(--muted)}

#stepDone,#stepClosed{text-align:center}
#stepDone:focus{outline:none}
.done-mark{width:62px;margin:4px auto 16px;fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.done-mark *{stroke-dasharray:1;stroke-dashoffset:1}
#stepDone.is-active .done-mark circle{animation:draw 1.2s var(--ease) forwards}
#stepDone.is-active .done-mark path{animation:draw .8s var(--ease) .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done-title{font-family:var(--serif);font-size:2rem;color:var(--green);margin-bottom:10px}
.done-text{color:var(--muted);margin-bottom:20px;line-height:1.6}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--green);color:var(--ivory);text-align:center;
  padding:80px var(--pad-x) calc(64px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(183,154,98,.35);
}
.monogram.small{width:70px;margin:0 auto 20px}
.footer .mono-letter{fill:var(--ivory)}
.footer-names{font-family:var(--serif);font-size:2rem;font-weight:300}
.footer-date{margin-top:6px;letter-spacing:.08em;color:rgba(247,243,234,.75);font-size:.95rem}
.footer-note{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:rgba(247,243,234,.85)}

/* ============================================================
   ALL-CREAM PAPER THEME
   ============================================================ */
.band-green,.band-ivory-deep,.schedule{
  background-color:var(--ivory);
  background-image:var(--paper),var(--fibers);
  color:var(--char);
}
.section-title.light{color:var(--green)}
.ornament.light i{background:var(--gold)}
.count-unit span{color:var(--green)}
.count-unit small{color:var(--muted)}
.count-unit + .count-unit::before{background:rgba(196,166,123,.6)}
.btn-outline-light{border-color:var(--gold);color:var(--green)}
.btn-outline-light:hover{background:rgba(255,255,255,.35);border-color:var(--green)}
.btn-green{background:var(--green);color:var(--card)}
.rsvp-deadline{color:var(--muted)}
.rsvp-deadline strong{color:var(--green)}
.rsvp-card{background-color:var(--card);background-image:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -28px rgba(92,74,59,.45)}
.field input,.field select,.field textarea{background:#FFFDF9;border-color:rgba(196,174,148,.9)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(196,166,123,.22)}
.timeline .dot{background:var(--ivory)}
.swatches span{box-shadow:0 0 0 1px rgba(74,63,53,.14), 0 0 0 4px var(--ivory), 0 0 0 5px rgba(196,166,123,.55)}
.nav{background:rgba(244,236,223,.95);border-bottom-color:rgba(196,166,123,.4)}

/* hero: soft blush-cream light, like stationery under daylight */
.hero{
  background-color:var(--ivory);
  background-image:
    var(--paper),var(--fibers),
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255,252,246,.85), transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(232,210,196,.35), transparent 70%),
    radial-gradient(ellipse 55% 45% at 10% 10%, rgba(236,220,200,.45), transparent 70%);
}
.hero-frame{border-color:rgba(196,166,123,.5)}
.hero-frame::after{border-color:rgba(196,166,123,.25)}

/* script names, like engraved calligraphy */
.names{
  font-family:var(--script);font-weight:400;
  font-size:clamp(4rem,14vw,7.2rem);line-height:1.05;margin:14px 0 4px;
  color:var(--green);
}
.names .name{letter-spacing:0;padding:0 .1em}
.names .amp{font-family:var(--script);font-style:normal;font-size:.42em;margin:-.05em 0 -.1em;color:var(--gold-dark)}
.hero-message{color:var(--green)}
.footer-names{font-family:var(--script);font-size:2.8rem;line-height:1.2}

.hero .hero-frame,.hero .scroll-cue{z-index:1}

/* footer in deep cream */
.footer{
  position:relative;overflow:hidden;
  background-color:var(--ivory);background-image:var(--paper),var(--fibers);
  color:var(--char);border-top:1px solid rgba(196,166,123,.45);
}
.footer .mono-letter{fill:var(--green)}
.footer-date{color:var(--muted)}
.footer-note{color:var(--green)}

@media (max-width:560px){
  .hero-inner{padding-top:36px}
}

/* ============================================================
   ENVELOPE RSVP — title, deadline and form all sit on one card
   tucked into an envelope (like a letter pulled halfway out).
   envelope.png (941 x 1672) is drawn twice: .env-back sits behind the
   card, .env-front (clipped to the three front flaps) sits on top of it.
   The card grows upward with its content; the envelope stays put under it.
   Every offset below is a % of the envelope's width, measured from the artwork.
   ============================================================ */
.rsvp{padding-left:0;padding-right:0}
.envelope{position:relative;isolation:isolate;width:100%;max-width:580px;margin:0 auto;text-align:left}

/* card spans x 86 -> 776 of the artwork; its bottom edge hides behind the front flap (y 1000) */
.envelope .rsvp-card{
  position:relative;z-index:1;display:flow-root;box-sizing:border-box;
  width:73.3%;max-width:none;margin:0 0 0 9.14%;
  /* bottom padding keeps the form above the side flaps (they start at y 745) */
  padding:7% 5.5% 31%;
  aspect-ratio:690/492;            /* never shorter than the envelope's own card */
  background-color:#FFFEFB;background-image:var(--paper);
  border:1px solid rgba(196,166,123,.45);
  box-shadow:0 3px 10px -4px rgba(92,74,59,.28);
}
.envelope .rsvp-card::before{inset:5px;border-color:rgba(196,166,123,.38)}

/* the envelope artwork: pulled up so its y = 1000 lines up with the card's bottom edge */
.env-art{position:relative;height:0;padding-top:177.68%;margin:-106.26% 0 -38.47%;pointer-events:none;user-select:none}
.env-art img{display:block;width:100%;height:100%;max-width:none}
.env-back,.env-front{position:absolute;inset:0}
.env-back{z-index:0}
.env-back img{filter:drop-shadow(0 10px 14px rgba(92,74,59,.16))}
.env-front{
  z-index:2;
  filter:drop-shadow(0 -2px 3px rgba(92,74,59,.22));
}
/* only the left flap, right flap and bottom flap — the card shows through between them */
.env-front img{
  clip-path:polygon(0.00% 38.28%, 9.35% 38.28%, 9.35% 44.38%, 11.90% 44.74%, 35.18% 57.42%, 54.94% 57.54%, 77.68% 45.81%, 80.34% 44.92%, 82.04% 44.62%, 82.04% 36.18%, 100.00% 36.18%, 100.00% 100.00%, 0.00% 100.00%);
}

/* ---- letterhead: "KINDLY / Rsvp" at the top of the card ---- */
.rsvp-head{text-align:center;margin-bottom:clamp(14px,4.2vw,24px)}
.rsvp-title{margin:0;font-weight:400;line-height:1;color:var(--green)}
.envelope .rsvp-head .ornament{margin:8px auto 10px}
.envelope .rsvp-deadline{
  margin:0;font-size:clamp(.82rem,3.4vw,.95rem);letter-spacing:.04em;color:var(--muted);
}
.envelope .rsvp-deadline strong{font-weight:500;color:var(--green);white-space:nowrap}

.envelope .rsvp-intro{font-size:clamp(1.05rem,4.3vw,1.3rem);margin-bottom:16px}
.envelope .rsvp-welcome{font-size:clamp(1.4rem,6vw,1.7rem)}
.envelope .rsvp-seats{margin:6px 0 20px}
.envelope .choice span{font-size:clamp(1.02rem,4.2vw,1.25rem);padding:11px 14px}
.envelope .field{margin-bottom:16px}
.envelope .done-title{font-size:clamp(1.6rem,6.4vw,2rem)}
.envelope .rsvp-cta{margin-top:clamp(16px,5vw,24px);display:flex;align-items:center;justify-content:center;
  text-decoration:none;white-space:nowrap;letter-spacing:.1em;padding-left:12px;padding-right:12px}
.rsvp-legacy[hidden]{display:none !important}
/* the card is narrow on phones: keep button labels on one line */
.envelope .btn-row{gap:10px}
.envelope .btn-row .text-link{white-space:nowrap}
.envelope .btn-row .btn{padding-left:clamp(14px,5vw,28px);padding-right:clamp(14px,5vw,28px);letter-spacing:.1em;white-space:nowrap}

/* the guest-name list reuses the hero's .names class — keep it plain inside the card */
.envelope .rsvp-card .names{display:block;margin:0;font:inherit;line-height:inherit;color:inherit}
.envelope .rsvp-card .names .field{margin-bottom:16px}
.envelope .rsvp-card .names .field > span{font-family:var(--sans)}

/* ============================================================
   SECTION TITLES — every title uses the "KINDLY / Rsvp" lockup:
   small spaced capitals on top, large script word underneath
   ============================================================ */
.section-title,.rsvp-title{font-weight:400;line-height:1;letter-spacing:0;color:var(--green)}
.title-kicker{
  display:block;font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(1rem,4.6vw,1.4rem);letter-spacing:.42em;text-indent:.42em;line-height:1.2;
}
.title-script{
  display:block;font-family:var(--script);font-weight:400;
  font-size:clamp(2.7rem,12.5vw,3.7rem);line-height:1.05;margin-top:-.06em;
}
.section-title .title-script{padding:.04em 0 .08em}

/* ============================================================
   CONFETTI — a quick burst once the heart is scratched open
   ============================================================ */
.confetti-canvas{
  position:fixed;inset:0;width:100vw;height:100vh;
  pointer-events:none;z-index:999;
}

/* ============================================================
   PHOTO BACKGROUNDS — scratch card page + hero
   (intro-bg.png / hero-bg.png in the same folder; without them the old
   cream paper / warm cocoa shows instead)
   ============================================================ */
.intro-scratch{
  background-color:var(--ivory);
  background-image:
    linear-gradient(rgba(250,246,238,.38),rgba(250,246,238,.55)),
    url("intro-bg.png"), var(--paper), var(--fibers);
  background-size:cover,cover,auto,auto;
  background-position:center,center,0 0,0 0;
  background-repeat:no-repeat,no-repeat,repeat,repeat;
}
.intro-pre,.intro-hint,.intro-skip,.intro-continue{color:var(--green);text-shadow:0 0 12px rgba(250,246,238,.95),0 0 3px rgba(250,246,238,.8)}

/* hero: cream paper by default; when hero-bg.png exists it fills the section
   (the <img class="hero-bg"> is removed by onerror if the file is missing) */
.hero{overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;z-index:0}

/* hero shows only: script names, date, ornament */
.hero .hero-inner{max-width:100%;width:100%}
.hero .names{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:baseline;justify-content:center;gap:.14em;
  margin:0;font-family:var(--script);font-weight:400;line-height:1.1;white-space:nowrap;
  font-size:clamp(2.35rem,11.6vw,6.8rem);color:var(--green);
}
.hero .names .name{padding:0 .02em;letter-spacing:0}
.hero .names .amp{font-family:var(--script);font-style:normal;font-size:.78em;margin:0;color:var(--green);line-height:1}
.hero .date-line{
  margin:clamp(16px,4.4vw,34px) 0 0;font-family:var(--serif);font-weight:500;text-transform:uppercase;
  font-size:clamp(.98rem,4.2vw,1.55rem);letter-spacing:.22em;text-indent:.22em;line-height:1.3;color:var(--green);
}
.hero-orn{
  display:block;width:clamp(170px,48vw,300px);height:auto;margin:clamp(14px,3.6vw,26px) auto 0;overflow:visible;
  fill:none;stroke:var(--green);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;
}
.hero-orn .orn-fill{fill:var(--green);stroke:none}
.hero .hero-greeting{color:var(--green);margin-bottom:12px}
.hero .names,.hero .date-line{text-shadow:0 0 16px rgba(255,255,255,.35)}

/* ============================================================
   IDLE ANIMATIONS — soft, slow movement while the page is just sitting there.
   CSS only. Uses the individual `translate` / `scale` properties so it never
   fights the scroll-reveal `transform`. Everything is switched off for
   visitors who prefer reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  /* --- 1. gold glints drifting across the whole page (4 layers, offset timing) --- */
  html::before,html::after,body::before,body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:0;
    background-repeat:no-repeat;will-change:opacity,translate;
  }
  html::before{background-image:
    radial-gradient(circle at 8% 22%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 31% 9%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 54% 31%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 77% 14%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 92% 41%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 18% 63%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 66% 72%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 88% 88%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px);animation:glint 8s ease-in-out 1s infinite}
  html::after{background-image:
    radial-gradient(circle at 14% 41%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 42% 19%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 63% 8%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 86% 27%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 26% 82%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 51% 58%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 79% 64%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 94% 12%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px);animation:glint 10s ease-in-out 4s infinite}
  body::before{background-image:
    radial-gradient(circle at 5% 71%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 36% 47%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 58% 92%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 71% 38%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 90% 66%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 22% 15%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 47% 78%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 83% 5%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px);animation:glint 9s ease-in-out 6s infinite}
  body::after{background-image:
    radial-gradient(circle at 12% 93%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 29% 33%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 49% 6%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 69% 55%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 84% 81%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 96% 30%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 38% 68%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px),
    radial-gradient(circle at 61% 22%, rgba(255,247,228,.95) 0 1.2px, rgba(214,182,126,.55) 1.7px, transparent 5px);animation:glint 11s ease-in-out 2.5s infinite}
  @keyframes glint{0%{opacity:0;translate:0 14px}50%{opacity:.85;translate:0 0}100%{opacity:0;translate:0 -14px}}

  /* --- 2. hero: slow photo zoom, floating names that breathe light, twinkling ornament --- */
  .hero-bg{animation:kenburns 26s ease-in-out infinite alternate}
  @keyframes kenburns{from{scale:1}to{scale:1.07}}
  .hero .names{animation:nameFloat 8s ease-in-out infinite,nameGlow 6s ease-in-out infinite}
  @keyframes nameFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
  @keyframes nameGlow{0%,100%{text-shadow:0 0 14px rgba(255,255,255,.30)}50%{text-shadow:0 0 30px rgba(255,255,255,.80),0 0 6px rgba(255,255,255,.45)}}
  .hero .date-line{animation:nameFloat 9s ease-in-out -2s infinite}
  .hero-orn{animation:ornGlow 5s ease-in-out infinite}
  @keyframes ornGlow{0%,100%{opacity:.75}50%{opacity:1}}
  .hero-orn .orn-fill{transform-box:fill-box;transform-origin:center;animation:ornPulse 3.4s ease-in-out infinite}
  @keyframes ornPulse{0%,100%{scale:1}50%{scale:1.45}}

  /* --- 3. section titles: a gold shimmer sweeps across the script word --- */
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .title-script{
      background-image:linear-gradient(100deg,var(--green) 0%,var(--green) 42%,#C4A67B 50%,var(--green) 58%,var(--green) 100%);
      background-size:260% 100%;background-position:120% 0;
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;color:transparent;
      animation:titleShimmer 9s ease-in-out infinite;
    }
    @keyframes titleShimmer{0%,55%{background-position:120% 0}100%{background-position:-20% 0}}
  }

  /* --- 4. ornaments: the little diamond glows and pulses --- */
  .ornament b{animation:diamondPulse 3.6s ease-in-out infinite}
  @keyframes diamondPulse{0%,100%{scale:1;box-shadow:0 0 0 0 rgba(196,166,123,0)}50%{scale:1.35;box-shadow:0 0 8px 1px rgba(196,166,123,.55)}}

  /* --- 5. order of the day: floating icons, pulsing dots, a light running down the line --- */
  .timeline .tl-icon img{animation:iconFloat 6s ease-in-out infinite}
  .timeline li:nth-child(2) .tl-icon img{animation-delay:-1.5s}
  .timeline li:nth-child(3) .tl-icon img{animation-delay:-3s}
  .timeline li:nth-child(4) .tl-icon img{animation-delay:-4.5s}
  @keyframes iconFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -6px;rotate:1.5deg}}
  .timeline li.is-in .dot{animation:dotPulse 3.2s ease-out infinite}
  .timeline li:nth-child(2).is-in .dot{animation-delay:.8s}
  .timeline li:nth-child(3).is-in .dot{animation-delay:1.6s}
  .timeline li:nth-child(4).is-in .dot{animation-delay:2.4s}
  @keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(196,166,123,.65)}70%,100%{box-shadow:0 0 0 11px rgba(196,166,123,0)}}
  .timeline::after{
    content:"";position:absolute;left:50%;top:2%;width:3px;height:64px;margin-left:-1.5px;pointer-events:none;
    background:linear-gradient(transparent,rgba(196,166,123,.95),transparent);border-radius:2px;
    animation:lineRun 6s ease-in-out infinite;
  }
  @keyframes lineRun{0%{top:1%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:92%;opacity:0}}

  /* --- 6. venue photos and gift: slow bob --- */
  .venue-photo img{animation:iconFloat 9s ease-in-out infinite}
  .venue:nth-of-type(2) .venue-photo img{animation-delay:-4s}
  .gift-icon{animation:iconFloat 5.5s ease-in-out infinite}
  .gift-qr{animation:qrGlow 4.5s ease-in-out infinite}
  @keyframes qrGlow{0%,100%{box-shadow:0 18px 40px -28px rgba(92,74,59,.45),0 0 0 0 rgba(196,166,123,0)}50%{box-shadow:0 18px 40px -28px rgba(92,74,59,.45),0 0 22px 2px rgba(196,166,123,.45)}}

  /* --- 7. attire: color circles breathe one after another --- */
  .swatches li span{animation:swatchBreath 5s ease-in-out infinite}
  .swatches li:nth-child(2n) span{animation-delay:-1.2s}
  .swatches li:nth-child(3n) span{animation-delay:-2.4s}
  .swatches li:nth-child(5n) span{animation-delay:-3.6s}
  @keyframes swatchBreath{0%,100%{scale:1}50%{scale:1.07}}

  /* --- 8. RSVP: the envelope floats, the button shimmers --- */
  .envelope{animation:envFloat 7s ease-in-out infinite}
  @keyframes envFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
  .envelope .rsvp-cta{position:relative;overflow:hidden;animation:ctaGlow 3.6s ease-in-out infinite}
  .envelope .rsvp-cta::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.30) 50%,transparent 70%);
    translate:-130% 0;animation:btnSheen 4.2s ease-in-out infinite;
  }
  @keyframes btnSheen{0%,35%{translate:-130% 0}80%,100%{translate:130% 0}}
  @keyframes ctaGlow{0%,100%{box-shadow:0 0 0 0 rgba(92,74,59,0)}50%{box-shadow:0 6px 22px -6px rgba(92,74,59,.45)}}

  /* --- 9. scratch card page: hint breathes, stars twinkle around the lace frame --- */
  .intro-hint{animation:hintBreath 2.8s ease-in-out 3s infinite}
  .intro-scratch.is-done .intro-hint{animation:none}
  @keyframes hintBreath{0%,100%{opacity:1}50%{opacity:.45}}
  .intro-heart::before,.intro-heart::after{
    content:"\2726";position:absolute;color:var(--gold);pointer-events:none;
    font-size:clamp(14px,4.4vw,22px);line-height:1;opacity:0;text-shadow:0 0 8px rgba(255,255,255,.9);
    animation:starTwinkle 3.6s ease-in-out infinite;
  }
  .intro-heart::before{left:-4%;top:16%}
  .intro-heart::after{right:-3%;bottom:20%;animation-delay:1.8s}
  @keyframes starTwinkle{0%,100%{opacity:0;scale:.5}50%{opacity:1;scale:1.15}}

  /* --- 10. footer: names glow softly --- */
  .footer-names{animation:footGlow 6s ease-in-out infinite}
  @keyframes footGlow{0%,100%{text-shadow:0 0 0 rgba(196,166,123,0)}50%{text-shadow:0 0 18px rgba(196,166,123,.55)}}
}

/* ============================================================
   ASSET ANIMATIONS — every image gets its own kind of movement
   (added on top of the general idle effects above; same reduced-motion rule)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @keyframes floatY{0%,100%{translate:0 0}50%{translate:0 -6px}}

  /* envelope.png — the card peeks up and down, the whole envelope sways, the flaps glow */
  .envelope{animation:envFloat 7s ease-in-out infinite,envSway 9s ease-in-out infinite}
  @keyframes envSway{0%,100%{rotate:-.5deg}50%{rotate:.5deg}}
  .envelope .rsvp-card{animation:cardPeek 5.5s ease-in-out infinite}
  @keyframes cardPeek{0%,100%{translate:0 3px}50%{translate:0 -6px}}
  .env-front{animation:flapGlow 5s ease-in-out infinite}
  @keyframes flapGlow{
    0%,100%{filter:drop-shadow(0 -2px 3px rgba(92,74,59,.22)) drop-shadow(0 0 0 rgba(214,182,126,0))}
    50%{filter:drop-shadow(0 -2px 3px rgba(92,74,59,.22)) drop-shadow(0 0 16px rgba(214,182,126,.65))}
  }

  /* oval-frame.png — the lace frame glows gold */
  .intro-heart-frame{animation:frameGlow 4.6s ease-in-out infinite}
  @keyframes frameGlow{
    0%,100%{filter:drop-shadow(0 14px 22px rgba(120,95,70,.26)) drop-shadow(0 0 0 rgba(214,182,126,0))}
    50%{filter:drop-shadow(0 14px 22px rgba(120,95,70,.26)) drop-shadow(0 0 24px rgba(214,182,126,.8))}
  }

  /* swan.png — neck sways, they glide a little, a ripple spreads under each swan */
  .intro-swan-img{
    transform-origin:50% 100%;
    animation:swanBob 6.5s ease-in-out infinite,swanSway 7s ease-in-out infinite,swanGlide 9s ease-in-out infinite;
  }
  .intro-swan-slot.is-right .intro-swan-img{animation-delay:.8s,1.6s,2.4s}
  @keyframes swanSway{0%,100%{rotate:-2deg}50%{rotate:2.5deg}}
  @keyframes swanGlide{0%,100%{translate:-4px 0}50%{translate:5px 0}}
  .intro-swan-slot::after{
    content:"";position:absolute;left:21%;bottom:1%;width:58%;height:11%;pointer-events:none;
    border:1px solid rgba(196,166,123,.65);border-radius:50%;opacity:0;
    animation:ripple 4.2s ease-out infinite;
  }
  .intro-swan-slot.is-right::after{animation-delay:1.7s}
  @keyframes ripple{0%{scale:.35;opacity:.9}100%{scale:1.45;opacity:0}}

  /* hero-bg.png — a soft band of light slides across the photo */
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
    translate:-110% 0;animation:lightSweep 13s ease-in-out 2s infinite;
  }
  @keyframes lightSweep{0%,30%{translate:-110% 0}85%,100%{translate:110% 0}}

  /* intro-bg.png — warm light drifts slowly over the photo */
  .intro-inner,.intro-swans{position:relative;z-index:1}
  .intro-scratch::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(ellipse 60% 40% at 30% 28%,rgba(255,244,222,.55),transparent 70%),
               radial-gradient(ellipse 50% 35% at 75% 70%,rgba(255,236,208,.40),transparent 70%);
    animation:lightDrift 16s ease-in-out infinite alternate;
  }
  @keyframes lightDrift{from{translate:-6% -3%;scale:1}to{translate:7% 4%;scale:1.12}}

  /* the four timeline icons — each moves in its own way */
  .timeline li:nth-child(1) .tl-icon img{animation:carRumble 4.5s ease-in-out infinite}                       /* arrival: the car idles and rumbles */
  .timeline li:nth-child(2) .tl-icon img{animation:floatY 6s ease-in-out -1.5s infinite,ceremonyGlow 5s ease-in-out infinite}   /* ceremony: breathes and glows */
  .timeline li:nth-child(3) .tl-icon img{transform-origin:50% 88%;animation:floatY 6s ease-in-out -3s infinite,clink 4.5s ease-in-out infinite} /* cocktail: bottle and glasses clink */
  .timeline li:nth-child(4) .tl-icon img{animation:floatY 6s ease-in-out -4.5s infinite,tableShine 5s ease-in-out infinite}      /* dinner: the table catches the light */
  @keyframes carRumble{
    0%,100%{translate:0 0;rotate:0deg}
    10%{translate:-2px 1px;rotate:-.9deg}20%{translate:2px 0;rotate:.9deg}30%{translate:-1px -3px;rotate:0deg}
    45%{translate:0 -2px}60%{translate:0 0}
  }
  @keyframes ceremonyGlow{
    0%,100%{scale:1;filter:drop-shadow(0 0 0 rgba(214,182,126,0))}
    50%{scale:1.07;filter:drop-shadow(0 0 10px rgba(214,182,126,.75))}
  }
  @keyframes clink{0%,55%,100%{rotate:0deg}10%{rotate:-6deg}22%{rotate:4deg}34%{rotate:-2.5deg}46%{rotate:1deg}}
  @keyframes tableShine{
    0%,100%{scale:1;filter:brightness(1) saturate(1)}
    50%{scale:1.05;filter:brightness(1.1) saturate(1.2)}
  }

  /* venue photos — float and breathe */
  .venue-photo img{animation:floatY 9s ease-in-out infinite,photoBreath 7s ease-in-out infinite}
  .venue:nth-of-type(2) .venue-photo img{animation-delay:-4s,-3s}
  @keyframes photoBreath{0%,100%{scale:1}50%{scale:1.025}}

  /* attire-guide photos — each floats on its own beat and a light sheen crosses it */
  .attire-guide figure{position:relative;overflow:hidden;animation:floatY 8s ease-in-out infinite}
  .attire-guide figure:nth-of-type(2){animation-delay:-2.7s}
  .attire-guide figure:nth-of-type(3){animation-delay:-5.3s}
  .attire-guide figure::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);
    translate:-120% 0;animation:btnSheen 8s ease-in-out infinite;
  }
  .attire-guide figure:nth-of-type(2)::after{animation-delay:2.6s}
  .attire-guide figure:nth-of-type(3)::after{animation-delay:5.2s}

  /* pnb-qr.png — a gold scan line sweeps up and down the code */
  .gift-qr{position:relative;overflow:hidden}
  .gift-qr::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(transparent 47%,rgba(196,166,123,.85) 50%,transparent 53%);
    translate:0 -52%;animation:qrScan 3.8s ease-in-out infinite;
  }
  @keyframes qrScan{0%{translate:0 -52%}50%{translate:0 52%}100%{translate:0 -52%}}
}

/* ============================================================
   VIDEO INTRO — a blank full-screen cover with a poster; one tap anywhere
   starts the mp4 (plays once), then it fades away into the invitation.
   ============================================================ */
html.video-lock,html.video-lock body{overflow:hidden}
.video-intro{
  position:fixed;inset:0;z-index:2000;background:var(--ivory);
  overflow:hidden;touch-action:none;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  transition:opacity .9s ease,visibility 0s linear 0s;
}
.video-intro.is-leaving{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s ease,visibility 0s linear .9s}
.vi-video,.vi-poster{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;background:transparent}
.vi-video{z-index:0}
.vi-poster{z-index:1;transition:opacity .4s ease}
.video-intro.is-playing .vi-poster{opacity:0;pointer-events:none}

.vi-spinner{
  position:absolute;z-index:2;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  opacity:0;pointer-events:none;transition:opacity .3s ease .4s;
  animation:viSpin .9s linear infinite;
}
.video-intro.is-started:not(.is-playing) .vi-spinner{opacity:1}
@keyframes viSpin{to{rotate:360deg}}

.vi-tap{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.vi-tap:focus-visible{outline:2px solid #fff;outline-offset:-6px}

.vi-skip{
  position:absolute;z-index:4;right:calc(14px + env(safe-area-inset-right,0px));top:calc(14px + env(safe-area-inset-top,0px));
  min-height:40px;padding:0 18px;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:rgba(25,17,12,.38);border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.video-intro.is-playing .vi-skip{opacity:1;pointer-events:auto;transition-delay:1.2s}

/* ?debug panel for the video intro */
.vi-debug{
  position:absolute;z-index:5;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));margin:0;padding:10px 12px;
  max-height:48%;overflow:auto;border-radius:8px;background:rgba(0,0,0,.82);color:#9CFFB0;
  font:11px/1.45 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all;
  -webkit-user-select:text;user-select:text;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .h-seq,[data-reveal],.intro-fade,.intro-heart{opacity:1 !important;transform:none !important}
  .intro-heart{animation:none !important}
  .ink > *,.monogram .mono-ring,.done-mark *{stroke-dashoffset:0 !important}
  .sketch{transform:none !important}
  .scroll-cue{display:none}
  .confetti-canvas{display:none !important}
  .intro-swan-img{animation:none !important}
}