/* ===========================================================================
 * Gamereactor Refresh — child theme layer.
 *
 * Loads LAST (handle gr-child, priority 999), so it wins over the harvested
 * stylesheets without touching them. Values here are lifted verbatim from the
 * Claude Design canvas "Gamereactor Homepage" (Figma-led), not eyeballed.
 *
 * Conventions:
 *   - Logical properties throughout (margin-inline, inset-inline). The .me
 *     site loads frontendArab.css on every page, so physical left/right
 *     would break RTL today, not hypothetically.
 *   - No !important unless overriding a harvested float/width rule. Where it
 *     appears, the comment says which rule it is fighting.
 *   - Tokens are namespaced --grc-* (grc = gamereactor child). refresh.css
 *     already owns --gr-max / --gr-thin / --gr-gap on :root and reads them in
 *     .main and .colwide, so reusing that prefix silently retunes the layer we
 *     are replacing.
 *   - Breakpoints reuse the harvested set (1020 / 767 / 391) plus the two the
 *     design introduces (1100 nav→burger, 820 footer columns).
 * ======================================================================== */

/* --- Outfit ---------------------------------------------------------------
 * Self-hosted, matching the theme's own decision to serve fonts locally
 * rather than from a CDN (see inc/setup.php on maxcdn). One variable file per
 * unicode-range covers weights 300–800, so this is two requests, not twelve.
 */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/outfit-latin.woff2') 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: 'Outfit';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/outfit-latin-ext.woff2') 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-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* --- Plus Jakarta Sans --------------------------------------------------
 * The components set card titles in Plus Jakarta Sans 600, not Outfit —
 * ArticleCard3 and Popular are both explicit about it, and the original
 * homepage bundle loaded both faces for exactly this reason. Self-hosted on
 * the same terms as Outfit; one variable file per unicode-range.
 */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/jakarta-latin.woff2') 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: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/jakarta-latin-ext.woff2') 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-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------
 * Named after their role, not their colour, so a later palette change is one
 * edit here. Hex equivalents of the design's rgb() values are noted for
 * cross-referencing against Figma.
 */
:root {
	/* Surfaces.
	 *
	 * SOURCE NOTE: three sources in the V2 set disagree on colour.
	 *   1. fig/fig-tokens.css — the raw Figma variable dump (395 tokens, with
	 *      light/dark duplicates, and internally inconsistent).
	 *   2. fig/*.jsx — the actual components the artboards render.
	 *   3. "Gamereactor Design System.dc.html" — a curated table naming Ink
	 *      #0E0E0E and Blue #0B76EF.
	 *
	 * (3) matches neither (1) nor (2): every component resolves Ink to
	 * --primitive-black-900 / --grey-900 = rgb(24,23,21), and the brand blue to
	 * --blue-500 = rgb(25,118,210). The components are what the artboards draw
	 * and what has been reviewed, so they win. If the curated table is the
	 * newer intent, these five values are the only place to change.
	 */
	--grc-ink:            #181715; /* --grey-900 / --primitive-black-900 */
	--grc-ink-2:          #1e1d1b; /* the artboards' stripe partner */
	--grc-footer-bg:      #111111; /* GR Footer.dc.html */
	--grc-page:           #f3f3f3; /* --primitive-grey-100 */
	--grc-surface:        #ffffff;

	/* Lines */
	--grc-border:         #eeeeee; /* rgb(238,238,238) card outlines */
	--grc-border-strong:  #dddddd; /* rgb(221,221,221) platform tag outlines */
	--grc-rule-dark:      #333333; /* rgb(51,51,51)    footer divider */

	/* Text */
	--grc-text:           #444444; /* rgb(68,68,68)    body copy */
	--grc-text-muted:     #666666; /* rgb(102,102,102) platform tags, meta */
	--grc-text-on-dark:   #abb0b2; /* rgb(171,176,178) excerpt on dark hero */
	--grc-text-footer:    #dddddd; /* rgb(221,221,221) footer links */
	--grc-text-faint:     #888888; /* rgb(136,136,136) copyright, lang codes */

	/* Accents. Two blues with distinct roles, as the token file separates them:
	 *   --text-link       = --blue-600 = rgb(0,136,204)   prose and inline links
	 *   --background-brand = --blue-500 = rgb(25,118,210)  tags, rules, bylines
	 */
	--grc-link:           #0088cc; /* --blue-600  inline links */
	--grc-link-hover:     #009ece; /* --blue-400  the artboards' a:hover */
	--grc-accent:         #1976d2; /* --blue-500  tags, section rules, bylines */
	--grc-accent-tint:    #e8f1fb; /* --primitive-blue-50  active states */
	--grc-badge:          #dc3545; /* --red-500 */
	--grc-magenta:        #ec1d8c; /* --magenta-500  commercial CTA */
	--grc-magenta-light:  #ff2f9b; /* --magenta-400  CTA hover */
	--grc-grey-band:      #6f6b66; /* --primitive-grey-600  trust header */
	/* The five score bands. Declared once here because three components read
	   them now — the round chip, the verdict panel's rating pill and the list
	   row's badge — and a colour that drifts between them is a bug nobody
	   spots until two numbers on one page disagree. */
	--grc-s10: rgb(42, 239, 87);
	--grc-s9:  rgb(70, 213, 103);
	--grc-s7:  rgb(255, 193, 7);
	--grc-s5:  rgb(255, 114, 7);
	--grc-s3:  rgb(237, 86, 101);

	--grc-score-high:     #28a745; /* --green-500 */
	--grc-score-mid:      #ffc107; /* --amber-500 */
	--grc-score-low:      #dc3545; /* --red-500 */

	/* Type. Three roles, as the components divide them:
	 *   title  Plus Jakarta Sans 600  — card and list titles
	 *   ui     Outfit                 — headings, nav, section titles
	 *   body   Arial                  — prose, tags, bylines, buttons
	 */
	/*
	 * SCRIPT FALLBACKS — why these stacks are long.
	 *
	 * assets/css/child.css self-hosts exactly two subsets of Outfit and
	 * Plus Jakarta Sans: `latin` and `latin-ext`. Six of the 23 sites write
	 * in scripts neither subset contains, and a font with no glyph for a
	 * character does not fail — the browser walks the stack. So the stack
	 * is where the fix belongs, not in a per-locale conditional:
	 *
	 *   .cn  Han          -> Noto Sans SC / PingFang SC / Microsoft YaHei
	 *   .jp  Kana/Kanji   -> Noto Sans JP / Hiragino Sans / Yu Gothic
	 *   .kr  Hangul       -> Noto Sans KR / Apple SD Gothic Neo / Malgun
	 *   .gr  Greek        -> Noto Sans / system-ui (Arial covers Greek too)
	 *   .me  Arabic       -> Noto Sans Arabic / Geeza Pro / Tahoma
	 *   .vn  Vietnamese   -> Noto Sans / system-ui  (U+1EA0-1EF9 is its own
	 *                        Google subset and is NOT inside latin-ext, so
	 *                        every ế and ộ was already falling through to
	 *                        an unspecified default mid-word)
	 *
	 * Latin text is unaffected: Outfit still matches first for every
	 * character it has. This only changes what happens where it has none,
	 * which today is an arbitrary browser default.
	 */
	--grc-font-title: 'Plus Jakarta Sans', 'Outfit', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Arabic', 'PingFang SC', 'Hiragino Sans', 'Apple SD Gothic Neo', 'Microsoft YaHei', 'Malgun Gothic', 'Geeza Pro', Arial, Helvetica, sans-serif;
	--grc-font-ui:    'Outfit', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Arabic', 'PingFang SC', 'Hiragino Sans', 'Apple SD Gothic Neo', 'Microsoft YaHei', 'Malgun Gothic', 'Geeza Pro', Arial, Helvetica, sans-serif;
	--grc-font-body:  Arial, 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Arabic', 'PingFang SC', 'Hiragino Sans', 'Apple SD Gothic Neo', 'Microsoft YaHei', 'Malgun Gothic', 'Geeza Pro', Helvetica, sans-serif;

	/* Layout — the design's container is 1300 + 16 either side (content-box) */
	--grc-max:     1300px;
	--grc-pad:       16px;
	--grc-rail:     332px;
	--grc-gap:       12px;
	--grc-gap-lg:    32px;
}

/* --- Header --------------------------------------------------------------
 * Design: 60px dark bar (#181715) with a 2px #222 rule beneath, the 1300px
 * container inside it, burger + wordmark + nav on the start side, language
 * and search on the end side.
 *
 * The markup drops the parent's #mainHeaderSection wrapper and uses .grh-*
 * classes instead, so none of the harvested header rules (or refresh.css's
 * single-row flex rules) apply to it. That also means this block owns the
 * header outright — nothing underneath is fighting it.
 *
 * Dropdowns are <details>, so they work without new JS. The burger panel
 * (dialog#nav-content) is still styled by refresh.css and is restyled in the
 * same pass that dequeues it.
 */
#mainheader.grh {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	/* Sticky on #mainheader rather than .grh-bar: sticky travels only within
	 * its containing block, and .grh-bar's parent is only as tall as the bar
	 * itself, so it would have nowhere to stick to. #mainheader's parent is
	 * body, giving it the whole page. Sticky also keeps its space in flow, so
	 * nothing jumps when it hides.
	 *
	 * z-index above #main (8) and the parent's own #mainheader rule (9), so the
	 * dropdown panels are not painted over by page content. */
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	transition: transform 0.28s ease;
	will-change: transform;
}
/* Toggled by assets/js/child.js on scroll direction. */
#mainheader.grh.is-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
	#mainheader.grh { transition: none; }
}

.grh-bar {
	background: var(--grc-ink);
	border-block-end: 2px solid #222222;
	position: relative;
	z-index: 40;
}

.grh-wrap {
	max-width: var(--grc-max);
	margin-inline: auto;
	padding-inline: var(--grc-pad);
	box-sizing: content-box;
	height: 60px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

/* Burger: hidden on desktop, shown below the nav breakpoint. */
.grh-burger {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	flex-shrink: 0;
	color: var(--grc-surface);
	cursor: pointer;
}
.grh-burger svg { inline-size: 18px; block-size: auto; fill: currentColor; }

.grh-logo { display: flex; align-items: center; flex-shrink: 0; }
.grh-logo img { inline-size: 172px; block-size: 19px; display: block; }

/* --- Nav ---------------------------------------------------------------- */
.grh-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	flex-grow: 1;
	min-width: 0;
	/* The canvas has overflow:hidden here. It cannot be copied: the overflow
	 * container clips absolutely positioned descendants, and the dropdown is
	 * one — it rendered correctly but was invisible outside the 60px bar.
	 * Overflow is instead bounded by capping the bar at eight items plus the
	 * overflow menu (see grc_header_nav), not by clipping. */
	overflow: visible;
	flex-wrap: nowrap;
}

.grh-item,
.grh-has-sub > summary {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	color: var(--grc-surface);
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 15px;
	line-height: 14px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	/* Padding gives the hover highlight a shape; the matching negative margin
	 * cancels it out of the layout, so the row keeps the design's 20px rhythm
	 * and eight items take exactly as much width as before. */
	padding: 7px 9px;
	margin: -7px -9px;
	border-radius: 2px;
	transition: background 0.13s;
}

/* Highlight rather than fade. Dimming the label read as "disabled" — and left
 * "More" looking greyed out while its panel was open. This matches the hover
 * in the dropdown and language panels: the surface reacts, the text does not. */
.grh-item:hover,
.grh-item:focus-visible,
.grh-has-sub > summary:hover,
.grh-has-sub > summary:focus-visible,
.grh-has-sub[open] > summary {
	background: rgba(255, 255, 255, 0.11);
	color: var(--grc-surface);
	text-decoration: none;
	opacity: 1;
}

.grh-badge {
	background: var(--grc-badge);
	border-radius: 14px 14px 14px 7px;
	padding: 1px 4px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 10px;
	line-height: 14px;
	color: var(--grc-surface);
	flex-shrink: 0;
}

.grh-caret { color: currentColor; flex-shrink: 0; transition: transform 0.18s; }

/* <details> dropdown. list-style:none on both rules — WebKit needs the
   ::-webkit-details-marker form, Firefox and Chromium honour the first. */
.grh-has-sub { position: relative; }
.grh-has-sub > summary { list-style: none; }
.grh-has-sub > summary::-webkit-details-marker { display: none; }
.grh-has-sub[open] > summary .grh-caret { transform: rotate(180deg); }

.grh-sub {
	position: absolute;
	inset-block-start: calc(100% + 14px);
	inset-inline-start: 0;
	z-index: 60;
	min-inline-size: 200px;
	max-block-size: 60vh;
	overflow-y: auto;
	background: var(--grc-surface);
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
	padding: 6px;
	display: flex;
	flex-direction: column;
}
.grh-sub a {
	display: block;
	padding: 7px 10px;
	border-radius: 2px;
	color: #1a1a1a;
	font-family: var(--grc-font-ui);
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	white-space: nowrap;
}
.grh-sub a:hover,
.grh-sub a:focus-visible { background: #f4f4f4; color: #000; text-decoration: none; }
.grh-sub .grh-sub-all {
	font-weight: 700;
	border-block-end: 1px solid var(--grc-border);
	border-radius: 0;
	margin-block-end: 4px;
}

/* --- Right cluster ------------------------------------------------------- */
.grh-right {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
	margin-inline-start: auto;
}

.grh-search {
	display: flex;
	align-items: center;
	color: var(--grc-surface);
	text-decoration: none;
}
.grh-search {
	padding: 7px;
	margin: -7px;
	border-radius: 2px;
	transition: background 0.13s;
}
.grh-search:hover,
.grh-search:focus-visible {
	background: rgba(255, 255, 255, 0.11);
	color: var(--grc-surface);
	opacity: 1;
}

/* Language picker. The class names are fixed by app.js, and refresh.css
   styles them as a white pill — overridden here to the design's bare
   globe + name on the dark bar. */
.grh-right .gr-langpick { position: relative; }
.grh-right .gr-langbtn {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--grc-surface);
	font-family: var(--grc-font-ui);
	font-weight: 400;
	font-size: 14px;
	line-height: 14px;
	cursor: pointer;
	padding: 7px 9px;
	margin: -7px -9px;
	border-radius: 2px;
	transition: background 0.13s;
}
.grh-right .gr-langbtn:hover,
.grh-right .gr-langbtn:focus-visible,
.grh-right .gr-langbtn[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.11);
	border: 0;
	box-shadow: none;
	opacity: 1;
}
.grh-globe { color: #dddddd; flex-shrink: 0; }

.grh-right .gr-langmenu {
	position: absolute;
	inset-block-start: calc(100% + 14px);
	inset-inline-end: 0;
	inset-inline-start: auto;
	z-index: 60;
	inline-size: 216px;
	max-block-size: 340px;
	overflow-y: auto;
	background: var(--grc-surface);
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
	padding: 6px;
}
.grh-right .gr-langmenu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	border-radius: 2px;
	color: #1a1a1a;
	font-family: var(--grc-font-ui);
	font-weight: 500;
	font-size: 13px;
	text-decoration: none;
}
.grh-right .gr-langmenu a:hover { background: #f3f3f3; text-decoration: none; }
.grh-right .gr-langcode {
	inline-size: 26px;
	flex-shrink: 0;
	font-size: 11px;
	color: var(--grc-text-muted);
}

/* Tighten the row before the nav breakpoint, so locales with longer labels
 * (German and Finnish compounds against English) have somewhere to give
 * before anything is pushed out. If a locale still overflows, lower the item
 * count in grc_header_nav() rather than reintroducing a clip. */
@media (max-width: 1280px) {
	.grh-wrap { gap: 16px; }
	.grh-nav { gap: 14px; }
}

/* --- Nav breakpoint (the design's own: 1100px) --------------------------- */
@media (max-width: 1100px) {
	.grh-nav { display: none; }
	.grh-burger { display: flex; }
}

/* Below 767px the language name is dropped and the globe carries it, matching
   what the previous layer established after mobile QA — the name pushes the
   cluster off-screen at 375px. */
@media (max-width: 767px) {
	.grh-logo { flex-shrink: 1; min-inline-size: 0; }
	.grh-logo img { max-inline-size: 100%; block-size: auto; }
	.grh-wrap { gap: 8px; }
	.grh-burger { margin-inline-end: 0; }
	.grh-right { gap: 8px; }
	.grh-right .gr-langname { display: none; }
}

/* --- Footer --------------------------------------------------------------
 * Design: logo cell at 1.4fr followed by three equal link columns, on #111
 * with a faint 115° diagonal stripe. Collapses to two columns at 820px.
 *
 * The theme's markup puts #brandSection in its own wrapper ABOVE
 * .gr-footer-grid, while the design has the logo as the first cell of the
 * same grid. Rather than override footer.php for a purely visual change,
 * .gr-footer-grid is set to display:contents so its columns become items of
 * the footer's own grid, letting the brand block sit beside them.
 */
#mainfooter {
	position: relative;
	background: url('../img/bg-hero.svg') center center / cover no-repeat, var(--grc-footer-bg);
	/* Full bleed, properly this time.
	 *
	 * The previous box-shadow trick painted the flat colour beyond the box but
	 * could not extend the striped ::before, so the pattern stopped at 1300px
	 * with plain #111 either side.
	 *
	 * --grc-vw is documentElement.clientWidth, published by child.js — the
	 * viewport MINUS the scrollbar, unlike 100vw. The 50% is half of #main
	 * (the parent), so the negative margin lands the footer's edge exactly at
	 * the viewport edge, and the inline padding re-centres the 1300px grid
	 * inside it. No overflow, and the ::before now covers the full width.
	 *
	 * Without JS it falls back to 100% — container width, no bleed, still
	 * correct. */
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
	padding-block: 40px 20px;
	padding-inline: max(var(--grc-pad), (max(100%, var(--grc-vw, 100%)) - var(--grc-max)) / 2);
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--grc-gap-lg);
	align-items: start;
	box-sizing: border-box;
}

/* The stripe overlay. A pseudo-element rather than the design's extra div,
   since we are not changing markup. */
/* The texture is layered into the element's own background rather than a
 * pseudo-element.
 *
 * WHY: bg-hero.svg is largely opaque, unlike the 3.5%-white gradient it
 * replaced. As a ::before it painted OVER the footer columns, because
 * .gr-footer-grid is display:contents — which makes position:relative on it a
 * no-op, so .footercol never entered the stacking context and disappeared
 * behind the texture. Layering the background removes the stacking question
 * entirely.
 */
#mainfooter > * { position: relative; }

/* Promote the three link columns into #mainfooter's grid. */
#mainfooter .gr-footer-grid {
	display: contents;
}

/* Brand cell: logo, slogan and (where present) the social row. */
/* footer.php in this child drops the inline background-color:#111 that the
 * parent puts on the brand wrapper, so no override is needed here. */
#mainfooter #brandSection {
	padding: 0;
	margin: 0;
	/* The harvested rule gives this a 6px #333 bottom border — a divider from
	 * the original's stacked footer. In the grid it reads as a stray bar under
	 * the social icons. The hr is the only divider we want. */
	border: 0;
	text-align: start;
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}
#mainfooter .grf-mark { display: block; width: 100%; }
/* The canvas's mark fills the brand cell's width. The wordmark keeps its own
 * 172:19 aspect, so this is a width and the height follows. */
#mainfooter #brandSection img {
	inline-size: min(100%, 340px);
	max-inline-size: 100%;
	block-size: auto;
	display: block;
	margin-inline: 0;
}

/* Only rendered when the lockup is switched off, carrying the site's own
 * localised slogan in place of the artwork's baked English tagline. Sized to
 * match that tagline so the two options look the same. */
#mainfooter .grf-slogan {
	margin: 0;
	padding: 0;
	max-inline-size: 320px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--grc-text-faint);
}

/* Link columns.
 * The harvested CSS gives .footercol a fixed width:98px and floats it — sized
 * for the original's floating boxes. In a grid cell that clips every label, so
 * width is forced back to the cell. Same reason for the ul/li resets. */
#mainfooter .footercol,
#mainfooter .footercol ul,
#mainfooter .footercol li {
	width: 100% !important;
	max-width: 100%;
	float: none !important;
	box-sizing: border-box;
}
#mainfooter .footercol {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 0;
	height: auto;
	/* Harvested: border-bottom 1px #444 per column. With columns of unequal
	 * length that draws three rules at three different heights. */
	border: 0;
}
/* .gr-navhead is the same heading demoted to a <span> by grc_nav_spans();
   it joins every rule the heading had so the look is identical. */
#mainfooter .footercol h2,
#mainfooter .footercol .gr-navhead {
	display: block;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 22px;
	line-height: 26px;
	color: var(--grc-surface);
	margin: 0;
	letter-spacing: normal;
	text-transform: none;
}
#mainfooter .footercol ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
#mainfooter .footercol li { margin: 0; }
#mainfooter .footercol a {
	display: inline-block;
	font-family: var(--grc-font-ui);
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	color: var(--grc-text-footer);
	text-decoration: none;
	border: 0;
	transition: color 0.15s;
}
#mainfooter .footercol a:hover,
#mainfooter .footercol a:focus-visible {
	color: var(--grc-surface);
	text-decoration: none;
}

/* Bottom rule + copyright span the full grid. */
#mainfooter hr {
	grid-column: 1 / -1;
	/* The harvested hr carries background:#666, so a 1px box renders as a #666
	 * line whatever border is set on it. */
	background: none !important;
	height: 0 !important;
	border: 0;
	border-block-start: 1px solid var(--grc-rule-dark);
	margin: 28px 0 0;
	inline-size: 100%;
}
#mainfooter #re_bottomaddress {
	grid-column: 1 / -1;
	padding-block: 14px 0;
	padding-inline: var(--grc-pad);
	text-align: center;
	font-family: var(--grc-font-body);
	font-size: 11px;
	line-height: 16px;
	color: var(--grc-text-faint);
}

/* Social row, if the site renders one in the footer. */
/* !important because the harvested rule sets display:inline-flex the same
 * way, and an id-prefixed selector alone does not win against it. */
#mainfooter ul.socialFooter {
	display: flex !important;
	justify-content: inherit;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0 !important;
	padding: 0;
	width: 100% !important;
}
#mainfooter ul.socialFooter li { margin: 0; display: flex; }
#mainfooter ul.socialFooter a { display: flex; align-items: center; }
#mainfooter ul.socialFooter svg {
	inline-size: 22px;
	block-size: 22px;
	opacity: 0.8;
	transition: transform 0.15s, opacity 0.15s;
}
#mainfooter ul.socialFooter a:hover svg {
	transform: translateY(-2px);
	opacity: 1;
}

/* Design's footer breakpoint: four tracks become two. */
@media (max-width: 820px) {
	#mainfooter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		padding-inline: var(--grc-pad);
	}
}

/* Mobile: one column, everything centred and stacked. align-items and
 * text-align are inherited by the brand cell's children (they use
 * align-items:inherit / justify-content:inherit above), so the logo, tagline
 * and icon row all centre with it rather than needing their own rules. */
@media (max-width: 640px) {
	#mainfooter {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		justify-items: center;
		text-align: center;
		padding-block: 32px 16px;
	}
	#mainfooter #brandSection {
		align-items: center;
		text-align: center;
	}
	/* .grf-mark is a full-width anchor, so centring the section is not enough
	 * — the image still sits at its start edge. */
	#mainfooter .grf-mark { display: flex; justify-content: center; }
	#mainfooter #brandSection img {
		inline-size: min(100%, 260px);
		margin-inline: auto;
	}
	#mainfooter .grf-slogan { margin-inline: auto; }
	#mainfooter ul.socialFooter { justify-content: center; }
	#mainfooter .footercol { align-items: center; text-align: center; }
	#mainfooter .footercol h2,
	#mainfooter .footercol .gr-navhead { font-size: 19px; line-height: 24px; }
	#mainfooter hr { margin-block-start: 4px; }
}

/* ===========================================================================
 * REPLACING refresh.css
 *
 * The parent's refresh layer is dequeued in functions.php. Everything it did
 * that is still needed is re-expressed below, at the design's dimensions and
 * with logical properties. The parent FILE is untouched: the other 22 sites
 * keep it, and reverting is one line.
 *
 * refresh.css owned, and this section now owns:
 *   1. container + column widths      2. burger panel / mega menu
 *   3. sidebar boxes                  4. /igaming/ cards
 *   5. static-page typography         6. the wide breakpoint
 * Its mobile overflow fixes are ported separately at the end of this file.
 * ======================================================================== */

/* --- 1. Container and columns -------------------------------------------
 * The design's container is 1300 (refresh.css had 1280) with a 332px rail
 * (it had 340). The three-column grid the canvas specifies needs
 * front-page.php restructuring, so for now the existing content + one rail
 * layout is kept, retuned to the design's numbers.
 *
 * !important throughout: the harvested layout.css sets these widths with
 * high-specificity selectors of its own, and this is the same fight
 * refresh.css was already having.
 */
.main {
	width: var(--grc-max) !important;
	max-width: 100%;
}
.colwide {
	width: calc(var(--grc-max) - var(--grc-rail)) !important;
}
.colthin {
	width: var(--grc-rail) !important;
}
.colwide_grtv {
	width: calc(var(--grc-max) - 30px) !important;
}
#ads_top2,
#cookieInfoBoxMenu,
#cookieInfoBoxExpand {
	width: var(--grc-max);
	max-width: 100%;
}

/* Belts and section rules follow the container rather than the original's
   985px. */
.rightbox,
.rbreakout,
[id^="grtvbelt"],
.contentrr {
	max-width: 100%;
}
#main-content > section.rightbox {
	width: calc(var(--grc-max) - 15px);
}

/* --- 2. Burger panel ----------------------------------------------------
 * The canvas does not draw this panel — it only specifies the bar. So it is
 * derived from the design language the canvas does establish: white surface,
 * 2px radius, Outfit, the same shadow as the More dropdown, so the two read
 * as one system rather than two eras.
 *
 * The panel's markup is the parent's, unchanged, and app.js still drives it.
 */
dialog#nav-content {
	/* box-sizing and max-inline-size are the fix for the panel hanging outside
	 * the mobile viewport. <dialog> defaults to content-box, so the 30px
	 * padding sat OUTSIDE inline-size; and setting max-inline-size:none
	 * removed the browser's own max-width guard, which is what normally keeps
	 * a dialog on screen. At 375px that came to 412px of panel. */
	box-sizing: border-box;
	inline-size: min(1180px, 94vw);
	max-inline-size: 94vw;
	max-block-size: 88vh;
	overflow-y: auto;
	/* The harvested CSS gives the dialog a viewport-relative margin
	 * (12px 3vw). Against inset:0 and a fixed width that is over-constrained,
	 * and the browser resolves it by shifting the box off-axis — 28px past the
	 * left edge at 375px. Centring explicitly settles it. */
	inset-inline: 0;
	margin-inline: auto;
	border: 0;
	border-radius: 2px;
	padding: 26px 30px 30px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
	color: #1a1a1a;
}
dialog#nav-content::backdrop {
	background: rgba(24, 23, 21, 0.55);
	backdrop-filter: blur(2px);
}
dialog#nav-content hr {
	border: 0;
	border-block-start: 1px solid var(--grc-border);
	margin-block: 18px 22px;
}
dialog#nav-content img { inline-size: 172px; block-size: 19px; }

/* The close control and the panel's search row. */
.gr-nav-close { cursor: pointer; color: var(--grc-text-muted); }
.gr-nav-close:hover { color: #000; }
.divSearch {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 18px;
}
.divSearch #search-field {
	flex-grow: 1;
	min-width: 0;
	font-family: var(--grc-font-ui);
	font-size: 16px;
	padding: 9px 12px;
	border: 1px solid var(--grc-border-strong);
	border-radius: 2px;
	background: var(--grc-surface);
	color: #1a1a1a;
}
.divSearch #search-field:focus-visible {
	outline: 2px solid var(--grc-link);
	outline-offset: 1px;
	border-color: var(--grc-link);
}

/* The panel's primary list — the same items as the desktop bar, so the two
 * surfaces offer the same navigation. Two columns from 420px, one below, and
 * the badge carries over from the bar. */
.gr-panel-primary {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px 18px;
	margin-block-end: 4px;
}
.gr-panel-primary a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 8px;
	margin-inline-start: -8px;
	border-radius: 2px;
	color: #1a1a1a;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
}
.gr-panel-primary a:hover,
.gr-panel-primary a:focus-visible { background: #f4f4f4; color: #000; text-decoration: none; }
.gr-panel-primary .grh-badge { font-size: 10px; }

@media (min-width: 420px) {
	.gr-panel-primary { grid-template-columns: 1fr 1fr; }
}

/* Mega menu: the 50+ item list as columns rather than one tall column. */
.gr-mega {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 26px 30px;
	align-items: start;
}
.gr-mega-col h3,
.gr-mega-col .gr-navhead {
	display: block;
	margin: 0 0 12px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grc-text-faint);
}
.gr-mega-col h3 a,
.gr-mega-col .gr-navhead a { color: inherit; text-decoration: none; }
.gr-mega-col h3 a:hover,
.gr-mega-col .gr-navhead a:hover { color: var(--grc-link); text-decoration: none; }
.gr-mega-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* The theme sets ul { display:flex }, and a flex container ignores
	   column-count — which turned each list into one tall column. */
	display: block !important;
}
.gr-mega-col li {
	display: block !important;
	margin: 0 0 1px;
	height: auto !important;
}
.gr-mega-col a {
	display: block;
	padding: 6px 8px;
	margin-inline-start: -8px;
	border-radius: 2px;
	color: #1a1a1a;
	font-family: var(--grc-font-ui);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.13s, color 0.13s;
}
.gr-mega-col a:hover,
.gr-mega-col a:focus-visible { background: #f4f4f4; color: #000; text-decoration: none; }

/* The sections column has the most items and takes two tracks. */
.gr-mega-sections { grid-column: span 2; }
.gr-mega-sections > ul { column-count: 2; column-gap: 26px; }
.gr-mega-sections li { break-inside: avoid; -webkit-column-break-inside: avoid; }
/* The video list is the longest (24 items on .eu) and splits too. */
.gr-mega-col:has(> ul > li:nth-child(14)) { grid-column: span 2; }
.gr-mega-col:has(> ul > li:nth-child(14)) > ul { column-count: 2; column-gap: 26px; }
@media (max-width: 700px) {
	dialog#nav-content { padding: 18px 16px 22px; }
	.gr-mega { grid-template-columns: 1fr 1fr; }
	.gr-mega-sections { grid-column: span 2; }
	.gr-mega-sections > ul,
	.gr-mega-col:has(> ul > li:nth-child(14)) > ul { column-count: 1; }
}

/* --- 3. Sidebar boxes ---------------------------------------------------
 * Card treatment at the design's 2px radius and #eee border rather than the
 * previous layer's 8px/#ececec.
 */
.colthin .gr-sidebox {
	border-radius: 2px;
	background: var(--grc-surface);
	border: 1px solid var(--grc-border);
	border-block-start: 0;
}
.colthin .gr-sidebox > h4.hbar1 { border-radius: 2px 2px 0 0; }
.colthin .gr-sidebox img { border-radius: 2px; }

/* The cards' <a> is inline and shrinks to the image, so some images came out
 * 243px and others 290px in the same box. Article, link and image all take
 * the box's width. */
.colthin .gr-sidebox article.guide,
.colthin .gr-sidebox article.guide > a,
.colthin .gr-sidebox .content > article {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	float: none;
}
.colthin .gr-sidebox article.guide > a > img,
.colthin .gr-sidebox img[width] {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
}

/* --- 4. /igaming/ cards -------------------------------------------------- */
.gr-igaming-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
	margin-block: 18px 30px;
}
.gr-igaming-card {
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	overflow: hidden;
	padding-block-end: 14px;
	background: var(--grc-surface);
	transition: box-shadow 0.18s, transform 0.18s;
}
.gr-igaming-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10); transform: translateY(-2px); }
.gr-igaming-card img { width: 100%; height: auto; display: block; }
.gr-igaming-card h2 {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 17px;
	margin: 12px 14px 2px;
}
.gr-igaming-card .gr-provider { font-size: 12px; color: var(--grc-text-muted); margin: 0 14px 6px; }
.gr-igaming-card .gr-score { font-weight: 700; margin: 0 14px 6px; }
.gr-igaming-card p {
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 20px;
	margin: 0 14px 10px;
	color: var(--grc-text);
}
.gr-igaming-card .gr-cta {
	display: inline-block;
	margin-inline: 14px;
	padding: 8px 16px;
	background: var(--grc-badge);
	color: var(--grc-surface);
	border-radius: 2px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.gr-igaming-card .gr-cta:hover { background: #c02b37; color: var(--grc-surface); text-decoration: none; }
.gr-igaming-card .gr-disclaimer { font-size: 11px; color: var(--grc-text-faint); margin: 10px 14px 0; }

/* --- 5. Static pages ----------------------------------------------------
 * Imported HTML: h2 + paragraphs + mail addresses. Readable measure, and the
 * design's type pairing — Outfit for headings, Arial for body copy.
 */
.gr-page {
	max-inline-size: 760px;
	padding: 6px 4px 40px;
}
.gr-page h1 {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.gr-page .gr-page-lead {
	font-family: var(--grc-font-body);
	color: var(--grc-text-muted);
	font-size: 16px;
	margin: 0 0 26px;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--grc-border);
}
.gr-page p {
	font-family: var(--grc-font-body);
	font-size: 15px;
	line-height: 1.65;
	color: #333333;
	margin: 0 0 14px;
}
.gr-page h2 {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grc-text-faint);
	margin: 30px 0 10px;
}
.gr-page h3 {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 18px;
	margin: 22px 0 8px;
}
.gr-page a {
	color: var(--grc-link);
	text-decoration: none;
	border-block-end: 1px solid rgba(0, 136, 204, 0.3);
}
.gr-page a:hover { color: var(--grc-link-hover); border-block-end-color: var(--grc-link-hover); text-decoration: none; }
.gr-page ul,
.gr-page ol { margin: 0 0 16px; padding-inline-start: 20px; }
.gr-page li { margin: 0 0 7px; line-height: 1.6; font-family: var(--grc-font-body); }
.gr-page img { max-width: 100%; height: auto; border-radius: 2px; }
.gr-page table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.gr-page td,
.gr-page th {
	padding: 9px 12px;
	border-block-end: 1px solid var(--grc-border);
	text-align: start;
	font-size: 14px;
	font-family: var(--grc-font-body);
}

/* Mail addresses become contact chips. */
.gr-page a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	margin-block: 2px;
	background: #f4f8fb;
	border: 1px solid #d8e6ef;
	border-radius: 999px;
	color: var(--grc-link);
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 14px;
}
.gr-page a[href^="mailto:"]::before { content: "\2709"; font-size: 13px; }
.gr-page a[href^="mailto:"]:hover { background: #e9f2f8; border-color: #c3dbe9; }

/* --- 6. Wide breakpoint ------------------------------------------------- */
@media (max-width: 1332px) {
	.main { width: 100% !important; }
}

/* --- Homepage: the three-track grid -------------------------------------
 * 332 | 636 | 332 inside the 1300 container, exactly as the canvas. The rails
 * carry their gutter as padding (the canvas does the same), so the centre
 * column's measure is not affected by grid gap.
 *
 * .gr-* class names are the canvas's own, kept so a frame maps to a selector
 * without translation.
 */
.gr-row {
	display: grid;
	grid-template-columns: var(--grc-rail) minmax(0, 1fr) var(--grc-rail);
	align-items: start;
}
.gr-rail-left {
	grid-column: 1;
	padding-inline-end: var(--grc-gap-lg);
	padding-block-end: var(--grc-gap-lg);
	min-width: 0;
}
.gr-centre {
	grid-column: 2;
	min-width: 0;
}
.gr-rail-right {
	grid-column: 3;
	padding-inline-start: var(--grc-gap-lg);
	padding-block-end: var(--grc-gap-lg);
	min-width: 0;
}

/* The rail owns its width now, so the harvested .colthin width inside it has
 * to give — otherwise the sidebar would be 332px inside a 300px track. */
.gr-rail .colthin,
.gr-rail aside.colthin {
	width: 100% !important;
	max-width: 100%;
	float: none;
}

/* Rail section headings, shared by the ticker and any widget placed there. */
.grc-rail-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding-block-end: 8px;
	border-block-end: 2px solid var(--grc-accent);
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grc-text-muted);
}

