/**
 * Elementi di base — DAU 2026.
 *
 * Niente reset totale: azzerare ogni margine costringe poi a rimetterli tutti
 * a mano. Qui si normalizza solo ciò che i browser fanno in modo diverso.
 */

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

html {
	/* Lo scorrimento animato serve ai link interni, ma chi ha chiesto meno
	   movimento lo disattiva da tokens.css. */
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--carta);
	color: var(--inchiostro);
	font-family: var(--sans);
	font-size: var(--t-base);
	line-height: var(--riga-larga);
	/* Il fondo avoriato con testo scuro non ha bisogno di antialiasing
	   forzato: su schermi non Retina lo renderebbe più debole. */
	text-rendering: optimizeLegibility;
}

/* --- Titoli ---------------------------------------------------------------
   Serif per i titoli, sans per il resto. Il serif viene dal dispositivo:
   nessun file da scaricare, nessuna richiesta a domini esterni. */

h1, h2, h3, h4 {
	margin: 0 0 var(--s4);
	font-family: var(--serif);
	font-weight: 400;
	line-height: var(--riga-stretta);
	/* I serif da testo hanno spaziature pensate per il corpo del testo: nei
	   titoli grandi risultano larghe. Si stringono appena. */
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
h4 { font-size: var(--t-base); font-family: var(--sans); font-weight: 700; }

p {
	margin: 0 0 var(--s4);
	text-wrap: pretty;
}

/* Nei blocchi di testo lungo si limita la riga: oltre le 70 battute l'occhio
   fatica a trovare l'inizio della riga successiva. */
.testo > p,
.testo > ul,
.testo > ol {
	max-width: var(--largh-testo);
}

/* --- Collegamenti --------------------------------------------------------- */

/* I link sono neri e sottolineati, non colorati. In una pagina che per il
   resto è in bianco e nero un link rosso sembra un errore di stampa, e il
   rosso del marchio resta un segno grafico: vedi --segnale in tokens.css. */
a {
	color: var(--inchiostro);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--transizione);
}

a:hover {
	color: var(--inchiostro-t);
}

/* Il contorno di messa a fuoco non si toglie mai: è l'unico modo che ha chi
   naviga da tastiera per sapere dove si trova. :focus-visible lo mostra solo
   a chi usa la tastiera, non a chi clicca. */
:focus-visible {
	outline: 3px solid var(--inchiostro);
	outline-offset: 3px;
	border-radius: var(--raggio);
}

/* --- Immagini -------------------------------------------------------------
   width e height nell'HTML servono al browser per riservare lo spazio prima
   che l'immagine arrivi: senza, la pagina salta mentre carica. Qui si rende
   quella dimensione elastica senza perdere le proporzioni. */

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

figure {
	margin: 0;
}

figcaption {
	margin-top: var(--s2);
	color: var(--inchiostro-t);
	font-size: var(--t-sm);
	line-height: var(--riga-media);
}

/* --- Liste ---------------------------------------------------------------- */

ul, ol {
	margin: 0 0 var(--s4);
	padding-left: var(--s6);
}

li {
	margin-bottom: var(--s2);
}

/* --- Varie ---------------------------------------------------------------- */

hr {
	height: 1px;
	margin: var(--s12) 0;
	border: 0;
	background: var(--linea);
}

strong, b {
	font-weight: 700;
}

small {
	font-size: var(--t-sm);
}

::selection {
	background: var(--inchiostro);
	color: var(--carta-alta);
}

/* Visibile solo ai lettori di schermo: usato per le etichette che servono a
   chi non vede ma sarebbero ridondanti per chi vede. */
.solo-lettori {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Il salto al contenuto: primo elemento focalizzabile della pagina, invisibile
   finché non si preme Tab. Chi naviga da tastiera evita di ripassare ogni
   volta per le nove voci di menu. */
.salta-al-contenuto {
	position: absolute;
	top: var(--s2);
	left: var(--s2);
	z-index: 1000;
	padding: var(--s3) var(--s4);
	background: var(--inchiostro);
	color: var(--carta);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--transizione);
}

.salta-al-contenuto:focus {
	transform: translateY(0);
	color: var(--carta);
}