/* =============================================================
   lolclassicwiki - Design System
   Dark-first, Season-3 flavored. Framework-free.
   Everything is driven by CSS custom properties (design tokens).
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Surfaces / ink (dark = default) */
  --bg:#0b0d12; --surface:#14171e; --surface-2:#1b1f28;
  --ink:#f5f4ef; --ink-2:#c2c9d6; --muted:#8b93a4;

  /* Brand */
  --gold:#c8a24e; --gold-bright:#e6c674;   /* primary brand accent */
  --blue:#3987e5;                           /* rift magic / secondary */
  --teal:#1baf7a;                           /* tools / positive */
  --green:#0ca30c; --red:#e66767;           /* status: verified / needs-check */

  /* Lines & shape */
  --hairline:rgba(255,255,255,.09);
  --hairline-strong:rgba(255,255,255,.16);
  --radius:14px; --radius-sm:9px; --maxw:1120px;

  /* Type */
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;

  /* Elevation */
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --ring:0 0 0 2px var(--bg),0 0 0 4px var(--gold);

  /* === ADS_ENABLED switch ===
     Ads are DORMANT at launch. To turn them on later (≈month 6), change the
     line below from `none` to `flex`. That single edit reveals every ad slot
     sitewide. Leave it `none` to keep the site ad-free. */
  --ad-display:none;
}

/* Light theme (manual toggle sets data-theme="light"; system pref respected below) */
:root[data-theme="light"]{
  --bg:#f6f4ee; --surface:#ffffff; --surface-2:#f0ece1;
  --ink:#1a1c22; --ink-2:#3d434f; --muted:#6a7181;
  --gold:#9a751f; --gold-bright:#b5892b;
  --blue:#1f6fd0; --teal:#118a60;
  --hairline:rgba(10,12,18,.12); --hairline-strong:rgba(10,12,18,.22);
  --shadow:0 1px 2px rgba(30,30,40,.08),0 8px 24px rgba(30,30,40,.10);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --bg:#f6f4ee; --surface:#ffffff; --surface-2:#f0ece1;
    --ink:#1a1c22; --ink-2:#3d434f; --muted:#6a7181;
    --gold:#9a751f; --gold-bright:#b5892b;
    --blue:#1f6fd0; --teal:#118a60;
    --hairline:rgba(10,12,18,.12); --hairline-strong:rgba(10,12,18,.22);
    --shadow:0 1px 2px rgba(30,30,40,.08),0 8px 24px rgba(30,30,40,.10);
  }
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* anchored sections (e.g. /champions/x/#vs) must clear the sticky header */
[id]{scroll-margin-top:84px}
/* themed scrollbars */
html{scrollbar-color:var(--surface-2) var(--bg)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:6px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--gold-bright);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .4em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.8rem,4vw,2.6rem)}
h2{font-size:clamp(1.35rem,2.6vw,1.8rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
code,kbd{font-family:var(--mono);font-size:.9em}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
::selection{background:var(--gold);color:#0b0d12}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
main{flex:1 0 auto;width:100%}
.section{padding-block:clamp(32px,6vw,64px)}
.stack>*+*{margin-top:1rem}
.grid{display:grid;gap:16px}
.eyebrow{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 .5em}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:60ch}
.muted{color:var(--muted)}
.center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-48px;z-index:100;background:var(--gold);color:#0b0d12;
  padding:10px 16px;border-radius:8px;font-weight:700;transition:top .15s}
.skip-link:focus{top:12px;text-decoration:none}

/* ---------- 4. HEADER / NAV ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.site-header .wrap{display:flex;align-items:center;gap:18px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;
  font-size:1.12rem;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand .glyph{flex:none;width:26px;height:26px}
.brand b{color:var(--gold-bright)}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{color:var(--ink-2);padding:8px 12px;border-radius:8px;font-size:.94rem;font-weight:600}
.nav a:hover{color:var(--ink);background:var(--surface);text-decoration:none}
.nav a[aria-current="page"]{color:var(--gold-bright)}
.header-tools{display:flex;align-items:center;gap:8px;margin-left:6px}
.account-control{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border:1px solid var(--hairline-strong);border-radius:9px;background:var(--surface);color:var(--ink-2);font:600 .76rem/1 var(--sans);cursor:pointer}
.account-control:hover{border-color:var(--gold);color:var(--gold-bright)}
.account-dialog{width:min(500px,calc(100vw - 28px));max-height:calc(100vh - 28px);padding:0;border:1px solid var(--hairline-strong);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.55)}
.account-dialog::backdrop{background:rgba(3,5,9,.74);backdrop-filter:blur(4px)}
.account-dialog-card{position:relative;padding:28px}
.account-dialog-card h2{margin:4px 0 10px}
.account-dialog-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:1.5rem;cursor:pointer}
.account-provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 14px}
.account-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font:600 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.account-divider::before,.account-divider::after{content:"";height:1px;flex:1;background:var(--hairline)}
.account-email-form{display:grid;gap:12px}
.account-form-actions{display:flex;gap:10px;flex-wrap:wrap}
.account-skip{display:block;margin:18px auto 0;border:0;background:transparent;color:var(--muted);text-decoration:underline;cursor:pointer}
.account-dialog-status{min-height:1.2em;margin:14px 0 0;color:var(--teal);font-size:.82rem}
.account-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}
.account-menu a,.account-menu button{display:block;padding:11px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface-2);color:var(--ink-2);text-align:left;text-decoration:none;font:inherit;cursor:pointer}

/* Search launcher (opens palette; wired in later step) */
.search-launch{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--hairline);color:var(--muted);border-radius:10px;padding:8px 12px;
  font:inherit;font-size:.9rem;cursor:pointer;white-space:nowrap;flex:none}
.search-launch:hover{border-color:var(--hairline-strong);color:var(--ink-2)}
.search-launch .kbd{margin-left:auto}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:5px;
  font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}

.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--surface);border:1px solid var(--hairline);color:var(--ink-2);cursor:pointer}
.icon-btn:hover{color:var(--ink);border-color:var(--hairline-strong)}
.icon-btn svg{width:18px;height:18px}
/* Theme toggle icon swap */
.theme-toggle .moon{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle .sun{display:none}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle .moon{display:block}
}

.menu-btn{display:none}
.nav-search{display:none} /* desktop has the header launcher; this appears in the mobile panel */

/* ---------- 5. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;
  font-weight:700;font-size:.95rem;padding:11px 18px;border-radius:11px;border:1px solid transparent;
  cursor:pointer;transition:transform .06s ease,background .15s,border-color .15s;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#141008;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px rgba(200,162,78,.28)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--surface);border-color:var(--hairline);color:var(--ink)}
.btn-ghost:hover{border-color:var(--hairline-strong);background:var(--surface-2)}
.btn-discord{background:#5865F2;color:#fff}
.btn-discord:hover{filter:brightness(1.08)}
.btn-sm{padding:7px 12px;font-size:.85rem;border-radius:9px}
.btn-block{width:100%}

/* ---------- 6. CARDS ---------- */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);min-width:0;overflow-wrap:break-word}
/* grid children must be allowed to shrink below content width, and long unbroken
   tokens (item names, ids) must wrap instead of escaping the card */
.grid>*{min-width:0}
/* item cards: quiet, uniform heights per row, name owns the full row */
.item-card{display:flex;flex-direction:column;gap:10px}
.item-card h3,.item-card div{overflow-wrap:break-word}
.item-head{display:flex;align-items:center;gap:12px;min-width:0}
.item-head img{border-radius:var(--radius-sm);border:1px solid var(--hairline-strong);background:var(--bg);flex:none}
.item-title{flex:1;min-width:0}
.item-title h3{margin:0;font-size:1.02rem;line-height:1.25;color:var(--ink)}
.item-cost{font-size:.82rem;color:var(--gold);font-weight:700;white-space:nowrap;margin-top:2px}
.item-cost .muted{font-weight:400;font-size:.78rem}
.item-desc{font-size:.88rem;color:var(--ink-2);border-top:1px solid var(--hairline);padding-top:9px;line-height:1.5}
.item-desc br+br{display:none} /* collapse double breaks from client tooltips */
.item-builds{font-size:.78rem;color:var(--muted);border-top:1px solid var(--hairline);padding-top:8px}
.item-builds-label{display:block;text-transform:uppercase;font-size:.65rem;letter-spacing:.06em;margin-bottom:2px}
.item-builds span:last-child{color:var(--ink-2)}
.card-link{display:block;color:inherit;transition:border-color .15s,transform .1s,background .15s}
.card-link:hover{text-decoration:none;border-color:var(--gold);transform:translateY(-2px)}
.card h3{margin-bottom:.2em}
.card-eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

.cards-3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cards-4{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

/* Champion grid tile */
.champ-card{display:flex;flex-direction:column;gap:6px;padding:16px;min-height:96px;position:relative}
.champ-card .name{font-weight:700;font-size:1.05rem}
.champ-card .roles{font-size:.82rem;color:var(--muted)}

/* ---------- 7. STAT TILES ---------- */
.stat-tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.stat-tile{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:12px 14px}
.stat-tile .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stat-tile .value{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.stat-tile .per{font-size:.78rem;color:var(--ink-2);font-weight:600}

/* ---------- 8. BADGES ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  letter-spacing:.02em;padding:3px 9px;border-radius:999px;border:1px solid transparent;
  text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.badge svg{width:12px;height:12px}
.badge-verified{background:color-mix(in srgb,var(--green) 16%,transparent);color:#59d15b;
  border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.badge-check{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);
  border-color:color-mix(in srgb,var(--red) 38%,transparent)}
.badge-pending{background:var(--surface-2);color:var(--muted);border-color:var(--hairline-strong);
  font-family:var(--mono);letter-spacing:.04em}
.badge-gold{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold-bright);
  border-color:color-mix(in srgb,var(--gold) 38%,transparent)}
.badge-blue{background:color-mix(in srgb,var(--blue) 16%,transparent);color:#7db2f2;
  border-color:color-mix(in srgb,var(--blue) 40%,transparent)}

/* DATA_PENDING inline chip (never render a guessed number) */
.data-pending{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.72rem;
  font-weight:700;color:var(--muted);background:var(--surface-2);border:1px dashed var(--hairline-strong);
  border-radius:6px;padding:2px 8px;letter-spacing:.03em}
.data-pending::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}

/* Unverified banner */
.banner{display:flex;align-items:flex-start;gap:12px;background:color-mix(in srgb,var(--red) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--red) 30%,transparent);border-left-width:3px;
  border-radius:var(--radius-sm);padding:13px 16px;color:var(--ink-2);font-size:.92rem}
.banner strong{color:var(--ink)}
.banner svg{flex:none;width:18px;height:18px;color:var(--red);margin-top:2px}

/* Source line */
.source-line{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- 9. PILL FILTERS ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font:inherit;font-size:.85rem;font-weight:600;padding:7px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--hairline);color:var(--ink-2);cursor:pointer}
.pill:hover{border-color:var(--hairline-strong);color:var(--ink)}
.pill[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 18%,transparent);
  border-color:var(--gold);color:var(--gold-bright)}

/* ---------- 10. ABILITY BLOCK ---------- */
.ability{display:grid;grid-template-columns:auto 1fr;gap:18px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius);padding:20px 22px}
.ability .keychip{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--hairline-strong);font-weight:800;font-size:1.15rem;
  color:var(--gold-bright);font-family:var(--mono)}
/* with an icon, the key becomes a corner badge on it - game-style keybind overlay */
.ability .keycol{position:relative;flex:none;align-self:start}
.ability .ability-ico{border-radius:10px;border:1px solid var(--hairline-strong);display:block}
.ability .keycol.has-icon .keychip{position:absolute;right:-9px;bottom:-9px;width:26px;height:26px;
  font-size:.82rem;border-radius:8px;border:2px solid var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.45)}
.ability.ult .keychip{color:#141008;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border-color:transparent}
.ability .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ability .head .aname{font-weight:700;font-size:1.08rem}
.ability .meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.85rem;color:var(--ink-2);
  margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.ability .meta .k{color:var(--muted);text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;
  margin-right:4px}
.ability .desc{color:var(--ink-2);font-size:.95rem;line-height:1.6;margin:0}
.ability .scalings{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag{font-size:.78rem;font-weight:600;padding:3px 9px;border-radius:7px;background:var(--surface-2);
  border:1px solid var(--hairline);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tag-dmg{color:#7db2f2;border-color:color-mix(in srgb,var(--blue) 30%,transparent)}
.tag-scale{color:var(--gold-bright);border-color:color-mix(in srgb,var(--gold) 30%,transparent)}

/* ---------- 11. TABLES ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface)}
/* two-column rune tables read better narrow, icon inline with the name */
.rune-group .table-wrap{max-width:760px}
.rune-group table.data{min-width:0}
.rune-cell{display:flex;align-items:center;gap:10px}
.rune-ico{flex:none;border-radius:6px}
table.data{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
table.data th,table.data td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--hairline)}
table.data thead th{position:sticky;top:0;background:var(--surface-2);color:var(--ink);font-weight:700;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;user-select:none}
table.data tbody tr:hover{background:color-mix(in srgb,var(--gold) 5%,transparent)}
table.data tbody tr:last-child td{border-bottom:none}
table.data td.num{font-variant-numeric:tabular-nums;text-align:right}

/* ---------- 12. MODERN vs CLASSIC DIFF ---------- */
.diff{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.diff-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 12%,var(--surface)),color-mix(in srgb,var(--gold) 12%,var(--surface)));
  border-bottom:1px solid var(--hairline)}
.diff-head h3{margin:0}
/* compact ledger: stat | today | → | classic. Values cluster; no dead space. */
.diff-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(70px,max-content) 26px minmax(140px,1fr);
  gap:8px 14px;align-items:center;padding:8px 18px;border-bottom:1px solid var(--hairline)}
.diff-row:last-of-type{border-bottom:none}
.diff-stat{font-size:.85rem;color:var(--muted)}
.diff-val{font-size:.95rem;font-variant-numeric:tabular-nums}
.diff-val.modern{text-align:right;color:var(--ink-2)}
.diff-val.classic{color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.diff-arrow{color:var(--gold);font-weight:800;text-align:center}
.diff-cols{padding-top:12px;padding-bottom:4px;border-bottom:none}
.diff-cols .diff-val{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  font-family:var(--mono)}
.diff-note{padding:12px 18px;font-size:.82rem;color:var(--muted);background:var(--surface-2)}

/* ---------- 13. CTA / CAPTURE ---------- */
.cta{background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--hairline);
  border-radius:var(--radius);padding:clamp(20px,4vw,36px);text-align:center}
.cta h2{margin-bottom:.3em}
.capture{display:flex;gap:10px;max-width:440px;margin:18px auto 0;flex-wrap:wrap}
.capture input[type=email]{flex:1;min-width:200px;background:var(--bg);border:1px solid var(--hairline-strong);
  color:var(--ink);border-radius:11px;padding:12px 14px;font:inherit}
.capture input::placeholder{color:var(--muted)}
.cta .fineprint{font-size:.78rem;color:var(--muted);margin-top:12px}

/* ---------- 14. HERO ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,9vw,90px)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 60% at 15% 0%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 70%),
    radial-gradient(50% 50% at 90% 20%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 70%)}
.hero h1{max-width:16ch}
.hero .lead{margin-bottom:24px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Big hero search */
.hero-search{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--hairline-strong);
  border-radius:14px;padding:14px 18px;max-width:560px;cursor:text;box-shadow:var(--shadow)}
.hero-search:hover{border-color:var(--gold)}
.hero-search svg{width:20px;height:20px;color:var(--muted);flex:none}
.hero-search .placeholder{color:var(--muted)}
.hero-search .kbd{margin-left:auto}

/* ---------- 15. BREADCRUMBS ---------- */
.crumbs{font-size:.85rem;color:var(--muted);padding-block:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--ink-2)}
.crumbs .sep{color:var(--muted)}

/* ---------- 16. AD SLOTS (dormant; ADS_ENABLED=false) ---------- */
.ad-slot{display:var(--ad-display);min-height:90px;border:1px dashed var(--hairline);border-radius:var(--radius-sm);
  align-items:center;justify-content:center;color:var(--muted);font-size:.8rem;background:var(--surface)}

/* ---------- 17. FOOTER ---------- */
.site-footer{flex-shrink:0;border-top:1px solid var(--hairline);background:var(--surface);margin-top:48px}
.site-footer .wrap{padding-block:36px}
.foot-grid{display:grid;gap:28px;grid-template-columns:1.4fr repeat(3,1fr)}
.foot-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
.foot-col a{display:block;color:var(--ink-2);padding:4px 0;font-size:.92rem}
.foot-col a:hover{color:var(--ink)}
.foot-brand p{font-size:.9rem;color:var(--muted);max-width:34ch}
.foot-bottom{margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  font-size:.82rem;color:var(--muted)}
/* Quiet sign-off on its own row: full-width, muted, never louder than the fine print. */
.foot-values{flex-basis:100%;margin-top:6px;font-size:.78rem;opacity:.8}
/* single signup lives on the home page (#alerts); the footer just points there */
.foot-alert-link{margin-top:10px;font-size:.92rem}
.foot-alert-link a{font-weight:700}
.foot-capture{display:flex;gap:8px;margin-top:10px;max-width:320px}
.foot-capture input{flex:1;background:var(--bg);border:1px solid var(--hairline-strong);color:var(--ink);
  border-radius:9px;padding:9px 11px;font:inherit;font-size:.88rem}

/* ---------- 18. STYLEGUIDE PAGE HELPERS ---------- */
.swatches{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.swatch{border:1px solid var(--hairline);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.swatch .chip{height:64px}
.swatch .meta{padding:8px 10px;font-size:.78rem}
.swatch .meta code{color:var(--ink-2);display:block}
.sg-section{border-top:1px solid var(--hairline);padding-top:32px;margin-top:40px}
.sg-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- 18a. REVEAL SOURCE CARD ---------- */
.card-figure{margin:0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.card-figure img{width:100%;height:auto;display:block;background:#0b0d12}
.card-figure figcaption{padding:10px 14px;font-size:.82rem;border-top:1px solid var(--hairline)}
.img-gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.img-gallery .card-figure img{background:#0b0d12}

/* ---------- 18a2. CHAMPION HERO (original Classic splash backdrop) ---------- */
.champ-hero{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--hairline);
  margin-top:6px;min-height:280px;display:flex;align-items:flex-end;background:var(--surface)}
.champ-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.champ-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,15,.18) 0%,rgba(8,10,15,.62) 55%,rgba(8,10,15,.93) 100%)}
.champ-hero-body{position:relative;z-index:1;padding:clamp(18px,4vw,30px);width:100%}
.champ-hero-body h1,.champ-hero-body .lead{color:#f5f4ef}
.champ-hero-body .lead{opacity:.92}
.champ-hero-body .source-line{color:#c2c9d6}
.champ-hero-body .provenance-line{background:rgba(8,10,15,.72);
  border-color:rgba(135,213,232,.32);border-left-color:#87d5e8;
  color:#e4e8ee;font-size:.78rem;backdrop-filter:blur(4px)}
.champ-hero-credit{position:absolute;z-index:1;top:12px;right:14px;font-size:.7rem;letter-spacing:.04em;
  color:rgba(245,244,239,.75);background:rgba(8,10,15,.45);padding:3px 9px;border-radius:999px;
  backdrop-filter:blur(2px)}
.champ-hero.no-art{min-height:0}
.champ-hero.no-art::after{content:none}
.champ-hero.no-art .champ-hero-body h1,.champ-hero.no-art .champ-hero-body .lead{color:var(--ink)}
/* 2009-era loading cards are tall (307x557) - show them as a framed card on the
   right instead of cover-cropping a thin slice as a backdrop */
.champ-hero.portrait-art{background:
  radial-gradient(70% 120% at 85% 30%,color-mix(in srgb,var(--blue) 14%,transparent),transparent 70%),
  var(--surface-2)}
.champ-hero.portrait-art .champ-hero-art{left:auto;right:clamp(14px,3vw,34px);top:14px;bottom:14px;
  width:auto;height:calc(100% - 28px);object-fit:contain;object-position:right center;
  border-radius:10px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.champ-hero.portrait-art::after{background:linear-gradient(90deg,rgba(8,10,15,.88) 34%,rgba(8,10,15,.45) 60%,rgba(8,10,15,.12) 100%)}
.champ-hero.portrait-art .champ-hero-body{max-width:60%}
@media (max-width:700px){
  .account-control{width:34px;padding:0;justify-content:center}
  .account-control [data-account-label]{display:none}
  .account-provider-grid,.account-menu{grid-template-columns:1fr}
  .champ-hero.portrait-art .champ-hero-art{opacity:.35}
  .champ-hero.portrait-art .champ-hero-body{max-width:none}
}
@media (max-width:600px){.champ-hero{min-height:220px}.champ-hero-art{object-position:center 15%}}

/* ---------- 18a3. CHAMPION BUILD DISCOVERY ---------- */
.champ-build-shelf{margin-top:18px;padding:18px;border:1px solid var(--hairline);
  border-radius:var(--radius);background:var(--surface)}
.champ-build-shelf-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:14px}
.champ-build-shelf-head .eyebrow{margin-bottom:4px}
.champ-build-shelf-head h2{margin:0;font-size:clamp(1.3rem,2.2vw,1.7rem)}
.champ-build-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:12px}
.champ-build-record{min-width:0;border:1px solid var(--hairline);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);background:var(--bg);transition:border-color .15s,background-color .15s}
.champ-build-record:hover{border-color:var(--gold);background:var(--surface-2)}
.champ-build-record-link{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:16px;min-height:84px;padding:13px 15px;color:var(--ink);text-decoration:none}
.champ-build-record-link:hover{text-decoration:none}
.champ-build-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.champ-build-copy strong{display:-webkit-box;overflow:hidden;color:var(--gold-bright);
  font-size:1rem;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  white-space:normal}
.champ-build-role{color:var(--blue);font:700 .65rem/1.3 var(--mono);
  letter-spacing:.09em;text-transform:uppercase}
.champ-build-author{overflow:hidden;color:var(--muted);font-size:.74rem;
  text-overflow:ellipsis;white-space:nowrap}
.champ-build-items{display:flex;gap:6px;flex-wrap:nowrap}
.champ-build-item{width:32px;height:32px;flex:none;border:1px solid var(--hairline-strong);
  border-radius:5px;background:var(--bg)}
.champ-build-action{color:var(--gold-bright);font-size:.8rem;font-weight:700;white-space:nowrap}
.champ-build-empty{margin:0;padding:14px 16px;border-left:3px solid var(--gold);
  background:var(--bg);color:var(--ink-2)}
@media (max-width:700px){
  .champ-build-shelf{padding:15px}
  .champ-build-shelf-head{align-items:stretch;flex-direction:column}
  .champ-build-shelf-head .btn{align-self:flex-start}
  .champ-build-record-link{grid-template-columns:1fr auto;gap:10px 12px}
  .champ-build-copy{grid-column:1/-1}
  .champ-build-items{flex-wrap:wrap}
}

/* ---------- 18a4. PAGE WAYFINDING (section jump bar) ---------- */
/* Sticks just under the 68px site header (z below its 50) so the section
   chips stay reachable anywhere on the page. */
.page-jump{position:sticky;top:68px;z-index:40;display:flex;align-items:center;
  flex-wrap:wrap;gap:8px 10px;margin:10px 0 0;padding:10px 0 12px;
  border-bottom:1px solid var(--hairline);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.page-jump a{display:inline-flex;align-items:center;min-height:32px;padding:5px 10px;
  border:1px solid var(--hairline);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font-size:.78rem;font-weight:700;white-space:nowrap}
.page-jump a:hover{border-color:var(--gold);color:var(--gold-bright);text-decoration:none}
.page-jump a.is-active{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--surface));
  color:var(--gold-bright)}
.page-jump .page-jump-accent{border-color:var(--gold);color:var(--gold-bright)}
.page-jump .jump-search{flex:1;min-width:140px;max-width:280px;margin-left:auto}
.page-jump .jump-search input{width:100%;min-height:32px;padding:5px 12px;
  border:1px solid var(--hairline);border-radius:999px;background:var(--surface);
  color:var(--ink);font-size:.8rem}
.page-jump .jump-search input:focus{border-color:var(--gold);outline:none}
/* Anchor targets must clear the header (68px) plus the stuck chip row. */
.has-page-jump [id]{scroll-margin-top:136px}
@media (max-width:700px){
  .page-jump{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-right:16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .page-jump::-webkit-scrollbar{display:none}
  .page-jump a{min-height:30px;padding:4px 8px;font-size:.74rem;flex:none}
  .page-jump .jump-search{flex:none;width:150px}
}

.mu-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.mu-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:6px 10px;border:1px solid var(--hairline);border-radius:999px;
  background:var(--surface);color:var(--ink-2);font-size:.82rem;font-weight:700;
  white-space:normal}
a.mu-chip:hover{border-color:var(--gold);color:var(--gold-bright);text-decoration:none}
.mu-portrait{width:34px;height:34px;flex:none;border:1px solid var(--hairline-strong);
  border-radius:50%;background:var(--bg)}

.champ-pager{display:flex;gap:12px;margin:8px 0 24px;flex-wrap:wrap}
.champ-pager-link{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:10px 14px;color:var(--ink)}
.champ-pager-link:hover{text-decoration:none;border-color:var(--gold)}
.champ-pager-link.next{justify-content:flex-end;text-align:right;flex-direction:row-reverse}
.champ-pager-link.all{justify-content:center;text-align:center;flex:0 1 auto}
.champ-pager .pager-label{display:block;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.champ-pager .pager-portrait{width:40px;height:40px;border-radius:8px;flex:none;
  border:1px solid var(--hairline-strong)}

/* ---------- 18b. COMMAND PALETTE ---------- */
.search-overlay{position:fixed;inset:0;z-index:200;background:rgba(6,8,12,.6);
  backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;
  padding:12vh 16px 16px}
.search-overlay[hidden]{display:none}
.search-panel{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--hairline-strong);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.search-inputbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--hairline);color:var(--muted)}
.search-inputbar input{flex:1;background:none;border:none;color:var(--ink);font:inherit;font-size:1.05rem;outline:none}
.search-inputbar input::placeholder{color:var(--muted)}
.search-results{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1}
.search-results li[role=option]{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;cursor:pointer}
.search-ico{width:28px;height:28px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--hairline)}
.search-results li[aria-selected=true]{background:color-mix(in srgb,var(--gold) 16%,transparent)}
.search-results li:hover{background:var(--surface-2)}
.search-name{font-weight:600;color:var(--ink)}
.search-meta{margin-left:auto;font-size:.82rem;color:var(--muted);text-align:right}
.search-empty{padding:20px 12px;color:var(--muted);text-align:center;list-style:none}
.search-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--hairline);
  font-size:.78rem;color:var(--muted)}
