/* AIRA emerald-noir stylesheet — FRAME-SCROLL */
:root{
    --emerald:#12503D;
    --emerald-deep:#0A3327;
    --gold:#C9A227;
    --gold-light:#E8C874;
    --ivory:#F5EFE3;
    --line:#4A8069;
  }
  /* CINEMATIC FADE REVEAL */
  .fade-veil{position:fixed; inset:0; height:100vh; height:100dvh; z-index:999; background:#000; cursor:pointer; transition:opacity 1.6s ease, visibility 1.6s ease; display:flex; align-items:center; justify-content:center; flex-direction:column; touch-action:none; overscroll-behavior:none;}
  .fade-veil.hide{opacity:0; visibility:hidden; pointer-events:none;}
  .fv-icon{width:60px; height:60px; border-radius:50%; border:1.5px solid #C9A227; display:flex; align-items:center; justify-content:center; font-size:22px; color:#C9A227; margin-bottom:16px; animation:pulseGate3 2.2s ease-in-out infinite;}
  @keyframes pulseGate3{0%,100%{transform:scale(1); opacity:.8;} 50%{transform:scale(1.08); opacity:1;}}
  /* fv-names removed — no couple name shown before opening */
  .fv-tap{letter-spacing:.35em; font-size:12px; text-transform:uppercase; color:#C9A227;}

  /* GOLD CORNER ORNAMENTS */
  .corner{position:absolute; width:60px; height:60px; border-color:var(--gold); opacity:.6; z-index:3;}
  .corner-tl{top:14px; left:14px; border-top:2px solid; border-left:2px solid;}
  .corner-tr{top:14px; right:14px; border-top:2px solid; border-right:2px solid;}
  .corner-bl{bottom:14px; left:14px; border-bottom:2px solid; border-left:2px solid;}
  .corner-br{bottom:14px; right:14px; border-bottom:2px solid; border-right:2px solid;}

  /* EMERALD GLOW pulse */
  @keyframes glowPulse{ 0%,100%{opacity:.12;} 50%{opacity:.28;} }
  .glow-pulse{position:absolute; top:-10%; left:50%; transform:translateX(-50%); width:640px; height:640px; background:radial-gradient(circle,rgba(201,162,39,.3),transparent 60%); animation:glowPulse 4s ease-in-out infinite; pointer-events:none;}
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:'Cormorant Garamond', serif;
    background:var(--emerald-deep);
    color:var(--ivory);
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:'Playfair Display', serif;}
  .section{padding:90px 24px; max-width:720px; margin:0 auto; text-align:center;}
  .divider{
    width:70px; height:2px; background:var(--gold); margin:28px auto; position:relative;
  }
  .divider::before,.divider::after{content:'✦'; position:absolute; top:-10px; color:var(--gold); font-size:15px;}
  .divider::before{left:-26px;} .divider::after{right:-26px;}

  /* HERO */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 50% 20%, rgba(201,162,39,.15), transparent 60%),
      linear-gradient(180deg, var(--emerald) 0%, var(--emerald-deep) 100%);
    text-align:center; padding:40px 24px; position:relative;
    border-bottom:1px solid var(--line); overflow:hidden;
  }
  .hero-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0.3;
  }
  .hero-overlay{
    position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,42,33,.5) 0%, var(--emerald-deep) 100%); z-index:1;
  }
  .hero > *{position:relative; z-index:2;}

  /* The rule above is meant for the hero's CONTENT — it lifts the text over
     the video. But it matches every child, including the three decorative
     layers, and it has the same specificity as their own rules while coming
     later in the file, so it was overriding them.

     .glow-pulse is 640px tall. Once it stopped being absolutely positioned
     it became a real flex item and pushed a whole empty screen above the
     names. Putting the three layers back where they belong removes that
     empty space and restores the gold glow behind the couple's names. */
  .hero > .hero-video{position:absolute; z-index:0;}
  .hero > .hero-overlay{position:absolute; z-index:1;}
  .hero > .glow-pulse{position:absolute; z-index:1;}
  .hero::before{
    content:''; position:absolute; inset:18px; border:1px solid var(--gold); opacity:.35; pointer-events:none;
  }
  .hero .eyebrow{letter-spacing:.4em; font-size:13px; color:var(--gold); text-transform:uppercase; margin-bottom:18px;}
  .hero h1{font-size:clamp(42px,9vw,76px); font-weight:700; line-height:1.1; color:var(--ivory);}
  .hero .amp{color:var(--gold); font-style:italic; font-size:0.6em; display:block; margin:8px 0;}
  .hero p.date-line{font-size:20px; letter-spacing:.15em; margin-top:22px; color:var(--gold-light);}

  /* SCRATCH REVEAL */
  .scratch-wrap{margin:34px auto 0; position:relative; width:280px; height:120px;}
  #scratchCanvas{border-radius:14px; touch-action:none; cursor:grab;}
  .scratch-under{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    flex-direction:column; border-radius:14px; background:var(--emerald-deep); border:1px solid var(--gold);
  }
  .scratch-under .d{font-family:'Playfair Display'; font-size:26px; color:var(--gold-light);}
  .scratch-hint{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:10px;}

  /* COUNTDOWN */
  .countdown{display:flex; gap:20px; justify-content:center; margin-top:36px; flex-wrap:wrap;}
  .cd-box{min-width:70px;}
  .cd-num{font-family:'Playfair Display'; font-size:34px; color:var(--gold-light); font-weight:700;}
  .cd-label{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory); opacity:.65;}

  /* STORY */
  .section p.lead{font-size:20px; line-height:1.8; color:#D9CFC0;}

  /* GALLERY */
  .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px;}
  .gallery div{
    aspect-ratio:1; border-radius:6px; display:flex; align-items:center; justify-content:center;
    color:var(--gold-light); font-size:12px; letter-spacing:.1em; cursor:pointer; transition:transform .3s;
    background:linear-gradient(135deg,var(--emerald),var(--emerald-deep)); border:1px solid var(--line);
  }
  .gallery div:hover{transform:scale(1.04); border-color:var(--gold);}

  /* MAP */
  .map-frame{width:100%; height:280px; border-radius:12px; overflow:hidden; margin-top:24px; border:1px solid var(--gold); filter:saturate(.9);}
  .map-frame iframe{width:100%; height:100%; border:0;}

  /* VENUE MAP EDITOR (customer self-service) */
  .map-editor{
    background:var(--emerald); border:1px solid var(--gold); border-radius:14px; padding:22px 20px; margin-top:26px; text-align:left;
  }
  .map-editor .me-label{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light); margin-bottom:10px; font-family:'Playfair Display';}
  .map-editor .me-row{display:flex; gap:10px; flex-wrap:wrap;}
  .map-editor input{
    flex:1; min-width:180px; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
    font-family:'Cormorant Garamond'; font-size:16px; background:var(--emerald-deep); color:var(--ivory);
  }
  .map-editor button{
    padding:12px 22px; border:none; border-radius:8px; background:var(--gold); color:var(--emerald-deep);
    font-family:'Playfair Display'; font-weight:700; font-size:15px; letter-spacing:.05em; cursor:pointer; transition:background .25s;
  }
  .map-editor button:hover{background:var(--gold-light);}
  .me-hint{font-size:13px; color:#B9AC94; margin-top:8px;}
  .me-error{font-size:13px; color:#E88A8A; margin-top:8px; display:none;}
  .me-success{font-size:13px; color:var(--gold-light); margin-top:8px; display:none;}

  /* TIMELINE */
  .timeline{margin-top:30px; text-align:left; position:relative; padding-left:28px;}
  .timeline::before{content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line);}
  .tl-item{position:relative; padding-bottom:28px;}
  .tl-item:last-child{padding-bottom:0;}
  .tl-item::before{content:''; position:absolute; left:-28px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid var(--emerald-deep);}
  .tl-time{font-family:'Playfair Display'; font-size:16px; color:var(--gold-light); letter-spacing:.05em;}
  .tl-title{font-size:19px; color:var(--ivory); margin-top:2px;}

  /* RSVP */
  .rsvp{background:var(--emerald); border-radius:16px; padding:44px 28px; border:1px solid var(--gold);}
  .rsvp input, .rsvp select, .rsvp textarea{
    width:100%; padding:13px 16px; margin-top:14px; border-radius:8px; border:1px solid var(--line);
    font-family:'Cormorant Garamond'; font-size:17px; background:var(--emerald-deep); color:var(--ivory);
  }
  .rsvp label{display:block; text-align:left; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); margin-top:18px;}
  .rsvp button{
    margin-top:26px; width:100%; padding:15px; border:none; border-radius:8px;
    background:var(--gold); color:var(--emerald-deep); font-family:'Playfair Display'; font-weight:700; font-size:16px;
    letter-spacing:.1em; cursor:pointer; transition:background .25s;
  }
  .rsvp button:hover{background:var(--gold-light);}
  .rsvp-success{display:none; margin-top:18px; color:var(--gold-light); font-size:16px;}

  /* MUSIC TOGGLE */
  .music-toggle{
    position:fixed; bottom:22px; right:22px; width:52px; height:52px; border-radius:50%;
    background:var(--gold); color:var(--emerald-deep); border:none; font-size:20px; cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.4); z-index:50; display:flex; align-items:center; justify-content:center;
  }
  .music-toggle.playing{animation:spin 5s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  footer{padding:40px 24px; text-align:center; font-size:13px; letter-spacing:.2em; color:var(--gold); text-transform:uppercase; border-top:1px solid var(--line);}

  .gallery img{width:100%; height:100%; object-fit:cover; border-radius:6px;}
  .gallery div{position:relative;}
  .photo-remove{position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:none; font-size:12px; cursor:pointer; line-height:1;}
  .gallery-editor{background:var(--emerald); border:1px solid var(--gold); border-radius:14px; padding:22px 20px; margin-top:20px; text-align:left;}
  .gallery-editor .ge-label{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light); margin-bottom:10px; font-family:'Playfair Display';}
  .gallery-editor .ge-row{display:flex; gap:10px; flex-wrap:wrap;}
  .gallery-editor input{flex:1; min-width:180px; padding:12px 14px; border-radius:8px; border:1px solid var(--line); font-family:'Cormorant Garamond'; font-size:15px; background:var(--emerald-deep); color:var(--ivory);}
  .gallery-editor button{padding:12px 20px; border:none; border-radius:8px; background:var(--gold); color:var(--emerald-deep); font-family:'Playfair Display'; font-weight:700; cursor:pointer; font-size:14px;}
  .ge-hint{font-size:13px; color:#9bbdad; margin-top:8px;}

  /* SPARKLE BURST on tap */
  .sparkle{position:fixed; pointer-events:none; z-index:1002; font-size:16px; animation:sparkleFly .9s ease-out forwards; will-change:transform,opacity;}
  @keyframes sparkleFly{ 0%{transform:translate(0,0) scale(.2) rotate(0deg); opacity:1;} 70%{opacity:1;} 100%{transform:translate(var(--dx),var(--dy)) scale(1.15) rotate(200deg); opacity:0;} }

/* ==========================================================
   SCRATCH-TO-REVEAL  (this block only - nothing above changed)
   ========================================================== */
/* ---------- black velvet ---------- */
#scratchCanvas{position:absolute; inset:0; z-index:2; border-radius:14px; touch-action:none; cursor:grab;}
#scratchCanvas:active{cursor:grabbing;}
.scratch-under{z-index:1;}
/* an emerald light that follows the finger across the nap of the velvet */
.velvet-glow{
  position:absolute; width:150px; height:150px; margin:-75px 0 0 -75px;
  left:0; top:0; z-index:3; pointer-events:none; opacity:0;
  border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(90,220,170,.5), rgba(201,162,39,.22) 42%, transparent 68%);
  transition:opacity .5s ease;
}
.velvet-glow.on{opacity:1;}

