/* Forma DJR — i cinque tagli del sito, solo woff2 (licenza web DJR: 15.000 visitatori unici al mese).
   Generato da strumenti/copia_asset.py dal fonts.css di DJR: non si modifica a mano. */
@font-face{font-family:'FormaDJRText';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/FormaDJRText-Bold.woff2') format('woff2')}
@font-face{font-family:'FormaDJRText';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/FormaDJRText-Medium.woff2') format('woff2')}
@font-face{font-family:'FormaDJRMicro';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/FormaDJRMicro-Bold.woff2') format('woff2')}
@font-face{font-family:'FormaDJRMicro';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/FormaDJRMicro-Medium.woff2') format('woff2')}
@font-face{font-family:'FormaDJRMicroNarrow';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/FormaDJRMicroNarrow-Bold.woff2') format('woff2')}

/* ---- base.css ---- */
/* Caffè Carati — base: variabili, griglia a sei colonne, scala tipografica, testata e piede.
   Le misure sono quelle del «Concetto sito provvisorio» del 12/10/2026 (§ 2-3): a 1440 margine 54, gronda 42,
   colonne 187, righe 175 (passo 217); a 390 margine 16, gronda 12, modulo verticale 24 e niente righe di griglia.
   Tre fasce di larghezza (§ 3):
   - fino a 900 px vale il disegno del telefono (anche gli iPad in verticale);
   - da 901 a 1440 la griglia scala in proporzione: l'unità `--u` è 1 px a 1440 (= 1/14,4 vw), con dei minimi
     (testo 17, narrativa 20, nomi delle schede 44, titoli di pagina e sezione 64);
   - sopra 1440 la composizione NON cresce: `--u` si ferma a 14,4 px, la griglia è larga 1.332 px e centrata, le
     superfici restano a tutta larghezza (i margini crescono).
   Le larghezze della griglia sono in % del contenitore (non in vw: la barra di scorrimento di Windows sta dentro i
   100vw e farebbe sbordare la pagina); le altezze e i corpi in `--u`.
   Colori p. 42. Javelin SOLO come disegno dei titoli (macro `titolo`, SVG in assets/titoli/), mai come @font-face;
   Forma DJR Text per i testi (Bold 700 testo, Medium 500 dettagli), Micro sotto i 13 px, Micro Narrow per la byline. */

:root {
  --rosso: #FF0000;
  --scuro: #460000;
  --bianco: #FFFFFF;
  /* il fondo delle sezioni chiare: un bianco appena panna (Alessandro, 18/10: il bianco puro col rosso scuro «dà
     troppo shock come contrasto»). Il manuale ha solo il Bianco Italia #FFFFFF: questo vale per il fondo del sito,
     le scritte bianche sullo scuro restano --bianco. Una copia nel primo disegno di modelli/base.html. */
  --panna: #FAF6EE;
  --nero: #000000;
  --acciaio: #D9D9D9;
  --r30: #300000; --r72: #720000; --r9f: #9F0000; --rb8: #B80000; --rd0: #D00000; --re8: #E80000;

  --testo: 'FormaDJRText', Arial, Helvetica, sans-serif;
  --micro: 'FormaDJRMicro', 'FormaDJRText', Arial, Helvetica, sans-serif;
  --stretto: 'FormaDJRMicroNarrow', 'FormaDJRMicro', Arial, Helvetica, sans-serif;

  /* l'unità: 1 px a 1440, proporzionale sotto, ferma sopra */
  --u: min(1vw, 14.4px);
  --larghezza-griglia: 1332px;

  /* griglia a 1440: margine 54 (3,75 %), gronda 42, colonna 187; le righe sono quasi quadrate (187 × 132/141 = 175) */
  --mo: 3.75%;                                  /* margine orizzontale, % della pagina */
  --mv: calc(3.75 * var(--u));                  /* margine verticale = la stessa misura */
  --go: 3.153153%;                              /* gronda orizzontale, % delle sei colonne (42/1332) */
  --g: calc(2.916667 * var(--u));               /* gronda verticale (42) */
  --riga: calc(12.152778 * var(--u));           /* riga di griglia (175) */
  --r2: calc(2 * var(--riga) + var(--g));       /* 2 righe = 392 */
  --r3: calc(3 * var(--riga) + 2 * var(--g));   /* 3 righe = 609 */
  --r4: calc(4 * var(--riga) + 3 * var(--g));   /* 4 righe = 826 */

  /* scala tipografica (§ 3): a 1440 testo 18/20, sommario piccolo 30/32, grande 48/47, dettagli 18/20, etichetta
     18/20, inviti 18, riga legale 14/18; fra 901 e 1440 scala con i minimi del telefono */
  --t: max(17px, calc(1.25 * var(--u)));
  --sp: max(24px, calc(2.083333 * var(--u)));
  --sg: max(30px, calc(3.333333 * var(--u)));
  --md: max(15px, calc(1.25 * var(--u)));
  --k: max(14px, calc(1.25 * var(--u)));
  --legale: max(12px, calc(0.972222 * var(--u)));
  --lh-t: 1.111; --lh-sp: 1.067; --lh-sg: 0.98; --lh-md: 1.111; --lh-k: 1.111; --lh-legale: 1.286;
  /* il testo di sezione (22,5 a 1440, interlinea 1.15): nato in Al banco, poi Il servizio, le porte della Home e
     Il caffè (16/10). Qui dal 16/10, dopo l'unione della Home: prima era copiato in sette punti di banco.css,
     pagine.css e servizio.css. Sul telefono ogni sezione dice la sua (17 quasi ovunque, 20 nelle porte). */
  --servizio: max(18px, calc(1.5625 * var(--u)));

  /* altezza delle MAIUSCOLE dei titoli Javelin (cap = 0,667 × corpo): pagina 110 → 73,4; sezione 96 → 64;
     scheda 64 → 42,7; narrativa 30 → 20 (interlinea 40). Minimi fra 901 e 1440: titoli 64 → 42,7; schede 44 →
     29,3; narrativa 20/28 → 13,3 */
  --cap-pagina: max(42.7px, calc(5.097222 * var(--u)));
  --cap-sezione: max(42.7px, calc(4.444444 * var(--u)));
  --cap-scheda: max(29.3px, calc(2.962963 * var(--u)));
  --cap-narrativa: max(13.34px, calc(1.388889 * var(--u)));
  --lh-narrativa: max(28px, calc(2.777778 * var(--u)));
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }
/* il posto della sbarra di scorrimento (Windows) è sempre riservato: quando l'ingresso o il menu bloccano lo
   scorrimento e la sbarra sparisce, la pagina non si allarga e non si sposta di lato (Alessandro, 13/10 sera); il
   posto vuoto prende il rosso scuro del fondo. Sul telefono e sul Mac (sbarre sovrapposte) non cambia niente. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--scuro);
  color: var(--bianco);
  font-family: var(--testo);
  font-weight: 700;
  font-size: var(--t);
  line-height: var(--lh-t);
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--rosso); outline-offset: 3px; }

/* ---------- superfici (p. 27): scuro = titoli Rosso Italia e testo bianco; bianco = titoli Rosso Italia e testo
   rosso scuro; Rosso Italia = tutto rosso scuro, solo corpi da sommario in su.
   ⛔ Le sezioni del sito usano solo scuro e bianco (Alessandro, 16/10: il rosso acceso a schermo intero «rende
   nervose le persone, non utilizziamolo»; le tre chiusure che lo avevano, Il caffè, Al banco e Il servizio, sono
   passate al bianco). `.rosso` resta per fasce basse o pezzi piccoli, mai per una schermata.
   Il «bianco» delle sezioni ha il fondo --panna dal 18/10 (sopra, nelle variabili). ---------- */
.scuro { background: var(--scuro); color: var(--bianco); }
.scuro .titolo { color: var(--rosso); }
.bianco { background: var(--panna); color: var(--scuro); }
.bianco .titolo { color: var(--rosso); }
.rosso { background: var(--rosso); color: var(--scuro); }

/* ---------- sezione = pagina: margine tutt'intorno, le righe dentro; sopra 1440 la griglia resta 1.332 px e si
   centra, la superficie della sezione va a tutta larghezza ---------- */
.sezione { padding: var(--mv) var(--mo); }
.g6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--go);
  grid-auto-rows: minmax(var(--riga), auto);
  row-gap: var(--g);
  align-items: start;
  max-width: var(--larghezza-griglia);
  margin-inline: auto;
}

/* ---------- scala tipografica ---------- */
.t { font-size: var(--t); line-height: var(--lh-t); letter-spacing: -0.025em; }
.t + .t { margin-top: var(--lh-t); }
.k { font-size: var(--k); line-height: var(--lh-k); letter-spacing: 0; text-transform: uppercase; }
.k + .t { margin-top: 0.5em; }
.sp { font-size: var(--sp); line-height: var(--lh-sp); letter-spacing: -0.025em; }
.sg { font-size: var(--sg); line-height: var(--lh-sg); letter-spacing: -0.025em; }
.md { font-weight: 500; font-size: var(--md); line-height: var(--lh-md); letter-spacing: -0.025em; }
.up { text-transform: uppercase; }

/* invito (link di passaggio): Forma Bold 18 maiuscolo, filetto Rosso Italia 2 px sotto; al passaggio 3 px,
   nessun cambio di colore. Il testo prende il colore della superficie. Il paragrafo che lo contiene (`.inviti`)
   ha interlinea 1, così il filetto coincide con il fondo del paragrafo e l'invito che chiude una sezione si
   ancora al filo basso della sua riga (align-self: end). */
.invito {
  display: inline-block;
  font-size: var(--t); line-height: 1; letter-spacing: 0; text-transform: uppercase; text-decoration: none;
  padding-bottom: 4px; border-bottom: 2px solid var(--rosso);
}
.invito:hover, .invito:focus-visible { padding-bottom: 3px; border-bottom-width: 3px; }
.inviti { line-height: 1; }

/* ---------- titoli Javelin (macro `titolo`): il testo sta in uno span nascosto, le righe sono SVG ----------
   L'altezza dell'SVG è l'altezza delle MAIUSCOLE (dalla cima delle maiuscole alla linea di base: accenti sopra e
   discendenti sotto escono dal riquadro, overflow visibile). Il colore è currentColor. Due righe: interlinea 0,8
   del corpo (§ 3) = cap + 0,2 cap; ma in Javelin le discendenti scendono a −0,287 em e le ascendenti minuscole
   salgono a 0,625 (misurato sul font): se la prima riga ha discendenti, a 0,8 la «p» entra nella «d» della riga
   sotto, e l'interlinea minima è 0,912 → `titolo-discendenti` = 0,93 (cap + 0,394 cap). Con `tel` la macro mette
   anche il disegno del telefono (righe diverse): sopra i 900 si vede il primo, sotto il secondo. */
.titolo { margin: 0; color: inherit; --cap: var(--cap-pagina); }
.titolo svg { display: block; height: var(--cap); width: auto; overflow: visible; fill: currentColor; }
.titolo svg + svg { margin-top: calc(var(--cap) * 0.2); }
.titolo-discendenti svg + svg { margin-top: calc(var(--cap) * 0.394); }
.titolo .sbarra { fill: currentColor; }
/* a capo solo su una delle due larghezze (le frasi approvate non cambiano: cambia dove vanno a capo); `br.sempre` va
   a capo a tutte, salvo sotto i 340 (il primo iPhone SE, 320): lì la prima frase non sta in una riga, e col capo
   ne resterebbe una parola sola */
br.solo-tel { display: none; }
@media (max-width: 339px) { br.sempre { display: none; } }
.titolo-pc, .titolo-tel { display: block; }
.titolo-tel { display: none; }
.titolo-sezione { --cap: var(--cap-sezione); }
.titolo-scheda { --cap: var(--cap-scheda); }
/* il titolo che è un link (macro `titolo`, `href`): accanto alla riga una freccia alta 0,8 delle maiuscole, centrata
   sulle maiuscole, col tratto delle aste di Javelin; al passaggio e al focus scivola di poco verso destra */
.titolo-link { display: inline-flex; align-items: center; gap: calc(var(--cap) * 0.38); color: inherit; text-decoration: none; }
.titolo .titolo-freccia {
  flex: none; height: calc(var(--cap) * 0.8); width: auto; margin: 0;
  fill: none; stroke: currentColor; stroke-width: 24; stroke-linejoin: miter;
  transition: transform 0.2s ease;
}
.titolo-link:hover .titolo-freccia, .titolo-link:focus-visible .titolo-freccia { transform: translateX(calc(var(--cap) * 0.15)); }
@media (prefers-reduced-motion: reduce) {
  .titolo .titolo-freccia { transition: none; }
}

/* ---------- figure (macro `figura`) ---------- */
.figura img { width: 100%; height: auto; }
/* finestra sui fili (regola 6): la foto si ritaglia alla finestra, mai il contrario */
.finestra { position: relative; overflow: hidden; }
.finestra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- accessibilità ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- testata (Alessandro, 13/10, da Acqua Fiuggi e Graziano): «Menu» a sinistra, logotipo al centro,
   «ITA / ENG» a destra, tutti a metà altezza del logotipo. A 1440: 50 + 50 (logotipo) + 50 = 150 px. Prende il
   colore della prima sezione; sulla Home (`.testata-foto`) sta sopra la foto, trasparente e bianca. Le pagine
   stanno nella tendina (.menu). «Menu» e lingua come gli inviti (Forma Bold maiuscolo), il filetto Rosso Italia
   compare al passaggio; sotto ITA (la lingua in cui sei) c'è sempre. ENG è spento finché la versione inglese non
   c'è. ---------- */
.testata {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: calc(3.472222 * var(--u));   /* alta quanto il logotipo anche dove non c'è (Home): «Menu» e lingua stanno fermi */
  align-items: center;
  column-gap: calc(3.472222 * var(--u));
  padding: calc(3.472222 * var(--u)) var(--mo);
}
.testata-scuro { background: var(--scuro); color: var(--bianco); }
.testata-bianco { background: var(--panna); color: var(--scuro); }
.testata.testata-foto { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: transparent; color: var(--bianco); }
.testata-marchio { grid-column: 2; grid-row: 1; }
.testata-marchio img { display: block; height: calc(3.472222 * var(--u)); width: auto; }
.testata-menu-apri, .testata-lingua, .menu-chiudi {
  margin: 0; font-size: var(--t); line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
}
.testata-menu-apri, .menu-chiudi, .lingua-attiva { padding: 4px 0; border-bottom: 2px solid transparent; text-decoration: none; }
.testata-menu-apri { grid-column: 1; grid-row: 1; justify-self: start; }
.testata-menu-apri:hover, .testata-menu-apri:focus-visible, .menu-chiudi:hover, .menu-chiudi:focus-visible { border-bottom-color: var(--rosso); }
.testata-lingua { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: baseline; gap: 0.35em; }
.lingua-attiva { border-bottom-color: var(--rosso); }
/* l'altra lingua (dal 19/10/2026, con la versione inglese): un link come «Menu», filetto al passaggio, un po' più
   leggera della lingua in cui sei. Era «ENG» spento a 0,6 (6,3:1 sullo scuro e 4,9:1 sul bianco, sopra il 4,5 che
   serve a 15 px): 0,75 resta sopra */
.lingua-altra { padding: 4px 0; border-bottom: 2px solid transparent; color: inherit; text-decoration: none; opacity: 0.75; }
.lingua-altra:hover, .lingua-altra:focus-visible { border-bottom-color: var(--rosso); opacity: 1; }

/* ---------- la tendina del menu, con le proporzioni di Acqua Fiuggi (Alessandro, 13/10: «guarda com'è fatta quella
   di Fiuggi»; misurata a 1440 × 900 e 390 × 844): entra dal bordo sinistro, larga un terzo (480 px a 1440), rosso
   scuro; sul telefono tutto lo schermo. «Chiudi» sta dove stava «Menu»; le voci in Javelin Bold bianco, piccole e
   fitte come le loro: maiuscole alte 22 px ogni 48 a 1440 (18 ogni 44 sul telefono), la pagina in cui sei in Rosso
   Italia; in fondo, dove loro hanno i social, telefono e mail in piccolo. Si apre con :target (senza script) o con
   `.aperta` (script/sito.js); il velo dietro scurisce la pagina e, cliccato, la chiude. Il movimento (0,45 s) solo
   senza prefers-reduced-motion. ---------- */
.menu {
  --cap-menu: max(20px, calc(1.527778 * var(--u)));
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
  width: max(360px, calc(33.333333 * var(--u)));
  padding: calc(3.472222 * var(--u)) var(--mo);
  background: var(--scuro); color: var(--bianco);
  display: flex; flex-direction: column; align-items: flex-start;
  overflow-y: auto;
  transform: translateX(-100%); visibility: hidden;
}
.menu:target, .menu.aperta { transform: none; visibility: visible; }
.menu-chiudi { display: flex; align-items: center; height: calc(3.472222 * var(--u)); padding: 0; box-sizing: border-box; }
.menu-voci { list-style: none; margin: calc(var(--cap-menu) * 1.5) 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--cap-menu) * 1.2); }
.menu-piede {
  margin-top: auto; padding-top: var(--g);
  display: flex; flex-wrap: wrap; gap: 0.5em 2em;
  font-weight: 500; font-size: var(--legale); line-height: var(--lh-legale); letter-spacing: -0.01em;
}
.menu-piede a { text-decoration: none; }
.menu-piede a:hover, .menu-piede a:focus-visible { text-decoration: underline; text-decoration-color: var(--rosso); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.menu-voci a { display: inline-block; color: var(--bianco); text-decoration: none; }
.menu-voci svg { display: block; height: var(--cap-menu); width: auto; overflow: visible; fill: currentColor; }
.menu-voci a[aria-current="page"], .menu-voci a:hover, .menu-voci a:focus-visible { color: var(--rosso); }
.menu-velo { position: fixed; inset: 0; z-index: 55; background: rgba(34, 0, 0, 0.6); opacity: 0; visibility: hidden; }
html.menu-aperto, html.menu-aperto body { overflow: hidden; }
.menu:target ~ .menu-velo, .menu.aperta ~ .menu-velo { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .menu { transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.45s; }
  .menu:target, .menu.aperta { transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s; }
  .menu-velo { transition: opacity 0.45s, visibility 0s linear 0.45s; }
  .menu:target ~ .menu-velo, .menu.aperta ~ .menu-velo { transition: opacity 0.45s, visibility 0s; }
}

/* ---------- piede, uguale su tutte le pagine (§ 2): scuro; logotipo bianco 240 px con la byline Micro Narrow Bold
   13/11 (stacco 18); dopo una riga d'aria la riga legale e «Privacy» in Medium 14/18 bianco, e sotto la riga sulle
   scene fatte con l'IA. Il monogramma 19 C 74 che stava fra le due è tolto (Alessandro, 13/10 sera). ---------- */
.piede {
  background: var(--scuro); color: var(--bianco);
  padding: var(--mv) var(--mo);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.piede-marchio img { width: max(220px, calc(16.666667 * var(--u))); height: auto; margin: 0 auto; }
.piede .byline {
  display: flex; flex-direction: column; margin-top: calc(1.25 * var(--u));
  font-family: var(--stretto); font-weight: 700; letter-spacing: 0; text-transform: uppercase;
  font-size: max(12px, calc(0.902778 * var(--u))); line-height: 1.25;
}
.piede .byline span + span { font-size: max(10px, calc(0.763889 * var(--u))); }
.piede .legale {
  margin-top: var(--g);
  font-weight: 500; font-size: var(--legale); line-height: var(--lh-legale); letter-spacing: -0.025em;
  max-width: 70ch;
}
.piede .legale a { text-decoration: none; border-bottom: 1px solid currentColor; }
/* la riga sulle scene fatte con l'IA: stesso corpo e colore della riga legale, subito sotto (mezza riga d'aria) */
.piede .legale-ia { margin-top: 0.5em; }

/* ---------- telefono, fino a 900 px (anche gli iPad in verticale): margine 16, gronda 12, modulo verticale 24;
   le colonne servono solo a dividere; niente righe di griglia ---------- */
@media (max-width: 900px) {
  :root {
    --mo: 16px; --mv: 48px; --go: 12px; --g: 24px;
    /* riga legale 13/18 (era 12/15: «troppo minuta» per Astra, 13/10 notte) */
    --t: 17px; --sp: 24px; --sg: 30px; --md: 15px; --k: 14px; --legale: 13px;
    --lh-t: 1.294; --lh-sp: 1.125; --lh-sg: 1.1; --lh-md: 1.2; --lh-k: 1.143; --lh-legale: 1.385;
    /* titolo di pagina 56 → cap 37,4 (si riduce fino a 44 → 29,3 se la riga non sta in 358 px); scheda 44 → 29,3;
       narrativa 20/28 → cap 13,3 */
    --cap-pagina: 37.4px; --cap-sezione: 29.3px; --cap-scheda: 29.3px; --cap-narrativa: 13.3px; --lh-narrativa: 28px;
  }
  .g6 { display: block; grid-auto-rows: auto; max-width: none; }
  .titolo-pc { display: none; }
  .titolo-tel { display: block; }
  br.solo-pc { display: none; }
  br.solo-tel { display: inline; }
  .piede .legale { font-family: var(--micro); letter-spacing: -0.01em; }
  /* testata 73 = 16 + 41 (logotipo) + 16, «Menu» e lingua sulla stessa riga, area di tocco 44 */
  .testata { padding: 16px var(--mo); column-gap: 12px; }
  .testata-marchio img { height: 41px; }
  .testata-menu-apri, .testata-lingua, .menu-chiudi { font-size: 15px; }
  .testata-menu-apri, .lingua-attiva, .lingua-altra { line-height: 36px; padding: 0; }
  .lingua-attiva { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--rosso); }
  /* la tendina prende tutto lo schermo; voci con le maiuscole alte 18 px ogni 44 (Acqua Fiuggi al telefono) */
  .testata { grid-template-rows: 41px; }
  .menu { --cap-menu: 18px; width: 100%; padding: 16px var(--mo); }
  .menu-chiudi { height: 41px; }
  .menu-voci { margin-top: 22px; gap: 10px; }
  .menu-voci a { padding: 8px 0; }                 /* area di tocco 34 + 10 di stacco = il passo di 44 */
}

/* ---- pagine.css ---- */
/* Caffè Carati — stile delle singole pagine (concetto § 5). Ogni sezione è una «pagina» sulla griglia di base.css:
   sopra i 900 px i blocchi stanno sui fili (grid-column / grid-row) e l'invito che chiude una sezione sta al filo
   basso della sua riga; fino a 900 tutto va in colonna col modulo da 24 px. */

/* =================================================================================== Home — 1. apertura sulla foto */
/* (Alessandro, 13/10, da Acqua Fiuggi) alta quanto la prima schermata, la testata trasparente sopra; una delle otto
   scene coi baristi di spalle, a caso, velata di scuro come brandbook p. 6 (più scura in alto, sotto la testata, e
   al centro, dietro il marchio). Al centro, e nient'altro: il logotipo bianco con la byline (sulla foto il bianco:
   brandbook p. 27), largo 480 a 1440 (il doppio del piede: la byline cresce con lui, stesse proporzioni di p. 52). */
.apertura-foto {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: var(--mv) var(--mo);
}
.apertura-sfondo { position: absolute; inset: 0; z-index: 0; background: var(--scuro); }
/* la scena copre tutto lo schermo; il taglio di ogni foto (--fx, --fy) sta in home.html: la testa intera in alto,
   il marchio sulla schiena. Sullo schermo orizzontale arriva la versione orizzontale della scena (figura.html, stessa
   soglia), col suo taglio (--fxo, --fyo) */
.apertura-scatto, .apertura-scatto picture { position: absolute; inset: 0; display: block; }
.apertura-scatto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 20%); }
@media (min-aspect-ratio: 1/1) {
  .apertura-scatto img { object-position: var(--fxo, 50%) var(--fyo, 50%); }
}
.apertura-sfondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 42% 32% at 50% 50%, rgba(34, 0, 0, 0.38) 0%, rgba(34, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(34, 0, 0, 0.62) 0%, rgba(34, 0, 0, 0.3) 24%, rgba(34, 0, 0, 0.3) 70%, rgba(34, 0, 0, 0.55) 100%);
}
/* il marchio: logotipo largo --lw, byline Micro Narrow Bold come nel piede (13/11 con stacco 18 per 240 di logotipo) */
.apertura-marchio {
  --lw: max(260px, calc(33.333333 * var(--u)));
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--bianco);
}
.apertura-logotipo { margin: 0; line-height: 0; }
.apertura-logotipo img { width: var(--lw); height: auto; }
.apertura-marchio .byline {
  display: flex; flex-direction: column; margin-top: calc(var(--lw) * 0.075);
  font-family: var(--stretto); font-weight: 700; letter-spacing: 0; text-transform: uppercase;
  font-size: calc(var(--lw) * 0.0541667); line-height: 1.25;
}
.apertura-marchio .byline span + span { font-size: calc(var(--lw) * 0.0458333); }

