/* Il tavolo eredita la pelle del banco — stesso verde, stesso rosa, stesso
   serif per il testo e mono per le etichette — perché chi passa dall'uno
   all'altro capisca che è lo stesso libro. Ma è una pagina di lettura: il
   testo ha la larghezza di una colonna di libro, i commenti stanno nel margine
   destro all'altezza del passo, e tutto il resto sta ai bordi, in piccolo. */

/* Boska e Stardom (Indian Type Foundry, Fontshare Free Font License: si
   possono usare e servire da qui, la licenza sta accanto ai file). Stardom è
   la voce della porta; Boska resta in casa per riprovarlo. */
@font-face { font-family: 'Boska'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/font/Boska-Variable.woff2') format('woff2'); }
@font-face { font-family: 'Boska'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('/font/Boska-VariableItalic.woff2') format('woff2'); }
@font-face { font-family: 'Stardom'; font-style: normal; font-weight: 400; font-display: swap; src: url('/font/Stardom-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Gambarino'; font-style: normal; font-weight: 400; font-display: swap; src: url('/font/Gambarino-Regular.woff2') format('woff2'); }

:root {
  --verde: #12291e;
  --rosa:  #f6a2c0;   /* un rosa che è rosa, non un bianco arrossito */
  --paper: var(--verde);
  --card:  color-mix(in srgb, var(--rosa) 7%, var(--verde));
  --ink:   var(--rosa);
  --mut:   color-mix(in srgb, var(--rosa) 66%, var(--verde));
  --faint: color-mix(in srgb, var(--rosa) 42%, var(--verde));
  --rule:  color-mix(in srgb, var(--rosa) 17%, var(--verde));
  --frame: color-mix(in srgb, var(--rosa) 32%, var(--verde));
  --accent: var(--rosa);
  --amber:  #ffc4d6;
  --alert:  #ff8ba3;
  --rosa-vivo: #ff5f92;   /* il rosa della mezzatinta: il rosa di casa è troppo pallido per reggere una foto */
  --evidenziatore: color-mix(in srgb, var(--rosa) 34%, var(--verde));
  --emoji: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
  --serif: 'Iowan Old Style', Charter, 'Palatino Linotype', Georgia, serif, var(--emoji);
  --mono: ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace, var(--emoji);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.6 var(--serif); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 7px 9px; width: 100%; }
input:focus, textarea:focus { outline: 1px solid var(--accent); }
[hidden] { display: none !important; }

.eti { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* la banda dell'evidenziatore: dietro la metà bassa delle lettere */
.evidenzia {
  background-image: linear-gradient(transparent 44%, var(--evidenziatore) 44%, var(--evidenziatore) 92%, transparent 92%);
  background-repeat: no-repeat;
}

/* ── testa ── */
.testa {
  display: flex; align-items: center; gap: 22px; padding: 10px 22px;
  border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 5;
}
.schede { display: flex; gap: 22px; }
.scheda {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mut); padding: 6px 4px;
}
.scheda:hover, .scheda.on { color: var(--ink); }
.io { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); }

/* ── la porta: la home di chi non è ancora entrato ── */
.porta {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 56px; padding: 56px 6vw 120px 6vw;
}
.sfondo { position: absolute; inset: 0; z-index: -1; filter: url(#verde); opacity: 0.42; }
.sfondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.sfondo img.su { opacity: 1; }
.titolo-porta {
  position: relative; margin: 0; align-self: stretch;
  text-align: left; line-height: 1.0; letter-spacing: -0.01em;
  font-family: 'Gambarino', 'Stardom', 'Boska', 'Iowan Old Style', Georgia, serif; font-style: normal; font-weight: 400;
  font-size: clamp(56px, 8.8vw, 200px);
  color: var(--rosa);
  /* Gambarino ha un peso solo: lo si ingrassa con un bordo dello stesso rosa */
  -webkit-text-stroke: 0.028em var(--rosa); paint-order: stroke fill;
}
.titolo-porta .riga { white-space: nowrap; }
/* quando c'è una foto dentro, il testo piatto sotto si spegne: nelle
   dissolvenze le lettere lasciano intravedere il fondo, ed è voluto */
.titolo-porta.con-foto > .riga { color: transparent; transition: color 1.6s ease; }
/* Le due maschere: lo stesso testo, con dentro la stessa foto del fondo ma a
   colori invertiti (rosa dove sotto è verde). La foto è agganciata alla
   finestra, come quella sotto, così le due combaciano; due strati che si
   danno il cambio insieme a quelli del fondo. */
.titolo-porta .maschera {
  position: absolute; inset: 0; pointer-events: none;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;
  filter: url(#rosa); opacity: 0; transition: opacity 1.6s ease;
}
.titolo-porta .maschera.su { opacity: 1; }
.titolo-porta .riga { display: block; }
.costola-porta {
  position: absolute; right: 6vw; bottom: 40px; left: auto; top: auto; z-index: 1;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  white-space: nowrap; text-align: right;
  color: var(--ink); font-weight: 700; letter-spacing: 0.12em; line-height: 1.6;
}
.costola-porta .cursore { display: inline-block; width: 2px; height: 1em; background: var(--rosa); margin-left: 2px; animation: batte 0.9s steps(2, start) infinite; vertical-align: middle; }
@keyframes batte { to { visibility: hidden; } }
.costola-porta .pallino { width: 7px; height: 7px; border-radius: 50%; background: var(--rosa); flex: none; }
.porta form { width: min(36ch, 100%); display: flex; gap: 0; align-items: stretch; }
.porta .esito { text-align: left; }
.porta form input { flex: 1; background: none; border: 0; border-bottom: 1px solid var(--rosa); border-radius: 0; padding: 7px 0; color: var(--rosa); }
.porta form input:focus { outline: 0; border-bottom-width: 2px; }
.porta form input::placeholder { color: var(--faint); }
.porta .btn { white-space: nowrap; background: var(--rosa); color: var(--verde); border: 0; border-radius: 0; padding: 0 14px; font-size: 20px; line-height: 1; }
.porta .btn:hover { background: var(--amber); border-color: var(--amber); }
.porta .esito { margin: -22px 0 0; min-height: 1.4em; }
.io button { font: inherit; color: var(--faint); margin-left: 10px; text-decoration: underline dotted; text-underline-offset: 3px; padding: 0; }
.io button:hover { color: var(--ink); }

/* ── elenco a sinistra ── */
#vista-testi, #vista-autori { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 50px); }
.elenco { border-right: 1px solid var(--rule); padding: 14px 0; overflow-y: auto; max-height: calc(100vh - 50px); position: sticky; top: 50px; }
.capitolo { padding: 14px 18px 4px; }
.voce {
  display: block; width: 100%; text-align: left; padding: 6px 18px 6px 26px; line-height: 1.35;
  color: var(--mut); position: relative;
}
.voce:hover { color: var(--ink); }

.voce.on { color: var(--ink); }
.voce .nome { display: inline; }
.voce .sotto { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--faint); margin-top: 1px; }
/* Nell'elenco la riga di sotto sta su una riga sola: certe geografie sono un
   itinerario intero («Rojava (campagna di Til Hemîs: …), Siria») e mandarle a
   capo farebbe voci alte il doppio delle altre. Per intero stanno nel title. */
.elenco .voce .sotto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* il pallino: qui ci sei già passato */
.voce .pallino { position: absolute; left: 12px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--rosa); }
.voce .pallino.giu { background: var(--alert); }
.voce .pallino.forse { background: var(--amber); }
.voce .segni { float: right; font-family: var(--mono); font-size: 9px; color: var(--faint); }

/* ── la lettura: costola | testo | margine ── */
.lettura {
  position: relative;
  display: grid; grid-template-columns: 16px minmax(0, 1fr) 250px; column-gap: 30px; align-content: start;
  padding: 30px 30px 90px 26px;
}
.lettura > * { grid-column: 2; }
.lettura > .vuoto, .lettura > .scheda-autore { grid-column: 1 / -1; }
.vuoto { color: var(--faint); max-width: 52ch; }
.lettura-testa { margin: 0 0 22px; padding-right: 150px; }
.lettura-testa h1 { font-size: 22px; font-weight: normal; margin: 0; line-height: 1.3; }

/* la costola: capitolo, data, luogo e chi parla, in verticale a sinistra,
   che si legge dal basso come il dorso di un libro */
.costola {
  grid-column: 1; grid-row: 1 / span 8; align-self: start; justify-self: center;
  position: sticky; top: 72px;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  color: var(--faint); line-height: 16px;
}
.costola > * + *::before { content: ' · '; color: var(--faint); }
.costola .autore-link { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); padding: 0; }


/* le sigle delle lingue, in alto a destra del testo */
.modi { position: absolute; top: 30px; right: 30px; display: flex; gap: 14px; z-index: 2; }
/* Stesse schede della testa: niente bordo, niente stondatura; l'acceso è il
   blocco rosa che scorre sotto la sigla (vedi il gruppo .scheda più sotto). */
.modi button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mut); padding: 6px 4px;
}

.colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.colonne.sola { grid-template-columns: minmax(0, 66ch); }
.colonne.italiano .colonna.orig, .colonne.originale .colonna.ita { display: none; }
.colonne.italiano, .colonne.originale { grid-template-columns: minmax(0, 66ch); }
.testo { font-size: 16px; line-height: 1.7; max-width: 66ch; }
.testo p { margin: 0 0 1.1em; }
.testo p.citazione { border-left: 2px solid var(--frame); padding-left: 14px; color: var(--mut); }
.testo strong { font-weight: 600; letter-spacing: 0.01em; }
.testo em { font-style: italic; }
.testo .nota-rif { font-family: var(--mono); font-size: 9.5px; color: var(--amber); margin-left: 1px; }
.testo ol.note { margin: 1.4em 0 0; padding: 12px 0 0 1.6em; border-top: 1px dashed var(--rule); font-size: 13.5px; color: var(--mut); }
.testo ol.note li { margin-bottom: 4px; }
.testo.originale { color: var(--mut); }
.testo.originale strong { color: var(--ink); }

/* il passo commentato, e il commento, si accendono insieme */
mark.nota-mark {
  background: color-mix(in srgb, var(--rosa) 22%, var(--paper)); color: inherit;
  border-bottom: 1px solid color-mix(in srgb, var(--rosa) 50%, var(--paper)); border-radius: 2px; cursor: pointer;
}
mark.nota-mark.on { background: color-mix(in srgb, var(--rosa) 45%, var(--paper)); border-bottom-color: var(--rosa); }

