/* Two-Level Systems — Stacks overrides. Stacks (assets/stacks.min.css) supplies the reset, the design tokens, both colour schemes, and the components: s-prose for the article body, s-table for tables, s-post-summary for the series index. Everything here bridges a Quarto-generated class onto a Stacks one, or styles what Stacks has no component for. Tokens only — no literal colours. */ body{ background-color:var(--black-100); color:var(--black-600); font-family:var(--ff-sans); } /* ---- Oswald carries every heading and title. Stacks has no headline token, so this declares one. It has to sit on alongside Stacks' own --ff-* tokens: at :root, var(--ff-sans) resolves to nothing and the whole declaration is thrown away. ---- */ body{ /* Stack Sans, which their docs use, is proprietary. IBM Plex Sans is the closest open stand-in, and IBM Plex Mono is what their docs actually ship for code. Oswald stays on the headings. */ --ff-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ff-headline:"Oswald",var(--ff-sans); } .s-prose h1,.s-prose h2,.s-prose h3,.s-prose h4,.s-prose h5,.s-prose h6, .s-prose .s-post-summary--title, .wordmark, #contents-heading{ font-family:var(--ff-headline); font-weight:600; letter-spacing:.01em; } .s-prose h1,.s-prose h2,.s-prose h3{line-height:1.2} /* ---- highlight colours ---- Stacks generates each theme ramp (100-600, light and dark) from a single h/s/l anchor, so these six tokens are the whole colour story. They sit on :root deliberately: Stacks' own --theme-*-custom-* declarations outrank a plain `body` rule, and with the anchors unset they resolve to the guaranteed-invalid value and fall back to Stacks orange. Declaring the anchors here instead means body inherits them and the generated ramps resolve. Dark keeps each hue but adopts Stacks' dark lightness profile, because #e36414 is far too dark to read against a dark page. primary #e36414 secondary #fb8b24 */ :root{ --theme-base-primary-color-h:23.2deg; --theme-base-primary-color-s:83.8%; --theme-base-primary-color-l:48.4%; --theme-dark-primary-color-h:23.2deg; --theme-dark-primary-color-s:65%; --theme-dark-primary-color-l:72%; --theme-base-secondary-color-h:28.7deg; --theme-base-secondary-color-s:96.4%; --theme-base-secondary-color-l:56.3%; --theme-dark-secondary-color-h:28.7deg; --theme-dark-secondary-color-s:65%; --theme-dark-secondary-color-l:72%; } /* ---- square corners ---- Every non-scrollbar radius in Stacks resolves through var(--br-sm|md|lg), so zeroing the three tokens squares the sheet, tags, nav items, code spans and tables in one place. --br-circle and --br-pill are left alone: avatars and pills are round by definition. */ body{--br-sm:0; --br-md:0; --br-lg:0} /* ---- the reading sheet ---- */ @media (max-width:640px){ .s-prose.bar-md{padding:var(--su24) var(--su16)!important} header .px32,footer.px32,.py32.px32{padding-left:var(--su16)!important;padding-right:var(--su16)!important} } /* ---- Contents: a sticky s-navigation beside the sheet ---- Built from the article's headings by the script in partials/footer.html. It clears the sticky masthead, and headings get a matching scroll margin so a clicked entry doesn't land underneath it. */ .layout-toc > div{top:var(--su48)} .layout-toc .s-navigation--item.is-selected{--_na-item-selected-fc:var(--theme-secondary-400)} /* 01 02 03 down the primary entries — a counter, so the markup stays clean. Stacks already uses this :before to reserve the width of the bold label (content:attr(data-text), height:0, visibility:hidden), so reclaiming it means undoing those three, and switching the item-text back to a row so the number sits beside the label rather than above it. */ .contents-list{counter-reset:contents-section} .contents-primary-item .s-navigation--item-text{flex-direction:row;align-items:baseline} .contents-primary-item .s-navigation--item-text:before{ content:counter(contents-section,decimal-leading-zero); counter-increment:contents-section; color:var(--theme-primary); font-family:var(--ff-mono); font-weight:700; visibility:visible; height:auto; flex-shrink:0; width:var(--su24); margin-right:var(--su8); } /* light used sparingly: the figure plates are the one light surface on the dark page. theme-light__forced is Stacks' own mechanism for such islands, applied by filters/stacks-figure.lua. */ .s-prose figure.theme-light__forced{background-color:var(--white);color:var(--black-600)} .layout-toc .s-navigation--item-text{white-space:normal;overflow-wrap:break-word} .s-prose h2,.s-prose h3{scroll-margin-top:var(--su64)} /* ---- title block ---- Quarto emits two

