/* ======================================================================
 * Homepage v3 — /home-renew/
 *
 * Loaded ONLY on that route (see grc_renew_assets() in functions.php), so it
 * costs the other 40-odd templates nothing. Every number here was measured off
 * the rendered .dc.html bundle rather than read off its CSS; docs/v3-spec.md
 * records the measurements and the three deliberate deviations.
 *
 * Tokens come from child.css's :root — this file adds only what v3 introduces.
 * v3 has its OWN breakpoints (1180/820/720). They are NOT v2's 1400/1100/820/640,
 * so do not "harmonise" them: the reviews split collapses at 1180 because the
 * 552+736 pair stops fitting, which is a fact about this layout only.
 * ====================================================================== */

body.grc-home-renew {
	--hr-wrap:      1332px;   /* 1300 content + 2x16 gutter, same as /home-new/ */
	--hr-gutter:    16px;
	--hr-gap:       12px;     /* the one grid gap the design uses everywhere */
	--hr-ghost:     #dddddd;                    /* ghost wordmark, light ground */
	--hr-ghost-dk:  rgba(255, 255, 255, 0.07);  /* ghost wordmark, dark band */
	--hr-guide-bg:  #edf9ff;  /* --blue-50 from the Figma token block */
	--hr-check:     #1976d2;
	--hr-check-dk:  #34b2e9;
	--hr-star:      #ffc107;
	--hr-radius:    2px;
	/* The artboard draws card outlines as 1px INSET BOX-SHADOWS, not borders —
	   which is why a border probe read "0px none" and the first cut shipped
	   these cards with no outline at all. Shadows keep the ring out of the box
	   model, so a 316px card stays 316px. */
	--hr-ring-light: #e4e1dd;   /* odds card + odds rows, on white */
	--hr-ring-dark:  #333333;   /* stream card, on ink */
	--hr-ring-blue:  #a3e3ff;   /* guide card, on --blue-50 */
	background: #ffffff;

	/*
	 * #main is sized from --grc-max, which defaults to 1300 (1164 content).
	 * Without this the 1332 wrap is clamped by its own container and every
	 * section comes out 168px narrow — which is precisely how /home-new/
	 * managed to look "chunky" for two rounds before it was measured. The
	 * artboard's container is 1300 of content inside 16px gutters = 1332.
	 */
	--grc-max: 1332px;
}
/* The parent adds top padding to #main for the archive templates; the hero
   band has to start flush under the header. */
body.grc-home-renew #main { padding-block-start: 0; }

/* ---------- box sizing -----------------------------------------------
 * The theme does not set a global border-box, and Figma exports are all
 * border-box, so every padded card here measured wider than the artboard:
 * the 552 reviews lead rendered 554 and stole 2px from the grid beside it,
 * and the 86% odds/stream cards rendered at 90.65% because their own 16px
 * padding sat outside the declared width. Scoped to this page so no other
 * template's box model changes.
 * ------------------------------------------------------------------------ */
.hr-page,
.hr-page *,
.hr-page *::before,
.hr-page *::after { box-sizing: border-box; }

/* ---------- container ------------------------------------------------- */
.hr-wrap {
	inline-size: 100%; max-inline-size: var(--hr-wrap); margin-inline: auto;
	padding-inline: var(--hr-gutter); box-sizing: border-box;
}

/* Full-bleed bands. Same --grc-vw route as every other dark band in the child:
   the viewport minus the scrollbar, published by child.js, falling back to
   container width (no bleed, never broken) when JS has not run. */
.hr-bleed {
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
	box-sizing: border-box;
}
/* 24px above the WATCH band only — NOT via .hr-bleed.hr-dark, which also
   matches the hero and opened a 24px white gap between the ticker and it.
   The ticker and the hero must touch: they read as one dark band. */
