/* ============================================================
   Carola & Riccardo — un matrimonio d'autunno
   Stile: partecipazione incisa — carta di cotone, filetti, foglie
   Type: Literata, una famiglia sola con l'asse ottico
   ============================================================ */

/* ---------- Font (self-hosted) ---------- */
/* Literata è variabile su due assi e lavorano tutti e due:
     opsz  lo muove il browser da solo (font-optical-sizing: auto). È
           l'asse che conta: sotto i 12px apre le contro-forme e accorcia
           le grazie invece di assottigliarle, sopra i 30 le allunga e
           alza il contrasto. Un Didone fa il contrario e sparisce.
     wght  400 nel testo, 600 nelle etichette e nei bottoni
   Ridotto in fase di subset a wght 350-700 e opsz 7-48: il resto della
   scala non lo usava nessuno e pesava. Due file, 193 KB in tutto. */
@font-face {
  font-family: "Literata";
  src: url("../assets/fonts/literata-var.woff2") format("woff2");
  font-weight: 350 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../assets/fonts/literata-var-italic.woff2") format("woff2");
  font-weight: 350 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* la carta non è crema: è cotone, un filo più grigia e più verde */
  --paper: #EDEBE3;
  --paper-tint: #E2DFD5;   /* stessa carta, tono più profondo */
  --ink: #1C1D19;          /* nero d'inchiostro con una punta d'oliva */
  --ink-soft: rgba(28, 29, 25, 0.72);
  --ink-faint: rgba(28, 29, 25, 0.66);
  --hairline: rgba(28, 29, 25, 0.18);
  --keyline: rgba(154, 123, 63, 0.42); /* filetto dei passe-partout */

  /* quattro colori e basta. Sono gli stessi per l'accento, gli ornamenti,
     le foglie che cadono e i coriandoli: se ne cambi uno cambia ovunque. */
  --wine: #5E2431;         /* bordeaux — l'accento */
  --wine-deep: #45161F;
  --brass: #9A7B3F;        /* ottone brunito — ornamenti e filetti */
  --brass-light: #D9BC7E;  /* ottone sul fondo scuro del footer */
  --ivy: #46543A;          /* edera */
  --rust: #A8412A;         /* la foglia girata da un pezzo */

  --font: "Literata", "Iowan Old Style", Georgia, serif;

  /* Gli spazi verticali, sei passi e non uno di piu'. Prima erano
     quattordici valori fra 0,7 e 4,5rem senza un passo regolare, e la
     stessa relazione prendeva 2, 2,2 o 2,4rem a seconda della sezione:
     nessuno di quei salti si vede da solo, ed e' per questo che la pagina
     non aveva un ritmo.

     Ogni passo ha il suo mestiere:
       1  il dato appiccicato alla sua etichetta (l'ora sotto la data)
       2  un titolo e il suo testo, righe dentro lo stesso blocco
       3  gli elementi di un gruppo: hero, footer, pieghe del modulo
       4  testo e poi un blocco grande: lastra, carte, modulo, bottoni
       5  il respiro di una sezione
       6  lo stesso respiro sul desktop

     Vale per il ritmo verticale della pagina. Il respiro dentro un
     componente (bottoni, campi, chip, lastre, visore) resta in em e
     misurato sul suo corpo: e' un'altra cosa e non va su questa scala. */
  --sp-1: 0.7rem;
  --sp-2: 1.2rem;
  --sp-3: 1.6rem;
  --sp-4: 2.2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, fieldset, legend { margin: 0; padding: 0; }

/* il campo di foglie fisso sta sotto a tutto il contenuto */
.hero, main, .footer, .subhero { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; }

a {
  color: var(--wine);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

::selection { background: rgba(154, 123, 63, 0.3); }

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}

/* grana di carta, appena percettibile */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Ruoli tipografici ---------- */
/* Titoli: stessa famiglia del testo, registro diverso. La differenza la
   fa l'asse ottico da solo — a 45px Literata allunga le grazie e alza il
   contrasto, a 17px le accorcia. Non serve altro. */
h1, h2, .display {
  font-weight: 400;
  text-wrap: balance;
}

h2 {
  font-style: italic;
  font-size: clamp(2.1rem, 7vw, 2.9rem);
  line-height: 1.12;
}

/* Maiuscolette: sono la voce da partecipazione. La spaziatura è larga
   ma non tanto da sillabare le parole — 0.18em, non 0.28em. */
.caps {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* compensa lo spazio dopo l'ultima lettera: centratura ottica */
  text-indent: 0.18em;
}

.container {
  /* 36rem e non 34: sotto questa misura la coppia di bottoni "Apri in
     Google Maps" + "Aggiungi al calendario" non ci sta in riga */
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section-text {
  max-width: 30rem;
  margin: var(--sp-2) auto 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.section-text strong { font-weight: 600; color: var(--ink); }

.amp {
  font-style: italic;
  color: var(--brass);
}

/* ---------- La lastra ---------- */
/* Bordo esterno, respiro, filetto d'ottone interno: è così che si taglia
   un passe-partout, ed è la forma che si ripete in tutto il sito — la
   finestra delle carte, la foto, il riquadro del luogo, quello dell'IBAN
   e i provini del rullino sono tutti la stessa cosa, a misure diverse. */
.plate {
  position: relative;
  background: var(--paper-tint);
  border: 1px solid var(--hairline);
  /* Il respiro di default si stringe da solo sugli schermi stretti. Va nel
     fallback della variabile, non in una media query su .plate: quella
     avrebbe la stessa specificità di .photo-frame e .gp-item — e stando più
     in basso nel file gli avrebbe soffiato il --plate-pad che si scrivono
     loro, gonfiando la cornice della foto e i provini del rullino. */
  padding: var(--plate-pad, clamp(2.2rem, 6vw, 2.6rem) clamp(1.4rem, 4.5vw, 1.75rem));
}
.plate::before {
  content: "";
  position: absolute;
  inset: var(--plate-inset, 7px);
  border: 1px solid var(--keyline);
  pointer-events: none;
}
.plate > * { position: relative; }

/* ---------- Rametto (ornamento) ---------- */
/* Le foglie nascono davvero dal ramo: attacco sul fusto, angoli
   alternati, misura che cala verso la punta. Un inchiostro solo.
   Il disegno lo fa tools/sprig.py. */
.sprig {
  display: block;
  width: 108px;
  margin-inline: auto;
  fill: var(--ivy);
}
.sprig--hero { width: 132px; }

/* Il rametto è la firma: sta in apertura e in chiusura e basta.
   Fra una sezione e l'altra passa un filetto con una losanga d'ottone —
   sei rametti identici di fila non sono un ornamento, sono un modello. */
.divider {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 18rem;
  margin: 0 auto var(--sp-4);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--hairline);
}
.divider-mark {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border: 1px solid var(--brass);
  transform: rotate(45deg);
}
.divider-mark::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--brass);
}

/* ---------- Bottoni ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  /* un'etichetta spaziata che va a capo si legge come due etichette:
     preferiamo impilare i bottoni piuttosto che spezzarne uno */
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.95em 1.9em 0.85em;
  text-indent: 0.14em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--wine); border-color: var(--wine); color: var(--paper); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--fill { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.btn--fill:hover { background: var(--wine-deep); border-color: var(--wine-deep); }

.btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 86svh;
  text-align: center;
  padding: var(--sp-4) 1.5rem;
  /* luce d'ora dorata: si spegne prima del bordo basso,
     così non lascia una riga di stacco sulla carta */
  background: radial-gradient(120% 58% at 50% -8%,
              rgba(154, 123, 63, 0.16), rgba(154, 123, 63, 0) 72%);
}
.hero > :not(.leaves) { position: relative; z-index: 1; }

/* ---------- Le foglie ---------- */
/* Tre movimenti, tre elementi annidati: scrivono tutti su `transform`, e
   su un nodo solo l'ultima dichiarazione vincerebbe sulle altre.
     span  la caduta        i  il vento (va e torna)   svg  il capitombolo
   Due strati: --hero è denso e nitido, --page è fisso e sommesso e
   continua a far cadere foglie mentre si scorre la pagina. */
.leaves {
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  /* la raffica muove tutto il campo insieme, fuori fase dalle cadute */
  animation: leaf-gust 19s ease-in-out infinite alternate;
}
.leaves--hero { position: absolute; inset: 0; }
.leaves--page {
  position: fixed;
  inset: 0;
  /* dietro al testo: devono esserci, non farsi leggere al posto suo */
  opacity: 0.42;
}

.leaf {
  position: absolute;
  top: -10vh;
  left: var(--x);
  display: block;
  perspective: 620px;
  animation: leaf-fall var(--t) linear var(--d) infinite;
}
.leaf > i {
  display: block;
  animation: leaf-wind var(--w) ease-in-out var(--d) infinite alternate;
}
.leaf svg {
  display: block;
  width: var(--s);
  fill: var(--c);
  animation: leaf-tumble var(--r) linear var(--d) infinite;
}
/* profondità di campo: i piani lontani sono piccoli, sfocati e lenti.
   È lo sfocato — non il numero di foglie — a far sembrare vera la caduta. */
.leaf--far svg { filter: blur(1.5px); opacity: 0.5; }
.leaf--mid svg { filter: blur(0.5px); opacity: 0.82; }

@keyframes leaf-fall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), 124vh, 0); }
}
@keyframes leaf-wind {
  from { transform: translate3d(calc(var(--sw) * -1), 0, 0); }
  to   { transform: translate3d(var(--sw), 0, 0); }
}
/* gira su due assi: a metà giro la foglia è di taglio e quasi sparisce */
@keyframes leaf-tumble {
  0%   { transform: rotate(var(--rot)) rotate3d(1, 1.7, 0.2, 0deg);   opacity: 1; }
  25%  { opacity: 0.42; }
  50%  { transform: rotate(var(--rot)) rotate3d(1, 1.7, 0.2, 180deg); opacity: 1; }
  75%  { opacity: 0.38; }
  100% { transform: rotate(var(--rot)) rotate3d(1, 1.7, 0.2, 360deg); opacity: 1; }
}
@keyframes leaf-gust {
  0%   { transform: translate3d(-1.4vw, 0, 0); }
  45%  { transform: translate3d(0.5vw, 0, 0); }
  100% { transform: translate3d(1.8vw, 0, 0); }
}

/* ---------- Le due carte ---------- */
/* Le carte stanno tutte in css/carte.css: sono un oggetto a sé e le usano
   sia l'hero qui che carte.html. Qui resta solo il contenitore delle
   definizioni SVG e la loro collocazione nell'hero — dove stanno sulla
   pagina è affare della pagina, non della carta. */
.hero .cards { margin-top: var(--sp-3); }

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hero-names {
  font-size: clamp(3.2rem, 13vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin-top: var(--sp-2);
}
/* La & sta su una riga sua. I due margini sono diversi di proposito: il
   glifo non e' centrato nel suo corpo, e con margini uguali il bianco
   sopra veniva 16px contro i 20 sotto. Quello che deve pareggiare e' il
   bianco che si vede, non il margine che si scrive. Ed e' cresciuta da
   0.58em: piu' piccola faceva la parte del segno schiacciato in mezzo a
   due parole grandi, invece di tenerle insieme. */
.hero-names .amp {
  display: block;
  font-size: 0.66em;
  margin: 0.1em 0 0.08em;
  /* La & va spinta giù, e i margini non bastano a dirlo. Misurato il bianco
     nelle colonne della & (l'unico che l'occhio confronta): sopra ci sono le
     lettere basse di "Carola" che finiscono sulla linea di base, sotto ci
     sono le "cca" di "Riccardo", che sono x-height e cominciano 20px più in
     basso delle maiuscole. Risultato: 27px di bianco sopra e 46 sotto, con la
     & appiccicata al primo nome. Lo scarto si chiude spostandola di mezza
     differenza, e va fatto con `top` e non col margine: il margine sposta
     anche il nome sotto e la coppia si allontanerebbe, invece così il blocco
     resta alto uguale e si muove solo il segno. */
  position: relative;
  top: 0.17em;
}

.hero-tagline {
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: balance;
  margin-top: var(--sp-2);
}

.hero-countdown {
  font-style: italic;
  font-size: 1.15rem;
  color: var(--wine);
  margin-top: var(--sp-2);
}

.hero-rule {
  width: 3.5rem;
  border-top: 1px solid var(--hairline);
  margin: var(--sp-3) auto;
}

.hero-info {
  line-height: 2.2;
  color: var(--ink-soft);
  text-indent: 0; /* due righe: l'indent ottico le sfalserebbe */
  text-wrap: balance;
}

.hero-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 2rem;
  margin-top: var(--sp-3);
  font-size: 0.75rem;
}
.hero-nav a {
  color: var(--wine);
  text-decoration: none;
  /* padding sbilanciato: sopra serve al dito, sotto tiene il filetto
     attaccato al testo invece che al bordo dell'area toccabile */
  padding: 0.85em 0 0.35em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.hero-nav a:hover { border-bottom-color: var(--wine); color: var(--wine-deep); }

/* L'unica entrata della pagina: il sipario dell'hero, una volta sola.
   Sotto non c'è nessun altro fade-in — le foglie che cadono sono già
   il movimento del sito, e sei sezioni che entrano una a una sono un
   effetto, non un'idea. */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero > * { animation: fade-up 1s var(--in, 0s) cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.sprig--hero   { --in: 0.05s; }
.cards         { --in: 0.22s; }
.hero-names    { --in: 0.4s; }
.hero-tagline  { --in: 0.56s; }
.hero-rule,
.hero-info,
.hero-countdown { --in: 0.68s; }
.hero-nav      { --in: 0.82s; }

/* ---------- Sezioni ---------- */
.section {
  padding: var(--sp-5) 1.5rem;
  scroll-margin-top: 1.5rem;
}

.section--photo { padding-top: var(--sp-4); padding-bottom: var(--sp-3); }

/* ---------- Foto ---------- */
.photo {
  max-width: 22rem;
  margin-inline: auto;
  text-align: center;
}
/* La lastra, ma ad arco: è la stessa curva della finestra sulle due carte,
   qui in grande. Le due cose si rispondono a distanza di uno scroll. */
.photo-frame {
  --plate-pad: 14px;
  --plate-inset: 8px;
  border-radius: 999px 999px 0 0;
}
.photo-frame::before { border-radius: 993px 993px 0 0; }
.photo-frame img {
  display: block;
  width: 100%;
  /* La foto arriva già inquadrata da tools/ritaglia_foto.py: 4:5, centrata
     sulle due facce. Per questo qui non c'è nessuno scostamento da tarare a
     mano — `object-position` a metà e basta. Il ritaglio col solo CSS non
     bastava: uno scatto ha margine da tagliare per il lato lungo e zero per
     l'altro, quindi li centrava di lato oppure in alto, non entrambi. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 985px 985px 0 0;
  object-position: 50% 50%;
}
/* la foto è l'unica cosa che entra scorrendo, e solo perché è l'unica
   cosa grande della pagina: arriva un attimo dopo il bordo */
html.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Dettagli ---------- */
/* Data, ora e luogo sono l'unica cosa che un invitato deve poter
   ritrovare in due secondi: stanno su una lastra, non in mezzo al
   testo come tutto il resto. */
.venue {
  max-width: 26rem;
  margin: var(--sp-4) auto 0;
  text-align: center;
}
.detail-date {
  font-weight: 500;
  font-size: clamp(1.75rem, 6.5vw, 2.2rem);
  line-height: 1.15;
}
.detail-time {
  color: var(--ink-soft);
  margin-top: var(--sp-1);
}
.venue hr {
  width: 2.5rem;
  height: 0;
  border: 0;
  border-top: 1px solid var(--keyline);
  margin: var(--sp-3) auto;
}
.detail-venue {
  font-size: 1.35rem;
  line-height: 1.3;
}
.detail-address { color: var(--ink-soft); margin-top: var(--sp-1); }
.detail-note {
  font-style: italic;
  color: var(--ink-soft);
  margin-top: var(--sp-1);
}

/* ---------- Form RSVP ---------- */
.section--rsvp {
  background: var(--paper-tint);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.rsvp-form {
  max-width: 26rem;
  margin: var(--sp-4) auto 0;
  text-align: left;
}

.field { margin-bottom: 1.6rem; }

.label {
  display: block;
  font-size: 0.74rem;
  color: var(--ink);
  margin-bottom: var(--sp-1);
  text-indent: 0; /* le etichette sono a bandiera, niente indent ottico */
}
.label small {
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0.04em;
  font-style: italic;
  font-weight: 450;
  color: var(--ink-soft);
}

fieldset.field { border: 0; }

input[type="text"],
input[type="number"],
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 450;
  color: var(--ink);
  caret-color: var(--wine);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 0.45em 0.1em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input::placeholder, textarea::placeholder {
  font-style: italic;
  color: var(--ink-faint);
}
textarea { resize: vertical; }

/* l'honeypot è anche lui un input[type="text"]: senza questa riga la
   regola sopra batte .visually-hidden e lo gonfia a tutta larghezza.
   Stessa specificità della utility non basta, serve l'attributo. */
input[type="text"].visually-hidden {
  width: 1px;
  padding: 0;
  border: 0;
}

input:hover, textarea:hover { border-bottom-color: var(--ink-soft); }

input:focus, textarea:focus {
  outline: none;
  border-bottom-color: var(--wine);
  /* la riga si ispessisce senza spostare nulla */
  box-shadow: 0 1px 0 0 var(--wine);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  padding: 0.7em 1.2em 0.6em;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.chip:hover span {
  border-color: var(--ink);
  background: rgba(94, 36, 49, 0.06);
}
.chip input:checked + span {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--paper);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}

/* ogni ospite in più è un piccolo gruppo a sé, staccato da un filetto */
.extra-guests .guest-row { margin-top: 2rem; }
.extra-guests .guest-row > .label {
  width: 100%;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
}

.btn--submit {
  display: block;
  width: 100%;
  margin-top: var(--sp-4);
}

.form-foot {
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
  color: var(--ink-soft);
  margin-top: var(--sp-3);
}

.notice {
  max-width: 26rem;
  margin: var(--sp-4) auto 0;
  border: 1px solid var(--hairline);
  padding: 2.4rem 1.75rem;
  text-align: center;
}
.notice p { text-wrap: balance; }
.notice--ok { border-color: var(--keyline); background: rgba(154, 123, 63, 0.09); }
.notice--err { border-color: var(--wine); color: var(--wine); }
.notice-title {
  font-style: italic;
  font-size: 1.8rem;
  line-height: 1.15;
  color: var(--wine);
  margin-bottom: var(--sp-1);
}

/* ---------- Footer ---------- */
.footer {
  position: relative;
  text-align: center;
  background: var(--wine);
  color: var(--paper);
  margin-top: var(--sp-4);
  padding: var(--sp-5) 1.5rem;
}
/* filetto oro all'attacco, come il passe-partout della foto */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(217, 188, 126, 0.45);
}
.footer .sprig { fill: var(--brass-light); }
.footer :focus-visible { outline-color: var(--brass-light); }
/* Riga centrata, e la & cade dov'è il mezzo del testo: "Riccardo" è due
   lettere più lungo di "Carola", quindi la e commerciale sta un po' a
   sinistra dell'asse della pagina. Provata la griglia a tre colonne che la
   inchioda al centro: la & va a posto ma è la riga intera a spostarsi, e a
   quel punto sembra fuori squadro tutta. Fra i due difetti si tiene questo,
   che è quello che fa da sempre una riga di testo centrata. */
.footer-names {
  font-size: 2.1rem;
  line-height: 1.15;
  margin-top: var(--sp-3);
}
.footer-names .amp { color: var(--brass-light); }
.footer-date {
  color: var(--brass-light);
  margin-top: var(--sp-1);
}

/* I contatti: due nomi e due numeri, non una sezione. La domanda sta in
   corsivo piccolo e i nomi sono i link — il numero per esteso qui sarebbe
   solo rumore, chi tocca il nome apre WhatsApp e il numero ce l'ha lì. */
.footer-ask {
  font-style: italic;
  color: rgba(237, 235, 227, 0.8);
  margin-top: var(--sp-3);
}
.footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 2.4rem;
  margin-top: var(--sp-1);
}
.footer-contacts a {
  font-size: 1.15rem;
  color: var(--brass-light);
  text-decoration: none;
  padding-bottom: 0.2em;
  border-bottom: 1px solid rgba(217, 188, 126, 0.4);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-contacts a:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}
.footer-note {
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(237, 235, 227, 0.92);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(237, 235, 227, 0.2);
  width: fit-content;
  margin-inline: auto;
  padding-inline: 2.4rem;
}

/* ---------- Pagina regali ---------- */
.subhero {
  text-align: center;
  padding: var(--sp-5) 1.5rem 0;
  background: radial-gradient(120% 60% at 50% -20%, rgba(154, 123, 63, 0.13), rgba(154, 123, 63, 0) 70%);
}
.subhero-back {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--wine);
  text-decoration: none;
  margin-bottom: var(--sp-5);
  padding-bottom: 0.25em;
  border-bottom: 1px solid transparent;
}
.subhero-back:hover { border-bottom-color: var(--wine); color: var(--wine-deep); }
.subhero-title {
  font-style: italic;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  line-height: 1.05;
  margin-top: var(--sp-3);
}
/* il titolo è già arioso: la sezione sotto non serve che ricarichi */
.subhero + main > .section:first-child { padding-top: var(--sp-3); }

.iban-card {
  /* 28rem: sotto questa misura l'IBAN va a capo in mezzo alle cifre, che è
     esattamente quello che non deve fare un numero da ricopiare */
  max-width: 28rem;
  margin: var(--sp-4) auto 0;
  text-align: center;
}
.iban-label { color: var(--wine); }
.iban-holder {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: var(--sp-1) 0 var(--sp-3);
}
.iban {
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  margin: var(--sp-1) 0 var(--sp-3);
}
/* larghezza fissa: il testo cambia in "Copiato ✓" senza far ballare la card */
.iban-card .btn { min-width: 13rem; }
.iban-note {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: var(--sp-3);
}


/* ---------- Il rullino (solo regali.html) ---------- */
.gp-note {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: var(--sp-3);
}

/* I provini: la stessa lastra della card IBAN, in piccolo. Sono foto
   appoggiate sul tavolo, non un carosello. */
.gp-grid {
  display: grid;
  /* auto-fit e non auto-fill: con poche foto le colonne vuote collassano e
     i provini si allargano a riempire la riga, invece di lasciare un buco
     a destra. Più larga del .container perché il testo vuole una colonna
     stretta e un provinario no. */
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--sp-1);
  max-width: 48rem;
  margin: var(--sp-4) auto 0;
}
.gp-grid[hidden] { display: none; }

.gp-item {
  --plate-pad: 7px;
  --plate-inset: 3px;
  display: block;
  appearance: none;
  font: inherit;
  border-radius: 0;
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gp-item:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgba(56, 41, 30, 0.16); }
.gp-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: rgba(28, 29, 25, 0.06);
}

/* Il visore è un <dialog> vero: focus trap, Esc e sfondo inerte li fa
   il browser. Il top layer sta sopra a tutto, grana e coriandoli
   compresi, senza bisogno di z-index. */
.gp-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 3.5rem 1rem 4.5rem;
  background: rgba(24, 25, 21, 0.94);
  color: var(--paper);
  overflow: hidden;
}
.gp-viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gp-viewer::backdrop { background: rgba(24, 25, 21, 0.6); }
.gp-viewer img {
  max-width: min(96vw, 68rem);
  max-height: 78svh;
  width: auto;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.gp-viewer button {
  position: absolute;
  appearance: none;
  font-family: inherit;
  background: transparent;
  border: 1px solid rgba(237, 235, 227, 0.35);
  border-radius: 0;
  color: var(--paper);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.gp-viewer button:hover { border-color: var(--brass-light); background: rgba(237, 235, 227, 0.08); }
.gp-viewer :focus-visible { outline: 2px solid var(--brass-light); outline-offset: 3px; }

.gp-close {
  top: 1rem;
  right: 1rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  padding: 0.85em 1.4em 0.75em;
}
.gp-prev, .gp-next {
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 3.4rem;
  font-size: 1.5rem;
  line-height: 1;
}
.gp-prev { left: 0.75rem; }
.gp-next { right: 0.75rem; }

.gp-count {
  position: absolute;
  bottom: 1.6rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(237, 235, 227, 0.75);
  font-variant-numeric: tabular-nums;
}

/* ---------- Coriandoli ---------- */
.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}

/* ---------- Schermi stretti ---------- */
/* la riga della località è lunga: con lo spazio pieno andrebbe a capo
   in tre righe sbilenche, qui sta su due (o su una a 390px) */
@media (max-width: 460px) {
  .hero-info {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    line-height: 2.3;
  }
  /* Le voci sono cinque e in riga vogliono 332px: con la spaziatura piena
     traboccano già a 390. Strette così ci stanno fino a 375px. */
  .hero-nav {
    gap: 0.2rem 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-indent: 0.09em;
  }
}

/* Sotto i 375px la riga non ci sta comunque. Lasciata libera andrebbe a capo
   4+1, con "Regalo" solo in fondo: la rottura peggiore. Il max-width le fa
   stare in tre per riga, così il ritorno a capo è 3+2 e resta bilanciato. */
@media (max-width: 374px) {
  .hero-nav { max-width: 15rem; }
}

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .section { padding: var(--sp-6) 2rem; }
  .section--photo { padding-top: var(--sp-5); padding-bottom: var(--sp-4); }
  .actions { flex-direction: row; justify-content: center; }
  .btn--submit { width: auto; margin-inline: auto; }
  .photo { max-width: 24rem; }
  .divider { max-width: 26rem; margin-bottom: var(--sp-5); }
  .footer { padding: var(--sp-6) 2rem; }
  .subhero { padding-top: var(--sp-6); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .leaves { display: none; }
}