/* THE READING TEMPLATE: privacy, terms, DPA, cookies
   (docs/design/OEG-DESIGN-2026-09-the-old-web-moves-in.md, section 2).

   Ink above, paper below, one surface change. The header floats on the canvas;
   a masthead band holds the eyebrow, the title and one mono row of slots; the
   sheet rises with the lift every record uses and the document sits on paper.
   Loaded after site-v4-surface.css, whose nav, sheet and ledger row it reuses
   unchanged, and before the mark's sheet, which asks to be linked last. */

/* ---- The masthead, on the ink. ---- */
.reading .ink { position: relative; background: var(--v4-canvas); }
.masthead { position: relative; display: flex; flex-direction: column; gap: 1.125rem; padding: 9rem var(--v4-gutter) calc(3.5rem + var(--v4-sheet-lift)); }
.masthead .eyebrow { margin: 0; color: var(--v4-accent); }
.masthead h1 { max-width: 22ch; }
.masthead .slots { margin: 0; display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; font-size: 0.875rem; color: var(--v4-ink-secondary); }
.masthead .slots [data-bracketed] { color: var(--v4-ink-muted); }

/* ---- The sheet and the measure. ---- */
.document-sheet { background: var(--v4-paper); color: var(--v4-paper-ink); padding: 4rem var(--v4-gutter) 5.5rem; overflow: visible; }
.document-grid { display: grid; grid-template-columns: minmax(0, var(--v4-measure)); gap: 2.5rem; font-family: var(--v4-font-display); font-size: 1.0625rem; }

/* ---- The contents: a rail at 1100 and above, a native collapsible below. ---- */
.contents { font-family: var(--v4-font-text); font-size: 0.875rem; border-top: 1px solid var(--v4-paper-ink); padding-top: 0.75rem; }
.contents summary { cursor: pointer; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--v4-paper-ink-muted); }
.contents ol { margin: 0.75rem 0 0; padding-left: 2.25rem; }
.contents li { padding: 0.2rem 0; color: var(--v4-paper-ink-muted); font-family: var(--v4-font-figures); font-size: 0.75rem; }
.contents li::marker { font-family: var(--v4-font-figures); }
.contents a { font-family: var(--v4-font-text); font-size: 0.875rem; color: var(--v4-paper-ink-secondary); text-decoration: none; }
.contents a:hover, .contents a[aria-current] { color: var(--v4-paper-ink); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1100px) {
  .document-grid { grid-template-columns: 14rem minmax(0, var(--v4-measure)) 1fr; gap: 0 4.5rem; }
  .contents { position: sticky; top: 2rem; align-self: start; max-height: calc(100vh - 4rem); overflow-y: auto; }
  .contents summary { pointer-events: none; list-style: none; }
  .contents summary::-webkit-details-marker { display: none; }
}

/* ---- The document. Newsreader for the reading, Hanken Grotesk for labels and
     table heads, IBM Plex Mono for every value. ---- */
.document { min-width: 0; counter-reset: section; line-height: 1.6; color: var(--v4-paper-ink); }
.document p, .document li { margin: 0 0 1rem; }
.document ul { margin: 0 0 1rem; padding-left: 1.375rem; }
.document li { margin-bottom: 0.5rem; }
.document a { color: var(--v4-paper-accent); text-underline-offset: 2px; overflow-wrap: anywhere; }
.document strong { font-weight: 600; }
.document code { font-family: var(--v4-font-figures); font-size: 0.875em; overflow-wrap: anywhere; }

/* Every h2 is numbered in document order by the counter, a mono label in the
   gutter, never typed into the heading: the terms cross-reference by number. */
.document h2 { counter-increment: section; position: relative; margin: 3rem 0 1rem; font-family: var(--v4-font-display); font-size: 1.5rem; line-height: 1.2; font-weight: 400; scroll-margin-top: 1.5rem; }
.document h2:first-child { margin-top: 0; }
.document h2::before { content: counter(section); display: block; margin-bottom: 0.375rem; font-family: var(--v4-font-figures); font-size: 0.875rem; color: var(--v4-paper-ink-muted); }
@media (min-width: 1100px) {
  .document h2::before { position: absolute; right: 100%; top: 0.35em; margin: 0 1.25rem 0 0; }
}
.document h3 { margin: 2rem 0 0.75rem; font-family: var(--v4-font-text); font-size: 1.125rem; line-height: 1.35; font-weight: 600; scroll-margin-top: 1.5rem; }

/* A wide table scrolls inside its own box; the page never does. */
.document .table-scroll { overflow-x: auto; margin: 1.25rem 0 1.5rem; }
.document table { width: 100%; min-width: 34rem; border-collapse: collapse; border-top: 1px solid var(--v4-paper-ink); font-size: 0.875rem; line-height: 1.5; }
.document th { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; font-family: var(--v4-font-text); font-weight: 600; color: var(--v4-paper-ink-secondary); border-bottom: 1px solid var(--v4-paper-rule); }
.document td { padding: 0.6rem 0.75rem 0.6rem 0; vertical-align: top; border-bottom: 1px solid var(--v4-paper-rule); }

.document .callout, .document .fb-deletion-status { margin: 1.25rem 0 1.5rem; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 2px solid var(--v4-paper-accent); font-size: 0.875rem; }
.document .callout p { margin: 0; }
.document .fb-deletion-status[hidden] { display: none; }

/* The colophon is the printout's last line; on screen the masthead says it. */
.colophon { display: none; }

@media (max-width: 700px) {
  .masthead { padding: 7.5rem var(--v4-gutter) calc(2.5rem + var(--v4-sheet-lift)); }
  .document-sheet { padding: 2.5rem var(--v4-gutter) 4rem; }
  .document-grid { gap: 2rem; }
}

/* ---- Print. Chrome, rail and footer links go; black on white, Newsreader at
     11pt; a heading never parts from its first paragraph and a table never
     splits; a link out prints its address; the colophon closes the document. ---- */
@media print {
  .reading .nav, .reading .contents, .reading .ledger-row, .reading .v4-foot-links, .masthead .slots { display: none !important; }
  .reading, .reading .ink, .document-sheet { background: #fff !important; color: #000 !important; }
  .masthead { padding: 0 0 12pt; }
  .masthead .eyebrow, .masthead h1 { color: #000; }
  .masthead h1 { font-size: 22pt; max-width: none; }
  .document-sheet { margin: 0; padding: 0; border-radius: 0; }
  .document-grid { display: block; font-size: 11pt; }
  .document, .document a, .document th, .document td, .document h2::before { color: #000; }
  .document h2, .document h3 { break-after: avoid; page-break-after: avoid; }
  .document table, .document .table-scroll { break-inside: avoid; page-break-inside: avoid; overflow: visible; min-width: 0; }
  .document a[href^="http"]::after, .document a[href^="mailto:"]::after { content: " (" attr(href) ")"; }
  .colophon { display: block; margin-top: 24pt; padding-top: 8pt; border-top: 1px solid #000; font-size: 9pt; color: #000; }
  .colophon p { margin: 0 0 2pt; }
}