/*
Theme Name: ReviewGamers (Vikinger child)
Theme URI: https://reviewgamers.com
Template: vikinger
Author: ReviewGamers
Description: Presentation-only child theme for Vikinger. Carries ReviewGamers component styling for the evidence badge, disclosure, product card, comparison table, upgrade delta and inline claim blocks — all of which are rendered by the ReviewGamers Core mu-plugin, not by this theme. NO BUSINESS LOGIC LIVES HERE. Evidence, claims, gates, entities, prices, tiers, commercial rules and schema remain owned by ReviewGamers Core.
Version: 0.1.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: reviewgamers-viki
*/

/* ==========================================================================
   VISUAL DIRECTION

   A gaming hardware buying/advice publication. Vikinger ships as a social
   community theme, so this child does two jobs: it suppresses the community
   furniture, and it imposes an editorial hierarchy on top of Vikinger's shell.

   Committed to Vikinger's `dark` colour preset with our cyan as the accent.
   That is a deliberate choice, not an inherited default: the deterministic
   article covers are dark compositions, so a dark ground makes the grid read
   as one publication instead of 34 pale cards with dark holes punched in them.

   Restrained gaming identity: no neon gradients, no esports slant, no coupon
   density, no score furniture. The evidence tier colours are functional and
   are never used decoratively.
   ========================================================================== */

:root {
  /* ---------------------------------------------------- BRAND FOUNDATION
     Sampled directly from the approved logo artwork
     (Brands/review gamers - logo H transparent.png), not invented and not
     eyeballed. Percentages are that colour's share of opaque logo pixels.

       #0C1830  22.8%  deep midnight navy - the "Review" wordmark and the R
       #7800F0   2.5%  purple, the mark's upper sweep
       #0C6CF0   ~2%   electric blue, the "Gamers" wordmark
       #00BCFC   1.7%  cyan, the play-triangle and the G highlight

     The navy is the single dominant brand colour, so it is the site
     foundation rather than a neutral grey. Blue/cyan/purple are used as
     accents with intent (see the evidence language block) rather than as
     decoration, which is what keeps this editorial instead of cyberpunk. */
  --rg-navy: #0c1830;
  --rg-blue: #0c6cf0;
  --rg-cyan: #00bcfc;
  --rg-purple: #7800f0;

  /* ------------------------------------------------------------ SURFACES
     Derived from the brand navy by lifting lightness only, so every surface
     stays on the same hue as the logo instead of drifting to a neutral. */
  --rg-bg: #0a1226;
  --rg-surface: #101c38;
  --rg-surface-raised: #162444;
  --rg-border: #22325a;
  --rg-ink: #eaf0fb;
  --rg-muted: #93a3c4;

  /* ------------------------------------------------------------- STATUS
     Semantic only. None of these is ever used to imply a score. */
  --rg-success: #2fbf71;
  --rg-warning: #e0a03c;
  --rg-danger: #ef5f5f;

  /* ------------------------------------------------- EVIDENCE TIER COLOUR
     Functional, and never colour-alone: the tier letter and the full label
     both appear, so the badge survives greyscale and colour blindness. */
  --rg-tier-a: var(--rg-success);
  --rg-tier-b: var(--rg-cyan);
  --rg-tier-c: var(--rg-warning);
  --rg-tier-d: #8fa0c2;

  /* Interaction colour. Cyan reads brightest on the navy foundation. */
  --rg-accent: var(--rg-cyan);

  /* Back-compat aliases so existing component rules keep working. */
  --rg-ink-soft: var(--rg-muted);
  --rg-line: var(--rg-border);
  --rg-alert: var(--rg-danger);

  /* Long-form measure. Buying guides are read, not skimmed. */
  --rg-measure: 68ch;
}

/* Vikinger paints the body from its own customizer variable. Point it at the
   brand foundation so the shell and our components share one ground. */
body { background-color: var(--rg-bg); }

/* ==========================================================================
   VIKINGER SHELL ADJUSTMENTS
   Vikinger's default spacing is built for profile pages and activity feeds.
   An article page needs less chrome above the fold and a real reading measure.
   ========================================================================== */

/* Vikinger's header is position:fixed, now 72px tall, so the content grid must
   clear it. Trimming this below the header height hides the first heading behind
   the bar — which is exactly what happened on the first pass. */
.content-grid {
  padding: 96px 20px 72px;
  max-width: 1200px;
}

@media (max-width: 600px) {
  .content-grid { padding: 88px 16px 48px; }
}

/* ==========================================================================
   MASTHEAD

   WHY THE HEADER IS LIGHT ON A DARK SITE
   The approved horizontal logo is a LIGHT-BACKGROUND asset. Its "Review"
   wordmark and the R glyph are #0C1830 — the same deep navy as the brand
   foundation — so on any dark masthead half the logo disappears. Measured on
   the real artwork against #11161F and against the brand navy itself: in both
   cases "Review" is effectively invisible; on white the full lockup is crisp.

   The approved set contains no reversed/knockout variant, and redrawing or
   recolouring the logo is not ours to do. So the masthead carries the logo on
   the background it was designed for, and the publication body stays dark.
   That is a deliberate design decision, not a fallback: it makes the logo the
   brightest object on the page and gives the dark editorial body a clean edge.

   If a reversed logo is supplied later, this block is the only thing that has
   to change.
   ========================================================================== */

.header {
  background: #ffffff !important;
  border-bottom: 0;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
  height: 72px !important;
}

/* The masthead rule.
   A white bar meeting a navy page with a plain 1px border read as an accident.
   This is a deliberate brand edge in the four logo colours, and it is the thing
   that makes the transition look intended rather than unfinished. */
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--rg-navy) 0%,
    var(--rg-blue) 34%,
    var(--rg-cyan) 62%,
    var(--rg-purple) 100%);
}

.header .header-brand-text,
.header .menu-main-item-link,
.header .menu-item-link {
  color: var(--rg-navy) !important;
  font-weight: 650;
}

.header .menu-main-item-link:hover,
.header .menu-item-link:hover {
  color: var(--rg-blue) !important;
}

/* Current section gets a brand underline rather than a filled pill: a
   publication marks where you are, it does not sell you a button. */
.header .menu-main-item.active > .menu-main-item-link,
.header .menu-item.active > .menu-item-link {
  color: var(--rg-blue) !important;
  box-shadow: inset 0 -3px 0 var(--rg-blue);
}

/* Logo sizing and the brand lockup.
   Vikinger clamps .header-brand to a fixed 80px box sized for a square
   community avatar, which clipped the horizontal logo. Width is released and
   the logo is constrained by HEIGHT only, so the aspect ratio is never touched.

   The site title is hidden because the approved logo already contains the
   "ReviewGamers" wordmark — rendering both printed the brand name twice side by
   side. It stays in the DOM for assistive tech and for the case where no logo
   is set. */
/* Vikinger's header runs flush to the viewport edge because its brand slot is
   a square avatar that reads fine there. A horizontal logo sat hard against
   x=0 with the R clipped, so the bar gets real leading padding. */
.header .header-actions { padding-left: 24px; padding-right: 24px; }

.header .header-brand {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  display: flex;
  align-items: center;
  padding-right: 28px;
  flex: 0 0 auto;
  overflow: visible;
}

.header .header-brand .logo {
  width: auto !important;
  height: auto !important;
  background: none !important;
  margin: 0;
}

/* Logo scale.
   At 40px in an 80px bar the wordmark read as a favicon with dead space around
   it. 50px in a 72px bar gives the mark presence and removes the empty band -
   the two defects were the same defect. Height-only, so the ratio is untouched. */
.header .logo-image,
.header .header-brand img {
  height: 50px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
}

.header .header-brand-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header space allocation.
   Vikinger sizes the nav slot for a handful of community links. Eight editorial
   sections needed 950px in a 743px slot, so the last item ("How we test") ran
   underneath the search bar. Measured, not guessed. The fix is threefold: let
   the brand+nav block take the free space, tighten item padding from 24px to
   14px, and cap the search — which together bring the nav inside its slot. */
.header .header-actions-full { flex: 1 1 auto; min-width: 0; }
.header .navigation, .header .menu-main { overflow: visible; }

.header .menu-main-item-link,
.header .navigation .menu-item-link { padding-left: 14px !important; padding-right: 14px !important; }

/* Search is a utility, not a feature. It was 406px of bright panel competing
   with the masthead; now it is a quiet 180px field that recedes until used. */
.header .form,
.header form { flex: 0 0 210px; max-width: 210px; margin-left: auto; }
.header .form input, .header form input {
  height: 36px !important;
  font-size: 0.85rem !important;
  background: rgba(12, 24, 48, 0.04) !important;
  border: 1px solid rgba(12, 24, 48, 0.10) !important;
  border-radius: 18px !important;
}
.header .form input:focus, .header form input:focus {
  background: #fff !important;
  border-color: var(--rg-blue) !important;
}

