/* Dispensa come un fascicolo stampato in mezzatinta: indice a sinistra, colonna di testo da ~66 battute, margine destro per le note ai libri; fondi, filetti e figure sono retini di punti (la densità d'inchiostro è l'intensità, come la densità di arrivi è |ψ|²). Colori dalle righe spettrali del banco ottico. */
:root {
  --paper: #F5F6F2;        /* carta bianca fredda */
  --paper-2: #EBEDE6;      /* riquadri di nota */
  --ink: #17203A;          /* inchiostro blu-nero */
  --ink-2: #4E5870;        /* testo secondario */
  --rule: #C9CEC4;         /* filetti */
  --laser: #A3162A;        /* He-Ne, 632,8 nm: l'elemento attivo (scurito per leggersi sul bianco) */
  --hg: #1C6E47;           /* riga verde del mercurio, 546,1 nm: i libri */
  --na-ink: #8E6400;       /* riga gialla del sodio, 589 nm, scurita per il testo */
  --na-soft: #F7EBB8;      /* evidenziatore al sodio: le trappole */
  --grid-minor: rgba(23, 32, 58, .055);
  --grid-major: rgba(23, 32, 58, .11);
  --dot: rgba(23, 32, 58, .17);       /* retino di fondo delle figure */
  --na-dot: rgba(196, 146, 0, .30);   /* retino giallo delle trappole */
  --warm: var(--hg); --hot: var(--laser);
  --par: #3C3A9E;           /* riga viola del mercurio, 435,8 nm: il percorso parallelo */
  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-body: "STIX Two Text", "STIX Two", "Times New Roman", Georgia, serif;
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Spline Sans Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0F1322; --paper-2: #171C2E; --ink: #E3E5EC; --ink-2: #9CA3B8; --rule: #2B3249;
  --laser: #FF5562; --hg: #4ED08D; --na-ink: #FFC94A; --na-soft: rgba(255, 201, 74, .12);
  --grid-minor: rgba(227, 229, 236, .045); --grid-major: rgba(227, 229, 236, .085); --dot: rgba(227, 229, 236, .13); --na-dot: rgba(255, 201, 74, .26); --par: #A99BFF; color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #0F1322; --paper-2: #171C2E; --ink: #E3E5EC; --ink-2: #9CA3B8; --rule: #2B3249;
  --laser: #FF5562; --hg: #4ED08D; --na-ink: #FFC94A; --na-soft: rgba(255, 201, 74, .12);
  --grid-minor: rgba(227, 229, 236, .045); --grid-major: rgba(227, 229, 236, .085); --dot: rgba(227, 229, 236, .13); --na-dot: rgba(255, 201, 74, .26); --par: #A99BFF; color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-padding-top: 70px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.62 var(--f-body); font-variant-numeric: oldstyle-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--laser); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--laser); outline-offset: 3px; }
button { font: inherit; color: inherit; }
::selection { background: var(--na-soft); }

/* barra */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); border-bottom: 1px solid var(--rule); }
.bar-in { max-width: 1260px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.brand { font: italic 600 21px/1 var(--f-display); color: var(--ink); text-decoration: none; letter-spacing: .005em; }
.brand span { color: var(--laser); }
.nav { display: flex; flex-wrap: wrap; gap: 2px 20px; font: 500 14px/1.4 var(--f-ui); }
.nav a { color: var(--ink-2); text-decoration: none; padding: 3px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--laser); }

/* impaginato */
.wrap { max-width: 1260px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 36px 80px; }
.layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 48px; align-items: start; }
.toc { position: sticky; top: 78px; max-height: calc(100vh - 100px); overflow-y: auto; font: 14px/1.35 var(--f-ui); }
.toc h2 { font: 600 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 10px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: grid; grid-template-columns: 22px minmax(0, 1fr); color: var(--ink-2); text-decoration: none; padding: 5px 0; }
.toc a::before { content: attr(data-n); font: italic 500 13px var(--f-display); color: var(--rule); transition: color .2s; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); }
.toc a.on::before { color: var(--laser); }
.toc-mobile { display: none; }

