/* ============================================================
   Base: azzeramento, tipografia di fondo, accessibilità
   ============================================================ */

*, *::before, *::after{ margin:0; padding:0; 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:.01ms !important; transition-duration:.01ms !important }
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--fs-base);
  line-height:var(--lh-testo);
  font-optical-sizing:auto;      /* Source Serif 4 ha l'asse opsz: lo lasciamo lavorare */
  text-rendering:optimizeLegibility;
}

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

a{ color:inherit; text-decoration:none }
a:hover{ color:var(--accent-deep) }

button, input, select, textarea{ font:inherit; color:inherit }

h1,h2,h3,h4,h5,h6{ font-weight:600; line-height:var(--lh-titolo); text-wrap:balance }

/* ---- accessibilità ---- */
/*
 * Il contorno del fuoco.
 *
 * Un colore solo non basta. `--accent-text` è nato per il testo sui fondi
 * chiari e lì fa 5,75:1, ma `outline-offset:2px` posa il contorno **fuori**
 * dall'elemento, cioè sulla superficie che gli sta intorno: dentro il piede
 * scuro fa 2,53:1, sotto il 3:1 che WCAG 1.4.11 chiede a un indicatore.
 * Misurato al passo 7 percorrendo tutti i fermi di home e scheda: 9 tipi su
 * 11 a norma, il piede no.
 * Il colore è quindi una variabile, e le superfici scure la ridichiarano.
 * ⚠️ Chi aggiunge al tema una campitura scura si aggiunga a quell'elenco:
 *    altrimenti il fuoco ci si perde dentro e non se ne accorge nessuno.
 */
:focus-visible{
  outline:2px solid var(--fuoco);
  outline-offset:2px;
  border-radius:2px;
}
.piede{ --fuoco:var(--paper) }   /* 14,6:1 sul fondo del piede */

/* Il bersaglio del salto al contenuto ha tabindex="-1" (header.php): riceve
   il fuoco solo da programma, mai col Tab, e un contorno intorno a tutta la
   pagina non direbbe niente a nessuno. */
main:focus{ outline:none }

/* testo per soli lettori di schermo */
.vh{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}

/* salta al contenuto */
.skip{
  position:absolute; left:-9999px; z-index:100;
  background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-size:var(--fs-sm);
  padding:10px 16px; border-radius:var(--radius);
}
.skip:focus{ left:12px; top:12px }

/* ---- elementi ricorrenti ---- */
.occhiello{
  font-family:var(--sans);
  font-size:var(--fs-3xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-text);
  font-weight:600;
}
.occhiello .n{
  font-family:var(--mono);
  letter-spacing:.04em;
  color:var(--muted);
  font-weight:400;
  font-variant-numeric:tabular-nums;
}

.mono-num{ font-family:var(--mono); font-variant-numeric:tabular-nums }

hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-6) 0 }