/* l'apertura delle altre pagine (Il caffè, La famiglia e Al banco, dove è nata): la stessa prima schermata della
   Home, ma al centro il nome della pagina, il suo punzone e una frase: il nome in Javelin bianco (cap 76 a 1440),
   il punzone alto 170, la frase in bianco al corpo 27, su due righe al massimo (Al banco tre: banco.css). */
.apertura-pagina { --pz: max(100px, calc(11.805556 * var(--u))); row-gap: calc(2.083333 * var(--u)); }
.apertura-pagina .titolo { color: var(--bianco); }
.apertura-titolo { --cap: max(44px, calc(5.277778 * var(--u))); }
.apertura-punzone { display: block; width: auto; }
.apertura-punzone img { display: block; height: var(--pz); width: auto; }
.apertura-frase {
  margin: 0; max-width: 24em;
  font-size: max(18px, calc(1.875 * var(--u))); line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance;
}

/* 2. il caffè: il selettore di Il caffè con la scheda corta (`.selettore-corto`, dopo il selettore qui sotto) */

/* =================================================================================== 3. e 5. le porte */
/* Le porte di Al banco e La famiglia (15/10 sera: la Home rifatta come sintesi delle pagine). Come le sezioni di Al
   banco (banco.css, .banco-elenco): sul bianco, mezza pagina di testo a sinistra e nella metà destra la foto al
   vivo, dal bordo alto al basso e fino al bordo della pagina (la metà cade a metà della gronda fra c3 e c4, come
   lì). In alto il titolo, che è un link con la freccia; sotto la frase; sul fondo, sopra un filo Rosso Italia come
   i formati del decaffeinato, le righe che portano dentro la pagina (le parti di Al banco; i nomi e i bar di La
   famiglia). Sul computer orizzontale alte uno schermo; sullo schermo verticale e sul telefono decide il
   contenuto, e la foto (4:5, al massimo 512) viene prima del testo.
   La regola delle porte della Home (16/10, Alessandro: «voglio coerenza»): titolo, frase e loro distanza uguali
   in Il caffè (selettore corto, più sotto), Al banco, Il servizio (banco.css, .porta-servizio) e La famiglia. Il
   titolo ha la misura che aveva «Ci pensiamo noi» (cap 52 a 1440, `--cap-porta`): Il caffè era a 43 («molto più
   piccolo»), Al banco e La famiglia a 64 («La famiglia enorme»). La frase a 22,5, mezza gronda sotto il titolo. */
:root { --cap-porta: max(36px, calc(3.611111 * var(--u))); }
.porta {
  position: relative;
  --tenue: rgba(70, 0, 0, 0.72); --filo: rgba(70, 0, 0, 0.14);
  --dato: max(15px, calc(1.25 * var(--u)));
  --nome: max(22px, calc(2.083333 * var(--u)));
}
.porta-g { grid-auto-rows: auto; row-gap: 0; }
.porta-foto { display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--r30); }
.porta-titolo { --cap: var(--cap-porta); grid-row: 1; align-self: start; }
.porta-riga {
  grid-row: 2; margin: calc(0.5 * var(--g)) 0 0; max-width: 24em;
  font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue); text-wrap: pretty;
}
/* Al banco: titolo, la frase della sua apertura, (spazio), le quattro parti. Ogni parte è un link alla sua sezione
   nella pagina: il nome a 30, sotto la riga che la apre, la freccia a destra (il tratto di quella dei titoli),
   che al passaggio scivola come quella; fra le parti un filo sottile */
.porta .porta-g { grid-template-rows: auto auto 1fr auto; }
.porta-titolo, .porta-riga, .porta-narrativa, .porta-parti { grid-column: 1 / 4; }
.porta-banco .porta-foto img { object-position: 70% 45%; }
.porta-parti { grid-row: 4; align-self: end; margin: var(--g) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rosso); }
.porta-parte + .porta-parte { border-top: 1px solid var(--filo); }
.porta-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--g); align-items: center;
  padding: calc(1.041667 * var(--u)) 0; color: inherit; text-decoration: none;
}
.porta-nome { grid-column: 1; font-size: var(--nome); line-height: 1.1; letter-spacing: -0.025em; }
.porta-dida { grid-column: 1; margin-top: 0.3em; font-size: var(--dato); line-height: 1.2; letter-spacing: -0.02em; color: var(--tenue); text-wrap: pretty; }
.porta-freccia {
  grid-column: 2; grid-row: 1 / 3; height: calc(0.8 * var(--nome)); width: auto;
  fill: none; stroke: var(--rosso); stroke-width: 12; stroke-linejoin: miter; transition: transform 0.2s ease;
}
.porta-link:hover .porta-freccia, .porta-link:focus-visible .porta-freccia { transform: translateX(calc(0.25 * var(--nome))); }
@media (prefers-reduced-motion: reduce) {
  .porta-freccia { transition: none; }
}
/* La famiglia (16/10, fatta come Al banco: «il testo è messo a cazzo… la frase dal 1974 è messa male… anche i due
   nostri nomi»): al posto della frase la narrativa (la riga più lunga, larga 38 cap, sta nelle tre colonne a ogni
   larghezza), mezza gronda sotto il titolo come le frasi; sul fondo quattro righe con la freccia, come le parti di
   Al banco: i due nomi coi ruoli e, sotto «I nostri bar» (piccolo, sopra il suo filo rosso), i due bar con
   l'indirizzo; ognuna porta al suo posto in La famiglia. La foto con loro due interi in alto */
.porta-famiglia .porta-foto img { object-position: 50% 12%; }
.porta-famiglia .porta-narrativa {
  grid-row: 2; margin-top: calc(0.5 * var(--g)); color: var(--scuro);
  --cap-narrativa: calc(1.1 * var(--u)); --lh-narrativa: calc(2.2 * var(--u));
}
.porta-gruppo { margin: 0; padding: 0; list-style: none; }
.porta-gruppo-titolo {
  margin: 0; padding-top: calc(1.111111 * var(--u)); border-top: 1px solid var(--rosso);
  font-size: var(--dato); line-height: 1.2; letter-spacing: -0.02em; color: var(--tenue);
}
@media (min-width: 901px) {
  .porta-foto { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; aspect-ratio: auto; align-self: stretch; }
}
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .porta-g { min-height: calc(100vh - 2 * var(--mv)); min-height: calc(100svh - 2 * var(--mv)); }
}

/* la narrativa: Javelin Bold 30/40, quattro righe, una frase per riga (brandbook p. 6, cat. p. 2) */
.narrativa { color: var(--bianco); }
.narrativa-riga { display: block; }
.narrativa-riga svg { display: block; height: var(--cap-narrativa); width: auto; overflow: visible; fill: currentColor; }
.narrativa-riga + .narrativa-riga { margin-top: calc(var(--lh-narrativa) - var(--cap-narrativa)); }
.narrativa-tel { display: none; }

/* =================================================================================== Il caffè — 1. il selettore */
/* Seconda versione (Alessandro, 13/10 sera: nella prima «cambia il tag ma non cambia niente perché quello che si
   cambia è sotto e non si vede»). Fino al 16/10 tutta la sezione prendeva il rosso della miscela scelta
   (`data-miscela`, lo cambia lo script): #720000 il Classico, #B80000 la Florita, #300000 l'Intenso. Dal 16/10 un
   rosso scuro solo per tutte e tre (Alessandro: «anche la sezione del caffè ha rossi troppo accesi come sfondi,
   quindi direi di fare tutto in rosso scuro a prescindere dalla miscela»; la stessa regola delle sezioni, base.css
   accanto a .rosso): #300000, il più scuro dei tre, già provato col profilo dell'Intenso (faccia, anelli e orlo
   restano i suoi). Cambiando miscela cambiano sacchetto, tag e scheda.
   Tutto sta in una schermata. Da sinistra: il sacchetto (alto 500 a 1440, mai meno di
   400), i tre tag uno sopra l'altro (larghi 190) centrati sul sacchetto, e a destra la scheda della miscela, che
   parte alla quota del titolo: nome, arabica e robusta, sommario in due righe; sotto il profilo e accanto in
   tazza, al vostro banco e la prova in tazza. Sopra sacchetto e tag il titolo della sezione (cap 52 dal 16/10, come i
   nomi di Orzo e Ginseng in Al banco: più piccolo del nome della miscela, che è la protagonista, e più grande di
   prima, 42,7: Alessandro, «titoli piccoli»; a 64 su due righe sarebbe largo 585 e spingerebbe la scheda) e la
   frase della gamma su tre righe. A 1440 × 900 tutto sopra la piega. */
.caffe-selettore {
  /* il profilo come nel catalogo di Edo (pp. 8-10, colori misurati il 18/10): l'ettagono PIÙ CHIARO del fondo, così si
     stacca (era #220000, più scuro: sembrava un buco), anelli e forma più leggibili che in stampa perché a schermo il
     disegno è largo 260 */
  --fondo: var(--r30); --faccia: #3A0000; --anelli: var(--r72); --orlo: var(--r9f);
  --tenue: rgba(255, 255, 255, 0.78);              /* le scritte di secondo piano (in Edo bianco al 50-75 %) */
  --sacchetto: max(400px, calc(34.722222 * var(--u)));
  --tag: max(150px, calc(13.194444 * var(--u)));
  background: var(--fondo); color: var(--bianco);
  padding: var(--mv) var(--mo);           /* dal 15/10 sta sotto l'apertura, non sotto la testata: prima in alto 36 */
}
/* il profilo come quello di Edo: la faccia un tono più scura del fondo, gli anelli un tono più chiari della faccia,
   l'orlo tre toni sopra (nel catalogo, sul fondo #220000: faccia #300000, anelli #460000, orlo #9F0000) */
.caffe-selettore .titolo { color: var(--bianco); }
/* le misure dei testi di Il caffè, dal 16/10 quelle di Al banco (Alessandro: «ci sono scritte enormi, titoli
   piccoli»): il testo di sezione --servizio come in banco.css (22,5 a 1440, 17 sul telefono) per la frase della
   gamma, arabica e robusta e la descrizione della scheda (erano a 18, il testo), i capoversi della selezione e del
   criterio (erano in sommario piccolo, 30); i titoli di Arabica e Robusta alla misura di sezione (64, erano 42,7) e
   il titolo del selettore a 52 (era 42,7). Solo in Il caffè (.pagina-caffe): il selettore corto della Home ha le sue
   misure, che la sessione della Home sta allineando alle altre porte. La frase della gamma larga al massimo 22 em
   (495 a 1440): la colonna di sinistra è larga quanto il suo contenuto, e senza il limite la frase su una riga
   stringeva la scheda. --servizio sta in base.css (dal 16/10, dopo l'unione della Home); qui solo la misura del
   telefono, in fondo. */
.pagina-caffe .selettore-titolo { --cap: max(36px, calc(3.611111 * var(--u))); }
.pagina-caffe .selettore-gamma { font-size: var(--servizio); line-height: 1.15; }
@media (min-width: 901px) { .pagina-caffe .selettore-gamma { max-width: 22em; } }
.pagina-caffe .scheda-dichiarazione, .pagina-caffe .scheda-descrizione { font-size: var(--servizio); line-height: 1.15; }
.selettore {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(2 * var(--g)); align-items: start;
  max-width: var(--larghezza-griglia); margin-inline: auto;
}
.selettore-gamma { margin-top: calc(0.75 * var(--g)); }
.selettore-scelta { display: flex; align-items: center; gap: var(--g); margin-top: calc(0.75 * var(--g)); }
/* il sacchetto ha la larghezza scritta (1.293 × 2.685 px): in una colonna «auto» la larghezza al 100 % della
   figura non si può calcolare e la colonna veniva più stretta dell'immagine */
.selettore-sacchetto { flex: none; width: calc(var(--sacchetto) * 0.481564); max-width: none; }
.selettore-sacchetto img { height: var(--sacchetto); width: 100%; max-width: none; }
.selettore-tag { flex: none; display: flex; flex-direction: column; gap: calc(1.666667 * var(--u)); width: var(--tag); }
/* i tag: quello scelto pieno, gli altri più piccoli (verso l'occhiello: restano appesi alla stessa linea). Dal 19/10
   tutti a piena opacità (erano smorzati al 50 %, poi al 75 %): smorzato, il nome sul rosso non arrivava al contrasto
   che serve a leggerlo (Astra, giro finale 2; Alessandro: «i contrasti tra rosso e rosso scuro si vedano ovunque»).
   La scelta la dice la misura, e accanto il nome grande della miscela. */
