/* Ayshy Chronicles — dark gilded Azeroth theme */
:root{--ground:#0d0a0e;--ground-2:#120e13;--panel:#17111a;--line:#3a2e1f;--line-2:#5a4728;--gold:#d6b25e;--gold-l:#e3c172;--gold-h:#f5dc9c;--ink:#e9e1cf;--ink-2:#cfc4ad;--mute:#a99c82;--fine:#8c806a;--white:#f3ead6;--red:#8e1b1b;--parch:#e9ddc3;--parch-ink:#2a1f15;--display:'Cinzel',Georgia,serif;--body:'Spectral',Georgia,serif;--pad:clamp(18px,4vw,40px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--gold-l);text-decoration:none}a:hover{color:var(--gold-h)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--display);color:var(--white);font-weight:700;line-height:1.15}
h2{font-size:clamp(32px,4.6vw,46px);margin:8px 0 0}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--pad)}
.kicker{font-family:var(--display);color:var(--gold);font-size:13px;letter-spacing:.3em;font-weight:600;text-transform:uppercase}
.link-caps{font-family:var(--display);font-size:14px;letter-spacing:.16em;font-weight:700;text-transform:uppercase}
.mb{margin-bottom:40px}
/* header */
.topbar{border-bottom:1px solid var(--line);background:#110d12}
.topbar-in{padding-top:18px;padding-bottom:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand span,.brand-sm{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.14em}
.brand em,.brand-sm em{font-style:normal;color:var(--gold)}
.brand-sm{font-size:18px}
.nav{display:flex;flex-wrap:wrap;gap:6px 28px;font-family:var(--display);font-size:14px;letter-spacing:.16em;font-weight:600;text-transform:uppercase}
.nav a{padding:6px 0}
/* hero */
.hero{border-bottom:1px solid var(--line)}
.hero-in{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(48px,6vw,80px);display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.hero-text{flex:999 1 300px;min-width:0}
.display{font-weight:800;font-size:clamp(42px,7vw,76px);line-height:1.02;margin:18px 0 22px;max-width:12ch}
.lede{margin:0 0 32px;max-width:560px;font-size:21px;color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:16px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;letter-spacing:.12em;font-size:15px;padding:16px 30px;border-radius:2px;text-transform:uppercase;min-height:44px}
.btn-red{background:var(--red);color:#f8eedb;border:1px solid var(--gold)}.btn-red:hover{background:#a52222;color:#fff}
.btn-ghost{color:var(--gold-l);border:1px solid var(--line-2)}.btn-ghost:hover{border-color:var(--gold)}
.stats{display:flex;flex-wrap:wrap;gap:36px;margin-top:48px;padding-top:28px;border-top:1px solid #2b2218}
.stat-n{font-family:var(--display);font-size:34px;color:var(--white);font-weight:700}
.stat-l{font-size:14px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.hero-art{flex:1 1 280px;min-width:0;display:flex;justify-content:center}
.frame{margin:0;position:relative;padding:14px;border:1px solid var(--gold);background:var(--panel)}
.frame::after{content:"";position:absolute;inset:6px;border:1px solid #4a3a22;pointer-events:none}
.hero-art .frame{width:440px;max-width:100%}
.hero-art img{width:100%;height:clamp(380px,62vw,600px);object-fit:cover;object-position:center 30%}
.frame figcaption{font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--gold);text-align:center;padding-top:12px;text-transform:uppercase}
/* bands */
.band{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line)}
.band-alt{background:var(--ground-2)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:40px}
.center-head{text-align:center;margin-bottom:48px}
.divider{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
.divider span{width:120px;height:1px;background:var(--line-2)}.divider i{width:10px;height:10px;background:var(--gold);transform:rotate(45deg)}
/* news */
.grid-news{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px}
.parchment{background:var(--parch);color:var(--parch-ink);padding:26px 26px 24px;border:1px solid #b89a5e;box-shadow:0 0 0 4px var(--ground-2),0 0 0 5px var(--line-2);display:flex;flex-direction:column;gap:12px}
.parch-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.parch-top time{font-size:14px;color:#6b5a40;font-style:italic}
.badge{display:inline-block;font-family:var(--display);font-size:12px;letter-spacing:.18em;font-weight:700;color:#f8eedb;background:var(--red);padding:4px 10px;text-transform:uppercase}
.badge-gold{background:var(--gold);color:var(--ground)}
.parchment h3{font-size:23px;margin:4px 0 0}.parchment h3 a{color:#1f160f}.parchment h3 a:hover{color:var(--red)}
.parchment p{margin:0;font-size:16.5px;line-height:1.55;color:#3d3021}
.parchment .more{margin-top:auto;font-family:var(--display);font-size:13px;letter-spacing:.14em;font-weight:700;color:#7a1616;text-transform:uppercase}
/* companions */
.grid-companions{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.companion{display:block;background:var(--panel);border:1px solid var(--line);color:var(--ink);transition:border-color .2s,transform .2s}
.companion:hover{border-color:var(--gold);transform:translateY(-3px);color:var(--ink)}
.companion .bar,.bar-sm{height:6px;background:var(--gold)}
.bar-sm{width:96px}
.companion img{width:100%;height:300px;object-fit:cover;object-position:center 20%}
.companion-body{padding:16px 16px 18px}
.companion-name{font-family:var(--display);font-size:22px;font-weight:700;color:var(--white)}
.companion-role{font-size:15px;color:var(--mute);margin-top:2px}
.companion-since{font-family:var(--display);font-size:12px;letter-spacing:.18em;color:var(--gold);margin-top:12px;font-weight:600;text-transform:uppercase}
/* class colours via internal tags (#paladin, #druid …) */
.tag-hash-paladin .bar,.tag-hash-paladin .bar-sm{background:#F58CBA}.tag-hash-paladin.chip img{border-color:#F58CBA}
.tag-hash-druid .bar,.tag-hash-druid .bar-sm{background:#FF7C0A}.tag-hash-druid.chip img{border-color:#FF7C0A}
.tag-hash-mage .bar,.tag-hash-mage .bar-sm{background:#3FC7EB}.tag-hash-mage.chip img{border-color:#3FC7EB}
.tag-hash-shaman .bar,.tag-hash-shaman .bar-sm{background:#0070DD}.tag-hash-shaman.chip img{border-color:#0070DD}
.tag-hash-rogue .bar,.tag-hash-rogue .bar-sm{background:#FFF468}.tag-hash-rogue.chip img{border-color:#FFF468}
.tag-hash-demon-hunter .bar,.tag-hash-demon-hunter .bar-sm{background:#A330C9}
/* films */
.films{display:flex;flex-wrap:wrap;gap:24px}
.film-feature{flex:999 1 300px;min-width:0;position:relative;border:1px solid var(--gold);background:var(--ground);min-height:360px}
.film-feature img{width:100%;height:clamp(300px,42vw,420px);object-fit:cover;object-position:center 25%;opacity:.55}
.film-feature-text{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,32px)}
.film-feature h3{font-size:clamp(30px,4.4vw,44px);margin:14px 0 6px;font-weight:800}.film-feature h3 a{color:#f8eedb}
.film-feature p{margin:0 0 18px;max-width:520px;color:#e2d6bd}
.film-feature .btn{padding:13px 24px;font-size:14px}
.film-list{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:16px}
.film-row{display:flex;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:12px;color:var(--ink)}
.film-row:hover{border-color:var(--gold);color:var(--ink)}
.film-row img{width:92px;height:116px;object-fit:cover;flex:none}
.film-kind{font-family:var(--display);font-size:12px;letter-spacing:.18em;color:var(--gold);font-weight:600;text-transform:uppercase}
.film-title{font-family:var(--display);font-size:20px;color:var(--white);font-weight:700;line-height:1.25;margin:4px 0}
.film-note{font-size:15px;color:var(--mute)}
/* timeline */
.remembers{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.remembers-intro{flex:1 1 280px;min-width:0}.remembers-intro p{color:var(--ink-2)}
.timeline{flex:999 1 300px;min-width:0;list-style:none;margin:0;padding:0;border-left:1px solid var(--line-2)}
.timeline li{position:relative;padding:0 0 26px 34px}
.timeline li::before{content:"";position:absolute;left:-6px;top:8px;width:11px;height:11px;background:var(--gold);transform:rotate(45deg)}
.t-year{font-family:var(--display);font-size:14px;letter-spacing:.2em;color:var(--gold);font-weight:700}
.t-title{font-family:var(--display);font-size:22px;color:var(--white);font-weight:600}
.t-note{font-size:16px;color:var(--mute)}
/* article + profile */
.crumbs,.crumbs-top{font-size:15px;color:var(--fine);margin-bottom:14px}.crumbs-top{padding-top:28px}
.article-head{padding-top:clamp(40px,6vw,72px);padding-bottom:28px;max-width:900px}
.h-article{font-size:clamp(34px,5.5vw,58px);margin:16px 0 14px}
.h-page{font-size:clamp(36px,5.5vw,58px);margin:8px 0 36px}
.meta{font-size:15px;color:var(--mute);font-style:italic}
.article-img{max-width:1100px;margin:0 auto 40px}.article-img img{width:100%;max-height:640px;object-fit:cover}
.article{padding-bottom:80px}
.gh-content{font-size:19px;color:var(--ink)}
.gh-content h2{font-size:clamp(26px,3.4vw,34px);margin:1.6em 0 .5em}.gh-content h3{font-size:24px;margin:1.4em 0 .4em}
.gh-content a{text-decoration:underline;text-underline-offset:3px}
.gh-content blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:2px solid var(--gold);font-style:italic;color:var(--ink-2)}
.gh-content figure{margin:2em 0}.gh-content figcaption{font-size:14px;color:var(--mute);text-align:center;margin-top:8px}
.gh-content iframe{max-width:100%}
.kg-width-wide{margin-left:calc(50% - 50vw*0.4);margin-right:calc(50% - 50vw*0.4)}
.kg-width-full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.profile-in{padding-top:36px;padding-bottom:clamp(48px,6vw,72px);display:flex;flex-wrap:wrap;gap:56px}
.profile-art{flex:1 1 280px;min-width:0;align-self:flex-start}
.profile-art img{width:100%;height:clamp(380px,64vw,640px);object-fit:cover;object-position:center 15%}
.profile-text{flex:999 1 300px;min-width:0}
.display-xl{font-weight:800;font-size:clamp(52px,9vw,88px);line-height:1;margin:18px 0 8px}
.subtitle{font-family:var(--display);font-size:18px;letter-spacing:.2em;color:var(--gold);font-weight:600;text-transform:uppercase;margin-bottom:24px}
.riders{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.riders h2{font-size:clamp(24px,3vw,30px);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:14px}
.chip{display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-family:var(--display);font-size:17px;font-weight:700}
.chip img{width:52px;height:52px;object-fit:cover;object-position:center 15%;border:2px solid var(--gold);border-radius:50%}
.pagination{display:flex;justify-content:center;gap:24px;margin-top:48px;font-family:var(--display);letter-spacing:.12em}
/* footer */
.foot{border-top:1px solid var(--line);background:#0a080b}
.foot-in{padding-top:48px;padding-bottom:48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.fine{font-size:14px;color:var(--fine);margin:6px 0 0}
.social{display:flex;flex-wrap:wrap;gap:22px;font-family:var(--display);font-size:14px;letter-spacing:.1em;font-weight:600;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}