/* ============================================================
   VITTORIA FORNARI — Pagina Articolo singolo
   articolo.css
   Legge ?id= dall'URL → carica da data/articles.json
   ============================================================ */

/* Colore tema dalla classe body (replica della mappa di tema.css:
   articolo.html non carica tema.css) — impostata da articolo.js */
body.tema--yoga   { --tema-color: var(--color-yoga); }
body.tema--cabala { --tema-color: var(--color-cabala); }
body.tema--celtica { --tema-color: var(--color-celtica); }
body.tema--tibet  { --tema-color: var(--color-tibet); }
body.tema--tao    { --tema-color: var(--color-tao); }
body.tema--olis   { --tema-color: var(--color-olis); }


/* ════════════════════════════════════════
   BREADCRUMB (solo pagina articolo — rivisto 23/07:
   allineato al menu, font sans piccolo, colore della tradizione)
════════════════════════════════════════ */
.breadcrumb {
  background: var(--color-white);
  border-bottom: var(--border);
  /* stesso padding laterale della navbar: sm su mobile, lg da desktop */
  padding: 10px var(--space-sm);
}
@media (min-width: 768px) {
  .breadcrumb { padding: 10px var(--space-lg); }
}
.breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.breadcrumb__link,
.breadcrumb__current {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-base);
  /* colore della tradizione (cambia per pagina via body.tema--X) */
  color: var(--tema-color, var(--color-text-light));
}
.breadcrumb__link {
  font-weight: var(--fw-thin);
  transition: color var(--transition-fast);
}
.breadcrumb__link:hover { color: var(--color-text-dark); }
.breadcrumb__sep { font-size: var(--fs-xs); color: var(--color-greige); }
.breadcrumb__current { font-weight: var(--fw-regular); }

/* Il breadcrumb resta bloccato SEMPRE sotto l'header, a ogni larghezza
   (mobile compreso, 31/07) — segue --header-live-h (altezza reale
   scritta da main.js frame per frame), quindi è agganciato fin dal
   primo pixel di scroll e scivola su morbidamente insieme all'header
   quando questo si compatta. Sta sopra la barra di progresso (che
   legge --bc-h e scende di altrettanto). Su mobile l'header incollato
   mostra solo la navbar: l'aggancio scala di --langbar-h.
   Altezza pinnata: gli offset sticky di barra e sidebar contano su di lei. */
body { --bc-h: 40px; }
.breadcrumb {
  position: sticky;
  top: calc(var(--header-live-h, var(--header-compact-h)) - var(--langbar-h));
  z-index: 150;
  height: var(--bc-h);
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
@media (min-width: 1024px) {
  body { --bc-h: 44px; }
  .breadcrumb {
    top: var(--header-live-h, var(--header-compact-h));
  }
}


/* ════════════════════════════════════════
   HERO ARTICOLO
   Foto articolo di sfondo + velo scuro, testo centrato
════════════════════════════════════════ */
.art-hero {
  padding: var(--space-xl) var(--space-sm) var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  /* colore tema via body class (23/07): resta come base/fallback
     sotto la foto di sfondo (background-image inline da articolo.js) */
  background: var(--tema-color, var(--color-greige-md));
  background-size: cover;
  background-position: center 30%;
}
@media (min-width: 768px) {
  .art-hero {
    padding: var(--space-2xl) var(--space-md) var(--space-xl);
    min-height: 380px;
  }
}
/* La wave di fine hero si sovrappone al fondo dell'hero (foto-21:
   dev'essere la FOTO a farsi tagliare dalla curva, niente fascia di
   colore): 74px extra in basso così il testo non finisce sotto la curva */
.art-hero { padding-bottom: calc(var(--space-lg) + 74px); }
@media (min-width: 768px) {
  .art-hero { padding-bottom: calc(var(--space-xl) + 74px); }
}

/* Foto articolo come sfondo (23/07 — cover unificata nell'hero):
   velo scuro per la leggibilità del testo (Regola §5). La classe
   art-hero--img arriva da articolo.js solo quando c'è la foto. */
.art-hero--img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,20,16,.45), rgba(24,20,16,.62));
}
/* Cintura di sicurezza sulla leggibilità: ombra morbida sul testo,
   utile sulle foto più chiare */
