/* print.css — Clean paper output.
Loaded LAST in head.html via so its rules win
the cascade at print page widths (~595–820 CSS px on A4/Letter),
which otherwise trip every screen breakpoint below 900px (mobile
TOC bar, body bottom padding) and below 1499px (sidenote → footnote
fallback).
Hides chrome, expands body full-width, renders in black on white. */
@media print {
/* ----------------------------------------------------------------
Force light on paper. The custom-property overrides drive the
rest of the cascade — use them consistently below instead of
reaching for hardcoded #fff/#000 again.
---------------------------------------------------------------- */
:root,
[data-theme="dark"],
[data-theme="cappuccino"] {
--bg: #ffffff;
--bg-nav: #ffffff;
--bg-offset: #ffffff;
--bg-subtle: #f9f9f9;
--text: #000000;
--text-muted: #333333;
--text-faint: #555555;
--border: #cccccc;
--border-muted: #aaaaaa;
--rule: #cccccc;
}
/* Reading-mode body warm tints would otherwise repaint pages cream. */
body.reading-mode { --bg: #ffffff; }
/* ----------------------------------------------------------------
Hide chrome.
Site nav is `body > header` (templates/partials/nav.html); the
essay frontmatter is `.page-shell > header.essay-frontmatter`
(essay/blog-post/reading templates) and MUST stay visible — its
is the page title.
The mark slots (monogram + epistemic figure) and frontmatter
divider are decorative; suppressing them lets the title block
collapse to a clean masthead.
---------------------------------------------------------------- */
body > header,
.page-shell > footer,
#toc,
#toc-mobile-bar,
#reading-progress,
.skip-link,
.settings-wrap,
.selection-popup,
.link-popup,
.ann-tooltip,
.ann-picker,
.sidenote-popup-overlay,
.toc-toggle,
.section-toggle,
.nav-portals,
.nav-portal-toggle,
.footer-ornament,
.content-divider,
.aftermatter-divider,
.frontmatter-mark-slot,
.metadata .meta-pagelinks,
.page-meta-footer #backlinks,
.page-meta-footer #similar-links,
.version-history-more {
display: none !important;
}
/* The mobile TOC bar's screen rule also adds `body { padding-bottom: 2.5rem }`
to clear the fixed strip — undo it on paper. */
body {
padding-bottom: 0 !important;
}
/* ----------------------------------------------------------------
Layout — single full-width column
---------------------------------------------------------------- */
body {
font-size: 11pt;
line-height: 1.55;
background: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
}
.page-shell {
display: block !important;
min-height: 0 !important;
}
#content {
display: block !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
#markdownBody,
.page-shell > #markdownBody,
body.reading-mode .page-shell > #markdownBody,
body.reading-mode.poetry > #markdownBody,
body.reading-mode.fiction > #markdownBody {
width: 100% !important;
max-width: 100% !important;
grid-column: unset !important;
margin: 0 !important;
padding: 0 !important;
}
/* ----------------------------------------------------------------
Essay frontmatter — collapse the 3-column viewport-spanning grid
to a single linear masthead. Mark slots already hidden above.
---------------------------------------------------------------- */
.essay-frontmatter {
display: block !important;
padding: 0 0 0.6em 0 !important;
margin: 0 0 1em 0 !important;
border-bottom: 1px solid var(--border);
}
.frontmatter-title {
max-width: 100% !important;
width: 100% !important;
text-align: left !important;
justify-self: stretch !important;
}
.frontmatter-title > .page-title {
font-size: 22pt;
margin: 0 0 0.2em 0;
line-height: 1.15;
}
.essay-subtitle {
font-size: 12pt;
margin: 0 0 0.4em 0;
}
.frontmatter-title .meta-description {
text-align: left !important;
}
.frontmatter-title .meta-epistemic-strip {
justify-content: flex-start !important;
}
.essay-tailmatter {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 0 1em 0 !important;
}
.essay-summary {
background: transparent !important;
border: 1px solid var(--border-muted);
padding: 0.6em 0.8em !important;
margin: 0.5em 0 1em 0 !important;
}
/* ----------------------------------------------------------------
Sidenotes — render inline as parenthetical asides.
The build's Sidenotes filter replaces Pandoc's
`section.footnotes` entirely with ``
siblings of the ref, so there is no end-of-document footnote
section to fall back to. Sidenotes.css hides .sidenote at
narrow widths (which print triggers); print.css promotes them
back inline as small italic parentheticals so the surrounding
sentence flow stays intact — block-style footnotes mid-sentence
leave dangling clauses on the next line.
---------------------------------------------------------------- */
.sidenote {
display: inline !important;
position: static !important;
width: auto !important;
max-width: none !important;
margin: 0;
padding: 0;
border: none;
font-size: 0.85em;
font-style: italic;
color: var(--text-muted);
}
.sidenote::before { content: " ["; font-style: normal; }
.sidenote::after { content: "]"; font-style: normal; }
.sidenote-para {
display: inline !important;
margin: 0 !important;
}
.sidenote-para + .sidenote-para::before {
content: " / ";
font-style: normal;
color: var(--text-faint);
}
.sidenote-num {
display: none !important;
}
.sidenote-ref a {
color: var(--text);
text-decoration: none;
}
/* ----------------------------------------------------------------
User annotations — strip on-screen highlight backgrounds; keep
a faint underline so the marker still surfaces on paper.
---------------------------------------------------------------- */
mark.user-annotation {
background: transparent !important;
color: inherit !important;
padding: 0 !important;
text-decoration: underline;
text-decoration-color: var(--text-faint);
text-decoration-thickness: 0.5pt;
text-underline-offset: 0.18em;
}
/* ----------------------------------------------------------------
Figures — strip on-screen card chrome (bg-offset card, inner
image border, drop shadow). Plain image + caption reads more
naturally on paper.
---------------------------------------------------------------- */
#markdownBody figure {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 1em auto !important;
max-width: 100% !important;
}
#markdownBody figure img {
border: none !important;
}
#markdownBody figcaption {
font-size: 9pt;
margin-top: 0.3em;
}
/* ----------------------------------------------------------------
Drop cap — quieten the magazine flourish; at 3.8em it prints as
a giant black blob that wastes the first half page.
---------------------------------------------------------------- */
#markdownBody > p:first-of-type::first-letter,
#markdownBody .dropcap p::first-letter,
body.reading-mode.fiction > #markdownBody h2 + p::first-letter {
font-size: 2.4em;
line-height: 0.9;
}
/* ----------------------------------------------------------------
Page setup
---------------------------------------------------------------- */
@page {
margin: 2cm 2cm;
}
/* ----------------------------------------------------------------
Typography adjustments
---------------------------------------------------------------- */
h1, h2, h3, h4 {
page-break-after: avoid;
break-after: avoid;
}
p, li, blockquote {
orphans: 3;
widows: 3;
}
pre, figure, .exhibit, table {
page-break-inside: avoid;
break-inside: avoid;
}
/* Decorative inline link-icon glyphs (wikipedia W, arxiv X, github,
etc.) — they render as an inline-block 0.75em × 0.75em masked
SVG, fine on screen but on paper they print as an opaque black
speckle next to every external link. Suppress them entirely.
Critical: this also unsets the fixed width/height/mask so any
`::after` content from another rule renders as plain inline text. */
a[data-link-icon-type="svg"]::after,
a[data-link-icon]::after {
content: none !important;
display: none !important;
}
/* External links keep their default underline — readers can follow
the live URL via the PDF's preserved link metadata. We don't
inline the href as printed text because (a) it duplicates the
link, (b) `word-break: break-all` URLs interact badly with the
link-icon ::after we just suppressed, and (c) it makes the page
visually noisy. */
/* ----------------------------------------------------------------
Code blocks — strip background, border only
---------------------------------------------------------------- */
pre, code {
background: transparent !important;
border: 1px solid var(--border-muted) !important;
box-shadow: none !important;
}
/* ----------------------------------------------------------------
Page meta footer — keep epistemic + version history compact;
collapse the auto-fit grid so columns don't get pushed onto a
new page when the body ended near a break.
---------------------------------------------------------------- */
.page-meta-footer {
margin-top: 1.5em;
padding: 1em 0 0 0 !important;
border-top: 1px solid var(--border);
gap: 0.8em !important;
}
.meta-footer-full,
.meta-footer-grid {
width: 100% !important;
max-width: 100% !important;
}
.meta-footer-grid {
display: block !important;
}
.meta-footer-section {
margin-bottom: 0.8em;
}
}