/* Empty community action slots (notifications, messages) reserve 48px each. */
.header > .header-actions:not(.header-actions-full):not(.search-bar):empty { display: none !important; }

@media (max-width: 1200px) {
  .header .form, .header form { display: none !important; }
}

/* Vikinger ships the burger as three near-white divs (.burger-icon.inverted),
   which is correct for its dark community header and invisible on ours. The
   bars are backgrounds, not strokes, so `fill` does nothing here. */
.header .burger-icon-bar { background: var(--rg-navy) !important; }

.header .mobilemenu-trigger svg,
.header .mobilemenu-trigger .icon,
.header .header-actions svg,
.header .search-bar svg {
  fill: var(--rg-navy) !important;
  color: var(--rg-navy) !important;
}

/* Vikinger's header search is styled for a dark community bar. */
.header .header-search input,
.header input[type="search"] {
  background: rgba(12, 24, 48, 0.05) !important;
  border: 1px solid rgba(12, 24, 48, 0.12) !important;
  color: var(--rg-navy) !important;
}

@media (max-width: 680px) {
  /* The full horizontal lockup stops being legible below roughly 200px wide,
     so the compact mark takes over. Same artwork, cropped, never squashed. */
  .header .logo-image,
  .header .header-brand img { height: 32px !important; }
}

/* Vikinger sets line-height: 1em on all headings and paragraphs, which is
   unreadable for body copy. Restored to an editorial rhythm for our surfaces. */
.rg-article__body p,
.rg-article__body li,
.page-open-content p,
.page-open-content li {
  line-height: 1.65;
  color: var(--rg-ink);
}

.rg-article__body h2,
.rg-article__body h3,
.page-open-content h2,
.page-open-content h3 {
  line-height: 1.25;
}

/* Community furniture we do not use.
   ReviewGamers has no accounts, no membership and no community systems, so a
   Login call to action would be a promise the site cannot keep. The side-menu
   rail is switched off through its theme mod rather than here; these are the
   surfaces with no setting behind them. */
/* Vikinger gives every custom menu link a generic chain-link glyph, meant for a
   community side menu where each item is a feature with its own icon. On an
   editorial nav it is eight identical chain icons carrying no information. */
.menu-item-link-icon,
.navigation-widget .menu-item-link-icon,
.login-button,
.header-actions .button.primary,
.section-header-info .section-pretitle,
.profile-header,
.user-avatar-progress,
.progress-stat,
.reaction-list,
.post-open-reactions,
.widget-box-status,
.page-open-comments,
.rg-hide { display: none !important; }

/* ==========================================================================
   EVIDENCE BADGE
   The badge is the trust product. Never decorative, never colour-alone: the
   letter and the full label both carry the tier, so it survives greyscale.
   ========================================================================== */

.rg-badge {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.25rem 0.75rem;
  align-items: start;
  margin: 1.25rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rg-line);
  border-left: 4px solid var(--rg-tier-d);
  border-radius: 6px;
  background: var(--rg-surface);
  color: var(--rg-ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.rg-badge--a { border-left-color: var(--rg-tier-a); }
.rg-badge--b { border-left-color: var(--rg-tier-b); }
.rg-badge--c { border-left-color: var(--rg-tier-c); }
.rg-badge--d { border-left-color: var(--rg-tier-d); }

.rg-badge__tier {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-weight: 700;
  font-size: 1.05rem;
}

.rg-badge--a .rg-badge__tier { color: var(--rg-tier-a); }
.rg-badge--b .rg-badge__tier { color: var(--rg-tier-b); }
.rg-badge--c .rg-badge__tier { color: var(--rg-tier-c); }
.rg-badge--d .rg-badge__tier { color: var(--rg-tier-d); }

.rg-badge__label { font-weight: 650; color: var(--rg-ink); }
.rg-badge__why { color: var(--rg-ink-soft); }
.rg-badge__link { font-size: 0.85rem; color: var(--rg-accent); }

.rg-badge--none {
  border-left-color: var(--rg-alert);
  color: var(--rg-alert);
  font-weight: 650;
}

.rg-badge[data-rg-context="cell"],
.rg-badge[data-rg-context="card"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  border-width: 1px 1px 1px 3px;
}

.rg-badge[data-rg-context="cell"] .rg-badge__why,
.rg-badge[data-rg-context="cell"] .rg-badge__link,
.rg-badge[data-rg-context="card"] .rg-badge__why,
.rg-badge[data-rg-context="card"] .rg-badge__link { display: none; }

.rg-badge[data-rg-context="cell"] .rg-badge__tier,
.rg-badge[data-rg-context="card"] .rg-badge__tier {
  grid-row: auto; width: auto; height: auto; border: 0; font-size: 0.75rem;
}

/* ---------------------------------------------------------- disclosure */

.rg-disclosure {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--rg-line);
  border-radius: 6px;
  color: var(--rg-ink-soft);
  font-size: 0.85rem;
}

