/* ============================================================ The Documented Record — dashboard theme Layer order: WebGL canvas (fixed, z0) → veil (z1) → DOM (z2+) ============================================================ */ :root { --bg: #05070c; --bg-2: #090d16; --panel: rgba(255, 255, 255, 0.038); --panel-solid: #0d121d; --panel-hi: rgba(255, 255, 255, 0.07); --line: rgba(255, 255, 255, 0.09); --line-hi: rgba(255, 255, 255, 0.16); --text: #e9edf6; --text-2: #b9c2d4; /* Was #7d879c, which measured 5.19:1 on the panel and 5.58:1 on the page: past the 4.5:1 WCAG AA asks of body text, short of the 7:1 of AAA. Notes and source lines are set in it, and they are the part of a card a reader most needs to check, so it is lifted to 7.29:1 and 7.85:1. */ --muted: #98a2b6; /* The neutral the charts lay over the background, given as channels so charts.js can ask for it at any opacity. */ --ink-rgb: 255, 255, 255; --chart-plate: rgba(10, 14, 23, 0.96); /* The two sticky bars sit over scrolling content, so they are translucent rather than solid — which means they cannot use --bg and must be themed in their own right. */ --bar: rgba(5, 7, 12, 0.72); --bar-2: rgba(5, 7, 12, 0.82); --overlay: rgba(9, 13, 22, 0.93); --accent: #d9a441; --accent-soft: rgba(217, 164, 65, 0.14); --blue: #56a8e0; --blue-soft: rgba(86, 168, 224, 0.14); --red: #d2534c; --red-soft: rgba(210, 83, 76, 0.14); --green: #4fae82; --violet: #9b7fd4; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --radius: 14px; --radius-lg: 20px; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --shadow-2: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .5); --shadow-3: 0 30px 80px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .5); --topbar-h: 66px; --wrap: 1280px; } /* ---------- Light theme ---------- The record is read in daylight, on phones, and printed out; a page that only exists at one brightness excludes the reader who cannot use it. The theme is chosen by `data-theme` on , which app.js sets from the saved preference, and falls back to the system setting for anyone who has never touched the switch. The hues are the same in both: only the grounds, the greys and the neutral change, so a chart means the same thing either way. */ :root[data-theme="light"] { --bg: #f6f7fa; --bg-2: #eef0f5; --panel: rgba(15, 20, 32, 0.028); --panel-solid: #ffffff; --panel-hi: rgba(15, 20, 32, 0.06); --line: rgba(15, 20, 32, 0.12); --line-hi: rgba(15, 20, 32, 0.22); --text: #10141c; --text-2: #3a4252; --muted: #5b6475; --ink-rgb: 15, 20, 32; --chart-plate: rgba(255, 255, 255, 0.97); --accent: #8a6410; --accent-soft: rgba(138, 100, 16, 0.12); --blue: #1f6ea8; --blue-soft: rgba(31, 110, 168, 0.12); --red: #ab2f28; --red-soft: rgba(171, 47, 40, 0.12); --green: #1f7a52; --violet: #6a4cae; /* Charts keep the darker palette's hues, which are tuned for a canvas that has no background of its own; only the grey is pulled down far enough to read on white. */ --chart-muted: #4d5666; --bar: rgba(246, 247, 250, 0.82); --bar-2: rgba(238, 240, 245, 0.9); --overlay: rgba(255, 255, 255, 0.96); --shadow-1: 0 1px 2px rgba(15, 20, 32, .08), 0 8px 24px rgba(15, 20, 32, .06); --shadow-2: 0 2px 4px rgba(15, 20, 32, .1), 0 18px 48px rgba(15, 20, 32, .09); --shadow-3: 0 30px 80px rgba(15, 20, 32, .14), 0 4px 10px rgba(15, 20, 32, .1); } :root[data-theme="light"] code { background: rgba(15, 20, 32, .06); } /* The brand flag carries a green glow and a hard black shadow, both of which are for a dark ground. */ :root[data-theme="light"] .brand-mark { box-shadow: 0 1px 3px rgba(15, 20, 32, .22); } :root[data-theme="light"] .boot-bar { background: rgba(15, 20, 32, .1); } :root[data-theme="light"] ::selection { background: rgba(138, 100, 16, .2); } :root[data-theme="light"] thead th { background: #e9ecf3; } :root[data-theme="light"] .skip-link { color: #fff; } /* The scene is a field of light points on a dark ground; on white it reads as dirt on the screen. */ :root[data-theme="light"] #scene, :root[data-theme="light"] #scene-veil { display: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.locked { overflow: hidden; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; margin: 0; } code { font-family: var(--mono); font-size: .88em; background: rgba(255, 255, 255, .06); padding: .1em .38em; border-radius: 5px; } ::selection { background: rgba(217, 164, 65, .3); } /* ---------- WebGL layers ---------- */ #scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; pointer-events: none; } #scene-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, rgba(5, 7, 12, 0) 0%, rgba(5, 7, 12, .55) 55%, rgba(5, 7, 12, .92) 100%), linear-gradient(180deg, rgba(5, 7, 12, .2) 0%, rgba(5, 7, 12, .75) 70%, var(--bg) 100%); transition: opacity .6s ease; } body[data-view="overview"] #scene-veil { opacity: 1; } body:not([data-view="overview"]) #scene-veil { opacity: 1; background: var(--bg); } body:not([data-view="overview"]) #scene { opacity: .18; } /* ---------- Boot ---------- */ #boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); transition: opacity .5s ease, visibility .5s; } #boot.done { opacity: 0; visibility: hidden; } .boot-inner { text-align: center; } .boot-flag { width: 54px; margin: 0 auto 18px; } .boot-mark { font-family: var(--serif); font-size: 13px; letter-spacing: .42em; color: var(--accent); margin-bottom: 20px; } .boot-bar { width: 220px; height: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 0 auto; } .boot-bar span { display: block; height: 100%; width: 40%; background: var(--accent); animation: boot 1.1s ease-in-out infinite; } @keyframes boot { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } .boot-status { margin-top: 16px; font-size: 12.5px; color: var(--muted); letter-spacing: .04em; } /* The names on the loading screen. The block holds its height so a long name followed by a short one does not shift the bar above it. */ .boot-names { margin-top: 28px; max-width: 460px; } .boot-name { min-height: 52px; display: grid; gap: 3px; align-content: center; } .boot-name-ar { font-size: 19px; color: var(--text); line-height: 1.35; } .boot-name-en { font-size: 13px; color: var(--text-2); } .boot-names-note { margin-top: 14px; font-size: 11.5px; line-height: 1.6; color: var(--muted); } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 100; height: var(--topbar-h); display: flex; align-items: center; gap: 22px; padding: 0 26px; background: var(--bar); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 12px; color: var(--text); flex: 0 0 auto; } .brand:hover { text-decoration: none; } .brand-mark { width: 38px; box-shadow: 0 0 18px rgba(0, 150, 57, .28), 0 1px 3px rgba(0, 0, 0, .6); } /* ---------- Flag of Palestine ---------- assets/flag-palestine.svg, the public-domain Wikimedia file: 2:1, three equal bands with the red hoist triangle reaching one third of the length. Set a width; the intrinsic ratio supplies the height. */ .flag-ps { display: block; flex: 0 0 auto; height: auto; border-radius: 1px; } /* Thin four-colour rule, for use as a section or footer divider. */ .flag-rule { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ED2E38 0 25%, #000 25% 50%, #fff 50% 75%, #009639 75% 100%); } .brand-text { display: flex; flex-direction: column; line-height: 1.24; } .brand-text strong { font-family: var(--serif); font-size: 16px; font-weight: 600; } .brand-text em { font-style: normal; font-size: 11px; color: var(--muted); letter-spacing: .05em; } /* Never wrap: a second row of links would change the height of a sticky bar that every scroll offset in the page is measured against. The bar tightens at the breakpoints below instead, and collapses to a menu at 860px. */ .nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: nowrap; white-space: nowrap; } .nav a { color: var(--text-2); font-size: 13.5px; font-weight: 500; padding: 8px 13px; border-radius: 9px; transition: background .2s, color .2s; } .nav a:hover { background: var(--panel-hi); color: var(--text); text-decoration: none; } .nav a.active { background: var(--accent-soft); color: var(--accent); } /* A record that silently goes stale is worse than one that says so. */ .freshness { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; padding: 6px 11px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); cursor: default; } .freshness[hidden] { display: none; } .freshness b { color: var(--text-2); font-weight: 600; } .freshness .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--green); box-shadow: 0 0 0 3px rgba(79, 174, 130, .16); animation: pulse 2.6s ease-in-out infinite; } .freshness.stale { border-color: rgba(217, 164, 65, .4); } .freshness.stale .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(217, 164, 65, .16); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .search-open { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); padding: 7px 12px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; transition: border-color .2s, color .2s; } .search-open:hover { border-color: var(--line-hi); color: var(--text); } /* The word carries the button while there is room for it; the glyph takes over when there is not, so the control is never an empty box. */ .search-icon { display: none; width: 15px; height: 15px; } .search-open kbd { font-family: var(--mono); font-size: 10.5px; background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); } .nav-toggle { display: none; } /* ---------- Layout ---------- */ main { position: relative; z-index: 2; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; } .view { animation: rise .5s cubic-bezier(.2, .7, .3, 1) both; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .section { padding: 74px 0; border-top: 1px solid var(--line); } .section:first-of-type { border-top: 0; } .section-head { margin-bottom: 34px; max-width: 800px; } .eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 12px; } .section-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; } .section-head p { color: var(--text-2); margin: 0; font-size: 15.5px; } .muted { color: var(--muted); } .small { font-size: 13px; } /* Chapter nav for the Data route. Fifty charts on one page is an archive, not an argument; the chapters give each argument its own screen. */ .subnav { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: var(--topbar-h); z-index: 20; margin: 0 -26px 6px; padding: 14px 26px; background: var(--bar-2); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .subnav a { padding: 7px 14px; border-radius: 20px; font-size: 13px; color: var(--text-2); border: 1px solid var(--line); background: var(--panel); white-space: nowrap; transition: border-color .2s, color .2s, background .2s; } .subnav a:hover { border-color: var(--line-hi); color: var(--text); text-decoration: none; } .subnav a.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: calc(100vh - var(--topbar-h)); display: flex; align-items: center; padding: 60px 0 90px; } .hero-inner { max-width: 940px; } .hero-flag { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .hero-flag .flag-ps { width: 56px; box-shadow: 0 0 30px rgba(0, 150, 57, .26), 0 2px 6px rgba(0, 0, 0, .6); } .hero-flag span { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); } .hero h1 { font-size: clamp(38px, 6.6vw, 82px); line-height: 1.04; letter-spacing: -0.025em; margin-bottom: 26px; } .hero h1 span { color: var(--accent); display: block; } .hero-lede { font-size: clamp(16px, 1.7vw, 20px); color: var(--text-2); max-width: 720px; margin-bottom: 34px; } .hero-meta { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 40px; } .hero-meta b { color: var(--text); font-weight: 600; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } /* What changed while you were away, counted from the figures held in this browser alone — nothing is sent anywhere. */ .since-last { margin-top: 30px; padding: 13px 18px; max-width: 720px; font-size: 14px; color: var(--text-2); line-height: 1.6; border-left: 3px solid var(--red); border-radius: 0 10px 10px 0; background: rgba(210, 83, 76, .1); } .since-last[hidden] { display: none; } .since-last b { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; } /* Naming the points. The control is quiet by design: it is an invitation, not a headline, and it sits below the calls to action rather than among them. */ .hero-names { margin-top: 26px; max-width: 720px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .names-toggle { flex: none; padding: 8px 15px; border-radius: 9px; cursor: pointer; font: 600 12.5px/1 var(--sans); letter-spacing: .02em; color: var(--text-2); background: var(--panel); border: 1px solid var(--line-hi); transition: border-color .2s, color .2s, background .2s; } .names-toggle:hover:not(:disabled) { border-color: var(--accent); color: var(--text); } .names-toggle.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .names-toggle:disabled { opacity: .6; cursor: progress; } .names-note { flex: 1 1 300px; font-size: 12.5px; line-height: 1.6; color: var(--muted); } .names-note b { color: var(--text-2); font-variant-numeric: tabular-nums; } /* The label follows the cursor over the WebGL canvas, so it cannot be a child of any card and must sit above every layer but the search overlay. */ .name-tip { position: fixed; z-index: 150; pointer-events: none; max-width: 300px; padding: 10px 13px; border-radius: 10px; display: grid; gap: 3px; background: var(--overlay); border: 1px solid var(--line-hi); box-shadow: var(--shadow-2); } .name-tip[hidden] { display: none; } .name-tip-ar { font-size: 17px; color: var(--text); line-height: 1.4; } .name-tip-en { font-size: 13px; color: var(--text-2); } .name-tip-meta { font-size: 11.5px; color: var(--muted); } .btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 11px; font-size: 14.5px; font-weight: 600; border: 1px solid var(--line-hi); background: var(--panel); color: var(--text); cursor: pointer; transition: transform .2s, border-color .2s, background .2s; } .btn:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #1a1204; } .btn.primary:hover { background: #e8b755; border-color: #e8b755; } .scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 9px; } .scroll-hint::after { content: ""; width: 1px; height: 34px; background: linear-gradient(180deg, var(--accent), transparent); animation: hint 2s ease-in-out infinite; } @keyframes hint { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } /* ---------- Cards & grids ---------- */ .grid { display: grid; gap: 18px; } .grid.c2 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c4 { grid-template-columns: repeat(4, 1fr); } .grid.wide-left { grid-template-columns: 1.55fr 1fr; } .card { position: relative; background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-1); transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s, border-color .35s; transform-style: preserve-3d; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(150deg, rgba(255, 255, 255, .1), transparent 42%); opacity: .6; } .card.lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--line-hi); } .stat { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 22px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .3s, border-color .3s; } .stat:hover { transform: translateY(-4px); border-color: var(--line-hi); } .stat .val { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; } .stat .val .suffix { font-size: .5em; color: var(--accent); margin-left: 2px; } .stat .lbl { font-size: 13px; font-weight: 600; color: var(--text-2); } .stat .note { font-size: 12px; color: var(--muted); line-height: 1.45; } .stat .src { font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 8px; opacity: .8; } .stat.red .val { color: var(--red); } .stat.amber .val { color: var(--accent); } .stat.blue .val { color: var(--blue); } .stat.green .val { color: var(--green); } .stat.violet .val { color: var(--violet); } /* ---------- Share cards ---------- The button sits out of the way until the card it belongs to is hovered or the button itself is focused, so a page of forty figures is not a page of forty buttons — but it is always reachable from the keyboard. */ .share-card { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; background: transparent; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); padding: 3px 8px; cursor: pointer; transition: opacity .2s, color .2s, border-color .2s; /* WCAG 2.2 target size (minimum) is 24x24 CSS pixels; the text alone is 22. */ min-height: 24px; min-width: 24px; } .share-card:hover { color: var(--text); border-color: var(--line-hi); } .stat .share-card { position: absolute; top: 10px; right: 10px; opacity: 0; } .stat:hover .share-card, .stat:focus-within .share-card, .share-card:focus-visible { opacity: 1; } .st-top .share-card { margin-left: auto; } @media (hover: none) { .stat .share-card { opacity: 1; } } /* ---------- Charts ---------- */ .chart-card { padding: 22px 22px 10px; } .chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 16px; margin-bottom: 6px; } .chart-head > div:first-child { flex: 1 1 320px; min-width: 0; } .chart-head h3 { font-size: 18px; margin-bottom: 5px; } .chart-head p { margin: 0; font-size: 13px; color: var(--muted); max-width: 62ch; } /* Most refs are a section number; a few carry a whole citation. Those must wrap inside the card rather than run out of it — `flex: 0 0 auto` let one reach 835px inside a 390px screen, where it was simply clipped. */ .chart-ref { flex: 0 1 auto; max-width: 100%; overflow-wrap: anywhere; font-family: var(--mono); font-size: 11px; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 20px; border: 1px solid rgba(217, 164, 65, .25); } .chart { width: 100%; height: 340px; } .chart.tall { height: 440px; } .chart.xtall { height: 540px; } .chart-note { font-size: 12px; color: var(--muted); padding: 0 2px 14px; margin: 0; } /* Every chart is a claim, so every chart has to be checkable: the plotted numbers, a citable image, the raw CSV, and a link straight to the card. */ .chart-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 1 auto; } .chart-tool { background: transparent; border: 1px solid var(--line); color: var(--muted); font: inherit; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; padding: 3px 9px; border-radius: 20px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .chart-tool:hover { border-color: var(--line-hi); color: var(--text); background: var(--panel); } .chart-tool[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .chart-tool[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .chart-table { margin: 4px 0 16px; } .chart-table[hidden] { display: none; } .chart-table .table-wrap { max-height: 420px; overflow-y: auto; } .chart-table table { font-size: 12.5px; } .chart-table tbody td { padding: 7px 13px; } /* A deep link lands on a card; the flash says which one. */ .chart-card.flash { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(217, 164, 65, .45), var(--shadow-2); } @media (max-width: 600px) { .chart-head > div:first-child { flex: 1 1 100%; } .chart-tools { width: 100%; justify-content: flex-start; } .chart-ref { order: 99; } } .chart-toggle { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .chart-toggle button { background: var(--panel); border: 1px solid var(--line); color: var(--text-2); font: inherit; font-size: 12.5px; padding: 5px 13px; border-radius: 20px; cursor: pointer; transition: all .2s; } .chart-toggle button:hover { border-color: var(--line-hi); color: var(--text); } .chart-toggle button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .02); } /* A table wider than its card scrolls sideways, which is right, but nothing on screen says so: the last column is simply cut off. The fade is painted on the wrapper's right edge and removed once the scroll reaches the end (app.js sets data-scrolled), and a one-line note states it for anyone who cannot see the fade at all. */ .table-scroll { position: relative; } .table-scroll::after { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 46px; pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(to right, rgba(10, 14, 23, 0), var(--bg-2)); opacity: 1; transition: opacity .2s; } .table-scroll[data-scrolled="end"]::after { opacity: 0; } .table-scroll[data-overflow="no"]::after { display: none; } .table-note { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; margin: 6px 0 0; } .table-scroll[data-overflow="no"] + .table-note { display: none; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } thead th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 12px 15px; font-weight: 600; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: #0a0e17; border-bottom: 1px solid var(--line); white-space: nowrap; } tbody td { padding: 11px 15px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: top; color: var(--text-2); } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: rgba(255, 255, 255, .028); color: var(--text); } tbody td strong { color: var(--text); } /* ---------- The elements matrix and the state scorecard ---------- */ /* Both are ordinary tables rather than drawn grids: the cells carry sentences and links, which a canvas cannot hold, and a screen reader reads a table of elements against evidence in exactly the order the argument runs. */ .matrix-block { margin-bottom: 46px; } .matrix-block:last-child { margin-bottom: 0; } .matrix-title { font-family: var(--serif); font-size: 23px; margin: 0 0 12px; color: var(--text); } .matrix-quote { margin: 0 0 14px; padding: 14px 18px; border-left: 2px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--text); } .matrix-quote cite { display: block; margin-top: 8px; font: inherit; font-size: 12px; font-style: normal; letter-spacing: .04em; color: var(--muted); } .matrix-lede { max-width: 78ch; margin: 0 0 18px; color: var(--text-2); font-size: 14.5px; line-height: 1.65; } .matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } .matrix, .scorecard { min-width: 880px; font-size: 13.5px; } .matrix thead th, .scorecard thead th { vertical-align: bottom; white-space: normal; } .matrix thead th span, .scorecard thead th span { display: block; margin-top: 6px; max-width: 26ch; font-weight: 400; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--muted); } .matrix tbody th, .scorecard tbody th { text-align: left; vertical-align: top; padding: 14px 15px; font-weight: 600; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, .05); background: rgba(255, 255, 255, .02); } .matrix tbody th { width: 22%; min-width: 190px; } .matrix-corner { width: 22%; } .matrix-key { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--accent); background: var(--accent-soft); } .matrix-act { display: block; font-family: var(--serif); font-size: 15.5px; line-height: 1.45; font-weight: 400; } .matrix tbody td { padding: 14px 15px; } .matrix tbody td p { margin: 0; line-height: 1.6; } .matrix-foot { margin-top: 10px !important; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .matrix-ref { font-family: var(--mono); font-size: 11px; color: var(--muted); } .matrix-foot a { font-size: 11.5px; color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; } .matrix-foot a:hover { border-bottom-color: currentColor; } .matrix-empty { color: var(--muted); } .scorecard tbody th { width: 16%; min-width: 150px; white-space: nowrap; } .scorecard tbody td { white-space: nowrap; } .scorecard td.wrapcell { white-space: normal; } .scorecard td.num { font-family: var(--mono); text-align: right; } .scorecard .yes { color: var(--green); } .scorecard .no { color: var(--muted); } .scorecard .tag { margin-left: 8px; padding: 1px 6px; border-radius: 5px; font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--muted); background: rgba(255, 255, 255, .06); } .sort-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; } .sort-btn i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .25; } .sort-btn:hover i { opacity: .6; } .sort-btn.on i { opacity: 1; } .sort-btn.on[data-dir="asc"] i { border-top: 0; border-bottom: 5px solid currentColor; } /* ---------- Timeline ---------- */ .tl-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; } .tl-controls input, .tl-controls select { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 9px 13px; border-radius: 10px; font: inherit; font-size: 13.5px; } .tl-controls input { min-width: 260px; flex: 1 1 260px; } .tl-controls input:focus, .tl-controls select:focus { outline: none; border-color: var(--accent); } .tl { position: relative; padding-left: 34px; } .tl::before { content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(180deg, transparent, var(--line-hi) 6%, var(--line-hi) 94%, transparent); } .tl-item { position: relative; padding: 0 0 24px; } .tl-item::before { content: ""; position: absolute; left: -30px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(217, 164, 65, .1); } .tl-item.era-early::before { border-color: var(--muted); box-shadow: 0 0 0 4px rgba(125, 135, 156, .1); } .tl-item.era-mid::before { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(86, 168, 224, .1); } .tl-item.era-now::before { border-color: var(--red); box-shadow: 0 0 0 4px rgba(210, 83, 76, .12); } .tl-date { font-family: var(--mono); font-size: 11.5px; color: var(--accent); letter-spacing: .05em; margin-bottom: 3px; } .tl-item.era-early .tl-date { color: var(--muted); } .tl-item.era-mid .tl-date { color: var(--blue); } .tl-item.era-now .tl-date { color: var(--red); } .tl-text { color: var(--text-2); font-size: 14.5px; } .tl-text mark, .tl-note mark { background: rgba(217, 164, 65, .25); color: var(--text); border-radius: 3px; padding: 0 2px; } /* Context entries sit a shade back from the record of crimes they explain. */ .tl-item.tl-context::before { left: -28px; top: 10px; width: 6px; height: 6px; background: var(--line-hi); border-width: 1px; box-shadow: none; } .tl-item.tl-context .tl-text { color: var(--muted); } .tl-item.tl-record .tl-text { font-weight: 500; } .tl-note { margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--muted); border-left: 2px solid var(--line); padding-left: 11px; max-width: 74ch; } .tl-item.tl-record .tl-note { border-left-color: rgba(210, 83, 76, .35); } /* ---------- Evidence browser ---------- */ .ev-layout { display: grid; grid-template-columns: 288px 1fr; gap: 30px; align-items: start; } .ev-toc { position: sticky; top: calc(var(--topbar-h) + 20px); max-height: calc(100vh - var(--topbar-h) - 46px); overflow-y: auto; padding-right: 8px; border-right: 1px solid var(--line); } .ev-toc::-webkit-scrollbar { width: 6px; } .ev-toc::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 3px; } .ev-toc-search { width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 13px; margin-bottom: 14px; } .ev-toc-search:focus { outline: none; border-color: var(--accent); } .ev-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 12.8px; color: var(--text-2); line-height: 1.4; border-left: 2px solid transparent; } .ev-toc a:hover { background: var(--panel-hi); color: var(--text); text-decoration: none; } .ev-toc a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); } .ev-toc a.sub { padding-left: 22px; font-size: 12.2px; color: var(--muted); } .ev-toc .grp { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 18px 0 7px 10px; } .ev-body { min-width: 0; } .ev-part { margin-bottom: 58px; scroll-margin-top: calc(var(--topbar-h) + 20px); } .ev-part > h2 { font-size: clamp(22px, 2.7vw, 30px); padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line); } /* The Evidence route lays out 131 sections, the Timeline 215 entries and the Statements route 41 cards, and the browser styles and lays out every one of them before it paints the first. `content-visibility: auto` skips the work for anything off screen; `contain-intrinsic-size` supplies a placeholder height so the scrollbar does not jump as each one is reached. The values are rough averages — being wrong costs a small scroll correction, being absent costs the whole layout up front. Print is excluded: printing reads the whole document at once, and a skipped section prints blank. */ @media screen { .ev-section { content-visibility: auto; contain-intrinsic-size: auto 420px; } .tl-item { content-visibility: auto; contain-intrinsic-size: auto 110px; } .st-card { content-visibility: auto; contain-intrinsic-size: auto 340px; } } .ev-section { margin: 34px 0; scroll-margin-top: calc(var(--topbar-h) + 20px); } .ev-section > h3 { font-size: 19px; color: var(--accent); margin-bottom: 14px; } .ev-body p { color: var(--text-2); margin: 0 0 15px; } .ev-body h4 { font-size: 15.5px; color: var(--text); margin: 22px 0 10px; font-family: var(--sans); font-weight: 700; } .ev-body ul { margin: 0 0 16px; padding-left: 20px; } .ev-body li { color: var(--text-2); margin-bottom: 8px; } .ev-body li.lvl1 { margin-left: 18px; font-size: 14px; color: var(--muted); } .ev-body strong { color: var(--text); font-weight: 600; } .ev-body em { color: var(--text-2); } .ev-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; } .ev-body .table-wrap { margin: 0 0 20px; } .ev-body mark { background: rgba(217, 164, 65, .28); color: var(--text); border-radius: 3px; padding: 0 2px; } /* ---------- Method ---------- */ .method-falsify { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; } .method-falsify li { color: var(--text-2); line-height: 1.62; } .method-falsify li b { color: var(--text); } .method-grid-note { color: var(--muted); } /* ---------- Statements ---------- */ .quote-card { padding: 26px; } .quote-card blockquote { margin: 0 0 16px; padding-left: 18px; border-left: 3px solid var(--red); font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--text); } .quote-card .who { font-size: 13.5px; font-weight: 600; color: var(--accent); } .quote-card .role { font-size: 12.5px; color: var(--muted); } .quote-card .full { font-size: 13px; color: var(--text-2); margin-top: 12px; } /* Category filter chips, shared by Statements and Sources. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .chip { --chip: var(--muted); display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); color: var(--text-2); padding: 7px 12px; border-radius: 20px; font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .chip:hover { border-color: var(--line-hi); color: var(--text); } .chip i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .chip span { font-family: var(--mono); font-size: 11px; color: var(--muted); } .chip.active { border-color: var(--chip); color: var(--text); background: rgba(255, 255, 255, .05); } .chip.active span { color: var(--text-2); } /* Not a filter — a status badge, used in the embargo tracker. */ .chip.static { cursor: default; text-transform: capitalize; font-size: 11.5px; padding: 3px 11px; border-color: currentColor; background: transparent; } .chip.static.halted { color: var(--green); background: rgba(79, 174, 130, .12); } .chip.static.partial { color: var(--accent); background: var(--accent-soft); } .chip.static.continuing { color: var(--red); background: var(--red-soft); } .st-card { display: flex; flex-direction: column; } .st-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; } .st-date { margin-left: auto; } .st-tier { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(217, 164, 65, .25); padding: 3px 9px; border-radius: 20px; } .st-date { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; } .st-card blockquote { font-size: 16.5px; } .st-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 0; } .st-cat { --chip: var(--muted); font-size: 11px; color: var(--chip); padding: 2px 8px; border-radius: 20px; border: 1px solid currentColor; opacity: .85; } .st-meta { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); } .st-meta p { font-size: 13px; color: var(--text-2); margin: 0 0 9px; line-height: 1.6; } .st-meta p:last-child { margin-bottom: 0; } .st-k { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 7px; } .st-src { font-size: 12px !important; color: var(--muted) !important; font-style: italic; } /* ---------- Sources ---------- */ .src-group { margin-bottom: 34px; } .src-group h3 { font-size: 16px; color: var(--accent); margin-bottom: 12px; } .src-blurb { max-width: 76ch; margin: -6px 0 14px; } .src-list { list-style: none; margin: 0; padding: 0; } .src-list li { padding: 9px 14px; border-left: 2px solid var(--line); font-size: 13.5px; color: var(--text-2); margin-bottom: 4px; transition: border-color .2s, background .2s; } .src-list li:hover { border-left-color: var(--accent); background: var(--panel); } .src-entry { padding: 12px 16px !important; } .src-title { font-size: 14.5px; color: var(--text); font-weight: 600; } .src-title a { color: var(--text); } .src-title a:hover { color: var(--accent); } .src-org { font-family: var(--mono); font-size: 11.5px; color: var(--accent); margin-top: 3px; } .src-note { font-size: 13px; color: var(--text-2); margin-top: 6px; max-width: 92ch; line-height: 1.6; } .bib summary { cursor: pointer; font-size: 13.5px; color: var(--text-2); padding: 11px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); width: fit-content; } .bib summary:hover { border-color: var(--line-hi); color: var(--text); } .bib[open] summary { margin-bottom: 24px; } /* ---------- Search overlay ---------- */ .search-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(3, 5, 9, .8); backdrop-filter: blur(10px); display: flex; align-items: flex-start; justify-content: center; padding: 90px 20px 20px; } .search-overlay[hidden] { display: none; } .search-panel { width: min(820px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--panel-solid); border: 1px solid var(--line-hi); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; } #search-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; font-size: 17px; padding: 20px 24px; } #search-input:focus { outline: none; } .search-meta { padding: 9px 24px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); } .search-results { overflow-y: auto; padding: 8px; } .search-hit { display: block; padding: 13px 16px; border-radius: 10px; color: var(--text-2); border: 1px solid transparent; } .search-hit:hover, .search-hit.on { background: var(--panel-hi); border-color: var(--line); text-decoration: none; } .search-hit .crumb { font-size: 11px; color: var(--accent); letter-spacing: .05em; margin-bottom: 4px; } .search-hit .snip { font-size: 13.5px; line-height: 1.55; } .search-hit mark { background: rgba(217, 164, 65, .3); color: var(--text); border-radius: 3px; } /* The index now covers statements, legal findings, charts, chronology entries, scorecard rows and sources as well as the report, so the results are grouped by what was found and the matching title is shown above the snippet. */ .search-group { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 16px 6px; border-top: 1px solid var(--line); margin-top: 6px; } .search-results > .search-group:first-child { border-top: 0; margin-top: 0; padding-top: 6px; } .hit-title { font-size: 14.5px; color: var(--text); margin-bottom: 3px; font-weight: 500; } /* The arrow-key cursor. Distinct from :hover so a reader driving the list from the keyboard can see where they are while the pointer sits somewhere else. */ .search-hit.cursor { background: var(--panel-hi); border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: -2px; } /* Where a search result landed. Held for a moment so the reader can see which of two hundred paragraphs was the one they asked for. */ @keyframes search-target-flash { 0%, 60% { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } } .search-target { animation: search-target-flash 2.2s ease-out 1; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .search-target { animation: none; background: var(--accent-soft); border-radius: 6px; } } /* ---------- Footer ---------- */ .footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 40px 0; margin-top: 40px; background: var(--bg-2); } .footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; } .footer p { font-size: 13px; color: var(--text-2); margin: 0 0 8px; max-width: 90ch; } /* A link inside a block of text cannot be marked by colour alone: at the contrast this theme uses, a reader with a colour-vision deficiency cannot tell it from the sentence around it. */ .footer p a { text-decoration: underline; text-underline-offset: 2px; } .footer-links { font-family: var(--mono); font-size: 12px; color: var(--muted); } .footer-links a { color: var(--muted); } .footer-links a:hover { color: var(--accent); } .footer-flag { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .footer-flag .flag-ps { width: 34px; } .footer-flag .flag-rule { flex: 1 1 auto; opacity: .5; } /* The citation block. Closed by default: it is for the reader who needs it, and it should not push the rest of the footer down for the reader who does not. */ .cite { margin: 18px 0 20px; max-width: 90ch; border: 1px solid var(--line); background: var(--panel); border-radius: 2px; } .cite > summary { cursor: pointer; padding: 11px 15px; font-size: 13px; font-weight: 600; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 9px; } .cite > summary::-webkit-details-marker { display: none; } .cite > summary::before { content: '＋'; font-family: var(--mono); color: var(--accent); font-size: 13px; } .cite[open] > summary::before { content: '－'; } .cite > summary:hover { color: var(--text); } .cite-body { padding: 4px 15px 15px; border-top: 1px solid var(--line); } .cite-body p { margin: 12px 0 14px; } .cite-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: start; margin-bottom: 11px; } .cite-row b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 4px; } .cite-row code { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; word-break: break-word; background: none; padding: 0; } .cite-row button { font: inherit; font-size: 11.5px; padding: 4px 11px; cursor: pointer; white-space: nowrap; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 2px; } .cite-row button:hover { color: var(--text); border-color: var(--line-hi); } @media (max-width: 560px) { .cite-row { grid-template-columns: 1fr auto; } .cite-row b { grid-column: 1 / -1; padding-top: 0; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .grid.c4 { grid-template-columns: repeat(2, 1fr); } .grid.wide-left { grid-template-columns: 1fr; } .ev-layout { grid-template-columns: 1fr; } .ev-toc { position: static; max-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; } } @media (max-width: 860px) { .topbar { gap: 12px; padding: 0 16px; } /* The chapter bar bleeds to the page edge, so its negative margin has to track .wrap's padding at every breakpoint or it pushes the page sideways. */ .subnav { margin: 0 -16px 6px; padding: 12px 16px; } .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } .wrap { padding: 0 16px; } .section { padding: 50px 0; } .chart { height: 300px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } } /* ---------- Accessibility ---------- */ /* Keyboard users get the same visible affordance mouse users do. */ :where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 500; background: var(--accent); color: #1a1204; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 0 0 10px 10px; transition: top .15s; } .skip-link:focus { top: 0; text-decoration: none; } /* Lifted again where the viewer has asked the system for more contrast, and the hairlines with them: at AAA the text is legible but the panel edges that separate one figure from the next are not. */ @media (prefers-contrast: more) { :root { --muted: #b6bfd0; --text-2: #d3daea; --line: rgba(255, 255, 255, .18); --line-hi: rgba(255, 255, 255, .3); } :root[data-theme="light"] { --muted: #3f4757; --text-2: #232a36; --line: rgba(15, 20, 32, .24); --line-hi: rgba(15, 20, 32, .38); } } /* ---------- Guided path ---------- */ .tour-rail { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; } .tour-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; transition: border-color .18s ease, color .18s ease, background .18s ease; } .tour-dot:hover { border-color: var(--line-hi); color: var(--text); text-decoration: none; } .tour-dot.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .tour-step { max-width: 760px; margin-bottom: 22px; } .tour-count { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .tour-step h3 { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; margin-bottom: 12px; } .tour-claim { font-size: 17px; line-height: 1.62; color: var(--text-2); } /* Three cells so the middle link stays centred whether or not a previous step exists; the empty span on step one is holding that column open. */ .tour-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 22px; } .tour-nav > :first-child { justify-self: start; } .tour-nav > :last-child { justify-self: end; } @media (max-width: 640px) { .tour-nav { grid-template-columns: 1fr; } .tour-nav > :last-child { justify-self: stretch; } } /* ---------- Rebuttals ---------- */ .rebuttal-list { display: flex; flex-direction: column; gap: 12px; } .rebuttal { background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014)); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .3s, background .3s; } .rebuttal[open] { border-color: var(--line-hi); background: var(--panel-solid); } .rebuttal:hover { border-color: var(--line-hi); } .rebuttal > summary { display: flex; align-items: baseline; gap: 14px; padding: 20px 24px; cursor: pointer; list-style: none; } .rebuttal > summary::-webkit-details-marker { display: none; } .rebuttal-n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); flex: 0 0 auto; padding-top: 3px; } .rebuttal[open] .rebuttal-n { color: var(--red); } .rebuttal-claim { flex: 1 1 auto; min-width: 0; font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--text); } .rebuttal[open] .rebuttal-claim { color: var(--text-2); } /* The cue reads as the promise of the page: every claim has an answer. */ .rebuttal-cue { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 3px 11px; background: var(--accent-soft); transition: opacity .25s; } .rebuttal[open] .rebuttal-cue { opacity: .35; } .rebuttal-body { padding: 0 24px 24px; } .rebuttal-answer { border-left: 3px solid var(--red); padding-left: 20px; margin-bottom: 20px; } .rebuttal-answer p { color: var(--text-2); line-height: 1.72; margin: 0 0 12px; } .rebuttal-answer ul { margin: 0; padding-left: 20px; } .rebuttal-answer li { color: var(--text-2); line-height: 1.72; margin-bottom: 12px; } .rebuttal-answer li.lvl1 { margin-left: 18px; color: var(--muted); font-size: 14.5px; } .rebuttal-answer strong { color: var(--text); } .rebuttal-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .rebuttal-tools .chart-tool { text-decoration: none; } @media (max-width: 700px) { /* The freshness pill does not wrap and does not shrink, so on a phone it pushed the whole page sideways — 556px of layout inside a 390px screen. The overview states the same currency in its hero line, so nothing is lost by dropping it here. */ .freshness { display: none; } .rebuttal > summary { padding: 16px 18px; gap: 10px; } .rebuttal-claim { font-size: 17px; } .rebuttal-cue { display: none; } .rebuttal-body { padding: 0 18px 18px; } .rebuttal-answer { padding-left: 14px; } } /* ---------- Theme switch ---------- */ .theme-toggle { display: grid; place-items: center; width: 38px; height: 34px; flex: 0 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; color: var(--text-2); cursor: pointer; font-size: 15px; line-height: 1; transition: border-color .2s, color .2s; } .theme-toggle:hover { border-color: var(--line-hi); color: var(--text); } /* The toggle is a fourth control in a bar that was already close to full, and its 38px was enough at laptop widths to push the last nav links onto a second row. The bar now sheds width in three steps, in order of how much each part carries: the pill's label first (the date still reads on its own), then the nav's padding and the strapline, then the search word. */ @media (max-width: 1500px) { .topbar { gap: 14px; } .nav a { padding: 8px 10px; font-size: 13px; } .fresh-label { display: none; } } @media (max-width: 1400px) { .topbar { gap: 10px; padding: 0 18px; } .nav a { padding: 8px 7px; } .brand-text em { display: none; } } @media (max-width: 1200px) { .search-open span { display: none; } .search-icon { display: block; } .search-open { padding: 7px 10px; } /* The date is the widest thing in the bar that is not a link, so it goes before the links do. The series is still dated in the footer, to the month rather than the day. */ .freshness { display: none; } } /* Below this the nine links no longer fit beside the brand and the controls, so they become a menu. This is the bar's breakpoint, not the page's: the grids stay two and three columns down to 860px. The number is what the parts measure, not a round figure: brand and nine links and two buttons come to about 1,020px, and the bar is given a little over that. */ @media (max-width: 1080px) { /* The nav is out of flow once it is a menu, so its margin-left:auto no longer pushes anything: the first remaining control takes over. */ .theme-toggle { margin-left: auto; } /* On a narrow phone the title is the only elastic thing in the bar: let it ellipsis rather than push the menu button off the screen. */ .brand { flex: 0 1 auto; min-width: 0; } .brand-text { min-width: 0; } .brand-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav { position: fixed; top: var(--topbar-h); left: 0; right: 0; flex-direction: column; background: var(--panel-solid); border-bottom: 1px solid var(--line); padding: 12px; gap: 2px; display: none; } .nav.open { display: flex; } .nav a { padding: 11px 14px; font-size: 13.5px; } .nav-toggle { display: block; width: 38px; height: 34px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 16px; height: 1.5px; background: var(--text); } .nav-toggle span { top: 50%; } .nav-toggle span::before { top: -5px; left: 0; transform: none; } .nav-toggle span::after { top: 5px; left: 0; transform: none; } } /* ---------- Embeddable charts ---------- `#/embed/` is one chart, its caption and its source, with nothing else on the page: no navigation, no scene, no footer. It exists so the record can be quoted in place — a newsroom or a campaign can iframe a chart and the figure still carries the source it came from and a link back. */ body[data-view="embed"] { background: var(--bg-2); overflow: auto; } body[data-view="embed"] .topbar, body[data-view="embed"] .footer, body[data-view="embed"] #scene, body[data-view="embed"] #scene-veil, body[data-view="embed"] .skip-link { display: none; } body[data-view="embed"] #app { padding: 0; } .embed { display: flex; flex-direction: column; min-height: 100vh; padding: 14px 16px 12px; gap: 10px; } .embed-head h1 { font-size: 19px; line-height: 1.25; margin-bottom: 4px; } .embed-head p { margin: 0; font-size: 13px; color: var(--muted); } .embed .chart { flex: 1 1 auto; min-height: 280px; height: auto; } .embed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 9px; font-size: 12px; color: var(--muted); } .embed-foot a { color: var(--accent); } .embed-foot .flag-ps { width: 20px; } .embed-missing { padding: 40px 16px; color: var(--muted); } /* ---------- Open data ---------- */ .ds-list { display: flex; flex-direction: column; gap: 10px; } .ds { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .ds:hover { border-color: var(--line-hi); } .ds h3 { font-size: 16px; font-family: var(--sans); font-weight: 600; } .ds p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); } .ds .src { font-size: 12px; color: var(--muted); margin-top: 6px; } .ds-meta { text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; } .ds-meta a { display: inline-block; margin-top: 6px; } .ds-fields { grid-column: 1 / -1; font-family: var(--mono); font-size: 11.5px; color: var(--muted); } .code-block { margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--text-2); white-space: pre; } /* ---------- Changelog ---------- */ .log { display: flex; flex-direction: column; gap: 0; } .log-entry { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); } .log-entry:last-child { border-bottom: 0; } .log-when { font-family: var(--mono); font-size: 12.5px; color: var(--accent); padding-top: 2px; } .log-what p { margin: 0 0 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.7; } .log-what p:last-child { margin-bottom: 0; } .log-tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px; margin-right: 8px; } /* ---------- Small screens ---------- Everything above assumes a desktop width. These are the rules that make the record usable on a phone, where most readers who arrive from a shared link will be: one column, shorter charts, tap targets that can actually be tapped, and no horizontal scroll on the page itself. */ @media (max-width: 460px) { :root { --topbar-h: 58px; --radius: 12px; --radius-lg: 16px; } .wrap { padding: 0 13px; } .section { padding: 38px 0; } .brand-mark { width: 22px; } .brand-text strong { font-size: 14px; } .topbar { gap: 8px; padding: 0 12px; } .search-open { padding: 6px 10px; } .search-open kbd { display: none; } .subnav { margin: 0 -13px 6px; padding: 11px 13px; } .chart { height: 260px; } .chart-head { flex-wrap: wrap; } .chart-head h3 { font-size: 16px; } /* A 24px pill is not a tap target. */ .chart-tool { min-height: 34px; padding: 6px 12px; } .chart-tools { gap: 6px; } .stat { padding: 16px 15px; } .stat .val { font-size: 30px; } .stat .lbl { font-size: 12.5px; } table { font-size: 12px; } thead th { padding: 9px 10px; } tbody td { padding: 9px 10px; } .table-wrap { -webkit-overflow-scrolling: touch; } .ds { grid-template-columns: 1fr; } .ds-meta { text-align: left; } .log-entry { grid-template-columns: 1fr; gap: 6px; } .ev-toc { max-height: 220px; } .tour-dot { width: 30px; height: 30px; font-size: 12px; } .footer { padding: 30px 0 40px; } } /* Long words in a narrow column — legislation names, urls in citations — otherwise push the whole page sideways. */ @media (max-width: 640px) { p, li, td, th, h1, h2, h3, h4 { overflow-wrap: anywhere; } .card, .stat, .ds, .rebuttal { min-width: 0; } } /* ---------- Print ---------- */ @media print { /* A4 with a real margin: the browser default leaves a line of body text hard against the edge of the sheet. */ @page { size: A4; margin: 16mm 14mm; } :root { --bg: #ffffff; --bg-2: #ffffff; --text: #111318; --text-2: #333944; --muted: #5a6270; --line: #d6dae2; --line-hi: #b9bfcb; } body { background: #fff; color: #111318; } #scene, #scene-veil, #boot, .search-overlay, .nav-toggle, .search-open, .scroll-hint, .chart-tools, .subnav, .freshness, .theme-toggle, .skip-link, .footer-links, .footer-flag { display: none !important; } /* On paper the whole table is there, so neither the fade nor the note that explains the sideways scroll means anything. */ .table-note { display: none !important; } .table-scroll::after { display: none !important; } .table-scroll, .table-wrap { overflow: visible !important; } .topbar { position: static; border-bottom: 1px solid #d6dae2; height: auto; padding: 10px 0; } .card, .stat { background: #fff !important; border: 1px solid #d6dae2; box-shadow: none; break-inside: avoid; } .card::before { display: none; } /* app.js fills in every chart's table before the print starts and marks the card. Those cards print the figures rather than the canvas: a chart drawn for a dark screen prints as a grey slab or as nothing, and a table can be read off the page and photocopied. A chart that could not be tabulated is not marked, and keeps its canvas. */ .chart-card[data-print-table] .chart { display: none !important; } .chart-table, .chart-table[hidden] { display: block !important; break-inside: avoid; } .chart-table .table-wrap { max-height: none !important; overflow: visible !important; } /* A closed accordion prints as a list of claims with no answers. */ .rebuttal-body { display: block !important; } .rebuttal { break-inside: avoid; border: 1px solid #d6dae2; background: #fff !important; } .rebuttal-cue, .rebuttal-tools { display: none !important; } .section { padding: 24px 0; break-before: auto; } .ev-toc { display: none; } .ev-layout { grid-template-columns: 1fr; } a { color: #111318; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #5a6270; word-break: break-all; } thead th { color: #111318; background: #f1f3f7; } table { break-inside: auto; } tr { break-inside: avoid; } thead { display: table-header-group; } h1, h2, h3, h4 { break-after: avoid; } /* The citation is the reason to print a page of this at all: it is what makes the printout quotable. It prints open, whatever state it is in on screen, and without the buttons, which are furniture on paper. */ .cite, .cite-body { display: block !important; border-color: #d6dae2; background: #fff !important; break-inside: avoid; } .cite > summary { list-style: none; font-weight: 600; } .cite > summary::before { display: none; } .cite-row button { display: none !important; } .cite-row { grid-template-columns: 74px 1fr; } .cite-row code { color: #333944; } } /* ---------- The children's record: unit charts drawn in the document ---------- Every mark on the Children route is an element, not a canvas. A canvas is invisible to a screen reader, cannot be quoted, and disappears entirely from the static snapshots, which carry no script — which is to say it would be missing from exactly the copy a search engine and a text browser read. The figures below therefore cost a few hundred DOM nodes and are worth it. */ .picto-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .picto { display: flex; flex-direction: column; gap: 18px; } .picto-key { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; margin: 0; } .picto-side { display: flex; flex-direction: column; gap: 8px; } .picto-lab { font-size: 13.5px; color: var(--text-2); } .picto-lab b { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; margin-right: 6px; } .picto-lab b.ps, .yrbar-val b.ps { color: var(--red); } .picto-lab b.il, .yrbar-val b.il { color: var(--blue); } .picto-grid { display: flex; flex-wrap: wrap; gap: 3px 3px; align-items: flex-end; } .picto-grid.ps { color: var(--red); } .picto-grid.il { color: var(--blue); } .picto-fig { width: 9px; height: 20px; flex: 0 0 auto; fill: currentColor; } .picto-short { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; } /* Year bars. Two rows of colour per year on one track, so the reader compares lengths rather than reading a legend back into a stack. */ .yrbars { display: flex; flex-direction: column; gap: 7px; } .yrbar { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; } .yrbar-lab { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .yrbar-track { display: flex; flex-direction: column; gap: 2px; } .yrbar-fill { display: block; height: 7px; border-radius: 0 2px 2px 0; min-width: 0; } .yrbar-fill.ps { background: var(--red); } .yrbar-fill.il { background: var(--blue); } .yrbar-val { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .yrbar-val b { font-weight: 600; } .yrbar-val b + b { margin-left: 8px; } /* One column per year of age, 0 to 17. */ .agebars { display: grid; grid-template-columns: repeat(18, 1fr); gap: 4px; align-items: end; } .agebar { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .agebar-track { display: flex; align-items: flex-end; height: 130px; width: 100%; } .agebar-fill { display: block; width: 100%; background: var(--red); border-radius: 2px 2px 0 0; } .agebar-val { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; } .agebar-lab { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; } /* A partial row states one side, or one territory, and no total on the page is computed from it. It is dimmed so that it cannot be misread as a counted one. */ tr.row-partial td { opacity: .72; } @media (max-width: 640px) { .picto-fig { width: 8px; height: 17px; } .picto-grid { gap: 2px; } .yrbar { grid-template-columns: 46px 1fr; row-gap: 3px; } .yrbar-val { grid-column: 2; justify-self: start; } .agebars { gap: 2px; } .agebar-val { display: none; } .agebar-lab { font-size: 9px; } .agebar-track { height: 96px; } } /* The two tables on this page carry a sentence of prose in their last column. Left to the automatic layout, a narrow screen gives that column forty pixels and every row becomes a tower of one-word lines, so the table is held to a readable width and scrolled sideways instead, which is what the table wrapper and its edge fade already announce. */ .ch-table { min-width: 700px; } .ch-table .col-period { min-width: 250px; } .ch-table .col-span { min-width: 165px; } .ch-table .col-year { min-width: 150px; } .ch-table .col-note { min-width: 350px; }