/* ---------------------------------------------------------------------------
 * theme.css — foglio unico del tema: font + tutti gli stili del progetto
 * Astro (global.css e i suoi import) nell'ordine dei layer originale:
 * reset -> tokens -> base -> layout -> components -> utilities.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Font: Roboto + Poppins self-hosted (gli stessi file Fontsource del
 * progetto Astro, rinominati). unicode-range latin come il live.
 * ------------------------------------------------------------------------- */
@font-face{font-family:Poppins;src:url("../fonts/poppins-300.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:300;font-style:normal;}
@font-face{font-family:Poppins;src:url("../fonts/poppins-400.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:400;font-style:normal;}
@font-face{font-family:Poppins;src:url("../fonts/poppins-500.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:500;font-style:normal;}
@font-face{font-family:Poppins;src:url("../fonts/poppins-600.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:600;font-style:normal;}
@font-face{font-family:Poppins;src:url("../fonts/poppins-700.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:700;font-style:normal;}
@font-face{font-family:Roboto;src:url("../fonts/roboto-400-normal.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:400;font-style:normal;}
@font-face{font-family:Roboto;src:url("../fonts/roboto-500-normal.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:500;font-style:normal;}
@font-face{font-family:Roboto;src:url("../fonts/roboto-700-normal.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:700;font-style:normal;}
@font-face{font-family:Roboto;src:url("../fonts/roboto-400-italic.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:400;font-style:italic;}
@font-face{font-family:Roboto;src:url("../fonts/roboto-500-italic.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:500;font-style:italic;}
@font-face{font-family:Roboto;src:url("../fonts/roboto-700-italic.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:700;font-style:italic;}
@font-face{font-family:"Poppins fallback";src:local("Arial");font-display:swap;font-weight:300 700;font-style:normal;size-adjust:111.0361%;ascent-override:94.5638%;descent-override:31.5213%;line-gap-override:9.0061%;}
@font-face{font-family:"Roboto fallback";src:local("Arial");font-display:swap;font-weight:300 700;font-style:normal;size-adjust:99.7809%;ascent-override:92.9771%;descent-override:24.4677%;line-gap-override:0%;}
@font-face{font-family:"Roboto fallback";src:local("Arial Bold");font-display:swap;font-weight:700;font-style:normal;size-adjust:92.6755%;ascent-override:100.1057%;descent-override:26.3436%;line-gap-override:0%;}

@layer reset, tokens, base, layout, components, utilities;

:root{--font-sans:Roboto,"Roboto fallback",system-ui,"Segoe UI",Arial,sans-serif;--font-display:Poppins,"Poppins fallback",system-ui,"Segoe UI",sans-serif;}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    min-height: 100svh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    /* NIENTE balance (owner, 2026-09-15): «balance» distribuisce il testo
       su più righe equilibrando le lunghezze — spezza il titolo ANCHE quando
       starebbe su una riga (difetto segnalato: «ritorna a capo anche se c'è
       spazio sulla riga»). wrap = va a capo SOLO quando serve davvero. */
    text-wrap: wrap;
    line-height: 1.15;
  }

  p,
  li {
    text-wrap: pretty;
  }

  ul[role='list'],
  ol[role='list'] {
    list-style: none;
    padding: 0;
  }

  :target {
    scroll-margin-block: 6rem;
  }

  :focus-visible {
    outline: 2px solid var(--focus-ring, currentColor);
    outline-offset: 3px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer tokens {
  :root {
    /* Tema seguito dal SISTEMA (D-024): `light-dark()` risolve la variante
       giusta e lo script anti-FOUC in BaseLayout fissa `data-theme` prima
       del primo paint. La scelta esplicita dell'utente (toggle in header)
       vince sulla preferenza di sistema via `data-theme='light'|'dark'`. */
    color-scheme: light dark;

    /* --- Fonts (i valori sono iniettati dalla Fonts API di Astro) --------- */
    --font-body: var(--font-sans);
    --font-heading: var(--font-display);
    --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', monospace;

    /* --- Palette primitiva ------------------------------------------------
       Rampe derivate dai colori reali del kit: brand ~#FA5403 (hue 39),
       accent ~#F6CE2B (hue 94), neutrali con la lieve tinta blu-grigia di
       #54595F (secondary reale). ------------------------------------------- */
    --neutral-0: oklch(100% 0 0);
    --neutral-50: oklch(98% 0.002 253);
    --neutral-100: oklch(95.5% 0.004 253);
    --neutral-150: oklch(93.5% 0 253); /* = #E7E7E7, sfondo fasce del live (DB 9050; il kit stimava #ECECEC) */
    --neutral-200: oklch(91% 0.007 253);
    --neutral-300: oklch(83% 0.01 253);
    --neutral-400: oklch(68% 0.012 253);
    --neutral-500: oklch(58% 0.012 253);
    --neutral-600: oklch(46.5% 0.013 253); /* ≈ secondary #54595F */
    --neutral-700: oklch(35% 0.013 253);
    --neutral-800: oklch(24% 0.011 253);
    --neutral-900: oklch(18% 0.009 253);   /* ≈ "nero" reale #111 */
    --neutral-950: oklch(13% 0.008 253);

    --brand-100: oklch(94.5% 0.03 39);
    --brand-200: oklch(89% 0.062 39);
    --brand-300: oklch(82% 0.11 39);
    --brand-400: oklch(74.5% 0.16 39);
    --brand-500: oklch(66.7% 0.213 39);  /* = primary #FA5403 */
    --brand-600: oklch(60% 0.2 39);
    --brand-700: oklch(50.5% 0.18 39);
    --brand-800: oklch(40% 0.15 39);
    --brand-900: oklch(30% 0.11 39);

    --accent-300: oklch(92% 0.09 94);
    --accent-400: oklch(89% 0.13 94);
    --accent-500: oklch(86.1% 0.167 94); /* = accent #F6CE2B */
    --accent-600: oklch(75% 0.15 94);
    --accent-700: oklch(62% 0.13 94);

    --success-500: oklch(62% 0.15 155);
    --danger-500: oklch(62.8% 0.258 29); /* = #FF0000 dei link nel kit */

    /* --- Token semantici (quelli usati dai componenti) -------------------- */
    --color-text: light-dark(var(--neutral-900), var(--neutral-100));
    --color-text-muted: light-dark(var(--neutral-600), var(--neutral-400));
    --color-text-inverse: light-dark(var(--neutral-0), var(--neutral-950));

    --color-bg: light-dark(var(--neutral-0), var(--neutral-950));
    /* Fascia alternata: grigio #ECECEC misurato sul live (D-011). */
    --color-surface: light-dark(var(--neutral-150), var(--neutral-900));
    --color-surface-raised: light-dark(var(--neutral-0), var(--neutral-800));

    --color-border: light-dark(var(--neutral-200), var(--neutral-700));
    --color-border-strong: light-dark(var(--neutral-300), var(--neutral-600));

    --footer-bg: light-dark(#d8d8d8, var(--neutral-800)); /* grigio footer live (post-1686) */
    /* Sfondo delle fasce alternate della home: #E7E7E7 misurato su post-9050
       (era #ECECEC dalla stima sul kit: il DB corregge, decisione D-013). */
    --band-bg: light-dark(#e7e7e7, var(--neutral-900));

    /* Sfondo del blocco contenuto delle card loop: tinta del DB (D-015).
       In dark diventa la superficie raised piena: la trasparenza su fondo
       scuro darebbe un grigio melmoso illeggibile. */
    --color-card-tint: light-dark(color-mix(in srgb, #e6e6e6 58%, transparent), var(--neutral-800));
    /* Bordo nero 1px delle card (richiesta owner 2026-09-14): in dark il
       nero sparirebbe sul fondo scuro, si usa il bordo forte. */
    --border-card: light-dark(#000, var(--neutral-600));
    /* Pannelli menu (dropdown e mobile): #E6E6E6 misurato sul live. */
    --surface-menu: light-dark(#e6e6e6, var(--neutral-800));
    /* Riga logo dell'header: grigio #ECECEC misurato sul live
       (container 8b688f3 — più chiaro del #E7E7E7 delle fasce). */
    --surface-header: light-dark(#ececec, var(--neutral-900));

    /* D-027 (emenda D-025 su richiesta owner): --color-primary è il
       RIEMPIMENTO brand — sfondo pill/badge, barra sotto i titoli, bordi
       menu, frecce carosello — e torna #FA5403 (brand-500) in light come
       il live. D-241 (richiesta owner 01/10/2026): il brand NON si schiarisce
       più in dark — #FA5403 è lo stesso in ENTRAMBI i temi (contrasti col
       metodo D-237c: quasi-nero su #FA5403 6.07:1; #FA5403 su n800/n900/n950
       ≥4.96:1). Il TESTO brand su fondo pagina usa --color-link, che in light
       resta scurito per la leggibilità (D-025: 6.22:1 su fascia grigia). */
    --color-primary: var(--brand-500);
    --color-primary-hover: var(--brand-600);
    /* Testo/link brand su fondo pagina: NON il brand puro in light
       (2.68:1 su fascia grigia) ma la tinta scurita; in dark il brand puro
       (D-241: ≥4.96:1 sui fondi scuri). */
    --color-link: light-dark(var(--brand-700), var(--brand-500));
    /* Testo SOPRA i riempimenti brand/rosso PICCOLI (pill voto, pill
       categoria, badge): quasi-nero in ENTRAMBI i temi — su #FA5403 il
       bianco è 3.13:1 (sotto soglia), il quasi-nero 6.07. È la lezione
       D-025 che resta valida. */
    --color-on-primary: var(--neutral-950);
    /* Testo/icne SOPRA i riempimenti brand d'IDENTITÀ (topbar, bottoni
       primari, frecce carosello): bianco in light come il live (fedeltà
       D-011), quasi-nero in dark (D-241: su #FA5403 il bianco è 3.13:1,
       il quasi-nero 6.07). */
    --color-on-brand: light-dark(var(--neutral-0), var(--neutral-950));

    /* Rosso dei bottoni "Archivio" (valore live #F8130E): 4.13:1 col bianco,
       sotto la soglia AA. Si approfondisce leggermente a L 0.58 (≈#E60000,
       stesso hue/croma): 4.80:1 col bianco e 4.88 col quasi-nero in dark
       (--color-on-primary). La primitiva --danger-500 resta al valore live. */
    --color-danger: light-dark(oklch(58% 0.23 29), oklch(62.8% 0.258 29));

    --color-accent: light-dark(var(--accent-700), var(--accent-400));
    --color-accent-soft: light-dark(var(--accent-300), var(--accent-700));
    /* D-241: anche il focus ring usa il brand puro in dark (≥4.96:1 sui
       fondi scuri: sopra il requisito 3:1 degli indicatori di focus). */
    --focus-ring: var(--brand-500);

    /* --- Tipografia fluida (clamp: min, preferito, max) -------------------
       Corpo reale: 17px nel kit. --text-base ha max 1.0625rem (= 17px). */
    --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);
    --text-4xl: clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);
    --text-5xl: clamp(2.75rem, 1.95rem + 4vw, 5rem);

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.06em;

    /* --- Spaziature: scala geometrica, riutilizzabile ovunque -------------- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;
    /* Ritmo verticale delle sezioni: molto compatto (richieste owner
       2026-09-13 e 2026-09-14 «la distanza da pc è troppo»):
       24px su mobile, 40px su desktop. Non aumentare senza autorizzazione. */
    --space-section: clamp(1.5rem, 0.9rem + 1.75vw, 2.25rem);
    --space-gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);

    /* --- Layout ----------------------------------------------------------- */
    --container-narrow: 48rem;
    --container-default: 71.25rem; /* 1140px: larghezza container del live */
    --container-wide: 90rem;
    /* Altezze header (D-028, misure live @1920): topbar 36px + riga logo
       86px attaccata = 122px totali, entrambe con margini laterali 10px.
       I valori vivono in Header.astro perché accoppiati ai suoi padding. */

    /* --- Forme e ombre ---------------------------------------------------- */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-card: 0.5625rem;  /* 9px: raggi delle card misurati sul live */
    --radius-loop: 0.9375rem;  /* 15px: raggi delle card loop del DB (25913) */
    --radius-pill: 0.9375rem;  /* 15px: le "pill" categoria del live */
    --radius-xl: 2rem;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.06);
    --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.12), 0 4px 10px rgb(0 0 0 / 0.07);

    --border-width: 1px;

    /* --- Movimento -------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 120ms;
    --duration-base: 220ms;
    --duration-slow: 420ms;

    /* --- Livelli ---------------------------------------------------------- */
    --z-base: 0;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
  }

  /* Un tema forzato esplicitamente vince sulla preferenza di sistema.
     Serve anche per un futuro toggle chiaro/scuro lato utente. */
  :root[data-theme='light'] {
    color-scheme: light;
  }

  :root[data-theme='dark'] {
    color-scheme: dark;
  }

  /* Riduce le animazioni anche ai token, per coerenza. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
      --duration-base: 0ms;
      --duration-slow: 0ms;
    }
  }
}

@layer base {
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-synthesis-weight: none;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
  }

  h1 {
    font-size: var(--text-4xl);
  }
  h2 {
    font-size: var(--text-3xl);
  }
  h3 {
    font-size: var(--text-2xl);
  }
  h4 {
    font-size: var(--text-xl);
  }

  a {
    color: var(--color-primary);
  }

  a:hover {
    color: var(--color-primary-hover);
  }

  strong,
  b {
    font-weight: 600;
  }

  small {
    font-size: var(--text-sm);
  }

  hr {
    border: 0;
    border-top: var(--border-width) solid var(--color-border);
    margin-block: var(--space-xl);
  }

  blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--text-lg);
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.925em;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.15em 0.35em;
  }

  pre {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow-x: auto;
    font-size: var(--text-sm);
  }

  pre code {
    background: none;
    border: 0;
    padding: 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  th,
  td {
    text-align: left;
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: var(--border-width) solid var(--color-border);
  }

  /* Skip link: primo elemento focalizzabile della pagina. */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-sm);
    inset-block-start: -100%;
    z-index: var(--z-toast);
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: inset-block-start var(--duration-base) var(--ease-out);
  }

  .skip-link:focus-visible {
    inset-block-start: var(--space-sm);
  }
}

@layer layout {
  /* Contenitore centrato: la larghezza è un token, non un numero sparso. */
  .container {
    width: min(100% - (var(--space-gutter) * 2), var(--container-default));
    margin-inline: auto;
  }

  .container--narrow {
    --container-default: var(--container-narrow);
  }

  .container--wide {
    --container-default: var(--container-wide);
  }

  /* Sezione: ritmo verticale uniforme in tutto il sito. */
  .section {
    padding-block: var(--space-section);
  }

  .section--tight {
    padding-block: var(--space-xl);
  }

  .section--flush-top {
    padding-block-start: 0;
  }

  .section__header {
    margin-block-end: var(--space-md); /* ritmo compatto (D-014) */
  }

  /* Titolo di sezione: la FIRMA del sito live (.section-title, ripetuto su
     ogni fascia): Poppins 20px/600, nero, barra arancione 5px sotto.
     Misurato da riferimenti/ (D-011); niente occhiello maiuscolo. */
  .section__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--color-text);
    padding-block-end: 6px;
    border-block-end: 5px solid var(--color-primary);
    display: inline-block;
    min-inline-size: min(100%, 14rem);
    margin-block: 0;
  }

  .section__eyebrow {
    display: none; /* il live non ha occhielli: titolo + barra bastano */
  }

  .section__lead {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-block-start: var(--space-sm);
  }

  /* Griglie auto-responsive: nessuna media query, si adattano alla larghezza
     disponibile del contenitore (non del viewport). Gap compatto: sul live
     le griglie hanno gap 10px (misurato, D-011). */
  .grid {
    display: grid;
    gap: var(--grid-gap, 0.625rem);
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 18rem), 100%), 1fr));
  }

  .grid--2 {
    --grid-min: 24rem;
  }
  .grid--3 {
    --grid-min: 18rem;
  }
  .grid--4 {
    --grid-min: 13rem;
  }

  /* Layout a due colonne con sidebar: collassa sotto i 60rem di CONTENITORE. */
  .with-sidebar {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: 1fr;
  }

  @container (min-width: 60rem) {
    .with-sidebar {
      grid-template-columns: minmax(0, 1fr) 20rem;
    }
  }

  /* Pagina sempre alta almeno quanto lo schermo: footer in basso anche con
     poco contenuto. */
  .page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  .page > main {
    flex: 1;
  }
}

/* ===== src/components/ui/Card.astro ===== */

  .card {
    /* Il nome è indispensabile: senza, i figli non possono interrogare il
       contenitore con @container. */
    container-type: inline-size;
    container-name: card;

    display: flex;
    flex-direction: column;
    block-size: 100%;
    background-color: var(--color-surface-raised);
    border-radius: var(--radius-card); /* 9px: valore misurato sul live */
    overflow: hidden;
    transition:
      border-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out),
      translate var(--duration-base) var(--ease-out);
  }

  .card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    translate: 0 -2px;
  }

  .card__media img {
    inline-size: 100%;
    /* Le copertine del live sono molto panoramiche: ratio dominante 3.28:1
       misurato su 78 immagini della home. */
    aspect-ratio: 33 / 10;
    object-fit: cover;
  }

  .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-md);
    flex: 1;
  }

  .card__eyebrow {
    /* La pill categoria del live: sfondo arancione, testo bianco, radius 15px
       (custom CSS del sito: a[rel=tag], .upk-category). */
    align-self: flex-start;
    font-family: var(--font-heading);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    /* D-025: testo scuro sul primario in dark (on-primary), leggibile. */
    color: var(--color-on-primary);
    background-color: var(--color-primary);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
  }

  .card__title {
    font-size: 1.125rem; /* 18px: titolo card misurato sul live */
    margin: 0;
  }

  .card__title a {
    color: var(--color-text);
    text-decoration: none;
  }

  /* L'intera card è cliccabile senza annidare elementi interattivi:
     l'area cliccabile si estende dal link ai bordi dell'articolo. */
  .card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .card {
    position: relative;
  }

  .card__title a:hover {
    color: var(--color-link);
  }

  .card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .card__date {
    margin-block-start: auto;
    padding-block-start: var(--space-2xs);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  /* Su contenitori larghi la card passa a orizzontale, senza media query. */
  @container card (min-width: 30rem) {
    .card {
      flex-direction: row;
    }

    .card__media {
      flex: 0 0 40%;
    }

    .card__media img {
      block-size: 100%;
      aspect-ratio: 1 / 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .card:hover {
      translate: 0 0;
    }
  }


/* ===== src/components/ui/Button.astro ===== */

  .btn {
    /* Layout: flex + gap rende naturale affiancare testo e icona. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);

    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition:
      background-color var(--duration-base) var(--ease-out),
      color var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out),
      translate var(--duration-base) var(--ease-out);
  }

  /* Le taglie usano token, non numeri: la scala resta coerente ovunque. */
  .btn--sm {
    font-size: var(--text-sm);
    padding: var(--space-2xs) var(--space-sm);
  }

  .btn--md {
    font-size: var(--text-base);
    padding: var(--space-xs) var(--space-md);
  }

  .btn--lg {
    font-size: var(--text-lg);
    padding: var(--space-sm) var(--space-lg);
  }

  .btn--primary {
    background-color: var(--color-primary);
    /* D-027: bottone d'identità → bianco in light come il live. */
    color: var(--color-on-brand);
  }

  .btn--primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-on-brand);
  }

  .btn--secondary {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
  }

  .btn--secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-link);
  }

  .btn--ghost {
    background-color: transparent;
    color: var(--color-link);
    padding-inline: var(--space-xs);
  }

  .btn--ghost:hover {
    background-color: var(--color-surface);
  }

  .btn--full {
    width: 100%;
  }

  .btn:hover {
    translate: 0 -1px;
  }

  .btn:not(:disabled):active {
    translate: 0 0;
  }

  .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    translate: 0;
  }

  /* Un click sull'elemento disabilitato non deve passare: per i link si usa
     `pointer-events`, comportamento non ottenibile con :disabled. */
  a.btn[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.55;
  }

  @media (prefers-reduced-motion: reduce) {
    .btn:hover {
      translate: 0 0;
    }
  }


/* ===== src/components/ui/ArchiveButton.astro ===== */

  .archbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* icon_indent del DB */

    inline-size: 100%;
    padding: 10px 15px;
    background-color: var(--color-danger);
    color: var(--color-on-primary);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 5px; /* misurato nel DB */
    transition: filter var(--duration-base) var(--ease-out);
  }

  .archbtn:hover {
    color: var(--color-on-primary);
    filter: brightness(0.9);
  }

  .archbtn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* Touch target comodo su mobile, fedele al live su desktop. */
  @media (pointer: coarse) {
    .archbtn {
      min-height: 44px;
    }
  }


/* ===== src/components/ui/ArchivioCard.astro ===== */

  .acard {
    display: flex;
  }
  .acard__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--color-card-tint);
    border: 1px solid var(--border-card);
    border-radius: 9px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out);
  }
  .acard__link:hover {
    box-shadow: var(--shadow-md);
  }

  /* Immagine: rapporto 3:2 legato alla larghezza della colonna (D-062):
     su colonne da ~255px l'altezza scende a ~170px e la card totale
     risulta ~1.1:1 (quasi quadrata) invece di 1:1.55. */
  .acard__media {
    display: block;
    overflow: hidden;
  }
  .acard__media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.6s var(--ease-out);
  }
  /* D-071/D-072, mobile: immagine più bassa — la card scende senza
     toccare desktop. Rapporto calibrato per portare la card a 280px
     (richiesta owner): su una colonna ~343px il 15:7 (=2.14:1) dà
     un'immagine ~160px (da 192 del 2:1). */
  @media (max-width: 48rem) {
    .acard__media img {
      aspect-ratio: 15 / 7;
    }
  }
  .acard__link:hover .acard__media img {
    transform: scale(1.1);
  }

  /* Pills: il blocco arancione sovrapposto al bordo dell'immagine
     (margin -20px misurato dal live), sfondo pieno, radius 12px. */
  .acard__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -20px 0 0 0;
    padding: 0 10px;
    position: relative;
    z-index: 1;
  }
  .acard__pill {
    background: var(--color-primary); /* #FA5403 */
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
  }

  /* Titolo: Poppins 20px/300, hover rosso del live. */
  .acard__titolo {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 300;
    line-height: 1.25;
    margin: 10px 12px 12px;
    min-height: 0;
    transition: color 0.4s var(--ease-out);
  }
  /* D-071, mobile: card più COMPATTE (richiesta owner: «almeno 8px più
     corte») — titolo 18px, margini ridotti. Combinato con l'immagine
     2:1 la card scende di ~50px complessivi. */
  @media (max-width: 48rem) {
    .acard__titolo {
      font-size: 18px;
      margin: 8px 10px 10px;
    }
  }
  .acard__link:hover .acard__titolo {
    color: #f3081e;
  }
  .acard__link:hover .acard__titolo {
    color: var(--color-primary); /* in dark il rosso live legge male: usiamo il brand */
  }

  /* Footer: la data tutta a sinistra (D-069); con il voto space-between
     data-sx / voto-dx — stessa logica del footer LoopCard (D-064). */
  .acard__foot {
    margin-top: auto;
    display: flex;
    justify-content: flex-start; /* D-069: la data tutta a sinistra */
    padding: 8px 12px;
    border-top: 1px solid var(--color-border);
  }
  /* D-071, mobile: footer più compatto. */
  @media (max-width: 48rem) {
    .acard__foot {
      padding: 6px 10px;
    }
  }
  .acard__foot--meta {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .acard__data {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
  }
  .acard__voto {
    flex: 0 0 auto;
    pointer-events: none;
    padding: 1px 8px;
    background-color: var(--color-primary);
    color: var(--color-on-brand);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius-pill);
  }


/* ===== src/components/ui/SchedaAnimeCard.astro ===== */

  .sac {
    min-inline-size: 0;
  }
  .sac__link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-card, 15px);
    overflow: hidden;
    background: light-dark(#e6e6e694, rgb(255 255 255 / 0.05));
    -webkit-tap-highlight-color: transparent;
  }
  .sac__img-wrap {
    position: relative;
    aspect-ratio: 460 / 651; /* rapporto reale delle cover del live */
    overflow: hidden;
    background: var(--neutral-200);
  }
  .sac__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-out);
  }
  .sac__link:hover .sac__img,
  .sac__link:focus-visible .sac__img {
    transform: scale(1.1);
  }
  .sac__formato {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 3px 9px;
    border-radius: 100px;
    background: rgb(0 0 0 / 0.72);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .sac__corpo {
    padding: 10px 12px 12px;
  }
  .sac__titolo {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
  }
  .sac__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 6px;
    flex-wrap: wrap;
  }
  .sac__voto {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-primary);
  }
  .sac__voti-minori {
    display: inline-flex;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
  }
  .sac__anno {
    margin-inline-start: auto;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }
  .sac__link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }


/* ===== src/components/ui/LoopCard.astro ===== */

  .lcard {
    position: relative;
    display: flex;
    flex-direction: column;
    block-size: 100%;
    /* Tinta card del live (DB 25913): #E6E6E6 al 58% in light; in dark la
       superficie raised piena (token D-024). */
    background-color: var(--color-card-tint);
    /* Bordo 1px nero sulle card notizie (richiesta owner 2026-09-14); in dark
       bordo grigio (token D-024: il nero sparirebbe sul fondo scuro). */
    border: 1px solid var(--border-card);
    border-radius: var(--radius-loop); /* 15px: radius delle card loop (DB) */
    overflow: hidden;
    transition:
      translate var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  .lcard:hover {
    translate: 0 -2px;
    box-shadow: var(--shadow-md);
  }

  /* --- Placeholder sfocato LQIP (D-024, ispirato ad Anime Corner): mentre
     la copertina carica, il riquadro mostra la variante 300w sfocata
     (sfondo CSS inline --lqip): zero flash bianco, la pagina appare
     immediatamente strutturata. Quando l'img emette load (script qui
     sotto, delegato) il placeholder sfuma via :has(data-loaded). --- */
  .lcard__media {
    position: relative;
    display: block;
  }

  .lcard__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--lqip, none);
    background-size: cover;
    background-position: center;
    filter: blur(14px);
    /* Il blur trasparentisce i bordi del riquadro: un lieve scale li copre. */
    transform: scale(1.1);
    transition: opacity var(--duration-base) var(--ease-out);
  }

  .lcard__media:has(img[data-loaded])::before {
    opacity: 0;
  }

  .lcard__media img {
    position: relative; /* sopra il placeholder sfocato */
    display: block;
    inline-size: 100%;
    /* Base live 33:10; con --img-scale la copertina è leggermente più alta
       (richiesta owner: immagini un po' più grandi, D-015). */
    aspect-ratio: calc(33 / 10 / var(--img-scale, 1));
    object-fit: cover;
  }

  .lcard[data-ratio='video'] .lcard__media img {
    aspect-ratio: calc(16 / 9 / var(--img-scale, 1)); /* slide Vetrina 1.78:1 */
  }

  /* Variante stretch: la card assorbe l'altezza della riga/fila e la copertina
     assorbe lo spazio libero del corpo (owner 2026-09-14: la Vetrina deve
     arrivare al fondo della colonna, senza spazio bianco sotto il carosello).
     La media resta fissa finché c'è solo l'aspect-ratio; qui min-height:0 sul
     contenitore media sblocca il restringimento e l'img copre con object-fit.
     Solo copertina: il corpo (titolo) resta naturale.
     Solo desktop: su mobile le colonne sono impilate (nessuno spazio bianco
     da riempire) e l'aspect-ratio deve restare la fonte dell'altezza. */
  @media (min-width: 60rem) {
    .lcard--stretch {
      block-size: 100%;
    }

    .lcard--stretch .lcard__media {
      display: block;
      flex: 1 1 auto;
      min-block-size: 0; /* senza questo l'img non può restringersi sotto l'AR */
    }

    .lcard--stretch .lcard__media img {
      block-size: 100%;
      inline-size: 100%;
      min-block-size: 0;
      aspect-ratio: auto;
      object-fit: cover;
    }
  }

  /* Il corpo si allunga a occupare lo spazio libero della card (la media ha
     altezza fissa dall'aspect-ratio): l'estratto, ultimo figlio, finisce
     sempre sul fondo e le card della griglia risultano allineate (richiesta
     owner 2026-09-14: testo bilanciato all'interno della card). */
  .lcard__body {
    display: grid;
    /* Traccia VINCOLATA (D-063): minmax(0,1fr) impedisce al titolo lungo di
       gonfiare la colonna oltre la larghezza della card (una traccia auto
       dimensiona al max-content del contenuto) — con titolo+tag+voto sulla
       stessa riga la riga sbordava in modo diverso da card a card. */
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-3xs);
    padding: var(--space-xs) var(--space-sm);
    flex: 1 1 auto;
  }

  /* L'estratto respinge verso il basso tutto ciò che lo segue: con il corpo
     esteso si appoggia al fondo della card. */
  .lcard__excerpt {
    margin-block-start: auto;
  }

  /* Con il footer presente l'estratto NON spinge più (due auto-margine
     nello stesso grid si spartirebbero lo spazio libero e il footer
     staccherebbe dal fondo): solo il footer assorbe lo spazio. */
  .lcard__body:has(.lcard__footer-meta) .lcard__excerpt {
    margin-block-start: 0;
  }

  .lcard--sm .lcard__body {
    padding: var(--space-2xs) var(--space-xs);
    gap: 2px;
  }

  .lcard__pill {
    font-family: var(--font-heading);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    /* D-027: riempimento #FA5403 come il live, testo quasi-nero (6.07:1
       in light, 8.35 in dark — on-primary). */
    color: var(--color-on-primary);
    background-color: var(--color-primary);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
  }

  /* Kicker categoria (D-024): testo maiuscolo arancio, link reale
     all'archivio. Sopra l'overlay del titolo (che copre tutta la card):
     position relative + z-index 1 lo rende cliccabile. */
  .lcard__kicker {
    position: relative;
    z-index: 1;
    margin: 0;
  }

  .lcard__kicker a {
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-link);
    text-decoration: none;
  }

  .lcard__kicker a:hover {
    text-decoration: underline;
  }

  .lcard__kicker a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .lcard__title {
    margin: 0;
    font-family: var(--font-heading);
    /* Fluida 15→16px (D-018): il valore DB del live (16px) resta il massimo;
       su mobile una card a piena larghezza legge meglio leggermente più stretta. */
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    /* Bold invece del Light del live (richiesta owner 2026-09-14: il titolo
       deve risaltare). Poppins 700 è già incluso nel kit (D-022). */
    font-weight: 700;
    line-height: var(--leading-snug);
  }

  /* --- Footer meta (D-064): tipo ANIME/MANGA a sinistra + pill voto a
     destra, SU UNA RIGA appoggiata al FONDO della card (richiesta owner:
     "la scritta anime/manga in basso a sx, il voto in basso a dx").
     La riga esiste SOLO quando almeno uno dei due è presente: zero
     markup nelle card normali (notizie, classifiche, uscite). --- */
  .lcard__footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    /* 100% della traccia vincolata (minmax(0,1fr) sul body): larghezza
       sempre esatta, la pill voto resta dentro la card. */
    inline-size: 100%;
    /* Appoggio al fondo: respinge sé stessa da titolo/estratto/data. */
    margin-block-start: auto;
  }

  /* Tipo ANIME/MANGA: statico, senza sfondo né bordo (badges vs. pills,
   best practice 2026): i tag display-only non devono sembrare bottoni. */
  .lcard__type-tag {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding-block: 2px;
    color: var(--color-text-muted);
  }

  /* Pill voto: riempimento brand, testo bianco, cifre tabulari — identica
     alla sidebar. La posizione a destra viene dal footer (space-between).
     pointer-events:none: è display-only, il click deve attraversarla fino
     all'overlay della card (l'intera card è cliccabile). */
  .lcard__voto {
    flex: 0 0 auto;
    pointer-events: none;
    padding: 1px 8px;
    background-color: var(--color-primary);
    color: var(--color-on-brand);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius-pill);
  }

  .lcard__type-tag {
    pointer-events: none;
  }

  .lcard--sm .lcard__title {
    font-size: 0.875rem;
  }

  .lcard__title a {
    color: var(--color-text);
    text-decoration: none;
    /* Al hover il colore passa all'arancio: con il peso già bold non c'è più
       il salto di font-weight del live (era 300→500) che faceva ballare il testo. */
    transition: color var(--duration-fast) var(--ease-out);
  }

  .lcard__title a::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .lcard:hover .lcard__title a {
    color: var(--color-link);
  }

  .lcard__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  .lcard__date {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .lcard:hover {
      translate: 0 0;
    }
  }


/* ===== src/components/ui/LeadList.astro ===== */

  .leadlist__header {
    margin-block-end: var(--space-md);
  }

  /* Titolo + "Vedi tutto" sulla stessa base (D-024, pattern Anime Corner). */
  .leadlist__title-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
  }

  .leadlist__view-all {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-link); /* testo brand: leggibile su fascia grigia (D-027) */
    text-decoration: none;
  }

  .leadlist__view-all:hover {
    text-decoration: underline;
  }

  .leadlist__view-all:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* --- Lead: card grande con copertina panoramica --- */
  .leadlist__lead {
    display: block;
    overflow: hidden;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-loop);
    text-decoration: none;
    transition:
      translate var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  .leadlist__lead:hover {
    translate: 0 -2px;
    box-shadow: var(--shadow-md);
  }

  .leadlist__media {
    position: relative;
    display: block;
  }

  .leadlist__media > img {
    display: block;
    inline-size: 100%;
    /* Stessa proporzione delle copertine loop (33:10 / --img-scale). */
    aspect-ratio: calc(33 / 10 / var(--img-scale, 1));
    object-fit: cover;
  }

  .leadlist__lead-body {
    display: grid;
    justify-items: start;
    gap: var(--space-3xs);
    padding: var(--space-xs) var(--space-sm);
  }

  .leadlist__heading {
    font-family: var(--font-heading);
    font-size: 1rem; /* 16px/600: classic_title_typography del live */
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--leading-snug);
  }

  .leadlist__heading--lead {
    font-size: 1.0625rem; /* 17px: il lead legge un gradino sopra le righe */
  }

  .leadlist__lead:hover .leadlist__heading,
  .leadlist__row:hover .leadlist__heading {
    color: var(--color-link);
  }

  .leadlist__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .leadlist__date {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
  }

  /* --- Titolo + voto sulla stessa riga (richiesta owner 2026-09-14):
     il badge sta SEMPRE a lato del titolo, sia nel lead che nelle righe.
     Niente wrap: il titolo si restringe (clamp 2 righe) e la pill resta
     sulla stessa linea, allineata alla prima riga di testo. --- */
  .leadlist__title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* La riga titolo+voto occupa tutta la larghezza del corpo card:
       la pill resta a lato del titolo anche con titoli brevi. */
    inline-size: 100%;
  }

  /* Il titolo si restringe (min-inline-size: 0) e resta alla sua larghezza
     naturale: è il MARGINE AUTO della pill a spingerla al bordo destro,
     così tutti i voti della colonna risultano ALLINEATI (richiesta owner
     2026-09-14) qualunque sia la lunghezza del titolo. */
  .leadlist__title-row .leadlist__heading {
    flex: 0 1 auto;
    min-inline-size: 0;
  }

  /* --- Kicker statico del tipo (D-043, feed misti): micro-etichetta
     maiuscoletto SENZA sfondo né bordo — best practice Friedman 2026
     ("Badges vs. Pills vs. Chips vs. Tags"): i tag display-only non devono
     SEMBRARE bottoni, altrimenti si confondono con le pill interattive
     (voto, categoria). Il colore muted segue il tema chiaro/scuro. --- */
  .leadlist__kicker {
    flex: 0 0 auto;
    /* Ancora destra della riga (il voto segue senza il suo margine auto,
       vedi :has): tutte le etichette sulla stessa verticale. */
    margin-inline-start: auto;
    font-family: var(--font-heading);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding-block: 2px;
    color: var(--color-text-muted);
  }

  .leadlist__lead .leadlist__kicker {
    font-size: 0.6875rem;
  }

  /* --- Badge voto (recensioni): pill arancio a lato del titolo, spinta
     al bordo destro della card dal margine auto: colonna allineata.
     Se nella riga c'e' il kicker (sidebar, D-043) l'ancora a destra e' il
     kicker stesso (vedi regola :has) e la pill lo segue. --- */
  .leadlist__voto {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding: 1px 8px;
    /* Riempimento #FA5403 come il live; testo BIANCO su richiesta owner
       (2026-09-14, «da nero a bianco») — scambia la leggibilità D-027
       (3.13:1, sotto la soglia AA) per la fedeltà al sito attuale, dove
       il voto è bianco. Nota in KB D-028-int. */
    background-color: var(--color-primary);
    color: var(--color-on-brand);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius-pill);
  }

  .leadlist__lead .leadlist__voto {
    padding: 3px 10px;
    font-size: 0.8125rem;
  }

  /* Kicker presente nella riga (sidebar recensioni, D-043): l'etichetta
     ANIME/MANGA si ancora al bordo destro (margin-inline-start: auto) e la
     pill voto la segue: etichette e voti formano un blocco destro su due
     colonne, ALLINEATO su tutte le card a qualunque lunghezza del titolo
     (richiesta owner 2026-09-15: "le scritte in linea"). Senza kicker
     (colonne home) la pill conserva il suo margin-inline-start: auto. */
  .leadlist__title-row:has(.leadlist__kicker) .leadlist__voto {
    margin-inline-start: 0;
  }

  /* --- Righe compatte: miniatura quadrata + titolo --- */
  .leadlist__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    margin-block-start: 10px;
    list-style: none;
  }

  .leadlist__row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-loop);
    text-decoration: none;
  }

  .leadlist__thumb {
    flex: 0 0 auto;
    inline-size: 72px;
    block-size: 72px;
    border-radius: calc(var(--radius-loop) - 6px);
    object-fit: cover;
  }

  .leadlist__row-body {
    display: grid;
    justify-items: start;
    gap: 3px;
    /* 1px bordo + 6px padding card + 10px = 17px dal bordo card, come il
       lead (1px + 16px): tutti i voti della colonna sullo stesso bordo. */
    padding-inline-end: calc(var(--space-2xs) + 2px);
    /* Si estende fino al bordo destro della card: senza flex:1 si restringe
       al contenuto e il margine auto della pill voto vale 0, disallineando
       i voti della colonna (richiesta owner 2026-09-14). */
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .leadlist__row .leadlist__heading {
    /* Due righe massime: le righe restano compatte anche con titoli lunghi. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .leadlist__row .leadlist__desc {
    -webkit-line-clamp: 1;
  }

  /* --- Footer archivio RIMOSSO (D-027): il "Vedi tutto" nell'header è
     l'unico percorso verso l'archivio — niente doppioni. --- */
  .leadlist__lead:focus-visible,
  .leadlist__row:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  @media (pointer: coarse) {
    /* Touch target: l'intera riga è il target, ma garantisco l'altezza minima. */
    .leadlist__row {
      min-block-size: 44px;
    }
  }

  /* Colonna stretta (mobile): thumb più piccola, lead invariato. */
  @container (max-width: 26rem) {
    .leadlist__thumb {
      inline-size: 56px;
      block-size: 56px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .leadlist__lead:hover {
      translate: 0 0;
    }
  }


/* ===== src/components/ui/VoteCircle.astro ===== */

  .vcircle {
    /* Solo la donut: la legenda è stata assorbita dalle barre dei criteri
       (D-091) che già mostrano testo + voto + colore per ogni riga. */
    display: block;
  }

  .vcircle__donut {
    position: relative;
    inline-size: 168px;
    block-size: 168px;
    flex: none;
  }

  .vcircle__donut svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
  }

  .vcircle__track {
    fill: none;
    /* D-094: dipende dal tema — bianco pieno sul grigio chiaro (light),
       velo bianco sulla superficie dark (baseline percettibile, WCAG 2.2). */
    stroke: light-dark(#fff, rgb(255 255 255 / 0.2));
    stroke-width: 10;
  }

  /* Segmento: il <circle> È l'elemento interattivo (tabindex + aria-label).
     Area hit allargata con pointer-events: stroke + stroke trasparente extra
     sotto (facile il tap mobile). */
  .vcircle__seg {
    fill: none;
    stroke: var(--colore);
    stroke-width: 10;
    stroke-linecap: butt;
    stroke-dasharray: var(--dash);
    /* Rotazione attorno al centro dell'SVG: posiziona il segmento. */
    transform-box: view-box;
    transform-origin: center;
    transform: rotate(var(--rot));
    cursor: pointer;
    transition:
      stroke-width var(--duration-fast) var(--ease-out),
      opacity var(--duration-fast) var(--ease-out);
  }

  /* Evidenzia il segmento attivo, attenua gli altri (stato via JS su hover/tap/focus). */
  .vcircle[data-attivo] .vcircle__seg:not([data-attivo]) {
    opacity: 0.35;
  }
  .vcircle__seg[data-attivo] {
    stroke-width: 14;
  }

  /* Focus visibile su SVG: l'outline standard non renderizza sui figure SVG.
     D-092b: alone SCURO (il pannello è chiaro) — contrasto su ogni segmento. */
  .vcircle__seg:focus-visible {
    outline: none;
    /* D-094: alone in funzione del tema (nero su chiaro, bianco su dark). */
    filter: light-dark(
      drop-shadow(0 0 3px rgb(0 0 0 / 0.85)) drop-shadow(0 0 7px rgb(0 0 0 / 0.45)),
      drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgb(255 255 255 / 0.65))
    );
    stroke-width: 14;
  }

  .vcircle__centro {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
  }

  .vcircle__voto {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    /* Identità cromatica del voto in TUTTO il sito è arancione (badge ★,
       pills recensioni): il centro della donut la segue (owner 2026-09-17). */
    color: #fa5403;
    font-variant-numeric: tabular-nums;
  }

  .vcircle__scala {
    font-size: 0.875rem;
    color: light-dark(rgb(0 0 0 / 0.6), rgb(255 255 255 / 0.65));
  }

  /* Tooltip: unico, centrato sotto il cerchio, testo scelto dall'interazione. */
  .vcircle__tip {
    position: absolute;
    inset-inline: 0;
    block-size: auto;
    bottom: -1.9rem;
    margin: 0;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(var(--neutral-900), var(--neutral-100));
    min-block-size: 1.2rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .vcircle[data-attivo] .vcircle__tip {
    opacity: 1;
  }

  /* ---------------------------------------------- animazione di ingresso ----
     I segmenti si "riempiono" in sequenza quando la donut entra a vista
     (tab aperta o scroll su mobile). Stati gestiti da JS: data-animabile
     (parte da 0) → data-animato (riempie con stagger per --i) → pulizia
     (le regole base riportano il valore finale, nessun salto). */
  .vcircle[data-animabile] .vcircle__seg {
    stroke-dasharray: 0 360;
  }

  .vcircle[data-animabile][data-animato] .vcircle__seg {
    stroke-dasharray: var(--dash);
    transition: stroke-dasharray 800ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 100ms);
  }

  @media (prefers-reduced-motion: reduce) {
    .vcircle[data-animabile] .vcircle__seg,
    .vcircle[data-animabile][data-animato] .vcircle__seg {
      stroke-dasharray: var(--dash);
      transition: none;
      transition-delay: 0ms;
    }
  }

  /* Le regole della vecchia legenda (voce/swatch/criterio/valore) sono state
     rimosse con la legenda stessa (D-091): le barre dei criteri nel template
     recensione fanno ormai quel lavoro, senza duplicare testo + voto. */

  @media (max-width: 560px) {
    .vcircle {
      justify-items: center;
    }
  }


/* ===== src/components/ui/SearchModal.astro ===== */

  /* NOTA (D-079): stili GLOBALI con prefisso #search-modal (id unico nel
     sito): i risultati sono generati via innerHTML dallo script e NON
     ricevono l'attributo scope di Astro — gli stili scoped non si
     applicherebbero (titoli color link e mark giallo di default, difetto
     visto in verifica). is:global + prefisso id = zero collisioni. */

  /* ---------------------------------------------------------------- box ---- */
  #search-modal.search {
    /* dialog: il browser centra di default, qui personalizziamo */
    border: none;
    padding: 0;
    background: transparent;
    max-inline-size: min(640px, calc(100vw - 32px));
    inline-size: 100%;
    margin-inline: auto;
  }

  #search-modal.search::backdrop {
    background: color-mix(in srgb, black 55%, transparent);
    backdrop-filter: blur(2px);
  }

  #search-modal .search__box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
    overflow: hidden;
  }

  /* ---------------------------------------------------------------- bar ---- */
  #search-modal .search__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-block-end: 1px solid var(--color-border);
  }

  #search-modal .search__ico {
    flex: none;
    color: var(--color-text-muted);
  }

  #search-modal .search__input {
    flex: 1;
    min-inline-size: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-display); /* Poppins, come il resto dell'UI */
    font-size: 1rem; /* ≥16px: iOS non zooma */
    font-weight: 400;
  }

  #search-modal .search__input::placeholder {
    color: var(--color-text-muted);
  }

  #search-modal .search__input::-webkit-search-cancel-button {
    display: none; /* il bottone chiudi è più raggiungibile */
  }

  #search-modal .search__close {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
  }

  #search-modal .search__close:hover {
    color: var(--color-text);
  }

  #search-modal .search__esc {
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
  }

  @media (max-width: 47.99rem) {
    #search-modal .search__esc {
      display: none; /* su mobile non esiste Esc */
    }
  }

  /* ---------------------------------------------------------------- hint --- */
  #search-modal .search__hint {
    margin: 0;
    padding: 10px 16px 4px;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }

  /* ------------------------------------------------------------ risultati -- */
  #search-modal .search__results {
    list-style: none;
    margin: 0;
    padding: 4px 8px;
    max-block-size: min(60vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #search-modal .search__results:empty {
    display: none;
  }

  #search-modal .search__item {
    /* Separatore 1px fra i risultati (richiesta owner): NESSUN radius qui —
       il radius curverebbe il bordo creando dei "box" invece della linea
       sottile (difetto visto in verifica). L'highlight al passaggio sta
       sul link interno, che ha il suo radius. */
    border-block-end: 1px solid var(--color-border);
    /* D-081: con centinaia di risultati il layout di TUTTI gli item costa
       (~117ms a 800 voci). content-visibility salta layout e paint delle
       voci fuori dal viewport della lista: il render resta ~istantaneo
       anche con 800 voci. contain-intrinsic-size = altezza stimata di ogni
       voce (48px thumb + padding), evita salti di scrollbar. */
    content-visibility: auto;
    contain-intrinsic-size: auto 65px;
  }

  #search-modal .search__item:last-child {
    border-block-end: none;
  }

  #search-modal .search__link {
    display: grid;
    grid-template-columns: 48px 1fr; /* miniatura + testo (D-081) */
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
  }

  /* Miniatura 48px (D-081): riquadro fisso, sfondo = LQIP sfocato finché
     l'immagine pigra arriva; se non c'è copertina, glifo documento. */
  #search-modal .search__thumb {
    inline-size: 48px;
    block-size: 48px;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: color-mix(in srgb, var(--color-text) 8%, transparent);
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
  }

  #search-modal .search__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  #search-modal .search__testo {
    display: grid;
    gap: 2px;
    min-inline-size: 0; /* il titolo lungo ellissa invece di sbordare */
  }

  #search-modal .search__item.is-active .search__link,
  #search-modal .search__item:hover .search__link {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  }

  #search-modal .search__titolo {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2; /* max 2 righe: liste lunghe restano scansionabili */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #search-modal .search__titolo mark {
    background: none;
    color: var(--color-primary);
    font-weight: 700;
  }

  #search-modal .search__sub {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
  }

  /* ---------------------------------------------------------------- footer - */
  #search-modal .search__footer {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-block-start: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }

  #search-modal .search__footer kbd {
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-inline-end: 4px;
    background: var(--color-surface-raised, transparent);
  }

  @media (max-width: 47.99rem) {
    #search-modal .search__footer {
      display: none; /* su mobile: niente scorciatoie da tastiera */
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #search-modal.search,
    #search-modal.search::backdrop {
      transition: none;
    }
  }