.search-foot .kbd{margin-right:2px}

/* ---------- 19. RESPONSIVE ---------- */
/* tablet band: the full header (brand + search + 6 links + tools) needs ~1100px;
   below that, collapse the search launcher to icon-only and tighten the nav */
@media (max-width:1180px){
  .search-launch>span{display:none}
  .nav{gap:0}
  .nav a{padding:8px 9px;font-size:.88rem}
}
@media (max-width:900px){
  .nav{display:none}
  /* search stays reachable on mobile: compact icon launcher */
  .search-launch{display:inline-flex;min-width:0;margin-left:auto}
  .search-launch .kbd{display:none}
  .menu-btn{display:inline-grid}
  /* hamburger opens the nav as a panel under the sticky header */
  .nav.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:2px;background:var(--surface);border-bottom:1px solid var(--hairline-strong);
    padding:10px clamp(16px,4vw,28px) 14px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
  .nav.is-open a,.nav.is-open .nav-search{padding:12px 10px;border-radius:8px}
  .nav.is-open .nav-search{display:flex;justify-content:space-between;align-items:center;
    width:100%;font:inherit;font-weight:600;color:var(--ink-2);background:none;
    border:none;cursor:pointer;text-align:left}
  .nav.is-open .nav-search:hover{color:var(--ink);background:var(--surface-2)}
  .site-header .wrap{position:relative}
  .foot-grid{grid-template-columns:1fr 1fr}
  .diff-row{grid-template-columns:minmax(90px,1fr) auto 20px auto;gap:6px 8px;padding:8px 12px}
  .diff-stat{font-size:.78rem}
}
@media (max-width:520px){
  .header-tools{gap:6px;margin-left:0}
  .header-tools .btn-discord{display:none}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}
 
/* ---------- 20. ITEM & SPELL DESCRIPTION STYLING ---------- */
.item-stats {
  font-weight: 600;
  color: var(--ink-2);
}
.stat-value {
  color: var(--gold-bright);
  font-weight: 700;
}
.unique-effect {
  color: var(--gold);
  font-weight: 700;
}
.active-effect {
  color: var(--blue);
  font-weight: 700;
}
.passive-effect {
  color: var(--gold-bright);
  font-weight: 700;
}
.magic-damage {
  color: var(--blue);
  font-weight: 600;
}
.physical-damage {
  color: var(--red);
  font-weight: 600;
}
.true-damage {
  color: var(--ink);
  font-weight: 600;
}
.gold-value {
  color: var(--gold-bright);
  font-weight: 600;
}
.flavor-text {
  color: var(--muted);
  font-style: italic;
  display: block;
  margin-top: 6px;
}
.text-speed {
  color: var(--teal);
  font-weight: 600;
}

/* Mastery Tree layout */
.masteries-container {
  display: flex;
  gap: 20px;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 24px;
}
@media (max-width: 1080px) {
  .masteries-container {
    flex-direction: column;
    align-items: center;
  }
}
.mastery-tree-card {
  flex: 1;
  width: 100%;
  min-width: 290px;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.mastery-tree-header {
  border-bottom: 2px solid var(--hairline-strong);
  padding-bottom: 8px;
  margin-bottom: 16px;
  text-align: center;
}
.mastery-tree-header h2 {
  margin: 0;
  font-size: 1.2rem;
}
.mastery-tree-offense h2 { color: var(--red); }
.mastery-tree-defense h2 { color: var(--blue); }
.mastery-tree-utility h2 { color: var(--gold-bright); }

.mastery-grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 12px;
}
.mastery-grid-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mastery-cell {
  position: relative;
  outline: none;
}
.mastery-cell.empty {
  aspect-ratio: 1;
  background: transparent;
}
.mastery-icon-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.mastery-icon-img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--hairline-strong);
  background: var(--bg);
  cursor: pointer;
  display: block;
  margin: 0 auto;
  transition: border-color 0.2s, transform 0.1s;
}
.mastery-icon-img:hover {
  border-color: var(--gold);
  transform: scale(1.05);
}
.mastery-rank-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  background: rgba(0, 0, 0, 0.85);
  color: var(--gold);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
  border: 1px solid var(--hairline-strong);
  pointer-events: none;
  white-space: nowrap;
}
.mastery-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  width: 260px;
  background: var(--surface-strong);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  font-size: 0.8rem;
  color: var(--ink);
  transition: opacity 0.15s, visibility 0.15s;
  pointer-events: none;
  text-align: left;
}
.mastery-tooltip-right {
  left: 0;
}
.mastery-tooltip-center {
  left: 50%;
  transform: translateX(-50%);
}
.mastery-tooltip-left {
  right: 0;
}
.mastery-cell:hover .mastery-tooltip,
.mastery-cell:focus-within .mastery-tooltip {
  visibility: visible;
  opacity: 1;
}
.mastery-tooltip h4 {
  margin: 0 0 4px 0;
  font-size: 0.9rem;
  color: var(--ink);
}
.mastery-tooltip .ranks-info {
  font-size: 0.7rem;
  color: var(--gold-bright);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mastery-tooltip .rank-desc-row {
  line-height: 1.4;
  padding: 4px 0;
  border-top: 1px dashed var(--hairline);
}
.mastery-tooltip .rank-desc-row:first-of-type {
  border-top: none;
}
.mastery-tooltip .rank-num {
  font-weight: 700;
  color: var(--gold);
  margin-right: 4px;
}

/* ---------- 21. 2026 EVIDENCE-LED VISUAL PASS ---------- */
:root{
  --bg:#07101a;
  --surface:#0d1926;
  --surface-2:#132235;
  --surface-strong:#09131f;
  --ink:#f2f0e8;
  --ink-2:#c2ccd8;
  --muted:#8f9caf;
  --gold:#caa455;
  --gold-bright:#e0c477;
  --blue:#55a9c4;
  --teal:#4fb49b;
  --green:#55bd83;
  --red:#ef7e78;
  --hairline:rgba(170,195,218,.12);
  --hairline-strong:rgba(198,216,232,.22);
  --radius:10px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --maxw:1180px;
  --sans:"Segoe UI Variable Text","Segoe UI",Tahoma,sans-serif;
  --display:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  --shadow-sm:0 2px 8px rgba(0,0,0,.18);
  --shadow:0 12px 38px rgba(0,0,0,.25);
  --shadow-lg:0 22px 60px rgba(0,0,0,.42);
}
:root[data-theme="light"]{
  --bg:#e9eef0;
  --surface:#f8faf9;
  --surface-2:#dde6e9;
  --surface-strong:#ffffff;
  --ink:#14212c;
  --ink-2:#344654;
  --muted:#617382;
  --gold:#8d6b22;
  --gold-bright:#765512;
  --blue:#226f88;
  --teal:#247b68;
  --green:#2a7a4f;
  --red:#b84843;
  --hairline:rgba(20,45,62,.13);
  --hairline-strong:rgba(20,45,62,.24);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --bg:#e9eef0;
    --surface:#f8faf9;
    --surface-2:#dde6e9;
    --surface-strong:#ffffff;
    --ink:#14212c;
    --ink-2:#344654;
    --muted:#617382;
    --gold:#8d6b22;
    --gold-bright:#765512;
    --blue:#226f88;
    --teal:#247b68;
    --green:#2a7a4f;
    --red:#b84843;
    --hairline:rgba(20,45,62,.13);
    --hairline-strong:rgba(20,45,62,.24);
  }
}

body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(85,169,196,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(85,169,196,.025) 1px,transparent 1px);
  background-size:32px 32px;
}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.025em}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.55rem,3vw,2.25rem)}
.eyebrow,.card-eyebrow,.stat-tile .label,table.data thead th{
  font-family:var(--mono);
  letter-spacing:.09em;
}
.section{padding-block:clamp(30px,5vw,58px)}

.site-header{
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  border-bottom-color:color-mix(in srgb,var(--gold) 30%,var(--hairline));
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.site-header .wrap{min-height:68px}
.brand{font-family:var(--display);font-size:1.22rem}
.nav a{border-radius:4px;font-size:.9rem}
.nav a[aria-current="page"]{
  color:var(--gold-bright);
  box-shadow:inset 0 -2px 0 var(--gold);
}

.hero{
  min-height:clamp(480px,65vh,680px);
  display:grid;
  align-items:center;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 24%,var(--hairline));
}
.hero::before{
  background:
    linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 52%,transparent 100%),
    radial-gradient(50% 80% at 85% 30%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 72%),
    radial-gradient(45% 65% at 72% 65%,color-mix(in srgb,var(--gold) 15%,transparent),transparent 75%);
}
/* Original hand-drawn rune-page artwork (generated by build/hero-art.mjs) */
:root{
  --ha-slot:rgba(10,13,20,.55);
  --ha-hex:rgba(12,14,20,.72);
}
:root[data-theme="light"]{
  --ha-slot:rgba(255,252,243,.82);
  --ha-hex:rgba(255,250,238,.9);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --ha-slot:rgba(255,252,243,.82);
    --ha-hex:rgba(255,250,238,.9);
  }
}
.hero-art{
  position:absolute;
  width:min(44vw,520px);
  aspect-ratio:1;
  /* keep the art aligned with the content column, not pinned to the viewport edge */
  right:max(4vw,calc((100vw - var(--maxw)) / 2));
  top:50%;
  transform:translateY(-50%) rotate(-4deg);
  opacity:.9;
  pointer-events:none;
  filter:drop-shadow(0 0 40px color-mix(in srgb,var(--blue) 18%,transparent));
}
:root[data-theme="light"] .hero-art{opacity:1;filter:drop-shadow(0 10px 30px rgba(30,40,60,.12))}

/* light-mode contrast: the gold gradient goes deep bronze in light theme, so the
   near-black button text becomes unreadable - flip it to warm white there */
:root[data-theme="light"] .btn-primary{color:#fff7e4}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]) .btn-primary{color:#fff7e4}
}
.hero-art .ha-orbit{transform-origin:260px 260px;animation:ha-spin 240s linear infinite}
.hero-art .ha-ring-marks{transform-origin:260px 260px;animation:ha-spin 420s linear infinite reverse}
@keyframes ha-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .hero-art .ha-orbit,.hero-art .ha-ring-marks{animation:none}
}
@media (max-width:900px){.hero-art{display:none}}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:14ch;text-wrap:balance}
.hero .lead{max-width:54ch}
.hero-search{
  border-radius:6px;
  border-left:3px solid var(--gold);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}

.audit-rail{
  background:var(--surface-strong);
  border-bottom:1px solid var(--hairline-strong);
  border-top:1px solid var(--hairline-strong);
}
.audit-rail .wrap{padding-block:28px}
.audit-rail-head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
  gap:28px;
  align-items:end;
  padding-bottom:20px;
  border-bottom:1px solid var(--hairline);
}
.audit-rail-head h2{font-size:clamp(1.35rem,2.4vw,2rem);margin:0}
.audit-rail-head>p{color:var(--ink-2);font-size:.92rem;margin:0;max-width:48ch}
.audit-metrics{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin:0;
}
.audit-metrics>div{
  padding:18px 18px 2px;
  border-left:1px solid var(--hairline);
}
.audit-metrics>div:first-child{border-left:0;padding-left:0}
.audit-metrics dt{
  color:var(--muted);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.audit-metrics dd{
  margin:4px 0 0;
  color:var(--ink);
  font-family:var(--display);
  font-size:clamp(1.4rem,3vw,2rem);
  font-variant-numeric:tabular-nums;
}
.audit-metrics>div:last-child dd{color:var(--green)}

.card{
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 36%,var(--surface)),var(--surface));
  border-color:var(--hairline);
  box-shadow:var(--shadow-sm);
}
.card-link{transition:border-color .18s,transform .18s,box-shadow .18s}
.card-link:hover{
  border-color:color-mix(in srgb,var(--gold) 75%,var(--hairline));
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.26);
}
.champ-card{min-height:124px}
.champ-card-status{margin-top:auto;display:block}
.champ-card-status .badge,.champ-card-status .data-pending{max-width:100%}

.provenance-line{
  width:fit-content;
  max-width:100%;
  margin-top:12px;
  padding:9px 12px;
  background:color-mix(in srgb,var(--blue) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--blue) 24%,var(--hairline));
  border-left:3px solid var(--blue);
  border-radius:4px;
  font-family:var(--mono);
  font-size:.73rem;
}
.badge-pbe-verified{
  color:#87d5e8;
  background:color-mix(in srgb,var(--blue) 16%,transparent);
  border-color:color-mix(in srgb,var(--blue) 42%,transparent);
}
.badge-source-verified,.badge-dual-source-verified{
  color:var(--gold-bright);
  background:color-mix(in srgb,var(--gold) 14%,transparent);
  border-color:color-mix(in srgb,var(--gold) 38%,transparent);
}
.badge-launch-verified{
  color:#83d9a5;
  background:color-mix(in srgb,var(--green) 15%,transparent);
  border-color:color-mix(in srgb,var(--green) 38%,transparent);
}
.badge-disputed{
  color:var(--red);
  background:color-mix(in srgb,var(--red) 13%,transparent);
  border-color:color-mix(in srgb,var(--red) 38%,transparent);
}
.badge-editorial{
  color:#c2a7ed;
  background:rgba(128,88,182,.15);
  border-color:rgba(170,130,220,.34);
}
.data-pending{
  color:#b1bac7;
  background:color-mix(in srgb,var(--muted) 9%,var(--surface));
}
.ability{border-left:2px solid color-mix(in srgb,var(--blue) 45%,var(--hairline))}
.ability.ult{border-left-color:var(--gold)}
.stat-tile{border-radius:4px}
.table-wrap,.diff,.card-figure{border-radius:8px}

.mastery-tree-card{
  border-radius:8px;
  box-shadow:var(--shadow-sm);
}
.mastery-cell:focus-visible .mastery-icon-img{border-color:var(--gold)}
.mastery-tooltip{border-radius:6px}

/* ---------- RIFT DISPATCH ---------- */
.rift-dispatch{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(38px,6vw,74px);
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--blue) 10%,var(--bg)),
      color-mix(in srgb,var(--gold) 5%,var(--bg)));
  border-block:1px solid var(--hairline-strong);
}
.rift-dispatch::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.32;
  background-image:
    linear-gradient(color-mix(in srgb,var(--blue) 15%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--blue) 15%,transparent) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(90deg,#000,transparent 82%);
}
.dispatch-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
}
.dispatch-heading h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.8rem,4vw,2.8rem);
}
.dispatch-archive-link{
  padding-bottom:4px;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 54%,transparent);
  font-size:.88rem;
  font-weight:700;
}
.dispatch-archive-link:hover{
  border-color:var(--gold-bright);
  text-decoration:none;
}
.rift-dispatch-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:16px;
}
.dispatch-secondary{
  display:grid;
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:10px;
}
.dispatch-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:18px;
  color:var(--ink);
  background:
    linear-gradient(150deg,
      color-mix(in srgb,var(--surface-2) 70%,var(--surface)),
      var(--surface));
  border:1px solid var(--hairline-strong);
  border-left:3px solid color-mix(in srgb,var(--blue) 75%,var(--gold));
  border-radius:5px;
  box-shadow:var(--shadow-sm);
}
.dispatch-card::before{
  content:"";
  position:absolute;
  inset:7px 7px auto auto;
  width:20px;
  height:20px;
  border-top:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  border-right:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  pointer-events:none;
}
.rift-dispatch-featured{
  min-height:330px;
  padding:clamp(24px,4vw,42px);
  border-left-color:var(--gold);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
  background:
    radial-gradient(circle at 88% 14%,color-mix(in srgb,var(--blue) 18%,transparent),transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--surface-2) 80%,var(--surface)),
      var(--surface));
}
.rift-dispatch-featured h3{
  max-width:17ch;
  margin-top:auto;
  font-family:var(--display);
  font-size:clamp(1.8rem,4vw,3.05rem);
  text-wrap:balance;
}
.dispatch-secondary .dispatch-card{padding:15px 17px}
.dispatch-secondary .dispatch-card h3{
  margin:.25rem 0 .35rem;
  font-size:1rem;
}
.dispatch-secondary .dispatch-summary{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:.84rem;
}
.dispatch-meta{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.dispatch-meta time{margin-left:auto}
.dispatch-type{color:#87d5e8}
.dispatch-type-data-update{color:var(--gold-bright)}
.dispatch-type-wiki-investigation{color:#c2a7ed}
.dispatch-summary{
  margin:0 0 16px;
  color:var(--ink-2);
}
.dispatch-source{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 12px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--hairline);
  color:var(--muted);
  font-family:var(--mono);
  font-size:.68rem;
}
.dispatch-source strong{color:var(--ink-2)}
.dispatch-source a{
  flex-basis:100%;
  width:fit-content;
  color:var(--gold-bright);
  overflow-wrap:anywhere;
}
.dispatch-related{
  width:fit-content;
  margin-top:10px;
  font-size:.76rem;
  font-weight:700;
}
.dispatch-card-media {
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 14px;
  border: 1px solid var(--hairline-strong);
  max-height: 220px;
}
.dispatch-card-img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.dispatch-card:hover .dispatch-card-img {
  transform: scale(1.04);
}
.dispatch-news-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  color: var(--gold-bright);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dispatch-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.dispatch-title-link:hover, .dispatch-card:hover .dispatch-title-link {
  color: var(--gold-bright);
  text-decoration: underline;
}
.dispatch-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dispatch-card:hover {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.dispatch-card-footer {
  margin-top: 12px;
  padding-top: 8px;
}
.dispatch-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--gold-bright);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, var(--surface-2));
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dispatch-card:hover .dispatch-read-btn {
  background: var(--gold);
  color: #0b0d12;
  border-color: var(--gold-bright);
}
.dispatch-signal{
  position:relative;
  width:10px;
  height:10px;
  flex:0 0 10px;
  border-radius:50%;
  color:#66d9f2;
  background:currentColor;
  box-shadow:0 0 12px currentColor;
}
.dispatch-signal::after{
  content:"";
  position:absolute;
  inset:-8px;
  border:1px solid currentColor;
  border-radius:50%;
  animation:dispatch-ping 900ms ease-out 3;
}
@keyframes dispatch-ping{
  from{opacity:.8;transform:scale(.35)}
  to{opacity:0;transform:scale(1.4)}
}
.dispatch-archive{
  padding-block:28px clamp(48px,8vw,88px);
}
.dispatch-archive .section-title{
  padding-block:clamp(28px,5vw,52px);
  border-bottom:1px solid var(--hairline);
}
.dispatch-archive-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding-top:24px;
}
.dispatch-archive-list .dispatch-card{min-height:290px}
.dispatch-archive-list .rift-dispatch-featured{
  grid-column:1/-1;
  min-height:350px;
}
@media (prefers-reduced-motion:reduce){
  .dispatch-signal::after{animation:none}
}

.email-note,
.email-status{
  flex-basis:100%;
  margin:6px 0 0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.45;
}
.email-note a{overflow-wrap:anywhere}
.email-status:empty{display:none}
.email-status:not(:empty){
  padding-left:9px;
  border-left:2px solid var(--teal);
  color:var(--ink-2);
}

@media (max-width:900px){
  .hero{min-height:auto}
  .hero::after{right:-120px;opacity:.3;width:380px}
  .rift-dispatch-grid{grid-template-columns:1fr}
  .rift-dispatch-featured{min-height:auto;clip-path:none}
  .dispatch-secondary{grid-template-rows:none}
  .dispatch-archive-list{grid-template-columns:1fr}
  .dispatch-archive-list .rift-dispatch-featured{grid-column:auto;min-height:auto}
  .audit-rail-head{grid-template-columns:1fr;gap:10px}
  .audit-metrics{grid-template-columns:repeat(3,1fr)}
  .audit-metrics>div:nth-child(4){border-left:0;padding-left:0}
  .mastery-tooltip{
    position:fixed;
    left:16px!important;
    right:16px!important;
    bottom:16px;
    width:auto;
    transform:none!important;
  }
}
@media (max-width:560px){
  .hero h1{font-size:clamp(2.15rem,12vw,3.1rem)}
  .hero::after{display:none}
  .dispatch-heading{align-items:flex-start;flex-direction:column;gap:8px}
  .dispatch-card,.rift-dispatch-featured{padding:20px}
  .dispatch-meta{align-items:flex-start;flex-wrap:wrap}
  .dispatch-meta time{margin-left:0;width:100%}
  .audit-metrics{grid-template-columns:1fr 1fr}
  .audit-metrics>div{border-left:0;padding:14px 12px 2px 0;border-top:1px solid var(--hairline)}
  .audit-metrics>div:first-child,.audit-metrics>div:nth-child(2){border-top:0}
  .capture{display:grid}
  .capture input[type=email],.capture .btn{width:100%}
  .badge{white-space:normal;line-height:1.25}
  .item-card>div:first-child{align-items:flex-start!important}
}

/* =============================================================
   22. LEDGER SURFACES - item detail, builds planner, PBE changes
   Shared idea: these pages are *instruments*, so they lean on
   hairline rules, mono labels, and drafted brackets rather than
   more cards. Nothing here introduces a new colour.
   ============================================================= */

/* ---- stat context marks (up / down vs roster average) ---- */
.stat-mark{font-size:.62em;vertical-align:.28em;margin-right:5px;cursor:help;line-height:1}
.stat-mark.up{color:var(--green)}
.stat-mark.down{color:var(--blue)}

/* ---- item detail ---- */
.item-hero{display:flex;gap:clamp(14px,3vw,24px);align-items:flex-start;margin-top:6px;
  padding:clamp(16px,3vw,24px);background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 40%,var(--surface)),var(--surface));
  border:1px solid var(--hairline);border-left:3px solid var(--gold);border-radius:8px}
.item-hero-ico{flex:none;width:72px;height:72px;border-radius:8px;border:1px solid var(--hairline-strong);
  background:var(--bg)}
.item-hero-body{min-width:0;flex:1}
.item-hero-cost{margin:6px 0 0;font-family:var(--display);font-size:1.5rem;color:var(--gold-bright);
  font-variant-numeric:tabular-nums}
.item-combine{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-left:8px}
.item-stat-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-bottom:16px}
.item-stat{padding:9px 13px;background:var(--surface-2);border:1px solid var(--hairline);border-radius:4px;
  font-size:.9rem;color:var(--ink);font-variant-numeric:tabular-nums}
.item-page-desc{border-top:none;padding-top:0;font-size:.95rem;max-width:70ch}

/* recipe tree - drafted bracket lines, not boxes */
.recipe-tree{padding:4px 0}
.recipe-tree ul{list-style:none;margin:0;padding:0}
.recipe-children{margin-left:26px;padding-left:20px;border-left:1px solid var(--hairline-strong)}
.recipe-node{position:relative;padding-top:10px}
.recipe-children>.recipe-node::before{content:"";position:absolute;left:-20px;top:26px;width:16px;
  height:1px;background:var(--hairline-strong)}
.recipe-item{display:inline-flex;align-items:center;gap:11px;padding:7px 13px 7px 8px;border-radius:6px;
  background:var(--surface);border:1px solid var(--hairline);color:var(--ink);max-width:100%}
