/* Reset ragionato e tipografia di base. Qui si stilano solo elementi HTML:
   le classi stanno in layout.css, components.css e utilities.css. */

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

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

body {
	margin: 0;
	background: var(--esca-bianco);
	color: var(--esca-testo);
	font-family: var(--esca-font-testo);
	font-size: var(--esca-dim-normale);
	line-height: var(--esca-interlinea-testo);
	-webkit-font-smoothing: antialiased;
}

/* I titoli sono Playfair. Il corpo piu' basso e' quello di h4: sotto quella
   soglia si passa a Inter, perche' un Didone a corpo piccolo si sfilaccia. */
h1,
h2,
h3,
h4 {
	margin: 0 0 var(--esca-spazio-3);
	font-family: var(--esca-font-titolo);
	font-weight: 400;
	line-height: var(--esca-interlinea-titolo);
	letter-spacing: var(--esca-spaziatura-titolo);
	text-wrap: balance;
}

h1 {
	font-size: var(--esca-dim-display);
}

h2 {
	font-size: var(--esca-dim-titolo);
}

h3,
h4 {
	font-size: var(--esca-dim-sottotitolo);
}

/* h5 e h6 escono dalla famiglia da titolo: a quei corpi Playfair non regge. */
h5,
h6 {
	margin: 0 0 var(--esca-spazio-2);
	font-family: var(--esca-font-testo);
	font-size: var(--esca-dim-normale);
	font-weight: 600;
	line-height: var(--esca-interlinea-testo);
}

/* Il corsivo del Didone e' la firma tipografica del sito: si usa sulla
   seconda riga dei titoli e sui richiami, non a caso. */
h1 em,
h2 em,
h3 em {
	font-style: italic;
}

p {
	margin: 0 0 var(--esca-spazio-3);
	max-width: var(--esca-larghezza-testo);
}

a {
	color: inherit;
	text-decoration-color: var(--esca-oro-tratto);
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-color: currentColor;
}

/* Focus visibile ovunque, senza eccezioni: e' un requisito WCAG 2.4.7 e
   toglierlo per motivi estetici e' il modo piu' rapido di rendere il sito
   inutilizzabile da tastiera. */
:focus-visible {
	outline: 2px solid var(--esca-oro-testo);
	outline-offset: 3px;
}

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

ul,
ol {
	margin: 0 0 var(--esca-spazio-3);
	padding-left: var(--esca-spazio-4);
}

hr {
	height: 1px;
	margin: var(--esca-spazio-6) 0;
	border: 0;
	background: var(--esca-filo);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: var(--esca-spazio-2) 0;
	border-bottom: 1px solid var(--esca-filo);
	text-align: left;
}