/* The canvas's marker beside the heading. A CSS shape rather than an asset,
 * so its colour and direction are one line to change — it reads as a corner
 * wedge in the reference, matching the notch on the trust card. */
.grc-rail-title::before {
	content: "";
	flex-shrink: 0;
	inline-size: 8px;
	block-size: 8px;
	background: var(--grc-ink);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* --- The ticker ---------------------------------------------------------- */
.grc-ticker { margin-block-end: 24px; }
.grc-ticker-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.grc-ticker-item {
	display: grid;
	gap: 8px;
	align-items: start;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	padding: 8px 10px;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}
.grc-ticker-item:hover,
.grc-ticker-item:focus-visible {
	border-color: var(--grc-border-strong);
	background: #fafafa;
	text-decoration: none;
}
.grc-ticker-time {
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 10px;
	line-height: 14px;
	color: var(--grc-link);
}
.grc-ticker-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.grc-ticker-title {
	font-family: var(--grc-font-title);
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	color: #1a1a1a;
}
.grc-ticker-item:hover .grc-ticker-title { color: #000; }
.grc-ticker-badge {
	display: inline-block;
	background: var(--grc-ink);
	color: var(--grc-surface);
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-style: italic;
	font-size: 10px;
	line-height: 12px;
	padding: 2px 4px;
	margin-inline-end: 5px;
	vertical-align: 1px;
}

.grc-rail-widgets { display: flex; flex-direction: column; gap: 16px; }

/* The canvas's collapse: one column, rails full width, in DOM order — ticker,
 * content, sidebar. */
@media (max-width: 1100px) {
	.gr-row { grid-template-columns: minmax(0, 1fr); }
	.gr-rail-left,
	.gr-centre,
	.gr-rail-right {
		grid-column: auto;
		padding-inline: 0;
	}
	/*
	 * Reading order on one column: the feed first, then the rail that carries
	 * on from it, and Just In last. The canvas's own collapse leaves DOM order
	 * (ticker first), which puts thirteen news headlines above the lead story.
	 * These are grid items, so order costs no markup.
	 */
	.gr-centre     { order: 1; }
	.gr-rail-right { order: 2; padding-block-start: 24px; }
	.gr-rail-left  { order: 3; padding-block: 24px 0; }
	.grc-ticker-list { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.grc-ticker-list { grid-template-columns: 1fr; }
}

/* --- Homepage centre column ---------------------------------------------
 * The harvested widths in here are absolute and sized for the original's
 * 665px column, so inside the canvas's 636px centre they overflow by 14px.
 * Everything is put back on the column's own width.
 */
.gr-centre .leftbox,
.gr-centre #textlist,
.gr-centre section#placards,
.gr-centre .firstRow,
.gr-centre .secondRowBox,
.gr-centre .secondRow,
.gr-centre .placardBox {
	width: 100% !important;
	max-width: 100%;
	margin-inline: 0 !important;
	box-sizing: border-box;
	float: none;
}

/* --- Top story ----------------------------------------------------------
 * The canvas's hero: image, then a dark panel with a diagonal stripe field, a
 * rotated section ribbon down the left edge, white headline and muted excerpt.
 *
 * The ribbon reuses .placard-type, which already holds the section's own
 * localised name ("Reviews", "Anmeldelser", "리뷰"). The canvas hardcodes
 * "TOP STORY"; live section data says the same thing and translates itself.
 */
.gr-centre .firstRow .placardBox {
	position: relative;
	background: var(--grc-ink);
	border-radius: 2px;
	overflow: hidden;
	margin-block-end: 12px;
}
.gr-centre .firstRow #placard1 { line-height: 0; }
.gr-centre .firstRow #placard1 img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.gr-centre .firstRow .placardsText {
	position: relative;
	padding: 12px 16px 8px 46px;
	background: var(--grc-ink) url('../img/bg-hero.svg') center center / cover no-repeat;
}
.gr-centre .firstRow .placardsText h2 {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 23px;
	line-height: 26px;
	letter-spacing: -0.01em;
	color: var(--grc-surface);
}
.gr-centre .firstRow .placardsText a { color: inherit; text-decoration: none; }
.gr-centre .firstRow .placardsText a:hover h2 { color: #dcdcdc; }

/* The ribbon: rotated, pinned to the panel's inline-start edge. */
.gr-centre .firstRow .placard-type {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	/* Physical width/height with !important: the harvested rule sets width on
	 * .placard-type, which beat inline-size and left the ribbon spanning the
	 * full panel — sitting on top of the headline instead of beside it. */
	width: 30px !important;
	height: 100% !important;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--grc-accent);
	color: var(--grc-surface);
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.gr-centre .firstRow .placardDescription {
	margin: 0;
	padding: 0 16px 20px 46px;
	background: var(--grc-ink) url('../img/bg-hero.svg') center center / cover no-repeat;
	font-family: var(--grc-font-body);
	font-size: 15px;
	line-height: 22px;
	color: var(--grc-text-on-dark);
}

/* Comment bubble sits over the image rather than in the flow. */
.gr-centre .firstRow .commentsbox,
.gr-centre .secondRow .commentsbox {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	z-index: 2;
}

/* --- Placard row two ---------------------------------------------------- */
.gr-centre .secondRowBox {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.gr-centre .secondRowBox .secondRow { display: contents; }
.gr-centre .secondRowBox .placardBox {
	position: relative;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.gr-centre .secondRowBox .placards { line-height: 0; }
.gr-centre .secondRowBox .placards img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.gr-centre .secondRowBox .placardsText { padding: 8px 12px 12px; }
.gr-centre .secondRowBox .placardsText h2 {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 16px;
	line-height: 21px;
	color: #1a1a1a;
}
.gr-centre .secondRowBox .placard-type {
	display: block;
	margin-block-end: 4px;
	font-family: var(--grc-font-body);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--grc-text-muted);
}
.gr-centre .secondRowBox a { text-decoration: none; }

/* --- The card grid ------------------------------------------------------
 * The canvas puts these three-up in the centre column. The parent renders
 * them as a vertical list of horizontal rows, so the layout changes here and
 * the markup comes from the child's parts/card.php.
 */
.gr-centre #textlist {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-block-start: 12px;
}
.gr-centre #textlist article.areview {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	overflow: hidden;
	background: var(--grc-surface);
	transition: border-color 0.15s;
}
.gr-centre #textlist article.areview:hover { border-color: var(--grc-border-strong); }

.gr-centre .areview-link { display: flex; flex-direction: column; text-decoration: none; }
.gr-centre .areview-media { display: block; line-height: 0; }
.gr-centre .areview-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.gr-centre #textlist article.areview h2 {
	margin: 0;
	padding: 8px 10px 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
	color: #1a1a1a;
}
.gr-centre #textlist article.areview:hover h2 { color: #000; }
.gr-centre #textlist article.areview .publishauthor {
	margin: 0;
	padding: 6px 10px 10px;
	font-family: var(--grc-font-body);
	font-size: 11px;
	line-height: 15px;
	color: var(--grc-text-faint);
	margin-block-start: auto;
}
.gr-centre #textlist article.areview .publishauthor a { color: var(--grc-text-muted); }
.gr-centre #textlist article.areview .commentsbox_rwd {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 6px;
	z-index: 2;
	width: auto;
}

@media (max-width: 1100px) {
	.gr-centre #textlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.gr-centre #textlist,
	.gr-centre .secondRowBox { grid-template-columns: minmax(0, 1fr); }
	.gr-centre .firstRow .placardsText,
	.gr-centre .firstRow .placardDescription { padding-inline-start: 40px; }
}

/* ===========================================================================
 * Homepage, below the fold.
 *
 * Everything here is the parent's markup, restyled. The order and the content
 * are harvested per site (inc/frontboxes.php, inc/fronttracks.php), so nothing
 * in this section decides WHAT appears — only how it looks.
 * ======================================================================== */

/* --- Shared section title ----------------------------------------------
 * h4.hbar1 is the parent's heading for every belt, track and box. One
 * treatment for all of them, in the canvas's language: Outfit, tight, with the
 * blue accent as a rule rather than the harvested filled bar.
 */
#main-content > section > h4.hbar1,
#main-content > h4.hbar1,
#main .rbreakout > h4.hbar1 {
	margin: 0 0 12px;
	padding: 0 0 8px;
	background: none !important;
	border: 0;
	border-block-end: 2px solid var(--grc-border);
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.01em;
	color: #1a1a1a;
	position: relative;
	height: auto !important;
}
#main-content > section > h4.hbar1::after,
#main-content > h4.hbar1::after,
#main .rbreakout > h4.hbar1::after {
	content: "";
	position: absolute;
	inset-block-end: -2px;
	inset-inline-start: 0;
	inline-size: 56px;
	block-size: 2px;
	background: var(--grc-accent);
}
#main h4.hbar1 a { color: inherit; text-decoration: none; }
#main h4.hbar1 a:hover { color: var(--grc-link); text-decoration: none; }

/* Section rows run the container's full width.
 *
 * width:auto, NOT 100%: the harvested rules put an inline margin on these
 * (7.5px on the sections, 10px on .gameswrapper), and a 100% width has the
 * margin added on top of it — 18px of horizontal overflow at 375px, which is
 * the gap down the right-hand side. auto fills the parent minus its margins.
 */
#main-content > section.rightbox,
#main-content > section {
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
	margin-block: 0 32px;
	margin-inline: 0 !important;
}
#main .rbreakout,
#main .contentrr {
	width: auto !important;
	max-width: 100%;
	margin-inline: 0 !important;
}

/* The harvested sort bar is a tab strip we do not use on the front page. */
#main-content > section > .sortbar.nosortbar { display: none; }
#main-content > section > .sortbar {
	margin: 0 0 12px;
	font-family: var(--grc-font-ui);
	font-size: 12px;
	color: var(--grc-text-muted);
}

/* --- Editorial tracks: card grids ---------------------------------------
 * NOTE: the homepage no longer renders these — front-page.php builds the
 * canvas's section list instead. These rules still serve the section and tag
 * archives, which use the same markup.
 */
#main .tabby {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	width: auto !important;
	margin-inline: 0 !important;
}
#main .tabby article.areview {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	overflow: hidden;
	background: var(--grc-surface);
	transition: border-color 0.15s;
}
#main .tabby article.areview:hover { border-color: var(--grc-border-strong); }
#main .tabby .areview-link { display: flex; flex-direction: column; text-decoration: none; }
#main .tabby .areview-media { display: block; line-height: 0; }
#main .tabby .areview-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
#main .tabby article.areview h2 {
	margin: 0;
	padding: 8px 10px 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
	color: #1a1a1a;
}
#main .tabby article.areview p { display: none; }
#main .tabby article.areview .publishauthor {
	margin-block-start: auto;
	padding: 6px 10px 10px;
	font-family: var(--grc-font-body);
	font-size: 11px;
	line-height: 15px;
	color: var(--grc-text-faint);
}
#main .tabby article.areview .publishauthor a { color: var(--grc-text-muted); }
#main .tabby article.areview .commentsbox_rwd {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 6px;
	z-index: 2;
	width: auto;
}

/* --- Tag columns --------------------------------------------------------- */
#main #entityBasedOnTagColumn {
	width: auto !important;
	max-width: 100%;
	margin-block: 0 32px;
	margin-inline: 0 !important;
}
#main .entityBasedOnTag-placards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	width: auto !important;
	margin-inline: 0 !important;
}
#main .entityBasedOnTag-placards article {
	position: relative;
	width: auto !important;
	margin: 0 !important;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	overflow: hidden;
	background: var(--grc-surface);
}
#main .entityBasedOnTag-placards article img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
#main .entityBasedOnTag-placards .commentsbox {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 6px;
	z-index: 2;
}
#main .texttype {
	margin: 0 0 10px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grc-text-muted);
}
#main .texttype a { color: inherit; text-decoration: none; }
#main .texttype a:hover { color: var(--grc-link); }

/* --- Data boxes: popular games, upcoming games, user reviews, podcasts ---
 * These are the canvas's "Top Games This Month" and "Games Out This Month".
 */
#main .gr-databox .gameswrapper { width: auto !important; margin-inline: 0 !important; }
#main ol.gr-gamelist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 2px 24px;
	counter-reset: gr-rank;
}
#main ol.gr-gamelist li {
	counter-increment: gr-rank;
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: auto !important;
	margin: 0;
	padding: 7px 0;
	border-block-end: 1px solid var(--grc-border);
	font-family: var(--grc-font-ui);
	font-size: 14px;
	line-height: 19px;
}
#main ol.gr-gamelist li::before {
	content: counter(gr-rank);
	flex-shrink: 0;
	inline-size: 20px;
	font-weight: 700;
	font-size: 12px;
	color: var(--grc-accent);
	font-variant-numeric: tabular-nums;
}
#main ol.gr-gamelist a { color: #1a1a1a; text-decoration: none; }
#main ol.gr-gamelist a:hover { color: var(--grc-link); }

/* --- GRTV belts: the canvas's dark full-bleed strip ---------------------
 * Same full-bleed technique as the footer: --grc-vw is the viewport minus the
 * scrollbar, published by child.js. Falls back to container width without JS.
 */
#main-content > section.rightbox:has(.grtvrr) {
	position: relative;
	background: url('../img/bg-hero.svg') center center / cover no-repeat, var(--grc-ink);
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
	padding-block: 28px;
	padding-inline: max(var(--grc-pad), (max(100%, var(--grc-vw, 100%)) - var(--grc-max)) / 2);
	box-sizing: border-box;
	margin-block-end: 32px;
}
#main-content > section.rightbox:has(.grtvrr) > * { position: relative; }
#main-content > section.rightbox:has(.grtvrr) h4.hbar1 {
	color: var(--grc-surface);
	border-block-end-color: rgba(255, 255, 255, 0.14);
}
#main-content > section.rightbox:has(.grtvrr) h4.hbar1 a { color: var(--grc-surface); }
#main-content > section.rightbox:has(.grtvrr) h4.hbar1 a:hover { color: #cfe3f5; }

#main .grtvrr {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px 12px;
}
#main .grtv-belt-item {
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}
#main .grtv-belt-item img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}
#main .grtv-belt-item a {
	display: block;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	color: var(--grc-surface);
	text-decoration: none;
	margin-block-start: 8px;
}
#main .grtv-belt-item a:hover { color: #cfe3f5; }
#main .grtv-belt-item time {
	display: block;
	margin-block-start: 4px;
	font-family: var(--grc-font-body);
	font-size: 11px;
	color: var(--grc-text-on-dark);
}

/* --- Home player -------------------------------------------------------- */
#main .colHomePlayer {
	width: auto !important;
	max-width: 100%;
	margin-block: 0 32px;
	margin-inline: 0 !important;
}
#main .colHomePlayer video,
#main #videoContainer {
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	border-radius: 2px;
	overflow: hidden;
}

/* --- Comments are gone -------------------------------------------------
 * Commenting is no longer a feature. The child's own templates omit the
 * markup; these hide the bubbles in the parent's partials (tag columns,
 * placards, sidebar boxes) that are not overridden.
 */
.commentsbox,
.commentsbox_rwd,
#main .commentsbox,
#main .commentsbox_rwd { display: none !important; }

/* --- Feed cards ---------------------------------------------------------
 * One card, three sizes. The canvas puts a blue section tab on the image and
 * a score pill bottom-left, then title, meta.
 */
.grc-card { position: relative; min-width: 0; }
.grc-card-media {
	position: relative;
	display: block;
	line-height: 0;
	border-radius: 2px;
	overflow: hidden;
}
.grc-card-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
/* CategoryTag, to spec: 16px tall, 8px inline padding, Arial 700 10px at
 * 100% line-height, 0.02em tracking, uppercase, on --blue-500. Arial, not
 * Outfit — the component is explicit about it. */
