/* AI Sul Serio — tema aisulserio: stili del sito.

   Fonte: brand/gate-1b/demo/assets/demo.css, i prototipi approvati da Antonio al Gate 1b (Home e pagina video),
   portati qui il 25/09/2026 senza cambiare classi e valori: le sezioni corrispondono 1:1 ai pattern aisulserio/*.
   Tolti solo la barra del prototipo e i @font-face (WordPress li stampa da theme.json, con i font di assets/fonts).
   Sotto la demo, la sezione «ADATTAMENTI WORDPRESS»: come i blocchi del core prendono l'aspetto dei componenti.

   Regola: nessun colore, font, raggio o spessore "a mano": passano dai token (assets/tokens/tokens.css, generato da
   packages/tokens). Restano scritti a mano solo alcuni valori geometrici della demo (spostamenti di 1–3 px negli stati
   hover/active, raggi dei puntini del retino, misure in cqi delle miniature disegnate in CSS): vedi
   brand/gate-1b/demo/README.md, «Revisione», punto 18. Mobile first; breakpoint in em (token breakpoint):
   30em 480 px · 48em 768 px · 64em 1024 px · 80em 1280 px.

   Se si ritocca la demo, si riporta qui la stessa modifica (e viceversa): la demo resta il riferimento visivo. */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ass-space-20) + var(--ass-space-2)); }
body {
  margin: 0;
  background: var(--ass-color-bg);
  color: var(--ass-color-text);
  font: var(--ass-text-body);
  letter-spacing: var(--ass-text-body-tracking);
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
::selection { background: var(--ass-color-selection-bg); color: var(--ass-color-selection-text); }

h1 { font: var(--ass-text-h1); letter-spacing: var(--ass-text-h1-tracking); }
h2 { font: var(--ass-text-h2); letter-spacing: var(--ass-text-h2-tracking); }
h3 { font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking); }
h4 { font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking); }
.display { font: var(--ass-text-display); letter-spacing: var(--ass-text-display-tracking); }

a {
  color: var(--ass-color-link);
  text-decoration-line: underline;
  text-decoration-color: var(--ass-color-link-underline);
  text-decoration-thickness: var(--ass-border-sm);
  text-underline-offset: 0.2em;
  border-radius: var(--ass-radius-xs);
  transition: background-color var(--ass-duration-fast) var(--ass-ease-standard), color var(--ass-duration-fast) var(--ass-ease-standard);
}
a:hover { background-color: var(--ass-color-link-hover-bg); color: var(--ass-color-link-hover-text); text-decoration-color: var(--ass-color-link-hover-text); }
:focus-visible { outline: var(--ass-focus-outline); outline-offset: var(--ass-border-sm); }
/* Anello di focus (decisione del 03/10/2026, richiesta di Antonio): solo da tastiera (:focus-visible, mai al clic del
   mouse o al tocco) e, sui componenti con il bordo d'inchiostro, al posto del bordo: stessa forma e stesso raggio,
   nessun secondo riquadro staccato. Lo spessore dell'anello (3 px) copre il bordo (2–3 px) e l'ombra fumetto resta.
   Il corallo del focus ha più di 4,5:1 sull'inchiostro e più di 3:1 sulla carta e sul bordo chiaro del tema scuro. */
:is(.btn, .wp-block-button__link, .nl-form__row .field, .modulo-ricerca .wp-block-search__input, .modulo-ricerca .wp-block-search__button, .paginazione :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next)):focus-visible { outline-offset: calc(-1 * var(--ass-border-md)); }
:is(.icon-btn, .field, .tag, .search-dialog__hints a, .articolo__tag a, .social a, .paginazione .page-numbers):focus-visible { outline-offset: calc(-1 * var(--ass-border-sm)); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.icon--xs { width: 0.9em; height: 0.9em; vertical-align: -0.05em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: calc(var(--ass-layout-wide) + 2 * var(--ass-layout-gutter)); margin-inline: auto; padding-inline: var(--ass-layout-gutter); }
.section { padding-block: var(--ass-layout-section); }
.section--alt { background: var(--ass-color-surface-alt); border-block: var(--ass-border-hairline) solid var(--ass-color-line); }
.section:not(.section--alt) + .section:not(.section--alt), .hero + .section:not(.section--alt) { padding-top: 0; }

.eyebrow {
  font: var(--ass-text-eyebrow);
  letter-spacing: var(--ass-text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ass-color-muted);
  margin-bottom: var(--ass-space-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ass-space-2);
}
.hl {
  background: var(--ass-highlight);
  color: var(--ass-color-on-highlight);
  padding-inline: 0.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.skip-link {
  position: absolute; left: var(--ass-space-4); top: calc(-1 * var(--ass-space-20)); z-index: var(--ass-z-skip-link);
  background: var(--ass-color-accent); color: var(--ass-color-accent-ink);
  border: var(--ass-border-md) solid var(--ass-color-ink); border-radius: var(--ass-radius-pill);
  padding: var(--ass-space-2) var(--ass-space-4); font-weight: var(--ass-font-weight-bold);
}
.skip-link:focus { top: var(--ass-space-3); }

/* ------------------------------------------------------------------ pulsanti, tag, campi */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ass-space-2);
  min-height: var(--ass-space-12);
  padding: var(--ass-space-3) var(--ass-space-5);
  font: var(--ass-font-weight-bold) var(--ass-font-size-base)/var(--ass-line-height-none) var(--ass-font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--ass-color-text); background: var(--ass-color-surface);
  border: var(--ass-border-md) solid var(--ass-color-border);
  border-radius: var(--ass-radius-pill);
  box-shadow: var(--ass-shadow-md);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--ass-shadow-lg); background: var(--ass-color-surface); color: var(--ass-color-text); }
.btn:active { transform: translate(3px, 3px); box-shadow: var(--ass-shadow-pressed); }
.btn--primary, .btn--primary:hover { background: var(--ass-color-accent); color: var(--ass-color-accent-ink); border-color: var(--ass-color-ink); }
.btn--ghost { background: var(--ass-color-surface); }
.btn--dark, .btn--dark:hover { background: var(--ass-color-inverse-bg); color: var(--ass-color-inverse-text); border-color: var(--ass-color-inverse-bg); }
.btn--sm { min-height: 2.75rem; padding: var(--ass-space-2) var(--ass-space-4); font-size: var(--ass-font-size-sm); box-shadow: var(--ass-shadow-sm); }
.btn--sm:hover { box-shadow: var(--ass-shadow-md); }
/* Pieni d'inchiostro (pulsanti scuri, miniature e copertine inchiostro, facciata del video): l'ombra fumetto
   inchiostro si fonderebbe col fondo e farebbe un contorno a gradini. Qui l'ombra è lime, come nel blocco «Per aziende». */
.btn--dark, .btn--dark:hover, .copy-btn.is-copied { box-shadow: var(--ass-space-1) var(--ass-space-1) 0 0 var(--ass-color-c1); }
.btn--dark:active { box-shadow: var(--ass-shadow-pressed); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--ass-space-3); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ass-space-2);
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--ass-space-3);
  color: var(--ass-color-text); background: var(--ass-color-surface);
  border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-pill);
  font: var(--ass-font-weight-bold) var(--ass-font-size-sm)/1 var(--ass-font-body);
  cursor: pointer;
}
.icon-btn:hover { background: var(--ass-color-accent); color: var(--ass-color-accent-ink); border-color: var(--ass-color-ink); }

.tags { display: flex; flex-wrap: wrap; gap: var(--ass-space-2); }
.tag {
  display: inline-flex; align-items: center;
  font: var(--ass-font-weight-semibold) var(--ass-font-size-xs)/var(--ass-line-height-snug) var(--ass-font-body);
  padding: 0.2em 0.7em;
  border: var(--ass-border-sm) solid var(--ass-color-line);
  border-radius: var(--ass-radius-pill);
  color: var(--ass-color-muted);
}
.tag--lime { background: var(--ass-color-accent); color: var(--ass-color-accent-ink); border-color: var(--ass-color-ink); }
.tag--aqua { background: var(--ass-color-info); color: var(--ass-color-info-ink); border-color: var(--ass-color-ink); }

.label-self {
  display: inline-block;
  font: var(--ass-font-weight-bold) var(--ass-font-size-xs)/1 var(--ass-font-mono);
  letter-spacing: var(--ass-tracking-caps); text-transform: uppercase;
  padding: 0.35em 0.6em;
  border: var(--ass-border-sm) dashed currentColor; border-radius: var(--ass-radius-xs);
  color: var(--ass-color-muted);
}

.field {
  min-height: var(--ass-space-12); width: 100%;
  padding: 0 var(--ass-space-4);
  font: var(--ass-text-body);
  color: var(--ass-color-text); background: var(--ass-color-surface);
  border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-md);
}
.field::placeholder { color: var(--ass-color-muted); opacity: 1; }

.more-link {
  display: inline-flex; align-items: center; gap: var(--ass-space-1);
  font-weight: var(--ass-font-weight-bold); white-space: nowrap;
}
.more-link .icon { transition: transform var(--ass-duration-fast) var(--ass-ease-standard); }
.more-link:hover .icon { transform: translateX(3px); }

.card {
  background: var(--ass-color-surface);
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-lg);
  box-shadow: var(--ass-shadow-md);
  padding: var(--ass-space-6);
}

.panel {
  position: relative; isolation: isolate;
  border: var(--ass-border-lg) solid var(--ass-color-border);
  border-radius: var(--ass-radius-xl);
  box-shadow: var(--ass-shadow-xl);
}
/* pannello "illustrazione": resta carta in entrambi i temi, come la tavola di un fumetto */
.panel--art { background: var(--ass-color-paper); color: var(--ass-color-ink); border-color: var(--ass-color-ink); }
.panel--art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background-image: radial-gradient(var(--ass-color-lime-dot) 1.4px, transparent 1.6px);
  background-size: var(--ass-pattern-halftone-size);
  opacity: var(--ass-opacity-halftone);
}
.panel--accent { background: var(--ass-color-accent-soft); }
/* Tema scuro: la tinta lime-soft-dark (#2F3D23) usciva color oliva. Pannelli, capitolo attivo e hover del menu
   passano a superficie + filo lime. Stessa regola per il tema dal sistema e per [data-theme="dark"]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel--accent { background: var(--ass-color-surface); border-color: var(--ass-color-c1); }
  :root:not([data-theme="light"]) .chapter:hover,
  :root:not([data-theme="light"]) .chapter[aria-current="true"] { background: var(--ass-color-surface-alt); box-shadow: inset var(--ass-space-1) 0 0 0 var(--ass-color-c1); }
  :root:not([data-theme="light"]) .site-nav a:hover { background: var(--ass-color-surface-alt); }
  :root:not([data-theme="light"]).js .site-nav.is-open a[aria-current="page"] { background: var(--ass-color-surface-alt); }
}
[data-theme="dark"] .panel--accent { background: var(--ass-color-surface); border-color: var(--ass-color-c1); }
[data-theme="dark"] .chapter:hover,
[data-theme="dark"] .chapter[aria-current="true"] { background: var(--ass-color-surface-alt); box-shadow: inset var(--ass-space-1) 0 0 0 var(--ass-color-c1); }
[data-theme="dark"] .site-nav a:hover { background: var(--ass-color-surface-alt); }
[data-theme="dark"].js .site-nav.is-open a[aria-current="page"] { background: var(--ass-color-surface-alt); }
.panel--accent::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background-image: var(--ass-pattern-halftone); background-size: var(--ass-pattern-halftone-size);
  opacity: var(--ass-opacity-halftone);
}

/* ------------------------------------------------------------------ PATTERN header */
.site-header {
  position: sticky; top: 0; z-index: var(--ass-z-header);
  background: var(--ass-color-bg);
  border-bottom: var(--ass-border-sm) solid var(--ass-color-border);
}
.site-header__bar { display: flex; align-items: center; gap: var(--ass-space-3); min-height: 4.25rem; padding-block: var(--ass-space-2); }
.brand {
  display: inline-flex; align-items: center; gap: var(--ass-space-2);
  text-decoration: none; color: var(--ass-color-text);
  font: var(--ass-font-weight-extrabold) var(--ass-font-size-md)/1 var(--ass-font-display);
  letter-spacing: var(--ass-tracking-tight); white-space: nowrap;
  margin-right: auto;
}
.brand:hover { background: none; color: var(--ass-color-text); }
/* logo Gate 1b (brand/gate-1b/logo/outline): compatto sul chiaro, versione "dark" sui fondi scuri (min. 180 px) */
.brand__logo { display: block; height: 3rem; width: auto; }
.brand__logo--dark { display: none; height: 3.55rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo--light { display: none; }
  :root:not([data-theme="light"]) .brand__logo--dark { display: block; }
}
[data-theme="dark"] .brand__logo--light { display: none; }
[data-theme="dark"] .brand__logo--dark { display: block; }

.site-nav__list { display: flex; gap: var(--ass-space-1); }
.site-nav a {
  display: block; text-decoration: none; color: var(--ass-color-text);
  font: var(--ass-font-weight-semibold) var(--ass-font-size-sm)/1.2 var(--ass-font-body);
  padding: var(--ass-space-2) var(--ass-space-2); border-radius: var(--ass-radius-sm);
}
.site-nav a:hover { background: var(--ass-color-accent-soft); color: var(--ass-color-text); }
.site-nav a[aria-current="page"] { background: var(--ass-highlight); color: var(--ass-color-on-highlight); }
.site-header__actions { display: flex; align-items: center; gap: var(--ass-space-2); }
.icon-btn__kbd {
  display: none;
  font: var(--ass-font-weight-medium) var(--ass-font-size-xs)/1 var(--ass-font-mono);
  color: var(--ass-color-muted);
  border: var(--ass-border-hairline) solid var(--ass-color-line); border-radius: var(--ass-radius-xs);
  padding: 0.25em 0.4em;
}
.icon-btn:hover .icon-btn__kbd { color: inherit; border-color: currentColor; }
.btn--yt, .btn--yt:hover { background: var(--ass-color-inverse-bg); color: var(--ass-color-inverse-text); border-color: var(--ass-color-inverse-bg); }
.btn--yt .icon { color: var(--ass-color-c2); }
/* telefono (e 1024–1279 px): cerchio da 44 px come i pulsanti accanto, solo icona, nessuna ombra; il nome accessibile rimane */
.btn--yt { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border-width: var(--ass-border-sm); box-shadow: none; }
.btn--yt:hover { box-shadow: none; transform: none; }
.btn--yt__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--open { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: inline; }

/* telefono e tablet: menu a comparsa (senza JS il menu resta visibile, in una riga scorrevole) */
.site-header__bar { flex-wrap: wrap; }
html:not(.js) .site-nav { order: 10; width: 100%; overflow-x: auto; }
html:not(.js) .nav-toggle { display: none; }
.js .site-nav { display: none; }
.js .site-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ass-color-bg);
  border-bottom: var(--ass-border-sm) solid var(--ass-color-border);
  box-shadow: 0 var(--ass-space-2) 0 0 var(--ass-color-shadow);
  padding: var(--ass-space-3) var(--ass-layout-gutter) var(--ass-space-5);
  max-height: calc(100dvh - 4.25rem); overflow-y: auto;
}
.js .site-nav.is-open .site-nav__list { flex-direction: column; gap: 0; max-width: var(--ass-layout-wide); margin-inline: auto; }
.js .site-nav.is-open a { font: var(--ass-text-h4); padding: var(--ass-space-3) var(--ass-space-2); border-bottom: var(--ass-border-hairline) solid var(--ass-color-line); border-radius: 0; }
.js .site-nav.is-open a[aria-current="page"] { background: var(--ass-color-accent-soft); color: var(--ass-color-text); box-shadow: inset var(--ass-space-2) 0 0 0 var(--ass-color-c1); padding-left: var(--ass-space-5); }

/* pillola con l'etichetta: tablet e desktop largo */
@media (min-width: 30em) and (max-width: 63.99em), (min-width: 80em) {
  .btn--yt { width: auto; height: auto; min-height: 2.75rem; padding: var(--ass-space-2) var(--ass-space-4); border-width: var(--ass-border-md); box-shadow: var(--ass-space-1) var(--ass-space-1) 0 0 var(--ass-color-c1); }
  .btn--yt:hover { transform: translate(-1px, -1px); box-shadow: var(--ass-space-1) var(--ass-space-1) 0 0 var(--ass-color-c1); }
  .btn--yt__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* da 1024 px il menu completo resta in riga; tra 1024 e 1279 px in versione compatta (logo più basso,
   voci più strette, YouTube tondo, senza l'etichetta Ctrl K) così non finisce nell'hamburger */
@media (min-width: 64em) {
  .site-header__bar { flex-wrap: nowrap; }
  .brand { margin-right: var(--ass-space-2); }
  .js .site-nav, html:not(.js) .site-nav { display: block; order: 0; width: auto; margin-right: auto; }
  .nav-toggle, html:not(.js) .nav-toggle { display: none; }
}
@media (min-width: 64em) and (max-width: 79.99em) {
  .site-header__bar { gap: var(--ass-space-2); }
  .brand__logo--light { height: 2.6rem; }
  .brand__logo--dark { height: 3.1rem; }
}
@media (min-width: 80em) {
  .icon-btn__kbd { display: inline-block; }
}

/* ------------------------------------------------------------------ PATTERN hero-serio */
.hero { padding-block: var(--ass-space-10) var(--ass-layout-section); }
.hero + .section { padding-top: var(--ass-space-4); }
/* telefono: titolo → tavola con Serio → testo e pulsanti (Serio entra nella prima schermata).
   Da 768 px: testo a sinistra (due righe della griglia), tavola a destra. La tavola non ha elementi
   focalizzabili, quindi l'ordine visivo diverso da quello del codice non cambia l'ordine di tabulazione. */
.hero__grid { display: grid; gap: var(--ass-space-8); grid-template-areas: "intro" "art" "body"; }
.hero__intro { grid-area: intro; }
.hero__body { grid-area: body; }
.hero__art { grid-area: art; }
.hero__intro .display { margin-bottom: var(--ass-space-3); }
.hero__lead { font: var(--ass-font-weight-bold) var(--ass-font-size-lg)/var(--ass-line-height-snug) var(--ass-font-display); letter-spacing: var(--ass-tracking-tight); }
.hero__sub { color: var(--ass-color-muted); max-width: 46ch; margin-bottom: var(--ass-space-6); }
.proofs { display: grid; gap: var(--ass-space-2); margin-top: var(--ass-space-6); font-size: var(--ass-font-size-sm); }
.proofs li { display: flex; align-items: center; gap: var(--ass-space-2); }
.proofs .icon {
  width: 1.5rem; height: 1.5rem; padding: 0.2rem; stroke-width: 3;
  background: var(--ass-color-accent); color: var(--ass-color-accent-ink);
  border: var(--ass-border-sm) solid var(--ass-color-ink); border-radius: var(--ass-radius-pill);
}

.hero__art { margin: 0; padding: var(--ass-space-12) var(--ass-space-4) var(--ass-space-4); width: 100%; max-width: 30rem; justify-self: center; }
.hero__art img { display: block; width: min(24rem, 86%); margin: 0 auto 0 var(--ass-space-2); }
.bubble {
  position: absolute; z-index: 1;
  background: var(--ass-color-paper); color: var(--ass-color-ink);
  border: var(--ass-border-lg) solid var(--ass-color-ink); border-radius: var(--ass-radius-lg);
}
.bubble::after {
  content: ""; position: absolute; width: 1.25rem; height: 1.25rem;
  background: var(--ass-color-paper);
  border-right: var(--ass-border-lg) solid var(--ass-color-ink); border-bottom: var(--ass-border-lg) solid var(--ass-color-ink);
}
/* «Sul serio?!» in alto a destra, lontano dalla punta del cursore; la coda scende verso la testa di Serio */
.bubble--sfx {
  top: var(--ass-space-4); right: var(--ass-space-4);
  font: var(--ass-text-sfx); letter-spacing: var(--ass-text-sfx-tracking); text-transform: uppercase;
  padding: var(--ass-space-2) var(--ass-space-4) var(--ass-space-1);
  transform: rotate(3deg);
}
.bubble--sfx::after { left: 1.6rem; bottom: -0.8rem; transform: skewX(-24deg) rotate(45deg); }
/* Antonio è fuori vignetta: la coda punta al bordo destro della tavola, non a Serio */
.bubble--talk {
  right: var(--ass-space-6); bottom: var(--ass-space-6);
  font: var(--ass-text-bubble);
  padding: var(--ass-space-2) var(--ass-space-4);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  transform: rotate(-2deg);
}
.bubble--talk::after { right: -0.8rem; top: 38%; transform: rotate(-45deg) skewY(-10deg); }
.bubble__who { font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase; color: var(--ass-color-neutral-600); }

@media (max-width: 47.99em) {
  .hero__art { max-width: 24rem; }
}
@media (min-width: 48em) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: "intro art" "body art"; row-gap: 0; column-gap: var(--ass-space-8); align-items: center; }
  .hero__intro { align-self: end; margin-bottom: var(--ass-space-4); }
  .hero__body { align-self: start; }
  .hero__art { padding-top: var(--ass-space-16); }
}
/* tablet: colonne uguali, altrimenti la tavola è troppo stretta per le due nuvolette (la coda toccava la punta) */
@media (min-width: 48em) and (max-width: 63.99em) {
  .hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .hero { padding-top: var(--ass-space-16); }
  .hero__grid { column-gap: var(--ass-space-12); }
  .proofs { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--ass-space-5); }
}

/* ------------------------------------------------------------------ intestazione di sezione */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ass-space-3) var(--ass-space-6); margin-bottom: var(--ass-space-8); }
.section-head__side { display: flex; align-items: center; gap: var(--ass-space-4); }
.scroller-nav { display: none; gap: var(--ass-space-2); }
.js .scroller-nav { display: none; }
@media (min-width: 48em) and (hover: hover) { .js .scroller-nav { display: inline-flex; } }
.js .scroller-nav[hidden] { display: none; }
.scroller-nav .icon-btn:disabled { opacity: 0.35; cursor: default; background: var(--ass-color-surface); color: var(--ass-color-text); border-color: var(--ass-color-border); }

/* ------------------------------------------------------------------ PATTERN shorts-strip */
.scroller {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  --edge: max(var(--ass-layout-gutter), calc((100% - var(--ass-layout-wide)) / 2));
  scroll-padding-inline: var(--edge);
  padding-bottom: var(--ass-space-4);
  scrollbar-width: thin; scrollbar-color: var(--ass-color-muted) transparent;
}
.scroller__track { display: flex; gap: var(--ass-space-4); padding-inline: var(--edge); width: max-content; padding-block: var(--ass-space-1) var(--ass-space-2); }
.short-card { width: clamp(10rem, 42vw, 13.5rem); scroll-snap-align: start; }
.short-card__link { display: block; text-decoration: none; color: var(--ass-color-text); border-radius: var(--ass-radius-lg); }
.short-card__link:hover { background: none; color: var(--ass-color-text); }
.short-card__title { font: var(--ass-font-weight-bold) var(--ass-font-size-sm)/var(--ass-line-height-snug) var(--ass-font-body); margin-top: var(--ass-space-3); }
.short-card__link:hover .short-card__title { text-decoration: underline; text-decoration-thickness: var(--ass-border-sm); text-underline-offset: 0.2em; }
.short-card__meta { font-size: var(--ass-font-size-xs); color: var(--ass-color-muted); margin-top: var(--ass-space-1); }

/* miniatura verticale 9:16 disegnata in CSS: fondo pieno + retino + titolo + Serio.
   Colori: quelli fissi delle serie (token --ass-series-*, approvati il 24/09/2026 «come nel kit social»),
   uguali nel tema chiaro e nel tema scuro. Varianti: --sul-serio, --clic-per-clic, --tap-per-tap, --truffa. */
.sthumb {
  --th-bg: var(--ass-color-c1); --th-fg: var(--ass-color-ink); --th-dot: var(--ass-color-lime-dot);
  --th-chip-bg: var(--ass-color-ink); --th-chip-fg: var(--ass-color-paper);
  --th-em-bg: var(--ass-color-ink); --th-em-fg: var(--ass-color-c1);
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 9 / 16; container-type: inline-size;
  background: var(--th-bg); color: var(--th-fg);
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-lg);
  box-shadow: var(--ass-shadow-md);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.short-card__link:hover .sthumb, .video-card__link:hover .vthumb { transform: translate(-2px, -2px); box-shadow: var(--ass-shadow-lg); }
