/* ============================================================ print.css — the A4 report skin (economics-report.html). A paginated, paper-first rendering of the "Why Florida" economics page: cover, table of contents with real page numbers, numbered sections, and an endnote bibliography that prints every URL in full (a hyperlink is useless on paper). Loaded only by the report page, on top of tokens.css. Like every other stylesheet here it consumes ONLY custom properties — no colour or font literal lives in this file. The report forces the light palette (data-theme="light" on ) because it is designed for ink on white; the dark theme is a screen affordance with no meaning on a page. Geometry: A4 is 210 x 297mm. Each .sheet is exactly that, with its own padding, so screen layout and print layout are identical and the paginator in print.js can number pages by counting sheets. ============================================================ */ @page { size: A4; margin: 0; } :root { --sheet-w: 210mm; --sheet-h: 297mm; --sheet-pad-x: 17mm; --sheet-pad-t: 14mm; --sheet-pad-b: 14mm; --rule: 1px solid var(--border); --rule-strong: 1px solid var(--border-strong); } * { box-sizing: border-box; } html { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { margin: 0; background: var(--surface-alt); color: var(--text); font-family: var(--font-body); font-size: 10.2pt; line-height: 1.5; text-rendering: optimizeLegibility; } /* The unpaginated source flow. print.js empties this into sheets; if the script never runs the document still reads as one long page, which is the correct no-JS fallback. */ #flow { max-width: var(--sheet-w); margin: 0 auto; padding: 10mm var(--sheet-pad-x); background: var(--surface); } body.paginated #flow { display: none; } /* ---------- sheets ---------- */ #sheets { display: flex; flex-direction: column; align-items: center; gap: 10mm; padding: 10mm 0; } .sheet { position: relative; width: var(--sheet-w); height: var(--sheet-h); flex: none; padding: var(--sheet-pad-t) var(--sheet-pad-x) var(--sheet-pad-b); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-3); } /* Guard: a single block taller than one page grows its sheet rather than being silently clipped. It should not happen with the current data — the flow is split finely enough — but losing content is never acceptable. */ .sheet.is-tall { height: auto; min-height: var(--sheet-h); } .sheet-body { flex: 1 1 auto; overflow: hidden; min-height: 0; } .sheet.is-tall .sheet-body { overflow: visible; } .sheet-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 2.5mm; margin-bottom: 6mm; border-bottom: var(--rule); font-size: 7.6pt; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .sheet-head .sh-doc { font-weight: 700; color: var(--primary); } .sheet-foot { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 2.5mm; margin-top: 6mm; border-top: var(--rule); font-size: 7.6pt; color: var(--text-faint); } .sheet-foot .sf-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-muted); } .sheet.cover .sheet-head, .sheet.cover .sheet-foot { display: none; } /* ---------- cover ---------- Selectors hang off .cover-inner, not the .cover sheet, so the cover also renders correctly in the unpaginated no-JS fallback. */ .cover-inner { display: flex; flex-direction: column; height: 100%; min-height: 200mm; } .cover-rule { height: 4mm; display: flex; margin-bottom: 11mm; flex: none; } .cover-rule span { flex: 1; } .cover-rule span:nth-child(1) { background: var(--primary); } .cover-rule span:nth-child(2) { background: var(--brand-riptide); } .cover-rule span:nth-child(3) { background: var(--brand-sun); } .cover-rule span:nth-child(4) { background: var(--accent); } .cover-brand { display: flex; align-items: center; gap: 9px; flex: none; } .cover-brand .cb-mark { display: flex; } .cover-brand .cb-mark svg { width: 26px; height: 26px; } .cover-brand .cb-name { font-family: var(--font-display); font-weight: 700; font-size: 12.5pt; letter-spacing: -0.01em; color: var(--primary); } .cover-brand .cb-name .thin { font-weight: 400; color: var(--text-muted); } .cover-gap { flex: 2 1 0; min-height: 6mm; } .cover-gap.wide { flex: 3 1 0; } .cover-kicker { font-size: 8.4pt; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .cover-inner h1 { font-family: var(--font-serif); font-weight: 400; font-size: 34pt; line-height: 1.08; letter-spacing: -0.015em; margin: 4mm 0 0; color: var(--primary); } .cover-inner .cover-lede { font-size: 11.6pt; line-height: 1.45; color: var(--text-muted); margin: 6mm 0 0; max-width: 150mm; } .cover-meta { margin-top: 8mm; padding-top: 5mm; border-top: var(--rule-strong); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; } .cover-meta .cm-k { display: block; font-size: 7.4pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.5mm; } .cover-meta .cm-v { font-weight: 600; color: var(--text); font-size: 9.4pt; } .cover-foot { padding-top: 8mm; } .cover-foot .cf-note { font-size: 8.4pt; color: var(--text-muted); max-width: 130mm; margin-top: 6mm; } .cover-foot .cf-note strong { color: var(--text); } /* The partner lockup is the same black plate the social cards carry — both marks ship as white ink, so they need it to be legible on paper. */ .cover-lockups { display: inline-flex; align-items: center; gap: 6mm; background: var(--lockup-plate); border-radius: var(--radius-md); padding: 4.5mm 7mm; } .cover-lockups .lk { display: flex; align-items: center; gap: 3.5mm; } .cover-lockups .lk + .lk { border-left: 1px solid color-mix(in srgb, var(--primary-contrast) 26%, transparent); padding-left: 6mm; } .cover-lockups .lk-label { font-size: 6.6pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--primary-contrast) 70%, transparent); } .cover-lockups img.embarc { width: 27mm; height: auto; } /* Ambition Accelerated ships its wordmark as a 1200x630 plate with the ink at (180,201)-(1019,428). Crop to that box the same way the social cards do, so the two partner lockups share a baseline. */ .aa-lockup { --aa-h: 8mm; width: calc(var(--aa-h) * 839 / 227); height: var(--aa-h); overflow: hidden; position: relative; } .aa-lockup img { position: absolute; width: calc(var(--aa-h) * 1200 / 227); height: auto; left: calc(var(--aa-h) * -180 / 227); top: calc(var(--aa-h) * -201 / 227); max-width: none; } /* ---------- table of contents ---------- */ .toc-head { font-family: var(--font-serif); font-size: 20pt; font-weight: 400; color: var(--primary); margin: 0 0 2mm; } .toc-sub { font-size: 8.8pt; color: var(--text-faint); margin: 0 0 6mm; } .toc-row { display: flex; align-items: baseline; gap: 2mm; padding: 1.6mm 0; border-bottom: 1px dotted var(--border); font-size: 10pt; } .toc-row .tr-n { flex: none; width: 12mm; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); } .toc-row .tr-t { flex: 1 1 auto; color: var(--text); } .toc-row .tr-p { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-muted); } .toc-row.lvl-1 { font-weight: 600; } .toc-row.lvl-2 { font-size: 9.2pt; } .toc-row.lvl-2 .tr-n { padding-left: 5mm; font-weight: 400; color: var(--text-faint); } .toc-row.lvl-2 .tr-t { color: var(--text-muted); } /* ---------- sections ---------- */ h2.rp-h2 { font-family: var(--font-serif); font-weight: 400; font-size: 18pt; line-height: 1.15; letter-spacing: -0.01em; color: var(--primary); margin: 0 0 3mm; } h2.rp-h2 .h-n { font-family: var(--font-display); font-size: 9.4pt; font-weight: 700; color: var(--accent); display: block; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.5mm; } h3.rp-h3 { font-family: var(--font-display); font-weight: 700; font-size: 11.6pt; line-height: 1.25; color: var(--primary); margin: 0 0 2mm; } h3.rp-h3 .h-n { color: var(--text-faint); font-weight: 400; margin-right: 2mm; font-variant-numeric: tabular-nums; } h4.rp-h4 { font-family: var(--font-display); font-size: 10.4pt; font-weight: 700; color: var(--text); margin: 0 0 1.5mm; } .rp-claim { font-family: var(--font-serif); font-size: 13pt; line-height: 1.35; color: var(--text-muted); margin: 0 0 4mm; padding-left: 4mm; border-left: 3px solid var(--brand-sun); } p.rp-p { margin: 0 0 3mm; } .rp-lead-in { font-size: 8.2pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 2mm; font-weight: 700; } ul.rp-list { margin: 0 0 3mm; padding: 0; list-style: none; } ul.rp-list li { position: relative; padding-left: 5.5mm; margin-bottom: 1.8mm; } ul.rp-list li::before { content: ""; position: absolute; left: 1mm; top: 1.7mm; width: 2mm; height: 2mm; border-radius: 50%; background: var(--brand-riptide); } /* ---------- figure tables ---------- */ table.rp-table { width: 100%; border-collapse: collapse; margin: 0 0 4mm; font-size: 9.4pt; } table.rp-table th, table.rp-table td { text-align: left; vertical-align: top; padding: 2mm 2.5mm; border-bottom: var(--rule); } table.rp-table thead th { font-size: 7.6pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); border-bottom: var(--rule-strong); font-weight: 700; } table.rp-table tbody tr:last-child td { border-bottom: var(--rule-strong); } table.rp-table td.n { font-family: var(--font-display); font-weight: 700; font-size: 13pt; color: var(--primary); white-space: nowrap; width: 27mm; letter-spacing: -0.015em; } table.rp-table td.k { width: 40mm; font-weight: 600; color: var(--text-muted); } /* ---------- hubs ---------- */ .hub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4mm; margin-bottom: 2mm; } .hub-focus { font-size: 8.6pt; color: var(--text-muted); margin: 0 0 2.5mm; } .hub-focus b { color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 7.4pt; margin-right: 1.5mm; } .hub-counts { flex: none; font-size: 8.2pt; color: var(--text-faint); text-align: right; } .hub-counts .aa-flag { color: var(--accent); font-weight: 700; display: block; } .rp-thesis { font-size: 10.4pt; color: var(--text); margin: 0 0 3mm; } /* ---------- headwinds ---------- */ .headwind { border-left: 3px solid var(--warning); padding-left: 4mm; margin-bottom: 4mm; } .headwind h4 { color: var(--warning); } /* ---------- callout ---------- */ .rp-note { border: var(--rule-strong); border-left: 3px solid var(--accent); background: var(--surface-alt); padding: 3.5mm 4mm; font-size: 8.8pt; color: var(--text-muted); margin: 0 0 4mm; } .rp-note strong { color: var(--text); } /* ---------- footnote markers + endnotes ---------- */ sup.fn { font-size: 0.62em; font-weight: 700; line-height: 0; vertical-align: super; } sup.fn a { color: var(--accent); text-decoration: none; } sup.fn .fn-sep { color: var(--text-faint); margin: 0 0.5px; } ol.rp-notes { margin: 0; padding: 0; list-style: none; } .rp-note-item { display: grid; grid-template-columns: 9mm 1fr; gap: 2mm; padding: 2.2mm 0; border-bottom: var(--rule); font-size: 8.8pt; line-height: 1.4; } .rp-note-item > span > span { display: block; } .rp-note-item .nn { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; } .rp-note-item .nt { font-weight: 700; color: var(--text); } .rp-note-item .np { color: var(--text-muted); } .rp-note-item .nu { font-family: var(--font-mono); font-size: 7.6pt; color: var(--link); word-break: break-all; } .rp-note-item .ns { color: var(--text-faint); margin-top: 1mm; } .muted { color: var(--text-faint); } a { color: var(--link); text-decoration: none; } .sheet a, #flow a { color: inherit; } .sheet .rp-note-item .nu a, #flow .rp-note-item .nu a { color: var(--link); } /* ---------- screen-only toolbar ---------- */ .rp-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--primary); color: var(--primary-contrast); font-size: 0.86rem; } .rp-bar .rb-title { font-weight: 700; margin-right: auto; display: flex; align-items: center; gap: 8px; } .rp-bar a, .rp-bar button { font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; border-radius: var(--radius-pill); padding: 7px 15px; border: 1px solid var(--primary-contrast); background: transparent; color: var(--primary-contrast); text-decoration: none; } .rp-bar .primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .rp-bar .rb-hint { flex-basis: 100%; font-size: 0.78rem; opacity: 0.8; } /* ---------- print ---------- */ @media print { body { background: var(--surface); } .rp-bar { display: none !important; } #sheets { display: block; padding: 0; gap: 0; } .sheet { box-shadow: none; break-after: page; page-break-after: always; margin: 0; } .sheet:last-child { break-after: auto; page-break-after: auto; } /* No-JS fallback: the unpaginated flow prints with sensible break rules. */ #flow { padding: 0; max-width: none; } .toc-row, .rp-note-item, table.rp-table tr, .headwind { break-inside: avoid; } h2.rp-h2, h3.rp-h3, h4.rp-h4 { break-after: avoid; } } /* ---------- narrow screens (preview only; print is unaffected) ---------- */ @media screen and (max-width: 226mm) { #sheets { padding: 12px 0; gap: 12px; align-items: flex-start; } #flow { padding: 16px; } }