.art-hero--img .art-hero__inner {
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}

/* Cerchi decorativi rimossi (giro 3 tema, 21/07/2026 — Davide:
   via da tutte le hero, non comunicavano niente) */

.art-hero__inner {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.art-hero__tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 5px 16px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--radius);
  color: rgba(255,255,255,.9);
  margin-bottom: var(--space-md);
}

.art-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(24px, 5vw, 42px);
  color: var(--color-white);
  line-height: 1.25;
  margin-bottom: var(--space-md);
}

/* Data + minuti: spostati nel corpo (foto-21) — stile "breadcrumb",
   colore della tradizione */
.art-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-base);
  color: var(--tema-color, var(--color-text-light));
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.art-meta__sep { color: var(--color-greige); }


/* Immagine copertina: blocco separato UNIFICATO nell'hero come sfondo
   (richiesta Davide 23/07, giro 2) — vedi .art-hero::before sopra */


/* ════════════════════════════════════════
   LAYOUT: contenuto + sidebar
════════════════════════════════════════ */
.art-main {
  background: var(--color-white);
  padding: var(--space-xl) var(--space-sm) var(--space-2xl);
}
@media (min-width: 640px)  { .art-main { padding: var(--space-xl) var(--space-md) var(--space-2xl); } }
@media (min-width: 1024px) { .art-main { padding: var(--space-2xl) var(--space-lg); } }

.art-main__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 1024px) {
  .art-main__inner { grid-template-columns: 1fr 260px; align-items: start; }
}


/* ════════════════════════════════════════
   CORPO ARTICOLO — tipografia editoriale
════════════════════════════════════════ */
.art-body {
  /* colonna testo — max-width per leggibilità ottimale */
  max-width: 680px;
}

/* Tutti gli elementi dell'articolo usano --font-serif / --font-sans */
.art-body p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text-mid);
  margin-bottom: var(--space-md);
}

.art-body h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(20px, 3vw, var(--fs-xl));
  color: var(--color-text-dark);
  line-height: 1.3;
  margin: var(--space-xl) 0 var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--border);
}

.art-body h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  color: var(--color-text-dark);
  line-height: 1.3;
  margin: var(--space-lg) 0 var(--space-sm);
}

/* Prima lettera del primo paragrafo — drop cap */
.art-body > p:first-of-type::first-letter,
.js-art-corpo > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: 4em;
  line-height: .8;
  float: left;
  margin: 4px 8px 0 0;
  color: var(--color-gold);
}

/* Nota editoriale di Vittoria in testa ai testi ospiti (21/08 — pezzi di
   Cattaneo e simili futuri): epigrafe centrata e attenuata, chiusa dal
   filetto oro (stesso disegno di .divider-gold). Essendo un <div>, il
   capolettera resta al primo <p> figlio diretto del corpo, cioè al vero
   inizio del testo ospite */
.art-nota-vf {
  max-width: 34em;
  margin: 0 auto var(--space-xl);
  text-align: center;
}
.art-nota-vf p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}
.art-nota-vf::after {
  content: '';
  display: block;
  width: 50px;
  height: 1px;
  margin: var(--space-md) auto 0;
  background: var(--color-gold);
  opacity: .5;
}

/* "Cosa lo distingue" (08/09/2026): riquadro in coda agli articoli-libro,
   stesso disegno della nota editoriale qui sopra (epigrafe centrata serif
   corsivo + filetto oro), con l'occhiello in testa. Niente fondo: la
   scheda-libro cream (.art-libro-invito) sta subito prima */
