/* ============================================================ AURORA. Glass. Frosted translucent panels floating over a live colour field. The lightest and most atmospheric. ============================================================ */ [data-skin="aurora"]{ --f-display:"Archivo",system-ui,sans-serif; --f-body:"IBM Plex Sans",system-ui,sans-serif; --f-meta:"Archivo",system-ui,sans-serif; --f-nav:"Archivo",system-ui,sans-serif; --bg:#eaeefb; --fg:#151235; --fg2:#454170; --meta:#635e8b; --rule:rgba(103,88,190,.18); --accent:#6d3df5; --on-accent:#fff; --warn:#b4500e; --warn-bg:rgba(255,255,255,.55); --mast-bg:rgba(255,255,255,.42); --mast-fg:#151235; --mast-border:1px solid rgba(255,255,255,.6); --nav-bg:rgba(255,255,255,.3); --nav-fg:#454170; --ad-bg:rgba(255,255,255,.32); --ad-line:rgba(255,255,255,.75); /* The footer sits on its own ground so long pages end visibly. */ --foot-bg:rgba(255,255,255,.42); --consent-bg:rgba(255,255,255,.94); --card-bg:rgba(109,61,245,.86); --card-fg:#fff; --card-stat:#c8f8ff; --card-wash:radial-gradient(100% 120% at 92% 4%,rgba(255,255,255,.42),transparent 58%), radial-gradient(80% 100% at 0 100%,rgba(20,184,166,.5),transparent 62%); --s-bg:rgba(255,255,255,.45); --s-hover:rgba(255,255,255,.72); --widely-bg:rgba(255,255,255,.42); --widely-border:1px solid rgba(255,255,255,.7); --sec-rule:1px solid rgba(103,88,190,.2); --sec-size:1.3rem; --sec-weight:700; --sec-ls:-.03em; --nav-size:.86rem; --nav-weight:600; --nav-gap:1.4rem; --nav-pad:.8rem 0; --maxw:1120px; --card-radius:20px; --ad-radius:18px; --widely-radius:22px; --widely-pad:1.4rem; --hero-size:clamp(1.9rem,5.1vw,3rem); --hero-weight:700; --hero-ls:-.035em; --t-size:1.1rem; --t-weight:600; --t-ls:-.02em; --t-gap:1.4rem; --t-pad:1.4rem; --gap:2.3rem; --sum-size:1rem; --stand-size:1.15rem; --s-pad:1rem 1.1rem; --s-gap:.8rem; --logo-size:1.5rem; --logo-ls:-.045em; --h1-size:clamp(2rem,5.4vw,3.1rem); --mast-pad:1.05rem; background: radial-gradient(64% 52% at 10% 0%, rgba(124,58,237,.42), transparent 62%), radial-gradient(56% 46% at 94% 10%, rgba(16,185,169,.40), transparent 60%), radial-gradient(70% 58% at 52% 104%, rgba(236,72,153,.34), transparent 62%), #eaeefb; } [data-skin="aurora"] .mast, [data-skin="aurora"] .nav{backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5)} [data-skin="aurora"] .widely, [data-skin="aurora"] .scard, [data-skin="aurora"] .ad{backdrop-filter:blur(16px) saturate(1.35); -webkit-backdrop-filter:blur(16px) saturate(1.35); border:1px solid rgba(255,255,255,.65)} [data-skin="aurora"] .widely{box-shadow:0 18px 46px -24px rgba(45,28,110,.5)} [data-skin="aurora"] .scard{box-shadow:0 8px 22px -16px rgba(45,28,110,.5)} [data-skin="aurora"] .card{backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.42); box-shadow:0 26px 60px -26px rgba(72,40,180,.65)} [data-skin="aurora"] .badge{border-radius:999px; padding:.22rem .6rem} [data-skin="aurora"] .share .sbtn{backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(255,255,255,.4)} [data-skin="aurora"] .disagree{backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:16px; border:1px solid rgba(255,255,255,.6)} [data-skin="aurora"] .sec-head h2{color:var(--fg)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) [data-skin="aurora"]{ --bg:#08071a; --fg:#eeeafd; --fg2:#b3acd8; --meta:#8780ad; --rule:rgba(167,139,250,.22); --accent:#a78bfa; --on-accent:#0b0920; --warn:#fbbf24; --warn-bg:rgba(255,255,255,.06); --mast-bg:rgba(20,16,48,.5); --mast-fg:#eeeafd; --mast-border:1px solid rgba(167,139,250,.22); --nav-bg:rgba(20,16,48,.36); --nav-fg:#b3acd8; --ad-bg:rgba(255,255,255,.045); --ad-line:rgba(167,139,250,.25); --foot-bg:rgba(255,255,255,.035); --consent-bg:rgba(22,19,54,.96); --foot-bg:rgba(255,255,255,.035); --consent-bg:rgba(22,19,54,.96); --consent-bg:rgba(22,19,54,.96); --card-bg:rgba(90,48,210,.7); --card-stat:#a5f3fc; --s-bg:rgba(255,255,255,.055); --s-hover:rgba(255,255,255,.1); --widely-bg:rgba(255,255,255,.05); --widely-border:1px solid rgba(167,139,250,.2); --sec-rule:1px solid rgba(167,139,250,.2); background: radial-gradient(64% 52% at 10% 0%, rgba(124,58,237,.5), transparent 62%), radial-gradient(56% 46% at 94% 10%, rgba(13,148,136,.45), transparent 60%), radial-gradient(70% 58% at 52% 104%, rgba(190,24,93,.4), transparent 62%), #08071a; } :root:not([data-theme="light"]) [data-skin="aurora"] .widely, :root:not([data-theme="light"]) [data-skin="aurora"] .scard, :root:not([data-theme="light"]) [data-skin="aurora"] .ad, :root:not([data-theme="light"]) [data-skin="aurora"] .disagree{border-color:rgba(167,139,250,.22)} :root:not([data-theme="light"]) [data-skin="aurora"] .share .sbtn{background:rgba(255,255,255,.07)} } [data-theme="dark"] [data-skin="aurora"]{ --bg:#08071a; --fg:#eeeafd; --fg2:#b3acd8; --meta:#8780ad; --rule:rgba(167,139,250,.22); --accent:#a78bfa; --on-accent:#0b0920; --warn:#fbbf24; --warn-bg:rgba(255,255,255,.06); --mast-bg:rgba(20,16,48,.5); --mast-fg:#eeeafd; --mast-border:1px solid rgba(167,139,250,.22); --nav-bg:rgba(20,16,48,.36); --nav-fg:#b3acd8; --ad-bg:rgba(255,255,255,.045); --ad-line:rgba(167,139,250,.25); --foot-bg:rgba(255,255,255,.035); --consent-bg:rgba(22,19,54,.96); --card-bg:rgba(90,48,210,.7); --card-stat:#a5f3fc; --s-bg:rgba(255,255,255,.055); --s-hover:rgba(255,255,255,.1); --widely-bg:rgba(255,255,255,.05); --widely-border:1px solid rgba(167,139,250,.2); --sec-rule:1px solid rgba(167,139,250,.2); background: radial-gradient(64% 52% at 10% 0%, rgba(124,58,237,.5), transparent 62%), radial-gradient(56% 46% at 94% 10%, rgba(13,148,136,.45), transparent 60%), radial-gradient(70% 58% at 52% 104%, rgba(190,24,93,.4), transparent 62%), #08071a; } [data-theme="dark"] [data-skin="aurora"] .widely, [data-theme="dark"] [data-skin="aurora"] .scard, [data-theme="dark"] [data-skin="aurora"] .ad, [data-theme="dark"] [data-skin="aurora"] .disagree{border-color:rgba(167,139,250,.22)} [data-theme="dark"] [data-skin="aurora"] .share .sbtn{background:rgba(255,255,255,.07)} /* ============================================================ Reset + document defaults. Ships with the theme. ============================================================ */ *{box-sizing:border-box} body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body,"IBM Plex Sans",system-ui,sans-serif); -webkit-font-smoothing:antialiased} img,video{max-width:100%; height:auto} [hidden]{display:none !important} @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important; scroll-behavior:auto !important} } /* ============================================================ Accessibility primitives. Ships with the theme. Skip link and focus ring must never be removed — only restyled. ============================================================ */ .skip{position:absolute; inset-inline-start:-9999px; inset-block-start:0; z-index:99; background:var(--accent); color:var(--on-accent); padding:.6rem 1rem; font-family:var(--f-meta); font-size:.82rem; font-weight:600; text-decoration:none} .skip:focus{inset-inline-start:.5rem; inset-block-start:.5rem} :focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* Visually hidden but available to screen readers and to document outline. Used for the homepage h1: the page needs a top-level heading, but a news front page shows its hierarchy through the lead story, not a page title. */ .vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0} /* ============================================================ SHARED SITE STRUCTURE — one markup set, three skins ============================================================ */ .site{background:var(--bg); color:var(--fg); font-family:var(--f-body); line-height:1.5} .wrap{width:100%; max-width:var(--maxw,1100px); margin:0 auto; padding-inline:var(--pad,1rem)} /* masthead */ .mast{background:var(--mast-bg); color:var(--mast-fg); border-bottom:var(--mast-border)} .mast-in{display:flex; align-items:center; gap:1rem; padding-block:var(--mast-pad,.85rem)} .logo{display:flex; align-items:baseline; gap:.45rem; font-family:var(--f-display); font-weight:800; font-size:var(--logo-size,1.35rem); letter-spacing:var(--logo-ls,-.02em); color:inherit; text-decoration:none} /* The mark is an inline SVG in header.php, not a background image, because its centre is currentColor and has to follow the masthead between light and dark. Slightly wider than tall in em terms because the two circles overlap horizontally. */ .logo .glyph{width:1.25em;height:1.25em;flex:none;align-self:center; margin-inline-end:.1em; overflow:visible} .logo small{font-family:var(--f-meta); font-size:.5em; font-weight:500; letter-spacing:.14em; text-transform:uppercase; opacity:.62} .mast .tools{margin-inline-start:auto; display:flex; align-items:center; gap:.55rem} .langsw{font-family:var(--f-meta); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor; opacity:.4; border-radius:4px; padding:.2rem .45rem; cursor:not-allowed} .clock{font-family:var(--f-meta); font-size:.72rem; opacity:.7; font-variant-numeric:tabular-nums} /* nav */ .nav{background:var(--nav-bg); border-bottom:1px solid var(--rule)} .nav ul{display:flex; gap:var(--nav-gap,1.15rem); list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none} .nav ul::-webkit-scrollbar{display:none} .nav a{display:block; padding:var(--nav-pad,.62rem 0); color:var(--nav-fg); text-decoration:none; font-family:var(--f-nav); font-size:var(--nav-size,.82rem); font-weight:var(--nav-weight,600); letter-spacing:var(--nav-ls,.01em); white-space:nowrap; border-bottom:2px solid transparent} .nav a[aria-current]{border-bottom-color:var(--accent); color:var(--accent)} .nav a:hover{color:var(--accent)} /* section heads */ .sec-head{display:flex; align-items:baseline; gap:.7rem; margin:2rem 0 .9rem; padding-bottom:var(--sec-pad,.5rem); border-bottom:var(--sec-rule)} .sec-head h2{margin:0; font-family:var(--f-display); font-size:var(--sec-size,1.1rem); font-weight:var(--sec-weight,700); letter-spacing:var(--sec-ls,.02em); text-transform:var(--sec-tt,none); color:var(--sec-color,var(--fg))} .sec-head .more{margin-inline-start:auto; font-family:var(--f-meta); font-size:.72rem; color:var(--accent); text-decoration:none} /* meta line */ .meta{font-family:var(--f-meta); font-size:var(--meta-size,.72rem); color:var(--meta); display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-variant-numeric:tabular-nums} .meta .desk{color:var(--accent); font-weight:600} /* The byline links to Methodology. It should read as a byline, not as a link in a sentence, so the underline is held back until hover. */ .meta .desk a{color:inherit; text-decoration:none} .meta .desk a:hover,.meta .desk a:focus-visible{text-decoration:underline} .dot{opacity:.45} .count{display:inline-flex; align-items:center; gap:.3rem; font-weight:600; color:var(--fg)} .count::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--accent)} .badge{font-family:var(--f-meta); font-size:.6rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:.16rem .4rem; border-radius:3px; background:var(--accent); color:var(--on-accent)} .badge.upd{background:transparent; color:var(--meta); border:1px solid var(--rule)} /* branded card — this doubles as the Playwright template prototype */ .card{aspect-ratio:16/9; position:relative; overflow:hidden; border-radius:var(--card-radius,2px); background:var(--card-bg); color:var(--card-fg); display:flex; flex-direction:column; justify-content:flex-end; padding:var(--card-pad,1.1rem); gap:.5rem} .card::before{content:""; position:absolute; inset:0; background:var(--card-wash); pointer-events:none} .card .stat{position:relative; font-family:var(--f-display); font-weight:800; line-height:.92; font-size:clamp(1.9rem,7.5cqw,3.4rem); letter-spacing:-.03em; color:var(--card-stat)} .card .ct{position:relative; font-family:var(--f-display); font-weight:700; line-height:1.14; font-size:clamp(.82rem,2.9cqw,1.15rem); text-wrap:balance} .card .cm{position:relative; font-family:var(--f-meta); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; opacity:.72; display:flex; gap:.5rem; align-items:center} .card-wrap{container-type:inline-size} /* ============================================================ PHOTO LAYER Listing cards: photo + branded overlay. Sourced ONLY from the CC0 / Unsplash / Pexels pool — modification permitted, no attribution required, no share-alike. Compositing is safe here. Story page: credited standalone photo (CC BY-SA is fine there). The blocks below stand in for photography; the artifact CSP blocks external images, so these test the treatment, not the picture. The .ph-* placeholders and their JPEGs are gone: stories carry real photographs now, and eight stand-in images shipped to every visitor for a layout that no longer uses them. ============================================================ */ .ph{background-size:cover; background-position:center; background-repeat:no-repeat} /* branded overlay sitting on the photo */ .card.photo{background-color:#1b1630} .card.photo::before{background: linear-gradient(to top,rgba(8,6,22,.93) 0%,rgba(8,6,22,.72) 34%,rgba(8,6,22,.18) 62%,rgba(8,6,22,.3) 100%)} .card.photo .stat,.card.photo .ct,.card.photo .cm,.card.photo .figs{color:#fff} .card.photo .ct{text-shadow:0 1px 14px rgba(0,0,0,.5)} .card.photo .stat{color:var(--card-stat); text-shadow:0 2px 20px rgba(0,0,0,.55)} .card .pcredit{position:absolute; inset-inline-end:.65rem; inset-block-start:.6rem; z-index:2; font-family:var(--f-meta); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); background:rgba(8,6,22,.42); padding:.16rem .4rem; border-radius:3px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)} /* listing thumbnails */ .thumb{aspect-ratio:16/9; border-radius:calc(var(--card-radius,16px) * .7); overflow:hidden; position:relative; background:var(--rule)} .thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,6,22,.55),transparent 58%)} .teaser.withthumb{display:grid; grid-template-columns:112px 1fr; gap:.9rem; align-items:start} .teaser.withthumb .thumb{margin-top:.15rem} @media(min-width:700px){ .teaser.withthumb{grid-template-columns:168px 1fr; gap:1.1rem} } .row.withthumb{grid-template-columns:auto 76px 1fr; gap:.2rem .8rem} .row.withthumb .thumb{grid-row:span 2; align-self:start; border-radius:8px} @media(max-width:520px){ .row.withthumb{grid-template-columns:auto 1fr} .row.withthumb .thumb{display:none} } /* story-page credited photo — standalone, never composited */ .storyphoto{margin:0 0 1.3rem} .storyphoto .frame-img{aspect-ratio:16/9; border-radius:var(--card-radius,16px); overflow:hidden} .storyphoto figcaption{margin-top:.55rem; font-family:var(--f-meta); font-size:.74rem; color:var(--meta); line-height:1.5; display:flex; flex-wrap:wrap; gap:.4rem} .storyphoto .filetag{font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); font-size:.64rem; align-self:center} .storyphoto .lic{opacity:.8} /* photo/flat comparison toggle */ .photo-off .card.photo{background-image:none !important; background-color:var(--card-bg)} .photo-off .card.photo::before{background:var(--card-wash)} .photo-off .card .pcredit{display:none} .photo-off .thumb{background-image:none !important} .photo-off .storyphoto{display:none} .cmpgrid{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} /* Featured image inside a branded card. Sits under the scrim and the type; the card keeps its own 16:9 box so nothing reflows while the image loads. */ .card > .card-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0} .card.photo > .card-img ~ *{position:relative; z-index:2} .card.photo::before{z-index:1} .teaser.withthumb .thumb{display:block; overflow:hidden} .teaser.withthumb .thumb img{width:100%; height:100%; object-fit:cover; display:block} /* story teasers */ .lead-grid{display:grid; gap:var(--gap,1.5rem); grid-template-columns:1fr} @media(min-width:900px){ .lead-grid{grid-template-columns:var(--lead-cols,1.55fr 1fr)} } .hero h2{margin:.75rem 0 .5rem; font-family:var(--f-display); font-size:var(--hero-size,clamp(1.6rem,4.4vw,2.5rem)); line-height:1.08; letter-spacing:var(--hero-ls,-.02em); font-weight:var(--hero-weight,700); text-wrap:balance} .hero p{margin:0 0 .7rem; font-size:var(--sum-size,1rem); color:var(--fg2); max-width:62ch; line-height:1.55} .hero a, .teaser a, .row a{color:inherit; text-decoration:none} .hero a:hover h2, .teaser a:hover h3, .row a:hover h3{color:var(--accent)} .teaser{display:flex; flex-direction:column; gap:.55rem; padding-bottom:var(--t-pad,1.1rem); border-bottom:1px solid var(--rule)} .teaser:last-child{border-bottom:0; padding-bottom:0} .teaser h3{margin:0; font-family:var(--f-display); font-size:var(--t-size,1.06rem); line-height:1.22; font-weight:var(--t-weight,700); letter-spacing:var(--t-ls,-.01em); text-wrap:balance} .teaser p{margin:0; font-size:.86rem; color:var(--fg2); line-height:1.5} .stack{display:flex; flex-direction:column; gap:var(--t-gap,1.1rem)} /* The rail follows the reader down rather than scrolling away. Even with the section blocks moved out of the grid the two columns will never match height exactly, and a sidebar that stops halfway leaves the right half of the page blank. Sticky costs nothing and keeps Widely Reported — the module no single-outlet newsroom can produce — in view. */ /* Both two-column layouts, not just the front page: the story and editorial templates use .article and were left non-sticky, with 690px of dead space below the rail on a typical story. */ /* Sticky only while the rail is short enough to stay whole. With Editorial, Widely Reported and Around the Sections it is now taller than the viewport, and capping its height to keep sticky working put a second scrollbar inside the page — the last block was reachable only by scrolling the rail itself. A rail with enough in it does not need to follow the reader; it just needs to reach the bottom, which it now does. */ @media (min-width: 900px) { .article > .rail { position: sticky; /* Clear of the masthead, which is not itself sticky. */ top: 1.5rem; align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; scrollbar-width: thin; } .lead-grid > .rail { align-self: start; } } /* Below the grid the section blocks run full width, so three of them sit side by side instead of stacking down one narrow column. */ .sections-grid { display: grid; gap: var(--gap, 1.5rem) 2rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .sections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .sections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sections-grid > section { min-width: 0; } .sections-grid .sec-head { margin-top: 0; } /* Section blocks. The lead carries the picture at full block width, the rest are headlines — a front page indexing ten sections is a contents page, not ten articles, and printing an excerpt under every one of them turned the bottom of the page into a wall of grey text. */ .sections-grid section .teaser.is-lead{display:block; padding-bottom:.85rem; border-bottom:1px solid var(--rule)} .sections-grid section .teaser.is-lead .thumb{display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:calc(var(--card-radius,16px) * .7); margin-bottom:.6rem} .sections-grid section .teaser.is-lead .thumb img{width:100%; height:100%; object-fit:cover; display:block} .sections-grid section .teaser.is-lead h3{font-size:1.06rem; line-height:1.24} .sections-grid section .teaser.is-brief{display:block; padding-block:.6rem; border-bottom:1px solid var(--rule)} .sections-grid section .teaser.is-brief:last-child{border-bottom:0} .sections-grid section .teaser.is-brief h3{font-size:.9rem; line-height:1.3; font-weight:600} .sections-grid section .teaser p{display:none} /* Ten sections, not three. */ @media (min-width:700px){ .sections-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1100px){ .sections-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } .sections-grid{gap:1.6rem 1.8rem; margin-top:2rem} .sections-grid section{min-width:0} /* latest river — compact rows */ .row{display:grid; grid-template-columns:auto 1fr; gap:.2rem .85rem; align-items:baseline; padding-block:var(--row-pad,.6rem); border-bottom:1px solid var(--rule)} .row time{font-family:var(--f-meta); font-size:.7rem; color:var(--meta); font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:500} .row h3{margin:0; font-size:var(--row-size,.92rem); font-weight:var(--row-weight,600); line-height:1.32; font-family:var(--f-display); letter-spacing:var(--t-ls,-.01em)} .row .meta{grid-column:2; margin-top:.15rem} /* The blank slot. Same box as a thumbnail, filled with the section's colour rather than left empty — a missing picture should read as a design choice, not as a gap, and the text edge must not move from row to row. */ .thumb.is-blank{display:block; background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 62%, #ffffff) 0%, color-mix(in oklab, var(--accent) 88%, #12103a) 100%)} .thumb.is-blank[data-cat="world"]{background: linear-gradient(150deg,#3aa0d8 0%,#1b3f7a 100%)} .thumb.is-blank[data-cat="business"]{background: linear-gradient(150deg,#12c2a0 0%,#0d5f68 100%)} .thumb.is-blank[data-cat="sport"]{background: linear-gradient(150deg,#ff8a4b 0%,#a4321f 100%)} .thumb.is-blank[data-cat="technology"]{background: linear-gradient(150deg,#8b5cf6 0%,#2a1d63 100%)} .thumb.is-blank[data-cat="entertainment"]{background: linear-gradient(150deg,#ff5ba8 0%,#7a1f56 100%)} /* widely reported — the signature module */ .widely{background:var(--widely-bg); border:var(--widely-border); border-radius:var(--widely-radius,4px); padding:var(--widely-pad,1.1rem)} .widely ol{list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:.8rem} .widely li{display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:start} .widely .n{font-family:var(--f-meta); font-weight:700; font-size:1.05rem; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.2} .widely h3{margin:0 0 .22rem; font-size:.88rem; font-weight:600; line-height:1.3; font-family:var(--f-display)} .widely a{color:inherit;text-decoration:none} .widely a:hover h3{color:var(--accent)} .bar{height:3px; border-radius:2px; background:var(--rule); margin-top:.3rem; overflow:hidden} .bar span{display:block; height:100%; background:var(--accent)} /* ---- STORY PAGE ---- */ .crumbs{font-family:var(--f-meta); font-size:.72rem; color:var(--meta); padding-block:.9rem; display:flex; gap:.4rem; flex-wrap:wrap} .crumbs a{color:var(--meta); text-decoration:none} .crumbs a:hover{color:var(--accent); text-decoration:underline} .crumbs [aria-current]{color:var(--fg)} .article{display:grid; gap:2rem; grid-template-columns:1fr} @media(min-width:980px){ .article{grid-template-columns:minmax(0,1fr) 300px} } .article h1{margin:.35rem 0 .7rem; font-family:var(--f-display); font-size:var(--h1-size,clamp(1.75rem,4.8vw,2.7rem)); line-height:1.07; letter-spacing:var(--hero-ls,-.02em); font-weight:var(--hero-weight,700); text-wrap:balance} .standfirst{font-size:var(--stand-size,1.1rem); line-height:1.55; color:var(--fg2); margin:0 0 1.1rem; max-width:64ch; font-family:var(--f-stand,var(--f-body))} .byline{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding-block:.85rem; border-block:1px solid var(--rule); margin-bottom:1.2rem} /* Around the sections. The rail ran out well before the river did, leaving a column of nothing for most of the scroll. */ .railsec ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column} .railsec li{padding-block:.7rem; border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:.2rem} .railsec li:last-child{border-bottom:0; padding-bottom:0} .railsec .railsec-tag{font-family:var(--f-meta); font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); text-decoration:none} .railsec .railsec-head{font-family:var(--f-display); font-size:.88rem; font-weight:600; line-height:1.3; color:inherit; text-decoration:none} .railsec .railsec-head:hover{color:var(--accent)} .railsec time{font-family:var(--f-meta); font-size:.68rem; color:var(--meta)} /* The article body. The standfirst above it is deliberately larger and greyer, so the body has to read as the main text without competing with the headline: serif at a comfortable measure, and subheadings that sit closer to the paragraph they introduce than to the one they follow. */ .storybody{max-width:64ch; font-family:var(--f-body); font-size:1.02rem; line-height:1.68} .storybody p{margin:0 0 1.05rem} .storybody p:last-child{margin-bottom:0} .storybody h2{font-family:var(--f-display); font-size:1.16rem; font-weight:700; line-height:1.25; margin:1.9rem 0 .6rem; letter-spacing:-.01em; text-wrap:balance} .storybody h2:first-child{margin-top:.4rem} .storybody a{color:var(--accent)} /* source cards */ .sources h2{font-family:var(--f-display); font-size:1.15rem; margin:0 0 .2rem; font-weight:700} .sources .lede{font-size:.82rem; color:var(--meta); margin:0 0 1rem; font-family:var(--f-meta)} .slist{display:flex; flex-direction:column; gap:var(--s-gap,.7rem); list-style:none; margin:0; padding:0} .scard{display:block; padding:var(--s-pad,.85rem 1rem); border:1px solid var(--rule); border-radius:var(--card-radius,2px); background:var(--s-bg); text-decoration:none; color:inherit; min-height:44px; transition:border-color .12s ease, background .12s ease} .scard:hover{border-color:var(--accent); background:var(--s-hover)} .scard .out{font-family:var(--f-meta); font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:.5rem} .scard .out time{margin-inline-start:auto; color:var(--meta); font-weight:500; letter-spacing:.04em; text-transform:none} .scard h3{margin:.4rem 0 0; font-size:.93rem; font-weight:500; line-height:1.38; font-family:var(--f-body)} .scard .go{font-family:var(--f-meta); font-size:.66rem; color:var(--meta); margin-top:.4rem; display:block} /* Share row. The brand marks are inline SVG inheriting currentColor, and every control is the same pill — the old row styled only