/* ==========================================================================
   PREP — il foglio unico di preprecipe.com
   Il vestito dell'app: porcellana e inchiostro.
   Due voci: Outfit per quello che il marchio dice (titoli, nomi dei piatti,
   intestazioni, etichette, tasti, numeri), il carattere di sistema per
   quello che si legge a lungo (passaggi, ingredienti, spiegazioni, modulo).
   Tema chiaro su :root, tema scuro sotto prefers-color-scheme.
   Tre classi di larghezza: compatta < 600 · media 600–899 · larga >= 900.
   La pagina cresce fino a 1280 (contenuto 1200) e poi si centra.
   Outfit: un file variabile, pesi da 500 a 700, servito dal sito (/caratteri/).
   Versione 2 (8 ottobre 2026): titoli, etichette e tasti coi valori dell'app,
   lacca notturno, foto 16:9 intere, indice a fasce, cifre in fila,
   ingredienti fermi solo se ci stanno, filo attorno alla lista d'attesa.
   Versione 3 (8 ottobre 2026): Outfit servito dal sito (/caratteri/), ripiego
   con le metriche di Outfit, modulo più sicuro, stampa della ricetta,
   alto contrasto, stati sotto il puntatore solo dove il puntatore c'è.
   Versione 4 (8 ottobre 2026): titoli dei passaggi col numero nel margine, piano al telefono
   col nome sopra la barra, quattro numeri nel primo schermo in larga.
   ========================================================================== */

/* 0. Caratteri ------------------------------------------------------------
   Outfit variabile, pesi da 500 a 700, servito dal sito: nessuna richiesta a terzi.
   Licenza SIL Open Font License 1.1 (/caratteri/OFL.txt).
   «Outfit ripiego» è Arial ritoccata con le misure di Outfit (larghezza media e
   linee): finché Outfit arriva la pagina non salta. Misurato su Liberation Sans,
   che ha le metriche di Arial: Outfit 500 = 98,95% di Arial; 600 = 93,85% e
   700 = 95,59% di Arial Bold. Salita 1000/1000, discesa 260/1000, interlinea 0. */
@font-face {
  font-family: "Outfit";
  src: url("/caratteri/outfit-latin.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  src: url("/caratteri/outfit-latin-ext.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit ripiego"; font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 98.95%; ascent-override: 101.06%; descent-override: 26.28%; line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit ripiego"; font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 93.85%; ascent-override: 106.55%; descent-override: 27.70%; line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit ripiego"; font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 95.59%; ascent-override: 104.61%; descent-override: 27.20%; line-gap-override: 0%;
}

/* 1. Variabili ---------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* fondi e testo */
  --fondo: #FBF6EE;                     /* porcellana */
  --scheda: #FFFDF8;                    /* blocchi pieni e carte */
  --campo: #EFEAE1;                     /* campo di inserimento */
  --testo: #2A1A12;                     /* inchiostro */
  --testo-2: rgba(42, 26, 18, .68);     /* secondario: nessun testo è più chiaro */
  --su-pieno: #FBF6EE;                  /* testo sopra un pieno d'inchiostro: il fondo */
  --spento: rgba(42, 26, 18, .35);      /* tasto spento (invio in corso) */
  --tocco: rgba(42, 26, 18, .08);       /* evidenza del tocco su telefono */

  /* fili */
  --filo: rgba(42, 26, 18, .14);        /* fra le righe di un elenco */
  --filo-blocco: rgba(42, 26, 18, .18); /* fra un blocco e l'altro */
  --filo-bersaglio: rgba(42, 26, 18, .28); /* bordo di un bersaglio vuoto */
  --filo-campo: rgba(42, 26, 18, .50);  /* bordo di campo e casella: 3:1 sul fondo (WCAG 1.4.11) */

  /* i cinque colori, un mestiere ciascuno */
  --verde: #155940;                     /* consuntivo: tempo risparmiato, iscrizione riuscita */
  --verde-segno: #155940;               /* segni verdi (oggi non usati sul sito) */
  --verde-superficie: transparent;      /* nel chiaro il verde sta sul fondo */
  --acqua: #4A6670;                     /* il tempo che scorre: l'attesa */
  --lacca: #C02135;                     /* solo il marchio */
  --brace: #9A3A1F;                     /* guasto e ritardo: errori del modulo */

  /* il piano e la striscia */
  --lavoro: #2A1A12;                    /* mani occupate: inchiostro pieno */
  --occhio: rgba(42, 26, 18, .35);      /* d'occhio: inchiostro al 35% */
  --attesa: #4A6670;                    /* attesa: acqua */

  /* tinte delle cucine: solo atmosfera, mai su testo o tasti */
  --tinta-italiana: #E6886E;
  --tinta-greca: #B6ABCA;
  --tinta-messicana: #BEC7A2;
  --tinta-spagnola: #CDBB90;
  --tinta-giapponese: #C0C5CC;
  --tinta-francese: #A3B0C3;
  --su-tinta: rgba(42, 26, 18, .82);    /* il nome sopra una tinta */

  /* caratteri */
  --outfit: "Outfit", "Outfit ripiego", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sistema: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* corpi per ruolo — COMPATTA (media e larga più sotto) */
  --c-titolo: 40px;        /* titolo di pagina, Outfit 700 */
  --c-piatto: 40px;        /* nome del piatto aperto, Outfit 600 */
  --c-sezione: 24px;       /* titolo di sezione: carta grande, lista d'attesa, Outfit 600 */
  --c-intestazione: 15px;  /* intestazione col trattino, Outfit 600 */
  --c-passo: 20px;         /* nome del passaggio, Outfit 600 */
  --c-cucina: 20px;        /* nome sulla fascia della cucina, Outfit 600 */
  --c-carta: 17px;         /* nome nella carta piccola, Outfit 600 */
  --c-min-grande: 28px;    /* minuti nella carta grande, Outfit 700 */
  --c-min-carta: 19px;     /* minuti nella carta piccola, Outfit 700 */
  --c-contatore: 26px;     /* i quattro numeri, Outfit 700 */
  --c-sottotitolo: 17px;   /* sottotitolo, sistema */
  --c-testo: 16px;         /* testo, sistema */
  --c-nota: 13px;          /* note e didascalie, sistema */
  --c-riga: 13px;          /* righe corte (legenda, piede, briciole, assi), Outfit 500 */
  --c-linguetta: 15px;     /* le quattro lingue, Outfit 600 */
  --c-etichetta: 11px;     /* etichetta MAIUSCOLA, Outfit 600, +0,12em: come «INGREDIENTI» nell'app */
  --c-tasto: 13px;         /* tasto, Outfit 500 maiuscolo, +0,1em: come «VEDI IL PIANO» nell'app */
  --c-marchio: 12px;       /* PREP, Outfit 500 */

  /* spazi: l'aria di base è 14 */
  --aria: 14px;
  --margine: 16px;
  --colonne: 4;
  --spazio-col: 12px;
  --tra-blocchi: 28px;
  --dentro-blocco: 21px;
  --larghezza-max: 1280px;
  --misura: 29em;          /* una riga da leggere: circa 65 battute. Scostamento dalla consegna (31em, misurati con Inter):
                              col carattere di sistema di Apple, più stretto, 31em facevano fino a 79 battute (08/10) */

  /* angoli */
  --r-foto: 13px;
  --r-pieno: 12px;         /* tasti grandi e blocchi pieni */
  --r-campo: 11px;
  --r-foto-piccola: 9px;
  --r-comando: 2px;        /* comandi quadrati piccoli, quadratini della legenda */
  --r-barra: 3px;          /* barre del piano */
}