.sthumb::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--th-dot) 1.4px, transparent 1.6px);
  background-size: var(--ass-pattern-halftone-size);
  opacity: var(--th-dot-opacity, var(--ass-opacity-halftone));
}
/* Sul Serio?!: lime, retino lime, pillola carta, titolo in Bangers con l'ombra corallo, sempre una domanda in «?!» */
.sthumb.sthumb--sul-serio, .vthumb.vthumb--sul-serio {
  --th-bg: var(--ass-series-sul-serio-bg); --th-fg: var(--ass-series-sul-serio-title);
  --th-dot: var(--ass-series-sul-serio-halftone); --th-dot-opacity: var(--ass-series-sul-serio-halftone-opacity);
  --th-chip-bg: var(--ass-series-sul-serio-tag-bg); --th-chip-fg: var(--ass-series-sul-serio-tag-text);
}
/* Clic per Clic / Tap per Tap: acqua, retino d'inchiostro al 18 %, pillola carta, evidenziatore lime */
.sthumb.sthumb--clic-per-clic, .vthumb.vthumb--clic-per-clic {
  --th-bg: var(--ass-series-clic-per-clic-bg); --th-fg: var(--ass-series-clic-per-clic-title);
  --th-dot: var(--ass-series-clic-per-clic-halftone); --th-dot-opacity: var(--ass-series-clic-per-clic-halftone-opacity);
  --th-chip-bg: var(--ass-series-clic-per-clic-tag-bg); --th-chip-fg: var(--ass-series-clic-per-clic-tag-text);
  --th-em-bg: var(--ass-series-clic-per-clic-highlight); --th-em-fg: var(--ass-series-clic-per-clic-on-highlight);
}
.sthumb.sthumb--tap-per-tap, .vthumb.vthumb--tap-per-tap {
  --th-bg: var(--ass-series-tap-per-tap-bg); --th-fg: var(--ass-series-tap-per-tap-title);
  --th-dot: var(--ass-series-tap-per-tap-halftone); --th-dot-opacity: var(--ass-series-tap-per-tap-halftone-opacity);
  --th-chip-bg: var(--ass-series-tap-per-tap-tag-bg); --th-chip-fg: var(--ass-series-tap-per-tap-tag-text);
  --th-em-bg: var(--ass-series-tap-per-tap-highlight); --th-em-fg: var(--ass-series-tap-per-tap-on-highlight);
}
/* Occhio alla truffa AI (e Vero o AI?): notte, retino scuro, nastro corallo inclinato, titolo carta con l'evidenziatore corallo */
.sthumb.sthumb--truffa, .vthumb.vthumb--truffa {
  --th-bg: var(--ass-series-truffa-bg); --th-fg: var(--ass-series-truffa-title);
  --th-dot: var(--ass-series-truffa-halftone); --th-dot-opacity: var(--ass-series-truffa-halftone-opacity);
  --th-em-bg: var(--ass-series-truffa-highlight); --th-em-fg: var(--ass-series-truffa-on-highlight);
}
/* (doppia classe: le varianti valgono anche per .vthumb, che nel file viene dopo) */
/* pillola della serie, in alto a sinistra */
.sthumb__series {
  position: absolute; top: 5cqi; left: 6cqi;
  font: var(--ass-font-weight-extrabold) 6cqi/1 var(--ass-font-display); letter-spacing: var(--ass-tracking-caps); text-transform: uppercase;
  background: var(--th-chip-bg); color: var(--th-chip-fg);
  border: 0.8cqi solid var(--ass-color-ink);
  padding: 1.7cqi 3.4cqi 1.5cqi; border-radius: var(--ass-radius-pill);
}
/* nastro della serie truffa: a tutta larghezza, inclinato, bordato d'inchiostro */
.sthumb__tape {
  position: absolute; left: -12%; right: -12%; top: 8cqi;
  font: var(--ass-font-weight-extrabold) 5.4cqi/1 var(--ass-font-display); letter-spacing: var(--ass-tracking-caps); text-transform: uppercase;
  background: var(--ass-series-truffa-tape); color: var(--ass-series-truffa-tape-text);
  border-block: 0.9cqi solid var(--ass-color-ink);
  padding: 1.8cqi 0 1.6cqi; white-space: nowrap; overflow: hidden; text-align: center;
  transform: rotate(-7deg);
}
.sthumb__hook {
  position: absolute; top: 20cqi; left: 6cqi; right: 6cqi;
  font: var(--ass-font-weight-extrabold) 11.5cqi/1.04 var(--ass-font-display);
  letter-spacing: var(--ass-tracking-tight);
  text-wrap: balance;
}
.sthumb--sul-serio .sthumb__hook {
  top: 23cqi;
  font: var(--ass-font-weight-regular) 14cqi/0.98 var(--ass-font-comic); letter-spacing: var(--ass-tracking-comic); text-transform: uppercase;
  text-shadow: 0.07em 0.07em 0 var(--ass-series-sul-serio-title-shadow);
}
.sthumb--truffa .sthumb__hook { top: 30cqi; }
.sthumb__hook em, .vthumb__title em {
  font-style: normal; background: var(--th-em-bg); color: var(--th-em-fg);
  padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Serio: tutti i file hanno la stessa cornice (build_serio.mjs), quindi stessa larghezza = stessa altezza del corpo e
   stesso spessore del contorno in ogni scheda. Sui fondi inchiostro si usa la variante «-adesivo» (fustella vera nell'SVG). */
.sthumb__art { position: absolute; left: 0; bottom: 2cqi; width: 100%; max-width: none; height: auto; }
/* miniatura senza Serio (fondi lime): telefono stilizzato che "ascolta", cornice-dispositivo del brand */
.sthumb__device {
  position: absolute; left: 25cqi; bottom: 13cqi; width: 50cqi; aspect-ratio: 1 / 1.75;
  background: var(--ass-color-ink); border-radius: 8cqi; padding: 3.5cqi;
  transform: rotate(-7deg);
}
.sthumb__screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7cqi;
  height: 100%; background: var(--ass-color-c3); border-radius: 5cqi;
}
.sthumb__rec { width: 9cqi; height: 9cqi; border-radius: var(--ass-radius-pill); background: var(--ass-color-c2); border: 1.2cqi solid var(--ass-color-ink); }
.sthumb__wave { display: flex; align-items: center; gap: 2.2cqi; height: 20cqi; }
.sthumb__wave span { width: 3.4cqi; border-radius: 2cqi; background: var(--ass-color-ink); }
.sthumb__wave span:nth-child(1) { height: 35%; }
.sthumb__wave span:nth-child(2) { height: 75%; }
.sthumb__wave span:nth-child(3) { height: 100%; }
.sthumb__wave span:nth-child(4) { height: 60%; }
.sthumb__wave span:nth-child(5) { height: 30%; }
.sthumb__time, .vthumb__time {
  position: absolute; right: 4cqi; bottom: 4cqi;
  font: var(--ass-font-weight-bold) 6.5cqi/1 var(--ass-font-mono);
  background: var(--ass-color-ink); color: var(--ass-color-paper);
  padding: 1.2cqi 2cqi; border-radius: var(--ass-radius-xs);
}
.sthumb--truffa .sthumb__time { background: var(--ass-color-paper); color: var(--ass-color-ink); }
/* pieni scuri (notte della serie truffa, copertina d'inchiostro): ombra lime, mai ombra scura su fondo scuro */
.sthumb--truffa, .vthumb--truffa, .book__cover--ink { box-shadow: var(--ass-space-1) var(--ass-space-1) 0 0 var(--ass-color-c1); }
.short-card__link:hover .sthumb--truffa, .video-card__link:hover .vthumb--truffa { box-shadow: var(--ass-space-2) var(--ass-space-2) 0 0 var(--ass-color-c1); }

/* ------------------------------------------------------------------ PATTERN video-grid */
.card-grid { display: grid; gap: var(--ass-space-8) var(--ass-space-6); }
@media (min-width: 48em) {
  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  /* tablet: l'ultimo video apre la griglia a tutta larghezza; nelle altre griglie l'elemento dispari chiude a tutta larghezza */
  .card-grid--feature > :first-child { grid-column: 1 / -1; }
  .card-grid--3:not(.card-grid--feature) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.video-card { display: flex; flex-direction: column; gap: var(--ass-space-3); }
.video-card__link { display: block; text-decoration: none; color: var(--ass-color-text); border-radius: var(--ass-radius-lg); }
.video-card__link:hover { background: none; color: var(--ass-color-text); }
.video-card__title { font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking); margin-top: var(--ass-space-4); }
.video-card__link:hover .video-card__title { text-decoration: underline; text-decoration-thickness: var(--ass-border-sm); text-underline-offset: 0.2em; }
.video-card__meta { font-size: var(--ass-font-size-xs); color: var(--ass-color-muted); }

/* miniatura orizzontale 16:9: titolo, schermo stilizzato (cornice-dispositivo, niente loghi), Serio */
.vthumb {
  --th-bg: var(--ass-color-ink); --th-fg: var(--ass-color-paper); --th-dot: var(--ass-color-neutral-700);
  --th-chip-bg: var(--ass-color-c1); --th-chip-fg: var(--ass-color-ink);
  --th-em-bg: var(--ass-color-c1); --th-em-fg: var(--ass-color-ink);
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 16 / 9; container-type: inline-size;
  background: var(--th-bg); color: var(--th-fg);
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-lg);
  box-shadow: var(--ass-shadow-md);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.vthumb::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--th-dot) 1.4px, transparent 1.6px);
  background-size: var(--ass-pattern-halftone-size);
  opacity: var(--th-dot-opacity, var(--ass-opacity-halftone));
}
/* varianti di serie: vedi le miniature 9:16 (.vthumb--sul-serio, --clic-per-clic, --tap-per-tap, --truffa) */
.vthumb__series {
  position: absolute; top: 5cqi; left: 5cqi;
  font: var(--ass-font-weight-extrabold) 3.4cqi/1 var(--ass-font-display); letter-spacing: var(--ass-tracking-caps); text-transform: uppercase;
  background: var(--th-chip-bg); color: var(--th-chip-fg);
  border: 0.45cqi solid var(--ass-color-ink);
  padding: 1cqi 2cqi 0.9cqi; border-radius: var(--ass-radius-pill);
}
.vthumb__title {
  position: absolute; left: 5cqi; top: 15cqi; width: 40cqi;
  font: var(--ass-font-weight-extrabold) 7.4cqi/1.02 var(--ass-font-display);
  letter-spacing: var(--ass-tracking-tight); text-wrap: balance;
}
/* schermo dell'AI: cornice carta + bordo inchiostro, vetro acqua, righe di testo finte */
.vthumb__screen {
  position: absolute; right: 5cqi; top: 9cqi; width: 34cqi; height: 26cqi;
  background: var(--ass-color-c3);
  border: 1.4cqi solid var(--ass-color-paper);
  outline: 0.7cqi solid var(--ass-color-ink);
  border-radius: 2.4cqi;
  display: flex; flex-direction: column; gap: 2.2cqi; padding: 3.4cqi 3cqi;
  transform: rotate(3deg);
}
.vthumb__screen span { display: block; height: 2.2cqi; border-radius: 1cqi; background: var(--ass-color-paper); }
.vthumb__screen span:nth-child(1) { width: 80%; }
.vthumb__screen span:nth-child(2) { width: 62%; }
/* terza riga: il pulsante lime della finestra, corto e in basso a destra. Il lato sinistro della finestra sta dietro
   la testa di Serio: una barra lime che partiva da lì sembrava un bastoncino che gli usciva dalla testa */
.vthumb__screen span:nth-child(3) {
  width: 34%; height: 3.2cqi; margin-top: auto; align-self: flex-end;
  border-radius: var(--ass-radius-pill); background: var(--ass-color-c1); box-shadow: 0 0 0 0.4cqi var(--ass-color-ink);
}
/* sul fondo acqua dei tutorial lo schermo è una finestra carta (cornice-dispositivo del brand) con righe grigie:
   niente vetro lime, che sotto Serio diventerebbe lime su lime; righe chiare, così il «?» d'inchiostro di Serio resta leggibile */
.vthumb--clic-per-clic .vthumb__screen, .vthumb--tap-per-tap .vthumb__screen { background: var(--ass-color-paper); }
.vthumb--clic-per-clic .vthumb__screen span:not(:nth-child(3)), .vthumb--tap-per-tap .vthumb__screen span:not(:nth-child(3)) { background: var(--ass-color-neutral-400); }
.vthumb__screen--phone { width: 17cqi; height: 30cqi; right: 12cqi; top: 7cqi; border-radius: 3.4cqi; padding-top: 5cqi; }
/* stessa cornice per tutti: piedi sul bordo basso, a sinistra della durata (che non copre mai mani o telefono) */
.vthumb__art { position: absolute; right: 9cqi; bottom: 1.5cqi; width: 46cqi; max-width: none; height: auto; }
.vthumb__time { font-size: 3.8cqi; right: 3cqi; bottom: 3cqi; padding: 0.8cqi 1.3cqi; }
.vthumb--truffa .vthumb__time { background: var(--ass-color-paper); color: var(--ass-color-ink); }

/* ------------------------------------------------------------------ PATTERN post-list */
.post-card {
  position: relative;
  background: var(--ass-color-surface);
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-lg);
  box-shadow: var(--ass-shadow-md);
  padding: var(--ass-space-6);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.post-card:hover { transform: translate(-2px, -2px); box-shadow: var(--ass-shadow-lg); }
/* copertina dell'articolo (1280×720, brand/copertine): a filo in cima alla scheda, come la vignetta di un fumetto */
.post-card__img { margin: calc(-1 * var(--ass-space-6)) calc(-1 * var(--ass-space-6)) 0; overflow: hidden; border-bottom: var(--ass-border-sm) solid var(--ass-color-border); border-radius: calc(var(--ass-radius-lg) - var(--ass-border-sm)) calc(var(--ass-radius-lg) - var(--ass-border-sm)) 0 0; background: var(--ass-color-paper); }
.post-card__img img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* tutta la scheda è il link del titolo: l'anello va sulla scheda, solo da tastiera (con :focus-within compariva anche al clic) */
.post-card:has(:focus-visible) { outline: var(--ass-focus-outline); outline-offset: calc(-1 * var(--ass-border-sm)); }
@supports not selector(:has(*)) { .post-card:focus-within { outline: var(--ass-focus-outline); outline-offset: calc(-1 * var(--ass-border-sm)); } }
.post-card article { display: flex; flex-direction: column; gap: var(--ass-space-3); height: 100%; }
.post-card__cat { display: flex; align-items: center; gap: var(--ass-space-2); font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase; color: var(--ass-color-muted); }
.dot { width: 0.75rem; height: 0.75rem; border-radius: var(--ass-radius-pill); border: var(--ass-border-sm) solid var(--ass-color-ink); background: var(--ass-color-c1); }
.dot--coral { background: var(--ass-color-c2); }
.dot--aqua { background: var(--ass-color-c3); }
.post-card__title { font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking); }
.post-card__title a { color: var(--ass-color-text); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ass-radius-lg); }
.post-card__title a:focus-visible { outline: none; }
.post-card:hover .post-card__title a { background: none; text-decoration: underline; text-decoration-thickness: var(--ass-border-sm); }
.post-card__excerpt { color: var(--ass-color-muted); font-size: var(--ass-font-size-sm); }
.post-card__meta { margin-top: auto; padding-top: var(--ass-space-3); border-top: var(--ass-border-hairline) solid var(--ass-color-line); display: flex; flex-wrap: wrap; gap: var(--ass-space-1) var(--ass-space-3); font-size: var(--ass-font-size-xs); color: var(--ass-color-muted); }
.ai-note { margin-top: var(--ass-space-6); font-size: var(--ass-font-size-xs); color: var(--ass-color-muted); }

/* ------------------------------------------------------------------ PATTERN prompt-of-the-week + prompt-card */
.potw { display: grid; gap: var(--ass-space-8); align-items: center; }
.potw__intro > * + * { margin-top: var(--ass-space-4); }
.potw__intro h2 { margin-top: 0; }
.checklist { display: grid; gap: var(--ass-space-2); font-size: var(--ass-font-size-sm); }
.checklist li { display: flex; gap: var(--ass-space-2); align-items: center; }
.checklist .icon { stroke-width: 3; }
@media (min-width: 64em) { .potw { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--ass-space-12); } }

.prompt-card {
  margin: 0; position: relative;
  background: var(--ass-color-surface);
  border: var(--ass-border-lg) solid var(--ass-color-border);
  border-radius: var(--ass-radius-xl);
  box-shadow: var(--ass-shadow-xl);
  overflow: hidden;
}
.prompt-card__bar {
  display: flex; align-items: center; gap: var(--ass-space-3);
  padding: var(--ass-space-3) var(--ass-space-3) var(--ass-space-3) var(--ass-space-5);
  border-bottom: var(--ass-border-sm) solid var(--ass-color-border);
  background: var(--ass-color-surface);
}
.prompt-card__dots { display: inline-flex; gap: var(--ass-space-1); }
.prompt-card__dots span { width: 0.7rem; height: 0.7rem; border-radius: var(--ass-radius-pill); border: var(--ass-border-sm) solid var(--ass-color-border); }
.prompt-card__dots span:nth-child(1) { background: var(--ass-color-c2); }
.prompt-card__dots span:nth-child(2) { background: var(--ass-color-c1); }
.prompt-card__dots span:nth-child(3) { background: var(--ass-color-c3); }
.prompt-card__label { font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase; color: var(--ass-color-muted); margin-right: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prompt-card__body {
  margin: 0; padding: var(--ass-space-5);
  background: var(--ass-color-surface-alt);
  font: var(--ass-text-code); letter-spacing: var(--ass-text-code-tracking);
  white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--ass-color-text);
}
.prompt-card__body .var {
  background: var(--ass-color-highlight); color: var(--ass-color-on-highlight);
  font-weight: var(--ass-font-weight-bold);
  border-radius: var(--ass-radius-xs); padding: 0 0.2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.prompt-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ass-space-2) var(--ass-space-4);
  padding: var(--ass-space-3) var(--ass-space-5);
  border-top: var(--ass-border-sm) solid var(--ass-color-border);
  font-size: var(--ass-font-size-sm);
}
.prompt-card__foot span { color: var(--ass-color-muted); }
.prompt-card__foot a { font-weight: var(--ass-font-weight-bold); }
.copy-btn.is-copied { background: var(--ass-color-inverse-bg); color: var(--ass-color-inverse-text); border-color: var(--ass-color-inverse-bg); }

/* ------------------------------------------------------------------ PATTERN tools-grid */
.tool-card {
  position: relative; display: flex; flex-direction: column; gap: var(--ass-space-3);
  background: var(--ass-color-surface);
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-lg);
  box-shadow: var(--ass-shadow-md);
  padding: var(--ass-space-6);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.tool-card:hover { transform: translate(-2px, -2px); box-shadow: var(--ass-shadow-lg); }
/* tutta la scheda è il link del titolo: l'anello va sulla scheda, solo da tastiera (con :focus-within compariva anche al clic) */
.tool-card:has(:focus-visible) { outline: var(--ass-focus-outline); outline-offset: calc(-1 * var(--ass-border-sm)); }
@supports not selector(:has(*)) { .tool-card:focus-within { outline: var(--ass-focus-outline); outline-offset: calc(-1 * var(--ass-border-sm)); } }
.tool-card p { font-size: var(--ass-font-size-sm); color: var(--ass-color-muted); }
.tool-card__icon {
  display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border: var(--ass-border-md) solid var(--ass-color-ink); border-radius: var(--ass-radius-md);
  background: var(--ass-color-c1); color: var(--ass-color-ink);
  box-shadow: var(--ass-shadow-sm);
  transform: rotate(-3deg);
}
.tool-card__icon .icon { width: 1.75rem; height: 1.75rem; }
.tool-card__icon--coral { background: var(--ass-color-c2); }
.tool-card__icon--aqua { background: var(--ass-color-c3); }
.tool-card__icon--paper { background: var(--ass-color-paper); }
.tool-card__title { font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking); }
.tool-card__title a { color: var(--ass-color-text); text-decoration: none; }
.tool-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ass-radius-lg); }
.tool-card__title a:focus-visible { outline: none; }
.tool-card:hover .tool-card__title a { background: none; text-decoration: underline; text-decoration-thickness: var(--ass-border-sm); }
.status {
  margin-top: auto; align-self: flex-start;
  font: var(--ass-font-weight-bold) var(--ass-font-size-xs)/1 var(--ass-font-mono) !important;
  letter-spacing: var(--ass-tracking-caps); text-transform: uppercase;
  padding: 0.45em 0.7em; border-radius: var(--ass-radius-pill);
}
.status--soon { background: transparent; color: var(--ass-color-muted) !important; border: var(--ass-border-sm) dashed currentColor; }

/* ------------------------------------------------------------------ PATTERN books-shop */
.shop { display: grid; gap: var(--ass-space-10); }
@media (min-width: 64em) { .shop { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--ass-space-12); } }
.shop__subtitle { font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking); margin-bottom: var(--ass-space-5); }
.books { display: grid; gap: var(--ass-space-6); }
@media (min-width: 48em) and (max-width: 63.99em) { .books { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.book { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--ass-space-4); align-items: start; }
.book__cover {
  position: relative; overflow: hidden; container-type: inline-size;
  aspect-ratio: 2 / 3;
  background: var(--ass-color-ink); color: var(--ass-color-paper);
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-xs) var(--ass-radius-md) var(--ass-radius-md) var(--ass-radius-xs);
  box-shadow: var(--ass-shadow-md);
  padding: var(--ass-space-3) var(--ass-space-2) var(--ass-space-3) var(--ass-space-3);
  display: flex; flex-direction: column; gap: var(--ass-space-2);
}
.book__cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7cqi; background: var(--ass-color-c1); border-right: var(--ass-border-sm) solid var(--ass-color-ink); }
.book__cover--lime { background: var(--ass-color-c1); color: var(--ass-color-ink); }
.book__cover--lime::before { background: var(--ass-color-ink); }
.book__series { font: var(--ass-font-weight-regular) 10cqi/1 var(--ass-font-comic); letter-spacing: var(--ass-tracking-comic); text-transform: uppercase; color: var(--ass-color-c1); padding-left: 4cqi; }
.book__cover--lime .book__series { color: var(--ass-color-ink); }
.book__title { font: var(--ass-font-weight-extrabold) 14cqi/1 var(--ass-font-display); letter-spacing: var(--ass-tracking-tight); padding-left: 4cqi; text-wrap: balance; }
.book__author { margin-top: auto; font: var(--ass-font-weight-bold) 7.5cqi/1.1 var(--ass-font-body); padding-left: 4cqi; }
.book__info { display: grid; gap: var(--ass-space-2); font-size: var(--ass-font-size-sm); }
.book__info p { color: var(--ass-color-muted); }
.book__name { font: var(--ass-text-h4); }
.book__info .book__collana { font: var(--ass-font-weight-semibold) var(--ass-font-size-xs)/1.3 var(--ass-font-mono); letter-spacing: var(--ass-tracking-caps); text-transform: uppercase; }
.book__links { font-weight: var(--ass-font-weight-semibold); }
.book__info .book__links { color: var(--ass-color-text); }

.products { display: grid; gap: var(--ass-space-3); }
.product {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ass-space-4);
  background: var(--ass-color-surface);
  border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-lg);
  padding: var(--ass-space-4) var(--ass-space-5);
  box-shadow: var(--ass-shadow-sm);
}
/* tutta la scheda è il link del titolo: l'anello va sulla scheda, solo da tastiera (con :focus-within compariva anche al clic) */
.product:has(:focus-visible) { outline: var(--ass-focus-outline); outline-offset: calc(-1 * var(--ass-border-sm)); }
@supports not selector(:has(*)) { .product:focus-within { outline: var(--ass-focus-outline); outline-offset: calc(-1 * var(--ass-border-sm)); } }
.product p { font-size: var(--ass-font-size-sm); color: var(--ass-color-muted); margin-top: var(--ass-space-1); }
.product__name { font: var(--ass-font-weight-bold) var(--ass-font-size-md)/var(--ass-line-height-snug) var(--ass-font-display); }
.product__name a { color: var(--ass-color-text); text-decoration: none; }
.product__name a::after { content: ""; position: absolute; inset: 0; }
.product__name a:focus-visible { outline: none; }
.product:hover .product__name a { background: none; text-decoration: underline; text-decoration-thickness: var(--ass-border-sm); }
.price {
  flex: none; margin: 0 !important;
  font: var(--ass-font-weight-extrabold) var(--ass-font-size-md)/1 var(--ass-font-display) !important;
  color: var(--ass-color-text) !important;
  padding: 0.35em 0.6em; border-radius: var(--ass-radius-sm);
  border: var(--ass-border-sm) solid var(--ass-color-border);
}
.price--free { background: var(--ass-color-accent); color: var(--ass-color-accent-ink) !important; border-color: var(--ass-color-ink); }
.price--soon { font-size: var(--ass-font-size-sm) !important; color: var(--ass-color-muted) !important; border-style: dashed; }

/* ------------------------------------------------------------------ PATTERN about-business */
.about { display: grid; gap: var(--ass-space-8); }
@media (min-width: 64em) { .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.about__antonio { display: grid; gap: var(--ass-space-5); align-content: start; }
@media (min-width: 30em) { .about__antonio { grid-template-columns: 8.5rem minmax(0, 1fr); } }
/* ritratti tondi di Antonio: disco acqua, figura e anello d'inchiostro sono nello stesso SVG (extract_masters.py),
   ritagliati sullo stesso cerchio: niente fondo, bordo o padding CSS sull'img, quindi nessun filo acqua sul bordo.
   L'ombra (come --ass-shadow-md: 4 px, colore ombra) è un drop-shadow sulla forma dell'SVG: un box-shadow resta
   fuori dal box e lascerebbe un filo chiaro tra anello e ombra. */
.about__portrait { width: 8.5rem; height: 8.5rem; filter: drop-shadow(var(--ass-space-1) var(--ass-space-1) 0 var(--ass-color-shadow)); }
.about__antonio h2 { margin-bottom: var(--ass-space-3); }
.about__antonio p:not(.eyebrow) { color: var(--ass-color-muted); }
.about__links { margin-top: var(--ass-space-4); font-weight: var(--ass-font-weight-semibold); }
.about__antonio .about__links { color: var(--ass-color-text); }
.about__business { display: flex; flex-direction: column; gap: var(--ass-space-4); align-items: flex-start; box-shadow: var(--ass-space-2) var(--ass-space-2) 0 0 var(--ass-color-c1); }
.about__business h2 { font: var(--ass-text-h3); letter-spacing: var(--ass-text-h3-tracking); }
.biz-list { display: grid; gap: var(--ass-space-3); margin-bottom: var(--ass-space-2); }
.biz-list li { position: relative; padding-left: var(--ass-space-6); color: var(--ass-color-muted); }
.biz-list li strong { color: var(--ass-color-text); }
.biz-list li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 0.75rem; height: 0.75rem;
  background: var(--ass-color-c1); border: var(--ass-border-sm) solid var(--ass-color-ink); transform: rotate(45deg);
}

/* isola scura: [data-theme="dark"] riprende i semantici scuri dai token anche nella pagina chiara */
.island { background: var(--ass-color-surface); color: var(--ass-color-text); border-color: var(--ass-color-border); }

/* ------------------------------------------------------------------ PATTERN newsletter */
.newsletter { display: grid; gap: var(--ass-space-6); padding: var(--ass-space-8) var(--ass-space-6); overflow: hidden; }
.newsletter__art { width: 13rem; justify-self: center; margin-block: calc(-1 * var(--ass-space-4)) calc(-1 * var(--ass-space-4)); }
.newsletter__body h2 { font: var(--ass-text-h1); letter-spacing: var(--ass-text-h1-tracking); margin-bottom: var(--ass-space-3); }
.newsletter__lead { max-width: 52ch; margin-bottom: var(--ass-space-6); }
.nl-form__label { display: block; width: 100%; font-weight: var(--ass-font-weight-bold); margin-bottom: var(--ass-space-2); }
.nl-form__row { display: flex; flex-wrap: wrap; gap: var(--ass-space-3); align-items: flex-end; }
.nl-form__row .field { flex: 1 1 15rem; }
.nl-form__row .btn { flex: 0 0 auto; }
.nl-form__row .field, .nl-form__row .btn { height: var(--ass-space-12); min-height: var(--ass-space-12); }
.nl-form__row .field { border-radius: var(--ass-radius-pill); border-width: var(--ass-border-md); padding-inline: var(--ass-space-5); }
.nl-form__help { font-size: var(--ass-font-size-xs); color: var(--ass-color-muted); margin-top: var(--ass-space-3); }
.nl-form__status:not(:empty) {
  margin-top: var(--ass-space-3); font-size: var(--ass-font-size-sm); font-weight: var(--ass-font-weight-bold);
  background: var(--ass-color-info-soft); color: var(--ass-color-text);
  border-left: var(--ass-space-1) solid var(--ass-color-info); padding: var(--ass-space-2) var(--ass-space-3);
}
@media (min-width: 48em) {
  .newsletter { grid-template-columns: 13rem minmax(0, 1fr); align-items: center; padding: var(--ass-space-10) var(--ass-space-10) var(--ass-space-10) var(--ass-space-6); }
  .newsletter__art { width: 100%; }
}
@media (min-width: 64em) { .newsletter { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--ass-space-10); } }