/* ===== src/components/ui/SnapCarousel.astro ===== */

  .car {
    position: relative;
  }

  .car__track {
    display: grid;
    grid-auto-flow: column;
    /* Mobile: 1 slide per vista con PEEK (D-035, owner 2026-09-15): la traccia
       lascia 24px visibili della scheda successiva — l'affordance di swipe più
       forte secondo NN/g, insieme ai dots. La % della traccia si calcola sullo
       spazio residuo dopo il peek. Il width:100% sui figli dentro una grid a
       flusso colonna si risolverebbe sulla traccia auto e collasserebbe. */
    grid-auto-columns: calc(100% - 24px);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* il live non mostra la barra */
    padding-block-end: 2px;
  }

  .car__track::-webkit-scrollbar {
    display: none;
  }

  .car__track > * {
    scroll-snap-align: start;
  }

  /* ---- Dots di posizione (D-035) ----------------------------------------
     SOLO mobile/tablet (<48rem). Due implementazioni con lo STESSO stile:
     ① nativa: ::scroll-marker generato via CSS Overflow 5 (Chromium 135+):
        zero nodi extra, semantica "selected" gestita dal browser;
     ② fallback JS (Firefox/Safari): bottoni veri con aria-current.
     Tutto dentro la media query mobile: su desktop né marker né fallback. */
  @media (max-width: 47.99rem) {
    /* ① Nativi: il gruppo viene generato DOPO la traccia dal browser. */
    .car__track {
      scroll-marker-group: after;
    }
    .car__track::scroll-marker-group {
      display: flex;
      justify-content: center;
      gap: 6px;
      padding-block: 8px;
    }
    .car__track > *::scroll-marker {
      content: '';
      display: block;
      block-size: 8px;
      inline-size: 8px;
      border-radius: 50%;
      border: 0;
      padding: 0;
      background: var(--color-text-muted);
      transition: background-color var(--duration-fast) var(--ease-out);
    }
    .car__track > *::scroll-marker:target-current {
      background: var(--color-primary);
      inline-size: 20px; /* pill attiva: più lunga, pattern 2026 */
      border-radius: 99px;
    }

    /* ② Fallback JS: stessi valori del gruppo nativo. */
    .car__dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      padding-block: 8px;
    }
    .car__dots button {
      inline-size: 8px;
      block-size: 8px;
      border-radius: 50%;
      border: 0;
      padding: 0;
      background: var(--color-text-muted);
      cursor: pointer;
      transition: background-color var(--duration-fast) var(--ease-out);
      position: relative;
    }
    /* Target tattile esteso: il bottone è 8px ma l'area cliccabile 40px. */
    .car__dots button::after {
      content: '';
      position: absolute;
      inset: -16px;
    }
    .car__dots button[aria-current='true'] {
      background: var(--color-primary);
      inline-size: 20px;
      border-radius: 99px;
    }
  }

  /* Dove i marker nativi esistono, il fallback JS non deve mai apparire
     (il JS comunque non lo crea: doppia difesa per robustezza). */
  @supports selector(::scroll-marker) {
    .car__dots {
      display: none !important;
    }
  }

  /* Fasce che chiedono più slide anche su mobile (es. Ranking: 3, richiesta
     owner). Regole NON in media query: valgono sotto i 48rem, dove le regole
     desktop (più sotto, stessa specificità) non arrivano. Il peek 24px resta:
     le tracce sottraggono peek + gap (D-035). */
  .car[data-per-view-mobile='2'] .car__track {
    grid-auto-columns: calc((100% - 34px) / 2);
  }

  .car[data-per-view-mobile='3'] .car__track {
    grid-auto-columns: calc((100% - 44px) / 3);
  }  @media (min-width: 48rem) {

    /* Desktop: niente peek (le frecce bastano come affordance) e tracce
       esatte per il numero di slide per vista. */
    .car__track {
      grid-auto-columns: 100%;
    }

    .car[data-per-view='2'] .car__track {
      grid-auto-columns: calc((100% - 10px) / 2);
    }

    .car[data-per-view='3'] .car__track {
      grid-auto-columns: calc((100% - 20px) / 3);
    }

    .car[data-per-view='4'] .car__track {
      grid-auto-columns: calc((100% - 30px) / 4);
    }
  }

  /* Frecce: cerchio 30px, bordo 2px arancio — stile freccia del DB. */
  .car__nav {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    display: none;
    justify-content: space-between;
    align-items: center;
    padding-inline: 6px;
    pointer-events: none;
  }

  @media (min-width: 48rem) and (hover: hover) {
    .car:not(.car--no-arrows) .car__nav {
      display: flex;
    }
    /* Frecce FUORI dalla scheda img+titolo (owner, 2026-09-15): due corsie
       laterali di 40px DENTRO il componente — le frecce (30px) galleggiano
       accanto alle schede senza coprirle, le slide si restringono da sole
       (le % di grid-auto-columns si ricalcolano sulla traccia più stretta).
       Padding interno = nessun rischio di overflow/scrollbar orizzontale. */
    .car:not(.car--no-arrows) {
      padding-inline: 40px;
    }
    .car:not(.car--no-arrows) .car__nav {
      padding-inline: 0;
    }
  }

  .car__arrow {
    pointer-events: auto;
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    color: var(--color-link);
    background-color: var(--color-surface-raised);
    border: 2px solid var(--color-primary);
    border-radius: 40px;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .car__arrow:hover {
    background-color: var(--color-primary);
    color: var(--color-on-brand);
  }

  .car__arrow:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* Pulsante on/off dell'autoplay: piccolo, discreto, sempre raggiabile. */
  .car__toggle {
    position: absolute;
    inset-block-start: calc(-1 * var(--space-2xs));
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-family: var(--font-heading);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    background-color: var(--color-surface-raised);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
  }

  .car__toggle:hover {
    color: var(--color-text);
    border-color: var(--color-border-strong);
  }

  .car__toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .car__toggle .ico-play {
    display: none;
  }

  .car__toggle[aria-pressed='false'] .ico-pausa {
    display: none;
  }

  .car__toggle[aria-pressed='false'] .ico-play {
    display: block;
  }

  .car__toggle[aria-pressed='false'] {
    color: var(--color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .car__track {
      scroll-behavior: auto;
    }
  }


/* ===== src/components/ui/HeroArchivio.astro ===== */

  .hero-arch {
    position: relative;
    display: flex;
    /* Contenuto in basso a sinistra come il live (justify-content: flex-end
       in colonna = il blocco testo tocca il fondo). */
    align-items: flex-end;
    inline-size: 95%; /* emenda D-071: l'owner la vuole più larga */
    margin-inline: auto;
    min-block-size: 36vh; /* emenda D-067: il 25vh del live era troppo basso */
    border-radius: 20px;
    overflow: hidden;
    background-image: url('../images/banner-categoria.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* Overlay scuro 50% (overlay-opacity 0.5 del live): garantisce il
     contrasto del testo bianco su qualunque punto del banner. */
  .hero-arch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
  }

  .hero-arch__testo {
    position: relative; /* sopra l'overlay */
    z-index: 1;
    /* Respiro del blocco testo = margini dell'header live (f3e2232):
       56px sopra, 30px sotto. */
    padding-block: 56px 30px;
    padding-inline: var(--space-lg);
    /* D-072: niente tetto 70ch — la descrizione prende TUTTA la linea
       del box come vuole l'owner (il 70ch la mandava a capo a metà). */
    max-inline-size: none;
  }

  .hero-arch__titolo {
    margin: 0 0 var(--space-xs) 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem); /* 48px al max, come il live */
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-shadow: 4px 6px 0 rgb(0 0 0 / 0.3);
  }

  .hero-arch__descrizione {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.0625rem, 1.2vw, 1.375rem); /* 22px al max */
    font-weight: 400;
    line-height: var(--leading-normal);
    color: #fff;
  }

  @media (max-width: 60rem) {
    .hero-arch {
      /* 95% del contenitore, NON 95vw: l'unità vw include la scrollbar
         verticale (D-070: su webview il box sbordava di 17px). */
      inline-size: 95%;
      min-block-size: 58vh;
    }
    .hero-arch__testo {
      padding-block: 40px 24px;
    }
  }


/* ===== src/components/layout/Header.astro ===== */

  /* Respiro sotto la cornice: 10px COME IL LIVE (owner 2026-09-14 dopo
     le prove a 2px e 4px: si adotta il valore dell'originale). */
  .header {
    padding-block-end: 10px;
  }

  /* --- Barra superiore arancione — misure live verificate 2026-09-14
         (container 02aac84 @1920): larghezza 1900/1920 = margini 10px,
         altezza 36px, top 10px, padding 10px, radius SOLO in alto 10px.
         La riga logo (8b688f3) è attaccata sotto, stessa larghezza, 86px,
         grigio #ECECEC: il loro padding 10px crea l'incavo. --------------- */
  .topbar {
    background-color: var(--color-primary);
    /* D-027: riempimento d'identità (topbar del live) → bianco in light. */
    color: var(--color-on-brand);
    font-family: var(--font-heading);
    border-radius: 10px 10px 0 0;
    margin: 10px 10px 0;
    min-block-size: 2.25rem;
    padding: 0 10px;
    display: flex;
  }

  .topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    inline-size: 100%;
    min-block-size: 2.25rem;
    font-size: 0.625rem;
  }

  /* I tre collegamenti rapidi a sinistra, con doppia chevron come il live
     (10px/500, gap 16px, bianchi su arancione — eccezione di fedeltà D-027). */
  .topbar__links {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .topbar__links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-on-brand);
    font-size: 0.625rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .topbar__links a:hover {
    opacity: 0.8;
  }

  .topbar__links svg {
    flex-shrink: 0;
  }

  .topbar__social {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .topbar__social a {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    color: var(--color-on-brand);
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .topbar__social a:hover {
    opacity: 0.75;
  }

  /* --- Riga principale: logo + menu (live: Poppins 18px weight 300, nero,
         padding 5px 8px, voce attiva sottolineata) ------------------------ */
  /* Riga logo: come il live (8b688f3) — attaccata alla topbar, stessa
     larghezza (margini 10px), grigio #ECECEC, 86px, radius in basso. */
  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-block-size: 5.375rem;
    margin: 0 10px;
    /* 8px sopra + 12px sotto + logo 66px = 86px come il live. */
    padding-block: var(--space-2xs) 0.75rem;
    background-color: var(--surface-header);
    border-radius: 0 0 10px 10px;
  }

  .header__brand {
    margin-inline-end: auto;
    flex-shrink: 0;
  }

  .header__brand img {
    inline-size: auto;
    /* Altezza logo del live (regola `elementor-element-5a5a6fa img`):
       66px con object-fit cover. */
    block-size: 4.125rem;
    object-fit: cover;
  }

  .header__nav {
    display: none;
  }

  .header__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .header__item {
    position: relative;
  }

  .header__list a {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 300;
    padding-block: var(--space-2xs);
  }

  /* Sottomenu a discesa (solo desktop): dropdown come nel live
     (#E6E6E6, bordo arancione 1px, radius 8px, ombra 0 0 30px nero 50%). */
  .header__sub {
    display: none;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 100%;
    z-index: var(--z-sticky);
    min-inline-size: 14rem;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--surface-menu);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 0.5);
  }

  .header__sub a {
    padding: 0.8125rem 1.125rem;
    font-size: var(--text-sm);
    border-block-end: 1px solid rgb(0 0 0 / 0.08);
  }

  .header__item:hover .header__sub,
  .header__item:focus-within .header__sub {
    display: block;
  }

  .header__list a:hover,
  .header__list a[aria-current='page'] {
    color: var(--color-link);
  }

  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  /* Ricerca (D-079): pill con lente + etichetta su desktop, solo icona su
     mobile (dove il live mostra le sole icone). Stessa altezza dei toggle. */
  .header__search {
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: auto;
    block-size: 2.75rem;
    padding-inline: 12px;
    border-radius: var(--radius-full);
    /* Bordo arancione SEMPRE visibile (richiesta owner 2026-09-17): il
       bordo neutro era poco distinguibile, il pulsante sembra assente. */
    border: var(--border-width) solid var(--color-primary);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
  }

  .header__search:hover {
    color: var(--color-link);
    border-color: var(--color-primary-hover);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  }

  .header__search:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .header__search-label {
    display: none;
  }

  .header__search-kbd {
    display: none;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    color: var(--color-text-muted);
  }

  @media (min-width: 48rem) {
    .header__search-label {
      display: inline;
    }

    .header__search-kbd {
      display: inline-block;
    }
  }

  .header__toggle {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-full);
    color: var(--color-text);
    border: var(--border-width) solid var(--color-border);
  }

  /* Toggle tema (D-024): summary-as-button con popover nativo.
     Mostra l'icona del tema CORRENTE: sole in light, luna in dark.
     In dark summary e pannello restano leggibili per contrasto. */
  .theme {
    position: relative;
    display: inline-grid;
  }

  /* Il summary fa da bottone: via il marcatore triangolare del browser. */
  .theme summary {
    list-style: none;
  }

  .theme summary::-webkit-details-marker {
    display: none;
  }

  .theme summary:focus-visible,
  .theme__opt input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .theme__panel {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: var(--z-sticky);
    display: grid;
    gap: 2px;
    min-inline-size: 11rem;
    padding: var(--space-3xs);
    background-color: var(--surface-menu);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 0.5);
  }

  .theme__opt {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
  }

  .theme__opt:hover {
    background-color: var(--color-surface);
  }

  .theme__ico--moon {
    display: none;
  }

  [data-theme='dark'] .theme__ico--sun {
    display: none;
  }

  [data-theme='dark'] .theme__ico--moon {
    display: block;
  }

  /* Tema "Automatico" (nessun data-theme): l'icona segue la preferenza
     di sistema, come i colori risolti da light-dark(). */
  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .theme__ico--sun {
      display: none;
    }

    html:not([data-theme]) .theme__ico--moon {
      display: block;
    }
  }

  /* Menu mobile: pannello in top layer, stile dropdown del live. */
  .header__mobile {
    position: fixed;
    inset: 0 0 auto 0;
    margin: 0;
    max-block-size: calc(100svh - 1rem);
    overflow-y: auto;
    padding: var(--space-md) var(--space-gutter) var(--space-xl);
    background-color: var(--surface-menu);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 0.5);
  }

  .header__mobile:not(:popover-open) {
    display: none;
  }

  .header__mobile::backdrop {
    background-color: rgb(0 0 0 / 0.4);
  }

  .header__mobile-sub {
    list-style: none;
    margin: 0;
    padding-inline-start: var(--space-md);
  }

  .header__mobile-sub a {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* D-134: nel menu mobile le categorie PRINCIPALI in grassetto, le
     sottocategorie restano light + muted: gerarchia leggibile a colpo
     d'occhio. Solo mobile: il desktop condivide .header__list e lì le
     voci restano come sono. */
  .header__mobile > .header__list > li > a {
    font-weight: 700;
  }

  /* Su schermi piccoli i margini della cornice scendono a 6px e il logo
     si riduce: a dimensione fissa (66px ≈ 266px di larghezza) esce dalla
     viewport di 375px insieme ai due toggle (overflow 17px misurato). */
  @media (max-width: 30rem) {
    /* D-211: da telefono la topbar arancione (link rapidi «Torna alla
       Home / Chi Siamo / Partnership» + icone social) NON compare: riga
       da 36px con testo a 10px, poco leggibile e poco utile al touch —
       gli stessi percorsi restano nel menu burger e nel footer. Il markup
       non cambia (nessun rischio di cache HTML): la regola è solo CSS.
       Rimane visibile da tablet in su. La cornice resta composta dalla
       sola riga logo: ripristino il distacco superiore (lo dava il
       margin-top della topbar) e il radius completo sui 4 angoli. */
    .topbar {
      display: none;
    }

    .header__inner {
      margin-block-start: 10px;
      border-radius: 10px;
    }

    .topbar,
    .header__inner {
      margin-inline: 6px;
    }

    .header__brand {
      flex-shrink: 1;
      min-inline-size: 0;
    }

    .header__brand img {
      block-size: 3rem; /* 48px: leggibile, lascia spazio ai toggle */
      max-inline-size: 100%;
    }

    .header__actions {
      flex-shrink: 0;
    }
  }

  /* Da tablet in su: lista orizzontale, sottomenu a discesa. */
  @media (min-width: 60rem) {
    .header__nav {
      display: block;
    }

    .header__list {
      flex-direction: row;
      gap: var(--space-xs);
    }

    .header__list a {
      padding: 5px 8px;
      font-size: var(--text-lg);
    }

    /* Voce attiva: sottolineatura arancione come il pointer del live. */
    .header__item.is-active > a {
      box-shadow: inset 0 -2px 0 0 var(--color-primary);
    }

    /* Su desktop si nasconde SOLO il burger (il nav è orizzontale):
       il toggle tema resta visibile — difetto D-026: condivideva la
       classe header__toggle e spariva insieme al menu mobile. */
    .header__burger,
    .header__mobile {
      display: none;
    }
  }


/* ===== src/components/layout/Footer.astro ===== */

  /* D-240: restyling leggibilità (best practice UX 2026): raggruppamenti
     chiari con etichette uppercase, newsletter come colonna di conversione
     a destra, barra bottom con copyright a sinistra e link legali a destra.
     Contrasti verificati col metodo numerico oklch→sRGB (D-237c):
     testo n900/n100 ≥13:1, muted n600/n400 ≥4.89:1, brand-500 SOLO accento
     (2.33:1 su #d8d8d8), CTA primary+on-primary 6.07:1 light / 8.35:1 dark. */
  .footer {
    /* Rosso messaggi con contrasto AA SUI FONDI DEL FOOTER: --color-danger
       del tema farebbe 3.37:1 su #d8d8d8 e 4.11:1 sul fondo dark. */
    --footer-danger: light-dark(oklch(0.5 0.21 29), oklch(0.68 0.19 29));

    /* D-240b: ritmo verticale compatto su richiesta owner («il footer prende
       troppo spazio»): niente space-xl interni. */
    margin-block-start: var(--space-lg);
    background-color: var(--footer-bg);
    padding-block: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
  }

  .footer__grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
  }

  @media (min-width: 60rem) {
    .footer__grid {
      /* Live: colonna descrizione più larga; la NEWSLETTER occupa la
         colonna destra (D-240: richiesta owner «a dx»). */
      grid-template-columns: 1.4fr 1fr 1.2fr;
      gap: var(--space-lg);
    }
  }

  .footer__logo {
    display: inline-block;
    margin-block-end: var(--space-2xs);
  }

  .footer__logo img {
    inline-size: min(15rem, 100%);
    block-size: auto;
  }

  .footer__desc {
    margin: 0;
    max-inline-size: 46ch;
    color: var(--color-text);
    line-height: var(--leading-relaxed);
  }

  /* D-240b: seconda riga arricchisce il blocco brand (testo «spoglio»),
     muted per gerarchia: n600 su #d8d8d8 = 4.89:1 (AA, D-237c). */
  .footer__claim {
    margin: var(--space-2xs) 0 0;
    max-inline-size: 46ch;
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
  }

  /* Social: target touch ≥44px (icona 18px + padding), accent brand al
     passaggio — il brand-500 come colore di STATO resta ≥3:1 (1.4.11). */
  .footer__social {
    display: flex;
    gap: var(--space-3xs);
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
  }

  .footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-full);
    color: var(--color-text);
    transition: color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out);
  }

  .footer__social a:hover {
    color: var(--color-primary-hover);
    background-color: light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.08));
  }

  .footer__social a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* Intestazioni di gruppo: piccole, spaziate, muted (4.89:1 su #d8d8d8):
     guidano la scansione senza competere col logo (NN/g footers). */
  .footer__heading {
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* Righe di ~41px: target touch comodi senza che la colonna diventi lunga. */
  .footer__list {
    display: grid;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer__list a {
    display: inline-block;
    padding-block: 0.35rem;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  /* D-240b: su touch si allargano le righe (target ~30px+): la compattezza
     vale su desktop/mouse, su mobile resta il comfort di tocco. */
  @media (pointer: coarse) {
    .footer__list a {
      padding-block: 0.5rem;
    }
  }

  .footer__list a:hover {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .footer__list a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Newsletter (colonna destra): pannello interno che stacca il blocco
     dalla fascia grigia senza colori fuori token. */
  .footer__newsletter {
    padding: var(--space-sm);
    border: 1px solid light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1));
    border-radius: var(--radius-lg);
    background-color: light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.04));
  }

  .footer__newsletter-desc {
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
  }

  .footer__form {
    display: grid;
    gap: var(--space-xs);
  }

  .footer__riga {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .footer__input {
    flex: 1 1 12rem;
    min-inline-size: 0;
    padding: 0.65rem 0.75rem;
    font: inherit;
    color: var(--color-text);
    background-color: light-dark(rgb(255 255 255 / 0.85), rgb(0 0 0 / 0.25));
    border: 1px solid light-dark(rgb(0 0 0 / 0.25), rgb(255 255 255 / 0.25));
    border-radius: var(--radius-sm);
  }

  .footer__input::placeholder {
    color: var(--color-text-muted);
  }

  .footer__input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* CTA: primary + on-primary = 6.07:1 light / 8.35:1 dark (D-237c). */
  .footer__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-on-primary);
    background-color: var(--color-primary);
    border: 0;
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .footer__submit:hover {
    background-color: var(--color-primary-hover);
  }

  .footer__submit:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .footer__consenso {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--color-text);
  }

  .footer__consenso input {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: 0.15rem;
    accent-color: var(--color-primary);
  }

  .footer__consenso a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .footer__consenso a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Messaggi JS (validazione client): stati marcati con data-stato. */
  .footer__form-msg {
    margin: 0;
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
  }

  .footer__form-msg[data-stato='errore'] {
    color: var(--footer-danger);
    font-weight: 600;
  }

  .footer__form-msg[data-stato='ok'] {
    color: var(--color-text);
    font-weight: 600;
  }

  /* D-243: niente SECONDA banda — la riga copyright sta nella prima fascia,
     subito dopo le colonne: footer più compatto.
     D-245 (richiesta owner): i link legali sono spostati in «Informazioni»,
     la riga resta con solo ©+credito e ora è CENTRATA. */
  .footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs) var(--space-md);
    margin-block-start: var(--space-sm);
    color: var(--color-text-muted);
  }

  .footer__copyright {
    margin: 0;
  }

  /* D-245: «Developed by Asura» resta sulla riga del ©, che ora è centrata. */
  .footer__copyright strong {
    font-weight: 600;
    color: var(--color-text);
  }

  /* D-245: Privacy Policy e «Preferenze cookie» stanno nella lista
     «Informazioni»: il pulsante si comporta come le voci adiacenti
     (stesse righe ~41px, hover brand, focus-visible coerente). */
  .footer__list .footer__preferenze {
    display: inline-block;
    padding: 0;
    padding-block: 0.35rem;
    font: inherit;
    color: var(--color-text);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
  }

  /* D-245: su touch si allinea al padding delle voci lista (0.5rem). */
  @media (pointer: coarse) {
    .footer__list .footer__preferenze {
      padding-block: 0.5rem;
    }
  }

  .footer__list .footer__preferenze:hover {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .footer__list .footer__preferenze:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
  }