@media (min-width: 600px) {
  :root {
    --margine: 32px;
    --colonne: 8;
    --spazio-col: 24px;
    --tra-blocchi: 42px;
    --dentro-blocco: 28px;
    --c-titolo: 52px;
    --c-piatto: 48px;
    --c-sezione: 28px;
    --c-intestazione: 17px;
    --c-passo: 22px;
    --c-cucina: 22px;
    --c-carta: 17px;
    --c-min-grande: 32px;
    --c-min-carta: 19px;
    --c-contatore: 30px;
    --c-sottotitolo: 19px;
    --c-testo: 17px;
    --c-nota: 13px;
    --c-riga: 14px;
  }
}

@media (min-width: 900px) {
  :root {
    --margine: 40px;
    --colonne: 12;
    --spazio-col: 32px;
    --tra-blocchi: 56px;
    --dentro-blocco: 28px;
    --c-titolo: 64px;
    --c-piatto: 56px;
    --c-sezione: 32px;
    --c-intestazione: 19px;
    --c-passo: 22px;
    --c-cucina: 24px;
    --c-carta: 19px;
    --c-min-grande: 36px;
    --c-min-carta: 21px;
    --c-contatore: 32px;
    --c-sottotitolo: 20px;
    --c-testo: 18px;
    --c-nota: 14px;
    --c-riga: 15px;
    --c-etichetta: 12px;
    --c-tasto: 14px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16100B;
    --scheda: #20170F;
    --campo: #241A12;
    --testo: #EDE3D2;
    --testo-2: rgba(237, 227, 210, .68);
    --su-pieno: #16100B;
    --spento: rgba(237, 227, 210, .35);
    --tocco: rgba(237, 227, 210, .12);
    --filo: rgba(237, 227, 210, .14);
    --filo-blocco: rgba(237, 227, 210, .20);
    --filo-bersaglio: rgba(237, 227, 210, .40);
    --filo-campo: rgba(237, 227, 210, .40);
    --verde: #78C39A;
    --verde-segno: #4E9E78;
    --verde-superficie: #15291F;
    --acqua: #7FA3B2;
    --lacca: #D9455A;                   /* il lacca notturno dell'app: 4,4:1 sul fondo scuro */
    --brace: #C26A45;
    --lavoro: #EDE3D2;
    --occhio: rgba(237, 227, 210, .35);
    --attesa: #7FA3B2;
    --tinta-italiana: #4C1E1A;
    --tinta-greca: #312C3D;
    --tinta-messicana: #22271E;
    --tinta-spagnola: #483933;
    --tinta-giapponese: #222730;
    --tinta-francese: #293B48;
    --su-tinta: rgba(237, 227, 210, .82);
  }
}

/* 2. Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 400 var(--c-testo)/1.5 var(--sistema);
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* una parola non si spezza mai: niente sillabazione, niente tagli */
body { hyphens: manual; overflow-wrap: normal; word-break: normal; }

a { color: var(--testo); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }
a, button, label { -webkit-tap-highlight-color: var(--tocco); }
::selection { background: var(--testo); color: var(--su-pieno); }   /* la selezione è un'azione: inchiostro */
[id] { scroll-margin-top: 24px; }   /* un collegamento a un passaggio (#p-ca5) non lo incolla al bordo */

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 3. Cornice: testata, contenuto, piede --------------------------------- */

.testata, main, .piede {
  width: 100%;
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--margine);
}

main {
  display: grid;
  grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
  column-gap: var(--spazio-col);
  align-items: start;
}
main > * { grid-column: 1 / -1; }

/* 4. Testata: il marchio e le lingue ------------------------------------- */

.testata { display: flex; flex-direction: column; align-items: center; padding-top: var(--aria); }

.targa {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding-inline: 10px;
  color: var(--lacca); text-decoration: none;
  font: 500 var(--c-marchio)/1 var(--outfit); letter-spacing: .3em;
}
.targa svg { height: 20px; width: auto; aspect-ratio: 564 / 700; fill: currentColor; }
.targa span { margin-inline-end: -.3em; }   /* la spaziatura dopo l'ultima P non sposta il centro */

