/* ═══ study.css · the canonical vocabulary for study and document pages ═══════ One system, not two pages made to resemble each other. A third study links this and inherits the vocabulary rather than inventing a third dialect. The canon is derived from the site, not from either study: .eyebrow is what index, audit and the studies index already use; hyphenated tokens match --ink-0 / --aurum-500 / --bone-1 in chrome.css; the type scale matches /methodology, which study 01 already agreed with. Study 02 was the drift. Self-sufficient by the same rule as chrome.css: it defines every token it uses, so a page that links it cannot silently inherit a different ink. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --st-paper:#F7F2E7; /* page ground */ --st-ink-0:#1A1613; /* headings */ --st-ink-1:#3E392F; /* body */ --st-ink-2:#5F5A50; /* secondary, captions */ --st-ink-3:#8A8479; /* meta, mono labels */ --st-line:rgba(26,22,19,.10); --st-line-2:rgba(26,22,19,.18); --st-aurum:#B8913A; /* links, kickers */ --st-sans:'Söhne','Söhne Buch',-apple-system,BlinkMacSystemFont,sans-serif; --st-mono:'Söhne Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --st-measure:62ch; /* ~70 characters per line, measured, not assumed */ } /* ── the kicker. .eye and .rule were the two dialects; .eyebrow is the site's and the only one that should appear in new markup. ─────────────────── */ .study{font-family:var(--st-sans);color:var(--st-ink-1)} .study .eyebrow{ font-family:var(--st-mono);font-size:12px;letter-spacing:.16em; text-transform:uppercase;color:var(--st-aurum);margin:0 0 14px;display:block; } /* ── type scale · matches /methodology, which study 01 already agreed with ── */ .study h1{ font-family:var(--st-sans);font-size:clamp(33px,4.9vw,52px);line-height:1.04; font-weight:600;letter-spacing:-.034em;color:var(--st-ink-0); max-width:20ch;margin:0 0 20px;text-wrap:balance; } .study h2{ font-family:var(--st-sans);font-size:clamp(27px,3.5vw,38px);line-height:1.08; font-weight:600;letter-spacing:-.032em;color:var(--st-ink-0); max-width:21ch;margin:0 0 18px;text-wrap:balance; } .study h3{ font-family:var(--st-sans);font-size:18px;font-weight:600;letter-spacing:-.014em; color:var(--st-ink-0);margin:0 0 10px; } .study p{ font-size:17.5px;line-height:1.6;color:var(--st-ink-1); max-width:var(--st-measure);margin:0 0 1.1em;text-wrap:pretty; } .study .lead{font-size:19px;line-height:1.55;color:var(--st-ink-1)} /* Anchors are scoped to TEXT contexts, never to `.study a`. The scope class is on , so a bare `.study a` at (0,1,1) reached the nav wordmark, the nav links and the footer CTA and beat chrome's `.brand` at (0,1,0) - the studies shipped with an aurum wordmark on a dark pill. The answer is not to raise chrome's specificity, which is the race 5.21 removed by giving chrome its own tokens. The answer is for this sheet to stop reaching outside the document. */ .study p a,.study li a,.study h2 a,.study h3 a, .study .lead a,.study .dateline a,.study .ledger a{color:var(--st-aurum)} /* ── the dateline. Constraint: unifying the visual system must not touch what a study reports, so this styles the element and never its content. ──── */ .study .dateline{ font-size:14px;line-height:1.6;color:var(--st-ink-2); border-left:2px solid var(--st-line);padding:2px 0 2px 14px; margin:26px 0 0;max-width:640px; } .study .dateline b{font-weight:600;color:var(--st-ink-1)} /* ── the revisions log. The most credible thing on either page, so it gets a real treatment rather than being left to whichever page defined it. ─── */ .study .ledger{max-width:700px;margin:22px 0 0;list-style:none;padding:0} .study .ledger li{ font-size:16px;line-height:1.55;color:var(--st-ink-1); padding:14px 0;border-bottom:1px solid var(--st-line); } .study .ledger li:first-child{border-top:1px solid var(--st-line-2)} .study .ledger b{font-weight:600;color:var(--st-ink-0)} @media (max-width:640px){ .study p{font-size:16.5px} .study .dateline{max-width:none} } /* ── the forward card ──────────────────────────────────────────────────────── Study 01's "what we did next" block was page-local: a designed, working cross-link with no equivalent in the system, so a third study would have reinvented it or gone without. Promoted rather than deleted - it does a real job. Now any study can carry one and they will match. ────────────────────────────────────────────────────────────────────────── */ .study .next{background:radial-gradient(120% 82% at 16% 0%,#211A0F,transparent 58%), linear-gradient(168deg,#1A1409,#141009 52%,#0F0B06); border:1px solid #2C2418;border-radius:20px;color:rgba(255,248,236,.86); padding:40px 42px;margin:40px auto 0;max-width:760px;position:relative} .study .next h2,.study .next h3{color:rgba(255,248,236,.96)} .study .next p{color:rgba(255,248,236,.72)} .study .next a{color:#E8C77A} @media (max-width:640px){ .study .next{padding:28px 24px;border-radius:16px} }