/* Re-theme the mirrored reading articles toward the cache (Inside) look: Josefin Sans everywhere + a narrow centered column like the cache posts. Loaded AFTER each article's own CSS, so !important wins the cascade. Fonts are self-hosted (same files the rest of the site uses). */ @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 400; src: url(../fonts/inside/josefin-sans-v15-latin-regular.woff2) format('woff2'); } @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 600; src: url(../fonts/inside/josefin-sans-v15-latin-600.woff2) format('woff2'); } @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 700; src: url(../fonts/inside/josefin-sans-v15-latin-700.woff2) format('woff2'); } @font-face { font-family: 'Cascadia Code'; font-style: normal; src: url(../fonts/inside/CascadiaCode.woff2) format('woff2'); } /* Josefin Sans for everything, monospace kept for code. */ body, body *:not(script):not(style) { font-family: 'Josefin Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif !important; } code, code *, pre, pre *, kbd, samp, tt { font-family: 'Cascadia Code', Consolas, 'Courier New', monospace !important; } /* White page background everywhere, like the cache posts. Articles ship various off-whites (#f1f2f6, #fbfaf7, #fcfbf8 …); override the --bg custom property so every var(--bg) consumer (body, loading overlays, etc.) turns white, and force the body background for the few that hardcode it. Surface boxes (callouts, cards) keep their own backgrounds — only the page canvas is reset. One shared structural accent too: every article ships its own (violet, blue, green, gold …); override --accent / --ac so kickers, the contents outline, and eyebrows are the same colour everywhere. Data colours (--green/--red) stay. */ html.cache-narrow { --bg: #fff !important; background: #fff !important; --accent: #357BB3 !important; --ac: #357BB3 !important; --accent-dim: #2c6196 !important; } /* Narrow, centered column matching the cache posts (~600px of text). Scoped to — applied only to the text-article pages; the interactive dashboards keep their own (wider) layout. */ html.cache-narrow body { /* Same column measure as the cache posts (inside.css --measure: 620 → 960px, 30px gutter, border-box) so the text width is identical on both. */ max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; padding: 2rem 30px 4rem !important; box-sizing: border-box !important; float: none !important; background: #fff !important; color: #333 !important; line-height: 1.7 !important; /* Match the cache posts' body size (inside.css .e-content is 15px); these essays ship at 17px, which reads noticeably larger than the cache feed. */ font-size: 15px !important; } /* Consistent heading sizes, rhythm AND colour across every reading article, matching the cache posts (inside.css: h2 20px, h3 18px, dark). Some articles colour their section headings with their own accent (e.g. wine) — force dark so headings look the same everywhere; the accent is reserved for kicker/ outline/eyebrows. */ html.cache-narrow h2 { font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 1.8em 0 .5em !important; letter-spacing: -0.01em !important; color: #111 !important; } html.cache-narrow h3 { font-size: 18px !important; font-weight: 700 !important; line-height: 1.35 !important; margin: 1.5em 0 .4em !important; color: #111 !important; } html.cache-narrow h4 { font-size: 16px !important; font-weight: 700 !important; } html.cache-narrow p, html.cache-narrow li { font-size: 15px !important; line-height: 1.7 !important; } html.cache-narrow p { margin: 0 0 1em !important; } /* Content links match the cache posts (inside.css: dotted blue, 2px offset). Scoped to text containers so the tray + right-rail outline links are untouched. */ html.cache-narrow p a, html.cache-narrow li a, html.cache-narrow td a, html.cache-narrow dd a, html.cache-narrow sup a, html.cache-narrow figcaption a, html.cache-narrow blockquote a { color: #357BB3 !important; text-decoration: underline !important; text-decoration-style: dotted !important; text-underline-offset: 2px !important; } html.cache-narrow p a:hover, html.cache-narrow li a:hover, html.cache-narrow td a:hover, html.cache-narrow dd a:hover, html.cache-narrow sup a:hover, html.cache-narrow figcaption a:hover, html.cache-narrow blockquote a:hover { color: #1f5c8c !important; } /* Match the cache posts: widen the column on larger screens. */ @media (min-width: 1100px) { html.cache-narrow body { max-width: 720px !important; } } @media (min-width: 1500px) { html.cache-narrow body { max-width: 840px !important; } } @media (min-width: 1900px) { html.cache-narrow body { max-width: 960px !important; } } @media (max-width: 560px) { html.cache-narrow body { padding: 1.5rem 20px 3rem !important; } } /* Every article's layout wrapper(s) become a transparent full-width pass-through: the body alone owns the column width AND the page padding, so the title starts at exactly the same offset on every article (some articles wrap content in a
with its own 20px top padding, which otherwise pushes their header down relative to articles whose header is a direct child of body). */ html.cache-narrow .wrap, html.cache-narrow .container, html.cache-narrow main, html.cache-narrow article, html.cache-narrow [class*="container"], html.cache-narrow [class*="wrapper"] { max-width: 100% !important; width: auto !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; } /* Articles that shipped a two-column grid with a sticky side TOC (wine, real-estate) collapse to the single narrow column — the content then uses the full essay width instead of sharing it with a left rail. */ html.cache-narrow .layout { display: block !important; max-width: 100% !important; width: auto !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } html.cache-narrow details.toc-mobile { display: none !important; } /* ─── In-page contents outline → a fixed rail on the RIGHT ─── One treatment for every reading article. spacs/ipos/ncaa ship a