:root{
  --paper:#fbfaf7;
  --paper-soft:#f6f1e8;
  --paper-blue:#eef4f5;

  --envelope-base:#d9c7ac;
  --envelope-mid:#c7af8c;
  --envelope-shade:#b39a73;
  --envelope-deep:#8c7350;

  --accent:#6b5636;
  --accent-dark:#4a3b24;
  --accent-soft:#a88e68;

  --ink:#372b1c;
  --ink-soft:#6b5d48;
  --ink-faint:#9b8d78;

  --card-bg:#ffffff;
  --card-back-tint:#f3f9fc;

  --line:#e6ddcf;
  --line-strong:#d5c7b0;

  --shadow:0 24px 60px rgba(74,59,36,.12);
  --shadow-soft:0 12px 30px rgba(74,59,36,.08);

  --radius-sm:14px;
  --radius-md:24px;
  --radius-lg:36px;

  --font-display:'Cormorant Garamond', serif;
  --font-body:'EB Garamond', serif;
  --font-utility:'Jost', sans-serif;

  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;

  --stage-w:clamp(255px, 30vw + 130px, 460px);
  --card-w:calc(var(--stage-w) * .92);
  --envelope-h-ratio:1;

  --flap-depth:56%;
  --flap-height:62%;

  --card-scale-rest:.78;
  --card-scale-peek:.84;
  --card-scale-final:1.38;

  /* la cartolina cresce cambiando DAVVERO dimensione (width), non solo
     visivamente via transform:scale — su Safari, ingrandire un'immagine
     con scale() può "impastarla" perché il browser riusa un livello
     grafico disegnato in piccolo invece di ridisegnare da capo. Cambiando
     la larghezza vera, il browser è costretto a ridisegnare l'immagine
     alla dimensione corretta ad ogni fase. Stessi valori finali di prima,
     ottenuti in un modo diverso. */
  --card-w-rest:calc(var(--card-w) * var(--card-scale-rest));
  --card-w-peek:calc(var(--card-w) * var(--card-scale-peek));
  --card-w-final:calc(var(--card-w) * var(--card-scale-final));

  --card-rest-offset:0px;
  --card-peek-offset:calc(var(--stage-w) * -.30);
  --card-final-offset:0px;

  --ease-elegant:cubic-bezier(.22,.61,.22,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-out-back:cubic-bezier(.2,.9,.25,1.1);

  --t-flap:850ms;
  --t-peek:650ms;
  --t-envelope-fade:750ms;
  --t-controls-fade:500ms;
  --t-card:820ms;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:linear-gradient(180deg,var(--paper-blue) 0, var(--paper) 16%, var(--paper) 100%);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

button,
input,
textarea{
  font:inherit;
}

.page{
  position:relative;
  overflow-x:hidden;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
}

.skip-link:focus{
  left:1rem;
  top:1rem;
  z-index:1000;
  background:#fff;
  padding:.8rem 1rem;
  border-radius:999px;
  border:1px solid var(--line-strong);
}

.side-nav{
  position:fixed;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding:1rem .7rem;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  border:1px solid rgba(213,199,176,.65);
  border-radius:999px;
  box-shadow:var(--shadow-soft);
}

.side-nav a{
  width:12px;
  height:12px;
  border-radius:999px;
  background:#d9ccb8;
  border:1px solid rgba(74,59,36,.14);
  position:relative;
  transition:transform .25s var(--ease-soft),background .25s var(--ease-soft);
}

.side-nav a span{
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  background:#fff;
  color:var(--accent-dark);
  padding:.35rem .6rem;
  border-radius:999px;
  font:500 .72rem/1 var(--font-utility);
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  box-shadow:var(--shadow-soft);
}

.side-nav a:hover,
.side-nav a.is-active{
  transform:scale(1.18);
  background:var(--accent);
}

.side-nav a:hover span,
.side-nav a:focus-visible span{
  opacity:1;
}

.section{
  padding:clamp(4rem,8vw,7rem) min(7vw,5rem);
  position:relative;
}

.section-inner{
  max-width:1120px;
  margin:0 auto;
}

.kicker{
  font-family:var(--font-utility);
  font-size:.76rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .9rem;
}

.section-title{
  font-family:var(--font-display);
  font-size:clamp(2.3rem,4vw,4.8rem);
  line-height:.95;
  font-weight:500;
  margin:0 0 1rem;
  color:var(--accent-dark);
}

.section-subtitle{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,2.4vw,2.5rem);
  line-height:1.02;
  margin:0 0 1rem;
  color:var(--accent-dark);
}

.lead,
.copy,
.detail-text{
  font-size:clamp(1.12rem,1.25vw,1.35rem);
  line-height:1.68;
  color:var(--ink-soft);
  max-width:48rem;
  margin:0;
}

.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25vh 5vw 2.2vh;
  position:relative;
}