.lingua {
  align-self: stretch;
  display: flex; justify-content: center;
  border-bottom: 1px solid var(--filo);
}
.lingua a {
  position: relative;
  flex: 1 1 0; max-width: 132px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font: 600 var(--c-linguetta)/1 var(--outfit);
  color: var(--testo-2); text-decoration: none;
}
.lingua a[aria-current="page"] { color: var(--testo); }
.lingua a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--testo);
}

/* 5. Titoli e testi ------------------------------------------------------ */

.titolo {
  font: 700 var(--c-titolo)/1.05 var(--outfit);
  letter-spacing: -.03em;       /* come il titolo di pagina dell'app: Outfit 700, spaziatura −1 su 34 punti */
  margin-top: 28px;
}
/* Scostamento dalla consegna (08/10): a 320 px, con la spaziatura del testo allargata (WCAG 1.4.12), «signalements» del
   titolo francese dei contatti usciva dal bordo. Una parola non si spezza: nelle pagine di servizio scende il corpo. */
.servizio .titolo { font-size: min(var(--c-titolo), 11vw); }
/* una parola evidenziata nel titolo (oggi «cucinato bene» in home, «lista» nella conferma), con qualunque elemento:
   stessa voce, stesso colore, nessun fondo */
.titolo * { font: inherit; color: inherit; background: none; text-decoration: none; }
.piatto {
  font: 600 var(--c-piatto)/1.1 var(--outfit);
  letter-spacing: -.01em;
}
.sotto, .attacco {
  font: 400 var(--c-sottotitolo)/1.4 var(--sistema);
  color: var(--testo-2);
  max-width: var(--misura);
}

/* intestazione col trattino: come «— Per pranzo» nell'app */
.intestazione {
  display: flex; align-items: center; gap: 8px;
  font: 600 var(--c-intestazione)/1.3 var(--outfit);
}
.intestazione::before { content: ""; flex: none; width: 20px; height: 3px; background: currentColor; }
.intestazione .nota-destra { margin-left: auto; font: 500 var(--c-riga)/1.3 var(--outfit); color: var(--testo-2); }

/* etichetta MAIUSCOLA: come «INGREDIENTI» nella scheda dell'app */
.sez, .etichetta {
  font: 600 var(--c-etichetta)/1.3 var(--outfit);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sez { padding-top: var(--dentro-blocco); border-top: 1px solid var(--filo-blocco); margin-bottom: 7px; }

/* 6. Collegamenti a blocco e tasti -------------------------------------- */

/* il blocco col filo e la freccia: come «Esplora →» nella home dell'app */
.blocco-link {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 14px 20px;
  border: 1px solid var(--filo-bersaglio); border-radius: var(--r-comando);
  color: var(--testo); text-decoration: none;
}
.blocco-link .dice { flex: 1; min-width: 0; }
.blocco-link .dice b { display: block; font: 600 var(--c-carta)/1.3 var(--outfit); }
.blocco-link .dice span { display: block; font: 400 15px/1.4 var(--sistema); color: var(--testo-2); }
.freccia { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tasto, .attesa button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  border: 1px solid transparent; border-radius: var(--r-pieno);   /* bordo trasparente: con l'alto contrasto di Windows diventa visibile */
  background: var(--testo); color: var(--su-pieno);
  font: 500 var(--c-tasto)/1 var(--outfit); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}

/* 7. Carte delle ricette, striscia lavoro/attesa ------------------------- */

.carta { display: flex; flex-direction: column; color: var(--testo); text-decoration: none; min-width: 0; }
.carta img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-foto-piccola); background: var(--campo);
}
.carta .testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 14px; }
.carta .nome { font: 600 var(--c-carta)/1.2 var(--outfit); min-width: 0; }
.carta .min { flex: none; font: 700 var(--c-min-carta)/1.1 var(--outfit); font-variant-numeric: tabular-nums; }
/* compatta: nella carta piccola i minuti scendono sotto il nome, così nessuna parola del nome resta senza spazio */
.carta:not(.grande) .testa { flex-direction: column; gap: 2px; }
.carta:focus-visible { outline-offset: 4px; border-radius: var(--r-foto-piccola); }

.striscia { display: flex; gap: 2px; height: 5px; margin-top: 10px; }
.striscia i { display: block; min-width: 5px; border-radius: 999px; }   /* estremità tonde: come nella foto dell'app */
.striscia .mani { background: var(--lavoro); }
.striscia .att { background: var(--attesa); }

.leg { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font: 500 var(--c-riga)/1.35 var(--outfit); font-variant-numeric: tabular-nums; }
.leg span { display: flex; align-items: center; gap: 7px; }
.leg span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--r-comando); }
.leg .mani { color: var(--testo); }
.leg .mani::before { background: var(--lavoro); }
.leg .att { color: var(--acqua); }
.leg .att::before { background: var(--attesa); }

/* la carta grande della vetrina */
.carta.grande img { border-radius: var(--r-foto); }   /* 16:9 come tutte: il piatto resta intero */
.carta.grande .testa { align-items: baseline; margin-top: 18px; }
.carta.grande .nome { font-size: var(--c-sezione); line-height: 1.15; letter-spacing: -.01em; }
.carta.grande .min { font-size: var(--c-min-grande); line-height: 1; }
.carta.grande .striscia { height: 7px; gap: 3px; margin-top: 14px; }
.carta.grande .leg { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }

/* 8. Home ---------------------------------------------------------------- */

.casa .attacco { margin-top: 14px; }

.vetrina {
  display: grid;
  grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
  column-gap: var(--spazio-col);
  row-gap: 28px;
  margin-top: var(--tra-blocchi);
}
.vetrina > * { grid-column: 1 / -1; }
.vetrina > .intestazione { margin-bottom: -7px; }
.vetrina > .carta:not(.grande) { grid-column: span 2; }

