/* ============================================================
   SEBASTIANO ORIANI — Scritti (materiali long-form)
   Carica DOPO style.css. Non tocca nessuna regola esistente:
   tutte le classi qui sotto sono nuove e prefissate .sc-*
   (unica eccezione: le regole @media print, che spengono la
   chrome del sito per ottenere un PDF leggibile su carta).
   ============================================================ */

/* ---------- 1. TESTATA DEL PEZZO ---------- */
.sc-meta {
  display: flex; flex-wrap: wrap; gap: 0.55rem 1.4rem;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sc-meta b { color: var(--cy); font-weight: 500; }

/* Stacco fra la testata del pezzo e il contenuto.
   Sulle altre pagine dopo l'hero arriva un blocco con del peso visivo, quindi
   i 152+96px del ritmo del sito si leggono come respiro. Qui sotto c'e' una
   barra sottile: lo stesso vuoto sembra un buco. Questo foglio lo carica solo
   /materiali, quindi la regola non tocca il resto del sito. */
.page-hero { padding-bottom: clamp(1.75rem, 4.5vw, 3.5rem) !important; }
.page-hero + .section--tight { padding-top: clamp(1.25rem, 3vw, 2.25rem) !important; }

/* ---------- 1-bis. COPERTINA (9 settembre 2026) ----------
   Da pagina-articolo a materiale: foto a tutto schermo come in home,
   il PDF come gesto principale, la sua prima pagina in anteprima. */
.sc-cover {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}
.sc-cover-media { position: absolute; inset: 0; z-index: 0; }
.sc-cover-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 35%);
  filter: saturate(0.7) contrast(1.05) brightness(0.8);
}
.sc-cover-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,9,12,0.86) 0%, rgba(8,9,12,0.30) 34%, rgba(8,9,12,0.84) 72%, var(--ink) 100%),
    linear-gradient(94deg, rgba(8,9,12,0.90) 0%, rgba(8,9,12,0.40) 48%, rgba(8,9,12,0.06) 100%);
}
.sc-cover-grid { position: relative; z-index: 2; }
.sc-cover-body .lead { max-width: 52ch; }
.sc-cover-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--s-4); }

/* Indice: cosa c'e' dentro, con gli esercizi segnati dalla penna */
.sc-toc {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--ink-2);
  padding: var(--s-3);
}
.sc-toc-h {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--s-2);
}
.sc-toc ol { list-style: none; margin: 0; padding: 0; }
.sc-toc li + li { border-top: 1px solid var(--line-soft); }
.sc-toc a {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.6rem 0;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  line-height: 1.4;
  transition: color var(--dur-fast) linear;
}
.sc-toc a.is-current { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .sc-toc a:hover { color: var(--fg); } }
.sc-toc .n {
  flex: none; width: 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--cy);
}
.sc-toc .n svg { width: 14px; height: 14px; position: relative; top: 2px; }
.sc-toc li.ex a { color: var(--cy); }
.sc-toc li.ex a.is-current { color: var(--cy-2); }
@media (hover: hover) and (pointer: fine) { .sc-toc li.ex a:hover { color: var(--cy-2); } }
.sc-toc a.is-current .t { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--cy-line); }
.sc-toc-dl {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  min-height: 44px;
  width: 100%;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
@media (hover: hover) and (pointer: fine) { .sc-toc-dl:hover { color: var(--cy); } }
.sc-toc-dl svg { width: 14px; height: 14px; }
/* pagine e peso su una riga loro: affiancati al bottone andavano a capo a metà parola */
.sc-toc-dl { flex-wrap: wrap; row-gap: 0.25rem; }
.sc-toc-dl small { flex-basis: 100%; font-size: inherit; letter-spacing: 0.08em; color: var(--fg-3); text-transform: none; }

.sc-layout { display: grid; gap: var(--s-4); }
.sc-body .sc-h2 { scroll-margin-top: 6rem; }

@media (min-width: 1100px) {
  /* la colonna di lettura resta a 68ch: e' il contenitore che si allarga, per dare fiato all'indice */
  #dentro .wrap-narrow { max-width: 1240px; }
  .sc-layout { grid-template-columns: minmax(0, 68ch) minmax(240px, 1fr); grid-template-areas: "body toc"; gap: var(--s-5); align-items: start; }
  .sc-body { grid-area: body; }
  .sc-toc { grid-area: toc; position: sticky; top: calc(var(--nav-h) + 1.25rem); }
}

/* ---------- 2. CORPO ---------- */
/* 68ch: la misura in cui l'occhio non perde la riga sul ritorno a capo */
.sc-body { max-width: 68ch; }
.sc-body > * + * { margin-top: 1.35em; }

.sc-body p {
  color: var(--fg-2);
  font-size: 1.09rem;
  line-height: 1.72;
}
.sc-body p strong, .sc-body li strong { color: var(--fg); font-weight: 600; }
.sc-body em { font-style: italic; color: var(--fg); }
.sc-body a:not(.btn) {
  color: var(--cy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cy-line);
}
@media (hover: hover) and (pointer: fine) { .sc-body a:not(.btn):hover { text-decoration-color: var(--cy); } }

/* Capitolo numerato */
.sc-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 800;
  font-stretch: 88%;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-top: clamp(2.75rem, 6vw, 4.25rem) !important;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.sc-h2 .n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0.14em;
  color: var(--cy);
  margin-bottom: 0.85rem;
}
.sc-h3 {
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-top: 2.1rem !important;
}