.grc-card-tab {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: inline-flex;
	align-items: center;
	block-size: 16px;
	box-sizing: content-box;
	padding: 8px;
	background: var(--grc-accent);
	color: var(--grc-surface);
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 100%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}
/* The chip sits in the lower-left of the card's image, where the pill did. */
.grc-card-chip {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-start: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.grc-card-title { margin: 0; }
.grc-card-title a { color: #1a1a1a; text-decoration: none; }
.grc-card-title a:hover { color: #000; text-decoration: none; }

.grc-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-family: var(--grc-font-ui);
	font-size: 12px;
	line-height: 16px;
}
.grc-byline { color: var(--grc-link); font-weight: 600; text-decoration: none; }
.grc-byline:hover { color: var(--grc-link-hover); }
.grc-date { color: var(--grc-text-faint); }

/* Hero: image, then the dark panel. */
.grc-card--hero { background: var(--grc-ink); border-radius: 2px; overflow: hidden; margin-block-end: 12px; }
.grc-card--hero .grc-card-media { border-radius: 0; }
.grc-card--hero .grc-card-body {
	padding: 14px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--grc-ink) url('../img/bg-hero.svg') center center / cover no-repeat;
}
.grc-card--hero .grc-card-title {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 23px;
	line-height: 27px;
	letter-spacing: -0.01em;
}
.grc-card--hero .grc-card-title a { color: var(--grc-surface); }
.grc-card--hero .grc-card-title a:hover { color: #dcdcdc; }
.grc-card--hero .grc-card-excerpt {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 15px;
	line-height: 22px;
	color: var(--grc-text-on-dark);
}
.grc-card--hero .grc-date { color: #8b8f91; }

/* Rows. */
.grc-feed-row { display: grid; gap: 12px; margin-block-end: 12px; }
.grc-feed-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grc-feed-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ArticleCard3: 1px --grey-100 border, 8px stack gap, media 188px, title
 * clamped to three lines. */
.grc-card--wide,
.grc-card--grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	overflow: hidden;
	background: var(--grc-surface);
	transition: border-color 0.15s;
}
.grc-card--wide:hover,
.grc-card--grid:hover { border-color: var(--grc-border-strong); }
.grc-card--wide .grc-card-body,
.grc-card--grid .grc-card-body {
	padding: 9px 11px 11px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-grow: 1;
}
.grc-card--wide .grc-card-title {
	font-family: var(--grc-font-title);
	font-weight: 700;
	font-size: 17px;
	line-height: 22px;
}
.grc-card--grid .grc-card-title {
	font-family: var(--grc-font-title);
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
}
.grc-card--wide .grc-card-meta,
.grc-card--grid .grc-card-meta { margin-block-start: auto; }

/* --- Just In column ----------------------------------------------------- */
.grc-ticker-item {
	display: block;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	padding: 8px 10px;
	transition: border-color 0.15s, background 0.15s;
}
.grc-ticker-item:hover { border-color: var(--grc-border-strong); background: #fafafa; }
.grc-ticker-time {
	display: block;
	margin-block-end: 3px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 11px;
	line-height: 14px;
	color: var(--grc-link);
}
.grc-ticker-title {
	margin: 0 0 4px;
	font-family: var(--grc-font-title);
	font-weight: 700;
	font-size: 14px;
	line-height: 19px;
}
.grc-ticker-title a { color: #1a1a1a; text-decoration: none; }
.grc-ticker-item:hover .grc-ticker-title a { color: #000; }
.grc-ticker-badge {
	display: inline-block;
	background: var(--grc-ink);
	color: var(--grc-surface);
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-style: italic;
	font-size: 9px;
	line-height: 12px;
	letter-spacing: 0.04em;
	padding: 2px 4px;
	margin-inline-end: 5px;
	vertical-align: 1px;
	text-transform: uppercase;
}
.grc-ticker-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	font-family: var(--grc-font-ui);
	font-size: 11px;
	line-height: 15px;
}

/* --- Right rail feed ---------------------------------------------------- */
.grc-rail-feed { display: flex; flex-direction: column; margin-block-end: 24px; }
.grc-rail-item { padding-block: 12px; border-block-end: 1px solid var(--grc-border); }
.grc-rail-item:first-child { padding-block-start: 0; }
.grc-rail-item:last-child { border-block-end: 0; }
.grc-rail-media { display: block; line-height: 0; margin-block-end: 9px; border-radius: 2px; overflow: hidden; }
.grc-rail-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.grc-rail-item-title {
	margin: 0 0 5px;
	font-family: var(--grc-font-title);
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
}
.grc-rail-item-title a { color: #1a1a1a; text-decoration: none; }
.grc-rail-item-title a:hover { color: var(--grc-link); }

/* --- Trust card ---------------------------------------------------------
 * Grey header with a notched top-inline-start corner, then a light panel with
 * a faint diagonal wash, matching the reference.
 */
.grc-trust {
	margin-block-end: 24px;
	background: linear-gradient(160deg, #f7f7f7 0%, #ededed 100%);
	border: 1px solid #e4e4e4;
	border-radius: 2px;
	overflow: hidden;
}
.grc-trust-head {
	background: var(--grc-grey-band);
	color: var(--grc-surface);
	font-family: var(--grc-font-ui);
	font-weight: 800;
	font-size: 15px;
	line-height: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 11px 14px 11px 30px;
	/* The notch: the canvas cuts the top-inline-start corner at 45 degrees. */
	clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
}
.grc-trust-body {
	position: relative;
	padding: 16px 16px 18px;
	background: repeating-linear-gradient(
		115deg,
		rgba(0, 0, 0, 0) 0 34px,
		rgba(0, 0, 0, 0.012) 34px 68px
	);
}
.grc-trust-mark { display: block; inline-size: 148px; block-size: auto; margin-block-end: 12px; }
.grc-trust-claim {
	margin: 0 0 14px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 19px;
	line-height: 24px;
	color: var(--grc-accent);
}
.grc-trust-points { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.grc-trust-points li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--grc-font-ui);
	font-size: 15px;
	line-height: 20px;
	color: var(--grc-text-muted);
}
.grc-trust-icon { flex-shrink: 0; inline-size: 24px; block-size: 24px; display: block; }
.grc-trust-icon svg { width: 24px; height: 24px; display: block; fill: currentColor; }
.grc-trust-icon--person { color: #7fb2e5; }
.grc-trust-icon--flask { color: #e0499b; }
.grc-trust-icon--search { color: #4a90d9; }
.grc-trust-icon--calendar { color: #6c7fd8; }
.grc-trust-note {
	margin: 0 0 6px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
	color: #1a1a1a;
}
.grc-trust-note:last-child { margin-block-end: 0; }

@media (max-width: 1100px) {
	.grc-feed-row--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.grc-feed-row--two,
	.grc-feed-row--three { grid-template-columns: minmax(0, 1fr); }
	.grc-card--hero .grc-card-title { font-size: 20px; line-height: 24px; }
}

/* --- White page ground --------------------------------------------------
 * The canvas has the page on white. The parent paints a dark striped ground
 * (assets/img/stripes3.png) via an absolutely positioned #pagebackground,
 * whose background is set INLINE by gr_page_background_style() — hence
 * !important — and is themeable through the gr_bg_image customizer setting.
 *
 * That setting stops having any effect on this site as a result, which is the
 * intent: the redesign is white, on every template, not just the homepage.
 */
body { background: var(--grc-surface); }
#pagebackground,
#pagebackground.abs {
	display: none !important;
	background: none !important;
}
#main,
#main.main { background: var(--grc-surface); }

/* --- No container edges -------------------------------------------------
 * With the page on white there is nothing for a drop shadow or a container
 * border to separate, and the canvas has neither. The header keeps only its
 * 2px bottom rule; the harvested drop shadow on #mainheader goes.
 */
#mainheader,
#mainheader.grh,
#main,
#main.main,
.gr-row,
.gr-centre,
.gr-rail {
	box-shadow: none !important;
	border-inline: 0 !important;
	outline: none;
}
#main, #main.main { border-block: 0 !important; }

/* --- Shared section title (child sections) ------------------------------ */
/* The canvas: marker, uppercase title, and a blue rule beneath it that runs a
 * fixed distance rather than the section's full width. */
.grc-section-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	padding-block-end: 9px;
	border-block-end: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	/*
	 * 17.6/22 and the ink token. Two things were wrong and the audit caught
	 * both: this rendered at 19px while .grc-sec-title — the same component,
	 * used in the rails — rendered at 17px, and the colour was a hardcoded
	 * #1a1a1a rather than --grc-ink, so section headings were a different
	 * black from every other heading on the page. The Figma text style is
	 * Outfit SemiBold 17.6/22, which is what both now use.
	 */
	font-size: 17.6px;
	line-height: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--grc-ink);
	position: relative;
}
.grc-section-title::before {
	content: "";
	flex-shrink: 0;
	inline-size: 9px;
	block-size: 9px;
	background: var(--grc-accent);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.grc-section-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: min(100%, 290px);
	block-size: 2px;
	background: var(--grc-accent);
}
.grc-section-title a { color: inherit; text-decoration: none; }
.grc-section-title a:hover { color: var(--grc-link); }
.grc-section-title--dark {
	color: var(--grc-surface);
	border-block-end-color: rgba(255, 255, 255, 0.16);
}
.grc-section-title--dark a { color: var(--grc-surface); }
.grc-section-title--dark a:hover { color: #cfe3f5; }

/* --- Reviews row --------------------------------------------------------
 * The canvas: a 550px lead beside a grid of the rest.
 */
/*
 * Top margin as well as bottom. Reviews used to follow the Articles section,
 * which supplied the gap with its own margin-block-end; with Articles removed
 * from the homepage the section now butts straight against the hero feed. The
 * start value matches .grc-sec so every band on the page keeps one rhythm.
 */
.grc-reviews { margin-block: 34px 32px; }
.grc-review-row {
	display: grid;
	grid-template-columns: 550px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}
.grc-review-lead { min-width: 0; }
.grc-review-grid {
	display: grid;
	/* Explicit three, not auto-fill: auto-fill fitted four at this width and
	 * left the second row with two. Every grid on this page uses an explicit
	 * column count for that reason. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	min-width: 0;
	align-content: start;
}

/* The lead is a light card with an excerpt, not the dark hero treatment. */
.grc-card--review {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	overflow: hidden;
	background: var(--grc-surface);
	transition: border-color 0.15s;
}
.grc-card--review:hover { border-color: var(--grc-border-strong); }
.grc-card--review .grc-card-body {
	padding: 11px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.grc-card--review .grc-card-title {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 23px;
	line-height: 27px;
	letter-spacing: -0.01em;
}
.grc-card--review .grc-card-excerpt {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}

/* --- GRTV strip: dark, full bleed ---------------------------------------
 * Same technique as the footer — --grc-vw is the viewport minus the
 * scrollbar, published by child.js, so no 100vw overflow.
 */
.grc-grtv {
	position: relative;
	background: url('../img/bg-hero.svg') right center / auto 100% no-repeat, var(--grc-ink);
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
	margin-block-end: 32px;
	padding-block: 28px 32px;
	padding-inline: max(var(--grc-pad), (max(100%, var(--grc-vw, 100%)) - var(--grc-max)) / 2);
	box-sizing: border-box;
}
.grc-grtv-inner { position: relative; }
.grc-grtv-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 12px;
}
.grc-grtv-item { min-width: 0; }
.grc-grtv-item > a { display: block; text-decoration: none; }
.grc-grtv-media { display: block; line-height: 0; border-radius: 2px; overflow: hidden; }
.grc-grtv-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.grc-grtv-title {
	display: block;
	margin-block-start: 9px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	color: var(--grc-surface);
}
.grc-grtv-item > a:hover .grc-grtv-title { color: #cfe3f5; }
.grc-grtv-item .grc-date { display: block; margin-block-start: 4px; color: var(--grc-text-on-dark); }

@media (max-width: 1100px) {
	.grc-review-row { grid-template-columns: minmax(0, 1fr); }
	/* Reviews carry 6 items, so 3 columns still divides evenly. */
	.grc-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/*
	 * Videos deliberately have NO 3-column step. The belt is 8 items, so 3
	 * columns gives a ragged 3+3+2 — the shape that was rejected once already.
	 * It matters beyond narrow windows: browser zoom shrinks the CSS-pixel
	 * viewport, so zooming in on a wide screen crosses this breakpoint and the
	 * belt visibly reflows. 4 -> 2 -> 1 are all exact divisors of 8, so the
	 * grid stays square at every zoom level.
	 */
	.grc-card--review .grc-card-title { font-size: 20px; line-height: 24px; }

	/* The trust card is a desktop brand-proposition block; it is not part of
	 * the mobile reading order. Revisit when its mobile treatment is designed. */
	.grc-trust { display: none; }
}

/* --- Titled sections ---------------------------------------------------- */
.grc-sec { margin-block-end: 34px; }
.grc-sec-grid {
	display: grid;
	grid-template-columns: repeat(var(--grc-cols, 4), minmax(0, 1fr));
	gap: 12px;
}
.grc-sec-more { margin-block-start: 16px; text-align: center; }

/* The canvas's secondary button. */
/* SecondaryButton, to spec: 1px border in text-primary, 11px/24px padding,
 * Arial 700 11px at 100% line-height, -0.5px tracking, uppercase. The
 * component defines a hover variant with an identical body, so the hover
 * treatment below is ours. */
.grc-btn {
	display: inline-block;
	padding: 11px 24px;
	border: 1px solid #000000;
	border-radius: 0;
	background: var(--grc-surface);
	color: #000000;
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 11px;
	line-height: 100%;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.grc-btn:hover,
.grc-btn:focus-visible {
	background: #000000;
	color: var(--grc-surface);
	text-decoration: none;
}

/* --- Score pill: banded by value ---------------------------------------
 * The canvas pairs the number with a word and colours the pair. The word
 * needs a translated scale, but the colour comes straight off the number.
 */
/* --- RatingNo: the one score treatment --------------------------------
 * Component spec: 27px wide, radius 20, 4px/6px padding, Outfit 600 16px with
 * -0.02em tracking, DARK text on a colour that shifts across five bands. The
 * number alone, no "/10" — which is why the old pill read as off.
 */
.grc-score {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 27px;
	box-sizing: border-box;
	padding: 4px 6px;
	border-radius: 20px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 18px;
	letter-spacing: -0.02em;
	color: var(--grc-ink);
	flex-shrink: 0;
	min-block-size: 27px;
}
.grc-score--s10 { background: var(--grc-s10); }
.grc-score--s9  { background: var(--grc-s9); }
.grc-score--s7  { background: var(--grc-s7); }
.grc-score--s5  { background: var(--grc-s5); }
.grc-score--s3  { background: var(--grc-s3); }
.grc-score--lg {
	min-inline-size: 44px;
	padding: 8px 12px;
	font-size: 26px;
	line-height: 30px;
	border-radius: 26px;
}

/* --- rating-block: the capsule with /10 and the tier word ---------------
 * From ↳ Elements / rating-block in the .fig, value for value:
 *   capsule   26px tall, radius 20, fill #181715, 2px band stroke, gap 8,
 *             align centre
 *   number    band-filled inner capsule, radius 20, 2px block padding,
 *             gap 3 between the number and "/10"
 *   n         Outfit Bold 16 / 18, tracking -2%, on #181715
 *   /10       Outfit Regular 10 / 18, tracking 10%, on #181715
 *   word      Outfit Regular 10 / 100%, tracking 10%, white, uppercase
 *
 * This theme only ever had the bare circle (rating-no), so cards, review
 * heroes and the verdict block were showing a number where the design shows
 * a rated verdict. The circle is still right for list rows.
 */
.grc-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-block-size: 26px;
	padding-inline-end: 10px;
	border-radius: 20px;
	background: var(--grc-ink);
	box-shadow: inset 0 0 0 2px currentColor;
	flex-shrink: 0;
	/* currentColor carries the band to the stroke; the text children set their
	   own colours so the band never becomes body text. */
	color: var(--grc-s9);
}
.grc-pill--s10 { color: var(--grc-s10); }
.grc-pill--s9  { color: var(--grc-s9); }
.grc-pill--s7  { color: var(--grc-s7); }
.grc-pill--s5  { color: var(--grc-s5); }
.grc-pill--s3  { color: var(--grc-s3); }

.grc-pill-num {
	display: inline-flex;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	gap: 3px;
	box-sizing: border-box;
	min-inline-size: 41px;
	padding: 2px 6px;
	border-radius: 20px;
	background: currentColor;
}
.grc-pill-n {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 16px;
	line-height: 18px;
	letter-spacing: -0.02em;
	color: var(--grc-ink);
}
.grc-pill-of {
	font-family: var(--grc-font-ui);
	font-weight: 400;
	font-size: 10px;
	line-height: 18px;
	letter-spacing: 0.1em;
	color: var(--grc-ink);
}
.grc-pill-word {
	font-family: var(--grc-font-ui);
	font-weight: 400;
	font-size: 10px;
	line-height: 100%;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grc-surface);
	white-space: nowrap;
}
/* rating-block--large: the same thing at 30px, for a hero. */
.grc-pill--lg {
	min-block-size: 30px;
	gap: 9px;
	padding-inline-end: 12px;
	border-radius: 23px;
}
.grc-pill--lg .grc-pill-num { min-inline-size: 47px; padding: 2px 7px; border-radius: 23px; }
.grc-pill--lg .grc-pill-n  { font-size: 18.46px; line-height: 21px; }
.grc-pill--lg .grc-pill-of { font-size: 11.54px; line-height: 21px; }
.grc-pill--lg .grc-pill-word { font-size: 11.54px; }

/* On a card the pill sits over the still, bottom-left, as on the artboard. */
.grc-pill--onmedia {
	position: absolute;
	inset-inline-start: 8px;
	inset-block-end: 8px;
	z-index: 2;
}

/* --- Card meta: byline then date, as the canvas ------------------------- */
/* Frame1597881490: byline then date, gap 4, both Arial 700 10px at 100%
 * line-height; author on --blue-500, date on --grey-600. */
.grc-card-meta,
.grc-ticker-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px;
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 100%;
}
.grc-byline { font-weight: 700; color: var(--grc-accent); text-decoration: none; }
.grc-byline:hover { color: var(--grc-link-hover); }
.grc-date { color: #666666; font-weight: 700; }

/* Section tab: the canvas's CategoryTag. */
.grc-card-tab {
	font-size: 10px;
	letter-spacing: 0.09em;
	padding: 5px 8px;
	font-weight: 800;
}

@media (max-width: 1100px) {
	.grc-sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.grc-sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.grc-sec-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Lower three-column row --------------------------------------------
 * Same track widths as the top grid: Guides list, More News, placeholders.
 */
.gr-row--lower { margin-block-end: 32px; }
.gr-row--lower .grc-section-title::after { inline-size: min(100%, 200px); }

.grc-listsec { margin-block-end: 8px; }
.grc-listsec .grc-rail-feed { margin-block-end: 16px; }

/* More News: light lead, then two rows of three. */
.grc-morenews .grc-card--lead {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	overflow: hidden;
	background: var(--grc-surface);
	margin-block-end: 12px;
}
.grc-morenews .grc-card--lead .grc-card-body {
	padding: 12px 15px 15px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.grc-morenews .grc-card--lead .grc-card-title {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 25px;
	line-height: 30px;
	letter-spacing: -0.015em;
}
.grc-morenews-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

/* Placeholders for the two modules with no source yet. Deliberately plain, so
 * nobody mistakes them for finished work. */
.grc-placeholder { margin-block-end: 24px; }
.grc-placeholder-body {
	border: 1px dashed var(--grc-border-strong);
	border-radius: 2px;
	padding: 18px 16px;
	background: #fbfbfb;
}
.grc-placeholder-body p {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-size: 13px;
	line-height: 18px;
	color: var(--grc-text-faint);
}

/* The dark strip needs an inverted button. */
.grc-btn--dark {
	border-color: rgba(255, 255, 255, 0.5);
	background: transparent;
	color: var(--grc-surface);
}
.grc-btn--dark:hover,
.grc-btn--dark:focus-visible {
	background: var(--grc-surface);
	color: #1a1a1a;
	border-color: var(--grc-surface);
}

@media (max-width: 1100px) {
	.grc-morenews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grc-morenews .grc-card--lead .grc-card-title { font-size: 21px; line-height: 26px; }
}
@media (max-width: 760px) {
	.grc-grtv-grid,
	.grc-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.grc-grtv-grid,
	.grc-review-grid,
	.grc-morenews-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
 * MOBILE FOUNDATIONS
 *
 * Shared groundwork rather than per-section design: a page gutter, a spacing
 * and type scale for small screens, and touch-sized hit areas. These live on
 * components the other templates reuse, so the article and archive views
 * inherit the same baseline instead of each inventing one.
 *
 * NOTE: the canvas has no mobile frames — one desktop artboard with
 * breakpoints at 1100 and 820. Everything below is derived, not designed.
 * Bespoke mobile treatments (a scroller for the reviews lead, a carousel for
 * Videos) are still open and want real frames.
 * ======================================================================== */

:root {
	/* Page gutter. Applied to the section blocks rather than #main, because the
	 * full-bleed elements (footer, GRTV strip) compute their negative margin
	 * from 50% of #main — padding it would shrink that and stop them reaching
	 * the viewport edge. */
	--grc-gutter: 0px;
}

@media (max-width: 1332px) {
	:root { --grc-gutter: 16px; }
}
@media (max-width: 560px) {
	:root { --grc-gutter: 14px; }
}

/* The blocks that need the gutter. Full-bleed sections are excluded on
 * purpose: they carry their own inline padding already. */
.gr-row,
.gr-row--article,
#main-content > .grc-sec,
#main-content > .grc-reviews,
#main-content > .grc-placeholder,
#main-content > section.rightbox,
#main-content > #entityBasedOnTagColumn,
#main-content > section:not(.grc-grtv) {
	padding-inline: var(--grc-gutter);
	box-sizing: border-box;
}

@media (max-width: 1100px) {
	/* --- Spacing: tighter rhythm on a short viewport -------------------- */
	.grc-sec,
	.grc-reviews,
	.grc-grtv,
	.gr-row--lower { margin-block-end: 26px; }
	.grc-reviews { margin-block-start: 26px; }
	.grc-sec-grid,
	.grc-morenews-grid,
	.grc-review-grid,
	.grc-grtv-grid,
	.grc-feed-row { gap: 10px; }
	.grc-sec-more { margin-block-start: 14px; }

	/* --- Type: the desktop scale is too large at this measure ----------- */
	.grc-section-title,
	.grc-sec-title { font-size: 16px; line-height: 19px; margin-block-end: 13px; }
	.grc-section-title::after { inline-size: min(100%, 180px); }
	.grc-card--hero .grc-card-title { font-size: 21px; line-height: 26px; }
	.grc-card--wide .grc-card-title { font-size: 16px; line-height: 21px; }
	.grc-card--grid .grc-card-title { font-size: 15px; line-height: 20px; }
	.grc-card--hero .grc-card-excerpt { font-size: 14px; line-height: 21px; }
	.grc-card-meta,
	.grc-ticker-meta { font-size: 11px; line-height: 15px; }

	/* --- Touch targets --------------------------------------------------
	 * 44px is the minimum comfortable tap area. The visual sizes stay as
	 * designed; the hit area is grown with padding where it was smaller.
	 */
	.grc-btn {
		min-block-size: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding-inline: 26px;
	}
	.grc-ticker-item { padding: 11px 12px; }
	.grh-burger { inline-size: 44px; block-size: 44px; margin-inline-start: -6px; }
	/* Reserve each tap target in the flex layout so adjacent controls cannot overlap. */
	.grh-search,
	.grh-right .gr-langbtn {
		min-inline-size: 44px;
		block-size: 44px;
		padding: 8px;
		margin: 0;
		justify-content: center;
	}
	.grh-search { inline-size: 44px; }

	#mainfooter ul.socialFooter { gap: 6px; }
	#mainfooter ul.socialFooter a {
		inline-size: 44px;
		block-size: 44px;
		justify-content: center;
	}
	#mainfooter .footercol a { padding-block: 5px; }

	/* The rail feed's rows are links in a list; give them room. */
	.grc-rail-item { padding-block: 14px; }
}

@media (max-width: 560px) {
	/* Single column throughout, so the cards get a usable measure rather than
	 * two 160px columns of two-word lines. */
	.grc-sec-grid,
	.grc-morenews-grid,
	.grc-review-grid,
	.grc-grtv-grid,
	.grc-feed-row--two,
	.grc-feed-row--three { grid-template-columns: minmax(0, 1fr); }

	.grc-ticker-list { grid-template-columns: minmax(0, 1fr); }

	.grc-card--hero .grc-card-title { font-size: 19px; line-height: 24px; }
	.grc-morenews .grc-card--lead .grc-card-title { font-size: 19px; line-height: 24px; }
	.grc-section-title { font-size: 16px; line-height: 19px; }

	/* A full-width card at 375px does not need a 16:9 crop that eats half the
	 * screen; 3:2 keeps more of the list visible per scroll. */
	.grc-card--grid .grc-card-media img,
	.grc-morenews-grid .grc-card-media img { aspect-ratio: 3 / 2; }

	.grc-sec-more { text-align: stretch; }
	.grc-btn { inline-size: 100%; }

	/* The strip's inner padding can come down with the gutter. */
	.grc-grtv { padding-block: 22px 24px; }
}

/* ===========================================================================
 * POST
 *
 * From Post.dc.html. Its measurements are its own and differ from the
 * homepage: a 1132px container, an 800px column beside a 300px rail, 32px gap,
 * collapsing at 1040px. Values below are the canvas's, not derived.
 * ======================================================================== */

.gr-post-wrap {
	/* border-box, and the cap raised by the padding so the CONTENT is still
	 * the canvas's 1132. As content-box with inline-size:100% this was 32px
	 * wider than the viewport on mobile — the white strip down the right and
	 * the feature image overhanging the hero. */
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 1164px;
	margin-inline: auto;
	padding-inline: 16px;
}

/* --- Dark hero ----------------------------------------------------------
 * The feature image overhangs the hero's lower edge by 150px (70px on small
 * screens) and the body's top padding clears the overhang. That is how the
 * canvas builds it: one negative margin, one matching pad.
 */
.gr-post-hero {
	position: relative;
	background: url('../img/bg-hero.svg') center top / cover no-repeat, var(--grc-ink);
	/* Full bleed. The article sits inside #main, a 1300px centred container, so
	 * the hero needs the same escape as the footer: --grc-vw is the viewport
	 * minus the scrollbar, published by child.js. */
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
	padding-block: 8px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: flex-end;
}
/* Kept in the markup for parity with the canvas, but the texture is layered
 * on .gr-post-hero itself so nothing depends on stacking order. */
.gr-post-hero-bg { display: none; }
.gr-post-hero > .gr-post-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* THE WIDTH FIX. This is a flex item carrying margin-inline:auto, and auto
	 * margins in the cross axis make a flex item shrink to its content — it
	 * computed 1061px instead of 1132, so the hero text and feature image sat
	 * narrower than, and offset from, the 800+300 body below. An explicit 100%
	 * (capped by max-inline-size) restores the container width, so hero,
	 * feature, body and rail all line up on every article template. */
	inline-size: 100%;
}

.gr-post-crumbs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	min-block-size: 16px;
	font-family: var(--grc-font-body);
	font-size: 11px;
	line-height: 100%;
	color: var(--grc-text-on-dark);
}
.gr-post-crumbs a { color: inherit; text-decoration: none; }
.gr-post-crumbs a:hover { color: var(--grc-surface); }
/* The canvas's bullet separators, from CSS so the markup stays a link list. */
.gr-post-crumbs > * + *::before {
	content: "\2022";
	margin-inline-end: 5px;
	font-size: 14.3px;
	color: var(--grc-text-on-dark);
}

.gr-post-tag { align-self: flex-start; }

/* #main prefix: the harvested CSS reaches the headline with an id-level
 * selector, so a plain class loses and the H1 came out black on the dark
 * hero. */
#main .gr-post-title,
.gr-post-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-surface);
}

.gr-post-intro {
	margin: 0;
	padding-block: 12px 8px;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text-on-dark);
}

.gr-post-meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-block: 6px 16px;
	font-family: var(--grc-font-body);
	font-size: 14.3px;
	line-height: 100%;
	color: var(--grc-text-on-dark);
}
.gr-post-dot {
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--grc-text-on-dark);
	flex-shrink: 0;
}
.gr-post-author { color: var(--grc-link); text-decoration: none; }
.gr-post-author:hover { color: var(--grc-link-hover); }
.gr-post-score { margin-inline-start: auto; }

.gr-feature {
	inline-size: 100%;
	block-size: 500px;
	overflow: hidden;
	margin-block-end: -150px;
}
.gr-feature img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 41% 50%;
	display: block;
}

.gr-post-below {
	/* 174px clears the feature image, which overhangs the hero's lower edge by
	   150px on the Post artboard. */
	padding-block: 174px 32px;
}
/*
 * A review has no overhanging feature image — its key art is inside the hero,
 * beside the game name — so the clearance is 174px of empty white. The review
 * body starts right under its hero instead.
 */
.gr-post--review .gr-post-below { padding-block-start: 24px; }

/*
 * Same for the video templates, and for the same reason. Their "overhanging
 * image" is the player, which sits in normal flow inside .grc-vid-top — so the
 * 174px was pure surplus and measured as exactly that: the head ended at 699
 * and the body began at 873. That gap is what you were looking at between the
 * player and the headline.
 */
.gr-post--video .gr-post-below { padding-block-start: 24px; }

/* --- Body grid ---------------------------------------------------------- */
.gr-body {
	display: grid;
	grid-template-columns: minmax(0, 800px) 300px;
	gap: 32px;
	align-items: start;
}
.gr-post-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.gr-side { min-width: 0; }
.gr-side-sticky {
	position: sticky;
	inset-block-start: 16px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* --- Prose --------------------------------------------------------------
 * No measure cap here: the canvas sets the column to 800px, which is the
 * measure. Body copy is Arial 16/24, headings Outfit 600 17.6/22.
 */
.gr-article-body {
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
	text-wrap: pretty;
}
.gr-article-body p { margin: 0 0 16px; }
.gr-article-body h2,
.gr-article-body h3,
.gr-article-body h4 {
	font-family: var(--grc-font-ui);
	font-weight: 600;
	color: #000;
	margin: 24px 0 8px;
	letter-spacing: normal;
}
.gr-article-body h2 { font-size: 17.6px; line-height: 22px; }
.gr-article-body h3 { font-size: 16.5px; line-height: 21px; }
.gr-article-body h4 { font-size: 15.5px; line-height: 20px; }
.gr-article-body a { color: var(--grc-link); text-decoration: underline; text-underline-offset: 2px; }
.gr-article-body a:hover { color: var(--grc-link-hover); }
.gr-article-body ul,
.gr-article-body ol { margin: 0 0 16px; padding-inline-start: 22px; }
.gr-article-body li { margin: 0 0 7px; }
.gr-article-body img,
.gr-article-body video,
.gr-article-body iframe { border-radius: 2px; max-width: 100%; height: auto; }
.gr-article-body figure { margin: 0 0 20px; }

/* Body images fill the column.
 *
 * The harvested sources are 650px wide in an 800px column, so they left a
 * ragged 150px of whitespace. functions.php now requests them at 1132 (a
 * downscale from the 1920px master, so genuinely sharper) and these rules let
 * them fill the measure.
 *
 * Scoped to figure.gr-image and images sitting directly in the content, so
 * small inline images inside paragraphs keep their intrinsic size rather than
 * being blown up.
 */
.gr-article-body figure.gr-image,
.gr-article-body figure.gr-image img,
.gr-article-body #page0 > img,
.gr-article-body #page0 > p > img:only-child {
	inline-size: 100%;
	block-size: auto;
	display: block;
}
/* The harvested markup sets width/height attributes and sometimes an inline
 * width on these; both have to give for the above to take effect. */
.gr-article-body figure.gr-image img[width],
.gr-article-body #page0 > img[width] { width: 100% !important; height: auto !important; }
.gr-article-body figure.gr-image figcaption {
	font-family: var(--grc-font-ui);
	font-size: 12px;
	line-height: 17px;
	color: var(--grc-text-faint);
	padding-block-start: 7px;
}
.gr-article-body blockquote {
	margin: 0 0 20px;
	padding: 4px 0 4px 16px;
	border-inline-start: 4px solid var(--grc-accent);
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #000;
}

/* --- Verdict panel ------------------------------------------------------
 * The Game Review artboard's dark panel, replacing the parent's raster badge
 * and <meter>. Score and its written tier sit beside the wordmark and this
 * site's locale; the good and the bad go in a bordered box; the network score
 * runs alongside on a rule of its own.
 *
 * The harvested rule sets .scoreSplit { width: 379px }, which is why the old
 * block sat in a narrow column inside an 800px measure — neutralised here in
 * case any parent markup still reaches this page.
 */
.gr-post-main .scoreSplit,
.gr-post-main .scores { width: auto !important; max-width: 100%; }

.grc-verdict {
	position: relative;
	overflow: hidden;
	background: var(--grc-ink);
	padding: 24px;
	margin-block: 4px 24px;
}
.grc-verdict-bg {
	position: absolute;
	inset: 0;
	background: url('../img/bg-hero.svg') right center / auto 100% no-repeat;
	pointer-events: none;
}
.grc-verdict-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 198px;
	align-items: stretch;
}
.grc-verdict-main {
	min-width: 0;
	padding-inline-end: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.grc-verdict-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* RatingBlockLarge: the number and its word in one pill, banded like the
   score chip so a colour and its word can never disagree. */
.grc-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 2px;
	padding: 4px 10px;
	background: var(--grc-s7);
	color: #181715;
}
.grc-rating--s10 { background: var(--grc-s10); }
.grc-rating--s9  { background: var(--grc-s9); }
.grc-rating--s7  { background: var(--grc-s7); }
.grc-rating--s5  { background: var(--grc-s5); }
.grc-rating--s3  { background: var(--grc-s3); color: #fff; }
.grc-rating-n {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 20px;
	line-height: 22px;
}
.grc-rating-word {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.grc-verdict-brand { display: inline-flex; align-items: center; gap: 6px; }
.grc-verdict-brand img { display: block; inline-size: 172px; block-size: auto; }
.grc-verdict-locale {
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	color: var(--grc-surface);
}

.grc-verdict-cols {
	border: 1px solid #333333;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.grc-verdict-col {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
.grc-verdict-icon { inline-size: 24px; block-size: 24px; display: block; }
/*
 * icon-verdict-like.svg and icon-verdict-dislike.svg are byte-identical — the
 * design set ships one thumb and rotates it, which is why both columns showed
 * a thumbs-up. Rotated here rather than by shipping a second file, and greyed,
 * as the artboard has it: the positives are the accent blue, the negatives a
 * neutral grey so they read as the quieter half.
 */
.grc-verdict-col--good .grc-verdict-icon { filter: none; }
.grc-verdict-col--bad .grc-verdict-icon {
	transform: rotate(180deg);
	filter: grayscale(1) brightness(1.9);
}
.grc-verdict-col p {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 15px;
	line-height: 22.5px;
	color: var(--grc-text-on-dark);
}

/* Network score. */
.grc-network {
	border: 1px solid #333333;
	padding: 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
}
.grc-network-head { display: flex; align-items: center; gap: 12px; }
.grc-network-label { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.grc-network-title {
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 1;
	color: var(--grc-surface);
}
.grc-network-sub {
	font-family: var(--grc-font-body);
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--grc-text-on-dark);
}

/* The rule that closes a review: an accent line with the score in a gap. */
.grc-scorerule {
	position: relative;
	block-size: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block: 8px 24px;
}
.grc-scorerule::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 50%;
	block-size: 1px;
	background: var(--grc-accent);
}
.grc-scorerule-n {
	position: relative;
	background: var(--grc-surface);
	padding-inline: 16px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-accent);
}

/* --- Game attributes (parts/sidebar-gameinfo) --------------------------
 * Same construction as the trust card so the rail reads as one system: a grey
 * band header on the design's --grc-grey-band, then a light body. Typography
 * follows the footer's columns — Outfit, left aligned, generous line height —
 * rather than the harvested box's right-aligned values.
 *
 * The heading is a div rather than an h2 (swapped in article-rail.php), so it
 * does not compete with the article's own heading structure.
 */
.gr-side .gameinfo {
	width: auto !important;
	max-width: 100%;
	margin: 0 0 20px;
	border: 1px solid #e4e4e4;
	/* Square, like the trust card and the footer's columns. Plain, no flag:
	   the 5px came from layout.css's `.border-rounded{border-radius:5px
	   !important}`, and article-rail.php drops that class from the markup. */
	border-radius: 0;
	background: linear-gradient(160deg, #f7f7f7 0%, #ededed 100%);
	overflow: hidden;
	float: none;
	text-align: start !important;
}
.gr-side .gameinfo .gameinfo-head {
	margin: 0;
	padding: 11px 14px;
	background: var(--grc-grey-band);
	border: 0;
	height: auto !important;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: start;
	color: var(--grc-surface);
}
.gr-side .gameinfo .gameinfo-head a { color: inherit; text-decoration: none; }
.gr-side .gameinfo .gameinfo-head a:hover { color: #f0f0f0; }

.gr-side .gameinfo .boxbody { padding: 4px 14px 12px; text-align: start !important; }
.gr-side .gameinfo ul.infobox {
	list-style: none;
	margin: 0;
	padding: 0;
	/*
	 * BOTH of these fight the same harvested rule, and shipping only the
	 * first is what made the box look right-aligned:
	 *
	 *   .gameinfo .boxbody ul.infobox { width: 150px; float: right; }
	 *
	 * That is the original's 2010 layout, where the list floated right of a
	 * 100x132 boxshot floated left. The parent's parts/sidebar-gameinfo.php
	 * renders no boxshot at all -- head, then boxbody, then the list -- so
	 * the float has nothing to sit beside and simply parks the list against
	 * the right edge. Overriding `width` alone made it worse, not better: a
	 * float with `width: auto` shrink-wraps to its content, so the list went
	 * from a 150px column to a 187px one and stayed floated, 97px in from
	 * the panel's left edge. Nothing was ever right-ALIGNED -- every
	 * text-align in the chain computes to `start`; the whole list was in the
	 * wrong place.
	 *
	 * !important on both to match the idiom this block already uses against
	 * the harvested sheets, which match this at equal specificity.
	 */
	width: auto !important;
	float: none !important;
}
.gr-side .gameinfo ul.infobox li {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	width: auto !important;
	margin: 0;
	padding: 9px 0;
	border-block-end: 1px solid rgba(0, 0, 0, 0.07);
	font-family: var(--grc-font-ui);
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	color: var(--grc-text);
	text-align: start !important;
}
.gr-side .gameinfo ul.infobox li:last-child { border-block-end: 0; }
/* Labels take the footer heading's treatment, one step down. */
.gr-side .gameinfo ul.infobox li > span {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 12px;
	line-height: 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--grc-text-muted);
	white-space: nowrap;
	text-align: start !important;
}
.gr-side .gameinfo a { color: var(--grc-link); }
.gr-side .gameinfo a:hover { color: var(--grc-link-hover); }
.gr-side .gameinfo .wholeReviewLink { font-weight: 700; }

/* --- Author box --------------------------------------------------------- */
.gr-authorbox {
	position: relative;
	overflow: hidden;
	background: url('../img/bg-author.svg') center center / cover no-repeat, var(--grc-ink);
	padding: 14px 30px 14px 10px;
	display: flex;
	flex-direction: row;
	gap: 24px;
	align-items: center;
	border-radius: 2px;
}
.gr-authorbox-bg { display: none; }
.gr-authorbox-avatar {
	position: relative;
	inline-size: 140px;
	block-size: 140px;
	border-radius: 100px;
	object-fit: cover;
	flex-shrink: 0;
	display: block;
}
.gr-authorbox-body {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.gr-authorbox-name {
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 26px;
	color: var(--grc-surface);
	text-decoration: none;
}
.gr-authorbox-name:hover { color: #dcdcdc; }
.gr-authorbox-role {
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	color: var(--grc-surface);
	padding-block-start: 4px;
}
.gr-authorbox-bio {
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #e6e6e6;
	padding-block-start: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gr-authorbox-cta {
	align-self: flex-start;
	margin-block-start: 14px;
	border-radius: 2px;
	background: var(--grc-surface);
	padding: 10px 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.04em;
	color: var(--grc-link);
	text-transform: uppercase;
	text-decoration: none;
}
.gr-authorbox-cta:hover { background: #eef6fb; color: var(--grc-link-hover); }

/* Initials, for authors with no picture in their meta. A mystery-man PNG is
   the one thing worse than an empty slot here, and get_avatar() has nothing
   else to give: production's pictures are attachments, not Gravatars. */
.gr-authorbox-monogram {
	display: grid;
	place-items: center;
	background: #2f2d2a;
	color: var(--grc-surface);
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 46px;
	line-height: 1;
	letter-spacing: 0.02em;
	user-select: none;
}
@media (max-width: 767px) {
	.gr-authorbox-monogram { font-size: 32px; }
}

/* The commercial template puts the box between .e-content and Related Guides,
   both of which set their own spacing; without this it butted straight up
   against the last block of the body copy. */
body.gr-commercial-page .gr-authorbox { margin-block-start: 34px; }

/* --- Related ------------------------------------------------------------
 * The canvas's related card has a 128px image, so it overrides the shared
 * card's 16:9 crop.
 */
.gr-related .grc-card-media img { aspect-ratio: auto; block-size: 128px; }
.gr-related .grc-card-title { font-family: var(--grc-font-ui); font-weight: 600; font-size: 16px; line-height: 19px; }

/* --- Popular This Week (rail) ------------------------------------------ */
.grc-poplist-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	counter-reset: grc-pop;
}
.grc-poplist-items li {
	counter-increment: grc-pop;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 2px 10px;
	padding: 9px 10px;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
}
/* Popular's rank numeral is Poppins 800 18/18 with -0.02em tracking. Poppins
 * is not in the design bundle and is not self-hosted here, so Outfit 800
 * stands in — closest available, and one font fewer to ship. Flagged. */
.grc-poplist-items li::before {
	content: counter(grc-pop);
	grid-row: span 2;
	align-self: start;
	font-family: var(--grc-font-ui);
	font-weight: 800;
	font-size: 18px;
	line-height: 18px;
	letter-spacing: -0.02em;
	color: var(--grc-accent);
	font-variant-numeric: tabular-nums;
}
.grc-poplist-link {
	font-family: var(--grc-font-title);
	font-weight: 700;
	font-size: 14px;
	line-height: 19px;
	color: #1a1a1a;
	text-decoration: none;
}
.grc-poplist-items li:hover .grc-poplist-link { color: var(--grc-link); }
.grc-poplist-items .grc-byline { font-size: 11px; }

/* --- Collapse: the canvas's own 1040px ---------------------------------- */
@media (max-width: 1040px) {
	.gr-body { grid-template-columns: minmax(0, 1fr); }
	.gr-side { max-inline-size: 520px; }
	.gr-side-sticky { position: static; }
}

@media (max-width: 760px) {
	.gr-feature { block-size: 300px; margin-block-end: -70px; }
	.gr-post-below { padding-block: 94px 26px; }
	.gr-post--review .gr-post-below { padding-block-start: 20px; }
	/* #main here too. The base rule is `#main .gr-post-title, .gr-post-title`,
	   so a bare class in a media query loses to it on specificity and this step
	   never applied — the article and guide headlines stayed at 34px on a 375px
	   screen while every other template stepped to 26. */
	#main .gr-post-title,
	.gr-post-title { font-size: 26px; line-height: 30px; }
	.gr-post-intro { font-size: 15px; line-height: 23px; }
	.gr-post-meta { gap: 8px; font-size: 13px; }
	.gr-post-score { margin-inline-start: 0; }

	.gr-authorbox {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
		gap: 14px;
	}
	.gr-authorbox-avatar { inline-size: 96px; block-size: 96px; }
	.gr-article-body blockquote { font-size: 18px; line-height: 25px; }
	.grc-verdict-cols { grid-template-columns: minmax(0, 1fr); }
}

/* --- Post: no white band under the header ------------------------------
 * #main carries a harvested padding-top:15px. On every other template that
 * is fine, but the post hero is full-bleed dark and starts immediately, so
 * the padding showed as a white strip between the header and the hero.
 */
/*
 * The harvested #main { padding-top: 15px } leaves a white strip between the
 * header and any template that opens with a dark band. Every one of those is
 * listed here rather than zeroing the padding globally, which would move the
 * archive and search templates up against the header too.
 */
#main:has(.gr-post),
#main:has(.grc-rev-hero),
#main:has(.grc-gh),
#main:has(.grc-doc-hero) { padding-block-start: 0; }

/* --- Pagination --------------------------------------------------------
 * The canvas's row: square cells, current page on the blue tint, chevrons
 * for prev/next. Replaces the parent's bare links (whose prev/next labels
 * were hardcoded Korean).
 */
.grc-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding-block-start: 8px;
}
.grc-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 38px;
	min-block-size: 38px;
	padding-inline: 8px;
	box-sizing: border-box;
	border: 1px solid var(--grc-border);
	border-radius: 2px;
	background: var(--grc-surface);
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	color: #1a1a1a;
	text-decoration: none;
	transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.grc-page:hover,
.grc-page:focus-visible {
	border-color: var(--grc-accent);
	color: var(--grc-accent);
	text-decoration: none;
}
.grc-page--current {
	background: var(--grc-accent-tint);
	border-color: var(--grc-accent);
	color: var(--grc-accent);
}
.grc-page--gap {
	border: 0;
	background: none;
	min-inline-size: 18px;
	color: var(--grc-text-faint);
}
.grc-page--arrow { color: var(--grc-text-muted); }
.grc-page--arrow svg { display: block; }

@media (max-width: 560px) {
	.grc-page { min-inline-size: 42px; min-block-size: 42px; }
}

/* --- Breadcrumb section crumb = the category chip ----------------------
 * The canvas draws a breadcrumb AND a separate CategoryTag, which names the
 * section twice in adjacent lines. The section crumb carries the chip
 * treatment instead: one element doing both jobs.
 *
 * The schema is unaffected either way — inc/schema.php emits its own
 * BreadcrumbList as JSON-LD, independent of this markup, and it already
 * matches these three items. (Which is also why breadcrumbs should NOT be
 * switched to Yoast: that would emit a second, duplicate BreadcrumbList.)
 */
.gr-post-crumbs .gr-crumb-section {
	display: inline-flex;
	align-items: center;
	block-size: 16px;
	box-sizing: content-box;
	padding: 5px 8px;
	background: var(--grc-accent);
	color: var(--grc-surface);
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 100%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
}
.gr-post-crumbs .gr-crumb-section:hover {
	background: var(--grc-link-hover);
	color: var(--grc-surface);
}
/* No bullet either side of the chip — it reads as its own object. */
.gr-post-crumbs .gr-crumb-section::before,
.gr-post-crumbs .gr-crumb-section + *::before { content: none; margin-inline-end: 0; }

/* --- Full-bleed only where it is needed --------------------------------
 * Above 1332px, .main is a fixed 1300px centred container, so the dark bands
 * escape it with a negative margin sized from --grc-vw (published by
 * child.js). At or below 1332px, .main is already 100% wide — there is
 * nothing to escape, so the bleed is switched off entirely.
 *
 * That also removes the JS dependency at small sizes: if --grc-vw is missing
 * or stale, mobile is unaffected, which is where a wrong value hurts most.
 */
@media (max-width: 1332px) {
	.gr-post-hero,
	.grc-rev-hero,
	.grc-doc-hero,
	#mainfooter,
	.grc-grtv,
	#main-content > section.rightbox:has(.grtvrr) {
		inline-size: auto !important;
		margin-inline: 0 !important;
	}
	#mainfooter,
	.grc-grtv,
	#main-content > section.rightbox:has(.grtvrr) {
		padding-inline: var(--grc-gutter) !important;
	}
}

/* ── Ported from refresh.css: mobile overflow fixes ────────────────────────
 * These are NOT design decisions — they are two bugs found in QA against the
 * live site, and they must survive the refresh layer being replaced.
 *
 * 1) The harvested rule gives .colwide both width:inherit (= viewport width)
 *    AND margin:0 2%. Together that is 8px wider than the screen, so the page
 *    scrolls horizontally. Live has 0px overflow; so should we.
 * 2) The video belts sit DIRECTLY in #main, not in .colwide, and set an
 *    explicit width plus an inline-start margin to break out of the narrow
 *    sidebar column. In the main column on mobile that overhangs by 8px.
 */
@media (max-width: 767px) {
	.colwide {
		width: auto !important;
	}

	#main-content > .rightbox,
	#main-content > .rightbox .rbreakout,
	#main-content > .rightbox .contentrr {
		width: auto !important;
		max-width: none !important;
	}
}

/* ===========================================================================
 * TEMPLATE LAYER — Category, Search, Author, Page, Review, Guide
 *
 * Everything from here down serves the V2 artboards other than Homepage and
 * Post. They share one skeleton, so the skeleton is written once: a 1132px
 * wrap (1164 including its 16px gutter, matching the article template), a main
 * column beside a 300px rail with a 32px gap, and a common set of pieces — tab
 * strip, list row, vertical card, empty state.
 *
 * Type roles are the set already in use: Outfit for headings, tabs, titles and
 * anything set in caps; Arial for prose, meta and bylines.
 * ======================================================================== */

.grc-wrap {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 1164px;
	margin-inline: auto;
	padding-inline: 16px;
}
/* The Default Page artboard runs a narrower measure than the rest. */
.grc-wrap--page { max-inline-size: 1032px; }

.grc-arch { padding-block: 8px 32px; }
.grc-arch-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
}
.grc-arch-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.grc-arch-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-ink);
}
/* The harvested sheets style h1 at id level in places; this is scoped the same
   way so the archive heading is not out-specified on its own page. */
