.hero {
  overflow: hidden;
  border-bottom: 1px solid var(--cmg-border);
  background:
    radial-gradient(circle at 82% 16%, rgba(40, 100, 220, 0.1), transparent 28rem),
    radial-gradient(circle at 16% 8%, rgba(168, 119, 33, 0.08), transparent 24rem),
    var(--cmg-background-raised);
}

.hero::before,
.hero::after { display: none; }

.hero__grid {
  min-height: 36rem;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 0.7fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.hero h1 {
  max-width: 13ch;
  color: var(--cmg-text);
}

.hero__lede,
.hero__lede strong { color: var(--cmg-text-secondary); }
.hero__lede strong { color: var(--cmg-text); }

.hero__meta {
  border-top-color: var(--cmg-border);
  color: var(--cmg-text-secondary);
}

.release-panel {
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  color: var(--cmg-text);
  box-shadow: var(--cmg-shadow-md);
}

.release-panel__label { color: var(--cmg-primary); }
.release-panel__date strong { color: var(--cmg-text); }
.release-panel__date span,
.release-panel__time,
.release-panel .microcopy { color: var(--cmg-text-secondary); }
.release-panel hr { border-color: var(--cmg-border); }

.section { background: var(--cmg-background); color: var(--cmg-text); }
.section--paper { background: var(--cmg-surface); }
.section--tinted { background: var(--cmg-surface-muted); }
.section--dark { background: #1b2a42; color: #e6edf6; }
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--dark .section-heading > p:not(.kicker) { color: #bcc8d8; }
.section--dark .fact-card { background: #22344f; border-color: #3b4e6a; }
.section--dark .fact-card h3 { color: #fff; }
.section--dark .fact-card p { color: #c7d1df; }

.section-heading > p:not(.kicker),
.prose,
.prose p { color: var(--cmg-text-secondary); }

.sticky-heading { top: 6rem; }

.trust-hero {
  background: linear-gradient(135deg, #edf3ff, #f9fbfd);
  color: var(--cmg-text);
}
.trust-hero h1 { color: var(--cmg-text); }
.trust-hero p { color: var(--cmg-text-secondary); }

.faq-item {
  border-color: #3b4e6a;
  border-radius: var(--cmg-radius);
  background: #22344f;
}
.faq-item summary { color: #fff; }
.faq-item__answer { color: #d3dce8; }

@media (max-width: 58rem) {
  .hero__grid {
    min-height: auto;
    padding-block: 3.5rem;
    grid-template-columns: 1fr;
  }
  .release-panel { max-width: none; }
}

@media (max-width: 39rem) {
  .hero__grid { padding-block: 2.75rem; }
  .hero h1 { font-size: clamp(2.45rem, 13vw, 3.7rem); }
  .hero__actions .button,
  .hero__actions .source-link { width: 100%; }
  .section { padding-block: 3.5rem; }
  .toc { border-radius: var(--cmg-radius); }
}

/* Classic encyclopedia */
.entity-hero,
.directory-hero {
  border-bottom: 1px solid var(--cmg-border);
  background:
    radial-gradient(circle at 76% 18%, rgba(40, 100, 220, 0.11), transparent 26rem),
    radial-gradient(circle at 16% 0%, rgba(168, 119, 33, 0.09), transparent 22rem),
    var(--cmg-background-raised);
}

.entity-hero__grid {
  display: grid;
  min-height: 32rem;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
  grid-template-columns: minmax(13rem, 0.45fr) minmax(0, 1.55fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.entity-hero__portrait {
  position: relative;
  width: min(100%, 19rem);
  padding: 1rem;
  border: 1px solid var(--cmg-border);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--cmg-shadow-md);
}

.entity-hero__portrait > span {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
}

.champion-portrait {
  width: 100%;
  height: auto;
  border-radius: 0.85rem;
  image-rendering: auto;
}

.entity-hero__copy h1 {
  max-width: 15ch;
  margin-bottom: 0.45rem;
}

.entity-subtitle {
  margin-bottom: 1.2rem;
  color: var(--cmg-classic-gold);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.entity-quick-answer {
  max-width: 58rem;
  color: var(--cmg-text-secondary);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.entity-badges,
.entity-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.entity-badges span {
  padding: 0.35rem 0.62rem;
  border: 1px solid var(--cmg-border);
  border-radius: 999px;
  background: var(--cmg-surface);
  color: var(--cmg-text-secondary);
  font-size: 0.75rem;
  font-weight: 720;
}

.evidence-pill {
  display: inline-flex;
  min-height: 1.8rem;
  padding: 0.3rem 0.6rem;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.2;
}

.evidence-pill--compact {
  min-height: 1.55rem;
  padding: 0.22rem 0.48rem;
  font-size: 0.66rem;
}

.evidence-pill--historical {
  border-color: #d8c4ee;
  background: var(--cmg-historical-soft);
  color: var(--cmg-historical);
}

.evidence-pill--community,
.evidence-pill--pending {
  border-color: #e8d39e;
  background: var(--cmg-warning-soft);
  color: var(--cmg-warning);
}

.evidence-pill--creator {
  border-color: #a9dce1;
  background: var(--cmg-creator-tested-soft);
  color: var(--cmg-creator-tested);
}

.evidence-pill--launch {
  border-color: #a9ddc5;
  background: var(--cmg-launch-verified-soft);
  color: var(--cmg-launch-verified);
}

.data-strip {
  display: grid;
  margin: 1.5rem 0 0;
  padding: 0;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: rgba(255, 255, 255, 0.76);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.data-strip > div {
  min-width: 0;
  padding: 0.85rem 1rem;
}

.data-strip > div + div { border-left: 1px solid var(--cmg-border); }
.data-strip dt {
  margin-bottom: 0.2rem;
  color: var(--cmg-text-muted);
  font-size: 0.65rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.data-strip dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--cmg-text);
  font-size: 0.82rem;
  font-weight: 650;
}

.entity-toc {
  position: sticky;
  z-index: 25;
  top: 4.8rem;
  display: flex;
  margin-top: 1rem;
  padding: 0.5rem;
  gap: 0.25rem;
  overflow-x: auto;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--cmg-shadow-sm);
  scrollbar-width: thin;
}

.entity-toc a {
  min-height: 2.4rem;
  padding: 0.56rem 0.75rem;
  flex: 0 0 auto;
  border-radius: var(--cmg-radius-sm);
  color: var(--cmg-text-secondary);
  font-size: 0.76rem;
  font-weight: 720;
  text-decoration: none;
}
.entity-toc a:hover { background: var(--cmg-primary-soft); color: var(--cmg-primary); }

.entity-layout {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.55fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.lead-copy { color: var(--cmg-text-secondary); font-size: 1.1rem; }

.entity-facts {
  padding: 1.25rem;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: var(--cmg-surface);
  box-shadow: var(--cmg-shadow-sm);
}
.entity-facts h3 { margin-bottom: 1rem; }
.entity-facts dl { margin: 0; }
.entity-facts dl > div {
  display: grid;
  padding-block: 0.65rem;
  border-top: 1px solid var(--cmg-border);
  grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
  gap: 1rem;
}
.entity-facts dt { color: var(--cmg-text-muted); font-size: 0.72rem; font-weight: 700; }
.entity-facts dd { margin: 0; color: var(--cmg-text); font-size: 0.82rem; font-weight: 650; text-align: right; }

.ability-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}
.ability-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: var(--cmg-surface);
  box-shadow: var(--cmg-shadow-sm);
}
.ability-card__identity { display: flex; margin-bottom: 0.85rem; align-items: center; gap: 0.75rem; }
.ability-card__icon { width: 3rem; height: 3rem; flex: 0 0 auto; border-radius: 0.55rem; }
.ability-card__key { color: var(--cmg-primary); font-size: 0.67rem; font-weight: 850; }
.ability-card h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.ability-card > p { color: var(--cmg-text-secondary); font-size: 0.83rem; }
.ability-values { margin: 0.85rem 0 0; }
.ability-values > div { display: flex; padding-block: 0.35rem; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--cmg-border); }
.ability-values dt { color: var(--cmg-text-muted); font-size: 0.68rem; }
.ability-values dd { margin: 0; color: var(--cmg-text); font-size: 0.7rem; font-weight: 700; text-align: right; }
.ability-card .entity-limit { margin-top: 0.85rem; color: var(--cmg-warning); font-size: 0.67rem; }

.comparison-note {
  margin-top: 1rem;
  padding: 1.2rem;
  border-left: 4px solid var(--cmg-classic-gold);
  border-radius: 0 var(--cmg-radius) var(--cmg-radius) 0;
  background: var(--cmg-classic-gold-soft);
}
.comparison-note h3 { margin-bottom: 0.55rem; }
.comparison-note p { color: var(--cmg-text-secondary); }

.build-panel {
  padding: clamp(1.1rem, 3vw, 1.7rem);
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-lg);
  background: var(--cmg-surface);
  box-shadow: var(--cmg-shadow-sm);
}
.build-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.build-panel__type { margin-bottom: 0.35rem; color: var(--cmg-historical); font-size: 0.68rem; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; }
.build-panel > p { color: var(--cmg-text-secondary); }
.build-groups { display: grid; margin-top: 1.3rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.build-item-group { padding: 1rem; border: 1px solid var(--cmg-border); border-radius: var(--cmg-radius); background: var(--cmg-background-raised); }
.build-item-group h3 { font-size: 0.92rem; }
.entity-chip-list { margin: 0; }
.entity-chip-list li { display: inline-flex; min-height: 2.55rem; padding: 0.32rem 0.55rem; align-items: center; gap: 0.45rem; border: 1px solid var(--cmg-border); border-radius: 0.55rem; background: var(--cmg-surface); color: var(--cmg-text-secondary); font-size: 0.74rem; }
.entity-chip__icon { width: 1.85rem; height: 1.85rem; border-radius: 0.35rem; }
.build-notes { display: grid; margin-top: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.build-notes > div { padding: 1rem; border-radius: var(--cmg-radius); background: var(--cmg-surface-muted); }
.build-notes p { color: var(--cmg-text-secondary); font-size: 0.82rem; }

.related-entity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.related-entity {
  display: flex;
  min-width: 0;
  padding: 0.75rem;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: var(--cmg-surface);
  color: var(--cmg-text);
  text-decoration: none;
  box-shadow: var(--cmg-shadow-sm);
}
.related-entity:hover { border-color: #a9c1ed; color: var(--cmg-primary); }
.related-entity__image { width: 3.5rem; height: 3.5rem; flex: 0 0 auto; border-radius: 0.55rem; }
.related-entity span { min-width: 0; }
.related-entity strong,
.related-entity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related-entity small { margin-top: 0.2rem; color: var(--cmg-text-muted); font-size: 0.7rem; }
.related-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }

.source-ledger code { font-size: 0.7rem; }
.source-ledger th,
.source-ledger td { min-width: 9rem; vertical-align: top; font-size: 0.76rem; }
.source-ledger th:first-child { min-width: 14rem; }

.directory-hero { padding-block: clamp(3.5rem, 7vw, 6rem); }
.directory-hero h1 { max-width: 18ch; }
.directory-hero > .shell > p:not(.eyebrow) { max-width: 55rem; color: var(--cmg-text-secondary); font-size: 1.1rem; }
.directory-summary { max-width: 58rem; }

.champion-directory {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
.champion-card {
  position: relative;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: var(--cmg-surface);
  box-shadow: var(--cmg-shadow-sm);
}
.champion-card__main { display: flex; min-width: 0; align-items: center; gap: 0.65rem; color: var(--cmg-text); text-decoration: none; }
.champion-card__portrait { width: 3.75rem; height: 3.75rem; flex: 0 0 auto; border-radius: 0.6rem; }
.champion-card__identity { min-width: 0; }
.champion-card__identity strong,
.champion-card__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champion-card__identity small { color: var(--cmg-text-muted); font-size: 0.68rem; }
.champion-card__meta { display: flex; min-height: 2.4rem; margin-top: 0.7rem; flex-wrap: wrap; align-content: flex-start; gap: 0.3rem; }
.champion-card__meta span { color: var(--cmg-text-secondary); font-size: 0.67rem; }
.champion-card__meta span + span::before { margin-right: 0.3rem; color: var(--cmg-border-strong); content: "•"; }
.champion-card__status { display: flex; min-height: 2rem; margin-top: 0.55rem; align-items: center; justify-content: space-between; gap: 0.4rem; }
.champion-card__status time { color: var(--cmg-text-muted); font-size: 0.62rem; }
.champion-card__icons { position: absolute; top: 0.55rem; right: 0.55rem; display: flex; gap: 0.2rem; opacity: 0; transition: opacity 150ms ease; }
.champion-card:hover .champion-card__icons,
.champion-card:focus-within .champion-card__icons { opacity: 1; }
.mini-entity-icon { width: 1.55rem; height: 1.55rem; border: 1px solid #fff; border-radius: 0.3rem; box-shadow: 0 1px 4px rgba(23, 36, 58, 0.18); }

.entity-hero__portrait--icon {
  display: grid;
  min-height: 16rem;
  place-items: center;
}

.item-detail-icon {
  width: min(12rem, 72%);
  height: auto;
  border: 1px solid var(--cmg-border);
  border-radius: 1rem;
  box-shadow: var(--cmg-shadow-md);
  image-rendering: auto;
}

.item-focus-grid,
.item-directory,
.library-grid,
.build-directory,
.setup-entity-grid {
  display: grid;
  gap: 0.75rem;
}

.item-focus-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.item-directory { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.build-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.setup-entity-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.item-card {
  min-width: 0;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: var(--cmg-surface);
  box-shadow: var(--cmg-shadow-sm);
  color: var(--cmg-text);
}

.item-card--focus,
.item-card__link {
  display: block;
  height: 100%;
  padding: 0.85rem;
  color: inherit;
  text-decoration: none;
}

.item-card:hover,
.item-card:focus-within {
  border-color: #a9c1ed;
  box-shadow: var(--cmg-shadow-md);
}

.item-card__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
}

.item-card__icon {
  width: 3.2rem;
  height: 3.2rem;
  flex: 0 0 auto;
  border-radius: 0.55rem;
}

.item-card__identity span { min-width: 0; }
.item-card__identity strong,
.item-card__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-card__identity small { color: var(--cmg-text-muted); font-size: 0.67rem; }
.item-card__meta { display: flex; margin-top: 0.7rem; justify-content: space-between; gap: 0.5rem; color: var(--cmg-text); font-size: 0.72rem; font-weight: 760; }
.item-card > a > p,
.item-card--focus > p { min-height: 2.2rem; color: var(--cmg-text-secondary); font-size: 0.7rem; }
.item-card__footer { display: flex; min-height: 1.7rem; align-items: center; justify-content: space-between; gap: 0.45rem; color: var(--cmg-primary); font-size: 0.67rem; }

.stat-list { display: grid; margin: 1rem 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.stat-list > div { display: flex; min-height: 3rem; padding: 0.7rem; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--cmg-border); border-radius: 0.55rem; background: var(--cmg-surface); }
.stat-list dt { color: var(--cmg-text-secondary); font-size: 0.76rem; }
.stat-list dd { margin: 0; color: var(--cmg-text); font-weight: 800; }
.historical-wording { margin-top: 1rem; padding: 1rem; border-left: 3px solid var(--cmg-classic-gold); border-radius: 0 var(--cmg-radius-sm) var(--cmg-radius-sm) 0; background: var(--cmg-classic-gold-soft); }
.historical-wording h3 { font-size: 0.9rem; }
.historical-wording p { margin: 0; color: var(--cmg-text-secondary); font-size: 0.78rem; }
.empty-state { padding: 1rem; border: 1px dashed var(--cmg-border-strong); border-radius: var(--cmg-radius-sm); background: var(--cmg-surface-muted); color: var(--cmg-text-secondary); }

.library-card {
  display: flex;
  min-width: 0;
  padding: 0.85rem;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: var(--cmg-surface);
  box-shadow: var(--cmg-shadow-sm);
}

.library-card__icon { width: 3.5rem; height: 3.5rem; flex: 0 0 auto; border-radius: 0.6rem; }
.library-card__body { min-width: 0; flex: 1; }
.library-card__eyebrow { margin: 0; color: var(--cmg-primary); font-size: 0.65rem; font-weight: 820; letter-spacing: 0.06em; text-transform: uppercase; }
.library-card h3 { margin: 0.18rem 0 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.library-card small { color: var(--cmg-text-muted); font-size: 0.66rem; }
.library-card__body > p:not(.library-card__eyebrow) { min-height: 2.4rem; color: var(--cmg-text-secondary); font-size: 0.72rem; }
.library-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.library-card__footer time { color: var(--cmg-text-muted); font-size: 0.62rem; }
.library-card__facts { margin: 0.6rem 0; }
.library-card__facts > div { display: flex; padding-block: 0.25rem; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--cmg-border); font-size: 0.66rem; }
.library-card__facts dd { margin: 0; text-align: right; }
.mastery-tree--offense { background: linear-gradient(180deg, #fff, #fff9f6); }
.mastery-tree--defense { background: linear-gradient(180deg, #fff, #f6fbff); }
.mastery-tree--utility { background: linear-gradient(180deg, #fff, #f9f8ff); }

.build-card {
  display: block;
  padding: 1.2rem;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-lg);
  background: var(--cmg-surface);
  box-shadow: var(--cmg-shadow-sm);
  color: var(--cmg-text);
  text-decoration: none;
}

.build-card:hover { border-color: #a9c1ed; box-shadow: var(--cmg-shadow-md); }
.build-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.build-card__header p { margin: 0 0 0.2rem; color: var(--cmg-historical); font-size: 0.66rem; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; }
.build-card h3 { margin: 0; font-size: 1.15rem; }
.build-card > p { color: var(--cmg-text-secondary); font-size: 0.82rem; }
.build-card__icons { display: flex; gap: 0.3rem; }
.build-card dl { display: grid; margin: 1rem 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--cmg-border); border-radius: var(--cmg-radius-sm); }
.build-card dl > div { padding: 0.65rem; }
.build-card dl > div + div { border-left: 1px solid var(--cmg-border); }
.build-card dt { color: var(--cmg-text-muted); font-size: 0.62rem; }
.build-card dd { margin: 0; font-size: 0.72rem; font-weight: 760; }

.setup-entity {
  display: flex;
  min-width: 0;
  padding: 0.75rem;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: var(--cmg-surface);
  color: var(--cmg-text);
  text-decoration: none;
}
.setup-entity:hover { border-color: #a9c1ed; }
.setup-entity__icon { width: 3rem; height: 3rem; flex: 0 0 auto; border-radius: 0.5rem; }
.setup-entity span { min-width: 0; }
.setup-entity strong,
.setup-entity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-entity strong { font-size: 0.78rem; }
.setup-entity small { color: var(--cmg-text-muted); font-size: 0.65rem; }
.build-hero__mark { display: grid; min-height: 16rem; place-items: center; border: 1px solid var(--cmg-border); border-radius: var(--cmg-radius-lg); background: radial-gradient(circle at 50% 30%, #fff7df, #eef4ff); box-shadow: var(--cmg-shadow-md); }
.build-hero__mark > span:first-child { color: var(--cmg-primary); font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; letter-spacing: -0.08em; }

.filter-shell { margin-top: 2rem; }

.directory-filters {
  display: grid;
  margin-bottom: 1rem;
  padding: 0.85rem;
  grid-template-columns: minmax(13rem, 2fr) repeat(4, minmax(7rem, 1fr));
  align-items: end;
  gap: 0.65rem;
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius);
  background: var(--cmg-surface-muted);
}

.directory-filters--compact { grid-template-columns: minmax(13rem, 2fr) repeat(2, minmax(8rem, 1fr)) auto; }
.directory-filters label { min-width: 0; }
.directory-filters label > span { display: block; margin-bottom: 0.25rem; color: var(--cmg-text-muted); font-size: 0.64rem; font-weight: 760; }
.directory-filters input,
.directory-filters select {
  width: 100%;
  min-height: 2.55rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--cmg-border-strong);
  border-radius: 0.5rem;
  background: var(--cmg-surface);
  color: var(--cmg-text);
  font: inherit;
  font-size: 0.75rem;
}
.directory-filters input:focus,
.directory-filters select:focus { border-color: #79a7ff; outline: 3px solid rgba(51, 105, 204, 0.12); }
.directory-filters__actions { display: flex; min-height: 2.55rem; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 0.75rem; color: var(--cmg-text-secondary); font-size: 0.7rem; }
.directory-filters__actions output { color: var(--cmg-text); font-weight: 820; }
.directory-filters__actions button { min-height: 2.2rem; padding: 0.4rem 0.75rem; border: 1px solid var(--cmg-border-strong); border-radius: 999px; background: var(--cmg-surface); color: var(--cmg-primary); font-weight: 750; cursor: pointer; }
.directory-filters__actions button:hover { background: var(--cmg-primary-soft); }

.cluster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.cluster-card { position: relative; display: block; min-height: 11rem; padding: 1.15rem; overflow: hidden; border: 1px solid var(--cmg-border); border-radius: var(--cmg-radius-lg); background: var(--cmg-surface); box-shadow: var(--cmg-shadow-sm); color: var(--cmg-text); text-decoration: none; }
.cluster-card:hover { border-color: #a9c1ed; box-shadow: var(--cmg-shadow-md); }
.cluster-card > span { position: absolute; top: 0.55rem; right: 0.8rem; color: var(--cmg-primary-soft); font-size: 3rem; font-weight: 900; line-height: 1; }
.cluster-card h3 { position: relative; margin-top: 1.5rem; font-size: 1.1rem; }
.cluster-card p { position: relative; color: var(--cmg-text-secondary); font-size: 0.8rem; }

@media (max-width: 72rem) {
  .ability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .champion-directory { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .item-focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .item-directory { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .setup-entity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 58rem) {
  .entity-hero__grid,
  .entity-layout { grid-template-columns: 1fr; }
  .entity-hero__portrait { width: 12rem; }
  .entity-hero__grid { min-height: auto; }
  .entity-toc { top: 4.4rem; }
  .data-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-strip > div + div { border-left: 0; }
  .data-strip > div:nth-child(even) { border-left: 1px solid var(--cmg-border); }
  .data-strip > div:nth-child(n+3) { border-top: 1px solid var(--cmg-border); }
  .related-entity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champion-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .item-focus-grid,
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-directory,
  .setup-entity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .build-directory { grid-template-columns: 1fr; }
  .directory-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-filters__search { grid-column: 1 / -1; }
  .cluster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 42rem) {
  .ability-grid,
  .build-groups,
  .build-notes { grid-template-columns: 1fr; }
  .champion-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-directory,
  .setup-entity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-grid { grid-template-columns: 1fr; }
  .stat-list { grid-template-columns: 1fr; }
  .directory-filters,
  .directory-filters--compact { grid-template-columns: 1fr; }
  .directory-filters__search { grid-column: auto; }
  .cluster-grid { grid-template-columns: 1fr; }
  .champion-card__portrait { width: 3.2rem; height: 3.2rem; }
  .champion-card__icons { display: none; }
  .source-ledger th,
  .source-ledger td { min-width: 8rem; }
}

@media (max-width: 30rem) {
  .entity-hero__grid { padding-block: 2.5rem; }
  .entity-hero__portrait { width: 9.5rem; }
  .entity-hero__portrait > span { right: 1.25rem; bottom: 1.25rem; }
  .entity-toc { width: calc(100% - 1.25rem); }
  .related-entity-grid { grid-template-columns: 1fr; }
  .champion-directory { gap: 0.55rem; }
  .champion-card { padding: 0.62rem; }
  .champion-card__main { align-items: flex-start; flex-direction: column; }
  .champion-card__portrait { width: 100%; height: auto; aspect-ratio: 1; }
  .champion-card__identity { width: 100%; }
  .item-focus-grid,
  .item-directory,
  .setup-entity-grid { grid-template-columns: 1fr; }
  .build-card dl { grid-template-columns: 1fr; }
  .build-card dl > div + div { border-top: 1px solid var(--cmg-border); border-left: 0; }
}

/* Accessible color bridge for the legacy editorial modules on the light theme. */
body .toc > div p:last-child,
body .section:not(.section--dark):not(.section--paper):not(.section--tinted) .section-heading > p:not(.kicker),
body .section:not(.section--dark):not(.section--paper):not(.section--tinted) .source-note,
body .section:not(.section--dark) .update-list__body > p:not(.update-list__region) {
  color: var(--cmg-text-secondary);
}

body .toc a span,
body .steps li > span {
  color: var(--cmg-classic-gold);
}

body .steps h3 { color: var(--cmg-text); }
body .steps p { color: var(--cmg-text-secondary); }

body .section:not(.section--dark) .status.status--official,
body .section .status-legend .status.status--official {
  color: var(--cmg-success);
}

body .section:not(.section--dark) .status.status--partial,
body .section .status-legend .status.status--partial {
  color: #8a5a00;
}

body .section:not(.section--dark) .status.status--unknown,
body .section .status-legend .status.status--unknown {
  color: #8a422d;
}

body .section:not(.section--dark) .status.status--speculation,
body .section .status-legend .status.status--speculation {
  color: #425b7d;
}

body .section.section--dark .status.status--official { color: #8fe0b8; }
body .section.section--dark .status.status--partial { color: #f0cf83; }
body .section.section--dark .status.status--unknown { color: #f2b28d; }
body .section.section--dark .status.status--speculation { color: #b8d4ff; }

body .section.section--dark .status-legend .status.status--official { color: var(--cmg-success); }
body .section.section--dark .status-legend .status.status--partial { color: #8a5a00; }
body .section.section--dark .status-legend .status.status--unknown { color: #8a422d; }
body .section.section--dark .status-legend .status.status--speculation { color: #425b7d; }

body .section.section--dark .kicker { color: #a9c8ff; }
body .section.section--dark:not(.section--paper):not(.section--tinted) .section-heading > p:not(.kicker) {
  color: #bcc8d8;
}
body .section.section--dark .source-link,
body .section.section--dark .legend-wrap > p a { color: #a9c8ff; }

body .section:not(.section--dark) .source-note .source-link {
  color: var(--cmg-primary);
}

.cluster-card > span { color: #5d7fb8; }

body .section.section--dark .faq-item summary span,
body .section.section--dark .faq-item summary::after {
  color: #f0cf83;
}

.verification-note p { color: #3f4c5f; }
.verification-note a { color: #174fbf; }
body .section .verification-note .status.status--partial { color: var(--cmg-classic-gold); }

.site-footer .footer-note,
.site-footer .legal p,
.site-footer .footer-meta time,
.site-footer .wordmark small { color: #b9c4d2; }

.consent-panel__status { color: #b9c4d2; }

.consent-button--primary {
  border-color: var(--cmg-primary);
  background: var(--cmg-primary);
  color: #fff;
}

.consent-button--primary:hover {
  border-color: var(--cmg-primary-hover);
  background: var(--cmg-primary-hover);
  color: #fff;
}