.hero-shell{
  display:grid;
  gap:.7rem;
  justify-items:center;
  width:100%;
}

.hero-eyebrow{
  font-family:var(--font-utility);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
}

.stage-row{
  position:relative;
  width:fit-content;
  margin:0 auto;
}

.invite-stage{
  position:relative;
  width:var(--stage-w);
  height:calc(var(--stage-w) * 1.24);
  margin:0 auto;
}

.envelope{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:calc(var(--stage-w) * var(--envelope-h-ratio));
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  isolation:isolate;
  cursor:pointer;
}

/* livello di sicurezza dietro a tutto: se una rotazione 3D lascia una
   fessura sub-pixel, si vede questo colore (coerente con la busta) invece
   dello sfondo della pagina. A differenza del tentativo precedente, questo
   partecipa alla dissolvenza finale insieme al resto — non un quadrato
   fisso che resta indietro. */
.envelope::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:4px;
  background:var(--envelope-shade);
}

.env-front-panel,
.env-flap-shape{
  background:linear-gradient(160deg,var(--envelope-base),var(--envelope-mid) 55%,var(--envelope-shade));
}

.env-back{
  background:linear-gradient(200deg,#f2e8d3,#e6d8b8 140%);
}

.env-back{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:4px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5) inset,
    0 34px 60px -22px rgba(74,59,36,.28),
    0 14px 26px -14px rgba(74,59,36,.18);
}

.env-back-texture,
.env-front-panel::after,
.env-flap-shape::after{
  position:absolute;
  inset:0;
  opacity:.22;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.27 0 0 0 0 0.19 0 0 0 0 0.11 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size:300px 300px;
  pointer-events:none;
}

.env-back-texture{
  z-index:1;
  border-radius:2px;
}

.env-front-panel{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:4px;
  clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%,50% var(--flap-depth),0% 0%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5) inset,
    0 26px 50px -24px rgba(74,59,36,.24);
}

.env-front-panel::before{
  content:"";
  position:absolute;
  inset:0;
  clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%,50% var(--flap-depth),0% 0%);
  background:linear-gradient(180deg,rgba(74,59,36,.16),transparent 18%);
  pointer-events:none;
}

.env-front-panel::after,
.env-flap-shape::after{
  content:"";
}

.env-fold-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.fold-bottom{
  fill:var(--envelope-shade);
  stroke:rgba(60,45,25,.2);
  stroke-width:.5;
  vector-effect:non-scaling-stroke;
}

.env-flap{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:var(--flap-height);
  z-index:4;
  transform-origin:50% 0%;
  transform-style:preserve-3d;
  transition:transform var(--t-flap) var(--ease-elegant);
}

.env-flap-shape{
  position:absolute;
  inset:0;
  z-index:1;
  clip-path:polygon(0% 0%,100% 0%,60% 90%,56% 96%,50% 100%,44% 96%,40% 90%);
  box-shadow:0 2px 8px rgba(74,59,36,.15);
}