/* ------------------------------------------------------------------ PATTERN footer */
.site-footer { background: var(--ass-color-bg); color: var(--ass-color-text); padding-block: var(--ass-space-16) var(--ass-space-10); border-top: var(--ass-border-lg) solid var(--ass-color-c1); }
.site-footer__grid { display: grid; gap: var(--ass-space-8) var(--ass-space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__col:last-child { grid-column: 1 / -1; }
.site-footer__col:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ass-space-6); }
@media (min-width: 48em) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__col:last-child { grid-column: auto; }
  .site-footer__col:last-child ul { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 64em) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
}
.site-footer__brand { display: grid; gap: var(--ass-space-4); align-content: start; }
.site-footer__brand > p { color: var(--ass-color-muted); max-width: 32ch; }
.brand--footer { margin-right: 0; justify-self: start; }
.social { display: flex; flex-wrap: wrap; gap: var(--ass-space-2); }
.social a {
  display: inline-block; text-decoration: none; font-size: var(--ass-font-size-sm); font-weight: var(--ass-font-weight-semibold);
  color: var(--ass-color-text);
  border: var(--ass-border-sm) solid var(--ass-color-line); border-radius: var(--ass-radius-pill);
  padding: var(--ass-space-1) var(--ass-space-3);
}
.social a:hover { border-color: var(--ass-color-link-hover-bg); }
.site-footer__title { font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase; color: var(--ass-color-muted); margin-bottom: var(--ass-space-4); }
.site-footer__col ul { display: grid; gap: var(--ass-space-2); list-style: none; }
.site-footer__col a { color: var(--ass-color-text); text-decoration: none; font-size: var(--ass-font-size-sm); padding-block: 0.15em; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__legal { margin-top: var(--ass-space-12); padding-top: var(--ass-space-6); border-top: var(--ass-border-hairline) solid var(--ass-color-line); display: grid; gap: var(--ass-space-2); font-size: var(--ass-font-size-xs); color: var(--ass-color-muted); }

/* ------------------------------------------------------------------ PATTERN search-dialog */
.search-dialog {
  width: min(40rem, calc(100% - 2 * var(--ass-layout-gutter)));
  margin: 10vh auto auto; padding: 0;
  color: var(--ass-color-text); background: var(--ass-color-surface);
  border: var(--ass-border-lg) solid var(--ass-color-border); border-radius: var(--ass-radius-xl);
  box-shadow: var(--ass-shadow-xl);
}
.search-dialog::backdrop { background: var(--ass-color-ink); opacity: 0.6; }
.search-dialog__form { display: flex; align-items: center; gap: var(--ass-space-2) var(--ass-space-3); padding: var(--ass-space-3) var(--ass-space-3) var(--ass-space-3) var(--ass-space-5); border-bottom: var(--ass-border-sm) solid var(--ass-color-border); }
.search-dialog__submit { flex: none; }
.search-dialog__status:not(:empty) {
  margin: var(--ass-space-4) var(--ass-space-5) 0; font-size: var(--ass-font-size-sm); font-weight: var(--ass-font-weight-bold);
  background: var(--ass-color-info-soft); border-left: var(--ass-space-1) solid var(--ass-color-info); padding: var(--ass-space-2) var(--ass-space-3);
}
.search-dialog__input { flex: 1; min-width: 0; min-height: var(--ass-space-12); border: 0; background: transparent; color: inherit; font: var(--ass-font-weight-semibold) var(--ass-font-size-md)/1.2 var(--ass-font-body); }
.search-dialog__input:focus-visible { outline: none; }
/* niente seconda «x» del browser accanto al pulsante Chiudi */
.search-dialog__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-dialog__form:focus-within { box-shadow: inset 0 calc(-1 * var(--ass-border-focus)) 0 0 var(--ass-color-focus); }
.search-dialog__hints { padding: var(--ass-space-5); }
.search-dialog__hints ul { display: flex; flex-wrap: wrap; gap: var(--ass-space-2); list-style: none; }
.search-dialog__hints a { display: inline-block; text-decoration: none; color: var(--ass-color-text); border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-pill); padding: var(--ass-space-1) var(--ass-space-3); font-size: var(--ass-font-size-sm); }
.search-dialog__hints a:hover { background: var(--ass-color-accent); color: var(--ass-color-accent-ink); border-color: var(--ass-color-ink); }

/* ================================================================== PAGINA VIDEO */
.crumbs { font-size: var(--ass-font-size-sm); color: var(--ass-color-muted); padding-top: var(--ass-space-6); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ass-space-1) var(--ass-space-2); }
.crumbs li + li::before { content: "›"; margin-right: var(--ass-space-2); color: var(--ass-color-muted); }
.crumbs a { color: var(--ass-color-text); }

/* PATTERN video-header */
.vhead { padding-block: var(--ass-space-4) var(--ass-space-8); }
.vhead__series { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ass-space-2) var(--ass-space-3); margin-bottom: var(--ass-space-4); }
.series-chip {
  display: inline-block;
  font: var(--ass-font-weight-regular) var(--ass-font-size-md)/1 var(--ass-font-comic); letter-spacing: var(--ass-tracking-comic); text-transform: uppercase;
  background: var(--ass-color-inverse-bg); color: var(--ass-color-inverse-text);
  padding: 0.35em 0.6em 0.2em; border-radius: var(--ass-radius-xs); transform: rotate(-2deg);
}
/* chip nel colore fisso della serie (uguale nei due temi) */
.series-chip--clic-per-clic, .series-chip--tap-per-tap { background: var(--ass-series-clic-per-clic-bg); color: var(--ass-series-clic-per-clic-text); box-shadow: inset 0 0 0 var(--ass-border-sm) var(--ass-color-ink); }
.series-chip--sul-serio { background: var(--ass-series-sul-serio-bg); color: var(--ass-series-sul-serio-text); box-shadow: inset 0 0 0 var(--ass-border-sm) var(--ass-color-ink); }
.series-chip--truffa { background: var(--ass-series-truffa-tape); color: var(--ass-series-truffa-tape-text); box-shadow: inset 0 0 0 var(--ass-border-sm) var(--ass-color-ink); }
.vhead h1 { max-width: 24ch; margin-bottom: var(--ass-space-5); }
.meta-row { display: flex; flex-wrap: wrap; gap: var(--ass-space-2) var(--ass-space-5); font-size: var(--ass-font-size-sm); color: var(--ass-color-muted); }
.meta-row li { display: inline-flex; align-items: center; gap: var(--ass-space-2); }
.verified {
  display: inline-flex; align-items: center; gap: var(--ass-space-2);
  font-weight: var(--ass-font-weight-bold); color: var(--ass-color-success-text);
}
.verified .icon { stroke-width: 3; }

/* Ordine nel codice (= telefono e tablet): video e testo breve → «Che cosa ti serve» e prompt → capitoli,
   consigli e trascrizione. Da 1024 px: due colonne; la destra occupa le due righe e il prompt resta
   agganciato mentre scorri capitoli e trascrizione (niente colonna vuota per 2.500 px). */
.video-layout { display: grid; gap: var(--ass-space-10); padding-bottom: var(--ass-layout-section); grid-template-areas: "main" "aside" "more"; }
.video-main, .video-more { display: grid; gap: var(--ass-space-10); min-width: 0; }
.video-main { grid-area: main; }
.video-more { grid-area: more; }
.video-aside { grid-area: aside; display: grid; gap: var(--ass-space-8); align-content: start; min-width: 0; }
@media (min-width: 64em) {
  .video-layout { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: "main aside" "more aside"; column-gap: var(--ass-space-10); align-items: start; }
  .video-aside { align-self: stretch; }
}
@media (min-width: 64em) and (min-height: 40em) {
  .video-aside__prompt { position: sticky; top: calc(4.25rem + var(--ass-space-6)); }
}
@media (min-width: 80em) {
  .video-layout { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: var(--ass-space-12); }
}

/* PATTERN video-facade: niente iframe finché non premi Play (privacy e prestazioni) */
.facade { display: grid; gap: var(--ass-space-3); }
.facade__frame {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  border: var(--ass-border-lg) solid var(--ass-color-border); border-radius: var(--ass-radius-xl);
  box-shadow: var(--ass-shadow-xl); overflow: hidden; background: var(--ass-series-clic-per-clic-bg);
  font: inherit; color: inherit; text-align: left;
}
.facade__frame .vthumb { border: 0; border-radius: 0; box-shadow: none; }
.facade__frame .vthumb__art { width: 42cqi; right: 16cqi; }
@media (max-width: 47.99em) { .facade__frame .vthumb__art { width: 46cqi; right: 12cqi; } }
.facade__frame .vthumb__title { font-size: 6.4cqi; top: 16cqi; }
/* pulsante Play: in basso a sinistra, lontano dal titolo e da Serio */
.facade__play {
  position: absolute; left: 4%; bottom: 7%;
  display: inline-flex; align-items: center; gap: var(--ass-space-3);
  padding: var(--ass-space-1) var(--ass-space-5) var(--ass-space-1) var(--ass-space-1);
  font: var(--ass-font-weight-bold) var(--ass-font-size-base)/1 var(--ass-font-body);
  background: var(--ass-color-paper); color: var(--ass-color-ink);
  border: var(--ass-border-lg) solid var(--ass-color-ink); border-radius: var(--ass-radius-pill);
  box-shadow: var(--ass-space-1) var(--ass-space-1) 0 0 var(--ass-color-c1);
  transition: transform var(--ass-duration-fast) var(--ass-ease-pop);
}
.facade__play-icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; flex: none;
  background: var(--ass-color-c2); border: var(--ass-border-md) solid var(--ass-color-ink); border-radius: var(--ass-radius-pill);
}
.facade__play-icon .icon { width: 1.5rem; height: 1.5rem; margin-left: 0.2rem; }
.facade__frame:hover .facade__play { transform: scale(1.05); }
@media (max-width: 29.99em) { .facade__play { padding-right: var(--ass-space-1); } .facade__play { font-size: 0; gap: 0; } }
.facade__frame:focus-visible { outline: var(--ass-focus-outline); outline-offset: calc(-1 * var(--ass-border-lg)); }
.facade__notice { font-size: var(--ass-font-size-xs); color: var(--ass-color-muted); }
.facade__status:not(:empty) {
  font-size: var(--ass-font-size-sm); font-weight: var(--ass-font-weight-bold);
  background: var(--ass-color-info-soft); border-left: var(--ass-space-1) solid var(--ass-color-info);
  padding: var(--ass-space-2) var(--ass-space-3);
}

/* le due azioni secondarie restano insieme: se non c'è spazio vanno a capo in coppia, mai «Condividi» da sola */
.video-actions { display: flex; flex-wrap: wrap; gap: var(--ass-space-3); align-items: center; }
.video-actions .btn--primary { flex: 1 1 16rem; }
.video-actions__more { display: flex; gap: var(--ass-space-3); flex-wrap: nowrap; }
@media (min-width: 48em) { .video-actions .btn--primary { flex: 0 1 auto; } }

/* PATTERN byline */
.byline { display: flex; align-items: center; gap: var(--ass-space-4); padding: var(--ass-space-4) 0; border-block: var(--ass-border-hairline) solid var(--ass-color-line); }
.byline img { flex: none; }
/* avatar di Antonio: il master tondo approvato (brand/gate-1b/antonio/avatar.svg, testa sul disco lime, per 32–128 px);
   sui fondi scuri la sua variante sticker con l'anello carta, come dice il README della caricatura. Stessa regola del logo. */
.byline__avatar { width: 3.5rem; height: 3.5rem; }
.byline__avatar--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .byline__avatar--light { display: none; }
  :root:not([data-theme="light"]) .byline__avatar--dark { display: block; }
}
[data-theme="dark"] .byline__avatar--light { display: none; }
[data-theme="dark"] .byline__avatar--dark { display: block; }
.byline p { font-size: var(--ass-font-size-sm); color: var(--ass-color-muted); }
.byline strong { color: var(--ass-color-text); }
.ai-label {
  display: inline-flex; align-items: center; gap: var(--ass-space-1);
  font: var(--ass-font-weight-bold) var(--ass-font-size-xs)/1.2 var(--ass-font-body);
  color: var(--ass-color-info-text); background: var(--ass-color-info-soft);
  border: var(--ass-border-sm) solid currentColor; border-radius: var(--ass-radius-pill);
  padding: 0.3em 0.7em; margin-top: var(--ass-space-2);
}

.prose { max-width: var(--ass-layout-content); }
.prose > * + * { margin-top: var(--ass-space-4); }
.prose h2 { margin-bottom: var(--ass-space-2); }
.prose ul:not([class]) { padding-left: 1.2em; display: grid; gap: var(--ass-space-2); }
.prose ul:not([class]) li::marker { color: var(--ass-color-muted); }

/* PATTERN chapters */
.chapters ol { list-style: none; margin: 0; padding: 0; border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-lg); overflow: hidden; background: var(--ass-color-surface); }
.chapters li + li { border-top: var(--ass-border-hairline) solid var(--ass-color-line); }
.chapter {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--ass-space-3); align-items: center;
  width: 100%; min-height: var(--ass-space-12); padding: var(--ass-space-3) var(--ass-space-4);
  background: transparent; border: 0; color: var(--ass-color-text); text-align: left; cursor: pointer;
  font: var(--ass-font-weight-semibold) var(--ass-font-size-base)/var(--ass-line-height-snug) var(--ass-font-body);
}
.chapter:hover { background: var(--ass-color-accent-soft); }
.chapter:focus-visible { outline-offset: calc(-1 * var(--ass-border-focus)); }
.chapter time {
  font: var(--ass-font-weight-bold) var(--ass-font-size-sm)/1 var(--ass-font-mono);
  background: var(--ass-color-surface-alt); border: var(--ass-border-sm) solid var(--ass-color-line);
  border-radius: var(--ass-radius-xs); padding: 0.35em 0.4em; text-align: center;
}
.chapter[aria-current="true"] { background: var(--ass-color-accent-soft); }
.chapter[aria-current="true"] time { background: var(--ass-color-accent); color: var(--ass-color-accent-ink); border-color: var(--ass-color-ink); }
.chapter__tag { font: var(--ass-font-weight-bold) var(--ass-font-size-xs)/1 var(--ass-font-mono); letter-spacing: var(--ass-tracking-caps); text-transform: uppercase; color: var(--ass-color-danger-text); }
/* sulla riga evidenziata (tinta lime) il corallo scuro non arriva a 4,5:1 nel tema scuro: l'etichetta passa al colore del testo */
.chapter:hover .chapter__tag, .chapter[aria-current="true"] .chapter__tag { color: var(--ass-color-text); }

/* PATTERN tip-serio (nuvoletta di Serio) e tip-antonio (Il consiglio di Antonio) */
.tip { display: grid; gap: var(--ass-space-4); align-items: center; }
@media (min-width: 30em) { .tip { grid-template-columns: 11.5rem minmax(0, 1fr); } }
.tip__art { width: 11.5rem; justify-self: center; }
.tip__bubble {
  position: relative;
  background: var(--ass-color-paper); color: var(--ass-color-ink);
  border: var(--ass-border-lg) solid var(--ass-color-ink); border-radius: var(--ass-radius-lg);
  box-shadow: var(--ass-shadow-md);
  padding: var(--ass-space-5);
}
.tip__bubble::after {
  content: ""; position: absolute; width: 1.25rem; height: 1.25rem; background: var(--ass-color-paper);
  border-right: var(--ass-border-lg) solid var(--ass-color-ink); border-bottom: var(--ass-border-lg) solid var(--ass-color-ink);
  left: 50%; top: -0.75rem; transform: rotate(-135deg);
}
@media (min-width: 30em) { .tip__bubble::after { left: -0.78rem; top: 40%; transform: rotate(135deg); } }
.tip__title { font: var(--ass-font-weight-regular) var(--ass-font-size-lg)/1 var(--ass-font-comic); letter-spacing: var(--ass-tracking-comic); text-transform: uppercase; margin-bottom: var(--ass-space-2); }
.tip__text { font: var(--ass-text-bubble); }
.tip__text + .tip__text { margin-top: var(--ass-space-2); }

