/* Nicola Sabaini — foglio di stile unico
   =====================================
   Nessuno stile inline, nessuno script inline, nessuna richiesta a terzi:
   e' cio' che permette al server di tenere una Content-Security-Policy
   stretta senza 'unsafe-inline', condivisa con gli altri siti della macchina.
   Un solo style="..." aggiunto qui per comodita' costringerebbe ad allentare
   la policy per tutti.

   Nessun font dal web: i caratteri di sistema non costano una richiesta ne'
   un handshake TLS, e su una macchina con poca CPU la differenza si vede.

   Indice
   0. Caratteri        5. Riga di lettura     9.  Articoli
   1. Variabili
   2. Azzeramento      6. Sezioni             10. Prosa
   3. Guscio           7. Schede progetto     11. Piede
   4. Testata          8. Glifi               12. Preferenze utente
                                              13. Movimento          */


/* 0. Caratteri ─────────────────────────────────────────────────────────────
   Due famiglie, serviti da questo dominio. Non da Google: la CSP della
   macchina dichiara `font-src 'self'`, e caricarli da fonts.gstatic.com
   vorrebbe dire allentarla per ogni sito ospitato qui — oltre a raccontare a
   Google chi passa da questa pagina.

   Sono file VARIABILI: uno solo copre tutti i pesi usati. E sono divisi per
   sottoinsieme: `latin` basta all'italiano e all'inglese, `latin-ext` si
   scarica solo se in pagina compare un carattere che lo richiede. Chi legge
   in italiano scarica 54 kB, una volta sola, e poi mai piu' — il nome del
   foglio di stile porta l'impronta del contenuto, quindi la cache puo' essere
   eterna senza rischi.

   `font-display: swap`: il testo si legge subito col carattere di sistema e
   viene sostituito quando il file arriva. Mai una pagina bianca in attesa di
   un font.                                                                 */

@font-face {
    font-family: "Space Grotesk";
    src: url("/caratteri/space-grotesk-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    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: "Space Grotesk";
    src: url("/caratteri/space-grotesk-latin-ext.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "JetBrains Mono";
    src: url("/caratteri/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    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: "JetBrains Mono";
    src: url("/caratteri/jetbrains-mono-latin-ext.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                   U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                   U+2C60-2C7F, U+A720-A7FF;
}


/* 1. Variabili ─────────────────────────────────────────────────────────── */

:root {
    /* Scuro come impostazione predefinita: e' il colore del sito. */
    --fondo:        #0a0e14;
    --fondo-alto:   #0f141c;
    --riga:         #1b2330;
    --riga-forte:   #2a3543;
    --testo:        #dde5ee;
    --tenue:        #8a97a7;
    --fioco:        #6f7d8e;   /* 4,60:1 sul fondo — WCAG AA */
    --accento:      #4db8a8;
    --accento-orlo: #2b6b62;   /* solo bordi: bastano 3:1 */
    --accento-tenue:#37897d;   /* accento leggibile: 4,64:1 */

    /* Secondo accento: l'oro della copertina di 512 KILOBYTE. Il teal indica
       cosa si puo' toccare, l'oro cosa e' stato misurato. Due colori con due
       mestieri diversi, non due colori per fare colore. */
    --oro:          #e0a63c;   /* 8,54:1 sul fondo */
    --oro-fioco:    #8a6520;

    --prosa:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --titolo: "Space Grotesk", var(--prosa);
    --mono:   "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
              Consolas, "Liberation Mono", monospace;

    --colonna: 76rem;
    --gutter:  clamp(20px, 5vw, 56px);
}

/* Su sistema chiaro il sito non impone il nero: diventa carta, appena calda.
   Bianco puro e nero puro sono due modi diversi di stancare gli occhi. */
@media (prefers-color-scheme: light) {
    :root {
        --fondo:        #fbfaf8;
        --fondo-alto:   #ffffff;
        --riga:         #e4e1db;
        --riga-forte:   #c8c4bc;
        --testo:        #14181e;
        --tenue:        #58626f;
        --fioco:        #6d727b;   /* 4,64:1 */
        --accento:      #12695e;
        --accento-orlo: #8fbdb5;
        --accento-tenue:#497b72;   /* 4,62:1 */
        --oro:          #8a5d00;   /* 5,42:1 sulla carta */
        --oro-fioco:    #c9a86a;
    }
}


/* 2. Azzeramento ───────────────────────────────────────────────────────── */

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

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

body {
    margin: 0;
    background: var(--fondo);
    color: var(--testo);
    font-family: var(--prosa);
    font-size: 17px;
    line-height: 1.6;
    /* I numeri di questo sito stanno spesso in colonna: devono incolonnarsi. */
    font-variant-numeric: tabular-nums;
}

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

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--titolo);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

p { margin: 0; }

a {
    color: inherit;
    text-decoration: none;
}

/* Il contorno da tastiera non si toglie mai. Se dava fastidio si sostituisce
   con qualcosa di altrettanto evidente, non si cancella. */
:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 3px;
    border-radius: 2px;
}


/* 3. Guscio ────────────────────────────────────────────────────────────── */

.guscio {
    width: 100%;
    max-width: var(--colonna);
    margin-inline: auto;
    /* Gutter laterale garantito a ogni larghezza: padding-inline separato,
       mai una shorthand che azzeri i lati. */
    padding-inline: var(--gutter);
}

.etichetta {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accento);
}


/* 4. Testata ───────────────────────────────────────────────────────────── */

.testata { border-bottom: 1px solid var(--riga); }

.testata-interno {
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding-block: 18px;
}

.marchio {
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--testo);
    white-space: nowrap;
}

.marchio::before {
    content: "▚ ";
    color: var(--accento);
}

