/*
   controapologetica.info — foglio di stile.

   Un archivio di circa mille pagine di saggistica: la leggibilita' del testo
   lungo viene prima di ogni altra cosa. La colonna del testo resta larga
   quanto serve a stare intorno alle settanta battute per riga, che e' la
   misura oltre la quale l'occhio comincia a perdere l'inizio della riga
   successiva; la cornice della pagina invece respira piu' larga, cosi' il
   sito occupa lo schermo senza allungare le righe.
*/

:root {
  --inchiostro:      #1c1a17;
  --inchiostro-tenue:#5d574f;
  --carta:           #fbfaf7;
  --carta-scura:     #f2efe8;
  --filo:            #ddd8cd;
  --rimando:         #7a2718;
  /* Il rosso del marchio del 2006, ripreso tale e quale dalla GIF originale.
     Non e' quello dei collegamenti: quello e' piu' scuro, e va bene per un
     testo lungo; questo e' del nome, e li' il grido ci vuole. */
  --marchio-rosso:   #e00505;

  --misura:        46rem;   /* colonna del testo */
  --misura-larga:  64rem;   /* testata, piede, indici */
  --margine:        1.5rem;
  --corsia:         6.5rem; /* la striscia a lato dove sta la segnalazione */
}

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

html {
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Il browser, quando qualcosa sopra cambia altezza, sposta lo scorrimento
     per tenere fermo il testo. Con una testata che si stringe quel soccorso
     diventa il problema: sposta la pagina proprio mentre la testata decide se
     stringersi. Qui non serve — nel testo non c'e' niente che si carichi dopo
     e faccia saltare la riga — e senza, la testata sta ferma. */
  overflow-anchor: none;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  line-height: 1.66;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------- impaginazione */

/* Tutte le pagine hanno la stessa cornice, quindi lo stesso margine a
   sinistra. A cambiare e' soltanto quanto si allunga la riga di testo:
   il testo corrente si ferma prima, gli elenchi usano tutta la larghezza. */
.testata, .piede, main {
  width: min(100% - var(--margine) * 2, var(--misura-larga));
  margin-inline: auto;
}

main { padding-block: 3rem 5rem; }

/* Il testo corrente, allineato a sinistra come tutto il resto. */
article, .scorrimento, .apertura .sommario, .apertura .occhiello {
  max-width: var(--misura);
}

/* --------------------------------------------------------------- testata */

/* La testata resta in cima mentre si scorre. La striscia va da un bordo
   all'altro dello schermo — altrimenti il testo si vedrebbe passare ai suoi
   lati — mentre il contenuto dentro resta nella cornice comune. */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--carta);
  border-bottom: 1px solid var(--filo);
}

.testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.4rem;
  padding-block: 1.5rem 1.1rem;
}

/* Appena la pagina si muove la testata si stringe: via il motto, campanile e
   nome piu' piccoli. Resta quanto serve a sapere dove si e' e ad andare
   altrove, senza rubare schermo a un testo che si legge per venti minuti. */
.barra.compatta .testata       { padding-block: .5rem .45rem; }
.barra.compatta .marchio-motto { display: none; }
.barra.compatta .marchio-segno { height: 1.9rem; }
.barra.compatta .marchio-nome  { font-size: 1.1rem; }

@media (prefers-reduced-motion: no-preference) {
  .testata       { transition: padding-block .18s ease; }
  .marchio-segno { transition: height .18s ease; }
  .marchio-nome  { transition: font-size .18s ease; }
}

/* Chi arriva a un punto preciso della pagina non deve atterrare sotto la
   barra. */
h1, h2, h3, h4, h5, h6, :target { scroll-margin-top: 5.5rem; }

/* Il marchio: il campanile che l'autore aveva messo in filigrana nella sua
   pagina d'ingresso, ricalcato come sagoma, e accanto il nome col rosso
   originale sulla prima parola. Il disegno e' decorativo — il nome e' li'
   accanto in lettere — quindi resta fuori dal testo alternativo. */
