/* =========================================================
   Pagina progetto — Eppoi
   Riferimento: assets/projects/Eppoi/XL.png (canvas Figma 1728,
   esportato a 2,81192x: per leggere una misura sul PNG, dividere per
   2,81192). Tutte le misure qui sono px Figma = px CSS al tier XL.

   Spec: docs/superpowers/specs/2026-09-07-pagina-eppoi-design.md
   ========================================================= */

/* ---------- La palette di Eppoi ----------
   Sta qui e non in tokens.css di proposito: sono i colori del PROGETTO,
   non del sito. Il giorno che si aggiunge la seconda pagina progetto,
   quella avra' i suoi, e i due elenchi non devono mescolarsi.
   Campionati dalla tavola e dagli SVG in assets/projects/Eppoi/. */
.eppoi {
  --eppoi-navy: #14284B;
  --eppoi-blue: #2A67AC;
  --eppoi-magenta: #B02D6B;
  --eppoi-yellow: #F2C744;
  /* Due gialli, e non e' una svista. #F2C744 e' il giallo delle
     SUPERFICI (il riquadro "Everyday situations", la barra di Four
     decisions): li' fa da fondo e sopra ci va del testo scuro. Come
     TESTO su bianco lo stesso giallo fa 1,61:1, illeggibile a chi ci
     vede poco: la statistica 41% e' l'unico posto dove serve.

     ATTENZIONE, il ripiego non basta: --eppoi-yellow-ink migliora molto
     (1,61 -> 2,20:1) ma NON arriva alla soglia. Il 41% e' 60px
     grassetto, cioe' testo grande, che chiede 3:1. Portarcelo davvero
     vorrebbe dire scendere fino a un bruno-oliva che non e' piu' il
     giallo di Eppoi, e a quel punto non e' piu' una correzione tecnica
     ma una scelta sull'identita' del progetto. La questione resta
     aperta e la decide il committente: o un giallo piu' scuro, o il
     numero su un fondo giallo invece che in giallo su bianco. */
  --eppoi-yellow-ink: #D9A800;
  --eppoi-grey: #5A6473;
  --eppoi-meta: #666666;

  /* I tre chiari della sezione "Two ways in", le uniche card a fondo
     navy della pagina. Stanno qui e non inline nelle regole perche'
     ognuno serve in piu' punti — l'etichetta in tre, il bordo e il testo
     in due ciascuno — e un chiaro sul navy che si scolla dagli altri si
     nota subito. I due colori dei riquadri --giallo e --grigio restano
     invece inline: quelli sono davvero di un punto solo, e portano
     accanto il conto del contrasto che li giustifica. */
  --eppoi-navy-etichetta: #8FA5C4;
  --eppoi-navy-bordo: #2E4468;
  --eppoi-navy-testo: #B9C8DC;

  /* La colonna di prosa. Nella tavola: x 512..1222 dentro una colonna
     che va da 320 a 1408, cioe' 192px di rientro e 710px di larghezza.
     Scritti in percentuale del contenitore e non in px, cosi' agli altri
     tier si rimpiccioliscono da soli e questa regola non ha bisogno di
     una @media propria. */
  --eppoi-prosa-rientro: 17.6%;
  --eppoi-prosa-larghezza: 65.3%;

  /* Il bordo della colonna piena (1088px a XL, i margini sotto), calcolato
     una volta sola qui e non dentro .eppoi-striscia: serve anche alla
     barra dei tasti (.eppoi-striscia-nav), che e' un elemento SEPARATO
     dalla striscia e non erediterebbe una custom property dichiarata li'
     dentro. Il valore risolto e' identico nei due punti di consumo: sono
     entrambi figli diretti di main.eppoi, quindi il 100% del calc() si
     misura sullo stesso contenitore. */
  --eppoi-colonna-bordo: max(
    var(--grid-margin),
    calc((100% - var(--container)) / 2)
  );

  color: var(--eppoi-navy);
}

.eppoi-prosa {
  margin-inline-start: var(--eppoi-prosa-rientro);
  max-width: var(--eppoi-prosa-larghezza);
}

/* page.css riserva a main lo spazio della navbar fissa (--nav-clearance,
   120px a XL): la barra sta fuori dal flusso e senza quel padding il
   contenuto le finirebbe sotto. Qui la navbar non c'e' — vedi la
   decisione 2 della spec, "guscio minimo: solo il pill Back" — e quello
   spazio diventa solo un buco in cima alla pagina.

   E anche in fondo: sotto i 600px la navbar del sito passa in basso, e
   page.css sposta la stessa riserva su padding-bottom. Misurato a 390px
   prima di questa riga: 112px di vuoto sotto l'ultima sezione, per una
   barra che qui non c'e' ne' sopra ne' sotto. Servono tutti e due gli
   zeri, uno per ciascuna delle due posizioni che la navbar puo' avere. */
main.eppoi {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- Ritmo verticale ----------
   Le sezioni sono distanziate come il resto del sito: --section-gap di
   page.css, che vale 64 / 96 / 128px per tier. .site-section lo mette
   come padding; qui serve come margine, cosi' fra due sezioni contigue
   i due margini collassano in uno invece di sommarsi. */
.eppoi-blocco {
  padding-block: 0;
  margin-block: var(--section-gap);
}

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

/* Misure del pill Back, isolate qui perche' servono in due posti che non
   si toccano a vicenda nel foglio: la posizione fissa del pill piu' sotto
   e il padding-top di .eppoi-testata che gli ridà lo spazio nel flusso.
   --eppoi-back-altezza e' MISURATA sulla pagina resa (getBoundingClientRect,
   45px a tutti e quattro i tier: padding verticale --space-3 x2 piu' la
   riga del font body, che con --line-height-base:normal non e' calcolabile
   a priori in CSS puro) — non dedotta, perche' "normal" dipende dal
   font e dal browser. */
.eppoi {
  --eppoi-back-altezza: 45px;

  /* Il pill sta nella STESSA fascia della navbar delle altre pagine —
     richiesta diretta del committente. Non un valore copiato a mano:
     --nav-inset e --nav-height arrivano da css/page.css, che questa
     pagina carica gia', quindi il pill segue da solo i breakpoint della
     navbar (l'inset cresce a --space-6 da 1280px in su, l'altezza cala
     a 56px da 600px) senza doverli ripetere qui.

     Si allineano i CENTRI, non i bordi superiori: navbar e pill sono
     alti diverso (56 contro 45 a XL), e allineando i "top" il pill
     sembrerebbe piu' alto di 5-6px passando da una pagina all'altra.
     Col centro in comune le due fasce coincidono davvero — a 1280+ il
     centro cade a 60px in entrambe le pagine.

     Sotto i 600px la navbar sta in BASSO (css/page.css, .site-nav:
     bottom invece di top): li' non c'e' niente in alto con cui
     allinearsi, e la formula vale comunque come "dove starebbe la
     navbar se fosse in cima" — un respiro sensato, non un caso. */
  --eppoi-back-inset: calc(
    var(--nav-inset) + (var(--nav-height) - var(--eppoi-back-altezza)) / 2
  );

  /* Il titolo NON segue il pill. Prima le due misure erano la stessa
     cosa perche' il pill era l'unico riferimento in cima alla pagina;
     ora che il pill si e' alzato per raggiungere la navbar, tenerle
     legate porterebbe su anche l'h1 — che invece deve restare dove lo
     mette la tavola (misurato: 157px dall'alto). Da qui due variabili
     distinte per due fatti distinti: dove sta il pill (la navbar) e
     dove sta il titolo (la tavola). Il valore e' scritto come la somma
     che lo produceva, non come "157px", cosi' resta leggibile da dove
     viene: il respiro della tavola sopra il pill, il pill, lo stacco
     verso il titolo. */
  --eppoi-testata-clearance: calc(
    var(--space-7) + var(--eppoi-back-altezza) + var(--space-8)
  );
}

.eppoi-testata {
  /* Prima: --space-7 (47px dalla tavola) perche' il pill viveva nel
     flusso e portava lui stesso lo stacco verso il titolo (margin-bottom
     --space-8). Ora il pill e' fixed (vedi .eppoi-back) e non occupa piu'
     spazio qui: --eppoi-back-clearance riproduce lo stesso totale
     (inset + altezza pill + --space-8) cosi' il titolo cade esattamente
     dove cadeva prima — misurato: invariato, h1 a 157px dall'alto a ogni
     tier. Il basso resta a 0: il distacco verso l'hero lo da' il
     margin-top di .eppoi-blocco (--section-gap). */
  padding-block: var(--eppoi-testata-clearance) 0;
}

/* ---------- Il velo sfocato dietro il pill ----------
   Senza, scorrendo, il contenuto della pagina (soprattutto le strisce
   orizzontali, che passano proprio sotto la testata) arriva a toccare
   il pill da dietro: leggibile ma sporco, niente separa "il controllo
   fisso" dal "contenuto che scorre".

   La RICETTA (struttura a cinque strati, sfocature, maschere, tinta) e'
   in css/page.css sotto .velo-vetro — condivisa con .site-nav-velo di
   index.html, stesso identico effetto dietro la navbar. Qui resta solo
   cio' che e' specifico di QUESTO posto: dove sta, quanto e' alto, a
   che quota nell'impilamento. .eppoi-velo non dichiara --velo-direzione:
   il pill sta sempre in alto (niente equivalente del tier mobile della
   navbar, dove il controllo scende in basso), quindi va bene il
   ripiego "to bottom" di .velo-vetro.

   L'altezza copre l'inset sopra il pill, il pill stesso, e altrettanto
   inset sotto (dove tutto muore in trasparente): simmetrica, non un
   numero a se' — --eppoi-back-inset e --eppoi-back-altezza sono gia' le
   uniche due misure che contano per questa zona (vedi sopra). */
.eppoi-velo {
  inset: 0 0 auto 0;
  height: calc(var(--eppoi-back-inset) * 2 + var(--eppoi-back-altezza));
  /* Sotto il pill (200) e sotto l'ingrandimento (500), sopra tutto il
     resto — stessa fascia di .eppoi-back qui sopra, un passo indietro. */
  z-index: 199;
}

/* Il pill Back e' l'unica cosa centrata della pagina: nella tavola sta
   in cima al centro, dove starebbe la navbar sulle altre pagine — e come
   una navbar deve restare raggiungibile mentre si scorre: prima era
   position:static e spariva con la pagina, il difetto segnalato dal
   committente ("il tasto back deve essere sempre ancorato in alto").
   fixed, non sticky: sticky si ancorerebbe al PRIMO scroll dentro
   .eppoi-testata, che e' alta solo quanto il pill stesso — sparirebbe
   comunque un istante dopo. */
.eppoi-back {
  position: fixed;
  top: var(--eppoi-back-inset);
  /* Centrato in orizzontale senza toccare width/left espliciti: un
     elemento fixed a display:block con left/right opposti e margin-inline
     auto si centra esattamente come farebbe nel flusso normale. */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  /* Sopra il contenuto normale della pagina (le tre strisce comprese, che
     non dichiarano un proprio z-index e quindi stanno all'impilamento di
     default) ma SOTTO l'ingrandimento (.eppoi-lightbox, z-index:500 piu'
     sotto in questo file): quando il lightbox e' aperto js/eppoi.js rende
     inert tutta .eppoi, pill compreso, ma inert non cambia l'impilamento
     visivo da solo — se il pill stesse sopra il lightbox resterebbe
     visibile sopra un pannello che dovrebbe coprire tutto, un elemento
     dietro un overlay che sembra sopra e' la stessa famiglia di buco
     descritta nel brief. 200 sta comodo sotto 500 e sopra tutto il resto
     (nessun'altra regola di questo foglio dichiara uno z-index positivo). */
  z-index: 200;
  padding: var(--space-3) var(--space-6);
  border-radius: 999px;
  background: var(--color-grey-3);
  color: var(--color-white);
  text-decoration: none;
  font: var(--font-weight-regular) var(--font-size-body) /
        var(--line-height-base) var(--font-family-base);
  /* Micro-interazione (emil-design-eng, CLAUDE.md): non c'era nella
     tavola — le tavole sono statiche — ma e' l'unico elemento
     interattivo di tutta la testata e senza risposta al passaggio
     sembra inerte. Stessa grammatica di .btn (button.css): solo
     transform/box-shadow, mai proprieta' che fanno layout. Il colore
     resta lo stesso (--color-grey-3 non ha una variante piu' scura in
     tokens.css, e non ne aggiungo una per un solo pixel di pillola). */
  transition:
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .eppoi-back:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.35);
  }
}