.selettore-voce {
  display: block; text-decoration: none; perspective: 700px;
  opacity: 1; transform: scale(0.86); transform-origin: 7% 50%;
  transition: opacity 0.3s ease, transform 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.selettore-voce:focus-visible { outline-color: var(--bianco); outline-offset: 4px; }
.selettore-voce[aria-selected="true"] { transform: none; }
@media (hover: hover) {
  .selettore-voce:hover { transform: scale(0.92); }
  .selettore-voce[aria-selected="true"]:hover { transform: none; }
}
.tag-giro { display: grid; transform-style: preserve-3d; }
.tag-giro img { grid-area: 1 / 1; width: 100%; height: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tag-retro { transform: rotateY(180deg); }
/* scelto, il tag fa un giro sull'asse verticale: a metà mostra la C del retro (ferma un attimo), poi torna col
   nome; 1,2 s */
.selettore-voce.gira .tag-giro { animation: gira 1.2s cubic-bezier(0.45, 0, 0.25, 1); }
@keyframes gira {
  0% { transform: rotateY(0); }
  42% { transform: rotateY(180deg); }
  58% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
/* la scheda, come quelle del catalogo di Edo (pp. 8-10; Alessandro, 13/10 sera): il nome, arabica e robusta, la
   descrizione (di p. 5); sotto «In tazza:» e «Ideale per:» affiancati, etichetta tenue e testo bianco; poi il
   profilo e accanto la tabella dei valori, alta quanto il profilo con le etichette (in Edo 1031 pt contro 1009),
   coi filetti nel rosso dell'orlo e le righe dal 4 in su evidenziate nel rosso della forma; sotto il profilo la
   nota sulla scala, piccola, che parte dalla «P» di Persistenza (--rientro, da sito.js), e sotto la tabella la
   prova in tazza. align-content: start: le tre schede stanno nella stessa cella, alta quanto la più alta, e lo
   spazio in più non deve allargare le righe */
.scheda {
  --asse: max(14px, calc(1.041667 * var(--u)));
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "testa testa" "voci voci" "profilo tabella" "nota invito";
  column-gap: var(--g); align-items: start; align-content: start;
}
.scheda + .scheda { margin-top: calc(3 * var(--g)); }
.scheda-testa { grid-area: testa; }
.scheda-dichiarazione { margin-top: calc(1.111111 * var(--u)); font-size: var(--t); line-height: var(--lh-t); }
.scheda-descrizione {
  margin-top: calc(0.416667 * var(--u)); max-width: 38em;
  font-size: var(--t); line-height: var(--lh-t); letter-spacing: -0.025em; color: var(--tenue);
}
.scheda-voci {
  grid-area: voci; display: flex; gap: calc(1.5 * var(--g)); margin: calc(0.75 * var(--g)) 0 0;
  font-size: var(--asse); line-height: 1.3; letter-spacing: -0.01em;
}
/* due righe per voce come in Edo (19 em ci tengono anche «Ideale per» della Florita, la più lunga), e la riga
   alta uguale per tutte e tre: cambiando miscela il profilo non salta */
.scheda-voce { max-width: 19em; }
@media (min-width: 901px) { .scheda-voci { min-height: 3.9em; } }
.scheda-voce dt { color: var(--tenue); }
.scheda-voce dd { margin: 0.15em 0 0; text-wrap: balance; }       /* niente parola sola in seconda riga */
/* ai lati 6 em: ci stanno «Persistenza» e «Complessità» (5,4 e 5,7 em dal disegno, misurati a 1440) */
.scheda-profilo { grid-area: profilo; font-size: var(--asse); padding: 1.6em 6em 1.5em; margin-top: calc(0.5 * var(--g)); }
.scheda-profilo .radar { width: max(220px, calc(18.055556 * var(--u))); }
.scheda-tabella {
  grid-area: tabella; width: 100%; max-width: 18em; margin-top: calc(0.5 * var(--g));
  border-collapse: collapse; font-size: var(--asse); line-height: 1; letter-spacing: -0.01em;
  border-top: 1px solid var(--orlo);
}
.scheda-tabella th, .scheda-tabella td { padding: 0.72em 0.45em; border-bottom: 1px solid var(--orlo); text-align: left; font-weight: inherit; }
.scheda-tabella td, .scheda-tabella thead th + th { text-align: right; }
.scheda-tabella thead th { color: var(--tenue); }
.scheda-tabella .spicca { background: rgba(255, 0, 0, 0.2); }
.scheda-nota {
  grid-area: nota; margin-left: var(--rientro, 0px); max-width: 34em;
  font-size: max(12px, calc(0.833333 * var(--u))); line-height: 1.35; color: var(--tenue);
}
.scheda-invito { grid-area: invito; margin-top: calc(0.5 * var(--g)); }
/* con lo script le tre schede stanno nella stessa cella (l'altezza è quella della più alta: cambiando miscela la
   pagina non salta) e se ne vede una; quella che esce sparisce in 0,25 s, quella che entra arriva dopo 0,1 s */
.caffe-selettore.pronto .selettore-schede { display: grid; }
.caffe-selettore.pronto .scheda {
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.caffe-selettore.pronto .scheda.attiva { opacity: 1; visibility: visible; transition: opacity 0.35s ease 0.1s, visibility 0s; }
.caffe-selettore.appena-pronto .scheda, .caffe-selettore.appena-pronto .scheda.attiva { transition: none; }   /* all'avvio, sito.js */
/* la sbarra del nome si ridisegna a ogni scelta, come quella del titolo d'apertura (animazioni.css, «sbarra») */
@media (prefers-reduced-motion: no-preference) {
  html.js .caffe-selettore.pronto .scheda.attiva .scheda-nome .sbarra {
    transform-box: fill-box; transform-origin: 0 50%; animation: sbarra 0.6s linear 0.2s both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .caffe-selettore, .selettore-voce, .caffe-selettore.pronto .scheda, .caffe-selettore.pronto .scheda.attiva,
  .radar-faccia, .radar-anelli polygon, .radar-punti circle { transition: none; }
  .selettore-voce.gira .tag-giro { animation: none; }
}

/* il profilo (radar), disegnato come quello di Edo nel catalogo N.1 (build.py `radar`): spessori di p. 9 a misura
   di schermo (orlo e anelli 1 px, la forma 1,5, i pallini col filo da 1,2), colori dalla sezione; etichette in
   Forma Text Bold bianca, 15 a 1440 (mai meno di 14), posate sui vertici dal build in % del disegno */
.radar { position: relative; }
.radar-disegno { display: block; width: 100%; height: auto; overflow: visible; }
.radar-faccia { fill: var(--faccia); stroke: var(--orlo); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.radar-anelli polygon { fill: none; stroke: var(--anelli); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.radar-forma { fill: rgba(255, 0, 0, 0.25); stroke: var(--rosso); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.radar-punti circle { fill: var(--faccia); stroke: var(--rosso); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.radar-faccia, .radar-anelli polygon, .radar-punti circle { transition: fill 0.45s ease, stroke 0.45s ease; }
.radar-asse { position: absolute; white-space: nowrap; line-height: 1; letter-spacing: -0.01em; color: var(--bianco); }
.radar-su { transform: translate(-50%, -100%); }
.radar-destra { transform: translate(0, -50%); }
.radar-sinistra { transform: translate(-100%, -50%); }
.radar-giu-sinistra { transform: translate(-100%, 0); }
/* fra 901 e 1279 la colonna della scheda non tiene il profilo e la tabella affiancati (a 1024 è larga 467): tutto
   in colonna, la nota subito sotto il profilo e poi la tabella */
@media (min-width: 901px) and (max-width: 1279px) {
  .scheda { grid-template-columns: minmax(0, 1fr); grid-template-areas: "testa" "voci" "profilo" "nota" "tabella" "invito"; }
  .scheda-profilo { justify-self: start; padding-top: 1.2em; }
  .scheda-tabella { margin-top: var(--g); }
  .scheda-invito { margin-top: var(--g); }
}
/* ------------------------------------------------------- Home — 2. il caffè: lo stesso selettore, la scheda corta */
/* (Alessandro, 14/10: «la parte sulle schede del caffè nella home») una sezione come le altre della Home, col
   margine pieno anche in alto (in Il caffè sopra c'è la testata). La tabella dei valori resta solo per chi legge
   con la voce. Il titolo «Il caffè» è un link con la freccia (base.css, `.titolo-link`).
   Seconda versione, sui suoi commenti dello stesso giorno: la sezione «non è a tutta pagina»; a destra la scheda è
   «messa tutto un po' a caso», con «tanto spazio vuoto», e «Tutta la scheda» è troppo alta. Ora:
   - sul computer la sezione è alta quanto lo schermo. Dal 16/10 il contenuto parte in alto e titolo e frase sono
     quelli delle porte (la regola delle porte, sopra: «il font di Il caffè è molto più piccolo… e tutte le frasi
     partono da zone diverse»; prima stava al centro, col titolo 32 più in basso delle altre, a cap 43 e la frase a
     18). Il sacchetto cresce fin dove lo schermo lo tiene (fra 360 e 44 unità, 632 a 1440 × 900: tolti i margini e
     i 163 di titolo e frase) e la scheda
     è alta quanto la colonna del sacchetto: in alto nome, arabica e robusta e descrizione; in mezzo il profilo e
     accanto, a riempire la destra, «In tazza» e «Ideale per» (da 1280; più stretto stanno sopra il profilo); in
     fondo l'invito, sul filo basso del sacchetto;
   - sul telefono in verticale la sezione è due schermate esatte: la prima finisce coi tag in fondo allo schermo
     (il sacchetto prende lo spazio che resta, fra 200 e 400, e gli avanzi gli stanno sopra e sotto), la seconda è
     la scheda sotto la barra dei tag, con l'invito in fondo; «In tazza» e «Ideale per» lì non ci stanno e restano
     in Il caffè. Lo schermo è quello con le barre del browser (svh): quando Safari le nasconde, in fondo spunta un
     filo di quello che segue, ma i tag non finiscono mai sotto la barra. I conti (dal 16/10, titolo e frase come
     le porte): 48 di margine + 39 di titolo + 20 + 69 di frase (tre righe) + 20 sopra il sacchetto + 16 sopra la
     barra = 212 (prima 174, con titolo 34, 12 e frase 44); la barra è il tag (un terzo della riga meno le due
     gronde e i margini, al massimo 160, alto 227/449 della larghezza) + 21 */
.caffe-selettore.selettore-corto { padding: var(--mv) var(--mo); }
.selettore-corto .scheda { grid-template-columns: minmax(0, 1fr); grid-template-areas: "testa" "voci" "profilo" "invito"; }
.selettore-corto .scheda-tabella {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.caffe-selettore .titolo-link:focus-visible { outline-color: var(--bianco); outline-offset: 4px; }
@media (min-width: 901px) {
  .caffe-selettore.selettore-corto {
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .selettore-corto .selettore-titolo { --cap: var(--cap-porta); }
  .selettore-corto .selettore-gamma {
    margin-top: calc(0.5 * var(--g));
    font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue);
  }
  .selettore-corto .selettore { width: 100%; align-items: stretch; }
  .selettore-corto .selettore-destra { display: flex; flex-direction: column; }
  .selettore-corto .selettore-schede { flex: 1 1 auto; grid-template-rows: minmax(0, 1fr); }
  .selettore-corto .scheda { grid-template-rows: auto auto 1fr auto; align-content: stretch; }
  .selettore-corto .scheda-profilo { justify-self: start; align-self: center; }
  .selettore-corto .scheda-invito { align-self: end; }
}
@supports (height: 100svh) {
  @media (min-width: 901px) {
    .caffe-selettore.selettore-corto { --sacchetto: clamp(360px, calc(100svh - 2 * var(--mv) - 163px), calc(44 * var(--u))); }
  }
}
@media (min-width: 1280px) {
  .selettore-corto .selettore { column-gap: calc(1.5 * var(--g)); }
  .selettore-corto .scheda {
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto;
    grid-template-areas: "testa testa" "profilo voci" "invito invito";
    column-gap: calc(0.75 * var(--g));
  }
  /* «In tazza» e «Ideale per» fino al filo destro della griglia, con le righe piene (Alessandro, 14/10: «più a
     destra e meno a capo… ma non troppo»): la larghezza la danno il profilo un poco più piccolo, la gronda fra
     sacchetto e scheda di una volta e mezza e quella fra profilo e voci di tre quarti; niente righe pareggiate
     (`balance` le accorciava tutte), solo niente parola sola in fondo (`pretty`) */
  .selettore-corto .scheda-voci {
    flex-direction: column; gap: var(--g); align-self: center; margin: 0; min-height: 0;
    font-size: var(--t); line-height: var(--lh-t); letter-spacing: -0.025em;
  }
  .selettore-corto .scheda-voce { max-width: none; }
  .selettore-corto .scheda-voce dd { text-wrap: pretty; }
  /* il profilo più grande che in Il caffè (280 a 1440 invece di 260): qui ha tutta l'altezza fra la descrizione e
     l'invito, e piccolo restava in mezzo al vuoto */
  .selettore-corto .scheda-profilo .radar { width: max(220px, calc(19.444444 * var(--u))); }
}
/* sul telefono titolo e frase come le porte (16/10): cap 29,3 invece di 24, la frase a 20 (tenue) 20 sotto il
   titolo invece che a 17 con 12. Fino a 600 la frase va sempre su tre righe pareggiate (senza l'a capo fra le due
   frasi, larga al massimo 16,5 em): lasciata libera, nel motore di Safari stava su due righe a 390 con 7 px di
   margine e su tre a 386, e i conti delle due schermate qui sotto cambiavano col telefono */
@media (max-width: 900px) {
  .selettore-corto .selettore-titolo { --cap: 29.3px; }
  .selettore-corto .selettore-gamma { margin-top: 20px; font-size: 20px; line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue); }
}
@media (max-width: 600px) {
  .selettore-corto .scheda-voci { display: none; }
  .selettore-corto .selettore-gamma { max-width: 16.5em; text-wrap: balance; }
  .selettore-corto .selettore-gamma br { display: none; }
}
@supports (height: 100svh) {
  @media (max-width: 600px) and (min-height: 501px) {
    .caffe-selettore.selettore-corto {
      --barra-tel: calc(min(160px, (100vw - 56px) / 3) * 0.505568 + 21px);
      --spazio: calc(100svh - 212px - var(--barra-tel));
      --sacchetto: clamp(200px, var(--spazio), 400px);
    }
    .selettore-corto .selettore-sacchetto {
      margin-top: calc(20px + max(0px, (var(--spazio) - var(--sacchetto)) / 2));
      margin-bottom: max(0px, calc((var(--spazio) - var(--sacchetto)) / 2));
    }
    .selettore-corto .scheda { min-height: calc(100svh - var(--barra-tel) - 16px - var(--mv)); grid-template-rows: auto auto 1fr auto; }
    .selettore-corto .scheda-profilo { align-self: center; }
    .selettore-corto .scheda-invito { align-self: end; }
  }
}

/* =================================================================================== Il caffè — 2. la selezione */
/* (Alessandro, 13/10 sera: «più simile a quella di Edo») sul rosso scuro. In apertura p. 15 del catalogo, senza
   titolo: la fascia delle piantagioni a tutta larghezza, tre strisce uguali scurite al 60 % (il velo nero di Edo),
   accostate senza fili (Alessandro, 13/10 notte: le due linee rosse fra le strisce «non hanno per niente senso»,
   via anche sul computer); alta quanto la pagina di Edo (16:9 della larghezza) ma mai più dello schermo,
   e mai meno del testo. I due capoversi al centro, in bianco, nel testo di sezione (22,5 a 1440, dal 16/10: erano in
   sommario piccolo, 30, «scritte enormi»): il nostro primo capoverso è il doppio di quello di Edo; a metà della
   fascia (633 a 1440, mai più di 684) sono cinque righe, che escono un poco sulle strisce accanto. Poi, nella
   sezione normale, per ogni gruppo il nome in Javelin (cap 64 dal 16/10, la misura di sezione: era 42,7, «titoli
   piccoli») sopra una riga sottile
   Rosso Italia (tenuta: «mi piace molto tutto») e i riquadri come pp. 17-19 del catalogo, con la stessa larghezza
   ma più alti (sua richiesta): Arabica tre per riga (416 × 520 a 1440, 4:5), Robusta quattro in fila (302 × 453,
   2:3). Sotto la foto il nome (24 a 1440), la classificazione in Forma Medium (i dettagli tecnici, brandbook p. 52)
   un po' spenta e due righe di dati, lavorazione e in tazza (16). La descrizione (22): dove c'è il mouse sta sopra
   la foto, nascosta, e passando (o col Tab) la foto si sfoca e scurisce e il testo compare in bianco; dove il mouse
   non c'è (telefono, tablet) fa lo stesso il tocco sulla foto (Alessandro, 13/10 notte: «mi piace di più» della
   descrizione sotto; sito.js), e un cerchio col «+» lo dice. Senza script la descrizione sta sotto la
   classificazione, col mouse o senza. Blocco
   a sé, col suo telefono qui sotto. */
.campi { position: relative; display: grid; place-items: center; min-height: min(56.25vw, 100svh); padding: var(--mv) var(--mo); }
.campi-foto { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campi-striscia { display: block; }
.campi-striscia::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.campi-testo { position: relative; width: min(48%, calc(47.5 * var(--u))); text-align: center; text-wrap: balance; }
/* un poco più d'interlinea del testo di sezione (1,2 invece di 1,15): le righe centrate sulla foto erano «molto
   compatte», e la frase che porta alle origini più staccata (Astra, 13/10 notte) */
.campi-frase { font-size: var(--servizio); line-height: 1.2; }
.campi-frase + .campi-frase { margin-top: 1.5em; }
.caffe-selezione .g6 { grid-auto-rows: auto; }
.selezione-gruppo { grid-column: 1 / 7; }
.selezione-gruppo + .selezione-gruppo { margin-top: var(--g); }
.selezione-gruppo-nome { padding-bottom: 16px; margin-bottom: var(--g); border-bottom: 1px solid var(--rosso); }
.origini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--go); row-gap: var(--g); }
.origini-quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.origine { --forma: 4 / 5; --piccolo: max(14px, calc(1.111111 * var(--u))); position: relative; -webkit-tap-highlight-color: transparent; }
.origini-quattro .origine { --forma: 2 / 3; }
.origine:focus-visible { outline: 3px solid var(--rosso); outline-offset: 6px; }
.origine-foto { display: block; aspect-ratio: var(--forma); background: var(--r30); }
.origine-foto img { transition: filter 0.4s ease, transform 0.4s ease; }
.origine-nome { margin: 16px 0 0; font-size: max(20px, calc(1.666667 * var(--u))); line-height: 1.1; letter-spacing: -0.025em; }
.origine-classe { margin-top: 4px; font-size: var(--piccolo); opacity: 0.7; }
.origine-testo { margin: 12px 0 0; font-size: var(--piccolo); line-height: 1.25; }
.origine-dati { margin: 12px 0 0; font-size: var(--piccolo); line-height: 1.25; }
.origine-dati div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 8px; }
.origine-dati div + div { margin-top: 4px; }
.origine-dati dt { font-weight: 500; letter-spacing: 0; text-transform: uppercase; opacity: 0.7; }
.origine-dati dd { margin: 0; }
/* la descrizione sopra la foto quando lo script ha montato il tocco (`.pronta` sulla selezione, sito.js): se lo
   script non c'è, o non arriva, sta sotto la classificazione e si legge comunque (Astra, 13/10 notte: con la
   media query `scripting` restava nascosta anche con lo script non caricato). La apre il passaggio del mouse, il
   fuoco da tastiera e, dove il mouse non c'è, il tocco (`.aperta`). Il passaggio solo dove il mouse c'è: sul
   telefono :hover rimane attaccato all'ultima foto toccata e un secondo tocco non la richiuderebbe */
.pronta .origine-testo {
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: var(--forma); margin: 0;
  display: flex; align-items: center; padding: 0 24px;
  font-size: max(18px, calc(1.527778 * var(--u))); line-height: 1.15; color: var(--bianco);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.pronta .origine.aperta .origine-foto img, .pronta .origine:focus-visible .origine-foto img { filter: blur(10px) brightness(0.45); transform: scale(1.08); }
.pronta .origine.aperta .origine-testo, .pronta .origine:focus-visible .origine-testo { opacity: 1; }
@media (hover: hover) {
  .pronta .origine:hover .origine-foto img { filter: blur(10px) brightness(0.45); transform: scale(1.08); }
  .pronta .origine:hover .origine-testo { opacity: 1; }
}
/* dove il mouse non c'è, un segno dice che la foto si apre (Astra: lo scorrimento di lato non lo dice): il cerchio
   col «+» del catalogo di Edo (p. 24, come in Al banco), pieno del fondo e col «+» Rosso Italia, nell'angolo in
   basso a destra; aperta la descrizione, gira di 45° e diventa «×». Disegnato col fondo: niente carattere */
@media (hover: none) {
  .pronta .origine-foto::after {
    content: ""; position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(var(--rosso), var(--rosso)) center / 16px 2px no-repeat,
                linear-gradient(var(--rosso), var(--rosso)) center / 2px 16px no-repeat, var(--scuro);
    transition: transform 0.4s ease;
  }
  .pronta .origine.aperta .origine-foto::after { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .origine-foto img, .origine-testo, .origine-foto::after { transition: none; }
}
.selezione-sigle { grid-column: 1 / 7; margin-top: var(--g); }
.selezione-sigle summary { list-style: none; cursor: pointer; }
.selezione-sigle summary::-webkit-details-marker { display: none; }
.selezione-sigle summary::after { content: " +"; }
.selezione-sigle[open] summary::after { content: " −"; }
.selezione-sigle dl { margin: var(--g) 0 0; column-count: 2; column-gap: var(--go); }
.sigla { display: grid; grid-template-columns: 9em minmax(0, 1fr); column-gap: 1em; break-inside: avoid; padding-bottom: 16px; }
.sigla dd { margin: 0; }
/* telefono: l'apertura a tutto schermo con una foto sola, le terrazze, la prima di p. 15 (Alessandro, 13/10 notte:
   «la foto … a tutto schermo»; tre strisce larghe 130 non si leggevano); ogni gruppo scorre di lato, un riquadro
   largo 280 alla volta, fino al bordo dello schermo */
@media (max-width: 900px) {
  .campi { min-height: 100vh; min-height: 100svh; }
  .campi-foto { grid-template-columns: minmax(0, 1fr); }
  .campi-striscia + .campi-striscia { display: none; }
  .campi-testo { width: 100%; }
  .selezione-gruppo + .selezione-gruppo { margin-top: 40px; }
  .selezione-gruppo-nome { --cap: 29.3px; margin-bottom: 24px; }
  .origini, .origini-quattro {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--mo);
    margin-inline: calc(-1 * var(--mo)); padding: 0 var(--mo) 8px;
  }
  .origine { flex: 0 0 280px; scroll-snap-align: start; }
  .selezione-sigle { margin-top: 40px; }
  .selezione-sigle dl { column-count: 1; margin-top: 24px; }
  .sigla { grid-template-columns: 7em minmax(0, 1fr); }
}

/* =================================================================================== Il caffè — 3. il criterio */
/* chiude la pagina (decaffeinato e prova in tazza tolti il 13/10 sera). Tre righe (609 a 1440): la foto in finestra
   c1-c2 per tutta l'altezza, in c3-c6 ancorati in basso la frase delle tazzine (sommario grande) e i due capoversi
   sul verde (testo di sezione, 22,5 a 1440 dal 16/10: erano in sommario piccolo, 30, «scritte enormi») */
.caffe-criterio .g6 { grid-template-rows: repeat(3, var(--riga)); }
.criterio-foto { grid-column: 1 / 3; grid-row: 1 / 4; align-self: stretch; }
.criterio-testo { grid-column: 3 / 7; grid-row: 1 / 4; align-self: end; }
.criterio-fatto { margin-top: var(--g); max-width: 34em; font-size: var(--servizio); line-height: 1.15; }
.criterio-fatto + .criterio-fatto { margin-top: 1em; }
/* sul computer alta uno schermo, come le sezioni di La famiglia (Alessandro, 15/10: «fallo grande come una
   sezione»; prima era alta tre righe, 717 su 900): le tre righe si allargano, la foto cresce con loro e la frase
   resta in basso. Sullo schermo verticale e sul telefono decide il contenuto. */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .caffe-criterio { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .caffe-criterio > .g6 { flex: 1 1 auto; width: 100%; grid-template-rows: repeat(3, minmax(var(--riga), 1fr)); }
}

/* =================================================================================== segnaposto e 404 */
.segnaposto .g6 { min-height: var(--r2); }
.segnaposto-titolo { grid-column: 1 / 7; }
.quattrocento .g6 { min-height: var(--r3); align-content: start; justify-items: center; text-align: center; }
.quattrocento-frase { grid-column: 1 / 7; grid-row: 2; color: var(--bianco); }
.quattrocento-invito { grid-column: 1 / 7; grid-row: 2; align-self: end; }
.quattrocento-monogramma { grid-column: 1 / 7; grid-row: 3; }
.quattrocento-monogramma svg { height: auto; width: calc(8.333333 * var(--u)); fill: var(--bianco); }
.quattrocento-codice { grid-column: 1 / 7; grid-row: 4; color: var(--bianco); }

/* =================================================================================== Privacy (18/10) */
/* L'informativa di Astra (modelli/privacy.html): una parte per riga sotto un filo Rosso Italia, come i fatti di Il
   servizio; il titolo della parte a sinistra (c1-c2) nella misura del testo di sezione, il testo a destra (c3-c6)
   in 36 em al massimo, con l'interlinea di un testo lungo e non quella dei sommari. Il testo nel peso medio (500,
   come i dettagli): il sito è tutto in Bold, e su undici parti di testo legale il grassetto di Astra non si
   vedrebbe più. Le righe della griglia qui non hanno l'altezza minima: le parti sono lunghe quanto il loro testo. */
.privacy-pagina .g6 { grid-auto-rows: auto; row-gap: 0; }
.privacy-titolo { grid-column: 1 / 7; }
.privacy-apertura { grid-column: 3 / 7; margin-top: var(--g); padding-bottom: calc(2 * var(--g)); }
.privacy-apertura p:first-child { font-size: var(--md); color: rgba(70, 0, 0, 0.7); }
.privacy-parte {
  grid-column: 1 / 7; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--go);
  border-top: 1px solid var(--rosso); padding: calc(0.833333 * var(--u)) 0 calc(2 * var(--g));
}
.privacy-parte-titolo {
  grid-column: 1 / 3; margin: 0; font-size: var(--servizio); font-weight: inherit; line-height: 1.15;
  letter-spacing: -0.025em; text-wrap: balance;
}
.privacy-testo {
  grid-column: 3 / 7; max-width: 36em; font-size: var(--t); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em;
}
.privacy-testo strong { font-weight: 700; }
.privacy-testo p, .privacy-testo ul { margin: 0 0 0.9em; }
.privacy-testo > :last-child { margin-bottom: 0; }
.privacy-testo ul { padding-left: 1.2em; }
.privacy-testo li + li { margin-top: 0.4em; }
.privacy-testo a { text-decoration: none; border-bottom: 1px solid currentColor; overflow-wrap: anywhere; }
.privacy-testo mark { background: none; color: var(--rosso); }

/* =================================================================================== telefono (fino a 900 px) */
@media (max-width: 900px) {
  /* Privacy: in colonna, il titolo della parte sopra il testo */
  .privacy-apertura, .privacy-parte-titolo, .privacy-testo { grid-column: 1 / 7; }
  .privacy-apertura { margin-top: 24px; padding-bottom: 48px; }
  .privacy-parte { padding: 12px 0 48px; }
  .privacy-parte-titolo { margin-bottom: 16px; font-size: 20px; }
  /* 1. apertura sulla foto: tutta la prima schermata; il marchio largo 260 (a 390) al centro */
  .apertura-foto { padding: 73px var(--mo); }
  /* l'apertura delle altre pagine, come Al banco: titolo 44, punzone alto 110, frase a 20 */
  .apertura-pagina { --pz: 110px; row-gap: 24px; }
  .apertura-titolo { --cap: 44px; }
  .apertura-frase { font-size: 20px; max-width: none; }
  /* 3. e 5. le porte: la foto prima (4:5, al massimo 512 come le altre foto sole), poi il titolo (44), la frase o la
     narrativa (sei righe, come cat. p. 2), le parti, i nomi e i bar */
  .porta { --dato: 15px; --nome: 22px; --servizio: 20px; }
  .porta-foto { max-width: 512px; }
  .porta-titolo { --cap: 29.3px; margin-top: 28px; }
  .porta-riga { margin-top: 20px; max-width: none; }
  .porta-parti { margin-top: 28px; }
  .porta-link { padding: 14px 0; column-gap: 16px; }
  .porta-famiglia .porta-narrativa { margin-top: 20px; --cap-narrativa: 13.3px; --lh-narrativa: 28px; }
  .narrativa-pc { display: none; }
  .narrativa-tel { display: block; }
  .porta-gruppo-titolo { padding-top: 12px; }
  /* Il caffè. 1. il selettore sul telefono, ripensato due volte la notte del 13/10. La prima (Alessandro: «non è
     tanto smartphone friendly»): sacchetto e tag riempivano la prima schermata e la scheda stava sotto, toccando
     un tag il cambio non si vedeva. La seconda, sui suoi commenti alla prima prova: il sacchetto piccolo accanto
     al capoverso «messo così di lato a caso non mi piace» ed è «troppo piccolo»; i valori sotto i nomi degli assi
     «non stanno bene», meglio senza. Ora, in una colonna:
     - il titolo e i nomi delle miscele a 29,3 come i titoli delle altre pagine (dal 16/10: erano a 24 per lasciare
       posto al sacchetto, «titoli piccoli»); il capoverso; sotto, al centro, il sacchetto grande (alto 300, prima
       170). I contenitori di
       sinistra si sciolgono (display: contents) e i pezzi vanno nella griglia di .selettore;
     - subito sotto, i tre tag in fila su tutta la larghezza: una barra sul fondo della miscela che resta in cima
       allo schermo finché si legge la scheda (sticky: il suo contenitore è .selettore, che arriva in fondo alla
       scheda; «mi piace che i 3 tag se scorro in basso rimangono»); toccandone uno dalla prima schermata la
       pagina scorre fino al nome della miscela (sito.js), così il cambio si vede;
     - la scheda: nome, arabica e robusta, descrizione; «In tazza:» e «Ideale per:» uno sotto l'altro, più grandi;
       il profilo senza numeri: la tabella sparisce alla vista ma resta per chi legge con la voce; la nota; la prova.
     A 390 × 664 (iPhone 13, quello che si vede davvero) la schermata del selettore porta titolo, capoverso, sacchetto
     e tag: il sacchetto è alto quanto resta dello schermo tolti titolo, capoverso e barra, fra 200 (iPhone SE: a
     300 i tag finivano sotto la piega) e 360 (tablet: a 420 schiacciava i testi, Astra 13/10 notte). Dal 15/10 il
     selettore viene dopo l'apertura e non ha la testata sopra: si tolgono 315 invece di 364 (via la testata, 73, e
     48 in alto invece di 24), e in Il caffè 327 dal 16/10 (il titolo a 29,3 su due righe è alto 12 in più; il
     selettore corto della Home resta a 24 e 315). Lo schermo senza le barre del browser (svh); dove svh non c'è,
     300 fisso (una variabile con un'unità sconosciuta toglierebbe la misura al sacchetto) */
  .caffe-selettore, .caffe-selezione, .caffe-criterio { --servizio: 17px; }   /* il testo di sezione come Al banco sul telefono */
  .caffe-selettore { --sacchetto: 300px; padding: 48px var(--mo); }
  @supports (height: 100svh) {
    .caffe-selettore { --sacchetto: clamp(200px, calc(100svh - 315px), 360px); }
    .pagina-caffe .caffe-selettore { --sacchetto: clamp(200px, calc(100svh - 327px), 360px); }
  }
  .selettore-sinistra, .selettore-testa, .selettore-scelta { display: contents; }
  .selettore { grid-template-columns: minmax(0, 1fr); column-gap: 0; grid-template-areas: "titolo" "gamma" "sacchetto" "tag" "schede"; }
  .selettore-titolo, .scheda-nome { --cap: 24px; }
  .pagina-caffe .selettore-titolo, .pagina-caffe .scheda-nome { --cap: 29.3px; }
  .selettore-titolo { grid-area: titolo; }
  .selettore-gamma { grid-area: gamma; max-width: 30em; margin-top: 12px; }
  .selettore-sacchetto { grid-area: sacchetto; justify-self: center; margin-top: 20px; }
  .selettore-tag {
    grid-area: tag; position: sticky; top: 0; z-index: 4;
    flex-direction: row; justify-content: space-between; gap: 12px; width: auto;
    margin: 16px calc(-1 * var(--mo)) 0; padding: 10px max(var(--mo), calc(50% - 280px));
    background: var(--fondo); border-bottom: 1px solid var(--orlo);
  }
  /* la barra va da bordo a bordo, i tag su una riga larga al massimo 560 (sul tablet non finiscono ai due bordi);
     un terzo della riga ciascuno (al massimo 160: sul tablet non diventano enormi). Gli spenti si stringono sul
     loro centro, così i tre spazi restano uguali, e sono pieni come sul computer (dal 19/10: smorzati il nome sul
     rosso non si leggeva) */
  .selettore-voce { position: relative; flex: 1 1 0; min-width: 0; max-width: 160px; transform-origin: 50% 50%; }
  /* l'area da toccare alta almeno 44 anche sull'iPhone SE, dove il tag è alto 38 (Astra, 13/10 notte): 8 in più
     sopra e sotto, presi dalla barra, senza cambiare il disegno */
  .selettore-voce::before { content: ""; position: absolute; inset: -8px 0; }
  /* telefono in orizzontale (schermo alto 342 sull'iPhone 13): coi tag da 160 la barra ferma in cima era alta 102,
     un terzo dello schermo; a 110 torna alta come in verticale (77) */
  @media (max-height: 500px) { .selettore-voce { max-width: 110px; } }
  .selettore-destra { grid-area: schede; margin-top: 24px; }
  /* sul tablet (da 601) titolo, capoverso e scheda in una colonna larga 560 al centro, come la riga dei tag, il
     testo sempre allineato a sinistra (Astra, 13/10 notte: testi a sinistra e selettore al centro sembravano due
     impaginazioni diverse) */
  @media (min-width: 601px) {
    .selettore-titolo, .selettore-gamma, .selettore-destra { justify-self: center; width: 100%; max-width: 560px; }
  }
  /* il nome della scheda si ferma 16 sotto la barra: col tocco su un tag e, senza script, col link del tag.
     L'altezza della barra la misura lo script (--barra); senza, 96 (col tag da 160, sul tablet, la barra è alta
     102) */
  .scheda { --asse: 13px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "testa" "voci" "profilo" "nota" "invito"; scroll-margin-top: calc(var(--barra, 96px) + 16px); }
  .scheda + .scheda { margin-top: 56px; }
  .scheda-dichiarazione { margin-top: 12px; }
  .scheda-descrizione { margin-top: 8px; }
  .scheda-voci { flex-direction: column; gap: 14px; margin-top: 24px; font-size: 15px; }
  .scheda-voce { max-width: none; }
  /* il profilo: ai lati 6 em per «Complessità» e «Persistenza»; il disegno prende il resto, fra 172 (a 360) e 220 */
  .scheda-profilo { justify-self: center; margin-top: 20px; }
  .scheda-profilo .radar { width: min(220px, calc(100vw - 2 * var(--mo) - 12em)); }
  .scheda-tabella {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .scheda-nota { margin-top: 4px; }
  .scheda-invito { margin-top: 28px; }
  /* 3. il criterio: foto 3:2 (al massimo 512), poi le frasi */
  .criterio-foto { height: auto; aspect-ratio: 3 / 2; max-width: 512px; }
  .criterio-testo { margin-top: 24px; }
  /* segnaposto e 404 */
  .segnaposto .g6 { min-height: 200px; }
  .quattrocento .g6 { display: flex; flex-direction: column; align-items: center; gap: 24px; min-height: 360px; }
  .quattrocento-monogramma svg { width: 120px; }
}

/* =================================================================================== La famiglia (14/10 notte) */
/* Proposta in «Sito web/La famiglia - proposta.md», rivista col giro di Astra. Superfici: l'apertura sulla foto →
   scuro (chi c'è) → bianco (la linea del tempo) → scuro (i bar) → piede scuro (la prova in tazza sul Rosso Italia
   l'ha tolta Alessandro il 15/10). */

/* ---- 0. l'apertura: quella comune (in cima, .apertura-pagina), col marchio al centro come nelle altre pagine. Fino
   alla v2 della foto il marchio scendeva in fondo, perché le teste stavano al centro; dalla v4 (15/10) loro due
   stanno di lato sul computer e in alto sul telefono, e la regola è tolta */

/* ---- 1. chi c'è: tutto al centro, come cat. p. 31. Dal 15/10 senza il ritratto (a mezzo busto dal 14/10) e senza il
   punzone fra i nomi: con l'apertura la foto e il punzone si sono appena visti. Il titolo, la riga 2 della narrativa
   più in basso (15/10: «quasi tocca la frase sopra»: le gambe di «figlio» le arrivavano a 2 px) e i due nomi. */
.famiglia-chi { padding-block: var(--g); }
.chi { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: var(--larghezza-griglia); margin-inline: auto; }
.chi-titolo svg { margin-inline: auto; }
.chi-riga { margin-top: calc(1.35 * var(--g)); color: var(--bianco); }
.chi-riga .narrativa-riga svg { margin-inline: auto; }
/* i due nomi al posto delle firme, prima il padre (Alessandro, 15/10: Alberto a sinistra, come nella foto
   dell'apertura); ogni nome stretto verso il centro, col ruolo centrato sotto, uguale nei due (15/10: col nome a
   destra in bandiera a destra «titolare» finiva sul filo destro e i due blocchi non erano coerenti) */
.chi-firme {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  column-gap: calc(3 * var(--g)); width: min(100%, calc(52 * var(--u))); margin-top: calc(1.5 * var(--g));
}
.chi-nome .k, .chi-nome .md { display: block; }
.chi-nome .md { margin-top: 0.3em; opacity: 0.85; }
.chi-nome { text-align: center; }
.chi-firme .chi-nome:first-child { justify-self: end; }
.chi-firme .chi-nome:last-child { justify-self: start; }

/* ---- 2. tre generazioni nel caffè: il titolo in r1 (una riga: 1.072 px a 1440), a sinistra in c1-c2 la legenda in
   alto e la nota sulle date in basso, a destra in c3-c6 il binario. Una tappa per riga: il binario (48 px), la
   tessera dell'anno (larga quanto il periodo più lungo, «Fine anni ’50», alta 48), la riga. Le righe si toccano
   (nessuna gronda fra l'una e l'altra), così i tratti del binario restano attaccati; l'aria sta dentro la riga.
   --cy è il centro della tessera, dove stanno i pallini: i tratti «a-centro» finiscono lì, i «da-centro» partono. */
/* righe alte quanto il contenuto: con le righe di griglia da 175 sotto il titolo restava un vuoto di 110 px */
.famiglia-date .g6, .famiglia-bar .g6 { grid-auto-rows: auto; }
.date-titolo { grid-column: 1 / 7; grid-row: 1; }
.date-lato { grid-column: 1 / 3; grid-row: 2; }
.binario {
  grid-column: 3 / 7; grid-row: 2;
  --bw: 48px; --xf: 12px; --xt: 36px; --xm: 24px; --punto: 12px; --bollo: 34px; --pad: 10px;
  --tessera-l: max(196px, calc(15.833333 * var(--u))); --tessera-h: max(40px, calc(3.333333 * var(--u))); --anno: max(18px, calc(1.527778 * var(--u)));
  --cy: calc(var(--pad) + var(--tessera-h) / 2);
}
.binario-tappe { list-style: none; margin: 0; padding: 0; }
.tappa { display: grid; grid-template-columns: var(--bw) var(--tessera-l) minmax(0, 1fr); column-gap: calc(0.571429 * var(--g)); align-items: start; padding: var(--pad) 0; }
.tappa-segno { position: relative; align-self: stretch; margin: calc(-1 * var(--pad)) 0; }
.tappa-anno { display: block; }
.tessera {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: var(--tessera-h); background: var(--scuro); color: var(--bianco); perspective: 400px;
}
/* la riga della palette, a metà altezza, come nei tabelloni Solari: dietro l'anno, si vede solo sul fondo della
   tessera (davanti sembrava una sottolineatura) */
.tessera::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.5); }
.tessera svg { position: relative; z-index: 1; display: block; height: var(--anno); width: auto; overflow: visible; fill: currentColor; transform-origin: 50% 0; }
/* la sbarra sotto ogni parola resta, come in tutti i titoli Javelin: senza, i piedi della A e del 5 sembravano una
   riga rotta (Alessandro, 14/10: «fatte male per quanto riguarda la riga sotto») */
.tappa-riga { padding-top: calc((var(--tessera-h) - var(--lh-t) * var(--t)) / 2); }
/* i tratti: 2 px, famiglia e insieme Rosso Italia, torrefazione rosso scuro */
.l { position: absolute; width: 2px; top: 0; bottom: 0; transform-origin: 50% 0; }
.l-f { left: calc(var(--xf) - 1px); background: var(--rosso); }
.l-t { left: calc(var(--xt) - 1px); background: var(--scuro); }
.l-m { left: calc(var(--xm) - 1px); background: var(--rosso); }
.l.da-centro { top: var(--cy); }
.l.a-centro { bottom: auto; height: var(--cy); }
/* i pallini: pieni Rosso Italia sulla famiglia e dopo l'unione; anello vuoto rosso scuro sulla torrefazione del 1974;
   il «+» di p. 4 dove le due linee si uniscono (il bollo le copre tutte e due); la freccia di p. 4 in fondo */
.punto { position: absolute; top: var(--cy); width: var(--punto); height: var(--punto); margin: calc(var(--punto) / -2) 0 0 calc(var(--punto) / -2); border-radius: 50%; }
.punto-famiglia { left: var(--xf); background: var(--rosso); }
.punto-torrefazione { left: var(--xt); background: var(--panna); box-shadow: inset 0 0 0 2px var(--scuro); }
.punto-insieme { left: var(--xm); background: var(--rosso); }
.punto-unione, .punto-fine { left: var(--xm); width: var(--bollo); height: var(--bollo); margin: calc(var(--bollo) / -2) 0 0 calc(var(--bollo) / -2); border-radius: 0; }
.punto-unione svg, .punto-fine svg { display: block; width: 100%; height: 100%; }
.binario-fine { position: relative; height: calc(var(--cy) + var(--bollo) / 2); width: var(--bw); }
.binario-fine .punto-fine { top: auto; bottom: 0; margin: 0 0 0 calc(var(--bollo) / -2); }
/* la legenda: un tratto col suo pallino, come sul binario */
.date-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6em; }
.legenda { display: flex; align-items: center; gap: 0.6em; }
.legenda-segno { position: relative; flex: none; width: 36px; height: 12px; }
.legenda-segno::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; }
.legenda-segno::after { content: ""; position: absolute; left: 12px; top: 0; width: 12px; height: 12px; border-radius: 50%; }
.legenda-famiglia .legenda-segno::before, .legenda-famiglia .legenda-segno::after { background: var(--rosso); }
.legenda-torrefazione .legenda-segno::before { background: var(--scuro); }
.legenda-torrefazione .legenda-segno::after { background: var(--panna); box-shadow: inset 0 0 0 2px var(--scuro); }

/* ---- 3. i nostri bar: il titolo in Javelin e la riga su tutta la larghezza (Alessandro, 14/10: «perché andare a
   capo?»: sul computer largo sta in una riga; sotto i 1280 la riga può andare a capo), le due facciate 3:2 in c1-c3
   e c4-c6 (645 × 430 a 1440). Il banco sta sopra la facciata, trasparente: compare col mouse (dove c'è) o col
   comando, che lo script mostra. */
.bar-testa { grid-column: 1 / 7; grid-row: 1; }
.bar-riga { margin-top: calc(0.75 * var(--g)); }
@media (min-width: 1280px) {
  .bar-riga { white-space: nowrap; }
}
.bar { margin: 0; grid-row: 2; }
.bar-1 { grid-column: 1 / 4; }
.bar-2 { grid-column: 4 / 7; }
.bar-foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.bar-foto .finestra { position: absolute; inset: 0; }
.bar-banco { opacity: 0; }
.bar.mostra-banco .bar-banco { opacity: 1; }
@media (hover: hover) {
  .bar-foto:hover .bar-banco { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .bar-banco { transition: opacity 0.35s ease; }
}
.bar-didascalia { margin-top: calc(0.5 * var(--g)); }
.bar-indirizzo { margin-top: 0.3em; }
.bar-comando {
  margin-top: calc(0.5 * var(--g)); padding: 0 0 4px; background: none; border: 0; border-bottom: 2px solid var(--rosso);
  color: inherit; font: inherit; font-size: var(--t); line-height: 1; letter-spacing: 0; text-transform: uppercase; cursor: pointer;
}
.bar-comando:hover, .bar-comando:focus-visible { padding-bottom: 3px; border-bottom-width: 3px; }
.bar-comando[hidden] { display: none; }

/* ---- le sezioni alte uguali sul computer (Alessandro, 14/10: «rendi le sezioni proporzionali in termini di
   altezza»): ognuna è una schermata (l'apertura lo è già, con la testata sopra); il contenuto sta al centro. Sullo
   schermo verticale e sul telefono decide il contenuto. */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .famiglia-chi, .famiglia-date, .famiglia-bar { display: flex; flex-direction: column; justify-content: center; }
  .famiglia-chi, .famiglia-date, .famiglia-bar { min-height: 100vh; min-height: 100svh; }
  .famiglia-date > .g6, .famiglia-bar > .g6 { width: 100%; }
}

/* ---- La famiglia sul telefono (fino a 900): tutto in colonna. Il binario a sinistra (36 px), a destra la tessera
   e sotto la riga a tutta larghezza; i bar uno sotto l'altro, col comando sempre visibile. */
@media (max-width: 900px) {
  .famiglia-chi { padding-block: 48px; }
  .chi-titolo { --cap: 29.3px; }
  .chi-riga { margin-top: 28px; }
  /* i nomi a 12 px: «ALESSANDRO», una parola sola, sta nella sua colonna */
  .chi-firme { column-gap: 24px; margin-top: 32px; }
  .chi-nome .k, .chi-nome .md { font-size: 12px; }
  .date-titolo { --cap: 29.3px; }
  .date-lato { margin-top: 24px; gap: 16px; }
  .binario { margin-top: 32px; --bw: 36px; --xf: 8px; --xt: 28px; --xm: 18px; --punto: 10px; --bollo: 28px;
    --tessera-l: 150px; --tessera-h: 36px; --anno: 15px; }
  .tappa { grid-template-columns: var(--bw) minmax(0, 1fr); grid-template-areas: "segno anno" "segno riga"; column-gap: 12px; padding: var(--pad) 0 calc(var(--pad) + 4px); }
  .tappa-segno { grid-area: segno; margin: calc(-1 * var(--pad)) 0 calc(-1 * var(--pad) - 4px); }
  .tappa-anno { grid-area: anno; width: var(--tessera-l); }
  .tappa-riga { grid-area: riga; padding-top: 8px; }
  .bar { margin-top: 32px; }
}

/* ============================================================ La Home sul telefono — le fermate dello scorrimento */
/* Le fermate sul telefono (Il caffè e Home, dal 14/10) sono tolte il 19/10: Alessandro, dal telefono, «ci sono
   pagine che scorrono di più e che scorrono di meno. Facciamo che scorrano tutte». Il tocco su un tag porta ancora
   la scheda sotto la barra (scroll-margin-top di .scheda).
   Nella Home tornano il 19/10 sera, su un parere arrivato ad Alessandro: «rendere meno scorrevole la home che si
   blocca a inizio di ciascuna sezione come era prima». Sono le regole del 14-15/10, tali e quali: fermate morbide
   (proximity), la pagina si aggancia solo se ci si ferma vicino a una fermata e una spinta forte passa oltre. Dall'alto
   la prima schermata, le due schermate del caffè (il selettore coi tag, poi la scheda sotto la barra; solo quella in
   vista), le due porte, il servizio, la prova in tazza e il piede. Solo sul telefono in verticale (fino a 600 di
   larghezza): sul tablet un terzo di schermo prendeva quasi tutta la pagina, in orizzontale ogni parte è più alta
   dello schermo. Sul computer niente. Dove :has non c'è la pagina scorre libera. Il caffè resta libera. */
@media (max-width: 600px) and (min-height: 501px) {
  html:has(> body.pagina-home) { scroll-snap-type: y proximity; }
  .pagina-home .apertura, .pagina-home .selettore-corto, .pagina-home .scheda, .pagina-home .porta, .pagina-home .banco-servizio, .pagina-home .banco-prova { scroll-snap-align: start; }
  .pagina-home .pronto .scheda:not(.attiva) { scroll-snap-align: none; }
  .pagina-home .piede { scroll-snap-align: end; }
}

/* ---- banco.css ---- */
/* Caffè Carati — stile di Al banco (modelli/banco.html; il 13/10 notte «Il servizio», tornata «Al banco» il 14/10) e
   del servizio «Ci pensiamo noi», che dal 15/10 sta nella Home (modelli/_parti/servizio.html).
   File a sé, dopo pagine.css: la pagina si costruisce in una copia del sito separata da quella di Il caffè (13/10 sera), e così le
   due non si toccano nello stesso foglio. */

/* =================================================================================== il servizio (nella Home) */
/* «Ci pensiamo noi» come p. 24 del catalogo (sul rosso scuro, Edo #220000): il titolo in Javelin bianco a sinistra
   (c1-c3) e il capoverso in tenue a destra (c4-c6), allineati in alto come in Edo: la cima delle maiuscole del
   capoverso alla cima del titolo (Alessandro, 14/10; prima era il fondo del capoverso sulla linea di base del
   titolo). Il capoverso sale di 0,172 em: in Forma DJR Text Bold ascendente 0,9, discendente 0,3, maiuscole 0,703
   (misurate in Chrome), con interlinea 1,15 la cima delle maiuscole sta 0,172 em sotto la riga; l'SVG del titolo
   invece comincia già sulla cima delle maiuscole. Lo stesso allineamento vale per tutte le teste di Al banco.
   Sotto, i quattro blocchi in fila come le robuste di Il caffè (302 a 1440): la foto 3:4 come le sue (302 × 403),
   l'etichetta in bianco e la riga in tenue, Forma Bold 22,5 a 1440 come i suoi 60 pt (le sue colonne sono larghe
   325 a quella scala). Il titolo è più piccolo di un titolo di sezione (cap 52 invece di 64): in Edo occupa meno di
   metà pagina e lascia il posto al capoverso. A 1440 × 900 tutto in una schermata.
   Il cerchio col «+» sta a metà altezza della foto, a cavallo della gronda: largo un quarto della foto (113 su 451
   in Edo), pieno del fondo, il «+» Rosso Italia. Le foto in bianco e nero anche quando la sorgente è a colori (la
   scena provvisoria delle macchine). Il fondo: lo scuro, o il rosso scuro profondo con `.profondo` (nella Home, fra
   il rosso della miscela e lo scuro delle persone: due scure uguali di fila si fondevano). */
.banco-servizio {
  --fondo: var(--scuro);
  --tenue: rgba(255, 255, 255, 0.78);
  --piu: max(48px, calc(5.243056 * var(--u)));
  background: var(--fondo);
}
.banco-servizio.profondo { --fondo: #220000; }
.banco-servizio .titolo { color: var(--bianco); }
.banco-servizio .g6 { grid-auto-rows: auto; }
.servizio-titolo { --cap: max(36px, calc(3.611111 * var(--u))); grid-column: 1 / 4; grid-row: 1; align-self: start; }
.servizio-testo {
  grid-column: 4 / 7; grid-row: 1; align-self: start; margin-top: -0.172em;
  font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue); text-wrap: pretty;
}
.servizio-blocchi {
  grid-column: 1 / 7; grid-row: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--go);
  list-style: none; margin: 0; padding: 0;
}
.servizio-cornice { position: relative; }
.servizio-foto { display: block; aspect-ratio: 3 / 4; background: var(--r30); }
.servizio-foto img { object-position: var(--fx, 50%) 50%; filter: grayscale(1); }
.servizio-piu {
  position: absolute; z-index: 1; top: 50%; right: calc(-0.5 * (var(--piu) + var(--g)));
  width: var(--piu); height: var(--piu); border-radius: 50%; background: var(--fondo);
  transform: translateY(-50%);
}
.servizio-piu::before, .servizio-piu::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--piu) * 0.25); height: max(2px, calc(var(--piu) * 0.028)); background: var(--rosso);
  transform: translate(-50%, -50%);
}
.servizio-piu::after { transform: translate(-50%, -50%) rotate(90deg); }
.servizio-etichetta {
  margin: calc(0.75 * var(--g)) 0 0;
  font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--bianco);
}
.servizio-riga {
  margin-top: 0.6em; max-width: 19em;
  font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue);
}
/* allargato (15/10 sera, Alessandro: «Ci pensiamo noi va allargato»; sul suo 1920 i quattro blocchi stavano in una
   striscia in mezzo al fondo): sullo schermo orizzontale la sezione è alta uno schermo, come p. 24 che occupa
   tutta la pagina: le foto crescono in altezza fino a riempirla (almeno 280), etichette e righe restano sulla
   stessa riga nei quattro blocchi (sottogriglia). Sullo schermo verticale le foto restano 3:4. Il cerchio col «+»
   resta a metà della gronda, che è in % della fila dei blocchi: la fila è il contenitore, mezza gronda =
   1,576577 cqw. Dal 15/10 sera al 16/10 la sezione andava anche da un margine all'altro sopra i 1440: è tornata
   nella griglia come il resto della pagina (Alessandro, 16/10: «tutte le frasi partono da zone diverse»). */
