/* =========================================================================
   ATELIER MOSAIKO — pagina del percorso di formazione
   Template: page-atelier-mosaiko.php   ·   Script: assets/js/atelier-mosaiko.js

   I componenti condivisi con MOSAIKO — card e ritratto, manifesto, video,
   video testimonianze, chi sono, per chi è / non è, i differenziali, la
   lettera, il numero grande, le domande frequenti — sono nati da
   assets/css/mosaiko.css, con i selettori riscritti da .mosaiko a .atelier.
   È una copia, non un riuso: le due pagine restano indipendenti e possono
   divergere, ma una correzione a un componente condiviso va fatta in tutti e
   due i file. Di MOSAIKO non è stato copiato ciò che questa pagina non usa
   (citazione d'apertura, caroselli a scorrimento, il percorso a quattro
   tappe): se un giorno servisse, sta ancora là.

   L'ordine è quello del file di partenza: prima i componenti ereditati, poi —
   dalla 12 in fondo — quelli che esistono soltanto qui.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fondamenta comuni
   ---------------------------------------------------------------------- */

.atelier {
    /* palette condivisa da tutte le sezioni */
    --mo-ink:        #110E10;
    --mo-card:       #1B1519;
    --mo-ivory:      #F2EEE8;
    --mo-stone:      #A79B93;

    /* ---- i tre colori dell'accento ----
       Erano quelli di MOSAIKO — terracotta e rame — perché questo foglio è
       nato copiando quello. Ma MOSAIKO è il servizio fotografico e questa è la
       formazione: due cose diverse non possono avere lo stesso colore, o il
       sito racconta che sono la stessa. Qui il rosso è più freddo e più
       profondo: anguria sull'accento, borgogna nei fondi.

       C'è del nero dentro tutti e tre, ed è quello che li rende profondi
       invece che squillanti: l'anguria è cupa, il borgogna è quasi notte, e
       perfino il fondo della pagina e delle card ha ora un soffio di vinaccia
       dentro il nero. Un rosso acceso su un fondo neutro grida; lo stesso
       rosso spento dentro un nero che gli somiglia diventa una cosa sola con
       la pagina.

       Gli anguria sono due, e la divisione è la ragione per cui la pagina può
       essere profonda senza diventare illeggibile.

       Il primo è quello che si legge: ci sono scritte le parole dei bottoni,
       le etichette, il nome del percorso dentro i testi. Non può scendere
       sotto 4,5 volte il fondo — è quante volte un testo piccolo deve staccare
       per restare leggibile su uno schermo poco luminoso o alla luce del sole
       — e a 4,48 è già appoggiato a quel limite.

       Il secondo è quello che si guarda: le grandi campiture di colore, i
       gradienti, gli avatar, il fondo del video. Lì sopra non c'è nessuna
       parola da leggere, quindi il limite non vale, e infatti è molto più
       cupo — 2,4. Ed è lui a dare il tono a tutta la pagina, perché di
       colore ne copre cento volte tanto.

       È il motivo per cui la pagina è più profonda di prima mentre i testi
       sono rimasti esattamente dov'erano.

       I nomi restano quelli di MOSAIKO (--mo-) perché li usano oltre cento
       righe di questo file: rinominarli non cambierebbe una virgola di quello
       che si vede, e moltiplicherebbe le occasioni di rompere qualcosa. */
    --mo-shirt:      #C75468;   /* anguria — solo dove è testo o segno da vedere */
    --mo-shirt-cupo: #8F2E44;   /* anguria cupa — le superfici di colore, dove testo non ce n'è */
    --mo-terracotta: #3B0F1A;   /* borgogna di fondo — quasi notte */
    --mo-copper:     #B84E66;   /* anguria smorzata — bordi al passaggio del mouse, luci */

    /* Gli stessi tre, scritti come numeri sciolti.
       Servono dove il colore va usato trasparente: rgba() vuole i tre numeri,
       non un colore già fatto, e senza questa forma le decine di velature e
       aloni della pagina resterebbero scritte a mano — cioè fuori dal
       controllo di queste righe, che è esattamente il problema che si sta
       risolvendo. */
    --mo-shirt-rgb:      199, 84, 104;
    --mo-shirt-cupo-rgb: 143, 46, 68;
    --mo-terracotta-rgb: 59, 15, 26;
    --mo-copper-rgb:     184, 78, 102;

    /* Il celeste delle locandine delle tre professioniste dei LAB. Non e'
       inventato: e' preso dai file 31/32/33.jpg — la riga col nome della
       professionista e la scritta "LIVE IN ZOOM" sono #487888 in tutte e tre.
       Vive solo dentro la sezione dei LAB: e' il colore di quel blocco, non un
       secondo colore della pagina.

       Due tonalita' come per l'anguria, e per la stessa ragione: quella cupa e'
       il colore esatto della locandina e sta bene sulle superfici, ma su fondo
       nero arriva a 3,9 su 1 e sotto un testo piccolo non basta. Quella chiara
       e' la stessa tinta schiarita quanto serve per leggerla: 5,7 su 1. */
    --mo-celeste:      #5C93A6;   /* celeste — dove e' testo o segno da leggere */
    --mo-celeste-cupo: #44788A;   /* celeste della locandina — superfici e aloni */
    --mo-celeste-rgb:      92, 147, 166;
    --mo-celeste-cupo-rgb: 68, 120, 138;

    background: var(--mo-ink);
}
.atelier, .atelier *, .atelier *::before, .atelier *::after {
    box-sizing: border-box;
}

/* Il tema e Bootstrap vestono gli elementi nudi — h1-h6, p, span, a, ul —
   con colori, dimensioni, pesi e margini loro. Qui vengono spogliati per
   tutta la pagina, così ogni sezione parte da zero.
   :where() non pesa nulla: basta la classe di una sezione per soprascriverlo,
   senza dover ricorrere a !important. */
.atelier :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, span, a, button, video) {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
}
.atelier :where(h1, h2, h3, h4, h5, h6) { line-height: 1.2; }
.atelier :where(a)      { text-decoration: none; }
.atelier :where(ul, ol) { list-style: none; }
.atelier :where(img, video) { max-width: 100%; }

/* Tiene insieme un gruppo di parole che non deve spezzarsi a fine riga.
   Si mette attorno alle parole nel testo del modello: <span class="at-unito">…</span>.
   Da usare con parsimonia e su gruppi corti — su una frase lunga il browser non
   avrebbe più dove andare a capo, e uscirebbe dallo schermo. */
.at-unito { white-space: nowrap; }

/* ---------- bottone CTA (usato da quasi tutte le sezioni) ---------- */
.atelier .mo-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--mo-cta-gap, 48px);
}
.atelier .mo-cta {
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 18px 44px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--mo-shirt) !important;
    text-decoration: none;
    background: transparent;
    border: 1.5px solid var(--mo-shirt);
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    z-index: 0;
    transition: color 0.4s ease, transform 0.35s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.atelier .mo-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--mo-terracotta), var(--mo-shirt-cupo));
    transform: scaleX(0);
    transform-origin: left;
    z-index: -1;
    transition: transform 0.45s ease;
}
.atelier .mo-cta:hover,
.atelier .mo-cta:focus {
    color: var(--mo-ivory) !important;
    border-color: var(--mo-copper);
    transform: scale(1.06);
    box-shadow: 0 10px 30px -8px rgba(var(--mo-shirt-rgb), 0.55);
}
.atelier .mo-cta:hover::before,
.atelier .mo-cta:focus::before {
    transform: scaleX(1);
}
.atelier .mo-cta:active {
    transform: scale(1.02);
}


/* -------------------------------------------------------------------------
   2. Che cos'è ATELIER MOSAIKO — card + ritratto affiancati
   ---------------------------------------------------------------------- */

.atelier-risultati {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.mr-inner {
    max-width: 1160px;
    margin: 0 auto;
}

/* Le due colonne hanno sempre la stessa altezza, e si toccano: fra il testo e
   la fotografia non c'è più lo stacco di 40px che c'era prima. È la prima metà
   di quello che le fa leggere come un blocco solo — la seconda è la sfumatura
   con cui la foto si dissolve verso il testo (vedi .mr-photo-col img). */
.mr-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 0;
}

/* ---------- colonna sinistra: testo, elenco, CTA ----------
   Ha una posizione e un piano suoi perché la fotografia le sale sopra di un
   pezzo: è lì, sul blocco di testo e non sulla foto, che la sfumatura si
   consuma. Il pezzo che si sovrappone (il 4% della riga, una cinquantina di
   pixel) sta tutto dentro il margine interno della card, quindi la foto in
   dissolvenza non passa mai sopra una parola. */
.mr-card {
    position: relative;
    z-index: 1;
    flex: 1 1 58% !important;
    background: linear-gradient(165deg, #1D1917 0%, #17140F 100%);
    padding: 44px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}
.mr-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mr-quote {
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.45;
    font-weight: 300;
    color: var(--mo-stone);
    margin: 0 0 30px 0;
}
.mr-quote strong {
    font-weight: 700;
    color: var(--mo-ivory);
}
.mr-quote .mr-brand {
    font-weight: 900;
    color: var(--mo-shirt);
}

.mr-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}
.mr-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.mr-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid var(--mo-shirt);
    position: relative;
}
.mr-check::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 4px;
    height: 8px;
    border-right: 1.5px solid var(--mo-shirt);
    border-bottom: 1.5px solid var(--mo-shirt);
    transform: translate(-50%, -50%) rotate(45deg);
}
.mr-list-text {
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--mo-stone);
    font-weight: 300;
}
.mr-list-text strong {
    color: var(--mo-ivory);
    font-weight: 700;
}

/* qui la CTA è allineata a sinistra e un filo più compatta */
.atelier-risultati .mo-cta {
    align-self: flex-start;
    font-size: 16px;
    padding: 17px 40px;
}

/* ---------- colonna destra: la fotografia ----------
   Il fondo della colonna è anche lui trasparente a sinistra, e non solo la
   fotografia. È la parte che sembra un dettaglio e invece è tutto: la colonna
   sale sopra la card, quindi un fondo pieno le coprirebbe l'ultimo pezzo e al
   posto della dissolvenza si vedrebbe una fascia scura verticale — una
   giuntura, esattamente ciò che si sta cercando di togliere. Trasparente,
   sotto ricompare la card, e le due cose diventano una sola.
   Da un terzo in poi il fondo è pieno e riprende il colore del blocco di
   testo: è quello che si vede dove la foto è sfumata via del tutto. */
.mr-photo-col {
    /* più larga di prima e tirata sopra la card: così la dissolvenza comincia
       già sul testo e la fotografia arriva pulita molto prima — 58 + 46 - 4 = 100 */
    flex: 1 1 46% !important;
    margin-left: -4%;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(23, 20, 16, 0) 0%,
        rgba(23, 20, 16, .42) 13%,
        rgba(23, 20, 16, .88) 27%,
        #17140F 40%);

    opacity: 0;
    transform: translateY(20px) scale(0.97);
    transition: opacity 1s ease 0.15s, transform 1s ease 0.15s;
}
.mr-photo-col.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* La fotografia riempie la colonna e viene ritagliata per riempirla tutta.
   Prima era trattata come una figura ritagliata: alta quanto la colonna e
   larga quanto veniva, centrata. Con uno scatto orizzontale quel calcolo la
   portava a circa 1070px di larghezza partendo da un file da 1024 — cioè
   ingrandita oltre la sua misura, ed è da lì che veniva la sgranatura. Adesso
   la foto non viene mai ingrandita oltre quello che il file contiene.

   La sfumatura è una maschera, non un velo colorato sopra: è la foto stessa a
   diventare trasparente verso sinistra, quindi sotto ricompare il fondo della
   colonna qualunque colore abbia. Nessun bordo, nessuna riga di stacco — la
   fotografia semplicemente finisce dentro il testo.

   Se il soggetto risultasse tagliato male, il valore da spostare è
   object-position: il primo numero muove il ritaglio a sinistra o a destra. */
.mr-photo-col img {
    position: absolute !important;
    inset: 0;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: 55% 50%;
    filter: sepia(0.12) saturate(1.05) hue-rotate(-6deg) brightness(0.94);
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 0, 0, .34) 9%,
        rgba(0, 0, 0, .84) 23%,
        #000 38%);
            mask-image: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 0, 0, .34) 9%,
        rgba(0, 0, 0, .84) 23%,
        #000 38%);
}

/* La fotografia scorre mentre si legge.
   Non è un'animazione a tempo: è agganciata allo scorrimento della pagina. Il
   fotogramma non dipende da quanti secondi sono passati ma da quanta parte
   della sezione è entrata nello schermo — si ferma se ci si ferma, torna
   indietro se si risale. È il motivo per cui non sembra un effetto: sembra che
   la foto risponda a chi legge.

   Si muove il ritaglio dentro la cornice (object-position), non la fotografia
   dentro la pagina: la colonna resta ferma al suo posto e niente si sposta
   intorno. Il valore scende da 74 a 30 perché il ritaglio che arretra fa
   avanzare l'immagine: è così che la foto scorre da sinistra verso destra.

   Dove il browser non conosce le animazioni legate allo scorrimento, la foto
   resta ferma al suo ritaglio normale e non manca nulla: nessun ripiego, nessun
   JavaScript. E chi ha chiesto meno movimento non lo riceve. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .mr-photo-col img {
            animation: mr-scorri linear both;
            animation-timeline: view();
            animation-range: cover 12% cover 88%;
        }
    }
}
@keyframes mr-scorri {
    from { object-position: 74% 50%; }
    to   { object-position: 30% 50%; }
}

/* Il velo nero sopra la fotografia.
   Parte da zero sul bordo sinistro — lì sotto c'è la card, e velarla
   lascerebbe la stessa fascia scura che si sta evitando — sale al massimo
   dove la fotografia comincia a farsi vedere, e da lì si dirada fino a quasi
   niente. Accompagna la dissolvenza invece di contrastarla, e tiene la foto un
   gradino sotto al testo, che deve restare la cosa che si legge per prima.
   Si spegne presto apposta: più a destra c'è il soggetto, e il nero non deve
   arrivarci sopra.
   Il colore è più scuro del fondo della pagina: un velo dello stesso colore
   appiattirebbe la foto invece di darle profondità. */
.mr-photo-col::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(10, 9, 8, 0) 0%,
        rgba(10, 9, 8, .46) 14%,
        rgba(10, 9, 8, .22) 32%,
        rgba(10, 9, 8, .09) 58%,
        rgba(10, 9, 8, .05) 100%);
}

@media (max-width: 640px) {
    .mr-row { flex-direction: column !important; }
    .mr-card { flex: none !important; padding: 36px 28px; }
    .mr-photo-col { display: none !important; }
}
@media (max-width: 560px) {
    .atelier-risultati { padding: 64px 20px; }
}


/* -------------------------------------------------------------------------
   3. Manifesto
   ---------------------------------------------------------------------- */

.atelier-manifesto {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 64px 24px;
}
.mf-inner {
    max-width: 680px;
    margin: 0 auto;
}
.mf-panel {
    background: linear-gradient(165deg, #2E3032 0%, #202224 100%);
    border: 1px solid rgba(var(--mo-shirt-rgb), 0.14);
    border-radius: 22px;
    padding: 52px 64px;
    box-shadow:
            0 30px 70px -30px rgba(0, 0, 0, 0.6),
            0 8px 20px -10px rgba(0, 0, 0, 0.4);
}

.mf-body p {
    font-size: 18px;
    line-height: 1.85;
    font-weight: 300;
    color: var(--mo-stone);
    margin: 0 0 26px 0;

    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.mf-body p.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.mf-body strong {
    font-weight: 700;
    color: var(--mo-ivory);
}

.mf-opening {
    text-align: center !important;
    font-size: clamp(21px, 2.6vw, 26px) !important;
    line-height: 1.55 !important;
}
.mf-opening .mf-accent {
    color: var(--mo-shirt);
}

.mf-closing {
    text-align: center !important;
    font-style: italic;
    color: var(--mo-stone) !important;
    margin-top: -10px !important;
}
.mf-closing strong {
    font-style: normal;
    color: var(--mo-shirt) !important;
    letter-spacing: 0.04em;
}

/* le grandi affermazioni centrali */
.mf-statement {
    text-align: center;
    font-size: clamp(24px, 3.3vw, 34px) !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    font-style: italic;
    color: var(--mo-shirt) !important;
    margin: 50px 0 !important;
}
.mf-statement.mf-final {
    font-style: normal;
    color: var(--mo-ivory) !important;
    text-shadow: 0 0 32px rgba(var(--mo-shirt-rgb), 0.28);
}

/* riga di transizione breve, tipo "La verità è questa:" */
.mf-lead-in {
    font-style: italic;
    font-weight: 300;
    color: var(--mo-shirt);
    text-align: center;
    font-size: 17px;
    margin: 0 0 40px 0 !important;
}

/* la sequenza ritmata: un matrimonio / una gravidanza / ... */
.mf-list {
    text-align: center;
    margin: 44px 0 !important;

    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.mf-list.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.mf-list span {
    display: block;
    font-style: italic;
    font-weight: 300;
    font-size: 19px;
    color: var(--mo-stone);
    line-height: 2.1;
    opacity: 0.85;
}

/* la citazione interiore */
.mf-inner-quote {
    text-align: center;
    font-style: italic;
    font-size: 21px !important;
    color: var(--mo-ivory) !important;
    max-width: 460px;
    margin: 36px auto !important;
}

.mf-cta-wrap {
    --mo-cta-gap: 56px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.mf-cta-wrap.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 480px) {
    .atelier-manifesto { padding: 76px 18px; }
    .mf-panel { padding: 44px 26px; }
    .mf-body p { font-size: 16.5px; }
    .mf-list span { font-size: 17px; }
}


/* -------------------------------------------------------------------------
   4. Video — l'estratto dalla masterclass
   ---------------------------------------------------------------------- */

.atelier-video-section {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.mv-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;

    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease, transform 1s ease;
}
.mv-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mv-eyebrow {
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 18px;
}
.mv-title {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 900;
    color: var(--mo-ivory);
    margin: 0 0 26px 0;
}
.mv-text {
    font-size: 17px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--mo-stone);
    max-width: 62ch;
    margin: 0 auto 64px;
}
.mv-strong {
    font-weight: 700;
    color: var(--mo-shirt);
}

/* ---------- contenitore video ---------- */
.mv-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(135deg, #190A11 0%, var(--mo-terracotta) 55%, var(--mo-shirt-cupo) 100%);
    animation: mv-glow 3.2s ease-in-out infinite;
}
@keyframes mv-glow {
    0%, 100% { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 22px 2px rgba(var(--mo-shirt-rgb), 0.25); }
    50%      { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 44px 8px rgba(var(--mo-shirt-rgb), 0.55); }
}
.mv-video-wrap video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* overlay play: cliccandolo il video riparte da capo con l'audio */
.mv-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(19, 18, 17, 0.18);
    cursor: pointer;
    transition: background 0.3s ease;
}
.mv-play-overlay:hover {
    background: rgba(19, 18, 17, 0.32);
}
.mv-play-overlay.hidden {
    display: none;
}
.mv-play-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1.5px solid rgba(242, 238, 232, 0.7);
    background: rgba(19, 18, 17, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.mv-play-overlay:hover .mv-play-icon {
    transform: scale(1.08);
}
.mv-play-icon::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--mo-ivory);
    margin-left: 4px;
}

@media (max-width: 480px) {
    .atelier-video-section { padding: 72px 18px; }
}


/* -------------------------------------------------------------------------
   4-ter. La fascia in cima con il conto alla rovescia
   -------------------------------------------------------------------------
   Compare solo mentre il conto alla rovescia è acceso, e resta ferma in cima
   mentre si scorre: è l'unica cosa della pagina che segue chi legge fin dove
   arriva. Il fondo è pieno, nel rosso più cupo della pagina, perché deve
   staccare da tutto — è un annuncio, non un ornamento.

   Sta sopra la barra del menu (z-index più alto) e la spinge in giù della
   propria altezza, invece di coprirla. Tutto quello che scende — la barra, il
   pannello del telefono, la copertina — scende dello stesso valore, che è
   scritto una volta sola qui sotto: cambiando quel numero si sposta tutto
   insieme, e niente resta indietro di qualche pixel.
   ---------------------------------------------------------------------- */

:root {
    --at-topbar-h: 46px;
}

.at-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: var(--at-topbar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #8F2E44;
    font-family: 'Lato', Arial, sans-serif;
}
.at-topbar-dentro {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;
    min-width: 0;
}
.at-topbar-testo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(242, 238, 232, .88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Le cifre: più grandi e in avorio pieno, perché sono la ragione per cui la
   fascia esiste. Larghezza fissa, o a ogni secondo i numeri ballerebbero e
   trascinerebbero avanti e indietro anche la scritta accanto. */
.at-topbar-cifre {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    font-weight: 300;
    color: rgba(242, 238, 232, .8);
    white-space: nowrap;
}
.at-topbar-cifre b {
    font-size: 16px;
    font-weight: 700;
    color: #F6F2EC;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    margin-right: 1px;
}

/* ---------- quello che la fascia sposta in giù ---------- */

/* il corpo della pagina: senza, la prima fascia di contenuto le finirebbe sotto */
body.at-ha-topbar { padding-top: var(--at-topbar-h); }

/* la barra del menu e il pannello del telefono */
body.at-ha-topbar .site-nav  { top: var(--at-topbar-h); }
body.at-ha-topbar .site-menu { top: var(--at-topbar-h); }

/* con la barra di amministrazione di WordPress si sommano */
body.at-ha-topbar.admin-bar .at-topbar { top: 32px; }
body.at-ha-topbar.admin-bar .site-nav  { top: calc(32px + var(--at-topbar-h)); }

/* La copertina è alta uno schermo intero: senza toglierle l'altezza della
   fascia, il fondo della pagina sporgerebbe di quei pixel e comparirebbe una
   barra di scorrimento per niente. */
body.at-ha-topbar .atelier-hero { height: calc(100vh - var(--at-topbar-h)); }
@supports (height: 100svh) {
    body.at-ha-topbar .atelier-hero { height: calc(100svh - var(--at-topbar-h)); }
}

@media (max-width: 720px) {
    :root { --at-topbar-h: 40px; }
    /* sul telefono il nome del percorso non ci sta: la frase si accorcia da sé */
    .at-topbar-lungo { display: none; }
    .at-topbar-dentro { gap: 12px; }
    .at-topbar-testo { font-size: 9.5px; letter-spacing: .12em; }
    .at-topbar-cifre { gap: 8px; font-size: 10.5px; }
    .at-topbar-cifre b { font-size: 14px; }
}
@media (max-width: 400px) {
    .at-topbar-testo { font-size: 9px; letter-spacing: .08em; }
    .at-topbar-cifre { gap: 6px; }
}
@media (max-width: 782px) {
    body.at-ha-topbar.admin-bar .at-topbar { top: 46px; }
    body.at-ha-topbar.admin-bar .site-nav  { top: calc(46px + var(--at-topbar-h)); }
}


/* -------------------------------------------------------------------------
   4-bis. Il lancio: conto alla rovescia e classe al completo
   -------------------------------------------------------------------------
   Prendono il posto dei pulsanti di candidatura, negli stessi contenitori:
   ereditano i margini e le comparse che quei contenitori avevano già, e la
   pagina non si scompone quando il lancio cambia stato.
   ---------------------------------------------------------------------- */

.at-conto {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Lato', Arial, sans-serif;
}

/* L'alone rosso dietro al conto.
   Non è un riquadro: è una luce. Al centro c'è il rosso pieno della fascia in
   cima — lo stesso colore apposta, sono la stessa cosa detta in due posti — e
   da lì si spegne verso i bordi fino a sparire del tutto nel fondo della
   pagina. Non c'è nessun bordo, nessun angolo, nessun punto in cui si vede
   dove finisce.

   Due cose la fanno funzionare, e sono tutte e due poco appariscenti:

   - L'ultima tappa della sfumatura è lo stesso rosso con opacità zero, non
     "transparent". Sembra identico e non lo è: alcuni browser, per arrivare al
     trasparente, passano dal nero trasparente, e a metà strada comparirebbe
     un'ombra grigiastra proprio dove l'alone dovrebbe essere più delicato.
   - Il margine interno è molto largo. La sfumatura ha bisogno di spazio per
     spegnersi: stretta attorno al testo si troverebbe tagliata di netto dal
     bordo del blocco, e tornerebbe a essere un riquadro — quello che si sta
     evitando.
   - La misura dell'alone è "closest-side" e non due percentuali. In un
     gradiente radiale le percentuali si contano sulla larghezza e sull'altezza
     intere, non sulla metà: un valore che sembra ragionevole disegna un alone
     più largo del blocco, che quindi arriva vivo fino al bordo e lì viene
     tagliato di netto. Con closest-side l'alone finisce esattamente sui lati,
     e l'ultima tappa a 90% lascia un filo di margine perché ci arrivi già
     spento.

   Le cifre stanno al centro, dove il colore è pieno: è lì che serve lo stacco
   per leggerle, ed è lì che l'alone è più fitto.

   L'alone sta su .at-conto-vivo e non su tutto il blocco perché sotto, già
   pronto e nascosto, c'è il pulsante per quando il tempo finisce: allo zero
   l'alone sparisce insieme alle cifre, e il bottone resta un bottone. */
.at-conto-vivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: clamp(34px, 4.4vw, 60px) clamp(46px, 8vw, 120px);
    /* scritto una volta sola: in copertina lo stesso alone serve di nuovo, su
       uno strato a parte, per poter respirare */
    --at-alone: radial-gradient(ellipse closest-side at 50% 50%,
        #8F2E44 0%,
        rgba(143, 46, 68, .72) 30%,
        rgba(143, 46, 68, .34) 54%,
        rgba(143, 46, 68, .10) 74%,
        rgba(143, 46, 68, 0) 90%);

    background: var(--at-alone);
}
.at-conto-intro {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-indent: .24em;
    text-transform: uppercase;
    color: rgba(242, 238, 232, .82);
}

.at-conto-cifre {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 3vw, 38px);
}
.at-conto-cifre > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 2.6em;
}

/* Le cifre a larghezza fissa (tabular-nums) e il riquadro di larghezza minima
   sono la stessa precauzione: un 1 è più stretto di un 8, e senza questo i
   numeri ballerebbero da un lato all'altro a ogni secondo che passa. */
/* Sull'alone rosso le cifre vanno in avorio pieno e le etichette poco sotto:
   più giù di così le scritte piccole comincerebbero a faticare, ed è il motivo
   per cui non scendono oltre. */
.at-conto-cifre b {
    font-weight: 300;
    font-size: clamp(34px, 4.2vw, 58px);
    line-height: 1;
    color: #F6F2EC;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* I giorni in grassetto: è l'unico numero che qualcuno porta via con sé. Ore,
   minuti e secondi dicono che il tempo scorre; i giorni dicono se c'è tempo di
   pensarci o se bisogna decidere adesso.
   Il peso è 700 e non 600: in Lato il 600 non esiste, e il browser che se lo
   trova scritto ingrossa il 700 a modo suo invece di usarlo com'è. */
.at-conto-cifre b[data-at-conto="giorni"] {
    font-weight: 700;
}
.at-conto-cifre i {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-indent: .2em;
    text-transform: uppercase;
    color: rgba(242, 238, 232, .8);
}


/* In copertina il conto sta al posto di un bottone, sotto un titolo grande:
   alla misura piena ruberebbe la scena al nome del percorso. */
.at-cta-wrap .at-conto-cifre b { font-size: clamp(28px, 3.2vw, 44px); }
.at-cta-wrap .at-conto-intro   { font-size: 10px; }
.at-cta-wrap .at-conto-vivo    { padding: clamp(28px, 3.4vw, 48px) clamp(40px, 6.5vw, 100px); }

/* ---------- e in copertina l'alone respira ----------
   Solo qui: la copertina è già una scena viva — il fondo deriva, una luce passa
   dietro al titolo — e il conto alla rovescia ci sta dentro come una brace che
   pulsa. Nelle sezioni più in basso, dove intorno è tutto fermo, la stessa cosa
   sarebbe un lampeggio che chiede attenzione invece di darne.

   L'alone si sposta su uno strato a parte per una ragione precisa: così a
   muoversi sono solo ingrandimento e opacità, le due cose che la scheda grafica
   sa fare da sola. Animando il gradiente direttamente, il browser dovrebbe
   ridisegnare la sfumatura a ogni fotogramma — e qui la sfumatura è grande
   quanto mezzo schermo.

   5,6 secondi: non va d'accordo con i 4,75 della luce dietro al titolo né con i
   41 e 26 del fondo, quindi le quattro cose non tornano mai in fase insieme e
   la copertina non si legge mai come un ciclo che si ripete. */
.at-cta-wrap .at-conto-vivo {
    position: relative;
    background: none;
}
.at-cta-wrap .at-conto-vivo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--at-alone);
    will-change: transform, opacity;
    animation: at-alone-respira 5.6s ease-in-out infinite alternate;
}
@keyframes at-alone-respira {
    from { transform: scale(.84); opacity: .74; }
    to   { transform: scale(1.12); opacity: 1; }
}

/* La riga della classe chiusa.
   Non è un pulsante spento né un avviso in rosso: è una frase, e va letta come
   una frase. Il filo anguria sopra è l'unico segno — sta dove stava il bordo
   del bottone, e tiene il posto senza fingere di essere ancora cliccabile. */
.at-completo {
    margin: 0;
    max-width: 34ch;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.55;
    color: rgba(242, 238, 232, .72);
    text-align: center;
}
.at-completo::before {
    content: '';
    display: block;
    width: 34px;
    height: 1px;
    margin: 0 auto 16px;
    background: var(--mo-shirt);
    opacity: .75;
}

@media (max-width: 560px) {
    /* sul telefono lo spazio ai lati è poco: l'alone si stringe, ma resta più
       largo del testo o tornerebbe a sembrare un riquadro tagliato */
    .at-conto-vivo { padding: 30px 26px; gap: 14px; }
    .at-conto-cifre { gap: 14px; }
    .at-conto-cifre b { font-size: 30px; }
    .at-conto-cifre i { font-size: 8.5px; letter-spacing: .14em; text-indent: .14em; }
}


/* -------------------------------------------------------------------------
   5. Video testimonianze
   ---------------------------------------------------------------------- */

.atelier-vtesti {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.vt-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.vt-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 72px;
}
/* La riga piccola sopra il titolo: dice che cosa si sta per guardare prima che
   il titolo dica di che cosa parla. Stesse misure di quella delle metafore —
   sono la stessa cosa in due sezioni diverse, e devono somigliarsi. */
.vt-eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 16px;
}

/* Più piccolo di prima: sopra c'è ora una riga che introduce, e due cose che
   gridano insieme si annullano. La misura è quella degli altri titoli di
   sezione della pagina. */
.vt-title {
    font-size: clamp(27px, 3.6vw, 44px);
    font-weight: 900;
    color: var(--mo-ivory);
    line-height: 1.15;
    margin: 0 0 24px 0;

    opacity: 0;
    filter: blur(14px);
    transform: scale(1.04);
    transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s ease;
}
.vt-title.is-visible {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}
.vt-subtitle {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.65;
    font-weight: 300;
    color: var(--mo-stone);

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s ease 0.24s, transform 0.9s ease 0.24s;
}
.vt-subtitle.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.vt-subtitle strong {
    font-weight: 700;
    color: var(--mo-shirt);
}

/* ---------- griglia ---------- */
.vt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 32px;
}
.vt-card {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.vt-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Il montaggio degli studenti: un video solo, al centro.
   Largo al massimo quanto serve a guardarlo bene senza che rubi la pagina.

   Questa sezione respira meno delle altre in cima: viene subito dopo una
   copertina alta uno schermo intero, e i 100px di prima allontanavano il video
   di un altro mezzo pollice di rotella per niente. */
.atelier-vtesti-solo {
    padding-top: 64px;
}
.vt-solo {
    max-width: 700px;
    margin: 0 auto;
}

/* La frase sopra il video.
   Non è un titolo di sezione — quelli sono in nero pesante e alti il doppio —
   ma una didascalia che dice chi sta parlando prima ancora che parta l'audio.
   Perciò è nel peso leggero e nel colore della pietra, col nome del percorso
   in avorio pieno: l'unica parola che deve staccare è quella. */
.vt-frase {
    max-width: 700px;
    margin: 0 auto 30px;
    text-align: center;
    font-weight: 300;
    font-size: clamp(18px, 2vw, 30px);
    line-height: 1.45;
    letter-spacing: .01em;
    color: var(--mo-stone);
    text-wrap: balance;
}
.vt-frase span {
    color: var(--mo-ivory);
    letter-spacing: .03em;
    /* due parole sole, e sono un nome: spezzarle su due righe lo farebbe
       leggere come due cose diverse */
    white-space: nowrap;
}
@media (max-width: 520px) {
    .vt-frase { font-size: 19px; margin-bottom: 24px; }
}

/* I numeri del percorso, sotto il video.
   Larghi quanto il video e non quanto la pagina: incolonnati con lui sono una
   didascalia, larghi il doppio sarebbero una fascia a sé.
   Peso 700 e non 600: in Lato il 600 non esiste, e il browser che se lo trova
   scritto ingrossa il 700 a modo suo invece di usarlo com'è. */
.atelier-vtesti-solo .vt-numeri {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 18px;
    max-width: 700px;
    margin: 40px auto 0;
    font-size: clamp(11px, .82vw, 13.5px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
    color: rgba(242, 238, 232, .62);
}
.vt-numeri-sep {
    color: var(--mo-shirt);
    opacity: .8;
}
@media (max-width: 520px) {
    .atelier-vtesti-solo .vt-numeri {
        gap: 7px 12px;
        margin-top: 32px;
        font-size: 10.5px;
        letter-spacing: .15em;
    }
}

.vt-grid .vt-card:nth-child(1) { transition-delay: 0s; }
.vt-grid .vt-card:nth-child(2) { transition-delay: 0.12s; }
.vt-grid .vt-card:nth-child(3) { transition-delay: 0.24s; }
.vt-grid .vt-card:nth-child(4) { transition-delay: 0.36s; }

.vt-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.vt-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mo-terracotta), var(--mo-shirt-cupo));
    color: var(--mo-ivory);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.vt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vt-name {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--mo-ivory);
    line-height: 1.25;
}
.vt-role {
    font-size: 12.5px;
    color: var(--mo-stone);
}