.schede { margin-top: var(--tra-blocchi); display: grid; grid-template-columns: minmax(0, 1fr); }
.scheda {
  display: grid; grid-template-columns: minmax(104px, auto) minmax(0, 1fr); column-gap: 14px; row-gap: 4px;   /* la cifra allarga la sua colonna se serve, non esce */
  align-content: start;   /* le quattro schede di una fila sono alte uguali: l'aria in più va in fondo, non fra cifra e titolo */
  padding-block: var(--dentro-blocco);
  border-top: 1px solid var(--filo-blocco);
}
.scheda .v { grid-row: 1 / span 2; font: 700 var(--c-contatore)/1.1 var(--outfit); font-variant-numeric: tabular-nums; }
.scheda .v.verde { color: var(--verde); }
.scheda h2 { margin-top: 5px; }
.scheda p { color: var(--testo-2); max-width: var(--misura); }

/* 9. Indice -------------------------------------------------------------- */

.indice .attacco { margin-top: 14px; }

/* una cucina: la fascia con la sua tinta e il nome, poi le sue carte. Nessuna foto nella fascia:
   ogni foto compare una volta sola nella pagina. */
.cucina {
  display: grid;
  grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
  column-gap: var(--spazio-col);
  row-gap: var(--dentro-blocco);
  margin-top: var(--tra-blocchi);
}
.cucina > h2 {
  grid-column: 1 / -1;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-pieno);
  font: 600 var(--c-cucina)/1.15 var(--outfit);
  color: var(--su-tinta);
  background: var(--tinta-italiana);
}
.cucina.italiana > h2 { background: var(--tinta-italiana); }
.cucina.greca > h2 { background: var(--tinta-greca); }
.cucina.messicana > h2 { background: var(--tinta-messicana); }
.cucina.spagnola > h2 { background: var(--tinta-spagnola); }
.cucina.giapponese > h2 { background: var(--tinta-giapponese); }
.cucina.francese > h2 { background: var(--tinta-francese); }
.cucina > .carta { grid-column: span 2; }

/* 10. Pagina ricetta ----------------------------------------------------- */

.briciole {
  margin-top: var(--aria);
  font: 500 var(--c-riga)/20px var(--outfit);
  color: var(--testo-2);
}
.briciole a { display: inline-block; padding-block: 12px; color: var(--testo); }

.ricetta .piatto { margin-top: 7px; }
.ricetta .sotto { margin-top: 7px; }

.foto { margin-top: var(--dentro-blocco); }
.foto img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;   /* intera: il recipiente col suo bordo, come è composta */
  border-radius: var(--r-foto); background: var(--campo);
}
.foto figcaption { margin-top: 7px; text-align: right; font: 400 var(--c-nota)/1.4 var(--sistema); color: var(--testo-2); }

/* i quattro numeri, come nella scheda dell'app: in fila da quattro dove ci stanno, se no due per due */
.s-dati { margin-top: var(--dentro-blocco); container-type: inline-size; }
.cifre {
  display: flex; flex-wrap: wrap; gap: 18px var(--spazio-col);
  padding-block: var(--dentro-blocco);
  border-block: 1px solid var(--filo-blocco);
}
/* due per riga; in fila da quattro con le container query più sotto. min-content: se qualcuno
   allarga la spaziatura del testo (WCAG 1.4.12), un numero che non ci sta va a capo invece di sovrapporsi */
.cifra { flex: 1 1 calc(50% - var(--spazio-col)); min-width: min-content; }
.cifra .v { font: 700 var(--c-contatore)/1.1 var(--outfit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra .e { margin-top: 4px; font: 400 var(--c-nota)/1.3 var(--sistema); color: var(--testo-2); }
.cifra.verde .v { color: var(--verde); }

.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; font: 500 var(--c-riga)/1.4 var(--outfit); }
.meta span:last-child { flex-basis: 100%; font: 400 var(--c-nota)/1.4 var(--sistema); color: var(--testo-2); }

.s-ingredienti, .s-piano, .s-passaggi, .s-allergeni, .s-fonti, .s-altre, .presto { margin-top: var(--tra-blocchi); }

/* ingredienti: nome a sinistra, quantità a destra, un filo fra le righe */
.ingr li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px;
  padding-block: 11px;
  border-bottom: 1px solid var(--filo);
  font: 400 var(--c-testo)/1.35 var(--sistema);
}
.ingr li:last-child { border-bottom: 0; }
.ingr li > span:first-child { flex: 0 1 auto; min-width: 0; }
/* la quantità non si spezza mai (nemmeno sul trattino di «demi-cuillère»): se non sta accanto al nome, scende a destra */
.ingr .qta {
  margin-left: auto; white-space: nowrap; text-align: right;
  font: 600 var(--c-testo)/1.35 var(--outfit); font-variant-numeric: tabular-nums;
  color: var(--testo-2);
}

/* il piano: una riga per passaggio, come il piano dell'app. In compatta il nome sta sopra e la barra sotto,
   larga quanto la colonna dei nomi: a 390 la pista passa da 194 a 330 px e i nomi stanno su una riga.
   Da 600 il nome torna a sinistra e la barra a destra (sezione 14). */
.piano {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  margin-top: 7px;
}
.piano .riga { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: auto 22px; align-items: center; row-gap: 2px; padding-block: 5px; }
.piano .n { grid-row: 1; font: 500 var(--c-riga)/1.3 var(--outfit); font-variant-numeric: tabular-nums; color: var(--testo-2); }
.piano .nome { grid-row: 1; font: 600 var(--c-riga)/1.3 var(--outfit); }
.piano .nome small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* i minuti stanno nei passaggi: qui solo per chi legge con la voce */
/* la pista: i due fili verticali stanno a un terzo e a due terzi (sono righe piene, non sfumature) */
.piano .pista {
  grid-column: 2; grid-row: 2;
  position: relative; align-self: stretch;
  background:
    linear-gradient(var(--filo), var(--filo)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(var(--filo), var(--filo)) 66.667% 0 / 1px 100% no-repeat;
}
.piano .pista i { position: absolute; top: 50%; height: 16px; margin-top: -8px; min-width: 8px; border-radius: var(--r-barra); }   /* mai più stretta di 8 px: un passaggio di pochi minuti si vede */
.piano .mani { background: var(--lavoro); }
.piano .occhio { background: var(--occhio); }
.piano .att { background: var(--attesa); }
/* l'asse dei minuti: inizio, un terzo, due terzi, fine */
.piano .asse { grid-column: 2; position: relative; height: 26px; font: 500 var(--c-riga)/1 var(--outfit); font-variant-numeric: tabular-nums; color: var(--testo-2); }
.piano .asse span { position: absolute; top: 8px; white-space: nowrap; transform: translateX(-50%); }
.piano .asse span:nth-child(1) { left: 0; transform: none; }
.piano .asse span:nth-child(2) { left: 33.333%; }
.piano .asse span:nth-child(3) { left: 66.667%; }
.piano .asse span:nth-child(4) { left: 100%; transform: translateX(-100%); }
/* Scostamento dalla consegna (versione 4), deciso da Francesco l'08/10: fra 900 e 917 px la pista
   della moussaka è larga 256–267 px e «1h39min» tocca «2h29min» (fino a 4 px sovrapposti). Quando
   l'asse è più stretto di 19em, l'etichetta dei due terzi si toglie; il filo resta. */
.piano .asse { container-type: inline-size; }
@container (max-width: 19em) { .piano .asse span:nth-child(3) { display: none; } }

.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font: 500 var(--c-riga)/1.35 var(--outfit); }
.legenda span { display: flex; align-items: center; gap: 7px; }
.legenda span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--r-comando); }
.legenda .mani::before { background: var(--lavoro); }
.legenda .occhio { color: var(--testo-2); }
.legenda .occhio::before { background: var(--occhio); }
.legenda .att { color: var(--acqua); }
.legenda .att::before { background: var(--attesa); }
.s-piano .nota { margin-top: 14px; color: var(--testo-2); max-width: var(--misura); }

/* i passaggi. Quadratino e numero stanno nel margine sinistro, in una colonna loro; nome, tipo e testo stanno
   tutti nella colonna accanto, a filo. Il margine: quadratino 14 + 10 + due cifre (1,18em) + 10, cioè 58 px
   in compatta e 60 da 600. Un nome lungo va a capo dentro la sua colonna, mai sotto il numero. */
.passo {
  --rientro: calc(34px + 1.18 * var(--c-passo));
  padding-block: var(--dentro-blocco); padding-left: var(--rientro);
  border-bottom: 1px solid var(--filo);
}
.passo:last-child { border-bottom: 0; padding-bottom: 0; }
.passo h3 {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px;
  font: 600 var(--c-passo)/1.2 var(--outfit);
}
.passo h3::before { content: ""; position: absolute; left: calc(-1 * var(--rientro)); top: calc(.6em - 7px); width: 14px; height: 14px; border-radius: var(--r-comando); background: var(--lavoro); }   /* al centro della prima riga */
.passo.occhio h3::before { background: var(--occhio); }
.passo.att h3::before { background: var(--attesa); }
.passo h3 .n { position: absolute; right: calc(100% + 10px); top: 0; font-weight: 500; color: var(--testo-2); font-variant-numeric: tabular-nums; }   /* sulla linea della prima riga del nome; se fosse più largo, crescerebbe verso il quadratino, non sul nome */
.passo .tipo { flex-basis: 100%; font: 500 var(--c-riga)/1.35 var(--outfit); color: var(--testo-2); font-variant-numeric: tabular-nums; }
.passo > p, .passo > ul { max-width: var(--misura); }
.passo > p:first-of-type { margin-top: 10px; }
.passo ul { margin-top: 10px; display: grid; gap: 6px; color: var(--testo-2); }
.passo ul li { position: relative; padding-left: 18px; }
.passo ul li::before { content: "–"; position: absolute; left: 0; color: var(--testo-2); }
.passo .segnale { margin-top: 12px; }
.passo .segnale strong { font: 700 1em/1 var(--outfit); }

/* allergeni, fonti, altre ricette */
.allergeni { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 7px; font: 600 var(--c-carta)/1.4 var(--outfit); }
.allergeni li:not(:last-child)::after { content: "·"; margin-inline: 10px; color: var(--testo-2); font-weight: 500; }
.s-allergeni .nota { margin-top: 10px; font: 400 var(--c-nota)/1.4 var(--sistema); color: var(--testo-2); max-width: var(--misura); }

.s-fonti > p { max-width: var(--misura); }
.fonti { margin-top: 10px; max-width: var(--misura); }
.fonti li { border-bottom: 1px solid var(--filo); }
.fonti li:last-child { border-bottom: 0; }
.fonti a { display: block; min-height: 44px; padding-block: 11px; line-height: 1.35; }

.vicine li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-block: 13px; border-bottom: 1px solid var(--filo); }
.vicine a { font: 600 var(--c-carta)/1.25 var(--outfit); }
.vicine a::after { content: ""; position: absolute; inset: 0; }
.vicine small { flex: none; font: 600 var(--c-riga)/1 var(--outfit); font-variant-numeric: tabular-nums; color: var(--testo-2); }
.s-altre .blocco-link { margin-top: var(--dentro-blocco); }

/* 11. Lista d'attesa ----------------------------------------------------- */

.presto {
  padding: var(--dentro-blocco);
  border: 1px solid var(--filo-blocco);   /* la scheda sul fondo fa 1,06:1: il filo la fa vedere, come il blocco «Esplora →» dell'app */
  border-radius: var(--r-pieno);
  background: var(--scheda);
}
.presto h2 { font: 600 var(--c-sezione)/1.15 var(--outfit); letter-spacing: -.01em; }
.presto > p { margin-top: 10px; max-width: var(--misura); }
.presto > p + p { margin-top: 4px; }
.attesa { margin-top: var(--dentro-blocco); max-width: 34rem; }
.campi { display: grid; gap: 7px; }
.campi > label:first-child { font: 600 15px/1.3 var(--outfit); }
.attesa input[type="email"] {
  width: 100%; height: 48px; padding: 0 14px;
  font: 400 16px/1 var(--sistema); color: var(--testo);   /* 16: su iPhone il campo non ingrandisce la pagina */
  background: var(--campo);
  border: 1px solid var(--filo-campo); border-radius: var(--r-campo);
}
.attesa input[type="email"]:focus { outline: 2px solid var(--testo); outline-offset: 2px; }
/* email sbagliata: lo script mette aria-invalid sul campo, il filo diventa brace (2 px; il testo non si sposta) */
.attesa input[type="email"][aria-invalid="true"] { border: 2px solid var(--brace); padding-inline: 13px; }
.consenso { display: flex; align-items: flex-start; gap: 12px; padding-block: 10px; font: 400 15px/1.45 var(--sistema); }
.consenso input {
  -webkit-appearance: none; appearance: none;
  flex: none; display: grid; place-content: center;
  width: 24px; height: 24px; margin: 0;
  border: 1.5px solid var(--filo-campo); border-radius: var(--r-comando);
  background: var(--scheda);
}
.consenso input::before {
  content: ""; width: 12px; height: 7px; margin-top: -3px;
  border: solid var(--su-pieno); border-width: 0 0 2px 2px;
  transform: rotate(-45deg); opacity: 0;
}
.consenso input:checked { background: var(--testo); border-color: var(--testo); }
.consenso input:checked::before { opacity: 1; }
.consenso input:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }
.attesa button { width: 100%; margin-top: 7px; }
.attesa button:disabled { background: var(--spento); cursor: progress; }
.attesa [role="status"] { margin-top: 14px; font: 400 var(--c-testo)/1.45 var(--sistema); color: var(--brace); }
.attesa [role="status"]:empty { margin-top: 0; }
.attesa.fatto .campi { display: none; }
.attesa.fatto [role="status"] { margin-top: 0; color: var(--verde); }
.presto noscript p, .presto .senza-js { margin-top: 14px; font: 400 var(--c-testo)/1.45 var(--sistema); }
/* senza JavaScript il modulo non può iscrivere: si nasconde e resta la riga «Senza JavaScript, scrivi a…» */
@media (scripting: none) {
  .attesa .campi { display: none; }
}

/* 12. Piede -------------------------------------------------------------- */

.piede {
  margin-top: var(--tra-blocchi);
  padding-bottom: 28px;
  font: 500 var(--c-riga)/20px var(--outfit);
  color: var(--testo-2);
}
.piede::before { content: ""; display: block; height: 1px; margin-bottom: 10px; background: var(--filo-blocco); }
.piede a { display: inline-block; padding-block: 12px; color: var(--testo); }

/* 13. Pagine di servizio ------------------------------------------------- */

.servizio { padding-bottom: var(--tra-blocchi); }
.servizio .aggiornato { margin-top: 10px; font: 400 var(--c-nota)/1.4 var(--sistema); color: var(--testo-2); }
.servizio .altre-lingue { margin-top: 14px; font: 500 var(--c-riga)/20px var(--outfit); color: var(--testo-2); }
.servizio .altre-lingue a { display: inline-block; padding-block: 12px; }
.servizio .attacco { margin-top: 14px; }
.servizio .blocco-link { margin-top: var(--dentro-blocco); }
.servizio .blocco-link .dice span { color: var(--testo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.servizio section { margin-top: var(--tra-blocchi); max-width: var(--misura); }
.servizio section p { margin-top: 10px; }

.conferma { justify-items: center; text-align: center; padding-top: 12vh; padding-bottom: 96px; }
.conferma .titolo { margin-top: 0; }
.conferma .attacco { margin-top: 14px; margin-inline: auto; max-width: 26em; color: var(--testo); }
.conferma .tasto { margin-top: 28px; }

/* 14. Media: 600–899 ----------------------------------------------------- */

@media (min-width: 600px) {
  .vetrina > .carta:not(.grande) { grid-column: span 4; }
  .carta:not(.grande) .testa { flex-direction: row; gap: 10px; }
  .schede { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spazio-col); }
  .scheda { grid-template-columns: minmax(0, 1fr); }
  .scheda .v { grid-row: auto; }
  .cucina > .carta { grid-column: span 4; }
  .s-ingredienti { grid-column: 1 / span 6; }
  .piano { grid-template-columns: 24px fit-content(184px) minmax(0, 1fr); column-gap: 10px; }
  .piano .riga { grid-template-rows: auto; row-gap: 0; min-height: 30px; padding-block: 4px; }
  .piano .nome { padding-right: 4px; }
  .piano .pista { grid-column: 3; grid-row: 1; margin-block: -4px; }
  .piano .asse { grid-column: 3; }
  .passo .tipo { flex-basis: auto; margin-left: auto; }
  .attesa button { width: auto; min-width: 220px; justify-self: start; }
  .cucina > h2 { padding: 14px 20px; }
}

/* Indice in compatta e media: due carte per riga. Se una cucina ha un numero dispari di ricette,
   l'ultima carta prende tutta la riga, con la foto nella colonna di sinistra (larga come una carta)
   e il testo in quella di destra: nessuna riga resta mezza vuota. */
@media (max-width: 899.98px) {
  .cucina > .carta:last-child:nth-of-type(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--spazio-col);
  }
  .cucina > .carta:last-child:nth-of-type(odd) img { grid-column: 1; grid-row: 1 / -1; }
  .cucina > .carta:last-child:nth-of-type(odd) > :not(img) { grid-column: 2; }
  .cucina > .carta:last-child:nth-of-type(odd) .testa { margin-top: 0; }
}

