/* v59: side shelves start alongside the hero, with the trailer behind them. */
#catalog-shell { position:relative; z-index:2; }
#catalog-flow { position:relative; }
#catalog-center { grid-column:2; grid-row:1; min-width:0; align-self:start; }
#catalog-center > #catalog { width:100%; }
#catalog-flow > .side-shelf { grid-row:1; z-index:2; }
#story-grid { grid-template-columns:minmax(0,1fr); gap:30px; }
body:not(.has-detail) #story-grid .group-grid,
body:not(.has-detail) #story-grid:has(> .story-group[hidden]) > .story-group:not([hidden]) .group-grid { grid-template-columns:repeat(3,minmax(0,1fr)); --shelf-columns:3; gap:18px; }
.cover-slot { height:250px; }
.card-copy { padding-bottom:15px; }
.card-genres { position:relative; z-index:2; margin:8px 0 5px; color:#c1b2ff; font:500 12px/1.6 var(--yoru-font); }
.card-premise { position:relative; z-index:2; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0; color:#bdb8cb; font:400 13px/1.65 var(--yoru-font); }
#trailer-dock { position:fixed; z-index:1; left:0; bottom:calc(-1 * clamp(28px,4vh,54px)); --trailer-base:clamp(330px,32vw,620px); width:var(--trailer-base); height:var(--trailer-base); overflow:visible; border-radius:0; background:transparent; opacity:1; mix-blend-mode:normal; -webkit-mask-image:url("assets/trailer-edge-v61.svg"); mask-image:url("assets/trailer-edge-v61.svg"); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; pointer-events:none; }
#trailer-viewport { position:absolute; inset:0; overflow:hidden; }
#trailer-poster { width:100%; height:100%; object-fit:cover; object-position:center; opacity:1; filter:none; }
#trailer-player { position:absolute; inset:0 auto 0 0; width:var(--trailer-base); opacity:0; filter:none; transition:opacity .5s; }
#trailer-dock[data-playing="true"] #trailer-player { opacity:1; }
#trailer-player iframe { position:absolute; width:177.777778%; height:100%; max-width:none; left:0; top:0; border:0; pointer-events:none; }
.trailer-shade { position:absolute; inset:0; background:linear-gradient(0deg,#101017f2 0%,#10101740 42%,#10101718 70%); }
.trailer-caption { position:absolute; z-index:1; left:18px; bottom:18px; width:72%; display:flex; flex-direction:column; gap:5px; color:#eee8ff; opacity:1; }
.trailer-caption small { color:#bcb0db; font:600 11px/1.5 var(--yoru-font); letter-spacing:1.1px; }
.trailer-caption strong { font:700 clamp(17px,1.7vw,24px)/1.4 var(--yoru-font); }
#trailer-state { color:#c2bbd1; font:400 12px/1.5 var(--yoru-font); }
#trailer-dock[data-empty="true"] { visibility:hidden; }
body:has(#book-dialog[open]) #trailer-dock { visibility:hidden; }
@media(max-width:1050px) { .cover-slot { height:220px; } }
@media(max-width:650px) {
 body:not(.has-detail) #story-grid .group-grid,
 body:not(.has-detail) #story-grid:has(> .story-group[hidden]) > .story-group:not([hidden]) .group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); --shelf-columns:2; gap:12px 10px; }
 .cover-slot { height:185px; }
 .card-premise { -webkit-line-clamp:2; font-size:12px; }
 .card-genres { font-size:11px; }
 #trailer-dock { --trailer-base:300px; opacity:1; }
 .masthead { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) { #trailer-player { transition:none; } }


/* Remove the thin rule protruding beside the M in the masthead. */
.site-header { border-bottom:0; }

/* v61: real remaining cards grow across each final row; no empty slot/filler. */
body:not(.has-detail) #story-grid .group-grid,
body:not(.has-detail) #story-grid:has(> .story-group[hidden]) > .story-group:not([hidden]) .group-grid { display:flex; flex-wrap:wrap; align-items:stretch; }
#story-grid .group-grid > .story-item { flex:1 1 calc((100% - 36px) / 3); min-width:0; }
/* Keep native text outside the old angled clipping path. */
#story-grid .card-copy { clip-path:none; padding:10px 14px 16px; }
#story-grid .story-title { line-height:1.55; overflow:visible; }
#story-grid .title-button { display:block; -webkit-line-clamp:unset; overflow:visible; padding:3px 0 5px; overflow-wrap:anywhere; }
/* Seal the sticky toolbar's top gap so scrolling artwork cannot eat text. */
.has-banner-shelf .browse-tools { top:var(--banner-band-height,0px); padding-block:12px; margin:0; background:#101017; isolation:isolate; }
.has-banner-shelf .browse-tools::before { content:none; }
@media(max-width:650px) { #story-grid .group-grid > .story-item { flex-basis:calc((100% - 10px) / 2); } #story-grid .card-copy { padding-inline:11px; } }

#story-grid .group-grid > .relation-panel, #story-grid .group-grid > .relation-row-spacer { flex:0 0 100%; }

/* v67: restore the original fixed square ink frame. Reduce video zoom, not
   grow the frame: exact16:9 at100% height, left aligned, no vertical crop.
   Centre is88.889%,50%; provider overlay visibility needs a real playback check. */
/* Native caption is OUTSIDE the masked background stacking context. Only the
   audio button accepts clicks; the background never intercepts shelf input. */
#trailer-caption { position:fixed; z-index:3; left:18px; bottom:18px; width:min(430px,calc(100vw - 36px)); pointer-events:none; }
.trailer-title-row { display:flex; align-items:center; gap:10px; min-width:0; }
#trailer-title { min-width:0; overflow-wrap:anywhere; text-shadow:0 1px 6px #101017,0 1px 15px #101017; }
#trailer-audio-toggle { flex:none; pointer-events:auto; min-width:44px; min-height:44px; border:1px solid #bcb0db70; border-radius:999px; padding:8px 12px; color:#eee8ff; background:#101017e8; font:600 12px/1.4 var(--yoru-font); cursor:pointer; }
#trailer-audio-toggle:disabled { opacity:.5; cursor:default; }
#trailer-audio-toggle:focus-visible { outline:2px solid #d8b4ff; outline-offset:4px; }
body:has(#trailer-dock[data-empty="true"]) #trailer-caption,
body:has(#book-dialog[open]) #trailer-caption { visibility:hidden; }
#trailer-mode.sr-only,#trailer-state.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:650px) { #trailer-caption { left:12px; bottom:12px; width:min(280px,calc(100vw - 24px)); } #trailer-title { font-size:15px; } }

/* v67: move only the ink/video wash down; retain the readable bottom caption.
   Toolbar no longer paints 14px upward over the stage border. The existing
   painted-height backplate seals the seam without covering the frame. */

/* Continuous outer frame above decorative angled layers, without layout shift. */
.story-card::after { content:""; position:absolute; inset:0; border:1px solid #75658f; box-sizing:border-box; pointer-events:none; z-index:8; }
.story-item:is(.is-selected,.is-preselected) .story-card::after { border-color:var(--yoru-primary); }

/* v68: fit a complete 16:9 video INSIDE the unchanged square ink mask.
   No frame enlargement and no claim about provider pause/overlay thresholds. */
#trailer-player { inset:0; width:100%; background:#101017; }
#trailer-player iframe { width:100%; height:56.25%; left:0; top:25%; }
#trailer-poster[hidden] { display:none; }
body:has(#trailer-dock[data-unavailable="true"]) #trailer-state { position:static; width:auto; height:auto; margin:0; clip:auto; overflow:visible; white-space:normal; font-size:11px; color:#b8afc7; }
body:has(#trailer-dock[data-unavailable="true"]) #trailer-audio-toggle { display:none; }