.env-flap-shape::before{
  content:"";
  position:absolute;
  top:13px;
  left:13px;
  right:13px;
  bottom:13px;
  clip-path:polygon(0% 0%,100% 0%,60% 90%,56% 96%,50% 100%,44% 96%,40% 90%);
  background:linear-gradient(160deg,var(--envelope-base),var(--envelope-mid) 55%,var(--envelope-shade));
}

#stage.is-flap-behind .env-flap-shape{
  background:#f2e8d3;
}

#stage.is-flap-behind .env-flap-shape::before{
  background:linear-gradient(200deg,#f2e8d3,#e6d8b8 140%);
}

.card{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--card-w-rest);
  aspect-ratio:1/1;
  z-index:2;
  cursor:pointer;
  transform-style:preserve-3d;
  transform:translate(-50%,calc(-50% + var(--card-rest-offset)));
  transition:width var(--t-card) var(--ease-elegant), transform var(--t-card) var(--ease-elegant);
  box-shadow:0 18px 30px rgba(74,59,36,.22);
}

.card-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:2px;
  background:var(--card-bg);
  border:1px solid #eaf2f6;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}

.card-face img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:2px;
  display:block;
}

.card-back{
  transform:rotateY(180deg);
}

#stage.is-flap-open .env-flap{
  transform:rotateX(180deg);
}

#stage.is-flap-behind .env-flap{
  z-index:1;
}

#stage.is-peeking .card{
  width:var(--card-w-peek);
  transform:translate(-50%,calc(-50% + var(--card-peek-offset)));
  transition:width var(--t-peek) var(--ease-out-back), transform var(--t-peek) var(--ease-out-back);
}

#stage.is-fading .env-back,
#stage.is-fading .env-back-texture,
#stage.is-fading .env-front-panel,
#stage.is-fading .envelope::before{
  transform:translateY(18%);
  opacity:0;
  transition:
    transform var(--t-envelope-fade) var(--ease-elegant),
    opacity var(--t-envelope-fade) var(--ease-elegant);
}

#stage.is-fading .env-flap{
  /* 29.03% = 18% compensato per l'altezza del lembo (--flap-height: 62%
     della busta): transform:translateY si calcola sull'altezza PROPRIA
     dell'elemento, non su quella della busta intera — quindi qui serve
     una percentuale più alta per ottenere lo stesso spostamento in pixel
     dei pezzi che usano il 18% sulla loro (maggiore) altezza. Se cambi
     --flap-height, ricalcola: 18 / (flap-height/100). */
  transform:translateY(29.03%) rotateX(180deg);
  opacity:0;
  transition:
    transform var(--t-envelope-fade) var(--ease-elegant),
    opacity var(--t-envelope-fade) var(--ease-elegant);
}

#stage.is-rotated .card{
  width:var(--card-w-final);
  transform:translate(-50%,calc(-50% + var(--card-final-offset)));
  transition:width var(--t-card) var(--ease-elegant), transform var(--t-card) var(--ease-elegant);
}

#stage.is-rotated .card.is-flipped{
  width:var(--card-w-final);
  transform:translate(-50%,calc(-50% + var(--card-final-offset))) rotateY(180deg);
}

.stage-controls{
  position:absolute;
  right:100%;
  top:54%;
  margin-right:calc(var(--stage-w) * .22);
  display:flex;
  flex-direction:column;
  gap:.9rem;
  opacity:0;
  transform:translate(-6px,-50%);
  pointer-events:none;
  transition:
    opacity var(--t-controls-fade) var(--ease-soft),
    transform var(--t-controls-fade) var(--ease-soft);
}

.stage-controls.is-visible{
  opacity:1;
  transform:translate(0,-50%);
  pointer-events:auto;
}

.icon-btn{
  appearance:none;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--envelope-shade);
  background:#fff;
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  transition:
    background .25s var(--ease-soft),
    color .25s var(--ease-soft),
    border-color .25s var(--ease-soft),
    transform .2s var(--ease-soft);
}

