/* Disposed Studio — il foglio del sito pubblico.
   Token presi da 000h by Cojeev (MIT): stessa scala di tipo, spazi a griglia di 4,
   raggi morbidi, superfici piatte. Font Special Gothic (OFL) in assets/fonts, licenza accanto. */

/* Special Gothic (Google Fonts, OFL), servito da qui: la CSP accetta solo font
   di questo sito, e cosi' nessuna visita passa da Google. Pesi 400-700, larghezza 75-125%. */
@font-face{ font-family:"Special Gothic"; src:url("fonts/SpecialGothic-VF.woff2") format("woff2"); font-weight:400 700; font-stretch:75% 125%; font-display:swap }

/* ---------- PALETTE: i colori dello studio ----------
   Quattro colori; gli altri ruoli si ricavano da questi. Contrasti misurati:
   testo 18:1, secondario 6.2:1 su bianco e 4.6:1 sul grigio, rosso 4.8:1 su
   bianco. Sul nero il rosso fa 3.8:1: va bene per focus e dettagli, non per testo piccolo.
   Tema solo chiaro: fondo bianco anche con il sistema in modalita' scura. */
:root{
  --nero:#161616; --rosso:#E50D0D; --grigio:#DBDFDA; --bianco:#FFFFFF;

  color-scheme:light;
  --bg:var(--bianco);                                       /* fondo pagina */
  --card:var(--grigio);                                     /* superfici, fondi delle foto */
  --ink:var(--nero);                                        /* testo */
  --ink-2:color-mix(in srgb, var(--nero) 68%, var(--bianco)); /* secondario, meta */
  --line:var(--grigio);                                     /* filetti */
  --accent:var(--rosso);                                    /* il dettaglio: hover, selezione */
  --on-accent:var(--bianco);
  --focus:var(--rosso);                                     /* anello del focus da tastiera */
}

/* ---------- sistema (da 000h, di solito non si tocca) ---------- */
:root{
  --font-display:"Special Gothic", ui-sans-serif, system-ui, sans-serif;
  --font-text:"Special Gothic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero:clamp(44px, 8vw, 72px); --fs-section:26px;
  --fs-title:21px; --fs-lead:17px; --fs-body:15px; --fs-control:14px; --fs-small:13px; --fs-meta:12px; --fs-caps:11px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-card:20px; --r-pill:999px;
  --ctl-sm:32px; --ctl-md:40px; --ctl-lg:48px;
  --gutter:clamp(16px, 4vw, 28px); --max:1440px;
  --t:200ms; --enter:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce){ :root{ --t:0ms } }

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font:var(--fs-body)/1.45 var(--font-text); -webkit-font-smoothing:antialiased }
a{ color:inherit; text-underline-offset:.2em; text-decoration-thickness:1px }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-sm) }
::selection{ background:var(--accent); color:var(--on-accent) }
img, video{ max-width:100%; height:auto; display:block; border-radius:var(--r-card); background:var(--card) }

h1, h2, h3{ font-family:var(--font-display); font-weight:500; letter-spacing:-.015em; margin:0 }
h1{ font-size:var(--fs-hero); line-height:.95; letter-spacing:-.03em }
h2{ font-size:var(--fs-section); line-height:1.2 }
h3{ font-size:var(--fs-title); line-height:1.2 }
.intro{ font-size:var(--fs-lead); color:var(--ink-2); max-width:56ch; margin:var(--s-4) 0 0 }
.meta, .vuoto, .briciole{ font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2) }

/* ---------- cornice ---------- */
.testa, main, .piede{ max-width:var(--max); margin:0 auto; padding-inline:var(--gutter) }
.testa{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; justify-content:space-between; padding-block:var(--s-6) }
.testa .nome{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-title); text-decoration:none; letter-spacing:-.015em }
.testa nav{ display:flex; flex-wrap:wrap; gap:var(--s-2) }
.testa nav a{ text-decoration:none; padding:var(--s-2) var(--s-4); border-radius:var(--r-pill); transition:background var(--t) var(--enter) }
.testa nav a:hover{ background:var(--card) }
main{ padding-block:var(--s-12) var(--s-16) }
.piede{ padding-block:var(--s-8); border-top:1px solid var(--line); color:var(--ink-2); font-size:var(--fs-meta) }

/* ---------- homepage ---------- */
.apertura{ padding-bottom:var(--s-16) }
section > h2{ margin-bottom:var(--s-6) }

.progetti{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-12) var(--s-6); grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)) }
.progetti a{ text-decoration:none; display:block }
.progetti img, .progetti video{ aspect-ratio:4/3; width:100%; object-fit:cover; transition:border-radius var(--t) var(--enter) }
.progetti a:hover img{ border-radius:var(--r-sm) }
.progetti h3{ margin-top:var(--s-4); text-decoration:underline 1px transparent; text-underline-offset:.2em; transition:text-decoration-color var(--t) var(--enter) }
.progetti a:hover h3{ text-decoration-color:var(--accent) }
.progetti .meta{ margin-top:var(--s-2) }
.progetti p{ margin:var(--s-2) 0 0; color:var(--ink-2) }

/* ---------- pagina di una voce ---------- */
.voce > header{ padding-bottom:var(--s-12) }
.voce .briciole{ margin:0 0 var(--s-6) }
.voce .briciole a{ text-decoration:none }
.voce .meta{ margin-top:var(--s-6) }
.voce .testo{ max-width:64ch; margin-top:var(--s-12); font-size:var(--fs-lead) }
.galleria{ display:grid; gap:var(--s-6); grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr)); margin-top:var(--s-12) }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* ---------- componenti ---------- */
.btn{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; padding:0 var(--s-6); border-radius:var(--r-pill); border:1px solid transparent; font:500 14px/1 var(--font-text); text-decoration:none; cursor:pointer; transition:background var(--t) var(--enter), color var(--t) var(--enter), border-color var(--t) var(--enter) }
.btn{ background:var(--ink); color:var(--bg) }
.btn:hover{ background:var(--accent); color:var(--on-accent) }
.btn.secondario{ background:var(--card); color:var(--ink) }
.btn.secondario:hover{ background:transparent; border-color:var(--ink) }
.btn.contorno{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn.contorno:hover{ border-color:var(--ink) }
.btn:disabled{ opacity:.4; cursor:not-allowed; background:var(--ink); color:var(--bg) }

.tag{ display:inline-block; padding:var(--s-1) var(--s-3); border-radius:var(--r-pill); background:var(--card); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase }
.tag.accento{ background:var(--accent); color:var(--on-accent) }
.btn.piccolo{ min-height:var(--ctl-sm); padding:0 var(--s-4); font-size:var(--fs-small) }
.tag.contorno{ background:transparent; box-shadow:inset 0 0 0 1px var(--ink) }

/* superfici */
.card{ background:var(--card); border-radius:var(--r-card); padding:var(--s-6) }
.card > h3{ margin-bottom:var(--s-2) }
.card > p{ margin:0; color:var(--ink-2) }
.avviso{ display:grid; gap:var(--s-1); padding:var(--s-4) var(--s-6); border-radius:var(--r-card); background:var(--card) }
.avviso > *{ margin:0 }
.avviso strong{ font-weight:600 }
.avviso.accento{ background:var(--accent); color:var(--on-accent) }
hr{ border:0; border-top:1px solid var(--line); margin:var(--s-6) 0 }
kbd{ display:inline-block; padding:2px var(--s-2); border-radius:var(--r-xs); background:var(--card); border-bottom:2px solid color-mix(in srgb, var(--ink) 25%, var(--card)); font:600 var(--fs-caps)/1.4 var(--font-text) }
.avatar{ display:inline-grid; place-items:center; width:var(--ctl-md); aspect-ratio:1; border-radius:50%; background:var(--card); font:600 var(--fs-small)/1 var(--font-text); overflow:hidden; flex:none }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:0 }
.avatar.accento{ background:var(--accent); color:var(--on-accent) }
.avatari{ display:flex }
.avatari .avatar{ box-shadow:0 0 0 2px var(--bg) }
.avatari .avatar + .avatar{ margin-left:calc(var(--s-3) * -1) }

/* moduli */
.campo{ display:grid; gap:var(--s-2); max-width:420px }
.campo > label, .campo > legend{ font-size:var(--fs-control); font-weight:600; padding:0 }
.campo .aiuto{ font-size:var(--fs-small); color:var(--ink-2); margin:0 }
fieldset.campo{ border:0; margin:0; padding:0 }
.campo input:not([type=checkbox], [type=radio], [type=range]), .campo select, .campo textarea{
  width:100%; height:var(--ctl-lg); padding:0 var(--s-5); border:0; border-radius:var(--r-pill);
  background:var(--card); color:var(--ink); font:var(--fs-body) var(--font-text);
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow var(--t) var(--enter) }
.campo textarea{ height:auto; min-height:120px; padding:var(--s-3) var(--s-5); border-radius:var(--r-card); resize:vertical }
.campo select{ appearance:none; padding-right:var(--s-12); cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position:right 26px center, right 21px center; background-size:5px 5px; background-repeat:no-repeat }
.campo :is(input, select, textarea):hover{ box-shadow:inset 0 0 0 1px var(--ink-2) }
.campo :is(input, select, textarea):focus-visible{ outline:0; box-shadow:inset 0 0 0 2px var(--focus) }
.campo [aria-invalid=true]{ box-shadow:inset 0 0 0 2px var(--accent) !important }
.campo :disabled{ opacity:.4; cursor:not-allowed }
.scelta{ display:flex; gap:var(--s-3); align-items:center; min-height:var(--ctl-sm); cursor:pointer }
input[type=checkbox], input[type=radio], input[type=range], progress{ accent-color:var(--accent) }
input[type=checkbox], input[type=radio]{ width:18px; height:18px; margin:0; flex:none; cursor:pointer }
input[type=range]{ width:100%; max-width:420px }

/* interruttore: un checkbox con role="switch" */
.interruttore{ appearance:none; position:relative; width:48px !important; height:28px !important; border-radius:var(--r-pill); background:var(--card); box-shadow:inset 0 0 0 1px var(--line); transition:background var(--t) var(--enter) }
.interruttore::after{ content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:var(--ink); transition:translate var(--t) var(--enter), background var(--t) var(--enter) }
.interruttore:checked{ background:var(--accent); box-shadow:none }
.interruttore:checked::after{ translate:20px; background:var(--on-accent) }

/* gruppo di scelte a segmenti: radio veri, dall'aspetto di pillole */
.segmenti{ display:inline-flex; width:fit-content; gap:var(--s-1); padding:var(--s-1); border-radius:var(--r-pill); background:var(--card); border:0; margin:0 }
.segmenti label{ position:relative; display:inline-flex; align-items:center; height:var(--ctl-sm); padding:0 var(--s-4); border-radius:var(--r-pill); font-size:var(--fs-small); font-weight:500; cursor:pointer; transition:background var(--t) var(--enter), color var(--t) var(--enter) }
.segmenti input{ position:absolute; opacity:0; inset:0; width:100%; height:100% }
.segmenti label:has(:checked){ background:var(--ink); color:var(--bg) }
.segmenti label:has(:focus-visible){ outline:2px solid var(--focus); outline-offset:2px }

/* stato */
progress{ appearance:none; width:100%; max-width:420px; height:8px; border:0; border-radius:var(--r-pill); background:var(--card); overflow:hidden }
progress::-webkit-progress-bar{ background:var(--card) }
progress::-webkit-progress-value{ background:var(--accent); border-radius:var(--r-pill) }
progress::-moz-progress-bar{ background:var(--accent); border-radius:var(--r-pill) }
.scheletro{ border-radius:var(--r-sm); min-height:1em; background:linear-gradient(90deg, var(--card) 30%, color-mix(in srgb, var(--card) 50%, var(--bg)) 50%, var(--card) 70%) 0 0 / 300% 100%; animation:luccica 1.4s linear infinite }
@keyframes luccica{ to{ background-position:-150% 0 } }
.rotella{ display:inline-block; width:var(--icon, 20px); aspect-ratio:1; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:gira .8s linear infinite }
@keyframes gira{ to{ rotate:1turn } }