/* Elenchi */
.sc-body ul.sc-list, .sc-body ol.sc-list { padding-left: 0; }
.sc-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--fg-2);
  line-height: 1.68;
}
.sc-list li + li { margin-top: 0.7rem; }
ul.sc-list li::before {
  content: '';
  position: absolute; left: 0.25rem; top: 0.72em;
  width: 6px; height: 1px;
  background: var(--cy);
}
ol.sc-list { counter-reset: sc; }
ol.sc-list li { padding-left: 2.1rem; }
ol.sc-list li::before {
  counter-increment: sc;
  content: counter(sc, decimal-leading-zero);
  position: absolute; left: 0; top: 0.16em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--cy);
}

/* Frase-perno: il momento in cui il pezzo cambia marcia */
.sc-turn {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--fg);
  border-left: 2px solid var(--cy);
  padding: 0.25rem 0 0.25rem 1.35rem;
  margin-block: clamp(2rem, 4vw, 2.75rem) !important;
}

/* Nota a margine — voce più bassa, per le precisazioni oneste */
.sc-aside {
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  border-radius: var(--r);
  padding: var(--s-3);
}
.sc-aside p { font-size: var(--fs-sm); color: var(--fg-3); }
.sc-aside p + p { margin-top: 0.8rem; }
.sc-aside .lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 0.6rem;
}

/* ---------- 3. IL BLOCCO PRATICO ---------- */
/* È la parte che si compila. Deve staccarsi dalla lettura e
   sopravvivere alla stampa: bordo ciano, fondo appena più chiaro. */
.sc-work {
  border: 1px solid var(--cy-line);
  border-top: 3px solid var(--cy);
  background: var(--cy-soft);
  border-radius: var(--r-md);
  padding: clamp(1.25rem, 3.5vw, 2.1rem);
  margin-block: clamp(2.25rem, 5vw, 3.25rem) !important;
}
.sc-work > * + * { margin-top: 1.15em; }
.sc-work-h {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cy);
}
.sc-work-h b { color: var(--fg-3); font-weight: 400; letter-spacing: 0.09em; }
.sc-work-h svg { width: 15px; height: 15px; position: relative; top: 2px; }
.sc-work .sc-h3 { margin-top: 0.55rem !important; }
.sc-work p { color: var(--fg-2); }

/* Righe da riempire (a schermo si vedono, in stampa restano) */
.sc-fill { margin-top: 1.15rem !important; }
.sc-fill li {
  border-bottom: 1px solid var(--line);
  padding: 0 0 0.35rem 0;
  min-height: 2.35rem;
  display: flex; align-items: flex-end; gap: 0.6rem;
  color: var(--fg-3);
  font-size: var(--fs-sm);
}
.sc-fill li + li { margin-top: 1.1rem; }
.sc-fill li .q { color: var(--fg-2); }
.sc-fill li::before { display: none; }

/* Tabella da compilare */
/* Su mobile la tabella scorre in orizzontale, ma niente lo segnala: chi legge
   non sa che a destra ci sono altre colonne. Queste quattro velature lo dicono
   da sole — le due "local" mascherano i bordi, le due "scroll" restano visibili
   finche' c'e' altro contenuto in quella direzione. Zero markup in piu'. */
.sc-tablewrap {
  overflow-x: auto;
  margin-top: 1.3rem !important;
  background-image:
    linear-gradient(to right, var(--ink), rgba(8, 9, 12, 0)),
    linear-gradient(to left,  var(--ink), rgba(8, 9, 12, 0)),
    linear-gradient(to right, rgba(34, 211, 238, 0.28), rgba(34, 211, 238, 0)),
    linear-gradient(to left,  rgba(34, 211, 238, 0.28), rgba(34, 211, 238, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.sc-work .sc-tablewrap {
  /* Dentro il blocco pratico il fondo non e' --ink ma --cy-soft sopra --ink,
     cioe' #0A171C. Le maschere devono usare quel valore esatto, altrimenti
     restano visibili come due bande piu' scure ai lati della tabella. */
  background-image:
    linear-gradient(to right, #0A171C, rgba(10, 23, 28, 0)),
    linear-gradient(to left,  #0A171C, rgba(10, 23, 28, 0)),
    linear-gradient(to right, rgba(34, 211, 238, 0.28), rgba(34, 211, 238, 0)),
    linear-gradient(to left,  rgba(34, 211, 238, 0.28), rgba(34, 211, 238, 0));
}
.sc-table {
  width: 100%; min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.sc-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cy);
  padding: 0 0.85rem 0.7rem 0;
  border-bottom: 1px solid var(--cy-line);
  vertical-align: bottom;
}
.sc-table td {
  padding: 0.85rem 0.85rem 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-2);
  vertical-align: top;
}
.sc-table td:first-child { color: var(--fg); }
.sc-table tr:last-child td { border-bottom: 0; }
.sc-table .blank { color: var(--fg-3); }

/* Due colonne sì/no (riusa il tono di .checks senza toccarlo) */
.sc-vs { display: grid; gap: var(--s-3); margin-top: 1.3rem !important; }
@media (min-width: 720px) { .sc-vs { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }
.sc-vs-col .lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line-soft);
}
.sc-vs-col--yes .lbl { color: var(--cy); }
.sc-vs-col--no  .lbl { color: var(--fg-3); }

/* ---------- 4. CHIUSURA ---------- */
.sc-sign {
  margin-top: clamp(2.5rem, 5vw, 3.5rem) !important;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

/* Navigazione fra scritti */
.sc-next {
  display: grid; gap: var(--s-2);
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  border-radius: var(--r-md);
  padding: var(--s-3);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .sc-next:hover { border-color: var(--cy-line); background: var(--ink-3); } }
.sc-next .lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sc-next .t {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 90%;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.sc-next .d { font-size: var(--fs-sm); color: var(--fg-2); }

/* Barra di download (PDF) */

/* Salto all'esercizio dalla testata: chi arriva da una storia e' su telefono
   e l'esercizio sta a meta' pagina. Il link vive dentro .sc-meta, quindi eredita
   mono/maiuscoletto e non sembra un bottone. */
.sc-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cy-line);
}
@media (hover: hover) and (pointer: fine) { .sc-meta a:hover { color: var(--cy); text-decoration-color: var(--cy); } }
/* l'header del sito e' fisso: senza questo l'ancora finisce sotto la barra */
.sc-work { scroll-margin-top: 6rem; }

/* Sotto-testo dell'intestazione di colonna (es. "non sei tu") */
.sc-table th .sub {
  display: block;
  margin-top: 0.25rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--fg-3);
}
/* La colonna dell'esempio non e' una risposta: pesa meno delle celle da riempire */
.sc-table td.ex { color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-table td b { color: var(--fg); font-weight: 600; }
/* Quattro colonne: 480px le stringe troppo e la prima cella va a capo a ogni
   parola. Scorre in orizzontale, e le velature di .sc-tablewrap lo segnalano. */
.sc-table--4 { min-width: 560px; }
.sc-table--4 th:first-child, .sc-table--4 td:first-child { width: 38%; }

/* Titoletto interno al blocco pratico (secondo giro dentro lo stesso riquadro) */

/* Su telefono quattro colonne non ci stanno: 296px visibili su 560, e la meta'
   della tabella resta fuori campo proprio nel blocco che si deve compilare.
   Sotto i 700px ogni riga diventa una scheda, con l'etichetta della colonna
   presa da data-l. Vale solo per .sc-table--4: le altre tabelle scorrono
   come prima. */
@media screen and (max-width: 700px) {
  /* .sc-work .sc-tablewrap ridefinisce le velature: serve la stessa specificita' */
  .sc-work .sc-tablewrap--stack { overflow-x: visible; background-image: none; }
  .sc-table--4 { display: block; min-width: 0; }
  .sc-table--4 thead { display: none; }
  .sc-table--4 tbody, .sc-table--4 tr, .sc-table--4 td { display: block; width: auto; }
  .sc-table--4 tr {
    border-bottom: 1px solid var(--cy-line);
    padding-bottom: 1rem;
  }
  .sc-table--4 tr + tr { margin-top: 1rem; }
  /* senza thead la prima riga si appoggia al paragrafo qui sopra: serve il filetto */
  .sc-table--4 tbody tr:first-child { border-top: 1px solid var(--cy-line); padding-top: 1rem; }
  .sc-table--4 tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .sc-table--4 td { border: 0; padding: 0; }
  .sc-table--4 td:first-child { width: auto; margin-bottom: 0.65rem; }
  .sc-table--4 td + td {
    display: flex; align-items: baseline; gap: 0.7rem;
    padding-top: 0.4rem;
  }
  .sc-table--4 td[data-l]::before {
    content: attr(data-l);
    flex: 0 0 6.4rem;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cy);
  }
  .sc-table--4 td.ex { white-space: normal; }
}

/* ============================================================
   5. STAMPA / PDF
   Il PDF non è il sito stampato: è un altro oggetto.
   Il sito è nero, editoriale, a tutta larghezza. Qui serve un
   documento da leggere e da compilare a penna, quindi fondo
   bianco, gerarchia più bassa, filetti al posto dei fondini.
   Regola di fondo: NIENTE deve dipendere da un fondo colorato,
   perché la stampa dei fondi è opzionale e spesso disattivata.
   Colore = filetti, peso del carattere, spazio.
   ============================================================ */
@media print {
  @page { size: A4; margin: 20mm 18mm 18mm; }

  html, body {
    background: #fff !important;
    color: #23282F !important;
    font-size: 10.5pt;
    padding-bottom: 0 !important;      /* lo spazio della barra call fissa */
  }
  .sc-tablewrap { background-image: none !important; }
  body::after { display: none !important; }                 /* grana */

  /* --- via tutta la chrome del sito: header, menu, footer,
         navigazione fra scritti, CTA del sito, e della copertina a schermo
         restano solo i testi (foto, bottoni, anteprima e indice no) --- */
  .site-header, .menu-overlay, .mobile-cta, .skip-link,
  .site-footer, .sc-next, .sc-nextwrap,
  .sc-cover-media, .sc-cover-actions, .sc-toc,
  .cta-band, .orb, .marquee, .shelf-hint { display: none !important; }
  .sc-cover { min-height: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; }
  .sc-layout { display: block !important; }

  /* --- COPERTINA: prima pagina intera, foto sopra e titolo sotto --- */
  .sc-print-cover {
    display: flex !important;
    flex-direction: column;
    height: 257mm;                      /* A4 meno i margini di @page */
    break-after: page;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Niente foto: il numero del materiale, enorme e leggero, e' l'unico
     elemento grafico. Sotto, titolo e riga di identita'. */
  .sc-print-cover { border-top: 1.2pt solid #101216; padding-top: 6mm; }
  .sc-print-cover-num {
    font-family: var(--font-display);
    font-weight: 200; font-stretch: 70%;
    font-size: 150pt; line-height: 0.85; letter-spacing: -0.04em;
    color: #C9CFD8 !important;
    margin: 0 !important;
  }
  .sc-print-cover-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
  .sc-print-cover .k {
    font-family: var(--font-mono);
    font-size: 8pt; letter-spacing: 0.16em; text-transform: uppercase;
    color: #0E7490 !important;
    margin: 0 0 4mm !important;
  }
  .sc-print-cover .t {
    font-family: var(--font-display);
    font-weight: 800; font-stretch: 84%;
    font-size: 40pt; line-height: 0.96; letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #101216 !important;
    margin: 0 0 5mm !important;
  }
  .sc-print-cover .d {
    font-size: 11pt; line-height: 1.5;
    color: #3A4048 !important;
    max-width: 140mm;
    margin: 0 0 8mm !important;
  }
  .sc-print-cover .m {
    display: flex; justify-content: space-between; gap: 6mm;
    padding-top: 3mm;
    border-top: 0.8pt solid #101216;
    font-family: var(--font-mono);
    font-size: 7.5pt; letter-spacing: 0.08em; text-transform: uppercase;
    color: #6B7280 !important;
    margin: 0 !important;
  }
  .sc-print-cover .m span:first-child { color: #101216 !important; }

  main { padding: 0 !important; }
  .section, .page-hero { padding-block: 0 !important; overflow: visible !important; }
  /* piu' specifica della riga qui sopra, quindi va azzerata a parte */
  .page-hero + .section--tight { padding-top: 0 !important; }
  .wrap { max-width: none !important; padding-inline: 0 !important; }
  /* 145mm ~= 78 battute: sotto le 80 si legge, sopra l'occhio perde la riga
     al ritorno a capo. Lo spazio che avanza a destra non e' sprecato:
     e' dove si annota. */
  .sc-body, .page-hero-inner, .sc-cover-body { max-width: 145mm !important; }

  /* --- TESTATA: identità in alto, una riga sola --- */
  .sc-print-head {
    display: flex !important;
    justify-content: space-between;
    gap: 6mm;
    padding-bottom: 2.5mm;
    margin-bottom: 8mm;
    border-bottom: 0.8pt solid #101216;
    font-family: var(--font-mono);
    font-size: 7.5pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #101216 !important;
  }
  .sc-print-head span:last-child { color: #6B7280 !important; }

  /* --- TITOLO: più basso del sito, da documento non da manifesto --- */
  /* la testata dice chi e dove; l'occhiello dice quale pezzo e di cosa parla:
     si completano, quindi resta */
  .eyebrow { color: #6B7280 !important; font-size: 7.5pt; margin-bottom: 3.5mm; }
  .eyebrow::after, .eyebrow::before { background: #C9CFD8 !important; }
  .h1 {
    font-size: 25pt !important;
    line-height: 1.04 !important;
    letter-spacing: -0.025em;
    color: #101216 !important;
    margin-bottom: 5mm !important;
  }
  /* la maschera dell'animazione, in stampa, taglierebbe le righe a metà */
  .line-mask { overflow: visible !important; display: block; }
  .line-mask > span { transform: none !important; opacity: 1 !important; }
  .h1 .cy { color: #0E7490 !important; }

  .lead {
    color: #3A4048 !important;
    font-size: 11.5pt !important;
    line-height: 1.5 !important;
    max-width: 150mm;
    margin-top: 0 !important;
  }
  .sc-meta {
    margin-top: 5mm !important;
    padding-top: 3mm;
    border-top: 0.5pt solid #D5D9E0;
    color: #6B7280 !important;
    font-size: 7.5pt;
  }
  .sc-meta b { color: #0E7490 !important; }

  /* --- CORPO --- */
  .sc-body > * + * { margin-top: 3.2mm; }
  .sc-body p, .sc-list li {
    color: #23282F !important;
    font-size: 10.5pt !important;
    line-height: 1.62 !important;
    orphans: 3;
    widows: 3;
  }
  .sc-body strong, .sc-body b, .sc-body em,
  .sc-list strong, .sc-table strong { color: #101216 !important; }

  /* --- CAPITOLI --- */
  .sc-h2 {
    font-size: 15.5pt !important;
    line-height: 1.12 !important;
    color: #101216 !important;
    margin-top: 8.5mm !important;
    padding-top: 3.2mm;
    border-top: 0.5pt solid #C9CFD8 !important;
  }
  .sc-h2 .n {
    font-size: 7.5pt;
    letter-spacing: 0.14em;
    color: #0E7490 !important;
    margin-bottom: 2.2mm;
  }
  .sc-h3 {
    font-size: 11pt !important;
    color: #101216 !important;
    margin-top: 6mm !important;
  }

  /* --- ELENCHI --- */
  .sc-list li + li { margin-top: 2.2mm; }
  ul.sc-list li::before { background: #0E7490 !important; }
  ol.sc-list li::before { color: #0E7490 !important; font-size: 7.5pt; }

  /* --- FRASE-PERNO --- */
  .sc-turn {
    font-size: 15pt !important;
    font-weight: 300 !important;
    line-height: 1.28 !important;
    color: #101216 !important;
    border-left: 2.2pt solid #0E7490 !important;
    padding: 1mm 0 1mm 6mm;
    margin-block: 7mm !important;
    max-width: 132mm;
  }

  /* --- NOTA A MARGINE: filetti, non fondino --- */
  .sc-aside {
    background: none !important;
    border: 0 !important;
    border-top: 0.5pt solid #C9CFD8 !important;
    border-bottom: 0.5pt solid #C9CFD8 !important;
    border-radius: 0 !important;
    padding: 3.5mm 0 4mm !important;
    margin-block: 6mm !important;
  }
  .sc-aside .lbl { color: #0E7490 !important; font-size: 7.5pt; margin-bottom: 2.5mm; }
  .sc-aside p { color: #4B5563 !important; font-size: 9.5pt !important; line-height: 1.55 !important; }

  /* --- BLOCCO DA COMPILARE: si deve vedere che è un modulo --- */
  .sc-work {
    background: #F7FBFC !important;                 /* bonus se i fondi si stampano */
    border: 1pt solid #0E7490 !important;
    border-radius: 1.5mm !important;
    padding: 5.5mm 6mm 6mm !important;
    margin-block: 6.5mm !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sc-work > * + * { margin-top: 3.2mm; }
  .sc-work-h { color: #0E7490 !important; font-size: 7.5pt; }
  .sc-work-h svg { width: 3.2mm; height: 3.2mm; }
  .sc-work-h b { color: #6B7280 !important; }
  .sc-work .sc-h3 { margin-top: 1.5mm !important; }
  .sc-work p { color: #23282F !important; }

  /* Righe da riempire: devono essere scrivibili a penna */
  .sc-fill li {
    display: block !important;
    min-height: 0 !important;
    padding: 0 0 13mm 0 !important;
    border-bottom: 0.6pt solid #8A929D !important;
    color: #3A4048 !important;
    font-size: 9.5pt !important;
  }
  .sc-fill li + li { margin-top: 5mm; }
  .sc-fill li .q { display: block; color: #23282F !important; margin-bottom: 1mm; }

  /* --- TABELLE --- */
  .sc-tablewrap { overflow: visible !important; margin-top: 4mm !important; }
  .sc-table { min-width: 0 !important; width: 100% !important; font-size: 9.5pt; }
  .sc-table thead { display: table-header-group; }   /* si ripete se spezza */
  .sc-table th {
    color: #0E7490 !important;
    font-size: 7pt;
    border-bottom: 0.8pt solid #0E7490 !important;
    padding-bottom: 2.2mm;
  }
  .sc-table td {
    color: #23282F !important;
    border-bottom: 0.4pt solid #D5D9E0 !important;
    padding: 2.6mm 4mm 2.6mm 0;
  }
  .sc-table td:first-child { color: #101216 !important; }
  /* 2.6:1 su bianco: su una stampa scarica i puntini sparivano, e sono il
     segno di dove va scritto. Stesso grigio dei filetti da compilare. */
  .sc-table .blank { color: #8A929D !important; }

  /* --- DUE COLONNE --- */
  .sc-vs { grid-template-columns: 1fr 1fr !important; gap: 8mm !important; }
  .sc-vs-col .lbl { border-bottom-color: #C9CFD8 !important; font-size: 7.5pt; }
  .sc-vs-col--yes .lbl { color: #0E7490 !important; }
  .sc-vs-col--no .lbl { color: #6B7280 !important; }

  /* --- FIRMA --- */
  .sc-sign {
    margin-top: 6mm !important;
    padding-top: 2.5mm;
    border-top: 0.5pt solid #C9CFD8 !important;
    color: #6B7280 !important;
    font-size: 8.5pt;
  }

  /* --- L'UNICO BOTTONE CHE RESTA: la call --- */
  /* Fascia orizzontale, non riquadro centrato: alto la meta', quindi entra
     in fondo all'ultima pagina di testo invece di finire da solo su una
     pagina in piu'. */
  .sc-print-cta {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 7mm;
    margin-top: 6mm;
    border: 1pt solid #101216;
    border-radius: 1.5mm;
    padding: 4mm 5mm;
  }
  .sc-print-cta .txt { flex: 1 1 auto; }
  .sc-print-cta .k {
    font-family: var(--font-mono);
    font-size: 7pt; letter-spacing: 0.14em; text-transform: uppercase;
    color: #0E7490 !important;
    margin: 0 0 1.5mm !important;
  }
  .sc-print-cta .t {
    font-family: var(--font-display);
    font-weight: 800; font-stretch: 88%;
    font-size: 12pt; line-height: 1.15; letter-spacing: -0.02em;
    color: #101216 !important;
    margin: 0 0 1.8mm !important;
  }
  .sc-print-cta .n {
    font-size: 7.5pt; color: #6B7280 !important; margin: 0 !important;
  }
  .sc-print-cta .u { flex: 0 0 auto; margin: 0 !important; }
  .sc-print-cta .u a {
    display: inline-block;
    border: 1pt solid #0E7490;
    border-radius: 1mm;
    padding: 2.2mm 4mm;
    font-family: var(--font-mono);
    font-size: 8.5pt;
    white-space: nowrap;
    text-decoration: none !important;
    color: #0E7490 !important;
  }

  /* --- LINK --- */
  a:not(.btn) { color: #0E7490 !important; text-decoration-color: #9BD3DF !important; }
  /* i rimandi fra materiali sono relativi: dentro un PDF non risolvono,
     quindi in stampa l'indirizzo va scritto per esteso */
  .sc-body a[href$=".html"]::after {
    content: " (sebastianooriani.com/materiali/" attr(href) ")";
    font-family: var(--font-mono);
    font-size: 8pt;
    color: #6B7280;
    text-decoration: none;
  }

  /* --- DIVISIONE DELLE PAGINE --- */
  .sc-h2, .sc-h3 { break-after: avoid; break-inside: avoid; }
  .sc-h2 + p, .sc-h3 + p, .sc-h2 + ol, .sc-h2 + ul, .sc-h2 + div { break-before: avoid; }
  .sc-turn, .sc-aside, .sc-print-cta { break-inside: avoid; }
  /* le tabelle NON si tengono intere: una da undici righe spinta a pagina
     nuova lascia mezzo foglio bianco. Si spezzano, e l'intestazione si
     ripete in cima al seguito (thead: table-header-group, qui sopra). */
  .sc-tablewrap { break-inside: auto; }
  .sc-table tr, .sc-list li, .sc-fill li { break-inside: avoid; }
  /* firma + fascia call viaggiano insieme: se non entrano scendono in
     coppia, e l'ultima pagina si legge come una chiusura invece che come
     una fascia rimasta da sola in cima al foglio */
  .sc-end { break-inside: avoid; }

  /* --- TABELLA A QUATTRO COLONNE --- */
  /* su A4 ci stanno tutte: niente scorrimento, solo un po' meno corpo */
  .sc-table--4 { font-size: 9pt; }
  .sc-table--4 td { padding-right: 3mm; }
  .sc-table th .sub { color: #6B7280 !important; letter-spacing: 0.04em; }
  .sc-table td.ex { color: #6B7280 !important; }
  .sc-work-h--mid { margin-top: 5mm !important; }
  .sc-meta a { text-decoration: none !important; }
  /* Deroga alla regola "le tabelle si spezzano" qui sopra: questa e' di tre
     righe, e spezzata si compilerebbe su due fogli diversi. */
  .sc-tablewrap--stack, .sc-table--4 { break-inside: avoid; }
  /* la tabella e la sua legenda sono un pezzo solo */
  .sc-table--4 { break-after: avoid; }
  /* Il modulo intero su una pagina sola: spezzato, la cornice resta aperta sul
     bordo del foglio e non si capisce piu' dove finisce. Funziona perche' qui
     i moduli sono due e corti (la tabella; le tre domande), con la spiegazione
     fuori, a testo. Vale solo per i moduli marcati --whole: negli altri
     materiali il blocco e' piu' alto di una pagina e deve poter spezzarsi. */
  .sc-work--whole { break-inside: avoid; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Elementi che esistono solo nel PDF */
.sc-print-head, .sc-print-cta, .sc-print-cover { display: none; }