a.recipe-item:hover{text-decoration:none;border-color:var(--gold);background:var(--surface-2)}
.recipe-item.is-current{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
.recipe-ico{flex:none;border-radius:5px;border:1px solid var(--hairline-strong);background:var(--bg)}
.recipe-name{font-weight:600;min-width:0;overflow-wrap:break-word}
.recipe-cost{margin-left:auto;padding-left:12px;font-family:var(--mono);font-size:.78rem;color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.recipe-missing{display:inline-block;padding:7px 12px;border:1px dashed var(--hairline-strong);
  border-radius:6px;color:var(--muted);font-size:.88rem}
.builds-into{display:flex;flex-wrap:wrap;gap:10px}
.builds-into-link{display:inline-flex;align-items:center;gap:10px;padding:7px 13px 7px 8px;border-radius:6px;
  background:var(--surface);border:1px solid var(--hairline);color:var(--ink);font-size:.92rem}
.builds-into-link:hover{text-decoration:none;border-color:var(--gold);background:var(--surface-2)}

/* ---- PBE changes ledger ---- */
.change-build-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--hairline-strong)}
.change-build-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted);
  text-transform:uppercase}
.change-baseline{margin-top:16px;padding:16px 18px;background:var(--surface);border:1px solid var(--hairline);
  border-left:3px solid var(--gold);border-radius:6px}
.change-baseline p:last-child{margin-bottom:0}
.change-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.change-entry{padding:14px 16px;background:var(--surface);border:1px solid var(--hairline);
  border-left:3px solid color-mix(in srgb,var(--blue) 60%,var(--hairline));border-radius:6px}
.change-target{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.change-name{font-weight:700;color:var(--ink)}
.change-field{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);padding:2px 7px;border:1px solid var(--hairline-strong);border-radius:4px}
.changes-key{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--hairline-strong);font-family:var(--mono);font-weight:800;font-size:.8rem;
  color:var(--gold-bright);flex:none}
.change-diff{display:grid;grid-template-columns:1fr 26px 1fr;gap:12px;align-items:start}
.change-before,.change-after{font-size:.9rem;line-height:1.5}
.change-before{color:var(--muted)}
.change-after{color:var(--ink)}
.change-col{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px}
@media (max-width:640px){
  .change-diff{grid-template-columns:1fr;gap:8px}
  .change-diff .diff-arrow{transform:rotate(90deg);width:fit-content}
}

/* ---- builds index ---- */
.build-steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.build-step{padding:16px 18px;background:var(--surface);border:1px solid var(--hairline);border-radius:6px;
  border-top:2px solid var(--gold)}
.build-step-k{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px}
.build-step p{margin:0;font-size:.9rem;color:var(--ink-2)}
/* Build cards - standardized so every card in the grid is the same shape
   regardless of how long its title is. The title area is a fixed two lines,
   the badge lives in the meta line (never squeezing the title), and the item
   row is pinned to the bottom so the dividers line up across the whole grid. */
.build-card{display:flex;flex-direction:column;gap:12px;padding:16px;min-height:150px}
.build-card-head{display:flex;gap:12px;align-items:flex-start}
.build-card-portrait{width:40px;height:40px;flex:none;border-radius:8px;
  border:1px solid var(--hairline-strong);background:var(--bg)}
.build-card-text{flex:1;min-width:0}
.build-card-title{margin:0;font-size:1rem;line-height:1.3;color:var(--gold-bright);
  /* exactly two lines, always - short titles hold the same height as long ones */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-height:2.6em}
/* One line: champion·role truncates before it would push the badge to a second
   row, so every card's meta stays a single line and the heights match. */
.build-card-meta{margin:6px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  font-size:.8rem;color:var(--muted)}
.build-card-champ{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.build-card-meta .badge{flex:none}
.build-card-items{margin-top:auto;padding-top:11px;border-top:1px solid var(--hairline);
  display:flex;gap:6px;flex-wrap:wrap}
.build-card-items img{width:28px;height:28px;flex:none;border-radius:4px;
  border:1px solid var(--hairline-strong);background:var(--bg)}
/* empty bays keep the strip six-wide even if a build lists fewer items */
.build-card-slot{width:28px;height:28px;flex:none;border-radius:4px;
  border:1px dashed var(--hairline);background:var(--surface-2)}

/* ---- build planner ---- */
.pl-section{border-top:1px solid var(--hairline);padding-top:26px}
.pl-section:first-of-type{border-top:none}
.pl-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.pl-head h2{margin:0}
.pl-counter{font-family:var(--mono);font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.pl-counter.is-full{color:var(--gold)}
.pl-counter strong{color:var(--gold-bright);font-size:1.05rem}
.pl-meta-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.guide-meta-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:600px){.guide-meta-grid{grid-template-columns:1fr}}
.pl-field{display:flex;flex-direction:column;gap:6px}
.pl-field>span{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pl-field input,.pl-field select,#pl-notes,#pl-item-search{background:var(--surface);border:1px solid var(--hairline-strong);
  color:var(--ink);border-radius:5px;padding:10px 13px;font:inherit;font-size:.94rem;width:100%}
.pl-field input:focus,.pl-field select:focus,#pl-notes:focus,#pl-item-search:focus{outline:none;border-color:var(--gold)}
#pl-notes{resize:vertical;line-height:1.6}
.pl-champ-preview{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--gold);border-radius:6px}
.pl-champ-preview img{border-radius:6px;border:1px solid var(--hairline-strong)}
.pl-champ-preview .btn{margin-left:auto}

/* item slots - six bays, the signature row of the planner */
.pl-slots{display:grid;gap:10px;grid-template-columns:repeat(6,1fr)}
.pl-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;
  background:var(--surface);border:1px dashed var(--hairline-strong);border-radius:6px;cursor:pointer;
  font:inherit;color:var(--ink);min-height:112px;justify-content:center;transition:border-color .15s,background .15s}
.pl-slot:hover{border-color:var(--gold);background:var(--surface-2)}
.pl-slot.is-filled{border-style:solid;border-color:var(--hairline-strong)}
.pl-slot.is-active{border-color:var(--gold);border-style:solid;box-shadow:0 0 0 1px var(--gold) inset}
.pl-slot img{border-radius:6px;border:1px solid var(--hairline-strong);background:var(--bg)}
.pl-slot-plus{font-size:1.5rem;color:var(--muted);line-height:1}
.pl-slot-name{font-size:.76rem;text-align:center;line-height:1.3;overflow-wrap:anywhere}
.pl-slot-g{font-family:var(--mono);font-size:.7rem;color:var(--gold)}
.pl-slot-x{position:absolute;top:4px;right:6px;color:var(--muted);font-size:1rem;line-height:1;padding:2px 4px;
  border-radius:4px}
.pl-slot-x:hover{color:var(--red);background:var(--surface-2)}
@media (max-width:880px){.pl-slots{grid-template-columns:repeat(3,1fr)}}
@media (max-width:420px){.pl-slots{grid-template-columns:repeat(2,1fr)}}

.pl-picker{margin-top:14px;border:1px solid var(--gold);border-radius:6px;background:var(--surface);overflow:hidden}
.pl-picker-bar{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--hairline);align-items:center}
.pl-picker-grid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding:12px;
  max-height:340px;overflow-y:auto}
.pl-pick{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:5px;cursor:pointer;font:inherit;font-size:.88rem;
  color:var(--ink);text-align:left}
.pl-pick:hover{border-color:var(--gold)}
.pl-pick img{border-radius:4px;flex:none;border:1px solid var(--hairline-strong);background:var(--bg)}
.pl-pick>span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}

.pl-spells{display:flex;flex-wrap:wrap;gap:9px}
.pl-spell{display:inline-flex;align-items:center;gap:9px;padding:8px 13px 8px 8px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:6px;cursor:pointer;font:inherit;font-size:.9rem;color:var(--ink-2)}
.pl-spell:hover{border-color:var(--hairline-strong);color:var(--ink)}
.pl-spell.is-on{border-color:var(--gold);color:var(--gold-bright);background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
.pl-spell img{border-radius:5px;border:1px solid var(--hairline-strong);background:var(--bg)}

/* skill order grid */
.pl-skill-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:640px}
.pl-skill-table th{padding:6px 4px;font-family:var(--mono);font-size:.68rem;color:var(--muted);font-weight:600}
.pl-skill-table thead th{border-bottom:1px solid var(--hairline)}
.pl-sk-key{text-align:left;padding-left:12px;color:var(--gold-bright);font-size:.9rem;
  font-family:var(--mono);font-weight:800;white-space:nowrap}
.pl-sk-key.is-ult{color:var(--gold)}
.pl-sk-count{font-weight:400;font-size:.66rem;color:var(--muted);margin-left:4px}
.pl-skill-table td{padding:2px;text-align:center}
.pl-sk-cell{width:100%;aspect-ratio:1;min-width:26px;background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:4px;cursor:pointer;font:inherit;font-family:var(--mono);font-size:.72rem;font-weight:800;
  color:transparent;padding:0}
.pl-sk-cell:hover{border-color:var(--gold)}
/* Touch: the skill grid is 18 levels wide and already scrolls inside its
   .table-wrap, so the constraint is finger accuracy, not page width. 26px
   cells mean mis-taps on the planner - the second most visited page and
   almost entirely mobile traffic. Only coarse pointers pay the extra scroll. */
@media (pointer: coarse){
  .pl-sk-cell{min-width:38px}
  .pl-spell,.pl-slot,.pill{min-height:38px}
}
.pl-sk-cell.is-on{background:color-mix(in srgb,var(--blue) 32%,var(--surface));border-color:var(--blue);color:var(--ink)}
.pl-sk-cell.is-on.is-ult{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:transparent;color:#141008}

/* runes */
.pl-runes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pl-rune-group{background:var(--surface);border:1px solid var(--hairline);border-radius:6px;padding:14px}
.pl-rune-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--hairline-strong)}
.pl-rune-group-head h3{margin:0;font-size:.95rem}
.pl-rune-list{display:flex;flex-direction:column;gap:3px;max-height:280px;overflow-y:auto;overflow-x:hidden;padding-right:4px}
.pl-rune-list::-webkit-scrollbar{width:6px}
.pl-rune-list::-webkit-scrollbar-track{background:transparent}
.pl-rune-list::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:3px}
.pl-rune-list::-webkit-scrollbar-thumb:hover{background:var(--gold)}
.pl-rune-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;
  border-radius:4px;font-size:.83rem}
.pl-rune-row:hover{background:var(--surface-2)}
.pl-rune-row.is-on{background:color-mix(in srgb,var(--gold) 9%,transparent)}
.pl-rune-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pl-rune-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.pl-rune-row.is-on .pl-rune-name{color:var(--ink)}
.pl-rune-stat{font-family:var(--mono);font-size:.72rem;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-stepper{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}
.pl-step{width:22px;height:22px;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--hairline-strong);border-radius:4px;color:var(--ink-2);cursor:pointer;font:inherit;
  font-size:.85rem;line-height:1;padding:0}
.pl-step:hover{border-color:var(--gold);color:var(--gold-bright)}
.pl-step-count{min-width:18px;text-align:center;font-family:var(--mono);font-size:.78rem;
  font-variant-numeric:tabular-nums}
.pl-rune-totals{margin-top:14px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--hairline);
  border-left:3px solid var(--gold);border-radius:6px}
.pl-totals-label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
#pl-rune-totals-list{display:flex;flex-wrap:wrap;gap:6px 16px}
#pl-rune-totals-list span{font-size:.9rem;color:var(--gold-bright);font-variant-numeric:tabular-nums}

/* planner masteries reuse the database tree styling, plus point states */
.pl-mastery-trees .mastery-tree-card{max-width:none}
.pl-ma-cell{cursor:pointer}
.pl-ma-cell.is-on .mastery-icon-img{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pl-ma-cell.is-on .mastery-rank-badge{color:var(--gold-bright)}
.pl-ma-cell.is-locked .mastery-icon-img{opacity:.34;filter:grayscale(1)}
.pl-ma-cell.is-locked{cursor:not-allowed}

/* sticky action bar */
.pl-actions{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:8px;padding:14px clamp(16px,4vw,28px);background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--gold);
  width:100%;max-width:var(--maxw);margin-inline:auto}
.pl-actions-gold{font-family:var(--display);font-size:1.2rem;color:var(--gold-bright);
  font-variant-numeric:tabular-nums;margin-right:auto}
.pl-actions-msg{flex-basis:100%;font-size:.82rem;color:var(--teal);min-height:1.2em}
.pl-actions-msg:empty{display:none}
.pl-sync-state{font:600 .72rem/1 var(--mono);color:var(--muted)}
.pl-sync-state[data-state="saved"]{color:var(--teal)}
.pl-sync-state[data-state="conflict"],.pl-sync-state[data-state="offline"]{color:var(--red)}
.pl-draft-card{text-align:left;color:var(--ink);cursor:pointer}
.pl-draft-card span,.pl-draft-card small{display:block;margin-top:5px;color:var(--muted)}
@media (max-width:560px){
  .pl-actions{gap:8px}
  .pl-actions .btn{flex:1;min-width:0}
  .pl-actions-gold{flex-basis:100%;margin-right:0}
}

.build-card-link{display:flex;flex:1;flex-direction:column;gap:12px;color:inherit;text-decoration:none}
.build-card-votes{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:auto;padding-top:9px;border-top:1px solid var(--hairline)}
.build-card-votes button{width:30px;height:28px;border:1px solid var(--hairline-strong);border-radius:6px;background:var(--surface-2);color:var(--muted);cursor:pointer}
.build-card-votes button[aria-pressed="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--surface));color:var(--gold-bright)}
.build-card-votes output{min-width:2.2em;text-align:center;font-family:var(--mono);font-size:.8rem}
.build-card-votes[data-pending="true"]{opacity:.65}
.build-card-votes[data-error="true"]{border-top-color:var(--red)}
.build-card-vote-note{margin:auto 0 0;padding-top:9px;border-top:1px solid var(--hairline);font-size:.72rem;color:var(--muted)}

/* ---- 23. DENSITY TOGGLE (items index) ----
   Grid = fast scanning at a glance; Details = the full card.
   Grid mode collapses each card to icon + name + cost. */
.density{display:inline-flex;border:1px solid var(--hairline);border-radius:9px;overflow:hidden;
  background:var(--surface)}
.density-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;background:none;border:none;
  border-right:1px solid var(--hairline);color:var(--muted);font:inherit;font-size:.84rem;font-weight:600;
  cursor:pointer}
.density-btn:last-child{border-right:none}
.density-btn:hover{color:var(--ink)}
.density-btn[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 16%,transparent);
  color:var(--gold-bright)}
.density-btn svg{flex:none}

/* compact grid mode */
#item-grid.is-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#item-grid.is-grid .item-card{padding:12px 10px;gap:0;align-items:center;text-align:center}
#item-grid.is-grid .item-desc,
#item-grid.is-grid .item-builds{display:none}
#item-grid.is-grid .item-head{flex-direction:column;gap:8px;align-items:center;width:100%}
#item-grid.is-grid .item-head img{width:44px;height:44px}
#item-grid.is-grid .item-title{text-align:center;width:100%}
#item-grid.is-grid .item-title h3{font-size:.86rem;line-height:1.3}
#item-grid.is-grid .item-cost{font-size:.76rem}
#item-grid.is-grid .item-cost .muted{display:none}
@media (max-width:520px){
  #item-grid.is-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .density-btn span{display:none}
  .density-btn{padding:9px 11px}
}

/* ---- 24. GUIDES ----
   Two kinds of guide, and the card says which at a glance: mechanics come
   from client data, strategy waits for real games. */
.guide-card{display:flex;flex-direction:column;gap:8px;position:relative}
.guide-card h3{margin:0;font-size:1.05rem}
.guide-card p{margin:0;font-size:.89rem;color:var(--ink-2);flex:1}
.guide-kind{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700}
.guide-kind-mechanics{color:var(--gold)}
.guide-kind-strategy{color:#c2a7ed}
.guide-state{margin-top:4px}
.guide-card::after{content:"";position:absolute;inset:auto 12px 12px auto;width:14px;height:14px;
  border-right:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent);opacity:0;transition:opacity .18s}
.guide-card:hover::after{opacity:1}

.vision-card{display:flex;gap:13px;align-items:flex-start}
.vision-card img{border-radius:6px;border:1px solid var(--hairline-strong);background:var(--bg);flex:none}
.vision-card h3{margin:0 0 2px;font-size:.98rem}
.vision-card>div{min-width:0}
.vision-cost{margin:0 0 3px;font-family:var(--mono);font-size:.8rem;color:var(--gold);font-weight:700}

/* ---- 25. CHAMPION SCALING ----
   Applicability, not advice: what the kit can use, read from its own numbers. */
.scale-facts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:22px}
.scale-fact{padding:13px 15px;background:var(--surface);border:1px solid var(--hairline);
  border-left:3px solid var(--gold);border-radius:6px;display:flex;flex-direction:column;gap:3px}
.scale-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.scale-v{font-size:1.05rem;color:var(--ink)}
.scale-n{font-size:.78rem;color:var(--muted);line-height:1.45}
.scale-h{font-size:1rem;margin:0 0 10px}
.scale-ratios{display:flex;flex-direction:column;gap:7px}
.scale-ratio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 13px;background:var(--surface);border:1px solid var(--hairline);border-radius:5px}
.scale-ratio-key{width:24px;height:24px;display:grid;place-items:center;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--hairline-strong);font-family:var(--mono);
  font-weight:800;font-size:.74rem;color:var(--gold-bright)}
.scale-ratio-name{font-size:.92rem;color:var(--ink);min-width:0;overflow-wrap:break-word}
.scale-ratio-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:520px){
  .scale-ratio{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .scale-ratio-tags{grid-column:1/-1;justify-content:flex-start}
}
.change-ability{font-size:.86rem;color:var(--ink-2)}


/* =============================================================
   27. HOMEPAGE - reference-tool layout
   The visitor came to look one thing up. Order of the page is
   the order of that job: find a champion, then the tools that
   only exist here, then everything else.
   ============================================================= */

/* launch chip - the one time-sensitive fact on the page */
.launch-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;
  background:color-mix(in srgb,var(--gold) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  color:var(--gold-bright);font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700}
.launch-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 9px var(--gold-bright)}

/* hero find bar - a real input, not a button that opens a modal */
.hero-find{display:flex;align-items:center;gap:12px;max-width:620px;margin-top:6px;padding:6px 6px 6px 18px;
  background:var(--surface);border:1px solid var(--hairline-strong);border-left:3px solid var(--gold);
  border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.hero-find:focus-within{border-color:var(--gold)}
.hero-find>svg{width:20px;height:20px;color:var(--muted);flex:none}
.hero-find input{flex:1;min-width:0;background:none;border:none;color:var(--ink);font:inherit;
  font-size:1.02rem;padding:12px 0;outline:none}
.hero-find input::placeholder{color:var(--muted)}
.hero-find input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)}
.hero-find-all{flex:none;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:6px;color:var(--ink-2);
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.hero-find-all:hover{color:var(--ink);border-color:var(--hairline-strong)}
.hero-jump{margin-top:14px;font-size:.9rem;color:var(--muted)}
.hero-jump a{font-weight:600}
/* The find bar must never exceed the viewport: min-width:0 lets the flex
   children actually shrink, and the secondary button collapses to its kbd
   before disappearing entirely. Global search stays reachable from the header
   icon and the / key. */
.hero-find{flex-wrap:wrap}
@media (max-width:640px){
  .hero-find{padding-left:14px;gap:9px}
  .hero-find-all span{display:none}
  .hero-find-all{padding:10px 12px}
}
@media (max-width:430px){
  .hero-find-all{display:none}
  .hero-find{padding-right:14px}
}

/* roster - the answer to "I came here to look up a champion" */
.roster{padding-block:clamp(26px,4vw,44px)}
.roster-head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--hairline-strong)}
.roster-head h2{margin:0}
.roster-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.roster-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 6px 9px;
  border:1px solid var(--hairline);border-radius:6px;background:var(--surface);color:var(--ink-2);
  transition:border-color .15s,transform .12s,background .15s,color .15s}
.roster-tile:hover{text-decoration:none;border-color:var(--gold);color:var(--ink);
  background:var(--surface-2);transform:translateY(-2px)}
.roster-portrait{width:56px;height:56px;border-radius:6px;border:1px solid var(--hairline-strong);
  background:var(--bg)}
.roster-name{font-size:.78rem;font-weight:600;text-align:center;line-height:1.25;overflow-wrap:anywhere}
.roster-empty{margin-top:16px}
@media (max-width:520px){
  .roster-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
  .roster-portrait{width:46px;height:46px}
  .roster-name{font-size:.72rem}
}

/* pillars - the three things that exist only here */
.pillars{padding-block:clamp(26px,4vw,48px)}
.pillar-grid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pillar{position:relative;display:flex;flex-direction:column;padding:clamp(18px,2.4vw,26px);
  color:var(--ink);border:1px solid var(--hairline-strong);border-top:2px solid var(--gold);
  border-radius:6px;background:linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 62%,var(--surface)),var(--surface));
  box-shadow:var(--shadow-sm);transition:border-color .18s,transform .18s,box-shadow .18s}
a.pillar:hover{text-decoration:none;border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.26)}
.pillar h3{margin:.3rem 0 .5rem;font-family:var(--display);font-size:1.35rem;line-height:1.2}
.pillar p{margin:0;color:var(--ink-2);font-size:.9rem}
.pillar-cta{margin-top:auto;padding-top:16px;font-weight:700;font-size:.86rem;color:var(--gold-bright)}
.pillar-lead{grid-column:span 1}
.pillar-lead h3{font-size:clamp(1.45rem,2.3vw,1.85rem)}

.pillar-guides{background:var(--surface)}
.pillar-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;flex:1}
.pillar-list li+li{border-top:1px solid var(--hairline)}
.pillar-list a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 2px;font-size:.88rem;font-weight:600;color:var(--ink)}
.pillar-list a:hover{text-decoration:none;color:var(--gold-bright)}
.pillar-list span{font-family:var(--mono);font-size:.68rem;color:var(--muted);white-space:nowrap}
@media (max-width:900px){
  .pillar-grid{grid-template-columns:1fr}
}

/* reference strip - everything else, without nine paragraphs about it */
.reference{padding-block:clamp(22px,3.5vw,40px)}
.reference-title{font-size:clamp(1.1rem,2vw,1.35rem);margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--hairline)}
.reference-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.ref-link{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--hairline);
  border-radius:5px;background:var(--surface);color:var(--ink)}
.ref-link:hover{text-decoration:none;border-color:var(--gold);background:var(--surface-2)}
.ref-link strong{font-size:.92rem}
.ref-link span{font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.03em}

/* Hover underline helper */
.hover-underline:hover,
.guide-title-link:hover .hover-underline,
a.hover-underline:hover {
  text-decoration: underline;
}

/* ---- community guide article ---- */
.community-guide-body{max-width:70ch;font-size:1.02rem;line-height:1.75;color:var(--ink-2)}
.community-guide-body p{margin:0 0 1.1em}
.community-guide-body p:first-child::first-letter{color:var(--gold-bright);font-family:var(--display);
  font-size:1.6em;line-height:1}

/* ---- author profile lists ---- */
.author-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.author-list li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:10px 2px;border-bottom:1px solid var(--hairline)}
.author-list li:last-child{border-bottom:none}
.author-list .muted{font-size:.82rem;white-space:nowrap}

.pill[disabled]{opacity:.4;cursor:default}
.pill[disabled]:hover{border-color:var(--hairline);color:var(--ink-2)}

/* ---- generic grid/details compact modes ---- */
.density-float{display:flex;justify-content:flex-end;margin:0 0 8px}
.density-float .density-btn{padding:5px 10px;font-size:.74rem;gap:4px}
#build-grid.is-compact{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
#build-grid.is-compact .build-card{min-height:0;padding:12px;gap:8px}
#build-grid.is-compact .build-card-items,#build-grid.is-compact .build-card-portrait{display:none}
#build-grid.is-compact .build-card-title{min-height:0;font-size:.9rem}
#champ-grid.is-compact{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
#champ-grid.is-compact .champ-card{min-height:0;padding:10px;align-items:center;text-align:center}
#champ-grid.is-compact .roles,#champ-grid.is-compact .champ-card-status{display:none}
#champ-grid.is-compact .name{font-size:.82rem}
#changes-densify.is-compact .change-diff{display:none}
#changes-densify.is-compact .change-entry{padding:8px 14px}
#runes-densify.is-compact .rune-group .table-wrap{max-width:none}
#runes-densify.is-compact table.data td,#runes-densify.is-compact table.data th{padding:6px 10px;font-size:.85rem}
#vs-grid.is-compact{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
#vs-grid.is-compact .champ-card{min-height:0;padding:10px;align-items:center;text-align:center}
#vs-grid.is-compact .roles{display:none}
#vs-grid.is-compact .name{font-size:.82rem}
.density-inline{margin:0}

/* ---- header Database dropdown (CSS-only, keyboard friendly) ---- */
.nav-drop{position:relative}
.nav-drop summary{list-style:none;cursor:pointer;color:var(--ink-2);padding:8px 12px;border-radius:4px;
  font-size:.9rem;font-weight:600;user-select:none}