#main .grc-arch-title { color: var(--grc-ink); }

.grc-arch-head { display: flex; flex-direction: column; gap: 4px; }
.grc-arch-count {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: #666666;
}
.grc-arch-desc {
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}
.grc-arch-desc p { margin: 0 0 12px; }

/* --- Tab strip ---------------------------------------------------------- */
.grc-tabs {
	display: flex;
	flex-wrap: wrap;
	border-block-end: 1px solid #eeeeee;
}
.grc-tab {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding: 10px 16px;
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
	font-family: var(--grc-font-ui);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #666666;
	text-decoration: none;
	white-space: nowrap;
}
.grc-tab:hover { color: var(--grc-ink); }
.grc-tab.is-active {
	font-weight: 700;
	color: var(--grc-ink);
	border-block-end-color: var(--grc-accent);
}

.grc-tabsrow {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-end;
	border-block-end: 1px solid #eeeeee;
}
.grc-tabsrow .grc-tabs { border-block-end: 0; }
.grc-sort { display: flex; align-items: center; gap: 12px; padding-block-end: 10px; }
.grc-sort-label {
	font-family: var(--grc-font-ui);
	font-size: 13px;
	line-height: 14px;
	color: #888888;
}
.grc-sort-opt {
	font-family: var(--grc-font-ui);
	font-weight: 400;
	font-size: 13px;
	line-height: 14px;
	color: #666666;
	text-decoration: none;
	border-block-end: 2px solid transparent;
	padding-block-end: 2px;
}
.grc-sort-opt.is-active { font-weight: 700; color: var(--grc-ink); border-block-end-color: #34b2e9; }

/* --- List row (the artboard's Frame 1000001707) ------------------------- */
.grc-rows { display: flex; flex-direction: column; gap: 12px; }
/*
 * #main-scoped ON PURPOSE. layout.css carries `.main.text_view article
 * { display: block }` — three parts of specificity against this rule's one —
 * so on any article page the row lost its grid and stacked: full-width image,
 * then the text, then the score as a full-width bar. That is what the Related
 * news list was doing. The id prefix puts these out of reach of anything the
 * harvested sheets can say about a bare `article`.
 */
#main .grc-row,
.grc-row {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	border-block-end: 1px solid #eeeeee;
	padding-block-end: 12px;
}
#main .grc-row--notext,
.grc-row--notext { grid-template-columns: minmax(0, 1fr) auto; }
.grc-row-media {
	display: block;
	line-height: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--grc-page);
}
.grc-row-media img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.grc-row:hover .grc-row-media img { transform: scale(1.04); }

.grc-row-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.grc-row-tag {
	align-self: flex-start;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--grc-accent);
	text-decoration: none;
}
.grc-row-tag:hover { color: var(--grc-link); }
.grc-row-title {
	margin: 0;
	font-family: var(--grc-font-title);
	font-weight: 600;
	font-size: 18px;
	line-height: 23px;
	color: var(--grc-ink);
}
.grc-row-title a { color: inherit; text-decoration: none; }
.grc-row-title a:hover { color: var(--grc-link); }
.grc-row-meta {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--grc-font-body);
	font-size: 13px;
	line-height: 18px;
	color: #666666;
}
.grc-row-author { color: var(--grc-link); text-decoration: none; }
.grc-row-author:hover { color: var(--grc-link-hover); }
.grc-row-dot {
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .6;
	flex-shrink: 0;
	display: inline-block;
}

/*
 * The score on a list row is the same RatingNo chip as everywhere else; it
 * only needs to stop being stretched by the grid. The "/10 + tier word" badge
 * that used to live here is gone — see parts/home-feed-card.php for why one
 * inline score treatment beats two.
 */
.grc-row-score { align-self: center; justify-self: end; }

/* --- Vertical card (ArticleCard3), used in the rails -------------------- */
.grc-rail-block { display: flex; flex-direction: column; gap: 12px; }
.grc-rail-block + .grc-rail-block { margin-block-start: 20px; }
.grc-rail-cards { display: flex; flex-direction: column; gap: 12px; }
/* Same reason as .grc-row: the vertical card is an <article> too. */
#main .grc-vcard,
.grc-vcard { display: block; min-width: 0; }
.grc-vcard > a { display: block; text-decoration: none; }
.grc-vcard-media {
	display: block;
	line-height: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--grc-page);
}
.grc-vcard-media img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.grc-vcard > a:hover .grc-vcard-media img { transform: scale(1.04); }
.grc-vcard-title {
	display: block;
	margin-block-start: 8px;
	font-family: var(--grc-font-title);
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	color: var(--grc-ink);
}
.grc-vcard > a:hover .grc-vcard-title { color: var(--grc-link); }
.grc-vcard-meta {
	margin: 4px 0 0;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--grc-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #666666;
}

/* --- Empty state and chips ---------------------------------------------- */
.grc-empty {
	border: 1px solid #eeeeee;
	background: #fafafa;
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.grc-empty-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 20px;
	line-height: 26px;
	color: var(--grc-ink);
}
.grc-empty-body {
	margin: 0;
	max-inline-size: 52ch;
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 22px;
	color: #666666;
}
.grc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-block-start: 8px; }
.grc-chip {
	border: 1px solid #dddddd;
	background: var(--grc-surface);
	padding: 7px 12px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 13px;
	line-height: 14px;
	color: var(--grc-ink);
	text-decoration: none;
	white-space: nowrap;
}
a.grc-chip:hover { border-color: var(--grc-ink); color: var(--grc-ink); }

/* --- Visually-hidden utility --------------------------------------------
 * .gr-sr-only was introduced by the main theme's accessibility pass — it
 * replaced aria-hidden="true" on card media links with a visually-hidden
 * copy of the title, so the link has an accessible name instead of none.
 *
 * The class had no rule anywhere: not in child.css, not in refresh.css,
 * frontend.css, layout.css, editorial.css or sponsorship.css. Grepped, all
 * six. An unstyled span renders as ordinary text, so every card carrying it
 * printed its own headline twice — once in the body, once over the artwork.
 *
 * Defined here rather than in the parent because the child is what loads on
 * all 22 child-active sites; the parent's own parts/review-score.php uses it
 * too and picks this up for free. The clip-path pair is the standard
 * technique: readable by assistive tech, zero layout, and not
 * display:none (which removes it from the accessibility tree as well).
 * ------------------------------------------------------------------------ */
.gr-sr-only {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; white-space: nowrap;
	clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* --- Breadcrumbs -------------------------------------------------------- */
.grc-crumbs {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	font-family: var(--grc-font-body);
	font-size: 11px;
	line-height: 1;
	color: #888888;
}
.grc-crumbs a { color: inherit; text-decoration: none; }
.grc-crumbs a:hover { color: var(--grc-ink); }
.grc-crumbs--dark { color: var(--grc-text-on-dark); }
.grc-crumbs--dark a:hover { color: var(--grc-surface); }
.grc-crumb-current { color: #888888; }

/* Section title, shared with the rails and the author posts list. */
.grc-sec-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	/* Same 17.6 as .grc-section-title — see the note there. */
	font-size: 17.6px;
	line-height: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--grc-ink);
	border-block-end: 2px solid var(--grc-accent);
	padding-block-end: 6px;
}