/* ---------- player ---------- */
.vt-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(150deg, #190A11 0%, var(--mo-terracotta) 60%, var(--mo-shirt-cupo) 100%);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(var(--mo-shirt-rgb), 0);
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.vt-player:hover {
    box-shadow: 0 18px 36px -16px rgba(var(--mo-shirt-rgb), 0.45);
    transform: translateY(-4px);
}
.vt-player video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* La variante unica: un video che si vede a qualsiasi larghezza, senza gemello
   nascosto. Le due qui sotto invece esistono in coppia — l'orizzontale per il
   computer, il verticale per il telefono — e ognuna nasconde l'altra. */
.vt-player-unico { display: block; }

/* il player verticale esiste solo sotto i 720px */
.vt-player-mobile { display: none; }
@media (max-width: 720px) {
    .vt-player-desktop { display: none; }
    .vt-player-mobile {
        display: block;
        aspect-ratio: 9 / 16;
        max-width: 340px;
        margin: 0 auto;
    }
}

.vt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(19, 18, 17, 0.55);
    border: 1.5px solid rgba(242, 238, 232, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: 2;
}
.vt-player:hover .vt-play-btn {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(var(--mo-shirt-rgb), 0.55);
}
.vt-play-btn::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent var(--mo-ivory);
    margin-left: 3px;
}
.vt-player.playing .vt-play-btn { display: none; }

.vt-duration {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(19, 18, 17, 0.75);
    color: var(--mo-ivory);
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    z-index: 2;
}
.vt-player.playing .vt-duration { display: none; }

.vt-cta-wrap { --mo-cta-gap: 64px; }

@media (max-width: 720px) {
    .vt-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 520px) {
    .atelier-vtesti { padding: 72px 18px; }
}


/* -------------------------------------------------------------------------
   5-bis. La griglia delle videotestimonianze
   -------------------------------------------------------------------------
   Tredici testimonianze non stanno su una mensola che scorre: chi arriva qui
   ne vedrebbe due e mezza e non saprebbe mai di quante persone si tratta. Il
   numero e' l'argomento, quindi le tredici schede si vedono tutte insieme.

   Le colonne le decide --tv-colonne, cosi' il numero per riga si cambia in un
   punto solo. La scheda dispari in fondo alla griglia va al centro invece che
   spiaggiata a sinistra: sembra la chiusura di una fila, non un errore.
   ---------------------------------------------------------------------- */

.tv-vetrina {
    position: relative;
}

.tv-griglia {
    --tv-colonne: 3;
    display: grid;
    grid-template-columns: repeat(var(--tv-colonne), minmax(0, 1fr));
    gap: 40px 24px;
}

/* La tredicesima. Con tre colonne cade da sola in una riga nuova: la si porta
   nella colonna di mezzo. */
.tv-griglia > .tv-card:last-child:nth-child(3n + 1) {
    grid-column: 2;
}

.tv-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tv-testa {
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Lo spazio della specializzazione resta prenotato anche quando la riga
       non c'e' ancora: senza, i video di una stessa fila partirebbero da due
       altezze diverse a seconda di chi ha il ruolo scritto e chi no. */
    min-height: 40px;
}
.tv-nome {
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--mo-ivory);
}
/* La specializzazione. Finche' non c'e', la riga non viene stampata affatto:
   niente spazio vuoto che aspetta, niente trattino di riempimento. */
.tv-ruolo {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--mo-stone);
}

/* La frase che convince a premere play. Centrata sotto il video e nel serif
   in corsivo: e' una citazione, e va vista come tale prima ancora di essere
   letta. Le virgolette stanno dentro il filo del testo e non appese al
   margine, perche' col testo centrato un margine sinistro non c'e'. */
.tv-frase {
    margin: 12px 0 0;
    text-align: center;
    font-family: var(--fs);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(14.5px, 1.05vw, 16.5px);
    line-height: 1.55;
    color: rgba(242, 238, 232, .88);
    text-wrap: pretty;
}
.tv-frase::before,
.tv-frase::after {
    font-size: 26px;
    line-height: 0;
    vertical-align: -.28em;
    font-style: normal;
    color: var(--mo-shirt);
    opacity: .62;
}
.tv-frase::before { content: '\201C'; margin-right: .06em; }
.tv-frase::after  { content: '\201D'; margin-left: .06em; }

/* Le parole che devono arrivare per prime. Di Playfair in casa c'e' solo il
   peso 400, tondo e corsivo: chiedere qui il grassetto farebbe fabbricare al
   browser un finto neretto inclinato, che a questa misura si sbrodola. Quindi
   l'evidenza la fa il colore — in questa pagina dice la stessa cosa e da
   lontano si vede anche prima. */
.tv-frase strong {
    font-weight: 400;
    color: var(--mo-shirt);
}

/* Il riquadro del video lo disegna .vt-player, condiviso con le altre sezioni.
   La durata la scrive il browser quando conosce il file: vedi il JavaScript.
   Scritta a mano mentirebbe il giorno in cui un file cambia. */

@media (max-width: 1100px) {
    .tv-griglia { --tv-colonne: 2; gap: 34px 20px; }
    /* con due colonne l'ultima scheda dispari e' la prima di una riga nuova:
       la si allarga sulle due colonne e la si centra */
    .tv-griglia > .tv-card:last-child:nth-child(3n + 1) { grid-column: auto; }
    .tv-griglia > .tv-card:last-child:nth-child(2n + 1) {
        grid-column: 1 / -1;
        width: calc(50% - 10px);
        justify-self: center;
    }
}

@media (max-width: 620px) {
    .tv-griglia { --tv-colonne: 1; gap: 30px; }
    .tv-griglia > .tv-card:last-child:nth-child(2n + 1) {
        grid-column: auto;
        width: auto;
        /* in colonna singola non c'e' piu' niente da centrare: la scheda torna
           larga quanto le altre */
        justify-self: stretch;
    }
}


/* -------------------------------------------------------------------------
   6. Chi sono + percorso e riconoscimenti
   ---------------------------------------------------------------------- */

.atelier-chisono {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    /* prima qui sopra c'era una fascia colorata a tutta larghezza e il ritratto
       le stava a cavallo, tirato su di 85px. Tolta la fascia, il ritratto non ha
       piu' niente su cui sporgere: lo spazio glielo da' la sezione. */
    padding: 96px 0 100px;
}
.cs-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- bio ---------- */
.cs-text-block {
    max-width: 720px;
    margin: 0 auto 80px;

    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease, transform 1s ease;
}
.cs-text-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* il ritratto, tondo, in cima alla sezione */
.cs-portrait {
    width: 170px;
    height: 170px;
    margin: 0 auto 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--mo-ink);
    background: linear-gradient(135deg, var(--mo-terracotta), var(--mo-shirt-cupo));
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2;

    opacity: 0;
    transform: scale(0.82);
    transition: opacity 1s ease 0.1s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.cs-text-block.is-visible .cs-portrait {
    opacity: 1;
    transform: scale(1);
}
.cs-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 18px;
}
.cs-title {
    text-align: center;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 900;
    color: var(--mo-ivory);
    margin: 0 0 32px 0;
}

.cs-bio-wrap {
    position: relative;
}

/* le foto sfalsate che galleggiano dentro al testo */
.cs-float-photo {
    width: 130px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.6);
    opacity: 0;
    animation: cs-float 7s ease-in-out infinite;
    margin: 6px 0 14px 0;
}
.cs-bio-wrap.is-visible .cs-float-photo {
    opacity: 0.9;
}
.cs-float-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(0.12) saturate(1.05) brightness(0.95);
}
.cs-float-1 {
    float: left;
    --rot: -4deg;
    aspect-ratio: 4 / 5;
    margin-right: 22px;
    animation-delay: 0s;
}
.cs-float-2 {
    float: right;
    width: 150px;
    --rot: 3deg;
    aspect-ratio: 5 / 4;
    margin-left: 22px;
    animation-delay: 1.8s;
    animation-duration: 8.5s;
}
.cs-float-3 {
    float: left;
    width: 120px;
    --rot: -2deg;
    aspect-ratio: 4 / 5;
    margin-right: 22px;
    animation-delay: 0.9s;
    animation-duration: 7.8s;
}
@keyframes cs-float {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50%      { transform: translateY(-14px) rotate(var(--rot, 0deg)); }
}
@media (max-width: 640px) {
    .cs-float-photo {
        float: none !important;
        width: 78% !important;
        max-width: 280px;
        margin: 24px auto !important;
        display: block;
    }
}

.cs-bio-text {
    font-size: 16.5px;
    line-height: 1.75;
    font-weight: 300;
    color: var(--mo-stone);
    overflow: auto;
}
.cs-bio-text p { margin: 0 0 20px 0; }
.cs-bio-text strong {
    font-weight: 700;
    color: var(--mo-shirt);
}

/* ---------- fascia riconoscimenti, con sfondo proprio ---------- */
.cs-cred-band {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 90px;
    padding: 90px 24px;
    background:
            radial-gradient(ellipse 70% 90% at 50% 0%, rgba(242, 238, 232, 0.05), transparent 60%),
            linear-gradient(180deg, #3A1D1A 0%, #2A1512 100%);
}
.cs-cred-band .cs-inner {
    padding: 0;
}

.cs-cred-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.01em;
    color: var(--mo-shirt);
    text-shadow: 0 0 24px rgba(var(--mo-shirt-rgb), 0.35);
    margin-bottom: 48px;

    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.cs-cred-label.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.cs-cred-label::before,
.cs-cred-label::after {
    content: '';
    height: 1px;
    width: clamp(40px, 8vw, 120px);
    background: linear-gradient(90deg, transparent, var(--mo-shirt));
}
.cs-cred-label::after {
    background: linear-gradient(90deg, var(--mo-shirt), transparent);
}

/* la griglia usa il gap come reticolo: 1px di sfondo che diventa bordo */
.cs-cred-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(var(--mo-shirt-rgb), 0.18);
    border: 1px solid rgba(var(--mo-shirt-rgb), 0.18);
    border-radius: 8px;
    overflow: hidden;
}
.cs-cred-card {
    background: var(--mo-card);
    padding: 34px 28px;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease, background 0.4s ease;
}
/* Il riquadro è un link quando c'è dove andare: qui gli si toglie tutto
   quello che i browser mettono ai link (sottolineatura, colore proprio) e gli
   si dà la mano del cursore. La veste resta identica al riquadro non
   cliccabile: cambia il comportamento, non il disegno. */
a.cs-cred-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.cs-cred-card:focus-visible {
    outline: 2px solid var(--mo-shirt);
    outline-offset: 3px;
}
.cs-cred-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.cs-cred-card.is-visible:hover {
    background: #251E1A;
    transform: translateY(-6px);
    box-shadow: 0 16px 34px -14px rgba(var(--mo-shirt-rgb), 0.4);
    position: relative;
    z-index: 2;
}

.cs-cred-icon {
    width: 138px;
    height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}
.cs-cred-icon.wide {
    width: 230px;
}
.cs-cred-icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    opacity: 0.92;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.cs-cred-card:hover .cs-cred-icon img {
    transform: scale(1.08);
    opacity: 1;
}

.cs-cred-tag {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 14px;
}
.cs-cred-name {
    font-size: 19px;
    font-weight: 900;
    color: var(--mo-ivory);
    margin-bottom: 8px;
    line-height: 1.25;
}
.cs-cred-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mo-stone);
    font-weight: 300;
}

.cs-cta-wrap { --mo-cta-gap: 40px; }

