/* =====================================================================
   NEXT PAGE — stile "carta di giornale"
   ===================================================================== */

:root {
  /* Palette ricavata da logo e locandina */
  --carta: #FAF6EC;
  --carta-scura: #F1EAD8;
  --inchiostro: #1E1E24;
  --navy: #1C2A5E;
  --magenta: #C8164F;
  --giallo: #F7B500;
  --arancio: #F28C1B;
  --azzurro: #2E7FD1;
  --filetto: #2A2A33;
  --grigio: #5D5A55;

  --f-testata: "Playfair Display", "Times New Roman", Georgia, serif;
  --f-testo: "Source Serif 4", "Libre Baskerville", Georgia, serif;
  --f-mano: "Kaushan Script", "Brush Script MT", cursive;

  --scrivania: #232B45;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  background:
    radial-gradient(120% 80% at 50% 0%, #34406a 0%, transparent 60%),
    var(--scrivania);
  color: var(--inchiostro);
  font-family: var(--f-testo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

svg.ico { width: 1em; height: 1em; flex: none; }

/* ---------- Struttura schermo: palco (giornale) + barra ---------- */
body {
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  overscroll-behavior: none;
}

.palco {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.libro { position: relative; transition: transform .6s ease; }
.libro__blocco { width: 100%; height: 100%; }
.libro .stf__wrapper { height: 100%; }
/* touch-action: none = tutti i gesti sul giornale vanno alla libreria.
   Con "pan-y" (default di StPageFlip) il browser si prendeva il gesto se il dito
   si muoveva subito, e la pagina non si piegava più sotto il dito. */
.libro, .libro .stf__parent { touch-action: none; user-select: none; -webkit-user-select: none; }
/* StPageFlip ignora i tocchi solo se il bersaglio è proprio <a>/<button>:
   così il tocco sul testo interno di un link non fa partire la piega */
.libro a * { pointer-events: none; }

/* ---------- Barra di navigazione ---------- */
.barra {
  padding: 0 6px env(safe-area-inset-bottom);
  background: var(--navy);
  color: var(--carta);
  font-family: var(--f-testo);
  border-top: 3px solid var(--giallo);
}
.barra__dentro {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  max-width: 560px;
  margin: 0 auto;
}
.barra__contatore {
  flex: 1;
  text-align: center;
  font-size: 15px;
  letter-spacing: .04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.barra__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: inherit;
  font: 600 14px/1 var(--f-testo);
  letter-spacing: .05em;
  cursor: pointer;
}
.barra__btn .ico { font-size: 22px; }
.barra__btn:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.barra__btn:focus-visible { outline: 2px solid var(--giallo); outline-offset: 2px; }
.barra__btn:disabled { opacity: .3; cursor: default; }
.barra__btn[aria-pressed="true"] { color: var(--giallo); }
/* su schermi stretti "Sommario" resta solo per i lettori di schermo */
@media (max-width: 400px) {
  .barra__btn--testo span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Riserva: se StPageFlip non si carica, pagine una sotto l'altra */
body.senza-sfoglio { height: auto; overflow: auto; display: block; }
body.senza-sfoglio .barra { display: none; }
body.senza-sfoglio .libro { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0; }
body.senza-sfoglio .pagina { width: min(100vw, 460px); aspect-ratio: 360 / 640; }

/* ---------- La pagina ---------- */
.pagina {
  position: relative;
  overflow: hidden;
  background-color: var(--carta);
  /* texture carta: rumore SVG leggerissimo + leggera vignettatura */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(150, 120, 60, .13) 100%);
  container-type: size;
  container-name: pagina;
}

/* ombra della piega (lato rilegatura): a sinistra per le pagine di destra e viceversa */
.pagina::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.12) 0%, transparent 6%, transparent 97%, rgba(0,0,0,.05) 100%);
}
.pagina.--left::after {
  background: linear-gradient(270deg, rgba(0,0,0,.14) 0%, transparent 7%, transparent 97%, rgba(0,0,0,.05) 100%);
}

/* Unità di misura della pagina: tutto dentro è in em,
   così l'impaginato scala con la pagina e non "sfora" mai. */
.pagina__corpo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.1em 1.15em 0.9em;
  font-size: calc(clamp(11px, min(4.4cqw, 2.4cqh), 20px) * var(--scala, 1));
  line-height: 1.38;
  overflow: hidden;
}

/* durante la misurazione (adattaTesti) le pagine sono impilate e invisibili */
.libro.in-misura .pagina { position: absolute; left: 0; top: 0; visibility: hidden; }

/* ---------- Testatina delle pagine interne ---------- */
.testatina {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5em;
  font-family: var(--f-testo);
  font-size: .68em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grigio);
  padding-bottom: .35em;
  border-bottom: 3px double var(--filetto);
  margin-bottom: .8em;
}
.testatina b {
  font-family: var(--f-testata);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--navy);
  font-size: 1.25em;
}

/* Piede di pagina (folio) */
.folio {
  margin-top: auto;
  padding-top: .4em;
  border-top: 1px solid var(--filetto);
  display: flex;
  justify-content: space-between;
  font-size: .62em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grigio);
}

/* ---------- Tipografia da quotidiano ---------- */
.occhiello {
  font-family: var(--f-testo);
  font-weight: 600;
  font-size: .72em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 0 0 .3em;
}

.titolo {
  font-family: var(--f-testata);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 .25em;
  font-size: 2.1em;
  text-wrap: balance;
}
.titolo--xl { font-size: 2.7em; }
.titolo--m  { font-size: 1.45em; }
.titolo--s  { font-size: 1.1em; line-height: 1.1; }

.sommario {
  font-family: var(--f-testo);
  font-style: italic;
  font-size: 1.02em;
  line-height: 1.3;
  color: #3a3a44;
  margin: 0 0 .5em;
  text-wrap: pretty;
}

.firma {
  font-size: .7em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grigio);
  margin: 0 0 .6em;
}