@media (min-width: 901px) {
  .servizio-blocchi { container-type: inline-size; }
  .servizio-piu { right: calc(-0.5 * var(--piu) - 1.576577cqw); }
}
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .banco-servizio .g6 { min-height: calc(100vh - 2 * var(--mv)); min-height: calc(100svh - 2 * var(--mv)); grid-template-rows: auto minmax(0, 1fr); }
  .servizio-blocchi { align-self: stretch; grid-template-rows: minmax(280px, 1fr) auto auto; }
  .servizio-blocco { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .servizio-foto { aspect-ratio: auto; height: 100%; }
}
/* la porta di Il servizio nella Home (`porta-servizio`, 16/10): come le altre porte (pagine.css, «la regola delle
   porte»), il titolo è il nome della pagina e il capoverso sta sotto, mezza gronda, nella misura delle frasi; i
   blocchi una gronda più giù. Ogni blocco porta alla sua sezione di Il servizio: il link è sull'etichetta, con la
   freccia delle porte, e copre tutto il blocco (::after); al passaggio la freccia scivola e la foto si schiarisce */
.porta-servizio .g6 { row-gap: 0; }
.porta-servizio .servizio-testo { grid-column: 1 / 4; grid-row: 2; margin-top: calc(0.5 * var(--g)); max-width: 24em; }
.porta-servizio .servizio-blocchi { grid-row: 3; margin-top: var(--g); }
.porta-servizio .servizio-blocco { position: relative; }
.servizio-link { color: inherit; text-decoration: none; }
.servizio-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.servizio-link:focus-visible { outline: none; }
.servizio-link:focus-visible::after { outline: 3px solid var(--bianco); outline-offset: 4px; }
.servizio-freccia { display: inline-block; height: 0.7em; width: auto; margin-left: 0.45em; vertical-align: 0.02em; }
.servizio-blocco:hover .servizio-freccia, .servizio-link:focus-visible .servizio-freccia { transform: translateX(0.25em); }
.porta-servizio .servizio-foto img { transition: filter 0.2s ease; }
.porta-servizio .servizio-blocco:hover .servizio-foto img { filter: grayscale(1) brightness(1.15); }
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .porta-servizio .g6 { grid-template-rows: auto auto minmax(0, 1fr); }
}

