/* ========================================================================== site.css — circuit.khalilli.ai (v5, consolidated) One layer, the final design. Light is default; dark rules are scoped to the theme's `.dark` class (set on by the toggle). Loads AFTER the theme stylesheet; selectors are prefixed with `main.prose` so they outrank the theme's Tailwind prose rules. The semantic palette is the series' visual identity; each color keeps one meaning in every figure and widget: gray where a motion started; secondary structure blue a primary direction; where a motion stopped orange newly drawn; the highlighted quantity red interference; forbidden green allowed; correct Violet belongs to the citation apparatus alone. Design rules that must never regress: no rounded corners anywhere; no separator middots; every caption sits below its frame; tables are full grids; the frame holds only the instrument. ========================================================================== */ /* ── Fonts (all self-hosted) ───────────────────────────────────────────── */ /* IBM Plex Serif at its reading cut: the Text weight (450), drawn for long-form body text, plus its italic and the semibold for emphasis */ @font-face { font-family: "IBM Plex Serif"; src: url("/fonts/ibm-plex-serif-450.woff2") format("woff2"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Serif"; src: url("/fonts/ibm-plex-serif-450i.woff2") format("woff2"); font-weight: 450; font-style: italic; font-display: swap; } @font-face { font-family: "IBM Plex Serif"; src: url("/fonts/ibm-plex-serif-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Virgil"; src: url("/crowded-space/ch01/fonts/Virgil-Regular.woff2") format("woff2"); font-display: swap; } /* ── Tokens ────────────────────────────────────────────────────────────── */ :root { --serif: "IBM Plex Serif", "Charter", "Iowan Old Style", Georgia, serif; --sans: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --hairline: rgba(30, 30, 30, 0.14); --hairline-soft: rgba(30, 30, 30, 0.08); --ink-soft: rgba(30, 30, 30, 0.55); --paper: #ffffff; --panel: rgba(30, 30, 30, 0.035); /* semantic palette: meanings never change */ --c-ink: #1e1e1e; --c-blue: #1971c2; --c-gray: #868e96; --c-orange: #e8590c; --c-red: #e03131; --c-green: #2f9e44; --c-green-bg: #b2f2bb; --c-red-bg: #ffc9c9; /* the citation apparatus: full voice, and an inked-down resting tone */ --c-cite: #4f3ba8; --c-cite-dim: color-mix(in srgb, var(--c-cite) 80%, var(--c-ink)); } .dark { --hairline: rgba(233, 236, 239, 0.16); --hairline-soft: rgba(233, 236, 239, 0.09); --ink-soft: rgba(233, 236, 239, 0.58); --paper: #17191d; --panel: rgba(233, 236, 239, 0.05); --c-ink: #e9ecef; --c-blue: #4dabf7; --c-gray: #adb5bd; --c-orange: #ff922b; --c-red: #ff6b6b; --c-green: #51cf66; --c-green-bg: #144d24; --c-red-bg: #4d1414; --c-cite: #a99ae6; --c-cite-dim: color-mix(in srgb, var(--c-cite) 74%, var(--ink-soft)); } /* ── Page guards ───────────────────────────────────────────────────────── */ /* nothing may widen the page; wide content scrolls inside its container */ html, body { overflow-x: clip; } /* no rounded corners, anywhere */ main.prose article .widget, main.prose article .widget *, main.prose article .drawing, main.prose article .drawing *, main.prose article section table, main.prose article section table *, main.prose article section pre, .toc-panel, .toc-bar, .toc-mobile { border-radius: 0 !important; } /* ── Reading rhythm ────────────────────────────────────────────────────── */ /* the selection carries the citation violet, faintly */ ::selection { background: color-mix(in srgb, var(--c-cite) 18%, transparent); } /* in-page jumps land clear of the fixed header, and travel smoothly */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* wide content scrolls behind a thin, quiet bar */ main.prose article .katex-display, main.prose article section table, main.prose article section pre { scrollbar-width: thin; } main.prose article section > p, main.prose article section > ul, main.prose article section > ol { font-family: var(--serif); font-size: 1.125rem; font-weight: 450; line-height: 1.75; letter-spacing: 0.002em; } main.prose article section > p strong, main.prose article section li strong { font-weight: 600; } main.prose article section > p { text-wrap: pretty; } @media (min-width: 640px) { main.prose article section > p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } } main.prose article section li { margin-block: 0.3em; } /* list markers in the site's own hand: small square bullets (the square-corner identity), mono numerals for ordered lists */ main.prose article section > ul { list-style: none; padding-left: 1.375rem; } main.prose article section > ul > li { position: relative; } main.prose article section > ul > li::before { content: ""; position: absolute; left: -1.25rem; top: 0.7em; width: 0.3125rem; height: 0.3125rem; background: var(--c-gray); } main.prose article section > ol { padding-left: 1.625rem; } main.prose article section > ol > li::marker { font-family: var(--mono); font-size: 0.875em; font-weight: 600; color: var(--ink-soft); } main.prose article :is(h1, h2, h3, h4) { scroll-margin-top: 5.5rem; font-family: var(--sans); text-wrap: balance; letter-spacing: -0.02em; } main.prose article section h2 { margin-top: 3em; font-size: 1.5rem; } main.prose article section h2 + p { margin-top: 1em; } /* first-use terms, italic in the draft: one quiet accent so the article's vocabulary is scannable */ main.prose article section > p em, main.prose article section > ul em, main.prose article section > ol em { color: color-mix(in srgb, var(--c-blue) 70%, var(--c-ink)); } /* ── Article opening: kicker, headline, standfirst ─────────────────────── */ main.prose article > header { text-align: center; margin-bottom: 2rem; } main.prose article > header .art-kicker { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.875rem; } main.prose article > header h1 { font-size: 2.625rem; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 0.5rem; } main.prose article > header .art-standfirst { font-family: var(--serif); font-style: italic; font-size: 1.3125rem; line-height: 1.45; color: var(--ink-soft); margin: 0 auto 0.875rem; max-width: 34rem; text-wrap: balance; } main.prose article > header .text-sm, main.prose article > header time { font-family: var(--sans); letter-spacing: 0.02em; } main.prose article > header .cover-row { text-align: left; } /* ── Thematic break: a short quiet rule ────────────────────────────────── */ main.prose article section hr { border: 0; border-top: 1px solid var(--hairline); width: 6rem; height: auto; margin: 3.25rem auto; overflow: visible; } /* ── Mathematics ───────────────────────────────────────────────────────── */ main.prose article .katex-display { margin: 2.5rem 0; overflow-x: auto; overflow-y: clip; padding-block: 0.25rem; } main.prose article .katex-display .katex { font-size: 1.21em; } main.prose article section p .katex, main.prose article section li .katex, main.prose article section table .katex { font-size: 1.04em; } /* math is selectable and copies once: the visible layer carries the selection; the hidden MathML layer stays out of it */ main.prose article .katex .katex-mathml { user-select: none; } /* ── Tables: full grids ────────────────────────────────────────────────── */ main.prose article section table { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; border-collapse: collapse; margin: 2.25rem auto; display: block; width: fit-content; max-width: 100%; overflow-x: auto; } main.prose article section table th, main.prose article section table td { border: 1px solid var(--hairline); padding: 0.4375rem 1rem; text-align: center; } main.prose article section table th:first-child, main.prose article section table td:first-child { text-align: left; } main.prose article section table thead th { font-weight: 600; font-size: 0.875rem; } /* ── Code ──────────────────────────────────────────────────────────────── */ main.prose article section pre { font-size: 0.875rem; line-height: 1.75; border: 1px solid var(--hairline-soft); padding: 1.25rem 1.375rem; overflow-x: auto; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } main.prose article section pre code { font-family: var(--mono); } /* comments are load-bearing prose in this series: keep them readable, set apart by slant rather than by fading further */ main.prose article section pre .z-comment { font-style: italic; } main.prose article section pre .giallo-ln { opacity: 0.45; margin-right: 1em; } /* ── Drawings: paper figures, light + dark, `.dark`-switched ───────────── */ main.prose article .drawing { margin: 2.75rem auto; width: 100%; } main.prose article .drawing .drawing-card { border: 1px solid var(--hairline); background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); padding: 1.25rem 1rem; } main.prose article .drawing img { display: block; margin: 0 auto; width: 100%; height: auto; cursor: zoom-in; } main.prose article .drawing .drawing-dark { display: none; } .dark main.prose article .drawing .drawing-light { display: none; } .dark main.prose article .drawing .drawing-dark { display: block; } /* ── Captions: one voice for every figure ──────────────────────────────── */ main.prose article figcaption, main.prose article .widget .w-cap { font-family: var(--sans); font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); text-align: left; margin: 0.625rem 0 0; } main.prose article .widget .w-cap { margin: 0; } main.prose article figcaption .fig-label, main.prose article .widget .fig-label { font-weight: 600; color: var(--c-ink); } main.prose article .widget .w-caption { margin-top: 0.875rem; } main.prose article .widget .w-caption .w-fine { font-family: var(--sans); font-size: 0.71875rem; line-height: 1.6; color: var(--ink-soft); margin: 0.625rem 0 0; } main.prose article .widget .w-caption .w-legend { margin: 0.5rem 0 0; } /* ── Citations: inline marks, margin apparatus, references ─────────────── */ main.prose article .cite { font-family: var(--sans); font-size: 0.71875em; font-weight: 500; vertical-align: 0.18em; letter-spacing: 0.02em; white-space: nowrap; color: color-mix(in srgb, var(--ink-soft) 70%, transparent); } main.prose article .cite a { color: var(--c-cite-dim); text-decoration: none; padding-inline: 0.03125rem; transition: color 0.12s ease; } main.prose article .cite a:hover, main.prose article .cite.cite-hot a { color: var(--c-cite); text-decoration: underline; text-underline-offset: 2px; } /* margin citations, wide screens only: the margin as a reading list. Each source appears once, at its first citation, as a small card: a printed tick marks the attachment point, the title leads in the reading face, author and venue sit beneath, and the whole entry links to the full reference. Hovering the inline mark wakes its card, and back. */ main.prose article { position: relative; } main.prose article .sidenote { position: absolute; left: calc(100% + 2.5rem); width: 17rem; } main.prose article .sidenote::before { content: ""; display: block; width: 1.75rem; border-top: 1px solid var(--hairline); margin-bottom: 0.625rem; transition: width 0.15s ease, border-color 0.15s ease; } main.prose article .sidenote .sn-entry { position: relative; display: block; padding-left: 1.5rem; margin-bottom: 0.9375rem; text-decoration: none; } main.prose article .sidenote .sn-entry:last-child { margin-bottom: 0; } main.prose article .sidenote .sn-num { position: absolute; left: 0; top: 0.1875em; margin: 0; font-family: var(--mono); font-size: 0.65625rem; font-weight: 600; color: var(--c-cite-dim); transition: color 0.12s ease; } main.prose article .sidenote.sn-hot .sn-num, main.prose article .sidenote .sn-entry:hover .sn-num { color: var(--c-cite); } main.prose article .sidenote .sn-title { display: block; font-family: var(--serif); font-style: italic; font-size: 0.8125rem; line-height: 1.45; color: var(--c-ink); text-wrap: pretty; transition: color 0.12s ease; } main.prose article .sidenote .sn-title.sn-untitled { font-family: var(--sans); font-style: normal; font-size: 0.71875rem; line-height: 1.5; color: var(--ink-soft); } main.prose article .sidenote .sn-meta { display: block; margin-top: 0.1875rem; font-family: var(--sans); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.01em; color: var(--ink-soft); text-wrap: pretty; } main.prose article .sidenote .sn-entry:hover .sn-title { color: var(--c-cite); } main.prose article .sidenote.sn-hot::before { width: 2.75rem; border-color: var(--c-cite); } main.prose article .sidenote.sn-hot .sn-title { color: var(--c-cite); } main.prose article .sidenote.sn-hot .sn-title.sn-untitled { color: var(--c-ink); } @media (max-width: 1439px) { main.prose article .sidenote { display: none; } } /* references: quiet entries, hanging violet numbers, target flash */ main.prose article section h2#references ~ p { position: relative; font-family: var(--sans); font-size: 0.875rem; line-height: 1.65; color: var(--ink-soft); border-top: 1px solid var(--hairline-soft); padding-block: 0.6875rem; padding-left: 3.25rem; margin-block: 0; overflow-wrap: break-word; text-align: left; hyphens: none; scroll-margin-top: 6rem; transition: background 0.4s ease; } main.prose article section h2#references + p { border-top: 0; } main.prose article section h2#references ~ p em { color: var(--c-ink); } main.prose article .ref-num { position: absolute; left: 0; top: 0.75rem; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--c-cite-dim); scroll-margin-top: 6rem; } main.prose article section h2#references ~ p:has(:target) { background: color-mix(in srgb, var(--c-cite) 9%, transparent); outline: 0.5rem solid color-mix(in srgb, var(--c-cite) 9%, transparent); } main.prose article .ref-link { color: var(--c-cite-dim); text-decoration: none; font-size: 0.9286em; overflow-wrap: anywhere; transition: color 0.12s ease; } main.prose article .ref-link:hover { color: var(--c-cite); text-decoration: underline; text-underline-offset: 2px; } /* ── TOC: Notion-style rail on the left ────────────────────────────────── */ .toc-rail-wrap { position: fixed; left: 1.375rem; top: 45%; transform: translateY(-50%); z-index: 40; display: none; } @media (min-width: 1360px) { .toc-rail-wrap { display: block; } .toc-mobile { display: none; } } .toc-rail { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; padding: 0.5rem 0.25rem; transition: opacity 0.15s ease; } .toc-bar { width: 18px; height: 3px; background: var(--hairline); cursor: pointer; transition: width 0.15s ease, background 0.15s ease; } .toc-bar.active { width: 26px; background: var(--c-ink); } .toc-panel { position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(-6px); opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; background: var(--paper); border: 1px solid var(--hairline-soft); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); padding: 0.875rem 1.125rem; min-width: 15rem; max-height: 70vh; overflow-y: auto; } .toc-rail-wrap:hover .toc-panel, .toc-panel:focus-within { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); } .toc-rail-wrap:hover .toc-rail { opacity: 0; } .toc-panel ul { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.84375rem; line-height: 1.5; } .toc-panel li { margin: 0; padding: 0; } .toc-panel a { display: block; padding: 0.28125rem 0.5rem; color: var(--ink-soft); text-decoration: none; } .toc-panel a:hover { background: var(--panel); color: var(--c-ink); } .toc-panel a.active { color: var(--c-ink); font-weight: 600; } /* narrow screens: slim disclosure */ .toc-mobile { font-family: var(--sans); border-block: 1px solid var(--hairline-soft); padding: 0.375rem 0; margin-bottom: 2.5rem; } .toc-mobile summary { text-align: center; padding: 0.25rem 0; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; list-style-position: inside; } .toc-mobile ul { list-style: none; columns: 2; column-gap: 2.5rem; padding: 0.5rem 1rem 0.75rem; margin: 0 auto; max-width: 36rem; font-size: 0.9375rem; } .toc-mobile li { margin-block: 0.2em; break-inside: avoid; } .toc-mobile a { color: var(--ink-soft); text-decoration: none; } .toc-mobile a:hover { color: var(--c-ink); text-decoration: underline; } @media (max-width: 560px) { .toc-mobile ul { columns: 1; } } /* ── Lightbox ──────────────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: rgba(14, 15, 17, 0.9); cursor: zoom-out; padding: 2.5vh 2.5vw; } .lightbox.open { display: flex; } .lightbox img { max-width: 95vw; max-height: 95vh; width: auto; height: auto; background: #ffffff; padding: 1.5rem; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5); } .dark .lightbox img { background: #17191d; } /* ── Interactives: figures you can touch ─────────────────────────────── The frame holds only the instrument: the stage, its on-stage annotations, and the minimum controls. Every explanatory text is the caption, below the frame, in the figure voice. Values live on the geometry they measure, never in a dashboard beside it. */ main.prose article .widget { font-family: var(--sans); margin: 2.75rem auto; font-size: 0.9375rem; line-height: 1.55; } main.prose article .widget figure, main.prose article .widget svg, main.prose article .widget canvas { margin: 0; } main.prose article .widget .w-frame { position: relative; border: 1px solid var(--hairline); background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); padding: 1.75rem 1.5rem 1.375rem; } main.prose article .widget .w-tag { position: absolute; top: 0.75rem; right: 0.875rem; font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-blue); } /* stages */ main.prose article .widget .w-stage { margin: 0.25rem auto 0; } main.prose article .widget .w-stage svg { display: block; width: 100%; height: auto; touch-action: none; } main.prose article .widget .w-stage svg text { font-family: "Virgil", var(--sans); } main.prose article .widget .w-stage svg.grabbable { cursor: grab; } main.prose article .widget .w-stage svg.grabbable:active { cursor: grabbing; } main.prose article .widget .w-stage-builder { max-width: 460px; } main.prose article .widget .w-stage-leak { max-width: 34rem; } main.prose article .widget .w-stage-third { max-width: 25rem; } /* controls */ main.prose article .widget button { font: 600 0.84375rem/1 var(--sans); letter-spacing: 0.01em; color: var(--paper); background: var(--c-ink); border: 0; padding: 0.5625rem 1.25rem; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); transition: opacity 0.12s ease; } main.prose article .widget button:hover { opacity: 0.85; } main.prose article .widget button:disabled { background: none; color: var(--ink-soft); border: 1px solid var(--hairline-soft); box-shadow: none; cursor: default; } main.prose article .widget button.w-quiet { background: none; color: var(--c-ink); border: 1px solid var(--hairline); box-shadow: none; } main.prose article .widget :is(button, input, label, summary, svg):focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; } main.prose article .widget input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; margin: 0.375rem 0 0; } main.prose article .widget input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--hairline); } main.prose article .widget input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -4.5px; background: var(--c-ink); border: 2.5px solid var(--paper); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: ew-resize; } main.prose article .widget input[type="range"]::-moz-range-track { height: 4px; background: var(--hairline); } main.prose article .widget input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; background: var(--c-ink); border: 2.5px solid var(--paper); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: ew-resize; } main.prose article .widget input[type="number"] { font: 600 0.875rem/1.4 var(--mono); color: inherit; background: var(--paper); border: 1px solid var(--hairline); padding: 0.375rem 0.5625rem; width: 10em; max-width: 100%; font-variant-numeric: tabular-nums; } main.prose article .widget input[type="radio"], main.prose article .widget input[type="checkbox"] { accent-color: var(--c-ink); width: 0.9375rem; height: 0.9375rem; } main.prose article .widget .w-choice { display: flex; gap: 0.625rem; align-items: center; padding: 4px 0; cursor: pointer; } main.prose article .widget .w-actions { text-align: center; margin: 0.75rem 0 1rem; } main.prose article .widget .w-actions-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.625rem 0 0; } /* the live formula: the reading as an instrument line */ main.prose article .widget .w-formula { font-family: var(--mono); font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--c-ink); text-align: center; margin: 1rem 0 0; padding-top: 0.875rem; border-top: 1px solid var(--hairline-soft); } main.prose article .widget .w-formula b { font-weight: 600; font-size: 1.125rem; } /* panels: flat sections separated by hairlines, no nested boxes */ main.prose article .widget .w-panel { border-top: 1px solid var(--hairline-soft); margin-top: 1.25rem; padding-top: 1.125rem; } main.prose article .widget .w-panel.w-gate { border-top: 0; margin-top: 0.25rem; padding-top: 0; max-width: 37rem; margin-inline: auto; } main.prose article .widget .w-title-sm { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: left; margin-bottom: 0.5rem; } main.prose article .widget .w-note { font-size: 0.8125rem; line-height: 1.55; color: var(--ink-soft); text-align: left; margin: 0.3125rem 0 0; text-wrap: pretty; } main.prose article .widget .w-q { margin: 0.875rem 0 0.25rem; font-size: 0.9375rem; } main.prose article .widget .w-gate .w-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); column-gap: 1.25rem; } main.prose article .widget .w-warn { color: var(--c-red); font-size: 0.875rem; display: none; margin: 0.5rem 0 0; } main.prose article .widget .w-locknote { font-family: var(--sans); color: var(--ink-soft); font-size: 0.8125rem; margin: 0.75rem 0 0; text-align: left; max-width: 64ch; } /* control rails: label, slider, value on one line */ main.prose article .widget .w-ctl { display: flex; align-items: center; gap: 1rem; margin: 0.375rem 0 0.25rem; } main.prose article .widget .w-ctl-label { flex: none; font-size: 0.8125rem; color: var(--ink-soft); } main.prose article .widget .w-sliderwrap { flex: 1 1 auto; min-width: 0; position: relative; display: block; } main.prose article .widget .w-ctl b { flex: none; min-width: 4.5ch; text-align: right; font-family: var(--mono); font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; } main.prose article .widget .w-ctl-note { flex: none; font-size: 0.78125rem; color: var(--ink-soft); } main.prose article .widget .w-zoomlab { flex: none; display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; color: var(--ink-soft); font-size: 0.78125rem; } main.prose article .widget .w-track { position: absolute; left: 0; right: 0; top: 100%; height: 14px; display: block; } main.prose article .widget .w-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.72rem; font-family: var(--mono); color: var(--c-orange); white-space: nowrap; } main.prose article .widget .w-tick::before { content: ""; display: block; width: 1px; height: 5px; background: var(--c-orange); margin: 0 auto 1px; } main.prose article .widget .w-cappanel .w-ctl { margin-bottom: 2rem; } /* chart */ main.prose article .widget .w-chart { margin: 0.625rem 0 0.25rem; } main.prose article .widget .w-chart canvas { display: block; width: 100%; height: auto; } main.prose article .widget .w-statline { font-size: 0.8125rem; color: var(--ink-soft); margin: 0.5rem 0 0; } main.prose article .widget .w-statline b { font-family: var(--mono); font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: var(--c-ink); } /* the capacity sentence: one line, one payoff number */ main.prose article .widget .w-capline { font-family: var(--serif); font-size: 1rem; line-height: 1.65; margin: 0.25rem 0 0.125rem; text-wrap: pretty; } main.prose article .widget .w-capline b { font-family: var(--mono); font-size: 1.0625rem; font-variant-numeric: tabular-nums; } main.prose article .widget .w-reveal { display: none; border-top: 1px solid var(--hairline-soft); margin-top: 1.375rem; padding-top: 1.125rem; max-width: 62ch; text-align: left; } main.prose article .widget .w-reveal p { font-family: var(--serif); font-size: 1rem; line-height: 1.65; margin-block: 0.5em; text-wrap: pretty; } main.prose article .widget .w-reveal p.w-title-sm { font-family: var(--sans); font-size: 0.75rem; line-height: 1.4; margin: 0 0 0.625rem; } main.prose article .widget .w-reveal b { font-family: var(--mono); font-size: 0.9375em; font-variant-numeric: tabular-nums; } /* the builder table: same grid as article tables */ main.prose article .widget table { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; border-collapse: collapse; margin: 1.125rem auto 0.25rem; display: block; width: fit-content; max-width: 100%; overflow-x: auto; } main.prose article .widget th, main.prose article .widget td { border: 1px solid var(--hairline); padding: 0.4375rem 1rem; text-align: center; } main.prose article .widget th:first-child, main.prose article .widget td:first-child { text-align: left; } main.prose article .widget thead th { font-weight: 600; font-size: 0.875rem; } main.prose article .widget td.w-q { color: var(--ink-soft); margin: 0; } main.prose article .widget td.w-new { color: var(--c-orange); font-weight: 600; } /* states */ main.prose article .widget .w-good { color: var(--c-green); } main.prose article .widget .w-bad { color: var(--c-red); } /* legend swatches (the builder's color key, in its caption) */ main.prose article .widget .w-legend { display: flex; justify-content: flex-start; gap: 1.125rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--ink-soft); } main.prose article .widget .w-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--sw); } /* the builder's hint, swapped by the instrument on completion */ main.prose article .widget .w-hint.w-hint-done { color: var(--c-ink); } /* ── Series index: the kicker unfolds the six parts ────────────────────── */ main.prose article > header .series-details { margin: 0 0 0.875rem; } main.prose article > header .series-details summary.art-kicker { display: inline-block; margin: 0; cursor: pointer; list-style: none; padding-bottom: 0.1875rem; border-bottom: 1px dotted color-mix(in srgb, var(--ink-soft) 55%, transparent); transition: color 0.12s ease, border-color 0.12s ease; } main.prose article > header .series-details summary::-webkit-details-marker { display: none; } main.prose article > header .series-details summary.art-kicker:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); } main.prose article > header .series-details[open] summary.art-kicker { border-bottom-color: transparent; } /* the affordance: a drawn chevron, no glyph */ main.prose article > header .series-details summary.art-kicker::after { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 0.5rem; vertical-align: 0.2em; transition: transform 0.15s ease; } main.prose article > header .series-details[open] summary.art-kicker::after { transform: rotate(-135deg); vertical-align: -0.05em; } main.prose article > header .series-parts { list-style: none; counter-reset: sp; width: fit-content; margin: 0.75rem auto 0.25rem; padding: 0; text-align: left; font-family: var(--sans); font-size: 0.8125rem; line-height: 2.05; color: var(--ink-soft); animation: sp-unfold 0.18s ease; } main.prose article > header .series-parts li { margin: 0; padding: 0; counter-increment: sp; } main.prose article > header .series-parts li::before { content: counter(sp); display: inline-block; width: 1.75em; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); opacity: 0.6; } main.prose article > header .series-parts li.sp-current { color: var(--c-ink); font-weight: 600; } main.prose article > header .series-parts li.sp-current::before { color: var(--c-ink); opacity: 1; } main.prose article > header .series-parts .sp-note { font-weight: 400; color: var(--ink-soft); } @keyframes sp-unfold { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } } /* ── Theme fixes ───────────────────────────────────────────────────────── */ /* the theme's date separator: a comma, not a middot */ main.prose article .middot:not(:last-child) { margin-inline: 0 0.3125rem; } main.prose article .middot:not(:last-child)::after { content: ","; margin-left: -0.125rem; } /* ── Small screens ─────────────────────────────────────────────────────── */ @media (max-width: 520px) { main.prose article section > p, main.prose article section > ul, main.prose article section > ol { font-size: 1.0625rem; } main.prose article section blockquote { font-size: 1.0625rem; padding-inline: 0.25rem; } main.prose article > header h1 { font-size: 2rem; } main.prose article section table th, main.prose article section table td { padding: 0.4375rem 0.75rem; } main.prose article .widget th, main.prose article .widget td { padding: 0.375rem 0.625rem; } main.prose article .drawing .drawing-card { padding: 0.875rem 0.625rem; } main.prose article .widget .w-frame { padding: 1.5rem 0.875rem 1rem; } } /* narrow screens: each control rail folds — label and value share the top line, the slider takes a full line beneath, notes follow */ @media (max-width: 600px) { main.prose article .widget .w-ctl { flex-wrap: wrap; row-gap: 0.125rem; column-gap: 0.75rem; } main.prose article .widget .w-sliderwrap { order: 10; flex-basis: 100%; } main.prose article .widget .w-ctl .w-ctl-note, main.prose article .widget .w-ctl .w-zoomlab { order: 11; padding-top: 0.875rem; } main.prose article .widget .w-ctl b { margin-left: auto; } main.prose article .widget .w-cappanel .w-ctl { margin-bottom: 2.25rem; } } @media (max-width: 420px) { main.prose article .widget .w-formula { font-size: 0.8125rem; } main.prose article .widget .w-formula b { font-size: 0.9375rem; } } /* ── Reduced motion ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .toc-rail, .toc-bar, .toc-panel, main.prose article .widget button, main.prose article .sidenote, main.prose article section h2#references ~ p { transition: none; } main.prose article > header .series-parts { animation: none; } } /* list cards everywhere: comma separators, square thumbnails */ .middot:not(:last-child) { margin-inline: 0 0.3125rem; } .middot:not(:last-child)::after { content: ","; margin-left: -0.125rem; } .cover-thumb, .cover-thumb img { border-radius: 0 !important; } /* ── The cover plate and the list cards ────────────────────────────────── */ /* the article's cover, set under the opening like a printed plate; dark mode uses the drawings' own inversion */ main.prose article > header .art-cover { margin: 2rem auto 0.5rem; max-width: 23rem; border: 1px solid var(--hairline-soft); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } main.prose article > header .art-cover img { display: block; width: 100%; height: auto; } .dark main.prose article > header .art-cover img { filter: invert(93%) hue-rotate(180deg); } .card-kicker { font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.4375rem; } .card-standfirst { font-family: var(--serif); font-style: italic; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); margin: 0.25rem 0 0.4375rem; } .dark .cover-thumb img { filter: invert(93%) hue-rotate(180deg); } /* quotes wear the theme's original dress; only the face is ours */ main.prose article section blockquote { font-family: var(--serif); font-size: 1.125rem; line-height: 1.7; } /* giallo's line boxes (required by Zola docs): full-width lines that never collapse when empty */ main.prose article section pre .giallo-l { display: inline-block; min-height: 1lh; width: 100%; }