/* ══════════════════════════════════════════════════════════════════════════
   STUDIO LEGALE LIZZANI — BASE
   Reset, tipografia, primitive di impaginazione.
   Dipende da: tokens.css
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Reset mirato ──────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-6));
  -moz-tab-size: 2; tab-size: 2;
}

body {
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  letter-spacing: var(--tr-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
svg { fill: none; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: var(--bw) solid var(--line); }
:where(a) { color: inherit; text-decoration: none; }

/* Un unico anello di focus in tutto il sistema, sempre visibile, mai rimosso. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-1);
}

::selection { background: var(--blueprint-800); color: var(--paper); }

/* La prosa può adattarsi alla misura, ma i titoli non vengono mai sillabati
   né spezzati nel mezzo di una parola. Le griglie e le dimensioni responsive
   assorbono le parole lunghe senza alterarne la leggibilità. */
:lang(it), :lang(en) { hyphens: manual; -webkit-hyphens: manual; }
h1, h2, h3, .d1, .d2, .d3, .d4, .area-card__title, .pub__title, .step__title {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
/* I riferimenti normativi non si spezzano mai: "art. 34-bis D.P.R. 380/2001"
   spezzato a metà cessa di essere una citazione. */
.mono, .ref, .mono-label, .rail-num, .cell-num { hyphens: none; -webkit-hyphens: none; }

/* ── Tipografia ────────────────────────────────────────────────────────────*/

/* Voce editoriale — Newsreader. L'asse opsz è pilotato esplicitamente perché
   il default del browser lo lascia fermo e vanifica il motivo per cui questo
   carattere è stato scelto.                                                  */
.d1, .d2, .d3, .d4, .serif {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.d1 { font-size: var(--t-6xl); font-variation-settings: 'opsz' 60; line-height: var(--lh-flush); }
.d2 { font-size: var(--t-5xl); font-variation-settings: 'opsz' 44; }
.d3 { font-size: var(--t-4xl); font-variation-settings: 'opsz' 32; letter-spacing: var(--tr-tight); }
.d4 { font-size: var(--t-3xl); font-variation-settings: 'opsz' 24; letter-spacing: var(--tr-tight); line-height: var(--lh-snug); }

.d1 em, .d2 em, .d3 em, .d4 em, .serif em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-text);
}

/* Occhiello di sezione: monospaziato, maiuscoletto spaziato, filetto a sinistra.
   È il marcatore che apre ogni fascia e rende la struttura leggibile a colpo
   d'occhio anche a chi scorre senza leggere.                                 */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  line-height: 1.4;   /* mai 1.0: l'occhiello va a capo in italiano */
}
.eyebrow::before {
  content: '';
  width: var(--sp-6);
  height: var(--bw);
  background: var(--accent-line);
  flex: none;
  transform: translateY(-0.32em);
}
.eyebrow--plain::before { display: none; }

/* Titolo di testata di componente */
.h-lede {
  font-size: var(--t-xl);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
  max-width: var(--measure);
  font-weight: 400;
  text-wrap: pretty;
}

.h-sub {
  font-family: var(--font-ui);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.h-micro {
  font-family: var(--font-ui);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: var(--tr-normal);
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* Voce normativa — ogni riferimento di legge è composto qui. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
  letter-spacing: var(--tr-normal);
}
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.3;
}

/* Prosa lunga — le pagine di area di pratica ne sono fatte. */
.prose {
  max-width: var(--measure);
  color: var(--fg-body);
  font-size: var(--t-lg);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.prose > * + * { margin-top: var(--sp-5); }
.prose strong { font-weight: 600; color: var(--fg); }
.prose em { font-style: italic; }
.prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--accent-line);
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.prose a:hover { text-decoration-color: currentColor; }
.prose .mono { font-size: 0.94em; }

.text-mute  { color: var(--fg-mute); }
.text-soft  { color: var(--fg-soft); }
.text-fg    { color: var(--fg); }
.text-accent{ color: var(--accent-text); }