article { min-width: 0; max-width: calc(66ch + 300px); padding-right: 300px; position: relative; }
.kicker { font: 600 12px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.kicker b { color: var(--laser); font-weight: 600; }
.kicker b.par { color: var(--par); }
.indice .nr.par { color: var(--par); }
article h1 { font: 500 clamp(44px, 7vw, 82px)/.98 var(--f-display); letter-spacing: -.015em; margin: 10px 0 18px; text-wrap: balance; position: relative; isolation: isolate; }
/* ombra in mezzatinta, leggermente fuori registro come una stampa a due inchiostri */
.ht-shadow::before { content: attr(data-t); position: absolute; inset: 0; transform: translate(.045em, .05em); z-index: -1; color: transparent; background: radial-gradient(circle, var(--ht-col, var(--laser)) 34%, transparent 42%) 0 0 / 5px 5px; -webkit-background-clip: text; background-clip: text; pointer-events: none; }
.lead { font-size: 21px; line-height: 1.5; color: var(--ink-2); margin: 0 0 34px; max-width: 58ch; font-style: italic; }
article h2 { font: 500 clamp(28px, 3.4vw, 38px)/1.1 var(--f-display); letter-spacing: -.005em; margin: 64px 0 14px; text-wrap: balance; padding-top: 24px; background: var(--ht-rule, linear-gradient(var(--rule), var(--rule))) no-repeat left top / min(100%, 1200px) 12px; }
article h2 .n { font-style: italic; color: var(--laser); margin-right: .35em; font-weight: 500; }
article h2 .n::before { content: "§"; margin-right: .08em; }
article h3 { font: 700 19px/1.3 var(--f-body); margin: 34px 0 8px; }
article p, article li { max-width: 66ch; }
article ul, article ol { padding-left: 24px; }
article li { margin: 5px 0; }
article li::marker { color: var(--ink-2); }
strong, b { font-weight: 700; }
.ref { font: 14px/1.5 var(--f-ui); color: var(--ink-2); }

/* note a margine: i libri */
.book { float: right; clear: right; width: 252px; margin: 6px -300px 18px 0; font: 14.5px/1.5 var(--f-body); color: var(--ink-2); position: relative; padding-top: 8px; border-top: 2px solid var(--hg); }
.book .tag { font: 600 11px/1.4 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--hg); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-bottom: 4px; }
.book .tag a, .book .tag span.pg { font: 500 11px var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--hg); }
.book .tag span.pg { color: var(--ink-2); opacity: .8; }
.book p { margin: 0; max-width: none; }

/* trappole: evidenziatore al sodio */
.trap { margin: 26px 0; padding: 14px 18px 14px 18px; background-color: var(--na-soft); background-image: radial-gradient(circle, var(--na-dot) 1.1px, transparent 1.5px), radial-gradient(circle, var(--na-dot) 1.1px, transparent 1.5px); background-size: 6px 6px; background-position: 0 0, 3px 3px; position: relative; max-width: 66ch; }
.trap::before { content: "!"; position: absolute; left: -34px; top: 10px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--na-ink); color: var(--na-ink); font: italic 700 15px/21px var(--f-display); text-align: center; }
.trap .tag { font: 600 11px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--na-ink); margin-bottom: 4px; }
.trap p { margin: 0; }
.note { background-color: var(--paper); background-image: radial-gradient(circle, var(--dot) 1.15px, transparent 1.55px), radial-gradient(circle, var(--dot) 1.15px, transparent 1.55px); background-size: 6px 6px; background-position: 0 0, 3px 3px; padding: 14px 18px; margin: 22px 0; max-width: 66ch; }
.note p { margin: 0; }

