/* ==========================================================================
WEALTH SIGNAL — Design System
Understand the signal. Ignore the noise.
Principles
1. Editorial first. The page is a reading surface, not a terminal.
2. Calm data. Colour carries meaning only when meaning exists.
3. No web fonts. Speed is a product feature; typography is built from
high-quality system stacks with deliberate scale and rhythm.
4. Every state is reachable by keyboard and legible to a screen reader.
========================================================================== */
/* --- 1. Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
/* --- 2. Tokens --------------------------------------------------------- */
:root {
/* Type stacks */
--ws-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
Georgia, "Times New Roman", serif;
--ws-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--ws-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
/* Modular scale (1.25) */
--t-xs: 0.75rem; /* 12 */
--t-sm: 0.8125rem; /* 13 */
--t-base: 0.9375rem;
--t-md: 1.0625rem;
--t-lg: 1.25rem;
--t-xl: 1.5rem;
--t-2xl: 1.875rem;
--t-3xl: 2.375rem;
--t-4xl: 3rem;
--t-5xl: 3.75rem;
/* Space */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
--radius: 4px;
--radius-lg: 8px;
--measure: 40rem; /* article column */
--shell: 1240px; /* page shell */
--header-h: 60px;
/* Brand — light theme */
--bg: #FBF9F4; /* warm paper */
--bg-sunk: #F4F1E9;
--surface: #FFFFFF;
--surface-2: #F7F5EF;
--ink: #14181D;
--ink-2: #3B4450;
--muted: #5E6875;
--rule: #E3DED2;
--rule-strong:#CFC8B8;
--signal: #0E5C3E; /* Signal Green — primary accent */
--signal-ink: #0A4530;
--signal-tint:#E7F0EA;
--amber: #A2571F; /* Signal Amber — editorial franchises */
--amber-tint: #F6EDE2;
--up: #12704A;
--up-tint: #E6F1EA;
--down: #A4322B;
--down-tint: #F7E9E7;
--focus: #1663C7;
--shadow-sm: 0 1px 2px rgba(20, 24, 29, .06);
--shadow: 0 2px 10px rgba(20, 24, 29, .07), 0 1px 2px rgba(20,24,29,.05);
}
[data-theme="dark"] {
--bg: #0D1013;
--bg-sunk: #090B0E;
--surface: #14181D;
--surface-2: #1A1F26;
--ink: #ECEFF3;
--ink-2: #C3CAD3;
--muted: #98A2AE;
--rule: #262C34;
--rule-strong:#39414B;
--signal: #3FA97A;
--signal-ink: #64C296;
--signal-tint:#12271F;
--amber: #D08A4E;
--amber-tint: #2A2018;
--up: #46B183;
--up-tint: #10261D;
--down: #E0736A;
--down-tint: #2A1614;
--focus: #6BA5F0;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow: 0 2px 12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
}
/* --- 3. Base ----------------------------------------------------------- */
body {
background: var(--bg);
color: var(--ink);
font-family: var(--ws-sans);
font-size: var(--t-md);
line-height: 1.65;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--signal-tint); color: var(--signal-ink); }
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s-5); }
.shell--narrow { max-width: 900px; }
:where(a):focus-visible,
:where(button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: 2px;
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--signal); color: #fff; padding: var(--s-3) var(--s-4);
border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip:focus { left: 0; }
.vh {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* --- 4. Typography ----------------------------------------------------- */
.serif { font-family: var(--ws-serif); }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.011em; font-weight: 600; }
.display {
font-family: var(--ws-serif);
font-weight: 600;
letter-spacing: -0.017em;
line-height: 1.08;
}
.eyebrow {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
font-family: var(--ws-sans);
}
.eyebrow--signal { color: var(--signal); }
.eyebrow--amber { color: var(--amber); }
.dek { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.5; }
.meta { color: var(--muted); font-size: var(--t-sm); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* Section headers */
.sec { margin-block: var(--s-8); }
.sec__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s-4); flex-wrap: wrap;
border-top: 2px solid var(--ink);
padding-top: var(--s-3); margin-bottom: var(--s-5);
}
.sec__title { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; }
.sec__title .sub { display:block; font-weight: 400; font-size: var(--t-sm); color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.sec__link { font-size: var(--t-sm); font-weight: 600; color: var(--signal); text-decoration: none; white-space: nowrap; }
.sec__link:hover { text-decoration: underline; }
.sec__link::after { content: " →"; }
/* --- 5. Header --------------------------------------------------------- */
.hdr {
position: sticky; top: 0; z-index: 60;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)) { .hdr { background: var(--bg); } }
.hdr__bar { display: flex; align-items: center; gap: var(--s-4); height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.logo__mark { width: 22px; height: 22px; flex: 0 0 auto; }
.logo__type {
font-family: var(--ws-sans);
font-weight: 800; letter-spacing: .075em; text-transform: uppercase;
font-size: 0.9375rem; color: var(--ink); white-space: nowrap;
}
.logo__type b { font-weight: 800; color: var(--signal); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: var(--s-3); flex: 1 1 auto; }
.nav a {
text-decoration: none; font-size: var(--t-base); font-weight: 550;
color: var(--ink-2); padding: 7px 10px; border-radius: var(--radius);
white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--signal); font-weight: 700; box-shadow: inset 0 -2px 0 var(--signal); border-radius: 0; }
.hdr__tools { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.iconbtn {
width: 36px; height: 36px; display: inline-grid; place-items: center;
border-radius: var(--radius); color: var(--ink-2); border: 1px solid transparent;
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.iconbtn svg { width: 18px; height: 18px; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-size: var(--t-base); font-weight: 650; text-decoration: none;
padding: 9px 15px; border-radius: var(--radius);
border: 1px solid transparent; cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--signal); color: #fff; }
.btn--primary:hover { background: var(--signal-ink); }
[data-theme="dark"] .btn--primary { color: #06110C; }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); }
.btn--sm { padding: 6px 11px; font-size: var(--t-sm); }
.btn--block { width: 100%; }
.hdr__menu { display: none; }
/* Mobile nav */
.mnav {
display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 55;
background: var(--bg); overflow-y: auto; padding: var(--s-5) 0 var(--s-8);
border-top: 1px solid var(--rule);
}
.mnav[data-open="true"] { display: block; }
.mnav a {
display: flex; justify-content: space-between; align-items: center;
padding: var(--s-4) 0; border-bottom: 1px solid var(--rule);
text-decoration: none; font-size: var(--t-xl); font-family: var(--ws-serif); font-weight: 600;
}
.mnav a::after { content: "→"; color: var(--muted); font-family: var(--ws-sans); font-size: var(--t-md); }
.mnav .mnav__sub { font-family: var(--ws-sans); font-size: var(--t-base); font-weight: 500; color: var(--ink-2); }
/* --- 6. Market Pulse --------------------------------------------------- */
.pulse { border-bottom: 1px solid var(--rule); background: var(--bg); position: relative; }
.pulse__scroll::after {
content: ""; position: sticky; right: 0; flex: 0 0 auto; width: 34px; pointer-events: none;
margin-left: -34px; background: linear-gradient(90deg, transparent, var(--bg));
}
.pulse__row { display: flex; align-items: stretch; gap: 0; }
.pulse__scroll {
flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch;
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pulse__scroll::-webkit-scrollbar { display: none; }
.pulse__label {
flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px 11px 8px 0;
font-size: 0.6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--muted); border-right: 1px solid var(--rule); margin-right: 2px;
}
.tick {
flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px;
padding: 8px 10px; font-size: var(--t-xs); white-space: nowrap;
text-decoration: none; border-right: 1px solid transparent;
}
.tick:hover { background: var(--surface-2); }
.tick__name { color: var(--muted); font-weight: 600; }
.tick__val { color: var(--ink); font-weight: 650; }
.tick__chg { font-weight: 650; font-size: var(--t-xs); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }
.pulse__note {
flex: 0 0 auto; display: flex; align-items: center; white-space: nowrap;
padding: 8px 0 8px 14px; margin-left: 10px;
border-left: 1px solid var(--rule);
font-size: var(--t-xs); color: var(--muted); text-decoration: none;
}
.pulse__note:hover { color: var(--ink); }
/* --- 7. Cards & grids -------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--lead { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-7); }
.grid--sidebar { grid-template-columns: minmax(0,1fr) 320px; gap: var(--s-7); }
.card { display: flex; flex-direction: column; gap: var(--s-3); }
.card a { text-decoration: none; }
.card__kicker { display: flex; align-items: center; gap: 8px; }
.card__title { font-family: var(--ws-serif); font-size: var(--t-lg); line-height: 1.22; font-weight: 600; letter-spacing: -.012em; }
.card__title a:hover { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.card__dek { color: var(--muted); font-size: var(--t-base); line-height: 1.55; }
.card__meta { display: flex; gap: 10px; align-items: center; font-size: var(--t-xs); color: var(--muted); }
.card--boxed {
background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--radius-lg); padding: var(--s-5); box-shadow: var(--shadow-sm);
}
.card--ruled { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.card--sm .card__title { font-size: var(--t-md); }
.card--lg .card__title { font-size: var(--t-2xl); }
.tag {
display: inline-block; font-size: var(--t-xs); font-weight: 700;
letter-spacing: .07em; text-transform: uppercase; color: var(--signal);
text-decoration: none;
}
.tag--amber { color: var(--amber); }
.tag--muted { color: var(--muted); }
.dot { color: var(--rule-strong); }
/* --- 8. Hero / Today's Signal ------------------------------------------ */
.hero { padding-block: var(--s-7) var(--s-6); }
.hero__title {
font-size: clamp(2.1rem, 5.2vw, var(--t-5xl));
margin-block: var(--s-3) var(--s-4);
}
.hero__title a { text-decoration: none; }
.hero__title a:hover { color: var(--signal); }
.hero__dek { font-size: clamp(1.0625rem, 2vw, var(--t-lg)); color: var(--ink-2); max-width: 46rem; }
.brandline {
display: flex; align-items: center; gap: var(--s-3);
font-size: var(--t-sm); color: var(--muted); padding-block: var(--s-5) 0;
}
.brandline__rule { flex: 1 1 auto; height: 1px; background: var(--rule); }
/* --- 9. The Signal summary --------------------------------------------- */
.signalbox {
border: 1px solid var(--rule); border-left: 3px solid var(--signal);
background: var(--surface); border-radius: var(--radius-lg);
padding: var(--s-5) var(--s-5) var(--s-4);
}
.signalbox__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.signalbox__title {
display: flex; align-items: center; gap: 8px;
font-size: var(--t-xs); font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--signal);
}
.signalbox__time { font-size: var(--t-xs); color: var(--muted); }
.signalbox dl { display: grid; gap: var(--s-4); }
.signalbox dt {
font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.signalbox dd { font-size: var(--t-md); line-height: 1.55; color: var(--ink); }
.signalbox .numrow { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.signalbox .numrow div { display: flex; flex-direction: column; }
.signalbox .numrow b { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; }
.signalbox .numrow span { font-size: var(--t-xs); color: var(--muted); }
.godeeper {
display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s-5);
font-size: var(--t-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--signal); text-decoration: none; border-top: 1px solid var(--rule);
padding-top: var(--s-4); width: 100%;
}
.godeeper:hover { color: var(--signal-ink); }
/* --- 10. Article ------------------------------------------------------- */
.article { padding-block: var(--s-6) var(--s-8); }
.article__head { max-width: 48rem; margin-inline: auto; }
.article__title { font-size: clamp(1.9rem, 4.6vw, var(--t-4xl)); margin-block: var(--s-3) var(--s-4); }
.article__dek { font-size: clamp(1.0625rem, 2vw, var(--t-lg)); color: var(--ink-2); line-height: 1.5; }
.byline {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
margin-top: var(--s-5); padding-block: var(--s-4); font-size: var(--t-sm);
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--muted);
}
.byline a { color: var(--ink); font-weight: 650; text-decoration: none; }
.byline a:hover { text-decoration: underline; }
.byline__purpose {
margin-left: auto; font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase;
font-weight: 700; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 9px;
}
.prose { max-width: var(--measure); margin-inline: auto; }
.prose > * + * { margin-top: var(--s-5); }
.prose p { font-size: 1.0625rem; line-height: 1.72; color: var(--ink); }
.prose h2 {
font-family: var(--ws-serif); font-size: var(--t-xl); margin-top: var(--s-8);
padding-top: var(--s-4); border-top: 1px solid var(--rule);
}
.prose h3 { font-size: var(--t-md); margin-top: var(--s-6); letter-spacing: 0; font-weight: 700; }
.prose a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.15em; display: grid; gap: var(--s-2); }
.prose li { line-height: 1.65; }
.prose li::marker { color: var(--signal); }
.prose strong { font-weight: 700; }
.prose figure { margin-block: var(--s-6); }
.prose blockquote {
border-left: 3px solid var(--signal); padding-left: var(--s-4);
font-family: var(--ws-serif); font-size: var(--t-lg); line-height: 1.45; color: var(--ink);
}
.prose blockquote cite { display: block; font-family: var(--ws-sans); font-size: var(--t-sm); font-style: normal; color: var(--muted); margin-top: var(--s-3); }
/* Wide elements can break the measure */
.bleed { max-width: 54rem; margin-inline: auto; }
/* Inline term link */
.term {
color: var(--ink); text-decoration: none;
border-bottom: 1px dashed var(--signal); cursor: help;
}
.term:hover { color: var(--signal); }
/* --- 11. Epistemic callouts (signature element) ------------------------ */
.claim {
border: 1px solid var(--rule); border-radius: var(--radius-lg);
background: var(--surface); padding: var(--s-4) var(--s-5);
display: grid; gap: var(--s-2);
}
.claim__label {
display: inline-flex; align-items: center; gap: 7px; width: fit-content;
font-size: 0.6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.claim__label::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.claim__body { font-size: var(--t-base); line-height: 1.62; color: var(--ink-2); }
.claim__body p + p { margin-top: var(--s-3); }
.claim--fact { border-left: 3px solid #3E6E8E; }
.claim--fact .claim__label { color: #2F5C7A; }
.claim--data { border-left: 3px solid var(--signal); }
.claim--data .claim__label { color: var(--signal); }
.claim--calculation { border-left: 3px solid var(--amber); }
.claim--calculation .claim__label { color: var(--amber); }
.claim--interpretation { border-left: 3px solid #6B5CA5; }
.claim--interpretation .claim__label { color: #5B4C95; }
.claim--opinion { border-left: 3px solid #8A6A2F; }
.claim--opinion .claim__label { color: #7A5C25; }
.claim--speculation { border-left: 3px solid var(--muted); border-style: dashed; }
.claim--speculation .claim__label { color: var(--muted); }
[data-theme="dark"] .claim--fact .claim__label { color: #7FAECC; }
[data-theme="dark"] .claim--interpretation .claim__label { color: #A99BE0; }
[data-theme="dark"] .claim--opinion .claim__label { color: #C6A461; }
/* --- 12. Key numbers --------------------------------------------------- */
/* Cell grids use a border-on-cell model rather than a gap-background model, so
a partly-filled final row never leaves an empty coloured block. */
.cellgrid, .keynums, .statgrid, .moved, .morning__grid {
display: grid; background: var(--surface);
border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
border-radius: var(--radius-lg); overflow: hidden;
}
.keynum, .stat, .moved__item, .morning__cell {
border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.keynums { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.keynum { background: var(--surface); padding: var(--s-4); display: grid; gap: 3px; }
.keynum__val { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.keynum__label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.keynum__sub { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
/* --- 13. Evidence ledger ----------------------------------------------- */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4); }
.ledger__col { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.ledger__head {
padding: var(--s-3) var(--s-4); font-size: var(--t-xs); font-weight: 800;
letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--rule);
display: flex; align-items: center; gap: 8px;
}
.ledger__col--bull .ledger__head { color: var(--up); background: var(--up-tint); }
.ledger__col--bear .ledger__head { color: var(--down); background: var(--down-tint); }
.ledger__list { display: grid; gap: var(--s-3); padding: var(--s-4); }
.ledger__list li { font-size: var(--t-base); line-height: 1.55; padding-left: 1.1em; position: relative; color: var(--ink-2); }
.ledger__list li::before { content: "—"; position: absolute; left: 0; color: var(--rule-strong); }
/* --- 14. Charts -------------------------------------------------------- */
.chartfig { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.chartfig__head { padding: var(--s-4) var(--s-5) var(--s-3); border-bottom: 1px solid var(--rule); }
.chartfig__eyebrow { font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.chartfig__title { font-size: var(--t-md); font-weight: 700; margin-top: 4px; line-height: 1.35; }
.chartfig__takeaway { font-size: var(--t-sm); color: var(--muted); margin-top: 5px; line-height: 1.5; }
.chartfig__body { padding: var(--s-5); position: relative; }
.chartfig svg { width: 100%; height: auto; overflow: visible; }
.chartfig__foot {
padding: var(--s-3) var(--s-5); border-top: 1px solid var(--rule);
font-size: var(--t-xs); color: var(--muted); display: flex; gap: var(--s-4);
flex-wrap: wrap; justify-content: space-between; background: var(--surface-2);
}
.chartfig__foot a { color: var(--muted); }
.c-axis { stroke: var(--rule); stroke-width: 1; }
.c-grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.c-tick { fill: var(--muted); font-size: 11px; font-family: var(--ws-sans); }
.c-lbl { fill: var(--ink-2); font-size: 11.5px; font-family: var(--ws-sans); }
.c-val { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--ws-sans); }
.c-bar { fill: var(--signal); }
.c-bar--alt { fill: var(--amber); }
.c-bar--muted { fill: var(--rule-strong); }
.c-bar--up { fill: var(--up); }
.c-bar--down { fill: var(--down); }
.c-note { fill: var(--muted); font-size: 11px; font-family: var(--ws-sans); font-style: italic; }
.c-line { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { fill: var(--signal); }
/* --- 15. Tables -------------------------------------------------------- */
.tbl { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.tbl__scroll { overflow-x: auto; }
.tbl table { font-size: var(--t-base); min-width: 440px; }
.tbl caption { text-align: left; padding: var(--s-4) var(--s-5) var(--s-3); font-size: var(--t-sm); font-weight: 700; border-bottom: 1px solid var(--rule); }
.tbl th, .tbl td { padding: 10px var(--s-4); text-align: right; border-bottom: 1px solid var(--rule); }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: var(--surface-2); font-weight: 700; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl__src { padding: var(--s-3) var(--s-5); font-size: var(--t-xs); color: var(--muted); border-top: 1px solid var(--rule); background: var(--surface-2); }
/* --- 16. What Moved ---------------------------------------------------- */
.moved { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.moved__item { background: var(--surface); padding: var(--s-4) var(--s-5); display: grid; gap: 7px; text-decoration: none; align-content: start; }
.moved__item:hover { background: var(--surface-2); }
.moved__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.moved__tkr { font-family: var(--ws-mono); font-size: var(--t-base); font-weight: 700; letter-spacing: .02em; }
.moved__chg { font-weight: 700; font-size: var(--t-md); }
.moved__co { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.moved__why { font-size: var(--t-base); line-height: 1.5; color: var(--ink-2); }
.moved__cat { font-size: var(--t-xs); color: var(--muted); }
/* --- 17. Morning Signal module ----------------------------------------- */
.morning {
background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
overflow: hidden; box-shadow: var(--shadow-sm);
}
.morning__head {
padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--rule);
display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap;
background: linear-gradient(180deg, var(--signal-tint), transparent);
}
.morning__title { font-family: var(--ws-serif); font-size: var(--t-2xl); letter-spacing: -.015em; }
.morning__promise { font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }
.morning__grid { grid-template-columns: repeat(3, minmax(0,1fr)); border-radius: 0; border-top: 0; border-left: 0; }
.morning__cell { background: var(--surface); padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.morning__cell h3 { font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.morning__cell p, .morning__cell li { font-size: var(--t-base); line-height: 1.55; color: var(--ink-2); }
.morning__cell ul { display: grid; gap: var(--s-2); }
.morning__cell li { padding-left: 1em; position: relative; }
.morning__cell li::before { content: "›"; position: absolute; left: 0; color: var(--signal); font-weight: 700; }
.morning__foot { padding: var(--s-4) var(--s-5); display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface-2); }
/* --- 18. Newsletter ---------------------------------------------------- */
.nl {
border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden;
background: var(--surface);
}
.nl__inner { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
.nl__copy { padding: var(--s-7) var(--s-6); border-right: 1px solid var(--rule); }
.nl__side { padding: var(--s-7) var(--s-6); background: var(--surface-2); }
.nl__title { font-family: var(--ws-serif); font-size: var(--t-2xl); letter-spacing: -.015em; }
.nl__sub { color: var(--muted); margin-top: var(--s-2); font-size: var(--t-md); }
/* .nl__form and its input styling now live in the NEWSLETTER SIGN-UP block at
the foot of this file, with .nl__fields as the row. The old rules here were
`.nl__form input[type=email]` — a class, an attribute and an element, which
outranks a single class and quietly beat the mobile override that tried to
stop a 220px flex-basis becoming a 220px-tall box in a column. Two rules for
one control is how that happens; there is now one. */
.nl__fine { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-3); }
.nl__toc { display: grid; gap: var(--s-3); }
.nl__toc li { display: flex; gap: var(--s-3); font-size: var(--t-base); align-items: baseline; color: var(--ink-2); }
.nl__toc .n { font-family: var(--ws-mono); font-size: var(--t-xs); color: var(--signal); font-weight: 700; }
.nl__msg { font-size: var(--t-base); color: var(--up); font-weight: 650; margin-top: var(--s-3); }
/* --- 19. Series cards -------------------------------------------------- */
.series { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s-4); }
.series__card {
border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface);
padding: var(--s-5); display: grid; gap: var(--s-3); text-decoration: none;
border-top: 3px solid var(--amber); align-content: start;
}
.series__card:hover { background: var(--surface-2); }
.series__glyph { width: 30px; height: 30px; color: var(--amber); }
.series__name { font-family: var(--ws-serif); font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.series__q { font-size: var(--t-base); color: var(--muted); line-height: 1.5; }
.series__count { font-size: var(--t-xs); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 650; }
/* --- 20. Learn --------------------------------------------------------- */
.path { display: grid; gap: var(--s-5); }
.path__stage { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.path__head { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); display: flex; gap: var(--s-3); align-items: baseline; }
.path__n { font-family: var(--ws-mono); font-size: var(--t-sm); color: var(--signal); font-weight: 700; }
.path__t { font-weight: 700; font-size: var(--t-md); }
.path__d { font-size: var(--t-sm); color: var(--muted); margin-left: auto; }
.path__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); background: var(--surface); }
.path__links a { background: var(--surface); padding: var(--s-4) var(--s-5); text-decoration: none; font-size: var(--t-base); display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.path__links a:hover { background: var(--surface-2); color: var(--signal); }
.path__links a span { color: var(--muted); font-size: var(--t-xs); }
.deflist { display: grid; gap: var(--s-4); }
.deflist__item { border-left: 2px solid var(--rule); padding-left: var(--s-4); }
.deflist__term { font-weight: 700; }
.deflist__def { color: var(--ink-2); font-size: var(--t-base); }
/* --- 21. Stock page ---------------------------------------------------- */
.quote { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-5); }
.quote__price { font-size: var(--t-4xl); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.quote__chg { font-size: var(--t-lg); font-weight: 700; }
.quote__asof { font-size: var(--t-xs); color: var(--muted); }
.statgrid { grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }
.stat { background: var(--surface); padding: var(--s-4); display: grid; gap: 2px; align-content: start; }
.stat__k { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.stat__v { font-size: var(--t-md); font-weight: 700; }
.stat__n { font-size: var(--t-xs); color: var(--muted); }
.events { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.events__row { background: var(--surface); padding: var(--s-3) var(--s-4); display: grid; grid-template-columns: 120px 1fr; gap: var(--s-4); font-size: var(--t-base); align-items: baseline; }
.events__d { font-size: var(--t-sm); font-weight: 700; color: var(--signal); }
/* --- 22. Search -------------------------------------------------------- */
.searchwrap { position: relative; }
.searchbox {
display: flex; align-items: center; gap: var(--s-2); border: 1px solid var(--rule-strong);
border-radius: var(--radius); padding: 7px var(--s-3); background: var(--surface); min-width: 200px;
}
.searchbox input { border: 0; outline: none; background: none; width: 100%; font-size: var(--t-base); }
.searchbox svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.searchbox kbd {
font-family: var(--ws-mono); font-size: 10px; border: 1px solid var(--rule); border-radius: 3px;
padding: 1px 5px; color: var(--muted); background: var(--surface-2);
}
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,12,15,.55); display: none; }
.overlay[data-open="true"] { display: block; }
.overlay__panel {
max-width: 680px; margin: 8vh auto 0; background: var(--bg); border: 1px solid var(--rule);
border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.overlay__search { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
.overlay__search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: var(--t-lg); font-family: var(--ws-serif); }
.overlay__search > svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--muted); }
.overlay__results { max-height: 60vh; overflow-y: auto; }
.sres { display: block; padding: var(--s-3) var(--s-5); text-decoration: none; border-bottom: 1px solid var(--rule); }
.sres:hover, .sres[data-active="true"] { background: var(--surface-2); }
.sres__t { font-weight: 650; font-size: var(--t-base); }
.sres__m { font-size: var(--t-xs); color: var(--muted); margin-top: 2px; display: flex; gap: 8px; }
.sres__type { color: var(--signal); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.overlay__hint { padding: var(--s-3) var(--s-5); font-size: var(--t-xs); color: var(--muted); display: flex; gap: var(--s-4); flex-wrap: wrap; background: var(--surface-2); }
.overlay__empty { padding: var(--s-6) var(--s-5); color: var(--muted); font-size: var(--t-base); text-align: center; }
/* --- 23. Footer -------------------------------------------------------- */
.ftr { border-top: 1px solid var(--rule); margin-top: var(--s-9); background: var(--bg-sunk); padding-block: var(--s-8) var(--s-6); }
.ftr__grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(4, minmax(0,1fr)); gap: var(--s-6); }
.ftr__brand { display: grid; gap: var(--s-3); align-content: start; }
.ftr__tag { font-family: var(--ws-serif); font-size: var(--t-lg); line-height: 1.3; max-width: 22ch; }
.ftr h3 { font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.ftr ul { display: grid; gap: 9px; }
.ftr a { text-decoration: none; font-size: var(--t-base); color: var(--ink-2); }
.ftr a:hover { color: var(--signal); text-decoration: underline; }
.ftr__legal { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); display: grid; gap: var(--s-3); }
.ftr__legal p { font-size: var(--t-xs); color: var(--muted); line-height: 1.6; max-width: 78ch; }
.ftr__row { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: space-between; align-items: center; }
/* --- 24. Misc ---------------------------------------------------------- */
.crumbs { font-size: var(--t-xs); color: var(--muted); padding-block: var(--s-4) 0; display: flex; gap: 7px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--signal); text-decoration: underline; }
.sources { display: grid; gap: var(--s-3); }
.sources li { font-size: var(--t-sm); line-height: 1.5; display: grid; gap: 2px; }
.sources a { color: var(--signal); text-decoration: none; font-weight: 600; }
.sources a:hover { text-decoration: underline; }
.sources span { color: var(--muted); font-size: var(--t-xs); }
.notebox {
border: 1px dashed var(--rule-strong); border-radius: var(--radius-lg);
padding: var(--s-4) var(--s-5); font-size: var(--t-sm); color: var(--muted); line-height: 1.6;
background: var(--surface-2);
}
.notebox strong { color: var(--ink-2); }
.pill {
display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
border: 1px solid var(--rule-strong); color: var(--muted);
}
.pill--live { color: var(--signal); border-color: var(--signal); }
.author { display: flex; gap: var(--s-4); align-items: flex-start; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-5); background: var(--surface); }
.author__av { width: 52px; height: 52px; border-radius: 50%; background: var(--signal-tint); color: var(--signal); display: grid; place-items: center; font-weight: 800; font-size: var(--t-md); flex: 0 0 auto; letter-spacing: .02em; }
.author__n { font-weight: 700; }
.author__r { font-size: var(--t-sm); color: var(--muted); }
.author__b { font-size: var(--t-base); color: var(--ink-2); margin-top: var(--s-2); line-height: 1.55; }
.stack { display: grid; gap: var(--s-5); }
.stack--sm { gap: var(--s-3); }
.stack--lg { gap: var(--s-7); }
.divider { height: 1px; background: var(--rule); }
.hub__hd { padding-block: var(--s-7) var(--s-6); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6); }
.hub__title { font-size: clamp(1.9rem, 4.4vw, var(--t-4xl)); }
.hub__dek { color: var(--ink-2); font-size: var(--t-lg); max-width: 44rem; margin-top: var(--s-3); }
.list { display: grid; gap: 0; }
.list__item { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.list__date { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; padding-top: 4px; }
/* --- 25. Responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
.grid--lead { grid-template-columns: minmax(0,1fr); gap: var(--s-6); }
.grid--sidebar { grid-template-columns: minmax(0,1fr); }
.grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ftr__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.nl__inner { grid-template-columns: minmax(0,1fr); }
.nl__copy { border-right: 0; border-bottom: 1px solid var(--rule); }
.morning__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 820px) {
.nav { display: none; }
.hdr__menu { display: inline-grid; }
.grid--3 { grid-template-columns: minmax(0,1fr); }
.ledger { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 620px) {
.brandline > span:last-child { display: none; }
.hdr__cta { display: none; } /* lives in the mobile menu instead */
.hdr__bar { gap: var(--s-2); }
.logo__type { font-size: 0.8125rem; letter-spacing: .06em; }
:root { --header-h: 54px; }
.shell { padding-inline: var(--s-4); }
.grid--2, .grid--4 { grid-template-columns: minmax(0,1fr); }
.morning__grid { grid-template-columns: minmax(0,1fr); }
.ftr__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.list__item { grid-template-columns: minmax(0,1fr); gap: var(--s-2); }
.hero { padding-block: var(--s-5) var(--s-5); }
.prose p { font-size: 1.0625rem; }
.quote__price { font-size: var(--t-3xl); }
.signalbox { padding: var(--s-4); }
.nl__copy, .nl__side { padding: var(--s-5) var(--s-4); }
.byline__purpose { margin-left: 0; }
.events__row { grid-template-columns: minmax(0,1fr); gap: 2px; }
}
/* --- 27. Live data states ---------------------------------------------- */
.tick { transition: background-color .5s ease; }
.tick--up { background: var(--up-tint); }
.tick--down { background: var(--down-tint); }
@media (prefers-reduced-motion: reduce) {
.tick--up, .tick--down { background: none; } /* no colour flash on motion-sensitive setups */
}
/* A proxy instrument (an ETF standing in for an index) is marked, not hidden. */
.tick[data-proxy="1"] .tick__name { border-bottom: 1px dotted var(--rule-strong); }
.tick[data-proxy="1"] .tick__name::after { content: "*"; color: var(--muted); }
.pulse__note { gap: 7px; transition: color .2s ease; }
.pulse__note--live { color: var(--signal); font-weight: 650; }
.pulse__note--live::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--signal); margin-right: 7px; flex: 0 0 auto;
animation: ws-pulse 2.4s ease-in-out infinite;
}
.pulse__note--flat::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--rule-strong); margin-right: 7px; flex: 0 0 auto;
}
.pulse__note[data-state="offline"], .pulse__note[data-state="degraded"] { color: var(--down); }
.pulse__note[data-state="offline"]::before, .pulse__note[data-state="degraded"]::before { background: var(--down); }
@keyframes ws-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
.pulse__note--live::before { animation: none; }
}
/* The quote block updates in place; keep the numerals from reflowing. */
.quote__price, .quote__chg, [data-live-mcap] { font-variant-numeric: tabular-nums; }
/* --- 26. Motion & print ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
}
@media print {
.hdr, .pulse, .ftr, .nl, .overlay, .mnav { display: none !important; }
body { background: #fff; color: #000; }
.prose { max-width: none; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}
/* ==========================================================================
28. THE SIGNAL FIELD — the background is an instrument, not decoration
========================================================================== */
#signalField {
position: fixed; inset: 0; width: 100%; height: 100%;
z-index: 0; pointer-events: none;
}
/* Content sits above the field. */
.hdr, .pulse, main, .ftr, .overlay, .mnav { position: relative; z-index: 1; }
/* A readable surface behind long-form text, so the field never fights prose. */
.prose, .signalbox, .card--boxed, .chartfig, .tbl, .keynums, .statgrid,
.moved, .morning, .nl, .series__card, .path__stage, .events, .claim, .author,
.notebox, .ledger__col, .overlay__panel {
background-color: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(1.5px);
}
@supports not (backdrop-filter: blur(1px)) {
.prose, .signalbox, .card--boxed, .chartfig, .tbl { background-color: var(--surface); }
}
.fieldkey__dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
flex: 0 0 auto; display: inline-block;
}
.iconbtn--field[aria-pressed="false"] { opacity: .45; }
.iconbtn--field[aria-pressed="true"] { color: var(--signal); }
.fieldnote {
display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
font-size: var(--t-xs); color: var(--muted); line-height: 1.6;
padding: var(--s-4) 0 var(--s-2); max-width: 88ch;
}
.fieldnote strong { color: var(--ink-2); }
.fieldnote em { font-style: normal; font-weight: 700; color: var(--signal); }
.fieldnote__btn {
font-size: 0.6875rem; font-weight: 700; color: var(--signal);
border: 1px solid var(--rule-strong); border-radius: 999px; padding: 1px 9px;
}
.fieldnote__btn:hover { background: var(--signal-tint); }
/* ==========================================================================
29. THE READING LENS — read an article through one kind of claim
========================================================================== */
.lens {
border: 1px solid var(--rule); border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface-2) 94%, transparent);
padding: var(--s-4) var(--s-5); margin-block: var(--s-6);
}
.lens__head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.lens__title { font-size: var(--t-xs); font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--signal); }
.lens__hint { font-size: var(--t-sm); color: var(--muted); }
.lens__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-3); }
.lens__chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
border: 1px solid var(--rule-strong); border-radius: 999px; padding: 5px 12px;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lens__chip:hover { border-color: var(--ink); color: var(--ink); }
.lens__chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lens__chip--ev[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #fff; }
.lens__chip--jg[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #fff; }
.lens__n { font-variant-numeric: tabular-nums; font-size: var(--t-xs); opacity: .7; }
.lens__status { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-3); min-height: 1.2em; line-height: 1.5; }
.claim { transition: opacity .25s ease, filter .25s ease, box-shadow .25s ease; }
.claim--muted { opacity: .22; filter: saturate(.2); }
.claim--lit { box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .claim { transition: none; } }
/* ==========================================================================
30. THE LIVE MODEL — drag the assumptions, watch what the price demands
========================================================================== */
.model {
border: 1px solid var(--rule); border-radius: var(--radius-lg);
background: var(--surface); overflow: hidden; margin-block: var(--s-6);
}
.model__head { padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--rule);
background: linear-gradient(180deg, var(--signal-tint), transparent); }
.model__title { font-family: var(--ws-serif); font-size: var(--t-xl); letter-spacing: -.015em; }
.model__sub { font-size: var(--t-sm); color: var(--muted); margin-top: 4px; }
.model__grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.model__controls { padding: var(--s-5); border-right: 1px solid var(--rule); display: grid; gap: var(--s-5); align-content: start; }
.model__out { padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.ctrl { display: grid; gap: 6px; }
.ctrl__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.ctrl__label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ctrl__val { font-size: var(--t-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.ctrl__note { font-size: var(--t-xs); color: var(--muted); line-height: 1.45; }
.model input[type=range] {
-webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; cursor: grab;
}
.model input[type=range]::-webkit-slider-runnable-track {
height: 4px; border-radius: 2px; background: var(--rule-strong);
}
.model input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--rule-strong); }
.model input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
background: var(--signal); border: 2px solid var(--surface); margin-top: -7px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.model input[type=range]::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%; background: var(--signal);
border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.model input[type=range]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.mbar { display: grid; gap: 5px; }
.mbar__top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-sm); }
.mbar__k { color: var(--muted); font-weight: 600; }
.mbar__v { font-weight: 700; font-variant-numeric: tabular-nums; }
.mbar__track { height: 14px; background: var(--surface-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--rule); }
.mbar__fill { height: 100%; transition: width .35s cubic-bezier(.2,.7,.3,1); }
.mbar__fill--required { background: var(--amber); }
.mbar__fill--projected { background: var(--signal); }
.mbar__fill--lastfy { background: var(--rule-strong); }
@media (prefers-reduced-motion: reduce) { .mbar__fill { transition: none; } }
.model__verdict { font-size: var(--t-md); line-height: 1.5; padding: var(--s-4); border-radius: var(--radius); border-left: 3px solid var(--rule-strong); background: var(--surface-2); }
.model__verdict--over { border-left-color: var(--up); }
.model__verdict--near { border-left-color: var(--amber); }
.model__verdict--under { border-left-color: var(--down); }
.model__working { font-family: var(--ws-mono); font-size: var(--t-xs); color: var(--muted); line-height: 1.7; word-break: break-word; }
.model__foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--rule); background: var(--surface-2); font-size: var(--t-xs); color: var(--muted); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 760px) {
.model__grid { grid-template-columns: minmax(0,1fr); }
.model__controls { border-right: 0; border-bottom: 1px solid var(--rule); }
}
/* ==========================================================================
31. CHART INSPECTION — every bar readable by mouse, touch and keyboard
========================================================================== */
.chartfig [data-series] { cursor: pointer; transition: opacity .18s ease; outline: none; }
.chartfig [data-series]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.c-bar--dim { opacity: .22; }
.chartfig__readout {
font-size: var(--t-sm); color: var(--ink); font-weight: 600;
padding: 6px 0 0; min-height: 1.2em; font-variant-numeric: tabular-nums;
}
.chartfig--inspecting .chartfig__takeaway { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .chartfig [data-series], .c-bar--dim { transition: none; } }
/* ==========================================================================
32. WHAT IF YOU HAD INVESTED
The form reads as a sentence rather than a row of boxes, because the
question is a sentence. The result is deliberately typeset at display
weight — this is the one number a reader came for — and the drawdown panel
sits directly beside it so the cost is never a footnote.
========================================================================== */
.wi { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2);
padding: var(--s-5); margin-bottom: var(--s-6); }
.wi__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); margin: 0; }
.wi__field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.wi__field label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); font-weight: 600; }
.wi__field select {
font: inherit; font-size: var(--t-md); font-weight: 650; color: var(--ink);
background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
padding: 10px 12px; min-height: 44px; max-width: 100%;
}
.wi__field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wi__field--go { flex: 0 0 auto; }
.wi__field--go .btn { min-height: 44px; }
.wi__result { margin: var(--s-6) 0 var(--s-5); outline: none; }
.wi__result:focus, .wi__result:focus-visible { outline: none; }
.wi__loading { color: var(--muted); font-size: var(--t-sm); }
.wi__result--err { color: var(--down); font-size: var(--t-sm); }
.wi__lede { font-size: var(--t-md); color: var(--muted); margin: 0 0 4px; }
.wi__big {
font-family: var(--ws-serif); font-weight: 700; line-height: 1;
font-size: clamp(2.6rem, 9vw, 5rem); margin: 0 0 8px;
font-variant-numeric: tabular-nums; letter-spacing: -.02em; word-break: break-word;
}
.wi__big.up { color: var(--up); } .wi__big.down { color: var(--down); }
.wi__sub { font-size: var(--t-sm); color: var(--muted); margin: 0 0 var(--s-5);
font-variant-numeric: tabular-nums; }
.wi__chart { margin: 0 0 var(--s-5); }
.wi__svg { display: block; width: 100%; height: auto; max-width: 100%; }
.wi__key { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--s-4);
font-size: var(--t-xs); color: var(--muted); }
.wi__swatch { width: 14px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }
.wi__swatch--sub { border-top-color: var(--signal); }
.wi__swatch--bench { border-top-color: var(--rule-strong); border-top-style: dashed; }
.wi__swatch--stake { border-top-color: var(--rule); }
.wi__panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--s-4); margin-bottom: var(--s-5); }
.wi__panel { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-4);
background: var(--paper); }
.wi__panel p { margin: 0 0 6px; font-size: var(--t-sm); line-height: 1.6; }
.wi__panel p:last-child { margin-bottom: 0; }
.wi__panel .wi__panelbig { /* beats `.wi__panel p`, which is more specific */
font-family: var(--ws-serif); font-size: var(--t-xl); font-weight: 700;
font-variant-numeric: tabular-nums; margin: 0 0 6px; line-height: 1.1;
}
.wi__panel--cost { border-left: 3px solid var(--amber); }
.wi__working { margin-bottom: var(--s-4); }
.wi__foot { font-size: var(--t-xs); color: var(--muted); line-height: 1.7; margin: 0; }
/* The homepage teaser: one question, one button. */
.wihook { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2);
padding: var(--s-5); display: flex; gap: var(--s-4); align-items: center;
justify-content: space-between; flex-wrap: wrap; }
.wihook__q { font-family: var(--ws-serif); font-size: var(--t-lg); font-weight: 700;
margin: 0 0 4px; line-height: 1.25; }
.wihook__sub { font-size: var(--t-sm); color: var(--muted); margin: 0; max-width: 54ch; }
@media (max-width: 620px) {
.wi { padding: var(--s-4); }
.wi__fields { flex-direction: column; align-items: stretch; }
.wi__field, .wi__field--go, .wi__field select, .wi__field--go .btn { width: 100%; }
}
/* ==========================================================================
33. NEWSROOM — the publication's own operational state
========================================================================== */
.nr__mix { display: block; font-size: var(--t-xs); color: var(--muted); font-weight: 400;
margin-top: 3px; letter-spacing: .01em; }
.nr__scorecell { white-space: nowrap; }
.nr__scorecell strong { font-variant-numeric: tabular-nums; font-size: var(--t-md); }
.nr__bar { display: flex; width: 120px; height: 6px; margin-top: 5px; gap: 1px;
background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.nr__seg { display: block; height: 100%; min-width: 0; }
/* ==========================================================================
34. ARTICLE UPDATES
Above the article, not footnoted at the bottom: a reader arriving after the
facts moved needs the newer figure before the argument, not after it.
Amber rather than red — this is not a correction, the piece was not wrong.
========================================================================== */
.update { max-width: 48rem; margin: var(--s-5) auto 0; padding: var(--s-4);
border: 1px solid var(--rule); border-left: 3px solid var(--amber);
border-radius: var(--radius); background: var(--amber-tint); }
.update__label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
font-weight: 700; color: var(--amber); margin-bottom: 6px; }
.update__body { font-size: var(--t-sm); line-height: 1.65; color: var(--ink); }
.update__body p { margin: 0 0 var(--s-3); }
.update__body p:last-child { margin-bottom: 0; }
/* Quote hub: 500 links have to stay scannable, so they are a dense grid of
ticker-first chips rather than a wall of company names. */
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px;
background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius);
overflow: hidden; }
.qlink { display: block; padding: 10px 12px; background: var(--paper); color: var(--ink);
text-decoration: none; font-size: var(--t-xs); line-height: 1.35; min-height: 44px; }
.qlink b { font-family: var(--ws-mono); font-size: var(--t-sm); color: var(--signal);
display: inline-block; min-width: 3.4em; }
.qlink:hover, .qlink:focus-visible { background: var(--surface-2); }
/* ==========================================================================
35. LIVE-BOUND FIGURES IN PROSE
A live figure is marked so a reader can tell it from a written one — a
dotted underline, not a colour, because colour on this site means direction
of money and nothing else. When it drifts past the band the argument
assumed, it turns amber and the article carries a note above the text.
========================================================================== */
.lv { border-bottom: 1px dotted var(--rule-strong); cursor: help;
font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv--drift { border-bottom-color: var(--amber); color: var(--amber); font-weight: 650; }
.update--drift { border-left-color: var(--amber); }
@media (prefers-reduced-motion: no-preference) {
.lv { transition: color .3s ease, border-color .3s ease; }
}
/* ==========================================================================
36. PRIVATE SIGNAL DESK
Amber throughout rather than the house green: this is not published work,
and it should never be mistaken at a glance for an article.
========================================================================== */
.desk { min-height: 200px; }
.desk__lock { max-width: 24rem; border: 1px solid var(--rule); border-left: 3px solid var(--amber);
border-radius: var(--radius); padding: var(--s-5); background: var(--surface-2); }
.desk__locktitle { font-family: var(--ws-serif); font-size: var(--t-lg); margin: 0 0 8px; }
.desk__lockdek { font-size: var(--t-sm); color: var(--muted); margin: 0 0 var(--s-4); line-height: 1.6; }
.desk__lock input { width: 100%; font: inherit; font-size: var(--t-md); padding: 10px 12px;
min-height: 44px; border: 1px solid var(--rule-strong);
border-radius: var(--radius-sm); background: var(--paper); color: var(--ink);
margin-bottom: var(--s-3); }
.desk__lock input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.desk__err { color: var(--down); font-size: var(--t-sm); margin: 0 0 var(--s-3); }
.desk__bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-4); }
.desk__age { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--signal); }
.desk__age--stale { color: var(--down); }
.desk__bar .btn { margin-left: auto; }
.desk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--s-4); }
.desk__card { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-4);
background: var(--paper); }
.desk__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-3); }
.desk__tier { font-family: var(--ws-mono); font-weight: 700; font-size: var(--t-xs);
border: 1px solid var(--rule-strong); border-radius: 3px; padding: 1px 6px; }
.desk__tier--a { color: var(--signal); border-color: var(--signal); }
.desk__tier--b { color: var(--amber); border-color: var(--amber); }
.desk__sym { font-family: var(--ws-mono); font-weight: 700; }
.desk__setup { font-size: var(--t-xs); color: var(--muted); }
.desk__dir { font-size: var(--t-xs); font-weight: 700; }
.desk__score { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted);
font-size: var(--t-xs); }
.desk__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 6px var(--s-3); margin: 0 0 var(--s-3); }
.desk__facts dt { font-size: var(--t-xs); color: var(--muted); }
.desk__facts dd { margin: 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums;
word-break: break-word; }
.desk__warn { margin: 0; padding-left: 1.1em; font-size: var(--t-xs); color: var(--amber); line-height: 1.6; }
.desk__foot { font-size: var(--t-xs); color: var(--muted); line-height: 1.7; margin-top: var(--s-5); }
/* ==========================================================================
MARKET NOW — /markets/
Extends the existing token system. No new colours, no new type stack, no
new radii. A reader arriving from a company page should not feel they have
crossed into a different publication.
Layout rule throughout: direction first, magnitude second, level third,
provenance fourth but never hidden.
========================================================================== */
.mkt { padding-top: var(--s-5); }
/* --- header: one line, not a landing page -------------------------------
The old hub spent ~250px of the first viewport on a title, a one-sentence
dek and a rule. On a 768px-tall laptop that is a third of the screen
carrying no information. This is ~90px and the numbers start immediately. */
.mkt__eyebrow { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.mkt__title {
font-family: var(--ws-serif);
font-size: var(--t-3xl);
line-height: 1.05;
letter-spacing: -0.02em;
margin: var(--s-2) 0 var(--s-5);
}
.mkt__session {
display: inline-flex; align-items: center; gap: var(--s-2);
font: 600 var(--t-xs)/1 var(--ws-sans);
letter-spacing: .06em; text-transform: uppercase;
color: var(--muted);
border: 1px solid var(--rule); border-radius: 999px;
padding: 5px 10px 5px 8px;
}
.mkt__dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--rule-strong); flex: none;
}
.mkt__session[data-session="regular"] { color: var(--up); border-color: var(--up-tint); }
.mkt__session[data-session="regular"] .mkt__dot { background: var(--up); }
.mkt__session[data-session="pre"] .mkt__dot,
.mkt__session[data-session="post"] .mkt__dot { background: var(--amber); }
/* --- The Signal ---------------------------------------------------------
The one piece of prose above the fold, so it gets serif and real size.
It is an interpretation and is labelled as one; the basis list underneath
is what makes it checkable rather than assertive. */
.sig {
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--rule);
padding: var(--s-4) 0 var(--s-5);
margin-bottom: var(--s-6);
}
.sig__k {
font: 600 var(--t-xs)/1 var(--ws-sans);
letter-spacing: .1em; text-transform: uppercase;
color: var(--signal); margin: 0 0 var(--s-3);
}
.sig__text {
font-family: var(--ws-serif);
font-size: var(--t-xl);
line-height: 1.38;
max-width: 34em;
margin: 0 0 var(--s-4);
text-wrap: pretty;
}
.sig[data-empty] .sig__text { color: var(--ink-2); font-size: var(--t-md); }
.sig__basis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
/* When the Signal is withheld there is no basis list and no methodology note.
Without this the empty still claimed its margins and left ~90px of dead
space directly above the numbers — on a phone that pushed the benchmarks off
the first screen to hold nothing. */
.sig__basis:empty { display: none; }
.sig[data-empty] { padding-bottom: var(--s-4); }
.sig__basis li { display: flex; align-items: baseline; gap: var(--s-2); }
.sig__basis-label { font: 600 var(--t-xs)/1.4 var(--ws-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sig__basis-val { font: 500 var(--t-sm)/1.4 var(--ws-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sig__note { font: 400 var(--t-xs)/1.5 var(--ws-sans); color: var(--muted); margin: var(--s-3) 0 0; max-width: 42em; }
/* --- benchmarks ---------------------------------------------------------
Four across on desktop, but NOT four identical cards: no borders, no
shadows, no radius. They are separated by rules and rhythm, which is what
a table of figures in a newspaper does and why it reads calmly. */
.bench {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; margin-bottom: var(--s-7);
border-top: 1px solid var(--rule);
}
.bench .q { border-right: 1px solid var(--rule); padding: var(--s-4) var(--s-4) var(--s-4) 0; }
.bench .q:last-child { border-right: 0; }
.bench .q:not(:first-child) { padding-left: var(--s-4); }
.q { position: relative; min-width: 0; }
.q__label {
font: 600 var(--t-xs)/1.3 var(--ws-sans);
letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-bottom: var(--s-2);
}
.q__proxy {
font-size: 10px; letter-spacing: .04em; text-transform: none;
color: var(--ink-2); background: var(--surface-2);
border: 1px solid var(--rule); border-radius: 3px; padding: 1px 4px;
cursor: help; white-space: nowrap;
}
.q__chg {
font: 600 var(--t-2xl)/1 var(--ws-sans);
font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
display: block; margin-bottom: 2px;
}
.q__val {
font: 500 var(--t-sm)/1.4 var(--ws-mono);
font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.q__chg.is-up { color: var(--up); }
.q__chg.is-down { color: var(--down); }
.q__chg.is-flat { color: var(--muted); }
/* Direction is never carried by colour alone: the sign is in the text, the
arrow is a second non-colour channel, and .vh[data-sr] spells it out. */
.q__chg.is-up::after { content: " \2191"; font-size: .7em; vertical-align: .12em; }
.q__chg.is-down::after { content: " \2193"; font-size: .7em; vertical-align: .12em; }
.q__badge {
margin-top: var(--s-3);
font: 500 var(--t-xs)/1 var(--ws-sans);
letter-spacing: .04em;
display: inline-block; padding: 3px 7px; border-radius: 3px;
border: 1px solid var(--rule); color: var(--muted); background: var(--surface-2);
white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.q__badge--live { color: var(--up); border-color: var(--up-tint); background: var(--up-tint); }
.q__badge--warn { color: var(--amber); border-color: var(--amber-tint); background: var(--amber-tint); }
/* A stale reason is visible without interaction. It is the one piece of
metadata a reader must not have to hunt for. */
.q__reason {
font: 400 var(--t-xs)/1.45 var(--ws-sans);
color: var(--amber); margin: var(--s-2) 0 0; max-width: 28em;
}
.q__reason[hidden] { display: none; }
.q__src { margin-top: var(--s-2); }
.q__src summary {
font: 500 var(--t-xs)/1 var(--ws-sans); color: var(--muted);
cursor: pointer; padding: 3px 0; list-style: none;
display: inline-flex; align-items: center; gap: 4px;
min-height: 24px;
}
.q__src summary::-webkit-details-marker { display: none; }
.q__src summary::after { content: "+"; font-size: 13px; line-height: 1; }
.q__src[open] summary::after { content: "\2212"; }
.q__src summary:hover { color: var(--ink); }
.q__src summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.q__src dl { margin: var(--s-2) 0 0; font: 400 var(--t-xs)/1.5 var(--ws-sans); color: var(--ink-2); }
.q__src dl > div { display: flex; gap: var(--s-2); padding: 2px 0; }
.q__src dt { color: var(--muted); min-width: 62px; flex: none; }
.q__src dd { margin: 0; }
/* --- cross-asset --------------------------------------------------------- */
.xsec .xgroup + .xgroup { margin-top: var(--s-5); }
.xgroup__t {
font: 600 var(--t-xs)/1 var(--ws-sans);
letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
margin: 0 0 var(--s-3); padding-bottom: var(--s-2);
border-bottom: 1px solid var(--rule);
}
.xgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-5); }
.xgrid .q__chg { font-size: var(--t-xl); }
/* --- participation -------------------------------------------------------
Two bars, not a breadth gauge. The honest claim this data supports is
"large caps did X, small caps did Y", and the heading says exactly that. */
.part__row { display: grid; grid-template-columns: 8.5rem 1fr 5rem; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.part__label { font: 600 var(--t-xs)/1.3 var(--ws-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.part__bar { background: var(--bg-sunk); height: 10px; border-radius: 2px; overflow: hidden; }
.part__bar span { display: block; height: 100%; background: var(--rule-strong); transition: width .4s ease; }
.part__bar span.is-up { background: var(--up); }
.part__bar span.is-down { background: var(--down); }
.part__val { font: 600 var(--t-sm)/1 var(--ws-mono); font-variant-numeric: tabular-nums; text-align: right; }
.part__row[data-dir="up"] .part__val { color: var(--up); }
.part__row[data-dir="down"] .part__val { color: var(--down); }
.part__gap { font: 400 var(--t-sm)/1.5 var(--ws-sans); color: var(--ink-2); margin: var(--s-3) 0 0; }
.part[hidden] { display: none; }
/* --- data health --------------------------------------------------------
Transparency in the reader's path, not on a page they only find once they
have become suspicious. Understated: this is a normal state, not an alarm. */
.dataheal { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.dataheal__in { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.dataheal__k { font: 600 var(--t-xs)/1 var(--ws-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.dataheal__v { font: 500 var(--t-sm)/1.4 var(--ws-sans); color: var(--ink); }
.dataheal__link { font: 500 var(--t-sm)/1 var(--ws-sans); color: var(--signal); white-space: nowrap; }
.dataheal__note { font: 400 var(--t-xs)/1.6 var(--ws-sans); color: var(--muted); max-width: 52em; margin: var(--s-3) 0 0; }
/* --- responsive ---------------------------------------------------------
Not a stack-and-hope. At phone width the four benchmarks become a 2x2 whose
reading order still puts the broad market first, the change stays the
largest thing on the row, and the source disclosure keeps a 24px target. */
@media (max-width: 900px) {
.bench { grid-template-columns: repeat(2, 1fr); }
.bench .q { padding: var(--s-4) var(--s-3) var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.bench .q:nth-child(2n) { border-right: 0; padding-right: 0; }
.bench .q:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 600px) {
/* Phone hierarchy is its own problem, not a narrower desktop. The reader's
first question is "what are the numbers", so the identity block and the
Signal are compressed to buy the benchmark grid a place on screen one. */
.mkt { padding-top: var(--s-4); }
.mkt__eyebrow { gap: var(--s-2); }
.mkt__session { font-size: 10px; padding: 4px 8px 4px 6px; }
.mkt__title { font-size: var(--t-2xl); margin: var(--s-1) 0 var(--s-3); }
.sig { padding: var(--s-3) 0 var(--s-4); margin-bottom: var(--s-4); }
.sig__k { margin-bottom: var(--s-2); }
.sig__text { font-size: var(--t-md); line-height: 1.45; margin-bottom: var(--s-3); }
.sig__note { display: none; } /* the methodology line lives on /how-we-work/ */
.bench .q { padding-block: var(--s-3); }
.bench .q__chg { font-size: var(--t-xl); }
.xgrid { grid-template-columns: 1fr; gap: var(--s-4); }
.xgrid .q { border-bottom: 1px solid var(--rule); padding-bottom: var(--s-3); }
.xgrid .q:last-child { border-bottom: 0; }
.xgrid .q__chg { font-size: var(--t-lg); }
/* The bars stop earning their space when the label column squeezes to two
words per line; the figures alone read better. */
.part__row { grid-template-columns: 1fr 4.5rem; }
.part__bar { display: none; }
.dataheal__in { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
.part__bar span { transition: none; }
}
/* Dark theme: the tokens already flip, so only the tinted badges need a hand
— a light tint on a dark surface reads as a highlight, not a label. */
:root[data-theme="dark"] .q__badge { background: transparent; }
:root[data-theme="dark"] .q__badge--live { background: transparent; border-color: var(--up); }
:root[data-theme="dark"] .q__badge--warn { background: transparent; border-color: var(--amber); }
:root[data-theme="dark"] .q__proxy { background: transparent; }
/* ==========================================================================
HEADER — the 821-1180px dead band
Pre-existing and site-wide: every page overflowed horizontally between the
mobile menu breakpoint (820px) and roughly 1200px, by 219px at 960 and
155px at 1024. The cause is that nothing in the bar could shrink — .nav had
`flex: 1 1 auto` but nowrap children and no `min-width`, so its flex-basis
floor was its full content width, and .hdr__tools is `flex: 0 0 auto`.
Percentages in a layout do not make it responsive.
========================================================================== */
.nav { min-width: 0; }
@media (min-width: 821px) and (max-width: 1180px) {
.nav { gap: 0; margin-left: var(--s-2); }
.nav a { padding-inline: 7px; font-size: var(--t-sm); }
.hdr__cta { padding: 8px 11px; font-size: var(--t-sm); }
.hdr__bar { gap: var(--s-2); }
}
/* ==========================================================================
SECTORS — ranked, not a heatmap
A heatmap looks impressive and answers the wrong question: it asks the eye
to decode colour into magnitude, twice, for eleven cells. A ranked bar list
answers "who led, who lagged, by how much" in one downward glance and works
identically on a phone, so there is no second mobile design to maintain.
========================================================================== */
.secsec[hidden] { display: none; }
.sec__lead { font-family: var(--ws-serif); font-size: var(--t-md); line-height: 1.5; color: var(--ink); max-width: 44em; margin: 0 0 var(--s-4); }
.sec__lead[hidden] { display: none; }
.srlist { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.sr {
display: grid; grid-template-columns: 13rem 1fr 4.5rem;
align-items: center; gap: var(--s-3);
background: var(--bg); padding: var(--s-2) 0;
}
.sr[hidden] { display: none; }
.sr__label { font: 600 var(--t-sm)/1.3 var(--ws-sans); color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.sr__sym { font: 500 10px/1 var(--ws-mono); color: var(--muted); letter-spacing: .04em; }
/* Zero sits at the centre so gainers and losers are read as opposite, not as
two lengths of the same bar. */
.sr__track { position: relative; height: 12px; background: linear-gradient(to right, transparent calc(50% - 1px), var(--rule) calc(50% - 1px), var(--rule) calc(50% + 1px), transparent calc(50% + 1px)); }
.sr__bar { position: absolute; top: 2px; height: 8px; border-radius: 1px; background: var(--rule-strong); transition: width .35s ease, left .35s ease; }
.sr__bar.is-up { background: var(--up); }
.sr__bar.is-down { background: var(--down); }
.sr__val { font: 600 var(--t-sm)/1 var(--ws-mono); font-variant-numeric: tabular-nums; text-align: right; }
.sr[data-dir="up"] .sr__val { color: var(--up); }
.sr[data-dir="down"] .sr__val { color: var(--down); }
.sec__foot { font: 400 var(--t-xs)/1.6 var(--ws-sans); color: var(--muted); margin: var(--s-3) 0 0; }
/* ==========================================================================
WHAT ACTUALLY MOVED
The catalyst is a separate visual object from the move, because it is a
separate claim from a separate source. A row with no verified cause is not
styled as a failure — it is the same row, saying a true thing.
========================================================================== */
.mvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.mv { padding: var(--s-4) var(--s-5) var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.mv__head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.mv__tic { font: 700 var(--t-md)/1 var(--ws-sans); letter-spacing: .02em; color: var(--ink); text-decoration: none; }
a.mv__tic { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.mv__co { font: 400 var(--t-sm)/1 var(--ws-sans); color: var(--muted); }
.mv__move { margin-left: auto; font: 600 var(--t-sm)/1 var(--ws-mono); font-variant-numeric: tabular-nums; }
.mv__move.is-up { color: var(--up); }
.mv__move.is-down { color: var(--down); }
.mv__move.is-up::after { content: " \2191"; font-size: .8em; }
.mv__move.is-down::after { content: " \2193"; font-size: .8em; }
.mv__cat { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.mv__kind { font: 600 var(--t-xs)/1 var(--ws-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.mv__conf {
font: 500 10px/1 var(--ws-sans); letter-spacing: .05em; text-transform: uppercase;
padding: 3px 6px; border-radius: 3px; border: 1px solid var(--rule); color: var(--muted); cursor: help;
}
.mv__conf--mechanical, .mv__conf--company { color: var(--signal); border-color: var(--signal-tint); background: var(--signal-tint); }
.mv__conf--reported { color: var(--amber); border-color: var(--amber-tint); background: var(--amber-tint); }
/* Deliberately NOT red. "We could not find a cause" is an honest finding, not
an error state, and colouring it like a warning would teach readers to skim
past the most trustworthy row on the page. */
.mv__conf--none { color: var(--muted); border-style: dashed; }
.mv__why { font: 400 var(--t-base)/1.55 var(--ws-sans); color: var(--ink-2); margin: 0; max-width: 40em; }
.mv__foot { font: 400 var(--t-xs)/1.6 var(--ws-sans); color: var(--muted); max-width: 54em; margin: var(--s-4) 0 0; }
:root[data-theme="dark"] .mv__conf--mechanical,
:root[data-theme="dark"] .mv__conf--company,
:root[data-theme="dark"] .mv__conf--reported { background: transparent; }
@media (max-width: 600px) {
/* The bar track needs room for a label and a number before it earns space.
Below ~600px the ranking itself carries the meaning. */
.sr { grid-template-columns: 1fr 4.5rem; }
.sr__track { display: none; }
.sr__label { font-size: var(--t-base); }
.mvgrid { grid-template-columns: 1fr; }
.mv { padding-right: 0; }
.mv__move { margin-left: 0; }
.mv__head { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .sr__bar { transition: none; } }
/* The Market Pulse stale marker.
A dagger, not a red badge. The strip is a glance surface on 562 pages; an
alarm on two of nine rows would dominate it and, being permanent until the
data is replaced, would quickly stop being read. The dagger is quiet, has a
footnote's meaning, is explained by the note at the end of the strip, and
the full date is in each row's accessible name. */
.tick__stale { color: var(--amber); font-weight: 700; margin-left: 3px; font-size: .85em; }
.tick--stale .tick__val { color: var(--muted); }
:root[data-theme="dark"] .tick__stale { color: var(--amber); }
/* The proxy line.
Subordinate to the change it explains and typographically distinct from the
official level below it, so the eye reads: what moved, what moved it is a
tracking fund, and what the official level was. Present in the markup even
before the feed answers, so no layout shift when it fills. */
.q__prox {
font: 500 var(--t-xs)/1.4 var(--ws-sans);
color: var(--amber); letter-spacing: .01em;
margin: 2px 0 4px; display: block;
}
.q__prox[hidden] { display: none; }
.q[data-proxied] .q__val { color: var(--ink-2); }
/* "Could you actually have held it?" — the honest half of a return figure.
A definition list, not cards: four related measurements of one experience,
which is what a dl is for. The note under each value is doing real work and
is sized to be read, not to be technically present. */
.wi__hold { border-top: 1px solid var(--rule); margin-top: var(--s-5); padding-top: var(--s-4); }
.wi__holdlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4); margin: var(--s-3) 0 0; }
.wi__holdlist > div { min-width: 0; }
.wi__holdlist dt { font: 600 var(--t-xs)/1.3 var(--ws-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.wi__holdlist dd { margin: 0; }
.wi__holdv { display: block; font: 600 var(--t-lg)/1.15 var(--ws-sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.wi__holdn { display: block; font: 400 var(--t-xs)/1.5 var(--ws-sans); color: var(--muted); margin-top: 3px; max-width: 30em; }
/* Share. One quiet button — the URL already carries the result, so this only
saves a copy step. No share-sheet, no social icons, no dark pattern. */
.wi__share { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.wi__sharenote { font: 400 var(--t-xs)/1.4 var(--ws-sans); color: var(--signal); }
.wi__sharenote[hidden] { display: none; }
@media (max-width: 600px) { .wi__holdlist { grid-template-columns: 1fr; gap: var(--s-3); } }
/* ==========================================================================
TOOLS, THE READER'S DESK, THE CALENDAR
Appended as one block. Everything here reuses the existing tokens rather
than introducing new colours: a feature that arrives with its own palette
is how a design system stops being one.
========================================================================== */
/* ---- watch star ---------------------------------------------------------
Sized to the 44px touch target rather than to the glyph. A control that is
visually small and physically small is the single most common reason a
mobile reader taps twice. */
.star {
display: inline-flex; align-items: center; gap: 7px;
min-height: 40px; padding: 8px 14px;
font: inherit; font-size: var(--t-sm); font-weight: 600;
color: var(--ink); background: var(--surface);
border: 1px solid var(--rule-strong); border-radius: var(--radius);
cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.star:hover { border-color: var(--ink); background: var(--surface-2); }
.star__i { font-size: 1.05rem; line-height: 1; }
.star[aria-pressed="true"] {
color: var(--signal); border-color: var(--signal); background: var(--signal-tint);
}
.star[aria-pressed="true"] .star__i::before { content: "\2605"; }
.star[aria-pressed="true"] .star__i { font-size: 0; }
.star[aria-pressed="true"] .star__i::before { font-size: 1.05rem; }
.quote__acts { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.toast {
margin: var(--s-3) 0 0; padding: 10px 14px;
background: var(--signal-tint); border: 1px solid var(--signal);
border-radius: var(--radius); color: var(--signal-ink);
font-size: var(--t-sm); font-weight: 600;
}
/* ---- share ------------------------------------------------------------- */
.share {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
margin: var(--s-6) 0; padding: var(--s-4) 0;
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.share__label {
font-size: var(--t-sm); font-weight: 700; color: var(--ink-2);
margin-right: var(--s-2);
}
.share__said { margin-left: var(--s-2); }
/* ---- follow (the honest newsletter replacement) ------------------------- */
.follow {
display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center;
justify-content: space-between;
margin: var(--s-6) 0 0; padding: var(--s-5);
background: var(--surface-2); border: 1px solid var(--rule);
border-radius: var(--radius-lg);
}
.follow__body { flex: 1 1 22rem; }
.follow__q {
font-family: var(--ws-serif); font-size: var(--t-lg); font-weight: 700;
margin: var(--s-2) 0 var(--s-2);
}
.follow__sub { font-size: var(--t-sm); color: var(--muted); margin: 0; max-width: 56ch; }
.follow__acts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
/* ---- tools hub ---------------------------------------------------------- */
.toolgrid {
display: grid; gap: var(--s-4); margin: var(--s-6) 0;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.toolcard {
display: block; padding: var(--s-5);
border: 1px solid var(--rule); border-radius: var(--radius-lg);
background: var(--surface); color: inherit; text-decoration: none;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.toolcard:hover { border-color: var(--signal); box-shadow: var(--shadow); transform: translateY(-1px); }
.toolcard__t { font-family: var(--ws-serif); font-size: var(--t-lg); margin: 0 0 var(--s-2); }
.toolcard__d { font-size: var(--t-sm); color: var(--muted); margin: 0 0 var(--s-4); }
.toolcard__go { font-size: var(--t-sm); font-weight: 700; color: var(--signal); }
/* ---- watchlist / alert tables ------------------------------------------
`table-layout: auto` with a horizontal scroll container rather than a grid
of divs: this is tabular data, a screen reader should meet it as a table,
and a narrow screen should scroll it rather than reflow it into nonsense. */
.wl { width: 100%; border-collapse: collapse; margin: var(--s-4) 0 var(--s-3); }
.wl th, .wl td {
text-align: left; padding: 11px 10px;
border-bottom: 1px solid var(--rule); vertical-align: baseline;
}
.wl thead th {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); font-weight: 700; border-bottom-color: var(--rule-strong);
}
.wl__sym a { font-weight: 700; font-variant-numeric: tabular-nums; }
.wl__name { display: block; font-size: var(--t-sm); color: var(--muted); font-weight: 400; }
.wl__px, .wl__chg { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl__val { font-weight: 600; }
.wl__badge { display: block; margin-top: 3px; }
.wl__chg.is-up { color: var(--up); }
.wl__chg.is-down { color: var(--down); }
.wl__chg.is-flat { color: var(--muted); }
.wl__act { text-align: right; white-space: nowrap; }
.wl--alerts .al__state[data-fired="1"] { color: var(--signal); font-weight: 600; }
.alertbanner {
margin: var(--s-4) 0; padding: var(--s-4);
border: 1px solid var(--signal); border-left-width: 3px;
background: var(--signal-tint); border-radius: var(--radius);
}
.alertbanner p { margin: 0 0 var(--s-2); font-weight: 600; color: var(--signal-ink); }
.alertbanner p:last-child { margin-bottom: 0; }
.alertform {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3);
margin: var(--s-4) 0;
}
.alertform__f { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.alertform label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.alertform input, .alertform select {
font: inherit; font-size: var(--t-base); padding: 8px 10px; min-height: 40px;
border: 1px solid var(--rule-strong); border-radius: var(--radius);
background: var(--surface); color: var(--ink);
}
.alertform__money { display: inline-flex; align-items: center; gap: 4px; }
.alertform__money input { width: 8rem; }
.notebox--warn { border-color: var(--amber); background: var(--amber-tint); }
.deskacts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); }
.deskacts__file { cursor: pointer; }
.deskacts__danger[data-armed="1"] { border-color: var(--down); color: var(--down); }
/* ---- your signal --------------------------------------------------------- */
.ys__lede { font-size: var(--t-md); color: var(--ink-2); margin: var(--s-3) 0; }
.yslist { list-style: none; padding: 0; margin: var(--s-4) 0; }
.yslist li {
display: flex; gap: var(--s-4); align-items: baseline;
padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.ys__date {
font-variant-numeric: tabular-nums; font-size: var(--t-sm); font-weight: 700;
color: var(--muted); min-width: 7rem;
}
.ys__ev { font-weight: 600; }
/* ---- valuation lab ------------------------------------------------------- */
.vl { margin: var(--s-6) 0; }
.vl__ins {
display: grid; gap: var(--s-5);
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.vl__set {
border: 1px solid var(--rule); border-radius: var(--radius-lg);
padding: var(--s-4) var(--s-5) var(--s-5); margin: 0; background: var(--surface);
}
.vl__set legend {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
font-weight: 700; color: var(--signal); padding: 0 6px;
}
.vl__f { margin: var(--s-3) 0 0; display: flex; flex-direction: column; gap: 5px; }
.vl__f label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.vl__row { display: flex; gap: var(--s-2); align-items: center; }
.vl input {
font: inherit; font-size: var(--t-base); padding: 8px 10px; min-height: 40px;
width: 100%; max-width: 20rem;
border: 1px solid var(--rule-strong); border-radius: var(--radius);
background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums;
}
.vl__card {
border: 1px solid var(--rule); border-radius: var(--radius-lg);
padding: var(--s-5); margin: var(--s-4) 0; background: var(--surface);
}
.vl__card--lead { border-color: var(--signal); border-left-width: 3px; background: var(--signal-tint); }
.vl__card h3 { font-family: var(--ws-serif); font-size: var(--t-lg); margin: 0 0 var(--s-3); }
.vl__head { font-family: var(--ws-serif); font-size: var(--t-xl); line-height: 1.25; margin: 0 0 var(--s-3); }
.vl__sub { font-size: var(--t-sm); color: var(--muted); margin: var(--s-3) 0 0; max-width: 66ch; }
.vl__meta { font-size: var(--t-sm); color: var(--ink-2); margin: var(--s-3) 0 0; font-variant-numeric: tabular-nums; }
.vl__grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.vl__cell { border-top: 2px solid var(--rule-strong); padding-top: var(--s-2); }
.vl__k { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.vl__v { display: block; font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.vl__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vl__table { border-collapse: collapse; width: 100%; min-width: 34rem; font-variant-numeric: tabular-nums; }
.vl__table th, .vl__table td {
padding: 8px 10px; text-align: right; font-size: var(--t-sm);
border: 1px solid var(--rule); white-space: nowrap;
}
.vl__table thead th, .vl__table tbody th { background: var(--surface-2); font-weight: 700; }
.vl__corner { background: transparent; border-color: transparent; }
.vl__table .is-over { background: var(--up-tint); color: var(--up); }
.vl__table .is-under { background: var(--down-tint); color: var(--down); }
.vl__table .is-near { color: var(--muted); }
.vl__na { color: var(--muted); }
/* ---- economic calendar --------------------------------------------------- */
.cal__wrap { overflow-x: auto; margin: var(--s-6) 0; }
.cal { width: 100%; border-collapse: collapse; min-width: 34rem; }
.cal th, .cal td {
text-align: left; padding: 13px 12px; vertical-align: top;
border-bottom: 1px solid var(--rule);
}
.cal thead th {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); border-bottom-color: var(--rule-strong);
}
.cal__month th {
background: var(--bg-sunk); font-family: var(--ws-serif); font-size: var(--t-md);
font-weight: 700; padding: 10px 12px; border-bottom-color: var(--rule-strong);
}
.cal__when { width: 5.5rem; white-space: nowrap; }
.cal__d { font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.cal__wd { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cal__name { font-weight: 700; margin-right: var(--s-2); }
.cal__note, .cal__detail { font-size: var(--t-sm); color: var(--muted); margin: 5px 0 0; max-width: 60ch; }
.cal__detail { color: var(--ink-2); }
.cal__src { font-size: var(--t-sm); white-space: nowrap; }
.cal__tag {
display: inline-block; font-size: var(--t-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: .05em;
padding: 2px 7px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--muted);
}
.cal__tag--high { color: var(--signal); border-color: var(--signal); background: var(--signal-tint); }
.cal__tag--medium { color: var(--amber); border-color: var(--amber); background: var(--amber-tint); }
.cal__row[data-weight="high"] .cal__d { color: var(--signal); }
.wihook__acts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
@media (max-width: 640px) {
.share { gap: var(--s-2); }
.alertform__f { flex: 1 1 100%; }
.alertform__money input { width: 100%; }
.vl input { max-width: none; }
.quote__acts { margin-left: 0; width: 100%; margin-top: var(--s-3); }
}
/* The footer gained a sixth column with the tools release. The original rule
was written for five and the sixth wrapped onto its own full-width row,
which turned "Trust" into a long vertical list under everything else. */
.ftr__grid { grid-template-columns: minmax(0,1.4fr) repeat(5, minmax(0,1fr)); gap: var(--s-5); }
@media (max-width: 1100px) {
.ftr__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
.ftr__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* A badge is a chip, not a bar: inside a table cell `display:block` stretched
it to the full column width. */
.wl__badge { display: inline-block; margin-top: 4px; }
/* A bare `.btn` had a transparent border and no fill, so five buttons on the
site — including the submit on /what-if/ and the primary link on every quote
page — rendered as plain bold text. It only became obvious once one sat next
to a `.btn--ghost`, where the PRIMARY action looked less clickable than the
secondary one. The default is now the filled treatment; the modifiers that
want something else say so. */
.btn { background: var(--signal); color: #fff; }
[data-theme="dark"] .btn { color: #06110C; }
.btn:hover { background: var(--signal-ink); }
.btn--ghost, .btn--ghost:hover { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
/* The star belongs beside the price, not underneath it. `.quote` is the flex
container; `.quote__row` had no display of its own, so its two children
stacked and the timestamp ended up level with the star. */
.quote__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-5); }
.quote__acts { margin-left: 0; }
/* The default fill above is written as `.btn`, which is the same specificity
as `.btn--ghost` and sits later in the file — so it was winning, and every
ghost button on the site briefly had white text on a transparent
background. The modifiers are restated here, after the default, so they
win on source order the way they are meant to. */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }
.btn--primary { background: var(--signal); color: #fff; }
.btn--primary:hover { background: var(--signal-ink); }
[data-theme="dark"] .btn--primary { color: #06110C; }
[data-theme="dark"] .btn--ghost { color: var(--ink); }
/* ==========================================================================
MEMBERSHIP
The comparison table is the page. It gets the editorial treatment — a real
table, tabular figures, generous rows — rather than the three-column
gradient-card layout every SaaS pricing page converges on.
========================================================================== */
.pro__notopen { margin: var(--s-5) 0; border-left: 3px solid var(--signal); }
.pro__cta { margin: var(--s-5) 0; }
.prow {
display: grid; gap: var(--s-4); margin: var(--s-6) 0;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.pcard {
border: 1px solid var(--rule); border-radius: var(--radius-lg);
padding: var(--s-5); background: var(--surface);
}
.pcard--pro { border-color: var(--signal); border-top-width: 3px; }
.pcard__n { font-family: var(--ws-serif); font-size: var(--t-lg); margin: 0 0 var(--s-2); }
.pcard__p {
font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; margin: 0;
}
.pcard__ann, .pro__ann { display: block; font-size: var(--t-sm); color: var(--signal); font-weight: 600; }
.pcard__t { font-size: var(--t-base); color: var(--ink-2); margin: var(--s-3) 0 var(--s-2); max-width: 34ch; }
.pro__wrap { overflow-x: auto; margin: var(--s-4) 0; }
.pro { width: 100%; border-collapse: collapse; min-width: 30rem; }
.pro th, .pro td { padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: left; }
.pro thead th {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); border-bottom-color: var(--rule-strong);
}
.pro thead th:not(:first-child), .pro__cell { text-align: center; width: 7.5rem; }
.pro tbody th { font-weight: 400; }
.pro__f { display: block; font-weight: 700; }
.pro__fn { display: block; font-size: var(--t-sm); color: var(--muted); max-width: 46ch; margin-top: 2px; }
.pro__cell { font-size: var(--t-lg); }
.pro__cell[data-on="1"] { color: var(--signal); }
.pro__cell[data-on="0"] { color: var(--muted); }
@media (max-width: 640px) {
.pro th, .pro td { padding: 10px 8px; }
.pro thead th:not(:first-child), .pro__cell { width: 4.5rem; }
}
/* The comparison table on a phone.
`min-width: 30rem` inside an auto-overflow wrapper still pushed the document
75px wide at 375px, and a two-column tick table is poor reading on a phone
regardless. Below 620px it becomes a stacked list: one feature per block,
each tick naming its own tier because the column headers are gone. */
@media (max-width: 620px) {
.pro__wrap { overflow-x: visible; }
.pro { min-width: 0; display: block; }
.pro thead { display: none; }
.pro tbody, .pro tr, .pro tbody th, .pro td { display: block; width: auto; }
.pro tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.pro tbody th { border: 0; padding: 0 0 8px; }
.pro__cell {
display: inline-flex; align-items: baseline; gap: 6px;
width: auto; text-align: left; border: 0;
padding: 0 20px 0 0; font-size: var(--t-sm);
}
.pro__cell::before {
content: attr(data-tier);
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); font-weight: 700;
}
}
/* The read-through marker. It needs a real height: a zero-area rect sitting
exactly on the viewport edge is ambiguous to IntersectionObserver, and the
completion event fired or did not depending on whether the reader happened
to stop with it centred or flush against the top. 1px removes the question. */
.artend { display: block; height: 1px; margin: 0; }
/* ---- filed figures and scenario grid ------------------------------------ */
.vf__grid {
display: grid; gap: var(--s-3); margin: var(--s-4) 0;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.vf__cell { border-top: 2px solid var(--rule-strong); padding-top: var(--s-2); }
.vf__k {
display: block; font-size: var(--t-xs); text-transform: uppercase;
letter-spacing: .05em; color: var(--muted);
}
.vf__k abbr { text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: help; }
.vf__v {
display: block; font-size: var(--t-lg); font-weight: 700;
font-variant-numeric: tabular-nums; margin-top: 2px;
}
.sc__pick { display: inline-flex; gap: 4px; vertical-align: middle; }
.sc__g {
font: inherit; font-size: var(--t-sm); font-weight: 600;
padding: 3px 9px; min-height: 32px;
border: 1px solid var(--rule-strong); border-radius: var(--radius);
background: var(--surface); color: var(--ink); cursor: pointer;
}
.sc__g[aria-pressed="true"] {
background: var(--signal-tint); border-color: var(--signal); color: var(--signal);
}
.sc .sc__px { display: block; font-weight: 600; }
.sc .sc__r { display: block; font-size: var(--t-xs); opacity: .8; }
/* ==========================================================================
WOULD YOU HAVE HELD?
A game inside an editorial site. It gets warmth and scale without getting a
different visual language: same serif for the questions, same tokens, same
restraint. The only new idea is that one element at a time is large.
========================================================================== */
.qz { margin: var(--s-6) 0; min-height: 22rem; }
.qz__load { color: var(--muted); }
.qz__prog { display: flex; align-items: center; gap: var(--s-4); margin: 0 0 var(--s-5); }
.qz__step {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
font-weight: 700; color: var(--muted); white-space: nowrap;
}
.qz__bar { flex: 1; height: 2px; background: var(--rule); position: relative; }
.qz__bar span {
position: absolute; inset: 0 auto 0 0; background: var(--signal);
transition: width .3s ease;
}
.qz__eyebrow {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
font-weight: 700; color: var(--signal); margin: 0 0 var(--s-2);
}
.qz__q {
font-family: var(--ws-serif); font-size: var(--t-2xl); line-height: 1.22;
font-weight: 700; margin: 0 0 var(--s-5); max-width: 24ch;
}
.qz__now { color: var(--down); }
.qz__type {
font-family: var(--ws-serif); font-size: var(--t-3xl); line-height: 1.15;
margin: 0 0 var(--s-3);
}
.qz__line { font-size: var(--t-md); color: var(--ink-2); max-width: 46ch; }
.qz__ask { font-size: var(--t-md); margin: var(--s-5) 0; max-width: 54ch; }
.qz__note { font-size: var(--t-sm); color: var(--muted); max-width: 56ch; }
.qz__pred {
border-left: 3px solid var(--signal); background: var(--signal-tint);
padding: var(--s-4) var(--s-5); margin: var(--s-5) 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.qz__predk {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
font-weight: 700; color: var(--signal); margin: 0 0 4px;
}
.qz__predv { margin: 0; font-size: var(--t-md); }
.qz__opts { display: grid; gap: var(--s-2); margin: var(--s-4) 0; }
.qz__opts--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.qz__opt {
display: block; width: 100%; text-align: left;
font: inherit; font-size: var(--t-base);
padding: 14px 16px; min-height: 52px;
background: var(--surface); color: var(--ink);
border: 1px solid var(--rule-strong); border-radius: var(--radius);
cursor: pointer; transition: border-color .12s, background .12s, transform .12s;
}
.qz__opt:hover { border-color: var(--signal); background: var(--signal-tint); transform: translateY(-1px); }
.qz__optt { display: block; font-weight: 700; }
.qz__optd { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }
/* the price path */
.sk { margin: var(--s-4) 0; }
.sk svg { width: 100%; height: 170px; display: block; }
.sk__cap { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-2); }
.qz__grid {
display: grid; gap: var(--s-2); margin: var(--s-5) 0;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.qz__cell {
border: 1px solid var(--rule); border-radius: var(--radius);
padding: var(--s-3); background: var(--surface);
}
.qz__cell.is-mine { border-color: var(--signal); border-width: 2px; }
.qz__cell.is-best { background: var(--up-tint); }
.qz__ck {
display: block; font-size: var(--t-xs); text-transform: uppercase;
letter-spacing: .05em; color: var(--muted); font-weight: 700;
}
.qz__cv {
display: block; font-size: var(--t-lg); font-weight: 700;
font-variant-numeric: tabular-nums; margin-top: 2px;
}
.qz__score {
display: grid; gap: var(--s-3); margin: var(--s-5) 0;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.qz__sc { border-top: 2px solid var(--rule-strong); padding-top: var(--s-2); }
.qz__sck {
display: block; font-size: var(--t-xs); text-transform: uppercase;
letter-spacing: .05em; color: var(--muted);
}
.qz__scv {
display: block; font-size: var(--t-2xl); font-weight: 700;
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.qz__scv.is-up { color: var(--up); }
.qz__scv.is-down { color: var(--down); }
@media (max-width: 640px) {
.qz__q { font-size: var(--t-xl); }
.qz__type { font-size: var(--t-2xl); }
.qz__opts--4 { grid-template-columns: minmax(0, 1fr); }
.sk svg { height: 140px; }
}
/* ==========================================================================
* NEWSLETTER SIGN-UP
*
* .nl__form used to be the flex row itself. It is now the