/* WoW Forever Guides: home page, contract version 3 ("Feed + Rail, final", 2026-10-03,
   ops/design/templates/home/contract.md). Linked only from "/", after styles.css and the
   component sheets; everything is scoped under .hp except the wide frame below.

   Visual thesis: brand v2.1 addon windows on dark stone, wide and dense like a raid UI. Every
   section is a window (1px black edge, the stone line inside, a title bar on --bg-3). Talent
   states use the game's colors: green for new, epic purple for reworked, stone gray for
   unchanged; class colors mark names, never bars. The page's one red button and its one orange
   button sit side by side in the planner.

   Layout (version 3.1): a wide frame (--hp-max, 1560px) with fluid gutters. Under the page
   head the tools zone starts: a main column (big news, What changed, meter, road) beside a
   sticky planner rail that runs from the top of the zone to the end of the road; then full
   width again. The main column is a size container (hp-main), so the big news and What
   changed fit its width: the Related box drops under 80rem of column, What changed takes
   three columns from 56rem, and the big news art moves above the story under 52rem. Under
   1100px there is no rail and the planner sits after the meter. Wide layouts pair each
   viewport query with a page container query 1rem under it, so 200% text reflows them
   (tests/templates/reflow.test.mjs). Nothing is fixed to the viewport.

   Motion: 150ms hover and focus changes, fine pointers only; prefers-reduced-motion drops it. */

/* The home page's wide frame also widens the header and footer, so they line up with it. */
:root { --hp-max: 97.5rem; --page: var(--hp-max); }

.hp {
  --hp-gap: .625rem;
  --hp-pad: .75rem;
  --hp-rail: 22rem;
  display: block;
  padding-bottom: var(--s-6);
  background: var(--bg);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.hp ~ .site-footer { margin-top: 0; }
/* Links take the accent; :where keeps this at one class so each section's own link rules win. */
:where(.hp) a:not(.wfg-btn) { color: var(--accent-text); }
:where(.hp) a:not(.wfg-btn):hover { color: var(--ink); }
.hp svg { width: 1em; height: 1em; flex: none; }
.hp b { font-weight: 600; }

.hp-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hp-gap);
  width: min(100% - 2 * var(--gutter), var(--hp-max));
  margin-inline: auto;
  padding-top: .75rem;
}
.hp-frame > * { min-width: 0; }

/* ---------- Shared pieces ---------- */