.icon-btn svg{
  width:19px;
  height:19px;
}

.icon-btn:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.icon-btn:active{
  transform:scale(.94);
}

.icon-btn::after{
  content:attr(data-tooltip);
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(4px);
  padding:.42rem .62rem;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:var(--accent-dark);
  border:1px solid rgba(213,199,176,.85);
  box-shadow:var(--shadow-soft);
  font:500 .68rem/1 var(--font-utility);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:
    opacity .18s var(--ease-soft),
    transform .18s var(--ease-soft);
}

.icon-btn:hover::after,
.icon-btn:focus-visible::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

.section-card{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(213,199,176,.7);
  box-shadow:var(--shadow);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,3rem);
}

.invitation-note{
  padding-top:2rem;
}

.invitation-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.7rem;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.72));
  border:1px solid rgba(213,199,176,.8);
  border-radius:40px;
  padding:clamp(2.4rem,5vw,4.5rem) clamp(1.8rem,4vw,3.5rem);
  box-shadow:var(--shadow);
}

.invitation-name{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,6vw,4.4rem);
  font-style:italic;
  font-weight:500;
  color:var(--accent-dark);
  margin:0;
  line-height:1.05;
  transition:opacity .3s ease;
}

.invitation-message{
  font-size:clamp(1.1rem,1.6vw,1.3rem);
  color:var(--ink-soft);
  max-width:34rem;
  margin:.4rem 0 0;
}

.event-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}

.detail-panel{
  padding:1.4rem 1.5rem;
  border-left:1px solid var(--line);
  display:grid;
  gap:1rem;
}

.mini-list{
  display:grid;
  gap:1rem;
}

.mini-item{
  padding-bottom:1rem;
  border-bottom:1px solid rgba(213,199,176,.6);
}

.mini-item:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.mini-label{
  font-family:var(--font-utility);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 .25rem;
}

.mini-value{
  font-size:1.18rem;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0;
}

.reach-grid,
.transfer-grid,
.gift-grid,
.countdown-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem,3vw,3rem);
  align-items:start;
}

