/* Class colours follow the supplied primary/accent swatch. Products retain their real photographs. */
.ember .class-banner[data-class-theme]{background:var(--class-dark);border-color:var(--class-accent);color:#fff7e7}
.ember .class-banner[data-class-theme]:before{background:linear-gradient(90deg,var(--class-dark) 0%,color-mix(in srgb,var(--class-dark) 76%,transparent) 30%,transparent 67%)}
.ember .class-banner[data-class-theme] .class-banner-art{--art-lift:var(--class-art-raise,0px);top:calc(-1 * var(--art-lift));height:calc(100% + var(--art-lift));object-position:center top}
/* Individually framed heads, with a little breathing room above each silhouette. */
.ember .class-banner[data-class-theme=artificer]{--class-art-raise:45px}
.ember .class-banner[data-class-theme=warlock]{--class-art-raise:50px}
.ember .class-banner[data-class-theme=rogue]{--class-art-raise:15px}
.ember .class-banner[data-class-theme=paladin]{--class-art-raise:20px}
.ember .class-banner[data-class-theme=cleric]{--class-art-raise:75px}
.ember .class-banner[data-class-theme=bard]{--class-art-raise:15px}
.ember .class-banner[data-class-theme=barbarian]{--class-art-raise:10px}
.ember .class-banner[data-class-theme=dungeon-master]{--class-art-raise:20px}
.ember .class-banner[data-class-theme] .banner-description{color:#f0eadd}
.ember .class-banner[data-class-theme] .banner-story>.eyebrow{color:color-mix(in srgb,var(--class-accent) 45%,white)}
.ember .class-banner[data-class-theme] .banner-story>.button{background:var(--class-primary);border-color:var(--class-accent);color:var(--class-button-ink)}
.ember .class-banner[data-class-theme] .feature{border-color:var(--class-accent);box-shadow:0 9px 30px #0006;background:color-mix(in srgb,var(--class-primary) 5%,#fff6e2)}
.ember .class-banner[data-class-theme] .feature h3{color:color-mix(in srgb,var(--class-primary) 75%,#191817)}
.ember .class-banner[data-class-theme] .feature-arrow{color:var(--class-primary)}
.ember .class-options button[aria-pressed=true]{background:var(--selected-class-primary,#596B3A);color:var(--selected-class-ink,#fff);border-bottom-color:var(--selected-class-accent,#B89970)}
.ember .class-options button[aria-pressed=true]>span{color:inherit}
/* Equal class tiles, each carrying its own palette through every interaction state. */
.ember .class-panel{grid-template-columns:145px minmax(0,1fr);gap:18px;padding-top:28px;padding-bottom:28px}
.ember .class-intro{align-self:stretch;display:flex;align-items:center}
.ember .class-intro h2,.ember.live-example .class-intro h2{margin:0;font-size:29px;line-height:1.2}
.ember .class-intro:has(.class-label){align-self:center;justify-content:center;padding:12px 16px 12px 0;text-align:center}
.ember .class-intro>p.class-label{max-width:none;margin:0;padding:0;border:0;color:#51412e;font:italic 400 24px/1.25 Lora,Georgia,serif;letter-spacing:-.025em}
.ember .class-label span{display:block;white-space:nowrap}
.ember .class-options{grid-template-columns:minmax(126px,1.4fr) repeat(6,minmax(0,1fr));grid-auto-rows:68px;gap:8px}
.ember .class-options button[data-class]{position:relative;isolation:isolate;width:100%;height:68px;min-height:68px;margin:0;padding:6px 4px;display:flex;flex-direction:column;justify-content:center;gap:4px;border:1px solid transparent;border-radius:0;background:transparent;color:#3c3025;font-size:14px;line-height:1.2;box-sizing:border-box;box-shadow:none;-webkit-tap-highlight-color:transparent}
.ember .class-options button[data-class]:before{content:'';position:absolute;inset:-3px -4px;z-index:-1;pointer-events:none;background:var(--option-primary);mask:url("/assets/redesign/assets/class-selection-brush.svg") center/100% 100% no-repeat;opacity:0}
.ember .class-options button[data-class]>span{font-size:17px;line-height:18px;color:var(--option-primary)}
.ember .class-options button[data-class="Dungeon Master"]{white-space:nowrap;font-size:14px;letter-spacing:normal}
.ember .class-options button[data-class]:is(:hover,:active,:focus-visible,[aria-pressed=true]){background:transparent;color:var(--option-ink);border-color:transparent;box-shadow:none}
.ember .class-options button[data-class]:is(:hover,:active,:focus-visible,[aria-pressed=true]):before{opacity:1}
.ember .class-options button[data-class]:is(:hover,:active,:focus-visible,[aria-pressed=true])>span{color:inherit}
.ember .class-options button[data-class]:focus-visible{outline:2px solid var(--option-accent);outline-offset:3px}
.ember .class-options button[data-class][aria-pressed=true]{box-shadow:none}
@media(min-width:601px) and (max-width:1000px){
 .ember .class-panel{grid-template-columns:1fr;gap:14px}
 .ember .class-intro{justify-content:center;padding:0 0 12px;border-right:0}
 .ember .class-intro:has(.class-label){padding:0 0 12px}
 .ember .class-label span{display:inline}
}
@media(min-width:601px) and (max-width:740px){
 .ember .class-options{grid-template-columns:minmax(126px,1.4fr) repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
 .ember .class-options button[data-class][data-class="Dungeon Master"]:first-child{white-space:nowrap;font-size:14px;gap:6px;padding-left:5px;padding-right:5px;width:min(190px,100%)}
 .ember .class-panel{padding-top:36px;padding-bottom:39px}
 .ember .class-intro{display:block;margin:0 0 18px;padding:0;text-align:center}
 .ember .class-intro h2,.ember.live-example .class-intro h2{font-size:27px}
 .ember .class-intro:has(.class-label){padding:0;margin:0 0 14px}
 .ember .class-intro>p.class-label{font-size:clamp(22px,6vw,25px);line-height:1.3}
 .ember .class-label span{display:inline}
 .ember .class-options{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:8px}
 .ember .class-options button[data-class]{height:54px;min-height:54px;padding:7px 5px;flex-direction:row;gap:6px;font-size:14px}
 .ember .class-options>button[data-class]:first-child,.ember .scroll-reveal-inner>button[data-class]:last-child{grid-column:1/-1;width:calc((100% - 8px) / 2);justify-self:center}
 .ember .scroll-reveal-inner{gap:8px;grid-auto-rows:54px}
 .ember .scroll-reveal{grid-template-rows:minmax(54px,0fr)}
 .ember .is-unrolled .scroll-reveal{grid-template-rows:minmax(54px,1fr)}
 .ember .class-banner[data-class-theme] .class-banner-art{--art-lift:min(26px,var(--class-art-raise,0px));object-position:86% center;mask-image:linear-gradient(#000 0%,#000 62%,#0007 82%,transparent 100%)}
 .ember .class-banner[data-class-theme]:before{background:linear-gradient(180deg,color-mix(in srgb,var(--class-dark) 84%,transparent),color-mix(in srgb,var(--class-dark) 50%,transparent) 40%,transparent 65%,var(--class-dark) 100%)}
}