/* Local responsive refinement, restored original hero, and art studies. */
.ember{--art:url("/assets/redesign/assets/ember-dice-hoard.webp")}
.ember .class-panel{background:linear-gradient(90deg,#c6a66c45,transparent 12%,transparent 86%,#b8955f40),radial-gradient(ellipse at 15% 33%,#ac793515,transparent 55%),#efdfb8;border-color:#b69961;border-radius:4px;box-shadow:inset 12px 0 14px -12px #5e3d16,inset -12px 0 15px -13px #5e3d16,0 12px 22px #130e0840;padding:36px 42px}
.ember .class-panel:before,.ember .class-panel:after{content:'';position:absolute;top:-11px;bottom:-11px;width:29px;border:1px solid #96703f;border-top:7px solid #a37d46;border-bottom:7px solid #a37d46;border-radius:14px / 10px;background:linear-gradient(90deg,#a58149,#dec393 17%,#f9ebc5 40%,#e8d2a0 66%,#b18a4c);box-shadow:inset 0 2px 2px #f5dfac,inset 0 -2px 2px #745024,3px 3px 7px #21140740;pointer-events:none}
.ember .class-panel:before{left:-14px}.ember .class-panel:after{right:-14px;transform:rotate(180deg)}
.ember .class-intro h2{font-style:italic}.ember .class-intro>p:last-child{color:#655039}
#class-heading{scroll-margin-top:90px}
.scroll-reveal,.scroll-reveal-inner{display:contents}.scroll-toggle{display:none}
.ember .class-options button{border:0;border-bottom:1px solid #b8a17b70;font-family:Cormorant,Georgia,serif;font-size:17px;min-height:73px}
.ember .class-options button[aria-pressed=true]{background:#68492e;color:#fff4dc;clip-path:none}
.ember .class-options button:hover{background:#c8ad7c66}
.ember .class-options button[aria-pressed=true]:hover{background:#68492e}
.ember .class-banner .feature{background:#f4e7cb;color:#392c20;box-shadow:0 10px 32px #100b0870;backdrop-filter:none;right:26px;bottom:25px;padding-right:20px;gap:18px;min-height:180px;width:470px;max-width:46%}
.ember .class-banner .feature img{width:190px;height:190px;margin:-5px 0;object-fit:cover}
.ember .class-banner .feature .eyebrow{color:#6d4c26}
.ember .class-banner .feature .price{font-size:19px}
.ember .class-banner .feature .price del,.ember .class-banner .feature .price small{color:#6e604c}
.ember .class-banner .feature-arrow{color:#6b4624}
.ember .class-banner .feature h3{font-size:25px}
.ember .sheets-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;max-width:1215px;min-height:470px;margin:50px auto 40px;background:#30261d;color:#fff0d5;border:7px solid #f8edda;outline:1px solid var(--line)}
.sheets-banner>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.sheets-banner:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#251e17f2,#251e17cf 32%,#251e1733 66%,transparent)}
.sheets-banner>div{padding:44px 48px;max-width:540px}
.sheets-banner .eyebrow{color:#e8ca94}
.sheets-banner h2{font:59px/.95 Cormorant,Georgia,serif;margin:19px 0 24px}
.sheets-banner h2 em{font-weight:400;color:#e6c78b}
.sheets-banner p:not(.eyebrow){font-size:16px;line-height:1.65;color:#efdfc5}
.sheets-banner .button{margin:25px 0 15px;background:#e0bd7e;color:#302217;border-color:#eed4a5}
.sheets-banner small{display:block;font-size:12px;color:#e0ccb0}
.ember .stories{display:block;max-width:1215px;margin-top:35px;background:none}
.ember .stories>a{display:block;padding:35px 5%;text-align:center}
.ember .stories p:not(.eyebrow){margin:auto;max-width:600px}
.ember .design-dock{max-width:calc(100% - 24px);gap:10px}
.ember .design-dock select{max-width:220px}
.ember .hero-select-label select{max-width:175px}
@media(max-width:1300px){.ember .sheets-banner{margin-left:4%;margin-right:4%}}
@media(max-width:900px){.ember .class-panel{padding:30px}.ember .class-banner .feature{max-width:440px;width:calc(100% - 48px)}.ember .sheets-banner>div{padding:35px}.sheets-banner h2{font-size:52px}}
@media(max-width:600px){
 .ember .hero{min-height:660px;display:block;background:#2b211a}
 .ember .hero-copy{padding:30px 7% 0;max-width:100%}
 .ember .hero h1{font-size:58px;line-height:.99;margin:18px 0 17px}
 .ember .hero .eyebrow{font-size:9px}
 .ember .hero .ink-mark{margin-top:12px}
 .ember .hero-subtitle{font-size:27px;max-width:280px}
 .ember .hero-actions{margin-top:22px;gap:17px}
 .ember .hero-art{inset:0;mask-image:none;background-size:auto 100%;background-position:79% center}
 .ember .hero:before{display:block;background:linear-gradient(180deg,#241c17e8 0%,#241c17db 30%,#241c1766 51%,#241c170a 70%,#241c17a6 100%)}
 .ember[data-hero=goblin] .hero-art{background-position:83% center}
 .ember[data-hero=wizard] .hero-art{background-position:80% center}
 .ember[data-hero=tavern] .hero-art{background-position:85% center}
 .ember[data-hero=portal] .hero-art{background-position:85% center}
 .ember .explore{bottom:51px;background:#2b211aa6}
 .ember .class-panel{display:block;width:calc(100% - 48px);margin:-20px 24px 30px;padding:28px 20px 33px;box-shadow:inset 0 12px 14px -12px #5e3d16,inset 0 -12px 15px -13px #5e3d16,0 12px 22px #130e0840}
 .ember .class-panel:before,.ember .class-panel:after{left:-10px;right:-10px;width:auto;height:27px;bottom:auto;border:1px solid #96703f;border-left:7px solid #a37d46;border-right:7px solid #a37d46;border-radius:10px / 14px;background:linear-gradient(180deg,#a58149,#dec393 17%,#f9ebc5 40%,#e8d2a0 66%,#b18a4c)}
 .ember .class-panel:before{top:-14px}.ember .class-panel:after{top:auto;bottom:-14px}
 .ember .class-intro{text-align:center;margin-bottom:18px}
 .ember .class-intro h2{font-size:32px;margin:7px 0 9px}
 .ember .class-intro>p:last-child{font-size:14px;margin:auto;padding-bottom:15px;border-bottom:3px double #b8a17b}
 .ember .class-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
 .ember .class-options>button:first-child{grid-column:1/-1}
 .ember .class-options button{min-height:43px;display:flex;flex-direction:row;justify-content:center;gap:9px;padding:9px 5px;font-size:17px}
 .ember .class-options button>span{font-size:19px}
 .ember .scroll-reveal{display:grid;grid-column:1/-1;grid-template-rows:minmax(46px,0fr);mask-image:linear-gradient(#0008,#0003 65%,transparent);transition:grid-template-rows .45s ease}
 .ember .scroll-reveal-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;overflow:hidden;min-height:0}
 .ember .scroll-reveal-inner>button:last-child{grid-column:1/-1}
 .ember .scroll-reveal-inner>button:first-child{grid-column:auto}
 .ember .is-unrolled .scroll-reveal{grid-template-rows:minmax(46px,1fr);mask-image:none}
 .ember .scroll-toggle{position:absolute;z-index:3;left:50%;bottom:-25px;transform:translateX(-50%);display:grid;place-items:center;width:46px;height:46px;border:1px solid #91703b;border-radius:50%;background:#ead3a0;color:#51371e;box-shadow:inset 0 0 0 3px #f8e8bf,0 3px 7px #21140755}
 .scroll-toggle svg{transition:transform .3s}.is-unrolled .scroll-toggle svg{transform:rotate(180deg)}
 .ember .class-banner{min-height:750px;margin-top:55px}
 .ember .class-banner .class-banner-art{inset:0;width:100%;height:100%;object-position:78% center;mask-image:linear-gradient(180deg,#000 0%,#000 55%,#0008 77%,transparent 96%)}
 .ember .class-banner[data-art=rogue] .class-banner-art{object-position:85% center}
 .ember .class-banner:before{background:linear-gradient(180deg,#241b16e8 0%,#241b16bd 27%,#241b1633 50%,#241b1655 66%,#241b16 92%)}
 .ember .banner-story{padding:30px 23px 0;position:relative;z-index:1}
 .ember .banner-story h2{font-size:43px;margin:14px 0 18px}
 .ember .banner-description{font-size:15px}
 .ember .class-banner .feature{left:12px;right:12px;bottom:23px;width:auto;max-width:none;min-height:157px;padding:0 12px 0 0;gap:13px;z-index:2;box-shadow:0 8px 28px #130b0899}
 .ember .class-banner .feature img{width:145px;height:167px;margin:-5px 0}
 .ember .class-banner .feature h3{font-size:23px}
 .ember .class-banner .feature .eyebrow{font-size:8px;letter-spacing:.09em}
 .ember .class-banner .feature .price{font-size:17px;gap:3px 5px}
 .ember .sheets-banner{min-height:600px;margin:35px 5%;align-items:flex-end}
 .sheets-banner>img{object-position:73% center}
 .sheets-banner:after{background:linear-gradient(0deg,#251e17fa 0%,#251e17eb 35%,#251e1766 67%,#251e1700)}
 .ember .sheets-banner>div{padding:28px 24px}
 .sheets-banner h2{font-size:47px;margin:17px 0 20px}
 .sheets-banner p:not(.eyebrow){font-size:15px}
 .sheets-banner small{font-size:10px}
 .ember .design-dock{display:grid;grid-template-columns:1fr 1fr auto;width:calc(100% - 16px);max-width:none;gap:6px;padding:7px}
 .ember .design-dock>a:first-child{font-size:11px;grid-column:1/-1;text-align:center}
 .ember .design-dock>a:first-child:after{content:none}
 .ember .design-dock select{width:100%;max-width:none;font-size:10px;padding:8px 3px}
}
@media(prefers-reduced-motion:reduce){.scroll-reveal,.scroll-toggle svg{transition:none}}