/* la fonte, in fondo */
.fonte { margin: 22px 0 0; max-width: 66ch; font-size: 13.5px; color: var(--mut); display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.fonte a { color: var(--amber); text-decoration: underline dotted; text-underline-offset: 3px; word-break: break-all; }
.fonte a:hover { text-decoration-style: solid; }
.fonte .manca { color: var(--faint); font-style: italic; }

/* votare il testo: tre parole, fatte come le schede della testa — niente
   bordo, niente stondatura; quella scelta prende il blocco rosa sotto. */
.regge { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; padding-top: 14px; border-top: 1px dashed var(--rule); max-width: 66ch; }
.btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mut); padding: 6px 4px;
}
.btn.ghost { color: var(--faint); }
.conti { font-family: var(--mono); font-size: 10px; color: var(--faint); }

/* ── il margine dei commenti, a destra, all'altezza del passo ── */
.margine { grid-column: 3; grid-row: 1 / span 8; position: relative; min-height: 40px; }
.commento {
  position: absolute; left: 0; right: 0;
  border: 1px solid var(--rule); background: var(--card); border-radius: 6px; padding: 9px 12px;
  cursor: pointer; transition: border-color .15s, top .15s;
}
.commento:hover { border-color: var(--frame); }
.commento.on { border-color: var(--accent); box-shadow: 0 3px 16px color-mix(in srgb, var(--verde) 55%, transparent); }
.commento .capo { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.commento .ritira { font: inherit; color: var(--faint); text-decoration: underline; padding: 0; }
.commento .ritira:hover { color: var(--alert); }
.commento .passo { margin: 0 0 5px; padding: 0 0 0 8px; border-left: 2px solid var(--frame); color: var(--mut); font-style: italic; font-size: 12px; line-height: 1.5; }
.commento .passo.staccato { border-left-color: var(--alert); }
.commento .staccato-nota { font-family: var(--mono); font-style: normal; font-size: 8.5px; color: var(--alert); }
.commento p { margin: 0 0 4px; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--ink); }
.commento p:last-child { margin-bottom: 0; }
.commento .proposto::before { content: '→ '; color: var(--faint); }
.commento .perche { color: var(--mut); }
/* il modulo, nel margine */
.commento.scrivi { cursor: default; border-color: var(--accent); }
.commento.scrivi textarea { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; resize: vertical; margin-top: 6px; padding: 7px 9px; }
.commento.scrivi .azioni { display: flex; gap: 14px; justify-content: flex-end; margin-top: 6px; }
.commento.scrivi .azioni button { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); padding: 3px 0; }
.commento.scrivi .azioni button.invia { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── chi parla ── */
/* La scheda di chi parla, fatta come una vecchia carta d'identità: il nome
   grande in cima, e sotto i dati dentro una griglia rigata — un filo fra una
   riga e l'altra E un filo in verticale che stacca l'etichetta dal dato. È il
   verticale che fa la carta: senza, sono appunti incolonnati; con, è un modulo.

   La griglia occupa tutta la colonna e non si ferma a 66ch come la prosa. Le
   due cose vogliono larghezze diverse: un testo si legge, e oltre le sessanta
   battute l'occhio perde la riga; una tabella si consulta, si salta da
   un'etichetta al suo dato, e stringerla lascia un buco a destra e manda a capo
   valori che ci starebbero — «Colombia (FARC-EP, Bloque Oriental: Caquetá,
   Meta, Tolima)» su due righe è un a capo che nessuno ha chiesto.

   Niente sopratitolo «chi parla»: il nome grande in cima dice già di chi è la
   scheda, e quell'etichetta rubava la prima riga alla persona. */
.scheda-autore h1 {
  font-size: 26px; font-weight: normal; margin: 0 0 14px; line-height: 1.25;
}
.scheda-autore .carta {
  margin: 0 0 28px; font-size: 14px;
  border: 1px solid var(--frame);
}
.scheda-autore .carta .riga {
  display: grid; grid-template-columns: 18ch 1fr;
  border-bottom: 1px solid var(--rule);
}
.scheda-autore .carta .riga:last-child { border-bottom: none; }
.scheda-autore dt {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); line-height: 1.5;
  padding: 10px 14px;
  border-right: 1px solid var(--rule);
  /* Il filo verticale deve correre per tutta l'altezza della riga anche quando
     il dato va a capo e l'etichetta è una parola sola: `align-self: stretch` è
     già il comportamento della griglia, ma il padding-top da solo farebbe
     partire il testo dell'etichetta più in basso del dato. */
  align-self: stretch;
}
.scheda-autore dd { margin: 0; color: var(--ink); padding: 10px 14px; }

/* Stretta, la colonna fissa dell'etichetta strozza il dato: le due parti si
   mettono una sopra l'altra, il filo verticale sparisce — non ha più due
   colonne da separare — e restano gli orizzontali a dividere le righe. */
@media (max-width: 620px) {
  .scheda-autore .carta .riga { grid-template-columns: 1fr; }
  .scheda-autore dt { border-right: none; padding-bottom: 0; }
  .scheda-autore dd { padding-top: 2px; }
}

.scheda-autore .bio { max-width: 66ch; font-size: 16px; line-height: 1.7; }
.scheda-autore .bio p { margin: 0 0 1em; }
.suoi-testi { margin-top: 26px; max-width: 66ch; }
.suoi-testi .voce { padding: 8px 12px 8px 12px; margin-left: -12px; }

/* ── proposte (senza porta nel menu, per ora) ── */
.proposte { max-width: 78ch; margin: 0 auto; padding: 26px 22px 80px; }
.proposta { border-top: 1px solid var(--rule); padding: 18px 0 14px; }
.proposta .eti { display: block; margin-bottom: 6px; }
.proposta blockquote { margin: 0 0 8px; font-size: 16px; line-height: 1.65; }
.proposta .perche { color: var(--mut); font-size: 14px; margin: 0 0 12px; }
.voto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.voto input { max-width: 380px; padding: 5px 8px; font-size: 13px; }