/* --- Search panel ------------------------------------------------------- */
.grc-searchpanel {
	box-sizing: border-box;
	background: #eeeeee;
	padding: 16px;
}
.grc-searchform { display: flex; gap: 10px; align-items: stretch; }
.grc-searchfield {
	flex-grow: 1;
	min-width: 0;
	box-sizing: border-box;
	block-size: 54px;
	border-radius: 8px;
	background: var(--grc-surface);
	box-shadow: inset 0 0 0 1px #dddddd;
	padding: 15px 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.grc-searchicon { display: block; flex-shrink: 0; color: #888888; line-height: 0; }
.grc-q {
	flex-grow: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0;
	font-family: var(--grc-font-ui);
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	color: var(--grc-ink);
	-webkit-appearance: none;
	appearance: none;
}
.grc-q::placeholder { color: #888888; }
.grc-q:focus { outline: none; }
.grc-searchfield:focus-within { box-shadow: inset 0 0 0 2px var(--grc-link); }
.grc-searchbtn {
	flex-shrink: 0;
	inline-size: 125px;
	border: 0;
	cursor: pointer;
	border-radius: 4px;
	background: var(--grc-link);
	padding: 12px 24px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--grc-surface);
	text-transform: uppercase;
}
.grc-searchbtn:hover { background: #009ece; }

/* --- Author ------------------------------------------------------------- */
.grc-author { gap: 24px; }
.grc-authorcard {
	position: relative;
	overflow: hidden;
	background: #000000;
	border: 1px solid #666666;
	box-sizing: border-box;
	padding: 24px;
}
.grc-authorcard-bg {
	position: absolute;
	inset: 0;
	background: url('../img/bg-hero.svg') right center / auto 100% no-repeat;
	pointer-events: none;
}
.grc-authorcard-inner {
	position: relative;
	display: flex;
	gap: 24px;
	align-items: flex-start;
}
.grc-authorcard-portrait {
	inline-size: 200px;
	block-size: 200px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	background: #111111;
}
.grc-authorcard-portrait img,
.grc-authorcard-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
/* The monogram shares this class so it inherits the circle and the sizing, but
   it needs the grid back — .grc-authorcard-img's display:block is declared
   after .gr-authorbox-monogram's display:grid and would otherwise win, leaving
   the initials sitting at the top-left of the circle. */
.grc-authorcard-img.gr-authorbox-monogram {
	display: grid;
	place-items: center;
	font-size: 96px;
	border-radius: 50%;
}
@media (max-width: 767px) {
	.grc-authorcard-img.gr-authorbox-monogram { font-size: 64px; }
}
.grc-authorcard-text {
	flex-grow: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.grc-authorcard-id { display: flex; flex-direction: column; gap: 8px; }
.grc-authorcard-name {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-surface);
}
#main .grc-authorcard-name { color: var(--grc-surface); }
.grc-authorcard-role {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	color: var(--grc-surface);
}
.grc-authorfacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.grc-authorfacts li {
	display: flex;
	gap: 8px;
	align-items: center;
	min-block-size: 20px;
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 20px;
	color: var(--grc-surface);
}
.grc-authorfact-icon { inline-size: 16px; block-size: 16px; flex-shrink: 0; line-height: 0; color: var(--grc-text-on-dark); }

.grc-authorbio {
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}
.grc-authorbio p { margin: 0 0 12px; }
.grc-authorbio p:last-child { margin-block-end: 0; }

.grc-panels { display: flex; flex-direction: column; gap: 8px; }
.grc-panels-row { display: flex; gap: 8px; align-items: flex-start; }
.grc-panel {
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.grc-panel--games { background: linear-gradient(62.828deg, #f0fbff 6.23%, #d4f3ff 99.4%); }
.grc-panel--films { background: linear-gradient(242.859deg, #ffdfeb 0%, #f0fbff 100%); }
.grc-panel--word  { background: linear-gradient(84.082deg, #f0fbff 0%, #dee0ed 99.92%); }
.grc-panel-title {
	margin: 0;
	padding-block: 4px 8px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	color: var(--grc-ink);
}
.grc-panel-list {
	list-style: decimal;
	margin: 0;
	padding-inline-start: 20px;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}
.grc-panel-line {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}
.grc-authorposts { display: flex; flex-direction: column; gap: 16px; }

/* --- Default page -------------------------------------------------------
 * NAMED grc-doc, NOT grc-page.
 *
 * .grc-page was already taken: it is the pagination CELL, and has been since
 * the homepage round. Reusing it for this template's wrapper handed the
 * <article> `display: inline-flex` and a shrink-to-fit width, so the hero and
 * the body became flex items side by side — the hero ended up 905px wide,
 * 9,332px down the page, and the prose squeezed into 503px. It looked like a
 * layout bug in the harvested CSS and was entirely self-inflicted.
 *
 * The wrapper's display is stated explicitly so a bare `article` rule in the
 * harvested sheets cannot do the same thing from the other direction.
 */
.grc-doc { display: block; }
.grc-doc-hero {
	position: relative;
	overflow: hidden;
	background: var(--grc-ink);
	box-sizing: border-box;
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
	padding-block: 32px;
	margin-block-end: 24px;
}
.grc-doc-hero-bg {
	position: absolute;
	inset: 0;
	background: url('../img/bg-hero.svg') right center / auto 100% no-repeat;
	pointer-events: none;
}
.grc-doc-hero .grc-wrap { position: relative; }
.grc-doc-head {
	max-inline-size: 800px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.grc-doc-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	text-align: center;
	color: var(--grc-surface);
}
#main .grc-doc-title { color: var(--grc-surface); }
.grc-doc-intro {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: var(--grc-text-on-dark);
}
.grc-doc-body { padding-block-end: 32px; }
.grc-doc-measure {
	max-inline-size: 800px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.grc-doc-feature { margin: 0; block-size: 450px; overflow: hidden; }
.grc-doc-feature img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* Prose scale, shared by the page and guide bodies. */
.grc-prose { font-family: var(--grc-font-body); font-size: 16px; line-height: 24px; color: var(--grc-text); }
.grc-prose p { margin: 0 0 16px; text-wrap: pretty; }
.grc-prose h2 {
	margin: 24px 0 0;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 17.6px;
	line-height: 22px;
	color: var(--grc-ink);
}
.grc-prose h3 {
	margin: 20px 0 0;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: var(--grc-ink);
}
.grc-prose h2 + p, .grc-prose h3 + p { margin-block-start: 16px; }
.grc-prose img { max-inline-size: 100%; block-size: auto; }

/* --- Review hero -------------------------------------------------------- */
.grc-rev-hero {
	position: relative;
	overflow: hidden;
	background: var(--grc-ink);
	box-sizing: border-box;
	/* Full bleed, same mechanism as .gr-post-hero and the footer: --grc-vw is
	   documentElement.clientWidth (the viewport MINUS the scrollbar), so the
	   band reaches both edges without the 100vw overflow. Switched off below
	   1332px in the block that already handles the other bands. */
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
	padding-block: 16px 20px;
	margin-block-end: 24px;
}
/*
 * THE BAND TEXTURE.
 *
 * bg-hero.svg is 1905x613 and is NOT a tile: it is a flat #181715 field with
 * a cluster of diagonal gradient stripes between x=1096 and x=2038 — i.e. a
 * graphic designed to sit at the RIGHT EDGE of a wide band.
 *
 * `center / cover` was wrong for it. On a band 180-430px tall the aspect
 * mismatch (3.1 vs 8+) makes cover scale to fill the height, magnifying the
 * art three to four times and showing one enormous diagonal wedge through the
 * middle — which is what "broken hero" looked like. It also rescales with
 * every change in width, so the video belt appeared to shift under zoom.
 *
 * `right center / auto 100%` fits the art to the band's height at its own
 * aspect and anchors it where it was drawn to sit. The flat ink underneath
 * covers everything to its left, so the band is complete at any width, and
 * the art no longer moves when the viewport does.
 */
.grc-rev-hero-bg {
	position: absolute;
	inset: 0;
	background: url('../img/bg-hero.svg') right center / auto 100% no-repeat;
	pointer-events: none;
}
.grc-rev-hero-inner { position: relative; display: flex; flex-direction: column; gap: 10px; }
.grc-rev-head { display: flex; gap: 24px; align-items: flex-start; }
.grc-rev-cover {
	inline-size: 312px;
	block-size: 180px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 2px;
	background: #111111;
}
.grc-rev-cover img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}
.grc-rev-headtext { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* CategoryTag. */
.grc-tag {
	align-self: flex-start;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--grc-accent);
	text-decoration: none;
}
.grc-tag:hover { color: #4a9ee8; }

.grc-rev-game {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-surface);
}
.grc-rev-game a { color: inherit; text-decoration: none; }
.grc-rev-game a:hover { color: #cfe3f5; }

.grc-rev-tested {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 1;
	color: var(--grc-text-on-dark);
}
.grc-rev-check { inline-size: 20px; block-size: 20px; flex-shrink: 0; line-height: 0; color: var(--grc-accent); }

.grc-rev-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.grc-chip--platform {
	border: 1px solid #444444;
	background: transparent;
	padding: 5px 8px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 11px;
	line-height: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--grc-surface);
	white-space: nowrap;
}
.grc-rev-facts {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 1;
	color: var(--grc-text-on-dark);
}
.grc-rev-facts .grc-row-dot:last-child { display: none; }

/* --- Review headline block ---------------------------------------------- */
.grc-rev-headline { display: flex; flex-direction: column; margin-block-end: 4px; }
.grc-rev-headline-main {
	border: 1px solid #eeeeee;
	border-block-end: 0;
	box-sizing: border-box;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.grc-rev-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-ink);
}
/*
 * Size and leading belong in the #main-prefixed rule, not just the colour.
 * With them in the bare .grc-rev-title rule, a harvested #main-level em rule
 * won the font-size and this one won the line-height — so the review headline
 * came out 36.4px on desktop, and 35.75px text on a 30px line on mobile, which
 * is text overlapping its own next line. Measured, not guessed.
 */
#main .grc-rev-title {
	color: var(--grc-ink);
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
}
.grc-rev-standfirst {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}
.grc-rev-headline-meta {
	border: 1px solid #eeeeee;
	box-sizing: border-box;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 1;
	color: #666666;
}
.grc-rev-author { color: var(--grc-link); text-decoration: none; }
.grc-rev-author:hover { color: var(--grc-link-hover); }
.grc-rev-role { color: #666666; }

/* --- game-list: the one game row --------------------------------------
 * REBUILT to the component. What was here was a title over a platform string
 * -- no cover, no score -- while the .fig's `game-list` SYMBOL is:
 *
 *   300x72, AL:HORIZONTAL gap12, stroke #eeeeee@1 (the row rule)
 *     cover      103x60 r2, IMAGE fill
 *     rank       12x21 pad-inline 3, #bbbbbb, ExtraBold 18/18 ls -2%
 *     content    AL:VERTICAL gap4, centred
 *                  title      Plus Jakarta Sans Bold 14/19 #181715
 *                  platforms  Arial Bold 10/100%           #888888
 *     rating-no  27x27 r20 (.grc-score)
 *
 * The rank numeral is drawn in Poppins ExtraBold in the design. Poppins is
 * nowhere else in the design or on the site, so it is set in Outfit at 800 --
 * same geometric-sans register, and already the UI face. See the note in
 * parts/game-list-row.php.
 *
 * Flex, not grid: the cover and the rank are each optional (a game with no
 * boxshot, a list with no ranking), and a flex row absorbs a missing child
 * where a fixed grid would leave its column standing. The three fixed
 * children don't shrink and the content column does, with min-inline-size: 0
 * so the clamp below can actually clamp -- which is what keeps a long game
 * name from pushing the score chip out of the 300px rail.
 */
.grc-gamelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.grc-gamelist-item { border-block-end: 1px solid var(--grc-border); padding-block-end: 10px; }
.grc-gamelist-item:last-child { border-block-end: 0; padding-block-end: 0; }
.grc-gamelist-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	min-block-size: 60px;
}
.grc-gamelist-shot {
	display: block;
	flex: 0 0 103px;
	inline-size: 103px;
	block-size: 60px;
	border-radius: 2px;
	overflow: hidden;
	background: var(--grc-page);
}
.grc-gamelist-shot img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}
.grc-gamelist-link:hover .grc-gamelist-shot img { transform: scale(1.04); }

.grc-gamelist-rank {
	font-family: var(--grc-font-ui);
	font-weight: 800;
	font-size: 18px;
	line-height: 18px;
	letter-spacing: -0.02em;
	color: #bbbbbb; /* the component's own value; no token for it */
	padding-inline: 3px;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.grc-gamelist-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-inline-size: 0;
}
.grc-gamelist-name {
	font-family: var(--grc-font-title);
	font-weight: 700;
	font-size: 14px;
	line-height: 19px;
	color: var(--grc-ink);
	/* Two lines, then ellipsis — a 146px column and some very long game names. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.grc-gamelist-link:hover .grc-gamelist-name { color: var(--grc-link); }
.grc-gamelist-sys {
	display: block;
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	color: var(--grc-text-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.grc-gamelist-score { align-self: center; }

/* Deep links to a heading should not land under the sticky header. (The
   guide table of contents that first needed this is gone; the ids and the
   scroll offset stay, so /article/#section still lands correctly.) */
.gr-article-body h2[id],
.gr-article-body h3[id],
.grc-prose h2[id],
.grc-prose h3[id] { scroll-margin-block-start: 76px; }

/* --- FAQ accordion ------------------------------------------------------
 * Progressive: the markup is a plain <div class="gr-faq"> of h3 questions and
 * their answers, readable with JS off. child.js turns each heading into a
 * button and hides the answers only once it has run.
 */
.grc-faq { display: flex; flex-direction: column; gap: 8px; }
.grc-faq-item { border: 1px solid #eeeeee; }
.grc-faq-head { margin: 0; font-size: inherit; font-weight: inherit; }
.grc-faq-q {
	inline-size: 100%;
	box-sizing: border-box;
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	border: 0;
	background: transparent;
	text-align: start;
	padding: 14px 16px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: var(--grc-ink);
}
.grc-faq-q:hover { background: #f8f8f8; }
.grc-faq-mark {
	flex-shrink: 0;
	inline-size: 14px;
	block-size: 14px;
	background:
		linear-gradient(var(--grc-link), var(--grc-link)) center / 14px 2px no-repeat,
		linear-gradient(var(--grc-link), var(--grc-link)) center / 2px 14px no-repeat;
}
.grc-faq-q[aria-expanded="true"] .grc-faq-mark {
	background: linear-gradient(var(--grc-link), var(--grc-link)) center / 14px 2px no-repeat;
}
.grc-faq-a { padding: 0 16px 16px; }
.grc-faq-a p {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}

/* --- Template layer: responsive -----------------------------------------
 * The artboards carry their own breakpoints and these follow them: 1040 for
 * the two-column collapse, 900 for the verdict panel, 760 for the review head
 * and 720 for the author panels. Below those the treatments are derived, not
 * designed — the same caveat as the rest of the mobile work.
 */
@media (max-width: 1040px) {
	.grc-arch-grid { grid-template-columns: minmax(0, 1fr); }
	.grc-arch-grid > .gr-side { max-inline-size: 520px; inline-size: 100%; }
}

@media (max-width: 900px) {
	.grc-verdict-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.grc-verdict-main { padding-inline-end: 0; }
	.grc-network { inline-size: 100%; padding: 16px 20px; }
}

@media (max-width: 760px) {
	.grc-rev-head { flex-direction: column; }
	.grc-rev-cover { inline-size: 100%; block-size: auto; aspect-ratio: 312 / 180; }
	.grc-rev-game { font-size: 26px; line-height: 30px; }
	#main .grc-rev-title,
	.grc-rev-title { font-size: 26px; line-height: 30px; }
	.grc-arch-title,
	.grc-doc-title,
	.grc-authorcard-name { font-size: 26px; line-height: 30px; }
	.grc-doc-feature { block-size: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
	.grc-panels-row { flex-direction: column; }
	.grc-authorcard-inner { flex-direction: column; align-items: center; text-align: center; }
	.grc-authorcard-portrait { inline-size: 140px; block-size: 140px; }
	.grc-authorfacts li { justify-content: center; }
	.grc-authorcard-text { align-items: center; }
	.grc-authorcard-id { align-items: center; }
}

@media (max-width: 620px) {
	/*
	 * The list row goes to two columns: media above the text is a worse read
	 * at this width than media beside it, so the thumbnail narrows instead and
	 * the score badge moves under the meta line.
	 */
	#main .grc-row,
	.grc-row {
		grid-template-columns: 116px minmax(0, 1fr);
		grid-template-areas: "media body" "media score";
		align-items: start;
		gap: 12px;
	}
	#main .grc-row--notext,
	.grc-row--notext { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "score"; }
	.grc-row-media { grid-area: media; }
	.grc-row-body { grid-area: body; }
	.grc-row-score { grid-area: score; justify-self: start; min-inline-size: 0; }
	.grc-row-title { font-size: 16px; line-height: 21px; }

	.grc-searchform { flex-wrap: wrap; }
	.grc-searchbtn { inline-size: 100%; }

	.grc-tabsrow { align-items: flex-start; }
	.grc-tab { padding-inline: 12px; }

	.grc-verdict { padding: 18px 16px; }
	.grc-empty { padding: 28px 20px; }
	.grc-doc-hero { padding-block: 24px; }
}

/*
 * The tab strip is the one place a horizontal scroller is right on a phone:
 * six sections will not wrap into anything readable, and cutting the list
 * would hide sections from the reader.
 */
@media (max-width: 560px) {
	.grc-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.grc-tabs::-webkit-scrollbar { display: none; }
	.grc-tab { flex-shrink: 0; }
}

/* --- Tables in body copy ------------------------------------------------
 * From the Guide artboard's payment-methods table, which is the only table the
 * design specifies: a dark header band in Outfit caps over Arial body cells,
 * hairline rules, no outer radius.
 *
 * Scoped to the prose containers rather than to a block class, so it catches
 * a core `wp-block-table`, a classic-editor `<table>` and the harvested markup
 * with one set of rules. The block editor's own alignment and caption classes
 * are left alone — only the table's skin is ours.
 *
 * The wrapper scrolls rather than the page: a five-column comparison table
 * will not fit an 800px measure on a phone, and horizontal page scroll is the
 * bug this project has been bitten by most.
 */
.gr-article-body :is(figure.wp-block-table, .wp-block-table),
.grc-prose :is(figure.wp-block-table, .wp-block-table),
.e-content :is(figure.wp-block-table, .wp-block-table) {
	margin: 0 0 20px;
	max-inline-size: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.gr-article-body table,
.grc-prose table,
.e-content table {
	inline-size: 100%;
	border-collapse: collapse;
	border: 1px solid var(--grc-border);
	background: var(--grc-surface);
	font-family: var(--grc-font-body);
	/* A table narrower than this stops being readable before it stops being a
	   table; below it the wrapper scrolls instead of the cells crushing. */
	min-inline-size: 520px;
}
.gr-article-body table:not(.wp-block-table),
.grc-prose table:not(.wp-block-table),
.e-content table:not(.wp-block-table) { margin-block-end: 20px; }

.gr-article-body :is(thead, tfoot) :is(th, td),
.grc-prose :is(thead, tfoot) :is(th, td),
.e-content :is(thead, tfoot) :is(th, td) {
	background: var(--grc-ink);
	padding: 10px 12px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--grc-surface);
	text-align: start;
	vertical-align: middle;
	border: 0;
}
.gr-article-body :is(thead, tfoot) a,
.grc-prose :is(thead, tfoot) a,
.e-content :is(thead, tfoot) a { color: var(--grc-surface); text-decoration: underline; }

.gr-article-body tbody :is(th, td),
.grc-prose tbody :is(th, td),
.e-content tbody :is(th, td) {
	padding: 11px 12px;
	border-block-start: 1px solid var(--grc-border);
	font-size: 14px;
	line-height: 20px;
	color: var(--grc-text);
	vertical-align: middle;
	text-align: start;
}
/* A leading th in a row is the row's label, so it carries the weight. */
.gr-article-body tbody tr > th:first-child,
.grc-prose tbody tr > th:first-child,
.e-content tbody tr > th:first-child {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	color: var(--grc-ink);
}
.gr-article-body tbody tr:nth-child(even) :is(th, td),
.grc-prose tbody tr:nth-child(even) :is(th, td),
.e-content tbody tr:nth-child(even) :is(th, td) { background: #fafafa; }
/* Core's own stripe style paints the row, not the cell, and its sheet loads
   AFTER child.css on the commercial template — so let it win there rather than
   having two zebras disagree. */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) :is(th, td) { background: transparent; }
.gr-article-body tbody tr:hover :is(th, td),
.grc-prose tbody tr:hover :is(th, td),
.e-content tbody tr:hover :is(th, td) { background: var(--grc-accent-tint); }

/* Images inside cells — operator logos and payment marks — must not be blown
   up to the cell width by the generic `img { width: 100% }` rules. */
.gr-article-body table img,
.grc-prose table img,
.e-content table img {
	inline-size: auto;
	max-inline-size: 120px;
	block-size: auto;
	display: inline-block;
	vertical-align: middle;
}
.gr-article-body table :is(ul, ol),
.grc-prose table :is(ul, ol),
.e-content table :is(ul, ol) { margin: 0; padding-inline-start: 18px; }
.gr-article-body table p,
.grc-prose table p,
.e-content table p { margin: 0; }

@media (max-width: 560px) {
	.gr-article-body :is(thead, tfoot) :is(th, td),
	.grc-prose :is(thead, tfoot) :is(th, td),
	.e-content :is(thead, tfoot) :is(th, td) { padding: 8px 10px; font-size: 11px; }
	.gr-article-body tbody :is(th, td),
	.grc-prose tbody :is(th, td),
	.e-content tbody :is(th, td) { padding: 9px 10px; font-size: 13px; line-height: 19px; }
}

/* ===========================================================================
 * COMMERCIAL TEMPLATE (the `gambling` CPT)
 *
 * This page does NOT render through the child's single.php. WordPress resolves
 * single-gambling.php, and the body carries `gr-commercial-page`, so it comes
 * from the parent's own commercial template with its own stack: app.css (a
 * Tailwind build), commercial.css, the brand-management plugin's toplist, and
 * a set of custom blocks — wp-block-gr-special-list, -pro-tip, -how-we-rate,
 * -trust-widget, -most-popular.
 *
 * WHAT THIS LAYER DOES AND DOES NOT TOUCH.
 *
 * Touches: the page ground, the shell columns, body typography, tables, the
 * FAQ, and Related Guides — the furniture.
 *
 * Leaves alone: everything the brand-management plugin renders
 * (.toplist-gamereactor__*), and the icons, logos and images inside the custom
 * blocks. Those are commercial assets with their own sizing, and restyling
 * them from here is how you break a toplist nobody is watching. Note also
 * that child.css is loaded SEVENTH of twelve on this template — the block
 * library sheets and bm-toplist-gamereactor.css come after it — so anything
 * that must win here needs real specificity rather than source order.
 * ======================================================================== */

/*
 * The page ground. The parent paints #pagebackground black with a striped
 * image (inline, from gr_page_background_style()); the child already hides
 * that everywhere. The shell containers are pinned to white as well so the
 * commercial template matches every other template on the site.
 *
 * Deliberately container-only — html, body, #main and the two shell columns.
 * Nothing here reaches a descendant, because several of the blocks on this
 * page are meant to be dark and a blanket rule would flatten them.
 */
html:has(body.gr-commercial-page),
body.gr-commercial-page,
body.gr-commercial-page #main,
body.gr-commercial-page #main.main,
body.gr-commercial-page article.h-entry,
body.gr-commercial-page > .main > article > .colwide,
body.gr-commercial-page > .main > article > .colthin {
	background-color: var(--grc-surface) !important;
	background-image: none !important;
}
body.gr-commercial-page #main,
body.gr-commercial-page #main.main { box-shadow: none !important; }

/* Body copy on the commercial template, at the design's prose scale. */
body.gr-commercial-page .e-content {
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}
body.gr-commercial-page .e-content > p { margin: 0 0 16px; text-wrap: pretty; }
body.gr-commercial-page .e-content :is(h2, h2.wp-block-heading) {
	margin: 28px 0 16px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 17.6px;
	line-height: 22px;
	color: var(--grc-ink);
}
body.gr-commercial-page .e-content :is(h3, h3.wp-block-heading) {
	margin: 22px 0 12px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: var(--grc-ink);
}

/*
 * h4 down. commercial.css — the PARENT's file — carries
 * `body.gr-commercial-page .e-content h2, … h4 { font-size: 18px }` with no
 * font-family, so h4 kept the harvested Arial while h2 and h3 had child rules
 * and Outfit. On this one page that was 23 headings in the wrong face: every
 * "Pros" and "Cons" column head in the block content. h5 and h6 are covered
 * too rather than waiting to be found the same way.
 *
 * 15/18 is the .fig's next step below h3's 16/19 (Outfit SemiBold 15/18).
 */
body.gr-commercial-page .e-content :is(h4, h4.wp-block-heading) {
	margin: 22px 0 12px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	color: var(--grc-ink);
}
body.gr-commercial-page .e-content :is(h5, h5.wp-block-heading),
body.gr-commercial-page .e-content :is(h6, h6.wp-block-heading) {
	margin: 18px 0 10px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	color: var(--grc-ink);
}
body.gr-commercial-page .e-content a { color: var(--grc-link); }
body.gr-commercial-page .e-content a:hover { color: var(--grc-link-hover); }

/* --- Related Guides -----------------------------------------------------
 * The parent renders .related-guides > .related-guides-list > article.post-item
 * with a .post-item-media anchor, a title, an excerpt and a meta line. Styled
 * to match the archive's list row so a reader moving between the two sees one
 * component, not two.
 */
.related-guides { margin-block-start: 34px; }
.related-guides-title {
	margin: 0 0 16px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	/* Same 17.6 as every other section heading. */
	font-size: 17.6px;
	line-height: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--grc-ink);
	border-block-end: 2px solid var(--grc-accent);
	padding-block-end: 6px;
}
.related-guides-list { display: flex; flex-direction: column; gap: 12px; }
#main .related-guides-list .post-item,
.related-guides-list .post-item {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	border-block-end: 1px solid var(--grc-border);
	padding-block-end: 12px;
	margin: 0;
}
/* Kept as a safety net. The child's parts/related-guides.php omits the anchor
   entirely when no image resolves, but the PLUGIN's renderer emits an empty
   one, and it still runs anywhere the child template is not in play — so
   collapse the column rather than leave a 168px hole. */
#main .related-guides-list .post-item:has(.post-item-media:empty),
.related-guides-list .post-item:has(.post-item-media:empty) {
	grid-template-columns: minmax(0, 1fr);
}
.related-guides-list .post-item-media:empty { display: none; }
.related-guides-list .post-item-media {
	display: block;
	line-height: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--grc-page);

	/* app.css pins this anchor to a fixed 156x115:
	 *   .post-item .post-item-media { width: calc(var(--spacing)*39);
	 *                                 height: calc(var(--spacing)*28.75) }
	 * with --spacing: .25rem. A grid item keeps its own specified width and
	 * simply overflows a narrower track, so at the 116px mobile column the
	 * picture ran 40px past its cell and sat 28px on top of the headline —
	 * measured on staging at 375, and exactly what the screenshot shows. On
	 * desktop the 168px track hid it, which is why it only surfaced on mobile.
	 * Fill the track instead, and let the image's aspect-ratio set the height. */
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	block-size: auto;
	flex: 0 1 auto;
}
.related-guides-list .post-item-media img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.related-guides-list .post-item:hover .post-item-media img { transform: scale(1.04); }
.related-guides-list .post-item-content { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.related-guides-list .post-item-title {
	font-family: var(--grc-font-title);
	font-weight: 600;
	font-size: 18px;
	line-height: 23px;
	color: var(--grc-ink);
}
.related-guides-list .post-item-title a { color: inherit; text-decoration: none; }
.related-guides-list .post-item-title a:hover { color: var(--grc-link); }
.related-guides-list .post-item-excerpt {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 21px;
	color: var(--grc-text-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.related-guides-list .post-item-meta {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--grc-font-body);
	font-size: 13px;
	line-height: 18px;
	color: #666666;
}
.related-guides-list .post-item-label { color: var(--grc-link); text-decoration: none; }
.related-guides-list .post-item-label:hover { color: var(--grc-link-hover); }

@media (max-width: 620px) {
	#main .related-guides-list .post-item,
	.related-guides-list .post-item { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; }
	.related-guides-list .post-item-title { font-size: 16px; line-height: 21px; }
	.related-guides-list .post-item-excerpt { display: none; }
}

/* --- Commercial template: the dark hero ---------------------------------
 * The Guide artboard opens on a black band carrying the whole header. This
 * template had it on white, which is the main reason the page did not read as
 * part of the site.
 *
 * WHY THE HEADER IS AN ARTICLE-LEVEL ROW. commercial.css makes
 * article.gambling a flex row of .colwide (640px) and .colthin (300px) at
 * >=1024. A full-bleed band needs a CENTRED containing block, because the
 * negative margin is calculated from 50% of the parent — and .colwide is the
 * left column, not centred, so bleeding from inside it lands 160px off. The
 * header therefore sits as a direct child of the article and takes a row of
 * its own via flex-basis 100%.
 */
body.gr-commercial-page article.gambling { flex-wrap: wrap; }

/*
 * REWRITTEN, AND THE PREVIOUS VERSION WAS BROKEN BY DESIGN.
 *
 * It sized the band with `inline-size: max(100%, --grc-vw)` and then padded the
 * content back in by `--grc-vw/2 - 50%`. That works only if the element really
 * takes the width it asks for — and this element is a FLEX ITEM. With
 * `flex: 1 0 100%` the flex algorithm decides the used width from the basis and
 * the free space on the line; `inline-size` is ignored. At the width I happened
 * to test, the two agreed. Zoom out and --grc-vw grows while the flex width
 * does not, so the padding grew past the box: 1040px of padding inside a
 * ~1290px box left a 250px column, the text collapsed into a ribbon and the
 * toplist burst out of it. That is the screenshot.
 *
 * The lesson is not "adjust the numbers". It is that CONTENT GEOMETRY MUST NOT
 * DEPEND ON --grc-vw. That value comes from JavaScript, can be stale, can be
 * mid-reflow, and here was not even governing the width it was paired with.
 *
 * So now: the band's BOX is plain — the article's content width, no negative
 * margins, no viewport maths — which makes the hero text share .colwide's left
 * edge by construction rather than by arithmetic. Only the decorative
 * BACKGROUND bleeds, as an absolutely positioned layer centred on the box. If
 * --grc-vw is stale the band's edges are a little short or long for a moment;
 * nothing moves, nothing collapses. Decoration is allowed to be approximate.
 * Layout is not.
 */
.grc-cm-hero {
	flex: 1 0 100%;
	position: relative;
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	margin-inline: 0;
	margin-block-end: 0;
	padding-block: 32px 28px;
	padding-inline: 0;
	background: none;
}
/*
 * The bleeding layer. Centred with left:50% + translateX(-50%) rather than a
 * negative margin, so it cannot participate in layout or push anything.
 */
.grc-cm-hero-bg {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: max(100%, var(--grc-vw, 100%));
	background: url('../img/bg-hero.svg') right center / auto 100% no-repeat, var(--grc-ink);
	pointer-events: none;
	z-index: 0;
}
.grc-cm-hero > *:not(.grc-cm-hero-bg) { position: relative; z-index: 1; }

/*
 * The bleeding layer is wider than the page by design, so something has to
 * absorb it or it becomes horizontal scroll — which is the other half of what
 * was reported. `clip` rather than `hidden`: hidden would make this a scroll
 * container and break the sticky columns commercial.css sets up.
 *
 * Scoped to this template. Sitewide it would hide real overflow bugs, and this
 * project has had several worth seeing.
 */
body.gr-commercial-page { overflow-x: clip; }

.grc-cm-hero-inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	inline-size: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
/* .colwide's 640px measure, so the hero text wraps on the same line length as
   the body copy under it and starts at the same left edge. */
.grc-cm-hero-inner > * { max-inline-size: 640px; inline-size: 100%; }

/*
 * THE GAP UNDER THE HERO, AND WHY IT WAS NOT A GAP.
 *
 * Both columns start 24px under the band. The left one then began with an <h2>
 * carrying `margin: 28px 0 16px`, so its first visible thing sat 52px down
 * while the sidebar's trust card sat at 24px — the columns were level, their
 * CONTENTS were not, and that reads as a stray gap on the left.
 *
 * Collapsing the first child's top margin is the substantial fix rather than a
 * tuned number: whatever the body opens with — a heading, a paragraph, a
 * toplist — its leading margin is dropped, so the two columns always start on
 * the same line. The margin still applies to every later heading, where it is
 * doing real work separating sections.
 */
body.gr-commercial-page .colwide.colwide_mrgn { margin-block-start: 24px !important; }
body.gr-commercial-page .colthin { margin-block-start: 24px !important; }
body.gr-commercial-page .e-content > :first-child,
body.gr-commercial-page .e-content > :first-child > :first-child,
body.gr-commercial-page .colthin .gr-side-sticky > :first-child { margin-block-start: 0 !important; }

/* Breadcrumb — the plugin's markup, the design's colours. */
.grc-cm-hero .breadcrumbs,
.grc-cm-hero .breadcrumbs span {
	font-family: var(--grc-font-body);
	font-size: 11px;
	line-height: 1;
	color: var(--grc-text-on-dark);
}
.grc-cm-hero .breadcrumbs > span { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.grc-cm-hero .breadcrumbs a { color: var(--grc-text-on-dark); text-decoration: none; }
.grc-cm-hero .breadcrumbs a:hover { color: var(--grc-surface); }
/* The separators were rendering near-black on the band. */
.grc-cm-hero .breadcrumbs-sep {
	color: var(--grc-text-on-dark) !important;
	opacity: 1;
	font-size: 14.3px;
	line-height: 1;
}

/*
 * THE SECTION IS THE CHIP, IN THE TRAIL.
 *
 * The hero carried both a plain "Comparisons" crumb and a separate blue
 * COMPARISONS tag under it — the same word twice. The post template does it
 * once: the section crumb IS the chip, sitting inside the trail. The archive
 * anchor now gets that same .gr-crumb-section class (single-gambling.php), so
 * both templates share one component instead of resembling each other.
 */
.grc-cm-hero .breadcrumbs .gr-crumb-section {
	display: inline-flex;
	align-items: center;
	block-size: 16px;
	box-sizing: content-box;
	padding: 5px 8px;
	background: var(--grc-accent);
	color: var(--grc-surface);
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 100%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
}
.grc-cm-hero .breadcrumbs .gr-crumb-section:hover {
	background: var(--grc-link-hover);
	color: var(--grc-surface);
}
/* No bullet either side of the chip — it reads as its own object, as on the
   post template. The plugin wraps each crumb in a span, so the separator to
   remove is the sibling of the span that holds the chip. */
.grc-cm-hero .breadcrumbs span:has(> .gr-crumb-section) + .breadcrumbs-sep,
.grc-cm-hero .breadcrumbs .breadcrumbs-sep:has(+ span > .gr-crumb-section) { display: none; }
.grc-cm-hero .breadcrumb_last { color: var(--grc-text-on-dark); }

body.gr-commercial-page .grc-cm-hero .gambling-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-surface);
}
#main .grc-cm-hero .gambling-title { color: var(--grc-surface); }

/* Intro / standfirst, including the plugin's More–Less toggle. */
body.gr-commercial-page .grc-cm-hero .intro {
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text-on-dark);

	/* layout.css carries the harvested editorial rule
	 *   .intro { margin: 1.1em .75em }
	 * so the standfirst sat 12px to the RIGHT of its own H1 — measured on
	 * staging at 375: H1 left 14, intro left 26 — while still computing a full
	 * 347px width, which pushed its right edge 12px past the column. Both ends
	 * were off by the same 12px. Set the margin outright: the block axis needs
	 * a value anyway, and leaving it to the shorthand is what let the inline
	 * axis leak back in. */
	margin-block: 12px 16px;
	margin-inline: 0;
	/* NO max-inline-size here. `.grc-cm-hero-inner > *` already caps every
	   child at 640px so the hero text wraps on .colwide's measure rather than
	   the band's full 960px, and adding a 100% of my own to this more specific
	   rule silently cancelled that cap: the standfirst went to 960px wide,
	   320px past its own H1. Caught at 1440 after the fix to the margin. */
}
.grc-cm-hero .intro-toggle {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0 0 0 6px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	color: #6cb6ef;
}
.grc-cm-hero .intro-toggle:hover { color: var(--grc-surface); }

/* Credit line. */
body.gr-commercial-page .grc-cm-hero .entry-meta {
	font-family: var(--grc-font-body);
	font-size: 14px;
	color: var(--grc-text-on-dark);
}
/*
 * The credit line — the theme's own layout, only recoloured.
 *
 * app.css already builds this row, and it does it with the negative-margin
 * gutter pattern plus its own separators:
 *
 *     .entry-meta .entry-meta-row        { margin-left: -24px }
 *     .entry-meta .entry-meta-row > *    { margin-left: 24px }
 *     .entry-meta .entry-meta-row > ::before { content:""; 4px dot at -14px }
 *
 * My previous version set flex-direction and drew "•" characters on the same
 * ::before — duplicating what was already there, and leaving the theme's dot
 * on the FIRST child where it reads as a stray mark before "Updated".
 *
 * (The row's box legitimately starts 24px left of its container because of
 * that gutter; its CONTENTS align correctly. Worth knowing before treating it
 * as an overflow bug — I nearly did.)
 *
 * So the layout is left to the theme. All that is needed on the dark band is
 * colour, and suppressing the leading dot.
 */
.grc-cm-hero .entry-meta-row > :first-child::before,
.grc-cm-hero .entry-meta-people > :first-child::before {
	content: none !important;
	display: none !important;
}
.grc-cm-hero .entry-meta-row > *::before,
.grc-cm-hero .entry-meta-people > *::before {
	background-color: var(--grc-text-on-dark) !important;
}

/* Author link takes the post template's blue, not white — same byline. */
.grc-cm-hero .entry-meta-author a { color: var(--grc-link); text-decoration: none; }
.grc-cm-hero .entry-meta-author a:hover { color: var(--grc-link-hover); }
.grc-cm-hero .entry-meta-verified { color: var(--grc-text-on-dark); }
.grc-cm-hero .entry-meta-verified a { color: var(--grc-surface); text-decoration: none; }
.grc-cm-hero .entry-meta-verified a:hover { color: #6cb6ef; }

/*
 * Affiliate disclosure — inside the band, under the credit line.
 *
 * commercial.css sets it 10px/11px, which is not a readable size for a legal
 * notice; the !important is because that rule is body.gr-commercial-page-
 * scoped and would otherwise win. 12.5px/18px on the muted-on-dark colour
 * keeps it clearly secondary without hiding it.
 */
/*
 * Disclosure: smaller, and ONE separator.
 *
 * There were two horizontal rules stacked above it — this block's own
 * border-block-start plus a bottom border the credit line brings with it — so
 * the credit line's is switched off and this one stays. 11px/16px is the size
 * asked for: clearly secondary, still legible, where commercial.css had it at
 * 10px/11px with the leading tighter than the type.
 */
body.gr-commercial-page .grc-cm-hero .entry-meta {
	border-block-end: 0 !important;
	padding-block-end: 0 !important;
	margin-block-end: 0 !important;
}
body.gr-commercial-page .grc-cm-hero .gambling-disclosure {
	max-inline-size: 640px;
	margin-block-start: 0;
	padding-block-start: 14px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
	font-family: var(--grc-font-body);
	font-size: 10px !important;
	line-height: 15px !important;
	color: var(--grc-text-on-dark);
}
body.gr-commercial-page .grc-cm-hero .gambling-disclosure p { margin: 0; }
body.gr-commercial-page .grc-cm-hero .gambling-disclosure :is(i, b) { font-style: normal; }
body.gr-commercial-page .grc-cm-hero .gambling-disclosure b { font-weight: 700; color: var(--grc-surface); }
body.gr-commercial-page .grc-cm-hero .gambling-disclosure a { color: #6cb6ef; text-decoration: underline; }
body.gr-commercial-page .grc-cm-hero .gambling-disclosure a:hover { color: var(--grc-surface); }

/* The band supplies the top spacing, so the harvested #main pad would double it. */
#main:has(.grc-cm-hero) { padding-block-start: 0; }

/*
 * The commercial hero bleeds on a DIFFERENT breakpoint from the editorial
 * bands, and it took a second pass to get right.
 *
 * The editorial templates switch their bleed off at 1332px because .main is
 * already 100% wide below that, so there is nothing to bleed into. Here
 * commercial.css caps #main at 1000px from 1024px UP — so between 1024 and
 * 1332 there is space either side and the band must still reach it. Following
 * the editorial rule left the band 960px wide with white either side, and left
 * the inverse padding indenting the text by 70px into the bargain.
 *
 * Below 1024 commercial.css's cap stops applying, #main goes full width, and
 * both the bleed and its inverse padding come off together — they are one
 * mechanism and switching off half of it is what produced the 70px indent.
 */
/*
 * Below 1024 commercial.css's two-column flex row stops applying, so the band
 * is a plain full-width block and only needs a reading gutter. No width or
 * margin overrides here any more — there is no viewport arithmetic left to
 * switch off, which is the point of the rewrite above.
 */
@media (max-width: 1023px) {
	.grc-cm-hero { padding-inline: var(--grc-gutter, 16px); }
	.grc-cm-hero-inner > * { max-inline-size: none; }
}
@media (max-width: 760px) {
	body.gr-commercial-page .grc-cm-hero .gambling-title { font-size: 26px; line-height: 30px; }
	.grc-cm-hero { padding-block: 24px 20px; }
}

/* --- Commercial template: tables ----------------------------------------
 * Per the Guide artboard: a BLACK header band in Outfit caps over white body
 * cells, hairline rules, no outer radius — and it has to work in both of the
 * block editor's table styles, striped and plain.
 *
 * THREE THINGS FIGHT THIS, hence the flags.
 *
 * 1. child.css is loaded SEVENTH of twelve here. wp-includes/blocks/table/
 *    style.min.css comes after it and sets `border: 1px solid` and `padding:
 *    .5em` on every th and td.
 * 2. app.css is a Tailwind build inside an @layer, so it normally loses to
 *    unlayered rules — but it is the only thing that could be painting the
 *    header grey, and the header stayed grey after this rule shipped without
 *    a flag. Something in the stack wins that I cannot read from outside; the
 *    flag settles it either way.
 * 3. commercial.css sets `.e-content table { display: block; overflow-x: auto }`
 *    to stop wide tables pushing the page sideways. That works, but a table
 *    that is a block box no longer distributes column widths as a table, which
 *    is why six columns crushed into unreadable two-word stacks. The table goes
 *    back to being a table and the FIGURE scrolls instead.
 */
body.gr-commercial-page .e-content figure.wp-block-table {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 20px;
}
body.gr-commercial-page .e-content table {
	display: table !important;
	inline-size: 100%;
	/* Room for six columns before the figure starts scrolling. Below this the
	   cells stop being readable, so scrolling is the better failure. */
	min-inline-size: 780px;
	overflow: visible !important;
	border-collapse: collapse;
	border: 1px solid var(--grc-border);
	background: var(--grc-surface);
	table-layout: auto;
}
/* A bare table with no figure wrapper keeps commercial.css's scroll hack,
   because there is nothing else to scroll. */
body.gr-commercial-page .e-content > table,
body.gr-commercial-page .e-content div:not(.wp-block-table) > table {
	display: block !important;
	overflow-x: auto !important;
	min-inline-size: 0;
}

body.gr-commercial-page .e-content :is(thead, tfoot) :is(th, td) {
	background-color: var(--grc-ink) !important;
	color: var(--grc-surface) !important;
	padding: 10px 12px;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: start;
	vertical-align: middle;
	border: 0 !important;
}
body.gr-commercial-page .e-content :is(thead, tfoot) a { color: var(--grc-surface) !important; }

body.gr-commercial-page .e-content tbody :is(th, td) {
	background-color: var(--grc-surface);
	padding: 11px 12px;
	border: 0;
	border-block-start: 1px solid var(--grc-border);
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 20px;
	color: var(--grc-text);
	vertical-align: top;
}
body.gr-commercial-page .e-content tbody tr > th:first-child {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	color: var(--grc-ink);
}
/* Striped variant. Core paints odd rows #f0f0f0 and drops the cell borders;
   this keeps its intent at the design's lighter value and puts the rules back,
   so a striped table and a plain one differ only in the tint. */
body.gr-commercial-page .e-content .is-style-stripes tbody tr:nth-child(odd) :is(th, td) {
	background-color: #f7f7f7;
}
body.gr-commercial-page .e-content .is-style-stripes tbody tr:nth-child(even) :is(th, td) {
	background-color: var(--grc-surface);
}
body.gr-commercial-page .e-content .is-style-stripes tbody :is(th, td) {
	border-block-start: 1px solid var(--grc-border);
}
body.gr-commercial-page .e-content table img {
	inline-size: auto;
	max-inline-size: 120px;
	block-size: auto;
	display: inline-block;
	vertical-align: middle;
}
body.gr-commercial-page .e-content table :is(ul, ol) { margin: 0; padding-inline-start: 18px; }
body.gr-commercial-page .e-content table p { margin: 0; }

/* --- Commercial template: FAQ ------------------------------------------
 * CSS ONLY. The parent theme's bundle owns the behaviour — see the note in
 * child.js about the two accordions cancelling each other out.
 *
 * Box model taken from production, measured: the SECTION carries the 16px
 * padding and the question and answer carry none. My previous version padded
 * the question 16/20 and the answer 0/20/18 on top of that, which double-inset
 * the answer and pushed it out of line with its question — the padding problem
 * reported.
 *
 * Nothing here touches display, height or max-height on the answer. The theme
 * animates those, and my flags were freezing its transition mid-way, which is
 * what clipped the answers to a single line.
 */
.grc-faq--schema,
body.gr-commercial-page .schema-faq {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 0;
	margin-block: 16px 24px;
}
body.gr-commercial-page .schema-faq-section {
	box-sizing: border-box;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--grc-border);
	background: var(--grc-surface);
}

body.gr-commercial-page .schema-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: var(--grc-ink);
}
body.gr-commercial-page .schema-faq-question:focus-visible {
	outline: 2px solid var(--grc-link);
	outline-offset: 4px;
}

/*
 * THE ICON — on ::before, and the theme's ::after switched off entirely.
 *
 * My first attempt painted the plus onto the theme's own ::after. That pseudo
 * carries other declarations I cannot see from outside, and one of them
 * rotates it: the plus came out as a circled X. Co-opting a pseudo-element
 * someone else is already using means inheriting every property they set on
 * it, so this stops doing that.
 *
 * ::before is unused by the theme — its computed content is none — so it is
 * safe to own outright, and `order: 1` moves it past the text to the right-hand
 * end of the flex row.
 *
 * The open state is read from aria-expanded, which BOTH implementations set,
 * with .is-open as a second key. So the icon is correct whichever script ends
 * up driving the accordion.
 */
/*
 * The chevron is app.css drawing a box with two borders and turning it with
 * `rotate: 45deg` — the standalone CSS rotate PROPERTY, not `transform`. That
 * is why an earlier attempt produced a circled X: I painted my plus onto this
 * same ::after and cancelled `transform`, which never touched `rotate`. It is
 * hidden outright now, and `rotate` is zeroed too so it cannot come back
 * turned if anything re-displays it.
 */
body.gr-commercial-page .schema-faq-question::after {
	content: none !important;
	display: none !important;
	rotate: 0deg !important;
	border: 0 !important;
}
body.gr-commercial-page .schema-faq-question::before {
	content: "" !important;
	order: 1;
	flex-shrink: 0;
	inline-size: 20px;
	block-size: 20px;
	border: 0 !important;
	transform: none !important;
	transition: none !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%230088cc' stroke-width='1.5'/%3E%3Cpath d='M7 12h10M12 7v10' stroke='%230088cc' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}
body.gr-commercial-page .schema-faq-question[aria-expanded="true"]::before,
body.gr-commercial-page .schema-faq-section.is-open .schema-faq-question::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%230088cc' stroke-width='1.5'/%3E%3Cpath d='M7 12h10' stroke='%230088cc' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* Any icon the theme renders as a child element goes too — the request was to
   keep the plus and drop the arrow. */
body.gr-commercial-page .schema-faq-question > svg,
body.gr-commercial-page .schema-faq-question > i,
body.gr-commercial-page .schema-faq-question > .grc-faq-icon { display: none !important; }

/*
 * HEIGHT IS THE LEVER. app.css collapses the answer with
 *
 *     .schema-faq .schema-faq-answer { height: 0; overflow: hidden;
 *                                      transition: height .3s }
 *
 * and has NO open-state rule for it — the theme's JS sets an inline height.
 * That bundle is not deployed on staging, so nothing ever set one, and my
 * `display: block` did exactly nothing: a block of zero height with its
 * overflow hidden. Toggling display was never going to open it.
 *
 * Only applied when the child owns the accordion (child.js adds
 * .grc-faq-owned); with the bundle deployed the theme's own animation runs and
 * nothing here interferes.
 */
.grc-faq-owned .schema-faq-question[aria-expanded="true"] ~ .schema-faq-answer {
	height: auto !important;
	overflow: visible !important;
}
.grc-faq-owned .schema-faq-question[aria-expanded="false"] ~ .schema-faq-answer {
	height: 0 !important;
	overflow: hidden !important;
}

/*
 * app.css tints an open row with --color-divider; the design file keeps every
 * row white and lets the border carry the separation.
 */
body.gr-commercial-page .schema-faq-section.is-open {
	background-color: var(--grc-surface) !important;
	border-color: var(--grc-border) !important;
}

body.gr-commercial-page .schema-faq-answer {
	margin: 10px 0 0;
	padding: 0;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}
body.gr-commercial-page .schema-faq-answer p { margin: 0 0 10px; }
body.gr-commercial-page .schema-faq-answer p:last-child { margin: 0; }

/* --- Commercial template: "How we rate" --------------------------------
 * ONE RULE MATTERS HERE, AND IT TOOK ME FOUR ROUNDS TO FIND IT.
 *
 * Splide's own core CSS, inlined by the theme, says:
 *
 *     .splide                 { visibility: hidden }
 *     .splide.is-initialized  { visibility: visible }
 *
 * The whole slider is hidden until Splide's JavaScript marks it initialised.
 * The heading and the CTA sit OUTSIDE .splide, which is exactly why those two
 * were the only things ever visible. Every symptom along the way was this:
 *
 *   - the original "empty box";
 *   - the round where cards appeared but the intro and arrows did not (I had
 *     forced visibility on .gr-how-we-rate-slide and nothing else);
 *   - and the round where it all vanished again, when those forces came out.
 *
 * I diagnosed a missing library, a Tailwind layer and a grep quoting slip
 * before reading the one declaration that governs the element.
 *
 * NOTE ON PRODUCTION: it has the same rule, and WP Rocket delays the bundle
 * until the first interaction — so this section is blank on production too
 * until you touch the page. Rather than copy that, the pre-initialisation
 * state here is made readable: all six panels laid out as a grid. When Splide
 * initialises it adds is-initialized, every rule below stops matching, and the
 * real carousel takes over.
 *
 * EVERYTHING ELSE IS LEFT TO app.css. It already styles this block to the
 * production design — the #edfaff card with its slide-bg texture, the 32px
 * icon slot, the 40px arrows, the 13.33px counter, the CTA — from the same
 * source as production. My cosmetic overrides duplicated it and could only
 * drift, so they are gone.
 */
.gr-how-we-rate .splide:not(.is-initialized) { visibility: visible; }
.gr-how-we-rate .splide:not(.is-initialized) .splide__track {
	overflow: visible;
	margin-inline-end: 0;
}
/* app.css sets `display:flex !important; height:auto !important` on the list,
   so the fallback has to match that weight to lay the panels out. */
.gr-how-we-rate .splide:not(.is-initialized) .splide__list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	height: auto !important;
}
/* The slides are a fixed 300px for the carousel; in the grid they fill a cell. */
.gr-how-we-rate .splide:not(.is-initialized) .gr-how-we-rate-slide {
	inline-size: auto;
	margin-inline-end: 0 !important;
}
/* Dead controls until Splide can drive them; app.css hides the arrows by
   default anyway, and the counter would read a position that cannot change. */
.gr-how-we-rate .splide:not(.is-initialized) .splide__arrows,
.gr-how-we-rate .splide:not(.is-initialized) .gr-how-we-rate-pagination { display: none; }

/* The heading the block does not emit on this install (see functions.php).
   Only its spacing is set here — the type comes from the same .e-content
   heading rules as every other H2 on the page. */
.gr-how-we-rate-heading { margin-block: 0 16px; }

/* The 32px icon slot renders EMPTY on staging: <div class="gr-how-we-rate-slide-icon"></div>
 * with no child and no data attribute, six times over, while production has a
 * 32px #1976D2 stroked SVG inlined in each one. So there is no icon FILE to
 * copy across — public/build/assets/ holds only decorative backgrounds
 * (callout-bg, slide-bg, summary-bg, check/cross-circle, right-arrow, three
 * favicons). The icon is markup the block emits, which makes it either a saved
 * block attribute that did not migrate or plugin code that differs; the check
 * that separates those is in the round-15 notes. Collapse the slot until the
 * real one arrives, so the card does not carry a blank 32px band. */
.gr-how-we-rate-slide-icon:empty { display: none; }

@media (max-width: 760px) {
	.gr-how-we-rate .splide:not(.is-initialized) .splide__list { grid-template-columns: minmax(0, 1fr); }
}

/* --- Overflow guards on the commercial template -------------------------
 * A grid or flex child defaults to min-width:auto, which refuses to shrink
 * below its content — one long unbroken string, a wide table or an oversized
 * image in a column is then enough to push the whole page sideways. These are
 * the containers on this template that can do it.
 */
body.gr-commercial-page :is(.colwide, .colthin, .e-content) { min-inline-size: 0; }
body.gr-commercial-page .e-content :is(.wp-block-columns, .wp-block-column, .wp-block-group, .wp-block-group__inner-container) {
	min-inline-size: 0;
	max-inline-size: 100%;
}
body.gr-commercial-page .e-content :is(img, video, iframe, svg) {
	max-inline-size: 100%;
	block-size: auto;
}
/* Long unbroken tokens — promo codes, URLs, campaign ids — must wrap. */
body.gr-commercial-page .e-content :is(p, li, td, th, dd, dt) { overflow-wrap: anywhere; }

/* =========================================================================
 * GRTV — video, shorts, and the 404
 * =========================================================================
 * From "Gamereactor Video.html" and "Gamereactor Video Archive.html". Every
 * number below is the canvas's own; nothing here is derived unless the comment
 * says so, and the three places I had to derive are each marked DERIVED.
 *
 * Class names are grc-* rather than the artboards' .gr-cards / .gr-player /
 * .gr-vid-body, so the mapping is worth writing down once:
 *   .gr-player     -> .grc-player
 *   .gr-vid-body   -> .gr-body        (already exists; same 800+300+32 grid)
 *   .gr-container  -> .grc-arch-grid  (already exists; same grid)
 *   .gr-cards      -> .grc-vidcards
 *   .gr-searchrow  -> .grc-vidsearch-row
 *   .gr-wrap       -> .gr-post-wrap / .grc-wrap (already exist; 1132 content)
 * The shells are reused rather than rebuilt because both artboards specify the
 * same measurements as the Post and Category artboards this theme already
 * implements.
 * ------------------------------------------------------------------------- */

/* --- The 568px band behind the breadcrumb and player -------------------- */
.grc-vid-top {
	position: relative;
	/* The player overhangs the band's lower edge, exactly as the feature image
	   overhangs on the article template. Nothing is clipped, so no overflow
	   rule here — the band is what is sized, not this box. */
}
.grc-vid-band {
	position: absolute;
	inset-block-start: 0;
	block-size: min(568px, calc(100% - 64px));
	/* Full bleed by the same route as the other dark bands: --grc-vw is the
	   viewport minus the scrollbar, published by child.js, and max() keeps the
	   layer at least as wide as its parent when the variable is absent or the
	   viewport reports nonsense. Only this decorative layer bleeds — the
	   content above it is laid out by the normal 1132 wrap, which is the
	   lesson from the commercial hero collapsing under browser zoom. */
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: max(100%, var(--grc-vw, 100%));
	background: url('../img/bg-hero.svg') center top / cover no-repeat, var(--grc-ink);
	pointer-events: none;
	z-index: 0;
}
.grc-vid-head {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: 8px 0;
}

/* --- Player ------------------------------------------------------------- */
.grc-player {
	position: relative;
	inline-size: 100%;
	block-size: 603px;
	overflow: hidden;
	background: #0a0a0a;
}
@media (max-width: 1040px) { .grc-player { block-size: 420px; } }
@media (max-width: 640px)  { .grc-player { block-size: 260px; } }

.grc-player-video,
.grc-player-still {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	display: block;
}
/*
 * contain, not cover, on the VIDEO. The canvas paints its poster as `cover`,
 * and 1132x603 is a shade shorter than 16:9, so cover would crop about 5% off
 * the frame. Losing picture from a video to match a still's crop is the wrong
 * trade; the letterbox lands on #0a0a0a, which the canvas already specifies as
 * the player's ground, so the difference is a thin black band and no lost
 * content. The still-only fallback keeps the canvas's cover.
 */
.grc-player-video { object-fit: contain; background: #0a0a0a; }
.grc-player-still { object-fit: cover; }

.grc-player-play {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 88px;
	block-size: 88px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 136, 204, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .25s ease, background .25s ease;
	padding: 0;
}
.grc-player-play:hover,
.grc-player-play:focus-visible {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgb(0, 158, 206);
}
.grc-player-tri {
	inline-size: 0;
	block-size: 0;
	border-inline-start: 26px solid #fff;
	border-block-start: 16px solid transparent;
	border-block-end: 16px solid transparent;
	margin-inline-start: 7px;
}
/* Once playing, the overlay must not sit between the reader and the controls. */
.grc-player.is-playing .grc-player-play { display: none; }

/*
 * DERIVED: the shorts player. The artboards cover the 16:9 case only, and the
 * user's direction was that one video design serves both types. The source
 * geometry for a short is 9:16 (the parent template pads by 177.78%), so the
 * player keeps the canvas's ground and controls and takes a portrait ratio,
 * capped so it cannot grow taller than a laptop viewport.
 */
.grc-player--portrait {
	block-size: auto;
	aspect-ratio: 9 / 16;
	max-block-size: 720px;
	max-inline-size: 405px;
	margin-inline: auto;
}
@media (max-width: 1040px) { .grc-player--portrait { block-size: auto; } }
@media (max-width: 640px)  { .grc-player--portrait { block-size: auto; max-inline-size: 100%; } }

/* --- Video single: the column ------------------------------------------ */
.grc-vid-main { gap: 8px; }

/* The CategoryTag lives in the breadcrumb now, as .gr-crumb-section — the
   same component every other template uses — so the standalone .grc-vid-chip
   rule that used to be here is gone rather than left as dead weight. */

/* #main prefix for the same reason .gr-post-title needs one: the harvested CSS
   reaches headlines with an id-level selector. */
#main .grc-vid-title,
.grc-vid-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-ink);
	text-wrap: pretty;
}
.grc-vid-stand {
	margin: 0;
	padding-block: 8px;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: #444444;
	text-wrap: pretty;
}
.grc-vid-tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
	align-items: flex-start;
}
.grc-vid-tag {
	/* inset shadow rather than a border, as drawn: it keeps the chip's box at
	   the canvas's 1px/3px padding without a border adding to its size. */
	box-shadow: inset 0 0 0 1px #dddddd;
	box-sizing: border-box;
	padding: 1px 3px;
	display: flex;
	align-items: center;
	font-family: var(--grc-font-body);
	font-size: 10px;
	line-height: 100%;
	letter-spacing: 0.02em;
	color: #666666;
	text-transform: uppercase;
	white-space: nowrap;
}
/*
 * The published block. The canvas really does put a 1px #eee border on all
 * four sides with `padding: 12px 0` and no inline padding, so the text sits
 * against the left rule. Reproduced as drawn — it may well be Figma exporting
 * a single-side stroke as a full box, and if so this and the archive's count
 * row are the same artefact and both want a bottom rule instead.
 */
.grc-vid-published {
	border: 1px solid #eeeeee;
	box-sizing: border-box;
	padding-block: 12px;
	margin-block-start: 16px;
}
.grc-vid-published time {
	display: block;
	padding-block: 4px;
	font-family: var(--grc-font-body);
	font-size: 14.3px;
	line-height: 100%;
	color: #666666;
}

/* --- The game panel in the rail ---------------------------------------- */
.grc-vidbox {
	background: var(--grc-ink);
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Padding moved off the panel and onto its body, so the cover can run
	   full-bleed to the panel's edges as it does in the reference. */
	padding: 0 0 16px;
	overflow: hidden;
	border-radius: 2px;
}
.grc-vidbox > :not(.grc-vidbox-cover) { margin-inline: 16px; }
.grc-vidbox-cover {
	block-size: 173px;
	flex-shrink: 0;
	background-color: #0a0a0a;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.grc-vidbox-cover + .grc-vidbox-title { margin-block-start: 0; }
.grc-vidbox-title {
	margin: 0;
	font-family: var(--grc-font-title);
	font-weight: 700;
	font-size: 19.5px;
	line-height: 100%;
	color: var(--grc-surface);
}
.grc-vidbox-title a { color: inherit; text-decoration: none; }
.grc-vidbox-title a:hover { color: #cfe3f5; }
.grc-vidbox-rows {
	margin: 0;
	padding-block: 4px;
	padding-inline: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.grc-vidbox-rows li {
	margin: 0;
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: flex-start;
	font-family: var(--grc-font-body);
	font-size: 14.3px;
	line-height: 18px;
	color: var(--grc-text-on-dark);
}
.grc-vidbox-rows .grc-gh-icon { color: var(--grc-text-on-dark); }
/*
 * OUTLINED, not filled. The artboard's GAME INFO button is a 1px white stroke
 * on the panel's own ink — I read it as a filled accent button because my
 * style filter when extracting the artboard dropped box-shadow, which is how
 * the exporter writes a Figma stroke. The screenshot made it obvious.
 */
.grc-vidbox-cta {
	block-size: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--grc-surface);
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.04em;
	color: var(--grc-surface);
	text-transform: uppercase;
	text-decoration: none;
}
.grc-vidbox-cta:hover {
	background: var(--grc-surface);
	color: var(--grc-ink);
	box-shadow: inset 0 0 0 1px var(--grc-surface);
}

/* --- Belts of clips as cards ------------------------------------------- */
.grc-vid-belts {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: 32px 8px;
}
.grc-vidbelt {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.grc-vidcards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	/* stretch, not start: the cards in a row match the tallest one instead of
	   each shrink-wrapping its own title. Combined with the two-line clamp on
	   the title below, every card on the page is the same height whether its
	   headline runs to one line or three. */
	align-items: stretch;
}
@media (max-width: 900px) { .grc-vidcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grc-vidcards { grid-template-columns: minmax(0, 1fr); } }

.grc-vidcard {
	overflow: hidden;
	border-radius: 2px;
	background: var(--grc-ink);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	min-inline-size: 0;
}
.grc-vidcard-media {
	position: relative;
	display: block;
	block-size: 155px;
	overflow: hidden;
	background: #0a0a0a;
}
.grc-vidcard-media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.grc-vidcard:hover .grc-vidcard-media img { transform: scale(1.04); }
.grc-vidcard-badge {
	position: absolute;
	inset-inline-start: 8px;
	inset-block-end: 8px;
	inline-size: 28px;
	block-size: 28px;
	background: var(--grc-link);
	display: flex;
	align-items: center;
	justify-content: center;
}
.grc-vidcard-tri {
	inline-size: 0;
	block-size: 0;
	border-inline-start: 8px solid #fff;
	border-block-start: 5px solid transparent;
	border-block-end: 5px solid transparent;
	margin-inline-start: 2px;
}
.grc-vidcard-body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-inline-size: 0;
}
.grc-vidcard-title {
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 15px;
	line-height: 19px;
	color: var(--grc-surface);
	/* Two lines, always: clamped so a long headline cannot push the card
	   taller, and min-block-size so a short one still reserves the second
	   line. Without the min, a row of one-line titles sat 19px shorter than
	   its neighbours and the date line lost its baseline. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-block-size: 38px;
}
.grc-vidcard:hover .grc-vidcard-title { color: #cfe3f5; }
.grc-vidcard-date {
	font-family: var(--grc-font-body);
	font-size: 11px;
	line-height: 100%;
	color: #aaaaaa;
	margin-block-start: auto;
}
.grc-vidbelt-more { align-self: center; }

/* --- Archive: search, chips, sort --------------------------------------- */
.grc-vidarch .grc-arch-main { gap: 16px; }

.grc-vidsearch {
	background: #eeeeee;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.grc-vidsearch-row {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: stretch;
}
@media (max-width: 560px) { .grc-vidsearch-row { flex-direction: column; } }

.grc-vidsearch-field {
	flex: 1 1 auto;
	min-inline-size: 0;
	border-radius: 8px;
	background: var(--grc-surface);
	padding: 15px 12px;
	display: flex;
	align-items: center;
}
.grc-vidsearch-field input {
	inline-size: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	/* Type, focus and the box itself are in the shared filter-bar block at
	   the end of this file — this rule keeps only what is structural. */
	-webkit-appearance: none;
	appearance: none;
}
.grc-vidsearch-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.grc-vidsearch-btn {
	inline-size: 125px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 4px;
	background: var(--grc-link);
	padding: 12px 24px;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 100%;
	color: var(--grc-surface);
	text-transform: uppercase;
	cursor: pointer;
}
.grc-vidsearch-btn:hover { background: var(--grc-link-hover); }
@media (max-width: 560px) { .grc-vidsearch-btn { inline-size: 100%; } }

.grc-vidchips {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.grc-vidchip {
	block-size: 36px;
	box-sizing: border-box;
	border-radius: 28px;
	background: #f8f8f8;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--grc-font-ui);
	font-weight: 400;
	font-size: 15px;
	line-height: 18px;
	color: var(--grc-ink);
	text-decoration: none;
	white-space: nowrap;
}
/* Resting, hover and selected states are in the shared filter-chip block at
   the end of this file, which .grc-gf-pill and .hp-tab share. */

/* Same note as .grc-vid-published: the border really is on all four sides in
   the canvas, with padding on the block-end only. */
.grc-vidsort {
	border: 1px solid #eeeeee;
	box-sizing: border-box;
	padding-block-end: 16px;
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.grc-vidsort-count {
	flex: 1 1 auto;
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 22px;
	color: #666666;
}
.grc-vidsort-links {
	display: flex;
	flex-direction: row;
	gap: 4px;
	justify-content: flex-end;
	align-items: center;
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 22px;
}
.grc-vidsort-label { color: #666666; }
.grc-vidsort-link { color: var(--grc-link); text-decoration: none; }
.grc-vidsort-link:hover { text-decoration: underline; }
.grc-vidsort-link.is-active { font-weight: 700; }

/* --- Archive rail ------------------------------------------------------- */
.grc-vidarch .gr-side { padding-block: 16px; }
.grc-vidrail-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
@media (max-width: 1040px) {
	/* The canvas caps the rail at 520px once it drops below the column. */
	.grc-vidarch .gr-side { max-inline-size: 520px; }
}

/* --- 404 ---------------------------------------------------------------- */
/*
 * Copy from gr_404_tekst(), lockup from production's own /lay/404.png and
 * /lay/logo_grey.png shipped into the child's assets/img/.
 *
 * The live page sits on linear-gradient(#bbb, #fff). That gradient is the OLD
 * site's styling rather than anything in the design system, and the brief was
 * to restyle to the system, so the page takes the system's own ground. One
 * declaration to put back if the gradient is wanted.
 */
.grc-404 {
	display: grid;
	place-items: center;
	padding-block: 64px 96px;
	padding-inline: 16px;
	background: var(--grc-page);
}
.grc-404-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	max-inline-size: 640px;
}
.grc-404-ghost {
	/* The file is 492px wide. Production renders it at 549 and so upscales it
	   by 12%; min() keeps it at its own resolution instead, which is sharper
	   and costs nothing. */
	inline-size: min(492px, 100%);
	block-size: auto;
	display: block;
}
/* Fallback when the asset has not been copied across yet. */
.grc-404-code {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 120px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--grc-ink);
}
#main .grc-404-title,
.grc-404-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-ink);
}
.grc-404-body {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
}
.grc-404-body a { color: var(--grc-link); font-weight: 700; text-decoration: none; }
.grc-404-body a:hover { color: var(--grc-link-hover); text-decoration: underline; }
.grc-404-mark {
	inline-size: 211px;
	max-inline-size: 100%;
	block-size: auto;
	display: block;
	margin-block-start: 8px;
}

@media (max-width: 760px) {
	#main .grc-vid-title,
	.grc-vid-title { font-size: 26px; line-height: 30px; }
	#main .grc-404-title,
	.grc-404-title { font-size: 26px; line-height: 30px; }
	.grc-vid-belts { gap: 24px; }
}

/* =========================================================================
 * Game hub
 * =========================================================================
 * From "Gamereactor Game Hub.html". Canvas values throughout; the three
 * places the canvas is silent are marked DERIVED.
 *
 * Artboard class -> ours:
 *   .gr-hero-card  -> .grc-gh-card      .gr-hero-shot -> .grc-gh-shot
 *   .gr-hero-side  -> .grc-gh-side      .gr-gallery   -> .grc-gh-gallery
 *   .gr-body / .gr-wrap are the shells this theme already has.
 * ------------------------------------------------------------------------- */

.grc-gh-top {
	position: relative;
	/* The band ends this far below the hero card. See the note on the band. */
	padding-block-end: 36px;
}
.grc-gh-band {
	position: absolute;
	/*
	 * The canvas draws this band 489px tall, and 489px is what it comes to for
	 * the canvas's own content: 98 of heading block, 10 of gap, ~345 of side
	 * panel, 36 of band below the card. But the panel's height is data — Red
	 * Dead has six platform chips wrapping to two rows and a System line that
	 * wraps as well, which makes the card 409px and pushed it 19px THROUGH a
	 * fixed band. Stacked on mobile the card is 602px against a 360px band and
	 * ran 376px past it.
	 *
	 * So the band is sized by its content instead: full height of .grc-gh-top,
	 * whose padding-block-end supplies the 36px below the card. Reproduces the
	 * canvas's 489 for the canvas's content, and holds for everything else.
	 */
	inset-block: 0;
	/* Same bleeding layer as the other dark bands: only this decorative box is
	   wider than the page, never a flex item. */
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: max(100%, var(--grc-vw, 100%));
	background: url('../img/bg-hero.svg') center top / cover no-repeat, var(--grc-ink);
	pointer-events: none;
	z-index: 0;
}
.grc-gh-head {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block: 8px 10px;
}
.grc-gh-crumb-name { color: var(--grc-text-on-dark); }

.grc-gh-title-row {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
#main .grc-gh-title,
.grc-gh-title {
	margin: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 34px;
	line-height: 38px;
	letter-spacing: -0.03em;
	color: var(--grc-surface);
	text-wrap: pretty;
}
.grc-gh-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-block: 4px;
}
.grc-gh-tier {
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 12px;
	line-height: 100%;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--grc-surface);
}

/* --- Hero card ---------------------------------------------------------- */
.grc-gh-card {
	position: relative;
	z-index: 4;
	overflow: hidden;
	border-radius: 2px;
	background: var(--grc-ink);
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
/*
 * Thousands of the 27,387 games have no coverage at all: no key art to derive
 * a shot from, no boxshot, no platforms, no facts. game-hero.php drops the
 * card entirely in that case rather than drawing a 1132x400 black rectangle.
 * These two classes cover the in-between states — one side present, not both.
 */
.grc-gh-card--noshot .grc-gh-side { inline-size: auto; flex: 1 1 auto; }
.grc-gh-card--noside .grc-gh-shot { inline-size: auto; aspect-ratio: 1132 / 400; }

.grc-gh-shot {
	inline-size: 832px;
	flex: 1 1 auto;
	min-inline-size: 0;
	background-color: #0a0a0a;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.grc-gh-side {
	inline-size: 300px;
	flex-shrink: 0;
	background: var(--grc-ink);
	display: flex;
	flex-direction: column;
}
.grc-gh-boxshot {
	block-size: 173px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 2px;
	background-color: #0a0a0a;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.grc-gh-side-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.grc-gh-platforms {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
	align-items: flex-start;
}
.grc-gh-platform {
	box-shadow: inset 0 0 0 1px #666666;
	box-sizing: border-box;
	padding: 6px;
	display: inline-flex;
	align-items: center;
	font-family: var(--grc-font-body);
	font-size: 10px;
	line-height: 100%;
	color: var(--grc-surface);
	white-space: nowrap;
}
.grc-gh-facts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
}
.grc-gh-facts li {
	margin: 0;
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: flex-start;
	font-family: var(--grc-font-body);
	font-size: 14.3px;
	line-height: 18px;
	color: var(--grc-text-on-dark);
}
.grc-gh-icon { flex-shrink: 0; color: var(--grc-text-on-dark); margin-block-start: 1px; }
.grc-gh-fact { min-inline-size: 0; }
/* .grc-gh-fact-label is gone — the label is screen-reader text now, and this
   rule was colouring a span the design does not show. */
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Body --------------------------------------------------------------- */
.grc-gh-below { padding-block: 16px 32px; }
.grc-gh-main {
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.grc-gh-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.grc-gh-about p {
	margin: 0 0 12px;
	font-family: var(--grc-font-body);
	font-size: 16px;
	line-height: 24px;
	color: #444444;
}
.grc-gh-about p:last-child { margin-block-end: 0; }

/* --- Review block ------------------------------------------------------- */
.grc-gh-review {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: center;
}
.grc-gh-review-media {
	inline-size: 170px;
	block-size: 100px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 2px;
	display: block;
	background: var(--grc-page);
}
.grc-gh-review-media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}
.grc-gh-review-body {
	flex: 1 1 auto;
	min-inline-size: 0;
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}
.grc-gh-review-title {
	flex: 1 1 220px;
	min-inline-size: 0;
	font-family: var(--grc-font-ui);
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
	color: var(--grc-ink);
	text-decoration: none;
}
.grc-gh-review-title:hover { color: var(--grc-link); }
.grc-gh-review-cta { flex-shrink: 0; }

/* --- Gallery ------------------------------------------------------------ */
.grc-gh-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	block-size: 350px;
	overflow: hidden;
	border-radius: 2px;
}
.grc-gh-gallery-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
}
.grc-gh-tile {
	display: block;
	background-color: #0a0a0a;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: opacity .25s ease;
}
.grc-gh-tile:hover { opacity: .88; }
/* DERIVED: the canvas only draws the five-still arrangement. With fewer, an
   even grid of what exists beats an arrangement with holes in it. */
.grc-gh-gallery--few {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	block-size: auto;
}
.grc-gh-gallery--few .grc-gh-tile { aspect-ratio: 16 / 9; }

/* --- Tag row ------------------------------------------------------------ */
.grc-gh-tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
	align-items: flex-start;
}
.grc-gh-tag {
	box-shadow: inset 0 0 0 1px #666666;
	box-sizing: border-box;
	padding: 6px;
	display: inline-flex;
	align-items: center;
	font-family: var(--grc-font-body);
	font-size: 10px;
	line-height: 100%;
	color: #444444;
	white-space: nowrap;
	text-decoration: none;
}
.grc-gh-tag:hover { box-shadow: inset 0 0 0 1px var(--grc-link); color: var(--grc-link); }

/* --- Collapse: the canvas's own 1040px and 640px ------------------------ */
@media (max-width: 1040px) {
	.grc-gh-card { flex-direction: column; }
	.grc-gh-shot {
		inline-size: auto;
		/* DERIVED: stretched beside the 300px column the shot took its height
		   from the panel. Stacked it has no height at all and collapsed to
		   nothing, so it needs a ratio of its own. */
		aspect-ratio: 16 / 9;
	}
	.grc-gh-side { inline-size: auto; }
}
@media (max-width: 760px) {
	#main .grc-gh-title,
	.grc-gh-title { font-size: 26px; line-height: 30px; }
	.grc-gh-review { flex-direction: column; align-items: stretch; }
	.grc-gh-review-media { inline-size: 100%; block-size: 180px; }
}
@media (max-width: 640px) {
	.grc-gh-gallery { grid-template-columns: minmax(0, 1fr); block-size: auto; }
	.grc-gh-gallery > .grc-gh-tile { aspect-ratio: 16 / 9; }
	.grc-gh-gallery-grid { block-size: 240px; }
}

/* ======================================================================
 * GAMES ARCHIVE  —  /games/
 *
 * From the .fig's "Game Archive" artboard, value for value. Three deviations,
 * all deliberate and all of the same kind — the artboard borrows components
 * from another design system, and those carry the other system's palette and
 * type. They are corrected to ours rather than copied:
 *
 *   1. "Showing 1–13 of 13" is set in Instrument Sans; the site has three
 *      families and that is not one of them. Arial, which is our prose/meta
 *      face and the role this line plays. (Same call as the game-list rank.)
 *   2. The pagination component is a stock teal one — #34b2e9 buttons,
 *      #dfeee9 borders, #135440 icons, with a magnifying glass in the first
 *      slot. Geometry kept (44x44), palette ours, and it reuses
 *      .grc-pagination, which every other paginated template already uses.
 *   3. The filter pill's chevron vector is stroke #ffffff@2 — white on a
 *      #f8f8f8 pill. Drawn in the pill's own ink.
 * ====================================================================== */

/* --- The filter panel ("Highlighted block") ---------------------------- */
.grc-gf {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--grc-border); /* #eeeeee */
	margin-block-end: 16px;
}
.grc-gf-row { display: flex; gap: 10px; align-items: stretch; }

.grc-gf-find {
	flex: 1 1 auto;
	min-inline-size: 0;
	max-inline-size: 633px;
	block-size: 54px;
	box-sizing: border-box;
	padding-inline: 15px;
	border: 1px solid var(--grc-border-strong);
	border-radius: 8px;
	background: var(--grc-surface);
	font-family: var(--grc-font-body);
	/* Measured at 700 on staging: the harvested sheets bold their inputs, and
	   the spec is Arial Regular 14.3px. Stated rather than inherited. */
	font-weight: 400;
	font-size: 14.3px;
	line-height: 24px;
	color: var(--grc-ink);
	appearance: none;
}
.grc-gf-find::placeholder { color: var(--grc-text-faint); opacity: 1; }
.grc-gf-find:focus-visible { outline: 2px solid var(--grc-link); outline-offset: 1px; }

.grc-gf-cta {
	flex: 0 0 auto;
	inline-size: 125px;
	block-size: 54px;
	box-sizing: border-box;
	border: 0;
	border-radius: 4px;
	background: var(--grc-link);
	color: var(--grc-surface);
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}
.grc-gf-cta:hover { background: var(--grc-link-hover); }

.grc-gf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.grc-gf-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	block-size: 36px;
	box-sizing: border-box;
	padding-inline: 10px;
	border: 1px solid var(--grc-border-strong);
	border-radius: 28px;
	background: #f8f8f8;
	max-inline-size: 100%;
}
.grc-gf-label,
.grc-gf-select {
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	color: var(--grc-ink);
}
.grc-gf-label { flex: 0 0 auto; margin: 0; cursor: pointer; }

/* The pill is content-width, like the artboard's four different widths
 * (129 / 115 / 133 / 170).
 *
 * WHY field-sizing. A <select> reserves room for its WIDEST option, not its
 * selected one, so with the option counts in the text ("Android (978)") the
 * four pills measured 272 / 225 / 157 / 102 -- 780px against 768 of inner
 * panel, which wrapped the row and made the panel 178px tall against the
 * artboard's 134. field-sizing: content sizes the control to what it is
 * actually showing, which is "All" until someone picks something.
 *
 * The native dropdown popup is not constrained by the control's width, so
 * narrowing it here costs nothing in the open list -- the counts stay fully
 * readable where they are useful. Where field-sizing is unsupported the
 * max-inline-size caps each pill and the row wraps to two lines, which is a
 * softer landing than a row that overflows its panel. */
.grc-gf-selectwrap { position: relative; display: inline-flex; align-items: center; min-inline-size: 0; }
.grc-gf-select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0 16px 0 0;
	margin: 0;
	cursor: pointer;
	field-sizing: content;
	max-inline-size: 150px;
	text-overflow: ellipsis;
}
.grc-gf-select:focus-visible { outline: 2px solid var(--grc-link); outline-offset: 2px; border-radius: 2px; }
.grc-gf-chev {
	position: absolute;
	inset-inline-end: 0;
	pointer-events: none;
	color: var(--grc-ink);
}

/* --- The results row --------------------------------------------------- */
.grc-gsum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-block: 0 12px;
}
.grc-gsum-count,
.grc-gsum-sort {
	margin: 0;
	font-family: var(--grc-font-body);
	font-size: 14px;
	line-height: 22px;
}
.grc-gsum-count { color: var(--grc-text-muted); }
.grc-gsum-sort { display: inline-flex; align-items: center; gap: 12px; }
.grc-gsum-sortkey { font-weight: 700; color: var(--grc-link); }
.grc-gsum-clear { color: var(--grc-text-muted); text-decoration: underline; }
.grc-gsum-clear:hover { color: var(--grc-link); }