/* Press: scende sotto la quota di riposo e la transizione si accorcia,
   cosi' il feedback e' immediato — il rientro resta il timing normale. */
.eppoi-back:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 110ms;
}

.eppoi-back:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

/* Rientro e larghezza li porta la classe .eppoi-prosa (nel markup, non
   ridichiarata qui): il titolo e la riga meta la portano entrambi. */
.eppoi-titolo {
  /* Solo il margine di blocco: quello inline lo mette .eppoi-prosa
     (margin-inline-start). Uno shorthand "margin: 0" azzererebbe anche
     quello, perche' la stessa proprieta' fisica sottostante e' scritta
     due volte e vince l'ultima regola in ordine di sorgente. */
  margin-block: 0;
  font-size: var(--font-size-title1);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  /* La tavola stringe la spaziatura solo sul corpo display. Misurato
     sulle due righe del titolo: 602,8 e 689,9px contro i 630,5 e 723,5
     che il browser rende senza tracking — il 4,5% in meno, che a 60px
     fa -0,022em. Non e' un vezzo tipografico: senza, la seconda riga
     chiede 723px in una colonna da 710 e il titolo va a capo su TRE
     righe invece delle due della tavola.

     Solo qui: a 16px lo scarto fra tavola e browser e' un millesimo, a
     32px l'1,3%. Portare questo tracking a tutta la pagina sarebbe
     adattarsi al rumore di misura. Il sito non usa letter-spacing da
     nessun'altra parte: e' un'eccezione dichiarata, non un'abitudine. */
  letter-spacing: -0.022em;
}

.eppoi-meta {
  /* Sopra lo spazio dal titolo, sotto zero: un <p> ha un margine
     inferiore di default (~1em) che qui va tolto esplicitamente, o il
     browser lo rimette da solo. L'indentazione (margin-inline-start)
     resta a .eppoi-prosa: uno shorthand "margin" a piu' valori
     toccherebbe anche i lati, azzerando quella (stessa proprieta'
     fisica, vince l'ultima regola in ordine di sorgente) — margin-block
     tocca solo l'asse verticale e la lascia stare. */
  margin-block: var(--space-5) 0;
  font: var(--font-weight-regular) var(--font-size-body) /
        1.45 var(--font-family-base);
  color: var(--eppoi-meta);
}

/* ---------- Hero ----------
   Colonna piena: nella tavola va da 320 a 1408, cioe' esattamente
   --container. La larghezza gliela da' .site-section, qui serve solo
   dirgli di riempirla. */
.eppoi-hero {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* ---------- Prosa ---------- */
.eppoi-blocco p {
  /* margin-block, non lo shorthand: questa regola (specificita' 0,1,1)
     prende QUALUNQUE <p> discendente di .eppoi-blocco, comprese
     l'occhiello e le frasi che portano anche .eppoi-prosa (0,1,0) — e con
     lo shorthand il margin-left:0 scritto qui vincerebbe per specificita',
     azzerando il margin-inline-start che da' il rientro. */
  margin-block: 0 var(--space-4);
  /* Qui c'era lo shorthand "font", ed e' stato la trappola di tutto il
     foglio: essendo 0,1,1 batteva ogni classe sola (0,1,0), e siccome
     "font" scrive ANCHE font-size e font-weight si portava via corpo e
     peso di qualunque <p> che provasse a darsene di suoi — in silenzio,
     perche' "color" lo shorthand non lo scrive e il paragrafo restava del
     colore giusto, solo piatto. Sette volte in dodici task.

     Verificato contro tokens.css e page.css: di quello shorthand l'unica
     cosa che arrivava davvero e' il line-height. font-family la da' gia'
     body (page.css); font-weight 400 e' il default; --font-size-body vale
     16px sia nella base sia nell'override mobile, quindi a nessun tier
     cambiava qualcosa. Restano in cascata solo line-height e margin-block,
     due proprieta' in cui una perdita si vede a occhio.

     I prefissi difensivi sparsi per il foglio restano necessari: proteggono
     ancora margini e interlinea. Ma da qui in avanti — e per la seconda
     pagina progetto, che erediterebbe questo foglio come modello — una
     classe non perde piu' la propria tipografia per averlo scritto su un
     <p>. Il guardiano e' test_ogni_proprieta_dichiarata_arriva_davvero. */
  line-height: 1.45;
}

/* Prefissato con .eppoi-blocco (0,2,0): l'occhiello e' un <p>, e da sola
   ".eppoi-occhiello" e' 0,1,0 — perderebbe contro ".eppoi-blocco p"
   (0,1,1) qui sopra. Da quando quella regola ha perso lo shorthand
   "font" (vedi il suo commento), il font-size non e' piu' in gioco: qui
   sopra rimane in ballo solo "margin-bottom", che collide con l'analogo
   "margin-block-end" della regola base — 16px invece dei 12px voluti,
   in silenzio, perche' colore e taglia arriverebbero comunque giusti. */
.eppoi-blocco .eppoi-occhiello {
  font-size: var(--font-size-caption);
  color: var(--eppoi-grey);
  margin-bottom: var(--space-3);
}

.eppoi-sezione__titolo {
  /* NON .site-section__title di page.css: quello e' centrato, e qui
     tutti i titoli sono allineati a sinistra sulla colonna di prosa.
     margin-block e non lo shorthand "margin": l'elemento porta anche
     .eppoi-prosa, che indenta con margin-inline-start — uno shorthand
     scriverebbe anche margin-left, stessa proprieta' fisica, e vincendo
     per ordine di sorgente azzererebbe il rientro. */
  margin-block: 0 var(--space-4);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--eppoi-navy);
}

/* Stesso prefisso, stessa ragione, e qui il danno si vedeva a occhio: la
   frase-tesi della pagina ("How do you give a parent the structure...")
   e' un <p>, e a 0,1,0 perdeva corpo e peso contro ".eppoi-blocco p",
   finendo resa a 16px regolare invece di 40px grassetto. Il nero
   arrivava, quindi sembrava un paragrafo qualunque e non una frase persa.
   Questo era il bug prima che ".eppoi-blocco p" perdesse lo shorthand
   "font": oggi, senza il prefisso, il rischio e' solo il margin-bottom
   (16px invece di 48) — la storia resta perche' e' il motivo per cui il
   prefisso c'e', ma non e' piu' la posta in gioco attuale. */
.eppoi-blocco .eppoi-frase {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: var(--space-7);
}

/* Prefissata anche questa, e non solo per la cascata di ".eppoi-blocco p":
   il modificatore deve battere ANCHE la regola base qui sopra, che ora e'
   0,2,0. Stessa specificita', quindi vince perche' scritta dopo — l'ordine
   fra base e modificatore va tenuto. */
.eppoi-blocco .eppoi-frase--minore {
  font-size: var(--font-size-h4);
  color: var(--eppoi-navy);
}

/* ---------- La giornata diventa storia ---------- */
.eppoi-giornata {
  /* margin-block, non lo shorthand: questo <dl> porta anche .eppoi-prosa
     (margin-inline-start), che uno shorthand "margin" azzererebbe. */
  margin-block: var(--space-6) 0;
}

.eppoi-giornata > div {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.eppoi-giornata dt {
  color: var(--eppoi-grey);
}

.eppoi-giornata dd {
  margin: 0;
  color: var(--eppoi-navy);
}

/* ---------- Four decisions ---------- */
.eppoi-swot {
  /* margin-block, non lo shorthand: questo <blockquote> porta anche
     .eppoi-prosa (margin-inline-start), che uno shorthand "margin"
     azzererebbe. Il browser da' al blockquote un margine inline di
     default (40px per lato): a destra va comunque tolto, a sinistra
     lo decide .eppoi-prosa e non va toccato qui. */
  margin-block: 0 var(--space-7);
  margin-inline-end: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--eppoi-yellow);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  color: var(--eppoi-navy);
}

.eppoi-decisione {
  padding-block: var(--space-6);
  border-top: 2px solid var(--eppoi-navy);
}

.eppoi-decisione h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--eppoi-navy);
}

.eppoi-decisione dl {
  display: grid;
  grid-template-columns: 15% 85%;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.eppoi-decisione dt {
  color: var(--eppoi-grey);
  font-size: var(--font-size-body-small);
}

.eppoi-decisione dd {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: 1.45;
}

/* ---------- Research ---------- */
/* "Research" e' l'UNICO titolo di sezione grande. Misurato sulla tavola:
   175,7px di larghezza, che a 32px sarebbero 144,7 e a 40px 180,8 — il
   secondo, entro lo 0,6%. Gli altri sei titoli sono 32px (scarti fra
   0,4% e 1,3%), quindi la regola generale resta quella e questa e'
   l'eccezione, non il contrario. */
.eppoi-sezione__titolo--grande {
  font-size: var(--font-size-h2);
}

.eppoi-statistiche {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-block: var(--space-7) var(--space-5);
}

/* Selettori prefissati con ".eppoi-statistiche" / ".eppoi-ricerca" e non
   le sole classi BEM: sono tutti <p>, e ".eppoi-blocco p" qui sopra ha
   specificita' 0,1,1, che batte una singola classe (0,1,0) a prescindere
   dall'ordine nel file. Da quando quella regola ha perso lo shorthand
   "font" (vedi il suo commento), font-size e font-weight non sono piu'
   in gioco — restano margine e interlinea: senza il prefisso il NUMERO
   avrebbe line-height 1.45 invece di 1 (un 60px molto piu' alto e
   spaziato del voluto) e margin-bottom 16px invece di 8; la NOTA (il
   testo piccolo sotto, es. "68% at least moderately") avrebbe
   margin-top 0 invece di 8px e margin-bottom 16px invece di 0. */
.eppoi-statistiche .eppoi-statistica__numero {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-title1);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  /* Le cifre non devono cambiare larghezza mentre contano: senza
     questo il blocco si allarga e si stringe a ogni fotogramma. */
  font-variant-numeric: tabular-nums;
}

.eppoi-statistiche .eppoi-statistica__testo {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: 1.35;
  color: var(--eppoi-navy);
}

.eppoi-statistiche .eppoi-statistica__nota {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-caption);
  color: var(--eppoi-grey);
}

.eppoi-statistica--blu .eppoi-statistica__numero { color: var(--eppoi-blue); }
.eppoi-statistica--magenta .eppoi-statistica__numero { color: var(--eppoi-magenta); }
/* Giallo da TESTO, non da superficie: vedi la nota sui due gialli. */
.eppoi-statistica--giallo .eppoi-statistica__numero { color: var(--eppoi-yellow-ink); }

.eppoi-ricerca .eppoi-statistiche__fonte {
  font-size: var(--font-size-body-small);
  color: var(--eppoi-grey);
}

/* ---------- La card bianca ----------
   Stessa forma delle card del sito: raggio e ombra dai token, niente
   valori nuovi. */
.eppoi-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ---------- Citazioni ---------- */
.eppoi-citazioni {
  position: relative;
  /* Le virgolette escono dagli angoli opposti, come nella tavola: se la
     card le tagliasse, sparirebbero senza che nessuno se ne accorga. */
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-7);
  padding: var(--space-8) var(--space-7);
}

.eppoi-citazione {
  margin: 0;
  text-align: center;
}

/* Prefissato con .eppoi-citazioni (0,2,1): senza, ".eppoi-citazione p"
   e' anch'essa 0,1,1 (una classe piu' un tipo, che conta) — pareggia con
   ".eppoi-blocco p" e vincerebbe solo per ordine di sorgente, essendo
   scritta dopo. Una vittoria cosi' e' fragile: basta riordinare il
   foglio, senza toccare il selettore, perche' si rompa in silenzio. Il
   prefisso vince nettamente e non dipende dall'ordine. */
.eppoi-citazioni .eppoi-citazione p {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--eppoi-magenta);
}

.eppoi-citazione cite {
  font-style: normal;
  font-size: var(--font-size-body-small);
  /* Niente opacita': lo 0,75 che c'era qui smorzava il magenta a un
     effettivo #C46290, cioe' 3,84:1 su bianco a 14px regolari — sotto la
     soglia AA di 4,5. Il colore pieno fa 6,12:1. L'attribuzione resta
     comunque piu' leggera della citazione: quella e' 22px grassetto,
     questa 14px normale, e la gerarchia la fanno gia' corpo e peso. */
  color: var(--eppoi-magenta);
}

.eppoi-citazioni__segno {
  position: absolute;
  font-size: 160px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  /* Contorno e non pieno: nella tavola sono due virgolette disegnate,
     non stampate. */
  color: transparent;
  -webkit-text-stroke: 3px var(--eppoi-magenta);
  opacity: 0.35;
}

.eppoi-citazioni__segno--apre {
  top: calc(var(--space-8) * -1);
  left: var(--space-6);
}

.eppoi-citazioni__segno--chiude {
  bottom: calc(var(--space-8) * -1);
  right: var(--space-6);
}

/* ---------- Mappa a quadranti ----------
   Niente .eppoi-card qui, di proposito. L'SVG e' gia' una card completa
   per conto suo — verificato nel file (Frame 1115.svg): un <rect
   fill="white"> con angoli arrotondati e un filtro d'ombra, disegnati
   dentro l'immagine stessa, non aggiunti da questo foglio. Wrapparla
   in un'altra card (sfondo/raggio/ombra di .eppoi-card, piu' un
   padding) la incorniciava due volte: un rettangolo bianco piu' piccolo
   dentro un rettangolo bianco piu' grande, il doppio bordo visto sulla
   pagina resa e assente nella tavola — li' il diagramma riempie la
   sezione a bordo a bordo. Il div resta solo un contenitore di
   posizionamento; l'aspetto lo porta l'immagine. */
.eppoi-quadranti {
  margin-bottom: var(--section-gap);
}

.eppoi-quadranti img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Personas ----------
   Due card larghe uguali. Nella tavola: 482px l'una con 125px di
   distacco, che su una colonna da 1088 fa 2x482+125 = 1089. Scritte
   come 1fr 1fr piu' un gap in proporzione, cosi' il rapporto regge a
   ogni larghezza invece che solo a 1728. */
.eppoi-personas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11.5%;  /* 125 / 1088 */
  margin-bottom: var(--section-gap);
  align-items: start;
}

.eppoi-persona {
  /* Un item di grid non si restringe sotto il proprio contenuto minimo
     per default (min-width: auto): una stringa senza spazi piu' lunga
     della meta' colonna (un URL, una parola composta) allargherebbe
     questa card oltre 1fr e con lei tutta la riga, portando la pagina
     a scorrere di lato. Il testo di oggi non ci arriva, ma e' la stessa
     classe di rischio del test che tiene d'occhio lo scorrimento
     orizzontale su tutta la pagina: costa una riga, blinda contro un
     testo futuro piu' lungo. */
  min-width: 0;
  padding: var(--space-7) var(--space-6);
  /* Micro-interazione (emil-design-eng, CLAUDE.md): sono card come quelle
     del resto del sito (.eppoi-card condivide var(--shadow-card) con
     .jurney__card in my-jurney.css) e qui si comportano come loro — stessa
     ombra di riposo, stesso approfondimento all'hover (0 20px 44px, 0.16),
     preso di peso da la' per restare coerenti invece di inventare una terza
     coppia di valori. Solo box-shadow, non transform: qui non c'e' un
     sollevamento nella tavola e la sezione ha gia' due card fianco a fianco
     — un tilt o uno scale avrebbero spostato la card sopra sotto il dito,
     un'aggiunta di moto che il brief chiede di non fare fuori dai quattro
     punti elencati. Un cambio di ombra e' un cambio di colore/stato, non
     uno spostamento: ease, non la glide pesata di .eppoi-back e delle
     strisce, che quella la usano per accompagnare un transform.

     La dichiarazione di "transition" NON sta qui: questa regola e' (0,1,0)
     e perde contro ".js [data-reveal]" di page.css (0,2,0), che riscrive
     "transition" per intero — a differenza di margin/font di piu' sopra in
     questo file, "transition" non e' additiva: non si "aggiunge" una
     proprieta' a un'altra dichiarazione, si sostituisce l'intero elenco.
     Un pareggio di specificita' funzionerebbe solo perche' eppoi.css e'
     caricato dopo page.css nell'HTML, la stessa fragilita' gia' scartata
     al Task 5 (vedi contesto-comune.md). Sta invece qui sotto, su un
     selettore a tre classi che vince in modo netto. */
}

/* (0,3,0): batte nettamente ".js [data-reveal]" (0,2,0) di page.css, che
   altrimenti riscriverebbe "transition" azzerando l'ombra in hover — la
   stessa card e' anche un elemento che entra allo scroll (data-reveal), e
   quella regola le impone gia' la sua transizione su opacity/transform.
   opacity e transform vanno ripetuti qui, non lasciati a page.css: non e'
   una svista, e' il prezzo di riscrivere "transition" invece di poterla
   estendere. Presi dai token (--reveal-duration, --page-ease-out) e non
   copiati come "700ms"/la cubic-bezier per lettera, cosi' restano
   sincronizzati con page.css da soli se quei token cambiano. */
.eppoi-personas .eppoi-card.eppoi-persona {
  transition:
    opacity var(--reveal-duration) var(--page-ease-out),
    transform var(--reveal-duration) var(--page-ease-out),
    box-shadow 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .eppoi-persona:hover {
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
  }
}

.eppoi-persona__disegno {
  display: block;
  height: 190px;
  width: auto;
  margin: 0 auto var(--space-6);
}

.eppoi-persona h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Prefissate con .eppoi-persona (0,2,0) e non le sole classi BEM (0,1,0):
   ".eppoi-blocco p" qui sopra e' 0,1,1 (una classe piu' un tipo, che
   conta come cifra), e una classe sola perde contro di lei A PRESCINDERE
   dall'ordine nel foglio — la stessa trappola del Task 4 sulle
   statistiche, qui su motto/anagrafica/verdetto invece che sui numeri.
   Da quando quella regola ha perso lo shorthand "font" (vedi il suo
   commento), font-weight e font-size non sono piu' in gioco: restano
   solo i margini. Senza il prefisso il motto avrebbe margin-bottom 16px
   invece di 8, l'anagrafica 16px invece di 24, e il verdetto 16px
   invece di 0 — tutto in silenzio, perche' un <p> che perde la sua
   regola resta un paragrafo normale, non si rompe visibilmente. Due
   classi (0,2,0) battono una classe piu' un tipo (0,1,1) sulla seconda
   cifra, quindi qui l'ordine nel foglio non conta piu'. */
.eppoi-persona .eppoi-persona__motto {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.eppoi-persona .eppoi-persona__anagrafica {
  color: var(--eppoi-grey);
  font-size: var(--font-size-body-small);
  margin-bottom: var(--space-5);
}

.eppoi-persona__scheda {
  display: grid;
  grid-template-columns: 25% 75%;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  font-size: var(--font-size-body-small);
}

.eppoi-persona__scheda dt { font-weight: var(--font-weight-bold); }
.eppoi-persona__scheda dd { margin: 0; color: var(--eppoi-grey); }

.eppoi-persona .eppoi-persona__verdetto {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--space-2);
  font-size: var(--font-size-body-small);
  color: var(--eppoi-navy);
}

/* Il colore e' l'identita' della persona: Serena magenta, la coppia blu.
   Lo portano il nome, l'attrito e il riquadro del verdetto. */
.eppoi-persona--magenta h3,
.eppoi-persona--magenta .eppoi-persona__attrito { color: var(--eppoi-magenta); }
.eppoi-persona--magenta .eppoi-persona__verdetto { background: #FBEFF4; }

.eppoi-persona--blu h3,
.eppoi-persona--blu .eppoi-persona__attrito { color: var(--eppoi-blue); }
.eppoi-persona--blu .eppoi-persona__verdetto { background: #EEF3F9; }

/* ---------- The system ---------- */
.eppoi-sistema {
  display: grid;
  /* Tre colonne e due frecce: le frecce prendono la larghezza che
     serve, le colonne si dividono il resto in parti uguali. */
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--section-gap);
}

.eppoi-sistema__colonna h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--eppoi-navy);
}

/* Prefissato con .eppoi-sistema (0,2,0): da solo ".eppoi-sistema__sottotitolo"
   e' una classe sola (0,1,0), che perde contro ".eppoi-blocco p" (0,1,1) a
   prescindere dall'ordine nel foglio — la stessa trappola di
   .eppoi-statistica__numero. Da quando quella regola ha perso lo shorthand
   "font", il font-size resta suo comunque: senza il prefisso il rischio e'
   solo il margin-bottom, che tornerebbe a 16px invece di 24, in silenzio. */
.eppoi-sistema .eppoi-sistema__sottotitolo {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-body-small);
  color: var(--eppoi-grey);
}

.eppoi-sistema__colonna img {
  display: block;
  width: 100%;
  height: auto;
}

/* Stesso motivo del sottotitolo qui sopra: ".eppoi-sistema__didascalia" da
   sola e' 0,1,0 e perderebbe contro ".eppoi-blocco p" (0,1,1). */
.eppoi-sistema .eppoi-sistema__didascalia {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--font-size-body-small);
  line-height: 1.35;
  color: var(--eppoi-navy);
}

.eppoi-sistema__freccia {
  font-size: var(--font-size-h5);
  color: var(--eppoi-navy);
  align-self: center;
}

/* ---------- Two ways in ---------- */
.eppoi-modo {
  background: var(--eppoi-navy);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  color: var(--color-white);
  margin-top: var(--section-gap);
}

/* Prefissato con .eppoi-modo (0,2,0): da solo ".eppoi-modo__occhiello" e'
   una classe sola (0,1,0), che perde contro ".eppoi-blocco p" (0,1,1) a
   prescindere dall'ordine nel foglio — la stessa trappola del sottotitolo
   di .eppoi-sistema. Da quando quella regola ha perso lo shorthand "font",
   il font-size resta suo comunque: senza il prefisso il rischio e' solo
   il margin-bottom, che tornerebbe a 16px invece di 8, in silenzio. */
.eppoi-modo .eppoi-modo__occhiello {
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-caption);
  color: var(--eppoi-navy-etichetta);
}

.eppoi-modo__titolo {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
}

.eppoi-modo__passi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.eppoi-modo__passo {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* La freccia sta fra un passo e il successivo, quindi appartiene allo
   spazio fra i due e non a nessuno dei due: da qui lo pseudo-elemento,
   messo a meta' del gap. */
.eppoi-modo__passo:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: calc(var(--space-6) / -2);
  transform: translate(50%, -50%);
  color: var(--eppoi-navy-etichetta);
}

/* Stesso motivo dell'occhiello qui sopra: ".eppoi-modo__etichetta" da sola
   e' 0,1,0 e perderebbe contro ".eppoi-blocco p" (0,1,1). */
.eppoi-modo .eppoi-modo__etichetta {
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--font-size-caption);
  color: var(--eppoi-navy-etichetta);
}

.eppoi-modo__riquadro {
  flex: 1;
  padding: var(--space-4);
  border: 1px solid var(--eppoi-navy-bordo);
  border-radius: var(--space-3);
}

.eppoi-modo__riquadro h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

/* ".eppoi-modo__riquadro p" da sola e' una classe piu' un tipo (0,1,1):
   PAREGGIA con ".eppoi-blocco p" (0,1,1) invece di perdere, e vincerebbe
   solo perche' scritta dopo nel foglio — una vittoria fragile, che si
   romperebbe riordinando il file senza toccare questo selettore.
   Prefissata con .eppoi-modo (0,2,1) vince nettamente, indipendentemente
   dall'ordine. */
.eppoi-modo .eppoi-modo__riquadro p {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: 1.4;
  color: var(--eppoi-navy-testo);
}

/* Il quarto riquadro e' l'unico che cambia fra le due modalita', ed e'
   il punto della sezione: il colore qui non decora, indica dove
   guardare. */
.eppoi-modo__riquadro--giallo {
  background: var(--eppoi-yellow);
  border-color: var(--eppoi-yellow);
  color: var(--eppoi-navy);
}

/* Stessa specificita' della regola base qui sopra (0,2,1 contro 0,2,1):
   vince perche' scritta dopo, la stessa tecnica gia' usata per il verdetto
   colorato delle personas (.eppoi-persona--magenta .eppoi-persona__verdetto
   contro .eppoi-persona .eppoi-persona__verdetto). Serve lo stesso prefisso
   della regola base: a specificita' piu' bassa perderebbe il colore scuro
   e il testo resterebbe chiaro sul giallo. */
/* #6B5A12 (il valore della tavola) da' 4,21:1 su #F2C744: sotto la soglia
   AA di 4,5:1 per un testo di 14px regolare — stessa ragione per cui
   esiste --eppoi-yellow-ink piu' in alto in questo file (il giallo del
   progetto, come testo, non arriva mai al contrasto minimo). #645410 e'
   un 6% piu' scuro e da' 4,62:1, indistinguibile a occhio dal valore di
   Figma. Inline e non una variabile: questo giallo scuro serve davvero
   qui e basta. I tre chiari che tornano piu' volte (#8FA5C4, #2E4468,
   #B9C8DC) sono invece variabili in cima al foglio. */
.eppoi-modo .eppoi-modo__riquadro--giallo p { color: #645410; }

/* #6E86A6 (il valore della tavola) da' 3,73:1 col bianco: sotto la soglia
   AA di 4,5:1 anche per il titolino di 16px grassetto, che a quel corpo
   non conta ancora come testo grande (servono 18,66px). #627794 e' un 8%
   piu' scuro e da' 4,58:1, indistinguibile a occhio dal valore di Figma.
   Stessa deviazione, stessa ragione e stessa grammatica del riquadro
   giallo qui sopra: questo e' il suo gemello, e ci era arrivato solo
   perche' il rilievo sul contrasto era arrivato all'altro. */
.eppoi-modo__riquadro--grigio {
  background: #627794;
  border-color: #627794;
}

/* Il paragrafo dei riquadri ereditava --eppoi-navy-testo, il chiaro pensato
   per il fondo NAVY: su questo grigio faceva 2,20:1, il contrasto
   peggiore della pagina. Il modificatore cambiava il fondo e si
   dimenticava il testo. Bianco: 4,58:1, come il titolino. */
.eppoi-modo .eppoi-modo__riquadro--grigio p {
  color: var(--color-white);
}

.eppoi-modo__pillole {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.eppoi-modo__pillole li {
  background: var(--color-white);
  color: var(--eppoi-navy);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  text-align: center;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

/* Stesso motivo dell'occhiello e dell'etichetta qui sopra:
   ".eppoi-modo__chiusa" da sola e' 0,1,0 e perderebbe contro
   ".eppoi-blocco p" (0,1,1). */
.eppoi-modo .eppoi-modo__chiusa {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--eppoi-navy-bordo);
  font-size: var(--font-size-body-small);
  color: var(--eppoi-navy-testo);
}

/* ---------- How I'd measure success ----------
   L'unica sezione che rompe la colonna. NIENTE 100vw: su Windows quella
   misura include la barra di scorrimento verticale, e la banda
   spunterebbe di una quindicina di pixel oltre il bordo destro facendo
   scorrere tutta la pagina in orizzontale. Un blocco normale e' gia'
   largo quanto il suo contenitore, che e' il main: basta non stringerlo. */
.eppoi-misura {
  background: var(--eppoi-navy);
  color: var(--color-white);
  /* --space-8 + --space-7 = 112px: misurato, non calcolato a mente. La
     tavola vuole la banda alta 526px; con questo padding (una volta
     azzerato quello di .site-section e dichiarati i margini sotto) il
     rendering risulta 535px, 9px sopra. E' il token piu' vicino nella
     scala delle spaziature — il prossimo, --space-8 * 2 (128px),
     porterebbe l'altezza a 559px, piu' lontano — e lo scarto residuo
     resta sotto la decina di pixel: riferito, non corretto forzando un
     valore fuori scala. */
  padding-block: calc(var(--space-8) + var(--space-7));
  margin-block: var(--section-gap);
}

/* La .site-section annidata qui dentro serve solo a dare la colonna di
   prosa alla banda, non il ritmo verticale del sito: il suo
   padding-block si sommerebbe a quello di .eppoi-misura, perche' i
   padding non collassano mai (ne' fra genitore e figlio ne' fra
   fratelli). E' lo stesso problema che ".eppoi-blocco" risolve altrove
   azzerando il proprio padding — qui pero' ".site-section" sta su un
   <div> annidato diverso dalla sezione, quindi va azzerata con un
   selettore che valga solo dentro questa banda, non su ".site-section"
   in generale. */
.eppoi-misura .site-section {
  padding-block: 0;
}

.eppoi-misura__titolo {
  color: var(--color-white);
  font-size: var(--font-size-h2);
}

.eppoi-misura p {
  font-size: var(--font-size-body);
  line-height: 1.45;
  /* Zero esplicito, non l'1em di default del browser: quel default
     varrebbe 16px solo perche' --font-size-body vale 16px in questo
     tier, una coincidenza che si scollerebbe se il token cambiasse. */
  margin-block: 0 var(--space-4);
}

/* Prefissato con ".eppoi-misura" (0,2,0): da sola la classe e' 0,1,0 e
   perderebbe contro ".eppoi-misura p" (0,1,1), che le rimetterebbe sotto
   il corpo di testo (16px) invece della frase grande della tavola. */
.eppoi-misura .eppoi-misura__frase {
  /* margin-block esplicito su entrambi i lati: senza margin-bottom:0
     resterebbe l'1em di default del browser (40px, la dimensione del
     proprio font), che nessuno ha scelto e che si sommerebbe al
     padding-bottom della banda. */
  margin-block: var(--space-7) 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  /* Qui il giallo torna a essere quello delle superfici: su fondo navy
     il contrasto ce l'ha, ed e' il giallo della tavola. */
  color: var(--eppoi-yellow);
}

/* ---------- Le tre strisce ----------
   Un solo componente, usato tre volte: le sei card, le otto schermate,
   le immagini del sistema visivo. Nella tavola cominciano allineate alla
   colonna e proseguono oltre il bordo destro — sono caroselli, non
   griglie tagliate.

   Lo scorrimento e' quello nativo del browser, e non e' pigrizia: il
   trascinamento, l'inerzia, la rotella orizzontale, il trackpad, il
   tocco e le frecce da tastiera esistono gia' e funzionano meglio di
   qualunque riscrittura. Qui si toglie la barra e si da' un nome al
   contenitore, e non serve altro.

   Il rientro NON e' 100vw: e' una percentuale del main, che e' gia'
   largo quanto la finestra meno la barra di scorrimento. max() con
   --grid-margin serve sotto i 1728, dove la colonna tocca i margini. */
.eppoi-striscia {
  --eppoi-striscia-inizio: var(--eppoi-colonna-bordo);

  display: flex;
  /* Esplicito, e non lo stretch di default. Prima non contava: le img
     erano il figlio diretto del flex, e un elemento sostituito con un suo
     rapporto d'aspetto resiste allo stretch da solo (lo stesso motivo per
     cui un <img> con altezza auto non si deforma in un flexbox). Ora il
     figlio diretto e' la CORNICE, un <button> normale senza rapporto
     d'aspetto: senza flex-start la cornice del sistema visivo (l'unica
     con un'altezza propria dichiarata, vedi .eppoi-striscia--visuale piu'
     sotto) resterebbe comunque quella — un'altezza esplicita vince sempre
     sullo stretch — ma le cornici di card/schermate (altezza auto)
     verrebbero tirate alla riga piu' alta del gruppo, un pixel o due in
     piu' del loro contenuto reale invece che al loro contenuto. Meglio
     dirlo che affidarsi al fatto che oggi coincidono. */
  align-items: flex-start;
  gap: 10px;  /* il conto che lega questi 10px alle sei card sta accanto
                 a .eppoi-striscia--card, dove c'e' anche la larghezza
                 delle cornici */
  overflow-x: auto;
  /* overflow-y NON puo' restare implicito. La regola CSS e': se un asse
     ha un overflow diverso da visible, l'altro asse che e' rimasto al
     default (visible) diventa "auto" per forza — non "visible" come ci
     si aspetterebbe leggendo solo overflow-x. Misurato: prima di questa
     riga getComputedStyle(...).overflowY valeva "auto" sulle tre
     strisce, cioe' erano scorrevoli anche in verticale. Un trackpad che
     riceve un gesto diagonale ne cattura la componente Y dentro la
     striscia invece di scorrere la pagina — il difetto segnalato dal
     committente. hidden lo chiude senza ambiguita'. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* overscroll-behavior-y NON va dichiarato (ne' a "contain" ne' ad
     "auto", che e' comunque il valore iniziale e quindi identico
     all'ometterlo). "contain" blocca la propagazione dello scroll al
     genitore quando l'asse raggiunge il proprio confine — e con
     overflow-y:hidden qui sopra il confine e' raggiunto SUBITO, ad ogni
     rotellina verticale sopra la striscia. Risultato misurato: una
     rotella verticale sopra .eppoi-striscia--schermate non faceva
     scorrere la pagina, il difetto segnalato dal committente. L'asse Y
     non ha bisogno di contenimento perche' non scorre gia' di suo
     (overflow-y:hidden), quindi qui non serve altro. */
  scroll-snap-type: x proximity;
  padding-inline-start: var(--eppoi-striscia-inizio);
  padding-inline-end: var(--grid-margin);
  /* Verticale, e non zero, per due motivi distinti.
     Primo: ogni cornice e' un bottone con un suo :focus-visible (contorno
     2px + offset 2px), e senza questo spazio l'anello di fuoco della
     prima e dell'ultima cornice verrebbe tagliato dallo stesso
     overflow-x:auto che fa scorrere la striscia.
     Secondo: lo scale(1.02) in hover (vedi .eppoi-striscia-cornice img
     piu' sotto) vive DENTRO una cornice a overflow:hidden, che lo
     ritaglia visivamente — ma il transform non cambia il box di LAYOUT
     dell'img, quindi getBoundingClientRect continua a riportare il
     rettangolo ingrandito, piu' alto della cornice che lo contiene.
     E' quel rettangolo, non quello ritagliato, che deve restare dentro
     la striscia. Misurato: l'immagine piu' alta (la galleria, cornici da
     220px, vedi piu' sotto) rende 476px e cresce di ~4,8px per lato al
     2% — --space-1 (4px) bastava con le card piu' piccole di prima (172px,
     372px di immagine, ~3,7px per lato) ma non basta piu' con le card
     ingrandite; --space-2 (8px) si'. */
  padding-block: var(--space-2);
  scroll-padding-inline-start: var(--eppoi-striscia-inizio);
  margin-block: var(--section-gap);

  /* La barra di scorrimento non c'e' nella tavola. Il gesto resta:
     e' nascosta, non disattivata. */
  scrollbar-width: none;
}

/* La barra dei tasti precedente/successivo sta SEMPRE subito prima della
   striscia che comanda (JS la crea e la inserisce li': vedi js/eppoi.js).
   Da qui in poi la striscia non porta piu' da sola lo spazio "sopra" —
   lo porta la barra, che prende il posto che il margine occupava prima,
   cosi' i due margini adiacenti (fine della barra, inizio della
   striscia) non collassano nel piu' grande dei due e la barra resta
   incollata alle immagini. */
.eppoi-striscia-nav + .eppoi-striscia {
  margin-block-start: 0;
}

/* I tasti scorrono la striscia, non compaiono/spariscono col contenuto:
   la barra e' un elemento fisso della pagina che a volte nasconde i suoi
   due figli (vedi js/eppoi.js), non una lista che entra ed esce dal
   flusso. Per questo qui non c'e' nessuna transizione di enter/exit —
   ne servirebbe una solo se la barra stessa apparisse/sparisse mentre
   l'utente guarda, e la barra e' gia' presente al primo paint (JS gira
   prima che l'utente possa scorrere fin li': i tre caroselli sono tutti
   sotto la piega). */
.eppoi-striscia-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-inline-end: var(--eppoi-colonna-bordo);
  margin-block: var(--section-gap) var(--space-3);
}

/* Solo "The flow": nella tavola il titolo tocca quasi le schermate (vedi
   il commento sotto, su .eppoi-blocco:has(...)). Prima che ci fossero i
   tasti quel "quasi a contatto" univa titolo e IMMAGINI; ora fra i due
   c'e' sempre la barra, quindi il contatto stretto si sposta sul primo
   elemento che il titolo incontra davvero, cioe' la barra stessa — le
   immagini restano staccate dalla barra del solito --space-3. */
.eppoi-striscia-nav--attaccata {
  margin-block-start: 0;
}

/* ---------- I due tasti (emil-design-eng, CLAUDE.md) ----------
   Sono controlli d'uso frequente — chi legge il case study li preme
   ripetutamente per sfogliare una striscia, non una volta ogni tanto
   come il pill Back. La cornice di riferimento e' "tens of times per
   sessione": niente lift vistosi sull'hover (quella grammatica resta al
   pill Back, che si vede una volta), solo un cambio di colore rapido e
   una pressione che risponde. 32px (--space-6) di lato: piccolo com'e'
   giusto per un controllo che non deve competere con le immagini sotto,
   ma resta un bersaglio pieno per il tocco. */
.eppoi-striscia-tasto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 1px solid var(--eppoi-grey);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--eppoi-grey);
  cursor: pointer;
  /* Cambiamento di stato continuo (bordo/colore): ease, non ease-out —
     stessa distinzione fatta per lo scale delle immagini qui sopra. La
     pressione invece e' un salto discreto (entra un nuovo stato,
     "premuto"): quella si accorcia e basta, non cambia curva. */
  transition: border-color 140ms ease, color 140ms ease, transform 90ms ease;
}

.eppoi-striscia-tasto svg {
  display: block;
}

/* "Precedente" e' lo stesso disegno di "successivo", specchiato: un
   solo path nel markup (js/eppoi.js), non due frecce da tenere
   sincronizzate se un giorno cambia la forma. */
.eppoi-striscia-tasto--precedente svg {
  transform: scaleX(-1);
}

@media (hover: hover) and (pointer: fine) {
  .eppoi-striscia-tasto:hover:not(:disabled) {
    border-color: var(--eppoi-navy);
    color: var(--eppoi-navy);
  }
}

/* Risposta alla pressione (emil-design-eng: "Buttons must feel
   responsive"): vale anche per un controllo premuto spesso, perche' e'
   la conferma che il click e' stato ricevuto, non una novita' da
   notare — per questo resta cosi' piccola e cosi' rapida. */
.eppoi-striscia-tasto:active:not(:disabled) {
  transform: scale(0.9);
  transition-duration: 90ms;
}

.eppoi-striscia-tasto:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* disabled toglie anche il fuoco da tastiera (e' il motivo per cui si
   usa disabled agli estremi corsa, non solo uno stile): qui si abbassa
   anche l'opacita', l'unico modo per chi vede il bordo e basta di capire
   che quel tasto adesso non fa niente. */
.eppoi-striscia-tasto:disabled {
  opacity: 0.35;
  cursor: default;
}

.eppoi-striscia::-webkit-scrollbar { display: none; }

/* Le strisce hanno tabindex="0" perche' si scorrono con le frecce: sono
   a tutti gli effetti un elemento che riceve il fuoco, e chi naviga da
   tastiera deve vedere dove e' arrivato. Stesso contorno del pill Back,
   che e' l'altro elemento focalizzabile della pagina — due grammatiche
   diverse per la stessa cosa confonderebbero. L'offset e' 2px e non 3
   perche' qui il contorno gira attorno a immagini che gia' toccano il
   bordo della finestra. */
.eppoi-striscia:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* I figli diretti della striscia sono le CORNICI (i bottoni), non piu' le
   immagini: questa regola valeva gia' su "qualunque figlio diretto" e
   continua a valere senza modifiche, perche' non nomina ne' img ne'
   button. */
.eppoi-striscia > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* ---------- Le cornici (emil-design-eng, CLAUDE.md) ----------
   Il problema che risolvono e' duplice, ed e' la stessa mossa per
   entrambi: un <button> vero, di misura FISSA, con overflow:hidden e il
   raggio degli angoli.

   1. Gli angoli dello zoom hover. Prima lo scale(1.02) stava sull'img,
      che portava anche il border-radius: ingrandendosi insieme al
      riquadro il raggio cresceva con lui (12 -> 12,24px...) e i vertici
      sembravano gonfiarsi — il difetto segnalato dal committente. Ora il
      border-radius sta SOLO qui, su un elemento che non si scala mai: gli
      angoli restano fermi al pixel, e l'overflow:hidden ritaglia
      l'immagine che cresce dentro, invece di lasciarla sbordare.

   2. Il click che l'hover promette. Prima l'hover era sull'img e basta,
      senza che cliccarci sopra facesse niente — un segnale dato e non
      mantenuto. Un <button> vero e' anche il bersaglio del click che apre
      l'ingrandimento (js/eppoi.js): la stessa cornice risolve i due
      problemi, non e' una coincidenza.

   Reset dei default del bottone (bordo, sfondo, padding, font) perche'
   qui non deve sembrare un bottone di sistema: la cornice DEVE apparire
   come l'immagine appariva prima, solo cliccabile. */
.eppoi-striscia-cornice {
  display: block;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  border-radius: var(--space-3);
  cursor: pointer;
}

.eppoi-striscia-cornice img {
  display: block;
  height: auto;
}

/* Sei card larghe uguali. La tavola misurava 172px (galleria) e 168px
   (schermate di "The flow"): misura corretta della tavola, ma il
   committente le ha trovate troppo piccole per leggerle — richiesta
   esplicita di ingrandire oltre il riferimento, non una correzione di
   misura. Le due strisce oggi condividono lo stesso numero (220px)
   apposta: prima avevano rapporti d'aspetto diversi (0,462 e 0,537) e
   larghezze diverse, ed e' quel confronto FRA le due strisce — non le
   card dentro una singola striscia, gia' tutte uguali fra loro — a dare
   l'impressione di "dimensioni diverse" scorrendo dall'una all'altra.
   Un solo numero comune pareggia il peso visivo delle due gallerie.

   A 220px le sei card non entrano piu' esatte nella colonna a 1728
   (6 x 220 + 5 x 10 = 1370, contro il tetto di 1280 di --container):
   la galleria scorre sempre, come le altre due strisce. E' un
   cambiamento di comportamento conseguente alla richiesta, non un
   effetto collaterale da correggere.
   La larghezza fissa sta sulla CORNICE (il figlio diretto della striscia,
   che e' quello che flex misura) e non piu' sull'img: l'img la eredita al
   100% qui sotto, invariata nella sostanza. */
.eppoi-striscia--card .eppoi-striscia-cornice { width: 220px; }
.eppoi-striscia--schermate .eppoi-striscia-cornice { width: 220px; }

.eppoi-striscia--card .eppoi-striscia-cornice img,
.eppoi-striscia--schermate .eppoi-striscia-cornice img {
  width: 100%;
}

/* Il sistema visivo e' l'eccezione: fissa l'ALTEZZA, non la larghezza —
   vedi la nota sul problema 1 piu' sotto per il perche'. La cornice si
   restringe sul contenuto (nessuna larghezza dichiarata, e la striscia e'
   un flex container: senza un valore esplicito l'elemento prende la
   larghezza del suo contenuto), e il contenuto e' un'immagine alta quanto
   la cornice e larga quanto il suo stesso rapporto d'aspetto comanda. */
.eppoi-striscia--visuale .eppoi-striscia-cornice img {
  width: auto;
  height: 100%;
}

/* La misura di riferimento e' 392px, misurata sulla tavola
   (assets/projects/Eppoi/XL.png) — non piu' stimata: prima il foglio
   fissava 484px di LARGHEZZA, il 30% in meno del vero, e siccome
   visual-1.webp (968x545, rapporto 1,776) e visual-2..5.webp (968x580,
   1,669) non condividono lo stesso rapporto, una larghezza comune dava
   altezze diverse — i bordi inferiori sfalsati di 18px che il committente
   ha visto come "dimensioni sempre diverse". Fissando l'ALTEZZA invece
   quel disallineamento sparisce per costruzione: qualunque rapporto
   abbiano le immagini, il bordo superiore e quello inferiore cadono nello
   stesso punto per tutte.

   Sotto XL non resta fissa: 392px e' la misura di UNA tavola sola (1728),
   e lasciarla costante fino a schermi piccoli occuperebbe mezza altezza
   di un telefono, il rischio segnalato esplicitamente. clamp() la lega
   alla larghezza della finestra (392/1728 = 22,685%, la stessa
   proporzione della tavola) fra un minimo che la tiene leggibile e il
   massimo misurato: sotto ~865px di finestra vince il minimo, sopra i
   1728 vince il tetto — la stessa filosofia del tetto su --container in
   tokens.css, qui applicata a un'altezza invece che a una larghezza. Non
   e' misurata sotto XL (la tavola non esiste per altri tier): e' dedotta,
   come i breakpoint di impilamento piu' sotto in questo file. */
.eppoi-striscia--visuale .eppoi-striscia-cornice {
  height: clamp(180px, 22.685vw, 392px);
}

/* "The flow" e' l'unica delle tre strisce dove la tavola non lascia il
   consueto section-gap fra il titolo e le sue immagini: misurato sulla
   tavola (assets/projects/Eppoi/XL.png), il testo introduttivo finisce
   e le schermate iniziano quasi a contatto (~5px, il residuo del
   line-height, non uno spazio scelto). Le altre due strisce (le sei
   card dopo "Four decisions", il sistema visivo dopo "Visual system")
   NON sono cosi': li' la tavola mostra il section-gap pieno, identico
   a quello che il sito gia' rende. Per questo lo zero va scritto solo
   qui, non su .eppoi-blocco o .eppoi-striscia in generale.
   :has() perche' il legame che questa regola descrive e' fra due
   elementi ADIACENTI nel documento, non un ruolo del blocco stesso: e'
   una relazione di impaginazione, e sta bene nel foglio di stile invece
   che in una classe di presentazione nel markup.

   Il bersaglio dell'adiacenza e' cambiato da quando esistono i tasti:
   l'elemento che segue davvero .eppoi-blocco adesso e' sempre
   .eppoi-striscia-nav (js/eppoi.js lo inserisce li', prima di OGNI
   striscia) — .eppoi-striscia--schermate non e' piu' adiacente a niente,
   e' la barra che lo e'. Da qui il modificatore .eppoi-striscia-nav
   --attaccata invece del vecchio selettore diretto sulla striscia:
   individua senza ambiguita' l'UNICA barra che introduce "The flow",
   perche' quel modificatore compare una sola volta in tutta la pagina —
   e degrada in modo innocuo nei browser che non supportano :has(): la
   regola smette di applicarsi e il margine torna quello pieno, non si
   sovrappone niente. */
.eppoi-blocco:has(+ .eppoi-striscia-nav--attaccata) {
  margin-bottom: 0;
}

/* Risposta alla pressione (emil-design-eng: "Buttons must feel
   responsive"): la cornice e' un controllo cliccato spesso quanto le
   immagini stesse, quindi la stessa cornice di riferimento dei due tasti
   precedente/successivo qui sopra — piccola, veloce, senza lift. Sulla
   cornice, non sull'img: e' la cornice il bottone, e scalarla (non
   l'immagine dentro) tiene il gesto di pressione coerente con quello di
   rilascio, che sposta lo zoom hover sull'img interna. */
.eppoi-striscia-cornice:active {
  transform: scale(0.98);
  transition: transform 90ms ease;
}

.eppoi-striscia-cornice:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* La sola concessione all'animazione qui: rispondere all'hover senza
   spostare il layout (solo transform, non width/margin, che non tocca
   le misure che i test controllano). Niente cursore grab/grabbing: non
   c'e' un gestore di trascinamento (e non deve essercene, lo
   scorrimento e' quello nativo del browser), quindi quel cursore
   direbbe una cosa falsa — click-and-drag su desktop non scorrerebbe
   niente, e trascinare un'immagine farebbe partire il suo
   trascinamento nativo col fantasma che segue il puntatore. Lo
   scale(1.02) invece dice solo "questo e' un oggetto", non
   "trascinami", ed e' vero. Dietro pointer:fine e hover:hover perche'
   su touch l'hover resterebbe appiccicato al dito dopo il tocco — e
   senza quel filtro il primo tap lo farebbe scattare per errore.
   Nessuna entrata/uscita da animare qui: le immagini ci sono sempre, non
   compaiono ne' spariscono (l'ingrandimento che il click apre e' un'altra
   cosa, vedi .eppoi-lightbox piu' sotto — quello si', entra ed esce). */
@media (hover: hover) and (pointer: fine) {
  .eppoi-striscia-cornice img {
    /* Cambiamento di stato continuo (non entrata/uscita): ease, non
       ease-out. 160ms perche' e' un dettaglio hover visto spesso
       sfogliando la striscia, non un'apertura occasionale. */
    transition: transform 160ms ease;
  }

  .eppoi-striscia-cornice:hover img {
    transform: scale(1.02);
  }
}

/* =========================================================
   Sotto i 900px: tutto quello che a XL sta in riga si impila.
   La tavola esiste solo a XL, quindi questi tier sono dedotti dalle
   regole del sito, non misurati.

   I valori dei breakpoint (899, 599 qui sotto) sono scritti a mano:
   le custom property di tokens.css (--bp-m 600, --bp-l 900, --bp-xl
   1280, --bp-xxl 1728, §7.0) non si leggono dentro una @media. VANNO
   TENUTI SINCRONIZZATI A MANO con quei valori — se tokens.css cambia
   soglia, questo file non se ne accorge da solo, e nessun test lo
   segnalerebbe: le due griglie a colonna singola continuerebbero a
   passare, solo alla larghezza sbagliata.
   ========================================================= */
