/* Layout: fixed A4 portrait sheets on a grey desk; print-first, black on white, borders and hatching instead of fills (Antonio's print rule). */
:root {
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #474747;
  --rule: #9c9c9c;
  --desk: #e4e4e1;
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-ui: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --hatch: repeating-linear-gradient(45deg, var(--ink) 0 0.5px, transparent 0.5px 2.2mm);
  color-scheme: light;
}

@page { size: A4 portrait; margin: 0; }

* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 9.4pt;
  line-height: 1.42;
}

.desk {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8mm;
  padding-block: 24px;
  padding-inline: 16px;
  overflow-x: auto;
}

/* Before pagination the article sits in a sheet-wide column; after it, the empty article stays hidden */
#flow { width: 210mm; margin-inline: auto; padding: 14mm; background: var(--paper); }
#flow[hidden] { display: none; }

/* The desk (not the paper) follows the viewer's theme (23 Oct 2026) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --desk: #26262a; } }
:root[data-theme="dark"] { --desk: #26262a; }

.sheet {
  position: relative;
  width: 210mm;
  height: 297mm;
  flex: none;
  margin-inline: auto;
  padding: 14mm 14mm 0;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  page-break-after: always;
  break-after: page;
}
.sheet .body { height: calc(297mm - 14mm - 18mm); overflow: hidden; display: flow-root; }

p, h1, h2, h3, h4, ul, ol, dl, dd, table { margin: 0; }
.body > * + *, #flow > * + * { margin-top: 2.6mm; }

/* Cover block (first sheet) */
.cover { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; border-bottom: 1.6px solid var(--ink); padding-bottom: 3.5mm; margin-bottom: 1mm; }
.cover-main { min-width: 0; }
.eyebrow { font-family: var(--f-display); font-weight: 600; font-size: 7.6pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
h1 { font-family: var(--f-display); font-weight: 800; font-size: 21pt; line-height: 1.05; letter-spacing: -0.01em; margin-top: 1.5mm; text-wrap: balance; }
.meta { flex: none; display: grid; grid-template-columns: auto auto; column-gap: 3.5mm; row-gap: 0.6mm; border: 1px solid var(--ink); padding: 2.4mm 3.5mm; font-family: var(--f-ui); font-size: 8.2pt; }
.meta dt { font-family: var(--f-display); font-weight: 600; font-size: 6.8pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); align-self: center; }
.meta dd { font-weight: 600; }

h2 { font-family: var(--f-display); font-weight: 800; font-size: 12.5pt; line-height: 1.15; text-wrap: balance; padding-top: 2mm; border-top: 0.8px solid var(--ink); }
.body > h2:first-child, #flow > h2:first-child { border-top: 0; padding-top: 0; }
h3 { font-family: var(--f-display); font-weight: 700; font-size: 9.6pt; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); }
h2 + *, h3 + * { margin-top: 1.6mm !important; }

p { text-wrap: pretty; hyphens: auto; }
strong { font-weight: 700; }
a { color: inherit; text-decoration: none; }
sup { font-family: var(--f-ui); font-size: 0.68em; line-height: 0; font-weight: 700; padding-left: 0.2mm; }
sup + sup::before { content: ","; padding-right: 0.3mm; }
ul, ol { padding-left: 5mm; }
li + li { margin-top: 0.8mm; }

/* Lead paragraph, reading note, interpretation */
.body > p.lead, #flow > p.lead { font-size: 10.2pt; line-height: 1.45; }
p.note { font-family: var(--f-ui); font-size: 8.4pt; color: var(--ink-2); border: 0.8px dashed var(--ink-2); padding: 2mm 3mm; }
p.interp { border-left: 3.4px double var(--ink); padding-left: 3.2mm; }
p.interp > em:first-child { font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: 8pt; letter-spacing: 0.08em; text-transform: uppercase; }