/* =================================================================================== Al banco — 1. l'apertura sulla foto */
/* Come la prima schermata della Home (pagine.css, .apertura-foto, .apertura-sfondo col velo, .apertura-scatto,
   .apertura-marchio): alta quanto lo schermo, la testata trasparente sopra, una scena sola, ferma, velata di scuro
   (le tre scene in dissolvenza le ha tolte Alessandro il 15/10, poche ore dopo: troppo lente, e veloci
   darebbero mal di testa). Al centro, in colonna: «Al banco» in Javelin bianco (cap 76 a 1440: il disegno viene
   largo 465, Astra: «430-500»), il Biscione alto 170 (Astra: «150-180», e il velo sta sulla foto, non sul metallo),
   la frase in bianco al corpo 27 su tre righe al massimo. Dal 15/10 sera, chiudendo la pagina, le misure sono
   quelle comuni (pagine.css, .apertura-pagina, nate da queste); qui resta solo la frase più larga (26 em contro
   24: è più lunga di quelle di Il caffè e La famiglia). */
@media (min-width: 901px) {
  .banco-apertura .apertura-frase { max-width: 26em; }
}

/* =================================================================================== Al banco — 2. il decaffeinato */
/* Una sezione intera (Alessandro, 15/10: «mi piace avere il sito web per sezioni… la sezione del deca è fin troppo
   piccola»; prima era la scheda di p. 13, alta 580 a 1440 e col vuoto in mezzo). Sul computer è alta uno schermo,
   come le sezioni di La famiglia; a destra (c4-c6) la scatola delle capsule alta quanto la sezione, 645 × 792 a
   1440 (la foto è 4:5, la finestra le somiglia: taglia poco). A sinistra tre blocchi: in alto, alla cima della
   scatola, il nome (cap della sezione, 64) e l'attacco in bianco a 32; in mezzo la caffeina, la cifra a 96 con
   l'etichetta sopra e la riga sotto in tenue (con due blocchi soli in mezzo restava un vuoto di 330); in basso, sul
   fondo della scatola come la tabella di Edo, i due formati affiancati, ognuno sotto un filo Rosso Italia (come i
   dati di orzo e ginseng): il nome a 30, quantità e macchina in piccolo, la riga su per quale bar fa. Sullo schermo
   verticale e sul telefono decide il contenuto, la scatola torna 4:5. */
