/* Detail is an illustrated reading room: the title leads, the artwork sits beside it. */
.detail-view { padding:32px 0 85px; }
.detail-view > .container { max-width:1260px; }
.detail-view .detail-breadcrumb { margin:0 0 35px;padding:0;display:flex;flex-wrap:wrap;gap:10px;color:#9f8d73;font-size:11px;line-height:1.8; }
.detail-breadcrumb [aria-current] { color:#dbc5a4; }
.detail-view .detail-hero-grid { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:76px;align-items:center;margin-bottom:64px; }
.detail-view .detail-header-content { padding:22px 0;min-width:0; }
.detail-overline { display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:2px;font-size:9px;line-height:1.8;color:#c0a578; }
.detail-overline .fine-line { width:28px;height:1px;background:#af8b50; }
.detail-view .detail-canonical-name { color:#f2e4ca;font-size:clamp(34px,4.5vw,62px);line-height:1.16;font-weight:500;letter-spacing:-1px;margin:21px 0 10px;overflow-wrap:anywhere; }
.detail-view .detail-original-script { font-family:var(--font-accent);font-size:24px;font-style:italic;color:#b7a180;margin:0 0 23px; }
.detail-view .detail-short-summary { font-size:15px;line-height:1.95;color:#cbbb9f;margin:22px 0 30px;max-width:55ch; }
.detail-classification-heading { display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px; }
.detail-classification-heading span { font-size:8px;letter-spacing:1.8px;color:#b2a080; }
.detail-classification-heading a { font-size:10px;color:#c9b183;white-space:nowrap; }
.detail-view .detail-header-content .scale-badges { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 25px; }
.detail-view .detail-header-content .scale-badge { display:flex;flex-direction:column;align-items:flex-start;min-height:106px;padding:16px 13px;gap:8px;border-radius:6px;background:linear-gradient(140deg,#211a12,#16120d);border:1px solid color-mix(in srgb,var(--badge-color) 28%,#30271c);box-shadow:none; }
.detail-view .detail-header-content .scale-badge:hover { border-color:var(--badge-color); }
.detail-view .detail-header-content .scale-badge svg { width:21px;height:21px;flex-basis:21px; }
.detail-view .detail-header-content .scale-badge small { font-size:8px;letter-spacing:1.3px; }
.detail-view .detail-header-content .scale-badge strong { font-size:12px;line-height:1.5;margin-top:5px;display:block; }
.detail-view .badge-code { font-size:10px; }
.detail-facts { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px;padding:23px 0;border-top:1px solid #8a6b3e40;border-bottom:1px solid #8a6b3e40; }
.detail-facts dt { font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#a18d6f;margin-bottom:7px; }
.detail-facts dd { font-size:12px;line-height:1.8;color:#dbceb6;margin:0;text-transform:capitalize; }
.detail-view .detail-header-actions { display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:25px; }
.detail-view .detail-header-actions .btn { padding:13px 18px;font-size:11px; }
.detail-save,.detail-compare-link { display:inline-flex;align-items:center;gap:7px;font:11px var(--font-body);color:#c9b188;background:none;border:0;padding:10px 0;cursor:pointer; }
.detail-save [id="fav-icon"] { font-size:20px; }
.detail-save[aria-pressed="true"] { color:#e4c386; }
.detail-illustration { width:100%;max-width:424px;justify-self:center;margin:0;min-width:0; }
.detail-art-stage { position:relative;isolation:isolate;aspect-ratio:4/5;background:#191511;border-radius:var(--frame-radius); }
.detail-art-stage .detail-preview { position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);border-radius:4px;overflow:hidden; }
.detail-art-stage .detail-primary-img { border:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center; }
.detail-art-stage.power-divine .detail-primary-img { object-position:73% center; }
.detail-zoom-mark { position:absolute;left:50%;bottom:17px;transform:translateX(-50%);border:1px solid #c5b18c88;background:#15110bda;border-radius:24px;display:flex;gap:8px;align-items:center;padding:9px 13px;color:#ebdbc0;font-size:11px; }
.detail-art-tools { display:flex;gap:10px;padding:13px 10px 0; }
.detail-art-tools button { flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px;background:#211a12;border:1px solid #856b4366;border-radius:4px;color:#d9c5a0;font:11px var(--font-body);cursor:pointer; }
.detail-art-tools button:hover { background:#302418;border-color:#b19359; }
.detail-art-tools button:disabled { opacity:.45;cursor:default; }
.detail-download-status { font-size:11px;line-height:1.8;margin:8px 12px 0;color:#b6a080; }
.detail-download-status:empty { display:none; }
.detail-illustration figcaption { display:flex;flex-direction:column;gap:5px;padding:13px 12px 0;font-size:10px;line-height:1.7;color:#9f8e72; }
.detail-illustration figcaption > span:first-child { color:#c2ab82;font-size:9px;letter-spacing:.6px;text-transform:uppercase; }
.detail-illustration figcaption small { font-size:9px;color:#8e806c; }
/* A stable reading measure and a persistent table of contents replace full-width panels. */
.detail-reading-layout { display:grid;grid-template-columns:195px minmax(0,1fr);gap:64px;padding-top:46px;border-top:1px solid #8b6a3d55;align-items:start; }
.detail-reading-rail { align-self:stretch; }
.detail-rail-inner { position:sticky;top:116px; }
.detail-reading-rail .eyebrow { font-size:8px;letter-spacing:1.5px; }
.detail-view .detail-toc { display:flex;flex-direction:column;gap:5px;margin:20px 0;padding:0;border:0;background:none; }
.detail-toc button { display:flex;gap:13px;align-items:center;text-align:left;padding:12px 0;font:11px var(--font-body);color:#c7b797;border:0;background:none;cursor:pointer; }
.detail-toc button span { color:#8b744d;font:10px var(--font-display); }
.detail-toc button:hover { color:#f0d9ab; }
.detail-reading-rail p { font:italic 18px/1.65 var(--font-accent);color:#a18e6e;max-width:20ch;margin:27px 0 22px; }
.detail-curation-note { display:inline-block;font-size:8px;letter-spacing:.7px;text-transform:uppercase;color:#ad9977;border-top:1px solid #7b613843;padding-top:14px; }
.detail-reading-content { min-width:0;max-width:860px; }
.detail-summary-section { padding:0 0 42px;margin:0; }
.detail-summary-section h2 { font:500 29px/1.4 var(--font-display);color:#e9d7b8;margin:12px 0 26px; }
.detail-view .story-mode-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 35px;margin:0; }
.detail-view .story-card { padding:0 0 20px;background:none;border:0;border-bottom:1px solid #715b3b4a;border-radius:0;box-shadow:none; }
.detail-view .story-card-title { font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:#b69a68;margin-bottom:10px; }
.detail-view .story-card-body { font-size:13px;line-height:1.9;color:#c7b89e; }
.detail-view .detail-section-block { margin:0 0 50px;padding:0;scroll-margin-top:115px; }
.detail-view .detail-block-title { color:#e7d6b4;font:500 27px/1.5 var(--font-display);margin:0 0 23px;padding:0 0 15px;border-bottom:1px solid #745a333f;gap:0; }
.detail-view .detail-block-title > span:first-child:not(:last-child) { display:none; }
.detail-view .detail-prose-text { padding:0;background:none;border:0!important;border-radius:0;font-size:15px;line-height:2;color:#cebea3;max-width:75ch; }
.detail-view .detail-prose-text p { margin:0 0 18px; }
.detail-view .did-you-know-card { padding:24px 26px;border:0;border-left:2px solid #9f814c;border-radius:0;background:#211a1266;margin:0 0 46px; }
.detail-view .did-you-know-icon { display:none; }
.detail-view .did-you-know-title { font:italic 24px var(--font-accent);color:#dec399;margin-bottom:10px; }
.detail-view .did-you-know-text { font-size:13px;line-height:1.9; }
.detail-reading-content .assessment-panel { padding:28px;background:#1d170f;border:1px solid #866a4055;border-radius:7px;box-shadow:none;margin:0 0 45px;scroll-margin-top:115px; }
.detail-reading-content .assessment-grid { grid-template-columns:1fr;gap:0;margin:20px 0; }
.detail-reading-content .assessment-grid article { position:relative;padding:20px 0 20px 49px;border:0;border-top:1px solid #70573444; }
.detail-reading-content .assessment-symbol { position:absolute;left:0;top:23px;float:none; }
.detail-reading-content .assessment-grid h3 { font-size:22px; }
.detail-reading-content .assessment-grid p { font-size:13px;line-height:1.9; }
.detail-reading-content .assessment-reason { margin-top:12px;padding-top:10px; }
.detail-reading-content .assessment-reason strong { font-size:10px; }
.detail-reading-content .editorial-heading { flex-wrap:wrap;gap:12px; }
.detail-reading-content .editorial-heading h2 { font-size:26px; }
.detail-reading-content .abilities-grid,.detail-reading-content .stories-grid,.detail-reading-content .places-grid,.detail-reading-content .variants-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:15px; }
.detail-reading-content .ability-card,.detail-reading-content .archive-card { padding:22px;background:#1b160f;border:1px solid #7d654137;box-shadow:none;border-radius:5px; }
.detail-reading-content .ability-desc,.detail-reading-content .archive-card-desc { font-size:13px;line-height:1.9; }
.detail-reading-content .ability-matrix-table,.detail-reading-content .claims-table { min-width:640px; }
.detail-reading-content .study-notes { grid-template-columns:1fr;padding:26px;gap:24px;background:#211a13;border-radius:5px; }
.detail-reading-content .study-notes p,.detail-reading-content .study-notes li { font-size:13px;line-height:1.9; }
.detail-reading-content .creature-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }
.detail-reading-content .source-item-card { display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:22px 0;border:0;border-bottom:1px solid #80644040;border-radius:0;background:none; }
.detail-reading-content .source-item-title { font:500 20px/1.5 var(--font-display);color:#dfc8a1; }
.detail-reading-content .source-item-meta { font-size:11px;line-height:1.8;margin-top:6px; }
.detail-reading-content .source-item-card a { font-size:11px!important; }
.detail-view [tabindex="-1"]:focus { outline:none; }
@media(max-width:1050px){
 .detail-view .detail-hero-grid { gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,.85fr); }
 .detail-view .detail-canonical-name { font-size:41px; }
 .detail-reading-layout { grid-template-columns:155px minmax(0,1fr);gap:32px; }
 .detail-art-tools { flex-wrap:wrap; }.detail-art-tools button { white-space:nowrap; }
 .detail-view .detail-header-content .scale-badge { padding:13px 8px; }.detail-view .detail-header-content .scale-badge strong { font-size:10px; }
}
@media(max-width:760px){
 .detail-view { padding-top:24px; }.detail-view .detail-breadcrumb { font-size:10px;margin-bottom:20px; }
 .detail-view .detail-hero-grid { grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:38px; }
 .detail-view .detail-header-content { padding:8px 0; }.detail-view .detail-canonical-name { font-size:clamp(35px,8vw,51px);letter-spacing:-.5px; }
 .detail-view .detail-short-summary { font-size:14px;line-height:1.9;margin:20px 0 24px; }
 .detail-view .detail-header-content .scale-badge { padding:14px 11px; }.detail-view .detail-header-content .scale-badge strong { font-size:11px; }
 .detail-view .detail-header-actions { gap:17px; }.detail-view .detail-header-actions .btn { padding:13px; }
 .detail-illustration { max-width:400px; }.detail-art-tools { padding-top:8px; }
 .detail-reading-layout { display:block;padding-top:24px; }.detail-reading-rail { margin-bottom:35px; }
 .detail-rail-inner { position:static; }.detail-reading-rail p,.detail-curation-note { display:none; }
 .detail-view .detail-toc { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 15px;margin:10px 0 0; }
 .detail-toc button { font-size:11px;border-bottom:1px solid #725b3733; }
 .detail-summary-section h2 { font-size:25px; }.detail-view .story-mode-grid { grid-template-columns:1fr;gap:18px; }
 .detail-view .detail-block-title { font-size:24px; }.detail-view .detail-prose-text { font-size:14px;line-height:1.95; }
 .detail-view .detail-section-block { margin-bottom:38px; }
 .detail-reading-content .abilities-grid,.detail-reading-content .stories-grid,.detail-reading-content .places-grid,.detail-reading-content .variants-grid { grid-template-columns:1fr; }
 .detail-reading-content .assessment-panel { padding:22px 18px; }.detail-reading-content .assessment-grid article { padding-left:0; }.detail-reading-content .assessment-symbol { position:static;float:right; }
 .detail-reading-content .creature-grid { grid-template-columns:1fr;max-width:370px;margin-inline:auto; }
 .detail-view .did-you-know-card { padding:19px 20px; }.detail-reading-content .study-notes { padding:22px; }
 .detail-classification-heading span { font-size:7px;letter-spacing:1px; }
}