/* Swiss-bridge: align the mkdocs essay typography with the Swiss site * tokens. The inline script in comments.html sets data-md-color-scheme * + data-dark on based on localStorage.km_tweaks so the page * loads in whichever mode the user picked on the rest of the site. * * Swiss canon (from CLAUDE.md): * paper: light #fff, dark #000 * ink: light #000, dark #fff (single tone, no grey ladder) * link: light #0000EE, dark #8AB4F8 * link hover: --red on both (default #FF0000) */ :root { /* Swiss tokens — but the essay-detail surface uses Tufte's warm * off-white paper (#fffff8) instead of pure #fff, matching the * intempus.org reading background the user picked as the target. */ --paper: #fffff8; --ink: #111111; --link: #0000EE; --link-hover: #FF0000; --red: #FF0000; } html[data-md-color-scheme="slate"], html[data-dark="on"] { /* Dark essay mode: warm near-black paper, off-white ink. Lighter * shades need higher mix percentages than light mode — at 12% the * resulting transparent white reads as invisible on the dark * background, so borders and dividers disappear. */ --paper: #15140f; --ink: #f1ede3; --link: #8AB4F8; --link-hover: var(--red); } /* Explicit per-mode shade ladder so borders/dividers/inputs stay visible * in dark mode (the default color-mix percentages were tuned for light * mode and resolve to near-invisible transparent-white in slate). */ html[data-md-color-scheme="slate"], html[data-dark="on"] { --md-default-fg-color--light: var(--ink); --md-default-fg-color--lighter: color-mix(in srgb, var(--ink) 32%, transparent); --md-default-fg-color--lightest: color-mix(in srgb, var(--ink) 16%, transparent); } /* Text selection: match the rest of the Swiss site (styles/app.css) — * invert paper/ink so highlights read as a solid ink block in either mode. * `background-color` (not shorthand `background`) so we don't wipe images. */ ::selection { background-color: var(--ink); color: var(--paper); } ::-moz-selection { background-color: var(--ink); color: var(--paper); } /* Body type: Newsreader Variable, matching intempus.org/writings/. */ html, body, .md-typeset { font-family: 'Newsreader', 'Newsreader Variable', Georgia, 'Times New Roman', serif; font-feature-settings: "kern", "liga"; } .md-typeset { font-size: 18px; line-height: 1.5; } .md-typeset p { margin: 16px 0; } .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { font-family: 'Newsreader', 'Newsreader Variable', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; /* Balance multi-line headings so the last line isn't an orphan. */ text-wrap: balance; } /* Smarter paragraph wrapping. Two rules: * - `text-wrap: pretty` → Chromium ≥117 / Safari ≥17.4 push extra * words to the previous line so the LAST line isn't a one-or-two- * word orphan ("Tom Sachs." dangling on its own line). * - `overflow-wrap: break-word` → guards against long URLs / un- * breakable tokens overflowing the column. * Auto-hyphenation is intentionally NOT enabled — it reads as too * eager / textbook-y in long-form essays. */ .md-typeset p, .md-typeset li, .md-typeset blockquote p, .md-typeset .sidenote, .md-typeset .marginnote, .md-typeset .article-description { text-wrap: pretty; overflow-wrap: break-word; } .md-typeset h2 { font-size: 1.7em; margin: 2em 0 0.6em; } .md-typeset h3 { font-size: 1.35em; margin: 1.8em 0 0.5em; } /* Article header — title in Crimson Pro to match the intempus.org spec, * description and meta row in Newsreader / JetBrains Mono. Sizes are * absolute px so the header reads identically across breakpoints until * the mobile media query kicks in. */ .md-typeset .article-title { font-family: 'Crimson Pro', 'Newsreader', Georgia, serif; font-size: 46px; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); font-weight: 600; margin: 1.5em 0 12px; } .md-typeset .article-description { font-family: 'Newsreader', 'Newsreader Variable', Georgia, serif; font-size: 19px; line-height: 1.45; color: color-mix(in srgb, var(--ink) 78%, transparent); margin: 0 0 16px; } .md-typeset .article-description em { font-style: italic; } .article-meta-row, .article-byline, .article-date { font-family: 'JetBrains Mono', 'Ubuntu Mono', 'Fira Mono', monospace; } @media (max-width: 720px) { .md-typeset { font-size: 17px; } .md-typeset .article-title { font-size: 34px; } .md-typeset .article-description { font-size: 17px; } } /* Map Material's paint vars to Swiss tokens so anything driven by them * (background, body text, default link colour, code blocks, dividers) * inherits the right mode automatically. */ :root, html[data-md-color-scheme="default"], html[data-md-color-scheme="slate"] { --md-default-bg-color: var(--paper); --md-default-bg-color--light: var(--paper); --md-default-bg-color--lighter: var(--paper); --md-default-bg-color--lightest: var(--paper); --md-default-fg-color: var(--ink); --md-default-fg-color--light: var(--ink); --md-default-fg-color--lighter: color-mix(in srgb, var(--ink) 12%, transparent); --md-default-fg-color--lightest: color-mix(in srgb, var(--ink) 6%, transparent); --md-typeset-color: var(--ink); --md-typeset-a-color: var(--link); --md-accent-fg-color: var(--red); --md-accent-fg-color--transparent: color-mix(in srgb, var(--red) 10%, transparent); --md-code-bg-color: color-mix(in srgb, var(--ink) 4%, var(--paper)); --md-code-fg-color: var(--ink); --md-footer-bg-color: var(--paper); --md-footer-fg-color: var(--ink); } /* Dark-mode shade ladder — re-asserted AFTER the mapping block above. * That block's selector list includes slate, so it was overriding the * intended dark ladder with the light-tuned 6%/12% mixes, leaving every * divider/border driven by --lighter/--lightest (hr, blockquote bar, * table rules, kit-card frames…) near-invisible on the near-black paper. * Higher percentages keep them legible in dark mode. */ html[data-md-color-scheme="slate"], html[data-dark="on"] { --md-default-fg-color--lighter: color-mix(in srgb, var(--ink) 32%, transparent); --md-default-fg-color--lightest: color-mix(in srgb, var(--ink) 19%, transparent); } /* In-essay links follow the Tufte spec: same colour as the body (--ink) * with a subtle underline, so the page reads as calm prose. They swap * to --red on hover (with a matching red underline) so the affordance * is unambiguous. Blue is reserved for the /essays index and the rest * of the Swiss surface where standard hyperlink semantics are expected. */ .md-typeset a, .md-typeset a:visited, .essay-body a, .essay-body a:visited { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 55%, transparent); text-underline-offset: 2px; text-decoration-thickness: 1px; } .md-typeset a:hover, .md-typeset a:active, .essay-body a:hover, .essay-body a:active { color: var(--red); text-decoration-color: var(--red); } /* Page background follows --paper, body text follows --ink. */ html, body, .md-container, .md-main, .md-content, .md-content__inner { background-color: var(--paper) !important; color: var(--ink); } /* Utility links (return-to-feed arrow + share icons) stay grey — the * Swiss link blue is reserved for in-prose hyperlinks. Both swap to * --red on hover for consistency with the rest of the site. */ .return2feed a, .return2feed a:visited, .return2feed a:link, .md-typeset .return2feed a, .md-typeset .return2feed a:visited, .article-meta .share a, .article-meta .share a:visited, .article-meta .share a:link, .md-typeset .article-meta .share a, .share a, .share a:visited, .share a:link { color: color-mix(in srgb, var(--ink) 45%, transparent); text-decoration: none; } /* Hover: just deepen the grey instead of swapping to red, so these * utility controls don't compete visually with the in-prose red hover. */ .return2feed a:hover, .md-typeset .return2feed a:hover, .article-meta .share a:hover, .md-typeset .article-meta .share a:hover, .share a:hover { color: color-mix(in srgb, var(--ink) 80%, transparent); text-decoration: none; } /* Belt-and-braces: hide anything the empty header/footer blocks in * comments.html might have left behind (Material auto-inserts an empty *
with sticky positioning). */ .md-header, .md-tabs, .main-navigation, .blur-overlay, section.footer { display: none !important; } .article-meta-row { display: flex; align-items: center; gap: 0.7em; flex-wrap: nowrap; /* one line on desktop */ font-family: 'JetBrains Mono', 'Ubuntu Mono', 'Fira Mono', monospace; font-size: 12px; color: color-mix(in srgb, var(--ink) 62%, transparent); margin: 0 0 18px; } .article-meta-row .article-dot { opacity: 0.6; } .article-meta-row .article-byline { display: inline-flex; align-items: center; gap: 0.95em; /* portrait breathing room */ white-space: nowrap; } .article-meta-row .profilepic { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; } .article-meta-row .article-share-inline { display: inline-flex; align-items: center; gap: 0.9em; margin-left: auto; font-size: 14px; white-space: nowrap; } .article-meta-row .article-share-inline a, .article-meta-row .article-share-inline a:visited, .md-typeset .article-meta-row .article-share-inline a, .md-typeset .article-meta-row .article-share-inline a:visited { color: color-mix(in srgb, var(--ink) 45%, transparent); text-decoration: none; } .article-meta-row .article-share-inline a:hover, .md-typeset .article-meta-row .article-share-inline a:hover { color: color-mix(in srgb, var(--ink) 80%, transparent); } /* Font Awesome's fa-solid paper-plane glyph (the email share icon) * doesn't pick up the link's `color` like the fa-brands icons do — * the kit renders it as an SVG with its own fill. Force every icon * inside the share row to inherit so they all match the same grey. */ .article-meta-row .article-share-inline a i, .article-meta-row .article-share-inline a svg, .article-meta-row .article-share-inline a svg path { color: inherit !important; fill: currentColor !important; } /* PDF "button": just a bordered box. Hover deepens the border to * full-ink rather than flooding the box with fill, so it stays calm * next to the rest of the line. */ .md-typeset .article-pdf, .md-typeset .article-pdf:visited { display: inline-block; padding: 0.18em 0.7em; border: 1.2px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 4px; color: color-mix(in srgb, var(--ink) 72%, transparent); text-decoration: none; font-size: 12px; letter-spacing: 0.02em; background: transparent; } .md-typeset .article-pdf:hover { color: var(--ink); border-color: var(--ink); background: transparent; } /* Mobile: meta row wraps to two clean lines. Byline+date+PDF stay on * the first line; share icons drop to a second line, left-aligned. */ @media (max-width: 720px) { .article-meta-row { flex-wrap: wrap; row-gap: 0.8em; } .article-meta-row .article-share-inline { margin-left: 0; width: 100%; } } .article-divider { border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); margin: 1.4em 0 2em; } /* Subscribe-section copy + fallback "Email me" link share one colour * with a subtle underline; the link doesn't get the default-browser * blue treatment. Applies to every state including the disabled-form * fallback message that surfaces after a network hiccup. */ .subscribe-section a, .subscribe-section a:visited, .subscribe-section a:link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; text-decoration-thickness: 1px; } .subscribe-section a:hover { color: var(--red); text-decoration-color: var(--red); } /* Linked hover for sidenote/marginnote pairs (≥1000px, where the rail * is visible). Hovering the small digit on the body brings the matching * rail-side note into red emphasis, and hovering the note does the * reverse. The reverse direction uses :has() to read the sibling * relationship from the label backwards. */ @media (min-width: 1001px) { .md-typeset label.margin-toggle:hover, .md-typeset label.margin-toggle:has(+ input + .sidenote:hover), .md-typeset label.margin-toggle:has(+ input + .marginnote:hover), .md-typeset label.margin-toggle:has(+ input + .marginfigure:hover) { color: var(--red); } .md-typeset label.margin-toggle.sidenote-number:hover ~ .sidenote, .md-typeset label.margin-toggle:hover ~ .marginnote, .md-typeset label.margin-toggle:hover ~ .marginfigure, .md-typeset .sidenote:hover, .md-typeset .marginnote:hover, .md-typeset .marginfigure:hover { color: var(--ink); } .md-typeset .sidenote:hover::before, .md-typeset label.margin-toggle.sidenote-number:hover ~ .sidenote::before { color: var(--red); } /* Subtle outline so the link is visually unambiguous even before * the digit changes colour. */ .md-typeset .sidenote, .md-typeset .marginnote, .md-typeset .marginfigure { transition: color 120ms ease; } .md-typeset label.margin-toggle { transition: color 120ms ease; } } /* Explicit dark-mode contrast for the post-redesign tokens that don't * pick up the right token through Material's machinery on their own: * the H1, the description, the sidenote/marginnote rail, the subscribe * form input + label. All resolve to --ink (white-ish) on a --paper * (near-black) background. */ html[data-dark="on"] .md-typeset .article-title, html[data-md-color-scheme="slate"] .md-typeset .article-title { color: var(--ink) !important; } html[data-dark="on"] .md-typeset .article-description, html[data-md-color-scheme="slate"] .md-typeset .article-description { color: color-mix(in srgb, var(--ink) 82%, transparent) !important; } html[data-dark="on"] .md-typeset .sidenote, html[data-md-color-scheme="slate"] .md-typeset .sidenote, html[data-dark="on"] .md-typeset .marginnote, html[data-md-color-scheme="slate"] .md-typeset .marginnote, html[data-dark="on"] .md-typeset .marginfigure, html[data-md-color-scheme="slate"] .md-typeset .marginfigure { color: color-mix(in srgb, var(--ink) 78%, transparent) !important; } html[data-dark="on"] .md-typeset .marginfigure .caption, html[data-md-color-scheme="slate"] .md-typeset .marginfigure .caption { color: color-mix(in srgb, var(--ink) 78%, transparent); } html[data-dark="on"] .subscribe-section p, html[data-md-color-scheme="slate"] .subscribe-section p { color: var(--ink) !important; opacity: 0.85; } html[data-dark="on"] .subscribe-form, html[data-md-color-scheme="slate"] .subscribe-form { background: var(--paper) !important; border-color: color-mix(in srgb, var(--ink) 28%, transparent) !important; } html[data-dark="on"] .subscribe-form input[type="email"], html[data-md-color-scheme="slate"] .subscribe-form input[type="email"] { color: var(--ink) !important; background: transparent !important; } html[data-dark="on"] .subscribe-form button, html[data-md-color-scheme="slate"] .subscribe-form button { color: var(--ink) !important; } /* ── Post-redesign dark-mode contrast patches ────────────────────────── * These elements style themselves with Material's --md-default-fg-color* * tokens, which the custom data-dark mode never remaps, so they stayed * near-black on the near-black --paper. Re-tint each from --ink. */ /* Subscribe placeholder (base uses --md-default-fg-color--light). */ html[data-dark="on"] .subscribe-form input[type="email"]::placeholder, html[data-md-color-scheme="slate"] .subscribe-form input[type="email"]::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent) !important; } /* Mobile stacks the field + button, each with its own border drawn from a * Material token; retint so the boxes are visible in dark mode. */ html[data-dark="on"] .subscribe-form input[type="email"], html[data-md-color-scheme="slate"] .subscribe-form input[type="email"], html[data-dark="on"] .subscribe-form button, html[data-md-color-scheme="slate"] .subscribe-form button { border-color: color-mix(in srgb, var(--ink) 30%, transparent) !important; } /* Standalone blockquotes + epigraphs hardcode --md-default-fg-color and an * opacity, which together read as barely-visible in dark mode. */ html[data-dark="on"] .md-typeset blockquote, html[data-md-color-scheme="slate"] .md-typeset blockquote, html[data-dark="on"] .md-typeset blockquote p, html[data-md-color-scheme="slate"] .md-typeset blockquote p, html[data-dark="on"] .md-typeset .epigraph blockquote, html[data-md-color-scheme="slate"] .md-typeset .epigraph blockquote { color: color-mix(in srgb, var(--ink) 82%, transparent) !important; opacity: 1; } /* The sidenote/marginnote "+" toggle glyph inherits a Material token too. */ html[data-dark="on"] .md-typeset label.margin-toggle .fa-circle-plus, html[data-md-color-scheme="slate"] .md-typeset label.margin-toggle .fa-circle-plus { color: color-mix(in srgb, var(--ink) 55%, transparent) !important; } /* In-body "---" dividers use --md-default-fg-color--lightest, which the * custom dark mode never remaps, so the rule rendered as a black-on-black * (invisible) line. Retint from --ink. */ html[data-dark="on"] .md-typeset hr, html[data-md-color-scheme="slate"] .md-typeset hr, html[data-dark="on"] .md-typeset .md-content__inner > hr, html[data-md-color-scheme="slate"] .md-typeset .md-content__inner > hr { border-top-color: color-mix(in srgb, var(--ink) 22%, transparent) !important; } /* Sidenote/marginnote links use --md-default-fg-color--light, which read as * a near-invisible dim brown against the dark note background. Force --ink * (their hover only changes the underline colour, so this is safe). */ html[data-dark="on"] .md-typeset .sidenote a, html[data-md-color-scheme="slate"] .md-typeset .sidenote a, html[data-dark="on"] .md-typeset .marginnote a, html[data-md-color-scheme="slate"] .md-typeset .marginnote a { color: var(--ink) !important; text-decoration-color: color-mix(in srgb, var(--ink) 55%, transparent) !important; } /* In-essay link underlines: the base rule mixes --ink at 55% into the * transparent underline. In dark mode the near-white ink at 55% + 1px * thickness reads as invisible on the warm-black page. Force a solid * ink underline and a slightly thicker rule so the affordance is legible. */ html[data-dark="on"] .md-typeset a, html[data-dark="on"] .md-typeset a:visited, html[data-md-color-scheme="slate"] .md-typeset a, html[data-md-color-scheme="slate"] .md-typeset a:visited { text-decoration-color: var(--ink) !important; text-decoration-thickness: 1.5px !important; } /* Blockquote left-bar: Material's slate scheme leaves --md-default-fg-color--lighter * mapped to a near-black colour, so the bar reads as pure black against the * warm-black paper. Force an ink-derived tint instead. Selector matches the * Material default (.md-typeset blockquote) so specificity beats the theme. */ html[data-dark="on"] .md-typeset blockquote:not(.epigraph blockquote):not(.twitter-tweet), html[data-md-color-scheme="slate"] .md-typeset blockquote:not(.epigraph blockquote):not(.twitter-tweet) { border-left-color: color-mix(in srgb, var(--ink) 40%, transparent) !important; } /* Embedded mode — the page is rendered inside an OS-mode iframe Window. * Drop the back-link (Window has its own back/close) and the floating * dark-mode toggle (OS menubar owns it). Keep the subscribe form: it's * still useful inside the Window. Also align the paper colour with the * OS desktop's pure white / true black rather than Tufte's warm * #fffff8 / #15140f, so the Window background matches the surrounding * desktop chrome. */ html.essay-embedded .return2feed, html.essay-embedded .essay-darkmode-toggle { display: none !important; } html.essay-embedded { --paper: #ffffff; } html.essay-embedded[data-dark="on"], html.essay-embedded[data-md-color-scheme="slate"] { --paper: #0d0d0d; } html.essay-embedded body { padding-top: 0; } html.essay-embedded .md-main__inner { padding-top: 0.5em; } /* Floating "← Essays" back-link, mirrored to the top-left so it sits * opposite the dark-mode toggle on the top-right. Both float free of * the prose column. */ .return2feed { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 50; padding: 0 !important; } .return2feed a { font-size: 12px !important; } /* Floating dark-mode toggle. Lives top-right on essay pages so the * reader can flip schemes without site chrome. Hidden when the OS shell * owns the toggle (handled inline in comments.html). */ .essay-darkmode-toggle { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 50; width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; transition: border-color 120ms ease, color 120ms ease, background 120ms ease; } .essay-darkmode-toggle:hover { border-color: var(--ink); } .essay-darkmode-toggle .dark-icon-sun { display: none; } .essay-darkmode-toggle .dark-icon-moon { display: inline; } html[data-dark="on"] .essay-darkmode-toggle .dark-icon-sun { display: inline; } html[data-dark="on"] .essay-darkmode-toggle .dark-icon-moon { display: none; } /* {.thanks} block — italic single-line credit at the foot of an essay, * preceded by a three-asterisk divider with airy space above and lots * of space below. Matches the intempus.org acknowledgements style. */ .md-typeset .thanks { display: block; margin: 3.5em 0 6em; font-style: italic; line-height: 1.55; color: color-mix(in srgb, var(--ink) 80%, transparent); text-align: left; } .md-typeset .thanks::before { content: "* * *"; display: block; text-align: center; letter-spacing: 0.4em; color: color-mix(in srgb, var(--ink) 35%, transparent); font-style: normal; margin-bottom: 3em; } /* ============================================================ * Print stylesheet — also targeted by the scripts/build-essay-pdfs.mjs * pipeline, which loads /essays/?pdf=1 in headless Chrome and * captures the result with --print-to-pdf. The PDF is meant to look * like the live essay (light mode, prose column + margin rail, real * marginfigures), so we KEEP the rail layout rather than inlining * sidenotes the way a paper-thin printout would. * * The page size is set to fit the 968px prose+rail layout plus * comfortable margins. Custom px @page sizes are honoured by Chrome * during --print-to-pdf. * ============================================================ */ @media print { /* A4 portrait. 210×297mm minus 18mm/14mm margins = 178mm × 271mm * usable. At 96 DPI that's ~673 × 1024 px. The Tufte layout has to * scale down accordingly: * prose column 480px + 14px gap + 162px rail = 656px (fits with * 17px buffer for safety against sub-pixel rounding). * Body font scales to 11.5pt, sidenote to 9pt — print typography * convention; smaller than screen but very legible on paper. */ @page { size: A4 portrait; margin: 16mm 14mm 18mm 14mm; } html, body { background: #ffffff !important; color: #000 !important; } /* Always-light: even if the page was opened with dark mode set, * the printed/PDF version should match the canonical light styling. */ html, html[data-dark="on"], html[data-md-color-scheme="slate"] { --paper: #ffffff !important; --ink: #1c1b17 !important; } /* Hide the separator dot that sits before the (hidden in print) * PDF button so the meta row doesn't end with an orphaned `·`. */ .article-meta-row .article-dot:has(+ .article-pdf) { display: none !important; } .return2feed, .article-share-row, .article-pdf, .subscribe-section, #__comments, #__comments + script, .giscus, .giscus-frame, .md-header, .md-footer, .md-sidebar, .md-tabs, .main-navigation, .blur-overlay, .essay-darkmode-toggle, .md-search, .md-source { display: none !important; } /* Keep the share row in the PDF — the user wanted these icons present * so the printed essay has a quick path back to the social channels. * Force a darker grey so they render at decent contrast on paper. */ .article-meta-row .article-share-inline, .article-meta-row .article-share-inline a { display: inline-flex !important; color: #6a6a6a !important; fill: currentColor !important; } /* The thanks block uses 6em of bottom-margin on screen so the page * has airy whitespace before the subscribe section. In print, that * tail pushes onto a second blank A4 page — drop it. */ .md-typeset .thanks { margin-bottom: 0 !important; } .md-typeset .thanks::before { margin-bottom: 1.6em !important; } /* In print the prose+rail block centres on the page, calculated from * the actual visible footprint (prose + gap + rail = 656px) so the * left and right margins stay balanced. */ .md-main__inner { max-width: 656px !important; width: 656px !important; margin: 0 auto !important; padding: 0 !important; } .md-content, .md-content__inner { max-width: 480px !important; width: 480px !important; margin: 0 !important; padding: 0 !important; } .md-typeset { font-size: 11.5pt !important; line-height: 1.5 !important; } .md-typeset .article-title { font-size: 28pt !important; line-height: 1.05 !important; margin-top: 0 !important; margin-bottom: 8pt !important; } .md-typeset .article-description { font-size: 12.5pt !important; line-height: 1.4 !important; margin-bottom: 12pt !important; } .article-meta-row { font-size: 9pt !important; margin-bottom: 14pt !important; } .md-typeset h2 { font-size: 16pt !important; } .md-typeset h3 { font-size: 13pt !important; } .md-typeset img, .md-typeset figure { page-break-inside: avoid; } .md-typeset h2, .md-typeset h3, .md-typeset h4 { page-break-after: avoid; } .md-typeset a { color: #1c1b17 !important; text-decoration: underline; } /* Force the sidenote/marginnote/marginfigure into rail position in * print, even if the responsive mobile rules (which switch them to * fixed centred popovers) would otherwise match a narrow viewport. * Chrome's --print-to-pdf can pick a small "viewport" — we force the * desktop layout regardless. */ .md-typeset .sidenote a, .md-typeset .marginnote a { word-break: normal !important; } .md-typeset .sidenote, .md-typeset .marginnote, .md-typeset .marginfigure { position: relative !important; float: right !important; clear: right !important; margin: 3px -176px 14px 0 !important; width: 162px !important; max-width: 162px !important; height: auto !important; max-height: none !important; overflow: visible !important; /* Center the rail item on the middle of the reference line rather * than top-aligning it. See tufte.css for the on-screen equivalent. */ transform: translateY(calc(-50% + 0.8em)) !important; top: auto !important; left: auto !important; z-index: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font-size: 9pt !important; line-height: 1.4 !important; color: color-mix(in srgb, #1c1b17 78%, transparent) !important; display: block !important; } /* Multi-image marginfigure in print: side-by-side, caption on its own * row. Overrides the `display: block !important` above. */ .md-typeset .marginfigure:has(img + img) { display: flex !important; flex-wrap: wrap !important; column-gap: 4px !important; align-items: flex-end !important; } .md-typeset .marginfigure:has(img + img) img { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; margin-bottom: 0 !important; } .md-typeset .marginfigure:has(img + img) .caption { flex-basis: 100% !important; margin-top: 0.3em !important; } /* Restore the "1." prefix for the sidenote counter; the mobile * popover rule earlier in this file zeroes it out. */ .md-typeset .sidenote::before { content: counter(sidenote-counter) ". " !important; } /* Toggle backdrop must never leak into print. */ body.has-sidenote-popover::before, html:has(body.has-sidenote-popover)::before, .sidenote-backdrop { display: none !important; } .article-divider { border-color: #cccccc !important; margin: 6pt 0 12pt; } } /* Essay column widths: * prose column = 760px * gap = 16px * margin rail = 192px (sidenote/marginnote/marginfigure) * total visible = 968px */ .md-main__inner { margin: 0 auto; max-width: 968px; padding: 1.5em 1.5em 4em; } .md-content, .md-content__inner { max-width: 760px; margin: 0 auto; } @media (max-width: 768px) { .md-main__inner { padding: 1em 1.1em 3em; } /* Desktop uses text-wrap: pretty/balance to avoid orphan words, but in a * narrow phone column that "smart" wrapping leaves lines short of the * right edge at random — the jagged right margin the reader noticed. * Greedy wrapping fills each line to the edge for a consistent margin. */ .md-typeset p, .md-typeset li, .md-typeset blockquote p, .md-typeset .article-description { text-wrap: wrap; } } /* Below 1000px the sidenote rail collapses to popovers (tufte.css), but * Material still reserves left/right rail margins on .md-content__inner — * its `.md-sidebar--secondary:not([hidden])` selector matches because our * TOC sidebar is only visually suppressed, never given [hidden]. That * phantom gutter pushed the prose into a narrow, off-centre column (the * "too much space on the right"). Reclaim it so the text fills the padded * width symmetrically. !important + matching specificity to beat Material. */ @media (max-width: 1000px) { .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner { margin-left: auto !important; margin-right: auto !important; } }