/* VoxelPopuli — sito 2026-10 (rifacimento). Un solo accento (verde erba), neutri tinti di notte-verde.
   Raggi: 14px contenitori, 10px interni, pillole per i controlli. Font: Outfit (display+body), JetBrains Mono (dati), Press Start 2P (solo wordmark). */
:root {
  --bg: #0b1210; --bg-2: #101a16; --bg-3: #15221d; --line: #22322b; --line-2: #2e4138;
  --ink: #e6efe9; --ink-2: #a7b8ae; --ink-3: #7b8e83;
  --acc: #7ccf4a; --acc-2: #5fae35; --acc-ink: #0b1210; --acc-soft: rgba(124,207,74,.14);
  --warn: #e8b04a; --bad: #e06a6a;
  --r: 14px; --r-s: 10px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --font: 'Outfit', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --pixel: 'Press Start 2P', monospace;
  --nav-h: 64px; --max: 1240px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #f3f6f2; --bg-2: #ffffff; --bg-3: #e9efe8; --line: #d6dfd4; --line-2: #c2cfc0; --ink: #14201a; --ink-2: #44554b; --ink-3: #7b8e83; --acc: #3e8f1e; --acc-2: #2f7116; --acc-ink: #ffffff; --acc-soft: rgba(62,143,30,.12); }
}
:root[data-theme="light"] { --bg: #f3f6f2; --bg-2: #ffffff; --bg-3: #e9efe8; --line: #d6dfd4; --line-2: #c2cfc0; --ink: #14201a; --ink-2: #44554b; --ink-3: #7b8e83; --acc: #3e8f1e; --acc-2: #2f7116; --acc-ink: #ffffff; --acc-soft: rgba(62,143,30,.12); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.55; overflow-x: hidden; }
::selection { background: var(--acc); color: var(--acc-ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: 20px; }
p { margin: 0; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { width: min(var(--max), 100% - 32px); margin-inline: auto; }
section { padding: clamp(56px, 8vw, 104px) 0; }
.lede { color: var(--ink-2); max-width: 62ch; font-size: 18px; margin-top: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* scrollbar e caret dal palette */
html { scrollbar-color: var(--line-2) var(--bg); caret-color: var(--acc); }

/* PARTICELLE: canvas fisso dietro a tutto; i contenuti stanno sopra */
.particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.particles canvas { width: 100%; height: 100%; display: block; }
body > :not(.particles):not(.drawer):not(.sr):not(.nav):not(script):not(.vp-consent) { position: relative; z-index: 1; }
.nav { z-index: 40; }
/* NAV */
.nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 40; display: flex; align-items: center; gap: 18px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav .brand { font-family: var(--pixel); font-size: 11px; color: var(--acc); text-decoration: none; letter-spacing: .02em; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav li a { display: inline-block; padding: 8px 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .18s var(--ease-out), background-color .18s var(--ease-out); }
.nav li a:hover, .nav li a[aria-current="true"] { color: var(--ink); background: var(--acc-soft); }
.nav .live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.nav .live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc-ink); opacity: .55; }
.nav .live-pill.fresh i { opacity: 1; animation: pulse 1.8s var(--ease-in-out) infinite; }
.nav .menu { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: inherit; cursor: pointer; }
@media (max-width: 900px) { .nav ul { display: none; } .nav .menu { display: inline-block; } .nav.open ul { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 10px; } .nav .live-pill { display: none; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.6); opacity: .5 } }

/* HERO: 3D a tutta pagina, testo a sinistra */
.hero { position: relative; padding: calc(var(--nav-h) + 72px) 0 28px; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 70% 10%, var(--acc-soft), transparent 70%); pointer-events: none; }
/* STORIA 3D: sezione alta, scena incollata; lo scroll è la timeline */
.story { height: 420vh; position: relative; padding: 0; }
.story .pin { position: sticky; top: var(--nav-h); height: calc(100dvh - var(--nav-h)); overflow: hidden; }
.story .scene3d, .story .scene3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story .scene3d { background: linear-gradient(180deg, #0b1210 0%, #0f2219 42%, #16352a 100%); }
.story .pin::after { content: ''; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(0deg, var(--bg), transparent); pointer-events: none; }
.bubble { position: absolute; left: 0; top: 0; width: min(360px, calc(100vw - 32px)); transform: translate(-50%, calc(-100% - 22px)); background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 16px 14px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); opacity: 0; transition: opacity .2s var(--ease-out); pointer-events: none; }
.bubble.on { opacity: 1; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; background: var(--bg-2); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: translateX(-50%) rotate(45deg); }
.bubble .who { font-size: 12px; color: var(--acc); font-weight: 600; margin-bottom: 4px; }
.bubble p { font-size: 16px; line-height: 1.45; min-height: 3.4em; }
.bubble p .caret { display: inline-block; width: 2px; height: 1em; background: var(--acc); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.story .dots { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.story .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background-color .2s var(--ease-out), transform .2s var(--ease-out); }
.story .dots i.on { background: var(--acc); transform: scale(1.4); }
.story-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .story { height: auto; } .story .pin { position: static; height: auto; } .story .scene3d { position: relative; height: 420px; } .bubble, .story .dots { display: none; }
  .story-static { display: grid; gap: 12px; padding: 20px 16px 40px; max-width: var(--max); margin: 0 auto; }
  .story-static div { padding: 14px 16px; border-radius: var(--r-s); background: var(--bg-2); border: 1px solid var(--line); } .story-static b { color: var(--acc); display: block; font-size: 13px; margin-bottom: 4px; }
}
@media (max-width: 720px) { .bubble { transform: translate(-50%, calc(-100% - 16px)); } .bubble p { font-size: 15px; } }
.hero .copy { max-width: 620px; }
.hero h1 { font-size: clamp(40px, 6.2vw, 76px); font-weight: 700; letter-spacing: -0.03em; }
.hero h1 em { font-style: italic; color: var(--acc); line-height: 1.1; padding-bottom: 2px; }
.hero .sub { margin-top: 18px; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 46ch; }
.hero .cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: transform .14s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: var(--acc); color: var(--acc-ink); }
.btn-primary:hover { background: var(--acc-2); }
.btn-ghost { background: color-mix(in srgb, var(--bg-2) 70%, transparent); border-color: var(--line-2); color: var(--ink); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--acc); }
.hero .status { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: color-mix(in srgb, var(--bg-2) 75%, transparent); border: 1px solid var(--line-2); backdrop-filter: blur(8px); font-size: 13px; color: var(--ink-2); }
.chip b { color: var(--ink); font-weight: 600; }
.chip .num { color: var(--acc); }


