/* AIRA modern-minimal stylesheet — HERO-FONT-2 */
:root{
    --emerald:#0B1B3B;
    --emerald-deep:#070F26;
    --gold:#C9A227;
    --gold-light:#E8C874;
    --ivory:#F5EFE3;
    --line:#2A3E6E;
  }
  /* BOOK-STYLE REVEAL */
  .book-cover{position:fixed; inset:0; height:100vh; height:100dvh; z-index:999; background:linear-gradient(135deg,#0B1B3B,#070F26); transform-origin:left center; transition:transform 1.3s cubic-bezier(.77,0,.18,1); display:flex; align-items:center; justify-content:center; border-right:2px solid var(--gold); touch-action:none; overscroll-behavior:none;}
  .book-cover.open{transform:rotateY(-100deg); pointer-events:none;}
  .book-cover-title{font-family:'Playfair Display'; font-size:32px; color:var(--gold-light); text-align:center; letter-spacing:.1em; transition:opacity 0.5s ease;}
  .book-cover.open .book-cover-title{opacity:0;}
  body{perspective:1800px;}

  /* GEOMETRIC PATTERN */
  .geo-pattern{position:absolute; inset:0; opacity:.08; pointer-events:none;
    background-image:
      linear-gradient(45deg, var(--gold) 1px, transparent 1px),
      linear-gradient(-45deg, var(--gold) 1px, transparent 1px);
    background-size:34px 34px;
  }
  *{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;}
  .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)
   ========================================================== */
/* ---------- minimal paper seal ---------- */
#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;}

/* ---------- 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:#050B1E;}
.scratch-under.s5{animation:drGlow9959 1.6s ease-out;}
@keyframes drGlow9959{
  0%{box-shadow:0 0 0 0 rgba(201,162,39,.4);}
  40%{box-shadow:0 0 34px 6px rgba(201,162,39,.4);}
  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;}
}

/* ---------- Modern Minimal: the page turn, weighted ---------- */
/* The cover already hinged on its left edge; it just did so at a uniform
   1.3s. A turning page is heavy at the start and feather-light at the end.
   Nothing added - this template's identity is that nothing is added. */
.book-cover{transition:transform var(--t-5) var(--e-drape) !important;}
.bc-inner,.bc-tap{transition:opacity 500ms var(--e-settle), transform 800ms var(--e-lift);}
.hero h1{letter-spacing:-.014em; line-height:1.02;}


/* ============================================================
   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:'Great Vibes', cursive; font-weight:400;
  font-size:44px; line-height:1.2; color:var(--gold-light);
  letter-spacing:.01em; 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:'Great Vibes', 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.
   ============================================================ */
.page-frame{
  position:fixed; 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:'Great Vibes', cursive;
  font-weight:400;
  font-size:clamp(54px,11.5vw,96px);
  line-height:1.18;
  letter-spacing:.01em;
  text-transform:none;
}
.hero h1 .amp{
  font-family:'Playfair Display', serif;
  font-weight:400; font-size:.34em; letter-spacing:.04em;
  text-transform:none;
}