/* ============================================================ THE SEER — design system Direction: Tufte (data-ink, restraint, fine rules, tabular precision) + Maier (grid discipline, geometric sans, modular scale) + Emigre '90s (oversized display type, layered masthead, raw digital grid lines, harsh accent color) ============================================================ */ :root { /* ---- color: paper/ink base (Tufte) ---- */ --c-paper: #FAFAF7; --c-paper-alt: #F1EFE9; --c-ink: #111111; --c-ink-soft: #4A4A46; --c-rule: #1A1A1A; --c-rule-light: #D8D5CC; /* ---- color: Emigre accent ---- */ --c-accent: #FF3B00; /* signal red-orange */ --c-accent-ink: #FAFAF7; /* ---- tier colors (theme is source of truth; publisher emits classes) ---- */ --c-t1: #111111; /* black — primary filing / highest confidence */ --c-t2: #1B6B45; /* emerald green — reputable secondary */ --c-t25: #2E5CC8; /* bright cobalt — aggregated / consensus */ --c-t3: #9A6A00; /* amber/gold — unverified / inferred */ --c-t4: #C32B2B; /* clear red — speculative / model output */ --c-mkt: #7B3FB5; /* violet — market data (price/FX), fully distinct */ --c-live: var(--c-mkt); /* retired alias — reports published before the MKT rename */ --c-seer: var(--c-accent); /* signal red — SEER's own prior theses (self-reference = brand) */ /* ---- type (Maier modular scale, base 1rem = 16px, ratio 1.25) ---- No webfont is loaded, deliberately: this site makes zero external requests, so nothing it renders can be slow or broken independently of it. The fallback therefore IS the font, and on Windows these resolve to Arial, Courier New and Georgia. That is the design, not an accident of ordering: Arial Black for the masthead, Courier New for every label and tag, Georgia for prose is the Emigre-'90s direction this system is built on. I previously reordered these to lead with the system UI faces — Segoe UI and Cascadia Mono — on the theory that Arial and Courier were fallbacks nobody chose. They were chosen. Reverted verbatim. The real defect behind "Arial body text" was never the stack. It was that prose inherited --f-sans from instead of being set in --f-serif, so sentences rendered in the display face. Prose is routed to the serif below; the stacks are left alone. */ --f-sans: "Helvetica Neue", "Arial", -apple-system, sans-serif; --f-mono: "IBM Plex Mono", "Space Mono", "Courier New", monospace; --f-serif: "Georgia", "Times New Roman", serif; /* --step--1 was 0.8rem (12.8px) and carried most of the interface chrome, with hand-written .6-.74rem values scattered through the templates beneath it — 0.6rem is 9.6px. Small type was doing the work of hierarchy that weight, colour and space should do. The floor is now 12.5px and there is a named step for it, so nothing has to invent one. */ --step--2: 0.78rem; --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem; --step-4: 2.441rem; --step-5: 3.052rem; --step-6: 4.5rem; /* ---- grid ---- */ --content-max: 760px; --page-max: 1200px; --gutter: 32px; /* Watchlist rail. Sized from what it has to hold — the filter input is width:100% inside it, so this value minus the rail's own 16px padding on each side is the space the placeholder gets. The predecessor sidebar was picked as a round 260px and clipped its own placeholder text. */ --rail-w: 272px; /* The report contents column, between the rail and the report. */ --toc-w: 250px; /* Rendered height of the sticky masthead, including its 4px rule. The rail and the report contents column are sticky too and are positioned against it, so it has to be available at first paint — hence a declared value here rather than a measurement alone. It cannot be exactly right in CSS, though: .seer-masthead-inner wraps, so the real height depends on how many nav items are shown (Plans, operator links) as much as on the viewport. shell.js measures the header and overwrites this property; these values are what the first frame uses and what the two declared breakpoints resolve to. */ --masthead-h: 128px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--c-paper); color: var(--c-ink); font-family: var(--f-sans); font-size: var(--step-0); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--c-ink); text-decoration: none; } img { max-width: 100%; display: block; } /* ============================================================ MASTHEAD — Emigre layered wordmark, harsh rule ============================================================ */ /* Sticky, so the wordmark and the nav stay reachable on a 15,000-word report instead of scrolling away at the first section. z-index 30 puts it above the page but BELOW the citation backdrop (40) and drawer (50) — the drawer is meant to cover the masthead, and an unindexed sticky header would have been painted under the sticky rail and contents columns, which create their own stacking contexts. */ .seer-masthead { position: sticky; top: 0; z-index: 30; background: var(--c-paper); border-bottom: none; } .seer-masthead-inner { max-width: var(--page-max); margin: 0 auto; /* Tightened from 28px/18px. Sticky, every pixel here is charged against every screen of every report — this recovers 14px without touching the wordmark, which is the brand. */ padding: 18px var(--gutter) 14px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; } .seer-wordmark { display: flex; flex-direction: column; line-height: 1; } .seer-wordmark-main { font-family: var(--f-sans); font-weight: 900; font-size: var(--step-6); letter-spacing: -0.03em; text-transform: uppercase; } .seer-wordmark-main.small { font-size: var(--step-2); } .seer-wordmark-sub { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); margin-top: 6px; } .seer-nav { display: flex; /* Wraps, because the item count is not fixed: Plans appears with the paywall, Sign in / Account with a customer session, Operator sign-out with an operator one. Signed in as operator on a 390px screen the row measured 393px and pushed the whole page sideways — invisible to a signed-out check, which is how the responsive pass missed it. Wrapping cannot overflow however many items the row grows to. */ flex-wrap: wrap; gap: 10px 28px; font-family: var(--f-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; padding-bottom: 6px; } .seer-nav a { color: var(--c-ink-soft); border-bottom: 2px solid transparent; padding-bottom: 4px; transition: color 0.15s, border-color 0.15s; } .seer-nav a:hover, .seer-nav a.is-active { color: var(--c-ink); border-color: var(--c-accent); } .seer-masthead-rule { height: 4px; background: var(--c-rule); position: relative; } .seer-masthead-rule::after { content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 64px; background: var(--c-accent); } /* ============================================================ LAYOUT — feed + sidebar grid (Maier discipline) ============================================================ */ .seer-main { /* width:100% matters, and its absence was half of why report tables ran off the screen. `margin: 0 auto` on a grid item disables the default `stretch`, so .seer-main sized to fit-content — i.e. to its widest descendant, which is a report table whose cells carry an inline min-width. The table's own overflow-x container then computed `max-width: 100%` against a parent that was itself sized by the table: circular, and it resolved to max-content. Measured at a 390px viewport, .seer-main was 548px wide. A definite width breaks the circle. The reading column is still centred — that is .seer-report's max-width + auto margins, one level down. */ width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) 80px; } .seer-feed-layout { display: grid; grid-template-columns: 1fr 300px; gap: 64px; padding-top: 48px; } .seer-feed-header { margin-bottom: 8px; } .seer-feed-title { font-size: var(--step-3); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 12px; } .seer-feed-rule { height: 2px; background: var(--c-rule); margin-bottom: 8px; } /* ---- post cards ---- */ .seer-card { border-bottom: 1px solid var(--c-rule-light); padding: 28px 0; } .seer-card:first-of-type { padding-top: 24px; } .seer-card-link { display: block; } .seer-card-meta { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-soft); margin-bottom: 8px; } .seer-card-ticker { background: var(--c-ink); color: var(--c-paper); padding: 2px 8px; font-weight: 700; } .seer-card-title { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.2; } .seer-card:hover .seer-card-title { color: var(--c-accent); } .seer-card-excerpt { font-family: var(--f-serif); color: var(--c-ink-soft); margin: 0; font-size: var(--step-0); max-width: 60ch; } /* ---- pagination ---- */ .pagination { margin-top: 32px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step--1); } .pagination a { border: 1px solid var(--c-rule); padding: 8px 16px; margin-right: 8px; } .pagination a:hover { background: var(--c-ink); color: var(--c-paper); } /* ============================================================ SIDEBAR ============================================================ */ .seer-sidebar-block { margin-bottom: 40px; } .seer-sidebar-label { font-family: var(--f-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; border-bottom: 2px solid var(--c-rule); padding-bottom: 8px; margin: 0 0 16px; } .seer-ticker-grid { display: flex; flex-wrap: wrap; gap: 8px; } .seer-ticker-chip { font-family: var(--f-mono); font-size: var(--step--1); font-weight: 700; border: 1px solid var(--c-rule); padding: 6px 10px; display: flex; align-items: center; gap: 6px; transition: background 0.15s, color 0.15s; } .seer-ticker-chip:hover { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); } .seer-ticker-count { color: var(--c-ink-soft); font-weight: 400; } .seer-ticker-chip:hover .seer-ticker-count { color: var(--c-accent-ink); } .seer-sidebar-text { font-family: var(--f-serif); font-size: var(--step--1); color: var(--c-ink-soft); line-height: 1.6; } /* ============================================================ REPORT (post.hbs) — Tufte-driven reading view ============================================================ */ .seer-report { max-width: var(--content-max); margin: 0 auto; padding-top: 48px; } .seer-report-meta { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-ink-soft); margin-bottom: 16px; } .seer-report-ticker { background: var(--c-ink); color: var(--c-paper); padding: 2px 10px; font-weight: 700; } .seer-report-title { font-size: var(--step-5); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 16px; } .seer-report-dek { font-family: var(--f-serif); font-style: italic; font-size: var(--step-1); color: var(--c-ink-soft); margin: 0 0 24px; } .seer-report-rule { height: 2px; background: var(--c-rule); margin: 24px 0 40px; } /* ---- body typography ---- */ .seer-report-body { font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.7; color: var(--c-ink); } /* Report tables carry an inline min-width per cell and cannot shrink, so ghost_publisher wraps each one in this. Same arrangement as .wl-scroll on the dashboard's watchlist table: the table scrolls inside its own box instead of pushing the page sideways. */ .seer-report-body .table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } /* ── The evidence layer ──────────────────────────────────────────────────── A report is two documents: a ~1,000-word note, and the record that makes it checkable. The record is collapsed by default because nobody reads it — its job is to BE there, not to be read. This lives in screen.css rather than in report.html's inline