/* ==========================================================
   Erica & Marco, 11 settembre 2027
   Direzione: editoriale (riferimento Eden Rose), colori dalle
   palette in ../materiali/riferimenti. In React i token restano globali,
   ogni blocco qui sotto diventa il CSS del suo componente.
   ========================================================== */

@font-face {
  font-family: "ThrohandPen";
  src: url("assets/fonts/throhandpen-roman.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Hello Diandra";
  src: url("assets/fonts/hello-diandra.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* carta di cotone liscia per la busta: nuvolature morbide e fibre appena accennate (niente puntinato) */
  --carta-lavorata: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .32  0 0 0 0 .2  0 0 0 .16 -.02'/></filter><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.03 .18' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -1.6 .5'/></filter><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .05 0'/></filter><rect width='300' height='300' filter='url(%23m)'/><rect width='300' height='300' filter='url(%23f)' opacity='.35'/><rect width='300' height='300' filter='url(%23g)'/></svg>");
  /* carta leggermente lavorata: rumore leggero sopra il colore */
  --grana: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grana-forte: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  --siepe: #404831;
  /* v2: sfumature intermedie per alleggerire, dal verde scuro al bianco */
  --oliva: #6F7A52;          /* verde medio */
  --salvia-chiara: #C9CEAE;
  --salvia-velo: #E8EBDC;    /* verde appena accennato */
  --salvia: #9A9A6F;
  --cipria: #EBBCA1;
  --rosa-antico: #CA7771;
  --castagna: #9A4542;
  --bordeaux: #671B27;
  /* v2: dal bordeaux al rosa */
  --granata: #8E2F3B;        /* rosso medio */
  --rosso-chiaro: #B4505A;   /* fine del gradiente in copertina */
  --rosa-velo: #F8E6DE;      /* rosa appena accennato */
  --avorio: #FBF8F1;
  --lino: #EFE7DA;        /* pannelli chiari, un tono sotto la pagina */
  --carta: #FFFDF8;       /* il cartoncino */

  --testo: #3A4030;
  --testo-tenue: #6E705C;
  --filo: color-mix(in srgb, var(--salvia) 45%, transparent);

  --font-display: "ThrohandPen", "Didot", Georgia, serif;
  --font-testo: "Jost", system-ui, sans-serif;

  --gutter: clamp(16px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--avorio);
  color: var(--testo);
  font: 300 1rem/1.75 var(--font-testo);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--rosa-antico); outline-offset: 4px; }

/* ---------- Busta d'apertura (a tutto schermo) ---------- */

.busta-intro { display: none; }
html.busta-chiusa, html.busta-chiusa body { overflow: hidden; }
/* niente scorrimento finché i nomi non sono scritti */
html.scrittura-in-corso, html.scrittura-in-corso body { overflow: hidden; touch-action: none; overscroll-behavior: none; }
html.busta-chiusa .busta-intro { position: fixed; inset: 0; z-index: 100; display: block; }

.busta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;          /* niente fondo: dietro le alette c'è il sito */
  cursor: pointer;
  perspective: 2600px;
  -webkit-tap-highlight-color: transparent;
}

/* ogni aletta: un contenitore che ruota (con l'ombra) e la carta ritagliata a triangolo */
.aletta {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 1.5px rgba(50, 40, 10, .45)) drop-shadow(0 8px 14px rgba(40, 30, 10, .22));
  transition: transform 1s cubic-bezier(.5, 0, .25, 1) var(--ritardo), opacity .45s ease calc(var(--ritardo) + .55s);
}
.aletta__carta {
  position: absolute;
  inset: 0;
  background-color: var(--tinta);
  background-image: var(--carta-lavorata);
  background-size: 300px 300px;
}
.aletta--su  { --tinta: #F4ECDF; --ritardo: .3s;  transform-origin: 50% 0;    z-index: 4; }
.aletta--sx  { --tinta: #E9DDCB; --ritardo: .55s; transform-origin: 0 50%;    z-index: 2; }
.aletta--dx  { --tinta: #E9DDCB; --ritardo: .55s; transform-origin: 100% 50%; z-index: 2; }
.aletta--giu { --tinta: #F0E6D6; --ritardo: .8s;  transform-origin: 50% 100%; z-index: 3; }
.aletta--su  .aletta__carta { clip-path: polygon(-1% -1%, 101% -1%, 50% 54%); }
.aletta--giu .aletta__carta { clip-path: polygon(-1% 101%, 101% 101%, 50% 47%); }
.aletta--sx  .aletta__carta { clip-path: polygon(-1% -1%, 51.5% 51%, -1% 101%); }
.aletta--dx  .aletta__carta { clip-path: polygon(101% -1%, 48.5% 51%, 101% 101%); }

.busta__sigillo {
  position: absolute;
  left: 50%;
  top: 54%;
  width: clamp(110px, 30vmin, 220px);
  height: auto;
  z-index: 5;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .38));
  transition: transform .4s ease, opacity .4s ease;
  animation: respiro 2.6s ease-in-out 1.2s infinite;   /* invita a toccare */
}
@keyframes respiro { 50% { transform: translate(-50%, -50%) scale(1.05); } }
.busta:focus-visible { outline: none; }
.busta:focus-visible .busta__sigillo { outline: 2px solid var(--avorio); outline-offset: 8px; border-radius: 50%; }

/* apertura: il sigillo si stacca, poi le alette si aprono verso chi guarda, una dopo l'altra */
.busta-intro.aperta .busta__sigillo { animation: none; opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
.busta-intro.aperta .aletta { opacity: 0; }
.busta-intro.aperta .aletta--su  { transform: rotateX(130deg); }
.busta-intro.aperta .aletta--giu { transform: rotateX(-130deg); }
.busta-intro.aperta .aletta--sx  { transform: rotateY(-130deg); }
.busta-intro.aperta .aletta--dx  { transform: rotateY(130deg); }

@media (prefers-reduced-motion: reduce) {
  .aletta, .busta__sigillo { transition: opacity .3s ease; animation: none; }
  .busta-intro.aperta .aletta { transform: none !important; }
}

/* ---------- elementi condivisi ---------- */

/* Etichette e tagline maiuscole spaziate, come nel riferimento */
.etichetta {
  font: 400 .72rem/1.6 var(--font-testo);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 10.5vw, 9.5rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.wordmark span { white-space: nowrap; }

.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  font: 400 .75rem/1.4 var(--font-testo);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.tagline__linea { width: clamp(40px, 7vw, 96px); height: 1px; background: currentColor; opacity: .7; }

.titolo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  color: var(--bordeaux);
  -webkit-text-stroke: .045em currentColor;   /* ThrohandPen ha un solo peso: lo ispessiamo */
  paint-order: stroke fill;
  margin-bottom: 28px;
}

.nota { margin-top: 24px; font-size: .875rem; color: var(--testo-tenue); }

.link {
  font: 400 .75rem/1 var(--font-testo);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--bordeaux);
}
.link:hover { color: var(--castagna); }

.da-completare {
  background: color-mix(in srgb, var(--cipria) 45%, transparent);
  border-bottom: 1px dashed var(--castagna);
}

/* ---------- Copertina ---------- */

.copertina {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid;
  place-items: center;
  padding: 96px var(--gutter) 72px;
  color: var(--avorio);
  overflow: hidden;
  text-align: center;
}

.menu {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--gutter);
  z-index: 2;
}
.menu__links { display: flex; gap: clamp(16px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.menu a {
  font: 400 .72rem/1 var(--font-testo);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: .85;
}
.menu a:hover { opacity: 1; }
.menu__destra { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.menu__cta { padding: 12px 18px; border: 1px solid color-mix(in srgb, var(--avorio) 60%, transparent); opacity: 1 !important; }
.menu__cta:hover { background: var(--avorio); color: var(--bordeaux); }


.copertina__centro { position: relative; z-index: 1; display: grid; justify-items: center; }

.copertina__sigla {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  margin-bottom: clamp(24px, 4vw, 44px);
}
.copertina__sigla .etichetta:first-child { text-align: right; }
.copertina__sigla .etichetta:last-child { text-align: left; }

.ovale {
  display: grid;
  place-items: center;
  width: 78px;
  height: 108px;
  border: 1px solid color-mix(in srgb, var(--avorio) 65%, transparent);
  border-radius: 50%;
}
.ovale img { width: 44px; height: auto; }

.copertina .wordmark { margin-bottom: clamp(20px, 3vw, 32px); }

/* nomi in corsivo */
.nomi-corsivo {
  font-family: "Hello Diandra", cursive;
  font-size: clamp(4.5rem, 11vw, 9.5rem);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 clamp(16px, 2.5vw, 28px);
}
.nomi-corsivo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .25em;
}
.firma { height: clamp(5rem, 12vw, 10.5rem); width: auto; overflow: visible; color: var(--avorio); }   /* v3: avorio sul verde, il cipria si spegneva */
.firma--lui { color: var(--avorio); }
.firma text {
  font-family: "Hello Diandra", cursive;
  font-size: 100px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: .9;
}

/* scrittura a mano: il tratto si disegna da sinistra, poi l'inchiostro riempie */
html.js-firma .firma text { fill-opacity: 0; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
html.js-firma .firma { clip-path: inset(-30% 100% -30% -5%); }
.firma.in-scrittura { animation: svela 1.7s cubic-bezier(.45, .05, .35, 1) var(--ritardo, 0s) forwards; }
.firma.in-scrittura text { animation: traccia 2.1s ease-in-out var(--ritardo, 0s) forwards, inchiostro .9s ease calc(var(--ritardo, 0s) + 1.4s) forwards; }
.firma--lui { --ritardo: 1.15s; }
@keyframes svela { to { clip-path: inset(-30% -5% -30% -5%); } }
@keyframes traccia { to { stroke-dashoffset: 0; } }
@keyframes inchiostro { to { fill-opacity: 1; stroke-width: .3; } }

/* data, luoghi e frase compaiono intorno ai nomi */
html.js-firma .copertina__sigla, html.js-firma .copertina .tagline { opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease; }
html .copertina.scritta .copertina__sigla { opacity: 1; transform: none; transition-delay: .1s; }
html.js-firma .copertina.scritta .tagline { opacity: 1; transform: none; transition-delay: 3s; }

/* ---------- Mazzi di fiori PNG a collage ---------- */

.mazzo { position: absolute; aspect-ratio: 1; pointer-events: none; }
.mazzo img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  max-width: none;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .28));
}
.copertina .mazzo { z-index: 0; }
.mazzo--alto-sx { width: clamp(220px, 28vw, 400px); left: -3%; top: 72px; }
.mazzo--basso-dx { width: clamp(240px, 32vw, 480px); right: -4%; bottom: -6%; }
.mazzo--pannello { position: relative; width: min(72%, 460px); }
/* monogramma e fiori di «I luoghi»: un gruppo centrato nel pannello.
   Lo scroll li compone (main.js: monogramma): prima le lettere, poi i fiori.
   --c (0→1) è quanto è composto ogni pezzo; senza JavaScript vale 1 */
.monogramma-vivo {
  position: absolute;
  left: 13%;
  top: 14%;
  width: 40%;
  height: auto;
  fill: var(--bordeaux);
  overflow: visible;
}
/* mentre il monogramma si compone «I luoghi» resta fermo: la riga si allunga di --corsa
   e i suoi blocchi restano appesi al centro dello schermo (la classe la mette main.js) */
.riga--fissa { --corsa: 130vh; min-height: calc(100vh + var(--corsa)); align-items: start; }
.riga--fissa > .riga__testo, .riga--fissa > .pannello { position: sticky; top: var(--fissa-top, 0px); }
.pannello--bordeaux .mazzo--pannello { position: absolute; left: 46%; top: 32%; width: 47%; }
/* su telefono il pannello fermo occupa tutto lo schermo (niente bianco sopra e sotto),
   il testo scorre normalmente prima; monogramma e fiori restano nel quadrato centrale */
@media (max-width: 820px) {
  .riga--fissa > .pannello { height: 100vh; height: 100svh; aspect-ratio: auto; }
  .riga--fissa .monogramma-vivo { top: calc(50% - 36vw); }
  .riga--fissa .mazzo--pannello { top: calc(50% - 18vw); }
}
.mv-lettera { opacity: calc(var(--c, 1) * 2.5); transform: translateY(calc((1 - var(--c, 1)) * 14px)); }
.pannello--bordeaux .mazzo--pannello img {
  opacity: var(--c, 1);
  transform: translateY(calc((1 - var(--c, 1)) * 28px)) rotate(var(--r, 0deg)) scale(calc(.94 + var(--c, 1) * .06));
}
.mazzo--cartoncino { width: clamp(150px, 20vw, 250px); left: clamp(-90px, -6vw, -30px); top: clamp(-90px, -6vw, -50px); z-index: 2; }
.cartoncino__amaranto {
  position: absolute;
  right: clamp(-40px, -3vw, -14px);
  top: -24px;
  width: clamp(70px, 9vw, 120px);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .28));
}