/* fisarmonica: <details>; con lo stesso name si apre uno alla volta */
.fisarmonica{ border-bottom:1px solid var(--line); max-width:64ch }
.fisarmonica summary{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); padding-block:var(--s-4); font:500 var(--fs-title)/1.2 var(--font-display); cursor:pointer; list-style:none }
.fisarmonica summary::-webkit-details-marker{ display:none }
.fisarmonica summary::after{ content:""; width:24px; height:24px; flex:none; background:currentColor; mask:url(icone/plus.svg) center / contain no-repeat; transition:rotate var(--t) var(--enter) }
.fisarmonica[open] summary::after{ rotate:45deg; color:var(--accent) }
.fisarmonica > :not(summary){ margin:0 0 var(--s-4); color:var(--ink-2) }

/* schede */
.schede [role=tablist]{ display:flex; gap:var(--s-6); border-bottom:1px solid var(--line) }
.schede [role=tab]{ padding:var(--s-3) 0; border:0; background:none; color:var(--ink-2); font:500 var(--fs-control) var(--font-text); cursor:pointer; box-shadow:inset 0 -2px transparent; transition:color var(--t) var(--enter), box-shadow var(--t) var(--enter) }
.schede [role=tab]:hover{ color:var(--ink) }
.schede [role=tab][aria-selected=true]{ color:var(--ink); box-shadow:inset 0 -2px var(--accent) }
.schede [role=tabpanel]{ padding-top:var(--s-4) }

/* finestre: <dialog> e popover nativi */
dialog{ border:0; padding:var(--s-8); border-radius:var(--r-card); background:var(--bg); color:var(--ink); max-width:min(480px, calc(100% - 2 * var(--gutter))); box-shadow:0 24px 64px rgb(0 0 0 / .2) }
dialog::backdrop{ background:color-mix(in srgb, var(--nero) 50%, transparent) }
dialog h2{ margin-bottom:var(--s-3) }
dialog p{ color:var(--ink-2) }
.azioni{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-6) }
[popover]{ border:0; padding:var(--s-2); border-radius:var(--r-md); background:var(--bg); color:var(--ink); box-shadow:0 0 0 1px var(--line), 0 12px 32px rgb(0 0 0 / .12) }
/* accanto al bottone dove c'e' anchor positioning, al centro dove no */
.menu-tendina{ min-width:200px }
@supports (position-area:bottom){ .menu-tendina{ position-area:bottom span-right; margin:var(--s-2) 0 0 } }
.menu-tendina a{ display:block; padding:var(--s-2) var(--s-3); border-radius:var(--r-sm); text-decoration:none }
.menu-tendina a:hover{ background:var(--card) }
.notifica{ margin:0; inset:auto var(--gutter) var(--gutter) auto; padding:var(--s-4) var(--s-6); background:var(--ink); color:var(--bg); box-shadow:none; border-radius:var(--r-card) }

/* suggerimento: data-tip="testo" su qualunque elemento */
[data-tip]{ position:relative }
[data-tip]::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + var(--s-2)); left:50%; translate:-50% 4px; padding:var(--s-1) var(--s-3); border-radius:var(--r-sm); background:var(--ink); color:var(--bg); font:500 var(--fs-small)/1.4 var(--font-text); white-space:nowrap; letter-spacing:0; text-transform:none; pointer-events:none; opacity:0; transition:opacity var(--t) var(--enter), translate var(--t) var(--enter); z-index:1 }
[data-tip]:is(:hover, :focus-visible)::after{ opacity:1; translate:-50% 0 }

