/* =============================================================================
   Espresso Code — stile del tema (block theme).
   Prima il telefono, poi tablet, desktop e ultrawide (fino a 2560 px e oltre).
   Tre livelli di fantasia, tutti con variabili CSS:
   - MISCELA  i colori della casa vengono dai preset di theme.json (--wp--preset--color--*), cioè dalla
              variazione di stile scelta dal proprietario (styles/*.json); [data-miscela] su <html> li
              sovrascrive: lo mette il server per le feste (HA, NA, CP, CV, SV, PA) o se l'opzione
              espresso_miscela forza P1-P5, e lo mette il lettore dal selettore (vince sempre lui);
   - TONO     [data-tono]     chiaro ("macchiato") o scuro ("tazzina"); senza scelta segue il sistema;
   - BANCONE  [data-modo]     bar (predefinito), terminale, giornale.
   I blocchi usano layout "default": niente max-width né margini iniettati da core, la griglia è qui.
   I font (@font-face) li dichiara theme.json: core li stampa nella <head>.
   Contrasto: ogni coppia testo/fondo di ogni miscela, tono e bancone è ≥ 4.5:1 (verificato il 2026-10-31).
   ============================================================================= */

/* ---------- Miscele ---------- */
:root {
	--espresso: var(--wp--preset--color--espresso, #1C1410);
	--crema: var(--wp--preset--color--crema, #F4EADB);
	--tostato: var(--wp--preset--color--tostato, #3A2A20);
	--schiuma: var(--wp--preset--color--schiuma, #CDBBA7);
	--nocciola: var(--wp--preset--color--nocciola, #6B5444);
	--caramello: var(--wp--preset--color--caramello, #E08A3C);
	--cannella: var(--wp--preset--color--cannella, #A04F17);
}
[data-miscela="P1"] { --espresso:#1C1410; --crema:#F4EADB; --tostato:#3A2A20; --schiuma:#CDBBA7; --nocciola:#6B5444; --caramello:#E08A3C; --cannella:#A04F17; }
[data-miscela="P2"] { --espresso:#14100E; --crema:#EFE8DF; --tostato:#2E2420; --schiuma:#BFB3A6; --nocciola:#5E4B3E; --caramello:#D98A4E; --cannella:#9A4616; }
[data-miscela="P3"] { --espresso:#161C26; --crema:#F1EBE0; --tostato:#26303F; --schiuma:#AEB6C4; --nocciola:#4F5B6E; --caramello:#F0A850; --cannella:#9A540F; }
[data-miscela="P4"] { --espresso:#6E2B19; --crema:#F6E9DA; --tostato:#8A3D29; --schiuma:#EBCDB8; --nocciola:#7A4B38; --caramello:#F5CC8E; --cannella:#8A2F14; }
[data-miscela="P5"] { --espresso:#17241F; --crema:#EFEADB; --tostato:#243730; --schiuma:#B5C4B8; --nocciola:#4C5E52; --caramello:#D9B764; --cannella:#76590F; }
[data-miscela="HA"] { --espresso:#1B1210; --crema:#F4E8D8; --tostato:#35241B; --schiuma:#D8BFA2; --nocciola:#6A4A33; --caramello:#F28C28; --cannella:#A8480A; }
[data-miscela="NA"] { --espresso:#1B1512; --crema:#F6ECDD; --tostato:#3A2A24; --schiuma:#D6C6AC; --nocciola:#6A5444; --caramello:#E6C46E; --cannella:#9B2A20; }
[data-miscela="CP"] { --espresso:#15110F; --crema:#F3EBDD; --tostato:#2C241F; --schiuma:#D2C7B2; --nocciola:#5E5140; --caramello:#E8C468; --cannella:#7A5A0C; }
[data-miscela="CV"] { --espresso:#1D1412; --crema:#F5E9D9; --tostato:#38271F; --schiuma:#E0CDB4; --nocciola:#6A4A38; --caramello:#F2A33A; --cannella:#A8421A; }
[data-miscela="SV"] { --espresso:#2A1216; --crema:#F7E8E1; --tostato:#4A2128; --schiuma:#E8C8C0; --nocciola:#7A4048; --caramello:#F2A7A0; --cannella:#A12B3E; }
[data-miscela="PA"] { --espresso:#232A1F; --crema:#F7F0DD; --tostato:#38422F; --schiuma:#CFD6B8; --nocciola:#55603F; --caramello:#F2D36B; --cannella:#6E6410; }

/* ---------- Tono: macchiato (chiaro) e tazzina (scuro) ---------- */
:root {
	--fondo: color-mix(in oklab, var(--crema) 72%, #fff);
	--fondo-2: var(--crema);
	--inchiostro: var(--espresso);
	--tenue: var(--nocciola);
	--accento: var(--cannella);
	--accento-2: var(--caramello);
	--linea: color-mix(in oklab, var(--espresso) 14%, transparent);
	--ombra: 0 1px 2px rgb(40 20 10 / .06), 0 8px 24px rgb(40 20 10 / .08);
	--codice-fondo: var(--espresso);
	--codice-testo: var(--crema);
	--scontrino: color-mix(in oklab, var(--fondo-2) 60%, #fff); /* fondo dello scontrino "In breve" */
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-tono="chiaro"]) {
		--fondo: var(--espresso);
		--fondo-2: color-mix(in oklab, var(--tostato) 62%, var(--espresso));
		--inchiostro: var(--crema);
		--tenue: var(--schiuma);
		--accento: var(--caramello);
		--accento-2: var(--caramello);
		--linea: color-mix(in oklab, var(--crema) 13%, transparent);
		--ombra: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px rgb(0 0 0 / .35);
		--codice-fondo: color-mix(in oklab, var(--espresso) 70%, #000);
		--scontrino: var(--tostato);
		color-scheme: dark;
	}
}
:root[data-tono="scuro"] {
	--fondo: var(--espresso);
	--fondo-2: color-mix(in oklab, var(--tostato) 62%, var(--espresso));
	--inchiostro: var(--crema);
	--tenue: var(--schiuma);
	--accento: var(--caramello);
	--accento-2: var(--caramello);
	--linea: color-mix(in oklab, var(--crema) 13%, transparent);
	--ombra: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px rgb(0 0 0 / .35);
	--codice-fondo: color-mix(in oklab, var(--espresso) 70%, #000);
	--scontrino: var(--tostato);
	color-scheme: dark;
}

/* ---------- Misure ---------- */
:root {
	--serif: var(--wp--preset--font-family--fraunces, "Fraunces", "Iowan Old Style", Charter, Georgia, serif);
	--sans: var(--wp--preset--font-family--inter, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--mono: var(--wp--preset--font-family--jetbrains-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	--testo-font: var(--sans);
	--titoli-font: var(--serif);
	--margine: clamp(16px, 4.5vw, 72px);
	--max: 1440px;
	--colonna: 44rem;
	--raggio: 14px;
	--testata-h: 60px;
	font-size: 100%;
}
@media (min-width: 2000px) { :root { --max: 2200px; font-size: 106.25%; } }
@media (min-width: 2800px) { :root { --max: 2600px; font-size: 118.75%; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Il fuoco non finisce sotto la testata fissa (WCAG 2.4.11) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--testata-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--fondo); color: var(--inchiostro);
	font: 400 1.0625rem/1.65 var(--testo-font);
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
	transition: background-color .3s, color .3s;
}
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.contenuto { flex: 1; }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: color-mix(in oklab, var(--accento) 60%, transparent); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--accento); }
:focus-visible { outline: 3px solid var(--anello, var(--accento)); outline-offset: 3px; border-radius: 4px; }
/* Sulle superfici scure (bancone, lavagna, chiusura, codice) l'anello del fuoco è caramello: la cannella del
   tono chiaro lì non arriva a 3:1 (WCAG 2.4.7, 1.4.11) */
.bancone, .lavagna, .chiusura, .testo pre { --anello: var(--caramello); }
::selection { background: var(--accento-2); color: var(--espresso); }
.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--inchiostro); color: var(--fondo); border-radius: 8px; }
.salta:focus { top: 1rem; }
h1, h2, h3, h4 { font-family: var(--titoli-font); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; }
@media (max-width: 599px) { h1, h2, h3, .bancone-titolo, .pezzo-titolo { hyphens: auto; } }
p { text-wrap: pretty; }
button, input, textarea, select { font: inherit; color: inherit; }

.bottone, .cerca button, .comment-form [type="submit"], .wp-element-button {
	display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.2em; border: 0; border-radius: 999px;
	background: var(--accento-2); color: var(--espresso); font-weight: 600; text-decoration: none; cursor: pointer;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 6px 18px color-mix(in oklab, var(--accento-2) 35%, transparent);
	transition: transform .2s, box-shadow .2s;
}
.bottone:hover, .cerca button:hover, .comment-form [type="submit"]:hover { color: var(--espresso); transform: translateY(-2px); }

/* ---------- Transizioni tra pagine (Chrome, Edge, Safari 18.2+): la testata resta ferma ---------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}
.testata { view-transition-name: testata; }

/* ---------- Testata (template part "header" + blocco espresso/testata) ---------- */
.testata {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in oklab, var(--fondo) 84%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--linea);
}
.testata-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--margine); height: var(--testata-h); display: flex; align-items: center; gap: 1rem; }
.marchio { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--inchiostro); margin-right: auto; }
.marchio:hover { color: var(--inchiostro); }
.marchio-tazza { width: 38px; height: 38px; flex: none; overflow: visible; }
.marchio-tazza .tazza-corpo { fill: var(--inchiostro); }
.marchio-tazza .tazza-manico, .marchio-tazza .tazza-piattino { fill: none; stroke: var(--inchiostro); stroke-width: 3; stroke-linecap: round; }
.marchio-tazza .tazza-crema { fill: var(--accento-2); }
.marchio-tazza .vapore path { fill: none; stroke: var(--accento-2); stroke-width: 2.2; stroke-linecap: round; opacity: .0; }
@media (prefers-reduced-motion: no-preference) {
	/* Un solo sbuffo per pagina, finito entro 5 s (WCAG 2.2.2) */
	.marchio-tazza .vapore path { animation: vapore 3.6s ease-in-out 1; stroke-dasharray: 14; }
	.marchio-tazza .vapore path:nth-child(2) { animation-delay: .5s; }
	.marchio-tazza .vapore path:nth-child(3) { animation-delay: 1s; }
}
@keyframes vapore {
	0% { opacity: 0; transform: translateY(4px); stroke-dashoffset: 14; }
	30% { opacity: .9; }
	100% { opacity: 0; transform: translateY(-6px); stroke-dashoffset: -14; }
}
.marchio-nome { font-size: 1.2rem; font-weight: 400; line-height: 1; letter-spacing: normal; white-space: nowrap; margin: 0; } /* h1 in home */
.marchio-a { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }
.marchio-b { font-family: var(--mono); font-size: .78em; color: var(--accento); }
.edizione { display: none; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav-larga { display: none; }
.nav-larga a, .lingue a { display: block; padding: .45rem .7rem; border-radius: 999px; text-decoration: none; font-size: .92rem; font-weight: 500; }
.nav-larga a:hover, .lingue a:hover { background: var(--fondo-2); color: var(--inchiostro); }
.nav-larga .current-menu-item a { background: var(--fondo-2); }
.lingue { display: flex; gap: .1rem; padding: 3px; border: 1px solid var(--linea); border-radius: 999px; }
/* Bersagli di almeno 24 × 24 px (WCAG 2.5.8) */
.lingue a { display: grid; place-items: center; min-width: 28px; min-height: 26px; padding: .3rem .55rem; font: 500 .75rem/1 var(--mono); }
.lingue a[aria-current] { background: var(--inchiostro); color: var(--fondo); }

.nav details { position: relative; }
.nav summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary:hover, .nav details[open] > summary { background: var(--fondo-2); }
.hamburger, .hamburger::before, .hamburger::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s; }
.hamburger { position: relative; }
.hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; }
.hamburger::before { top: -6px; } .hamburger::after { top: 6px; }
details[open] .hamburger { background: transparent; }
details[open] .hamburger::before { transform: translateY(6px) rotate(45deg); }
details[open] .hamburger::after { transform: translateY(-6px) rotate(-45deg); }
/* Contrasto elevato di Windows: i colori di fondo spariscono, l'hamburger lo ridisegno col colore del testo */
@media (forced-colors: active) {
	.hamburger, .hamburger::before, .hamburger::after { forced-color-adjust: none; background: CanvasText; }
	details[open] .hamburger { background: transparent; }
}
.miscela summary svg { width: 22px; height: 22px; fill: var(--accento); stroke: var(--fondo); stroke-width: 1.4; }

.nav-tendina, .miscela-pannello {
	position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
	width: min(88vw, 340px); padding: 1rem; border-radius: var(--raggio);
	background: var(--fondo); border: 1px solid var(--linea); box-shadow: var(--ombra);
	animation: apri .18s ease-out;
}
@keyframes apri { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.nav-voci a { display: block; padding: .65rem .5rem; border-bottom: 1px solid var(--linea); text-decoration: none; font-weight: 500; }
.nav-tendina .cerca { margin-top: .8rem; }
.miscela-titolo { margin: .2rem 0 .45rem; font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.miscela-scelte, .miscela-toni, .miscela-modi { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; margin-bottom: .9rem; }
.miscela-toni, .miscela-modi { grid-template-columns: repeat(3, 1fr); }
.miscela-pannello button {
	display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; min-height: 36px; padding: .5rem .6rem; border-radius: 10px;
	border: 1px solid var(--linea); background: transparent; cursor: pointer; font-size: .85rem; text-align: left; line-height: 1.2;
}
.miscela-toni button, .miscela-modi button { justify-content: center; text-align: center; }
.miscela-pannello button small { flex-basis: 100%; padding-left: 1.65rem; color: var(--tenue); font-size: .72rem; }
.miscela-pannello button:hover { background: var(--fondo-2); }
.miscela-pannello button[aria-pressed="true"] { border-color: var(--accento); background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--accento); }
.miscela-nota { margin: 0; font-size: .72rem; line-height: 1.45; color: var(--tenue); }
.chicco { width: 1.2rem; height: 1.2rem; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--c2) 0 34%, var(--c1) 36%); box-shadow: 0 0 0 1px var(--linea); }

@media (min-width: 900px) {
	:root { --testata-h: 68px; }
	.nav-larga { display: flex; gap: .1rem; margin-right: .5rem; }
	.nav-menu { display: none; }
	.marchio-nome { font-size: 1.35rem; }
}

/* ---------- Ricerca (blocco core/search con classe "cerca") ---------- */
.cerca { max-width: 30rem; margin: 1rem auto; }
.cerca .wp-block-search__inside-wrapper { display: flex; gap: .5rem; }
.cerca input { flex: 1; min-width: 0; margin: 0; padding: .7rem 1rem; border-radius: 999px; border: 1px solid var(--tenue); background: var(--fondo-2); }
/* Bordo dei campi ≥ 3:1 sul fondo (WCAG 1.4.11): --tenue, non --linea */
.cerca input::placeholder, .comment-form ::placeholder { color: var(--tenue); opacity: 1; }
.cerca button { margin: 0; }

/* ---------- Grana e anelli di tazza (decorazioni) ---------- */
.grana::after, .bancone::after, .chiusura::after, .lavagna::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.anelli { position: absolute; pointer-events: none; fill: none; stroke: var(--caramello); stroke-opacity: .16; stroke-width: 7; }
.anelli circle:nth-child(2) { stroke-width: 3; stroke-opacity: .7; stroke: var(--schiuma); opacity: .25; }
.anelli circle:nth-child(3) { stroke-width: 1.5; }

/* ---------- Il bancone (ultimo articolo, in home) ---------- */
.bancone {
	position: relative; overflow: hidden; isolation: isolate;
	margin: clamp(.75rem, 2vw, 1.5rem) auto 0; max-width: calc(var(--max) - 2 * var(--margine) + 2 * clamp(0px, 2vw, 24px));
	width: calc(100% - 2 * clamp(0px, 2vw, 24px));
	border-radius: clamp(0px, 2vw, 28px);
	background: var(--espresso); color: var(--crema);
	display: grid;
}
.bancone .crema {
	position: absolute; inset: -30%; z-index: -1; filter: blur(40px); opacity: .55;
	background:
		radial-gradient(40% 35% at 88% 18%, color-mix(in oklab, var(--caramello) 70%, transparent), transparent 70%),
		radial-gradient(35% 40% at 70% 60%, color-mix(in oklab, var(--cannella) 80%, transparent), transparent 70%),
		radial-gradient(30% 30% at 50% 90%, color-mix(in oklab, var(--schiuma) 40%, transparent), transparent 70%);
}
/* La crema caramello sta a destra, lontana dal testo (sopra una macchia chiara il caramello del titoletto non
   arriva a 4.5:1), e non gira più: un'animazione infinita senza pausa non passa WCAG 2.2.2. */
.bancone .anelli { width: min(80vw, 560px); right: -12%; top: -18%; }
.bancone-in { position: relative; padding: clamp(2rem, 7vw, 6rem) var(--margine) clamp(2rem, 6vw, 5rem); max-width: 60rem; }
.bancone-sopra { margin: 0 0 1rem; font: 500 .78rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--caramello); }
.bancone-sopra a { color: inherit; }
.bancone-titolo { margin: 0; font-size: clamp(2.1rem, 1.2rem + 4.2vw, 5.4rem); line-height: 1.02; letter-spacing: -.025em; }
.bancone-titolo a { text-decoration: none; color: var(--crema); background: linear-gradient(var(--caramello), var(--caramello)) 0 100% / 0 .08em no-repeat; transition: background-size .5s; }
.bancone-titolo a:hover { background-size: 100% .08em; }
.bancone-estratto { margin: 1.3rem 0 0; max-width: 40rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: color-mix(in oklab, var(--crema) 82%, var(--schiuma)); }
.bancone-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin: 1.4rem 0 1.8rem; font-size: .9rem; color: var(--schiuma); }
.bancone .lettura { --accento: var(--caramello); color: var(--schiuma); }
.bancone-foto { margin: 0; position: relative; }
.bancone-foto img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
@media (min-width: 1100px) {
	.bancone { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: min(76vh, 760px); align-items: center; }
	/* Le immagini in evidenza sono spesso card con testo: intere, come una cartolina appoggiata al bancone */
	.bancone-foto { padding: clamp(2rem, 4vw, 5rem) var(--margine) clamp(2rem, 4vw, 5rem) 0; }
	.bancone-foto img { border-radius: 14px; transform: rotate(1.6deg); box-shadow: 0 2px 6px rgb(0 0 0 / .3), 0 30px 60px rgb(0 0 0 / .45); outline: 1px solid color-mix(in oklab, var(--crema) 12%, transparent); }
}

/* ---------- Tempo di lettura: la tazzina (blocco espresso/lettura) ---------- */
.lettura { display: inline-flex; align-items: center; gap: .35em; font-size: .88rem; color: var(--tenue); white-space: nowrap; }
.tazzina { width: 1.5em; height: 1.5em; flex: none; }
.tazzina .caffe { fill: var(--accento); }
.tazzina .bordo { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lettura-min { font: 500 .95em/1 var(--mono); color: var(--inchiostro); }
.lettura-nome { font-size: .85em; font-variant: all-small-caps; letter-spacing: .06em; }
.bancone .lettura-min { color: var(--crema); }

/* ---------- Il menu (pattern espresso-code/menu: core/query come il listino di un bar) ---------- */
.menu, .lavagna, .vuoto { max-width: var(--max); margin: 0 auto; padding: 0 var(--margine); }
.menu { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: 4rem; }
.menu-titolo { display: flex; align-items: center; gap: 1rem; margin: 0 0 2rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }
.menu-titolo::before, .menu-titolo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.menu-titolo::before { flex: 0 0 clamp(1rem, 4vw, 3rem); }
.menu-voci { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr)); column-gap: clamp(2rem, 5vw, 5rem); }
.menu-voci > li { margin: 0; border-bottom: 1px dashed var(--linea); }
.voce {
	position: relative; /* tutta la voce è cliccabile (link del titolo esteso) */
	/* Il prezzo (puntini + tazzina) non scende mai sotto il suo contenuto: va a capo il titolo, non esce la riga.
	   "auto" e non max-content: le righe che occupano due colonne hanno min-width 0 e non allargano il prezzo. */
	display: grid; grid-template-columns: minmax(0, max-content) minmax(auto, 1fr); column-gap: .5rem;
	grid-template-areas: "origine origine" "titolo prezzo" "estratto estratto" "data data";
	padding: 1.4rem 0 1.3rem;
}
.voce > * { margin: 0; }
.voce > .voce-origine, .voce > .voce-estratto, .voce > .voce-data { min-width: 0; }
.voce-origine { grid-area: origine; margin-bottom: .35rem; font: 500 .72rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accento); }
.voce-titolo { grid-area: titolo; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem); line-height: 1.22; }
.voce-titolo a { text-decoration: none; }
.voce-titolo a::after { content: ""; position: absolute; inset: 0; }
/* Il prezzo con i puntini del listino: i puntini riempiono lo spazio tra titolo e tazzina */
.voce-prezzo { grid-area: prezzo; display: flex; align-items: flex-end; gap: .5rem; }
.voce-prezzo::before { content: ""; flex: 1; min-width: 1.5rem; margin-bottom: .42em; border-bottom: 2px dotted color-mix(in oklab, var(--inchiostro) 30%, transparent); }
.voce-estratto { grid-area: estratto; margin-top: .55rem; color: var(--tenue); font-size: .95rem; }
.voce-estratto p { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.voce-data { grid-area: data; margin-top: .45rem; font: 500 .75rem/1 var(--mono); color: var(--tenue); }
.voce:hover .voce-titolo a { color: var(--accento); }
.voce:hover .voce-prezzo::before { border-color: var(--accento); }
@media (max-width: 480px) { .voce .lettura-nome { display: none; } }

.lavagna { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(.75rem, 2vw, 1.5rem); padding-top: clamp(2.5rem, 7vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); background: var(--espresso); color: var(--crema); border-radius: clamp(0px, 2vw, 28px); max-width: calc(var(--max) - 2 * var(--margine)); width: calc(100% - 2 * clamp(0px, 2vw, 24px)); }
.lavagna-sopra { margin: 0 0 .5rem; font: 500 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--caramello); }
.lavagna-titolo { margin: 0; font-size: clamp(2rem, 1.3rem + 3vw, 4rem); }
.lavagna-desc { max-width: 40rem; color: var(--schiuma); }

/* Paginazione (core/query-pagination e core/comments-pagination) */
.paginazione { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; margin-top: 2.5rem; }
.paginazione > *, .paginazione .page-numbers { margin: 0; }
.paginazione [class*="-numbers"] { display: contents; }
.page-numbers, .paginazione a[class*="-previous"], .paginazione a[class*="-next"] { display: inline-flex; align-items: center; gap: .4em; min-height: 36px; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--linea); text-decoration: none; font-size: .9rem; }
.page-numbers.dots { border-color: transparent; }
.page-numbers.current { background: var(--inchiostro); color: var(--fondo); }

.vuoto { text-align: center; padding-top: 5rem; padding-bottom: 5rem; }
.vuoto .tazzina { width: 120px; height: 120px; color: var(--tenue); }
.vuoto h1 { font-size: clamp(4rem, 12vw, 9rem); margin: 0; color: var(--accento); }

/* ---------- Articolo (template single) ---------- */
.pezzo { padding-bottom: 3rem; }
.pezzo-testa { max-width: 62rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 6rem) var(--margine) clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.pezzo-sopra { margin: 0 0 1.1rem; }
.pezzo-sopra a { display: inline-block; padding: .35rem .8rem; border-radius: 999px; background: var(--fondo-2); border: 1px solid var(--linea); font: 500 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--accento); }
.pezzo-titolo { margin: 0; font-size: clamp(2rem, 1.15rem + 3.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.025em; }
.pezzo-sommario { max-width: 42rem; margin: 1.2rem auto 0; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: var(--tenue); }
.pezzo-sommario p { margin: 0; }
.pezzo-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem 1.1rem; margin: 1.5rem 0 0; font-size: .9rem; color: var(--tenue); }
.pezzo-agg { padding: .15rem .55rem; border-radius: 6px; background: color-mix(in oklab, var(--accento-2) 22%, transparent); color: var(--inchiostro); }
.pezzo-foto { max-width: min(var(--max), 90rem); margin: 0 auto 2rem; padding: 0 clamp(0px, 3vw, var(--margine)); }
.pezzo-foto img { width: 100%; border-radius: clamp(0px, 2vw, 22px); aspect-ratio: 16 / 9; object-fit: cover; }

.pezzo-griglia { max-width: var(--max); margin: 0 auto; padding: 0 var(--margine); display: grid; grid-template-columns: minmax(0, var(--colonna)); justify-content: center; gap: 2rem; }
.pezzo-indice details { border: 1px solid var(--linea); border-radius: var(--raggio); padding: .9rem 1.1rem; background: var(--fondo-2); }
.pezzo-indice summary { cursor: pointer; font: 500 .75rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.pezzo-indice ol { list-style: none; margin: .8rem 0 0; padding: 0; counter-reset: voce; }
.pezzo-indice li { margin: .2rem 0; }
.pezzo-indice li.liv-3 { padding-left: 1rem; font-size: .92em; }
.pezzo-indice a { display: block; padding: .25rem .5rem; border-left: 2px solid transparent; text-decoration: none; font-size: .9rem; line-height: 1.35; color: var(--tenue); border-radius: 0 6px 6px 0; }
.pezzo-indice a:hover { color: var(--inchiostro); }
.pezzo-indice a[aria-current="true"] { color: var(--inchiostro); border-left-color: var(--accento); background: color-mix(in oklab, var(--accento-2) 14%, transparent); }
.pezzo-margine { display: grid; gap: 1rem; align-content: start; }
.scheda { padding: 1rem 1.1rem; border-radius: var(--raggio); border: 1px solid var(--linea); }
.scheda-titolo { margin: 0 0 .6rem; font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.scheda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .92rem; }
.scheda-lista button { min-height: 24px; padding: 0; border: 0; background: none; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accento) 60%, transparent); text-underline-offset: .18em; cursor: pointer; }
.autore { display: flex; gap: .8rem; align-items: flex-start; }
.autore img, .autore .iniziale { border-radius: 50%; flex: none; }
/* Iniziale al posto di Gravatar (espresso_avatar()) */
.iniziale { display: grid; place-items: center; width: var(--lato, 40px); height: var(--lato, 40px); border-radius: 50%; background: var(--fondo-2); border: 1px solid var(--linea); color: var(--inchiostro); font: 600 calc(var(--lato, 40px) * .42)/1 var(--serif); }
.autore-nome { margin: 0; font-weight: 600; }
.autore-bio { margin: .25rem 0 0; font-size: .85rem; color: var(--tenue); line-height: 1.5; }

@media (min-width: 1200px) {
	.pezzo-griglia { grid-template-columns: 15rem minmax(0, var(--colonna)); gap: clamp(2.5rem, 4vw, 5rem); justify-content: center; }
	.pezzo-indice { grid-column: 1; grid-row: 1 / span 2; }
	.pezzo-indice details { position: sticky; top: calc(var(--testata-h) + 1.5rem); max-height: calc(100vh - var(--testata-h) - 3rem); overflow: auto; background: transparent; border: 0; padding: 0; }
	.pezzo-indice summary { pointer-events: none; list-style: none; }
	.pezzo-indice summary::-webkit-details-marker { display: none; }
	.pezzo-corpo { grid-column: 2; }
	.pezzo-margine { grid-column: 2; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
	.pezzo-griglia:not(:has(.pezzo-indice)) { grid-template-columns: minmax(0, var(--colonna)); }
	.pezzo-griglia:not(:has(.pezzo-indice)) > * { grid-column: 1; }
}
@media (min-width: 1700px) {
	:root { --colonna: 46rem; }
	.pezzo-griglia, .pezzo-griglia:not(:has(.pezzo-indice)) { grid-template-columns: 16rem minmax(0, var(--colonna)) 18rem; }
	.pezzo-griglia:not(:has(.pezzo-indice)) > .pezzo-corpo { grid-column: 2; }
	.pezzo-margine, .pezzo-griglia:not(:has(.pezzo-indice)) > .pezzo-margine { grid-column: 3; grid-row: 1; grid-template-columns: 1fr; position: sticky; top: calc(var(--testata-h) + 1.5rem); }
}

/* Pagine (privacy, policy dei commenti…): una colonna sola */
.pezzo--pagina > .pezzo-corpo { max-width: calc(var(--colonna) + 2 * var(--margine)); margin: 0 auto; padding: 0 var(--margine); }

/* La tazzina che si riempie leggendo (animazione legata allo scroll, niente JS dove il browser la supporta) */
.livello-lettura { position: fixed; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 40; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--fondo) 88%, transparent); border: 1px solid var(--linea); box-shadow: var(--ombra); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.livello-lettura .tazzina { width: 32px; height: 32px; color: var(--inchiostro); }
.livello-lettura .caffe { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--letto, 0)); }
@supports (animation-timeline: scroll()) {
	.livello-lettura .caffe { animation: riempi linear both; animation-timeline: scroll(root); }
	@keyframes riempi { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

/* ---------- Testo dell'articolo (core/post-content con classe "testo") ---------- */
.testo { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.72; overflow-wrap: break-word; }
/* Hash di commit, percorsi, URL: vanno a capo invece di allargare la pagina a 320 px (WCAG 1.4.10) */
.testo :not(pre) > code, .testo a { overflow-wrap: anywhere; }
.testo > * { margin-top: 0; margin-bottom: 1.25em; }
.testo h2 { font-size: 1.75em; margin: 2.2em 0 .7em; position: relative; }
.testo h3 { font-size: 1.32em; margin: 1.9em 0 .6em; }
.testo h2::before { content: ""; position: absolute; left: 0; top: -.75em; width: 2.2rem; height: 3px; border-radius: 3px; background: var(--accento-2); }
.testo a { color: var(--accento); text-decoration-thickness: .07em; }
.testo a:hover { text-decoration-thickness: .14em; }
.testo ul, .testo ol { padding-left: 1.3em; }
.testo li { margin: .35em 0; }
.testo li::marker { color: var(--accento); }
.testo strong { font-weight: 650; }
.testo blockquote, .testo .wp-block-quote { margin-left: 0; margin-right: 0; padding: .3em 0 .3em 1.4em; border-left: 3px solid var(--accento-2); font-family: var(--serif); font-size: 1.15em; line-height: 1.5; }
.testo blockquote cite { display: block; margin-top: .6em; font: 500 .7em/1.3 var(--mono); color: var(--tenue); }
.testo code { font: 500 .86em/1 var(--mono); padding: .15em .38em; border-radius: 5px; background: var(--fondo-2); border: 1px solid var(--linea); }
.testo pre, .testo .wp-block-code {
	position: relative; margin-left: calc(-1 * min(var(--margine), 1.5rem)); margin-right: calc(-1 * min(var(--margine), 1.5rem));
	padding: 2.6em 1.3em 1.3em; border-radius: var(--raggio); overflow-x: auto;
	background: var(--codice-fondo); color: var(--codice-testo); font: 500 .84em/1.6 var(--mono); tab-size: 2;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
}
.testo pre::before { /* i tre "fori" del portafiltro, al posto dei pallini delle finestre */
	content: ""; position: absolute; top: .95em; left: 1.2em; width: .55em; height: .55em; border-radius: 50%;
	background: var(--caramello); box-shadow: 1em 0 0 color-mix(in oklab, var(--caramello) 60%, transparent), 2em 0 0 color-mix(in oklab, var(--caramello) 30%, transparent);
}
.testo pre code { padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.copia { position: absolute; top: .55em; right: .6em; min-height: 24px; padding: .25em .7em; border-radius: 6px; border: 1px solid color-mix(in oklab, var(--crema) 25%, transparent); background: transparent; color: var(--crema); font: 500 .72rem/1.4 var(--mono); cursor: pointer; opacity: .75; }
.copia:hover, .copia:focus-visible { opacity: 1; }
.testo figure { margin-left: 0; margin-right: 0; }
.testo img { border-radius: 10px; }
.testo figcaption, .testo .wp-element-caption { margin-top: .5em; font-size: .85rem; color: var(--tenue); text-align: center; }
.testo .wp-block-table { overflow-x: auto; }
.testo table { width: 100%; border-collapse: collapse; font-size: .92em; }
/* Colonne larghe quanto il contenuto, non cinque fette uguali (has-fixed-layout di core spezza le parole a metà):
   nomi in codice interi, e se la tabella non ci sta scorre la figura, come consente WCAG 1.4.10 per i dati */
.testo .wp-block-table table { table-layout: auto; }
.testo .wp-block-table table :is(td, th) { word-break: normal; }
@media (max-width: 599px) { .testo .wp-block-table table :is(td, th) { min-width: 7em; } } /* sui telefoni colonne leggibili, non tre parole per riga: scorre la tabella */
.testo td code { white-space: nowrap; overflow-wrap: normal; }
.testo th, .testo td { padding: .6em .8em; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.testo th { font: 600 .78em/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.testo hr, .testo .wp-block-separator { border: 0; height: 1.4em; margin: 2.5em auto; overflow: visible; text-align: center; background: none; opacity: 1; }
.testo hr::before, .testo .wp-block-separator::before { content: "☕︎  ·  ☕︎  ·  ☕︎"; color: var(--accento); letter-spacing: .4em; font-size: .9rem; }
.testo details, .testo .wp-block-details { border: 1px solid var(--linea); border-radius: var(--raggio); padding: 0 1.1em; background: var(--fondo-2); }
.testo details + details { margin-top: -.6em; }
.testo summary { cursor: pointer; padding: .9em 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.testo summary::-webkit-details-marker { display: none; }
.testo summary::after { content: "+"; content: "+" / ""; font: 500 1.2em/1 var(--mono); color: var(--accento); transition: transform .2s; }
.testo details[open] summary::after { transform: rotate(45deg); }
.testo details > :last-child { margin-bottom: 1em; }
.testo .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.testo .wp-block-column { flex: 1 1 14rem; min-width: 0; }

/* "In breve" dei pattern GEO: uno scontrino */
.sfparis-tldr {
	--dente: 12px;
	position: relative; padding: 1.6em 1.4em 1.5em; margin-bottom: 2em !important;
	background: var(--scontrino); color: var(--inchiostro);
	font-size: .95em;
	-webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--dente) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--dente) 51% repeat-x;
	mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--dente) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--dente) 51% repeat-x;
	filter: drop-shadow(0 4px 10px rgb(0 0 0 / .08));
}
.sfparis-tldr h2 { margin: 0 0 .8em !important; font: 500 .8rem/1 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding-bottom: .9em; border-bottom: 2px dashed var(--linea); }
.sfparis-tldr h2::before { display: none; }
.sfparis-tldr > :last-child { margin-bottom: 0; }
.sfparis-updated { display: none; } /* la data di aggiornamento è già nella testata dell'articolo */

/* ---------- Piede dell'articolo ---------- */
.pezzo-piede { max-width: calc(var(--colonna) + 2 * var(--margine)); margin: 3rem auto 0; padding: 0 var(--margine); }
.etichette { display: flex; flex-wrap: wrap; gap: .4rem; }
.etichette .wp-block-post-terms__separator { display: none; }
.etichette a { display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: var(--fondo-2); font: 500 .8rem/1.2 var(--mono); text-decoration: none; }
.etichette a::before { content: "#"; }
.altri { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 700px) { .altri { grid-template-columns: 1fr 1fr; } .altri-succ { grid-column: 2; text-align: right; } }
.altri a { display: grid; gap: .4rem; padding: 1.2rem 1.3rem; border-radius: var(--raggio); border: 1px solid var(--linea); text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; line-height: 1.3; transition: border-color .2s, transform .2s; }
.altri a:hover { border-color: var(--accento); transform: translateY(-2px); color: var(--inchiostro); }
.altri small { font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }

/* Altri caffè della stessa origine (blocco espresso/correlati) */
.correlati { max-width: calc(var(--colonna) + 2 * var(--margine)); margin: 3rem auto 0; padding: 0 var(--margine); }
.correlati-titolo { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.correlati-titolo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.correlati-voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .correlati-voci { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.correlati-voci a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1rem 1.1rem; border-radius: var(--raggio); border: 1px solid var(--linea); text-decoration: none; transition: border-color .2s, transform .2s; }
.correlati-voci a:hover { border-color: var(--accento); transform: translateY(-2px); color: var(--inchiostro); }
.correlati-origine { font: 500 .7rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accento); }
.correlati-nome { flex: 1; font: 600 1.05rem/1.3 var(--titoli-font); }

/* ---------- Commenti (pattern espresso-code/commenti: blocchi core) ---------- */
.commenti { max-width: calc(var(--colonna) + 2 * var(--margine)); margin: 3rem auto 0; padding: 0 var(--margine); }
.commenti-lista, .commenti-lista ol { list-style: none; padding: 0; }
.commenti-lista ol { padding-left: 1.5rem; border-left: 2px solid var(--linea); }
.commento { padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.commento-testa { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }
.commento-testa > * { margin: 0; }
.commento-testa img { display: block; border-radius: 50%; }
.commento-autore { font-weight: 600; }
.commento-data { font-size: .8rem; color: var(--tenue); }
.commento-testo > :last-child { margin-bottom: .5rem; }
.commento-rispondi { font-size: .85rem; }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--tenue); background: var(--fondo-2); }
.comment-form label { display: block; font-size: .85rem; margin-bottom: .25rem; }
.comment-form .comment-form-cookies-consent label { display: inline; }
.comment-form [type="checkbox"] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0 .4rem 0 0; vertical-align: -.25em; accent-color: var(--accento); } /* ≥ 24 px con l'etichetta; flex: none perché core mette la riga in flex e la stringerebbe */
.comment-notes { font-size: .88rem; color: var(--tenue); }
.comment-notes a { color: var(--accento); }

/* ---------- Chiusura (template part "footer" + blocco espresso/chiusura) ---------- */
.chiusura { position: relative; isolation: isolate; overflow: hidden; margin-top: 3rem; background: var(--espresso); color: var(--crema); }
.chiusura a { color: var(--crema); }
.chiusura a:hover { color: var(--caramello); }
.chiusura .anelli { width: 520px; left: -160px; bottom: -220px; }
.chiusura-in { position: relative; max-width: var(--max); margin: 0 auto; padding: 3.5rem var(--margine) 2rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.chiusura .marchio-nome { font-size: 1.6rem; margin: 0 0 .5rem; }
.chiusura .marchio-b { color: var(--caramello); }
.chiusura p { color: var(--schiuma); margin: 0; }
.chiusura-titolo { font: 500 .72rem/1 var(--mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--caramello) !important; margin-bottom: .8rem !important; }
.chiusura ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.chiusura ul + ul { margin-top: .45rem; }
.chiusura-orari { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--crema) 14%, transparent); font: 500 .75rem/1.6 var(--mono); }

/* =============================================================================
   BANCONE "TERMINALE": tutto in monospazio, fosfori della miscela, righe di scansione, prompt.
   ============================================================================= */
:root[data-modo="terminale"] {
	--fondo: color-mix(in oklab, var(--espresso) 55%, #000);
	--fondo-2: color-mix(in oklab, var(--espresso) 80%, #000);
	--inchiostro: color-mix(in oklab, var(--caramello) 78%, var(--crema));
	--tenue: color-mix(in oklab, var(--caramello) 80%, var(--espresso));
	--accento: var(--caramello); --accento-2: var(--caramello);
	--linea: color-mix(in oklab, var(--caramello) 22%, transparent);
	--testo-font: var(--mono); --titoli-font: var(--mono); --raggio: 2px;
	--scontrino: var(--fondo-2); /* scuro con qualunque tono */
	color-scheme: dark;
}
[data-modo="terminale"] body { font-size: .95rem; text-shadow: 0 0 6px color-mix(in oklab, var(--caramello) 35%, transparent); }
[data-modo="terminale"] body::before { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px); }
[data-modo="terminale"] h1, [data-modo="terminale"] h2, [data-modo="terminale"] h3 { letter-spacing: 0; font-weight: 500; }
[data-modo="terminale"] .bancone, [data-modo="terminale"] .lavagna, [data-modo="terminale"] .chiusura { background: var(--fondo); color: var(--inchiostro); border: 1px solid var(--linea); }
[data-modo="terminale"] .bancone .crema, [data-modo="terminale"] .anelli, [data-modo="terminale"] .bancone-foto { display: none; }
[data-modo="terminale"] .bancone { grid-template-columns: 1fr; min-height: 0; }
[data-modo="terminale"] .bancone-titolo { font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); }
[data-modo="terminale"] .bancone-titolo a, [data-modo="terminale"] .chiusura a { color: var(--inchiostro); }
/* Le decorazioni del terminale sono solo da vedere: content "…" / "" le tiene fuori dai nomi accessibili.
   Doppia dichiarazione: un browser che non conosce il testo alternativo tiene la prima. */
[data-modo="terminale"] .bancone-sopra::before { content: "$ cat ultimo.md  # "; content: "$ cat ultimo.md  # " / ""; color: var(--tenue); }
/* Il cursore lampeggia 5 volte e poi resta acceso (WCAG 2.2.2: niente che lampeggi per più di 5 s) */
[data-modo="terminale"] .bancone-titolo::after, [data-modo="terminale"] .pezzo-titolo::after { content: "▌"; content: "▌" / ""; margin-left: .15em; color: var(--accento); animation: cursore 1s steps(1) 5; }
@keyframes cursore { 50% { opacity: 0; } }
[data-modo="terminale"] .menu-titolo::before { content: "$ ls -l ~/menu"; content: "$ ls -l ~/menu" / ""; flex: none; height: auto; background: none; font-size: .9rem; color: var(--tenue); }
/* Il titolo tradotto non si vede ma resta il nome del titolo per gli screen reader */
[data-modo="terminale"] .menu-titolo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-modo="terminale"] .voce { grid-template-columns: 7.5rem auto minmax(0, 1fr); grid-template-areas: "data prezzo titolo" "data prezzo estratto"; column-gap: 1.2rem; padding: .6rem 0; }
[data-modo="terminale"] .menu-voci > li { border-bottom: 0; }
[data-modo="terminale"] .voce-origine, [data-modo="terminale"] .voce-prezzo::before, [data-modo="terminale"] .lettura-nome, [data-modo="terminale"] .tazzina { display: none; }
[data-modo="terminale"] .voce-data { margin: 0; align-self: start; padding-top: .25em; }
[data-modo="terminale"] .voce-prezzo { align-self: start; }
[data-modo="terminale"] .voce-titolo { font-size: 1rem; }
[data-modo="terminale"] .voce-titolo a::before { content: "-rw-r--r-- "; content: "-rw-r--r-- " / ""; color: var(--tenue); }
[data-modo="terminale"] .voce-estratto { margin-top: .2rem; font-size: .85rem; }
[data-modo="terminale"] .voce-estratto p { -webkit-line-clamp: 1; line-clamp: 1; }
[data-modo="terminale"] .menu-voci { grid-template-columns: 1fr; }
[data-modo="terminale"] .testo h2::before { content: "## "; content: "## " / ""; position: static; display: inline; background: none; width: auto; height: auto; color: var(--tenue); }
[data-modo="terminale"] .testo h3::before { content: "### "; content: "### " / ""; color: var(--tenue); }
[data-modo="terminale"] .testo pre { border: 1px solid var(--linea); background: var(--fondo-2); color: var(--inchiostro); }
[data-modo="terminale"] .marchio-tazza { display: none; }
[data-modo="terminale"] .marchio-nome::before { content: "~/"; content: "~/" / ""; color: var(--tenue); font-family: var(--mono); }
[data-modo="terminale"] .marchio-a { font-family: var(--mono); font-weight: 500; }
[data-modo="terminale"] .livello-lettura { border-radius: 2px; }
[data-modo="terminale"] .livello-lettura .tazzina { display: block; }
[data-modo="terminale"] .pezzo-foto img, [data-modo="terminale"] .testo img { filter: grayscale(1) sepia(.6) contrast(1.1); }

