silently carries a 60px void under it. */ body.nws .nws-band header, body.nws .nws-shell header { margin: 0; padding: 0; border: 0; } /* layout-dark.css `p { color:#fff }` and essentials.css `p { line-height:22px }` both reach any paragraph that is not inside a component that declares them. THIS RESET IS (0,2,2) AND IT OUT-SPECIFIES A ONE-CLASS COMPONENT. `body.nws .nws-lead-dek` was (0,2,1), so the reset won and every dek inherited its colour from the anchor wrapping the card - which is gold. Measured on the shipped index: the lead dek and all six card deks painted gold instead of muted grey. Every `
`-based component in this file therefore names its PARENT as well (`.nws-lead .nws-lead-dek`, (0,3,1)) instead of relying on source order - the same out-specify-never-order rule the double-linked core sheet forces. */ body.nws .nws-band p, body.nws .nws-shell p { color: inherit; line-height: inherit; margin: 0; } /* the classic sheets put `letter-spacing:-1px` on every heading and a `#ccc` glow on every
; both read as a rendering fault on a dark page */
body.nws .nws-band h1,
body.nws .nws-band h2,
body.nws .nws-shell h1,
body.nws .nws-shell h2,
body.nws .nws-shell h3,
body.nws .nws-shell h4 {
	letter-spacing: .01em; text-transform: none; border: 0; padding: 0; margin: 0;
	font-family: 'Open Sans', Arial, sans-serif;
}