/* tabella e pagine */
.tabella{ width:100%; border-collapse:collapse; font-size:var(--fs-body) }
.tabella th{ text-align:left; font-size:var(--fs-meta); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2) }
.tabella :is(th, td){ padding:var(--s-3) var(--s-4) var(--s-3) 0; border-bottom:1px solid var(--line) }
.tabella tbody tr:hover{ background:color-mix(in srgb, var(--card) 40%, transparent) }
.paginazione{ display:flex; flex-wrap:wrap; gap:var(--s-1); list-style:none; margin:0; padding:0 }
.paginazione a{ display:grid; place-items:center; min-width:var(--ctl-md); height:var(--ctl-md); padding:0 var(--s-3); border-radius:var(--r-pill); text-decoration:none; font-size:var(--fs-control); transition:background var(--t) var(--enter) }
.paginazione a:hover{ background:var(--card) }
.paginazione [aria-current]{ background:var(--ink); color:var(--bg) }

/* ---------- grafici (disegnati da assets/site.js) ----------
   Un solo colore vivo: s0 e' la serie che conta, in rosso; s1 il confronto, in grigio. */
.grafico{ margin:0 }
.grafico figcaption{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); align-items:baseline; justify-content:space-between; margin-bottom:var(--s-4) }
.legenda{ display:flex; flex-wrap:wrap; gap:var(--s-4); list-style:none; margin:0; padding:0; font-size:var(--fs-small); color:var(--ink-2) }
.legenda li{ display:flex; align-items:center; gap:var(--s-2) }
.blocco, .linea{ display:inline-block; flex:none; background:currentColor }
.blocco{ width:10px; height:10px; border-radius:2px }
.linea{ width:14px; height:2px; border-radius:1px }
.s0{ color:var(--accent) }
.s1{ color:var(--ink-2) }
.grafico-area{ position:relative; min-height:260px }
.grafico-area[data-grafico=scintilla]{ min-height:40px }
.grafico-area svg{ display:block; overflow:visible; font:var(--fs-meta) var(--font-text) }
.grafico-area .griglia{ stroke:var(--line); stroke-width:1 }
.grafico-area .asse{ fill:var(--ink-2); font-variant-numeric:tabular-nums }
.grafico-area .valore{ fill:var(--ink); font-weight:500 }
.grafico-area .riempi{ fill:currentColor; transition:opacity var(--t) var(--enter) }
.grafico-area .tratto{ fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.grafico-area .velo{ fill:currentColor; opacity:.1; stroke:none }
.grafico-area .punto{ fill:currentColor; stroke:var(--bg); stroke-width:2 }
.grafico-area .colpo{ fill:transparent; outline:none }
.grafico-area .barra{ outline:none }
.grafico-area .barra:is(:hover, :focus-visible) .riempi{ opacity:.75 }
.grafico-area .barra:focus-visible .colpo, .grafico-area .colpo:focus-visible{ stroke:var(--focus); stroke-width:2 }
.grafico-area .mirino line{ stroke:var(--ink-2); stroke-width:1 }
.grafico-tip{ position:absolute; top:0; translate:-50% calc(-100% - var(--s-2)); padding:var(--s-2) var(--s-3); border-radius:var(--r-sm); background:var(--bg); box-shadow:0 0 0 1px var(--line), 0 8px 24px rgb(0 0 0 / .12); font-size:var(--fs-small); color:var(--ink-2); white-space:nowrap; pointer-events:none; z-index:1 }
.grafico-tip p{ display:flex; align-items:center; gap:var(--s-2); margin:0 }
.grafico-tip p:first-child{ color:var(--ink-2); margin-bottom:var(--s-1) }
.grafico-tip strong{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums }
.grafico-dati{ margin-top:var(--s-4) }
.grafico-dati summary{ cursor:pointer; font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2) }
.grafico-dati table{ margin-top:var(--s-3) }