.hr-watch-band { margin-block-start: 24px; }
.hr-page .hp-ticker + .hr-hero { margin-block-start: 0; }
.hr-dark { background: var(--grc-ink); color: #fff; }

/* ---------- hero band -------------------------------------------------
 * Every number below is measured off the artboard at 1440, where the band is
 * y106 h329.19: padding 16 top / 24 bottom, then the stack
 *   h1 74.19 -> +16 -> sub 30 -> +16 -> lede 90 -> +40 -> bullets 23
 * which sums to 329.19 exactly. The first cut guessed 26/30 padding and
 * 12/14/18/26 gaps and was wrong at every step.
 * ------------------------------------------------------------------------ */
.hr-hero { padding-block: 16px 24px; }

/* The band is NOT flat colour: it carries the same texture the footer and the
   GRTV band already use. bg-hero.svg is byte-identical to the artboard's own
   asset (md5 checked), so nothing new ships — and the artboard anchors it
   right-centre, not centre. */
.hr-dark {
	background:
		url('../img/bg-hero.svg') 100% 50% / cover no-repeat,
		var(--grc-ink);
	color: #fff;
}

/* The ticker and the sponsor band are /home-new/'s parts, reused verbatim, and
 * child.css only bleeds them under `body.grc-home-new`. On this route they were
 * therefore stuck at container width while the hero beside them went full
 * bleed. Same technique, scoped here so /home-new/ is untouched. */
.hr-page .hp-ticker,
.hr-page .hp-ad {
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
	box-sizing: border-box;
}
/* The band bleeds, but its INNER row is .grc-wrap, which child.css only
   widens to 1332 under body.grc-home-new. Left alone it stayed at the
   site-wide 1164 and the sponsor content sat 168px narrower than everything
   around it — the same deficit /home-new/ was caught by. No extra
   padding-inline here: .grc-wrap already centres and gutters its content. */
.hr-page .grc-wrap { max-inline-size: var(--grc-max); }

.hr-hero-top { display: flex; align-items: center; justify-content: center; gap: 4px; }
.hr-hero-tri {
	inline-size: clamp(20px, 3.3vw, 43px); block-size: clamp(21px, 3.5vw, 46px);
	flex: 0 0 auto;
}
.hr-hero-tri svg { display: block; inline-size: 100%; block-size: 100%; }
.hr-hero-h1 {
	margin: 0; font-family: var(--grc-font-ui); font-weight: 700;
	font-size: clamp(30px, 5.3vw, 70px); line-height: 1.06; letter-spacing: -0.03em;
	color: #fff; text-transform: uppercase;
}
/* The three full stops are the only blue in the line. */
.hr-hero-h1 i { font-style: normal; color: var(--grc-accent); }

/* Sub, flanked by two 16x2 blue rules. Drawn, not typed: an em-dash would
   inherit the heading's letter-spacing and drift as the clamp resizes. */
.hr-hero-sub {
	margin: 16px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px;
	font-family: var(--grc-font-ui); font-weight: 700;
	font-size: clamp(16px, 3.4vw, 25px); line-height: 1.2; letter-spacing: -0.02em;
	color: #fff; text-align: center;
}
.hr-hero-sub::before,
.hr-hero-sub::after {
	content: ""; flex: 0 0 auto; inline-size: 16px; block-size: 2px;
	background: var(--grc-accent);
}
.hr-hero-lede {
	margin: 16px auto 0; max-inline-size: 609px;
	font-family: var(--grc-font-body); font-size: 15px; line-height: 22.5px;
	color: var(--grc-on-dark, #abb0b2); text-align: center;
}
.hr-trust {
	margin: 40px 0 0; padding: 0; list-style: none;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px;
}
/* The item's box is 23px on the artboard, not 20: the <li> sits in a 16px
   normal-line-height context and only the LABEL is 14/20. Setting 14px on the
   li itself collapses the row by 3px and the icons ride high. */
.hr-trust li {
	display: inline-flex; align-items: center; gap: 8px; min-block-size: 23px;
	font-family: var(--grc-font-ui); font-size: 16px; line-height: normal; color: #fff;
}
.hr-trust li > span:last-child { font-weight: 600; font-size: 14px; line-height: 20px; }
/* 20x20 window onto the 56x220 sheet at 1.25x; the row comes from
   grc_hr_icon_y() as an inline background-position. */
/* One file per icon (assets/img/hero/*.svg), so there is no sprite window and
   no inline background-position to go wrong. The sheet's icons are 16x16 drawn
   into a 20x20 box, matching the artboard's 20x20 window at 1.25x. */
.hr-trust-icon {
	display: block; flex: 0 0 20px; inline-size: 20px; block-size: 20px;
}

/* ---------- section intro (PLAY. / WATCH. / DISCOVER.) ---------------- */
.hr-intro-sec { position: relative; }
/* 24px under the hero band, measured: band bottom 435.19 -> intro top 459.19.
   NO z-index here: z-index:1 made .hr-intro a stacking context that outranked
   the section after it, so the 180px wordmark painted over the next block's
   "All …" button. The ghost is layered explicitly instead, below. */
/* 24 TOP AND BOTTOM. The artboard's own intro wrap is
   `padding-top:24px; padding-bottom:24px` — the first cut read only the
   top value, so PLAY and DISCOVER ran straight into the block head
   below them with no space at all, on every viewport. It is also the box
   the ghost is centred in, so the bottom 24 is load-bearing twice. */
.hr-intro { position: relative; display: flex; flex-direction: column; gap: 8px; padding-block: 24px; }
/* 24px of air above the PLAY and DISCOVER intro blocks, on top of their
   own 24px padding. Not the WATCH one: it opens a full-bleed dark band
   whose own edge already separates it from the block above. */
.hr-intro-sec:not(.hr-dark) .hr-intro { margin-block-start: 24px; }
/* The intro's own copy sits above the wordmark it overlaps. */
.hr-intro > h2,
.hr-intro > p,
.hr-intro > .hr-checks { position: relative; z-index: 1; }
.hr-intro h2 {
	margin: 0; font-family: var(--grc-font-ui); font-weight: 700;
	font-size: 26px; line-height: 30px; letter-spacing: -0.02em; color: var(--grc-ink);
}
.hr-dark .hr-intro h2 { color: #fff; }
.hr-intro p {
	margin: 0; max-inline-size: 640px;
	font-family: var(--grc-font-body); font-size: 15px; line-height: 22.5px; color: var(--grc-text, #444);
}
.hr-dark .hr-intro p { color: var(--grc-on-dark, #abb0b2); }

/* The oversized wordmark. Decorative, so it is aria-hidden in the markup and
   clipped by the section rather than the page — a 180px glyph at 1440 is wider
   than the gutter allows and would otherwise create horizontal scroll. */
.hr-ghost {
	/* 0, not the gutter: the ghost is positioned against .hr-intro, which is
	   already the wrap's CONTENT box, so 16px here pushed it 16px inside the
	   artboard's position. The artboard's right edge is the wrap's padding
	   edge — x1370 at 1440. */
	/* CENTRED ON THE INTRO BOX, which is what the artboard does:
	     top:50%; transform:translateY(-50%)
	   The first cut read the ghost's measured offset (81.5px from the top of a
	   115px intro) as a fixed top. At 180px tall in a ~163px box that put two
	   thirds of the glyph BELOW the intro, where it painted across the next
	   block's head, its rule and its "All …" button — which is exactly what
	   the red boxes on the screenshots are circling. Centred, the overhang is
	   ~8px each side and the section clips it. */
	position: absolute; inset-block-start: 50%; inset-inline-end: 0;
	transform: translateY(-50%);
	font-family: var(--grc-font-ui); font-weight: 700;
	font-size: clamp(64px, 13.8vw, 180px); line-height: 1; letter-spacing: -0.03em;
	color: var(--hr-ghost); pointer-events: none; user-select: none; white-space: nowrap;
	z-index: 0;
	/* Upper-cased here, not in the string table: the words come from the
	   already-translated hp_play/hp_watch/hp_discover keys, and baking a
	   capitalised copy into 23 locales would be wrong for scripts where
	   upper-casing is not a no-op. */
	text-transform: uppercase;
}
.hr-dark .hr-ghost { color: var(--hr-ghost-dk); }
/* CORRECTED: THE ARTBOARD DOES CLIP. Its intro section is
   `<div style="position:relative; overflow:hidden">` wrapped around the intro
   wrap, and the dark WATCH intro carries overflow:hidden of its own. The
   earlier note below reasoned from a sheared render — the shear came from
   clipping a ghost that was positioned 81.5px down instead of centred, so the
   fix was the offset, not the clip. Kept as a record of the wrong turn.
   ORIGINAL NOTE: The artboard's 180px wordmark deliberately overhangs the
   115px intro and stays visible behind the block beneath it; clipping sheared
   the glyphs. It cannot cause horizontal scroll because it is positioned
   inside .hr-wrap, which is already inside the gutters. */
.hr-intro-sec { overflow: hidden; }   /* clips the ghost to its own section, per the artboard */

.hr-checks { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 14px 44px; }
.hr-checks li { display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--grc-font-ui); font-weight: 700; font-size: 14.3px; line-height: 20px;
	color: var(--grc-ink); }
.hr-dark .hr-checks li { color: #fff; }
.hr-checks svg { display: block; flex-shrink: 0; }

/* ---------- block head ------------------------------------------------ */
/* min-height 30 whether or not the row has an "All …" button. Without it a
   rail head (no button) was 18 tall and a main-column head 30, so the two 2px
   decorator rules sat 12px apart instead of level — visible where Latest and
   Popular This Week meet. */
.hr-bh {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-block-size: 30px;
}
/* Two children, not three: the triangle and the heading are ONE group, so
   space-between puts the head left and the button right. Emitting three
   children centres the heading — the exact bug /home-new/ shipped once. */
.hr-bh-name { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }
.hr-bh-tri { display: block; flex: 0 0 auto; }
.hr-bh-h {
	margin: 0; font-family: var(--grc-font-ui); font-weight: 800;
	font-size: 16px; line-height: 18px; text-transform: uppercase; color: var(--grc-ink);
}
.hr-dark .hr-bh-h { color: #fff; }
/* Sits 8px under the rule — the 18+ line the odds block needs. */
.hr-bh-note {
	margin: -8px 0 16px; font-family: var(--grc-font-body); font-size: 12px; line-height: 17px;
	color: var(--grc-text-muted);
}
.hr-dark .hr-bh-note { color: var(--grc-on-dark, #abb0b2); }
/* Measured head rhythm, identical at all five block heads on the artboard:
   30px of space above the head, head 18, 14 to the rule, rule 2, 12 to the
   content — 76px from the previous block's bottom to the next one's top. */
.hr-rule { block-size: 2px; background: var(--grc-accent); margin-block: 8px 12px; }

.hr-all {
	flex: 0 0 auto; display: inline-flex; align-items: center; block-size: 30px;
	padding-inline: 12px; border: 1px solid var(--grc-border-strong, #ddd); border-radius: 0;
	background: transparent; font-family: var(--grc-font-ui); font-weight: 700;
	font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--grc-ink); text-decoration: none; white-space: nowrap;
}
.hr-dark .hr-all { border-color: #444; color: #fff; }

/* ---------- links ----------------------------------------------------
 * Card titles are anchors, and the parent theme colours a:link --grc-link and
 * underlines it. Left alone, every headline on the page rendered blue and
 * underlined instead of ink. Inherit instead, so each title keeps the colour
 * its own component sets; real inline links in prose are unaffected because
 * this only covers the title/name classes.
 * ------------------------------------------------------------------------ */
/*
 * CARD TITLES ARE <span>, NOT <h3>.
 *
 * The page's outline is h1 hero > h2 intro > h3 block head, and 40-odd post
 * titles at h3 put every card level with the section that contains it. The
 * link inside carries the title text, so nothing is lost to a reader or a
 * crawler — but a span is inline, and these were laid out as blocks by
 * virtue of being headings, so the display has to be restated.
 */
.hr-rev-lead-title, .hr-rev-card-title, .hr-slot-title, .hr-guide-title,
.hr-video-title, .hr-lead-title, .hr-news-title { display: block; }

.hr-rev-lead-title a, .hr-rev-card-title a, .hr-slot-title a,
.hr-guide-title a, .hr-video-title a, .hr-news-title a, .hr-lead-title a,
.hr-pop-title, .hr-games-name, .hr-fill-name, .hr-media {
	color: inherit; text-decoration: none;
}
.hr-guide-title a { color: var(--grc-ink); }
.hr-guide-title a b { color: var(--grc-accent); }
.hr-pop-title, .hr-games-name, .hr-fill-name { color: var(--grc-ink); }
/* Hover is one behaviour across the page: the title takes the accent, and
   nothing gains an underline. Matches the hover system already in child.css. */
.hr-rev-lead-title a:hover, .hr-rev-card-title a:hover, .hr-guide-title a:hover,
.hr-news-title a:hover, .hr-lead-title a:hover, .hr-pop-title:hover,
.hr-games-name:hover, .hr-fill-name:hover { color: var(--grc-accent); text-decoration: none; }
.hr-slot-title a:hover, .hr-video-title a:hover { color: #cfe3f5; text-decoration: none; }

/* ---------- filter row ------------------------------------------------
 * parts/hp-tabs.php is reused verbatim, so only its spacing is set here — the
 * chip itself keeps the shared treatment it has on /video/ and /games/.
 * ------------------------------------------------------------------------ */
/*
 * The chip gap is already 8px (.hp-tabs gap: var(--hp-8) in child.css); what
 * was 16 is the space UNDER the row, so that is what moves to 8.
 */
.hr-page .hp-tabs { margin: 0 0 8px; gap: 8px; }

/*
 * The WATCH band carries .hr-dark, not /home-new/'s .hp-dark, so the chips in
 * it were rendering in the light treatment on a dark ground. Same values as
 * the .hp-dark block in child.css — outlined pill, white label, cyan when
 * current — so the two pages' dark filter rows are identical, per instruction.
 */
.hr-dark .hp-tab { background: rgba(255, 255, 255, .06); border-color: #444444; color: #fff; }
.hr-dark .hp-tab:hover { background: rgba(255, 255, 255, .12); border-color: #666666; color: #fff; }
.hr-dark .hp-tab[aria-current] { background: var(--hp-cyan, #34b2e9); border-color: var(--hp-cyan, #34b2e9); color: var(--hp-ground, #141414); }
.hr-dark .hp-tab[aria-current]:hover { background: #4cc0f0; border-color: #4cc0f0; color: var(--hp-ground, #141414); }

.hr-page .hp-tabs + * { margin-block-start: 0; }

/* ---------- generic card scaffolding --------------------------------- */
.hr-media { position: relative; display: block; overflow: hidden; background: var(--grc-ink-2, #1e1d1b); }
/* Slot artwork. Slotslaunch is not wired, so there is no per-game image to
   load; the artboard's own placeholder is this texture over ink-2, which is
   what its four unillustrated cards render. Same treatment as /home-new/'s
   hp-slot-cover, so the two pages agree. */
.hr-slot .hr-media {
	background:
		url('../img/bg-hero.svg') 50% 50% / cover no-repeat,
		var(--grc-ink-2, #1e1d1b);
}
.hr-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------- sections -------------------------------------------------- */
/* 24px of padding puts the head TEXT 30px below the previous block: the .hr-bh
   row is 30px tall because the "All" button sets it, and the 18px head is
   centred in it, so 6px of row sits above the text. Measuring to the text and
   padding to the row is what made every section 6-7px too low. Bottom spacing
   belongs to the NEXT section's top padding, so blocks cannot double up. */
/* z-index 1 keeps each block above the wordmark overhanging from the intro
   above it — the artboard shows the wordmark behind the content, not over it. */
.hr-sec { padding-block: 24px 0; position: relative; z-index: 1; }
.hr-page { padding-block-end: 48px; }

/* reviews: 552 lead + 12 + 736 grid = 1300 */
/* align-items defaults to stretch on purpose: the artboard has the lead and
   the grid both 490 tall, ending level. flex-start left the shorter of the two
   floating and the block looked broken at the bottom. */
.hr-rev { display: flex; gap: var(--hr-gap); }
/* 552 is the outer width, border included — content-box sizing made it 554
   and stole 2px from the grid beside it. */
.hr-rev-lead {
	inline-size: 552px; flex: 0 0 552px; box-sizing: border-box;
	border: 1px solid var(--grc-border, #eee);
}
.hr-rev-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px var(--hr-gap); }

/* slots + videos: 5 across */
.hr-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--hr-gap); }
/* guides + odds + streams: 4 across */
.hr-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hr-gap); }

/*
 * THE STREAMS ROW IS ALWAYS FOUR UP, whatever Twitch returns.
 *
 * An earlier round made the row take as many columns as it had cards, so one
 * live channel became one 1300px card. Reverted on instruction: a card keeps
 * the card's designed proportions, and a row with one card in it is a row with
 * one card in it. The fix for an under-filled row is more streams to put in
 * it, not a wider card — see grc_twitch_fetch()'s category top-up.
 */
/* latest news: 3 across inside the 968 column */
.hr-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hr-gap); }

/* latest split */
.hr-articles { display: flex; align-items: flex-start; gap: 32px; }
.hr-main { flex: 1 1 auto; min-inline-size: 0; }
.hr-rail { inline-size: 300px; flex: 0 0 300px; display: flex; flex-direction: column; gap: 24px; }

/* ---------- responsive ------------------------------------------------ */
@media (max-width: 1180px) {
	.hr-rev { flex-direction: column; align-items: stretch; }
	.hr-rev-lead { inline-size: auto; flex: 1 1 auto; }
	.hr-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hr-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hr-articles { flex-direction: column; align-items: stretch; }
	.hr-rail { inline-size: 300px; flex: 0 0 auto; align-self: center; margin-inline: auto; }
}
@media (max-width: 820px) {
	.hr-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hr-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hr-trust, .hr-checks { gap: 14px 20px; }
}
@media (max-width: 720px) {
	.hr-5, .hr-3, .hr-4 { grid-template-columns: minmax(0, 1fr); }
	.hr-rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* One line, per instruction — the artboard wraps these into a 2-column
	   grid on mobile, which split "Video Games / Esports / Casino Games" over
	   two rows. Nowrap with a scroller keeps them on one line at any width
	   and matches how every other row on this page behaves on mobile. */
	.hr-checks {
		display: flex; flex-wrap: nowrap; gap: 16px;
		overflow-x: auto; scrollbar-width: none;
		margin-inline: calc(var(--hr-gutter) * -1); padding-inline: var(--hr-gutter);
	}
	.hr-checks::-webkit-scrollbar { display: none; }
	.hr-checks li { flex: 0 0 auto; }
	/* The wordmark moves behind the heading and left-aligns. Offset 0, not
	   16: the ghost lives inside .hr-wrap, which already contributes the
	   16px gutter — 16 here put it at 32 from the viewport edge. */
	/* Mobile is top-anchored at -6px, not centred, so the desktop
	   translateY has to be undone or it would lift the glyph by half its
	   own height on top of that. */
	.hr-ghost { inset-inline: 0 auto; inset-block-start: -6px; transform: none; }
	/* Except in the dark band, where the artboard sets the mobile wordmark in
	   16px further than the two light ones (x32 against their x16). It is the
	   one deliberate asymmetry on the mobile frame, so it is spelled out here
	   rather than normalised away. */
	.hr-dark .hr-ghost { inset-inline-start: var(--hr-gutter); }
	.hr-intro { padding-block-start: 34px; }

	/* Horizontal card rails. Only the rows the design marks as rails scroll —
	   guides deliberately stacks instead. */
	.hr-rail-x {
		display: flex; flex-direction: row; overflow-x: auto; gap: var(--hr-gap);
		scroll-snap-type: x proximity; padding-block-end: 4px;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.hr-rail-x::-webkit-scrollbar { display: none; }
	.hr-rail-x > * { flex: 0 0 auto; scroll-snap-align: start; }
	.hr-slots.hr-rail-x  > * { inline-size: 62%; }
	.hr-videos.hr-rail-x > * { inline-size: 72%; }
	.hr-streams.hr-rail-x > * { inline-size: 86%; }

	.hr-rail { inline-size: 100%; flex: 1 1 auto; align-self: stretch; margin-inline: 0; }
}

/* ======================================================================
 * CARDS
 * Each block below is one component. Sizes are the measured artboard values,
 * including the fractional font sizes — those are authored in the .fig that
 * way (no ancestor transform; verified) and rounding them is what would fail
 * a side-by-side review.
 * ====================================================================== */

/* ---------- review cards --------------------------------------------- */
.hr-rev-lead { display: flex; flex-direction: column; background: var(--grc-surface); }
/* The body takes the slack so the card fills the stretched height. */
.hr-rev-lead-body { flex: 1 1 auto; }
.hr-rev-lead .hr-media { aspect-ratio: 552 / 330; }
.hr-rev-lead-body { padding: 12px 16px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hr-rev-lead-title {
	margin: 0; font-family: var(--grc-font-ui); font-weight: 700;
	font-size: 23.43px; line-height: 26px; letter-spacing: -0.01em; color: #000;
}
.hr-rev-lead-ex { margin: 0; font-family: var(--grc-font-body); font-size: 15px; line-height: 22.5px; color: var(--grc-text); }

.hr-rev-card { display: flex; flex-direction: column; border: 1px solid var(--grc-border); background: var(--grc-surface); }
.hr-rev-card .hr-media { aspect-ratio: 235 / 144; }
.hr-rev-card-body { padding: 0 10px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hr-rev-card-title {
	margin: 0; font-family: var(--grc-font-title); font-weight: 600;
	font-size: 16px; line-height: 19px; color: var(--grc-ink);
}

/* Platform chips — the site's own .grc-chip, not a new component. */
.hr-plats { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- score pill ------------------------------------------------
 * Dark lozenge + a colour-coded numeral chip. The band colours are the site's
 * --grc-s* set via grc_score_band(); the mock shifts them by one band (its
 * 2/10 "AVOID" renders green), so this deliberately does not copy the mock.
 * The lead variant is the same component at 1.1538x, as in the artboard. */
.hr-score {
	display: inline-flex; align-self: flex-start; flex: 0 0 auto; align-items: center; gap: 6px;
	background: var(--grc-ink); border-radius: 20px; padding: 0;
	font-family: var(--grc-font-ui);
}
.hr-score-num {
	display: inline-flex; align-items: baseline; gap: 1px;
	padding: 2px 6px; border-radius: 20px; color: var(--grc-ink);
	font-weight: 700; font-size: 16px; line-height: 18px; letter-spacing: -0.02em;
}
.hr-score-num small { font-weight: 400; font-size: 10px; letter-spacing: 0.1em; }
.hr-score-verdict {
	padding-inline-end: 10px; color: #fff;
	font-weight: 400; font-size: 10px; line-height: 18px; letter-spacing: 0.1em; text-transform: uppercase;
}
.hr-score--lead { border-radius: 23.0769px; }
.hr-score--lead .hr-score-num {
	border-radius: 23.0769px; padding: 2.308px 6.923px;
	font-size: 18.4615px; line-height: 20.769px; letter-spacing: -0.02em;
}
.hr-score--lead .hr-score-num small { font-size: 11.5385px; letter-spacing: 0.1em; }
.hr-score--lead .hr-score-verdict { font-size: 11.5385px; line-height: 20.769px; padding-inline-end: 11.538px; }
.hr-score--s10 .hr-score-num { background: var(--grc-s10); }
.hr-score--s9  .hr-score-num { background: var(--grc-s9); }
.hr-score--s7  .hr-score-num { background: var(--grc-s7); }
.hr-score--s5  .hr-score-num { background: var(--grc-s5); }
.hr-score--s3  .hr-score-num { background: var(--grc-s3); }
/*
 * THE PILL STRADDLES THE SEAM between artwork and body, on both card shapes —
 * half over the image, half over the body, flush with the card's left edge.
 *
 * It is positioned against the BODY, not the media: .hr-media has
 * overflow:hidden so the image can be cropped by the aspect ratio, and
 * anything hanging out of it is sheared. Absolute rather than a negative
 * margin so it is out of flow — as a flex item in a column body its own
 * half-height would otherwise pull the title and byline up with it — and the
 * body reserves exactly the overhang back as top padding, which keeps the
 * measured rhythm below the pill.
 *
 * Heights are the pills' own: 22px base (16/18 numeral + 2px padding) and
 * 25.385px on the 1.1538x lead variant.
 */
.hr-rev-lead-body, .hr-rev-card-body { position: relative; }
.hr-rev-lead .hr-score, .hr-rev-card .hr-score {
	position: absolute; z-index: 2; inset-inline-start: 0; inset-block-start: 0;
	/* translate, not a hardcoded half-height: the pill measures 27.4px on the
	   lead and 24px on the grid card, both of which move with the verdict's
	   line box and the font that renders it. -50% is exactly half whatever it
	   turns out to be, so the seam always cuts the pill in two. */
	transform: translateY(-50%);
}
/* The body reserves the overhang back, so the rhythm below the pill is the
   measured one: ~14px of pill hanging into the body, then the artboard's gap
   to the title. */
.hr-rev-lead-body { padding-block-start: 26px; }
.hr-rev-card-body { padding-block-start: 22px; }

/* ---------- slot cards ------------------------------------------------ */
.hr-slot { display: flex; flex-direction: column; background: var(--grc-ink); border-radius: var(--hr-radius); overflow: hidden; }
.hr-slot .hr-media { aspect-ratio: 250 / 177; }
.hr-slot-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.hr-slot-title { margin: 0; font-family: var(--grc-font-title); font-weight: 600; font-size: 16px; line-height: 22px; color: #fff; }
.hr-slot-award { font-family: var(--grc-font-body); font-weight: 700; font-size: 10px; line-height: 12px; text-transform: uppercase; color: var(--grc-s7); font-style: italic; }
.hr-slot-rate { display: inline-flex; align-items: center; gap: 6px; }
.hr-slot-score { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--grc-font-ui); font-weight: 600; font-size: 17.6px; line-height: 22px; color: #fff; }
.hr-slot-score small { font-size: 12px; line-height: 18px; font-weight: 400; }
.hr-slot-verdict { padding: 2px 8px; border: 1px solid #444; border-radius: 20px; font-family: var(--grc-font-ui); font-size: 10px; line-height: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.hr-slot-prov { font-family: var(--grc-font-body); font-weight: 700; font-size: 10px; line-height: 12px; color: var(--grc-text-faint); }
.hr-slot-demo {
	position: absolute; inset-block-end: 12px; inset-inline-end: 12px;
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
	background: var(--grc-surface); border-radius: 20px;
	font-family: var(--grc-font-ui); font-weight: 600; font-size: 12px; line-height: 18px; color: var(--grc-ink);
}

/* ---------- guide cards ---------------------------------------------- */
.hr-guide { display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
	padding: 16px; background: var(--hr-guide-bg); border-radius: var(--hr-radius);
	box-shadow: inset 0 0 0 1px var(--hr-ring-blue); }
.hr-guide-top { display: flex; flex-direction: column; gap: 8px; }
.hr-guide-title { margin: 0; font-family: var(--grc-font-title); font-weight: 700; font-size: 18px; line-height: 24px; color: #000; }
/* The lead clause is blue, the rest ink — one heading, two colours. */
.hr-guide-title b { font-weight: 700; color: var(--grc-accent); }
.hr-guide-ex { margin: 0; font-family: var(--grc-font-body); font-size: 15px; line-height: 22.5px; color: var(--grc-text); }
.hr-guide-by { display: flex; align-items: center; gap: 10px; }
.hr-guide-av {
	inline-size: 40px; block-size: 40px; flex: 0 0 40px; border-radius: 50%;
	background: var(--grc-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--grc-font-ui); font-weight: 800; font-size: 17px; letter-spacing: 0.02em;
}
.hr-guide-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hr-guide-av--img { object-fit: cover; }
.hr-guide-who { display: flex; flex-direction: column; gap: 2px; font-family: var(--grc-font-body); font-weight: 700; font-size: 10px; line-height: 12px; }
.hr-guide-name { color: var(--grc-accent); }
.hr-guide-role { color: var(--grc-text-muted); }

/* Shared by the stream cards: the small uppercase time / viewer count in a
   card head. It lived in the odds block, which has been removed. */
.hr-watching { font-family: var(--grc-font-body); font-size: 11px; line-height: 11px; text-transform: uppercase; color: var(--grc-text); }
.hr-dark .hr-watching { color: var(--grc-on-dark, #abb0b2); }

/* ---------- stream cards --------------------------------------------- */
.hr-stream { display: flex; flex-direction: column; gap: 12px; padding: 16px;
	background: var(--grc-ink); border-radius: var(--hr-radius);
	box-shadow: inset 0 0 0 1px var(--hr-ring-dark); }
.hr-stream-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hr-live { font-family: var(--grc-font-ui); font-weight: 700; font-size: 13px; line-height: 13px;
	text-transform: uppercase; color: var(--grc-link); }
.hr-stream-teams { display: flex; align-items: baseline; gap: 10px; padding-block-end: 8px;
	font-family: var(--grc-font-body); font-weight: 700; font-size: 17px; line-height: 22px; color: #fff; }
.hr-stream-teams span { font-weight: 400; font-size: 13px; color: var(--grc-on-dark, #abb0b2); }
.hr-stream-meta { display: flex; flex-direction: column; gap: 8px; padding-block-end: 12px; }
.hr-stream-event { font-family: var(--grc-font-body); font-weight: 700; font-size: 13px; line-height: 13px; color: #fff; }
.hr-stream-sub { font-family: var(--grc-font-body); font-size: 12px; line-height: 16px; color: var(--grc-on-dark, #abb0b2); }
.hr-stream-cta { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.hr-stream-cta svg { display: block; flex: 0 0 auto; }
.hr-stream-cta b { font-family: var(--grc-font-body); font-weight: 700; font-size: 14.3px; line-height: 14.3px;
	text-transform: uppercase; color: #fff; }
.hr-stream-chan { font-family: var(--grc-font-body); font-size: 12px; line-height: 16px; color: var(--grc-on-dark, #abb0b2); }

/* ---------- video cards ---------------------------------------------- */
.hr-video { display: flex; flex-direction: column; gap: 12px; background: var(--grc-ink); border-radius: var(--hr-radius); overflow: hidden; }
.hr-video .hr-media { aspect-ratio: 250 / 160; }
.hr-video-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.hr-video-title { margin: 0; font-family: var(--grc-font-title); font-weight: 600; font-size: 16px; line-height: 20px; color: #fff; }
.hr-video-date { font-family: var(--grc-font-body); font-size: 11px; line-height: 12px; color: var(--grc-on-dark, #abb0b2); }
.hr-play {
	position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
	inline-size: 28px; block-size: 28px; border-radius: var(--hr-radius);
	background: var(--grc-accent); display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- latest news cards ---------------------------------------- */
.hr-news { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--grc-border); background: var(--grc-surface); }
.hr-news .hr-media { aspect-ratio: 312 / 188; }
.hr-news-body { padding: 0 10px 12px; display: flex; flex-direction: column; gap: 6px; }
/*
 * 17.6px/24px with a three-line clamp, per the artboard's own inline style
 * on .v3-news-txt — this was 14px/19px, which is the MOBILE value. The
 * bundle's .v3-news-txt rule (font-size:15px !important; line-height:19px)
 * lives in its narrow-viewport block alongside .v3-news-card going
 * flex-direction:row with a 132px thumbnail, which is exactly what the
 * <=720px block further down this file already does. So the small size was
 * correct for one breakpoint and had been applied to both.
 *
 * The clamp is the artboard's too: display:-webkit-box with
 * -webkit-line-clamp:3, so a long headline stops at three lines instead of
 * pushing the byline off the bottom of an equal-height card.
 */
.hr-news-title {
	margin: 0;
	font-family: var(--grc-font-title);
	font-weight: 600;
	font-size: 17.6px;
	line-height: 24px;
	color: var(--grc-ink);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.hr-lead { display: flex; flex-direction: column; gap: 8px; }
.hr-lead .hr-media { aspect-ratio: 968 / 526; }
.hr-lead-title { margin: 0; font-family: var(--grc-font-ui); font-weight: 700; font-size: 23.43px; line-height: 26px; letter-spacing: -0.01em; color: var(--grc-ink); }

/* ---------- rail ------------------------------------------------------ */
.hr-rail-block { display: flex; flex-direction: column; }
.hr-railhead { display: flex; align-items: stretch; }
.hr-railhead-tri { display: block; flex: 0 0 auto; }
/* TAG-AGNOSTIC. This was `.hr-railhead h2` alone, and the heading-hierarchy
   round changed the tag to h3 — which silently dropped the whole blue
   pennant treatment and left the words in the page's body font. A class
   plus both tags, so the tag can change again without taking the styling
   with it. */
.hr-railhead h2,
.hr-railhead h3,
.hr-railhead .hr-railhead-h {
	margin: 0; flex: 1 1 auto; padding: 6px 12px; background: var(--grc-accent);
	font-family: var(--grc-font-ui); font-weight: 800; font-size: 16px; line-height: 18px;
	text-transform: uppercase; color: #fff;
}
.hr-pop { margin: 0; padding: 0; list-style: none; }
.hr-pop li { display: flex; gap: 10px; padding-block: 10px; border-block-end: 1px solid var(--grc-border); }
.hr-pop li:last-child { border-block-end: 0; }
.hr-pop-n { font-family: var(--grc-font-ui); font-weight: 800; font-size: 18px; line-height: 18px; letter-spacing: -0.02em; color: var(--grc-accent); }
.hr-pop-t { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.hr-pop-title { font-family: var(--grc-font-title); font-weight: 600; font-size: 14px; line-height: 19px; color: var(--grc-ink); }

.hr-games { margin: 0; padding: 0; list-style: none; }
.hr-games li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 12px; border-block-end: 1px solid var(--grc-border); }
.hr-games-name { font-family: var(--grc-font-ui); font-weight: 600; font-size: 15px; line-height: 19px; color: var(--grc-ink); }
.hr-games-plat { font-family: var(--grc-font-body); font-size: 11px; line-height: 13px; color: var(--grc-text-faint); }
.hr-games-badge {
	inline-size: 26px; block-size: 26px; flex: 0 0 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--grc-font-ui); font-weight: 600; font-size: 16px; color: var(--grc-ink);
}
.hr-games-badge--s10 { background: var(--grc-s10); }
.hr-games-badge--s9  { background: var(--grc-s9); }
.hr-games-badge--s7  { background: var(--grc-s7); }
.hr-games-badge--s5  { background: var(--grc-s5); }
.hr-games-badge--s3  { background: var(--grc-s3); }
.hr-allwide {
	display: flex; align-items: center; justify-content: center; block-size: 44px; margin-block-start: 10px;
	border: 1px solid var(--grc-border-strong); background: transparent;
	font-family: var(--grc-font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--grc-ink); text-decoration: none;
}

/* games out this month — alternating tinted rows with a date tile */
.hr-fill { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hr-fill li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--hr-guide-bg); }
.hr-fill-date {
	inline-size: 34px; flex: 0 0 34px; padding: 4px 0; border-radius: var(--hr-radius);
	background: var(--grc-accent); color: #fff; text-align: center;
	font-family: var(--grc-font-ui); font-weight: 800;
}
.hr-fill-d { display: block; font-size: 14px; line-height: 18px; letter-spacing: -0.02em; }
.hr-fill-m { display: block; font-size: 9px; line-height: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.hr-fill-name { font-family: var(--grc-font-ui); font-weight: 600; font-size: 15px; line-height: 19px; color: var(--grc-ink); }
.hr-fill-cat { font-family: var(--grc-font-body); font-size: 11px; line-height: 13px; color: var(--grc-text-faint); }

@media (max-width: 720px) {
	/* Latest becomes an image-left list. */
	.hr-news { flex-direction: row; gap: 12px; align-items: flex-start; border: 0;
		padding-block-end: 12px; border-block-end: 1px solid var(--grc-border); }
	.hr-news .hr-media { inline-size: 132px; flex: 0 0 132px; block-size: 88px; aspect-ratio: auto; }
	.hr-news-body { flex: 1 1 auto; min-inline-size: 0; padding: 0; }
	/* The artboard's own narrow-viewport size for this card. */
	.hr-news-title { font-size: 15px; line-height: 19px; -webkit-line-clamp: 3; }
}

/* ======================================================================
 * ROUND 2 — card alignment, chip size, mobile trust grid.
 * Values measured from the v3 desktop bundle, not chosen.
 * ====================================================================== */

/* ---------- platform chips on the review cards -----------------------
 * hr-plats.php emits the site's .grc-chip, which is a 13px/7px-12px pill
 * built for archive filter rows. The artboard's platform tag on a review
 * card is a much smaller thing:
 *
 *   min-height:15px; padding:1px 3px; font-family:Arial; font-size:10px;
 *   line-height:100%; letter-spacing:0.06em; color:rgb(102,102,102);
 *   box-shadow:inset 0 0 0 1px rgb(221,221,221)
 *
 * Note the outline is an INSET BOX-SHADOW, not a border — the same choice
 * the card outlines make, so the 1px does not add to the box and the chips
 * stay on the title's baseline grid.
 *
 * Scoped to .hr-page so .grc-chip keeps its archive treatment everywhere
 * else; this is a size variant for this page, not a redefinition.
 * ------------------------------------------------------------------- */
.hr-page .grc-chips {
	gap: 4px;
	padding-block: 0 4px;
}
.hr-page .grc-chip {
	min-block-size: 15px;
	padding: 1px 3px;
	border: 0;
	box-shadow: inset 0 0 0 1px #dddddd;
	background: transparent;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-family: var(--grc-font-body);
	font-weight: 400;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--grc-text-muted, #666666);
}

/* The review card's own title carries 4px of vertical padding on the
   artboard, which is what separates it from the score pill above it. */
.hr-rev-card-title { padding-block: 4px; }

/* ---------- author + date pinned to the foot of every card -----------
 * THIS IS THE ARTBOARD'S OWN MECHANISM, not an invention: the review card
 * and the news card both import the byline component with
 * style="margin-top:auto", and the grid that holds them is
 * `grid-auto-rows:1fr; align-content:stretch` with `height:100%` on the
 * card. Three things have to be true together or the auto margin has
 * nowhere to push to:
 *
 *   1. the row's tracks are equal height          (grid-auto-rows: 1fr)
 *   2. the card fills its track                   (block-size: 100%)
 *   3. the body is the growing child of the card  (flex: 1 1 auto)
 *
 * Only then does margin-block-start:auto on the last row drop it to the
 * bottom. Setting just the margin — which is the obvious fix — does
 * nothing at all, because without 1 and 2 each card is only as tall as its
 * own content and there is no slack to absorb.
 * ------------------------------------------------------------------- */
.hr-5, .hr-4, .hr-3 { grid-auto-rows: 1fr; align-content: stretch; }
.hr-rev-grid { grid-auto-rows: 1fr; align-content: stretch; }

.hr-rev-card,
.hr-news,
.hr-video,
.hr-slot,
.hr-stream { block-size: 100%; }

.hr-rev-card-body,
.hr-news-body,
.hr-video-body,
.hr-slot-body { flex: 1 1 auto; min-block-size: 0; }

/* .hr-stream is itself the body — it has no inner wrapper. */
.hr-rev-card-body > .grc-card-meta,
.hr-news-body    > .grc-card-meta,
.hr-video-body   > .hr-video-date,
.hr-slot-body    > .hr-slot-prov,
.hr-stream       > .hr-stream-cta { margin-block-start: auto; }

/*
 * The lead review card is deliberately exempt. It is a single tall card
 * beside a 3x2 grid, with an excerpt the small cards do not have, so its
 * byline sits under the excerpt rather than at the foot of a 2-row-tall
 * box — and the artboard imports its byline WITHOUT margin-top:auto,
 * unlike the six cards next to it.
 */

/* Once the row is a horizontal rail the tracks are flex items, so
   grid-auto-rows stops applying; the cards size to the rail instead. */

/* ---------- hero trust list, two columns on mobile -------------------
 * The desktop row is a centred wrap with a 44px column gap, which at phone
 * widths breaks into an uneven 1-2-1-2 stagger. A 2-column grid gives the
 * seven items a straight left edge in each column; the odd one out sits
 * alone on the last row, which is what an odd count does.
 * ------------------------------------------------------------------- */
@media (max-width: 720px) {
	.hr-trust {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		gap: 12px 16px;
		margin-block-start: 24px;
		text-align: start;
	}
	.hr-trust li {
		min-inline-size: 0;
		align-items: flex-start;
	}
	/* Wrapped labels must not slide under the icon. */
	.hr-trust li > span:last-child { min-inline-size: 0; }
}