:root { --bg: #fff; --text: #141414; --muted: #5c5c5c; --line: #e3e3e3; --card: #fafafa;
        --left: #2563a8; --center: #1d7a5f; --right: #b8322a;
        --serif: Georgia, "Times New Roman", "Noto Serif", serif;
        --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --text: #ececec; --muted: #a3a3a3; --line: #2c2c2c; --card: #1a1a1a; } }
[hidden] { display: none !important; }   /* an element's own display rule must not undo the hidden attribute:
                                           the install bar showed on every phone with nothing in it (2026-11-02) */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.6 var(--serif); }
a { color: inherit; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 18px; }
header.top { border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 6px; flex-wrap: nowrap; }
/* The logo is a newspaper masthead (owner, 2026-11-01): "ABRA" bold, "NEWS" in spaced capitals, a rule
   above in the text colour and a rule below in the three side colours. The letters are never coloured. */
.brand { display: inline-flex; flex-direction: column; align-items: stretch; flex: none; font-size: 32px; line-height: 1;   /* 32px makes the masthead 40px tall, the height of the language box (owner, 2026-11-02) */
         color: var(--text); text-decoration: none; }
.brand .rule { display: block; height: .055em; background: currentColor; }
.brand .rule.tri { display: flex; gap: 1px; background: none; }
.brand .rule.tri i { display: block; flex: 1; }
.brand .tri .left { background: var(--left); } .brand .tri .center { background: var(--center); } .brand .tri .right { background: var(--right); }
.brand .word { display: block; padding: .08em .1em .05em; white-space: nowrap; }
.brand .x { font: 700 1em/1 var(--serif); letter-spacing: .02em; }
.brand .n { font: 400 .58em/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; margin-left: .3em; vertical-align: .12em; }
.tagline { font: 13px var(--sans); color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.langs { font: 14px var(--sans); display: flex; gap: 2px; }
.langs a { text-decoration: none; padding: 0 9px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 6px; color: var(--muted); }
.langs a[aria-current="true"] { color: var(--text); font-weight: 600; border: 1px solid var(--line); }
nav.rubrics { border-bottom: 1px solid var(--line); font: 14px var(--sans); }
nav.rubrics .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 6px; padding-bottom: 6px; scrollbar-width: none; }
nav.rubrics .wrap::-webkit-scrollbar { display: none; }
nav.rubrics .wrap.fade { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
                         mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
/* A mouse cannot scroll a row sideways: from tablet width up the rubrics wrap onto two lines. */
@media (min-width: 700px) { nav.rubrics .wrap { flex-wrap: wrap; overflow-x: visible; } }
nav.rubrics a { white-space: nowrap; text-decoration: none; padding: 0 13px; min-height: 40px; display: inline-flex; align-items: center;
                border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
nav.rubrics a[aria-current="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }
main { padding: 10px 0 60px; }
.label { font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 26px 0 8px; }
main .wrap > .label:first-child { margin-top: 8px; }
h1.page { font: 700 28px/1.2 var(--serif); margin: 6px 0 4px; }
.card { position: relative; padding: 16px 0; border-bottom: 1px solid var(--line); }
.card h2 { font: 700 21px/1.3 var(--serif); margin: 4px 0 6px; }
.card h2 a { text-decoration: none; }
.card h2 a::after { content: ""; position: absolute; inset: 0; }        /* the whole card opens the story */
.card:hover h2 a, .card h2 a:focus-visible { text-decoration: underline; }
.card .meta a, .card .kicker a { position: relative; z-index: 1; }
.card.lead h2 { font-size: 32px; line-height: 1.2; }
.card.lead p { font-size: 19px; }
.subs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.subs .card h2 { font-size: 20px; }
.card.compact { padding: 13px 0; }
.card.compact h2 { font-size: 19px; }
.card.compact p { font-size: 16px; line-height: 1.5; }   /* the whole dek: a clamp cut words in half (owner, 2026-11-02) */
/* Who reported the story (coverage_block): a caption and a wide bar with the counts and words inside;
   a hollow stub for a side with no outlets. On the story page the bar is tall and its segments open
   the sides (they replaced the three side buttons on 2026-11-01). Never wider than 440 / 560 px. */
.cov { margin: 8px 0 0; }
.cov .cap { font: 14px var(--sans); color: var(--muted); }
.cov .flag { font-weight: 600; }
.wide { display: flex; gap: 2px; height: 20px; max-width: 440px; border-radius: 5px; overflow: hidden; margin-top: 4px;
        font: 600 12px/20px var(--sans); color: #fff; }
.wide i, .wide a { display: block; min-width: 5em; padding: 0 5px; white-space: nowrap; overflow: hidden;   /* 5em: the count, three letters and an ellipsis */
                   font-style: normal; color: inherit; text-decoration: none; }
.wide .left { background: var(--left); } .wide .center { background: var(--center); } .wide .right { background: var(--right); }
.wide .zero { flex: 0 0 auto; color: var(--muted); }
.wide .zero.left { background: none; box-shadow: inset 0 0 0 2px var(--left); }
.wide .zero.center { background: none; box-shadow: inset 0 0 0 2px var(--center); }
.wide .zero.right { background: none; box-shadow: inset 0 0 0 2px var(--right); }
.covrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 20px; }    /* wide screens: the meta beside the bar */
.covrow .cov { flex: 0 0 440px; max-width: 100%; }   /* the same width in every card (owner, 2026-11-02); a narrow card: the full width */
.covrow .meta { margin-bottom: 2px; }
.story .cov { margin: 10px 0 0; }
.story .cov .cap { font-size: 14px; }
/* The story page's side cards (sides_cards): the bar along the top of each is the side's share of the
   outlets, one scale for all three; three in a row on a wide screen, stacked on a phone. */
.cards { display: grid; gap: 8px; margin-top: 6px; }
.cards a { display: block; text-decoration: none; color: var(--text); background: var(--card); border-radius: 6px; padding: 9px 12px 10px; }
.cards .track { display: block; height: 5px; border-radius: 3px; background: var(--line); margin-bottom: 8px; overflow: hidden; }
.cards .fill { display: block; height: 100%; }   /* not .share: that is the sharing row */
.cards .left .fill { background: var(--left); } .cards .center .fill { background: var(--center); } .cards .right .fill { background: var(--right); }
.cards .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 12px var(--sans);
               text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cards .head em { font: 600 13px var(--sans); font-style: normal; text-transform: none; letter-spacing: 0; color: var(--text); white-space: nowrap; }
.cards .ang { display: block; margin-top: 4px; font: 15px/1.35 var(--serif); }
.cards a.none .ang, .cards a.none .head em { color: var(--muted); }
.cards a.none .ang { font-style: italic; }
.cards a:hover .ang, .cards a:focus-visible .ang { text-decoration: underline; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.panel .angle { font: 700 20px/1.3 var(--serif); margin: 0 0 12px; }
.sides-title { font: 700 24px/1.2 var(--serif); text-align: center; margin: 34px 0 4px; }
.figures { list-style: none; padding: 0; margin: 4px 0 0; font: 15px/1.45 var(--sans); }
.figures li { padding: 7px 0; border-top: 1px solid var(--line); }
.figures b { font: 700 19px/1 var(--serif); margin-right: 8px; }
.figures .src { color: var(--muted); font-size: 14px; white-space: nowrap; }
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help;
        border-bottom: 1px dotted var(--muted); }
.gloss { max-width: min(420px, 90vw); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px;
         background: var(--bg); color: var(--text); font: 16px/1.5 var(--sans); box-shadow: 0 6px 30px rgba(0,0,0,.18); }
.gloss p { margin: 6px 0 10px; }
.gloss a { font-size: 14px; color: var(--muted); }
.gloss::backdrop { background: rgba(0,0,0,.15); }
.terms dt { font: 700 19px var(--serif); margin: 22px 0 4px; }
.terms dd { margin: 0; }
.search-link { display: inline-flex; align-items: center; padding: 0 8px; min-height: 40px; color: var(--muted); }
.searchbox { width: 100%; font: 18px var(--sans); padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px;
             background: var(--bg); color: var(--text); margin: 8px 0 4px; }
@media (min-width: 1100px) {
  .sides { width: 1060px; margin-left: calc((100% - 1060px) / 2); }
  .panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
  .panels .panel { margin-top: 0; font-size: 16px; }
}
.more { margin: 22px 0 0; font: 16px var(--sans); }
.more a { display: block; text-align: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.card p { margin: 0 0 6px; }
.kicker { font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.kicker a { text-decoration: none; display: inline-block; padding: 6px 0; margin: -6px 0; }   /* a finger-sized target, same look */
.kicker .badge { margin-left: 10px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text); }   /* New, Updated: up by the rubric (owner, 2026-11-02) */
.meta { font: 14px var(--sans); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.meta .when { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }   /* time and minutes stay together */
.badge { border: 1px solid currentColor; border-radius: 4px; padding: 4px 8px; line-height: 1.2; }
a.badge { text-decoration: none; color: var(--text); }
a.badge:hover, a.badge:focus-visible { background: var(--card); }
#wim { scroll-margin-top: 16px; }
.badge.new { font-weight: 600; color: var(--text); }
.disputes { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 2px 18px 8px; margin: 24px 0; }
.disputes .label { margin-top: 14px; }
.disputes > ul { padding-left: 18px; margin: 8px 0; }
.disputes li { margin: 8px 0; }
.disputes li ul { font: 15px/1.5 var(--sans); padding-left: 18px; margin: 6px 0 0; }
.related { margin-top: 30px; }
.related .card h2 { font-size: 18px; }
.day { font: 600 14px var(--sans); color: var(--muted); margin: 26px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--text); }
.story h1 { font: 700 31px/1.2 var(--serif); margin: 8px 0 10px; }
.story .dek { font-size: 1.1em; line-height: 1.45; margin: 0 0 10px; }
.note { font: 14px var(--sans); color: var(--muted); border-left: 3px solid var(--line); padding: 4px 10px; margin: 14px 0; }
.whatsnew { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px 16px; margin: 18px 0; }
.whatsnew p { margin: 6px 0; }
/* The three sides are always on the page (2026-11-02: hidden panels left a phone with no sides at all once
   the side buttons went); the bar's segments and the angles scroll to them. */
.panel { display: block; border: 1px solid var(--line); border-top: 4px solid; border-radius: 8px; padding: 18px 22px 16px; line-height: 1.6;
         margin-top: 10px; scroll-margin-top: 12px; }
.panel.left { border-top-color: var(--left); } .panel.center { border-top-color: var(--center); } .panel.right { border-top-color: var(--right); }
.panel h3.head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px;
                font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.panel h3.head em { font: 600 13px var(--sans); font-style: normal; text-transform: none; letter-spacing: 0; color: var(--text); white-space: nowrap; }
.panel .minimal { font-style: italic; }
ul.src { font: 14px/1.45 var(--sans); padding-left: 18px; margin: 8px 0 0; }
ul.src li { margin: 5px 0; }
.mark { color: var(--muted); }
details { margin: 18px 0; font: 15px var(--sans); }
details summary { cursor: pointer; color: var(--muted); padding: 8px 0; }
details p, details li { font-family: var(--serif); font-size: 17px; }
.share { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 8px; font: 14px var(--sans); align-items: center; }
.share a, .share button { border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px;
  padding: 6px 13px; text-decoration: none; font: 14px var(--sans); cursor: pointer; }
.share .sl { color: var(--muted); margin-right: 2px; }
.regions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; font: 14px var(--sans); }
.regions a { text-decoration: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
footer { border-top: 1px solid var(--line); font: 14px var(--sans); color: var(--muted); }
footer .wrap { padding-top: 10px; padding-bottom: 24px; display: flex; flex-wrap: wrap; gap: 2px 18px; align-items: baseline; }
footer a, footer > .wrap > span { display: inline-block; padding: 6px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 8px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--text); border-radius: 6px; }
.skip:focus { top: 8px; }
.since { font: 14px var(--sans); background: var(--card); border-radius: 6px; padding: 8px 12px; margin: 14px 0 0; }
/* The morning edition by email (owner, 2026-11-03): a card at the end of the front page and of a story. Hidden
   until the script confirms it can send the address. Uncoloured, like all text. */
.subscribe { background: var(--card); border-radius: 10px; padding: 18px; margin: 30px 0 8px; }
.subscribe h2 { font: 700 20px/1.3 var(--serif); margin: 0 0 6px; }
.subscribe p { margin: 0 0 12px; font: 15px/1.5 var(--sans); }
.subscribe form { display: flex; flex-wrap: wrap; gap: 8px; }
.subscribe input { flex: 1 1 220px; min-height: 44px; font: 16px var(--sans); padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--text); }
.subscribe button { min-height: 44px; font: 600 16px var(--sans); padding: 8px 18px; border: 1px solid var(--text);
  border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; }
.subscribe .cap { margin: 10px 0 0; font: 14px var(--sans); color: var(--muted); }
.subscribe .soon { margin: -4px 0 12px; font: 14px var(--sans); color: var(--muted); }
.subscribe .cap:empty { display: none; }
.about h2 { font: 700 20px/1.3 var(--serif); margin: 26px 0 8px; }
.corrections { list-style: none; padding: 0; margin: 16px 0 0; }
.corrections li { margin: 0 0 16px; font: 16px/1.5 var(--serif); }
.corrections .when { font: 14px var(--sans); color: var(--muted); }
.corrections .what { font: 15px/1.5 var(--sans); color: var(--muted); }
.progress { font: 15px var(--sans); color: var(--muted); margin: 0 0 6px; }
.progress.done { color: var(--text); font-weight: 600; }
.card.read h2 a { color: var(--muted); }
.card.read .kicker::after { content: " ✓"; letter-spacing: 0; }
.install { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
           padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line);
           font: 14px/1.4 var(--sans); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
.install > span:first-child { flex: 1 1 200px; }
.install button { font: 600 14px var(--sans); padding: 8px 14px; border: 1px solid var(--text); border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.install .x { margin-left: auto; border: none; font-size: 22px; line-height: 1; padding: 4px 8px; color: var(--muted); }
.vote { margin: 26px 0 8px; }
.vote .vote-title { font: 700 22px/1.3 var(--serif); text-align: center; margin: 0 0 12px; }
/* Four cards of the readers, a mirror of the coverage cards at the top (owner, 2026-11-02, variant A). */
.vote .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* minmax(0, …): equal columns, a long name does not widen its own */
@media (min-width: 700px) { .vote .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vote .cards button { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--card);
                      border: 1px solid transparent; border-radius: 6px; padding: 9px 12px 10px; cursor: pointer; }
.vote .cards button:hover, .vote .cards button:focus-visible { border-color: var(--line); }
.vote .cards button.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.vote .cards button:disabled { opacity: .6; }
.vote .cards .other .fill { background: var(--text); }   /* "none of them": a neutral dark; the muted grey blended with the centre's emerald */
.vote .cards .head b { white-space: nowrap; }
/* The name takes the colour of its track (owner, 2026-11-02): the card reads at once. The only coloured text on the site. */
.vote .cards .left b { color: var(--left); } .vote .cards .center b { color: var(--center); } .vote .cards .right b { color: var(--right); }
.vote .cards .other b { color: var(--text); }   /* the same dark as its track */
.vote .cards .head em.v { color: var(--muted); font-weight: 500; }
.vote .cap { text-align: center; font: 14px var(--sans); color: var(--muted); margin: 10px 0 0; }
.about h1 { font: 700 30px/1.2 var(--serif); }
.about h2 { font: 700 20px var(--serif); margin-top: 26px; }
.langpick { display: grid; gap: 12px; max-width: 360px; margin: 40px auto; font: 18px var(--sans); }
.langpick a { display: block; padding: 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; text-align: center; }
@media (max-width: 700px) { .subs { display: block; } }
@media (max-width: 520px) { body { font-size: 17px; } .story h1 { font-size: 26px; } .card.lead h2 { font-size: 26px; }
  .card.lead p { font-size: 17px; }
  .tagline { display: none; } .search-link { margin-left: auto; } }