.art-distingue {
  max-width: 34em;
  margin: var(--space-xl) auto 0;
  text-align: center;
}
.art-distingue::before {
  content: '';
  display: block;
  width: 50px;
  height: 1px;
  margin: 0 auto var(--space-md);
  background: var(--color-gold);
  opacity: .5;
}
.art-distingue__label {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
.art-body .art-distingue p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}
.art-body .art-distingue strong {
  font-weight: 600;
  color: var(--color-text-dark);
}

/* Citazione interna */
.art-body blockquote {
  border-left: 3px solid var(--color-gold);
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-cream);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.art-body blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.6;
}
.art-body blockquote cite {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  letter-spacing: var(--ls-wide);
  font-style: normal;
}

/* Liste */
.art-body ul, .art-body ol {
  /* il reset globale azzera list-style: qui va ripristinato,
     o i pallini/numeri spariscono (emerso col pilota Luna del Lupo) */
  list-style: disc;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--color-text-mid);
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}
.art-body ol { list-style: decimal; }
.art-body li { margin-bottom: 6px; }
.art-body ul li::marker { color: var(--color-gold); }

/* Immagine nel testo */
.art-body img {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--space-xl) 0;
  border-radius: var(--radius);
}
.art-body figcaption {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  margin-top: calc(-1 * var(--space-md));
  margin-bottom: var(--space-xl);
  font-style: italic;
}

/* Invito al video (25/07): box a fine sunto — ogni articolo nasce da
   un video del canale YouTube e il sunto rimanda esplicitamente
   all'originale (link in finestra nuova) */
.art-video-invito {
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg);
  background: var(--color-cream);
  border-radius: var(--radius);
  text-align: center;
}
.art-body .art-video-invito p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-text-dark);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.art-video-invito__durata {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  letter-spacing: var(--ls-wide);
}

/* Separatore decorativo */
.art-body hr {
  border: none;
  text-align: center;
  margin: var(--space-xl) 0;
  color: var(--color-greige);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  letter-spacing: .5em;
}
.art-body hr::after { content: '· · ·'; }

/* Link nel testo */
.art-body a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.art-body a:hover { color: var(--color-text-dark); }

/* Il bottone dell'invito video non è un link nel testo: niente
   sottolineatura né colore gold — restano gli stili .btn */
.art-body .art-video-invito .btn {
  text-decoration: none;
  color: var(--color-white);
  /* .btn è nowrap: sotto i ~400px la scritta lunga sfonderebbe la
     colonna (il grid ne rispetta la min-width — stesso bug foto-11
     della shop card): può andare a capo e non supera il box */
  white-space: normal;
  max-width: 100%;
}
.art-body .art-video-invito .btn:hover { color: var(--color-white); }


/* Shop CTA inline: spostata nella sidebar "Per approfondire" (23/07) */


/* ════════════════════════════════════════
   FASCIA AUTORE — dopo la navigazione (foto-20, 23/07):
   yantra grande + nome + qualifica + bottoni in riga unica
════════════════════════════════════════ */
.art-autore {
  background: var(--color-cream);
  padding: var(--space-lg) var(--space-sm) var(--space-xl);
}
@media (min-width: 640px) {
  .art-autore { padding: var(--space-lg) var(--space-md) var(--space-xl); }
}

.art-autore__inner {
  max-width: var(--max-width);   /* come la navigazione qui sopra */
  margin: 0 auto;
  border-top: var(--border);
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
/* Riga unica da tablet: autore a sinistra, bottoni a destra.
   flex-wrap: se lo spazio manca scende l'INTERO blocco bottoni,
   mai i singoli bottoni (richiesta: sempre in un'unica riga) */
@media (min-width: 640px) {
  .art-autore__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* Card autore */
.art-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Cerchio autore (giro 5): fondo trasparente e ombra che segue il
   DISEGNO dello yantra (drop-shadow), non il cerchio — l'ombra sul
   cerchio trasparente creava un finto disco bianco (domanda foto-23) */
.art-author__photo {
  width: 84px; height: 84px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
}
.art-author__photo img { width:100%; height:100%; object-fit:cover; }
/* L'ombra torna sul cerchio solo se un giorno ci sarà una foto vera */
.art-author__photo:has(img) { box-shadow: 0 6px 18px rgba(0,0,0,.18); }

.art-author__photo:not(:has(img))::before {
  background-size: calc(100% - 2px);
  opacity: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.3));
}