.navigazione {
    display: flex;
    gap: 22px;
    margin-inline-start: auto;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.navigazione a {
    color: var(--tenue);
    padding-block: 2px;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.navigazione a:hover { color: var(--testo); border-bottom-color: var(--accento); }
.navigazione a[aria-current="page"] { color: var(--testo); border-bottom-color: var(--accento); }

.cambio-lingua {
    color: var(--fioco);
    padding-inline-start: 22px;
    border-inline-start: 1px solid var(--riga);
}


/* 5. Riga di lettura ───────────────────────────────────────────────────── */

.apertura { padding-block: clamp(48px, 8vw, 84px) clamp(18px, 3vw, 30px); }

.apertura h1 {
    margin-block: 14px 12px;
    font-size: clamp(2.7rem, 8.5vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.apertura .ruolo {
    max-width: 34rem;
    color: var(--tenue);
    font-size: clamp(1.05rem, 2.4vw, 1.25rem);
}

/* Fatti misurabili, non aggettivi. Stessa logica della targhetta incisa sul
   telaio di uno strumento: dice cosa e', in numeri. */
.lettura {
    display: flex;
    flex-wrap: wrap;
    margin-top: clamp(36px, 6vw, 56px);
    border-block: 1px solid var(--riga);
}

/* Le voci non si stirano per riempire la riga: con due sole misure una
   griglia elastica lascerebbe due numeri persi ai lati opposti dello
   schermo. Stanno a sinistra, larghe quanto serve. */
.lettura > div {
    flex: 0 1 auto;
    min-width: 10rem;
    padding: 16px 28px 16px 0;
}

.lettura > div + div {
    padding-inline-start: 20px;
    border-inline-start: 1px solid var(--riga);
}

.lettura dt {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fioco);
}

.lettura dd {
    margin: 5px 0 0;
    color: var(--oro);
    font-family: var(--titolo);
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--testo);
}

.lettura dd .unita {
    font-size: 0.8rem;
    color: var(--tenue);
    letter-spacing: 0.04em;
}


/* 5.1 Intestazione delle pagine interne ────────────────────────────────── */

/* Stessa impalcatura dell'apertura della home, un gradino piu' bassa: il
   nome resta il titolo piu' grande del sito. */
.intestazione-pagina { padding-block: clamp(44px, 8vw, 76px) 0; }

.intestazione-pagina h1 {
    margin-block: 12px 10px;
    font-size: clamp(2rem, 5.5vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.intestazione-pagina .etichetta a { border-bottom: 1px solid transparent; }
.intestazione-pagina .etichetta a:hover { border-bottom-color: var(--accento); }

.intestazione-pagina .occhiello {
    max-width: 44rem;
    color: var(--tenue);
    font-size: clamp(1rem, 2.2vw, 1.15rem);
}

/* Nella pagina di un progetto la riga di lettura porta le specifiche: valori
   in monospaziato, piu' piccoli dei numeri della home, che sono titoli. */
.lettura dd.misurato {
    font-size: 0.95rem;
    letter-spacing: 0;
}

.riga-firma {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--riga);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--fioco);
}

.riga-firma a { color: var(--accento); }
.riga-firma a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* 5.2 Apertura per immagine ────────────────────────────────────────────── */

.apertura-media {
    margin: clamp(32px, 5vw, 52px) auto 0;
}

.apertura-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--riga-forte);
    border-radius: 4px;
    background: var(--fondo-alto);
}

/* Una copertina non si allarga fino al bordo dello schermo: resta un
   oggetto, e un oggetto ha una sua misura. */
.apertura-ritratto img {
    width: auto;
    max-width: min(100%, 22rem);
    margin-inline: auto;
}

.apertura-media figcaption {
    margin-top: 12px;
    color: var(--fioco);
    font-size: 0.82rem;
    line-height: 1.5;
    max-width: 44rem;
}


/* 6. Sezioni ───────────────────────────────────────────────────────────── */

.sezione { padding-block: clamp(48px, 8vw, 80px); }

/* Una sezione che segue subito la sua intestazione non ha bisogno di
   ricominciare da capo con tutto quello spazio sopra. */
.sezione-attaccata { padding-top: clamp(30px, 5vw, 44px); }

.sezione-testata-interna { margin-top: clamp(44px, 7vw, 68px); }

.collegamenti-larghi { margin-top: 32px; }

.vuoto { color: var(--fioco); }

.ritorno {
    margin-top: 8px;
    padding-bottom: 12px;
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

.ritorno a { color: var(--accento); }
.ritorno a::before { content: "← "; }
.ritorno a:hover { text-decoration: underline; text-underline-offset: 4px; }

.prosa-articolo { padding-bottom: clamp(30px, 5vw, 44px); }

.sezione-testata {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 30px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--riga-forte);
}

.sezione-testata h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }

.sezione-testata .nota {
    color: var(--fioco);
    font-size: 0.92rem;
}

.oltre {
    margin-inline-start: auto;
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    color: var(--accento);
    white-space: nowrap;
}

.oltre::after { content: " →"; }
.oltre:hover { text-decoration: underline; text-underline-offset: 4px; }


/* 7. Schede progetto ───────────────────────────────────────────────────── */

.elenco-progetti, .elenco-articoli {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Numero, immagine, testo. L'immagine sta per prima nel flusso a schermo
   stretto e a lato su schermo largo: e' il lavoro, non un ornamento da
   relegare in fondo. */
.scheda {
    display: grid;
    grid-template-columns: 5rem 19rem minmax(0, 1fr);
    gap: 0 clamp(20px, 3vw, 36px);
    align-items: start;
    padding-block: clamp(28px, 4vw, 42px);
    border-bottom: 1px solid var(--riga);
}

.scheda:first-child { border-top: 1px solid var(--riga); }

.scheda-indice {
    margin: 0;
    padding-top: 4px;
    font-family: var(--mono);
    line-height: 1.5;
}

.scheda-numero {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--fioco);
}

/* Il genere e' un'etichetta di catalogo, non un titolo: sta sotto il numero,
   piu' piccola, e dice di che cosa si tratta prima ancora del nome. */
.scheda-genere {
    display: block;
    margin-top: 3px;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accento-orlo);
}

/* Cornice a filo singolo, nessuna ombra, nessun angolo molle: la schermata
   si presenta come una lastra, non come una figurina. */
.scheda-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--riga-forte);
    border-radius: 3px;
    background: var(--fondo-alto);
}