/* ===== src/components/blocks/Section.astro ===== */

  /* Gli stili condivisi di .section* stanno in layout.css (fonte di verità
     D-011). Qui solo la variante surface. */
  .section[data-variant='surface'] {
    /* #E7E7E7 misurato sul live (D-013): non --color-surface, che è più chiaro. */
    background-color: var(--band-bg, var(--color-surface));
  }

  /* Riga titolo + "Vedi tutto" (D-024, ispirato ad Anime Corner): il link
     sta sulla STESSA base del titolo, allineato al bordo destro. */
  .section__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .section__view-all {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-link); /* testo brand: leggibile su fascia grigia (D-027) */
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .section__view-all:hover {
    text-decoration: underline;
  }

  .section__view-all:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }


/* ===== src/components/blocks/HeroSplit.astro ===== */

  .hero__cols {
    display: grid;
    gap: var(--space-lg);
  }

  @media (min-width: 60rem) {
    .hero__cols {
      grid-template-columns: 2fr 1fr;
      /* Stretch (default): la colonna più corta (Vetrina) si allunga fino alla
         rail, che con 2 card è più alta — così il carosello non lascia spazio
         bianco sotto (owner 2026-09-14). */
      align-items: stretch;
    }
  }

  /* Colonna Vetrina: flex verticale per distribuire l'altezza header →
     carosello (il track riceve flex:1 sotto) → toggle. */
  .hero__main {
    display: flex;
    flex-direction: column;
  }

  /* Il carosello occupa tutto lo spazio sotto l'header; il track si estende
     sulla piena altezza e la riga delle slide la riempie: con le card in
     stretch la copertina assorbe la differenza e la colonna arriva al fondo
     della rail, senza spazio bianco (owner 2026-09-14). I selettori
     discendenti sono :global perché la root del carosello è di un altro
     componente (non porta lo scope di questo file). */
  .hero__main .car {
    flex: 1 1 auto;
    min-block-size: 0;
  }

  .hero__main .car__track {
    block-size: 100%;
    grid-auto-rows: 100%;
  }

  .hero__header {
    margin-block-end: var(--space-sm);
  }

  /* Titolo + "Vedi tutto" sulla stessa base (D-024, pattern Anime Corner). */
  .hero__title-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
  }

  .hero__view-all {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-link); /* testo brand: leggibile su fascia grigia (D-027) */
    text-decoration: none;
  }

  .hero__view-all:hover {
    text-decoration: underline;
  }

  .hero__view-all:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .hero__rail {
    container-type: inline-size;
  }

  /* La rail è una pila verticale compatta: più scansionabile di un
     mini-carosello e senza alcun JavaScript. Con righe uguali (1fr) le due
     card si spartiscono equamente l'altezza della colonna: la rail definisce
     l'altezza della fascia, la Vetrina si allunga (owner 2026-09-14). */
  .hero__stack {
    display: grid;
    gap: 10px;
    grid-auto-rows: 1fr;
    align-content: start;
  }


