/* ============================================================
   HACK-PROJECT — Threat Intelligence Daily
   Estetica: dossier d'intelligence declassificato
   ============================================================ */

:root {
  /* — Superfici — */
  --paper:      #14141a;
  --paper-2:    #1c1c24;
  --paper-3:    #26262f;
  --rule:       #34343f;
  --rule-soft:  #20202b;

  /* — Inchiostro — */
  --ink:        #f0ece2;
  --ink-dim:    #a8a496;
  --ink-faint:  #9c98aa;
  --ink-strong: #ffffff;

  /* — Accenti: ruggine primaria + ciano tecnico + viola + oro — */
  --oxide:      #e2521c;
  --oxide-lit:  #ff7a3d;
  --oxide-deep: #8f2f0d;
  --cyan:       #2dd4bf;
  --cyan-lit:   #5eead4;
  --violet:     #a78bfa;
  --violet-lit: #c4b5fd;
  --signal:     #fbbf24;
  --stamp:      #f43f5e;

  /* — Severità, più vive — */
  --sev-critical: #f43f5e;
  --sev-high:     #ff7a3d;
  --sev-medium:   #fbbf24;
  --sev-low:      #2dd4bf;

  /* — Tipografia — */
  --display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;
  --body:    "Literata", Georgia, serif;

  /* — Metrica — */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 68ch;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   ATMOSFERA — grana + scanline + vignetta
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(ellipse 130% 90% at 50% -10%, transparent 42%, rgba(0,0,0,.45) 100%);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.shell {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
}

.rule--double {
  height: 4px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.9rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.wordmark em {
  color: var(--oxide-lit);
  font-style: italic;
}

.masthead__nav {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masthead__nav a {
  color: var(--ink-dim);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.masthead__nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--oxide);
}

.ticker {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-soft);
  padding-block: 0.4rem;
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  overflow: hidden;
}
.ticker span { flex-shrink: 0; }
.ticker .live { color: var(--oxide-lit); }
.ticker .live::before {
  content: "●";
  margin-right: 0.4em;
}

/* ============================================================
   HERO — articolo del giorno
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3rem, 7vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}

.kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oxide-lit);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--oxide), transparent);
}

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.8vw, 4.4rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}
.hero__title em {
  font-style: italic;
  color: var(--oxide-lit);
}

.hero__standfirst {
  font-size: 1.2rem;
  color: var(--ink-dim);
  max-width: 52ch;
  text-wrap: pretty;
  margin-bottom: 2rem;
}

/* ============================================================
   DOSSIER CARD — metadati attore
   ============================================================ */
.dossier {
  border: 1px solid var(--rule);
  background:
    linear-gradient(160deg, var(--paper-2), var(--paper));
  position: relative;
}
.dossier::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}

.dossier { border-top: 2px solid var(--violet); }
.dossier__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.dossier__body { padding: 1.2rem; }

.field {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px dotted var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
}
.field:last-child { border-bottom: 0; }
.field dt {
  color: var(--ink-faint);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 0.2em;
}
.field dd { color: var(--ink); }

/* ============================================================
   SEVERITÀ
   ============================================================ */
.sev {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border: 1px solid currentColor;
}
.sev::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.sev--critical { color: var(--sev-critical); }
.sev--high     { color: var(--sev-high); }
.sev--medium   { color: var(--sev-medium); }
.sev--low      { color: var(--sev-low); }

/* ============================================================
   MITRE — chip tecniche
   ============================================================ */
.ttp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ttp {
  font-family: var(--mono);
  font-size: 0.68rem;
  border: 1px solid var(--rule);
  padding: 0.35em 0.6em;
  color: var(--ink-dim);
  position: relative;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
  cursor: default;
}
.ttp:hover {
  border-color: var(--oxide);
  color: var(--oxide-lit);
  transform: translateY(-2px);
}
.ttp__id { color: var(--cyan); font-weight: 700; }

/* tooltip */
.ttp[data-tactic]:hover::after {
  content: attr(data-tactic);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  white-space: nowrap;
  background: var(--paper-3);
  border: 1px solid var(--oxide);
  color: var(--ink);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  z-index: 20;
}

/* ============================================================
   ARCHIVIO
   ============================================================ */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.8rem;
}
.section-head .count {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-left: auto;
}

.archive { padding-block: clamp(2rem, 5vw, 4rem); }

.entry {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.3s;
  position: relative;
}
@media (max-width: 760px) {
  .entry { grid-template-columns: 1fr; gap: 0.6rem; }
}

.entry::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(194, 65, 12, 0.07), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.entry:hover::before { opacity: 1; }

.entry__date {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  padding-top: 0.45em;
}

.entry__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.15;
  text-wrap: balance;
  transition: color 0.25s;
}
.entry:hover .entry__title { color: var(--oxide-lit); }

.entry__actor {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.45rem;
}

.entry__arrow {
  font-family: var(--mono);
  color: var(--ink-faint);
  transition: transform 0.25s, color 0.25s;
  padding-top: 0.3em;
}
.entry:hover .entry__arrow {
  transform: translateX(6px);
  color: var(--oxide-lit);
}

/* ============================================================
   ARTICOLO
   ============================================================ */
.article { padding-block: clamp(2rem, 5vw, 4rem); }

.article__layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 1000px) {
  .article__layout { grid-template-columns: 1fr; }
}

.prose > * + * { margin-top: 1.3em; }

.prose h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
  margin-top: 2.8em;
  padding-top: 0.8em;
  border-top: 1px solid var(--rule);
  position: relative;
}
.prose h2::before {
  content: attr(data-n);
  position: absolute;
  top: 0.9em;
  left: -2.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--oxide);
}
@media (max-width: 1200px) { .prose h2::before { display: none; } }

.prose h3 {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxide-lit);
  margin-top: 2em;
}

.prose p { text-wrap: pretty; }
.prose strong { color: var(--ink-strong); font-weight: 600; }

.prose a {
  color: var(--cyan-lit);
  border-bottom: 1px solid rgba(94,234,212,.4);
  transition: border-color 0.2s;
}
.prose a:hover { border-bottom-color: var(--cyan-lit); }

.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--oxide); font-family: var(--mono); font-size: 0.85em; }

.prose code {
  font-family: var(--mono);
  font-size: 0.84em;
  background: rgba(45,212,191,.08);
  border: 1px solid rgba(45,212,191,.22);
  padding: 0.12em 0.42em;
  color: var(--cyan-lit);
}

.prose pre {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--oxide);
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  font-size: 0.8rem;
  line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--ink-dim); }

.prose blockquote {
  border-left: 2px solid var(--oxide);
  padding-left: 1.3rem;
  font-style: italic;
  color: var(--ink-dim);
}

/* callout rimedi */
.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sev-low);
  background: var(--paper-2);
  padding: 1.2rem 1.4rem;
}
.callout__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sev-low);
  margin-bottom: 0.6rem;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar { position: sticky; top: 5.5rem; }
@media (max-width: 1000px) { .sidebar { position: static; } }

.sidebar__block + .sidebar__block { margin-top: 1.5rem; }

.sidebar__label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.9rem;
}

.sources { font-family: var(--mono); font-size: 0.72rem; }
.sources li { list-style: none; padding-block: 0.5rem; border-bottom: 1px dotted var(--rule-soft); }
.sources a { color: var(--ink-dim); transition: color 0.2s; }
.sources a:hover { color: var(--cyan-lit); }




/* ============================================================
   A11Y
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--oxide-lit);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--oxide);
  color: #fff;
  padding: 0.7rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  z-index: 200;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media print {
  body::before, body::after, .masthead, .ticker { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   LAYOUT EDITORIALE — immagini, hero, archivio a griglia
   ============================================================ */

.masthead__tagline {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-left: 1px solid var(--rule);
  padding-left: 1rem;
}
@media (max-width: 720px) { .masthead__tagline { display: none; } }

.masthead__nav .lang {
  color: var(--signal);
  border: 1px solid var(--rule);
  padding: .3em .7em;
  border-bottom: 1px solid var(--rule);
}
.masthead__nav .lang:hover {
  border-color: var(--signal);
  color: var(--signal);
}

/* — HERO con arte — */
.hero { align-items: center; }
.hero__art {
  display: block;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  transition: border-color .4s;
}
.hero__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,11,.7));
  pointer-events: none;
}
.hero__art img {
  width: 100%; height: auto;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter .6s;
  filter: saturate(.85);
}
.hero__art:hover img { transform: scale(1.04); filter: saturate(1.1); }
.hero__art:hover { border-color: var(--oxide); }

.cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--oxide);
  color: var(--oxide-lit);
  padding: .85em 1.6em;
  transition: background .3s, color .3s, transform .3s;
}
.cta:hover {
  background: var(--oxide);
  color: #fff;
  transform: translateY(-2px);
}