.hp-win {
  min-width: 0;
  padding: 1px;
  border: 1px solid var(--edge);
  background: var(--bg-2);
  box-shadow: var(--panel-frame);
}
.hp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  min-height: 2.25rem;
  padding: .3rem .75rem .2rem;
  border-bottom: 1px solid var(--edge);
  background: var(--bar-fill);
}
.hp-bar h2, .hp .hp-bar h2 { margin: 0; font: var(--heading-weight) 1.35rem/1.2 var(--font-heading); letter-spacing: 0; color: var(--ink); }
.hp-bar-meta, .hp-road-sum {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .45rem;
  margin: 0 0 0 auto;
  font: 400 .8rem/1.3 var(--font-ui);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hp-bar-meta time { color: var(--ink-2); }
.hp .hp-bar-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.75rem; font: 400 .85rem/1.2 var(--font-ui); color: var(--ink-2); text-decoration: none; }
.hp-bar-meta + .hp-bar-link, .hp-road-sum + .hp-bar-link { margin-left: .5rem; }
.hp-bar > .hp-bar-link:only-child, .hp-bar > h2 + .hp-bar-link { margin-left: auto; }
.hp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .4rem .75rem;
  border-top: 1px solid var(--hairline);
  font: 400 .82rem/1.4 var(--font-ui);
  color: var(--ink-3);
}
.hp-foot-links, .hp-foot-key { display: inline-flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.hp .hp-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  font: 400 .95rem/1.2 var(--font-ui);
  color: var(--accent-text);
  text-decoration: none;
}
.hp-more svg { transition: transform var(--t); }
.hp-lbl { margin: 0; font: 400 .72rem/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.hp-kind {
  flex: none;
  margin: 0;
  padding: .2rem .4rem .1rem;
  border-radius: var(--r-ctl);
  box-shadow: inset 0 0 0 1px var(--edge-inner);
  font: 400 .72rem/1.1 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hp-kind.is-big { background: var(--classic-yellow); box-shadow: none; color: var(--bg); }
.hp-bar-kicker { margin: 0; font: 400 .8rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.hp-ext { width: .75rem; height: .75rem; margin-left: .2rem; vertical-align: -1px; }
.hp-cat { font: 400 .7rem/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.hp-cat[data-cat="beta"] { color: var(--classic-yellow); }
.hp .wfg-evidence { vertical-align: -2px; }

/* ---------- Title ---------- */

.hp-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.25rem; padding: .25rem 0 .1rem; }
.hp-title h1, .hp .hp-title h1 {
  margin: 0;
  padding-left: .7rem;
  border-left: 4px solid var(--accent);
  font: 400 2.25rem/1 var(--font-display);
  letter-spacing: .01em;
}
/* The dek takes its own line under the h1 and the trust line, which share the first. */
.hp-lead { order: 2; flex: 1 1 100%; margin: 0; font: 400 .95rem/1.45 var(--font-body); color: var(--ink-2); }
.hp-trust { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin: 0 0 0 auto; font: 400 .8rem/1.4 var(--font-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hp .hp-trust a { color: var(--accent-text); }

/* ---------- 1. Big news ---------- */

.hp-big-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main" "art";
}
.hp-big-art { grid-area: art; margin: 0; border-block: 1px solid var(--edge); background: var(--tip-ground); }
.hp-big-art img { width: 100%; height: 6.5rem; object-fit: cover; object-position: 50% 60%; }
.hp-big-art picture { display: contents; }
.hp-big-main { grid-area: main; display: grid; align-content: start; gap: .45rem; min-width: 0; padding: .6rem .75rem .5rem; }
.hp .hp-big-title { margin: 0; font: var(--heading-weight) 1.5rem/1.25 var(--font-heading); letter-spacing: 0; text-wrap: balance; }
.hp .hp-big-title a { color: var(--ink); text-decoration: none; }
.hp-big-src { display: flex; align-items: baseline; gap: .45rem; margin: 0; font: 400 .82rem/1.35 var(--font-ui); color: var(--ink-3); }
.hp .hp-big-src a { color: var(--ink-2); }
.hp-big-src b { font-weight: 400; color: var(--ink-2); }
.hp-big-src b.wfg-blue { color: var(--blue-post); }
/* BlueQuote: the story's first Blizzard quote, its label in real text and a blue rule. */
.hp-big-quote { margin: 0; padding: .1rem 0 .15rem .7rem; border-left: 2px solid var(--blue-post); }
.hp-big-quote p { margin: 0; font: 400 .95rem/1.45 var(--font-body); }
.hp-big-quote .wfg-blue-by { font: 400 .7rem/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.hp-big-list { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.hp-big-list li { position: relative; padding-left: 1rem; font: 400 .95rem/1.45 var(--font-body); color: var(--ink-2); }
.hp-big-list li::before { content: ""; position: absolute; left: 1px; top: .58em; width: .375rem; height: .375rem; background: var(--classic-yellow); box-shadow: 0 0 0 1px var(--edge); }
.hp-big-list b { font-weight: 600; color: var(--ink); }
.hp-big-foot { margin: 0; }
.hp-was, .hp-x { color: var(--ink-3); }
.hp s { color: var(--ink-3); text-decoration-thickness: 1px; }
.hp-age:not(:empty)::before { content: " · "; }
/* Each slide's kind, category, date and age, above its headline. */
.hp-slide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; margin: 0; font: 400 .8rem/1.3 var(--font-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hp-slide-meta time { color: var(--ink-2); }

/* The carousel (home.js adds .is-rot): every slide in one grid cell, so the slot is as tall as
   the tallest story and the page below never moves; only the active slide is visible. */
.hp-big .hp-big-beta { margin-left: auto; }
.hp-rot-stage { display: grid; }
.hp-rot-stage > .hp-slide { grid-area: 1 / 1; min-width: 0; }
.hp-big.is-rot .hp-slide { visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
.hp-big.is-rot .hp-slide.is-on { visibility: visible; opacity: 1; transition: opacity .35s ease, visibility 0s; }
.hp-rot-ctl { display: inline-flex; align-items: center; gap: .2rem; }
.hp-rot-ctl[hidden] { display: none; }
.hp-rot-btn { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: var(--r-ctl); background: transparent; box-shadow: inset 0 0 0 1px var(--edge-inner); color: var(--ink-2); cursor: pointer; }
.hp-rot-btn[hidden] { display: none; }
.hp-rot-btn svg { width: .85rem; height: .85rem; }
.hp-rot-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hp-rot-pause[aria-pressed="true"] { color: var(--classic-yellow); box-shadow: inset 0 0 0 1px var(--classic-yellow); }
.hp-rot-pause[aria-pressed="true"] svg path { d: path("M5 3.5 12.5 8 5 12.5Z"); fill: currentColor; }
.hp-rot-count { margin: 0 .2rem; font: 400 .8rem/1 var(--font-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hp-rot-count b { font-weight: 400; color: var(--ink); }
/* The headline strip: the other stories as links, tabs once home.js runs. The active tab's
   bar fills over the slide's time on screen; its animationend turns the slide. */
.hp-rot-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--edge); overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.hp-rot-tabs li { min-width: 0; scroll-snap-align: start; }
.hp-rot-tabs li + li { border-left: 1px solid var(--hairline); }
.hp .hp-rot-tabs a { position: relative; display: grid; align-content: start; gap: .2rem; height: 100%; padding: .45rem .7rem .55rem; color: var(--ink-2); text-decoration: none; }
.hp .hp-rot-tabs a[aria-current="true"], .hp .hp-rot-tabs a.is-on { background: var(--bg-3); color: var(--ink); }
.hp-rot-tabs a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.hp-rot-meta { display: flex; gap: .45rem; align-items: baseline; font: 400 .7rem/1.2 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.hp-rot-t { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font: 400 .86rem/1.3 var(--font-body); }
.hp-rot-fill { position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: var(--classic-yellow); transform: scaleX(0); transform-origin: left; }
.hp-big.is-rot .hp-rot-tabs a.is-on .hp-rot-fill { animation: hp-rot-fill 9s linear forwards; }
.hp-big.is-rot:hover .hp-rot-fill, .hp-big.is-rot:focus-within .hp-rot-fill, .hp-big.is-paused .hp-rot-fill { animation-play-state: paused !important; }
.hp-big.is-paused .hp-rot-tabs a.is-on .hp-rot-fill { transform: scaleX(1); opacity: .45; }
@keyframes hp-rot-fill { to { transform: scaleX(1); } }

/* ---------- 2. What changed ---------- */

.hp-what-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(19rem, 23%)), 1fr));
  gap: 0 1px;
  margin: 0;
  padding: .15rem .25rem;
  list-style: none;
  background: linear-gradient(var(--hairline), var(--hairline)) no-repeat;
  background-size: 0 0;
}
.hp-what-list li { min-width: 0; border-bottom: 1px solid var(--hairline); }
.hp .hp-what-list a {
  display: grid;
  grid-template-columns: 2.6rem 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  min-height: 3rem;
  height: 100%;
  padding: .35rem .5rem;
  color: var(--ink);
  text-decoration: none;
}
.hp-what-list time { font: 400 .8rem/1.2 var(--font-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-what-icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--edge); background: var(--tip-ground); color: var(--ink-3); }
.hp-what-icon img { width: 100%; height: 100%; }
.hp-what-icon.is-glyph svg { width: 1.1rem; height: 1.1rem; }
.hp-what-line { display: grid; gap: .05rem; min-width: 0; }
.hp-what-area { display: flex; align-items: center; gap: .35rem; font: 400 .7rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.hp-what-list li:not([class]) .hp-what-area { color: var(--ink-3); }
.hp-what-txt { font: 400 .92rem/1.35 var(--font-body); color: var(--ink-2); }
.hp-what-txt b { color: var(--ink); }
.hp-what-fallback { margin: 0; padding: .5rem .75rem; }
.hp-what-more > summary { display: flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .75rem; border-top: 1px solid var(--hairline); list-style: none; cursor: pointer; font: 400 .9rem/1 var(--font-ui); color: var(--classic-yellow); }
.hp-what-more > summary::-webkit-details-marker { display: none; }
.hp-what-more > summary span { color: var(--ink-3); }
.hp-what-more > summary::after { content: ""; width: .4rem; height: .4rem; margin-top: -.2rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.hp-what-more[open] > summary::after { margin-top: .15rem; transform: rotate(-135deg); }
.hp-what-more > .hp-what-list { border-top: 1px solid var(--hairline); }

/* ---------- 3. Tools zone ---------- */

.hp-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hp-gap); align-items: start; }
/* Under 1100px the main column dissolves so the planner can sit between the meter and the road. */
.hp-main { display: contents; }
.hp-meter { order: 1; }
.hp-plan { order: 2; }
.hp-road { order: 3; }
.hp-tools > *, .hp-main > * { min-width: 0; }

/* ---------- 3a. Talent change meter ---------- */

.hp-msum { display: grid; grid-template-columns: repeat(3, auto) minmax(0, 1fr); align-items: end; gap: .4rem 1.5rem; padding: .6rem .75rem .5rem; border-bottom: 1px solid var(--hairline); }
.hp-stat { display: grid; gap: .2rem; margin: 0; }
.hp-stat b { font: 400 2.75rem/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.hp-stat span { display: inline-flex; align-items: center; gap: .35rem; font: 400 .72rem/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.hp-stat span::before { content: ""; width: .55rem; height: .55rem; background: var(--st); box-shadow: 0 0 0 1px var(--edge); }
.hp [data-state="new"] { --st: var(--new); --st-text: var(--new); }
.hp [data-state="reworked"] { --st: var(--reworked); --st-text: var(--reworked); }
.hp [data-state="unchanged"] { --st: var(--unchanged); --st-text: var(--unchanged-text); }
.hp-stat b { color: var(--st-text); }
.hp-msrc { display: flex; gap: .45rem; justify-self: end; max-width: 46ch; margin: 0; font: 400 .8rem/1.4 var(--font-ui); color: var(--ink-3); }
.hp-msrc b { font-weight: 400; color: var(--ink-2); }
.hp-mtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem .75rem; border-bottom: 1px solid var(--hairline); }
.hp-sort { display: grid; grid-template-columns: repeat(4, auto); border: 1px solid var(--edge); background: var(--tip-ground); box-shadow: 0 0 0 1px var(--hairline); }
.hp-sort[hidden] { display: none; }
.hp-sort button { min-height: 2.75rem; padding: 0 1rem; border: 0; background: transparent; color: var(--ink-2); font: 400 .95rem/1 var(--font-ui); cursor: pointer; white-space: nowrap; }
.hp-sort button + button { border-left: 1px solid var(--edge); }
.hp-sort button[aria-pressed="true"] { background: var(--bg-3); color: var(--classic-yellow); box-shadow: inset 0 -2px 0 var(--classic-yellow); }
.hp-mtools .wfg-cx-key { margin-left: auto; }

.hp-meter .wfg-cx { --cx-gap: .6em; }
.hp-mrows { min-width: 0; margin: 0; padding: 0; border: 0; }
.hp-mhead, .hp-mrow, .hp-mtotal {
  --mcols: 1.4rem 2rem minmax(5.5rem, 12rem) minmax(2.5rem, 1fr) 3.5rem 4.75rem 5.25rem 3.5rem 7.25rem;
  display: grid;
  grid-template-columns: var(--mcols);
  align-items: center;
  column-gap: .5rem;
  padding-inline: .5rem;
}
.hp-mhead { margin: 0; padding-block: .45rem .3rem; border-bottom: 1px solid var(--hairline); font: 400 .7rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.hp-mhead span:first-child { grid-column: 1 / span 3; text-align: left; padding-left: 3.9rem; }
.hp-mhead span:nth-child(2) { grid-column: 5; }
.hp-meter[data-sort="new"] .hp-mhead [data-col="new"],
.hp-meter[data-sort="reworked"] .hp-mhead [data-col="reworked"],
.hp-meter[data-sort="unchanged"] .hp-mhead [data-col="unchanged"] { color: var(--classic-yellow); }
.hp-mrow { position: relative; min-height: 3rem; border-bottom: 1px solid var(--hairline); }
.hp-mlabel { display: contents; cursor: pointer; }
.hp-mrank { font: 400 .78rem/1 var(--font-ui); color: var(--ink-3); text-align: right; }
.hp-mrow img { width: 2rem; height: 2rem; border: 1px solid var(--edge); }
.hp-mname { display: grid; gap: .05rem; min-width: 0; }
.hp-mname b { font: 400 1.08rem/1.15 var(--font-ui); color: var(--accent-text); }
.hp-mname small { overflow: hidden; font: 400 .74rem/1.25 var(--font-ui); color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.hp-mbar { display: block; min-width: 0; }
.hp-mbar > span, .hp-plan-bar { display: flex; height: 1rem; border: 1px solid var(--edge); background: var(--tip-ground); }
.hp-mbar i, .hp-plan-bar i { display: block; min-width: 0; background: var(--st); }
.hp-mbar i { flex: 1 1 0; }
.hp-mbar i + i, .hp-plan-bar i + i { border-left: 1px solid var(--edge); }
.hp-mnum, .hp-mtotal > span:not(:first-child) { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; padding-inline: .25rem; font: 400 1.6rem/1 var(--font-display); color: var(--st-text, var(--ink)); font-variant-numeric: tabular-nums; }
.hp-mnum.is-total { color: var(--ink); }
.hp-meter[data-sort="new"] .hp-mnum[data-state="new"] { background: color-mix(in srgb, var(--new) 8%, transparent); }
.hp-meter[data-sort="reworked"] .hp-mnum[data-state="reworked"] { background: color-mix(in srgb, var(--reworked) 11%, transparent); }
.hp-meter[data-sort="unchanged"] .hp-mnum[data-state="unchanged"] { background: color-mix(in srgb, var(--unchanged) 14%, transparent); }
.hp .hp-mguide { display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem; min-height: 2.5rem; font: 400 .85rem/1 var(--font-ui); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.hp-mrow:has(input:checked) { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--accent); }
.hp-mrow:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.hp-mtotal { margin: 0; padding-block: .3rem; background: var(--tip-ground); font: 400 .72rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.hp-mtotal span:first-child { grid-column: 1 / span 4; padding-left: 3.9rem; }
.hp-mtotal > span:not(:first-child) { font-size: 1.35rem; letter-spacing: 0; }
.hp-mmore { display: none; }
.hp-mmore summary { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; list-style: none; cursor: pointer; font: 400 .92rem/1 var(--font-ui); color: var(--classic-yellow); }
.hp-mmore summary::-webkit-details-marker { display: none; }
.hp-mmore summary::after { content: ""; width: .45rem; height: .45rem; margin-top: -.25rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.hp-mmore[open] summary::after { margin-top: .2rem; transform: rotate(-135deg); }
.hp-mmore .is-open, .hp-mmore[open] .is-closed { display: none; }
.hp-mmore[open] .is-open { display: inline; }
/* The picked class's panel (TalentChanges) opens under its row; home.js moves it there. */
.hp-mrows > .wfg-cx-panels { padding: .1rem .5rem .6rem; border-bottom: 1px solid var(--hairline); background: var(--bg-3); }
.hp-mrows:not(:has(.hp-mrow input:checked)) > .wfg-cx-panels { display: none; }
.hp-mrows > .wfg-cx-panels .wfg-cx-panel { margin-top: .3rem; }
.hp-meter .wfg-cx > .wfg-cx-panels { padding: 0 .5rem; }

/* ---------- 3b. Road to launch ---------- */

.hp-road-sum { gap: .2rem .9rem; }
.hp-road-sum b { font-weight: 400; color: var(--ink); }
.hp-rm-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--tip-ground); }
.hp-rm-scroll:focus-visible { outline-offset: -3px; }
.hp-rm {
  --rm-col: 6.5rem;
  position: relative;
  display: grid;
  grid-template-columns: 4.25rem repeat(var(--cols), minmax(var(--rm-col), 1fr));
  grid-template-rows: auto 1.9rem auto auto auto;
  min-width: calc(4.25rem + var(--cols) * var(--rm-col));
  padding: .75rem .6rem .75rem 0;
}
.hp-rm-lbl { grid-column: 1; position: sticky; left: 0; z-index: 6; display: flex; align-items: center; padding: 0 .3rem 0 .6rem; overflow-wrap: normal; white-space: nowrap; background: var(--bg-2); font: 400 .68rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); box-shadow: 1px 0 0 var(--hairline); }
.hp-rm-flags { display: contents; }
.hp-rm-flag, .hp-rm-banner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: .05rem;
  min-width: 0;
  padding: .45rem .4rem .5rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hp-rm-flag { grid-row: 1; align-self: end; margin: 0 .15rem .55rem; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--edge-inner), 0 0 0 1px var(--edge); }
.hp-rm-flag::after { content: ""; position: absolute; left: 50%; bottom: -.5rem; margin-left: -.45rem; border: .45rem solid transparent; border-bottom: 0; border-top-color: var(--fl, var(--bg-3)); }
.hp-rm-flag[data-state="past"] { --fl: var(--bg-2); background: var(--bg-2); }
.hp-rm-flag[data-state="past"] .hp-rm-title { color: var(--ink-2); }
.hp-rm-flag[data-state="now"] { --fl: #2b2412; background: #2b2412; box-shadow: inset 0 0 0 1px var(--classic-yellow), 0 0 0 1px var(--edge); }
.hp-rm-flag[data-state="next"] { box-shadow: inset 0 0 0 1px var(--ink-2), 0 0 0 1px var(--edge); }
.hp-rm-banner { grid-row: 3; align-self: start; margin: .55rem .15rem 0; padding-bottom: 1.1rem; }
.hp-rm-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-3); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .6rem), 0 100%); }
.hp-rm-banner::after { content: ""; position: absolute; left: 50%; top: -.55rem; width: 2px; height: .55rem; margin-left: -1px; background: var(--edge-inner); }
.hp-rm-flag[aria-expanded="true"] { --fl: var(--bg-3); z-index: 4; background: var(--bg-3); box-shadow: inset 0 0 0 2px var(--classic-yellow), 0 0 0 1px var(--edge); }
.hp-rm-banner[aria-expanded="true"]::before { background: #2b2412; }
.hp-rm-banner[aria-expanded="true"] { box-shadow: inset 0 2px 0 var(--classic-yellow); }
.hp-rm-flag:focus-visible, .hp-rm-banner:focus-visible { outline-offset: 1px; z-index: 5; }
.hp-rm-top { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .2rem; }
.hp-rm-title { font: 400 .88rem/1.15 var(--font-ui); color: inherit; overflow-wrap: break-word; hyphens: auto; }
.hp-rm-when { font: 400 .82rem/1.25 var(--font-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hp-rm-sub { font: 400 .74rem/1.25 var(--font-ui); color: var(--ink-3); }
.hp-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.1rem;
  padding: .05rem .35rem 0;
  border-radius: var(--r-ctl);
  box-shadow: inset 0 0 0 1px var(--edge-lit);
  font: 400 .65rem/1.2 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.hp-chip[hidden], .hp-chip.is-done, .hp-chip.is-later { display: none; }
.hp-chip.is-on,
[data-state="past"] > .hp-rm-top > .hp-chip.is-done,
[data-stop]:not([data-state]) > .hp-rm-top > .hp-chip.is-later,
li[data-state="past"] > .hp-chip.is-done,
li[data-stop]:not([data-state]) > .hp-chip.is-later { display: inline-flex; }
[data-state="now"] > .hp-rm-top > [data-stop-tag], li[data-state="now"] > [data-stop-tag] { background: var(--classic-yellow); box-shadow: none; color: var(--bg); }
[data-state="next"] > .hp-rm-top > [data-stop-tag], li[data-state="next"] > [data-stop-tag] { box-shadow: inset 0 0 0 1px var(--ink-2); color: var(--ink); }
.hp-rm-season {
  grid-row: 2;
  z-index: 0;
  display: flex;
  align-items: center;
  padding: 0 .6rem;
  border-block: 1px solid var(--edge);
  background: var(--bg-3);
  box-shadow: inset 0 1px 0 var(--edge-lit);
  font: 400 .72rem/1 var(--font-ui);
  overflow: clip;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.hp-rm-season + .hp-rm-season { border-left: 2px solid var(--edge); }
/* A season's name stays in view beside the sticky labels while the chart scrolls. */
.hp-rm-season span { position: sticky; left: 4.75rem; }
.hp-rm-layer { grid-column: 2 / -1; grid-row: 2 / 6; position: relative; z-index: 1; pointer-events: none; }
.hp-rm-range { position: absolute; top: 1.35rem; height: .25rem; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); background: var(--line-strong); }
.hp-rm-range[data-state="now"] { background: var(--classic-yellow); }
.hp-rm-range[data-state="done"] { background: var(--edge-lit); }
.hp-rm-range.is-conflict { background: repeating-linear-gradient(135deg, var(--classic-yellow) 0 2px, transparent 2px 5px); }
.hp-rm-range.is-conflict[data-state="later"], .hp-rm-range.is-conflict[data-state="done"] { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 5px); }
.hp-rm-now { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 0; border-left: 2px solid var(--classic-yellow); }
.hp-rm-now b { position: absolute; top: .25rem; left: .25rem; padding: .15rem .35rem .05rem; border-radius: var(--r-ctl); background: var(--classic-yellow); font: 400 .68rem/1.1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--bg); white-space: nowrap; }
.hp .hp-rm-lane {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  min-height: 2.25rem;
  margin: .45rem .25rem 0;
  padding: .25rem .6rem;
  border: 1px solid var(--edge);
  background: var(--tip-ground);
  box-shadow: inset 0 0 0 1px var(--edge-inner);
  font: 400 .82rem/1.25 var(--font-ui);
  color: var(--ink-2);
  text-decoration: none;
}
.hp .hp-rm-lane.is-rxp span { color: var(--ink); }
.hp-rm-lane.is-open { border-right: 1px dashed var(--line-strong); }
.hp-rm-details { border-top: 1px solid var(--hairline); }
.hp-rm-details[hidden] { display: none; }
.hp-rm-d { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem 1.5rem; padding: .7rem .75rem; }
.hp-rm-d[hidden] { display: none; }
.hp-rm-d-head { display: grid; gap: .2rem; }
.hp-rm-d-state { margin: 0; font: 400 .8rem/1.2 var(--font-ui); }
.hp .hp-rm-d-title { margin: 0; font: var(--heading-weight) 1.3rem/1.25 var(--font-heading); }
.hp-rm-d-tier, .hp-rm-d-when { margin: 0; font: 400 .85rem/1.3 var(--font-ui); color: var(--ink-2); }
.hp-rm-d-body p { margin: 0; font: 400 .95rem/1.5 var(--font-body); color: var(--ink-2); }
.hp-rm-d-body p + p { margin-top: .3rem; }
.hp-rm-d-conflict { font-size: .88rem; }
.hp-rm-d-conflict b { color: var(--ink); }
.hp-rm-d-links { display: grid; justify-items: start; gap: .1rem; margin: 0; }
.hp .hp-rm-src { display: inline-flex; align-items: center; min-height: 1.9rem; font: 400 .85rem/1.2 var(--font-ui); color: var(--ink-3); }
.hp-rm-twin > summary { display: flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .75rem; border-top: 1px solid var(--hairline); list-style: none; cursor: pointer; font: 400 .9rem/1 var(--font-ui); color: var(--classic-yellow); }
.hp-rm-twin > summary::-webkit-details-marker { display: none; }
.hp-rm-twin > summary::after { content: ""; width: .4rem; height: .4rem; margin-top: -.2rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.hp-rm-twin[open] > summary::after { margin-top: .15rem; transform: rotate(-135deg); }
.hp-rm-twin ol { display: grid; gap: .35rem; margin: 0; padding: 0 1rem .75rem 2.1rem; font: 400 .92rem/1.5 var(--font-body); color: var(--ink-2); }
.hp-rm-twin li b { color: var(--ink); }
.hp-rm-twin .hp-chip { vertical-align: 1px; }
.hp-road .wfg-asof { margin: 0; padding: 0 .75rem .4rem; font: 400 .8rem/1.3 var(--font-ui); color: var(--ink-3); }
.hp-rx-line { margin: 0; padding: .45rem .75rem .55rem; border-top: 1px solid var(--hairline); background: var(--tip-ground); font: 400 .9rem/1.45 var(--font-body); color: var(--ink-3); }
.hp .hp-rx-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; font: 400 1rem/1.2 var(--font-ui); color: var(--loot-orange); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--loot-orange) 45%, transparent); }

/* ---------- 3c. Planner ---------- */

.hp-plan { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.hp-plan > :not(.hp-bar, .hp-copy-fb, script) { margin-inline: .75rem; }
.hp-copy {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2rem;
  margin-left: auto;
  padding: 0 .55rem;
  border: 0;
  border-radius: var(--r-ctl);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-2);
  font: 400 .82rem/1 var(--font-ui);
  cursor: pointer;
}
.hp-copy[hidden], .hp-copy-fb[hidden] { display: none; }
.hp-copy .i-ok, .hp-copy[data-done] .i-link { display: none; }
.hp-copy[data-done] .i-ok { display: block; }
.hp-copy[data-done] { color: var(--new); background: #0d1a09; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--new) 60%, transparent); }
.hp-copy[data-fail] { color: var(--horde-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--horde) 60%, transparent); }
.hp-copy-fb { display: grid; gap: .3rem; padding: .55rem .75rem .6rem; border-bottom: 1px solid var(--edge); background: var(--tip-ground); font: 400 .85rem/1.4 var(--font-body); color: var(--ink-2); }
.hp-copy-fb input { width: 100%; min-height: 2.25rem; padding: 0 .5rem; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--bg-2); color: var(--ink); font: 400 .82rem/1 var(--font-ui); }
.hp-plan-id { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: .7rem; align-items: center; margin-top: .65rem; }
.hp-face { position: relative; display: block; flex: none; width: 2.25rem; height: 2.25rem; overflow: hidden; border-radius: 50%; background: var(--bg-3); box-shadow: 0 0 0 1px var(--edge); }
.hp-face img { position: absolute; max-width: none; width: calc(var(--z) * 100%); height: auto; left: calc(50% - var(--fx) * var(--z) * 1%); top: calc(50% - var(--fy) * var(--z) * 1.1417%); }
.hp-face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--edge-inner); }
.hp-plan-face { grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; }
.hp-plan-face[data-faction="alliance"] { box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--alliance); }
.hp-plan-face[data-faction="horde"] { box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--horde); }
.hp-plan-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.hp-tag { display: inline-flex; align-items: center; min-height: 1.25rem; padding: .1rem .35rem 0; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 1px currentColor; font: 400 .68rem/1.1 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.hp-tag[data-faction="alliance"] { color: var(--alliance); }
.hp-tag[data-faction="horde"] { color: var(--horde-text); }
.hp-tag.is-new { color: var(--new); background: #0d1a09; }
.hp .hp-plan-name { margin: .2rem 0 0; font: 400 1.9rem/.95 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.hp-plan-name span { color: var(--accent-text); }
.hp-plan-note { margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--hairline); font: 400 .88rem/1.4 var(--font-body); color: var(--ink-2); }
.hp .hp-plan-note a { white-space: nowrap; }
.hp-plan-act { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem; margin-top: .55rem; }
.hp-plan-act .wfg-btn { min-height: 2.9rem; padding: .25rem .5rem 0; font-size: 1.15rem; white-space: nowrap; }
.hp-plan-price { margin-top: .4rem; font: 400 .8rem/1.4 var(--font-ui); color: var(--ink-3); }
.hp-plan-price span { color: var(--ink-2); }
/* The money pages' quiet links, one a line beside the orange button's price note. */
.hp-plan-also { display: grid; justify-items: start; margin-top: .15rem; font: 400 .85rem/1.2 var(--font-ui); color: var(--ink-3); }
.hp .hp-plan-also a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--ink-2); text-decoration-color: var(--line-strong); }
.hp-plan-pick { display: grid; gap: .45rem; margin-top: .4rem; padding-top: .55rem; border-top: 1px solid var(--hairline); }
.hp-plan-pick[hidden] { display: none; }
.hp-step { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.hp-step-lg { float: left; display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0 0 .3rem; padding: 0; font: 400 .72rem/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.hp-step-lg ~ * { clear: both; }
.hp-step-hint { margin-left: auto; font: 400 .74rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.hp-fac-row { display: grid; grid-template-columns: 1fr 1fr; }
.hp-fac { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: 0 .7rem; border: 1px solid var(--edge); background: var(--tip-ground); box-shadow: inset 0 0 0 1px var(--edge-inner); color: var(--ink-3); cursor: pointer; }
.hp-fac + input + .hp-fac { border-left: 0; }
.hp-fac span { font: 400 1.3rem/1 var(--font-display); letter-spacing: .02em; }
.hp-fac small { font: 400 .68rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hp-fac[data-faction="alliance"] { --fc: var(--alliance); --fct: var(--alliance); }
.hp-fac[data-faction="horde"] { --fc: var(--horde); --fct: var(--horde-text); }
.hp-plan input:checked + .hp-fac { background: var(--bg-3); color: var(--fct); box-shadow: inset 0 0 0 1px var(--edge-inner), inset 0 -3px 0 var(--fc); }
.hp-plan input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; position: relative; z-index: 2; }
.hp-race-set { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
.hp-race-set[hidden] { display: none; }
.hp-race-set[data-faction="alliance"] { --fc: var(--alliance); }
.hp-race-set[data-faction="horde"] { --fc: var(--horde); }
.hp-race, .hp-cls { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-width: 0; min-height: 3.5rem; padding: .3rem .1rem .25rem; border: 1px solid var(--edge); background: var(--tip-ground); box-shadow: inset 0 0 0 1px var(--edge-inner); cursor: pointer; }
.hp-race-name, .hp-cls span:not(.hp-flag-new, .visually-hidden) { font: 400 .72rem/1.1 var(--font-ui); color: var(--ink-2); text-align: center; overflow-wrap: normal; }
.hp-plan input:checked + .hp-race { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--fc), inset 0 -3px 0 var(--fc); }
.hp-plan input:checked + .hp-race .hp-face::after { box-shadow: inset 0 0 0 2px var(--fc); }
.hp-flag-new { position: absolute; top: 1px; right: 1px; padding: .05rem .2rem 0; border-radius: var(--r-ctl); background: #0d1a09; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--new) 60%, transparent); font: 400 .6rem/1.2 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--new); }
.hp-flag-new[hidden] { display: none; }
.hp-cls-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
.hp-cls { min-height: 3.25rem; }
.hp-cls img { width: 1.6rem; height: 1.6rem; box-shadow: 0 0 0 1px var(--edge); }
.hp-plan input:checked + .hp-cls { background: var(--bg-3); box-shadow: inset 0 0 0 2px var(--accent); }
.hp-plan input:checked + .hp-cls span { color: var(--ink); }
.hp-plan input:disabled + .hp-cls { background: #11100e; cursor: not-allowed; }
.hp-plan input:disabled + .hp-cls img { filter: grayscale(1); opacity: .35; }
.hp-plan input:disabled + .hp-cls span { color: #8a8378; }
.hp-plan-noscript { margin-top: .5rem; font: 400 .85rem/1.45 var(--font-body); color: var(--ink-3); }
.hp-plan-more { display: grid; gap: .3rem; margin-top: .55rem; padding: .55rem 0 .75rem; border-top: 1px solid var(--hairline); }
.hp-mini { display: flex; align-items: center; gap: .4rem; margin: .2rem 0 0; font: 400 .72rem/1.3 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.hp-plan-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .75rem; margin: 0; font: 400 .8rem/1.2 var(--font-ui); color: var(--ink-3); }
.hp-plan-stats b { margin-right: .15rem; font: 400 1.5rem/1 var(--font-display); color: var(--st-text, var(--ink)); font-variant-numeric: tabular-nums; }
.hp-plan-stats .is-total { margin-left: auto; }
.hp-plan-bar { height: .5rem; margin: 0; }
.hp-plan-rank { margin: 0; font: 400 .8rem/1.35 var(--font-ui); color: var(--ink-3); }
.hp-plan-racials { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .6rem; margin: 0; padding: 0; list-style: none; }
.hp-plan-racials li { display: flex; align-items: center; gap: .45rem; min-width: 0; font: 400 .82rem/1.15 var(--font-ui); color: var(--classic-yellow); }
.hp-plan-racials img { flex: none; width: 1.5rem; height: 1.5rem; box-shadow: 0 0 0 1px var(--edge); }
.hp-plan-racials small { display: block; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hp-plan-specs { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin: .1rem 0 0; font: 400 .85rem/1.2 var(--font-ui); }
.hp .hp-plan-specs a { display: inline-flex; align-items: center; min-height: 1.9rem; color: var(--ink-2); }

/* ---------- 4a. Videos ---------- */

.hp-videos { padding: .55rem .75rem .15rem; }
.hp-videos .wfg-vrow-head { margin-bottom: .55rem; }
.hp-videos .wfg-vrow-title { font-size: 1.5rem; }

/* ---------- 4b. Latest news ---------- */

.hp-days { margin: 0; padding: .1rem .75rem; list-style: none; }
.hp-day { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; break-inside: avoid; }
.hp-day + .hp-day { border-top: 1px solid var(--hairline); }
.hp-cal { align-self: start; margin: 0; border: 1px solid var(--edge); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--edge-inner); text-align: center; }
.hp-cal time { display: block; padding: .25rem 0 .3rem; }
.hp-cal-m { display: block; padding-bottom: .25rem; border-bottom: 1px solid var(--edge-inner); font: 400 .68rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--classic-yellow); }
.hp-cal-d { display: block; padding-top: .3rem; font: 400 1.75rem/.9 var(--font-display); color: var(--ink); }
.hp-day ul { margin: 0; padding: 0; list-style: none; }
.hp-day li + li { border-top: 1px solid var(--hairline); }
.hp .hp-day a { display: grid; gap: .1rem; padding: .3rem 0 .35rem; color: var(--ink); text-decoration: none; }
.hp-day li:first-child a { padding-top: 0; }
.hp-day-t { font: 500 .95rem/1.38 var(--font-body); }

/* ---------- 4c. What you need to buy, and the digest ---------- */

.hp-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hp-gap); align-items: start; }
.hp-buy-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .7rem .75rem; }
.hp-wants { display: grid; align-content: start; gap: .25rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.hp-wants legend { float: left; width: 100%; margin-bottom: .25rem; padding: 0; }
.hp-wants legend ~ * { clear: both; }
.hp-want { display: flex; align-items: center; gap: .7rem; min-height: 2.9rem; padding: .3rem .6rem; border: 1px solid var(--edge); background: var(--tip-ground); box-shadow: inset 0 0 0 1px var(--hairline); cursor: pointer; }
.hp-want input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: #ffd100; cursor: pointer; }
.hp-want span { display: grid; gap: .05rem; font: 400 .95rem/1.2 var(--font-ui); color: var(--ink); }
.hp-want small { font: 400 .78rem/1.3 var(--font-body); color: var(--ink-3); }
.hp-want:has(input:checked) { background: var(--bg-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--classic-yellow) 60%, transparent); }
.hp-res-box { min-width: 0; padding: .75rem .85rem; border: 1px solid var(--edge); background: var(--tip-ground); box-shadow: inset 0 0 0 1px var(--edge-inner); }
.hp-res { display: none; gap: .35rem; }
.hp-res-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; margin: 0; font: var(--heading-weight) 1.35rem/1.25 var(--font-heading); color: var(--ink); }
.hp-res-name b { font: 400 1.75rem/1 var(--font-display); color: var(--classic-yellow); }
.hp-res-list { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.hp-res-list li { position: relative; padding-left: 1.2rem; font: 400 .9rem/1.4 var(--font-body); color: var(--ink-3); }
.hp-res-list li::before { content: "+"; position: absolute; left: .15rem; top: 0; font: 400 .9rem/1.4 var(--font-ui); color: var(--ink-3); }
.hp-res-inc, .hp-res-note { margin: 0; font: 400 .9rem/1.45 var(--font-body); color: var(--ink-2); }
.hp-res-inc b { color: var(--ink); }
.hp-res-note { padding-top: .35rem; border-top: 1px solid var(--hairline); color: var(--ink-3); }
.hp-known-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem 1rem; padding: .55rem .75rem .7rem; }
.hp .hp-dg-h { display: flex; align-items: center; gap: .45rem; margin: .35rem 0 .2rem; font: 400 .74rem/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.hp-known-body ul { margin: 0; padding: 0; list-style: none; }
.hp-dg-row { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .1rem .55rem; padding: .45rem 0; border-top: 1px solid var(--hairline); }
.hp-dg-row > .wfg-evidence { margin-top: .2rem; }
.hp-dg-q, .hp-dg-a, .hp-dg-src { margin: 0; }
.hp .hp-dg-q a { font: 400 .98rem/1.35 var(--font-ui); color: var(--ink); text-decoration-color: var(--edge-lit); }
.hp-dg-a { font: 400 .92rem/1.45 var(--font-body); color: var(--ink-2); }
.hp-dg-src { display: flex; flex-wrap: wrap; gap: 0 .6rem; font: 400 .78rem/1.4 var(--font-ui); color: var(--ink-3); }
.hp .hp-dg-src a { color: var(--ink-2); }
.hp-unk { align-self: start; padding: .6rem .75rem .7rem; border: 1px dashed var(--line-strong); background: var(--tip-ground); }
.hp-unk ul { display: grid; gap: .1rem; margin: .3rem 0 .45rem; }
.hp-unk li { position: relative; padding: .2rem 0 .2rem 1rem; font: 400 .92rem/1.4 var(--font-body); color: var(--ink-2); }
.hp-unk li::before { content: "?"; position: absolute; left: 0; top: .2rem; font: 400 .85rem/1.4 var(--font-ui); color: var(--ink-3); }
.hp-unk p { margin: 0; font: 400 .82rem/1.4 var(--font-body); color: var(--ink-3); }

/* ---------- 4d. Guide shelf ---------- */

.hp-search { position: relative; max-width: 40rem; margin: .7rem .75rem .5rem; }
.hp-search .hp-lbl { display: block; margin-bottom: .35rem; }
.hp-search-box { display: flex; align-items: center; gap: .5rem; padding: 0 .5rem 0 .8rem; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--tip-ground); transition: border-color var(--t); }
.hp-search-box:focus-within { border-color: var(--focus); }
.hp-search-box svg { width: 1.05rem; height: 1.05rem; color: var(--ink-3); }
.hp-search-box input { flex: 1; min-width: 0; min-height: 2.9rem; border: 0; background: transparent; font: 400 1rem/1.2 var(--font-body); color: var(--ink); }
.hp-search-box input::placeholder { color: var(--ink-3); }
.hp-search-box input:focus { outline: none; }
.hp-search-box input::-webkit-search-cancel-button { filter: invert(.7); }
.hp-search-box kbd { padding: .05rem .4rem; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font: 400 .72rem/1.4 var(--font-ui); color: var(--ink-3); }
.hp-search-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .35rem); max-height: 22rem; overflow-y: auto; margin: 0; padding: .3rem; list-style: none; border: 1px solid var(--edge); background: var(--tip-ground); box-shadow: inset 0 0 0 1px var(--edge-inner); }
.hp-search-results[hidden] { display: none; }
.hp .hp-search-results li a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem .65rem; color: var(--ink); text-decoration: none; }
.hp-search-results li a b { font-weight: 500; }
.hp-search-results li a mark { background: none; color: var(--classic-yellow); font-weight: 700; }
.hp-search-results li a span { flex: none; font: 400 .68rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hp-search-results li[aria-selected="true"] a { background: rgba(255, 209, 0, .16); }
.hp-search-empty { padding: .65rem; font-size: .9rem; color: var(--ink-3); }
.hp-search-noscript { margin: .4rem 0 0; font-size: .85rem; color: var(--ink-3); }
/* Groups flow down columns like an index, so a long group (Classes) leaves no hole beside it. */
.hp-shelf-grid { columns: 15rem; column-gap: 1.4rem; padding: .5rem .75rem .9rem; }
.hp-shelf-col { min-width: 0; margin-bottom: .9rem; break-inside: avoid-column; }
.hp-shelf-col:has(li:nth-child(12)) { break-inside: auto; }
.hp-shelf-col li { break-inside: avoid; }
.hp .hp-subhead { break-after: avoid; }
.hp .hp-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0 0 .2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--hairline); font: 400 .74rem/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.hp .hp-subhead a { font-size: .7rem; letter-spacing: .04em; text-transform: none; color: var(--ink-2); }
.hp-shelf-col ul { margin: 0; padding: 0; list-style: none; }
.hp-shelf-col li { padding: .1rem 0; }
.hp .hp-shelf-link { display: inline-flex; align-items: center; min-height: 1.85rem; font: 400 .95rem/1.25 var(--font-ui); color: var(--ink); text-decoration: none; }
.hp-shelf-col[data-group="partners"] .hp-shelf-link { color: var(--classic-yellow); }
.hp-shelf-kids { display: flex; flex-wrap: wrap; gap: 0 .65rem; margin: -.1rem 0 .2rem; padding-left: .6rem; border-left: 1px solid var(--hairline); }
.hp .hp-shelf-kids a { display: inline-flex; align-items: center; min-height: 1.75rem; font: 400 .8rem/1.2 var(--font-ui); color: var(--ink-3); text-decoration: none; }
.hp-shelf-hubs { margin: .2rem 0 .35rem; font: 400 .85rem/1.45 var(--font-body); color: var(--ink-3); }
.hp-shelf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; margin: 0 .75rem; padding: 0 0 .35rem; border-bottom: 1px solid var(--hairline); font: 400 .95rem/1.25 var(--font-ui); }
.hp .hp-shelf-top a { display: inline-flex; align-items: center; min-height: 2rem; }
.hp .hp-shelf-hubs a { color: var(--classic-yellow); }

/* The registry partner slot, inline after the shelf. */
.hp .affiliate-break--inline { margin: 0 auto; padding-block: 1rem 0; gap: .6rem; }

/* Below the first screen, sections skip style and layout until they approach the viewport. */
.hp-videos, .hp-news { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.hp-pair { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.hp-shelf { content-visibility: auto; contain-intrinsic-size: auto 1500px; }
@media (max-width: 39.99rem) {
  .hp-pair { contain-intrinsic-size: auto 2000px; }
  .hp-shelf { contain-intrinsic-size: auto 4000px; }
}

/* ---------- Hover (fine pointers only) ---------- */

@media (hover: hover) and (pointer: fine) {
  .hp .hp-more:hover { color: var(--ink); }
  .hp .hp-more:hover svg { transform: translateX(3px); }
  .hp .hp-big-title a:hover, .hp .hp-dg-q a:hover { color: var(--classic-yellow); }
  .hp .hp-day a:hover .hp-day-t { color: var(--classic-yellow); }
  .hp .hp-rot-tabs a:hover { background: var(--bg-3); color: var(--ink); }
  .hp-rot-btn:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .hp .hp-what-list a:hover { background: var(--bg-3); }
  .hp .hp-what-list a:hover .hp-what-txt { color: var(--ink); }
  .hp-sort button:hover { color: var(--ink); background: var(--bg-2); }
  .hp-sort button[aria-pressed="true"]:hover { color: var(--classic-yellow); }
  .hp-mrow:hover { background: var(--bg-3); }
  .hp .hp-mguide:hover { color: var(--ink); }
  .hp-rm-flag:hover, .hp-rm-banner:hover { filter: brightness(1.15); }
  .hp .hp-rm-lane:hover { background: var(--bg-3); color: var(--ink); }
  .hp-copy:hover { box-shadow: inset 0 0 0 1px var(--classic-yellow); }
  .hp-fac:hover, .hp-race:hover, .hp-plan input:not(:disabled) + .hp-cls:hover { background: var(--bg-3); }
  .hp .hp-plan-also a:hover, .hp .hp-rx-link:hover { text-decoration-color: currentColor; }
  .hp-want:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
  .hp .hp-shelf-link:hover, .hp .hp-shelf-kids a:hover { color: var(--classic-yellow); text-decoration: underline; }
  .hp .hp-bar-link:hover { color: var(--ink); }
}
@media (pointer: coarse) {
  .hp .hp-shelf-link, .hp .hp-shelf-kids a, .hp .hp-plan-also a, .hp .hp-plan-specs a, .hp .hp-more { min-height: 2.75rem; }
  .hp-rot-btn { width: 2.75rem; height: 2.75rem; }
}

/* ---------- From 40rem ---------- */

@media (min-width: 40rem) { @container page (width >= 39rem) {
  .hp-big-body { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); grid-template-areas: "art main"; }
  .hp-big-art { border-block: 0; border-right: 1px solid var(--edge); }
  .hp-big-art img { height: 100%; min-height: 10rem; }
  .hp-buy-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
} }

/* Inline planner, 45rem to 1100px: the sheet on the left, the picker on the right. */
@media (min-width: 45rem) {
  @container page (44rem <= width < 67.75rem) {
    .hp-plan {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas: "bar bar" "fb fb" "id pick" "act pick" "price pick" "also pick" "note pick" "more pick" "nos pick";
      grid-template-rows: repeat(8, auto) 1fr;
      column-gap: .25rem;
    }
    .hp-plan > .hp-bar { grid-area: bar; }
    .hp-plan > .hp-copy-fb { grid-area: fb; }
    .hp-plan-id { grid-area: id; }
    .hp-plan-note { grid-area: note; }
    .hp-plan-act { grid-area: act; }
    .hp-plan-price { grid-area: price; }
    .hp-plan-also { grid-area: also; }
    .hp-plan-more { grid-area: more; }
    .hp-plan > noscript { grid-area: nos; }
    .hp-plan-pick { grid-area: pick; align-self: start; margin-top: .65rem; padding-top: 0; border-top: 0; }
  }
}
@media (min-width: 45rem) { @container page (width >= 44rem) {
    .hp-known-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
} }

/* The big news side by side: art, story, related. */
@media (min-width: 64rem) { @container page (width >= 63rem) {
    .hp-big-body { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); grid-template-areas: "art main"; }
    .hp-big-art { border-block: 0; border-right: 1px solid var(--edge); }
    .hp-big-art img { height: 100%; min-height: 12rem; }
    .hp .hp-big-title { font-size: 1.6rem; }
    .hp-big-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
    .hp-rm-d { grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) auto; }
    .hp-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hp-days { columns: 2; column-gap: 2rem; }
  }
}

