/* WoW Forever hub: shared by every page under /companion/wowforever/ (2026-09-23).
   Same tokens as /companion/. Only this folder uses it, so nothing leaks to the rest of the site. */
:root{
  --ground:#0f0c0a; --panel:#17120f; --panel-2:#1d1712;
  --ink:#f2e8dc; --ink-2:#cfc2ad; --muted:#a98d5e; --muted-2:#8a7a63;
  --rule:#2a2016; --rule-2:#3a2c1c; --rule-3:#4a3a26;
  --gold:#d8ad4e; --gold-lt:#efc76b; --gold-dk:#8a6a24; --gold-ink:#1a1208;
  --sky:#8fb8d8; --leaf:#9cc27a; --ember:#e08a5a;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--gold-lt)}
h1,h2,h3{font-family:"Cinzel",Georgia,serif; font-weight:600; margin:0; text-wrap:balance; letter-spacing:0.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto; padding:0 60px}
section{padding:64px 0}
.dark{background:var(--panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
h2{font-size:32px; line-height:1.16}
h3{font-size:18px; line-height:1.3}
.lede{font-size:18px; color:var(--ink-2); margin-top:14px; max-width:64ch}
.eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.eyebrow span{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted)}
.eyebrow i{width:26px; height:1px; background:var(--gold); flex:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.fine{font-size:13.5px; color:var(--muted-2); margin-top:24px; max-width:80ch}
.row{display:flex; gap:10px; flex-wrap:wrap}
.sechead{display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px}
.more{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase}

/* nav */
.top{position:sticky; top:0; z-index:50; background:rgba(15,12,10,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand b{font-family:"Cinzel",serif; font-weight:700; font-size:20px; letter-spacing:0.1em; text-transform:uppercase}
.brand small{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted)}
.navlinks{display:flex; align-items:center; gap:22px; font-size:13.5px; flex-wrap:wrap}
.navlinks a{font-family:"Cinzel",serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#c9bda6}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--gold-lt)}
.crumbs{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); padding-top:18px}
.crumbs a{color:var(--muted)}
.btn-gold{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; background:var(--gold); color:var(--gold-ink); border-radius:3px; border:0; cursor:pointer;
  font-family:"Cinzel",serif; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:13px}
.btn-gold:hover{background:var(--gold-lt); color:var(--gold-ink)}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border:1px solid var(--rule-3); border-radius:3px; color:var(--ink); background:transparent; cursor:pointer;
  font-family:"Cinzel",serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; font-size:13px}
.btn-ghost:hover{border-color:var(--gold); color:var(--ink)}

/* masthead */
.mast{padding:52px 0 36px; border-bottom:1px solid var(--rule)}
.mast h1{font-size:clamp(2rem,4.4vw,54px); line-height:1.06}
.dates{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:34px; background:var(--rule-2); border:1px solid var(--rule-2)}
.date{background:var(--panel); padding:16px 18px}
.date .k{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted)}
.date .v{font-family:"Cinzel",serif; font-size:20px; margin-top:6px}
.date .s{font-size:13px; color:var(--muted-2); margin-top:2px}
.date.live .v{color:var(--gold-lt)}

/* class grid */
.classes{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px}
.cls{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--panel); border:1px solid var(--rule-2); border-radius:4px; color:var(--ink)}
.cls:hover{border-color:var(--c, var(--gold)); color:var(--ink); background:var(--panel-2)}
.cls img{width:44px; height:44px; border-radius:4px; border:1px solid var(--rule-3); flex:none}
.cls b{font-family:"Cinzel",serif; font-size:17px; display:block; color:var(--c, var(--ink))}
.cls span{font-size:13px; color:var(--muted-2)}

/* cards */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.card{display:block; background:var(--panel); border:1px solid var(--rule-2); border-radius:4px; padding:22px; color:var(--ink)}
a.card:hover{border-color:var(--gold-dk); color:var(--ink)}
.dark .card{background:var(--ground)}
.card p{color:var(--ink-2); font-size:15.5px; margin-top:8px}
.card .k{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.card.soon{opacity:.8}
.card.soon .k::after{content:" · in the works"; color:var(--muted-2)}
ul.tight{margin:10px 0 0; padding-left:18px; color:var(--ink-2); font-size:15.5px}
ul.tight li{margin:3px 0}

/* feed */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:6px 12px;
  border:1px solid var(--rule-3); border-radius:999px; background:transparent; color:var(--ink-2); cursor:pointer}
.chip:hover{border-color:var(--gold-dk); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:var(--gold-ink)}
.feed{display:grid; gap:12px}
.note{display:grid; grid-template-columns:120px minmax(0,1fr); gap:22px; padding:20px 22px; background:var(--panel); border:1px solid var(--rule-2); border-radius:4px}
.dark .note{background:var(--ground)}
.note time{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); letter-spacing:0.06em; padding-top:3px}
.note .tag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:6px; color:var(--muted)}
.note .tag.news{color:var(--gold)} .note .tag.lore{color:var(--sky)} .note .tag.beta{color:var(--ember)} .note .tag.addons{color:var(--leaf)}
.note p{color:var(--ink-2); margin-top:6px; font-size:16px}
.note .src{margin-top:10px; font-size:13.5px; display:flex; gap:14px; flex-wrap:wrap}
.note .src a::after{content:" ↗"; font-size:11px}
.note .ours{margin-top:12px; font-size:14px; padding:10px 14px; border-left:2px solid var(--gold-dk); background:rgba(216,173,78,0.05); color:var(--ink-2)}
.note .ours b{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-right:6px}

/* forms */
select,input{font:inherit; font-size:15px; color:var(--ink); background:var(--ground); border:1px solid var(--rule-3); border-radius:3px; padding:9px 12px}
input{min-width:0}
select:focus,input:focus{outline:none; border-color:var(--gold)}
label.l{display:block; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}

/* quality colours */
.q0{color:#9d9d9d}.q1{color:#fff}.q2{color:#1eff00}.q3{color:#4a9eff}.q4{color:#b86cf2}.q5{color:#ff8000}

footer{border-top:1px solid var(--rule); padding:36px 0 52px; font-size:14px; color:var(--muted-2)}
footer .row{justify-content:space-between; align-items:center; gap:18px}
footer a{color:var(--ink-2)}

@media (max-width:900px){
  .wrap{padding:0 16px}
  section{padding:44px 0}
  h2{font-size:26px}
  .dates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:minmax(0,1fr)}
  .note{grid-template-columns:minmax(0,1fr); gap:6px; padding:16px}
  .navlinks{gap:14px; font-size:12px}
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}