/* ============================================================================ STRATAMIZE — "THE LEDGER" · EDITORIAL BASE LAYER (elements.css) ---------------------------------------------------------------------------- The BASE typographic + editorial layer of the global design system. This file owns ONLY what INTEGRATION.md §0 row 2 promises — editorial typography, headings, prose, links, kickers, rules/dividers, the oversized index numeral, the drop-cap, the editorial feature card, and the layout utilities (bento grid, stack/cluster rhythm). It defines NO components: buttons live in actions-forms.css, tables/lists/KPI in data.css, the shell/nav in nav-shell.css, alerts/toasts/pills/modals in feedback-overlays.css, and panels/charts/customer surfaces in surfaces-viz.css. There is exactly ONE source of truth per class — nothing here is redefined by another slice (verified by the overlap scan). Theme-agnostic: every value derives from a semantic token in tokens.css, so the SAME classes render the dark operator cockpit and the light customer surfaces via [data-theme]. No hex literals, no new --vars. Load order: tokens.css → elements.css (→ the five component slices). MAP 0 document editorial extras (baseline grid, links, rules) 1 a11y (screen-reader-only utility) 2 editorial primitives (kicker, rule, index numeral, drop-cap, measure) 3 type utilities (display / h1–h4 / lead / prose / meta / mono / accent) 4 editorial feature card 5 layout utilities (bento 12-col grid, stack, cluster, section rhythm) 6 reduced-motion guard ============================================================================ */ /* ── 0 · document editorial extras ──────────────────────────────────────────── tokens.css §F already owns the reset, body wiring, base link color, selection and focus. Here we add only the editorial signature: a faint baseline grid on the page and the link underline detail. */ body{ color:var(--ink-2); background-image:linear-gradient(var(--hairline-faint) 1px,transparent 1px); background-size:100% var(--s-6);background-position:0 -1px; /* editorial baseline grid */ } a:hover{text-underline-offset:3px;text-decoration-thickness:1px} hr{border:0;height:1px;background:var(--hairline)} /* ── 1 · accessibility ──────────────────────────────────────────────────────── The .skip-link lives in nav-shell.css (the shell owns the first focusable node); this is the generic screen-reader-only utility every page may use. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} /* ── 2 · editorial primitives ─────────────────────────────────────────────────*/ /* Kicker / overline — the editorial signature label */ .kicker{ display:inline-flex;align-items:center;gap:var(--s-2); font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase; letter-spacing:var(--tracking-kicker);color:var(--ink-3); } .kicker::before{content:"";width:var(--s-6);height:1px;background:var(--accent)} /* Masthead rule — heavy ink rule like a magazine section divider */ .rule{height:2px;background:var(--rule-ink);border:0} .rule--hair{height:1px;background:var(--hairline)} .rule--accent{height:2px;background:var(--accent)} /* Editorial index numeral — oversized section number set in mono */ .index-num{ font:500 var(--fs-num-m)/1 var(--font-mono);color:var(--accent-text); font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight); } /* Drop cap for customer prose */ .dropcap::first-letter{ font:600 3.4em/0.8 var(--font-display);float:left;margin:0.05em 0.1em 0 0; color:var(--ink); } .measure{max-width:var(--measure)} /* ── 3 · type utilities ───────────────────────────────────────────────────────*/ .display{font:600 var(--fs-display)/var(--leading-display) var(--font-display); letter-spacing:var(--tracking-tight);color:var(--ink);text-wrap:balance} .h1{font:600 var(--fs-h1)/var(--leading-tight) var(--font-display); letter-spacing:var(--tracking-tight);color:var(--ink);text-wrap:balance} .h2{font:600 var(--fs-h2)/var(--leading-tight) var(--font-display); letter-spacing:var(--tracking-tight);color:var(--ink);text-wrap:balance} .h3{font:600 var(--fs-h3)/var(--leading-snug) var(--font-display);color:var(--ink)} .h4{font:600 var(--fs-h4)/var(--leading-snug) var(--font-text);color:var(--ink)} .lead{font:400 var(--fs-lead)/var(--leading-snug) var(--font-text);color:var(--ink-2);max-width:var(--measure)} .prose{max-width:var(--measure);color:var(--ink-2)} .prose p+p{margin-top:var(--s-5)} .meta{font:400 var(--fs-meta)/1.4 var(--font-text);color:var(--ink-4)} .caps{text-transform:uppercase;letter-spacing:var(--tracking-caps)} .num,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .accent{color:var(--accent-text)} .figure-hero{font:500 var(--fs-num-l)/var(--leading-tight) var(--font-mono); font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);color:var(--ink)} /* ── 4 · editorial feature card — heavy top rule + index numeral ──────────────*/ .feature{position:relative;padding-top:var(--s-5);border-top:2px solid var(--rule-ink)} .feature .index-num{position:absolute;top:var(--s-4);right:0} /* ── 5 · layout utilities ─────────────────────────────────────────────────────*/ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap)} .col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-7{grid-column:span 7} .col-6{grid-column:span 6}.col-5{grid-column:span 5}.col-4{grid-column:span 4}.col-3{grid-column:span 3} .stack>*+*{margin-top:var(--s-4)} .cluster{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center} .between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)} .section{margin-bottom:var(--space-section)} .center{margin-inline:auto;max-width:var(--content-max)} @media (max-width:900px){ .bento [class*=col-]{grid-column:span 12} } /* ── 6 · reduced motion ───────────────────────────────────────────────────────*/ @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} }