/* ADESSO: fascia live */
.now { padding: 0; margin-top: -8px; }
.now .band { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.now .star { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; }
.now .star img { width: 84px; height: 84px; border-radius: 12px; image-rendering: pixelated; background: var(--bg-3); }
.now .star h3 { font-size: 24px; }
.now .star .why { color: var(--ink-3); font-size: 14px; margin-top: 2px; }
.now .star .thought { margin-top: 10px; color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.now .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; align-content: start; }
.now .fact { border-top: 1px solid var(--line); padding-top: 10px; }
.now .fact .k { font-size: 12px; color: var(--ink-3); text-transform: none; }
.now .fact .v { font-size: 17px; font-weight: 600; margin-top: 2px; }
@media (max-width: 860px) { .now .band { grid-template-columns: 1fr; } }

/* CITTADINI: carrellata orizzontale di ritratti, dimensioni miste */
.citizens .rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 0 18px; scrollbar-width: thin; margin-top: 28px; }
.cz { flex: 0 0 240px; scroll-snap-align: start; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; cursor: pointer; text-align: left; padding: 0; color: inherit; font: inherit;
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out); }
.cz:nth-child(3n+1) { flex-basis: 280px; }
@media (hover: hover) and (pointer: fine) { .cz:hover { transform: translateY(-3px); border-color: var(--acc); } }
.cz .face { aspect-ratio: 1 / 1.05; background: radial-gradient(120% 90% at 50% 100%, var(--acc-soft), transparent 60%), var(--bg-3); display: grid; place-items: end center; }
.cz .face img { width: 62%; image-rendering: pixelated; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); transform: translateY(6px); }
.cz .meta { padding: 14px 16px 16px; }
.cz .meta h3 { font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
.cz .meta h3 small { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.cz .meta .role { color: var(--acc); font-size: 13px; font-weight: 600; margin-top: 2px; }
.cz .meta .tagline { color: var(--ink-2); font-size: 14px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cz .meta .mini { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.cz .meta .mini b { color: var(--ink); font-weight: 600; }

/* DRAWER cittadino */
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer.open { display: block; }
.drawer .scrim { position: absolute; inset: 0; background: rgba(5, 10, 8, .6); backdrop-filter: blur(3px); }
.drawer .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--bg-2); border-left: 1px solid var(--line); overflow: auto; padding: 22px 24px 40px;
  transform: translateX(100%); transition: transform .32s cubic-bezier(0.32, 0.72, 0, 1); }
.drawer.open .panel { transform: translateX(0); }
.drawer .close { position: sticky; top: 0; float: right; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink); width: 40px; height: 40px; border-radius: 999px; cursor: pointer; font-size: 18px; }
.drawer .top { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.drawer canvas { width: 200px; height: 270px; border-radius: 12px; background: radial-gradient(90% 70% at 50% 100%, var(--acc-soft), transparent 70%), var(--bg-3); }
.drawer h3 { font-size: 28px; }
.drawer .role { color: var(--acc); font-weight: 600; }
.drawer dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; font-size: 14px; }
.drawer dt { color: var(--ink-3); }
.drawer dd { margin: 0; }
.drawer .persona { margin-top: 18px; color: var(--ink-2); font-size: 15px; }
.drawer .block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.drawer .block h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
/* (27/10) la scheda «cosa pensa e cosa ricorda» */
.drawer .mem { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.drawer .mem li { color: var(--ink-2); line-height: 1.55; font-size: 15px; }
.drawer .mem b { color: var(--ink); font-weight: 600; }
.drawer .when { color: var(--ink-3); font: 12px var(--mono); white-space: nowrap; }
.drawer .nuance { margin-top: 8px; color: var(--ink-3); }
.drawer .last-act { margin: 14px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.drawer .inv { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer .inv span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: var(--bg-3); font-size: 12px; }
.drawer .inv img { width: 18px; height: 18px; image-rendering: pixelated; }
.drawer .lives { height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden; margin-top: 6px; }
.drawer .lives i { display: block; height: 100%; background: var(--acc); border-radius: 999px; }
@media (max-width: 520px) { .drawer .top { grid-template-columns: 1fr; } .drawer canvas { width: 100%; height: 300px; } }

/* LEGAMI: costellazione SVG */
.bonds .graph { margin-top: 28px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; overflow-x: auto; }
.bonds svg { width: 100%; min-width: 680px; height: auto; display: block; }
.bonds svg text { font-family: var(--font); font-size: 13px; fill: var(--ink); font-weight: 600; }
.bonds svg .lab { fill: var(--ink-3); font-size: 11px; font-weight: 500; }
.bonds svg line { stroke: var(--line-2); stroke-width: 1.5; }
.bonds svg line.spouse { stroke: var(--acc); stroke-width: 2.5; }
.bonds svg line.child, .bonds svg path.child { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.bonds svg image { image-rendering: pixelated; }
.bonds .legend { display: flex; gap: 18px; margin-top: 12px; color: var(--ink-3); font-size: 13px; }
.bonds .legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--acc); vertical-align: middle; margin-right: 6px; }
.bonds .legend i.c { border-top: 2px dashed var(--ink-3); }
/* (27/10) i defunti, in trasparenza */
.bonds svg g.dead { opacity: .45; }
.bonds svg line.gone { stroke-dasharray: 2 5; opacity: .55; }
.bonds .legend i.d { border-top: 2px dotted var(--acc); opacity: .55; }

/* CRONACA: timeline a due colonne */
.chronicle .grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; margin-top: 28px; }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); }
.tl { position: relative; padding: 0 0 26px; }
.tl::before { content: ''; position: absolute; left: -24px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 3px solid var(--acc); }
.tl time { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.tl p { margin-top: 6px; color: var(--ink); font-size: 16px; max-width: 66ch; }
.feed { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; align-self: start; position: sticky; top: calc(var(--nav-h) + 16px); }
.feed h3 { font-size: 15px; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.feed ul { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; display: grid; grid-template-columns: 54px 1fr; gap: 10px; }
.feed li time { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding-top: 3px; }
.feed li b { font-weight: 600; }
@media (max-width: 860px) { .chronicle .grid { grid-template-columns: 1fr; } .feed { position: static; } }

/* GOVERNO */
.gov .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; align-items: start; }
.mayor { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 18px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.mayor img { width: 72px; height: 72px; border-radius: 12px; image-rendering: pixelated; background: var(--bg-3); }
.mayor .t { color: var(--ink-3); font-size: 13px; }
.mayor h3 { font-size: 24px; }
.polls { margin-top: 16px; display: grid; gap: 10px; }
.poll { padding: 14px 16px; border-radius: var(--r-s); background: var(--bg-2); border: 1px solid var(--line); }
.poll .q { font-size: 15px; }
.poll .r { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.poll .r b { color: var(--acc); font-weight: 600; }
.poll .r .bar { flex: 1 1 120px; height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.poll .r .bar i { display: block; height: 100%; background: var(--acc); }
.laws { display: grid; gap: 10px; }
.law { padding: 18px 20px; border-radius: var(--r); background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); }
.law h3 { font-size: 15px; color: var(--acc); letter-spacing: 0; margin-bottom: 6px; }
.law p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 860px) { .gov .grid { grid-template-columns: 1fr; } }

/* COME VIVE: righe a tutta larghezza con diagramma */
.how .rows { margin-top: 28px; display: grid; gap: 0; }
.how .row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); align-items: start; }
.how .row:last-child { border-bottom: 1px solid var(--line); }
.how .row h3 { font-size: 20px; }
.how .row p { color: var(--ink-2); max-width: 70ch; font-size: 16px; }
.how .row .icon { width: 36px; height: 36px; color: var(--acc); margin-bottom: 10px; }
@media (max-width: 720px) { .how .row { grid-template-columns: 1fr; gap: 8px; } }