.nav-drop summary::-webkit-details-marker{display:none}
.nav-drop summary::after{content:" BE";font-size:.7em;color:var(--muted)}
.nav-drop summary:hover,.nav-drop summary.is-active{color:var(--gold-bright)}
.nav-drop[open] summary{color:var(--ink)}
.nav-drop-panel{position:absolute;top:100%;left:0;min-width:190px;z-index:60;padding:8px;
  background:var(--surface);border:1px solid var(--hairline-strong);border-radius:8px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.nav-drop-panel a{display:block;padding:9px 12px;border-radius:5px}
@media (max-width:900px){
  .nav-drop,.nav-drop-panel{position:static;box-shadow:none;border:none;background:none;min-width:0}
  .nav-drop-panel{padding:0 0 0 14px}
}

/* ---- header hover panels: what each section holds, one hover away ---- */
.nav-item{position:relative;display:inline-flex}
.nav-parent{color:var(--ink-2);padding:8px 12px;border-radius:4px;font-size:.9rem;font-weight:600;cursor:default}
.nav-parent.is-active{color:var(--gold-bright);box-shadow:inset 0 -2px 0 var(--gold)}
.nav-hover{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:230px;
  margin-top:0;
  z-index:70;padding:12px;background:var(--surface);border:1px solid var(--hairline-strong);
  border-top:2px solid var(--gold);border-radius:0 0 8px 8px;box-shadow:var(--shadow);
  display:none;flex-direction:column;gap:2px}
.nav-item:hover .nav-hover,.nav-item:focus-within .nav-hover{display:flex}
/* invisible bridge so the cursor can travel from label to panel without a dead zone */
.nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;display:none}
.nav-item:hover::after{display:block}
.nav-hover p{margin:0 0 8px;font-size:.78rem;color:var(--muted);line-height:1.45}
.nav-hover a{display:block;padding:7px 9px;border-radius:5px;font-size:.86rem;color:var(--ink-2)}
.nav-hover a:hover{background:var(--surface-2);color:var(--gold-bright);text-decoration:none}
@media (max-width:900px){.nav-hover{display:none!important}.nav-parent{display:none}
  .nav-item{display:contents}}

/* ---- champion hover previews (roster page) ---- */
.champ-card.has-hover,.roster-tile.has-hover{position:relative}
.champ-hovercard{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:240px;z-index:80;padding:12px;background:var(--surface-strong,var(--surface));
  border:1px solid var(--hairline-strong);border-top:2px solid var(--gold);border-radius:8px;
  box-shadow:var(--shadow-lg,var(--shadow));display:none;pointer-events:none}
.champ-card.has-hover:hover .champ-hovercard,.champ-card.has-hover:focus-visible .champ-hovercard,.roster-tile.has-hover:hover .champ-hovercard,.roster-tile.has-hover:focus-visible .champ-hovercard{display:block}
.hv-head{display:flex;gap:10px;align-items:center;margin-bottom:9px}
.hv-portrait{border-radius:6px;border:1px solid var(--hairline-strong)}
.hv-head b{display:block;font-size:.95rem;color:var(--ink)}
.hv-head span{font-size:.72rem;color:var(--muted)}
.hv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;padding:8px 0;
  border-block:1px solid var(--hairline);font-variant-numeric:tabular-nums}
.hv-stats div{display:flex;align-items:baseline;gap:7px;font-size:.78rem}
.hv-stats span{color:var(--muted);font-family:var(--mono);font-size:.64rem;width:26px;flex:none;text-align:right}
.hv-stats b{color:var(--ink)}
.hv-foot{margin-top:8px;font-size:.7rem;color:var(--muted)}
@media (hover:none){.champ-hovercard{display:none!important}}

/* ---- mega dropdown: full content-width panel with splash art ---- */
.site-header .nav{align-self:stretch;align-items:stretch}
.nav-item{position:static;display:inline-flex;align-items:center}
.nav-item::after{content:none}
.nav-hover{position:absolute;top:100%;left:50%;right:auto;transform:translateX(-50%);
  width:min(var(--maxw),96vw);min-width:0;display:none;flex-direction:row;gap:0;padding:0;
  background:var(--surface);border:1px solid var(--hairline-strong);border-top:2px solid var(--gold);
  border-radius:0 0 10px 10px;box-shadow:var(--shadow-lg,var(--shadow));overflow:hidden;z-index:70}
.nav-item:hover .nav-hover,.nav-item:focus-within .nav-hover{display:flex}
.nav-hover-body{flex:1;min-width:0;padding:22px clamp(18px,3vw,30px)}
.nav-hover-body p{margin:0 0 14px;font-size:.88rem;color:var(--muted);max-width:52ch;line-height:1.5}
.nav-hover-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px}
.nav-hover a{display:block;padding:9px 11px;border-radius:5px;font-size:.9rem;color:var(--ink-2);font-weight:600}
.nav-hover a:hover{background:var(--surface-2);color:var(--gold-bright);text-decoration:none}
.nav-hover-art{flex:0 0 300px;max-width:34%;object-fit:cover;object-position:center 18%;
  border-left:1px solid var(--hairline-strong);
  mask-image:linear-gradient(90deg,transparent,#000 22%)}
@media (max-width:900px){.nav-hover{display:none!important}.nav-parent{display:none}.nav-item{display:contents}}

/* mega-menu links: title + one-line sub, two comfortable columns */
.nav-hover-links{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.nav-hover a{padding:10px 12px;border:1px solid transparent}
.nav-hover a strong{display:block;font-size:.9rem;color:var(--ink)}
.nav-hover a span{display:block;margin-top:2px;font-size:.76rem;color:var(--muted);font-weight:400;line-height:1.4}
.nav-hover a:hover{background:var(--surface-2);border-color:var(--hairline)}
.nav-hover a:hover strong{color:var(--gold-bright)}
.nav-hover a:hover span{color:var(--ink-2)}
.nav-hover-body p{margin-bottom:12px}

/* ---- champion skins strip ---- */
.skin-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.skin-card{margin:0;flex:0 0 154px;scroll-snap-align:start}
.skin-card img{width:154px;height:280px;object-fit:cover;border-radius:8px;border:1px solid var(--hairline-strong);background:var(--bg)}
.skin-card figcaption{margin-top:6px;font-size:.78rem;color:var(--ink-2);text-align:center;line-height:1.3}

/* ---- standing character card on the champion hero ---- */
.champ-hero-model{position:absolute;z-index:1;right:clamp(16px,4vw,44px);bottom:16px;
  width:auto;height:calc(100% - 32px);max-height:300px;aspect-ratio:154/280;object-fit:cover;
  border-radius:10px;border:1px solid var(--hairline-strong);
  box-shadow:0 14px 40px rgba(0,0,0,.55);}
@media (max-width:760px){.champ-hero-model{display:none}}

.skin-card.is-classic img{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.skin-card figcaption .badge{font-size:.58rem;padding:1px 6px;margin-left:4px}
.skin-card-empty{width:154px;height:280px;display:grid;place-items:center;border:1px dashed var(--hairline-strong);border-radius:8px;background:var(--surface)}

/* ---- skin hover zoom: large centered preview ---- */
.skin-card{position:relative}
.skin-zoom{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  height:88vh;max-width:92vw;width:auto;object-fit:contain;z-index:220;border-radius:12px;
  border:1px solid var(--gold);box-shadow:0 30px 90px rgba(0,0,0,.75);pointer-events:none}

@media (hover:none){.skin-zoom{display:none!important}}

/* ---- item + rune hovercards ---- */
.item-card{position:relative}
.item-hovercard,.rune-hovercard{display:none;position:absolute;z-index:120;width:260px;padding:12px;
  background:var(--surface-strong,var(--surface));border:1px solid var(--hairline-strong);
  border-top:2px solid var(--gold);border-radius:8px;box-shadow:var(--shadow-lg,var(--shadow));
  pointer-events:none;text-align:left}
.item-hovercard{left:50%;bottom:calc(100% + 6px);transform:translateX(-50%)}
.item-card:hover .item-hovercard{display:block}
.item-hovercard .hv-head img,.rune-hovercard .hv-head img{border-radius:6px;border:1px solid var(--hairline-strong);background:var(--bg)}
.ihv-stats{display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 0;border-block:1px solid var(--hairline)}
.ihv-stats span{font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ihv-fx{margin:8px 0 0;font-size:.76rem;color:var(--muted);line-height:1.5}
.rune-cell.has-hover{position:relative}
.rune-cell.has-hover:hover .rune-hovercard{display:block}
.rune-hovercard{left:0;bottom:calc(100% + 8px);width:280px}
@media (hover:none){.item-hovercard,.rune-hovercard{display:none!important}}

/* ---- hero: rune wheel recedes, real builds fan over it ---- */
.hero-art{opacity:.38;filter:none}
.hero-builds{position:absolute;z-index:2;width:min(40vw,470px);
  right:max(4vw,calc((100vw - var(--maxw)) / 2));top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0;
  /* the whole hand is the hover zone - cards never slide out from under the
     cursor mid-gesture, which was the flicker */
  pointer-events:auto;padding:30px 20px}
.hero-build-card{pointer-events:auto;display:flex;flex-direction:column;gap:5px;width:290px;
  padding:13px 15px;background:color-mix(in srgb,var(--surface) 92%,transparent);
  border:1px solid var(--hairline-strong);border-left:3px solid var(--gold);border-radius:8px;
  color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.45);backdrop-filter:blur(4px);
  transition:transform .18s,border-color .18s}
/* calm stack: cards hold their fanned pose; hover = highlight + gentle grow */
.hero-build-card{transform-origin:50% 50%;
  transition:transform .22s ease-out,border-color .15s,box-shadow .22s}
.hb-0{transform:rotate(-6deg) translateX(-30px)}
.hb-1{transform:rotate(1deg);margin-top:-10px}
.hb-2{transform:rotate(7deg) translateX(26px);margin-top:-10px}
.hero-build-card:hover{border-color:var(--gold);z-index:3;text-decoration:none;
  box-shadow:0 20px 50px rgba(0,0,0,.55)}
.hb-0:hover{transform:rotate(-6deg) translateX(-30px) scale(1.035)}
.hb-1:hover{transform:rotate(1deg) scale(1.035)}
.hb-2:hover{transform:rotate(7deg) translateX(26px) scale(1.035)}
@media (prefers-reduced-motion:reduce){.hero-build-card{transition:border-color .15s}}
.hb-head{display:flex;align-items:center;gap:9px;min-width:0}
.hb-head b{font-size:.9rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-portrait{border-radius:6px;border:1px solid var(--hairline-strong);flex:none}
.hb-meta{font-size:.74rem;color:var(--muted)}
.hb-items{display:flex;gap:4px}
.hb-items img{border-radius:4px;border:1px solid var(--hairline-strong);background:var(--bg)}
.hero-builds-more{pointer-events:auto;margin-top:14px;font-size:.82rem;font-weight:700}
@media (max-width:900px){.hero-builds{display:none}}

/* Modern vs Classic nav: the page identity in miniature (blue -> gold) */
.nav a:has(.vs-mod){display:inline-flex;align-items:center;gap:6px}
.nav .vs-mod{color:var(--ink);font-weight:700}
.nav .vs-x{color:var(--muted);font-family:var(--mono);font-size:.6em;line-height:1;
  text-transform:uppercase;letter-spacing:.06em;transform:translateY(3px)}
.nav .vs-cls{color:var(--gold-bright);font-weight:700}
.nav a:hover .vs-cls{text-shadow:0 0 14px currentColor}

/* ---- skin lightbox: click to view large, arrows to browse ---- */
.skin-card[data-ls]{cursor:zoom-in}
.skin-zoom{display:none!important}
.skin-lightbox{position:fixed;inset:0;z-index:300;background:rgba(4,8,14,.88);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.skin-lightbox[hidden]{display:none}
.slb-img{height:90vh;width:auto;max-width:86vw;object-fit:contain;border-radius:12px;border:1px solid var(--gold);
  box-shadow:0 40px 120px rgba(0,0,0,.8)}
.slb-caption{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);margin:0;
  font-family:var(--display);font-size:1.15rem;color:var(--ink);
  background:rgba(4,8,14,.72);padding:8px 18px;border-radius:8px;border:1px solid var(--hairline-strong)}
.slb-close{position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:10px;
  background:var(--surface);border:1px solid var(--hairline-strong);color:var(--ink);
  font-size:1.6rem;line-height:1;cursor:pointer}
.slb-close:hover{border-color:var(--gold);color:var(--gold-bright)}
.slb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:76px;
  border-radius:10px;background:var(--surface);border:1px solid var(--hairline-strong);
  color:var(--ink);font-size:2.2rem;line-height:1;cursor:pointer}
.slb-arrow:hover{border-color:var(--gold);color:var(--gold-bright)}
.slb-prev{left:22px}.slb-next{right:22px}
@media (max-width:640px){.slb-arrow{width:42px;height:60px;font-size:1.7rem}.slb-prev{left:8px}.slb-next{right:8px}}

/* =============================================================
   28. HOMEPAGE WIKI MODULES
   Reddit feedback, absorbed: the homepage sections now share ONE
   container language - a bordered module with a visible header
   bar, like a classic wiki. News drops its showcase styling
   (gradients, clip-path, ping) and reads as a dated news box.
   ============================================================= */

/* shared module box: applied to each homepage section's inner wrap */
.roster .wrap,
.pillars .wrap,
.reference .wrap,
.rift-dispatch .wrap{
  background:var(--surface);
  border:1px solid var(--hairline-strong);
  border-radius:10px;
  padding:18px 22px 22px;
}
.roster,.pillars,.reference,.rift-dispatch{padding-block:14px}

/* header bars: span the box, sit flush at its top */
.roster-head,
.dispatch-heading,
.reference-title{
  margin:-18px -22px 18px;
  padding:12px 22px;
  background:var(--surface-2);
  border-bottom:1px solid var(--hairline-strong);
  border-radius:10px 10px 0 0;
}
.roster-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.roster-head h2,.dispatch-heading h2,.reference-title{font-size:1.15rem;margin:0}
.roster-head .eyebrow,.dispatch-heading .eyebrow{display:none}
.dispatch-heading{align-items:center;margin-bottom:16px}
.reference-title{display:block;border-bottom:1px solid var(--hairline-strong);padding-bottom:12px}

/* pillars: give the (visually-hidden-titled) section a real header */
.pillars .wrap::before{
  content:"Tools";
  display:block;
  margin:-18px -22px 18px;
  padding:12px 22px;
  background:var(--surface-2);
  border-bottom:1px solid var(--hairline-strong);
  border-radius:10px 10px 0 0;
  font-family:var(--display);
  font-size:1.15rem;
  font-weight:700;
  color:var(--ink);
}

/* ---- news: from showcase to news box ---- */
.rift-dispatch{background:none;border-block:none}
.rift-dispatch::before{content:none}                /* backdrop grid off */
.rift-dispatch .wrap{padding-block:18px}
.rift-dispatch-featured{
  min-height:0;
  clip-path:none;
  padding:16px 18px;
  background:var(--surface-2);
}
.rift-dispatch-featured h3{
  margin-top:8px;
  font-size:clamp(1.2rem,2vw,1.6rem);
  max-width:none;
}
.dispatch-card{
  background:var(--surface-2);
  border-left-width:3px;
  border-radius:6px;
  box-shadow:none;
}
.dispatch-card::before{content:none}                /* corner bracket off */
.dispatch-signal{box-shadow:none}
.dispatch-signal::after{animation:none;content:none}
.dispatch-summary{margin-bottom:10px}
.rift-dispatch-grid{gap:10px}
.dispatch-secondary{gap:10px}

/* ---- audit rail: demote to a compact strip ---- */
.audit-rail .wrap{padding-block:16px}
.audit-rail-head{padding-bottom:10px;gap:14px}
.audit-rail-head h2{font-size:1.05rem}
.audit-rail-head>p{font-size:.8rem}
.audit-metrics dd{font-size:1.15rem}
.audit-metrics>div{padding:10px 14px 0}

@media (max-width:700px){
  .roster .wrap,.pillars .wrap,.reference .wrap,.rift-dispatch .wrap{padding:14px 14px 16px}
  .roster-head,.dispatch-heading,.reference-title,.pillars .wrap::before{
    margin:-14px -14px 14px;padding:10px 14px}
}

/* =============================================================
   29. WIKI SIDEBAR - persistent left nav on wide screens.
   >=1280px: sidebar shows, the top mega-nav hides, content shifts
   right. Below that, everything behaves exactly as before.
   ============================================================= */
.site-sidebar{display:none}
@media (min-width:1280px){
  .site-sidebar{display:block;position:fixed;left:0;top:68px;bottom:0;width:216px;z-index:45;
    overflow-y:auto;padding:14px 12px 24px;background:var(--surface);
    border-right:1px solid var(--hairline-strong)}
  .site-header .nav{display:none}
  body{padding-left:216px}
  .site-header{padding-left:0}
}
.sb-group{padding:8px 0;border-bottom:1px solid var(--hairline)}
.sb-group:last-child{border-bottom:none}
.sb-head{display:block;padding:6px 10px 4px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.site-sidebar a{display:block;padding:7px 10px;border-radius:5px;font-size:.9rem;
  font-weight:600;color:var(--ink-2)}
.site-sidebar a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.site-sidebar a.is-active{background:color-mix(in srgb,var(--gold) 14%,transparent);
  color:var(--gold-bright);border-left:3px solid var(--gold);padding-left:7px}

/* ---- /classic/ FAQ ---- */
.faq-item{background:var(--surface);border:1px solid var(--hairline);border-radius:6px;padding:0}
.faq-item summary{cursor:pointer;padding:13px 16px;font-weight:700;color:var(--ink);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+ ";color:var(--gold);font-family:var(--mono)}
.faq-item[open] summary::before{content:"− "}
.faq-item p{margin:0;padding:0 16px 14px;color:var(--ink-2);font-size:.93rem;max-width:70ch}

/* ---- PBE tier watch (attributed third-party opinions) ---- */
.tw-consensus{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0}
.tw-n{font-family:var(--mono);font-size:.66rem;color:var(--gold);margin-left:6px}
.tw-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:6px}
.tw-source{padding:14px 16px;background:var(--surface);border:1px solid var(--hairline);border-radius:6px;border-top:2px solid var(--hairline-strong)}
.tw-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.tw-method{margin:0 0 10px;font-size:.78rem;color:var(--muted);line-height:1.45}

/* ---- Editorial Tier List ---- */
.tier-list-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.tier-row {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.tier-badge-col {
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.tier-badge-s {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}
.tier-badge-a {
  background: linear-gradient(135deg, #f39c12, #d35400);
}
.tier-badge-b {
  background: linear-gradient(135deg, #3498db, #2980b9);
}
.tier-badge-c {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
}
.tier-champs-col {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  flex-grow: 1;
}
.tier-champ-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease;
  width: 68px;
  text-align: center;
}
.tier-champ-item:hover {
  transform: translateY(-2px);
  color: var(--gold);
}
.tier-champ-name {
  font-size: 0.72rem;
  font-weight: 500;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Planner Item Blocks ---- */
.pl-blocks-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pl-block-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.pl-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pl-block-title-input {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--hairline-strong);
  padding: 4px 0;
  width: 250px;
  max-width: 100%;
}
.pl-block-title-input:focus {
  outline: none;
  border-bottom-color: var(--gold);
  color: var(--gold-bright);
}
.pl-block-delete-btn {
  font-size: 0.8rem;
  color: var(--red);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.pl-block-delete-btn:hover {
  opacity: 1;
}
.pl-block-note-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--hairline) 30%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 10px;
  resize: vertical;
  min-height: 50px;
  margin-top: 4px;
}
.pl-block-note-input:focus {
  outline: none;
  border-color: var(--gold);
  color: var(--ink);
}

/* ---- Planner Screenshot Upload & Guide Description Images ---- */
.pl-screenshot-zone {
  border: 2px dashed var(--hairline-strong);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  background: color-mix(in srgb, var(--hairline) 15%, transparent);
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pl-screenshot-zone.is-dragover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface-2));
}
.pl-screenshot-preview-card {
  position: relative;
  width: 140px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pl-screenshot-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: var(--bg);
}
.pl-screenshot-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pl-screenshot-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pl-screenshot-name {
  font-size: 0.7rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-screenshot-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: none;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  padding: 0;
  line-height: 1;
}
.pl-screenshot-remove:hover {
  background: #ff4d4d;
}
.pl-copy-tag-btn {
  font-size: 0.68rem;
  padding: 4px 6px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  color: var(--gold-bright);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease;
  font-family: var(--font-mono);
}
.pl-copy-tag-btn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* ---- Shared submission screenshots ---- */
.submission-screenshot-section {
  margin: 22px 0;
}
.submission-screenshot-zone {
  border: 2px dashed var(--hairline-strong);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  background: color-mix(in srgb, var(--hairline) 15%, transparent);
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.submission-screenshot-zone svg {
  width: 32px;
  height: 32px;
  opacity: 0.62;
}
.submission-screenshot-zone p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.88rem;
}
.submission-screenshot-zone.is-dragover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface-2));
}
.submission-screenshot-previews {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.submission-screenshot-preview-card {
  position: relative;
  width: 150px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.submission-screenshot-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: var(--bg);
}
.submission-screenshot-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.submission-screenshot-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.submission-screenshot-name {
  color: var(--ink-2);
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.submission-screenshot-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.submission-screenshot-remove:hover {
  background: #ff4d4d;
}
.submission-copy-tag-btn {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--gold-bright);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.submission-copy-tag-btn:hover {
  border-color: var(--gold);
}

/* ---- Flexible community guide editor ---- */
.guide-editor-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.guide-character-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.guide-character-count.is-over-limit {
  border-color: var(--red);
  color: var(--red);
}
.guide-section-list {
  display: grid;
  gap: 14px;
  margin: 14px 0;
}
.guide-section-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold-dim);
  border-radius: 8px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--gold) 5%, transparent), transparent 38%),
    var(--surface-2);
}
.guide-section-marker {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.guide-section-body-field {
  margin-top: 0;
}
.guide-section-body {
  min-height: 150px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 5px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}
.guide-section-body:focus {
  border-color: var(--gold);
}
.guide-section-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.guide-remove-section {
  margin-left: auto;
  color: var(--red);
}
.guide-section-card :is(input, textarea)[aria-invalid="true"] {
  border-color: var(--red);
}
.community-guide-section + .community-guide-section {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.community-guide-section h2 {
  margin-bottom: 12px;
}
.community-guide-image {
  margin: 20px 0;
}
.community-guide-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.community-guide-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.community-guide-gallery .community-guide-image {
  margin: 0;
}

@media (max-width: 620px) {
  .guide-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .guide-section-card {
    padding: 14px;
  }
  .guide-section-actions .btn {
    min-height: 40px;
  }
  .guide-remove-section {
    margin-left: 0;
  }
}
.guide-description img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  margin: 16px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  display: block;
}

@media not all {
/* =============================================================
   30. RIFT ARCHIVE
   Player-first homepage hierarchy inside an information-dense wiki shell.
   The original logo and static generator remain unchanged.
   ============================================================= */
:root{
  --archive-bg:#050b10;
  --archive-panel:#08141c;
  --archive-panel-2:#0b1b24;
  --archive-line:rgba(117,171,188,.2);
  --archive-gold:#d6b55f;
  --archive-blue:#62bad4;
}

.hero{
  min-height:clamp(520px,66vh,680px);
  padding-block:clamp(62px,9vw,112px);
  background:
    radial-gradient(circle at 74% 44%,rgba(52,139,166,.17),transparent 31%),
    linear-gradient(120deg,var(--archive-bg) 8%,#07131b 56%,#061019 100%);
  border-bottom:1px solid var(--archive-line);
}
.hero>.wrap{position:relative;z-index:3}
.hero-kicker{color:var(--archive-blue)}
.hero h1{
  max-width:12ch;
  font-family:var(--display,Georgia,"Times New Roman",serif);
  font-size:clamp(3rem,5.2vw,5.25rem);
  line-height:.96;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero .lead{max-width:52ch;font-size:clamp(1rem,1.5vw,1.18rem)}
.hero .hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 16px}
.hero-tier-link{padding:9px 4px;color:var(--archive-blue);font-weight:750}
.hero-tier-link::after{content:" ↗";font-family:var(--mono)}
.launch-chip{
  display:inline-flex;
  width:max-content;
  margin:12px 0 0;
  padding:5px 9px;
  border:1px solid color-mix(in srgb,var(--archive-gold) 38%,transparent);
  border-radius:4px;
  background:rgba(5,11,16,.72);
  color:var(--archive-gold);
  font-family:var(--mono);
  font-size:.66rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.launch-chip[data-launched="true"]{color:var(--archive-blue);border-color:rgba(98,186,212,.38)}

.hero-builds.hero-build-grid{
  position:absolute;
  z-index:4;
  top:50%;
  right:max(2.5vw,calc((100vw - var(--maxw)) / 2));
  width:min(48vw,570px);
  padding:0;
  transform:translateY(-47%);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-items:stretch;
}
.hero-build-grid .hero-build-card{
  position:relative;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
  transform:none;
  overflow:hidden;
  border:1px solid var(--archive-line);
  border-left:2px solid var(--archive-gold);
  border-radius:5px;
  background:linear-gradient(130deg,rgba(11,27,36,.97),rgba(5,14,20,.94));
  box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.hero-build-grid .hero-build-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--archive-gold) 74%,var(--archive-line));
  box-shadow:0 16px 36px rgba(0,0,0,.42);
}
.hero-build-grid .hb-link{display:block;padding:11px 12px;color:inherit}
.hero-build-grid .hb-link:hover{text-decoration:none}
.hero-build-grid .hb-head{gap:8px}
.hero-build-grid .hb-head b{font-family:var(--display,Georgia,serif);font-size:.82rem}
.hero-build-grid .hb-portrait{width:34px;height:34px;border-radius:3px}
.hero-build-grid .hb-meta{margin-left:42px;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.04em}
.hero-build-grid .hb-items{margin:8px 0 0 42px}
.hero-build-grid .hb-item{width:24px;height:24px;border-radius:2px}
.hero-build-grid .hb-score{
  position:absolute;
  right:9px;
  bottom:8px;
  color:var(--archive-blue);
  font:700 .65rem var(--mono);
}
.hero-build-grid .hero-builds-more{
  grid-column:1/-1;
  justify-self:end;
  margin:4px 2px 0;
  color:var(--archive-gold);
  font:700 .68rem var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.rift-tier-entry{
  border-bottom:1px solid var(--archive-line);
  background:
    linear-gradient(90deg,rgba(214,181,95,.06),transparent 38%),
    var(--archive-panel);
}
.rift-tier-entry .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:20px;
}
.rift-tier-entry .eyebrow{margin-bottom:2px;font-size:.62rem}
.rift-tier-entry h2{margin:0;font-family:var(--display,Georgia,serif);font-size:1.28rem}
.rift-tier-entry p{margin:3px 0 0;color:var(--muted);font-size:.84rem}

@media (min-width:1280px){
  .site-sidebar{
    background:
      linear-gradient(180deg,rgba(98,186,212,.035),transparent 30%),
      var(--archive-panel);
    border-right-color:var(--archive-line);
    scrollbar-width:thin;
    scrollbar-color:var(--archive-gold) var(--archive-panel);
  }
  .site-sidebar::-webkit-scrollbar{width:8px}
  .site-sidebar::-webkit-scrollbar-track{
    background:linear-gradient(180deg,var(--archive-panel),#061018);
    border-left:1px solid rgba(117,171,188,.08);
  }
  .site-sidebar::-webkit-scrollbar-thumb{
    min-height:42px;
    border:2px solid var(--archive-panel);
    border-radius:999px;
    background:linear-gradient(180deg,var(--archive-gold),var(--archive-blue));
  }
  .site-sidebar::-webkit-scrollbar-thumb:hover{background:var(--archive-gold)}
}
html{
  scrollbar-color:color-mix(in srgb,var(--archive-blue) 42%,var(--surface-2)) var(--archive-bg);
}
html::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--archive-gold) 58%,var(--surface-2)),
    color-mix(in srgb,var(--archive-blue) 45%,var(--surface-2)));
}