@media (max-width: 780px) {
    .cs-cred-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .atelier-chisono { padding: 68px 0 72px; }
    .cs-inner { padding: 0 18px; }
    .cs-cred-grid { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------------
   7. Per chi è (e per chi non è) ATELIER MOSAIKO
   ---------------------------------------------------------------------- */

.atelier-perchi {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.pc-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.pc-title {
    text-align: center;
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 900;
    color: var(--mo-ivory);
    margin: 0 0 64px 0;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.pc-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pc-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(var(--mo-shirt-rgb), 0.15);
    border-radius: 8px;
    overflow: hidden;
}
.pc-col {
    background: #1B1815;
    padding: 44px 40px;

    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease, transform 1s ease;
}
.pc-col.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.pc-col.no { transition-delay: 0.12s; }

.pc-col-heading {
    font-size: 21px;
    font-weight: 900;
    margin-bottom: 28px;
}
.pc-col.yes .pc-col-heading { color: var(--mo-shirt); }
.pc-col.no  .pc-col-heading { color: var(--mo-stone); }

.pc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pc-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 0;
    font-size: 15.5px;
    line-height: 1.55;
    font-weight: 300;
    border-bottom: 1px solid rgba(242, 238, 232, 0.06);
}
.pc-list li:last-child { border-bottom: none; }
.pc-col.yes .pc-list li { color: var(--mo-ivory); }
.pc-col.no  .pc-list li { color: var(--mo-stone); }

.pc-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border-radius: 50%;
}
.pc-col.yes .pc-icon {
    color: var(--mo-shirt);
    border: 1.5px solid var(--mo-shirt);
}
.pc-col.no .pc-icon {
    color: var(--mo-stone);
    border: 1.5px solid rgba(167, 155, 147, 0.4);
}

@media (max-width: 860px) {
    .pc-columns { grid-template-columns: 1fr; }
    .pc-col.no { border-top: 1px solid rgba(var(--mo-shirt-rgb), 0.15); }
}
@media (max-width: 480px) {
    .atelier-perchi { padding: 72px 18px; }
    .pc-col { padding: 34px 24px; }
}


/* -------------------------------------------------------------------------
   8. Galleria alternata — foto e didascalia a zigzag
   ---------------------------------------------------------------------- */

.atelier-diff {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.df-inner {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}

/* La riga piccola che introduce il titolo, come nelle videotestimonianze: dice
   che cosa si sta per guardare prima che il titolo dica di che cosa parla. */
.df-eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.df-eyebrow.is-visible { opacity: 1; transform: translateY(0); }

.df-title {
    text-align: center;
    /* Su una riga sola: la misura si stringe da sola quando lo schermo non
       basta, invece di spezzare il titolo in due. --df-fit sono i caratteri
       della riga piu' lunga, moltiplicati per la larghezza media di una
       lettera in questo peso. */
    --df-fit: 13.5;
    font-size: clamp(25px, min(3.6vw, calc((100vw - 48px) / var(--df-fit))), 44px);
    text-wrap: balance;
    font-weight: 900;
    line-height: 1.15;
    color: var(--mo-ivory);
    margin: 0 0 22px 0;
    position: relative;
    z-index: 1;

    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 1s ease 0.1s, transform 1s ease 0.1s;
}
.df-title.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* "degli studenti" cambia colore, non carattere. Di Lato il corsivo non c'e'
   in casa: chiederlo qui faceva inclinare le lettere al browser, ed e' quella
   inclinazione finta che si vedeva. Il colore da solo basta a distinguere le
   due meta' del titolo, e l'alone dietro resta appena accennato — un titolo
   che brilla troppo smette di sembrare elegante. */
.df-title em {
    font-style: normal;
    font-weight: 900;
    color: var(--mo-shirt);
    text-shadow: 0 0 34px rgba(var(--mo-shirt-rgb), 0.28);
}

/* alone caldo ambientale, dietro al titolo. Fermo: sulla copertina c'e' gia'
   una luce che respira, due nella stessa pagina diventano un tic. */
.df-glow {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 640px;
    height: 300px;
    background: radial-gradient(ellipse at center, rgba(var(--mo-shirt-rgb), 0.15) 0%, rgba(var(--mo-shirt-rgb), 0.05) 45%, transparent 72%);
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
}

/* Il testo di apertura. In tondo: gli a capo li decide il PHP, una frase per
   riga, e le tre righe si leggono come tre passaggi invece che come un blocco
   unico da attraversare. */
.df-opening {
    text-align: center;
    font-size: clamp(16.5px, 1.6vw, 19px);
    line-height: 1.75;
    font-weight: 300;
    color: var(--mo-stone);
    /* Piu' largo di prima: con gli a capo scritti a mano nel testo, un corpo
       stretto li spezzerebbe una seconda volta e le righe diventerebbero sei. */
    max-width: 880px;
    margin: 0 auto 64px;
    position: relative;
    z-index: 1;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s ease 0.05s, transform 0.9s ease 0.05s;
}
.df-opening.is-visible { opacity: 1; transform: translateY(0); }

/* La riga che dice da dove vengono gli scatti: e' l'informazione che il
   visitatore cerca guardando le foto, e va trovata senza leggere il resto.
   Qui il grassetto e' vero — di Lato il peso 700 c'e' in casa. */
.df-opening strong {
    font-weight: 400;
    color: var(--mo-ivory);
}

/* ---------- la galleria degli scatti ----------
   Due colonne che si riempiono per altezza, non per righe: cosi' un verticale
   e un orizzontale stanno accanto senza che nessuno dei due debba essere
   ritagliato per pareggiare l'altro. Qui il contenuto sono le fotografie — la
   firma sotto dice solo di chi sono e da quale edizione arrivano. */
.df-galleria {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
    margin-bottom: 90px;
}
.df-colonna {
    display: flex;
    flex-direction: column;
}
.df-scatto {
    /* una foto non si spezza mai fra due colonne */
    break-inside: avoid;
    margin: 0 0 34px;

    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.df-scatto.is-visible { opacity: 1; transform: translateY(0); }

/* Niente formato imposto: sono fotografie, e ritagliarle in 4/3 vorrebbe dire
   rifare l'inquadratura a chi l'ha scelta. Ogni scatto tiene il suo, verticale
   o orizzontale che sia. */
.df-media {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(150deg, #190A11 0%, var(--mo-terracotta) 60%, var(--mo-shirt-cupo) 100%);
    box-shadow: 0 0 0 0 rgba(var(--mo-shirt-rgb), 0);
    transition: box-shadow 0.5s ease;
}
.df-scatto:hover .df-media {
    box-shadow: 0 25px 60px -18px rgba(var(--mo-shirt-rgb), 0.5);
}
.df-media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}
.df-scatto:hover .df-media img {
    transform: scale(1.04);
}

/* La firma. Il nome e l'edizione sulla stessa riga: sono una cosa sola, e su
   due righe peserebbero piu' della foto che stanno firmando. */
.df-firma {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 12px;
}
.df-firma-nome {
    font-size: 15px;
    font-weight: 700;
    color: var(--mo-ivory);
}

/* Quando il nome porta al profilo Instagram. Niente sottolineatura sempre
   accesa: sotto tredici foto sarebbero tredici righine. Il segno che il nome
   e' cliccabile e' la frecciolina, che si accende al passaggio del mouse
   insieme al colore — e chi arriva col tasto di tabulazione vede lo stesso
   riquadro di tutti gli altri collegamenti della pagina. */
.df-firma-link {
    text-decoration: none;
    color: var(--mo-ivory);
    transition: color 0.35s ease;
}
.df-firma-freccia {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    line-height: 1;
    color: var(--mo-shirt);
    opacity: 0;
    transform: translate(-2px, 2px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.df-firma-link:hover,
.df-firma-link:focus-visible {
    color: var(--mo-shirt);
}
.df-scatto:hover .df-firma-freccia,
.df-firma-link:focus-visible .df-firma-freccia {
    opacity: 1;
    transform: translate(0, 0);
}
.df-firma-link:focus-visible {
    outline: 1px solid rgba(var(--mo-shirt-rgb), .6);
    outline-offset: 4px;
}
.df-firma-ed {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--mo-shirt);
}

/* ---------- riga competenze in chiusura ---------- */
.df-skills-label {
    text-align: center;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mo-stone);
    margin-bottom: 22px;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.df-skills-label.is-visible { opacity: 1; transform: translateY(0); }

.df-skills-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}
.df-skills-tags.is-visible { opacity: 1; transform: translateY(0); }

.df-tag {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid rgba(var(--mo-shirt-rgb), 0.4);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    color: var(--mo-ivory);
    background: rgba(var(--mo-shirt-rgb), 0.06);
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.3s ease;
}
.df-tag:hover {
    background: rgba(var(--mo-shirt-rgb), 0.18);
    border-color: var(--mo-shirt);
    transform: translateY(-2px);
}

.df-cta-wrap { --mo-cta-gap: 52px; }

/* Sotto i 720 px due colonne vorrebbero dire due foto larghe meno di un
   pollice: si torna a una sola, in fila. */
@media (max-width: 720px) {
    .df-galleria { grid-template-columns: 1fr; gap: 0; }
    .df-scatto { margin-bottom: 40px; }
}
@media (max-width: 560px) {
    .atelier-diff { padding: 72px 18px; }
}


/* -------------------------------------------------------------------------
   8-ter. Le recensioni che scorrono

   Stesso meccanismo della pagina MOSAIKO: due righe che scivolano in senso
   opposto, ognuna stampata due volte, e l'animazione che arriva a meta' e
   ricomincia. Il salto non si vede perche' a meta' corsa la seconda copia si
   trova esattamente dove era la prima.

   Le classi sono nuove (rc-) e non quelle di MOSAIKO (mt-): i due fogli di
   stile non si incontrano mai sulla stessa pagina, ma un colore di questa
   pagina scritto dentro una classe di quell'altra e' il tipo di cosa che
   qualcuno un giorno sposta senza sapere cosa rompe.
   ---------------------------------------------------------------------- */

.atelier-recensioni {
    overflow: hidden;
    width: 100%;
    /* poca aria sopra: continua il discorso delle videotestimonianze, non ne
       apre uno nuovo */
    padding: 20px 0 100px;
    font-family: 'Lato', Arial, sans-serif;
}

.rc-eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 16px;
    padding: 0 24px;
}
/* Piu' piccolo dei titoli di sezione: qui sopra c'e' gia' "Dopo ATELIER
   MOSAIKO, che cosa cambia", e due titoli della stessa misura uno sotto
   l'altro farebbero sembrare questa una sezione nuova invece che la seconda
   meta' della stessa. */
.rc-title {
    text-align: center;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 900;
    line-height: 1.2;
    color: var(--mo-ivory);
    margin: 0 0 14px;
    padding: 0 24px;
    text-wrap: balance;
}
.rc-title em {
    font-style: normal;
    color: var(--mo-shirt);
}

/* Il ponte fra le due meta'. E' l'unico testo lungo di questa sezione e non
   scorre: dice perche' quello che sta sotto riguarda chi legge e non me. */
.rc-ponte {
    max-width: 720px;
    margin: 0 auto 46px;
    padding: 0 24px;
    text-align: center;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.75;
    font-weight: 300;
    color: var(--mo-stone);
    text-wrap: pretty;
}
.rc-ponte strong {
    font-weight: 400;
    color: var(--mo-ivory);
}

/* La stessa cosa in cima alla pagina, dove parlano gli studenti. Li' non
   segue niente a cui attaccarsi, quindi si riprende l'aria sopra che la
   variante di sotto aveva tolto. */
.atelier-recensioni-studenti {
    padding: 90px 0;
}

/* Il promemoria che vede solo chi puo' modificare il sito: un riquadro
   tratteggiato, che si distingue a colpo d'occhio da qualcosa di pubblicato. */
.rc-vuoto {
    max-width: 720px;
    margin: 0 auto;
    padding: 26px 24px;
    border: 1px dashed rgba(var(--mo-shirt-rgb), .45);
    border-radius: 6px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--mo-stone);
}
.rc-vuoto strong {
    font-weight: 700;
    color: var(--mo-shirt);
}

/* Le due estremita' sfumano invece di tagliare le schede a meta': senza, il
   bordo dello schermo sembra una porta che le mangia. */
.rc-track-wrap {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.rc-track {
    display: flex;
    gap: 24px;
    width: max-content;
    /* Il giro e' lungo il doppio di prima (otto schede invece di tre), e la
       durata cresce con lui: cosi' la velocita' apparente resta quella. */
    animation: rc-scorri 118s linear infinite;
}
.rc-track.reverse {
    animation-name: rc-scorri-inverso;
}
/* col mouse sopra si ferma: se una frase interessa, si deve poterla leggere */
@media (hover: hover) and (pointer: fine) {
    .atelier-recensioni:hover .rc-track {
        animation-play-state: paused;
    }
}
/* chi ha chiesto meno movimento le riceve ferme */
@media (prefers-reduced-motion: reduce) {
    .rc-track { animation: none; }
    .rc-track-wrap { overflow-x: auto; }
}

@keyframes rc-scorri {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes rc-scorri-inverso {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}


/* --------------------------------------------------------------------------
   La durata segue la lunghezza della riga.

   Le righe non hanno piu' tutte lo stesso numero di schede: l'elenco si
   spartisce fra le righe, quindi una puo' averne cinque e un'altra sei. Con
   una durata unica la riga corta scorrerebbe piano e quella lunga di corsa.
   Qui la durata cresce con la riga, cosi' la velocita' apparente resta sempre
   quella: circa 25 pixel al secondo, il passo di una lettura tranquilla.
   Quando le schede si allargano (vedi piu' sotto) le durate si allungano in
   proporzione, per la stessa ragione.
   ----------------------------------------------------------------------- */
.rc-track[data-schede="2"],
.dm-track[data-schede="2"] { animation-duration: 29s; }
.rc-track[data-schede="3"],
.dm-track[data-schede="3"] { animation-duration: 44s; }
.rc-track[data-schede="4"],
.dm-track[data-schede="4"] { animation-duration: 58s; }
.rc-track[data-schede="5"],
.dm-track[data-schede="5"] { animation-duration: 73s; }
.rc-track[data-schede="6"],
.dm-track[data-schede="6"] { animation-duration: 88s; }
.rc-track[data-schede="7"],
.dm-track[data-schede="7"] { animation-duration: 103s; }
.rc-track[data-schede="8"],
.dm-track[data-schede="8"] { animation-duration: 118s; }
.rc-track[data-schede="9"],
.dm-track[data-schede="9"] { animation-duration: 133s; }
.rc-track[data-schede="10"],
.dm-track[data-schede="10"] { animation-duration: 148s; }
.rc-track[data-schede="11"],
.dm-track[data-schede="11"] { animation-duration: 162s; }
.rc-track[data-schede="12"],
.dm-track[data-schede="12"] { animation-duration: 177s; }
.rc-track[data-schede="13"],
.dm-track[data-schede="13"] { animation-duration: 192s; }
.rc-track[data-schede="14"],
.dm-track[data-schede="14"] { animation-duration: 207s; }
.rc-track[data-schede="15"],
.dm-track[data-schede="15"] { animation-duration: 222s; }
.rc-track[data-schede="16"],
.dm-track[data-schede="16"] { animation-duration: 237s; }
.rc-track[data-schede="17"],
.dm-track[data-schede="17"] { animation-duration: 252s; }
.rc-track[data-schede="18"],
.dm-track[data-schede="18"] { animation-duration: 266s; }
.rc-track[data-schede="19"],
.dm-track[data-schede="19"] { animation-duration: 281s; }
.rc-track[data-schede="20"],
.dm-track[data-schede="20"] { animation-duration: 296s; }

/* Sugli schermi larghi le schede crescono.

   Non e' un vezzo: la riga viene stampata due volte per chiudere il giro, e se
   il gruppo di schede e' piu' stretto dello schermo la seconda copia entra in
   campo — e la stessa persona si vede due volte. Cinque schede da 340 fanno
   1796px: bastano su un portatile, non su un monitor grande. Allargando la
   scheda la riga supera di nuovo il bordo, e in piu' le frasi respirano. */
@media (min-width: 1700px) {
    .rc-card, .dm-card { width: 400px; }
    .rc-track[data-schede="2"],
    .dm-track[data-schede="2"] { animation-duration: 34s; }
    .rc-track[data-schede="3"],
    .dm-track[data-schede="3"] { animation-duration: 51s; }
    .rc-track[data-schede="4"],
    .dm-track[data-schede="4"] { animation-duration: 68s; }
    .rc-track[data-schede="5"],
    .dm-track[data-schede="5"] { animation-duration: 86s; }
    .rc-track[data-schede="6"],
    .dm-track[data-schede="6"] { animation-duration: 103s; }
    .rc-track[data-schede="7"],
    .dm-track[data-schede="7"] { animation-duration: 120s; }
    .rc-track[data-schede="8"],
    .dm-track[data-schede="8"] { animation-duration: 137s; }
    .rc-track[data-schede="9"],
    .dm-track[data-schede="9"] { animation-duration: 155s; }
    .rc-track[data-schede="10"],
    .dm-track[data-schede="10"] { animation-duration: 172s; }
    .rc-track[data-schede="11"],
    .dm-track[data-schede="11"] { animation-duration: 189s; }
    .rc-track[data-schede="12"],
    .dm-track[data-schede="12"] { animation-duration: 207s; }
    .rc-track[data-schede="13"],
    .dm-track[data-schede="13"] { animation-duration: 224s; }
    .rc-track[data-schede="14"],
    .dm-track[data-schede="14"] { animation-duration: 241s; }
    .rc-track[data-schede="15"],
    .dm-track[data-schede="15"] { animation-duration: 259s; }
    .rc-track[data-schede="16"],
    .dm-track[data-schede="16"] { animation-duration: 276s; }
    .rc-track[data-schede="17"],
    .dm-track[data-schede="17"] { animation-duration: 293s; }
    .rc-track[data-schede="18"],
    .dm-track[data-schede="18"] { animation-duration: 311s; }
    .rc-track[data-schede="19"],
    .dm-track[data-schede="19"] { animation-duration: 328s; }
    .rc-track[data-schede="20"],
    .dm-track[data-schede="20"] { animation-duration: 345s; }
}
@media (min-width: 2200px) {
    .rc-card, .dm-card { width: 470px; }
    .rc-track[data-schede="2"],
    .dm-track[data-schede="2"] { animation-duration: 39s; }
    .rc-track[data-schede="3"],
    .dm-track[data-schede="3"] { animation-duration: 60s; }
    .rc-track[data-schede="4"],
    .dm-track[data-schede="4"] { animation-duration: 80s; }
    .rc-track[data-schede="5"],
    .dm-track[data-schede="5"] { animation-duration: 100s; }
    .rc-track[data-schede="6"],
    .dm-track[data-schede="6"] { animation-duration: 120s; }
    .rc-track[data-schede="7"],
    .dm-track[data-schede="7"] { animation-duration: 140s; }
    .rc-track[data-schede="8"],
    .dm-track[data-schede="8"] { animation-duration: 160s; }
    .rc-track[data-schede="9"],
    .dm-track[data-schede="9"] { animation-duration: 180s; }
    .rc-track[data-schede="10"],
    .dm-track[data-schede="10"] { animation-duration: 201s; }
    .rc-track[data-schede="11"],
    .dm-track[data-schede="11"] { animation-duration: 221s; }
    .rc-track[data-schede="12"],
    .dm-track[data-schede="12"] { animation-duration: 241s; }
    .rc-track[data-schede="13"],
    .dm-track[data-schede="13"] { animation-duration: 261s; }
    .rc-track[data-schede="14"],
    .dm-track[data-schede="14"] { animation-duration: 281s; }
    .rc-track[data-schede="15"],
    .dm-track[data-schede="15"] { animation-duration: 301s; }
    .rc-track[data-schede="16"],
    .dm-track[data-schede="16"] { animation-duration: 322s; }
    .rc-track[data-schede="17"],
    .dm-track[data-schede="17"] { animation-duration: 342s; }
    .rc-track[data-schede="18"],
    .dm-track[data-schede="18"] { animation-duration: 362s; }
    .rc-track[data-schede="19"],
    .dm-track[data-schede="19"] { animation-duration: 382s; }
    .rc-track[data-schede="20"],
    .dm-track[data-schede="20"] { animation-duration: 402s; }
}

/* Al telefono le schede sono da 240: le righe sono molto piu' corte, e con le
   durate di sopra scorrerebbero al rallentatore. */
@media (max-width: 560px) {
    .rc-track[data-schede="2"],
    .dm-track[data-schede="2"] { animation-duration: 25s; }
    .rc-track[data-schede="3"],
    .dm-track[data-schede="3"] { animation-duration: 38s; }
    .rc-track[data-schede="4"],
    .dm-track[data-schede="4"] { animation-duration: 52s; }
    .rc-track[data-schede="5"],
    .dm-track[data-schede="5"] { animation-duration: 65s; }
    .rc-track[data-schede="6"],
    .dm-track[data-schede="6"] { animation-duration: 78s; }
    .rc-track[data-schede="7"],
    .dm-track[data-schede="7"] { animation-duration: 91s; }
    .rc-track[data-schede="8"],
    .dm-track[data-schede="8"] { animation-duration: 104s; }
    .rc-track[data-schede="9"],
    .dm-track[data-schede="9"] { animation-duration: 118s; }
    .rc-track[data-schede="10"],
    .dm-track[data-schede="10"] { animation-duration: 131s; }
    .rc-track[data-schede="11"],
    .dm-track[data-schede="11"] { animation-duration: 144s; }
    .rc-track[data-schede="12"],
    .dm-track[data-schede="12"] { animation-duration: 157s; }
    .rc-track[data-schede="13"],
    .dm-track[data-schede="13"] { animation-duration: 170s; }
    .rc-track[data-schede="14"],
    .dm-track[data-schede="14"] { animation-duration: 184s; }
    .rc-track[data-schede="15"],
    .dm-track[data-schede="15"] { animation-duration: 197s; }
    .rc-track[data-schede="16"],
    .dm-track[data-schede="16"] { animation-duration: 210s; }
    .rc-track[data-schede="17"],
    .dm-track[data-schede="17"] { animation-duration: 223s; }
    .rc-track[data-schede="18"],
    .dm-track[data-schede="18"] { animation-duration: 236s; }
    .rc-track[data-schede="19"],
    .dm-track[data-schede="19"] { animation-duration: 250s; }
    .rc-track[data-schede="20"],
    .dm-track[data-schede="20"] { animation-duration: 263s; }
}

.rc-row-gap { height: 24px; }

.rc-card {
    flex: 0 0 auto;
    width: 340px;
    background: var(--mo-card);
    border: 1px solid rgba(var(--mo-shirt-rgb), .18);
    border-radius: 6px;
    padding: 28px 26px;
}
.rc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.rc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mo-terracotta), var(--mo-shirt));
    color: var(--mo-ivory);
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.rc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rc-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--mo-ivory);
    line-height: 1.3;
}
.rc-role {
    font-size: 13px;
    font-weight: 300;
    color: var(--mo-stone);
}
.rc-stars {
    color: #F0C24B;
    text-shadow: 0 0 8px rgba(240, 194, 75, .5);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.rc-quote {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    font-weight: 300;
    color: rgba(242, 238, 232, .9);
}
.rc-quote strong {
    font-weight: 700;
    color: var(--mo-shirt);
}

@media (max-width: 560px) {
    .atelier-recensioni { padding: 68px 0; }
    .rc-title { margin-bottom: 36px; }
    .rc-card { width: 240px; padding: 18px 18px; }
    .rc-quote { font-size: 13.5px; }
    .rc-row-gap { height: 14px; }
    .rc-track { gap: 14px; }
}


/* -------------------------------------------------------------------------
   8-quinquies. I casi studio

   Quattro video due per riga. Piu' grandi delle videotestimonianze — la' erano
   quindici e contava vederle tutte, qui sono quattro e contano una per una.
   Il riquadro e il pulsante di riproduzione sono gli stessi, condivisi.
   ---------------------------------------------------------------------- */

.atelier-casi {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.cst-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.cst-eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 16px;
}
.cst-title {
    text-align: center;
    font-size: clamp(25px, 3.6vw, 44px);
    font-weight: 900;
    line-height: 1.15;
    color: var(--mo-ivory);
    margin: 0 0 56px;
    text-wrap: balance;
}

.cst-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px 32px;
}
.cst-item {
    display: flex;
    flex-direction: column;
}
/* La frase sopra il video. E' quella che si legge prima di decidere se
   guardare, quindi non e' una didascalia: e' il motivo. Sta in alto, non
   sotto, e ha un'altezza minima uguale per tutti — cosi' i quattro video
   partono dalla stessa riga anche se una frase e' piu' lunga. */