/* VILLAGGIO (3D interattivo + opere) */
.works { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.work { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; border-radius: var(--r-s); background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; }
.work b { font-weight: 600; }
.work small { color: var(--ink-3); display: block; }
.work .by { color: var(--acc); font-size: 12px; white-space: nowrap; }
.site-progress { height: 5px; background: var(--bg-3); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.site-progress i { display: block; height: 100%; background: var(--acc); }


/* DIARIO */
.diary details { border-top: 1px solid var(--line); }
.diary details:last-child { border-bottom: 1px solid var(--line); }
.diary summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 18px 4px; font-size: 17px; font-weight: 600; }
.diary summary::-webkit-details-marker { display: none; }
.diary summary time { font-family: var(--mono); font-size: 13px; color: var(--ink-3); font-weight: 500; }
.diary summary .chev { color: var(--ink-3); transition: transform .2s var(--ease-out); }
.diary details[open] summary .chev { transform: rotate(180deg); }
.diary ul { margin: 0 0 18px 126px; padding: 0 0 0 18px; color: var(--ink-2); font-size: 15px; max-width: 72ch; }
.diary li + li { margin-top: 8px; }
@media (max-width: 640px) { .diary summary { grid-template-columns: 1fr auto; } .diary summary time { grid-column: 1 / -1; } .diary ul { margin-left: 4px; } }

/* DIRETTA */
.live .grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-top: 28px; }
.live .map { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.live .map { position: relative; }
.onair { position: absolute; left: 14px; bottom: 14px; max-width: min(420px, calc(100% - 28px)); padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(8px); pointer-events: none; }
.onair > div { display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; align-items: center; }
.onair img { grid-row: span 2; width: 52px; height: 52px; border-radius: 10px; image-rendering: pixelated; background: var(--bg-3); }
.onair h3 { font-size: 20px; margin: 0; }
.onair .why { color: var(--ink-3); font-size: 13px; }
.onair .thought { grid-column: 1 / -1; color: var(--ink-2); font-size: 14px; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.onair .soon { display: none; }
.onair .empty { margin: 0; font-size: 14px; color: var(--ink-3); }
.live .map iframe { width: 100%; height: 100%; border: 0; }
.chat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; min-height: 320px; max-height: 520px; }
.chat h3 { font-size: 15px; color: var(--ink-3); font-weight: 600; }
.chat .lines { overflow: auto; margin-top: 8px; display: grid; gap: 8px; align-content: start; }
.chat .ln { font-size: 14px; }
.chat .ln b { color: var(--acc); font-weight: 600; }
.chat .soon { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
@media (max-width: 860px) { .live .grid { grid-template-columns: 1fr; } }

/* FOOTER */
footer { padding: 40px 0 60px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
footer .cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 24px; }
footer h4 { margin: 0 0 8px; color: var(--ink); font-size: 14px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer .brand { font-family: var(--pixel); font-size: 11px; color: var(--acc); }
@media (max-width: 720px) { footer .cols { grid-template-columns: 1fr; } }

/* reveal: una sola entrata, threshold 0 + rootMargin (mina: sezioni che crescono) */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .nav .live-pill i { animation: none; }
  .drawer .panel { transition: none; }
  html { scroll-behavior: auto; }
}
.empty { color: var(--ink-3); font-size: 14px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-s); }

/* (2026-10-24) lingua e avvisi sull'IA */
.nav .lang-switch { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: color .18s var(--ease-out), border-color .18s var(--ease-out); }
.nav .lang-switch:hover { color: var(--ink); border-color: var(--acc); }
@media (max-width: 900px) { .nav .lang-switch { margin-left: auto; order: 2; } .nav .menu { margin-left: 0; order: 3; } }
.hero .ai-note { margin-top: 12px; font-size: 14px; color: var(--ink-3); max-width: 52ch; }
footer .ai-note { font-size: 13px; color: var(--ink-3); }
.chat .ai-tag { margin: 2px 0 8px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 720px) { footer .cols { grid-template-columns: 1fr 1fr; } }
footer .copyright { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }