/* =============================================================================
   typography.css — tipografia del sito
   Tutto il peso visivo passa da qui. Gerarchia risolta con size + peso +
   small-caps, non con colori.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HEADINGS — serif, tracking leggermente stretto sui corpi grandi.
   Optical sizing attivo (Source Serif 4 e' variable).
   ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--space-4);
  font-variation-settings: "opsz" 48;  /* ottico per display */
  text-wrap: balance;                   /* dove supportato */
}

h1 {
  font-size: var(--step-4);
  font-weight: var(--fw-bold);
  margin-top: var(--space-7);
  margin-bottom: var(--space-5);
}

h2 {
  font-size: var(--step-3);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--step-2);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--step-1);
  font-weight: var(--fw-medium);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
  font-variation-settings: "opsz" 14;
}

h5, h6 {
  font-size: var(--step-0);
  font-weight: var(--fw-semibold);
  font-variation-settings: "opsz" 14;
}

/* Titolo pagina articolo — step piu' grande, riservato ad .article-title */
.page-title {
  font-size: var(--step-5);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-top: 0;
}

/* -----------------------------------------------------------------------------
   BODY, LEAD, DEK
   ----------------------------------------------------------------------------- */
p {
  margin: 0 0 var(--space-4);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-variation-settings: "opsz" 10;  /* ottico per testo */
  text-wrap: pretty;                    /* dove supportato */
}

.lead,
.dek {
  font-family: var(--font-sans);
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
  font-weight: var(--fw-regular);
  margin-bottom: var(--space-6);
  max-width: var(--measure-narrow);
}

/* -----------------------------------------------------------------------------
   SMALL CAPS METADATA — data, categoria, read time
   Sans maiuscolo tracking largo. Classe riutilizzabile.
   ----------------------------------------------------------------------------- */
.metadata,
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.3;
}

.metadata--ink {
  color: var(--ink);
}

/* Separatore middot tra item di metadata: <span class="metadata"><span>data</span><span>·</span>...</span> */
.metadata > * + *::before {
  content: " · ";
  color: var(--ink-subtle);
  margin: 0 var(--space-2);
}
.metadata > * + * {
  /* il ::before fa tutto il lavoro; evitiamo margin ridondanti */
}

/* -----------------------------------------------------------------------------
   LINK — underline serio, hover con evidenziatore giallo
   ----------------------------------------------------------------------------- */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
  transition: text-decoration-thickness var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

a:hover {
  text-decoration-thickness: 2px;
  background-color: var(--selection);
}

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  text-decoration-thickness: 2px;
}

/* Link "silent" — senza underline di default (nav, UI). Hover appare. */
a.link-silent {
  text-decoration: none;
}
a.link-silent:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  background-color: transparent;
}

/* -----------------------------------------------------------------------------
   STRONG, EM
   ----------------------------------------------------------------------------- */
strong, b {
  font-weight: var(--fw-semibold);
}

em, i {
  font-style: italic;
}

/* -----------------------------------------------------------------------------
   LISTE — stile editoriale, marker discreti
   ----------------------------------------------------------------------------- */
ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

ul li,
ol li {
  margin-bottom: var(--space-2);
  line-height: var(--lh-body);
}

ul {
  list-style-type: disc;
}

ul ul {
  list-style-type: circle;
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   BLOCKQUOTE & PULLQUOTE
   ----------------------------------------------------------------------------- */
blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--ink);
  font-style: italic;
  color: var(--ink);
}

blockquote p {
  margin-bottom: var(--space-2);
}

blockquote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--space-3);
}

/* Pullquote "a sfondamento" — testo grande, serif, senza virgolette tipografiche */
.pullquote {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: var(--lh-snug);
  font-style: italic;
  margin: var(--space-7) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  max-width: var(--measure);
  text-align: left;
}

/* -----------------------------------------------------------------------------
   NOTA / ASIDE — box discreto con rule sopra
   ----------------------------------------------------------------------------- */
.note {
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.note::before {
  content: "NOTA";
  display: block;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

/* -----------------------------------------------------------------------------
   FOOTNOTE — numerate stile classico
   ----------------------------------------------------------------------------- */
.footnotes {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ink);
  font-size: var(--step--1);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.footnotes ol {
  padding-left: var(--space-5);
}

.footnotes li {
  margin-bottom: var(--space-3);
}

.footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.footnote-ref::before { content: "["; }
.footnote-ref::after  { content: "]"; }

/* -----------------------------------------------------------------------------
   CODICE — mono, sfondo sottile
   ----------------------------------------------------------------------------- */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: #F4F4F4;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-1);
  border: 1px solid var(--rule);
}

pre {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: #F4F4F4;
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.55;
  overflow-x: auto;
  color: var(--ink);
}

pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* Syntax highlighting statico (stile highlight.js-like, monocromo + un giallo) */
.hljs-keyword   { font-weight: var(--fw-semibold); }
.hljs-string    { font-style: italic; color: var(--ink-muted); }
.hljs-comment   { color: var(--ink-subtle); font-style: italic; }
.hljs-number    { font-weight: var(--fw-medium); }
.hljs-function  { font-weight: var(--fw-semibold); }
.hljs-title     { text-decoration: underline; text-underline-offset: 0.2em; }

/* -----------------------------------------------------------------------------
   HORIZONTAL RULE
   ----------------------------------------------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}

hr.rule-strong {
  border-top-color: var(--ink);
}

/* -----------------------------------------------------------------------------
   ABBREVIAZIONI & SMALL
   ----------------------------------------------------------------------------- */
abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.18em;
  cursor: help;
}

small {
  font-size: var(--step--1);
  color: var(--ink-muted);
}