.banco-deca, .banco-tazze {
  --tenue: rgba(255, 255, 255, 0.78);
  --filo: var(--scuro);
  --dato: max(14px, calc(1.09375 * var(--u)));
  --img: max(180px, calc(15.277778 * var(--u)));
}
/* le righe: nome, attacco, (spazio), caffeina, (spazio), formati: i due spazi uguali mettono la caffeina a metà */
.deca { grid-template-rows: auto auto 1fr auto 1fr auto; grid-auto-rows: auto; row-gap: 0; }
.deca-nome { grid-column: 1 / 4; grid-row: 1; align-self: start; }
.deca-attacco {
  grid-column: 1 / 4; grid-row: 2; margin: calc(1.25 * var(--g)) 0 0; max-width: 17em;
  font-size: max(22px, calc(2.222222 * var(--u))); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
}
.deca-caffeina { grid-column: 1 / 4; grid-row: 4; margin-top: calc(1.25 * var(--g)); }
/* la caffeina: la frase in bianco a 27 (che non si toglie mai del tutto), la riga in tenue, poi la cifra in Forma a
   96 con accanto, sulla sua linea di base, la didascalia del limite di legge */
.deca-mai {
  margin: 0; max-width: 18em;
  font-size: max(20px, calc(1.875 * var(--u))); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
}
.deca-testo {
  margin: calc(0.555556 * var(--u)) 0 0; max-width: 24em;
  font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue); text-wrap: pretty;
}
.deca-cifra { margin: calc(1.666667 * var(--u)) 0 0; display: flex; align-items: last baseline; column-gap: calc(1.388889 * var(--u)); }
.deca-cifra-numero { flex: none; font-size: max(56px, calc(6.666667 * var(--u))); line-height: 0.9; letter-spacing: -0.04em; }
.deca-cifra-dida { max-width: 11em; font-size: max(15px, calc(1.25 * var(--u))); line-height: 1.2; letter-spacing: -0.02em; color: var(--tenue); }
.deca-formati {
  grid-column: 1 / 4; grid-row: 6; align-self: end; margin: calc(1.25 * var(--g)) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g);
}
.deca-formato { border-top: 1px solid var(--rosso); padding-top: calc(1.111111 * var(--u)); }
.deca-formato-nome { margin: 0; font-size: max(22px, calc(2.083333 * var(--u))); line-height: 1.1; letter-spacing: -0.025em; }
.deca-formato-dati { margin: 0.35em 0 0; font-size: var(--dato); line-height: 1.3; color: var(--tenue); }
.deca-formato-riga {
  margin: calc(0.833333 * var(--u)) 0 0; max-width: 20em;
  font-size: max(16px, calc(1.25 * var(--u))); line-height: 1.2; letter-spacing: -0.02em; color: var(--tenue); text-wrap: pretty;
}
.deca-foto { grid-column: 4 / 7; grid-row: 1 / -1; align-self: start; display: block; aspect-ratio: 4 / 5; background: var(--r30); }
.deca-foto img { object-position: 50% 60%; }
/* sul computer la scatola va al vivo (Alessandro, 15/10: «non mi risulta grande come tutta la mia pagina»; sul suo
   1920 la finestra stava in mezzo al fondo, con 294 di margine): la metà destra della sezione, dal bordo alto al
   basso e fino al bordo destro. La metà cade a metà della gronda fra c3 e c4 a ogni larghezza (margini e gronde
   sono in percentuale), quindi il testo resta a 21 dalla foto come prima */
@media (min-width: 901px) {
  .banco-deca { position: relative; }
  /* align-self torna a stretch: Chrome applica l'allineamento anche ai posizionati, e con «start» la foto restava
     alta zero */
  .banco-deca .deca-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; aspect-ratio: auto; align-self: stretch; }
}
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .banco-deca .deca { min-height: calc(100vh - 2 * var(--mv)); min-height: calc(100svh - 2 * var(--mv)); }
}

/* =================================================================================== Al banco — 2. le altre tazze */
/* Orzo e ginseng come pp. 21, 22 del catalogo, sul suo rosso scuro profondo (#220000: i render ci sono nati sopra).
   In alto i due nomi in Javelin (cap 52 a 1440): sono la scelta. Il nome scelto è in Rosso Italia con la sua
   sbarra, che si ridisegna a ogni scelta, come la pagina corrente nel menu; l'altro in bianco al 60 %, senza
   sbarra (Astra, primo giro: al 35 % «possono sembrare indisponibili»). Sotto, la scheda scelta (stanno tutte e
   due nella stessa cella, alta quanto la più alta: cambiando la pagina non salta).
   La scheda come quella di Edo: i dati in una riga, Forma 15,75 (i suoi 42 pt), divisi da un filo Rosso Italia;
   il capoverso in tenue 22,5; i formati in due colonne di tre colonne di griglia, ognuno con la sua riga di
   tabella (fili #460000 come i suoi, sottili) e sotto l'immagine, posata in basso, alta 220 a 1440 (330 nella prima
   versione, poi 280: Astra la voleva più compatta). Dal 15/10 sera la sezione è più bassa, 732 a 1440 invece di 865,
   con l'immagine e gli spazi fra le parti più piccoli (Alessandro: «un po' più piccola la sezione visto che non sta
   in una schermata»).
   La capsula: il render di Edo è senza scritte (nel catalogo marchio e nome sono vettori sopra il render): qui il
   logotipo, la byline e il nome stanno sopra la figura alle posizioni misurate sul catalogo (p. 21, in % del render
   ritagliato; i corpi in % della sua larghezza, cqw). La busta: la busta bianca a destra, la polvere davanti in
   basso a sinistra, posizioni e proporzioni di p. 21 (orzo) e p. 22 (ginseng). */
.banco-tazze { --profondo: #220000; background: var(--profondo); color: var(--bianco); }
/* la testa come le altre sezioni (15/10): i nomi a sinistra (c1-c3) e la riga a destra (c4-c6), la cima delle
   maiuscole della riga alla cima dei nomi (-0,172 em); sotto, le schede a tutta griglia */
.tazze { grid-auto-rows: auto; }
.tazze-radio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tazze-nomi { grid-column: 1 / 4; grid-row: 1; display: flex; flex-wrap: nowrap; align-items: flex-end; column-gap: calc(5.833333 * var(--u)); }
.tazze-riga {
  grid-column: 4 / 7; grid-row: 1; align-self: start; margin: -0.172em 0 0;
  font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue); text-wrap: pretty;
}
.tazze-nome {
  --cap: max(36px, calc(3.611111 * var(--u)));
  display: block; cursor: pointer; color: var(--bianco); opacity: 0.6;
  transition: opacity 0.3s ease, color 0.3s ease; -webkit-tap-highlight-color: transparent;
}
.tazze-nome svg { display: block; height: var(--cap); width: auto; overflow: visible; fill: currentColor; }
.tazze-nome .sbarra { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
@media (hover: hover) { .tazze-nome:hover { opacity: 0.9; } }
#tazza-orzo:checked ~ .tazze-nomi .tazze-nome-orzo,
#tazza-ginseng:checked ~ .tazze-nomi .tazze-nome-ginseng { color: var(--rosso); opacity: 1; cursor: default; }
/* il nome scelto si riconosce anche senza il colore: un filo Rosso Italia sotto, staccato dalle lettere (Astra,
   secondo giro), come la lingua attiva nella testata. Il filo c'è sempre, trasparente sull'altro nome */
.tazze-nome::after { content: ""; display: block; height: 3px; margin-top: calc(var(--cap) * 0.55); background: transparent; transition: background-color 0.3s ease; }
#tazza-orzo:checked ~ .tazze-nomi .tazze-nome-orzo::after,
#tazza-ginseng:checked ~ .tazze-nomi .tazze-nome-ginseng::after { background: var(--rosso); }
#tazza-orzo:checked ~ .tazze-nomi .tazze-nome-orzo .sbarra,
#tazza-ginseng:checked ~ .tazze-nomi .tazze-nome-ginseng .sbarra { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  #tazza-orzo:checked ~ .tazze-nomi .tazze-nome-orzo .sbarra,
  #tazza-ginseng:checked ~ .tazze-nomi .tazze-nome-ginseng .sbarra { animation: tazza-sbarra 0.5s linear both; }
}
@keyframes tazza-sbarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#tazza-orzo:focus-visible ~ .tazze-nomi .tazze-nome-orzo,
#tazza-ginseng:focus-visible ~ .tazze-nomi .tazze-nome-ginseng { outline: 3px solid var(--rosso); outline-offset: 8px; }
/* le due schede nella stessa cella, e le loro tre parti (dati, capoverso, formati) sulle stesse tre righe
   (sottogriglia): ogni riga è alta quanto la più alta delle due, così cambiando scheda niente si sposta, né in
   orizzontale né in verticale (Alessandro, 15/10: «così le sbarre e i titolini da uno con l'altro non si muovono») */
.tazze-schede { grid-column: 1 / 7; grid-row: 2; display: grid; grid-template-rows: auto auto auto; }
.tazza {
  grid-area: 1 / 1 / 4 / 2; display: grid; grid-template-rows: subgrid;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.tazza-dati { grid-row: 1; }
.tazza-testo { grid-row: 2; }
.tazza-formati { grid-row: 3; }
#tazza-orzo:checked ~ .tazze-schede .tazza-orzo,
#tazza-ginseng:checked ~ .tazze-schede .tazza-ginseng { opacity: 1; visibility: visible; transition: opacity 0.35s ease 0.1s, visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .tazze-nome, .tazza { transition: none; }
}
/* i dati in tre terzi della griglia, uguali per orzo e ginseng (15/10; prima ogni dato era largo quanto il suo
   testo e i fili cambiavano posto da una scheda all'altra): ingredienti in c1-c2, «In tazza» in c3-c4, il terzo
   dato in c5-c6. Il filo Rosso Italia sta a metà della gronda, e il testo parte sulla colonna */
.tazza-dati {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--go);
  margin: 0; font-size: var(--dato); line-height: 1.3; letter-spacing: -0.01em;
}
.tazza-dato { position: relative; }
.tazza-dato-ingredienti { grid-column: 1 / 3; }
.tazza-dato-tazza { grid-column: 3 / 5; }
.tazza-dato-nota { grid-column: 5 / 7; }
.tazza-dato + .tazza-dato::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-0.5 * var(--g)); border-left: 1px solid var(--rosso); }
.tazza-dato dd { max-width: 30em; text-wrap: pretty; }
.tazza-dato dt { color: var(--tenue); }
.tazza-dato dd { margin: 0.1em 0 0; }
.tazza-dato u { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.tazza-testo {
  margin-top: calc(0.75 * var(--g)); max-width: 44em;
  font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue);
}
.tazza-formati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--go); margin-top: calc(0.75 * var(--g)); }
/* le tabelle dei formati, di tutte e tre le schede */
.formati { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; }
.formati th, .formati td { padding: 0.55em 0.6em; text-align: left; font-weight: inherit; border-bottom: 1px solid var(--filo); }
/* le tre colonne come in Edo (formato e quantità strette, la macchina più larga): «Macchina espresso» in una riga */
.formati th:nth-child(1) { width: 28%; }
.formati th:nth-child(2) { width: 30%; }
.formati th:nth-child(3), .formati td:nth-child(3) { width: 42%; }
.formati-due th:nth-child(1) { width: 40%; }
.formati-due th:nth-child(2), .formati-due td:nth-child(2) { width: 60%; }
.formati thead th { padding-top: 0; font-size: var(--dato); color: var(--tenue); }
.formati tbody th { color: var(--bianco); }
.formati tbody td { color: var(--tenue); }
.formato-immagine { height: var(--img); margin-top: calc(0.5 * var(--g)); display: flex; align-items: flex-end; justify-content: center; }
.capsula { position: relative; height: 100%; aspect-ratio: 2892 / 3657; container-type: inline-size; }
.capsula .figura, .capsula .figura img { width: 100%; height: 100%; }
.capsula-scritte { position: absolute; inset: 0; color: var(--rosso); pointer-events: none; }
.capsula-logotipo { position: absolute; left: 26.72%; top: 28.19%; width: 43.85%; height: auto; }
.capsula-riga, .capsula-nome { position: absolute; left: 0; right: 0; text-align: center; line-height: 1; white-space: nowrap; letter-spacing: 0; text-transform: uppercase; }
.capsula-riga { font-family: var(--stretto); font-weight: 700; }
.capsula-riga-1 { top: 43.33%; font-size: 2.45cqw; }
.capsula-riga-2 { top: 45.84%; font-size: 1.99cqw; }
.capsula-nome { top: 51.59%; font-size: 7.01cqw; font-weight: 700; }
.sacco { --r: 0.9258; --bl: 31.5%; --bw: 68.5%; --pt: 70.3%; --pw: 60.31%; position: relative; height: 100%; aspect-ratio: var(--r); }
.tazza-ginseng .sacco { --r: 0.9368; --bl: 31.99%; --bw: 68.01%; --pt: 71.9%; --pw: 60%; }
.sacco-busta { position: absolute; left: var(--bl); top: 0; width: var(--bw); }
.sacco-polvere { position: absolute; left: 0; top: var(--pt); width: var(--pw); }

/* =================================================================================== Al banco — 3. tutto per il banco */
/* Due sezioni fatte come il decaffeinato (15/10 sera; Alessandro: «così non si capisce niente… su due colonne no.
   Piuttosto facciamo due sezioni con elenchi sulla sinistra e foto sulla destra»): a sinistra (c1-c3) il titolo
   (cap della sezione, 64 a 1440) con sotto la riga in tenue, e l'elenco in fondo, sulla linea di fondo della foto;
   a destra la foto di p. 28 al vivo, la metà destra della sezione dal bordo alto al basso (i render sono 16:9 con
   l'oggetto al centro: nella finestra alta resta intero). La prima sul bianco con la tazzina, la seconda sullo
   scuro con la latta: dopo il rosso scuro di orzo e ginseng i fondi si alternano fino al Rosso Italia della prova.
   L'elenco come un menu (prima erano tabelle a tre colonne, «è molto facile perdersi»): ogni voce due righe, il
   nome a 20 e il formato in fondo alla riga in tenue, sotto la descrizione; un filo sottile fra le voci. Nella
   prima sezione ogni gruppo ha il nome sotto un filo Rosso Italia, come i formati del decaffeinato. */
.banco-elenco {
  --dato: max(14px, calc(1.09375 * var(--u)));
  --voce: max(17px, calc(1.388889 * var(--u)));
}
.banco-elenco.bianco { --tenue: rgba(70, 0, 0, 0.72); --filo: rgba(70, 0, 0, 0.14); }
.banco-elenco.scuro { --tenue: rgba(255, 255, 255, 0.78); --filo: rgba(255, 255, 255, 0.2); }
.elenco-g { grid-template-rows: auto auto 1fr auto; grid-auto-rows: auto; row-gap: 0; }
.elenco-titolo { grid-column: 1 / 4; grid-row: 1; align-self: start; }
.elenco-riga {
  grid-column: 1 / 4; grid-row: 2; margin: calc(0.5 * var(--g)) 0 0; max-width: 24em;
  font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue); text-wrap: pretty;
}
.elenco { grid-column: 1 / 4; grid-row: 4; align-self: end; margin-top: var(--g); }
.elenco-gruppo + .elenco-gruppo { margin-top: calc(1.388889 * var(--u)); }
.elenco-gruppo-nome {
  margin: 0; padding-top: calc(0.555556 * var(--u)); border-top: 1px solid var(--rosso);
  font-size: var(--dato); font-weight: inherit; line-height: 1.2; letter-spacing: -0.01em;
}
.voci { margin: 0; padding: 0; list-style: none; }
.voce { padding: calc(0.486111 * var(--u)) 0; }
.voce + .voce { border-top: 1px solid var(--filo); }
.voce-riga { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1em; }
.voce-nome { font-size: var(--voce); line-height: 1.15; letter-spacing: -0.02em; }
.voce-formato { margin-left: auto; font-size: var(--dato); line-height: 1.3; letter-spacing: -0.01em; color: var(--tenue); text-align: right; }
.voce-descrizione { margin: 0.15em 0 0; font-size: var(--dato); line-height: 1.3; letter-spacing: -0.01em; color: var(--tenue); text-wrap: pretty; }
.elenco-foto { display: block; aspect-ratio: 4 / 3; background: var(--r30); }
@media (min-width: 901px) {
  .banco-elenco { position: relative; }
  .elenco-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; aspect-ratio: auto; align-self: stretch; }
  /* gli accessori sono un gruppo solo, sette voci, e con l'altezza naturale sotto la riga restava un vuoto di 265
     a 1440: le righe si allargano nello spazio libero fino a 80 (la voce al centro della sua riga), l'elenco resta
     sul fondo */
  .banco-accessori .elenco { grid-row: 3 / 5; align-self: stretch; }
  .banco-accessori .voci { height: 100%; display: grid; grid-auto-rows: minmax(min-content, calc(5.555556 * var(--u))); align-content: end; }
  .banco-accessori .voce { display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .elenco-g { min-height: calc(100vh - 2 * var(--mv)); min-height: calc(100svh - 2 * var(--mv)); }
}

/* =================================================================================== Al banco — 4. la prova in tazza (anche nella Home) */
/* La chiusura di Il caffè (pagine.css, .prova-*), sul bianco dal 16/10 (era sulla fascia Rosso Italia, tutto rosso
   scuro: Alessandro ha tolto il rosso acceso dalle schermate intere) */
.banco-prova .g6 { grid-template-rows: auto auto auto; grid-auto-rows: auto; row-gap: var(--g); }
/* le righe di .prova-* stavano in pagine.css per Il caffè e ne sono uscite con la sua prova in tazza (e08f72e, 13/10
   sera): unendo le pagine il titolo restava piccolo e la frase in una colonna stretta. Qui, per Al banco e, dal
   15/10 sera, per la Home: la sezione è una sola, _parti/prova.html */
.banco-prova .prova-titolo { grid-column: 1 / 5; grid-row: 1; }
.banco-prova .prova-frase { grid-column: 1 / 5; grid-row: 2; }
.banco-prova .prova-invito { grid-column: 1 / 3; grid-row: 3; margin-top: var(--g); }
/* una sezione intera (Alessandro, 15/10 sera: «la prova in tazza come sezione falla più grande a tutta sezione»;
   era una fascia alta 437): sul computer orizzontale alta uno schermo, e tutto in fondo come la chiusura del
   catalogo (p. 30, «Contattateci»: la pagina vuota sopra, titolo, frase e recapiti in basso a sinistra). Il titolo
   largo quanto le sei colonne (cap 114 a 1440, era 73: --r-pc è il rapporto del suo disegno, 100cqw la larghezza
   della griglia), la frase a 40 e il bottone a 24 */