/* The tools zone with the rail: main column and a sticky planner, from 1100px. */
@media (min-width: 68.75rem) { @container page (width >= 67.75rem) {
    .hp-tools { grid-template-columns: minmax(0, 1fr) var(--hp-rail); column-gap: .75rem; }
    .hp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hp-gap); grid-column: 1; grid-row: 1; order: 0; }
    .hp-plan {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-column: 2;
      grid-row: 1;
      order: 0;
      position: sticky;
      top: calc(var(--header-h) + .5rem);
      max-height: calc(100dvh - var(--header-h) - 1rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) var(--bg-2);
    }
    .hp-plan-pick { margin-top: .4rem; padding-top: .55rem; border-top: 1px solid var(--hairline); }
    .hp-rx-line { display: none; }
    /* The main column is the big news's and What changed's container from here. */
    .hp-main { container: hp-main / inline-size; }
    .hp-big-body { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); grid-template-areas: "art main"; }
    .hp-big-art img { min-height: 10rem; }
    .hp-what-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}
/* What changed in three columns once the main column has room for them. */
@container hp-main (width >= 56rem) {
  .hp-what-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A narrow main column (1100 to about 1280px) puts the big news art above the story. */
@container hp-main (width < 52rem) {
  .hp-big-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "main"; }
  .hp-big-art { border-right: 0; border-bottom: 1px solid var(--edge); }
  .hp-big-art img { height: 6.5rem; min-height: 0; }
}
/* A wide main column gives the art more room. */
@container hp-main (width >= 80rem) {
  .hp-big-body { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

/* ---------- Phones ---------- */

@media (max-width: 39.99rem) {
  .hp { --hp-gap: .5rem; }
  .hp-frame { padding-top: .5rem; }
  .hp-title { gap: .1rem .75rem; }
  .hp-title h1, .hp .hp-title h1 { font-size: 1.6rem; padding-left: .55rem; }
  .hp-lead { display: none; }
  .hp-trust { margin-left: 0; font-size: .74rem; }
  .hp-bar h2, .hp .hp-bar h2 { font-size: 1.25rem; }
  .hp-bar-kicker { display: none; }
  .hp .hp-big-title { font-size: 1.35rem; }
  .hp-big-list li { font-size: .92rem; }
  .hp-big-list li:nth-child(n+4) { display: none; }
  .hp-rot-tabs { display: none; }
  .hp-big .hp-big-beta { display: none; }
  .hp-msum { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .6rem; }
  .hp-stat b { font-size: 2.3rem; }
  .hp-msrc { grid-column: 1 / -1; justify-self: start; max-width: none; }
  .hp-mtools .wfg-cx-key { margin-left: 0; }
  .hp-sort { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-sort button { padding: 0 .15rem; font-size: .85rem; }
  .hp-mhead { display: none; }
  .hp-mrow, .hp-mtotal {
    grid-template-columns: 1.75rem minmax(0, 1fr) 2.25rem 2.75rem 2.75rem 2.75rem;
    grid-template-areas: "icon name new rew unc guide" "icon bar bar bar bar guide";
    column-gap: .4rem;
    padding-block: .35rem;
  }
  .hp-mrank, .hp-mnum.is-total, .hp-mname small { display: none; }
  .hp-mrow img { grid-area: icon; width: 1.6rem; height: 1.6rem; }
  .hp-mname { grid-area: name; }
  .hp-mbar { grid-area: bar; }
  .hp-mbar > span { height: .4rem; }
  .hp-mnum[data-state="new"] { grid-area: new; }
  .hp-mnum[data-state="reworked"] { grid-area: rew; }
  .hp-mnum[data-state="unchanged"] { grid-area: unc; }
  .hp-mnum { font-size: 1.35rem; padding-inline: .1rem; }
  .hp .hp-mguide { grid-area: guide; justify-content: center; min-height: 2.75rem; font-size: 0; }
  .hp .hp-mguide svg { width: 1rem; height: 1rem; font-size: 1rem; }
  .hp-mtotal { grid-template-areas: "name name new rew unc guide"; }
  .hp-mtotal span:first-child { grid-area: name; padding-left: 0; }
  .hp-mtotal > span:nth-child(2) { grid-area: new; }
  .hp-mtotal > span:nth-child(3) { grid-area: rew; }
  .hp-mtotal > span:nth-child(4) { grid-area: unc; }
  .hp-mtotal > span:nth-child(5) { display: none; }
  .hp-mrow:nth-child(n+6 of .hp-mrow) { display: none; }
  .hp-meter:has(.hp-mmore[open]) .hp-mrow, .hp-mrow:has(input:checked) { display: grid; }
  .hp-mmore { display: block; border-bottom: 1px solid var(--hairline); }
  .hp-what-list a { grid-template-columns: 2.4rem 1.6rem minmax(0, 1fr); gap: .5rem; }
  .hp-rm { --rm-col: 7.25rem; }
  .hp-rm-title { font-size: .88rem; }
  .hp-rm-lbl { padding: 0 .35rem 0 .5rem; font-size: .62rem; letter-spacing: .04em; }
  .hp-plan-act .wfg-btn { font-size: 1.1rem; }
  .hp-day { grid-template-columns: 2.75rem minmax(0, 1fr); }
}
/* Reflow (styles.css, main): the meter's phone rows under 39rem of page (768 at 200% text),
   and the planner's pickers three across under 20rem (390 at 200% text). */
@container page (width < 39rem) {
  .hp-mhead { display: none; }
  .hp-mrow, .hp-mtotal {
    grid-template-columns: 1.75rem minmax(0, 1fr) 2.25rem 2.75rem 2.75rem 2.75rem;
    grid-template-areas: "icon name new rew unc guide" "icon bar bar bar bar guide";
    column-gap: .4rem;
  }
  .hp-mrank, .hp-mnum.is-total, .hp-mname small { display: none; }
  .hp-mrow img { grid-area: icon; }
  .hp-mname { grid-area: name; }
  .hp-mbar { grid-area: bar; }
  .hp-mnum[data-state="new"] { grid-area: new; }
  .hp-mnum[data-state="reworked"] { grid-area: rew; }
  .hp-mnum[data-state="unchanged"] { grid-area: unc; }
  .hp .hp-mguide { grid-area: guide; font-size: 0; }
  .hp .hp-mguide svg { font-size: 1rem; }
  .hp-mtotal { grid-template-areas: "name name new rew unc guide"; }
  .hp-mtotal span:first-child { grid-area: name; padding-left: 0; }
  .hp-mtotal > span:nth-child(5) { display: none; }
  .hp-msum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-msrc { grid-column: 1 / -1; justify-self: start; }
  .hp-stat span { letter-spacing: .02em; }
  .hp-sort { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-sort button { padding: 0 .15rem; font-size: .85rem; white-space: normal; }
}
@container page (width < 20rem) {
  .hp-race-set, .hp-cls-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-plan-act { grid-template-columns: minmax(0, 1fr); }
  .hp-plan-racials { grid-template-columns: minmax(0, 1fr); }
  .hp-mrow, .hp-mtotal { grid-template-columns: 1.5rem minmax(0, 1fr) 2rem 2.25rem 2.25rem 2.25rem; column-gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hp *, .hp *::before, .hp *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .hp-win, .hp-rm-flag, .hp-rm-banner, .hp-rm-lane { border: 1px solid CanvasText; }
  .hp-mrow:has(input:checked), .hp-plan input:checked + label { outline: 3px solid Highlight; }
}

/* ---------- Scroll effects (card #909; behavior in home-motion.js, sitewide layer in styles.css) ----------
   Rationed per docs/brand/README.md, Motion: one text reveal (the first Blizzard quote in
   Known, Reported and Still Unknown) and a drift on the top story's art. No pinned sections:
   TJ found the pinned road jarring (2026-10-09), so nothing stops the page from scrolling. Every effect restyles markup the page
   already has; none adds, hides or duplicates text. Geometry is set in CSS before the first
   paint, so nothing shifts when the scripts arrive. html[data-motion="quiet"] turns it all off. */

/* ---------- Parallax: the top story's art drifts as the hero scrolls away ---------- */
/* home-motion.js sets the transform on wide windows; the frame clips the drift. */
@media (min-width: 900px) {
  html:not([data-motion="quiet"]) .hp-big-art { overflow: clip; }
  html:not([data-motion="quiet"]) .hp-big-art img { will-change: transform; }
}

/* ---------- Text reveal: the quote lights up in reading order as it crosses the screen ---------- */
/* Only the color moves, through a gradient clipped to the glyphs; the words, quote marks and
   links are the page's own, untouched. home-motion.js sets --hp-q from the quote's place on
   screen (its card clips overflow, so a CSS view timeline would read the card, not the page).
   Without the script the quote stays plain blue. */
html:not([data-motion="quiet"]) q[data-reveal-text] {
  background: linear-gradient(90deg, var(--blue-post) calc(var(--hp-q, 104%) - 4%), color-mix(in srgb, var(--ink-3) 60%, transparent) calc(var(--hp-q, 104%) + 4%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (forced-colors: active) { q[data-reveal-text] { background: none !important; color: CanvasText !important; } }

/* ---------- Meter: bars fill in, one class after another ---------- */
.hp-mrows .hp-mbar > span { transform-origin: 0 50%; }
html[data-motion-ready] .hp-mrow[data-reveal] .hp-mbar > span {
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--wfg-i, 0) * 55ms + 120ms);
}
html[data-motion-ready] .hp-mrow[data-reveal]:not([data-revealed]) .hp-mbar > span { transform: scaleX(0); }

/* ---------- What Changed: a mark beside changes newer than the reader's last visit ---------- */
.hp-what-list li[data-fresh] time { position: relative; }
.hp-what-list li[data-fresh] time::after {
  content: "";
  position: absolute;
  top: -.15rem;
  right: -.55rem;
  width: .4rem;
  height: .4rem;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px var(--bg-2);
}