: the first (.quarto-title-block) holds the h1, the second the subtitle and date. Read them as one unit. */ #title-block-header.quarto-title-block, #title-block-header.quarto-title-block .title{margin-bottom:0} .s-prose #title-block-header .title{font-size:var(--fs-headline1);line-height:1.1} #title-block-header:not(.quarto-title-block){ display:block; margin:var(--su8) 0 var(--su32); padding-bottom:var(--su16); border-bottom:var(--su1) solid var(--black-150); } #title-block-header:not(.quarto-title-block) > :last-child{margin-bottom:0} .s-prose .subtitle{ font-size:var(--fs-body2); color:var(--black-400); margin-bottom:0; } #title-block-header .date{ font-family:var(--ff-mono); font-size:var(--fs-fine); letter-spacing:.08em; text-transform:uppercase; color:var(--black-400); margin:var(--su12) 0 0; } /* ---- display math (KaTeX) ---- */ .katex-display{overflow-x:auto;overflow-y:hidden;padding:var(--su2) 0;margin:var(--su24) 0} /* ---- tables: filters/stacks-table.lua supplies s-table; tune the numbers ---- */ .s-prose .s-table{font-variant-numeric:tabular-nums} /* the stat block is a key/value slab, not a comparison grid */ .statblock .s-table{border-left:var(--su4) solid var(--theme-primary-400)} .statblock .s-table td:first-child{ width:13rem; color:var(--black-400); font-size:var(--fs-caption); } .statblock .s-table td:first-child strong{font-weight:600;color:inherit} /* ---- asides; a leading bold run marks the optional "Deeper" box ---- */ .s-prose blockquote:has(> p:first-child > strong:first-child){ --_pr-blockquote-before-bg:var(--theme-primary-400); background-color:var(--theme-primary-100); border-radius:var(--br-md); } /* ---- figures: Stacks has no figure component ---- */ .s-prose figure{ margin:var(--su24) 0; padding:var(--su24) var(--su16); background-color:var(--black-100); border-radius:var(--br-md); overflow-x:auto; } .s-prose figure svg, .s-prose figure img{display:block;max-width:100%;height:auto;margin:0 auto} .s-prose figure figcaption{ font-size:var(--fs-caption); line-height:1.5; color:var(--black-400); margin-top:var(--su16); text-align:left; } /* ---- series listing: s-post-summary inside s-prose ---- */ .quarto-listing{margin-top:var(--su32)} .s-prose .s-post-summary{ padding:var(--su24) 0; border-top:var(--su1) solid var(--black-150); } .s-prose .s-post-summary:first-child{border-top:0;padding-top:0} .s-prose .s-post-summary--title{font-size:var(--fs-body3);margin:0} .s-prose .s-post-summary--excerpt{color:var(--black-400)} .s-prose .s-post-summary--excerpt p{margin-bottom:0} /* the series spine: post number, date and reading time above each title. The number is picked out in the primary colour so it reads as the same device as the 01 02 03 running down the Contents. */ .s-post-summary--content-meta .series-number{ font-family:var(--ff-mono); font-weight:700; color:var(--theme-primary); } /* ---- previous/next, appended to each post by filters/series-nav.lua ---- */ .series-nav{ display:flex; justify-content:space-between; gap:var(--su16); margin-top:var(--su32); padding-top:var(--su24); border-top:var(--su1) solid var(--black-150); } .series-nav--spacer{flex:1} .series-nav--link{max-width:20rem;text-decoration:none} .series-nav--link:hover .series-nav--title{color:var(--theme-primary)} .series-nav--label{ font-family:var(--ff-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--black-400); } .series-nav--title{font-family:var(--ff-headline);line-height:1.25} /* Quarto emits Bootstrap's .d-none on the listing's empty-state message */ .d-none{display:none!important} /* an empty reference list appears when a post cites nothing yet */ #refs:empty{display:none}