/* ══════════════════════════════════════════════════════════════════════════════
   acinoepoivino.it · «Acino è poi Vino» — il foglio di stile del sito
   «IL QUADERNO DI DEGUSTAZIONE» (REDESIGN.md), con le CORREZIONI FINALI del 29/09 (_ristrutturazione/CORREZIONI.md):
   · la home si apre con la FILA delle copertine (le puntate si vedono appena si apre la pagina);
   · il motivo dei segni è una carta da parati grande (tessera 960 px), tre misure, un colore per fascia,
     e dietro ogni testo e ogni segno grande si spegne (la «macchia» del colore della fascia);
   · niente schede bianche con l'ombra: foto a filo, testo sulla carta, filetti sottili. L'ombra e la carta paglierina
     storta restano solo sulla copertina della puntata (la carta sul tavolo);
   · il numero della puntata ha UN segno solo: il numerale tipografico (granato fino al 01/10; dal 01/10 notte blu notte
     sulla carta e oro sul blu).
   01/10 (tornata «2 Step Modifiche», SPEC-STEP2 D6 «solo oro»): l'oro del pastificio (--oro) è il secondo accento dei segni
   (puntini, linee, filetti, motivo, tralci), gli occhielli sono in bronzo (--bronzo), il piè di pagina resta granato con
   tutto in oro. Il granato resta il colore del vino: titoli, numeri, link, pulsanti, riquadri. [STORIA: superato il 01/10 notte,
   vedi sotto «3 step modifiche»: il granato non c'è più]
   01/10 (correzioni del collaudo dello STEP 2): la stessa regola anche nelle puntate. Etichette maiuscole sulla carta in bronzo
   (titoli di lato, «Condividi», «In breve», indice da telefono), filetti di lato, citazioni e filo di lettura in oro;
   tralcio verticale e grappolo oro come il tralcio corto (genera-segni.py). Il terzo calice del piede torna bianco.
   01/10 (tornata «Modifiche 3», _modifiche-3/SPEC-STEP2 T1): in fondo al piede la frase di trasparenza (.piede-nota).
   01/10 sera (tornata «Modifiche 2-bis», _modifiche-2-bis/SPEC.md, chiesta da Giovanni): il logo «N» di Giovanni accanto al
   nome in alto e nel piede (L); i colori del pastificio BEN VISIBILI (C): blu notte --notte #060b41 con scritte oro e testo
   chiaro su tutte le superfici scure grandi (piè di pagina, riquadro «Da dove vuoi cominciare?» e gli altri riquadri pieni,
   il riquadro del pastificio); i controlli piccoli (pulsanti, gettoni, link, tondini) restano granato [STORIA: superato il 01/10
   notte, ora blu notte], le pagine da leggere restano chiare. Il riquadro del pastificio in home e in «Chi sono» (P, .altro-riquadro).
   01/10 notte (tornata «3 step modifiche», Modifiche/3-step-modifiche-SPEC.md voci 1-3, chiesto da Giovanni in Call 2: «hai visto
   il mio sito che porta dei colori blu, oro… volevo darti quelle tonalità» · «questo sfondo vinaceo mi lascia un po' perplesso» ·
   «un contorno dorato… molto molto lieve… che va a fare contrasto con un blu»): ZERO ROSSO. Il blu notte e l'oro del pastificio
   sono i colori del blog e il blu si vede dal primo schermo: sono FASCE BLU NOTTE l'apertura della home (titolo e fila delle
   copertine), la testata di ogni pagina interna e della puntata, la chiusura della home e il piè di pagina, con i testi chiari, le
   scritte e i numeri in oro e la vite disegnata al tratto in oro, sottile e tenue (motivo-notte.svg e i segni grandi). Sulla carta
   (le pagine da leggere, che restano chiare) gli accenti sono blu notte: la parola evidenziata, i numeri 1ª-8ª, i link, i
   pulsanti, i gettoni scelti; filetti, puntini e barre in oro; occhielli in bronzo. I riquadri blu sulla carta hanno un filo d'oro.
   Il «contesto notte» (sotto i token) ridefinisce inchiostro, testo, accento ed etichetta dentro le fasce blu: i pezzi sono gli
   stessi, cambia solo il colore. Il granato, il rosato e le loro variabili non ci sono più.
   02/10 notte (stessa tornata, controllo visivo): sul blu l'oro tenue è sempre l'oro SCURITO VERSO IL NERO e pieno (--oro-filo,
   --oro-spento, --oro-sotto, --oro-segno; segni e motivo pieni in genera-segni.py), mai l'oro trasparente: sul blu notte, che gli
   è quasi complementare, l'oro trasparente diventava grigio-lilla («violaceo»).
   Punti di rottura: griglia 4 colonne ≥ 1200 · 3 da 768 · 2 sotto · ≤ 940 puntata in una colonna · < 820 telefono.
   Si animano solo transform e opacity (i cambi di colore dei passaggi del mouse: ≤ 120 ms, deroga scritta in CONCEPT.md).
   Con «riduci movimento» tutto è fermo e visibile. Niente backdrop-filter, mix-blend-mode, filter.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────── carattere: Reddit Sans (OFL), servito dal sito ─────────── */
@font-face{font-family:"Reddit Sans";src:url(/assets/fonts/reddit-sans-latino.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Reddit Sans";src:url(/assets/fonts/reddit-sans-latino-esteso.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Reddit Sans";src:url(/assets/fonts/reddit-sans-corsivo-latino.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Reddit Sans";src:url(/assets/fonts/reddit-sans-corsivo-latino-esteso.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ─────────── token ─────────── */
:root{
  /* fondi */
  --carta:#fcf9f4;             /* fondo di tutte le pagine: bianco caldo */
  --foglio:#ffffff;            /* la copertina della puntata, i menu aperti, i gettoni */
  --guardia:#f6eee4;           /* la carta di guardia: il fondo delle foto mentre arrivano e della copertina di riserva */
  --foglio-paglierino:#f5e7c9; /* il foglio storto sotto la copertina */
  /* IL BLU NOTTE (01/10 notte, «3 step modifiche»: il blu del sito del pastificio, voluto da Giovanni in Call 2). È il fondo di
     tutte le fasce scure: apertura della home, testate delle pagine e della puntata, chiusura della home, 404, piè di pagina,
     riquadri pieni. Sopra si scrive in chiaro (16:1) o in oro (8,4:1). Fino al 01/10 sera i titoli, i numeri e i link erano
     granato e tre fondi erano rosati: non ci sono più. */
  /* 02/10 (email di Giovanni, E·2: «il colore può essere anche meno intenso, un po' più tenue»): da #060b41 a un blu più morbido */
  --notte:#253463;
  --notte-2:#2e3e70;           /* un pezzo blu dentro una fascia blu (i gettoni dei filtri, le foto che arrivano) */
  --notte-luce:#3a4c86;        /* il passaggio del mouse sui pulsanti blu notte */
  --chiaro:#f3eee6;            /* il testo da leggere sul blu notte: 16:1 */
  --chiaro-2:#c5c8dc;          /* il testo secondario sul blu notte: 10:1 */
  --chiaro-3:#aab0cc;          /* date e minuti sul blu notte: 7,8:1 */
  --piede:var(--notte);        /* piè di pagina */
  /* inchiostri della carta: blu-nero e grigi blu, niente rosso (16:1 · 7,9:1 · 6:1 sulla carta) */
  --inchiostro-carta:#161a2e;
  --testo-carta:#4a4f63;
  --dati-carta:#5d6176;
  --inchiostro:var(--inchiostro-carta);
  --testo:var(--testo-carta);
  --dati:var(--dati-carta);
  /* L'ORO del pastificio: i filetti, i puntini, le barre e i segni sulla carta (mai testo sulla carta: 2,1:1); sul blu notte è
     il colore delle scritte (8,4:1). Il bronzo è l'oro scurito che si legge sulla carta: occhielli ed etichette (5,1:1). */
  --oro:#d3a85f;
  --oro-chiaro:#e9d4a6;        /* il secondo calice del piede */
  --bronzo:#86651c;
  /* i due colori che cambiano col fondo (il «contesto notte» qui sotto li rimette per le fasce blu) */
  --accento:var(--notte);      /* la parola evidenziata, i numeri 1ª-8ª, i link, i tondini: blu notte sulla carta, oro sul blu */
  --etichetta:var(--bronzo);   /* occhielli ed etichette maiuscole: bronzo sulla carta, oro sul blu */
  --velo-blu:#e8eaf3;          /* il fondo dei contatori nei gettoni */
  /* fili */
  --filo:#ede3d8;
  --filo-forte:#dccdbf;
  --filo-oro:color-mix(in srgb,var(--oro) 45%,#fff);   /* righe e tendine sulla carta */
  /* L'ORO TENUE SUL BLU (02/10, «3 step modifiche», voce 3: «un contorno dorato… molto molto lieve… che va a fare contrasto
     con un blu»). L'oro e il blu notte sono quasi complementari: l'oro TRASPARENTE sul blu si mescola col blu e diventa
     grigio-lilla (misurato: l'oro al 24-40 % su #060b41 dà #393547-#584a4d, tinta 300-350°, cioè proprio il «violaceo» che
     Giovanni non vuole). L'oro tenue sul blu quindi è sempre l'oro SCURITO VERSO IL NERO, pieno: resta oro (tinta 38°), solo
     più spento. Si usa per i fili, le sottolineature e i segni disegnati dentro le fasce e i riquadri blu. */
  --oro-filo:color-mix(in srgb,var(--oro) 52%,#000);    /* #483920 · i fili più leggeri (piè di pagina, separatori) */
  --oro-spento:color-mix(in srgb,var(--oro) 72%,#000);  /* #725a33 · fili, bordi dei gettoni, puntini dei campi */
  --oro-sotto:color-mix(in srgb,var(--oro) 80%,#000);   /* #876b3d · la sottolineatura dei link oro */
  --oro-segno:var(--oro);   /* 02/10 (E·3): «più accentuati i contorni… magari dorato»: oro pieno */   /* #8b6f3f · il grappolo grande dei riquadri blu */
  --filo-notte:var(--oro-spento);   /* il filo d'oro sottile (1 px) dei riquadri blu notte */
  --sottolinea:color-mix(in srgb,var(--notte) 40%,transparent);   /* la sottolineatura dei link blu sulla carta */
  /* ombre: solo sulla copertina della puntata e sui menu aperti; non si animano mai (blu-nero, non più bruno-rossastro) */
  --ombra:0 1px 2px rgba(10,14,40,.05),0 12px 30px -16px rgba(10,14,40,.26);
  --ombra-su:0 2px 4px rgba(10,14,40,.06),0 26px 48px -22px rgba(10,14,40,.34);
  /* raggi */
  --r-copertina:18px; --r-foto:12px; --r-pulsante:10px; --r-gettone:999px; --r-riquadro:14px;
  /* il motivo: una tessera di 960 px, un colore per fondo (l'opacità è già dentro i file, genera-segni.py).
     ?v= come VERSIONE in parti.js quando il file cambia: l'ocra non è cambiato dal 01/10 (?v=6); motivo-notte è nuovo (?v=11) e
     prende il posto del motivo del piede e di quello rosato (in _Archivio/segni-rossi-tolti-01-10-notte-3-step-modifiche/) */
  --motivo-ocra:url(/assets/img/segni/motivo-ocra.svg?v=6) 0 0/960px repeat;
  --motivo-notte:url(/assets/img/segni/motivo-notte.svg?v=11) 480px 0/960px repeat;
  /* il colore della fascia in cui si è: lo usa la «macchia» che spegne il motivo dietro i testi e i segni grandi */
  --fondo:var(--carta);
  /* misure */
  --larghezza:1200px;
  --colonna:918px;             /* la pagina di una puntata (DESIGN-SPEC §7.2) */
  --margine:40px;
  --curva:cubic-bezier(.22,.7,.2,1);
  --carattere:"Reddit Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* il motivo delle fasce blu: SOLO NEI MARGINI, fuori dalla colonna dei testi (1200 px), con 24 px di blu pulito prima della
     colonna e 80 px di sfumatura verso l'esterno. Correzioni del collaudo di «3 step modifiche» (02/10, decisione della sessione
     principale: «il motivo non deve toccare né tagliare testi, numeri o titoli: toglilo dalle zone coi testi e lascialo solo ai
     margini»): prima la maschera era trasparente solo nei 1000 px centrali e a 1440 px il motivo entrava di 100 px nella colonna
     dei testi; e dentro le fasce (apertura della home, chiusura, 404) il motivo stava dietro i testi, spento a metà dalle macchie.
     Sotto 1360 px i margini non ci sono e il motivo non c'è (vedi «tavoletta»): restano i tralci oro. */
  --maschera-lati:linear-gradient(90deg,#000 0,#000 calc(50% - 704px),transparent calc(50% - 624px),transparent calc(50% + 624px),#000 calc(50% + 704px),#000 100%);
}

/* ─────────── il contesto «notte» (01/10 notte, «3 step modifiche») ───────────
   Dentro le fasce e i riquadri blu notte gli stessi pezzi cambiano colore da soli: il testo diventa chiaro, l'accento e le
   etichette oro, i fili oro trasparenti. Dentro le fasce blu, quello che sta su un foglio bianco (i menu dei filtri) o sulla
   carta (la copertina di riserva) torna «carta». */
.apertura,.fascia,.puntata-testa,.fascia-404,.nome,.piede,.scheda-cerca,.fine-archivio,.altro-riquadro{
  --fondo:var(--notte);--inchiostro:var(--chiaro);--testo:var(--chiaro-2);--dati:var(--chiaro-3);
  --accento:var(--oro);--etichetta:var(--oro);
  --filo:var(--oro-filo);--filo-forte:var(--oro-spento);--sottolinea:var(--oro-sotto);
  color:var(--inchiostro)}
.menu-voci,.foto-riserva{
  --fondo:var(--foglio);--inchiostro:var(--inchiostro-carta);--testo:var(--testo-carta);--dati:var(--dati-carta);
  --accento:var(--notte);--etichetta:var(--bronzo);--filo:#ede3d8;--filo-forte:#dccdbf;
  --sottolinea:color-mix(in srgb,var(--notte) 40%,transparent);
  color:var(--inchiostro)}
::selection{background:#ecdcb7;color:#161a2e}

/* ─────────── base ─────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--carta);color:var(--inchiostro);font-family:var(--carattere);font-size:17px;font-weight:450;line-height:1.45;
  font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
picture{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;letter-spacing:inherit}
ol,ul{list-style:none}
h1,h2,h3{font-weight:750;line-height:1.12}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accento);outline-offset:3px;border-radius:6px}
.nascosto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.salta{position:absolute;left:12px;top:12px;z-index:200;background:var(--notte);color:var(--chiaro);padding:10px 14px;border-radius:6px;font-size:15px;font-weight:600;transform:translateY(-90px)}
.salta:focus{transform:none}

.pagina{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow-x:clip}
.pagina > main{flex:1 0 auto;position:relative}
.dentro{width:min(var(--larghezza),100% - 2*var(--margine));margin-inline:auto}
.dentro-puntata{width:min(var(--colonna),100% - 2*var(--margine))}

/* ─────────── la macchia: dietro un testo (o un segno grande) il motivo si spegne ───────────
   Un rettangolo del colore della fascia, sfumato ai bordi, sotto il blocco. Fermo (le maschere non si animano mai). */
.macchia{position:relative;isolation:isolate}
.macchia::before{content:"";position:absolute;z-index:-1;inset:calc(-1 * var(--m,30px));background:var(--fondo);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--m,30px),#000 calc(100% - var(--m,30px)),transparent),linear-gradient(180deg,transparent,#000 var(--m,30px),#000 calc(100% - var(--m,30px)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 var(--m,30px),#000 calc(100% - var(--m,30px)),transparent),linear-gradient(180deg,transparent,#000 var(--m,30px),#000 calc(100% - var(--m,30px)),transparent);
  mask-composite:intersect}

/* ─────────── icone ─────────── */
.ic{width:24px;height:24px;flex:none;fill:none;stroke-width:1.7;overflow:visible}
.icona-orologio{width:14px;height:14px;flex:none;margin-right:5px;vertical-align:-2px}
.freccia{display:inline-block;width:15px;height:11px;flex:none;color:currentColor}
.freccia-indietro{transform:scaleX(-1)}
.chev{width:11px;height:7px;flex:none}

/* ─────────── il numero della puntata: UN segno in tutto il sito, il numerale (blu notte sulla carta, oro sul blu) ─────────── */
.num{display:inline-block;font-weight:800;letter-spacing:-.05em;line-height:.8;color:var(--accento);font-variant-numeric:lining-nums;white-space:nowrap}

/* ─────────── link, pulsante, dati, occhiello ─────────── */
.link{display:inline-flex;align-items:center;gap:8px;color:var(--accento);font-weight:650;font-size:16.5px;line-height:1.3}
.sott{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--sottolinea)}
.link:active .freccia{transform:translateX(3px)}
.link:active .freccia-indietro{transform:translateX(-3px) scaleX(-1)}
@media (hover:hover){
  .link:hover .sott{text-decoration-color:currentColor}
  .link:hover .freccia{transform:translateX(4px)}
  .link:hover .freccia-indietro{transform:translateX(-4px) scaleX(-1)}
}

.pulsante{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:var(--r-pulsante);background:var(--notte);color:var(--chiaro);
  font-size:17px;font-weight:650;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
@media (hover:hover){.pulsante:hover{background:var(--notte-luce)}}
.pulsante:active{transform:translateY(1px)}
.pulsante-chiaro{background:var(--foglio);color:var(--notte);border:1px solid var(--filo-forte)}
@media (hover:hover){.pulsante-chiaro:hover{background:var(--foglio);border-color:var(--notte)}}

.dati{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;line-height:1.35;color:var(--dati);letter-spacing:-.005em}
.dati time,.dati .minuti{white-space:nowrap}
.minuti{display:inline-flex;align-items:center}
.sep{margin:0 7px;color:var(--filo-forte)}
.occhiello{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--etichetta);line-height:1.25}
.ic-occhiello{width:26px;height:26px;stroke-width:2}
.vino{color:var(--accento)}

.gettoni{display:flex;flex-wrap:wrap;gap:8px}
.gettone{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:var(--r-gettone);background:var(--foglio);border:1px solid var(--filo-forte);
  font-size:15px;font-weight:620;line-height:1.1;color:var(--inchiostro);white-space:nowrap;cursor:pointer}
.gettone .conta{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--velo-blu);color:var(--notte);font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums}
.gettone[aria-current="true"],.gettone[data-scelto="true"]{background:var(--notte);border-color:var(--notte);color:#fff}
.gettone[aria-current="true"] .conta{background:rgba(255,255,255,.2);color:#fff}
@media (hover:hover){.gettone:hover{border-color:var(--notte);color:var(--notte)}.gettone[aria-current="true"]:hover,.gettone[data-scelto="true"]:hover{color:#fff}}
.gettone:active{transform:translateY(1px)}

/* la cornice delle foto: l'ingrandimento al passaggio sta sul <picture>, lo scorrimento lento sull'<img> */
.cornice{position:relative;overflow:hidden;background:var(--guardia);isolation:isolate}
.cornice picture,.cornice img{width:100%;height:100%}
.cornice img{object-fit:cover}
/* la copertina di riserva (una puntata senza foto): carta di guardia col motivo ocra, il numero grande e un grappolo, mai un
   buco (01/10 notte: prima rosata) */
.foto-riserva{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:var(--motivo-ocra),var(--guardia);box-shadow:inset 0 0 0 1px var(--filo-oro)}
.num-riserva{font-size:clamp(46px,6vw,92px)}
.ic-riserva{position:absolute;right:10%;bottom:9%;width:30%;height:auto;aspect-ratio:1;color:var(--bronzo);opacity:.45;stroke-width:1.2}

/* ─────────── i segni grandi: interi, su fondo pulito (la macchia spegne il motivo sotto di loro) ─────────── */
.segno-grande{position:absolute;pointer-events:none;user-select:none;z-index:0;isolation:isolate}
.segno-grande::before{content:"";position:absolute;z-index:-1;inset:-22px;background:var(--fondo);
  -webkit-mask-image:radial-gradient(closest-side,#000 76%,transparent);mask-image:radial-gradient(closest-side,#000 76%,transparent)}
.segno-img{display:block;width:100%;height:auto;max-width:none}

/* ─────────── testata ─────────── */
.testata{position:relative;z-index:5;background:var(--carta);border-bottom:1px solid color-mix(in srgb,var(--oro) 55%,transparent)}
.testata-riga{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* il logo «N» di Giovanni (01/10 sera, _modifiche-2-bis L): il suo file, accanto al nome che resta testo, nello stesso link.
   44 px di altezza (38 al telefono, 40 nel piede): mai di più, il file è piccolo (141 × 111) e oltre ~55 px si sgrana sugli
   schermi 2x. Quando arriverà il file grande si cambia solo il PNG. */
.logo{display:inline-flex;align-items:center;gap:12px;font-size:23px;font-weight:750;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.logo-segno{display:block;flex:none;width:auto;max-width:none;height:44px}   /* max-width:none: mai schiacciato da un contenitore stretto */
.menu{display:flex;gap:36px;font-size:15.5px;font-weight:550;color:var(--dati)}
.menu a{position:relative;padding:8px 0}
.menu a[aria-current]{color:var(--notte)}
.menu a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--oro)}
@media (hover:hover){.menu a:hover{color:var(--inchiostro)}.menu a[aria-current]:hover{color:var(--notte)}}
.apri-menu{display:none}
.menu-telefono{display:none}
.linee{display:block;width:16px;height:10px;border-top:1.6px solid currentColor;border-bottom:1.6px solid currentColor}

/* ═════════════ HOME ═════════════ */

/* ① l'apertura È la fila: dal 01/10 notte una FASCIA BLU NOTTE col motivo oro (prima carta di guardia ocra), anche dietro la fila:
   il blu si vede dal primo schermo, come sul sito del pastificio. Titolo chiaro, la seconda riga in oro, i numeri oro */
.apertura{--fondo:var(--notte);position:relative;padding:40px 0 0;background:var(--notte);overflow:hidden}
.apertura .cornice{background:var(--notte-2)}
.apertura-testa{position:relative;z-index:1}
/* il motivo oro sta SOLO nella parte alta e SOLO nei margini (correzioni del collaudo di «3 step modifiche», 02/10): dietro la
   fila le iconcine finivano contro i numeri 1ª-8ª, i titoli e la barra, e accanto al titolo restavano tagliate a metà dalle
   macchie sotto i testi; sembrava un errore di impaginazione. Ora il titolo e la fila delle copertine stanno sul blu pulito, come
   le foto sulle fasce del pastificio, e la vite è il tralcio oro in alto a destra. Il motivo è un livello largo quanto lo schermo
   dietro la testa dell'apertura, visibile solo nei margini fuori dalla colonna (--maschera-lati, da 1360 px) e sfumato negli
   ultimi 80 px in basso, prima della fila. */
.apertura-testa::before{content:"";position:absolute;z-index:-1;top:-40px;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:var(--motivo-notte);pointer-events:none;
  -webkit-mask-image:var(--maschera-lati),linear-gradient(180deg,#000 calc(100% - 80px),transparent);-webkit-mask-composite:source-in;
  mask-image:var(--maschera-lati),linear-gradient(180deg,#000 calc(100% - 80px),transparent);mask-composite:intersect}
.apertura-testo{--m:30px;width:fit-content;max-width:calc(100% - var(--posto-segno,0px))}
.h1{margin-top:14px;font-size:clamp(34px,1.9vw + 25px,54px);line-height:1.03;letter-spacing:-.036em;font-weight:770;text-wrap:balance}
.h1 .vino{display:block}
.cascata-riga .vino{display:inline}
.apertura-riga{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 36px;margin-top:18px}
.intro{font-size:18px;line-height:1.4;color:var(--testo);text-wrap:balance}
/* 02/10 (email di Giovanni, E·1): «Calice & Piatto» col suo sottotitolo «Tra vino, vitigni, cucina e cultura: l’arte dell’abbinamento» */
.apertura .sottotitolo-home{font-size:clamp(19px,1.55vw,23px);line-height:1.35;font-weight:500;max-width:34em}
.azioni{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.segno-apertura{z-index:2;top:18px;right:max(10px,calc((100% - var(--larghezza))/2 - 110px));width:clamp(170px,17vw,250px)}
.segno-apertura .segno-img,.segno-tralcio-testata .segno-img,.segno-corto-testata .segno-img{transform-origin:92% 20%}

/* la fila del viaggio (in home è l'apertura; sulla 404 sta da sola) */
.viaggio{position:relative}
.viaggio-apertura{padding-top:30px}
.viaggio-carta{background:var(--carta);border-top:1px solid var(--filo);padding-top:56px}
.viaggio-testa{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.viaggio-nome{--m:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
.h2-viaggio{font-size:24px;line-height:1.1;letter-spacing:-.022em;font-weight:780}
.viaggio-sotto{font-size:16.5px;line-height:1.35;color:var(--testo);text-wrap:balance}
.fila-comandi{display:flex;align-items:center;gap:10px;flex:none;min-height:48px} /* il posto delle frecce c'è da subito: niente salti */
.tondo{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--foglio);border:1px solid var(--filo-forte);color:var(--accento)}
.apertura .tondo{background:transparent;border-color:var(--oro-sotto)}
.apertura .tondo:disabled{opacity:1;color:var(--oro-spento);border-color:var(--oro-filo)}
.tondo .freccia{width:17px;height:13px}
.tondo:disabled{opacity:.4;cursor:default}
@media (hover:hover){.tondo:not(:disabled):hover{border-color:var(--accento)}}
.tondo:active:not(:disabled){transform:translateY(1px)}

.fila{--bordo:max(var(--margine),calc((100% - var(--larghezza))/2));--passo:24px;position:relative;z-index:1;
  display:flex;gap:var(--passo);margin-top:18px;padding:8px var(--bordo) 6px;scroll-padding-inline:var(--bordo);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.fila::-webkit-scrollbar{display:none}
.fila:focus-visible{outline-offset:-4px}
.tappa{flex:0 0 clamp(236px,18.4vw,270px);scroll-snap-align:start;min-width:0}
.tappa-link{display:flex;flex-direction:column}
/* la rotta: il numero e la data sulla linea tratteggiata che unisce le tappe (linea e tondini in oro; il numero oro sul blu) */
.tappa-testa{--m:10px;position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-bottom:12px}
.tappa-testa::after{content:"";position:absolute;left:0;right:calc(-1 * var(--passo));bottom:0;border-bottom:1.5px dashed color-mix(in srgb,var(--oro) 85%,transparent)}
.tappa:last-child .tappa-testa::after{right:0}
.num-tappa::after{content:"";position:absolute;z-index:1;left:0;bottom:-4.5px;width:10px;height:10px;border-radius:50%;background:var(--oro);box-shadow:0 0 0 4px var(--fondo)}
.num-tappa{font-size:50px;margin-left:-2px}
.tappa-dati{font-size:13.5px;font-weight:550;line-height:1.3;color:var(--dati);white-space:nowrap;padding-bottom:2px}
.tappa-dati .sep{margin:0 5px}
.tappa-foto{margin-top:18px;aspect-ratio:4/5;border-radius:var(--r-foto)}
.tappa-titolo{--m:10px;margin-top:13px;font-size:17px;line-height:1.25;letter-spacing:-.012em;font-weight:720;min-height:2.5em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-wrap:pretty}
.tappa-link:focus-visible{outline:3px solid var(--accento);outline-offset:4px;border-radius:var(--r-foto)}
/* la barra dell'avanzamento, «1ª ─── 8ª» (al posto dei pallini) */
.barra-fila{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-top:20px;padding-bottom:30px;font-size:13px;font-weight:750;color:var(--etichetta)}
.barra-fila .macchia{--m:8px}
.barra{position:relative;flex:1;height:2px;border-radius:2px;background:color-mix(in srgb,var(--oro) 30%,var(--fondo))}
.apertura .barra{background:color-mix(in srgb,var(--chiaro) 16%,var(--notte))}
/* sul blu il motivo oro passava sopra la barra dell'avanzamento (al telefono un grappolo seduto sulla linea): una macchia blu
   sfumata sotto la barra, come dietro i testi (02/10 notte, controllo visivo). Sta sotto la linea: barra-fila ha z-index 1 */
.apertura .barra::after{content:"";position:absolute;z-index:-1;inset:-24px -18px;background:var(--notte);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(180deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.barra i{position:absolute;left:0;top:-1px;height:4px;width:20%;border-radius:4px;background:var(--oro);transform-origin:0 50%}

/* ② tutte le puntate: carta pulita, la griglia (4 · 3 · 2 colonne) */
.tutte{position:relative;padding:96px 0 104px}
.testa-sezione{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.h2{font-size:clamp(34px,1.6vw + 22px,48px);line-height:1.04;letter-spacing:-.03em;font-weight:780;text-wrap:balance}
.sotto-sezione{margin-top:10px;font-size:18px;line-height:1.4;color:var(--testo);text-wrap:balance}
.link-sezione{flex:none;margin-bottom:6px}
.griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:52px 28px;margin-top:40px;align-items:start}
.scheda{position:relative;min-width:0}
.scheda-link{display:flex;flex-direction:column;height:100%}
.scheda-foto{flex:none;aspect-ratio:4/3;border-radius:var(--r-foto)}
.scheda-corpo{margin-top:14px;padding-top:13px;border-top:1.5px solid var(--oro);min-width:0}
.scheda-testa{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.num-scheda{font-size:32px}
.scheda .dati{font-size:13.5px}
.scheda-verso{margin-top:9px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--etichetta)}
.scheda-titolo{margin-top:9px;font-size:19px;line-height:1.24;letter-spacing:-.014em;font-weight:720;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-wrap:pretty;overflow-wrap:break-word}
.scheda-link:focus-visible{outline:3px solid var(--accento);outline-offset:4px;border-radius:var(--r-foto)}

/* il riquadro «Da dove vuoi cominciare?» (e gli altri riquadri pieni: in fondo all'archivio, accanto a una scheda sola, in
   Contatti): BLU NOTTE dal 01/10 sera (_modifiche-2-bis C; prima granato). Titolo, etichette dei campi, segni e collegamento in
   oro (8,4:1), la riga sotto in chiaro (16:1). Dal 01/10 notte («3 step modifiche», voce 3): un FILO D'ORO sottile lungo il bordo
   (1 px, oro al 50 %, come le cornici del pastificio) e il grappolo grande disegnato al tratto in ORO, sottile e tenue (prima una
   filigrana chiara); i gettoni bianchi col testo blu notte (12,9:1; prima granato), al passaggio del mouse oro. */
.scheda-cerca,.fine-archivio{position:relative;isolation:isolate;overflow:hidden;min-width:0;border-radius:var(--r-riquadro);background:var(--notte);color:var(--chiaro)}
.scheda-cerca::after,.fine-archivio::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--filo-notte);pointer-events:none}
.scheda-cerca{display:flex;flex-direction:column;gap:22px;padding:30px 28px 28px}
/* il tratto: l'icona è disegnata su 48 unità e qui è grande 230 px (×4,8), quindi lo spessore si scrive diviso: .28 → 1,35 px
   veri, come i tralci (02/10 notte, controllo visivo: con .75 il grappolo usciva a 3,6 px, pesante, non «poco poco poco») */
.cerca-segno{position:absolute;z-index:-1;right:-34px;top:-26px;width:230px;height:230px;color:var(--oro-segno);stroke-width:.42}
/* quando il riquadro è stretto (sotto 1200 px) il grappolo, più piccolo e più spento, resta nell'angolo in alto a destra e il
   titolo con la riga sotto gli lascia il suo spazio (84 px a destra): il titolo va a capo prima, mai sopra il disegno. Prima
   (01/10 notte) scendeva in basso a destra, ma lì passava dietro «Esplora l'archivio» e l'ultimo gettone: oro su oro, non si
   leggeva (02/10 notte). */
@media (max-width:1199.98px){
  .scheda-cerca{container:cerca / inline-size}
  .scheda-cerca .cerca-testa{padding-right:84px}
  .scheda-cerca .cerca-segno{top:-18px;right:-30px;width:130px;height:130px;color:var(--oro);stroke-width:.75}
}
/* nella colonna stretta della home fra 768 e 1199 px (il riquadro è largo 228-260 px e molto alto) 84 px a destra
   spezzerebbero il titolo in quattro righe: lì il grappolo sta sopra il titolo, nell'angolo, e il titolo scende di 56 px */
@container cerca (max-width:259.98px){
  .scheda-cerca .cerca-testa{padding:56px 0 0}
  .scheda-cerca .cerca-segno{top:-16px;right:-24px;width:118px;height:118px;stroke-width:.8}
}
.cerca-titolo{font-size:26px;font-weight:780;letter-spacing:-.022em;line-height:1.1;max-width:13em;text-wrap:balance;color:var(--oro)}
.cerca-sotto{margin-top:8px;font-size:16px;color:var(--chiaro)}
.cerca-campi{display:flex;flex-direction:column;gap:18px}
.campo-nome{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--oro)}
.campo-nome::after{content:"";flex:1;height:0;border-bottom:1.5px dotted var(--oro-spento);transform:translateY(3px)}
/* al computer il riquadro è largo e il grappolo sta nell'angolo in alto a destra: la riga puntinata sfuma prima del disegno, così
   puntini e acini non si incrociano (02/10 notte, controllo visivo) */
@media (min-width:1200px){.scheda-cerca .campo-nome::after{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 230px),transparent calc(100% - 160px));
  mask-image:linear-gradient(90deg,#000 calc(100% - 230px),transparent calc(100% - 160px))}
  /* …e i gettoni vanno a capo prima del grappolo (correzioni del collaudo di «3 step modifiche», 02/10): nel riquadro largo
     «Malvasia Bianca di Basilicata» finiva sopra gli acini in basso a sinistra del grappolo (misurato a 1200, 1280 e 1440 px) */
  .griglia-home > .scheda-cerca:nth-child(4n+1) .gettoni,.griglia-home > .scheda-cerca:nth-child(4n+2) .gettoni,.cerca-sola .gettoni{padding-right:132px}}
.ic-campo{width:18px;height:18px;stroke-width:2.4;color:var(--oro)}
.campo .gettoni{margin-top:11px}
.gettone-chiaro{background:#fff;border-color:#fff;color:var(--notte)}
/* nel riquadro stretto (una casella sola, 768-1199 px) «Malvasia Bianca di Basilicata» usciva dal bordo e veniva tagliata
   (01/10 sera, collaudo di «Modifiche 2-bis»): un gettone lungo va a capo dentro il riquadro, mai fuori */
.scheda-cerca .gettoni > li{max-width:100%}
.scheda-cerca .gettone-chiaro{max-width:100%;height:auto;min-height:40px;padding-block:8px;white-space:normal;line-height:1.2}
@media (hover:hover){.gettone-chiaro:hover{background:var(--oro);border-color:var(--oro);color:var(--notte)}}
.scheda-cerca .link,.fine-archivio .link{color:var(--oro)}
.scheda-cerca .sott,.fine-archivio .sott{text-decoration-color:var(--oro-sotto)}
@media (hover:hover){.scheda-cerca .link:hover,.fine-archivio .link:hover{color:#fff}}
.cerca-link{margin-top:auto;align-self:flex-start}
.scheda-cerca > .cerca-testa{grid-area:testa}
.scheda-cerca > .cerca-campi{grid-area:campi}
.scheda-cerca > .cerca-link{grid-area:link;align-self:end}
.scheda-cerca :focus-visible,.fine-archivio :focus-visible{outline-color:#fff}

/* ③ la chiusura: una fascia sola su due colonne (più il grappolo appeso al suo tralcio). Dal 01/10 notte BLU NOTTE col motivo
   e il grappolo in oro («questo sfondo vinaceo mi lascia un po' perplesso», Call 2): prima rosata. «poi il vino.» in oro */
.nome{--fondo:var(--notte);position:relative;isolation:isolate;padding:92px 0;background:var(--notte);overflow:hidden}
/* il motivo solo nei margini (correzioni del collaudo di «3 step modifiche», 02/10): prima riempiva la fascia e le iconcine
   stavano accanto a «Chi scrive», sotto l'email o mezze spente dalle macchie dei testi */
.nome::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--motivo-notte);pointer-events:none;-webkit-mask-image:var(--maschera-lati);mask-image:var(--maschera-lati)}
.nome-griglia{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,380px);gap:40px 56px;align-items:center}
.segno-nome{position:relative;width:clamp(150px,15vw,220px)}
.nome-frase{--m:26px}
.ic-acino{display:block;width:48px;height:48px;color:var(--accento);stroke-width:1.8}
.frase{margin-top:14px;font-size:clamp(40px,2.6vw + 24px,66px);line-height:1.02;letter-spacing:-.038em;font-weight:790;text-wrap:balance}
.chi{--m:26px;padding-left:34px;border-left:1px solid var(--oro)}
.chi-occhiello{font-size:12.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--etichetta)}
.chi-nome{margin-top:6px;font-size:26px;font-weight:760;letter-spacing:-.02em;line-height:1.15;color:var(--inchiostro)}
.chi-testo{margin-top:8px;font-size:17px;line-height:1.45;color:var(--testo);text-wrap:pretty}
.chi .link{margin-top:14px}
.chi-domanda{margin-top:22px;padding-top:18px;border-top:1px solid var(--filo-forte)}
.domanda{font-size:17px;font-weight:650;line-height:1.35;letter-spacing:-.01em}
.email{display:inline-block;margin-top:4px;font-size:17px;font-weight:650;color:var(--accento);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:var(--sottolinea);overflow-wrap:anywhere}
@media (hover:hover){.email:hover{text-decoration-color:currentColor}}
.contatto{margin-top:28px}
.ic-contatto{width:40px;height:40px;color:var(--etichetta);stroke-width:1.9}

/* ─────────── il riquadro del pastificio (01/10 sera, _modifiche-2-bis P): «Dai Pastai del Metapontino», l'altro sito di
   Giovanni, in home (dopo la griglia, prima della chiusura) e in «Chi sono» (dopo la firma). Blu notte come il sito del
   pastificio, con una cornice oro sottile dentro il bordo (un'etichetta: così non si confonde col riquadro «Da dove vuoi
   cominciare?», che è un riquadro di scelta). Il segno delle tre spighe è nostro (sprite, genera-segni.py), oro; il nome in
   oro (8,4:1), l'occhiello e la riga in chiaro; il pulsante col bordo oro apre il sito in un'altra scheda. Al computer in
   orizzontale (segno · testi · pulsante), al telefono in colonna.
   Correzioni del collaudo di «Modifiche 2-bis»: in home sembrava il seguito di «Da dove vuoi cominciare?» (stessa larghezza, 72 px
   sotto). Ora è una TARGA a sé: larga quanto la colonna di lettura (918 px, centrata), più aria sopra (104 px, 72 al telefono) e la
   cornice oro più presente (1,5 px al 62 %, prima 1 px al 40 %: sul blu si leggeva appena). ─────────── */
.altro-casa{position:relative;padding:0 0 104px}
.altro-casa .altro-riquadro{max-width:var(--colonna);margin-inline:auto}
.tutte:has(+ .altro-casa){padding-bottom:104px}
.altro-riquadro{position:relative;isolation:isolate;overflow:hidden;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:20px 40px;padding:36px 48px 36px 40px;border-radius:var(--r-riquadro);background:var(--notte);color:var(--chiaro)}
.altro-riquadro::before{content:"";position:absolute;z-index:-1;inset:9px;border:1.5px solid var(--oro-sotto);
  border-radius:calc(var(--r-riquadro) - 6px);pointer-events:none}
.ic-spighe{width:96px;height:96px;margin:-4px 0;color:var(--oro);stroke-width:1.05}
.altro-testi{min-width:0}
.altro-occhiello{font-size:12.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:color-mix(in srgb,var(--chiaro) 78%,transparent)}
.altro-titolo{margin-top:7px;font-size:clamp(26px,1vw + 18px,32px);font-weight:770;letter-spacing:-.024em;line-height:1.08;color:var(--oro);text-wrap:balance}
.altro-descrizione{margin-top:9px;max-width:68ch;font-size:16.5px;line-height:1.45;color:var(--chiaro);text-wrap:pretty}
.altro-pulsante{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border:1.5px solid var(--oro);
  border-radius:var(--r-pulsante);color:var(--oro);font-size:16.5px;font-weight:650;letter-spacing:-.005em;line-height:1.2;white-space:nowrap}
.freccia-fuori{display:block;width:13px;height:13px;flex:none}
@media (hover:hover){.altro-pulsante:hover{background:var(--oro);color:var(--notte)}.altro-pulsante:hover .freccia-fuori{transform:translate(2px,-2px)}}
.altro-pulsante:active{transform:translateY(1px)}
.altro-riquadro :focus-visible{outline-color:#fff}

/* ─────────── piè di pagina: BLU NOTTE col motivo oro (01/10 sera, _modifiche-2-bis C, la prova «A»: i colori del pastificio;
   prima granato), il tralcio oro tutto dentro. Tutto quello che si legge è oro pieno (8,4:1 sul blu notte); al passaggio del
   mouse bianco. Il logo «N» di Giovanni accanto al nome, alto 40 px (L). ─────────── */
.piede{--fondo:var(--piede);--alto-piede:196px;position:relative;overflow:hidden;padding:var(--alto-piede) 0 36px;background:var(--piede);color:var(--oro)}
/* il motivo oro solo in alto, attorno al tralcio, e sfuma prima della prima riga (correzioni del collaudo di «3 step modifiche»,
   02/10): sotto, fra i collegamenti, la firma e la frase di trasparenza, le iconcine restavano a cavallo dei fili o tagliate a
   metà dalle macchie dei testi. Sotto la prima riga il piede è blu pulito. */
.piede::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--alto-piede) - 6px);background:var(--motivo-notte);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent)}
.segno-piede{left:50%;top:10px;width:min(500px,92%);transform:translateX(-50%)}
/* la macchia del tralcio più larga ai lati: un'iconcina del motivo restava mezza spenta accanto alla prima foglia (02/10) */
.segno-piede::before{inset:-26px -64px}
/* sotto la fascia alta il piede non ha più motivo: le macchie dei testi non servono, e quella della prima riga (22 px sopra il
   filo) copriva gli ultimi acini del grappolo del tralcio; senza macchia il grappolo toccava il filo, quindi al computer la
   fascia alta passa da 176 a 196 px: l.ultimo acino resta 18 px sopra il filo (11 al telefono; 02/10) */
.piede .macchia::before{content:none}
.piede .dentro{position:relative;z-index:1}
.piede-riga{--m:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;padding-top:26px;border-top:1px solid var(--oro-spento)}
.piede-logo{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:750;letter-spacing:-.02em;line-height:1.2}
.piede-logo a{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.piede-logo .logo-segno{height:40px}
.calici{display:flex;gap:6px}
.calici .ic{width:18px;height:18px;stroke-width:2.4}
.calici .ic:nth-child(1){color:var(--oro)}         /* 01/10 notte: oro, oro chiaro e bianco (prima paglierino, rosato, bianco) */
.calici .ic:nth-child(2){color:var(--oro-chiaro)}
.calici .ic:nth-child(3){color:#fff}
.piede-link{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px;font-weight:600}
@media (hover:hover){.piede-link a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}}
.firma{margin-top:20px;text-align:right;font-size:14px;font-weight:550}
.firma .macchia{--m:14px;display:inline-block}
.firma a,.piede-altro a{text-decoration:underline;text-decoration-color:var(--oro-sotto);text-underline-offset:3px}
@media (hover:hover){.firma a:hover,.piede-altro a:hover{color:#fff;text-decoration-color:#fff}}
/* l'ultima riga: a sinistra, discreto, l'altro sito di Giovanni (SPEC-STEP2 D8, se c'è); a destra la firma */
.piede-fondo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px;margin-top:20px}
.piede-fondo .firma{margin:0 0 0 auto}
.piede-altro{font-size:14px;font-weight:550;line-height:1.4}
.piede-altro .macchia{--m:14px;display:inline-block}
/* la frase di trasparenza (_modifiche-3 T1, chiesta da Giovanni: il blog non è una testata giornalistica): una riga a sé
   sotto il pastificio e la firma, piccola e discreta, oro pieno come tutto il piede (8,4:1 sul blu notte), larga quanto si legge.
   Righe bilanciate (correzioni del collaudo, 01/10): a 320, 375 e 480 px l'ultima riga era la sola data «7.03.2001.»;
   «pretty» non basta (lascia «del 7.03.2001.» da solo). Dove «balance» non c'è, va a capo come prima. */
.piede-nota{margin-top:22px;padding-top:16px;border-top:1px solid var(--oro-filo)}
.piede-nota p{max-width:78ch;font-size:13.5px;font-weight:450;line-height:1.55;text-wrap:balance}
.piede-nota .macchia{--m:12px;display:inline-block}
.piede :focus-visible{outline-color:#fff}
/* il pulsante «Scrivimi su WhatsApp» (01/10 notte, «3 step modifiche» voce 6): c'è solo se nelle impostazioni c'è il numero.
   Nel piede: bordo e testo oro (8,4:1), al passaggio del mouse fondo oro e testo blu notte, come «Visita il sito» del riquadro
   del pastificio. In Contatti, sulla carta: pieno blu notte col testo chiaro, come i pulsanti del sito (16:1). */
.pulsante-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1.5px solid var(--oro);
  border-radius:var(--r-pulsante);color:var(--oro);font-size:16px;font-weight:650;letter-spacing:-.005em;line-height:1.2;white-space:nowrap}
.pulsante-whatsapp .icona-social{width:18px;height:18px}
@media (hover:hover){.pulsante-whatsapp:hover{background:var(--oro);color:var(--notte)}}
.pulsante-whatsapp:active{transform:translateY(1px)}
.piede-contatto{margin-top:24px}
.whatsapp-riga{margin-top:24px}
.pulsante-whatsapp-carta{min-height:56px;padding:0 26px;background:var(--notte);border-color:var(--notte);color:var(--chiaro);font-size:17px}
@media (hover:hover){.pulsante-whatsapp-carta:hover{background:var(--notte-luce);border-color:var(--notte-luce);color:var(--chiaro)}}

/* ═════════════ LE PAGINE INTERNE ═════════════ */

/* la testata: dal 01/10 notte una FASCIA BLU NOTTE in tutte le pagine interne (I miei racconti, Chi sono, Contatti, Privacy;
   prima carta di guardia, e rosata in Chi sono), il motivo oro solo ai lati, la macchia dietro il testo, il tralcio oro */
.fascia{--fondo:var(--notte);position:relative;isolation:isolate;overflow:hidden;padding:52px 0 64px;background:var(--notte)}
.fascia::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--motivo-notte);pointer-events:none;-webkit-mask-image:var(--maschera-lati);mask-image:var(--maschera-lati)}
.fascia-corta{padding-bottom:56px}
.fascia-dentro{position:relative;z-index:1}
.fascia-testo{--m:26px;max-width:46em}
.h1-pagina{margin-top:16px;font-size:clamp(34px,1.6vw + 22px,50px);line-height:1.05;letter-spacing:-.03em;font-weight:780;max-width:19em;text-wrap:balance}
.fascia .sotto{margin-top:12px;font-size:18px;line-height:1.4;color:var(--testo);max-width:38em;text-wrap:balance}
.segno-tralcio-testata{right:calc((100% - var(--larghezza))/2 - 40px);top:16px;width:180px}
.segno-corto-testata{right:max(12px,calc((100% - var(--larghezza))/2 - 60px));top:16px;width:230px}
.segno-anello-testata{right:8%;top:24px;width:190px;height:190px}   /* dal 02/10 non c'è più: Contatti e Privacy hanno il tralcio */
/* il tralcio corto della puntata e della 404 si vede solo quando la testata è stretta (vedi telefono e ≤ 940 px) */
.segno-corto-puntata,.segno-404{display:none}
.h2-piccolo{font-size:clamp(26px,1vw + 18px,32px);line-height:1.1;letter-spacing:-.022em;font-weight:760;text-wrap:balance}

/* archivio: i filtri su UNA riga dentro la testata, poi subito la griglia */
.fascia-archivio{overflow:visible;z-index:3;padding-top:44px;padding-bottom:24px}
.filtri{position:relative;margin-top:22px}
.filtri-titolo{font-size:12.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--etichetta);display:inline-block;position:relative;isolation:isolate}
.barra-filtri{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:12px}
.filtri-scorre{display:flex;align-items:center;gap:8px}
.menu-filtro > summary{list-style:none}
.menu-filtro > summary::-webkit-details-marker{display:none}
.menu-filtro > summary::marker{content:""}
.gettone-menu .chev{transform:rotate(180deg)}
.menu-filtro[open] > .gettone-menu{border-color:var(--accento)}
/* i gettoni dei filtri sulla testata blu notte (01/10 notte): blu appena più chiaro con un filo d'oro, testo chiaro; scelto = oro
   pieno col testo blu notte (8,4:1). Quelli dentro il menu aperto (foglio bianco) restano come sulla carta */
.filtri-scorre > .gettone,.filtri-scorre > .menu-filtro > .gettone-menu{background:var(--notte-2);border-color:var(--oro-spento);color:var(--chiaro)}
.filtri-scorre > .gettone .conta{background:color-mix(in srgb,var(--chiaro) 14%,var(--notte-2));color:var(--chiaro)}
.filtri-scorre > .gettone[aria-current="true"],.filtri-scorre > .menu-filtro > .gettone-menu[data-scelto="true"]{background:var(--oro);border-color:var(--oro);color:var(--notte)}
.filtri-scorre > .gettone[aria-current="true"] .conta{background:color-mix(in srgb,var(--notte) 16%,var(--oro));color:var(--notte)}
.filtri-scorre > .menu-filtro[open] > .gettone-menu{border-color:var(--oro)}
@media (hover:hover){
  .filtri-scorre > .gettone:hover,.filtri-scorre > .menu-filtro > .gettone-menu:hover{border-color:var(--oro);color:#fff}
  .filtri-scorre > .gettone[aria-current="true"]:hover,.filtri-scorre > .menu-filtro > .gettone-menu[data-scelto="true"]:hover{color:var(--notte)}
}
.menu-filtro[open] > .gettone-menu .chev{transform:none}
.menu-voci{position:absolute;z-index:20;left:0;top:calc(100% + 10px);display:flex;flex-wrap:wrap;gap:8px;width:min(660px,100%);padding:16px;
  border-radius:var(--r-riquadro);background:var(--foglio);border:1px solid var(--filo);box-shadow:var(--ombra-su)}
.elenco-testa{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font-size:15px}
.conteggio{color:var(--testo)}
.conteggio-voce{color:var(--inchiostro);font-weight:650}
.ordine{color:var(--dati);white-space:nowrap}
.ordine-attesa{visibility:hidden} /* tiene il posto finché parte il JS: niente salti (CLS) */
.ordine-voce{color:var(--accento);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--sottolinea)}
.ordine-voce[aria-pressed="true"]{color:var(--inchiostro);text-decoration:none;font-weight:700}
.ordine-voce:active{transform:translateY(1px)}
.archivio{position:relative;padding:36px 0 104px}
.griglia-archivio{margin-top:0}
/* il riquadro in fondo all'archivio: prende i posti che restano nell'ultima riga */
.fine-archivio{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:220px;padding:28px}
.num-fine{color:var(--oro);font-size:64px}   /* sul blu notte il numerale è oro (01/10 sera, _modifiche-2-bis C) */
/* sotto 1200 px il riquadro è stretto (232 px fra 820 e 1199, 169 a 390, 134 a 320) e il grappolo grande da 230 px passava
   sopra il numero, il titolo e il collegamento (correzioni del collaudo di «3 step modifiche», 02/10: 21 sovrapposizioni
   misurate, oro su oro). Come in «Da dove vuoi cominciare?»: il grappolo piccolo e più spento resta nell'angolo in alto a
   destra (disegno alto ~78 px) e i testi cominciano sotto di lui (88 px di spazio in alto): mai un acino sopra una lettera. */
@media (max-width:1199.98px){
  .fine-archivio{padding-top:88px}
  .fine-archivio .cerca-segno{top:-14px;right:-22px;width:110px;height:110px;color:var(--oro);stroke-width:.8}
}
.fine-voce{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fine-titolo{font-size:22px;font-weight:760;letter-spacing:-.02em;line-height:1.15;max-width:14em;text-wrap:balance}
.vuoto{margin-top:8px;text-align:center}
.vuoto .pulsante{margin-top:20px}

/* la puntata: testata BLU NOTTE dal 01/10 notte (motivo oro solo ai lati, tralcio oro; prima carta di guardia), la copertina è
   la carta sul tavolo appoggiata a cavallo fra il blu e la carta, poi carta pulita */
.puntata-testa{--fondo:var(--notte);position:relative;isolation:isolate;padding-top:52px}
.puntata-testa::before,.puntata-testa::after{content:"";position:absolute;left:0;right:0;top:0;bottom:260px;pointer-events:none}
.puntata-testa::before{z-index:-3;background:var(--notte)}
.puntata-testa::after{z-index:-2;background:var(--motivo-notte);-webkit-mask-image:var(--maschera-lati);mask-image:var(--maschera-lati)}
.senza-copertina .puntata-testa{padding-bottom:56px}
.senza-copertina .puntata-testa::before,.senza-copertina .puntata-testa::after{bottom:0}
.puntata-testa .dentro{position:relative;z-index:1}
.puntata-intestazione{--m:26px;width:fit-content;max-width:100%}
.puntata-segno{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 18px}
.num-testata{font-size:88px}
.puntata-dati{padding-bottom:8px;color:var(--testo)}
.h1-puntata{margin-top:18px;max-width:768px;font-size:clamp(34px,2.2vw + 20px,51px);font-weight:760;line-height:1.05;letter-spacing:-.028em;text-wrap:balance}
.occhiello-puntata{margin-top:16px;max-width:672px;font-style:italic;font-size:20px;line-height:1.45;color:var(--testo)}
.copertina-puntata{position:relative;isolation:isolate;margin-top:40px}
.foglio-sotto{position:absolute;inset:0;z-index:-1;border-radius:var(--r-copertina);background:var(--foglio-paglierino);transform:translate(14px,12px) rotate(1.4deg)}
.foglio{position:relative;padding:12px;border-radius:var(--r-copertina);background:var(--foglio);border:1px solid var(--filo);box-shadow:var(--ombra-su)}
.copertina-foto{border-radius:11px}
.copertina-puntata .copertina-foto{aspect-ratio:16/9}
/* il cerchio del calice, intero, appoggiato sull'angolo della copertina come un vero segno di bicchiere */
.segno-anello-copertina{right:-58px;bottom:-66px;width:190px;height:190px;z-index:2}
.segno-anello-copertina::before{content:none}
.puntata-carta{position:relative}
.puntata-carta > .dentro{position:relative;z-index:1;padding-bottom:104px}
.filo-lettura{position:sticky;top:0;z-index:5;height:3px;margin-top:22px;border-radius:2px;overflow:hidden}
.filo-lettura i{display:block;height:100%;background:var(--oro);transform-origin:0 50%;transform:scaleX(0)}
.lettura-attiva .filo-lettura{background:var(--filo)}
.credito{margin-top:14px;font-size:13px;line-height:1.35;color:var(--dati)}
.video-puntata{margin-top:28px}
.video-puntata video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#000}
/* colonna di lettura: 648 px (≈ 70 caratteri a riga) + 35 + la colonna di lato da 235 (DESIGN-SPEC §7.2) */
.lettura{display:grid;grid-template-columns:minmax(0,648px) 35px minmax(0,235px);grid-template-areas:"corpo . lato";margin-top:40px;align-items:start}
.lettura-sola{grid-template-columns:minmax(0,648px);grid-template-areas:"corpo"}
.lettura .corpo{grid-area:corpo;min-width:0}
.lato{grid-area:lato;position:sticky;top:28px}
.lato > * + *{margin-top:30px}
/* indice e «In breve»: niente riquadro, solo un filetto oro a sinistra (come la barra del nome in Chi sono); le etichette
   maiuscole in bronzo come gli occhielli. Il tondino della voce che si legge è blu notte (01/10 notte; prima granato): è un
   segnale e deve vedersi sul filetto oro */
.indice,.in-breve{padding:2px 0 4px 18px;border-left:2px solid var(--oro)}
.lato-titolo,.condividi-titolo{font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--etichetta)}
.indice ol{margin-top:8px}
.indice li{position:relative}
.indice a{position:relative;display:block;padding:7px 0;font-size:15px;line-height:1.3;color:var(--testo)}
/* la voce che si sta leggendo: stesso peso (niente righe che si allungano), colore d'inchiostro e un tondino sul filetto */
.indice a[aria-current="true"]{color:var(--inchiostro)}
.indice a[aria-current="true"]::before{content:"";position:absolute;left:-24px;top:calc(7px + .65em - 4px);width:8px;height:8px;border-radius:50%;background:var(--notte);box-shadow:0 0 0 3px var(--carta)}
@media (hover:hover){.indice a:hover{color:var(--accento)}}
.in-breve dl{margin-top:10px}
.in-breve dl > div + div{margin-top:12px}
.in-breve dt{font-size:14.5px;font-weight:700;color:var(--inchiostro);line-height:1.2}
.in-breve dd{margin-top:3px;font-size:15px;line-height:1.4;color:var(--testo)}
.solo-telefono{display:none}

.corpo{font-size:18px;line-height:1.6;color:var(--inchiostro);font-weight:450;overflow-wrap:break-word}
.corpo > * + *{margin-top:17px}
.corpo h2{margin-top:44px;font-size:26px;font-weight:720;line-height:1.16;letter-spacing:-.024em;scroll-margin-top:34px;text-wrap:balance}
.corpo h3{margin-top:32px;font-size:20px;font-weight:700;line-height:1.22}
.corpo h2 + *,.corpo h3 + *{margin-top:12px}
.corpo strong{font-weight:700}
.corpo em{font-style:italic}
.corpo a{color:var(--accento);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--sottolinea)}
.corpo ul{list-style:disc;padding-left:26px}
.corpo ol{list-style:decimal;padding-left:26px}
.corpo li + li{margin-top:7px}
.corpo li::marker{color:var(--bronzo)}
/* le voci che Giovanni scrive con «- » (solo nella resa): un elenco vero, con il tondino (bronzo, l'oro che si vede sulla carta) */
.corpo .elenco-voci{list-style:none;padding-left:0}
.elenco-voci > li{position:relative;padding-left:24px}
.elenco-voci > li + li{margin-top:22px}
.elenco-voci > li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--bronzo)}
.elenco-voci > li > p + p{margin-top:10px}
.corpo .indice ol,.corpo .in-breve dl{list-style:none;padding-left:0}
.corpo blockquote{border-left:4px solid var(--oro);padding:6px 0 4px 26px;font-size:20px;line-height:1.45;color:var(--testo)}
.corpo figure{margin-top:32px;margin-bottom:8px}
.corpo figure img{width:auto;max-width:100%;height:auto;max-height:min(70vh,560px);border-radius:12px;background:var(--guardia)}
.corpo figcaption{margin-top:9px;font-size:14px;line-height:1.35;color:var(--dati)}

.puntata-piede{max-width:648px;margin-top:44px;padding-top:26px;border-top:1px solid var(--filo)}
/* senza indice né «In breve», il piede sta nella colonna di destra, con il filetto oro come l'indice */
.lettura-piede > .puntata-piede{grid-area:lato;position:sticky;top:28px;max-width:none;margin-top:0;padding:2px 0 4px 18px;border:0;border-left:2px solid var(--oro)}
.lettura-piede > .puntata-piede .condividi{margin-top:20px}
.lettura-piede > .puntata-piede .firma-puntata,.lettura-piede > .puntata-piede .domanda{font-size:16px}
.lettura-piede > .puntata-piede .email{font-size:15.5px}
.firma-puntata{font-size:18px;font-weight:650;line-height:1.35;letter-spacing:-.01em}
.uscita{margin-top:6px;font-size:14px;line-height:1.4;color:var(--dati)}
.uscita .sott{color:var(--accento)}
.condividi{margin-top:28px}
.condividi-voci{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gettone-icona{gap:8px;padding:0 14px}
.icona-social{width:15px;height:15px;flex:none}
.pulsante-condividi{margin-top:10px}
.condividi-esito{min-height:1.35em;margin-top:8px;font-size:14px;line-height:1.35;color:var(--dati)}
.puntata-piede .contatto{margin-top:22px}

.sfoglia{margin-top:72px}
.griglia-sfoglia{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.sfoglia-fine{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:28px;padding-top:20px;border-top:1px solid var(--filo)}
.altre{margin-top:80px}
.altre-testa .gettoni{margin-top:16px}
.griglia-altre{margin-top:32px;grid-template-columns:repeat(2,minmax(0,1fr))}

/* chi sono */
.chi-sono{position:relative;padding:64px 0 104px}
.chi-sono > .dentro{position:relative;z-index:1}
.chi-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:start}
.testo-pagina p{font-size:19px;line-height:1.55;color:var(--testo)}
.testo-pagina p + p{margin-top:14px}
.chi-intro .testo-pagina p:first-child{font-size:22px;line-height:1.45;color:var(--inchiostro);font-weight:500}
.nome-barra{padding:6px 0 4px 24px;border-left:4px solid var(--oro)}
.h3-nome{font-size:24px;font-weight:750;letter-spacing:-.02em;line-height:1.2}
.nome-barra p{margin-top:10px;font-size:17px;line-height:1.5;color:var(--testo)}
.nome-blocco .link{margin:14px 0 0 28px}
.foto-chi{position:relative;isolation:isolate}
.foto-chi .cornice{aspect-ratio:6/5;border-radius:11px}
.segno-anello-chi{left:-80px;bottom:-60px;width:200px;height:200px;z-index:-2}
.nome-sotto{margin-top:56px;max-width:760px}
.chi-colonna{max-width:760px}
.blocco-testo,.scrive,.faq{margin-top:72px}
.blocco-testo .testo-pagina,.righe,.tendine{margin-top:18px}
.righe{border-top:1px solid var(--filo-oro)}
.riga{padding:16px 2px 17px;border-bottom:1px solid var(--filo-oro)}
.riga-titolo{font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.riga-testo{margin-top:4px;font-size:16.5px;line-height:1.45;color:var(--testo)}
.elenco-puntate{margin-top:88px}
.elenco-puntate .griglia{margin-top:32px}
.chi-sono .contatto{margin-top:48px}

/* chi sono · la sua lettera (SPEC-STEP2 D1 · MAPPA-CHI-SONO §3 A «La lettera intera»): la misura e i caratteri della colonna
   di lettura delle puntate; il primo paragrafo più grande; le due terre affiancate a tutta larghezza (al telefono un blocco
   solo a due piani); la chiusura in citazione; la firma; poi, fuori dalla lettera, la riga dell'altro sito.
   Al computer il nome della rubrica (o la foto) resta fermo accanto all'INIZIO della lettera mentre si legge, e si ferma
   prima delle terre (collaudo dello STEP 2: prima scendeva sopra «Il Salento»).
   Colori (D6 «solo oro»): il filetto della chiusura è oro come la barra del nome accanto (due barre, un colore solo).
   Dopo la firma, fuori dalla lettera, il riquadro blu notte del pastificio (01/10 sera, _modifiche-2-bis P: al posto della riga
   piccola di prima), a tutta larghezza al computer. */
.chi-lettera{grid-template-areas:"inizio lato" "terre terre" "fine ." "altro altro";row-gap:0}
.chi-lettera > .lettera-inizio{grid-area:inizio}
.chi-lettera > .terre{grid-area:terre}
.chi-lettera > .lettera-fine{grid-area:fine}
.chi-lettera > .altro-riquadro{grid-area:altro;margin-top:64px}
.chi-lettera > .chi-lato{grid-area:lato}
.altro-dopo{margin-top:64px}   /* senza la lettera (ripiego sui paragrafi «testo»): subito dopo la presentazione */
.lettera{max-width:648px;font-size:18px;line-height:1.6;font-weight:450;color:var(--inchiostro);overflow-wrap:break-word;text-wrap:pretty}
.lettera > * + *{margin-top:17px}
.lettera strong{font-weight:720}
.lettera-apertura{font-size:22px;line-height:1.45;font-weight:500}
/* le terre: un blocco solo, due colonne divise da un filetto (come al telefono, dove i piani sono uno sotto l'altro):
   se una terra è più corta, lo spazio sotto è aria dentro il blocco e non un riquadro mezzo vuoto.
   Dal 01/10 notte CHIARO (il foglio bianco) con il filetto d'oro intorno e fra le due terre: prima rosato */
.terre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:32px 0;border-radius:var(--r-riquadro);background:var(--foglio);border:1px solid var(--filo-oro)}
.terra{padding:24px 30px 26px;font-size:18px;line-height:1.6;color:var(--inchiostro);text-wrap:pretty}
.terra:nth-child(even){border-left:1px solid var(--filo-oro)}
.terra:nth-child(n+3){border-top:1px solid var(--filo-oro)}
.terra strong{font-weight:720}
.terre > .terra:last-child:nth-child(odd){grid-column:1/-1}
.lettera-chiusura{margin-top:30px;padding:4px 0 4px 26px;border-left:4px solid var(--oro);font-size:26px;line-height:1.35;letter-spacing:-.012em;color:var(--inchiostro)}
.lettera-chiusura strong{font-weight:700}
.lettera > .lettera-firma{margin-top:28px;font-size:19px;letter-spacing:.01em}
/* la colonna è alta quanto la PRIMA riga della griglia (l'inizio della lettera) e dentro resta fermo il suo contenuto:
   così si ferma dove finisce l'inizio. Se la colonna stessa fosse sticky, Chrome la terrebbe ferma per tutta la griglia
   e scenderebbe sopra le terre, che prendono tutta la larghezza (collaudo dello STEP 2, con e senza foto). */
@media (min-width:941px){
  .chi-lettera > .chi-lato{align-self:stretch}
  .chi-lettera > .chi-lato > *{position:sticky;top:28px}
  /* con la foto: il cerchio del calice resta nello spazio fra le colonne e sotto la foto (il margine fa fermare la foto
     prima), mai sopra la lettera né sulle terre */
  .chi-lettera .segno-anello-chi{left:-38px}
  .chi-lettera > .chi-lato > .foto-chi{margin-bottom:56px}
}

/* domande frequenti (tendine) */
.tendine{border-top:1px solid var(--filo-oro)}
.tendine details{border-bottom:1px solid var(--filo-oro)}
.tendine summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 2px;list-style:none;cursor:pointer;font-size:18.5px;font-weight:680;line-height:1.3;letter-spacing:-.01em;color:var(--inchiostro)}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
.pm{width:16px;height:16px;flex:none;color:var(--accento)}
details[open] .pm-v{opacity:0}
.tendine details p{padding:0 40px 22px 2px;margin-top:-4px;font-size:17px;line-height:1.5;color:var(--testo)}
@media (hover:hover){.tendine summary:hover{color:var(--accento)}}

/* contatti e informativa */
.pagina-breve{padding-top:56px;padding-bottom:104px}
.email-grande{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.email-grande .email{margin:0;font-size:clamp(22px,1.2vw + 14px,30px)}
.cerca-sola{margin-top:48px}
.p-privacy .lettura{margin-top:0}

/* 404: fascia blu notte col motivo oro (01/10 notte; prima carta di guardia), la foto del calice vuoto sul suo foglio, poi
   la fila del viaggio sulla carta */
.fascia-404{--fondo:var(--notte);position:relative;isolation:isolate;padding:56px 0 72px;overflow:hidden;background:var(--notte)}
/* il motivo solo nei margini, come le altre fasce (02/10: prima le iconcine stavano accanto al titolo e sotto i collegamenti) */
.fascia-404::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--motivo-notte);pointer-events:none;-webkit-mask-image:var(--maschera-lati);mask-image:var(--maschera-lati)}
.apertura-griglia{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.fascia-404 .intro{margin-top:16px}
.fascia-404 .azioni{margin-top:22px}
.copertina-404{position:relative;isolation:isolate}
.copertina-404 .copertina-foto{aspect-ratio:4/3}
.copertina-404 .copertina-foto img{object-position:50% 30%}

/* ═════════════ le griglie: 4 colonne da 1200 px, 3 da 768, 2 sotto (mai una casella sola in una riga) ═════════════ */
@media (min-width:1200px){
  .griglia > .larga-4{grid-column:1/-1}
  .larga-4 .scheda-link{flex-direction:row;align-items:center;gap:32px}
  .larga-4 .scheda-foto{width:42%}
  .larga-4 .scheda-corpo{flex:1;margin-top:0}
  .larga-4 .scheda-titolo{font-size:24px}
  .griglia-home > .scheda-cerca:nth-child(4n+1){grid-column:1/-1}
  .griglia-home > .scheda-cerca:nth-child(4n+2){grid-column:span 3}
  .griglia-home > .scheda-cerca:nth-child(4n+3){grid-column:span 2}
  .griglia-home > .scheda-cerca:nth-child(4n+1),.griglia-home > .scheda-cerca:nth-child(4n+2){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-areas:"testa campi" "link campi";gap:16px 48px;align-content:start;padding:36px 40px}
  .fine-archivio.r4-0{display:none}
  .fine-archivio.r4-2{grid-column:span 2}
  .fine-archivio.r4-3{grid-column:span 3}
}
@media (min-width:768px) and (max-width:1199.98px){
  .griglia{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 22px}
  .griglia > .larga-3{grid-column:1/-1}
  .larga-3 .scheda-link{flex-direction:row;align-items:center;gap:28px}
  .larga-3 .scheda-foto{width:45%}
  .larga-3 .scheda-corpo{flex:1;margin-top:0}
  .griglia-home > .scheda-cerca:nth-child(3n+1){grid-column:1/-1}
  .griglia-home > .scheda-cerca:nth-child(3n+2){grid-column:span 2}
  .griglia-home > .scheda-cerca:nth-child(3n+1),.griglia-home > .scheda-cerca:nth-child(3n+2){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-areas:"testa campi" "link campi";gap:16px 36px;align-content:start}
  .fine-archivio.r3-0{display:none}
  .fine-archivio.r3-2{grid-column:span 2}
}
@media (max-width:767.98px){
  .griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px}
  .griglia > .larga-2{grid-column:1/-1}
  .larga-2 .scheda-link{flex-direction:row;align-items:center;gap:16px}
  .larga-2 .scheda-foto{width:45%}
  .larga-2 .scheda-corpo{flex:1;margin-top:0}
  .griglia-home > .scheda-cerca:nth-child(2n+1){grid-column:1/-1}
  .fine-archivio.r2-0{display:none}
}
@media (min-width:820px){
  .cerca-sola{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-areas:"testa campi" "link campi";gap:16px 40px;align-content:start;padding:36px 40px}
}

/* ═════════════ movimento ═════════════ */
@keyframes sali{from{opacity:0;transform:translateY(.55em)}}
@keyframes comparsa{from{opacity:.35;transform:translateY(24px)}}
@keyframes comparsa-y{from{transform:translateY(24px)}}   /* solo lo spostamento: per il blu notte (vedi ② qui sotto) */
@keyframes ondeggia{from{transform:rotate(-1.8deg)}to{transform:rotate(1.4deg)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes deriva{from{transform:translateY(calc(var(--d,12) * -1px))}to{transform:translateY(calc(var(--d,12) * 1px))}}
@keyframes foto-deriva{from{transform:translateY(-5%) scale(1.1)}to{transform:translateY(5%) scale(1.1)}}
@keyframes menu-entra{from{opacity:0;transform:translateY(12px)}}
@keyframes tendina-apri{from{opacity:0;transform:translateY(-4px)}}

@media (prefers-reduced-motion:no-preference){
  /* ① l'apertura entra in cascata: prima l'occhiello, poi le righe del titolo, poi il resto */
  .apertura-testo > *{animation:sali .7s var(--curva) both}
  .apertura-testo > .h1{animation-delay:.08s}
  .apertura-testo > .intro,.apertura-testo > .azioni,.apertura-testo > .apertura-riga{animation-delay:.2s}
  .h1.cascata-attesa{animation:none;opacity:0}
  .h1.cascata-righe,.h1.cascata-fatta{animation:none}
  .cascata-riga{display:block;animation:sali .7s var(--curva) both;animation-delay:calc(.08s + var(--i, 0) * .09s)}

  /* ② i blocchi compaiono guidati dallo scroll: si spostano di 24 px e l'opacità parte da 0,35 (mai invisibili:
        chi fa la cattura della pagina intera vede comunque tutto) */
  /* Il blu notte non si sbiadisce MAI (correzioni del collaudo di «3 step modifiche», 02/10): un riquadro pieno blu notte sulla
     carta a opacità 0,35-0,99 diventa grigio-lilla (misurato a 390 px, fermi a metà comparsa: #515377, tinta 237°, saturazione
     19 %), proprio il «violaceo» che Giovanni non vuole; e siccome la comparsa segue lo scorrimento, se ci si ferma resta così.
     Lo stesso vale per l'oro e il chiaro dentro le fasce blu (l'oro mezzo trasparente sul blu è grigio-malva). Quindi i riquadri
     pieni blu sulla carta («Da dove vuoi cominciare?», il pastificio, il pulsante WhatsApp di Contatti) e i blocchi della fascia
     blu «Prima l'acino» compaiono SOLO spostandosi di 24 px, sempre a colore pieno; lo stesso ogni blocco che CONTIENE un riquadro
     blu (in «Chi sono» il pastificio sta dentro la lettera, che compare tutta insieme). Gli altri blocchi (testo scuro e foto
     sulla carta) restano come prima. Prova: lilla.mjs (collaudo/CORREZIONI.md), a ogni passo di scorrimento l'opacità effettiva
     di ogni fondo blu notte in vista è 1. */
  @supports (animation-timeline:view()){
    [data-reveal]{animation:comparsa linear both;animation-timeline:view();animation-range:entry calc(var(--i,0) * 7%) entry calc(38% + var(--i,0) * 7%)}
    .scheda-cerca[data-reveal],.altro-riquadro[data-reveal],.whatsapp-riga[data-reveal],.nome [data-reveal],
    [data-reveal]:has(.scheda-cerca,.altro-riquadro,.fine-archivio,.pulsante-whatsapp-carta){animation-name:comparsa-y}
    /* ④ lo scorrimento lento legato allo scroll (lo «scrub», ora nativo: prima era GSAP): i segni grandi derivano di
          pochi pixel, le foto delle schede scorrono dentro la cornice (solo da 820 px) */
    [data-deriva]{animation:deriva linear both;animation-timeline:view();animation-range:cover}
  }
  .rivela-attesa{opacity:.35;transform:translateY(24px)}
  .rivela-attesa.rivelato{opacity:1;transform:none;transition:opacity .6s var(--curva),transform .6s var(--curva);transition-delay:calc(var(--i,0) * 80ms)}
  /* il ripiego (browser senza animation-timeline): anche qui il blu notte resta pieno, si sposta soltanto */
  .scheda-cerca.rivela-attesa,.altro-riquadro.rivela-attesa,.whatsapp-riga.rivela-attesa,.nome .rivela-attesa,
  .rivela-attesa:has(.scheda-cerca,.altro-riquadro,.fine-archivio,.pulsante-whatsapp-carta){opacity:1}

  /* ⑤ i segni che respirano: i tralci oscillano, i cerchi del calice girano piano */
  .ondeggia{animation:ondeggia 10s ease-in-out infinite alternate}
  .gira{animation:gira 160s linear infinite}

  /* la foto si avvicina appena, il numero si alza di poco, il grappolo del riquadro gira un poco */
  .cornice picture{transition:transform .8s var(--curva)}
  .num-tappa{transition:transform .35s var(--curva)}
  .num-scheda{transition:transform .35s var(--curva)}
  .cerca-segno{transition:transform .9s var(--curva)}
  .fila{scroll-behavior:smooth}
  .freccia{transition:transform .18s ease}
  .pm{transition:transform .2s ease}
  .pm-v{transition:opacity .2s ease}
  .chev{transition:transform .2s var(--curva)}
  details[open] > p{animation:tendina-apri .28s var(--curva) both}
  .menu-filtro[open] > .menu-voci,.indice-telefono[open] > nav{animation:tendina-apri .22s var(--curva) both}
  .menu-telefono.aperto nav,.menu-telefono:target nav{animation:menu-entra .32s var(--curva) both}

  /* i cambi di colore restano rapidi (≤ 120 ms, deroga scritta in CONCEPT.md); si animano transform e opacity */
  .pulsante{transition:background-color .12s ease,transform .12s ease}
  .altro-pulsante,.pulsante-whatsapp{transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .12s ease}
  .freccia-fuori{transition:transform .18s ease}
  .gettone{transition:border-color .12s ease,background-color .12s ease,color .12s ease,transform .12s ease}
  .tondo{transition:border-color .12s ease,opacity .2s ease,transform .15s var(--curva)}
  .tappa-titolo,.scheda-titolo{transition:color .12s ease}
  .menu a{transition:color .12s ease}
  .piede-link a{transition:color .12s ease}
  .firma a,.piede-altro a{transition:color .12s ease,text-decoration-color .12s ease}
  .tendine summary{transition:color .12s ease}
  .indice a{transition:color .12s ease}
  .ordine-voce{transition:color .12s ease,transform .12s ease}
  .sott{transition:text-decoration-color .12s ease}
  .email{transition:text-decoration-color .12s ease}
  .apri-menu{transition:border-color .12s ease,transform .12s ease}
  .chiudi-menu{transition:border-color .12s ease,transform .12s ease}
  .menu-telefono nav a{transition:color .12s ease,transform .18s var(--curva)}
  .icona-social{transition:transform .18s ease}
  .salta{transition:transform .15s ease}

  /* ③ la firma: la foto della puntata vola al suo posto e diventa la copertina della sua pagina */
  @view-transition{navigation:auto}
  ::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--curva)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
}
@media (prefers-reduced-motion:no-preference) and (min-width:820px){
  @supports (animation-timeline:view()){
    [data-parallasse]{animation:foto-deriva linear both;animation-timeline:view();animation-range:cover}
  }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .tappa-link:hover .cornice picture,.scheda-link:hover .cornice picture{transform:scale(1.045)}
  .tappa-link:hover .num-tappa,.scheda-link:hover .num-scheda{transform:translateY(-3px)}
  .scheda-cerca:hover .cerca-segno,.fine-archivio:hover .cerca-segno{transform:rotate(-7deg) translateY(4px)}
  .gettone-icona:hover .icona-social{transform:scale(1.08)}
}
@media (hover:hover){
  .tappa-link:hover .tappa-titolo,.scheda-link:hover .scheda-titolo{color:var(--accento)}
}
.tappa-link:active .cornice,.scheda-link:active .cornice{transform:translateY(1px)}

/* ═════════════ tavoletta ═════════════ */
@media (max-width:1199.98px){
  .apertura-testo{--posto-segno:clamp(140px,17vw,210px)}
}
/* sotto 1360 px i margini sono troppo stretti per il motivo (sarebbero mezze iconcine accanto ai testi): le fasce blu restano
   pulite con i loro tralci oro, e i tralci non hanno più bisogno della macchia che spegne il motivo sotto di loro (al telefono
   quella del tralcio dell'apertura copriva la virgola di «enogastronomia,» e la rendeva grigia). Fino al 02/10 sotto 1100 px il
   motivo restava in una striscia sfumata in cima, accanto all'occhiello. */
@media (max-width:1359.98px){
  .fascia::before,.puntata-testa::after,.apertura-testa::before,.fascia-404::before,.nome::before{content:none}
  .segno-apertura::before,.segno-404::before,.segno-nome::before{content:none}
}
@media (max-width:1023.98px){
  .nome-griglia{grid-template-columns:auto minmax(0,1fr)}
  .nome-griglia .chi{grid-column:1/-1;padding:28px 0 0;border-left:0;border-top:1px solid var(--oro)}
}
@media (max-width:940px){
  .apertura-griglia{grid-template-columns:minmax(0,1fr);gap:48px}
  /* la 404 con la foto sotto il testo: il tralcio corto in alto a destra, accanto al titolo (02/10) */
  .segno-404{display:block;top:52px;right:12px;width:170px}
  .fascia-404 .h1::before{content:"";float:right;width:150px;height:1.5em}
  .copertina-404{max-width:560px;margin:0 16px}
  .chi-intro{grid-template-columns:minmax(0,1fr);gap:40px}
  .chi-lettera{grid-template-areas:"inizio" "terre" "fine" "altro" "lato";row-gap:0}
  .chi-lettera > .chi-lato{margin-top:48px}
  .chi-lettera > .altro-riquadro{margin-top:48px}
  .lettura{grid-template-columns:minmax(0,1fr);grid-template-areas:"corpo"}
  .lato{display:none}
  .solo-computer{display:none!important}
  .solo-telefono{display:block}
  .lettura-piede{grid-template-areas:"corpo"}
  .lettura-piede > .puntata-piede{grid-area:auto;position:static;margin-top:44px;padding:26px 0 0;border:0;border-top:1px solid var(--filo);max-width:648px}
  .lettura-piede > .puntata-piede .firma-puntata,.lettura-piede > .puntata-piede .domanda{font-size:17px}
  /* al telefono l'indice è una riga chiusa, «In breve» una riga compatta dopo il primo paragrafo */
  .indice-telefono{padding:0 0 0 16px}
  .indice-telefono > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;
    font-size:14px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--etichetta)}
  .indice-quante{letter-spacing:0}
  .indice-telefono > summary .chev{transform:rotate(180deg)}
  .indice-telefono[open] > summary .chev{transform:none}
  .indice-telefono ol{margin:0 0 8px}
  .in-breve-telefono{margin-top:22px;padding:2px 0 2px 16px}
  .in-breve-telefono dl{margin-top:8px}
  .in-breve-telefono dl > div{display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
  .in-breve-telefono dl > div + div{margin-top:6px}
  .in-breve-telefono dt{font-size:12.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--etichetta)}
  .in-breve-telefono dd{margin:0;font-size:15.5px}
}

/* ═════════════ telefono (< 820 px · CONTRATTO §12) ═════════════ */
@media (max-width:819.98px){
  :root{--margine:20px;--r-copertina:14px;--r-foto:10px;--r-riquadro:12px}
  body{font-size:17px}

  /* testata e menu a tutto schermo */
  .testata-riga{height:64px;gap:14px}
  .logo{font-size:20px;gap:10px}
  .logo-segno{height:38px}
  .piede-logo .logo-segno{height:40px}
  .menu{display:none}
  .apri-menu,.chiudi-menu{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--filo-forte);border-radius:9px;background:var(--foglio);
    font-size:15px;font-weight:600;color:var(--inchiostro)}
  .menu-telefono:target,.menu-telefono.aperto{display:flex;flex-direction:column;position:fixed;inset:0;z-index:100;background:var(--carta);padding:0 20px env(safe-area-inset-bottom);overflow-y:auto;overscroll-behavior:contain}
  .menu-telefono-testa{flex:none;height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--filo)}
  .menu-telefono nav a{display:flex;align-items:center;height:64px;border-bottom:1px solid var(--filo);font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--inchiostro)}
  .menu-telefono nav a[aria-current]{color:var(--notte)}
  html.menu-aperto,html.menu-aperto body{overflow:hidden}
  .apri-menu:active,.chiudi-menu:active{transform:translateY(1px)}
  .menu-telefono nav a:active{transform:translateX(4px)}

  .link{font-size:16px}
  .dati{font-size:13.5px}

  /* ① l'apertura: il titolo, una riga di collegamenti, e subito la fila */
  .apertura{padding-top:16px}
  .apertura-testo{--m:18px;--posto-segno:0px}
  .occhiello{font-size:11.5px;gap:7px;letter-spacing:.09em}
  .ic-occhiello{width:22px;height:22px}
  .h1{margin-top:8px;font-size:min(33px,8.4vw);line-height:1}
  .apertura-riga{margin-top:10px;gap:6px 20px}
  .intro{font-size:15.5px;line-height:1.36;max-width:30em}
  .apertura .sottotitolo-home{font-size:17.5px;line-height:1.38}
  .azioni{gap:6px 22px}
  .link-apertura{font-size:15.5px}
  .link-apertura .freccia{display:none}
  /* il tralcio corto: intero nell'angolo alto a destra; il titolo gli lascia il posto solo alle prime righe */
  .segno-apertura{top:40px;right:2px;width:120px}   /* 02/10: 2 px più a destra e 4 più piccolo, 10 px d'aria dal titolo a 360 px */
  .apertura .h1::before{content:"";float:right;width:112px;height:2.05em}

  .viaggio-apertura{display:flex;flex-direction:column;padding-top:14px}
  .viaggio-apertura .viaggio-testa{order:3;margin-top:4px;padding-bottom:26px}
  .viaggio-apertura .barra-fila{order:2;padding-bottom:0;margin-top:16px}
  .viaggio-apertura .fila{order:1;margin-top:0}
  .viaggio-carta{padding-top:44px}
  .viaggio-carta .barra-fila{padding-bottom:40px}
  .h2-viaggio{font-size:20px}
  .viaggio-sotto{font-size:15px}
  .fila-comandi{display:none}
  .fila{--passo:14px;padding-top:4px;padding-bottom:4px}
  .tappa{flex-basis:min(68vw,280px)}
  .num-tappa{font-size:38px}
  .tappa-testa{padding-bottom:10px}
  .tappa-dati{font-size:12.5px}
  .tappa-foto{margin-top:12px}
  .tappa-titolo{margin-top:11px;font-size:16px;-webkit-line-clamp:2}

  /* ② tutte le puntate */
  .tutte{padding:64px 0 64px}
  .h2{font-size:32px}
  .sotto-sezione{margin-top:6px;font-size:16px}
  .testa-sezione{flex-direction:column;align-items:flex-start}
  .griglia{margin-top:26px}
  .scheda-cerca{padding:26px 22px 24px;gap:20px}
  .cerca-titolo{font-size:23px}
  .gettone{height:44px}
  .scheda-cerca .gettone-chiaro{min-height:44px}

  /* ③ la chiusura */
  .nome{padding:64px 0}
  .nome-griglia{grid-template-columns:minmax(0,1fr);gap:0}
  .segno-nome{position:absolute;z-index:2;right:-10px;top:-34px;width:112px}
  .nome-frase{padding-right:104px}
  .ic-acino{width:40px;height:40px}
  .frase{font-size:min(40px,10vw)}
  .nome-griglia .chi{margin-top:30px}
  .chi-nome{font-size:22px}
  .chi-testo{font-size:16px}

  /* il riquadro del pastificio: in colonna (segno, testi, pulsante) */
  .altro-casa{padding-bottom:64px}
  .tutte:has(+ .altro-casa){padding-bottom:72px}
  .altro-riquadro{grid-template-columns:minmax(0,1fr);justify-items:start;gap:18px;padding:30px 26px 28px}
  .altro-riquadro::before{inset:7px}
  .ic-spighe{width:64px;height:64px;stroke-width:1.25}
  .altro-titolo{font-size:26px}
  .altro-descrizione{font-size:16px}
  .altro-pulsante{height:52px}

  /* piè di pagina */
  .piede{--alto-piede:128px;padding-bottom:32px}
  .segno-piede{top:6px;width:330px}
  .piede-riga{flex-direction:column;align-items:flex-start;gap:16px}
  .piede-link{gap:10px 20px}
  .firma{text-align:left}
  .piede-fondo{flex-direction:column;align-items:flex-start;gap:12px}
  .piede-fondo .firma{margin:0}
  .piede-nota{margin-top:18px;padding-top:14px}
  .piede-nota p{font-size:13px}

  /* pagine interne */
  .fascia{padding:22px 0 36px}
  .fascia-corta{padding-bottom:40px}
  .fascia-testo{--m:16px}
  .h1-pagina{font-size:30px;margin-top:10px}
  .fascia .sotto{font-size:15.5px;margin-top:8px}
  /* la vite anche al telefono (correzioni del collaudo di «3 step modifiche», 02/10): la SPEC (voce 2+3) la vuole in OGNI
     testata e Giovanni guarda dal telefono; prima qui si toglieva e le testate erano rettangoli blu nudi. Il tralcio corto,
     più piccolo (104 px, disegno alto 53), sta accanto alle prime righe del titolo, che gli lascia il posto (un float largo
     92 px e alto 58), a metà fra l'occhiello e la prima riga intera sotto di lui: 9-10 px di blu sopra e sotto, mai attaccato a
     un testo (misurato con testate.mjs a 320-430 px). --alto-tralcio = dove comincia il titolo meno 5 px (54 px nelle testate,
     60 nella 404). Nella puntata il tralcio verticale diventa un tralcio corto un po' più piccolo (104 px) accanto al numero:
     la riga del numero gli lascia 96 px, la data e i minuti stanno uno sopra l'altro accanto al numero (senza il puntino) e il
     titolo comincia sotto il disegno, a qualsiasi larghezza (un float accanto al titolo lo mancava: a 320 px la data va a capo
     e il titolo scende). Il tralcio sta SOPRA la macchia dei testi (z-index 2: prima ci finiva sotto e non si vedeva). Nelle
     testate, nella puntata e nella 404 al telefono il motivo non c'è (vedi sotto 1360 px nella «tavoletta») e quindi il tralcio
     non ha la sua macchia, che spegneva le ultime lettere della riga sotto il titolo */
  .segno-tralcio-testata{display:none}
  .segno-corto-testata,.segno-404{display:block;top:var(--alto-tralcio);right:2px;width:104px}
  .segno-corto-testata,.segno-404,.segno-corto-puntata{z-index:2}
  .segno-corto-testata::before,.segno-corto-puntata::before{content:none}
  .fascia{--alto-tralcio:49px}
  .fascia-404{--alto-tralcio:55px}
  .fascia-testo{display:flow-root}
  .fascia .h1-pagina::before,.fascia-404 .h1::before{content:"";float:right;width:92px;height:58px}
  .segno-corto-puntata{display:block;top:22px;right:2px;width:104px}
  .puntata-segno{padding-right:96px}
  .puntata-dati{flex-direction:column;align-items:flex-start;gap:3px}
  .puntata-dati .sep{display:none}
  .segno-anello-testata{width:130px;height:130px;right:-30px;top:auto;bottom:-24px}
  .h2-piccolo{font-size:26px}

  /* archivio: i filtri in una riga che scorre di lato (sfumata a destra), l'ordine sotto */
  .fascia-archivio{padding-top:22px;padding-bottom:14px}
  .filtri{margin-top:14px}
  .filtri-titolo{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .barra-filtri{display:block;margin-top:0}
  .filtri-scorre{overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 44px 4px 20px;scroll-padding:0 20px}
  .filtri-scorre::-webkit-scrollbar{display:none}
  .barra-filtri::after{content:"";position:absolute;right:-20px;top:0;width:44px;height:48px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--fondo) 80%)}
  .filtri .gettone{flex:none;height:42px;padding:0 13px}
  .menu-voci{left:0;right:0;width:auto;top:calc(48px + 8px);padding:14px}
  .elenco-testa{margin-top:8px;font-size:14px;justify-content:space-between}
  .archivio{padding:22px 0 72px}
  .fine-archivio{min-height:0;padding:88px 18px 20px}   /* 88 in alto: il posto del grappolo (vedi .num-fine) */
  .num-fine{font-size:48px}
  .fine-titolo{font-size:18px}
  .vuoto .pulsante{width:100%}

  /* puntata */
  .puntata-testa{padding-top:28px}
  .puntata-testa::before,.puntata-testa::after{bottom:120px}
  .num-testata{font-size:60px}
  .puntata-dati{padding-bottom:4px}
  .h1-puntata{font-size:30px;line-height:1.1;margin-top:14px}
  .occhiello-puntata{font-size:17px;line-height:1.5}
  .copertina-puntata{margin:28px 6px 0 8px}
  .foglio{padding:8px}
  .copertina-foto{border-radius:9px}
  .foglio-sotto{transform:translate(8px,8px) rotate(1.4deg)}
  .copertina-puntata .copertina-foto{max-height:min(62vh,520px)}
  .segno-anello-copertina{right:-14px;bottom:-40px;width:116px;height:116px}
  .filo-lettura{margin-top:18px}
  .lettura{margin-top:28px}
  .corpo{font-size:17px}
  .corpo > * + *{margin-top:15px}
  .corpo h2{font-size:22px;margin-top:34px}
  .corpo h3{font-size:18px}
  .corpo blockquote{font-size:18px;padding-left:18px}
  .corpo figure{margin:26px 0 4px}
  .corpo figure img{max-height:55svh}
  .corpo figcaption{font-size:13px}
  .puntata-piede{margin-top:36px}
  .firma-puntata{font-size:17px}
  .pulsante-condividi{width:100%;height:50px;font-size:16px}
  .puntata-carta > .dentro{padding-bottom:72px}
  .sfoglia{margin-top:56px}
  .sfoglia-fine{flex-direction:column}
  .altre{margin-top:56px}
  .griglia-altre{margin-top:24px}

  /* chi sono */
  .chi-sono{padding:44px 0 72px}
  .testo-pagina p{font-size:17px;line-height:1.55}
  .chi-intro .testo-pagina p:first-child{font-size:19px}
  .lettera{font-size:17px}
  .lettera > * + *{margin-top:15px}
  .lettera-apertura{font-size:19px}
  .terre{grid-template-columns:minmax(0,1fr);margin:26px 0}
  .terra{padding:18px 20px 20px;font-size:17px}
  .terra:nth-child(even){border-left:0}
  .terra + .terra{border-top:1px solid var(--filo-oro)}
  .lettera-chiusura{margin-top:26px;padding-left:18px;font-size:21px}
  .lettera > .lettera-firma{margin-top:22px;font-size:18px}
  .chi-lettera > .altro-riquadro,.altro-dopo{margin-top:40px}
  .chi-lettera > .chi-lato{margin-top:40px}
  .blocco-testo,.scrive,.faq{margin-top:56px}
  .elenco-puntate{margin-top:64px}
  .elenco-puntate .griglia{margin-top:20px}
  .tendine summary{min-height:56px;padding:16px 2px;font-size:17px}
  .tendine details p{padding-right:0;font-size:16px}
  .riga-titolo{font-size:17px}
  .riga-testo{font-size:16px}

  /* contatti, 404 */
  .pagina-breve{padding-top:40px;padding-bottom:72px}
  .email-grande .email{font-size:21px}
  .cerca-sola{margin-top:36px}
  .fascia-404{padding:30px 0 56px}
}

/* telefono stretto (< 600 px): schede piccole, 2 per riga, foto quadrate (mai una foto grande sotto l'altra) */
@media (max-width:599.98px){
  .copertina-puntata .copertina-foto{aspect-ratio:4/3}
  .griglia{gap:28px 12px}
  .scheda-foto{aspect-ratio:1/1}
  .scheda-corpo{margin-top:10px;padding-top:9px}
  .num-scheda{font-size:25px}
  .scheda .dati{font-size:12px}
  .scheda-testa{gap:2px 8px}
  .scheda-verso{font-size:10.5px;letter-spacing:.06em;margin-top:6px}
  .scheda-titolo{margin-top:6px;font-size:15px;line-height:1.27;-webkit-line-clamp:2}
  .larga-2 .scheda-foto{width:45%;aspect-ratio:4/3}
  .larga-2 .scheda-titolo{font-size:16px}
  .griglia-sfoglia .scheda .dati time,.griglia-sfoglia .scheda .dati .sep{display:none}
  .altro-pulsante{justify-self:stretch}   /* il pulsante del pastificio a tutta larghezza: facile da toccare */
  .whatsapp-riga .pulsante-whatsapp{width:100%}
}
@media (min-width:600px) and (max-width:819.98px){
  .scheda-titolo{font-size:18px}
}

/* stampa: solo il testo */
/* telefoni molto stretti (sotto 360 px): il tralcio dell'apertura e il suo alone coprirebbero la fine del titolo → si toglie */
@media (max-width:359.98px){
  .segno-apertura{display:none}
  .apertura .h1::before{content:none}
  /* …ma la vite c'è lo stesso (correzioni del collaudo di «3 step modifiche», 02/10: ogni testata blu al telefono mostra la vite):
     più piccola (96 px), a destra dei due collegamenti, che qui vanno uno sotto l'altro e lasciano libero il lato destro
     («Leggi l'ultima puntata» è largo 160 px su 280). Mai sopra un testo: è nello spazio vuoto accanto ai collegamenti. */
  .apertura .azioni{flex-direction:column;align-items:flex-start;gap:6px}
  .apertura-riga{position:relative}
  .apertura-riga::after{content:"";position:absolute;right:-2px;bottom:0;width:96px;height:46px;pointer-events:none;
    background:url(/assets/img/segni/grandi/tralcio-corto.svg?v=11) right center/contain no-repeat}
  /* il logo accanto al nome (01/10 sera, _modifiche-2-bis L): a 320 px logo + nome + «Menu» non ci stanno di 7 px. Il logo resta
     alto 38 px; il nome scende a 17 px e il pulsante si stringe di poco (resta alto 44 px) */
  .testata-riga{gap:10px}
  .logo{font-size:17px;gap:8px}
  .apri-menu,.chiudi-menu{padding:0 11px;gap:8px}
}
@media print{
  .testata,.menu-telefono,.condividi,.sfoglia,.altre,.lato,.filo-lettura,.piede,.altro-riquadro,.salta,.segno-grande,.foglio-sotto,.indice-telefono,.in-breve-telefono{display:none!important}
  .puntata-testa::before,.puntata-testa::after{display:none}
  [data-reveal],[data-deriva],[data-parallasse]{animation:none!important;opacity:1!important;transform:none!important}
  .lettura{display:block}
  .dentro,.dentro-puntata{width:auto;margin:0 12mm}
  body{background:#fff}
}

/* ───── le categorie dei racconti (04/10/2026, le crea Giovanni dal pannello) ─────
   Nell'archivio una fila «Tutti · <categoria> · …» sopra Vitigno · Zona · Piatto, con lo stesso aspetto (le regole
   .filtri-scorre > .gettone di sopra); al telefono scorre di lato come l'altra. Nella pagina del racconto il nome della
   categoria vicino alla data, un collegamento all'archivio filtrato. Nessun colore nuovo. */
.barra-categorie{margin-top:12px}
.barra-categorie + .barra-filtri{margin-top:10px}
.categorie-racconto a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--sottolinea)}
@media (hover:hover){.categorie-racconto a:hover{color:var(--accento);text-decoration-color:currentColor}}
@media (max-width:819.98px){
  .barra-categorie{margin-top:0}
  .barra-categorie + .barra-filtri{margin-top:8px}
}

/* ═════════════ IL BLOG COMPLETO (04/10/2026 pomeriggio) ═════════════
   Le categorie sono le sezioni del blog: la fila delle categorie nella testata di ognuna, «Cerca nel blog», le pagine
   successive, le briciole del post, le parti delle altre categorie in home, il post in evidenza. Stesso linguaggio del sito:
   gettoni, blu notte e oro, carta. Nessun colore nuovo. */

/* la fila delle categorie nella testata (stesso aspetto dei filtri: .filtri-scorre > .gettone); quella aperta in oro pieno */
.fascia-dentro > .barra-categorie{margin-top:24px}
.fascia-dentro > .barra-categorie + .filtri{margin-top:16px}
.filtri-scorre > .gettone[aria-current="page"]{background:var(--oro);border-color:var(--oro);color:var(--notte)}
.filtri-scorre > .gettone[aria-current="page"] .conta{background:color-mix(in srgb,var(--notte) 16%,var(--oro));color:var(--notte)}
@media (hover:hover){.filtri-scorre > .gettone[aria-current="page"]:hover{color:var(--notte)}}

/* «Cerca nel blog»: un campo e un pulsante, sul blu notte (testate delle categorie, della ricerca e della pagina non trovata) */
.cerca-blog{display:flex;align-items:center;gap:8px;width:min(460px,100%);margin-top:18px}
.cerca-campo{flex:1;min-width:0;height:44px;padding:0 18px;border-radius:var(--r-gettone);border:1px solid var(--oro-spento);background:var(--notte-2);
  color:var(--chiaro);font:inherit;font-size:16px;font-weight:500;-webkit-appearance:none;appearance:none}
.cerca-campo::placeholder{color:var(--chiaro-3);opacity:1}
.cerca-campo::-webkit-search-cancel-button{filter:invert(1) brightness(1.4)}
.cerca-campo:focus-visible{outline:2px solid var(--oro);outline-offset:2px;border-color:var(--oro)}
.cerca-invia{flex:none;height:44px;padding:0 20px;border-radius:var(--r-gettone);border:1px solid var(--oro);background:var(--oro);color:var(--notte);
  font:inherit;font-size:15px;font-weight:700;cursor:pointer}
@media (hover:hover){.cerca-invia:hover{background:var(--oro-chiaro);border-color:var(--oro-chiaro)}}
.cerca-invia:active{transform:translateY(1px)}
.cerca-invia:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fascia-archivio .cerca-blog{margin-top:20px}
.cerca-blog-404{margin-top:26px}
.cerca-blog-pagina{width:min(620px,100%);margin-top:22px}
.cerca-blog-pagina .cerca-campo,.cerca-blog-pagina .cerca-invia{height:52px}
.fascia-cerca .barra-categorie{margin-top:20px}

/* la ricerca: il conteggio, i risultati (le schede, col nome della categoria davanti alla data), niente trovato */
.archivio-cerca{padding-top:32px}
.conteggio-cerca{margin-bottom:22px;font-size:15px}
.scheda-sezione{font-weight:700;color:var(--inchiostro)}
.vuoto-cerca{text-align:left;max-width:40em}
.vuoto-cerca .conteggio-voce{font-size:15px;margin-bottom:8px}

/* la categoria ancora vuota: la sua frase gentile e la strada per i racconti */
.vuoto-categoria{padding:40px 0 24px;text-align:center}
.vuoto-strada{margin-top:18px}

/* le pagine successive di una categoria (oltre 24 post): funzionano senza JavaScript */
.pagine-elenco{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:44px;padding-top:24px;border-top:1px solid var(--filo-forte)}
.pagina-dopo{justify-self:end}
.pagine-numeri{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.pagine-numeri a,.pagina-qui{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border-radius:var(--r-gettone);border:1px solid var(--filo-forte);
  background:var(--foglio);font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.pagina-qui{background:var(--notte);border-color:var(--notte);color:#fff}
@media (hover:hover){.pagine-numeri a:hover{border-color:var(--notte);color:var(--notte)}}
.ordine-link .ordine-voce[aria-current="true"]{color:var(--inchiostro);text-decoration:none;font-weight:700}

/* le briciole del post: Home › la categoria › il titolo, piccole, sopra il numero (sul blu notte: date e minuti) */
.briciole-post{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:2px;margin-bottom:22px;font-size:14px;font-weight:550;line-height:1.45;color:var(--dati)}
.briciole-post a{color:var(--testo);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--sottolinea)}
@media (hover:hover){.briciole-post a:hover{color:var(--inchiostro);text-decoration-color:currentColor}}
.briciole-post .sep{margin:0 9px;color:var(--dati)}
.briciole-post [aria-current]{color:var(--dati)}

/* in home, le altre categorie (dopo i racconti) e «Da dove vuoi cominciare?» da solo */
.tutte + .sezione-categoria{padding-top:0}
.sezione-categoria:has(+ .partenza-sola){padding-bottom:0}
.partenza-sola{padding:0 0 104px}
.partenza-sola .cerca-sola{margin-top:56px}

/* il post in evidenza apre la fila: se la sua categoria non ha i numeri, al posto del numero c'è il nome della categoria */
.num-parola{font-size:22px;letter-spacing:-.015em;line-height:1;padding-bottom:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* il menu con tante categorie: al computer stretto non ci sta su una riga accanto al nome del blog, e diventa il menu del
   telefono (lo decide il server dalla lunghezza delle voci: «menu-lungo» sotto 1200 px, «menu-lunghissimo» sotto 1440 px,
   «menu-sempre» a ogni larghezza). Le regole sono quelle del telefono, qui sotto copiate per queste larghezze. */
@media (min-width:820px) and (max-width:1199.98px){
  .testata.menu-lungo .menu{display:none}
  .testata.menu-lungo .apri-menu,.menu-telefono.menu-lungo .chiudi-menu{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--filo-forte);border-radius:9px;background:var(--foglio);
    font-size:15px;font-weight:600;color:var(--inchiostro)}
  .menu-telefono.menu-lungo:target,.menu-telefono.menu-lungo.aperto{display:flex;flex-direction:column;position:fixed;inset:0;z-index:100;background:var(--carta);padding:0 max(var(--margine),calc((100% - var(--larghezza))/2));overflow-y:auto;overscroll-behavior:contain}
  .menu-telefono.menu-lungo .menu-telefono-testa{flex:none;height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--filo)}
  .menu-telefono.menu-lungo nav a{display:flex;align-items:center;height:64px;border-bottom:1px solid var(--filo);font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--inchiostro)}
  .menu-telefono.menu-lungo nav a[aria-current]{color:var(--notte)}
}
@media (min-width:1200px) and (max-width:1439.98px){
  .testata.menu-lunghissimo .menu{display:none}
  .testata.menu-lunghissimo .apri-menu,.menu-telefono.menu-lunghissimo .chiudi-menu{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--filo-forte);border-radius:9px;background:var(--foglio);
    font-size:15px;font-weight:600;color:var(--inchiostro)}
  .menu-telefono.menu-lunghissimo:target,.menu-telefono.menu-lunghissimo.aperto{display:flex;flex-direction:column;position:fixed;inset:0;z-index:100;background:var(--carta);padding:0 max(var(--margine),calc((100% - var(--larghezza))/2));overflow-y:auto;overscroll-behavior:contain}
  .menu-telefono.menu-lunghissimo .menu-telefono-testa{flex:none;height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--filo)}
  .menu-telefono.menu-lunghissimo nav a{display:flex;align-items:center;height:64px;border-bottom:1px solid var(--filo);font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--inchiostro)}
  .menu-telefono.menu-lunghissimo nav a[aria-current]{color:var(--notte)}
}
@media (min-width:1440px){
  .testata.menu-sempre .menu{display:none}
  .testata.menu-sempre .apri-menu,.menu-telefono.menu-sempre .chiudi-menu{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--filo-forte);border-radius:9px;background:var(--foglio);
    font-size:15px;font-weight:600;color:var(--inchiostro)}
  .menu-telefono.menu-sempre:target,.menu-telefono.menu-sempre.aperto{display:flex;flex-direction:column;position:fixed;inset:0;z-index:100;background:var(--carta);padding:0 max(var(--margine),calc((100% - var(--larghezza))/2));overflow-y:auto;overscroll-behavior:contain}
  .menu-telefono.menu-sempre .menu-telefono-testa{flex:none;height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--filo)}
  .menu-telefono.menu-sempre nav a{display:flex;align-items:center;height:64px;border-bottom:1px solid var(--filo);font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--inchiostro)}
  .menu-telefono.menu-sempre nav a[aria-current]{color:var(--notte)}
}
html.menu-aperto:has(.menu-telefono.aperto),html.menu-aperto:has(.menu-telefono.aperto) body{overflow:hidden}

