.page-game-landing #main-body{ background:transparent !important; padding:0 !important; }
/* V2 — every alias resolves to the shared --esa26c-* token (spec/tokens-*.css); fallbacks are the v2 dark values.
   display = large text/large icons (brand on dark, --brand-display on light); warn = semantic warning pair. */
.esagl{
  --bg:var(--esa26c-bg,#0e151d); --surface:var(--esa26c-surface,#1c2531); --surface2:var(--esa26c-surface-2,#26303e);
  --line:var(--esa26c-line,rgba(236, 231, 223,.10)); --line2:var(--esa26c-line-2,rgba(236, 231, 223,.18));
  --line-brand:var(--esa26c-line-brand,rgba(255, 122, 26,.35)); --line-brand-hover:var(--esa26c-line-brand-hover,rgba(255, 122, 26,.45));
  --ink:var(--esa26c-ink,#ece7df); --mute:var(--esa26c-ink-mute,#c9c3b9); --dim:var(--esa26c-ink-dim,#a49e95);
  --soft:var(--esa26c-brand-soft,rgba(var(--brand-rgb),.12)); --radius:16px;
  --display:var(--brand); --warn:var(--warning-bright);
  color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif;
}
html[data-theme="light"] .esagl{ --display:var(--brand-display,#dd5e08); --warn:var(--warning-deep); }
.page-game-landing{ background:var(--esa26c-bg) !important; }
.esagl *{ box-sizing:border-box; }
.esagl h1,.esagl h2,.esagl h3,.esagl h4{ margin:0; color:var(--ink); font-weight:800; letter-spacing:-.01em; }
.esagl p{ margin:0; color:var(--mute); line-height:1.7; }
.esagl ul{ margin:0; padding:0; list-style:none; }
.esagl a{ text-decoration:none; }
.gl-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
@media(max-width:768px){ .gl-wrap{ padding:0 16px; } }
.esagl{ padding:40px 0 90px; }
.gl-sec{ margin-top:74px; }
.gl-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-text); padding:6px 12px; border-radius:999px; background:transparent; border:1px solid var(--line-brand); }
.gl-eyebrow i{ font-size:14px; }
/* V2 — chips: outlined on dark; brand-soft fill (no border) on light surfaces/bg. Hero/banner islands re-outline below. */
html[data-theme="light"] :is(.gl-eyebrow, .gl-catcount){ background:var(--soft); border-color:transparent; }
.gl-sec-head{ max-width:760px; margin:0 auto 38px; text-align:center; }
.gl-sec-head h2{ font-size:clamp(26px,3vw,38px); margin:12px 0 12px; line-height:1.14; }
.gl-sec-head p{ font-size:16px; }
.gl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px; border-radius:11px; font-weight:800; font-size:15px; border:1px solid transparent; cursor:pointer; transition:color 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out; }
.gl-btn:active{ transform:scale(.98); }
.gl-btn:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; }
.gl-btn-primary{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.gl-btn-primary:hover{ background:var(--brand2); border-color:var(--brand2); color:var(--brand-ink); }
.gl-btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line2); }
.gl-btn-ghost:hover{ border-color:var(--line-brand-hover); color:var(--brand-text); }

/* hero */
.gl-hero{ position:relative; overflow:hidden; border-radius:26px; padding:54px 44px 58px;
  background:var(--surface);   /* V2 — flat */
  border:1px solid var(--line2); }
