/*
   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; }


/* ---------------------------------------------------------------- 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) {
  /* 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; }
  .postilla-nota { display: block; }

}

.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; }
}