/* =============================================================
Hedonic Intelligence v3 — Production Design System
"editorial_luxury" direction, applied across the whole site: FT
Weekend / Pentagram treatment of the site's existing cream-and-gold
identity, pushed to real type-scale contrast: h1 runs 3.4-8.5rem
(was a single 2.6-4.5rem band), JetBrains Mono is promoted from
footnote duty to genuine display duty for every numeral, an 8px
base grid governs an alternating tight/spread section rhythm, and
the outer canvas widens to 1360px specifically so elements have
room to break their column on purpose. Everything in this file is
additive to the prior system unless a comment below says
otherwise: colors/contrast pairs already AA-verified stay
untouched, only scale, space, corner treatment and numeral
typography move. This file carries the chart-art/component layer
for the whole site, not just one candidate page: sharp corners +
the real --rule-editorial hairline replace rounded/translucent
card chrome across the shared stat-card family, and hero/stat
numerals convert from serif to tabular mono display type
site-wide.
Direction: Instrument x Journal (elevated)
Typographer: Source Serif 4 (optical sizing) + Inter + JetBrains Mono
Motion: GPU-cheap scroll-reveal, counter animations, prefers-reduced-motion safe
Color: layered tonal surfaces, dark instrument panels, AA-compliant gold
Data-viz: bespoke SVG/CSS treatments, tabular numerals, confidence intervals
Breakpoints: 380px · 680px · 900px · 1080px · 1280px
No em-dashes anywhere in copy.
DEPLOY NOTE: this file has no build-time fingerprinting, so its
cache-busting depends entirely on the Cache-Control header the
server attaches to /site.css. Local dev serving has been observed
sending Last-Modified with no Cache-Control or ETag, which lets a
browser reuse a stale cached copy against heuristic freshness even
after a deploy renames/adds classes. This file cannot set its own
response headers; confirm vercel.json (owned separately, not this
file) sends `Cache-Control: public, max-age=0, must-revalidate`
for /site.css so every load revalidates via ETag/Last-Modified
instead of trusting a heuristic. Do not assume Vercel's default
matches the local dev server's behavior; verify directly against
a deploy.
============================================================= */
/* ============================================================
0. CUSTOM PROPERTIES — DESIGN TOKENS
============================================================ */
:root {
/* --- Canvas surfaces (light, layered depth) --- */
--paper: #F5F2EC; /* base warm cream */
--paper-2: #EFEAE0; /* section alternate */
--paper-3: #E6E0D2; /* input backgrounds, tracks */
--paper-4: #DDD6C6; /* deepest light surface, hairlines */
--white: #FCFBF7; /* card surface, nav */
/* --- Ink scale --- */
--ink: #171614; /* primary text */
--ink-2: #2C2920; /* body text */
--ink-3: #4B4640; /* secondary labels */
--ink-4: #6A6358; /* muted labels */
--ink-5: #A09890; /* subdued UI */
/* --- Gold accent — ONE accent, used with discipline --- */
--gold: #A8842B; /* primary gold (icons, rules, fills) */
--gold-ink: #6E561B; /* AA-contrast gold on white (#FCFBF7): ~5.4:1 */
--gold-mid: #8A6E22; /* mid gold for focus rings on paper */
--gold-soft: rgba(168,132,43,.10);
--gold-line: rgba(168,132,43,.22);
--gold-line-2: rgba(168,132,43,.38);
/* --- Signal colors — data only, never decorative --- */
--signal-up: #2F5D4F; /* forest: improvement, low churn */
--signal-up-bg: rgba(47,93,79,.08);
--signal-down: #7A1F2B; /* oxblood: churn, friction, loss */
--signal-down-bg: rgba(122,31,43,.08);
--signal-mid: #7A5A3A; /* amber-brown: mid-severity tier (between --signal-down and neutral) */
--signal-up-dark: #6FBFA4; /* --signal-up, lightened for dark/instrument backgrounds */
--signal-down-dark: #E07085; /* --signal-down, lightened for dark/instrument backgrounds */
/* --- Instrument panel (dark sections) --- */
--inst-bg: #111009; /* deepest instrument surface */
--inst-bg-2: #1A1814; /* card surfaces on dark */
--inst-bg-3: #242018; /* raised instrument cells */
--inst-rule: rgba(255,248,225,.06);
--inst-rule-2: rgba(255,248,225,.10);
--inst-text: #E8E2D4; /* primary on dark */
--inst-text-2: #C0B8A8; /* secondary on dark */
--inst-text-3: #8C8578; /* muted on dark */
--inst-gold: #C9A95A; /* gold on dark surfaces */
--inst-gold-2: #E0C878; /* brighter gold, accent only */
/* 2026-07-12 harmony pass: names the exact rgba benchmark.html's CTA-rung
hover border already used as a bare, matching-but-untokenized literal
(harmony spec §2.3's named risk: "a future gold retune fixes one and
silently misses the other"). Same C9A95A as --inst-gold, at the
opacity that page's local rule already rendered at. */
--inst-gold-line: rgba(201,169,90,.28);
/* --- Semantic --- */
--ink-blue: #3A5A88;
/* --- Hairlines / rules --- */
--rule: rgba(23,22,20,.09);
--rule-2: rgba(23,22,20,.14);
--rule-3: rgba(23,22,20,.22);
--rule-4: rgba(23,22,20,.32);
/* --- editorial_luxury additive tokens (2026-07-12, site-wide) ---
Nothing above this block is retuned. Three new tokens only, all
independently contrast-verified (bt_editorial_tokens.py, all PASS;
re-verified again at rollout, 4.56-13.90:1 across every paired
background below):
1. --paper-warm: a deeper, warmer cream for full-bleed "spread"
sections (the statement-spread archetype), one visible step past
--paper-2/-3, stopping short of --paper-4's hairline tier.
2. --rule-editorial: a REAL, opaque hairline (not another rgba on
the --rule scale) for structural rules that need to read as
print furniture, not a barely-there wash. Reused verbatim from
--paper-4, a value this codebase already computed and verified
as its "hairlines" surface, not re-guessed.
3. --ink-margin: the marginalia/footnote voice for margin notes and
hanging numerals. Warmer hue than --ink-4 (R-B gap 97 vs 18),
pinned to the exact same relative luminance (0.1269) so it
clears the identical 4.5:1 body-text floor on --paper (5.31:1,
matching --ink-4 to 2 decimal places by construction). */
--paper-warm: #EAE1CC;
--rule-editorial: var(--paper-4);
--ink-margin: #8F562E;
/* --- Typography --- */
--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
--mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
/* --- Optical sizing shorthand (Source Serif 4 supports font-optical-sizing) --- */
--display-opsz: 60; /* for very large headline text */
--text-opsz: 18; /* for body-scale text */
--caption-opsz: 12; /* for small labels */
/* --- Tabular numerals — critical for data readouts --- */
--tnum: "tnum", "lnum";
/* --- Spatial rhythm ---
editorial_luxury: --maxw widened 1160 -> 1360px (within the brief's
1320-1400 band). --maxw-text is UNTOUCHED on purpose: the reading
column stays exactly as narrow/legible as it was, only the outer
canvas gains room, specifically so hero panels and "statement
spread" sections have somewhere to bleed to. 8px base grid: every
new spacing value below resolves to a multiple of --space-1;
pre-existing component padding is untouched. */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
--space-12: 96px;
--space-16: 128px;
--space-24: 192px;
--space-32: 256px;
--maxw: 1360px;
--maxw-text: 760px; /* editorial prose column -- unchanged: body/lede barely move */
--r: 6px; /* base radius */
--r-lg: 12px; /* card radius */
--r-xl: 18px; /* panel radius */
/* --- Hero vertical rhythm (2026-07-12 harmony pass; editorial_luxury
nudges the ceiling up slightly for the wider bleed-panel heroes,
still the same shared pair every page's hero/masthead reads). */
--hero-pad-t: clamp(64px, 8vw, 120px);
--hero-pad-b: clamp(64px, 8vw, 112px);
/* --- Section rhythm: alternating tight/spread (space philosophy) ---
Two tiers only, per the brief: tight 96-128px, spread 192-256px.
A third, smaller "minimal" tier is used sparingly (collapsed
accordions, demoted notify bars) as a deliberate third beat, never
adjacent to itself. */
--rhythm-tight: clamp(var(--space-12), 11vw, var(--space-16));
--rhythm-spread: clamp(var(--space-24), 20vw, var(--space-32));
--rhythm-minimal: clamp(44px, 6vw, 72px);
/* --- Elevation shadows --- */
--sh-xs: 0 1px 2px rgba(23,22,20,.06);
--sh: 0 1px 3px rgba(23,22,20,.07), 0 6px 20px rgba(23,22,20,.09);
--sh-md: 0 2px 6px rgba(23,22,20,.06), 0 16px 44px rgba(23,22,20,.13);
--sh-lg: 0 3px 10px rgba(23,22,20,.07), 0 28px 72px rgba(23,22,20,.17);
--sh-inst: 0 2px 8px rgba(0,0,0,.35), 0 20px 56px rgba(0,0,0,.42);
--sh-gold: 0 0 0 1px var(--gold-line-2), 0 4px 16px rgba(168,132,43,.15);
/* --- Motion --- */
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-data: cubic-bezier(.2, .7, .2, 1);
--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
/* --- Transitions --- */
--t-fast: .12s;
--t-base: .18s;
--t-slow: .28s;
}
/* ============================================================
1. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
overflow-x: clip;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 1.58;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern", "liga", "calt";
font-kerning: normal;
}
@media (max-width: 680px) { body { font-size: 16px; } }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }
ul, ol { list-style: none; }
/* ============================================================
2. LAYOUT
============================================================ */
.wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 680px) { .wrap { padding: 0 20px; } }
@media (max-width: 380px) { .wrap { padding: 0 16px; } }
section {
/* editorial_luxury: base tier = "tight" (96-128px), not "spread".
Spread is the deliberate exception (.spread below), applied only to
the sections the rhythm plan calls out, so two adjacent sections
are never both the default tier by accident. */
padding: var(--rhythm-tight) 0;
}
section.tight {
padding: var(--rhythm-tight) 0;
}
section.spread {
padding: var(--rhythm-spread) 0;
}
section.minimal {
padding: var(--rhythm-minimal) 0;
}
section[id] {
scroll-margin-top: 72px;
}
/* Non-section anchor targets (e.g. #for-am on a mid-section div): same sticky-header
offset as sections, and never land on a pre-reveal invisible block. */
div[id] { scroll-margin-top: 72px; }
.reveal:target { opacity: 1; transform: none; transition: none; }
/* Surface variants */
.alt { background: var(--paper-2); }
.dark { background: var(--inst-bg); color: var(--inst-text); }
.inst { background: var(--inst-bg); color: var(--inst-text); }
/* ============================================================
3. TYPOGRAPHIC SYSTEM
Principle: optical sizing throughout; tabular nums on data;
tight tracking on display, relaxed on body.
============================================================ */
/* --- Display / Hero ---
editorial_luxury: the one deliberately non-uniform jump in the scale.
3.4-8.5rem (was a single 2.6-4.5rem band) -- everything else in this
type system barely moves; h1 is where all the contrast lives. Runs at
weight 400 (was 500): Source Serif 4's fetched range now opens at 300
(was 400, see every page's font ), so the largest sizes can run
light instead of clunking at medium. */
h1, .h1 {
font-family: var(--serif);
font-optical-sizing: auto;
font-size: clamp(3.4rem, 7vw, 8.5rem);
font-weight: 400;
line-height: .98;
letter-spacing: -.028em;
color: var(--ink);
text-wrap: pretty;
}
/* --- Section heads ---
editorial_luxury: a modest bump (was 1.9-3.1rem), not a dramatic one
on purpose -- h1 carries the scale contrast; h2 stays disciplined so
it never competes with it. */
h2, .h2 {
font-family: var(--serif);
font-optical-sizing: auto;
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 500;
line-height: 1.07;
letter-spacing: -.02em;
color: var(--ink);
text-wrap: pretty;
}
/* --- Sub-section heads --- editorial_luxury: barely moves, by design. */
h3, .h3 {
font-family: var(--serif);
font-optical-sizing: auto;
font-size: clamp(1.32rem, 2.15vw, 1.7rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -.012em;
color: var(--ink);
text-wrap: pretty;
}
h4, .h4 {
font-family: var(--serif);
font-optical-sizing: auto;
font-size: clamp(1.1rem, 1.5vw, 1.32rem);
font-weight: 500;
line-height: 1.25;
letter-spacing: -.008em;
}
/* ============================================================
3b. DISPLAY NUMERALS -- "numbers as graphic objects"
editorial_luxury: JetBrains Mono promoted from footnote duty to
genuine display duty. Five size tiers, all tabular, all the same
family already loaded (no new weights fetched: 500 is the heaviest
already-loaded cut, and mono's fixed advance reads substantial at
any of these sizes without needing a bolder file). Discipline rule:
--num-marginal is spent ONCE per screen, full stop; everything else
recedes so that one figure stays legible instead of becoming noise.
============================================================ */
.num-display {
font-family: var(--mono);
font-weight: 500;
font-feature-settings: var(--tnum);
font-variant-numeric: tabular-nums;
line-height: .92;
letter-spacing: -.015em;
color: var(--ink);
}
.num-sm { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.num-md { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.num-lg { font-size: clamp(3.4rem, 6.6vw, 6rem); letter-spacing: -.02em; }
.num-xl { font-size: clamp(4rem, 9vw, 8.5rem); letter-spacing: -.025em; }
.num-marginal { font-size: clamp(5rem, 15vw, 18rem); letter-spacing: -.03em; line-height: .88; }
.num-display.bad { color: var(--signal-down); }
.num-display.good { color: var(--signal-up); }
.num-display.gold { color: var(--gold-ink); }
.dark .num-display, .inst .num-display { color: var(--inst-text); }
.dark .num-display.gold, .inst .num-display.gold { color: var(--inst-gold); }
.dark .num-display.bad, .inst .num-display.bad { color: var(--signal-down-dark); }
.dark .num-display.good, .inst .num-display.good { color: var(--signal-up-dark); }
/* Suffix glyph (%, pp, x, +) riding alongside a display numeral: always
smaller and lighter than the digits, never competing with them. */
.num-suffix {
font-family: var(--mono);
font-weight: 500;
font-feature-settings: var(--tnum);
}
/* --- Eyebrow labels (mono, spaced, editorial) --- */
.eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: #5A4514;
line-height: 1.4;
}
.eyebrow::before {
content: '';
display: inline-block;
width: 3px;
height: 1em;
background: var(--gold);
border-radius: 2px;
flex-shrink: 0;
}
.dark .eyebrow, .inst .eyebrow { color: var(--inst-gold); }
.dark .eyebrow::before, .inst .eyebrow::before { background: var(--inst-gold); }
/* --- Gold italic highlight (used in headlines) --- */
.gold-i {
font-style: italic;
color: var(--gold-ink);
/* subtle text-shadow to lift on paper backgrounds */
}
/* B1 fix (2026-07-11): .gold-i's --gold-ink (#6E561B) is tuned for light
surfaces (~5.4:1 on paper) and drops to ~2.7:1 on dark/instrument
backgrounds, failing WCAG 1.4.3 even at the large-text 3:1 floor.
portugal-500.html and sample-read.html already carried page-local
overrides for this; promoted here once so every dark/.finding-cta-section
surface site-wide (including index.html's #contact and studies.html's
.finding-cta-section) inherits it without per-page duplication. */
.dark .gold-i,
.inst .gold-i,
.finding-cta-section .gold-i,
#contact .gold-i {
color: var(--inst-gold);
}
/* --- Lede (intro paragraph under headlines) --- */
.lede {
font-size: clamp(1.1rem, 1.65vw, 1.35rem);
line-height: 1.52;
color: var(--ink-3);
max-width: 42ch;
text-wrap: pretty;
}
.lede em { font-style: normal; color: var(--ink-2); }
.dark .lede, .inst .lede { color: var(--inst-text-2); }
.dark .lede em, .inst .lede em { color: var(--inst-text); }
/* --- Body copy --- */
p.body {
font-size: 1.04rem;
line-height: 1.64;
color: var(--ink-2);
max-width: 64ch;
text-wrap: pretty;
}
/* --- Data / disclaimer text (monospace, precise) --- */
.dis {
font-family: var(--mono);
font-size: 11.5px;
line-height: 1.52;
color: var(--ink-4);
font-feature-settings: var(--tnum);
}
/* --- Muted utility --- */
.muted { color: var(--ink-4); }
.dark .muted, .inst .muted { color: var(--inst-text-3); }
/* --- Section head scaffold --- */
.section-head {
max-width: var(--maxw-text);
margin-bottom: clamp(44px, 5.5vw, 68px);
}
.section-head .lede {
margin-top: 22px;
max-width: 58ch;
}
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3 { margin-top: 14px; }
/* ============================================================
4. NAVIGATION
============================================================ */
.nav {
position: sticky;
top: 0;
z-index: 60;
background: rgba(245,242,236,.96);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--rule-2);
transition: box-shadow var(--t-base), background var(--t-base);
}
.nav.scrolled {
box-shadow: 0 1px 0 var(--rule-3), 0 2px 20px rgba(23,22,20,.09);
}
.nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
height: 66px;
gap: 20px;
}
@media (max-width: 680px) { .nav .wrap { height: 58px; } }
/* Brand mark + wordmark */
.brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-weight: 600;
font-size: 14px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--ink);
flex-shrink: 0;
}
.brand .soft { color: var(--ink-4); font-weight: 500; }
.brand svg {
width: 24px;
height: 24px;
color: var(--ink);
flex: none;
transition: color var(--t-base);
}
.brand:hover .brand-glyph { color: var(--gold); }
/* Narrow-width wordmark fallback: .brand has flex-shrink:0 and, uncorrected,
is the single largest fixed-width item in the header. Below ~1000px it
starves the promoted Portugal-500 pill (and, once it reappears, the CTA)
of room, pushing them off-screen. Step down in two stages instead of
shrinking text: drop the lighter "Intelligence" half first, then collapse
to icon-only once the four standard nav links are gone too. font-size:0
(not display:none) keeps "Hedonic Intelligence" in the accessible name for
assistive tech while removing it visually. */
@media (max-width: 999px) {
.brand .soft { display: none; }
}
@media (max-width: 649px) {
.brand { gap: 0; font-size: 0; }
}
/* Nav links */
.navlinks {
display: flex;
align-items: center;
gap: 24px;
}
.navlinks a {
font-size: 14px;
font-weight: 500;
color: var(--ink-4);
letter-spacing: .01em;
transition: color var(--t-fast);
position: relative;
}
.navlinks a:hover { color: var(--ink); }
.navlinks a[aria-current="page"] { color: var(--ink); }
/* Underline hover indicator for nav links (not the CTA button) */
.navlinks a:not(.btn)::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -4px;
height: 1.5px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t-base) var(--ease-out);
}
.navlinks a:not(.btn):hover::after { transform: scaleX(1); }
.navlinks a[aria-current="page"]::after { transform: scaleX(1); }
.navlinks a.btn { color: var(--paper); }
.navlinks a.btn:hover { color: var(--paper); }
.navlinks a.btn::after { display: none; }
@media (max-width: 900px) { .navlinks a:not(.btn) { display: none; } }
/* The promoted Portugal-500 nav item: stays visible and on ONE line at every width */
.navlinks a.nav-p500 { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-p500-label { display: inline; }
/* D5 fix 2026-07-11: below 900px the blanket a:not(.btn) rule above hid
4 of 5 primary nav links (Studies, For AM & advisory, Operators, About)
with no hamburger/disclosure menu anywhere in the codebase; only the
footer replicated them, requiring a full scroll to reach. Keep one
more link reachable without a menu; matched by href so no page markup
changes are needed. A proper disclosure menu is a larger, page-touching
fix left to the page owners. */
.navlinks a[href="/studies.html"] { display: inline; }
@media (max-width: 900px) { .navlinks a.nav-p500 { display: inline-flex; } }
@media (max-width: 680px) { .nav-p500 .nav-the { display: none; } }
@media (max-width: 430px) { .nav .navlinks .btn { display: none; } }
/* ============================================================
5. BUTTONS & LINKS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--sans);
font-weight: 600;
font-size: 14.5px;
letter-spacing: .01em;
padding: 12px 22px;
border-radius: var(--r);
background: var(--ink);
color: var(--paper);
border: 1px solid var(--ink);
cursor: pointer;
white-space: nowrap;
transition:
background var(--t-base),
border-color var(--t-base),
box-shadow var(--t-base),
transform var(--t-fast);
position: relative;
}
.btn:hover {
background: var(--gold-ink);
border-color: var(--gold-ink);
transform: translateY(-1px);
box-shadow: var(--sh-md);
}
.btn .arr {
transition: transform var(--t-base) var(--ease-out);
display: inline-block;
}
.btn:hover .arr { transform: translateX(4px); }
/* Gold primary variant */
.btn.gold {
background: var(--gold);
border-color: var(--gold);
color: #1A1508;
}
.btn.gold:hover {
background: #B8922E;
border-color: #B8922E;
}
/* Ghost secondary variant */
.btn.ghost {
background: transparent;
color: var(--ink);
border-color: var(--rule-3);
}
.btn.ghost:hover {
background: var(--white);
border-color: var(--gold-line-2);
color: var(--ink);
}
/* Dark surface overrides */
.dark .btn, .inst .btn {
background: var(--gold);
border-color: var(--gold);
color: #1A1508;
}
.dark .btn:hover, .inst .btn:hover {
background: #C4992C;
border-color: #C4992C;
}
.dark .btn.ghost, .inst .btn.ghost {
background: transparent;
color: var(--inst-text-2);
border-color: rgba(255,248,225,.18);
}
.dark .btn.ghost:hover, .inst .btn.ghost:hover {
background: rgba(255,248,225,.06);
border-color: var(--inst-gold);
color: var(--inst-text);
}
/* Text link style (editorial) */
.tlink {
font-weight: 600;
font-size: 14.5px;
color: var(--gold-ink);
border-bottom: 1.5px solid var(--gold-line-2);
padding-bottom: 1px;
transition: color var(--t-fast), border-color var(--t-fast);
}
.tlink:hover {
border-bottom-color: var(--gold);
color: var(--gold-ink); /* --gold text was 3.13:1 at this size, under the 4.5:1 normal-text floor; border-color still carries the hover affordance */
}
/* Actions row */
.actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-top: 32px;
}
/* ============================================================
6. HERO
============================================================ */
.hero {
/* 2026-07-12 harmony pass: sourced from --hero-pad-t/--hero-pad-b
(section 0) instead of restating the clamp() literally -- see the
token comment there and 38.5 below for the two page-local heroes
(.pt500-hero, .masthead) that now read the same two numbers. */
padding-top: var(--hero-pad-t);
padding-bottom: var(--hero-pad-b);
}
/* BUGFIX 2026-07-12 (founder defect: heroes overflow the first screen).
Root cause of the earlier failed pass: it verified against a raw
768px viewport, which does not exist in a real browser -- chrome
(URL bar, tabs) plus 125% Windows scaling eats 120-180px, so the
true inner-viewport set a shipped laptop renders is closer to
1280x610 / 1366x635 / 1536x730 / 1920x940 (desktop) and 375x660 /
375x812 (mobile Safari/webview). --hero-pad-t/--hero-pad-b feed
every var()-based hero (.hero here -- index.html, sample-read.html
-- and any future page that opts in); compressing the tokens
height-responsively compresses every consumer at once. 940px and
730px (the two tallest entries in the set) are treated as "the
generous, uncompressed screen" and are handled by the base clamps
above; these two tiers only engage under 700px, where the base
padding alone can no longer fit a hero's content above the fold. */
@media (max-height: 700px) {
:root {
--hero-pad-t: clamp(28px, 4vh, 48px);
--hero-pad-b: clamp(24px, 3.5vh, 40px);
}
}
@media (max-height: 640px) {
:root {
--hero-pad-t: clamp(22px, 3.4vh, 36px);
--hero-pad-b: clamp(18px, 2.8vh, 30px);
}
}
.hero .wrap {
display: grid;
grid-template-columns: 1fr;
gap: clamp(44px, 6vw, 80px);
align-items: start;
}
@media (min-width: 820px) {
.hero .wrap {
grid-template-columns: 1fr 1fr;
align-items: center;
}
}
.hero h1 { max-width: 15ch; }
.hero .lede {
margin-top: 24px;
font-family: var(--serif);
font-optical-sizing: auto;
font-size: clamp(1.12rem, 1.65vw, 1.38rem);
color: var(--ink-3);
line-height: 1.4;
max-width: 44ch;
text-wrap: pretty;
}
.hero .lede em { font-style: normal; color: var(--ink-2); }
/* Heronote: monospace credential line */
.heronote {
font-family: var(--mono);
font-size: 13.5px;
color: var(--ink-3);
margin-top: 20px;
max-width: 50ch;
line-height: 1.5;
}
/* ============================================================
7. HERO INSTRUMENT PANEL (right column)
The flagship dark readout card in the hero — the soul of
the "instrument" aesthetic.
============================================================ */
.hero-panel {
background: var(--inst-bg);
border: 1px solid var(--inst-rule-2);
border-radius: var(--r-xl);
padding: clamp(28px, 4vw, 44px);
box-shadow: var(--sh-inst);
position: relative;
overflow: hidden;
}
/* Subtle grain texture via SVG filter */
.hero-panel::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.hero-panel > * { position: relative; z-index: 1; }
/* Applies on every dark instrument panel (hero, benchmark, value-verdict flagship),
not only .hero-panel: keeps the eyebrow gold-visible and spaces the live-dot. */
.hp-eyebrow {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--inst-gold);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
/* Blinking cursor dot to signal "live" data */
.hp-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--inst-gold);
display: inline-block;
animation: blink 2.4s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: .22; }
}
/* Two-cell comparison readout */
.hp-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--inst-rule-2);
border: 1px solid var(--inst-rule-2);
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
.hp-cell {
background: var(--inst-bg-3);
padding: 20px 16px;
position: relative;
}
.hp-cell .hpc-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--inst-text-3);
margin-bottom: 10px;
line-height: 1.3;
}
.hp-cell .hpc-num {
/* editorial_luxury: promoted to the display-mono numeral system
(was serif) -- every hero/stat readout on the site now converges
on the same tabular-mono treatment, "numbers as graphic objects." */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: clamp(2.1rem, 3.8vw, 2.9rem);
line-height: 1;
margin-bottom: 5px;
font-feature-settings: var(--tnum);
letter-spacing: -.02em;
}
.hp-cell.bad .hpc-num { color: var(--signal-down-dark); }
.hp-cell.good .hpc-num { color: var(--signal-up-dark); }
.hp-cell .hpc-sub {
font-size: 11.5px;
color: var(--inst-text-2); /* inst-text-3 on inst-bg-3 was 4.43:1, just under the 4.5:1 AA floor at this size */
line-height: 1.35;
}
/* Hairline accent top edge on each cell */
.hp-cell.bad::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--signal-down-dark), rgba(224,112,133,.53));
border-radius: 8px 0 0 0;
}
.hp-cell.good::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--signal-up-dark), rgba(111,191,164,.53));
}
.hp-body {
font-size: .93rem;
line-height: 1.55;
color: var(--inst-text-2);
}
.hp-body b { color: var(--inst-text); font-weight: 600; }
.hp-denom {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--inst-rule);
font-family: var(--mono);
font-size: 10px;
color: var(--inst-text-3);
line-height: 1.5;
font-feature-settings: var(--tnum);
}
/* ============================================================
8. TRUST BAND (four-stat proof row)
============================================================ */
.trust {
padding: clamp(28px, 4vw, 44px) 0;
background: var(--paper);
border-top: 1px solid var(--rule-2);
border-bottom: 1px solid var(--rule-2);
}
.trust .band {
/* editorial_luxury: sharp corners + real hairline seams (was rounded
+ translucent --rule-2 + drop shadow) */
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--rule-editorial);
border: 1px solid var(--rule-editorial);
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
@media (min-width: 760px) {
.trust .band { grid-template-columns: repeat(4, 1fr); }
}
.tstat {
background: var(--white);
padding: 26px 24px;
transition: background var(--t-base);
}
.tstat:hover { background: var(--paper); }
.tstat .n {
/* editorial_luxury: mono display numeral (was serif); .tstat.qual .n
below keeps its own sans override for genuinely qualitative cells
(text, not a number), unaffected by this. */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: clamp(1.3rem, 2.5vw, 1.95rem);
color: var(--ink);
line-height: 1.1;
font-feature-settings: var(--tnum);
letter-spacing: -.015em;
}
.tstat .l {
font-size: 13px;
color: var(--ink-4);
margin-top: 7px;
line-height: 1.4;
}
/* Qualitative cells: sans-serif to distinguish from numeric cells */
.tstat.qual .n {
font-family: var(--sans);
font-size: clamp(1rem, 1.55vw, 1.25rem);
font-weight: 600;
letter-spacing: -.005em;
}
@media (max-width: 560px) {
.tstat { padding: 18px 16px; }
.tstat .l { font-size: 12px; }
}
/* ============================================================
9. CHURN DIVERGENCE BAR CHART
The signature "gap" visualization. Ranked bars, confidence
intervals, convergence coda.
============================================================ */
.conceal-viz {
margin: clamp(36px, 5vw, 58px) 0 0;
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
background: var(--white);
padding: clamp(28px, 4vw, 52px);
box-shadow: var(--sh-md);
position: relative;
}
/* Top-left hairline gold accent */
.conceal-viz::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 56px; height: 3px;
background: var(--gold);
border-radius: var(--r-lg) 0 0 0;
}
.conceal-note {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-4);
margin-top: 18px;
line-height: 1.52;
font-feature-settings: var(--tnum);
}
/* ============================================================
DISCLOSURE-TRIGGER MARKERS (site audit 2026-07-11)
Four triggers site-wide had no ::after/::before indicator
at all beyond cursor:pointer, unlike every other disclosure on the
site (#faq, summary.hp-denom, .stat-toggle, portugal-500.html's
page-wide rule). Selectors below are each scoped to markup unique to
a single page (verified: .conceal-note only exists in index.html;
.deliver, .anatomy-nav and #section-friction ditto) so this can't
leak onto benchmark.html / portugal-500.html / studies.html, which
already define their own equal-or-higher-specificity marker rules
inline. The two index.html triggers also measured 16.7px / 17.4px
tall (under the WCAG 2.5.8 AA 24px floor), so they get the padding
bump too; sample-read.html's pair already clear 24px.
============================================================ */
summary.conceal-note,
.deliver details summary,
.anatomy-nav + details summary,
#section-friction details summary {
list-style: none;
}
summary.conceal-note::-webkit-details-marker,
.deliver details summary::-webkit-details-marker,
.anatomy-nav + details summary::-webkit-details-marker,
#section-friction details summary::-webkit-details-marker {
display: none;
}
summary.conceal-note::after,
.deliver details summary::after,
.anatomy-nav + details summary::after,
#section-friction details summary::after {
content: ' +';
font-family: var(--mono);
font-size: 10px;
color: var(--gold-ink);
letter-spacing: .05em;
opacity: .8;
}
details[open] > summary.conceal-note::after,
.deliver details[open] > summary::after,
.anatomy-nav + details[open] > summary::after,
#section-friction details[open] > summary::after {
content: ' \2212';
}
/* Touch-target floor: bring the two undersized index.html triggers up
to the ~40px comfort height already used elsewhere on the site. */
summary.conceal-note,
.deliver details summary {
padding: 12px 0;
}
/* Bar chart */
.rank-chart { width: 100%; }
.rc-axis-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 22px;
display: flex;
align-items: center;
gap: 8px;
}
/* Axis label hairline left marker */
.rc-axis-label::before {
content: '';
display: inline-block;
width: 14px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
}
.rc-row {
display: grid;
grid-template-columns: 140px 1fr 100px;
align-items: center;
gap: 16px;
margin-bottom: 18px;
opacity: 0;
transform: translateY(6px);
transition:
opacity .5s var(--ease-out),
transform .5s var(--ease-out);
}
.rc-row.visible {
opacity: 1;
transform: none;
}
@media (max-width: 680px) {
.rc-row {
grid-template-columns: 1fr;
gap: 6px;
margin-bottom: 20px;
}
.rc-row .rc-ci { display: none; }
}
.rc-tier {
display: flex;
flex-direction: column;
gap: 2px;
text-align: right;
justify-content: flex-end;
align-items: flex-end;
}
@media (max-width: 680px) {
.rc-tier {
flex-direction: row;
align-items: baseline;
gap: 8px;
text-align: left;
justify-content: flex-start;
align-items: flex-end;
}
}
.rc-tier-name {
font-family: var(--sans);
font-size: 13.5px;
font-weight: 600;
color: var(--ink-2);
line-height: 1.2;
letter-spacing: -.005em;
}
.rc-stars {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
letter-spacing: .06em;
}
.rc-track-wrap {
display: flex;
align-items: center;
gap: 14px;
}
.rc-track {
/* editorial_luxury: sharp rectangular ends (was a soft 3px radius),
chart-art rule: no rounded pill on any comparison bar. */
flex: 1;
height: 30px;
background: var(--paper-3);
border-radius: 0;
position: relative;
overflow: visible;
}
/* CI whisker overlay */
.rc-track::after {
content: attr(data-ci-max);
/* whisker rendered via JS into ::after pseudoelement */
}
.rc-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
border-radius: 0;
transition: width 1.2s var(--ease-data);
will-change: width;
}
/* Tier fills: single interpolated hue ramp from --signal-down to --signal-up
(HSL-lerped, short arc through amber/olive, not RGB-lerped through grey),
so four ordered severity tiers read as strictly ordinal at a glance instead
of mixing a flat gradient, a bespoke brown, and an unrelated neutral grey.
Fixed 2026-07-10, expert-board fix: endpoints unchanged, exact values match
--signal-down/--signal-up; #706225 and #39662A are the computed t=1/3, t=2/3
midpoints. This chart is used on both index.html and studies.html. */
.rc-fill-lux { background: var(--signal-down); }
.rc-fill-mid { background: #706225; }
.rc-fill-mid2 { background: #39662A; }
.rc-fill-ms { background: var(--signal-up); }
/* CI whisker: absolute-positioned hairline + endpoint ticks */
.rc-ci-bar {
position: absolute;
top: 50%;
height: 2px;
background: rgba(23,22,20,.28);
transform: translateY(-50%);
pointer-events: none;
}
.rc-ci-bar::before, .rc-ci-bar::after {
content: '';
position: absolute;
top: -4px; bottom: -4px;
width: 1.5px;
background: inherit;
}
.rc-ci-bar::before { left: 0; }
.rc-ci-bar::after { right: 0; }
/* Value readout */
.rc-val {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 18px;
font-weight: 500;
color: var(--ink);
white-space: nowrap;
min-width: 52px;
flex-shrink: 0;
font-feature-settings: var(--tnum);
letter-spacing: -.01em;
}
.rc-val-lux { color: var(--signal-down); font-weight: 500; }
.rc-val-ms { color: var(--signal-up); font-weight: 500; }
/* CI text column */
.rc-ci {
font-family: var(--mono);
font-size: 10.5px;
color: var(--ink-4);
white-space: nowrap;
line-height: 1.4;
font-feature-settings: var(--tnum);
}
@media (max-width: 760px) { .rc-ci { display: none; } }
/* Convergence coda */
.rc-coda { margin-top: 24px; }
.rc-coda-rule {
height: 1px;
background: var(--rule-3);
margin-bottom: 18px;
position: relative;
}
/* Small convergence label on the rule */
.rc-coda-rule::after {
content: 'RATING 10';
position: absolute;
right: 0; top: -9px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .12em;
color: var(--ink-4);
}
.rc-coda-inner {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 14px;
}
.rc-coda-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-4);
}
.rc-coda-stat {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: 1.45rem;
color: var(--gold-ink);
line-height: 1;
font-feature-settings: var(--tnum);
letter-spacing: -.01em;
}
.rc-coda-sub {
font-family: var(--mono);
font-size: 10.5px;
color: var(--ink-4);
flex-basis: 100%;
margin-top: 4px;
line-height: 1.45;
}
/* ============================================================
10. INSTRUMENT PANEL (dark, data-focused sections)
Used for signature finding readouts, dark hero variants.
============================================================ */
.instrument-panel {
background: var(--inst-bg-2);
border: 1px solid var(--inst-rule-2);
border-radius: var(--r-xl);
padding: clamp(28px, 4vw, 52px);
box-shadow: var(--sh-inst);
position: relative;
overflow: hidden;
}
/* Scanner-line animation */
@keyframes scanline {
0% { top: 0%; opacity: .6; }
100% { top: 100%; opacity: 0; }
}
.instrument-panel::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--inst-gold) 40%, var(--inst-gold-2) 60%, transparent);
opacity: 0;
top: 0;
animation: scanline 6s ease-in-out infinite;
pointer-events: none;
}
/* Headline stat readout inside instrument panel */
.ip-stat {
/* editorial_luxury: mono display numeral (was serif) -- the single
highest-visibility instance of the "numbers as graphic objects"
system: every page's dark flagship stat now reads this way. */
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: clamp(3.2rem, 7vw, 5.8rem);
font-weight: 500;
line-height: .95;
letter-spacing: -.03em;
font-feature-settings: var(--tnum);
color: var(--inst-text);
}
.ip-stat.bad { color: var(--signal-down-dark); }
.ip-stat.good { color: var(--signal-up-dark); }
.ip-stat.gold { color: var(--inst-gold); }
.ip-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--inst-text-3);
margin-bottom: 12px;
}
.ip-ci {
font-family: var(--mono);
font-size: 11px;
color: var(--inst-text-3);
margin-top: 8px;
font-feature-settings: var(--tnum);
}
/* ============================================================
11. VALUE-VERDICT SPLIT (57% vs 2.7%)
Signature bespoke data visualization.
============================================================ */
.vv-split {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: center;
margin: clamp(32px, 5vw, 52px) 0;
max-width: 660px;
}
@media (max-width: 560px) {
.vv-split { gap: 8px; }
}
.vv-col { text-align: center; }
.vv-col .vc-num {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: clamp(2.8rem, 5.5vw, 4.2rem);
line-height: 1;
margin-bottom: 6px;
font-feature-settings: var(--tnum);
letter-spacing: -.025em;
position: relative;
}
/* Counter animation wrapper */
.vc-num[data-target] .vc-counter {
display: inline-block;
}
.vv-col .vc-num.bad { color: var(--signal-down); }
.vv-col .vc-num.good { color: var(--signal-up); }
.vv-col .vc-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 4px;
}
.vv-col .vc-sub {
font-size: 12.5px;
color: var(--ink-3);
margin-top: 5px;
line-height: 1.35;
}
.vv-ci {
font-family: var(--mono);
font-size: 10.5px;
color: var(--ink-4);
margin-top: 4px;
font-feature-settings: var(--tnum);
}
.vv-vs-sep {
font-family: var(--serif);
font-optical-sizing: auto;
font-size: 2rem;
color: var(--ink-4);
text-align: center;
letter-spacing: -.02em;
}
/* Dark variant */
.dark .vv-col .vc-num.bad { color: var(--signal-down-dark); }
.dark .vv-col .vc-num.good { color: var(--signal-up-dark); }
.dark .vv-vs-sep { color: var(--inst-text-3); }
/* ============================================================
12. FINDING CARDS (benchmark + value-verdict pages)
============================================================ */
.cards {
/* editorial_luxury: sharp corners + real hairline seams (was rounded
+ translucent --rule-2) -- the repeated stat-card grid the site's
own diagnosis named as the "monotonous rhythm" problem now reads as
print furniture: a ruled table of findings, not a rack of app cards. */
display: grid;
grid-template-columns: 1fr;
gap: 2px;
margin-top: 44px;
border: 1px solid var(--rule-editorial);
background: var(--rule-editorial);
border-radius: 0;
overflow: hidden;
}
@media (min-width: 820px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) {
#hiding .cards { grid-template-columns: repeat(4, 1fr); }
}
.fcard {
background: var(--white);
padding: clamp(28px, 4vw, 46px);
transition: background var(--t-base);
position: relative;
}
.fcard:hover { background: #FDFCF9; }
/* Gold accent hairline top on hover */
.fcard::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t-slow) var(--ease-out);
}
.fcard:hover::before { transform: scaleX(1); }
.fcard .fnum {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: clamp(2.3rem, 4.8vw, 3.4rem);
color: var(--ink);
line-height: 1;
font-feature-settings: var(--tnum);
letter-spacing: -.025em;
}
.fcard .fnum span {
font-size: .55em;
color: inherit;
letter-spacing: -.01em;
}
#finding-save .fnum,
#finding-save .fnum span { color: var(--gold-ink); }
.fcard h3 {
font-family: var(--serif);
font-optical-sizing: auto;
font-weight: 500;
font-size: clamp(1.3rem, 2.1vw, 1.7rem);
line-height: 1.18;
margin: 14px 0;
letter-spacing: -.01em;
}
.fcard p {
font-size: 1.01rem;
line-height: 1.58;
color: var(--ink-2);
}
.fcard .vq {
font-family: var(--serif);
font-style: italic;
font-optical-sizing: auto;
font-size: 1.06rem;
line-height: 1.44;
color: var(--ink);
border-left: 2.5px solid var(--gold);
padding-left: 18px;
margin: 16px 0;
}
.fcard .src {
display: block;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-4);
margin-top: 12px;
font-feature-settings: var(--tnum);
}
/* ============================================================
13. STAT CARDS (tile component)
============================================================ */
.tile {
/* editorial_luxury: sharp corners + real hairline (was rounded card) */
background: var(--white);
border: 1px solid var(--rule-editorial);
border-radius: 0;
padding: 28px;
box-shadow: none;
transition: box-shadow var(--t-base), transform var(--t-base);
}
.tile:hover {
box-shadow: var(--sh-md);
transform: translateY(-1px);
}
.tile .k {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--gold-ink);
margin-bottom: 12px;
}
.tile h3, .tile h4 {
font-family: var(--serif);
font-optical-sizing: auto;
font-weight: 500;
font-size: 1.22rem;
line-height: 1.22;
margin: 0 0 10px;
letter-spacing: -.008em;
}
.tile p {
font-size: .97rem;
line-height: 1.56;
color: var(--ink-2);
}
/* ============================================================
14. BAR COMPARISON CHARTS (lbars + bar-compare)
============================================================ */
.bar-compare { max-width: 520px; margin-top: 28px; }
.bar-row {
display: grid;
grid-template-columns: 104px 1fr 54px;
align-items: center;
gap: 14px;
margin-bottom: 13px;
}
.bar-row .br-label {
font-size: 13.5px;
color: var(--ink-2);
text-align: right;
}
.bar-row .br-track {
height: 22px;
background: var(--paper-3);
border-radius: 3px;
position: relative;
overflow: hidden;
}
.br-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
border-radius: 3px;
transition: width 1.15s var(--ease-data);
will-change: width;
}
.br-fill.down { background: var(--signal-down); }
.br-fill.up { background: var(--signal-up); }
.bar-row .br-val {
font-family: var(--serif);
font-optical-sizing: auto;
font-size: 17px;
color: var(--ink);
font-feature-settings: var(--tnum);
}
/* Larger bar chart (lbars used in benchmark) */
.lbars { display: flex; flex-direction: column; gap: 11px; margin: 18px 0; max-width: 480px; }
.lbar {
display: grid;
grid-template-columns: 78px 1fr 44px;
align-items: center;
gap: 13px;
}
.lbar .k { font-size: 13.5px; color: var(--ink-2); text-align: right; }
.lbar .tr {
height: 22px;
background: var(--paper-3);
border-radius: 3px;
position: relative;
}
.lbar .fl {
position: absolute;
left: 0; top: 0; bottom: 0;
/* 2026-07-12 harmony pass: was --ink-4 (bare .fl) / --ink-blue (.lo),
neither a signal token -- the harmony spec's fill-bar audit names
this exact pair as "not signal tokens at all." .lbar/.lbars is not
referenced by any page's markup today (checked index, studies,
portugal-500, benchmark, sample-read, privacy), so this has zero
live-rendering effect; mapped to the site's standing polarity
convention (unmarked bar = the notable/down reading, matching
.dcard/.mech-card's default; .lo = the better/up reading) so the
component is signal-correct if/when a page adopts it. */
background: var(--signal-down);
border-radius: 3px;
transition: width 1.1s var(--ease-data);
}
.lbar.lo .fl { background: var(--signal-up); }
.lbar .vv { font-family: var(--serif); font-size: 17px; color: var(--ink); font-feature-settings: var(--tnum); }
@media (max-width: 560px) {
#finding-rival-leak .src {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
}
}
/* ============================================================
15. MECHANISM SECTION (wrong fix / right read cards)
============================================================ */
.mech-split {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 3vw, 40px);
margin-top: clamp(36px, 5vw, 58px);
}
@media (min-width: 840px) {
.mech-split { grid-template-columns: 1fr 1fr; align-items: start; }
}
.mech-card {
/* editorial_luxury: sharp corners + real hairline (was rounded card);
the signal-colored left border below (mc-wrong/mc-right) keeps sole
ownership of that edge's color, doing real semantic work. */
background: var(--white);
border: 1px solid var(--rule-editorial);
border-radius: 0;
padding: 32px;
box-shadow: none;
position: relative;
overflow: hidden;
}
/* Left-edge signal hairline */
.mech-card.mc-wrong {
border-left: 3px solid var(--signal-down);
}
.mech-card.mc-right {
border-left: 3px solid var(--signal-up);
}
.mech-card .mc-eye {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 12px;
}
.mech-card.mc-wrong .mc-eye { color: var(--signal-down); }
.mech-card.mc-right .mc-eye { color: var(--signal-up); }
.mech-card h3, .mech-card h4 {
font-family: var(--serif);
font-optical-sizing: auto;
font-weight: 500;
font-size: 1.3rem;
line-height: 1.21;
margin-bottom: 14px;
letter-spacing: -.01em;
}
.mech-card p { font-size: .97rem; line-height: 1.58; color: var(--ink-2); }
.mech-card .mc-stat {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: clamp(2rem, 3.8vw, 2.7rem);
line-height: 1;
margin-top: 20px;
margin-bottom: 4px;
font-feature-settings: var(--tnum);
letter-spacing: -.02em;
}
.mech-card.mc-wrong .mc-stat { color: var(--signal-down); }
.mech-card.mc-right .mc-stat { color: var(--signal-up); }
.mech-card .mc-denom {
font-family: var(--mono);
font-size: 10.5px;
color: var(--ink-4);
font-feature-settings: var(--tnum);
}
/* ============================================================
16. DECLINE CARDS GRID (four-up facts)
============================================================ */
.decline-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: clamp(36px, 5vw, 54px);
}
@media (min-width: 500px) { .decline-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .decline-grid { grid-template-columns: repeat(4, 1fr); } }
.dcard {
background: var(--white);
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
padding: 24px 20px;
box-shadow: var(--sh);
transition: box-shadow var(--t-base), transform var(--t-base);
opacity: 0;
transform: translateY(10px);
}
.dcard.visible {
opacity: 1;
transform: none;
transition:
opacity .5s var(--ease-out),
transform .5s var(--ease-out),
box-shadow var(--t-base),
background var(--t-base);
}
.dcard:hover {
box-shadow: var(--sh-md);
transform: translateY(-2px);
}
.dcard .dc-num {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: clamp(2rem, 4vw, 2.9rem);
line-height: 1;
color: var(--signal-down);
margin-bottom: 8px;
font-feature-settings: var(--tnum);
letter-spacing: -.02em;
}
.dcard .dc-key {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 8px;
}
.dcard .dc-body {
font-size: .95rem;
line-height: 1.52;
color: var(--ink-2);
}
/* ============================================================
17. LOYALTY FAN CHART (benchmark)
============================================================ */
.fan {
position: relative;
height: 200px;
margin: 48px 0 8px;
}
.fan .axis {
position: absolute;
left: 0; right: 0;
top: 96px;
height: 2px;
background: var(--rule-3);
}
.fan .dot {
position: absolute;
width: 13px; height: 13px;
border-radius: 50%;
background: var(--ink-4);
transform: translate(-50%,-50%);
transition:
left .9s var(--ease-data),
opacity .6s;
}
.fan .dot.lux { background: var(--ink-2); }
.fan .dot.end {
width: 28px; height: 28px;
background: var(--gold);
box-shadow: 0 0 0 7px var(--gold-soft);
}
.fan .end-lab {
position: absolute;
width: 158px;
min-width: 120px;
transform: translateX(-50%);
top: 2px;
}
.fan .end-lab .n {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: 30px;
color: var(--gold-ink);
line-height: 1;
font-feature-settings: var(--tnum);
letter-spacing: -.015em;
}
.fan .end-lab .t {
font-size: 12px;
line-height: 1.35;
color: var(--ink-3);
margin-top: 4px;
}
.fan .end-lab.r { top: 2px; bottom: auto; }
.fan .brk {
position: absolute;
top: 158px;
border-top: 2px solid var(--gold);
border-left: 2px solid var(--gold);
border-right: 2px solid var(--gold);
height: 16px;
}
.fan .brk b {
position: absolute;
left: 50%; top: 9px;
transform: translateX(-50%);
background: var(--paper);
padding: 3px 14px;
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: 25px;
color: var(--gold-ink);
white-space: nowrap;
font-feature-settings: var(--tnum);
letter-spacing: -.015em;
}
.alt .fan .brk b { background: var(--paper-2); }
@media (max-width: 600px) {
.fan { height: 196px; margin: 34px 0 10px; }
.fan .end-lab { width: 48%!important; transform: none!important; top: 0!important; bottom: auto!important; }
.fan .end-lab:not(.r) { left: 0!important; text-align: left; }
.fan .end-lab.r { left: auto!important; right: 0; text-align: right; }
.fan .end-lab .n { font-size: 25px; }
.fan .end-lab .t { font-size: 9px; line-height: 1.3; color: var(--ink-4); }
.fan .brk b { font-size: 20px; padding: 3px 10px; }
}
/* ============================================================
18. LEDGER / PERIMETER ROWS
============================================================ */
.ledger {
margin-top: 36px;
border-top: 1px solid var(--rule-3);
}
.ledrow {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
padding: 24px 0;
border-bottom: 1px solid var(--rule);
transition: background var(--t-fast);
}
@media (min-width: 780px) {
.ledrow {
grid-template-columns: 190px 1fr;
gap: 44px;
align-items: start;
}
}
.ledrow:hover { background: rgba(23,22,20,.02); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 4px; }
.ledrow .tag {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink-4);
padding-top: 2px;
}
.ledrow .live {
font-size: 1.03rem;
line-height: 1.56;
color: var(--ink-2);
}
.ledrow .live b { color: var(--gold-ink); font-weight: 600; }
.dark .ledger, .inst .ledger { border-color: rgba(255,248,225,.08); }
.dark .ledrow, .inst .ledrow { border-color: rgba(255,248,225,.05); }
.dark .ledrow .tag, .inst .ledrow .tag { color: var(--inst-text-3); }
.dark .ledrow .live, .inst .ledrow .live { color: var(--inst-text-2); }
.dark .ledrow .live b, .inst .ledrow .live b { color: var(--inst-gold); }
/* ============================================================
19. STEPS GRID (how it works)
============================================================ */
.steps {
/* editorial_luxury: sharp corners + real hairline seams (was rounded
+ translucent --rule-2) */
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--rule-editorial);
border: 1px solid var(--rule-editorial);
border-radius: 0;
overflow: hidden;
margin-top: clamp(36px, 4.5vw, 56px);
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { #plain .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
background: var(--white);
padding: 28px 24px;
transition: background var(--t-base);
}
.step:hover { background: var(--paper); }
.step .sn {
font-family: var(--mono);
font-size: 11px;
color: var(--gold-ink);
letter-spacing: .12em;
text-transform: uppercase;
}
.step h3, .step h4 {
font-family: var(--serif);
font-optical-sizing: auto;
font-weight: 500;
font-size: 1.18rem;
margin: 12px 0 8px;
letter-spacing: -.01em;
}
.step p { font-size: .94rem; line-height: 1.52; color: var(--ink-3); }
/* ============================================================
20. ROLE TOGGLE
============================================================ */
.toggle {
display: inline-flex;
background: var(--paper-3);
border-radius: 999px;
padding: 4px;
gap: 2px;
margin-bottom: 26px;
}
.toggle button {
font-family: var(--sans);
font-size: 13.5px;
font-weight: 600;
color: var(--ink-3);
background: none;
border: none;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
transition:
background var(--t-base),
color var(--t-fast),
box-shadow var(--t-base);
}
.toggle button.on {
background: var(--white);
color: var(--ink);
box-shadow: var(--sh);
}
/* ============================================================
21. DELIVER SECTION (what you get)
============================================================ */
.deliver {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
@media (min-width: 880px) { .deliver { grid-template-columns: 1fr 1fr; } }
.deliver ul {
list-style: none;
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.deliver li {
position: relative;
padding-left: 22px;
font-size: 1.03rem;
line-height: 1.52;
color: var(--ink-2);
}
.deliver li::before {
content: '';
position: absolute;
left: 0; top: 9px;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
.deliver li b { color: var(--ink); }
/* ============================================================
22. FORM (contact / dark section)
============================================================ */
.form {
display: grid;
gap: 12px;
max-width: 540px;
margin-top: 28px;
}
.form .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 520px) { .form .row { grid-template-columns: 1fr; } }
.form input,
.form textarea,
.form select {
font-family: var(--sans);
font-size: 15px;
padding: 13px 16px;
border-radius: var(--r);
border: 1px solid #4A443A;
background: #1E1C17;
color: var(--inst-text);
width: 100%;
transition: border-color var(--t-base), background var(--t-base);
}
.form input:focus,
.form textarea:focus,
.form select:focus {
border-color: var(--inst-gold);
background: #22201A;
outline: none;
}
.form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23A8842B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
padding-right: 38px;
cursor: pointer;
background-color: #1E1C17;
}
.form input::placeholder,
.form textarea::placeholder { color: var(--inst-text-3); } /* was #7A7268, 3.59:1 on the dark form bg; inst-text-3 clears 4.5:1 */
.form .ok {
display: none;
font-family: var(--mono);
font-size: 13px;
color: var(--inst-gold);
}
.terms {
font-family: var(--mono);
font-size: 11.5px;
line-height: 1.56;
color: #6A6358;
margin-top: 18px;
max-width: 60ch;
}
/* ============================================================
23. BREADCRUMB / STUDY CHROME (benchmark, value-verdict pages)
============================================================ */
.study-chrome {
padding: clamp(14px, 2vw, 22px) 0;
border-bottom: 1px solid var(--rule-2);
margin-bottom: clamp(36px, 4vw, 52px);
}
/* BUGFIX 2026-07-12 (founder defect: heroes overflow the first screen):
shared with every page that uses .study-chrome (benchmark.html,
sample-read.html, portugal-500.html), so the compression lands once
here instead of three times. */
@media (max-height: 700px) {
.study-chrome { padding: clamp(8px, 1.4vh, 14px) 0; }
}
.study-chrome .breadcrumb {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-4);
display: flex;
align-items: center;
gap: 8px;
}
.study-chrome .breadcrumb a { color: var(--gold-ink); }
.study-chrome .breadcrumb a:hover { color: var(--gold); }
.study-chrome .breadcrumb .sep { color: var(--ink-4); } /* ink-5 = 2.5-2.7:1, below AA floor */
/* Study index card -- editorial_luxury: sharp corners + real hairline
(was rounded card); the gold left rail below is unaffected. */
.study-card {
background: var(--white);
border: 1px solid var(--rule-editorial);
border-radius: 0;
padding: clamp(24px, 3.5vw, 40px);
box-shadow: none;
position: relative;
overflow: hidden;
transition: box-shadow var(--t-base), transform var(--t-base);
}
.study-card:hover {
box-shadow: var(--sh-md);
transform: translateY(-2px);
}
/* Gold left accent rail */
.study-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--gold);
}
.study-card .sc-vol {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold-ink);
margin-bottom: 10px;
}
.study-card .sc-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
.sc-status.live {
background: rgba(47,93,79,.1);
color: var(--signal-up);
border: 1px solid rgba(47,93,79,.2);
}
.sc-status.forthcoming {
background: var(--paper-3);
color: var(--ink-4);
border: 1px solid var(--rule-2);
}
.sc-status.live::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--signal-up);
animation: blink 2s ease-in-out infinite;
}
/* ============================================================
24. SHARE BUTTON
============================================================ */
.share {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .07em;
color: var(--ink-4);
background: transparent;
border: 1px solid var(--rule-3);
border-radius: var(--r);
padding: 7px 13px;
cursor: pointer;
transition:
color var(--t-base),
border-color var(--t-base),
background var(--t-base);
margin-top: 18px;
}
.share:hover {
color: var(--gold-ink);
border-color: var(--gold-line-2);
background: var(--gold-soft);
}
.share:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.share.copied {
color: var(--signal-up);
border-color: var(--signal-up);
background: var(--signal-up-bg);
}
.dark .share { color: var(--inst-text-2); border-color: rgba(255,248,225,.12); }
.dark .share:hover { color: var(--inst-gold); border-color: var(--inst-gold); background: rgba(201,169,90,.1); }
/* ============================================================
25. GUESS GAME (benchmark interactive)
============================================================ */
.guess {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 34px;
max-width: 660px;
}
@media (min-width: 600px) { .guess { grid-template-columns: 1fr 1fr; } }
.gcard {
border: 1.5px solid var(--rule-3);
border-radius: var(--r-lg);
padding: 26px 24px 22px;
background: var(--white);
cursor: pointer;
text-align: center;
transition:
border-color var(--t-base),
box-shadow var(--t-base),
transform var(--t-base);
box-shadow: var(--sh);
}
.gcard:hover {
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: var(--sh-lg);
}
.gcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gcard.picked {
border-color: var(--gold);
box-shadow: 0 0 0 4px var(--gold-soft);
}
.gcard.dim { opacity: .45; }
.gcard .lab {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-4);
letter-spacing: .06em;
}
.gcard .star {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: clamp(2rem, 6vw, 2.8rem);
color: var(--gold);
margin: 8px 0 2px;
font-feature-settings: var(--tnum);
}
.gcard .stars { color: var(--gold-ink); font-size: 15px; letter-spacing: 4px; text-indent: 4px; } /* --gold was 3.38:1, under the 4.5:1 floor */
.gcard .hint {
display: inline-block;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .05em;
color: var(--gold-ink);
background: var(--gold-soft);
border: 1px solid var(--gold-line);
border-radius: 999px;
padding: 5px 14px;
margin-top: 18px;
transition: background var(--t-base), color var(--t-fast);
}
.gcard:hover .hint { background: var(--gold); color: #fff; border-color: var(--gold); }
.gcard.revealed .hint { display: none; }
.gcard .rv {
display: none;
border-top: 1px solid var(--rule-2);
margin-top: 16px;
padding-top: 14px;
}
.gcard.revealed .rv { display: block; }
.gcard .nls {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: clamp(1.8rem, 5vw, 2.5rem);
color: var(--ink);
line-height: 1;
font-feature-settings: var(--tnum);
letter-spacing: -.015em;
}
.gcard .nls.win { color: var(--gold-ink); }
.gcard .rl { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.guess-prompt {
font-family: var(--serif);
font-optical-sizing: auto;
font-style: italic;
font-size: 1.12rem;
color: var(--ink-3);
margin-top: 24px;
}
.guess-result {
font-family: var(--serif);
font-optical-sizing: auto;
font-size: clamp(1.3rem, 3vw, 1.9rem);
line-height: 1.25;
margin-top: 10px;
letter-spacing: -.01em;
}
.guess-result .gold-i { color: var(--gold-ink); }
/* ============================================================
26. FOOTER
============================================================ */
.footer {
background: var(--inst-bg);
color: var(--inst-text-2);
padding: 72px 0 44px;
border-top: 1px solid var(--inst-rule);
}
.footer .cols {
display: grid;
grid-template-columns: 1fr;
gap: 36px;
}
@media (min-width: 700px) {
.footer .cols { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
}
.footer .brand { color: var(--inst-text); margin-bottom: 14px; }
.footer .brand svg { color: var(--inst-text); }
.footer .brand .soft { color: var(--inst-text-3); }
.footer .footcol {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--inst-text-3);
margin-bottom: 16px;
}
.footer a {
display: block;
color: var(--inst-text-2);
font-size: 14px;
padding: 4px 0;
transition: color var(--t-fast);
}
.footer a:hover { color: var(--inst-text); }
.footer .blurb {
font-size: 14px;
line-height: 1.62;
color: var(--inst-text-3);
max-width: 36ch;
}
.footer .legal {
border-top: 1px solid var(--inst-rule);
margin-top: 48px;
padding-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
color: var(--inst-text-3);
}
.footer .legal a { color: var(--inst-gold); display: inline; padding: 0; }
/* ============================================================
27. STICKY MOBILE CTA
============================================================ */
.stickycta {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 70;
padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
background: rgba(17,16,9,.96);
border-top: 1px solid var(--inst-rule-2);
display: none;
justify-content: center;
/* Visibility paired with the transform so an off-screen sticky CTA
also leaves the a11y tree/tab order, not just the viewport.
Delay-hide on the way out (after the slide finishes), instant-show
on the way back in. */
transition: transform var(--t-slow) var(--ease-out), visibility 0s linear 0s;
visibility: visible;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.stickycta .btn { width: 100%; max-width: 420px; justify-content: center; }
@media (max-width: 600px) {
.stickycta { display: flex; }
.stickycta.atop,
.stickycta.near-contact {
transform: translateY(120%);
visibility: hidden;
transition: transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
}
body { padding-bottom: 68px; }
body.cookie-banner-shown .stickycta:not(.atop):not(.near-contact) { bottom: 128px; }
body.cookie-banner-shown { padding-bottom: 196px; }
}
@media (min-width: 601px) {
/* Desktop has no sticky CTA to compensate for, but the banner still
sits fixed over the bottom of the viewport (hero paragraph, CTA
row, or dark stat panel depending on page) on first paint until
the visitor clicks Decline/Accept. Pad the body so the banner
never overlaps content at 601px+, where it renders as a single
row with the two buttons inline. Measured rendered height at
620px-1920px: 68px (matched here); 601-619px briefly wraps to
two lines (~87.5px) but that band is narrow enough, and close
enough to the 600px mobile cutoff above, to leave uncompensated
rather than add a second breakpoint for an 18px sliver. */
body.cookie-banner-shown { padding-bottom: 68px; }
}
/* ============================================================
28. COOKIE CONSENT BANNER
============================================================ */
.cookie-banner {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 80;
background: var(--inst-bg-2);
border-top: 1px solid var(--inst-rule-2);
padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
display: none;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 -4px 24px rgba(0,0,0,.3);
}
.cookie-banner.show { display: flex; }
.cookie-banner p {
font-size: 13px;
line-height: 1.5;
color: var(--inst-text-2);
max-width: 60ch;
flex: 1;
min-width: 200px;
}
.cookie-banner p a { color: var(--inst-gold); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner .cbbtns {
display: flex;
gap: 10px;
flex-shrink: 0;
}
#cookie-decline {
font-family: var(--sans);
font-size: 13.5px;
font-weight: 500;
padding: 9px 18px;
border-radius: var(--r);
border: 1px solid var(--inst-rule-2);
background: transparent;
color: var(--inst-text-2);
cursor: pointer;
transition: color var(--t-fast), border-color var(--t-fast);
}
#cookie-decline:hover { color: var(--inst-text); border-color: var(--inst-rule-2); }
#cookie-accept {
font-family: var(--sans);
font-size: 13.5px;
font-weight: 600;
padding: 9px 18px;
border-radius: var(--r);
background: var(--gold);
border: 1px solid var(--gold);
color: #1A1508;
cursor: pointer;
transition: background var(--t-base);
}
#cookie-accept:hover { background: #B8922E; }
#cookie-decline:focus-visible,
#cookie-accept:focus-visible {
outline: 3px solid var(--inst-gold);
outline-offset: 3px;
}
/* ============================================================
29. MOTION SYSTEM
All animations are scroll-triggered via IntersectionObserver
in JS. The CSS provides the initial hidden state and the
final revealed state. prefers-reduced-motion skips all.
============================================================ */
/* Reveal on scroll — initial states */
.reveal {
opacity: 0;
transform: translateY(16px);
transition:
opacity .6s var(--ease-out),
transform .6s var(--ease-out);
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* Staggered children */
.stagger > * {
opacity: 0;
transform: translateY(12px);
transition:
opacity .5s var(--ease-out),
transform .5s var(--ease-out);
}
.stagger.visible > *:nth-child(1) { transition-delay: .0s; }
.stagger.visible > *:nth-child(2) { transition-delay: .08s; }
.stagger.visible > *:nth-child(3) { transition-delay: .16s; }
.stagger.visible > *:nth-child(4) { transition-delay: .24s; }
.stagger.visible > * { opacity: 1; transform: none; }
/* Counter animation scaffold */
@keyframes countUp {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.counter-anim { animation: countUp .4s var(--ease-out) both; }
/* Section heading fade */
.section-head.reveal {
transition:
opacity .7s var(--ease-out),
transform .7s var(--ease-out);
}
/* ============================================================
30. VALUE-VERDICT PAGE SPECIFIC STYLES
============================================================ */
.vv-hero {
padding: clamp(56px, 8vw, 104px) 0 clamp(44px, 6vw, 68px);
}
.vv-vs-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: center;
margin: clamp(32px, 5vw, 52px) 0;
max-width: 640px;
}
@media (max-width: 560px) {
.vv-vs-row { gap: 8px; }
.vv-vs-sep { font-size: 1.1rem; color: var(--ink-4); padding: 0 4px; }
.vv-col .vc-num { font-size: clamp(2rem, 9vw, 2.8rem); }
.vv-col .vc-sub { font-size: 11px; }
}
.vv-col { text-align: center; }
.vv-col .vc-num {
/* editorial_luxury: mono display numeral (was serif) */
font-family: var(--mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: clamp(2.8rem, 5.5vw, 4.2rem);
line-height: 1;
margin-bottom: 6px;
font-feature-settings: var(--tnum);
letter-spacing: -.025em;
}
.vv-col .vc-num.bad { color: var(--signal-down); }
.vv-col .vc-num.good { color: var(--signal-up); }
.vv-col .vc-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 4px;
}
.vv-col .vc-sub { font-size: 13px; color: var(--ink-3); margin-top: 5px; line-height: 1.35; }
.vv-vs-sep {
font-family: var(--serif);
font-optical-sizing: auto;
font-size: 2rem;
color: var(--ink-4);
text-align: center;
letter-spacing: -.02em;
}
.vv-ci {
font-family: var(--mono);
font-size: 10.5px;
color: var(--ink-3);
margin-top: 4px;
font-feature-settings: var(--tnum);
}
/* ============================================================
31. GLOBAL FOCUS RINGS (AA accessible)
============================================================ */
:focus-visible {
outline: 2px solid var(--gold-mid);
outline-offset: 3px;
border-radius: 3px;
}
a:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 2px; }
#cookie-decline:focus-visible,
#cookie-accept:focus-visible {
outline: 3px solid var(--inst-gold);
outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* ============================================================
31b. SKIP-TO-CONTENT LINK (D2 fix, 2026-07-11)
Promoted from index.html/studies.html's two divergent page-local
copies. Was present on only 2 of 7 pages; benchmark.html,
portugal-500.html, sample-read.html, and privacy.html repeated the
full sticky nav with no bypass mechanism (WCAG 2.4.1). Markup
(Skip to content as the first
element inside , matched to that page's main-landmark id)
still needs adding to the 4 missing pages by their file owners.
============================================================ */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
background: var(--inst-bg);
color: var(--inst-text);
padding: 12px 20px;
border-radius: 0 0 var(--r) 0;
font-family: var(--sans);
font-size: .92rem;
text-decoration: none;
}
.skip-link:focus {
left: 0;
}
/* ============================================================
32. SECTION-SPECIFIC OVERRIDES
============================================================ */
#how .section-head h2 { text-wrap: balance; max-width: 18ch; }
#gap .section-head h2 { text-wrap: balance; }
#method .section-head h2 { text-wrap: balance; }
#deliverable .section-head h2 { text-wrap: balance; }
#who .section-head h2 { text-wrap: balance; }
.vv-hero h1 { text-wrap: balance; }
#who { border-top: 1px solid var(--rule-2); }
/* Instrument panel sections */
.dark .eyebrow { color: var(--inst-gold); }
.dark h2 { color: var(--inst-text); }
.dark h3 { color: var(--inst-text); }
.dark p.body { color: var(--inst-text-2); }
/* ============================================================
33. REDUCED MOTION
Suppress background/scroll animations; keep hover affordances
(WCAG 2.3.3 AAA compliance).
============================================================ */
@media (prefers-reduced-motion: reduce) {
/* html{scroll-behavior:smooth} (rule 1, base) had no reduced-motion
counterpart, so ordinary anchor-link navigation still animated the
scroll for reduced-motion users. */
html { scroll-behavior: auto!important; }
.rc-fill,
.br-fill,
.lbar .fl,
.fan .dot,
.stickycta,
.reveal,
.stagger > *,
.rc-row,
.dcard { transition: none!important; }
*, *::before, *::after { animation: none!important; }
/* Ensure hidden elements are visible when animation is off */
.reveal,
.stagger > *,
.rc-row,
.dcard { opacity: 1!important; transform: none!important; }
}
/* ============================================================
34. UTILITIES
============================================================ */
.center { text-align: center; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
br.mob-only { display: none; }
@media (max-width: 520px) { br.mob-only { display: block; } }
.gold-rule {
height: 1px;
background: linear-gradient(90deg, var(--gold), transparent 80%);
border: none;
margin: clamp(32px, 4vw, 52px) 0;
}
/* Inline data callout box (gold-bordered) -- editorial_luxury: sharp
corners (was rounded); the gold border/left-accent is untouched. */
.callout-box {
margin: 22px 0 6px;
padding: 16px 20px;
background: var(--gold-soft);
border: 1px solid var(--gold-line-2);
border-left: 3px solid var(--gold);
border-radius: 0;
}
.callout-box .cb-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-ink);
margin-bottom: 8px;
}
.callout-box p {
font-size: 1.03rem;
line-height: 1.5;
color: var(--ink);
}
/* Stat-pairing tile (finding headline stat pair). Promoted from
portugal-500.html + benchmark.html's independently-drifted page-local
copies to shared site.css 2026-07-11 (site-excellence typography
pass): kept benchmark's wider rhythm and larger stat size, the more
legible of the two. */
.stat-pair-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: clamp(24px, 3vw, 36px) 0;
}
.sp-cell {
/* editorial_luxury: sharp corners + a real hairline (was rounded +
translucent --rule-2), matching the chart-art pass's "never a full
box border" rule for the small repeated stat-card family. Promoted
from portugal-500.html's page-local override to the shared
definition now that the rollout is site-wide. */
flex: 1;
min-width: 200px;
background: var(--white);
border: 1px solid var(--rule-editorial);
border-left-width: 3px;
border-radius: 0;
padding: 18px 20px;
box-shadow: none;
}
.sp-cell.bad { border-left: 3px solid var(--signal-down); }
.sp-cell.good { border-left: 3px solid var(--signal-up); }
.sp-cell .spl {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 8px;
line-height: 1.4;
}
.sp-cell .spn {
font-family: var(--mono);
/* editorial_luxury: enlarged toward display-numeral scale (was a
capped 1.7-2.2rem caption size) now that mono carries display duty. */
font-size: clamp(2.1rem, 4vw, 3rem);
font-weight: 600;
line-height: 1;
letter-spacing: -.02em;
font-feature-settings: var(--tnum);
}
.sp-cell.bad .spn { color: var(--signal-down); }
.sp-cell.good .spn { color: var(--signal-up); }
.sp-cell .sps {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-margin);
margin-top: 6px;
line-height: 1.4;
}
/* Stat-toggle disclosure body (method/denominator notes, mono prose).
Promoted from portugal-500.html + benchmark.html's identical page-local
copies to shared site.css 2026-07-11 (site-excellence typography pass);
added a measure constraint neither page-local copy had: at 1280px+
this ran to ~160+ characters/line, more than double the ~75ch Tufte
measure every other prose element on these pages respects. */
.stat-toggle .toggle-body {
margin-top: 10px;
max-width: 68ch;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
line-height: 1.6;
padding: 12px 14px;
background: var(--paper-2);
border-radius: 0;
border: 1px solid var(--rule-editorial);
}
.dark .stat-toggle .toggle-body,
.ch-instrument .stat-toggle .toggle-body,
.study-card-dark .stat-toggle .toggle-body {
color: var(--inst-text-2);
background: rgba(255,248,225,.03);
border-color: var(--inst-rule);
}
/* Small-phone hero-H1 clamp override. Promoted to site.css 2026-07-11
(site-excellence typography pass): portugal-500.html and studies.html
had each independently written a fix for the same bug (base h1 clamp
floors at 2.6rem/41.6px, too large for a long hero headline on a
phone) with a different breakpoint (600px vs 480px) and different
clamp values, so a 390px viewport rendered two different sizes for
the structurally identical element. One rule, one breakpoint now.
editorial_luxury: base h1 now floors at 3.4rem/54.4px (was 2.6rem);
re-tuned so the phone tier still reads as a deliberate reduction, not
the accidental too-big-for-the-glass bug this rule originally fixed.
Extended site-wide (was pt500/studies only) to every hero-carrying
page's h1, since the new 3.4-8.5rem base clamp is even further from
phone-safe than the old 2.6-4.5rem band was. */
@media (max-width: 600px) {
.pt500-hero h1, .studies-hero h1, .masthead h1, .hero h1, .notfound-hero h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1.03; }
.pt500-hero h1 { max-width: none; }
}
/* Buyer/owner/seat callouts inside prose sections. Promoted from
index.html's page-local