/* News-first presentation. Native disclosure controls; no JavaScript. */ :root { --teal: var(--established); } .news-view { font-family: var(--sans); background:var(--paper); color:var(--ink); } .news-view a { text-decoration:none; } .news-view svg, .record-source svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; } .news-view h1,.news-view h2,.news-view h3,.news-view h4,.news-view h5 { margin:0; } .news-view p { max-width:none; } .news-view summary { cursor:pointer;list-style:none; } .news-view summary::-webkit-details-marker { display:none; } .news-view section { padding:0;border:0; } .sr-only { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* Product identity; a short, quiet masthead. */ .masthead{background:#fff}.mast-row{height:60px;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.wordmark{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:.025em;line-height:1}.wordmark span{color:var(--teal)}.edition{font-size:9px;letter-spacing:.19em;font-weight:650;color:#62727c}.masthead nav{display:grid;grid-template-columns:.86fr .75fr 1.4fr .9fr;align-items:stretch;gap:8px;padding:0 16px;border-bottom:1px solid var(--rule)}.masthead nav a{display:flex;justify-content:center;align-items:center;min-height:45px;font-size:13px;color:#53626b;position:relative;font-weight:500}.masthead nav a.active{color:var(--ink);font-weight:700}.masthead nav .active:after{content:"";position:absolute;bottom:-1px;left:14px;right:14px;height:3px;border-radius:3px 3px 0 0;background:var(--ink)}.masthead nav a:hover{color:var(--teal)}.feed-intro{padding:23px 20px 21px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.075em;color:var(--muted);text-transform:uppercase;display:block}.feed-intro .eyebrow{margin-bottom:4px}.feed-intro h1{font-size:27px;letter-spacing:-.8px;line-height:1.22;font-weight:720}.feed-intro p{font-size:11px;margin-top:7px;color:var(--muted)}.feed-intro p span{padding:0 5px;color:#98a5ad}.news-feed{padding:0 12px 12px;display:flex;flex-direction:column;gap:12px} /* Developments are bounded reading units, not paragraphs in one document. */ .development{background:var(--card);border:1px solid #dee5e9;border-radius:14px;box-shadow:0 2px 3px #14303e03;overflow:hidden}.story-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:start;padding:16px 16px 0}.metadata{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:11px;line-height:1.4;color:#6a7780}.region{font-weight:650;color:#42535c}.meta-dot{color:#9babb4}.story-top time{font-size:11px;line-height:1.4;color:#6a7780;white-space:nowrap;font-variant-numeric:tabular-nums}.development h2{font:700 20px/1.25 var(--sans);letter-spacing:-.42px;padding:0 16px;margin:8px 0 9px}.development h2 a{display:block;text-decoration:none}.development h2 a:hover{color:#294e52}.summary-text{font-size:14px;line-height:1.55;color:#45535d;padding:0 16px;margin-bottom:15px}.disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:49px;background:#f1f6f6;border-top:1px solid #e1e9e9;padding:10px 16px;color:#234c4b;font-size:13px;font-weight:650}.disclosure>summary:hover{background:#e8f0f0}.disclosure-icon{height:27px;width:27px;display:grid;place-items:center;border:1px solid #cddddd;background:#fff9;border-radius:50%;flex-shrink:0}.disclosure-icon svg{width:17px;height:17px}.disclosure[open]>.disclosure-icon svg{transform:rotate(180deg)}.disclosure[open]>summary .disclosure-icon svg{transform:rotate(180deg)}.open-label{display:none}.disclosure[open]>summary .closed-label{display:none}.disclosure[open]>summary .open-label{display:inline}.disclosure[open]>summary{border-bottom:1px solid #dae5e4;background:#edf4f3} /* Optional evidence has no decorative crop and never asserts a verdict. */ .visual-preview{margin:0 16px 16px;border:1px solid #dce4e7;border-radius:9px;overflow:hidden}.preview-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#fff}.preview-pair>div{position:relative;min-width:0}.preview-pair img{display:block;width:100%;height:auto}.preview-pair span{position:absolute;bottom:6px;left:6px;border:1px solid #ffffff3d;border-radius:4px;padding:3px 5px;background:#142122df;color:#fff;font-size:9px;font-weight:550}.visual-preview figcaption{padding:9px 10px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;background:#f8fafb;color:#354954}.visual-preview figcaption svg{width:17px;height:17px;color:#63757f}.visual-preview small{display:block;font-size:10px;color:#71808a;font-weight:400;margin-top:1px} /* Expanded evidence uses typesetting and small tonal differences, not a dashboard. */ .expanded-intro{padding:20px}.expanded-intro p{font-size:12px;color:var(--muted);margin-top:5px}.evidence-body{padding:18px 16px 0}.known{padding:13px 14px;background:#f2f5f7;border-radius:8px;margin-bottom:23px}.known .eyebrow{font-size:10px;color:#4e6471;margin-bottom:6px}.known p{font-size:14px;line-height:1.6;color:#293d48}.section-heading{display:flex;align-items:baseline;gap:9px;justify-content:space-between;margin-bottom:14px}.section-heading h3{font-size:16px;font-weight:700;letter-spacing:-.2px}.section-heading>span:not(.section-icon){font-size:10px;color:#71808a}.section-heading .section-icon{display:flex;align-items:center;align-self:center;color:#6c7d86}.section-heading:has(.section-icon){justify-content:flex-start}.claim-block{padding:16px 0 20px;border-top:1px solid #e1e7ea}.claim-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.claim-top>span:first-child{font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:#6b7d88}.assessment{border-radius:5px;padding:3px 8px;font-size:11px;font-weight:650;line-height:1.5;background:#eef1f3;color:#495f6d}.assessment.lik{background:#fff2d9;color:#825d21}.assessment.est{background:#e1f0ea;color:#0b6b62}.assessment.unc{background:#eef1f3;color:#485b68}.assessment.unl,.assessment.out{background:#eeeef4;color:#5e5979}.claim-block h4{font-size:16px;line-height:1.42;letter-spacing:-.2px;font-weight:660}.explanation{margin-top:10px;font-size:14px;color:#45545e;line-height:1.6}.support{margin-top:14px}.support h5,.limits h5,.contradiction h5{font-size:11px;line-height:1.4;font-weight:700;margin-bottom:5px}.support h5{color:#425c60}.support p{font-size:13px;line-height:1.65;color:#495760}.limits{padding:11px 12px;margin-top:13px;border-left:2px solid #c5a569;background:#fbf7ee;border-radius:0 6px 6px 0}.limits h5{color:#806439}.limits p{font-size:13px;line-height:1.65;color:#655b49}.source-chip{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ebed;font-size:11px;color:#526873;min-height:36px;padding:6px 0;gap:8px}.source-chip svg{width:14px;height:14px}.source-chip:last-child{border-bottom:0}.limits .source-chip{border-color:#e9dfcd;color:#806439}.contradiction{margin-top:12px}.contradiction h5{color:#6c6278}.unknowns{display:flex;gap:11px;padding:16px 0 20px;margin-top:3px;border-top:1px solid #dce4e8}.unknown-icon{height:21px;width:21px;flex-shrink:0;display:grid;place-items:center;border:1px solid #aab7bf;color:#647580;font-size:12px;border-radius:50%;margin-top:1px}.unknowns h3{font-size:15px;margin-bottom:7px}.unknowns p{font-size:13px;line-height:1.65;color:#52616a}.evidence-section{padding:18px 0;border-top:1px solid #e1e7ea}.comparison input{position:absolute;opacity:0;pointer-events:none}.compare-controls{display:grid;grid-template-columns:1fr 1fr;gap:3px;border:1px solid #dbe3e7;background:#eef2f4;padding:3px;border-radius:8px;margin-bottom:10px}.compare-controls label{min-height:42px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:650;color:#71808a;border-radius:5px;cursor:pointer}.compare-controls label span{font-weight:400;font-size:10px}.radio-before:checked~.compare-controls label:first-child,.radio-after:checked~.compare-controls label:last-child{background:#fff;color:#293f48;box-shadow:0 1px 3px #0a203518}.radio-before:focus-visible~.compare-controls label:first-child,.radio-after:focus-visible~.compare-controls label:last-child{outline:3px solid var(--teal);outline-offset:2px}.comparison figure{margin:0}.comparison img{width:100%;height:auto;display:block;border-radius:7px}.comparison figcaption{font-size:10px;color:#687a84;padding-top:6px;line-height:1.5}.comparison .after-frame{display:none}.radio-after:checked~.before-frame{display:none}.radio-after:checked~.after-frame{display:block}.image-reading{font-size:13px;line-height:1.65;margin-top:13px;color:#394f5a}.image-limit{font-size:12px;line-height:1.65;margin-top:8px;color:#697782}.sources{list-style:none;margin:0;padding:0}.sources li{padding:10px 0;border-top:1px solid #edf0f2;display:flex;align-items:center;justify-content:space-between;gap:10px}.sources strong{font-size:12px;display:block;font-weight:600;color:#394e59}.sources span{display:block;font-size:10px;color:#75838b;margin-top:2px}.sources a{min-width:44px;min-height:44px;display:grid;place-items:center;color:#526c78}.sources a svg{width:17px;height:17px}.reconsider{border-top:1px solid #e2e8eb;padding-bottom:10px}.reconsider>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-size:12px;font-weight:650;color:#425862}.reconsider summary svg{width:17px;height:17px}.reconsider[open]>summary svg{transform:rotate(180deg)}.reconsider>div{padding:10px 0;font-size:12px;color:#536670}.reconsider strong{font-size:11px}.reconsider p{margin-top:5px}.full-report{margin:0 -16px;min-height:70px;background:#183c3b;display:flex;align-items:center;justify-content:space-between;padding:14px 17px;gap:12px;color:#fff;font-size:13px;font-weight:650}.full-report small{display:block;color:#b5d0cd;font-size:10px;margin-top:3px;font-weight:400}.full-report svg{width:19px;height:19px}.provenance-link{display:block;padding:13px 0;min-height:44px;color:#5e7580;font-size:10px}.feed-end{text-align:center;padding:22px 25px 28px}.end-mark{display:block;background:#c6d2d8;width:24px;height:2px;margin:0 auto 13px}.feed-end p{font-size:11px;color:#76848b}.feed-end a{font-size:12px;margin-top:10px;color:#3b5e61;display:inline-flex;align-items:center;gap:5px;min-height:44px}.feed-end svg{width:16px;height:16px} /* Real page layout: one scan-friendly feed, with context alongside on desktop. */ .masthead { padding:0;position:static;backdrop-filter:none;background:var(--card); } .masthead .wrap { display:grid;grid-template-columns:1fr auto;align-items:center;gap:0;max-width:1080px; } .masthead .wordmark { padding:19px 0 16px;font-size:25px;text-transform:none;letter-spacing:.025em; } .masthead .dateline { font:650 10px/1.4 var(--sans);letter-spacing:.18em;color:var(--muted); } .masthead .nav { grid-column:1/-1;padding:0;border-bottom:0;gap:8px; } .masthead .nav a { min-height:46px;font-size:13px;text-decoration:none; } .masthead .nav a:first-child { color:var(--ink);font-weight:650; } .news-layout { display:grid;grid-template-columns:minmax(0,640px) minmax(240px,300px);gap:44px;max-width:1080px;align-items:start; } .news-main { min-width:0; } .news-view .feed-intro { padding:30px 0 22px; } .news-view .feed-intro h1 { font-family:var(--sans);font-size:30px;line-height:1.2;margin:4px 0 0; } .news-view .feed-intro .eyebrow { font:650 10px/1.4 var(--sans);letter-spacing:.075em;margin:0;color:var(--muted); } .news-view .feed-intro p { margin:7px 0 0;font-size:12px;line-height:1.5; } .news-view .feed-intro .feed-count { margin:2px 0 0;font-size:11px;color:#697b85; } .news-view .news-feed { padding:0 0 30px;gap:14px; } .news-view .development h2 { margin:8px 0 9px;line-height:1.25;font-size:22px;font-family:var(--sans);font-weight:700; } .news-view .development h2 a { text-decoration:none; } .news-view .summary-text { font-size:16px;line-height:1.5;margin:0 0 14px; } .event-date { font-size:12px;line-height:1.4;color:#65757e;white-space:nowrap; } .metadata { font-size:12px; } .story-updated { margin:0 16px 12px;font-size:10.5px;line-height:1.5;color:#71818a; } .story-updated time { font-weight:500; } .news-view .evidence-body .known { padding:15px;border-left:3px solid #456976;background:#edf3f6;border-radius:0 8px 8px 0;margin-bottom:24px; } .news-view .known h3 { font-size:18px;line-height:1.3;font-weight:750;color:#234452;margin:0 0 8px; } .news-view .known p { margin:0;font-size:15px;line-height:1.6; } .news-view .claim-block { padding:16px 0 20px;border-top:1px solid #e1e7ea; } .news-view .claim-block h4 { font-family:var(--sans);font-size:16px;line-height:1.42; } .news-view .claim-origin { font-size:11px;line-height:1.5;color:#6f8089;margin:6px 0 0; } .news-view .explanation { font-size:15px;line-height:1.6;margin:11px 0 0; } .news-view .limits p { font-size:14px;line-height:1.6;margin:0; } .news-view .unknowns { padding:16px 14px;gap:10px;margin:5px 0 22px;border:1px solid #dacba7;background:#fcf8ed;border-radius:9px; } .news-view .unknowns h3 { font-size:18px;line-height:1.3;font-weight:750;margin:0 0 8px;color:#725d32; } .news-view .unknowns p { font-size:15px;line-height:1.6;margin:0;color:#5a5344; } .news-view .unknown-icon { border-color:#b4a47f;color:#806c40; } .news-view .evidence-section { padding:18px 0;border-top:1px solid #e1e7ea; } .news-view .section-heading h3 { font-family:var(--sans);font-size:16px; } .news-view .claim-heading { flex-wrap:wrap; } .news-view .source-chip { min-height:44px;line-height:1.5; } .news-view .image-reading { font-size:14px;line-height:1.6;margin:12px 0 0; } .comparison fieldset { border:0;padding:0;margin:0;min-width:0; } .source-list { list-style:none;margin:0;padding:0; } .source-list li { border-top:1px solid #edf0f2; } .source-list a { min-height:58px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:10px; } .source-list strong { font-size:13px;font-weight:650;line-height:1.5;display:block;color:#3e5360; } .source-list small { font-size:11px;color:#6c7d87;line-height:1.5;display:block; } .news-view .reconsider p { margin:5px 0 0;font-size:14px;line-height:1.6; } .news-view .reconsider>summary { font-size:13px; } .news-view .full-report { font-size:14px; } .news-context { padding-top:34px;display:flex;flex-direction:column;gap:18px; } .news-view .context-card { padding:20px;background:#fff;border:1px solid #dce5e8;border-radius:12px; } .news-view .context-card .eyebrow { font:650 10px/1.4 var(--sans);letter-spacing:.07em;margin:0 0 8px; } .news-view .context-card h2 { font:650 20px/1.25 var(--sans);letter-spacing:-.4px;margin:0 0 12px; } .news-view .context-card p { font-size:13px;line-height:1.6;color:#62747e;margin:0 0 12px; } .news-view .context-card .maplegend { font:400 11px/1.5 var(--sans); } .context-link { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;border-top:1px solid #e3eaed;font-size:13px;font-weight:600;color:#315c5d; } .context-link.quiet { color:#6b7c85; } #technical-provenance { scroll-margin-top:80px; } .record-source { border-top:1px solid var(--rule);padding:20px 0;scroll-margin-top:80px; } .record-source p { font-size:15px;line-height:1.6; } .record-links { display:flex;gap:18px;flex-wrap:wrap; } .record-links a { min-height:44px;display:inline-flex;align-items:center;color:var(--established); } .record-source details { max-width:64rem;border:1px solid var(--rule);border-radius:7px;padding:0 14px; } .record-source summary { min-height:48px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:14px; } .record-source summary::-webkit-details-marker { display:none; } .record-source dl { font-size:13px; } .record-source dt { font-weight:650;margin-top:13px; } .record-source dd { margin:3px 0 0;overflow-wrap:anywhere;white-space:pre-wrap;color:var(--ink-2); } @media(min-width:800px) { .masthead .wrap { grid-template-columns:1fr auto auto;gap:32px; }.masthead .nav { grid-column:auto;grid-row:1; }.masthead .dateline { grid-column:3;grid-row:1; }.masthead .nav a { min-width:62px;min-height:68px; }.masthead .nav a:nth-child(3){min-width:100px;} } @media(max-width:799px) { .news-layout { display:block;width:100%;max-width:640px; } .news-view .feed-intro { padding:23px 20px 20px; } .news-view .feed-intro h1 { font-size:27px; } .news-view .news-feed { padding:0 12px 20px;gap:12px; } .news-view .development h2 { font-size:20px; } .news-view .summary-text { font-size:15px;line-height:1.52; } .news-context { padding:4px 12px 24px; } .metadata,.event-date { font-size:11.5px; } .preview-mode { font-size:11px!important; } } @media(max-width:360px) { .story-top { gap:4px;padding-left:13px;padding-right:13px; }.metadata,.event-date{font-size:10.5px;} } @media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} } .masthead .nav a:first-child { color:var(--ink-2);font-weight:500; } .masthead .nav a[aria-current="page"] { color:var(--ink);font-weight:700; } .masthead .nav a[aria-current="page"]::after { content:"";position:absolute;bottom:0;left:14px;right:14px;height:3px;border-radius:3px 3px 0 0;background:var(--ink); } /* Maps are content-sized; the 20px SVG rule is for controls only. */ .news-view .map svg { width:100%;height:auto;stroke:none; } @media(min-width:800px) { .masthead .wordmark { grid-column:1;grid-row:1; } .masthead .nav { grid-column:2;grid-row:1; } } /* ========================================================================== Brand red, card heroes, and a disclosure that reads as a control. Red is sampled from the logo (#FB010F). It fails AA for small text, so the mark keeps the pure value and text uses a deeper variant of the same hue. ========================================================================== */ :root { --brand-red: #FB010F; --red-ink: #C8000C; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --red-ink: #FF6A63; } } /* ---- masthead: logo beside a single-colour wordmark ---- */ .wordmark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); } .wordmark img { width: 2.1rem; height: 2.1rem; display: block; flex: none; } .wordmark span { font: 700 1.32rem/1 var(--serif); letter-spacing: -.015em; color: var(--ink); } /* ---- card hero ---- */ .card-hero { position: relative; margin: 0 0 1rem; border-radius: 10px; overflow: hidden; background: #e8edf0; } .card-hero > img { aspect-ratio: 2 / 1; height: auto; } .card-hero img { width: 100%; object-fit: cover; display: block; } /* Satellite crops are square; a 2:1 card would slice them badly. */ .card-hero.satellite img { object-position: center 42%; } /* The kicker carries its own bar rather than relying on a tall gradient. A gradient tuned for dark satellite crops turns to mud over a light locator map, and the label stops being readable on exactly the cards that need it. */ .card-hero::after { content: none; } .hero-kicker { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .6rem .85rem; font: 500 .72rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #234c4b; background: #f1f6f6; border-bottom: 1px solid #e1e9e9; } .hero-kicker .metadata { display: flex; gap: .45rem; align-items: baseline; } .hero-kicker .region { color: var(--red-ink); font-weight: 700; } .hero-kicker .event-date, .hero-kicker time { color: #5d7877; } /* ---- disclosure reads as a control, not a caption ---- */ /* The disclosure stays quiet — it is a way in, not the loudest thing on the card. Only the button carries the accent. */ .development .disclosure > summary::-webkit-details-marker { display: none; } .development .disclosure > summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; } .development .disclosure .disclosure-icon { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--brand-red); border-color: var(--brand-red); color: #fff; transition: transform .2s ease; } .development .disclosure .disclosure-icon svg { width: 1rem; height: 1rem; } .development .disclosure[open] .disclosure-icon { transform: rotate(180deg); } /* The region label carries the accent everywhere it appears, not only on the hero, so the colour reads as the theme rather than a one-off. */ .metadata .region, .incident .region { color: var(--red-ink); font-weight: 600; } /* ====================================================================== THE VERDICT LEADS A reader arrives with a question. The badge answers it before the headline does, and the band keeps the answer honest: we never show a verdict without the probability range it stands for. Colour runs green to red across the scale, so the verdict is legible before it is read. ====================================================================== */ :root { --v-est-ink:#0f5540; --v-est-bg:#e4f1ea; --v-est-line:#bcdcce; --v-lik-ink:#1b5f5e; --v-lik-bg:#e6f2f1; --v-lik-line:#bdd9d7; --v-unc-ink:#855006; --v-unc-bg:#fcf1de; --v-unc-line:#ecd6ab; --v-unl-ink:#9b3528; --v-unl-bg:#fbebe8; --v-unl-line:#eec9c2; --v-out-ink:#C8000C; --v-out-bg:#fde8e8; --v-out-line:#f4c2c2; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v-est-ink:#7fd9b4; --v-est-bg:#0e2a22; --v-est-line:#1d4a3c; --v-lik-ink:#7fd2cf; --v-lik-bg:#0d2a29; --v-lik-line:#1c4846; --v-unc-ink:#e8b765; --v-unc-bg:#2d2213; --v-unc-line:#503d1b; --v-unl-ink:#f09a8b; --v-unl-bg:#2e1715; --v-unl-line:#532a24; --v-out-ink:#FF6A63; --v-out-bg:#301513; --v-out-line:#5a2320; } } :root[data-theme="dark"] { --v-est-ink:#7fd9b4; --v-est-bg:#0e2a22; --v-est-line:#1d4a3c; --v-lik-ink:#7fd2cf; --v-lik-bg:#0d2a29; --v-lik-line:#1c4846; --v-unc-ink:#e8b765; --v-unc-bg:#2d2213; --v-unc-line:#503d1b; --v-unl-ink:#f09a8b; --v-unl-bg:#2e1715; --v-unl-line:#532a24; --v-out-ink:#FF6A63; --v-out-bg:#301513; --v-out-line:#5a2320; } .verdict { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .95rem 1rem 0; } .verdict-badge { font: 700 .67rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; padding: .42rem .56rem; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; } .verdict-range { font: 500 .66rem/1 var(--mono); letter-spacing: .05em; color: #7c8b93; font-variant-numeric: tabular-nums; } .verdict-est .verdict-badge { color:var(--v-est-ink); background:var(--v-est-bg); border-color:var(--v-est-line); } .verdict-lik .verdict-badge { color:var(--v-lik-ink); background:var(--v-lik-bg); border-color:var(--v-lik-line); } .verdict-unc .verdict-badge { color:var(--v-unc-ink); background:var(--v-unc-bg); border-color:var(--v-unc-line); } .verdict-unl .verdict-badge { color:var(--v-unl-ink); background:var(--v-unl-bg); border-color:var(--v-unl-line); } .verdict-out .verdict-badge { color:var(--v-out-ink); background:var(--v-out-bg); border-color:var(--v-out-line); } .verdict-none .verdict-badge { color:#6b7a82; background:#f0f3f5; border-color:#dce3e7; } /* The headline is the answer, so it gets the weight the kicker used to take. */ .news-view .development h2 { margin: .5rem 0 .45rem; letter-spacing: -.5px; } /* What we actually looked at, stated plainly, opposite the date. */ .story-updated { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .story-updated .tally { font-weight: 600; color: #5d6c75; } /* ---- the answer comes before the picture ---- */ /* A 2:1 hero pushed the verdict ~270px down the card, so a reader scrolling met a stock photograph before the thing they came for. The image is context; the verdict is the product. Shorter strip, louder badge. */ .card-hero > img { aspect-ratio: 2.6 / 1; } .verdict { margin: .85rem 1rem .1rem; gap: .55rem; } .verdict-badge { font-size: .76rem; padding: .5rem .68rem; letter-spacing: .12em; } .verdict-range { font-size: .7rem; } .news-view .development h2 { font-size: 23px; } @media (max-width: 600px) { .card-hero > img { aspect-ratio: 2.3 / 1; } .news-view .development h2 { font-size: 21px; } } /* ====================================================================== THE PUBLICATION Articles are the front door; the ledger sits behind them. The front page is edited — a lead, then the rest — rather than sorted by date. ====================================================================== */ /* ---- section tabs: one scrolling line, never a wrapped block ---- */ .section-bar { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: .45rem 16px .4rem; border-bottom: 1px solid var(--rule); -webkit-overflow-scrolling: touch; } .section-bar::-webkit-scrollbar { display: none; } .section-bar a { flex: none; padding: .5rem .72rem; border-radius: 7px; white-space: nowrap; font: 600 .83rem/1 var(--sans); color: #5a6a72; } .section-bar a:hover { background: #eef3f3; color: var(--ink); } .section-bar a[aria-current="page"] { background: var(--ink); color: #fff; } /* ---- the lead ---- */ .lead-story { margin: 1.1rem 0 1.4rem; } .lead-media { display: block; } .a-figure { margin: 0; } .a-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #e6ecef; } .a-figure--lead img { aspect-ratio: 16 / 9; } .a-figure figcaption { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .1rem 0; font-size: .74rem; line-height: 1.45; color: #6d7d86; } .a-credit { font: 500 .67rem/1.4 var(--mono); letter-spacing: .03em; color: #8b9aa2; } .lead-body { padding-top: .85rem; } .a-kicker { display: inline-flex; gap: .35rem; align-items: baseline; font: 700 .67rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; } .a-section { color: var(--red-ink); } .a-dot, .a-kind { color: #8b9aa2; } .lead-head { font: 800 30px/1.14 var(--sans); letter-spacing: -.9px; margin: .5rem 0 .55rem; } .lead-head a { color: var(--ink); } .lead-head a:hover { color: var(--red-ink); } .lead-stand { font-size: 1.02rem; line-height: 1.55; color: #43525c; margin: 0 0 .7rem; } .lead-link { display: inline-flex; align-items: center; gap: .3rem; font: 700 .83rem/1 var(--sans); color: var(--red-ink); } .lead-link svg { width: 1rem; height: 1rem; } /* ---- the rest of the stories ---- */ .a-grid { display: grid; grid-template-columns: 1fr; gap: 1.15rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); } .a-card-media { display: block; margin-bottom: .6rem; } .a-card h3 { font: 700 19px/1.28 var(--sans); letter-spacing: -.4px; margin: .4rem 0 .35rem; } .a-card h3 a { color: var(--ink); } .a-card h3 a:hover { color: var(--red-ink); } .a-stand { font-size: .92rem; line-height: 1.52; color: #51606a; margin: 0 0 .4rem; } .a-meta { font: 500 .7rem/1 var(--mono); color: #8b9aa2; margin: 0; } .a-empty { color: var(--muted); padding: 1.5rem 0; } /* ---- verified strip, below the journalism ---- */ .checked-feed { margin-top: 1.9rem; padding-top: 1.2rem; border-top: 2px solid var(--ink); } .strip-head h2 { font: 800 21px/1.2 var(--sans); letter-spacing: -.5px; margin: 0 0 .25rem; } .strip-head p { font-size: .88rem; line-height: 1.5; color: #5f6e77; margin: 0 0 .9rem; } .checked-feed .news-feed { padding: 0; } .checked-feed .context-link { margin-top: .9rem; display: inline-flex; } /* ---- the article itself ---- */ .article-view { background: var(--paper); } .article { max-width: 44rem; padding-top: 1.4rem; padding-bottom: 2.5rem; } .a-head h1 { font: 800 33px/1.12 var(--sans); letter-spacing: -1px; margin: .55rem 0 .7rem; } .a-standfirst { font-size: 1.1rem; line-height: 1.52; color: #3f4e58; margin: 0 0 .9rem; } .a-byline { display: flex; gap: .55rem; flex-wrap: wrap; align-items: baseline; font: 500 .74rem/1.5 var(--mono); color: #7b8a92; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); margin: 0 0 1.2rem; } .a-byline span:first-child { color: var(--ink); font-weight: 600; } .a-body { font-size: 1.06rem; line-height: 1.68; color: #27333b; } .a-body p { margin: 0 0 1.05rem; } .a-body h2 { font: 700 1.22rem/1.3 var(--sans); letter-spacing: -.3px; margin: 1.9rem 0 .75rem; color: var(--ink); } .article .a-figure { margin: 0 0 1.4rem; } /* ---- the signature block: our conclusion ---- */ .bottom-line { margin: 2rem 0 1.5rem; padding: 1.1rem 1.15rem 1.15rem; background: #fff; border: 1px solid #e3ebee; border-left: 4px solid var(--brand-red); border-radius: 4px; } .bottom-line h2 { font: 700 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); margin: 0 0 .6rem; } .bl-text { font-size: 1.02rem; line-height: 1.6; color: var(--ink); margin: 0; font-weight: 500; } .bl-sourcing { font-size: .86rem; line-height: 1.58; color: #5f6e77; margin: .85rem 0 0; padding-top: .8rem; border-top: 1px solid #eef2f4; } .bl-sourcing strong { color: #3f4e58; } /* ---- what we checked, and what we read ---- */ .a-checked, .a-sources { margin: 1.8rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); } .a-checked h2, .a-sources h2 { font: 700 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #5f6e77; margin: 0 0 .6rem; } .a-checked-lede { font-size: .88rem; line-height: 1.5; color: #5f6e77; margin: 0 0 .85rem; } .verdict-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; } .verdict-list li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .7rem .8rem; background: #fff; border: 1px solid #e3ebee; border-radius: 8px; } .verdict-list li > a { flex: 1 1 14rem; display: inline-flex; align-items: center; gap: .3rem; font: 600 .92rem/1.4 var(--sans); color: var(--ink); } .verdict-list li > a:hover { color: var(--red-ink); } .verdict-list svg { width: .95rem; height: .95rem; } .a-sources ol { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: .8rem; } .a-sources li { counter-increment: s; display: grid; gap: .15rem; padding-left: 1.7rem; position: relative; } .a-sources li::before { content: counter(s); position: absolute; left: 0; top: .1rem; font: 600 .7rem/1 var(--mono); color: #9babb4; } .s-pub { font: 700 .7rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--red-ink); } .s-title { font-size: .92rem; line-height: 1.45; color: var(--ink); } .s-relay, .s-note { font-size: .78rem; line-height: 1.45; color: #7b8a92; font-style: italic; } .s-links { display: flex; gap: .7rem; margin-top: .15rem; } .s-links a { font: 600 .78rem/1 var(--sans); color: #3f6f6e; text-decoration: underline; } .a-back { margin: 2rem 0 0; } .a-back a { font: 600 .85rem/1 var(--sans); color: var(--red-ink); } @media (min-width: 760px) { .a-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; } .lead-story { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem; align-items: center; } .lead-body { padding-top: 0; } .lead-head { font-size: 34px; } .a-head h1 { font-size: 40px; } } @media (max-width: 420px) { .lead-head { font-size: 26px; } .a-head h1 { font-size: 28px; } .a-body { font-size: 1.01rem; } } /* A lead with no picture is a text lead, not a grid with a hole in it. */ .lead-story--text { display: block; } .lead-story--text .lead-body { padding-top: 0; } @media (min-width: 760px) { .lead-story--text .lead-head { font-size: 38px; max-width: 20ch; } .lead-story--text .lead-stand { font-size: 1.1rem; max-width: 56ch; } } /* The base stylesheet gives every
a large vertical padding and a top border, which is right for the long-form pages and wrong inside an article, where it opened a gap and doubled our own rules. */ .article-view section { padding: 0; border-top: 0; } .article-view .bottom-line { border-left: 4px solid var(--brand-red); } .article-view .a-checked, .article-view .a-sources { padding-top: 1.1rem; border-top: 1px solid var(--rule); } /* ====================================================================== THE EXPANDED CARD Short enough to actually read. Four short blocks, a line of sources, and a way through to the full record for anyone who wants it all. ====================================================================== */ .evidence-body { padding: 1rem 1rem 1.1rem; display: grid; gap: .95rem; } .detail-block > h3 { font: 700 .66rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: #7b8a92; margin: 0 0 .35rem; } .detail-block > p { margin: 0; font-size: .95rem; line-height: 1.55; color: #2f3c45; } .detail-block--catch > h3 { color: var(--v-unc-ink); } .detail-block--change > h3 { color: var(--v-lik-ink); } .detail-block--change > p { color: #44535d; } /* Sources as one scannable line. */ .src-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .src-chip { display: inline-flex; align-items: center; padding: .34rem .6rem; border: 1px solid #dbe4e8; border-radius: 999px; background: #fff; font: 600 .78rem/1 var(--sans); color: #35505a; } .src-chip:hover { border-color: var(--brand-red); color: var(--red-ink); } /* The rest of the record, one line per claim. */ .mini-claims { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .mini-claims li { display: flex; gap: .5rem; align-items: baseline; font-size: .89rem; line-height: 1.5; color: #44535d; } .mini-claims .verdict-badge { font-size: .6rem; padding: .28rem .4rem; flex: none; } /* Way through to everything we hold. */ .full-report { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .2rem; padding: .8rem .9rem; border-radius: 9px; background: #f1f6f6; border: 1px solid #e1e9e9; } .full-report:hover { background: #e8f0f0; border-color: #cfdedd; } .full-report span { display: grid; gap: .1rem; font: 700 .9rem/1.3 var(--sans); color: #234c4b; } .full-report small { font: 400 .76rem/1.4 var(--sans); color: #6b7f82; } .full-report svg { width: 1.1rem; height: 1.1rem; color: var(--red-ink); flex: none; } /* The plain-language account, and what is still unknown, on the full record. It left the card when that was cut back; the record is where completeness belongs. */ .record-brief { max-width: 44rem; margin: 0 0 1.6rem; } .record-brief p { font-size: 1rem; line-height: 1.62; color: #39474f; margin: 0 0 .85rem; } /* Short attribution under the card's satellite comparison. */ .image-credit { margin: .5rem 0 0; font: 500 .68rem/1.4 var(--mono); letter-spacing: .03em; color: #8b9aa2; } /* Photograph attribution. A CC licence condition, and the standard we hold other people to. */ .photo-credits { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .55rem; } .photo-credits li { font-size: .88rem; line-height: 1.55; color: #4c5b64; } .photo-credits strong { color: var(--ink); } .photo-credits a { color: #3f6f6e; text-decoration: underline; } /* ---- map page: same language as the feed ---- */ .news-view .map { margin: 0 0 1.6rem; } .news-view .map svg { width: 100%; height: auto; display: block; } .news-view .map a { cursor: pointer; } .news-view .map a:focus-visible .site { outline: 2px solid var(--brand-red); } .news-view .map a:hover .site { r: .12; fill: var(--brand-red); } .news-view .maplegend { margin: .6rem 0 0; font: 500 .7rem/1.5 var(--mono); color: #8b9aa2; } .regions { display: grid; gap: 1.5rem; padding-bottom: 1.5rem; } .region-block { padding: 0; border: 0; } .region-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-bottom: .5rem; margin-bottom: .7rem; border-bottom: 2px solid var(--ink); } .region-head h2 { font: 800 1.2rem/1.2 var(--sans); letter-spacing: -.4px; margin: 0; } .region-head span { font: 500 .7rem/1 var(--mono); letter-spacing: .06em; color: #8b9aa2; } .row-when { flex: none; font: 500 .68rem/1 var(--mono); letter-spacing: .04em; color: #8b9aa2; white-space: nowrap; } @media (min-width: 760px) { .regions { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; } } /* The map filled a phone screen before a reader reached a single record. Letterboxed to a share of the viewport; the SVG centres itself. */ .news-view .map svg { max-height: 56vh; } @media (max-width: 600px) { .news-view .map svg { max-height: 44vh; } } /* The claim-scale board keeps its own look; only its frame is shared. */ .news-view .feed-intro .tally { margin-top: .7rem; font-size: .84rem; color: #5f6e77; } .news-view .stack { margin-bottom: 2rem; } /* ====================================================================== ONE MENU, A QUIETER VERDICT, A LIVELIER PANEL ====================================================================== */ /* ---- 1. the only navigation on the site ---- */ /* Five items. On a narrow screen it scrolls rather than wrapping onto a second line, which is what made it read as two menus. */ .masthead nav.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 10px; grid-template-columns: none; } .masthead nav.nav::-webkit-scrollbar { display: none; } .masthead nav.nav a { flex: none; padding: 0 12px; white-space: nowrap; } /* ---- 4. the disclosure button stops shouting ---- */ /* It is a way in, not the loudest thing on the card. The red reads as an alert, which is the wrong signal for 'there is more to read'. */ .development .disclosure .disclosure-icon { background: #e4eeee; border: 1px solid #cfdedd; color: #2c5b59; } .development .disclosure[open] .disclosure-icon { background: #d8e8e7; } /* ---- 5. 'True? likely ~70%' ---- */ /* A chip announced a label. This asks the reader's own question and answers it. The band behind the number is in the title attribute and on the record. */ .verdict { display: flex; align-items: baseline; gap: .38rem; flex-wrap: wrap; margin: .8rem 1rem .15rem; cursor: help; } .v-q { font: 600 .74rem/1 var(--sans); color: #8b9aa2; letter-spacing: 0; text-transform: none; } .verdict .verdict-badge { font: 700 .74rem/1 var(--sans); letter-spacing: 0; text-transform: none; padding: 0; border: 0; background: none; border-radius: 0; } .verdict .verdict-range { font: 600 .72rem/1 var(--mono); letter-spacing: .02em; color: #8b9aa2; } .verdict-est .verdict-badge { color: var(--v-est-ink); } .verdict-lik .verdict-badge { color: var(--v-lik-ink); } .verdict-unc .verdict-badge { color: var(--v-unc-ink); } .verdict-unl .verdict-badge { color: var(--v-unl-ink); } .verdict-out .verdict-badge { color: var(--v-out-ink); } .verdict-none .verdict-badge { color: #6b7a82; } /* Lists keep a chip: a bare word in a row of rows would not separate. */ .verdict-list .verdict-badge, .mini-claims .verdict-badge { font: 700 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: .3rem .45rem; border: 1px solid transparent; border-radius: 4px; } .verdict-list .verdict-est .verdict-badge, .mini-claims.verdict-est .verdict-badge { background: var(--v-est-bg); border-color: var(--v-est-line); } .verdict-list li.verdict-est .verdict-badge, .mini-claims li.verdict-est .verdict-badge { background: var(--v-est-bg); border-color: var(--v-est-line); color: var(--v-est-ink); } .verdict-list li.verdict-lik .verdict-badge, .mini-claims li.verdict-lik .verdict-badge { background: var(--v-lik-bg); border-color: var(--v-lik-line); color: var(--v-lik-ink); } .verdict-list li.verdict-unc .verdict-badge, .mini-claims li.verdict-unc .verdict-badge { background: var(--v-unc-bg); border-color: var(--v-unc-line); color: var(--v-unc-ink); } .verdict-list li.verdict-unl .verdict-badge, .mini-claims li.verdict-unl .verdict-badge { background: var(--v-unl-bg); border-color: var(--v-unl-line); color: var(--v-unl-ink); } .verdict-list li.verdict-out .verdict-badge, .mini-claims li.verdict-out .verdict-badge { background: var(--v-out-bg); border-color: var(--v-out-line); color: var(--v-out-ink); } .verdict-list li.verdict-none .verdict-badge, .mini-claims li.verdict-none .verdict-badge { background: #f0f3f5; border-color: #dce3e7; color: #6b7a82; } /* The headline sits straight under the verdict now the tally is gone. */ .news-view .development h2 { margin: .32rem 0 .45rem; } .news-view .summary-text { margin: 0 0 1rem; } /* ---- 6. the expanded panel gets structure ---- */ /* Four grey labels over four grey paragraphs read as a form. Each block now sits on its own card with an accent rule, so the eye can find the one it wants without reading all four. */ .evidence-body { background: #f4f8f8; border-top: 1px solid #e1e9e9; padding: 1rem .85rem 1.1rem; gap: .6rem; } .detail-block { background: #fff; border: 1px solid #e6edee; border-left: 3px solid #cfdedd; border-radius: 8px; padding: .72rem .85rem; } .detail-block > h3 { margin: 0 0 .3rem; color: #76858d; } .detail-block--catch { border-left-color: var(--v-unc-ink); } .detail-block--catch > h3 { color: var(--v-unc-ink); } .detail-block--change { border-left-color: var(--v-lik-ink); } .detail-block--change > h3 { color: var(--v-lik-ink); } .evidence-body .src-chips { margin-top: .1rem; } .evidence-body .mini-claims li { align-items: center; } .full-report { margin-top: .25rem; background: #fff; border-color: #e6edee; } .full-report:hover { background: #eef5f5; } /* 'Last updated' moved here from the card. A verification site that quietly loses its revision signal has lost something real. */ .record-updated { margin: .5rem 0 0; font: 500 .72rem/1.5 var(--mono); letter-spacing: .02em; color: #8b9aa2; } /* The old nav had four items and the third was 'Understand', so it carried a hard-coded min-width to fit. The third item is now 'Map'. Positional sizing breaks whenever the menu changes; spacing comes from padding instead. */ @media (min-width: 800px) { .masthead nav.nav a, .masthead nav.nav a:nth-child(3) { min-width: 0; padding: 0 15px; } } /* ====================================================================== CARDS THAT READ AS CARDS ====================================================================== */ /* ---- 1. separate the card from the page and from the next one ---- */ /* A near-tonal border on a near-tonal ground made the feed read as one continuous column. White card, a crisp silver edge, a lift, and more air between them. */ .news-view .news-feed { gap: 18px; } .news-view .development { background: #fff; border: 1px solid #d9e2e6; border-radius: 14px; box-shadow: 0 1px 1px rgba(20, 48, 62, .04), 0 6px 16px rgba(20, 48, 62, .055); } .news-view .development:hover { border-color: #c8d5da; } /* The hero sits flush inside the rounded edge rather than touching it. */ .news-view .card-hero { margin: 0; } /* ---- 2. the kicker is a label, not a headline ---- */ .hero-kicker { padding: .45rem .8rem; font: 600 .64rem/1.3 var(--sans); letter-spacing: .01em; text-transform: none; background: #fbfcfc; border-bottom: 1px solid #eef3f4; color: #7d8c94; } .hero-kicker .region { font-weight: 700; font-size: .64rem; } .hero-kicker .event-date, .hero-kicker time { font-size: .62rem; color: #96a4ab; } /* ---- 3. the menu centres itself on a phone ---- */ /* 'safe' keeps the first item reachable if the row ever overflows; without it a centred overflowing flex row clips its own start. */ @media (max-width: 799px) { .masthead nav.nav { justify-content: center; justify-content: safe center; padding: 0 8px; } .masthead nav.nav a { padding: 0 11px; } } /* ---- 5. the dateline slot is free for the language switcher ---- */ @media (min-width: 800px) { .masthead .wrap { grid-template-columns: 1fr auto; } } /* ====================================================================== THE WORDMARK A name and a red rule. The mark was a small logo beside the name; at 34px it read as decoration and the name had to compete with it. ====================================================================== */ .masthead .wordmark { display: inline-block; align-self: center; font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.01em; color: var(--ink); text-decoration: none; padding: 0 0 7px; margin: 14px 0 12px; border-bottom: 3px solid var(--brand-red); } .masthead .wordmark span { color: var(--ink); } .masthead .wordmark:hover { color: var(--ink); } .masthead .wordmark img { display: none; } @media (max-width: 799px) { .masthead .wordmark { font-size: 26px; padding-bottom: 6px; margin: 12px 0 10px; } } /* ====================================================================== EVERY PAGE OPENS THE SAME WAY The feed had one kind of page header and the long-form pages had another — a 3.9rem serif display heading against the feed's 27px sans. The serif is the wordmark's job now; page headers match the feed. ====================================================================== */ .hero { padding: 1.5rem 0 1.1rem; } .hero h1 { font: 800 clamp(26px, 4.6vw, 34px)/1.14 var(--sans); letter-spacing: -.8px; max-width: 26ch; margin: .3rem 0 .6rem; } .hero .standfirst { font-size: .97rem; line-height: 1.58; color: #5f6e77; max-width: 54ch; margin: 0 0 1rem; } .hero .eyebrow, .hero p.eyebrow { font: 700 .66rem/1.4 var(--mono); letter-spacing: .12em; color: var(--muted); margin: 0 0 .45rem; } .hero .tally { font-size: .86rem; color: #5f6e77; margin: .2rem 0 0; } /* The feed header's own standfirst was 11px — unreadably small for the sentence that explains the page. */ .news-view .feed-intro p { font-size: .95rem; line-height: 1.58; color: #5f6e77; max-width: 54ch; margin-top: .5rem; } .news-view .feed-intro h1 { font-size: clamp(26px, 4.6vw, 34px); letter-spacing: -.8px; } /* Long-form sections keep their rhythm but lose the heavy top rules, which stacked up as hard lines across About and Method. */ main > section { border-top: 0; padding: 1.6rem 0 0; } main > section + section { padding-top: 1.9rem; } main > section h2 { font: 700 clamp(1.15rem, 2.6vw, 1.45rem)/1.25 var(--sans); letter-spacing: -.35px; margin: 0 0 .6rem; } main > section p, main > section li { font-size: .97rem; line-height: 1.65; } main > section .lede { font-size: 1.04rem; color: #44535d; } /* The wordmark is a grid item, and grid blockifies inline-block — so the red rule stretched the full column instead of sitting under the word. */ .masthead .wordmark { justify-self: start; width: max-content; } /* Long-form pages get a reading measure, centred. Without it the text sat in a narrow ragged column against a 72rem wrap, pinned to the left. News and article views have their own layouts and keep them. */ main:not(.news-view):not(.article-view) > div.wrap, main:not(.news-view):not(.article-view) > section > .wrap { max-width: 48rem; } /* ---- the record page opens like a card ---- */ /* It used to print the analyst summary as its standfirst and then the plain-language brief underneath — the same thing twice, in two voices, at two different measures. The model's own note says the summary is written for an analyst and does not belong at the front of a page. The brief leads now, and the verdict sits above the title exactly as it does on the card. */ .hero .verdict { margin: .1rem 0 .55rem; } .record-updated { max-width: none; margin: .55rem 0 0; } .record-brief { max-width: 48rem; margin: 1.1rem 0 1.8rem; } .record-brief p { font-size: 1.02rem; line-height: 1.66; color: #33424b; margin: 0 0 .9rem; } .record-brief p:first-child { font-size: 1.08rem; color: var(--ink); } /* Verdict groups carry a line of plain English saying what the band means. */ .verdict-blurb { font-size: .88rem; line-height: 1.5; color: #6b7a82; margin: -.3rem 0 .7rem; } /* The footer links the pages the navigation does not have room for. Three of them had nothing pointing at them at all. */ .footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); } .footer-nav a { font: 600 .85rem/1.5 var(--sans); color: #44535d; text-decoration: none; } .footer-nav a:hover { color: var(--red-ink); text-decoration: underline; } /* ====== claim-scale geometry ====== */ /* GENERATED from ESTABLISHED_AT, RULED_OUT_AT, SCALE_TICKS and CONFIDENCE_BANDS by site.scale_rules(). Do not hand-edit: a test re-derives these rules and fails if they drift. */ .zone--out { left: 0; width: 19.39%; } .zone--est { left: 80.61%; right: 0; } .threshold--out { left: 19.39%; } .threshold--est { left: 80.61%; } .tick--1 { left: 0.00%; } .tick--5 { left: 4.08%; } .tick--20 { left: 19.39%; } .tick--45 { left: 44.90%; } .tick--55 { left: 55.10%; } .tick--80 { left: 80.61%; } .tick--95 { left: 95.92%; } .tick--99 { left: 100.00%; } .bar--almost-no-chance { left: 0.00%; width: 4.08%; } .bar--very-unlikely { left: 4.08%; width: 15.31%; } .bar--unlikely { left: 19.39%; width: 25.51%; } .bar--roughly-even-chance { left: 44.90%; width: 10.20%; } .bar--likely { left: 55.10%; width: 25.51%; } .bar--very-likely { left: 80.61%; width: 15.31%; } .bar--almost-certain { left: 95.92%; width: 4.08%; } /* ====================================================================== THE WHOLE CARD IS THE CONTROL Tapping the headline used to navigate to the full record while tapping the bar expanded it — two behaviours on one card. The card is now the , so anywhere on it expands. Native, because our CSP sets script-src 'none' and there is no JavaScript to do it with. ====================================================================== */ .development > .disclosure { border: 0; } .development > .disclosure > summary { display: block; cursor: pointer; list-style: none; background: none; border: 0; padding: 0; min-height: 0; } .development > .disclosure > summary::-webkit-details-marker { display: none; } .development > .disclosure > summary::marker { content: ""; } .development > .disclosure > summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -3px; } /* The bar at the foot of the card still reads as the affordance. */ .disclosure-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 10px 16px; margin-top: .2rem; background: #f1f6f6; border-top: 1px solid #e1e9e9; color: #234c4b; font-size: 13px; font-weight: 650; } .development > .disclosure > summary:hover .disclosure-bar { background: #e8f0f0; } .development > .disclosure[open] .disclosure-bar { background: #edf4f3; border-bottom: 1px solid #dae5e4; } .disclosure-bar .open-label { display: none; } .development > .disclosure[open] .disclosure-bar .closed-label { display: none; } .development > .disclosure[open] .disclosure-bar .open-label { display: inline; } .disclosure-bar .disclosure-icon { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #e4eeee; border: 1px solid #cfdedd; color: #2c5b59; transition: transform .2s ease; } .disclosure-bar .disclosure-icon svg { width: 1rem; height: 1rem; } .development > .disclosure[open] .disclosure-bar .disclosure-icon { transform: rotate(180deg); } /* ---- the scale on a phone ---- */ /* The confidence word sits to the right of the bar at calc(100% + .45rem), which runs off a 390px screen once the rows stack. */ .conf-word { display: none; } @media (max-width: 46rem) { .stack { overflow: hidden; } .bar .pct { display: none; } .conf-word { display: inline-block; margin-top: .25rem; font: 600 .72rem/1 var(--mono); letter-spacing: .02em; color: #5f6e77; } .scale .tick b { font-size: .55rem; } .threshold b { font-size: .55rem; } .row { padding: .55rem 0; } .track { margin-top: .15rem; } } /* ====================================================================== LANGUAGES ====================================================================== */ .langs { display: flex; gap: .1rem; align-self: center; justify-self: end; } .langs a { padding: .3rem .5rem; border-radius: 5px; text-decoration: none; font: 600 .82rem/1.3 var(--sans); color: #5a6a72; } .langs a:hover { background: #eef3f3; color: var(--ink); } .langs a[aria-current="true"] { background: var(--ink); color: #fff; } @media (min-width: 800px) { .masthead .wrap { grid-template-columns: 1fr auto auto; } } @media (max-width: 799px) { .langs { grid-column: 1 / -1; justify-content: center; padding-bottom: .4rem; } .langs a { font-size: .78rem; } } /* A translated page says what it is. We ask readers to weigh sources; we cannot hand them machine translation without the same disclosure. */ .mt-notice { background: #fcf1de; border-bottom: 1px solid #ecd6ab; padding: .7rem 0; } .mt-notice p { width: min(100% - 2 * var(--gut), 72rem); margin-inline: auto; font-size: .84rem; line-height: 1.55; color: #6d4a06; max-width: 72rem; } .mt-notice a { color: #6d4a06; text-decoration: underline; font-weight: 600; } /* Ge'ez script needs a touch more line height than Latin at the same size. */ html[lang="ti"], html[lang="am"] { --geez: 1; } html[lang="ti"] body, html[lang="am"] body { line-height: 1.7; } html[lang="ti"] h1, html[lang="am"] h1, html[lang="ti"] h2, html[lang="am"] h2 { line-height: 1.35; letter-spacing: 0; } html[lang="ti"] .verdict-badge, html[lang="am"] .verdict-badge { letter-spacing: 0; } /* The switcher carries justify-self:end for the desktop masthead. On a phone it moves to its own row, where that kept it pinned right and made justify-content:center a no-op — it has to stretch before it can centre. */ @media (max-width: 799px) { .langs { justify-self: stretch; justify-content: center; } .langs a { padding: .3rem .55rem; } } /* The notice took 154px of a 740px phone screen before any news. It still says everything it needs to; it just stops being a paragraph. */ .mt-notice { padding: .55rem 0; } .mt-notice p { font-size: .78rem; line-height: 1.5; } @media (max-width: 799px) { .mt-notice p { font-size: .74rem; line-height: 1.45; } } /* .langs is a