body.nws .nws-w > .container {
	width: 100%;
	max-width: var(--nws-rail);
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------
   PART 1 — THE BAND. The page's identity, and the only thing on the page that
   carries it (design system, locked 2026-08-17).

   Two contents, ONE slot: a post about a game (or with its own uploaded hero)
   wears the photograph under a left-anchored scrim; everything else wears the
   system's artless emphasis ground — deep chrome + gold bloom + weave — with its
   own mark drawn large where the photograph would be.

   LAYERED BACKGROUNDS, NEVER AN OVERLAY ELEMENT. An absolutely positioned film
   needs z-index on the content, which stamps a stacking context onto whatever
   the band contains — the bug class that hid a Stripe modal.
   ------------------------------------------------------------ */
body.nws .nws-band {
	position: relative;
	padding: 40px 0 34px;
	background-color: var(--pv2p-deep, #131314);
	background-image: var(--pv2p-bloom), var(--pv2p-weave);
	border-bottom: 1px solid var(--pv2-line, #2c2c2d);
	overflow: hidden;
}
/* A HERO BAND HAS TO BE TALL ENOUGH TO BE A PHOTOGRAPH. At the artless band's
   own padding the picture is a 185px letterbox behind text, which is a texture,
   not a hero - and this is the page's LCP element and the whole of its identity. */
body.nws .nws-band.has-art {
	min-height: 320px;
	display: flex;
	align-items: center;
	background-image:
		linear-gradient(90deg, var(--pv2p-deep, #131314) 0%, rgba(19, 19, 20, .93) 38%, rgba(19, 19, 20, .58) 68%, rgba(19, 19, 20, .42) 100%),
		linear-gradient(0deg, rgba(19, 19, 20, .55), rgba(19, 19, 20, .10) 60%),
		var(--nws-bandart);
	background-size: auto, auto, cover;
	background-position: center, center, center right;
	background-repeat: no-repeat;
}
body.nws .nws-band > .container { position: relative; }

/* THE INDEX BAND'S ART: one bespoke generic background (a dark dusk horizon
   with the site's gold as its light - commissioned, no game IP, no text), not
   per-game blocks (Ryan rejected the six-game mosaic). The image is COMPOSED
   dark on the left where the headline stands, so the film here is light
   insurance rather than the heavy story-hero scrim - the art stays genuinely
   visible, which was the complaint. Headline contrast is measured on the
   composited pixels by the public spec, never assumed. Four classes so it can
   never tie with .has-art's own stack. */
body.nws .nws-band.has-art.nws-idxart {
	min-height: 300px;
	background-image:
		linear-gradient(90deg, rgba(19, 19, 20, .72) 0%, rgba(19, 19, 20, .55) 34%, rgba(19, 19, 20, .18) 55%, rgba(19, 19, 20, 0) 78%),
		linear-gradient(0deg, rgba(19, 19, 20, .30), rgba(19, 19, 20, 0) 45%),
		var(--nws-bandart);
	background-size: auto, auto, cover;
	background-position: center, center, center;
}
@media (max-width: 900px) {
	/* the phone crop keeps the glow: anchor right where the image's light
	   lives, and run the film vertically - open at the top where the white H1
	   leads, closing over the softer blurb and meta below it. This block must
	   exist at the SAME four-class specificity as the desktop rule above - the
	   shared ≤900 .has-art override is one class lighter and would lose. */
	body.nws .nws-band.has-art.nws-idxart {
		min-height: 0;
		background-image:
			linear-gradient(0deg, rgba(19, 19, 20, .92) 12%, rgba(19, 19, 20, .88) 58%, rgba(19, 19, 20, .30) 100%),
			var(--nws-bandart);
		background-size: auto, cover;
		background-position: center, center right;
	}
}

/* THE TEXT COLUMN STOPS SHORT OF THE ART. A title is never asked to be legible
   over the brightest part of a photograph, because it never reaches it. */
body.nws .nws-bandtxt { max-width: 62%; }
/* AND SO DO THE TEXT RECTS THEMSELVES. A block h1 and a flex meta row stretch
   to the column's full 62% while their ink ends much earlier, so the contrast
   measurement (which reads the RECT, the same way a reader's eye tracks a
   line) ran 400px into the brightened art and failed on pixels no glyph ever
   reaches. fit-content ends each rect where its text does; the wrap caps
   (62ch on the blurb) still apply as maximums. */
body.nws .nws-bandtxt h1,
body.nws .nws-bandtxt .nws-sub,
body.nws .nws-bandtxt .nws-bandmeta { width: fit-content; }

/* THE BAND TEXT KEEPS THE CONTAINER'S LEFT EDGE, ALWAYS (Ryan, 2026-08-18:
   "we need to have the header content over to the left like all the other
   pages"). An earlier pass moved the headline over the article's column on
   three-zone pages; About Us and every other v2 band sit flush left, so the
   news band does the same on every viewport and `.nws-3z` changes nothing
   above the doc grid. */

body.nws .nws-kick {
	display: block;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--pv2-accent, #d5a84a);
}
body.nws .nws-band h1 {
	font-size: 34px;
	font-weight: 400;
	line-height: 1.18;
	color: #fff;
	margin: 0;
}
body.nws .nws-bandtxt .nws-sub {
	margin: 12px 0 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pv2-text-soft, #ccc);
}
body.nws .nws-bandtxt .nws-bandmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 18px 0 0;
	font-size: 12px;
	color: var(--pv2-text-soft, #ccc);
}
body.nws .nws-bandtxt .nws-bandmeta > span,
body.nws .nws-bandtxt .nws-bandmeta > time { display: inline-flex; align-items: center; gap: 6px; }
body.nws .nws-bandtxt .nws-bandmeta .fa { color: var(--pv2-accent, #d5a84a); font-size: 12px; }
body.nws .nws-bandtxt .nws-bandmeta a { color: var(--pv2-accent, #d5a84a); text-decoration: none; }
body.nws .nws-bandtxt .nws-bandmeta a:hover { color: var(--pv2-gold, #eaa824); text-decoration: none; }

/* THE BYLINE. A face, a name, and one quiet meta line - a publication's byline,
   not a widget row (Ryan, 2026-08-18: the one-line name + chip + two icons
   read as "slop"). The face is the comment section's avatar for the same
   person; the role is the one the team's ticket signatures already publish.

   WHAT THE REDESIGN MAY NOT TOUCH: the visible date AND time stay between the
   headline and the body, "Published"/"Updated" keep their labels, and the
   strings stay byte-identical to the NewsArticle graph. No icons on the meta
   line - middots divide it and the face is the only mark. */
body.nws .nws-bandtxt .nws-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	padding: 13px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .10);
	font-size: 12px;
	color: var(--pv2-text-muted, #999);
}
/* the byline's face: one size up from a comment's, same component */
body.nws .nws-av.nws-av-by { width: 38px; height: 38px; flex: 0 0 38px; font-size: 14px; }
body.nws .nws-byline .nws-by-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.nws .nws-byline .nws-by-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.nws .nws-byline .nws-author { color: #fff; font-weight: 600; font-size: 13px; line-height: 1.2; }
body.nws .nws-byline .nws-by-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 8px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--pv2-text-muted, #999);
}
body.nws .nws-byline .nws-by-role { color: var(--pv2-text-soft, #ccc); }
body.nws .nws-byline .nws-by-sep { color: var(--pv2-text-dim, #666); }
body.nws .nws-byline .nws-upd { color: var(--pv2-accent, #d5a84a); }
body.nws .nws-byline .nws-read { color: var(--pv2-text-muted, #999); }

/* THE TRAIL SHOWS ANCESTORS AND NEVER REPEATS THE H1, and it lives in the band
   because a trail is chrome ON the header, not a row under it. */
body.nws .nws-crumbs {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: 12px;
	color: var(--pv2-text-muted, #999);
}
body.nws .nws-crumbs li { display: inline; }
body.nws .nws-crumbs li + li:before { content: '\203A'; margin: 0 7px; color: var(--pv2-text-dim, #666); }
body.nws .nws-crumbs li a { color: var(--pv2-text-soft, #ccc); text-decoration: none; }
body.nws .nws-crumbs li a:hover { color: var(--pv2-accent, #d5a84a); text-decoration: none; }

/* THE STAFF PREVIEW PILL. A fixed badge in the corner instead of a banner at
   the top — the page must look exactly like the page that ships (Ryan rejected
   the full-width ribbon), but the reader still has to be able to tell at a
   glance that it is a draft. Amber dot carries the warning; the pill stays out
   of the layout entirely. */
body.nws .nws-preview {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px 9px 13px;
	background: rgba(19, 19, 20, .94);
	border: 1px solid rgba(240, 173, 78, .55);
	border-radius: 999px;
	color: #bbb;
	font-size: 12.5px;
	line-height: 1.35;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
	pointer-events: none;
	max-width: min(340px, calc(100vw - 36px));
}
body.nws .nws-preview::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pv2-warn, #f0ad4e);
}
body.nws .nws-preview b { color: #fff; font-weight: 700; }
body.nws .nws-preview .fa { display: none; }

/* ------------------------------------------------------------
   PART 2 — THE TYPE CHIP.

   It encodes KIND — announcement, new game, update — and nothing else. Density
   and colour may say what a thing IS; they may never say where it ranks
   (CLAUDE-DESIGN-SYSTEM.md, locked 2026-08-17).

   Tint on the glyph, the label and the border only. A filled chip on a card
   that already carries a photograph is two loud things in one corner.
   ------------------------------------------------------------ */
body.nws .nws-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 9px;
	border: 1px solid rgba(234, 168, 36, .38);
	border-radius: 3px;
	background: rgba(234, 168, 36, .10);
	color: var(--pv2-gold, #eaa824);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	white-space: nowrap;
}
body.nws .nws-chip .fa { font-size: 10px; }
body.nws .nws-chip.t-newgame {
	border-color: rgba(100, 217, 119, .38);
	background: rgba(100, 217, 119, .10);
	color: var(--pv2-ok, #64d977);
}
body.nws .nws-chip.t-update {
	border-color: rgba(91, 192, 222, .38);
	background: rgba(91, 192, 222, .10);
	color: var(--pv2-info, #5bc0de);
}
/* on artwork the chip needs a ground of its own or it disappears into a bright
   frame; the hue still comes from the type */
body.nws .nws-onart .nws-chip {
	background: rgba(19, 19, 20, .78);
	backdrop-filter: blur(2px);
}

/* ------------------------------------------------------------
   THE "New" PILL — the unread alert, on the card.

   A DIFFERENT TIER FROM THE TYPE CHIP BESIDE IT (design system: a label wears
   the tier it belongs to). The chip is KIND — squared, tinted, 3px. This is
   STATE — fully round, solid, black ink on the section's gold. Two shapes and
   two weights, so a reader separates "Update" from "New" without reading
   either, and the gold is spent on the one that is actually news to them.

   IT IS THE SAME OBJECT AS THE RAIL'S NEW PILL (panel-sitenav.css §c2snav-new):
   gold ground, black ink, 700, 999px, and the 1px of bottom padding that lifts
   the ink onto the pill's own midline instead of the line box's. A moved thing
   keeps its clothes — the pill on the tab and the pill on the card are one
   promise, so they may not be two designs. The height is the CHIP's 22px, not
   the rail's 18px, because here it sits in a row with the chip.

   NEVER `position: absolute` WITHOUT THE CHIP'S OWN OFFSETS: on a card it is
   pinned opposite the chip so the two can never collide on a narrow tile, and
   both are inside `.nws-card-art`, which is the positioned box.
   ------------------------------------------------------------ */
body.nws .nws-new {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 22px;
	padding: 0 9px 1px;
	border: 1px solid var(--pv2-gold, #eaa824);
	border-radius: 999px;
	background: var(--pv2-gold, #eaa824);
	color: #131314;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.1px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}
body.nws .nws-card-art .nws-new { position: absolute; top: 12px; right: 12px; }

/* ------------------------------------------------------------
   THE UNREAD FLASH — four seconds, then it is gone.

   Straight from the panel feed it replaces (panel-v2-news.css .news-unread):
   the unread cards wear a gold ring and a 6% gold ground for four seconds so
   the eye lands on what is new, and then the pills fade out (js/news-unread.js)
   because by then they have been seen. This is the whole of Ryan's ask — the
   alert exists, and looking at it is what makes it go away.

   MATCH THE TILE'S HEAVIEST RULE. The lead already carries `--nws-shadow`, so
   its ring COMPOSES with that shadow rather than replacing it — a bare
   `box-shadow` here would drop the lead card off the page. The flash also
   states its own 300ms timing for exactly the three properties it touches: the
   cards' own 160ms is a HOVER ease, and borrowing it would make the flash
   arrive at hover speed and leave at a different one.
   ------------------------------------------------------------ */
body.nws .nws-card.nws-unread {
	border-color: rgba(234, 168, 36, .55);
	background-color: rgba(234, 168, 36, .06);
	box-shadow: 0 0 0 1px rgba(234, 168, 36, .30);
}
body.nws .nws-lead.nws-unread {
	border-color: rgba(234, 168, 36, .55);
	background-color: rgba(234, 168, 36, .06);
	box-shadow: var(--nws-shadow), 0 0 0 1px rgba(234, 168, 36, .30);
}
/* the fade the script drives. Declared here rather than written into a style
   attribute so one place owns the timing, and so the reduced-motion opt-out
   below can turn it into an instant removal. */
body.nws .nws-new.nws-fade,
body.nws .c2snav-new.nws-fade,
body.nws .news-new-badge.nws-fade { opacity: 0; transition: opacity .4s ease; }
body.nws .nws-card.nws-unread,
body.nws .nws-lead.nws-unread { transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }

@media (prefers-reduced-motion: reduce) {
	body.nws .nws-new.nws-fade,
	body.nws .c2snav-new.nws-fade,
	body.nws .news-new-badge.nws-fade { transition: none; }
	body.nws .nws-card.nws-unread,
	body.nws .nws-lead.nws-unread { transition: none; }
}

/* ------------------------------------------------------------
   PART 3 — THE SHELL
   ------------------------------------------------------------ */
body.nws .nws-shell {
	padding: 40px 0 64px;
	font-family: 'Open Sans', Arial, sans-serif;
	color: var(--pv2-text-soft, #ccc);
}
body.nws .nws-sec + .nws-sec { margin-top: 44px; }
body.nws .nws-sechead {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 18px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--pv2-line, #2c2c2d);
}
body.nws .nws-sechead h2 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}
body.nws .nws-sechead .nws-sechead-n {
	font-size: 12px;
	color: var(--pv2-text-dim, #666);
	margin-left: auto;
	white-space: nowrap;
}

/* ------------------------------------------------------------
   PART 4 — THE LEAD STORY.

   Bigger than the cards under it, and the card SAYS WHY: the kicker reads
   LATEST and the date is printed on it. Density is allowed to encode a ranking
   the reader can see and verify; the community index's dead hero cards were
   killed for encoding one nobody could.

   Page 1 only — on page 4 the top row is not the latest anything.
   ------------------------------------------------------------ */
body.nws .nws-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	background: var(--pv2-panel, #212122);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius-lg, 6px);
	box-shadow: var(--nws-shadow);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .16s ease, transform .16s ease;
}
body.nws a.nws-lead:hover,
body.nws a.nws-lead:focus {
	border-color: var(--pv2-border-strong, #4c4c4d);
	text-decoration: none;
}
body.nws .nws-lead-txt {
	padding: 34px 34px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
body.nws .nws-lead-kick {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}
body.nws .nws-lead-kick .nws-latest {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--pv2-text-dim, #666);
}
body.nws .nws-lead h2 {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	margin: 0;
	transition: color .16s ease;
}
body.nws a.nws-lead:hover h2 { color: var(--pv2-gold, #eaa824); }
body.nws .nws-lead .nws-lead-dek {
	margin: 14px 0 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--pv2-text-muted, #999);
}
body.nws .nws-lead-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 22px 0 0;
	font-size: 11.5px;
	color: var(--pv2-text-dim, #666);
}
/* THE READ AFFORDANCE. Its mark is DRAWN - a round disc and a border chevron -
   in the same circular language as the game marks on the foot beside it. Never
   a font glyph here: the public fa-subset has no arrow, an entity is a text
   character wearing an icon's job, and a drawn shape cannot tofu. On hover the
   whole lead card lights the disc, so the affordance answers the pointer. */
body.nws .nws-lead-foot .nws-go {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pv2-accent, #d5a84a);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
body.nws .nws-go .nws-go-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(234, 168, 36, .45);
	background: rgba(234, 168, 36, .12);
	transition: background .15s ease, transform .15s ease;
}
body.nws .nws-go .nws-go-ic:before {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	margin-left: -2px;
	border-top: 2px solid var(--pv2-gold, #eaa824);
	border-right: 2px solid var(--pv2-gold, #eaa824);
	transform: rotate(45deg);
	transition: border-color .15s ease;
}
body.nws .nws-lead:hover .nws-go-ic { background: var(--pv2-gold, #eaa824); transform: translateX(2px); }
body.nws .nws-lead:hover .nws-go-ic:before { border-top-color: #131314; border-right-color: #131314; }
body.nws .nws-lead-art {
	position: relative;
	min-height: 340px;
	overflow: hidden;
	background: var(--pv2p-deep, #131314);
	background-image: var(--pv2p-bloom), var(--pv2p-weave);
}
body.nws .nws-lead-art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
body.nws a.nws-lead:hover .nws-lead-art img { transform: scale(1.035); }
/* an artless lead keeps the quiet bloom+weave ground the box already paints -
   the giant glyph state is retired (never a lightning bolt in an art slot) */

/* ------------------------------------------------------------
   PART 5 — THE CARD GRID.

   A FIXED TRACK COUNT, never `repeat(auto-fit, minmax(...))`. auto-fit silently
   wraps 5+1 when the tiles do not divide the rail, and a ragged wrap reads as
   sloppy (the FTP fleet page learned this). `grid-auto-rows: 1fr` so a card with
   a two-line title cannot make its row taller than the next one.
   ------------------------------------------------------------ */
body.nws .nws-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: var(--nws-gap);
}
body.nws .nws-grid.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

body.nws .nws-card {
	display: flex;
	flex-direction: column;
	background: var(--pv2-panel, #212122);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius-lg, 6px);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .16s ease, background-color .16s ease;
}
body.nws a.nws-card:hover,
body.nws a.nws-card:focus {
	border-color: var(--pv2-border-strong, #4c4c4d);
	background: var(--pv2-raised, #252526);
	text-decoration: none;
}
body.nws .nws-card-art {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--pv2p-deep, #131314);
	background-image: var(--pv2p-bloom), var(--pv2p-weave);
	border-bottom: 1px solid var(--pv2-line, #2c2c2d);
}
/* aspect-ratio is not universal on the browsers this theme still supports, so
   the box keeps a padded fallback underneath it */
@supports not (aspect-ratio: 16 / 9) {
	body.nws .nws-card-art { height: 0; padding-bottom: 56.25%; }
}
body.nws .nws-card-art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
body.nws a.nws-card:hover .nws-card-art img { transform: scale(1.045); }
body.nws .nws-card-art .nws-chip { position: absolute; top: 12px; left: 12px; }

body.nws .nws-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 18px 15px;
	min-width: 0;
}
body.nws .nws-card-body > .nws-chip { align-self: flex-start; margin: 0 0 11px; }
body.nws .nws-card h3 {
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.34;
	color: #fff;
	margin: 0;
	transition: color .16s ease;
}
body.nws a.nws-card:hover h3 { color: var(--pv2-gold, #eaa824); }
body.nws .nws-card .nws-card-dek {
	margin: 9px 0 0;
	font-size: 13px;
	line-height: 1.58;
	color: var(--pv2-text-muted, #999);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.nws .nws-card-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 11px 0 0;
	border-top: 1px solid var(--pv2-line, #2c2c2d);
	font-size: 11.5px;
	color: var(--pv2-text-dim, #666);
}
/* A LABEL WEARS THE TIER IT BELONGS TO. The date is state, the game is identity;
   the game therefore gets the brighter of the two and sits on the right where
   the eye lands last. Both are single-line with the full text on title. */
body.nws .nws-card-foot .nws-game {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--pv2-text-soft, #ccc);
	max-width: 55%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* the lead's foot prints the same identity beside the date, no auto push - the
   "Read the story" arrow owns the right edge there */
body.nws .nws-lead-foot .nws-game {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--pv2-text-soft, #ccc);
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   THE GAME'S ROUND MARK (Ryan, 2026-08-18: "next to the game name it needs the
   game's icon and a nice round image... for every single game, automatically").
   One component everywhere a game name renders on a news surface: card foot,
   lead foot, related-card foot, the offer rail. Resolved by slug from the games
   table; a missing icon file falls back to the title's first letter on the
   system's field ground - never a broken , never a glyph.
   ------------------------------------------------------------ */
body.nws .nws-gmark {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	object-fit: cover;
}
body.nws span.nws-gmark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pv2-field, #2d2d2e);
	border: 1px solid var(--pv2-border, #3a3a3b);
	color: var(--pv2-text-soft, #ccc);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
body.nws .nws-gmark.nws-gmark-lg { width: 48px; height: 48px; flex: 0 0 48px; }
body.nws span.nws-gmark.nws-gmark-lg { font-size: 20px; }

/* ------------------------------------------------------------
   PART 6 — THE PAGER. Real s, one spelling per page (page 1 is the
   clean URL and ?page=1 301s to it), and a position line that agrees with how
   the index actually paginates: it SWAPS, so the number is a true statement.
   ------------------------------------------------------------ */
body.nws .nws-pager {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 36px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--pv2-line, #2c2c2d);
}
body.nws .nws-shell .nws-pager .nws-pos {
	margin: 0 auto;
	font-size: 12px;
	color: var(--pv2-text-dim, #666);
	white-space: nowrap;
}
body.nws .nws-pbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--pv2-border-strong, #4c4c4d);
	border-radius: var(--pv2-radius, 4px);
	background: transparent;
	color: var(--pv2-text-soft, #ccc);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .4px;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
body.nws a.nws-pbtn:hover,
body.nws a.nws-pbtn:focus {
	border-color: var(--pv2-accent, #d5a84a);
	color: #fff;
	background: rgba(234, 168, 36, .10);
	text-decoration: none;
}

/* ------------------------------------------------------------
   PART 7 — THE ZERO STATE.

   Its own class, never `.pv2p-empty` with a second class beside it: those two
   are a specificity TIE and the winner differs between a staff session and an
   anonymous one. An empty section is an invitation, and it names somewhere real
   to go instead.
   ------------------------------------------------------------ */
body.nws .nws-empty {
	text-align: center;
	padding: 74px 24px 78px;
	background-color: var(--pv2p-deep, #131314);
	background-image: var(--pv2p-bloom), var(--pv2p-weave);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius-lg, 6px);
}
/* with band art on disk the zero state wears the SAME image under a heavy film,
   so the section speaks one identity whether it is empty or full */
body.nws .nws-empty.has-art {
	background-image:
		linear-gradient(0deg, rgba(19, 19, 20, .90), rgba(19, 19, 20, .74)),
		var(--nws-bandart);
	background-size: auto, cover;
	background-position: center, center;
}
body.nws .nws-empty strong {
	display: block;
	font-size: 19px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 10px;
}
body.nws .nws-empty .nws-empty-sub {
	max-width: 46ch;
	margin: 0 auto;
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--pv2-text-muted, #999);
}
body.nws .nws-empty .nws-empty-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 24px 0 0;
}

/* ------------------------------------------------------------
   PART 8 — THE ARTICLE.

   READER-GRADE TYPE. The panel's 14px/1.5 prose formula is tuned for staff
   scanning a ticket thread all day; this is a page somebody reads end to end, so
   it runs 16.5px on a 68ch measure at 1.75, in the classic near-white. That is a
   deliberate, documented divergence from the panel ramp — not drift.

   The column is centred with `margin: 0 auto` — no dead gutter, and no
   `max-width` line cap living inside a full-width card (rejected twice).
   ------------------------------------------------------------ */
/* `ch` RESOLVES AT USE, AGAINST THE FONT-SIZE OF THE ELEMENT USING IT - the same
   trap the core sheet hit when it pinned its band rail. `.nws-doc` inherits the
   shell's 14px, not the article's 16.5px, so a 68ch measure resolved to ~476px
   and the column rendered 552px wide inside a 1170px rail with dead gutters
   either side. The measure is stated in px against the size the body actually
   reads at: 68ch of Open Sans at 16.5px is ~708px, plus the card's 2x38px pad.

   THE LAYOUT ITSELF IS PART 8b BELOW. This is the single-column base every
   width inherits; the zones are added on top of it. */
body.nws .nws-doc {
	max-width: 784px;
	margin: 0 auto;
}
/* NO DROP SHADOW. A shadow is what made the column read as a card hovering over
   the page on its own margins (Ryan, 2026-08-18) — the pane is a reading ground
   now, sitting on the same grid as the band's headline and its neighbours, so it
   states itself with a fill and a hairline and nothing else. */
body.nws .nws-article {
	background: var(--pv2-panel, #212122);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius-lg, 6px);
	padding: 38px;
	min-width: 0;
}
/* an anchored heading must not land under the sticky chrome when a contents link
   jumps to it, and `scroll-margin-top` is the whole fix */
body.nws .nws-article .nws-body h2,
body.nws .nws-article .nws-body h3 { scroll-margin-top: 24px; }
body.nws .nws-article .nws-body {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--nws-ink);
}
body.nws .nws-article .nws-body > *:first-child { margin-top: 0; }
body.nws .nws-article .nws-body > *:last-child { margin-bottom: 0; }
body.nws .nws-article .nws-body p { margin: 0 0 1.15em; color: var(--nws-ink); line-height: 1.75; }
body.nws .nws-article .nws-body h2 {
	font-size: 22px; font-weight: 600; line-height: 1.3; color: #fff;
	margin: 1.9em 0 .6em;
}
body.nws .nws-article .nws-body h3 {
	font-size: 18px; font-weight: 600; line-height: 1.35; color: #fff;
	margin: 1.6em 0 .5em;
}
body.nws .nws-article .nws-body h4 {
	font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--pv2-text-soft, #ccc);
	letter-spacing: .4px; text-transform: uppercase; margin: 1.5em 0 .5em;
}
body.nws .nws-article .nws-body strong { color: #fff; font-weight: 600; }
body.nws .nws-article .nws-body em { font-style: italic; }
body.nws .nws-article .nws-body a {
	color: var(--pv2-accent, #d5a84a);
	text-decoration: none;
	border-bottom: 1px solid rgba(213, 168, 74, .35);
}
body.nws .nws-article .nws-body a:hover {
	color: var(--pv2-gold, #eaa824);
	border-bottom-color: var(--pv2-gold, #eaa824);
	text-decoration: none;
}
body.nws .nws-article .nws-body ul,
body.nws .nws-article .nws-body ol { margin: 0 0 1.15em; padding-left: 22px; }
body.nws .nws-article .nws-body li { margin: 0 0 .45em; line-height: 1.7; }
body.nws .nws-article .nws-body li::marker { color: var(--pv2-accent, #d5a84a); }
body.nws .nws-article .nws-body blockquote {
	margin: 1.6em 0;
	padding: 16px 20px;
	border: 0;
	border-left: 3px solid var(--pv2-accent, #d5a84a);
	border-radius: 0 var(--pv2-radius, 4px) var(--pv2-radius, 4px) 0;
	background: var(--pv2-raised, #252526);
	font-size: 16px;
	color: var(--pv2-text-soft, #ccc);
}
body.nws .nws-article .nws-body blockquote p:last-child { margin-bottom: 0; }
/* the classic sheets inject `"— "` around a  the sanitizer never wrote */
body.nws .nws-article .nws-body cite:before,
body.nws .nws-article .nws-body cite:after { content: none; }
body.nws .nws-article .nws-body cite {
	display: block; margin-top: 8px; font-size: 13px; font-style: normal;
	color: var(--pv2-text-dim, #666);
}
body.nws .nws-article .nws-body code {
	font-family: var(--pv2-mono, Consolas, monospace);
	font-size: 14px;
	padding: 2px 6px;
	border-radius: 3px;
	background: var(--pv2-field, #2d2d2e);
	color: var(--pv2-text-soft, #ccc);
}
body.nws .nws-article .nws-body pre {
	margin: 1.5em 0;
	padding: 16px 18px;
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius, 4px);
	background: var(--pv2p-deep, #131314);
	box-shadow: none;                 /* essentials.css puts a #ccc halo on  */
	color: var(--pv2-text-soft, #ccc);
	font-family: var(--pv2-mono, Consolas, monospace);
	font-size: 13.5px;
	line-height: 1.6;
	overflow-x: auto;
}
body.nws .nws-article .nws-body pre code { background: none; padding: 0; font-size: inherit; }
body.nws .nws-article .nws-body hr {
	margin: 2em 0; border: 0; border-top: 1px solid var(--pv2-line, #2c2c2d);
}

/* AN IMAGE IN THE BODY BREAKS THE CARD'S PADDING, which is what makes an
   article read like an article instead of a form. width:auto/height:auto keeps
   the intrinsic ratio the renderer measured off disk, so nothing shifts as the
   bytes land. */
body.nws .nws-article .nws-body img {
	display: block;
	width: auto;
	max-width: calc(100% + 76px);
	height: auto;
	margin: 1.7em -38px;
	border-top: 1px solid var(--pv2-line, #2c2c2d);
	border-bottom: 1px solid var(--pv2-line, #2c2c2d);
}
/* an image small enough not to need the bleed stays in the column and centres */
body.nws .nws-article .nws-body p > img {
	margin-left: auto; margin-right: auto; max-width: 100%;
	border: 1px solid var(--pv2-line, #2c2c2d);
	border-radius: var(--pv2-radius, 4px);
}
/* A FIGURE IS A PICTURE AND ITS CAPTION. The caption is read and the alt text is
   not, so it gets real type rather than a whisper — but it stays quieter than the
   prose it explains. The image inside keeps the full-bleed treatment; the caption
   comes back to the column so it is never orphaned out past the text. */
body.nws .nws-article .nws-body figure { margin: 1.7em 0; }
body.nws .nws-article .nws-body figure img { margin-top: 0; margin-bottom: 0; }
body.nws .nws-article .nws-body figcaption {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--pv2-text-muted, #999);
}
body.nws .nws-cm-body figure { margin: .7em 0; }
body.nws .nws-cm-body figcaption { margin: 6px 0 0; font-size: 12.5px; color: var(--pv2-text-dim, #666); }

body.nws .nws-article .nws-body table {
	width: 100%;
	margin: 1.5em 0;
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius, 4px);
	border-collapse: collapse;
	font-size: 14.5px;
}
body.nws .nws-article .nws-body th,
body.nws .nws-article .nws-body td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--pv2-line, #2c2c2d);
	text-align: left;
}
body.nws .nws-article .nws-body th { background: var(--pv2-surface, #1a1a1b); color: #fff; font-weight: 600; }
body.nws .nws-article .nws-body tr:last-child td { border-bottom: 0; }

/* the article's own meta strip, under the body */
body.nws .nws-article .nws-artfoot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 30px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--pv2-line, #2c2c2d);
	font-size: 12px;
	color: var(--pv2-text-dim, #666);
}
body.nws .nws-article .nws-artfoot .nws-artfoot-by { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
body.nws .nws-article .nws-artfoot .nws-author { color: #fff; font-weight: 600; }
body.nws .nws-article .nws-artfoot .nws-back {
	margin-left: auto;
	color: var(--pv2-accent, #d5a84a);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
body.nws .nws-article .nws-artfoot .nws-back:hover { color: var(--pv2-gold, #eaa824); text-decoration: none; }

/* ------------------------------------------------------------
   PART 8b — THE THREE ZONES.

   Ryan, 2026-08-18: "a tiny article with huge white space on both sides." The
   column was 784px centred in a 1560px rail, so a wide screen showed a small
   card and two dead gutters. The width is SPENT now rather than hidden:

     zone 1  the contents rail, built from the body's own H2s in PHP
     zone 2  the article, still at its reading measure — the measure is the
             point, so the fix is never "make the column wider"
     zone 3  the offer for this story's game, and that game's guides

   FOUR RULES THIS LAYOUT IS BUILT ON.

   1. ONE AXIS. The band's headline and the article column are placed on the
      SAME grid tracks (see PART 1's `min-width: 1600px` block), so the headline
      sits directly above the prose instead of 280px to its left.
   2. A ZONE THAT HAS NOTHING DOES NOT EXIST. `.nws-notoc` / `.nws-norail` drop
      the track outright — a reserved-but-empty column is the dead gutter this
      replaced, not a smaller version of it.
   3. THE TRACKS SHRINK, THE MEASURE DOES NOT GROW. The article track is
      `minmax(0, 860px)`: grid grows it toward 860 only with space it actually
      has, and the rail's `minmax(320px, 1fr)` takes whatever is left over at
      1920+. Nothing overflows at 1600 and nothing runs to 78ch at 2560.
   4. WHAT IS UNDER THE ARTICLE SPANS THE ARTICLE **AND** THE RAIL. A comment
      thread that snapped back to the article's own width would empty the whole
      right side of the page from the fold down.
   ------------------------------------------------------------ */

/* --- the single-column base. Every width starts here and the zones are added
       on top, so a narrow screen is this layout narrowed rather than a second
       one (the About-page rule). */
body.nws .nws-doc { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
body.nws .nws-toc   { grid-area: toc; }
body.nws .nws-article { grid-area: art; }
/* A STICKY BOX IS CONSTRAINED BY ITS CONTAINING BLOCK, AND FOR AN IN-FLOW GRID
   ITEM THAT IS THE GRID CONTAINER, NOT THE GRID AREA. Sticking `.nws-rail`
   itself let the offer card travel out of its own row and paint over the comment
   thread. `.nws-railslot` is the grid item — row-tall via align-self: stretch —
   and the card sticks inside it, which ends exactly where the article does. */
body.nws .nws-railslot { grid-area: rail; min-width: 0; }
body.nws .nws-below { grid-area: below; min-width: 0; }
body.nws .nws-doc { grid-template-areas: "toc" "art" "rail" "below"; }

/* --- TWO ZONES from 1180: the article keeps the container's own left edge, the
       rail takes the right. The contents list is still a chip row above the
       article at this width — 224px of rail plus 320px of aside plus a reading
       measure does not fit, and the article is the thing that may not shrink. */
@media (min-width: 1180px) {
	body.nws .nws-doc {
		max-width: none;
		grid-template-columns: minmax(0, 860px) minmax(300px, 1fr);
		grid-template-areas:
			"toc   toc"
			"art   rail"
			"below below";
		column-gap: 38px;
		row-gap: 34px;
		align-items: start;
	}
	body.nws .nws-doc.nws-norail {
		grid-template-columns: minmax(0, 860px);
		grid-template-areas: "toc" "art" "below";
		justify-content: center;
	}
	/* the slot takes the row's full height (the grid is align-items: start), and
	   the card sticks inside it — see the note on .nws-railslot above */
	body.nws .nws-railslot { align-self: stretch; }
	body.nws .nws-rail { position: sticky; top: 22px; }
}

/* --- THREE ZONES from 1600. The contents rail earns its column here and not a
       pixel earlier: below this the article would pay for it. */
@media (min-width: 1600px) {
	body.nws .nws-doc {
		grid-template-columns: 224px minmax(0, 860px) minmax(320px, 1fr);
		grid-template-areas:
			"toc art   rail"
			"toc below below";
		column-gap: 44px;
	}
	/* the contents rail spans BOTH rows so it stays with the reader through the
	   comments, and the column under the article is never empty */
	body.nws .nws-doc.nws-notoc {
		grid-template-columns: minmax(0, 860px) minmax(320px, 1fr);
		grid-template-areas:
			"art   rail"
			"below below";
	}
	body.nws .nws-doc.nws-norail {
		grid-template-columns: 224px minmax(0, 900px);
		grid-template-areas:
			"toc art"
			"toc below";
		justify-content: center;
	}
	body.nws .nws-doc.nws-notoc.nws-norail {
		grid-template-columns: minmax(0, 860px);
		grid-template-areas: "art" "below";
		justify-content: center;
	}
}

/* ------------------------------------------------------------
   PART 8c — THE CONTENTS RAIL.

   Two shapes from one markup: a sticky list in its own column at 1600+, and a
   compact wrapped run of chips above the article below that. It renders at all
   only when the story has two or more H2s — a one-entry contents list is not
   navigation, it is a label.
   ------------------------------------------------------------ */
body.nws .nws-toc { min-width: 0; }
body.nws .nws-toc-head {
	display: block;
	margin: 0 0 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pv2-text-dim, #666);
}
body.nws .nws-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body.nws .nws-toc-list li { margin: 0; }
body.nws .nws-toc-list a {
	display: inline-block;
	padding: 7px 13px;
	background: var(--pv2-panel, #212122);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: 999px;
	color: var(--pv2-text-soft, #ccc);
	font-size: 12.5px;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}
body.nws .nws-toc-list a:hover {
	border-color: var(--pv2-accent, #d5a84a);
	color: #fff;
	text-decoration: none;
}
@media (min-width: 1600px) {
	body.nws .nws-toc {
		position: sticky;
		top: 22px;
		padding-right: 4px;
		border-right: 1px solid var(--pv2-line, #2c2c2d);
	}
	body.nws .nws-toc-list { display: block; }
	body.nws .nws-toc-list li + li { margin-top: 2px; }
	body.nws .nws-toc-list a {
		display: block;
		padding: 5px 12px 5px 13px;
		background: none;
		border: 0;
		border-left: 2px solid transparent;
		border-radius: 0;
		font-size: 12.5px;
		line-height: 1.45;
		color: var(--pv2-text-muted, #999);
	}
	body.nws .nws-toc-list a:hover {
		border-left-color: var(--pv2-accent, #d5a84a);
		color: #fff;
	}
}

/* ------------------------------------------------------------
   PART 9 — WHERE THE POST SENDS THE READER NEXT.

   Each block renders nothing when it has nothing: the offer for the game this
   story is about, that game's evergreen wiki guides, and the two or three
   stories nearest this one. A news post links out to what it is about; it is
   not a link farm.

   THE OFFER IS ONE COMPONENT WITH TWO SHAPES. A sticky card in the rail on a
   desktop, the end-of-article band on anything narrower — same element, so a
   phone never gets a floating overlay (Google's interstitial rules) and the
   page never carries two money links.
   ------------------------------------------------------------ */
body.nws .nws-rail { min-width: 0; }
body.nws .nws-railsec + .nws-railsec,
body.nws .nws-buy + .nws-railsec { margin-top: 22px; }
body.nws .nws-railhead {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--pv2-text-dim, #666);
}

/* --- THE OFFER. The band shape is the base (it is what a phone gets); the card
       shape is the 1180+ override. */
body.nws .nws-buy {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
	padding: 18px 20px;
	background: var(--pv2-surface, #1a1a1b);
	background-image: var(--pv2p-bloom);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius-lg, 6px);
	text-decoration: none;
}
body.nws a.nws-buy:hover { border-color: var(--pv2-accent, #d5a84a); text-decoration: none; }
body.nws .nws-buy-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* the offer's identity wears the game's ROUND mark - same treatment as every
   other game name on a news surface */
body.nws .nws-buy-id img {
	width: 48px; height: 48px; flex: 0 0 48px;
	border-radius: 50%;
	object-fit: cover;
}
body.nws .nws-buy-name { min-width: 0; }
body.nws .nws-buy-name b { display: block; font-size: 15.5px; font-weight: 600; color: #fff; line-height: 1.25; }
body.nws .nws-buy-name > span {
	display: block; margin-top: 2px;
	font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--pv2-text-dim, #666);
}
body.nws .nws-buy-line {
	flex: 1 1 240px;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--pv2-text-muted, #999);
}
/* THE BUTTON IS A SPAN INSIDE THE CARD'S OWN ANCHOR, so it never needs to beat
   `body.pubv2 .pv2p a` — the colour lives on an element the public sheet has no
   rule for at all, which is the cheaper half of the CTA band's lesson. */
body.nws .nws-buy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 40px;
	padding: 0 20px;
	background: var(--pv2-gold, #eaa824);
	border-radius: var(--pv2-radius, 4px);
	color: #1a1a1b;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .6px;
	white-space: nowrap;
}
body.nws a.nws-buy:hover .nws-buy-btn { background: var(--pv2-gold-hover, #db9b15); }

@media (min-width: 1180px) {
	/* the card shape: a column, and the button owns its own line at full width */
	body.nws .nws-buy {
		display: block;
		padding: 20px;
	}
	body.nws .nws-buy-line { display: block; margin: 14px 0 0; font-size: 13px; }
	body.nws .nws-buy-btn { display: flex; width: 100%; margin-top: 16px; }
}

body.nws .nws-nodes { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1180px) {
	/* in the rail the guides are a stack, not a wrapped chip run — a chip row
	   inside a 320px column wraps every title onto its own line anyway, and a
	   stack says "list" instead of looking like a broken row */
	body.nws .nws-rail .nws-nodes { display: block; }
	body.nws .nws-rail .nws-node { display: flex; width: 100%; }
	body.nws .nws-rail .nws-node + .nws-node { margin-top: 8px; }
	body.nws .nws-rail .nws-node span:first-child { flex: 1 1 0; min-width: 0; }
	body.nws .nws-rail .nws-node .nws-arrow { margin-left: 10px; }
}
body.nws .nws-node {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	background: var(--pv2-panel, #212122);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius-lg, 6px);
	color: var(--pv2-text-soft, #ccc);
	font-size: 13.5px;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}
body.nws a.nws-node:hover { border-color: var(--pv2-accent, #d5a84a); color: #fff; text-decoration: none; }
body.nws .nws-node .nws-arrow { color: var(--pv2-accent, #d5a84a); font-size: 14px; }
body.nws .nws-more {
	display: inline-block;
	margin: 16px 0 0;
	color: var(--pv2-accent, #d5a84a);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
body.nws .nws-more:hover { color: var(--pv2-gold, #eaa824); text-decoration: none; }

/* ------------------------------------------------------------
   PART 10 — RESPONSIVE.

   THE PHONE GETS THE SAME LAYOUT NARROWED, not a different one. Nothing
   reflows sides, nothing un-alternates, and no rule exists only below 700px.
   390px must have zero horizontal page overflow.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
	body.nws .nws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.nws .nws-band h1 { font-size: 30px; }
	body.nws .nws-lead h2 { font-size: 26px; }
}
@media (max-width: 900px) {
	body.nws .nws-lead { grid-template-columns: minmax(0, 1fr); }
	/* the photograph leads on a narrow screen: a hero stranded under the text
	   reads as an afterthought (the About-page timeline lesson) */
	body.nws .nws-lead-art { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
	body.nws .nws-lead-txt { padding: 24px 22px 22px; }
	body.nws .nws-bandtxt { max-width: 100%; }
	body.nws .nws-band.has-art {
		background-image:
			linear-gradient(0deg, var(--pv2p-deep, #131314) 12%, rgba(19, 19, 20, .88) 46%, rgba(19, 19, 20, .55) 100%),
			var(--nws-bandart);
		background-size: auto, cover;
		background-position: center, center;
	}
}
@media (max-width: 760px) {
	body.nws .nws-grid,
	body.nws .nws-grid.n-2 { grid-template-columns: minmax(0, 1fr); }
	body.nws .nws-band { padding: 30px 0 26px; }
	body.nws .nws-band h1 { font-size: 26px; }
	body.nws .nws-shell { padding: 30px 0 48px; }
	body.nws .nws-article { padding: 24px 20px; }
	body.nws .nws-article .nws-body { font-size: 16px; line-height: 1.72; }
	body.nws .nws-article .nws-body img { margin-left: -20px; margin-right: -20px; max-width: calc(100% + 40px); }
	body.nws .nws-article .nws-body h2 { font-size: 20px; }
	body.nws .nws-article .nws-body h3 { font-size: 17px; }
	body.nws .nws-lead h2 { font-size: 23px; }
	body.nws .nws-lead .nws-lead-dek { font-size: 14px; }
	/* touch targets: the pager cells are the only controls on the index */
	body.nws .nws-pbtn { height: 44px; padding: 0 16px; }
	body.nws .nws-pager { flex-wrap: wrap; gap: 10px; }
	body.nws .nws-shell .nws-pager .nws-pos { order: 3; width: 100%; text-align: center; margin: 4px 0 0; }
	body.nws .nws-empty { padding: 52px 18px 56px; }
	/* the offer's band shape on a phone: identity on line 1, the line under it,
	   and the button owning a full-width 44px row of its own */
	body.nws .nws-buy { padding: 16px; gap: 12px; }
	body.nws .nws-buy-id { flex: 1 1 100%; }
	body.nws .nws-buy-line { flex: 1 1 100%; }
	body.nws .nws-buy-btn { width: 100%; height: 44px; }
	body.nws .nws-toc-list a { padding: 9px 14px; }
}
@media (max-width: 480px) {
	body.nws .nws-band h1 { font-size: 23px; }
	body.nws .nws-bandtxt .nws-sub { font-size: 14px; }
	body.nws .nws-lead-foot .nws-go { margin-left: 0; width: 100%; }
	body.nws .nws-card-foot .nws-game { max-width: 50%; }
}

/* prefers-reduced-motion: the art scale is decoration, not information */
@media (prefers-reduced-motion: reduce) {
	body.nws .nws-lead-art img,
	body.nws .nws-card-art img { transition: none; }
	body.nws a.nws-lead:hover .nws-lead-art img,
	body.nws a.nws-card:hover .nws-card-art img { transform: none; }
}

/* ------------------------------------------------------------
   PART 11 — COMMENTS.

   The DATA is the community's — same rows, same shaper, same vote maths — but
   the MARKUP and this skin are news-native, because every rule in
   community-thread.css is scoped `body.comm .comm-thread`. Reusing the forum
   partial would have meant writing `comm` on a news  and pulling the whole
   forum skin (bands, cards, avatars, listing rows) onto a page that already
   defines all four. One system, two skins.

   The thread reads as part of the article, not as a bolted-on widget: same
   panel ground, same rails, same type ramp.
   ------------------------------------------------------------ */
body.nws .nws-comments { margin-top: 44px; }

/* ---- the composer */
body.nws .nws-cmform {
	margin: 0 0 26px;
	padding: 16px 18px;
	background: var(--pv2-panel, #212122);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius-lg, 6px);
}
body.nws .nws-cmform textarea {
	display: block;
	width: 100%;
	min-height: 84px;
	padding: 11px 13px;
	background: var(--pv2-field, #2d2d2e);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius, 4px);
	color: var(--nws-ink);
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 14.5px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color .12s ease;
}
body.nws .nws-cmform textarea:focus {
	outline: none;
	border-color: var(--pv2-accent, #d5a84a);
}
body.nws .nws-cmform textarea::placeholder { color: var(--pv2-text-dim, #666); }
body.nws .nws-cmform-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 11px 0 0;
}
body.nws .nws-cmform-note { font-size: 12.5px; color: var(--pv2-text-muted, #999); min-width: 0; }
body.nws .nws-cmform-note.is-error { color: var(--pv2-warn, #f0ad4e); }
/* one explicit height on the control and the button, never padding math */
body.nws .nws-cmform-send {
	margin-left: auto;
	height: 36px;
	padding: 0 20px;
	border: 1px solid var(--pv2-gold, #eaa824);
	border-radius: var(--pv2-radius, 4px);
	background: var(--pv2-gold, #eaa824);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	cursor: pointer;
	transition: background-color .14s ease;
}
body.nws .nws-cmform-send:hover { background: var(--pv2-gold-deep, #db9b15); border-color: var(--pv2-gold-deep, #db9b15); }
body.nws .nws-cmform-send[disabled] { opacity: .55; cursor: default; }
/* `hidden` IS display:none AT (0,0,1) AND ANY LAYOUT DECLARATION BEATS IT — the
   reply bar shipped visible at rest, reading as "Replying to  Cancel" above an
   empty box, because this rule's own display won. */
body.nws .nws-cmform-reply[hidden] { display: none; }
body.nws .nws-cmform-reply {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--pv2-text-muted, #999);
}
body.nws .nws-cmform-reply strong { color: #fff; font-weight: 600; }
body.nws .nws-cmform-cancel {
	border: 0; background: none; padding: 0;
	color: var(--pv2-accent, #d5a84a); font-size: 12.5px; cursor: pointer;
}
/* THE COMPOSER INSIDE A COMMENT (reply targeting moved it there). Full width of
   the comment's main column, a little air above the action row it follows, and
   none of the 26px bottom margin the top-of-thread position carries. */
body.nws .nws-cm-main .nws-cmform { margin: 12px 0 0; }
body.nws .nws-comments .nws-cmform-signin {
	margin: 0 0 26px;
	padding: 16px 18px;
	background: var(--pv2-panel, #212122);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius-lg, 6px);
	font-size: 13.5px;
	color: var(--pv2-text-muted, #999);
}
body.nws .nws-comments .nws-cmform-signin a { color: var(--pv2-accent, #d5a84a); text-decoration: none; }
body.nws .nws-comments .nws-cmform-signin a:hover { color: var(--pv2-gold, #eaa824); }
body.nws .nws-comments .nws-cmempty {
	margin: 0; padding: 26px 4px; font-size: 13.5px; color: var(--pv2-text-muted, #999);
}

/* ---- one comment

   `flex-wrap: wrap` AND a full-basis kids box are both load-bearing. `.nws-cm`
   is a flex row of [vote gutter | body], and the children box is its THIRD
   child - so without these it becomes a third COLUMN and every nested reply
   renders beside its parent instead of under it. Measured on the first
   end-to-end run: a two-comment thread rendered as two columns. */
body.nws .nws-cm { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 0; }
body.nws .nws-cm + .nws-cm { border-top: 1px solid var(--pv2-line, #2c2c2d); }
body.nws .nws-cm.is-held { opacity: .82; }
body.nws .nws-cm-main { flex: 1 1 0; min-width: 0; }

/* THE VOTE GUTTER. Triangles are drawn with borders, never a font: `fa-caret-up`
   has no rule in the public fa-subset and a missing codepoint paints tofu. */
body.nws .nws-cm-vote {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex: 0 0 28px;
	padding-top: 2px;
}
body.nws .nws-vbtn {
	width: 24px; height: 20px;
	border: 0; padding: 0; background: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border-radius: 3px;
}
body.nws .nws-vbtn:before {
	content: ''; display: block;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	transition: border-color .12s ease;
}
body.nws .nws-vbtn.up:before    { border-bottom: 7px solid var(--pv2-text-dim, #666); }
body.nws .nws-vbtn.down:before  { border-top: 7px solid var(--pv2-text-dim, #666); }
body.nws .nws-vbtn:hover:before { border-bottom-color: var(--pv2-text-soft, #ccc); border-top-color: var(--pv2-text-soft, #ccc); }
body.nws .nws-vbtn.up.is-on:before   { border-bottom-color: var(--pv2-gold, #eaa824); }
body.nws .nws-vbtn.down.is-on:before { border-top-color: var(--pv2-info, #5bc0de); }
body.nws .nws-vbtn[disabled] { cursor: default; opacity: .5; }
body.nws .nws-cm-score { font-size: 12.5px; font-weight: 700; color: var(--pv2-text-muted, #999); line-height: 1; }
body.nws .nws-cm-score.pos { color: var(--pv2-gold, #eaa824); }
body.nws .nws-cm-score.neg { color: var(--pv2-info, #5bc0de); }

/* ---- the byline: A FACE BELONGS ON THE NAME'S LINE, not in a column beside it */
body.nws .nws-cm-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0 0 7px;
	font-size: 12px;
	color: var(--pv2-text-dim, #666);
}
body.nws .nws-av {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; flex: 0 0 26px;
	border-radius: 50%;
	background: var(--pv2-field, #2d2d2e);
	color: var(--pv2-text-soft, #ccc);
	font-size: 11px; font-weight: 700; overflow: hidden;
}
body.nws .nws-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body.nws .nws-av.is-staff { box-shadow: 0 0 0 2px rgba(234, 168, 36, .55); }
body.nws .nws-cm-author { color: #fff; font-size: 13px; font-weight: 600; }
body.nws .nws-cm-tag {
	display: inline-flex; align-items: center; height: 17px; padding: 0 6px;
	border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
body.nws .nws-cm-tag.staff { background: rgba(234, 168, 36, .14); color: var(--pv2-gold, #eaa824); }
body.nws .nws-cm-tag.held  { background: rgba(240, 173, 78, .14); color: var(--pv2-warn, #f0ad4e); }
body.nws .nws-cm-when { color: var(--pv2-text-dim, #666); text-decoration: none; }
body.nws .nws-cm-when:hover { color: var(--pv2-accent, #d5a84a); text-decoration: none; }
body.nws .nws-cm-edited { font-style: italic; }
body.nws .nws-cm-replyto { color: var(--pv2-text-dim, #666); text-decoration: none; }
body.nws .nws-cm-replyto:hover { color: var(--pv2-accent, #d5a84a); }

/* ---- the body. The sanitizer's allowlist rendered raw, so the classic sheets
   reach it at (0,0,1) — the same resets the article body needs, at comment size. */
body.nws .nws-cm-body { font-size: 14.5px; line-height: 1.62; color: var(--pv2-text-soft, #ccc); }
body.nws .nws-cm-body p { margin: 0 0 .7em; color: inherit; line-height: inherit; }
body.nws .nws-cm-body > *:last-child { margin-bottom: 0; }
body.nws .nws-cm-body a { color: var(--pv2-accent, #d5a84a); text-decoration: none; }
body.nws .nws-cm-body a:hover { color: var(--pv2-gold, #eaa824); text-decoration: underline; }
body.nws .nws-cm-body img { max-width: 100%; height: auto; border-radius: var(--pv2-radius, 4px); }
body.nws .nws-cm-body ul,
body.nws .nws-cm-body ol { margin: 0 0 .7em; padding-left: 20px; }
body.nws .nws-cm-body blockquote {
	margin: .7em 0; padding: 8px 12px; border: 0;
	border-left: 3px solid var(--pv2-border-strong, #4c4c4d);
	background: var(--pv2-raised, #252526); color: var(--pv2-text-muted, #999);
}
body.nws .nws-cm-body pre {
	background: var(--pv2p-deep, #131314); border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius, 4px); padding: 10px 12px; box-shadow: none;
	font-family: var(--pv2-mono, Consolas, monospace); font-size: 12.5px; overflow-x: auto;
}
body.nws .nws-cm-body code {
	background: var(--pv2-field, #2d2d2e); border-radius: 3px; padding: 1px 5px;
	font-family: var(--pv2-mono, Consolas, monospace); font-size: 12.5px;
}
body.nws .nws-cm-body cite:before,
body.nws .nws-cm-body cite:after { content: none; }

body.nws .nws-cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 0; }
body.nws .nws-cm-act {
	border: 0; background: none; padding: 0;
	color: var(--pv2-text-dim, #666); font-size: 12px; font-weight: 600;
	text-decoration: none; cursor: pointer;
}
body.nws .nws-cm-act:hover { color: var(--pv2-accent, #d5a84a); text-decoration: none; }
/* an answered control: "Reported" stays put, quiet, and does not invite a click */
body.nws .nws-cm-act.is-done { color: var(--pv2-text-dim, #666); opacity: .7; cursor: default; }
body.nws .nws-cm-act.is-done:hover { color: var(--pv2-text-dim, #666); }

/* ---- the staff moderation controls. A thin rule separates the reader's
   controls from the moderator's, and Delete carries the warn tint because it is
   the one that cannot be walked back inline. */
body.nws .nws-cm-modsep { width: 1px; height: 12px; background: var(--pv2-border, #3a3a3b); }
body.nws .nws-cm-mod { color: var(--pv2-text-dim, #666); }
body.nws .nws-cm-mod:hover { color: var(--pv2-warn, #f0ad4e); }
body.nws .nws-cm-mod.danger:hover { color: var(--pv2-danger, #d9534f); }

/* a hidden comment, as staff see it: present, dimmed, and labelled */
body.nws .nws-cm.is-hidden > .nws-cm-main { opacity: .6; }
body.nws .nws-cm-tag.hidden { background: rgba(217, 83, 79, .16); color: var(--pv2-danger, #d9534f); }

/* ---- the inline panels (report, edit): the composer's own materials at
   comment scale, opened under the comment they belong to and never a page
   change. */
body.nws .nws-cm-inline {
	margin: 10px 0 0;
	padding: 12px 14px;
	background: var(--pv2-panel, #212122);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius, 4px);
}
body.nws .nws-cm-inline-head {
	display: block;
	margin: 0 0 9px;
	color: #fff; font-size: 12.5px; font-weight: 600;
}
body.nws .nws-cm-inline textarea {
	display: block; width: 100%;
	padding: 9px 11px;
	background: var(--pv2-field, #2d2d2e);
	border: 1px solid var(--pv2-border, #3a3a3b);
	border-radius: var(--pv2-radius, 4px);
	color: var(--nws-ink);
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 13.5px; line-height: 1.55;
	resize: vertical;
}
body.nws .nws-cm-inline textarea:focus { outline: none; border-color: var(--pv2-accent, #d5a84a); }
body.nws .nws-cm-reasons { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 9px; }
body.nws .nws-cm-reason {
	display: inline-flex; align-items: center; gap: 7px;
	margin: 0; color: var(--pv2-text-soft, #ccc); font-size: 12.5px; font-weight: 400; cursor: pointer;
}
body.nws .nws-cm-reason input { margin: 0; accent-color: var(--pv2-gold, #eaa824); }
body.nws .nws-cm-inline-foot { display: flex; align-items: center; gap: 12px; margin: 9px 0 0; }
body.nws .nws-cm-inline-foot .nws-cmform-send { margin-left: 0; height: 32px; padding: 0 16px; font-size: 12.5px; }
body.nws .nws-cm-inline-cancel {
	border: 0; background: none; padding: 0;
	color: var(--pv2-text-dim, #666); font-size: 12px; font-weight: 600; cursor: pointer;
}
body.nws .nws-cm-inline-cancel:hover { color: var(--pv2-text-soft, #ccc); }
body.nws .nws-cm-inline-note { font-size: 12px; color: var(--pv2-text-muted, #999); min-width: 0; }
body.nws .nws-cm-inline-note.is-error { color: var(--pv2-warn, #f0ad4e); }

/* ---- nesting. An indent rail, and it stops indenting before it runs out of
   width: the shaper flattens past its own depth ceiling and says "replying to X"
   in words instead, so the rail never has to be narrower than a readable line. */
body.nws .nws-cm-kids {
	flex: 0 0 100%;
	width: 100%;
	margin: 10px 0 0 40px;
	padding-left: 16px;
	border-left: 2px solid var(--pv2-line, #2c2c2d);
}
body.nws .nws-cm-kids .nws-cm { padding: 12px 0; }
body.nws .nws-cm-kids .nws-cm:first-child { padding-top: 4px; }
body.nws .nws-cm.is-collapsed > .nws-cm-main > .nws-cm-body,
body.nws .nws-cm.is-collapsed > .nws-cm-main > .nws-cm-actions { display: none; }

@media (max-width: 760px) {
	body.nws .nws-cm-kids { margin-left: 12px; padding-left: 10px; }
	body.nws .nws-cmform { padding: 13px 13px; }
	/* touch floor on every control in the thread */
	body.nws .nws-vbtn { width: 30px; height: 26px; }
	body.nws .nws-cmform-send { height: 44px; }
}