/* ============================================================================
   Reset minimo, elementi HTML, tipografia e utility di impaginazione.
   Qui non ci sono componenti: solo ciò che vale su tutto il sito.
   ========================================================================= */

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

html {
    scroll-behavior: smooth;
    /* L'intestazione è fissa: senza questo, un'ancora porta il titolo
       della sezione sotto la barra. Risolto in CSS invece che in JavaScript. */
    scroll-padding-top: calc(var(--altezza-intestazione) + 16px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--carta);
    color: var(--inchiostro);
    font-family: var(--font-testo);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--rosa-antico-scuro); text-underline-offset: 3px; }

::selection { background: var(--azzurro); color: var(--grafite); }

/* Anello di focus unico per tutto il sito. Mai rimosso: è l'unico modo in cui
   chi naviga da tastiera sa dove si trova.
   Il rosa antico sulla grafite si ferma a 3.2:1, appena sopra la soglia, e
   sul fondo rosa antico delle sedi sparisce del tutto: ogni componente con
   un fondo pieno imposta `--anello` su un colore che vi si stacca, e il
   valore scende per eredità a tutto ciò che contiene. */
:focus-visible {
    outline: 2px solid var(--anello, var(--rosa-antico));
    outline-offset: 3px;
    border-radius: 2px;
}

/* --- Tipografia --------------------------------------------------------- */

h1, h2, h3, h4 {
    margin: 0;
    letter-spacing: -.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: 800; line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 700; line-height: 1.12; }
h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }

/* Occhiello: la riga breve che introduce un titolo. In mono e in rosa antico
   perché deve leggersi come un'etichetta, non come l'inizio del testo. */
.etichetta {
    display: block;
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1.4;
    color: var(--rosa-antico-scuro);
}

.etichetta--su-scuro { color: var(--azzurro); }

/* Il nome viene dalla chiave `occhiello_salvia` salvata nelle pagine, che
   risale alla palette precedente: rinominarla renderebbe muti i contenuti già
   salvati dal pannello. Il colore è l'azzurro. */
.etichetta--salvia { color: var(--azzurro-scuro); }

/* Variante per gli occhielli che sono frasi compiute e non etichette:
   la spaziatura larga del mono renderebbe faticosa la lettura. */
.etichetta--frase {
    font-family: var(--font-testo);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.lead {
    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
    font-weight: 500;
    line-height: 1.5;
}

.attenuato { color: var(--inchiostro-attenuato); }

/* --- Impaginazione ------------------------------------------------------ */

.contenitore {
    max-width: var(--larghezza-massima);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 40px);
}

/* Limite di misura: oltre le ~62 battute per riga l'occhio perde il capo. */
.misura { max-width: var(--larghezza-lettura); }

.sezione { padding-block: var(--spazio-sezione); }
.sezione--velo { background: var(--velo); }
.sezione--carta-alternata { background: var(--carta-alternata); }

/* Due sole griglie in tutto il sito.
   .duo               due colonne di peso comparabile (testo e figura)
   .duo--titolo-a-lato  colonna stretta per il titolo, colonna larga per il corpo */
.duo {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.duo--titolo-a-lato {
    grid-template-columns: minmax(0, 320px) 1fr;
    align-items: start;
}

@media (max-width: 860px) {
    .duo { grid-template-columns: 1fr; }
}

/* Nelle righe invertite la figura passa a sinistra soltanto in visuale: nel
   documento resta sempre dopo il testo, così l'ordine di lettura e quello
   annunciato dagli screen reader non cambiano da una riga all'altra e il
   template non deve inserire la figura in due punti diversi. */
@media (min-width: 861px) {
    .duo--invertito > .figura { order: -1; }
}

/* --- Salto al contenuto ------------------------------------------------- */

.salta-al-contenuto {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 100;
    padding: 12px 20px;
    background: var(--carta);
    color: var(--inchiostro);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--raggio-piccolo);
    transition: top var(--transizione);
}

.salta-al-contenuto:focus { top: 12px; }

/* --- Ritmo interno alle sezioni ----------------------------------------- */
/* Tre soli agganci: la distanza tra occhiello, titolo, corpo e chiamata
   all'azione è così la stessa in tutto il sito, invece di finire scritta a
   mano dentro ogni template. */

.sezione__introduzione { margin-top: 20px; }
.sezione__coda { margin-top: var(--spazio-blocco); }
.sezione__etichetta-blocco { margin-block: var(--spazio-blocco); }

/* La fotografia dell'hero riempie il proprio contenitore senza deformarsi.
   Selettore di elemento invece di una classe nuova: le regole sarebbero
   identiche a quelle di .figura__immagine e duplicarle non aggiunge nulla. */
.hero__sfondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}