/* ============================================================================ fusion.css — the "Fusion" visual direction for jesungpark.com ---------------------------------------------------------------------------- An editorial-serif base (Newsreader display + Source Serif 4 body) fused with a monospace "instrument" metadata layer (IBM Plex Mono). Light = warm paper. Dark = "Instrument terminal": near-black canvas, faint grid, readout-green accent. Themed entirely with CSS custom properties: light tokens live on :root, dark overrides on [data-theme="dark"] (the attribute assets/js/theme.js sets on ). This is the site's production stylesheet, loaded by fusion-base.njk; it fully replaces the former W3.CSS/main.css cascade. ========================================================================== */ /* ---- Self-hosted fonts (woff2 latin subsets in /assets/fonts, OFL-licensed). Replaces the render-blocking Google Fonts CDN link: same-origin, preloadable, no third-party request. Only the weights/styles the design actually uses are shipped. font-display: swap matches the prior CDN behaviour. ---- */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/newsreader-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/newsreader-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/newsreader-latin-500-italic.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); } :root { /* -- Light palette: warm paper -- */ --paper: #faf8f3; /* page canvas */ --panel: #fffdf8; /* raised panels/rails */ --ink: #191614; /* primary text */ --muted: #6c645b; /* secondary text */ --line: #e7e0d3; /* hairline */ --line2: #d3cabb; /* stronger hairline */ --accent: #16645a; /* teal — essay/readout accent */ --accent2: #b4532a; /* rust — project accent */ /* Article surfaces (code + quote) */ --code-bg: #f3efe6; --code-border: #e2dac9; --code-string: #a04a22; /* darker rust so string/number code tokens clear AA (4.5:1) on --code-bg */ --ctrl-line: #8f7f66; /* form-control border (search, chips) — clears 3:1 (WCAG 1.4.11) */ --quote-bg: #eef4f2; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.15s; /* Grid overlay (dark only — transparent in light) */ --grid-line: transparent; } [data-theme="dark"] { /* -- Dark palette: Instrument terminal -- */ --paper: #0b0d0e; /* near-black canvas */ --panel: #111517; /* raised panels/rails */ --ink: #e6ebe8; /* off-white text (never pure #fff) */ --muted: #8a938f; /* secondary text */ --line: #232a2d; /* hairline */ --line2: #2b3338; /* stronger hairline */ --accent: #3fe0a5; /* readout green */ --accent2: #e0a13f; /* amber (project) */ --code-bg: #0e1214; --code-border: #222a2d; --code-string: #e0a13f; /* amber already clears AA on dark code-bg */ --ctrl-line: #55636b; /* form-control border — clears 3:1 on dark */ --quote-bg: #0f1a17; --grid-line: rgba(255, 255, 255, 0.022); } * { box-sizing: border-box; } /* Anchor jumps (citation superscripts, heading permalinks) must clear the sticky header instead of landing hidden underneath it. */ html { scroll-padding-top: 120px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Source Serif 4", Georgia, serif; font-size: 18px; line-height: 1.62; -webkit-font-smoothing: antialiased; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* Faint instrument grid — dark only (var is transparent in light). */ [data-theme="dark"] body { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px; } .wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; } .mono { font-family: "IBM Plex Mono", monospace; } a { color: inherit; text-decoration: none; } .accent { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Skip link — first focusable element; visually hidden until focused. */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .06em; background: var(--panel); color: var(--ink); padding: 10px 16px; border: 1px solid var(--accent); border-radius: 6px; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 8px; } /* ---- Rail: thin mono instrument strip ---- */ .rail { border-bottom: 1px solid var(--line2); background: var(--panel); } .rail .wrap { display: flex; align-items: center; height: 36px; gap: 16px; overflow: hidden; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .rail .domains { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail .sep { flex: 1 1 auto; } .rail .count { flex: none; white-space: nowrap; } /* ---- Sticky top bar: rail + masthead pinned to the top on scroll ---- */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--paper); } @supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { .topbar { background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(9px); backdrop-filter: saturate(1.4) blur(9px); } .topbar .rail { background: color-mix(in srgb, var(--panel) 90%, transparent); } } /* ---- Masthead ---- */ .masthead { border-bottom: 2px solid var(--ink); } .masthead .wrap { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 20px; padding-bottom: 14px; gap: 16px; } .masthead .logo { font-family: "Newsreader", serif; font-weight: 600; font-size: 24px; letter-spacing: -.01em; } .masthead nav { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .masthead nav .nav-item { white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .masthead nav .nav-item:hover { color: var(--ink); } .masthead nav .nav-item.cur { color: var(--ink); border-bottom-color: var(--accent); } .masthead nav .nav-sep { flex: none; width: 1px; height: 15px; background: var(--line2); } .theme-toggle { font-family: "IBM Plex Mono", monospace; font-size: 16px; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; /* 16px glyph + 14px padding ≈ 44px touch target; negative margin keeps the enlarged hit area from bloating the masthead height. */ display: inline-flex; align-items: center; justify-content: center; padding: 14px; margin: -14px -8px; } .theme-toggle:hover { color: var(--ink); } /* ---- Hero ---- */ .hero { padding: 60px 0 40px; border-bottom: 1px solid var(--line); } .hero .wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; } .hero h1 { font-family: "Newsreader", serif; font-weight: 500; font-size: clamp(38px, 5.2vw, 62px); line-height: 1.03; letter-spacing: -.02em; margin: 0; } .hero h1 .u { font-style: italic; color: var(--accent); } /* Description sits side-by-side with the thesis; a small top offset optically aligns it with the headline's first line. Stacks below on mobile (media query). */ .hero .sub { margin: 10px 0 0; font-size: 19px; line-height: 1.55; color: var(--muted); } /* ---- Section head (home Featured) ---- */ .sec { padding: 40px 0 4px; } /* Simple prose page (fusion-page.njk, e.g. 404): the .pagehead already provides separation, so drop the section's extra top padding + the prose top margin so short pages don't show an orphaned band under the header rule. */ .sec--page { padding-top: 16px; } .sec--page .fusion-prose { margin-top: 0; } .sechead { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 12px; } .sechead h2 { font-family: "Newsreader", serif; font-weight: 600; font-size: 24px; letter-spacing: -.015em; margin: 0; } .sechead .fill { flex: 1; } .sechead .all { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); } .sechead .all:hover { text-decoration: underline; } /* ---- Entry rows (shared home + work) ---- */ .entry { display: grid; grid-template-columns: 74px 1fr 172px; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .entry:hover .et { color: var(--accent); } .entry .idx { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted); padding-top: 5px; } .entry .et { font-family: "Newsreader", serif; font-weight: 600; font-size: 23px; letter-spacing: -.01em; line-height: 1.14; transition: color var(--dur) var(--ease); } .entry .type { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); background: var(--ink); border-radius: 3px; padding: 2px 6px; margin-right: 10px; vertical-align: middle; } .entry .type.p { background: var(--accent2); } .entry .ed { margin: 8px 0 0; color: var(--muted); font-size: 15px; max-width: 66ch; line-height: 1.5; } .entry .marg { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--muted); line-height: 1.75; text-align: right; } .entry .marg .mt { color: var(--accent); } .entry .marg b { color: var(--ink); font-weight: 600; } /* Work-page entries are a touch tighter than home. */ /* Extra air above each posture group so it separates clearly from the list above. */ .sec--work { padding-top: 56px; } .sec--work .entry { grid-template-columns: 74px 1fr 150px; padding: 20px 0; } .sec--work .entry .et { font-size: 22px; line-height: 1.15; } .sec--work .entry .ed { margin-top: 7px; } /* ---- Work page head ---- */ .pagehead { padding: 52px 0 30px; border-bottom: 1px solid var(--line); } .pagehead h1 { font-family: "Newsreader", serif; font-weight: 500; font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -.02em; margin: 0; } .pagehead .dek { margin-top: 16px; font-size: 19px; color: var(--muted); max-width: 62ch; font-style: italic; } /* ---- Controls: search + filter chips (real + wired to work-filter.js) ---- */ .controls { padding: 24px 0 8px; } .search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ctrl-line); border-radius: 8px; background: var(--panel); padding: 11px 16px; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 13px; max-width: 100%; } .filters { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px; align-items: center; } .fgroup { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .fgroup .fl { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .chip { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .03em; padding: 5px 14px; border: 1px solid var(--ctrl-line); border-radius: 999px; color: var(--muted); cursor: default; } .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Real filter buttons — same chip surface, but keyboard-operable with a >=44px touch target. Active state keys off aria-pressed (set by work-filter.js). */ button.chip { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; background: var(--panel); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } button.chip:hover { border-color: var(--accent); color: var(--ink); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Filter empty-state (shown by work-filter.js when a combo matches nothing). */ .work-empty { padding: 40px 0 8px; color: var(--muted); font-size: 16px; font-style: italic; } .work-empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* Filter hiding: the attribute must beat .entry's grid and the section's block display, so force it. work-filter.js toggles [hidden] on rows + groups. */ .entry[hidden], .work-theme-group[hidden], [data-work-empty][hidden] { display: none !important; } /* ---- Pagefind search, themed to Fusion via Pagefind UI's own CSS variables. (Pagefind's stylesheet reads these custom properties; setting them on the container recolours the whole widget without brittle selector overrides.) ---- */ .fusion-search { --pagefind-ui-scale: 0.9; --pagefind-ui-primary: var(--accent); --pagefind-ui-text: var(--ink); --pagefind-ui-background: var(--panel); --pagefind-ui-border: var(--line2); --pagefind-ui-tag: var(--panel); --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: 8px; --pagefind-ui-font: "Source Serif 4", serif; margin-bottom: 4px; } .fusion-search .pagefind-ui__search-input { font-family: "IBM Plex Mono", monospace; font-size: 13px; } .fusion-search .pagefind-ui__search-input::placeholder { color: var(--muted); } .fusion-search .pagefind-ui__result-link { color: var(--accent); } /* ---- Group heads (work postures) ---- */ .grouphead { display: grid; grid-template-columns: 74px 1fr auto; gap: 26px; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 14px; } .grouphead .gi { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--muted); padding-top: 10px; } /* Group (posture) headers dominate the 22px entry titles so a section reads as a section, not another clickable item. */ .grouphead h2 { font-family: "Newsreader", serif; font-weight: 600; font-size: 33px; letter-spacing: -.02em; line-height: 1.08; margin: 0; } .grouphead .gd { font-size: 15px; color: var(--muted); margin-top: 4px; max-width: 60ch; font-style: italic; } .grouphead .gc { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; } /* ---- About ("How I got here") — heading as a left sidehead, prose in a controlled measure on the right, echoing the hero's asymmetric two-column rhythm so the section reads as deliberate rather than a half-empty row. ---- */ .about { border-top: 1px solid var(--ink); margin-top: 52px; padding: 44px 0 16px; } .about .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: 52px; align-items: start; } .about-head .gi { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted); margin-bottom: 16px; } .about h2 { font-family: "Newsreader", serif; font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.015em; margin: 0; max-width: 11ch; } .about-body p { margin: 0 0 16px; max-width: 60ch; } .about-body p:last-child { margin-bottom: 0; } .about a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* ---- Footer ---- */ footer { border-top: 1px solid var(--line); margin-top: 36px; } footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; padding-bottom: 40px; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); } footer a { display: inline-block; padding: 6px 5px; transition: color var(--dur) var(--ease); } footer a:hover { color: var(--ink); } /* ============================================================================ Responsive — the mockups were desktop-only; these rules keep the prototype free of horizontal overflow down to 360px. ========================================================================== */ @media (max-width: 820px) { .hero .wrap { grid-template-columns: 1fr; gap: 32px; } .hero { padding: 44px 0 32px; } } @media (max-width: 640px) { .wrap { padding: 0 20px; } /* Keep the pinned bar shallow on mobile: drop the low-value keyword/count rail from the sticky header (it stays on desktop where there's room) and tighten the stacked masthead, so the sticky chrome no longer eats ~18% of the view. */ .topbar .rail { display: none; } .masthead .wrap { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; padding-bottom: 10px; } .masthead nav { font-size: 11px; gap: 16px; } /* 44px tap targets for nav links on touch. */ .masthead nav .nav-item { display: inline-flex; align-items: center; min-height: 44px; padding: 0; } /* Entry: idx + body on a row, margin wraps full-width beneath. */ .entry, .sec--work .entry { grid-template-columns: auto 1fr; gap: 6px 16px; } .entry .marg { grid-column: 1 / -1; text-align: left; line-height: 1.6; margin-top: 6px; } .entry .ed { max-width: none; } /* Group head: index + title on a row, count wraps beneath. */ .grouphead { grid-template-columns: auto 1fr; gap: 6px 16px; } .grouphead .gc { grid-column: 1 / -1; text-align: left; } /* About: stack the sidehead above the prose; drop the section marker. */ .about .wrap { grid-template-columns: 1fr; gap: 18px; } .about h2 { max-width: none; } .about-head .gi { display: none; } .filters { gap: 16px; } footer .wrap { flex-direction: column; align-items: flex-start; gap: 8px; } } /* Short viewports (e.g. landscape phones): the rail only hides by WIDTH (<=640), so it lingers on a wide-but-short screen and the pinned header eats too much height. Drop it when the viewport is short. */ @media (max-height: 480px) { .topbar .rail { display: none; } .masthead .wrap { padding-top: 12px; padding-bottom: 10px; } } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } /* ============================================================================ CONTENT / ARTICLE PAGE — the Fusion reading experience for a single essay or project (fusion-post.njk). Serif body on a comfortable measure, Newsreader subheads, mono instrument furniture (kicker, meta, nav). Themed in both light (paper) and dark (Instrument terminal) via the same tokens. ========================================================================== */ /* overflow-x: clip contains any content wider than the measure (e.g. a very wide inline equation on a narrow phone) without a page-level sideways scroll, and — unlike overflow:hidden on body/html — does not break the sticky header (which is outside this element). W3.CSS used to clip this on the old site. */ .fusion-article { padding: 8px 0 0; overflow-x: clip; } /* ---- Article header ---- */ .post-head { padding: 44px 0 22px; border-bottom: 1px solid var(--ink); } .post-kicker { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .post-title { font-family: "Newsreader", serif; font-weight: 500; margin: 0; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -.02em; max-width: 20ch; } .post-meta { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .04em; color: var(--muted); } .post-meta .dot { color: var(--muted); } /* ---- Prose: the reading measure ---- */ .fusion-prose { max-width: 68ch; /* the readability win the production site lacks */ margin: 24px 0 0; /* tightened so the header rule doesn't orphan from the body */ font-family: "Source Serif 4", Georgia, serif; font-size: 18px; line-height: 1.72; color: var(--ink); } .fusion-prose > *:first-child { margin-top: 0; } .fusion-prose p { margin: 0 0 1.2em; } .fusion-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; overflow-wrap: anywhere; /* long bare URLs (e.g. image captions) break instead of overflowing */ } .fusion-prose a:hover { text-decoration-thickness: 2px; } /* Subheads — Newsreader, tighter than body. Essays here use h4; projects use h3. */ .fusion-prose h2, .fusion-prose h3, .fusion-prose h4 { font-family: "Newsreader", serif; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); margin: 1.9em 0 0.5em; } .fusion-prose h2 { font-size: 27px; } .fusion-prose h3 { font-size: 22px; } .fusion-prose h4 { font-size: 21px; } .fusion-prose h1 { /* defensive: if a body ever carries its own h1 */ font-family: "Newsreader", serif; font-weight: 600; font-size: 30px; letter-spacing: -.02em; margin: 1.4em 0 0.5em; } /* markdown-it-anchor wraps headings in a permalink ; keep it inheriting. */ .fusion-prose .header-anchor-link { color: inherit; text-decoration: none; } .fusion-prose .header-anchor-link:hover { color: var(--accent); } .fusion-prose ul, .fusion-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; } .fusion-prose li { margin: 0.35em 0; } .fusion-prose li::marker { color: var(--muted); } .fusion-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; } .fusion-prose strong { font-weight: 600; } .fusion-prose em, .fusion-prose i { font-style: italic; } /* Editorial blockquote — accent left rule + faint tint + italic. */ .fusion-prose blockquote { margin: 1.8em 0; padding: 0.5em 1.3em; border-left: 3px solid var(--accent); background: var(--quote-bg); border-radius: 0 6px 6px 0; color: var(--ink); font-style: italic; } .fusion-prose blockquote p:last-child { margin-bottom: 0; } /* Images / figures — responsive, thin hairline frame, optional caption. Optimized article images (build-time transform, see .eleventy.js) render as with intrinsic dimensions. The width/height attributes reserve layout space (no CLS); `height:auto` + `max-width:100%` keep them responsive so they never overflow the measure. */ .fusion-prose img, .fusion-prose picture { display: block; max-width: 100%; height: auto; } .fusion-prose picture { margin: 1.6em 0; } .fusion-prose picture img { margin: 0; } .fusion-prose img { border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); margin: 1.6em 0; } .fusion-prose figure { margin: 1.8em 0; } .fusion-prose figcaption { margin-top: 8px; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .03em; color: var(--muted); text-align: center; } /* Tables — hairline grid. */ .fusion-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 16px; } .fusion-prose th, .fusion-prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; } .fusion-prose th { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; } /* ---- Code: self-styled (fusion-base does not load PrismJS) ---- */ .fusion-prose code, .fusion-prose pre { font-family: "IBM Plex Mono", monospace; } .fusion-prose :not(pre) > code { font-size: 0.86em; padding: 0.12em 0.4em; border-radius: 4px; background: var(--code-bg); border: 1px solid var(--code-border); color: var(--ink); } .fusion-prose pre { margin: 1.6em 0; padding: 16px 18px; overflow-x: auto; background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 8px; font-size: 14px; line-height: 1.6; color: var(--ink); } .fusion-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; } /* MathJax: let wide display equations scroll inside their own box instead of widening the page on small screens (fusion drops W3.CSS's global overflow clip). */ .fusion-prose mjx-container[display="true"] { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; } /* PrismJS token colouring, keyed off theme tokens so it works in both themes without loading a Prism stylesheet (the plugin emits .token spans). */ .fusion-prose .token.comment, .fusion-prose .token.prolog, .fusion-prose .token.doctype, .fusion-prose .token.cdata { color: var(--muted); font-style: italic; } .fusion-prose .token.punctuation, .fusion-prose .token.operator { color: var(--muted); } .fusion-prose .token.keyword, .fusion-prose .token.boolean, .fusion-prose .token.tag, .fusion-prose .token.selector { color: var(--accent); } .fusion-prose .token.string, .fusion-prose .token.char, .fusion-prose .token.number, .fusion-prose .token.attr-value { color: var(--code-string); } .fusion-prose .token.function, .fusion-prose .token.class-name, .fusion-prose .token.attr-name { color: var(--ink); font-weight: 500; } /* ---- Citations (superscript links) ---- */ .fusion-prose sup { line-height: 0; } .fusion-prose .citation-link { color: var(--accent); font-weight: 500; text-decoration: none; } .fusion-prose .citation-link:hover { text-decoration: underline; } .fusion-prose .citation-error { color: var(--accent2); font-weight: 700; } /* ---- Bibliography ---- */ .fusion-prose .bibliography { margin-top: 3em; padding-top: 1.6em; border-top: 1px solid var(--line); } .fusion-prose .bibliography-entry { margin-bottom: 0.85em; padding-left: 2em; text-indent: -2em; line-height: 1.6; } .fusion-prose .citation-number { font-family: "IBM Plex Mono", monospace; color: var(--accent); font-weight: 500; } .fusion-prose .bibliography-entry small { font-size: 0.9em; font-style: italic; color: var(--muted); } .fusion-prose .bibliography-entry a { color: var(--accent); word-break: break-word; } /* ---- Post navigation (prev / next) ---- */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 48px 0 0; padding-top: 26px; border-top: 1px solid var(--line); } .post-nav-link { display: block; padding: 16px 18px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); transition: border-color var(--dur) var(--ease); } .post-nav-link:hover { border-color: var(--accent); } .post-nav-next { text-align: right; } .post-nav .nav-label { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .post-nav .nav-title { display: block; font-family: "Newsreader", serif; font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); } .post-nav-link:hover .nav-title { color: var(--accent); } /* ---- Back link ---- */ .post-back { margin: 40px 0 8px; padding-top: 24px; border-top: 1px solid var(--ink); } .back-link { display: inline-flex; align-items: center; min-height: 44px; /* comfortable touch target */ font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .back-link:hover { text-decoration: underline; } @media (max-width: 640px) { .post-head { padding: 30px 0 18px; } .post-title { max-width: none; } .fusion-prose { margin-top: 26px; } .post-nav { grid-template-columns: 1fr; gap: 12px; } .post-nav-next { text-align: left; } }