/* matteovi.it - The unhurried maker
   Legno scuro sul fondo, fogli di carta appesi, rosso del sigillo.
   Riferimento: artefatto/design-system (token, direzioni, pagine).
   Regola: una classe per funzione, e ogni selettore definito in un solo punto. */

/* ---------- Caratteri: solo due ---------- */

@font-face {
  font-family: "Covered By Your Grace";
  src: url("../fonts/covered-by-your-grace.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* ---------- Variabili ---------- */

:root {
  --legno: #1c1b1a;
  --barra: #141312;
  --carta: #f3eee3;
  --carta-ombra: #e4dccb;
  --carta-fondo: #e9e2d3;
  --nastro: #e9dcb0cc;
  --inchiostro: #2b2622;
  --inchiostro-tenue: #5d554c;
  --chiaro: #ece6da;
  --chiaro-tenue: #a9a297;
  --rosso: #c8161d;
  --rosso-vivo: #e8333a;
  --rosso-scuro: #9b0f15;
  --su-rosso: #ffffff;
  --linea: #ffffff14;

  --cat-legno: #e0b14a;
  --cat-elettronica: #6cbf6a;
  --cat-software: #5aaee0;
  --cat-siti: #a88ddb;
  --cat-cyber: #e57bb0;
  /* pezzetto di nastro adesivo colorato (cartellini delle aree ed elenco degli hobby): luce in alto e capi strappati */
  --nastro-luce: linear-gradient(180deg, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, 0) 45%);
  --nastro-forma: polygon(6% 0, 94% 0, 100% 25%, 95% 50%, 100% 75%, 94% 100%, 6% 100%, 0 75%, 5% 50%, 0 25%);
  --su-cat: #141210;

  --ombra-foglio: drop-shadow(2px 4px 4px rgba(0, 0, 0, .5)) drop-shadow(9px 18px 16px rgba(0, 0, 0, .42));
  --ombra-tessera: 2px 4px 6px rgba(0, 0, 0, .45), 6px 12px 22px rgba(0, 0, 0, .4);
  --ombra-pulsante: 0 4px 0 #7d0b0f;
  --ombra-oggetto: drop-shadow(5px 9px 7px rgba(0, 0, 0, .55));

  --mano: "Covered By Your Grace", "Comic Sans MS", cursive;
  --testo: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;

  --larghezza: 1120px;
  --larghezza-foglio: 780px;
  --stacco: clamp(2.6rem, 6vw, 3.6rem);   /* spazio verticale tra fogli, griglie e file di pulsanti */
}

.cat-legno       { --c: var(--cat-legno); }
.cat-elettronica { --c: var(--cat-elettronica); }
.cat-software    { --c: var(--cat-software); }
.cat-siti        { --c: var(--cat-siti); }
.cat-cyber       { --c: var(--cat-cyber); }

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  /* il piede resta in fondo allo schermo anche sulle pagine corte */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--legno) url("../immagini/legno-scuro.jpg") repeat;
  background-size: 400px 228px;
  color: var(--chiaro);
  font: 500 1.125rem/1.65 var(--testo);   /* 18px: Quicksand ha le minuscole basse, a 17px sembrava piccolo */
  -webkit-font-smoothing: antialiased;
}
body.visore-aperto { overflow: hidden; }

/* il contenuto sta sopra gli oggetti della scrivania e spinge il piede in fondo */
main { flex: 1 0 auto; position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--rosso-vivo); }
a:hover { color: #ff5a60; }
:focus-visible { outline: 2px solid var(--rosso-vivo); outline-offset: 3px; }
th { font-weight: 500; }   /* tutto il testo è Medium 500, anche le intestazioni delle tabelle */

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--rosso); color: var(--su-rosso); padding: .5rem 1rem;
}
.salta:focus { left: 1rem; top: 1rem; color: var(--su-rosso); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.contenitore { width: min(100% - 32px, var(--larghezza)); margin-inline: auto; }
.sezione { padding: 0 0 clamp(3rem, 7vw, 5rem); overflow-x: clip; } /* i fogli alti e inclinati non fanno scorrere la pagina di lato */
.spazio { height: var(--stacco); }

/* ---------- Testata ---------- */

.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--barra);
  border-bottom: 1px solid var(--linea);
}
.testata .contenitore {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; gap: 1rem;
}
.marchio {
  display: flex; align-items: center; gap: .6rem;
  color: var(--chiaro); text-decoration: none;
}
.marchio:hover { color: var(--chiaro); }
.marchio img { display: block; width: 52px; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.marchio span { font: 1.6rem/1 var(--mano); }

.menu ul { display: flex; gap: clamp(.9rem, 3vw, 2rem); margin: 0; padding: 0; list-style: none; }
.menu a {
  color: var(--chiaro); text-decoration: none;
  font: 1.45rem/1 var(--mano);
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.menu a:hover, .menu a:focus-visible { color: var(--chiaro); border-bottom-color: var(--rosso-vivo); outline: none; }
.menu a[aria-current="page"] { border-bottom-color: var(--rosso); }

@media (max-width: 520px) {
  .marchio span { display: none; }
  .menu a { font-size: 1.3rem; }
}

/* ---------- Intestazione delle pagine interne ---------- */

.intestazione { text-align: center; padding: clamp(2.4rem, 6vw, 3.6rem) 0 clamp(1.4rem, 3vw, 2rem); }
/* freccia per salire alla pagina precedente: resta sempre visibile sotto la testata, in alto a destra, un po' trasparente */
.indietro {
  position: fixed; top: 80px; right: max(16px, calc(50vw - var(--larghezza) / 2)); z-index: 40;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(200, 22, 29, .72); color: var(--su-rosso); box-shadow: var(--ombra-pulsante);
  backdrop-filter: blur(3px);
}
.indietro:hover { background: var(--rosso); color: var(--su-rosso); }
.indietro:active { transform: translateY(2px); box-shadow: 0 2px 0 #7d0b0f; }
.indietro:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: var(--ombra-pulsante), 0 0 0 5px var(--rosso); }
.indietro svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* su schermi stretti la freccia fissa starebbe sopra il titolo: il titolo scende sotto di lei */
@media (max-width: 760px) {
  .intestazione:has(.indietro) { padding-top: 4.6rem; }
}
.intestazione h1 {
  margin: 0;
  font: 400 clamp(2.8rem, 7vw, 4.4rem)/1 var(--mano);
  color: var(--chiaro);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.intestazione h1::after {
  content: ""; display: block; width: 64px; height: 3px; margin: .7rem auto 0;
  background: var(--c, var(--rosso)); border-radius: 2px;
}
.intestazione .sottotitolo {
  margin: 1rem auto 0; max-width: 30em;
  font: 1.6rem/1.2 var(--mano); color: var(--chiaro-tenue);
  text-wrap: balance;
}

/* ---------- Prima pagina: saluto e apertura (una volta per visita) ---------- */

.saluto { text-align: center; padding: clamp(2.4rem, 6vw, 3.4rem) 16px .4rem; }
.saluto h1, .apertura h1 {
  margin: 0 auto 1.2rem;
  font: 400 clamp(2.4rem, 6vw, 4.4rem)/1.15 var(--mano);
  color: var(--chiaro);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}
@media (min-width: 720px) {
  .saluto h1, .apertura h1 { white-space: nowrap; }
}
@media (max-width: 719.98px) {
  .saluto h1 .seconda, .apertura h1 .seconda { display: block; }
}

/* "ti racconto di me": c'è solo con JavaScript */
.giu { display: none; }
.js .giu {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  font: 1.6rem/1 var(--mano); color: var(--chiaro-tenue);
  padding: .2rem .6rem;
}
.giu:hover { color: var(--chiaro); }
.giu:focus-visible { outline: 2px solid var(--rosso-vivo); outline-offset: 6px; border-radius: 6px; }
.giu svg {
  width: 30px; height: 30px; fill: none; stroke: var(--rosso-vivo);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  animation: dondola 2.4s ease-in-out infinite;
}

.apertura { display: none; }
.chiuso .apertura, .aprendo .apertura {
  position: relative; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  min-height: 100svh; max-height: 100svh;
  padding: 2.5rem 16px 3.5rem;
}
/* dopo il clic: il sigillo si rimpicciolisce e sparisce, l'apertura si chiude */
.aprendo .apertura {
  min-height: 0; max-height: 0; padding-block: 0; opacity: 0;
  transition: max-height .9s ease, min-height .9s ease, padding .9s ease, opacity .7s ease;
}
.apertura::before {
  /* vignettatura: concentra lo sguardo al centro */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 44%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .74) 88%);
}
.apertura .alone {
  position: absolute; left: 50%; top: 40%;
  width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 22, 29, .30) 0%, rgba(200, 22, 29, .10) 45%, rgba(200, 22, 29, 0) 70%);
  animation: respira 6s ease-in-out infinite, sorgi 1.2s ease-out both;
}
.apertura .dentro { position: relative; }
.apertura .sigillo {
  width: clamp(150px, 20vw, 190px); margin: 0 auto 1rem;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .65));
  animation: sorgi 1s ease-out both;
}
.aprendo .apertura .sigillo { transform: scale(.6) translateY(-30px); opacity: 0; transition: transform .9s ease, opacity .6s ease; }
.apertura h1 .w {
  display: inline-block;
  animation: scrivi .55s ease-out both;
  animation-delay: calc(.35s + var(--i) * .15s);
}
.w1 { --i: 0; } .w2 { --i: 1; } .w3 { --i: 2; } .w4 { --i: 3; } .w5 { --i: 4; } .w6 { --i: 5; }
.apertura .giu { animation: sorgi .9s ease-out 1.5s both; }

.resto { flex: 1 0 auto; display: flex; flex-direction: column; }
.chiuso .resto { display: none; }

/* il resto si appende alla parete un pezzo alla volta */
.rivela .ap { animation: appendi 1s cubic-bezier(.2, .9, .3, 1.12) both; animation-delay: calc(var(--i) * .24s); }
.ap0 { --i: 0; --da: 0deg; }
.ap1 { --i: 1; --da: 0deg; }
.ap2 { --i: 2; --da: -3deg; }
.ap3 { --i: 3; --da: 7deg; }
.ap4 { --i: 4; --da: -5deg; }
.ap5 { --i: 5; --da: 0deg; }

