/* ==========================================================================
   100 DONNE VESTITE DI ROSSO — Hero "Monolithic"
   Direzione approvata: monolite rosso, tipografia come immagine, zero foto.
   ========================================================================== */

:root {
  /* Colore */
  --red: #E42718;          /* famiglia Pantone 485 — nudged per superare AA (4.6:1 su nero) */
  --ink: #000000;
  --black: #0A0A0A;

  /* Griglia */
  --pad: clamp(1.15rem, 2.6vw, 2.5rem);
  --gutter: clamp(0.75rem, 1.7vw, 1.5rem);
  /* Misura massima delle sezioni di testo. Hero e numero restano a tutto
     schermo: li il rosso E il manifesto. Qui invece una riga larga 3400px
     non si legge — non e un margine decorativo, e leggibilita. */
  --misura: 2200px;

  /* Tipografia */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-micro: clamp(12px, 0.85vw, 14px);
  --squeeze: 0.88;         /* compressione orizzontale del display — 1 = Anton naturale */
  /* Corpo del monolite. Il limite verticale NON puo essere una percentuale
     fissa: la fascia centrale vale circa (altezza - 240px), e il manifesto
     ne chiede altri 150. Su uno schermo da 800px 25vh faceva sbordare il
     titolo SOPRA il manifesto. Qui il corpo si ricava dallo spazio che resta
     davvero, diviso le tre righe (3 x line-height 0.9 = 2.7). */
  --titolo: min(13vw, calc((100svh - 390px) / 2.7));
  /* "100 DONNE" in Anton misura 3.94em, compresso a 0.88 fa 3.4672em:
     e' la larghezza reale del titolo, e da li si posiziona l'anello. */
  --titolo-largo: calc(var(--titolo) * 3.4672);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--red);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Etichette micro — tutta la UI minore vive qui (il logo ha scala propria) */
.utility, .nav, .manifesto, .cue, .archive__index {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.55;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  /* L'anello sborda a destra di proposito: va ritagliato qui, altrimenti
     allunga il documento e la pagina scorre in orizzontale. "clip" e non
     "hidden" perche non deve creare un contenitore scrollabile. */
  overflow: clip;
  padding: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--gutter);
  row-gap: clamp(1.25rem, 3vh, 2.5rem);
}

/* --- Timbro / logotipo ---------------------------------------------------- */

/* Geometria misurata sul logo originale (cap di "100DONNE" = 32px):
   cuore alto 1.97 cap, stacco 0.34 cap, sottotitolo 0.625 cap e largo
   esattamente quanto la riga sopra. Il font-size di .stamp E la dimensione
   del wordmark: ogni altra misura deriva da quella, in em. */
.stamp {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 0.245em;
  font-size: clamp(20px, 1.85vw, 27px);
  transition: opacity 0.5s var(--ease);
}
.stamp:hover { opacity: 0.62; }

/* Il cuore nel file e rosso: sul monolite rosso sparirebbe. brightness(0) lo
   appiattisce a nero conservando la trasparenza. Per fondo scuro: invert(1). */
.stamp__mark {
  height: 1.355em;
  width: auto;
  filter: brightness(0);
}

.stamp__lockup { display: block; }

/* Archivo Black = equivalente libero dell'Arial Black del logo. Il lettering
   e rifatto in tipografia perche nel sorgente e alto 32px: ingrandito in
   header si sgranerebbe. */
.stamp__word {
  display: block;
  font-family: "Archivo Black", "Arial Black", var(--font-ui);
  font-size: 1em;
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.stamp__sub {
  display: block;
  margin-top: 0.11em;
  font-size: 0.605em;
  font-weight: 500;
  letter-spacing: 0.0335em;
  text-transform: uppercase;
  opacity: 0.82;
}

/* --- Utility in alto a destra --------------------------------------------- */

.utility {
  grid-column: 8 / -1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
}
.utility__lang, .utility__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  letter-spacing: 0.09em;
  font-weight: 500;
}
.utility__caret {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.4s var(--ease);
}
.utility__lang:hover .utility__caret { transform: translateY(2px); }

.burger { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.burger i { display: block; height: 1.5px; background: currentColor; transition: transform 0.5s var(--ease); }
.utility__menu:hover .burger i:first-child { transform: translateX(4px); }
.utility__menu:hover .burger i:last-child  { transform: translateX(-4px); }

/* --- Fascia centrale: nav / titolo / manifesto ----------------------------- */

.mid {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}

/* Nav, titolo e manifesto condividono una sola riga: il titolo e il manifesto
   si sovrappongono di una colonna, ma il manifesto vive nell'incavo che la
   riga corta "ROSSO" lascia vuoto. Senza grid-row esplicito il browser
   spingerebbe il manifesto su una seconda riga implicita. */
.nav {
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: center;
}
.nav li + li { margin-top: 0.15em; }
.nav a {
  position: relative;
  display: inline-block;
  padding-left: 0;
  transition: transform 0.5s var(--ease);
}
.nav a::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.62em;
  width: 0.75rem;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav a:hover { transform: translateX(1.15rem); }
.nav a:hover::before { transform: scaleX(1); }

/* Titolo — il monolite */

/* Metriche Anton misurate: cap-height 0.867em, riga piu larga "100 DONNE" =
   3.94em. Il corpo e vincolato dal minore fra larghezza colonna e altezza
   disponibile, cosi il monolite non sfonda mai la griglia. */
.title {
  grid-column: 3 / 9;
  grid-row: 1;
  align-self: start;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--titolo);
  line-height: 0.9;
  letter-spacing: 0.002em;
  white-space: nowrap;
}
/* La maschera deve stare sopra il cap-height, altrimenti taglia i glifi:
   il padding apre lo spazio, il margine negativo ripristina il ritmo. */
.title__line {
  display: block;
  overflow: hidden;
  padding-top: 0.12em;
  margin-top: -0.12em;
}
.title__inner {
  display: block;
  transform-origin: 0 50%;
  transform: translate3d(0, 110%, 0) scaleX(var(--squeeze));
  transition: transform 1.15s var(--ease);
}
.is-ready .title__inner { transform: translate3d(0, 0, 0) scaleX(var(--squeeze)); }
.is-ready .title__line:nth-child(2) .title__inner { transition-delay: 0.09s; }
.is-ready .title__line:nth-child(3) .title__inner { transition-delay: 0.18s; }

/* Manifesto — incastrato nel vuoto lasciato dalla riga corta */

.manifesto {
  grid-column: 3 / 7;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.07em;
}
.manifesto span { display: block; }
.manifesto__strong { font-weight: 600; }