.cst-claim {
    margin: 0 0 18px;
    min-height: 3.1em;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.45;
    font-weight: 700;
    color: var(--mo-ivory);
    text-wrap: pretty;
}
.cst-claim strong {
    color: var(--mo-shirt);
}
.cst-name {
    margin: 14px 0 0;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mo-shirt);
}

/* Il posto del video che manca ancora: lo vede solo chi puo' modificare. */
.cst-attesa {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 16 / 9;
    padding: 20px;
    border: 1px dashed rgba(var(--mo-shirt-rgb), .45);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    font-weight: 300;
    color: var(--mo-stone);
}

/* Sotto i 640 px la frase perde l'altezza fissa: in colonna singola i video
   non devono piu' partire allineati fra loro, e lo spazio vuoto si vedrebbe. */
@media (max-width: 820px) {
    .cst-claim { min-height: 0; }
}

.cst-cta-wrap { --mo-cta-gap: 64px; }

/* Sotto gli 820 px due video affiancati diventano due francobolli: uno sotto
   l'altro si vedono, e la sezione e' corta abbastanza da reggerlo. */
@media (max-width: 820px) {
    .cst-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
    .atelier-casi { padding: 72px 18px; }
    .cst-title { margin-bottom: 38px; }
}


/* -------------------------------------------------------------------------
   8-quater. Dicono di me — le voci brevi

   Stessa meccanica delle recensioni lunghe, ma le schede sono piu' piccole e
   le righe quattro: qui il messaggio e' la quantita', non la singola frase.
   Sul telefono diventano sei righe piu' corte, perche' in verticale lo spazio
   c'e' e quattro righe lunghissime scorrerebbero per sempre.
   ---------------------------------------------------------------------- */

.atelier-dicono {
    overflow: hidden;
    width: 100%;
    padding: 90px 0;
    font-family: 'Lato', Arial, sans-serif;
}
.dm-title {
    text-align: center;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 900;
    color: var(--mo-ivory);
    margin: 0 0 12px;
    padding: 0 24px;
}
.dm-subtitle {
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    color: var(--mo-stone);
    margin: 0 0 52px;
    padding: 0 24px;
}
.dm-subtitle strong {
    font-weight: 700;
    color: var(--mo-shirt);
}

.dm-track-wrap {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.dm-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: dm-scorri 118s linear infinite;
}
.dm-track.reverse {
    animation-name: dm-scorri-inverso;
}
@media (hover: hover) and (pointer: fine) {
    .atelier-dicono:hover .dm-track {
        animation-play-state: paused;
    }
}
@media (prefers-reduced-motion: reduce) {
    .dm-track { animation: none; }
    .dm-track-wrap { overflow-x: auto; }
}
@keyframes dm-scorri {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes dm-scorri-inverso {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.dm-row-gap { height: 24px; }

.dm-card {
    flex: 0 0 auto;
    width: 340px;
    background: var(--mo-card);
    border: 1px solid rgba(var(--mo-shirt-rgb), .18);
    border-radius: 6px;
    padding: 26px 24px;
}
.dm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.dm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mo-terracotta), var(--mo-shirt));
    color: var(--mo-ivory);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.dm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dm-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--mo-ivory);
    line-height: 1.3;
}
.dm-stars {
    color: #F0C24B;
    text-shadow: 0 0 8px rgba(240, 194, 75, .5);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.dm-quote {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 300;
    color: rgba(242, 238, 232, .88);
}
.dm-quote strong {
    font-weight: 700;
    color: var(--mo-shirt);
}

.dm-cta-wrap { --mo-cta-gap: 56px; }

.dm-righe-mobile { display: none; }
@media (max-width: 720px) {
    .dm-righe-desktop { display: none; }
    .dm-righe-mobile { display: block; }
}
@media (max-width: 560px) {
    .atelier-dicono { padding: 68px 0; }
    .dm-subtitle { margin-bottom: 34px; }
    .dm-card { width: 240px; padding: 18px 18px; }
    .dm-quote { font-size: 13px; }
    .dm-row-gap { height: 14px; }
    .dm-track { gap: 14px; }
}


/* -------------------------------------------------------------------------
   8-bis. La testa dell'anteprima della galleria

   La griglia e il pulsante li disegna galleria.css, che e' condiviso con la
   pagina della galleria e con MOSAIKO: qui c'e' solo la riga che la presenta.
   Serve, e non e' decorazione — poche schermate piu' su ci sono le fotografie
   degli studenti, e senza una riga che lo dica queste sembrerebbero altre
   loro. Il salto e' proprio il punto: quelle sono di chi ha fatto il percorso,
   queste di chi lo tiene.
   ---------------------------------------------------------------------- */

.atelier-galleria {
    padding-top: 100px;
}
.ag-testa {
    /* piu' larga della testa delle altre sezioni: qui sotto non c'e' un
       paragrafo da tenere stretto, c'e' solo il titolo, e gli serve spazio per
       stare su una riga sola */
    max-width: 1060px;
    margin: 0 auto 54px;
    padding: 0 24px;
    text-align: center;
    font-family: 'Lato', Arial, sans-serif;
}
.ag-eyebrow {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 16px;
}
.ag-title:last-child {
    margin-bottom: 0;
}
.ag-title {
    /* "Entra nella visione di Maria Giulia Costanzo" e' lungo: perche' stia su
       una riga sola serve un numero piu' alto di quello della sezione degli
       studenti. */
    --ag-fit: 24;
    font-size: clamp(25px, min(3.6vw, calc((100vw - 48px) / var(--ag-fit))), 44px);
    font-weight: 900;
    line-height: 1.15;
    color: var(--mo-ivory);
    margin: 0 0 18px;
    text-wrap: balance;
}
/* Come nella sezione degli studenti: cambia il colore, non il carattere. Di
   Lato il corsivo non c'e' in casa, e chiederlo qui lo farebbe inventare al
   browser. */
.ag-title em {
    font-style: normal;
    color: var(--mo-shirt);
}
.ag-intro {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.7;
    font-weight: 300;
    color: var(--mo-stone);
    margin: 0;
    text-wrap: pretty;
}

@media (max-width: 560px) {
    .atelier-galleria { padding-top: 72px; }
    .ag-testa { margin-bottom: 40px; padding: 0 18px; }
}


/* -------------------------------------------------------------------------
   9. La lettera
   ---------------------------------------------------------------------- */

.atelier-lettera {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.lt-inner {
    max-width: 680px;
    margin: 0 auto;
}

/* il "foglio" sopraelevato */
.lt-paper {
    background: linear-gradient(180deg, #211C18 0%, #1B1714 100%);
    border: 1px solid rgba(var(--mo-shirt-rgb), 0.14);
    border-radius: 10px;
    padding: 72px 64px;
    box-shadow:
            0 40px 90px -30px rgba(0, 0, 0, 0.75),
            0 12px 30px -12px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(0, 0, 0, 0.3);
}

.lt-portrait {
    width: 112px;
    height: 112px;
    margin: 0 auto 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--mo-ink);
    box-shadow: 0 0 0 1.5px var(--mo-shirt);
    background: linear-gradient(135deg, var(--mo-terracotta), var(--mo-shirt-cupo));

    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.lt-portrait.is-visible { opacity: 1; transform: scale(1); }
.lt-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lt-meta {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.9s ease 0.1s, transform 0.9s ease 0.1s;
}
.lt-meta.is-visible { opacity: 1; transform: translateY(0); }
.lt-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 999px;
    background: rgba(var(--mo-shirt-rgb), 0.1);
    border: 1px solid rgba(var(--mo-shirt-rgb), 0.35);
    font-size: 13px;
    color: var(--mo-stone);
}
.lt-meta-pill strong {
    color: var(--mo-ivory);
    font-weight: 700;
}
.lt-meta-dot {
    color: var(--mo-shirt);
}

.lt-salutation {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--mo-ivory);
    margin: 0 0 40px 0;

    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
}
.lt-salutation.is-visible { opacity: 1; transform: translateY(0); }

/* i passaggi chiave sono sottolineati da una banda calda dietro al testo */
.lt-salutation strong,
.lt-body strong {
    font-weight: 700;
    color: var(--mo-shirt);
    background-repeat: no-repeat;
    padding: 0 2px;
}
.lt-salutation strong {
    font-weight: 900;
    background-image: linear-gradient(120deg, rgba(var(--mo-shirt-rgb), 0.28) 0%, rgba(var(--mo-shirt-rgb), 0.28) 100%);
    background-size: 100% 40%;
    background-position: 0 88%;
}
.lt-body strong {
    background-image: linear-gradient(120deg, rgba(var(--mo-shirt-rgb), 0.22) 0%, rgba(var(--mo-shirt-rgb), 0.22) 100%);
    background-size: 100% 38%;
    background-position: 0 86%;
}

.lt-body p {
    font-size: 16.5px;
    line-height: 1.85;
    font-weight: 300;
    color: var(--mo-stone);
    margin: 0 0 26px 0;

    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.lt-body p.is-visible { opacity: 1; transform: translateY(0); }

/* citazioni estratte, centrate */
.lt-body /* Lo screenshot del messaggio dentro la lettera.
   Uno solo, e con aria intorno: e' un oggetto diverso da tutto il resto della
   pagina, e deve sembrarlo. Nessun bordo colorato, nessun riquadro che lo
   incornici — piu' lo si veste da elemento del sito, meno sembra un messaggio
   vero. */
/* I messaggi stanno dentro la lettera, non la interrompono: larghi meno di
   metà della colonna di testo, cosi' si leggono come un inciso e non come un
   cartellone. Il testo dentro allo screenshot resta comunque leggibile. */
.lt-dm {
    margin: 34px auto;
    max-width: 400px;
    text-align: center;
}
.lt-dm img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .5);
}
/* due messaggi vicini: restano attaccati, come nella chat da cui vengono */
.lt-dm-coppia img + img {
    margin-top: 10px;
}
.lt-dm figcaption {
    margin-top: 12px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--mo-stone);
}

@media (max-width: 520px) {
    .lt-dm { max-width: 86%; margin: 28px auto; }
}

/* Scritta come `.lt-body p.lt-pullquote` e non come `.lt-pullquote` e basta:
   il corpo della lettera ha una regola `.lt-body p` che, valendo piu' di una
   classe sola, vinceva su queste righe — e le frasi estratte restavano
   grandi e leggere come tutte le altre. Da qui l'`!important` sul margine, che
   qualcuno aveva gia' dovuto mettere per la stessa ragione. */
.lt-body p.lt-pullquote {
    text-align: center;
    font-size: clamp(21px, 2.6vw, 26px);
    line-height: 1.4;
    font-weight: 900;
    color: var(--mo-shirt);
    margin: 44px 0 !important;
    padding: 0 12px;
}

/* La domanda che apre la lettera sta dieci pixel sopra l'altra frase
   centrata: e' quella che il lettore si sta gia' facendo, e va vista prima
   ancora di essere letta. */
.lt-body p.lt-pullquote-forte {
    font-size: clamp(31px, 3.6vw, 36px);
}

.lt-signature {
    font-style: italic;
    color: var(--mo-shirt);
    font-size: 16.5px;
    margin-top: 44px;

    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.lt-signature.is-visible { opacity: 1; transform: translateY(0); }

.lt-cta-wrap {
    /* qui la CTA respira anche sotto, non solo sopra */
    --mo-cta-gap: 56px;
    margin-bottom: 56px;

    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.lt-cta-wrap.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 480px) {
    .atelier-lettera { padding: 72px 18px; }
    .lt-paper { padding: 44px 26px; }
    .lt-body p { font-size: 15.5px; }
    .lt-meta-pill {
        font-size: 11px;
        padding: 7px 14px;
        gap: 5px;
        white-space: nowrap;
    }
}


/* -------------------------------------------------------------------------
   10. Il numero grande — quando aprono le porte
   ---------------------------------------------------------------------- */

.atelier-scarsita {
    position: relative;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
    overflow: hidden;
}

/* ---------- foto di sfondo, in parallasse ---------- */
.sc-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.sc-bg-photo img {
    position: absolute;
    top: -8%;
    left: 0;
    width: 100%;
    height: 116%;
    object-fit: cover;
    object-position: center 20%;
    opacity: 0.4;
    filter: grayscale(30%);
    will-change: transform;
}
.sc-bg-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
            radial-gradient(ellipse 70% 60% at 50% 30%, transparent 0%, var(--mo-ink) 75%),
            linear-gradient(0deg, var(--mo-ink) 0%, transparent 25%, transparent 75%, var(--mo-ink) 100%);
}

.sc-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* alone caldo dietro al numero */
.sc-glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 420px;
    background: radial-gradient(ellipse at center, rgba(var(--mo-shirt-rgb), 0.25) 0%, rgba(var(--mo-shirt-rgb), 0.08) 45%, transparent 75%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

.sc-eyebrow {
    position: relative;
    z-index: 1;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mo-stone);
    font-weight: 700;
    margin-bottom: 28px;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.sc-eyebrow.is-visible { opacity: 1; transform: translateY(0); }

.sc-number {
    position: relative;
    z-index: 1;
    font-size: clamp(160px, 24vw, 260px);
    font-weight: 900;
    line-height: 1;
    color: var(--mo-shirt);
    text-shadow: 0 0 50px rgba(var(--mo-shirt-rgb), 0.4);
    margin-bottom: 8px;

    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1s ease 0.1s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.sc-number.is-visible { opacity: 1; transform: scale(1); }

.sc-number-label {
    position: relative;
    z-index: 1;
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 900;
    color: var(--mo-ivory);
    margin-bottom: 40px;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
}
.sc-number-label.is-visible { opacity: 1; transform: translateY(0); }

.sc-text {
    position: relative;
    z-index: 1;
    font-size: 16.5px;
    line-height: 1.8;
    font-weight: 300;
    color: var(--mo-stone);
    margin: 0 auto 20px;
    max-width: 56ch;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.sc-text.is-visible { opacity: 1; transform: translateY(0); }
.sc-text strong {
    font-weight: 700;
    color: var(--mo-ivory);
}

/* la prima frase non sfuma: si scopre da sinistra a destra */
.sc-wipe-wrap {
    overflow: hidden;
}
.sc-text.sc-reveal-wipe {
    opacity: 1;
    transform: none;
    font-size: 19px;
    font-weight: 400;
    color: var(--mo-ivory);
    clip-path: inset(0 100% 0 0);
    transition: none;
}
.sc-wipe-wrap.is-visible .sc-text.sc-reveal-wipe {
    clip-path: inset(0 0% 0 0);
    transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.sc-cta-wrap {
    --mo-cta-gap: 40px;
    position: relative;
    z-index: 1;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.sc-cta-wrap.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 480px) {
    .atelier-scarsita { padding: 72px 18px; }
}


/* -------------------------------------------------------------------------
   11. Domande frequenti
   ---------------------------------------------------------------------- */

.atelier-faq {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.fq-inner {
    max-width: 820px;
    margin: 0 auto;
}
.fq-eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 18px;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fq-eyebrow.is-visible { opacity: 1; transform: translateY(0); }

.fq-title {
    text-align: center;
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 900;
    color: var(--mo-ivory);
    margin: 0 0 64px 0;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s ease 0.1s, transform 0.9s ease 0.1s;
}
.fq-title.is-visible { opacity: 1; transform: translateY(0); }

.fq-list {
    display: flex;
    flex-direction: column;
}
.fq-item {
    position: relative;
    max-width: 100%;
    border-bottom: 1px solid rgba(var(--mo-shirt-rgb), 0.18);

    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fq-item.is-visible { opacity: 1; transform: translateY(0); }
.fq-item:first-child { border-top: 1px solid rgba(var(--mo-shirt-rgb), 0.18); }

.fq-num {
    position: absolute;
    top: 22px;
    right: 4px;
    font-size: 44px;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--mo-shirt-rgb), 0.22);
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

/* lo sfondo del bottone del tema va neutralizzato: qui resta solo
   la striscia terracotta che appare a sinistra */
.fq-question {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 26px 60px 26px 20px;
    background: transparent !important;
    border: none;
    border-left: 3px solid transparent;
    text-align: left;
    white-space: normal !important;
    cursor: pointer;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.4s ease;
}
.fq-question:hover,
.fq-question:focus,
.fq-question:active,
.fq-question:focus-visible {
    background: transparent !important;
    outline: none;
    box-shadow: none;
}
.fq-question:hover,
.fq-item.open .fq-question {
    border-left-color: var(--mo-terracotta);
}

/* riflesso di luce che attraversa la domanda al passaggio del mouse */
.fq-question-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    background-image: linear-gradient(
            100deg,
            var(--mo-ivory) 0%, var(--mo-ivory) 35%,
            #FFFFFF 50%,
            var(--mo-ivory) 65%, var(--mo-ivory) 100%
    );
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 0.9s ease;
}
.fq-question:hover .fq-question-text {
    background-position: 0% 0;
}
.fq-item.open .fq-question-text {
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #D68A4C;
}

.fq-icon {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--mo-shirt);
}
.fq-icon::before,
.fq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--mo-shirt);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.fq-icon::before {
    width: 12px;
    height: 1.5px;
    transform: translate(-50%, -50%);
}
.fq-icon::after {
    width: 1.5px;
    height: 12px;
    transform: translate(-50%, -50%);
}
.fq-item.open .fq-icon::before {
    transform: translate(-50%, -50%) rotate(180deg);
}
.fq-item.open .fq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

/* apertura fluida via grid-template-rows: nessun JS a misurare le altezze */
.fq-answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.fq-item.open .fq-answer-wrap {
    grid-template-rows: 1fr;
}
.fq-answer-inner {
    overflow: hidden;
}
.fq-answer {
    padding: 0 60px 28px 20px;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 300;
    color: var(--mo-stone);
    margin: 0;
}
/* il rimando fuori pagina, sotto la risposta: stessa misura del testo, ma
   colorato e con la freccina che dice che si apre altrove */
.fq-answer-link {
    margin: -14px 0 0;
    padding: 0 60px 28px 20px;
    font-size: 15px;
    line-height: 1.75;
}
.fq-answer-link a {
    color: var(--mo-shirt);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--mo-shirt-rgb), .35);
    padding-bottom: 1px;
    transition: border-color .35s ease;
}
.fq-answer-link a span { margin-left: 5px; font-size: .9em; }
.fq-answer-link a:hover,
.fq-answer-link a:focus-visible { border-bottom-color: var(--mo-shirt); }