/* la cifra con la sua storia */
.cifra{ display:grid; gap:var(--s-2); background:var(--card); border-radius:var(--r-card); padding:var(--s-6) }
.cifra > *{ margin:0 }
.cifra .valore-grande{ font:600 48px/1 var(--font-text); letter-spacing:-.02em }
.cifra .delta{ font-size:var(--fs-small); color:var(--ink-2) }
.cifra .grafico-area .punto{ stroke:var(--card) }

/* anello: un valore su cento, solo CSS. style="--v:64" */
.anello{ display:grid; place-items:center; width:160px; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--accent) calc(var(--v) * 1%), var(--card) 0); mask:radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px)) }
.anello-box{ position:relative; display:inline-grid; place-items:center }
.anello-box > :not(.anello){ position:absolute; text-align:center }
.anello-box strong{ display:block; font:600 32px/1 var(--font-text) }

/* ---------- calendario (assets/site.js) ---------- */
.calendario{ width:fit-content }
.cal-testa{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-3) }
.cal-testa h3{ font-size:var(--fs-lead); text-transform:capitalize }
.cal-testa .btn{ width:var(--ctl-sm); padding:0; justify-content:center }
.calendario table{ border-collapse:collapse }
.calendario th{ height:var(--ctl-sm); font-size:var(--fs-meta); font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2) }
.calendario td{ padding:2px }
.calendario td button{ width:var(--ctl-md); height:var(--ctl-md); border:0; border-radius:50%; background:none; color:var(--ink); font:var(--fs-control) var(--font-text); font-variant-numeric:tabular-nums; cursor:pointer; transition:background var(--t) var(--enter) }
.calendario td button:hover{ background:var(--card) }
.calendario [aria-current=date]{ box-shadow:inset 0 0 0 1px var(--accent); font-weight:600 }
.calendario [aria-pressed=true]{ background:var(--ink) !important; color:var(--bg); box-shadow:none }
[popover] .calendario{ padding:var(--s-2) }

/* ---------- effetti (il movimento lo fa assets/site.js) ---------- */
.scorrevole{ overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.scorrevole > div{ display:flex; gap:var(--s-12); width:max-content; animation:scorri 30s linear infinite; font:500 var(--fs-section)/1.2 var(--font-display) }
.scorrevole:hover > div{ animation-play-state:paused }
@keyframes scorri{ to{ translate:calc(-50% - var(--s-12) / 2) } }
/* senza script resta tutto visibile */
@media (scripting: enabled){ [data-rivela]:not(.visto){ opacity:0; translate:0 24px } }
[data-rivela]{ transition:opacity 600ms var(--enter), translate 600ms var(--enter) }
[data-parole] .parola{ display:inline-block; opacity:0; translate:0 .4em; transition:opacity 500ms var(--enter), translate 500ms var(--enter); transition-delay:calc(var(--i) * 60ms) }
[data-parole].visto .parola{ opacity:1; translate:none }
.numero{ font:500 var(--fs-hero)/1 var(--font-display); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
@media (prefers-reduced-motion: reduce){
  .scorrevole > div, .scheletro, .rotella{ animation-duration:0s; animation-iteration-count:1 }
  [data-rivela], [data-parole] .parola{ transition:none }
}

/* icone: Lucide (ISC, assets/icone/LICENSE), una per file, disegnate col colore del testo.
   <span class="i i-x" aria-hidden="true"></span> — serve un'icona nuova? si copia il suo svg in assets/icone/ e una riga qui */
.i{ display:inline-block; width:1em; height:1em; vertical-align:-.14em; background:currentColor; mask:var(--i) center / contain no-repeat }
.i-x{ --i:url(icone/x.svg) } .i-check{ --i:url(icone/check.svg) } .i-plus{ --i:url(icone/plus.svg) }
.i-arrow-up-right{ --i:url(icone/arrow-up-right.svg) } .i-arrow-left{ --i:url(icone/arrow-left.svg) } .i-arrow-right{ --i:url(icone/arrow-right.svg) }
.i-arrow-up{ --i:url(icone/arrow-up.svg) } .i-arrow-down{ --i:url(icone/arrow-down.svg) }