/* — figura articolo — */
.article__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin-bottom: 1.2rem;
}
.article__standfirst {
  font-size: 1.22rem;
  color: var(--ink-dim);
  text-wrap: pretty;
  margin-bottom: 2rem;
}
/* — HERO ARTICOLO: titolo a sinistra, dossier a destra — */
.article__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
}
/* nell'hero e' la colonna della griglia a dare la misura: nessun limite in ch */
.article__head { max-width: none; min-width: 0; }
.article__hero-media { min-width: 0; }
/* dentro l'hero il media e' una colonna, non una fascia a tutta pagina */
.article__hero-media .dossier-video,
.article__hero-media .hero-figure { margin-bottom: 0; }
.article__hero-media .dossier-video {
  padding: clamp(1rem, 2.5vw, 1.75rem) .5rem;
  border: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .article__hero { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .article__head { max-width: 58ch; }
  .article__hero-media .dossier-video { border-inline: 0; }
}

.hero-figure {
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--oxide);
  overflow: hidden;
}
.hero-figure img { width: 100%; height: auto; filter: saturate(.9); }

/* leggibilita' prosa */

.prose h2 { margin-top: 2.4em; }

/* ============================================================
   VIDEO DEL DOSSIER — verticale 9:16, presentato come tale
   ============================================================ */
.dossier-video {
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  display: flex;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.75rem) 1rem;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(194,65,12,.10), transparent 70%),
    var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
/* riga tecnica decorativa */
.dossier-video::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--oxide), transparent 70%);
}

.dossier-video__frame {
  position: relative;
  width: 100%;
  max-width: 306px;              /* ~9:16 -> 544px di altezza */
  border: 1px solid var(--rule);
  background: #000;
  box-shadow:
    0 0 0 6px var(--paper),
    0 0 0 7px var(--rule-soft),
    0 28px 70px -12px rgba(0,0,0,.9);
  transition: box-shadow .4s, border-color .4s;
}
.dossier-video__frame:hover {
  border-color: var(--oxide);
  box-shadow:
    0 0 0 6px var(--paper),
    0 0 0 7px var(--oxide),
    0 28px 80px -10px rgba(194,65,12,.28);
}

.dossier-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;          /* impone il verticale, poster o meno */
  height: auto;
  object-fit: cover;
  background: #000;
}

@media (max-width: 520px) {
  .dossier-video { padding-inline: 0; }
  .dossier-video__frame { max-width: 268px; }
}

/* ============================================================
   ARCHIVIO — schede con bordo proprio, niente sfondo che traspare
   (il trucco gap:1px + background lasciava celle grigie vuote)
   ============================================================ */
.entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  background: none;
  border: 0;
}
.entry {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 0;
  transition: border-color .35s, transform .35s, background .35s;
}
.entry::before { display: none; }
.entry:hover {
  border-color: var(--oxide);
  background: var(--paper-3);
  transform: translateY(-3px);
}
.entry__thumb {
  width: 100%; height: auto; display: block;
  border-bottom: 1px solid var(--rule-soft);
  filter: saturate(.75) brightness(.8);
  transition: filter .5s;
}
.entry:hover .entry__thumb { filter: saturate(1) brightness(1); }
.entry__body { padding: 1.1rem 1.2rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.entry__title { font-family: var(--display); font-weight: 600; font-size: 1.24rem; line-height: 1.15; letter-spacing: -.02em; margin-top: .35rem; }
.entry__summary { font-size: .9rem; color: var(--ink-dim); margin-top: .5rem; flex: 1; }
.entry__actor { margin-top: .9rem; }
.entry__date { padding: 0; }

/* ============================================================
   PROSA — misura, ritmo, capolettera, ancore
   ============================================================ */
.prose { font-size: 1.09rem; line-height: 1.8; max-width: var(--measure); }
.prose > * + * { margin-top: 1.35em; }
.prose p { text-wrap: pretty; }

.prose .lede { font-size: 1.2rem; color: var(--ink); }
.prose .lede::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.9em;
  line-height: .84;
  padding: .06em .1em 0 0;
  color: var(--oxide-lit);
}

.prose h2 { position: relative; scroll-margin-top: 6rem; }
.prose h2 .anchor {
  position: absolute;
  left: -1.1em;
  color: var(--oxide);
  opacity: 0;
  text-decoration: none;
  transition: opacity .2s;
}
.prose h2:hover .anchor { opacity: .7; }
@media (max-width: 900px) { .prose h2 .anchor { display: none; } }

/* ============================================================
   BREADCRUMB · BYLINE · PROGRESS
   ============================================================ */
.crumb {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  padding-block: 1.4rem .2rem;
}
.crumb a { color: var(--ink-dim); }
.crumb a:hover { color: var(--oxide-lit); }
.crumb em { font-style: normal; color: var(--ink-faint); }

.byline {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule-soft);
}
.byline__avatar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); }
.byline__meta { display: flex; flex-direction: column; gap: .15rem; }
.byline__name { font-family: var(--body); font-size: .95rem; color: var(--ink-dim); }
.byline__name a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.byline__name a:hover { border-bottom-color: var(--oxide); }
.byline__handle { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); }

.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 200;
  background: transparent;
  pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--oxide), var(--oxide-lit));
  transition: width .1s linear;
}

/* ============================================================
   INDICE · CONDIVISIONE · SCHEDA AUTORE · PAGINAZIONE · CORRELATI
   ============================================================ */
.toc { margin-bottom: 1.5rem; }
.toc__list { list-style: none; padding: 0; font-family: var(--mono); font-size: .74rem; }
.toc__list li { border-bottom: 1px dotted var(--rule-soft); }
.toc__list a {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .5rem 0; color: var(--ink-dim);
  transition: color .2s, padding-left .2s;
}
.toc__list a:hover { color: var(--oxide-lit); padding-left: .3rem; }
.toc__n { color: var(--violet); font-size: .66rem; }

.share { display: flex; gap: .4rem; flex-wrap: wrap; }
.share a, .share__copy {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--ink-dim);
  padding: .45em .8em; background: none; cursor: pointer;
  transition: border-color .25s, color .25s;
}
.share a:hover, .share__copy:hover { border-color: var(--oxide); color: var(--oxide-lit); }

.authorcard {
  display: flex; gap: 1.2rem; align-items: flex-start;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--oxide);
  background: var(--paper-2);
  max-width: var(--measure);
}
.authorcard__avatar { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--rule); flex-shrink: 0; }
.authorcard__label {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .3rem;
}
.authorcard__name { font-family: var(--display); font-size: 1.4rem; }
.authorcard__name a { border-bottom: 1px solid var(--rule); }
.authorcard__name a:hover { border-bottom-color: var(--oxide); }
.authorcard__handle { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); }
.authorcard__bio { font-size: .92rem; color: var(--ink-dim); margin-top: .5rem; }
.authorcard__links { display: flex; gap: 1rem; margin-top: .7rem; font-family: var(--mono); font-size: .7rem; }
.authorcard__links a { color: var(--signal); border-bottom: 1px solid transparent; }
.authorcard__links a:hover { border-bottom-color: var(--signal); }

.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-top: 3rem; border: 1px solid var(--rule-soft);
}
.pager__item {
  padding: 1.2rem 1.3rem; background: var(--paper-2);
  border: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.pager__item:hover { background: var(--paper-3); border-color: var(--oxide); }
.pager__item span {
  display: block; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: .4rem;
}
.pager__item strong {
  font-family: var(--display); font-weight: 400; font-size: 1.1rem;
  color: var(--ink-dim); line-height: 1.2;
}
.pager__item:hover strong { color: var(--ink); }
.pager__item--next { text-align: right; }
.pager__item--next:only-child { grid-column: 2; }
@media (max-width: 620px) {
  .pager { grid-template-columns: 1fr; }
  .pager__item--next { text-align: left; }
  .pager__item--next:only-child { grid-column: 1; }
}

.rel { padding-block: clamp(3rem, 6vw, 4.5rem); }
.rel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.rel__card {
  border: 1px solid var(--rule-soft); background: var(--paper-2);
  transition: border-color .3s, transform .3s;
}
.rel__card:hover { border-color: var(--oxide); transform: translateY(-3px); }
.rel__card img { width: 100%; height: auto; border-bottom: 1px solid var(--rule-soft); filter: saturate(.7) brightness(.75); }
.rel__card:hover img { filter: none; }
.rel__body { padding: 1rem 1.1rem 1.3rem; }
.rel__body h3 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; margin-top: .5rem; }

/* ============================================================
   CHI SONO
   ============================================================ */
.about { padding-block: clamp(2rem, 5vw, 3.5rem); }
.about__head { max-width: 30ch; }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: 2.5rem;
}
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } }
.about__card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--oxide);
  background: var(--paper-2);
  padding: 1.8rem 1.5rem;
  position: sticky; top: 6rem;
}
@media (max-width: 860px) { .about__card { position: static; } }
.about__avatar { width: 128px; height: 128px; border-radius: 50%; border: 1px solid var(--rule); margin-bottom: 1.2rem; }
.about__name { font-family: var(--display); font-size: 2rem; line-height: 1; }
.about__handle { font-family: var(--mono); font-size: .78rem; color: var(--oxide-lit); margin-top: .3rem; }
.about__loc { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); margin-top: .5rem; }
.about__links { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: .74rem; }
.about__links a { color: var(--cyan-lit); }
.about__links a:hover { color: var(--oxide-lit); }
.about__body h2 { border-top: 1px solid var(--rule); padding-top: .8em; margin-top: 2.2em; }
.about__body h2::before { display: none; }