/* ===== src/components/blocks/ListFeatured.astro ===== */

  .news__banner {
    display: block;
    margin-block-end: var(--space-md);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .news__banner img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* Griglia 4×4 come il live: 4 colonne da desktop, 2 da tablet, 1 mobile. */
  .news__grid {
    display: grid;
    gap: 15px; /* row_gap del loop-grid notizie del DB */
  }

  @media (min-width: 48rem) {
    .news__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 75rem) {
    .news__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }


/* ===== src/components/blocks/Palinsesto.astro ===== */

  /* 2×2 da tablet in su, 1 colonna su mobile: card grandi e leggibili. */
  .palinsesti__grid {
    display: grid;
    gap: 15px; /* row_gap del loop-grid del DB */
  }

  @media (min-width: 48rem) {
    .palinsesti__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }


/* ===== src/components/blocks/PalinsestoGrid.astro ===== */

  /* ==========================================================================
     CSS PORTATO DAL PLUGIN AniPal (assets/css/hikaru-anipal-grid.css +
     hikaru-anipal-search.css): stesse classi, stesse misure, stessi
     breakpoint. I colori passano dai token del sito: in LIGHT coincidono
     con i valori esatti del plugin, in DARK usano la palette scura del
     progetto. Niente !important (non c'è Elementor) e niente regole
     globali su html/body (overflow gestito dal sito, D-049).
     ========================================================================== */

  /* --- 1. GRIGLIA PRINCIPALE -------------------------------------------- */
  .anipal-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
    /* Niente align-items: start (era del plugin): con l'allineamento di
       default (stretch) le card della STESSA RIGA hanno la stessa altezza,
       come ogni griglia di card nel sito. */
  }

  /* --- 2. CARD ----------------------------------------------------------- */
  .anipal-card {
    background: var(--color-card-tint); /* plugin: #e6e6e6 */
    border: 1px solid var(--border-card); /* plugin: #030303 */
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    min-width: 0;
    width: 100%; /* il valore fisso 680px del plugin è morto: ogni media query lo sovrascrive */
    height: auto;
  }
  /* D-058 — FIX FILTRI: i filtri nascondono le card con l'attributo
     hidden, ma display:flex qui sopra (author style) batte la regola
     UA [hidden]{display:none}: le card filtrate restavano VISIBILI e
     la griglia "non si aggiornava". Regola esplicita necessaria. */
  .anipal-card[hidden] {
    display: none;
  }

  /* Il corpo assorbe l'altezza extra quando la riga si allunga sulla card
     più alta: le zone dati respirano invece di lasciare vuoto in fondo. */
  .anipal-card-body {
    flex: 1 1 auto;
  }

  /* --- HEADER ------------------------------------------------------------ */
  .anipal-card-header {
    margin-bottom: 8px;
  }
  .anipal-main-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text); /* plugin: #0f172a */
    margin: 0 0 6px 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: zoom-in; /* D-058: cliccabile per mostrare il titolo intero */
  }
  /* D-058: click su titolo troncato => testo completo su righe illimitate */
  .anipal-main-title.is-expanded {
    display: block;
    cursor: zoom-out;
  }
  .anipal-main-title.is-expanded + .anipal-header-divider {
    border-color: var(--color-primary); /* segnale visivo dello stato aperto */
  }
  /* Titoli dati (Romaji/Kanji/Studio): stesso comportamento; solo quelli
     davvero troncati ricevono l'affordance (aggiunta via JS). */
  .anipal-data-list li.is-expanded {
    display: block;
    cursor: zoom-out;
  }
  .anipal-data-list li.is-clampable {
    cursor: zoom-in;
  }
  .anipal-header-divider {
    border: none;
    height: 2px;
    background-color: var(--color-primary); /* plugin: #fa5403 */
    margin: 6px 0 8px 0;
  }
  .anipal-genres-row {
    display: flex;
    flex-wrap: nowrap; /* D-056: una sola riga di pill (max 3 + "+N" dal markup) */
    gap: 4px;
    margin-bottom: 6px;
    min-width: 0;
  }
  .anipal-genres-row .genre-pill {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-primary); /* plugin: #fa5403 */
    background-color: transparent;
    border: 1px solid var(--color-primary);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap; /* il singolo genere non va mai a capo */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px; /* i nomi lunghissimi troncano dentro la pill */
  }
  .anipal-genres-row .genre-pill--extra {
    display: none; /* D-058: visibili solo dopo il click su "+N" */
  }
  .anipal-genres-row.is-expanded .genre-pill--extra {
    display: inline-block;
  }
  .anipal-genres-row.is-expanded .genre-pill--altro {
    display: none; /* aperto: il numero scompare, restano i generi */
  }
  .anipal-genres-row .genre-pill--altro {
    background: transparent;
    border-style: dashed;
    cursor: pointer; /* D-058: è un vero bottone */
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
  }

  /* --- CORPO (TESTO E COVER) --------------------------------------------- */
  /* Grid con colonne proporzionate (D-054): la colonna dati prende la
     larghezza in eccesso delle card larghe (desktop) invece di lasciarla
     alla sola cover fissa 200px del plugin — i dati vanno a capo meno,
     la card si accorcia e risulta meno rettangolare sui laptop 15". */
  .anipal-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
    flex: 1 1 auto; /* assorbe l'altezza extra della riga: niente vuoti in fondo */
  }
  .anipal-col-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .anipal-col-info-inner {
    display: flex;
    flex-direction: column;
  }
  .anipal-data-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .anipal-data-list li {
    font-size: 14px;
    line-height: 1.35;
    padding: 5px 0;
    border-bottom: 1px solid var(--color-border-strong); /* plugin: #c5cbd3 */
    word-break: break-word;
    /* D-056: 1 riga fissa — i titoli lunghi troncano con ellissi
       (tooltip via attributo title): l'altezza delle card non dipende
       più dalla lunghezza dei titoli. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .anipal-data-list li:last-child {
    border-bottom: none;
  }
  .anipal-data-list .lbl {
    font-weight: 700;
    color: var(--color-link); /* plugin: #fa5403 (testo: D-025 6.22:1) */
    display: inline;
    margin-right: 4px;
  }
  .anipal-data-list .val {
    color: var(--color-text); /* plugin: #334155 */
    display: inline;
  }

  /* --- COLONNA COVER (riavvicinata alla riga arancione, come il plugin) -- */
  .anipal-col-cover {
    align-self: start; /* la cover NON si stira fino all'altezza della riga */
    margin-top: -35px;
  }
  .anipal-col-cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 460 / 650; /* rapporto poster del plugin: copertine uniformi */
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  }
  .anipal-no-cover {
    width: 100%;
    height: 100%;
    aspect-ratio: 460 / 650;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
  }

  /* --- RIGA STATUS & COUNTDOWN -------------------------------------------- */
  /* Figlia DIRETTA della card (D-055): larga quanto tutta la scheda,
     testo "Prossimo episodio" a sinistra e badge di stato sulla STESSA
     riga, centrati verticalmente. */
  .anipal-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
    background: var(--color-surface); /* plugin: #dcdfe4 */
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border-strong); /* plugin: #c5cbd3 */
  }
  .anipal-countdown-bar {
    font-size: 12px;
    color: var(--color-text); /* plugin: #334155 */
    line-height: 1.2;
  }
  .anipal-countdown-bar strong {
    font-variant-numeric: tabular-nums;
  }
  .anipal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-card); /* plugin: #000000 */
    background: var(--color-surface-raised); /* plugin: #ffffff */
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .anipal-status-badge .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
  }
  /* Puntini di stato: colori letterali del plugin (leggibili su entrambi i temi) */
  .anipal-status-badge.status-airing .status-dot {
    background-color: #10b981;
    animation: anipal-pulse 1.5s infinite;
  }
  .anipal-status-badge.status-upcoming .status-dot {
    background-color: #0284c7;
  }
  .anipal-status-badge.status-finished .status-dot {
    background-color: #64748b;
  }
  .anipal-status-badge.status-paused .status-dot {
    background-color: #ef4444;
  }
  @keyframes anipal-pulse {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
      transform: scale(1.1);
      box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .anipal-status-badge.status-airing .status-dot {
      animation: none;
    }
  }

  /* --- TRAMA -------------------------------------------------------------- */
  .anipal-synopsis-wrapper {
    position: relative;
    max-height: 56px;
    overflow: hidden;
    margin-bottom: 12px;
    cursor: pointer;
    transition: max-height 0.3s ease;
  }
  .anipal-synopsis-wrapper.is-open {
    max-height: 1000px;
  }
  .anipal-synopsis-text {
    font-size: 12.5px;
    color: var(--color-text-muted); /* plugin: #475569 */
    line-height: 1.45;
  }
  .anipal-synopsis-text p {
    margin: 0;
  }
  .anipal-synopsis-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom, transparent, var(--color-card-tint));
  }
  .anipal-synopsis-wrapper.is-open .anipal-synopsis-fade {
    display: none;
  }
  .anipal-synopsis-wrapper:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
  /* Indicatore visibile dell'affordance (D-052, NN/g: l'interattività non
     può essere solo il cursore): etichetta in basso a destra sopra il
     fade, chevron ruotato da aperta. pointer-events none: il click passa
     al wrapper (che È il bottone). */
  .anipal-synopsis-toggle {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-link);
    background: var(--color-card-tint);
    border: 1px solid var(--color-border);
    border-block: none;
    border-radius: 8px 8px 0 0;
    pointer-events: none;
  }
  .anipal-synopsis-toggle svg {
    transition: transform 0.2s var(--ease-out);
  }
  .anipal-synopsis-wrapper.is-open .anipal-synopsis-toggle svg {
    transform: rotate(180deg);
  }

  /* --- PULSANTE SCHEDA ----------------------------------------------------- */
  /* Figlio DIRETTO della card (D-055): display:block => larga quanto la scheda. */
  .anipal-btn-scheda {
    background-color: var(--color-primary); /* plugin: #fa5403 */
    color: #ffffff;
    text-align: center;
    padding: 10px 0;
    margin: 4px 0 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s ease;
  }
  .anipal-btn-scheda:hover {
    background-color: var(--color-primary-hover); /* plugin: #d94602 */
  }

  /* --- ACCORDION TRAILER ---------------------------------------------------- */
  .anipal-trailer-toggle {
    width: 100%;
    background: var(--color-surface); /* plugin: #f1f5f9 */
    border: 1px solid var(--color-border-strong); /* plugin: #cbd5e1 */
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text); /* plugin: #1e293b */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .anipal-trailer-content {
    margin-top: 8px;
  }
  .iframe-responsive-container {
    position: relative;
    /* D-057: 16:9 (il rapporto dei trailer YouTube) al posto del
       padding-bottom:40% del plugin (2.5:1): il video riempie tutto il
       contenitore a piena larghezza card, senza bande nere laterali. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
  }
  /* D-058-bis: selettori in forma discendente (SENZA il pezzo finale
     [data-astro-cid]): l'iframe è creato via JS al primo click, quindi
     NON porta l'attributo di scope di Astro — con il selettore scoped la
     regola w/h/position non gli arrivava e il player restava a 300x150
     dentro il box nero 16:9 (lo "spazio nero" visto dall'owner). */
  .iframe-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ==========================================================================
     RICERCA (assets/css/hikaru-anipal-search.css)
     ========================================================================== */
  .anipal-search-wrapper {
    width: 100%;
    margin-bottom: 30px;
  }
  .anipal-search-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text); /* plugin: #111 */
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary); /* plugin: #ff7a00 */
  }
  .anipal-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    align-items: flex-end;
  }
  .filter-field {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
  }
  .filter-field.field-full-width {
    flex: 1 1 100%;
  }
  .filter-field label,
  .genres-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted); /* plugin: #888 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  .filter-field select,
  .filter-field input[type='text'] {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--color-border-strong); /* plugin: #ccc */
    border-radius: 4px;
    background: var(--color-surface-raised); /* plugin: #fff */
    font-size: 13px;
    color: var(--color-text); /* plugin: #333 */
    box-sizing: border-box;
  }
  .filter-field input:focus-visible,
  .filter-field select:focus-visible,
  .anipal-search-btn:focus-visible,
  .btn-toggle-genres:focus-visible,
  .pal-reset:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
  .input-search-icon-wrapper {
    position: relative;
    width: 100%;
  }
  .input-search-icon-wrapper input[type='text'] {
    padding: 0 12px 0 48px;
  }
  .input-search-icon-wrapper .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0.5;
  }

  /* Dropdown generi + pills selezionate */
  .genres-container {
    position: relative;
  }
  .genres-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .genres-label {
    margin: 0;
    line-height: 1;
  }
  .btn-toggle-genres {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary); /* plugin: #fa5403 */
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    line-height: 1.2;
  }
  .btn-toggle-genres:hover {
    background-color: #0335a1; /* hover blu del plugin */
  }
  .selected-genres-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  /* Pill JS-created: serve :global (l'elemento non esiste nel markup Astro) */
  .selected-genres-pills .genre-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0284c7;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
  }
  .selected-genres-pills .genre-pill .remove-pill {
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    opacity: 0.8;
    margin-left: 2px;
    font-size: 12px;
  }
  .selected-genres-pills .genre-pill .remove-pill:hover {
    opacity: 1;
    color: #fca5a5;
  }
  .genres-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-width: 400px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--color-surface-raised); /* plugin: #ffffff */
    border: 1px solid var(--color-border-strong); /* plugin: #cbd5e1 */
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    box-sizing: border-box;
  }
  .genres-dropdown.open {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .genre-option-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--color-surface); /* plugin: #f1f5f9 */
    color: var(--color-text); /* plugin: #334155 */
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
  }
  .genre-option-item:hover {
    background: var(--color-border); /* plugin: #e2e8f0 */
  }
  .genre-option-item.selected {
    background: #0284c7;
    color: #ffffff;
  }

  /* Azioni form (conto + Azzera; i filtri sono live, niente Apply) */
  .pal-azioni {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .pal-conto {
    margin: 0;
    margin-inline-end: auto;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }
  .pal-reset {
    height: 42px;
    padding: 0 18px;
    background: transparent;
    color: var(--color-link);
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  /* Messaggi vuoti */
  .anipal-no-results {
    color: var(--color-text-muted);
    padding: 24px;
    text-align: center;
    border: 1px dashed var(--color-border-strong);
    border-radius: 12px;
  }
  .pal-nessuno {
    margin-block-start: 16px;
  }

  /* ==========================================================================
     BREAKPOINTS RESPONSIVE — struttura del plugin, colonne desktop corrette
     su richiesta owner (2026-09-15): 3 SCHEDE A RIGA su TUTTO il desktop
     (il plugin aveva 2 colonne tra 1025-1599px: con lo scaling di Windows
     un monitor 1920 fisico ≈ 1536px CSS cadeva lì e mostrava 2 colonne).
     ========================================================================== */

  /* DESKTOP (≥1025px) → 3 colonne. Cover ridotta sui laptop stretti:
     a 1025px la colonna è ~290px e la cover 200px del plugin lascerebbe
     ~90px alle informazioni. */
  @media screen and (min-width: 1025px) {
    .anipal-grid-container {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    /* Con la barra a larghezza piena il wrap è solo una valvola di sicurezza */
    .anipal-status-bar {
      flex-wrap: wrap;
    }
    .anipal-countdown-bar {
      font-size: 11px;
    }
  }

  /* Monitor ampi (≥1400px): colonne larghe (~450px+), cover piena 200px
     con il riavvicinamento -35px del plugin. */
  @media screen and (min-width: 1400px) {
    .anipal-grid-container {
      gap: 20px;
    }
  }

  /* 3. Tablet / desktop medio (601-1024) → 2 colonne, cover ridotta */
  @media screen and (min-width: 601px) and (max-width: 1024px) {
    .anipal-grid-container {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .anipal-card {
      padding: 10px;
    }
    .anipal-card-body {
      gap: 10px;
    }
    .anipal-data-list li {
      font-size: 13px;
      padding: 3px 0;
    }
    .anipal-status-bar {
      padding: 4px 6px;
    }
    .anipal-countdown-bar {
      font-size: 11px;
    }
  }

  /* 4. Mobile (< 600px) → 1 colonna, cover sopra i dati, GRANDE:
     quasi tutta la larghezza card (giusta per i poster e il primo
     elemento che l'occhio cerca su mobile, prassi 2026). */
  @media screen and (max-width: 600px) {
    .anipal-grid-container {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .anipal-card {
      padding: 10px;
    }
    .anipal-card-body {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    /* Cover sopra i dati (era column-reverse con flex): grid con order */
    .anipal-col-cover {
      order: -1;
      width: 100%;
      max-width: none;
      margin: 0;
    }
    .anipal-col-info {
      width: 100%;
    }
  }


/* ===== src/components/blocks/SplitBand.astro ===== */

  .band {
    padding-block: var(--space-section);
    background-color: var(--band-bg);
  }

  .band__cols {
    display: grid;
    gap: var(--space-md);
    /* Le colonne (LinkList/Recensioni) adattano le righe con @container:
       qui il contesto, nelle colonne la risposta. */
    container-type: inline-size;
  }

  @media (min-width: 60rem) {
    .band__cols {
      grid-template-columns: 1fr 1fr; /* colonne al 50%: eba3d7f/ae04079, 7c57d23/2e458bf */
    }
  }


/* ===== src/components/templates/ArticoloPage.astro ===== */

  /* ---- Cornice 89% come il live (container article/aside 1689px @1920).
     NON usa la classe .container: quella limita a 1140px, il post singolo
     del live lavora all'89% della viewport (min 95vw su mobile). ---------- */
  .art__frame {
    width: min(89%, 100% - 40px);
    margin-inline: auto;
    padding-block-end: var(--space-xl);
    /* Container per le @container dei blocchi interni (pattern del progetto:
     il container è l'antenato, mai l'elemento interrogato). */
    container-type: inline-size;
  }

  /* ---- 1. HERO ----------------------------------------------------------- */
  .art__hero {
    position: relative;
    min-block-size: 55vh;
    border-radius: 20px;
    overflow: clip;
    display: grid;
    align-items: end;
  }
  /* Variante "classifica" e "ranking-giappone" (D-041/D-047, richiesta owner
     2026-09-15): le copertine
     sono banner 2560×780 generati dal CMS con il titolo scritto nell'immagine.
     Il box 55vh li INGRANDIVA (object-fit: cover) tagliando i bordi dove
     passano le scritte: portiamo lo zoom leggermente indietro allineando il
     rapporto del box a quello del banner — immagine intera, zero tagli,
     a qualunque larghezza desktop. Solo variante classifica, solo desktop:
     da mobile il box è verticale e il taglio laterale è inevitabile. */
  @container (min-width: 60rem) {
    .art__hero--banner {
      min-block-size: 0;
      aspect-ratio: 2560 / 780;
    }
  }
  .art__hero-overlay {
    position: absolute;
    inset: 0;
    /* Scrim "floor fade" (D-037, best practice NN/g 2026): quasi trasparente
       in alto — la copertina è viva e luminosa — che si approfondisce SOLO in
       basso dietro al testo, dove il contrasto serve (richiesta owner: il box
       era ancora troppo scuro a tinta unita). */
    background: linear-gradient(
      to bottom,
      #00000014 0%,
      #00000026 45%,
      #000000a6 78%,
      #000000cc 100%
    );
  }
  /* Sfocatura LEGGERA (5px) della sola fascia bassa (NN/g: la parte bassa
       della foto si presta a blur/floor-fade): dietro a pill e data l'immagine
       diventa uniforme e i testi leggibili senza scurire il box. */
  .art__hero-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .art__hero-img::after {
    /* In CSS un ::after sull'IMG non esiste: usiamo un layer dedicato. */
    content: none;
  }
  .art__hero-sfoca {
    /* Sfocatura leggera solo della fascia bassa: mask dichiara DOVE il blur
       è visibile (trasparente sopra, pieno in basso); backdrop-filter lo
       applica. Layer separato dall'overlay per regolare indipendentemente. */
    position: absolute;
    inset: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    mask-image: linear-gradient(to bottom, transparent 55%, black 85%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 55%, black 85%);
    pointer-events: none;
  }
  .art__hero-testo {
    position: relative;
    padding: var(--space-lg);
    text-align: left; /* titolo da sinistra (owner, 2026-09-15) */
    display: grid;
    justify-items: start;
    gap: var(--space-xs);
  }
  .art__meta {
    /* Pills + data SOTTO il titolo, affiancate su una riga (owner). */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
  }
  .art__pill {
    /* Arancione pill del live (#FF6600), distinto dall'arancione header. */
    background-color: #ff6600;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 15px;
    text-decoration: none;
  }
  .art__pill:focus-visible,
  .relay__way:focus-visible,
  .toc__somario:focus-visible,
  .toc a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
  .art__data {
    color: #ffffffe6;
    font-size: 0.9375rem;
    margin: 0;
  }
  .art__titolo {
    color: #ffffff;
    font-family: var(--font-sans);
    font-weight: 700; /* pieno: a riga unica più piccola mantiene la presenza (owner, 2026-09-15) */
    /* Una riga da PC in giù (D-037): il clamp scende fino a ~26px su tablet
       (3.8vw a 700px ≈ 26.6px) e arriva a 30px su desktop. */
    font-size: clamp(1.625rem, 2.3vw, 1.875rem); /* 26→30px */
    line-height: 1.2;
    margin: 0;
    white-space: nowrap; /* una riga: con overflow hidden non spacca mai il layout */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 47.99rem) {
    /* Mobile: la riga unica è impossibile (85 caratteri su 390px ≈ 8px):
       si torna a capo, titolo corto e leggibile. */
    .art__titolo {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-size: clamp(1.375rem, 5.5vw, 1.625rem); /* 22→26px */
    }
  }

  /* Sottotitolo editoriale nell'hero (D-156): sotto il titolo, prima delle
     pills. Bianco attenuato come le etichette dell'overlay, una riga con
     ellipsis su desktop (coerenza col titolo a riga unica), a capo su mobile. */
  .art__sotto {
    margin: 2px 0 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.4;
    color: #ffffffe6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;
  }
  @media (max-width: 47.99rem) {
    .art__sotto {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
  }

  /* ---- 2. RELAY: 5 celle uniformi col BRAND COLOR di ciascun servizio, come
     il live (radius 15px,
     39px alti, font 18px/700; sfondo trasparente su fascia). L'etichetta
     colorata rende ogni pulsante immediatamente riconoscibile (migliore
     affordance del monocromo). Touch target 44px (WCAG 2.5.8 AA). ------- */
  .relay {
    display: flex;
    gap: var(--space-sm);
    margin-block: var(--space-md);
  }
  .relay__way {
    flex: 1;
    display: flex;
    align-items: center;
    /* Contenuto CENTRATO (owner, 2026-09-15): con flex-start logo+testa
       restavano a sinistra lasciando vuoto il resto del pulsante. */
    justify-content: center;
    gap: 10px;
    min-block-size: 44px;
    padding: 6px 14px;
    color: var(--way-brand);
    font-family: var(--font-display);
    /* 19.2px bold ≥ 18.66px: soglia WCAG "large text" → richiesto 3:1
       (Facebook brand 3.07:1 in light passa; le altre reti sono oltre 6). */
    font-size: 1.2rem;
    font-weight: 700;
    border: 1px solid var(--way-brand);
    border-radius: 15px;
    text-decoration: none;
    transition: filter var(--duration-base) var(--ease-out);
  }
  .relay__way:hover {
    filter: brightness(0.92);
  }
  /* I pulsanti puntano al ponte /relay/go (href statico, dominio nostro):
     niente da assegnare via JS, nessun href di sharer esposto al markup. */
  .relay__way:not([href]) {
    display: none;
  }
  /* Fallback senza JS: riga di collegamenti testuali. */
  .relay__fallback {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: 0 0 var(--space-xs);
    font-size: 0.875rem;
  }
  .relay__fallback a {
    color: var(--color-text);
  }
  @media (prefers-contrast: more) {
    .relay__way {
      border-width: 2px;
    }
  }
  @media (max-width: 48rem) {
    /* MOBILE: SOLO LOGO (owner, 2026-09-15), LARGHEZZA = container hero.
       I pulsanti si distribuiscono su tutta la riga con flex: 1 (stessa
       larghezza, come le colonne dell'hero): il container del relay è già
       largo quanto l'hero (stesso padding del frame). A 320px la riga sta:
       5 btn × min 52px + 4 gap × 8px = 292px < 320px. Al minimo il
       touch target resta ≥48px (WCAG 2.5.8). */
    .relay {
      flex-wrap: nowrap;
      justify-content: stretch;
      gap: 8px;
    }
    .relay__way {
      flex: 1 1 0;
      justify-content: center;
      padding: 0;
      inline-size: auto;
      min-block-size: 52px;
      aspect-ratio: 1;
      border-radius: 12px;
      /* Icona più grande del default 18px: su un quadrato 52-67px un
         glifo 18px si perde (owner: «più grandi per essere più visibili»).
         26px ≈ 54% del lato minimo — ben proporzionato e leggibile. */
    }
    .relay__way svg {
      inline-size: 26px;
      block-size: 26px;
    }
    .relay__label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .relay__way:focus-visible .relay__label {
      /* Al focus da tastiera il nome torna visibile (tooltip nativo-like). */
      position: fixed;
      inline-size: auto;
      block-size: auto;
      clip-path: none;
      inset-block-end: calc(100% + 4px);
      inset-inline-start: 50%;
      translate: -50% 0;
      background: #1c1e21;
      color: #ffffff;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 6px;
      white-space: nowrap;
      z-index: 10;
    }
  }

  /* ---- 3. Corpo a due colonne (70/30) ------------------------------------ */
  .art__cols {
    display: grid;
    gap: var(--space-md);
  }
  @container (min-width: 60rem) {
    .art__cols {
      /* Rapporto misurato: 1182/507 = 70/30. */
      grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
      /* Colonne indipendenti: con stretch la sidebar si allungerebbe
         quanto il testo e lo sticky non avrebbe effetto. */
      align-items: start;
    }
  }
  /* Variante "palinsesto" (D-050): niente sidebar, colonna unica (dopo il
     blocco @container: stessa specificità, vince per ordine). */
  .art__cols--una {
    grid-template-columns: 1fr;
  }
  .art__corpo {
    display: grid;
    gap: var(--space-lg);
    align-content: start;
  }

  /* Tipografia articolo (richiesta owner, 2026-09-15): testo in POPPINS
     LIGHT 300, titoli in ROBOTO MEDIUM 500. Best practice 2026 per la
     lettura long-form: corpo fluido 17→19px (≥17px su mobile, ≈19px su
     desktop), interlinea 1.7 (i pesi light richiedono più aria), forti a
     600 perché il sintetico a 300 è illeggibile. Titoli: h2 24→30px,
     h3 20→24px, interlinea 1.25/1.3, text-wrap wrap (mai balance). : l'HTML
     del CMS non porta lo scope Astro — solo DENTRO l'articolo. */
  /* Gerarchia titoli del CMS (D-038, richieste owner + best practice 2026):
     UN SOLO livello decorato (h2 arancione con barra) — h3 e h4 scendono
     nella scala con peso/dimensione, senza altre decorazioni. NIENTE
     «text-wrap: balance»: spezza i titoli anche con spazio sulla riga
     (difetto segnalato dall'owner) — si va a capo solo quando serve. */
  .prose h2 {
    font-family: var(--font-display); /* Poppins 600: le lettere geometriche dello screenshot owner */
    font-weight: 600;
    font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24→30px */
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-block: var(--space-xl) var(--space-md);
    /* NIENTE balance (owner, 2026-09-15): «balance» distribuisce il testo su
       più righe EquILIBRANDO le lunghezze, quindi spezza il titolo ANCHE quando
       starebbe su una riga (è il difetto segnalato: «ritorna a capo anche se
       c'è spazio»). wrap = va a capo SOLO quando serve davvero. */
    text-wrap: wrap;
    position: relative;
    padding-inline-start: 12px; /* spazio per la barra */
    color: var(--color-primary); /* arancione #FA5403: h2 ≥24px = large text, WCAG 3:1 ok */
  }
  .prose h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0.18em; /* leggermente più corta della riga, come lo screenshot */
    inline-size: 3px;
    border-radius: 2px;
    background: var(--color-primary);
  }
  .prose h3 {
    font-family: var(--font-sans); /* Roboto */
    font-weight: 700;
    font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18→22px */
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-block: var(--space-lg) var(--space-sm);
    text-wrap: wrap; /* come h2: niente balance che spezza titoli corti (D-038 emenda) */
  }
  .prose h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.0625rem; /* come il corpo (max 17px): etichetta di sezione */
    line-height: 1.4;
    margin-block: var(--space-md) var(--space-xs);
  }
  .prose strong {
    font-weight: 600;
  }

  /* Colonna di testo come il live: LARGHEZZA PIENA della colonna (1162px
     misurati sui paragrafi) e tipografia 16px/24px. Il limite globale
     `68ch` di typography.css è una scelta di leggibilità che il live NON
     usa — e col testo stretto l'articolo risultava anche molto più lungo
     (16372px vs 12910px del live). Override SCOPATO qui: le recensioni
     mantengono il loro comportamento. */
  .prose {
    max-width: none;
    /* Grid item di .art__corpo: con min-width:auto (default) si allarga al
       min-content delle tabelle nowrap (868px) sbordando dalla viewport e
       disattivando la rete di sicurezza overflow-x:auto di D-047 (lo scroll
       interno non parte mai). min-inline-size:0 tiene il contenitore stretto:
       le tabelle D-047 scrollano DENTRO il blocco su qualunque pagina. */
    min-inline-size: 0;
    font-family: var(--font-display); /* Poppins */
    font-weight: 300;
    font-size: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem); /* 15→17px (owner, 2026-09-15: -2pt) */
    line-height: 1.7;
  }
  .prose img {
    max-width: 100%;
    height: auto;
  }

  /* TOC: pannello a PIENA larghezza della colonna di testo, come il widget
     "Contenuti Articolo" del live (bordo 2px, radius 7).
     Comportamento (D-033, best practice UX 2026 — NN/g): <details> nativo
     CHIUSO su mobile/tablet (l'indice aperto spingerebbe il testo sotto la
     piega), APERTO su desktop (wayfinding) — forzato via ::details-content
     nella container query, ZERO JavaScript. Con @supports il fallback è
     il toggle manuale: nessun browser resta senza indice. */
  .toc {
    border: 2px solid var(--color-border);
    border-radius: 7px;
    padding: var(--space-sm);
  }
  .toc__somario {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px; /* target tattile WCAG 2.5.8 */
    margin: 0 0 var(--space-xs);
    cursor: pointer;
    list-style: none; /* via il marker nativo */
    user-select: none;
    font-family: var(--font-display);
    font-weight: 600;
    text-align: center;
  }
  .toc__somario::-webkit-details-marker {
    display: none;
  }
  .toc__somario svg {
    flex: none;
    transition: transform 0.2s ease;
  }
  .toc[open] .toc__somario svg {
    transform: rotate(180deg);
  }
  .toc__lista {
    margin: 0;
    padding-inline-start: 1.2rem;
    display: grid;
    gap: 4px;
    font-size: 0.875rem;
    font-family: var(--font-display); /* Poppins: il TOC è UI del template, non corpo (owner, 2026-09-15) */
  }
  .toc__voce--3 {
    margin-inline-start: 1rem;
  }
  @container (min-width: 60rem) {
    /* Desktop: sempre aperto e non collassabile — niente chevron. */
    .toc__somario svg {
      display: none;
    }
    @supports selector(::details-content) {
      .toc::details-content {
        content-visibility: visible;
        display: block;
      }
      .toc__somario {
        pointer-events: none;
        cursor: default;
        min-height: 0;
      }
    }
  }

  /* Sidebar sticky — best practice UX 2026 (emenda D-031): DUE ancore
     (top e bottom) invece di max-height+overflow. Con entrambe le ancore
     il browser gestisce da solo i due casi:
     • sidebar che ENTRA nel viewport → si fissa in alto (classica);
     • sidebar più ALTA del viewport → scorre con la pagina finché il suo
       fondo raggiunge il bordo inferiore, poi resta agganciata col fondo:
       TUTTO il contenuto è raggiungibile con lo scroll di pagina.
     Zero scroll interno → niente scroll-trap (la rotella sulla sidebar
     continua a muovere la PAGINA), niente barra, niente contenuto
     irraggiungibile. La colonna del testo la rilascia alla sua fine.
     ⚠ SOLO su colonna DOPPIA (container ≥60rem): su mobile la sidebar è
     nel flusso DOPO il testo — con sticky a doppia ancora l'elemento
     si fissava a schermo e COPRIVA il testo/caroselli che scorrevano
     sotto (difetto misurato: overlap 1330px a 390×640). */
  .art__sidebar {
    display: grid;
    gap: var(--space-lg);
    align-content: start;
  }
  @container (min-width: 60rem) {
    .art__sidebar {
      position: sticky;
      align-self: start;
      inset-block: var(--space-md);
    }
  }
  .art__sidebar .leadlist {
    --grid-gap: 8px;
  }

  /* ---- 4. Caroselli finali ------------------------------------------------ */
  .correlati {
    margin-block: var(--space-xl) var(--space-lg);
  }
  .correlati__titolo {
    /* STESSO stile dei titoli della sidebar (LeadList → .section__title):
       20px/600 con la barra arancione sotto, come richiesto dall'owner —
       i due caroselli leggono come i widget accanto. */
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--color-text);
    padding-block-end: 6px;
    border-block-end: 5px solid var(--color-primary);
    display: inline-block;
    min-inline-size: min(100%, 14rem);
    margin: 0 0 var(--space-md);
  }


/* ===== src/components/templates/ReviewPage.astro ===== */

  /* ---- D-077: cornice come il template ARTICOLO (art__frame): 89% della
     viewport SENZA la classe .container (che limita a 1140px — era la
     causa dei caroselli più stretti: 1140px contro ~1690px a 1920).
     Stessa formula di art__frame: width min(89%, 100% - 40px). ---- */
  .rec__frame {
    width: min(89%, 100% - 40px);
    margin-inline: auto;
    padding-inline: 0;
    container-type: inline-size; /* D-177: come art__frame — le @container della TOC misurano la cornice */
  }
  @media (max-width: 768px) {
    .rec__frame {
      width: min(95%, 100% - 40px); /* D-070: % reale, NON vw (scrollbar) */
    }
  }

  /* ---- D-074: CORPO + SIDEBAR — la griglia del template articolo (D-029). */
  .rec__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-lg);
    align-items: start;
  }
  .rec__principale {
    min-inline-size: 0; /* tabelle/prose: il min-content non deve sbordare (D-049) */
  }
  @media (max-width: 60rem) {
    .rec__cols {
      grid-template-columns: 1fr;
    }
    .rec__sidebar {
      order: 2;
    }
  }
  /* Sidebar sticky a DOPPIA ANCORA (D-031-emenda): zero scrollbar interne. */
  .rec__sidebar {
    display: grid;
    gap: var(--space-lg);
    align-content: start;
  }
  @media (min-width: 60rem) {
    .rec__sidebar {
      position: sticky;
      align-self: start;
      inset-block: var(--space-md);
    }
  }

  /* ---- D-074/D-077: caroselli finali — come nel template ARTICOLO:
     DENTRO la cornice 89% del frame (stesso contenitore di hero e corpo,
     stessa larghezza dei caroselli di tutti gli altri template). Il
     wrapper separato 95% degli archivi qui non c'entra. ---- */
  .rec-carousel {
    margin-block-start: var(--space-xl);
  }
  .rec-carousel__titolo {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm) 0;
  }

  /* ---- 1. HERO — allineato all'ARTICOLO (D-093, richiesta owner:
     «impostala come tutto il resto del sito»): stessi layer (overlay
     floor-fade D-037 + sfoca fascia bassa), titolo da sinistra su una
     riga da PC, subtitle e badge voto sotto. Storia: l'overlay a tinta
     unita 71% scuriva tutta la copertina; il floor-fade la lascia viva. */
  .rec__hero {
    position: relative;
    min-block-size: 55vh;
    display: grid;
    align-items: end;
    border-radius: 20px;
    overflow: clip;
  }
  .rec__hero-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .rec__hero-sfoca {
    /* Sfocatura leggera solo della fascia bassa (mask dichiara DOVE il blur
       è visibile): dietro a subtitle/badge la foto diventa uniforme e i testi
       leggono senza scurire il box. Come art__hero-sfoca dell'articolo. */
    position: absolute;
    inset: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    mask-image: linear-gradient(to bottom, transparent 55%, black 85%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 55%, black 85%);
    pointer-events: none;
  }
  .rec__hero-overlay {
    position: absolute;
    inset: 0;
    /* Floor-fade identico all'articolo (D-037): vivo sopra, leggibile sotto. */
    background: linear-gradient(
      to bottom,
      #00000014 0%,
      #00000026 45%,
      #000000a6 78%,
      #000000cc 100%
    );
  }
  .rec__hero-testi {
    position: relative;
    padding: var(--space-lg);
    text-align: left;
    display: grid;
    justify-items: start;
    gap: var(--space-xs);
  }
  .rec__title {
    /* Come art__titolo: una riga da PC in giù (clamp 26→30px, ellipsis);
       niente text-shadow dura: non esiste più negli altri template. */
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.625rem, 2.3vw, 1.875rem); /* 26→30px */
    line-height: 1.2;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;
  }
  @media (max-width: 47.99rem) {
    .rec__title {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-size: clamp(1.375rem, 5.5vw, 1.625rem); /* 22→26px */
    }
  }
  .rec__subtitle {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    color: #ffffffe6;
    /* D-103 (owner): il sottotitolo resta su UNA RIGA il più possibile —
       via il limite 65ch (~560px) che mandava a capo molto prima della
       larghezza del box. Va a capo solo se supera fisicamente il contenitore
       (sottotitoli lunghi su mobile). */
    max-inline-size: none;
    margin: 0;
  }
  .rec__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-weight: 500;
  }
  .rec__meta time {
    color: #ffffffe6;
    font-size: 0.9375rem;
  }
  /* D-172: pills GENERI dell'hero recensione (hcn_pills_genere emette
     le classi del live «acf-tag-*» che il tema non aveva: i link uscivano
     nudi, sottolineati e attaccati). CSS trasposto da post-27.css del
     live; D-125: fondo SEMPRE #fa5403 (var primario), niente #FF6600. */
  .acf-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
  }
  .acf-tag {
    display: inline-block;
    padding: 6px 12px;
    border: 2px solid #fff;
    border-radius: 12px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
  }
  .acf-tag:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* ---- 2. TAB ORIZZONTALI (D-073): fila di pulsanti sopra il pannello,
     TESTO BIANCO su superficie scura (richiesta owner), attiva = arancio
     brand. Su mobile le tab scrollano orizzontalmente (overflow-x: auto
     con barre nascoste: sono percepibili perché tagliate a metà). ---- */
  .rec__tabs-zone {
    margin-block: var(--space-lg);
    /* D-100: niente scroll anchoring del browser sulla zona tab — quando i
       pannelli collassano, l'ancoraggio nativo può scegliere nodi dentro il
       pannello che si chiude e amplificare il salto. La compensazione precisa
       la fa lo script (cambia(), D-100). */
    overflow-anchor: none;
  }
  /* D-101 (owner): tablist e scorciatoie kbd sulla STESSA RIGA — tab a
     sinistra, footer a destra. */
  .rec__tabbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 10px;
  }
  .rec__tablist {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rec__tablist::-webkit-scrollbar {
    display: none;
  }
  .rec__tab-btn {
    flex: 0 0 auto;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    padding: 11px 18px;
    /* D-094 (owner): le tab NON vanno a capo mai — anche su mobile stretto
       restano su una riga, così l'altezza è identica per tutte. */
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 500;
    /* D-092b (grigio chiaro in light) + D-094 (owner: «in dark mode lo sfondo
       della dark mode»): light = grigio di fascia #e7e7e7 testo scuro;
       dark = superficie dark nativa (neutral-800) testo chiaro — via il grigio
       chiaro forzato. L'attiva resta arancione con bianco in entrambi. */
    color: light-dark(var(--neutral-900), var(--neutral-100));
    background: light-dark(var(--neutral-150), var(--neutral-800));
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .rec__tab-btn:hover {
    background: light-dark(var(--neutral-200), var(--neutral-700));
  }
  .rec__tab-btn[aria-selected='true'] {
    background: var(--color-primary);
    /* Bianco pieno sull'attivo arancione (owner D-073). */
    color: #fff;
  }
  .rec__tab-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
  /* D-100 (owner): footer scorciatoie in stile cerca (kbd monospace con
     bordo). Solo dove c'è la fila orizzontale: su mobile l'accordion non
     usa le frecce. */
  .rec__tab-hint {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 300;
    color: light-dark(rgb(0 0 0 / 0.55), rgb(255 255 255 / 0.55));
  }
  .rec__tab-hint kbd {
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    border: 1px solid light-dark(rgb(0 0 0 / 0.25), rgb(255 255 255 / 0.25));
    border-radius: 4px;
    padding: 1px 5px;
    margin-inline-end: 4px;
  }
  @media (max-width: 767px) {
    .rec__tab-hint {
      display: none;
    }
  }
  /* D-099 (owner): la tab Info Base riempie l'altezza del box — la griglia
     delle chip si allunga sulle righe invece di lasciare vuoto sotto.
     :not([hidden]) è OBBLIGATORIO: display su un pannello hidden lo mostrerebbe
     (gli stili autore battono il display:none dell'UA). */
  @media (min-width: 768px) {
    #pannello-info:not([hidden]) {
      display: grid;
    }
    #pannello-info:not([hidden]) .chips {
      height: 100%;
      align-content: stretch;
    }
  }
  /* D-098 (owner): su MOBILE la fila orizzontale diventa ACCORDION VERTICALE:
     la zona è colonna flex e ogni pannello si posiziona SUBITO sotto la sua
     tab (order via ID espliciti); il pannello nascosto collassa. È
     l'accordion "sempre uno aperto": la prima scheda è aperta di default
     (hidden solo su i!==0, già nel markup) e il JS D-073 fa apertura
     esclusiva — cliccando una tab le altre si chiudono da sole. Da >=768px
     torna la fila orizzontale con pannelli sotto. */
  @media (max-width: 767px) {
    .rec__tabs-zone {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    /* D-101: il wrapper va a contents come la tablist — i bottoni restano
       item diretti della zona e le regole order dell'accordion (D-098) funzionano. */
    .rec__tabbar,
    .rec__tablist {
      display: contents;
    }
    .rec__tabs-zone #tab-valutazione { order: 1; }
    .rec__tabs-zone #pannello-valutazione { order: 2; }
    .rec__tabs-zone #tab-info { order: 3; }
    .rec__tabs-zone #pannello-info { order: 4; }
    .rec__tabs-zone #tab-dettagli { order: 5; }
    .rec__tabs-zone #pannello-dettagli { order: 6; }
    .rec__tabs-zone #tab-video { order: 7; }
    .rec__tabs-zone #pannello-video { order: 8; }
    .rec__tab-btn {
      inline-size: 100%;
      border-radius: 10px;
      padding: 12px 16px;
      text-align: left;
    }
    .rec__panel {
      min-height: 0; /* l'uniformità 290px è solo desktop (D-097) */
      border-radius: 10px;
    }
  }
  .rec__panel {
    /* D-094 (owner): light = grigio chiaro di fascia; dark = SUPERFICIE DARK
       NATIVA del sito (neutral-900, come le fasce dark) con testo chiaro —
       via il grigio chiaro forzato in dark. */
    background: light-dark(var(--neutral-150), var(--neutral-900));
    border-radius: 14px;
    padding: var(--space-md);
    color: light-dark(var(--neutral-900), var(--neutral-100));
  }
  /* D-097 (owner): TUTTI i box tab hanno la stessa altezza del Valutazione
     Finale, misurata dall'owner: 925.6 × 290. Il min-height uniforma i pannelli
     più bassi; il contenuto che sfora (Dettagli 325, Video 294) è compresso
     nelle regole dedicate sotto (gap chip 8px, cover video 232px). Solo da
     ≥561px: su mobile la griglia a 1 colonna richiede altezze libere. */
  @media (min-width: 561px) {
    .rec__panel {
      min-height: 290px;
    }
  }
  /* In dark il pannello è scuro: i colori fissi chiari di D-092b tornano a
     dipendere dal tema (testo chiaro, divisori/veli bianchi traslucidi). */
  .rec__panel .voti__label,
  .rec__panel .chips__label,
  .rec__panel .chips__valore,
  .rec__panel .video__titolo {
    color: light-dark(var(--neutral-900), var(--neutral-100));
  }
  .rec__panel .chips__label {
    color: light-dark(rgb(0 0 0 / 0.62), rgb(255 255 255 / 0.62));
  }
  .rec__panel .voti__riga:hover,
  .rec__panel .voti__riga[data-attivo] {
    background: light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.08));
  }
  .rec__panel .voti__barra {
    background: light-dark(var(--neutral-200), rgb(255 255 255 / 0.14));
  }

  /* Valutazione: donut a sinistra + barre di dettaglio a destra (D-086). */
  .valutazione {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    align-items: center;
  }

  @media (max-width: 700px) {
    .valutazione {
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .valutazione .voti {
      inline-size: 100%;
      max-inline-size: 26rem;
    }
  }

  /* Barre voto: pill colorate per criterio (stessa palette del cerchio),
     alte 27px, numero bold dentro. */
  .voti {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
  }
  .voti__swatch {
    display: inline-block;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 3px;
    background: var(--colore);
    margin-inline-end: 8px;
    vertical-align: baseline;
  }
  .voti__riga {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) 1fr;
    align-items: center;
    gap: var(--space-sm);
    /* Righe interattive (D-091): l'hover/focus evidenzia la riga E il segmento
       corrispondente della donut (collegamento gestito dallo script di
       VoteCircle via data-voto-handle). */
    padding: 5px 10px;
    margin-inline: -10px;
    border-radius: 9px;
    cursor: default;
    transition: background var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }

  .voti__riga:hover,
  .voti__riga[data-attivo] {
    /* D-092b: su grigio #e7e7e7 l'evidenza è un velo di bianco pieno. */
    background: rgb(255 255 255 / 0.75);
  }

  .voti__riga:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
  }

  /* Su mobile l'etichetta va sopra la barra: altrimenti resta 75px di barra. */
  @media (max-width: 560px) {
    .voti__riga {
      grid-template-columns: 1fr;
      gap: 4px;
      padding-block: 7px;
    }
  }
  .voti__label {
    font-weight: 300;
    font-size: 1rem;
  }
  .voti__barra {
    margin: 0;
    block-size: 13px; /* barra sottile (D-091): il voto è nella donut, qui solo proporzione */
    /* Barra COMPLETA 0-10 (D-090): il binario rende visibile la scala intera,
       il fill colora solo la quota del voto (5 → 50%). D-092b: su superficie
       chiara il binario è il grigio superficie (non più velo bianco). */
    background: var(--neutral-200);
    border-radius: 100px;
    overflow: hidden;
  }
  .voti__fill {
    display: block;
    block-size: 100%;
    inline-size: var(--val, 0%);
    background: var(--colore, #f8401e);
    border-radius: inherit;
    transition: inline-size var(--duration-slow) var(--ease-out);
  }

  /* Scheda info (D-096): griglia a CHIP — etichetta maiuscoletta sopra e
     valore prominente sotto. 2 colonne su desktop (1 su mobile ≤560px): la
     scansione è a pattern e i dati riempiono la larghezza della colonna
     testo (sostituisce la lista verticale con divisori 3px del live). */
  .chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; /* D-097: compattezza — 4 righe di chip entrano nel box 290px */
    margin: 0;
  }
  @media (max-width: 560px) {
    .chips {
      grid-template-columns: 1fr;
    }
  }
  .chips__item {
    padding: 8px 14px; /* D-097: 10→8 in verticale per il box uniforme 290px */
    border-radius: var(--radius-sm, 9px);
    background: light-dark(rgb(0 0 0 / 0.045), rgb(255 255 255 / 0.05));
    min-inline-size: 0;
  }
  .chips__label {
    font-size: 0.75rem;
    font-weight: 700; /* D-101 (owner): il testo (Titolo, Stato…) in GRASSETTO */
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.62);
    line-height: 1.35;
  }
  .chips__valore {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-weight: 300; /* D-101 (owner): la risposta (valore) in LIGHT */
    font-size: 1rem; /* D-097: 17→16px, riga più compatta */
    line-height: 1.4;
    overflow-wrap: anywhere; /* titoli kanji lunghi: a capo, mai overflow */
  }
  .chips__ico {
    inline-size: 15px;
    block-size: 15px;
    flex: none;
    opacity: 0.75;
  }
  .chips__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--neutral-300);
    color: var(--neutral-900);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .chips__pill--attivo {
    /* Verde confermato dall'owner: produzione attiva (in corso/onda…). */
    background: #2e7d32;
    color: #fff;
  }

  /* Video facade (D-095: dentro il carosello standard — le slide del
     SnapCarousel sono flex-basis % del contenitore, qui niente max-width
     fissa: la facade riempie la slide, immagine 16:9 nativa di YouTube). */
  .video__facade {
    position: relative;
    display: block;
    border-radius: 9px;
    overflow: hidden;
  }
  .video__facade img {
    inline-size: 100%;
    /* D-097: cover fissa 216px = 16:9 della slide (432-48=384 → 384×9/16),
       così il pannello fa 24+216+24 = 264px; il min-height 290 del pannello
       uniforma il box a 290 come Valutazione. object-fit copre il ritaglio
       sulle larghezze intermedie. */
    block-size: 216px;
    object-fit: cover;
    display: block;
  }
  .video__play {
    position: absolute;
    inset: 0;
    margin: auto;
    block-size: 64px;
    inline-size: 90px;
    border-radius: 18px;
    background: rgb(250 84 3 / 0.92);
  }
  .video__play::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 0;
    block-size: 0;
    border-inline-start: 22px solid #fff;
    border-block: 13px solid transparent;
    translate: 4px 0;
  }
  .video__titolo {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    max-inline-size: calc(100% - 16px);
    background: rgb(0 0 0 / 0.72);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.875rem;
    padding: 4px 10px;
    border-radius: 7px;
  }

  /* ---- 3. Corpo: indice + testo giustificato (come il live) ---- */
  .rec__corpo {
    display: grid;
    gap: var(--space-lg);
  }
  .toc {
    border: 2px solid var(--color-border);
    border-radius: 7px;
    padding: var(--space-sm);
    /* D-075: TUTTA la colonna del testo (il tetto 420px era ereditato
       dalla larghezza della vecchia sidebar; da D-074 la colonna è larga
       e la TOC doveva seguirlo, come nel template articolo). */
    max-inline-size: none;
  }
  /* D-177: come il template articolo (D-033) — <details> chiuso di base
     su mobile (la chevron è il target tattile 44px), aperto e non
     collassabile da 60rem via ::details-content. */
  .toc__somario {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px; /* target tattile WCAG 2.5.8 */
    margin: 0 0 var(--space-xs);
    cursor: pointer;
    list-style: none; /* via il marker nativo */
    user-select: none;
    font-family: var(--font-display);
    font-weight: 600;
    text-align: center;
  }
  .toc__somario::-webkit-details-marker {
    display: none;
  }
  .toc__somario svg {
    flex: none;
    transition: transform 0.2s ease;
  }
  .toc[open] .toc__somario svg {
    transform: rotate(180deg);
  }
  .toc__lista {
    margin: 0;
    padding-inline-start: 1.2rem;
    display: grid;
    gap: 4px;
    font-size: 0.875rem;
    font-family: var(--font-display); /* Poppins: il TOC è UI del template, non corpo (owner, 2026-09-15) */
  }
  .toc__voce--3 {
    margin-inline-start: 1rem;
  }
  @container (min-width: 60rem) {
    /* Desktop: sempre aperto e non collassabile — niente chevron (D-177). */
    .toc__somario svg {
      display: none;
    }
    @supports selector(::details-content) {
      .toc::details-content {
        content-visibility: visible;
        display: block;
      }
      .toc__somario {
        pointer-events: none;
        cursor: default;
        min-height: 0;
      }
    }
  }

  /* Testo recensione (D-076): LARGHEZZA PIENA della colonna come il
     template articolo — il limite globale `68ch` di typography.css era la
     causa del «pezzo bianco» a destra (la colonna è 700px+, il testo
     si fermava a ~620px). Override scopato qui, come fatto in ArticoloPage.
     Font: STESSO corpo degli ARTICOLI (D-078): Poppins 300 — come richiesto
     dall'owner per TUTTO il testo lungo. In D-076 avevo messo
     var(--font-sans) (che è Roboto): era il font diverso segnalato. */
  .prose {
    max-width: none;
    font-family: var(--font-display); /* Poppins, come gli articoli */
    font-weight: 300;
    font-size: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem); /* 15→17px, come gli articoli */
    line-height: 1.7;
  }
  .prose--recensione {
    text-align: justify;
    hyphens: auto;
  }

  /* ---- Gerarchia titoli del CMS: STESSA del template articolo (D-038,
     confermata dall'owner): h2 arancione Poppins 600 con barra verticale,
     h3 «quiet bold» Roboto 700, h4 strong label. : l'HTML del CMS
     non porta lo scope Astro. ---- */
  .prose h2 {
    font-family: var(--font-display); /* Poppins 600 */
    font-weight: 600;
    font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24→30px */
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-block: var(--space-xl) var(--space-md);
    text-wrap: wrap; /* mai balance: spezza i titoli con spazio sulla riga */
    position: relative;
    padding-inline-start: 12px; /* spazio per la barra */
    color: var(--color-primary);
  }
  .prose h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0.18em;
    inline-size: 3px;
    border-radius: 2px;
    background: var(--color-primary);
  }
  .prose h3 {
    font-family: var(--font-sans); /* Roboto */
    font-weight: 700;
    font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18→22px */
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-block: var(--space-lg) var(--space-sm);
    text-wrap: wrap;
  }
  .prose h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.0625rem; /* come il corpo: etichetta di sezione */
    line-height: 1.4;
    margin-block: var(--space-md) var(--space-xs);
  }