/* --- The table ("Table/All") ------------------------------------------- */
.grc-gt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grc-gt {
	inline-size: 100%;
	min-inline-size: 620px;
	border-collapse: collapse;
	table-layout: fixed;
	font-family: var(--grc-font-body);
}
/* 250 / 183 / 183 / 183 of 800. */
.grc-gt col:first-child,
.grc-gt th:first-child,
.grc-gt td:first-child { inline-size: 31.25%; }
.grc-gt th:not(:first-child),
.grc-gt td:not(:first-child) { inline-size: 22.9167%; }

.grc-gt-h {
	block-size: 38px;
	padding-inline: 10px;
	text-align: start;
	vertical-align: middle;
	background: var(--grc-border-strong); /* #dddddd */
	border: 1px solid var(--grc-surface); /* the white gridline between cells */
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	color: var(--grc-ink);
}
.grc-gt-h a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: inherit;
	text-decoration: none;
}
.grc-gt-h a:hover { color: var(--grc-link); }
.grc-gt-h.is-sorted a { color: var(--grc-link); }
.grc-gt-sort { flex: 0 0 auto; }

.grc-gt-c {
	block-size: 39px;
	padding: 8px 10px;
	vertical-align: middle;
	background: var(--grc-surface);
	border: 1px solid var(--grc-border-strong);
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.grc-gt-c--title a { color: var(--grc-ink); text-decoration: none; font-weight: 700; }
.grc-gt-c--title a:hover { color: var(--grc-link); }
.grc-gt-c--date { font-variant-numeric: tabular-nums; }
.grc-gt tbody tr:hover .grc-gt-c { background: #fafafa; }

/* --- Rail: the "TOP GAMES THIS MONTH" banner heading ------------------- */
.grc-gtop-title {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0 0 12px;
	color: var(--grc-accent);
}
.grc-gtop-flag { flex: 0 0 28px; display: block; }
.grc-gtop-bar {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: 6px 10px;
	background: var(--grc-accent);
	font-family: var(--grc-font-ui);
	font-weight: 800;
	font-size: 16px;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--grc-surface);
}

.grc-btn-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 38px;
	margin-block-start: 12px;
	box-sizing: border-box;
	border: 1px solid var(--grc-ink);
	background: transparent;
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--grc-ink);
}
.grc-btn-secondary:hover { background: var(--grc-ink); color: var(--grc-surface); }

