/* ============ TEDxBari — design tokens (da harvest/design-tokens.json) ============ */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../fonts/Inter-400-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('../fonts/Inter-500-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../fonts/Inter-600-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('../fonts/Inter-700-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url('../fonts/JetBrainsMono-400-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url('../fonts/JetBrainsMono-700-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-weight:400;font-display:swap;src:url('../fonts/InstrumentSerif-400-latin.woff2') format('woff2')}

:root{
  /* palette */
  --black:#000; --white:#fff;
  --red:#E40A2B; --salmon:#FF9E77;
  --orange:#F3500F; --orange-badge:rgba(243,80,15,.15);
  --text:#AEAEAE; --text-soft:#C9C9C9; --text-bright:#D2D2D2; --text-dim:#4B4B4B;
  --surface:rgba(255,255,255,.03); --surface-soft:rgba(255,255,255,.05);
  --chip:rgba(255,255,255,.12); --chip-strong:rgba(255,255,255,.16);
  /* radius */
  --font-sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --r-card:20px; --r-pill:999px; --r-chip:10px;
  /* ombre (firma visiva) */
  --shadow-sheen:inset 9px -7px 17px -4px rgba(255,255,255,.08);
  --shadow-glow:0 0 10px rgba(134,134,134,.21);
  /* spacing */
  --s-1:8px; --s-2:20px; --s-3:40px; --s-4:70px;
  --gutter:clamp(16px,3vw,40px);
  --container:1300px;
  /* tipografia — estremi misurati 390px → 1440px */
  --font-sans:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --font-serif:'Instrument Serif',Georgia,serif;
  --fs-display:clamp(59.2px,36.6px + 5.79vw,120px);
  --fs-h1:clamp(51.2px,30.4px + 5.33vw,107.2px);
  --fs-h2:clamp(32px,24.3px + 1.98vw,52.8px);
  --fs-h4:clamp(18px,16.4px + .42vw,22.4px);
  --fs-h5:clamp(17.6px,17px + .15vw,19.2px);
  --fs-counter:clamp(40px,32.3px + 1.98vw,60.8px);
  --fs-body:16px; --fs-btn:15px; --fs-micro:9.6px;
  --ls-tight:-.05em;
  --dur:.3s; --ease:cubic-bezier(.4,0,.2,1);
}

*,*::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.5 var(--font-sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--salmon);text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,h5,h6{color:var(--white);text-transform:uppercase;letter-spacing:var(--ls-tight);line-height:1;font-weight:500}
h1{font-size:var(--fs-h1);font-weight:700}
h2{font-size:var(--fs-h2)}
h4{font-size:var(--fs-h4);font-weight:400}
h5{font-size:var(--fs-h5);font-weight:400}
.display{font-size:var(--fs-display);font-weight:700;line-height:.9}
.mono{font-family:var(--font-mono)}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s-4)}