/* ===== src/components/templates/SchedaAnimePage.astro ===== */

  /* ===== D-115: TUTTO IL TEMPLATE IN POPPINS — l'owner vuole "il solito
     Poppins" su tutta la scheda: il font parte dalla root del template e
     ogni elemento eredita (il body di base è Roboto = --font-sans, KB D-075;
     il plugin HikaruDB stesso usa Poppins nei grafici). */
  .scheda {
    font-family: var(--font-display);
  }

  /* ===== 1. HERO (D-121, come il live): tab "Scheda Anime" ancorata alla
     barra arancione col titolo, banner a tutta larghezza come blocco
     separato (zero crop), pills generi con bordo bianco (CSS acf-tag). */
  .scheda__hero {
    padding-block-start: var(--space-sm);
  }
  .scheda__hero-top {
    position: relative;
  }
  .scheda__tab {
    position: absolute;
    inset-block-start: -10px;
    inset-inline-start: 14px;
    z-index: 1;
    padding: 3px 14px;
    border-radius: 100px;
    background: #fff;
    color: var(--color-primary); /* D-125: override owner — sempre #fa5403 */
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
  }
  .scheda__hero-barra {
    border-radius: 14px;
    background: linear-gradient(180deg, #ff7a1f, #fa5403);
    padding: 14px 22px 15px;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.15);
  }
  .scheda__titolo {
    margin: 0;
    font-family: var(--font-display); /* D-115: Poppins, non più Roboto */
    font-weight: 700;
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    line-height: 1.15;
    color: #fff;
    text-wrap: balance;
  }
  .scheda__hero-banner-wrap {
    margin-block-start: 10px;
  }
  .scheda__banner {
    inline-size: 100%;
    aspect-ratio: 1000 / 185;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    background: var(--neutral-200);
  }
  .scheda__generi {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
  }
  /* CSS reale del live (acf-tag in post-27.css): bordo bianco 2px,
     uppercase, radius 12px. D-125: override owner — fondo SEMPRE #fa5403
     (la variante scura D-122 per il contrasto AA è scartata). */
  .scheda__genere {
    padding: 6px 12px;
    border-radius: 12px;
    border: 2px solid #fff;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  /* D-122: anello di focus brand su ogni elemento interattivo del
     template (i link su superfici scure con currentColor si perdono). */
  .scheda a:focus-visible,
  .scheda button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
  }
  @media (max-width: 560px) {
    .scheda__banner {
      aspect-ratio: 16 / 9;
    }
    .scheda__tab {
      inset-inline-start: 10px;
    }
  }

  /* ===== CORPO A DUE COLONNE ===== */
  .scheda__corpo {
    padding-block: var(--space-lg);
  }
  .scheda__colonne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-lg);
    align-items: start;
  }
  @media (max-width: 900px) {
    .scheda__colonne {
      grid-template-columns: 1fr;
    }
  }

  .scheda__sezione {
    margin-block-end: var(--space-xl);
  }
  .scheda__h2 {
    font-family: var(--font-display); /* Poppins (D-075: --font-display) */
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--color-text);
    /* D-115: barra sotto i titoli, 2px brand — come il titolo firma della
       home (5px lì, 2px qui su richiesta owner), largezza = testo con
       minimo 14rem così i titoli brevi hanno una barra proporzionata. */
    display: inline-block;
    min-inline-size: min(100%, 14rem);
    padding-block-end: 6px;
    border-block-end: 2px solid #fa5403;
  }

  /* ===== CARD DATI+TRAMA (D-121): una scheda, due colonne come il live —
     dati a sinistra, Trama con scorrimento interno a destra (scrollbar
     brand). Su ≤900px le colonne si impilano e lo scroll si disattiva. */
  .scheda__card {
    background: light-dark(#fff, rgb(255 255 255 / 0.04));
    border: 1px solid light-dark(#e2e2e2, rgb(255 255 255 / 0.12));
    border-radius: var(--radius-card, 15px);
    padding: 18px;
  }
  /* D-124: riga 1 = poster + Trama STESSA ALTEZZA — l'altezza della riga
     la decide solo il poster (il blocco trama è position:relative e il
     suo contenuto assoluto non cresce la riga; l'inner riempie la cella
     e lo scroll prende lo spazio sotto il titolo). Riga 2 = scheda
     tecnica a chip-card (D-116) a tutta larghezza. */
  .scheda__card-colonne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px;
  }
  .scheda__card-cover {
    grid-row: 1;
    grid-column: 1;
    inline-size: clamp(160px, 18vw, 230px);
    aspect-ratio: 460 / 651;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
    display: block;
    background: var(--neutral-200);
  }
  .scheda__card-trama {
    grid-row: 1;
    grid-column: 2;
    position: relative;
    min-inline-size: 0;
    min-block-size: 220px; /* fallback se una scheda non ha copertina */
  }
  .scheda__card-trama-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .scheda__trama-scroll {
    flex: 1 1 0;
    min-block-size: 0;
    overflow-y: auto;
    padding-inline-end: 10px;
    scrollbar-width: thin;
    scrollbar-color: #fa5403 transparent;
  }
  .scheda__card-dati {
    grid-row: 2;
    grid-column: 1 / -1;
    min-inline-size: 0;
  }
  @media (max-width: 900px) {
    .scheda__card-colonne {
      grid-template-columns: 1fr;
    }
    .scheda__card-cover,
    .scheda__card-trama,
    .scheda__card-dati {
      grid-row: auto;
      grid-column: auto;
    }
    .scheda__card-trama {
      position: static;
    }
    .scheda__card-trama-inner {
      position: static;
    }
    /* Da mobile niente scroll innestato: la trama scorre nella pagina. */
    .scheda__trama-scroll {
      flex: none;
      overflow-y: visible;
    }
  }
  @media (max-width: 560px) {
    .scheda__card {
      padding: 14px;
    }
    .scheda__card-cover {
      inline-size: min(100%, 180px);
    }
  }

  .scheda__trama-scroll::-webkit-scrollbar {
    inline-size: 8px;
  }
  .scheda__trama-scroll::-webkit-scrollbar-track {
    background: light-dark(#f2f2f2, rgb(255 255 255 / 0.06));
    border-radius: 100px;
  }
  .scheda__trama-scroll::-webkit-scrollbar-thumb {
    background: #fa5403;
    border-radius: 100px;
  }
  /* ===== 2. DATI TECNICI (D-124: torna il pattern chip-card D-116 —
     blocchi con label sopra e valore dentro, griglia ordinata). ===== */
  .scheda__dati {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  .scheda__voce {
    padding: 12px 14px;
    border-radius: 10px;
    background: light-dark(#f2f2f2, rgb(255 255 255 / 0.06));
    border: 1px solid light-dark(#dcdcdc, rgb(255 255 255 / 0.12));
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    min-inline-size: 0;
  }
  .scheda__voce:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgb(0 0 0 / 0.08);
  }
  .scheda__voce--titoli {
    grid-column: 1 / -1;
  }
  /* D-126: sottogruppo delle ultime voci (Durata + Studio + date) —
     D-174: è una SECONDA <dl> (semantica: il div annidato nella prima
     dl rompeva la regola «un solo livello di wrapper»): essendo dl a
     sé, non è più item della griglia della prima → margine che replica
     il gap. La griglia resta quella del gruppo (auto-fit 180px). */
  dl.scheda__dati-coda {
    margin: 10px 0 0;
  }
  .scheda__voce-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800; /* D-127: titoli più in grassetto */
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
    /* D-127: rosso #f3081e su richiesta owner (override del #b83a00 AA
       D-114 — stessa natura della scelta pills D-125: consapevole). */
    color: #f3081e;
  }
  /* D-169: etichetta lunga «Studio produzione» — nella card stretta della
     coda (150px) a 12px la scritta va a capo: ridotta SOLO per questo
     label su richiesta owner (10.5px: 17 caratteri ≈ 107px + icona 21px
     stanno in una riga; le altre etichette restano a 12px). */
  .scheda__voce-label--compact {
    font-size: 10.5px;
    letter-spacing: 0.2px;
  }
  .scheda__ico {
    inline-size: 15px;
    block-size: 15px;
    flex: none;
  }
  .scheda__voce-valore {
    margin: 0;
    font-weight: 300; /* D-127: risultati in light, i titoli portano il peso */
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-text);
    overflow-wrap: anywhere;
  }
  /* Card titoli: righe tipo → testo con separatore dashed. Il Kanji porta
     lang="ja": glifi CJK corretti e pronuncia giusta negli screen reader. */
  .scheda__voce-valore--lista {
    display: grid;
  }
  .scheda__titolo-riga {
    display: grid;
    grid-template-columns: minmax(5.5rem, max-content) 1fr;
    gap: 10px;
    align-items: baseline;
    padding-block: 3px;
  }
  .scheda__titolo-riga + .scheda__titolo-riga {
    border-block-start: 1px dashed light-dark(#dcdcdc, rgb(255 255 255 / 0.12));
  }
  .scheda__titolo-tipo {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
  }
  .scheda__titolo-testo {
    font-weight: 300; /* D-127: come i valori, in light */
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  /* D-118: valore segnaposto "-" — visibile ma in tinta muta: non sembra
     un dato reale, ma la voce esiste e si vede che esiste. */
  .scheda__titolo-testo--segnaposto {
    color: var(--color-text-muted);
    font-weight: 400;
  }
  /* Badge stato: pallino verde pulsante se in onda (l'animazione si spegne
     con prefers-reduced-motion), grigio neutro per concluso/altro. */
  .scheda__stato-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px;
    border-radius: 100px;
    background: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08));
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
  }
  .scheda__stato-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: light-dark(#98a0a8, #8b929b);
    flex: none;
  }
  .scheda__stato-badge--attivo {
    color: light-dark(#2e7d32, #7fd98a);
  }
  .scheda__stato-badge--attivo .scheda__stato-dot {
    background: #2e7d32;
    animation: scheda-pulse 2s ease-in-out infinite;
  }
  @keyframes scheda-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.35;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .scheda__stato-dot {
      animation: none;
    }
  }

  /* ===== 3. TRAMA ===== */
  .scheda__paragrafo {
    margin: 0 0 12px;
    line-height: 1.7;
    color: var(--color-text);
    /* Best practice 2026: la misura di lettura ottimale della prosa è
       65–75 caratteri per riga; a piena colonna (~95ch) la trama affatica. */
    max-inline-size: 72ch;
    /* D-115: corpo della trama in Poppins Light 300, come il testo degli
       articoli (richiesta owner 2026-09-15, qui estesa alle schede). */
    font-weight: 300;
  }

  /* ===== 4. STREAMING ===== */
  .scheda__stream {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
  }
  .scheda__stream-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--band-bg);
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
  }
  .scheda__stream-link:hover {
    background: var(--color-primary);
    color: #fff;
  }

  /* ===== 4b. STREAMING + SOCIAL (D-106) — CSS reale del child theme OCN
     (child-style.min.css): caselle 65px con bordo colore piattaforma,
     logo 90x40, disabled opacity .45; social tondi 48px con badge JP. */
  .scheda__streaming {
    display: flex;
    gap: 16px;
    width: 100%;
  }
  .scheda__stream-btn {
    flex: 1;
    height: 65px;
    background: linear-gradient(to bottom, #ffffff, #f3f3f3);
    border-radius: 12px;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  /* bordo colore piattaforma: il child theme usa :has(.logo) — qui classe
     diretta (equivalente, senza costo di :has) */
  .scheda__stream-btn--crunchyroll { border-color: #f47521; }
  .scheda__stream-btn--disney { border-color: #113ccf; }
  .scheda__stream-btn--netflix { border-color: #e50914; }
  .scheda__stream-btn--prime { border-color: #00a8e1; }
  .scheda__stream-btn--yamato { border-color: #e60012; }
  .scheda__stream-btn--dynit { border-color: #e6cf00; }
  .scheda__stream-btn--anigen { border-color: #00a8e1; }
  a.scheda__stream-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  }
  .scheda__stream-btn--disabilitato {
    opacity: 0.45;
    pointer-events: none;
  }
  .scheda__stream-logo {
    width: 90px;
    height: 40px;
    object-fit: contain;
  }
  .scheda__social-blocco {
    margin-top: var(--space-md);
  }
  .scheda__social {
    display: flex;
    gap: 12px;
  }
  .scheda__social-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    position: relative;
    text-decoration: none;
  }
  .scheda__social-btn svg {
    width: 20px;
    height: 20px;
  }
  .scheda__social-btn--official { border-color: #33aeff; color: #555; }
  .scheda__social-btn--x,
  .scheda__social-btn--x_jp { border-color: #000; color: #000; }
  .scheda__social-btn--instagram { border-color: #e1306c; color: #e1306c; }
  .scheda__social-btn--facebook { border-color: #1877f2; color: #1877f2; }
  .scheda__social-btn--youtube { border-color: #e60012; color: #e60012; }
  .scheda__social-btn--tiktok { border-color: #000; color: #000; }
  a.scheda__social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  }
  .scheda__social-btn--disabilitato {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }
  .scheda__social-jp {
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 12px;
    font-weight: 800;
    color: #000;
    letter-spacing: -0.5px;
    pointer-events: none;
    text-shadow: 0 0 2px #fff;
    line-height: 1;
  }
  /* testo accessibile nascosto visivamente (scope del componente) */
  .scheda__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* ===== 5-6. PANNELLI LATERALI ===== */
  .scheda__lato {
    display: grid;
    gap: var(--space-md);
    align-content: start;
  }
  /* D-122: sidebar sticky a doppia ancora (stesso schema D-031 degli
     articoli): entra nel viewport → si fissa in alto; più alta del
     viewport → scorre finché il fondo raggiunge il bordo inferiore.
     Zero scroll interno → niente scroll-trap. Solo da ≥901px: su mobile
     è nel flusso dopo la card. */
  @media (min-width: 901px) {
    .scheda__lato {
      position: sticky;
      inset-block: var(--space-md);
      align-self: start;
    }
  }
  /* D-119: streaming e social compatti per la colonna da 320px — i 4
     bottoni streaming vanno su griglia 2×2 (una riga da 4 sarebbe ~60px
     per bottone: il logo non ci sta), i social su una riga (5×48px + gap). */
  .scheda__lato .scheda__streaming {
    flex-wrap: wrap;
    gap: 10px;
  }
  .scheda__lato .scheda__stream-btn {
    flex: 1 1 calc(50% - 5px);
    height: 60px;
  }
  .scheda__lato .scheda__stream-logo {
    max-width: 86%;
    height: auto;
  }
  .scheda__lato .scheda__social {
    flex-wrap: wrap;
    gap: 9px;
  }
  .scheda__pannello {
    padding: 16px;
    border-radius: var(--radius-card, 15px);
    background: var(--band-bg);
  }
  .scheda__h2--pannello {
    font-size: 1.0625rem;
    margin-block-end: 10px;
  }
  .scheda__score {
    display: grid;
    gap: 10px;
  }
  .scheda__score-item {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px;
    border-radius: 10px;
    background: light-dark(rgb(0 0 0 / 0.045), rgb(255 255 255 / 0.05));
  }
  .scheda__score-valore {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .scheda__score-valore--minore {
    font-size: 1.125rem;
  }
  .scheda__score-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }
  .scheda__score-doppio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .scheda__criteri {
    margin: 0;
    display: grid;
    gap: 10px;
  }
  .scheda__criterio {
    display: grid;
    gap: 4px;
  }
  .scheda__criterio-testo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
  }
  .scheda__criterio-voto {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-primary);
  }
  .scheda__criterio-barra {
    margin: 0;
    block-size: 8px;
    border-radius: 100px;
    background: var(--neutral-200);
    overflow: hidden;
  }
  .scheda__criterio-fill {
    display: block;
    block-size: 100%;
    inline-size: var(--pct, 0%);
    background: var(--color-primary);
    border-radius: inherit;
  }

  .scheda__stats {
    margin: 0;
    display: grid;
    /* CSS reale del plugin (hikarudb-stats.css): 4 colonne desktop,
       3 a 1024px, 2 a 768px, gap 14px. */
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  @media (max-width: 1024px) {
    .scheda__stats {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 768px) {
    .scheda__stats {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .scheda__stat {
    /* Card del plugin: grigio chiaro, bordo #dcdcdc, ombra + hover lift.
       Dark mode: stessi valori sui token (il plugin non ha variante scura). */
    padding: 12px 14px;
    border-radius: 10px;
    background: light-dark(#f2f2f2, rgb(255 255 255 / 0.06));
    border: 1px solid light-dark(#dcdcdc, rgb(255 255 255 / 0.12));
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .scheda__stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgb(0 0 0 / 0.08);
  }
  .scheda__stat-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
    color: #f3081e; /* D-127: rosso owner, come la scheda tecnica */
  }
  .scheda__stat-valore {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300; /* D-128: risultati in light, come la scheda tecnica */
    font-size: 18px;
    line-height: 1.1;
    color: var(--color-text);
  }

  /* ===== 6b. GRAFICO STATISTICHE (D-109) — replica CSS puro del grafico
     ApexCharts del plugin: colonne arrotondate distribuite, stessa palette
     (#4e9cff/#00c853/#ffca28/#ff5252/#9c27b0), altezza ~350px. */
  .scheda__chart {
    margin: 30px 0 0; /* wrapper del plugin: 30px */
  }
  .scheda__chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 280px;
    padding: 0 2px;
  }
  .scheda__chart-col {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }
  .scheda__chart-valore {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }
  .scheda__chart-barra {
    width: 100%;
    max-width: 72px;
    height: var(--h);
    min-height: 3px;
    background: linear-gradient(to top, color-mix(in srgb, var(--colore) 72%, transparent), var(--colore));
    border-radius: 8px 8px 3px 3px;
    transition: filter var(--duration-fast) var(--ease-out);
  }
  .scheda__chart-col:hover .scheda__chart-barra {
    filter: brightness(1.15);
  }
  /* D-114: i VALORI sopra le barre non prendono il colore della categoria
     (il giallo #ffca28 su fondo chiaro era ~1.5:1, illeggibile): testo neutro
     ad alto contrasto, mentre la barra resta a pieno colore del plugin.
     L'associazione valore→colore resta garantita dalla posizione: ogni valore
     poggia direttamente sulla propria barra. */
  .scheda__chart-valore {
    color: light-dark(var(--neutral-900), var(--neutral-100));
  }
  .scheda__chart-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
  }
  .scheda__chart-nota {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
  }
  @media (max-width: 480px) {
    .scheda__chart-bars {
      height: 220px;
    }
    .scheda__chart-label {
      font-size: 0.62rem;
    }
    .scheda__chart-valore {
      font-size: 0.66rem;
    }
  }

  /* ===== 7. STAFF ===== */
  /* D-125: area SCORREVOLE a barra laterale (richiesta owner): max due
     righe di card visibili (~420px), il resto si raggiunge con lo scroll
     interno — niente blocco unico chilometrico. Scrollbar brand come la
     trama (8px #fa5403, thin su Firefox). Il pannello ha già tabindex=0:
     raggiungibile e scorrevole anche da tastiera. */
  .scheda__persone {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    max-block-size: 420px;
    overflow-y: auto;
    padding-inline-end: 10px;
    scrollbar-width: thin;
    scrollbar-color: #fa5403 transparent;
  }
  .scheda__persone::-webkit-scrollbar {
    inline-size: 8px;
  }
  .scheda__persone::-webkit-scrollbar-track {
    background: light-dark(#f2f2f2, rgb(255 255 255 / 0.06));
    border-radius: 100px;
  }
  .scheda__persone::-webkit-scrollbar-thumb {
    background: #fa5403;
    border-radius: 100px;
  }
  .scheda__persona {
    margin: 0;
    text-align: center;
  }
  .scheda__persona-img {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    background: var(--neutral-200);
  }
  .scheda__persona-nome {
    display: block;
    margin-block-start: 6px;
    font-size: 0.9375rem;
    color: var(--color-text);
  }
  .scheda__persona-ruolo {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }

  /* ===== 7b. TAB STAFF/CAST (D-113): pattern WAI-ARIA delle recensioni,
     in miniatura: tablist con bottoni a pill, pannello unico. ===== */
  .scheda__h2--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .scheda__persone-tablist {
    display: flex;
    gap: 8px;
    margin: 0 0 var(--space-md);
  }
  .scheda__persone-tab-btn {
    padding: 8px 18px;
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .scheda__persone-tab-btn[aria-selected='true'] {
    background: var(--color-primary);
    color: #fff;
  }
  .scheda__persone-tab-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* ===== 7c. TRAILER (D-124: spostato nella sidebar) — il facade 16:9
     riempie la larghezza del pannello (~288px). ===== */
  .scheda__trailer {
    max-inline-size: none;
  }
  .scheda__trailer-facade {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: #000;
    border-radius: var(--radius-card, 15px);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    aspect-ratio: 16 / 9;
  }
  .scheda__trailer-facade img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .scheda__trailer-facade:hover img {
    opacity: 1;
  }
  .scheda__trailer-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }
  .scheda__trailer iframe {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-card, 15px);
    display: block;
  }

  /* ===== 8. SIMILI (in carosello SnapCarousel: la vecchia griglia non
     serve più; le slide si adattano alle colonne del carosello). ===== */
  /* D-128: FASCIA FULL-BLEED — sfondo grigio a tutta larghezza (markup
     fuori dal container); le card tornano SUPERFICIE BIANCA: grigio su
     grigio si confonde, bianco su grigio è il contrasto delle fasce home. */
  .scheda__simili-band {
    background: var(--band-bg);
    padding-block: 22px 16px;
  }
  .scheda__simili-band .scheda__h2 {
    margin-block-end: 14px;
  }
  .scheda__simile {
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-card, 15px);
    overflow: hidden;
    background: light-dark(#fff, rgb(255 255 255 / 0.05));
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.07);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .scheda__simile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgb(0 0 0 / 0.14);
  }
  .scheda__simile-media {
    position: relative;
    display: block;
  }
  .scheda__simile-img {
    inline-size: 100%;
    aspect-ratio: 460 / 651;
    object-fit: cover;
    display: block;
    background: var(--neutral-200);
  }
  /* D-120: badge formato sovrapposto in alto a destra (chiave piuttosto
     che testo accanto al titolo come il live: in 258px non c'è spazio). */
  .scheda__simile-formato {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgb(0 0 0 / 0.62);
    backdrop-filter: blur(4px);
  }
  .scheda__simile-corpo {
    flex: 1; /* riempie la card: il footer voto+anno resta IN FONDO anche
                con titoli che availano a capo in modo diverso */
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 10px 11px;
  }
  .scheda__simile-titolo {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* D-128: max 2 righe — card uniformi, il footer resta in fondo */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
  }
  .scheda__simile-meta {
    margin-block-start: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .scheda__simile-voto {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .scheda__simile-anno {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
  }


/* ===== src/components/templates/ArchivioSchedeAnime.astro ===== */

  .arch-anime {
    padding-block: var(--space-lg) var(--space-xl);
  }

  /* D-129: due colonne — contenuti + sidebar (proporzioni articolo D-029
     e archivio termini D-062). Sotto 60rem: impilate, sidebar in coda. */
  .arch-anime__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-lg);
    align-items: start;
  }
  @media (max-width: 60rem) {
    .arch-anime__cols {
      grid-template-columns: 1fr;
    }
    .arch-anime__sidebar {
      order: 2;
    }
  }
  /* Sidebar sticky — STESSO pattern degli articoli (D-031-emenda): doppia
     ancora inset-block, nessuna scrollbar (D-060-bis). */
  .arch-anime__sidebar {
    display: grid;
    gap: var(--space-lg);
    align-content: start;
  }
  @media (min-width: 60rem) {
    .arch-anime__sidebar {
      position: sticky;
      align-self: start;
      inset-block: var(--space-md);
    }
  }

  /* D-066: cornice 89% dei caroselli (come gli altri template): il
     container 1140px stringeva le schede a ~277px. */
  .arch-anime__caroselli {
    inline-size: 89%;
    margin-inline: auto;
  }
  @media (max-width: 60rem) {
    .arch-anime__caroselli {
      inline-size: 95vw;
    }
  }
  .arch-anime-carousel {
    margin-block-start: var(--space-xl);
  }
  .arch-anime-carousel__titolo {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm) 0;
  }
  .arch-anime__testata {
    margin-block-end: var(--space-lg);
  }
  .arch-anime__titolo {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
  }
  .arch-anime__sottotitolo {
    margin: 6px 0 0;
    color: var(--color-text-muted);
  }
  .arch-anime__ricerca-titolo,
  .arch-anime__sezione-titolo {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--color-text);
  }
  .arch-anime__sezione-titolo {
    margin-block-start: var(--space-lg);
  }

  /* Ricerca avanzata: barra compatta (stessa estetica delle fasce del sito). */
  /* D-104: la barra ricerca usa la fascia del tema (chiaro/dark nativi). */
  .ricerca {
    display: grid;
    grid-template-columns: 2fr repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border-radius: var(--radius-card, 15px);
    background: var(--band-bg);
  }
  @media (max-width: 860px) {
    .ricerca {
      grid-template-columns: 1fr 1fr;
    }
    .ricerca__campo--testo {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 480px) {
    .ricerca {
      grid-template-columns: 1fr;
    }
  }
  .ricerca__campo {
    display: grid;
    gap: 4px;
    min-inline-size: 0;
  }
  .ricerca__label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: light-dark(rgb(0 0 0 / 0.62), rgb(255 255 255 / 0.62));
  }
  .ricerca__input,
  .ricerca__select {
    inline-size: 100%;
    padding: 9px 12px;
    border: 1px solid var(--neutral-300);
    border-radius: 9px;
    background: light-dark(#fff, var(--neutral-800));
    color: light-dark(var(--neutral-900), var(--neutral-100));
    font-family: var(--font-sans);
    font-size: 0.9375rem;
  }
  .ricerca__input:focus-visible,
  .ricerca__select:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
  }
  .ricerca__reset {
    padding: 9px 16px;
    border: 0;
    border-radius: 9px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 600;
    cursor: pointer;
  }

  .arch-anime__conto {
    margin: 0 0 10px;
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }
  /* D-129: con la sidebar da 320px, 4 colonne non ci stavano più: la
     griglia passa a 3 fisse da ≥60rem (come l'archivio termini), auto-fit
     sotto. Le schede respirano meglio (D-104: erano 4 strette). */
  .griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 14px;
  }
  @media (min-width: 60rem) {
    .griglia {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .griglia__voce[hidden] {
    display: none;
  }
  .arch-anime__vuoto {
    margin-block-start: var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
  }

  /* D-132: le due colonne generi (include=verde / esclude=rosso, colori
     del live #137333 / #c5221f). Dropdown unico riposizionato via JS. */
  .ricerca__generi {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  @media (max-width: 480px) {
    .ricerca__generi {
      grid-template-columns: 1fr;
    }
  }
  .ricerca__genere-col {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 12px;
    border-radius: 9px;
    background: light-dark(#fff, var(--neutral-800));
    border: 1px solid var(--neutral-300);
  }
  .ricerca__genere-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .ricerca__genere-titolo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }
  .ricerca__genere-titolo::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--hcn-success, #10b981);
  }
  .ricerca__genere-col--out .ricerca__genere-titolo::before {
    background: var(--hcn-danger, #ef4444);
  }
  .ricerca__tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 26px;
  }
  .ricerca__tag-container:empty::before {
    content: "Nessun genere selezionato";
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }
  .ricerca__dropdown {
    position: absolute;
    z-index: 30;
    max-block-size: 200px;
    overflow-y: auto;
    padding: 4px;
    background: light-dark(#fff, var(--neutral-800));
    border: 1px solid var(--neutral-300);
    border-radius: 9px;
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.15);
  }
  .ricerca__aggiungi {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--neutral-300);
    border-radius: 7px;
    background: light-dark(#fff, var(--neutral-800));
    color: var(--color-text);
    cursor: pointer;
  }
  .ricerca__aggiungi:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
  }


/* ===== src/components/templates/ArchivioSchedeAnime.astro ===== */

  /* D-132: tag generi e voci dropdown sono creati via JS → NON ricevono
     l'attributo scope di Astro (stesso motivo del D-079 in SearchModal):
     stili globali con prefisso classe unico .ricerca__ = zero collisioni.
     Colori del live: include #137333 su #e6f4ea, escludere #c5221f su
     #fce8e6; dark = stesse tinte con alpha (sopra qualunque superficie). */
  .ricerca__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .ricerca__tag--in {
    background: #e6f4ea;
    color: #137333;
    border: 1px solid #ceead6;
  }
  .ricerca__tag--out {
    background: #fce8e6;
    color: #c5221f;
    border: 1px solid #fad2cf;
  }
  [data-theme='dark'] .ricerca__tag--in {
    background: rgb(19 115 51 / 0.28);
    color: #a5d6b2;
    border-color: rgb(165 214 178 / 0.4);
  }
  [data-theme='dark'] .ricerca__tag--out {
    background: rgb(197 34 31 / 0.28);
    color: #f3b3ae;
    border-color: rgb(243 179 174 / 0.4);
  }
  .ricerca__tag-rimuovi {
    border: 0;
    padding: 0 2px;
    background: none;
    color: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
  }
  .ricerca__dropdown-voce {
    display: block;
    inline-size: 100%;
    padding: 6px 10px;
    font-size: 0.8125rem;
    cursor: pointer;
    border-radius: 7px;
    border: 0;
    background: none;
    text-align: left;
    color: var(--color-text);
  }
  .ricerca__dropdown-voce:hover {
    background: var(--band-bg);
    color: var(--color-brand);
  }
  .ricerca__dropdown-voce[aria-disabled='true'] {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
  }


/* ===== src/components/templates/ArchivioRecensioni.astro ===== */

  /* Stesso foglio di stile di ArchivioTermine (D-060→D-066) con prefisso
     archrec__: intestazione, colonne 320px, griglia 3 fisso, sidebar sticky
     a doppia ancora, paginazione compatta, caroselli in cornice 89%. */
  .archrec__titoletto {
    font-size: 1.5rem;
    font-weight: 700;
    margin: var(--space-md) 0 var(--space-sm) 0;
    padding-block-end: 0.5rem;
    border-block-end: 3px solid var(--color-primary);
    display: inline-block;
  }

  .archrec__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-lg);
    align-items: start;
  }
  @media (max-width: 60rem) {
    .archrec__cols {
      grid-template-columns: 1fr;
    }
    .archrec__sidebar {
      order: 2;
    }
  }

  .archrec__grid {
    display: grid;
    gap: var(--grid-gap, 10px);
  }
  @media (min-width: 60rem) {
    .archrec__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 59.99rem) {
    .archrec__grid {
      grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    }
  }

  .archrec__sidebar {
    display: grid;
    gap: var(--space-lg);
    align-content: start;
  }
  @media (min-width: 60rem) {
    .archrec__sidebar {
      position: sticky;
      align-self: start;
      inset-block: var(--space-md);
    }
  }

  .archrec-pagin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-block-start: var(--space-lg);
  }
  .archrec-pagin__gap {
    padding-inline: 0.25rem;
    color: var(--color-text-muted);
  }
  .archrec-pagin__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .archrec-pagin__link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  .archrec-pagin__link.is-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
  }

  .archrec__caroselli {
    inline-size: 89%;
    margin-inline: auto;
  }
  @media (max-width: 60rem) {
    .archrec__caroselli {
      inline-size: 95vw;
    }
  }

  .archrec-carousel {
    margin-block-start: var(--space-xl);
  }
  .archrec-carousel__titolo {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm) 0;
  }


/* ===== src/components/templates/ArchivioTermine.astro ===== */

  /* Due colonne: contenuti + sidebar (le proporzioni della variante
     articolo, D-029). */
  .arch__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-lg);
    align-items: start;
  }
  @media (max-width: 60rem) {
    .arch__cols {
      grid-template-columns: 1fr;
    }
    .arch__sidebar {
      order: 2;
    }
  }

  /* D-061: intestazione come il live — "Presenti nell'archivio:" H2 con
     la barra arancione sotto; l'h1 è nel hero della categoria (D-065). */
  .arch__titoletto {
    font-size: 1.5rem;
    font-weight: 700;
    margin: var(--space-md) 0 var(--space-sm) 0;
    padding-block-end: 0.5rem;
    border-block-end: 3px solid var(--color-primary);
    display: inline-block;
  }

  /* Indicatore pagina visibile SOLO agli screen reader (D-064: l'owner
     vuole via la scritta "Pagina 1 di 55" — la posizione resta nel
     contesto della paginazione aria-label e nel <title>). */
  .arch__lead-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* D-060-bis: griglia contenuto a 3 COLONNE FISSE da viewport ≥60rem
     (la .grid--3 globale è auto-fit min 288px: con la sidebar da 320px
     ne entravano solo 2 — difetto visto dall'owner). Sotto: auto-fit. */
  .arch__grid {
    display: grid;
    gap: var(--grid-gap, 10px);
  }
  @media (min-width: 60rem) {
    .arch__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 59.99rem) {
    .arch__grid {
      grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    }
  }

  /* Sidebar sticky — STESSO pattern degli articoli (D-031-emenda): doppia
     ancora inset-block, NESSUN overflow/scrollbar (emenda D-060-bis). */
  .arch__sidebar {
    display: grid;
    gap: var(--space-lg);
    align-content: start;
  }
  @media (min-width: 60rem) {
    .arch__sidebar {
      position: sticky;
      align-self: start;
      inset-block: var(--space-md);
    }
  }

  /* Paginazione (D-060): pills numerate, corrente invertita. */
  .arch-pagin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-block-start: var(--space-lg);
  }
  .arch-pagin__gap {
    padding-inline: 0.25rem;
    color: var(--color-text-muted);
  }
  .arch-pagin__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem; /* target tattile ≥44px (WCAG 2.5.8) */
    padding-inline: 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .arch-pagin__link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  .arch-pagin__link.is-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
  }

  /* D-066: cornice 89% dei caroselli (come il template articolo, dove le
     slide del carosello valgono ~420px a 1920): il container 1140px le
     stringeva a ~277px e le schede apparivano «troppo piccole». */
  .arch__caroselli {
    inline-size: 89%;
    margin-inline: auto;
  }
  @media (max-width: 60rem) {
    .arch__caroselli {
      inline-size: 95vw; /* coerenza con l'hero mobile (95vw, D-065) */
    }
  }

  /* Caroselli sotto i contenuti: separazione dal corpo. */
  .arch-carousel {
    margin-block-start: var(--space-xl);
  }
  .arch-carousel__titolo {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm) 0;
  }


/* ===== src/pages/404.astro ===== */

  .error {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
  }

  .error__code {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
  }


/* ===== src/pages/[...slug].astro ===== */

  .testata {
    display: grid;
    gap: var(--space-2xs);
    margin-block-end: var(--space-lg);
  }

  .copertina {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-block-end: var(--space-xl);
  }

  .chiusura {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-lg);
    border-block-start: var(--border-width) solid var(--color-border);
    font-weight: 600;
  }



@layer components {
  .prose {
    max-width: 68ch;
    color: var(--color-text);
  }

  .prose > * + * {
    margin-block-start: var(--space-md);
  }

  .prose > :is(h2, h3, h4) {
    margin-block-start: var(--space-xl);
  }

  .prose ul,
  .prose ol {
    padding-inline-start: 1.35em;
    display: grid;
    gap: var(--space-3xs);
  }

  .prose li::marker {
    color: var(--color-primary);
  }

  .prose a {
    font-weight: 500;
  }

  .prose img,
  .prose figure {
    border-radius: var(--radius-md);
  }

  .prose figcaption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-block-start: var(--space-2xs);
    text-align: center;
  }

  .prose :is(.alignleft) {
    float: left;
    margin-inline-end: var(--space-md);
  }

  .prose :is(.alignright) {
    float: right;
    margin-inline-start: var(--space-md);
  }

  .prose :is(.aligncenter) {
    margin-inline: auto;
  }

  /* Wrapper responsive per gli embed (iframe video, mappe). */
  .prose iframe,
  .embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: var(--radius-md);
  }

  .prose table {
    display: block;
    overflow-x: auto;
  }

  /* --- Tabelle dati su smartphone (D-047): la filosofia del CSS Elementor
     del live (compressione per far ENTRARE la tabella) ma senza i suoi
     difetti (D-047: overflow hidden che taglia l'ultima colonna, nth-child
     che presume 7 colonne, #ddd hardcoded, !important, scale(1) morto).

     Mapping colonne dal FONDO (nth-last-child): le tabelle ranking hanno la
     stessa forma a SPECCHIO — # + Titolo + [Editore + Autore solo su
     light-novel (7 col)] + numeri a destra (Copie/Var./Totale). Così le
     regole valgono sia per 6 che 7 colonne senza duplicare i selettori.

     Rete di sicurezza: overflow-x rest AUTO (WCAG 1.4.10 esenta le tabelle
     dati e VIETA nascondere contenuto): se la compressa non entra (≤340px
     o titoli lunghissimi) scrolla invece di tagliare. --- */
  @media (max-width: 480px) {
    .prose table {
      width: 100%;
      table-layout: auto;
      /* 0.65em del live ≈ 10px: troppo piccolo. 0.72em ≈ 11.5px sul corpo
         16px — compatto ma leggibile (soglia confortevole mobile ≥11px). */
      font-size: 0.72em;
      line-height: 1.25;
      border-collapse: collapse;
    }

    .prose table th,
    .prose table td {
      padding: 4px 3px;
      /* Token di tema (dark mode compatibile), non il #ddd del live. */
      border: 1px solid var(--color-border);
    }

    /* TESTATA: va a capo ("Copie totali" su due righe), allineata al fondo. */
    .prose table th {
      white-space: normal;
      line-height: 1.1;
      vertical-align: bottom;
    }

    /* TITOLO (2ª colonna): il "motore" — si allunga quanto serve. */
    .prose table td:nth-child(2) {
      white-space: normal;
      word-break: break-word;
      text-align: start;
    }

    /* NUMERI (ultime 2: Var. e Totale/Copie totali): MAI a capo, leggermente
       più pesanti per la leggibilità a dimensione ridotta. width:1% li
       stringe al minimo cedendo spazio al titolo. */
    .prose table td:nth-last-child(-n + 2) {
      white-space: nowrap;
      width: 1%;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    /* La PRIMA delle colonne numeriche (Copie): nowrap come le altre. Con 7
       colonne è la 5ª, con 6 la 4ª: nth-last-child(3) le copre entrambe. */
    .prose table td:nth-last-child(3) {
      white-space: nowrap;
      width: 1%;
      font-variant-numeric: tabular-nums;
    }

    /* COLONNA # (prima): stretta, nowrap. */
    .prose table td:first-child {
      white-space: nowrap;
      width: 1%;
      text-align: center;
    }

    /* EDITORE E AUTORE (le colonne di mezzo, solo su 7 colonne): vanno a capo
       SOLO sugli spazi ("Square Enix" si spezza, "Shueisha" no) e stringono
       al minimo. Su 6 colonne non esistono: il selettore non matcha nulla. */
    .prose table td:nth-child(3),
    .prose table td:nth-child(4) {
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: normal;
      width: 1%;
      line-height: 1.15;
    }

    /* RETE DI SICUREZZA: se TUTTO ciò non basta (schermi ≤340px, font
       di sistema grandi, titoli eccezionalmente lunghi), la tabella scrolla
       orizzontalmente DENTRO il blocco testo — mai tagliata, mai overflow
       della pagina. display:block fa scorrere la tabella come blocco. */
    .prose table {
      overflow-x: auto;
    }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-md));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-space, var(--space-sm));
    align-items: center;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-space, var(--space-md));
  }

  .text-center {
    text-align: center;
  }

  .text-muted {
    color: var(--color-text-muted);
  }

  .measure-narrow {
    max-width: 48ch;
  }

  .bg-surface {
    background-color: var(--color-surface);
  }

  .bg-surface-raised {
    background-color: var(--color-surface-raised);
  }

  .full-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

