/* ============================================================================ rashomon · type system ("bancada") The site is an instrument that measures words, and it is dressed like one. Every limit a reader sees -- where a section starts, what is a title and what is a caption, which number is the answer -- is drawn by type, by a hairline, or by the dot grid the figures sit on. Colour is a second hierarchy, and it means something; it never ranks a heading. Five dials do that work, and nothing else is allowed to: 1. FAMILY IBM Plex Sans Condensed names a thing, in capitals. IBM Plex Sans explains a thing. IBM Plex Mono measures a thing: every number, every label, every word on a figure, and the sentence a reader edits. 2. SIZE One ramp, --t-*. A component never invents a size. Rank is carried at least as much by weight, case and family as by size. 3. COLOUR --ink is "read this", --accent (amber) is the live thing and the label marker, --hostile and --favor are evaluation, --cmp-a/--cmp-b are who, --muted is "this supports it". A heading that needed colour to be found is a heading in the wrong place. 4. SPACE Base 4px. The gap above a heading IS its rank. More air, higher rank. 5. SURFACE --bg (with its dot grid) < --panel < --soft. A figure is --panel with a 1px --line outline: the one border the site draws, and it draws it on every figure alike. Data hues stay on marks; they never tint a surface. The hierarchy, top to bottom: h1 --t-mega display 700 caps ink what this page is (once per page) h2 --t-xl display 700 caps ink what this section is h3 --t-lg display 600 caps ink what this block is h4 --t-md display 600 caps ink one thing inside a block .lede --t-base mono 400 muted the sentence under an h1 .sentence --t-base mono 400 ink the sentence you can change p, li --t-base sans 400 ink prose .figure-sub --t-sm mono 400 muted prose that supports a title .figure-key dt --t-2xs mono 500 accent names an encoding .figure-key dd --t-sm mono 400 muted what that encoding means .note,.meta --t-xs sans 400 muted captions, counts, footnotes .eyebrow --t-2xs mono 500 muted names the rank right below it, after a "//" dt / dd see "definition pairs" ========================================================================= */ :root { --bg: #0b0e0d; --panel: #111615; --soft: #1a2220; --line: #243029; --ink: #d6ded8; --muted: #7b8a82; --accent: #f0b429; --accent-ink: #111411; --hostile: #ff7a8a; --favor: #74dc86; --green: #b9cdc0; --danger: #ff8a8a; /* Quiet grey in the middle of every ramp: SCALE_MID in format.ts. Not --muted (chrome). */ --scale-mid: #8b909c; /* The ruler figure's own hue pair, one per side (issue #91): kept in step with format.js's balanceColor, whose ends resolve to these exact colours. */ --cmp-a: #7fa8ff; --cmp-b: #ff9d6b; /* The tema mask (issue #217): six discrete slots for term communities, a Louvain build's own grouping, never comparable across builds. Fixed order, distinct from each other and from --hostile/--favor/--cmp-a/--cmp-b, each >=4.5:1 against --bg. A 7th+ community paints --muted via themeMask's null return, so a 7th slot is never needed. */ --theme-1: #3987e5; --theme-2: #dd543c; --theme-3: #199e70; --theme-4: #b35bd1; --theme-5: #d55181; --theme-6: #9085e9; --sans: 'IBM Plex Sans', system-ui, sans-serif; --display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* The ramp. Nine steps, ratio around 1.25, the top three fluid so a 375px phone and a 1440px desktop read the same ranks rather than the same pixels. The condensed display face is narrow, so the top steps run smaller than a wide face would need. --t-micro is the floor and exists for SVG labels only; nothing on this site is smaller. */ --t-mega: clamp(34px, 5vw, 58px); --t-xl: clamp(24px, 2.8vw, 34px); --t-lg: clamp(18px, 2vw, 23px); --t-md: 17px; --t-base: 15px; --t-sm: 14px; --t-xs: 13px; --t-2xs: 12px; --t-micro: 11px; /* Line height falls as size rises: display type sets tight, prose sets open. --lh-chip is the sentence's own, where a ignores line-height for its own box, so the chip gets an explicit height; the sentence's line-height is what keeps daylight between lines. */ .sentence-line { font-family: var(--mono); font-size: var(--t-base); line-height: var(--lh-chip); font-weight: 400; max-width: 1120px; } .pick { display: inline-block; position: relative; max-width: 100%; vertical-align: baseline; margin: 0; } .keep { white-space: nowrap; } /* The chevron is drawn in CSS so it follows --accent; a data-URI SVG cannot read a token. */ .pick::after { content: ''; position: absolute; right: .55em; top: 50%; width: .32em; height: .32em; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .pick select { appearance: none; -webkit-appearance: none; max-width: 100%; background: var(--soft); border: 1px solid var(--line); border-radius: 2px; padding: 0 1.25em 0 .5em; height: 1.6em; color: var(--accent); font-family: inherit; font-size: inherit; line-height: 1.5em; font-weight: 500; cursor: pointer; text-overflow: ellipsis; field-sizing: content; vertical-align: baseline; transition: background-color .12s, border-color .12s; } .pick select:hover { background-color: var(--line); border-color: var(--muted); color: var(--ink); } /* A searchable select (src/ui/combobox.ts): the