|
content: none !important; /* hide expanded URLs */
}
}
/* =================================================================
12. EDITORIAL DESIGN SYSTEM ("paper & ink")
Appended LAST deliberately: later rules of equal specificity win,
so this section restyles typography / color / spacing WITHOUT
editing sections 1-11. Delete the whole section to revert.
Division of labor (the FT model): serif display title + serif
prose; sans for structure (section headings, kicker, standfirst)
and for data (tables, infobox — guarded + size-pinned below).
================================================================= */
/* ── Webfont: Source Serif 4 (variable; ONE file covers 400-600).
@font-face is safe anywhere in ResourceLoader output — never use
@import here (gadget CSS is concatenated BEFORE Common.css and
breaks it, per T165040). If the font fails to load, Georgia
takes over seamlessly. Production hardening: copy the two woff2
files to the S3 bucket and swap the URLs. ── */
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/sourceserif4/v14/vEFF2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6kDXr4.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Source Serif 4";
font-style: italic;
font-weight: 400 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/sourceserif4/v14/vEF02_tTDB4M7-auWDN0ahZJW1ge6NmXpVAHV83Bfb_US2D2QYxoUKIkn98pRl9tDMQC.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ── Design knobs ── */
:root {
--ed-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--ed-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--ed-ink: #262522; /* display + strong rules (warm near-black) */
--ed-text: #33302e; /* body text (FT black-80) */
--ed-strong: #4d4845; /* standfirst (FT black-70) */
--ed-secondary: #66605c; /* labels, breadcrumb, muted UI (FT black-60) */
--ed-faint: #807973; /* page refs, footer, list markers (FT black-50) */
--ed-link: #0d7680; /* interactive teal (FT's link color) */
--ed-underline: #ccc1b7; /* resting link underline tint (FT black-20) */
--ed-accent: #f07662; /* house coral — hover underline, sparing */
--ed-paper: #fbfaf7; /* page canvas (set #fff to disable the tint) */
--ed-hairline: #e5e0da; /* warm hairline (infobox frame) */
--ed-measure: 42em; /* prose line length; tables break full width */
--ed-data-size: 0.8125rem;/* tables + infobox text (13px), pinned in rem */
}
/* ── Canvas: warm paper; white data surfaces (tables, infobox) pop ── */
body, .mw-page-container { background-color: var(--ed-paper) !important; }
@media print { body, .mw-page-container { background-color: #fff !important; } }
/* ── Prose voice: serif, larger, warm ink ── */
.mw-body-content {
font-family: var(--ed-serif);
font-size: 1.125rem; /* 18px (FT body is 18-20); Vector default is 14px */
line-height: 1.6;
color: var(--ed-text);
font-variant-numeric: lining-nums;
}
/* readable measure for prose; data/tables stay full width */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl { max-width: var(--ed-measure); }
/* guards: the data voice stays sans and is PINNED in rem — otherwise the
18px body would silently inflate section 11's 0.85em tables (and every
em-based column width) by ~29% */
table.wikitable, .infobox {
font-family: var(--ed-sans);
font-size: var(--ed-data-size);
}
/* standfirst — the italic intro sentence (FT: sans, calm). Anchored to the
generated infobox-then-intro pattern so hand-written pages keep real italics */
.mw-parser-output > .infobox ~ p:first-of-type > i,
.mw-parser-output > table.infobox + p > i {
font-family: var(--ed-sans);
font-style: normal;
font-size: 0.97em;
line-height: 1.55;
color: var(--ed-strong);
}
/* list rhythm: air between points, predictable nesting */
.mw-parser-output ul { margin-top: 0.4em; }
.mw-parser-output li { margin-bottom: 0.45em; }
.mw-parser-output li li { margin-top: 0.3em; margin-bottom: 0.3em; }
.mw-parser-output li > ul { margin-top: 0.3em; }
.mw-parser-output li::marker { color: var(--ed-faint); }
/* page-reference superscripts — present everywhere, must whisper.
line-height:0 stops them inflating the line box at the larger body size */
.mw-body-content sup {
font-size: 68%;
line-height: 0;
font-family: var(--ed-sans);
color: var(--ed-faint);
}
/* ── Title block: serif display, REGULAR weight, large (FT headline manner) ── */
h1#firstHeading, .mw-first-heading {
font-family: var(--ed-serif);
font-size: 2.4rem;
line-height: 1.15;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ed-ink) !important;
border-bottom: 2px solid var(--ed-ink) !important;
padding-bottom: 0.3em;
margin-bottom: 0.35em;
}
/* breadcrumb under the title rule — quiet uppercase kicker */
#contentSub .subpages {
font-family: var(--ed-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ed-secondary);
margin-bottom: 1.4em;
}
#contentSub .subpages a,
#contentSub .subpages a:visited { color: var(--ed-secondary) !important; }
/* ── Section headings: sans semibold on the house rules (FT in-article
style). Scoped to .mw-body-content — Vector's own typography rules
are class-qualified (0,1,1), so bare h2/h3 selectors would LOSE. ── */
.mw-body-content h2, .mw-body-content .mw-heading2, .section-heading {
font-family: var(--ed-sans);
font-size: 1.4rem;
line-height: 1.25;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ed-ink) !important;
border-bottom: 1px solid var(--ed-ink) !important;
margin-top: 2.2em;
margin-bottom: 0.7em;
padding-bottom: 0.3em;
}
.mw-body-content h3 {
font-family: var(--ed-sans);
font-size: 1.08rem;
font-weight: 600;
color: var(--ed-ink) !important;
margin-top: 1.8em;
margin-bottom: 0.5em;
}
.mw-body-content h4, .mw-body-content h5, .mw-body-content h6 {
font-family: var(--ed-sans);
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ed-ink) !important;
}
/* the inner spans are pinned #202122 !important by section 7 — make them
follow their heading's ink instead */
.mw-headline, .mw-page-title-main { color: inherit !important; }
/* ── Links: FT teal; content links carry a resting tint underline that
warms to the house coral on hover ── */
a, a:visited,
.mw-parser-output a, .mw-parser-output a:visited,
.mw-body-content a.external, .mw-body-content a.external:visited,
.mw-collapsible-toggle-default .mw-collapsible-text {
color: var(--ed-link) !important;
}
.mw-parser-output a {
text-decoration: underline;
text-decoration-color: var(--ed-underline);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.mw-parser-output a:hover {
text-decoration-color: var(--ed-accent);
text-decoration-thickness: 2px;
}
/* exceptions re-stated AFTER the generic rules so they keep winning */
a.new, a.new:visited { color: #d73333 !important; }
a.mw-ui-button, a.mw-ui-button:visited { color: #fff !important; }
.mw-editsection, .mw-editsection a, .mw-editsection a:visited {
color: var(--ed-secondary) !important;
text-decoration: none;
}
/* ── TOC sidebar: quiet sans, ink on hover/active ── */
.vector-toc { font-family: var(--ed-sans); }
.vector-toc .vector-toc-link,
.vector-toc .vector-toc-link:visited {
color: var(--ed-secondary) !important;
font-size: 0.8125rem;
text-decoration: none;
}
.vector-toc .vector-toc-link:hover { color: var(--ed-ink) !important; }
.vector-toc .vector-toc-list-item-active > .vector-toc-link { color: var(--ed-ink) !important; }
/* ── Infobox: white "document card" in the data voice.
table.infobox (0,2,1) out-specifies the TemplateStyles sheet's
'.mw-parser-output .infobox' !important rules (0,2,0), which are
emitted in the body AFTER site styles and would otherwise win. ── */
.mw-parser-output table.infobox {
font-family: var(--ed-sans);
font-size: var(--ed-data-size);
background-color: #fff !important;
border: 1px solid var(--ed-hairline) !important;
padding: 0.55em 0.9em 0.75em;
line-height: 1.5;
}
.infobox .infobox-above {
background-color: #fff !important; /* beats the template's inline #cee0f2 */
color: var(--ed-secondary) !important; /* beats inline color:inherit */
text-align: left !important;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
border-bottom: 1px solid var(--ed-ink);
padding: 0.2em 0.2em 0.55em;
}
.infobox .infobox-label {
color: var(--ed-secondary);
font-weight: 400;
padding: 0.22em 0.8em 0.22em 0.2em;
}
.infobox .infobox-data { color: var(--ed-ink); padding: 0.22em 0.2em; }
/* table captions: explicit ink on the new canvas (family + size come from
the data-voice guard above) */
table.wikitable caption { color: var(--ed-ink); }
/* ── Blockquotes: coral bar, serif italic (future-proofing — the emitter
currently renders quotes as "> ..." list items) ── */
.mw-parser-output blockquote {
border-left: 3px solid var(--ed-accent);
padding: 0.2em 0 0.2em 1.2em;
margin: 1.2em 0;
color: var(--ed-strong);
font-style: italic;
}
/* ── Footer + page-bottom cleanup ── */
@media screen {
.printfooter { display: none; } /* "Retrieved from ..." clutter; stays in print */
}
#footer, .mw-footer {
font-family: var(--ed-sans);
font-size: 0.78rem;
color: var(--ed-faint);
border-top: 1px solid var(--ed-ink) !important;
}
#footer a, #footer a:visited,
.mw-footer a, .mw-footer a:visited { color: var(--ed-secondary) !important; }
/* ── Mobile ── */
@media screen and (max-width: 768px) {
h1#firstHeading, .mw-first-heading { font-size: 1.7rem; }
.mw-body-content h2, .mw-body-content .mw-heading2 { font-size: 1.22rem; }
.mw-body-content { font-size: 1.0625rem; }
}
|