/*
 * Il foglio di stile del sito.
 *
 * I colori, le spaziature e i raggi sono gli stessi dell'app — stanno in
 * `src/theme.ts` e sono ricopiati qui come variabili CSS. Ricopiati e non
 * importati perché il sito è HTML statico servito da Cloudflare Pages: non
 * c'è un passo di build che possa leggere un file TypeScript, e un passo di
 * build in più, per nove colori che cambiano una volta all'anno, costa più
 * di quanto risparmi. Se la palette dell'app cambia, cambia anche qui.
 */

:root {
    color-scheme: light dark;

    --sfondo: #FAFAF9;
    --carta: #FFFFFF;
    --testo: #131316;
    --tenue: #606067;
    --bordo: rgba(0, 0, 0, 0.09);
    --chip: rgba(0, 0, 0, 0.045);
    --ombra: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.04);

    /* Scala a passo 4, come `space` nell'app. */
    --s-xs: 4px;
    --s-sm: 8px;
    --s-md: 12px;
    --s-lg: 16px;
    --s-xl: 24px;
    --s-xxl: 32px;

    /* Due raggi soli più la pillola: più varietà si legge come disordine. */
    --r-sm: 10px;
    --r-md: 14px;
    --r-pill: 999px;

    --colonna: 1040px;
    --lettura: 640px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sfondo: #0A0A0B;
        --carta: #141416;
        --testo: #FAFAFA;
        --tenue: #8B8B92;
        --bordo: rgba(255, 255, 255, 0.08);
        --chip: rgba(255, 255, 255, 0.055);
        /* Un'ombra nera su fondo nero non disegna niente: sul tema scuro le
           superfici si staccano col bordo, come nell'app. */
        --ombra: none;
    }
}

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

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

body {
    margin: 0;
    padding: 0;
    background: var(--sfondo);
    color: var(--testo);
    font: 400 17px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/*
 * Un collegamento dentro un testo si deve vedere.
 *
 * La sottolineatura era del colore dei bordi — quasi niente — e in un
 * paragrafo l'indirizzo a cui scrivere sembrava una parola come le altre.
 * Qui è l'inchiostro stesso smorzato: si legge come un collegamento senza
 * diventare la cosa più scura della riga. Dove un collegamento non è testo
 * ma un comando — la barra in cima, il piede, i bottoni — la sottolineatura
 * resta tolta, e a dire che si può toccare è la forma.
 */
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

/*
 * Il contorno di chi naviga da tastiera.
 *
 * Quello di sistema è azzurro, e su un'interfaccia senza colore stona; ma
 * soprattutto sul pieno dell'azione principale — un bottone nero su fondo
 * chiaro — si perde. Qui è l'inchiostro stesso, staccato dal bordo, che si
 * vede sopra qualunque superficie del sito.
 */
:focus-visible {
    outline: 2px solid var(--testo);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

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

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6vw, 3.1rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; }

.colonna {
    width: 100%;
    max-width: var(--colonna);
    margin-inline: auto;
    padding-inline: var(--s-xl);
}

.lettura { max-width: var(--lettura); }

.tenue { color: var(--tenue); }

/* L'occhiello: maiuscoletto spaziato, sempre tenue. Come `type.eyebrow`. */
.occhiello {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tenue);
}

/* ------------------------------------------------------------------ *
 * Intestazione
 * ------------------------------------------------------------------ */

.testata {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--sfondo) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--bordo);
}

.testata .colonna {
    display: flex;
    align-items: center;
    gap: var(--s-lg);
    height: 60px;
}

.marchio {
    display: inline-flex;
    align-items: center;
    gap: var(--s-sm);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.marchio img { width: 26px; height: 26px; border-radius: 7px; }

.testata nav {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--s-lg);
    font-size: 0.92rem;
}

.testata nav a { text-decoration: none; color: var(--tenue); }
.testata nav a:hover { color: var(--testo); }

.lingua {
    border: 1px solid var(--bordo);
    border-radius: var(--r-pill);
    padding: 3px 11px;
    font-size: 0.82rem;
    font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * Apertura
 * ------------------------------------------------------------------ */

/*
 * Sotto l'apertura c'è più aria di quanta ne servisse prima.
 * Lì stavano due bottoni, e la loro altezza faceva da stacco fra il titolo e
 * la striscia delle schermate: tolti quelli, senza questo respiro il testo
 * grande e le immagini si toccano.
 */
.apertura { padding: clamp(56px, 11vw, 112px) 0 clamp(32px, 5vw, 56px); }

.apertura p.sommario {
    margin-top: var(--s-lg);
    font-size: clamp(1.05rem, 2.2vw, 1.22rem);
    color: var(--tenue);
    max-width: 34em;
}

.azioni {
    margin-top: var(--s-xl);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-md);
}

/* Il pieno dell'azione principale è l'inchiostro stesso: l'unico colore che
   l'app si concede è quello che significa qualcosa. */