.art-author__name {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  color: var(--color-text-dark);
  display: block;
}
.art-author__role {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
}

/* Condividi + social in riga unica (mai a capo: ~280px totali,
   stanno anche a 320px di viewport) */
.art-share {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: nowrap;
  justify-content: center;
}

.art-share__btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-base);
  line-height: 1.4;   /* stessa altezza per <button> e <a> */
  padding: 7px 14px;
  border: var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-mid);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-block;
}
.art-share__btn:hover {
  background: var(--color-text-dark);
  color: var(--color-white);
  border-color: var(--color-text-dark);
}
/* Target touch ≥44px su dispositivi a dito (Regola §6) */
@media (pointer: coarse) {
  .art-share__btn { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Sotto i 380px la riga nowrap non ci sta coi padding pieni:
   bottoni più compatti per mantenere il respiro di 16px (Regola §3) */
@media (max-width: 379px) {
  .art-share { gap: 6px; }
  .art-share__btn { padding: 7px 9px; letter-spacing: 0; }
}


/* ════════════════════════════════════════
   SIDEBAR ARTICOLO
════════════════════════════════════════ */
.art-sidebar {
  display: flex;
  flex-direction: column;
  /* 40px (era 60): sotto "Tutti gli articoli" lo stacco sembrava un
     buco bianco (foto-20) */
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
  .art-sidebar {
    position: sticky;
    /* sotto header compatto + breadcrumb bloccato + barra progresso (4px) */
    top: calc(var(--header-compact-h) + var(--bc-h, 0px) + 24px);
  }
}

/* Copertina intera in sidebar (richiesta 23/07: l'hero la ritaglia) */
.sidebar-cover {
  border-radius: 8px;      /* come le miniature: foto piccole = 8 */
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.sidebar-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* Widget "Per approfondire": libro dal tag tema + video + shop link */
.sidebar-approfondire {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Card libro compatta: cover a sinistra, titolo/sottotitolo a destra */
.approfondire-libro {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.approfondire-libro:hover { opacity: .75; }
.approfondire-libro__cover {
  width: 58px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.approfondire-libro__cover img { width:100%; height:auto; display:block; }
.approfondire-libro__titolo {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  color: var(--color-text-dark);
  line-height: 1.35;
  display: block;
}
.approfondire-libro__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  line-height: 1.5;
  display: block;
  margin-top: 2px;
}

/* Anteprima video: thumbnail + play, niente iframe (leggerezza + privacy).
   Giro 25/07: staccato dal libro con margine extra e titolo del video
   sotto la miniatura (campo video_titolo) — thumb e titolo un solo link */
.approfondire-video {
  display: block;
  text-decoration: none;
  margin-top: var(--space-sm);   /* spazio in più tra libro e video */
}
.approfondire-video__thumb {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.approfondire-video__thumb img { width:100%; height:auto; display:block; }
.approfondire-video__thumb::after {
  content: '▶';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(24,20,16,.72);
  color: var(--color-white);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;   /* centra otticamente il triangolo */
  transition: background var(--transition-fast);
}
.approfondire-video:hover .approfondire-video__thumb::after { background: var(--tema-color, var(--color-gold)); }
.approfondire-video__titolo {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  color: var(--color-text-dark);
  line-height: 1.35;
}

/* Link shop dell'articolo come card (21/08, ex link testuale .approfondire-shop):
   stessa card del libro, ma con lo yantra tenue su fondo crema per copertina
   — regola "placeholder col logo". Il box replica le proporzioni di una cover */
.approfondire-cta__cover {
  height: 76px;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.approfondire-cta__cover img {
  width: 62%;
  height: auto;
  opacity: .75;
}


/* Navigazione articoli precedente/successivo */
.art-nav {
  background: var(--color-cream);
  padding: var(--space-xl) var(--space-sm);
  border-top: var(--border);
}
@media (min-width: 640px) { .art-nav { padding: var(--space-xl) var(--space-md); } }
@media (min-width: 1024px) { .art-nav { padding: var(--space-xl) var(--space-lg); } }

.art-nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 640px) {
  .art-nav__inner { grid-template-columns: 1fr 1fr; }
}

.art-nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  padding: var(--space-md);
  border: var(--border);
  border-radius: var(--radius);
  transition: box-shadow var(--transition-base), background var(--transition-fast);
  background: var(--color-white);
}
.art-nav-link:hover { box-shadow: var(--shadow-sm); background: var(--color-cream); }
.art-nav-link--next { text-align: right; }

.art-nav-link__dir {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}
.art-nav-link__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  color: var(--color-text-dark);
  line-height: 1.35;
}


/* ════════════════════════════════════════
   STATI DI CARICAMENTO / ERRORE
════════════════════════════════════════ */
.art-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: var(--space-md);
  padding: var(--space-2xl);
}

.art-error {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  max-width: 480px;
  margin: 0 auto;
}
.art-error__icon { font-size: 40px; display: block; margin-bottom: var(--space-sm); }
.art-error__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-xl);
  color: var(--color-text-dark);
  margin-bottom: var(--space-sm);
}
.art-error__body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  color: var(--color-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}


/* ════════════════════════════════════════
   WAVE pagina articolo — standard sito (come tema.css):
   bg = sezione sopra, fill = sezione sotto, ombra verso l'alto.
   La prima si tinge col tema via --tema-color (classe body).
════════════════════════════════════════ */
.wave-divider--art-nav-top     { background: var(--color-white); }
.wave-divider--art-footer-top  { background: var(--color-cream); }

.wave-divider--art-nav-top,
.wave-divider--art-footer-top {
  position: relative;
  overflow: hidden;
  padding-top: 10px;
  margin-top: -10px;
}
.wave-divider--art-hero-bottom svg,
.wave-divider--art-nav-top svg,
.wave-divider--art-footer-top svg {
  display: block;
  filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.18));
}

