@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&display=swap');

/* Official Blizzard Burning Crusade Anniversary key art:
   https://worldofwarcraft.blizzard.com/en-us/news/24242436 */
:root { --ice:#d6b871; --muted:#a69e87; --line:#51442b; background:#10110c; color:#eee5cf; }
body { background:#10110c; isolation:isolate; }
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(90deg,rgba(9,12,6,.78),rgba(9,12,6,.22) 55%,rgba(9,12,6,.60)),
    linear-gradient(0deg,#10110c 0%,rgba(16,17,12,.7) 30%,rgba(16,17,12,.12) 100%),
    url('https://bnetcmsus-a.akamaihd.net/cms/content_entry_media/3f/3F7V2QWSSRCK1770317485433.png') center top/cover no-repeat;
}
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 55% 38%,#87d93412,transparent 60%); }
header { background:linear-gradient(#191c12f2,#0e100bef); border-bottom:2px solid #756039; box-shadow:0 4px 18px #0009,inset 0 -1px #b1975438; }
.brand { font-family:'Cinzel',Georgia,serif; font-size:14px; color:#ead598; text-shadow:0 2px 4px #000; }
.brand b,footer b { color:#b8d973; }
nav { color:#c6b794; }
nav a:hover { color:#ffe5a0; text-shadow:0 0 14px #c2a950; }
header>small { color:#b9ac8a; }
main { max-width:1440px; }
.statusbar { color:#b0c68c; }
button { border:1px solid #8c7440; border-radius:2px; background:linear-gradient(#56331e,#2c1a12); color:#eed594; box-shadow:inset 0 0 0 2px #120e0880,0 2px 5px #0008; text-shadow:0 1px #000; }
button:hover { background:linear-gradient(#765029,#3e2916); border-color:#d8b86b; }
.hero { min-height:585px; }
.hero-copy { padding:55px 0; }
.eyebrow { color:#b8ce87; text-shadow:0 1px 4px #000; }
h1,h2,.level-label { font-family:'Cinzel',Georgia,serif; }
h1 { font-size:clamp(39px,4.6vw,67px); line-height:1.2; font-weight:700; letter-spacing:-2.5px; text-shadow:0 3px 3px #000,0 0 35px #000c; }
h1 em { color:#edcf87; }
.description { color:#d2c6ac; text-shadow:0 2px 5px #000; }
.identity span { background:#10140cce; color:#d3c4a1; border-color:#736141; box-shadow:inset 0 0 6px #000; border-radius:2px; }
.text-link { color:#edd49a; border-color:#9e814a; }
.portrait { height:540px; }
.portrait::before { content:""; position:absolute; inset:65px 0 45px; border:2px solid #857546; border-radius:46% 46% 12% 12%; background:radial-gradient(ellipse,#749d323d,#18211491 55%,#080d08c9); box-shadow:0 0 0 4px #0d1209,0 0 0 5px #655631,0 0 55px #81b83730,inset 0 0 40px #000; }
.portrait::after { content:"◆"; position:absolute; top:49px; color:#c5ac64; font-size:28px; text-shadow:0 2px 5px #000; }
.portrait img { width:185%; height:135%; filter:drop-shadow(0 8px 13px #000b); }
.rune { border-color:#b8da6740; box-shadow:0 0 90px #8fae311c; width:310px;height:310px; }
.rune:before { border-color:#b8da6730; }
.rune.inner { width:245px;height:245px; }
.sigil { color:#c0d77718; }
.portrait>small { color:#c4b884; bottom:18px;text-shadow:0 1px 5px #000; }
.level-card { padding:25px 0 25px 30px; }
.level-card .eyebrow { color:#d3bc81; }
#level { color:#f0d493; text-shadow:0 3px 0 #715626,0 6px 10px #000,0 0 60px #cbb04f30; }
.level-label { font-size:14px; color:#e4cca0; font-weight:600; line-height:1.6; }
.track { height:7px; border:1px solid #75653b; background:#080d06; box-shadow:inset 0 1px 3px #000; border-radius:1px; }
.track span { background:linear-gradient(#b5d675,#517329);box-shadow:0 0 10px #99d443; }
.track-label,.muted { color:#b9ae91; }
.level-card .muted { text-shadow:0 1px 5px #000; }
.metrics { background:linear-gradient(#26271be8,#11160eeb); border:1px solid #806b3d; border-top:2px solid #aa8b4e; box-shadow:0 5px 22px #0007,inset 0 0 0 4px #070b0866; padding:26px; position:relative; }
.metrics>div:first-child { padding-left:5px; }
.metrics small { color:#bca97e; }
.metrics>div:first-child strong { color:#b3d58b; }
.metrics>div:nth-child(2) strong { color:#91baf0; }
.metrics strong { font-family:'Cinzel',Georgia,serif;font-size:25px; }
h2 { font-size:25px;color:#e4cb92;text-shadow:0 2px #000;font-weight:600; }
.section-heading { border-bottom:1px solid #6a5834;padding-bottom:17px; }
.section-heading .eyebrow { color:#a7ba78; }
.section-heading>small { color:#b7ab8b; }
.panel { background:linear-gradient(125deg,#24271bee,#11150fec);border:1px solid #7c693e;border-radius:2px;box-shadow:inset 0 0 0 3px #0a0e0866,0 4px 16px #0006; }
aside h3 { font-family:'Cinzel',Georgia,serif;color:#e4cc98;font-size:16px;line-height:1.5; }
.item { --quality:#bdb8a8; background:linear-gradient(110deg,#20251bef,#131810ed);border:1px solid #514e35;border-radius:2px;box-shadow:inset 0 0 0 2px #080b0766,0 3px 7px #0005; }
.item.uncommon { --quality:#7ccd52; }.item.rare { --quality:#4595e7; }.item.epic { --quality:#af6bdf; }.item.legendary { --quality:#ed963c; }
.item:hover,.item[open] { border-color:var(--quality);background:linear-gradient(110deg,#293123,#131a11); }
.item summary { padding:13px;min-height:85px; }
.item-icon { display:grid;position:relative;width:48px;height:48px;flex:0 0 48px;border:2px solid var(--quality);background:#141b0d;border-radius:3px;color:var(--quality);box-shadow:0 0 0 1px #080b05,0 0 9px #000a;overflow:hidden; }
.item-icon>span { grid-area:1/1; }
.item-icon img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.item-name small { color:#b5aa8d; }.item-name strong { font-size:12px;color:var(--quality)!important; }
.item-detail { background:#090d07c9;border-top:1px solid #4d4a30;color:#b7d99b;padding:12px 18px;font-size:12px; }
.plus { color:#ac9866; }
.stat-row { border-color:#41462e; }.stat-row span { color:#beb49a; }.stat-row strong { color:#e1d7bb; }
.footnote { color:#a99e82; }.talent-head b { color:#93cee0;text-shadow:0 0 15px #5f98c266; }.talent-head h3 { font-family:'Cinzel',Georgia,serif;color:#e5d4ae; }
.talent { border-color:#4a4a31; }.talent summary span { color:#d7bd79; }.talent p { color:#c0b494; }
.rep span,.rep small { color:#b6aa8b; }.rep .track span { background:linear-gradient(#a7ba66,#586d31); }
.journal { background:#13170fba;padding:25px;border-color:#78643d; }.journal article { border-left-color:#a4b45e; }.journal time { color:#b6a77e; }.journal h3 { color:#e2cd9b; }
footer { color:#a1977e; }footer>div { color:#baac89; }footer strong { color:#e0c996; }
@media(max-width:1000px) { h1 { font-size:43px;letter-spacing:-2px; }.rune { width:230px;height:230px; }.rune.inner { width:190px;height:190px; }.level-card { padding-left:22px; }.item-icon { width:40px;height:40px;flex-basis:40px; }.item summary { gap:9px; }.item-name strong { font-size:11px; } }
@media(max-width:700px) {
  body::before { background-position:center,center,62% top;background-size:auto,auto,auto 900px; }
  .brand { font-size:10px; }.hero { min-height:0; }.hero-copy { padding:38px 0 0; }h1 { font-size:48px;letter-spacing:-2px;line-height:1.15; }
  .portrait { height:340px; }.portrait::before { inset:30px 4px 28px; }.portrait::after { top:15px;font-size:24px; }.portrait img { width:195%;height:140%; }
  .rune { width:175px;height:175px; }.rune.inner { width:140px;height:140px; }
  .level-card { padding:30px 16px 30px 0; }.level-label { font-size:11px; }#level { font-size:108px; }
  .metrics { padding:22px 18px; }.metrics>div:first-child { padding-left:0; }.metrics strong { font-size:23px; }
  h2 { font-size:22px;line-height:1.4; }.gear-grid { grid-template-columns:1fr;gap:9px; }
  .item-icon { display:grid;width:48px;height:48px;flex-basis:48px; }.item-name strong { font-size:12px; }.item summary { gap:14px;min-height:78px; }
  .journal { padding:20px; }
}