/* ============================================================================
   Vetrina ospite (modules/newsroom/ui/landing.py) — si appoggia a newsroom.css
   per token, materiali e grammatica epistemica. Qui c'è SOLO l'impaginazione
   della pagina intera: nessun colore di verdetto, nessun materiale ridefinito.

   La ragione di esistere di questo file, in una riga: la vetrina non è più una
   bolla dentro il thread della chat, quindi ha bisogno di una pagina — hero,
   respiro, sezioni a tutta larghezza, una scala tipografica che parte da
   --nwr-t-hero invece che da 1,15rem.

   Due regole che valgono per tutto il file (2026-08-03):
   1. DUE MISURE, non sei. `--nwrl-m-text` è in rem, non in ch, di proposito: in
      `ch` ogni corpo di testo produce un bordo destro diverso — che era
      esattamente il «testi non allineati». Il ch resta solo per il display, dove
      conta il numero di righe, non l'allineamento.
   2. La bacheca dell'hero è un sistema PROPORZIONALE: sughero con aspect-ratio
      fisso, schede in % e tipografate in `cqw`. Solo così le coordinate dello
      spago (viewBox, in landing.py) restano vere a ogni larghezza.
   ========================================================================== */

.nwrl-body {
  background-attachment: fixed;
  /* Misura unica dei testi: bordo destro allineato fra lede, note, hero-s e
     warn, che hanno corpi diversi. */
  --nwrl-m-text: 40rem;
  /* Misura del display: qui il ch è giusto, si sta contando le righe. */
  --nwrl-m-display: 22ch;
  /* Compensazione della topbar sticky per le ancore dell'header. */
  --nwrl-anchor: 4.6rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Chrome ---------------------------------------------------------------- */
/* La barra è a tutta larghezza ma il suo CONTENUTO sta sulla stessa colonna di
   `.nwrl-main` (max-width 1180 + padding): senza questo il wordmark partiva 110px
   più a sinistra del titolo che ha sotto, ed era la prima cosa fuori squadra
   della pagina. La formula ricalcola qui il centraggio di .nwrl-main. */
.nwrl-topbar {
  padding-block: .55rem; gap: .8rem;
  padding-inline: max(clamp(1rem, 4vw, 2rem), calc((100% - 1180px) / 2 + clamp(1rem, 4vw, 2rem)));
}
.nwrl-topnav { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Nav di sezione: la pagina resta una, ma si può attraversare. Strip a riga
   singola che scorre in orizzontale invece di andare a capo o di nascondersi
   dietro un hamburger — su una pagina di sei sezioni un menu chiuso è un menu
   che non esiste. */
.nwrl-secnav {
  display: flex; align-items: center; gap: .1rem;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nwrl-secnav::-webkit-scrollbar { display: none; }
.nwrl-secnav a {
  white-space: nowrap; text-decoration: none;
  font-size: .82rem; color: var(--nwr-muted);
  padding: .34rem .55rem; border-radius: 3px;
  border-bottom: 2px solid transparent;
}
.nwrl-secnav a:hover { color: var(--nwr-text); background: var(--nwr-surface); }
.nwrl-secnav a[aria-current="true"] { color: var(--nwr-text); border-bottom-color: var(--nwr-steel); }
/* L'unica voce che LASCIA la monopagina, e lo dice con un filetto. */
.nwrl-secnav-out { margin-left: .5rem; padding-left: .9rem !important;
  border-left: 1px solid var(--nwr-border-soft); border-radius: 0 3px 3px 0; }

.nwrl-main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 4rem; }
.nwrl-sec { padding: clamp(2.6rem, 7vw, 5rem) 0 0; }
.nwrl-sec, .nwrl-hero { scroll-margin-top: var(--nwrl-anchor); }
.nwrl-h2 {
  font-family: var(--nwr-evidence); font-size: var(--nwr-t-h1);
  font-weight: 700; letter-spacing: -.015em; max-width: var(--nwrl-m-display);
}
.nwrl-lede { color: var(--nwr-muted); font-size: 1.02rem; max-width: var(--nwrl-m-text); margin-top: .7rem; }
.nwrl-note { color: var(--nwr-faint); font-size: .8rem; max-width: var(--nwrl-m-text); margin-top: 1.2rem; line-height: 1.6; }
.nwrl-btn-lg { padding: .7rem 1.35rem; font-size: .95rem; }

/* L'occhiello numerato: la gerarchia che mancava. Il numero e l'etichetta
   arrivano da _SECTIONS (landing.py), che è anche la sorgente delle voci di
   menu — non possono divergere. */
.nwrl-kicker { color: var(--nwr-faint); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; }
.nwrl-sec > .nwrl-kicker { margin-bottom: .55rem; }

/* --- Hero ------------------------------------------------------------------ */
/* `align-items: start`, non center: con la colonna di testo più alta del sughero
   il centraggio non lasciava ai due blocchi NESSUN bordo in comune. */
.nwrl-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(2.2rem, 6vw, 4.5rem) 0 0; align-items: start;
}
/* Due colonne solo con davvero lo spazio: sotto i 1040px la colonna della
   bacheca diventava così stretta da rimpicciolire tutta la composizione. */
@media (min-width: 1040px) { .nwrl-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* Il titolo NON usa `--nwr-t-hero` (3,5rem): quel token è tarato su una pagina a
   piena larghezza — è press.css che lo usa così. Qui il titolo vive in mezza
   colonna, e a 3,5rem andava a CINQUE righe di due parole l'una. La misura si
   accorda alla colonna, non al viewport. */
.nwrl-hero-t {
  font-family: var(--nwr-evidence); font-size: clamp(2rem, 5.4vw, 3.2rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.025em; margin-top: .9rem;
  max-width: var(--nwrl-m-display);
}
@media (min-width: 1040px) { .nwrl-hero-t { font-size: clamp(2.2rem, 3.2vw, 2.9rem); } }
.nwrl-hero-s { color: var(--nwr-muted); font-size: 1.05rem; max-width: var(--nwrl-m-text); margin-top: 1.1rem; }
.nwrl-hero-s strong { color: var(--nwr-text); font-family: var(--nwr-record); font-size: .95em; }
.nwrl-hero-s--quiet { font-family: var(--nwr-evidence); font-style: italic; color: var(--nwr-text); font-size: 1.1rem; }
.nwrl-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.nwrl-hero-fine { color: var(--nwr-faint); font-size: .8rem; margin-top: 1rem; max-width: var(--nwrl-m-text); line-height: 1.6; }

/* --- Hero: la bacheca che si compone ---------------------------------------
   Sughero + tre schede appuntate + spago. Le schede entrano una alla volta e i
   fili si tirano dopo: il montaggio È il prodotto, e mostrarlo in movimento
   dice più di qualunque screenshot. Rispetta prefers-reduced-motion.

   ⚠️ GEOMETRIA. `aspect-ratio` + `container-type` non sono decorazione: le
   schede stanno in % del sughero e lo spago in un viewBox — due sistemi di
   coordinate che restano allineati solo se il box è proporzionale a se stesso a
   ogni larghezza. Prima il sughero aveva `min-height: 500px` e le schede
   `min(45%, 244px)`: bastava un viewport diverso perché i fili scivolassero via
   dalle schede. Per lo stesso motivo padding e margini interni alle schede sono
   in `cqw` e non in rem — un rem non scala col contenitore, e l'altezza della
   scheda tornerebbe a dipendere dalla larghezza. `max-width` tiene il sughero in
   una forbice stretta (473–560px) così il `cqw` resta leggibile agli estremi. */
.nwrl-board {
  position: relative; border-radius: 6px; overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 100 / 88;
  max-width: 560px; margin-inline: auto; width: 100%;
  background:
    repeating-linear-gradient(83deg, rgba(255,255,255,.016) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-7deg, rgba(0,0,0,.10) 0 3px, transparent 3px 11px),
    radial-gradient(700px 380px at 22% 4%, rgba(122,84,50,.30), transparent 62%),
    linear-gradient(160deg, #2b2018, #241a13 55%, #1e1610);
  box-shadow: inset 0 0 90px rgba(0,0,0,.55), 0 26px 50px -30px rgba(0,0,0,.9);
}
.nwrl-yarn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nwrl-yarn path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: nwrl-draw 1.1s ease-out forwards; }
.nwrl-yarn path:nth-child(1) { animation-delay: 1.15s; }
.nwrl-yarn path:nth-child(2) { animation-delay: 1.75s; }
@keyframes nwrl-draw { to { stroke-dashoffset: 0; } }

.nwrl-card {
  position: absolute; width: 43%; margin: 0; padding: 3cqw 2.9cqw 2.6cqw;
  color: var(--nwr-ink); background: var(--nwr-onionskin);
  border-radius: 2px; transform-origin: 50% 0;
  box-shadow: 0 16px 28px -18px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.5) inset;
  animation: nwrl-pin .5s cubic-bezier(.2,.9,.3,1.25) backwards;
}
/* Tre posizioni che NON si toccano: le schede sono ruotate e proiettano ombra,
   quindi vanno tenute più larghe di quanto sembri necessario a griglia.
   ⚠️ Questa composizione ha DUE vincoli accoppiati, e si rompono insieme:
   restringere le schede le fa crescere in altezza (più righe) fino a farle
   scavalcare in verticale, allungare i testi fa lo stesso. Le altezze reali si
   misurano, non si stimano — e i due path in landing.py vanno ricalcolati ogni
   volta che cambi questi top/left, la larghezza o la lunghezza dei testi. */
.nwrl-card--1 { top: 3%;  left: 2%;   --rot: -2.2deg; animation-delay: .15s; }
.nwrl-card--2 { top: 51%; left: 15%;  --rot: 1.6deg;  animation-delay: .75s; }
.nwrl-card--3 { top: 5%;  right: 2%;  --rot: 2.4deg;  animation-delay: 1.35s; }
.nwrl-card { rotate: var(--rot); }
@keyframes nwrl-pin {
  from { opacity: 0; transform: translateY(-16px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
/* la puntina prende il colore del VERDETTO (--v, dai token server-side): il
   segno che dice «com'è andata» sta sul chiodo, non su un badge colorato */
.nwrl-pin {
  position: absolute; top: -1.4cqw; left: 50%; transform: translateX(-50%);
  width: 2.9cqw; height: 2.9cqw; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 12%, var(--v) 46%,
              color-mix(in srgb, var(--v) 55%, #000) 100%);
  box-shadow: 0 3px 6px -1px rgba(0,0,0,.75);
}
.nwrl-card-claim {
  font-family: var(--nwr-evidence); font-size: 3cqw; line-height: 1.35;
  margin: .9cqw 0 2.2cqw; font-style: italic;
}
.nwrl-card-claim::before { content: "«"; } .nwrl-card-claim::after { content: "»"; }
.nwrl-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4cqw; font-size: 2.15cqw; }
.nwrl-card-ref { font-size: 2.15cqw; color: var(--nwr-ink-faded); }
.nwrl-card-ref--none { font-style: italic; }
.nwrl-card-detail {
  font-size: 2.35cqw; line-height: 1.45; color: var(--nwr-ink-faded);
  margin-top: 2cqw; border-top: 1px solid rgba(42,36,25,.18); padding-top: 1.8cqw;
}
@media (prefers-reduced-motion: reduce) {
  .nwrl-card, .nwrl-yarn path { animation: none; }
  .nwrl-yarn path { stroke-dashoffset: 0; }
}
@media (max-width: 620px) {
  /* Sotto i 620px le schede sovrapposte diventano illeggibili: la bacheca si
     srotola in colonna. Meglio perdere la metafora che perdere il contenuto.
     Qui il contenitore non è più proporzionale, quindi la tipografia torna in
     rem: un `cqw` senza container si risolverebbe sul viewport. */
  .nwrl-board {
    aspect-ratio: auto; container-type: normal; max-width: none;
    display: flex; flex-direction: column; gap: 1.4rem; padding: 1.6rem 1.1rem;
  }
  .nwrl-card { position: static; width: auto; rotate: none; padding: .85rem .8rem .7rem; }
  .nwrl-pin { top: -7px; width: 15px; height: 15px; }
  .nwrl-card-claim { font-size: .88rem; margin: .25rem 0 .55rem; }
  .nwrl-card-foot { font-size: .64rem; gap: .35rem; }
  .nwrl-card-ref { font-size: .64rem; }
  .nwrl-card-detail { font-size: .7rem; margin-top: .5rem; padding-top: .45rem; }
  .nwrl-yarn { display: none; }
}

/* --- Il metodo -------------------------------------------------------------- */
.nwrl-stages {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.nwrl-stage {
  background: var(--nwr-surface); border: 1px solid var(--nwr-border);
  border-top: 3px solid var(--nwr-steel);
  border-radius: 2px; padding: .9rem .9rem 1rem;
}
.nwrl-stage-n { display: block; color: var(--nwr-faint); font-size: .72rem; letter-spacing: .1em; }
.nwrl-stage-t { font-size: .98rem; margin-top: .3rem; }
.nwrl-stage-d { color: var(--nwr-muted); font-size: .82rem; margin-top: .4rem; line-height: 1.5; }
.nwrl-provs, .nwrl-verdicts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }

/* --- Il modello collaborativo ----------------------------------------------- */
.nwrl-rules {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: nwrl-r;
}
.nwrl-rule {
  position: relative; counter-increment: nwrl-r;
  background: var(--nwr-surface); border: 1px solid var(--nwr-border);
  border-left: 3px solid var(--nwr-kraft); border-radius: 2px; padding: .95rem 1rem 1rem;
}
.nwrl-rule::before {
  content: counter(nwrl-r, decimal-leading-zero);
  font-family: var(--nwr-record); font-size: .68rem; letter-spacing: .1em;
  color: var(--nwr-faint);
}
.nwrl-rule-t { font-size: .95rem; margin-top: .3rem; }
.nwrl-rule-d { color: var(--nwr-muted); font-size: .84rem; margin-top: .45rem; line-height: 1.55; }

/* --- Archivio --------------------------------------------------------------- */
.nwrl-kpis { margin-top: 1.6rem; }
.nwrl-honesty { margin-top: 1.2rem; padding: .9rem 1rem; border-radius: 2px; max-width: var(--nwrl-m-text); }
.nwrl-honesty p { font-size: .84rem; line-height: 1.6; margin-top: .5rem; }
.nwrl-themes {
  margin-top: 1.2rem; display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.nwrl-theme {
  background: var(--nwr-surface); border: 1px solid var(--nwr-border);
  border-left: 3px solid var(--nwr-kraft); border-radius: 2px; padding: .9rem;
}
.nwrl-theme-t { font-size: .95rem; }
.nwrl-theme-d { color: var(--nwr-muted); font-size: .82rem; margin-top: .45rem; line-height: 1.5; }
.nwrl-theme-n { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .7rem; font-size: .78rem; color: var(--nwr-muted); }
.nwrl-theme-n strong { color: var(--nwr-text); font-size: .95rem; }
.nwrl-cover { height: 4px; border-radius: 2px; background: var(--nwr-surface-2); overflow: hidden; margin-top: .7rem; }
.nwrl-cover-fill { display: block; height: 100%; background: var(--nwr-steel); }
.nwrl-cover-l { display: block; font-size: .66rem; color: var(--nwr-faint); margin-top: .3rem; }

/* --- Mappa ------------------------------------------------------------------ */
.nwrl-map { margin-top: 1.4rem; border: 1px solid var(--nwr-border); border-radius: 4px; overflow: hidden; }
.nwrl-map-search { padding: .6rem; border-bottom: 1px solid var(--nwr-border-soft); }
.nwrl-map-search input {
  width: 100%; padding: .55rem .8rem; border-radius: 3px; font: inherit; font-size: .88rem;
  background: var(--nwr-surface); border: 1px solid var(--nwr-border); color: var(--nwr-text);
}
/* il canvas del grafo è fisso scuro in ENTRAMBI i temi (stessa scelta di
   casemap.py: la palette dei nodi è leggibile solo su fondo scuro) */
.nwrl-map-canvas { height: clamp(340px, 52vh, 620px); background: #0b1620; }
.nwrl-map-status { padding: .6rem .8rem; font-size: .82rem; color: var(--nwr-muted); }

/* --- Caso comune ------------------------------------------------------------ */
.nwrl-feed {
  margin-top: 1.4rem; display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.nwrl-contrib { padding: 1.1rem .95rem .9rem; }
.nwrl-contrib-t { font-family: var(--nwr-evidence); font-size: 1rem; margin-top: .5rem; }
.nwrl-contrib-b { font-size: .85rem; line-height: 1.55; margin-top: .5rem; }
.nwrl-contrib-refs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
.nwrl-contrib-f { font-size: .68rem; color: var(--nwr-ink-faded); margin-top: .7rem; }

/* --- Chiusura --------------------------------------------------------------- */
.nwrl-cta .nwrl-hero-cta { margin-top: 1.3rem; }
.nwrl-warn {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--nwr-border-soft);
}
.nwrl-warn p { color: var(--nwr-faint); font-size: .82rem; line-height: 1.6; max-width: var(--nwrl-m-text); }
.nwr-foot { text-align: center; padding: 1.6rem; font-size: .78rem; color: var(--nwr-faint); }

/* --- Header stretto ---------------------------------------------------------
   La strip di sezione passa sotto invece di comprimere wordmark e CTA. La
   topbar diventa più alta, quindi cresce anche la compensazione delle ancore:
   se restasse a 4,6rem, ogni click su una voce nasconderebbe il titolo che ha
   appena raggiunto. */
@media (max-width: 900px) {
  .nwrl-body { --nwrl-anchor: 7.2rem; }
  .nwrl-topbar { flex-wrap: wrap; }
  .nwrl-secnav {
    order: 3; flex-basis: 100%; padding-top: .3rem;
    border-top: 1px solid var(--nwr-border-soft);
  }
}
@media (max-width: 520px) {
  /* Con lo spazio di un pollice resta la sola azione che conta: chiedere
     l'accesso. «Accedi» vive comunque nella chiusura #accesso. */
  .nwrl-topnav .nwr-btn--ghost { display: none; }
}