.marchio {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
}
.marchio-segno { flex: none; height: 2.7rem; width: auto; }
.marchio-nome  { display: block; font-size: 1.3rem; letter-spacing: .01em; }
.marchio-contro { color: var(--marchio-rosso); }
.marchio-motto {
  display: block;
  font-size: .84rem;
  font-style: italic;
  color: var(--inchiostro-tenue);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.15rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .82rem;
}
.menu a { color: var(--inchiostro-tenue); }
.menu-disteso { margin-left: auto; }

/* Il menu a scomparsa. Il bottone e' un <summary>: il browser sa gia' aprirlo
   e chiuderlo, da tastiera e da lettore di schermo, e continua a farlo anche
   con JavaScript spento. La freccetta che i browser gli mettono davanti qui
   non serve, c'e' gia' il segno delle tre righe. */
.menu-tascabile { display: none; margin-left: auto; }

.menu-tascabile > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: -.55rem;
  color: var(--inchiostro-tenue);
  cursor: pointer;
}
.menu-tascabile > summary::-webkit-details-marker { display: none; }
.menu-tascabile > summary:focus-visible {
  outline: 2px solid var(--rimando);
  outline-offset: -3px;
}

/* Il pannello scende sotto la barra e la copre per tutta la larghezza: si
   appoggia alla striscia fissa, non alla riga in cui sta il bottone. */
.menu-aperto {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  flex-direction: column;
  gap: 0;
  padding: .2rem var(--margine) .9rem;
  background: var(--carta);
  border-bottom: 1px solid var(--filo);
}
.menu-aperto a {
  padding: .6rem 0;
  font-size: .95rem;
  border-top: 1px solid var(--carta-scura);
}
.menu-aperto a:first-child { border-top: 0; }

/* -------------------------------------------------------------- tipografia */

h1 {
  font-size: 1.75rem;
  font-weight: normal;
  line-height: 1.22;
  margin: 0 0 1rem;
  letter-spacing: -.005em;
}

h2 { font-size: 1.2rem;  font-weight: normal; margin: 2.6rem 0 .7rem; }
h3 { font-size: 1.04rem; font-weight: bold;   margin: 2.1rem 0 .6rem; }
h4, h5, h6 { font-size: .97rem; font-weight: bold; margin: 1.8rem 0 .5rem; }

p { margin: 0 0 1.2rem; }

a { color: var(--rimando); text-decoration-thickness: .05em; text-underline-offset: .16em; }
a:hover { text-decoration-thickness: .12em; }

em { font-style: italic; }
strong { font-weight: bold; }

blockquote {
  margin: 1.5rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--filo);
  color: var(--inchiostro-tenue);
}

hr {
  border: 0;
  height: 1px;
  background: var(--inchiostro-tenue);
  opacity: .35;
  width: 12rem;
  margin: 2.4rem auto;
}

ul, ol { margin: 0 0 1.2rem; padding-left: 1.5rem; }
li { margin-bottom: .35rem; }

sup, sub { line-height: 0; font-size: .74em; }

/* Niente sillabazione: il testo non e' giustificato, quindi spezzare le
   parole a fine riga non guadagna nulla e in italiano legge male. */
.testo { hyphens: none; -webkit-hyphens: none; }

/* Sotto il titolo della pagina si apre lo stesso respiro che apre una
   sezione: lo stacco sta sul blocco del testo e non sul titolo, cosi' viene
   uguale sia quando sotto il titolo c'e' la data sia quando non c'e'. */
.testo { margin-top: 2.6rem; }
.testo p:first-of-type { margin-top: 0; }

/* Impaginazione da libro, come l'autore componeva i suoi testi: lo stacco fra
   i paragrafi lo segna il rientro della prima riga, non una riga bianca. Le
   due cose insieme sarebbero ridondanti, quindi lo spazio verticale sparisce
   e resta un'interlinea larga. Vale solo sulla prosa: gli elenchi di voci
   brevi, come le Abbreviazioni, restano staccati. */
.prosa p {
  margin-bottom: 0;
  text-indent: 1.6em;
}

/* I titoli interni del testo sono in grassetto tutti e tre i livelli: il
   corpo li distingue. Vale solo sulla prosa — in home la stessa etichetta
   serve per i nomi delle categorie, che restano leggeri. */
