/* Nobedan — the paper edition.
 *
 * Print is first-class, not a courtesy: the same artifact renders the
 * paper/PDF rendition, and "the price is printed" is literal — the
 * serial-numbered price page has to be beautiful on paper (DESIGN.md).
 *
 * Load this alongside the screen stylesheets; everything is inside the
 * @media print query, so linking it unconditionally is safe.
 *
 * Known browser limit: @page margin boxes (running headers/footers, page
 * numbers) are not implemented in Chrome or Safari. There is therefore no
 * running serial and no page number on the paper edition: CSS alone cannot
 * put one on every sheet. What the reader gets instead is the serial where
 * it is load-bearing — on the price page and in the colophon, both set as
 * ordinary content. A page that wants a printed-only line (a countersign
 * rule, a "page 1 of 8") has to ship it in the HTML marked .print-only;
 * the switch for that is at the foot of this file.
 */

@media print {
	@page {
		size: letter portrait;
		margin: 16mm 16mm 18mm;
	}

	:root {
		/* Paper is paper. Rules are the text colour here as everywhere —
		 * on a laser proof that is the only thing that reliably prints —
		 * and rank is width, four steps, as on screen. */
		--ink-base: #000;
		--paper-base: #fff;
		--paper: var(--paper-base);
		--ink: var(--ink-base);
		--rule-color: var(--ink);
		--rule-color-quiet: var(--ink);
		--rule-color-strong: var(--ink);
		/* Screen grey is generous and toner grey is not. 42%-ink faint text
		 * is legible on a display and ghostly on a laser proof — and the
		 * faint roles carry the spec-sheet labels and the placeholder
		 * blocks, which are exactly what gets read with a pen in hand. */
		--ink-muted: color-mix(in oklab, var(--ink) 78%, var(--paper));
		--ink-faint: color-mix(in oklab, var(--ink) 58%, var(--paper));
		--rule-heavy-width: 3pt;
		--rule-medium-width: 1.2pt;
		--rule-hairline-width: 0.6pt;
		--rule-fine-width: 0.3pt;
		--page-margin: 0mm;
		--sheet-max: 100%;
		--label-col: 32mm;
		--gutter: 8mm;
		/* On screen the measure is the window's problem; on Letter the body
		 * column is 145mm wide, which sets about ninety characters a line —
		 * half again the length a reader tracks comfortably. Holding the
		 * measure at 120mm sets about seventy-five, and the 25mm it gives
		 * back is not waste: it is the margin this document is read in,
		 * with a pen. */
		--measure: 120mm;
		/* Lopsided on paper too: a rule sits close under its own heading
		 * and far below the copy it left behind. */
		--row-lead: 2mm;
		--row-trail: 9mm;
		--row-pad: var(--row-trail);

		/* Print type scale — fixed points, no viewport units, same three
		 * sizes at the same 1.5 ratio, with the hero one step above. */
		--text-body: 10pt;
		--text-caption: 6.7pt;
		--text-heading: 15pt;
		--text-hero: 22.5pt;

		/* The graphic register, same arithmetic: a half step below body
		 * (10 / sqrt(1.5)), and a card numeral that fits a Letter column
		 * rather than a third of a wide screen. */
		--text-graphic: 8.2pt;
		--text-graphic-figure: 30pt;

		--text-masthead: 28pt;
		--text-display: 44pt;
		--text-mega: 54pt;

		/* Aliases for the instrument shadow roots; no sizes of their own. */
		--text-label: var(--text-caption);
		--text-small: var(--text-caption);
		--text-lead: var(--text-heading);
		--text-3: var(--text-heading);
		--text-2: var(--text-heading);
		--text-1: var(--text-masthead);

		--space-3xs: 1pt;
		--space-2xs: 2pt;
		--space-xs: 4pt;
		--space-s: 8pt;
		--space-m: 12pt;
		--space-l: 18pt;
		--space-xl: 26pt;
		--space-2xl: 34pt;
		--space-3xl: 46pt;
	}

	html,
	body {
		background: #fff;
		color: #000;
		font-size: var(--text-body);
		line-height: 1.45;
		-webkit-print-color-adjust: economy;
		print-color-adjust: economy;
	}

	.page {
		display: block;
	}

	/* ── The spec sheet, rebuilt for a sheet ─────────────────────────────
	 * The label column is a CSS grid on screen, and a grid item that
	 * crosses a page boundary is *sliced* by WebKit rather than broken:
	 * the printed proof came back with half a line of type at the foot of
	 * one page and the other half of the same line at the head of the next
	 * (Safari/WebKit print, 2026-08-24). Forcing every row to stay whole is
	 * the other failure — a page-tall row jumps to the next sheet and
	 * leaves this one half empty.
	 *
	 * So paper builds the same grammar out of a float and an indent. The
	 * label sits in its column; the body holds that column open on every
	 * sheet it runs onto; and the copy fragments the way block copy does,
	 * which is the only way orphans and widows mean anything.
	 */
	.row {
		display: block;
	}

	/* The label is a float, so the row has to contain it. */
	.row::after {
		content: "";
		display: block;
		clear: both;
	}

	.row-label {
		float: left;
		width: var(--label-col);
		margin-right: var(--gutter);
	}

	.row-body {
		margin-left: calc(var(--label-col) + var(--gutter));
	}

	/* Nothing bleeds off a sheet of Letter, so a bleed becomes a full-width
	 * band inside the page margins. */
	.bleed,
	.bleed-inner {
		max-width: 100%;
		margin-inline: 0;
		padding-inline: 0;
	}

	.bleed-inner {
		padding-block: var(--space-l);
	}

	/* The colour blocks are the one place ink coverage is deliberate: the
	 * accent ground has to survive the printer or the artifact loses its
	 * only hue. */
	.bleed--accent,
	.bleed--ink,
	.masthead--accent,
	.colophon--accent {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		padding-inline: var(--space-m);
	}

	/* ── Breaks ────────────────────────────────────────────────────────── */

	/* A .row is a label plus a body that may run for pages, so it is not a
	 * unit paper can hold: asking for it whole pushes a page-tall row onto
	 * the next sheet and leaves half of this one blank. Long rows break;
	 * the structures inside them are what stay whole. */
	figure,
	blockquote,
	.price,
	.spec-list,
	.colophon {
		break-inside: avoid;
	}

	h1, h2, h3, h4, h5, h6, .display, .moment, .eyebrow {
		break-after: avoid;
	}

	/* A label alone at the foot of a sheet, its body overleaf, is the
	 * spec-sheet grammar coming apart — and a label cut through the middle
	 * of its own letterforms is worse. */
	.row-label {
		break-inside: avoid;
		break-after: avoid;
	}

	/* Same rule one size down: a label/value pair is one thing. */
	.spec-list dt {
		break-after: avoid;
	}

	.spec-list dd {
		break-inside: avoid;
	}

	p, li, blockquote {
		orphans: 3;
		widows: 3;
	}

	/* A marked item is one claim. WebKit does not honour widows on a list
	 * item — it left two lines of a five-line claim stranded at the head of
	 * the next sheet — so the claim is asked to stay whole instead. */
	ul.marked > li,
	ol.marked > li {
		break-inside: avoid;
	}

	.page-break,
	.break-before {
		break-before: page;
	}

	.break-after {
		break-after: page;
	}

	/* The price page stands alone on paper: it opens a sheet, and the
	 * signed part of it — serial, figure, terms, countersign — is one
	 * object that never splits. Anything the section carries after that
	 * (a ledger, a schedule) may run onto the next sheet; asking the whole
	 * section to stay whole is asking for something taller than Letter,
	 * which the browser answers by ignoring the request entirely. */
	.price-page {
		break-before: page;
	}

	.price-page .row--strong {
		break-inside: avoid;
	}

	/* A ledger may run long; keep its header on every page it touches. */
	.ledger thead {
		display: table-header-group;
	}

	.ledger tr {
		break-inside: avoid;
	}

	.scroll-x {
		overflow: visible;
	}

	/* Paper has no scroll box, so the on-screen floor that forces one is
	 * dropped and the ledger fits the measure. */
	.scroll-x > .ledger {
		min-width: 0;
	}

	/* Cards are three columns on a screen and three stacked claims on a
	 * sheet: Letter has no room for three measures side by side. They carry
	 * no rules, so space is the only thing keeping them apart — give it. */
	.cards {
		display: block;
	}

	.cards > .card + .card {
		margin-top: var(--space-xl);
	}

	.card {
		break-inside: avoid;
	}

	/* An exhibit is a figure at reading scale; on paper it takes the
	 * measure and stays with its caption. */
	.exhibit {
		break-inside: avoid;
		max-width: var(--measure);
	}

	.exhibit > .figure-ground {
		max-height: 80mm;
	}

	/* Paper has no ground to rise over: the section that overlaps the shoot
	 * photograph on screen is an ordinary section here. */
	.section--on-photo {
		margin-top: 0;
		margin-inline: 0;
		padding: 0;
		background: none;
	}

	.bleed--photo figcaption {
		position: static;
		color: var(--ink-muted);
	}

	.bleed--photo figcaption .caption-text,
	.bleed--photo figcaption .todo-ben {
		color: var(--ink-muted);
		border-color: var(--rule-color);
	}

	/* ── Ink economy ───────────────────────────────────────────────────── */

	.masthead {
		padding-top: 0;
	}

	.row-label--sticky {
		position: static;
	}

	a {
		text-decoration: none;
		border-bottom: 0.4pt solid #000;
	}

	/* Content links print their destination; navigation and index links do
	 * not, because their targets are meaningless on paper. */
	.row-body a[href^="http"]::after,
	p a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: var(--text-caption);
		color: #444;
		word-break: break-all;
	}

	.no-print {
		display: none !important;
	}

	.print-only {
		display: revert;
	}

	img, svg {
		max-width: 100%;
	}

	/* A full-bleed photograph is a page-eater on Letter: cap it so a figure
	 * and the section it interrupts can share a sheet. */
	figure img,
	.figure-ground {
		max-height: 110mm;
		object-fit: cover;
	}

	/* The photo stand-in is a solid ink field: never print it. It keeps the
	 * screen's 16/9 frame, though — a stand-in that prints at a different
	 * shape than the photograph it stands in for is not standing in for
	 * anything. The cap above governs both. */
	.figure-ground {
		background: none;
		border: 0.6pt dashed var(--rule-color);
	}
}

/* Screen-side half of the print/screen switch. */
@media screen {
	.print-only {
		display: none;
	}
}