/* ═══════════════════════════════════════════════
   Michele e Flavia — 12.09.2026
   Palette estratta dalla partecipazione e dal menù
   ═══════════════════════════════════════════════ */

:root{
  /* palette ufficiale */
  --gold:      #B4947D;   /* brown / gold  */
  --dusky:     #C7A49E;   /* dusky pink    */
  --nude:      #E4C9B8;   /* nude pink     */
  --beige:     #E0D2C7;   /* beige         */
  --white:     #FFFFFF;

  /* derivati */
  --paper:     #FBF8F4;   /* carta avorio della partecipazione */
  --paper-2:   #F4EDE6;   /* fondo sezioni alternate */
  --ink:       #4A3B31;   /* testo principale */
  --ink-soft:  #7A6656;   /* testo secondario */
  --line:      #E5DACF;

  --serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script: 'Pinyon Script', 'Cormorant Garamond', cursive;

  --max:  1120px;
  --maxn: 660px;
  --pad:  clamp(1.25rem, 5vw, 2.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem, .95rem + .3vw, 1.125rem);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img,iframe{ max-width:100%; display:block; border:0; }
a{ color:var(--gold); }

/* ── layout ───────────────────────────────── */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:var(--maxn); }
.center{ text-align:center; }

.section{ padding-block:clamp(4rem, 9vw, 7.5rem); }
.section--tint{ background:var(--paper-2); }
.section--intro{ padding-block:clamp(3.5rem, 8vw, 6rem); }

/* ── tipografia ───────────────────────────── */
.eyebrow{
  margin:0 0 .75rem;
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}

.h2{
  margin:0;
  font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  font-weight:300;
  letter-spacing:.02em;
  line-height:1.15;
}

.lead{
  margin:0;
  font-size:clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight:300;
  font-style:italic;
  line-height:1.85;
  color:var(--ink-soft);
}
.lead--sm{ font-size:clamp(1.05rem, 1rem + .35vw, 1.25rem); }

.signature{
  margin:1.75rem 0 0;
  font-family:var(--script);
  font-size:clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  line-height:1;
  color:var(--gold);
}

.muted{ color:var(--ink-soft); }
.muted strong{ color:var(--ink); font-weight:500; }

.amp{ font-family:var(--script); font-size:.78em; color:var(--gold); padding-inline:.12em; }

/* filetto ornamentale */
.rule{
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  margin:1.5rem auto 2.25rem;
  max-width:230px;
  color:var(--gold);
  font-size:.7rem;
}
.rule span{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--beige),transparent); }

/* ── nav ──────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem var(--pad);
  background:rgba(251,248,244,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.nav.is-stuck{
  background:rgba(251,248,244,.92);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.nav__mono{
  font-family:var(--script);
  font-size:1.6rem; line-height:1;
  color:var(--ink); text-decoration:none;
  opacity:0; transform:translateY(-6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.nav.is-stuck .nav__mono{ opacity:1; transform:none; }
.nav__mono span{ color:var(--gold); }

.nav__links{ display:flex; gap:clamp(.9rem,2.5vw,2rem); margin-left:auto; }
.nav__links a{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  transition:color .25s;
}
.nav__links a:hover{ color:var(--gold); }
@media (max-width:560px){ .nav__links a:not(:last-child){ display:none; } }

/* ── hero ─────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:6rem var(--pad) 4rem;
  overflow:hidden;
  background:
    radial-gradient(115% 85% at 50% 0%, #FFFDFB 0%, var(--paper) 45%, var(--paper-2) 100%);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s var(--ease);
}
.hero__media img.is-loaded{ opacity:.34; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(251,248,244,.62) 0%, rgba(251,248,244,.46) 42%, rgba(251,248,244,.92) 100%);
}
.hero__inner{ position:relative; z-index:1; text-align:center; }
/* velo chiaro dietro al testo: tiene leggibili i nomi qualunque foto ci sia sotto */
.hero__inner::before{
  content:''; position:absolute; z-index:-1;
  inset:-12% -8%;
  background:radial-gradient(closest-side ellipse at 50% 45%,
    rgba(251,248,244,.92) 0%, rgba(251,248,244,.72) 55%, rgba(251,248,244,0) 100%);
}

.hero__names{
  margin:.2em 0 0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(3.4rem, 1.4rem + 11vw, 8rem);
  line-height:1.02;
  letter-spacing:.01em;
  color:var(--ink);
}
.hero__names .amp{ font-size:.5em; }

.hero__date{
  margin:0 0 2.5rem;
  font-size:clamp(.75rem,.68rem + .3vw,.92rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* invito a scorrere: testo esplicito + freccia, cliccabile */
.hero__scroll{
  position:absolute; bottom:1.75rem; left:50%; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:.5rem 1rem;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.hero__scroll:hover{ color:var(--gold); }
.hero__scroll-txt{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.5;
}
.hero__scroll-arrow{
  color:var(--gold);
  animation:bob 2s var(--ease) infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(6px); opacity:1 } }
@media (prefers-reduced-motion:reduce){ .hero__scroll-arrow{ animation:none; opacity:.8 } }
@media (max-width:420px){ .hero__scroll-txt{ letter-spacing:.14em; } }

/* ── bottoni ──────────────────────────────── */
.btn{
  display:inline-block;
  padding:.95em 2.4em;
  border:1px solid var(--gold);
  border-radius:2px;
  background:var(--gold);
  color:var(--white);
  font-family:var(--serif);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.btn:hover{ background:var(--ink); border-color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--gold); border-color:var(--gold); color:var(--white); }
.btn--sm{ padding:.7em 1.6em; font-size:.68rem; letter-spacing:.18em; }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:progress; }

/* ── countdown ────────────────────────────── */
.countdown{
  padding-block:clamp(2.5rem,6vw,4rem);
  background:var(--paper-2);
  border-block:1px solid var(--line);
}
.cd{ display:flex; justify-content:center; gap:clamp(.5rem,4vw,3.5rem); }
.cd__cell{ min-width:64px; }
.cd__num{
  display:block;
  font-size:clamp(2rem,1.2rem + 3.2vw,3.4rem);
  font-weight:300; line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cd__lab{
  display:block; margin-top:.6rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}

/* ── timeline ─────────────────────────────── */
.timeline{ list-style:none; margin:0 auto; padding:0; max-width:520px; text-align:left; }
.tl{
  display:grid;
  grid-template-columns:minmax(96px,120px) 1fr;
  gap:clamp(1rem,4vw,2.25rem);
  padding-block:2rem;
  border-bottom:1px solid var(--line);
}
.tl:last-child{ border-bottom:0; }
.tl__time{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); padding-top:.55rem;
}
.tl__body h3{
  margin:0 0 .35rem;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);
  font-weight:400; letter-spacing:.01em;
}
.tl__body p{ margin:0; color:var(--ink-soft); font-size:.98rem; }

/* ── card luoghi ──────────────────────────── */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(1.25rem,3vw,2rem);
  text-align:left;
}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.card__map{ aspect-ratio:4/3; background:var(--beige); }
.card__map iframe{ width:100%; height:100%; filter:grayscale(.35) sepia(.12); }
.card__body{ padding:1.6rem 1.5rem 1.75rem; display:flex; flex-direction:column; flex:1; }
.card__kicker{
  margin:0 0 .5rem;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.card__body h3{ margin:0 0 .6rem; font-size:1.35rem; font-weight:400; line-height:1.25; }
.card__addr{ margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
.card__note{
  margin:.9rem 0 0; padding:.75rem .9rem;
  background:var(--paper-2); border-left:2px solid var(--nude);
  font-size:.88rem; font-style:italic; color:var(--ink-soft); line-height:1.55;
}
.card .btn{ margin-top:auto; align-self:flex-start; margin-top:1.5rem; }

/* ── gallery ──────────────────────────────── */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* trittico: le tre foto sempre insieme */
  gap:clamp(.5rem,1.5vw,1rem);
}
/* su telefono: la prima a tutta larghezza, le altre due affiancate sotto */
@media (max-width:760px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery figure:first-child{ grid-column:1 / -1; aspect-ratio:4/3; }
  /* taglio orizzontale: alziamo un po' l'inquadratura per non perdere i volti */
  .gallery figure:first-child img{ object-position:center 42%; }
}
.gallery figure{ margin:0; overflow:hidden; background:var(--beige); aspect-ratio:3/4; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gallery figure:hover img{ transform:scale(1.04); }
.gallery .ph{
  display:grid; place-items:center;
  border:1px dashed var(--beige); background:var(--paper-2);
  color:var(--gold); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  aspect-ratio:3/4;
}

/* ── form ─────────────────────────────────── */
.form{ margin-top:2.5rem; text-align:left; }
.field{ margin:0 0 1.6rem; padding:0; border:0; }

.field label,.field legend,.pseudo-legend{
  display:block; padding:0;
  margin:0 0 .5rem;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
}
.opt{ letter-spacing:.1em; text-transform:none; opacity:.7; }

.field input[type=text],
.field input[type=tel],
.field select,
.field textarea{
  width:100%;
  padding:.85rem 1rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.02rem;
  transition:border-color .25s, box-shadow .25s;
}
.field textarea{ resize:vertical; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23B4947D' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:12px;
  padding-right:2.6rem;
}
.field :is(input,select,textarea):focus-visible{
  outline:0;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(180,148,125,.16);
}
.field :is(input,select,textarea).is-invalid{ border-color:#B4685D; }

.hint{ margin:.5rem 0 0; font-size:.85rem; font-style:italic; color:var(--ink-soft); opacity:.85; }
.err{ margin:.45rem 0 0; font-size:.82rem; color:#B4685D; min-height:0; }
.err:empty{ display:none; }

/* radio */
.choices{ display:flex; flex-wrap:wrap; gap:.75rem; }
.choice{ flex:1 1 190px; margin:0; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice span{
  display:block; padding:.95rem 1rem; text-align:center;
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  font-size:.95rem; color:var(--ink-soft); cursor:pointer;
  transition:all .25s var(--ease);
}
.choice input:checked + span{
  background:var(--gold); border-color:var(--gold); color:var(--white);
}
.choice input:focus-visible + span{ box-shadow:0 0 0 3px rgba(180,148,125,.25); }

/* righe ospiti */
.guests{ display:flex; flex-direction:column; gap:.75rem; margin-top:.9rem; }
.guest{
  display:grid; grid-template-columns:1fr 168px; gap:.6rem;
  padding:.85rem; background:var(--white); border:1px solid var(--line); border-radius:2px;
}
@media (max-width:520px){ .guest{ grid-template-columns:1fr; } }
.guest__idx{
  grid-column:1/-1; margin:0 0 .1rem;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.guest input,.guest select{
  width:100%; padding:.7rem .85rem;
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  font-family:var(--serif); font-size:.95rem; color:var(--ink);
}
.guest select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23B4947D' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:11px;
  padding-right:2.2rem;
}

/* honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__status{ margin:1rem 0 0; text-align:center; font-size:.92rem; font-style:italic; color:var(--ink-soft); }
.form__status.is-error{ color:#B4685D; font-style:normal; }

/* ringraziamento */
.thanks{ margin-top:2.5rem; padding:3rem 1.5rem; text-align:center; background:var(--white); border:1px solid var(--line); border-radius:3px; }
.thanks h3{ margin:1.25rem 0 .6rem; font-size:1.9rem; font-weight:300; }
.thanks p{ margin:0; color:var(--ink-soft); }

/* sigillo in ceralacca */
.seal{
  width:74px; height:74px; margin-inline:auto;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFFFFF 0%, var(--nude) 55%, var(--dusky) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 2px 8px rgba(74,59,49,.12);
}
.seal span{ font-family:var(--script); font-size:1.9rem; line-height:1; color:#FFFFFF; text-shadow:0 1px 1px rgba(122,102,86,.35); }
.seal--lg{ width:88px; height:88px; }
.seal--lg span{ font-size:2.2rem; }

/* ── regalo ───────────────────────────────── */
.gift{ margin-top:2.25rem; }
.gift__box{
  margin-top:1.5rem; padding:2rem 1.5rem;
  background:var(--white); border:1px solid var(--line); border-radius:3px;
  animation:fadeUp .5s var(--ease);
}
.gift__label{ margin:0 0 .3rem; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.gift__name{ margin:0 0 1.5rem; font-size:1.2rem; }
.gift__iban{
  margin:0 0 1.5rem;
  font-size:clamp(.95rem,.85rem + .5vw,1.2rem);
  letter-spacing:.06em;
  word-break:break-word;
  font-variant-numeric:tabular-nums;
}
.gift__bic{
  margin:0 0 1.75rem;
  font-size:1.05rem;
  letter-spacing:.1em;
}

/* ── faq ──────────────────────────────────── */
.faq{ margin-top:2.5rem; text-align:left; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  padding:1.25rem 2.5rem 1.25rem 0;
  position:relative; cursor:pointer; list-style:none;
  font-size:1.06rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:.3rem; top:50%; translate:0 -50%;
  color:var(--gold); font-size:1.3rem; transition:rotate .3s var(--ease);
}
.faq details[open] summary::after{ rotate:45deg; }
.faq details p{ margin:0 0 1.4rem; color:var(--ink-soft); font-size:.98rem; }

/* ── footer ───────────────────────────────── */
.footer{ padding:clamp(3.5rem,7vw,5.5rem) var(--pad); text-align:center; background:var(--paper); border-top:1px solid var(--line); }
.footer__names{ margin:1.5rem 0 .4rem; font-family:var(--script); font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem); line-height:1; color:var(--ink); }
.footer__names .amp{ font-size:.55em; }
.footer__date{ margin:0; font-size:.68rem; letter-spacing:.4em; color:var(--gold); }

/* ── fab mobile ───────────────────────────── */
.fab{
  position:fixed; z-index:40;
  left:50%; bottom:1.1rem; translate:-50% 0;
  padding:.85em 2.2em;
  background:var(--gold); color:var(--white);
  border-radius:100px;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  box-shadow:0 6px 18px rgba(74,59,49,.22);
  opacity:0; pointer-events:none; transform:translate(-50%,14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.fab.is-on{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
@media (min-width:781px){ .fab{ display:none; } }

/* ── reveal ───────────────────────────────── */
/* la classe .js è messa da main.js: senza JS il contenuto resta visibile */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }