@font-face { font-family: 'News Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/oswald-latin-700-normal.woff2?v=f691ee17) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'News Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/oswald-latin-ext-700-normal.woff2?v=c9ee551a) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'News Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/oswald-cyrillic-700-normal.woff2?v=57606f7d) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'News Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/oswald-cyrillic-ext-700-normal.woff2?v=bcf74cc8) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
/* CPSCount News: shared reading/layout system. The November 2026 editorial palette
   and masthead are in news-edition.css; see the News surface brief for current direction. */

/* ── Faces: self-hosted WOFF2 subsets (assets/fonts/README-fonts.md), loaded per unicode-range ── */
@font-face { font-family: 'News Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-serif-4-latin-400-normal.woff2?v=25e02fe7) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'News Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-serif-4-latin-ext-400-normal.woff2?v=23413ceb) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'News Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-serif-4-cyrillic-400-normal.woff2?v=055d1997) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'News Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-serif-4-cyrillic-ext-400-normal.woff2?v=03093657) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'News Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-serif-4-latin-400-italic.woff2?v=4eae1c91) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'News Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-serif-4-latin-ext-400-italic.woff2?v=36ec5860) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'News Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-serif-4-cyrillic-400-italic.woff2?v=7c0e3f7c) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'News Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-serif-4-cyrillic-ext-400-italic.woff2?v=588edc05) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'News Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-serif-4-latin-600-normal.woff2?v=d2ebdb22) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'News Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-serif-4-latin-ext-600-normal.woff2?v=6a9cab53) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'News Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-serif-4-cyrillic-600-normal.woff2?v=9becb42b) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'News Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-serif-4-cyrillic-ext-600-normal.woff2?v=995088ed) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'News Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-sans-3-latin-400-normal.woff2?v=430012e8) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'News Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-sans-3-latin-ext-400-normal.woff2?v=91bb2a8d) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'News Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-sans-3-cyrillic-400-normal.woff2?v=5f917930) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'News Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/source-sans-3-cyrillic-ext-400-normal.woff2?v=c7e1bb80) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'News Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-sans-3-latin-600-normal.woff2?v=ada73f9a) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'News Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-sans-3-latin-ext-600-normal.woff2?v=80ee57a5) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'News Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-sans-3-cyrillic-600-normal.woff2?v=c448f7aa) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'News Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-sans-3-cyrillic-ext-600-normal.woff2?v=ddf79eae) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
/* Metric-matched fallbacks (measured from the Source files against Georgia and Arial) so the swap barely moves text. */
@font-face { font-family: 'News Serif Fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 107.5%; ascent-override: 96.4%; descent-override: 31.2%; line-gap-override: 0%; }
@font-face { font-family: 'News Sans Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 93%; ascent-override: 110.1%; descent-override: 43%; line-gap-override: 0%; }

/* Shared by the News app and its sibling footer so their content edges align. */
body[data-chrome="news"] { --nw-max: 1840px; --nw-pad: var(--gutter); }

.nw-app {
  --nw-serif: 'News Serif', 'News Serif Fallback', Georgia, 'Times New Roman', serif;
  --nw-sans: 'News Sans', 'News Sans Fallback', system-ui, 'Segoe UI', Arial, sans-serif;
  --nw-head: var(--nw-serif); /* headlines, nameplate, rank numbers */
  --nw-read: var(--nw-serif); /* standfirsts, summaries, the article body */
  /* One type scale for all of News */
  --nw-t-xs: 0.8125rem;
  --nw-t-sm: 0.9375rem;
  --nw-t-md: 1.0625rem;
  --nw-t-lg: 1.25rem;
  --nw-t-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --nw-t-2xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --nw-t-3xl: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
  --nw-col-gap: clamp(20px, 2.2vw, 32px);
  --nw-measure: 56rem;
  --nw-rule: var(--border);
  --nw-rule-strong: var(--border-strong);
  --nw-violet: var(--primary);
  min-block-size: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--nw-sans);
  font-size: var(--nw-t-sm);
  line-height: 1.5;
  caret-color: var(--nw-violet);
}
/* Arabic: the site's IBM Plex Sans Arabic for every voice (already self-hosted, no extra bytes); Latin runs keep the
   News faces. Chinese and Japanese headlines use the reader's CJK sans (a system serif CJK is unreliable at small
   sizes); Hindi falls back to the system Devanagari faces. */
:lang(ar) .nw-app { --nw-head: 'CPS Arabic Body', 'News Sans', sans-serif; --nw-read: 'CPS Arabic Body', 'News Sans', sans-serif; --nw-sans: 'CPS Arabic Body', 'News Sans', 'News Sans Fallback', sans-serif; }
:lang(zh) .nw-app { --nw-head: 'News Serif', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif; --nw-read: 'News Sans', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; --nw-sans: 'News Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; }
:lang(ja) .nw-app { --nw-head: 'News Serif', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; --nw-read: 'News Sans', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; --nw-sans: 'News Sans', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; }
:lang(hi) .nw-app { --nw-head: 'News Serif', 'Noto Serif Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Mangal', serif; --nw-read: 'News Sans', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', sans-serif; --nw-sans: 'News Sans', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', sans-serif; }

.nw-app *, .nw-app *::before, .nw-app *::after { box-sizing: border-box; }
body[data-accent] main .nw-app :is(h1, h2, h3), .nw-app :is(h1, h2, h3) { margin: 0; font-family: var(--nw-head); font-weight: 600; text-wrap: balance; letter-spacing: 0; text-transform: none; text-shadow: none; }
.nw-app a { color: inherit; text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.nw-app :is(a, button, input, textarea, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.nw-app ::selection { background: color-mix(in srgb, var(--nw-violet) 38%, transparent); color: var(--text); }
.nw-app svg { flex-shrink: 0; }
.nw-app { scrollbar-color: var(--border-strong) var(--bg); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw-app time, .nw-fact b, .nw-hb-num, .nw-rank-num, .nw-account-level { font-variant-numeric: tabular-nums lining-nums; }

/* Shared container: one width, one gutter */
.nw-masthead, .nw-nav, .nw-main { inline-size: 100%; max-inline-size: var(--nw-max); margin-inline: auto; padding-inline: var(--nw-pad); }
/* The utility row's rule runs exactly as wide as the section row's rules */
.nw-utility { inline-size: calc(100% - 2 * var(--nw-pad)); max-inline-size: calc(var(--nw-max) - 2 * var(--nw-pad)); margin-inline: auto; }

/* ── The one button / link style ── */
.nw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: var(--tap); padding-inline: 16px;
  border: 1px solid var(--nw-rule-strong); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text);
  font: 600 var(--nw-t-sm)/1.2 var(--nw-sans); text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nw-btn:hover { background: var(--surface-2); border-color: var(--border-control); }
.nw-btn svg { inline-size: 18px; block-size: 18px; }
.nw-btn--primary { background: var(--nw-violet); border-color: var(--nw-violet); color: var(--primary-ink); }
.nw-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.nw-btn:disabled { opacity: 0.55; cursor: progress; }

/* ── Masthead ── */
.nw-bar { background: var(--bg); }
/* Row 1: the site's own row (lockup, site links, account). Every control: News Sans 15px / 500, Mist, 44px tall,
   Deck 2 on hover, like the main site header's links. */
.nw-utility { display: flex; align-items: center; gap: 8px 16px; min-block-size: 56px; border-block-end: 1px solid var(--nw-rule); }
.nw-actions { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nw-action {
  display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: 12px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-muted); font: 500 var(--nw-t-sm)/1.2 var(--nw-sans); white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nw-action:hover { color: var(--text); background: var(--surface-2); }
.nw-action--lang { letter-spacing: 0.04em; }
/* The date line's short phone form (below 720px, see there); the masthead's own date line serves wider screens. */
.nw-today-short { display: none; }
/* Account: the main site's XP chip (pill, Deck 1, Seam edge, violet level disc), with the name or "Sign in". */
.nw-account {
  display: inline-flex; align-items: center; gap: 10px; min-block-size: var(--tap); max-inline-size: 15rem; padding: 5px 14px 5px 5px;
  border: 1px solid var(--nw-rule); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--text);
  font: 600 var(--nw-t-sm)/1.2 var(--nw-sans); white-space: nowrap; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nw-account:hover { border-color: var(--nw-rule-strong); background: var(--surface-2); }
.nw-account-level { display: inline-grid; place-items: center; min-inline-size: 32px; block-size: 32px; padding-inline: 7px; border-radius: var(--radius-pill); background: var(--nw-violet); color: var(--primary-ink); font: 700 var(--nw-t-sm)/1 var(--nw-sans); }
.nw-account-name { overflow: hidden; text-overflow: ellipsis; }
/* The chip gives way first when the row is full (a signed-in row also carries the inbox button): the name ellipsizes. */
.nw-utility > .nw-account { min-inline-size: 0; }
/* A Latin name in the RTL (sa) bar keeps its start and loses its end, like everywhere else. */
.nw-account-name { unicode-bidi: plaintext; }

/* Row 2: date line, nameplate, search */
.nw-masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 24px; padding-block: 20px 16px; }
.nw-today { margin: 0; color: var(--text); font: 600 var(--nw-t-sm)/1.3 var(--nw-sans); }
.nw-brand-news { font: 600 clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem)/1 var(--nw-head); letter-spacing: -0.015em; color: var(--text); text-align: center; }
.nw-brand-news:hover { color: var(--text); }
.nw-search { position: relative; justify-self: end; inline-size: min(100%, 19rem); display: flex; align-items: center; }
.nw-search-submit { position: absolute; inset-inline-end: 0; inset-block: 0; display: grid; place-items: center; inline-size: 44px; min-block-size: 44px; border: 0; border-inline-start: 1px solid var(--nw-rule-strong); border-radius: 0; background: transparent; color: var(--text); cursor: pointer; }
.nw-search-icon { display: none; }
.nw-search-submit svg { inline-size: 18px; block-size: 18px; }
.nw-search-submit:hover { background: var(--surface-2); color: var(--primary); }
.nw-search-submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nw-search input {
  inline-size: 100%; min-block-size: 44px; padding-block: 0; padding-inline: 12px 52px; border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text); font: 400 16px/1.2 var(--nw-sans); appearance: none;
}
.nw-search input::placeholder { color: var(--text-faint); }
.nw-search input:hover { border-color: var(--border-control); }
.nw-search input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.nw-suggest { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: calc(var(--z-header) + 1); max-block-size: min(70vh, 480px); overflow-y: auto; padding: 6px; background: var(--bg-raised); border: 1px solid var(--nw-rule-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
.nw-suggest[hidden] { display: none; }
.nw-suggest-title { margin: 8px 10px 4px; color: var(--text-faint); font: 600 var(--nw-t-xs)/1.3 var(--nw-sans); }
.nw-suggest-item { display: block; padding: 9px 10px; border-radius: 4px; font: 500 var(--nw-t-sm)/1.35 var(--nw-sans); overflow-wrap: anywhere; }
.nw-suggest-item:hover, .nw-suggest-item[aria-selected="true"] { background: var(--surface-2); }
.nw-suggest-item[aria-selected="true"] { background: var(--surface-3); }

/* Row 3: the sections and themes, between a hairline and a double rule. news.mjs folds what does not fit into More;
   without it the row scrolls. */
.nw-nav { position: relative; }
.nw-nav-list {
  list-style: none; margin: 0; padding: 0; display: flex; justify-content: safe center; align-items: center; gap: 0;
  border-block-start: 1px solid var(--nw-rule-strong); border-block-end: 3px double var(--nw-rule-strong);
  overflow-x: auto; scrollbar-width: none;
}
.nw-nav-list::-webkit-scrollbar { display: none; }
.nw-nav[data-nw-fit] .nw-nav-list { overflow: hidden; }
.nw-nav-list > li { flex-shrink: 0; }
.nw-nav-list a, .nw-nav-more > button {
  display: inline-flex; align-items: center; gap: 4px; min-block-size: var(--tap); padding-inline: 14px; border: 0; background: none;
  color: var(--text); font: 500 var(--nw-t-sm)/1.2 var(--nw-sans); white-space: nowrap; cursor: pointer;
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.55em;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.nw-nav-list a:hover, .nw-nav-more > button:hover { text-decoration-color: var(--nw-rule-strong); }
.nw-nav-list a[aria-current="page"] { color: var(--nw-violet); font-weight: 600; text-decoration-color: var(--nw-violet); }
.nw-nav-more { position: static; }
.nw-nav-more[hidden] { display: none; }
.nw-nav-more > button svg { inline-size: 16px; block-size: 16px; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease); }
.nw-nav-more > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nw-nav-more.is-current > button { color: var(--nw-violet); font-weight: 600; }
.nw-more-list {
  position: absolute; inset-block-start: calc(100% - 2px); inset-inline-end: var(--nw-pad); z-index: calc(var(--z-header) + 1); min-inline-size: 13rem; max-inline-size: min(22rem, calc(100% - 2 * var(--nw-pad)));
  list-style: none; margin: 0; padding: 6px; background: var(--bg-raised); border: 1px solid var(--nw-rule-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
}
.nw-more-list[hidden] { display: none; }
.nw-more-list a { display: flex; min-block-size: 40px; padding-inline: 10px; border-radius: 4px; text-decoration: none; white-space: normal; }
.nw-more-list a:hover { background: var(--surface-2); }

/* ── Page frame ── */
.nw-main { padding-block: 24px 64px; }
.nw-page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-block-end: 24px; padding-block-end: 16px; border-block-end: 1px solid var(--nw-rule-strong); }
.nw-page-head h1 { font-size: var(--nw-t-3xl); line-height: 1.08; letter-spacing: -0.01em; }
.nw-page-head p { margin: 0; color: var(--text-muted); }
.nw-list-page { max-inline-size: 64rem; margin-inline: auto; }
.nw-feed-page { max-inline-size: none; }
.nw-edition-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-block-end: 24px; color: var(--text-muted); font: 600 var(--nw-t-sm)/1.4 var(--nw-sans); }
.nw-edition-summary a { display: inline-flex; align-items: center; gap: 8px; color: var(--nw-violet); text-decoration: underline; text-underline-offset: 4px; }
.nw-edition-summary svg { inline-size: 16px; block-size: 16px; }
.nw-popular-recent { margin-block-start: 32px; }
.nw-popular-recent > .nw-hint { max-inline-size: 76ch; margin-block-end: 20px; }
@media (min-width: 1100px) {
  .nw-feed-page .nw-river-list, .nw-feed-page .nw-board-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .nw-feed-page .nw-card--item.has-media { grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem); }
  .nw-feed-page.nw-trending .nw-board-list:not(.is-compact) .nw-card--rank.has-media { grid-template-columns: 2.5rem minmax(0, 1fr) minmax(6rem, 9rem); gap: 16px; }
}
.nw-empty, .nw-hint { color: var(--text-muted); }
.nw-empty-local { display: grid; justify-items: start; gap: 16px; max-inline-size: 60ch; }
.nw-message { max-inline-size: var(--nw-measure); margin: 64px auto; text-align: center; }
.nw-message h1 { font-size: var(--nw-t-3xl); line-height: 1.1; }
.nw-message p { margin: 12px 0 24px; color: var(--text-muted); font-family: var(--nw-read); font-size: var(--nw-t-md); }
.nw-more { margin-block-start: 24px; }
/* Section heads: a violet hairline above a plain serif name; nothing sits above it. */
.nw-section-head { padding-block-start: 10px; margin-block-end: 14px !important; border-block-start: 1px solid var(--nw-violet); font: 700 var(--nw-t-md)/1.2 var(--nw-sans) !important; font-variant-caps: all-small-caps; letter-spacing: 0.03em !important; }
:lang(ar) .nw-section-head, :lang(zh) .nw-section-head, :lang(ja) .nw-section-head, :lang(hi) .nw-section-head { font-variant-caps: normal; letter-spacing: 0 !important; }
.nw-section-head a:hover { text-decoration-line: underline; text-decoration-color: var(--nw-violet); }
.nw-col-more { margin: 12px 0 0; font-weight: 600; }
.nw-col-more a { color: var(--nw-violet); }
.nw-col-more a:hover { text-decoration-line: underline; }

/* ── Story anatomy ── */
.nw-card { position: relative; min-inline-size: 0; }
.nw-card-text { display: grid; gap: 8px; align-content: start; min-inline-size: 0; }
.nw-card-title { font-size: var(--nw-t-lg); line-height: 1.22; overflow-wrap: anywhere; }
.nw-card-title a { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-fast) var(--ease); }
.nw-card-title a:hover { text-decoration-color: var(--nw-violet); }
.nw-card-standfirst { margin: 0; color: var(--text-muted); font-family: var(--nw-read); font-size: var(--nw-t-md); line-height: 1.5; overflow-wrap: anywhere; }
.nw-card-meta, .nw-tick-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; color: var(--text-muted); font: 400 var(--nw-t-xs)/1.5 var(--nw-sans); }
.nw-card-meta time { color: var(--text); font-weight: 600; }
.nw-fact b { color: var(--text); font-weight: 600; }
.nw-topic { color: var(--nw-violet); font-weight: 600; }
.nw-topic:hover { text-decoration-line: underline; }
.nw-card-media { display: block; margin: 0; min-inline-size: 0; }
.nw-card-media > a { display: block; }
.nw-card-media figcaption { margin-block-start: 6px; color: var(--text-faint); font: 400 var(--nw-t-xs)/1.4 var(--nw-sans); }
.nw-card-media img, .nw-cover img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; background: var(--surface-1); }
.nw-move { display: inline-flex; align-items: center; gap: 2px; color: var(--nw-violet); font-weight: 600; }
.nw-move svg { inline-size: 14px; block-size: 14px; }
.nw-move[hidden] { display: none; }
[dir="rtl"] .nw-move svg { transform: scaleX(-1); }

/* ── Home: the front page ── */
.nw-switch { display: none; }
.nw-front { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.nw-panel { min-inline-size: 0; }
.nw-reading-col, .nw-briefing-col { display: contents; min-inline-size: 0; }
.nw-lead-col, .nw-side-col, .nw-latest { min-inline-size: 0; }
.nw-side-col { display: grid; gap: 32px; align-content: start; }

/* The lead: headline and summary beside the picture */
.nw-card--lead { display: grid; gap: 16px; grid-template-areas: "media" "text"; }
.nw-card--lead .nw-card-text { grid-area: text; gap: 12px; }
.nw-card--lead .nw-card-media { grid-area: media; }
.nw-card--lead .nw-card-title { font-size: var(--nw-t-2xl); line-height: 1.12; letter-spacing: -0.01em; }
.nw-card--lead:not(.has-media) .nw-card-title { font-size: var(--nw-t-3xl); line-height: 1.08; }
.nw-card--lead .nw-card-standfirst { font-size: var(--nw-t-lg); line-height: 1.45; font-style: italic; }
:lang(zh) .nw-card--lead .nw-card-standfirst, :lang(ja) .nw-card--lead .nw-card-standfirst, :lang(ar) .nw-card--lead .nw-card-standfirst, :lang(hi) .nw-card--lead .nw-card-standfirst { font-style: normal; }
.nw-secondary { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: 24px; border-block-start: 1px solid var(--nw-rule); }
.nw-card--second { display: grid; gap: 12px; grid-template-areas: "media" "text"; padding-block: 20px; }
.nw-card--second + .nw-card--second { border-block-start: 1px solid var(--nw-rule); }
.nw-card--second .nw-card-text { grid-area: text; }
.nw-card--second .nw-card-media { grid-area: media; }
.nw-card--second .nw-card-title { font-size: var(--nw-t-xl); line-height: 1.18; }

/* Most popular: plain numbered entries */
.nw-board-list { list-style: none; margin: 0; padding: 0; }
.nw-card--rank { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 4px 12px; padding-block: 12px; border-block-end: 1px solid var(--nw-rule); }
.nw-entry:first-child .nw-card--rank { padding-block-start: 0; }
.nw-rank-num { font: 600 1.5rem/1.05 var(--nw-head); color: var(--nw-violet); }
.nw-board-list.is-compact .nw-card-text { gap: 4px; }
.nw-board-list.is-compact .nw-card-title { font-size: var(--nw-t-md); line-height: 1.3; }

/* Latest: a time list */
.nw-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
.nw-timeline li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding-block: 12px; border-block-end: 1px solid var(--nw-rule); }
.nw-timeline li:first-child { padding-block-start: 0; }
.nw-clock { display: grid; align-content: start; gap: 2px; padding-block-start: 3px; }
.nw-clock-time { color: var(--text); font: 600 var(--nw-t-xs)/1.2 var(--nw-sans); white-space: nowrap; }
.nw-clock-day { color: var(--text-faint); font: 400 0.75rem/1.25 var(--nw-sans); max-inline-size: 7.5rem; }
.nw-clock-day:empty { display: none; }
.nw-live .nw-clock-time { display: inline-flex; align-items: center; gap: 6px; color: var(--nw-violet); }
.nw-live .nw-clock-time::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--nw-violet); flex-shrink: 0; }
.nw-tick { display: grid; gap: 4px; min-inline-size: 0; }
.nw-tick .nw-card-title { font-size: var(--nw-t-md); line-height: 1.3; }
.nw-latest .nw-more { margin-block-start: 16px; }

/* Discussed in Community */
.nw-talk { list-style: none; margin: 0; padding: 0; }
.nw-talk li { display: grid; gap: 2px; padding-block: 10px; border-block-end: 1px solid var(--nw-rule); }
.nw-talk li:first-child { padding-block-start: 0; }
.nw-talk a { font: 600 var(--nw-t-md)/1.3 var(--nw-head); }
.nw-talk a:hover { text-decoration-line: underline; text-decoration-color: var(--nw-violet); }
.nw-talk .nw-fact { color: var(--text-muted); font-size: var(--nw-t-xs); }

/* Theme blocks: one per covered game or company */
.nw-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-block-start: 40px; padding-block-start: 24px; border-block-start: 3px solid var(--nw-rule-strong); }
.nw-section { min-inline-size: 0; padding-block-end: 32px; }
.nw-card--section { display: grid; gap: 12px 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text"; }
.nw-card--section.has-media { grid-template-columns: minmax(0, 1fr) 7.5rem; grid-template-areas: "text media"; }
.nw-card--section .nw-card-text { grid-area: text; }
.nw-card--section .nw-card-media { grid-area: media; align-self: start; }
.nw-card--section .nw-card-title { font-size: var(--nw-t-lg); line-height: 1.25; }
.nw-card--section .nw-card-standfirst { font-size: var(--nw-t-sm); }
.nw-headlines { list-style: none; margin: 16px 0 0; padding: 0; }
.nw-headlines--front { margin-block-start: 0; }
.nw-headlines--front .nw-card-title { font-size: var(--nw-t-lg); line-height: 1.25; }
.nw-headlines--front .nw-card-standfirst { font-size: var(--nw-t-sm); }
.nw-headlines li { display: grid; gap: 4px; padding-block: 12px; border-block-start: 1px solid var(--nw-rule); }
.nw-headlines .nw-card-title { font-size: var(--nw-t-md); line-height: 1.3; }

/* The index of covered games and companies */
.nw-topics { margin-block-start: 32px; }
.nw-topic-index { list-style: none; margin: 0; padding: 0; columns: 12rem auto; column-gap: var(--nw-col-gap); column-rule: 1px solid var(--nw-rule); }
.nw-topic-index li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-block: 6px; break-inside: avoid; }
.nw-topic-index a { font: 600 var(--nw-t-md)/1.3 var(--nw-head); }
.nw-topic-index a:hover { color: var(--nw-violet); text-decoration-line: underline; }
.nw-topic-index span { color: var(--text-faint); font-size: var(--nw-t-xs); }

/* Tabs: the trending windows and the phone Top / Latest switch, set like the section row */
.nw-tabs, .nw-switch { gap: 0; border-block-end: 1px solid var(--nw-rule-strong); }
.nw-tabs { display: inline-flex; }
.nw-tabs a, .nw-switch button {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--tap); padding-inline: 16px; margin-block-end: -1px;
  border: 0; border-block-end: 2px solid transparent; background: none; color: var(--text-muted); font: 500 var(--nw-t-sm)/1.2 var(--nw-sans); cursor: pointer;
}
.nw-tabs a:hover, .nw-switch button:hover { color: var(--text); }
.nw-tabs a[aria-current="page"], .nw-switch button[aria-selected="true"] { color: var(--text); font-weight: 600; border-block-end-color: var(--nw-violet); }

/* ── Rows: trending, hubs, search, older Latest pages ── */
.nw-river-list { display: grid; margin-block-end: 24px; }
.nw-card--item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; padding-block: 20px; border-block-end: 1px solid var(--nw-rule); }
.nw-card--item.has-media { grid-template-columns: minmax(0, 1fr) minmax(7rem, 13rem); }
.nw-card--item .nw-card-title { font-size: var(--nw-t-xl); line-height: 1.2; }
.nw-card--item .nw-card-standfirst { font-size: var(--nw-t-sm); }
.nw-trending .nw-board-list:not(.is-compact) .nw-card--rank { grid-template-columns: 3rem minmax(0, 1fr); gap: 4px 20px; padding-block: 20px; }
.nw-trending .nw-board-list:not(.is-compact) .nw-card--rank.has-media { grid-template-columns: 3rem minmax(0, 1fr) minmax(7rem, 13rem); }
.nw-trending .nw-entry:first-child .nw-card--rank { padding-block-start: 4px; }
.nw-trending .nw-rank-num { font-size: 2rem; }
.nw-trending .nw-card-title { font-size: var(--nw-t-xl); line-height: 1.2; }
.nw-trending .nw-card-standfirst { font-size: var(--nw-t-sm); }
.nw-day { margin: 32px 0 0; padding-block-end: 8px; border-block-end: 1px solid var(--nw-rule-strong); font-size: var(--nw-t-lg); color: var(--text); }
.nw-river > .nw-day:first-child { margin-block-start: 0; }
.nw-hub { display: grid; gap: 0 var(--nw-col-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.nw-rail { display: grid; gap: 32px; align-content: start; padding-block-start: 24px; }
.nw-rail h2 { padding-block-start: 10px; margin-block-end: 12px; border-block-start: 1px solid var(--nw-violet); font-size: var(--nw-t-lg); }
.nw-links { list-style: none; margin: 0; padding: 0; display: grid; }
.nw-links li { padding-block: 10px; border-block-end: 1px solid var(--nw-rule); }
.nw-links li:first-child { padding-block-start: 0; }
.nw-links a { font: 600 var(--nw-t-md)/1.3 var(--nw-head); }
.nw-links a:hover { text-decoration-line: underline; text-decoration-color: var(--nw-violet); }
.nw-links span { color: var(--text-muted); font-size: var(--nw-t-xs); }

/* Hub indexes: one row per game or company */
.nw-topic-rows { list-style: none; margin: 0; padding: 0; }
.nw-topic-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 24px; padding-block: 14px; border-block-end: 1px solid var(--nw-rule); }
.nw-topic-rows a { font: 600 var(--nw-t-xl)/1.2 var(--nw-head); overflow-wrap: anywhere; }
.nw-topic-rows a:hover { color: var(--nw-violet); text-decoration-line: underline; }
.nw-topic-count { color: var(--text); font-weight: 600; }
.nw-topic-rows time { color: var(--text-muted); font-size: var(--nw-t-xs); }
.nw-search-page > section + section { margin-block-start: 24px; }
.nw-search-page .nw-topic-index { margin-block-end: 8px; }
.nw-search-recovery { display: grid; justify-items: start; gap: 16px; max-inline-size: 60ch; }
.nw-search-recovery p { margin: 0; color: var(--text-muted); }

/* ── Article: one reading column ── */
.nw-article { display: grid; grid-template-columns: minmax(0, 1fr); }
.nw-article-head, .nw-body, .nw-article-foot { inline-size: 100%; max-inline-size: var(--nw-measure); margin-inline: auto; }
.nw-article-head { padding-block-start: 16px; }
.nw-headline { font-size: var(--nw-t-3xl); line-height: 1.1; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.nw-standfirst { margin: 16px 0 0; color: var(--text-muted); font: 400 var(--nw-t-lg)/1.45 var(--nw-read); }
.nw-dateline { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; color: var(--text-muted); font: 400 var(--nw-t-sm)/1.5 var(--nw-sans); }
.nw-byline { color: var(--text); font-weight: 600; }
/* The story's numbers: one sober row between hairlines */
.nw-heatbox { margin-block: 16px 0; padding-block: 10px; border-block: 1px solid var(--nw-rule); }
.nw-heatbox dl { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.nw-heatbox dl > div { display: grid; gap: 1px; }
.nw-heatbox dt { color: var(--text-faint); font: 400 0.75rem/1.3 var(--nw-sans); }
.nw-heatbox dd { margin: 0; color: var(--text); font: 600 var(--nw-t-sm)/1.3 var(--nw-sans); }
.nw-hb-rank .nw-hb-num { color: var(--nw-violet); }
/* Heat / Outlets legend (news-render.js heatLegend): a 28px "?" ring in Mist (44px hit area) at the end of the facts row,
   the Most popular head and the Trending head; open, one line per term in a Hull popover like More's. */
.nw-heatbox { display: flex; align-items: center; gap: 8px 16px; }
.nw-heatbox dl { flex: 1 1 auto; min-inline-size: 0; }
.nw-board { position: relative; }
.nw-board > .nw-legend { position: absolute; inset-block-start: 6px; inset-inline-end: 0; }
.nw-legend { position: relative; flex: none; }
.nw-legend > summary {
  position: relative; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 1px solid var(--nw-rule-strong); border-radius: 50%;
  color: var(--text-muted); font: 600 0.875rem/1 var(--nw-sans); list-style: none; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nw-legend > summary::-webkit-details-marker { display: none; }
.nw-legend > summary::after { content: ''; position: absolute; inset: -8px; }
.nw-legend > summary:hover, .nw-legend[open] > summary { color: var(--text); border-color: var(--nw-violet); }
/* "How ranking works" in the lead story's meta line: a quiet text control, 44px target, no growth of the line. */
.nw-legend--inline > summary { z-index: 1; display: inline; inline-size: auto; block-size: auto; border: 0; border-radius: 0; color: var(--text-muted); font: 500 var(--nw-t-xs)/1.5 var(--nw-sans); text-decoration: underline; text-decoration-color: var(--nw-rule-strong); text-underline-offset: 0.2em; }
.nw-legend--inline > summary::after { inset: calc(50% - 22px) -4px; }
.nw-legend--inline { position: static; }
.nw-card-meta:has(> .nw-legend--inline) { position: relative; }
.nw-legend--inline .nw-legend-body { inset-inline: 0 auto; }
.nw-legend-body {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 5; inline-size: min(20rem, calc(100vw - 2 * var(--nw-pad)));
  display: grid; gap: 6px; padding: 10px 12px; background: var(--bg-raised); border: 1px solid var(--nw-rule-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  color: var(--text-muted); font: 400 var(--nw-t-sm)/1.45 var(--nw-sans); text-align: start;
}
.nw-legend-body p { margin: 0; }
.nw-cover { inline-size: 100%; max-inline-size: var(--nw-measure); margin: 28px auto 0; }
.nw-cover figcaption, .nw-body figcaption { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-block-start: 8px; color: var(--text-muted); font: 400 var(--nw-t-xs)/1.45 var(--nw-sans); }
.nw-credit, .nw-body figcaption :is(small, .nw-figure-credit, .nw-credit) { color: var(--text-faint); font-size: inherit; }
.nw-body { margin-block-start: 28px; color: var(--text); font: 400 1.125rem/1.7 var(--nw-read); overflow-wrap: anywhere; }
.nw-body > :first-child { margin-block-start: 0; }
.nw-body :is(p, ul, ol) { margin-block: 0 1.15em; }
.nw-body :is(ul, ol) { padding-inline-start: 1.3em; }
.nw-body li + li { margin-block-start: 0.35em; }
.nw-body :is(h2, h3) { margin-block: 1.7em 0.5em; line-height: 1.2; }
.nw-body h2 { font-size: var(--nw-t-xl); }
.nw-body h3 { font-size: var(--nw-t-lg); }
.nw-body strong { font-weight: 600; }
.nw-body a { color: var(--nw-violet); text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--nw-violet) 45%, transparent); }
.nw-body a:hover { text-decoration-color: currentColor; }
.nw-body blockquote { margin: 1.5em 0; padding-inline-start: 20px; border-inline-start: 1px solid var(--nw-rule-strong); color: var(--text-muted); font-style: italic; }
.nw-body blockquote p:last-child { margin-block-end: 0; }
.nw-body :is(img, video, iframe) { max-inline-size: 100%; block-size: auto; }
/* Inline pictures from our media (news-markdown.js emits <figure class="nw-figure"><img>[<figcaption>]</figure>) */
.nw-body figure, .nw-figure { margin: 1.8em 0; }
/* width/height carry the upload's own ratio (portrait, square or wide): full column width, tall pictures capped and centred */
.nw-body figure img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: min(80vh, 46rem); margin-inline: auto; border-radius: 2px; background: var(--surface-1); }
.nw-figure-caption { color: var(--text-muted); }
.nw-body :is(pre, code) { font-family: var(--font-mono); font-size: 0.88em; }
.nw-body pre { overflow-x: auto; padding: 12px; border: 1px solid var(--nw-rule); border-radius: var(--radius-sm); background: var(--bg-raised); }
.nw-body table { display: block; max-inline-size: 100%; overflow-x: auto; border-collapse: collapse; font: 400 var(--nw-t-sm)/1.5 var(--nw-sans); font-variant-numeric: tabular-nums; }
.nw-body :is(th, td) { padding: 6px 10px; border: 1px solid var(--nw-rule); }

.nw-article-foot { display: grid; gap: 28px; margin-block-start: 36px; }
.nw-sources { padding-block-start: 12px; border-block-start: 1px solid var(--nw-violet); }
.nw-sources h2, .nw-comments > h2 { font-size: var(--nw-t-lg); line-height: 1.2; }
.nw-sources p { margin: 6px 0 10px; color: var(--text-muted); font-size: var(--nw-t-sm); }
.nw-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.nw-sources li:not(:last-child)::after { content: "·"; margin-inline: 10px; color: var(--text-faint); }
.nw-sources a { color: var(--nw-violet); font-weight: 600; text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--nw-violet) 40%, transparent); }
.nw-sources a:hover { text-decoration-color: currentColor; }
.nw-play { display: flex; flex-wrap: wrap; gap: 12px; }
.nw-tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.nw-tags li:not(:last-child)::after { content: "·"; margin-inline: 10px; color: var(--text-faint); }
.nw-tags a { color: var(--nw-violet); font-weight: 600; }
.nw-tags a:hover { text-decoration-line: underline; }
.nw-article-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 12px; border-block: 1px solid var(--nw-rule); }
.nw-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--text-muted); font-size: var(--nw-t-sm); }
.nw-crumbs li + li::before { content: "/"; margin-inline: 8px; color: var(--text-faint); }
.nw-crumbs a:hover { color: var(--text); text-decoration-line: underline; }
.nw-share { margin: 0; }
.nw-related { inline-size: 100%; max-inline-size: var(--nw-max); margin: 56px auto 0; }
.nw-related-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.nw-card--tile { display: grid; gap: 10px; grid-template-areas: "media" "text"; align-content: start; padding-block: 16px; border-block-end: 1px solid var(--nw-rule); }
.nw-card--tile .nw-card-text { grid-area: text; }
.nw-card--tile .nw-card-media { grid-area: media; }
.nw-card--tile .nw-card-title { font-size: var(--nw-t-md); line-height: 1.3; }

/* ── Comments ── */
.nw-comments { display: grid; gap: 4px; }
.nw-comments > h2 span { color: var(--text-muted); font-family: var(--nw-sans); font-weight: 400; }
.nw-comment-list { list-style: none; margin: 0; padding: 0; }
.nw-comment-list .nw-comment-list { margin-inline-start: 6px; padding-inline-start: 18px; border-inline-start: 1px solid var(--nw-rule); }
.nw-comment { padding-block: 12px; font-size: var(--nw-t-md); line-height: 1.6; }
.nw-comment + .nw-comment { border-block-start: 1px solid var(--nw-rule); }
.nw-comment--gone { color: var(--text-faint); font-style: italic; }
.nw-comment-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--nw-t-sm); }
.nw-comment-head time { color: var(--text-muted); font-size: var(--nw-t-xs); }
.nw-comment-head .c-author { display: inline-flex; align-items: center; gap: 8px; }
.nw-comment-head .c-avatar { display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; overflow: hidden; background: var(--surface-3); font-size: 0.8rem; font-weight: 600; }
.nw-comment-head .c-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nw-comment-head .c-author-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.nw-comment-head .c-author-name > :is(b, small) { unicode-bidi: isolate; }
.nw-comment-head .c-author-name > b { font-weight: 600; }
.nw-comment-head small { color: var(--text-faint); }
/* Member badges, quiet (newscomments.mjs quietBadges): "Lv 12 · 9.84 CPS" as News Sans text in Mist on the name's
   row. No pill, colour or icon; Community keeps its pills. The "·" rides on the item before it (the Bidi Text Rule). */
.nw-comment-head .nw-flairs { display: inline-flex; flex-wrap: wrap; align-items: baseline; color: var(--text-muted); font: 400 var(--nw-t-xs)/1.4 var(--nw-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw-comment-head .nw-flair:not(:last-child)::after { content: "\00a0·\00a0"; }
.nw-comment-body { margin-block-start: 4px; font-family: var(--nw-read); overflow-wrap: anywhere; }
.nw-comment-body p { margin-block: 0 0.6em; }
.nw-comment-body a { color: var(--nw-violet); text-decoration-line: underline; }
.nw-comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 12px; }
.nw-comment-form { margin: 0; }
.nw-comment-form:has(form) { flex-basis: 100%; }
.nw-comment-form > .nw-hint { margin: 0; }
.nw-comment-compose { display: grid; gap: 12px; justify-items: start; }
.nw-comment-compose textarea { inline-size: 100%; min-block-size: 96px; padding: 12px; resize: vertical; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text); font: 400 16px/1.5 var(--nw-sans); }
.nw-comment-compose textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.nw-error { margin: 0; color: var(--danger); }
.nw-discuss { margin: 0; }
/* One call to action per reader. Until news.mjs knows the session (and without script) a guest sees only the server's
   "Sign in to comment" and a returning member (html[data-auth="in"]) only "Discuss in Community"; then data-cta
   carries the session's step: sign in and join stand alone, the form and "closed" keep Discuss in Community. */
html[data-auth="in"] .nw-comments:not([data-cta]) .nw-signin-cta { display: none; }
html:not([data-auth="in"]) .nw-comments:not([data-cta]) .nw-comment-actions:has(.nw-signin-cta) .nw-discuss,
.nw-comments:is([data-cta="signin"], [data-cta="join"]) .nw-discuss { display: none; }

/* ── Footer: the site's slim app footer in the News faces ── */
body[data-chrome="news"] .app-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 28px max(var(--nw-pad), calc((100% - var(--nw-max)) / 2 + var(--nw-pad)));
  background: var(--bg); border-block-start: 3px double var(--border-strong); color: var(--text-faint);
  font: 400 0.8125rem/1.4 'News Sans', 'News Sans Fallback', system-ui, sans-serif;
}
/* Keep the floating Community launcher's clearance inside the painted footer,
   not as a disconnected strip after it. The extra specificity retains clearance
   when the mobile footer changes its ordinary vertical padding. */
body[data-chrome="news"]:has(.community-dock):not([data-experience]) { padding-block-end: 0; }
body[data-chrome="news"]:has(.community-dock) .app-footer { padding-block-end: max(80px, calc(64px + env(safe-area-inset-bottom, 0px))); }
:lang(ar) body[data-chrome="news"] .app-footer { font-family: 'CPS Arabic Body', 'News Sans', sans-serif; }
body[data-chrome="news"] .app-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
body[data-chrome="news"] .app-footer a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--text-muted); text-decoration: none; }
body[data-chrome="news"] .app-footer a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 3px; }
body[data-chrome="news"] .app-footer__copy { color: var(--text-faint); font-variant-numeric: tabular-nums; }
body[data-chrome="news"] .app-footer__support { min-block-size: var(--tap); padding-inline: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
body[data-chrome="news"] .app-footer__support:hover { background: var(--surface-2); }
body[data-chrome="news"] .app-footer :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Tablet and up ── */
@media (min-width: 768px) {
  .nw-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-card--second { padding-inline: 0 var(--nw-col-gap); }
  .nw-card--second + .nw-card--second { border-block-start: 0; border-inline-start: 1px solid var(--nw-rule); padding-inline: var(--nw-col-gap) 0; }
  .nw-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-section { padding-inline: 0 var(--nw-col-gap); }
  .nw-section:nth-child(2n) { padding-inline: var(--nw-col-gap) 0; border-inline-start: 1px solid var(--nw-rule); }
  .nw-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nw-col-gap); }
  /* The lead: headline across the lead column, then the picture (3/5) beside the summary and facts (2/5) */
  .nw-card--lead.has-media { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto auto 1fr; grid-template-areas: "title title" "media sf" "media meta"; gap: 14px 24px; }
  .nw-card--lead.has-media .nw-card-text { display: contents; }
  .nw-card--lead.has-media .nw-card-title { grid-area: title; font-size: var(--nw-t-2xl); }
  .nw-card--lead.has-media .nw-card-standfirst { grid-area: sf; font-size: var(--nw-t-md); }
  .nw-card--lead.has-media .nw-card-meta { grid-area: meta; align-self: start; }
  /* Secondary pictures stay a clear step below the lead's */
  .nw-card--second .nw-card-media { max-inline-size: 11rem; }
}
/* Reading and updates flow independently: a long Latest list must not push topic stories below the lead. */
@media (min-width: 768px) {
  .nw-front { grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr); grid-template-areas: "reading briefing"; align-items: start; }
  .nw-reading-col { display: block; grid-area: reading; padding-inline-end: var(--nw-col-gap); }
  .nw-briefing-col { display: block; grid-area: briefing; }
  .nw-briefing-col > .nw-side-col { margin-block-start: 32px; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .nw-secondary { grid-template-columns: minmax(0, 1fr); }
  .nw-card--second, .nw-card--second + .nw-card--second { padding-inline: 0; border-inline-start: 0; }
  .nw-card--second + .nw-card--second { border-block-start: 1px solid var(--nw-rule); }
  .nw-card--second.has-media { grid-template-columns: minmax(0, 1fr) 7.5rem; grid-template-areas: "text media"; }
  .nw-sections { grid-template-columns: minmax(0, 1fr); }
  .nw-section, .nw-section:nth-child(2n) { padding-inline: 0; border-inline-start: 0; }
}
@media (min-width: 1100px) {
  .nw-front { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); grid-template-areas: "reading latest side"; }
  .nw-home--no-side .nw-front { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "reading latest"; }
  .nw-briefing-col { display: contents; }
  .nw-home--no-side .nw-briefing-col { display: block; grid-area: latest; }
  .nw-briefing-col > .nw-topics { grid-column: 1 / -1; }
  .nw-latest { grid-area: latest; }
  .nw-briefing-col > .nw-side-col { grid-area: side; margin-block-start: 0; padding-inline-start: var(--nw-col-gap); border-inline-start: 1px solid var(--nw-rule); }
  .nw-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 32px; }
  .nw-card--section.has-media { grid-template-columns: minmax(0, 1fr) 8rem; grid-template-areas: "text media"; align-items: start; }
  .nw-hub { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .nw-hub > .nw-page-head { grid-column: 1 / -1; }
  .nw-hub > .nw-river { grid-column: 1; }
  .nw-hub > .nw-rail { grid-column: 2; grid-row: 2; padding-block-start: 0; padding-inline-start: var(--nw-col-gap); border-inline-start: 1px solid var(--nw-rule); }
  .nw-related-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .nw-card--tile { padding-inline: var(--nw-col-gap); border-block-end: 0; border-inline-start: 1px solid var(--nw-rule); }
  .nw-card--tile:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .nw-card--tile:last-child { padding-inline-end: 0; }
}

/* ── Masthead below 720px: one utility row (wordmark, language, sign-in or the member's chip, menu), about 110px with
   the nameplate row and the sections. The DOM order stays the wide row's; Community lives in the shared drawer here and
   the date line is dropped. The shared brand keeps its responsive rules in news-brand.css. */
@media (max-width: 719.98px) {
  .nw-utility { gap: 8px; min-block-size: 42px; border-block-end: 0; }
  .nw-actions { display: contents; }
  .nw-actions > a.nw-action, .nw-today-short { display: none; }
  .nw-action--lang { order: 1; }
  .nw-utility > .nw-inbox { order: 2; }
  .nw-utility > .nw-account { order: 3; }
  .nw-action[data-nw-action="site-menu"] { order: 4; }
  .nw-action { position: relative; min-block-size: 36px; padding-inline: 8px; }
  .nw-action::before { content: ''; position: absolute; inset: -4px 0; }
  .nw-action[data-nw-action="site-menu"] { inline-size: 36px; padding: 0; justify-content: center; }
  .nw-action[data-nw-action="site-menu"]::before { inset: -4px; }
  .nw-action[data-nw-action="site-menu"] > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nw-utility > .nw-account { min-inline-size: 0; }
  .nw-account { max-inline-size: 11rem; padding-inline-end: 12px; }
}