@media (max-width: 560px) {
    .atelier-faq { padding: 72px 18px; }
    .fq-num { display: none; }
    .fq-question { padding: 22px 44px 22px 16px; font-size: 15.5px; }
    .fq-answer { padding: 0 44px 24px 16px; font-size: 14.5px; }
}


/* -------------------------------------------------------------------------
   12. Copertina
   -------------------------------------------------------------------------
   Stesse misure e stessi tempi della copertina di MOSAIKO, ma non la stessa
   scena: là c'è una fotografia a tutto schermo con un velo sopra, qui un fondo
   scuro disegnato dal CSS. Il codice è qui e non copiato da là, per una
   ragione in più: su MOSAIKO le lettere
   del titolo si accendono col JavaScript, e partono da opacità 0 — se lo script
   non arriva, la copertina resta muta. Qui ogni lettera si porta dietro il
   proprio numero (--i) e il ritardo lo calcola il CSS.
   ---------------------------------------------------------------------- */

.atelier-hero {
    /* la copertina è leggermente più scura del resto della pagina */
    --mo-ink: #12100F;

    /* Larghezza in em di tutto il titolo scritto di fila, spaziature comprese:
       "ATELIER" in Lato con la sua aria (5,15) + lo stacco fra le due parole
       (0,46) + "MOSAIKO" in Bespoke Stencil con la sua (5,66). L'11,9 tiene un
       margine per il carattere di ripiego, che è più largo di quello vero.
       È il numero che impedisce al titolo di uscire dallo schermo sui telefoni
       stretti. Cambiando le parole del titolo va rimisurato. */
    --at-fit: 12.2;

    position: relative;
    /* esce dal contenitore del tema e occupa tutta la larghezza */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
    background: var(--mo-ink);
}
/* 100vh sul telefono conta anche la barra degli indirizzi, che sparisce appena
   si scorre: la copertina resterebbe più alta dello schermo. */
@supports (height: 100svh) {
    .atelier-hero { height: 100svh; }
}

/* ---------- il fondo ----------
   Non è una fotografia: è nero caldo con una schiaritura antracite dietro al
   titolo. Sta in due strati, e la divisione non è capricciosa — è quella che
   permette al fondo di muoversi senza costare niente.

   Qui sotto, fermo, c'è il fondo vero: quasi nero, che scurisce verso il basso.

   Vale zero byte scaricati: prima questa fascia costava la foto più grande
   della pagina, ed era anche precaricata. */
.at-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, #15120F 0%, #100E0C 56%, #0A0908 100%);
}

/* ---------- l'alone che si muove ----------
   Le due schiariture: una larga, centrata poco sopra la metà — è lei che stacca
   il titolo dal fondo, al posto del velo che c'era sulla fotografia — e dentro
   di lei una seconda più stretta e appena più chiara. Due luci sfalsate danno
   profondità; una sola sembra una macchia.

   Il movimento è fatto di due cose che scorrono su tempi diversi: la deriva
   (uno spostamento e un ingrandimento minimi) su 41 secondi, la luce (quanto
   l'alone è acceso) su 26. Non essendo l'uno multiplo dell'altro, la
   combinazione non torna mai uguale per una decina di minuti: l'occhio non
   riconosce un ciclo, e il fondo sembra vivo invece che in loop. È la
   differenza fra un respiro e un difetto dello schermo.

   Perché uno strato a parte: si animano solo trasformazione e opacità, le due
   cose che la scheda grafica sa fare da sola senza ridisegnare nulla. Animare
   direttamente i gradienti costringerebbe il browser a ricalcolare la
   sfumatura a ogni fotogramma, e sui portatili si sentirebbe la ventola.

   L'ingrandimento parte da 1.06 e non da 1: serve un margine più largo dello
   spostamento (1,2%), altrimenti nel punto estremo si vedrebbe entrare il bordo
   dello strato. */
.at-fondo::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(115% 85% at 50% 36%,
            #2F2B27 0%,
            rgba(47, 43, 39, .52) 30%,
            rgba(20, 18, 16, 0) 64%),
        radial-gradient(64% 46% at 50% 27%,
            rgba(84, 76, 68, .40) 0%,
            rgba(84, 76, 68, 0) 72%);
    will-change: transform, opacity;
    animation:
        at-fondo-deriva 41s ease-in-out infinite alternate,
        at-fondo-luce   26s ease-in-out infinite alternate;
}
@keyframes at-fondo-deriva {
    from { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
    to   { transform: scale(1.14) translate3d( 1.2%,  0.9%, 0); }
}
@keyframes at-fondo-luce {
    from { opacity: .80; }
    to   { opacity: 1; }
}

/* Una grana finissima sopra il fondo.
   Serve a una cosa sola: su una sfumatura scura e ampia gli schermi a 8 bit non
   hanno abbastanza sfumature intermedie e la disegnano a fasce concentriche
   (banding). Un pulviscolo irregolare rompe le fasce e la sfumatura torna
   continua. È anche ciò che fa sembrare stampato un fondo scuro, invece che
   riempito col secchiello.

   È un'immagine SVG generata dal browser e scritta qui dentro: non è un file da
   scaricare, non è una richiesta di rete, e pesa meno di trecento caratteri. */
.at-fondo::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

.at-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* il fondo più alto degli altri lati alza di poco tutto il blocco: fa
       spazio all'invito a scorrere senza spostare la copertina dal centro */
    padding: 64px 24px 108px;
    font-family: 'Lato', Arial, sans-serif;
}

/* ---------- l'invito a scorrere ----------
   Compare per ultimo, quando la copertina ha finito di comporsi: prima sarebbe
   un invito ad andarsene da qualcosa che non si è ancora visto.

   Il blocco è ancorato ai due lati e centrato lì dentro, non spostato indietro
   di metà della propria larghezza come si fa di solito. È una trappola che vale
   la pena conoscere: un elemento ha una sola trasformazione, e se la si spende
   per centrarlo, la prima animazione che ne applica un'altra la cancella. Era
   esattamente questo a spostare la scritta a destra del centro — l'animazione
   di entrata, che è un piccolo scivolamento verso l'alto, le portava via la
   centratura. Così invece la trasformazione resta libera e niente può più
   scentrarla. */
.at-scorri {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    pointer-events: none;
    opacity: 0;
    animation: at-entra 1.4s 3s cubic-bezier(.2, .7, .3, 1) forwards;
}
.at-scorri-testo {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 9.5px;
    letter-spacing: .3em;
    /* il rientro ricompensa la spaziatura, che lascia aria dopo l'ultima
       lettera: senza, la scritta risulterebbe spostata a sinistra del filo */
    text-indent: .3em;
    text-transform: uppercase;
    color: rgba(242, 238, 232, .5);
    text-shadow: 0 2px 20px rgba(18, 16, 15, .9);
}

/* Il filo è una guida ferma e appena visibile; quello che si muove è una luce
   che la percorre dall'alto verso il basso e si spegne in fondo, per
   ricominciare da capo. Prima scendeva e poi risaliva, e un movimento che
   torna indietro dice "qui si oscilla", non "di là si va giù". */
.at-scorri-linea {
    position: relative;
    width: 1px;
    height: 46px;
    overflow: hidden;
    background: rgba(242, 238, 232, .13);
}
.at-scorri-linea::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 18px;
    background: linear-gradient(180deg, rgba(var(--mo-shirt-rgb), 0), var(--mo-shirt));
    animation: at-scorri-cenno 2.4s cubic-bezier(.55, 0, .45, 1) infinite;
}
@keyframes at-scorri-cenno {
    0%   { transform: translateY(-100%); opacity: 0; }
    22%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { transform: translateY(46px);  opacity: 0; }
}
/* stessa corsa, traguardo più corto: sul telefono il filo è più basso */
@keyframes at-scorri-cenno-corto {
    0%   { transform: translateY(-100%); opacity: 0; }
    22%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { transform: translateY(36px);  opacity: 0; }
}

/* Lo stesso invito, dentro il flusso della pagina invece che appeso in fondo
   allo schermo. Non ha bisogno di comparire in ritardo — lì serviva ad
   aspettare che la copertina finisse di comporsi, qui si arriva scorrendo e
   c'è già. */
.at-scorri-sezione {
    position: static;
    margin: 74px auto 0;
    opacity: 1;
    animation: none;
}

/* La frase sopra il video dei LAB: un filo più piccola di quella sotto la
   copertina, perché lì apre una sezione e qui chiude quella che si sta
   leggendo. */
.lb-video-frase {
    margin-top: 46px;
    font-size: clamp(17px, 1.7vw, 26px);
}

/* Anche la scia della freccia che invita a scorrere, qui, e' celeste: sta
   dentro la sezione dei LAB, e un filo anguria in mezzo al blocco freddo
   salterebbe all'occhio proprio dove non serve. Sulla copertina resta
   anguria. */
.atelier-lab .at-scorri-linea::after {
    background: linear-gradient(180deg, rgba(var(--mo-celeste-rgb), 0), var(--mo-celeste));
}

/* Il video dei LAB: l'ombra che lo stacca dalla pagina, il fondo che si vede
   prima che il file arrivi e il pulsante di riproduzione seguono lo stesso
   celeste delle tre schede sopra. Il riquadro e' condiviso con tutti gli altri
   video della pagina — queste righe valgono solo dentro .atelier-lab, altrove
   .vt-player resta anguria com'era. */
.atelier-lab .vt-player {
    background: linear-gradient(150deg, #0B1114 0%, #1B3641 60%, var(--mo-celeste-cupo) 100%);
    box-shadow: 0 0 0 0 rgba(var(--mo-celeste-cupo-rgb), 0);
}
.atelier-lab .vt-player:hover {
    box-shadow: 0 18px 36px -16px rgba(var(--mo-celeste-cupo-rgb), .55);
}
.atelier-lab .vt-player:hover .vt-play-btn {
    background: rgba(var(--mo-celeste-cupo-rgb), .6);
}

/* La nota che chiude la sezione.
   Più stretta del resto e nel peso leggero: dopo tre schede e un video è una
   voce che si abbassa, non un'altra cosa da guardare. Il filo anguria sopra
   serve a separarla dal video senza tirare una riga per tutta la larghezza. */
.lb-nota {
    max-width: 700px;
    margin: 52px auto 0;
    text-align: center;
    font-family: 'Lato', Arial, sans-serif;
}
.lb-nota::before {
    content: '';
    display: block;
    width: 34px;
    height: 1px;
    margin: 0 auto 30px;
    background: var(--mo-celeste);
    opacity: .8;
}
.lb-nota p {
    margin: 0;
    font-size: clamp(15.5px, 1.35vw, 18px);
    line-height: 1.72;
    font-weight: 300;
    color: rgba(242, 238, 232, .78);
    text-wrap: pretty;
}
.lb-nota p + p {
    margin-top: 18px;
}
/* Le parole in evidenza vanno nel peso pieno e nell'avorio pieno, come nel
   payoff della copertina: qui intorno è tutto leggero e smorzato, e il salto si
   vede a colpo d'occhio prima ancora di leggere. */
.lb-nota strong {
    font-weight: 700;
    color: var(--mo-ivory);
}

@keyframes at-entra {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.at-firma {
    font-weight: 600;
    font-size: clamp(11px, .82vw, 15px);
    letter-spacing: .26em;
    /* il rientro ricompensa la spaziatura dell'ultima lettera, che altrimenti
       spinge la riga a sinistra del centro */
    text-indent: .26em;
    text-transform: uppercase;
    line-height: 1.4;
    color: rgba(242, 238, 232, .72);
    margin: 0 0 34px;
    text-shadow: 0 2px 20px rgba(18, 16, 15, .9);
    opacity: 0;
    animation: at-entra 1.1s .15s cubic-bezier(.2, .7, .3, 1) forwards;
}

/* Il titolo sta su una riga sola: due parole, due caratteri, lo stesso corpo.
   nowrap perché il punto è proprio che non vada mai a capo — se lo schermo si
   stringe scende la misura, non si spezza la riga. */
.at-name {
    align-self: center;
    position: relative;
    font-weight: 400;
    white-space: nowrap;
    /* la parte centrale del clamp è la misura che tiene il titolo dentro lo
       schermo: la larghezza disponibile divisa per --at-fit */
    font-size: clamp(26px, min(7.6vw, calc((100vw - 56px) / var(--at-fit, 11.9))), 100px);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--mo-ivory);
    margin: 0;
    text-shadow: 0 2px 34px rgba(18, 16, 15, .85);
}

/* ---------- la luce che passa dietro al titolo ----------
   L'alone del fondo è l'ambiente, questo è l'accento: una luce calda, larga
   quanto il titolo e più alta di lui, che gli scorre dietro da sinistra a
   destra e ritorno. Passandogli sotto ne accende le lettere una zona per volta.

   Sta attaccata al titolo (::before dell'h1) e non al fondo, così segue il
   titolo dovunque vada: quando sul telefono le parole si impilano e il blocco
   diventa alto e stretto, la luce cambia forma con lui senza che le si debba
   dire niente. I bordi negativi la fanno debordare oltre le lettere — una luce
   che finisse esattamente dove finisce il testo si vedrebbe che è un rettangolo.

   Corre in 4,75 secondi da un capo all'altro: quattro volte più veloce di come
   era nata, e con l'escursione quasi raddoppiata (±26% invece di ±15%) e il
   doppio di intensità. A questa velocità non è più un respiro, è un faro che
   passa — si vede, ed è quello che deve fare.

   Il numero resta scelto in modo da non essere in rapporto semplice con i 41 e
   i 26 secondi del fondo: le tre cose non tornano mai in fase insieme, e il
   movimento non si legge come un ciclo che si ripete.

   Se dovesse risultare troppo, il valore da abbassare è l'opacità del primo
   colore qui sotto (.24), non la velocità: è lei che decide quanto si vede. */
.at-name::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
    top: -70%;
    bottom: -70%;
    pointer-events: none;
    background: radial-gradient(closest-side ellipse at 50% 50%,
        rgba(228, 206, 188, .24) 0%,
        rgba(var(--mo-copper-rgb), .13) 40%,
        rgba(var(--mo-copper-rgb), 0) 74%);
    will-change: transform, opacity;
    animation: at-luce-passa 4.75s ease-in-out infinite alternate;
}
@keyframes at-luce-passa {
    from { transform: translateX(-26%) scale(.86); opacity: .42; }
    to   { transform: translateX( 26%) scale(1.16); opacity: 1; }
}

/* ---------- la prima parola: ATELIER ----------
   Carattere di testo, non da titoli: è la differenza che fa leggere due cose
   invece di una parola sola. Lato nel peso più leggero, maiuscolo, con l'aria
   fra le lettere che gli dà il passo lento di un'insegna.

   Stessa misura del nome, non più piccola: i due caratteri hanno praticamente
   la stessa altezza delle maiuscole, quindi allo stesso corpo le due parole
   risultano alte uguali. È questo che tiene ordinata la riga.

   Lo stacco fra le due parole è .28em di margine più i .18em di spaziatura che
   avanzano dopo la R: in tutto poco meno di mezzo quadratone, cioè circa due
   spazi normali. Uno solo le farebbe leggere come una parola sola. */
.at-apertura {
    display: inline-block;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 300;
    letter-spacing: .18em;
    margin-right: .28em;
    color: rgba(242, 238, 232, .88);
    opacity: 0;
    animation: at-entra 1.1s .25s cubic-bezier(.2, .7, .3, 1) forwards;
}

/* ---------- la seconda parola: MOSAIKO ----------
   La spaziatura è .11em e non .08: più aria fra le lettere alleggerisce la
   parola senza cambiare carattere — è l'unica leva vera finché nel tema c'è
   solo il peso Regular di Bespoke Stencil, che è già il più leggero dei tre
   installati.

   Il rientro ricompensa la spaziatura, che lascia aria dopo l'ultima lettera:
   senza, la parola risulterebbe spostata a sinistra dentro il suo ingombro. */
.at-riga {
    display: inline-block;
    font-family: var(--fb);
    letter-spacing: .11em;
    text-indent: .11em;
}
/* Le stesse misure di MOSAIKO: si parte 300ms dopo la firma e ogni lettera
   entra 130ms dopo la precedente, salendo di 18px in un secondo. */
.at-lettera {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    animation: at-lettera 1s cubic-bezier(.2, .7, .3, 1) forwards;
    animation-delay: calc(300ms + var(--i, 0) * 130ms);
}
/* senza `from`, il punto di partenza è lo stato scritto qui sopra */
@keyframes at-lettera {
    to { opacity: 1; transform: translateY(0); }
}

/* Il payoff, su una riga sola.
   Il resto della frase sta nel peso leggero, le due parole che contano nel peso
   pieno e nell'avorio pieno: il salto si vede a colpo d'occhio, prima ancora di
   leggere.

   Sta su una riga per lo stesso motivo per cui ci sta il titolo, e con lo stesso
   trucco: la parte centrale del clamp è la larghezza disponibile divisa per
   --at-sub-fit, cioè quante volte l'altezza del carattere entra nella frase
   scritta di fila (le 61 lettere di questo payoff, coi due pesi mescolati,
   misurano circa 26 volte — il 27 tiene un margine). Quando lo schermo si
   stringe è il carattere a scendere, non la frase a spezzarsi.

   Se un giorno cambi il payoff, quel numero va rifatto: parole in più lo
   alzano, parole in meno lo abbassano. Sbagliarlo non rompe niente — al
   massimo la frase torna ad andare a capo.

   Sotto i 768px la riga sola non è più possibile senza scendere a una misura
   da didascalia: là torna su due righe, ed è giusto così (vedi in fondo). */
.at-sub {
    --at-sub-fit: 27;

    font-weight: 300;
    font-size: clamp(17px, min(2.05vw, calc((100vw - 56px) / var(--at-sub-fit, 27))), 34px);
    letter-spacing: .01em;
    line-height: 1.45;
    color: rgba(242, 238, 232, .78);
    max-width: 100%;
    margin: 34px 0 0;
    text-shadow: 0 2px 22px rgba(18, 16, 15, .9);
    opacity: 0;
    animation: at-entra 1.2s 2.1s cubic-bezier(.2, .7, .3, 1) forwards;
}
.at-sub strong {
    font-weight: 700;
    color: var(--mo-ivory);
}

/* Sotto il payoff c'era la riga dei numeri del percorso (5 mesi · 6 masterclass
   · …). È stata tolta: la copertina dice il nome, che cosa ci si guadagna e
   dove si bussa, e basta. I numeri restano più in basso nella pagina, dove chi
   li cerca li trova con il resto.
   Il bottone di conseguenza sale: entra dov'era la riga dei numeri, e la
   copertina finisce di comporsi tre decimi di secondo prima. */
.at-cta-wrap {
    margin-top: 46px;
    opacity: 0;
    animation: at-entra 1.2s 2.4s cubic-bezier(.2, .7, .3, 1) forwards;
}
/* la copertina ha un bottone tutto suo: maiuscolo, spaziato, senza riempimento */
.atelier-hero a.at-cta {
    display: inline-block;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(11px, .82vw, 14px);
    letter-spacing: .22em;
    text-indent: .22em;
    text-transform: uppercase;
    line-height: 1;
    padding: 22px 40px;
    border: 1px solid rgba(var(--mo-shirt-rgb), .75);
    border-radius: 0;
    text-decoration: none !important;
    color: var(--mo-ivory) !important;
    background: transparent;
    text-wrap: balance;
    transition: background .6s ease, border-color .6s ease, color .6s ease;
}
.atelier-hero a.at-cta:hover,
.atelier-hero a.at-cta:focus {
    background: var(--mo-shirt);
    border-color: var(--mo-shirt);
    color: #FFFFFF !important;
}
.atelier-hero a.at-cta:focus-visible {
    outline: 1px solid var(--mo-ivory);
    outline-offset: 6px;
}

@media (max-width: 767px) {
    .at-content { padding: 40px 22px 92px; }
    .at-scorri { bottom: 22px; }
    .at-scorri-linea { height: 36px; }
    .at-scorri-linea::after { animation-name: at-scorri-cenno-corto; }
    .at-firma {
        font-size: 10px;
        letter-spacing: .18em;
        text-indent: .18em;
        margin-bottom: 22px;
    }
    /* ---------- il titolo, sul telefono ----------
       Qui le due parole si impilano. Su una riga sola ci starebbero, ma a una
       misura più piccola del payoff: il nome del percorso peserebbe meno della
       frase che lo spiega, ed è il contrario di quello che deve succedere in
       una copertina.

       Impilate, la misura torna a essere tarata sulla parola più lunga
       (--at-fit 5,6 = "MOSAIKO" con la sua spaziatura) e ATELIER si allarga
       fino a toccarne i due lati: le lettere diventano voci di una riga
       flessibile e space-between distribuisce fra loro tutto lo spazio che
       avanza. Così i due lati combaciano da soli, a qualsiasi larghezza.
       L'1,1% di rientro ricompensa la spaziatura del nome, che lascia aria
       fuori dalla prima e dall'ultima lettera. */
    .at-name {
        --at-fit: 5.6;
        white-space: normal;
        font-size: clamp(33px, min(12.6vw, calc((100vw - 44px) / var(--at-fit, 5.6))), 72px);
    }
    .at-apertura {
        display: flex;
        justify-content: space-between;
        padding: 0 1.1%;
        margin: 0 0 .16em;
        font-size: .78em;
        letter-spacing: normal;
    }
    .at-riga {
        display: block;
        letter-spacing: .06em;
        text-indent: .06em;
    }
    /* sul telefono la riga sola non ci sta: due righe piene, bilanciate */
    .at-sub  { font-size: 19px; max-width: 24ch; margin-top: 26px; text-wrap: balance; }
    .at-cta-wrap { margin-top: 30px; }
    .atelier-hero a.at-cta {
        font-size: 10px;
        padding: 16px 20px;
        letter-spacing: .12em;
        text-indent: .12em;
    }
}

/* Chi ha chiesto meno movimento lo ha chiesto sul serio: l'alone si ferma nel
   suo punto di partenza, e il testo compare senza scivolare. */
@media (prefers-reduced-motion: reduce) {
    .at-scorri-linea::after { animation: none; opacity: .85; }
    .at-cta-wrap .at-conto-vivo::before {
        animation: none;
        transform: none;
        opacity: 1;
    }
    .at-fondo::before,
    .at-name::before {
        animation: none;
        transform: none;
        opacity: 1;
    }

    .at-firma,
    .at-scorri,
    .at-apertura,
    .at-lettera,
    .at-sub,
    .at-cta-wrap {
        opacity: 1;
        transform: none;
        animation: none;
    }
}


/* -------------------------------------------------------------------------
   13. Le metafore degli studenti
   -------------------------------------------------------------------------
   Una alla volta, dentro una vetrina che scorre in orizzontale.

   Erano otto riquadri affiancati: da lontano si leggevano come "otto
   recensioni", e nessuna di quelle immagini arrivava. Sono immagini — un
   uragano che ripulisce, un bruco che diventa farfalla, una casa da
   ristrutturare — e un'immagine ha bisogno di stare da sola per un momento.

   Il meccanismo è del browser, non di uno script: un contenitore che scorre e
   si aggancia alla citazione più vicina (scroll-snap). Col dito, col trackpad
   e con le frecce della tastiera funziona da solo; le frecce e i pallini
   disegnati sono un'aggiunta. Se il JavaScript non arriva, non si perde né una
   citazione né il modo di raggiungerla.
   ---------------------------------------------------------------------- */

.atelier-metafore {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 110px 24px;
}
.mtf-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.mtf-eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 18px;
}
/* Il titolo è quattro parole, non una riga di spiegazione: può stare più
   grande di prima senza affollare niente, e alla misura di prima sarebbe
   sembrato una didascalia rimasta lì per sbaglio. */
.mtf-title {
    text-align: center;
    font-size: clamp(30px, 4.2vw, 54px);
    font-weight: 900;
    line-height: 1.1;
    color: var(--mo-ivory);
    margin: 0 auto 60px;
    max-width: 880px;
    text-wrap: balance;
}

/* ---------- la vetrina ---------- */
.mtf-vetrina {
    position: relative;
    max-width: 900px;
    margin: 0 auto;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity .9s ease, transform .9s ease;
}
.mtf-vetrina.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mtf-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* la barra di scorrimento sotto una citazione la farebbe sembrare un
       riquadro di testo troppo piccolo per il suo contenuto */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mtf-track::-webkit-scrollbar { display: none; }
.mtf-track:focus-visible {
    outline: 1px solid rgba(var(--mo-shirt-rgb), .6);
    outline-offset: 10px;
}

/* Tutte le citazioni sono alte uguali, non ognuna alta quanto il suo testo:
   scorrendo, altrimenti, le frecce e i pallini salterebbero su e giù. È il
   contenitore flessibile a pareggiarle da solo; il minimo serve perché la
   citazione da una riga non lasci la vetrina schiacciata. */
.mtf-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-height: 320px;
    margin: 0;
    padding: 0 clamp(10px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Le virgolette aperte, grandi, nel serif del sito. Non sono decorazione: sono
   il segno che dice "qui parla qualcun altro" prima ancora che si legga il
   nome sotto. L'altezza ridotta serve perché il glifo occupa solo la parte
   alta della sua riga: lasciandogliela tutta si aprirebbe un buco sotto. */
.mtf-slide::before {
    content: '\201C';
    display: block;
    font-family: var(--fs);
    font-size: clamp(62px, 7.5vw, 108px);
    line-height: 1;
    height: .46em;
    color: var(--mo-shirt);
    opacity: .48;
}

/* La citazione è nel serif in corsivo, e il corsivo qui è vero: di Playfair
   c'è il file del corsivo, di Lato no — e un corsivo finto, che il browser
   fabbrica inclinando il tondo, a questa misura si vede.

   La misura cambia con la lunghezza (la classe la mette il PHP): una frase
   breve si scrive grande perché è un colpo, un ragionamento lungo si scrive
   più piccolo perché va letto. Serve anche a un fatto pratico — le citazioni
   sono tutte alte uguali, quindi senza questo la più lunga gonfierebbe la
   vetrina per tutte le altre. */
.mtf-quote {
    margin: 22px 0 0;
    font-family: var(--fs);
    font-style: italic;
    font-weight: 400;
    color: var(--mo-ivory);
    text-wrap: pretty;
}
.mtf-quote-corta {
    max-width: 620px;
    font-size: clamp(24px, 3vw, 44px);
    line-height: 1.35;
}
.mtf-quote-media {
    max-width: 660px;
    font-size: clamp(20px, 2.15vw, 32px);
    line-height: 1.48;
}
.mtf-quote-lunga {
    max-width: 740px;
    font-size: clamp(17px, 1.55vw, 23px);
    line-height: 1.62;
}

.mtf-name {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 32px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mo-stone);
}
.mtf-name::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--mo-shirt);
    opacity: .75;
}

/* ---------- frecce e pallini ---------- */
.mtf-comandi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 40px;
}
.mtf-freccia {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(var(--mo-shirt-rgb), .45);
    background: transparent;
    cursor: pointer;
    transition: border-color .4s ease, background .4s ease, opacity .4s ease;
}
.mtf-freccia::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-left: 1px solid var(--mo-ivory);
    border-bottom: 1px solid var(--mo-ivory);
}
.mtf-prec::before { transform: translate(-35%, -50%) rotate(45deg); }
.mtf-succ::before { transform: translate(-65%, -50%) rotate(-135deg); }
.mtf-freccia:hover,
.mtf-freccia:focus-visible {
    border-color: var(--mo-shirt);
    background: rgba(var(--mo-shirt-rgb), .14);
}
/* La freccia che non porta da nessuna parte resta al suo posto invece di
   sparire: se sparisse, i pallini si sposterebbero di lato a ogni estremo. */
.mtf-freccia[disabled] {
    opacity: .25;
    cursor: default;
    background: transparent;
}

.mtf-punti {
    display: flex;
    align-items: center;
    gap: 9px;
}
.mtf-punto {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: rgba(242, 238, 232, .22);
    cursor: pointer;
    transition: background .4s ease, transform .4s ease;
}
.mtf-punto.attivo {
    background: var(--mo-shirt);
    transform: scale(1.3);
}

@media (max-width: 900px) {
    .mtf-slide { min-height: 300px; }
}
@media (max-width: 620px) {
    .atelier-metafore { padding: 76px 20px; }
    .mtf-slide { min-height: 260px; padding: 0 4px; }
    .mtf-quote { margin-top: 16px; }
    .mtf-quote-corta { font-size: 23px; }
    .mtf-quote-media { font-size: 19px; }
    .mtf-quote-lunga { font-size: 16.5px; line-height: 1.6; }
    .mtf-name  { margin-top: 26px; font-size: 10.5px; letter-spacing: .18em; }
    .mtf-comandi { gap: 16px; margin-top: 32px; }
    .mtf-freccia { width: 40px; height: 40px; }
}

/* Chi ha chiesto meno movimento: la vetrina salta alla citazione invece di
   scorrerci dentro. */
@media (prefers-reduced-motion: reduce) {
    .mtf-track { scroll-behavior: auto; }
}


/* -------------------------------------------------------------------------
   14. Come si sviluppa il percorso
   -------------------------------------------------------------------------
   Due binari orizzontali, uno sopra l'altro: sopra le nove tappe di lezione,
   sotto i nove passi del progetto fotografico. Si muovono insieme, e questo è
   il punto: il progetto non viene dopo le lezioni, cresce accanto a loro.

   Sotto i binari due riquadri affiancati raccontano la tappa scelta — la
   lezione a sinistra, il progetto a destra. Le diciotto lastre stanno tutte in
   pagina sovrapposte, ma quelle non scelte hanno display:none: è la ragione
   per cui la sezione mostra diciotto fotografie e ne scarica due. Un'immagine
   "lazy" dentro un elemento senza ingombro il browser non la chiede affatto.

   I due binari si distinguono per colore e non se ne è inventato uno nuovo:
   l'anguria della pagina alle lezioni, la pietra al progetto. Un terzo colore
   qui avrebbe litigato con il celeste dei LAB, che comincia subito sotto.
   ---------------------------------------------------------------------- */

.atelier-struttura {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.st-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.st-eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mo-shirt);
    font-weight: 700;
    margin-bottom: 18px;
}
.st-title {
    text-align: center;
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 900;
    color: var(--mo-ivory);
    margin: 0 0 20px 0;
}
.st-intro {
    max-width: 760px;
    margin: 0 auto 54px;
    text-align: center;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 300;
    color: var(--mo-ivory);
    opacity: .82;
}
.st-intro strong { font-weight: 700; color: var(--mo-shirt); }

/* ---------- i due binari ---------- */
.st-percorso {
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin-bottom: 44px;
}
/* Come le altre sezioni della pagina: si alzano quando entrano nello schermo.
   La classe la mette il JavaScript; senza, le mette comunque tutte subito. */
.st-percorso,
.st-pannelli {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .9s ease, transform .9s ease;
}
.st-percorso.is-visible,
.st-pannelli.is-visible { opacity: 1; transform: translateY(0); }
/* il colore del binario: da qui in giù si scrive var(--st-c) e basta */
.st-rail          { --st-c: var(--mo-shirt); }
.st-rail-progetto { --st-c: var(--mo-stone); }

.st-rail-testa {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.st-rail-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--st-c);
    flex: 0 0 auto;
}
.st-rail-nome {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mo-ivory);
    opacity: .86;
}
.st-rail-nota {
    font-size: 13.5px;
    font-weight: 300;
    color: var(--mo-stone);
}

/* i comandi stanno solo sul primo binario: muovono tutti e due */
.st-comandi {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
}
.st-conta {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mo-stone);
}
.st-conta b { font-weight: 700; color: var(--mo-ivory); }

.st-punti {
    display: flex;
    align-items: center;
    gap: 9px;
}
.st-punto {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: rgba(242, 238, 232, .22);
    cursor: pointer;
    transition: background .4s ease, transform .4s ease;
}
.st-punto.attivo {
    background: var(--mo-shirt);
    transform: scale(1.4);
}