/* tabelle */
.tbl { overflow-x: auto; margin: 20px 0; max-width: 66ch; }
table { border-collapse: collapse; width: 100%; font-size: 16px; font-variant-numeric: lining-nums tabular-nums; }
thead th, tr:first-child th { border-top: 1.5px solid var(--ink); }
th, td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); }
th { font: 600 11px var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
tr:last-child td { border-bottom: 1.5px solid var(--ink); }

/* passaggi numerati */
.steps { counter-reset: s; list-style: none; padding-left: 0; }
.steps > li { counter-increment: s; position: relative; padding-left: 38px; margin: 18px 0; }
.steps > li::before { content: counter(s) "."; position: absolute; left: 0; top: -3px; font: italic 500 22px/1.2 var(--f-display); color: var(--laser); }

/* mappa della lezione: schema a blocchi */
.map { display: grid; gap: 6px; margin: 26px 0 14px; max-width: 66ch; font-variant-numeric: lining-nums; }
.map .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.map .row.c1 { grid-template-columns: minmax(0, 1fr); max-width: 300px; margin: 0 auto; width: 100%; }
.map .row.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.box { padding: 9px 8px; text-align: center; font: 14px/1.35 var(--f-body); min-width: 0; border: 1px solid var(--ink); background: var(--paper); }
.box b { display: block; font: 600 12px/1.3 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.box.f { border-style: dashed; color: var(--ink-2); }
.box.r { background-color: var(--paper); background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.4px), radial-gradient(circle, var(--dot) 1px, transparent 1.4px); background-size: 5px 5px; background-position: 0 0, 2.5px 2.5px; border-color: var(--rule); }
.box.p { border-width: 1.5px; }
.box.p b { color: var(--laser); }
.box.c { border-color: var(--hg); }
.box.c b { color: var(--hg); }
.arrow { text-align: center; color: var(--ink-2); font-size: 15px; line-height: 1; }
.fig { overflow-x: auto; margin: 18px 0; }
.fig svg { display: block; min-width: 560px; }
mjx-container { font-variant-numeric: normal; }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: 4px 0; max-width: 66ch; }

/* verifica finale: come un esercizio d'esame */
.check { border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); padding: 6px 0 18px; margin-top: 56px; max-width: 66ch; }
.check h2 { margin-top: 10px; background: none; padding-top: 0; }
.check h2::before { content: "Esercizio"; display: block; font: 600 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--laser); margin-bottom: 4px; }

