/* Lunatika Factory — taccuino.css (Fase 2B, Perimetro B del blocco Taccuino).
   Provenienza (INCOLLATO dal demo, non reinterpretato):
     · LISTA  (home.php / is_home)   → magazine.css   (classi .mag-*)
     · ARTICOLO (single.php / post)  → article.css    (classi .art-*)
     · HERO SCURO della lista        → single-edizione.css (.lf-edizione__hero*),
       riportate qui col prefisso .lf-tac-hero* per essere identiche al dark hero
       del sito (immagine in evidenza della Pagina page_for_posts + velo; assente
       → fondo scuro tipografico).
   Adattamenti dichiarati rispetto al demo magazine/article:
     · NIENTE .mag-hero* (hero chiaro del demo) → sostituito dal dark hero .lf-tac-hero*
       (testata = deviazione di progetto; il CORPO della lista è fedele al demo).
     · INCOLLATE dal demo (fidelity pass 2): .mag-filters*/.mag-chip* (barra filtri
       con contatori e pillola attiva), .mag-layout 2 colonne (main + sidebar 320px)
       con le sue responsive, .mag-side*/.mag-nl*/.mag-top*/.mag-side-ad* (sidebar),
       .mag-feat-eyebrow + avatar nella byline, .mag-card-eyebrow (occhiello card).
     · NON riportate: .mag-card.is-text / .mag-card.is-wide (la griglia del Taccuino
       usa solo card immagine standard, per scelta di semplicità della lista).
       La newsletter usa il form GPFB inline dentro .mag-nl-form: le regole input/
       button avvicinano il markup del plugin al .mag-nl del demo (non identico).
     · article.css: .art-toc* / .art-bio* / .art-mobile-toc / .art-top-ad-wrap NON
       riportate (non usate). La .art-rail resta come colonna reale (blocco Condividi
       + slot ad del Perimetro C). Drop-cap .art-p-first non applicata (the_content
       nativo non marca il primo paragrafo): innocua se assente.
   Token: tutti da core.css / tokens-demo-alias.css (alias layer già accodato).
   NESSUN token nuovo aggiunto: verificati presenti tutti i token usati. */


/* ============================================================
   HERO SCURO — copiato da single-edizione.css (.lf-edizione__hero*)
   col prefisso .lf-tac-hero*. Identico al dark hero del sito.
   ============================================================ */
.lf-taccuino { padding: 3rem 0; }

.lf-tac-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem);
	margin-bottom: 2.5rem;
}
.lf-tac-hero > * { position: relative; z-index: 1; }

/* Riga identità: eyebrow rame */
.lf-tac-hero__eyebrow {
	margin: 0 0 28px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--lf-rame);
}
.lf-tac-hero__eyebrow::before {
	content: "";
	display: inline-block;
	width: 36px;
	height: 1px;
	background: currentColor;
	margin-right: 14px;
	vertical-align: middle;
}

/* H1 = titolo del taccuino (parola in corsivo rame). Font grande + colonna
   contenuta perché il titolo si spezzi su ~3 righe come in blog.html
   ("Il taccuino di Lunatika" → più righe), senza <br> cablati. */
.lf-tac-hero__title {
	font-family: var(--lf-font-display);
	font-weight: 600;
	font-size: clamp(56px, 10vw, 128px);
	line-height: 0.95;
	letter-spacing: -.025em;
	color: var(--lf-avorio);
	margin: 0;
	max-width: 9ch;
	text-wrap: balance;
}
.lf-tac-hero__title em { font-style: italic; font-weight: 400; color: var(--lf-rame-light); }
[data-theme="light"] .lf-tac-hero__title em { color: var(--lf-rame-dim); }

.lf-tac-hero__stand {
	margin: clamp(22px, 3vw, 36px) 0 0;
	max-width: 620px;
	font-family: var(--lf-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.5;
	color: rgba(var(--lf-fg-rgb), .8);
	text-wrap: pretty;
}

/* Hero fotografico (immagine in evidenza della Pagina presente): fondo + velo
   scuro, testo chiaro in ENTRAMBI i temi (l'hero diventa superficie scura, come
   nel demo). I letterali chiari sono voluti: qui il colore segue la foto, non il tema. */
.lf-tac-hero--photo { background: var(--lf-nero); border-radius: 18px; padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem); }
.lf-tac-hero--photo > .lf-tac-hero__img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: brightness(.5) saturate(1) contrast(1.04); }
.lf-tac-hero--photo > .lf-tac-hero__veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(12,11,14,.32) 0%, rgba(12,11,14,.55) 60%, rgba(12,11,14,.85) 100%); }
.lf-tac-hero--photo .lf-tac-hero__eyebrow { color: var(--lf-rame-light); }
.lf-tac-hero--photo .lf-tac-hero__title { color: #f5efe6; }
.lf-tac-hero--photo .lf-tac-hero__title em { color: var(--lf-rame-light); }
.lf-tac-hero--photo .lf-tac-hero__stand { color: rgba(245,239,230,.82); }

/* ---- TESTATA di SEZIONE (category.php / taxonomy-lf_autore.php) — B3 ----
   In CIMA l'identità Taccuino (eyebrow + "Il taccuino di Lunatika", come
   l'index), SOTTO in piccolo e in rame il nome della sezione corrente
   (categoria o autore). Riusa il dark hero adattivo .lf-tac-hero*: titolo ad
   alto contrasto in entrambi i temi (--lf-avorio theme-aware), nome sezione in
   rame (--lf-rame theme-aware). La barra filtri sotto porta la chip attiva. */
.lf-tac-hero__section {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: clamp(20px, 2.6vw, 30px) 0 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lf-rame);
}
.lf-tac-hero__section-av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	border: 1px solid rgba(var(--accent-2-rgb), 0.32);
	box-shadow: var(--sh-2, 0 2px 8px rgba(12, 11, 14, 0.22));
}
.lf-tac-hero__section-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-tac-hero__section-name { line-height: 1.2; }
.lf-tac-hero--section .lf-tac-hero__stand { margin-top: clamp(18px, 2.4vw, 28px); max-width: 620px; }