@media (max-width:819.98px){
  .fascia-dentro > .barra-categorie{margin-top:16px}
  .fascia-dentro > .barra-categorie + .filtri{margin-top:6px}
  .cerca-blog{width:100%}
  .fascia-archivio .cerca-blog{margin-top:14px}
  .briciole-post{margin-bottom:16px;font-size:13.5px}
  .pagine-elenco{grid-template-columns:1fr 1fr;row-gap:14px}
  .pagine-numeri{grid-column:1/-1;grid-row:1}
  .partenza-sola{padding-bottom:64px}
  .partenza-sola .cerca-sola{margin-top:40px}
  .num-parola{font-size:18px}
}
/* sotto 940 px il tralcio corto sta in alto a destra nella testata del post: le briciole gli lasciano il posto, come il numero */
@media (max-width:940px){.briciole-post{padding-right:96px}}

/* ═════════════ CORREZIONE FINALE DEL BLOG (04/10/2026 sera, decisioni di Domenico) ═════════════
   S6 · «Cerca nel blog» nel riquadro «Da dove vuoi cominciare?» della home: lo stesso campo delle pagine delle categorie (sul blu
   notte: campo blu, filo oro, pulsante oro), sotto il titolo. Nel riquadro largo sta nella colonna del titolo, sopra «Esplora
   l'archivio»; in un riquadro stretto il pulsante va sotto il campo, mai fuori dal bordo. Nessun colore nuovo. */