/* =============================================================================
   BANCONE "GIORNALE": carta, inchiostro nero, testata centrata con la data, colonne con filetti.
   ============================================================================= */
:root[data-modo="carta"] {
	--fondo: #F3EEE3; --fondo-2: #EAE3D3; --inchiostro: #16120F; --tenue: #5A5048;
	--accento: color-mix(in oklab, var(--cannella) 85%, #16120F); --accento-2: var(--accento); --linea: rgb(22 18 15 / .22);
	--testo-font: "Iowan Old Style", Charter, "Bitstream Charter", Georgia, serif; --raggio: 0;
	--scontrino: #FBF8F1; /* chiaro con qualunque tono */
	color-scheme: light;
}
[data-modo="carta"] body { font-size: 1.1rem; }
[data-modo="carta"] .testata { position: relative; background: var(--fondo); backdrop-filter: none; border-bottom: 4px double var(--inchiostro); }
[data-modo="carta"] .testata-in { height: auto; flex-wrap: wrap; justify-content: center; padding-top: 1.2rem; padding-bottom: .8rem; }
[data-modo="carta"] .marchio { margin: 0; flex-basis: 100%; justify-content: center; }
[data-modo="carta"] .marchio-tazza { display: none; }
[data-modo="carta"] .marchio-nome { font-size: clamp(2.2rem, 1rem + 6vw, 5.5rem); letter-spacing: -.03em; }
[data-modo="carta"] .marchio-b { color: var(--inchiostro); }
[data-modo="carta"] .edizione { display: block; flex-basis: 100%; margin: .5rem 0; padding: .35rem 0; text-align: center; border-top: 1px solid var(--inchiostro); border-bottom: 1px solid var(--inchiostro); font: 500 .75rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
[data-modo="carta"] .bancone, [data-modo="carta"] .lavagna, [data-modo="carta"] .chiusura { --anello: var(--accento); background: transparent; color: var(--inchiostro); border-radius: 0; }
[data-modo="carta"] .bancone { border-bottom: 1px solid var(--inchiostro); }
[data-modo="carta"] .bancone .crema, [data-modo="carta"] .anelli, [data-modo="carta"] .bancone::after, [data-modo="carta"] .lavagna::after, [data-modo="carta"] .chiusura::after { display: none; }
[data-modo="carta"] .bancone-titolo a, [data-modo="carta"] .chiusura a { color: var(--inchiostro); }
[data-modo="carta"] .bancone-estratto, [data-modo="carta"] .bancone-meta, [data-modo="carta"] .chiusura p, [data-modo="carta"] .lavagna-desc { color: var(--tenue); }
[data-modo="carta"] .bancone-sopra, [data-modo="carta"] .lavagna-sopra, [data-modo="carta"] .chiusura-titolo { color: var(--accento) !important; }
[data-modo="carta"] .bancone-foto img { filter: grayscale(1) contrast(1.15); mask-image: none; -webkit-mask-image: none; }
[data-modo="carta"] .bancone .lettura { color: var(--tenue); }
[data-modo="carta"] .bancone .lettura-min { color: var(--inchiostro); }
[data-modo="carta"] .menu-voci { display: block; columns: 3 20rem; column-gap: 2.5rem; column-rule: 1px solid var(--linea); }
[data-modo="carta"] .menu-voci > li { break-inside: avoid; border-bottom: 1px solid var(--linea); }
[data-modo="carta"] .voce-prezzo::before { border-bottom-style: solid; border-bottom-width: 1px; }
[data-modo="carta"] .voce-estratto p { -webkit-line-clamp: 4; line-clamp: 4; }
[data-modo="carta"] .bottone, [data-modo="carta"] .wp-element-button, [data-modo="carta"] .cerca button { background: var(--inchiostro); color: var(--fondo); box-shadow: none; border-radius: 0; }
[data-modo="carta"] .testo > p:first-of-type::first-letter { float: left; font: 600 3.6em/.85 var(--serif); margin: .06em .1em 0 0; color: var(--accento); }
[data-modo="carta"] .testo h2::before { display: none; }
[data-modo="carta"] .testo h2 { border-top: 1px solid var(--inchiostro); padding-top: .4em; }
[data-modo="carta"] .pezzo-foto img, [data-modo="carta"] .testo img { filter: grayscale(1) contrast(1.1); }
[data-modo="carta"] .chiusura { border-top: 4px double var(--inchiostro); }
[data-modo="carta"] .nav { flex-basis: 100%; justify-content: center; }

/* ---------- Movimento ridotto, stampa ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	/* La tazzina segue lo scroll del lettore, non si muove da sola: la durata "auto" vince sulla regola sopra */
	.livello-lettura .caffe { animation-duration: auto !important; }
}
@media print {
	.testata, .pezzo-indice, .pezzo-margine, .livello-lettura, .altri, .correlati, .commenti, .chiusura, .copia { display: none !important; }
	body { background: #fff; color: #000; font: 11pt/1.5 Georgia, serif; }
	.pezzo-griglia { display: block; }
	.testo a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
	.testo pre { background: #f4f4f4; color: #000; white-space: pre-wrap; }
}

/* ---------- Telefoni stretti: la testata deve stare in 320-400 px ---------- */
@media (max-width: 599px) {
	.lingue { border: 0; padding: 0; }
	.lingue li:has([aria-current]) { display: none; }
	.marchio-tazza { width: 32px; height: 32px; }
	.marchio { gap: .4rem; }
	.nav { gap: 0; }
	.bancone-estratto { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 379px) {
	.marchio-nome { font-size: 1.05rem; }
	.nav summary { width: 38px; }
}