/* colori fissi della rubrica (token --ass-rubric-consiglio-antonio-*): carta, pillola acqua, evidenziatore lime;
   uguali nei due temi (nell'HTML il blocco ha data-theme="light") */
.tip-antonio {
  position: relative;
  background: var(--ass-rubric-consiglio-antonio-bg); color: var(--ass-rubric-consiglio-antonio-text);
  border: var(--ass-border-lg) solid var(--ass-color-ink); border-radius: var(--ass-radius-xl);
  box-shadow: var(--ass-shadow-xl);
  padding: var(--ass-space-6);
  display: grid; gap: var(--ass-space-4);
}
@media (min-width: 30em) { .tip-antonio { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--ass-space-5); padding: var(--ass-space-8); } }
.tip-antonio__portrait { width: 6rem; height: 6rem; } /* ritratto tondo con disco e anello nell'SVG, vedi .about__portrait */
.tip-antonio__label {
  display: inline-block; margin-bottom: var(--ass-space-3);
  background: var(--ass-rubric-consiglio-antonio-tag-bg); color: var(--ass-rubric-consiglio-antonio-tag-text);
  border: var(--ass-border-sm) solid var(--ass-color-ink); border-radius: var(--ass-radius-pill);
  padding: var(--ass-space-1) var(--ass-space-3);
}
.tip-antonio h2 { font: var(--ass-text-h3); letter-spacing: var(--ass-text-h3-tracking); margin-bottom: var(--ass-space-3); }
.tip-antonio h2 em {
  font-style: normal; padding: 0 0.12em;
  background: var(--ass-rubric-consiglio-antonio-highlight); color: var(--ass-rubric-consiglio-antonio-on-highlight);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tip-antonio blockquote { margin: 0; font: var(--ass-text-lead); }
.tip-antonio blockquote p + p { margin-top: var(--ass-space-3); }
.tip-antonio__sign { margin-top: var(--ass-space-4); font: var(--ass-font-weight-bold) var(--ass-font-size-sm)/1.3 var(--ass-font-body); color: var(--ass-color-muted); }
/* Bangers solo per lettering e SFX in maiuscolo (decisione del 25/09/2026): i glifi minuscoli di Bangers sono già maiuscoli,
   text-transform lo rende esplicito anche con il font di riserva */
.tip-antonio__sign strong {
  font: var(--ass-font-weight-regular) var(--ass-font-size-lg)/1 var(--ass-font-comic); letter-spacing: var(--ass-tracking-comic); text-transform: uppercase;
  color: var(--ass-rubric-consiglio-antonio-on-highlight); background: var(--ass-rubric-consiglio-antonio-highlight);
  padding: 0.12em 0.25em 0; margin-left: var(--ass-space-1);
}

/* PATTERN transcript */
.transcript { border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-lg); background: var(--ass-color-surface); }
.transcript > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ass-space-3);
  padding: var(--ass-space-4) var(--ass-space-5); cursor: pointer; list-style: none;
  font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking);
  border-radius: var(--ass-radius-lg);
}
.transcript > summary::-webkit-details-marker { display: none; }
.transcript > summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  font: var(--ass-font-weight-extrabold) var(--ass-font-size-md)/1 var(--ass-font-display);
  background: var(--ass-color-accent); color: var(--ass-color-accent-ink);
  border: var(--ass-border-sm) solid var(--ass-color-ink); border-radius: var(--ass-radius-pill);
}
.transcript[open] > summary::after { content: "–"; }
.transcript > summary small { display: block; font: var(--ass-text-small); color: var(--ass-color-muted); margin-top: var(--ass-space-1); }
.transcript__body { padding: 0 var(--ass-space-5) var(--ass-space-5); display: grid; gap: var(--ass-space-4); border-top: var(--ass-border-hairline) solid var(--ass-color-line); padding-top: var(--ass-space-5); }
.transcript__chapter { font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase; color: var(--ass-color-muted); padding-top: var(--ass-space-2); }
.line { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--ass-space-3); }
.line time { font: var(--ass-font-weight-bold) var(--ass-font-size-xs)/1.9 var(--ass-font-mono); color: var(--ass-color-muted); }
.line p { max-width: 65ch; }
.speaker { font: var(--ass-font-weight-regular) var(--ass-font-size-md)/1 var(--ass-font-comic); letter-spacing: var(--ass-tracking-comic); text-transform: uppercase; margin-right: var(--ass-space-1); }
.speaker--serio { background: var(--ass-color-c1); color: var(--ass-color-ink); padding: 0.1em 0.3em 0; border-radius: var(--ass-radius-xs); }
.speaker--antonio { background: var(--ass-color-inverse-bg); color: var(--ass-color-inverse-text); padding: 0.1em 0.3em 0; border-radius: var(--ass-radius-xs); }

/* PATTERN resource-cta (la CTA principale di ogni episodio) */
.resource {
  display: grid; gap: var(--ass-space-6); align-items: center;
  padding: var(--ass-space-8) var(--ass-space-6);
  overflow: hidden;
}
.resource h2 { font: var(--ass-text-h1); letter-spacing: var(--ass-text-h1-tracking); margin-bottom: var(--ass-space-3); }
.resource__list { display: grid; gap: var(--ass-space-2); margin: var(--ass-space-5) 0 var(--ass-space-6); }
.resource__list li { display: flex; gap: var(--ass-space-3); align-items: center; font-weight: var(--ass-font-weight-semibold); }
.resource__list .icon { width: 2rem; height: 2rem; padding: 0.3rem; background: var(--ass-color-surface); border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-sm); }
.resource__art { width: min(15rem, 70%); justify-self: center; }
@media (min-width: 48em) {
  .resource { grid-template-columns: minmax(0, 1fr) 15rem; padding: var(--ass-space-10); }
  .resource__art { width: 100%; }
}
@media (min-width: 64em) { .resource { grid-template-columns: minmax(0, 1fr) 20rem; } }

/* scheda risorse compatta (colonna laterale) */
.res-mini { display: grid; gap: var(--ass-space-3); }
.res-mini h2 { font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking); }
.res-mini p { font-size: var(--ass-font-size-sm); color: var(--ass-color-muted); }

.aside-title { font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase; color: var(--ass-color-muted); margin-bottom: var(--ass-space-3); }
.prompt-card--compact .prompt-card__body { font-size: var(--ass-font-size-xs); padding: var(--ass-space-4); }
.prompt-card--compact { box-shadow: var(--ass-shadow-lg); }

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

/* ------------------------------------------------------------------ aggiunte pagina video */
.vhead__series .eyebrow { margin: 0; }
.facade__frame .vthumb { display: block; }
.section--flush { padding-top: 0; }
.facts { display: grid; gap: 0; margin-block: var(--ass-space-1) var(--ass-space-2); }
.facts li { display: flex; justify-content: space-between; gap: var(--ass-space-3); padding-block: var(--ass-space-2); border-bottom: var(--ass-border-hairline) solid var(--ass-color-line); font-size: var(--ass-font-size-sm); }
.facts li span { color: var(--ass-color-muted); }
.facts li strong { text-align: right; }

/* ==================================================================================================================
   ADATTAMENTI WORDPRESS
   Da qui in giù: come i blocchi del core (core/navigation, core/button, core/query, core/post-*, core/breadcrumbs,
   core/search) prendono l'aspetto dei componenti della demo, più le parti che la demo non aveva (archivi, articoli,
   pagine, pagine legali, 404). Stesse regole di sopra: solo variabili dei token, nessun colore scritto a mano.
   ================================================================================================================== */

/* ------------------------------------------------------------------ struttura del template */
.site-main { display: block; }
/* la template part di ogni scheda (div.scheda) non conta nella griglia: la scheda è figlia diretta del <li> */
.wp-block-post > .scheda { display: contents; }
.wp-block-post-template { list-style: none; margin-block: 0; padding-block: 0; }
.wp-block-post-template:not(.wrap) { padding-inline: 0; max-width: none; }
/* le miniature segnaposto dentro core/post-featured-image: il core dà width: 100% a ogni img del blocco */
.wp-block-post-featured-image .vthumb__art { width: 46cqi; max-width: none; height: auto; }
.wp-block-post-featured-image .sthumb__art { width: 100%; max-width: none; height: auto; }
:where(figure) { margin: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; word-wrap: normal !important; }
.vthumb, .sthumb { display: block; }
/* campi vuoti delle schede (block bindings senza dato) */
.tags > li:empty, .meta-row > li:empty, .checklist > li:empty,
.vhead__series > p:empty, .video-card__meta:empty, .post-card__meta:empty, .post-card__cat:empty,
.short-card__meta:empty, .book__links:empty, .fonti:empty, .status:empty, .vhead__adv:empty,
.libro-testata__autore:empty, .profilo__profili:empty { display: none; }

/* ------------------------------------------------------------------ icone come maschera (blocchi del core) */
.icona, .more-link a::after, .meta-row__durata::before, .meta-row .verified::before, .is-style-spunte > li::before,
.wp-block-button[class*="icona-"] .wp-block-button__link::before, .wp-block-button[class*="icona-"] .wp-block-button__link::after,
.link-esterno::after {
  display: inline-block; flex: none; width: 1.25em; height: 1.25em;
  background: currentColor;
  -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat;
}
.icona { vertical-align: -0.2em; }
.icona--search { --icona: url("../icons/search.svg"); }
.icona--play { --icona: url("../icons/play.svg"); }
.icona--copy { --icona: url("../icons/copy.svg"); }
.icona--check { --icona: url("../icons/check-3.svg"); }
.icona--shield { --icona: url("../icons/shield.svg"); }
.icona--wand { --icona: url("../icons/wand.svg"); }
.icona--compass { --icona: url("../icons/compass.svg"); }
.icona--calc { --icona: url("../icons/calc.svg"); }
.icona--mail { --icona: url("../icons/mail.svg"); }
.icona--book { --icona: url("../icons/book.svg"); }
.icona--clock { --icona: url("../icons/clock.svg"); }
.icona--share { --icona: url("../icons/share.svg"); }
.link-esterno::after { content: ""; width: 0.9em; height: 0.9em; margin-left: 0.2em; vertical-align: -0.05em; --icona: url("../icons/external.svg"); }

/* ------------------------------------------------------------------ testata: core/navigation come il menu della demo */
.site-nav.wp-block-navigation { --navigation-layout-wrap: nowrap; position: static; }
.site-nav .wp-block-navigation__container.wp-block-navigation__container { display: flex; flex-wrap: nowrap; gap: var(--ass-space-1); }
.site-nav .wp-block-navigation-item { display: block; }
.site-nav.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: block; text-decoration: none; color: var(--ass-color-text);
  font: var(--ass-font-weight-semibold) var(--ass-font-size-sm)/1.2 var(--ass-font-body);
  padding: var(--ass-space-2) var(--ass-space-2); border-radius: var(--ass-radius-sm);
}
.site-nav.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { background: var(--ass-color-accent-soft); color: var(--ass-color-text); }
.site-nav.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current] { background: var(--ass-highlight); color: var(--ass-color-on-highlight); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-nav.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { background: var(--ass-color-surface-alt); }
  :root:not([data-theme="light"]).js .site-nav.is-open .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current] { background: var(--ass-color-surface-alt); }
}
[data-theme="dark"] .site-nav.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { background: var(--ass-color-surface-alt); }
[data-theme="dark"].js .site-nav.is-open .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current] { background: var(--ass-color-surface-alt); }
/* telefono e tablet: menu a comparsa (senza JS il menu resta visibile, in una riga scorrevole) */
html:not(.js) .site-nav.wp-block-navigation { order: 10; width: 100%; overflow-x: auto; }
.js .site-nav.wp-block-navigation { display: none; }
.js .site-nav.wp-block-navigation.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ass-color-bg);
  border-bottom: var(--ass-border-sm) solid var(--ass-color-border);
  box-shadow: 0 var(--ass-space-2) 0 0 var(--ass-color-shadow);
  padding: var(--ass-space-3) var(--ass-layout-gutter) var(--ass-space-5);
  max-height: calc(100dvh - 4.25rem); overflow-y: auto;
}
.js .site-nav.is-open .wp-block-navigation__container.wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; max-width: var(--ass-layout-wide); margin-inline: auto; }
.js .site-nav.is-open .wp-block-navigation-item__content.wp-block-navigation-item__content { font: var(--ass-text-h4); padding: var(--ass-space-3) var(--ass-space-2); border-bottom: var(--ass-border-hairline) solid var(--ass-color-line); border-radius: 0; }
.js .site-nav.is-open .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current] { background: var(--ass-color-accent-soft); color: var(--ass-color-text); box-shadow: inset var(--ass-space-2) 0 0 0 var(--ass-color-c1); padding-left: var(--ass-space-5); }
@media (min-width: 64em) {
  .js .site-nav.wp-block-navigation, html:not(.js) .site-nav.wp-block-navigation { display: block; order: 0; width: auto; margin-right: auto; overflow: visible; }
}
/* senza la finestra di ricerca (o senza JavaScript) il pulsante Cerca non serve */
html:not(.js) .search-open, .search-open[hidden] { display: none; }

/* ------------------------------------------------------------------ piè di pagina: colonne con core/navigation */
.site-footer__col > .site-footer__title { margin-bottom: var(--ass-space-4); }
/* il <nav> del core è flex: l'elenco deve occupare tutta la colonna, così le due colonne delle note legali (< 48em)
   cadono sulle stesse tracce della griglia del piè di pagina, come nella demo */
.site-footer__nav .wp-block-navigation__container.wp-block-navigation__container { display: grid; gap: var(--ass-space-2); align-items: start; flex: 1 1 100%; width: 100%; }
.site-footer__nav .wp-block-navigation-item { display: block; }
.site-footer__nav.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: inline-block; color: var(--ass-color-text); text-decoration: none; font-size: var(--ass-font-size-sm); padding-block: 0.15em; border-radius: var(--ass-radius-xs);
}
.site-footer__nav.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { text-decoration: underline; background: none; }
.site-footer__col:last-child .wp-block-navigation__container.wp-block-navigation__container { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ass-space-6); }
@media (min-width: 48em) {
  .site-footer__col:last-child .wp-block-navigation__container.wp-block-navigation__container { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ pulsanti: core/button con l'aspetto di .btn */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--ass-space-3); }
.wp-block-buttons > .wp-block-button { display: inline-flex; }
.wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ass-space-2);
  min-height: var(--ass-space-12);
  padding: var(--ass-space-3) var(--ass-space-5);
  font: var(--ass-font-weight-bold) var(--ass-font-size-base)/var(--ass-line-height-none) var(--ass-font-body);
  letter-spacing: normal; text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer;
  color: var(--ass-color-text); background: var(--ass-color-surface);
  border: var(--ass-border-md) solid var(--ass-color-border);
  border-radius: var(--ass-radius-pill);
  box-shadow: var(--ass-shadow-md);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.wp-block-button .wp-block-button__link:hover { transform: translate(-1px, -1px); box-shadow: var(--ass-shadow-lg); background: var(--ass-color-surface); color: var(--ass-color-text); }
.wp-block-button .wp-block-button__link:active { transform: translate(3px, 3px); box-shadow: var(--ass-shadow-pressed); }
.wp-block-button.is-style-primario .wp-block-button__link,
.wp-block-button.is-style-primario .wp-block-button__link:hover { background: var(--ass-color-accent); color: var(--ass-color-accent-ink); border-color: var(--ass-color-ink); }
.wp-block-button.is-style-scuro .wp-block-button__link,
.wp-block-button.is-style-scuro .wp-block-button__link:hover { background: var(--ass-color-inverse-bg); color: var(--ass-color-inverse-text); border-color: var(--ass-color-inverse-bg); box-shadow: var(--ass-space-1) var(--ass-space-1) 0 0 var(--ass-color-c1); }
.wp-block-button.pulsante-piccolo .wp-block-button__link { min-height: 2.75rem; padding: var(--ass-space-2) var(--ass-space-4); font-size: var(--ass-font-size-sm); box-shadow: var(--ass-shadow-sm); }
.wp-block-button.pulsante-piccolo .wp-block-button__link:hover { box-shadow: var(--ass-shadow-md); }
.wp-block-button.pulsante-largo, .wp-block-button.pulsante-largo .wp-block-button__link { width: 100%; }
/* icone dei pulsanti: icona-prima-<nome> / icona-dopo-<nome> sul blocco */
.wp-block-button[class*="icona-prima-"] .wp-block-button__link::before,
.wp-block-button[class*="icona-dopo-"] .wp-block-button__link::after { content: ""; }
.wp-block-button.icona-dopo-freccia .wp-block-button__link::after { --icona: url("../icons/arrow.svg"); }
.wp-block-button.icona-dopo-esterno .wp-block-button__link::after { --icona: url("../icons/external.svg"); width: 1em; height: 1em; }
.wp-block-button.icona-prima-play .wp-block-button__link::before { --icona: url("../icons/play.svg"); }
.wp-block-button.icona-prima-share .wp-block-button__link::before { --icona: url("../icons/share.svg"); }
.wp-block-button.icona-prima-copia .wp-block-button__link::before { --icona: url("../icons/copy.svg"); }
button.wp-block-button__link { font-family: var(--ass-font-body); }

/* ------------------------------------------------------------------ intestazioni di sezione e «vai a» */
.section-head > .wp-block-group { min-width: 0; }
p.more-link { margin: 0; }
p.more-link a { display: inline-flex; align-items: center; gap: var(--ass-space-1); font-weight: var(--ass-font-weight-bold); white-space: nowrap; }
.more-link a::after { content: ""; --icona: url("../icons/arrow.svg"); transition: transform var(--ass-duration-fast) var(--ass-ease-standard); }
.more-link a:hover::after { transform: translateX(3px); }
.potw__intro .more-link { margin-top: var(--ass-space-4); }

/* ------------------------------------------------------------------ schede nelle griglie (core/post-template) */
.card-grid > li { min-width: 0; }
/* scheda video: tutta la scheda è il link del titolo (un solo punto di Tab, anello sulla scheda) */
.video-card, .short-card { position: relative; }
.video-card .wp-block-post-featured-image, .short-card .wp-block-post-featured-image { margin: 0; }
.video-card .wp-block-post-featured-image > img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-lg); box-shadow: var(--ass-shadow-md);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.short-card .wp-block-post-featured-image > img {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-lg); box-shadow: var(--ass-shadow-md);
}
.video-card .video-card__title { margin-top: var(--ass-space-1); }
.video-card__title a, .short-card__title a { color: var(--ass-color-text); text-decoration: none; border-radius: 0; }
.video-card__title a::after, .short-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ass-radius-lg); }
.video-card__title a:hover, .short-card__title a:hover { background: none; color: var(--ass-color-text); }
.video-card__title a:focus-visible, .short-card__title a:focus-visible { outline: none; }
.video-card:has(a:focus-visible), .short-card:has(a:focus-visible) { outline: var(--ass-focus-outline); outline-offset: var(--ass-space-1); border-radius: var(--ass-radius-lg); }
.video-card:hover .video-card__title a, .short-card:hover .short-card__title a { text-decoration: underline; text-decoration-thickness: var(--ass-border-sm); text-underline-offset: 0.2em; }
.video-card:hover .vthumb, .video-card:hover .wp-block-post-featured-image > img,
.short-card:hover .sthumb { transform: translate(-2px, -2px); box-shadow: var(--ass-shadow-lg); }
.video-card .tags, .video-card__meta { position: relative; }
/* livello: lime per principiante, acqua per intermedio, inchiostro per avanzato */
.tag:has(> .livello--principiante) { background: var(--ass-color-accent); color: var(--ass-color-accent-ink); border-color: var(--ass-color-ink); }
.tag:has(> .livello--intermedio) { background: var(--ass-color-info); color: var(--ass-color-info-ink); border-color: var(--ass-color-ink); }
.tag:has(> .livello--avanzato) { background: var(--ass-color-inverse-bg); color: var(--ass-color-inverse-text); border-color: var(--ass-color-inverse-bg); }
/* scheda articolo (anche prompt, aggiornamenti e contenuti misti) */
.post-card { display: flex; flex-direction: column; gap: var(--ass-space-3); height: 100%; }
.post-card .wp-block-post-excerpt { margin: 0; color: var(--ass-color-muted); font-size: var(--ass-font-size-sm); }
.wp-block-post-excerpt__excerpt { margin: 0; }
.wp-block-post-excerpt__more-text { display: none; }
.post-card__title a { border-radius: 0; }
.post-card__meta span:empty { display: none; }
.post-card__meta time, .video-card__meta time { white-space: nowrap; }
.post-card .tags { margin-top: auto; }
.post-card .tags + .post-card__meta { margin-top: 0; }
.prompt-scheda .post-card__cat { font-family: var(--ass-font-mono); }
/* scheda strumento: riempie la cella della griglia (tutte alte uguali, stato in fondo), come .tool-card della demo */
.card-grid .tool-card { height: 100%; }
.tool-card .tool-card__icon-riga { margin: 0; line-height: 0; }
.tool-card__icon .icona { width: 1.75rem; height: 1.75rem; vertical-align: 0; }
/* colore del riquadro dell'icona come nei prototipi: bussola lime, scudo corallo, bacchetta acqua, calcolatrice carta */
.tool-card__icon:has(.icona--shield) { background: var(--ass-color-c2); }
.tool-card__icon:has(.icona--wand) { background: var(--ass-color-c3); }
.tool-card__icon:has(.icona--calc) { background: var(--ass-color-paper); }
.tool-card .wp-block-post-excerpt { margin: 0; font-size: var(--ass-font-size-sm); color: var(--ass-color-muted); }
/* stato dello strumento (campo strumento-stato): «Presto» tratteggiato come .status--soon della demo, «Beta» pieno */
.status:has(> .stato--presto) { color: var(--ass-color-muted) !important; border: var(--ass-border-sm) dashed currentColor; background: transparent; }
.status:has(> .stato--beta) { border: var(--ass-border-sm) solid currentColor; color: var(--ass-color-info-text) !important; }
/* libri */
.books--griglia { display: grid; gap: var(--ass-space-6); }
@media (min-width: 48em) { .books--griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ass-space-10); } }
.book .wp-block-post-featured-image { margin: 0; }
.book .wp-block-post-featured-image > img {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 8; object-fit: cover;
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-xs) var(--ass-radius-md) var(--ass-radius-md) var(--ass-radius-xs);
  box-shadow: var(--ass-shadow-md);
}
.book .book__cover { display: flex; }
.book__info .wp-block-post-excerpt { margin: 0; color: var(--ass-color-muted); }
.book__info > * { margin: 0; }

/* ------------------------------------------------------------------ prompt della settimana */
.lista-singola > li { list-style: none; }
.potw__intro .wp-block-post-title { font: var(--ass-text-h2); letter-spacing: var(--ass-text-h2-tracking); }
/* solo il margine sotto: quello sopra è la spaziatura della demo (.potw__intro > * + *) tra titolo e presentazione */
.potw__intro .wp-block-post-excerpt { margin-bottom: 0; }
.checklist > li { display: flex; gap: var(--ass-space-2); align-items: center; }
.is-style-spunte { display: grid; gap: var(--ass-space-2); list-style: none; padding: 0; }
.is-style-spunte > li { display: flex; gap: var(--ass-space-2); align-items: center; }
.is-style-spunte > li::before { content: ""; --icona: url("../icons/check-3.svg"); }

/* ------------------------------------------------------------------ percorso (core/breadcrumbs) */
.wp-block-breadcrumbs.crumbs ol { gap: var(--ass-space-1) 0; }
.wp-block-breadcrumbs.crumbs li + li::before { content: none; }
.wp-block-breadcrumbs.crumbs li:not(:last-child)::after { margin: 0 var(--ass-space-2); opacity: 1; color: var(--ass-color-muted); }
.wp-block-breadcrumbs.crumbs a { color: var(--ass-color-text); }
.wp-block-breadcrumbs.crumbs [aria-current] { color: var(--ass-color-muted); }

/* ------------------------------------------------------------------ testate: video, articoli, archivi */
.vhead .wp-block-post-title { max-width: 24ch; margin-bottom: var(--ass-space-5); }
.vhead__series > p { margin: 0; }
.vhead__adv .label-self { vertical-align: 0; }
.meta-row__durata::before { content: ""; --icona: url("../icons/clock.svg"); }
.meta-row .verified::before { content: ""; --icona: url("../icons/check-3.svg"); }
.meta-row time { white-space: nowrap; }
.page-head { padding-block: var(--ass-space-2) var(--ass-space-8); }
.page-head > * + * { margin-top: var(--ass-space-3); }
.page-head .crumbs + * { margin-top: var(--ass-space-6); }
.page-head__title { font: var(--ass-text-h1); letter-spacing: var(--ass-text-h1-tracking); }
.page-head__lead, .page-head .wp-block-term-description { max-width: 60ch; color: var(--ass-color-muted); font: var(--ass-text-lead); }
.page-head .wp-block-term-description p { margin: 0; }
.section--elenco { padding-top: var(--ass-space-2); }
/* testata di una serie: nei colori fissi della serie (classe aggiunta da inc/rendering.php) */
.serie-testata { position: relative; isolation: isolate; margin-bottom: var(--ass-space-8); border-bottom: var(--ass-border-lg) solid var(--ass-color-ink); }
.serie-testata .page-head { padding-bottom: var(--ass-space-10); }
.serie-testata::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--th-dot, transparent) 1.4px, transparent 1.6px); background-size: var(--ass-pattern-halftone-size); opacity: var(--th-dot-opacity, 1); }
.serie-testata--sul-serio { background: var(--ass-series-sul-serio-bg); color: var(--ass-series-sul-serio-title); --th-dot: var(--ass-series-sul-serio-halftone); --th-dot-opacity: var(--ass-series-sul-serio-halftone-opacity); }
.serie-testata--clic-per-clic, .serie-testata--tap-per-tap { background: var(--ass-series-clic-per-clic-bg); color: var(--ass-series-clic-per-clic-title); --th-dot: var(--ass-series-clic-per-clic-halftone); --th-dot-opacity: var(--ass-series-clic-per-clic-halftone-opacity); }
.serie-testata--truffa { background: var(--ass-series-truffa-bg); color: var(--ass-series-truffa-title); --th-dot: var(--ass-series-truffa-halftone); --th-dot-opacity: var(--ass-series-truffa-halftone-opacity); }
.serie-testata[class*="serie-testata--"] .crumbs, .serie-testata[class*="serie-testata--"] .crumbs a,
.serie-testata[class*="serie-testata--"] .crumbs [aria-current], .serie-testata[class*="serie-testata--"] .crumbs li::after,
.serie-testata[class*="serie-testata--"] .page-head__lead, .serie-testata[class*="serie-testata--"] .wp-block-term-description { color: inherit; }
.serie-testata[class*="serie-testata--"] .crumbs a:hover { background: var(--ass-color-paper); color: var(--ass-color-ink); }

/* ------------------------------------------------------------------ pagina video: parti fatte con i blocchi del core */
.video-actions > .wp-block-buttons { margin: 0; }
.video-actions__main { flex: 1 1 16rem; }
.video-actions__main .wp-block-button, .video-actions__main .wp-block-button__link { width: 100%; }
.video-actions__more { display: flex; gap: var(--ass-space-3); flex-wrap: nowrap; }
@media (min-width: 48em) {
  .video-actions__main { flex: 0 1 auto; }
  .video-actions__main .wp-block-button, .video-actions__main .wp-block-button__link { width: auto; }
}
html:not(.js) .share-btn { display: none; }
.byline__testo > * + * { margin-top: var(--ass-space-1); }
.byline__testo .ai-label { margin-top: var(--ass-space-2); }
.in-questo-video .entry-content > * + * { margin-top: var(--ass-space-4); }
/* ripiego della facciata (senza ass-blocks): miniatura ferma e link a YouTube, nessun lettore */
.facade__frame--statica { cursor: default; }

/* ------------------------------------------------------------------ testo lungo: articoli, pagine, pagine legali */
.prose { max-width: var(--ass-layout-content); }
.prose > * + * { margin-top: var(--ass-space-4); }
.prose :is(h2, h3, h4) { margin-top: var(--ass-space-10); }
.prose h3 { font: var(--ass-text-h3); letter-spacing: var(--ass-text-h3-tracking); margin-top: var(--ass-space-8); }
.prose h4 { margin-top: var(--ass-space-6); }
.prose > :first-child { margin-top: 0; }
.prose :is(h2, h3, h4) + * { margin-top: var(--ass-space-3); }
.prose :is(ul, ol):not([class*="tags"], .meta-row) { list-style: revert; padding-left: 1.2em; }
.prose :is(ul, ol):not([class*="tags"], .meta-row) > li + li { margin-top: var(--ass-space-2); }
.prose li::marker { color: var(--ass-color-muted); }
.prose blockquote { margin: 0; padding-left: var(--ass-space-5); border-left: var(--ass-space-1) solid var(--ass-color-c1); font: var(--ass-text-lead); }
.prose img { height: auto; border-radius: var(--ass-radius-md); }
/* illustrazioni e mockup negli articoli: cornice come la copertina (bordo d'inchiostro, ombra piena) */
.prose .wp-block-image { margin: var(--ass-space-8) 0 0; }
.prose .wp-block-image + * { margin-top: var(--ass-space-6); }
.prose .wp-block-image img { display: block; width: 100%; border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-lg); box-shadow: var(--ass-shadow-md); }
.prose .wp-block-image figcaption { margin-top: var(--ass-space-3); }
.prose figcaption { margin-top: var(--ass-space-2); font-size: var(--ass-font-size-xs); color: var(--ass-color-muted); }
.prose :not(pre) > code { font: var(--ass-font-weight-medium) 0.9em/1 var(--ass-font-mono); background: var(--ass-color-surface-alt); border: var(--ass-border-hairline) solid var(--ass-color-line); border-radius: var(--ass-radius-xs); padding: 0.1em 0.35em; }
.prose pre { font: var(--ass-text-code); background: var(--ass-color-surface-alt); border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-md); padding: var(--ass-space-4); white-space: pre-wrap; overflow-wrap: anywhere; }
/* tabelle: scheda come le card (bordo d'inchiostro, ombra piena), intestazione lime con testo in inchiostro e
   etichette in mono maiuscolo, righe alterne leggere; la prima colonna fa da etichetta. Blocco core/table degli
   articoli e .table-wrap delle pagine legali. Su schermi stretti la tabella scorre dentro la scheda. */
.prose :is(.wp-block-table, .table-wrap) { margin: var(--ass-space-6) 0 0; overflow-x: auto; background: var(--ass-color-surface); border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-lg); box-shadow: var(--ass-shadow-sm); }
.prose :is(.wp-block-table, .table-wrap) + * { margin-top: var(--ass-space-6); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--ass-font-size-sm); line-height: var(--ass-line-height-snug); }
.prose :is(th, td) { text-align: left; vertical-align: top; padding: var(--ass-space-3) var(--ass-space-4); }
/* specificità più alta del CSS del blocco core/table (bordi su ogni cella, bordo spesso sotto thead) */
.prose :is(.wp-block-table, .table-wrap) :is(thead, tbody, tr, th, td) { border: 0; }
.prose :is(.wp-block-table, .table-wrap) :is(th, td) { padding: var(--ass-space-3) var(--ass-space-4); }
.prose :is(.wp-block-table, .table-wrap) thead { background: var(--ass-color-highlight); }
.prose :is(.wp-block-table, .table-wrap) thead th { color: var(--ass-color-on-highlight); font: var(--ass-text-eyebrow); letter-spacing: var(--ass-text-eyebrow-tracking); text-transform: uppercase; white-space: nowrap; border-bottom: var(--ass-border-sm) solid var(--ass-color-border); }
.prose :is(.wp-block-table, .table-wrap) tbody tr + tr > * { border-top: var(--ass-border-hairline) solid var(--ass-color-line); }
.prose :is(.wp-block-table, .table-wrap) tbody tr:nth-child(even) { background: var(--ass-color-surface-alt); }
.prose :is(.wp-block-table, .table-wrap) tbody tr > :first-child { font-weight: var(--ass-font-weight-bold); }.prose hr { border: 0; border-top: var(--ass-border-hairline) solid var(--ass-color-line); margin-block: var(--ass-space-8); }
.prose strong { font-weight: var(--ass-font-weight-bold); }
.prose .wp-block-buttons { margin-top: var(--ass-space-6); }
/* pagine */
.pagina { padding-block: var(--ass-space-10) var(--ass-layout-section); }
/* con il percorso (template page, spec SEO §7.3) lo spazio in alto lo dà .crumbs, come negli articoli */
.pagina:has(> .crumbs) { padding-top: 0; }
.pagina > .crumbs { margin-bottom: var(--ass-space-6); }
.pagina__title { font: var(--ass-text-h1); letter-spacing: var(--ass-text-h1-tracking); max-width: 24ch; margin-bottom: var(--ass-space-6); }
.prose > .lead { font: var(--ass-text-lead); max-width: 60ch; }
.prose--legale .updated { color: var(--ass-color-muted); font-size: var(--ass-font-size-sm); }
.prose--legale .box { background: var(--ass-color-surface); border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-lg); box-shadow: var(--ass-shadow-sm); padding: var(--ass-space-4) var(--ass-space-5); }
.prose--legale .box > * + * { margin-top: var(--ass-space-3); }
/* articoli e contenuti singoli */
.articolo { padding-bottom: var(--ass-layout-section); }
.articolo > .byline, .articolo__principale > .byline { max-width: var(--ass-layout-content); }
.articolo > * + * { margin-top: var(--ass-space-6); }
.articolo > .crumbs + .vhead { margin-top: 0; }
.articolo__immagine img { display: block; width: 100%; height: auto; border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-lg); box-shadow: var(--ass-shadow-md); }
.articolo__immagine { max-width: var(--ass-layout-content); }
.articolo__lead { max-width: var(--ass-layout-content); font: var(--ass-text-lead); color: var(--ass-color-muted); }
.articolo__lead p { margin: 0; }
.articolo--prompt > .prompt-card { max-width: var(--ass-layout-content); }
.articolo__tag { display: flex; flex-wrap: wrap; gap: var(--ass-space-2); font-size: var(--ass-font-size-sm); }
.articolo__tag a { text-decoration: none; color: var(--ass-color-text); border: var(--ass-border-sm) solid var(--ass-color-line); border-radius: var(--ass-radius-pill); padding: var(--ass-space-1) var(--ass-space-3); }
.articolo__tag .wp-block-post-terms__separator { display: none; }
.fonti { max-width: var(--ass-layout-content); font-size: var(--ass-font-size-sm); color: var(--ass-color-muted); border-top: var(--ass-border-hairline) solid var(--ass-color-line); padding-top: var(--ass-space-4); }
.articolo--strumento .tool-card__icon-riga { margin: 0 0 var(--ass-space-4); line-height: 0; }
.articolo--strumento .status { display: inline-block; margin-top: var(--ass-space-2); }
/* Colonna contestuale (blocco ass/colonna, 03/10/2026): da 1024 px accanto al testo, in alto all'altezza della firma
   (o della scheda del prompt, della presentazione dello strumento, del testo del libro); il testo resta largo 720 px
   da 1280 px. Sotto i 1024 px la colonna va dopo il testo, come sezione «Per continuare». Senza moduli il blocco non
   stampa niente e la griglia resta a una colonna, come prima. Gli stili dei moduli sono nel blocco (ass-blocks). */
.articolo__principale > * + * { margin-top: var(--ass-space-6); }
.articolo__principale > .articolo__lead + .articolo__testo { margin-top: var(--ass-space-6); }
.articolo__griglia > .colonna { margin-top: var(--ass-space-12); }
.pagina .articolo__griglia > .colonna { margin-top: var(--ass-space-10); }
@media (min-width: 64em) {
  .articolo__griglia:has(> .colonna) { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: var(--ass-space-10); align-items: stretch; }
  .articolo__griglia > .colonna, .pagina .articolo__griglia > .colonna { margin-top: 0; }
}
@media (min-width: 80em) {
  .articolo__griglia:has(> .colonna) { grid-template-columns: minmax(0, var(--ass-layout-content)) 20rem; justify-content: space-between; column-gap: var(--ass-space-12); }
}
.libro-testata { display: grid; gap: var(--ass-space-6); align-items: start; }
.libro-testata .wp-block-post-featured-image { margin: 0; max-width: 14rem; }
.libro-testata .wp-block-post-featured-image > img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 8; object-fit: cover; border: var(--ass-border-sm) solid var(--ass-color-border); border-radius: var(--ass-radius-xs) var(--ass-radius-md) var(--ass-radius-md) var(--ass-radius-xs); box-shadow: var(--ass-shadow-lg); }
.libro-testata .book__cover { max-width: 14rem; }
.libro-testata__info > * + * { margin-top: var(--ass-space-4); }
.libro-amazon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ass-space-3); }
.libro-amazon > * { margin: 0; }
@media (min-width: 48em) { .libro-testata { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--ass-space-10); } }
/* scheda del libro: autore con il link alla pagina profilo, video e prompt collegati (spec SEO §7.3) */
.libro-testata__autore { font-weight: var(--ass-font-weight-bold); }
.libro-collegati { padding-top: 0; }
/* pagina profilo (pattern aisulserio/profilo): ritratto tondo e profili ufficiali, prima della biografia */
.profilo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ass-space-4) var(--ass-space-6); }
.profilo__ritratto { margin: 0; flex: none; }
.profilo__ritratto img { display: block; width: 8rem; height: 8rem; }
.profilo__profili { margin: 0; max-width: 40ch; font-size: var(--ass-font-size-sm); color: var(--ass-color-muted); }
.profilo__profili a { color: var(--ass-color-text); }

/* ------------------------------------------------------------------ elenchi: impaginazione e nessun risultato */
.paginazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ass-space-3); margin-top: var(--ass-space-10); }
.paginazione a, .paginazione .page-numbers { text-decoration: none; }
.paginazione .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: var(--ass-space-2); }
.paginazione .page-numbers {
  display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--ass-space-3);
  font: var(--ass-font-weight-bold) var(--ass-font-size-sm)/1 var(--ass-font-body); color: var(--ass-color-text);
  border: var(--ass-border-sm) solid var(--ass-color-line); border-radius: var(--ass-radius-pill);
}
.paginazione .page-numbers.current { background: var(--ass-color-accent); color: var(--ass-color-accent-ink); border-color: var(--ass-color-ink); }
.paginazione .page-numbers.dots { border-color: transparent; }
.paginazione :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
  display: inline-flex; align-items: center; gap: var(--ass-space-2); min-height: 2.75rem; padding: var(--ass-space-2) var(--ass-space-4);
  font: var(--ass-font-weight-bold) var(--ass-font-size-sm)/1 var(--ass-font-body); color: var(--ass-color-text); background: var(--ass-color-surface);
  border: var(--ass-border-md) solid var(--ass-color-border); border-radius: var(--ass-radius-pill); box-shadow: var(--ass-shadow-sm);
}
.vuoto { padding: var(--ass-space-8) var(--ass-space-6); border: var(--ass-border-sm) dashed var(--ass-color-line); border-radius: var(--ass-radius-lg); max-width: var(--ass-layout-content); }
.vuoto > * + * { margin-top: var(--ass-space-2); }
.vuoto__titolo { font: var(--ass-text-h4); letter-spacing: var(--ass-text-h4-tracking); }

/* ------------------------------------------------------------------ modulo di ricerca (core/search) */
.modulo-ricerca { margin-top: var(--ass-space-6); max-width: 36rem; }
.modulo-ricerca .wp-block-search__inside-wrapper { display: flex; flex-wrap: wrap; gap: var(--ass-space-3); border: 0; padding: 0; }
.modulo-ricerca .wp-block-search__input {
  flex: 1 1 14rem; min-width: 0; height: var(--ass-space-12); padding: 0 var(--ass-space-5);
  font: var(--ass-text-body); color: var(--ass-color-text); background: var(--ass-color-surface);
  border: var(--ass-border-md) solid var(--ass-color-border); border-radius: var(--ass-radius-pill);
}
.modulo-ricerca .wp-block-search__input::placeholder { color: var(--ass-color-muted); opacity: 1; }
.modulo-ricerca .wp-block-search__button {
  flex: 0 0 auto; height: var(--ass-space-12); margin: 0; padding: 0 var(--ass-space-5);
  font: var(--ass-font-weight-bold) var(--ass-font-size-base)/1 var(--ass-font-body);
  background: var(--ass-color-accent); color: var(--ass-color-accent-ink);
  border: var(--ass-border-md) solid var(--ass-color-ink); border-radius: var(--ass-radius-pill); box-shadow: var(--ass-shadow-md); cursor: pointer;
}
.hero__body .modulo-ricerca { margin-block: 0 var(--ass-space-6); }

/* ------------------------------------------------------------------ 404 */
.pagina-404 .hero__art img { display: block; width: min(20rem, 80%); margin: 0 auto; }
.pagina-404 .btn-row { margin-top: 0; }

/* ------------------------------------------------------------------ Copia del prompt nel ripiego del tema */
html:not(.js) .copy-btn { display: none; }
.copy-btn.is-copied { box-shadow: var(--ass-space-1) var(--ass-space-1) 0 0 var(--ass-color-c1); }