/* Layout: una città di chip vista dalla strada; la camera avanza con lo scroll e i testi stanno su pannelli di vetro sopra il canvas fisso.
   Tipi: Unbounded (largo, da titolo di gioco) per i titoli, IBM Plex Sans per la lettura, IBM Plex Mono solo per i log. */
:root {
  --bg: #05070d;
  --panel: rgba(7, 10, 18, 0.72);
  --line: rgba(160, 190, 230, 0.16);
  --fg: #e8eef7;
  --muted: #9ba8bd;
  --alarm: #ff5a1f;
  --ice: #5fd0ff;
  --crit: #ff4d4d;
  --high: #ffa24a;
  --info: #5fd0ff;
  --font-display: "Unbounded", "Arial Black", Impact, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  padding-inline: 16px;
  overflow-x: hidden;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
body.nogl { background: radial-gradient(120% 80% at 50% 100%, #1a2238 0%, var(--bg) 60%) fixed; }
.rail { position: fixed; right: 0; top: 0; width: 3px; height: 100%; z-index: 5; background: rgba(160, 190, 230, 0.08); }
.rail i { display: block; width: 100%; height: 0%; background: var(--alarm); }

.top { position: fixed; z-index: 4; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px clamp(16px, 4vw, 40px); background: linear-gradient(to bottom, rgba(5, 7, 13, 0.85), transparent); }
.mark { font: 800 1rem var(--font-display); letter-spacing: -0.01em; color: var(--fg); text-decoration: none; }
.top nav { display: flex; gap: 22px; font-size: 0.9rem; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current] { color: var(--fg); }

main { position: relative; z-index: 2; max-width: 1120px; margin-inline: auto; }
section { padding-block: clamp(56px, 16vh, 150px); }
.hero { padding-block: clamp(110px, 26vh, 230px) clamp(80px, 24vh, 240px); position: relative; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 4% -6% 4% -20%; background: radial-gradient(60% 60% at 40% 50%, rgba(5, 7, 13, 0.72), transparent 100%); pointer-events: none; }
h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 9.5vw, 7.4rem); line-height: 0.98; letter-spacing: -0.03em; margin: 0; text-wrap: balance; text-shadow: 0 6px 60px rgba(0, 0, 0, 0.7); }
h1 span { display: inline-block; }
.lede { max-width: 34em; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #cdd7e6; margin: 28px 0 36px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { font: 600 0.95rem var(--font-body); color: var(--bg); background: var(--alarm); padding: 14px 24px; border-radius: 4px; text-decoration: none; border: 1px solid var(--alarm); cursor: pointer; }
.btn:hover { background: #ff7a45; }
.btn.ghost { color: var(--fg); background: rgba(8, 11, 19, 0.55); border-color: rgba(232, 238, 247, 0.4); }
.btn.ghost:hover { border-color: var(--fg); }
.btn:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4.4vw, 2.9rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 18px; text-wrap: balance; }
.sub { color: var(--muted); max-width: 38em; margin: 0 0 40px; }
.panel { background: var(--panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 6px; padding: clamp(20px, 4vw, 40px); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.cols > * { min-width: 0; }
.cols > a { color: inherit; text-decoration: none; }
.cols > a:hover h3 { color: var(--alarm); }
.cols h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin: 0 0 10px; color: var(--ice); }
.cols p { margin: 0; color: #c0cbdc; }
.cols b { color: var(--fg); font-weight: 600; }

.log { font-family: var(--font-mono); font-size: 0.86rem; margin: 0; padding: 0; list-style: none; display: grid; }
.log li { display: grid; grid-template-columns: 78px 78px 70px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; }
.log li:first-child { border-top: 0; }
.log time { color: var(--muted); }
.sev { font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.sev::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sev.crit { color: var(--crit); } .sev.high { color: var(--high); } .sev.info { color: var(--info); }
.log .ttp { color: var(--muted); }
.log .msg { color: var(--fg); font-family: var(--font-body); font-size: 0.95rem; min-width: 0; overflow-wrap: anywhere; }
.note { color: var(--muted); font-size: 0.85rem; margin: 22px 0 0; }

.posts { display: grid; margin: 0; padding: 0; list-style: none; }
.posts li { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); align-items: baseline; }
.posts li:first-child { border-top: 0; }
.posts h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; line-height: 1.35; margin: 0 0 4px; }
.posts p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.posts span { font: 400 0.82rem var(--font-mono); color: var(--muted); white-space: nowrap; }

form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
input[type=email] { flex: 1 1 260px; min-width: 0; font: 400 1rem var(--font-body); color: var(--fg); background: rgba(232, 238, 247, 0.06); border: 1px solid rgba(232, 238, 247, 0.28); border-radius: 4px; padding: 14px 16px; }
#msg { margin: 14px 0 0; color: var(--high); min-height: 1.6em; }
footer { padding-block: 40px 56px; color: var(--muted); font-size: 0.9rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
footer b { font-family: var(--font-display); font-weight: 500; color: var(--fg); letter-spacing: 0.02em; }

/* Apertura: i quattro pezzi del titolo entrano in sequenza, una sola volta */
@keyframes rise { from { opacity: 0; transform: translateY(0.35em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
body.ready h1 span { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.ready h1 span:nth-child(2) { animation-delay: 0.18s; }
body.ready h1 span:nth-child(3) { animation-delay: 0.36s; }
body.ready h1 span:nth-child(4) { animation-delay: 0.54s; }
body.ready .lede { animation: rise 0.9s 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.ready .cta { animation: rise 0.9s 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@media (max-width: 820px) {
  .top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .top nav { gap: 16px; max-width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
}
@media (max-width: 640px) {
  .log li { grid-template-columns: 1fr; gap: 4px; }
  .posts li { grid-template-columns: 1fr; gap: 6px; }
  body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.ready h1 span, body.ready .lede, body.ready .cta { animation: none; }
}

/* Footer: link social */
.social { display: flex; flex-wrap: wrap; gap: 20px; }
.social a { color: var(--muted); text-decoration: none; }
.social a:hover { color: var(--fg); }

/* Pagine indice delle rubriche */
.page-head { padding-block: clamp(110px, 20vh, 180px) 24px; }
.kicker { font: 500 0.8rem var(--font-mono); color: var(--alarm); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.page-head h1 { font-size: clamp(2.2rem, 7vw, 5rem); }
.page-head .lede { margin-bottom: 0; }
.index-list { padding-block: 24px 80px; }
.posts a { color: inherit; text-decoration: none; }
.posts a:hover h3 { color: var(--alarm); }
.empty { color: var(--muted); margin: 0; }

/* Articolo */
.article { padding-block: clamp(110px, 18vh, 160px) 80px; }
.article .panel { max-width: 760px; margin-inline: auto; }
.article h1 { font-size: clamp(1.9rem, 5.4vw, 3.4rem); line-height: 1.06; margin-bottom: 18px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 0.85rem var(--font-mono); color: var(--muted); margin: 0 0 32px; }
.meta a { color: var(--ice); text-decoration: none; }
.body h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 40px 0 12px; }
.body p, .body li { color: #cdd7e6; }
.body a, .sources a { color: var(--ice); overflow-wrap: anywhere; }
.body code { font: 0.9em var(--font-mono); background: rgba(232, 238, 247, 0.08); padding: 1px 5px; border-radius: 3px; }
.defend { margin: 48px 0 0; border: 1px solid rgba(255, 90, 31, 0.45); border-radius: 6px; padding: clamp(18px, 3vw, 28px); background: rgba(255, 90, 31, 0.06); }
.defend > h2 { margin: 0 0 20px; color: var(--alarm); font-size: clamp(1.3rem, 3vw, 1.7rem); }
.defend .cols { gap: 24px; }
.defend h3 { margin-bottom: 8px; }
.defend ul { margin: 0; padding-left: 1.2em; color: #cdd7e6; }
.defend li + li { margin-top: 6px; }
.sources { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.1rem; margin: 0 0 10px; }
.sources ol { margin: 0; padding-left: 1.4em; color: var(--muted); font-size: 0.95rem; }
.posts:has(li) + .empty { display: none; }

/* Articolo: sommario, firma e immagini (copertina a tutta larghezza del pannello, 16:9; immagini nel testo con didascalia) */
.standfirst { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: #cdd7e6; margin: 0 0 18px; }
.byline { display: flex; flex-wrap: wrap; gap: 4px 0; font: 400 0.85rem var(--font-mono); color: var(--muted); margin: -20px 0 32px; }
.byline span + span::before { content: "·"; margin: 0 10px; color: var(--line); }
.byline span:first-child { color: var(--fg); }
.article figure { margin: 36px 0; }
.article figure img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); background: rgba(232, 238, 247, 0.04); }
.article figure.cover { margin: 0 0 36px; }
.article figure.cover img { aspect-ratio: 16 / 9; object-fit: cover; }
.article figcaption { font-size: 0.85rem; line-height: 1.45; color: var(--muted); margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--alarm); }
.body .credit { margin-top: 36px; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 640px) {
  .article figure { margin: 28px -8px; }
  .article figure.cover { margin: 0 -8px 28px; }
  .article figure img { border-radius: 0; border-inline: 0; }
  .article figcaption { margin-inline: 8px; }
}