.cerca-blog-home{flex-wrap:wrap;width:100%;max-width:460px;margin-top:0}
.cerca-blog-home .cerca-campo{flex:1 1 168px}
.scheda-cerca:has(> .cerca-blog) > .cerca-blog{grid-area:cerca}
@media (min-width:1200px){
  .griglia-home > .scheda-cerca:has(> .cerca-blog):nth-child(4n+1),.griglia-home > .scheda-cerca:has(> .cerca-blog):nth-child(4n+2){grid-template-areas:"testa campi" "cerca campi" "link campi"}
}
@media (min-width:768px) and (max-width:1199.98px){
  .griglia-home > .scheda-cerca:has(> .cerca-blog):nth-child(3n+1),.griglia-home > .scheda-cerca:has(> .cerca-blog):nth-child(3n+2){grid-template-areas:"testa campi" "cerca campi" "link campi"}
}
@media (min-width:820px){
  .cerca-sola:has(> .cerca-blog){grid-template-areas:"testa campi" "cerca campi" "link campi"}
}
/* S7 · il post in evidenza apre la fila delle copertine: sulla copertina l'etichetta «In evidenza» (il titolo della fila resta quello
   di Giovanni). Oro pieno col testo blu notte, come la categoria scelta nella fila delle categorie; maiuscola come le etichette del
   sito. Sta sopra la foto, in alto a sinistra (la foto ha 18 px di margine sopra, 12 al telefono). */