/* --- Rail: "game calender" rows ---------------------------------------- */
.grc-gcal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.grc-gcal-item { background: #edf9ff; }
.grc-gcal-link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: 62px;
	padding-inline: 12px;
	text-decoration: none;
}
.grc-gcal-date {
	flex: 0 0 35px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	inline-size: 35px;
	block-size: 38px;
	border-radius: 2px;
	background: var(--grc-accent);
	color: var(--grc-surface);
}
.grc-gcal-day {
	font-family: var(--grc-font-ui);
	font-weight: 800;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: -0.02em;
}
.grc-gcal-mon {
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	text-transform: uppercase;
}
.grc-gcal-name {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-family: var(--grc-font-title);
	font-weight: 700;
	font-size: 14px;
	line-height: 19px;
	color: var(--grc-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.grc-gcal-link:hover .grc-gcal-name { color: var(--grc-link); }

/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 640px) {
	.grc-gf { padding: 12px; }
	/* 633 + 10 + 125 does not fit 375, and a 125px button beside a 200px
	   field looks like an accident. Stack, full width, same order. */
	.grc-gf-row { flex-direction: column; }
	.grc-gf-find { max-inline-size: none; block-size: 48px; }
	.grc-gf-cta { inline-size: 100%; block-size: 48px; }
	.grc-gf-pill { block-size: 34px; }
	.grc-gf-select { max-inline-size: 140px; }
	.grc-gt { min-inline-size: 560px; }
	.grc-gt-c { font-size: 15px; }
	.grc-gsum { gap: 8px; }
}

/* ======================================================================
 * BRAND HOMEPAGE  —  /home-new
 *
 * Rebuilt against the design file's own inline styles rather than by eye.
 * The first pass was measurably too heavy: 22px sentence-case block titles
 * where the design uses 16px uppercase, 56px section padding against 48/44,
 * 18px card padding against 16. Those few pixels, repeated down a 7,500px
 * page, are what made it read as chunky.
 *
 * TOKENS FIRST. Every value below comes from the design file — the counts in
 * brackets are how often that value appears there, which is how the scale was
 * derived rather than invented.
 * ====================================================================== */
.hp-page, .hp-hero, .hp-ticker, .hp-dark, .hp-ad {
	/* Spacing — the design's own ladder (8px x25, 12px x22, 6px x13,
	   16px x11, 4px x10, 10px x10, 32px x6, 2px x11) */
	--hp-2:  2px;
	--hp-4:  4px;
	--hp-6:  6px;
	--hp-8:  8px;
	--hp-10: 10px;
	--hp-12: 12px;
	--hp-16: 16px;
	--hp-24: 24px;
	--hp-32: 32px;
	/*
	 * The artboard's spacing scale, complete. 40/44/48/52/56 were being
	 * written as literals in the band and section rules, which is how 56
	 * became 48 in one place and 44 became 32 in another. Named once.
	 */
	--hp-40: 40px;
	--hp-44: 44px;
	--hp-48: 48px;
	--hp-52: 52px;
	--hp-56: 56px;
	--hp-sec-pt: 48px;   /* section wrapper padding: 48px 0 44px */
	--hp-sec-pb: 44px;

	/* Type — family/weight/size/line-height as measured */
	--hp-f-ui:    var(--grc-font-ui);
	--hp-f-body:  var(--grc-font-body);
	--hp-f-title: var(--grc-font-title);

	/* Colour — this artboard's own additions, scoped here rather than
	   promoted into :root while the page is under review */
	--hp-cyan:    #34b2e9;
	--hp-magenta: #ec1c8c;
	--hp-yellow:  #fff200;
	--hp-ground:  #181715;
	--hp-line:    #3a3936;
	--hp-ondark:  #abb0b2;
	--hp-label:   #d5d8d9;

	--hp-blue-400: #009ece;                  /* --blue-400, the tab border */
	--hp-wrap:    1300px;                    /* .gr-wrap content box */
	--hp-radius:  2px;                       /* 7 of 13 radii in the file */
	--hp-border:  1px solid var(--grc-border);   /* #eeeeee, 6 occurrences */
}

/* --- news ticker ------------------------------------------------------- */
.hp-ticker { background: var(--hp-ground); border-block-end: 1px solid var(--hp-line); }
.hp-ticker-inner {
	max-inline-size: 1164px; margin-inline: auto; padding-inline: 16px;
	display: flex; align-items: center; gap: var(--hp-16); block-size: 38px;
}
.hp-ticker-tag {
	display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
	font-family: var(--hp-f-ui); font-weight: 800; font-size: 11px;
	line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
}
.hp-ticker-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #ff3b4e; flex: 0 0 6px; }
@media (prefers-reduced-motion: no-preference) {
	.hp-ticker-dot { animation: hp-pulse 2s ease-in-out infinite; }
}
@keyframes hp-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* A real scroll container; the animation rides on top of it. */
.hp-ticker-rail {
	flex: 1 1 auto; min-inline-size: 0; overflow-x: auto;
	scrollbar-width: none; display: flex; mask-image: linear-gradient(var(--hp-fade, 90deg), #000 92%, transparent);
}
.hp-ticker-rail::-webkit-scrollbar { display: none; }
.hp-ticker-run {
	list-style: none; margin: 0; padding: 0; display: flex; flex: 0 0 auto;
	/* How far one copy of the run travels. Negative = leftward, which is
	   correct only while the SECOND copy sits to the right of the first.
	   Under direction:rtl the flex main axis reverses and copy 2 sits to
	   the LEFT, so the sign reverses with it (see the RTL block). */
	--hp-mq: -100%;
}
@media (prefers-reduced-motion: no-preference) {
	.hp-ticker-run { animation: hp-marquee 48s linear infinite; }
	/* Pausable, per WCAG 2.2.2 — and because a headline sliding away from
	   under the pointer is simply annoying. */
	.hp-ticker:hover .hp-ticker-run,
	.hp-ticker:focus-within .hp-ticker-run { animation-play-state: paused; }
}
@keyframes hp-marquee { from { transform: translateX(0) } to { transform: translateX(var(--hp-mq, -100%)) } }
.hp-ticker-item { flex: 0 0 auto; white-space: nowrap; }
.hp-ticker-item a {
	display: inline-flex; align-items: baseline; gap: var(--hp-8);
	padding-inline: 14px; block-size: 38px; text-decoration: none;
	border-inline-start: 1px solid var(--hp-line); align-items: center;
}
.hp-ticker-title { font-family: var(--hp-f-body); font-size: 12.5px; line-height: 16px; color: #fff; }

.hp-ticker-date { font-family: var(--hp-f-body); font-size: 11px; line-height: 14px; color: var(--hp-ondark); }
.hp-ticker-all {
	flex: 0 0 auto; font-family: var(--hp-f-ui); font-weight: 700; font-size: 11px;
	line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hp-cyan);
	text-decoration: none;
}

/* --- sample marker ----------------------------------------------------- */
.hp-sample {
	display: inline-flex; align-items: center; flex: 0 0 auto;
	padding: 1px 6px; border: 1px dashed currentColor; border-radius: var(--hp-radius);
	color: var(--grc-text-faint); font-family: var(--hp-f-ui); font-weight: 700;
	font-size: 9px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase;
	white-space: nowrap;
}
.hp-dark .hp-sample { color: var(--hp-ondark); }

/* --- hero -------------------------------------------------------------- */
.hp-hero { background: var(--hp-ground); }
.hp-hero-grid {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 40px 56px; align-items: start; padding-block: var(--hp-sec-pt) 0;
}
.hp-hero-copy { display: flex; flex-direction: column; gap: 18px; min-inline-size: 0; }
.hp-hero-h1 {
	margin: 0; font-family: var(--hp-f-ui); font-weight: 800;
	font-size: 68px; line-height: 66px; letter-spacing: -0.03em;
	color: #fff; text-wrap: balance;
}
.hp-hero-sub {
	margin: 0; font-family: var(--hp-f-ui); font-weight: 600; font-size: 23px;
	line-height: 30px; letter-spacing: -0.01em; color: #fff; max-inline-size: 640px;
}
.hp-hero-intro {
	margin: 0; font-family: var(--hp-f-body); font-size: 16px; line-height: 26px;
	color: var(--hp-ondark); max-inline-size: 660px; text-wrap: pretty;
}
.hp-hero-index {
	display: flex; flex-direction: column; min-inline-size: 0;
	border-inline-start: 1px solid var(--hp-line); padding-inline-start: 40px;
}
.hp-hero-row {
	display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--hp-16);
	align-items: start; padding-block: var(--hp-16);
	border-block-start: 1px solid var(--hp-line); text-decoration: none;
}
.hp-hero-row:first-child { border-block-start: 0; }
.hp-hero-rule {
	display: block; inline-size: 32px; block-size: 2px; margin-block-start: 11px;
	background: var(--hp-cyan);
}

.hp-hero-rowtxt { display: flex; flex-direction: column; gap: 5px; min-inline-size: 0; }
.hp-hero-label {
	font-family: var(--hp-f-ui); font-weight: 800; font-size: 22px; line-height: 24px;
	letter-spacing: 0.02em; color: #fff; text-transform: uppercase;
}
.hp-hero-desc { font-family: var(--hp-f-body); font-size: 14px; line-height: 20px; color: var(--hp-ondark); }

.hp-stats {
	grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px; background: var(--hp-line);
}
.hp-stat {
	background: var(--hp-ground); box-sizing: border-box; padding: var(--hp-16) 18px;
	display: flex; align-items: center; gap: var(--hp-12); min-inline-size: 0;
	font-family: var(--hp-f-ui); font-weight: 600; font-size: 15px; line-height: 20px; color: #fff;
}
.hp-stat-icon { display: block; flex: 0 0 24px; inline-size: 24px; block-size: 24px; }
.hp-stat-icon svg { display: block; inline-size: 100%; block-size: 100%; fill: var(--hp-cyan); }

/* --- section openers --------------------------------------------------- */

.hp-sechead { display: flex; flex-direction: column; gap: var(--hp-12); }
.hp-flag { display: flex; inline-size: max-content; margin: 0; color: var(--grc-accent); }
.hp-flag-tip { display: block; flex: 0 0 28px; block-size: 30px; }
.hp-flag-txt {
	block-size: 30px; background: var(--grc-accent); box-sizing: border-box;
	padding: 0 22px 0 6px; display: flex; align-items: center;
	font-family: var(--hp-f-ui); font-weight: 800; font-size: 16px; line-height: 30px;
	letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
}
.hp-sech2 {
	margin: 0; font-family: var(--hp-f-ui); font-weight: 700; font-size: 32px;
	line-height: 36px; letter-spacing: -0.02em; color: var(--grc-ink);
}
.hp-secintro {
	margin: 0; font-family: var(--hp-f-body); font-size: 17px; line-height: 28px;
	color: var(--grc-text); max-inline-size: 840px; text-wrap: pretty;
}

/* Block head: title + "All x". The title is 16px UPPERCASE in the design,
   not a 22px sentence-case heading — this was the single largest source of
   visual weight in the first pass. */
/* .hp-blockhead is defined once, in the decorative layer below. */
/* The `.hp-page h2` half of this selector exists to beat the parent theme's
 * h2 rules; it also out-specifies the dark-ground colour below, which made
 * every heading on the WATCH band ink-on-ink and invisible. Both grounds are
 * therefore stated at the same weight. */
.hp-blockh2, .hp-page h2.hp-blockh2 {
	margin: 0; font-family: var(--hp-f-ui); font-weight: 800; font-size: 16px;
	line-height: 20px; letter-spacing: 0.03em; text-transform: uppercase;
	color: var(--grc-ink);
}
.hp-dark .hp-blockh2, .hp-page .hp-dark h2.hp-blockh2 { color: #fff; }
.hp-more {
	font-family: var(--hp-f-body); font-weight: 700; font-size: 15px; line-height: 20px;
	color: var(--grc-link); text-decoration: none; white-space: nowrap;
}



/* --- pillars ----------------------------------------------------------- */
.hp-pillars {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px; background: var(--grc-border);
}
.hp-pillars--dark { background: var(--hp-line); }
.hp-pillar {
	background: var(--grc-surface); box-sizing: border-box; padding: 22px var(--hp-24) var(--hp-24);
	display: flex; flex-direction: column; gap: var(--hp-10); min-inline-size: 0;
}
/* On the WATCH band the cells are the ground itself and the 1px grid gap is
 * what draws the hairlines — they are not light cards on a dark band. */
.hp-pillars--dark .hp-pillar { background: var(--hp-ground); }
.hp-pillar-t {
	font-family: var(--hp-f-ui); font-weight: 800; font-size: 20px; line-height: 24px;
	letter-spacing: 0.03em; text-transform: uppercase; color: var(--grc-ink);
}
.hp-pillar-i { font-family: var(--hp-f-body); font-size: 14px; line-height: 22px; color: var(--grc-text); }

/* --- the card ---------------------------------------------------------- */
.hp-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--hp-12); }
.hp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hp-12); min-inline-size: 0; align-content: start; }


.hp-card { min-inline-size: 0; border: var(--hp-border); background: var(--grc-surface); display: flex; }
.hp-card-link { display: flex; flex-direction: column; text-decoration: none; inline-size: 100%; min-inline-size: 0; }
.hp-card-media { position: relative; display: block; overflow: hidden; border-radius: var(--hp-radius); }
.hp-card-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s ease; }
.hp-card-link:hover .hp-card-media img { transform: scale(1.04); }
.hp-card--lead .hp-card-media { block-size: 420px; }
.hp-card--feature .hp-card-media { block-size: 360px; }   /* artboard: 360, not 380 */
.hp-card--grid .hp-card-media { block-size: 132px; }

.hp-card-score { position: absolute; inset-inline-start: 6px; inset-block-end: 6px; }
.hp-card-body { box-sizing: border-box; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: var(--hp-8); }
.hp-card-title { margin: 0; font-family: var(--hp-f-title); font-weight: 700; color: var(--grc-ink); }
.hp-card--lead .hp-card-title,
.hp-card--feature .hp-card-title { font-size: 30px; line-height: 32px; letter-spacing: -0.02em; }
/* The artboard's grid card title is Outfit 600 16/19, not the lead
   card's Plus Jakarta Sans — two different faces by card size, which is
   what the three-family system says and what the archives already do. */
.hp-card--grid .hp-card-title {
	font-family: var(--hp-f-ui); font-weight: 600;
	font-size: 16px; line-height: 19px; letter-spacing: normal;
}
.hp-card-excerpt { font-family: var(--hp-f-body); font-size: 16px; line-height: 24px; color: var(--grc-text); }

.hp-card--grid .hp-card-excerpt { display: none; }


/* --- guide cards ------------------------------------------------------- */
.hp-guides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hp-12); }
.hp-guide {
	border: var(--hp-border); background: var(--grc-surface); box-sizing: border-box;
	padding: 22px 24px 24px; display: flex; flex-direction: column; gap: var(--hp-12);
}
.hp-guide-link { display: flex; flex-direction: column; gap: var(--hp-8); text-decoration: none; flex: 1 1 auto; }
.hp-guide-title {
	margin: 0; font-family: var(--hp-f-ui); font-weight: 700; font-size: 19px;
	line-height: 24px; letter-spacing: -0.01em; color: var(--grc-ink);
}
.hp-guide-lead { color: var(--grc-link); }
.hp-guide-excerpt { font-family: var(--hp-f-body); font-size: 14px; line-height: 21px; color: var(--grc-text); flex-grow: 1; }
.hp-guide-by { display: flex; align-items: center; gap: var(--hp-10); }
.hp-guide-face {
	inline-size: 38px; block-size: 38px; border-radius: 50%; flex: 0 0 38px;
	object-fit: cover; display: flex; align-items: center; justify-content: center;
}
.hp-guide-face--initials {
	background: var(--grc-link); color: #fff;
	font-family: var(--hp-f-ui); font-weight: 800; font-size: 14px;
}
.hp-guide-who { display: flex; flex-direction: column; gap: var(--hp-2); min-inline-size: 0; }
.hp-guide-name { font-family: var(--hp-f-ui); font-weight: 700; font-size: 13px; line-height: 16px; color: var(--grc-link); }
.hp-guide-role { font-family: var(--hp-f-body); font-weight: 700; font-size: 12px; line-height: 15px; color: var(--grc-text); }