/* ---- TESTATA della LISTA (blog index) — 2 COLONNE col FILETTO rame ----
   Impianto del demo (.mag-hero): titolo a SINISTRA (colonna larga), standfirst
   a DESTRA separato da una LINEA VERTICALE rame (border-left). Vale SOLO per
   l'index (modificatore --index): categoria/autore restano impilati. Resta su
   fondo scuro (deviazione di testata già dichiarata): cambia solo l'impianto a
   due colonne. La spezzatura del titolo è conseguenza della larghezza colonna +
   font-size grande, NON di <br> cablati nel campo. */
.lf-tac-hero--index {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: end;
}
.lf-tac-hero--index .lf-tac-hero__title { max-width: none; } /* la colonna governa la spezzatura */
.lf-tac-hero--index .lf-tac-hero__stand {
	margin: 0;
	max-width: 340px;
	padding: 0 0 10px 18px;
	border-left: 1px solid var(--lf-rame); /* IL FILETTO verticale rame (demo: accent-2) */
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.4;
	color: rgba(var(--lf-fg-rgb), 0.62);
}
.lf-tac-hero--photo.lf-tac-hero--index .lf-tac-hero__stand { color: rgba(245, 239, 230, 0.82); }

/* Responsive testata (demo): sotto i 1024px torna a UNA colonna (standfirst
   sotto il titolo, il filetto diventa accento a sinistra); a 768px font ridotto. */
@media (max-width: 1024px) {
	.lf-tac-hero--index { grid-template-columns: 1fr; align-items: start; gap: 24px; }
	.lf-tac-hero--index .lf-tac-hero__stand { padding-bottom: 0; max-width: 540px; }
}
@media (max-width: 768px) {
	.lf-tac-hero--index .lf-tac-hero__stand { font-size: 16px; padding-left: 14px; }
}


/* ============================================================
   LISTA — magazine.css (INCOLLATO). Layout 2 colonne (main + sidebar),
   come blog.html. La sola deviazione del Taccuino è la testata (dark hero
   .lf-tac-hero al posto del .mag-hero chiaro del demo); il corpo è fedele.
   ============================================================ */

/* ---- FILTERS — barra chip su tutta la pagina (link agli archivi reali) ---- */
.mag-filters-wrap {
	border-top: 1px solid var(--lf-divider-dark);
	border-bottom: 1px solid var(--lf-divider-dark);
	background: rgba(var(--bg-rgb), 0.6);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	position: sticky;
	top: 72px;
	z-index: 50;
}
.mag-filters {
	max-width: 1240px; margin: 0 auto;
	padding: 16px clamp(20px, 6vw, 60px);
	display: flex; gap: 8px; flex-wrap: wrap;
	align-items: center;
}
.mag-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 18px;
	border-radius: var(--r-pill);
	border: 1px solid rgba(var(--accent-rgb), 0.28);
	background: transparent;
	font-family: var(--font-body);
	font-size: 11px; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(var(--fg-rgb), 0.78);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: all var(--t-base) var(--ease);
}
.mag-chip:hover { border-color: var(--accent); color: var(--accent-hover); transform: translateY(-1px); }
.mag-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mag-chip.active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--lf-on-accent, #faf8f5);
	box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.28);
}
/* Contatori (TUTTO 10, POESIA 4, …) — LEGGIBILITÀ a colpo d'occhio (verdetto Gian,
   prevale sulla soglia-gate): 12px/italic/muted erano ancora fiacchi → 14px, NON
   corsivo, peso più presente, COLORE PIENO per stato (niente opacity muted). Sulla
   chip ATTIVA = on-accent pieno (su borgogna); sulle INATTIVE = rame nitido (chiaro
   su scuro qui / scuro su avorio nel light-theme sotto). Priorità: leggibilità
   reale, non la fedeltà-px al demo (il demo li aveva più piccoli). */
.mag-chip .count {
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--lf-rame-light);
	opacity: 1;
}
.mag-chip.active .count { color: var(--lf-on-accent, #faf8f5); }

/* ---- LAYOUT 2 colonne (main + sidebar 320px), come il demo ---- */
.mag-layout {
	max-width: 1240px; margin: 0 auto;
	padding: clamp(36px, 5vw, 56px) clamp(20px, 6vw, 60px) 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(36px, 5vw, 64px);
	align-items: start;
}
.mag-main { min-width: 0; display: flex; flex-direction: column; gap: 28px; }

/* Empty state (nessun articolo nella categoria/autore). */
.mag-empty p {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 22px;
	color: var(--fg-muted);
	text-align: center;
	padding: 64px 24px;
	margin: 0;
}

/* ---- FEATURED CARD — big 16:9 image + body ---- */
.mag-feat {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	background: var(--bg-card);
	border-radius: var(--r-xl); overflow: hidden;
	border: 1px solid var(--lf-card-border);
	transition: all var(--t-base) var(--ease);
	text-decoration: none; color: inherit;
}
.mag-feat:hover {
	border-color: var(--lf-card-border-strong);
	box-shadow: var(--sh-3);
	transform: translateY(-2px);
}
.mag-feat-img { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.mag-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.mag-feat:hover .mag-feat-img img { transform: scale(1.04); }
.mag-feat-pin {
	position: absolute; top: 16px; left: 16px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 13px;
	background: rgba(12, 11, 14, 0.78);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(245, 239, 230, 0.18);
	border-radius: var(--r-pill);
	font-size: 9.5px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: #f5efe6;
}
.mag-feat-pin::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: var(--accent-hover);
}
.mag-feat-body {
	padding: clamp(28px, 4vw, 44px);
	display: flex; flex-direction: column; justify-content: center;
}
.mag-feat-eyebrow {
	font-size: 10.5px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--accent-hover);
	margin-bottom: 16px;
}
.mag-feat-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--fg);
	margin: 0 0 16px;
	text-wrap: pretty;
	transition: color var(--t-base) var(--ease);
}
.mag-feat-title em { font-style: italic; color: var(--accent-2-hover); font-weight: 400; }
.mag-feat:hover .mag-feat-title { color: var(--accent-2-hover); }
.mag-feat-stand {
	font-size: 15px; font-weight: 300;
	color: var(--fg-muted);
	line-height: 1.7;
	margin: 0 0 24px;
	text-wrap: pretty;
}
.mag-feat-byline {
	display: flex; align-items: center; gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--fg-muted);
}
.mag-feat-byline > span { white-space: nowrap; }
.mag-feat-byline img {
	width: 30px; height: 30px; border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(var(--accent-2-rgb), 0.25);
}
.mag-feat-byline .nm { color: var(--fg); font-weight: 500; }
.mag-feat-byline .sep { color: var(--fg-muted); } /* no opacity su muted (AA) */