/* ── modulo fonte ── */
.modulo { max-width: 60ch; margin: 0 auto; padding: 26px 22px 80px; display: flex; flex-direction: column; gap: 14px; }
.modulo h2 { font-weight: normal; font-size: 20px; margin: 0; }
.modulo .nota { color: var(--mut); margin: 0; }
.modulo label { display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.azioni { display: flex; gap: 10px; align-items: center; }
.esito { font-family: var(--mono); font-size: 10px; color: var(--amber); }

/* La selezione è rosa come il resto della pelle, non il blu del browser. */
::selection { background: color-mix(in srgb, var(--rosa) 45%, var(--verde)); color: var(--ink); }

/* ── fumetto sulla selezione ── */
.fumetto {
  position: absolute; z-index: 10; display: flex; gap: 2px; padding: 3px;
  background: var(--rosa); color: var(--verde); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.fumetto button { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; }
.fumetto button:hover { background: var(--verde); color: var(--rosa); }

@media (max-width: 1100px) {
  .lettura { grid-template-columns: 16px minmax(0, 1fr); }
  .margine { grid-column: 2; grid-row: auto; margin-top: 24px; }
  .commento { position: static; margin-bottom: 10px; }
}
@media (max-width: 900px) {
  #vista-testi, #vista-autori { grid-template-columns: 1fr; }
  .elenco { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  .lettura { grid-template-columns: 1fr; padding: 20px 18px 60px; }
  .lettura > *, .margine { grid-column: 1; }
  .costola { position: static; writing-mode: horizontal-tb; transform: none; grid-row: auto; justify-self: start; margin-bottom: 12px; }
  .modi { position: static; margin-bottom: 12px; }
  .lettura-testa { padding-right: 0; }
  .colonne { grid-template-columns: 1fr; }
}

/* ── il tratto: come si accende un titolo o un nome ──────────────────────────
   Il blocco corre da SINISTRA A DESTRA, a piena altezza fin dal primo pixel:
   è il gesto dell'evidenziatore, che si appoggia sulla parola e la attraversa.
   Non sale dal basso — una prima versione lo faceva crescere in altezza dopo
   la corsa, e quello che si vedeva era una sottolineatura che si gonfia, che
   non è quello che fa una mano con un pennarello in mano.

   Alla fine la parola sta dentro un blocco rosa pieno con le lettere invertite
   in verde. Il `padding` fa debordare il blocco dalle lettere senza spostare
   niente: su un elemento inline il padding verticale dipinge lo sfondo più alto
   e non tocca l'altezza della riga.

   PERCHÉ NON UNO PSEUDO-ELEMENTO, che sarebbe la via ovvia: nella colonna da
   250px i titoli vanno a capo, e un `::after` in posizione assoluta dentro un
   inline spezzato si dimensiona sull'unione dei frammenti — un blocco solo che
   scavalca le due righe e il vuoto in mezzo. Lo sfondo no: si ripete su ogni
   frammento, come fa un evidenziatore vero su una riga che gira. */
@property --tratto-larghezza {
  /* Il valore iniziale dev'essere indipendente dal calcolo — niente `em`, che
     dipende dal font-size. Se non lo è, la regola `@property` viene scartata
     per intero, `var()` non sostituisce niente, `background-size` ricade sul
     proprio valore iniziale `auto auto`, e il gradiente — che dimensioni
     proprie non ne ha — riempie tutto. Cioè: ogni parola dell'elenco
     evidenziata per sempre. */
  syntax: '<percentage>'; inherits: false; initial-value: 0%;
}

.scheda,
.modi button,
.btn,
.voce .nome,
.costola .autore-link,
.fonte .fonte-link {
  background-image: linear-gradient(var(--rosa), var(--rosa));
  background-repeat: no-repeat;
  background-position: 0 100%;
  /* Il ripiego dentro var() non è cosmetico: senza, un browser che non registra
     la proprietà ricade su `auto auto`, cioè di nuovo il blocco sempre acceso.
     Con il ripiego, al peggio si perde l'animazione e il blocco scatta. */
  background-size: var(--tratto-larghezza, 0%) 100%;
  transition: --tratto-larghezza .26s cubic-bezier(.4, 0, .2, 1),
              color .1s linear;
}
.voce .nome,
.costola .autore-link,
.fonte .fonte-link { padding: 0.12em 0.2em; }

.scheda:hover, .scheda.on,
.modi button:hover, .modi button.on,
.btn:hover, .btn.on,
.voce:hover .nome, .voce.on .nome,
.costola .autore-link:hover,
.costola .autore-link:focus-visible,
.fonte .fonte-link:hover,
.fonte .fonte-link:focus-visible {
  --tratto-larghezza: 100%;
  color: var(--verde);
  /* All'andata il colore aspetta che il blocco abbia coperto la parola; al
     ritorno cambia subito, se no per un istante resta verde su verde. */
  transition: --tratto-larghezza .26s cubic-bezier(.4, 0, .2, 1),
              color .1s linear .16s;
}

@media (prefers-reduced-motion: reduce) {
  .scheda, .modi button, .btn, .voce .nome, .costola .autore-link, .fonte .fonte-link { transition: none; }
  .foto-cella img, .foto-cella::after { transition: none; }
}

/* La fonte: la parola È il link, l'indirizzo non si stampa. Prende lo stesso
   blocco dei titoli, così «Fonte» si accende come si accende un nome. */
.fonte .fonte-link {
  color: var(--ink); text-decoration: none;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── le foto ────────────────────────────────────────────────────────────────
   Una griglia che prende tutta la pagina, non una colonna di lettura: qui non
   si legge, si guarda, e una fotografia dentro 96ch è un francobollo. I filtri
   sono per fronte e stanno in alto, fermi.

   DEL COPYRIGHT QUI NON C'È TRACCIA, ed è voluto (4.9.2026): il bollo dei
   diritti stava su ogni riquadro e se n'è andato. Quella domanda si risolve nel
   banco di chi cura, dove i permessi si chiedono davvero. */

.foto-testa { padding: 16px 22px 10px; border-bottom: 1px solid var(--rule); }
.foto-filtri { display: flex; flex-wrap: wrap; gap: 6px; }
.foto-filtro {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--rule); border-radius: 3px; padding: 4px 9px;
}
.foto-filtro:hover { color: var(--ink); border-color: var(--frame); }
.foto-filtro.on { color: var(--verde); background: var(--rosa); border-color: var(--rosa); }
.foto-filtro b { font-weight: 600; }

.foto-griglia {
  display: grid; gap: 10px; padding: 14px 22px 60px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.foto-cella {
  position: relative; padding: 0; display: block; width: 100%;
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
  transition: border-color .15s;
}
.foto-cella:hover, .foto-cella:focus-visible { border-color: var(--rosa); outline: none; }
.foto-cella img { display: block; width: 100%; height: 230px; object-fit: cover; background: var(--card); }

/* La mezzatinta al passaggio del mouse: la foto diventa verde e rosa, due toni
   soli. Non è un effetto: è il modo di far vedere che quella cella è viva senza
   muoverla e senza scurirla — una foto scurita sembra spenta, questa sembra
   accesa.
   COME FUNZIONA, perché a rileggerlo non è ovvio. L'immagine si porta in bianco
   e nero e si fonde in «screen» con il fondo della cella: i neri diventano il
   verde del fondo, i bianchi restano bianchi. Sopra passa uno strato rosa in
   «multiply», che porta i bianchi al rosa e lascia stare i neri. Due strati,
   due toni. `isolation` tiene la fusione dentro la cella, se no si mangerebbe
   anche quello che c'è dietro. */
.foto-cella { isolation: isolate; background: var(--verde); }
.foto-cella img { transition: filter .22s ease; }
.foto-cella:hover img, .foto-cella:focus-visible img {
  filter: grayscale(1) contrast(1.18) brightness(1.06);
  mix-blend-mode: screen;
}
.foto-cella::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--rosa-vivo); mix-blend-mode: multiply;
  opacity: 0; transition: opacity .22s ease;
}
.foto-cella:hover::after, .foto-cella:focus-visible::after { opacity: 1; }
.foto-cella .mio {
  position: absolute; left: 6px; bottom: 6px; z-index: 2; mix-blend-mode: normal;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 2px; color: var(--verde); background: var(--rosa);
}
.foto-cella .mio.si { background: #8fd8ae; }
.foto-cella .mio.forse { background: #e8c48a; }
.foto-cella .mio.no { background: var(--alert); }
/* Il conto dei sì: è l'ordine della griglia, e si legge sulla foto stessa. */
.foto-cella .conto {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 2px; color: var(--rosa); background: var(--verde);
}

/* Schermi larghi: si sta larghi. Guardare duecento foto è il caso in cui lo
   spazio serve davvero. */
@media (min-width: 1500px) { .foto-griglia { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (max-width: 620px) { .foto-griglia { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 12px; } }

/* ── la lente: una figura sola, grande quanto lo schermo ── */
body.con-lente { overflow: hidden; }
.lente {
  position: fixed; inset: 0; z-index: 40;
  background: color-mix(in srgb, var(--verde) 94%, black);
  display: grid; grid-template-columns: 1fr minmax(280px, 360px);
}
.lente-quadro { margin: 0; display: grid; place-items: center; padding: 26px; min-width: 0; min-height: 0; }
.lente-quadro img { max-width: 100%; max-height: calc(100vh - 52px); object-fit: contain; }
.lente-lato {
  border-left: 1px solid var(--rule); padding: 22px 20px 40px;
  overflow-y: auto; background: var(--paper);
}
.lente-soggetto { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.lente-bolli { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.lente-bolli .gen { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }
.lente-avviso {
  border: 1px solid var(--alert); border-radius: 3px; padding: 8px 10px;
  color: var(--amber); font-size: 12.5px; line-height: 1.5; margin: 0 0 14px;
}
.lente-copertina { display: flex; align-items: center; gap: 10px; padding: 10px 0 0; }
.lente-copertina .btn.on::before { content: '● '; }
.lente-voto { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 14px 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); }
.lente-voto .btn { padding: 4px 0; margin-right: 12px; display: inline; }
.lente-voto input { font-size: 12.5px; padding: 5px 8px; }
.lente-dati { padding-top: 14px; }
.lente-riga { margin: 0 0 9px; font-size: 12.5px; line-height: 1.55; color: var(--mut); }
.lente-riga .eti { display: block; margin-bottom: 2px; }
.lente-riga a { color: var(--mut); }

.lente-chiudi, .lente-passo {
  position: absolute; z-index: 2; color: var(--mut);
  font-size: 22px; line-height: 1; padding: 10px 14px;
  background: color-mix(in srgb, var(--verde) 70%, transparent);
  border-radius: 3px;
}
.lente-chiudi:hover, .lente-passo:hover { color: var(--ink); }
.lente-chiudi { top: 12px; right: calc(min(360px, max(280px, 28%)) + 12px); font-size: 15px; }
.lente-passo { top: 50%; transform: translateY(-50%); font-size: 30px; }
.lente-passo.prima { left: 10px; }
.lente-passo.dopo { left: auto; right: calc(min(360px, max(280px, 28%)) + 10px); }

/* Sotto una certa larghezza la lente non può stare affiancata: la scheda passa
   sotto l'immagine e si scorre, invece di schiacciare la figura a un francobollo. */
@media (max-width: 860px) {
  .lente { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; overflow-y: auto; }
  .lente-quadro { padding: 14px; }
  .lente-quadro img { max-height: 56vh; }
  .lente-lato { border-left: 0; border-top: 1px solid var(--rule); }
  .lente-chiudi { right: 10px; }
  .lente-passo.dopo { right: 10px; }
}

/* Il tasto che toglie una foto: sta in fondo alla lente e lo vede solo chi
   amministra. È l'unico gesto del tavolo che fa sparire qualcosa agli occhi di
   tutti gli altri, quindi non sta vicino ai tasti del voto e non è invitante. */
.lente-togli { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.lente-togli .btn.togli { color: var(--alert); padding: 4px 0; }
.lente-togli .hint { margin: 4px 0 0; font-size: 11px; color: var(--faint); line-height: 1.45; }

/* Il tasto della porta: mette una foto dietro al titolo, prima di entrare.
   Compare solo a chi amministra e solo sulle foto che la porta può mostrare —
   la home è l'unico posto dove una foto esce dal tavolo e la vede chi passa. */
.lente-porta { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.lente-porta .btn.porta { padding: 4px 0; color: var(--mut); }
.lente-porta .btn.porta.on { color: var(--rosa); }
.lente-porta .hint { margin: 4px 0 0; font-size: 11px; color: var(--faint); line-height: 1.45; }