/* ============================================================
   MOBILE — la nav sforava a 432px su viewport da 390
   ============================================================ */
@media (max-width: 720px) {
  .masthead__inner {
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    padding-block: .7rem;
  }
  .wordmark { font-size: 1.25rem; }
  .masthead__nav {
    width: 100%;
    margin-left: 0;
    gap: 1rem;
    font-size: .6rem;
    letter-spacing: .1em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .masthead__nav::-webkit-scrollbar { display: none; }
  .masthead__nav a { white-space: nowrap; flex-shrink: 0; }
  .masthead__nav .lang { padding: .25em .55em; }

  .ticker { gap: 1.2rem; font-size: .58rem; }
  /* ticker: mostra tutti gli item nel marquee */

  .kicker { flex-wrap: wrap; gap: .4rem; font-size: .62rem; }
  .kicker::after { display: none; }

  .article__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .hero__title { font-size: clamp(2rem, 9vw, 2.9rem); }
  .prose { font-size: 1.02rem; }
  .prose .lede::first-letter { font-size: 3.2em; }

  .field { grid-template-columns: 1fr; gap: .2rem; }
  .field dt { padding-top: 0; }

  .authorcard { flex-direction: column; gap: 1rem; padding: 1.2rem; }
  .authorcard__links { flex-wrap: wrap; }

  .entries { grid-template-columns: 1fr; }
  .rel__grid { grid-template-columns: 1fr; }

  .article__layout, .about__grid { gap: 2rem; }
  .toc { margin-bottom: 1rem; }
}

/* niente puo' sforare in larghezza, mai */
@media (max-width: 720px) {
  .prose pre { max-width: 100%; }
  .ttp-grid { gap: .3rem; }
  .ttp { font-size: .62rem; }
}
img, video, svg, pre, table { max-width: 100%; }
.toc__list a.is-active { color: var(--oxide-lit); }
.toc__list a.is-active .toc__n { color: var(--oxide-lit); }


/* ============================================================
   GUARDIE ANTI-SFONDAMENTO — nessuna stringa puo' allargare la pagina
   ============================================================ */
html, body { max-width: 100%; }
.prose, .prose p, .prose li, .prose h2, .prose h3,
.entry__title, .entry__summary, .article__title, .hero__title,
.article__standfirst, .hero__standfirst, .crumb em, .field dd {
  overflow-wrap: anywhere;
  word-break: normal;
}
.prose pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose code { overflow-wrap: anywhere; }
.ttp { max-width: 100%; overflow-wrap: anywhere; }
.sources a, .about__links a, .authorcard__links a { overflow-wrap: anywhere; }
.dossier, .dossier__body, .field { min-width: 0; }
.article__layout > *, .about__grid > *, .hero > * { min-width: 0; }

/* — Chi sono: dati e ruolo — */
.about__facts {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
}
.about__facts .field { grid-template-columns: 1fr; gap: .1rem; padding-block: .5rem; }
.about__facts .field dd { color: var(--ink-dim); }
.authorcard__role {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oxide-lit);
  margin-top: .25rem;
}

/* ============================================================
   FOOTER a colonne
   ============================================================ */
.footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(3rem, 7vw, 6rem);
  background: var(--paper-2);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; gap: 2rem; } }

.footer__brand .wordmark { font-size: 1.5rem; display: block; margin-bottom: .5rem; }
.footer__tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oxide-lit); margin-bottom: 1rem;
}
.footer__disclaimer {
  font-size: .85rem; line-height: 1.65; color: var(--ink-faint); max-width: 46ch;
}
.footer__col { display: flex; flex-direction: column; gap: .55rem; }
.footer__label {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: .7rem; margin-bottom: .3rem; border-bottom: 1px solid var(--rule);
}
.footer__col a {
  font-family: var(--mono); font-size: .74rem; color: var(--ink-dim);
  overflow-wrap: anywhere; transition: color .2s;
}
.footer__col a:hover { color: var(--oxide-lit); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  padding-block: 1.4rem 2.5rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .64rem; color: var(--ink-faint);
}
.footer__legal { max-width: 76ch; line-height: 1.7; }

/* ============================================================
   HOME — intro, numeri, gravita', TikTok
   ============================================================ */
.intro { padding-block: clamp(2.5rem, 5vw, 4rem); }
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 860px) { .intro__grid { grid-template-columns: 1fr; } }
.intro__text { font-size: 1.06rem; line-height: 1.8; color: var(--ink-dim); max-width: 58ch; text-wrap: pretty; }
.intro__link {
  display: inline-block; margin-top: 1.2rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oxide-lit);
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
}
.intro__link:hover { border-bottom-color: var(--oxide); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.stat { background: var(--paper); padding: .9rem 1rem; }
.stat__n { display: block; font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--ink); }
.stat__l { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: .35rem; }

.sevbars { display: flex; flex-direction: column; gap: .55rem; }
.sevbar { display: grid; grid-template-columns: 5.6rem 1fr 1.6rem; gap: .7rem; align-items: center; }
.sevbar__track { height: 4px; background: var(--rule-soft); }
.sevbar__fill { display: block; height: 100%; }
.sevbar__fill--critical { background: var(--sev-critical); }
.sevbar__fill--high { background: var(--sev-high); }
.sevbar__fill--medium { background: var(--sev-medium); }
.sevbar__fill--low { background: var(--sev-low); }
.sevbar__n { font-family: var(--mono); font-size: .72rem; color: var(--ink-dim); text-align: right; }
@media (max-width: 420px) { .sevbar { grid-template-columns: 5rem 1fr 1.4rem; gap: .5rem; } }

.follow { padding-block: clamp(2rem, 4vw, 3rem); }
.follow__inner {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
  align-items: center; justify-content: space-between;
  padding: clamp(1.6rem, 4vw, 2.5rem);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--oxide);
  background: radial-gradient(ellipse 60% 120% at 15% 50%, rgba(194,65,12,.10), transparent 70%), var(--paper-2);
}
.follow__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.05; margin-top: .3rem; }
.follow__body { font-size: .95rem; color: var(--ink-dim); margin-top: .5rem; max-width: 48ch; }

/* — invito a leggere nelle schede d'archivio — */
.entry__summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry__more {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oxide-lit);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, transform .25s;
}
.entry:hover .entry__more { border-bottom-color: var(--oxide); transform: translateX(3px); }

/* ============================================================
   TESTATA — occhiello, riga dati, pull-quote, sfondo video
   ============================================================ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.eyebrow__topic {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oxide-lit);
  border-left: 2px solid var(--oxide);
  padding-left: .6rem;
}

/* riga dati sotto la firma, come i quotidiani serious */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  padding: .9rem 0;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.article__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.article__meta span::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--violet);
  border-radius: 50%;
  flex-shrink: 0;
}

/* pull-quote: la frase che il lettore ricorda */
.prose blockquote.pull {
  border-left: 0;
  padding: 1.4rem 0 1.4rem 2rem;
  margin-block: 2.4rem;
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.prose blockquote.pull::before {
  content: "";
  position: absolute;
  left: 0; top: 1.4rem; bottom: 1.4rem;
  width: 3px;
  background: linear-gradient(180deg, var(--oxide), var(--violet));
}
.prose blockquote.pull p { margin: 0; }


/* ============================================================
   BLOCCHI VISIVI NEL CORPO — spezzano il muro di testo
   stat / timeline / flow + figura schema.
   Regola: escono dalla misura di lettura, cosi' l'occhio si stacca.
   ============================================================ */

.figure--schema,
.stat,
.tl,
.flow {
  margin: 2.6rem 0;
  max-width: min(100%, 52rem);
}

/* — Figura: lo schema dell'attacco — */
.figure {
  margin: 2.6rem 0;
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.figure__cap {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 0.6rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--rule);
}

/* — Stat: il numero che colpisce — */
.stat {
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
.stat--n2 { grid-template-columns: repeat(2, 1fr); }
.stat--n3 { grid-template-columns: repeat(3, 1fr); }
.stat__item {
  background: var(--paper-2);
  padding: 1.4rem 1.3rem;
}
.stat__val {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 1;
  color: var(--oxide-lit);
  letter-spacing: -0.02em;
}
.stat__lab {
  font-family: var(--body);
  font-size: 0.94rem;
  color: var(--ink);
  margin-top: 0.5rem;
  line-height: 1.35;
}
.stat__note {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
  line-height: 1.45;
}

/* — Timeline: la cronologia — */
.tl {
  list-style: none;
  padding: 0;
  border-left: 2px solid var(--rule);
}
.tl__item {
  position: relative;
  padding: 0 0 1.7rem 1.6rem;
}
.tl__item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0.45rem;
  width: 10px;
  height: 10px;
  background: var(--oxide);
  border: 2px solid var(--paper);
  border-radius: 50%;
}
.tl__item:last-child { padding-bottom: 0; }
.tl__when {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxide-lit);
}
.tl__what {
  font-family: var(--display);
  font-size: 1.06rem;
  color: var(--ink);
  margin-top: 0.24rem;
}
.tl__txt {
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--ink-dim);
  margin: 0.35rem 0 0;
  line-height: 1.55;
}