/* Claim tags: border style encodes certainty, never a fill */
.tag { font-family: var(--f-mono); font-size: 6.4pt; font-weight: 600; letter-spacing: 0.02em; padding: 0 0.8mm; border: 0.7px solid var(--ink); white-space: normal; }
.tag-recalled { border-style: dashed; }
.tag-assumed { border-style: dotted; border-width: 1px; color: var(--ink-2); }

/* Tables */
table { border-collapse: collapse; width: 100%; font-family: var(--f-ui); font-size: 7.4pt; line-height: 1.3; font-variant-numeric: tabular-nums; }
th { font-family: var(--f-display); font-weight: 700; font-size: 6.8pt; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; vertical-align: bottom; border-top: 1.4px solid var(--ink); border-bottom: 1.4px solid var(--ink); padding: 1.2mm 1.4mm; }
td { border-bottom: 0.5px solid var(--rule); padding: 1.1mm 1.4mm; vertical-align: top; overflow-wrap: anywhere; }
td .tag { font-size: 5.8pt; }

/* Sources */
h2.sources { margin-top: 4mm; }
ol.notes { font-family: var(--f-ui); font-size: 8.2pt; line-height: 1.4; padding-left: 6mm; color: var(--ink-2); }
/* Sources: one column, on their own last sheet (Antonio, 15 Oct 2026; replaces the 2-column layout) */
h2.sources { margin-top: 0; }
ol.notes li { overflow-wrap: anywhere; break-inside: avoid; }
ol.notes li p { margin: 0; }

/* Footer */
.foot { position: absolute; left: 14mm; right: 14mm; bottom: 7mm; display: flex; justify-content: space-between; gap: 6mm; border-top: 0.6px solid var(--ink); padding-top: 1.5mm; font-family: var(--f-ui); font-size: 7.2pt; color: var(--ink-2); }
.foot b { color: var(--ink); font-family: var(--f-mono); font-weight: 600; }

@media print {
  body { background: var(--paper); }
  .desk { padding: 0; gap: 0; overflow: visible; }
  .sheet { box-shadow: none; margin: 0; height: 296.5mm; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Figures from notebooks and scripts (added 22 Oct 2026): fit the sheet width, never spill */
.sheet img { display: block; max-width: 100%; height: auto; margin: 2mm auto 1mm; }
.sheet p > img + em, .sheet p.caption { display: block; font-size: 9pt; color: #333; margin: 0 0 3mm; }

/* Claims Antonio must check himself (Antonio, 2026-10-22): [ASSUMED] and [NEEDS HUMAN] tags, sentence and tag in faint purple */
.tag-needs-human { border-color: #7c3aed; color: #5b21b6; border-width: 1px; }
mark.check { background: #efe6ff; color: inherit; padding: 0 0.3mm; border-bottom: 1.2px solid #a78bfa; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
mark.check .tag { background: #e4d6ff; }
/* Listening Words sheet: narrower margins so more fits on a page (Antonio, 28 Oct 2026) */
#flow { padding: 9mm; }
.sheet { padding: 9mm 9mm 0; }
.sheet .body { height: calc(297mm - 9mm - 13mm); }
.foot { left: 9mm; right: 9mm; bottom: 5mm; }
h2 { padding-top: 1.5mm; }
.body > * + *, #flow > * + * { margin-top: 2mm; }
.sheet img { margin: 1mm auto 1mm; }
/* Public copy: the brand block replaces the document box on the cover */
.brandbox { flex: none; display: flex; align-items: center; gap: 3mm; border: 1px solid var(--ink); padding: 2.4mm 3.5mm; font-family: var(--f-ui); font-size: 8.2pt; }
.brandbox img { width: 11mm; height: 11mm; margin: 0; }
.brandbox div { display: flex; flex-direction: column; gap: 0.4mm; }
.brandbox b { font-family: var(--f-display); font-size: 10pt; }
.brandbox .ver { color: var(--ink-2); font-size: 7.4pt; }