@media (min-width: 901px) {
  .banco-prova .g6 { container-type: inline-size; }
  /* sotto il titolo lo spazio delle discendenti (p, zz: scendono di 0,41 cap) prima della gronda */
  .banco-prova .prova-titolo { grid-column: 1 / 7; --cap: calc(100cqw / var(--r-pc)); margin-bottom: calc(0.42 * var(--cap)); }
  .banco-prova .prova-frase { max-width: 22em; font-size: max(24px, calc(2.777778 * var(--u))); line-height: 1.1; }
  .banco-prova .invito.bottone { font-size: max(17px, calc(1.666667 * var(--u))); }
  .banco-prova .prova-invito { margin-top: calc(0.5 * var(--g)); }
}
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .banco-prova .g6 { min-height: calc(100vh - 2 * var(--mv)); min-height: calc(100svh - 2 * var(--mv)); align-content: end; }
}
@media (max-width: 900px) {
  .banco-prova .prova-titolo { --cap: 29.3px; }
  .banco-prova .prova-frase, .banco-prova .prova-invito { margin-top: 24px; }
}
/* «Contatti» come bottone (Astra, primo giro: «il grande titolo domina, CONTATTI è un collegamento minuscolo»):
   PROPOSTA, solo in questa pagina finché Alessandro non dice di portarlo nelle altre. Rosso scuro pieno con la
   scritta bianca, come gli inviti (Forma Bold maiuscolo); al passaggio il rosso scuro profondo */
.banco-prova .invito.bottone {
  padding: calc(1.25 * var(--u) + 6px) calc(2.5 * var(--u) + 8px); border: 0;
  background: var(--scuro); color: var(--bianco); transition: background-color 0.2s ease;
}
.banco-prova .invito.bottone:hover, .banco-prova .invito.bottone:focus-visible { padding: calc(1.25 * var(--u) + 6px) calc(2.5 * var(--u) + 8px); border: 0; background: #220000; }
.banco-prova .invito.bottone:focus-visible { outline-color: var(--bianco); }
/* sullo scuro (la Home, dal 16/10) lo scuro pieno non si vedrebbe: il bottone Rosso Italia di Contatti
   (.contatti-prova .bottone), al passaggio un rosso appena più scuro; il contorno della tastiera bianco */
.banco-prova.scuro .invito.bottone { background: var(--rosso); }
.banco-prova.scuro .invito.bottone:hover, .banco-prova.scuro .invito.bottone:focus-visible { background: #E80000; }

/* =================================================================================== telefono (fino a 900 px) */
@media (max-width: 900px) {
  /* il servizio (Home): titolo, capoverso, poi i quattro blocchi uno sotto l'altro, la foto piccola a sinistra (112,
     3:4) e etichetta e riga accanto: tutti e quattro si leggono scorrendo, senza gesti di lato (Astra, primo giro:
     nella prima versione scorrevano di lato e assistenza e consegne restavano fuori dalla vista). Niente «+» */
  .banco-servizio { --servizio: 17px; --piu: 44px; }
  .servizio-titolo { --cap: 29.3px; }
  .servizio-testo { margin-top: 24px; font-size: 20px; }      /* 24: la «p» del titolo scende sotto la riga */
  .servizio-blocchi { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; margin-top: 32px; }
  .servizio-blocco { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; }
  .servizio-cornice { grid-column: 1; grid-row: 1 / 3; }
  .servizio-piu { display: none; }
  .servizio-etichetta { grid-column: 2; margin-top: 0; }
  .servizio-riga { grid-column: 2; margin-top: 6px; }
  /* la porta della Home: titolo e capoverso come le altre porte (pagine.css: 20 sotto il titolo, «Il servizio»
     non ha lettere che scendono) */
  .porta-servizio .servizio-testo { margin-top: 20px; max-width: none; }
  .porta-servizio .servizio-blocchi { margin-top: 32px; }
  /* l'apertura: titolo 44 (il disegno largo 270 a 390), il Biscione alto 110, la frase a 20 (Astra: «il punzone deve
     ridursi davvero: se diventa protagonista, la spiegazione finisce troppo in basso»): sono le regole comuni del
     telefono, in pagine.css (.apertura-pagina) */
  /* il decaffeinato in colonna: il nome, l'attacco, la caffeina, i due formati uno sotto l'altro, la scatola (al
     massimo 512, come le altre foto sole) */
  .banco-deca, .banco-tazze { --dato: 14px; --servizio: 17px; --img: 220px; }
  .deca-nome { --cap: 29.3px; }
  .deca-attacco { margin-top: 20px; font-size: 22px; max-width: none; }
  .deca-caffeina { margin-top: 32px; }
  .deca-mai { font-size: 20px; max-width: none; }
  .deca-testo { margin-top: 8px; max-width: none; }
  .deca-cifra { margin-top: 20px; column-gap: 16px; }
  .deca-cifra-numero { font-size: 56px; }
  .deca-formati { grid-template-columns: minmax(0, 1fr); row-gap: 20px; margin-top: 28px; }
  .deca-formato { padding-top: 12px; }
  .deca-formato-nome { font-size: 22px; }
  .deca-formato-riga { margin-top: 8px; font-size: 16px; max-width: none; }
  .deca-foto { margin-top: 28px; width: 100%; max-width: 512px; }
  /* le altre tazze: i nomi su una riga (orzo e ginseng: la somma dei rapporti dei due disegni è 8,9, maiuscole alte
     30 fino a 330 di larghezza), area di tocco di 44; i dati uno sotto l'altro; i formati uno sotto l'altro,
     ciascuno con la sua riga e l'immagine (220) */
  .tazze-nomi { column-gap: 16px; }
  .tazze-nome { --cap: min(30px, calc((100vw - 84px) / 8.9)); padding: 8px 0; }
  .tazze-riga { margin: 12px 0 0; font-size: 20px; }
  .tazze-schede { margin-top: 24px; }
  /* sul telefono la scheda scelta è la sola presente: la sezione prende la sua altezza */
  .tazza { display: none; transition: none; }
  #tazza-orzo:checked ~ .tazze-schede .tazza-orzo,
  #tazza-ginseng:checked ~ .tazze-schede .tazza-ginseng { display: block; }
  .tazza-dati { display: flex; flex-direction: column; row-gap: 12px; }
  .tazza-dato { padding: 0 0 0 12px; border-left: 1px solid var(--rosso); }
  .tazza-dato + .tazza-dato::before { content: none; }
  .tazza-testo { margin-top: 20px; }
  .tazza-formati { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-top: 24px; }
  .formati { font-size: 15px; }
  .formati thead th { font-size: 12px; }
  /* tutto per il banco: titolo, riga, l'elenco, la foto sotto (4:3, al massimo 512 come la scatola del
     decaffeinato); nella voce il formato va sotto il nome, a sinistra, prima della descrizione */
  .banco-elenco { --dato: 15px; --voce: 18px; }
  .elenco-titolo { --cap: 29.3px; }
  .elenco-riga { margin-top: 20px; font-size: 20px; max-width: none; }
  .elenco { margin-top: 28px; }
  .elenco-gruppo + .elenco-gruppo { margin-top: 28px; }
  .elenco-gruppo-nome { padding-top: 10px; }
  .voce { padding: 10px 0; }
  .voce-riga { display: block; }
  .voce-nome, .voce-formato { display: block; }
  .voce-formato { margin-top: 2px; text-align: left; }
  .elenco-foto { margin-top: 28px; width: 100%; max-width: 512px; }
}

/* ---- servizio.css ---- */
/* Caffè Carati — Il servizio (modelli/servizio.html, 15/10 notte). Le sezioni sono alte uno schermo sul computer,
   come La famiglia; sul telefono decide il contenuto. Le regole dell'apertura sono quelle comuni (pagine.css,
   .apertura-pagina); «Ci pensiamo noi» è il pezzo della Home (_parti/servizio.html, banco.css). */

/* ---- 0. l'apertura: il punzone «Milanese» è una targa larga (come «Caffè»): alta quanto gli ottagoni (170 a 1440)
   sarebbe larga 500; qui è alta poco più della metà (94), larga circa 275, e sta sotto il titolo senza dominarlo.
   La frase su tre righe al massimo, come Al banco (26 em). */
.servizio-apertura .punzone-largo img { height: calc(0.55 * var(--pz)); }
.servizio-apertura .apertura-frase { max-width: 26em; }
/* Sullo schermo verticale (telefono e tablet in piedi) arriva la verticale di Astra, con le due persone in alto e
   la metà bassa libera (banco e pavimento sfocati, chiesto così): il blocco del titolo scende in basso, sopra il
   banco, invece di stare al centro sulle mani e sulle tazzine (la stessa soglia di figura.html). Sul computer il
   marchio resta al centro come nelle altre pagine. */
@media (max-aspect-ratio: 1/1) {
  .servizio-apertura { justify-content: flex-end; padding-bottom: calc(2 * var(--mv)); }
}

/* ---- 1. «Ci pensiamo noi», alto uno schermo con i blocchi al centro (nella Home ha l'altezza del contenuto) */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .pagina-servizio .banco-servizio { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; }
  .pagina-servizio .banco-servizio > .g6 { width: 100%; }
}

/* ---- 2-5. L'agente (bianco), Le macchine (scuro), L'assistenza (bianco) e Le consegne (scuro), fatte come il
   decaffeinato di Al banco: a sinistra (c1-c3) il titolo (cap della sezione), l'attacco a 32, il testo in tenue e
   sotto tre fatti, ognuno sotto un filo Rosso Italia con il nome a sinistra e la riga a destra, come le voci di un
   menu; i tre fatti si dividono in parti uguali lo spazio che resta fino al fondo della schermata (Alessandro,
   16/10: «le 3 righe sotto devono essere distribuite e avere tutte lo stesso spazio»). A destra la foto al vivo,
   la metà destra della sezione dal bordo alto al basso (le foto sono 2:3: nella finestra alta restano intere in
   larghezza), in bianco e nero dallo stile come nel blocco «Ci pensiamo noi» (Alessandro, 16/10: «teniamo tutte le
   foto di agente, macchina etc. in bianco e nero»; l'apertura resta a colori). Sullo schermo verticale e sul
   telefono la foto torna 4:5 sotto il testo e i fatti tornano alti quanto il loro contenuto. */
.lato {
  --dato: max(15px, calc(1.25 * var(--u)));
  --nome: max(17px, calc(1.388889 * var(--u)));
}
.lato.bianco { --tenue: rgba(70, 0, 0, 0.72); }
.lato.scuro { --tenue: rgba(255, 255, 255, 0.78); }
.lato.scuro .titolo { color: var(--bianco); }
.lato-g { grid-template-rows: auto auto auto 1fr auto; grid-auto-rows: auto; row-gap: 0; }
.lato-titolo { grid-column: 1 / 4; grid-row: 1; align-self: start; }
.lato-attacco {
  grid-column: 1 / 4; grid-row: 2; margin: calc(1.25 * var(--g)) 0 0; max-width: 17em;
  font-size: max(22px, calc(2.222222 * var(--u))); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
}
.lato-testo {
  grid-column: 1 / 4; grid-row: 3; margin: calc(0.833333 * var(--u)) 0 0; max-width: 24em;
  font-size: var(--servizio); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue); text-wrap: pretty;
}
.lato-fatti {
  grid-column: 1 / 4; grid-row: 4 / 6; align-self: stretch; margin: calc(1.25 * var(--g)) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-rows: repeat(3, minmax(0, 1fr));
}
.lato-fatto {
  border-top: 1px solid var(--rosso); padding: calc(0.833333 * var(--u)) 0 calc(1.111111 * var(--u));
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--go); align-content: start;
}
.lato-fatto-nome { margin: 0; font-size: var(--nome); font-weight: inherit; line-height: 1.2; letter-spacing: -0.02em; }
.lato-fatto-riga { margin: 0; font-size: var(--dato); line-height: 1.25; letter-spacing: -0.02em; color: var(--tenue); text-wrap: pretty; }
.lato-foto { grid-column: 4 / 7; grid-row: 1 / -1; align-self: start; display: block; aspect-ratio: 4 / 5; background: var(--r30); }
.lato-foto img { object-position: var(--fx, 50%) var(--fy, 50%); filter: grayscale(1); }
@media (min-width: 901px) {
  .lato { position: relative; }
  /* align-self torna a stretch: Chrome applica l'allineamento anche ai posizionati, con «start» la foto restava
     alta zero (visto sul decaffeinato) */
  .lato .lato-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; aspect-ratio: auto; align-self: stretch; }
}
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .lato .lato-g { min-height: calc(100vh - 2 * var(--mv)); min-height: calc(100svh - 2 * var(--mv)); }
}

/* ---- 6. Come si comincia, sul bianco (era sul Rosso Italia come le chiusure di Il caffè e Al banco, fino al
   16/10: niente rosso acceso a schermo intero): il titolo largo, il capoverso (c1-c3, come il testo delle sezioni
   di lato), i quattro passi in quattro colonne, ognuno sotto un filo Rosso Italia come i fatti, con il numero
   grande in Forma (Javelin cifra per cifra è vietato dalla licenza), il nome e la riga; in fondo il bottone al
   modulo, come quello di Al banco (banco.css, .banco-prova). Il nome di ogni passo sta su una riga a 1440 (il primo
   è «Scriveteci, o chiamate» per questo). Sul computer tutto in fondo alla schermata, come la chiusura del
   catalogo. */
.comincia { --tenue: rgba(70, 0, 0, 0.72); }
.comincia-g { grid-template-rows: auto auto auto auto; grid-auto-rows: auto; row-gap: var(--g); }
.comincia-titolo { grid-column: 1 / 7; grid-row: 1; --cap: var(--cap-sezione); }
.comincia-testo {
  grid-column: 1 / 4; grid-row: 2; margin: 0; max-width: 24em;
  font-size: max(18px, calc(1.5625 * var(--u))); line-height: 1.15; letter-spacing: -0.025em; color: var(--tenue); text-wrap: pretty;
}
.comincia-passi {
  grid-column: 1 / 7; grid-row: 3; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--go);
}
.comincia-passo { border-top: 1px solid var(--rosso); padding-top: calc(1.111111 * var(--u)); }
.comincia-numero { display: block; font-size: max(48px, calc(5.555556 * var(--u))); line-height: 0.9; letter-spacing: -0.04em; }
.comincia-nome {
  margin: calc(1.388889 * var(--u)) 0 0;
  font-size: max(22px, calc(2.083333 * var(--u))); font-weight: inherit; line-height: 1.1; letter-spacing: -0.025em;
}
.comincia-riga {
  margin: 0.5em 0 0; max-width: 20em;
  font-size: max(17px, calc(1.388889 * var(--u))); line-height: 1.2; letter-spacing: -0.02em; color: var(--tenue); text-wrap: pretty;
}
.comincia-invito { grid-column: 1 / 4; grid-row: 4; }
.comincia .invito.bottone {
  padding: calc(1.25 * var(--u) + 6px) calc(2.5 * var(--u) + 8px); border: 0;
  background: var(--scuro); color: var(--bianco); transition: background-color 0.2s ease;
}
.comincia .invito.bottone:hover, .comincia .invito.bottone:focus-visible { padding: calc(1.25 * var(--u) + 6px) calc(2.5 * var(--u) + 8px); border: 0; background: #220000; }
.comincia .invito.bottone:focus-visible { outline-color: var(--bianco); }
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .comincia-g { min-height: calc(100vh - 2 * var(--mv)); min-height: calc(100svh - 2 * var(--mv)); align-content: end; }
  .comincia-passi { margin-top: var(--g); }
}