/* La copertina di un libro e' un oggetto verticale: non va stirata sulla
   stessa proporzione di una schermata di gioco. Occupa meno larghezza e
   resta della sua forma. */
.scheda-ritratto .scheda-media { max-width: 11.5rem; }

.scheda-media .glifo {
    max-width: 7rem;
    margin-top: 6px;
}

.scheda :is(h2, h3) {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    letter-spacing: -0.02em;
}

.scheda :is(h2, h3) a { border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.scheda :is(h2, h3) a:hover { border-bottom-color: var(--accento); }

.scheda .sommario {
    margin-top: 8px;
    max-width: 46rem;
    color: var(--tenue);
}

/* Le specifiche sono una targhetta, non decorazione: etichetta piccola in
   alto, valore leggibile sotto, incolonnati. */
/* Griglia e non flex-wrap: con flex l'ultima riga si allinea a sinistra ma le
   colonne non tornano, e una specifica rimasta da sola finisce sotto il vuoto
   invece che sotto la colonna a cui somiglia. Su una scheda con sette misure
   si vedeva: sei in fila e la settima orfana. `auto-fit` con un minimo tiene
   le colonne allineate a qualunque larghezza, e a schermo stretto ne fa due
   senza che nessuno debba dirglielo. */
.specifiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 16px 24px;
    margin: 18px 0 0;
}

.specifiche > div { min-width: 0; }

.specifiche dt {
    font-family: var(--mono);
    /* 0,62rem erano 9,9 px: leggibili solo da chi sa gia' cosa c'e' scritto. */
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fioco);
}

.specifiche dd {
    margin: 3px 0 0;
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--testo);
}

.collegamenti {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin-top: 20px;
}

.bottone {
    display: inline-block;
    padding: 6px 13px;
    border: 1px solid var(--riga-forte);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--tenue);
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.bottone:hover {
    border-color: var(--accento-orlo);
    background: var(--fondo-alto);
    color: var(--testo);
}

.bottone-forte {
    border-color: var(--accento-orlo);
    color: var(--accento);
}

/* Lo stato e' un semaforo sobrio: un punto, non un distintivo colorato. */
.stato {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tenue);
}

.stato::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fioco);
}

.stato-attivo::before     { background: var(--accento); }
.stato-rilasciato::before { background: var(--tenue); }
.stato-pubblicato::before { background: var(--tenue); }
.stato-corrente::before   { background: var(--accento); }


/* 8. Glifi ─────────────────────────────────────────────────────────────── */

/* Un disegno per progetto, SVG in linea: nessuna richiesta in piu', pesa
   circa 1 kB, segue il tema da solo perche' usa currentColor. */
.glifo {
    display: block;
    width: 100%;
    max-width: 5.5rem;
    color: var(--riga-forte);
    transition: color .2s ease;
}

.scheda:hover .glifo { color: var(--accento-orlo); }


/* 9. Articoli ──────────────────────────────────────────────────────────── */

.riga-articolo {
    display: grid;
    /* La colonna della data e' larga quanto la data piu' lunga in
       monospaziato, non quanto sembrava bastare: sotto misura va a sbattere
       contro il titolo. */
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    gap: 0 clamp(18px, 3vw, 34px);
    align-items: baseline;
    padding-block: 20px;
    border-bottom: 1px solid var(--riga);
}

.riga-articolo:first-child { border-top: 1px solid var(--riga); }

.riga-articolo .quando,
.riga-articolo .durata {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--fioco);
    white-space: nowrap;
}

.riga-articolo :is(h2, h3) { font-size: 1.08rem; font-weight: 600; }
.riga-articolo :is(h2, h3) a { border-bottom: 1px solid transparent; }
.riga-articolo :is(h2, h3) a:hover { border-bottom-color: var(--accento); }
.riga-articolo .sommario { margin-top: 5px; color: var(--tenue); font-size: 0.94rem; }


/* 10. Prosa ────────────────────────────────────────────────────────────── */

.prosa { max-width: 40rem; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 2.2em; font-size: 1.35rem; }
.prosa h3 { margin-top: 1.8em; font-size: 1.1rem; }
.prosa a { color: var(--accento); border-bottom: 1px solid var(--accento-orlo); }
.prosa a:hover { border-bottom-width: 2px; }
.prosa ul, .prosa ol { padding-inline-start: 1.3em; }
.prosa li + li { margin-top: 0.35em; }

.prosa code {
    padding: 1px 5px;
    border: 1px solid var(--riga);
    border-radius: 3px;
    background: var(--fondo-alto);
    font-family: var(--mono);
    font-size: 0.86em;
}

.prosa pre {
    overflow-x: auto;
    padding: 16px 18px;
    border: 1px solid var(--riga);
    border-radius: 4px;
    background: var(--fondo-alto);
    font-size: 0.85rem;
    line-height: 1.55;
}

.prosa pre code { padding: 0; border: 0; background: none; font-size: inherit; }

.prosa blockquote {
    margin-inline: 0;
    padding-inline-start: 18px;
    border-inline-start: 2px solid var(--accento-orlo);
    color: var(--tenue);
}

/* Le tabelle sono l'unica cosa che puo' essere piu' larga della colonna, e
   scorrono da sole invece di far scorrere la pagina. */
.tabella-larga { overflow-x: auto; }

.prosa table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.prosa th, .prosa td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--riga); text-align: start; }

.prosa th {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fioco);
    font-weight: 500;
}


/* 11. Piede ────────────────────────────────────────────────────────────── */

.piede {
    margin-top: clamp(48px, 8vw, 88px);
    border-top: 1px solid var(--riga);
}

.piede-interno {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    align-items: baseline;
    padding-block: 26px 40px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--fioco);
}



/* 12. Preferenze utente ────────────────────────────────────────────────── */

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

/* Sotto i 640px la griglia a due colonne diventa una colonna sola: il glifo
   passa in linea con l'indice invece di rubare meta' schermo. */
/* Sotto i 62rem l'immagine non sta piu' a fianco del testo senza strozzare
   entrambi: passa sopra, a tutta larghezza della colonna. */
/* Sotto i 62rem l'immagine non sta piu' a fianco del testo senza strozzare
   entrambi: il numero resta nella sua colonna, immagine e testo si impilano
   nella seconda. Le posizioni sono dichiarate, non lasciate all'automatismo,
   che riempirebbe le celle in un ordine sbagliato. */
@media (max-width: 62rem) {
    .scheda { grid-template-columns: 5rem minmax(0, 1fr); }

    .scheda-indice   { grid-column: 1; grid-row: 1; }
    .scheda-media    { grid-column: 2; grid-row: 1; margin-bottom: 20px; }
    .scheda-corpo    { grid-column: 2; grid-row: 2; }

    .scheda-ritratto .scheda-media { max-width: 9rem; }
}

@media (max-width: 40rem) {
    /* Su telefono il nome e tre voci di menu non stanno su una riga sola
       senza spingere la pagina fuori dallo schermo: il menu scende sotto,
       e il cambio lingua resta appoggiato a destra. */
    .testata-interno { flex-wrap: wrap; gap: 12px 18px; }

    .navigazione {
        margin-inline-start: 0;
        width: 100%;
        gap: 18px;
    }

    .cambio-lingua {
        margin-inline-start: auto;
        padding-inline-start: 16px;
    }

    .scheda, .riga-articolo { grid-template-columns: minmax(0, 1fr); }

    .scheda-indice {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding-top: 0;
        margin-bottom: 12px;
    }

    .scheda-genere { margin-top: 0; }
    .scheda-media  { grid-column: 1; grid-row: 2; margin-bottom: 18px; }
    .scheda-corpo  { grid-column: 1; grid-row: 3; }

    .riga-articolo .durata { display: none; }

    .lettura > div { flex-basis: 45%; }
}

/* 13. Movimento ────────────────────────────────────────────────────────────
   Regole della casa, in ordine:
   1. niente JavaScript — tutto qui dentro e' CSS, e se il browser non lo
      capisce la pagina resta esattamente com'era prima;
   2. niente che si muova per farsi notare: il movimento serve a spiegare
      che qualcosa e' arrivato, non a fare spettacolo;
   3. chi ha chiesto meno animazioni non ne vede nessuna (blocco 12).        */


/* La banda di memoria: 512 celle, diciotto accese. */

.banda-memoria {
    margin: clamp(30px, 5vw, 44px) 0 0;
}

.memoria {
    display: block;
    width: 100%;
    max-width: 44rem;
    height: auto;
}

.memoria .spenta { fill: var(--riga); }
.memoria .viva   { fill: var(--accento); }

.banda-memoria figcaption {
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fioco);
}

.banda-memoria figcaption b { font-weight: 500; color: var(--accento); }

/* Le celle libere si accendono una dopo l'altra al caricamento. Diciotto
   ritardi scritti a mano: un ciclo in CSS non esiste, e diciotto righe
   costano meno di qualunque libreria. */
@media (prefers-reduced-motion: no-preference) {
    .memoria .viva {
        animation: accendi .5s ease-out backwards;
    }

    .memoria .viva:nth-of-type(1)  { animation-delay: .10s }
    .memoria .viva:nth-of-type(2)  { animation-delay: .16s }
    .memoria .viva:nth-of-type(3)  { animation-delay: .22s }
    .memoria .viva:nth-of-type(4)  { animation-delay: .28s }
    .memoria .viva:nth-of-type(5)  { animation-delay: .34s }
    .memoria .viva:nth-of-type(6)  { animation-delay: .40s }
    .memoria .viva:nth-of-type(7)  { animation-delay: .46s }
    .memoria .viva:nth-of-type(8)  { animation-delay: .52s }
    .memoria .viva:nth-of-type(9)  { animation-delay: .58s }
    .memoria .viva:nth-of-type(10) { animation-delay: .64s }
    .memoria .viva:nth-of-type(11) { animation-delay: .70s }
    .memoria .viva:nth-of-type(12) { animation-delay: .76s }
    .memoria .viva:nth-of-type(13) { animation-delay: .82s }
    .memoria .viva:nth-of-type(14) { animation-delay: .88s }
    .memoria .viva:nth-of-type(15) { animation-delay: .94s }
    .memoria .viva:nth-of-type(16) { animation-delay: 1.00s }
    .memoria .viva:nth-of-type(17) { animation-delay: 1.06s }
    .memoria .viva:nth-of-type(18) { animation-delay: 1.12s }
}

@keyframes accendi {
    from { fill: var(--riga); }
    60%  { fill: var(--testo); }
    to   { fill: var(--accento); }
}


/* Passaggio fra le pagine.

   Due righe, e la navigazione smette di sbattere il bianco: il browser
   dissolve la pagina vecchia nella nuova da solo. Dove non e' supportato non
   succede niente di niente — non e' un ripiego, e' l'assenza di un extra. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: sfuma-via .18s ease-in both; }
    ::view-transition-new(root) { animation: sfuma-dentro .26s ease-out both; }
}

@keyframes sfuma-via   { to   { opacity: 0 } }
@keyframes sfuma-dentro{ from { opacity: 0; transform: translateY(6px) } }


/* Le righe entrano mentre scorri.

   `animation-timeline: view()` lega l'animazione alla posizione della riga
   nella finestra, non a un cronometro: nessun listener di scroll, nessun
   IntersectionObserver, nessun frame calcolato in JavaScript. Il browser lo
   fa sul compositore. Dove non c'e', @supports lascia tutto fermo e visibile. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .scheda,
        .riga-articolo {
            animation: entra linear both;
            animation-timeline: view();
            /* Comincia quando la riga e' ancora 15% sotto il bordo e finisce
               appena ne e' entrata un quarto: chi scorre veloce la trova gia'
               a posto invece di vederla inseguire. */
            animation-range: entry 5% cover 22%;
        }
    }
}

@keyframes entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}


/* L'immagine del progetto reagisce al passaggio del mouse insieme alla riga,
   non da sola: e' la riga intera a essere l'oggetto, non la figurina. */
.scheda-media img {
    transition: border-color .2s ease, transform .25s ease;
}

.scheda:hover .scheda-media img {
    border-color: var(--accento-orlo);
    transform: translateY(-2px);
}

.scheda:hover .scheda-numero { color: var(--accento); }

.scheda-numero { transition: color .2s ease; }


/* Il filetto sotto il titolo di sezione cresce da sinistra: un dettaglio che
   si nota solo se lo cerchi, ed e' giusto cosi'. */
.sezione-testata { position: relative; }

.sezione-testata::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background: var(--accento);
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .sezione-testata::after {
            animation: allunga linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 30%;
        }
    }
}

@keyframes allunga { to { width: 4.5rem } }


/* Il testo selezionato prende l'accento invece del blu di sistema. Costa due
   righe e si vede ogni volta che qualcuno copia un pezzo di codice. */
::selection {
    background: var(--accento);
    color: var(--fondo);
}


/* 14. Galleria ─────────────────────────────────────────────────────────────
   Le immagini in piu' di una scheda progetto. Una colonna sola: sono
   schermate da guardare, non miniature da sfogliare, e affiancarle
   significherebbe rimpicciolirle fino a non farci vedere niente.          */

.galleria {
    margin-top: clamp(36px, 6vw, 56px);
    display: grid;
    gap: clamp(26px, 4vw, 40px);
}

.galleria figure { margin: 0; }

.galleria img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--riga-forte);
    border-radius: 4px;
    background: var(--fondo-alto);
}

.galleria figcaption {
    margin-top: 10px;
    max-width: 44rem;
    color: var(--fioco);
    font-size: 0.82rem;
    line-height: 1.5;
}


/* 15. Telefono ─────────────────────────────────────────────────────────────
   Non e' "la stessa pagina piu' stretta". Su un telefono cambiano due cose
   che qui contano piu' del resto:

   - si tocca con un dito, non si punta con un mouse. WCAG 2.5.8 chiede
     almeno 24x24 px per un bersaglio; le linee guida Apple ne consigliano 44.
     Un collegamento alto 14 px si sbaglia, e chi lo sbaglia due volte se ne
     va.
   - si legge piu' vicino ma con meno luce e piu' movimento. Le etichette in
     monospaziato a 10,6 px stanno bene su uno schermo a mezzo metro; in mano,
     su un autobus, non si leggono. Sotto i 12 px non si scende.            */

@media (max-width: 48rem) {

    /* --- Bersagli da dito ------------------------------------------------ */

    .marchio,
    .navigazione a {
        padding-block: 10px;
    }

    .navigazione { gap: 4px 20px; }

    .piede-interno {
        gap: 2px 26px;
        line-height: 1;
    }

    .piede-interno a {
        display: inline-block;
        padding-block: 9px;
    }

    .bottone {
        padding: 11px 16px;
        font-size: 0.8rem;
    }

    .oltre {
        display: inline-block;
        padding-block: 8px;
    }

    /* L'etichetta in cima alle pagine interne e' anche il link di risalita:
       deve essere grande abbastanza da centrarla col pollice. */
    .intestazione-pagina .etichetta a {
        display: inline-block;
        padding-block: 8px;
        font-size: 0.75rem;
    }

    .ritorno a {
        display: inline-block;
        padding-block: 8px;
    }

    /* --- Niente testo sotto i 12 px -------------------------------------- */

    .lettura dt,
    .specifiche dt,
    .prosa th {
        font-size: 0.76rem;
        letter-spacing: 0.12em;
    }

    .specifiche dd { font-size: 0.9rem; }

    .scheda-genere,
    .banda-memoria figcaption,
    .pannello-titolo,
    .sezione-numero,
    .riga-articolo .durata {
        font-size: 0.76rem;
        letter-spacing: 0.12em;
    }

    .stato { font-size: 0.76rem; }

    /* L'occhiello in cima alle pagine, anche quando non e' un collegamento. */
    .etichetta { font-size: 0.76rem; }

    /* Il piede: il grassetto dentro la riga di chiusura ereditava la misura
       del contenitore, che era sotto il pavimento. */
    .piede-interno, .piede-interno b { font-size: 0.8rem; }

    .piede-interno,
    .riga-articolo .quando,
    .apertura-media figcaption,
    .galleria figcaption {
        font-size: 0.78rem;
    }

    /* --- Respiro ---------------------------------------------------------- */

    /* Le specifiche in colonna stretta: due per riga invece di quattro
       schiacciate, che diventano illeggibili prima di diventare compatte. */
    .specifiche { gap: 16px 24px; }

    .lettura > div {
        min-width: 0;
        flex: 1 1 42%;
    }

    /* Il primo bordo verticale a capo riga taglia in mezzo al nulla. */
    .lettura > div + div {
        padding-inline-start: 16px;
    }
}

/* Sotto i 380 px (iPhone SE e simili) le voci della riga di lettura vanno a
   una per riga: due non ci stanno senza spezzare i numeri. */
@media (max-width: 23.75rem) {
    .lettura > div { flex-basis: 100%; }
    .lettura > div + div {
        padding-inline-start: 0;
        border-inline-start: 0;
        border-top: 1px solid var(--riga);
    }
}


/* 16. Stampa ───────────────────────────────────────────────────────────────
   Un articolo tecnico finisce stampato o in PDF piu' spesso di quanto si
   creda. Fondo bianco, niente navigazione, e gli indirizzi dei collegamenti
   scritti accanto al testo: su carta un link e' inerte, e senza l'indirizzo
   si perde l'informazione.                                                 */

@media print {
    :root {
        --fondo: #fff; --fondo-alto: #fff; --testo: #000;
        --tenue: #333; --fioco: #555;
        --riga: #ccc; --riga-forte: #999;
        --accento: #000; --accento-tenue: #333; --accento-orlo: #999;
    }

    .testata, .piede, .oltre, .ritorno, .banda-memoria { display: none; }

    body { font-size: 11pt; }
    .guscio { max-width: none; padding-inline: 0; }
    .prosa { max-width: none; }

    .prosa a::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
        word-break: break-all;
    }

    .scheda, .riga-articolo, .galleria figure, .apertura-media {
        break-inside: avoid;
    }

    h1, h2, h3 { break-after: avoid; }
}


