/* Shared, progressively enhanced comic discovery. Native links and scrolling work without JS. */
.comic-shelf{width:100%;min-width:0;margin:28px 0;padding:18px 0;color:#0b1f3a;text-align:left}
.comic-shelf__heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.comic-shelf__heading>div:first-child{flex:1 1 220px}.comic-shelf h2{font-size:26px;line-height:1.2;margin:0 0 6px}.comic-shelf p{font-size:16px;line-height:1.5;margin:0}.comic-shelf__heading>a{color:#a31e22;min-height:44px;display:inline-flex;align-items:center}
.comic-shelf__controls{display:flex;gap:8px}.comic-shelf__controls[hidden]{display:none}.comic-shelf button{width:44px;height:44px;border:1px solid #a31e22;border-radius:50%;background:#fff6d5;color:#0b1f3a;font-size:24px;cursor:pointer}.comic-shelf button:disabled{opacity:.35;cursor:default}
.comic-shelf__list{display:flex!important;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:4px;scrollbar-width:auto;list-style:none!important;padding:4px 4px 16px!important;margin:0!important;max-width:100%;height:auto!important}
.comic-shelf__list>li{flex:0 0 174px;min-width:0;scroll-snap-align:start;display:block!important}.comic-shelf__list a{display:flex;flex-direction:column;gap:6px;color:#0b1f3a;text-decoration:none;border-radius:6px;padding:4px;height:100%}.comic-shelf__list img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;background:#f8ecd1;border-radius:5px;box-shadow:0 3px 8px #0b1f3a26}.comic-shelf__list strong{font-size:17px;line-height:1.3;overflow-wrap:anywhere}.comic-shelf__number{font-size:14px;font-weight:800;color:#a31e22}.comic-shelf__status{font-size:14px;line-height:1.4}.comic-shelf__list a[aria-current]{outline:3px solid #a31e22;outline-offset:-2px;background:#fff0b5}.comic-shelf :focus-visible{outline:3px solid #087bb0;outline-offset:2px}
.home-main .comic-shelf{margin:20px 0 32px}.comic-shelf-disclosure{margin:24px 0}.comic-shelf-disclosure>summary{min-height:44px;padding:10px 0;font-weight:800;cursor:pointer}
.comic-shelf button{display:inline-grid;place-items:center;flex:none}.comic-shelf button .icon{width:22px;height:22px}.comic-shelf button:not(:disabled):hover{background:#ffe493}.comic-shelf__list a:hover{background:#fff0b5}
@media(max-width:600px){.comic-shelf__list>li{flex-basis:146px}.comic-shelf__list{gap:12px}.comic-shelf h2{font-size:23px}}
@media print{.comic-shelf{display:none!important}}

/* Keep the focused cover fully visible when the browser scrolls keyboard focus. */
.comic-shelf__list:focus-within{scroll-snap-type:none}

/* Side controls reserve their own space; covers stay fully clickable. */
.comic-shelf__stage{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:10px;min-width:0}
.comic-shelf__stage:has(.comic-shelf__controls:not([hidden])){grid-template-columns:44px minmax(0,1fr) 44px}
.comic-shelf__controls:not([hidden]){display:contents}
.comic-shelf__stage .comic-shelf__list{grid-row:1;min-width:0}
.comic-shelf__stage:has(.comic-shelf__controls:not([hidden])) .comic-shelf__list{grid-column:2}
.comic-shelf__controls [data-shelf-prev]{grid-column:1;grid-row:1}
.comic-shelf__controls [data-shelf-next]{grid-column:3;grid-row:1}
.comic-shelf__stage .comic-shelf__list>li{flex-basis:clamp(174px,20vw,238px)}
@media(max-width:600px){.comic-shelf__stage{gap:6px}.comic-shelf__stage .comic-shelf__list>li{flex-basis:146px}}

/* Align arrows with the artwork, independent of title and status height. */
.comic-shelf__controls button{align-self:start;margin-top:var(--shelf-control-top,90px)}
.character-shelf{margin:0 0 24px;padding-top:0}
.character-shelf h1{font-size:clamp(28px,3.4vw,40px);line-height:1.15;margin:0 0 8px}
.character-shelf .comic-shelf__list img{aspect-ratio:2/3;object-fit:contain;background:#fff8e8}