.measure        { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

/* ── Impaginazione ─────────────────────────────────────────────────────────*/

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--text { max-width: calc(var(--shell-text) + var(--gutter) * 2); }

.band {
  padding-block: var(--band);
  background: var(--bg);
  color: var(--fg-body);
  position: relative;
}
.band--tight { padding-block: var(--band-tight); }
.band--flush-top { padding-top: 0; }
.band--ruled { border-top: var(--bw) solid var(--line); }

/* LA GRIGLIA A DUE BINARI — impianto strutturale del sistema.
   Binario di margine (numerazione, riferimenti, metadati) + colonna principale.
   Sotto i 900px collassa a una colonna e il binario diventa una riga di
   intestazione: la gerarchia resta, cambia solo l'asse.                      */
.rails {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--rail-gap);
  align-items: start;
}
.rails__rail {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-8));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: var(--bw-2) solid var(--fg);
}
.rails__main { min-width: 0; }

@media (max-width: 900px) {
  .rails { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .rails__rail {
    position: static;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-4);
  }
}

/* Numero di sezione: grande, in monospaziato, sul binario. */
.rail-num {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: var(--tr-mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.rail-note {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  line-height: 1.55;
  color: var(--fg-mute);
  letter-spacing: 0.01em;
}

/* Griglie generiche */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.stack        { display: flex; flex-direction: column; }
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.stack-8 > * + * { margin-top: var(--sp-8); }
.stack-12 > * + * { margin-top: var(--sp-12); }

.row  { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.row--tight { gap: var(--sp-2); }
.row--between { justify-content: space-between; }
.row--baseline { align-items: baseline; }

/* Testata di fascia: occhiello + titolo + occhiello di chiusura sul filetto. */
.band-head {
  display: grid;
  gap: var(--sp-5);
  padding-bottom: var(--sp-8);
  margin-bottom: var(--band-tight);
  border-bottom: var(--bw) solid var(--line);
}
.band-head__title { max-width: 22ch; }
.band-head__lede  { max-width: var(--measure); }

@media (min-width: 60rem) {
  .band-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: end;
  }
  .band-head--split .band-head__eyebrow { grid-column: 1 / -1; }
}

/* ── Utilità ───────────────────────────────────────────────────────────────*/
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--ink-900); color: var(--paper);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--t-md); font-weight: 600; border-radius: var(--r-1);
}
.skip-link:focus { transform: translateY(0); }

.hairline    { height: var(--bw); background: var(--line); border: 0; }
.hairline--strong { background: var(--line-strong); }

/* Reticolo cianotipico — texture di fondo tecnica, non decorativa: rende
   percepibile la griglia su cui la pagina è costruita. Volutamente al limite
   della soglia di visibilità.                                                */
.blueprint-field { position: relative; isolation: isolate; }
.blueprint-field::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) var(--bw), transparent var(--bw)),
    linear-gradient(to bottom, var(--line) var(--bw), transparent var(--bw));
  background-size: 5.5rem 5.5rem;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  opacity: .85;
}

/* ── Movimento ─────────────────────────────────────────────────────────────*/
/* La comparsa progressiva e subordinata alla classe .js, che uno script inline
   nel <head> mette sull’elemento radice. Senza JavaScript la regola non si
   applica affatto e i blocchi sono visibili da subito: un’animazione non puo
   essere la condizione per vedere il contenuto. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ── Stampa ────────────────────────────────────────────────────────────────
   Un cliente istituzionale stampa. Il registro scuro in stampa è uno spreco di
   toner e diventa illeggibile: in stampa il sito è sempre carta e inchiostro. */
@media print {
  .reg-dark { --bg: #fff; --bg-raised: #fff; --bg-sunken: #fff; --bg-inset: #fff;
              --fg: #000; --fg-body: #1a1a1a; --fg-soft: #333; --fg-mute: #555;
              --line: rgba(0,0,0,.2); --line-strong: rgba(0,0,0,.4);
              --accent: #0F5468; --accent-text: #0D4356; }
  body { background: #fff; }
  .site-nav, .site-drawer, .to-top, .lang-switch { display: none !important; }
  .band { padding-block: var(--sp-8); break-inside: avoid; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .78em; color: #555; }
}