.gl-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:50px 50px; -webkit-mask-image:radial-gradient(820px 420px at 30% 30%,#000000,transparent 80%); mask-image:radial-gradient(820px 420px at 30% 30%,#000000,transparent 80%); }
.gl-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center; }
.gl-hero h1{ font-size:clamp(28px,3.8vw,46px); line-height:1.07; margin:16px 0 16px; }
.gl-hero h1 .hl{ color:var(--display); }   /* V2 — large text: display role */
.gl-hero-lead{ font-size:16.5px; max-width:560px; margin-bottom:26px; }
.gl-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.gl-hero-meta{ display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.gl-hero-meta .m{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--mute); font-weight:600; }
.gl-hero-meta .m i{ color:var(--brand-text); font-size:18px; }
.gl-hero-visual{ position:relative; aspect-ratio:1/1; width:100%; max-width:400px; min-height:320px; margin-left:auto; }
.gl-hero-visual::before{ display:none; }
.gl-orb{ position:absolute; inset:16%; border-radius:34px; background:var(--surface2); border:1px solid var(--line-brand); display:flex; align-items:center; justify-content:center; overflow:hidden; }   /* V2 — flat, no shadow */
.gl-orb::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:26px 26px; opacity:.5; }
.gl-orb i{ position:relative; z-index:2; font-size:96px; color:var(--display); }
.gl-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--line-brand); animation:glPulse 4.5s ease-out infinite; }   /* V2 — period >= 4s, opacity <= .35 */
.gl-ring.r2{ animation-delay:2.25s; }
@keyframes glPulse{ 0%{ transform:scale(.5); opacity:0 } 25%{ opacity:.35 } 100%{ transform:scale(1.05); opacity:0 } }
/* V2 — hero scene: one isometric scene per game (illus/gen_games.py), inline svg so the --il-* tokens cascade.
   The hero is a dark island in both themes, so one token set. No cover (game pages): the scene IS the visual.
   Cover (modpack pages): the cover stays and the scene sits as a badge bottom-right of it, desktop only. */
.gl-scene{ display:block; width:100%; height:auto; --il-delay:500ms; --il-top:#34404f; --il-left:#26303e; --il-right:#161e29; --il-ink:#ece7df; --il-neutral:#c9c3b9; }
.gl-hero-visual--scene{ aspect-ratio:auto; min-height:0; display:flex; align-items:center; justify-content:flex-end; }
.gl-hero-scene{ width:100%; max-width:340px; }
.gl-hero-coverwrap{ position:relative; width:100%; max-width:440px; }
.gl-hero-badge{ display:none; position:absolute; right:-12px; bottom:-12px; width:124px; padding:4px; border-radius:16px; background:var(--surface2); border:1px solid var(--line2); }
@media(min-width:992px){ .gl-hero-badge{ display:block; } }
@media(max-width:980px){ .gl-hero-visual--scene{ justify-content:center; } .gl-hero-scene{ max-width:300px; } }

/* stat band */
.gl-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:24px; padding:28px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.gl-stat{ text-align:center; }
.gl-stat strong{ display:block; font-size:30px; line-height:1; color:var(--display); margin-bottom:6px; }
.gl-stat span{ font-size:12px; color:var(--dim); font-weight:700; text-transform:uppercase; letter-spacing:.07em; }

/* cards */
.gl-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gl-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.gl-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:border-color 160ms ease-out; }
.gl-card:hover{ border-color:var(--line-brand-hover); }   /* V2 — card hover = border only */
.gl-card .ico{ width:50px; height:50px; border-radius:13px; background:var(--soft); color:var(--brand-text); display:flex; align-items:center; justify-content:center; font-size:23px; border:1px solid var(--line-brand); margin-bottom:14px; }
.gl-card a.hl{ color:var(--brand-text); font-weight:700; }
/* V2 — icon tiles carry no border on light */
html[data-theme="light"] :is(.gl-card .ico, .gl-callout .ic){ border-color:transparent; }
.gl-card h3{ font-size:17px; margin-bottom:9px; overflow-wrap:break-word; }
.gl-card p{ font-size:14px; overflow-wrap:break-word; }
/* break long unbroken words (error names like UnsupportedClassVersionError) so text never spills out of cards/headings */
.gl-hero, .bl-article{ overflow-wrap:break-word; }

/* steps */
.gl-steps{ display:flex; flex-direction:column; gap:12px; counter-reset:s; }
.gl-step{ display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.gl-step .n{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:15px; font-weight:800; color:var(--brand-ink); background:var(--brand); }
.gl-step h3{ font-size:16px; margin-bottom:5px; }
.gl-step p{ font-size:14px; line-height:1.6; }

/* chips */
.gl-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.gl-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:11px; background:var(--surface); border:1px solid var(--line2); font-size:14px; font-weight:600; color:var(--ink); transition:border-color 160ms ease-out; }
.gl-chip:hover{ border-color:var(--line-brand-hover); }
.gl-chip i{ color:var(--brand-text); }

/* callout */
.gl-callout{ position:relative; overflow:hidden; border-radius:20px; padding:34px 36px; display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
  background:var(--surface); border:1px solid var(--line-brand); }   /* V2 — flat */