.rg-disclosure p { margin: 0 0 0.35rem; line-height: 1.55; }
.rg-disclosure p:last-child { margin-bottom: 0; }
.rg-disclosure a { color: var(--rg-accent); }

/* ----------------------------------------------------------- freshness */

.rg-verified { margin: 0 0 1rem; font-size: 0.8rem; color: var(--rg-ink-soft); }
.rg-verified--missing { color: var(--rg-alert); font-weight: 600; }

/* --------------------------------------------------------------- price */

.rg-price { margin: 0.5rem 0; }
.rg-price__amount { font-weight: 700; font-size: 1.1rem; color: var(--rg-ink); }
.rg-price__checked { font-size: 0.75rem; color: var(--rg-ink-soft); }
.rg-price--unknown { font-size: 0.85rem; color: var(--rg-ink-soft); }

/* -------------------------------------------------------- product card */

.rg-card {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--rg-line);
  border-radius: 8px;
  background: var(--rg-surface);
}

.rg-card__name { margin: 0 0 0.5rem; font-size: 1.05rem; }
.rg-card__owned { margin: 0.25rem 0; font-size: 0.85rem; }
.rg-card__owned--no { color: var(--rg-ink-soft); }
.rg-card--error { color: var(--rg-alert); font-weight: 600; }

.rg-buy {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  color: var(--rg-accent);
}

.rg-buy--unlinked {
  border-style: dashed;
  color: var(--rg-ink-soft);
  font-weight: 500;
}

.rg-buy__retailer { font-weight: 400; font-size: 0.85em; }

/* -------------------------------------------------------------- tables */
/* Wide tables scroll inside their own container. The page body must never
   scroll horizontally - verified at 390, 768 and 1440. */

.rg-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--rg-line);
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}

.rg-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--rg-surface);
}

.rg-table th,
.rg-table td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--rg-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  color: var(--rg-ink);
}

.rg-table tr:last-child td { border-bottom: 0; }

.rg-table thead th {
  border-bottom-width: 2px;
  background: var(--rg-surface-raised);
  color: var(--rg-ink);
  font-weight: 650;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rg-table tbody th[scope="row"] {
  font-weight: 650;
  white-space: nowrap;
  color: var(--rg-ink);
}

.rg-table--error { color: var(--rg-alert); font-weight: 600; }
.rg-untested { color: var(--rg-ink-soft); font-style: italic; }

/* --------------------------------------------------------- upgrade delta */

.rg-delta {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--rg-line);
  border-radius: 8px;
  background: var(--rg-surface);
}

.rg-delta__spend { font-weight: 600; }
.rg-delta__band { font-weight: 700; text-transform: capitalize; }
.rg-delta__why { color: var(--rg-ink-soft); }
.rg-delta--error { color: var(--rg-alert); font-weight: 600; }

/* Band colours are functional, matching the decision rather than a score. */
.rg-delta__band[data-band="skip"] { color: var(--rg-alert); }
.rg-delta__band[data-band="marginal"] { color: var(--rg-tier-c); }
.rg-delta__band[data-band="worth-it"],
.rg-delta__band[data-band="priority"] { color: var(--rg-tier-a); }
.rg-delta__band[data-band="insufficient-evidence"] { color: var(--rg-ink-soft); }

/* ---------------------------------------------------------- inline claim */

.rg-claim__tier {
  margin-left: 0.15em;
  padding: 0 0.25em;
  border: 1px solid var(--rg-line);
  border-radius: 3px;
  font-size: 0.65em;
  color: var(--rg-ink-soft);
}

.rg-claim--missing { color: var(--rg-alert); }

