:root{
  --red:#a72a24;--red-dark:#781b17;--red-soft:#e5d4c9;
  --paper:#f8f1e7;--paper-2:#f4eadf;--page:#eee8df;
  --ink:#2b2522;--muted:#746a65;--line:#d8cdc1;
  --tan:#bd935d;--gold:#f0ce84;--dark:#211b18;--dark-2:#2b211d;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:radial-gradient(circle at 15% 5%,rgba(167,42,36,.06),transparent 28%),radial-gradient(circle at 90% 90%,rgba(189,147,93,.07),transparent 26%),var(--page);
  color:var(--ink)
}
a{color:inherit}
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,246,238,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(55,35,25,.06)}
.site-header-inner{width:min(1240px,calc(100% - 24px));min-height:74px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px}
.site-brand img{width:170px;max-height:56px;object-fit:contain}
.site-links{display:flex;align-items:center;gap:18px;font-size:12px;font-weight:800}
.site-links a{text-decoration:none;color:#6c5c52}
.site-links a:hover,.site-links a.active{color:var(--red)}
.builder-link{padding:10px 13px;background:var(--red);color:#fff!important;border-radius:5px}

/* Same sourcebook shell as Species */
.layout{width:min(1280px,calc(100% - 24px));margin:24px auto 42px;display:grid;grid-template-columns:245px minmax(0,1fr);gap:18px;align-items:start}
.side{position:sticky;top:98px;background:var(--dark);border:1px solid #4e3c32;border-radius:6px;overflow:hidden;box-shadow:0 16px 38px rgba(42,26,20,.16)}
.side h3{margin:0;padding:17px 16px 5px;background:linear-gradient(145deg,#2b211d,#1d1715);color:var(--gold);font:700 20px Georgia,serif}
.side p{margin:0;padding:0 16px 14px;background:linear-gradient(145deg,#2b211d,#1d1715);color:#bba99a;font-size:10px;line-height:1.45;border-bottom:1px solid #5a4437}
.class-nav{padding:5px 0 8px;background:#f4ede4}
.class-link{display:block;padding:8px 14px 8px 20px;text-decoration:none;color:#55453d;font-size:11px;font-weight:800;border-left:3px solid transparent}
.class-link:hover{color:#9b241f;background:#eadfd4}
.class-link.active{color:#9b241f;border-left-color:var(--red);background:#e5d4c9;font-weight:900}

.main{background:var(--paper);border:1px solid #cdbba9;border-radius:6px;overflow:hidden;box-shadow:0 20px 46px rgba(52,31,22,.12)}

/* Shared Race/Class banner shell */
.main{container-type:inline-size}
.hero{
  position:relative;
  display:block;
  height:36.71875cqw;
  min-height:310px;
  overflow:hidden;
  border-bottom:.3125cqw solid #d2a449;
  background:
    linear-gradient(90deg,rgba(27,6,8,.98) 0%,rgba(33,7,9,.90) 31%,rgba(38,8,10,.40) 58%,rgba(20,8,8,.02) 100%),
    url('/assets/images/species/eladrin-banner-background.jpg') center/cover no-repeat;
  color:#fff;
}
.hero:before{content:none}
.hero-copy{
  position:absolute;
  z-index:3;
  left:4%;
  top:0;
  bottom:0;
  width:43%;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-shadow:none;
}
.kicker{font-size:max(10px,.78125cqw);line-height:1.1;font-weight:900;text-transform:uppercase;letter-spacing:.18em;color:var(--gold)}
.hero h1{font:700 max(48px,5.78125cqw)/.88 Georgia,serif;color:#f7ead3;margin:.78125cqw 0 1.71875cqw;letter-spacing:-.04em}
.hero p{max-width:43.75cqw;color:#d4c2b3;font-size:max(14px,1.25cqw);line-height:1.55;margin:0}
.hero-fact{margin-top:1.40625cqw;color:#f3e5cf;font-size:max(11px,1.015625cqw);font-weight:900;letter-spacing:.02em}
.hero-fact span{color:var(--gold);margin:0 6px}
.class-hero-character{
  position:absolute;
  z-index:2;
  right:1.5%;
  bottom:0;
  width:52%;
  height:96%;
  object-fit:contain;
  object-position:right bottom;
  pointer-events:none;
}
.class-hero-character[hidden]{display:none}
.hero.has-class-art{
  background:
    linear-gradient(90deg,rgba(27,6,8,.98) 0%,rgba(33,7,9,.90) 31%,rgba(38,8,10,.40) 58%,rgba(20,8,8,.08) 100%),
    url('/assets/images/species/eladrin-banner-background.jpg') center/cover no-repeat;
}

/* Parchment content */
.section{padding:28px 40px;border-top:1px solid #e3d8cd;background:linear-gradient(180deg,#f8f1e7,#f4eadf)}
.section:first-of-type{border-top:0}
.section h2{position:relative;margin:0 0 15px;color:var(--red);font:700 27px Georgia,serif}
.subclass{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding-top:24px;padding-bottom:24px}
.subclass h2{margin-bottom:4px}
.subclass p{margin:4px 0 0;color:#746a65;font-size:11px;line-height:1.5}
.subclass select{min-width:240px;min-height:40px;padding:0 36px 0 12px;border:1px solid #c8b39f;border-radius:4px;background:#f2e5d4;color:#332722;font-weight:800}

/* Sourcebook section ribbons */
.section:not(.subclass)>h2{display:inline-block;margin:0 0 18px;padding:9px 28px 9px 19px;background:linear-gradient(90deg,#781b17,#a72a24);color:#fff4df;font:700 22px/1 Georgia,serif;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,8px 50%);box-shadow:inset 0 1px rgba(240,206,132,.4)}

/* Table styled like Species stat/reference body */
.table-wrap{overflow:auto;border-top:1px solid #c6af98;border-bottom:1px solid #c6af98;background:rgba(255,255,255,.16)}
.class-table{width:100%;border-collapse:collapse;min-width:760px;font-size:10.5px}
.class-table th{background:linear-gradient(180deg,#9f2923,#8d201b);color:#fff4df;text-align:left;padding:10px 9px;font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.class-table td{padding:8px 9px;border-top:1px solid #ddd0c2;vertical-align:top;color:#4c403a}
.class-table tr:nth-child(even) td{background:rgba(255,255,255,.22)}
.class-table tbody tr:hover td{background:#efe3d6}

/* Feature accordions mirror Species */
.feature-list{display:block}
.feature{border:0;border-bottom:1px solid #d4c4b5;background:transparent;margin:0}
.feature:first-child{border-top:1px solid #d4c4b5}
.feature summary{cursor:pointer;list-style:none;padding:13px 6px;display:grid;grid-template-columns:1fr 18px;gap:10px;align-items:center;color:#41332d;font:700 16px Georgia,serif;transition:.14s ease}
.feature summary::-webkit-details-marker{display:none}
.feature summary:before{content:"◆";position:absolute;color:var(--tan);font:700 9px/1 Arial,sans-serif}
.feature summary>span:first-child{display:flex;flex-direction:column;gap:3px;padding-left:21px}
.feature summary b{font:inherit}
.feature small{color:#9a7662;font:900 8px/1.2 Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em}
.plus{color:var(--red);font:900 14px/1 Arial,sans-serif;text-align:center}
.feature summary:hover{color:#9b241f;background:rgba(167,42,36,.035)}
.feature[open] summary{color:#9b241f}
.feature[open] .plus{transform:rotate(45deg)}
.feature-body{margin:0 0 15px 27px;padding:1px 26px 1px 14px;border-left:2px solid var(--tan);color:#5c4e47;font-size:12.5px;line-height:1.72;max-width:980px}
.feature-body p{margin:9px 0}
.feature-body b{color:#342923}
.coming{opacity:.58}

/* Footer stays common */
.site-footer{margin-top:46px;background:#211b18;color:#d9cbb9;border-top:4px solid #a72a24;box-shadow:inset 0 1px rgba(255,255,255,.04)}
.site-footer-inner{width:min(1240px,calc(100% - 24px));margin:auto;padding:40px 0 28px;display:grid;grid-template-columns:minmax(260px,1.15fr) 2fr;gap:48px}
.footer-brand img{width:190px;max-height:66px;object-fit:contain;filter:brightness(1.08)}
.footer-brand p{max-width:390px;margin:14px 0 13px;color:#b9a999;font-size:12px;line-height:1.58}
.compat-badge{display:inline-flex;align-items:center;padding:6px 9px;border:1px solid rgba(240,206,132,.35);border-radius:999px;color:#f0ce84;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.footer-col h3{margin:0 0 12px;color:#f0ce84;font:700 15px Georgia,serif}
.footer-col a{display:block;margin:8px 0;color:#c4b6a6;text-decoration:none;font-size:11px}.footer-col a:hover{color:#fff}
.footer-legal{border-top:1px solid rgba(239,225,193,.12);background:#181412}
.footer-legal-inner{width:min(1240px,calc(100% - 24px));margin:auto;padding:15px 0 19px;display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.footer-legal p{margin:0;max-width:900px;color:#958577;font-size:9.5px;line-height:1.55}
.footer-legal a{color:#c8aa74}.footer-copy{white-space:nowrap;color:#8f7f72;font-size:9.5px}

@media(max-width:900px){
  .site-header-inner{flex-wrap:wrap;padding:8px 0 10px}
  .site-links{display:flex;order:2;width:100%;overflow-x:auto;gap:8px;padding:0 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .site-links::-webkit-scrollbar{display:none}
  .site-links a{flex:0 0 auto;padding:9px 11px;border:1px solid var(--line);border-radius:5px;background:#fff}
  .site-links .builder-link{border-color:var(--red);background:var(--red);color:#fff!important}
  .layout{grid-template-columns:1fr;margin-top:10px}
  .side{position:static}
  .side h3,.side p{display:none}
  .class-nav{display:flex;overflow-x:auto;padding:6px;background:#f4ede4}
  .class-link{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}
  .class-link.active{border-bottom-color:var(--red)}
  .main{container-type:normal}
  .hero{
    height:auto;
    min-height:0;
    border-bottom:0;
    background:none;
    display:grid;
    grid-template-rows:auto 390px;
  }
  .hero:after{
    content:"";
    display:block;
    grid-row:2;
    min-height:390px;
    border-bottom:4px solid #d2a449;
    background:
      linear-gradient(180deg,rgba(35,8,10,.02),rgba(35,8,10,.24)),
      url('/assets/images/species/eladrin-banner-background.jpg') 72% center/cover no-repeat;
  }
  .hero-copy{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
    padding:30px 22px 28px;
    background:linear-gradient(135deg,#2a0d0f,#5b1715);
    justify-content:center;
    grid-row:1;
  }
  .hero .kicker{font-size:10px}
  .hero h1{margin:10px 0 18px;font-size:56px}
  .hero p{max-width:none;font-size:16px}
  .hero-fact{margin-top:18px;font-size:13px}
  .class-hero-character{
    right:50%;
    transform:translateX(50%);
    bottom:0;
    width:92%;
    max-width:520px;
    height:390px;
    object-position:center bottom;
    z-index:2;
  }
  .subclass{grid-template-columns:1fr;gap:14px}
  .subclass select{width:100%;min-width:0}
}
@media(max-width:620px){
  .layout{width:min(100% - 16px,1280px)}
  .site-header-inner{width:min(100% - 16px,1240px)}
  .site-brand img{width:142px}
  .hero{grid-template-rows:auto 360px}
  .hero:after{min-height:360px}
  .hero h1{font-size:46px}
  .section{padding:22px 18px 28px}
  .section:not(.subclass)>h2{font-size:20px}
  .hero-copy{padding:18px}
  .footer-columns{grid-template-columns:1fr 1fr}
  .footer-legal-inner{flex-direction:column}
  .footer-copy{white-space:normal}
}
@media(max-width:480px){
  .footer-columns{grid-template-columns:1fr}
}

/* Readability pass: Class browser/pages */
.side p{font-size:12px;line-height:1.5}
.class-link{font-size:13.5px;line-height:1.35}
.hero p{font-size:16px;line-height:1.68}
.hero-fact{font-size:13px}
.subclass p{font-size:13px;line-height:1.55}
.subclass select{font-size:13px}
.class-table{font-size:12px}
.class-table th{font-size:10px}
.feature summary{font-size:18px}
.feature small{font-size:9px}
.feature-body{font-size:14.5px;line-height:1.75}
@media(max-width:620px){
  .class-link{font-size:14px}
  .hero p{font-size:15px}
  .feature summary{font-size:17px}
  .feature-body{font-size:14px}
}