/* ---- ARTICLE GRID — 2-col (lista semplice, niente varianti span) ---- */
.mag-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.mag-card {
	display: flex; flex-direction: column;
	background: var(--bg-card);
	border: 1px solid var(--lf-card-border);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: all var(--t-base) var(--ease);
	text-decoration: none; color: inherit;
	min-width: 0;
}
.mag-card:hover {
	transform: translateY(-4px);
	border-color: var(--lf-card-border-strong);
	box-shadow: var(--sh-3);
}
.mag-card-img { aspect-ratio: 16/10; overflow: hidden; }
.mag-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.mag-card:hover .mag-card-img img { transform: scale(1.05); }
.mag-card-body {
	padding: 22px 24px 24px;
	display: flex; flex-direction: column;
	flex: 1;
}
.mag-card-eyebrow {
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: 10px;
}
.mag-card-title {
	font-family: var(--font-display);
	font-size: 22px; font-weight: 600;
	line-height: 1.22;
	color: var(--fg);
	margin: 0 0 10px;
	text-wrap: pretty;
	transition: color var(--t-base) var(--ease);
}
.mag-card-title em { font-style: italic; color: var(--accent-2-hover); font-weight: 500; }
.mag-card:hover .mag-card-title { color: var(--accent-2-hover); }
.mag-card-stand {
	font-size: 13.5px; font-weight: 300;
	color: var(--fg-muted);
	line-height: 1.65;
	margin: 0 0 18px;
}
.mag-card-meta {
	font-size: 11.5px;
	color: var(--fg-muted);
	margin-top: auto;
	display: flex; align-items: center; gap: 6px;
	flex-wrap: wrap;
}
.mag-card-meta > span { white-space: nowrap; }
.mag-card-meta .nm { color: var(--fg); }
.mag-card-meta .sep { opacity: 0.5; }

/* ---- PAGINATION — the_posts_pagination annida i numeri in .nav-links: il flex
   del demo va su quel contenitore; il <nav class="mag-pag"> porta solo bordo/spazi. ---- */
.mag-pag {
	margin-top: 56px;
	padding: 36px 0 8px;
	border-top: 1px solid var(--lf-divider-dark);
}
.mag-pag .nav-links {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}
.mag-pag a, .mag-pag span {
	min-width: 42px; height: 42px;
	border-radius: var(--r-pill);
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 14px;
	font-size: 13px;
	color: var(--fg-muted);
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: 0.04em;
	border: 1px solid transparent;
	transition: all var(--t-base) var(--ease);
}
.mag-pag a:hover { color: var(--fg); border-color: var(--lf-card-border-strong); }
.mag-pag a.active,
.mag-pag span.current {
	background: var(--accent);
	color: white;
	border-color: var(--accent);
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}
.mag-pag .ell,
.mag-pag .dots { pointer-events: none; letter-spacing: 0.05em; }
.mag-pag .nav,
.mag-pag .prev,
.mag-pag .next {
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase;
	padding: 0 18px;
}
.mag-pag .nav.disabled,
.mag-pag .prev[aria-disabled="true"],
.mag-pag .next[aria-disabled="true"] { opacity: 0.28; pointer-events: none; }
.mag-pag-spacer { flex: 0 0 12px; }

/* ============================================================
   SIDEBAR — newsletter (GPFB inline) + più letti + ad. INCOLLATO dal demo.
   ============================================================ */
.mag-side {
	position: sticky;
	top: 156px; /* sotto header (72) + barra filtri sticky (~60) + respiro */
	display: flex; flex-direction: column; gap: 22px;
}
.mag-side-block {
	background: var(--bg-card);
	border: 1px solid var(--lf-card-border);
	border-radius: var(--r-lg);
	padding: 26px 24px;
}
.mag-side-label {
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: 14px;
}
.mag-side-title {
	font-family: var(--font-display);
	font-size: 24px; font-weight: 600;
	line-height: 1.15;
	margin: 0 0 8px;
	color: var(--fg);
}
.mag-side-title em { font-style: italic; color: var(--accent-2-hover); font-weight: 400; }
.mag-side-desc {
	font-size: 13px; font-weight: 300;
	color: var(--fg-muted);
	line-height: 1.6;
	margin: 0 0 18px;
}

/* ---- newsletter compatta — il markup GPFB vive dentro .mag-nl-form; le regole
   colpiscono input/button generati dal plugin per avvicinarsi al demo. ---- */