.prosa h2 { font-weight: bold; }

/* Nell'originale il rientro c'e' su ogni paragrafo, anche sul primo e anche
   su quello che segue un titolo: l'autore componeva cosi' e la pagina lo
   rispetta. */

/* L'autore staccava i gruppi di paragrafi con una riga bianca. Quella riga
   e' conservata nei file come riga vuota in piu', e qui torna a essere quello
   che era: una riga intera di bianco, mentre fra i paragrafi di uno stesso
   gruppo continua a bastare il rientro. */
.prosa p.stacco { margin-top: 1.66em; }

/* Dopo un titolo o una riga divisoria lo stacco c'e' gia': non si somma. */
.prosa > p.stacco:first-child,
.prosa h2 + p.stacco, .prosa h3 + p.stacco, .prosa h4 + p.stacco,
.prosa h5 + p.stacco, .prosa h6 + p.stacco,
.prosa hr + p.stacco {
  margin-top: 0;
}

/* Il sommario non e' prosa: e' un indice. Niente rientro, ne' sulle voci
   ne' sulla riga che le introduce, e le voci stanno strette fra loro. */
.prosa p.sommario { text-indent: 0; margin-bottom: .3rem; }
.prosa p.voce { text-indent: 0; }
.prosa p.voce + p:not(.voce) { margin-top: 1.2rem; }

/* Dove l'autore incolonnava con i tabulatori - elenchi di riferimenti,
   testi numerati - l'incolonnamento porta un'informazione e va tenuto.
   Nessun filetto: nell'originale non c'erano, erano colonne e basta. La
   prima colonna sta stretta quanto le serve, la seconda prende il resto;
   se la riga non ci sta, la tabella scorre per conto suo invece di
   allargare la pagina. */
.prosa table {
  border-collapse: collapse;
  margin-block: 1.2rem;
  /* Una tabella comincia dove comincia il testo: lo stesso rientro dei
     paragrafi, cosi' due elenchi vicini - uno in tabella e uno no -
     partono dalla stessa riga verticale. Larghezza al contenuto, che e'
     come stavano le colonne nell'originale. */
  margin-left: 1.6em;
}
.prosa table td {
  text-indent: 0;
  vertical-align: baseline;
  padding: .12rem 0;
}
.prosa table td:first-child {
  width: 1%;
  white-space: nowrap;
  padding-right: 1.4em;
}
.prosa .tabella {
  overflow-x: auto;
}

/* Una nota a pie' di pagina non e' prosa: niente rientro, e sta staccata
   dal testo dalla riga divisoria o dallo spazio. */
.prosa p.nota { text-indent: 0; }

/* Le note stanno in fila in fondo alla pagina: senza un po' d'aria prima
   di ognuna si leggerebbero come un unico blocco. Lo stacco va su ogni
   nota, non solo fra due che si toccano: una nota lunga prosegue in
   paragrafi normali, e la nota dopo va staccata da quelli. */
.prosa p.nota:not(.avvertenza) { margin-top: 1.2rem; }

/* L'avvertenza in testa al testo e' una nota che non commenta un punto ma
   tutta la pagina: sta prima del testo, quindi va detta piu' piano - corpo
   minore, inchiostro tenue - e lascia sotto di se' uno stacco largo, cosi'
   si vede dove comincia davvero il testo. */
.prosa p.nota.avvertenza {
  font-size: .9em;
  line-height: 1.6;
  color: var(--inchiostro-tenue);
  margin-bottom: .8rem;
}

/* L'avvertenza puo' essere fatta di piu' paragrafi: stanno stretti fra
   loro, e lo stacco largo viene una volta sola, dove finisce. */
.prosa p.nota.avvertenza + :not(.avvertenza) { margin-top: 2.4rem; }

/* Dentro gli elenchi il rientro non c'entra. Dentro una citazione invece
   si': i documenti che l'autore riporta per esteso sono prosa come il resto
   e vanno letti allo stesso modo. */
.prosa li { text-indent: 0; }
.prosa blockquote p { text-indent: 1.6em; }