@keyframes respira { 50% { opacity: .5; transform: scale(1.1); } }
@keyframes sorgi { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes scrivi { from { opacity: 0; filter: blur(9px); transform: translateY(8px) rotate(-1.5deg); } }
@keyframes dondola { 50% { transform: translateY(6px); } }
@keyframes appendi { from { opacity: 0; translate: 0 -46px; rotate: var(--da, -4deg); } }

/* ---------- Pulsanti delle aree: cartellini di carta fermati con un pezzetto di nastro del colore dell'area ---------- */

.aree ul {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(.5rem, 1.4vw, .9rem);
  margin: 0; padding: 1.5rem 16px 2.4rem; list-style: none;
}
.aree a {
  position: relative; display: inline-block; white-space: nowrap;
  padding: .7rem 1.3rem calc(.66rem - 2px); border-radius: 2px; border-bottom: 2px solid transparent; transform: rotate(-.8deg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 2px),
    linear-gradient(0deg, rgba(95, 65, 30, .18) 0, rgba(95, 65, 30, 0) 3px),
    linear-gradient(180deg, var(--carta) 0%, var(--carta-fondo) 100%);
  color: var(--inchiostro); text-decoration: none;
  font: 500 1.1rem/1.4 var(--testo);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5), 3px 6px 9px rgba(0, 0, 0, .46);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.aree li:nth-child(even) a { transform: rotate(.7deg); }
.aree a:hover, .aree a:focus-visible, .aree li:nth-child(even) a:hover, .aree li:nth-child(even) a:focus-visible { color: var(--inchiostro); border-bottom-color: var(--c); transform: translateY(-3px) rotate(0deg); box-shadow: 0 2px 2px rgba(0, 0, 0, .35), 5px 11px 14px rgba(0, 0, 0, .45); }
/* il nastro: semitrasparente, capi strappati, un filo di luce */
.aree a::before {
  content: ""; position: absolute; left: 50%; top: -7px; width: 30px; height: 12px; margin-left: -15px;
  background: var(--nastro-luce), var(--c);
  opacity: .88;
  clip-path: var(--nastro-forma);
  transform: rotate(-4deg);
}
.aree li:nth-child(even) a::before { transform: rotate(3deg); }
/* schermi piccoli: le cinque voci restano in fila, con scritte più piccole */
@media (max-width: 760px) {
  .aree ul { gap: .3rem; padding-left: 8px; padding-right: 8px; }
  .aree a { padding-left: .5em; padding-right: .5em; font-size: clamp(.6rem, 3vw, 1.1rem); }
}
/* sotto i 340px non c'è posto per una riga sola: due righe, con scritte più grandi */
@media (max-width: 340px) {
  .aree ul { flex-wrap: wrap; gap: 1rem .5rem; }
  .aree a { padding-left: .7em; padding-right: .7em; font-size: .85rem; }
}
/* nel quaderno gli stessi cartellini scelgono il periodo, senza nastro */
.periodo ul { padding-top: 0; }
.periodo a::before { display: none; }
.periodo a[aria-current="page"] { outline: 2px solid var(--rosso-vivo); outline-offset: 2px; }

/* ---------- Carta: forma irregolare, grana, macchie, ombra che segue il contorno ---------- */

.carta {
  --fondo: var(--carta);
  --bordo: #dccfb4;
  /* rilievo della carta: luce da in alto a sinistra, bordi scuriti, spessore, aloni e macchie */
  --rilievo:
    linear-gradient(180deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 3px),
    linear-gradient(0deg, rgba(95, 65, 30, .32) 0, rgba(95, 65, 30, 0) 5px),
    linear-gradient(90deg, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 3px),
    linear-gradient(270deg, rgba(95, 65, 30, .22) 0, rgba(95, 65, 30, 0) 5px),
    linear-gradient(118deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 34%, rgba(90, 60, 25, 0) 58%, rgba(90, 60, 25, .2) 100%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(0, 0, 0, 0) 66%, rgba(115, 80, 40, .26) 100%),
    radial-gradient(circle 74px at 88% 20%, rgba(0, 0, 0, 0) 60%, rgba(150, 105, 55, .12) 64%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(ellipse 150px 90px at 10% 80%, rgba(170, 125, 65, .17), rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle 190px at 100% 100%, rgba(140, 95, 45, .2), rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle 120px at 0% 0%, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 70%);
  --righe: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --grana: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.28  0 0 0 0 0.2  0.3 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --macchie: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62  0 0 0 0 0.5  0 0 0 0 0.32  0.28 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sfondo-carta: radial-gradient(ellipse 85% 75% at 48% 38%, var(--fondo) 62%, var(--bordo) 100%);
  position: relative; isolation: isolate;
  color: var(--inchiostro);
  filter: var(--ombra-foglio);
}
.carta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: var(--forma);
  background: var(--rilievo), var(--righe), var(--grana), var(--macchie), var(--sfondo-carta);
}
/* due pieghe orizzontali appena visibili */
.carta.piegata::before {
  background:
    var(--rilievo), var(--righe),
    linear-gradient(180deg, transparent calc(33.3% - 1px), rgba(60, 40, 20, .06) calc(33.3% - .5px), rgba(255, 255, 255, .30) calc(33.3% + 1px), transparent calc(33.3% + 2.5px)),
    linear-gradient(180deg, transparent calc(66.6% - 1px), rgba(60, 40, 20, .06) calc(66.6% - .5px), rgba(255, 255, 255, .30) calc(66.6% + 1px), transparent calc(66.6% + 2.5px)),
    var(--grana), var(--macchie), var(--sfondo-carta);
}
/* angolo in basso a destra piegato */
.carta.angolo::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, #fffaf0 0%, var(--bordo) 55%, #c9bfaa 100%);
}
/* forme dei contorni: quattro, a rotazione */
.f1 { --forma: polygon(calc(0% + 3px) calc(0% + 3px), 7% calc(0% + 1px), 15% calc(0% + 0px), 24% calc(0% + 0px), 33% calc(0% + 0px), 42% calc(0% + 0px), 51% calc(0% + 1px), 60% calc(0% + 1px), 69% calc(0% + 0px), 78% calc(0% + 3px), 87% calc(0% + 2px), 94% calc(0% + 3px), calc(100% - 1px) calc(0% + 1px), calc(100% - 2px) 12%, calc(100% - 3px) 26%, calc(100% - 0px) 40%, calc(100% - 0px) 55%, calc(100% - 3px) 70%, calc(100% - 2px) 85%, calc(100% - 3px) calc(100% - 0px), 94% calc(100% - 2px), 87% calc(100% - 2px), 78% calc(100% - 1px), 69% calc(100% - 2px), 60% calc(100% - 0px), 51% calc(100% - 0px), 42% calc(100% - 0px), 33% calc(100% - 3px), 24% calc(100% - 0px), 15% calc(100% - 2px), 7% calc(100% - 3px), calc(0% + 0px) calc(100% - 0px), calc(0% + 0px) 85%, calc(0% + 1px) 70%, calc(0% + 1px) 55%, calc(0% + 0px) 40%, calc(0% + 3px) 26%, calc(0% + 3px) 12%); }
.f2 { --forma: polygon(calc(0% + 3px) calc(0% + 0px), 7% calc(0% + 0px), 15% calc(0% + 0px), 24% calc(0% + 3px), 33% calc(0% + 3px), 42% calc(0% + 0px), 51% calc(0% + 3px), 60% calc(0% + 2px), 69% calc(0% + 0px), 78% calc(0% + 1px), 87% calc(0% + 0px), 94% calc(0% + 2px), calc(100% - 1px) calc(0% + 1px), calc(100% - 2px) 12%, calc(100% - 2px) 26%, calc(100% - 2px) 40%, calc(100% - 2px) 55%, calc(100% - 0px) 70%, calc(100% - 3px) 85%, calc(100% - 0px) calc(100% - 30px), calc(100% - 30px) calc(100% - 2px), 94% calc(100% - 3px), 87% calc(100% - 3px), 78% calc(100% - 1px), 69% calc(100% - 1px), 60% calc(100% - 1px), 51% calc(100% - 2px), 42% calc(100% - 1px), 33% calc(100% - 0px), 24% calc(100% - 0px), 15% calc(100% - 0px), 7% calc(100% - 3px), calc(0% + 0px) calc(100% - 2px), calc(0% + 2px) 85%, calc(0% + 2px) 70%, calc(0% + 0px) 55%, calc(0% + 2px) 40%, calc(0% + 2px) 26%, calc(0% + 2px) 12%); }
.f3 { --forma: polygon(calc(0% + 3px) calc(0% + 0px), 7% calc(0% + 2px), 15% calc(0% + 2px), 24% calc(0% + 3px), 33% calc(0% + 2px), 42% calc(0% + 0px), 51% calc(0% + 1px), 60% calc(0% + 3px), 69% calc(0% + 0px), 78% calc(0% + 0px), 87% calc(0% + 0px), 94% calc(0% + 2px), calc(100% - 0px) calc(0% + 1px), calc(100% - 0px) 12%, calc(100% - 2px) 26%, calc(100% - 2px) 40%, calc(100% - 1px) 55%, calc(100% - 0px) 70%, calc(100% - 0px) 85%, calc(100% - 1px) calc(100% - 2px), 94% calc(100% - 1px), 87% calc(100% - 2px), 78% calc(100% - 0px), 69% calc(100% - 2px), 60% calc(100% - 2px), 51% calc(100% - 1px), 42% calc(100% - 3px), 33% calc(100% - 1px), 24% calc(100% - 1px), 15% calc(100% - 2px), 7% calc(100% - 0px), calc(0% + 3px) calc(100% - 3px), calc(0% + 0px) 85%, calc(0% + 0px) 70%, calc(0% + 2px) 55%, calc(0% + 1px) 40%, calc(0% + 0px) 26%, calc(0% + 3px) 12%); }
.f4 { --forma: polygon(calc(0% + 1px) calc(0% + 0px), 7% calc(0% + 1px), 15% calc(0% + 3px), 24% calc(0% + 2px), 33% calc(0% + 1px), 42% calc(0% + 3px), 51% calc(0% + 1px), 60% calc(0% + 0px), 69% calc(0% + 1px), 78% calc(0% + 3px), 87% calc(0% + 1px), 94% calc(0% + 1px), calc(100% - 0px) calc(0% + 0px), calc(100% - 1px) 12%, calc(100% - 1px) 26%, calc(100% - 1px) 40%, calc(100% - 1px) 55%, calc(100% - 2px) 70%, calc(100% - 2px) 85%, calc(100% - 1px) calc(100% - 1px), 94% calc(100% - 1px), 87% calc(100% - 1px), 78% calc(100% - 3px), 69% calc(100% - 2px), 60% calc(100% - 0px), 51% calc(100% - 2px), 42% calc(100% - 3px), 33% calc(100% - 1px), 24% calc(100% - 1px), 15% calc(100% - 2px), 7% calc(100% - 0px), calc(0% + 2px) calc(100% - 2px), calc(0% + 0px) 85%, calc(0% + 2px) 70%, calc(0% + 0px) 55%, calc(0% + 2px) 40%, calc(0% + 2px) 26%, calc(0% + 2px) 12%); }