/* I quattro numeri in fila da quattro quando la cella regge la cifra più larga possibile, «−0h00min»
   (119,9 px a 26, 138,3 a 30, 147,6 a 32; Outfit 700, cifre tabellari): serve
   4 × cifra + 3 × spazio fra le colonne. Altrimenti due per due (ci stanno sempre, da 320 in su). */
@media (max-width: 599.98px) {
  @container (min-width: 516px) { .cifra { flex-basis: calc(25% - var(--spazio-col)); } }   /* 4 × 119,9 + 3 × 12 */
}
@media (min-width: 600px) and (max-width: 899.98px) {
  @container (min-width: 626px) { .cifra { flex-basis: calc(25% - var(--spazio-col)); } }   /* 4 × 138,3 + 3 × 24 */
}
@media (min-width: 900px) {
  @container (min-width: 687px) { .cifra { flex-basis: calc(25% - var(--spazio-col)); } }   /* 4 × 147,6 + 3 × 32 */
}

/* 15. Larga: da 900 ------------------------------------------------------ */

@media (min-width: 900px) {
  .titolo { margin-top: 42px; }

  /* home */
  .casa > .titolo, .casa > .attacco { grid-column: 1 / span 8; }
  .vetrina > .carta.grande { grid-column: 1 / span 6; grid-row: 2 / span 2; }
  .vetrina > .carta:not(.grande) { grid-column: span 3; }
  .vetrina > .blocco-link { grid-column: 7 / -1; grid-row: 3; align-self: end; }
  .schede { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .casa .presto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spazio-col); }
  .casa .presto > h2, .casa .presto > p { grid-column: 1; }
  .casa .presto > .attesa { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }

  /* indice: ogni cucina è larga quanto le sue carte (3 colonne a carta) e le cucine si mettono
     una accanto all'altra. Le fasce e le carte di una stessa riga stanno allineate (subgrid). */
  .indice > .cucina {
    grid-column: span 3; grid-row: span 2;
    grid-template-columns: subgrid; grid-template-rows: subgrid;
  }
  .indice > .cucina:has(> .carta:nth-of-type(2)) { grid-column: span 6; }
  .indice > .cucina:has(> .carta:nth-of-type(3)) { grid-column: span 9; }
  .indice > .cucina:has(> .carta:nth-of-type(4)) { grid-column: span 12; }
  .indice > .cucina:has(> .carta:nth-of-type(5)) { grid-row: span 3; }   /* da 5 a 8 ricette: due file di carte */
  .indice > .cucina:has(> .carta:nth-of-type(9)) { grid-row: span 4; }   /* da 9 a 12: tre file */
  .cucina > .carta { grid-column: span 3; }

  /* ricetta: sotto nome e sottotitolo i quattro numeri, su tutta la riga, come nella scheda dell'app; poi a destra
     la foto, il piano e i passaggi, a sinistra gli ingredienti, dall'altezza della foto fino alla fine dei passaggi */
  .ricetta > .briciole { grid-row: 1; }
  .ricetta > .piatto { grid-column: 1 / span 10; grid-row: 2; }
  .ricetta > .sotto { grid-column: 1 / span 8; grid-row: 3; }
  .ricetta > .s-dati { grid-column: 1 / -1; grid-row: 4; }
  .ricetta > .foto { grid-column: 5 / -1; grid-row: 5; }
  .ricetta > .s-ingredienti { grid-column: 1 / span 4; grid-row: 5 / span 3; margin-top: var(--dentro-blocco); }
  .ricetta > .s-piano { grid-column: 5 / -1; grid-row: 6; }
  .ricetta > .s-passaggi { grid-column: 5 / -1; grid-row: 7; }
  .ricetta > .s-allergeni { grid-column: 1 / span 4; grid-row: 8; }
  .ricetta > .s-fonti { grid-column: 5 / -1; grid-row: 8; }
  .ricetta > .s-altre { grid-column: 1 / span 4; grid-row: 9; }
  .ricetta > .presto { grid-column: 5 / -1; grid-row: 9; }
  .piano { grid-template-columns: 24px fit-content(232px) minmax(0, 1fr); column-gap: 12px; }
  .carta:not(.grande) .testa { flex-direction: column; gap: 2px; }   /* carte piccole strette (da 181 a 276): minuti sotto il nome */
}

/* Gli ingredienti restano fermi mentre si scorre solo se ci stanno tutti, senza scorrimento interno.
   Il conto è sul caso peggiore. Una voce: 22 px di aria, 1 di filo e le sue righe da 24,3
   (con la quantità a capo, 2 px in più). Da 900 a 1199 la colonna è larga da 254 a 351 px e una voce
   può andare su tre righe (98 px); da 1200 la colonna è almeno 352 px e le righe sono al più due (74 px).
   Testata 51 px, 24 sopra e 24 sotto. Altezza che serve = 99 + voci × voce:
     da 900 a 1199: fino a 6 voci 687 px → fermi da 700; da 7 a 9 voci 981 → da 1000; da 10 a 12 1275 → da 1300;
     da 1200:       fino a 8 voci 691 px → fermi da 700; da 9 a 12 voci 987 → da 1000;
     da 13 voci in su scorrono sempre con la pagina. Le voci le conta :has(). */