.mag-nl-form { display: flex; flex-direction: column; gap: 10px; }
.mag-nl-form input[type="email"],
.mag-nl-form input[type="text"] {
	width: 100%;
	padding: 12px 18px;
	background: rgba(var(--fg-rgb), 0.05);
	border: 1px solid rgba(var(--accent-2-rgb), 0.2);
	border-radius: var(--r-pill);
	font-family: var(--font-body); font-size: 13px;
	color: var(--fg); outline: none;
	transition: all var(--t-base) var(--ease);
}
.mag-nl-form input[type="email"]:focus,
.mag-nl-form input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--lf-borgogna-glow); }
.mag-nl-form input::placeholder { color: var(--fg-muted); }
.mag-nl-form button,
.mag-nl-form input[type="submit"] {
	padding: 12px 20px;
	border-radius: var(--r-pill);
	background: var(--accent);
	border: 1px solid var(--accent);
	color: var(--lf-on-accent, #faf8f5);
	font-family: var(--font-body);
	font-size: 11px; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	cursor: pointer;
	transition: all var(--t-base) var(--ease);
}
.mag-nl-form button:hover,
.mag-nl-form input[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }

/* ---- top read list (numerata 01-05) ---- */
.mag-top { display: flex; flex-direction: column; gap: 0; margin-top: 14px; }
.mag-top-item {
	display: grid;
	grid-template-columns: 22px 52px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--lf-divider-dark);
	text-decoration: none; color: inherit;
	transition: transform var(--t-base) var(--ease);
}
.mag-top-item:hover { transform: translateX(3px); }
.mag-top-item:first-child { padding-top: 4px; }
.mag-top-item:last-child { border-bottom: none; padding-bottom: 4px; }
.mag-top-num {
	font-family: var(--font-display);
	font-size: 24px;
	font-style: italic;
	font-weight: 500;
	color: var(--accent-2);
	line-height: 1;
	letter-spacing: -0.02em;
}
.mag-top-thumb {
	width: 52px; height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg);
}
.mag-top-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mag-top-info { min-width: 0; }
.mag-top-tag {
	display: block;
	font-size: 9px; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent-hover);
	margin-bottom: 4px;
}
.mag-top-t {
	display: block;
	font-family: var(--font-display);
	font-size: 14.5px; font-weight: 600;
	line-height: 1.28;
	color: var(--fg);
	text-wrap: pretty;
	transition: color var(--t-base) var(--ease);
}
.mag-top-item:hover .mag-top-t { color: var(--accent-2-hover); }

/* ---- sidebar ad — chrome del demo (label) attorno allo slot reale ---- */
.mag-side-ad {
	padding: 0;
	background: transparent;
	border: none;
}
.mag-side-ad-label {
	font-size: 9px; font-weight: 600;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--fg-muted);
	text-align: center;
	margin-bottom: 8px;
}

/* Footer spacer (gap generoso prima del footer). */
.mag-bottom-pad { padding-bottom: clamp(56px, 8vw, 96px); }

/* ---- RESPONSIVE (lista) ---- */
@media (max-width: 1024px) {
	.mag-layout { grid-template-columns: 1fr; }
	.mag-side {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
		margin-top: 24px;
	}
	.mag-side > .mag-side-block { flex: 1 1 280px; }
	.mag-side-ad { flex: 1 1 100%; max-width: 360px; margin: 0 auto; }
	.mag-feat-img { aspect-ratio: 16/9; }
}
@media (max-width: 768px) {
	.mag-filters-wrap { top: 64px; }
	.mag-filters {
		padding: 12px 18px;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mag-filters::-webkit-scrollbar { display: none; }
	.mag-chip { flex-shrink: 0; padding: 8px 16px; font-size: 10.5px; }
	.mag-layout { padding: 28px 18px 0; gap: 28px; }
	.mag-feat { grid-template-columns: 1fr; }
	.mag-feat-body { padding: 24px 22px 28px; }
	.mag-grid { grid-template-columns: 1fr; gap: 18px; }
	.mag-pag { margin-top: 36px; padding: 28px 0 4px; }
	.mag-pag a, .mag-pag span { min-width: 38px; height: 38px; font-size: 12.5px; padding: 0 10px; }
	.mag-pag .nav,
	.mag-pag .prev,
	.mag-pag .next { padding: 0 12px; }
	.mag-pag .nav span.lbl,
	.mag-pag .prev span.lbl,
	.mag-pag .next span.lbl { display: none; }
	.mag-side { flex-direction: column; gap: 18px; }
}
@media (max-width: 480px) {
	.mag-feat-title { font-size: 26px; }
	.mag-card-title { font-size: 20px; }
}

/* ---- LIGHT-THEME (lista) ---- */
/* PARITÀ dark/light: niente fascia di fondo dietro la barra (verdetto Gian). Il
   demo hardcodava rgba(250,247,241,0.85) — whiter del nostro fondo light reale
   (#f0e9d8 = 240,233,216), quindi nel tema appariva come una banda. Tolto: la
   barra eredita il fondo base rgba(var(--bg-rgb),0.6) che, su body var(--lf-nero),
   blenda 1:1 col fondo pagina in ENTRAMBI i temi (dark già così) → nessun
   riquadro. Restano solo i filetti divisori (come nel demo), tinti rame in light. */
[data-theme="light"] .mag-filters-wrap {
	border-top-color: rgba(143, 98, 64, 0.18);
	border-bottom-color: rgba(143, 98, 64, 0.18);
}
[data-theme="light"] .mag-chip {
	border-color: rgba(110, 28, 65, 0.28);
	color: rgba(26, 20, 24, 0.78);
}
[data-theme="light"] .mag-chip:hover {
	border-color: var(--lf-borgogna-soft);
	color: var(--lf-borgogna-soft);
}
[data-theme="light"] .mag-chip.active {
	background: var(--lf-borgogna-soft);
	border-color: var(--lf-borgogna-soft);
	color: var(--lf-on-accent, #fff);
	box-shadow: 0 4px 18px rgba(110, 28, 65, 0.2);
}
/* Contatori in light: inattive = rame SCURO nitido su avorio (no muted); attiva =
   on-accent pieno su borgogna. Specificità (0,4,0) sull'attiva-light per vincere
   sulla regola light-inattiva a pari (0,3,0). */
[data-theme="light"] .mag-chip .count { color: var(--lf-rame-dim); }
[data-theme="light"] .mag-chip.active .count { color: var(--lf-on-accent, #fff); }

[data-theme="light"] .mag-feat-title em { color: var(--lf-borgogna-soft); }
[data-theme="light"] .mag-feat:hover .mag-feat-title { color: var(--lf-borgogna-soft); }
[data-theme="light"] .mag-feat-eyebrow { color: var(--lf-borgogna-soft); }
[data-theme="light"] .mag-feat-pin {
	background: rgba(255, 255, 255, 0.86);
	border-color: rgba(143, 98, 64, 0.25);
	color: var(--fg-on-light);
}
[data-theme="light"] .mag-feat-pin::before { background: var(--lf-borgogna-soft); }

[data-theme="light"] .mag-card-title em { color: var(--lf-borgogna-soft); }
[data-theme="light"] .mag-card:hover .mag-card-title { color: var(--lf-borgogna-soft); }

[data-theme="light"] .mag-side-title em { color: var(--lf-borgogna-soft); }
[data-theme="light"] .mag-nl-form input[type="email"],
[data-theme="light"] .mag-nl-form input[type="text"] { background: #fff; border-color: rgba(143, 98, 64, 0.25); }
[data-theme="light"] .mag-nl-form button,
[data-theme="light"] .mag-nl-form input[type="submit"] {
	background: var(--lf-borgogna-soft);
	border-color: var(--lf-borgogna-soft);
}
[data-theme="light"] .mag-nl-form button:hover,
[data-theme="light"] .mag-nl-form input[type="submit"]:hover {
	background: var(--lf-borgogna-soft-hover);
	border-color: var(--lf-borgogna-soft-hover);
}

[data-theme="light"] .mag-top-num { color: var(--lf-borgogna-soft); }
[data-theme="light"] .mag-top-tag { color: var(--lf-borgogna-soft); }

[data-theme="light"] .mag-pag a.active,
[data-theme="light"] .mag-pag span.current {
	background: var(--lf-borgogna-soft);
	border-color: var(--lf-borgogna-soft);
	box-shadow: 0 4px 16px rgba(110, 28, 65, 0.22);
}
[data-theme="light"] .mag-pag a:hover { border-color: rgba(143, 98, 64, 0.4); color: var(--fg); }


/* ============================================================
   ARTICOLO — article.css (INCOLLATO). Loaded dopo l'alias layer.
   ============================================================ */
.art { padding-top: 72px; }

/* ---- MASTHEAD ---- */
.art-mast {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px clamp(20px, 6vw, 24px) 36px;
}
.art-back {
	display: flex; align-items: center; gap: 8px;
	width: fit-content;
	font-size: 11px; font-weight: 600;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: rgba(var(--fg-rgb), 0.55);
	margin-bottom: 36px;
	transition: color var(--t-base) var(--ease);
}
.art-back:hover { color: var(--accent-2-hover); }

.art-title {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--fg);
	margin: 0 0 24px;
}
.art-title em { font-style: italic; color: var(--accent-2-hover); font-weight: 400; }

.art-standfirst {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 400;
	line-height: 1.4;
	color: rgba(var(--fg-rgb), 0.72);
	margin: 0 0 36px;
	letter-spacing: -0.005em;
}
.art-standfirst em { font-style: italic; color: var(--accent-2-hover); }

/* ---- BYLINE (avatar omesso: byline = data · autore · tempo di lettura) ---- */
.art-byline {
	display: flex; align-items: center; gap: 14px;
	padding-top: 24px;
	border-top: 1px solid var(--lf-divider-dark);
}
.art-byline-info { flex: 1; min-width: 0; }
.art-byline-name {
	font-family: var(--font-display);
	font-size: 18px; font-weight: 600;
	color: var(--fg);
	line-height: 1.2;
}
.art-byline-role {
	font-size: 12px;
	color: var(--fg-muted);
	margin-top: 2px;
	letter-spacing: 0.03em;
}
.art-byline-meta {
	text-align: right;
	font-size: 12px;
	color: var(--fg-muted);
	line-height: 1.5;
}
.art-byline-date { color: var(--fg); font-weight: 500; }
.art-byline-read { color: var(--accent-2); letter-spacing: 0.05em; font-size: 11.5px; }

/* ---- HERO FIGURE ---- */
.art-hero-fig {
	max-width: 1080px;
	margin: 0 auto 56px;
	padding: 0 clamp(20px, 6vw, 40px);
}
.art-hero-fig img {
	width: 100%;
	border-radius: var(--r-lg);
	filter: saturate(0.92);
}
.art-hero-fig figcaption,
.art-fig figcaption {
	display: flex; justify-content: space-between; flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--fg-muted);
	font-style: italic;
}
.cap-credit {
	font-style: normal;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-2);
}

/* ---- MAIN LAYOUT — body + sticky rail ---- */
.art-layout {
	display: grid;
	grid-template-columns: minmax(0, 720px) 300px;
	gap: clamp(40px, 6vw, 80px);
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 clamp(20px, 6vw, 40px) 80px;
	align-items: start;
}
.art-body { min-width: 0; }

/* ---- BODY ELEMENTS (the_content nativo: scope sotto .art-body) ---- */
.art-body p {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.82;
	color: rgba(var(--fg-rgb), 0.82);
	margin: 0 0 22px;
}
.art-body p em { font-style: italic; color: var(--accent-2-hover); font-weight: 400; }
.art-body p strong { font-weight: 600; color: var(--fg); }

.art-body h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.4vw, 36px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fg);
	margin: 56px 0 22px;
	scroll-margin-top: 96px;
	position: relative;
}
.art-body h2::before {
	content: '';
	display: block;
	width: 32px; height: 1px;
	background: var(--accent-2);
	margin-bottom: 18px;
}

.art-body h3 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--fg);
	margin: 36px 0 14px;
}

.art-body figure,
.art-body img {
	max-width: 100%;
	height: auto;
}
.art-body figure {
	margin: 36px 0;
}
.art-body figure img {
	width: 100%;
	border-radius: var(--r-lg);
	filter: saturate(0.92);
}
.art-body figcaption {
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--fg-muted);
	font-style: italic;
}

/* ---- GALLERIA ARTICOLO (.art-gallery) — griglia + lightbox condivisa ----
   Markup dallo scrubber: <figure class="art-gallery" data-lf-gallery> con
   celle <a class="art-gal-item" href=full data-full data-alt><img></a>.
   Lightbox = lf-lightbox.js (components.css); senza JS le celle sono link. */
.art-body .art-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 36px 0;
}
.art-gal-item {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--r-md);
}
.art-body .art-gallery .art-gal-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0; /* il raggio sta sulla cella */
	filter: saturate(0.92);
	transition: transform var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.art-gal-item:hover img,
