/* ============================================================
   NOTAG BASE — BASE
   Reset misurato e stili editoriali: è quello che si vede in un
   articolo del blog e nel racconto di una scheda progetto.
   Usa solo i token di tokens.css.
   ============================================================ */

*, *::before, *::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--nt-carta);
  color:var(--nt-nero);
  font-family:var(--nt-testo);
  font-size:var(--nt-size-corpo);
  line-height:var(--nt-lh-testo);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, picture, video, canvas, svg{ display:block; max-width:100%; height:auto; }

/* L'attributo hidden deve vincere sulle regole di display qui sopra. */
[hidden]{ display:none !important; }

/* ---------- Titoli ---------- */
h1, h2, h3, h4,
.nt-h1, .nt-h2, .nt-h3{
  font-family:var(--nt-display);
  font-weight:400;              /* Archivo Black ha un solo peso */
  line-height:var(--nt-lh-stretta);
  letter-spacing:var(--nt-ls-titolo);
  color:var(--nt-inchiostro, var(--nt-nero));
  margin:0 0 var(--nt-space-4);
  text-wrap:balance;
}
h1, .nt-h1{ font-size:var(--nt-size-titolo); letter-spacing:var(--nt-ls-display); }
h2, .nt-h2{ font-size:clamp(1.625rem, 1rem + 2.4vw, 2.25rem); }
h3, .nt-h3{ font-size:var(--nt-size-sottotitolo); }
h4{ font-size:1.125rem; font-family:var(--nt-testo); font-weight:600; letter-spacing:0; }

/* Display: il gesto grande, fuori dal flusso editoriale */
.nt-display{
  font-family:var(--nt-display);
  font-size:var(--nt-size-display);
  line-height:.95;
  letter-spacing:var(--nt-ls-display);
  margin:0;
  text-wrap:balance;
}

/* ---------- Testo ---------- */
p{ margin:0 0 var(--nt-space-5); }
p:last-child{ margin-bottom:0; }

.nt-lead{
  font-size:var(--nt-size-corpo-g);
  line-height:1.5;
  font-weight:500;
}

strong, b{ font-weight:700; }

small, .nt-piccolo{ font-size:0.9375rem; color:var(--nt-inchiostro-2, var(--nt-fumo)); }

::selection{ background:var(--nt-rosso); color:#fff; }

/* ---------- Link ----------
   Sottolineatura rossa che cresce da sinistra, disegnata come
   sfondo e non con uno pseudo-elemento: così non entra mai in
   conflitto con i ::before/::after dei componenti. */
a{
  color:inherit;
  text-decoration:none;
  background-image:linear-gradient(var(--nt-rosso), var(--nt-rosso));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0 2px;
  transition:background-size var(--nt-tempo) var(--nt-ease), color var(--nt-tempo) var(--nt-ease);
}
a:hover{ background-size:100% 2px; }

/* Nel corpo di un articolo il link è già sottolineato: lì si legge, non si scopre */
.nt-prosa a{ background-size:100% 1px; }
.nt-prosa a:hover{ color:var(--nt-rosso); background-size:100% 2px; }

/* ---------- Focus accessibile ---------- */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--nt-blu);
  outline-offset:3px;
  border-radius:var(--nt-raggio-s);
}

/* ---------- Liste ---------- */
ul, ol{ margin:0 0 var(--nt-space-5); padding-left:1.25em; }
li{ margin-bottom:var(--nt-space-2); }
li::marker{ color:var(--nt-rosso); }

/* ---------- Citazione ---------- */
blockquote{
  margin:var(--nt-space-7) 0;
  padding:0 0 0 var(--nt-space-5);
  border-left:3px solid var(--nt-rosso);
  font-size:var(--nt-size-corpo-g);
  line-height:1.45;
  font-weight:500;
}
blockquote cite{
  display:block;
  margin-top:var(--nt-space-3);
  font:400 var(--nt-size-meta)/1.4 var(--nt-meta);
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  color:var(--nt-inchiostro-2, var(--nt-fumo));
  font-style:normal;
}

/* ---------- Figure e didascalie ---------- */
figure{ margin:var(--nt-space-7) 0; }
figcaption, .wp-element-caption{
  margin-top:var(--nt-space-3);
  font:400 var(--nt-size-meta)/1.5 var(--nt-meta);
  letter-spacing:var(--nt-ls-meta);
  color:var(--nt-inchiostro-2, var(--nt-fumo));
}

/* ---------- Tabelle ---------- */
table{ width:100%; border-collapse:collapse; margin:var(--nt-space-6) 0; font-size:0.9375rem; }
th, td{ text-align:left; padding:var(--nt-space-3) var(--nt-space-4); border-bottom:1px solid var(--nt-bordo); }
th{
  font:700 var(--nt-size-meta)/1.4 var(--nt-meta);
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  color:var(--nt-inchiostro-2, var(--nt-fumo));
}

/* ---------- Regola orizzontale ---------- */
hr{
  border:none;
  border-top:1px solid var(--nt-bordo);
  margin:var(--nt-space-8) 0;
}

/* ---------- Codice ---------- */
code, pre{ font-family:var(--nt-meta); font-size:0.9375em; }
pre{
  background:var(--nt-nero);
  color:var(--nt-carta);
  padding:var(--nt-space-5);
  border-radius:var(--nt-raggio);
  overflow:auto;
}

/* ---------- Prosa: la colonna di lettura di articoli e racconti ---------- */
.nt-prosa{
  max-width:var(--nt-max-testo);
  color:var(--nt-inchiostro, var(--nt-nero));
}
.nt-prosa > *:first-child{ margin-top:0; }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}