/* ===================================================== Fonts font-display: optional avoids the reflow "swap" causes when a font arrives late — all four files are preloaded (see layout.html), so the short optional window is normally enough. ===================================================== */ @font-face { font-family: 'Commit Mono'; src: url('/fonts/CommitMono-400-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: optional; } @font-face { font-family: 'Commit Mono'; src: url('/fonts/CommitMono-400-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: optional; } @font-face { font-family: 'Commit Mono'; src: url('/fonts/CommitMono-700-Regular.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: optional; } @font-face { font-family: '0xProto'; src: url('/fonts/0xProto-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: optional; } @font-face { font-family: '0xProto'; src: url('/fonts/0xProto-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: optional; } /* ===================================================== Tokens WCAG AAA contrast targets: 7:1 normal text, 4.5:1 large text --text light ~18:1 dark ~17:1 ✓ AAA --muted light ~7.1:1 dark ~7.0:1 ✓ AAA --subtle decorative only — never on interactive or informational text ===================================================== */ :root { /* Source-of-truth hex values — --bg/--text/etc. below just point at whichever is active. */ --bg-light: #f8f8f6; --bg-raised-light: #f0f0ed; --text-light: #141413; --muted-light: #4e4e4a; --subtle-light: #a4a49e; --accent-light: #1244b4; --accent-hover-light: #0e3690; --border-light: #e4e4e0; --border-2-light: #ccccca; --bg-dark: #0e0e0c; --bg-raised-dark: #181815; --text-dark: #edecea; --muted-dark: #969692; --subtle-dark: #6e6e66; --accent-dark: #7aadff; --accent-hover-dark: #a3c4ff; --border-dark: #242420; --border-2-dark: #333330; --bg: var(--bg-light); --bg-raised: var(--bg-raised-light); --text: var(--text-light); --muted: var(--muted-light); --subtle: var(--subtle-light); --accent: var(--accent-light); --accent-hover: var(--accent-hover-light); --border: var(--border-light); --border-2: var(--border-2-light); --font: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-code: '0xProto', ui-monospace, SFMono-Regular, Menlo, monospace; /* rem, not px — otherwise this stays fixed while --zoom scales the text, so the column just wraps more/denser instead of scaling proportionally like the rest of the page. */ --w: 42.5rem; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.5rem; --t-2xl: 2rem; --t-3xl: 2.5rem; --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s12: 3rem; --s16: 4rem; --s18: 4.75rem; --s20: 5rem; --s24: 6rem; /* Page zoom (see a11y.js) — the sync script in layout.html applies a saved level inline on before first paint, so a returning visitor never waits for a11y.js's `defer`. */ --zoom: 1; } /* Scales via root font-size, not CSS zoom — zoom skews getBoundingClientRect() coordinates, which broke the Shift-hold hint mode's badge positioning (see a11y.js). */ html { font-size: calc(16px * var(--zoom)); /* Reserves scrollbar space unconditionally — otherwise 100vw (used by img-wide/img-medium's breakout width) shifts when the scrollbar appears/disappears as content loads. */ scrollbar-gutter: stable; } /* :not([data-theme="light"]) lets an explicit light choice (a11y.js) keep winning even when the OS prefers dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--bg-dark); --bg-raised: var(--bg-raised-dark); --text: var(--text-dark); --muted: var(--muted-dark); --subtle: var(--subtle-dark); --accent: var(--accent-dark); --accent-hover: var(--accent-hover-dark); --border: var(--border-dark); --border-2: var(--border-2-dark); } } /* The reverse direction — forcing dark even when the OS prefers light — needs its own unconditional override, since there's no media query to gate it on. */ :root[data-theme="dark"] { --bg: var(--bg-dark); --bg-raised: var(--bg-raised-dark); --text: var(--text-dark); --muted: var(--muted-dark); --subtle: var(--subtle-dark); --accent: var(--accent-dark); --accent-hover: var(--accent-hover-dark); --border: var(--border-dark); --border-2: var(--border-2-dark); } /* ===================================================== Reset ===================================================== */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { max-width: 100%; display: block; } /* ===================================================== Base ===================================================== */ body { font-family: var(--font); /* 0.9375rem == 15px at the default 16px root — rem, not px, so this scales with --zoom too. */ font-size: 0.9375rem; line-height: 1.75; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'calt' 1; font-variant-ligatures: contextual; display: flex; flex-direction: column; min-height: 100svh; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; } ::selection { background: color-mix(in srgb, var(--accent) 28%, var(--bg)); color: var(--text); } /* Focus ring — shown only for keyboard navigation, never for mouse */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } p { margin-bottom: var(--s4); } p:last-child { margin-bottom: 0; } pre, code, kbd { font-family: var(--font-code); font-feature-settings: 'calt' 1; font-variant-ligatures: contextual; } code { font-size: 0.88em; padding: 0.15em 0.35em; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 3px; } pre { padding: var(--s4) var(--s5); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; margin-bottom: var(--s6); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } pre::-webkit-scrollbar { height: 6px; } pre::-webkit-scrollbar-track { background: transparent; } pre::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; } pre::-webkit-scrollbar-thumb:hover { background: var(--subtle); } pre[tabindex]:focus-visible { border-radius: 6px; } pre code { background: none; border: none; padding: 0; } blockquote { border-left: 2px solid var(--border-2); padding-left: var(--s6); color: var(--muted); margin: var(--s6) 0; font-style: italic; } /* ===================================================== Screen-reader only utility ===================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===================================================== Skip link ===================================================== */ .skip-link { position: absolute; top: -100%; left: var(--s4); z-index: 100; padding: var(--s2) var(--s4); background: var(--text); color: var(--bg); font-size: var(--t-sm); font-weight: 700; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.1s; } .skip-link:focus { top: 0; outline: none; } /* ===================================================== Keyboard hints (Shift-hold overlay) Keycap style — always dark, like a physical key ===================================================== */ .kbd-hint { position: fixed; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 3px; padding-top: 2.3px; background: #d4d4d0; color: #141413; border: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 3px solid rgba(0, 0, 0, 0.28); border-radius: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65); font-family: var(--font); font-size: 9.5px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; pointer-events: none; user-select: none; z-index: 9999; animation: hint-in 0.08s ease both; } @media (prefers-color-scheme: dark) { .kbd-hint { background: #252523; color: #e8e8e2; border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 3px solid rgba(0, 0, 0, 0.55); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1); } } /* Previous-element badge — same keycap style as 1–9, small ↑ in corner */ .kbd-hint--prev { min-width: 22px; } .kbd-hint--prev::after { content: '↑'; position: absolute; top: 0; right: 1px; font-size: 6px; line-height: 1; opacity: 0.7; } @keyframes hint-in { from { opacity: 0; scale: 0.65; } to { opacity: 1; scale: 1; } } /* ===================================================== Shift-hint badge — desktop-only discoverability nudge Hidden on touch devices via (hover: hover) and (pointer: fine): mobile/tablet cannot hold a physical Shift key, so the hint would be irrelevant (and undismissable) there. ===================================================== */ #shift-hint { display: none; position: fixed; bottom: var(--s8); left: var(--s8); z-index: 200; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); pointer-events: none; user-select: none; } .hint-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 3px; padding-top: 2.3px; background: #d4d4d0; color: #141413; border: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 3px solid rgba(0, 0, 0, 0.28); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65); font-family: var(--font); font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; } @media (prefers-color-scheme: dark) { .hint-key { background: #252523; color: #e8e8e2; border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 3px solid rgba(0, 0, 0, 0.55); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1); } } @media (hover: hover) and (pointer: fine) { #shift-hint { display: inline-flex; } } .hints-active #shift-hint { display: none; } /* (hover: hover)/(pointer: fine) alone isn't reliable — some touch devices still report a fine pointer at narrow viewports, so hide unconditionally below 600px too. */ @media (max-width: 600px) { #shift-hint { display: none !important; } } /* Zoom hint — same convention as #shift-hint, stacked above it (the opposite corner is #back-to-top's). +/- scale the page via --zoom; 0 resets it. */ #zoom-hint { display: none; position: fixed; bottom: calc(var(--s8) + 26px); left: var(--s8); z-index: 200; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); pointer-events: none; user-select: none; } @media (hover: hover) and (pointer: fine) { #zoom-hint { display: inline-flex; } } .hints-active #zoom-hint { display: none; } /* See #shift-hint above — same unconditional mobile hide, same reasoning. */ @media (max-width: 600px) { #zoom-hint { display: none !important; } } /* Theme hint — same convention, stacked above #zoom-hint. Label shows the mode currently in effect (not the action), same as #zoom-hint's percentage. */ #theme-hint { display: none; position: fixed; bottom: calc(var(--s8) + 52px); left: var(--s8); z-index: 200; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); pointer-events: none; user-select: none; } @media (hover: hover) and (pointer: fine) { #theme-hint { display: inline-flex; } } .hints-active #theme-hint { display: none; } /* See #shift-hint above — same unconditional mobile hide, same reasoning. */ @media (max-width: 600px) { #theme-hint { display: none !important; } } /* Transient "112%"-style readout after each +/-/0 press. Created on demand by a11y.js; fades via opacity so it never needs a display toggle. */ #zoom-status { position: fixed; bottom: var(--s8); left: 50%; transform: translateX(-50%); z-index: 300; padding: var(--s2) var(--s4); font-family: var(--font); font-weight: 700; font-size: var(--t-sm); background: #d4d4d0; color: #141413; border: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 3px solid rgba(0, 0, 0, 0.28); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } #zoom-status.is-visible { opacity: 1; } @media (prefers-color-scheme: dark) { #zoom-status { background: #252523; color: #e8e8e2; border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 3px solid rgba(0, 0, 0, 0.55); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1); } } /* ===================================================== Header ===================================================== */ /* min-height reserves the header's box up front — without it, a late-settling content metric (e.g. a font swap) could shift its height and everything below it. */ .site-header { border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 58px; } .site-header-inner { max-width: var(--w); margin: 0 auto; padding: var(--s4) var(--s6); display: flex; align-items: center; justify-content: space-between; gap: var(--s8); } .site-title { font-weight: 700; font-size: var(--t-sm); color: var(--text); text-decoration: none; letter-spacing: 0.02em; } .site-title:hover { color: var(--accent); text-decoration: none; } .site-nav { display: flex; gap: var(--s6); } .site-nav a { font-size: var(--t-sm); color: var(--muted); text-decoration: none; transition: color 0.1s; } .site-nav a:hover { color: var(--text); text-decoration: none; } /* ===================================================== Main ===================================================== */ main { flex: 1; max-width: var(--w); width: 100%; margin: 0 auto; padding: var(--s12) var(--s6) var(--s20); } /* ===================================================== Footer ===================================================== */ .site-footer { border-top: 1px solid var(--border); flex-shrink: 0; } .site-footer-inner { max-width: var(--w); margin: 0 auto; padding: var(--s5) var(--s6); display: flex; gap: var(--s6); } .site-footer a { font-size: var(--t-xs); color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--text); text-decoration: none; } /* Theme toggle — a real clickable control, so touch devices without the "L" shortcut can still switch modes. margin-left: auto sets it apart from the identity links on the same row. Text is the current mode; a11y.js keeps it in sync with the real active theme. */ .site-footer button#theme-toggle { margin-left: auto; padding: 0; border: none; background: none; font: inherit; font-size: var(--t-xs); color: var(--muted); cursor: pointer; } .site-footer button#theme-toggle:hover { color: var(--text); } /* ===================================================== Homepage — Intro ===================================================== */ .intro { padding-bottom: var(--s12); border-bottom: 1px solid var(--border); margin-bottom: var(--s12); } .intro h1 { font-size: var(--t-3xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: var(--s4); } .intro p { font-size: var(--t-md); color: var(--muted); max-width: 68ch; margin-bottom: 0; } /* Prose links get a quiet underline, accent reserved for hover, so a paragraph full of references doesn't read as a wall of blue. Scoped to actual prose tags, not the whole .article-body/.intro subtree, so component links (cards, anchors, footnotes) keep their own treatment. */ :is(.article-body, .intro) :is(p, li, dd, blockquote, td) a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; } :is(.article-body, .intro) :is(p, li, dd, blockquote, td) a:hover { color: var(--accent); text-decoration-color: var(--accent); } /* ===================================================== Homepage — Sections ===================================================== */ .home-section { margin-bottom: var(--s12); } .home-section + .home-section { padding-top: var(--s12); } .home-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); } .home-section-head h2 { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--subtle); } /* Truncates only the title text (not the icon next to it) when there's no room — the "All X[n]" link stays on one line and fully visible at all times; text-overflow:ellipsis doesn't reliably truncate a flex container with multiple children, so it's scoped to this inner span instead of .home-section-head h2 itself. */ .home-section-title { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; } .home-section-head a { flex-shrink: 0; white-space: nowrap; font-size: var(--t-xs); color: var(--muted); text-decoration: none; } .home-section-head a:hover { color: var(--text); text-decoration: none; } /* ===================================================== Homepage — Project rows ===================================================== */ .home-projects { display: flex; flex-direction: column; } .home-project-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: var(--s6); row-gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--border); position: relative; } .home-project-row:first-child { border-top: 1px solid var(--border); } .home-project-row a { font-weight: 700; font-size: var(--t-md); color: var(--text); text-decoration: none; grid-column: 1; grid-row: 1; } .home-project-row a:hover { color: var(--accent); text-decoration: none; } .home-project-row a::after { content: ''; position: absolute; inset: 0; cursor: pointer; } .home-project-row:hover a { color: var(--accent); } .home-project-year { font-size: var(--t-xs); color: var(--subtle); grid-column: 2; grid-row: 1; align-self: center; } .home-project-summary { font-size: var(--t-sm); color: var(--muted); grid-column: 1 / -1; grid-row: 2; margin: 0; line-height: 1.6; } /* ===================================================== Homepage — Post rows ===================================================== */ .home-posts { display: flex; flex-direction: column; } .home-post-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s6); padding: var(--s3) 0; border-bottom: 1px solid var(--border); position: relative; } .home-post-row:first-child { border-top: 1px solid var(--border); } .home-post-row a { color: var(--text); font-size: var(--t-md); text-decoration: none; } .home-post-row a:hover { color: var(--accent); text-decoration: none; } .home-post-row a::after { content: ''; position: absolute; inset: 0; cursor: pointer; } .home-post-row:hover a { color: var(--accent); } .home-post-row time { font-size: var(--t-xs); color: var(--subtle); white-space: nowrap; flex-shrink: 0; } .home-book-row { justify-content: flex-start; align-items: center; gap: var(--s4); } .home-book-body { display: flex; flex-direction: column; gap: var(--s1); } .home-book-meta { font-size: var(--t-xs); color: var(--subtle); } /* ===================================================== List pages (/projects, /writing) ===================================================== */ .list-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s6); } .list-page-title { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--subtle); } /* Section icons (pixelarticons.com, MIT) — blocky pixel-grid glyphs, same crispEdges treatment as .rss-icon so they read as pixel art, not smoothed vectors. */ .list-page-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; shape-rendering: crispEdges; } /* RSS icon — phosphor amber, Alien: Isolation terminal aesthetic */ .rss-link { display: inline-flex; align-items: center; color: #b07812; text-decoration: none; line-height: 1; } .rss-link:hover { color: #d4980e; text-decoration: none; } .rss-icon { /* crispEdges keeps this pixel-art icon's straight edges from anti-aliasing blur at this small (16px) render size. */ width: 1rem; height: 1rem; shape-rendering: crispEdges; filter: drop-shadow(0 0 2px #b07812) drop-shadow(0 0 5px rgba(176, 120, 18, 0.4)); transition: filter 0.15s ease, color 0.15s ease; } .rss-link:hover .rss-icon { filter: drop-shadow(0 0 3px #d4980e) drop-shadow(0 0 8px rgba(212, 152, 14, 0.65)) drop-shadow(0 0 16px rgba(212, 152, 14, 0.25)); } @media (prefers-color-scheme: dark) { .rss-link { color: #c98e14; } .rss-link:hover { color: #e8a820; } .rss-icon { filter: drop-shadow(0 0 3px #c98e14) drop-shadow(0 0 7px rgba(201, 142, 20, 0.55)); } .rss-link:hover .rss-icon { filter: drop-shadow(0 0 4px #e8a820) drop-shadow(0 0 10px rgba(232, 168, 32, 0.75)) drop-shadow(0 0 20px rgba(232, 168, 32, 0.35)); } } .item-list { display: flex; flex-direction: column; } .item-row { padding: var(--s5) 0; border-bottom: 1px solid var(--border); position: relative; } .item-row:first-child { border-top: 1px solid var(--border); } .item-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s2); } .item-heading { font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; } .item-title { font-weight: 700; font-size: var(--t-md); color: var(--text); text-decoration: none; } .item-title:hover { color: var(--accent); text-decoration: none; } /* Stretched link — expands click area to the full .item-row without extra DOM anchors. ::after is invisible and has no AT presence; keyboard focus stays on the . */ .item-title::after { content: ''; position: absolute; inset: 0; cursor: pointer; } .item-row:hover .item-title { color: var(--accent); } .item-label { font-size: var(--t-xs); color: var(--subtle); white-space: nowrap; flex-shrink: 0; } .item-meta { display: flex; align-items: baseline; gap: var(--s2); flex-shrink: 0; } .item-summary { font-size: var(--t-sm); color: var(--muted); margin: 0; line-height: 1.65; } .book-status { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; white-space: nowrap; display: inline-block; padding: 0 3px; color: var(--text); } .book-status::before { content: '['; } .book-status::after { content: ']'; } /* Semi-transparent wash + asymmetric pixel shadows → rough hand-highlighter feel */ .book-status--planned { background: rgba(255, 193, 7, 0.38); box-shadow: 3px 0 0 rgba(255, 193, 7, 0.38), -2px 0 0 rgba(255, 193, 7, 0.38), 0 2px 0 rgba(255, 193, 7, 0.20); } .book-status--finished { background: rgba( 76, 175, 80, 0.38); box-shadow: 3px 0 0 rgba( 76, 175, 80, 0.38), -2px 0 0 rgba( 76, 175, 80, 0.38), 0 2px 0 rgba( 76, 175, 80, 0.20); } .book-status--dnf { background: rgba(220, 70, 60, 0.38); box-shadow: 3px 0 0 rgba(220, 70, 60, 0.38), -2px 0 0 rgba(220, 70, 60, 0.38), 0 2px 0 rgba(220, 70, 60, 0.20); } .book-eyebrow { margin-bottom: var(--s2); } .item-heading .book-status { vertical-align: middle; } /* 2:3 matches standard book-cover proportions (Goodreads/Open Library). The frame (not the img) carries size/background/border, so the box is fully defined before the cover loads; object-fit: contain letterboxes rather than cropping/distorting mismatched art. */ .book-item-row { display: flex; align-items: center; gap: var(--s4); } .item-cover-frame { display: inline-block; width: 44px; height: 66px; background: var(--bg-raised); border-radius: 3px; border: 1px solid var(--border); overflow: hidden; flex-shrink: 0; } /* Two-class selector, not just .item-cover, so this reliably outranks .article-body img's rules when a book_card:: renders inside prose, regardless of source order. */ .item-cover-frame .item-cover { width: 100%; height: 100%; display: block; object-fit: contain; opacity: 0; transition: opacity 0.3s ease; } .item-cover.is-loaded { opacity: 1; } .item-body { flex: 1; min-width: 0; } /* ===================================================== Breadcrumb (WCAG 2.4.8 Location — AAA) ===================================================== */ .breadcrumb { margin-bottom: var(--s10); } .breadcrumb ol { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; list-style: none; padding: 0; margin: 0; } .breadcrumb li { display: flex; align-items: center; font-size: var(--t-sm); flex-shrink: 0; } .breadcrumb li + li::before { content: '/'; padding: 0 var(--s2); color: var(--subtle); aria-hidden: true; flex-shrink: 0; } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--text); } .breadcrumb [aria-current="page"] { color: var(--text); } /* The current-page crumb (variable-length title) truncates with ellipsis instead of wrapping — wrapping would orphan the "/" separator onto its own line. */ .breadcrumb li:last-child { flex-shrink: 1; min-width: 0; } .breadcrumb li:last-child > [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===================================================== Book cover ===================================================== */ .book-cover { width: 200px; max-width: 40%; margin: 0 0 var(--s8); } /* aspect-ratio: 2/3 is just a loading placeholder shape; :has() below releases it once the real image loads, so the frame reflows to the image's true proportions. */ .book-cover-frame { position: relative; aspect-ratio: 2 / 3; background: var(--bg-raised); border-radius: 4px; border: 1px solid var(--border); overflow: hidden; } .book-cover-frame:has(img.is-loaded) { aspect-ratio: auto; } .book-cover-frame img { width: 100%; height: 100%; display: block; object-fit: contain; opacity: 0; transition: opacity 0.3s ease; } .book-cover-frame img.is-loaded { height: auto; opacity: 1; } /* Shown when the cover proxy 404s (bad ISBN, Open Library outage) — keeps the placeholder shape instead of a mysteriously empty box. */ .book-cover-frame:has(img.is-error)::after { content: 'Cover unavailable'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s4); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--subtle); } .book-cover:has(.book-cover-frame img.is-error) .book-cover-credit { display: none; } .book-cover-credit { font-size: var(--t-xs); color: var(--subtle); margin-top: var(--s2); } .book-cover-credit a { color: inherit; } .book-cover-credit a:hover { color: var(--muted); } /* "Why I recommend this book" — a personal note, distinct from the publisher's blurb (which moves into the collapsible summary below). */ .article-body .book-commentary-label { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--subtle); margin-bottom: var(--s2); } /* Longer, AsciiDoc-rendered write-up beneath the one-line blurb above */ .book-commentary-html { margin-top: var(--s4); } .book-commentary-html :is(h2, h3, h4) { margin: var(--s6) 0 var(--s2); } .book-commentary-html p { margin: 0 0 var(--s4); } .book-commentary-html :is(ul, ol) { margin: 0 0 var(--s4) var(--s6); } .book-commentary-html li { margin-bottom: var(--s1); } /* Rich preview embedded in AsciiDoc prose (project_card::/writing_card::/book_card::) — same left-accent-border treatment as blockquote, not a boxed panel; this site avoids bordered/shadowed boxes in favor of flat, hairline-divided rows. */ .content-card { position: relative; display: flex; align-items: center; gap: var(--s4); margin: var(--s5) 0; padding: var(--s3) 0 var(--s3) var(--s5); border-left: 2px solid var(--border-2); } .content-card:hover { border-left-color: var(--accent); } .content-card-body { flex: 1; min-width: 0; } /* Undoes .article-body img's prose margin — otherwise the cover gets pushed down and cropped inside its fixed-height frame. */ .content-card .item-cover { margin: 0; } .content-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); } .content-card-title { font-weight: 700; color: var(--text); text-decoration: none; } /* Stretched link — expands click area to the full .content-card without extra DOM anchors, same pattern as .item-title. ::after is invisible and has no AT presence; keyboard focus stays on the . */ .content-card-title::after { content: ''; position: absolute; inset: 0; cursor: pointer; } .content-card:hover .content-card-title { color: var(--accent); } .content-card-label { font-size: var(--t-xs); color: var(--subtle); white-space: nowrap; } .content-card-summary { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.65; } /* Native
/ — works without JS, unlike the