.st-freccia {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(var(--mo-shirt-rgb), .45);
    background: transparent;
    cursor: pointer;
    transition: border-color .4s ease, background .4s ease, opacity .4s ease;
}
.st-freccia + .st-freccia { margin-left: -8px; }
.st-freccia::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-left: 1px solid var(--mo-ivory);
    border-bottom: 1px solid var(--mo-ivory);
}
.st-prec::before { transform: translate(-35%, -50%) rotate(45deg); }
.st-succ::before { transform: translate(-65%, -50%) rotate(-135deg); }
.st-freccia:hover,
.st-freccia:focus-visible {
    border-color: var(--mo-shirt);
    background: rgba(var(--mo-shirt-rgb), .14);
}
/* la freccia che non porta da nessuna parte resta al suo posto invece di
   sparire: se sparisse, i pallini si sposterebbero a ogni estremo */
.st-freccia[disabled] {
    opacity: .25;
    cursor: default;
    background: transparent;
}

/* ---------- la linea con le nove tappe ---------- */
.st-linea {
    position: relative;
    display: flex;
    align-items: flex-start;
}
/* la linea grigia sotto tutte le tappe, e quella colorata che la ricopre fino
   al punto in cui siamo. Partono e finiscono al centro del primo e dell'ultimo
   pallino — 5.55% è mezza tappa su nove */
.st-linea-fondo,
.st-linea-piena {
    position: absolute;
    top: 6px;
    left: 5.55%;
    height: 1px;
    pointer-events: none;
}
.st-linea-fondo {
    right: 5.55%;
    background: rgba(242, 238, 232, .13);
}
.st-linea-piena {
    width: 0;
    background: var(--st-c);
    transition: width .55s cubic-bezier(.4, 0, .2, 1);
}

.st-tappa {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 0 5px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: center;
    opacity: .45;
    transition: opacity .45s ease;
}
.st-tappa:hover { opacity: .85; }
.st-tappa.is-attiva { opacity: 1; }
.st-tappa:focus-visible {
    outline: 1px solid var(--st-c);
    outline-offset: 4px;
    border-radius: 4px;
}

/* La sfocatura delle tappe lontane, come nel modello: a fuoco c'è solo quella
   che si sta guardando, le altre si allontanano man mano. Serve a dire con
   l'occhio quello che il testo dice a parole — sei qui, il resto è prima o
   dopo — e a non far leggere nove titoli tutti insieme.

   La quantità la decide la distanza, e la scrive il JavaScript mettendo una
   classe: st-d1 la tappa accanto, st-d2 quella dopo, st-d3 tutte le altre.
   Si sfocano il numero e il nome, non il pallino: la linea delle tappe deve
   restare una linea netta, o sembra un difetto dello schermo.

   Al passaggio del mouse e col cursore da tastiera la sfocatura sparisce:
   si deve poter leggere dove si sta per andare senza doverci andare. */
.st-tappa-num,
.st-tappa-testo {
    transition: filter .45s ease, color .45s ease, opacity .45s ease;
}
.st-tappa.st-d1 .st-tappa-num,
.st-tappa.st-d1 .st-tappa-testo { filter: blur(1.7px); }
.st-tappa.st-d2 .st-tappa-num,
.st-tappa.st-d2 .st-tappa-testo { filter: blur(2.7px); }
.st-tappa.st-d3 .st-tappa-num,
.st-tappa.st-d3 .st-tappa-testo { filter: blur(3.8px); }

.st-tappa:hover .st-tappa-num,
.st-tappa:hover .st-tappa-testo,
.st-tappa:focus-visible .st-tappa-num,
.st-tappa:focus-visible .st-tappa-testo { filter: none; }
.st-tappa-punto {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(242, 238, 232, .22);
    background: var(--mo-ink);
    transition: background .45s ease, border-color .45s ease;
}
/* le tappe già passate hanno il bordo acceso, quella scelta è piena */
.st-tappa.is-fatta .st-tappa-punto { border-color: var(--st-c); }
.st-tappa.is-attiva .st-tappa-punto {
    background: var(--st-c);
    border-color: var(--st-c);
}
.st-tappa-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mo-stone);
    transition: color .45s ease;
}
.st-tappa.is-attiva .st-tappa-num { color: var(--st-c); }
.st-tappa-testo {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--mo-ivory);
    opacity: .88;
}
.st-tappa.is-attiva .st-tappa-testo { font-weight: 700; opacity: 1; }

/* Una tappa in cui quel lato non c'è: resta il pallino e basta. La posizione
   va tenuta comunque, o i due binari smettono di essere paralleli e il
   disegno perde il suo senso — è il caso del progetto fotografico al primo
   incontro, che non è ancora cominciato. */
.st-tappa-vuota { cursor: default; }
.st-tappa-vuota .st-tappa-punto { opacity: .45; }

/* più si è lontani, più si sbiadisce: la sfocatura da sola non basta a dire
   quanto una tappa è distante da quella aperta */
.st-tappa.st-d1 { opacity: .52; }
.st-tappa.st-d2 { opacity: .44; }
.st-tappa.st-d3 { opacity: .36; }

/* ---------- i due riquadri della tappa scelta ---------- */
/* minmax(0, 1fr) e non 1fr: il riquadro ha un'altezza minima e delle
   proporzioni fisse, e il browser ne ricava una larghezza minima — 280px per
   16/10 fanno 448px. Con 1fr la colonna la rispettava e il riquadro usciva
   dal margine, fino a toccare il bordo dello schermo o a essere tagliato. */
.st-pannelli {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
}
/* Alla prima tappa il progetto non è ancora cominciato: il suo riquadro non
   c'è, e la lezione si prende tutta la riga invece di lasciare metà pagina
   vuota. Il tetto in altezza serve lì: a tutta larghezza, un riquadro 16/10
   sarebbe alto settecento pixel e la didascalia finirebbe fuori schermo. */
.st-pannello.is-spento { display: none; }
.st-pannelli.is-solo { grid-template-columns: minmax(0, 1fr); }
.st-pannelli.is-solo .st-quadro { max-height: min(62vh, 540px); }
.st-pannello          { --st-c: var(--mo-shirt); }
.st-pannello-progetto { --st-c: var(--mo-stone); }

.st-pannello-testa {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--st-c);
}
.st-trattino {
    width: 22px;
    height: 1px;
    background: var(--st-c);
}

.st-quadro {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 280px;
    border: 1px solid rgba(var(--mo-shirt-rgb), .18);
    border-radius: 8px;
    background: var(--mo-card);
    overflow: hidden;
}

/* Nascosta con display:none e non con la sola trasparenza: è così che le foto
   delle tappe non scelte non vengono scaricate. */
.st-lastra {
    display: none;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
}
/* pronta = già in pagina e già scaricata, ma ancora invisibile: è la tappa
   successiva, che si prepara mentre si guarda quella di adesso */
.st-lastra.is-pronta { display: block; }
.st-lastra.is-attiva { display: block; opacity: 1; }

.st-lastra-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Il riquadro e' piu' largo che alto e le fotografie no: qualcosa va
       tagliato. Tagliando dal basso si tengono i visi e la luce in alto,
       che e' dove succede la cosa; centrando si perdevano le teste. */
    object-position: top;
}
.st-lastra-testo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 96px 26px 24px;
    background: linear-gradient(to top,
        rgba(17, 14, 16, .97) 0%,
        rgba(17, 14, 16, .88) 36%,
        rgba(17, 14, 16, .42) 68%,
        rgba(17, 14, 16, 0) 100%);
}
.st-lastra-occhiello {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--st-c);
    margin-bottom: 9px;
}
.st-lastra-titolo {
    margin: 0 0 9px;
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--mo-ivory);
}
.st-lastra-desc {
    margin: 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 300;
    color: var(--mo-ivory);
    opacity: .82;
}

@media (prefers-reduced-motion: reduce) {
    .st-lastra,
    .st-linea-piena,
    .st-tappa-num,
    .st-tappa-testo { transition: none; }
}

@media (max-width: 900px) {
    /* due riquadri affiancati diventerebbero due francobolli: uno sotto l'altro */
    .st-pannelli { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .st-quadro { aspect-ratio: 4 / 3; }
}

@media (max-width: 760px) {
    .atelier-struttura { padding: 76px 20px; }
    .st-intro { font-size: 16px; margin-bottom: 42px; }

    /* I comandi scendono sotto il nome del binario e si allargano: in fila
       accanto al titolo, su uno schermo stretto, finirebbero fuori. */
    .st-comandi {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }
    .st-conta { font-size: 11px; }

    /* Nove tappe in nove colonne su un telefono sono nove parole di due
       lettere: il binario diventa scorrevole, e il JavaScript porta in vista
       quella scelta. La linea sparisce perché una linea sotto un nastro che
       scorre racconterebbe una lunghezza che non è quella vera. */
    .st-linea {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .st-linea::-webkit-scrollbar { display: none; }
    .st-linea-fondo,
    .st-linea-piena { display: none; }
    .st-tappa {
        flex: 0 0 122px;
        scroll-snap-align: center;
    }
    /* Sul telefono il riquadro diventa verticale. Orizzontale era alto 280px,
       e titolo e descrizione ne coprivano da 200 a 250: della fotografia
       restava una striscia. In 3/4 il testo occupa la metà bassa e la foto,
       allineata in alto dove stanno i visi, si vede. */
    /* Il tetto serve dai 600px in su — tablet, telefono girato: lì il 3/4
       farebbe un riquadro più alto dello schermo. Sui telefoni tenuti dritti
       non scatta: a 390px il riquadro è alto 467. */
    .st-quadro { aspect-ratio: 3 / 4; max-height: min(540px, 72vh); }
    .st-lastra-testo { padding: 56px 20px 20px; }
    .st-lastra-desc { font-size: 14.5px; }
    /* l'etichetta rossa sopra il titolo della foto: sul telefono la foto è
       piccola, e titolo e descrizione bastano a riempirla */
    .st-lastra-occhiello { display: none; }
}


/* -------------------------------------------------------------------------
   15. I LAB con le professioniste ospiti
   ---------------------------------------------------------------------- */

.atelier-lab {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 0 24px 100px;
}
/* Un filo più larga delle altre sezioni, che stanno a 1180px.
   È l'unica eccezione della pagina, e ha una ragione: qui il contenuto sono tre
   fotografie affiancate, e ottanta pixel in più le fanno respirare senza che
   nessun altro blocco se ne accorga. I testi restano stretti come prima — è la
   riga sotto, .lb-intro, a tenerli a 780px. */
.lb-inner {
    max-width: 1260px;
    margin: 0 auto;
}
/* La riga piccola sopra il titolo, come nelle altre sezioni della pagina — ma
   celeste, perche' annuncia il blocco delle ospiti. */
.lb-eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mo-celeste);
    font-weight: 700;
    margin-bottom: 16px;
}

.lb-title {
    text-align: center;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 900;
    color: var(--mo-ivory);
    margin: 0 0 20px 0;
}
.lb-intro {
    max-width: 780px;
    margin: 0 auto 56px;
    text-align: center;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 300;
    color: var(--mo-ivory);
    opacity: .82;
}
.lb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* L'a capo scritto a mano nell'introduzione vale finché la riga ci sta intera.
   Sotto i 720px il testo va già a capo da sé più volte, e quel salto in più
   lascerebbe una riga monca in mezzo al paragrafo. */
@media (max-width: 720px) {
    .lb-intro br { display: none; }
}
.lb-card {
    background: var(--mo-card);
    border: 1px solid rgba(var(--mo-celeste-cupo-rgb), 0.24);
    border-radius: 8px;
    /* il riempimento è passato a .lb-card-body: la foto deve arrivare fino ai
       bordi, e overflow lo fa seguire gli angoli arrotondati della card */
    overflow: hidden;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity .9s ease,
                transform .9s ease,
                border-color .5s ease,
                background-color .5s ease,
                box-shadow .5s ease;
}
.lb-card.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- al passaggio del mouse ----------
   La scheda si accende, non si muove. Alzarla di qualche pixel sarebbe la cosa
   ovvia, ma quello stesso spostamento è già usato per farla comparire quando
   entra nello schermo: il movimento del mouse erediterebbe il tempo lento di
   quella comparsa, e invece di rispondere al dito sembrerebbe in ritardo.

   Si accendono quattro cose insieme, tutte di poco: il bordo, il fondo, un
   alone che stacca la scheda dalla pagina e la fotografia, che schiarisce
   appena e cresce del tre per cento. Presa una per una nessuna si nota; tutte
   insieme fanno "questa è viva".

   Un secondo e mezzo per la fotografia contro mezzo secondo per il resto: la
   luce arriva subito, l'immagine si muove dopo e più piano. È quello che
   toglie l'effetto interruttore. */
.lb-card-media img {
    transition: transform 1.5s cubic-bezier(.2, .7, .3, 1), filter .6s ease;
}
.lb-card:hover {
    border-color: rgba(var(--mo-celeste-rgb), .5);
    background-color: #171E22;
    box-shadow: 0 22px 46px -26px rgba(var(--mo-celeste-cupo-rgb), .6);
}
.lb-card:hover .lb-card-media img {
    transform: scale(1.03);
    filter: brightness(1.07) saturate(1.04);
}

/* chi ha chiesto meno movimento riceve la luce, non lo scorrimento della foto */
@media (prefers-reduced-motion: reduce) {
    .lb-card:hover .lb-card-media img { transform: none; }
}

/* La foto di presentazione, nelle proporzioni sue.
   Prima era costretta in un quadrato: un ritaglio comodo quando non si sa che
   cosa arriverà, ma con foto vere in mano è il contrario di quello che serve —
   taglia via una parte dell'inquadratura che qualcuno ha deciso.

   Adesso la forma la detta la fotografia: larghezza piena, altezza libera. Non
   c'è nessun numero scritto qui perché non ce n'è bisogno — WordPress stampa
   larghezza e altezza vere dentro il tag, il browser ne ricava le proporzioni
   prima ancora di scaricare il file, e tiene lo spazio pronto. È il motivo per
   cui la pagina non sobbalza al caricamento.

   Ha una condizione: le tre foto devono avere le stesse proporzioni fra loro.
   Se una fosse verticale e le altre orizzontali, le tre schede partirebbero a
   altezze diverse — in quel caso si torna a una forma fissa, e si sceglie
   quella delle foto invece del quadrato.

   Il fondo colorato resta: si vede nel mezzo secondo prima che l'immagine
   arrivi, ed è meglio di un rettangolo vuoto. */
.lb-card-media {
    position: relative;
    /* freddo come la locandina che sta per arrivarci sopra: mezzo secondo di
       anguria, in mezzo a tre schede celesti, si vedrebbe */
    background: linear-gradient(150deg, #0B1114 0%, #1B3641 60%, var(--mo-celeste-cupo) 100%);
}
.lb-card-media img {
    display: block;
    width: 100%;
    height: auto;
    /* torna utile solo se un giorno si rimettesse una forma fissa: senza una
       forma fissa non ha niente da ritagliare */
    object-fit: cover;
    object-position: var(--lb-focus, 50% 32%);
}

.lb-card-body {
    padding: 26px 26px 30px;
}
.lb-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mo-celeste);
    margin-bottom: 12px;
}
.lb-card-name {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 700;
    color: var(--mo-ivory);
}
.lb-card-role {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 300;
    font-style: italic;
    color: var(--mo-stone);
}
.lb-card-text {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 300;
    color: var(--mo-ivory);
    opacity: .78;
}

@media (max-width: 900px) {
    .lb-grid { grid-template-columns: 1fr; gap: 18px; }
    /* in colonna singola un quadrato a tutta larghezza diventa altissimo e
       spinge il testo fuori schermo: qui la foto si schiaccia in una fascia */
    .lb-card-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
    .atelier-lab { padding: 0 20px 70px; }
    .lb-intro { font-size: 16px; margin-bottom: 40px; }
}


/* -------------------------------------------------------------------------
   16. I motivi per cui non è l'ennesimo corso
   -------------------------------------------------------------------------
   Come i cinque motivi di MOSAIKO, ma senza fotografie: qui il numero fa da
   solo il lavoro visivo che là facevano le immagini.
   ---------------------------------------------------------------------- */

.atelier-motivi {
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', Arial, sans-serif;
    padding: 100px 24px;
}
.mv7-inner {
    max-width: 980px;
    margin: 0 auto;
}
.mv7-title {
    text-align: center;
    font-size: clamp(28px, 3.8vw, 46px);
    font-weight: 900;
    color: var(--mo-ivory);
    margin: 0 auto 56px;
    max-width: 820px;
    text-wrap: balance;
}
.mv7-title em {
    font-style: italic;
    font-weight: 900;
    color: var(--mo-shirt);
}
.mv7-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(var(--mo-shirt-rgb), 0.15);
    border-radius: 8px;
    overflow: hidden;
}
.mv7-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 26px;
    align-items: start;
    background: #1B1815;
    padding: 34px 34px 34px 28px;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.mv7-item.is-visible { opacity: 1; transform: translateY(0); }
.mv7-num {
    font-family: var(--fb);
    font-size: 46px;
    line-height: .9;
    color: var(--mo-shirt);
    opacity: .55;
}
.mv7-item-title {
    margin: 0 0 12px;
    font-size: clamp(18px, 1.8vw, 23px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--mo-ivory);
}
.mv7-item-text p {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.8;
    font-weight: 300;
    color: var(--mo-ivory);
    opacity: .78;
}
.mv7-item-text p:last-child { margin-bottom: 0; }
.mv7-item-text strong { font-weight: 700; color: var(--mo-shirt); opacity: 1; }

@media (max-width: 620px) {
    .atelier-motivi { padding: 70px 20px; }
    .mv7-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 26px 22px;
    }
    .mv7-num { font-size: 34px; }
}