.testo p {
  margin: 0 0 .5em;
  font-size: .92em;
  line-height: 1.36;
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Capolettera */
.capolettera > p:first-child::first-letter {
  float: left;
  font-family: var(--f-testata);
  font-weight: 900;
  color: var(--magenta);
  font-size: 3.3em;
  line-height: .82;
  padding: .06em .08em 0 0;
}

/* Colonne con filetto verticale */
.colonne {
  column-count: 2;
  column-gap: 1.1em;
  column-rule: 1px solid rgba(42,42,51,.45);
}

.didascalia {
  font-size: .66em;
  font-style: italic;
  color: var(--grigio);
  line-height: 1.3;
  margin: .3em 0 0;
}

/* ---------- Filetti ---------- */
.filetto        { border: 0; border-top: 1px solid var(--filetto); margin: .5em 0; }
.filetto--doppio{ border: 0; border-top: 3px double var(--filetto); margin: .5em 0; }
.filetto--spesso{ border: 0; border-top: 3px solid var(--filetto); margin: .5em 0; }

/* ---------- Riquadri ---------- */
.riquadro {
  border: 1px solid var(--filetto);
  padding: .6em .7em;
  background: rgba(255,255,255,.35);
}
.riquadro--navy {
  background: var(--navy);
  color: var(--carta);
  border-color: var(--navy);
}

/* ---------- Scritte "a mano" ---------- */
.a-mano {
  font-family: var(--f-mano);
  color: var(--magenta);
  font-weight: 400;
  line-height: 1.1;
  position: relative;
  display: inline-block;
  transform: rotate(-3deg);
}
/* sottolineatura a pennello gialla */
.a-mano--sottolineato::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -.32em;
  height: .38em;
  background: var(--giallo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 12C80 6 190 4 296 7l-1 5C190 9 90 11 6 17Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 12C80 6 190 4 296 7l-1 5C190 9 90 11 6 17Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  z-index: -1;
}

/* ---------- Decori (pennellate, aeroplanino, lampadina) ---------- */
.decoro { position: absolute; pointer-events: none; }
.decoro svg { display: block; width: 100%; height: 100%; }
.c-magenta { color: var(--magenta); fill: var(--magenta); }
.c-giallo  { color: var(--giallo);  fill: var(--giallo); }
.c-arancio { color: var(--arancio); fill: var(--arancio); }
.c-azzurro { color: var(--azzurro); fill: var(--azzurro); }
.c-navy    { color: var(--navy);    fill: var(--navy); }

/* gruppo di 3 pennellate colorate, come negli angoli della locandina */
.pennellate { position: absolute; width: 45%; aspect-ratio: 300 / 110; pointer-events: none; }
.pennellate svg { position: absolute; left: 0; width: 100%; height: 55%; }
.pennellate svg:nth-child(1) { top: 0; }
.pennellate svg:nth-child(2) { top: 24%; }
.pennellate svg:nth-child(3) { top: 48%; }

/* ---------- Testi da scrivere (visibili solo con ?bozza) ---------- */
.segnaposto {
  padding: 0 .3em;
  border-radius: .2em;
  background: var(--magenta);
  color: #fff;
  font: 600 .62em/1.4 var(--f-testo);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: .15em;
}

/* =====================================================================
   COMPONENTI COMUNI
   ===================================================================== */

/* Etichetta di sezione con filetti ai lati:  ——— I NOSTRI INDIRIZZI ——— */
.etichetta {
  display: flex;
  align-items: center;
  gap: .7em;
  font: 600 .62em/1 var(--f-testo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: .6em 0 .55em;
}
.etichetta::before, .etichetta::after { content: ""; flex: 1; border-top: 1px solid var(--filetto); }

/* Bollo colorato con icona */
.bollo {
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  color: #fff;
  flex: none;
}
.bollo .ico { width: 1.1em; height: 1.1em; }
.bollo--magenta { background: var(--magenta); }
.bollo--azzurro { background: var(--azzurro); }
.bollo--arancio { background: var(--arancio); }
.bollo--navy    { background: var(--navy); }

/* =====================================================================
   1. PRIMA PAGINA
   ===================================================================== */
.prima { padding-top: .8em; }

.prima__testata { text-align: center; }
.prima__motto {
  margin: 0;
  padding-bottom: .4em;
  border-bottom: 3px solid var(--filetto);
  font-size: .6em;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--magenta);
}
.prima__nome {
  position: relative;
  display: inline-block;
  margin: .14em 0 0;
  font-family: var(--f-testata);
  font-weight: 900;
  font-size: 3.3em;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
  color: var(--navy);
}
.prima__list {
  position: absolute;
  right: -.05em;
  bottom: -.7em;
  font-family: var(--f-mano);
  font-weight: 400;
  font-size: .4em;
  letter-spacing: 0;
  color: var(--magenta);
  transform: rotate(-9deg);
}
.prima__sottotitolo {
  margin: .2em 0 0;
  font-style: italic;
  font-size: .86em;
  color: #3a3a44;
}
.prima__striscia {
  display: flex;
  justify-content: space-between;
  gap: .5em;
  margin: .45em 0 .65em;
  padding: .4em 0 .32em;
  border-top: 3px double var(--filetto);
  border-bottom: 1px solid var(--filetto);
  font-size: .6em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grigio);
}
.prima__titolo { font-size: 2.3em; margin-bottom: .2em; }
.prima__apertura .sommario { margin-bottom: .2em; }

