/* Copperhound design tokens + component layer v1.2 (21 Oct 2026). Supersedes v1.1 (archived in archive/v1.1-2026-09-26/) and v1 (archive/v1-2026-09-26/).
Source of truth for colors, type, radius, spacing, fonts AND the core components. Import this file; never redeclare these values.
The UI kit (copperhound-ui-kit.html) shows every component built from these classes; the brand book explains the why.
What changed from v1 (design review, every item approved by Martin, 26 Sep 2026):
1 Primary (enamel) button: Rust fill, Deep Red hover (beige label 4.54:1 and 6.89:1; v1 was 3.20:1 and failed AA). Label centered on its cap height.
2 Red has fewer jobs: headlines are Soot; selected states are Soot; red = badge, actions and links, eyebrows, the double rule.
Destructive actions are a quiet Deep Red text action with an icon, used only inside a confirmation.
3 One source of truth: status colors are tokens; three radius tiers; components on the 4px spacing scale; box-sizing set here.
4 Eyebrows: six words or fewer (the rule), Courier at 0.85rem, tracked 0.06em.
5 Form controls: Muted borders (6.35:1), focusable toggle, helper text under fields, one column.
T1 Courier Prime only for eyebrows and short labels, minimum 0.85rem; numbers in Newsreader (its figures are tabular).
T2 Measure token: running text is capped at 65 characters.
T3 Four League Gothic sizes: control, H3, H2, H1.
T4 Fonts self-hosted in ./fonts (Google copies as a second source) with size-matched fallbacks, so nothing jumps while fonts load.
T5 Curly quotes and apostrophes in all running text (the copy linter flags straight ones).
M Double rule 5px (always reads red); pale zebra tint; tooltip opens on hover, keyboard focus and tap; count badge centered.
What changed in v1.2 (designer review of the website, approved by Martin, 21 Oct 2026):
R1 Red gets a fifth job: the closing call-to-action band (.ch-cta-band), Rust, centered, once per page, directly above the footer.
The one dark section per page is now the footer, so the call to action no longer reads as part of it.
R2 Selling points are checked points (.ch-points): a Rust check and Courier caps, no border. Chips stay for states and filters only.
R3 Big facts are a list (.ch-facts): a Rust line icon in a round tint, the figure, the label. Never a grid of three.
R4 Accordion: questions at the H3 size with a Rust chevron and a clear gap; answers at body size; two columns at full page width from 760px.
R5 Card text sits 12px under the card heading (was 4px).
R6 Display sizes: four for words (unchanged). Figures and drawn devices (big facts, step numbers, the Friday report's counts,
stamps, the price tag, the ticket) are illustrations and are sized with the device. */
/* ================= Fonts =================
Files live in ./fonts next to this stylesheet (url() resolves relative to this file). The gstatic URL is a second source only.
Live pages ALSO preload the two main files in :
*/
@font-face{font-family:'League Gothic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/league-gothic-normal-400-latin.woff2') format('woff2'),url('https://fonts.gstatic.com/s/leaguegothic/v13/qFdR35CBi4tvBz81xy7WG7ep-BQAY7Krj7feObpH_9ahg9U.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'League Gothic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/league-gothic-normal-400-latin-ext.woff2') format('woff2'),url('https://fonts.gstatic.com/s/leaguegothic/v13/qFdR35CBi4tvBz81xy7WG7ep-BQAY7Krj7feObpH_9avg9UKQw.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/newsreader-normal-400-700-latin.woff2') format('woff2'),url('https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjA.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/newsreader-normal-400-700-latin-ext.woff2') format('woff2'),url('https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439DyjJBG.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 700;font-display:swap;src:url('fonts/newsreader-italic-400-700-latin.woff2') format('woff2'),url('https://fonts.gstatic.com/s/newsreader/v26/cY9CfjOCX1hbuyalUrK439vCjohC.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 700;font-display:swap;src:url('fonts/newsreader-italic-400-700-latin-ext.woff2') format('woff2'),url('https://fonts.gstatic.com/s/newsreader/v26/cY9CfjOCX1hbuyalUrK439vCgIhCFpY.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/courier-prime-normal-400-latin.woff2') format('woff2'),url('https://fonts.gstatic.com/s/courierprime/v11/u-450q2lgwslOqpF_6gQ8kELawFpWg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/courier-prime-normal-400-latin-ext.woff2') format('woff2'),url('https://fonts.gstatic.com/s/courierprime/v11/u-450q2lgwslOqpF_6gQ8kELaw9pWt_-.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/courier-prime-normal-700-latin.woff2') format('woff2'),url('https://fonts.gstatic.com/s/courierprime/v11/u-4k0q2lgwslOqpF_6gQ8kELY7pMT-Dfqw.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/courier-prime-normal-700-latin-ext.woff2') format('woff2'),url('https://fonts.gstatic.com/s/courierprime/v11/u-4k0q2lgwslOqpF_6gQ8kELY7pMT-7fq8Ho.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Size-matched fallbacks (measured 26 Sep 2026 against the files above): shown only until the real font arrives, same width and line box, so nothing moves on swap.
Arial, Helvetica and Liberation Sans share metrics; so do Times New Roman and Liberation Serif; so do Courier New and Liberation Mono. */
@font-face{font-family:'League Gothic Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans'),local('Arimo');size-adjust:52.6%;ascent-override:184.3%;descent-override:43.7%;line-gap-override:0%}
@font-face{font-family:'Newsreader Fallback';src:local('Times New Roman'),local('Liberation Serif'),local('Tinos');size-adjust:109.7%;ascent-override:67.5%;descent-override:24.6%;line-gap-override:0%}
@font-face{font-family:'Courier Prime Fallback';src:local('Courier New'),local('Liberation Mono'),local('Cousine');size-adjust:100%;ascent-override:78%;descent-override:34%;line-gap-override:0%}
:root {
/* Palette: "Weathered sign" plus white (unchanged from v1) */
--ch-soot: #2B2521; /* body text, headlines, selected states */
--ch-sign-red: #C8553D; /* the badge and the double rule only (4.35:1 on white: never small text) */
--ch-rust: #A5412D; /* the enamel button fill, links, eyebrows, small red text (6.19:1 on white, 4.54:1 on beige), the closing call-to-action band */
--ch-copper: #D98A4E; /* accents only; headings on the dark section; never text on light backgrounds */
--ch-beige: #EADBC2; /* section bands, logo letters, the enamel label and pinstripe */
--ch-tan: #A8977F; /* rules and quiet decorative details (2.84:1: never a control border) */
--ch-white: #FFFFFF; /* main page background */
--ch-muted: #6B5D50; /* secondary text, form control borders (6.35:1 on white) */
--ch-deep: #7A2E1F; /* badge letter shade, enamel hover, destructive actions, errors */
--ch-line: #E4D6BE; /* hairline borders on white */
--ch-line-strong: #DCCBAE; /* card borders */
--ch-dark-surface: #211C19; /* "Dark Surface": the one dark section per page (the footer), a shade darker than Soot */
--ch-beige-tint: #F6EFE3; /* table zebra rows (stays visible on a beige band) */
/* Status (v1 hard-coded these; now named and documented in the brand book) */
--ch-ok: #2E5E3B; --ch-ok-line: #8FAF8A; --ch-ok-tint: #EEF4EA; /* running, done */
--ch-warn: #7A3E12; --ch-warn-line: #D98A4E; --ch-warn-tint: #FBF0E2; /* needs your OK */
--ch-err: #7A2E1F; --ch-err-line: #7A2E1F; --ch-err-tint: #F7E6E2; /* didn't send */
--ch-info: #2B2521; --ch-info-line: #A8977F; --ch-info-tint: #F4EFE6; /* in progress, for your information */
--ch-on-dark: #EADBC2; --ch-on-dark-muted: #CDBFA8; /* text on the dark section */
/* Roles */
--ch-bg: var(--ch-white);
--ch-band: var(--ch-beige);
--ch-text: var(--ch-soot);
--ch-text-muted: var(--ch-muted);
--ch-heading: var(--ch-soot); /* v1.1: headlines are Soot (v1: Sign Red) */
--ch-action: var(--ch-rust);
--ch-action-hover: var(--ch-deep);
--ch-action-text: var(--ch-beige);
--ch-link: var(--ch-rust);
--ch-selected: var(--ch-soot);
--ch-control-border: var(--ch-muted);
/* Type */
--ch-font-display: 'League Gothic', 'League Gothic Fallback', 'Arial Narrow', sans-serif; /* headlines, buttons, nav: uppercase */
--ch-font-body: 'Newsreader', 'Newsreader Fallback', Georgia, serif; /* everything people read, and numbers */
--ch-font-label: 'Courier Prime', 'Courier Prime Fallback', 'Courier New', monospace; /* eyebrows and short labels only */
--ch-font-script: 'Damion', cursive; /* logo only; use the SVG files, never live text */
--ch-text-base: 17px;
--ch-lh-body: 1.55;
--ch-lh-display: 1.02;
--ch-track-display: 0.015em;
--ch-track-nav: 0.08em; /* nav and button labels */
--ch-track-label: 0.06em; /* Courier eyebrows and labels (v1: 0.14em) */
--ch-track-eyebrow: var(--ch-track-label);
--ch-measure: 65ch; /* maximum line length for running text */
/* Text sizes (Newsreader) */
--ch-fs-small: 0.9rem;
--ch-fs-body: 1rem; /* 17px */
--ch-fs-lead: 1.12rem;
/* Label size (Courier Prime): one size, never smaller. Its capitals are short (0.58em), so 0.85rem gives ~8.4px caps. */
--ch-fs-label: 0.85rem;
--ch-fs-eyebrow: var(--ch-fs-label);
/* Display sizes (League Gothic): exactly four for words. No other sizes for headings, buttons or labels, no local overrides.
Figures and drawn devices (big facts, step numbers, stamps, the price tag) are illustrations, sized with the device. */
--ch-fs-control: 1.1rem; /* 18.7px: nav, every button */
--ch-fs-h3: 1.4rem; /* 23.8px: H3, card headings, accordion questions, large button */
--ch-fs-h2: 1.9rem; /* 32.3px */
--ch-fs-h1: clamp(2.2rem, 4.4vw, 3.3rem);/* up to 56px: the headline is restrained on purpose */
/* Radius: three tiers */
--ch-radius-control: 6px; /* buttons, inputs, pagination, tooltips, alerts */
--ch-radius-container: 10px; /* cards, forms, modals, panels, the dark section */
--ch-radius-pill: 999px; /* chips, avatars, counts, the toggle */
--ch-radius-sm: var(--ch-radius-control); /* v1 names, kept as aliases */
--ch-radius-md: var(--ch-radius-container);
--ch-radius-lg: var(--ch-radius-container);
/* Spacing (4px base). Components use only these. */
--ch-space-1: 4px; --ch-space-2: 8px; --ch-space-3: 12px; --ch-space-4: 16px; --ch-space-5: 20px; --ch-space-6: 24px;
--ch-space-8: 32px; --ch-space-12: 48px; --ch-space-16: 64px; --ch-space-24: 96px;
/* Rules and elevation: prefer hairlines; shadows only for modals and dropdowns */
--ch-double-rule: 5px double var(--ch-sign-red); /* the distinctive rule: 2px + 1px gap + 2px, reads red on every screen */
--ch-shadow-modal: 0 10px 30px rgba(43, 37, 33, 0.14);
--ch-focus: 0 0 0 2px var(--ch-white), 0 0 0 4px var(--ch-rust);
}
/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--ch-text-base); }
body { margin: 0; background: var(--ch-bg); color: var(--ch-text); font-family: var(--ch-font-body); line-height: var(--ch-lh-body); font-variant-numeric: lining-nums; }
h1, h2, h3, .ch-display { font-family: var(--ch-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ch-track-display); line-height: var(--ch-lh-display); color: var(--ch-heading); margin: 0 0 var(--ch-space-3); }
h1 { font-size: var(--ch-fs-h1); }
h2 { font-size: var(--ch-fs-h2); }
h3 { font-size: var(--ch-fs-h3); }
p { margin: 0 0 var(--ch-space-4); }
p, li, blockquote, .ch-lead { max-width: var(--ch-measure); }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
a { color: var(--ch-link); }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; } /* code is not a brand label: never Courier Prime */
.ch-eyebrow { font-family: var(--ch-font-label); font-weight: 700; font-size: var(--ch-fs-label); letter-spacing: var(--ch-track-label); text-transform: uppercase; color: var(--ch-rust); line-height: 1.35; }
.ch-lead { font-size: var(--ch-fs-lead); color: var(--ch-text-muted); }
.ch-muted { color: var(--ch-text-muted); }
.ch-band { background: var(--ch-band); }
.ch-dark { background: var(--ch-dark-surface); color: var(--ch-on-dark); }
.ch-dark h1, .ch-dark h2, .ch-dark h3 { color: var(--ch-copper); }
.ch-dark .ch-eyebrow { color: var(--ch-copper); }
.ch-dark p { color: var(--ch-on-dark-muted); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--ch-focus); }
.ch-hr { border: 0; border-top: var(--ch-double-rule); margin: var(--ch-space-6) 0; }
/* ================= Components ================= */
/* Buttons. Primary = the enamel button (Rust fill, beige pinstripe and label). Secondary = plain Soot stroke; the NAV button is always secondary,
so the badge stays the only enamel shape at the top of a page. One primary per section. Labels never end in "!".
The label is centered on its cap height: --_nudge moves the caps down by the amount measured in rendered pixels (26 Sep 2026); the button's total height is unchanged. */
.ch-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ch-space-2); --_py: var(--ch-space-3); --_px: var(--ch-space-6); --_nudge: .045em; padding: calc(var(--_py) + var(--_nudge)) var(--_px) calc(var(--_py) - var(--_nudge)); border-radius: var(--ch-radius-control);
font-family: var(--ch-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ch-track-nav); font-size: var(--ch-fs-control); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; vertical-align: middle;
background: var(--ch-action); color: var(--ch-action-text); box-shadow: inset 0 0 0 3px var(--ch-action), inset 0 0 0 4.5px var(--ch-beige); text-shadow: 1px 1px 0 var(--ch-deep); }
.ch-btn:hover { background: var(--ch-action-hover); box-shadow: inset 0 0 0 3px var(--ch-action-hover), inset 0 0 0 4.5px var(--ch-beige); }
.ch-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ch-action), inset 0 0 0 4.5px var(--ch-beige), var(--ch-focus); }
.ch-btn-secondary { background: transparent; color: var(--ch-soot); border: 2px solid var(--ch-soot); box-shadow: none; text-shadow: none; --_py: calc(var(--ch-space-3) - 2px); --_px: calc(var(--ch-space-6) - 2px); }
.ch-btn-secondary:hover { background: var(--ch-beige); box-shadow: none; }
.ch-btn-secondary:focus-visible { box-shadow: var(--ch-focus); }
.ch-btn-ghost { background: transparent; color: var(--ch-link); box-shadow: none; text-shadow: none; }
.ch-btn-ghost:hover { background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.ch-btn-ghost:focus-visible { box-shadow: var(--ch-focus); }
/* Destructive action: quiet Deep Red text with an icon, only inside a confirmation. The safe choice beside it is the enamel button. */
.ch-btn-danger { background: transparent; color: var(--ch-deep); box-shadow: none; text-shadow: none; --_py: var(--ch-space-2); --_px: var(--ch-space-2); gap: 6px; }
.ch-btn-danger:hover { background: var(--ch-err-tint); box-shadow: none; }
.ch-btn-danger:focus-visible { box-shadow: var(--ch-focus); }
.ch-btn-danger span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ch-btn-sm { --_py: var(--ch-space-2); --_px: var(--ch-space-4); }
.ch-btn-secondary.ch-btn-sm { --_py: calc(var(--ch-space-2) - 2px); --_px: calc(var(--ch-space-4) - 2px); }
.ch-btn-lg { --_py: var(--ch-space-4); --_px: var(--ch-space-8); --_nudge: .02em; font-size: var(--ch-fs-h3); }
.ch-btn-block { display: flex; width: 100%; }
.ch-btn[aria-disabled="true"], .ch-btn:disabled { opacity: .45; pointer-events: none; }
.ch-btn svg { flex: none; }
/* Cards: the ledger card. The double rule in Sign Red across the top; room to breathe. */
.ch-card { background: var(--ch-white); border: 1px solid var(--ch-line-strong); border-top: var(--ch-double-rule); border-radius: 0 0 var(--ch-radius-container) var(--ch-radius-container); padding: var(--ch-space-5) var(--ch-space-6); }
.ch-card h3, .ch-card h4 { font-family: var(--ch-font-display); font-weight: 400; text-transform: uppercase; font-size: var(--ch-fs-h3); letter-spacing: var(--ch-track-display); line-height: var(--ch-lh-display); color: var(--ch-heading); margin: var(--ch-space-2) 0 var(--ch-space-1); }
.ch-card p { margin: var(--ch-space-3) 0 0; font-size: .95rem; line-height: 1.55; color: var(--ch-text-muted); }
.ch-card-quote p { font-size: var(--ch-fs-lead); color: var(--ch-soot); font-style: italic; margin-bottom: var(--ch-space-2); }
.ch-card .ch-icon { color: var(--ch-soot); }
/* Chips: outlined pills, Courier caps. Selected = Soot. States for running / needs OK / paused. */
.ch-chip { display: inline-block; font-family: var(--ch-font-label); font-weight: 700; font-size: var(--ch-fs-label); letter-spacing: var(--ch-track-label); text-transform: uppercase; line-height: 1.3; padding: var(--ch-space-1) var(--ch-space-3); border-radius: var(--ch-radius-pill); border: 1px solid var(--ch-tan); color: var(--ch-soot); background: var(--ch-white); margin: 2px 0; }
.ch-chip-on { background: var(--ch-selected); color: var(--ch-white); border-color: var(--ch-selected); }
.ch-chip-ok { border-color: var(--ch-ok); color: var(--ch-ok); }
.ch-chip-wait { border-color: var(--ch-warn-line); color: var(--ch-warn); }
.ch-chip-off { border-color: var(--ch-tan); color: var(--ch-text-muted); }
.ch-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: .42em 6px 0; line-height: 1; border-radius: var(--ch-radius-pill); background: var(--ch-selected); color: var(--ch-white); font-family: var(--ch-font-body); font-weight: 700; font-size: .8rem; vertical-align: middle; }
/* Forms: boxed fields with Muted borders, Newsreader labels, Rust focus, helper text under the field, one column. */
.ch-label { display: block; font-size: .92rem; margin: var(--ch-space-3) 0 var(--ch-space-1); color: var(--ch-soot); }
.ch-input { width: 100%; font-family: var(--ch-font-body); font-size: 1rem; padding: 10px var(--ch-space-3); color: var(--ch-soot); background: var(--ch-white); border: 1px solid var(--ch-control-border); border-radius: var(--ch-radius-control); }
.ch-input:focus { outline: none; border-color: var(--ch-rust); box-shadow: var(--ch-focus); }
.ch-input::placeholder { color: var(--ch-muted); }
textarea.ch-input { resize: vertical; }
select.ch-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232B2521' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 36px; }
.ch-help { font-size: .88rem; color: var(--ch-text-muted); margin: var(--ch-space-1) 0 0; }
.ch-fieldset { border: 0; padding: 0; margin: var(--ch-space-4) 0 0; }
.ch-fieldset legend { font-size: .92rem; padding: 0; margin: 0 0 var(--ch-space-1); color: var(--ch-soot); }
.ch-check { display: flex; align-items: center; gap: var(--ch-space-2); font-size: .95rem; margin: var(--ch-space-2) 0; }
.ch-check input { accent-color: var(--ch-selected); width: 18px; height: 18px; margin: 0; }
.ch-toggle { position: relative; display: flex; align-items: center; gap: 10px; font-size: .95rem; margin: var(--ch-space-2) 0; cursor: pointer; }
.ch-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ch-toggle span { flex: none; width: 42px; height: 24px; border-radius: var(--ch-radius-pill); background: var(--ch-tan); position: relative; display: inline-block; transition: .15s; }
.ch-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s; }
.ch-toggle input:checked + span { background: var(--ch-selected); }
.ch-toggle input:checked + span::after { left: 21px; }
.ch-toggle input:focus-visible + span { box-shadow: var(--ch-focus); }
.ch-range { width: 100%; accent-color: var(--ch-selected); }
.ch-form { background: var(--ch-white); border: 1px solid var(--ch-line-strong); border-radius: var(--ch-radius-container); padding: var(--ch-space-5) var(--ch-space-6); max-width: 560px; }
.ch-form-actions { margin-top: var(--ch-space-5); }
.ch-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ch-space-3); align-items: end; } /* page layout only; forms are one column */
.ch-g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ch-space-4); }
@media (max-width: 600px) { .ch-g2 { grid-template-columns: 1fr; } }
/* Tables: the ledger. Pale zebra rows, Newsreader tabular figures, a Soot rule under the header. */
.ch-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--ch-white); font-variant-numeric: tabular-nums lining-nums; }
.ch-table th { text-align: left; font-family: var(--ch-font-label); font-weight: 700; font-size: var(--ch-fs-label); letter-spacing: var(--ch-track-label); text-transform: uppercase; color: var(--ch-soot); padding: var(--ch-space-2); border-bottom: 2px solid var(--ch-soot); white-space: nowrap; }
.ch-table td { padding: var(--ch-space-2); vertical-align: top; }
.ch-table tbody tr:nth-child(odd) td { background: var(--ch-beige-tint); }
.ch-table th.num, .ch-table td.num { text-align: right; }
.ch-table-wrap { overflow-x: auto; max-width: 100%; } /* wrap every table: on a phone it scrolls instead of widening the page */
.ch-empty { text-align: center; padding: var(--ch-space-6); border: 1px dashed var(--ch-tan); border-radius: var(--ch-radius-container); color: var(--ch-text-muted); }
.ch-empty p { margin-left: auto; margin-right: auto; }
/* Alerts: soft tints, never solid fills. Border and text from the status tokens. */
.ch-alert { display: flex; gap: 10px; align-items: flex-start; padding: var(--ch-space-3) var(--ch-space-4); border-radius: var(--ch-radius-control); border: 1px solid; margin-bottom: var(--ch-space-2); font-size: .95rem; }
.ch-alert .ch-icon { flex: none; margin-top: 3px; }
.ch-alert-info { background: var(--ch-info-tint); border-color: var(--ch-info-line); color: var(--ch-info); }
.ch-alert-ok { background: var(--ch-ok-tint); border-color: var(--ch-ok-line); color: var(--ch-ok); }
.ch-alert-warn { background: var(--ch-warn-tint); border-color: var(--ch-warn-line); color: var(--ch-warn); }
.ch-alert-err { background: var(--ch-err-tint); border-color: var(--ch-err-line); color: var(--ch-err); }
/* Nav, pagination, crumbs, avatars, tooltip, accordion, modal.
Newsreader figures sit high in a line box (ascent .74em, figure height .71em, descent .27em), so boxes holding numbers add top padding (measured in rendered pixels) to center them. */
.ch-nav { display: flex; justify-content: space-between; align-items: center; padding: var(--ch-space-4) var(--ch-space-8); border-bottom: 1px solid var(--ch-line); gap: var(--ch-space-3); flex-wrap: wrap; }
.ch-nav-logo { display: block; width: 141px; height: auto; } /* badge-small, never under 120px wide */
.ch-nav-links { display: flex; gap: var(--ch-space-6); align-items: center; flex-wrap: wrap; font-family: var(--ch-font-display); text-transform: uppercase; letter-spacing: var(--ch-track-nav); font-size: var(--ch-fs-control); color: var(--ch-soot); }
.ch-nav-links a { color: inherit; text-decoration: none; white-space: nowrap; }
.ch-pagination { display: flex; gap: 6px; }
.ch-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; line-height: 1; padding: .36em 6px 0; border: 1px solid var(--ch-control-border); border-radius: var(--ch-radius-control); font-family: var(--ch-font-body); font-size: 1rem; color: var(--ch-soot); background: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.ch-pg-on { background: var(--ch-selected); color: #fff; border-color: var(--ch-selected); }
.ch-pg-dis { opacity: .4; }
.ch-pg-gap { border: 0; background: transparent; }
.ch-crumbs { display: flex; align-items: center; gap: var(--ch-space-2); font-size: .92rem; }
.ch-crumbs a { color: var(--ch-link); text-decoration: none; }
.ch-crumbs span { color: var(--ch-text-muted); }
.ch-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ch-radius-pill); background: var(--ch-beige); color: var(--ch-soot); font-family: var(--ch-font-display); font-weight: 400; letter-spacing: .04em; font-size: var(--ch-fs-control); line-height: 1; padding-top: .09em; border: 2px solid #fff; width: 40px; height: 40px; }
.ch-avatar-sm { width: 32px; height: 32px; }
.ch-avatar-lg { width: 64px; height: 64px; font-size: var(--ch-fs-h3); }
.ch-tip { position: relative; display: inline-block; }
.ch-tip-bubble { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + var(--ch-space-2)); background: var(--ch-soot); color: var(--ch-beige); font-size: .82rem; padding: var(--ch-space-1) var(--ch-space-2); border-radius: var(--ch-radius-control); white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity .12s; }
.ch-tip:hover .ch-tip-bubble, .ch-tip:focus-within .ch-tip-bubble, .ch-tip.is-open .ch-tip-bubble { visibility: visible; opacity: 1; }
/* Accordion: full page width, two columns from 760px. H3-size questions, a Rust chevron with a clear gap, answers at body size. */
.ch-accordion { display: grid; grid-template-columns: 1fr; gap: 0 var(--ch-space-4); align-items: start; }
@media (min-width: 760px) { .ch-accordion { grid-template-columns: 1fr 1fr; } }
.ch-accordion details { background: var(--ch-white); border: 1px solid var(--ch-line-strong); border-radius: var(--ch-radius-control); padding: 0 var(--ch-space-4); margin-bottom: var(--ch-space-3); }
.ch-accordion summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--ch-space-3); padding: var(--ch-space-4) 0 calc(var(--ch-space-4) - .1em); font-family: var(--ch-font-display); text-transform: uppercase; letter-spacing: .03em; font-size: var(--ch-fs-h3); }
.ch-accordion summary::-webkit-details-marker { display: none; }
.ch-accordion summary::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: -.15em; border-right: 2px solid var(--ch-rust); border-bottom: 2px solid var(--ch-rust); transform: rotate(-45deg); transition: transform .15s; }
.ch-accordion details[open] summary::before { transform: rotate(45deg); }
.ch-accordion p { margin: 0 0 var(--ch-space-4); padding-left: calc(9px + var(--ch-space-3)); color: var(--ch-text-muted); font-size: var(--ch-fs-body); }
.ch-modal-backdrop { background: rgba(43, 37, 33, .35); padding: var(--ch-space-8); }
.ch-modal { background: #fff; border-radius: var(--ch-radius-container); max-width: 440px; margin: 0 auto; padding: var(--ch-space-5) var(--ch-space-6); box-shadow: var(--ch-shadow-modal); }
.ch-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ch-space-2); }
.ch-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--ch-space-2); margin-top: var(--ch-space-3); }
/* Icons: line icons on a 24px grid, 1.5px stroke, round caps and joins, currentColor. Never filled, never heavier. */
.ch-icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
/* ================= v1.2 marketing components ================= */
/* Checked points: selling points under a headline. A Rust check, Courier caps, no border: they must never look like buttons. */
.ch-points { list-style: none; padding: 0; margin: var(--ch-space-8) 0 0; max-width: none; display: flex; flex-wrap: wrap; gap: var(--ch-space-3) var(--ch-space-8); }
.ch-points li { display: flex; align-items: center; gap: var(--ch-space-2); max-width: none; font-family: var(--ch-font-label); font-weight: 700; font-size: var(--ch-fs-label); letter-spacing: var(--ch-track-label); text-transform: uppercase; color: var(--ch-soot); }
.ch-points .ch-icon { color: var(--ch-rust); }
/* Fact list: big facts one per line, a Rust line icon in a round tint on the left. Never a grid of three. */
.ch-facts { list-style: none; padding: 0; margin: var(--ch-space-6) 0 0; max-width: none; }
.ch-facts li { display: grid; grid-template-columns: 44px auto 1fr; align-items: center; column-gap: var(--ch-space-4); padding: var(--ch-space-3) 0; border-top: 1px solid var(--ch-line); max-width: none; }
.ch-facts li:last-child { border-bottom: 1px solid var(--ch-line); }
.ch-fact-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ch-radius-pill); background: var(--ch-beige-tint); border: 1px solid var(--ch-line-strong); color: var(--ch-rust); }
.ch-facts b { font-family: var(--ch-font-display); font-weight: 400; text-transform: uppercase; font-size: 2.2rem; line-height: 1; padding-top: .08em; letter-spacing: var(--ch-track-display); color: var(--ch-soot); } /* a figure: sized with the device */
.ch-fact-label { font-family: var(--ch-font-label); font-size: var(--ch-fs-label); letter-spacing: var(--ch-track-label); text-transform: uppercase; color: var(--ch-text-muted); }
@media (max-width: 600px) { .ch-facts b { font-size: 1.9rem; } }
/* Closing call to action: the Rust band, once per page, directly above the dark footer. Centered, H1-size headline in White.
On Rust the primary button is Soot enamel (a Rust button would vanish) and the secondary is a beige stroke. */
.ch-cta-band { background: var(--ch-rust); color: var(--ch-beige); text-align: center; padding: var(--ch-space-24) 0; border-bottom: var(--ch-double-rule); }
.ch-cta-band .ch-eyebrow { color: var(--ch-beige); }
.ch-cta-band h2 { color: var(--ch-white); font-size: var(--ch-fs-h1); margin-bottom: var(--ch-space-4); }
.ch-cta-band p { max-width: 52ch; margin: 0 auto; font-size: var(--ch-fs-lead); color: var(--ch-beige); }
.ch-cta-band .ch-cta-row { display: flex; gap: var(--ch-space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--ch-space-8); }
.ch-cta-band .ch-btn:not(.ch-btn-secondary) { background: var(--ch-soot); box-shadow: inset 0 0 0 3px var(--ch-soot), inset 0 0 0 4.5px var(--ch-beige); text-shadow: none; }
.ch-cta-band .ch-btn:not(.ch-btn-secondary):hover { background: var(--ch-dark-surface); box-shadow: inset 0 0 0 3px var(--ch-dark-surface), inset 0 0 0 4.5px var(--ch-beige); }
.ch-cta-band .ch-btn-secondary { color: var(--ch-beige); border-color: var(--ch-beige); }
.ch-cta-band .ch-btn-secondary:hover { background: rgba(234, 219, 194, .16); }
@media (max-width: 600px) { .ch-cta-band { padding: var(--ch-space-16) 0; } }
/* Round icon badge: a line icon on a beige disc, leading a card (About page cards). */
.ch-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--ch-radius-pill); background: var(--ch-beige); color: var(--ch-rust); margin: var(--ch-space-1) 0 var(--ch-space-3); }