/* ================================================================ GLOBAL COUNTERPOINT — design tokens Editorial paper-and-ink system with maritime navy accent. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500;6..72,600;6..72,700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); :root { /* ---- palette: paper ---- */ --paper: #ECE6D6; /* warm cream, primary surface */ --paper-bright: #F4EFE2; /* lifted cream for cards */ --paper-deep: #DDD3BC; /* recessed band */ --paper-rule: #BCAF92; /* hairline */ /* ---- palette: ink ---- */ --ink: #15181E; --ink-soft: #2A2F38; --ink-mute: #6A6657; /* warm graphite — for metadata */ --ink-dim: #948C77; /* ---- palette: accents ---- */ --navy: #0F2A3E; /* maritime ocean */ --navy-deep: #081A28; --navy-bright: #2C5777; --amber: #B25426; /* ops mark / classification stripe */ --amber-deep: #7B3818; --moss: #4A5A33; /* security/ground tone */ /* ---- palette: dark ops mode ---- */ --ops-bg: #0B0E14; --ops-panel: #11151C; --ops-line: #1B2230; --ops-text: #D8D3C2; --ops-mute: #7C7A6E; --ops-rule: #2A3140; /* ---- type ---- */ --display: 'Newsreader', 'Times New Roman', serif; --sans: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; /* ---- metrics ---- */ --rule-thin: 1px; --rule-thick: 2px; --gutter: clamp(20px, 4vw, 56px); --tracking-chrome: 0.18em; --tracking-chrome-tight: 0.12em; } /* ---- base reset ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } /* ---- chrome primitives ---- */ .chrome { font-family: var(--mono); font-size: 10.5px; letter-spacing: var(--tracking-chrome); text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } .chrome--tight { letter-spacing: var(--tracking-chrome-tight); } .chrome--ink { color: var(--ink); } .chrome--amber { color: var(--amber); } .tick { display: inline-flex; align-items: baseline; gap: 8px; } .tick::before { content: ""; display: inline-block; width: 6px; height: 6px; background: currentColor; transform: translateY(-2px); } .tick--hollow::before { background: transparent; outline: 1px solid currentColor; } .hairline { height: 1px; background: var(--paper-rule); border: 0; } .section-rule { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; } .section-rule .line { height: 1px; background: var(--paper-rule); } /* ---- display type ---- */ .display { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; font-variation-settings: "opsz" 72; text-wrap: balance; } .display-italic { font-style: italic; font-weight: 300; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking-chrome); text-transform: uppercase; color: var(--amber); font-weight: 500; } /* ---- chrome density modes (driven by data-chrome on ) ---- */ html[data-chrome="hidden"] .chrome-only, html[data-chrome="hidden"] .chrome-band { display: none !important; } html[data-chrome="restrained"] .chrome-extra { opacity: 0; pointer-events: none; } html[data-chrome="restrained"] .chrome-fade { opacity: 0.35; } html[data-chrome="layered"] .chrome-extra { opacity: 0.0; transition: opacity 0.3s ease; } html[data-chrome="layered"]:hover .chrome-extra, html[data-chrome="layered"] .chrome-extra.is-visible { opacity: 1; } /* ---- dark ops mode ---- */ html[data-theme="ops"] body { background: var(--ops-bg); color: var(--ops-text); } html[data-theme="ops"] { --paper: var(--ops-bg); --paper-bright: var(--ops-panel); --paper-deep: #060810; --paper-rule: var(--ops-rule); --ink: var(--ops-text); --ink-soft: #BFBAA8; --ink-mute: var(--ops-mute); --ink-dim: #555548; } /* ---- selection ---- */ ::selection { background: var(--amber); color: var(--paper); }