/* ---------- Foto ---------- */

.foto-bn { filter: grayscale(1) contrast(1.06); }

/* ---------- Righe a scacchiera (testo | pannello) ---------- */

.riga { display: grid; grid-template-columns: 1fr 1fr; }
.riga--invertita .pannello { order: -1; }

.riga__testo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 8vw, 128px) clamp(24px, 7vw, 120px);
}
.riga__testo > * { max-width: 440px; }
.riga__testo p + p { margin-top: 1em; }
.lettera__nota { padding-left: 14px; border-left: 2px solid var(--cipria); font-style: italic; color: var(--testo-tenue); }
.cartoncino__dispiace {
  margin: -6px 0 28px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--cipria);
  font-style: italic;
  color: var(--bordeaux);
}
.cartoncino__dispiace[hidden] { display: none; }

.pannello {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(480px, 42vw, 720px);   /* si allunga se il testo accanto è più alto */
  overflow: hidden;
}
.pannello--siepe { background: var(--oliva); }
.pannello--cipria { background: var(--cipria); }
.pannello--oliva { background: var(--oliva); }
/* il pannello dei fiori di «I luoghi»: fermo, nei rosa (v3).
   Più chiaro in alto, scurisce piano verso i bordi */
.pannello--bordeaux {
  background:
    radial-gradient(ellipse 90% 85% at 50% 40%, transparent 30%, color-mix(in srgb, var(--cipria) 70%, var(--rosa-antico)) 100%),
    linear-gradient(170deg, color-mix(in srgb, var(--cipria) 45%, var(--rosa-velo)) 0%, color-mix(in srgb, var(--cipria) 70%, var(--rosa-velo)) 50%, var(--cipria) 100%);
}

.pannello--avorio { background: var(--lino); color: var(--bordeaux); }

/* per le future foto */
.pannello__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pannello__fiore--alto {
  position: absolute;
  left: 50%;
  bottom: 8%;
  height: 80%;
  width: auto;
  max-width: none;
  transform: translateX(-50%) rotate(4deg);
}
.pannello__fiore--piccolo {
  position: absolute;
  width: clamp(64px, 9vw, 120px);
  left: 24%;
  bottom: 12%;
  transform: rotate(-28deg);
}
.pannello__fiore--mazzo { width: min(66%, 420px); position: relative; z-index: 1; }
.pannello__amaranto {
  position: absolute;
  top: 0;
  right: 24%;
  height: 58%;
  width: auto;
  opacity: .45;
}

