/* ========================================================================== base.css — tokens, reset, and the defences. EVERY COLOUR IN THIS FILE IS DECLARED ONCE, HERE, IN :root. The values are generated by tools/palette.mjs and carried in js/brand.js; main.js mirrors the same object into these properties at boot, so a JS-driven accent swap and a CSS-driven one cannot disagree. tools/validate.mjs fails the build if any brand hex appears anywhere else in css/ or js/ — including as an rgb() triple, because a string-only check is not colour-aware and a sibling hid nine stale copies that way. THE GROUND IS MID-LIGHT AND TAKES BLACK INK. That is this site's whole register and it is not negotiable by eye: check 12 in tools/palette.mjs fails the build if the ground's relative luminance leaves 0.44-0.62. Two sibling sites are paper at 0.95, one is dusk at 0.38, six are near-black. This one is a grey card. ========================================================================== */ :root { /* surfaces */ --deep: #979AA0; --ground-2: #AEB1B8; --ground: #BABEC7; --plate: #C9CCD3; --plate-2: #D6D9E0; /* ink — every lightness solved by bisection against --deep */ --ink: #080A10; /* 7.02 : 1 */ --ink-2: #202229; /* 5.63 : 1 */ --ink-3: #292B32; /* 5.01 : 1 */ --faint: #303239; /* 4.54 : 1 */ /* accents — the ground hue rotated by exact thirds and a half */ --garnet: #631612; /* h 28.0 = 268 + 120 */ --brass: #413000; /* h 88.0 = 268 + 180 */ --verdigris: #003B12; /* h 148.0 = 268 + 240 */ --garnet-mark: #951E1A; --brass-mark: #614900; --verdigris-mark: #005920; --garnet-wash: #F3C4BD; --brass-wash: #E0D0A8; --verdigris-wash: #BADCBD; --accent: var(--garnet); --accent-mark: var(--garnet-mark); --accent-wash: var(--garnet-wash); } :root { /* ---- hairlines. Alpha over the ground rather than flat greys, so a rule on --plate-2 and one on --ground-2 read as the same weight. MIXED FROM --ink RATHER THAN WRITTEN OUT. The first version spelled these as an rgba() triple of the ink's own channels — a second copy of a brand colour living outside :root, which is exactly what check 4 in tools/validate.mjs exists to find. It found it, and then found it again in the comment that described it, because a colour written in a comment is still a copy that can go stale. color-mix means a change to the ink reaches every rule on the site. --------------- */ --rule: color-mix(in srgb, var(--ink) 16%, transparent); --rule-2: color-mix(in srgb, var(--ink) 28%, transparent); --rule-faint: color-mix(in srgb, var(--ink) 8.5%, transparent); --shade: color-mix(in srgb, var(--ink) 5.5%, transparent); /* ---- type. Bricolage carries the display axes, Public Sans the body, Spline Sans Mono every figure that has to line up in a column. --- */ --display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif; --text: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace; --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.845rem); --step-0: clamp(0.945rem, 0.92rem + 0.13vw, 1.03rem); --step-1: clamp(1.11rem, 1.05rem + 0.30vw, 1.30rem); --step-2: clamp(1.36rem, 1.24rem + 0.60vw, 1.75rem); --step-3: clamp(1.72rem, 1.46rem + 1.28vw, 2.55rem); --step-4: clamp(2.15rem, 1.63rem + 2.55vw, 3.80rem); --step-5: clamp(2.55rem, 1.72rem + 4.10vw, 5.40rem); --gutter: clamp(1.1rem, 0.7rem + 2vw, 2.4rem); --measure: 68ch; --shell: 1200px; --radius: 3px; --radius-lg: 5px; } /* ---- reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--ground); color: var(--ink-2); font-family: var(--text); font-size: var(--step-0); line-height: 1.62; font-feature-settings: 'kern' 1, 'liga' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, canvas { display: block; max-width: 100%; } h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.018em; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); letter-spacing: -0.01em; } h4 { font-size: var(--step-0); letter-spacing: 0; } p { margin: 0 0 1.05em; max-width: var(--measure); } a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: from-font; } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-mark); outline-offset: 3px; border-radius: 2px; } strong, b { font-weight: 600; color: var(--ink); } code, kbd, samp { font-family: var(--mono); font-size: 0.885em; } hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4rem 0; } ::selection { background: var(--accent-mark); color: var(--plate-2); } /* Numbers line up. Every figure on this site sits in a column with other figures, and proportional digits make a table of measurements look like a ransom note. */ .mono, table, .num, time, .datum-value { font-variant-numeric: tabular-nums; } /* ---- layout primitives ------------------------------------------------ */ .shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; } .shell-wide { width: min(100% - 2 * var(--gutter), 1420px); margin-inline: auto; } .stack > * + * { margin-top: var(--flow, 1.1rem); } .section { padding-block: clamp(3.2rem, 2rem + 5vw, 6.4rem); } .section + .section { padding-top: 0; } /* ---- the reveal, scoped so a reader without JS sees the page ---------- 37 elements on a sibling site started at opacity 0 waiting on an IntersectionObserver that never ran. The `js` class is set by an inline script in before any stylesheet parses. */ .js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 0.62s cubic-bezier(.2,.7,.3,1), transform 0.62s cubic-bezier(.2,.7,.3,1); } .js [data-reveal].seen { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } } /* ---- the instrument vocabulary --------------------------------------- The document genre is a bench report from a magnetometry rig: run headers, condition lines, tabular figures, and a provenance mark beside every number so a reader never has to guess whether it was measured on a chain, computed in a model, or is a description of something unbuilt. */ .eyebrow { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin: 0 0 0.9rem; display: flex; align-items: baseline; gap: 0.7rem; } .eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); } .run-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.2rem; border-bottom: 1px solid var(--rule-2); padding-bottom: 0.55rem; margin-bottom: 1.4rem; } .run-head .run-id { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; color: var(--ink); } .run-head .run-cond { font-family: var(--mono); font-size: var(--step--1); color: var(--faint); margin-left: auto; } /* Provenance. Three states and no fourth. */ .prov { display: inline-flex; align-items: center; gap: 0.34em; font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.12em 0.44em; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-3); background: var(--plate-2); white-space: nowrap; vertical-align: 0.12em; } .prov::before { content: ''; width: 0.42em; height: 0.42em; border-radius: 50%; background: currentColor; } .prov-m { color: var(--verdigris); border-color: color-mix(in oklab, var(--verdigris) 45%, transparent); background: var(--verdigris-wash); } .prov-s { color: var(--brass); border-color: color-mix(in oklab, var(--brass) 45%, transparent); background: var(--brass-wash); } .prov-p { color: var(--garnet); border-color: color-mix(in oklab, var(--garnet) 45%, transparent); background: var(--garnet-wash); } /* Cards are raised paper on a grey card, not floating glass. */ .card { container-type: inline-size; background: var(--plate); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.1rem, 0.8rem + 1.1vw, 1.7rem); box-shadow: 0 1px 0 var(--plate-2) inset, 0 1px 2px var(--shade); } .card-2 { background: var(--plate-2); } .well { background: var(--ground-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); box-shadow: 0 1px 2px var(--shade) inset; } /* The big number. */ .datum { display: flex; flex-direction: column; gap: 0.15rem; } .datum-value { font-family: var(--display); font-size: var(--step-3); font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -0.03em; } .datum-value .unit { font-size: 0.5em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 0.2em; } .datum-label { font-size: var(--step--1); color: var(--ink-3); line-height: 1.4; max-width: 34ch; } /* Tables read as instrument output. */ table { width: 100%; border-collapse: collapse; font-size: var(--step--1); } th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule-faint); vertical-align: top; } thead th { font-family: var(--mono); font-size: 0.86em; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-2); font-weight: 500; } tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-family: var(--mono); } /* A scroll container needs a tabindex to be reachable by keyboard, which main.js adds — and it needs a focus ring once it is, or the focus simply disappears for a sighted keyboard user. */ .table-scroll { overflow-x: auto; } .table-scroll:focus-visible { outline: 2px solid var(--accent-mark); outline-offset: 2px; } /* A definition list, laid out as a bench spec sheet. THE CONTAINER QUERY IS LOAD-BEARING. These lists sit inside cards that are a third of the page wide, and a two-column label/value grid inside one gives a 9rem label column and about fifteen characters for the value — "shares in, assets out, at the price the vault reports" came out five words tall. A viewport media query cannot see that, because the card's width depends on the grid it is in and not on the window. */ .kv { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 0.1rem 1.2rem; margin: 0; font-size: var(--step--1); } .kv dt { font-family: var(--mono); color: var(--ink-3); padding: 0.34rem 0; border-top: 1px solid var(--rule-faint); } .kv dd { margin: 0; padding: 0.34rem 0; border-top: 1px solid var(--rule-faint); color: var(--ink-2); } .kv dt:first-child, .kv dt:first-child + dd { border-top: 0; } @container (max-width: 30rem) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dt { padding-bottom: 0; } .kv dd { border-top: 0; padding-top: 0.1rem; padding-bottom: 0.55rem; } } /* Figures carry their own caption and their own provenance. */ figure { margin: 0; } figcaption { font-size: var(--step--1); color: var(--ink-3); margin-top: 0.7rem; max-width: 62ch; } .lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 60ch; } .small { font-size: var(--step--1); color: var(--ink-3); } .faint { color: var(--faint); } .accent { color: var(--accent); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }