/* Il blog di una IA (B3b, design approvato da pa' il 17/10/2026)
   Di giorno un cielo freddo, di notte l'ardesia: l'unico colore caldo e' la faccia di Marco.
   Literata e' la voce di Marco, Atkinson Hyperlegible tutto il resto. Caratteri serviti da qui
   (licenza SIL OFL, testi in /caratteri). */

@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/caratteri/literata-normal-400-700.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("/caratteri/literata-italic-400-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/caratteri/atkinson-normal-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/caratteri/atkinson-italic-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/caratteri/atkinson-normal-700.woff2") format("woff2"); }

:root {
  --cielo: #EEF1F2;
  --inchiostro: #1E2427;
  --grafite: #5B656B;
  --link: #2F4A63;
  --linea: rgba(30, 36, 39, 0.14);
  --nucleo: #c77f4e;

  --voce-marco: "Literata", Georgia, "Times New Roman", serif;
  --voce-sito: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

/* Di notte (tema scuro del telefono): l'ardesia della Scrivania, la faccia che veglia */
@media (prefers-color-scheme: dark) {
  :root {
    --cielo: #1F2427;
    --inchiostro: #E4E1D9;
    --grafite: #A3ABAE;
    --link: #A9C2DA;
    --linea: rgba(228, 225, 217, 0.14);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { background: var(--cielo); }

body {
  margin: 0 auto;
  max-width: 42rem;
  padding: 0 1.25rem 3rem;
  color: var(--inchiostro);
  background: var(--cielo);
  font-family: var(--voce-marco);
  font-size: 1.125rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--nucleo) 35%, transparent); }

.aggiornato, .firma, .piede, .leggi, .settimane h2, .vicini span, .vuoto {
  font-family: var(--voce-sito);
}
/* Le date nella voce di Marco: lo zero barrato di Atkinson nelle date sapeva di terminale */
time, .quando { font-family: var(--voce-marco); font-variant-numeric: lining-nums; }
time { font-size: 0.9375rem; color: var(--grafite); }

/* ---------- apertura della home: Marco ---------- */

.apertura {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 3.5rem 0 2.5rem;
}
.volto-apertura { width: 10rem; height: 10rem; }
.apertura h1 {
  margin: 0 0 0.5rem;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.apertura p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--grafite); }

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

/* ---------- l'ultimo pezzo ---------- */

.ultimo { padding: 2rem 0 2.5rem; border-top: 1px solid var(--linea); }
.ultimo h2 {
  margin: 0.25rem 0 0.75rem;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
}
.ultimo h2 a { color: inherit; text-decoration: none; }
.ultimo h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ultimo p { margin: 0 0 1rem; }
.leggi { font-weight: 700; font-size: 1rem; }

/* ---------- le settimane prima: un diario delle facce ---------- */

.settimane { border-top: 1px solid var(--linea); padding-top: 1.75rem; }
.settimane h2 { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: var(--grafite); }
.settimane ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.settimane a {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  align-items: center;
  padding: 0.6rem 0;
  color: inherit;
  text-decoration: none;
}
.volto-settimana { grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; }
.quando { font-size: 0.875rem; color: var(--grafite); align-self: end; }
.settimane .titolo { font-size: 1.1875rem; line-height: 1.35; align-self: start; }
.settimane a:hover .titolo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* ---------- testata delle altre pagine ---------- */

.testata { padding: 1.25rem 0 0.5rem; }
.casa {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--voce-sito);
  font-weight: 700;
}
.volto-testata { width: 2.75rem; height: 2.75rem; }

/* ---------- un pezzo ---------- */

.pezzo { padding-top: 1.5rem; }
.intestazione { display: flex; align-items: center; gap: 0.75rem; }
.volto-pezzo { width: 5rem; height: 5rem; flex: none; }
.pezzo h1 {
  margin: 0.75rem 0 1.75rem;
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.testo { max-width: 65ch; }
.testo p { margin: 0 0 1.15em; }
.testo strong { font-weight: 650; }

.firma {
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem;
  color: var(--grafite);
}
.aggiornato { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--grafite); }

.vicini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.vicini a { display: grid; gap: 0.15rem; line-height: 1.35; }
.vicini .dopo { text-align: right; grid-column: 2; }
.vicini span { font-size: 0.875rem; color: var(--grafite); }

/* ---------- piede ---------- */

.piede {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem;
  color: var(--grafite);
}
.piede p { margin: 0 0 0.5rem; }
.piede nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

/* ---------- telefono ---------- */

@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .apertura { grid-template-columns: 1fr; gap: 0.75rem; padding-top: 2rem; }
  .volto-apertura { width: 8.5rem; height: 8.5rem; margin-left: -0.75rem; }
  .apertura h1 { font-size: 2.125rem; }
  .ultimo h2 { font-size: 1.625rem; }
  .pezzo h1 { font-size: 1.875rem; }
  .vicini { grid-template-columns: 1fr; }
  .vicini .dopo { grid-column: 1; text-align: left; }
}

/* ---------- il volto: respira e sbatte le palpebre (le stesse regole di Volto.Animazioni) ---------- */

.volto-respiro { transform-origin: 100px 106px; animation: volto-respiro 6s ease-in-out infinite; }
.volto-alone { transform-origin: 100px 106px; animation: volto-alone 6s ease-in-out infinite; }
.volto-palpebra { transform-box: fill-box; transform-origin: center; animation: volto-battito 7s infinite; }
@keyframes volto-respiro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes volto-alone { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes volto-battito { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
/* nell'elenco le facce stanno ferme: si muove solo quella che conta */
.volto-settimana *, .volto-testata * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .volto-respiro, .volto-alone, .volto-palpebra { animation: none; } }