.prosa blockquote,
.prosa ul, .prosa ol { margin-block: 1.2rem; }

/* Un documento citato per esteso e' un blocco solo, con dentro i suoi
   paragrafi. I titoli che quel documento si porta dietro sono suoi, non
   della pagina: restano centrati come nell'originale e non entrano nella
   struttura del sito. */
/* Dentro la citazione i paragrafi si susseguono come nella prosa: li
   distingue il rientro, non una riga di bianco. Solo dove l'autore aveva
   lasciato una riga vuota torna lo stacco. */
.prosa blockquote p.stacco { margin-top: 1.66em; }

.prosa blockquote p.titolo-citato {
  text-indent: 0;
  text-align: center;
  font-weight: bold;
  margin-top: 1.7em;
}

.prosa blockquote p.titolo-citato.minore { font-weight: normal; }

/* Data e firma in calce a un documento citato: a destra, come sul foglio. */
.prosa blockquote p.titolo-citato.firma {
  text-align: right;
  font-weight: normal;
  margin-top: 1.2em;
}

.prosa blockquote p:first-child { margin-top: 0; }

.prosa blockquote p.titolo-citato + p.titolo-citato { margin-top: .9em; }

/* ----------------------------------------------------------- annotazioni */

.minuto, .quando, .quanti, .etichetta {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .79rem;
  color: var(--inchiostro-tenue);
}

.quando { font-style: normal; margin: -.6rem 0 0; }
.occhiello { font-style: italic; color: var(--inchiostro-tenue); margin-top: -.5rem; }
.sommario { font-size: 1.04rem; }

.briciole {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .79rem;
  color: var(--inchiostro-tenue);
  margin-bottom: 1.4rem;
}
.briciole a { color: var(--inchiostro-tenue); }

/* ------------------------------------------------------------------ home */

.apertura { margin-bottom: 3.2rem; }

.categoria { margin-bottom: 2.8rem; }
.categoria h2 {
  margin: 0 0 .8rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--filo);
  font-size: .84rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--inchiostro-tenue);
}

.sezioni, .indice { list-style: none; padding: 0; margin: 0; }

/* Sugli schermi larghi gli elenchi si dispongono su due colonne: sono voci
   brevi, incolonnarle tutte su una riga sola sprecherebbe spazio. */
@media (min-width: 52rem) {
  .sezioni, .indice { columns: 2; column-gap: 3rem; }
  .sezioni li, .indice li { break-inside: avoid; }
}

.sezioni li, .indice li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .36rem 0;
  border-bottom: 1px solid var(--carta-scura);
}

.sezioni a, .indice a { flex: 1; }
.quanti, .quando { flex: none; }

/* Il motto in chiusura dell'indice. Due filetti e le virgolette basse: si
   vede che e' una frase presa altrove e messa li' apposta, non l'ultima riga
   dell'elenco. */
.motto {
  max-width: var(--misura);
  margin: 3.2rem 0 0;
  padding: 1.3rem 0;
  border-top: 1px solid var(--filo);
  border-bottom: 1px solid var(--filo);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}
.motto span { font-style: normal; color: var(--inchiostro-tenue); }

/* ------------------------------------------------- scorrimento e piede */

.scorrimento {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 3.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--filo);
}
.scorrimento a { flex: 1 1 13rem; text-decoration: none; }
.scorrimento a:hover span:last-child { text-decoration: underline; }
.scorrimento .succ { text-align: right; }
.etichetta { display: block; margin-bottom: .15rem; }

.piede {
  border-top: 1px solid var(--filo);
  padding-block: 1.5rem 2.8rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .79rem;
  color: var(--inchiostro-tenue);
}
.piede a { color: var(--inchiostro-tenue); }
.piede p { margin: 0 0 .4rem; }

/* La firma a sinistra e il rimando alla protezione dei dati contro il margine
   destro, sulla stessa riga. La distanza non e' scritta da nessuna parte: la
   decide lo spazio che avanza. Quando non ci stanno affiancati il rimando
   scende sotto, e il margine automatico lo tiene comunque a destra. */