/* ---------- scratch material flecks (shared, body-level) ---------- */
.aira-fleck{
  position:fixed; z-index:1200; pointer-events:none; opacity:1;
  animation:airaFleck .95s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes airaFleck{
  0%{opacity:.95; transform:translate(0,0) rotate(0deg) scale(1);}
  100%{opacity:0; transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.5);}
}
@media (prefers-reduced-motion:reduce){ .aira-fleck{display:none;} }

/* ---------- staged date reveal: day, month, year, label, glow, continue ---------- */
/* the reveal panel stacks: date line, then the label, then Continue */
.scratch-under{flex-direction:column;}
.scratch-under .dr-day,.scratch-under .dr-month,.scratch-under .dr-year{
  display:inline-block; opacity:0; transform:translateY(10px) scale(.94);
  transition:opacity .62s ease, transform .62s cubic-bezier(.22,1,.36,1);
}
.scratch-under .dr-month{margin:0 .34em;}
.scratch-under.s1 .dr-day{opacity:1; transform:none;}
.scratch-under.s2 .dr-month{opacity:1; transform:none;}
.scratch-under.s3 .dr-year{opacity:1; transform:none;}
.scratch-under .dr-label{
  display:block; margin-top:7px; font-size:8px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.scratch-under.s4 .dr-label{opacity:1; transform:none;}
.scratch-under .dr-cta{
  margin-top:9px; padding:6px 14px; font:inherit; font-size:9px; line-height:1;
  letter-spacing:.22em; text-transform:uppercase; cursor:pointer; border-radius:0;
  color:var(--gold-light); background:transparent; border:1px solid var(--gold);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1),
             background .35s ease, color .35s ease;
}
.scratch-under.s5 .dr-cta{opacity:1; transform:none;}
.scratch-under .dr-cta:hover{background:var(--gold); color:#062B21;}
.scratch-under.s5{animation:drGlow9959 1.6s ease-out;}
@keyframes drGlow9959{
  0%{box-shadow:0 0 0 0 rgba(90,220,170,.5);}
  40%{box-shadow:0 0 34px 6px rgba(90,220,170,.5);}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}

/* the prompt steps back once the guest starts working the surface */
.is-scratching + .scratch-hint,.is-scratching ~ .scratch-hint{opacity:.35;}

/* ==========================================================================
   AIRA MOTION SYSTEM
   Appended block. Changes how things move, never what the template looks
   like - no colour, font family, layout or decoration is altered here.
   ========================================================================== */

:root{
  /* Authored easing. The default `ease` is symmetrical, which is why stock
     web motion reads as cheap: real objects accelerate hard and land soft. */
  --e-drape :cubic-bezier(.62,.02,.14,1);   /* heavy physical panels        */
  --e-silk  :cubic-bezier(.16,.86,.22,1);   /* long decelerate, big surfaces */
  --e-lift  :cubic-bezier(.19,1,.22,1);     /* type and cards arriving       */
  --e-settle:cubic-bezier(.40,.90,.30,1);   /* micro corrections             */
  /* Duration scale tied to how far a thing travels. */
  --t-1:260ms; --t-2:520ms; --t-3:820ms; --t-4:1250ms; --t-5:1900ms;
}

/* ---------- typographic rendering (quality only, no faces changed) ---------- */
html{-webkit-text-size-adjust:100%;}
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  font-synthesis-weight:none;
}
h1,h2,h3{text-wrap:balance;}
p,.lead{text-wrap:pretty;}