/* --- sponsor band ------------------------------------------------------ */
.hp-ad { background: var(--hp-ground); }
.hp-ad-grid {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px; align-items: center; padding-block: var(--hp-32);
}
.hp-ad-mark {
	position: absolute; inset-block-start: 8px; inset-inline-end: 16px;
	font-family: var(--hp-f-body); font-size: 10px; line-height: 14px;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--hp-ondark);
	border: 1px solid var(--hp-line); padding: 1px 4px;
}
.hp-ad-main { display: flex; flex-direction: column; gap: var(--hp-12); min-inline-size: 0; }
.hp-ad-eyebrow {
	font-family: var(--hp-f-ui); font-weight: 800; font-size: 12px; line-height: 14px;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-cyan);
}
.hp-ad-name { font-family: var(--hp-f-ui); font-weight: 800; font-size: 38px; line-height: 40px; letter-spacing: -0.025em; color: #fff; }
.hp-ad-blurb { font-family: var(--hp-f-body); font-size: 16px; line-height: 25px; color: var(--hp-ondark); max-inline-size: 640px; text-wrap: pretty; }
.hp-ad-legal { border-block-start: 1px solid var(--hp-line); padding-block-start: var(--hp-12); display: flex; flex-direction: column; gap: var(--hp-4); }
.hp-ad-partner { font-family: var(--hp-f-ui); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-label); }
.hp-ad-disc { font-family: var(--hp-f-body); font-size: 13px; line-height: 19px; color: var(--hp-ondark); max-inline-size: 640px; }
.hp-ad-side { display: flex; flex-direction: column; gap: var(--hp-10); min-inline-size: 0; }
.hp-ad-offer { border: 1px solid #444444; box-sizing: border-box; padding: 14px 16px; display: flex; flex-direction: column; gap: var(--hp-4); }
.hp-ad-award { font-family: var(--hp-f-ui); font-weight: 700; font-style: italic; font-size: 11px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grc-s7); }
.hp-ad-bonus { font-family: var(--hp-f-ui); font-weight: 700; font-size: 20px; line-height: 24px; color: #fff; }
.hp-ad-cta {
	block-size: 46px; background: var(--hp-magenta); display: flex;
	align-items: center; justify-content: center; font-family: var(--hp-f-ui);
	font-weight: 800; font-size: 14px; line-height: 18px; letter-spacing: 0.08em;
	text-transform: uppercase; color: #fff; text-decoration: none;
}
.hp-ad-cta:hover { background: var(--hp-magenta-dark); color: #fff; }
.hp-ad-cta.is-inert { opacity: .55; cursor: default; }
.hp-ad-review { font-family: var(--hp-f-body); font-size: 12px; line-height: 16px; color: var(--hp-ondark); text-align: center; text-decoration: underline; }
.hp-ad-review:hover { color: #fff; }

/* --- casino tiles ------------------------------------------------------ */
.hp-dark { background: var(--hp-ground); }

.hp-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--hp-12); }
.hp-slot { min-inline-size: 0; overflow: hidden; border-radius: var(--hp-radius); background: var(--hp-ground); display: flex; flex-direction: column; }
.hp-slot-cover { position: relative; block-size: 167px; overflow: hidden; }
.hp-slot-cover--0 { background: linear-gradient(150deg, #d9276e, #7a1240); }
.hp-slot-cover--1 { background: linear-gradient(150deg, #1f6feb, #10305e); }
.hp-slot-cover--2 { background: linear-gradient(150deg, #f0a020, #7a4c05); }
.hp-slot-cover--3 { background: linear-gradient(150deg, #17a67a, #0a4433); }
.hp-slot-cover--4 { background: linear-gradient(150deg, #7b5cd6, #35215e); }
.hp-slot-demo {
	position: absolute; inset-inline-end: 8px; inset-block-end: 8px; block-size: 22px;
	border-radius: 12px; background: #fff; box-sizing: border-box; padding: 0 9px;
	display: flex; align-items: center; gap: 5px;
	font-family: var(--hp-f-ui); font-weight: 600; font-size: 12px; line-height: 18px; color: var(--hp-ground);
}
.hp-slot-play { inline-size: 0; block-size: 0; border-inline-start: 7px solid var(--hp-ground); border-block-start: 4px solid transparent; border-block-end: 4px solid transparent; }
.hp-slot-body { box-sizing: border-box; padding: var(--hp-12) var(--hp-16) var(--hp-16); display: flex; flex-direction: column; gap: var(--hp-8); }
.hp-slot-title { font-family: var(--hp-f-ui); font-weight: 600; font-size: 16px; line-height: 22px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-slot-award { font-family: var(--hp-f-body); font-style: italic; font-size: 10px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hp-yellow); }
.hp-slot-score { inline-size: max-content; block-size: 28px; background: rgba(238,238,238,.1); box-sizing: border-box; padding: 6px 8px; display: flex; align-items: flex-end; gap: var(--hp-8); }
.hp-slot-n { font-family: var(--hp-f-ui); font-weight: 600; font-size: 17.6px; line-height: 22px; color: #fff; }
.hp-slot-of { font-family: var(--hp-f-ui); font-weight: 400; font-size: 12px; line-height: 18px; color: #fff; }
.hp-slot-verdict { font-family: var(--hp-f-ui); font-weight: 400; font-size: 10px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.hp-slot-prov { font-family: var(--hp-f-body); font-size: 12px; line-height: 16px; color: var(--hp-ondark); }

/* --- odds cards -------------------------------------------------------- */
.hp-odds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hp-12); }
.hp-oddscard { border: var(--hp-border); background: var(--grc-surface); box-sizing: border-box; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: var(--hp-10); min-inline-size: 0; }
.hp-oddscard-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hp-8); }
.hp-odds-market { font-family: var(--hp-f-ui); font-weight: 700; font-size: 12px; line-height: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grc-ink); }
.hp-odds-when { font-family: var(--hp-f-body); font-size: 11px; line-height: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grc-text-faint); white-space: nowrap; }
.hp-odds-sides { display: flex; flex-direction: column; gap: var(--hp-6); }
.hp-odds-side { display: flex; align-items: center; justify-content: space-between; gap: var(--hp-10); min-inline-size: 0; }
.hp-odds-team { font-family: var(--hp-f-ui); font-weight: 700; font-size: 15px; line-height: 18px; color: var(--grc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-odds-price { font-family: var(--hp-f-ui); font-weight: 800; font-size: 17px; line-height: 20px; color: var(--grc-ink); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.hp-oddscard-foot { border-block-start: 1px solid var(--grc-border); padding-block-start: var(--hp-8); display: flex; flex-direction: column; gap: var(--hp-2); }
.hp-odds-title { font-family: var(--hp-f-ui); font-weight: 600; font-size: 13px; line-height: 17px; color: var(--grc-ink); }
.hp-odds-meta { font-family: var(--hp-f-body); font-size: 11px; line-height: 14px; color: var(--grc-text-faint); }
.hp-odds-legal { margin: var(--hp-10) 0 0; display: flex; gap: var(--hp-10); flex-wrap: wrap; font-family: var(--hp-f-body); font-size: 12px; line-height: 17px; color: var(--grc-text-muted); }
.hp-odds-18 { font-weight: 700; color: var(--grc-ink); }

/* --- stream cards ------------------------------------------------------ */
.hp-streams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hp-12); }
.hp-stream { border: var(--hp-border); background: var(--grc-surface); box-sizing: border-box; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: var(--hp-10); min-inline-size: 0; }
.hp-stream-top { display: flex; align-items: center; justify-content: space-between; gap: var(--hp-8); }
.hp-stream-state { display: inline-flex; align-items: center; gap: 5px; font-family: var(--hp-f-ui); font-weight: 800; font-size: 10px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grc-text-muted); }
.hp-stream-state.is-live { color: #d92133; }
.hp-stream-dot { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; }
.hp-stream-when { font-family: var(--hp-f-body); font-size: 11px; line-height: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grc-text-faint); }
.hp-stream-match { margin: 0; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--hp-8); align-items: center; }
.hp-stream-team { font-family: var(--hp-f-ui); font-weight: 800; font-size: 18px; line-height: 22px; letter-spacing: -0.01em; color: var(--grc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-stream-team:last-of-type { text-align: end; }
.hp-stream-vs { font-family: var(--hp-f-ui); font-weight: 800; font-size: 11px; line-height: 12px; letter-spacing: 0.08em; color: var(--grc-text-faint); }
.hp-stream-foot { border-block-start: 1px solid var(--grc-border); padding-block-start: var(--hp-8); display: flex; flex-direction: column; gap: var(--hp-2); }
.hp-stream-title { font-family: var(--hp-f-ui); font-weight: 600; font-size: 14px; line-height: 18px; color: var(--grc-ink); }
.hp-stream-meta { font-family: var(--hp-f-body); font-size: 11px; line-height: 14px; color: var(--grc-text-faint); }
.hp-stream-chan { font-family: var(--hp-f-ui); font-weight: 700; font-size: 12px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grc-link); }

/* --- GRTV + Latest: pills --------------------------------------------- */
/* --- filter rows -------------------------------------------------------
 * The row is here; the CHIP is the shared filter-chip component at the end
 * of this file, alongside /games/ and /video/.
 *
 * It was TabsPrimary from the design bundle — 40px, borderless, 700 15/23.
 * That is what the artboard draws, but it is not what the two archives use,
 * and a reader who filters GRTV on the homepage and then filters the same
 * clips on /video/ should be operating the same control. Consistency across
 * the site wins over the artboard on this one, deliberately.
 */
.hp-tabs { display: flex; flex-wrap: wrap; gap: var(--hp-8); margin: 0 0 var(--hp-16); }

.hp-vids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hp-12); }
.hp-vid a { display: flex; flex-direction: column; gap: var(--hp-6); text-decoration: none; }
.hp-vid-media { position: relative; display: block; overflow: hidden; border-radius: var(--hp-radius); aspect-ratio: 16 / 9; background: var(--grc-page); }
.hp-vid-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s ease; }
.hp-vid a:hover .hp-vid-media img { transform: scale(1.04); }
.hp-vid-play {
	position: absolute; inset-block-end: 8px; inset-inline-start: 8px;
	inline-size: 0; block-size: 0; border-inline-start: 10px solid #fff;
	border-block-start: 6px solid transparent; border-block-end: 6px solid transparent;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.hp-vid-title { margin: 0; font-family: var(--hp-f-ui); font-weight: 600; font-size: 15px; line-height: 19px; color: var(--grc-ink); }
.hp-vid-date { font-family: var(--hp-f-body); font-size: 11px; line-height: 1; color: var(--grc-text-faint); }

/* --- discover split ---------------------------------------------------- */
.hp-disc { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 40px; align-items: start; }
.hp-disc-side { display: flex; flex-direction: column; gap: 28px; min-inline-size: 0; }

/* --- responsive -------------------------------------------------------- */
/* --- page-level: the ticker must sit flush under the header ------------
 * The harvested sheets give #main a 15px top padding, which — with the
 * header's own 2px bottom border — left a 17px band of page ground between
 * the header and the ticker. Every other template wants that padding; this
 * one starts with a full-bleed dark band, so it is removed here only.
 */
body.grc-home-new #main { padding-block-start: 0; }



/* ======================================================================
 * BRAND HOMEPAGE — the decorative layer
 *
 * The measured pass matched type and box metrics and still looked wrong,
 * because I had read the design's styles and skipped its payload. Most of
 * what gives those artboards their character is bundled binary assets and
 * small decorations I never extracted:
 *
 *   - a 1905x613 diagonal-stripe SVG layered over every dark section
 *   - a 56x220 icon sheet, in the brand's cyan and magenta, behind the
 *     six-cell stat strip (I had substituted flat monochrome icons)
 *   - a flag glyph and a 2px blue rule under every block head
 *   - a 34x3 blue rule above every pillar title
 *   - guide cards on pale blue, not white
 *   - blue odds prices, badge-style stream states
 *
 * Both assets are now real files in assets/img/, with their C2PA provenance
 * metadata stripped (it was half the file size and is not artwork).
 * ====================================================================== */

/* --- the diagonal texture --------------------------------------------- */
.hp-hero, .hp-ad, .hp-dark { position: relative; isolation: isolate; }
.hp-hero::before, .hp-ad::before, .hp-dark::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url("../img/hp-pattern.svg") center center / cover no-repeat;
	pointer-events: none;
}
/* The artboard runs the WATCH band's copy at .7, so its texture is softer. */
.hp-dark::before { opacity: .7; }

/* --- stat icons: the design's own sheet -------------------------------- */
.hp-stat-icon {
	display: block; flex: 0 0 24px; inline-size: 24px; block-size: 24px;
	background-image: url("../img/hp-icons.svg");
	background-repeat: no-repeat;
	background-size: 84px 330px;   /* 56x220 natural at 1.5x */
}

/* --- block head -------------------------------------------------------
 *
 * WHY THIS IS TWO NESTED FLEXES AND NOT ONE.
 *
 * The artboard's head is a space-between row with exactly TWO children: a
 * name group (triangle + title) and the "All …" link. The first pass put
 * the triangle, the title and the link in one space-between row as three
 * children, which distributes them — triangle hard left, link hard right,
 * TITLE IN THE MIDDLE. That is the whole of the reported defect "headings
 * are centered aligned not left"; it was never a text-align. Grouping the
 * name restores it, and text-align is pinned to start anyway so nothing
 * inherited from the parent theme can re-centre it.
 *
 * The 2px rule is the row's own bottom border with 8px of clearance, which
 * is the artboard's flex column gap:8 between the row and its rule div.
 */
.hp-blockhead {
	display: block; text-align: start;
	padding-block-end: var(--hp-8); margin-block-end: var(--hp-12);
	border-block-end: 2px solid var(--grc-link);
}
/* Third child of the head group, 8px below the rule — so it goes after the
   border, which means the border moves up onto the row. */
.hp-blockhead:has(.hp-bh-note) { padding-block-end: 0; border-block-end: 0; }
.hp-blockhead:has(.hp-bh-note) .hp-bh-row {
	padding-block-end: var(--hp-8); border-block-end: 2px solid var(--grc-link);
}
.hp-bh-note {
	margin: var(--hp-8) 0 0;
	font-family: var(--hp-f-body); font-size: 12px; line-height: 17px;
	color: var(--grc-text-faint);
}
.hp-bh-note .hp-odds-18 { font-weight: 700; color: var(--grc-ink); }
.hp-dark .hp-blockhead:has(.hp-bh-note) .hp-bh-row { border-block-end-color: var(--hp-cyan); }
.hp-bh-row {
	display: flex; flex-direction: row; gap: var(--hp-16);
	align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.hp-bh-name { display: flex; flex-direction: row; gap: var(--hp-8); align-items: center; min-inline-size: 0; }
.hp-bh-tri { display: block; flex: 0 0 10px; color: var(--grc-link); }
.hp-dark .hp-blockhead { border-block-end-color: var(--hp-cyan); }
.hp-dark .hp-bh-tri { color: var(--hp-cyan); }

/* --- rail head: SectionTitle2 -----------------------------------------
 * A different object from the block head, and drawn differently in the
 * design: an 8x8 wedge, 16/18 rather than 16/20, and a pill-rounded rule
 * in --blue-500 where the main heads use --blue-600.
 */
.hp-railhead { display: flex; flex-direction: column; gap: var(--hp-8); text-align: start; margin-block-end: var(--hp-12); }
.hp-rh-row { display: flex; flex-direction: row; gap: 3px; align-items: center; }
.hp-rh-tri {
	display: inline-flex; align-items: center; flex: 0 0 18px;
	inline-size: 18px; padding-inline-start: 4px; box-sizing: border-box;
	color: var(--grc-accent);
}
.hp-rh-tri svg { display: block; }
.hp-rh-name {
	margin: 0; font-family: var(--hp-f-ui); font-weight: 800; font-size: 16px;
	line-height: 18px; text-transform: uppercase; color: var(--grc-ink);
}
.hp-rh-rule { display: block; block-size: 2px; border-radius: 100px; background: var(--grc-accent); }

/* --- Popular This Week ------------------------------------------------- */
.hp-railblock { display: flex; flex-direction: column; }
.hp-poplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hp-6); }
.hp-pop {
	display: flex; flex-direction: row; gap: var(--hp-12); align-items: flex-start;
	padding-block-end: var(--hp-12); border-block-end: 1px solid var(--grc-border);
}
.hp-pop:last-child { padding-block-end: 0; border-block-end: 0; }
.hp-pop-rank {
	flex: 0 0 12px; inline-size: 12px; text-align: center;
	font-family: var(--hp-f-ui); font-weight: 800; font-size: 18px; line-height: 18px;
	letter-spacing: -0.02em; color: var(--grc-accent);
}
.hp-pop-body { display: flex; flex-direction: column; gap: var(--hp-4); min-inline-size: 0; }
.hp-pop-title {
	font-family: var(--hp-f-title); font-weight: 600; font-size: 14px; line-height: 19px;
	color: var(--grc-ink); text-decoration: none;
}
.hp-pop-by { font-family: var(--hp-f-body); font-weight: 700; font-size: 10px; line-height: 1; color: var(--grc-accent); }

/* --- pillars: the rule above the title -------------------------------- */
.hp-pillar-rule { display: block; inline-size: 34px; block-size: 3px; background: var(--grc-link); }
.hp-pillars--dark .hp-pillar-rule { background: var(--hp-cyan); }
.hp-pillar-i { color: var(--grc-text-muted); }   /* #666, not #444 */
.hp-pillars--dark .hp-pillar-t { color: #fff; }
.hp-pillars--dark .hp-pillar-i { color: var(--hp-ondark); }

/* --- guide cards: pale blue, per the artboard -------------------------- */
.hp-guide {
	background: #eef7ff; border: 1px solid #d6eafc;
	padding: 18px 20px 20px;
}

/* --- odds: the price is the link blue --------------------------------- */
.hp-odds-price { color: var(--grc-link); }
.hp-odds-side { padding: 0; background: none; }
.hp-odds-sides { gap: var(--hp-8); }
.hp-odds-side + .hp-odds-side { border-block-start: 1px solid var(--grc-border); padding-block-start: var(--hp-8); }

/* --- stream state: a badge with an inset hairline --------------------- */
.hp-stream-state {
	padding: 3px 7px; box-shadow: inset 0 0 0 1px #444444;
	color: var(--grc-ink); background: transparent;
}
.hp-stream-state.is-live { background: #9146ff; color: #fff; box-shadow: none; }
.hp-stream-when { color: var(--grc-text-faint); }
.hp-dark .hp-stream { background: transparent; border-color: #333333; }
.hp-dark .hp-stream-team, .hp-dark .hp-stream-title { color: #fff; }
.hp-dark .hp-stream-state { color: var(--hp-label); }
.hp-dark .hp-stream-meta, .hp-dark .hp-stream-when { color: var(--grc-text-faint); }
.hp-dark .hp-stream-foot { border-block-start-color: #333333; }
.hp-dark .hp-stream-chan { color: var(--hp-cyan); }
.hp-dark .hp-stream-vs { color: var(--grc-text-faint); }

/* --- GRTV sits on the dark band too ----------------------------------- */
.hp-dark .hp-vid-title { color: #fff; }
.hp-dark .hp-vid-date { color: var(--grc-text-faint); }
/* The dark-ground tab states live with TabsPrimary above. */

/* The score pill rides on the media, as it does on the review templates. */
.hp-card-score { position: absolute; inset-inline-start: 6px; inset-block-end: 6px; z-index: 2; }

/* --- dark-ground section openers -------------------------------------- */
.hp-dark .hp-sech2 { color: #fff; }
.hp-dark .hp-secintro { color: var(--hp-ondark); }




/* ======================================================================
 * BRAND HOMEPAGE — the canvas
 *
 * The artboard's .gr-wrap is a 1300px content box inside 16px gutters —
 * 1332px overall. The rest of this build runs on 1132 inside 1164, which
 * is the shell the harvested templates were measured against and which is
 * not moving. So the wider canvas is scoped to this one body class.
 *
 * This is the "hero is not full width" defect: the dark band was already
 * edge to edge, but its CONTENT was inset 100px further than the design on
 * a 1440 viewport, so the h1 and the index column both sat short. Widening
 * the wrap fixes the hero and every grid below it in one move, which is
 * the point of fixing it here rather than on .hp-hero.
 * ====================================================================== */








/* ======================================================================
 * BRAND HOMEPAGE — the canvas and the vertical rhythm
 *
 * TWO THINGS WERE WRONG AND THEY LOOKED LIKE ONE.
 *
 * 1. WIDTH. #main is `width: var(--grc-max)` centred — 1300px — and the
 *    bands were set to `inline-size: 100%`, which is 100% OF THAT. So the
 *    hero and the sponsor band stopped at 1300 and read as boxed rather
 *    than full width. The theme already has an escape for exactly this,
 *    used by the footer, the article hero, the review hero and the GRTV
 *    belt: size from --grc-vw (documentElement.clientWidth, published by
 *    child.js) and pull back with a negative margin. The bands use that
 *    one now rather than a new mechanism.
 *
 *    The artboard's container is a 1300px content box in 16px gutters, so
 *    --grc-max is raised to 1332 for this body class and .grc-wrap yields
 *    exactly 1300 inside it. Content lands at the same x as before; only
 *    the bands move.
 *
 * 2. RHYTHM. The artboard's sections are ONE container with column gap 32
 *    and 56 or 48 of top padding. Shipping each block as its own <section>
 *    with 48 top and 44 bottom put 92px between blocks that should have
 *    32. The gaps below are the artboard's, stated once here, rather than
 *    margins carried on each part.
 * ====================================================================== */
body.grc-home-new { --grc-max: 1332px; }

body.grc-home-new .hp-ticker,
body.grc-home-new .hp-hero,
body.grc-home-new .hp-ad,
body.grc-home-new .hp-dark {
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
}
@media (max-width: 1332px) {
	body.grc-home-new .hp-ticker,
	body.grc-home-new .hp-hero,
	body.grc-home-new .hp-ad,
	body.grc-home-new .hp-dark {
		inline-size: auto;
		margin-inline: 0;
	}
}
/*
 * THE CONTENT BOX. .grc-wrap is 1164 site-wide (1132 of content), which is
 * the shell the harvested templates were measured against. The artboard's
 * container is 1300 of content in 16px gutters — 1332 — and #main is
 * already widened to that above. Without this the wrap stayed at 1164
 * INSIDE a 1332 #main: every grid on the page ran 168px narrower than the
 * design while its cards kept their drawn padding, which is most of what
 * "too chunky" was. Scoped to this body class; nothing else moves.
 */
body.grc-home-new .grc-wrap { max-inline-size: var(--grc-max); }

/* --- band padding, off the artboard ----------------------------------- */
.hp-hero        { padding-block: var(--hp-48) var(--hp-44); }
.hp-hero-grid   { padding-block: 0; }
.hp-ad          { padding-block: 34px; margin-block-start: var(--hp-48); }
.hp-dark--watch { padding-block: var(--hp-52) var(--hp-44); margin-block-start: var(--hp-56); }
.hp-dark--watch .hp-sec { padding-block: 0; }

.hp-sec       { padding-block: var(--hp-56) 0; }
.hp-sec--48   { padding-block-start: var(--hp-48); }
.hp-sec--last { padding-block-end: var(--hp-48); }

/* --- one gap scale inside a section -----------------------------------
 * 32 between blocks, 12 from a head to the thing it heads, 16 where a
 * filter row sits between them, 22 from a section opener to the first
 * head (the artboard's 12 gap plus the 10px of padding on that head).
 */
.hp-sec > *                                { margin-block-end: var(--hp-32); }
.hp-sec > :last-child                      { margin-block-end: 0; }
.hp-sec > .hp-blockhead                    { margin-block-end: var(--hp-12); }
.hp-sec > .hp-tabs                         { margin-block-end: var(--hp-16); }
.hp-sec > .hp-blockhead:has(+ .hp-tabs)    { margin-block-end: var(--hp-16); }
.hp-sec > .hp-sechead:has(+ .hp-blockhead) { margin-block-end: 22px; }

/* The Discover feature card and the grid under it are one column. */
.hp-disc-main { display: flex; flex-direction: column; gap: var(--hp-16); }

/* --- the h1 words -----------------------------------------------------
 * Plain spans. They carry no hover and no transition, because there is
 * nothing to click: an interactive-looking h1 that does not respond is
 * worse than a static one.
 */
.hp-hero-w { display: block; color: inherit; }
.hp-hero-w--accent { color: var(--hp-cyan); }

body.grc-home-new [id="play"],
body.grc-home-new [id="watch"],
body.grc-home-new [id="discover"] { scroll-margin-block-start: 76px; }

/* ======================================================================
 * RESPONSIVE — the artboard's breakpoints, not mine
 *
 * The design ships its own media queries and they are 1400 / 1100 / 820 /
 * 640. I had built to 1332 / 1040 / 560, which is why a 1280 desktop still
 * showed five slot tiles where the design shows three, and a 1024 tablet
 * showed three pillars and three stat columns where the design shows one
 * and two. Every column count below is the artboard's own; nothing is
 * inferred except where the design is silent, and those are marked.
 *
 *   @1400  slot tiles 5 -> 3
 *   @1100  hero, pillars, split, discover and the sponsor band go to one
 *          column; stats to two; every 4-up card grid to two; slots to two
 *   @640   every card grid to one; h1 to 52/52
 *
 * 820 is the footer's own breakpoint and belongs to the footer.
 * ====================================================================== */
@media (max-width: 1400px) {
	.hp-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.hp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--hp-24); }
	.hp-hero-index { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--hp-line); }
	.hp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp-pillars { grid-template-columns: minmax(0, 1fr); }
	.hp-split { grid-template-columns: minmax(0, 1fr); }
	.hp-disc { grid-template-columns: minmax(0, 1fr); gap: var(--hp-32); }
	.hp-disc-side { max-inline-size: 520px; }
	.hp-ad-grid { grid-template-columns: minmax(0, 1fr); gap: var(--hp-24); }
	.hp-ad-side { max-inline-size: 360px; }
	.hp-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp-odds, .hp-streams, .hp-guides, .hp-vids,
	.hp-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* The design is silent on band padding; these keep the same ratio the
	   artboard uses at full size rather than inventing a new rhythm. */
	.hp-dark--watch { padding-block: 40px 36px; margin-block-start: 40px; }
	.hp-ad { margin-block-start: 36px; }
}

@media (max-width: 640px) {
	.hp-hero-grid { padding-block-start: var(--hp-24); }
	.hp-hero-h1 { font-size: 52px; line-height: 52px; }   /* the artboard's own */
	.hp-hero-sub { font-size: 18px; line-height: 24px; }
	.hp-hero-label { font-size: 18px; line-height: 22px; }
	.hp-stats { grid-template-columns: minmax(0, 1fr); }
	.hp-sech2 { font-size: 24px; line-height: 28px; }
	.hp-secintro { font-size: 15px; line-height: 24px; }
	.hp-slots, .hp-odds, .hp-streams, .hp-guides, .hp-vids,
	.hp-grid3 { grid-template-columns: minmax(0, 1fr); }
	.hp-card--lead .hp-card-media, .hp-card--feature .hp-card-media { block-size: 220px; }
	.hp-card--lead .hp-card-title, .hp-card--feature .hp-card-title { font-size: 22px; line-height: 26px; }
	.hp-ad-name { font-size: 28px; line-height: 32px; }

	/*
	 * THE AD BADGE JOINS THE EYEBROW'S LINE ON NARROW SCREENS.
	 *
	 * .hp-ad-mark is absolute at top:8/right:16 against .hp-ad-grid, so on
	 * one column it sat on a line of its own above the eyebrow and cost a
	 * row of vertical space for two words. Dropping it to the grid's own
	 * padding edge puts it on the eyebrow's line — the eyebrow starts at
	 * the top of .hp-ad-main, which is the grid's padding-top — with the
	 * 2px lift that centres an 18px bordered badge on a 14px line box.
	 *
	 * They stay in their own parents; nothing about the markup changes.
	 * The eyebrow takes room for the badge so a long one cannot slide
	 * underneath it.
	 */
	.hp-ad-mark { inset-block-start: calc(var(--hp-32) - 2px); }
	.hp-ad-eyebrow { padding-inline-end: 56px; }

	.hp-hero      { padding-block: var(--hp-32); }
	.hp-sec       { padding-block: var(--hp-32) 0; }
	.hp-sec--48   { padding-block-start: var(--hp-32); }
	.hp-sec--last { padding-block-end: var(--hp-32); }
	.hp-sec > *   { margin-block-end: var(--hp-24); }
	.hp-dark--watch { padding-block: var(--hp-32); margin-block-start: var(--hp-32); }
	.hp-pillar { padding: 18px 20px 20px; }
}

/* --- filter rows on a phone: scroll, don't wrap -------------------------
 * The same call the archive tab strip makes, and the same breakpoint: six
 * localised section names will not wrap into anything readable on a 375px
 * screen, and dropping any of them would hide a section from the reader.
 * Mask on the trailing edge so it reads as "there is more", and momentum
 * scrolling on iOS.
 */
@media (max-width: 560px) {
	.hp-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-inline: calc(var(--grc-gutter, 16px) * -1);
		padding-inline: var(--grc-gutter, 16px);
		mask-image: linear-gradient(var(--hp-fade, 90deg), #000 92%, transparent);
	}
	.hp-tabs::-webkit-scrollbar { display: none; }
	.hp-tab { flex-shrink: 0; }
}

/* --- swap states -------------------------------------------------------- */
[data-grc-hpswap][aria-busy="true"] { opacity: .45; transition: opacity .12s ease; }
.hp-empty {
	margin: 0; padding: 24px 0;
	font-family: var(--hp-f-body); font-size: 15px; line-height: 24px;
	color: var(--grc-text-muted);
}
.hp-dark .hp-empty { color: var(--hp-ondark); }

/* The Latest block is one column: feature card, then the grid. */
.hp-latest { display: flex; flex-direction: column; gap: var(--hp-16); }

/* --- live streams: the channel mark the artboard puts on each card ------ */
.hp-stream-chanrow { display: flex; align-items: center; gap: var(--hp-8); }
.hp-stream-face {
	inline-size: 30px; block-size: 30px; flex: 0 0 30px; background: #fff;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hp-stream-face img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.hp-stream-solo { grid-column: 1 / -1; text-align: start; }

/* --- sponsor band: the campaign shortcode's own column ------------------
 * The plugin brings its own card. Give it the column and stay out of its
 * way — nothing here restyles the offer, only its layout mode.
 */
.hp-ad-campaign { min-inline-size: 0; }
.hp-ad-campaign > :first-child { margin-block-start: 0; }
.hp-ad-campaign > :last-child { margin-block-end: 0; }
.hp-ad-campaign img { max-inline-size: 100%; block-size: auto; }

/*
 * THE STACKED (MOBILE) OFFER, AT EVERY WIDTH.
 *
 * bm_toplist_gamereactor lays its offer out as a grid and switches form on
 * VIEWPORT width:
 *
 *   .toplist-gamereactor__offer            { padding: 20px; gap: 16px 24px;
 *                                            grid-template-areas: 'logo main'
 *                                                                 'terms terms';
 *                                            grid-template-columns: 180px auto; }
 *   @media (max-width: 991px) { …          { padding: 16px; gap: 16px;
 *                                            grid-template-areas: 'logo'
 *                                                                 'main'
 *                                                                 'terms';
 *                                            grid-template-columns: auto; } }
 *
 * On the homepage the offer sits in a 320px column while the viewport is
 * 1440 wide, so the plugin picks the two-column form and tries to fit a
 * 180px logo track plus the offer beside it into 320. A container query
 * would be the right instrument, but the switch is the plugin's and it is
 * written against the viewport, so the only honest fix is to re-state the
 * mobile declarations here, scoped to this column.
 *
 * Four declarations, copied verbatim from the rule above, and no more: at
 * 0,2,0 they out-specify the plugin's own 0,1,0 in either branch of its
 * media query without !important and without touching how the card looks.
 * If the plugin changes that breakpoint or those values, THIS BLOCK IS THE
 * COPY THAT GOES STALE — it is the one place to re-sync.
 */
.hp-ad-campaign .toplist-gamereactor__offer {
	padding: 16px;
	gap: 16px;
	grid-template-areas: 'logo' 'main' 'terms';
	grid-template-columns: auto;
}

/*
 * …and centre the brand mark once it is stacked.
 *
 * In the two-column form the logo wrapper filled a 180px track, so it was
 * centred by the track. With the track gone it inherits the full width of
 * the row and its children — the logo tile and the rating bar, which keep
 * their own width — sit hard left with dead space beside them.
 *
 * The column direction is stated rather than assumed: the wrapper holds a
 * logo tile and a rating bar and the artboard stacks them, which is what
 * the plugin's own mobile form does too. align-items centres both without
 * changing either one's size.
 */
.hp-ad-campaign .toplist-gamereactor__offer-logo-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-inline: auto;
}

/*
 * NO "SHOW MORE" IN THE SPONSOR BAND.
 *
 * display="1" does not trim the campaign to one offer — it renders the
 * whole toplist and marks every offer after the first .hidden, then offers
 * a button to reveal them. In a page-wide toplist that is the right
 * behaviour; in a single-operator sponsor band it is a control that turns
 * one paid slot into six.
 *
 * Hiding the button is the presentational half of the fix and it is what
 * belongs in a stylesheet. The other half is a plugin-side limit so the
 * extra offers are never rendered at all — see the note in the reply; they
 * are still in the DOM, with their logos, doing nothing.
 */
.hp-ad-campaign .toplist-gamereactor__show-more-btn { display: none; }

/* --- sponsor band: the method note ------------------------------------- */
/* Same size as .hp-ad-blurb above it — this is body copy in the same
   column, not a disclosure. The disclosure stays at 13/19. */
.hp-ad-method {
	font-family: var(--hp-f-body); font-size: 16px; line-height: 25px;
	color: var(--hp-ondark); max-inline-size: 640px; text-wrap: pretty;
}
.hp-ad-method a { color: var(--hp-cyan); text-decoration: none; }

/* ======================================================================
 * HOVER — one system, the one the other templates already use
 *
 * Read back off the ~100 :hover rules already in this file, the site has
 * exactly five hover behaviours and no others:
 *
 *   media in a card    transform: scale(1.04) on the img
 *                      (.grc-row, .grc-vcard, .grc-gamelist-link,
 *                       .grc-vidcard, .related-guides-list .post-item)
 *   title on light     color: #0088cc  --grc-link
 *                      (.grc-row-title a, .grc-vcard-title, .grc-gcal-name,
 *                       .grc-poplist-link, .grc-rail-item-title a, …)
 *   title on dark      color: #cfe3f5
 *                      (.grc-vidcard-title, .grc-vidbox-title a,
 *                       .grc-grtv-title, .grc-rev-game a, …)
 *   card container     border-color: #dddddd  --grc-border-strong
 *                      (.grc-card--wide, .grc-card--grid, .grc-card--review,
 *                       .grc-ticker-item, article.areview)
 *   meta / byline      color: #009ece  --grc-link-hover
 *                      (.grc-byline, .grc-row-author, .grc-rev-author,
 *                       .gr-post-author, .entry-meta-author a)
 *
 * The brand homepage had picked up four behaviours of its own instead: an
 * underline on the "All …" links, a cyan title hover on the dark bands, a
 * rule that grew from 32px to 44px under the hero index, and a
 * brightness() filter on the sponsor CTA. Several of its cards — streams,
 * slots, guides, odds, pillars — had no hover at all, so half the page
 * responded to the pointer and half did not.
 *
 * Naming the five as tokens rather than repeating the literals: every
 * value below is what the existing rules already resolve to, so nothing on
 * any other template moves. #34b2e9 stays what the artboard uses it for —
 * accent rules, triangles, eyebrows — and is not a hover colour.
 * ====================================================================== */
:root {
	--grc-hover-title:      var(--grc-link);          /* #0088cc on light */
	--grc-hover-title-dark: #cfe3f5;                  /* on the dark bands */
	--grc-hover-meta:       var(--grc-link-hover);    /* #009ece bylines   */
	--grc-hover-border:     var(--grc-border-strong); /* #dddddd cards     */
	--grc-hover-border-dark:#4a4a4a;                  /* the dark-band pair */
	--grc-hover-zoom:       1.04;
	--hp-magenta-dark:      #c91375;                  /* the CTA, pressed  */
}

/* --- media --------------------------------------------------------------- */
.hp-card-link:hover .hp-card-media img,
.hp-vid a:hover .hp-vid-media img { transform: scale(var(--grc-hover-zoom)); }

/* --- titles: NO hover ---------------------------------------------------
 * Card titles and the hero index do not change colour on hover anywhere on
 * this page. The card already answers the pointer twice — the image zooms
 * and the container's border lifts — and recolouring the headline on top
 * of that is a third signal for one target. The "All …" link is a link in
 * its own right rather than a card title, so it keeps the site's hover.
 */
.hp-more:hover { color: var(--grc-hover-title); }
.hp-dark .hp-more:hover { color: var(--grc-hover-title-dark); }

/* --- meta and bylines ---------------------------------------------------
 * .grc-byline already carries the site's hover; nothing to restate. These
 * are the two links on this page that are bylines but not .grc-byline.
 */
.hp-guide-name:hover,
.hp-stream-chan:hover { color: var(--grc-hover-meta); }

/* --- card containers ----------------------------------------------------- */
.hp-card:hover,
.hp-guide:hover,
.hp-oddscard:hover,
.hp-stream:hover { border-color: var(--grc-hover-border); }

.hp-dark .hp-card:hover,
.hp-dark .hp-stream:hover,
.hp-slot:hover { border-color: var(--grc-hover-border-dark); }

/* The slot tile has no border of its own, so it takes the ring instead. */
.hp-slot { transition: box-shadow .15s ease; }
.hp-slot:hover { box-shadow: inset 0 0 0 1px var(--grc-hover-border-dark); }

/* A pillar is a link; it gets the container treatment, not a colour shift. */
.hp-pillar { transition: background .15s ease; }
.hp-pillar:hover { background: var(--grc-page); }
.hp-pillars--dark .hp-pillar:hover { background: #201f1d; }

/* --- the one link that is body copy, not a card -------------------------- */
.hp-ad-method a:hover { color: var(--grc-hover-meta); text-decoration: none; }

/* --- the shared byline on the dark bands --------------------------------
 * .grc-card-meta is built for a light ground: --grey-600 on white. On the
 * WATCH band the date needs the on-dark muted tone instead, and the author
 * moves off --blue-500 (#1976d2, which is nearly unreadable on #181715) to
 * the accent the artboard uses for links on that ground. Same component,
 * one ground-level adjustment, exactly as .grc-section-title--dark does.
 */
.hp-dark .grc-byline { color: var(--hp-cyan); }
.hp-dark .grc-date { color: var(--hp-ondark); }
.hp-dark .grc-byline:hover { color: var(--grc-hover-title-dark); }

/* --- the underline the theme puts back ---------------------------------
 * The parent theme underlines links on hover, and a card is one <a> around
 * an image, a headline, an excerpt and a byline — so hovering a card
 * underlined all four at once. Every hover rule elsewhere in this file
 * cancels it one at a time (.grc-card-title a:hover, .gr-page a:hover,
 * #main h4.hbar1 a:hover …); on this page it is cancelled once, for the
 * whole page, since nothing here is meant to underline on hover.
 */
.hp-page a:hover,
.hp-page a:focus,
.hp-page a:hover *,
.hp-page a:focus * { text-decoration: none; }

/* --- card variants, measured off the artboard --------------------------
 * Three small-card treatments, three sets of numbers. They were all
 * rendering with the lead card's 14/16/16 body and a border, which is a
 * 4-6px error on every card in two grids plus a border the design does
 * not draw.
 */
.hp-card--grid .hp-card-body { padding: 10px 12px 14px; gap: var(--hp-6); }

.hp-card--bare { border: 0; }
.hp-card--bare .hp-card-media { block-size: 140px; }
.hp-card--bare .hp-card-body { padding: 8px 0 12px; gap: var(--hp-6); }
.hp-card--bare:hover { border-color: transparent; }

/* GRTV clips crop to a fixed band, as drawn — not to the source ratio,
   which was giving 154px at 1440 and 276px at 1024. */
.hp-vid-media { block-size: 180px; overflow: hidden; border-radius: var(--hp-radius); }
.hp-vid-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* --- the two filter rows have different gaps in the artboard ------------
 * GRTV's group is a flex column with gap 16 — head, pills, cards all 16
 * apart. DISCOVER's pills sit inside the section OPENER (gap 12) and the
 * split below them takes the section gap of 32. One rule each, keyed on
 * what follows, rather than one compromise value for both.
 */
.hp-sec > .hp-blockhead:has(+ .hp-tabs + .hp-disc) { margin-block-end: var(--hp-12); }
.hp-sec > .hp-tabs:has(+ .hp-disc) { margin-block-end: var(--hp-32); }

/* --- GRTV clip: media to title is 10, title to date is 6 ----------------
 * The artboard's clip has a body with padding 10px 0 4px and an internal
 * gap of 6. One flex gap cannot be both, so the media carries the extra 4.
 */
.hp-vid-media { margin-block-end: var(--hp-4); }

/* ======================================================================
 * FILTER BAR — one component, three call sites
 *
 * /games/ and /video/ were drawing the same panel from two sets of values
 * that had drifted apart, and the homepage was drawing a third thing:
 *
 *                       /games/            /video/            /home-new/
 *   panel               #eee 16/12         #eee 16/12         —
 *   search field        633x54, 1px #ddd   633x54, NO border  —
 *   field type          Arial 400 14/24    Arial 700 16/24    —
 *   field focus         2px blue outline   browser default    —
 *   filter control      pill 36 r28        chip 36 r28        tab 40, square
 *                       #f8f8f8 + border   #f8f8f8 no border  transparent
 *   control type        Outfit 600 15/18   Outfit 400 15/18   Outfit 700 15/23
 *
 * The 700 on the video field was not a decision — the harvested sheets bold
 * every input, and only the games field had thought to say otherwise. Same
 * for the missing focus ring: /games/ declared one, /video/ inherited the
 * browser's, which is the "another interaction" in the report.
 *
 * ONE SET OF VALUES, and where they come from:
 *   16px, not the artboard's 14.3   — anything under 16px makes iOS Safari
 *                                     zoom the page on focus, and 14.3 is a
 *                                     scaled artboard value rather than a
 *                                     chosen size. This is the one place
 *                                     the artboard is overruled, on a
 *                                     usability ground, and it applies to
 *                                     both archives so they still agree.
 *   1px #ddd on the field           — drawn in the games artboard; it makes
 *                                     a white field on a #eee panel legible.
 *   pill resting, blue selected     — games' resting look (the documented
 *                                     "dropdown" symbol) with video's blue
 *                                     selected state, which is the only one
 *                                     of the two that had one.
 *
 * .hp-tab joins the chip selector, so the homepage's GRTV and Discover rows
 * are the same control as the archives rather than TabsPrimary. That is a
 * deliberate departure from the artboard, asked for, and noted here so the
 * next person does not "fix" it back.
 * ====================================================================== */

/* --- the field ---------------------------------------------------------- */
.grc-gf-find,
.grc-vidsearch-field {
	block-size: 54px;
	box-sizing: border-box;
	border: 1px solid var(--grc-border-strong);
	border-radius: 8px;
	background: var(--grc-surface);
}
.grc-gf-find,
.grc-vidsearch-field input {
	font-family: var(--grc-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--grc-ink);
}
.grc-gf-find::placeholder,
.grc-vidsearch-field input::placeholder { color: var(--grc-text-faint); opacity: 1; }

/* The video field is a wrapper round the input, the games field is the input
   itself, so the ring goes on whichever element actually takes focus. */
.grc-gf-find:focus-visible,
.grc-vidsearch-field:focus-within {
	outline: 2px solid var(--grc-link);
	outline-offset: 1px;
}
.grc-vidsearch-field input:focus,
.grc-vidsearch-field input:focus-visible { outline: 0; }

/* --- the button --------------------------------------------------------- */
.grc-gf-cta,
.grc-vidsearch-btn {
	inline-size: 125px;
	block-size: 54px;
	flex: 0 0 auto;
	box-sizing: border-box;
	border: 0;
	border-radius: 4px;
	background: var(--grc-link);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--grc-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--grc-surface);
	text-transform: uppercase;
	cursor: pointer;
}
.grc-gf-cta:hover,
.grc-vidsearch-btn:hover { background: var(--grc-link-hover); }

/* --- the chip ----------------------------------------------------------- */
.grc-gf-pill,
.grc-vidchip,
.hp-tab {
	block-size: 36px;
	box-sizing: border-box;
	border: 1px solid var(--grc-border-strong);
	border-radius: 28px;
	background: #f8f8f8;
	padding-inline: 16px;
	display: inline-flex;
	align-items: center;
	gap: var(--hp-8, 8px);
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	color: var(--grc-ink);
	text-decoration: none;
	white-space: nowrap;
}
.grc-gf-label,
.grc-gf-select { font-weight: 600; }

.grc-vidchip:hover,
.hp-tab:hover { background: #e4e4e4; border-color: var(--grc-border-strong); color: var(--grc-ink); }

.grc-vidchip.is-active,
.hp-tab[aria-current] {
	background: var(--grc-link);
	border-color: var(--grc-link);
	color: var(--grc-surface);
	font-weight: 700;
}
.grc-vidchip.is-active:hover,
.hp-tab[aria-current]:hover { background: var(--grc-link-hover); border-color: var(--grc-link-hover); color: var(--grc-surface); }

.grc-gf-pill:focus-within,
.grc-vidchip:focus-visible,
.hp-tab:focus-visible { outline: 2px solid var(--grc-link); outline-offset: 2px; }

/* On the WATCH band the chip sits on #181715, so the light pill inverts. */
.hp-dark .hp-tab { background: rgba(255, 255, 255, .06); border-color: #444444; color: #fff; }
.hp-dark .hp-tab:hover { background: rgba(255, 255, 255, .12); border-color: #666666; color: #fff; }
.hp-dark .hp-tab[aria-current] { background: var(--hp-cyan); border-color: var(--hp-cyan); color: var(--hp-ground); }
.hp-dark .hp-tab[aria-current]:hover { background: #4cc0f0; border-color: #4cc0f0; color: var(--hp-ground); }

/* ======================================================================
 * RIGHT-TO-LEFT (.me)
 *
 * WHAT WAS ACTUALLY WRONG, measured on gr-me:
 *
 *   html/body   direction: ltr    <- no dir attribute anywhere on the page
 *   .hp-hero-h1 direction: rtl    <- frontendArab.css sets it per selector
 *
 * So the TEXT rendered right-to-left while the LAYOUT stayed left-to-right,
 * which is the worst of both. The geometry showed it plainly: hero copy at
 * x=70 and the index column at x=817 (unmirrored); .hp-hero-index resolving
 * border-inline-start to its LEFT edge; the section flag's 28px wedge at
 * x=129 with its own text at x=70, so the wedge pointed away from the bar;
 * and "All reviews" pinned to x=1304 instead of the near edge.
 *
 * This also corrects something I claimed too confidently. child.css uses 743
 * logical properties and zero physical ones, and I reported that as "it will
 * mirror". Logical properties only mirror when a containing element actually
 * establishes `direction: rtl`. Nothing here did. The audit measured the
 * right thing and I drew the wrong conclusion from it.
 *
 * SCOPED TO .hp-page ON PURPOSE. Setting dir="rtl" on <html> would flip the
 * parent's harvested templates too — and those were built LTR and patched
 * for Arabic by frontendArab.css on specific selectors. Flipping them
 * globally is a decision about 23 sites' worth of article and archive pages,
 * not a homepage fix. Everything below is the child's own markup only.
 * ====================================================================== */
body.grc-rtl .hp-page,
body.grc-rtl .hp-ticker {
	direction: rtl;
}

/*
 * The two wedges are fixed SVG paths, so they cannot mirror on their own.
 * A directional glyph is exactly the thing that should flip.
 */
body.grc-rtl .hp-flag-tip,
body.grc-rtl .hp-bh-tri,
body.grc-rtl .hp-rh-tri svg { transform: scaleX(-1); }

/*
 * Media play affordances do NOT flip: a play triangle points in the
 * direction of playback, not of reading, and every RTL video UI keeps it
 * pointing right. Left alone deliberately, so nobody "fixes" it later.
 *   .hp-vid-play, .hp-slot-play
 */

/*
 * Ticker marquee. animation-direction:reverse was WRONG and shipped an
 * empty ticker on .me: reverse still translates leftward, it only changes
 * the phase, so both copies of the run ended up parked off-screen left
 * (measured at 390px: runs at x -7700 and -11703, zero items in the box).
 * In RTL the copies are ordered right-to-left, so the travel is rightward.
 */
body.grc-rtl .hp-ticker-run { --hp-mq: 100%; }

/* Both scrollers fade at the edge their content runs off — left, in RTL. */
body.grc-rtl .hp-ticker-rail,
body.grc-rtl .hp-tabs { --hp-fade: 270deg; }

/* Static imported columns must fit the page's prose measure. */
.grc-doc-measure .colwide,
.grc-doc-measure .colwide_mrgn {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    margin-inline: 0 !important;
    float: none;
}
/* Resting, hover and keyboard states stay visible on the dark header. */
#mainheader .grh-burger,
#mainheader .grh-burger:hover,
#mainheader .grh-burger:focus-visible {
    color: #fff;
    background: transparent;
}

@media (min-width: 768px) and (max-width: 1023px) {
    #main-content > .colwide.colwide_mrgn,
    #main-content > article.gambling .colwide.colwide_mrgn { width: auto !important; max-width: 96%; }
}