/* — Flow: la catena d'attacco — */
.flow {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
}
.flow__step {
  background: var(--paper-2);
  display: flex;
  gap: 1rem;
  padding: 1rem 1.2rem;
  align-items: baseline;
}
.flow__n {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--oxide);
  flex: 0 0 auto;
}
.flow__t {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.flow__note {
  font-family: var(--body);
  font-size: 0.88rem;
  color: var(--ink-dim);
  margin-top: 0.25rem;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .stat--n2,
  .stat--n3 { grid-template-columns: 1fr; }
  .figure--schema,
  .stat,
  .tl,
  .flow { margin: 2rem 0; }
}

@media print {
  .stat, .tl, .flow, .figure img { border-color: #999; }
}

/* — Schermi molto stretti (<=374px: iPhone SE 1a gen, Android piccoli) —
   Il ticker e' nowrap + overflow:hidden: sotto i 375px "Threat feed attivo" +
   l'orologio chiedono ~306px e ne hanno 280, quindi l'orologio veniva TAGLIATO a meta'.
   Stessa strategia gia' usata a 720px per le voci 3 e 4: si lascia cadere il meno
   importante. Resta il segnale che conta, "● Threat feed attivo". */
@media (max-width: 374px) {
  /* ticker: mostra tutti gli item nel marquee */
}

/* — "Aggiornato il": la policy di correzione dev'essere visibile, non dichiarata e basta — */
.article__meta .upd { color: var(--signal); }

/* ============================================================
   Tabelle dati — CVE watch, Metodologia (aggiunte upgrade 2026-07)
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
.datatable { width: 100%; border-collapse: collapse; font-family: var(--mono);
  font-size: .82rem; line-height: 1.4; }
.datatable th, .datatable td { text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.datatable thead th { color: var(--ink-faint); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--paper); }
.datatable tbody tr:hover { background: var(--paper-2); }
.datatable a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--rule); }
.datatable a:hover { text-decoration-color: var(--oxide); }
.datatable th[scope="row"] a { color: var(--oxide-lit); }
.datatable .cw-desc { color: var(--ink-dim); font-family: var(--body); }
.datatable .sev { font-size: .68rem; }
.cw-st { display: inline-block; font-size: .66rem; font-weight: 700; padding: .12rem .45rem;
  border-radius: 3px; border: 1px solid; white-space: nowrap; text-transform: uppercase;
  letter-spacing: .03em; }
.cw-st--ok { color: var(--cyan-lit); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
.cw-st--warn { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 55%, transparent); }
.cw-note { color: var(--ink-faint); font-size: .86rem; border-left: 2px solid var(--rule);
  padding-left: 1rem; margin-top: 1.75rem; }

/* Newsletter */
.news-form { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.25rem 0; }
.news-form input[type="email"] { flex: 1 1 16rem; background: var(--paper-2);
  border: 1px solid var(--rule); color: var(--ink); padding: .7rem .9rem; border-radius: 6px;
  font-family: var(--mono); font-size: .9rem; }
.news-form button { background: var(--oxide); color: #fff; border: 0; padding: .7rem 1.3rem;
  border-radius: 6px; font-weight: 700; cursor: pointer; font-family: var(--display); }
.news-form button:hover { background: var(--oxide-lit); }
.feed-list { list-style: none; padding: 0; display: grid; gap: .5rem; margin: 1.25rem 0; }
.feed-list a { font-family: var(--mono); font-size: .88rem; }

/* Language switcher (IT / EN / ES) — upgrade 2026-07 */
.langswitch { display: inline-flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.masthead__nav .lang { line-height: 1; }
.masthead__nav .lang--cur { color: var(--signal); cursor: default;
  border-color: color-mix(in srgb, var(--signal) 60%, transparent);
  background: color-mix(in srgb, var(--signal) 12%, transparent); }
.masthead__nav .lang--cur:hover { color: var(--signal); }

/* Pagine di testo (metodologia, newsletter) — impaginazione coerente col sito */
.textpage { padding-block: clamp(2rem, 5vw, 4rem); }
.textpage__head { max-width: var(--measure); margin-bottom: 2.6rem; }
.textpage__head .article__title { margin-bottom: 0; }
.textpage__body { max-width: var(--measure); }
.textpage__body .lede { font-size: 1.2rem; line-height: 1.6; color: var(--ink-dim);
  max-width: 56ch; margin-bottom: 1.8rem; }
.textpage__body h2 { border-top: 1px solid var(--rule); padding-top: .85em; margin-top: 2.4em;
  font-family: var(--display); font-weight: 400; }
.textpage__body h2::before { display: none; }
.feed-list li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.feed-url { color: var(--ink-faint); font-family: var(--mono); font-size: .78rem; }

/* ============================================================
   Barra temi + menu a tendina (upgrade 2026-07)
   ============================================================ */
.topicnav { border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  background: var(--paper); font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; }
.topicnav__inner { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.topicnav__inner > a, .topicnav__parent { color: var(--ink-dim); padding: .8rem 1rem; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
  display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.topicnav__inner > a:hover, .topicnav__parent:hover,
.topicnav__inner > a:focus-visible, .topicnav__parent:focus-visible { color: var(--ink); border-bottom-color: var(--oxide); }
.topicnav__item { position: relative; display: inline-flex; flex-shrink: 0; }
.topicnav__menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--paper-2);
  border: 1px solid var(--rule); display: none; flex-direction: column; z-index: 40;
  box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.topicnav__item:hover .topicnav__menu, .topicnav__item:focus-within .topicnav__menu { display: flex; }
.topicnav__menu a { color: var(--ink-dim); padding: .7rem 1rem; white-space: nowrap;
  border-bottom: 1px solid var(--rule-soft); text-transform: none; letter-spacing: normal; font-size: .8rem; }
.topicnav__menu a:first-child { color: var(--ink); font-weight: 700; }
.topicnav__menu a:hover { color: var(--ink); background: var(--paper-3); }
.caret { font-size: .8em; opacity: .7; }

/* Blocco fonti + FAQ nelle pagine tema */
.textpage__sources { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  max-width: var(--measure); }
.src-list { list-style: none; padding: 0; display: grid; gap: .5rem; margin: .8rem 0 1.2rem; }
.src-list a { font-family: var(--mono); font-size: .85rem; }
.textpage__sources .upd { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }
.faq { margin-top: .5em; }
.faq dt { font-weight: 600; color: var(--ink-strong); margin-top: 1.1em; }
.faq dd { margin: .3em 0 0; color: var(--ink-dim); }

/* Pagine-sezione (stile index) */
.topic-head { padding-block: clamp(2.5rem,6vw,4.5rem) 1.5rem; }
.topic-head .hero__title { margin-bottom: 1rem; }
.topic-head .hero__standfirst { margin-bottom: 0; }
.topic-chips { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.6rem; }
.topic-chip { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .45rem .9rem; border: 1px solid var(--rule); border-radius: 100px; color: var(--ink-dim);
  transition: color .2s, border-color .2s; }
.topic-chip:hover { border-color: var(--oxide); color: var(--ink); }
.topic-about { padding-block: clamp(3rem,7vw,5rem); }
.topic-about .section-head { margin-bottom: 2rem; }
.topic-prose { max-width: var(--measure); }
.topic-empty { color: var(--ink-faint); font-family: var(--mono); font-size: .9rem; padding: 1.5rem 0; }
@media (max-width: 900px) {
  .topicnav__inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topicnav__inner::-webkit-scrollbar { display: none; }
}

/* Sezioni: hero + layout a tutta larghezza (upgrade) */
.topic-hero .crumb { margin-bottom: 1.1rem; }
.topic-hero .hero__text { min-width: 0; }
.topic-layout { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.topic-layout .textpage__sources { margin-top: 0; border-top: 0; padding-top: 0; }
.topic-layout > * { min-width: 0; }
@media (max-width: 900px) { .topic-layout { grid-template-columns: 1fr; } }

/* ============================================================
   Pagina Metodologia (restyle)
   ============================================================ */
.method-hero { padding-block: clamp(2.5rem,6vw,4.5rem) 1.5rem; }
.method-hero .hero__title { margin-bottom: 1rem; }
.method-hero .hero__standfirst { margin-bottom: 0; max-width: 62ch; }
.method-steps { padding-block: .5rem 2rem; }
.vsteps { list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: 1rem; }
.vsteps li { border: 1px solid var(--rule); border-radius: 10px; padding: 1.1rem 1.2rem;
  display: flex; gap: .85rem; background: var(--paper-2); align-items: flex-start; }
.vstep__n { font-family: var(--mono); font-weight: 700; color: var(--oxide-lit); font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.vsteps strong { display: block; margin-bottom: .35rem; color: var(--ink); font-family: var(--display); }
.vsteps p { color: var(--ink-dim); font-size: .88rem; line-height: 1.5; margin: 0; }
.method-body { padding-block: 1rem 1.5rem; }
.method-body .prose { max-width: var(--measure); }
.method-sources { padding-block: 1rem 2rem; }
.method-sources .method-intro { color: var(--ink-dim); margin: 1rem 0; max-width: var(--measure); }
.method-foot { padding-block: 1rem clamp(3rem,7vw,5rem); }
.method-callout { border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  background: color-mix(in srgb, var(--signal) 8%, transparent); border-radius: 12px;
  padding: 1.5rem 1.8rem; max-width: var(--measure); }
.method-callout__label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em;
  font-size: .68rem; color: var(--signal); margin-bottom: .6rem; font-weight: 700; }
.method-callout p:last-child { margin: 0; color: var(--ink); }
.method-contact { margin-top: 1.8rem; color: var(--ink-dim); max-width: var(--measure); }

/* ============================================================
   THEMES — selezionabili dall'utente (data-theme su <html>)
   Notte = default. Ogni colore è già una variabile: qui le rimappiamo.
   ============================================================ */
:root, html[data-theme="dark"] { --masthead-bg: rgba(20,20,26,.82); --fx-dot: 255,122,61; --fx-alpha: .55; color-scheme: dark; }

html[data-theme="light"] {
  --paper:#f6f3ec; --paper-2:#efeadf; --paper-3:#e5dfd0; --rule:#d6cfbe; --rule-soft:#e4ded0;
  --ink:#1a1922; --ink-dim:#4c4842; --ink-faint:#5b564a; --signal:#8a5a00; --ink-strong:#05040a;
  --oxide:#b23c0a; --oxide-lit:#a8380a; --oxide-deep:#8f2f0d; --cyan:#0b6b82; --cyan-lit:#155e75; --sev-critical:#b01234; --sev-high:#a8380a; --sev-medium:#92600a;
  --masthead-bg: rgba(246,243,236,.85); --fx-dot: 200,66,26; --fx-alpha: .5; color-scheme: light;
}
html[data-theme="terminal"] {
  --paper:#05070a; --paper-2:#0a0e14; --paper-3:#0f151d; --rule:#153029; --rule-soft:#0f1f1b;
  --ink:#d7ffe9; --ink-dim:#84e2b8; --ink-faint:#4f8f77; --ink-strong:#ffffff;
  --oxide:#2dd4bf; --oxide-lit:#5eead4; --oxide-deep:#0f766e;
  --masthead-bg: rgba(5,7,10,.85); --fx-dot: 94,234,212; --fx-alpha: .6; color-scheme: dark;
}
.masthead { background: var(--masthead-bg); transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .3s, border-color .3s; will-change: transform; }

/* Selettore tema, iniettato nella masthead da main.js */
.themectl { position: relative; display: inline-flex; }
.themectl__btn {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); background: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: .3em .6em; cursor: pointer; display: inline-flex; align-items: center; gap: .45em;
  transition: color .25s, border-color .25s;
}
.themectl__btn:hover { color: var(--ink); border-color: var(--oxide); }
.themectl__btn .dot { width: .62em; height: .62em; border-radius: 50%; background: var(--oxide-lit); box-shadow: 0 0 0 1px var(--rule); }
.themectl__menu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 200; min-width: 9.5rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px;
  padding: .3rem; display: grid; gap: .1rem;
  opacity: 0; transform: translateY(-.4rem) scale(.98); transform-origin: top right;
  pointer-events: none; transition: opacity .2s, transform .2s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.7);
}
.themectl.open .themectl__menu { opacity: 1; transform: none; pointer-events: auto; }
.themectl__opt {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); background: none; border: 0; border-radius: 2px; padding: .5em .6em; cursor: pointer;
  transition: background .2s, color .2s;
}
.themectl__opt:hover { background: var(--paper-3); color: var(--ink); }
.themectl__opt[aria-checked="true"] { color: var(--ink); }
.themectl__opt[aria-checked="true"]::after { content: "●"; margin-left: auto; color: var(--oxide-lit); font-size: .8em; }
.themectl__sw { width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid var(--rule); flex: none; }

/* ============================================================
   ANIMATION LAYER (sito-animato) — vanilla, zero-dip, solo transform/opacity
   Gating: html.js + prefers-reduced-motion. Senza JS o con reduce → tutto visibile.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal], html.js .rv {
    opacity: 0; transform: translateY(1.5rem);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
    transition-delay: calc(var(--i, 0) * .07s); will-change: opacity, transform;
  }
  html.js [data-reveal].is-in, html.js .rv.is-in { opacity: 1; transform: none; }
  html.js .rv-l { transform: translateX(-1.6rem); }
  html.js .rv-r { transform: translateX(1.6rem); }
  html.js .rv-s { transform: translateY(0) scale(.96); }

  /* card d'archivio: lift premium */
  html.js .entry { transition: background .3s, transform .35s cubic-bezier(.16,1,.3,1); }
  html.js .entry:hover { transform: translateY(-3px); }

  /* underline animata nel nav */
  html.js .masthead__nav a { position: relative; border-bottom-color: transparent !important; }
  html.js .masthead__nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
    background: var(--oxide); transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.16,1,.3,1);
  }
  html.js .masthead__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

  .masthead.nav-hidden { transform: translateY(-100%); }
}