/* ---------- masked word reveal for display type ---------- */
.aira-w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.18em; margin-bottom:-.18em;   /* room for descenders */
}
.aira-w.aira-w-block{display:block;}
.aira-w > i{
  display:inline-block; font-style:inherit; color:inherit;
  transform:translate3d(0,112%,0) rotate(1.6deg); opacity:0; filter:blur(9px);
  transition:transform var(--t-4) var(--e-lift),
             opacity 900ms var(--e-lift),
             filter 900ms var(--e-lift);
  transition-delay:calc(var(--wi,0) * 105ms + 170ms);
}
.aira-w > i.aira-w-block{display:block;}
.aira-w.on > i{transform:none; opacity:1; filter:blur(0);}

/* ---------- hero beats ---------- */
.aira-beat{
  opacity:0; transform:translate3d(0,var(--beat-rise,22px),0);
  filter:blur(var(--beat-blur,5px));
  transition:opacity var(--t-3) var(--e-lift),
             transform var(--t-3) var(--e-lift),
             filter var(--t-3) var(--e-lift);
  transition-delay:calc(var(--bi,0) * 135ms);
}
.aira-beat.aira-on{opacity:1; transform:none; filter:blur(0);}

/* ---------- scroll storytelling ---------- */
.aira-rise{
  opacity:0; transform:translate3d(0,34px,0);
  transition:opacity var(--t-3) var(--e-lift), transform var(--t-3) var(--e-lift);
}
.aira-rise.aira-in{opacity:1; transform:none;}
.aira-stagger{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity var(--t-3) var(--e-lift), transform var(--t-3) var(--e-lift);
  transition-delay:calc(var(--i,0) * 85ms + 110ms);
}
.aira-in > .aira-stagger,
.in > .aira-stagger,
.visible > .aira-stagger{opacity:1; transform:none;}

/* ---------- the opening: weight, then release ---------- */
.aira-gate.aira-press{transform:scale(.9955); transition:transform 200ms var(--e-settle);}
.aira-seam{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  z-index:6; pointer-events:none; opacity:0; filter:blur(1px);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.92),transparent);
}
.aira-seam.aira-seam-h{
  top:50%; bottom:auto; left:0; right:0; width:auto; height:2px; margin:-1px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
}
.aira-gate.aira-opening .aira-seam{animation:airaSeamV 950ms var(--e-silk) forwards;}
.aira-gate.aira-opening .aira-seam.aira-seam-h{animation:airaSeamH 950ms var(--e-silk) forwards;}
@keyframes airaSeamV{0%{opacity:0;transform:scaleY(.15);}20%{opacity:1;}100%{opacity:0;transform:scaleY(1.2);}}
@keyframes airaSeamH{0%{opacity:0;transform:scaleX(.15);}20%{opacity:1;}100%{opacity:0;transform:scaleX(1.2);}}

@media (prefers-reduced-motion:reduce){
  .aira-w > i,.aira-beat,.aira-rise,.aira-stagger{
    transition:none !important; transform:none !important;
    opacity:1 !important; filter:none !important;
  }
  .aira-seam{display:none;}
}

/* ---------- Emerald Noir: the veil now lifts instead of cross-fading ---------- */
/* It was `opacity 1.6s ease` - a flat dissolve, the least cinematic opening
   there is. Same veil, same identity, but it now recedes from the camera
   and defocuses as it goes, which reads as a physical cloth being lifted. */
.fade-veil{
  transition:opacity 1.45s var(--e-silk),
             visibility 1.45s var(--e-silk),
             transform var(--t-5) var(--e-drape),
             filter 1.45s var(--e-silk) !important;
  will-change:transform,opacity;
}
.fade-veil.hide{transform:scale(1.16); filter:blur(12px);}
.fv-icon,.fv-tap{transition:opacity 520ms var(--e-settle), transform 760ms var(--e-lift);}
.fade-veil.hide .fv-icon,.fade-veil.hide .fv-tap{opacity:0; transform:translateY(-14px);}
.hero h1{letter-spacing:-.012em; line-height:1.03;}


/* ============================================================
   EXTRA SECTIONS — all optional. aira-bind.js removes the whole
   <section data-aira-section="..."> when the couple left that
   detail blank, so none of these needs a hidden state.
   ============================================================ */
.couple-details{display:flex; align-items:center; justify-content:center; gap:28px; margin-top:34px; flex-wrap:wrap;}
.cd-person{flex:1 1 240px; min-width:220px;}
.cd-name{
  font-family:'Dancing Script', cursive; font-weight:700;
  font-size:34px; line-height:1.25; color:var(--gold-light);
  letter-spacing:.04em; margin-bottom:14px;
  text-shadow:0 2px 16px rgba(201,162,39,.25);
}
.cd-parents{font-size:18px; color:var(--ivory); font-style:italic;}
.cd-line{font-size:16px; color:#BFD3C7; margin-top:4px;}
.cd-amp{font-family:'Playfair Display', serif; font-size:34px; color:var(--gold); flex:0 0 auto; opacity:.85;}

.pre-events{margin-top:30px; display:grid; gap:16px;}
.pe-item{
  border:1px solid var(--line); border-radius:12px; padding:20px 18px;
  background:linear-gradient(135deg,var(--emerald),var(--emerald-deep));
}
.pe-name{font-family:'Playfair Display', serif; font-size:22px; color:var(--gold-light);}
.pe-when{font-size:16px; color:var(--ivory); margin-top:6px;}
.pe-dot{color:var(--gold); margin:0 8px;}
.pe-place{font-size:15px; color:#BFD3C7; margin-top:4px; font-style:italic;}

.dress-code{display:flex; gap:24px; margin-top:30px; flex-wrap:wrap; justify-content:center;}
.dc-col{flex:1 1 240px; min-width:220px;}
.dc-head{
  font-family:'Playfair Display', serif; font-size:19px; color:var(--gold-light);
  letter-spacing:.08em; text-transform:uppercase;
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.dc-col p{font-size:17px; line-height:1.7; color:#BFD3C7;}

.stay-code{
  display:inline-block; margin-top:18px; padding:10px 22px;
  border:1px dashed var(--gold); border-radius:8px; color:var(--gold-light);
  font-family:'Playfair Display', serif; letter-spacing:.16em; font-size:16px;
}

.closing{padding-top:40px; padding-bottom:50px;}
.closing-rule{width:180px; height:1px; margin:0 auto; background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.closing-text{font-family:'Playfair Display', serif; font-size:26px; color:var(--ivory); line-height:1.5; margin:28px 0 14px;}
.closing-names{font-family:'Dancing Script', cursive; font-weight:700; font-size:30px; color:var(--gold-light); letter-spacing:.04em; margin-bottom:28px;}

/* ============================================================
   GALLERY SLIDESHOW
   #galleryGrid keeps its id and stays the direct parent of the
   slides, because aira-bind.js writes the couple's photos into
   exactly that element. Only the layout changes.
   ============================================================ */
.slideshow{
  position:relative; margin-top:30px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--emerald-deep); touch-action:pan-y;
}
.gallery{
  display:flex; grid-template-columns:none; gap:0; margin-top:0;
  transition:transform 720ms cubic-bezier(.4,0,.2,1); will-change:transform;
}
.gallery > div{
  flex:0 0 100%; width:100%; aspect-ratio:1;
  border-radius:0; border:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-light); font-size:13px;
  background:linear-gradient(135deg,var(--emerald),var(--emerald-deep));
  position:relative; cursor:default;
}
.gallery > div:hover{transform:none; border-color:transparent;}
.gallery img{width:100%; height:100%; object-fit:cover; border-radius:0;}

.ss-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; padding:0;
  border:1px solid var(--gold); background:rgba(8,42,33,.66);
  color:var(--gold-light); font-size:24px; line-height:1; cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center;
  transition:background .22s ease;
}
.ss-arrow:hover{background:rgba(8,42,33,.92);}
.ss-prev{left:12px;} .ss-next{right:12px;}
.slideshow.ss-single .ss-arrow{display:none;}

.ss-dots{display:flex; gap:9px; justify-content:center; margin-top:16px; flex-wrap:wrap;}
.ss-dot{
  width:9px; height:9px; border-radius:50%; padding:0;
  border:1px solid var(--gold); background:transparent; cursor:pointer;
  transition:background .26s ease, transform .26s ease;
}
.ss-dot.on{background:var(--gold); transform:scale(1.25);}
.ss-dots:empty{display:none;}

/* ============================================================
   PAGE FRAME
   Replaces the four L-shaped .corner elements this template used
   to carry: they were the same idea, only at the corners.

   Held at the edges of the screen while the invitation scrolls
   behind it, so the whole page reads as one card.
   ============================================================ */
/* body is the containing block, so the frame is as tall as the whole
   invitation and travels with it rather than staying pinned to the screen. */
body{position:relative;}
.page-frame{
  position:absolute; inset:10px; z-index:40; pointer-events:none;
  border:30px solid transparent;
  border-image:url("./assets/frame.svg") 34 round;
}

@media (max-width:560px){
  .page-frame{inset:6px; border-width:20px;}
  .cd-name{font-size:28px;}
  .cd-amp{font-size:26px; flex-basis:100%;}
  .closing-names{font-size:24px;}
  .ss-arrow{width:36px; height:36px; font-size:20px;}
  .ss-prev{left:8px;} .ss-next{right:8px;}
}

@media (prefers-reduced-motion: reduce){ .gallery{transition:none;} }
@media print{ .page-frame{display:none;} }

/* ---- hero names ---- */
.hero h1{
  font-family:'Dancing Script', cursive;
  font-weight:700;
  font-size:clamp(52px,11vw,92px);
  line-height:1.2;
  letter-spacing:.01em;
  text-transform:none;
}
.hero h1 .amp{
  font-family:'Playfair Display', serif;
  font-weight:700; font-size:.38em; letter-spacing:.04em;
}