/* =========================================================================
   I due cartoncini sotto la partecipazione (blocco .foglietti, lo stesso
   in index.html e in parts/foglietto.html):
     2. .foglietto--conferma  conferma della presenza (modulo) e telefoni;
     3. .foglietto--viaggio   "Il nostro viaggio" e IBAN per la luna di miele.

   Rifanno la pagina 2 del file di stampa definitivo (sorgenti/stampa/
   partecipazione-stampa.pdf), divisa in due carte: stessi testi, stessi a
   capo, Cardo maiuscolo spaziato, stesse decorazioni. Sul sito al posto del
   QR code e di "Qui troverai tutti i dettagli…" c'è il modulo di conferma.

   MISURE. La pagina di stampa (768 x 1152 pt) è "stampata" sulla carta
   come la partecipazione: larga il 96,5% della carta e centrata. Quindi,
   con 100cqw = larghezza della carta:
       1 pt della stampa = 0,12565cqw     x = 1,75cqw + pt * 0,12565
                                          y = 4,04cqw + pt * 0,12565
   Corpo dei testi sulla stampa: Cardo 14,27 pt = 1,793cqw; intestatario,
   IBAN e firma 16,4 pt (x 1,147); spaziatura 0,2em; interlinea 24 pt.

   CORPI. Sul computer i testi sono 1,2 volte la stampa (2,15cqw, mai sotto
   gli 11px): gli a capo restano quelli della stampa. Sul telefono il corpo
   è 12,5-13px (circa il doppio della stampa) e le righe lunghe vanno a capo
   dove serve, bilanciate.

   CARTA. img/carta-foglietto.webp (1200 x 1834) non si stira mai: ogni
   cartoncino ha almeno le proporzioni della carta e si allunga in verticale
   solo quanto serve al contenuto, con tre copie della carta in scala vera
   che si fondono (vedi .foglietto__fondo). Il terzo cartoncino usa la
   stessa carta girata di 180°: i bordi strappati non sono gli stessi.

   Richiede base.css (colori del sito e corsivo Pinyon Script del tasto).
   ========================================================================= */

@font-face{font-family:"Cardo";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cardo-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Cardo";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cardo-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Cardo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/cardo-latin-700-normal.woff2") format("woff2")}

/* i due cartoncini, uno sotto l'altro, come carte posate sul tavolo.
   Ognuno passa SOTTO quello che lo precede (main.js li fa salire). */
.foglietti{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--foglietti-stacco, 28px);
}
.foglietti__posto{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
}
.foglietti__posto + .foglietti__posto{ z-index: 1; }

.foglietto{
  --cardo: "Cardo", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  /* inchiostri della stampa (#59523b testi, #4f4d3a intestatario/IBAN/firma)
     "stampati" sulla carta, come quelli della partecipazione */
  --inchiostro-stampa: rgb(81, 73, 50);
  --inchiostro-dati: rgb(72, 68, 49);
  --inchiostro-tenue: rgb(108, 100, 80);   /* etichette e note: ~4.5:1 sulla carta */
  --linea: rgba(81, 73, 50, .42);
  --spaziatura: .2em;                      /* come la stampa */

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: var(--card-w, min(92vw, 520px));
  aspect-ratio: 1200 / 1834;               /* altezza minima = la carta intera (984 x 1504) */
  margin-inline: auto;
  container: foglietto / inline-size;
  color: var(--inchiostro-stampa);
  font-family: var(--cardo);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  font-kerning: normal;
  text-align: center;
}

/* La carta (con l'ombra che segue il bordo strappato) sta su un livello a sé:
   così il filtro viene calcolato una volta sola e non a ogni fotogramma
   delle animazioni del modulo.
   La carta è sempre in scala vera (larghezza piena, altezza 152,83cqw):
   - ::after  è la carta ancorata in ALTO, sfuma via a metà;
   - ::before è la carta ancorata in BASSO, sotto a tutte;
   - __fondo-mezzo è una terza copia centrata, senza i suoi bordi strappati
     (li sfuma), che riempie il centro quando il cartoncino è molto lungo
     (telefoni piccoli: oltre ~2 volte l'altezza della carta).
   Grana, frange e bordi strappati restano quelli veri e l'ombra (sul
   genitore) è una sola, calcolata sull'insieme. Regge fino a un cartoncino
   alto ~3,9 volte la larghezza. */
.foglietto__fondo{
  position: absolute;
  inset: 0;
  z-index: -1;
  filter:
    drop-shadow(0 1px 1px rgba(70, 54, 38, .20))
    drop-shadow(0 7px 12px rgba(70, 54, 38, .13))
    drop-shadow(0 22px 34px rgba(70, 54, 38, .09));
  will-change: transform;
  pointer-events: none;
}
.foglietto__fondo::before,
.foglietto__fondo::after,
.foglietto__fondo-mezzo{
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/carta-foglietto.webp") no-repeat;
  background-size: 100% auto;              /* larghezza piena, altezza nelle proporzioni vere */
}
.foglietto__fondo::before{ background-position: 50% 100%; }
.foglietto__fondo-mezzo{
  display: block;
  inset: auto 0;
  top: calc(50% - 76.42cqw);
  height: 152.83cqw;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4cqw, #000 16cqw, #000 calc(100% - 16cqw), transparent calc(100% - 4cqw));
          mask-image: linear-gradient(to bottom, transparent 4cqw, #000 16cqw, #000 calc(100% - 16cqw), transparent calc(100% - 4cqw));
}
.foglietto__fondo::after{
  /* sfuma a metà cartoncino, sempre sopra la parte piena della copia di
     mezzo e prima del bordo strappato in basso di questa copia (150cqw) */
  --sfuma-da: min(calc(50% - 16cqw), 134cqw);
  --sfuma-a:  min(calc(50% + 16cqw), 150cqw);
  background-position: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--sfuma-da), transparent var(--sfuma-a));
          mask-image: linear-gradient(to bottom, #000 var(--sfuma-da), transparent var(--sfuma-a));
}

/* terzo cartoncino: la stessa carta girata di 180° (ogni copia sul posto),
   così i bordi strappati sono diversi da quelli del secondo. Si girano le
   copie e non .foglietto__fondo: l'ombra resta sotto, verso il basso. */