/* Campo animato dietro l'hero (home + sezioni) */
.hero, .topic-hero, .method-hero { position: relative; isolation: isolate; }
.hero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(130% 115% at 82% 22%, #000 26%, transparent 74%);
          mask-image: radial-gradient(130% 115% at 82% 22%, #000 26%, transparent 74%); }
.hero__fx canvas { display: block; width: 100%; height: 100%; }
.hero > *:not(.hero__fx), .topic-hero > *:not(.hero__fx), .method-hero > *:not(.hero__fx) { position: relative; z-index: 1; }

/* Cursore accento (solo desktop, iniettato da JS; il cursore nativo resta) */
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(var(--fx-dot), .8); border-radius: 50%; z-index: 9999;
  pointer-events: none; mix-blend-mode: screen; opacity: 0;
  transition: width .25s cubic-bezier(.16,1,.3,1), height .25s cubic-bezier(.16,1,.3,1),
              margin .25s, background-color .25s, border-color .25s, opacity .3s;
}
html.cursor-ready .cursor-ring { opacity: 1; }
html.cursor-hot .cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(var(--fx-dot), .12); }

/* prefers-reduced-motion: niente cursore/canvas/reveal, solo contenuto */
@media (prefers-reduced-motion: reduce) {
  .cursor-ring { display: none; }
  .hero__fx { display: none; }
  html { scroll-behavior: auto; }
}
@media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } }

/* selettore tema: compatto su mobile (solo pallino), non si comprime */
.themectl { flex-shrink: 0; margin-left: .9rem; align-self: center; }
@media (max-width: 560px) { .themectl__lbl { display: none; } .themectl { margin-left: .5rem; } }

/* ============================================================
   Ritocchi post-feedback (22/07): hero canvas visibile, stat vivi
   ============================================================ */
/* hero: il campo di punti prima era mascherato dietro la cover → invisibile. Ora copre l'area aperta. */
.hero__fx {
  -webkit-mask-image: radial-gradient(155% 135% at 66% 32%, #000 60%, transparent 100%);
          mask-image: radial-gradient(155% 135% at 66% 32%, #000 60%, transparent 100%);
  opacity: .95;
}
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal], html.js .rv { transform: translateY(2.1rem); }
}

