.guide-page h1,.guide-page h2,.guide-page h3{font-weight:400;line-height:1.15}
.guide-page h1{font-size:clamp(2.7rem,6vw,5rem);color:#f0deba;margin:.8rem 0 1.5rem}
.guide-page h2{font-size:clamp(1.9rem,3vw,2.7rem);margin:.4rem 0 1.5rem}
.guide-page h3{font-size:1.5rem}.guide-page p{color:var(--muted)}
.guide-page .eyebrow{color:var(--purple)}.guide-page .lead{font-size:1.5rem;color:#e2d9c9}
.guide-hero{padding:5rem 0 4rem;text-align:center;background:linear-gradient(#07111b99,#070f18f5),url('/assets/harbor.png') center 35%/cover}
.guide-hero p{max-width:650px;margin:1rem auto}.guide-notice{margin:1rem 0 4rem}
.breadcrumbs{display:flex;gap:.7rem;padding:1.6rem 0;font:.9rem/1.5 system-ui;color:var(--muted);flex-wrap:wrap}
.breadcrumbs a{color:var(--purple)}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.conquest-intro{background:radial-gradient(ellipse at 72% 50%,#17324588,transparent 65%);padding-bottom:2rem}
.intro-copy{padding:1rem 0;min-width:0}.intro-copy>p{max-width:510px}.intro-copy .actions{justify-content:flex-start}
.intro-character{margin:0;min-width:0;text-align:center}
.intro-character img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain}
.intro-character figcaption{display:grid;gap:.25rem;border-top:1px solid var(--line);padding:1rem}
.intro-character figcaption>a{color:var(--purple);font:.9rem/1.6 system-ui}
.guide-jumps{display:flex;gap:1rem 1.7rem;flex-wrap:wrap;border-block:1px solid var(--line);padding:1rem 0;font:.9rem/1.5 system-ui}
.guide-jumps a{color:#e5d7bc;text-underline-offset:5px}.section-intro{max-width:850px}
.basics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.basics-grid article{border-left:1px solid var(--line);padding-left:1.4rem}.step-number{color:var(--purple);font-size:1.4rem}
.role-guide{margin-top:2rem;background:#0d1b28;padding:1.25rem 1.5rem;border:1px solid var(--line)}
summary{cursor:pointer;min-height:32px;color:#e9d6b1}summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.role-guide dl{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}.role-guide dt{font-weight:bold}.role-guide dd{margin:.3rem 0;color:var(--muted)}

.class-filters{display:flex;align-items:end;gap:1rem;flex-wrap:wrap;background:#0d1b28;padding:1.3rem;border:1px solid var(--line);margin-top:2rem;font:.95rem/1.5 system-ui}
.class-filters>div:first-child{flex:2 1 280px}.class-filters>div:nth-child(2){flex:1 1 220px}
.class-filters label{display:block;margin-bottom:.5rem;color:var(--ivory)}
.class-filters input,.class-filters select{font:inherit;color:var(--ivory);background:#07111b;border:1px solid #758292;border-radius:2px;width:100%;min-height:48px;padding:.7rem}
.class-filters input::placeholder{color:#a7b3c2}.class-filters .button{font:inherit}.filter-count{font:.9rem/1.6 system-ui}
.class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:start}
.class-card{min-width:0;border:1px solid #4c483e;background:linear-gradient(155deg,#112233,#09131e);scroll-margin-top:1rem;overflow:hidden}
.class-card:target{outline:2px solid var(--purple);outline-offset:4px}
.class-art{height:290px;padding:1rem .75rem 0;background:radial-gradient(ellipse at bottom,#29344499,transparent 72%);border-bottom:1px solid #39434e}
.class-art img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
.class-copy{padding:1.4rem}.class-copy h3{margin:0;font-size:1.9rem;color:#ead7af}
.class-copy h3 a{text-decoration:none}.class-copy h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.class-copy .class-tagline{font-style:italic;color:#d3b6ed;min-height:3.2rem;margin:.65rem 0}
.roles{display:flex;gap:.4rem;flex-wrap:wrap;font:.75rem/1.4 system-ui}
.role{border:1px solid #666b83;border-radius:3px;padding:.25rem .6rem;color:#d5c7ed;background:#1e1c30}
.role-tank{color:#b3d7fb;background:#122737;border-color:#466984}.role-healer{color:#9fe5ba;background:#102e27;border-color:#487963}.role-support{color:#ebd18e;background:#292517;border-color:#77643d}
.class-copy>p:not(.class-tagline){font:.95rem/1.7 system-ui}
.class-appeal{border-top:1px solid #344351;padding-top:1rem}.class-appeal strong{display:block;color:#e4d8c2;margin-bottom:.3rem;font-weight:500}
.class-copy details{border-top:1px solid #344351;padding-top:1rem;font:.9rem/1.6 system-ui}.class-copy .spec-explain{font-size:.85rem}
.spec-list{list-style:none;padding:0;display:grid;gap:.5rem}.spec-list li{display:flex;justify-content:space-between;gap:1rem}.spec-list strong{font-weight:500}.spec-list span{color:var(--muted)}
.guide-page .guide-note{font:.85rem/1.6 system-ui;color:#aab8c8;margin-top:1.4rem}
.faction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin:2rem 0}
.faction{padding:1.5rem 2rem;background:#0d1b28;border:1px solid #536579;border-top:3px solid #639ad2}
.faction.horde{border-color:#795758;border-top-color:#c37878}.faction h3{font-size:2rem;margin:.5rem 0 1.4rem;color:#bbd8f5}.faction.horde h3{color:#edb3ad}
.race-list{margin:0}.race-list>div{padding:1rem 0;border-top:1px solid #344351}.race-list dt{font-size:1.2rem;color:#ead7af}.race-list dd{margin:.4rem 0 0;color:var(--muted);font:.95rem/1.7 system-ui}
.join-guide{border-top:1px solid var(--line);max-width:850px;margin:auto}.join-guide ol{padding-left:1.5rem;color:var(--muted)}.join-guide li{padding:.6rem 0 .6rem .4rem}
.join-guide a:not(.button),.prose-guide a:not(.button){color:var(--purple);text-underline-offset:4px}.join-guide .actions{justify-content:flex-start}
.prose-guide{max-width:850px}.prose-guide li{color:var(--muted);padding:.45rem 0}.classic-classes{columns:2;column-gap:2rem;padding-left:1.3rem}.classic-classes li{break-inside:avoid}.classic-classes strong{color:var(--ivory)}
@media(max-width:1000px){.class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-grid{gap:1rem}.class-art{height:320px}}
@media(max-width:680px){.intro-grid,.basics-grid,.faction-grid,.role-guide dl,.class-grid{grid-template-columns:1fr}.conquest-intro{padding-bottom:0}.intro-copy h1{font-size:clamp(2.4rem,12vw,3.3rem)}.intro-character{max-width:440px;margin:auto}.intro-character img{max-height:420px}.guide-hero{padding:3rem 0}.guide-jumps{gap:.8rem 1.2rem}.basics-grid{gap:1.3rem}.class-art{height:310px}.class-copy .class-tagline{min-height:0}.class-filters{padding:1rem}.class-filters>div{flex-basis:100%!important}.class-filters .button{width:100%}.faction{padding:1.2rem 1.4rem}.classic-classes{columns:1}.class-copy{padding:1.3rem}.breadcrumbs{padding:1rem 0}.guide-page .section-heading{margin-bottom:1rem}}