/* Il logo occupa tutto lo spazio verticale che resta */
.prima__foto {
  flex: 1 1 0;
  min-height: 7em;
  margin: .3em 0 0;
  display: flex;
  flex-direction: column;
}
.prima__foto-box {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
.prima__foto-box img {
  position: relative;
  z-index: 1;
  width: min(100cqh, 66cqw);
  height: min(100cqh, 66cqw);
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 .2em .35em rgba(28, 42, 94, .25));
}
.prima__foto-box .pennellate {
  left: -6%;
  top: 50%;
  width: 112%;
  transform: translateY(-50%) rotate(-5deg);
  opacity: .9;
}
.prima__prezzo {
  position: absolute;
  z-index: 2;
  top: 2%;
  left: calc(50% + min(42cqh, 28cqw));
  display: grid;
  place-items: center;
  width: 5.4em;
  height: 5.4em;
  padding: .5em;
  border-radius: 50%;
  background: var(--giallo);
  color: var(--navy);
  font-family: var(--f-mano);
  font-size: .7em;
  line-height: 1.05;
  text-align: center;
  transform: rotate(12deg);
  box-shadow: 0 .15em .4em rgba(0,0,0,.2);
}
.prima__foto .didascalia { text-align: center; }

.prima__slogan {
  text-align: center;
  font-size: 1.45em;
  margin: .3em 0 .55em;
}

/* Richiami: "In questo numero" */
.richiami {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 3px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
}
.richiamo {
  all: unset;
  display: flex;
  flex-direction: column;
  gap: .2em;
  padding: .45em .5em .4em;
  border-left: 1px solid rgba(42, 42, 51, .4);
  cursor: pointer;
}
.richiamo:first-child { border-left: 0; padding-left: 0; }
.richiamo:last-child { padding-right: 0; }
.richiamo:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 2px; }
.richiamo__etichetta {
  font-size: .58em;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--magenta);
}
.richiamo__testo {
  font-family: var(--f-testata);
  font-weight: 700;
  font-size: .78em;
  line-height: 1.14;
  color: var(--navy);
}
.richiamo__pag { margin-top: auto; font-size: .62em; font-style: italic; color: var(--grigio); }

/* Hint "scorri per voltare pagina" + angolo che si solleva */
.hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35em;
  padding: .45em 3em 0 0;
  color: var(--magenta);
}
.hint__testo { font-size: .95em; }
.hint__freccia { width: 2.1em; height: .85em; animation: np-spingi 1.4s ease-in-out infinite; }
.solo-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .solo-touch { display: none; }
  .solo-mouse { display: inline; }
}
@keyframes np-spingi { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.4em); } }

.angolo-piega {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12%;
  aspect-ratio: 1;
  transform-origin: 100% 100%;
  filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, .18));
  animation: np-piega 2.6s ease-in-out infinite;
  pointer-events: none;
}
.angolo-piega::before, .angolo-piega::after { content: ""; position: absolute; inset: 0; }
/* sotto la piega si intravede la pagina successiva */
.angolo-piega::before {
  background: linear-gradient(315deg, #d9ccaa, #ebe1c6);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* il lembo ripiegato */
.angolo-piega::after {
  background: linear-gradient(135deg, #fffdf6 0%, #f1e8d0 55%, #d6c8a2 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
@keyframes np-piega {
  0%, 55%, 100% { transform: scale(1); }
  25% { transform: scale(1.45); }
}

/* =====================================================================
   2. LA SCUOLA
   ===================================================================== */
.indirizzi__griglia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5em .8em;
}
.indirizzi__griglia li {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: .74em;
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
}

.pagella {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7em;
  margin-top: .85em;
}
.pagella__col {
  position: relative;
  padding: .5em .6em .45em;
  border: 1px solid var(--filetto);
  background: rgba(255, 255, 255, .45);
}
.pagella__col--no { border-style: dashed; background: rgba(247, 181, 0, .13); }
.pagella__titolo {
  display: block;
  margin: 0 0 .35em;
  font-size: 1.02em;
  transform: rotate(-2deg);
  transform-origin: left;
}
.pagella__col--si .pagella__titolo { color: var(--azzurro); }
.pagella ul { list-style: none; margin: 0; padding: 0; }
.pagella li {
  display: flex;
  gap: .4em;
  margin-bottom: .3em;
  font-size: .76em;
  line-height: 1.22;
}
.pagella li .ico { margin-top: .12em; }
.pagella__col--si .ico { color: var(--azzurro); }
.pagella__col--no .ico { color: var(--magenta); }

/* =====================================================================
   3. LA LISTA
   ===================================================================== */
.definizione {
  margin: .25em 0 .75em;
  padding: .45em .1em .5em;
  border-top: 1px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
  font-size: .84em;
  line-height: 1.32;
}
.definizione p { margin: 0; }
.definizione__voce { font-family: var(--f-testata); font-size: 1.28em; color: var(--navy); }
.definizione__pron { color: var(--grigio); font-size: .92em; }
.definizione i { color: var(--magenta); }

.manifesto { margin-top: .3em; }
.manifesto__titolo {
  margin: 0 0 .65em;
  padding: .5em;
  background: var(--navy);
  border-bottom: 3px solid var(--giallo);
  color: var(--carta);
  font: 600 .66em/1 var(--f-testo);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
}
.manifesto__griglia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65em .9em;
}
.manifesto__griglia li {
  display: flex;
  align-items: flex-start;
  gap: .4em;
  font-size: .8em;
  line-height: 1.24;
}
.manifesto__num {
  font-family: var(--f-testata);
  font-weight: 900;
  font-size: 2em;
  line-height: .82;
}
.manifesto__griglia b {
  display: block;
  margin-bottom: .1em;
  font-family: var(--f-testata);
  font-size: 1.1em;
  color: var(--navy);
}
.lista__slogan { text-align: center; font-size: 1.5em; margin: .8em 0 .4em; }

/* =====================================================================
   4. IL PROGRAMMA
   ===================================================================== */
.aree { display: flex; flex-direction: column; gap: 1.3em; margin-top: .6em; }
.area--magenta { --colore: var(--magenta); }
.area--azzurro { --colore: var(--azzurro); }
.area--arancio { --colore: var(--arancio); }
.area--navy    { --colore: var(--navy); }
.area__testa {
  display: flex;
  align-items: center;
  gap: .5em;
  padding-bottom: .3em;
  margin-bottom: .4em;
  border-bottom: 2px solid var(--colore);
}
.area__testa .bollo { width: 1.7em; height: 1.7em; }
.area__testa h3 {
  margin: 0;
  font-family: var(--f-testata);
  font-weight: 900;
  font-size: 1.12em;
  color: var(--navy);
}
.area__proposte { display: grid; grid-template-columns: 1fr 1fr; gap: .6em .8em; }
.proposta:nth-child(even) { border-left: 1px solid rgba(42, 42, 51, .35); padding-left: .8em; }
.proposta h4 {
  margin: 0 0 .15em;
  font-family: var(--f-testo);
  font-weight: 600;
  font-size: .96em;
  line-height: 1.2;
  color: var(--navy);
}
.proposta p { margin: 0; font-size: .9em; line-height: 1.32; }

/* =====================================================================
   5+. CANDIDATI
   ===================================================================== */
.cand__foto--magenta, .cand__proposte--magenta { --colore: var(--magenta); }
.cand__foto--azzurro, .cand__proposte--azzurro { --colore: var(--azzurro); }
.cand__foto--arancio, .cand__proposte--arancio { --colore: var(--arancio); }
.cand__foto--navy,    .cand__proposte--navy    { --colore: var(--navy); }

.cand__nome { font-size: 2.2em; margin-bottom: .08em; }
.cand__meta {
  margin: 0 0 .65em;
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grigio);
}

/* Foto: base 15em, cresce se la presentazione è corta.
   .pagina--stringi (decisa in espandiFlussi): la foto si restringe fino a 12em
   se così tutto il candidato sta in una pagina sola. */
.cand__foto {
  flex: 1 0 15em;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 0 .55em;
}
.pagina--stringi .cand__foto { flex-shrink: 1; min-height: 12em; }
/* la cornice ritaglia (overflow hidden): la foto dentro può essere spostata e ingrandita */
.cand__cornice {
  flex: 1 1 0;
  min-height: 0;
  width: calc(100% - .4em);
  overflow: hidden;
  border: 1px solid var(--filetto);
  box-shadow: .4em .4em 0 var(--colore);
  background: var(--carta-scura);
}
.cand__cornice img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cand__sagoma {
  display: grid;
  place-items: center;
  color: var(--navy);
  background:
    repeating-linear-gradient(135deg, transparent 0 .6em, rgba(28, 42, 94, .05) .6em 1.2em),
    var(--carta-scura);
}
.cand__sagoma .ico { width: 35%; height: auto; aspect-ratio: 1; opacity: .35; }
.cand__foto .didascalia { margin-top: .75em; }

.cand__citazione {
  margin: 0 0 .55em;
  padding: .4em .2em .45em;
  border-top: 3px double var(--filetto);
  border-bottom: 1px solid var(--filetto);
  text-align: center;
  font-size: 1.22em;
  line-height: 1.15;
}
.cand__citazione .a-mano { transform: rotate(-1.5deg); }
.cand__citazione .a-mano::before { content: "“"; }
.cand__citazione .a-mano::after  { content: "”"; }

.cand__rubrica {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 .45em;
  font-size: .62em;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--magenta);
}
.cand__rubrica::after { content: ""; flex: 1; border-top: 1px solid var(--filetto); }

.cand__testo p { margin-bottom: .45em; }
.cand__testo p.continua { text-indent: 0; }

.cand__continua,
.cand__segue-testa span {
  font-style: italic;
  font-size: .72em;
  color: var(--magenta);
}
.cand__continua { margin: .1em 0 0; text-align: right; }

.cand__segue-testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6em;
  margin: 0 0 .7em;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--filetto);
}
.cand__segue-testa b {
  font-family: var(--f-testata);
  font-size: 1.2em;
  color: var(--navy);
}

.cand__proposte {
  margin: .5em 0 .3em;
  padding: .55em .7em .45em;
  border: 1px solid var(--filetto);
  border-top: 4px solid var(--colore);
  background: rgba(255, 255, 255, .5);
}
.cand__proposte-titolo {
  margin: 0 0 .45em;
  font-family: var(--f-testata);
  font-weight: 900;
  font-size: 1.05em;
  color: var(--navy);
}
.cand__proposte ol { list-style: none; margin: 0; padding: 0; }
.cand__proposte li {
  display: flex;
  align-items: flex-start;
  gap: .5em;
  margin-bottom: .4em;
  font-size: .86em;
  line-height: 1.25;
}
.cand__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--colore);
  color: #fff;
  font-family: var(--f-testata);
  font-weight: 900;
  font-size: .9em;
}

/* spazio libero in fondo all'ultima pagina: decoro solo se c'è abbastanza posto */
.cand__chiusura {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}
.cand__chiusura-dentro {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  text-align: center;
}
.cand__chiusura .a-mano { font-size: 1.3em; }
.cand__aereo { width: min(5em, 45cqh); height: min(5em, 45cqh); }
@container (max-height: 7em) { .cand__chiusura-dentro { display: none; } }

.testo .cand__firma,
.cand__firma {
  display: block;
  margin: .1em .6em 0 0;
  text-align: right;
  font-size: 1.35em;
}

/* =====================================================================
   ULTIMA PAGINA (retro di copertina, su fondo navy)
   ===================================================================== */
.pagina--retro { background-color: var(--navy); }
.pagina--retro::after { background: linear-gradient(90deg, rgba(0,0,0,.25) 0%, transparent 6%); }
.pagina--retro.--left::after { background: linear-gradient(270deg, rgba(0,0,0,.25) 0%, transparent 6%); }

.retro { color: var(--carta); }
.retro .testatina { border-bottom-color: rgba(250, 246, 236, .7); color: rgba(250, 246, 236, .7); }
.retro .testatina b { color: var(--giallo); }
.retro .folio { border-top-color: rgba(250, 246, 236, .5); color: rgba(250, 246, 236, .65); }

.retro__slogan { position: relative; text-align: center; margin: .9em 0 1em; padding: 0 .4em; }
.retro__slogan h2 { margin: 0; font-size: 2.3em; color: var(--carta); text-wrap: balance; }

.retro__logo {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  margin-top: .6em;
  container-type: size;
  display: grid;
  place-items: center;
}
.retro__logo img {
  position: relative;
  width: min(92cqh, 52cqw);
  height: min(92cqh, 52cqw);
  border-radius: 50%;
  box-shadow: 0 .3em .9em rgba(0, 0, 0, .35);
}
.retro__logo .pennellate { left: -8%; top: 50%; width: 116%; height: 70cqh; aspect-ratio: auto; transform: translateY(-50%) rotate(-5deg); }
@container (max-height: 5em) { .retro__logo > * { display: none; } }
.retro__aereo {
  position: absolute;
  left: -.4em;
  top: -1.1em;
  width: 3.2em;
  height: 3.2em;
  color: #8FC2F2;
  transform: scaleX(-1) rotate(-10deg);
}

.retro__agenda {
  margin: 0 .2em .9em;
  padding: .55em .8em .6em;
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: .3em .3em 0 var(--magenta);
  transform: rotate(-1deg);
}
.retro__agenda h3 {
  margin: 0 0 .4em;
  padding-bottom: .3em;
  border-bottom: 3px double var(--filetto);
  font-family: var(--f-testata);
  font-weight: 900;
  font-size: 1.1em;
  text-align: center;
  color: var(--navy);
}
.retro__agenda dl { margin: 0; }
.retro__agenda dl > div { display: flex; align-items: baseline; gap: .6em; padding: .18em 0; }
.retro__agenda dt {
  flex: none;
  width: 4.6em;
  font-size: .62em;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta);
}
.retro__agenda dd { margin: 0; font-weight: 600; font-size: .92em; line-height: 1.25; }

.retro__come h3 {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 .5em;
  font: 600 .62em/1 var(--f-testo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--giallo);
}
.retro__come h3::after { content: ""; flex: 1; border-top: 1px solid rgba(250, 246, 236, .5); }
.retro__come ol { list-style: none; margin: 0; padding: 0; }
.retro__come li {
  display: flex;
  align-items: flex-start;
  gap: .55em;
  margin-bottom: .45em;
  font-size: .88em;
  line-height: 1.28;
}
.retro__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: var(--giallo);
  color: var(--navy);
  font-family: var(--f-testata);
  font-weight: 900;
  font-size: .9em;
}
.retro strong { color: var(--giallo); }