/* "A colpo d'occhio": griglia ridisegnata (scoped a .stats, non tocca i blocchi ::: stat degli articoli) */
.stats { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
.stats .stat { background: var(--paper-2); padding: 1.15rem 1.25rem 1.25rem; position: relative; transition: background .35s cubic-bezier(.16,1,.3,1); }
.stats .stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--oxide); transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.stats .stat:hover { background: var(--paper-3); }
.stats .stat:hover::before { transform: scaleY(1); }
.stats .stat__n { font-size: clamp(2.1rem, 4.4vw, 2.9rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stats .stat__l { color: var(--ink-dim); }

/* barre severità: crescono entrando in vista */
html.js .sevbar__fill { transition: width 1.15s cubic-bezier(.16,1,.3,1); }

/* ============================================================
   REDESIGN MAGAZINE (anima-il-web) — palette di brand, tema-aware
   ============================================================ */
/* ---- Griglia editoriale ---- */
.archive { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(1.1rem, 2.4vw, 1.8rem); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.3rem, 2.6vw, 2.1rem); }
.section-head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.45rem, 3vw, 2.15rem); letter-spacing: -.02em; position: relative; padding-bottom: .55rem; }
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 2.4rem; background: var(--oxide); transition: width .6s cubic-bezier(.16,1,.3,1); }
html.js .section-head.is-in h2::after { width: 4.4rem; }
.section-head .count { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

/* ---- Card premium (sovrascrive lo stile a lista) ---- */
.entry { display: flex; flex-direction: column; grid-template-columns: none; gap: 0; padding: 0; border: 1px solid var(--rule); border-radius: 11px; overflow: hidden; background: var(--paper-2); position: relative; isolation: isolate; transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .4s; transform-style: preserve-3d; }
.entry::before { content: none; }
@media (max-width: 760px) { .entry { grid-template-columns: none; } }
.entry:hover { border-color: color-mix(in srgb, var(--oxide) 42%, var(--rule)); box-shadow: 0 26px 50px -30px rgba(0,0,0,.7); }
.entry__media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--paper-3); }
.entry__thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s; filter: saturate(.9) contrast(1.02); }
.entry:hover .entry__thumb { transform: scale(1.07); filter: saturate(1.06) contrast(1.05); }
.entry__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .45s; background: radial-gradient(120% 85% at 50% 0%, rgba(var(--fx-dot), .18), transparent 62%); }
.entry:hover .entry__glow { opacity: 1; }
.threat { position: absolute; left: .7rem; top: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .45em; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--paper) 68%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: 2px; padding: .34em .55em; }
.threat i { width: .5em; height: .5em; border-radius: 50%; background: var(--sev-medium); box-shadow: 0 0 8px currentColor; }
.threat--critical i { background: var(--sev-critical); } .threat--high i { background: var(--sev-high); }
.threat--medium i { background: var(--sev-medium); } .threat--low i { background: var(--sev-low); }
.entry__body { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.15rem 1.1rem; flex: 1; }
.entry__meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.chip { font-family: var(--mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--oxide-lit); border: 1px solid color-mix(in srgb, var(--oxide) 45%, transparent); border-radius: 2px; padding: .34em .6em; transition: background .25s, color .25s, border-color .25s; }
.chip:hover { background: var(--oxide); color: #fff; border-color: var(--oxide); }
.entry__rt { font-family: var(--mono); font-size: .62rem; letter-spacing: .07em; color: var(--ink-faint); margin-left: auto; }
.entry__title { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; }
.entry__title a { color: var(--ink); transition: color .25s; }
.entry:hover .entry__title a { color: var(--oxide-lit); }
.entry__summary { font-size: .92rem; line-height: 1.55; color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.entry__foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--rule-soft); }
.entry__date { font-family: var(--mono); font-size: .62rem; color: var(--ink-faint); letter-spacing: .06em; padding: 0; }
.entry__more { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); transition: color .25s, transform .25s; }
.entry:hover .entry__more { color: var(--oxide-lit); transform: translateX(3px); }

/* ---- Signature: rail orizzontale 'Sotto i riflettori' ---- */
.rail { padding-block: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--rule-soft); }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 33%); gap: clamp(1rem, 2vw, 1.5rem); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track .entry { scroll-snap-align: start; }
@media (max-width: 620px) { .rail__track { grid-auto-columns: minmax(82%, 84%); } }

/* ---- Hero cinematografico ---- */
.hero { padding-block: clamp(3.2rem, 7vw, 6.5rem); grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); align-items: center; }
.hero__title { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -.04em; line-height: .98; }
.hero__standfirst { font-size: clamp(1.02rem, 1.5vw, 1.3rem); max-width: 54ch; }
.hero__art { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 44px 90px -46px rgba(0,0,0,.75); align-self: stretch; }
.hero__art::after { content: none; }
.hero__art img { transition: transform .9s cubic-bezier(.16,1,.3,1); will-change: transform; }
.hero__art:hover img { transform: scale(1.05); }
/* kinetic title: parole in reveal */
html.js .hero__title .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { html.js .hero__title .w { opacity: 0; transform: translateY(1.1em) rotate(2deg); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--w) * 55ms); } html.js .hero__title.is-in .w { opacity: 1; transform: none; } }

/* ---- Articolo: header più editoriale + fonti ---- */
.article__title { font-size: clamp(2.1rem, 5.2vw, 4rem); letter-spacing: -.035em; line-height: 1.02; }
.eyebrow { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.eyebrow__topic { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oxide-lit); }
.sources { border: 1px solid var(--rule); border-radius: 8px; padding: clamp(1.1rem, 2.4vw, 1.5rem); background: var(--paper-2); }

/* ---- Footer un filo più ricco ---- */
.footer { border-top: 1px solid var(--rule); }

/* ============================================================
   Copertina di transizione a ogni apertura pagina (multilingua)
   CSS-driven: senza JS o con reduce resta nascosta (mai trappola)
   ============================================================ */
.cover{position:fixed;inset:0;z-index:9998;background:var(--paper);display:grid;place-items:center;pointer-events:none;transform:translateY(-101%)}
.cover__mark{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,5vw,3.2rem);letter-spacing:-.03em;opacity:0}
.cover__mark em{color:var(--oxide-lit);font-style:italic}
@media (prefers-reduced-motion: no-preference){
  html.js .cover{transform:none;animation:coverOut .85s cubic-bezier(.76,0,.24,1) .55s forwards}
  html.js .cover__mark{animation:coverMark .6s ease .05s forwards}
  html.js.leaving .cover{animation:coverIn .45s cubic-bezier(.76,0,.24,1) forwards;pointer-events:all}
  html.js.leaving .cover__mark{animation:none;opacity:1}
}
@keyframes coverMark{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes coverOut{to{transform:translateY(-101%)}}
@keyframes coverIn{from{transform:translateY(101%)}to{transform:translateY(0)}}

/* ============================================================
   HOMEPAGE CINEMATICA (.hx-*) — flythrough di nodi + presentazione
   Sezioni semi-trasparenti: lo zoom resta visibile dietro il contenuto
   ============================================================ */
.hx-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.hx-hero{position:relative;z-index:2;min-height:88svh;display:flex;flex-direction:column;justify-content:center;max-width:1200px;margin:0 auto;padding:4rem var(--gutter) 3.5rem}
.hx-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oxide-lit);margin-bottom:1.1rem}
.hx-h{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,8.5vw,6.4rem);line-height:.92;letter-spacing:-.045em;max-width:15ch;text-wrap:balance}
.hx-h .l{display:block;overflow:hidden}
.hx-h em{font-style:italic;color:var(--oxide-lit)}
.hx-sub{font-size:clamp(1rem,1.5vw,1.25rem);color:var(--ink-dim);max-width:44ch;margin-top:1.3rem}
.hx-cue{margin-top:2.2rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:.6rem}
.hx-cue::before{content:"";width:34px;height:1px;background:var(--oxide);animation:hxcue 2s infinite}
@keyframes hxcue{0%,100%{transform:scaleX(.4);opacity:.5}50%{transform:scaleX(1);opacity:1}}
.hx-sec{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:clamp(2.4rem,6vw,4.5rem) var(--gutter);border-top:1px solid var(--rule);background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hx-manifesto{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,4vw,3rem);line-height:1.08;letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
.hx-manifesto b{color:var(--oxide-lit);font-weight:600}
.hx-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.8rem}
.hx-head h2{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,3vw,2.1rem);letter-spacing:-.02em}
.hx-head span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.hx-feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.hx-feat{background:var(--paper-2);padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;min-height:148px}
.hx-feat b{font-family:var(--mono);font-size:.62rem;color:var(--oxide);font-weight:400}
.hx-feat strong{font-family:var(--display);font-weight:600;font-size:1.15rem}
.hx-feat span{font-size:.86rem;color:var(--ink-dim);line-height:1.5}
.hx-data{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.5rem)}
@media(max-width:640px){.hx-data{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
.hx-stat{border-left:1px solid var(--rule);padding-left:1rem}
.hx-stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hx-stat span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-top:.5rem}
.hx-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr));gap:clamp(.8rem,1.8vw,1.2rem)}
.hx-cat{position:relative;border:1px solid var(--rule);border-radius:10px;padding:1.5rem 1.4rem;background:var(--paper-2);display:flex;flex-direction:column;gap:.5rem;min-height:150px;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s;overflow:hidden}
.hx-cat:hover{transform:translateY(-4px);border-color:rgba(226,82,28,.5);background:var(--paper-3)}
.hx-cat::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--oxide);transition:width .5s cubic-bezier(.16,1,.3,1)}
.hx-cat:hover::after{width:100%}
.hx-cat b{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--oxide-lit);font-weight:400}
.hx-cat strong{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.05;letter-spacing:-.02em;margin-top:auto}
.hx-cat span{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint)}
.hx-cta{position:relative;z-index:2;text-align:center;padding:clamp(4rem,9vw,6.5rem) var(--gutter);border-top:1px solid var(--rule)}
.hx-cta h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,6vw,3.8rem);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.hx-cta em{font-style:italic;color:var(--oxide-lit)}
.hx-cta a{display:inline-block;margin-top:1.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--oxide);color:var(--oxide-lit);padding:.95em 1.9em;border-radius:3px;transition:background .3s,color .3s}
.hx-cta a:hover{background:var(--oxide);color:#fff}
@media(max-width:600px){.hx-stat{border-left:0;padding-left:0}.hx-hero{min-height:82svh}}

/* ============================================================
   FIX 2026-07-23 — footer visibile + componenti chiave + mobile
   Layer autorevole (in fondo, vince la cascata). Solo z-index/allineamento
   e regole mobile: nessun impatto sul contenuto o sullo sfondo a nodi.
   ============================================================ */

/* --- 1. STACKING: canvas fisso sotto, interfaccia sopra.
       QUI si risolve il footer che "non si vedeva": era coperto dal
       canvas fisso (.hx-canvas, z-index:0). Ora il footer sta sopra. --- */
/* NB: l'elemento e' <canvas id="hx-canvas">, quindi serve il selettore #id
   (le vecchie regole .hx-canvas per CLASSE non lo colpivano: il canvas restava
   nel flusso a 100vh e spingeva l'hero sotto la piega). */
#hx-canvas{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
.no-gl #hx-canvas, html:not(.js) #hx-canvas{ display:none; }
.hx-canvas{ z-index:0; }
.masthead{ z-index:120; }
.topicnav{ position:relative; z-index:110; }
main#main{ position:relative; z-index:1; }
body > .shell{ position:relative; z-index:5; }        /* fascia ticker */
.progress{ z-index:130; }
.cover{ z-index:9990; }
.footer{ position:relative; z-index:5; background:var(--paper); }

/* --- 2. SHELL --- */
.shell{ width:100%; }

/* --- 3. MASTHEAD: allineamento verticale corretto (era baseline) --- */
.masthead__inner{ align-items:center; min-height:58px; gap:clamp(.8rem,3vw,2.5rem); }
.masthead__nav{ align-items:center; }
.masthead__tagline{ align-self:center; }

/* --- 4. TOPICNAV: barra netta; su mobile scorre in orizzontale, niente wrap --- */
.topicnav__inner{ align-items:stretch; }
@media (max-width:900px){
  .topicnav{ -webkit-overflow-scrolling:touch; }
  .topicnav__inner{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .topicnav__inner::-webkit-scrollbar{ display:none; }
  .topicnav__menu{ display:none !important; }         /* niente tendine in scroll touch */
  .topicnav__inner > a, .topicnav__parent{ padding:.72rem .85rem; }
}

/* --- 5. Micro-rifiniture --- */
:focus-visible{ outline:2px solid var(--oxide-lit); outline-offset:3px; border-radius:2px; }
.hx-stat b{ font-variant-numeric:tabular-nums; }

/* --- 6. MOBILE: nessuno sfondamento orizzontale --- */
@media (max-width:420px){
  .masthead__inner{ min-height:52px; }
}

/* ============================================================
   FIX 2026-07-24 — Pagina tema/sezione: hero "Dossier in evidenza"
   La colonna destra non e' piu' il diagramma grezzo illeggibile:
   l'immagine fa da fondale sotto un gradiente, il titolo del dossier si legge.
   ============================================================ */
.topic-feature{ position:relative; display:block; overflow:hidden; border:1px solid var(--rule);
  border-radius:14px; aspect-ratio:4/3; background:var(--paper-2); isolation:isolate;
  transition:border-color .4s, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.topic-feature:hover{ border-color:var(--oxide); transform:translateY(-4px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85); }
.topic-feature__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) brightness(.6); transition:transform 1.2s cubic-bezier(.22,1,.36,1), filter .6s; }
.topic-feature:hover .topic-feature__img{ transform:scale(1.05); filter:saturate(.95) brightness(.72); }
.topic-feature__grad{ position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(11,11,15,.08) 0%, rgba(11,11,15,.5) 42%, rgba(11,11,15,.95) 100%); }
.topic-feature .threat{ left:.9rem; top:.9rem; }
.topic-feature__body{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(1.1rem,2.4vw,1.7rem); display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.topic-feature__kick{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oxide-lit); }
.topic-feature__title{ font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,1.7vw,1.55rem);
  line-height:1.1; letter-spacing:-.02em; color:#f4efe4; text-wrap:balance; }