/* La wave dell'hero è un caso a parte (foto-22): trasparente e risalita
   INTERAMENTE sopra il fondo dell'hero (74px = 10 padding + 64 svg),
   così è la foto a farsi tagliare dalla curva. FUORI dal gruppo sopra:
   il margin-top -10px del gruppo la sovrascriveva (bug giro 3). */
.wave-divider--art-hero-bottom {
  background: transparent;
  position: relative;
  z-index: 1;
  padding-top: 10px;
  margin-top: -74px;
  /* clip: l'ombra della curva resta sopra (nei 10px di padding), ma
     non sborda sotto l'svg — sporcava l'inizio della sezione (foto-23) */
  overflow: hidden;
}

/* ════════════════════════════════════════
   TEMI (TAG) IN CODA ALL'ARTICOLO (27/08/2026)
   Link testuali verso il blog filtrato, separati da "·";
   sottolineatura solo all'hover. Blocco hidden senza tag.
════════════════════════════════════════ */
.art-temi { margin-top: var(--space-lg); }
.art-temi__filetto {
  border: none;
  border-top: 1px solid var(--color-gold);
  width: 50px;
  margin: 0 0 var(--space-sm);
}
.art-temi__label {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-right: var(--space-xs);
}
/* a.… per battere la specificità di ".art-body a" (link nel testo),
   che altrimenti imporrebbe la sottolineatura fissa e il cambio
   colore all'hover */
a.art-temi__chip {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--color-gold-dark);
  text-decoration: none;
  text-underline-offset: 3px;
}
a.art-temi__chip:hover {
  color: var(--color-gold-dark);
  text-decoration: underline;
}
.art-temi__sep {
  color: var(--color-text-light);
  margin: 0 var(--space-xs);
}