@media (min-width: 900px) and (min-height: 700px) {
  .ricetta > .s-ingredienti { position: sticky; top: 24px; }
}
@media (min-width: 900px) and (max-width: 1199.98px) and (max-height: 999.98px) {
  .ricetta > .s-ingredienti:has(.ingr > li:nth-child(7)) { position: static; }
}
@media (min-width: 900px) and (max-width: 1199.98px) and (max-height: 1299.98px) {
  .ricetta > .s-ingredienti:has(.ingr > li:nth-child(10)) { position: static; }
}
@media (min-width: 1200px) and (max-height: 999.98px) {
  .ricetta > .s-ingredienti:has(.ingr > li:nth-child(9)) { position: static; }
}
@media (min-width: 900px) {
  .ricetta > .s-ingredienti:has(.ingr > li:nth-child(13)) { position: static; }
}

/* 16. Sotto il puntatore e premuto ------------------------------------------
   Gli stati «sotto il puntatore» solo dove un puntatore c'è: su telefono non restano accesi dopo il tocco. */
@media (hover: hover) {
  a:hover { text-decoration-thickness: 2px; }
  .lingua a:hover { color: var(--testo); }
  .blocco-link:hover { border-color: var(--testo); }
  .tasto:hover, .attesa button:hover:not(:disabled) { background: color-mix(in srgb, var(--testo) 86%, var(--fondo)); }
  .carta:hover .nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
}
.tasto:active, .attesa button:active:not(:disabled) { background: color-mix(in srgb, var(--testo) 76%, var(--fondo)); }
.blocco-link:active { border-color: var(--testo); background: var(--tocco); }

/* 17. Contrasto ------------------------------------------------------------
   Chi chiede più contrasto al sistema: secondario, fili e barre «d'occhio» più scuri. */
@media (prefers-contrast: more) {
  :root {
    --testo-2: rgba(42, 26, 18, .85);
    --filo: rgba(42, 26, 18, .32); --filo-blocco: rgba(42, 26, 18, .42); --filo-bersaglio: rgba(42, 26, 18, .60);
    --occhio: rgba(42, 26, 18, .60);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --testo-2: rgba(237, 227, 210, .85);
    --filo: rgba(237, 227, 210, .32); --filo-blocco: rgba(237, 227, 210, .42); --filo-bersaglio: rgba(237, 227, 210, .60);
    --occhio: rgba(237, 227, 210, .60);
  }
}
/* Alto contrasto di Windows: il sistema toglie i fondi, e con loro barre, striscia e quadratini.
   Qui tornano coi colori del sistema: lavoro = testo, d'occhio = grigio, attesa = evidenziato. */
@media (forced-colors: active) {
  .piano .pista i, .striscia i, .legenda span::before, .leg span::before, .passo h3::before,
  .lingua a[aria-current="page"]::after, .intestazione::before { forced-color-adjust: none; }
  .piano .mani, .striscia .mani, .legenda .mani::before, .leg .mani::before, .passo h3::before,
  .lingua a[aria-current="page"]::after, .intestazione::before { background: CanvasText; }
  .piano .occhio, .legenda .occhio::before, .passo.occhio h3::before { background: GrayText; }
  .piano .att, .striscia .att, .legenda .att::before, .leg .att::before, .passo.att h3::before { background: Highlight; }
}

/* 18. Stampa ---------------------------------------------------------------
   La ricetta su carta: nome, numeri, ingredienti, passaggi e allergeni, in nero su bianco.
   Niente linguette, briciole, foto, piano, modulo, fonti, altre ricette e piede. */
@media print {
  :root {
    --fondo: #FFF; --scheda: #FFF; --testo: #000; --testo-2: #333; --su-pieno: #FFF;
    --filo: #BBB; --filo-blocco: #888; --lacca: #000; --verde: #000;
    --acqua: #4A6670; --lavoro: #000; --occhio: rgba(0, 0, 0, .35); --attesa: #4A6670;   /* i quadratini come di giorno, anche col sistema scuro */
    --c-titolo: 26pt; --c-piatto: 24pt; --c-sottotitolo: 12pt; --c-testo: 10.5pt; --c-nota: 9pt;
    --c-riga: 9pt; --c-etichetta: 8pt; --c-passo: 12pt; --c-contatore: 16pt; --c-carta: 11pt;
    --tra-blocchi: 6mm; --dentro-blocco: 4mm; --margine: 0;
  }
  @page { margin: 16mm 15mm; }
  body { background: #FFF; color: #000; }
  .lingua, .briciole, .foto, .s-piano, .presto, .s-fonti, .s-altre, .piede, .vicine, .blocco-link { display: none !important; }
  .testata { align-items: flex-start; padding: 0; }
  .targa { min-height: 0; padding: 0 0 4mm; }
  main, .ricetta { display: block; max-width: none; padding: 0; }
  .ricetta > * { margin-top: var(--tra-blocchi); }
  .ricetta > .piatto { margin-top: 0; }
  .ricetta > .s-ingredienti { position: static; margin-top: var(--tra-blocchi); }
  .cifra { flex-basis: calc(25% - var(--spazio-col)); }
  .ingr { column-count: 2; column-gap: 10mm; }
  .ingr li { break-inside: avoid; padding-block: 1.6mm; }
  .passo { padding-block: 2mm; }
  .passo > p:first-of-type, .passo ul, .passo .segnale { margin-top: 2mm; }
  .passo ul { gap: 1mm; }
  .sez, .passo h3 { break-after: avoid; }                 /* un titolo non resta solo in fondo alla pagina */
  .passo li, .passo .segnale { break-inside: avoid; }      /* un consiglio non si spezza fra due pagine */
  .passo > p, .passo > ul, .sotto, .s-allergeni .nota { max-width: none; }   /* su carta la riga è la pagina */
  p, li { orphans: 3; widows: 3; }
  .passo h3::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* il quadratino della natura si stampa */
  a { color: #000; text-decoration: none; }
}