/* Source-backed tools: character portraits and deliberate reading hierarchy. */
.compare-panel{overflow:hidden}
.compare-panel__hero{display:grid;grid-template-columns:minmax(115px,38%) minmax(0,1fr);align-items:center;min-height:228px;position:relative;margin:-28px -28px 24px;padding:9px 20px 8px 0;border-bottom:1px solid #7b674f;background:radial-gradient(circle at 23% 39%,#65748278,transparent 54%),linear-gradient(122deg,#263545 0%,#111c28 100%);isolation:isolate}
.compare-panel__hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#121e2b79,transparent 72%);z-index:-1}
.compare-panel__portrait{width:100%;height:220px;object-fit:contain;object-position:center bottom;align-self:end;filter:drop-shadow(4px 10px 15px #0008)}
.compare-panel__identity{position:relative;z-index:1;min-width:0}
.compare-panel__identity h2{margin:11px 0 10px;font-size:clamp(1.45rem,2.5vw,2.15rem);color:#fff1da}
.compare-panel__identity .section-eyebrow{font-size:.61rem}
.compare-panel__identity .compare-summary{font-size:.78rem;min-height:0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;color:#d2d5da}
.class-focus{gap:0}
.class-focus__hero{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center;width:100%;margin:12px 0 23px;background:linear-gradient(100deg,#26384a,#182632);border-bottom:1px solid #77613d}
.class-focus__portrait{width:100%;height:206px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 15px #0008)}
.class-focus__intro{padding:18px 17px 18px 0;min-width:0}
.class-focus__intro .section-eyebrow{letter-spacing:.12em;font-size:.59rem}
.class-focus__intro h3{font:500 clamp(1.1rem,2vw,1.55rem)/1.13 Georgia,serif;letter-spacing:-.04em;color:#fff0d6;margin:10px 0}
.class-focus__intro p{font-size:.75rem;line-height:1.64;margin:0;color:#bfcbd1}
.class-focus>.check-list{padding-left:21px}
/* Image-backed tool introductions. CSS :has() is progressive enhancement; plain titles still work. */
body:has(#compare-results) .page-intro,
body:has(#board-progress) .page-intro,
body:has(#leveling-list) .page-intro{
  position:relative;max-width:none;min-height:365px;isolation:isolate;
  padding:56px 48px 63px;margin:34px 0 28px;border:1px solid #534a3d;
  overflow:hidden;
  background:linear-gradient(90deg,#0d111bf6 0%,#0b111bed 45%,#101723c7 100%),url("/assets/media/raid-party-official.webp") center/cover;
}
body:has(#board-progress) .page-intro{background-image:linear-gradient(90deg,#0d111bf4 0%,#0b111bee 45%,#101723c2 100%),url("/assets/media/world-flight-official.webp")}
body:has(#leveling-list) .page-intro{background-image:linear-gradient(90deg,#0d111bf5 0%,#0b111be9 45%,#101723b5 100%),url("/assets/media/world-underground-official.webp")}
body:has(#compare-results) .page-intro::after{
 content:"";position:absolute;right:1%;bottom:-24px;width:36%;height:98%;pointer-events:none;opacity:.88;z-index:-1;
 background:url("/assets/media/class-ranger.webp") center bottom/contain no-repeat;
 filter:drop-shadow(-8px 9px 20px #05080caa)
}
body:has(#board-progress) .page-intro::after{
 content:"";position:absolute;right:1%;bottom:-27px;width:37%;height:102%;pointer-events:none;opacity:.85;z-index:-1;
 background:url("/assets/media/class-sorcerer.webp") center bottom/contain no-repeat;
}
body:has(#compare-results) .page-intro>*,body:has(#board-progress) .page-intro>*,body:has(#leveling-list) .page-intro>*{position:relative;z-index:1;max-width:min(650px,69%)}
body:has(#compare-results) .page-intro h1,body:has(#board-progress) .page-intro h1,body:has(#leveling-list) .page-intro h1{font-size:clamp(2.8rem,4.5vw,4.8rem);line-height:1.07}
body:has(#compare-results) .page-intro .lead,body:has(#board-progress) .page-intro .lead,body:has(#leveling-list) .page-intro .lead{color:#d8d6d4}
@media(max-width:690px){
 body:has(#compare-results) .page-intro,body:has(#board-progress) .page-intro,body:has(#leveling-list) .page-intro{min-height:340px;margin:17px 0 26px;padding:36px 20px 41px}
 body:has(#compare-results) .page-intro>*,body:has(#board-progress) .page-intro>*,body:has(#leveling-list) .page-intro>*{max-width:89%}
 body:has(#compare-results) .page-intro h1,body:has(#board-progress) .page-intro h1,body:has(#leveling-list) .page-intro h1{font-size:clamp(2.8rem,9vw,4rem)}
 body:has(#compare-results) .page-intro::after,body:has(#board-progress) .page-intro::after{opacity:.3;right:-20%;width:75%}

 .compare-panel__hero{margin:-20px -20px 21px;grid-template-columns:34% minmax(0,1fr);padding-right:11px;min-height:183px}
 .compare-panel__portrait{height:180px}
 .compare-panel__identity h2{font-size:1.7rem}
 .compare-panel__identity .compare-summary{-webkit-line-clamp:4;font-size:.73rem}
 .class-focus__hero{grid-template-columns:105px minmax(0,1fr);gap:12px}
 .class-focus__portrait{height:173px}
 .class-focus__intro{padding:10px 12px 10px 0}
 .class-focus__intro h3{font-size:1.14rem}
 .class-focus__intro p{font-size:.7rem}
}
@media(max-width:370px){
 .class-focus__hero{grid-template-columns:82px minmax(0,1fr)}
 .class-focus__portrait{height:156px}
 .compare-panel__portrait{height:156px}
 .compare-panel__hero{min-height:160px}
}