.art-gal-item:focus-visible img {
	transform: scale(1.04);
	filter: saturate(1);
}
.art-gal-item:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 2px;
}
/* Didascalie preservate dalle gallerie legacy: riga piena sotto la griglia.
   Divisore «·» via CSS (::after): non entra nel testo del documento. */
.art-body .art-gallery figcaption {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}
.art-galcap:not(:last-child)::after { content: " ·"; color: var(--accent-2); }
@media ( max-width: 768px ) {
	.art-body .art-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.art-body ul,
.art-body ol {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.82;
	color: rgba(var(--fg-rgb), 0.82);
	margin: 0 0 22px;
	padding-left: 1.4em;
}
.art-body li { margin-bottom: 8px; }
.art-body a { color: var(--accent-2-hover); text-decoration: underline; text-underline-offset: 3px; }
.art-body a:hover { color: var(--accent-hover); }

/* Blockquote (wpautop produce <blockquote><p>…</p></blockquote>) */
.art-body blockquote {
	margin: 32px 0;
	padding: 22px 24px;
	background: var(--bg-card);
	border: 1px solid var(--lf-card-border);
	border-radius: var(--r-lg);
}
.art-body blockquote p {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
	font-style: italic;
	color: rgba(var(--fg-rgb), 0.88);
	margin: 0;
}
.art-body blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--font-body);
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-2);
}

.art-body hr {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--lf-card-border-strong), transparent);
	margin: 36px 0;
}

/* ---- END SHARE ---- */
.art-end-share {
	margin: 64px 0 20px;
	padding: 28px 28px;
	background: var(--bg-card);
	border: 1px solid var(--lf-card-border);
	border-radius: var(--r-lg);
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.art-end-share-label {
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--accent-2);
}

/* Reused share row */
.art-share-row { display: flex; gap: 10px; }
.art-share-row a,
.art-share-row button {
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(var(--accent-2-rgb), 0.06);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--accent-2);
	border: none;
	cursor: pointer;
	transition: all var(--t-base) var(--ease);
}
.art-share-row a:hover,
.art-share-row button:hover { background: var(--accent); color: white; transform: translateY(-2px); }

/* ---- RIGHT RAIL ---- */
.art-rail {
	position: sticky;
	top: 92px;
	display: flex; flex-direction: column; gap: 22px;
}
.art-rail-label {
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: 14px;
}
.art-share .art-share-row a { width: 34px; height: 34px; }
.art-share .art-share-row a svg { width: 14px; height: 14px; }

.art-ad-side {
	height: 250px;
	border-radius: var(--r-md);
}

/* ---- RELATED ---- */
.art-related {
	padding: clamp(56px, 8vw, 88px) clamp(20px, 6vw, 100px) clamp(80px, 10vw, 120px);
	max-width: 1240px;
	margin: 0 auto;
}
/* Header related: .sec-label/.sec-title sono globali nel demo ma scoped sotto
   .lf-home nel tema; qui li definisco self-contained sotto .art-related. */
.art-related .sec-label {
	font-size: 10.5px; font-weight: 700;
	letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: 12px;
}
.art-related .sec-title {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.5vw, 36px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--fg);
	margin: 0 0 32px;
}
.art-related .sec-title em { font-style: italic; color: var(--accent-2-hover); font-weight: 400; }
[data-theme="light"] .art-related .sec-title em { color: var(--lf-borgogna-soft); }
.art-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.art-rel-card {
	display: flex; flex-direction: column;
	background: var(--bg-card);
	border: 1px solid var(--lf-card-border);
	border-radius: var(--r-xl);
	overflow: hidden;
	transition: all var(--t-base) var(--ease);
	text-decoration: none; color: inherit;
}
.art-rel-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--lf-card-border-strong); }
.art-rel-img {
	height: 200px;
	background-size: cover; background-position: center;
	filter: saturate(0.92);
}
.art-rel-body { padding: 18px 22px 24px; }
.art-rel-t {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--fg);
	margin: 8px 0 10px;
	transition: color var(--t-base) var(--ease);
}
.art-rel-card:hover .art-rel-t { color: var(--accent-2-hover); }
.art-rel-meta { font-size: 12px; color: var(--fg-muted); }

/* ---- RESPONSIVE (articolo) ---- */
@media (max-width: 1024px) {
	.art-layout { grid-template-columns: 1fr; padding-bottom: 56px; }
	.art-rail {
		position: static;
		flex-direction: column;
		gap: 26px;
		margin-top: 48px;
		padding-top: 36px;
		border-top: 1px solid var(--lf-divider-dark);
	}
	.art-ad-side { height: 200px; max-width: 460px; }
	.art-related-grid { grid-template-columns: 1fr 1fr; }
	.art-body figure { margin: 32px 0; }
}

@media (max-width: 768px) {
	.art-mast { padding: 32px 18px 28px; }
	.art-title { font-size: 36px; }
	.art-standfirst { font-size: 17px; }
	.art-byline {
		flex-wrap: wrap;
		gap: 12px;
	}
	.art-byline-meta {
		text-align: left;
		flex-basis: 100%;
		border-top: 1px solid var(--lf-divider-dark);
		padding-top: 12px;
		display: flex; gap: 14px;
	}
	.art-byline-meta .art-byline-read::before { content: '· '; color: var(--fg-muted); }
	.art-hero-fig { padding: 0 16px; margin-bottom: 36px; }
	.art-layout {
		grid-template-columns: 1fr;
		padding: 0 18px 48px;
		gap: 0;
	}
	.art-body p { font-size: 16px; line-height: 1.78; }
	.art-body h2 { font-size: 26px; margin: 44px 0 18px; }
	.art-end-share { padding: 22px; flex-direction: column; align-items: flex-start; gap: 14px; }
	.art-related { padding: 48px 18px 64px; }
	.art-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.art-title { font-size: 32px; line-height: 1.08; }
	.art-standfirst { font-size: 16px; }
	.art-body p { font-size: 15.5px; }
	.art-body h2 { font-size: 24px; }
}

/* ---- LIGHT-THEME (articolo) ---- */
[data-theme="light"] .art-standfirst { color: rgba(26, 20, 24, 0.72); }
[data-theme="light"] .art-body p { color: rgba(26, 20, 24, 0.84); }
[data-theme="light"] .art-body ul,
[data-theme="light"] .art-body ol { color: rgba(26, 20, 24, 0.84); }
[data-theme="light"] .art-body blockquote p { color: rgba(26, 20, 24, 0.92); }
[data-theme="light"] .art-back { color: rgba(26, 20, 24, 0.55); }
[data-theme="light"] .art-back:hover { color: var(--accent); }

[data-theme="light"] .art-end-share { background: var(--bg-card); }
[data-theme="light"] .art-share-row a,
[data-theme="light"] .art-share-row button {
	background: rgba(143, 98, 64, 0.12);
	color: var(--accent-2);
}
[data-theme="light"] .art-share-row a:hover,
[data-theme="light"] .art-share-row button:hover {
	background: var(--accent);
	color: #fff;
}

/* ======== NEWSLETTER GPFB inline nella sidebar (pass 1b) ========
   Form GPFB esistente (email + consenso GDPR TENUTO per legge), avvolto in .mag-nl
   nel markup (vedi list.php); heading del plugin nascosto, CTA "Iscriviti"
   rietichettata via gettext (lf_newsletter_render). La VESTE .mag-nl .gpfb-* (input
   a pillola scuri, BOTTONE BORGOGNA, consenso compatto) è ora in gpfb-overrides.css
   — FONTE UNICA condivisa con Hall of Fame ed Edizione. Qui resta .mag-nl-form. */


/* ============================================================
   ARTICOLO — blocco ARTICOLO (fedeltà ad article.css del demo). Allinea il
   markup WP (the_content) al demo: occhiello masthead, avatar byline, leaderboard,
   DROP-CAP, PULLQUOTE a piena larghezza, FIGURA, indice (rail + mobile), L'autrice,
   tag correlati. Valori INCOLLATI da article.css; selettori adattati alle classi
   reali di WP (.wp-block-pullquote / .wp-block-image) e alle ancore del tema.
   ============================================================ */

/* ---- A · LEADERBOARD top + occhiello masthead + avatar byline ---- */
.art-top-ad-wrap {
	padding: 24px clamp(20px, 6vw, 100px) 0;
	max-width: 1240px;
	margin: 0 auto;
}
.art-top-ad-wrap .lf-ad-wrap,
.art-top-ad-wrap .ad-leader { margin: 0; }
.art-cat {
	display: inline-block;
	font-size: 10.5px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: 22px;
}
.art-byline-avatar {
	width: 48px; height: 48px;
	border-radius: 50%;
	object-fit: cover; object-position: center;
	flex-shrink: 0;
	border: 1px solid rgba(var(--accent-2-rgb), 0.25);
}

/* ---- D1 · DROP-CAP (capolettera del primo paragrafo del corpo) ---- */
.art-body > p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 72px;
	font-weight: 600;
	font-style: italic;
	float: left;
	line-height: 0.92;
	padding: 6px 14px 0 0;
	color: var(--accent-2-hover);
}

/* ---- D2 · PULLQUOTE a piena larghezza (wp:pullquote) — barra rame, grande corsivo.
   Sovrascrive il box .art-body blockquote SOLO per le pullquote. ---- */
.art-body .wp-block-pullquote {
	margin: 44px -18px;
	padding: 6px 0 6px 28px;
	border-left: 2px solid var(--accent-2);
	background: none;
	border-radius: 0;
	text-align: left;
}
.art-body .wp-block-pullquote blockquote {
	margin: 0; padding: 0;
	background: none; border: 0; border-radius: 0;
}
.art-body .wp-block-pullquote p {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.25;
	font-weight: 400;
	color: var(--accent-2-hover);
	margin: 0;
	letter-spacing: -0.005em;
}
.art-body .wp-block-pullquote cite {
	display: block;
	margin-top: 16px;
	font-family: var(--font-body);
	font-style: normal;
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--fg-muted);
}
.art-body .wp-block-pullquote cite::before { content: "\2014\00a0"; } /* "— " (il seed non lo include) */

/* ---- D3 · FIGURA interna (wp:image) — full-bleed + didascalia/credito ---- */
.art-body .wp-block-image {
	margin: 36px -40px;
	padding: 0;
}
.art-body .wp-block-image img {
	width: 100%; height: auto;
	border-radius: var(--r-lg);
	filter: saturate(0.92);
}
.art-body .wp-block-image figcaption {
	display: flex; justify-content: space-between; flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
	padding: 0 6px;
	font-size: 12.5px;
	color: var(--fg-muted);
	font-style: italic;
	text-align: left;
}

/* ---- A5 · IN-ARTICLE wrapper ---- */
.art-inline-ad { margin: 36px 0; }

/* ---- B · INDICE rail (numerato, scrollspy). Numero visibile solo sull'attiva. ---- */
.art-toc-list {
	list-style: none;
	padding: 0; margin: 0;
	counter-reset: toc;
}
.art-toc-list li {
	counter-increment: toc;
	position: relative;
	border-left: 1px solid var(--lf-divider-dark);
}
.art-toc-list li a {
	display: block;
	padding: 10px 0 10px 18px;
	font-size: 13.5px;
	color: var(--fg-muted);
	text-decoration: none;
	position: relative;
	transition: all var(--t-base) var(--ease);
}
.art-toc-list li::before {
	content: counter(toc, decimal-leading-zero);
	position: absolute;
	left: -1px; top: 12px;
	font-family: var(--font-display);
	font-size: 11px; font-style: italic; font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--accent-2);
	background: var(--bg);
	padding: 0 6px 0 2px;
	opacity: 0;
	transition: opacity var(--t-base) var(--ease);
}
.art-toc-list li.active::before { opacity: 1; }
.art-toc-list li.active a { color: var(--fg); }
.art-toc-list li.active { border-left-color: var(--accent-2); }
.art-toc-list li a:hover { color: var(--accent-2-hover); }