/* --- Card: anello nell'hero, poi forma del 100 -----------------------------
   Le card sono FISSE allo schermo e posizionate da main.js frame per frame:
   nell'hero orbitano, scorrendo si dispongono a formare il numero. Servono in
   JS perche le due posizioni vanno interpolate con continuita: con due
   animazioni CSS separate ci sarebbe uno stacco nel passaggio.
   -------------------------------------------------------------------------- */

.ring {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: clip;            /* le card che sbordano non allungano il documento */
  pointer-events: none;
}
.ring__track { position: absolute; inset: 0; }

.ring__slot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cw, 120px);
  will-change: transform;
  pointer-events: auto;
}

/* La card e' un componente vero, non una foto incorniciata: superficie bianca,
   foto in alto, sotto la sua scheda. Misure in frazioni di --cw.
   --veste va da 1 (card intera nell'anello) a 0 (solo la foto, dentro il
   numero): entrando nel 100 il cartoncino si dissolve e resta l'immagine. */
.ring__card {
  margin: 0;
  background: rgba(255, 255, 255, var(--veste, 1));
  border-radius: calc(var(--cw) * 0.024 * var(--veste, 1));
  padding: calc(var(--cw) * 0.055 * var(--veste, 1));
  box-shadow: 0 calc(var(--cw) * 0.02) calc(var(--cw) * 0.085) rgba(0, 0, 0, calc(0.2 * var(--veste, 1))),
              0 calc(var(--cw) * 0.004) calc(var(--cw) * 0.012) rgba(0, 0, 0, calc(0.12 * var(--veste, 1)));
}
.ring__foto {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--cw) * 0.012);
  background: #ece9e6;
}
.ring__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.ring__meta {
  display: block;
  opacity: var(--veste, 1);
  max-height: calc(var(--cw) * 0.34 * var(--veste, 1));
  overflow: hidden;
  padding: calc(var(--cw) * 0.055) calc(var(--cw) * 0.01) calc(var(--cw) * 0.008);
  color: var(--ink);
}
.ring__meta span { display: block; }
.ring__num {
  font-size: calc(var(--cw) * 0.058);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.42);
}
.ring__luogo {
  margin-top: calc(var(--cw) * 0.022);
  font-size: calc(var(--cw) * 0.075);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}
.ring__det {
  margin-top: calc(var(--cw) * 0.012);
  font-size: calc(var(--cw) * 0.055);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.5);
}

/* Mozzo: comando di pausa. Un'animazione che parte da sola e dura piu' di
   5 secondi deve essere fermabile (WCAG 2.2.2). Sparisce quando l'anello
   si scioglie nel numero. */
.ring__pause {
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border: 1.25px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition: background-color 0.45s var(--ease);
}
.ring__pause:hover { background: var(--ink); }
.ring__bars {
  width: 10px; height: 11px;
  border-left: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  transition: border-color 0.45s var(--ease);
}
.ring__pause:hover .ring__bars { border-color: var(--red); }
.ring.is-paused .ring__bars {
  width: 0; height: 0;
  border-left: 11px solid var(--ink);
  border-right: 0;
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
  margin-left: 3px;
}
.ring.is-paused .ring__pause:hover .ring__bars { border-left-color: var(--red); }

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

/* Il pannello che ritaglia il numero. Sta sopra le card e sotto la UI. */
.taglio {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* parte tutto sotto la piega: il JS lo fa salire */
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}
#taglio-rosso { fill: var(--red); }

/* La schermata del 100: spazio di scorrimento per i tre tempi — le card che
   si compongono, il rosso che sale, le parole che entrano. */
.forma {
  min-height: 250svh;
  background: var(--red);
}

/* Le parole stanno sotto il numero e restano ferme mentre si scorre. Entrano
   da dietro una mascheratura, come il titolone: nessuna dissolvenza. */
.parole {
  position: fixed;
  left: 50%;
  top: 76%;
  transform: translateX(-50%);
  width: min(92vw, 62rem);
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.parole__riga {
  margin: 0 0 0.42em;
  overflow: hidden;
  font-size: clamp(15px, 1.28vw, 21px);
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: 0.012em;
}
.parole__riga > span {
  display: block;
  transform: translate3d(0, 115%, 0);
  will-change: transform;
}
.parole__voce {
  margin-top: 0.7em;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.7vw, 46px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* --- Piede: cue + disco --------------------------------------------------- */

.cue {
  grid-column: 1 / 6;
  grid-row: 3;
  align-self: end;
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
}
.cue__dot {
  width: 5px; height: 5px;
  background: var(--ink);
  border-radius: 50%;
  margin-bottom: 0.42em;
  animation: pulse 2.6s var(--ease) infinite;
}
.cue__label { line-height: 1.35; }

@keyframes pulse {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  45%      { transform: translateY(5px); opacity: 0.35; }
}

.disc {
  grid-column: 9 / -1;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  width: clamp(44px, 3.6vw, 56px);
  aspect-ratio: 1;
  display: block;
}
.disc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.disc circle {
  fill: transparent;
  stroke: var(--ink);
  stroke-width: 1.25;
  transition: fill 0.55s var(--ease);
}
.disc path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: square;
  transition: stroke 0.55s var(--ease), transform 0.55s var(--ease);
  transform-origin: center;
}
.disc:hover circle { fill: var(--ink); }
.disc:hover path { stroke: var(--red); transform: translateX(3px); }

/* --- Entrata della micro-UI ----------------------------------------------- */

.stamp, .utility, .nav, .manifesto, .cue, .disc {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.is-ready .stamp,
.is-ready .utility,
.is-ready .nav,
.is-ready .manifesto,
.is-ready .cue,
.is-ready .disc {
  opacity: 1;
  transform: none;
  transition-delay: 0.55s;
}
.is-ready .manifesto { transition-delay: 0.7s; }
.is-ready .cue,
.is-ready .disc { transition-delay: 0.8s; }

/* Le card entrano dopo il titolo. Solo opacita': la posizione la governa il
   JS, e un transform su .ring sposterebbe tutto il sistema di coordinate. */
.ring { opacity: 0; transition: opacity 1.2s var(--ease); }
.is-ready .ring { opacity: 1; transition-delay: 0.4s; }


/* --- La lente: la card cliccata si apre in grande -------------------------
   Apre con un taglio dal centro, non in dissolvenza. Il fondo e nero per far
   respirare la fotografia dopo tutto quel rosso.
   -------------------------------------------------------------------------- */

.lente {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vh, 4rem);
  background: rgba(10, 10, 10, 0.94);
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.55s var(--ease);
}
.lente[hidden] { display: none; }
.lente.is-aperta { clip-path: inset(0 0 0 0); }

.lente__quadro {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2vh, 1.4rem);
  max-height: 100%;
}
.lente__quadro img {
  display: block;
  max-width: min(92vw, 62vh);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #1a1a1a;
}
.lente__quadro figcaption {
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.75;
}

.lente__chiudi {
  position: absolute;
  top: clamp(1rem, 3vh, 2.2rem);
  right: clamp(1rem, 3vw, 2.2rem);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1.25px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.lente__chiudi svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lente__chiudi:hover { background: #fff; color: #0a0a0a; border-color: #fff; }

/* la card e un bottone: niente stile di sistema */
.ring__slot {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
}

/* ==========================================================================
   LE TAPPE — l'indice dei flashmob
   Una riga per piazza: numero, citta in grande, luogo, il perche di quel
   posto, la data. La fotografia compare al passaggio, con un taglio
   geometrico (nessuna dissolvenza).
   ========================================================================== */

.tappe {
  position: relative;
  background: var(--red);
  padding: clamp(5rem, 12vh, 10rem) var(--pad) clamp(4rem, 10vh, 8rem);
}

.tappe__testa {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* la foto occupa due righe: senza righe esplicite il suo ingombro
     gonfia anche la prima e stacca il testo dal titolo */
  grid-template-rows: auto 1fr;
  column-gap: var(--gutter);
  margin-bottom: clamp(2.5rem, 6vh, 5rem);
  max-width: var(--misura);
  margin-inline: auto;
}
.tappe__occhiello {
  grid-column: 1 / 3;
  grid-row: 1;
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tappe__titolo {
  grid-column: 3 / 10;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8.2vw, 13rem);
  line-height: 0.88;
  text-transform: uppercase;
  padding-top: 0.06em;
}
.tappe__titolo > span { display: block; }
.tappe__sotto {
  grid-column: 3 / 8;
  max-width: 42ch;
  grid-row: 2;
  margin-top: clamp(1.7rem, 4.5vh, 3.2rem);
  margin: 0;
  max-width: 34ch;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.55;
}


/* --- Foto laterale: una per sezione, alternata destra/sinistra -------------
   Vive dentro l'intestazione e occupa la colonna che resterebbe vuota.
   Si muove in parallasse leggera con lo scroll (main.js). */

.lato {
  grid-row: 1 / 3;
  margin: 0;
  align-self: start;
  width: 100%;
  max-width: 30rem;
}
.lato--destra   { grid-column: 10 / -1; justify-self: end; }
.lato--sinistra { grid-column: 1 / 4; grid-row: 1 / 4; }
/* la cornice ritaglia; l'immagine e piu alta del 12% e scorre dentro:
   senza quel margine il parallasse scoprirebbe i bordi */
.lato__telaio {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.lato img {
  display: block;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}
.lato figcaption {
  margin-top: 0.7em;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.62;
}

.tappe__lista { border-top: 1px solid var(--ink); max-width: var(--misura); margin-inline: auto; }

/* la foto vive dentro la riga: su desktop la mostra l'anteprima che segue il
   puntatore, su schermi tattili — dove l'hover non esiste — si vede qui */
.tappa__foto { display: none; }

.tappa {
  position: relative;
  border-bottom: 1px solid var(--ink);
  max-width: var(--misura);
  margin-inline: auto;
}
/* la riga e' un link alla pagina dell'evento */
.tappa__link {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 0.45rem;
  align-items: baseline;
  padding: clamp(1.2rem, 2.4vh, 2rem) 0;
  cursor: pointer;
  transition: padding-left 0.55s var(--ease);
}
.tappa__link:hover { padding-left: clamp(0.6rem, 1.4vw, 1.6rem); }
.tappa__link:focus-visible { outline-offset: -2px; }

.tappa__n {
  grid-column: 1 / 2;
  grid-row: 1;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.5;
  transition: opacity 0.45s var(--ease);
}
.tappa__link:hover .tappa__n { opacity: 1; }

/* Il nome grande e' il LUOGO, non la citta: sei tappe su dieci sono a Genova,
   e una colonna di "Genova" ripetuti non dice niente. I luoghi invece sono
   tutti diversi — e sono la ragione per cui queste foto esistono. */
.tappa__nome {
  grid-column: 2 / 10;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}
.tappa__data {
  grid-column: 10 / -1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tappa__riga2 {
  grid-column: 2 / 10;
  grid-row: 2;
  max-width: 62ch;
  font-size: clamp(12px, 0.92vw, 14.5px);
  line-height: 1.5;
  opacity: 0.78;
}
.tappa__riga2 b { font-weight: 600; opacity: 1; }

/* L'anteprima segue il puntatore. Entra con un taglio dal basso, non in
   dissolvenza: coerente con il resto del sito. */
.tappe__anteprima {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(180px, 15vw, 260px);
  margin: 0;
  pointer-events: none;
  z-index: 4;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.5s var(--ease);
}
.tappe__anteprima.is-visibile { clip-path: inset(0 0 0 0); }
.tappe__anteprima.is-larga { width: clamp(280px, 26vw, 520px); }
.tappe__anteprima img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 4 / 5);
  object-fit: cover;
  background: #ece9e6;
}


/* ==========================================================================
   PORTA IL FLASHMOB — le condizioni del rito e la chiamata
   Sette punti trattati come un protocollo, non come un regolamento: e' il
   motore di espansione del movimento, oggi sepolto in fondo a una pagina.
   ========================================================================== */

.porta {
  background: var(--red);
  padding: clamp(5rem, 13vh, 11rem) var(--pad) clamp(4rem, 9vh, 7rem);
  border-top: 1px solid var(--ink);
}

.porta__testa {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* qui la colonna di sinistra e occupata dalla foto, quindi l'occhiello non
     puo stare nel margine come nelle tappe: prende una riga sua sopra il
     titolo. L'ultima riga e 1fr perche l'eccedenza della foto finisca li. */
  grid-template-rows: auto auto 1fr;
  column-gap: var(--gutter);
  margin-bottom: clamp(3rem, 8vh, 6rem);
  max-width: var(--misura);
  margin-inline: auto;
}
.porta__occhiello {
  grid-column: 4 / -1;
  grid-row: 1;
  margin-bottom: 0.9em;
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.porta__titolo {
  grid-column: 4 / 12;
  grid-row: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 10.5rem);
  /* 0.88 come gli altri titoli farebbe sbattere l'accento di CITTA'
     contro la riga sopra: le maiuscole accentate vogliono piu aria */
  line-height: 1.0;
  text-transform: uppercase;
  padding-top: 0.06em;
}
.porta__titolo > span { display: block; }
.porta__sotto {
  grid-column: 4 / 9;
  max-width: 46ch;
  grid-row: 3;
  margin-top: clamp(1.7rem, 4.5vh, 3.2rem);
  margin: 0;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.55;
}

.porta__regole {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2rem, 5vw, 6rem);
  row-gap: clamp(2rem, 4.5vh, 3.4rem);
  max-width: 78rem;
  max-width: var(--misura);
  margin-inline: auto;
}
.regola {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(0.9rem, 1.8vw, 1.8rem);
  align-items: baseline;
}
.regola__n {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 4.4rem);
  line-height: 0.9;
  opacity: 0.28;
}
.regola__titolo {
  margin: 0 0 0.28em;
  font-size: clamp(15px, 1.15vw, 22px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.regola__testo {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.55;
  opacity: 0.8;
}

/* --- La chiamata --------------------------------------------------------- */

.porta__chiamata {
  margin-top: clamp(4rem, 11vh, 9rem);
  padding-top: clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--ink);
  max-width: var(--misura);
  margin-inline: auto;
}
.porta__coda {
  margin: 0 0 clamp(1.5rem, 4vh, 3rem);
  max-width: 30ch;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.5;
}
.porta__coda b { font-weight: 600; }
.porta__undici {
  margin: 0 0 clamp(2rem, 5vh, 3.4rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 9rem);
  line-height: 0.9;
  text-transform: uppercase;
  padding-top: 0.06em;
}
.porta__undici > span { display: block; }

.modulo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1.2rem, 3vw, 3rem);
  row-gap: clamp(1.4rem, 3.5vh, 2.4rem);
  max-width: 66rem;
}
.campo { display: block; }
.campo--largo { grid-column: 1 / -1; max-width: 44rem; }
.campo label {
  display: block;
  margin-bottom: 0.5em;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.campo input {
  display: block;
  width: 100%;
  padding: 0.35em 0 0.5em;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: clamp(15px, 1.15vw, 22px);
  transition: border-color 0.4s var(--ease);
}
.campo input::placeholder { color: rgba(0, 0, 0, 0.4); }
.campo input:focus { outline: none; border-bottom-width: 3px; }

.modulo__invia {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  margin-top: 0.4rem;
  padding: 0.95em 1.9em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.modulo__invia svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.modulo__invia:hover { background: var(--ink); color: var(--red); }
.modulo__nota {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 46ch;
  font-size: clamp(11.5px, 0.82vw, 13px);
  line-height: 1.5;
  opacity: 0.62;
}

/* ==========================================================================
   PIEDE
   ========================================================================== */

.piede {
  background: var(--black);
  color: var(--red);
  padding: clamp(3rem, 8vh, 5.5rem) var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 2rem;
  font-size: clamp(12.5px, 0.9vw, 14px);
  line-height: 1.6;
  /* il nero va a tutto schermo; e' il contenuto a fermarsi alla misura */
  padding-inline: max(var(--pad), calc((100% - var(--misura)) / 2));
}
.piede__blocco { grid-column: span 4; }
.piede__blocco p { margin: 0 0 0.4em; }
.piede__nome {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
}
.piede__nome span { opacity: 0.55; }
.piede a { border-bottom: 1px solid currentColor; }
.piede__etichetta {
  margin: 0 0 0.6em;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
.piede__social li, .piede__lista li { margin-bottom: 0.35em; }
.piede__nota {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 60ch;
  opacity: 0.6;
}
.piede__credito { display: block; margin-top: 1.2em; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Sotto i 1024 l'anello non ha piu' spazio orizzontale: si toglie e il titolo
   si riprende tutta la larghezza. Su queste misure serve un componente suo
   (una striscia orizzontale scorrevole), non un cerchio compresso. */
@media (max-width: 1024px) {
  /* Sotto i 1024 le card non hanno spazio: niente anello e niente schermata
     del 100. Su queste misure serve un componente suo — DA FARE. */
  .ring     { display: none; }
  .taglio   { display: none; }
  /* niente card, ma il messaggio resta: la sezione diventa statica */
  .forma    { min-height: 0; display: flex; align-items: center;
              padding: 22svh var(--pad); }
  .parole   { position: static; transform: none; width: 100%; text-align: left; }
  .parole__riga > span { transform: none; }
  .nav      { grid-column: 1 / 4; }
  .title    { grid-column: 4 / 12; align-self: center; font-size: min(18.5vw, 26vh); }
  .manifesto{ grid-column: 8 / -1; align-self: end; justify-self: end; text-align: right; }
}

/* Le tappe su schermi stretti: la foto entra nella riga, niente anteprima */
@media (max-width: 860px) {
  .tappe__testa, .porta__testa { display: block; }
  .lato { margin-bottom: 1.8rem; }
  .lato__telaio { aspect-ratio: 3 / 2; }
  .tappe__titolo { font-size: clamp(2.6rem, 13vw, 5rem); margin: 0.3em 0 0.5em; }
  .tappe__sotto { max-width: none; }
  .tappa__link { grid-template-columns: 3.2rem 1fr; row-gap: 0.3rem; align-items: start; }
  .tappa__foto { display: block; grid-column: 1 / -1; grid-row: 1;
                 width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover;
                 margin-bottom: 1rem; }
  .tappa__n     { grid-column: 1; grid-row: 2; }
  .tappa__nome  { grid-column: 2; grid-row: 2; font-size: clamp(1.7rem, 8.5vw, 2.8rem); }
  .tappa__data  { grid-column: 2; grid-row: 3; justify-self: start; text-align: left; }
  .tappa__riga2 { grid-column: 2; grid-row: 4; }
  .tappe__anteprima { display: none; }
}

/* Porta il flashmob, su schermi stretti */
@media (max-width: 860px) {
  .porta__titolo { font-size: clamp(2.2rem, 11vw, 4rem); margin: 0.3em 0 0.5em; }
  .porta__regole { grid-template-columns: 1fr; }
  .modulo { grid-template-columns: 1fr; }
  .campo--largo { grid-column: 1; }
  .piede__blocco { grid-column: 1 / -1; }
}

/* Tablet verticale */
@media (max-width: 860px) {
  :root { --squeeze: 0.84; }
  .mid {
    grid-template-columns: subgrid;
    align-content: center;
    row-gap: clamp(1.5rem, 4vh, 3rem);
  }
  .nav       { grid-column: 1 / -1; grid-row: 1; }
  .nav ul    { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
  .nav li + li { margin-top: 0; }
  .nav a::before { display: none; }
  .nav a:hover   { transform: none; text-decoration: underline; text-underline-offset: 0.35em; }
  .title     { grid-column: 1 / -1; grid-row: 2; font-size: min(26vw, 24vh); }
  /* niente max-width: ogni frase del manifesto deve restare su una riga sola */
  .manifesto { grid-column: 1 / -1; grid-row: 3; text-align: left; justify-self: start; }
}

/* Sotto i 700px la nav distesa va a capo male ed e comunque ridondante:
   resta il bottone MENU (il pannello a scomparsa e il pezzo successivo). */
@media (max-width: 700px) {
  .nav       { display: none; }
  .title     { grid-row: 1; }
  .manifesto { grid-row: 2; }
}

/* Mobile */
@media (max-width: 560px) {
  :root { --squeeze: 0.8; --fs-micro: 12px; }
  .hero { row-gap: clamp(1rem, 2.5vh, 2rem); }
  .stamp   { grid-column: 1 / 8; }
  .utility { grid-column: 8 / -1; gap: 1.15rem; }
  .title   { font-size: min(28vw, 26vh); }
  .cue     { grid-column: 1 / 8; }
  .disc    { grid-column: 8 / -1; width: 42px; }
}

/* ==========================================================================
   MOTION RIDOTTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .title__inner {
    transform: translate3d(0, 0, 0) scaleX(var(--squeeze));
    transition: opacity 0.4s linear;
    opacity: 0;
  }
  .is-ready .title__inner { opacity: 1; }
  .stamp, .utility, .nav, .manifesto, .cue, .disc { transform: none; }
  .cue__dot { animation: none; }
  /* Un anello che gira veloce e' un innesco vestibolare: qui si ferma del
     tutto e resta una composizione statica di foto. */
  .ring__track, .ring__card { animation: none; }
  .ring { transform: none; }
  .ring__pause { display: none; }
  * { transition-duration: 0.35s !important; transition-delay: 0s !important; }
}


/* ==========================================================================
   COMPONENTI COMUNI — bottone, video, lente per i video, menu
   ========================================================================== */

:root { --carta: #F2EFE9; }   /* la "pagina": fondo delle pagine interne di lettura */

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.9em 1.7em;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.bottone:hover { background: var(--ink); color: var(--red); border-color: var(--ink); }
.bottone--chiaro:hover { background: #fff; color: var(--black); border-color: #fff; }
.pagina .bottone:hover { background: var(--ink); color: var(--carta); }

/* Un video non parte da solo: poster + tasto, il player arriva al clic */
.video, .voce__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a1a;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
}
.video img, .voce__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.video:hover img, .voce__video:hover img { transform: scale(1.03); }
.video__play {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(52px, 4.5vw, 72px);
  aspect-ratio: 1;
  margin: calc(clamp(52px, 4.5vw, 72px) / -2) 0 0 calc(clamp(52px, 4.5vw, 72px) / -2);
  border: 1.5px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10, 10, 10, 0.35);
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.video__play svg { width: 42%; height: 42%; fill: currentColor; margin-left: 6%; }
.video:hover .video__play, .voce__video:hover .video__play { background: var(--red); border-color: var(--red); }

.lente__video {
  position: relative;
  width: min(92vw, calc(80vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
}
.lente__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lente__quadro img[hidden], .lente__video[hidden] { display: none; }

/* --- Menu: pannello a tutto schermo, entra con un taglio dall'alto -------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--black);
  color: var(--red);
  padding: var(--pad);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  overflow: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-aperto { clip-path: inset(0 0 0 0); }
.menu__chiudi {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1.25px solid currentColor;
  border-radius: 50%;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.menu__chiudi svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.menu__chiudi:hover { background: var(--red); color: var(--black); }
.menu__voci { list-style: none; margin: 0; padding: 0; align-self: center; }
.menu__voci a {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.5vh, 5.4rem);
  line-height: 1.02;
  text-transform: uppercase;
  transition: transform 0.5s var(--ease), color 0.4s var(--ease);
}
.menu__voci a span {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.55;
  min-width: 2.2em;
}
.menu__voci a:hover { transform: translateX(0.35em); color: #fff; }
.menu__coda { display: flex; flex-wrap: wrap; gap: 0.6em 2.2em; margin: 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.menu__coda a { border-bottom: 1px solid currentColor; }
.is-menu { overflow: hidden; }

/* ==========================================================================
   HERO SU SCHERMI STRETTI — la striscia di card e il 100 fermo
   ========================================================================== */

.striscia { display: none; }
.cento-fermo { display: none; }

/* ==========================================================================
   CHI SIAMO
   ========================================================================== */

.chi {
  background: var(--red);
  padding: clamp(5rem, 12vh, 10rem) var(--pad) clamp(4rem, 10vh, 8rem);
  border-top: 1px solid var(--ink);
}
.chi__testa, .chi__founder, .chi__tre {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  max-width: var(--misura);
  margin-inline: auto;
}
.chi__occhiello, .voci__occhiello, .mag__occhiello, .soci__occhiello, .chi__etichetta,
.rivista__occhiello, .articolo__occhiello, .libro__occhiello, .yallah__occhiello, .vuota__occhiello {
  grid-column: 1 / 3;
  grid-row: 1;
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chi__titolo, .voci__titolo, .mag__titolo, .soci__titolo, .rivista__titolo, .libro__titolo, .yallah__titolo, .vuota__titolo {
  grid-column: 3 / 11;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8.2vw, 13rem);
  line-height: 0.9;
  text-transform: uppercase;
  padding-top: 0.06em;
}
.chi__titolo > span, .voci__titolo > span, .mag__titolo > span, .soci__titolo > span,
.rivista__titolo > span, .libro__titolo > span, .yallah__titolo > span, .vuota__titolo > span { display: block; }
.chi__sotto, .voci__sotto, .mag__sotto, .soci__sotto, .rivista__sotto, .yallah__sotto {
  grid-column: 3 / 8;
  grid-row: 2;
  margin: clamp(1.7rem, 4.5vh, 3.2rem) 0 0;
  max-width: 44ch;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.55;
}

.chi__tre {
  margin-top: clamp(3rem, 8vh, 6rem);
  border-top: 1px solid var(--ink);
  padding-top: clamp(1.6rem, 4vh, 3rem);
}
.chi__voce { grid-column: span 4; padding-right: clamp(1rem, 3vw, 4rem); }
.chi__voce:nth-child(1) { grid-column: 3 / 6; }
.chi__voce:nth-child(2) { grid-column: 6 / 9; }
.chi__voce:nth-child(3) { grid-column: 9 / 12; }
.chi__voce h3 {
  margin: 0 0 1em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
}
.chi__voce p { margin: 0 0 0.9em; font-size: clamp(13px, 0.92vw, 15px); line-height: 1.55; opacity: 0.85; }

.chi__founder {
  margin-top: clamp(4rem, 10vh, 8rem);
  border-top: 1px solid var(--ink);
  padding-top: clamp(2.5rem, 6vh, 5rem);
  align-items: start;
}
.chi__ritratto { grid-column: 1 / 5; margin: 0; max-width: 30rem; }
.chi__ritratto img, .yallah__figura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chi__ritratto figcaption {
  margin-top: 0.7em;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.62;
}
.chi__bio { grid-column: 5 / 11; max-width: 58ch; }
.chi__bio .chi__etichetta { grid-column: auto; grid-row: auto; margin-bottom: 1.2em; }
.chi__nome {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 7rem);
  line-height: 0.92;
  text-transform: uppercase;
}
.chi__nome span { display: block; }
.chi__bio p { margin: 0 0 1em; font-size: clamp(14px, 1.02vw, 17px); line-height: 1.55; }
.chi__link a { border-bottom: 1px solid currentColor; font-weight: 500; }

/* ==========================================================================
   TESTIMONIANZE — il palco nero
   ========================================================================== */

.voci {
  background: var(--black);
  color: #fff;
  padding: clamp(5rem, 12vh, 10rem) var(--pad) clamp(5rem, 12vh, 9rem);
}
.voci__testa {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  max-width: var(--misura);
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
}
.voci__occhiello, .voci__sotto { color: var(--red); }
.voci__sotto { color: rgba(255, 255, 255, 0.72); }
.voci__azioni {
  grid-column: 3 / 11;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.4rem;
  margin: clamp(1.5rem, 4vh, 2.6rem) 0 0;
}
.voci__canale { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--red); }
.voci__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  max-width: var(--misura);
  margin-inline: auto;
}
.voce__nome {
  margin: 0.7em 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   IL LIBRO + YALLAH — due porte
   ========================================================================== */

.due {
  display: grid;
  /* due porte larghe al massimo mezza misura, centrate: su ultrawide il fondo
     resta a tutto schermo ma le figure non diventano enormi */
  grid-template-columns: repeat(3, minmax(0, calc(var(--misura) / 3)));
  justify-content: center;
  background: var(--carta);
  color: var(--ink);
}
.due__porta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 2vw, 2.4rem);
  align-items: center;
  padding: clamp(2.5rem, 6vh, 5rem) clamp(1.15rem, 2vw, 2.5rem);
  transition: background-color 0.6s var(--ease);
}
.due__porta + .due__porta { border-left: 1px solid rgba(0, 0, 0, 0.16); }
.due__porta:hover { background: #E9E4DB; }
.due__figura {
  display: block;
  aspect-ratio: 4 / 5;
  background: #E3DDD3;
  overflow: hidden;
}
.due__figura img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 9%; transition: transform 0.9s var(--ease); }
.due__figura--larga img { object-fit: cover; padding: 0; }
.due__porta:hover .due__figura img { transform: scale(1.03); }
.due__testo { display: block; }
.due__testo > span { display: block; }
.due__occhiello { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.due__titolo {
  margin: 0.5em 0 0.45em;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.6vw, 4rem);
  line-height: 0.92;
  text-transform: uppercase;
}
.due__sotto { max-width: 34ch; font-size: clamp(13px, 0.95vw, 15px); line-height: 1.55; opacity: 0.8; }
.due__vai {
  margin-top: 1.4em;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

/* ==========================================================================
   100MAG — le schede (card bianche come quelle dell'anello)
   ========================================================================== */

.mag {
  background: var(--red);
  padding: clamp(5rem, 12vh, 10rem) var(--pad) clamp(4rem, 10vh, 8rem);
}
.mag__testa, .soci__testa, .rivista__testa {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  max-width: var(--misura);
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
}
.mag__tutti { grid-column: 9 / -1; grid-row: 1; justify-self: end; align-self: end; margin: 0; }

.schede {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.8rem);
  max-width: var(--misura);
  margin-inline: auto;
}
.schede--quattro { grid-template-columns: repeat(4, 1fr); }
.scheda__link {
  display: block;
  height: 100%;
  background: #fff;
  color: var(--ink);
  padding: 0.55rem 0.55rem 1.1rem;
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.scheda__link:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), 0 2px 5px rgba(0, 0, 0, 0.1); }
.scheda__foto {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 2px;
  background: #ece9e6;
}
.scheda__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scheda__meta {
  display: block;
  margin: 0.9rem 0.35rem 0.35rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}
.scheda__titolo {
  display: block;
  margin: 0 0.35rem;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
}

/* ==========================================================================
   ISCRIVITI — socio o volontario
   ========================================================================== */

.soci {
  background: var(--red);
  padding: clamp(5rem, 12vh, 10rem) var(--pad) clamp(5rem, 12vh, 9rem);
  border-top: 1px solid var(--ink);
}
.soci__corpo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  max-width: var(--misura);
  margin-inline: auto;
  align-items: start;
}
.soci__come { grid-column: 1 / 5; max-width: 30rem; }
.soci__fatti { margin: 0; border-top: 1px solid var(--ink); }
.soci__fatti > div { padding: 1.1rem 0; border-bottom: 1px solid var(--ink); }
.soci__fatti dt {
  margin: 0 0 0.35em;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.soci__fatti dd { margin: 0; font-size: clamp(15px, 1.15vw, 21px); font-weight: 500; line-height: 1.4; }
.soci__quota { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 4rem); }
.iban { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.05em; user-select: all; }
.soci__conto { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.08em; opacity: 0.65; }
.modulo--soci { grid-column: 5 / 13; max-width: none; grid-template-columns: repeat(2, 1fr); }
.modulo--soci .campo--largo { max-width: none; }

.modulo__gruppo {
  grid-column: 1 / -1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.modulo__campi {
  /* la legend qui sopra e' un float largo 100%: senza clear la griglia dei
     campi (che e' un nuovo contesto di formattazione) si mette DI FIANCO al
     float, cioe' fuori dallo schermo a destra */
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1.2rem, 3vw, 3rem);
  row-gap: clamp(1.2rem, 3vh, 2rem);
}
/* float + width: la legend smette di stare "nel bordo" e si comporta da blocco */
.modulo__gruppo legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
}
.modulo__gruppo legend small, .campo label small { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 400; letter-spacing: 0.06em; text-transform: none; opacity: 0.6; margin-left: 0.6em; }
.modulo__gruppo--scelta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.modulo__gruppo--scelta legend { width: 100%; margin-bottom: 0.6rem; }
.scelta { position: relative; cursor: pointer; }
.scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta span {
  display: inline-block;
  padding: 0.75em 1.5em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.scelta input:checked + span { background: var(--ink); color: var(--red); }
.scelta input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.campo textarea {
  display: block;
  width: 100%;
  padding: 0.35em 0 0.5em;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: clamp(15px, 1.15vw, 22px);
  resize: vertical;
}
.campo textarea:focus { outline: none; border-bottom-width: 3px; }
.campo input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 1.9em; }
.consenso {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9em;
  align-items: start;
  max-width: 60ch;
  font-size: clamp(12px, 0.85vw, 13.5px);
  line-height: 1.5;
  cursor: pointer;
}
.consenso input { width: 18px; height: 18px; margin: 0.1em 0 0; accent-color: var(--ink); }
.consenso a { border-bottom: 1px solid currentColor; }
.campo--nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo { position: relative; }
.modulo__esito { grid-column: 1 / -1; margin: 0; font-size: clamp(13px, 0.95vw, 15px); font-weight: 500; line-height: 1.5; min-height: 1.5em; }
.modulo__esito:empty { display: none; }
.modulo.is-inviato .modulo__invia { pointer-events: none; opacity: 0.45; }
.modulo.is-attesa .modulo__invia { opacity: 0.6; pointer-events: none; }
.campo input:invalid:not(:placeholder-shown), .modulo.is-controllato .campo input:invalid,
.modulo.is-controllato .campo textarea:invalid { border-bottom-color: var(--ink); border-bottom-width: 3px; }

