.class-overview{--cp-gold:#e6b760;--cp-line:#634722;--cp-muted:#c2b09a;--cp-ink:#f3e4cb;background:#100c08;color:var(--cp-ink);padding-bottom:4rem}.class-overview *{box-sizing:border-box}.class-overview .cp-wrap{width:min(1280px,calc(100% - 48px));margin-inline:auto}.cp-hero{position:relative;min-height:330px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--cp-line)}.cp-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:.5}.cp-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,9,5,.95),rgba(15,9,5,.58) 55%,rgba(15,9,5,.12)),linear-gradient(0deg,#100c08,transparent 70%)}.cp-hero-content{position:relative;z-index:1;padding-block:24px 28px}.cp-hero .breadcrumbs{margin:0 0 20px}.cp-kicker{font:700 .72rem/1.4 Arial,sans-serif;letter-spacing:.19em;color:var(--cp-gold);margin:0 0 10px}.cp-hero h1{font-size:clamp(2.35rem,4.6vw,4rem);line-height:1.08;margin:0 0 16px;max-width:900px}.cp-lead{font-size:1.15rem;line-height:1.65;max-width:760px;margin:0}.cp-date{font-size:.77rem;color:var(--cp-muted);margin:18px 0 0}.cp-quick{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;padding-block:22px;border-bottom:1px solid var(--cp-line)}.cp-quick a{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 7px;background:#21180f;border:1px solid #514029;color:#ebd6b8;text-decoration:none;border-radius:4px;font-size:.78rem;transition:background .18s,border-color .18s}.cp-quick img{flex:none;border:1px solid #806536;border-radius:50%}.cp-quick a:hover,.cp-quick a:focus-visible{background:#382919;border-color:var(--cp-gold);color:#fff0cf}.cp-chooser{padding:28px 0 32px}.cp-chooser>div>h2,.cp-next h2{font-size:1.7rem;line-height:1.25;margin:0 0 8px}.cp-chooser>div>p{max-width:850px;color:var(--cp-muted);font-size:.92rem;line-height:1.65;margin:0 0 20px}.cp-role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.cp-role-grid section{border:1px solid #473420;border-radius:5px;background:linear-gradient(135deg,#221910,#17100b);padding:15px 17px}.cp-role-grid h3{font-size:1.08rem;color:var(--cp-gold);margin:0 0 8px}.cp-role-grid p{display:flex;flex-wrap:wrap;gap:5px 12px;margin:0}.cp-role-grid a{color:#e6d3b7;font-size:.82rem;text-decoration:underline;text-decoration-color:#72552b;text-underline-offset:3px}.cp-role-grid a:hover{color:#fff1d3}.cp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}.cp-card{min-width:0;background:linear-gradient(145deg,#24190f,#17100a);border:1px solid var(--cp-line);border-radius:7px;overflow:hidden;scroll-margin-top:115px;box-shadow:0 12px 30px #0003;transition:border-color .2s}.cp-card:target{border-color:#f0c96c;box-shadow:0 0 0 2px #d8a74466,0 12px 30px #0003}.cp-picture{display:block;position:relative;overflow:hidden;aspect-ratio:1.85}.cp-picture:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#24190f 0%,transparent 38%)}.cp-picture img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}.cp-picture:hover img{transform:scale(1.025)}.cp-card-body{padding:0 21px 20px}.cp-card-heading{display:flex;gap:12px;align-items:center;position:relative;margin:0 0 12px}.cp-class-icon{border:1px solid #9d793b;border-radius:4px;box-shadow:0 3px 12px #0008;flex:none}.cp-card-heading h2{font-size:1.65rem;line-height:1.2;margin:0;overflow-wrap:anywhere}.cp-card-heading h2 a{color:#f6e5c8;text-decoration:none}.cp-role-tags{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 14px}.cp-role-tags span{font-size:.67rem;letter-spacing:.025em;line-height:1.4;padding:3px 7px;color:#ebc884;border:1px solid #5d4526;border-radius:3px;background:#1a120b}.cp-style{font-size:.9rem;line-height:1.7;margin:0 0 18px;color:#e7d7c1;min-height:6.1em}.cp-traits{margin:0}.cp-traits>div{padding:12px 0;border-top:1px solid #59432988}.cp-traits dt{font-size:.68rem;line-height:1.5;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--cp-gold);margin-bottom:5px}.cp-traits dd{font-size:.83rem;line-height:1.65;margin:0;color:#d6c4aa;min-height:3.2em}.cp-races{margin-top:8px;padding:12px 0;border-top:1px solid #59432988;border-bottom:1px solid #59432988}.cp-races>summary{cursor:pointer;color:var(--cp-gold);font-size:.82rem;font-weight:700}.cp-races>summary::marker{color:#ad8641}.cp-races .race-availability{margin:10px 0 0;padding:0}.cp-races .race-availability>h3{display:none}.cp-races .availability-group{margin:10px 0 0;padding:0;border:0;background:none}.cp-races .availability-group h3{font-size:.76rem;margin:0 0 5px;color:#d0b586}.cp-races .availability-group>div{display:flex;flex-wrap:wrap;gap:4px}.cp-races .race-chip{font-size:.7rem;padding:3px 6px}.cp-card-actions{display:grid;grid-template-columns:1fr;gap:7px;margin-top:16px}.class-overview .cp-button{display:flex;justify-content:space-between;align-items:center;gap:9px;min-height:38px;padding:9px 12px;font:700 .76rem/1.35 Arial,sans-serif;text-decoration:none;color:#e8c68c;background:#1b130c;border:1px solid #805c2d;border-radius:4px;transition:background .18s,border-color .18s}.class-overview .cp-button:hover,.class-overview .cp-button:focus-visible{color:#fff0cf;background:#3b2b17;border-color:#d4a959}.class-overview .cp-button-primary{color:#231407;background:linear-gradient(135deg,#e7bd70,#bf873d);border-color:#e7bd70}.class-overview .cp-button-primary:hover,.class-overview .cp-button-primary:focus-visible{background:#f0cd88;color:#1a1007}.cp-next{display:grid;grid-template-columns:1.7fr 1fr;gap:32px;padding:26px;margin-top:32px;border:1px solid var(--cp-line);background:#21170e;border-radius:6px}.cp-next p{font-size:.92rem;line-height:1.8;color:#d8c7af;margin:0}.cp-next nav{display:grid;align-content:center;gap:8px}.cp-sources{margin-top:28px;padding:15px 0;border-top:1px solid #473420;font-size:.78rem;color:var(--cp-muted)}.cp-sources summary{cursor:pointer;color:var(--cp-gold)}.cp-sources ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;margin:15px 0 0;padding-left:20px}.cp-sources a{color:#c4ad85}.class-overview a:focus-visible,.class-overview summary:focus-visible{outline:2px solid #efc26c;outline-offset:4px}@media(min-width:1500px){.cp-card-actions{grid-template-columns:1fr 1fr}.class-overview .cp-button{font-size:.72rem}}@media(max-width:1150px){.cp-quick{grid-template-columns:repeat(5,minmax(0,1fr))}.cp-quick a{justify-content:flex-start}.cp-card-body{padding-inline:16px}.cp-card-heading h2{font-size:1.4rem}.cp-cards{gap:14px}}@media(max-width:850px){.cp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cp-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cp-quick{grid-template-columns:repeat(3,minmax(0,1fr))}.cp-next{grid-template-columns:1fr;gap:18px}.cp-hero{min-height:310px}.cp-style,.cp-traits dd{min-height:0}}@media(max-width:540px){.class-overview .cp-wrap{width:calc(100% - 28px)}.cp-hero-content{padding-block:20px}.cp-hero h1{font-size:2.4rem}.cp-lead{font-size:1rem}.cp-quick{gap:6px;padding-block:16px}.cp-quick a{font-size:.68rem;gap:5px;padding:7px 5px}.cp-quick img{width:22px;height:22px}.cp-cards{grid-template-columns:1fr}.cp-card-body{padding:0 20px 20px}.cp-card-heading h2{font-size:1.7rem}.cp-card-actions{grid-template-columns:1fr 1fr}.cp-role-grid section{padding:12px}.cp-role-grid h3{font-size:1rem}.cp-role-grid a{font-size:.78rem}.cp-next{padding:20px}.cp-sources ul{grid-template-columns:1fr}.cp-picture{aspect-ratio:2}.cp-hero .breadcrumbs{font-size:.7rem}}@media(prefers-reduced-motion:reduce){.class-overview *{transition:none!important;scroll-behavior:auto!important}.cp-picture:hover img{transform:none}}

/* The legacy catalog marks calculator text dark with !important. Keep that
   rule outside this overview while giving this secondary action clear contrast. */
.class-overview .class-talent-link.cp-button{color:#f6d89a!important;background:#24190f;border-color:#ad8241;box-shadow:none}
.class-overview .class-talent-link.cp-button:hover,.class-overview .class-talent-link.cp-button:focus-visible{color:#fff3d4!important;background:#3b2b17;border-color:#efc26c}

/* Keep the full class comparison in the page while separating the three
   talent trees and Forever mechanics from the practical choice advice. */
.cp-specs{margin:0 0 16px;padding:11px 12px;border:1px solid #67502f;border-radius:4px;background:#130e09}
.cp-specs h3,.cp-forever h3{font:700 .7rem/1.5 Arial,sans-serif;letter-spacing:.045em;color:var(--cp-gold);margin:0 0 6px}
.cp-specs p{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;color:#f0dec2;font-size:.83rem;line-height:1.6}
.cp-specs p span+span:before{content:"·";padding-inline:7px;color:#bc955b}
.cp-description{min-height:0}
.cp-forever{margin-top:2px;padding:14px 0;border-top:1px solid #59432988}
.cp-forever p{margin:0;font-size:.85rem;line-height:1.75;color:#e7d7c1;overflow-wrap:break-word}
.cp-forever h3{font-size:.76rem;letter-spacing:0}