.piede .firma { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.piede .firma .privacy { margin-left: auto; }


/* ---------------------------------------------------------------- ricerca */

/* Un rettangolo e basta: nessuna etichetta a vista, nessun pulsante. Il testo
   dentro dice cosa fa, e si invia con Invio; su telefono la tastiera mostra
   gia' il tasto di ricerca. */

.cerca { flex: 0 1 14rem; }
.cerca label,
.cerca-grande label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.cerca input,
.cerca-grande input {
  width: 100%;
  min-width: 0;
  /* Safari veste input[type=search] con un aspetto suo — angoli tondi e
     carattere di sistema — e senza questo ignora quasi tutto il resto. */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  color: var(--inchiostro);
  background: #fff;
  border: 1px solid var(--filo);
  border-radius: 0;
}
.cerca input::-webkit-search-decoration,
.cerca-grande input::-webkit-search-decoration { -webkit-appearance: none; }

.cerca input {
  font-size: .92rem;
  padding: .36rem .6rem;
}

.cerca input::placeholder,
.cerca-grande input::placeholder {
  color: var(--inchiostro-tenue);
  opacity: .75;
  font-style: italic;
}

.cerca input:focus-visible,
.cerca-grande input:focus-visible {
  outline: none;
  border-color: var(--inchiostro-tenue);
  box-shadow: inset 0 -2px 0 var(--rimando);
}

/* Nella pagina dei risultati il titolo dice gia' cos'e': il box e' solo piu'
   grande. */
.cerca-grande {
  max-width: var(--misura);
  margin: 0 0 2.2rem;
}
.cerca-grande input {
  font-size: 1.08rem;
  padding: .55rem .75rem;
}

.avviso { max-width: var(--misura); }

.risultati {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  max-width: var(--misura);
}
.risultati > li {
  padding: 1rem 0;
  border-top: 1px solid var(--carta-scura);
}
.risultati > li:first-child { border-top: 0; padding-top: 0; }

.risultato-titolo { font-size: 1.08rem; }

.risultato-dove {
  margin: .15rem 0 .4rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .78rem;
  color: var(--inchiostro-tenue);
}
.risultato-dove a { color: var(--inchiostro-tenue); }

.risultato-stralcio {
  margin: 0;
  color: var(--inchiostro-tenue);
  font-size: .95rem;
}

mark {
  background: #f6e9c9;
  color: inherit;
  padding: 0 .1em;
}


/* ------------------------------------------------------------ segnalazioni */

.segnala {
  margin: 2.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--carta-scura);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .8rem;
  color: var(--inchiostro-tenue);
  text-indent: 0;
}
.segnala a { color: var(--inchiostro-tenue); }
.segnala .postilla { display: none; }

/* Accanto alla segnalazione, il modo di risalire in cima. C'era nel sito del
   2006 e su una pagina lunga e' l'unico appiglio per tornare al titolo: sta
   dove sta la segnalazione, e come lei accompagna la lettura. */
.segnala .risali { display: block; margin-top: .55rem; }

/* Dove c'e' un margine destro da occupare, la segnalazione diventa una
   postilla che accompagna la lettura invece di aspettare in fondo. Sta in
   coda nel codice — e' li' che ha senso incontrarla leggendo ad alta voce, o
   senza fogli di stile — e a spostarla e' soltanto la presentazione.

   Stretta com'e' basta un portatile piccolo: da 720 px in su l'articolo si
   riserva una corsia sul lato e il testo si stringe quel tanto che serve.
   La colonna di lettura non ci perde nulla, perche' 46rem erano gia' larghe
   per il carattere; sotto quella soglia la corsia sparisce e la frase torna
   distesa in fondo al testo.

   La corsia e' alta quanto l'articolo e non intercetta il puntatore, cosi'
   non ruba la selezione al testo: dentro, la nota si ferma poco sotto la
   testata mentre si scorre e si arresta da sola quando l'articolo finisce. */