.topic-feature__cta{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:#cfc9bd; transition:color .25s, transform .25s; }
.topic-feature:hover .topic-feature__cta{ color:var(--oxide-lit); transform:translateX(4px); }
@media (max-width:900px){ .topic-feature{ aspect-ratio:16/10; } }

/* hero-sezione: reticolo di punti piu' discreto, piu' respiro verticale */
.topic-hero .hero__fx{ opacity:.5; }
.topic-hero{ padding-block: clamp(2.6rem,6vw,4.5rem) clamp(2rem,4vw,3rem); }

/* La regola .hero di riga ~1804 reimposta grid-template-columns fuori da media
   query e annullava il collasso mobile (l'hero restava a 2 colonne su telefono).
   Essendo ultimi nella cascata, ripristiniamo la colonna singola su mobile. */
@media (max-width:900px){
  .hero, .topic-hero, .method-hero{ grid-template-columns:1fr; }
  .topic-feature{ aspect-ratio:16/9; max-width:600px; }
}

/* ============================================================
   REDESIGN 2026-07-24 — Header + Sidebar/menu + animazioni (stile reputationup)
   Mappato sui token HACK (paper/oxide/ink). Fonts e temi restano quelli HACK.
   ============================================================ */

/* --- neutralizza il vecchio reveal CSS: ora lo guida GSAP (o resta visibile) --- */
html.js [data-reveal]{ opacity:1; transform:none; animation:none; }

/* --- HEADER fisso in alto (sticky) --- */
.site-header{ position:sticky; top:0; z-index:120; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem clamp(1rem,4vw,2.4rem);
  background:linear-gradient(to bottom, color-mix(in srgb,var(--paper) 90%,transparent), color-mix(in srgb,var(--paper) 30%,transparent));
  -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--rule-soft); }
.site-header .logo{ font-family:var(--display); font-weight:700; font-size:1.4rem; letter-spacing:-.03em; white-space:nowrap; color:var(--ink); }
.site-header .logo em{ color:var(--oxide-lit); font-style:italic; }
.header-right{ display:flex; align-items:center; gap:clamp(.55rem,1.8vw,1.3rem); }
.site-header__tag{ font-family:var(--mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); border-left:1px solid var(--rule); padding-left:1rem; }
@media (max-width:820px){ .site-header__tag{ display:none; } }

/* theme toggle (ciclo dark/light/terminal) */
.theme-toggle{ display:inline-flex; align-items:center; gap:.5em; background:none; border:1px solid var(--rule);
  border-radius:100px; color:var(--ink-dim); font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.42em .8em; cursor:pointer; transition:border-color .3s,color .3s; }
.theme-toggle:hover{ border-color:var(--oxide); color:var(--ink); }
.theme-toggle__dot{ width:.55em; height:.55em; border-radius:50%; background:var(--oxide-lit); box-shadow:0 0 8px var(--oxide-lit); }
@media (max-width:520px){ .theme-toggle__label{ display:none; } .theme-toggle{ padding:.5em; } }

/* hamburger */
.menu-toggle{ display:flex; align-items:center; gap:.55rem; background:none; border:0; color:var(--ink); cursor:pointer;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; padding:.2rem; }
.menu-toggle__icon{ display:flex; flex-direction:column; gap:5px; }
.menu-toggle__icon i{ display:block; width:24px; height:2px; background:currentColor; transition:transform .4s,opacity .4s; }
.menu-toggle.is-open .menu-toggle__icon i:first-child{ transform:translateY(3.5px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__icon i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
@media (max-width:520px){ .menu-toggle__label{ display:none; } }

/* --- MENU overlay (la sidebar) --- */
.menu-container{ position:fixed; inset:0; z-index:200; display:flex; padding:clamp(.7rem,2vw,1.1rem);
  background:color-mix(in srgb, var(--paper) 55%, rgba(0,0,0,.6)); opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility .45s ease; }
.menu-container.is-open{ opacity:1; visibility:visible; }
.menu{ width:100%; height:100%; margin:auto; max-width:1400px; background:var(--paper); border:1px solid var(--rule);
  border-radius:16px; display:flex; overflow:hidden; transform:translateX(-108%);
  transition:transform .6s cubic-bezier(.76,0,.24,1); box-shadow:0 40px 120px -40px rgba(0,0,0,.8); }
.menu-container.is-open .menu{ transform:translateX(0); }
.menu-main{ flex:1; display:flex; flex-direction:column; justify-content:space-between; min-width:0;
  padding:clamp(1.4rem,4vw,3.4rem); }
.menu-kicker{ font-family:var(--mono); color:var(--ink-faint); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; }
.menu-nav{ display:flex; flex-direction:column; margin-block:auto; gap:.05rem; padding-block:1.4rem; }
.menu-item{ position:relative; left:-100px; opacity:0; padding:.22em 0; transition:left .3s,opacity .3s; }
.menu-item-link{ position:relative; display:inline-block; }
.menu-item-link a{ position:relative; z-index:2; display:inline-block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,4.2vw,2.9rem); line-height:1.06; letter-spacing:-.02em; color:var(--ink); padding:0 .12em; }
.menu-item:hover .menu-item-link a{ color:var(--paper); }
.bg-hover{ position:absolute; top:0; left:0; height:100%; width:0; background:var(--oxide); opacity:0; z-index:0;
  transition:opacity .3s; }
.menu-item:hover .bg-hover{ opacity:1; }
.menu-tag{ position:absolute; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--mono);
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:transparent; transition:color .3s; }
.menu-item:hover .menu-tag{ color:var(--ink-faint); }
.menu-bottom{ display:flex; gap:clamp(1.8rem,5vw,4rem); border-top:1px solid var(--rule); padding-top:1.5rem; flex-wrap:wrap; }
.menu-col{ display:flex; flex-direction:column; gap:.35rem; }
.menu-col__title{ font-family:var(--mono); color:var(--ink-faint); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:.3rem; }
.menu-link{ position:relative; width:max-content; color:var(--ink-dim); font-size:.92rem; transition:color .25s,transform .25s; }
.menu-link:hover{ color:var(--oxide-lit); transform:translateX(3px); }
.menu-sidebar{ width:62px; border-left:1px solid var(--rule); display:flex; align-items:flex-start; justify-content:center;
  padding-top:1.1rem; flex-shrink:0; }
