@charset "utf-8";

/* ==========================================================================
   pastadimandorla.it
   Foglio unico. Nessun componente in comune con gli altri domini della rete.

   Archetipo: TAVOLA A PIENA LARGHEZZA + MARGINE DELLE FONTI.
   La colonna di sinistra non contiene testo di lettura: contiene solo
   l'etichetta di provenienza di ogni blocco. Non e' una scelta grafica --
   la condizione D2 del test anti-doorway chiede che la prova sia visibile
   in pagina, e cosi' se manca si vede a occhio nudo.

   Un solo breakpoint. @media print e prefers-reduced-motion non contano
   come breakpoint: non spostano il layout, lo adattano al mezzo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Caratteri -- self-hosted, nessuna richiesta a domini esterni,
      quindi nessun cookie di terze parti e nessun banner.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/syne-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/syne-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Literata e' un carattere variabile sull'asse opsz: un solo file copre
   400 e 600. Il peso si chiede normalmente, ci pensa il font. */
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/literata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/literata-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/dmmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/dmmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --------------------------------------------------------------------------
   2. Vocabolario
      I nomi nascono dal contenuto del sito: glassa, foglio, mandorla,
      zucchero, legante. Nessuno collide con i token degli altri domini
      (registro-design.md sezione 4).
   -------------------------------------------------------------------------- */

:root {
  --glassa:      #cdc2db;   /* fondo pagina */
  --glassa-alta: #ded6e7;   /* fondo di sezione alternata */
  --foglio:      #ffffff;   /* superficie di tavole e schede */
  --mandorla:    #332740;   /* inchiostro, e il segmento "mandorle" */
  --zucchero:    #ffffff;   /* il segmento "zucchero": bianco con filetto */
  --legante:     #a21d8f;   /* uovo, acqua, comandi, marcatori */
  --velina:      #4e4459;   /* note, date, didascalie */
  --riga:        #a99cb8;   /* bordi */
  --riga-tenue:  #bfb3cc;

  --specchio:      64ch;    /* misura della colonna di lettura */
  --margine-fonti: 11.5rem; /* colonna delle etichette di provenienza */
  --passo:         2.75rem; /* ritmo verticale fra i blocchi */
  --stacco:        1.75rem; /* distanza fra colonna fonti e lettura */
  --bordo-pagina:  1.375rem;

  --corpo:      1.0625rem;
  --interlinea: 1.65;

  color-scheme: light dark;
}

/* Variante scura: stessi ruoli, stesse tinte, luminanze scambiate.
   Non e' una seconda palette -- e' la stessa letta al contrario. */
@media (prefers-color-scheme: dark) {
  :root {
    --glassa:      #221a2b;
    --glassa-alta: #2c2237;
    --foglio:      #171221;
    --mandorla:    #ece5f2;
    --zucchero:    #171221;
    --legante:     #e77ad3;
    --velina:      #b6a9c4;
    --riga:        #4b3f59;
    --riga-tenue:  #3a3046;
  }
}


/* --------------------------------------------------------------------------
   3. Base
      Volutamente corta. I due siti gia' costruiti condividono un reset quasi
      identico e lo stile dei link carattere per carattere (registro-design.md
      sezione 4): qui non si riusa niente di quello.
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--glassa);
  color: var(--mandorla);
  font-family: "Literata", Georgia, "Times New Roman", serif;
  font-size: var(--corpo);
  line-height: var(--interlinea);
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

img, svg, table { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: "Syne", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1 { font-size: 2.4rem;   line-height: 1.1; }
h2 { font-size: 1.55rem;  line-height: 1.2; margin-top: 0.4em; }
h3 { font-size: 1.15rem;  line-height: 1.25; }
h4 { font-size: 1rem;     line-height: 1.3; }

p, ul, ol, dl { margin: 0 0 1.1em; }
li { margin-bottom: 0.35em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

/* Stile dei link deliberatamente diverso da quello condiviso da 05 e 06,
   che usano offset 0.16em e spessore 1px identici. */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--legante);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.22em;
}
a:hover, a:focus-visible {
  text-decoration-thickness: 0.18em;
  color: var(--legante);
}
a:focus-visible {
  outline: 2px solid var(--legante);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--legante); color: #fff; }

abbr[title] { text-decoration: underline dotted; cursor: help; }

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

.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mandorla);
  color: var(--glassa);
  padding: 0.7em 1.1em;
  z-index: 10;
}
.salta-al-contenuto:focus {
  left: 0;
}


/* --------------------------------------------------------------------------
   4. L'archetipo
   -------------------------------------------------------------------------- */

.foglio-pagina {
  max-width: calc(var(--margine-fonti) + var(--stacco) + var(--specchio) + 2rem);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

/* Un blocco = un'affermazione + la sua prova.
   La prova sta a sinistra, il testo a destra, e sono nella stessa riga. */
.blocco {
  display: grid;
  grid-template-columns: var(--margine-fonti) minmax(0, 1fr);
  column-gap: var(--stacco);
  align-items: start;
  margin-bottom: var(--passo);
}
.blocco > * { grid-column: 2; }

/* L'etichetta di provenienza. Se un blocco non ce l'ha, si vede subito:
   e' esattamente lo scopo. */
.prova {
  grid-column: 1;
  grid-row: 1 / span 99;
  font-family: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--velina);
  padding-top: 0.42em;
  border-top: 2px solid var(--legante);
  hyphens: auto;
}
.prova b {
  display: block;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--legante);
  margin-bottom: 0.35em;
}
.prova a { text-decoration-thickness: 0.07em; }

/* "verificato di persona" e' l'altra prova ammessa, e va distinta a colpo
   d'occhio da quella documentale: e' l'unica che nessun altro puo' avere. */
.prova--persona { border-top-color: var(--mandorla); }
.prova--persona b { color: var(--mandorla); }

/* Le tavole sono il prodotto: escono da entrambe le colonne. */
.al-vivo { grid-column: 1 / -1; }


/* --------------------------------------------------------------------------
   5. Testata e navigazione
   -------------------------------------------------------------------------- */

.testata {
  border-bottom: 1px solid var(--riga);
  padding-block: 1.1rem;
  margin-bottom: 2.25rem;
}
.testata .foglio-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.marchio {
  font-family: "Syne", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.marchio:hover { color: inherit; }
.marchio span { color: var(--legante); }

.navigazione {
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.775rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
}
.navigazione a { text-decoration-thickness: 0.08em; }
.navigazione [aria-current] {
  text-decoration-color: var(--mandorla);
  text-decoration-thickness: 0.16em;
}


/* --------------------------------------------------------------------------
   6. La griglia dei cento -- elemento firma
      Cento celle, ognuna una parte su cento dell'impasto. Il totale e'
      sempre 100 per costruzione: e' la famiglia della torta, non della barra.

      Regola che non si viola mai: il numero e' SEMPRE scritto in testo
      accanto alla griglia. Il disegno non porta mai un'informazione che non
      ci sia anche come testo -- cosi' il fatto sopravvive a CSS disattivato,
      a SVG non renderizzato e a un lettore di schermo.
   -------------------------------------------------------------------------- */

.cento {
  display: block;
  width: 100%;
  max-width: 8.5rem;
  height: auto;
  shape-rendering: crispEdges;
}
/* Le celle sono disegnate a blocchi di riga e il reticolo le separa con un
   tracciato solo: stesso disegno di cento quadrati, un ventesimo del sorgente. */
.cento .c-mandorla { fill: var(--mandorla); }
.cento .c-zucchero { fill: var(--zucchero); }
.cento .c-legante  { fill: var(--legante); }
.cento .c-terzo    { fill: var(--velina); }
.cento .c-quarto   { fill: var(--riga); }
.cento .reticolo {
  fill: none;
  stroke: var(--riga-tenue);
  stroke-width: 0.06;
  vector-effect: non-scaling-stroke;
}
.cento { border: 1px solid var(--riga); background: var(--foglio); }

.cento-didascalia {
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--velina);
  margin-top: 0.5em;
}
.cento-didascalia b { color: var(--mandorla); font-weight: 500; }

/* Legenda: i quadratini sono decorativi, il testo porta il significato. */
.legenda-cento {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--velina);
}
.legenda-cento li { margin: 0; display: flex; align-items: center; gap: 0.45em; }
.legenda-cento i {
  width: 0.72em; height: 0.72em;
  border: 1px solid var(--riga);
  flex: none;
}
.legenda-cento .l-mandorla { background: var(--mandorla); }
.legenda-cento .l-zucchero { background: var(--zucchero); }
.legenda-cento .l-legante  { background: var(--legante); }


/* --------------------------------------------------------------------------
   7. La tavola di disambiguazione
      Su schermo stretto scorre in orizzontale dentro il proprio contenitore:
      la pagina non scorre mai lateralmente.
   -------------------------------------------------------------------------- */

.scorre {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--riga);
  background: var(--foglio);
}
.scorre:focus-visible { outline: 2px solid var(--legante); outline-offset: 2px; }

.tavola {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  background: var(--foglio);
  font-size: 0.875rem;
  line-height: 1.45;
}
.tavola caption {
  caption-side: top;
  text-align: left;
  padding: 0.85rem 1rem;
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--velina);
  border-bottom: 1px solid var(--riga-tenue);
}
.tavola th, .tavola td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--riga-tenue);
}
.tavola thead th {
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--velina);
  border-bottom: 2px solid var(--mandorla);
  white-space: nowrap;
}
.tavola tbody th {
  font-family: "Syne", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  position: sticky;
  left: 0;
  background: var(--foglio);
  border-right: 1px solid var(--riga-tenue);
  min-width: 11rem;
}
.tavola tbody tr:last-child th,
.tavola tbody tr:last-child td { border-bottom: 0; }
.tavola .num {
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.tavola .fonte-cella {
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--velina);
}


/* --------------------------------------------------------------------------
   8. Blocchi ricorrenti
   -------------------------------------------------------------------------- */

.occhiello {
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--legante);
  margin-bottom: 0.6rem;
}

.sommario {
  font-size: 1.15rem;
  line-height: 1.5;
  margin-bottom: 1.6em;
}

.scheda {
  background: var(--foglio);
  border: 1px solid var(--riga);
  padding: 1.15rem 1.25rem;
}
.scheda h3 { margin-top: 0; }

.avviso {
  border-left: 3px solid var(--legante);
  background: var(--glassa-alta);
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
}

.coppie {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.55rem;
  margin: 0 0 1.1em;
  font-size: 0.9rem;
}
.coppie dt {
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--velina);
  padding-top: 0.2em;
}
.coppie dd { margin: 0; }

.indice-pagine { list-style: none; padding: 0; margin: 0; }
.indice-pagine li {
  border-top: 1px solid var(--riga-tenue);
  padding: 0.85rem 0;
  margin: 0;
}
.indice-pagine li:last-child { border-bottom: 1px solid var(--riga-tenue); }
.indice-pagine a {
  font-family: "Syne", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
}
.indice-pagine p { margin: 0.25em 0 0; font-size: 0.9rem; color: var(--velina); }
.indice-pagine .etichetta-prova {
  display: inline-block;
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--legante);
  margin-top: 0.4em;
}


/* --------------------------------------------------------------------------
   9. Il convertitore -- zero JavaScript
      I pannelli sono tutti gia' scritti in HTML con i valori precalcolati e
      si mostrano con il selettore fratello. Con CSS disattivato si vedono
      tutti: nessun dato sparisce, la pagina diventa solo piu' lunga.
   -------------------------------------------------------------------------- */

/* I radio stanno in cima al contenitore, come fratelli diretti di .esiti:
   e' quello che permette a `~` di raggiungere i pannelli. Le etichette
   vivono piu' in basso e li comandano con `for`, che attraversa il DOM. */
.convertitore {
  background: var(--foglio);
  border: 1px solid var(--riga);
  padding: 1.25rem;
}
.convertitore > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.convertitore fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.convertitore legend {
  padding: 0;
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--velina);
  margin-bottom: 0.6rem;
}