.foglietto--viaggio .foglietto__fondo::before,
.foglietto--viaggio .foglietto__fondo::after,
.foglietto--viaggio .foglietto__fondo-mezzo{
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------------
   Corpi. Il contenitore è .foglietto: le variabili stanno sul figlio.
   ------------------------------------------------------------------------ */
.foglietto__carta{
  /* telefono: 12,5-13px */
  --t-corpo: max(12.5px, min(13px, 3.7cqw));
  --t-dato: calc(var(--t-corpo) * 1.12);
  --t-firma: calc(var(--t-corpo) * 1.06);
  --t-etichetta: max(12px, calc(var(--t-corpo) * .94));
  --t-nota: max(13px, calc(var(--t-corpo) * 1.12));      /* corsivo minuscolo: messaggi, "Copia IBAN" */
  --t-campo: max(16px, calc(var(--t-corpo) * 1.3));      /* da 16px in su iOS non ingrandisce */
  --t-script: calc(9px + 6.6cqw);
  --t-titolo: calc(var(--t-corpo) * 1.2);                 /* "Il nostro viaggio" */
  --t-racconto: max(15px, calc(var(--t-corpo) * 1.18));   /* il racconto, in tondo minuscolo */
  --lato: 6cqw;

  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* il monogramma comincia a 180/4608 della stampa = 9,69cqw */
  padding: 9.69cqw var(--lato) 0;
  font-size: var(--t-corpo);
}
@container foglietto (min-width: 420px){
  .foglietto__carta{
    /* computer: 1,2 volte la stampa */
    --t-corpo: max(11px, 2.15cqw);
    --t-dato: calc(var(--t-corpo) * 1.147);
    --t-firma: calc(var(--t-corpo) * 1.149);
    --t-etichetta: max(10.5px, calc(var(--t-corpo) * .94));
    --t-titolo: calc(var(--t-corpo) * 1.3);
    --t-racconto: calc(var(--t-corpo) * 1.3);
    --lato: 7cqw;
  }
}

/* testi stampati ---------------------------------------------------------- */
/* azzera i margini del browser senza pesare sulla specificità */
:where(.foglietto) :where(p, h2, h3, dl, dd){ margin: 0; }

.foglietto__solo-lettori{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-weight: 400;               /* niente grassetto: non serve scaricare il Cardo 700 */
}

/* maiuscolo spaziato della stampa. Il padding a sinistra compensa la
   spaziatura dopo l'ultima lettera, così le righe restano centrate. */
.foglietto__testo,
.foglietto__banca,
.foglietto__sposi,
.campo__etichetta{
  padding-left: var(--spaziatura);
  letter-spacing: var(--spaziatura);
  text-transform: uppercase;
}

.foglietto__testo{
  font-size: var(--t-corpo);
  line-height: 1.682;                      /* 24 pt su 14,27 */
  text-wrap: balance;
  hyphens: manual;
}
/* le righe della stampa: ognuna va a capo per conto suo (bilanciata) solo
   se non ci sta */
.foglietto__riga{
  display: block;
  text-wrap: balance;
}

.foglietto__sezione{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* "È gradita gentile conferma…": dove sulla stampa c'era la prima frase,
   5,3cqw sotto il monogramma (misurati alle maiuscole) */
.foglietto__testo--rsvp{
  margin-top: max(.6em, calc(5.3cqw - .48em));
}

/* telefoni: su una riga come la stampa quando c'è posto, altrimenti uno
   per riga (senza la sbarra) */
.foglietto__telefoni{
  margin-top: .35em;
}
.foglietto__telefono{
  display: block;
  white-space: nowrap;
}
.foglietto__barra{ display: none; }
.foglietto__tel{
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
  -webkit-tap-highlight-color: rgba(156, 123, 141, .18);
  transition: color .3s ease;
}
@media (hover: hover){
  .foglietto__tel:hover{
    color: var(--mauve);
  }
}
.foglietto__tel:focus-visible{
  outline: 1px solid var(--mauve);
  outline-offset: 3px;
}

/* luna di miele: le tre righe della stampa quando ci stanno, altrimenti
   un paragrafo unico bilanciato */
.foglietto__testo--regalo{
  margin-top: max(.7em, calc(5.23cqw - 1.15em));   /* 43 pt dalla base del divisore alla prima riga */
  line-height: 1.655;                              /* 23,6 pt su 14,26 */
}
.foglietto__testo--regalo .foglietto__riga{ display: inline; }

/* --- secondo cartoncino: il piede ------------------------------------------
   Chiude la carta il divisore della stampa e, sotto, la riga dei telefoni
   (come l'intestazione di una carta da lettere, ma in fondo). Sta sempre in
   fondo; la sua ultima riga cade dove sul terzo cartoncino cade la firma,
   un po' più in basso perché qui non ci sono i rametti. */
.foglietto__piede{
  margin-top: auto;
  padding-top: max(2em, 7cqw);            /* distacco minimo dal modulo */
  padding-bottom: calc(12.5cqw - .53em);  /* linea di base dei telefoni a 12,5cqw dal fondo */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.foglietto__piede .foglietto__divisore{ margin-top: 0; }
.foglietto__piede .foglietto__telefoni{
  margin-top: max(.7em, calc(5.23cqw - 1.15em));   /* come fra il divisore e il testo del regalo */
}

/* --- terzo cartoncino: "Il nostro viaggio" ----------------------------------
   Titolo nel maiuscolo spaziato della stampa, un poco più grande dei testi;
   il racconto in tondo minuscolo (si legge meglio di un maiuscolo lungo),
   con lo stesso inchiostro. */
.foglietto__titolo{
  margin-top: max(.6em, calc(5.3cqw - .5em));      /* come "È gradita…" sul secondo */
  padding-left: .3em;
  font-size: var(--t-titolo);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--inchiostro-dati);
  text-wrap: balance;
}
.foglietto__racconto{
  margin-top: .85em;
  max-width: 27.5em;
  font-size: var(--t-racconto);
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--inchiostro-stampa);
  text-wrap: pretty;
  hyphens: manual;
}
/* il divisore dopo il racconto: un respiro un po' più ampio che dopo i telefoni */
.foglietto__sezione--racconto + .foglietto__divisore{
  margin-top: max(1em, calc(5.4cqw - .6em));
}

@container foglietto (min-width: 470px){
  .foglietto__telefono{ display: inline; }
  .foglietto__barra{ display: inline; margin-left: .47em; }   /* come la stampa: 1,14em prima della sbarra, 0,67em dopo */
}
@container foglietto (min-width: 490px){
  .foglietto__testo--regalo .foglietto__riga{ display: block; }
}

/* decorazioni (inchiostro su trasparente, ritagliate dalla stampa definitiva:
   "multiply" le fa sembrare stampate sulla carta) */
.foglietto__monogramma,
.foglietto__divisore,
.foglietto__grazie,
.foglietto__fiori{
  height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* sulla stampa: 646/3072, spostato di 0,66cqw a sinistra del centro */
.foglietto__monogramma{
  width: max(20.29cqw, 72px);
  aspect-ratio: 520 / 628;
  margin-right: 1.32cqw;
}

/* 773/3072. Il distacco da ciò che sta sopra dipende da dove si trova:
   vedi .foglietto__piede (secondo cartoncino) e il racconto (terzo) */
.foglietto__divisore{
  width: max(24.28cqw, 84px);
  aspect-ratio: 560 / 92;
  margin-top: max(.6em, calc(3.31cqw - .53em));
}

/* dati bancari ------------------------------------------------------------ */
.foglietto__banca{
  margin-top: 2.35em;                     /* 65,5 pt fra le linee di base, come la stampa */
  font-size: var(--t-dato);
  line-height: 1.787;                     /* 29,25 pt su 16,37 */
  --spaziatura: .15em;
  color: var(--inchiostro-dati);
  text-wrap: balance;
}
.foglietto__dato dt,
.foglietto__dato dd{ display: inline; }
/* L'IBAN non si spezza a metà: se "IBAN:" e il codice non stanno su una riga,
   il codice intero va a capo; solo se non sta nemmeno da solo (telefoni
   minuscoli) si divide fra i gruppi da 4. (Doppia classe: deve vincere
   su ".foglietto__dato dd" qui sopra.) */
.foglietto__dato--iban{ text-wrap: wrap; }   /* "balance" restringerebbe la riga e spezzerebbe il codice */
.foglietto__dato .foglietto__iban{
  display: inline-block;
  max-width: 100%;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .12em;
  text-wrap: balance;             /* se proprio va spezzato: due mezzi pari, mai "456" da solo */
}

.foglietto__copia{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: .15em;
  font-size: var(--t-nota);
}

.copia-iban,
.rsvp__altra{
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: .55em .5em;
  border: 0;
  background: none;
  color: var(--inchiostro-tenue);
  font: italic 400 1em/1.2 var(--cardo);
  letter-spacing: .01em;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-decoration-color: rgba(108, 100, 80, .5);
  text-underline-offset: .22em;
  cursor: pointer;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.copia-iban:hover,
.rsvp__altra:hover{
  color: var(--inchiostro-stampa);
  text-decoration-color: var(--mauve);
}
.copia-iban:focus-visible,
.rsvp__altra:focus-visible{
  outline: 1px solid var(--mauve);
  outline-offset: 2px;
  border-radius: 2px;
}

/* conferma "IBAN copiato": affiora appena sotto il link e poi svanisce */
.copia-iban__esito{
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -.35em);
  color: var(--inchiostro-tenue);
  font-style: italic;
  font-size: .92em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.33, 0, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.copia-iban__esito.is-visibile{
  opacity: 1;
  transform: translate(-50%, -.6em);
}

/* firma e fiori: ancorati al fondo della carta, come sulla stampa --------- */
.foglietto__firma{
  margin-top: auto;               /* resta in fondo anche se la carta è più alta */
  padding-top: 3.2cqw;            /* distacco minimo dal "Copia IBAN" */
  /* linea di base di "Federica e Marco" a 16,59cqw dal bordo basso (riga
     alta 1em: la base sta 0,187em sopra il fondo della riga) */
  padding-bottom: calc(16.59cqw - .187 * var(--t-firma));
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 1157/3072, centrato; la sua base a 3,9cqw sopra quella della firma */
.foglietto__grazie{
  width: 36.34cqw;
  aspect-ratio: 900 / 243;
}
.foglietto__sposi{
  margin-top: calc(3.9cqw - .813em);
  font-size: var(--t-firma);
  line-height: 1;
  color: var(--inchiostro-dati);
  white-space: nowrap;
}

/* rametti: 1070 e 1072 /3072, a 4cqw dai bordi, la base a 8cqw dal fondo */
.foglietto__fiori{
  position: absolute;
  z-index: -1;                    /* sulla carta (che è a -1 ma viene prima) e SOTTO i testi:
                                     la firma resta leggibile anche se un rametto la sfiora,
                                     e il "multiply" continua a fondersi con la carta */
}
.foglietto__fiori--sx{
  left: 3.98cqw;
  bottom: 8.03cqw;
  width: 33.61cqw;
  aspect-ratio: 760 / 937;
}
.foglietto__fiori--dx{
  right: 3.92cqw;
  bottom: 8cqw;
  width: 33.67cqw;
  aspect-ratio: 760 / 936;
}

/* telefono: i testi sono il doppio della stampa, i rametti no. Rametti un
   po' più piccoli e "Grazie di cuore" un po' più grande, firma più in alto:
   così i rametti incorniciano la firma senza toccarla. */
@container foglietto (max-width: 419.98px){
  .foglietto__grazie{ width: 42cqw; }
  .foglietto__firma{ padding-bottom: calc(19.5cqw - .187 * var(--t-firma)); }
  .foglietto__sposi{ --spaziatura: .17em; margin-top: max(.45em, calc(3.9cqw - .813em)); }
  .foglietto__fiori--sx{ width: 28.5cqw; left: 3cqw; bottom: 6.5cqw; }
  .foglietto__fiori--dx{ width: 28.6cqw; right: 3cqw; bottom: 6.5cqw; }
}
/* telefoni piccoli (320-360px): un filo meno spaziato e margini più stretti,
   così le righe della stampa si spezzano meno; rametti più piccoli perché
   la firma (che ha un corpo minimo in px) non li tocchi */
@container foglietto (max-width: 339.98px){
  .foglietto__carta{ --spaziatura: .16em; --lato: 5cqw; }
  .foglietto__dato .foglietto__iban{ letter-spacing: .05em; }
  .foglietto__sposi{ --spaziatura: .13em; }
  .foglietto__fiori--sx{ width: 25.7cqw; left: 2.6cqw; }
  .foglietto__fiori--dx{ width: 25.7cqw; right: 2.6cqw; }
}

/* =========================================================================
   Modulo di conferma
   ========================================================================= */
.rsvp{
  display: grid;
  width: 100%;
  margin-top: 1.1em;
}
/* modulo e ringraziamento occupano la stessa cella: nessun salto di layout */
.rsvp > .rsvp__modulo,
.rsvp > .rsvp__grazie{
  grid-area: 1 / 1;
}

.rsvp__modulo{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rsvp__campi{
  display: flex;
  justify-content: center;
  gap: 7cqw;
  width: 100%;
  max-width: max(56cqw, 250px);
}

/* Campo "scritto sulla carta": riga d'inchiostro sottile e, sotto,
   l'etichetta in maiuscolo spaziato come sulla stampa. */
.campo{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-areas: "input" "etichetta";
}
.campo__input{
  grid-area: input;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: .3em .1em .16em;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--inchiostro-stampa);
  caret-color: var(--mauve);
  font: italic 400 var(--t-campo)/1.25 var(--cardo);
  text-align: center;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}
.campo__input::placeholder{ color: transparent; }
/* niente sfondo giallo dell'autocompletamento */
.campo__input:-webkit-autofill,
.campo__input:-webkit-autofill:hover,
.campo__input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--inchiostro-stampa);
  -webkit-box-shadow: 0 0 0 40px transparent inset;
  transition: background-color 600000s 0s;
}

.campo__linea{
  grid-area: input;
  align-self: end;
  position: relative;
  height: 1px;
  background: var(--linea);
  pointer-events: none;
}
/* seconda riga, color mauve: si "traccia" dal centro quando il campo è attivo */
.campo__linea::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.5px;
  height: 1.5px;
  background: var(--mauve);
  transform: scaleX(0);
  transition: transform .55s cubic-bezier(.25, .8, .25, 1);
}
.campo__input:focus ~ .campo__linea::after{ transform: scaleX(1); }
.campo__input[aria-invalid="true"] ~ .campo__linea{ background: var(--mauve); }

.campo__etichetta{
  grid-area: etichetta;
  margin-top: .8em;
  font-size: var(--t-etichetta);
  line-height: 1;
  color: var(--inchiostro-tenue);
  cursor: text;
  transition: color .3s ease;
}
.campo:focus-within .campo__etichetta{ color: var(--inchiostro-stampa); }
.campo:has(.campo__input[aria-invalid="true"]) .campo__etichetta{ color: #8a5d73; }

/* Il contenitore .rsvp__tasto è quello che si anima con GSAP: il tasto
   può così avere le sue transizioni senza conflitti. */
.rsvp__tasto{ margin-top: max(1.5em, 4.6cqw); }

/* "Sarò Presente": sobrio come la stampa. A riposo è solo un contorno
   sottile e tenue sulla carta, con la scritta in corsivo color inchiostro.
   Il mauve compare soltanto quando lo si sfiora col mouse o lo si preme:
   il cartiglio si riempie dolcemente di mauve e la scritta diventa avorio.
   Il riempimento è ::before (si dissolve con l'opacità, perché i gradienti
   non hanno transizioni); la scritta sta sopra, nello span. */
.rsvp__invia{
  position: relative;
  isolation: isolate;
  appearance: none;
  -webkit-appearance: none;
  min-width: 8.6em;
  min-height: 44px;                    /* bersaglio comodo per il dito */
  margin: 0;
  padding: .32em 1.5em .4em;
  border: 1px solid rgba(124, 98, 112, .5);   /* inchiostro velato di mauve, tenue */
  border-radius: 999px;
  background: transparent;
  color: var(--inchiostro-stampa);
  font: 400 clamp(20px, calc(10px + 2.9cqw), 23px)/1.1 var(--script);   /* 20px sul telefono, mai oltre 23px */
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  transition:
    color .45s ease,
    border-color .45s ease,
    box-shadow .45s ease,
    transform .35s cubic-bezier(.3, .7, .3, 1),
    opacity .35s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;          /* niente ritardo del doppio tocco; il pizzico per ingrandire resta libero */
}
/* il riempimento mauve, invisibile a riposo */
.rsvp__invia::before{
  content: "";
  position: absolute;
  inset: -1px;                         /* copre anche il contorno */
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 150% at 32% 12%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #9d7d8f 0%, #8b6b7d 60%, #7f6072 100%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
/* le maiuscole del corsivo sono alte e le minuscole piccole: un pelo più giù
   per centrarlo a occhio nel contorno */
.rsvp__invia-testo{ position: relative; display: inline-block; transform: translateY(.04em); }

/* sfiorato (solo dove c'è un vero puntatore: sul telefono l'hover resterebbe
   "appiccicato" dopo il tocco) */
@media (hover: hover){
  .rsvp__invia:not(:disabled):not([aria-disabled="true"]):hover{
    color: #fbf6ef;
    border-color: #8b6b7d;
    box-shadow: 0 6px 16px -8px rgba(70, 48, 58, .45);
  }
  .rsvp__invia:not(:disabled):not([aria-disabled="true"]):hover::before{ opacity: 1; }
}
/* premuto (dito o clic): si riempie subito e si abbassa appena nella carta */
.rsvp__invia:not(:disabled):not([aria-disabled="true"]):active{
  color: #fbf6ef;
  border-color: #7f6072;
  box-shadow: inset 0 1px 3px rgba(64, 36, 50, .35);
  transform: translateY(1px) scale(.985);
  transition-duration: .12s;
}
.rsvp__invia:not(:disabled):not([aria-disabled="true"]):active::before{
  opacity: 1;
  transition-duration: .12s;
}
.rsvp__invia:focus-visible{
  outline: 1px solid var(--mauve);
  outline-offset: 3px;
}
.rsvp__invia:disabled{
  opacity: .5;
  cursor: default;
}
/* invio in corso (rsvp.js mette aria-busy sul modulo e aria-disabled sul
   tasto): resta senza colore, la scritta si fa più chiara e il contorno
   "respira" con la stessa cadenza del messaggio sotto */
.rsvp__modulo[aria-busy="true"] .rsvp__invia{
  color: var(--inchiostro-tenue);
  cursor: progress;
  animation: rsvp-contorno 1.6s ease-in-out infinite;
}
@keyframes rsvp-contorno{
  0%, 100%{ border-color: rgba(124, 98, 112, .5); }
  50%{ border-color: rgba(124, 98, 112, .14); }
}

/* messaggi (errori, invio in corso): riga riservata, niente salti */
.rsvp__stato{
  min-height: 1.5em;
  margin-top: .6em;
  max-width: 28em;
  font-size: var(--t-nota);
  font-style: italic;
  line-height: 1.5;
  color: var(--inchiostro-tenue);
  text-wrap: balance;
}
.rsvp__stato.is-errore{ color: #8a5d73; }      /* mauve più scuro: leggibile sulla carta */
.rsvp__stato.is-attesa{ animation: rsvp-respiro 1.6s ease-in-out infinite; }
/* "respira" col colore (l'opacità la anima GSAP quando il modulo svanisce) */
@keyframes rsvp-respiro{
  0%, 100%{ color: var(--inchiostro-tenue); }
  50%{ color: rgba(108, 100, 80, .4); }
}

.rsvp__ricordo{
  max-width: 28em;
  margin-top: .2em;
  margin-bottom: .5em;
  font-size: var(--t-nota);
  font-style: italic;
  line-height: 1.45;
  color: var(--inchiostro-tenue);
  text-wrap: balance;
}

/* ringraziamento --------------------------------------------------------- */
.rsvp__grazie{
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
  opacity: 0;
}
.rsvp__grazie-titolo{
  margin: 0;
  font: 400 var(--t-script)/1.25 var(--script);
  letter-spacing: 0;
  color: var(--inchiostro-stampa);
  white-space: nowrap;
  outline: none;
  transform: rotate(-2deg);       /* scritto a mano, non perfettamente in bolla */
}
/* La "penna": una maschera con il bordo morbido che scorre da sinistra a destra.
   --penna va da 0 (niente scritto) a 1 (tutto scritto). Il padding lascia
   spazio agli svolazzi del corsivo che escono dal riquadro delle lettere. */
.rsvp__penna{
  --penna: 1;
  --morbido: .7em;
  display: inline-block;
  padding: .12em .45em .2em;
  margin: 0 -.45em;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--penna) * (100% + var(--morbido)) - var(--morbido)), transparent calc(var(--penna) * (100% + var(--morbido))));
          mask-image: linear-gradient(90deg, #000 calc(var(--penna) * (100% + var(--morbido)) - var(--morbido)), transparent calc(var(--penna) * (100% + var(--morbido))));
}
.rsvp__grazie-testo{
  margin-top: .45em;
  font-size: var(--t-nota);
  font-style: italic;
  line-height: 1.5;
}
.rsvp__altra{
  margin-top: .5em;
  font-size: var(--t-nota);
}

/* solo per i lettori di schermo */
.rsvp__annuncio{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
  .rsvp__stato.is-attesa,
  .rsvp__modulo[aria-busy="true"] .rsvp__invia{ animation: none; }
  .campo__linea::after,
  .copia-iban__esito{ transition-duration: .01s; }
}

/* =========================================================================
   Note sulla conferma (scadenza e "una conferma per ogni invitato"):
   corsivo minuscolo, più piccolo e tenue del testo stampato, come una nota
   scritta a margine dagli sposi
   ========================================================================= */
.foglietto__nota{
  margin: 0;
  max-width: 31em;
  font-family: var(--cardo);
  font-style: italic;
  font-size: calc(var(--t-corpo) * 1.02);
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--inchiostro-tenue);
  text-wrap: balance;
}
.foglietto__nota--scadenza{ margin-top: .7em; }
.foglietto__istruzioni{
  margin-top: 1.5em;
  padding: .95em 1.3em 1em;
  max-width: 33em;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  text-align: center;
}
.foglietto__istruzioni-titolo{
  margin: 0 0 .45em;
  padding-left: .18em;
  font-size: var(--t-etichetta);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--inchiostro-stampa);
}
.foglietto__fregio{
  display: inline-block;
  margin-right: .25em;
  font-size: 1.15em;
  letter-spacing: 0;
  color: var(--mauve);
  transform: translateY(.04em);
}

/* il racconto del viaggio è in più paragrafi: un respiro tra l'uno e l'altro */
.foglietto__racconto + .foglietto__racconto{ margin-top: .7em; }

/* titolo lungo ("Il prossimo capitolo della nostra storia"): a capo bilanciato */
.foglietto__titolo{ text-wrap: balance; }

/* Intestatario: "Intestatario:" sopra, i due nomi affiancati su una riga, con la "e"
   minuscola in corsivo in mezzo che li stacca. Il corpo si adatta per stare su una riga. */
.foglietto__dato dd.foglietto__nomi{
  display: block;
  white-space: nowrap;
  font-size: clamp(10.5px, 3.35cqw, 1em);
  letter-spacing: .07em;
}
.foglietto__nome{ white-space: nowrap; }
.foglietto__e{
  display: inline-block;
  margin: 0 .2em 0 .05em;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.12em;
  color: var(--inchiostro-tenue);
}

/* ogni cartoncino sale da SOTTO il precedente: z-index decrescente lungo la pila */
.foglietti__posto:nth-child(1){ z-index: 5; }
.foglietti__posto:nth-child(2){ z-index: 4; }
.foglietti__posto:nth-child(3){ z-index: 3; }
.foglietti__posto:nth-child(4){ z-index: 2; }
.foglietti__posto:nth-child(5){ z-index: 1; }