.bottone {
    display: inline-flex;
    align-items: center;
    gap: var(--s-sm);
    padding: 12px 22px;
    border-radius: var(--r-pill);
    background: var(--testo);
    color: var(--sfondo);
    font-size: 0.97rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--testo);
}

.bottone:hover { opacity: 0.88; }

.bottone.vuoto {
    background: transparent;
    color: var(--testo);
    border-color: var(--bordo);
}

.bottone.vuoto:hover { border-color: var(--testo); opacity: 1; }

/* ------------------------------------------------------------------ *
 * Schermate
 * ------------------------------------------------------------------ */

.schermate {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 232px;
    gap: var(--s-lg);
    overflow-x: auto;
    padding: var(--s-sm) var(--s-xl) var(--s-xxl);
    scroll-snap-type: x mandatory;
    /* Senza questo lo scatto mangia il margine e la prima schermata finisce
       appiccicata al bordo. */
    scroll-padding-inline-start: var(--s-xl);
    scrollbar-width: none;
    /* La striscia esce dalla colonna e arriva ai bordi: su un telefono si
       scorre col pollice, e una schermata tagliata a metà dice che ce ne
       sono altre. */
    max-width: none;
}

.schermate::-webkit-scrollbar { display: none; }

.schermate figure { margin: 0; scroll-snap-align: start; }

.schermate img {
    width: 100%;
    border-radius: var(--r-md);
    border: 1px solid var(--bordo);
    background: var(--carta);
}

.schermate figcaption {
    margin-top: var(--s-md);
    font-size: 0.85rem;
    color: var(--tenue);
    line-height: 1.4;
}

/*
 * La prima schermata sta sull'incolonnamento del testo, non al centro.
 *
 * `justify-content: center` sembrava la cosa giusta e invece rompe: quando il
 * contenuto è più largo del contenitore, centrarlo spinge l'inizio fuori
 * dall'area scorribile, e le prime due schermate diventano irraggiungibili —
 * con `scrollLeft` fermo a zero, cioè senza nemmeno il sintomo evidente.
 */
@media (min-width: 1088px) {
    .schermate {
        padding-inline-start: calc((100vw - var(--colonna)) / 2 + var(--s-xl));
        scroll-padding-inline-start: calc((100vw - var(--colonna)) / 2 + var(--s-xl));
    }
}

/* ------------------------------------------------------------------ *
 * Numeri
 * ------------------------------------------------------------------ */

.numeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s-lg);
    padding: var(--s-xl) 0;
    border-block: 1px solid var(--bordo);
}

.numeri div strong {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.numeri div span { font-size: 0.87rem; color: var(--tenue); }

/* ------------------------------------------------------------------ *
 * Sezioni
 * ------------------------------------------------------------------ */

section { padding-block: clamp(48px, 8vw, 88px); }

section > .colonna > h2 + p { margin-top: var(--s-md); color: var(--tenue); }

/*
 * Due colonne, non quante ce ne stanno.
 *
 * Con `auto-fit` nella colonna da 1040 punti ce ne entravano tre, e ogni
 * sezione ne ha quattro: tre in fila e una da sola sotto, che si legge come
 * una dimenticanza. Due per riga fanno un quadrato, e i riquadri più larghi
 * respirano invece di spezzare ogni frase su tre righe.
 */
.griglia {
    margin-top: var(--s-xxl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-lg);
}

@media (min-width: 720px) {
    .griglia { grid-template-columns: repeat(2, 1fr); }
}

.riquadro {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--r-md);
    padding: var(--s-xl);
    box-shadow: var(--ombra);
}

.riquadro h3 + p { margin-top: var(--s-sm); color: var(--tenue); font-size: 0.95rem; }

/* ------------------------------------------------------------------ *
 * Pagine di testo: informativa e supporto
 * ------------------------------------------------------------------ */

.testo { padding-block: var(--s-xxl) clamp(64px, 10vw, 96px); }
.testo .colonna { max-width: calc(var(--lettura) + var(--s-xl) * 2); }
.testo h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); }
.testo h2 { font-size: 1.2rem; margin-top: var(--s-xxl); }
.testo p { margin-top: var(--s-lg); }
.testo ul { margin: var(--s-md) 0 0; padding-inline-start: 1.15em; }
.testo li { margin-top: var(--s-xs); color: var(--tenue); }
.testo .aggiornato { margin-top: var(--s-sm); font-size: 0.87rem; color: var(--tenue); }

/* ------------------------------------------------------------------ *
 * Chiusura
 * ------------------------------------------------------------------ */

footer {
    border-top: 1px solid var(--bordo);
    padding-block: var(--s-xxl);
    font-size: 0.89rem;
    color: var(--tenue);
}

footer .colonna {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-md) var(--s-xl);
    align-items: center;
}

footer nav { display: flex; flex-wrap: wrap; gap: var(--s-lg); margin-inline-start: auto; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .colonna { padding-inline: var(--s-lg); }
    .schermate { padding-inline: var(--s-lg); scroll-padding-inline-start: var(--s-lg); }
    .testata nav a.voce { display: none; }
    footer nav { margin-inline-start: 0; }
}