.scelte { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.scelte li { margin: 0; }
.scelte label {
  display: inline-block;
  border: 1px solid var(--riga);
  padding: 0.42em 0.85em;
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  cursor: pointer;
  background: var(--glassa-alta);
}

.esiti { border-top: 1px solid var(--riga-tenue); padding-top: 1rem; }
.esito h4 { margin-bottom: 0.4em; margin-top: 0; }

/* Con il CSS attivo si vede una combinazione sola; con il CSS disattivato
   si vedono tutte e dodici, e nessun dato sparisce. */
.esito, .esito .q { display: none; }

#t-sicilia:checked    ~ .esiti .esito[data-t="sicilia"],
#t-puglia:checked     ~ .esiti .esito[data-t="puglia"],
#t-faldacchea:checked ~ .esiti .esito[data-t="faldacchea"],
#t-marzapane:checked  ~ .esiti .esito[data-t="marzapane"] { display: block; }

#q-250:checked  ~ .esiti .esito .q[data-q="250"],
#q-500:checked  ~ .esiti .esito .q[data-q="500"],
#q-1000:checked ~ .esiti .esito .q[data-q="1000"] { display: block; }

/* Lo stato acceso dell'etichetta: :has risale dal radio scelto al
   contenitore e da li' raggiunge l'etichetta che lo comanda. */
.convertitore:has(#t-sicilia:checked)    label[for="t-sicilia"],
.convertitore:has(#t-puglia:checked)     label[for="t-puglia"],
.convertitore:has(#t-faldacchea:checked) label[for="t-faldacchea"],
.convertitore:has(#t-marzapane:checked)  label[for="t-marzapane"],
.convertitore:has(#q-250:checked)        label[for="q-250"],
.convertitore:has(#q-500:checked)        label[for="q-500"],
.convertitore:has(#q-1000:checked)       label[for="q-1000"] {
  background: var(--legante);
  border-color: var(--legante);
  color: #fff;
}
.convertitore:has(#t-sicilia:focus-visible)    label[for="t-sicilia"],
.convertitore:has(#t-puglia:focus-visible)     label[for="t-puglia"],
.convertitore:has(#t-faldacchea:focus-visible) label[for="t-faldacchea"],
.convertitore:has(#t-marzapane:focus-visible)  label[for="t-marzapane"],
.convertitore:has(#q-250:focus-visible)        label[for="q-250"],
.convertitore:has(#q-500:focus-visible)        label[for="q-500"],
.convertitore:has(#q-1000:focus-visible)       label[for="q-1000"] {
  outline: 2px solid var(--legante);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   10. Le fonti
   -------------------------------------------------------------------------- */

.elenco-fonti { list-style: none; padding: 0; margin: 0; }
.elenco-fonti > li {
  border-top: 1px solid var(--riga-tenue);
  padding: 1rem 0;
  margin: 0;
}
.elenco-fonti > li:last-child { border-bottom: 1px solid var(--riga-tenue); }
.elenco-fonti cite {
  font-style: normal;
  font-weight: 600;
  display: block;
  margin-bottom: 0.2em;
}
.elenco-fonti .dettagli {
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--velina);
  margin: 0.25em 0 0;
  overflow-wrap: anywhere;
}
.elenco-fonti .usata-da {
  font-size: 0.82rem;
  color: var(--velina);
  margin: 0.4em 0 0;
}


/* --------------------------------------------------------------------------
   11. Footer
       Dati societari e riga legale: copiati alla lettera da
       02-standard/dati-aziendali.md, variante per i domini fuori dal
       perimetro bici. Nessuna dichiarazione di rete, nessun link al main.
   -------------------------------------------------------------------------- */

.chiusura {
  border-top: 1px solid var(--riga);
  margin-top: 3.25rem;
  padding-block: 1.75rem 2.5rem;
  font-size: 0.85rem;
}
.chiusura .foglio-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.societa {
  font-style: normal;
  line-height: 1.6;
  color: var(--velina);
}
.societa b { color: var(--mandorla); font-weight: 600; }
.legami {
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}


/* --------------------------------------------------------------------------
   12. L'unico breakpoint.
       Sotto la soglia il margine delle fonti si scioglie: l'etichetta sale
       sopra il proprio blocco, cosi' la provenienza si legge prima del testo
       che sostiene, come nella versione larga.
   -------------------------------------------------------------------------- */

@media (max-width: 56rem) {
  :root {
    --passo: 2.1rem;
    --corpo: 1.03125rem;
    --bordo-pagina: 1.1rem;
  }

  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.35rem; }

  .foglio-pagina { max-width: 40rem; }

  .blocco {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.9rem;
  }
  .blocco > * { grid-column: 1; }
  .prova {
    grid-row: auto;
    order: -1;
    padding-top: 0.35em;
  }
  .al-vivo { grid-column: 1; }

  .testata .foglio-pagina { justify-content: flex-start; }
  .coppie { grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
  .coppie dd { margin-bottom: 0.55rem; }
}


/* --------------------------------------------------------------------------
   13. Stampa
       Una tavola di riferimento e' fatta per essere stampata e portata in
       cucina. Gli URL delle fonti diventano visibili: su carta un link
       senza indirizzo non e' una prova.
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --glassa: #fff; --glassa-alta: #fff; --foglio: #fff;
    --mandorla: #000; --velina: #333; --riga: #999; --riga-tenue: #ccc;
    --legante: #000;
  }
  body { font-size: 10.5pt; }
  .testata, .navigazione, .convertitore, .salta-al-contenuto { display: none; }
  .blocco { grid-template-columns: minmax(0, 1fr); }
  .blocco > * { grid-column: 1; }
  .prova { grid-row: auto; order: -1; border-top-color: #000; }
  .scorre { overflow: visible; border: 0; }
  .tavola { min-width: 0; font-size: 8.5pt; }
  .tavola tbody th { position: static; }
  .elenco-fonti a::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  h2, h3 { break-after: avoid; }
  tr, .blocco { break-inside: avoid; }
}