.map-box{
  background:linear-gradient(180deg,#f8f6f1,#f2ebe0);
  border:1px solid var(--line);
  border-radius:32px;
  min-height:500px;
  padding:1.2rem;
  display:grid;
  gap:1rem;
  box-shadow:var(--shadow-soft);
}

.map-frame{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  min-height:360px;
  border:1px solid rgba(213,199,176,.7);
  background:#e8eceb;
}

.osm-map{
  width:100%;
  height:100%;
  min-height:360px;
}

/* Leaflet inietta i propri stili: qui li ammorbidiamo per farli combaciare
   con il tono della pagina (niente ombre dure, angoli coerenti col resto) */
.osm-map .leaflet-control-zoom{
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  overflow:hidden;
  box-shadow:var(--shadow-soft) !important;
}
.osm-map .leaflet-control-zoom a{
  background:#fff !important;
  color:var(--accent) !important;
  font-family:var(--font-utility);
}
.osm-map .leaflet-control-zoom a:hover{
  background:var(--paper-soft) !important;
}
.osm-map .leaflet-control-attribution{
  background:rgba(255,255,255,.82) !important;
  color:var(--ink-faint) !important;
  font-family:var(--font-utility);
  font-size:.62rem !important;
  border-radius:8px 0 0 0;
}
.osm-map .leaflet-popup-content-wrapper{
  border-radius:12px;
  font-family:var(--font-body);
  color:var(--ink);
}
.osm-map .leaflet-popup-tip{
  background:#fff;
}

.map-route-info{
  position:absolute;
  left:.8rem;
  bottom:.8rem;
  margin:0;
  padding:.5rem .85rem;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:999px;
  font:500 .74rem/1 var(--font-utility);
  letter-spacing:.03em;
  color:var(--ink-soft);
  box-shadow:var(--shadow-soft);
  z-index:400;
  pointer-events:none;
}

.pin-groups{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem 2rem;
}

.pin-group{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.pin-group-label{
  margin:0;
  font:600 .68rem/1 var(--font-utility);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.pin-list{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

/* pin di destinazione: goccia a bandiera, diversa dal pallino di partenza,
   cosi i due punti sulla mappa si distinguono a colpo d'occhio */
.dest-pin-icon svg{
  display:block;
  filter:drop-shadow(0 3px 4px rgba(74,59,36,.35));
}

.pin-btn{
  appearance:none;
  cursor:pointer;
  padding:.68rem .9rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font:500 .8rem/1 var(--font-utility);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  transition:background .22s var(--ease-soft), color .22s var(--ease-soft),
             border-color .22s var(--ease-soft), transform .18s var(--ease-soft);
}
.pin-btn:hover{
  background:var(--paper-soft);
  border-color:var(--line-strong);
}
.pin-btn:active{
  transform:translateY(1px);
}
.pin-btn.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.map-external-link{
  justify-self:start;
}

.mock-box,
.rsvp-box{
  border:1px dashed rgba(107,86,54,.35);
  border-radius:28px;
  padding:1.6rem;
  background:rgba(255,255,255,.62);
}

.rsvp-card{
  max-width:760px;
  margin:0 auto;
}

.rsvp-form{
  margin-top:2rem;
  display:grid;
  gap:1.4rem;
}

.rsvp-guests{
  display:grid;
  gap:1.2rem;
}

.rsvp-guest{
  border:1px solid var(--line);
  border-radius:24px;
  padding:1.2rem 1.4rem;
  background:rgba(255,255,255,.6);
}

.rsvp-guest-name{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.3rem;
  color:var(--accent-dark);
  margin:0 0 .8rem;
}

.rsvp-guest-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.rsvp-field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

.rsvp-field span{
  font-family:var(--font-utility);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.rsvp-field select{
  appearance:none;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:#fff;
  padding:.65rem .9rem;
  font:500 .95rem/1 var(--font-body);
  color:var(--ink);
  cursor:pointer;
}

.rsvp-field select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.rsvp-field input[type="text"]{
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:#fff;
  padding:.65rem .9rem;
  font:500 .95rem/1 var(--font-body);
  color:var(--ink);
}

.rsvp-field input[type="text"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.rsvp-field-altro{
  grid-column:1 / -1;
}

.rsvp-field-altro[hidden]{
  display:none;
}

.rsvp-actions{
  display:flex;
  align-items:center;
  gap:1.2rem;
  flex-wrap:wrap;
}

.rsvp-submit{
  min-width:200px;
}

.rsvp-submit:disabled{
  opacity:.6;
  cursor:default;
}

.rsvp-status{
  margin:0;
  font:500 .9rem/1.4 var(--font-utility);
  color:var(--ink-soft);
}

.rsvp-status.is-error{
  color:#a5432f;
}

.rsvp-status.is-success{
  color:#3f7a4a;
}

@media (max-width:640px){
  .rsvp-guest-fields{
    grid-template-columns:1fr;
  }
}


.titleless-gift .section-card{
  padding-top:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}

.dinner-card{
  background:linear-gradient(135deg,#4f4130 0%,#6b5636 50%,#8f7550 100%);
  color:#fff;
  border-radius:40px;
  padding:clamp(1.8rem,4vw,3.6rem);
  box-shadow:0 28px 60px rgba(74,59,36,.22);
}

.dinner-card .kicker,
.dinner-card .section-title,
.dinner-card .lead,
.dinner-card .copy{
  color:#fff;
}

.stay-header{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1rem;
  align-items:end;
  margin-bottom:1.5rem;
}

.carousel-shell{
  position:relative;
}

.carousel-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px,1fr);
  gap:1.1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:.4rem;
  scrollbar-width:none;
}

.carousel-track::-webkit-scrollbar{
  display:none;
}

.stay-card{
  scroll-snap-align:start;
  background:#fff;
  border:1px solid rgba(213,199,176,.72);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  min-height:100%;
}

.stay-media{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#e9dfd0,#d8c4a5);
}

.stay-media.one{
  background:linear-gradient(135deg,#e8dfd4,#c9b090), radial-gradient(circle at 65% 30%, rgba(255,255,255,.5), transparent 28%);
}

.stay-media.two{
  background:linear-gradient(135deg,#d9c8b5,#efebe4), radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 25%);
}

.stay-media.three{
  background:linear-gradient(135deg,#cfb796,#f4efe7), radial-gradient(circle at 70% 20%, rgba(255,255,255,.45), transparent 28%);
}

.stay-body{
  padding:1.25rem 1.2rem 1.4rem;
}

.stay-title{
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--accent-dark);
  margin:0 0 .4rem;
}

.stay-address,
.stay-note{
  margin:0;
  color:var(--ink-soft);
  font-size:1.08rem;
  line-height:1.55;
}

.carousel-controls{
  display:flex;
  gap:.7rem;
}

.ghost-btn{
  appearance:none;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:#fff;
  padding:.8rem 1rem;
  font:500 .78rem/1 var(--font-utility);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  cursor:pointer;
  transition:background .25s var(--ease-soft),transform .2s var(--ease-soft);
}

.ghost-btn:hover{
  background:#f4ecdf;
}

.ghost-btn:active{
  transform:translateY(1px);
}

.finale{
  padding-bottom:1.2rem;
}

.finale-wrap{
  text-align:center;
  display:grid;
  gap:1.6rem;
  justify-items:center;
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4,minmax(110px,1fr));
  gap:1rem;
  width:min(760px,100%);
}

.countdown-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:1.2rem;
  box-shadow:var(--shadow-soft);
}

.countdown-value{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:1;
  color:var(--accent-dark);
}

.countdown-label{
  display:block;
  margin-top:.4rem;
  font-family:var(--font-utility);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.days-left{
  font-family:var(--font-utility);
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
}

.footer-note{
  font-size:1.18rem;
  color:var(--ink-soft);
  margin:0;
}

.fade-up{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-elegant),transform .8s var(--ease-elegant);
}

.fade-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:980px){
  .side-nav{
    left:auto;
    right:16px;
    top:auto;
    bottom:16px;
    transform:none;
    flex-direction:row;
    padding:.8rem 1rem;
    overflow:auto;
    max-width:calc(100vw - 32px);
  }

  .side-nav a span{
    display:none;
  }

  .invitation-card,
  .event-grid,
  .reach-grid,
  .transfer-grid,
  .gift-grid,
  .countdown-grid{
    grid-template-columns:1fr;
  }

  .detail-panel{
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0;
    padding-top:1.4rem;
  }
}

@media (max-width:640px){
  .hero{
    padding-top:2.2vh;
  }

  .hero-shell{
    gap:.45rem;
  }

  .stage-row{
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    gap:1.2rem;
    width:auto;
  }

  .stage-controls{
    position:static;
    margin-right:0;
    flex-direction:row;
    transform:translateY(6px);
  }

  .stage-controls.is-visible{
    transform:translateY(0);
  }

  .section{
    padding-inline:1.15rem;
  }

  .section-title{
    font-size:clamp(2.2rem,12vw,3.4rem);
  }

  .invitation-card,
  .section-card,
  .dinner-card{
    border-radius:28px;
  }

  .countdown{
    grid-template-columns:repeat(2,minmax(120px,1fr));
  }

  .carousel-track{
    grid-auto-columns:88%;
  }

  .icon-btn::after{
    left:50%;
    top:calc(100% + 10px);
    transform:translateX(-50%) translateY(-4px);
  }

  .icon-btn:hover::after,
  .icon-btn:focus-visible::after{
    transform:translateX(-50%) translateY(0);
  }
}

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


.closing-photo{
  padding:0 0 0;
}

.closing-photo img{
  width:100%;
  display:block;
}