/* =============================================================================
   Modulo: la linea del tempo su un arco.

   Nodo di design 842:2490, pagina About.

   Le tappe stanno su un cerchio di **raggio 2000** centrato sull'asse della pagina,
   con la cima a 177 dal bordo alto del frame: su 1512 di larghezza se ne vede solo
   la cima, che scende di 148 ai lati — è la sagitta,
   `2000 − sqrt(2000² − 756²)`, verificata sul render.

   Il passo è **15°**, misurato: i punti del 2001 e del 2007 cadono a ∓516
   dall'asse, e `asin(516/2000)` dà 14,96° e 15,2°. Non è `360° / numero di tappe`:
   la timeline è **aperta**, non un giro che si chiude, e con venti tappe copre 285°.

   In verticale sono **tre righe alte quanto il loro contenuto** — testata, palco,
   comandi — e le distanze sono quelle del design: 93 dalla cima del palco all'arco,
   215 dall'arco al testo, 141 dal testo ai comandi. Insieme fanno i 949 del design
   su un frame da 982, e la sezione è alta almeno una schermata: quel che avanza si
   divide fra sopra e sotto. ⚠ **Il palco non è più `1fr` di una schermata**: lo era
   fino al 23 settembre, e tutto ciò che il testo non riempiva diventava un vuoto fra
   il testo e i comandi. Vedi `--panel-gap`.

   ⚠ **`prefers-reduced-motion` non spegne la ruota**, come in `steps-wheel`: qui il
   movimento non è il modulo, è il modo in cui cambia. Con la preferenza attiva il
   giro è istantaneo, perché il blocco di base.css mette `transition-duration` a
   0,01ms su tutto.
   ========================================================================== */

/* Il giro: **un solo numero**, l'indice della tappa in evidenza, scritto dal JS
   sulla sezione. Registrarlo come `<number>` è ciò che lo rende interpolabile:
   senza `@property` una custom property è una stringa, e una stringa non si anima.

   ⚠ **Il passo di 15° sta solo qui.** L'angolo di ogni voce è
   `(--i − --active) × --wheel-step`, quindi il JavaScript non ha bisogno di sapere
   quanto vale un passo: scrive l'indice e basta. È il rimedio che CLAUDE.md
   racconta per `--lead-steps` di `case-carousel` — un numero condiviso fra CSS e JS
   diverge al primo ritocco, e lo fa in silenzio.

   ⚠ La registrazione è **globale al documento**, non di questo file. Il nome è di
   questa ruota; un secondo modulo che ne voglia una ne prenda uno suo. */
@property --active {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.milestones-wheel {
    --active: 0;
    --wheel-step: 15deg;

    /* Il raggio: 2000 su un frame largo 1512, cioè il 132,28% della larghezza — e
       tagliato al valore del design sopra i 1512, come tutto il tema. Le voci
       finiscono quindi a ±34% della larghezza, che è dove stanno nel design. */
    --wheel-r: min(132.28vw, 125rem);

    /* La cima dell'arco, dalla cima del palco. Nel design la sezione è alta una
       schermata: la testata occupa gli 84 in cima e l'arco comincia a 177 dal bordo
       della sezione, quindi a 93 dal palco.

       ⚠ **È una lunghezza, e fino al 23 settembre era il 10,94% del palco.** La
       percentuale valeva finché il palco era `1fr` di una schermata; adesso il palco
       si dimensiona sul proprio contenuto (vedi più sotto), quindi una percentuale
       sarebbe l'altezza che dipende da sé stessa — e nel `padding` della lista si
       misurerebbe per giunta sulla larghezza. */
    --wheel-top: 5.8125rem;       /* 93 su 16 */

    /* Quanto sta il blocco di testo sotto la cima dell'arco: nel design il testo è a
       392 dal bordo della sezione e l'arco a 177, quindi 215. */
    --panel-offset: 13.4375rem;   /* 215 su 16 */

    /* E quanto sta sopra i comandi: nel design il fondo del testo è a 760 e la
       pastiglia comincia a 901.

       ⚠ **Vale esatto sulla tappa più lunga, ed è il caso del design.** I testi
       sono lunghi diversamente — fra i nove di questa pagina vanno da 228 a 368 —
       e la differenza va da qualche parte: il blocco è alto quanto il testo più
       lungo e ogni testo ci sta **centrato** (vedi `__item`), quindi su una tappa
       corta se ne aggiunge metà qui e metà sopra, fra l'arco e il testo. Fino al 23
       settembre erano appesi all'arco e la differenza cadeva **tutta** qui: 74 sulla
       più lunga e 214 sulla più corta, dove il design ne vuole 141. */
    --panel-gap: 8.8125rem;       /* 141 su 16 */

    /* Lo stacco del design, 160 per lato, come margine: vedi `--space-module` in
       base.css. Qui il margine è anche l'unico modo di scriverlo, perché nel
       layout della ruota la sezione è alta una schermata e un padding se la
       mangerebbe da dentro — vedi il blocco più sotto, dove infatti lo azzerava. */
    margin-block: var(--space-module);
}

.milestones-wheel__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-2xl);
}

/* La testata, larga 960 e centrata come quella dei premi e delle persone. */
.milestones-wheel__header {
    display: grid;
    justify-items: center;
    gap: var(--space-s);
    width: 100%;
    max-width: 60rem;
    text-align: center;
}

/* ⚠ Niente `margin` qui: lo possiede `.display-gradient` (base.css), che ci mette
   un negativo per compensare il proprio padding. */
.milestones-wheel__heading {
    font-size: var(--text-title);
    line-height: var(--leading-solid);
    font-weight: var(--weight-black);
    text-transform: uppercase;
}

/* La riga sotto il titolo è `.section-subheading` di base.css. */

/* -----------------------------------------------------------------------------
   Layout di base: una lista numerata, con tutti i testi visibili.

   È quel che si vede senza JavaScript e sotto la soglia. Non è un ripiego: venti
   tappe su un arco largo tre schermi non stanno da nessuna parte, e una storia
   letta in sequenza è una storia.
   -------------------------------------------------------------------------- */

.milestones-wheel__stage {
    width: 100%;
}

.milestones-wheel__ring {
    display: none;
}

.milestones-wheel__list {
    display: grid;
    gap: var(--space-2xl);
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.milestones-wheel__marker {
    display: grid;
    gap: var(--space-3xs);
}

.milestones-wheel__dot {
    display: none;
}

.milestones-wheel__year {
    display: block;
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    font-weight: var(--weight-medium);
}

.milestones-wheel__label {
    display: block;
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
    color: var(--color-text-secondary);
}

.milestones-wheel__panel {
    display: grid;
    gap: var(--space-2xs);
}

/* `h2` del design: 40 su 48 in Medium — il token è `--text-body-xxl`, e non è il
   corpo dell'elemento `<h2>`. Vedi base.css. */
.milestones-wheel__period {
    font-size: var(--text-body-xxl);
    line-height: var(--leading-body-xxl);
    font-weight: var(--weight-medium);
}

/* ⚠ **Questo corpo non è un token, ed è misurato.** Nel file di design il titolo
   centrale non è legato a una variabile: campionando il render del nodo 842:2275 —
   721×168, tre righe con le basi a 56 di distanza — l'inchiostro della prima riga
   misura 628 pixel e quello della terza 471. Sul banco del browser, in Black e
   maiuscolo, quelle due misure cadono a **56px**: a 54 sarebbero 609 e 455, cioè
   venti pixel corti.

   Resta **locale a questo modulo**, come i 15px della motivazione di un premio e i
   32 del nome in `cards-swipe`: il giorno che lo vuole un secondo modulo vero, va
   in base.css con gli altri.

   ⚠ **Sotto i 509px scende con la finestra**, all'11% della larghezza. A 56 la
   parola più lunga delle tappe — «COMPANY» — è larga 356, e su un telefono da 375
   col margine di 24 del design mobile (1 ottobre) la colonna è 327: la pagina
   sbordava di 5. Col margine di 16 di prima ci stava per tre pixel, cioè per caso. */
.milestones-wheel__title {
    font-size: min(3.5rem, 11vw);      /* 56 su 16, e meno su un telefono */
    line-height: 1;         /* 56 su 56 */
    font-weight: var(--weight-black);
    text-transform: uppercase;
}

/* Ogni riga è un blocco, così l'interlinea si applica alla riga e non al paragrafo.
   Le interruzioni arrivano dal campo: sono scelte in redazione. */
.milestones-wheel__line {
    display: block;
}

.milestones-wheel__text {
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
    font-weight: var(--weight-medium);
}

/* I comandi non esistono dove la ruota non esiste: qui le tappe sono tutte
   visibili, e non ci sarebbe niente da far girare. */
.milestones-wheel__controls {
    display: none;
}

/* -----------------------------------------------------------------------------
   La ruota.

   soglia ruota: 1200px. ⚠ **Non è la soglia delle scene**, e non va contata nel suo
   grep: là si tratta di mettere in pin qualcosa, qui non c'è niente in pin. Il conto
   è la larghezza delle etichette, che sono a 24 e 16px e non si rimpiccioliscono con
   l'arco. È la stessa soglia — e la stessa ragione — di `steps-wheel`.

   ⚠ **Dal 15 ottobre la ruota c'è anche sotto i 900px**, col design del telefono
   (nodo 1604:2848): un arco più stretto su cui se ne vedono tre tappe invece di
   una dozzina, quindi le etichette ci stanno. Le misure del telefono sono nel
   blocco dopo questo; qui valgono per tutte e due le larghezze. Resta la lista
   fra 901 e 1199, dove l'arco del desktop non ci sta e quello del telefono
   sarebbe una ruota da telefono su un tablet. La media query è quindi due, e il JS
   ha la stessa coppia in `WHEEL_FROM`.
   -------------------------------------------------------------------------- */

@media (scripting: enabled) and (min-width: 1200px), (scripting: enabled) and (max-width: 900px) {

    /* La sezione è alta **almeno una schermata**, come il frame del design, e il
       blocco ci sta in mezzo centrato. Il padding di sezione esce, altrimenti la
       schermata verrebbe più alta di una schermata.

       ⚠ **La composizione si misura da sé, e l'aria avanzata va ai due capi.** Fino
       al 23 settembre il palco era `1fr` di una schermata: qualunque cosa il
       contenuto non riempisse diventava un buco fra il testo e i comandi. Adesso
       testata, palco e comandi sono tre righe alte quanto il loro contenuto —
       insieme fanno i 949 del design su un frame da 982 — e i 33 che restano si
       dividono fra sopra e sotto, dove non si leggono come un buco.

       L'altro difetto che questo toglie: su una finestra bassa il blocco non entra
       in una schermata, e finché il palco era `1fr` il testo più lungo veniva
       **tagliato** dal suo `overflow: hidden`. Adesso la sezione cresce. */
    .milestones-wheel {
        min-height: 100vh;
        display: grid;
        align-items: center;
    }

    .milestones-wheel__inner {
        gap: 0;
    }

    /* ⚠ **Il palco esce dalla colonna e arriva ai bordi dello schermo.** Nel design
       l'arco attraversa tutto il frame da 1512, non i 1448 della colonna: tenendolo
       dentro si vedono i due capi tagliati a 32 dal bordo, che è l'unica cosa che
       tradisce il ritaglio. I comandi restano nella colonna, perché sono figli in
       flusso del contenitore; il testo sta qui dentro ma è largo 721 e centrato,
       quindi cade dove cadrebbe nella colonna.

       L'arco è largo 4000: senza `overflow` esce dalla pagina e porta con sé una
       barra di scorrimento orizzontale. */
    .milestones-wheel__stage {
        position: relative;
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        overflow: hidden;
    }

    /* L'arco. Un cerchio grande due volte il raggio, col centro sotto il palco:
       se ne vede la sola cima.

       Il filetto è bianco al 20% — campionato sul render rende 57/255 su nero con
       la scala dell'export, cioè circa il 26%, e `--color-border` è il token del
       tema per una linea che separa. */
    .milestones-wheel__ring {
        display: block;
        position: absolute;
        inset-block-start: var(--wheel-top);
        inset-inline-start: 50%;
        width: calc(2 * var(--wheel-r));
        height: calc(2 * var(--wheel-r));
        translate: -50% 0;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        pointer-events: none;
    }

    /* La lista è il **blocco dei testi**, ed è lei a dare un'altezza al palco: tutte
       le voci in una cella sola, quindi è alta quanto il testo più lungo. Il rientro
       in cima è la distanza dell'arco più quella del testo dall'arco.

       ⚠ **Non è più il centro del cerchio**, e fino al 23 settembre lo era: un punto
       senza dimensioni, quindi un palco che non sapeva quanto contenuto avesse
       dentro. Il centro del cerchio adesso è un'ancora del **palco**, e ce l'ha ogni
       segno (vedi `__marker`). */
    .milestones-wheel__list {
        display: grid;
        gap: 0;
        max-width: none;
        margin: 0;
        padding-block-start: calc(var(--wheel-top) + var(--panel-offset));
    }

    /* ⚠ **La voce non ruota: ruota il suo segno.** Le voci stanno tutte nella stessa
       cella — ferme, sovrapposte — e a girare è il solo `__marker`, che è in assoluto
       sul palco.

       Fino al 23 settembre ruotava la voce intera, e il blocco di testo al centro,
       essendole dentro, girava con lei: nel cambio di tappa si vedeva il testo
       ruotare via invece di svanire. Le voci ferme e sovrapposte sono ciò che rende
       il cambio una dissolvenza: **tutti i pannelli cadono nello stesso punto** e a
       distinguerli resta la sola opacità.

       ⚠ **`align-self: center`, e le due alternative sono peggio.** La cella è alta
       quanto il testo più lungo, quindi una tappa corta lascia dell'aria: `start` la
       mette tutta fra il testo e i comandi (era il difetto di partenza), `end` tutta
       fra l'arco e il testo — 355 invece di 215 sulla tappa più corta, che è il
       difetto segnalato dopo. Centrando, una tappa corta ne prende metà per lato e
       la tappa più lunga — quella del design — resta esatta.

       ⚠ **E `pointer-events` è la conseguenza da non dimenticare.** Le voci adesso
       hanno una scatola vera e sono una sopra l'altra: senza spegnerle, l'ultima del
       DOM si prenderebbe i click su tutta l'area del testo — e il gestore di
       `milestones-wheel.js` cerca l'antenato `__item`, quindi un click sul testo
       porterebbe all'ultima tappa. Se li riprendono il segno, che è il bersaglio, e
       il pannello in evidenza. */
    .milestones-wheel__item {
        grid-area: 1 / 1;
        align-self: center;
        pointer-events: none;

        /* Il diametro del punto sta qui e non sul punto, perché lo legge anche il
           segno per centrarsi sulla linea. */
        --dot-size: 0.5rem;
    }

    .milestones-wheel__item.is-active {
        --dot-size: 0.75rem;
    }

    /* Il segno sull'arco. Le due `inset` lo appendono al **centro del cerchio**, che
       sta sull'asse del palco a `--wheel-top` più un raggio dalla sua cima: è il
       palco il suo blocco contenitore, perché voce e lista non sono posizionate.

       ⚠ **È un `transform` e non le property separate**, e l'ordine è tutto. Letto
       dall'ultima alla prima: `translateX(-50%)` porta il centro alto del segno sul
       centro del cerchio, `translateY` lo allontana di un raggio, e `rotate` lo
       gira **attorno all'origine**, che è `0 0` — cioè il centro del cerchio, perché
       lì lo portano le due `inset`. Ne esce la posizione sull'arco **e**
       l'inclinazione sulla tangente, che è quel che il design fa ruotando
       l'etichetta con il punto.

       ⚠ **Mezzo punto in più nello spostamento, e serve.** Senza, è il *bordo alto*
       del segno a cadere sulla circonferenza, quindi il punto pende tutto sotto la
       linea. Nel design è centrato: misurato sul render, il centro del punto attivo
       sta a y=151,5 e la cima dell'arco a y≈152. Il mezzo diametro viene da
       `--dot-size`, quindi la correzione segue da sé il punto grande e quello
       piccolo. */
    .milestones-wheel__marker {
        position: absolute;
        inset-block-start: calc(var(--wheel-top) + var(--wheel-r));
        inset-inline-start: 50%;
        display: grid;
        justify-items: center;
        gap: var(--space-s);
        width: 17.25rem;   /* 276, la larghezza del frame della voce nel design */
        pointer-events: auto;
        text-align: center;
        transform-origin: 0 0;
        transform:
            rotate(calc((var(--i) - var(--active)) * var(--wheel-step)))
            translateY(calc(-1 * var(--wheel-r) - var(--dot-size) / 2))
            translateX(-50%);
        transition: transform var(--duration-slow) var(--ease-out);
    }

    /* Il punto: 12 e bianco pieno quando la tappa è in evidenza, più piccolo e al
       70% quando non lo è. Campionato: (255,255,255) contro (178,178,178). */
    .milestones-wheel__dot {
        display: block;
        width: var(--dot-size);
        height: var(--dot-size);
        border-radius: 50%;
        background-color: var(--color-text-secondary);
        transition: background-color var(--duration-fast) var(--ease-out);
    }

    .milestones-wheel__item.is-active .milestones-wheel__dot {
        background-color: var(--color-scene-text);
    }

    .milestones-wheel__tag {
        display: grid;
        gap: var(--space-3xs);
        color: var(--color-text-secondary);
        transition: color var(--duration-fast) var(--ease-out);
    }

    .milestones-wheel__item.is-active .milestones-wheel__tag {
        color: var(--color-scene-text);
    }

    /* Il testo al centro dello schermo. **Non ruota**: la voce che lo contiene è
       ferma (vedi sopra), quindi tutti i pannelli cadono esattamente nello stesso
       punto e a cambiare tappa si vede una dissolvenza, non una rotazione.

       ⚠ **È in flusso, e fino al 23 settembre era in assoluto.** È questo che dà
       un'altezza al palco: in assoluto il testo non misurava niente, e il palco
       prendeva una schermata a prescindere da quanto ci fosse dentro.

       ⚠ **`opacity: 0` e non `display: none`**: i testi restano nel DOM e uno
       screen reader li attraversa tutti in ordine, che è la stessa scelta di
       `steps-wheel`. `pointer-events` perché un elemento invisibile resta
       cliccabile, e qui sono tutti sovrapposti.

       Il pannello che entra aspetta il tempo di quello che esce: senza il ritardo i
       due si sovrappongono a mezza opacità e per un terzo di secondo si leggono due
       testi uno sull'altro. */
    .milestones-wheel__panel {
        width: 45.0625rem;  /* 721, la larghezza del blocco nel design */
        margin-inline: auto;
        gap: 0;
        opacity: 0;
        pointer-events: none;
        text-align: center;
        transition: opacity var(--duration-base) var(--ease-out);
    }

    .milestones-wheel__item.is-active .milestones-wheel__panel {
        opacity: 1;
        pointer-events: auto;
        transition-delay: var(--duration-base);
    }

    /* Gli stacchi del blocco centrale, dal design: 10 fra l'anno e il titolo, 30
       fra il titolo e il paragrafo. ⚠ Non sono passi della scala. */
    .milestones-wheel__title {
        margin-block-start: 0.625rem;
    }

    .milestones-wheel__text {
        margin-block-start: 1.875rem;
    }

    /* I comandi, sotto il palco e centrati: due pulsanti tondi da 32 e in mezzo il
       righello. Lo stacco dal testo è quello del design, e adesso è lo stesso per
       tutte le tappe — vedi `--panel-gap`. */
    .milestones-wheel__controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-s);
        margin-block-start: var(--panel-gap);
    }

    .milestones-wheel__nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background-color: transparent;
        color: var(--color-scene-text);
        cursor: pointer;
        transition:
            background-color var(--duration-fast) var(--ease-out),
            opacity var(--duration-fast) var(--ease-out);

        &:hover:not(:disabled) {
            background-color: rgb(255 255 255 / 0.12);
        }

        /* Timeline aperta: la prima tappa spegne l'indietro, l'ultima l'avanti. */
        &:disabled {
            opacity: 0.3;
            cursor: default;
        }

        & svg {
            width: 1rem;
            height: 1rem;
        }
    }

    /* `chevron-right.svg` copre entrambi i versi: la freccia indietro è la stessa
       icona specchiata, come nel pager dei progetti. */
    .milestones-wheel__nav--prev svg {
        scale: -1 1;
    }

    /* Il righello: una tacca per tappa a 16 di distanza, e sopra la pastiglia con
       l'anno in evidenza.

       ⚠ **Le tacche non sono bersagli**, e il perché sta nel PHP: sono filetti da
       un pixel, e farne dei pulsanti vorrebbe dire venti bersagli che col dito non
       si prendono. Il righello dice dove si è. */
    .milestones-wheel__ruler {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.9375rem;   /* 16 di passo meno il filetto da 1 */

        /* L'ingombro è quello della **pastiglia**, che nel design è più alta delle
           tacche e dei due pulsanti: è lei il bordo alto della riga dei comandi, ed è
           da lì che si misurano i 141 dal testo. */
        height: 3rem;
    }

    .milestones-wheel__tick {
        width: 1px;
        height: 2rem;   /* 32: le tacche del design, centrate sulla pastiglia */
        background-color: var(--color-border);
    }

    /* La pastiglia scorre sul righello: `--active` diviso per il numero di intervalli
       dà la frazione, e la divisione per una custom property è una delle tre funzioni
       recenti su cui questo modulo si appoggia — insieme a `@property` e alla
       trigonometria di `steps-wheel`.

       Il `max(1, …)` è la guardia per una tappa sola, che darebbe una divisione per
       zero.

       ⚠ **La corsa è rientrata di mezza pastiglia per lato, e serve.** La pastiglia
       è centrata sul proprio punto: mandandola allo 0% netto ne resta metà fuori dal
       righello, sopra la freccia indietro — che alla prima tappa è per giunta
       spenta, quindi sembra rotta. Rientrando di `--pill-w / 2` gli estremi della
       corsa sono i due bordi della pastiglia invece che il suo centro, ed è dove
       stanno nel design. */
    .milestones-wheel__pill {
        --pill-w: 4.5625rem;   /* 73, la pastiglia del design */
        --pill-bg: color-mix(in srgb, var(--color-page-bg) 34%, #000);

        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: calc(
            var(--pill-w) / 2
            + var(--active) / max(1, var(--step-count) - 1) * (100% - var(--pill-w))
        );
        translate: -50% -50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--pill-w);
        padding: 0 var(--space-s);

        /* 48, non 32: nel design è 73×48 col testo da 16/24 e 12 di padding —
           campionata sul render, il filetto sta a y=901 e a y=948. */
        height: 3rem;

        /* Il filetto **non è pieno**: è acceso ai due capi opposti e si spegne in
           mezzo, come i riquadri di `.stat-box`. Campionata l'opacità lungo il
           perimetro del render (nodo 842:2306): 73% all'estremo alto-sinistra, 94%
           al basso-destra, 12% agli altri due angoli. Il codice che Figma
           restituisce per quel nodo dice `border: 1px solid white`, e come per i
           riquadri **non è vero**: un tratto sfumato non arriva in quel formato.

           ⚠ **I due capi accesi restano più spenti del design, come in `.stat-box`,
           e per la stessa ragione**: là sono due tratti vettoriali con la propria
           rampa, qui è una sfumatura sola, che il bianco pieno lo raggiunge solo
           negli angoli della scatola — e una pastiglia quegli angoli li arrotonda
           via. Misurato sui due render: 186 e 239 nel design, 158 e 160 qui; gli
           angoli spenti 31 contro 38. Riprodurlo vorrebbe dire due pseudo-elementi
           con due maschere, per una differenza di mezzo pixel di filetto.

           ⚠ **Qui è `background-clip`, non la maschera di `.stat-box`.** Là il
           riempimento è un velo traslucido, quindi la sfumatura trasparirebbe da
           tutta la scatola e va ritagliata ad anello con due maschere; qui il
           riempimento è **opaco**, perché deve coprire le tacche del righello — e
           nel design le copre: dentro la pastiglia la luminanza è piatta a 11,6
           anche nelle colonne dove passa una tacca, che fuori misura 76. Con un
           fondo opaco bastano due livelli, uno ritagliato al border box e uno al
           padding box, e non serve nessun `@supports`.

           Il fondo è il colore della pagina al 34% su nero — la stessa quantità di
           `--color-scene-bg` e di `--header-bg`: sul fondo di default dà (2,18,31)
           contro gli (12,11,17) misurati nel design, che è la stessa famiglia, e
           segue il colore che l'editor sceglie per la pagina. ⚠ **Non è nessuno dei
           due token**, perché il ruolo è un terzo — quello è il fondo dietro un
           media, quell'altro la barra del menu — e uno dei tre può spostarsi senza
           trascinare gli altri. */
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        background:
            linear-gradient(var(--pill-bg) 0 0) padding-box,
            linear-gradient(
                135deg,
                var(--color-scene-text),
                transparent 40%,
                transparent 60%,
                var(--color-scene-text)
            ) border-box;
        font-size: var(--text-body-s);
        line-height: 1;
        letter-spacing: var(--tracking-body-s);
        font-weight: var(--weight-medium);
        white-space: nowrap;
        transition: inset-inline-start var(--duration-slow) var(--ease-out);
    }

    /* L'anno di una tappa diventa un pulsante quando il JS accende la ruota: è lui
       il bersaglio, non la tacca del righello. Il pulsante lo crea il JavaScript,
       quindi questa regola vale su quel che lui ha costruito — e sotto la soglia,
       dove il pulsante non esiste, non ha niente da stilare. */
    .milestones-wheel__button {
        display: grid;
        gap: var(--space-3xs);
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: inherit;
        cursor: pointer;
    }
}

/* -----------------------------------------------------------------------------
   Telefono: la ruota stretta.

   Dal 15 ottobre c'è il design (nodo 1604:2848). È la stessa ruota del desktop, con
   le misure di un frame da 440:

   - l'arco ha **raggio 437**, quasi la larghezza dello schermo, e il passo è
     **30°**: della tappa prima e di quella dopo si vede il punto sul bordo e mezzo
     anno inclinato, come nel design (−30,75° e +30,11° sui due nodi). Il raggio è in
     `vw`, perché l'arco deve finire ai bordi di qualunque telefono;
   - sull'arco c'è il solo anno, 24 su 40: la riga sotto, nel design, è trasparente;
   - al centro l'anno per esteso a 20 su 32 col riempimento sfumato delle headline,
     il titolo a 28 su 32, il paragrafo a 16 su 22, con 10 e 16 di stacco;
   - sotto, **le due frecce da 48** con 16 in mezzo, e niente righello: venti tacche
     a 16 di passo non stanno in 392.

   La distanza fra l'arco e il testo è i 215 del desktop, che il design ripete
   uguale. Fra il testo e le frecce invece il frame ha 240, perché le frecce stanno
   in fondo allo schermo: qui sono 48 sotto il testo più lungo, e la sezione è alta
   almeno una schermata come sul desktop.

   **Si gira anche col dito**: una strisciata orizzontale sul palco passa alla tappa
   dopo o a quella prima. `touch-action: pan-y` lascia al browser lo scroll
   verticale, quindi una strisciata in giù resta uno scroll della pagina. */
@media (scripting: enabled) and (max-width: 900px) {

    .milestones-wheel {
        --wheel-step: 30deg;
        --wheel-r: calc(100vw * 437 / 440);
        --wheel-top: var(--space-xl);
        --panel-gap: var(--space-xl);
    }

    .milestones-wheel__stage {
        touch-action: pan-y;
    }

    .milestones-wheel__item {
        --dot-size: 0.75rem;
    }

    .milestones-wheel__label {
        display: none;
    }

    /* 24 fissi e non `--text-body-l`, che a questa larghezza scende a 20. */
    .milestones-wheel__year {
        font-size: 1.5rem;
        line-height: calc(40 / 24);
    }

    .milestones-wheel__panel {
        width: calc(100% - 2 * var(--gutter));
    }

    /* Il riempimento è quello di `.display-gradient`, ma senza lo sbordo: l'anno
       non ha accenti sopra le maiuscole, e lo sbordo è un padding che sposterebbe
       le fermate. Vedi `.stat-box__value` in base.css, che fa la stessa scelta. */
    .milestones-wheel__period {
        font-size: var(--text-title-s);
        line-height: 1.6;
        background-image: var(--fill-display);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .milestones-wheel__title {
        font-size: 1.75rem;
        line-height: calc(32 / 28);
    }

    .milestones-wheel__text {
        margin-block-start: var(--space-s);
        font-size: var(--text-body-s);
        line-height: var(--leading-body-s-snug);
    }

    .milestones-wheel__ruler {
        display: none;
    }

    .milestones-wheel__nav {
        width: 3rem;
        height: 3rem;
        border-color: rgb(255 255 255 / 0.3);
    }
}

/* -----------------------------------------------------------------------------
   Telefono senza JavaScript: le tappe si sfogliano col dito.

   Senza script la ruota non gira, e sotto i 1200px il modulo è la lista di tutte
   le tappe: su un telefono quella lista è alta quattro schermate e mezza: nove titoli da tre o quattro righe. Da telefono la lista diventa quindi la
   fila che il design mobile usa per il carosello dei case study (nodo 860:2881):
   una tappa per volta, la successiva che si affaccia a destra, aggancio al margine
   di pagina. Era il layout del telefono fino al 15 ottobre, coi pallini sotto, e
   adesso è il ripiego senza JavaScript — quindi i pallini, che li crea il JS, non
   ci sono più. È anche quel che fa la ruota — una tappa in
   evidenza, le altre a lato — senza niente da far girare.

   I corpi scendono come nel resto del telefono: il titolo ai 32 su 32 dei titoli di
   sezione, l'anno per esteso allo stile `h3` (28 su 40), il paragrafo a `body-xs`.
   L'anno della tappa e la sua riga diventano un occhiello in `label-sm`, perché
   stanno a una riga dall'anno per esteso e lo ripeterebbero allo stesso corpo.

   Fra 901 e 1199 resta la lista, che lì ha la colonna da 960 e si legge bene. */
@media (max-width: 900px) and (scripting: none) {
    /* `minmax(0, 1fr)`: la colonna implicita è `auto`, cioè larga quanto la fila
       intera, e la pagina scorreva per 3408px invece della fila. */
    .milestones-wheel__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-l);
    }

    /* Da bordo a bordo, come le altre file: il rientro lo rimette il padding. */
    .milestones-wheel__stage {
        width: auto;
        justify-self: stretch;
        margin-inline: calc(-1 * var(--gutter));
    }

    .milestones-wheel__list {
        display: flex;
        align-items: start;
        gap: var(--space-m);
        max-width: none;
        padding-inline: var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .milestones-wheel__item {
        display: grid;
        gap: var(--space-s);
        flex: 0 0 auto;
        width: min(22rem, 100vw - 2 * var(--gutter) - 2.5rem);
        scroll-snap-align: start;
    }

    .milestones-wheel__tag {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--space-2xs);
    }

    .milestones-wheel__year,
    .milestones-wheel__label {
        font-size: var(--text-label);
        line-height: var(--leading-label);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
    }

    .milestones-wheel__period {
        font-size: var(--text-body-xl);
        line-height: var(--leading-body-xl);
    }

    .milestones-wheel__title {
        font-size: var(--text-display);
        line-height: var(--leading-display);
    }

    .milestones-wheel__text {
        font-size: var(--text-body-s);
        line-height: var(--leading-body-s);
    }
}