.puntina {
  position: absolute; top: 13px; left: 47%;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ff9a9a 0 12%, #e2262d 30%, #8f0b10 100%);
  box-shadow: 3px 5px 5px rgba(0, 0, 0, .5);
}

/* ---------- Foglio strappato da un quaderno: bordo alto a morsi, righe leggere, margine rosso ---------- */
/* Il testo segue la griglia da 28px (--riga): altezze e margini dentro un foglio con le righe sono multipli di 28px. */

.foglio {
  --riga: 28px;
  --margine: clamp(10px, 3.2vw, 34px);
  --righe:
    linear-gradient(90deg, rgba(0, 0, 0, 0) var(--margine), rgba(200, 22, 29, .32) var(--margine), rgba(200, 22, 29, .32) calc(var(--margine) + 1.5px), rgba(0, 0, 0, 0) calc(var(--margine) + 1.5px)),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--riga) - 7px), rgba(70, 110, 160, .26) calc(var(--riga) - 7px), rgba(70, 110, 160, .26) calc(var(--riga) - 6px), rgba(0, 0, 0, 0) calc(var(--riga) - 6px), rgba(0, 0, 0, 0) var(--riga));
  max-width: var(--larghezza-foglio); margin: 0 auto;
  padding: 56px clamp(1.4rem, 5vw, 3.4rem) clamp(1.8rem, 4vw, 2.4rem) calc(var(--margine) + 24px);
  line-height: var(--riga);
  transform: rotate(-.9deg);
}
.foglio.f1 { --forma: polygon(0% 3px, 0.22% 2.3px, 0.57% 6.2px, 1.09% 10.4px, 1.57% 11.2px, 2.04% 11.2px, 2.52% 10.4px, 3.04% 6.2px, 3.39% 2.3px, 4.02% 1.4px, 4.38% 4.7px, 4.91% 8.1px, 5.40% 9.3px, 5.89% 9.9px, 6.37% 8.1px, 6.91% 4.7px, 7.26% 1.4px, 7.19% 1.7px, 7.56% 4.3px, 8.11% 7.1px, 8.60% 7.4px, 9.10% 7.8px, 9.60% 7.1px, 10.15% 4.3px, 10.51% 1.7px, 10.88% 3.4px, 11.24% 7.3px, 11.77% 11.5px, 12.26% 11.3px, 12.75% 11.6px, 13.24% 11.5px, 13.77% 7.3px, 14.13% 3.4px, 14.83% 1.0px, 15.16% 4.3px, 15.65% 7.8px, 16.10% 9.4px, 16.55% 8.8px, 17.00% 7.8px, 17.49% 4.3px, 17.82% 1.0px, 18.53% 1.1px, 18.88% 4.3px, 19.40% 7.6px, 19.88% 9.1px, 20.35% 9.8px, 20.82% 7.6px, 21.34% 4.3px, 21.69% 1.1px, 22.46% 2.5px, 22.82% 5.8px, 23.36% 9.2px, 23.85% 9.2px, 24.34% 9.2px, 24.83% 9.2px, 25.36% 5.8px, 25.72% 2.5px, 25.89% 3.4px, 26.25% 7.4px, 26.81% 11.7px, 27.31% 11.5px, 27.81% 11.9px, 28.31% 11.7px, 28.86% 7.4px, 29.22% 3.4px, 29.80% 1.6px, 30.13% 4.5px, 30.62% 7.5px, 31.07% 8.3px, 31.52% 8.8px, 31.97% 7.5px, 32.46% 4.5px, 32.79% 1.6px, 33.39% 3.0px, 33.76% 6.1px, 34.32% 9.3px, 34.83% 8.7px, 35.34% 9.4px, 35.85% 9.3px, 36.41% 6.1px, 36.78% 3.0px, 36.80% 1.5px, 37.15% 5.4px, 37.68% 9.5px, 38.15% 11.1px, 38.63% 12.1px, 39.10% 9.5px, 39.63% 5.4px, 39.98% 1.5px, 40.84% 1.2px, 41.20% 4.6px, 41.75% 8.3px, 42.24% 9.8px, 42.74% 9.4px, 43.23% 8.3px, 43.78% 4.6px, 44.14% 1.2px, 44.23% 1.8px, 44.60% 5.8px, 45.14% 10.0px, 45.64% 11.3px, 46.13% 10.6px, 46.63% 10.0px, 47.17% 5.8px, 47.53% 1.8px, 48.09% 1.2px, 48.45% 3.8px, 49.00% 6.5px, 49.50% 7.3px, 50.00% 6.6px, 50.49% 6.5px, 51.04% 3.8px, 51.40% 1.2px, 52.12% 2.1px, 52.48% 4.8px, 53.02% 7.7px, 53.52% 7.9px, 54.01% 7.1px, 54.50% 7.7px, 55.05% 4.8px, 55.41% 2.1px, 56.02% 1.3px, 56.36% 4.4px, 56.86% 7.7px, 57.32% 8.9px, 57.78% 8.4px, 58.24% 7.7px, 58.74% 4.4px, 59.08% 1.3px, 59.90% 2.9px, 60.27% 5.9px, 60.83% 9.0px, 61.33% 8.4px, 61.83% 7.8px, 62.34% 9.0px, 62.89% 5.9px, 63.26% 2.9px, 63.21% 3.1px, 63.54% 6.5px, 64.03% 10.2px, 64.48% 9.9px, 64.93% 10.9px, 65.39% 10.2px, 65.88% 6.5px, 66.21% 3.1px, 66.68% 1.6px, 67.02% 5.3px, 67.53% 9.2px, 68.00% 10.5px, 68.46% 10.1px, 68.93% 9.2px, 69.44% 5.3px, 69.79% 1.6px, 70.26% 1.2px, 70.60% 4.6px, 71.10% 8.1px, 71.57% 9.6px, 72.03% 9.8px, 72.49% 8.1px, 72.99% 4.6px, 73.33% 1.2px, 74.21% 2.1px, 74.56% 6.0px, 75.08% 10.2px, 75.56% 11.3px, 76.04% 11.5px, 76.51% 10.2px, 77.04% 6.0px, 77.39% 2.1px, 78.31% 1.4px, 78.68% 4.1px, 79.24% 7.0px, 79.74% 7.7px, 80.25% 8.3px, 80.75% 7.0px, 81.31% 4.1px, 81.68% 1.4px, 81.39% 1.5px, 81.76% 5.1px, 82.32% 8.9px, 82.83% 10.3px, 83.34% 9.7px, 83.84% 8.9px, 84.40% 5.1px, 84.77% 1.5px, 85.91% 3.1px, 86.26% 6.5px, 86.78% 10.1px, 87.25% 9.7px, 87.72% 8.9px, 88.20% 10.1px, 88.72% 6.5px, 89.06% 3.1px, 88.64% 3.3px, 89.00% 6.1px, 89.54% 9.1px, 90.03% 8.1px, 90.53% 7.6px, 91.02% 9.1px, 91.56% 6.1px, 91.92% 3.3px, 93.25% 2.4px, 93.58% 5.3px, 94.08% 8.4px, 94.54% 8.3px, 95.00% 8.8px, 95.45% 8.4px, 95.95% 5.3px, 96.29% 2.4px, 96.05% 1.5px, 96.41% 4.9px, 96.97% 8.4px, 97.47% 9.5px, 97.97% 9.7px, 98.47% 8.4px, 99.02% 4.9px, 99.39% 1.5px, 100% 2px, calc(100% - 1px) calc(0% + 1px), calc(100% - 2px) 12%, calc(100% - 3px) 26%, calc(100% - 0px) 40%, calc(100% - 0px) 55%, calc(100% - 3px) 70%, calc(100% - 2px) 85%, calc(100% - 3px) calc(100% - 0px), 94% calc(100% - 2px), 87% calc(100% - 2px), 78% calc(100% - 1px), 69% calc(100% - 2px), 60% calc(100% - 0px), 51% calc(100% - 0px), 42% calc(100% - 0px), 33% calc(100% - 3px), 24% calc(100% - 0px), 15% calc(100% - 2px), 7% calc(100% - 3px), calc(0% + 0px) calc(100% - 0px), calc(0% + 0px) 85%, calc(0% + 1px) 70%, calc(0% + 1px) 55%, calc(0% + 0px) 40%, calc(0% + 3px) 26%, calc(0% + 3px) 12%); }
.foglio.f2 { --forma: polygon(0% 3px, 0.78% 3.3px, 1.11% 7.1px, 1.60% 11.2px, 2.05% 11.0px, 2.50% 11.2px, 2.95% 11.2px, 3.45% 7.1px, 3.78% 3.3px, 3.96% 2.3px, 4.29% 4.9px, 4.79% 7.7px, 5.25% 7.6px, 5.71% 7.5px, 6.17% 7.7px, 6.67% 4.9px, 7.00% 2.3px, 7.48% 2.1px, 7.81% 4.6px, 8.31% 7.2px, 8.76% 7.1px, 9.21% 7.5px, 9.66% 7.2px, 10.15% 4.6px, 10.48% 2.1px, 11.32% 2.2px, 11.67% 5.8px, 12.18% 9.6px, 12.65% 10.3px, 13.12% 9.4px, 13.59% 9.6px, 14.10% 5.8px, 14.45% 2.2px, 15.33% 2.4px, 15.69% 5.9px, 16.22% 9.6px, 16.71% 10.0px, 17.19% 10.9px, 17.68% 9.6px, 18.21% 5.9px, 18.57% 2.4px, 18.62% 2.8px, 18.98% 5.9px, 19.51% 9.1px, 19.99% 8.7px, 20.47% 9.0px, 20.96% 9.1px, 21.49% 5.9px, 21.84% 2.8px, 22.25% 1.2px, 22.61% 4.4px, 23.15% 7.8px, 23.64% 9.1px, 24.13% 9.3px, 24.63% 7.8px, 25.17% 4.4px, 25.53% 1.2px, 26.20% 2.5px, 26.54% 5.3px, 27.04% 8.2px, 27.50% 7.8px, 27.95% 7.5px, 28.41% 8.2px, 28.91% 5.3px, 29.25% 2.5px, 30.29% 1.5px, 30.62% 4.1px, 31.12% 6.9px, 31.57% 7.5px, 32.02% 6.6px, 32.47% 6.9px, 32.97% 4.1px, 33.30% 1.5px, 33.41% 2.4px, 33.75% 6.1px, 34.26% 10.1px, 34.73% 10.7px, 35.19% 10.4px, 35.66% 10.1px, 36.17% 6.1px, 36.52% 2.4px, 37.07% 1.7px, 37.43% 5.4px, 37.96% 9.3px, 38.44% 10.5px, 38.92% 10.0px, 39.40% 9.3px, 39.93% 5.4px, 40.28% 1.7px, 40.53% 2.9px, 40.90% 6.4px, 41.45% 10.2px, 41.95% 10.2px, 42.45% 9.7px, 42.95% 10.2px, 43.50% 6.4px, 43.87% 2.9px, 44.65% 3.2px, 45.02% 6.6px, 45.58% 10.2px, 46.09% 9.7px, 46.60% 9.0px, 47.10% 10.2px, 47.66% 6.6px, 48.03% 3.2px, 48.99% 1.1px, 49.32% 4.2px, 49.81% 7.5px, 50.25% 8.9px, 50.70% 9.5px, 51.14% 7.5px, 51.63% 4.2px, 51.96% 1.1px, 52.20% 3.3px, 52.57% 7.1px, 53.13% 11.0px, 53.64% 10.6px, 54.14% 10.7px, 54.65% 11.0px, 55.21% 7.1px, 55.58% 3.3px, 56.20% 2.8px, 56.57% 5.8px, 57.13% 9.0px, 57.64% 8.6px, 58.15% 8.3px, 58.66% 9.0px, 59.22% 5.8px, 59.59% 2.8px, 59.28% 1.2px, 59.61% 4.4px, 60.12% 7.7px, 60.58% 9.1px, 61.03% 10.0px, 61.49% 7.7px, 61.99% 4.4px, 62.33% 1.2px, 63.67% 1.5px, 64.02% 4.1px, 64.55% 6.9px, 65.03% 7.5px, 65.51% 6.8px, 65.98% 6.9px, 66.51% 4.1px, 66.86% 1.5px, 66.99% 3.0px, 67.33% 5.8px, 67.85% 8.8px, 68.33% 8.1px, 68.80% 8.9px, 69.27% 8.8px, 69.79% 5.8px, 70.14% 3.0px, 70.50% 1.8px, 70.87% 5.7px, 71.42% 9.8px, 71.92% 11.0px, 72.42% 11.8px, 72.91% 9.8px, 73.46% 5.7px, 73.83% 1.8px, 74.45% 2.0px, 74.81% 5.5px, 75.36% 9.3px, 75.86% 10.1px, 76.36% 10.4px, 76.86% 9.3px, 77.41% 5.5px, 77.78% 2.0px, 77.72% 1.7px, 78.08% 4.8px, 78.62% 8.1px, 79.12% 8.8px, 79.62% 9.0px, 80.11% 8.1px, 80.66% 4.8px, 81.02% 1.7px, 81.76% 3.0px, 82.12% 5.6px, 82.65% 8.4px, 83.14% 7.5px, 83.63% 7.2px, 84.11% 8.4px, 84.65% 5.6px, 85.01% 3.0px, 85.40% 3.0px, 85.78% 5.8px, 86.33% 8.8px, 86.84% 8.1px, 87.35% 7.3px, 87.86% 8.8px, 88.42% 5.8px, 88.79% 3.0px, 89.20% 2.3px, 89.55% 5.1px, 90.08% 8.1px, 90.56% 8.1px, 91.04% 8.0px, 91.53% 8.1px, 92.06% 5.1px, 92.41% 2.3px, 92.83% 2.7px, 93.17% 5.2px, 93.69% 7.8px, 94.16% 7.0px, 94.63% 7.6px, 95.10% 7.8px, 95.61% 5.2px, 95.96% 2.7px, 96.16% 3.1px, 96.52% 5.9px, 97.06% 8.8px, 97.55% 7.9px, 98.03% 7.3px, 98.52% 8.8px, 99.06% 5.9px, 99.42% 3.1px, 100% 2px, calc(100% - 1px) calc(0% + 1px), calc(100% - 2px) 12%, calc(100% - 2px) 26%, calc(100% - 2px) 40%, calc(100% - 2px) 55%, calc(100% - 0px) 70%, calc(100% - 3px) 85%, calc(100% - 0px) calc(100% - 30px), calc(100% - 30px) calc(100% - 2px), 94% calc(100% - 3px), 87% calc(100% - 3px), 78% calc(100% - 1px), 69% calc(100% - 1px), 60% calc(100% - 1px), 51% calc(100% - 2px), 42% calc(100% - 1px), 33% calc(100% - 0px), 24% calc(100% - 0px), 15% calc(100% - 0px), 7% calc(100% - 3px), calc(0% + 0px) calc(100% - 2px), calc(0% + 2px) 85%, calc(0% + 2px) 70%, calc(0% + 0px) 55%, calc(0% + 2px) 40%, calc(0% + 2px) 26%, calc(0% + 2px) 12%); }
.foglio.f3 { --forma: polygon(0% 3px, 0.37% 1.2px, 0.73% 4.6px, 1.28% 8.3px, 1.78% 9.8px, 2.28% 10.4px, 2.78% 8.3px, 3.34% 4.6px, 3.70% 1.2px, 3.97% 2.5px, 4.32% 5.5px, 4.85% 8.8px, 5.33% 8.7px, 5.81% 7.9px, 6.29% 8.8px, 6.82% 5.5px, 7.17% 2.5px, 7.88% 2.4px, 8.22% 5.3px, 8.74% 8.4px, 9.21% 8.3px, 9.68% 8.7px, 10.15% 8.4px, 10.66% 5.3px, 11.01% 2.4px, 11.24% 3.3px, 11.61% 7.3px, 12.16% 11.5px, 12.66% 11.4px, 13.16% 10.6px, 13.66% 11.5px, 14.21% 7.3px, 14.57% 3.3px, 14.60% 1.7px, 14.96% 4.7px, 15.50% 7.9px, 16.00% 8.6px, 16.49% 9.3px, 16.98% 7.9px, 17.52% 4.7px, 17.88% 1.7px, 18.94% 2.5px, 19.27% 5.9px, 19.76% 9.4px, 20.21% 9.6px, 20.66% 9.6px, 21.10% 9.4px, 21.59% 5.9px, 21.92% 2.5px, 22.16% 2.0px, 22.52% 4.5px, 23.06% 7.1px, 23.54% 7.0px, 24.03% 7.9px, 24.52% 7.1px, 25.06% 4.5px, 25.41% 2.0px, 25.79% 2.4px, 26.13% 4.9px, 26.64% 7.5px, 27.11% 7.1px, 27.58% 6.4px, 28.05% 7.5px, 28.56% 4.9px, 28.91% 2.4px, 30.31% 2.7px, 30.65% 6.6px, 31.15% 10.7px, 31.61% 11.0px, 32.07% 11.5px, 32.53% 10.7px, 33.04% 6.6px, 33.37% 2.7px, 33.76% 2.2px, 34.12% 6.1px, 34.66% 10.2px, 35.14% 11.1px, 35.63% 10.7px, 36.11% 10.2px, 36.65% 6.1px, 37.01% 2.2px, 37.49% 2.2px, 37.84% 4.9px, 38.38% 7.9px, 38.86% 8.0px, 39.35% 7.1px, 39.83% 7.9px, 40.37% 4.9px, 40.72% 2.2px, 40.92% 2.3px, 41.27% 4.8px, 41.81% 7.4px, 42.30% 7.0px, 42.79% 6.2px, 43.27% 7.4px, 43.81% 4.8px, 44.17% 2.3px, 44.74% 1.8px, 45.12% 4.3px, 45.68% 7.0px, 46.19% 7.1px, 46.70% 6.3px, 47.21% 7.0px, 47.77% 4.3px, 48.15% 1.8px, 48.06% 2.2px, 48.41% 5.0px, 48.94% 8.0px, 49.42% 8.1px, 49.90% 8.1px, 50.38% 8.0px, 50.90% 5.0px, 51.26% 2.2px, 52.25% 2.3px, 52.59% 5.2px, 53.09% 8.3px, 53.55% 8.3px, 54.01% 8.7px, 54.47% 8.3px, 54.97% 5.2px, 55.31% 2.3px, 55.85% 2.2px, 56.18% 6.1px, 56.67% 10.3px, 57.11% 11.1px, 57.56% 10.7px, 58.00% 10.3px, 58.49% 6.1px, 58.82% 2.2px, 59.60% 1.1px, 59.95% 4.8px, 60.47% 8.6px, 60.94% 10.4px, 61.41% 10.0px, 61.88% 8.6px, 62.40% 4.8px, 62.75% 1.1px, 62.85% 3.3px, 63.21% 5.8px, 63.76% 8.5px, 64.26% 7.2px, 64.76% 7.6px, 65.26% 8.5px, 65.81% 5.8px, 66.17% 3.3px, 67.31% 2.7px, 67.67% 5.7px, 68.19% 8.8px, 68.68% 8.6px, 69.16% 9.4px, 69.64% 8.8px, 70.17% 5.7px, 70.52% 2.7px, 70.24% 3.0px, 70.57% 6.6px, 71.08% 10.3px, 71.53% 10.0px, 71.99% 11.0px, 72.45% 10.3px, 72.95% 6.6px, 73.29% 3.0px, 74.13% 1.0px, 74.48% 3.9px, 75.01% 6.9px, 75.49% 8.2px, 75.96% 7.3px, 76.44% 6.9px, 76.97% 3.9px, 77.32% 1.0px, 78.07% 2.1px, 78.43% 5.0px, 78.98% 8.2px, 79.47% 8.5px, 79.97% 8.7px, 80.46% 8.2px, 81.01% 5.0px, 81.37% 2.1px, 82.11% 3.1px, 82.48% 6.9px, 83.04% 10.9px, 83.55% 10.9px, 84.05% 11.6px, 84.56% 10.9px, 85.12% 6.9px, 85.49% 3.1px, 85.40% 1.2px, 85.76% 4.3px, 86.30% 7.7px, 86.78% 9.0px, 87.27% 10.0px, 87.75% 7.7px, 88.29% 4.3px, 88.64% 1.2px, 89.27% 2.4px, 89.63% 5.0px, 90.16% 7.7px, 90.65% 7.4px, 91.14% 6.5px, 91.63% 7.7px, 92.16% 5.0px, 92.52% 2.4px, 92.40% 1.1px, 92.77% 4.7px, 93.33% 8.5px, 93.83% 10.3px, 94.34% 10.5px, 94.85% 8.5px, 95.41% 4.7px, 95.78% 1.1px, 96.10% 2.8px, 96.46% 5.5px, 97.00% 8.4px, 97.49% 7.8px, 97.98% 8.1px, 98.47% 8.4px, 99.01% 5.5px, 99.37% 2.8px, 100% 2px, calc(100% - 0px) calc(0% + 1px), calc(100% - 0px) 12%, calc(100% - 2px) 26%, calc(100% - 2px) 40%, calc(100% - 1px) 55%, calc(100% - 0px) 70%, calc(100% - 0px) 85%, calc(100% - 1px) calc(100% - 2px), 94% calc(100% - 1px), 87% calc(100% - 2px), 78% calc(100% - 0px), 69% calc(100% - 2px), 60% calc(100% - 2px), 51% calc(100% - 1px), 42% calc(100% - 3px), 33% calc(100% - 1px), 24% calc(100% - 1px), 15% calc(100% - 2px), 7% calc(100% - 0px), calc(0% + 3px) calc(100% - 3px), calc(0% + 0px) 85%, calc(0% + 0px) 70%, calc(0% + 2px) 55%, calc(0% + 1px) 40%, calc(0% + 0px) 26%, calc(0% + 3px) 12%); }
.foglio.f4 { --forma: polygon(0% 3px, 0.05% 1.6px, 0.42% 4.3px, 0.97% 7.1px, 1.48% 7.7px, 1.99% 7.9px, 2.49% 7.1px, 3.05% 4.3px, 3.42% 1.6px, 4.10% 2.3px, 4.46% 5.4px, 5.01% 8.6px, 5.50% 8.7px, 5.99% 8.9px, 6.49% 8.6px, 7.03% 5.4px, 7.39% 2.3px, 7.96% 2.6px, 8.31% 6.4px, 8.83% 10.3px, 9.30% 10.8px, 9.78% 10.1px, 10.25% 10.3px, 10.77% 6.4px, 11.12% 2.6px, 10.99% 2.7px, 11.34% 5.4px, 11.88% 8.3px, 12.37% 7.8px, 12.86% 8.0px, 13.34% 8.3px, 13.88% 5.4px, 14.24% 2.7px, 14.55% 2.9px, 14.92% 5.4px, 15.47% 8.0px, 15.98% 7.1px, 16.48% 7.8px, 16.98% 8.0px, 17.53% 5.4px, 17.90% 2.9px, 18.58% 2.7px, 18.91% 6.3px, 19.41% 10.2px, 19.86% 10.3px, 20.31% 10.6px, 20.77% 10.2px, 21.26% 6.3px, 21.60% 2.7px, 22.00% 3.2px, 22.37% 6.7px, 22.93% 10.5px, 23.44% 10.1px, 23.95% 9.2px, 24.46% 10.5px, 25.02% 6.7px, 25.40% 3.2px, 26.07% 2.5px, 26.41% 5.9px, 26.91% 9.5px, 27.37% 9.7px, 27.82% 10.5px, 28.28% 9.5px, 28.78% 5.9px, 29.12% 2.5px, 30.20% 1.7px, 30.56% 4.4px, 31.09% 7.2px, 31.58% 7.7px, 32.07% 7.5px, 32.56% 7.2px, 33.10% 4.4px, 33.46% 1.7px, 33.86% 2.2px, 34.19% 5.3px, 34.68% 8.5px, 35.13% 8.8px, 35.57% 8.0px, 36.02% 8.5px, 36.51% 5.3px, 36.83% 2.2px, 37.20% 2.7px, 37.56% 5.9px, 38.11% 9.2px, 38.60% 8.9px, 39.09% 9.0px, 39.59% 9.2px, 40.13% 5.9px, 40.49% 2.7px, 41.46% 2.6px, 41.79% 5.5px, 42.29% 8.7px, 42.75% 8.4px, 43.20% 7.6px, 43.65% 8.7px, 44.15% 5.5px, 44.49% 2.6px, 44.19% 3.1px, 44.55% 6.9px, 45.09% 10.9px, 45.59% 10.9px, 46.08% 10.2px, 46.58% 10.9px, 47.12% 6.9px, 47.48% 3.1px, 48.53% 1.3px, 48.89% 5.2px, 49.43% 9.2px, 49.92% 11.0px, 50.40% 11.5px, 50.89% 9.2px, 51.43% 5.2px, 51.79% 1.3px, 52.12% 2.0px, 52.49% 5.8px, 53.05% 9.8px, 53.56% 10.8px, 54.07% 10.3px, 54.58% 9.8px, 55.14% 5.8px, 55.51% 2.0px, 55.77% 2.8px, 56.12% 6.3px, 56.64% 10.0px, 57.11% 10.1px, 57.58% 10.0px, 58.05% 10.0px, 58.57% 6.3px, 58.92% 2.8px, 59.94% 1.7px, 60.30% 4.4px, 60.84% 7.4px, 61.33% 8.0px, 61.82% 7.5px, 62.31% 7.4px, 62.85% 4.4px, 63.21% 1.7px, 63.65% 1.8px, 63.99% 5.7px, 64.51% 9.8px, 64.98% 11.2px, 65.45% 11.9px, 65.92% 9.8px, 66.43% 5.7px, 66.78% 1.8px, 67.25% 2.8px, 67.59% 5.5px, 68.09% 8.5px, 68.54% 8.0px, 69.00% 7.0px, 69.45% 8.5px, 69.95% 5.5px, 70.29% 2.8px, 70.37% 2.6px, 70.71% 5.2px, 71.21% 7.8px, 71.67% 7.3px, 72.13% 7.4px, 72.59% 7.8px, 73.10% 5.2px, 73.44% 2.6px, 73.95% 1.8px, 74.31% 4.6px, 74.85% 7.6px, 75.34% 8.0px, 75.83% 7.3px, 76.32% 7.6px, 76.85% 4.6px, 77.21% 1.8px, 78.52% 2.4px, 78.88% 6.0px, 79.41% 9.8px, 79.89% 10.2px, 80.37% 10.2px, 80.85% 9.8px, 81.38% 6.0px, 81.73% 2.4px, 82.32% 3.1px, 82.64% 6.9px, 83.13% 10.8px, 83.58% 10.7px, 84.03% 10.9px, 84.47% 10.8px, 84.96% 6.9px, 85.29% 3.1px, 85.85% 2.5px, 86.21% 5.8px, 86.75% 9.2px, 87.23% 9.3px, 87.72% 8.7px, 88.21% 9.2px, 88.75% 5.8px, 89.10% 2.5px, 89.37% 2.9px, 89.72% 5.4px, 90.25% 8.2px, 90.73% 7.3px, 91.21% 7.5px, 91.69% 8.2px, 92.21% 5.4px, 92.56% 2.9px, 92.61% 2.6px, 92.98% 6.5px, 93.54% 10.7px, 94.04% 11.1px, 94.55% 10.8px, 95.05% 10.7px, 95.61% 6.5px, 95.98% 2.6px, 96.13% 3.0px, 96.50% 6.5px, 97.05% 10.1px, 97.55% 9.8px, 98.05% 10.5px, 98.55% 10.1px, 99.10% 6.5px, 99.47% 3.0px, 100% 2px, calc(100% - 0px) calc(0% + 0px), calc(100% - 1px) 12%, calc(100% - 1px) 26%, calc(100% - 1px) 40%, calc(100% - 1px) 55%, calc(100% - 2px) 70%, calc(100% - 2px) 85%, calc(100% - 1px) calc(100% - 1px), 94% calc(100% - 1px), 87% calc(100% - 1px), 78% calc(100% - 3px), 69% calc(100% - 2px), 60% calc(100% - 0px), 51% calc(100% - 2px), 42% calc(100% - 3px), 33% calc(100% - 1px), 24% calc(100% - 1px), 15% calc(100% - 2px), 7% calc(100% - 0px), calc(0% + 2px) calc(100% - 2px), calc(0% + 0px) 85%, calc(0% + 2px) 70%, calc(0% + 0px) 55%, calc(0% + 2px) 40%, calc(0% + 2px) 26%, calc(0% + 2px) 12%); }
.foglio--destra { transform: rotate(.9deg); }
.foglio--modulo { max-width: 600px; }   /* fogli con un modulo (contatto, accesso al quaderno) */