/* Icone share nella rail: 15px; copia-link feedback. */
.art-share .art-share-row a svg,
.art-share .art-share-row a .lf-icon { width: 15px; height: 15px; }
.art-share-copy.is-copied { background: var(--accent); color: #fff; }

/* ---- B · INDICE mobile (collassabile, solo <768px) ---- */
.art-mobile-toc { display: none; }

/* ---- D4 · L'AUTRICE ---- */
.art-bio {
	margin-top: 40px;
	display: flex; align-items: flex-start; gap: 24px;
	padding: 32px;
	background: linear-gradient(135deg, rgba(36, 30, 44, 0.7), rgba(26, 20, 24, 0.7));
	border: 1px solid var(--lf-card-border);
	border-radius: var(--r-xl);
}
.art-bio-avatar {
	width: 88px; height: 88px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--accent-2);
}
.art-bio-body { flex: 1; min-width: 0; }
.art-bio-eyebrow {
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: 8px;
}
.art-bio-name {
	font-family: var(--font-display);
	font-size: 26px; font-weight: 600;
	color: var(--fg);
	margin: 0 0 10px;
}
.art-bio-desc {
	font-size: 14px; font-weight: 300;
	line-height: 1.65;
	color: rgba(var(--fg-rgb), 0.7);
	margin: 0 0 14px;
}
.art-bio-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11.5px; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--accent-2-hover);
	text-decoration: none;
	transition: gap var(--t-base) var(--ease);
}
.art-bio-link:hover { gap: 12px; color: var(--accent-hover); }
.art-bio-link .lf-icon { width: 12px; height: 12px; }

/* ---- D5 · tag delle card "Voci affini" ---- */
.art-related .btag {
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: 4px;
}

/* ---- RESPONSIVE (blocco ARTICOLO) ---- */
@media (max-width: 1024px) {
	.art-body .wp-block-image { margin: 32px 0; }
	.art-body .wp-block-pullquote { margin-left: 0; margin-right: 0; }
}
@media (max-width: 768px) {
	.art-top-ad-wrap { padding: 16px 16px 0; }
	.art-cat { font-size: 10px; }
	.art-body > p:first-of-type::first-letter { font-size: 56px; padding: 4px 10px 0 0; }
	.art-body .wp-block-pullquote p { font-size: 22px; line-height: 1.3; }
	.art-body .wp-block-image {
		margin: 28px auto;
		max-width: calc(100% - 12px);
	}
	.art-body .wp-block-image img {
		border-radius: var(--r-md);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	}
	.art-body .wp-block-image figcaption {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		padding: 10px 12px 0;
		border-top: 1px solid rgba(var(--accent-2-rgb), 0.25);
		max-width: 92%;
		margin: 12px auto 0;
	}
	.art-bio { flex-direction: column; padding: 24px; gap: 16px; }
	.art-bio-avatar { width: 72px; height: 72px; }
	.art-bio-name { font-size: 22px; }

	/* Hide rail-TOC; mostra il pannello mobile collassabile tra hero e corpo. */
	.art-rail .art-toc { display: none; }
	.art-mobile-toc {
		display: block;
		margin: 0 18px 24px;
		background: var(--bg-card);
		border: 1px solid var(--lf-card-border);
		border-radius: var(--r-md);
		overflow: hidden;
	}
	.art-mobile-toc summary {
		padding: 14px 18px;
		list-style: none;
		cursor: pointer;
		display: flex; align-items: center; justify-content: space-between;
		font-size: 11px; font-weight: 700;
		letter-spacing: 0.22em; text-transform: uppercase;
		color: var(--accent-2);
	}
	.art-mobile-toc summary::-webkit-details-marker { display: none; }
	.art-mobile-toc-chev { transition: transform var(--t-base) var(--ease); font-size: 16px; color: var(--fg-muted); }
	.art-mobile-toc[open] .art-mobile-toc-chev { transform: rotate(180deg); }
	.art-mobile-toc ol {
		list-style: none;
		margin: 0; padding: 0 18px 14px;
		counter-reset: mtoc;
		border-top: 1px solid var(--lf-divider-dark);
	}
	.art-mobile-toc ol li {
		counter-increment: mtoc;
		padding: 9px 0;
		border-bottom: 1px solid var(--lf-divider-dark);
	}
	.art-mobile-toc ol li:last-child { border-bottom: none; }
	.art-mobile-toc ol li::before {
		content: counter(mtoc, decimal-leading-zero) " \00b7 ";
		font-family: var(--font-display);
		font-style: italic;
		color: var(--accent-2);
		font-size: 12px;
		margin-right: 6px;
	}
	.art-mobile-toc ol li a { font-size: 14px; color: var(--fg); text-decoration: none; }
}
@media (max-width: 480px) {
	.art-body .wp-block-pullquote { padding-left: 18px; }
	.art-body .wp-block-pullquote p { font-size: 20px; }
}

/* ---- LIGHT-THEME (blocco ARTICOLO) ---- */
[data-theme="light"] .art-bio {
	background: linear-gradient(135deg, #ffffff, #f8f3eb);
	border-color: rgba(143, 98, 64, 0.22);
}
[data-theme="light"] .art-bio-desc { color: rgba(26, 20, 24, 0.72); }
[data-theme="light"] .art-mobile-toc { background: var(--bg-card); }

/* [DS-muted 16/07] eyebrow AA in LIGHT: il rame (--lf-rame #8f6240 in light)
   sul crema scende sotto AA (~4.35:1, pink Permette Signorina 2.13) su testo
   minuscolo maiuscolo. Convenzione del tema (già su HoF card/modal, chi-siamo,
   taccuino feature): in LIGHT l'occhiello passa a --lf-borgogna-soft (#6e1c41 =
   7.3–10:1 sui fondi chiari). Dark invariato (rame ~7.3:1). Hero FOTO (fondo
   scuro) esclusi via :not(). */
[data-theme="light"] .lf-tac-hero:not(.lf-tac-hero--photo) .lf-tac-hero__eyebrow,
[data-theme="light"] .mag-card-eyebrow,
[data-theme="light"] .art-bio-eyebrow { color: var(--lf-borgogna-soft); }