.close-btn{ width:40px; height:40px; border:1px solid var(--rule); border-radius:50%; background:none; color:var(--ink);
  cursor:pointer; font-size:.9rem; transition:background .3s,transform .3s,color .3s; }
.close-btn:hover{ background:var(--oxide); color:#fff; transform:rotate(90deg); }
@media (max-width:640px){
  .menu-sidebar{ position:absolute; top:.6rem; right:.6rem; width:auto; border:0; padding:0; }
  .menu-main{ padding-top:3.2rem; }
}
.char{ display:inline-block; }

/* --- CURSORE personalizzato --- */
.cursor{ position:fixed; top:0; left:0; width:11px; height:11px; border-radius:50%; background:var(--oxide-lit);
  pointer-events:none; z-index:9997; opacity:0; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* --- TRANSIZIONE a sipario tra pagine --- */
.page-transition{ position:fixed; inset:0; z-index:9995; background:var(--oxide); transform:translateY(100%);
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.page-transition span{ font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,6vw,4rem);
  color:#0b0b0f; letter-spacing:-.03em; }
.page-transition em{ font-style:normal; }

/* --- TICKER marquee --- */
.ticker-wrap{ position:relative; z-index:5; overflow:hidden; background:var(--paper); border-bottom:1px solid var(--rule-soft); }
.ticker-wrap .ticker{ overflow:hidden; border:0; padding:0; display:block; }
.ticker__track{ display:inline-flex; align-items:center; white-space:nowrap; width:max-content; padding-block:.45rem;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.ticker__track > span{ padding-inline:1.6rem; border-right:1px solid var(--rule-soft); }
.ticker__track .live{ color:var(--oxide-lit); }
.ticker__track .live::before{ content:"● "; }

/* --- FOOTER wordmark gigante (scorre con lo scroll) --- */
.footer-wordmark{ overflow:hidden; border-top:1px solid var(--rule-soft); background:var(--paper); position:relative; z-index:5; }
.footer-wordmark span{ display:block; width:max-content; font-family:var(--display); font-weight:800;
  font-size:clamp(3rem,15vw,12rem); letter-spacing:-.04em; line-height:1; color:transparent;
  -webkit-text-stroke:1px var(--rule); white-space:nowrap; padding-block:.15em; }

/* reduced-motion: tutto visibile, niente sipario/cursore */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .page-transition, .cursor{ display:none; }
}

/* ============================================================
   FIX 2026-07-24b — spazio grigio nella griglia "passi" + scroll Lenis
   ============================================================ */
/* 3 card (Ricerca/Verifica/Pubblicazione) in una griglia auto-fill lasciavano
   una cella vuota grigia: auto-fit collassa le tracce vuote e le distribuisce. */
.hx-feats{ grid-template-columns:repeat(3,1fr); }
.hx-feats--4{ grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .hx-feats{ grid-template-columns:1fr; } .hx-feats--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .hx-feats--4{ grid-template-columns:1fr; } }
/* Lenis e scroll-behavior:smooth insieme = scroll a scatti. Con Lenis attivo
   (classe .lenis su <html>) si disattiva lo smooth nativo. */
html.lenis, html.lenis body{ scroll-behavior:auto; }
html.lenis{ height:auto; }

/* ============================================================
   STICKY CARDS 3D (sezione "come nasce un dossier") — stile reputationup
   Default: in flusso (fallback no-JS/reduced). Con .is-pinned: stack animato.
   ============================================================ */
.hx-steps-head{ padding-bottom:0; }
.sticky-cards{ position:relative; z-index:2; }
.sticky-cards.is-pinned{ height:100svh; overflow:hidden; perspective:1200px; }
.sticky-cards .card{ display:flex; width:min(92%,900px); margin:0 auto 1.2rem; padding:clamp(1.6rem,3vw,2.6rem);
  border-radius:18px; transform-origin:center bottom; overflow:hidden; text-decoration:none;
  box-shadow:0 30px 90px -40px rgba(0,0,0,.75); }
.sticky-cards.is-pinned .card{ position:absolute; top:50%; left:50%; margin:0;
  width:min(82vw,860px); height:min(60svh,540px); will-change:transform; }
.card .col{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem; min-width:0; }
.card .tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; opacity:.85; }
.card h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,4vw,3.2rem); line-height:1.02;
  letter-spacing:-.02em; margin-bottom:.6rem; }
.card p{ max-width:52ch; font-size:1rem; line-height:1.55; opacity:.92; }
.sticky-cards .card{ color:#fff; border:0; }
.sticky-cards .card .tag{ opacity:.9; }
.sticky-cards .card p{ opacity:1; }
.sticky-cards .card .card__link{ color:#fff; opacity:.95; }
#card-1{ background-color:#9a3412; background:linear-gradient(100deg, rgba(46,15,5,.82), rgba(46,15,5,.36) 52%, rgba(46,15,5,.08)), url(../img/cards/cybersecurity-nazionale.jpg) center/cover; z-index:7; }
#card-2{ background-color:#b91c1c; background:linear-gradient(100deg, rgba(55,8,8,.82), rgba(55,8,8,.36) 52%, rgba(55,8,8,.08)), url(../img/cards/malware-e-attacchi.jpg) center/cover; z-index:6; }
#card-3{ background-color:#6d28d9; background:linear-gradient(100deg, rgba(32,12,65,.82), rgba(32,12,65,.36) 52%, rgba(32,12,65,.08)), url(../img/cards/ransomware.jpg) center/cover; z-index:5; }
#card-4{ background-color:#155e75; background:linear-gradient(100deg, rgba(6,28,35,.82), rgba(6,28,35,.36) 52%, rgba(6,28,35,.08)), url(../img/cards/norme-e-adeguamenti.jpg) center/cover; z-index:4; }
#card-5{ background-color:#1d4ed8; background:linear-gradient(100deg, rgba(8,23,64,.82), rgba(8,23,64,.36) 52%, rgba(8,23,64,.08)), url(../img/cards/privacy-e-dati-personali.jpg) center/cover; z-index:3; }
#card-6{ background-color:#166534; background:linear-gradient(100deg, rgba(6,30,15,.82), rgba(6,30,15,.36) 52%, rgba(6,30,15,.08)), url(../img/cards/soluzioni-aziendali.jpg) center/cover; z-index:2; }
#card-7{ background-color:#be185d; background:linear-gradient(100deg, rgba(57,7,27,.82), rgba(57,7,27,.36) 52%, rgba(57,7,27,.08)), url(../img/cards/cultura-cyber.jpg) center/cover; z-index:1; }
@media (max-width:640px){
  .sticky-cards.is-pinned .card{ width:90vw; height:62svh; padding:1.5rem; }
  .card p{ font-size:.9rem; }
}

/* ── Cinematic article intro (2026-07) ── */
.article__hero{position:relative}
html.js .article__title{will-change:transform,clip-path}
@media (prefers-reduced-motion:reduce){
  .article__title,.article__hero .eyebrow,.article__standfirst,.article__hero .byline,.article__hero figure,.dossier-video{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important}
}

/* ── Footer wordmark: illuminazione + scorrimento cinetico (2026-07-24) ── */
.footer-wordmark span{ transition:color .6s ease, -webkit-text-stroke-color .6s ease, text-shadow .6s ease; will-change:transform; }
.footer-wordmark.lit span{ -webkit-text-stroke-color:var(--oxide-lit); color:color-mix(in srgb, var(--oxide) 16%, transparent); text-shadow:0 0 55px color-mix(in srgb, var(--oxide) 42%, transparent); }
.footer-wordmark:hover span{ color:var(--oxide-lit); -webkit-text-stroke-color:var(--oxide-lit); text-shadow:0 0 75px color-mix(in srgb, var(--oxide-lit) 55%, transparent); }
@media (prefers-reduced-motion:reduce){ .footer-wordmark span{ transition:none; will-change:auto; } }