@layer ds{
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
}

/* ── Archivo, self-hosted (variabile: un file copre 400 e 800) ─────────── */
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
src:url(/assets/archivo-latin.8f704806db.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
src:url(/assets/archivo-latin-ext.ff4f17d219.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── header ───────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:var(--color-bg);border-bottom:2px solid var(--color-text)}
.hdr-in{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,64px);display:flex;align-items:center;gap:14px;height:54px}
.hdr-brand{font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text);white-space:nowrap;flex:0 0 auto;text-decoration:none}
.hdr-brand:hover{color:var(--color-accent)}
.hdr-rule{width:2px;height:18px;background:var(--color-divider);flex:0 0 auto}
.hdr-title{flex:1;min-width:0;font-size:13px;color:var(--color-neutral-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* sotto i 600px il titolo si ridurrebbe a due lettere: meglio toglierlo e
   lasciare il campo al marchio e al pulsante */
@media (max-width:600px){.hdr-title,.hdr-rule{display:none}.hdr-brand{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}}

/* salta al contenuto: visibile solo da tastiera */
.skip{position:absolute;left:-9999px;top:0;z-index:70;background:var(--color-text);color:var(--color-bg);font-family:var(--font-heading);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;text-decoration:none}
.skip:focus{left:0}
.hdr-btn{flex:0 0 auto;display:flex;align-items:center;gap:9px;font-family:var(--font-heading);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-bg);background:var(--color-text);border:0;padding:9px 14px;cursor:pointer}
.hdr-btn:hover{background:var(--color-accent)}
.hdr-btn svg{display:block}
.hdr-btn .i-close,.hdr-btn[aria-expanded=true] .i-open{display:none}
.hdr-btn[aria-expanded=true] .i-close{display:inline}
.hdr-btn[aria-expanded=true] .lbl{font-size:0}
.hdr-btn[aria-expanded=true] .lbl::after{content:'Chiudi';font-size:12px}
.hdr-progress{height:2px;background:var(--color-divider)}
.hdr-bar{height:2px;background:var(--color-accent);width:0;transform-origin:0 50%}

/* barra di lettura senza JS dove il browser sa animare sullo scorrimento.
   La durata deve essere 'auto': nella forma abbreviata 'animation' varrebbe
   0s e l'animazione non seguirebbe la timeline. */
@supports (animation-timeline:scroll()){
  .hdr-bar{width:100%;transform:scaleX(0);
    animation-name:hdr-read;animation-duration:auto;animation-timing-function:linear;
    animation-fill-mode:both;animation-timeline:scroll(root block)}
  @keyframes hdr-read{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ── contenuti larghi: scorrono invece di rompere la pagina ───────────── */
.scroll-x{overflow-x:auto;min-width:0;max-width:100%;overscroll-behavior-x:contain}
.scroll-x>.table{min-width:560px}

/* ── pannello indice ──────────────────────────────────────────────────── */
.pn-scrim{position:fixed;inset:56px 0 0;z-index:55;background:rgba(32,30,29,.4)}
.pn{position:fixed;top:56px;left:0;right:0;z-index:58;background:var(--color-bg);border-bottom:2px solid var(--color-text);max-height:calc(100vh - 56px);overflow-y:auto;box-shadow:var(--shadow-lg)}
.pn[hidden],.pn-scrim[hidden]{display:none}
.pn-in{max-width:1280px;margin:0 auto;padding:clamp(20px,3vw,34px) clamp(16px,4vw,64px) clamp(24px,4vw,42px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.pn-head{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--color-divider)}
.pn-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px 20px}
.pn-cols a{display:block;padding:6px 0;font-size:13.5px;line-height:1.35;color:var(--color-text);border-bottom:1px solid var(--color-divider);text-decoration:none}
.pn-cols a:hover{color:var(--color-accent)}
.pn-empty{font-size:13px;line-height:1.55;color:var(--color-neutral-600);margin:0}
.pn-pages{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.pn-group{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-600);margin-bottom:7px}
.pn-pages a{display:block;padding:5px 0;font-size:14px;line-height:1.3;color:var(--color-text);text-decoration:none}
.pn-pages a:hover{color:var(--color-accent)}
.pn-pages a[aria-current=page]{color:var(--color-accent);font-family:var(--font-heading);font-weight:800}
.pn-home{color:var(--color-accent)!important}
.pn-home:hover{text-decoration:underline!important}
@media (max-width:900px){.pn-in{grid-template-columns:1fr;gap:26px}.pn-cols,.pn-pages{grid-template-columns:1fr}}

/* ── pagina 404 ───────────────────────────────────────────────────────── */
.nf{max-width:1280px;width:100%;box-sizing:border-box;margin:0 auto;padding:clamp(60px,10vw,140px) clamp(18px,4vw,64px)}
.nf-etichetta{font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:24px}
.nf-titolo{font-size:clamp(38px,8vw,96px);line-height:.92;letter-spacing:-.038em;margin:0 0 24px;max-width:13ch}
.nf-testo{font-size:clamp(16px,2.2vw,20px);line-height:1.5;margin:0 0 32px;max-width:60ch}
.nf-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-bg);background:var(--color-text);padding:11px 16px}
.nf-link:hover{background:var(--color-accent);text-decoration:none}

/* ── glossario: filtro ────────────────────────────────────────────────── */
#vuoto[hidden],#toc[hidden]{display:none}
html.pg-glossario section[id^=g]{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ── stampa ───────────────────────────────────────────────────────────── */
@media print{.hdr,.pn,.pn-scrim,.skip{display:none!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* ═══════════════════════════════════════════════════════════════════════
   poster.css — il foglio di stile dei poster e della home.

   Sorgente: si modifica a mano. Il build (tools/build.mjs) lo accoda al
   design system in project/_ds/…/styles.css e ne fa assets/site.<hash>.css.

   Ordine: base · ruoli · utilità · hover · responsive.
   - I RUOLI hanno un nome e descrivono cosa è l'elemento (stadio, etichetta,
     analogia…). Per un elemento nuovo si parte da qui.
   - Le UTILITÀ fanno una cosa sola (mb-6 = margin-bottom: 6px). Servono per i
     margini e per le combinazioni rare che non meritano un nome.
   - La pagina ha sul contenitore esterno la classe .poster o .home: le regole
     responsive valgono solo dentro quella.
   ═════════════════════════════════════════════════════════════════════ */

/* ── base ─────────────────────────────────────────────────────────────── */
/* Tutto dentro :where(), cioè a specificità zero: qualunque classe vince.
   È la precedenza che avevano gli stili in linea da cui questo file deriva. */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); overflow-x: clip; }
:where(a) { color: var(--color-accent); text-decoration: none; }
:where(a:hover) { color: var(--color-accent-700); }
:where(.poster a:hover) { text-decoration: underline; }
:where(:root:has(.poster) *) { scroll-margin-top: 72px; }  /* tutta la pagina: anche <main>, meta del «vai al contenuto» */
:where(img, svg), :where(.poster table) { max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── ruoli ────────────────────────────────────────────────────────────── */
.etichetta { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.didascalia-accento { font-size: 11px; color: var(--color-accent); }
.voce { display: grid; grid-template-columns: 250px minmax(0, 1fr); border-bottom: 1px solid var(--color-divider); }
.voce-termine { padding: 11px 16px; border-right: 1px solid var(--color-divider); }
.voce-nome { font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 1.25; }
.voce-definizione { padding: 11px 16px; font-size: 13.5px; line-height: 1.55; }
.testo-s { font-size: 13px; line-height: 1.55; }
.etichetta-neutra { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-600); }
.cella { padding: 10px 14px; font-size: 13px; }
.testo-s-compatto { font-size: 13px; line-height: 1.5; }
.indice-numero { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--color-accent); }
.indice-titolo { font-size: 13px; }
.riquadro { background: var(--color-surface); border-top: 2px solid var(--color-accent); padding: 18px 20px; }
.stadio-numero { font-family: var(--font-heading); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -0.04em; color: var(--color-accent); }
.stadio-titolo { font-size: 34px; letter-spacing: -0.02em; }
.indice-voce { background: var(--color-bg); padding: 12px 14px; color: var(--color-text); }
.stadio { display: grid; grid-template-columns: 92px 1fr 320px; gap: 40px; align-items: start; padding: 52px 0; border-top: 2px solid var(--color-divider); }
.stadio-testo { font-size: 16px; line-height: 1.6; max-width: 60ch; }
.didascalia { font-size: 11px; color: var(--color-neutral-600); }
.scheda { background: var(--color-bg); padding: 15px 17px; }
.scheda-titolo { font-size: 16px; }
.testo-m { font-size: 14px; line-height: 1.55; }
.analogia { background: var(--color-surface); padding: 16px 20px; }
.colonna { background: var(--color-bg); padding: 16px 18px; }
.nota { font-size: 12px; line-height: 1.5; color: var(--color-neutral-700); }
.cella-stretta { padding: 10px 12px; font-size: 13px; }
.cella-bordo { padding: 10px 14px; border-right: 1px solid var(--color-divider); font-size: 13px; }
.cornice { border: 2px solid var(--color-text); }
.nota-grigia { font-size: 12px; color: var(--color-neutral-700); }
.doppia-colonna { border-top: 1px solid var(--color-divider); padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cifra { font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 1; }
.cifra-etichetta { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600); }
.a-destra { text-align: right; }
.enfasi { font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.separatore { border-top: 1px solid var(--color-divider); padding-top: 18px; }
.tessere-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.testo-s-largo { font-size: 13px; line-height: 1.55; max-width: 78ch; }
.testo-s-arioso { font-size: 13px; line-height: 1.6; }
.freccia { display: grid; place-items: center; color: var(--color-accent); }
.barra { height: 30px; background: var(--color-accent); }
.cella-compatta { padding: 10px 13px; font-size: 13px; }
.intestazione-tabella { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); }
.navigazione-etichetta { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.navigazione-titolo { font-family: var(--font-heading); font-weight: 800; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.2; letter-spacing: -0.02em; }
.scheda-titolo-grande { font-size: 17px; }
.codice { font-family: ui-monospace, monospace; font-size: 12px; }

/* ── utilità ──────────────────────────────────────────────────────────── */
/* background */
.bg-accent { background: var(--color-accent); }
.bg-accent-100 { background: var(--color-accent-100); }
.bg-accent-300 { background: var(--color-accent-300); }
.bg-accent-400 { background: var(--color-accent-400); }
.bg-bg { background: var(--color-bg); }
.bg-divider { background: var(--color-divider); }
.bg-neutral-200 { background: var(--color-neutral-200); }
.bg-neutral-300 { background: var(--color-neutral-300); }
.bg-neutral-400 { background: var(--color-neutral-400); }
.bg-repeating-linear-gradient-90deg-accent-0-6-accent-300-6-12 { background: repeating-linear-gradient(90deg, var(--color-accent) 0 6px, var(--color-accent-300) 6px 12px); }
.bg-repeating-linear-gradient-90deg-neutral-300-0-4-transparent-4-8 { background: repeating-linear-gradient(90deg, var(--color-neutral-300) 0 4px, transparent 4px 8px); }
.bg-repeating-linear-gradient-90deg-neutral-400-0-5-transparent-5-10 { background: repeating-linear-gradient(90deg, var(--color-neutral-400) 0 5px, transparent 5px 10px); }
.bg-surface { background: var(--color-surface); }
.bg-text { background: var(--color-text); }
/* border */
.b-0 { border: 0; }
.b-1-solid-divider { border: 1px solid var(--color-divider); }
.b-1-solid-text { border: 1px solid var(--color-text); }
.b-2-solid-accent { border: 2px solid var(--color-accent); }
.b-2-solid-divider { border: 2px solid var(--color-divider); }
.b-2-solid-text { border: 2px solid var(--color-text); }
/* flex */
.flex-0-0-auto { flex: 0 0 auto; }
.flex-1 { flex: 1; }
.flex-1-1-300 { flex: 1 1 300px; }
/* gap */
.gap-0 { gap: 0; }
.gap-10-14 { gap: 10px 14px; }
.gap-12 { gap: 12px; }
.gap-14-24 { gap: 14px 24px; }
.gap-14-28 { gap: 14px 28px; }
.gap-16 { gap: 16px; }
.gap-18 { gap: 18px; }
.gap-2 { gap: 2px; }
.gap-24 { gap: 24px; }
.gap-26 { gap: 26px; }
.gap-28 { gap: 28px; }
.gap-3 { gap: 3px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-5 { gap: 5px; }
.gap-6 { gap: 6px; }
.gap-6-10 { gap: 6px 10px; }
.gap-7-10 { gap: 7px 10px; }
.gap-7-12 { gap: 7px 12px; }
.gap-8 { gap: 8px; }
.gap-8-12 { gap: 8px 12px; }
.gap-clamp-24-4vw-48 { gap: clamp(24px, 4vw, 48px); }
/* margin */
.m-0 { margin: 0; }
.m-0-0-10 { margin: 0 0 10px; }
.m-0-0-12 { margin: 0 0 12px; }
.m-0-0-14 { margin: 0 0 14px; }
.m-0-0-20 { margin: 0 0 20px; }
.m-0-0-22 { margin: 0 0 22px; }
.m-0-0-24 { margin: 0 0 24px; }
.m-0-0-28 { margin: 0 0 28px; }
.m-0-0-6 { margin: 0 0 6px; }
.m-0-0-8 { margin: 0 0 8px; }
.m-0-0-clamp-22-3vw-34 { margin: 0 0 clamp(22px, 3vw, 34px); }
.m-0-120-0-60 { margin: 0 120px 0 60px; }
.m-0-60 { margin: 0 60px; }
.m-0-90-0-60 { margin: 0 90px 0 60px; }
.m-0-auto { margin: 0 auto; }
.m-10-0-0 { margin: 10px 0 0; }
.m-12-0-0 { margin: 12px 0 0; }
.m-14-0-0 { margin: 14px 0 0; }
.m-24-0-0 { margin: 24px 0 0; }
.m-8-0-0 { margin: 8px 0 0; }
.m-clamp-16-3vw-26-0-0 { margin: clamp(16px, 3vw, 26px) 0 0; }
/* padding */
.p-0-0-0-0 { padding: 0 0 0 0; }
.p-0-64 { padding: 0 64px; }
.p-0-64-0 { padding: 0 64px 0; }
.p-0-clamp-18-4vw-64 { padding: 0 clamp(18px, 4vw, 64px); }
.p-10-12 { padding: 10px 12px; }
.p-10-13 { padding: 10px 13px; }
.p-10-14 { padding: 10px 14px; }
.p-11-12 { padding: 11px 12px; }
.p-11-13 { padding: 11px 13px; }
.p-11-14 { padding: 11px 14px; }
.p-11-16 { padding: 11px 16px; }
.p-12-14 { padding: 12px 14px; }
.p-12-16 { padding: 12px 16px; }
.p-13-15 { padding: 13px 15px; }
.p-14-16 { padding: 14px 16px; }
.p-16-18 { padding: 16px 18px; }
.p-18-0-0 { padding: 18px 0 0; }
.p-18-20 { padding: 18px 20px; }
.p-18-22 { padding: 18px 22px; }
.p-20-22 { padding: 20px 22px; }
.p-20-24 { padding: 20px 24px; }
.p-22-24 { padding: 22px 24px; }
.p-28-64-64 { padding: 28px 64px 64px; }
.p-28-clamp-18-4vw-64-64 { padding: 28px clamp(18px, 4vw, 64px) 64px; }
.p-48-0-0 { padding: 48px 0 0; }
.p-5-9 { padding: 5px 9px; }
.p-52-0 { padding: 52px 0; }
.p-64-0-40 { padding: 64px 0 40px; }
.p-7-11 { padding: 7px 11px; }
.p-72-64 { padding: 72px 64px; }
.p-8-14 { padding: 8px 14px; }
.p-8-16 { padding: 8px 16px; }
.p-9-12 { padding: 9px 12px; }
.p-9-13 { padding: 9px 13px; }
.p-9-14 { padding: 9px 14px; }
.p-clamp-20-2_4vw-26 { padding: clamp(20px, 2.4vw, 26px); }
.p-clamp-34-5vw-54-0-0 { padding: clamp(34px, 5vw, 54px) 0 0; }
.p-clamp-34-5vw-54-0-clamp-20-3vw-34 { padding: clamp(34px, 5vw, 54px) 0 clamp(20px, 3vw, 34px); }
.p-clamp-40-6vw-76-clamp-18-4vw-64 { padding: clamp(40px, 6vw, 76px) clamp(18px, 4vw, 64px); }
.p-clamp-40-7vw-76-0-clamp-30-4vw-48 { padding: clamp(40px, 7vw, 76px) 0 clamp(30px, 4vw, 48px); }
/* align-items */
.ai-baseline { align-items: baseline; }
.ai-center { align-items: center; }
.ai-flex-start { align-items: flex-start; }
.ai-start { align-items: start; }
.ai-stretch { align-items: stretch; }
/* border-bottom */
.bb-1-solid-divider { border-bottom: 1px solid var(--color-divider); }
/* border-left */
.bl-2-solid-accent { border-left: 2px solid var(--color-accent); }
/* border-right */
.br-1-solid-divider { border-right: 1px solid var(--color-divider); }
.br-1-solid-text { border-right: 1px solid var(--color-text); }
/* border-top */
.bt-0 { border-top: 0; }
.bt-1-solid-divider { border-top: 1px solid var(--color-divider); }
.bt-2-solid-accent { border-top: 2px solid var(--color-accent); }
.bt-2-solid-divider { border-top: 2px solid var(--color-divider); }
.bt-2-solid-text { border-top: 2px solid var(--color-text); }
/* box-sizing */
.bs-border-box { box-sizing: border-box; }
/* color */
.c-accent { color: var(--color-accent); }
.c-accent-700 { color: var(--color-accent-700); }
.c-bg { color: var(--color-bg); }
.c-neutral-500 { color: var(--color-neutral-500); }
.c-neutral-600 { color: var(--color-neutral-600); }
.c-neutral-700 { color: var(--color-neutral-700); }
.c-text { color: var(--color-text); }
/* cursor */
.cursor-pointer { cursor: pointer; }
/* display */
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline-flex { display: inline-flex; }
.d-inline-grid { display: inline-grid; }
/* flex-direction */
.dir-column { flex-direction: column; }
/* flex-wrap */
.wrap-wrap { flex-wrap: wrap; }
/* font-family */
.ff-body { font-family: var(--font-body); }
.ff-heading { font-family: var(--font-heading); }
.ff-ui-monospace-SFMono-Regular-Menlo-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ff-ui-monospace-monospace { font-family: ui-monospace, monospace; }
/* font-size */
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-12_5 { font-size: 12.5px; }
.fs-13 { font-size: 13px; }
.fs-13_5 { font-size: 13.5px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-19 { font-size: 19px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-26 { font-size: 26px; }
.fs-32 { font-size: 32px; }
.fs-34 { font-size: 34px; }
.fs-40 { font-size: 40px; }
.fs-46 { font-size: 46px; }
.fs-74 { font-size: 74px; }
.fs-78 { font-size: 78px; }
.fs-clamp-15-2vw-18 { font-size: clamp(15px, 2vw, 18px); }
.fs-clamp-16-2_2vw-20 { font-size: clamp(16px, 2.2vw, 20px); }
.fs-clamp-19-2_4vw-23 { font-size: clamp(19px, 2.4vw, 23px); }
.fs-clamp-22-3vw-30 { font-size: clamp(22px, 3vw, 30px); }
.fs-clamp-24-3_4vw-34 { font-size: clamp(24px, 3.4vw, 34px); }
.fs-clamp-26-5vw-48 { font-size: clamp(26px, 5vw, 48px); }
.fs-clamp-38-8vw-96 { font-size: clamp(38px, 8vw, 96px); }
/* font-weight */
.fw-800 { font-weight: 800; }
/* grid-template-columns */
.cols-116-1fr-116-1fr { grid-template-columns: 116px 1fr 116px 1fr; }
.cols-116-1fr-132-152 { grid-template-columns: 116px 1fr 132px 152px; }
.cols-118-1fr { grid-template-columns: 118px 1fr; }
.cols-120-1fr-1fr-1fr { grid-template-columns: 120px 1fr 1fr 1fr; }
.cols-132-1fr { grid-template-columns: 132px 1fr; }
.cols-132-1fr-92 { grid-template-columns: 132px 1fr 92px; }
.cols-140-1fr-108 { grid-template-columns: 140px 1fr 108px; }
.cols-150-1fr { grid-template-columns: 150px 1fr; }
.cols-152-mm { grid-template-columns: 152px minmax(0, 1fr); }
.cols-158-1fr { grid-template-columns: 158px 1fr; }
.cols-158-1fr-96 { grid-template-columns: 158px 1fr 96px; }
.cols-168-1fr-148-132 { grid-template-columns: 168px 1fr 148px 132px; }
.cols-176-1fr { grid-template-columns: 176px 1fr; }
.cols-176-1fr-60 { grid-template-columns: 176px 1fr 60px; }
.cols-176-mm-190 { grid-template-columns: 176px minmax(0, 1fr) 190px; }
.cols-1fr-1fr { grid-template-columns: 1fr 1fr; }
.cols-1fr-1fr-1fr { grid-template-columns: 1fr 1fr 1fr; }
.cols-1fr-1fr-1fr-1fr { grid-template-columns: 1fr 1fr 1fr 1fr; }
.cols-1fr-22-1fr-22-1fr { grid-template-columns: 1fr 22px 1fr 22px 1fr; }
.cols-1fr-22-1fr-22-1fr-22-1fr { grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; }
.cols-1fr-24-1fr-24-1fr { grid-template-columns: 1fr 24px 1fr 24px 1fr; }
.cols-1fr-24-1fr-24-1fr-24-1fr { grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr; }
.cols-1fr-28-1fr-28-1fr { grid-template-columns: 1fr 28px 1fr 28px 1fr; }
.cols-1fr-320 { grid-template-columns: 1fr 320px; }
.cols-1fr-340 { grid-template-columns: 1fr 340px; }
.cols-1fr-40-1fr { grid-template-columns: 1fr 40px 1fr; }
.cols-200-1fr-44 { grid-template-columns: 200px 1fr 44px; }
.cols-210-1fr-150 { grid-template-columns: 210px 1fr 150px; }
.cols-210-1fr-152-132 { grid-template-columns: 210px 1fr 152px 132px; }
.cols-210-mm { grid-template-columns: 210px minmax(0, 1fr); }
.cols-224-1fr { grid-template-columns: 224px 1fr; }
.cols-232-1fr-108-62 { grid-template-columns: 232px 1fr 108px 62px; }
.cols-236-1fr-148 { grid-template-columns: 236px 1fr 148px; }
.cols-236-mm { grid-template-columns: 236px minmax(0, 1fr); }
.cols-236-mm-150 { grid-template-columns: 236px minmax(0, 1fr) 150px; }
.cols-244-1fr-96 { grid-template-columns: 244px 1fr 96px; }
.cols-268-1fr-128 { grid-template-columns: 268px 1fr 128px; }
.cols-268-1fr-148 { grid-template-columns: 268px 1fr 148px; }
.cols-268-mm { grid-template-columns: 268px minmax(0, 1fr); }
.cols-268-mm-118 { grid-template-columns: 268px minmax(0, 1fr) 118px; }
.cols-268-mm-128 { grid-template-columns: 268px minmax(0, 1fr) 128px; }
.cols-40-1fr-160-128 { grid-template-columns: 40px 1fr 160px 128px; }
.cols-40-1fr-200 { grid-template-columns: 40px 1fr 200px; }
.cols-40-1fr-260 { grid-template-columns: 40px 1fr 260px; }
.cols-40-210-1fr-116 { grid-template-columns: 40px 210px 1fr 116px; }
.cols-40-210-mm-116 { grid-template-columns: 40px 210px minmax(0, 1fr) 116px; }
.cols-40-mm-160-128 { grid-template-columns: 40px minmax(0, 1fr) 160px 128px; }
.cols-40-mm-190 { grid-template-columns: 40px minmax(0, 1fr) 190px; }
.cols-42-1fr-156 { grid-template-columns: 42px 1fr 156px; }
.cols-42-1fr-168 { grid-template-columns: 42px 1fr 168px; }
.cols-44-1fr-128 { grid-template-columns: 44px 1fr 128px; }
.cols-48-132-1fr { grid-template-columns: 48px 132px 1fr; }
.cols-56-1fr-188 { grid-template-columns: 56px 1fr 188px; }
.cols-56-mm-188 { grid-template-columns: 56px minmax(0, 1fr) 188px; }
.cols-74-1fr-40 { grid-template-columns: 74px 1fr 40px; }
.cols-76-mm-132 { grid-template-columns: 76px minmax(0, 1fr) 132px; }
.cols-90-1fr { grid-template-columns: 90px 1fr; }
.cols-92-1fr { grid-template-columns: 92px 1fr; }
.cols-92-1fr-34 { grid-template-columns: 92px 1fr 34px; }
.cols-92-1fr-44 { grid-template-columns: 92px 1fr 44px; }
.cols-96-mm { grid-template-columns: 96px minmax(0, 1fr); }
.cols-mm-184 { grid-template-columns: minmax(0, 1fr) 184px; }
.cols-mm-280 { grid-template-columns: minmax(0, 1fr) 280px; }
.cols-mm-300 { grid-template-columns: minmax(0, 1fr) 300px; }
.cols-r2 { grid-template-columns: repeat(2, 1fr); }
.cols-r3 { grid-template-columns: repeat(3, 1fr); }
.cols-r4 { grid-template-columns: repeat(4, 1fr); }
.cols-r5 { grid-template-columns: repeat(5, 1fr); }
.cols-r6 { grid-template-columns: repeat(6, 1fr); }
.cols-repeat-4-30 { grid-template-columns: repeat(4, 30px); }
/* height */
.h-14 { height: 14px; }
.h-15 { height: 15px; }
.h-16 { height: 16px; }
.h-17 { height: 17px; }
.h-2 { height: 2px; }
.h-22 { height: 22px; }
.h-24 { height: 24px; }
.h-26 { height: 26px; }
.h-30 { height: 30px; }
.h-34 { height: 34px; }
.h-auto { height: auto; }
/* justify-content */
.jc-space-between { justify-content: space-between; }
/* letter-spacing */
.ls-0_06em { letter-spacing: 0.06em; }
.ls-0_08em { letter-spacing: 0.08em; }
.ls-0_12em { letter-spacing: 0.12em; }
.ls-0_14em { letter-spacing: 0.14em; }
.ls-0_1em { letter-spacing: 0.1em; }
.ls-n0_025em { letter-spacing: -0.025em; }
.ls-n0_02em { letter-spacing: -0.02em; }
.ls-n0_035em { letter-spacing: -0.035em; }
.ls-n0_038em { letter-spacing: -0.038em; }
.ls-n0_04em { letter-spacing: -0.04em; }
/* line-height */
.lh-0_92 { line-height: 0.92; }
.lh-0_94 { line-height: 0.94; }
.lh-0_95 { line-height: 0.95; }
.lh-1 { line-height: 1; }
.lh-1_08 { line-height: 1.08; }
.lh-1_15 { line-height: 1.15; }
.lh-1_3 { line-height: 1.3; }
.lh-1_35 { line-height: 1.35; }
.lh-1_4 { line-height: 1.4; }
.lh-1_45 { line-height: 1.45; }
.lh-1_5 { line-height: 1.5; }
.lh-1_55 { line-height: 1.55; }
.lh-1_6 { line-height: 1.6; }
.lh-1_7 { line-height: 1.7; }
.lh-1_75 { line-height: 1.75; }
.lh-1_8 { line-height: 1.8; }
/* margin-bottom */
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-4 { margin-bottom: 4px; }
.mb-40 { margin-bottom: 40px; }
.mb-6 { margin-bottom: 6px; }
.mb-7 { margin-bottom: 7px; }
.mb-8 { margin-bottom: 8px; }
.mb-clamp-16-3vw-26 { margin-bottom: clamp(16px, 3vw, 26px); }
.mb-clamp-20-3vw-30 { margin-bottom: clamp(20px, 3vw, 30px); }
.mb-clamp-26-4vw-44 { margin-bottom: clamp(26px, 4vw, 44px); }
/* margin-top */
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-2 { margin-top: 2px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-3 { margin-top: 3px; }
.mt-4 { margin-top: 4px; }
.mt-48 { margin-top: 48px; }
.mt-56 { margin-top: 56px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-clamp-24-4vw-44 { margin-top: clamp(24px, 4vw, 44px); }
.mt-clamp-26-4vw-44 { margin-top: clamp(26px, 4vw, 44px); }
.mt-clamp-30-4vw-48 { margin-top: clamp(30px, 4vw, 48px); }
/* max-width */
.maxw-1280 { max-width: 1280px; }
.maxw-13ch { max-width: 13ch; }
.maxw-15ch { max-width: 15ch; }
.maxw-16ch { max-width: 16ch; }
.maxw-17ch { max-width: 17ch; }
.maxw-18ch { max-width: 18ch; }
.maxw-22ch { max-width: 22ch; }
.maxw-24ch { max-width: 24ch; }
.maxw-26ch { max-width: 26ch; }
.maxw-60ch { max-width: 60ch; }
.maxw-62ch { max-width: 62ch; }
.maxw-64ch { max-width: 64ch; }
.maxw-68ch { max-width: 68ch; }
.maxw-74ch { max-width: 74ch; }
.maxw-78ch { max-width: 78ch; }
/* min-width */
.minw-0 { min-width: 0; }
/* outline */
.outline-0 { outline: 0; }
/* overflow-wrap */
.ow-anywhere { overflow-wrap: anywhere; }
/* padding-left */
.pl-12 { padding-left: 12px; }
/* padding-top */
.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }
.pt-18 { padding-top: 18px; }
.pt-20 { padding-top: 20px; }
/* place-items */
.pi-center { place-items: center; }
/* text-align */
.ta-center { text-align: center; }
.ta-left { text-align: left; }
.ta-right { text-align: right; }
/* text-transform */
.tt-uppercase { text-transform: uppercase; }
/* white-space */
.ws-nowrap { white-space: nowrap; }
/* width */
.w-0_3pc { width: 0.3%; }
.w-0_5pc { width: 0.5%; }
.w-0_6pc { width: 0.6%; }
.w-100pc { width: 100%; }
.w-10pc { width: 10%; }
.w-12pc { width: 12%; }
.w-14pc { width: 14%; }
.w-15pc { width: 15%; }
.w-16pc { width: 16%; }
.w-18pc { width: 18%; }
.w-1_2pc { width: 1.2%; }
.w-20pc { width: 20%; }
.w-21pc { width: 21%; }
.w-22pc { width: 22%; }
.w-23_8pc { width: 23.8%; }
.w-24pc { width: 24%; }
.w-25pc { width: 25%; }
.w-26pc { width: 26%; }
.w-2pc { width: 2%; }
.w-30pc { width: 30%; }
.w-36pc { width: 36%; }
.w-38pc { width: 38%; }
.w-3pc { width: 3%; }
.w-40pc { width: 40%; }
.w-42pc { width: 42%; }
.w-44pc { width: 44%; }
.w-46pc { width: 46%; }
.w-48pc { width: 48%; }
.w-5pc { width: 5%; }
.w-61pc { width: 61%; }
.w-62pc { width: 62%; }
.w-71pc { width: 71%; }
.w-72pc { width: 72%; }
.w-75pc { width: 75%; }
.w-82pc { width: 82%; }
.w-84pc { width: 84%; }
.w-8pc { width: 8%; }
.w-9_3pc { width: 9.3%; }
.w-9pc { width: 9%; }

/* ── hover ────────────────────────────────────────────────────────────── */
.hover-sfondo:hover { background: var(--color-surface); text-decoration: none; }
.hover-accento:hover { background: var(--color-accent); }
.hover-accento-link:hover { background: var(--color-accent); text-decoration: none; }
.hover-accento-scuro:hover { background: var(--color-accent-600); text-decoration: none; }

/* ── responsive ───────────────────────────────────────────────────────── */
/* Le colonne collassano sotto i 1000px con minmax(0, 1fr) e non con 1fr:
   un 1fr ha come minimo il contenuto, e una tabella larga allargherebbe la pagina. */

/* home */
@media (max-width: 1000px) {
  .home .cols-r3 { grid-template-columns: minmax(0, 1fr) !important; }
  .home .tessere-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .home .cols-1fr-340 { grid-template-columns: minmax(0, 1fr) !important; }
  .home .cols-r4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .home .cols-r4 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* poster */
@media (max-width: 1200px) {
  .poster .cols-r6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .poster .cols-r5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1000px) {
  .poster .stadio { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .poster .cols-92-1fr { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  .poster .cols-1fr-320, .poster .stadio, .poster .cols-1fr-340 { grid-template-columns: minmax(0, 1fr) !important; }
  .poster .cols-r3, .poster .cols-r4 { grid-template-columns: minmax(0, 1fr) !important; }
  .poster .cols-1fr-1fr, .poster .cols-1fr-1fr-1fr, .poster .cols-1fr-1fr-1fr-1fr, .poster .doppia-colonna, .poster .tessere-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .poster .cols-1fr-24-1fr-24-1fr, .poster .cols-1fr-24-1fr-24-1fr-24-1fr, .poster .cols-1fr-28-1fr-28-1fr, .poster .cols-1fr-40-1fr { grid-template-columns: minmax(0, 1fr) !important; }
  .poster .cols-152-mm, .poster .cols-176-mm-190, .poster .cols-210-mm, .poster .cols-236-mm, .poster .cols-236-mm-150, .poster .cols-268-mm, .poster .cols-268-mm-118, .poster .cols-268-mm-128, .poster .cols-40-210-mm-116, .poster .cols-40-mm-160-128, .poster .cols-40-mm-190, .poster .cols-56-mm-188, .poster .cols-76-mm-132, .poster .cols-96-mm, .poster .cols-mm-184, .poster .cols-mm-280, .poster .cols-mm-300, .poster .voce { grid-template-columns: minmax(0, 1fr) !important; }
  .poster .cols-152-mm > *, .poster .cols-176-mm-190 > *, .poster .cols-210-mm > *, .poster .cols-236-mm > *, .poster .cols-236-mm-150 > *, .poster .cols-268-mm > *, .poster .cols-268-mm-118 > *, .poster .cols-268-mm-128 > *, .poster .cols-40-210-mm-116 > *, .poster .cols-40-mm-160-128 > *, .poster .cols-40-mm-190 > *, .poster .cols-56-mm-188 > *, .poster .cols-76-mm-132 > *, .poster .cols-96-mm > *, .poster .cols-mm-184 > *, .poster .cols-mm-280 > *, .poster .cols-mm-300 > *, .poster .voce > * { border-right: 0 !important; overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  .poster .p-0-64, .poster .p-0-64-0 { padding-left: 18px !important; padding-right: 18px !important; }
  .poster .p-72-64 { padding: 44px 18px !important; }
  .poster .p-28-64-64 { padding: 22px 18px 48px !important; }
  .poster .cols-r6, .poster .cols-r5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .poster .cols-244-1fr-96 { grid-template-columns: 112px minmax(0, 1fr) 56px !important; }
  .poster .cols-140-1fr-108 { grid-template-columns: 96px minmax(0, 1fr) 62px !important; }
  .poster .cols-150-1fr { grid-template-columns: 82px minmax(0, 1fr) !important; }
  .poster .cols-92-1fr-44 { grid-template-columns: 72px minmax(0, 1fr) 40px !important; }
  .poster h1 { font-size: clamp(30px, 8.4vw, 78px) !important; }
}
@media (max-width: 1000px) {
  .poster h1 { font-size: clamp(32px, 6.6vw, 78px) !important; }
  .poster h2 { font-size: clamp(23px, 3.6vw, 34px) !important; }
  .poster .fs-46, .poster .stadio-numero { font-size: clamp(30px, 6vw, 46px) !important; }
  .poster .fs-40 { font-size: clamp(28px, 5.4vw, 40px) !important; }
}
@media (max-width: 480px) {
  .poster .cols-r6, .poster .cols-r5 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Griglie a colonne fisse troppo larghe per un telefono: scorrono in
   orizzontale invece di essere tagliate. Il contenitore diventa lo
   scroller, così le righe scorrono insieme e restano allineate. */
@media (max-width: 1000px) {
  .poster :has(> .cols-210-1fr-150, > .cols-200-1fr-44.gap-7-12, > .cols-168-1fr-148-132, > .cols-40-1fr-260, > .cols-232-1fr-108-62.gap-8-12, > .cols-120-1fr-1fr-1fr, > .cols-268-1fr-128, > .cols-116-1fr-116-1fr, > .cols-40-210-1fr-116, > .cols-40-1fr-160-128, > .cols-210-1fr-152-132, > .cols-116-1fr-132-152.gap-8-12, > .cols-236-1fr-148, > .cols-268-1fr-148, > .cols-132-1fr-92.gap-8-12, > .cols-158-1fr-96, > .cols-1fr-22-1fr-22-1fr-22-1fr, > .cols-176-1fr-60.gap-8-12, > .cols-1fr-22-1fr-22-1fr, > .cols-56-1fr-188) { overflow-x: auto; overscroll-behavior-x: contain; }
  .poster .cols-116-1fr-116-1fr { min-width: 432px; }
  .poster .cols-116-1fr-132-152.gap-8-12 { min-width: 536px; }
  .poster .cols-120-1fr-1fr-1fr { min-width: 420px; }
  .poster .cols-132-1fr-92.gap-8-12 { min-width: 348px; }
  .poster .cols-158-1fr-96 { min-width: 354px; }
  .poster .cols-168-1fr-148-132 { min-width: 548px; }
  .poster .cols-176-1fr-60.gap-8-12 { min-width: 360px; }
  .poster .cols-1fr-22-1fr-22-1fr { min-width: 344px; }
  .poster .cols-1fr-22-1fr-22-1fr-22-1fr { min-width: 466px; }
  .poster .cols-200-1fr-44.gap-7-12 { min-width: 368px; }
  .poster .cols-210-1fr-150 { min-width: 460px; }
  .poster .cols-210-1fr-152-132 { min-width: 594px; }
  .poster .cols-232-1fr-108-62.gap-8-12 { min-width: 538px; }
  .poster .cols-236-1fr-148 { min-width: 484px; }
  .poster .cols-268-1fr-128 { min-width: 496px; }
  .poster .cols-268-1fr-148 { min-width: 516px; }
  .poster .cols-40-1fr-160-128 { min-width: 428px; }
  .poster .cols-40-1fr-260 { min-width: 400px; }
  .poster .cols-40-210-1fr-116 { min-width: 466px; }
  .poster .cols-56-1fr-188 { min-width: 344px; }
}