.tappa-foto-box{position:relative}
.segnale-evidenza{position:absolute;z-index:2;left:12px;top:30px;max-width:calc(100% - 24px);padding:6px 11px;border-radius:var(--r-gettone);background:var(--oro);color:var(--notte);
  font-size:12px;font-weight:750;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
@media (max-width:819.98px){.segnale-evidenza{top:22px;left:10px;font-size:11.5px;padding:5px 10px}}
/* …e la sua testa è alta come quella delle altre copertine (il nome della categoria al posto del numero era 12 px più basso, e la
   linea tratteggiata della rotta si spezzava): stessa altezza del numero (50 px × .8, al telefono 38 px × .8), il nome in fondo */
.num-tappa.num-parola{display:inline-flex;align-items:flex-end;min-height:40px}
@media (max-width:819.98px){.num-tappa.num-parola{min-height:30.4px}}

/* ═════════════ LE PAROLE (4 step modifiche, 08/10/2026) ═════════════
   Le pagine /parole/ e /parole/<parola>/ con gli stessi pezzi delle categorie: la testata blu col tralcio, le briciole, la riga dei
   gettoni (quello aperto in oro pieno), le schede dell'archivio col nome della categoria. Nessun colore nuovo. La riga delle parole al
   computer va a capo (sono tante), al telefono scorre di lato come le altre righe. */
.briciole-fascia{margin-bottom:18px}
.fascia-dentro > .barra-parole{margin-top:24px}
@media (min-width:820px){.barra-parole .filtri-scorre{flex-wrap:wrap}}
.lista-parole{gap:10px}
.lista-parole .gettone{height:auto;min-height:44px;padding-block:8px;white-space:normal;line-height:1.2}
@media (max-width:819.98px){
  .fascia-dentro > .barra-parole{margin-top:16px}
  .briciole-fascia{margin-bottom:12px}
}
/* correzioni dell'audit del 09/10 (P11): nelle schede col nome della categoria (le pagine delle parole e la ricerca), al telefono il nome
   sta su una riga sua e la data con i minuti sotto, senza il «·» che restava all'inizio della riga dopo */
@media (max-width:599.98px){
  .scheda .dati .scheda-sezione{flex-basis:100%}
  .scheda .dati .scheda-sezione + .sep{display:none}
}