/* Reset essenziale e tipografia di base. */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

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

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

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

/* Titoli in bastone pesante e stretto. La crenatura negativa non e' un
   vezzo: a peso 800 le lettere sono gia' larghe di loro, e con la spaziatura
   normale un titolo si distende invece di compattarsi. Misurata sul
   campionario a 56px, -0,035em e' il punto in cui il titolo si legge come un
   blocco solo; a -0,045 le aste di "azzerare" cominciavano a toccarsi. */
h1, h2, h3, h4 {
	font-family: var(--elic-font-display);
	font-weight: var(--elic-peso-display);
	line-height: var(--elic-interlinea-titolo);
	letter-spacing: -0.035em;
	text-wrap: balance;
}

h1 { font-size: var(--elic-dim-display); }
h2 { font-size: var(--elic-dim-titolo); }

/* Dal terzo livello in giu' si scende di un peso e si allenta la crenatura:
   sono corpi piccoli, e li' la stretta che compatta un titolo da 56px
   chiuderebbe soltanto le parole. */
h3, h4 {
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

h3 { font-size: var(--elic-dim-grande); }

p {
	max-width: 68ch;
	/* Evita le righe orfane in fondo ai paragrafi: costa niente e su una
	   pagina con molto bianco un rigo di una parola si vede. */
	text-wrap: pretty;
}

/* Il reset azzera i margini, quindi due paragrafi consecutivi si
   incollerebbero. Lo spazio va fra l'uno e l'altro, non sotto ciascuno:
   cosi' l'ultimo paragrafo non lascia un margine morto in fondo al
   blocco che lo contiene. */
p + p,
p + ul,
p + ol,
ul + p,
ol + p {
	margin-top: var(--elic-sp-2);
}

a {
	color: inherit;
	text-underline-offset: 0.18em;
}

strong {
	/* Con una palette di due valori il grassetto e' uno dei pochi modi
	   rimasti per marcare una parola dentro un paragrafo. Adesso pesa 700 e
	   non 620: con i titoli saliti a 800, un rilievo a 620 nel testo si
	   perdeva: era piu' scuro del tondo ma non abbastanza da farsi vedere. */
	font-weight: var(--elic-peso-rilievo);
}

/* Focus sempre visibile: requisito WCAG 2.1 AA, criterio 1.4.11.
   L'oro non raggiunge il contrasto minimo su fondo chiaro, quindi il
   contorno predefinito e' bruno scuro e diventa oro solo sui fondi scuri. */
:focus-visible {
	outline: var(--elic-contorno-focus);
	outline-offset: 3px;
}

.elic-sezione--scura :focus-visible,
.elic-footer :focus-visible {
	outline: var(--elic-contorno-focus-su-scuro);
}

/* Chi riceve il fuoco solo dal programma non mostra il contorno.

   tabindex negativo vuol dire fuori dall'ordine del Tab: nessuno ci arriva
   navigando da tastiera, quindi il contorno non indica dove si e' — comparirebbe
   da solo, addosso a un titolo o a una domanda, a chi ha appena cliccato col
   mouse. Il criterio WCAG 2.4.7 chiede un fuoco visibile su cio' che si opera
   da tastiera, e questi non si operano.

   Il fuoco ci va lo stesso, e serve: e' cosi' che un lettore di schermo
   annuncia il titolo del modale all'apertura, o la domanda a ogni passo. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
	outline: none;
}

/* Occhiello: la piccola etichetta maiuscola sopra i titoli.

   Nella prima direzione era testo e basta. Qui porta con se' un trattino
   d'oro: e' l'unico posto della pagina in cui l'oro compare a ogni
   sezione, ed e' quello che tiene insieme l'alternanza fra carta e
   inchiostro. Il
   trattino sta nel componente e non nelle singole sezioni, altrimenti
   ognuna se lo riscriverebbe con una misura diversa. */
.elic-occhiello {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	/* Lo stacco dal titolo sta qui e non nelle singole sezioni. Prima ce
	   l'avevano solo la hero e la chiusura, con una regola per una e lo
	   stesso valore scritto due volte; le altre due — la fascia del Ciclo
	   Naturale Breve e quella della spirale — restavano incollate al titolo,
	   e nessuno se n'era accorto proprio perche' la misura non aveva un posto
	   dove stare. */
	margin-bottom: var(--elic-sp-3);
	font-family: var(--elic-font-testo);
	font-size: var(--elic-dim-occhiello);
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: var(--elic-spaziatura-occhiello);
	text-transform: uppercase;
	/* Non l'oro della palette: su bianco misura 2,28:1 e l'occhiello e'
	   testo piccolo, quindi serve 4,5:1. */
	color: var(--elic-oro-scuro);
}

/* Il trattino passa da uno a due pixel: e' il segno che accompagna ogni
   occhiello della pagina, e con tutto il resto salito di peso un filo da un
   pixel si leggeva come un residuo. */
.elic-occhiello::before {
	content: "";
	width: 2.25rem;
	height: 2px;
	background: currentcolor;
	flex: none;
}

.elic-sezione--scura .elic-occhiello {
	color: var(--elic-oro);
}

/* Salto al contenuto per la navigazione da tastiera. */
.elic-salta-al-contenuto {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--elic-sp-2) var(--elic-sp-3);
	background: var(--elic-bruno);
	color: var(--elic-su-scuro);
	text-decoration: none;
}

.elic-salta-al-contenuto:focus {
	left: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Il corsivo dentro un titolo non e' un corsivo: e' l'accento in oro.

   Il file di Inter non contiene un corsivo, quindi il browser lo
   fabbricherebbe inclinando le lettere dritte. Su un serif il trucco passa,
   su un bastone in 800 si vede che e' un trucco. A distinguere la parte
   accentata basta l'oro, che e' l'unico colore della pagina e qui non ha
   concorrenza.

   Sul bianco va la gradazione scura: l'oro pieno misura 2,28:1, sotto il 3:1
   che il criterio WCAG 1.4.3 chiede anche al testo grande. Sul bruno va
   quella chiara, che ne misura 9,2. */
h1 em,
h2 em,
h3 em {
	font-style: normal;
	color: var(--elic-oro-scuro);
}

.elic-sezione--scura h1 em,
.elic-sezione--scura h2 em,
.elic-sezione--scura h3 em {
	color: var(--elic-oro-chiaro);
}