/* =================================================================================== telefono (fino a 900 px) */
@media (max-width: 900px) {
  .lato { --servizio: 17px; --dato: 15px; --nome: 17px; }
  .lato-titolo { --cap: 29.3px; }
  .lato-attacco { margin-top: 20px; font-size: 22px; max-width: none; }
  .lato-testo { margin-top: 10px; max-width: none; }
  .lato-fatti { margin-top: 28px; grid-template-rows: auto; }
  .lato-fatto { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 10px 0 14px; }
  .lato-foto { margin-top: 28px; width: 100%; max-width: 512px; }
  .comincia-titolo { --cap: 29.3px; }
  /* i margini come l'attacco e i fatti delle sezioni di lato: senza, la sbarra del titolo toccava il testo e il
     testo il filo del primo passo (19/10) */
  .comincia-testo { margin-top: 20px; font-size: 17px; max-width: none; }
  .comincia-passi { margin-top: 28px; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .comincia-passo { padding-top: 12px; }
  .comincia-numero { font-size: 40px; }
  .comincia-nome { margin-top: 12px; font-size: 22px; }
  .comincia-riga { margin-top: 6px; font-size: 16px; max-width: none; }
  .comincia-invito { margin-top: 8px; }
}

/* ---- animazioni.css ---- */
/* Caffè Carati — animazioni (concetto § 3). Regola: tutto dentro @media (prefers-reduced-motion: no-preference);
   chi chiede meno movimento vede il fotogramma finale, fermo (e scroll-behavior: auto, in base.css).
   Tutto parte solo con `html.js`, che mette uno script in linea nella testa (base.html), prima di questo foglio e
   solo senza prefers-reduced-motion: la sbarra del titolo parte col primo disegno, non compare intera per poi
   ripartire; senza JavaScript righe e sbarre sono visibili da subito, ferme. Lo script
   (script/sito.js) mette `da-animare` SOLO agli elementi ancora sotto la piega, così
   quello che è già in vista non lampeggia, e poi `visto` quando entrano. strumenti/controlla.py toglie `.js`
   prima dello screenshot, perché la cattura a pagina intera di Chromium fa ripartire le animazioni CSS e il
   controllo vuole il fotogramma fermo.
   1. Le sbarre del titolo si disegnano parola per parola, 0,85 s in tutto, una volta — SOLO sul titolo d'apertura:
      gli altri arrivano già disegnati.
   2. Le quattro righe della narrativa entrano una alla volta (salgono di 20 px in 0,5 s), 400 ms di scarto, una
      volta (quando la sezione entra).
   (La 3, il monogramma del piede che si imprimeva come un timbro, è tolta col monogramma: Alessandro, 13/10 sera.)
   0. L'ingresso (Alessandro, 13/10, da Acqua Fiuggi), a ogni caricamento della Home e alla prima pagina della
      sessione per le altre: velo rosso scuro, logotipo ↔ punzone (uno a caso dal 14/10, al posto del 19 C 74), il velo si ritira verso il marchio della
      pagina (Home: al centro della prima schermata, dove il marchio d'ingresso con la byline è già e resta;
      le altre: nella testata, dove il logotipo vola e si posa) (circa 2,7 s;
      sequenza in script/sito.js, `html.js.intro-attiva`). Fuori da questo @media c'è solo `.intro { display: none }`. */
.intro { display: none; }
@media (prefers-reduced-motion: no-preference) {

  /* 0. l'ingresso. Il velo copre tutto e blocca lo scorrimento finché c'è; la finestra del logotipo è alta 140 px a
     1440 (96 sul telefono) e larga quanto il logotipo (483,557 : 188,027); dentro, logotipo e punzone stanno uno
     sopra l'altro e scorrono in verticale (il punzone parte sotto la finestra). Sulla Home il marchio d'ingresso
     ha anche la classe `apertura-marchio` (pagine.css): la finestra è larga quanto il logotipo della prima schermata
     (--lw) e sotto c'è la byline, nella sua finestra, che esce e rientra col logotipo; così il marchio d'ingresso
     coincide con quello della pagina e a fine ingresso resta dov'è. Bloccando lo scorrimento sparisce la sbarra
     di scorrimento (sul computer), ma il suo posto resta riservato (base.css), così quando torna la pagina non si
     sposta di lato (Alessandro, 13/10 sera: lo «scatto» alla fine).
     La sbarra del titolo d'apertura resta a zero finché c'è `intro-sbarre`: parte quando il velo si è ritirato.
     Il rosso è un fondo a parte (`intro-fondo`, origine nell'angolo in alto a sinistra) che lo script sposta e
     rimpicciolisce fino alla bandierina: solo spostamenti, scale e trasparenza, che la scheda grafica fa da sola
     (18/10: col ritaglio, `clip-path`, Safari ridisegnava lo schermo a ogni fotogramma e l'ingresso «laggava»).
     `will-change` prepara il fondo e il velo prima che partano, così il ritiro e la dissolvenza non aspettano; sul
     marchio no: preparato prima, a fine ingresso non coincideva più al pixel con quello della pagina (Home). */
  html.js.intro-attiva .intro {
    display: block; position: fixed; inset: 0; z-index: 100;
    cursor: pointer; will-change: opacity;
  }
  .intro-fondo {
    position: absolute; inset: 0; background: var(--scuro);
    transform-origin: 0 0; will-change: transform;
  }
  html.js.intro-attiva, html.js.intro-attiva body { overflow: hidden; }
  .intro .intro-marchio {
    --h: clamp(96px, 9.722222vw, 140px);
    position: absolute; left: 50%; top: 50%; z-index: auto;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
  }
  .intro .intro-marchio.apertura-marchio { --h: calc(var(--lw) / 2.571772); }
  .intro-finestra { position: relative; height: var(--h); width: calc(var(--h) * 2.571772); overflow: hidden; }
  .intro-finestra-byline { overflow: hidden; }
  /* logotipo, punzone e byline diventano livelli a sé fin dal primo disegno, mentre il logotipo è fermo: quando
     scorrono, la scheda grafica li ha già pronti e non li disegna in quel momento (19/10, «il lag quando si apre il
     punzone»). Lo script lo toglie quando tornano fermi, prima che il marchio voli (script/sito.js) */
  html.js.intro-attiva .intro-voce, html.js.intro-attiva .intro-byline { will-change: transform; }
  .intro-voce { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
  .intro-voce svg, .intro-voce img { height: 100%; width: auto; display: block; }
  .intro-simbolo { transform: translateY(calc(100% + 2px)); }
  .intro-simbolo img { height: 88%; }
  /* le due targhe (Milanese, Caffè) più basse degli ottagoni, come nelle file di punzoni del brandbook: alla stessa
     altezza pesavano quasi il doppio dell'AAC */
  .intro-simbolo img.punzone-milanese, .intro-simbolo img.punzone-caffe { height: 72%; }
  html.js.intro-sbarre .titolo-apertura .sbarra { animation: none; transform: scaleX(0); }

  /* 1. le sbarre (una per parola, p. 6) si disegnano da sinistra a destra, una dopo l'altra: prima 0,25 s di fermo,
     poi 0,6 s di disegno, 0,85 s in tutto. Ogni sbarra nasce dentro la prima lettera della sua parola e cresce fino
     all'ultima; `--da` e `--per` (frazioni dei 0,6 s) li mette build.py (svg_in_fila), anche da una riga alla
     seguente nel disegno del telefono. Senza le variabili (non dovrebbe succedere) la sbarra si disegna tutta
     insieme. */
  html.js .titolo-apertura .sbarra {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: sbarra calc(var(--per, 1) * 0.6s) linear calc(0.25s + var(--da, 0) * 0.6s) both;
  }
  @keyframes sbarra {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* 2. la narrativa, riga per riga: ogni riga sale di 20 px in 0,5 s, 400 ms fra una riga e l'altra */
  html.js .narrativa.da-animare .narrativa-riga { opacity: 0; transform: translateY(20px); }
  html.js .narrativa.da-animare.visto .narrativa-riga { animation: entra 0.5s cubic-bezier(0.33, 0, 0, 1) forwards; }
  /* gli scarti con lo stesso selettore della regola sopra: con un selettore più debole (com'era fino al 12/10) lo
     `animation` qui sopra rimetteva il ritardo a 0 e le righe entravano tutte insieme */
  html.js .narrativa.da-animare.visto .narrativa-riga:nth-child(2) { animation-delay: 0.4s; }
  html.js .narrativa.da-animare.visto .narrativa-riga:nth-child(3) { animation-delay: 0.8s; }
  html.js .narrativa.da-animare.visto .narrativa-riga:nth-child(4) { animation-delay: 1.2s; }
  html.js .narrativa.da-animare.visto .narrativa-riga:nth-child(5) { animation-delay: 1.6s; }
  html.js .narrativa.da-animare.visto .narrativa-riga:nth-child(6) { animation-delay: 2.0s; }
  @keyframes entra {
    to { opacity: 1; transform: none; }
  }

  /* 4. La famiglia, la linea del tempo (14/10 notte; Astra: un gesto solo, senza soste né timbro finale). La linea
     scende riga per riga, --passo a riga: i tratti «pieno» lo fanno tutto, «a-centro» la prima metà, «da-centro» la
     seconda; a metà riga, quando la linea arriva al pallino, il pallino compare, l'anno gira una volta come una
     palette dei tabelloni Solari (tutto l'anno insieme: niente cifre che contano) e, dove le due linee si uniscono,
     il «+» di p. 4 si imprime. Sul computer le righe partono insieme quando la sezione entra e --t0 le mette in fila
     (2,4 s in tutto); sul telefono ogni riga parte quando entra nello schermo, e risalendo non torna indietro.
     Classi di script/sito.js: `attesa` (riga da animare: sotto la piega all'avvio) e `visto`. Keyframes propri:
     non dipendono da quelli del piede. */
  .binario { --passo: 0.5s; --t0: 0s; }
  @media (min-width: 901px) {
    .binario { --passo: 0.24s; }
    .binario .tappa, .binario .binario-fine { --t0: calc(var(--i) * var(--passo)); }
  }
  html.js .attesa .l { transform: scaleY(0); }
  html.js .attesa .punto { transform: scale(0); }
  html.js .attesa .tessera svg { transform: rotateX(-90deg); }
  html.js .attesa.visto .l.pieno { animation: binario-scende var(--passo) linear var(--t0) both; }
  html.js .attesa.visto .l.a-centro { animation: binario-scende calc(var(--passo) / 2) linear var(--t0) both; }
  html.js .attesa.visto .l.da-centro { animation: binario-scende calc(var(--passo) / 2) linear calc(var(--t0) + var(--passo) / 2) both; }
  html.js .attesa.visto .punto { animation: binario-punto 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) calc(var(--t0) + var(--passo) / 2) both; }
  html.js .attesa.visto .punto-unione { animation: binario-timbro 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) calc(var(--t0) + var(--passo) / 2) both; }
  html.js .attesa.visto .tessera svg { animation: binario-palette 0.32s cubic-bezier(0.3, 0, 0.2, 1) calc(var(--t0) + var(--passo) / 2) both; }
  @keyframes binario-scende { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes binario-punto { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes binario-timbro {
    from { opacity: 0; transform: scale(1.5); }
    60% { opacity: 1; transform: scale(0.94); }
    to { opacity: 1; transform: none; }
  }
  @keyframes binario-palette { from { transform: rotateX(-90deg); } to { transform: rotateX(0deg); } }
}

/* ---- contatti.css ---- */
/* Caffè Carati — Contatti (13/10 notte). Foglio a sé, come banco.css: la pagina si costruisce in una copia a parte e
   così non tocca le regole delle altre. Due blocchi: sopra, sullo scuro, il modulo «La prova in tazza»; sotto, sul
   bianco, «Contattateci» come cat. p. 30. Invertiti il 14/10 (Alessandro: il modulo «non vorrei si perdesse sotto»).
   Rivisti lo stesso giorno sui suoi commenti («le scritte messe un po' a caso, non c'è armonia di spazi»): ogni bordo
   cade su una colonna della pagina e fra un blocco e l'altro c'è sempre la stessa gronda. */

/* la gronda della pagina (42 a 1440) misurata dentro un blocco largo quattro colonne (874): così le colonne dei campi
   e dei tag cadono sulle colonne della pagina (con --go, che è la quota delle sei, la seconda colonna dei campi
   partiva 11 px prima della terza della pagina) */
.contatti-prova { --go4: 4.805492%; }

/* =================================================================================== 1. La prova in tazza */
/* scuro, la prima schermata: tutto sopra la piega del computer (Alessandro, 14/10: «non che devo scorrere per mandare
   il messaggio»; sul suo schermo, 1920 × 1080, sotto la testata restano 780 px). Titolo della pagina e frase in
   c1-c4, il modulo sotto in c1-c4, la scena in finestra c5-c6 dal filo alto del titolo per tutta l'altezza del
   modulo. Il modulo: i primi quattro campi uno per colonna, sotto la mail e le righe libere larghe due colonne; i
   quattro tag uno per colonna; in fondo la spiegazione sotto la mail e il bottone sotto le righe libere. Campi senza
   riquadro: l'etichetta (etichetta del brandbook, maiuscolo) e sotto una riga bianca di 2 px su cui si scrive; al
   fuoco la riga diventa Rosso Italia. I tag come nel selettore di Il caffè, che sta anche lui sul fondo scuro: quello
   scelto pieno, gli altri nel loro rosso a metà. Il bottone è l'unico del sito (concetto § 3): rettangolo Rosso
   Italia, testo bianco 20 maiuscolo, alto 56, senza raggio. */
.contatti-prova .g6 { grid-auto-rows: auto; grid-template-rows: auto 1fr; }
.prova-testa { grid-column: 1 / 5; grid-row: 1; }
/* «La prova in tazza» ha le discendenti (p, zz) che escono sotto il disegno: la frase scende di mezza maiuscola in più.
   Questa regola e quelle del bottone valgono solo qui (.contatti-prova): .prova-frase e .bottone ci sono anche nella
   prova in tazza di Al banco e di La famiglia, e messe insieme nel sito le spostavano */
.contatti-prova .prova-frase { margin-top: calc(var(--g) + 0.45 * var(--cap-pagina)); max-width: 24em; }
.prova-modulo { grid-column: 1 / 5; grid-row: 2; }
.prova-foto { grid-column: 5 / 7; grid-row: 1 / 3; align-self: stretch; min-height: var(--r3); }
/* le etichette lunghe («Nome del locale») vanno a capo sotto i 1050 circa: i campi della riga restano sullo stesso
   piano (align-items: end) */
.prova-campi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--go4); row-gap: 24px; align-items: end; }
.prova-campo-email, .prova-campo-messaggio { grid-column: span 2; }
.prova-campo { margin: 0; }
.prova-campo label, .prova-miscela legend {
  display: block; padding: 0; font-size: var(--k); line-height: var(--lh-k); letter-spacing: 0; text-transform: uppercase;
}
.prova-campo input, .prova-campo textarea {
  display: block; width: 100%; margin-top: 6px; padding: 4px 0 6px;
  border: 0; border-bottom: 2px solid var(--bianco); border-radius: 0; background: transparent; color: var(--bianco);
  font: inherit; font-size: max(20px, calc(1.527778 * var(--u))); line-height: 1.2; letter-spacing: -0.025em;
}
/* il riempimento automatico del browser (nome, telefono) colora il campo d'azzurro col testo scuro: qui il campo
   resta del fondo e il testo bianco. Due regole: un browser che non conosce una delle due scarterebbe la coppia */
.prova-campo input:-webkit-autofill { -webkit-text-fill-color: var(--bianco); caret-color: var(--bianco); box-shadow: 0 0 0 1000px var(--scuro) inset; }
.prova-campo input:autofill { -webkit-text-fill-color: var(--bianco); caret-color: var(--bianco); box-shadow: 0 0 0 1000px var(--scuro) inset; }
/* le righe libere alte una riga come gli altri campi; scrivendo cresce fino a tre righe, poi scorre */
.prova-campo textarea { resize: none; field-sizing: content; min-height: 0; max-height: calc(3 * 1.2em + 10px); overflow-y: auto; }
.prova-campo input:focus, .prova-campo textarea:focus { outline: none; border-bottom-color: var(--rosso); }
.prova-campo input:focus-visible, .prova-campo textarea:focus-visible { outline: none; }
.prova-miscela { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
/* quattro scelte uguali, ogni tag largo una colonna della pagina; il tag non scelto in grigio chiaro, quello scelto
   nel suo rosso, appena sollevato. Provati sul fondo scuro (14/10): a metà, come in Il caffè, il nome stampato sul tag
   quasi spariva; al 72 % si leggeva ma lo scelto non si distingueva; il grigio chiaro tiene tutt'e due. Il nome
   scritto sotto c'è solo per «non lo so ancora» (il retro del tag, la C senza nome), al centro del tag, col filetto
   Rosso Italia quando è scelto: sotto gli altri tre ripeteva il nome stampato sul tag (Alessandro, 14/10). I tre
   stati con la stessa fila di filtri, perché il passaggio sia una dissolvenza.
   Il tag non scelto (18/10, Astra: il nome stava a 1,6:1 sul tag spento, illeggibile proprio mentre si sceglie): in
   grigio il rosso del tag e il rosso scuro del nome sono quasi uguali, quindi `contrast(4)` dopo `brightness` li
   separa (tag grigio chiaro, nome quasi nero, circa 5,5:1 dopo l'opacità sul fondo scuro). */
.prova-tag { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--go4); row-gap: 16px; margin-top: 12px; }
.prova-scelta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.prova-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prova-scelta img {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) brightness(2.9) contrast(4) opacity(0.55); transition: filter 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .prova-scelta:hover img { filter: grayscale(1) brightness(2.9) contrast(4) opacity(0.8); }
}
.prova-scelta input:checked + img { filter: grayscale(0) brightness(1) contrast(1) opacity(1); transform: translateY(-3px); }
.prova-scelta input:focus-visible + img { outline: 3px solid var(--bianco); outline-offset: 4px; }
.prova-scelta-nome {
  padding-bottom: 4px; border-bottom: 2px solid transparent; text-align: center;
  font-size: var(--k); line-height: var(--lh-k); letter-spacing: 0; text-transform: uppercase;
}
.prova-scelta input:checked ~ .prova-scelta-nome { border-bottom-color: var(--rosso); }
/* un campo obbligatorio lasciato vuoto, dopo che si è provato a mandare: la riga diventa Rosso Italia (il browser
   scrive accanto cosa manca) */
.prova-campo input:user-invalid { border-bottom-color: var(--rosso); }
/* l'ultima riga: a cosa servono i dati (e l'informativa) sotto la mail, il bottone sotto le righe libere, largo
   quanto loro; dopo il clic, sotto, la riga di contatti.js: il ripiego sulla mail se Bottega non risponde */
.prova-invio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--go4); align-items: center; margin-top: 24px; }
.prova-nota { margin: 0; }
.prova-nota a { color: inherit; }
.contatti-prova .bottone {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 40px;
  border: 0; border-radius: 0; background: var(--rosso); color: var(--bianco); cursor: pointer;
  font: inherit; font-size: 20px; line-height: 1; letter-spacing: 0; text-transform: uppercase;
}
.prova-invio .bottone { width: 100%; }
.contatti-prova .bottone:hover { background: #E80000; }
.prova-dopo { margin-top: 12px; max-width: 34em; }
.prova-dopo:empty { display: none; }
.prova-dopo:focus { outline: none; }
.contatti-prova .bottone:disabled { cursor: progress; opacity: 0.7; }
/* la trappola per i programmi di spam: fuori dallo schermo, non nascosta (alcuni saltano i campi nascosti) */
.prova-trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* spedita: il modulo lascia il posto al grazie, nel sommario come la frase sopra */
.prova-inviata > :not(.prova-dopo) { display: none; }
.prova-inviata .prova-dopo { margin-top: 0; font-weight: 700; font-size: var(--sp); line-height: var(--lh-sp); letter-spacing: -0.025em; }
@media (prefers-reduced-motion: reduce) {
  .prova-scelta img { transition: none; }
}

/* =================================================================================== 2. Contattateci */
/* bianco, una fascia sotto il modulo: titolo e frase in c1-c4; sotto i tre recapiti, uno ogni due colonne,
   l'etichetta piccola e spenta sopra un filo, il valore in sommario piccolo sopra un altro filo, come quelli di Edo,
   coi fili di sotto sullo stesso piano anche se l'indirizzo va su due righe; sotto ancora agenti e distributori. Fra
   le righe la gronda */
.contatti-recapiti .g6 { grid-auto-rows: auto; }
.recapiti-testa { grid-column: 1 / 5; }
.recapiti-frase { margin-top: var(--g); }
.recapiti { grid-column: 1 / 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--go); margin: 0; }
.recapito { display: flex; flex-direction: column; }
.recapito dt {
  padding-bottom: 12px; border-bottom: 1px solid rgba(70, 0, 0, 0.25);
  font-weight: 500; font-size: var(--md); line-height: var(--lh-md); letter-spacing: -0.025em;
}
/* l'etichetta spenta col colore, non con l'opacità: il filo sotto resta forte quanto quello del valore */
.recapito dt, .recapito-sotto { color: rgba(70, 0, 0, 0.6); }
/* il valore prende tutta l'altezza della riga: il filo di sotto è lo stesso per i tre */
.recapito dd {
  flex: 1 0 auto; margin: 0; padding: 16px 0; border-bottom: 1px solid rgba(70, 0, 0, 0.25);
  font-size: var(--sp); line-height: var(--lh-sp); letter-spacing: -0.025em;
}
.recapito a { text-decoration: none; }
.recapito a:hover, .recapito a:focus-visible { text-decoration: underline; text-decoration-color: var(--rosso); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
/* sotto la mail, piccola, la Sudan (spiega perché la mail è @caffesudan.com); agenti e distributori in una riga a
   sé, perché sono un altro destinatario */
.recapito-sotto { display: block; margin-top: 8px; font-weight: 500; font-size: var(--md); line-height: var(--lh-md); }
.recapiti-agenti { grid-column: 1 / 5; margin: 0; }

/* =================================================================================== telefono */
/* (sotto i 900 la .g6 è un blocco: niente righe di griglia, l'aria la danno i margini) */
@media (max-width: 900px) {
  .prova-modulo { margin-top: var(--g); }
  .prova-campi { grid-template-columns: 1fr; row-gap: 24px; }
  .prova-campo-email, .prova-campo-messaggio { grid-column: auto; }
  .prova-tag { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--go); row-gap: 20px; }
  /* la spiegazione prima del bottone è un passaggio da leggere: al corpo del testo, non dei dettagli */
  .prova-invio { grid-template-columns: 1fr; row-gap: 16px; }
  .prova-nota, .prova-dopo { font-size: var(--t); line-height: var(--lh-t); }
  .prova-foto { min-height: 0; aspect-ratio: 3 / 2; margin-top: 16px; }
  .contatti-prova .bottone { width: 100%; }
  .recapiti { grid-template-columns: 1fr; row-gap: 20px; margin-top: var(--g); }
  .recapito dd { padding: 12px 0; }
  .recapiti-agenti { margin-top: var(--g); }
}