.sigillo { width: min(70%, 340px); height: auto; }
.sigillo text {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 3.2px;
  fill: currentColor;
}

/* ---------- La giornata: percorso a tappe ---------- */

.percorso {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  text-align: center;
}
.percorso__intro { max-width: 52ch; margin: 0 auto clamp(40px, 6vw, 72px); }
.percorso__tappe {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* il sentiero tratteggiato che collega le tappe */
.percorso__tappe::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--castagna) 0 5px, transparent 5px 11px);
}
.tappa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 50%;
  padding-right: 44px;
  flex-direction: row-reverse;
  text-align: right;
}
.tappa + .tappa { margin-top: -28px; }

/* il sentiero si disegna scorrendo la pagina (--p da 0 a 1, aggiornato da main.js) */
html.js-percorso .percorso__tappe::before { clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0); }
html.js-percorso .tappa::after { transform: translateY(-50%) scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
html.js-percorso .tappa > * { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.js-percorso .tappa > img { transform: translateY(26px) scale(.92); }
html.js-percorso .tappa.raggiunta > .tappa__testo { transition-delay: .12s; }   /* prima il disegno, poi il testo */
html.js-percorso .tappa.raggiunta::after { transform: translateY(-50%) scale(1); }
html.js-percorso .tappa.raggiunta > * { opacity: 1; transform: none; }
.tappa:nth-child(even) { margin-left: 50%; padding: 0 0 0 44px; flex-direction: row; text-align: left; }
/* il puntino sul sentiero */
.tappa::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bordeaux);
  box-shadow: 0 0 0 5px var(--avorio);
  transform: translateY(-50%);
}
.tappa:nth-child(even)::after { right: auto; left: -5px; }
.tappa img { width: clamp(150px, 18vw, 220px); height: auto; flex-shrink: 0; }
.tappa time { font-family: var(--font-display); font-size: 1.5rem; color: var(--bordeaux); -webkit-text-stroke: .03em currentColor; }
.tappa__seguire { font-family: "Hello Diandra", cursive; font-size: 1.625rem; line-height: 1.2; color: var(--bordeaux); }
.tappa h3 { font: 500 .78rem/1.5 var(--font-testo); letter-spacing: .2em; text-transform: uppercase; margin: 2px 0 4px; }
.tappa p { font-size: .9375rem; color: var(--testo-tenue); }
.percorso .nota { margin-top: 48px; }

.sigillo--piccolo { width: 132px; color: var(--bordeaux); margin-bottom: 10px; }

/* Programma */
.programma { margin: 0; padding: 0; list-style: none; width: 100%; }
.programma li {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--filo);
}
.programma li:first-child { border-top: 1px solid var(--filo); }
.programma time { font-family: var(--font-display); font-size: 1.375rem; color: var(--bordeaux); -webkit-text-stroke: .03em currentColor; }

/* Luoghi */
.luogo .etichetta { color: var(--bordeaux); font-weight: 500; }
.luogo__nome { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.2; margin: 4px 0 2px; color: var(--bordeaux); -webkit-text-stroke: .03em currentColor; }
.luogo .link { display: inline-block; margin-top: 14px; }
.luogo__parcheggio { margin-top: 4px; font-size: .9375rem; color: var(--siepe); font-weight: 400; }
.tragitto {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  font-size: .875rem;
  color: var(--testo-tenue);
}
.tragitto__linea {
  width: 48px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--castagna) 0 4px, transparent 4px 8px);
}

/* ---------- Noi: polaroid ---------- */

.noi {
  position: relative;
  padding: clamp(72px, 10vw, 136px) var(--gutter);
  text-align: center;
  overflow: hidden;
}
.polaroid-lista {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 2vw, 20px);
  margin: 16px auto 0;
  padding: 0;
  max-width: 1320px;
  list-style: none;
}
.polaroid {
  width: clamp(124px, 12.2vw, 168px);
  padding: 10px 10px 42px;   /* bordo basso più alto, come una polaroid */
  background: #fff;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .35);
  transform: rotate(var(--r));
}
.polaroid:nth-child(even) { margin-top: 36px; }
/* al passaggio: la polaroid si raddrizza, si solleva e la foto torna a colori */
.polaroid {
  position: relative;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
.polaroid img { transition: filter .6s ease; }
.polaroid:hover {
  z-index: 3;
  transform: rotate(0deg) translateY(-10px) scale(1.12);
  box-shadow: 0 30px 44px -18px rgba(0, 0, 0, .45);
}
.polaroid:hover img { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .polaroid { transition: none; }
  .polaroid:hover { transform: rotate(var(--r)); }
}
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid p {
  font-family: "Hello Diandra", cursive;
  font-size: 1.5rem;
  line-height: 2.4;
  color: var(--bordeaux);
}
.noi__fiore { position: absolute; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .2)); }
.noi__fiore--a { width: clamp(110px, 14vw, 200px); left: -30px; bottom: 6%; }
.noi__fiore--b { width: clamp(80px, 9vw, 120px); right: 1%; top: 1%; transform: rotate(14deg); }
.noi__fiore--c { width: clamp(70px, 8vw, 110px); right: 0; top: 0; opacity: .9; }