/* ── Phones: one column, Top / Latest tabs on the home page ── */
@media (max-width: 767.98px) {
  /* The nameplate row: the name and a search key. The field stays in place, invisible, over the 36px key (its 44px
     target); focused it opens across the row, and the submit key and the suggestions come back with it. */
  .nw-masthead { position: relative; display: flex; align-items: center; justify-content: space-between; min-block-size: 34px; padding-block: 0; gap: 12px; }
  .nw-today { display: none; }
  .nw-brand-news { font-size: 2rem; text-align: start; }
  .nw-search-icon { display: block; position: absolute; inset: 8px 9px; inline-size: 18px; block-size: 18px; color: var(--text-muted); pointer-events: none; }
  .nw-search { flex: none; inline-size: 36px; block-size: 34px; justify-self: auto; }
  .nw-nav-list a, .nw-nav-more > button { min-block-size: 36px; }
  .nw-nav-list { justify-content: flex-start; }
  .nw-nav-list a, .nw-nav-more > button { padding-inline: 10px; }
  .nw-main { padding-block-start: 16px; }
  .nw-page-head h1 { font-size: var(--nw-t-2xl); }
  /* Secondary stories: a small picture at the inline end keeps the front short */
  .nw-card--second.has-media { grid-template-columns: minmax(0, 1fr) 7.5rem; grid-template-areas: "text media"; gap: 16px; }
  .nw-card--second .nw-card-title, .nw-card--section .nw-card-title { font-size: var(--nw-t-lg); }
  .nw-side-col { margin-block-start: 32px; }
  .nw-card--lead .nw-card-title { font-size: var(--nw-t-2xl); }

  .nw-card--item.has-media { grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 12px 16px; }
  .nw-card--item .nw-card-title, .nw-trending .nw-card-title { font-size: var(--nw-t-lg); }
  .nw-card--item .nw-card-standfirst, .nw-trending .nw-card-standfirst { display: none; }
  .nw-trending .nw-board-list:not(.is-compact) .nw-card--rank, .nw-trending .nw-board-list:not(.is-compact) .nw-card--rank.has-media { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 4px 12px; }
  .nw-trending .nw-card--rank .nw-card-media { grid-column: 2; max-inline-size: 100%; }
  .nw-trending .nw-card--rank .nw-card-media img { aspect-ratio: 16 / 9; }
  .nw-trending .nw-rank-num { font-size: 1.5rem; }
  .nw-topic-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .nw-topic-rows time { grid-column: 1 / -1; }
  .nw-topic-rows a { font-size: var(--nw-t-lg); }

  .nw-headline { font-size: var(--nw-t-2xl); }
  .nw-standfirst { font-size: var(--nw-t-md); }
  .nw-cover { margin-inline: calc(-1 * var(--nw-pad)); inline-size: calc(100% + 2 * var(--nw-pad)); max-inline-size: none; }
  .nw-cover img { border-radius: 0; }
  .nw-cover figcaption { padding-inline: var(--nw-pad); }
  .nw-body { font-size: 1.0625rem; }

  body[data-chrome="news"] .app-footer { flex-direction: column; align-items: flex-start; padding-block: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .nw-app *, .nw-app *::before, .nw-app *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Guest account control: the site's one sign-in button (components.css .btn--signin), no level disc. The server
   renders the guest look; a returning member (html[data-auth="in"], set before paint) keeps the neutral chip with the
   name hidden until paintAccount() has run (data-painted), so "Sign in" is never painted for a member. */
html:not([data-auth="in"]) .nw-account.btn--signin,
.nw-account.btn--signin[data-painted] { gap: var(--space-2, 8px); padding: 0 var(--space-5, 24px); border-color: transparent; border-radius: var(--radius-md, 10px); background: var(--primary); color: var(--primary-ink); }
html:not([data-auth="in"]) .nw-account.btn--signin:hover,
.nw-account.btn--signin[data-painted]:hover { background: var(--primary-hover); color: var(--primary-ink); }
html:not([data-auth="in"]) .nw-account.btn--signin .nw-account-level,
.nw-account.btn--signin[data-painted] .nw-account-level { display: none; }
html[data-auth="in"] .nw-account.btn--signin:not([data-painted]) { border-color: var(--nw-rule); background: var(--surface-1); color: var(--text); box-shadow: none; }
html[data-auth="in"] .nw-account.btn--signin:not([data-painted]):hover { border-color: var(--nw-rule-strong); background: var(--surface-2); color: var(--text); }
html[data-auth="in"] .nw-account.btn--signin:not([data-painted]) .nw-account-name { visibility: hidden; }
@media (max-width: 719.98px) { .nw-account.btn--signin { min-block-size: var(--tap); } }
/* The sign-in icon (the site header's) belongs to the guest button only, never to the member chip or its pre-paint
   placeholder; below 480px the guest button is a 44px icon square, its label kept for assistive tech. */
.nw-account-icon { display: inline-grid; place-items: center; }
.nw-account-icon > svg { inline-size: 18px; block-size: 18px; }
.nw-account:not(.btn--signin) .nw-account-icon,
html[data-auth="in"] .nw-account.btn--signin:not([data-painted]) .nw-account-icon { display: none; }
@media (max-width: 479.98px) {
  html:not([data-auth="in"]) .nw-account.btn--signin .nw-account-name,
  .nw-account.btn--signin[data-painted] .nw-account-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Below 360px a member's chip next to the inbox button is the level disc alone (the name stays in its aria-label). */
@media (max-width: 359.98px) {
  html[data-auth="in"] .nw-utility > .nw-account { gap: 0; padding: 5px; }
  html[data-auth="in"] .nw-utility > .nw-account .nw-account-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Account and inbox below 860px: the site header's proportions (shell.css "Header controls"): 36px keys with 18px line
   icons and a 28px level disc, each with a 44px hit area (an invisible ::before 4px past its edge). */
@media (max-width: 859.98px) {
  .nw-utility > .nw-account, .nw-bar .ib-button { position: relative; }
  .nw-utility > .nw-account, .nw-account.btn--signin { min-block-size: 36px; block-size: 36px; padding-block: 3px; }
  .nw-utility > .nw-account::before, .nw-bar .ib-button::before { content: ''; position: absolute; inset: -4px; }
  .nw-bar .ib-button, html[data-auth="in"] .nw-bar .nw-inbox:empty { inline-size: 36px; block-size: 36px; }
  .nw-bar .ib-button > svg { inline-size: 18px; block-size: 18px; }
  .nw-account-level { min-inline-size: 28px; block-size: 28px; padding-inline: 6px; }
  .nw-account { padding-inline-start: 3px; }
  .nw-bar .ib-badge { inset-block-start: -5px; inset-inline-end: -6px; }
  .nw-action--lang { min-inline-size: 44px; justify-content: center; }
}
@media (max-width: 359.98px) {
  html[data-auth="in"] .nw-utility > .nw-account { padding: 3px; }
}
/* The guest account entry below 860px is the shared compact sign-in (shell.css), the member XP chip stays as it is. */

/* Shared Markdown spoilers use the paper's quiet palette. Concealment is in community-markdown.css. */
.nw-comment-body .c-spoiler { padding-inline: .25em; border-radius: 2px; background: var(--border-strong); cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.nw-comment-body .c-spoiler:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nw-comment-body .c-spoiler.is-revealed { background: color-mix(in srgb, var(--nw-violet) 14%, transparent); cursor: auto; }
.nw-comment-status { color: var(--text-muted); font-size: .875rem; }

/* Inline discussion uses the same safe embeds as Community, styled for the News reading surface. */
.nw-comments-paging { display: grid; justify-items: start; gap: 8px; }
.nw-comments-paging:has(button[hidden]):has(p[hidden]) { display: none; }
.nw-comment:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nw-comment :is(.c-score, .c-ticket, .c-news) { margin: 12px 0; padding: 12px; border: 1px solid var(--nw-rule); border-radius: var(--radius-sm); background: var(--surface-1); font: 400 var(--nw-t-sm)/1.5 var(--nw-sans); overflow-wrap: anywhere; }
.nw-comment :is(.c-score, .c-ticket) { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; }
.nw-comment :is(.c-score-body, .c-ticket-main) { flex: 1 1 12rem; min-inline-size: 0; }
.nw-comment :is(.c-score-art, .c-score-art img) { inline-size: 48px; block-size: 48px; object-fit: cover; }
.nw-comment :is(.c-score-head, .c-news-body) { display: grid; gap: 4px; }
.nw-comment :is(.c-score-game, .c-news-title) { font-size: var(--nw-t-md); font-weight: 600; }
.nw-comment :is(.c-score-mode, .c-score-tag, .c-score-facts, .c-news-tag, .c-news-meta, .c-ticket-meta, .c-ticket-stub) { color: var(--text-muted); }
.nw-comment :is(.c-score-tag, .c-news-tag, .c-news-meta, .c-score-actions, .c-ticket-score) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nw-comment :is(.c-score, .c-ticket, .c-news) svg { inline-size: 18px; block-size: 18px; flex-shrink: 0; }
.nw-comment :is(.c-score-value, .c-ticket-score) { margin-block: 8px; font-variant-numeric: tabular-nums; }
.nw-comment :is(.c-score-value, .c-ticket-score) b { font-size: var(--nw-t-xl); margin-inline-end: 8px; }
.nw-comment .c-score-player { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nw-comment .c-score-player .c-avatar { display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; overflow: hidden; background: var(--surface-3); }
.nw-comment .c-score-player .c-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nw-comment .c-score-player .c-author-name { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.nw-comment .c-score-player .c-flairs { display: none; } /* The score and player stay readable without Community's badge pills. */
.nw-comment .c-score-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-block: 8px; }
.nw-comment .c-score-facts div { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.nw-comment .c-score-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.nw-comment .c-score-actions { margin: 8px 0 0; }
.nw-comment :is(.c-score-actions a, .c-ticket-link, .c-news-title a) { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--tap, 44px); color: var(--nw-violet); text-decoration: underline; text-underline-offset: 3px; }
.nw-comment .c-ticket-stub { display: grid; gap: 4px; }
@media (max-width: 479.98px) { .nw-comment .c-score-art { display: none; } }

/* News typography belongs to stories; shared site actions use the site's body face and symbols. */
.nw-action.site-control { gap: 6px; }
.nw-action.site-control > svg { inline-size: 18px; block-size: 18px; flex: none; }
[dir="rtl"] .nw-search-submit > svg { transform: rotate(180deg); }
@media (max-width: 767.98px) {
  .nw-front { display: flex; flex-direction: column; }
  .nw-lead-col { order: 0; }
  .nw-latest { order: 1; }
  .nw-side-col { order: 2; }
  .nw-sections { order: 3; }
  .nw-topics { order: 4; }
}
/* The compact sign-in keeps its whole 44px hit area over the row below (shell.css). */
@media (max-width: 859.98px) { .nw-bar .nw-account { z-index: 1; } .nw-bar .nw-account::before { inset-block-end: -6px !important; } }

/* The newspaper keeps its serif voice; light and color give the rules a clear hierarchy. */
.nw-app { background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 36rem), var(--bg); }
.nw-bar { background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 9%, var(--bg)), color-mix(in srgb, var(--cyan) 4%, var(--bg))); }
.nw-nav { border-block-end-color: color-mix(in srgb, var(--primary) 65%, var(--border)); }
.nw-section-head { border-block-start-color: color-mix(in srgb, var(--cyan) 70%, var(--border)); color: var(--cyan); }
.nw-card-title a { transition: color var(--dur-fast) var(--ease); }
.nw-card-title a:hover { color: var(--primary-hover); text-decoration: underline; text-decoration-thickness: 1px; }
.nw-topic { color: var(--amber); }
.nw-article-route { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; inline-size: 100%; max-inline-size: var(--nw-measure); margin: 0 auto 12px; padding-block-end: 8px; border-block-end: 1px solid var(--nw-rule-strong); }
.nw-article-route a { display: inline-flex; align-items: center; gap: 8px; min-block-size: var(--tap); color: var(--text-muted); }
.nw-article-route svg { inline-size: 16px; block-size: 16px; }
.nw-article-route a:hover, .nw-return:hover { color: var(--primary-hover); }
.nw-article-head { padding-block-start: 4px; }
.nw-standfirst { line-height: 1.55; }
.nw-source-line { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; color: var(--text-muted); font-size: var(--nw-t-sm); }
.nw-source-line a { color: var(--cyan); text-decoration: underline; }
.nw-play--opening { margin-block-start: 20px; }
.nw-play--opening .nw-btn { border: 0; background: color-mix(in srgb, var(--primary) 18%, var(--surface-1)); color: var(--text); }
.nw-heatbox { margin-block-start: 20px; padding-block: 12px; background: none; }
.nw-body h2 { padding-block-start: 8px; color: var(--text); }
.nw-body blockquote { color: var(--text); border-color: var(--cyan); }
.nw-sources { background: none; border-radius: 0; }
.nw-return { display: inline-flex; min-block-size: var(--tap); align-items: center; color: var(--primary); }
.nw-related { margin-block-start: 40px; }
@media (max-width: 600px) {
  .nw-article-route { gap: 4px 12px; }
  .nw-play--opening .nw-btn { inline-size: 100%; white-space: normal; text-align: start; }
  .nw-source-line { font-size: var(--nw-t-sm); }
}
@media (prefers-reduced-motion: no-preference) {
  .nw-btn { transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform 120ms var(--ease); }
  .nw-btn:active { transform: translateY(1px); }
}