@media (max-width: 899px) {
  .eppoi {
    /* La prosa non rientra piu': sotto i 900px il rientro toglierebbe
       un quinto della riga a un testo che gia' fatica a starci. */
    --eppoi-prosa-rientro: 0%;
    --eppoi-prosa-larghezza: 100%;
  }

  .eppoi-statistiche,
  .eppoi-personas,
  .eppoi-modo__passi {
    grid-template-columns: 1fr;
  }

  /* .eppoi-personas dichiara "gap: 11.5%" (un solo valore, quindi vale
     sia per row-gap che per column-gap) nella regola base: a due colonne
     column-gap si calcola sulla larghezza del contenitore, che e'
     definita, e funziona. Qui sotto pero' la griglia e' 1fr: lo stesso
     11.5% diventa row-gap, calcolato sull'ALTEZZA del contenitore — che
     e' "auto", cioe' dipende dal contenuto. Circolo: il browser disegna
     un distacco reale fra le righe ma calcola l'altezza intrinseca del
     contenitore come se il distacco fosse zero. Misurato: contenitore
     alto quanto la somma delle due card senza alcun gap, con la seconda
     card che finiva 182px oltre il fondo dichiarato — la sovrapposizione
     col paragrafo successivo segnalata dal committente. Un valore FISSO
     (non un'altra percentuale, che avrebbe lo stesso problema) rompe il
     circolo: --space-7 e' lo stesso respiro gia' usato per
     .eppoi-citazioni qui sotto, quando anche lei passa a una colonna. */
  .eppoi-personas {
    gap: var(--space-7);
  }

  .eppoi-sistema {
    grid-template-columns: 1fr;
  }

  /* Le frecce fra le colonne ora separano righe, non colonne: puntano
     in giu'. Ruotare invece di cambiare il carattere tiene un simbolo
     solo nel foglio. */
  .eppoi-sistema__freccia {
    transform: rotate(90deg);
    justify-self: center;
  }

  /* Stessa cosa dentro le card navy: il passo successivo e' sotto. */
  .eppoi-modo__passo:not(:last-child)::after {
    top: auto;
    bottom: calc(var(--space-6) / -2);
    right: 50%;
    transform: translate(50%, 50%) rotate(90deg);
  }

  .eppoi-citazioni {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .eppoi-modo,
  .eppoi-persona {
    padding: var(--space-5);
  }

  /* Le virgolette grandi: a questa larghezza 160px le fanno uscire
     oltre il bordo della finestra. */
  .eppoi-citazioni__segno { font-size: 90px; }
}

/* =========================================================
   Sotto i 600px: la tabella giornata/storia non regge due colonne —
   "Leaving home, 8:00" e la frase accanto starebbero su due righe
   ciascuna in mezza riga di larghezza. Diventano due righe per voce.
   ========================================================= */
@media (max-width: 599px) {
  .eppoi-giornata > div,
  .eppoi-decisione dl,
  .eppoi-persona__scheda {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .eppoi-giornata > div {
    padding-block: var(--space-4);
  }
}

/* =========================================================
   L'ingrandimento (emil-design-eng, CLAUDE.md)

   Il click su una cornice (.eppoi-striscia-cornice) apre questo overlay:
   la logica sta in js/eppoi.js, dedicato e non un adattamento di
   card-focus.js — quello sposta e ingrandisce l'elemento CHE GIA' C'E' in
   pagina, ma qui l'immagine di partenza vive dentro una cornice a
   overflow:hidden, dentro una striscia che scorre: il trucco della
   trasformazione-sul-posto verrebbe ritagliato dalla striscia stessa
   prima di poter crescere. Un overlay con una COPIA dell'immagine, fuori
   da quella gerarchia, e' la forma che funziona qui.

   La grammatica pero' e' quella del resto del sito, non una nuova:
   sfondo scuro dietro, Escape per chiudere, click fuori per chiudere, il
   fuoco che torna al bottone da cui si e' aperto (tutto in js/eppoi.js).

   Ed e' un dialog modale vero (role="dialog", aria-modal="true", nome
   accessibile che dice quale immagine — js/eppoi.js), non solo scuro
   dietro: il committente era partito proprio da "l'accessibilita' dei
   caroselli e' sbagliata", e un pannello raggiungibile solo col mouse
   l'avrebbe confermata di nuovo. Vive appeso a document.body (come lo
   sfondo di card-focus.js), non dentro .eppoi: deve restare raggiungibile
   quando js/eppoi.js rende .eppoi inert all'apertura — se stesse dentro,
   inert spegnerebbe anche lui. Per questo l'interruttore generale di
   prefers-reduced-motion in fondo a questo foglio (".eppoi *") non lo
   copre, ed e' per questo che qui sotto ce n'e' uno dedicato.

   Ed e' un elemento che ENTRA ED ESCE dal DOM (CLAUDE.md, punto 3): niente
   apparizione secca. Sfondo e immagine sfumano insieme, l'immagine anche
   con un accenno di scala — mai da scale(0) (emil-design-eng: "nothing in
   the real world disappears and reappears from nothing"), parte da 0,96
   e non da zero. transform-origin resta quello di default (center): e' un
   overlay a schermo intero, non ancorato a un trigger di cui ricordare la
   posizione, quindi qui vale l'eccezione ai popover origin-aware — come i
   modali, resta centrato. Entrata piu' lenta della'uscita, stessa
   asimmetria di --card-focus-enter/-exit in card-focus.css: chi apre sta
   ancora guardando "cosa succede", chi chiude ha gia' deciso. */
:root {
  --eppoi-lightbox-enter: 240ms;
  --eppoi-lightbox-exit: 180ms;
  --eppoi-lightbox-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

.eppoi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  /* Finche' non e' visibile non deve rubare click a niente sotto di se':
     l'elemento esiste nel DOM un fotogramma prima che la transizione
     dell'opacita' parta (vedi js/eppoi.js), e senza questo un clic
     capitato li' in mezzo colpirebbe l'overlay invece della pagina. */
  pointer-events: none;
  transition: opacity var(--eppoi-lightbox-exit) var(--eppoi-lightbox-ease);
}

.eppoi-lightbox.is-visible {
  opacity: 1;
  pointer-events: auto;
  transition-duration: var(--eppoi-lightbox-enter);
}

.eppoi-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--space-3);
  box-shadow: var(--shadow-card);
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform var(--eppoi-lightbox-exit) var(--eppoi-lightbox-ease),
    opacity var(--eppoi-lightbox-exit) var(--eppoi-lightbox-ease);
}

.eppoi-lightbox.is-visible .eppoi-lightbox__img {
  transform: scale(1);
  opacity: 1;
  transition-duration: var(--eppoi-lightbox-enter);
}

/* ---------- Il tasto di chiusura (emil-design-eng, CLAUDE.md) ----------
   Non e' un vezzo visivo: e' quello che rende il pannello chiudibile
   senza indovinare Escape. Stessa cornice di riferimento e stessa
   grammatica dei due tasti precedente/successivo della striscia (cambio
   di colore/sfondo rapido, pressione che risponde, niente lift) — un
   controllo che si preme una volta per apertura, non spesso quanto quelli,
   ma resta un dialog e la grammatica dei controlli del dialog e' quella. */
.eppoi-lightbox__chiudi {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--eppoi-navy);
  cursor: pointer;
  transition: background-color 140ms ease, transform 90ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .eppoi-lightbox__chiudi:hover {
    background: var(--color-white);
  }
}

.eppoi-lightbox__chiudi:active {
  transform: scale(0.92);
}

.eppoi-lightbox__chiudi:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* Questo overlay vive fuori da .eppoi (appeso a document.body: vedi
   js/eppoi.js), quindi l'interruttore generale qui sotto (".eppoi *") non
   lo tocca — serve un blocco dedicato.

   "transition: none" qui non basterebbe: perderebbe contro
   ".eppoi-lightbox.is-visible" e ".eppoi-lightbox__img" dentro
   ".is-visible" (0,2,0), che sono PIU' specifiche di un ".eppoi-lightbox"
   semplice (0,1,0) e ridichiarano transition-duration per l'apertura —
   esattamente il modo in cui l'ho trovato rotto (0,24s misurati invece di
   0s). Stessa tecnica del blocco generale in fondo al foglio:
   !important su transition-duration, che vince a prescindere dalla
   specificita' di chi la ridichiara. Il selettore universale dentro
   copre anche il tasto di chiusura senza doverlo nominare a parte. */
@media (prefers-reduced-motion: reduce) {
  .eppoi-lightbox,
  .eppoi-lightbox * {
    transition-duration: 0s !important;
  }
}

/* =========================================================
   Chi ha chiesto niente animazioni non le vede. Ultimo blocco del
   foglio perche' deve poter spegnere qualunque cosa sia stata scritta
   sopra, comprese le regole che verranno aggiunte in futuro.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .eppoi *,
  .eppoi *::before,
  .eppoi *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}