.ember{--paper:#efe3c9;--ink:#443021;--muted:#76604b;--accent:#80512d;--line:#c5ad85;--panel:#f8edda;--art:url("/assets/redesign/assets/ember-dice-hoard-loose-v3.webp")}
.ember .site-header{background:#241d18;color:#eddfc6;border-color:#675139}
.ember .brand img{filter:brightness(0) invert(85%) sepia(35%) saturate(350%)}
.ember .bag svg{color:#dfbd7e}
.ember .hero{margin:0;min-height:690px;border:0;background:#2a201b;color:#f7e6c6}
.ember .hero-art{background-position:center 54%}
.ember .hero-copy{padding-left:6%;max-width:690px}
.ember .hero:before{background:linear-gradient(90deg,#261e18e8 0%,#261e18b3 30%,#261e1833 52%,transparent 72%)}
.ember .hero h1 span{color:#e8c68a}
.ember .hero .eyebrow{color:#ddbd87}
.ember .hero-subtitle{color:#f1dfc1}
.ember .ink-mark{background:#cba668}
.ember .hero .button,.ember .class-banner .button{background:#e0bd7e;color:#302217;border-color:#eed4a5}
.ember .hero-caption{background:#2d221ab8;color:#ead9ba;border-color:#cba668}
.ember .hero-caption>span{color:#ddbb7d}
.ember .explore{left:6%;bottom:60px;color:#e2c99e}
.ember .class-panel{position:relative;z-index:2;max-width:1200px;margin:-45px auto 0;padding:35px 40px;background:#efdfbd;border:1px solid #b59865;box-shadow:0 8px 35px #251e1729}
.ember .class-options button{border-left-color:#bba77e99}
.ember .section-heading h2{color:#443021}
.ember .section-heading{border-color:#b7a07d}
.ember .product-class{color:#76604b}
.ember .item-index{background:#443021e8}
.ember .view{border-color:#93602e80}
.ember .stories{background:#e6d6b7}
.ember footer{background:#2a211b}
.ember footer h3,.ember footer .eyebrow{color:#e1c28e}
/* Chosen class expands into a full illustrated feature, the same scale as the roller banner. */
.ember .class-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:470px;max-width:1215px;margin:52px auto 12px;padding:0;background:#2c221b;color:#f4e4c7;border:1px solid #ad8754;outline:5px solid #f6ead3;outline-offset:0}
.class-banner-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:-2}
.class-banner[data-art=rogue] .class-banner-art{object-position:center 18%}
.class-banner{scroll-margin-top:24px}
.class-banner:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#241b16f0,#241b16c4 33%,#241b1633 64%,transparent)}
.banner-story{padding:48px 48px 60px;max-width:570px}
.ember .class-banner .eyebrow{color:#dfbd7e}
.banner-story h2{font:58px/.98 Cormorant,Georgia,serif;margin:18px 0 23px}
.banner-description{font-size:16px;line-height:1.65;max-width:385px;color:#e6d6bb}
.banner-story .button{margin-top:27px}
.ember .class-banner .feature{position:absolute;right:28px;bottom:26px;width:440px;max-width:44%;min-height:158px;gap:20px;padding:0 20px 0 0;background:#2b2019eb;border:0;color:#f0dfbf;backdrop-filter:blur(6px)}
.ember .class-banner .feature img{width:170px;height:170px;flex-shrink:0;object-fit:cover;border:0;align-self:center;margin:-6px 0}
.ember .class-banner .feature h3{font:23px/1.05 Cormorant,serif}
.ember .class-banner .feature .price{font-size:16px}
.ember .class-banner .feature .price del,.ember .class-banner .feature .price small{color:#d5c0a0}
.ember .class-banner .feature-arrow{color:#e0bd7e;margin-left:0}
.banner-art-note{position:absolute;right:28px;top:19px;font:10px Source,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#e2caaa;background:#2a211b88;padding:5px 8px}
@media(max-width:1300px){.ember .class-banner{margin-left:4%;margin-right:4%}.ember .class-panel{margin-left:4%;margin-right:4%}}
@media(max-width:900px){.ember .class-banner{min-height:570px;align-items:start}.banner-story{max-width:490px;padding:36px}.banner-story h2{font-size:49px}.ember .class-banner .feature{bottom:24px;right:24px}.banner-art-note{top:auto;bottom:8px;font-size:8px}.class-banner-art{object-position:65% center}}
@media(max-width:600px){
 .ember .hero{margin:0;min-height:800px;background:#2b211a}
 .ember .hero-copy{padding:32px 7% 0;max-width:none}
 .ember .hero-art{inset:325px 0 0;background-position:80% center;mask-image:linear-gradient(180deg,transparent,#000 18%)}
 .ember .hero:before{display:none}
 .ember .explore{background:#2b211ad9;left:7%;bottom:45px}
 .ember .class-panel{padding:30px 4%;margin-top:-20px}
 .ember .class-banner{min-height:820px;margin:35px 5% 10px;align-items:flex-start}
 .class-banner-art{top:285px;height:430px;object-position:74% center;mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}
 .class-banner[data-art=rogue] .class-banner-art{object-position:92% center}
 .class-banner:before{background:linear-gradient(180deg,#241b16 0%,#241b16e0 31%,transparent 48%)}
 .banner-story{padding:32px 24px;max-width:none}
 .banner-story h2{font-size:45px;margin:15px 0 19px}
 .banner-description{font-size:15px;line-height:1.55}
 .banner-story .button{margin-top:21px}
 .ember .class-banner .feature{left:12px;right:12px;bottom:34px;width:auto;max-width:none;min-height:132px;padding:0 12px 0 0;gap:13px}
 .ember .class-banner .feature img{width:132px;height:145px;margin:-6px 0}
 .ember .class-banner .feature h3{font-size:23px}
 .banner-art-note{right:16px;bottom:10px;font-size:8px}
}