@media (max-width:1100px){
  .hero-builds.hero-build-grid{width:min(45vw,470px)}
  .hero-build-grid .hb-head b{font-size:.76rem}
  .hero-build-grid .hb-items{margin-left:0}
  .hero-build-grid .hb-meta{margin-left:0}
}
@media (max-width:900px){
  .hero{display:flex;flex-direction:column;min-height:auto;padding-bottom:24px}
  .hero>.wrap{order:1}
  .hero-builds.hero-build-grid{
    position:relative;
    order:2;
    top:auto;
    right:auto;
    width:min(100% - 32px,720px);
    margin:30px auto 0;
    padding:0;
    transform:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hero-build-grid .hero-builds-more{display:block}
}
@media (max-width:620px){
  .hero{padding-top:48px}
  .hero h1{font-size:clamp(2.65rem,13vw,4rem)}
  .hero .hero-actions{align-items:stretch}
  .hero .hero-actions .btn{flex:1 1 140px}
  .hero-tier-link{flex-basis:100%}
  .hero-builds.hero-build-grid{grid-template-columns:1fr}
  .rift-tier-entry .wrap{align-items:flex-start;flex-direction:column;gap:12px}
}

:root[data-theme="light"] .hero{
  background:
    radial-gradient(circle at 74% 44%,rgba(31,111,208,.12),transparent 31%),
    linear-gradient(120deg,#f6f1e4,#edf2f3);
}
:root[data-theme="light"] .hero-build-grid .hero-build-card{
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 28px rgba(30,40,50,.12);
}
:root[data-theme="light"] .rift-tier-entry{background:#f3efe4}

@media (prefers-reduced-motion:reduce){
  .hero-build-grid .hero-build-card,
  .hero-build-grid .hero-build-card:hover{transform:none}
}
@media (forced-colors:active){
  .hero,.rift-tier-entry,.hero-build-grid .hero-build-card{background:Canvas}
  .hero-build-grid .hero-build-card,.rift-tier-entry,.site-sidebar{border-color:CanvasText}
  .launch-chip,.hero-tier-link,.hero-build-grid .hb-score{color:LinkText}
}

/* =============================================================
   31. RIFT ARCHIVE - FAITHFUL HOMEPAGE
   Ryze-backed archive hero, compact utility shelf, and counted wiki rail.
   ============================================================= */
.archive-home{
  --archive-bg:#050b10;
  --archive-panel:#071620;
  --archive-panel-2:#0a1a24;
  --archive-ink:#f4efe2;
  --archive-muted:#8ea2ae;
  --archive-gold:#dab55e;
  --archive-gold-2:#f1d994;
  --archive-blue:#64bdd7;
  --archive-line:rgba(179,207,219,.15);
  color:var(--archive-ink);
  background-color:var(--archive-bg);
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:28px 28px;
}
.archive-home .archive-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:center;
  min-height:clamp(390px,48vw,560px);
  padding:0;
  overflow:hidden;
  border-bottom:1px solid rgba(218,181,94,.28);
  background:
    linear-gradient(90deg,#06121b 3%,rgba(6,18,27,.94) 34%,rgba(6,18,27,.74) 58%,rgba(6,18,27,.2) 100%),
    var(--hero-splash, url("/assets/img/champions/splash-original/ryze.jpg")) var(--hero-focus-d, 78% 26%)/cover no-repeat;
  box-shadow:inset 0 -90px 110px rgba(2,7,10,.32);
}
.archive-home .archive-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  right:clamp(-120px,4vw,64px);
  width:clamp(330px,38vw,540px);
  aspect-ratio:1;
  border:1px solid rgba(218,181,94,.22);
  border-radius:50%;
  box-shadow:
    0 0 0 14px rgba(218,181,94,.025),
    0 0 0 15px rgba(218,181,94,.08),
    0 0 0 54px rgba(100,189,215,.018);
  transform:translateY(-50%);
  pointer-events:none;
}
.archive-home .archive-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,8,12,.08),transparent 48%,rgba(2,8,12,.46)),
    radial-gradient(circle at 79% 46%,transparent 0 24%,rgba(4,12,18,.14) 54%,transparent 70%);
  pointer-events:none;
}
.archive-home .hero-art{display:none}
.archive-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  min-height:inherit;
}
.archive-hero-copy{
  width:min(760px,68%);
  padding-block:clamp(52px,7vw,88px);
}
.archive-hero-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#718993;
  font:700 .62rem/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.archive-hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.archive-hero-meta span+span::before{
  content:"";
  width:4px;
  height:4px;
  border:1px solid var(--archive-gold);
  transform:rotate(45deg);
}
.archive-home .archive-hero .hero-kicker{
  margin:0;
  color:var(--archive-blue);
  font:750 .7rem/1.2 var(--mono);
  letter-spacing:.16em;
}
.archive-home .archive-hero h1{
  max-width:11ch;
  margin:10px 0 15px;
  color:#fff;
  font-family:var(--display,Georgia,"Times New Roman",serif);
  font-size:clamp(3.65rem,6.6vw,6.5rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.058em;
  text-wrap:balance;
  text-shadow:0 8px 35px rgba(0,0,0,.92);
}
.archive-home .archive-hero .lead{
  max-width:58ch;
  margin:0;
  color:#bdd0d7;
  font-size:clamp(.98rem,1.25vw,1.12rem);
}
.archive-home .archive-hero .hero-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 0 0;
}
.archive-home .archive-hero .btn{
  min-height:39px;
  padding:9px 14px;
  border-radius:2px;
  font:800 .68rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.archive-home .archive-hero .btn-ghost{
  border-color:rgba(190,214,222,.3);
  background:rgba(5,14,20,.76);
  color:#d8e4e7;
}
.archive-home .archive-hero .hero-tier-link{
  padding:8px 4px;
  color:var(--archive-gold-2);
  font:800 .68rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.archive-mini-countdown{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  margin-top:15px;
  padding:4px 7px;
  border:1px solid rgba(218,181,94,.3);
  background:rgba(4,13,19,.68);
  color:#8da1aa;
  font:700 .6rem/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.archive-mini-countdown::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--archive-gold);
  box-shadow:0 0 10px rgba(218,181,94,.72);
}
.archive-mini-countdown b{
  color:#efd58d;
  font:inherit;
  font-variant-numeric:tabular-nums;
}
.archive-mini-countdown b[data-launched="true"]{color:var(--archive-blue)}

.archive-featured{
  padding-block:clamp(24px,3.5vw,38px);
  border-bottom:1px solid rgba(218,181,94,.2);
  background:
    linear-gradient(90deg,rgba(218,181,94,.035),transparent 38%),
    rgba(5,14,20,.82);
}
.archive-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:13px;
  padding-bottom:10px;
  border-bottom:1px solid var(--archive-line);
}
.archive-section-head .eyebrow{margin:0 0 3px;color:var(--archive-blue);font-size:.62rem}
.archive-section-head h2{
  margin:0;
  color:#eedcae;
  font-family:var(--display,Georgia,serif);
  font-size:clamp(1.45rem,2vw,1.8rem);
}
.archive-section-head p{margin:3px 0 0;color:#748995;font-size:.8rem}
.archive-section-head .hero-builds-more{
  flex:none;
  margin:0;
  color:var(--archive-blue);
  font:800 .65rem/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.archive-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.archive-home .archive-featured .hero-builds.hero-build-grid{
  position:static;
  width:auto;
  margin:0;
  padding:0;
  transform:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.archive-featured-grid .hero-build-card{
  position:relative;
  display:grid;
  grid-template-rows:1fr auto;
  width:auto;
  min-width:0;
  min-height:118px;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--archive-line);
  border-left:2px solid rgba(218,181,94,.72);
  border-radius:2px;
  background:linear-gradient(135deg,rgba(10,26,36,.97),rgba(6,17,24,.96));
  color:var(--archive-ink);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  backdrop-filter:none;
  transform:none;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.archive-featured-grid .hero-build-card:hover{
  z-index:auto;
  border-color:rgba(218,181,94,.68);
  box-shadow:0 15px 34px rgba(0,0,0,.34);
  transform:translateY(-2px);
}
.archive-featured-grid .hb-link{
  display:block;
  min-width:0;
  padding:10px 10px 8px;
  color:inherit;
}
.archive-featured-grid .hb-link:hover{text-decoration:none}
.archive-featured-grid .hb-head{display:flex;align-items:center;gap:8px;min-width:0}
.archive-featured-grid .hb-portrait{
  flex:none;
  width:38px;
  height:38px;
  border:1px solid rgba(218,181,94,.38);
  border-radius:1px;
  object-fit:cover;
}
.archive-featured-grid .hb-title{display:block;min-width:0}
.archive-featured-grid .hb-title b{
  display:block;
  overflow:hidden;
  color:#ead49c;
  font-family:var(--display,Georgia,serif);
  font-size:.87rem;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.archive-featured-grid .hb-title small{
  display:block;
  margin-top:3px;
  color:var(--archive-blue);
  font:700 .56rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.archive-featured-grid .hb-items{
  display:flex;
  gap:4px;
  margin:8px 0 0 46px;
  padding-top:7px;
  border-top:1px solid var(--archive-line);
}
.archive-featured-grid .hb-item{
  width:28px;
  height:28px;
  border:1px solid #4d6069;
  border-radius:1px;
  background:#111;
  object-fit:cover;
}
.hb-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:31px;
  padding:4px 8px 5px 10px;
  border-top:1px solid var(--archive-line);
  background:rgba(3,11,16,.34);
}
.hb-author,.hb-status{
  overflow:hidden;
  color:#718793;
  font:700 .54rem/1 var(--mono);
  letter-spacing:.06em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.hb-status{margin-left:auto;color:#b89b58}
.hb-votes{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:auto;
}
.hb-votes button{
  display:grid;
  place-items:center;
  width:23px;
  height:22px;
  padding:0;
  border:1px solid rgba(179,207,219,.17);
  border-radius:2px;
  background:#07141c;
  color:#8098a3;
  font-size:.55rem;
  cursor:pointer;
}
.hb-votes button:hover:not(:disabled),
.hb-votes button[aria-pressed="true"]{
  border-color:rgba(218,181,94,.58);
  color:var(--archive-gold-2);
  background:rgba(218,181,94,.1);
}
.hb-votes button:disabled{cursor:not-allowed;opacity:.46}
.hb-votes .hb-score{
  position:static;
  min-width:24px;
  color:var(--archive-blue);
  font:800 .62rem/1 var(--mono);
  text-align:center;
}
.hb-votes[data-unavailable="true"]{opacity:.72}

.archive-home .rift-tier-entry{
  border-color:var(--archive-line);
  background:
    linear-gradient(90deg,rgba(218,181,94,.07),transparent 42%),
    #081821;
}
.archive-home .rift-tier-entry h2{color:#ead8aa}
.archive-home .roster{background:rgba(5,13,19,.54)}
.archive-champion-find{margin:0 0 20px}

@media (min-width:1280px){
  .site-sidebar{
    top:60px;
    width:216px;
    padding:11px 10px 90px;
    border-right:1px solid rgba(218,181,94,.24);
    background:
      linear-gradient(180deg,rgba(100,189,215,.035),transparent 32%),
      linear-gradient(#081923,#06131c);
    scrollbar-width:thin;
    scrollbar-color:#8f8659 #06131c;
  }
  .site-sidebar::before{
    content:"";
    position:fixed;
    z-index:1;
    top:60px;
    bottom:0;
    left:0;
    width:2px;
    background:linear-gradient(var(--archive-gold),var(--archive-blue),transparent 92%);
    pointer-events:none;
  }
  .site-sidebar::-webkit-scrollbar{width:7px}
  .site-sidebar::-webkit-scrollbar-track{
    background:#06121a;
    border-left:1px solid rgba(100,189,215,.08);
  }
  .site-sidebar::-webkit-scrollbar-thumb{
    min-height:42px;
    border:2px solid #06121a;
    border-radius:999px;
    background:linear-gradient(180deg,var(--archive-gold),#547f8f 55%,var(--archive-blue));
  }
  .site-sidebar::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,var(--archive-gold-2),#6ea8b9 55%,#83d4e9);
  }
}
.sb-context{
  padding:10px;
  margin-bottom:7px;
  border:1px solid var(--archive-line);
  background:rgba(255,255,255,.018);
}
.sb-context span{
  display:block;
  color:var(--archive-blue);
  font:700 .55rem/1.2 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sb-context strong{
  display:block;
  margin-top:3px;
  color:#e9dcb7;
  font:700 .82rem/1.2 var(--display,Georgia,serif);
}
.sb-context small{display:block;margin-top:3px;color:#657b86;font-size:.61rem}
.site-sidebar .sb-group{
  padding:7px 0;
  border-bottom:1px solid var(--archive-line);
}
.site-sidebar .sb-head{
  padding:3px 8px 5px;
  color:#708590;
  font:700 .55rem/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.site-sidebar a{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:29px;
  padding:6px 8px;
  border-radius:3px;
  color:#a8b7bf;
  font-size:.73rem;
  font-weight:600;
}
.site-sidebar a::before{
  content:"";
  flex:none;
  width:4px;
  height:4px;
  border:1px solid #607783;
  transform:rotate(45deg);
}
.site-sidebar a>span:first-child{min-width:0}
.site-sidebar a:hover{
  background:rgba(255,255,255,.035);
  color:#dce6e9;
}
.site-sidebar a.is-active{
  padding-left:8px;
  border-left:0;
  background:linear-gradient(90deg,rgba(218,181,94,.15),transparent);
  box-shadow:inset 2px 0 var(--archive-gold);
  color:#f0dcaa;
}
.site-sidebar a.is-active::before{
  border-color:var(--archive-gold);
  background:var(--archive-gold);
}
.site-sidebar a.sb-featured{color:#eed58e}
.site-sidebar a.sb-featured::before{border-color:var(--archive-gold)}
.sb-count{
  margin-left:auto;
  color:#607682;
  font:700 .56rem/1 var(--mono);
}
.sb-ledger{
  position:sticky;
  bottom:-78px;
  margin-top:10px;
  padding:8px 9px;
  border:1px solid rgba(100,189,215,.24);
  background:#07141c;
  box-shadow:0 -10px 28px rgba(4,12,18,.72);
}
.sb-ledger span{
  display:block;
  color:var(--archive-blue);
  font:700 .53rem/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.sb-ledger strong{
  display:block;
  margin-top:3px;
  color:#e8d6a7;
  font:700 .94rem/1 var(--display,Georgia,serif);
  font-variant-numeric:tabular-nums;
}
.sb-ledger small{display:block;margin-top:3px;color:#718895;font-size:.56rem;line-height:1.3}

html{
  scrollbar-color:color-mix(in srgb,var(--archive-blue) 42%,var(--surface-2)) var(--archive-bg);
}
html::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--archive-gold) 58%,var(--surface-2)),
    color-mix(in srgb,var(--archive-blue) 45%,var(--surface-2)));
}

@media (max-width:900px){
  .archive-home .archive-hero{
    min-height:500px;
    background:
      linear-gradient(90deg,#06121b 0%,rgba(6,18,27,.94) 42%,rgba(6,18,27,.56) 100%),
      var(--hero-splash, url("/assets/img/champions/splash-original/ryze.jpg")) var(--hero-focus-t, 68% 28%)/cover no-repeat;
  }
  .archive-hero-copy{width:min(720px,86%)}
  .archive-featured-grid,
  .archive-home .archive-featured .hero-builds.hero-build-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:620px){
  .archive-home .archive-hero{
    min-height:510px;
    background:
      linear-gradient(90deg,rgba(6,18,27,.98),rgba(6,18,27,.78)),
      var(--hero-splash, url("/assets/img/champions/splash-original/ryze.jpg")) var(--hero-focus-m, 62% 28%)/cover no-repeat;
  }
  .archive-hero-copy{width:100%;padding-block:50px}
  .archive-hero-meta{flex-wrap:wrap}
  .archive-home .archive-hero h1{font-size:clamp(3.15rem,14.2vw,4.65rem)}
  .archive-home .archive-hero .hero-actions{align-items:stretch;flex-wrap:wrap}
  .archive-home .archive-hero .hero-actions .btn{flex:1 1 145px}
  .archive-home .archive-hero .hero-tier-link{flex-basis:100%}
  .archive-section-head{align-items:flex-start;flex-direction:column;gap:8px}
  .archive-featured-grid,
  .archive-home .archive-featured .hero-builds.hero-build-grid{
    grid-template-columns:1fr;
  }
  .archive-featured-grid .hero-build-card{min-height:112px}
  .archive-featured-grid .hb-items{margin-left:46px}
  .archive-home .rift-tier-entry .wrap{align-items:flex-start;flex-direction:column}
}

:root[data-theme="light"] .archive-home{
  color:var(--ink);
  background-color:#edf1f1;
  background-image:
    linear-gradient(rgba(31,76,91,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,76,91,.045) 1px,transparent 1px);
}
:root[data-theme="light"] .archive-home .archive-hero{
  background:
    linear-gradient(90deg,rgba(244,240,225,.98) 3%,rgba(238,239,228,.88) 50%,rgba(226,236,235,.22)),
    var(--hero-splash, url("/assets/img/champions/splash-original/ryze.jpg")) var(--hero-focus-d, 78% 26%)/cover no-repeat;
}
:root[data-theme="light"] .archive-home .archive-hero h1{color:#18272d;text-shadow:0 4px 22px rgba(255,255,255,.78)}
:root[data-theme="light"] .archive-home .archive-hero .lead{color:#405963}
:root[data-theme="light"] .archive-featured{background:rgba(246,244,236,.9)}
:root[data-theme="light"] .archive-featured-grid .hero-build-card{background:rgba(255,255,255,.95);color:var(--ink)}
:root[data-theme="light"] .archive-featured-grid .hb-title b{color:#6f5520}
:root[data-theme="light"] .hb-card-foot{background:#f1eee4}

@media (prefers-reduced-motion:reduce){
  .archive-featured-grid .hero-build-card,
  .archive-featured-grid .hero-build-card:hover{transform:none}
}
@media (forced-colors:active){
  .archive-home,.archive-home .archive-hero,.archive-featured,
  .archive-featured-grid .hero-build-card,.archive-home .rift-tier-entry,
  .site-sidebar,.sb-context,.sb-ledger{background:Canvas}
  .archive-featured-grid .hero-build-card,.archive-home .rift-tier-entry,
  .site-sidebar,.sb-context,.sb-ledger,.hb-votes button{border-color:CanvasText}
  .archive-home .archive-hero h1,.archive-featured-grid .hb-title b{color:CanvasText}
  .archive-home .archive-hero .hero-kicker,.archive-mini-countdown b,
  .archive-section-head .hero-builds-more,.hb-votes .hb-score{color:LinkText}
}
}

/* =============================================================
   30. RIFT ARCHIVE - COHESIVE HOMEPAGE
   One geometry system for the header, index rail, page modules, and footer.
   ============================================================= */
.archive-page{
  --archive-bg:#050b10;
  --archive-deep:#061019;
  --archive-rail:#071620;
  --archive-panel:#081720;
  --archive-panel-2:#0a1c26;
  --archive-panel-3:#0d222d;
  --archive-ink:#f4efe2;
  --archive-muted:#8ea2ae;
  --archive-gold:#dab55e;
  --archive-gold-2:#f1d994;
  --archive-blue:#64bdd7;
  --archive-line:rgba(179,207,219,.16);
  --archive-line-strong:rgba(218,181,94,.3);
  --archive-rail-width:224px;
  --archive-header-height:58px;
  background:var(--archive-bg);
}

/* Header: the unchanged logo owns the same column as the wiki rail. */
.archive-site-header{
  min-height:var(--archive-header-height);
  border-bottom:1px solid rgba(218,181,94,.26);
  background:color-mix(in srgb,var(--archive-deep) 96%,transparent);
  box-shadow:none;
  backdrop-filter:blur(12px);
}
.archive-site-header .wrap{
  width:100%;
  max-width:none;
  min-height:var(--archive-header-height);
  padding-inline:14px;
  gap:14px;
}
.archive-site-header .brand{
  min-width:0;
  color:var(--archive-ink);
  font-family:var(--display,Georgia,serif);
  font-size:1.08rem;
  white-space:nowrap;
}
.archive-site-header .brand .glyph{
  width:27px;
  height:27px;
}
.archive-site-header .search-launch{
  justify-content:flex-start;
  min-width:0;
  min-height:32px;
  border-color:rgba(218,181,94,.27);
  border-radius:1px;
  background:#07141d;
  color:#7f939d;
  font-size:.78rem;
}
.archive-site-header .search-launch:hover{
  border-color:rgba(218,181,94,.55);
  color:#bdcbd0;
}
.archive-site-header .search-launch>span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.archive-site-header .search-launch .kbd{
  border-radius:1px;
  background:#0b1b24;
}
.archive-site-header .archive-header-links{display:none}
.archive-site-header .account-control{
  min-height:32px;
  border-color:var(--archive-line);
  border-radius:1px;
  background:#07141d;
  color:#a8b7bf;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.archive-site-header .icon-btn{
  width:32px;
  height:32px;
  border-color:var(--archive-line);
  border-radius:1px;
  background:#07141d;
}
.archive-site-header a:focus-visible,
.archive-site-header button:focus-visible{
  outline:2px solid var(--archive-gold-2);
  outline-offset:2px;
}

/* Continuous archive surface behind every homepage module. */
.archive-home{
  min-width:0;
  color:var(--archive-ink);
  background-color:var(--archive-bg);
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:28px 28px;
}
.archive-home .archive-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:center;
  height:320px;
  min-height:320px;
  padding:0;
  overflow:hidden;
  border-bottom:1px solid rgba(218,181,94,.28);
  background:
    linear-gradient(90deg,#06121b 2%,rgba(6,18,27,.96) 34%,rgba(6,18,27,.72) 59%,rgba(6,18,27,.18) 100%),
    var(--hero-splash, url("/assets/img/champions/splash-original/ryze.jpg")) var(--hero-focus-d, 80% 15%)/cover no-repeat;
  box-shadow:inset 0 -72px 90px rgba(2,7,10,.34);
}
.archive-home .archive-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  right:7%;
  width:300px;
  height:300px;
  border:1px solid rgba(218,181,94,.22);
  border-radius:50%;
  box-shadow:
    0 0 0 12px rgba(218,181,94,.025),
    0 0 0 13px rgba(218,181,94,.075),
    0 0 0 46px rgba(100,189,215,.018);
  transform:translateY(-50%);
  pointer-events:none;
}
.archive-home .archive-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,8,12,.04),transparent 55%,rgba(2,8,12,.48)),
    radial-gradient(circle at 81% 48%,transparent 0 22%,rgba(4,12,18,.12) 52%,transparent 69%);
  pointer-events:none;
}
.archive-home .hero-art{display:none}
.archive-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  min-height:100%;
}
.archive-hero-copy{
  width:min(700px,64%);
  padding-block:28px;
}
.archive-hero-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 9px;
  font:700 .59rem/1 var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.archive-overline{color:var(--archive-blue)}
.archive-mini-countdown{
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:max-content;
  margin:0;
  padding:3px 6px;
  border:1px solid rgba(218,181,94,.3);
  border-radius:1px;
  background:rgba(4,13,19,.68);
  color:#8da1aa;
  font:700 .57rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.archive-mini-countdown::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--archive-gold);
  box-shadow:0 0 8px rgba(218,181,94,.66);
}
.archive-mini-countdown b{
  color:#efd58d;
  font:inherit;
  font-variant-numeric:tabular-nums;
}
.archive-mini-countdown b[data-launched="true"]{color:var(--archive-blue)}
.archive-home .archive-hero h1{
  max-width:11.5ch;
  margin:0 0 11px;
  color:#fff;
  font-family:var(--display,Georgia,"Times New Roman",serif);
  font-size:clamp(3.35rem,4.65vw,4.55rem);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.055em;
  text-wrap:balance;
  text-shadow:0 7px 30px rgba(0,0,0,.94);
}
.archive-home .archive-hero .lead{
  max-width:56ch;
  margin:0;
  color:#bdd0d7;
  font-size:.91rem;
  line-height:1.45;
}
.archive-home .archive-hero .hero-actions{
  display:flex;
  align-items:center;
  gap:7px;
  margin:15px 0 0;
}
.archive-home .archive-hero .btn{
  min-height:34px;
  padding:8px 11px;
  border-radius:1px;
  font:800 .61rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.archive-home .archive-hero .btn-ghost{
  border-color:rgba(190,214,222,.3);
  background:rgba(5,14,20,.76);
  color:#d8e4e7;
}
.archive-home .archive-hero .hero-tier-link{
  padding:8px 4px;
  color:var(--archive-gold-2);
  font:800 .61rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.archive-home .archive-hero .hero-tier-link::after{
  content:" ↗";
  font-family:var(--mono);
}

/* Six complete build records: useful before either ranking script runs. */
.archive-featured{
  padding-block:18px 21px;
  border-bottom:1px solid rgba(218,181,94,.2);
  background:
    linear-gradient(90deg,rgba(218,181,94,.035),transparent 38%),
    rgba(5,14,20,.84);
}
.archive-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--archive-line);
}
.archive-section-head .eyebrow{
  margin:0 0 2px;
  color:var(--archive-blue);
  font-size:.56rem;
}
.archive-section-head h2{
  margin:0;
  color:#eedcae;
  font-family:var(--display,Georgia,serif);
  font-size:1.35rem;
}
.archive-section-head p{
  margin:2px 0 0;
  color:#748995;
  font-size:.71rem;
}
.archive-section-head .hero-builds-more{
  flex:none;
  margin:0;
  color:var(--archive-blue);
  font:800 .59rem/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.archive-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.archive-home .archive-featured .hero-builds.hero-build-grid{
  position:static;
  width:auto;
  margin:0;
  padding:0;
  transform:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.archive-featured-grid .hero-build-card{
  position:relative;
  display:grid;
  grid-template-rows:1fr auto;
  width:auto;
  min-width:0;
  min-height:104px;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--archive-line);
  border-left:2px solid rgba(218,181,94,.72);
  border-radius:1px;
  background:linear-gradient(135deg,rgba(10,26,36,.98),rgba(6,17,24,.97));
  color:var(--archive-ink);
  box-shadow:none;
  backdrop-filter:none;
  transform:none;
  transition:border-color .16s,background .16s,transform .16s;
}
.archive-featured-grid .hero-build-card:hover{
  z-index:auto;
  border-color:rgba(218,181,94,.68);
  background:linear-gradient(135deg,rgba(13,32,43,.99),rgba(7,20,28,.98));
  box-shadow:none;
  transform:translateY(-1px);
}
.archive-featured-grid .hb-link{
  display:block;
  min-width:0;
  padding:8px 9px 6px;
  color:inherit;
}
.archive-featured-grid .hb-link:hover{text-decoration:none}
.archive-featured-grid .hb-head{display:flex;align-items:center;gap:7px;min-width:0}
.archive-featured-grid .hb-portrait{
  flex:none;
  width:34px;
  height:34px;
  border:1px solid rgba(218,181,94,.38);
  border-radius:1px;
  object-fit:cover;
}
.archive-featured-grid .hb-title{display:block;min-width:0}
.archive-featured-grid .hb-title b{
  display:block;
  overflow:hidden;
  color:#ead49c;
  font-family:var(--display,Georgia,serif);
  font-size:.79rem;
  line-height:1.12;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.archive-featured-grid .hb-title small{
  display:block;
  margin-top:3px;
  color:var(--archive-blue);
  font:700 .51rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.archive-featured-grid .hb-items{
  display:flex;
  gap:3px;
  margin:6px 0 0 41px;
  padding-top:6px;
  border-top:1px solid var(--archive-line);
}
.archive-featured-grid .hb-item{
  width:24px;
  height:24px;
  border:1px solid #4d6069;
  border-radius:1px;
  background:#111;
  object-fit:cover;
}
.archive-featured-grid .hb-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  min-height:27px;
  padding:3px 7px 4px 9px;
  border-top:1px solid var(--archive-line);
  background:rgba(3,11,16,.38);
}
.archive-featured-grid .hb-author,
.archive-featured-grid .hb-status{
  overflow:hidden;
  color:#718793;
  font:700 .49rem/1 var(--mono);
  letter-spacing:.06em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.archive-featured-grid .hb-status{margin-left:auto;color:#b89b58}
.archive-featured-grid .hb-votes{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:auto;
}
.archive-featured-grid .hb-votes button{
  display:grid;
  place-items:center;
  width:22px;
  height:20px;
  padding:0;
  border:1px solid rgba(179,207,219,.17);
  border-radius:1px;
  background:#07141c;
  color:#8098a3;
  font-size:.5rem;
  cursor:pointer;
}
.archive-featured-grid .hb-votes button:hover:not(:disabled),
.archive-featured-grid .hb-votes button[aria-pressed="true"]{
  border-color:rgba(218,181,94,.58);
  color:var(--archive-gold-2);
  background:rgba(218,181,94,.1);
}
.archive-featured-grid .hb-votes button:disabled{cursor:not-allowed;opacity:.46}
.archive-featured-grid .hb-votes .hb-score{
  position:static;
  min-width:22px;
  color:var(--archive-blue);
  font:800 .57rem/1 var(--mono);
  text-align:center;
}
.archive-featured-grid .hb-votes[data-unavailable="true"]{opacity:.72}
.archive-featured-grid a:focus-visible,
.archive-featured-grid button:focus-visible{
  outline:2px solid var(--archive-gold-2);
  outline-offset:-2px;
}

/* Immediate wayfinding between builds and the complete champion index. */
.archive-home .rift-tier-entry{
  border-bottom:1px solid var(--archive-line);
  background:
    linear-gradient(90deg,rgba(218,181,94,.075),transparent 46%),
    #081821;
}
.archive-home .rift-tier-entry .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding-block:16px;
}
.archive-home .rift-tier-entry .eyebrow{
  margin-bottom:2px;
  color:var(--archive-gold);
  font-size:.55rem;
}
.archive-home .rift-tier-entry h2{
  margin:0;
  color:#ead8aa;
  font-family:var(--display,Georgia,serif);
  font-size:1.18rem;
}
.archive-home .rift-tier-entry p{
  margin:2px 0 0;
  color:var(--archive-muted);
  font-size:.75rem;
}

/* Every lower homepage section uses the same archive module frame. */
.archive-home .roster,
.archive-home .pillars,
.archive-home .rift-dispatch,
.archive-home .audit-rail,
.archive-home .reference,
.archive-home .archive-support,
.archive-home .archive-alerts{
  padding-block:11px;
  border:0;
  background:none;
}
.archive-home .rift-dispatch::before{content:none}
.archive-home .roster .wrap,
.archive-home .pillars .wrap,
.archive-home .rift-dispatch .wrap,
.archive-home .audit-rail .wrap,
.archive-home .reference .wrap{
  padding:14px 16px 16px;
  border:1px solid var(--archive-line);
  border-radius:1px;
  background:rgba(7,20,28,.92);
  box-shadow:none;
}
.archive-home .roster-head,
.archive-home .dispatch-heading,
.archive-home .reference-title{
  margin:-14px -16px 12px;
  padding:9px 16px;
  border-bottom:1px solid var(--archive-line);
  border-radius:0;
  background:#0a1a24;
}
.archive-home .roster-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.archive-home .roster-head h2,
.archive-home .dispatch-heading h2,
.archive-home .reference-title{
  margin:0;
  color:#ead8aa;
  font-family:var(--display,Georgia,serif);
  font-size:1.08rem;
}
.archive-home .roster-head .eyebrow,
.archive-home .dispatch-heading .eyebrow{display:block;margin:0 0 2px;font-size:.51rem}
.archive-home .dispatch-archive-link{
  color:var(--archive-blue);
  font:700 .59rem/1 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Full roster, compact enough to scan as a wiki index. */
.archive-home .archive-champion-find{
  max-width:none;
  margin:0 0 11px;
  padding:4px 4px 4px 12px;
  border-color:var(--archive-line);
  border-left:2px solid var(--archive-blue);
  border-radius:1px;
  background:#06131b;
  box-shadow:none;
}
.archive-home .archive-champion-find input{font-size:.79rem}
.archive-home .archive-champion-find .hero-find-all{
  padding:8px 11px;
  border-radius:1px;
  font-size:.66rem;
}
.archive-home .roster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:5px;
}
.archive-home .roster-tile{
  gap:4px;
  min-width:0;
  padding:6px 3px 5px;
  border:1px solid var(--archive-line);
  border-radius:1px;
  background:#091923;
  color:#cad5d9;
}
.archive-home .roster-tile:hover{
  border-color:rgba(218,181,94,.58);
  background:#0c202a;
  box-shadow:none;
  transform:none;
}
.archive-home .roster-portrait{
  width:42px;
  height:42px;
  border-color:rgba(218,181,94,.3);
  border-radius:1px;
}
.archive-home .roster-name{
  overflow:hidden;
  max-width:100%;
  color:#cad5d9;
  font-size:.64rem;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Tools read as three adjacent archive drawers, not promotional cards. */
.archive-home .pillars .wrap::before{
  content:"Tools";
  display:block;
  margin:-14px -16px 12px;
  padding:9px 16px;
  border-bottom:1px solid var(--archive-line);
  border-radius:0;
  background:#0a1a24;
  color:#ead8aa;
  font:700 1.08rem/1.2 var(--display,Georgia,serif);
}
.archive-home .pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.archive-home .pillar{
  min-height:190px;
  padding:15px;
  border:1px solid var(--archive-line);
  border-left:2px solid rgba(218,181,94,.55);
  border-radius:1px;
  background:#091923;
  box-shadow:none;
}
.archive-home a.pillar:hover{
  border-color:rgba(218,181,94,.62);
  background:#0c202a;
  box-shadow:none;
  transform:none;
}
.archive-home .pillar .card-eyebrow{
  color:var(--archive-blue);
  font-size:.55rem;
}
.archive-home .pillar h3{
  margin:.25rem 0 .42rem;
  color:#ead8aa;
  font-size:1.18rem;
}
.archive-home .pillar p{color:#91a5ae;font-size:.78rem;line-height:1.5}
.archive-home .pillar-cta{
  padding-top:12px;
  color:var(--archive-gold-2);
  font:700 .65rem/1 var(--mono);
  text-transform:uppercase;
}
.archive-home .pillar-list{margin-top:4px}
.archive-home .pillar-list li+li{border-color:var(--archive-line)}
.archive-home .pillar-list a{padding:6px 0;color:#b9c7cc;font-size:.72rem}
.archive-home .pillar-list span{font-size:.55rem}

/* Sourced updates stay fully cited while using the same compact frame. */
.archive-home .rift-dispatch .wrap{padding-block:14px 16px}
.archive-home .dispatch-heading{
  display:flex;
  align-items:center;
  margin-bottom:10px;
}
.archive-home .rift-dispatch-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);
  gap:8px;
}
.archive-home .dispatch-secondary{
  display:grid;
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:6px;
}
.archive-home .dispatch-card{
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--archive-line);
  border-left:2px solid rgba(100,189,215,.66);
  border-radius:1px;
  background:#091923;
  box-shadow:none;
}
.archive-home .dispatch-card::before{content:none}
.archive-home .rift-dispatch-featured{
  min-height:270px;
  padding:18px;
  border-left-color:var(--archive-gold);
  clip-path:none;
  background:
    linear-gradient(145deg,rgba(13,34,45,.96),rgba(7,20,28,.98));
}
.archive-home .rift-dispatch-featured h3{
  max-width:19ch;
  margin-top:auto;
  color:#ead8aa;
  font-size:clamp(1.45rem,2.5vw,2.05rem);
}
.archive-home .dispatch-secondary .dispatch-card{padding:9px 11px}
.archive-home .dispatch-secondary .dispatch-card h3{
  margin:.18rem 0 .25rem;
  color:#d5dee1;
  font-size:.84rem;
  line-height:1.18;
}
.archive-home .dispatch-summary{
  margin:0 0 7px;
  color:#91a5ae;
  font-size:.7rem;
  line-height:1.4;
}
.archive-home .dispatch-secondary .dispatch-summary{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.archive-home .dispatch-meta{
  gap:6px;
  color:#6f8591;
  font-size:.54rem;
}
.archive-home .dispatch-source{
  gap:3px 8px;
  padding-top:7px;
  border-color:var(--archive-line);
  color:#718793;
  font-size:.54rem;
  line-height:1.35;
}
.archive-home .dispatch-source a{color:var(--archive-gold-2)}
.archive-home .dispatch-related{
  margin-top:6px;
  color:var(--archive-blue);
  font-size:.6rem;
}
.archive-home .dispatch-signal{
  width:6px;
  height:6px;
  flex-basis:6px;
  box-shadow:none;
}
.archive-home .dispatch-signal::after{content:none;animation:none}

/* Audit snapshot and reference links become compact ledger rows. */
.archive-home .audit-rail .wrap{padding-bottom:12px}
.archive-home .audit-rail-head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);
  align-items:end;
  gap:18px;
  margin:-14px -16px 0;
  padding:10px 16px;
  border-bottom:1px solid var(--archive-line);
  background:#0a1a24;
}
.archive-home .audit-rail-head .eyebrow{margin:0 0 2px;font-size:.51rem}
.archive-home .audit-rail-head h2{
  margin:0;
  color:#ead8aa;
  font-size:1rem;
}
.archive-home .audit-rail-head>p{
  margin:0;
  color:#80949d;
  font-size:.7rem;
}
.archive-home .audit-metrics{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin:0;
}
.archive-home .audit-metrics>div{
  padding:10px 11px 0;
  border-left:1px solid var(--archive-line);
}
.archive-home .audit-metrics>div:first-child{border-left:0;padding-left:0}
.archive-home .audit-metrics dt{
  color:#718793;
  font-size:.52rem;
}
.archive-home .audit-metrics dd{
  margin-top:2px;
  color:#d9cfb1;
  font-size:1.08rem;
}
.archive-home .reference-title{display:block}
.archive-home .reference-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.archive-home .ref-link{
  min-width:0;
  padding:10px 11px;
  border:1px solid var(--archive-line);
  border-radius:1px;
  background:#091923;
}
.archive-home .ref-link:hover{
  border-color:rgba(218,181,94,.58);
  background:#0c202a;
}
.archive-home .ref-link strong{color:#d7dee0;font-size:.78rem}
.archive-home .ref-link span{color:#718793;font-size:.54rem}

/* Support and email handoff use archive drawers instead of rounded promos. */
.archive-home .archive-support{padding-block:11px}
.archive-home .archive-support .card{
  padding:17px 18px;
  border-color:var(--archive-line);
  border-radius:1px;
  background:
    linear-gradient(90deg,rgba(218,181,94,.045),transparent 42%),
    rgba(7,20,28,.94);
  box-shadow:none;
}
.archive-home .archive-support .card-eyebrow{
  color:var(--archive-blue);
  font-size:.55rem;
}
.archive-home .archive-support .card p{font-size:.78rem!important;line-height:1.5}
.archive-home .archive-support .btn{
  border-radius:1px;
  font:700 .61rem/1 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.archive-home .archive-alerts{padding-block:11px 18px}
.archive-home .archive-alerts .cta{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
  gap:18px 30px;
  align-items:center;
  padding:22px 24px;
  border:1px solid var(--archive-line);
  border-left:2px solid var(--archive-blue);
  border-radius:1px;
  background:
    linear-gradient(115deg,rgba(100,189,215,.055),transparent 48%),
    rgba(7,20,28,.96);
  box-shadow:none;
  text-align:left;
}
.archive-home .archive-alerts .eyebrow{
  grid-column:1;
  align-self:end;
  margin:0 0 -13px;
  color:var(--archive-blue);
  font-size:.57rem;
}
.archive-home .archive-alerts h2{
  grid-column:1;
  margin:0;
  color:#ead8aa;
  font-size:clamp(1.55rem,2.8vw,2.35rem);
  line-height:1.05;
}
.archive-home .archive-alerts .lead{
  grid-column:1;
  margin:0!important;
  color:#8fa3ac;
  font-size:.78rem;
}
.archive-home .archive-alerts .capture{
  grid-column:2;
  grid-row:1/4;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
  max-width:none;
  margin:0;
  padding:15px;
  border:1px solid var(--archive-line);
  background:#06131b;
}
.archive-home .archive-alerts .capture input[type="email"]{
  width:100%;
  min-width:0;
  border-radius:1px;
  background:#091923;
}
.archive-home .archive-alerts .capture .btn{
  width:100%;
  border-radius:1px;
  font-size:.68rem;
}
.archive-home .archive-alerts .email-note,
.archive-home .archive-alerts .email-status{
  margin:0;
  color:#718793;
  font-size:.61rem;
}
.archive-home .archive-alerts .fineprint{
  grid-column:1;
  margin:0;
  color:#718793;
  font-size:.65rem;
}

/* Homepage footer aligns to the content column and closes the archive frame. */
.archive-page > .site-footer{
  margin-top:0;
  border-top:1px solid rgba(218,181,94,.24);
  background:#061019;
}
.archive-page > .site-footer .wrap{padding-block:24px 19px}
.archive-page > .site-footer .foot-grid{
  gap:22px;
  grid-template-columns:1.5fr repeat(3,1fr);
}
.archive-page > .site-footer .foot-col h4{
  margin-bottom:8px;
  color:#718793;
  font:700 .55rem/1 var(--mono);
  letter-spacing:.1em;
}
.archive-page > .site-footer .foot-col a{
  padding:3px 0;
  color:#9bacb4;
  font-size:.75rem;
}
.archive-page > .site-footer .foot-brand p{
  color:#718793;
  font-size:.72rem;
}
.archive-page > .site-footer .foot-bottom{
  margin-top:18px;
  padding-top:14px;
  border-color:var(--archive-line);
  color:#657b86;
  font-size:.66rem;
}

/* Wide archive shell: header spans both columns; rail and main meet exactly. */
@media (min-width:1280px){
  body.archive-page{padding-left:0}
  .archive-page > main,
  .archive-page > .site-footer{
    width:calc(100% - var(--archive-rail-width));
    margin-left:var(--archive-rail-width);
  }
  .archive-site-header .brand{
    flex:0 0 calc(var(--archive-rail-width) - 28px);
  }
  .archive-site-header .search-launch{
    flex:0 1 480px;
    width:clamp(300px,34vw,480px);
  }
  .archive-site-header .nav{display:none}
  .archive-site-header .archive-header-links{
    display:flex;
    align-items:center;
    gap:16px;
    margin-left:auto;
  }
  .archive-site-header .archive-header-links a{
    padding:4px 0;
    color:#91a3ac;
    font:800 .57rem/1 var(--mono);
    letter-spacing:.09em;
    text-transform:uppercase;
  }
  .archive-site-header .archive-header-links a:first-child{color:var(--archive-gold-2)}
  .archive-site-header .archive-header-links a:hover{color:#eef3f4;text-decoration:none}
  .archive-site-header .header-tools{margin-left:0}
  .archive-site-header .btn-discord{display:none}

  .archive-page .site-sidebar{
    top:var(--archive-header-height);
    bottom:0;
    width:var(--archive-rail-width);
    padding:10px 10px 18px;
    border-right:1px solid rgba(218,181,94,.24);
    background:
      linear-gradient(180deg,rgba(100,189,215,.035),transparent 32%),
      linear-gradient(#081923,#06131c);
    scrollbar-width:thin;
    scrollbar-color:#8f8659 #06131c;
  }
  .archive-page .site-sidebar::before{
    content:"";
    position:fixed;
    z-index:1;
    top:var(--archive-header-height);
    bottom:0;
    left:0;
    width:2px;
    background:linear-gradient(var(--archive-gold),var(--archive-blue),transparent 92%);
    pointer-events:none;
  }
  .archive-page .site-sidebar::-webkit-scrollbar{width:7px}
  .archive-page .site-sidebar::-webkit-scrollbar-track{
    background:#06121a;
    border-left:1px solid rgba(100,189,215,.08);
  }
  .archive-page .site-sidebar::-webkit-scrollbar-thumb{
    min-height:42px;
    border:2px solid #06121a;
    border-radius:999px;
    background:linear-gradient(180deg,var(--archive-gold),#547f8f 55%,var(--archive-blue));
  }
  .archive-page .site-sidebar::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,var(--archive-gold-2),#6ea8b9 55%,#83d4e9);
  }
  .archive-page .sb-context{
    padding:9px;
    margin-bottom:5px;
    border:1px solid var(--archive-line);
    background:rgba(255,255,255,.018);
  }
  .archive-page .sb-context span{
    display:block;
    color:var(--archive-blue);
    font:700 .51rem/1.2 var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .archive-page .sb-context strong{
    display:block;
    margin-top:3px;
    color:#e9dcb7;
    font:700 .79rem/1.2 var(--display,Georgia,serif);
  }
  .archive-page .sb-context small{
    display:block;
    margin-top:3px;
    color:#657b86;
    font-size:.56rem;
  }
  .archive-page .site-sidebar .sb-group{
    padding:6px 0;
    border-bottom:1px solid var(--archive-line);
  }
  .archive-page .site-sidebar .sb-head{
    padding:3px 8px 4px;
    color:#708590;
    font:700 .51rem/1 var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .archive-page .site-sidebar a{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:26px;
    padding:5px 8px;
    border-radius:2px;
    color:#a8b7bf;
    font-size:.67rem;
    font-weight:600;
  }
  .archive-page .site-sidebar a::before{
    content:"";
    flex:none;
    width:4px;
    height:4px;
    border:1px solid #607783;
    transform:rotate(45deg);
  }
  .archive-page .site-sidebar a>span:first-child{min-width:0}
  .archive-page .site-sidebar a:hover{
    background:rgba(255,255,255,.035);
    color:#dce6e9;
  }
  .archive-page .site-sidebar a.is-active{
    padding-left:8px;
    border-left:0;
    background:linear-gradient(90deg,rgba(218,181,94,.15),transparent);
    box-shadow:inset 2px 0 var(--archive-gold);
    color:#f0dcaa;
  }
  .archive-page .site-sidebar a.is-active::before{
    border-color:var(--archive-gold);
    background:var(--archive-gold);
  }
  .archive-page .site-sidebar a.sb-featured{color:#eed58e}
  .archive-page .site-sidebar a.sb-featured::before{border-color:var(--archive-gold)}
  .archive-page .site-sidebar a[href="/guides/submit/"]{color:#77c4da}
  .archive-page .site-sidebar a[href="/guides/submit/"]::before{border-color:var(--archive-blue)}
  .archive-page .sb-count{
    margin-left:auto;
    color:#607682;
    font:700 .51rem/1 var(--mono);
  }
  .archive-page .sb-ledger{
    position:static;
    margin:9px 0 0;
    padding:7px 8px;
    border:1px solid rgba(100,189,215,.24);
    background:#07141c;
    box-shadow:none;
  }
  .archive-page .sb-ledger span{
    display:block;
    color:var(--archive-blue);
    font:700 .49rem/1 var(--mono);
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .archive-page .sb-ledger strong{
    display:block;
    margin-top:3px;
    color:#e8d6a7;
    font:700 .86rem/1 var(--display,Georgia,serif);
    font-variant-numeric:tabular-nums;
  }
  .archive-page .sb-ledger small{
    display:block;
    margin-top:3px;
    color:#718895;
    font-size:.51rem;
    line-height:1.3;
  }
}

@media (max-width:1279px){
  .archive-site-header .wrap{
    max-width:var(--maxw);
    min-height:68px;
    padding-inline:clamp(16px,4vw,28px);
  }
  .archive-site-header .archive-header-links{display:none}
}

@media (max-width:900px){
  .archive-home .archive-hero{
    height:380px;
    min-height:380px;
    background:
      linear-gradient(90deg,#06121b 0%,rgba(6,18,27,.95) 44%,rgba(6,18,27,.52) 100%),
      var(--hero-splash, url("/assets/img/champions/splash-original/ryze.jpg")) var(--hero-focus-t, 68% 28%)/cover no-repeat;
  }
  .archive-hero-copy{width:min(680px,86%)}
  .archive-home .archive-hero h1{font-size:clamp(3.1rem,8vw,4.25rem)}
  .archive-featured-grid,
  .archive-home .archive-featured .hero-builds.hero-build-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .archive-home .pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .archive-home .pillar-guides{grid-column:1/-1;min-height:0}
  .archive-home .rift-dispatch-grid{grid-template-columns:1fr}
  .archive-home .rift-dispatch-featured{min-height:230px}
  .archive-home .dispatch-secondary{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:none;
  }
  .archive-home .reference-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .archive-home .archive-alerts .cta{grid-template-columns:1fr}
  .archive-home .archive-alerts .capture{
    grid-column:1;
    grid-row:auto;
  }
}

@media (max-width:700px){
  .archive-home .archive-hero{
    height:410px;
    min-height:410px;
  }
  .archive-home .archive-hero::before{right:-110px}
  .archive-hero-copy{width:94%}
  .archive-home .archive-hero h1{font-size:clamp(3rem,10vw,4rem)}
  .archive-home .roster .wrap,
  .archive-home .pillars .wrap,
  .archive-home .rift-dispatch .wrap,
  .archive-home .audit-rail .wrap,
  .archive-home .reference .wrap{
    padding:12px 12px 14px;
  }
  .archive-home .roster-head,
  .archive-home .dispatch-heading,
  .archive-home .reference-title,
  .archive-home .pillars .wrap::before{
    margin:-12px -12px 11px;
    padding-inline:12px;
  }
  .archive-home .audit-rail-head{
    grid-template-columns:1fr;
    gap:5px;
    margin:-12px -12px 0;
    padding-inline:12px;
  }
  .archive-home .audit-metrics{grid-template-columns:repeat(2,1fr)}
  .archive-home .audit-metrics>div{border-left:0;border-top:1px solid var(--archive-line)}
  .archive-home .audit-metrics>div:nth-child(odd){padding-left:0}
  .archive-home .reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .archive-home .dispatch-secondary{grid-template-columns:1fr}
  .archive-page > .site-footer .foot-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:620px){
  .archive-home .archive-hero{
    height:auto;
    min-height:440px;
    background:
      linear-gradient(90deg,rgba(6,18,27,.98),rgba(6,18,27,.8)),
      var(--hero-splash, url("/assets/img/champions/splash-original/ryze.jpg")) var(--hero-focus-m, 62% 28%)/cover no-repeat;
  }
  .archive-hero-copy{width:100%;padding-block:42px}
  .archive-hero-meta{align-items:flex-start;flex-direction:column;gap:7px}
  .archive-home .archive-hero h1{font-size:clamp(3rem,13.5vw,4.25rem)}
  .archive-home .archive-hero .hero-actions{align-items:stretch;flex-wrap:wrap}
  .archive-home .archive-hero .hero-actions .btn{flex:1 1 140px}
  .archive-home .archive-hero .hero-tier-link{flex-basis:100%}
  .archive-section-head{align-items:flex-start;flex-direction:column;gap:7px}
  .archive-featured-grid,
  .archive-home .archive-featured .hero-builds.hero-build-grid{
    grid-template-columns:1fr;
  }
  .archive-featured-grid .hero-build-card{min-height:101px}
  .archive-home .pillar-grid{grid-template-columns:1fr}
  .archive-home .pillar-guides{grid-column:auto}
  .archive-home .pillar{min-height:0}
  .archive-home .rift-tier-entry .wrap{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .archive-home .roster-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
  .archive-home .archive-champion-find{padding-left:9px}
  .archive-home .archive-champion-find .hero-find-all{width:100%;justify-content:center}
  .archive-home .archive-alerts .cta{padding:18px}
  .archive-home .archive-alerts .capture{padding:12px}
  .archive-page > .site-footer .foot-grid{grid-template-columns:1fr}
}

/* The archive remains readable when the user chooses the light theme. */
:root[data-theme="light"] .archive-page{background:#e8edec}
:root[data-theme="light"] .archive-site-header{
  border-bottom-color:rgba(105,79,25,.28);
  background:rgba(247,244,234,.96);
}
:root[data-theme="light"] .archive-site-header .brand{color:#26373d}
:root[data-theme="light"] .archive-site-header .search-launch,
:root[data-theme="light"] .archive-site-header .account-control,
:root[data-theme="light"] .archive-site-header .icon-btn{
  background:#edf0ea;
  color:#536972;
}
:root[data-theme="light"] .archive-home{
  color:var(--ink);
  background-color:#edf1f1;
  background-image:
    linear-gradient(rgba(31,76,91,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,76,91,.045) 1px,transparent 1px);
}
:root[data-theme="light"] .archive-home .archive-hero{
  background:
    linear-gradient(90deg,rgba(244,240,225,.98) 3%,rgba(238,239,228,.9) 51%,rgba(226,236,235,.2)),
    var(--hero-splash, url("/assets/img/champions/splash-original/ryze.jpg")) var(--hero-focus-d, 80% 15%)/cover no-repeat;
}
:root[data-theme="light"] .archive-home .archive-hero h1{
  color:#18272d;
  text-shadow:0 4px 22px rgba(255,255,255,.8);
}
:root[data-theme="light"] .archive-home .archive-hero .lead{color:#405963}
:root[data-theme="light"] .archive-home .roster .wrap,
:root[data-theme="light"] .archive-home .pillars .wrap,
:root[data-theme="light"] .archive-home .rift-dispatch .wrap,
:root[data-theme="light"] .archive-home .audit-rail .wrap,
:root[data-theme="light"] .archive-home .reference .wrap,
:root[data-theme="light"] .archive-home .archive-support .card,
:root[data-theme="light"] .archive-home .archive-alerts .cta{
  border-color:rgba(31,76,91,.18);
  background:rgba(249,248,242,.95);
}
:root[data-theme="light"] .archive-featured{background:rgba(246,244,236,.9)}
:root[data-theme="light"] .archive-featured-grid .hero-build-card,
:root[data-theme="light"] .archive-home .roster-tile,
:root[data-theme="light"] .archive-home .pillar,
:root[data-theme="light"] .archive-home .dispatch-card,
:root[data-theme="light"] .archive-home .ref-link{
  border-color:rgba(31,76,91,.17);
  background:rgba(255,255,255,.95);
  color:var(--ink);
}
:root[data-theme="light"] .archive-featured-grid .hb-title b,
:root[data-theme="light"] .archive-home .pillar h3,
:root[data-theme="light"] .archive-home .rift-dispatch-featured h3{
  color:#6f5520;
}
:root[data-theme="light"] .archive-featured-grid .hb-card-foot,
:root[data-theme="light"] .archive-home .roster-head,
:root[data-theme="light"] .archive-home .dispatch-heading,
:root[data-theme="light"] .archive-home .reference-title,
:root[data-theme="light"] .archive-home .pillars .wrap::before,
:root[data-theme="light"] .archive-home .audit-rail-head{
  background:#eef0e9;
}
:root[data-theme="light"] .archive-home .archive-champion-find,
:root[data-theme="light"] .archive-home .archive-alerts .capture{
  background:#f4f3eb;
}
:root[data-theme="light"] .archive-page .site-sidebar{
  background:linear-gradient(#eef2ef,#e7ece9);
  color:#314750;
}
:root[data-theme="light"] .archive-page > .site-footer{
  background:#e8ece8;
}

/* =============================================================
   31. RIFT ARCHIVE - READABILITY & LIGHT-MODE REFINEMENT
   ============================================================= */
.archive-page{
  --archive-rail-width:248px;
  --archive-header-height:64px;
  --archive-rail-half:124px;
  --archive-frame-half:640px;
  --maxw:1280px;
}

/* A roomier header and rail make the archive navigation readable at a glance. */
.archive-site-header{min-height:var(--archive-header-height)}
.archive-site-header .wrap{
  min-height:var(--archive-header-height);
  gap:16px;
}
.archive-site-header .brand{font-size:1.12rem}
.archive-site-header .brand .glyph{
  width:29px;
  height:29px;
}
.archive-site-header .search-launch{
  min-height:40px;
  padding:9px 13px;
  font-size:.88rem;
}
.archive-site-header .account-control{
  min-height:36px;
  font-size:.68rem;
}
.archive-site-header .icon-btn{
  width:36px;
  height:36px;
}

/* The taller hero keeps its metadata inside the overflow boundary. */
.archive-home .archive-hero{
  height:410px;
  min-height:410px;
}
.archive-hero-copy{
  width:min(760px,66%);
  padding-block:30px;
}
.archive-hero-meta{
  gap:12px;
  margin-bottom:11px;
  font-size:.69rem;
  line-height:1.2;
}
.archive-mini-countdown{
  padding:5px 8px;
  font-size:.67rem;
  line-height:1.15;
}
.archive-home .archive-hero .lead{
  max-width:60ch;
  font-size:1rem;
  line-height:1.5;
}
.archive-home .archive-hero .hero-actions{
  gap:9px;
  margin-top:18px;
}
.archive-home .archive-hero .btn{
  min-height:40px;
  padding:10px 14px;
  font-size:.7rem;
}
.archive-home .archive-hero .hero-tier-link{
  padding:10px 5px;
  font-size:.7rem;
}

@media (min-width:1280px){
  .archive-site-header .search-launch{
    flex:0 1 680px;
    width:clamp(420px,40vw,680px);
  }
  .archive-site-header .archive-header-links a{font-size:.66rem}
  .archive-page .site-sidebar{padding:12px 12px 22px}
  .archive-page > main.wrap{
    max-width:none;
    padding-inline:max(
      clamp(16px,4vw,28px),
      calc(
        50% - var(--archive-frame-half) - var(--archive-rail-half)
        + clamp(16px,4vw,28px)
      )
    );
  }
}

.archive-page .sb-context{padding:11px}
.archive-page .sb-context span{font-size:.62rem}
.archive-page .sb-context strong{font-size:.9rem}
.archive-page .sb-context small{
  font-size:.7rem;
  line-height:1.4;
}
.archive-page .site-sidebar .sb-group{padding:7px 0}
.archive-page .site-sidebar .sb-head{
  padding:4px 10px 5px;
  font-size:.62rem;
  line-height:1.15;
}
.archive-page .site-sidebar a{
  min-height:30px;
  padding:6px 10px;
  gap:8px;
  font-size:.8rem;
  line-height:1.35;
}
.archive-page .sb-count{font-size:.6rem}
.archive-page .sb-ledger{
  margin-top:11px;
  padding:10px;
}
.archive-page .sb-ledger span{font-size:.6rem}
.archive-page .sb-ledger strong{font-size:1rem}
.archive-page .sb-ledger small{
  font-size:.64rem;
  line-height:1.4;
}

/* Featured records stay compact, but no longer miniature. */
.archive-featured{padding-block:24px 27px}
/* Featured builds sits in a panel matching the Tier List callout below it, so
   their gold-accent left edges and right edges line up exactly instead of the
   builds content sitting inset while the tier box runs full width. */
.archive-home .archive-featured{background:none;border-bottom:0}
:root[data-theme="light"] .archive-home .archive-featured{background:none}
.archive-home .archive-featured>.wrap{
  padding:16px 22px 18px;
  border:1px solid var(--archive-line);
  border-left:2px solid var(--archive-gold);
  background:linear-gradient(90deg,rgba(218,181,94,.05),transparent 46%),var(--archive-panel);
}
.archive-section-head{
  margin-bottom:13px;
  padding-bottom:11px;
}
.archive-section-head .eyebrow{font-size:.67rem}
.archive-section-head h2{font-size:1.55rem}
.archive-section-head p:not(.eyebrow){
  color:#8fa3ad;
  font-size:.88rem;
  line-height:1.45;
}
.archive-section-head .hero-builds-more{font-size:.68rem}
.archive-featured-grid,
.archive-home .archive-featured .hero-builds.hero-build-grid{gap:12px}
.archive-featured-grid .hero-build-card{min-height:128px}
.archive-featured-grid .hb-link{padding:11px 12px 8px}
.archive-featured-grid .hb-head{gap:9px}
.archive-featured-grid .hb-portrait{
  width:42px;
  height:42px;
}
.archive-featured-grid .hb-title b{
  font-size:.96rem;
  line-height:1.18;
}
.archive-featured-grid .hb-title small{
  margin-top:4px;
  font-size:.61rem;
}
.archive-featured-grid .hb-items{
  gap:4px;
  margin:8px 0 0 51px;
  padding-top:8px;
}
.archive-featured-grid .hb-item{
  width:30px;
  height:30px;
}
.archive-featured-grid .hb-card-foot{
  min-height:34px;
  padding:5px 9px 6px 12px;
}
.archive-featured-grid .hb-author,
.archive-featured-grid .hb-status{font-size:.59rem}
.archive-featured-grid .hb-votes button{
  width:28px;
  height:26px;
  font-size:.65rem;
}
.archive-featured-grid .hb-votes .hb-score{
  min-width:26px;
  font-size:.68rem;
}

/* Tier List is a peer module, not a full-bleed interruption. */
.archive-home .rift-tier-entry{
  padding-block:14px;
  border:0;
  background:none;
}
.archive-home .rift-tier-entry .wrap{
  min-height:112px;
  padding:20px 22px;
  border:1px solid var(--archive-line);
  border-left:2px solid var(--archive-gold);
  background:
    linear-gradient(90deg,rgba(218,181,94,.065),transparent 46%),
    var(--archive-panel);
}
.archive-home .rift-tier-entry .eyebrow{font-size:.65rem}
.archive-home .rift-tier-entry h2{font-size:1.42rem}
.archive-home .rift-tier-entry p{
  font-size:.9rem;
  line-height:1.45;
}
.archive-home .rift-tier-entry .btn{
  min-height:42px;
  padding-inline:18px;
  font-size:.9rem;
}

/* The readability scale continues through every lower archive module. */
.archive-home .roster,
.archive-home .pillars,
.archive-home .rift-dispatch,
.archive-home .audit-rail,
.archive-home .reference,
.archive-home .archive-support,
.archive-home .archive-alerts{padding-block:15px}
.archive-home .roster .wrap,
.archive-home .pillars .wrap,
.archive-home .rift-dispatch .wrap,
.archive-home .audit-rail .wrap,
.archive-home .reference .wrap{
  padding:18px 20px 20px;
}
.archive-home .roster-head,
.archive-home .dispatch-heading,
.archive-home .reference-title{
  margin:-18px -20px 16px;
  padding:12px 20px;
}
.archive-home .roster-head .eyebrow,
.archive-home .dispatch-heading .eyebrow,
.archive-home .reference-title .eyebrow,
.archive-home .pillars .eyebrow,
.archive-home .audit-rail .eyebrow,
.archive-home .archive-support .card-eyebrow,
.archive-home .archive-alerts .eyebrow{font-size:.66rem}
.archive-home .roster-head h2,
.archive-home .dispatch-heading h2,
.archive-home .reference-title h2,
.archive-home .pillars h2,
.archive-home .audit-rail h2,
.archive-home .archive-support h2,
.archive-home .archive-alerts h2{font-size:1.35rem}
.archive-home .pillars .wrap::before,
.archive-home .reference-title{font-size:1.35rem}
.archive-home .archive-champion-find{
  min-height:42px;
  padding:7px 11px;
}
.archive-home .archive-champion-find input{font-size:.88rem}
.archive-home .roster-grid{gap:8px}
.archive-home .roster-tile{min-height:82px}
.archive-home .roster-portrait{
  width:48px;
  height:48px;
}
.archive-home .roster-name{
  font-size:.78rem;
  line-height:1.25;
}
.archive-home .pillar-grid{gap:12px}
.archive-home .pillar{padding:16px}
.archive-home .pillar h3{font-size:1.02rem}
.archive-home .pillar p{
  font-size:.88rem;
  line-height:1.55;
}
.archive-home .pillar-cta{font-size:.7rem}
.archive-home .pillar-list a{
  padding:8px 0;
  font-size:.82rem;
}
.archive-home .pillar-list span{font-size:.65rem}
.archive-home .rift-dispatch .wrap{padding:18px 20px 20px}
.archive-home .dispatch-card{padding:14px}
.archive-home .rift-dispatch-featured h3{font-size:1.35rem}
.archive-home .dispatch-secondary .dispatch-card{padding:12px 14px}
.archive-home .dispatch-secondary .dispatch-card h3{font-size:1rem}
.archive-home .dispatch-summary{
  font-size:.88rem;
  line-height:1.55;
}
.archive-home .dispatch-secondary .dispatch-summary{font-size:.82rem}
.archive-home .dispatch-meta,
.archive-home .dispatch-source,
.archive-home .dispatch-related,
.archive-home .dispatch-signal{font-size:.68rem}
.archive-home .audit-rail-head>p{
  font-size:.86rem;
  line-height:1.5;
}
.archive-home .audit-metrics dt{font-size:.66rem}
.archive-home .audit-metrics dd{font-size:1.25rem}
.archive-home .ref-link{min-height:72px}
.archive-home .ref-link strong{font-size:.9rem}
.archive-home .ref-link span{
  font-size:.7rem;
  line-height:1.35;
}
.archive-home .archive-support{padding-block:15px}
.archive-home .archive-support .card{padding:18px 20px}
.archive-home .archive-support .card p{
  font-size:.88rem!important;
  line-height:1.55;
}
.archive-home .archive-support .btn{min-height:42px}
.archive-home .archive-alerts{padding-block:15px 22px}
.archive-home .archive-alerts .cta{padding:22px}
.archive-home .archive-alerts .lead{
  font-size:.92rem;
  line-height:1.55;
}
.archive-home .archive-alerts .capture{padding:16px}
.archive-home .archive-alerts .capture input[type="email"]{font-size:.9rem}
.archive-home .archive-alerts .email-note,
.archive-home .archive-alerts .email-status,
.archive-home .archive-alerts .fineprint{font-size:.72rem}
.archive-page > .site-footer .foot-col h4{font-size:.72rem}
.archive-page > .site-footer .foot-col a{font-size:.82rem}
.archive-page > .site-footer .foot-brand p{font-size:.82rem}
.archive-page > .site-footer .foot-bottom{font-size:.72rem}

@media (max-width:900px){
  .archive-home .archive-hero{
    height:440px;
    min-height:440px;
  }
  .archive-hero-copy{
    width:min(720px,76%);
    padding-block:28px;
  }
}

@media (max-width:620px){
  .archive-home .archive-hero{
    height:500px;
    min-height:500px;
  }
  .archive-hero-copy{
    width:100%;
    padding-block:26px;
  }
  .archive-hero-meta{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .archive-featured{padding-block:22px 25px}
  .archive-featured-grid .hero-build-card{min-height:124px}
  .archive-home .rift-tier-entry .wrap{
    min-height:0;
    padding:18px;
  }
}

/* Light mode is a complete archive palette, not an inverted dark stylesheet. */
:root[data-theme="light"] .archive-page{
  --archive-ink:#1b2c33;
  --archive-muted:#526a74;
  --archive-gold:#7a5a18;
  --archive-gold-2:#604713;
  --archive-blue:#176b7d;
  --archive-line:rgba(31,76,91,.24);
  --archive-line-strong:rgba(122,90,24,.34);
  --archive-panel:#faf8f0;
  --archive-panel-2:#eef2ee;
  --archive-panel-3:#e5ece9;
  background:#e8edeb;
  color:var(--archive-ink);
}
:root[data-theme="light"] .archive-site-header{
  border-bottom-color:rgba(96,71,19,.34);
  background:rgba(249,247,239,.97);
}
:root[data-theme="light"] .archive-site-header .brand{color:#20343c}
:root[data-theme="light"] .archive-site-header .brand b{color:#725416}
:root[data-theme="light"] .archive-site-header .search-launch,
:root[data-theme="light"] .archive-site-header .account-control,
:root[data-theme="light"] .archive-site-header .icon-btn{
  border-color:rgba(31,76,91,.26);
  background:#edf1ed;
  color:#405962;
}
:root[data-theme="light"] .archive-site-header .search-launch:hover,
:root[data-theme="light"] .archive-site-header .account-control:hover,
:root[data-theme="light"] .archive-site-header .icon-btn:hover{
  border-color:#7a5a18;
  color:#1b2c33;
}
:root[data-theme="light"] .archive-site-header .search-launch .kbd{
  border-color:rgba(31,76,91,.28);
  background:#f8faf6;
  color:#294650;
}
:root[data-theme="light"] .archive-site-header .archive-header-links a{color:#4f6670}
:root[data-theme="light"] .archive-site-header .archive-header-links a:first-child{color:#654b14}
:root[data-theme="light"] .archive-site-header .archive-header-links a:hover{color:#172b33}

:root[data-theme="light"] .archive-page .site-sidebar{
  border-right-color:rgba(96,71,19,.28);
  background:linear-gradient(#eef2ef,#e4ebe7);
  color:#263e47;
  scrollbar-color:#7a6a3a #e4ebe7;
}
:root[data-theme="light"] .archive-page .site-sidebar::-webkit-scrollbar-track{
  border-left-color:rgba(31,76,91,.14);
  background:#e4ebe7;
}
:root[data-theme="light"] .archive-page .site-sidebar::-webkit-scrollbar-thumb{
  border-color:#e4ebe7;
  background:linear-gradient(180deg,#9a7424,#66828a 58%,#277f91);
}
:root[data-theme="light"] .archive-page .site-sidebar::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#7a5a18,#526f78 58%,#176b7d);
}
:root[data-theme="light"] .archive-page .sb-context{
  border-color:rgba(31,76,91,.22);
  background:#f8f7ef;
}
:root[data-theme="light"] .archive-page .sb-context span{color:#176b7d}
:root[data-theme="light"] .archive-page .sb-context strong{color:#263b43}
:root[data-theme="light"] .archive-page .sb-context small{color:#536b75}
:root[data-theme="light"] .archive-page .site-sidebar .sb-head{color:#4e6872}
:root[data-theme="light"] .archive-page .site-sidebar a{color:#304a54}
:root[data-theme="light"] .archive-page .site-sidebar a:hover{
  background:rgba(31,76,91,.08);
  color:#172c34;
}
:root[data-theme="light"] .archive-page .site-sidebar a.is-active{
  background:linear-gradient(90deg,rgba(122,90,24,.15),transparent);
  box-shadow:inset 2px 0 #7a5a18;
  color:#584313;
}
:root[data-theme="light"] .archive-page .site-sidebar a.sb-featured{color:#654b14}
:root[data-theme="light"] .archive-page .site-sidebar a[href="/guides/submit/"]{color:#176b7d}
:root[data-theme="light"] .archive-page .sb-count{color:#526b74}
:root[data-theme="light"] .archive-page .sb-ledger{
  border-color:rgba(23,107,125,.3);
  background:#f7f6ee;
}
:root[data-theme="light"] .archive-page .sb-ledger span{color:#176b7d}
:root[data-theme="light"] .archive-page .sb-ledger strong{color:#5e4714}
:root[data-theme="light"] .archive-page .sb-ledger small{color:#526b74}

:root[data-theme="light"] .archive-home{
  color:var(--archive-ink);
  background-color:#edf1ef;
}
:root[data-theme="light"] .archive-home .archive-hero{
  border-bottom-color:rgba(96,71,19,.3);
  background:
    linear-gradient(90deg,rgba(248,246,236,.98) 2%,rgba(242,243,234,.92) 46%,rgba(232,239,237,.32) 73%,rgba(222,232,232,.08)),
    var(--hero-splash, url("/assets/img/champions/splash-original/ryze.jpg")) var(--hero-focus-d, 80% 15%)/cover no-repeat;
  box-shadow:inset 0 -60px 80px rgba(28,48,56,.12);
}
:root[data-theme="light"] .archive-home .archive-hero::before{
  border-color:rgba(122,90,24,.24);
  box-shadow:
    0 0 0 12px rgba(122,90,24,.025),
    0 0 0 13px rgba(122,90,24,.08),
    0 0 0 46px rgba(23,107,125,.025);
}
:root[data-theme="light"] .archive-home .archive-hero::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 58%,rgba(26,49,58,.18)),
    radial-gradient(circle at 81% 48%,transparent 0 24%,rgba(34,60,70,.08) 54%,transparent 70%);
}
:root[data-theme="light"] .archive-overline{color:#176b7d}
:root[data-theme="light"] .archive-mini-countdown{
  border-color:rgba(122,90,24,.38);
  background:rgba(250,248,239,.9);
  color:#435e68;
}
:root[data-theme="light"] .archive-mini-countdown b{color:#654b14}
:root[data-theme="light"] .archive-home .archive-hero h1{
  color:#172c34;
  text-shadow:0 3px 22px rgba(255,255,255,.76);
}
:root[data-theme="light"] .archive-home .archive-hero .lead{color:#344f59}
:root[data-theme="light"] .archive-home .archive-hero .btn-ghost{
  border-color:rgba(31,76,91,.3);
  background:rgba(242,245,240,.92);
  color:#233d46;
}
:root[data-theme="light"] .archive-home .archive-hero .hero-tier-link{color:#654b14}

:root[data-theme="light"] .archive-featured{
  border-bottom-color:rgba(96,71,19,.2);
  background:#f5f3ea;
}
:root[data-theme="light"] .archive-section-head{border-color:rgba(31,76,91,.22)}
:root[data-theme="light"] .archive-section-head .eyebrow,
:root[data-theme="light"] .archive-section-head .hero-builds-more{color:#176b7d}
:root[data-theme="light"] .archive-section-head h2{color:#4f3d13}
:root[data-theme="light"] .archive-section-head p:not(.eyebrow){color:#4d6670}
:root[data-theme="light"] .archive-featured-grid .hero-build-card{
  border-color:rgba(31,76,91,.23);
  border-left-color:rgba(122,90,24,.72);
  background:#fffefa;
  color:#1b2c33;
}
:root[data-theme="light"] .archive-featured-grid .hero-build-card:hover{
  border-color:rgba(122,90,24,.58);
  background:#ffffff;
}
:root[data-theme="light"] .archive-featured-grid .hb-title b{color:#5b4310}
:root[data-theme="light"] .archive-featured-grid .hb-title small{color:#176b7d}
:root[data-theme="light"] .archive-featured-grid .hb-items{border-color:rgba(31,76,91,.18)}
:root[data-theme="light"] .archive-featured-grid .hb-card-foot{
  border-color:rgba(31,76,91,.18);
  background:#eef1eb;
}
:root[data-theme="light"] .archive-featured-grid .hb-author{color:#49636d}
:root[data-theme="light"] .archive-featured-grid .hb-status{color:#6a5015}
:root[data-theme="light"] .archive-featured-grid .hb-votes button{
  border-color:rgba(31,76,91,.24);
  background:#e5ece8;
  color:#314f59;
}
:root[data-theme="light"] .archive-featured-grid .hb-votes .hb-score{color:#176b7d}

:root[data-theme="light"] .archive-home .rift-tier-entry{background:none}
:root[data-theme="light"] .archive-home .rift-tier-entry .wrap{
  border-color:rgba(31,76,91,.24);
  border-left-color:#7a5a18;
  background:
    linear-gradient(90deg,rgba(122,90,24,.08),transparent 48%),
    #faf8f0;
  color:#1b2c33;
}
:root[data-theme="light"] .archive-home .rift-tier-entry .eyebrow{color:#705316}
:root[data-theme="light"] .archive-home .rift-tier-entry h2{color:#453711}
:root[data-theme="light"] .archive-home .rift-tier-entry p{color:#49636d}
:root[data-theme="light"] .archive-home .rift-tier-entry .btn{
  border-color:rgba(31,76,91,.26);
  background:#eef2ee;
  color:#1b2c33;
}

:root[data-theme="light"] .archive-home .roster .wrap,
:root[data-theme="light"] .archive-home .pillars .wrap,
:root[data-theme="light"] .archive-home .rift-dispatch .wrap,
:root[data-theme="light"] .archive-home .audit-rail .wrap,
:root[data-theme="light"] .archive-home .reference .wrap,
:root[data-theme="light"] .archive-home .archive-support .card,
:root[data-theme="light"] .archive-home .archive-alerts .cta{
  border-color:rgba(31,76,91,.23);
  background:#faf9f3;
  color:#1b2c33;
}
:root[data-theme="light"] .archive-home .roster-head,
:root[data-theme="light"] .archive-home .dispatch-heading,
:root[data-theme="light"] .archive-home .reference-title,
:root[data-theme="light"] .archive-home .pillars .wrap::before,
:root[data-theme="light"] .archive-home .audit-rail-head{
  border-color:rgba(31,76,91,.2);
  background:#e8eeea;
}
:root[data-theme="light"] .archive-home .roster-head h2,
:root[data-theme="light"] .archive-home .dispatch-heading h2,
:root[data-theme="light"] .archive-home .reference-title h2,
:root[data-theme="light"] .archive-home .pillars h2,
:root[data-theme="light"] .archive-home .audit-rail h2,
:root[data-theme="light"] .archive-home .archive-support h2,
:root[data-theme="light"] .archive-home .archive-alerts h2{color:#453711}
:root[data-theme="light"] .archive-home .pillars .wrap::before,
:root[data-theme="light"] .archive-home .reference-title{color:#453711}
:root[data-theme="light"] .archive-home .eyebrow{color:#176b7d}
:root[data-theme="light"] .archive-home .archive-champion-find,
:root[data-theme="light"] .archive-home .archive-alerts .capture{
  border-color:rgba(31,76,91,.23);
  background:#f0f3ee;
  color:#1b2c33;
}
:root[data-theme="light"] .archive-home .archive-champion-find input,
:root[data-theme="light"] .archive-home .archive-alerts .capture input{
  color:#1b2c33;
  background:#fffefa;
}
:root[data-theme="light"] .archive-home .roster-tile,
:root[data-theme="light"] .archive-home .pillar,
:root[data-theme="light"] .archive-home .dispatch-card,
:root[data-theme="light"] .archive-home .ref-link{
  border-color:rgba(31,76,91,.22);
  background:#fffefa;
  color:#1b2c33;
}
:root[data-theme="light"] .archive-home .roster-name{color:#2d4650}
:root[data-theme="light"] .archive-home .pillar h3,
:root[data-theme="light"] .archive-home .rift-dispatch-featured h3,
:root[data-theme="light"] .archive-home .dispatch-secondary .dispatch-card h3{color:#4f3d13}
:root[data-theme="light"] .archive-home .pillar p,
:root[data-theme="light"] .archive-home .pillar-list a,
:root[data-theme="light"] .archive-home .dispatch-summary,
:root[data-theme="light"] .archive-home .audit-rail-head>p,
:root[data-theme="light"] .archive-home .archive-support .card p,
:root[data-theme="light"] .archive-home .archive-alerts .lead,
:root[data-theme="light"] .archive-home .archive-alerts .fineprint{color:#49636d}
:root[data-theme="light"] .archive-home .pillar-cta,
:root[data-theme="light"] .archive-home .dispatch-related,
:root[data-theme="light"] .archive-home .dispatch-source a,
:root[data-theme="light"] .archive-home .archive-champion-find .hero-find-all{color:#176b7d}
:root[data-theme="light"] .archive-home .dispatch-meta,
:root[data-theme="light"] .archive-home .dispatch-source,
:root[data-theme="light"] .archive-home .dispatch-signal,
:root[data-theme="light"] .archive-home .audit-metrics dt,
:root[data-theme="light"] .archive-home .ref-link span,
:root[data-theme="light"] .archive-home .archive-alerts .email-note,
:root[data-theme="light"] .archive-home .archive-alerts .email-status{color:#526b74}
:root[data-theme="light"] .archive-home .dispatch-source{
  border-color:rgba(31,76,91,.2);
  background:#eef2ee;
}
:root[data-theme="light"] .archive-home .audit-metrics dd{color:#5b4310}
:root[data-theme="light"] .archive-home .ref-link strong{color:#2b424b}
:root[data-theme="light"] .archive-page > .site-footer{
  border-color:rgba(31,76,91,.2);
  background:#e5ebe7;
  color:#1b2c33;
}
:root[data-theme="light"] .archive-page > .site-footer .foot-col h4{color:#5b4310}
:root[data-theme="light"] .archive-page > .site-footer .foot-col a{color:#405b65}
:root[data-theme="light"] .archive-page > .site-footer .foot-brand p,
:root[data-theme="light"] .archive-page > .site-footer .foot-bottom{color:#526b74}

@media (prefers-reduced-motion:reduce){
  .archive-featured-grid .hero-build-card,
  .archive-featured-grid .hero-build-card:hover,
  .archive-home .roster-tile,
  .archive-home .roster-tile:hover,
  .archive-home a.pillar,
  .archive-home a.pillar:hover{
    transition:none;
    transform:none;
  }
}

@media (forced-colors:active){
  .archive-page,
  .archive-site-header,
  .archive-home,
  .archive-home .archive-hero,
  .archive-featured,
  .archive-featured-grid .hero-build-card,
  .archive-home .rift-tier-entry,
  .archive-home .roster .wrap,
  .archive-home .pillars .wrap,
  .archive-home .rift-dispatch .wrap,
  .archive-home .audit-rail .wrap,
  .archive-home .reference .wrap,
  .archive-home .archive-support .card,
  .archive-home .archive-alerts .cta,
  .archive-page .site-sidebar,
  .archive-page > .site-footer{
    background:Canvas;
    color:CanvasText;
  }
  .archive-site-header,
  .archive-featured-grid .hero-build-card,
  .archive-home .rift-tier-entry,
  .archive-home .roster .wrap,
  .archive-home .pillars .wrap,
  .archive-home .rift-dispatch .wrap,
  .archive-home .audit-rail .wrap,
  .archive-home .reference .wrap,
  .archive-home .archive-support .card,
  .archive-home .archive-alerts .cta,
  .archive-page .site-sidebar{
    border-color:CanvasText;
  }
  .archive-home .archive-hero h1,
  .archive-featured-grid .hb-title b{color:CanvasText}
  .archive-overline,
  .archive-mini-countdown b,
  .archive-section-head .hero-builds-more,
  .archive-featured-grid .hb-votes .hb-score{color:LinkText}
  .archive-page .site-sidebar{scrollbar-color:auto}
}

/* Decorative hero ring removed. display:none also neutralizes the left:0
   leak from the generic .hero::before{inset:0} rule (the section carries
   both .hero and .archive-hero classes). */
.archive-home .archive-hero::before{display:none}

/* ---- Ultimate Bravery (§30): the dare card ---- */
.ub-card{max-width:760px;padding:22px 24px}
.ub-head{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.ub-portrait{width:72px;height:72px;border-radius:10px;flex:none}
.ub-fate{margin:0 0 4px;font-size:1.45rem;line-height:1.2}
.ub-meta{margin:0;color:var(--muted)}
.ub-label{margin:18px 0 8px;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.ub-items{display:flex;flex-wrap:wrap;gap:12px}
.ub-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:76px;
  text-align:center;font-size:.72rem;line-height:1.25;color:var(--ink-2);text-decoration:none}
.ub-item img{width:48px;height:48px}
.ub-item:hover span{color:var(--gold-bright)}
.ub-spells{display:flex;gap:16px;align-items:center}
.ub-spell{display:inline-flex;align-items:center;gap:8px;font-size:.9rem}
.ub-spell img{width:36px;height:36px}
.ub-max{margin:0;font-size:.95rem}
.ub-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--hairline)}
@media (max-width:620px){
  .ub-head{flex-direction:row}
  .ub-items{gap:9px}
  .ub-item{width:64px}
}

/* ---- build view page (§31) + profile panel + draft cards ---- */
.bv-skills{display:flex;gap:4px;flex-wrap:wrap}
.bv-skill{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--hairline-strong);border-radius:6px;font-size:.78rem;font-weight:700;
  color:var(--gold-bright);background:var(--surface)}
.bv-skill.empty{opacity:.35;color:var(--muted)}
.bv-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:4px}
.bv-runes{list-style:none;margin:0;padding:0;font-size:.9rem}
.bv-runes li{padding:5px 0;border-bottom:1px solid var(--hairline)}
.bv-runes b{color:var(--gold-bright);margin-right:5px}
.account-profile-panel{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.pl-draft-card{position:relative;text-align:left}
.pl-draft-card .pl-draft-edit{position:absolute;top:10px;right:12px;font-style:normal;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border:1px solid var(--hairline-strong);border-radius:6px;padding:3px 8px}
.pl-draft-card:hover .pl-draft-edit{color:var(--gold-bright);border-color:var(--gold)}

/* ---- gold efficiency tables (§32) ---- */
.ge-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:10px}
.ge-table th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--hairline-strong);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);white-space:nowrap}
.ge-table td{padding:8px 12px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.ge-table td:last-child{white-space:normal}
.ge-table tbody tr:hover{background:color-mix(in srgb,var(--gold) 5%,transparent)}
.ge-table a{color:var(--ink);text-decoration:none}
.ge-table a:hover{color:var(--gold-bright)}

/* ---- build style tags (§33) ---- */
.build-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid var(--hairline-strong);color:var(--muted);margin-left:6px;vertical-align:2px}
.build-tag-meta{color:var(--gold-bright);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.build-tag-off-meta{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 45%,transparent)}
.build-tag-meme{color:#d98fff;border-color:color-mix(in srgb,#d98fff 45%,transparent)}
.build-tag-starter{color:var(--ink-2)}
#pl-tags .pill[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-bright)}

/* ---- mobile nav rework (§34): the sidebar IS the navigation, everywhere ----
   Below the desktop breakpoint the old top nav used to reappear (with none of
   the newer pages in it). Retired: every width now navigates through the same
   sidebar - fixed rail on desktop, hamburger drawer on everything else. */
.site-header .nav{display:none}
@media (max-width:1279px){
  .menu-btn{display:inline-grid}
  .site-sidebar.is-open{display:block;position:fixed;left:0;top:0;bottom:0;width:min(300px,85vw);
    z-index:90;overflow-y:auto;padding:18px 14px 28px;background:var(--surface);
    border-right:1px solid var(--hairline-strong);box-shadow:24px 0 60px rgba(0,0,0,.55)}
  body.sb-drawer-open{overflow:hidden}
  body.sb-drawer-open::after{content:"";position:fixed;inset:0;z-index:85;background:rgba(4,8,12,.55)}
  .site-sidebar.is-open{z-index:90}
}
/* The account button keeps its label on phones - an unlabeled dot is not a
   discoverable sign-in. */
@media (max-width:700px){
  .account-control{width:auto;padding:0 10px;justify-content:flex-start}
  .account-control [data-account-label]{display:inline}
}
/* Planner action bar stacks on small screens instead of cramming a row. */
@media (max-width:620px){
  .pl-actions{flex-direction:column;align-items:stretch;gap:8px}
  .pl-actions .btn{width:100%;margin:0}
  .pl-actions-gold{margin-right:0;display:flex;justify-content:space-between;align-items:center}
  .pl-sync-state{text-align:left}
}

/* ---- my saved builds page (§35) ---- */
.mb-card{display:flex;flex-direction:column;gap:10px}
.mb-card-main{display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none}
.mb-card-main:hover strong{color:var(--gold-bright)}
.mb-card-actions{display:flex;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--hairline)}
.mb-card-actions .btn{padding:6px 12px;font-size:.74rem}

/* ---- account panel rework (§36): the ledger treatment ---- */
.account-id{display:flex;align-items:center;gap:14px;margin:10px 0 16px}
.account-monogram{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  flex:none;border-radius:50%;font-family:var(--display);font-size:1.5rem;color:var(--gold-bright);
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--gold) 22%,var(--surface)),var(--surface));
  border:1px solid var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 14%,transparent)}
.account-id-text h2{margin:0;font-size:1.25rem}
.account-email{margin:3px 0 0;font:500 .76rem/1.2 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.account-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.account-stat{padding:10px 12px;border:1px solid var(--hairline-strong);border-radius:9px;
  background:color-mix(in srgb,var(--gold) 4%,var(--surface));display:flex;align-items:baseline;gap:8px}
.account-stat b{font-family:var(--display);font-size:1.35rem;color:var(--gold-bright);
  font-variant-numeric:tabular-nums}
.account-stat span{font:600 .68rem/1.2 var(--mono);text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.account-menu{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.account-menu a,.account-menu button{display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:10px 12px;border:none;border-left:2px solid transparent;border-radius:0 8px 8px 0;
  background:none;color:var(--ink);font:inherit;cursor:pointer;text-decoration:none}
.account-menu a:hover,.account-menu button:hover{background:color-mix(in srgb,var(--gold) 6%,transparent);
  border-left-color:var(--gold)}
.account-menu b{font-size:.9rem}
.account-menu span{font-size:.75rem;color:var(--muted)}
.account-menu a:hover b,.account-menu button:hover b{color:var(--gold-bright)}
.account-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline)}

/* ---- drawer polish (§37): left-docked mobile navigation drawer ---- */
@media (max-width:1279px){
  .site-sidebar.is-open{left:0;right:auto;border-left:none;
    border-right:1px solid var(--hairline-strong);
    box-shadow:24px 0 60px rgba(0,0,0,.55);background:var(--surface)}
  /* links become rows so the counts breathe instead of jamming the label */
  .site-sidebar.is-open a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:9px}
  .site-sidebar.is-open .sb-count{margin-left:auto;flex:none;font:700 .6rem/1 var(--mono);
    color:var(--muted);padding:3px 8px;border:1px solid var(--hairline-strong);border-radius:999px}
  .site-sidebar.is-open .sb-head{color:var(--gold);letter-spacing:.13em}
  .site-sidebar.is-open .sb-group{padding:10px 0}
  .site-sidebar.is-open a.is-active{border-left:3px solid var(--gold);padding-left:7px}
}

/* ---- planner ability legend (§38) ---- */
.pl-ability-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:12px;
  padding:10px 14px;border:1px solid var(--hairline);border-radius:9px;
  background:color-mix(in srgb,var(--gold) 3%,var(--surface))}
.pl-al-item{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-2)}
.pl-al-item img{width:28px;height:28px;border-radius:6px}
.pl-al-item b{font-family:var(--mono);font-size:.72rem;color:var(--gold-bright)}

/* ---- draft cards show their champion (§39) ---- */
.pl-draft-card,.mb-card-main{display:flex;align-items:center;gap:12px}
.mb-card{flex-direction:column;align-items:stretch}
.mb-card-portrait{width:44px;height:44px;border-radius:8px;flex:none}
.mb-card-text{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.mb-card-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-draft-card .pl-draft-edit{align-self:flex-start;margin-left:auto}
.mb-card-main{flex-direction:row}

/* ---------- 41. TIER LIST MAKER + COMMUNITY VIEWER ---------- */
[data-tm-signed-out] .banner{margin-bottom:16px}
.tm-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tm-board{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.tm-row{display:flex;align-items:stretch;border:1px solid var(--hairline);border-radius:12px;
  background:var(--surface);overflow:hidden;min-height:62px}
.tm-row.is-over{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.tm-row-label{flex:none;width:52px;display:grid;place-items:center;
  font:800 1.3rem/1 var(--display,inherit);color:#0b0d12}
.tm-row-s .tm-row-label{background:#e8b34b}
.tm-row-a .tm-row-label{background:#c96f3a}
.tm-row-b .tm-row-label{background:#8f9a5a}
.tm-row-c .tm-row-label{background:#5d7f9e}
.tm-row-d .tm-row-label{background:#6e6f7a}
.tm-row-cells{flex:1;display:flex;flex-wrap:wrap;gap:6px;padding:8px;align-items:center}
.tm-pool{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:10px;
  border:1px dashed var(--hairline-strong);border-radius:12px;min-height:60px}
.tm-pool.is-over{border-color:var(--gold)}
.tm-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;
  border:1px solid var(--hairline);border-radius:999px;background:var(--surface-2);
  color:var(--ink-2);font-size:.78rem;font-weight:700;cursor:grab}
.tm-chip img{width:34px;height:34px;border-radius:50%;display:block;object-fit:cover}
.tm-chip:hover{border-color:var(--gold);color:var(--gold-bright)}
.tm-chip.is-selected{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 45%,transparent)}
.tm-board.is-readonly .tm-chip{cursor:default}
.tm-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:620px){
  .tm-row-label{width:40px;font-size:1.1rem}
  .tm-chip span{display:none}
  .tm-chip{padding:3px}
  .tm-chip img{width:30px;height:30px}
}
.account-privacy-row{display:flex;gap:10px;align-items:flex-start;margin:4px 0 10px;
  padding:10px 12px;border:1px solid var(--hairline);border-radius:10px;cursor:pointer}
.account-privacy-row input{margin-top:3px;accent-color:var(--gold)}

/* ---------- 42. ACCOUNT CREATE: strength meter, hints, view switch ---------- */
.account-switch{margin:14px 0 6px;text-align:center;font-size:.85rem;color:var(--ink-2)}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--gold-bright,#e6c674);
  cursor:pointer;font-weight:700}
.linklike:hover{text-decoration:underline}
.account-security-link{display:block;margin-top:10px;padding:11px 14px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--gold) 35%,var(--hairline));
  background:color-mix(in srgb,var(--gold) 8%,var(--surface));
  color:var(--gold-bright,#e6c674);font-weight:700;font-size:.86rem;text-decoration:none}
.account-security-link:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--surface))}
.pw-meter{height:6px;border-radius:999px;background:var(--surface-2,#1a1d24);overflow:hidden;margin:2px 0 6px}
.pw-meter>span{display:block;height:100%;width:0;border-radius:999px;transition:width .2s,background .2s}
.pw-meter[data-score="1"]>span{width:25%;background:var(--red,#e66767)}
.pw-meter[data-score="2"]>span{width:50%;background:#e0a13a}
.pw-meter[data-score="3"]>span{width:75%;background:#d8c24a}
.pw-meter[data-score="4"]>span{width:100%;background:var(--green,#55bd83)}
.pw-meter[data-ok="true"]>span{background:var(--green,#55bd83)}
.pw-strength{margin:0 0 4px;font-size:.78rem;color:var(--ink-2);font-weight:700}
.pw-hints{margin:0 0 6px;padding-left:18px;list-style:disc;font-size:.78rem;color:var(--ink-2)}
.pw-hints:empty{display:none}
.pw-hints li{margin:2px 0}

/* Rotating hero: the featured build for whichever champion is showing. Sits
   under the hero actions; only the active champion's card displays (rules are
   generated per champion on the homepage). */
.hero-champ-build{align-items:center;gap:11px;padding:9px 14px 9px 9px;
  width:fit-content;max-width:100%;text-decoration:none;color:var(--ink);
  background:rgba(6,18,27,.55);border:1px solid rgba(218,181,94,.16);border-radius:10px;
  transition:border-color .15s ease,background .15s ease,transform .15s ease}
.hero-champ-build:hover{border-color:rgba(218,181,94,.5);background:rgba(6,18,27,.78);
  transform:translateY(-1px)}
.hero-champ-build .hcb-portrait{border-radius:7px;flex:none}
.hero-champ-build .hcb-text{display:flex;flex-direction:column;min-width:0}
.hero-champ-build .hcb-text small{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);opacity:.92}
.hero-champ-build .hcb-text b{font-size:.95rem;line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hero-champ-build .hcb-items{display:flex;gap:4px;flex:none;padding-left:9px;
  border-left:1px solid var(--hairline)}
.hero-champ-build .hcb-items img{border-radius:4px}
@media (max-width:620px){
  .hero-champ-build .hcb-items{display:none}
  .hero-champ-build{margin-top:16px}
}

/* Hero action row: three targets of different weights sat too tight together,
   and the featured-build card below them needs the hero to grow rather than
   clip. Give the row breathing space and let the hero size to its content. */
.archive-home .archive-hero{min-height:clamp(430px,50vw,590px)}
/* Matches the specificity of the existing .archive-home .archive-hero
   .hero-actions rule (which sets 9px) so this wins by source order. */
.archive-home .archive-hero .hero-actions{gap:16px;row-gap:12px;align-items:center;margin-top:24px}
.archive-home .archive-hero .hero-actions .btn{padding-inline:22px}
.archive-home .archive-hero .hero-actions .hero-tier-link{margin-left:4px}
@media (max-width:620px){
  .archive-home .archive-hero .hero-actions{gap:10px;row-gap:10px;margin-top:20px}
  .archive-home .archive-hero .hero-actions .btn{flex:1 1 auto;justify-content:center}
}

/* Hero vertical rhythm. The featured-build card sat 18px under the action row
   while the actions sat 24px under the lead - so the card read as a fourth
   button competing with the primary CTA instead of as its own element.
   Spacing now widens down the stack (tight copy -> actions -> card), which is
   what actually separates the groups. */
.archive-home .archive-hero .hero-actions{margin-top:28px}
.archive-home .archive-hero .hero-champ-build{margin-top:36px}
.archive-home .archive-hero .hero-champ-build .hcb-text small{font-size:.64rem;opacity:.8}
@media (max-width:620px){
  .archive-home .archive-hero .hero-champ-build{margin-top:24px}
}