/* ===== Commenti WP nativi (single.php → comments.php): fuori da .prose
   (l'h2 arancione con barra è SOLO del corpo articolo), stile sobrio con
   i token del tema. ==================================================== */
/* D-152 — il plugin AniPal imposta html,body { overflow-x: hidden !important }:
   «hidden» sul body crea uno SCROLL CONTAINER e position:sticky della
   sidebar articolo si aggancia a lui invece che alla finestra → mai fissa.
   «clip» taglia gli sbordi orizzontali SENZA creare scroll container:
   stesso effetto visivo, sticky funzionante. «html body» (0-0-2) batte il
   selettore del plugin («html, body», 0-0-1) a parità di !important. */
html body {
  overflow-x: clip !important;
}
.comments-area {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--border-width) solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

.comments-area .comments-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* come h3 articolo */
  color: var(--color-text);
  margin-block: 0 var(--space-md);
}

.comments-area .comment-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.comments-area .comment-list .comment-body {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.comments-area .comment-list .children {
  list-style: none;
  padding-inline-start: var(--space-lg);
  margin-block-start: var(--space-sm);
}

.comments-area .comment-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.comments-area .comment-meta .says {
  color: var(--color-text-muted);
}

.comments-area .comment-content {
  margin-block: var(--space-2xs) var(--space-xs);
}

.comments-area .reply a {
  font-size: var(--text-sm);
  font-weight: 500;
}

.comments-area .comment-form p {
  margin-block: var(--space-xs);
}

.comments-area .comment-form label {
  display: block;
  font-weight: 500;
  margin-block-end: var(--space-3xs);
}

.comments-area .comment-form input[type='text'],
.comments-area .comment-form input[type='email'],
.comments-area .comment-form input[type='url'],
.comments-area .comment-form textarea {
  inline-size: 100%;
  font: inherit;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm, 7px);
  background: var(--color-bg);
  color: var(--color-text);
}

.comments-area .comment-form .comments-submit {
  cursor: pointer;
  border: var(--border-width) solid var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-sm, 7px);
}

.comments-area .comment-form .comments-submit:hover {
  background: transparent;
  color: var(--color-primary);
}

/* ==========================================================================
   Link in bio (D-236) — pagina /link, template-link.php
   ========================================================================== */

.hcn-links__testata {
  text-align: center;
  margin-block: var(--space-lg, 32px) var(--space-md, 24px);
  position: relative;
  z-index: 1;
}

/* ---- Sfondo della pagina (D-236b): Immagine in evidenza della pagina ----
   L'immagine va caricata LARGA ~1920px (la pipeline D-138/139 genera da sola
   le taglie tablet 1024 e mobile 768 in WebP). Copre qualunque viewport:
   su mobile verticale taglia i fianchi (cover). Senza immagine: fallback
   pulito col fondo della pagina, zero markup. */
.hcn-links__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hcn-links__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Velo di contrasto per titolo e pulsanti: leggero in ENTRAMBI i temi —
   l'immagine dello sfondo è un gradiente disegnato (D-236b) e va vista:
   il velo serve solo a tenere leggibili titolo e testi sulle zone
   più chiare/scure della foto, le card hanno già il loro fondo. */
.hcn-links__scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    light-dark(rgba(255, 255, 255, 0.42), rgba(9, 9, 11, 0.38)),
    light-dark(rgba(255, 255, 255, 0.22), rgba(9, 9, 11, 0.26))
  );
}

/* Titolo e intro sullo sfondo: ombra morbida per la leggibilità su
   qualunque foto, senza veli pesanti. */
.hcn-links__titolo,
.hcn-links__intro {
  text-shadow: 0 1px 12px light-dark(rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.4));
}

/* Contenuto SOPRA sfondo e velo. NB: la skip-link resta position:absolute
   (fuori schermo finché non riceve focus) — non va toccata qui. */
.hcn-links-page main,
.hcn-links-page main .section .container {
  position: relative;
  z-index: 1;
}

.hcn-links__titolo {
  margin-block-start: var(--space-xs, 16px);
}

.hcn-links__intro {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-inline-size: 46ch;
  margin-inline: auto;
}

.hcn-links__sezione {
  margin-block-end: var(--space-md, 24px);
}

.hcn-links__heading {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin-block-end: var(--space-xs, 16px);
  /* D-237 (fix): l'h2 si RESTRINGE al suo testo (fit-content centrato):
     così il suo ::after a width 100% = larghezza INTERA della scritta.
     La prima versione (fit-content sul pseudo-elemento vuoto) non poteva
     funzionare: un content:'' non conosce la larghezza del testo del padre. */
  inline-size: fit-content;
  margin-inline: auto;
}

.hcn-links__heading::after {
  content: '';
  display: block;
  inline-size: 100%;
  min-inline-size: 42px;
  block-size: 3px;
  margin-block-start: var(--space-2xs, 8px);
  border-radius: 999px;
  background: var(--color-primary);
}

.hcn-links__sezione-desc {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-block-end: var(--space-xs, 16px);
}

.hcn-links__lista {
  display: grid;
  gap: var(--space-2xs, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hcn-links__btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-xs, 16px);
  padding: var(--space-2xs, 8px) var(--space-xs, 16px);
  background: var(--color-card-tint);
  border: var(--border-width, 1px) solid var(--border-card);
  border-radius: var(--radius-md, 14px);
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.hcn-links__btn:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.hcn-links__icona {
  inline-size: 48px;
  block-size: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm, 7px);
}

.hcn-links__icona--testo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-brand);
  font-weight: 700;
  font-size: var(--text-lg);
  font-family: var(--font-heading);
}

.hcn-links__corpo {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

.hcn-links__nome {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hcn-links__desc {
  /* D-237c — WCAG AA: --color-text-muted in light (neutral-400, 2.99:1 su
     card) NON passa. La descrizione usa una tinta più scura SOLO in light
     (neutral-600: 4.9:1) — in dark resta muted (5.7:1, ok). */
  color: light-dark(var(--neutral-600), var(--color-text-muted));
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.hcn-links__freccia {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* D-237 — Logo in testata (scelto dall'owner o logo del sito).
   Richiesta owner: NESSUN contenitore — niente cerchio, niente fondo,
   niente bordo: il logo (PNG trasparente) sta direttamente sullo sfondo
   della pagina. Altezza libera per rispettare le proporzioni del file. */
.hcn-links__logo {
  display: block;
  inline-size: 240px;
  max-inline-size: 60vw;
  block-size: auto;
  object-fit: contain;
  margin-inline: auto;
  margin-block-end: var(--space-xs, 16px);
}

/* Card EVENTO (div, non link): stessa forma dei pulsanti, niente hover/freccia. */
.hcn-links__btn--evento {
  cursor: default;
}

.hcn-links__btn--evento:hover {
  border-color: var(--border-card);
  transform: none;
}

/* Icona-CALENDARIO della card evento: quadrata, brand, giorno + mese. */
.hcn-links__icona--data {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.1;
  background: var(--color-primary);
}

.hcn-links__icona--data strong {
  font-size: var(--text-lg);
  font-family: var(--font-heading);
  color: var(--color-on-brand);
}

.hcn-links__icona--data small {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--color-on-brand);
  font-weight: 700;
}

.hcn-links__vuoto {
  text-align: center;
  color: var(--color-text-muted);
}

/* La pagina è standalone minimale (D-236): header/footer del tema assenti.
   D-237c: il padding verticale della .section del tema (24–36px) è TROPPO
   per questa pagina — sopra il logo si toglie, sotto si lascia solo il
   respiro minimo (il footer chiude comunque). */
.hcn-links-page .page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 0;
}

.hcn-links-page .section {
  padding-block-start: 0;
  padding-block-end: var(--space-md, 24px);
}

/* Richiesta owner: il logo sale di 10px extra. */
.hcn-links__logo {
  margin-block-start: -10px;
}

.hcn-links-page main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hcn-links-page main > .section {
  flex: 1;
}

.hcn-links__footer {
  text-align: center;
  margin-block: var(--space-xl, 48px) var(--space-2xl, 64px);
}

.hcn-links__home {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
}

.hcn-links__home:hover {
  text-decoration: underline;
}

/* D-247: newsletter su /link — stesso form del footer, senza pannello
   (no bordo/pannello: qui non c'è la fascia grigia del footer, il pannello
   non staccherebbe da nulla e quadruplicherebbe i bordi visivi con le 4
   sezioni CPT). Larghezza piena: il blocco respira dentro il container. */
.hcn-links__newsletter {
  margin-block-end: var(--space-lg, 32px);
  max-inline-size: 42rem;
}