.retro__azioni { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-top: .8em; }
.retro__btn {
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 2.9em;
  padding: .45em .7em;
  border: 1.5px solid var(--carta);
  border-radius: .5em;
  background: transparent;
  color: var(--carta);
  font: 600 .8em/1.15 var(--f-testo);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.retro__btn .ico { width: 1.5em; height: 1.5em; }
.retro__btn small { display: block; font-weight: 400; font-size: .8em; opacity: .8; }
.retro__btn--condividi { background: var(--giallo); border-color: var(--giallo); color: var(--navy); }
.retro__btn:focus-visible { outline: 2px solid var(--giallo); outline-offset: 2px; }

.retro__chiusura {
  margin: .5em 0 .3em;
  font-family: var(--f-testata);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05em;
  text-align: center;
  color: var(--giallo);
}

/* =====================================================================
   SOMMARIO (pannello "In questo numero", classi .indice per non confondersi con .sommario = catenaccio)
   ===================================================================== */
.indice {
  width: min(92vw, 420px);
  max-height: 86dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.indice::backdrop { background: rgba(12, 17, 36, .62); }
.indice[open] { animation: np-indice .25s ease-out; }
@keyframes np-indice { from { opacity: 0; transform: translateY(14px); } }

.indice__foglio {
  max-height: 86dvh;
  overflow: auto;
  padding: 16px 18px 12px;
  background: var(--carta);
  border-top: 6px solid var(--navy);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  font-family: var(--f-testo);
  color: var(--inchiostro);
}
.indice__testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 3px double var(--filetto);
}
.indice__testa .occhiello { font-size: 12px; margin-bottom: 2px; }
.indice__testa h2 {
  margin: 0;
  font-family: var(--f-testata);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.05;
  color: var(--navy);
}
.indice__chiudi {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -8px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  font-size: 24px;
  cursor: pointer;
}
.indice__chiudi:hover { background: rgba(28, 42, 94, .08); }
.indice__lista { list-style: none; margin: 6px 0 0; padding: 0; }
.indice__voce {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.indice__voce:hover { background: rgba(28, 42, 94, .06); }
.indice__voce:focus-visible { outline: 2px solid var(--azzurro); outline-offset: -2px; }
.indice__voce.is-attiva { background: rgba(247, 181, 0, .22); }
.indice__titolo {
  font-family: var(--f-testata);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
}
.indice__voce--cand { padding-left: 18px; }
.indice__voce--cand .indice__titolo { font-family: var(--f-testo); font-weight: 600; font-size: 16px; }
.indice__puntini { flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(42, 42, 51, .35); transform: translateY(-4px); }
.indice__n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--magenta); }
.indice__gruppo {
  margin: 10px 6px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta);
}

/* =====================================================================
   AVVISO (es. "Link copiato!")
   ===================================================================== */
.avviso {
  position: fixed;
  left: 50%;
  bottom: calc(55px + env(safe-area-inset-bottom) + 16px);
  z-index: 60;
  max-width: 90vw;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--carta);
  font: 600 15px/1.3 var(--f-testo);
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .25s, transform .25s;
}
.avviso.is-visibile { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   SCHERMATA DI CARICAMENTO: il giornale arriva piegato e si apre
   ===================================================================== */
.caricamento {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(120% 80% at 50% 0%, #34406a 0%, transparent 60%), var(--scrivania);
  transition: opacity .5s ease, visibility .5s;
}
.caricamento.is-finito { opacity: 0; visibility: hidden; }

.caricamento__giornale {
  position: relative;
  width: 150px;
  height: 200px;
  perspective: 700px;
  animation: np-arriva .45s cubic-bezier(.2, .8, .3, 1) both;
}
.caricamento__meta {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  background: var(--carta);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.caricamento__meta--alta {
  top: 0;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  animation: np-apri .55s .35s cubic-bezier(.3, .7, .3, 1) both;
}
.caricamento__meta--bassa { bottom: 0; padding-top: 10px; }
.caricamento__meta b {
  padding-bottom: 4px;
  border-bottom: 3px double var(--filetto);
  font-family: var(--f-testata);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  color: var(--navy);
}
.caricamento__meta i { display: block; flex: none; height: 6px; border-radius: 3px; background: rgba(42, 42, 51, .18); }
.caricamento__meta i:nth-child(odd) { width: 82%; }
.caricamento__meta i:last-child { width: 60%; }
.caricamento__meta--alta i:nth-of-type(1) { background: var(--magenta); width: 45%; opacity: .7; }
.caricamento__testo {
  margin: 0;
  font-family: var(--f-mano);
  font-size: 22px;
  color: var(--giallo);
  animation: np-compari .3s .6s both;
}
@keyframes np-arriva { from { opacity: 0; transform: translateY(40px) rotate(-8deg) scale(.9); } }
@keyframes np-apri { from { transform: rotateX(-180deg); } to { transform: rotateX(0); } }
@keyframes np-compari { from { opacity: 0; } }

/* =====================================================================
   Movimento ridotto
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}