.gl-callout .ic{ width:74px; height:74px; flex:none; border-radius:20px; display:grid; place-items:center; font-size:36px; color:var(--display); background:var(--soft); border:1px solid var(--line-brand); }
.gl-callout h3{ font-size:20px; margin-bottom:7px; } .gl-callout p{ font-size:14.5px; }
@media(max-width:820px){ .gl-callout{ grid-template-columns:1fr; text-align:center; } .gl-callout .ic{ margin:0 auto; } }

/* faq */
.gl-faq{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gl-faq details{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; transition:border-color 160ms ease-out; }
.gl-faq details[open]{ border-color:var(--line-brand); }
.gl-faq summary{ cursor:pointer; font-weight:700; color:var(--ink); font-size:15px; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gl-faq summary::-webkit-details-marker{ display:none; }
.gl-faq summary::after{ content:"\002B"; color:var(--brand-text); font-size:20px; font-weight:800; transition:transform 160ms ease-out; }
.gl-faq details[open] summary::after{ transform:rotate(45deg); }
.gl-faq p{ margin-top:11px; font-size:14px; }

/* related games */
.gl-related{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.gl-rel{ display:flex; align-items:center; gap:11px; padding:14px 16px; border-radius:13px; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-weight:700; font-size:14.5px; transition:color 160ms ease-out, border-color 160ms ease-out; }
.gl-rel:hover{ border-color:var(--line-brand-hover); color:var(--brand-text); }
.gl-rel i{ font-size:20px; color:var(--brand-text); }

/* cta banner */
.gl-banner{ position:relative; overflow:hidden; border-radius:24px; padding:48px 40px; text-align:center; margin-top:74px;
  background:var(--surface); border:1px solid var(--line2); }   /* V2 — flat */
.gl-banner h2{ font-size:clamp(24px,3vw,36px); margin-bottom:12px; }
.gl-banner p{ max-width:560px; margin:0 auto 24px; font-size:16px; }
.gl-banner-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* prose */
.gl-prose{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; }
.gl-prose h3{ font-size:19px; margin:0 0 12px; display:flex; align-items:center; gap:10px; } .gl-prose h3 i{ color:var(--brand-text); font-size:21px; }
.gl-prose p+p{ margin-top:12px; } .gl-prose b{ color:var(--ink); } .gl-prose .hl{ color:var(--brand-text); font-weight:700; }

/* reveal (pure CSS — never gets stuck hidden) */
@keyframes glReveal{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.esagl .rv{ animation:glReveal .4s ease-out both; }   /* V2 — once, opacity + 8px, 400ms */
@media(prefers-reduced-motion:reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; } .esagl .rv{ opacity:1; transform:none; } }

@media(max-width:980px){ .gl-hero-grid{ grid-template-columns:1fr; gap:28px; } .gl-hero-visual{ max-width:320px; margin:0 auto; } .gl-grid3{ grid-template-columns:1fr 1fr; } .gl-stats{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .esagl{ padding:24px 0 64px; } .gl-hero{ padding:34px 18px 38px; } .gl-grid3,.gl-grid2,.gl-faq,.gl-stats{ grid-template-columns:1fr; } .gl-sec{ margin-top:52px; } }

/* hub: clickable game cards */
a.gl-card{ display:flex; flex-direction:column; color:inherit; }
a.gl-card .go{ margin-top:auto; padding-top:12px; color:var(--brand-text); font-weight:700; font-size:13.5px; }
a.gl-card:hover .go{ text-decoration:underline; }
.gl-gamegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.gl-gamegrid + .gl-catrow{ margin-top:40px; }
.gl-catrow{ margin:0 0 18px; }
.gl-cathead{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; letter-spacing:.01em; color:var(--brand-text); margin:0; padding-bottom:12px; border-bottom:1px solid var(--line); }
.gl-cathead i{ font-size:18px; }
.gl-catcount{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; font-size:12px; font-weight:700; color:var(--brand-text); background:transparent; border:1px solid var(--line-brand); border-radius:999px; }

/* trademark / legal disclaimer */
.gl-legal{ margin-top:60px; margin-bottom:8px; padding:16px 20px; border-radius:12px; background:var(--surface); border:1px solid var(--line); font-size:12px; color:var(--dim); line-height:1.65; }
.gl-legal b{ color:var(--mute); }
/* guide-specific */
.gd-meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; }
.gd-meta .m{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--mute); font-weight:600; }
.gd-meta .m i{ color:var(--brand-text); font-size:16px; }
.gl-prose ul.gd-list{ margin:10px 0 0; display:flex; flex-direction:column; gap:9px; }
.gl-prose ul.gd-list li{ position:relative; padding-left:26px; font-size:14px; color:var(--mute); line-height:1.6; }
.gl-prose ul.gd-list li::before{ content:"\2713"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:6px; display:grid; place-items:center; font-size:10px; font-weight:800; color:var(--brand-text); background:var(--soft); border:1px solid var(--line-brand); }
.gl-step code, .gl-prose code, .gl-callout code{ background:var(--soft); color:var(--brand-text); padding:1px 6px; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:12.5px; }
/* V2 — code blocks stay dark in both themes (v2 dark bg / ink / ink-dim values, deliberately not theme tokens) */
.gd-code{ border-radius:11px; overflow:hidden; border:1px solid rgba(236, 231, 223,.16); background:#0e151d; margin-top:10px; }
.gd-code pre{ margin:0; padding:14px 16px; overflow-x:auto; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px; line-height:1.8; color:#ece7df !important; white-space:pre; }
.gd-code .c{ color:#a49e95 !important; }

/* ===================== BLOG ===================== */
.bl-article{ max-width:768px; margin:0 auto; }
.bl-article > p{ font-size:16px; line-height:1.8; color:var(--mute); margin-bottom:18px; }
.bl-article p b{ color:var(--ink); }
.bl-article a{ color:var(--brand-text); font-weight:600; }
.bl-lead{ font-size:18px !important; color:var(--ink) !important; line-height:1.7 !important; margin-bottom:24px !important; }
.bl-h2{ font-size:clamp(21px,2.3vw,28px); color:var(--ink); margin:34px 0 14px; line-height:1.22; }
.bl-ul{ margin:0 0 18px; display:flex; flex-direction:column; gap:10px; }
.bl-ul li{ position:relative; padding-left:26px; font-size:16px; line-height:1.7; color:var(--mute); }
.bl-ul li::before{ content:""; position:absolute; left:5px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.bl-ul li b{ color:var(--ink); }
.bl-quote{ margin:24px 0; padding:16px 24px; border-left:3px solid var(--brand); background:var(--surface); border-radius:0 12px 12px 0; font-size:17px; color:var(--ink); font-style:italic; }
.bl-meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; color:var(--dim); font-size:13.5px; font-weight:600; }
.bl-meta .m{ display:inline-flex; align-items:center; gap:7px; } .bl-meta .m i{ color:var(--brand-text); font-size:15px; }
a.gl-card .cat{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-text); margin-bottom:8px; }
a.gl-card .date{ font-size:12px; color:var(--dim); margin-top:auto; padding-top:12px; display:inline-flex; align-items:center; gap:6px; }

/* =====================================================================
   V2 — DARK ISLANDS INSIDE THE LIGHT THEME: .gl-hero (every game/blog/guide/kb/glossary page)
   and .gl-banner (closing CTA). One token flip — the v2 dark ladder shifted one step
   (band #1c2531, nested #26303e / #2c3644), dark inks/lines, bright brand for text/display —
   so headings, copy, icons, chips, orb and ghost buttons inside resolve light-on-dark by themselves.
   Scoped to :root[data-theme="light"] (beats html[data-theme="light"]); dark theme untouched.
   ===================================================================== */
:root[data-theme="light"] :is(.gl-hero, .gl-banner){
  --surface:#26303e; --surface2:#2c3644;
  --ink:#ece7df; --mute:#c9c3b9; --dim:#a49e95;
  --line:rgba(236, 231, 223,.12); --line2:rgba(236, 231, 223,.20);
  --soft:rgba(var(--brand-rgb),.12); --brand-text:var(--brand); --display:var(--brand);
  background:#1c2531; border-color:var(--line-brand);
}
/* chips and icon tiles inside an island follow the DARK pattern again */
:root[data-theme="light"] :is(.gl-hero, .gl-banner) .gl-eyebrow{ background:transparent; border-color:var(--line-brand); }
/* kb-article symptom code chips: semantic danger on the dark band */
:root[data-theme="light"] .gl-hero .kb-symp code{ background:var(--surface); border-color:var(--line2); color:var(--danger-bright); }
/* glossary jump-nav pills on the dark band */
:root[data-theme="light"] .gl-hero .gloss-jump a{ background:var(--surface); border-color:var(--line2); color:var(--mute); }
:root[data-theme="light"] .gl-hero .gloss-jump a:hover{ border-color:var(--line-brand-hover); color:var(--brand-text); }

/* ============================================================
   Article rich blocks (v8) — h3, ordered lists, callouts, tables.
   Theme-aware via the shared vars; respects the green ladder in light.
   Added when the blog renderer (blog.tpl) gained h3/ol/callout/table types.
   V2: the warning callout uses the semantic pair (--warning-bright dark / --warning-deep light via --warn);
   callouts and table headers are flat surfaces, never brand-soft fills.
   ============================================================ */
.bl-h2{ position:relative; padding-left:16px; }
.bl-h2::before{ content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; border-radius:999px; background:var(--brand); }
.bl-h3{ font-size:clamp(17px,1.7vw,20px); color:var(--ink); margin:26px 0 10px; line-height:1.3; font-weight:800; }
.bl-ol{ margin:0 0 18px; padding:0; counter-reset:blol; display:flex; flex-direction:column; gap:11px; list-style:none; }
.bl-ol li{ position:relative; padding-left:38px; font-size:16px; line-height:1.7; color:var(--mute); counter-increment:blol; }
.bl-ol li::before{ content:counter(blol); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:8px; background:var(--soft); color:var(--brand-text); border:1px solid var(--line-brand); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.bl-ol li b{ color:var(--ink); }

.bl-callout{ display:flex; gap:14px; align-items:flex-start; margin:24px 0; padding:16px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--line-brand); }
.bl-callout > i{ flex:none; font-size:20px; color:var(--brand-text); margin-top:1px; }
.bl-callout-in{ display:flex; flex-direction:column; gap:3px; }
.bl-callout-in strong{ color:var(--ink); font-size:15px; font-weight:800; }
.bl-callout-in span{ color:var(--mute); font-size:15px; line-height:1.65; }
.bl-callout--warn{ border-color:var(--warn); }
.bl-callout--warn > i{ color:var(--warn); }
.bl-callout--tip{ border-color:var(--line-brand); }

.bl-tablewrap{ margin:24px 0; overflow-x:auto; border:1px solid var(--line2); border-radius:14px; }
.bl-table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
.bl-table thead th{ text-align:left; padding:12px 16px; background:var(--surface2); color:var(--ink); font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line2); white-space:nowrap; }
.bl-table tbody td{ padding:12px 16px; color:var(--mute); line-height:1.55; border-bottom:1px solid var(--line2); vertical-align:top; }
.bl-table tbody tr:last-child td{ border-bottom:0; }
.bl-table tbody td:first-child{ color:var(--ink); font-weight:700; }
.bl-table tbody tr:hover td{ background:var(--surface2); }

/* ============================================================
   V2 (replaces R183) — article rich blocks on light: the base rules now resolve to white
   --surface / --line tokens, so only the KB callout (defined inline in kb-article.tpl with the
   old translucent fills; specificity (0,3,1) beats its (0,2,0)) still needs a solid surface.
   No shadows on cards (spec: light shadows only on floating elements).
   ============================================================ */
:root[data-theme="light"] .bl-article .kb-callout{ background:var(--surface); border-color:var(--line2); }

/* --- WCAG AA contrast (a11y): the bright brand orange fails 4.5:1 on light surfaces.
   Small text uses var(--brand-text), which the light theme maps to --brand-deep (4.54:1 on bg-2,
   4.97 on bg, 5.42 on white). Hero eyebrow keeps its own rule (higher specificity). --- */
:root[data-theme="light"] .bl-article a,
:root[data-theme="light"] a.gl-card .cat,
:root[data-theme="light"] .gl-card .cat,
:root[data-theme="light"] a.gl-card .go,
:root[data-theme="light"] .gl-cathead,
:root[data-theme="light"] .gl-catcount,
:root[data-theme="light"] .gl-prose .hl,
:root[data-theme="light"] .gl-step code,
:root[data-theme="light"] .gl-prose code,
:root[data-theme="light"] .gl-callout code,
:root[data-theme="light"] .gl-eyebrow{ color:var(--brand-text); }