/* ============ TEDx — skin "rinnovo 2026" · token (sovrascrive tokens.css) ============
   Tech editoriale di impianto svizzero: nero, bianco, rosso TEDx; Archivo variabile (asse larghezza);
   angoli vivi, filetti, niente vetro né ombre. Stessi nomi di variabile del tema: lo skin è solo CSS. */
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('../fonts/Archivo-variable-latin.woff2') format('woff2')}

:root{
  /* palette */
  --black:#000; --white:#fff; --carbon:#111; --carbon-2:#1A1A1A;
  /* UN SOLO ROSSO in tutto il sito. Prova del 2026-10-17: rosso ufficiale TEDx ovunque.
     Alternative già pronte: superfici in rosso C -> --red-deep:#A11D16 ; tutto in C -> --red:#A11D16 */
  --red:#E62B1E;                       /* marchio, accenti, bottoni, tag */
  --red-deep:#C4251A;                  /* superfici grandi: lo stesso rosso ufficiale all'85% su nero (meno abbagliante) */
  --red-shade:#6E120C;                 /* solo per le X scure del campo di X sulle superfici rosse */
  --red-ink:#2A0705;
  --salmon:var(--white); --orange:var(--red); --orange-badge:rgba(230,43,30,.15);
  --text:#B4B4B4; --text-soft:#D0D0D0; --text-bright:#E8E8E8; --text-dim:#6E6E6E;
  --surface:transparent; --surface-soft:var(--carbon);
  --chip:transparent; --chip-strong:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.3);
  --cut:16px;                          /* taglio a 45° (citazione della X) */
  --font-sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* raggi e ombre: aboliti */
  --r-card:0; --r-pill:0; --r-chip:0;
  --shadow-sheen:none; --shadow-glow:none;
  /* spazi: più aria */
  --s-1:8px; --s-2:24px; --s-3:48px; --s-4:clamp(88px,10vw,144px);
  --gutter:clamp(20px,4vw,56px);
  --container:1360px;
  /* tipografia */
  --font-sans:'Archivo',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:var(--font-sans); --font-serif:var(--font-sans);
  --fs-display:clamp(64px,6vw + 28px,164px);
  --fs-h1:clamp(52px,5vw + 20px,124px);
  --fs-h2:clamp(36px,2.8vw + 16px,72px);
  --fs-h4:clamp(19px,.4vw + 16px,24px);
  --fs-h5:clamp(17px,.2vw + 16px,19px);
  --fs-counter:clamp(48px,3vw + 24px,88px);
  --fs-body:17px; --fs-btn:13px; --fs-micro:12px;
  --ls-tight:-.03em;
  --dur:.25s; --ease:cubic-bezier(.2,.7,.2,1);
  /* grana da stampa (SVG inline, usata da hero, blocchi rossi, footer) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font:400 var(--fs-body)/1.6 var(--font-sans);overflow-x:clip;-webkit-font-smoothing:antialiased;counter-reset:sez}
img{max-width:100%;height:auto;display:block}
a{color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--dur) var(--ease),color var(--dur) var(--ease)}
a:hover{text-decoration-color:var(--red)}
button{font:inherit}
h1,h2,h3,h4,h5,h6{color:var(--white);text-transform:uppercase;letter-spacing:var(--ls-tight);line-height:.95;font-weight:700}
h1{font-size:var(--fs-h1);font-stretch:112%;letter-spacing:-.04em}
h2{font-size:var(--fs-h2);font-stretch:106%;letter-spacing:-.035em}
h4{font-size:var(--fs-h4);font-weight:600;text-transform:none;letter-spacing:-.01em;line-height:1.15}
h5{font-size:var(--fs-h5);font-weight:600;text-transform:none;letter-spacing:-.01em;line-height:1.2}
h6{font-size:12px;font-weight:500;font-stretch:85%;letter-spacing:.14em;line-height:1}
.display{font-size:var(--fs-display);font-weight:700;font-stretch:112%;line-height:.86;letter-spacing:-.045em}
.mono{font-stretch:85%;letter-spacing:.1em;text-transform:uppercase}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s-4)}