@media (min-width: 45rem) {
  /* La corsia prende quello che avanza, e niente di piu'. Sotto i 46rem di
     testo non si allarga mai — la colonna di lettura viene prima di tutto —
     e sopra si ferma a 10rem, che e' quanto basta perche' "Segnala un errore"
     e "Torna a inizio testo" stiano ciascuna su una riga sola. Nel mezzo la
     frase va a capo da sola, che e' come si e' sempre vista finora.
     Il rem tolto in fondo al conto e' il margine di sicurezza per la barra di
     scorrimento, che 100vw conta e la larghezza della pagina no. */
  :root {
    --corsia: clamp(
      6.5rem,
      100vw - var(--misura) - var(--margine) * 2 - 1rem,
      10rem
    );
  }

  /* Il riquadro cresce di quanto misura la corsia, cosi' dove c'e' spazio la
     riga di testo resta lunga esattamente come prima. */
  .con-postilla, .scorrimento {
    max-width: calc(var(--misura) + var(--corsia));
    padding-right: var(--corsia);
  }

  .con-postilla { position: relative; }

  .segnala {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(var(--corsia) - 1.6rem);
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
  }

  .segnala .distesa { display: none; }

  .segnala .postilla {
    display: block;
    position: sticky;
    /* Piu' o meno a meta' schermo: sotto la barra fissa della testata, e
       all'altezza in cui l'occhio sta leggendo. */
    top: 38vh;
    padding-left: .7rem;
    border-left: 1px solid var(--filo);
    font-size: .76rem;
    line-height: 1.3;
    pointer-events: auto;
  }

  .segnala .postilla a { text-decoration-thickness: .04em; }

}

.modulo {
  max-width: var(--misura);
  margin-top: 1.8rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.modulo p { margin: 0 0 1.2rem; }

.modulo label {
  display: block;
  margin-bottom: .3rem;
  font-size: .82rem;
  color: var(--inchiostro-tenue);
}

.modulo input[type="text"],
.modulo input[type="email"],
.modulo textarea {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.5;
  padding: .5rem .7rem;
  color: var(--inchiostro);
  background: #fff;
  border: 1px solid var(--filo);
  border-radius: 0;
  resize: vertical;
}
.modulo input:focus-visible,
.modulo textarea:focus-visible {
  outline: none;
  border-color: var(--inchiostro-tenue);
  box-shadow: inset 0 -2px 0 var(--rimando);
}

.modulo button {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .9rem;
  padding: .5rem 1.2rem;
  color: var(--carta);
  background: var(--inchiostro-tenue);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.modulo button:hover { background: var(--inchiostro); }

/* Il campo trappola: invisibile a chi legge, compilato solo dai programmi. */
.esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------- adattamenti */

/* Schermi molto grandi: cresce il corpo, non la lunghezza della riga. */
@media (min-width: 90rem) {
  html { font-size: 118.75%; }
}

/* Sotto questa misura le quattro voci non stanno piu' sulla riga: passano nel
   menu a scomparsa, e la ricerca scende sotto restando in vista — su un
   archivio di mille pagine e' il modo principale di trovare qualcosa, non un
   accessorio da nascondere. */
@media (max-width: 52rem) {
  .menu-disteso   { display: none; }
  .menu-tascabile { display: block; }
  .cerca { flex: 1 0 100%; order: 3; }
}

@media (max-width: 40rem) {
  :root { --margine: 1.15rem; }
  html { font-size: 100%; }
  main { padding-block: 2rem 3.2rem; }
  .testata { padding-block: 1.2rem .9rem; }
  .marchio { gap: .55rem; }
  .marchio-segno { height: 2.3rem; }
  h1 { font-size: 1.45rem; }
  .scorrimento .succ { text-align: left; }
}

@media print {
  .barra, .testata, .menu, .scorrimento, .piede, .briciole { display: none; }
  body { background: #fff; }
  main, article { width: auto; max-width: none; padding-right: 0; }

  /* Su carta non c'e' scorrimento da seguire: la nota torna in fondo, distesa. */
  .segnala {
    position: static;
    width: auto;
    height: auto;
    margin: 2.6rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--carta-scura);
  }
  .segnala .postilla { display: none; }
  .segnala .distesa  { display: inline; }
}