.foglio h2, .foglio h3 { font-family: var(--mano); font-weight: 400; color: var(--inchiostro); }
.foglio h2 { margin: 0 0 var(--riga); font-size: clamp(2.2rem, 5vw, 3rem); line-height: calc(var(--riga) * 2); text-align: center; }
.foglio h3 { margin: var(--riga) 0 0; font-size: 1.7rem; line-height: var(--riga); }
.foglio h3::before {
  /* freccia rossa disegnata a mano al posto del puntino */
  content: ""; display: inline-block; width: 1.9rem; height: 1.4rem; margin-right: .6rem; vertical-align: -.2rem;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22' fill='none' stroke='%23c8161d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12 Q13 8.5 26 11 M18 4 Q23 8 26.5 11 Q22.5 14.5 17 19'/%3E%3C/svg%3E") center / contain no-repeat;
}
.foglio p { margin: 0 0 var(--riga); }
.foglio p:last-child { margin-bottom: 0; }
.foglio p:has(+ ul, + ol, + .impronta) { margin-bottom: 0; } /* la frase che introduce un elenco o un'impronta gli sta attaccata */
.foglio ul, .foglio ol { margin: 0 0 var(--riga); }
.foglio ul { padding-left: 1.2rem; }
.foglio li { margin: 0; }
/* elenco con un pezzetto di nastro del colore dell'area al posto del puntino (--c viene da .cat-*) */
.foglio .elenco-nastri { list-style: none; padding-left: 0; }
.foglio .elenco-nastri li { position: relative; padding-left: 1.9rem; }
.foglio .elenco-nastri li::before {
  content: ""; position: absolute; left: 0; top: calc((var(--riga) - 10px) / 2); width: 24px; height: 10px;
  background: var(--nastro-luce), var(--c); opacity: .9; clip-path: var(--nastro-forma); transform: rotate(-4deg);
}
.foglio a { color: var(--rosso-scuro); text-underline-offset: 3px; }
.foglio a:hover { color: var(--rosso); }
.foglio > .esito { margin: 0 0 var(--riga); }
.logo-progetto { width: calc(var(--riga) * 3); height: calc(var(--riga) * 3); margin: 0 auto var(--riga); }
.schizzo-progetto { display: block; width: 100%; height: calc(var(--riga) * 8); margin: 0 auto var(--riga); object-fit: contain; }

/* fogli con tabelle, figure e grafici (quaderno, novità): niente righe, altrimenti non combaciano */
.foglio.senza-righe { --righe: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); line-height: 1.6; }
.foglio.senza-righe p { margin-bottom: 1rem; }
.foglio.senza-righe h2 { line-height: 1.1; margin-bottom: 1rem; }

.foglio table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.foglio th, .foglio td { padding: .45rem .5rem; text-align: left; border-bottom: 1px solid var(--carta-ombra); }
.foglio thead th { font-size: .8rem; color: var(--inchiostro-tenue); }
.foglio td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* testi secondari dentro un foglio: date delle versioni e note */
.versione { color: var(--inchiostro-tenue); font-size: .95rem; }
.nota { font-size: .9rem; color: var(--inchiostro-tenue); }

/* ---------- "In corso": una striscia di nastro adesivo giallo attaccata al legno, con i capi strappati ---------- */

.memo {
  --nastro-giallo: rgba(248, 216, 74, .86);
  --strappo: polygon(1.2% 0, 99.8% 0, 98.7% 7%, 99.6% 16%, 98.5% 26%, 99.8% 35%, 98.9% 44%, 100% 53%, 98.4% 62%, 99.7% 72%, 98.6% 81%, 99.9% 91%, 99% 100%, 0.2% 100%, 1.3% 92%, 0.5% 83%, 1.5% 73%, 0.3% 64%, 1.1% 55%, 0 46%, 1.6% 36%, 0.4% 27%, 1.4% 17%, 0.2% 9%);
  /* il nastro è sottile: ombra appena accennata, solo sotto i bordi */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)) drop-shadow(0 3px 4px rgba(0, 0, 0, .22));
  width: min(640px, calc(100% - 2rem)); margin: 0 auto clamp(2.2rem, 5vw, 2.8rem);
  padding: 12px 30px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.2rem; align-items: center;
  transform: rotate(-1.4deg);
  color: #1d1a17;
}
.memo::before {
  clip-path: var(--strappo);
  background:
    /* bordi lunghi dritti: un filo di luce sopra, un filo d'ombra sotto */
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) calc(100% - 3px), rgba(110, 80, 0, .28) 100%),
    /* riflessi della plastica e due pieghe leggere */
    linear-gradient(97deg, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, .30) 22%, rgba(255, 255, 255, 0) 29%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .20) 69%, rgba(255, 255, 255, 0) 75%),
    linear-gradient(84deg, rgba(0, 0, 0, 0) 40.5%, rgba(110, 80, 0, .14) 41.5%, rgba(255, 255, 255, .18) 42.5%, rgba(0, 0, 0, 0) 43.5%),
    linear-gradient(95deg, rgba(0, 0, 0, 0) 82%, rgba(110, 80, 0, .10) 83%, rgba(255, 255, 255, .14) 84%, rgba(0, 0, 0, 0) 85%),
    /* trama fine della carta del nastro */
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 90, 0, .05) 0 1px, rgba(0, 0, 0, 0) 1px 5px),
    linear-gradient(var(--nastro-giallo), var(--nastro-giallo));
}
.memo h2 {
  margin: 0; transform: rotate(-2deg);
  font: 400 2.1rem/1 var(--mano); color: #1d1a17;
}
.memo ul { grid-column: 2; margin: 0; padding-left: 1.1rem; font: 400 1.4rem/1.2 var(--mano); color: #1d1a17; }
.memo li { margin: .1rem 0; }
@media (max-width: 560px) {
  .memo { grid-template-columns: 1fr; padding: 12px 26px; text-align: center; }
  .memo ul { grid-column: 1; padding-left: 0; list-style-position: inside; }
}

/* ---------- Muro di tessere: foto attaccate con il nastro ---------- */

.muro {
  /* una sola griglia per tutte le pagine: tessere sempre della stessa misura, centrate qualunque sia il loro numero;
     larga quanto un foglio, quindi due tessere per riga e mai sopra gli oggetti della scrivania */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 1.6rem;
  max-width: var(--larghezza-foglio); margin: var(--stacco) auto 0; padding: 0; list-style: none;
}
.muro > .foto { flex: 0 1 356px; }
@media (max-width: 719.98px) { .muro > .foto { flex-basis: 100%; max-width: 460px; } }

.foto { position: relative; }
.foto:nth-child(3n+1) { transform: rotate(-1.2deg); }
.foto:nth-child(3n+2) { transform: rotate(.8deg); }
.foto:nth-child(3n)   { transform: rotate(-.4deg); }
.foto::before {
  content: ""; position: absolute; top: -10px; left: 50%; z-index: 3;
  width: 56px; height: 20px; margin-left: -28px;
  background: var(--nastro);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 0, 100% 0, 97% 12%, 100% 25%, 97% 40%, 100% 60%, 96% 80%, 100% 100%, 6% 100%, 3% 92%, 0 100%, 2% 70%, 0 50%, 2% 25%);
}
.foto:nth-child(even)::before { transform: rotate(2.5deg); }

