/* Gold studio mark and full, uncropped original poster artwork. */
#detail .memory-note[hidden]{display:none}
#chapter-memory-reel{margin-top:25px;min-width:0}
.chapter-reel .reel-summary{font-size:12px;color:#a3a8bd;margin:0}
.detail-layout>*{min-width:0}
/* Cap the height at 70dvh by capping the width, so the frame stays exactly 9:16. */
.memory-slides{position:relative;display:flex;flex-direction:column;width:min(100%,39.375dvh);aspect-ratio:9/16;margin-inline:auto;overflow:hidden auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none;border-radius:8px;background:#090b12}
.memory-slides::-webkit-scrollbar{display:none}
.memory-slides:focus-visible{outline:2px solid #d7b568;outline-offset:3px}
.memory-slide{flex:0 0 100%;min-height:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;background:#090b12}
/* One definite frame for every photo and video, independent of source dimensions. */
.memory-slide img,.memory-slide video{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.memory-slide img.memory-media--contain{object-fit:contain}
.memory-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-bottom:10px}
.memory-controls{display:flex;align-items:center;gap:8px}
.memory-controls button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #d7b56866;background:#20222f;border-radius:50%;color:#d7b568;cursor:pointer;font-size:18px}
.memory-controls button:disabled{opacity:.35;cursor:default}
.memory-position{font-size:12px;color:#a3a8bd;min-width:3em;text-align:center}
.memory-hint{margin:6px 0 0;font-size:12px;color:#d7b568}
/* Fluid page shell: use the viewport instead of a centered boxed container. */
:root{--page-gutter:clamp(20px,3.2vw,64px)}
.topbar,.masthead,main{width:100%;max-width:none;margin-inline:0;padding-inline:var(--page-gutter)}
.catalog-label{right:var(--page-gutter)}
footer{max-width:none;margin-inline:var(--page-gutter)}
@media(max-width:600px){.cards{margin-right:calc(-1 * var(--page-gutter));padding-right:var(--page-gutter)}}
.brand{display:inline-flex;flex:none;align-items:center}
.brand img{display:block;width:clamp(138px,14vw,184px);height:auto}
.brand.small img{width:112px}
.brand:focus-visible{outline:2px solid #f4e1a9;outline-offset:5px}
:is(#origins,#adventures,#countdown) .cards{display:flex;flex-wrap:nowrap;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:22px;padding:7px 2px 18px;scrollbar-width:thin;scrollbar-color:#d7b568 #20222f}
:is(#origins,#adventures,#countdown) .card{flex:0 0 250px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
:is(#origins,#adventures,#countdown) .arrows{display:flex}
:is(#origins,#adventures,#countdown) .arrows button:hover{border-color:#d7b568;color:#d7b568}
@media(max-width:900px){:is(#origins,#adventures,#countdown) .card{flex-basis:205px}:is(#origins,#adventures,#countdown) .cards{gap:17px}}
@media(max-width:600px){:is(#origins,#adventures,#countdown) .card{flex-basis:164px}:is(#origins,#adventures,#countdown) .cards{gap:14px;padding-right:20px}}
.card .poster{width:100%;aspect-ratio:2/3;flex:none;min-height:0}
.real-poster{background:#10121b;display:block}
/* Explicit frame prevents intrinsic image sizes from changing card height.
   Fill preserves the full artwork without cropping or letterbox gaps. */
.real-poster img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;object-position:center}
.movie-wordmark,.movie-wordmark-cleanup{position:absolute;left:var(--mark-x);top:var(--mark-y);transform:translate(-50%,-50%);display:block;pointer-events:none}
.movie-wordmark{z-index:2;width:var(--mark-w);filter:drop-shadow(0 1px 1px #0008)}
.movie-wordmark-cleanup{z-index:1;width:var(--patch-w);height:var(--patch-h);mask:linear-gradient(90deg,transparent,#000 4% 96%,transparent),linear-gradient(transparent,#000 var(--patch-v-feather,12%) calc(100% - var(--patch-v-feather,12%)),transparent);mask-composite:intersect}
.movie-wordmark-cleanup::before,.movie-wordmark-cleanup::after{content:'';position:absolute;inset:0;background-image:var(--patch-art);background-size:var(--patch-scale);background-repeat:no-repeat;background-position:var(--patch-left) var(--patch-y)}
.movie-wordmark-cleanup::after{background-position:var(--patch-right) var(--patch-y);mask-image:linear-gradient(90deg,transparent 18%,#000 82%)}
.movie-wordmark-cleanup--black{background:#000}
.movie-wordmark-cleanup--black::before,.movie-wordmark-cleanup--black::after{content:none}
.movie-tagline-cleanup{position:absolute;z-index:1;left:50%;top:var(--band-y);width:var(--band-w);height:var(--band-h);transform:translate(-50%,-50%);pointer-events:none;background:var(--band-art) 50% var(--band-sample)/var(--band-scale) no-repeat;mask:linear-gradient(90deg,transparent,#000 3% 97%,transparent),linear-gradient(transparent,#000 13% 87%,transparent);mask-composite:intersect}
.movie-tagline-cleanup--blend{mask:linear-gradient(90deg,transparent,#000 3% 97%,transparent),linear-gradient(transparent,#000 20% 80%,transparent);mask-composite:intersect}
.movie-tagline-cleanup--blend::after{content:'';position:absolute;inset:0;background:var(--band-art) 50% var(--band-upper)/var(--band-scale) no-repeat;mask-image:linear-gradient(#000 12%,transparent 86%)}
.card .poster:has(>.movie-wordmark-cleanup--black){border-color:transparent;box-shadow:none}
.real-detail:has(.movie-wordmark-cleanup--black){background-color:#000!important}
.poster .movie-wordmark img,.detail-wordmark-frame .movie-wordmark img{position:static;display:block;width:100%;height:auto;object-fit:contain}
.detail-wordmark-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.detail-wordmark-frame[hidden]{display:none}
.detail-art:not(.real-detail)>.poster-brand{display:none}
.real-poster:after,.real-detail:after{display:none}
.real-detail .poster-brand,.real-detail .poster-title{display:none}
.card-title{font-size:15px;font-weight:600;margin-top:6px;line-height:1.35;min-height:0;overflow-wrap:break-word}
.card-caption{color:#a3a8bd;font-weight:400;line-height:1.4;min-height:0;margin-top:4px}
/* Relationship comic hero; keep the artwork complete at every screen size. */
.masthead{min-height:33.333vw;background:#111827 url('assets/comic-banner.webp') center/100% 100% no-repeat;display:flex;flex-direction:column;justify-content:center;padding-block:40px}
.masthead h1{font-size:clamp(30px,2.8vw,48px)}
.masthead .original,.masthead h1,.masthead p{max-width:27%;text-shadow:0 2px 12px #000}
.masthead .original{font-size:clamp(9px,.7vw,12px)}
.masthead p{font-size:clamp(12px,.95vw,16px)}
.masthead .catalog-label{display:none}
@media(max-width:900px){
 .masthead{min-height:0;background:none;padding-top:24px;padding-bottom:0}
 .masthead .original,.masthead h1,.masthead p{max-width:none}
 .masthead h1{font-size:38px}
 .masthead .original{font-size:10px}
 .masthead p{font-size:14px}
 .masthead:after{content:'';display:block;aspect-ratio:3/1;background:url('assets/comic-banner.webp') center/contain no-repeat;margin:26px calc(-1 * var(--page-gutter)) 0}
}
@media(max-width:600px){.card-title{font-size:13px}.real-detail{height:auto;aspect-ratio:2/3;max-height:60dvh}}
.saga-coming-soon{padding:60px 24px;text-align:center;border-block:1px solid #d4b45d33;background:radial-gradient(ellipse at center,#d4b45d0c,transparent 70%)}
.saga-coming-soon span{color:#d4b45d;font-size:clamp(20px,3vw,36px);letter-spacing:.22em;font-weight:600}
#forever .saga-coming-soon span{font-family:'Great Vibes','Snell Roundhand','Segoe Script','Brush Script MT',cursive;font-size:clamp(32px,5vw,54px);letter-spacing:normal;font-weight:400;line-height:1.2}
.saga-coming-soon p{color:#aeb0c0;margin:18px 0 0}