/* ==========================================================================
   PAGINE INTERNE — la "pagina" (fondo carta) e la variante scura
   ========================================================================== */

body.pagina { background: var(--carta); color: var(--ink); }
body.pagina--scura { background: var(--black); color: #fff; }
.testata {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  padding: var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.stamp--ferma, .utility--ferma { opacity: 1; transform: none; }
.pagina--scura .stamp__mark { filter: brightness(0) invert(1); }
.pagina--scura .stamp, .pagina--scura .utility { color: #fff; }
.pagina--scura .menu { color: var(--red); }

/* --- Rivista (indice 100MAG) --------------------------------------------- */
.rivista { padding: clamp(8rem, 18vh, 13rem) var(--pad) clamp(5rem, 12vh, 9rem); }

/* --- Articolo -------------------------------------------------------------- */
.articolo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  max-width: var(--misura);
  margin-inline: auto;
  padding: clamp(8rem, 18vh, 13rem) var(--pad) clamp(5rem, 12vh, 9rem);
}
.articolo__testa {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin-bottom: clamp(2rem, 5vh, 4rem);
}
.articolo__occhiello { color: var(--red); }
.articolo__titolo {
  grid-column: 3 / 11;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 7.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  padding-top: 0.06em;
  overflow-wrap: anywhere;
}
.articolo__meta {
  grid-column: 3 / 11;
  grid-row: 2;
  margin: clamp(1.2rem, 3vh, 2rem) 0 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.articolo__meta span + time::before { content: "· "; }
.articolo__copertina { grid-column: 3 / 11; margin: 0 0 clamp(2rem, 5vh, 4rem); }
.articolo__copertina img { display: block; width: 100%; height: auto; border-radius: 2px; }
.articolo__corpo {
  grid-column: 3 / 9;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.62;
}
.articolo__corpo > :first-child { margin-top: 0; }
.articolo__corpo p { margin: 0 0 1.2em; }
.articolo__corpo h2, .articolo__corpo h3 {
  margin: 2em 0 0.7em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
}
.articolo__corpo h3 { font-size: clamp(1.15rem, 1.5vw, 1.8rem); }
.articolo__corpo a { color: var(--red); border-bottom: 1px solid currentColor; }
.articolo__corpo em { font-style: italic; }
.articolo__corpo blockquote { margin: 1.8em 0; padding-left: 1.4em; border-left: 3px solid var(--red); }
.articolo__corpo ul, .articolo__corpo ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.articolo__corpo li { margin-bottom: 0.4em; list-style: disc; }
.articolo__corpo ol li { list-style: decimal; }
.articolo__corpo .figura { margin: 2em 0; }
.articolo__corpo .figura img, .articolo__corpo > img { display: block; width: 100%; height: auto; border-radius: 2px; }
.articolo__corpo figcaption { margin-top: 0.6em; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.articolo__corpo .video { margin: 2em 0; }
.articolo__ritorno { grid-column: 3 / 11; margin: clamp(3rem, 7vh, 5rem) 0 0; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.articolo__ritorno a { border-bottom: 1px solid currentColor; }

.galleria { grid-column: 1 / -1; margin-top: clamp(3rem, 8vh, 6rem); border-top: 1px solid var(--ink); padding-top: clamp(1.5rem, 4vh, 3rem); }
.galleria__titolo {
  margin: 0 0 1.2em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
}
.galleria__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4;
  column-gap: 10px;
}
.galleria__lista li { break-inside: avoid; margin-bottom: 10px; }
.galleria__voce {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #e6e1d8;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 2px;
}
.galleria__voce img { display: block; width: 100%; height: auto; transition: transform 0.9s var(--ease); }
.galleria__voce:hover img { transform: scale(1.03); }

/* --- Il libro --------------------------------------------------------------- */
.libro { padding: clamp(8rem, 18vh, 13rem) var(--pad) clamp(5rem, 12vh, 9rem); max-width: var(--misura); margin-inline: auto; }
.libro__testa { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); margin-bottom: clamp(3rem, 7vh, 5rem); }
.libro__occhiello { color: var(--red); }
.libro__autrice { grid-column: 3 / 11; grid-row: 2; margin: 1.2em 0 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.libro__corpo { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.libro__copertina { grid-column: 1 / 5; margin: 0; max-width: 26rem; }
.libro__copertina img { display: block; width: 100%; height: auto; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12); }
.libro__copertina figcaption { margin-top: 1em; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
.libro__testo { grid-column: 5 / 11; max-width: 62ch; font-size: clamp(15px, 1.08vw, 18px); line-height: 1.6; }
.libro__testo p { margin: 0 0 1.2em; }
.libro__grande { font-size: clamp(1.25rem, 1.7vw, 2rem); font-weight: 500; line-height: 1.3; color: var(--red); margin-bottom: 1.4em !important; }
.libro__h2 { margin: 2em 0 0.6em; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2.8rem); line-height: 1; text-transform: uppercase; }
.libro__scheda { margin: 2em 0; border-top: 1px solid var(--ink); }
.libro__scheda > div { display: grid; grid-template-columns: 8em 1fr; gap: 1em; padding: 0.8em 0; border-bottom: 1px solid var(--ink); font-size: clamp(13px, 0.95vw, 15px); }
.libro__scheda dt { margin: 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.libro__scheda dd { margin: 0; }
.libro__scheda a { border-bottom: 1px solid currentColor; }
.libro__compra { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6em; }

/* --- Yallah (pagina scura) --------------------------------------------------- */
.yallah { padding: clamp(8rem, 18vh, 13rem) var(--pad) clamp(5rem, 12vh, 9rem); max-width: var(--misura); margin-inline: auto; }
.yallah__testa { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); margin-bottom: clamp(3rem, 7vh, 5rem); }
.yallah__occhiello { color: var(--red); }
.yallah__titolo { color: var(--red); }
.yallah__sotto { color: rgba(255, 255, 255, 0.72); }
.yallah__video { max-width: 100%; margin: 0 0 clamp(3rem, 7vh, 5rem); }
.yallah__dida { margin: 0.9em 0 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.yallah__corpo { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.yallah__parole { grid-column: 2 / 8; margin: 0; padding-left: clamp(1.2rem, 2.4vw, 2.4rem); border-left: 3px solid var(--red); font-size: clamp(16px, 1.2vw, 20px); line-height: 1.6; }
.yallah__parole p { margin: 0 0 1.2em; }
.yallah__parole footer { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.yallah__figura { grid-column: 9 / 12; margin: 0; }
.yallah__figura figcaption { margin-top: 0.7em; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.capitoli {
  list-style: none;
  margin: clamp(4rem, 10vh, 8rem) 0 0;
  padding: clamp(2rem, 5vh, 3.5rem) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
}
.capitolo__n { display: block; font-family: var(--font-display); font-size: clamp(2rem, 3vw, 4rem); line-height: 1; color: var(--red); margin-bottom: 0.4em; }
.capitolo__titolo { margin: 0 0 0.8em; font-size: clamp(14px, 1.05vw, 17px); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.capitolo p { margin: 0 0 0.8em; font-size: clamp(13px, 0.92vw, 15px); line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.yallah__afghane {
  margin-top: clamp(4rem, 10vh, 8rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: center;
}
.yallah__afghane-figura { grid-column: 1 / 7; margin: 0; }
.yallah__afghane-figura img { display: block; width: 100%; height: auto; }
.yallah__afghane-testo { grid-column: 8 / 12; }
.yallah__afghane-testo h2 { margin: 0.6em 0 0.6em; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 4rem); line-height: 0.95; text-transform: uppercase; }
.yallah__afghane-testo p { margin: 0 0 1.2em; font-size: clamp(14px, 1.02vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, 0.8); }
.yallah__afghane-testo .yallah__occhiello { grid-column: auto; }
.pagina--scura .bottone:hover { background: #fff; color: var(--black); border-color: #fff; }

/* --- 404 ------------------------------------------------------------------------ */
.vuota { min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-content: center; padding: clamp(8rem, 18vh, 13rem) var(--pad) clamp(5rem, 12vh, 9rem); max-width: var(--misura); margin-inline: auto; }
.vuota__occhiello { color: var(--red); }
.vuota__testo { grid-column: 3 / 8; grid-row: 2; margin: 2em 0 0; font-size: clamp(14px, 1.02vw, 17px); }
.vuota__azioni { grid-column: 3 / 11; grid-row: 3; display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 2em 0 0; }

/* ==========================================================================
   RESPONSIVE delle sezioni nuove
   ========================================================================== */

@media (max-width: 1024px) {
  /* hero: la striscia di card fra il titolo e il piede dell'hero */
  .hero { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .striscia {
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
    --cw: clamp(118px, 22vw, 168px);
    --veste: 1;
    margin-inline: calc(-1 * var(--pad));
    overflow: hidden;
    padding: 14px 0 18px;
  }
  .striscia__nastro { display: flex; gap: calc(var(--cw) * 0.14); width: max-content; animation: nastro 46s linear infinite; }
  .striscia .ring__slot { position: static; width: var(--cw); flex: none; will-change: auto; pointer-events: auto; }
  .striscia .ring__card { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); }
  .striscia:hover .striscia__nastro { animation-play-state: paused; }
  .cue, .disc { grid-row: 4; }
  /* il 100 fermo sopra le parole */
  .cento-fermo { display: block; width: min(100%, 60svh * 2.4); height: auto; margin: 0 auto clamp(2rem, 6vh, 4rem); }
  .parole__riga br { display: none; }   /* l'a capo e' pensato per la riga larga del desktop */
  .forma { flex-direction: column; justify-content: center; }

  .chi__testa, .voci__testa, .mag__testa, .soci__testa, .rivista__testa, .libro__testa, .yallah__testa, .vuota { display: block; }
  .chi__titolo, .voci__titolo, .mag__titolo, .soci__titolo, .rivista__titolo, .libro__titolo, .yallah__titolo, .vuota__titolo { margin: 0.3em 0 0.4em; font-size: clamp(2.6rem, 11vw, 7rem); }
  .chi__sotto, .voci__sotto, .mag__sotto, .soci__sotto, .rivista__sotto, .yallah__sotto { margin-top: 0; max-width: 60ch; }
  .voci__azioni, .mag__tutti, .libro__autrice, .vuota__testo, .vuota__azioni { margin-top: 1.4rem; }
  .chi__tre { display: block; }
  .chi__voce { padding-right: 0; margin-bottom: 2.4rem; }
  .chi__founder { display: block; }
  .chi__ritratto { margin-bottom: 1.8rem; max-width: 22rem; }
  .voci__lista { grid-template-columns: repeat(2, 1fr); }
  .schede--quattro, .schede { grid-template-columns: repeat(2, 1fr); }
  .soci__corpo { display: block; }
  .soci__come { max-width: none; margin-bottom: 2.6rem; }
  .articolo { display: block; }
  .articolo__testa { display: block; }
  .articolo__corpo, .articolo__copertina, .articolo__ritorno { max-width: 70ch; }
  .articolo__meta { margin-top: 1rem; }
  .galleria__lista { columns: 3; }
  .libro__corpo { display: block; }
  .libro__copertina { margin-bottom: 2.4rem; max-width: 20rem; }
  .libro__testo { max-width: 70ch; }
  .yallah__corpo { display: block; }
  .yallah__parole { margin-bottom: 2.4rem; }
  .yallah__figura { max-width: 22rem; }
  .capitoli { grid-template-columns: repeat(2, 1fr); }
  .yallah__afghane { display: block; }
  .yallah__afghane-figura { margin-bottom: 1.6rem; }
}

@keyframes nastro { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (max-width: 1024px) {
  .due { grid-template-columns: 1fr; }
  .due__porta + .due__porta { border-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.16); }
  .due__porta { padding-inline: var(--pad); }
}
@media (max-width: 860px) {
  .modulo--soci { grid-template-columns: 1fr; }
  .modulo__campi { grid-template-columns: 1fr; }
  .menu__voci a { font-size: clamp(1.8rem, 6vh, 3.6rem); }
}

@media (max-width: 560px) {
  .voci__lista { grid-template-columns: 1fr; }
  .schede--quattro, .schede { grid-template-columns: 1fr; }
  .galleria__lista { columns: 2; }
  .capitoli { grid-template-columns: 1fr; }
  .due__porta { grid-template-columns: 1fr; }
  .due__figura { max-width: 16rem; }
  .libro__scheda > div { grid-template-columns: 1fr; gap: 0.3em; }
}

@media (prefers-reduced-motion: reduce) {
  .striscia__nastro { animation: none; flex-wrap: wrap; width: auto; }
  .menu { transition: none; }
}