/* ==========================================================================
   PARATESTO — foglio di stile
   Lo stile di Paratesto su Bear (finestre con la barra spessa, ombre piene,
   scacchiera ciano e viola dei colori del Commodore 64, caratteri a macchina),
   più un tema scuro.
   Si può modificare a mano: il programma che genera il sito non lo tocca.
   Colori solo tramite le variabili qui sotto: il tema scuro cambia solo quelle.
   - tema chiaro «Originale»: quello di Paratesto su Bear
   - tema scuro «Negativo»: automatico se il dispositivo è in modalità scura;
     il pulsante nella barra in alto lo cambia a mano (la scelta resta)
   ========================================================================== */

/* --- Caratteri locali (licenza SIL OFL, in font/) ------------------------- */
@font-face { font-family: "Courier Prime"; src: url("font/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("font/courier-prime-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("font/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("font/fira-code-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("font/fira-code-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* JetBrains Mono, variabile: qualsiasi peso tra 100 e 800 (licenza SIL OFL) */
@font-face { font-family: "JetBrains Mono"; src: url("font/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("font/jetbrains-mono-latin-wght-italic.woff2") format("woff2"); font-weight: 100 800; font-style: italic; font-display: swap; }


/* --- Variabili ------------------------------------------------------------ */
:root {
  /* tema chiaro «Originale» */
  --scacchi-1: #75CEC8;        /* scacchiera: ciano... */
  --scacchi-2: #706DEB;        /* ...e viola (colori del Commodore 64, da cobb.land) */
  --carta: #F9F6EF;            /* finestre */
  --carta-2: #EFEBE1;          /* codice, tabelle */
  --inchiostro: #0A0A0A;       /* testo, bordi */
  --grigio: rgba(10, 10, 10, 0.6);   /* date, didascalie, parentesi del menu */
  --filo: rgba(10, 10, 10, 0.14);    /* linee sottili */
  --barra: #0A0A0A;            /* barra spessa in cima alle finestre */
  --su-barra: #F9F6EF;
  --ombra-colore: #706DEB;     /* ombra piena delle finestre */
  --nota: #FFFF99;             /* riquadri [!nota] e ==evidenziato== */
  --su-nota: #0A0A0A;
  --zero-rosso: #B8122B;       /* solo la voce «zero» del menu: */
  --zero-ambra: #E8A33D;       /* il disturbo rosso e ambra di Paratesto Zero */

  /* caratteri: per tornare a quelli di prima, togli "JetBrains Mono", dalle due righe */
  --f-mono: "JetBrains Mono", "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  --f-menu: "JetBrains Mono", "Fira Code", "Courier Prime", ui-monospace, monospace;
  --peso-testo: 400;           /* nel tema scuro un po' più leggeri: il testo chiaro */
  --peso-forte: 700;           /* su fondo scuro sembra più spesso di quello che è */
  --larghezza: 72ch;
  --ombra: 5px;
  --barra-h: 25px;
  --barra-peso: 400;
  --ombra-interna: var(--inchiostro);   /* ombra di nome, citazioni e riquadri */           /* scritte nelle barre: nel tema scuro (barra chiara) più spesse */
  color-scheme: light;
}

/* tema scuro «Negativo»: lo stesso sito in negativo, quasi nero e crema */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --scacchi-1: #0B0A09; --scacchi-2: #131210;
    --carta: #151412; --carta-2: #22201C;
    --inchiostro: #FAF8F2; --grigio: rgba(250, 248, 242, 0.7); --filo: rgba(250, 248, 242, 0.2);
    --barra: #FAF8F2; --su-barra: #151412;
    --ombra-colore: #6B665C; --ombra-interna: #6B665C; --barra-peso: 700; --peso-testo: 350; --peso-forte: 640;
    --nota: #5A4A1A; --su-nota: #FFF9DC;
    --zero-rosso: #FF7A68;
    color-scheme: dark;
  }
}
:root[data-tema="scuro"] {
  --scacchi-1: #0B0A09; --scacchi-2: #131210;
  --carta: #151412; --carta-2: #22201C;
  --inchiostro: #FAF8F2; --grigio: rgba(250, 248, 242, 0.7); --filo: rgba(250, 248, 242, 0.2);
  --barra: #FAF8F2; --su-barra: #151412;
  --ombra-colore: #6B665C; --ombra-interna: #6B665C; --barra-peso: 700; --peso-testo: 350; --peso-forte: 640;
  --nota: #5A4A1A; --su-nota: #FFF9DC;
  --zero-rosso: #FF7A68;
  color-scheme: dark;
}


/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0; padding: 32px 20px;
  font-family: var(--f-mono); font-size: 1rem; line-height: 1.65; font-weight: var(--peso-testo);
  color: var(--inchiostro); background-color: var(--scacchi-1);
  background-image: repeating-conic-gradient(var(--scacchi-1) 0% 25%, var(--scacchi-2) 0% 50%);
  background-size: 6px 6px;
  overflow-wrap: break-word;
}
.colonna { max-width: var(--larghezza); margin-inline: auto; display: grid; gap: 2em; }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-mono); font-weight: var(--peso-forte); line-height: 1.35; letter-spacing: 0.03em; margin: 0; text-wrap: balance; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1.1em; }
h4, h5, h6 { font-size: 1em; }
b, strong { letter-spacing: 0.03em; font-weight: var(--peso-forte); }
a { color: inherit; font-weight: var(--peso-forte); text-decoration: underline dotted 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-style: solid; }
:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
::selection { background: var(--inchiostro); color: var(--carta); }


/* --- Finestre: bordo, barra spessa in cima, ombra piena -------------------- */
.finestra { background: var(--carta); border: 2px solid var(--inchiostro); box-shadow: var(--ombra) var(--ombra) 0 0 var(--ombra-colore); min-width: 0; }
.finestra > .barra {
  display: flex; justify-content: space-between; align-items: center; gap: 1em;
  min-height: var(--barra-h); padding: 0 0.6em;
  background: var(--barra); color: var(--su-barra);
  font-family: var(--f-menu); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
  font-weight: var(--barra-peso);
}
.finestra > .barra a { color: inherit; font-weight: inherit; }
.finestra > .corpo { padding: 1.5em 1.2em; min-width: 0; }


/* --- Testata: nome, motto, menu ----------------------------------------------- */
.testata .corpo { text-align: center; padding: 1.25em 1em 1em; }
.testata .nome {
  display: inline-block; font-size: 1.5em; line-height: 1.2; text-decoration: none;
  background: var(--carta); border: 2px solid var(--inchiostro); padding: 0.35em 0.6em;
  box-shadow: 4px 4px 0 0 var(--ombra-interna); transition: transform .12s, box-shadow .12s;
}
.testata .nome:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 var(--ombra-interna); }
.motto { margin: 0.9em auto 0.5em; padding: 0 1em 0.5em; max-width: fit-content; font-style: italic; font-size: 0.9em; color: var(--grigio); letter-spacing: 0.03em; }
nav.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25em; margin-top: 0.4em; }
nav.menu a { font-family: var(--f-menu); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15em 0.5em; }
nav.menu a::before { content: "["; color: var(--grigio); font-size: 0.9em; }
nav.menu a::after { content: "]"; color: var(--grigio); font-size: 0.9em; }
nav.menu a:hover, nav.menu a:focus-visible, nav.menu a[aria-current="page"], nav.menu a.qui { background: var(--inchiostro); color: var(--carta); outline: none; }
nav.menu a:hover::before, nav.menu a:hover::after, nav.menu a:focus-visible::before, nav.menu a:focus-visible::after,
nav.menu a[aria-current="page"]::before, nav.menu a[aria-current="page"]::after, nav.menu a.qui::before, nav.menu a.qui::after { color: inherit; }

/* La voce «zero»: un'intrusa da Paratesto Zero. Niente parentesi, corsivo,
   storta e un po' più in basso, con il disturbo rosso e ambra del nome di
   Paratesto Zero; sotto il mouse il disturbo si agita. */
nav.menu a.voce-zero {
  font-family: var(--f-mono); font-style: italic; font-size: 1.15em; text-transform: none; letter-spacing: 0.02em;
  padding: 0 0.3em; margin-left: 0.4em;
  text-shadow: 1.5px 0 0 var(--zero-rosso), -1.5px 0 0 var(--zero-ambra);
  transform: rotate(-5deg) translateY(0.15em);
}
nav.menu a.voce-zero::before, nav.menu a.voce-zero::after { content: none; }
nav.menu a.voce-zero:hover, nav.menu a.voce-zero:focus-visible { background: none; color: var(--inchiostro); animation: disturbo 0.4s steps(1) infinite; }
nav.menu a.voce-zero:focus-visible { outline: 2px dashed var(--inchiostro); }
@keyframes disturbo {
  0%   { text-shadow: 1.5px 0 0 var(--zero-rosso), -1.5px 0 0 var(--zero-ambra); transform: rotate(-5deg) translateY(0.15em); }
  33%  { text-shadow: -3px 0 0 var(--zero-rosso), 2.5px 0 0 var(--zero-ambra); transform: rotate(-3deg) translate(1px, 0.05em); }
  66%  { text-shadow: 3px 1px 0 var(--zero-rosso), -2px -1px 0 var(--zero-ambra); transform: rotate(-7deg) translate(-1px, 0.2em); }
}
@media (prefers-reduced-motion: reduce) { nav.menu a.voce-zero:hover, nav.menu a.voce-zero:focus-visible { animation: none; } }
.cambia-tema {
  margin-left: auto; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  cursor: pointer; background: none; border: 0; padding: 0;
}
.cambia-tema:hover { text-decoration: underline; }


/* --- Testo ---------------------------------------------------------------- */
article > h1 { margin-bottom: 0.2em; }
.meta { margin: 0 0 1.2em; color: var(--grigio); font-style: italic; }
.meta .etichetta { font-weight: 400; font-style: normal; }
.testo > * { margin-block: 1.2em; }
.testo > :first-child { margin-top: 0; }
.testo > :last-child { margin-bottom: 0; }
.testo h2, .testo h3, .testo h4 { margin-block: 1.6em 0.5em; }
.home .testo h2, .home .testo h3 { text-align: center; }
.testo ul, .testo ol { padding-left: 1.4em; }
.testo li + li { margin-top: 0.25em; }
.testo img { max-width: 100%; height: auto; display: block; image-rendering: pixelated; margin-block: 1.8em; }
.testo hr { border: 0; text-align: center; line-height: 1; margin-block: 1.8em; }
.testo hr::after { content: "□ □ □ □ □"; letter-spacing: 0.25em; color: var(--grigio); font-size: 0.7em; }
.testo code { font-family: var(--f-mono); padding-inline: 0.3em; background: var(--carta-2); }
.testo pre { overflow-x: auto; padding: 0.75em 1em; background: var(--carta-2); border: 2px solid var(--inchiostro); }
.testo pre code { padding: 0; background: none; }
.testo table { width: 100%; border-collapse: collapse; border: 2px solid var(--inchiostro); display: block; overflow-x: auto; }
.testo th, .testo td { padding: 0.5em 0.75em; text-align: start; border: 1px solid var(--inchiostro); vertical-align: top; }
.testo th { background: var(--inchiostro); color: var(--carta); }
mark { background: var(--nota); color: var(--su-nota); padding-inline: 0.2em; }
.task-list-item { list-style: none; margin-left: -1.4em; }
.footnotes { font-size: 0.85em; border-top: 1px solid var(--filo); padding-top: 0.8em; }
.rotto { text-decoration: underline wavy var(--grigio); cursor: help; }
a.esterno::after { content: "↗"; font-size: 0.75em; margin-left: 0.1em; font-weight: 400; }

/* citazioni: riquadro con ombra; l'ultima riga «— Autore» diventa la firma */
.testo blockquote {
  margin-inline: 0; padding: 0.5em 1em; font-size: 0.9em; font-style: italic;
  border: 1px solid var(--inchiostro); box-shadow: 4px 4px 0 0 var(--ombra-interna); background: var(--carta);
}
.testo blockquote p { margin-block: 0.4em; }
.testo blockquote p:first-of-type::first-letter { font-size: 1.5em; font-weight: 700; }
.testo blockquote cite { display: block; margin-top: 0.8em; text-align: right; font-size: 0.9em; font-style: normal; letter-spacing: 0.08em; color: var(--grigio); }
.testo blockquote cite::before { content: "– "; }

/* riquadri: > [!nota] Titolo  ([!nota] e [!info] sono il foglietto giallo di Paratesto) */
.riquadro { margin-inline: 0; padding: 0.5em 1em; font-size: 0.9em; border: 1px solid var(--inchiostro); box-shadow: 4px 4px 0 0 var(--ombra-interna); background: var(--carta-2); }
.riquadro-nota, .riquadro-note, .riquadro-info { background: var(--nota); color: var(--su-nota); }
.riquadro > p { margin-block: 0.4em; }
.riquadro-titolo { font-weight: 700; }


/* --- Elenchi: ultime aggiunte, note, sezioni ------------------------------ */
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.75em; padding: 0.55em 0; border-bottom: 1px solid var(--filo); }
.elenco li:last-child { border-bottom: 0; }
.elenco a { flex: 1; min-width: 0; text-decoration: none; }
.elenco a:hover { text-decoration: underline solid 2px; }
.elenco time { margin-left: auto; white-space: nowrap; padding: 0.1em 0.5em; font-size: 0.8em; border: 1px solid var(--filo); color: var(--grigio); font-style: italic; }
.elenco li:hover time { border-color: var(--inchiostro); color: var(--inchiostro); }
.elenco .descr { flex-basis: 100%; font-size: 0.85em; color: var(--grigio); }
.aggiunte { margin-top: 1.6em; }
.aggiunte h2 { text-align: center; margin-bottom: 0.5em; }
.tutte { font-size: 0.85em; text-align: center; color: var(--grigio); }
.rimandi { margin-top: 1.6em; padding-top: 0.8em; border-top: 1px dashed var(--filo); font-size: 0.9em; }
.rimandi h2 { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grigio); margin-bottom: 0.3em; }
.mappa ul { margin: 0; padding-left: 1.2em; }
.mappa > ul { padding-left: 0; list-style: none; }
.mappa li { margin-block: 0.2em; }
.vuoto { color: var(--grigio); font-style: italic; }
.note h2[id^="a"] { margin-block: 1.4em 0.2em; }


/* --- Piè di pagina: licenza nella barra, bottoni 88×31 -------------------- */
.piede .barra { justify-content: center; }
.piede .corpo { padding: 0.5em 1em; text-align: center; font-size: 0.85em; word-spacing: -0.05em; }
.piede .corpo p { margin-block: 0.5em; }
.piede a { margin-inline: 0.1em; text-transform: lowercase; text-decoration: none; }
.piede a::before { content: "["; color: var(--grigio); font-weight: 400; }
.piede a::after { content: "]"; color: var(--grigio); font-weight: 400; }
.piede a:hover { background: var(--inchiostro); color: var(--carta); }
.piede a:hover::before, .piede a:hover::after { color: inherit; }
.piede img { display: inline-block; width: 88px; height: 31px; margin: 0.6em 2px 0.2em; image-rendering: pixelated; vertical-align: middle; }


/* --- Schermi stretti ------------------------------------------------------ */
@media (max-width: 34rem) {
  body { padding: 20px 12px; }
  .finestra > .corpo { padding: 1.2em 1em; }
  .elenco time { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  body { background: none; padding: 0; color: #000; }
  .testata, .piede { display: none; }
  .finestra { border: 0; box-shadow: none; }
}