/* 17. Link di salto ────────────────────────────────────────────────────────
   Sta fuori dallo schermo finche' non riceve il fuoco da tastiera. Chi
   naviga col Tab arriva al contenuto in un colpo invece di attraversare
   testata e menu su ogni pagina; chi usa il mouse non lo vede mai.        */

.salta {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 10;
    padding: 10px 16px;
    border: 1px solid var(--accento);
    border-radius: 4px;
    background: var(--fondo-alto);
    color: var(--accento);
    font-family: var(--mono);
    font-size: 0.8rem;
    /* Fuori dalla vista, non `display: none`: quello lo toglierebbe anche
       all'ordine di tabulazione, che e' esattamente cio' che serve qui. */
    transform: translateY(-200%);
    transition: transform .15s ease;
}

.salta:focus { transform: none; }

#contenuto:focus { outline: none; }


/* 18. Da un articolo al prossimo ───────────────────────────────────────────
   Due bersagli grandi, uno per lato. Chi ha appena finito di leggere e' la
   persona piu' disposta a leggere ancora: lasciarla davanti a una pagina che
   finisce e basta e' spreco.                                              */

.scorrimento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 14px;
    margin-top: clamp(40px, 6vw, 60px);
    padding-top: clamp(26px, 4vw, 36px);
    border-top: 1px solid var(--riga-forte);
}

.scorrimento-voce {
    display: block;
    padding: 18px 20px;
    border: 1px solid var(--riga);
    border-radius: 4px;
    transition: border-color .15s ease, background-color .15s ease;
}

.scorrimento-voce:hover {
    border-color: var(--accento-orlo);
    background: var(--fondo-alto);
}

/* Se c'e' solo il successivo, va a destra da solo invece di restare
   spaiato a sinistra come un errore di impaginazione. */
.scorrimento-avanti {
    grid-column: -2;
    text-align: end;
}

.scorrimento-verso {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fioco);
}

.scorrimento-titolo {
    display: block;
    margin-top: 8px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--testo);
}

.scorrimento-voce:hover .scorrimento-titolo { color: var(--accento); }

@media (max-width: 48rem) {
    .scorrimento-verso { font-size: 0.75rem; }
    .scorrimento-avanti { grid-column: auto; text-align: start; }
}


/* 19. Specifiche compatte ──────────────────────────────────────────────────
   Nella pagina di un progetto la riga di lettura porta cinque o sei voci
   piccole, non tre numeri grandi come in home. Su telefono, una per riga
   voleva dire ottocento pixel di scorrimento prima di arrivare all'immagine:
   chi apre la pagina deve vedere il progetto, non la sua targhetta.       */

@media (max-width: 48rem) {
    .lettura-fitta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .lettura-fitta > div {
        padding: 13px 16px 13px 0;
        border-top: 1px solid var(--riga);
    }

    /* La griglia ha gia' i suoi bordi orizzontali: quelli verticali del
       layout a riga qui taglierebbero a caso. */
    .lettura-fitta > div + div {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .lettura-fitta > div:nth-child(-n+2) { border-top: 0; }

    .lettura-fitta > div:nth-child(even) {
        padding-inline-start: 16px;
        border-inline-start: 1px solid var(--riga);
    }

    .lettura-fitta dd.misurato { font-size: 0.88rem; }
}


/* 20. Dettagli ─────────────────────────────────────────────────────────────
   Le cose che non si notano una per una e si notano tutte insieme. Nessuna
   di queste cambia cosa fa il sito: cambiano se sembra finito o abbozzato. */

/* Filo d'accento in cima alla pagina, come la banda su uno strumento. */
.testata {
    border-top: 2px solid var(--accento);
    position: relative;
}

/* Tacche alle estremita' dei filetti di sezione: e' il segno che si usa nei
   disegni tecnici per dire "la misura finisce qui". */
.sezione-testata::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    width: 1px;
    height: 7px;
    background: var(--riga-forte);
}

/* Una barra d'accento entra da sinistra quando il puntatore e' sulla riga.
   Non muove niente: cresce dentro lo spazio della colonna dell'indice. */
.scheda { position: relative; }

.scheda::before {
    content: "";
    position: absolute;
    left: -14px;
    top: clamp(28px, 4vw, 42px);
    width: 2px;
    height: 0;
    background: var(--accento);
    transition: height .25s ease;
}

.scheda:hover::before { height: 2.2rem; }

/* Il numero d'ordine prende una tacca sopra: due segni invece di uno. */
.scheda-numero::before {
    content: "";
    display: block;
    width: 14px;
    height: 1px;
    margin-bottom: 7px;
    background: var(--riga-forte);
    transition: background-color .2s ease, width .25s ease;
}

.scheda:hover .scheda-numero::before {
    background: var(--accento);
    width: 22px;
}

/* Le etichette delle specifiche prendono una tacca verticale: la targhetta
   diventa una scala graduata invece di un elenco. */
.specifiche dt {
    padding-inline-start: 8px;
    border-inline-start: 1px solid var(--riga-forte);
}

.specifiche dd { padding-inline-start: 8px; }

/* I collegamenti nella prosa: sottolineatura spessa in accento, staccata dal
   testo. Si vede che qualcuno ha deciso come devono essere. */
.prosa a {
    text-decoration: underline;
    text-decoration-color: var(--accento-orlo);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    border-bottom: 0;
    transition: text-decoration-color .15s ease;
}

.prosa a:hover {
    text-decoration-color: var(--accento);
    border-bottom: 0;
}

/* La citazione in blocco prende una virgoletta grande e tenue. */
.prosa blockquote {
    position: relative;
    padding-inline-start: 22px;
}

.prosa blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accento), var(--accento-orlo));
}

/* La griglia appena visibile dietro l'apertura: il fondo smette di essere
   una campitura piatta e diventa carta millimetrata molto sbiadita. */
.apertura {
    position: relative;
    isolation: isolate;
}

.apertura::before {
    content: "";
    position: absolute;
    inset: 0 -100vw;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--riga) 1px, transparent 1px),
        linear-gradient(to bottom, var(--riga) 1px, transparent 1px);
    background-size: 44px 44px;
    /* Sfuma verso il basso: in cima si intuisce, in fondo sparisce. */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 72%);
    opacity: .5;
    pointer-events: none;
}


/* 21. Modalita' fosforo ────────────────────────────────────────────────────
   Si accende col codice Konami. Non e' una scenografia: e' la stessa
   impaginazione con la tavolozza di un monitor a fosfori ambra, quelli dei
   cabinati e dei terminali che venivano prima. Tutto passa dalle variabili,
   quindi sono venti righe e nessuna regola duplicata.                     */

:root[data-tema="fosforo"] {
    --fondo:        #100b02;
    --fondo-alto:   #17100a;
    --riga:         #2e2007;
    --riga-forte:   #4a3410;
    --testo:        #ffb64a;
    --tenue:        #d08f2e;
    --fioco:        #a87526;   /* 4,62:1 sul fondo ambra */
    --accento:      #ffc861;
    --accento-orlo: #6b4a15;
    --accento-tenue:#e0a53c;
    --oro:          #ffd37a;
    --oro-fioco:    #7a5512;
}

:root[data-tema="fosforo"] body {
    /* Il bagliore: una sfumatura radiale appena percettibile, non un filtro
       sull'intera pagina — quello renderebbe il testo illeggibile. */
    background-image: radial-gradient(ellipse at 50% 0%,
                                      rgba(255, 182, 74, .07), transparent 60%);
    background-attachment: fixed;
}

:root[data-tema="fosforo"] .memoria .viva { fill: var(--accento); }


/* 22. La griglia che si puo' toccare ───────────────────────────────────────
   Quando sito.js e' attivo la banda di memoria diventa un comando: lo dice
   il cursore e lo dice il contorno da tastiera. Senza JavaScript resta una
   figura, e nessuno di questi stili viene applicato.                      */

.memoria-viva {
    cursor: pointer;
    border-radius: 3px;
    transition: opacity .2s ease;
}

.memoria-viva:hover { opacity: .85; }

.memoria-viva:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 5px;
}

.memoria .occupata { fill: var(--accento-orlo); }

.memoria.in-esecuzione .viva { opacity: .35; }

.banda-memoria figcaption { min-height: 2.4em; }


/* 23. Apertura a due colonne ───────────────────────────────────────────────
   Prima erano cinque cose impilate: etichetta, nome, paragrafo, numeri,
   griglia. Una pila non e' una composizione — si scorre e non si guarda.
   Ora il nome tiene la colonna larga e le misure stanno in un pannello a
   fianco, che e' anche il posto dove uno strumento le mette.             */

.apertura {
    /* La griglia di sfondo esce di 100vw per lato di proposito. Senza questo
       taglio, l'area scorribile della pagina diventa tre schermate e su
       telefono si scorre di lato nel vuoto. `clip` e non `hidden`: quello
       creerebbe un contenitore di scorrimento e romperebbe lo sticky. */
    overflow: clip;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.apertura-testo { min-width: 0; }

.apertura .ruolo { max-width: 32rem; }

.apertura-oltre { margin-top: 26px; }

.apertura::after {
    content: "";
    grid-column: 1 / -1;
    height: 1px;
    margin-top: clamp(26px, 4vw, 40px);
    background: linear-gradient(to right,
                var(--riga-forte) 0 3.5rem, var(--riga) 3.5rem);
}

/* Il pannello: fondo appena sollevato e quattro angolature, lo stesso segno
   dei mirini e dei disegni tecnici. E' il dettaglio che dice "strumento"
   senza scriverlo. */
.pannello {
    position: relative;
    padding: clamp(18px, 2.4vw, 26px);
    background: var(--fondo-alto);
    border: 1px solid var(--riga);
    border-radius: 4px;
}

.pannello::before,
.pannello::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    border: 1px solid var(--oro-fioco);
}

.pannello::before {
    top: -1px; left: -1px;
    border-right: 0; border-bottom: 0;
}

.pannello::after {
    bottom: -1px; right: -1px;
    border-left: 0; border-top: 0;
}

.pannello-titolo {
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fioco);
}


.pannello .banda-memoria {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--riga);
}

.pannello .memoria { max-width: none; }

@media (max-width: 60rem) {
    .apertura { grid-template-columns: minmax(0, 1fr); }
    .pannello { margin-top: 6px; }
}


/* 24. Numero di sezione ────────────────────────────────────────────────────
   Le sezioni si contano. E' arredo editoriale, e serve: dice che la pagina
   ha un ordine, non che le cose sono capitate una sotto l'altra.         */

.sezione-numero {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--oro);
    align-self: center;
}

.sezione-numero::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-inline-start: 10px;
    vertical-align: middle;
    background: var(--oro-fioco);
}


/* 25. La scheda in rilievo ─────────────────────────────────────────────────
   La prima voce dell'elenco non e' una riga come le altre: immagine a tutta
   colonna e titolo piu' grande. Una lista dove tutto pesa uguale non ha
   gerarchia, e l'occhio non sa da dove cominciare.                       */

.scheda-rilievo {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0 clamp(20px, 3vw, 36px);
    padding-block: clamp(32px, 5vw, 48px);
}

.scheda-rilievo .scheda-media {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 26px;
}

.scheda-rilievo .scheda-corpo {
    grid-column: 2;
    grid-row: 2;
}

.scheda-rilievo .scheda-media img { border-color: var(--riga-forte); }

.scheda-rilievo :is(h2, h3) {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    letter-spacing: -0.03em;
}

.scheda-rilievo .sommario {
    margin-top: 12px;
    font-size: 1.06rem;
    max-width: 44rem;
}

/* Il numero della voce in rilievo e' grande quanto conta. */
.scheda-rilievo .scheda-numero {
    font-size: 1.05rem;
    color: var(--oro);
}

