/* Full-bleed banner spans the side space as well as the central catalogue. */
#banner-origin{height:0;margin:0;padding:0;pointer-events:none}
#banner-shelf{position:sticky;top:0;z-index:12;width:100%;height:var(--banner-reserved,390px);margin:0;padding:0 12px;pointer-events:none}
#banner-stage{position:relative;width:100%;max-width:none;height:390px;margin:0;overflow:hidden;border:1px solid #393044;border-radius:18px;background:#17131f;color:#fff;pointer-events:none;isolation:isolate}
#banner-art,#banner-selectors{position:absolute;inset:0;pointer-events:none}
#banner-art{z-index:0}
.banner-book-art{position:absolute;overflow:hidden;background:#262031;pointer-events:none}
.banner-book-art:not(.is-current){visibility:hidden;opacity:0}
.banner-book-art.is-current{z-index:2}
.banner-source-cover{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 30%}
.banner-wash{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#101017f5 0%,#101017cf 22%,#10101770 48%,#10101705 78%),linear-gradient(0deg,#101017d9 0%,transparent 50%);opacity:calc(1 - var(--banner-spine-opacity,0));pointer-events:none}
#banner-copy{position:absolute;z-index:3;left:32px;top:40px;width:min(580px,55%);max-width:none;opacity:var(--banner-facts-opacity,1);pointer-events:none;text-shadow:0 2px 12px #0008}
.banner-kicker{margin:0 0 12px;color:#d1c1ff;font:700 12px/1.5 var(--yoru-font);letter-spacing:.14em}
#banner-title{margin:0 0 15px;color:#fff;font:800 clamp(26px,3.4vw,54px)/1.16 var(--yoru-font);letter-spacing:-.03em;overflow-wrap:anywhere;text-wrap:balance}
#banner-creator,#banner-genres,#banner-latest{margin:6px 0;color:#e7e2ee;font:400 14px/1.6 var(--yoru-font);overflow-wrap:anywhere}
#banner-genres{color:#d1c1ff;font-weight:600}
#banner-latest{color:#d3ccd9;font-size:13px}
#banner-selectors{z-index:5}
.banner-choice{position:absolute;display:grid;place-items:center;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:7px;color:#fff;background:transparent;pointer-events:auto;cursor:pointer}
.banner-dot{display:block;width:8px;height:8px;border:1px solid #fff9;border-radius:20px;background:#fff5;opacity:var(--banner-dot-opacity,1);box-shadow:0 1px 5px #0008}
.banner-choice[aria-pressed="true"] .banner-dot{width:28px;background:#c5b3ff;border-color:#c5b3ff}
.banner-spine-name{position:absolute;inset:4px;display:block;visibility:hidden;padding:4px 3px;border-radius:4px;background:#15121dc9;color:#fff;font:600 13px/1.5 var(--yoru-font);writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:var(--banner-spine-opacity,0);pointer-events:none}
#banner-shelf[data-compact="true"] .banner-choice[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #c5b3ff}
#banner-shelf[data-compact="true"] .banner-book-art{border-radius:6px;box-shadow:3px 2px 0 #0008}
#banner-detail{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:7px 12px;border:1px solid #c5b3ff;border-radius:9px;background:#b9a2ff;color:#1c112d;font:700 14px/1.5 var(--yoru-font);pointer-events:auto;cursor:pointer;box-shadow:0 4px 18px #0003}
#banner-detail:hover{background:#d4c5ff}
#banner-compact-title{position:absolute;top:50%;z-index:3;transform:translateY(-50%);visibility:hidden;opacity:var(--banner-compact-opacity,0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e5def8;font:600 15px/1.5 var(--yoru-font);pointer-events:none}
#banner-shelf button:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.has-banner-shelf .browse-tools{position:sticky;top:calc(var(--banner-band-height,0px) + 8px);z-index:13;padding-block:5px;background:#101017}
.has-banner-shelf #catalog{overflow:visible}
.has-banner-shelf .story-item{scroll-margin-top:calc(var(--banner-band-height,0px) + 150px)}
#banner-shelf[data-short="true"]{position:relative}
.banner-short-viewport .browse-tools{position:relative;top:auto}
body:has(#book-dialog[open]) #banner-stage{visibility:hidden}
@media(max-width:650px){
 #banner-shelf{padding-inline:8px;height:var(--banner-reserved,340px)}
 #banner-stage{height:340px;border-radius:12px}
 #banner-copy{left:18px;top:30px;width:calc(100% - 36px);max-width:450px}
 .banner-wash{background:linear-gradient(90deg,#101017db,#10101735),linear-gradient(0deg,#101017e8,transparent 100%)}
 .banner-kicker{font-size:11px;margin-bottom:12px}
 #banner-title{font-size:30px;max-width:90%;line-height:1.2}
 #banner-creator{display:none}
 #banner-genres{font-size:13px;max-width:90%}
 #banner-latest{font-size:12px}
 #banner-compact-title{display:none}
 #banner-detail{font-size:12px;padding-inline:5px}
}
@media(prefers-reduced-motion:reduce){#banner-shelf *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Match the actual center track, not just the outer viewport. */
#banner-shelf[data-narrow="true"] #banner-copy{left:18px;top:30px;width:calc(100% - 36px);max-width:450px}
#banner-shelf[data-narrow="true"] .banner-wash{background:linear-gradient(90deg,#101017db,#10101735),linear-gradient(0deg,#101017e8,transparent 100%)}
#banner-shelf[data-narrow="true"] #banner-title{font-size:30px;max-width:90%;line-height:1.2}
#banner-shelf[data-narrow="true"] #banner-creator{display:none}
#banner-shelf[data-narrow="true"] #banner-genres{font-size:13px;max-width:90%}
#banner-shelf[data-narrow="true"] #banner-latest{font-size:12px}
#banner-shelf[data-narrow="true"] #banner-compact-title{display:none}
#banner-shelf[data-narrow="true"] #banner-detail{font-size:12px;padding-inline:5px}

/* Portrait key visuals retain their complete composition over a soft full-bleed echo. */
.banner-portrait-art{background-size:cover;background-position:center}
.banner-portrait-art::before{content:'';position:absolute;inset:-20px;background-image:inherit;background-size:cover;background-position:center;filter:blur(16px);opacity:.6;pointer-events:none}
.banner-portrait-art .banner-source-cover{position:relative}

/* Compact mode is a full catalogue ribbon, not a partially morphed hero. */
#banner-compact-books{position:absolute;z-index:7;inset:0;display:flex;gap:6px;padding:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#716086 #17131f;pointer-events:auto}
#banner-compact-books[hidden]{display:none!important}
.banner-compact-book{position:relative;flex:0 0 var(--compact-slot,60px);width:var(--compact-slot,60px);min-width:112px;height:var(--compact-card-height,84px);min-height:44px;overflow:hidden;margin:0;padding:0;border:1px solid #675878;border-radius:5px;background:#211b2b;color:#fff;cursor:pointer;box-shadow:2px 0 0 #0005}
.banner-compact-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.banner-compact-name{position:absolute;left:0;right:0;bottom:0;display:block;width:100%;margin:0;padding:9px 8px;color:#fff;background:#17101bcc;border-radius:3px;font:600 12px/1.5 var(--yoru-font);writing-mode:horizontal-tb;text-orientation:mixed;white-space:normal;overflow:visible;overflow-wrap:anywhere;word-break:normal;text-align:left;text-shadow:0 1px 3px #000}
.banner-compact-book:hover{border-color:#c5b3ff}.banner-compact-book:hover .banner-compact-cover{opacity:1}

#banner-shelf[data-compact="true"] #banner-stage{border-radius:10px}


/* Change complete layers, never squeeze artwork into partially formed spines.
   Stage and sticky offset share one JS height; flow credits only consumed scroll. */
#banner-stage{transition:border-radius 300ms ease}
#banner-art,#banner-copy,#banner-selectors,#banner-detail,.banner-wash{transition:opacity 170ms ease;will-change:auto}
#banner-art,#banner-selectors,#banner-detail{opacity:1}
#banner-compact-books{opacity:0;transform:translateY(10px);transition:opacity 180ms ease,transform 300ms cubic-bezier(.22,.7,.2,1)}
#banner-shelf[data-compact="true"] #banner-art,#banner-shelf[data-compact="true"] #banner-selectors,#banner-shelf[data-compact="true"] #banner-detail{opacity:0;pointer-events:none}
#banner-shelf[data-compact="true"] #banner-compact-books{opacity:1;transform:translateY(0);transition-delay:60ms}
#banner-shelf[data-compact="false"] #banner-compact-books{pointer-events:none}
.has-banner-shelf .browse-tools{transition:none}
/* Relocate removed flow to the end, never between banner and search. Keeping
   document length stable prevents bottom clamping/expand loops on short filters. */
#catalog-center{overflow-anchor:none;padding-bottom:var(--banner-tail-reserve,0px)}
#banner-shelf,#banner-stage{overflow-anchor:none}
#banner-shelf[data-animate="false"] #banner-stage,#banner-shelf[data-animate="false"] #banner-art,#banner-shelf[data-animate="false"] #banner-copy,#banner-shelf[data-animate="false"] #banner-selectors,#banner-shelf[data-animate="false"] #banner-detail,#banner-shelf[data-animate="false"] .banner-wash,#banner-shelf[data-animate="false"] #banner-compact-books{transition:none}
@media(prefers-reduced-motion:reduce){.has-banner-shelf .browse-tools{transition:none}}

#catalog-shell[data-banner-animate="false"] .browse-tools{transition:none}

/* v67: only the painted sticky band occludes scrolling content. The root can
   reserve the expanded flow height, so an opaque root would hide the catalogue.
   This painted backplate seals the inset/rounded stage edges and toolbar seam. */
#banner-shelf::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:0;height:calc(var(--banner-painted-height,390px) + 14px);background:#101017;pointer-events:none}
#banner-shelf[data-short="true"]::before{height:var(--banner-painted-height,390px)}
body:has(#book-dialog[open]) #banner-shelf::before{visibility:hidden}

/* v67: an inset frame remains above compact art but never steals hit targets. */
#banner-shelf[data-compact="true"] #banner-stage::after{content:"";position:absolute;inset:0;z-index:9;border-bottom:1px solid #675878;border-radius:inherit;pointer-events:none}

/* Round the actual opaque painted backing, not merely its inset child. */
#banner-shelf[data-compact="true"]::before{border-radius:12px;overflow:hidden}

/* Shared compact card height; no unused scrollbar lane under the ribbon. */
#banner-compact-books{scrollbar-width:none;scroll-padding:8px;}
#banner-compact-books::-webkit-scrollbar{display:none}
.banner-compact-book{height:var(--shared-compact-card-height,var(--compact-card-height,84px))}
/* Receive hover over the artwork as well as over its controls. */
#banner-stage{pointer-events:auto}
/* Keep the compact frame inside the shared row height, not two extra pixels. */
#banner-shelf[data-compact="true"] #banner-stage { border-width:0; box-shadow:inset 0 0 0 1px #675878; }