/* Fade the artwork into paper; the scroll sits inside that transition. */
.ember .hero{background:var(--paper);overflow:visible;--hero-extension:150px}
.ember .hero:after{display:none}
.ember .hero-art,.ember .hero:before{bottom:calc(-1 * var(--hero-extension));mask-image:linear-gradient(#fff,#fff),url("/assets/redesign/assets/pigment-fade-v3.webp");mask-size:100% 100%,100% 240px;mask-position:center,center bottom;mask-repeat:no-repeat;mask-composite:exclude;mask-mode:luminance,luminance}
.ember .class-panel{display:block;isolation:isolate;z-index:3;margin-top:-88px;margin-bottom:25px;padding:28px 46px 34px 90px;background:none;border:0;border-radius:0;box-shadow:none}
.ember .class-panel:before{content:'';position:absolute;z-index:-1;inset:-16px -8px;width:auto;height:auto;border:0;border-radius:0;background:url("/assets/redesign/assets/parchment-scroll-open-right.png") center/100% 100% no-repeat;box-shadow:none;transform:none;filter:drop-shadow(0 7px 6px #27180a33)}
.ember .class-panel:after{display:none}
.ember .class-intro{text-align:center;margin:0 0 20px}
.ember .class-intro h2{font-size:36px;line-height:1.15;margin:5px 0 9px}
.ember .class-intro .eyebrow{font-size:9px;letter-spacing:.2em}
.ember .class-intro>p:last-child{font-size:14px;max-width:none;margin:0 auto;color:#665139}
.ember .class-options{gap:5px 12px;grid-template-columns:repeat(7,minmax(0,1fr))}
.ember .class-options button{border:0;border-bottom:1px solid #78562f30;border-radius:2px;min-height:60px;padding:8px 4px;gap:5px;font-size:16px;line-height:1.25}
.ember .class-options button>span{font-size:18px}
.ember .class-options button[aria-pressed=true]{background:#654a31ed}
@media(max-width:1150px) and (min-width:601px){.ember .class-panel{padding-left:65px;padding-right:35px}.ember .class-options{gap:5px}.ember .class-options button{font-size:15px}}
@media(max-width:600px){
 .ember .hero{background:var(--paper)}
 .ember .hero-art,.ember .hero:before{mask-size:100% 100%,auto 210px;mask-position:center,58% bottom}
 .ember .class-panel{width:calc(100% - 38px);margin:-70px 19px 28px;padding:45px 25px 47px}
 .ember .class-panel:before{inset:-9px -8px;width:auto;height:auto;background:none;border-style:solid;border-width:52px 16px;border-image:url("/assets/redesign/assets/parchment-scroll-mobile.png") 220 70 210 70 fill / 52px 16px 52px 16px / 0 stretch;filter:drop-shadow(0 5px 5px #27180a2c)}
 .ember .class-panel.is-unrolled:before{border-image-source:url("/assets/redesign/assets/parchment-scroll-mobile-open.png");border-image-slice:220 70 100 70 fill;border-image-width:52px 16px 25px 16px}
 .ember .class-panel:after{display:none}
 .ember .class-intro{margin-bottom:12px}
 .ember .class-intro h2{font-size:31px}
 .ember .class-intro>p:last-child{border-bottom:1px solid #95744660;padding-bottom:12px}
 .ember .class-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
 .ember .class-options button{min-height:44px;padding:9px 4px;gap:8px;font-size:16px;flex-direction:row}
 .ember .class-panel.is-unrolled{padding-bottom:35px}
 .ember .class-panel.is-unrolled .scroll-toggle{bottom:-12px}
 .ember .scroll-toggle{bottom:-8px;width:40px;height:40px;background:#e9d5ad;border-color:#ab8b5e;box-shadow:inset 0 0 0 2px #f5e6ca,0 2px 5px #26180940}
 .ember .class-banner{display:flex;flex-direction:column;align-items:stretch;min-height:0;margin-top:34px}
 .ember .banner-story{padding:28px 23px 0;max-width:none}
 .ember .class-banner .feature{position:relative;left:auto;right:auto;bottom:auto;top:auto;align-self:stretch;max-width:none;width:auto;margin:76px 12px 18px;min-height:185px}
 .ember .class-banner .feature>div{padding:12px 0}
 .ember .class-banner .class-banner-art{object-position:83% center}
 .ember .class-banner[data-art=ranger] .class-banner-art{object-position:79% center}
}