.scheda-rilievo .scheda-genere { color: var(--oro-fioco); }

@media (max-width: 40rem) {
    .scheda-rilievo { grid-template-columns: minmax(0, 1fr); }
    .scheda-rilievo .scheda-media { grid-column: 1; grid-row: 2; }
    .scheda-rilievo .scheda-corpo { grid-column: 1; grid-row: 3; }
}


/* 26. Colophon ─────────────────────────────────────────────────────────────
   Di cosa e' fatta questa pagina, in numeri presi alla build. Nei libri il
   colophon dice carta, carattere e tiratura; qui dice peso, richieste e
   caratteri. Chi arriva in fondo alla pagina di uno sviluppatore merita di
   trovarci qualcosa, e non un'altra riga di navigazione.                  */

.colophon {
    padding-block: clamp(22px, 3vw, 30px) clamp(30px, 4vw, 44px);
    max-width: 48rem;
    border-top: 1px solid var(--riga);
    color: var(--fioco);
    font-size: 0.86rem;
    line-height: 1.6;
}

/* Il guscio centra col suo max-width: qui serve che la riga resti a
   sinistra, allineata a tutto il resto della pagina. */
.colophon { margin-inline: 0; }

/* La riga col copyright e i contatti perde la misura, che ora sta nel
   colophon, e diventa solo la riga di chiusura. */
.piede-interno { padding-block: 26px 0; }

@media (max-width: 48rem) {
    .colophon { font-size: 0.9rem; }
}


/* 27. Pavimento tipografico su telefono ────────────────────────────────────
   Questo blocco sta in FONDO al foglio, e non insieme alle altre regole per
   telefono del blocco 15, per una ragione che vale la pena ricordare: a
   parita' di specificita' vince la regola che viene dopo nel sorgente, anche
   contro una media query. Le regole dei blocchi 23-26 sono state scritte
   dopo il blocco 15, e riportavano queste etichette sotto misura senza che
   niente segnalasse niente.

   Il pavimento e' 0.76rem, cioe' 12,16 px. Non 0.72rem: quelli sono 11,52 px,
   e per un po' ho guardato il numero in rem convincendomi che bastasse.     */

@media (max-width: 48rem) {
    .pannello-titolo,
    .sezione-numero,
    .scheda-genere,
    .banda-memoria figcaption,
    .riga-articolo .durata,
    .lettura dt,
    .specifiche dt,
    .etichetta,
    .stato {
        font-size: 0.76rem;
    }
}


/* 28. Il pannello, senza contatori ─────────────────────────────────────────
   Prima qui c'erano tre numeri: progetti, articoli, stelle su GitHub.
   Contare le proprie cose e mostrare le stelle altrui sono due modi di
   riempire spazio con niente — e il conteggio delle stelle invita per giunta
   a un confronto che non aiuta. Resta la griglia, che non e' una statistica:
   e' il motivo della copertina del libro, e con JavaScript attivo e' un
   allocatore che si puo' far girare.                                       */

.pannello .banda-memoria { padding-top: 0; border-top: 0; }

/* La didascalia non spiega piu' la griglia: parte vuota, e si riempie solo
   quando l'allocatore gira. Quindi niente min-height — uno spazio riservato
   a un testo che di solito non c'e' e' solo un buco. `:empty` la toglie del
   tutto dal flusso finche' non serve. */
.pannello .banda-memoria figcaption {
    margin-top: 16px;
    font-family: var(--prosa);
    font-size: 0.92rem;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.55;
    color: var(--tenue);
}

.pannello .banda-memoria figcaption:empty { margin-top: 0; }

/* Le tecnologie, sotto la griglia. Riga sola, separatori a punto medio: e'
   la cosa che chi apre il profilo per lavoro cerca per prima, e prima stava
   solo in fondo a Chi sono. Interlinea larga perche' a colonna stretta va a
   capo tre o quattro volte e deve restare leggibile. */
.pannello-titolo-secondo {
    margin-top: clamp(24px, 4vw, 34px);
    padding-top: clamp(18px, 3vw, 24px);
    border-top: 1px solid var(--riga);
}

.pannello-stack {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.9;
    color: var(--tenue);
}


/* 29. Ritratto ─────────────────────────────────────────────────────────────
   La foto in cima a Chi sono. Accanto al titolo e non sopra, cosi' la pagina
   comincia con una persona e un nome sulla stessa riga invece che con una
   figura da scavalcare.                                                    */

.intestazione-ritratto {
    display: flex;
    align-items: flex-start;
    gap: clamp(18px, 3vw, 30px);
}

.intestazione-ritratto > div { min-width: 0; }

/* Non tonda. Il cerchio ritagliava proprio dove nella foto c'e' il mento, e
   soprattutto non c'entra niente col resto del sito: qui ogni immagine sta
   dentro una cornice a filo con l'angolo appena smussato. La foto la segue. */
.ritratto {
    flex: none;
    width: 168px;
    height: 168px;
    border-radius: 4px;
    border: 1px solid var(--riga-forte);
    object-fit: cover;
    /* Il filo d'oro attorno: lo stesso segno del pannello in home. */
    outline: 1px solid var(--oro-fioco);
    outline-offset: 5px;
}

@media (max-width: 48rem) {
    .intestazione-ritratto { gap: 18px; }
    .ritratto { width: 116px; height: 116px; outline-offset: 4px; }
}

@media (max-width: 26rem) {
    .intestazione-ritratto { flex-direction: column; }
    .ritratto { width: 128px; height: 128px; }
}


/* 30. La firma in apertura ─────────────────────────────────────────────────
   La foto accanto all'occhiello, sopra al nome. Non compete col titolo — gli
   fa da ancora: chi arriva vede una persona prima di leggere una riga.    */

.apertura-firma {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.ritratto-piccolo {
    width: 84px;
    height: 84px;
    outline-offset: 4px;
}

@media (max-width: 48rem) {
    .apertura-firma { gap: 14px; margin-bottom: 18px; }
    .ritratto-piccolo { width: 72px; height: 72px; outline-offset: 3px; }
}