/* ---------- Canzoni: vinili ---------- */

.canzoni {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  text-align: center;
}
.canzoni__intro { margin: -12px auto 0; color: var(--testo-tenue); }
.giradischi {
  display: flex;
  justify-content: center;
  margin: clamp(32px, 5vw, 56px) auto 0;
  padding: 0;
  max-width: 1200px;
  list-style: none;
}
.vinile-voce { width: clamp(180px, 22vw, 280px); }
.vinile-voce + .vinile-voce { margin-left: clamp(-56px, -3vw, -20px); }   /* dischi un po' sovrapposti */
.vinile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .3));
}
.vinile svg { display: block; width: 100%; height: auto; }
.vinile .vinile__frase {
  font-family: var(--font-testo);   /* carattere pieno e leggibile, non il sottile dei titoli */
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}   /* scritta grande sul disco vuoto */
.vinile text {
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 1.2px;
}
.vinile:hover, .vinile:focus-visible, .vinile[aria-pressed="true"] { transform: scale(1.14); z-index: 2; }
.vinile:hover svg, .vinile[aria-pressed="true"] svg { animation: gira 3.2s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vinile { transition: none; }
  .vinile:hover svg, .vinile[aria-pressed="true"] svg { animation: none; }
}
.vinile-voce__titolo { margin-top: 26px; font-family: var(--font-display); font-size: 1.125rem; color: var(--bordeaux); -webkit-text-stroke: .02em currentColor; }
.vinile-voce__artista { font-size: .875rem; color: var(--testo-tenue); }
.canzoni__altre {
  margin-top: clamp(36px, 5vw, 56px);
  font-family: "Hello Diandra", cursive;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1.2;
  color: var(--bordeaux);
}
.canzoni__invito { max-width: 50ch; margin: 8px auto 0; }
.bottone--link { display: inline-block; margin-top: 28px; text-decoration: none; line-height: 1.5; padding: 14px 32px; }
.canzoni__riserva { margin-top: 18px; font-size: .875rem; color: var(--testo-tenue); }
.canzoni__riserva .link { font: inherit; letter-spacing: 0; text-transform: none; padding-bottom: 1px; }
.vinile-voce__nota { margin-top: 4px; font-family: "Hello Diandra", cursive; font-size: 1.375rem; color: var(--bordeaux); }
.canzoni__player { max-width: 560px; margin: 36px auto 0; }
.canzoni__player iframe { display: block; border: 0; border-radius: 12px; }

/* polaroid vuota che porta alla pagina "I vostri scatti" */
.polaroid--invito { padding-bottom: 10px; }
.polaroid--invito a { display: block; text-decoration: none; color: var(--bordeaux); }
.polaroid--invito__vuoto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--salvia);
  background: var(--grana), color-mix(in srgb, var(--lino) 70%, #fff);
}
.polaroid--invito__vuoto span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font: 300 1.75rem/1 var(--font-testo);
  transition: background-color .3s, color .3s;
}
.polaroid--invito:hover .polaroid--invito__vuoto span { background: var(--bordeaux); color: var(--avorio); }
.polaroid--invito__testo {
  display: block;
  padding-top: 8px;
  font-family: "Caveat", "Segoe Print", cursive;   /* scritto a pennarello sul bordo della polaroid */
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.05;
  text-align: center;
  color: var(--bordeaux);
  transform: rotate(-3deg);
}

/* ---------- Sfumatura viva (blocchi a colore pieno) ----------
   Una velatura chiara e una più scura su un colore di base. La luce segue
   il mouse (main.js / foto.js aggiornano --luce-x e --luce-y), l'ombra va
   dalla parte opposta. Su telefono si muove da sola, piano.
   Ogni blocco sceglie i suoi tre toni; il pannello dei fiori di «I luoghi»
   resta a tinta unita. */

@property --luce-x { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --luce-y { syntax: "<percentage>"; inherits: false; initial-value: 35%; }

.copertina, .foto-testata, .canzoni, .countdown, .rsvp, .regalo, .foto-carica, .footer {
  --luce-x: 30%;
  --luce-y: 35%;
  background:
    var(--grana),
    radial-gradient(ellipse 75% 150% at var(--luce-x) var(--luce-y), var(--sf-luce) 0%, transparent 72%),
    radial-gradient(ellipse 60% 110% at calc(100% - var(--luce-x)) calc(100% - var(--luce-y)), var(--sf-ombra) 0%, transparent 70%),
    var(--sf-base);
  transition: --luce-x 1.6s cubic-bezier(.2, .7, .3, 1), --luce-y 1.6s cubic-bezier(.2, .7, .3, 1);
}
/* v3: colori invertiti rispetto alla v2. Copertina verde, countdown e footer rossi */
/* verdi della copertina: sfumatura più marcata, dalla salvia luminosa al verde siepe */
.copertina, .foto-testata {
  --sf-base: var(--oliva);
  --sf-luce: color-mix(in srgb, var(--salvia) 70%, var(--salvia-chiara));
  --sf-ombra: color-mix(in srgb, var(--siepe) 85%, var(--oliva));
}
/* luce più ampia e più netta, così il movimento col mouse si vede di più */
.copertina, .foto-testata {
  background:
    var(--grana),
    radial-gradient(ellipse 55% 85% at var(--luce-x) var(--luce-y), var(--sf-luce) 0%, color-mix(in srgb, var(--sf-luce) 45%, transparent) 38%, transparent 70%),
    radial-gradient(ellipse 70% 120% at calc(100% - var(--luce-x)) calc(100% - var(--luce-y)), var(--sf-ombra) 0%, transparent 72%),
    var(--sf-base);
  transition: --luce-x 1.2s cubic-bezier(.2, .7, .3, 1), --luce-y 1.2s cubic-bezier(.2, .7, .3, 1);
}
/* footer verde come la copertina, così la pagina si apre e si chiude in verde */
.footer {
  --sf-base: color-mix(in srgb, var(--oliva) 85%, var(--salvia));
  --sf-luce: color-mix(in srgb, var(--oliva) 50%, var(--salvia));
  --sf-ombra: color-mix(in srgb, var(--oliva) 70%, var(--siepe));
}
/* rosso del countdown */
.countdown {
  --sf-base: var(--granata);
  --sf-luce: var(--rosso-chiaro);
  --sf-ombra: var(--bordeaux);
}
/* chiari: movimento appena percettibile */
.canzoni, .rsvp, .regalo {
  --sf-base: var(--lino);
  --sf-luce: color-mix(in srgb, var(--lino) 40%, #fff);
  --sf-ombra: color-mix(in srgb, var(--lino) 88%, var(--salvia));
}
.foto-carica {
  --sf-base: var(--rosa-velo);
  --sf-luce: color-mix(in srgb, var(--rosa-velo) 40%, #fff);
  --sf-ombra: color-mix(in srgb, var(--rosa-velo) 80%, var(--cipria));
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .copertina, .foto-testata, .canzoni, .countdown, .rsvp, .regalo, .foto-carica, .footer {
    animation: luce-lenta 18s ease-in-out infinite alternate;
  }
  .canzoni, .regalo { animation-delay: -6s; }
  .countdown, .foto-carica { animation-delay: -9s; }
  .rsvp, .footer { animation-delay: -13s; }
}
@keyframes luce-lenta {
  0%   { --luce-x: 20%; --luce-y: 25%; }
  50%  { --luce-x: 70%; --luce-y: 40%; }
  100% { --luce-x: 40%; --luce-y: 80%; }
}

/* ---------- Countdown ---------- */

.countdown {
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  color: var(--avorio);
  text-align: center;
}
.countdown__numeri {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 5vw, 72px);
  margin: 18px 0 14px;
}
.countdown__numeri div { display: grid; justify-items: center; min-width: 3ch; }
.countdown__numeri span {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__numeri small {
  margin-top: 8px;
  font: 400 .68rem/1 var(--font-testo);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .75;
}
.countdown__fine { font-size: .9375rem; opacity: .8; }
.calendario { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.calendario__bottone {
  padding: 14px 22px;
  border: 1px solid color-mix(in srgb, var(--avorio) 60%, transparent);
  font: 400 .72rem/1.3 var(--font-testo);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.calendario__bottone:hover { background: var(--avorio); color: var(--oliva); }
.calendario__dove { margin-top: 12px; font-size: .8125rem; opacity: .7; }

/* ---------- Rsvp ---------- */

.rsvp {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(72px, 10vw, 144px) var(--gutter);
  overflow: hidden;
}
.rsvp__fiore { position: absolute; opacity: .3; pointer-events: none; }
.rsvp__fiore--a { width: clamp(180px, 24vw, 340px); left: -6%; top: 10%; }
.rsvp__fiore--b { width: clamp(140px, 18vw, 260px); right: -4%; bottom: 8%; }

.cartoncino {
  position: relative;
  z-index: 0;            /* così il cartoncino inclinato (::before) resta sopra lo sfondo della fascia */
  width: 100%;
  max-width: 620px;
  padding: clamp(32px, 6vw, 64px) clamp(22px, 6vw, 64px);
}
/* la carta bianca: sta sopra il cartoncino oliva ma sotto il modulo */
.cartoncino::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--carta);
  box-shadow: 0 30px 60px -20px rgba(103, 27, 39, .28);
}
/* secondo cartoncino inclinato dietro, come i biglietti del riferimento */
.cartoncino::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--granata);
  border-radius: 999px 999px 0 0 / 220px 220px 0 0;   /* arco, come "Our Story" nel riferimento */
  transform: rotate(-4deg) translate(-14px, -6px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .4);
}

.cartoncino__testa { display: grid; justify-items: center; text-align: center; margin-bottom: 36px; }
.cartoncino__testa img { width: 36px; height: auto; margin-bottom: 18px; }
.cartoncino__testa .titolo { margin-bottom: 10px; }
.cartoncino__testa p { font-size: .9375rem; color: var(--testo-tenue); }
.scadenza { font-weight: 500; color: var(--bordeaux); }
.cartoncino__testa .cartoncino__solo-qui { margin-top: 6px; font-size: .8125rem; color: var(--bordeaux); }

.cartoncino__form { display: grid; gap: 26px; }
.campo { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo[hidden] { display: none; }
.campo-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.campo label, .campo legend {
  padding: 0;
  font: 400 .72rem/1.6 var(--font-testo);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.facoltativo { letter-spacing: .05em; text-transform: none; }

.campo input[type="text"],
.campo input[type="number"],
.campo textarea {
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--salvia);
  border-radius: 0;
  background: transparent;
  font: 400 1rem/1.5 var(--font-testo);   /* 16px: niente zoom automatico su iPhone */
  color: var(--testo);
}
.campo textarea { resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; border-bottom: 1px solid var(--bordeaux); }
.campo input[aria-invalid="true"] { border-bottom-color: var(--castagna); }
.campo__errore { font-size: .875rem; color: var(--castagna); }

.scelte { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.campo .scelta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--salvia);
  font-size: .9375rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--testo) !important;
  cursor: pointer;
}
.scelta:has(input:checked) { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--avorio) !important; }
.scelta input { accent-color: var(--rosa-antico); margin: 0; }
.cartoncino__dettagli { display: grid; gap: 26px; }
.cartoncino__dettagli[hidden] { display: none; }
.cartoncino__bambini {
  display: grid;
  gap: 26px;
  padding: 22px 0 4px 18px;
  border-left: 2px solid var(--cipria);
}
.cartoncino__bambini[hidden] { display: none; }
.campo__aiuto { font-size: .9375rem; color: var(--testo-tenue); }

.bottone {
  justify-self: center;
  margin-top: 8px;
  padding: 18px 40px;
  border: 0;
  background: var(--bordeaux);
  color: var(--avorio);
  font: 400 .75rem/1 var(--font-testo);
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}
.bottone:hover { background: var(--castagna); }
.cartoncino__stato { min-height: 1.5em; text-align: center; font-size: .9375rem; color: var(--siepe); }

/* ---------- Da sapere ---------- */

.info {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(80px, 11vw, 160px) var(--gutter);
  text-align: center;
}
.info__fiore { position: absolute; width: clamp(64px, 8vw, 110px); top: clamp(40px, 6vw, 90px); right: var(--gutter); transform: rotate(18deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .2)); }
.info .titolo { margin-bottom: 48px; }
.info__voci > div + div { margin-top: 36px; }
.info dt { font-family: var(--font-display); font-size: 1.375rem; color: var(--bordeaux); margin-bottom: 6px; -webkit-text-stroke: .03em currentColor; }
.info dd { max-width: 54ch; margin: 0 auto; }
.palette { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 18px; margin: 18px 0; }
.palette__colore {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.palette__colore::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 6px 12px -6px rgba(0, 0, 0, .35);
}

/* ---------- Regalo: biglietto da girare ---------- */

.regalo {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  text-align: center;
}
.regalo__testo { max-width: 46ch; margin: 0 auto clamp(36px, 5vw, 56px); }
.link--testo { font: inherit; letter-spacing: 0; text-transform: none; padding-bottom: 1px; }

.biglietto { width: min(100%, 440px); margin: 0 auto; perspective: 1400px; }
.biglietto__giro {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3, .1, .2, 1);
}
.biglietto.girato .biglietto__giro { transform: rotateY(180deg); }
.biglietto__fronte, .biglietto__retro {
  grid-area: 1 / 1;
  min-height: 300px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 24px 40px -22px rgba(40, 30, 10, .45);
}
.biglietto__fronte {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 32px;
  border: 0;
  cursor: pointer;
  /* cartoncino liscio, senza texture di carta: appena più chiaro in alto */
  background: linear-gradient(165deg, color-mix(in srgb, var(--cipria) 55%, var(--rosa-velo)) 0%, var(--cipria) 100%);
  color: var(--bordeaux);
  -webkit-tap-highlight-color: transparent;
}
.biglietto__fronte img { width: 110px; height: auto; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .35)); transition: transform .3s ease; }
.biglietto__fronte:hover img { transform: scale(1.06); }
.biglietto__invito { font: 400 .72rem/1 var(--font-testo); letter-spacing: .22em; text-transform: uppercase; }
.biglietto__retro {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 32px 28px;
  background: var(--carta);
  transform: rotateY(180deg);
}
.biglietto__retro .etichetta { color: var(--testo-tenue); margin-top: 10px; }
.biglietto__valore { font-size: 1rem; }
.biglietto__iban {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.4vw, 1.375rem);
  letter-spacing: .06em;
  color: var(--bordeaux);
  -webkit-text-stroke: .02em currentColor;
  user-select: all;          /* un tocco seleziona tutto l'IBAN */
  word-break: break-word;
}
.biglietto__copia { justify-self: center; margin-top: 18px; }
.biglietto__stato { min-height: 1.4em; font-size: .875rem; color: var(--siepe); }
@media (prefers-reduced-motion: reduce) {
  .biglietto__giro { transition: none; }
}