.tessera {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 660 / 428;
  border-radius: 6px;
  border-top: 4px solid var(--c, var(--rosso));
  background: var(--carta);
  color: #fff; text-decoration: none;
  box-shadow: var(--ombra-tessera);
}
.tessera img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tessera--logo img { object-fit: contain; padding: 22px 22px 58px; }
.tessera:hover img, .tessera:focus-visible img { transform: scale(1.05); }

.didascalia {
  position: absolute; inset: auto 0 0 0;
  padding: 2rem .9rem .75rem;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 8, .92) 70%);
  display: flex; flex-direction: column; gap: .15rem;
  transform: translateY(101%); transition: transform .35s ease;
}
.tessera:hover .didascalia, .tessera:focus-visible .didascalia, .tessera:focus-within .didascalia { transform: none; }
.didascalia .etichetta {
  align-self: flex-start; margin-bottom: .2rem;
  padding: .1rem .45rem; border-radius: 3px;
  background: var(--c, var(--rosso)); color: var(--su-cat);
  font: 500 .68rem/1.65 var(--testo); letter-spacing: .14em; text-transform: uppercase;
}
.didascalia strong { font: 500 1rem/1.25 var(--testo); }
.didascalia small { font: 500 .82rem/1.35 var(--testo); color: #d8d1c6; }

/* su schermi senza mouse la didascalia resta sempre visibile */
@media (hover: none) {
  .didascalia { transform: none; padding-top: 1.6rem; }
  .didascalia small { display: none; }
}

/* ---------- Pagina Lavori: un foglio con un disegno per ogni area ---------- */

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

.lavori {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2.6rem 2.2rem;
  margin: .6rem 0 0; padding: 0; list-style: none;
}
.lavori > li { width: 260px; }
.lavori > li:nth-child(odd)  { transform: rotate(-1.6deg); }
.lavori > li:nth-child(even) { transform: rotate(1.3deg); }
.lavori > li:nth-child(3)    { transform: rotate(-.6deg); }
.lavori a { display: block; color: inherit; text-decoration: none; }
.lavori a:focus-visible { outline: 2px solid var(--rosso-vivo); outline-offset: 8px; border-radius: 6px; }
.lavori .carta { padding: 26px 22px 20px; text-align: center; transition: transform .25s ease; }
.lavori a:hover .carta, .lavori a:focus-visible .carta { transform: translateY(-4px) rotate(.8deg); }
.lavori h2 { margin: 0; font: 400 2.3rem/1 var(--mano); color: var(--inchiostro); }
.lavori h2::after {
  content: ""; display: block; width: 54px; height: 3px; margin: .35rem auto 0;
  background: var(--c); border-radius: 2px; transform: rotate(-1.5deg);
}
.lavori p { margin: .6rem 0 0; font-size: .88rem; color: var(--inchiostro-tenue); }

.dis { display: block; width: 100%; height: auto; margin: 0 auto 8px; }
.dis .t  { fill: none; stroke: var(--inchiostro); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dis .t2 { fill: none; stroke: var(--inchiostro); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.dis .r  { fill: color-mix(in srgb, var(--c) 45%, transparent); stroke: none; }
.dis .g  { fill: #8d8d8d55; stroke: none; }
.dis .v  { fill: none; stroke: color-mix(in srgb, var(--cat-elettronica) 80%, var(--inchiostro)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* illustrazione della pagina 404 (mucca che rumina guardando passare un treno): stesso disegno a mano dei lavori */
.foglio--disegno { container-type: inline-size; }
/* altezza: 12 righe, o meno se il foglio è stretto (sempre un multiplo della riga; il disegno ha rapporto 325 / 160) */
.dis--mucca { width: auto; max-width: 100%; height: calc(var(--riga) * 12); margin-bottom: var(--riga); }
@supports (height: round(down, 1px, 1px)) {
  .dis--mucca { height: min(calc(var(--riga) * 12), round(up, calc(100cqw * 160 / 325), var(--riga))); }
}
.dis--mucca .t  { stroke-width: 1.05; }
.dis--mucca .t2 { stroke-width: .5; }
/* il treno arriva da destra lungo i binari e si ferma poco prima della mucca (solo se non si è chiesto di ridurre i movimenti) */
.dis--mucca .treno { transform: translate(-14px, -4px); } /* posizione di arrivo: un po' più avanti sui binari */
@keyframes treno-arriva { from { transform: translate(204px, 55px); } }
/* al quarto secondo, quando il treno è quasi arrivato, la mucca spalanca l'occhio */
.dis--mucca .occhio-spalancato { opacity: 0; transform-box: fill-box; transform-origin: center; }
.dis--mucca .occhio { fill: #fffaf0; stroke: var(--inchiostro); stroke-width: 1; }
.dis--mucca .pupilla { fill: var(--inchiostro); stroke: none; }
@keyframes occhio-spalanca { 0% { opacity: 0; transform: scale(.5); } 45% { opacity: 1; transform: scale(1.7); } 100% { opacity: 1; transform: scale(1.35); } }
@media (prefers-reduced-motion: no-preference) {
  .dis--mucca .treno { animation: treno-arriva 5s cubic-bezier(.2, .6, .3, 1) both; }
  .dis--mucca .occhio-spalancato { animation: occhio-spalanca .45s ease-out 4s both; }
}
/* scritta centrata in fondo al foglio, in due righe di altezza (pagina 404) */
.foglio .scritta-404 { margin: 0; text-align: center; font: 400 2rem/calc(var(--riga) * 2) var(--mano); color: var(--inchiostro); }

.timbro {
  position: absolute; right: 4px; top: 6px; transform: rotate(-9deg);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 12px 5px; border: 3px solid #a30f16; border-radius: 7px;
  color: #a30f16; background: rgba(179, 18, 26, .04);
  font: 700 .78rem/1.1 var(--testo); letter-spacing: .16em; text-transform: uppercase;
  filter: url(#inchiostro); mix-blend-mode: multiply; opacity: .95;
  box-shadow: inset 0 0 0 1px rgba(163, 15, 22, .6);
  pointer-events: none;
}
.timbro span:last-child { font-size: .86rem; }

/* ---------- Pulsanti ---------- */

/* fila di pulsanti: dentro un foglio segue le righe da 28px; fuori dai fogli è preceduta da .spazio */
.pulsanti { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 0; }
.foglio .pulsanti { margin: 0 0 var(--riga); row-gap: 0; }
.foglio .pulsanti .pulsante { height: 38px; margin-block: 9px; } /* ogni fila di pulsanti occupa 2 righe (56px), anche quando va a capo */
.foglio .pulsanti:last-child { margin-bottom: 0; }
/* pulsanti su due colonne: il secondo sta accanto al primo, il terzo sotto il primo e della stessa larghezza */
.foglio .pulsanti--colonne { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: .8rem; }
.foglio .pulsanti--colonne .pulsante { justify-content: center; }
.foglio .pulsanti--colonne .pulsante:nth-child(3) { grid-column: 1; }

.pulsante {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--rosso); color: var(--su-rosso);
  font: 500 .95rem/1 var(--testo); letter-spacing: .02em;
  box-shadow: var(--ombra-pulsante);
  text-decoration: none;
}
.pulsante:hover { background: #db1f26; color: var(--su-rosso); }
.pulsante:active { transform: translateY(2px); box-shadow: 0 2px 0 #7d0b0f; }
.pulsante:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: var(--ombra-pulsante), 0 0 0 5px var(--rosso); }
.foglio a.pulsante, .foglio a.pulsante:hover { color: var(--su-rosso); text-decoration: none; }
/* secondario: testo nero, bordo rosso (anche dentro i fogli, dove i link sono rossi) */
.pulsante.pulsante--chiaro, .foglio a.pulsante.pulsante--chiaro { background: transparent; color: var(--inchiostro); box-shadow: inset 0 0 0 2px var(--rosso-scuro); }
.pulsante.pulsante--chiaro:hover, .foglio a.pulsante.pulsante--chiaro:hover { background: rgba(200, 22, 29, .1); color: var(--inchiostro); }
.pulsante--piccolo { padding: .45rem 1rem; font-size: .85rem; }

/* ---------- Moduli (contatto, accesso al quaderno) ---------- */

.modulo { display: grid; gap: var(--riga); }   /* righe e spazi del modulo sono multipli di 28px */
.modulo label { display: grid; font: 500 .9rem/var(--riga) var(--testo); color: var(--inchiostro); }
.modulo input, .modulo textarea {
  width: 100%;
  border: 1px solid #c9bda4; border-radius: 6px;
  background: #fffbf1; color: var(--inchiostro);
  font: 500 1rem var(--testo);
  box-shadow: inset 0 1px 2px rgba(60, 40, 20, .12);
}
.modulo input { height: calc(var(--riga) * 2); padding: 0 .75rem; }
.modulo textarea { min-height: calc(var(--riga) * 6); padding: .6rem .75rem; resize: vertical; }
.modulo input:focus-visible, .modulo textarea:focus-visible { outline: 2px solid var(--rosso-scuro); outline-offset: 1px; }
.modulo .trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo .nota { margin: 0; }
.modulo .contatore-caratteri { margin: calc(var(--riga) * -1) 0 0; text-align: right; font-size: .85rem; color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums; }
.modulo .contatore-caratteri.quasi { color: var(--rosso-scuro); }

/* esito di un invio: avviso giallo; --ok verde quando è andato a buon fine */
.esito { margin: 0; padding: 0 .9rem; border-radius: 6px; background: #fff4d6; box-shadow: inset 0 0 0 1px #e0b445; color: var(--inchiostro); }
.modulo .esito { font-size: .95rem; }
.esito--ok { background: #e9f5e4; box-shadow: inset 0 0 0 1px #6cbf6a; }

/* ---------- Novità delle versioni (uguale per tutti i programmi) ---------- */
/* Due colonne: versione e data a sinistra, elenco delle novità a destra; una riga vuota tra una versione e l'altra */

.versioni-intestazione, .versioni-voce { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1.6rem; }
.versioni-intestazione { margin: 0 0 var(--riga); font: 400 1.7rem/var(--riga) var(--mano); color: var(--inchiostro); }
.versioni-voce { margin-bottom: var(--riga); }
.versioni-voce:last-child { margin-bottom: 0; }
.foglio .versioni-numero h2 { margin: 0; font-size: 1.7rem; line-height: var(--riga); text-align: left; }
.foglio .versioni-novita { margin: 0; padding-left: 1.1rem; }
/* su telefono: versione sopra, novità sotto */
@media (max-width: 560px) {
  .versioni-intestazione { display: none; }
  .versioni-voce { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Programmi: impronte dei file e istruzioni (Ductus, Gestione Cassa) ---------- */

.foglio .impronta { margin: 0; font: 500 .8rem/var(--riga) var(--testo); font-variant-numeric: tabular-nums; word-break: break-all; color: var(--inchiostro-tenue); }
/* istruzioni (Gestione Cassa e manuale di Ductus): foglio a righe, ogni riga di testo, tabella e figura occupa un multiplo della riga */
.istruzioni .versione { margin: 0; }
.istruzioni kbd {
  /* in linea: il riquadro non allarga la riga di testo */
  display: inline; padding: 0 .35em; border: 1px solid var(--carta-ombra); border-bottom-width: 2px; border-radius: 4px;
  font: 500 .85em/1.5 var(--testo); background: rgba(255, 255, 255, .45);
}
.istruzioni .nota-manuale { padding: 0 1rem; border-left: 4px solid var(--rosso); background: rgba(200, 22, 29, .07); }
.istruzioni .scorri { overflow-x: auto; margin: 0 0 var(--riga); }
.istruzioni tr.gruppo td { font: 400 1.35rem/var(--riga) var(--mano); color: var(--rosso); }
.istruzioni figure { container-type: inline-size; margin: 0 0 var(--riga); }
.istruzioni figure img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
/* altezza di ogni immagine = larghezza del foglio x rapporto (altezza / larghezza); lo spazio sotto la porta a un multiplo della riga */
.istruzioni .figura-editor { margin-bottom: calc(round(up, 100cqw * 629 / 1515, var(--riga)) - 100cqw * 629 / 1515); }
.istruzioni figcaption { font-size: .88rem; color: var(--inchiostro-tenue); text-align: center; }
.istruzioni th, .istruzioni td { padding: 0 .5rem; border: 0; vertical-align: top; line-height: var(--riga); }
/* intestazioni delle colonne come quelle di Novità ("Versione", "Novità") */
.istruzioni th { font: 400 1.7rem/var(--riga) var(--mano); color: var(--inchiostro); }
.istruzioni td:nth-child(2) { text-align: left; white-space: normal; }
.istruzioni td.tasto { white-space: nowrap; }
/* su telefono ogni riga delle tabelle diventa un blocco (nome e tasto su una riga, la spiegazione sotto) */
@media (max-width: 560px) {
  .istruzioni .scorri { overflow-x: visible; }
  .istruzioni .scorri table, .istruzioni .scorri tbody { display: block; width: 100%; }
  .istruzioni .scorri tr:first-child { display: none; }
  .istruzioni .scorri tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; }
  .istruzioni .scorri tr.gruppo td { grid-column: 1 / -1; }
  .istruzioni .scorri td { display: block; padding: 0; }
  .istruzioni .scorri td.tasto { justify-self: end; }
  .istruzioni .scorri td:last-child:not(:first-child) { grid-column: 1 / -1; }
}

/* ---------- Visualizzatore delle foto (Siti web) ---------- */

.visore {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center;
  background: rgba(20, 18, 17, .96);
  padding: 20px 16px 14px;
  animation: visore-entra .25s ease-out both;
}
.visore[hidden] { display: none; }
@keyframes visore-entra { from { opacity: 0; } to { opacity: 1; } }

.visore .scena {
  position: relative; display: grid; place-items: center;
  width: 100%; min-height: 0; padding: 0 72px;
}
.visore figure {
  position: relative; margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  background: var(--carta); color: var(--inchiostro);
  padding: 14px 14px 12px; border-radius: 3px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .6);
  transform: rotate(-.6deg);
}
.visore figure::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 108px; height: 28px;
  margin-left: -54px; transform: rotate(-2deg);
  background: rgba(240, 220, 120, .42); border-left: 1px dashed rgba(0, 0, 0, .12); border-right: 1px dashed rgba(0, 0, 0, .12);
}
.visore figure.da-destra { animation: visore-da-destra .32s ease-out both; }
.visore figure.da-sinistra { animation: visore-da-sinistra .32s ease-out both; }
@keyframes visore-da-destra { from { opacity: 0; transform: translateX(46px) rotate(2deg); } to { opacity: 1; transform: rotate(-.6deg); } }
@keyframes visore-da-sinistra { from { opacity: 0; transform: translateX(-46px) rotate(-3deg); } to { opacity: 1; transform: rotate(-.6deg); } }

.visore img {
  display: block; width: auto; height: auto;
  max-width: min(100%, 1100px); max-height: calc(100svh - 270px);
  object-fit: contain; background: #d9d2c4;
}
.visore figcaption { text-align: center; padding: .6rem 1rem 0; max-width: 62ch; }
.visore figcaption strong { display: block; font: 400 1.9rem/1.05 var(--mano); color: var(--inchiostro); }
.visore figcaption span { display: block; margin-top: .2rem; font-size: .92rem; line-height: 1.4; color: var(--inchiostro-tenue); }
.visore figcaption span:empty { display: none; }

.visore button {
  display: grid; place-items: center; cursor: pointer; color: var(--carta);
  background: none; border: 0; padding: 0;
}
.visore button svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.visore button:hover { color: #fff; }
.visore button:focus-visible { color: #fff; outline: 2px dashed var(--carta); outline-offset: 4px; border-radius: 6px; }
.visore .prec, .visore .succ {
  position: absolute; top: 50%; width: 52px; height: 74px; margin-top: -37px; transition: transform .2s ease, color .2s;
}
.visore .prec { left: 6px; }
.visore .succ { right: 6px; }
.visore .prec:hover { transform: translateX(-4px); }
.visore .succ:hover { transform: translateX(4px); }
.visore .chiudi { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; z-index: 2; }

.visore .barra { display: grid; justify-items: center; gap: 8px; padding-top: 14px; max-width: 100%; }
.visore .contatore { margin: 0; font: 400 1.3rem/1 var(--mano); color: var(--carta); opacity: .8; }
.visore .miniature { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 6px; scrollbar-width: thin; }
.visore .miniature button {
  flex: 0 0 auto; width: 64px; height: 46px; padding: 3px; background: var(--carta);
  opacity: .5; transform: rotate(-1.5deg); transition: opacity .2s, transform .2s;
}
.visore .miniature button:nth-child(even) { transform: rotate(1.2deg); }
.visore .miniature button img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.visore .miniature button:hover { opacity: .85; }
.visore .miniature button[aria-current="true"] { opacity: 1; transform: translateY(-4px) rotate(0); box-shadow: 0 0 0 2px var(--rosso); }

@media (max-width: 600px) {
  .visore { padding: 12px 8px 10px; }
  .visore .scena { padding: 0 4px; }
  .visore img { max-height: calc(100svh - 300px); }
  .visore figcaption strong { font-size: 1.6rem; }
  .visore .prec, .visore .succ { top: auto; bottom: -4px; margin: 0; width: 44px; height: 56px; z-index: 2; }
  .visore .prec { left: 4px; }
  .visore .succ { right: 4px; }
  .visore .chiudi { top: 6px; right: 8px; }
  .visore .miniature button { width: 52px; height: 38px; }
}

/* ---------- Quaderno delle visite (pagina riservata) ---------- */

.quaderno .foglio h2 { font-size: clamp(2rem, 4vw, 2.6rem); }

.numeri { display: grid; gap: 1.2rem; }
.numero-grande { margin: .4rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.numero-grande strong { font: 700 clamp(3rem, 9vw, 4.2rem)/1 var(--testo); color: var(--inchiostro); }
.numero-grande span { color: var(--inchiostro-tenue); }
.numeri dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--carta-ombra); }
.numeri dt { font-size: .85rem; color: var(--inchiostro-tenue); }
.numeri dd { margin: 0; font: 700 1.35rem/1.3 var(--testo); color: var(--inchiostro); }

.grafico { display: block; width: 100%; height: auto; margin: .4rem 0 .6rem; }
.grafico text { font: 500 12px var(--testo); fill: var(--inchiostro-tenue); }
.grafico .asse-y { text-anchor: end; }
.grafico .valore { fill: var(--inchiostro); text-anchor: middle; }
.grafico .vuoto { font-size: 15px; text-anchor: middle; }
.grafico .linea { stroke: #e2d8c5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico .base { stroke: #b6aa93; stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico .colonna { fill: var(--rosso); }
.grafico .presa { fill: transparent; }
.grafico .giorno:hover .colonna { fill: var(--rosso-scuro); }
.grafico .giorno:hover .presa { fill: rgba(43, 38, 34, .05); }
@media (max-width: 600px) {
  .grafico text { font-size: 22px; }
  .grafico .vuoto { font-size: 26px; }
}

.tabella-numeri summary { cursor: pointer; color: var(--rosso-scuro); }
.tabella-numeri table { margin-top: .8rem; }
.barre .barra { width: 45%; }
.barre .barra svg { display: block; width: 100%; height: 10px; }
.barre .barra rect { fill: var(--rosso); }
@media (max-width: 560px) { .barre .barra { width: 30%; } }
.foglio table.download td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.foglio table.download thead th + th { text-align: right; }
.download .file { display: block; font-size: .8rem; color: var(--inchiostro-tenue); }

.messaggio { padding: 1rem 0; border-top: 1px solid var(--carta-ombra); }
.messaggio-testa { margin: 0 0 .4rem; font-size: .9rem; color: var(--inchiostro-tenue); }
.messaggio-testa strong { color: var(--inchiostro); font-size: 1rem; }
.messaggio-testo { margin: 0 0 .7rem; white-space: normal; overflow-wrap: anywhere; }
.avviso-email, .stato-male { color: var(--rosso-scuro); }
.stato-male { font-weight: 700; }
.foglio table.server td { text-align: left; white-space: normal; }
.cancella { margin: 0; }

/* ---------- Piede (sopra gli oggetti della scrivania, così non ne coprono i link) ---------- */

.piede {
  position: relative; z-index: 2;
  margin-top: clamp(1rem, 4vw, 2.4rem);
  background: var(--barra);
  border-top: 3px solid var(--rosso);
  color: var(--chiaro-tenue); font-size: .88rem;
  padding: 1.6rem 0 2rem;
}
.piede .contenitore { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; align-items: center; }
.piede p { margin: 0; }
.motto-piede { font: 1.5rem/1 var(--mano); color: var(--chiaro); }
.piede ul { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.piede a { color: var(--chiaro-tenue); }
.piede a:hover { color: var(--chiaro); }

/* ---------- Scrivania: oggetti ai lati del foglio, solo con schermi larghi ---------- */
/* Misura fissa e distanza fissa dal centro della pagina, come su una scrivania vera: quando la finestra si stringe
   gli oggetti non si rimpiccioliscono, vengono coperti dai bordi. Stesse misure e posizioni su tutte le pagine.
   Sotto 880px sono già tutti fuori dalla vista. Stanno sotto il contenuto (main z-index 1, piede 2); quando arriva
   il piede salgono con la pagina e si fermano sopra di lui (--su, da js/sito.js), così il piede non li copre. */

.scrivania { display: none; }
@media (min-width: 880px) {
  .scrivania {
    display: block; position: fixed; inset: 0 0 -100vh; z-index: 0; pointer-events: none; overflow: hidden;
    transform: translateY(calc(var(--su, 0px) * -1));
  }
  .chiuso .scrivania, .aprendo .scrivania { display: none; }
  .oggetto { position: absolute; height: auto; filter: var(--ombra-oggetto); }
  /* quote e inclinazioni diverse, mai allineati; il foglio occupa 390px per lato dal centro */
  .cactus { width: 250px; left: calc(50% - 710px); top: 368px; transform: translateY(-50%) rotate(12deg); }
  .matita { width: auto; height: 410px; left: calc(50% - 590px); top: 523px; transform: rotate(18deg); }
  /* Solo all'apertura della home (una volta per visita, classe rivela da js/sito.js): la matita rotola per pochi pixel e si ferma; poi resta ferma */
  @media (prefers-reduced-motion: no-preference) {
    .rivela .matita { animation: matita-rotola 1.5s cubic-bezier(.3, .6, .4, 1) .25s backwards; }
  }
  @keyframes matita-rotola {
    from { transform: translateX(-9px) rotate(16deg); }
    60%  { transform: translateX(1.5px) rotate(18.4deg); }
    to   { transform: translateX(0) rotate(18deg); }
  }
  .tazza  { width: 280px; left: calc(50% + 500px); top: 798px; transform: translateY(-50%) rotate(-7deg); }
  /* la lumaca (the unhurried maker) esce da sotto il foglio lasciando la scia; stessa luce e ombra degli altri oggetti */
  .scrivania::before {
    content: ""; position: absolute; left: calc(50% + 300px); top: 527px; width: 340px; height: 213px;
    background: url("../immagini/scrivania/lumaca-sfumata.webp") center / contain no-repeat;
    filter: brightness(.84) saturate(.82) contrast(1.06) sepia(.12) var(--ombra-oggetto);
    animation: lumaca-avanza 75s ease-in-out forwards;
  }
  /* avanza di una quindicina di pixel verso la testa (alto a destra) e si ferma lì; riparte da capo a ogni pagina, senza scatti di ritorno */
  @keyframes lumaca-avanza { to { transform: translate(14px, -8px); } }
  /* vapore del caffè: due fili dello stesso disegno che salgono piano, sfasati di mezzo ciclo.
     Si anima solo transform/opacity: il disegno (con filtro e sfocatura) non va ridisegnato a ogni fotogramma. */
  .vapore {
    position: absolute; left: calc(50% + 519px); top: 595px; width: 200px; height: 280px;
    /* sfuma in basso (dove esce dal caffè) e in alto (dove svanisce) */
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 25%, #000 65%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0, #000 25%, #000 65%, transparent 100%);
  }
  .vapore::before, .vapore::after {
    content: ""; position: absolute; inset: 0;
    background: url("../immagini/scrivania/vapore-filo.svg") center bottom / 200px 280px no-repeat;
    transform-origin: 50% 100%;
    opacity: 0;
    will-change: transform, opacity;
    animation: vapore-sale 10s ease-in-out infinite;
  }
  .vapore::after { animation-name: vapore-sale-specchio; animation-delay: -5s; }
  /* ferma mentre si scorre (classe messa da js/sito.js), riprende dopo 2 secondi fermi */
  .scorre .vapore::before, .scorre .vapore::after, .scorre .scrivania::before { animation-play-state: paused; }
}
@keyframes vapore-sale {
  0%   { transform: translate(0, 70px) scale(.85, .8) skewX(0); opacity: 0; }
  20%  { opacity: 1; }
  45%  { transform: translate(10px, 10px) scale(1, 1) skewX(-6deg); }
  70%  { transform: translate(-8px, -40px) scale(1.08, 1.1) skewX(5deg); opacity: .8; }
  100% { transform: translate(6px, -85px) scale(1.2, 1.25) skewX(-3deg); opacity: 0; }
}
@keyframes vapore-sale-specchio {
  0%   { transform: translate(6px, 70px) scale(-.85, .8) skewX(0); opacity: 0; }
  20%  { opacity: .9; }
  45%  { transform: translate(-8px, 10px) scale(-1, 1) skewX(6deg); }
  70%  { transform: translate(10px, -40px) scale(-1.08, 1.1) skewX(-5deg); opacity: .7; }
  100% { transform: translate(-4px, -85px) scale(-1.2, 1.25) skewX(3deg); opacity: 0; }
}

/* ---------- Chi preferisce meno movimento: nessuna animazione né transizione, niente vapore ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vapore { display: none; }
}