/* ------------------------------------------- decision context strip */
/* game x platform x performance target x budget, rendered above a verdict.
   This is the core decision model made visible; without it the site reads as
   a generic product-review theme. */

.rg-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.rg-context li {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--rg-line);
  border-radius: 999px;
  background: var(--rg-surface);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--rg-ink-soft);
}

.rg-context li b { color: var(--rg-ink); font-weight: 650; }

/* ==========================================================================
   ARTICLE PAGE
   Long-form buying guides and comparisons. Editorial hierarchy first: what
   decision this answers, how we know, then the argument.
   ========================================================================== */

.rg-article { max-width: 100%; }

.rg-article__head {
  margin: 0 0 1.75rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--rg-line);
}

.rg-article__kicker {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rg-accent);
  text-decoration: none;
}

.rg-article__kicker:hover { text-decoration: underline; }

.rg-article__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--rg-ink);
  max-width: 30ch;
}

.rg-article__standfirst {
  margin: 0 0 1rem;
  max-width: var(--rg-measure);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--rg-ink-soft);
}

.rg-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--rg-ink-soft);
}

.rg-article__cover {
  margin: 0 0 1.75rem;
  border: 1px solid var(--rg-line);
  border-radius: 10px;
  overflow: hidden;
}

.rg-article__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.rg-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 1000px) {
  .rg-article__layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

.rg-article__body { max-width: var(--rg-measure); }

.rg-article__body > h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 680;
  color: var(--rg-ink);
  border-left: 3px solid var(--rg-accent);
  padding-left: 0.6rem;
}

.rg-article__body > h3 {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 660;
  color: var(--rg-ink);
}

.rg-article__body p { margin: 0 0 1.1rem; }
.rg-article__body a { color: var(--rg-accent); }

.rg-article__body ul,
.rg-article__body ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.rg-article__body li { margin: 0 0 0.45rem; }

.rg-article__body blockquote {
  margin: 1.5rem 0;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--rg-accent);
  background: var(--rg-surface);
  border-radius: 0 6px 6px 0;
}

.rg-article__body blockquote p { margin: 0; color: var(--rg-ink-soft); }
.rg-article__body code {
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: var(--rg-surface-raised);
  font-size: 0.9em;
}

/* ----------------------------------------------------------- aside rail */

.rg-aside { font-size: 0.9rem; }

.rg-aside__box {
  margin: 0 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--rg-line);
  border-radius: 8px;
  background: var(--rg-surface);
}

.rg-aside__box h2 {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rg-ink-soft);
}

.rg-aside__list { margin: 0; padding: 0; list-style: none; }
.rg-aside__list li { margin: 0 0 0.7rem; line-height: 1.45; }
.rg-aside__list li:last-child { margin-bottom: 0; }
.rg-aside__list a { color: var(--rg-ink); text-decoration: none; font-weight: 600; }
.rg-aside__list a:hover { color: var(--rg-accent); }
.rg-aside__srctier { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--rg-ink-soft); font-weight: 400; }

/* -------------------------------------------------------- related reading */

.rg-related {
  margin: 2.75rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--rg-line);
}

.rg-related > h2 {
  margin: 0 0 1.1rem;
  font-size: 1.15rem;
  font-weight: 680;
  color: var(--rg-ink);
}

/* ==========================================================================
   HOMEPAGE: HIERARCHY, RHYTHM AND SURFACE

   The previous homepage rendered all 34 articles through one card in a
   continuous four-column grid, six times in a row. Technically correct and
   visually a database listing. This block supplies the three things it lacked:
   hierarchy (lead vs supporting), rhythm (a different composition per hub) and
   surface variation (sections are not all the same flat navy).

   Nothing here changes an article, a URL, a tier or a fact.
   ========================================================================== */

/* ------------------------------------------------------------------- hero */

.rg-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin: 0 0 3.5rem;
  padding: 0 0 2.5rem;
  border-bottom: 1px solid var(--rg-border);
}

@media (min-width: 960px) {
  .rg-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
  }
}

.rg-hero__line {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 750;
  color: var(--rg-ink);
  max-width: 15ch;
}

.rg-hero__sub {
  margin: 0 0 1.25rem;
  max-width: 52ch;
  color: var(--rg-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.rg-hero__evidence a {
  color: var(--rg-cyan);
  font-weight: 650;
  text-decoration: none;
}
.rg-hero__evidence a:hover { text-decoration: underline; }

.rg-hero__anchor-label {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  background: var(--rg-blue);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- section heads */

.rg-hub-section { margin: 0 0 4rem; }

.rg-hub-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rg-border);
}

.rg-hub-section__head h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 720;
  letter-spacing: -0.01em;
  color: var(--rg-ink);
  padding-left: 0.75rem;
  border-left: 4px solid var(--rg-purple);
  line-height: 1.2;
}

.rg-hub-section__blurb {
  grid-column: 1;
  margin: 0;
  max-width: 62ch;
  color: var(--rg-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.rg-hub-section__more {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  white-space: nowrap;
  color: var(--rg-cyan);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}
.rg-hub-section__more:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .rg-hub-section__head { grid-template-columns: minmax(0, 1fr); }
  .rg-hub-section__more { grid-column: 1; grid-row: auto; align-self: start; }
}

/* Per-hub accent on the section rule, so sections are distinguishable at a
   glance without six different layouts shouting for attention. */
.rg-hub-section[data-hub="handhelds"]   .rg-hub-section__head h2 { border-left-color: var(--rg-cyan); }
.rg-hub-section[data-hub="pc"]          .rg-hub-section__head h2 { border-left-color: var(--rg-blue); }
.rg-hub-section[data-hub="displays"]    .rg-hub-section__head h2 { border-left-color: var(--rg-purple); }
.rg-hub-section[data-hub="peripherals"] .rg-hub-section__head h2 { border-left-color: #4ad0b0; }
.rg-hub-section[data-hub="value"]       .rg-hub-section__head h2 { border-left-color: var(--rg-warning); }
.rg-hub-section[data-hub="consoles"]    .rg-hub-section__head h2 { border-left-color: #e0705f; }

/* ------------------------------------------------------- surface variation */
/* One alternate panel, not six. Enough to break the single-tone page the
   review flagged, restrained enough to stay a publication. */

.rg-hub-section--panel {
  position: relative;
  padding: 2.25rem 1.75rem 2rem;
  border: 1px solid var(--rg-border);
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(224, 160, 60, 0.07) 0%, rgba(0, 0, 0, 0) 60%),
    var(--rg-surface);
}

@media (max-width: 600px) {
  .rg-hub-section--panel { padding: 1.5rem 1rem; }
}

/* --------------------------------------------------------------- grids */

.rg-tiles {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.rg-tiles--lead    { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.rg-tiles--two     { grid-template-columns: minmax(0, 1fr); }
.rg-tiles--three   { grid-template-columns: minmax(0, 1fr); }
.rg-tiles--rail    { grid-template-columns: minmax(0, 1fr); }
.rg-tiles--compact { grid-template-columns: minmax(0, 1fr); gap: 0; }

@media (min-width: 700px) {
  .rg-tiles--two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-tiles--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-tiles--rail  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rg-tiles--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
}

@media (min-width: 1000px) {
  .rg-tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rg-tiles--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.75rem; }
}

/* Flagship: one lead beside a rail of three. The launch wedge gets the weight. */
.rg-flagship { display: grid; gap: 1.5rem; margin: 0 0 1.5rem; }

@media (min-width: 1000px) {
  .rg-flagship {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
  .rg-flagship .rg-tiles--rail { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* --------------------------------------------------------------- cards */

.rg-tile { margin: 0; }

.rg-tile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--rg-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--rg-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.rg-tile__link:hover,
.rg-tile__link:focus-visible {
  border-color: var(--rg-cyan);
  background: var(--rg-surface-raised);
  transform: translateY(-2px);
}

.rg-tile__media { display: block; overflow: hidden; background: var(--rg-navy); }

.rg-tile__img,
.rg-tile__link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.rg-tile__link:hover .rg-tile__img { transform: scale(1.03); }

.rg-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1rem 1.05rem;
  flex: 1 1 auto;
}

.rg-tile__kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rg-cyan);
}

.rg-tile__title {
  font-size: 1.02rem;
  font-weight: 680;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--rg-ink);
}

.rg-tile__excerpt {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--rg-muted);
}

/* Evidence tier: present on every card, deliberately quieter than the title.
   It was previously set in the same uppercase run as the article type, which
   made "EVIDENCE C" compete with the headline on every single card. */
.rg-tile__tier {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.14rem 0.5rem;
  border: 1px solid var(--rg-border);
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rg-muted);
  background: rgba(255, 255, 255, 0.02);
}

.rg-tile__tier[data-tier="A"] { color: var(--rg-success); border-color: rgba(47, 191, 113, 0.4); }
.rg-tile__tier[data-tier="B"] { color: var(--rg-cyan); border-color: rgba(0, 188, 252, 0.4); }
.rg-tile__tier[data-tier="C"] { color: var(--rg-warning); border-color: rgba(224, 160, 60, 0.34); }

/* ---- feature variant ---- */

.rg-tile--feature .rg-tile__body { padding: 1.25rem 1.35rem 1.4rem; gap: 0.55rem; }

.rg-tile--feature .rg-tile__title {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 720;
  line-height: 1.22;
}

.rg-tile--feature .rg-tile__excerpt { font-size: 0.98rem; line-height: 1.6; }
.rg-tile--feature .rg-tile__img { aspect-ratio: 3 / 2; }

/* ---- compact variant: a text rail, no image ---- */

.rg-tile--compact .rg-tile__link {
  border: 0;
  border-top: 1px solid var(--rg-border);
  border-radius: 0;
  background: none;
  padding: 0.85rem 0 0;
}
.rg-tile--compact .rg-tile__link:hover { transform: none; background: none; }
.rg-tile--compact .rg-tile__link:hover .rg-tile__title { color: var(--rg-cyan); }
.rg-tile--compact .rg-tile__body { padding: 0; gap: 0.3rem; }
.rg-tile--compact .rg-tile__title { font-size: 0.94rem; font-weight: 650; }
.rg-tile--compact .rg-tile__tier { margin-top: 0.15rem; }

/* Rail cards inside the flagship block go horizontal on desktop so the lead
   story keeps the visual weight. */
@media (min-width: 1000px) {
  .rg-flagship .rg-tiles--rail .rg-tile__link { flex-direction: row; align-items: stretch; }

  /* The media box is positioned so the image can fill it without the image
     being what DECIDES the height. An earlier revision set height:100% on the
     img inside an auto-height flex row, and each rail card grew to thousands of
     pixels tall - the homepage rendered at 10,446px. The parent must own the
     box; the image only fills it. */
  .rg-flagship .rg-tiles--rail .rg-tile__media {
    flex: 0 0 38%;
    position: relative;
    align-self: stretch;
    min-height: 116px;
  }
  .rg-flagship .rg-tiles--rail .rg-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .rg-flagship .rg-tiles--rail .rg-tile__body { min-width: 0; }
  .rg-flagship .rg-tiles--rail .rg-tile__title { font-size: 0.96rem; }
  .rg-flagship .rg-tiles--rail .rg-tile__excerpt { display: none; }
}

/* ------------------------------------------------------- evidence module */
/* Formerly "What we have not done yet", styled like an admin warning box.
   Same facts, presented as the site's differentiator. */

.rg-evidence-module {
  display: grid;
  gap: 1.75rem;
  margin: 3.5rem 0 1rem;
  padding: 2.25rem 1.9rem;
  border: 1px solid var(--rg-border);
  border-radius: 16px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(120, 0, 240, 0.10) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(0, 188, 252, 0.08) 0%, rgba(0, 0, 0, 0) 55%),
    var(--rg-surface);
}

@media (min-width: 900px) {
  .rg-evidence-module { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: start; }
  .rg-evidence-module__note { grid-column: 1 / -1; }
}

.rg-evidence-module h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 720;
  color: var(--rg-ink);
}

.rg-evidence-module p { margin: 0 0 0.7rem; color: var(--rg-muted); font-size: 0.95rem; line-height: 1.65; }
.rg-evidence-module__link a { color: var(--rg-cyan); font-weight: 650; text-decoration: none; }
.rg-evidence-module__link a:hover { text-decoration: underline; }

.rg-tierlist { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.rg-tierlist__item {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.15rem 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rg-border);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(10, 18, 38, 0.5);
}

.rg-tierlist__item[data-tier="A"] { border-left-color: var(--rg-success); }
.rg-tierlist__item[data-tier="B"] { border-left-color: var(--rg-cyan); }
.rg-tierlist__item[data-tier="C"] { border-left-color: var(--rg-warning); }
.rg-tierlist__item[data-tier="D"] { border-left-color: var(--rg-tier-d); }

/* The tier we are actually on is stated, not hidden. */
.rg-tierlist__item--current { background: rgba(224, 160, 60, 0.08); }

.rg-tierlist__k {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.95rem;
}

.rg-tierlist__item[data-tier="A"] .rg-tierlist__k { color: var(--rg-success); }
.rg-tierlist__item[data-tier="B"] .rg-tierlist__k { color: var(--rg-cyan); }
.rg-tierlist__item[data-tier="C"] .rg-tierlist__k { color: var(--rg-warning); }
.rg-tierlist__item[data-tier="D"] .rg-tierlist__k { color: var(--rg-tier-d); }

.rg-tierlist__n { font-weight: 660; color: var(--rg-ink); font-size: 0.92rem; }
.rg-tierlist__d { color: var(--rg-muted); font-size: 0.86rem; line-height: 1.5; }
.rg-tierlist__d b { color: var(--rg-ink); font-weight: 650; }

.rg-evidence-module__note {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rg-border);
  font-size: 0.9rem;
  color: var(--rg-muted);
}


/* --------------------------------------------------------- hub archive */

.rg-hub-header {
  margin: 0 0 1.75rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--rg-line);
}

.rg-hub-header h1 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.5rem, 3.8vw, 2.1rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--rg-ink);
}

.rg-hub-header__desc {
  margin: 0;
  color: var(--rg-ink-soft);
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.6;
}

.rg-hub-header__count {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--rg-ink-soft);
}

/* ------------------------------------------------------------ pagination */

.rg-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 2rem 0 0;
}

.rg-pagination .page-numbers {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--rg-line);
  border-radius: 6px;
  color: var(--rg-ink);
  text-decoration: none;
  font-size: 0.9rem;
}

.rg-pagination .page-numbers.current,
.rg-pagination .page-numbers:hover {
  border-color: var(--rg-accent);
  color: var(--rg-accent);
}

/* ==========================================================================
   EVIDENCE / TRUST COLOUR LANGUAGE

   Colour carries meaning here, and only meaning. None of these is ever used to
   imply a score, a rating or a ranking — the site publishes no numeric scores,
   so there is nothing for a colour to score.

     blue    information, editorial context
     cyan    comparison / technical context, and the interaction colour
     purple  category and hub accent
     amber   buying or value caution
     green   verified positive status ONLY - currently unreachable, because
             nothing on this site is Tier A yet
     red     warning / problem
   ========================================================================== */

.rg-note--info    { border-left-color: var(--rg-blue); }
.rg-note--compare { border-left-color: var(--rg-cyan); }
.rg-note--caution { border-left-color: var(--rg-warning); }
.rg-note--warning { border-left-color: var(--rg-danger); }

/* Hub accent. Purple is the category colour, so a hub heading reads as
   navigation while an article H2 reads as structure. */
.rg-hub-section > h2 { border-left-color: var(--rg-purple); }
.rg-hub-header h1 { border-bottom: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: #070e1e;
  border-top: 1px solid var(--rg-border);
  padding-top: 8px;
}

.footer a { color: var(--rg-muted) !important; }
.footer a:hover { color: var(--rg-cyan) !important; }

.footer .footer-logo-text,
.footer .footer-title,
.footer h6 { color: var(--rg-ink) !important; }

/* Vikinger's footer reserves a wide column for a community logo block that we
   do not use, which left a large empty area to the left of the links. */
.footer .footer-column:empty,
.footer .footer-logo:empty { display: none; }

/* ------------------------------------------------------------------- a11y */

.rg-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}

.rg-skip:focus {
  left: 0;
  padding: 0.6rem 1rem;
  background: var(--rg-surface-raised);
  color: var(--rg-ink);
}

.rg-badge__link:focus-visible,
.rg-buy:focus-visible,
.rg-tile__link:focus-visible,
.rg-table-wrap:focus-visible {
  outline: 3px solid var(--rg-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rg-tile__link:hover { transform: none; }
}

@media (max-width: 480px) {
  .rg-tiles { grid-template-columns: 1fr; }
}

/* Hub lead card: a single wide story above the grid. Capped so the cover does
   not become a billboard on a 1200px page. */
@media (min-width: 800px) {
  .rg-tiles--hublead .rg-tile__link { flex-direction: row; align-items: stretch; }
  .rg-tiles--hublead .rg-tile__media { flex: 0 0 52%; position: relative; min-height: 240px; }
  .rg-tiles--hublead .rg-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .rg-tiles--hublead .rg-tile__body { justify-content: center; padding: 1.5rem 1.6rem; }
}
.rg-tiles--hublead { margin-bottom: 1.5rem; }