/* ---------- Footer ---------- */

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  color: var(--avorio);
}
.footer__motto {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
  text-transform: uppercase;
}
.footer__firma { text-align: center; }
.wordmark--piccolo { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 14px; }
.footer__contatti { justify-self: end; text-align: right; font-size: .9375rem; }
.footer__contatti .etichetta { opacity: .7; margin-bottom: 6px; }
.whatsapp { text-decoration: none; display: inline-flex; gap: 8px; align-items: baseline; }
.whatsapp span { border-bottom: 1px solid color-mix(in srgb, var(--avorio) 50%, transparent); }
.whatsapp:hover span { border-bottom-color: var(--avorio); }
.footer .da-completare { background: color-mix(in srgb, var(--rosa-antico) 35%, transparent); border-color: var(--cipria); }

/* ---------- Telefono ---------- */

@media (max-width: 820px) {
  .menu__links { display: none; }
  .menu { justify-content: flex-end; }
  .menu__destra { gap: 18px; }

  .wordmark span { display: block; }
  .nomi-corsivo { flex-direction: column; align-items: center; }
  .firma { height: auto; width: 56vw; }
  .firma--lui { width: 82vw; }
  .copertina { min-height: min(100svh, 760px); }

  .riga { grid-template-columns: 1fr; }
  .riga--invertita .pannello { order: 0; }
  .pannello { min-height: 0; aspect-ratio: 4 / 3; }
  .riga__testo > * { max-width: none; }

  /* su telefono il cartoncino oliva si inclina meno, altrimenti esce dallo schermo */
  .rsvp { padding-left: 28px; padding-right: 28px; }
  .cartoncino::before { transform: rotate(-1.2deg) translate(-6px, 8px); }
  .scelte { flex-direction: column; }
  .scelta { width: 100%; }
  .bottone { justify-self: stretch; }

  .info__fiore { top: 48px; }

  .footer { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .footer__contatti { justify-self: center; text-align: center; }
  .calendario__bottone { width: 100%; }
}

@media (max-width: 820px) {
  /* vinili: riga che scorre di lato */
  .giradischi {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 24px var(--gutter) 8px;
    scrollbar-width: none;
  }
  .giradischi::-webkit-scrollbar { display: none; }
  .vinile-voce { flex: 0 0 62%; scroll-snap-align: center; }
  .vinile-voce + .vinile-voce { margin-left: 16px; }
  .percorso { text-align: left; }
  .percorso .titolo, .percorso__intro { text-align: center; }
  .percorso__tappe::before { left: 6px; }
  .tappa, .tappa:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 0 32px;
    flex-direction: row;
    text-align: left;
    gap: 14px;
  }
  .tappa + .tappa { margin-top: 18px; }
  .tappa::after, .tappa:nth-child(even)::after { left: 1px; right: auto; }
  .tappa img { width: 116px; }
  /* su telefono i mazzi restano dentro lo schermo */
  .mazzo--alto-sx { width: 150px; left: 8px; top: 56px; }
  .mazzo--basso-dx { width: 190px; right: 4px; bottom: 12px; }
  .mazzo--cartoncino { width: 108px; left: -14px; top: -52px; }
  .mazzo--pannello { width: 64%; }
  .pannello--bordeaux .mazzo--pannello { width: 48%; }
  /* su telefono si ferma solo il pannello, a tutto schermo; la sosta (--corsa) viene dopo il testo */
  .riga--fissa { --corsa: 110vh; min-height: 0; grid-template-rows: auto calc(100vh + var(--corsa)); grid-template-rows: auto calc(100svh + var(--corsa)); }
  .riga--fissa > .riga__testo { position: static; }
  .cartoncino__amaranto { width: 60px; right: -6px; }
  .polaroid { width: calc(50% - 10px); }
  .polaroid:nth-child(even) { margin-top: 24px; }
  .polaroid { padding-bottom: 30px; }
  .noi__fiore--a { width: 110px; left: -36px; bottom: 2%; }
  .noi__fiore--b { width: 64px; right: -8px; top: 24px; }
  .noi__fiore--c { width: 54px; right: -10px; top: -10px; }
  .noi .titolo { padding: 0 48px; }
}

@media (max-width: 420px) {
  .palette { gap: 10px 8px; }
  .palette__colore { font-size: .58rem; letter-spacing: .04em; width: 60px; }
  .palette__colore::before { width: 36px; height: 36px; }
  .copertina__sigla .etichetta { font-size: .625rem; letter-spacing: .14em; }
  .ovale { width: 62px; height: 86px; }
  .ovale img { width: 34px; }
  .tagline { font-size: .6875rem; letter-spacing: .14em; }
  .pannello { aspect-ratio: 1 / 1; }
}

/* ---------- Fase del sito (attributo data-fase su <html>, vedi index.html) ---------- */
html[data-fase="save-the-date"] .solo-completo { display: none !important; }
html:not([data-fase="save-the-date"]) .solo-save-the-date { display: none !important; }