/* figure e laboratori: carta millimetrata */
.lab { margin: 34px 0 30px; max-width: calc(66ch + 300px); margin-right: -300px; clear: both; }
article .lab { margin-right: -300px; }
/* il retino della lastra: punti a 45°, come la trama di stampa */
.lab .plate { border: 1px solid var(--rule); padding: 16px; background-color: var(--paper);
  background-image: radial-gradient(circle, var(--dot) .9px, transparent 1.3px), radial-gradient(circle, var(--dot) .9px, transparent 1.3px);
  background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.lab figcaption { font: 14.5px/1.5 var(--f-body); color: var(--ink-2); margin-top: 10px; max-width: 78ch; }
.lab figcaption b { font: 600 11px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--laser); margin-right: 6px; }
.lab figcaption i.t { font-style: normal; font-weight: 700; color: var(--ink); }
.lab canvas, .lab svg { display: block; width: 100%; height: auto; }
.lab mjx-container svg { display: inline; width: auto; }
.lab .ctl { display: grid; gap: 0; margin: 8px 0 12px; }
.lab .ctl label { font: 500 13px/1.4 var(--f-ui); color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; }
.lab output { font: 500 13px var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.lab input[type=range] { width: 100%; accent-color: var(--laser); }
.lab .btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lab button { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 5px 11px; cursor: pointer; font: 500 13px var(--f-ui); transition: background .15s, color .15s; }
.lab button:hover { background: var(--ink); color: var(--paper); }
.lab .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.lab .num { font: 13px/1.75 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); background: var(--paper); padding: 6px 0; }
.lab .num b { color: var(--laser); font-weight: 500; }
.lab .num .t { color: var(--hg); }
.lab .num .w { color: var(--laser); }
.lab.video video { width: 100%; display: block; background: #000; }

/* pager */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; border-top: 1px solid var(--rule); padding-top: 18px; max-width: 66ch; }
.pager a { text-decoration: none; color: var(--ink); font: italic 500 22px/1.2 var(--f-display); }
.pager a small { display: block; font: 600 11px var(--f-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.pager a:hover { color: var(--laser); }
.pager a.next { text-align: right; }

@media (max-width: 1240px) {
  article { padding-right: 0; max-width: 66ch; }
  .lab, article .lab { margin-right: 0; max-width: none; }
  .book { float: none; width: auto; margin: 22px 0 22px 24px; max-width: 60ch; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .toc-mobile { display: block; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; margin-bottom: 22px; font: 15px var(--f-ui); }
  .toc-mobile summary { cursor: pointer; color: var(--ink-2); }
  .toc-mobile ol { padding-left: 22px; margin: 8px 0 0; }
  .toc-mobile a { color: var(--ink); text-decoration: none; }
  .trap::before { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .lab .cols { grid-template-columns: minmax(0, 1fr); }
  .lab .plate { padding: 12px; }
  .book { margin-left: 0; }
}

/* home */
.home { max-width: 1120px; }
.cover { display: grid; gap: 4px; padding-block: 18px 30px; }
.cover-t { font: 400 clamp(60px, 12vw, 148px)/.86 var(--f-display); letter-spacing: -.035em; margin: 14px 0 22px; text-wrap: balance; position: relative; isolation: isolate; }
.cover-t span { display: inline-block; position: relative; }
/* «alla volta» in rosso pieno; il retino d'inchiostro scuro sta dietro, fuori registro */
.cover-t em { font-style: italic; font-weight: 500; color: var(--laser); display: inline-block; position: relative; --ht-col: var(--ink); }
.cover-t .ht-shadow::before { transform: translate(.035em, .04em); background-size: 7px 7px; }
.home .lead { max-width: 54ch; margin-bottom: 0; }
.hero-lab { margin: 34px 0 0; max-width: none; }
.home-h2 { font: 500 clamp(30px, 4vw, 44px)/1.05 var(--f-display); letter-spacing: -.01em; margin: 76px 0 18px; padding-top: 24px; background: var(--ht-rule, linear-gradient(var(--rule), var(--rule))) no-repeat left top / min(100%, 1200px) 12px; }
.home-p { max-width: 64ch; }
.indice { list-style: none; padding: 0; margin: 0; display: grid; gap: 34px; counter-reset: lez; }
.indice > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; }
.indice .nr { font: italic 400 58px/.9 var(--f-display); color: var(--laser); }
.indice .nr.alt { color: var(--ink-2); }
.indice a.ti { display: flex; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; font: 500 clamp(24px, 3vw, 32px)/1.15 var(--f-display); }
.indice a.ti::after { content: ""; flex: 1; border-bottom: 1.5px dotted var(--rule); transform: translateY(-6px); min-width: 20px; order: 1; }
.indice a.ti .pp { order: 2; font: 500 13px var(--f-mono); color: var(--ink-2); white-space: nowrap; }
.indice a.ti:hover { color: var(--laser); }
.indice p { margin: 6px 0 0; max-width: 64ch; }
.indice .figs { font: 14px/1.5 var(--f-ui); color: var(--ink-2); }
.indice .figs b { font-weight: 600; color: var(--ink); }
.legenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.legenda > div { min-width: 0; }
.legenda h3 { font: 600 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.legenda .book { float: none; width: auto; margin: 0; }
.legenda .trap { margin: 0; }
.legenda .trap::before { display: none; }
.legenda .spec { border: 1px solid var(--rule); height: 74px; background-color: var(--paper);
  background-image: radial-gradient(circle, var(--dot) .9px, transparent 1.3px), radial-gradient(circle, var(--dot) .9px, transparent 1.3px);
  background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.legenda .cap { font-size: 14.5px; color: var(--ink-2); margin: 8px 0 0; }
.legenda .cap b { font: 600 11px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--laser); }
@media (max-width: 820px) { .legenda { grid-template-columns: minmax(0, 1fr); } .indice > li { grid-template-columns: 44px minmax(0, 1fr); } .indice .nr { font-size: 42px; } }
@media (max-width: 520px) { .indice a.ti { flex-wrap: wrap; } .indice a.ti::after { display: none; } .indice a.ti .pp { flex-basis: 100%; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }