/* FRANK: the animated series, its images and the work behind them. */
html:has(.series-hero){scroll-behavior:auto;scroll-padding-top:24px}
.series-hero{position:relative;isolation:isolate;min-height:650px;height:min(760px,82vh);background:#080808;overflow:hidden}
.series-hero-art{position:absolute;inset:0;z-index:-2}.series-hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.series-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#08080830 0%,#08080810 40%,#080808e8 100%)}
.series-hero-content{height:100%;min-height:inherit;display:flex;flex-direction:column;padding-block:36px}.series-hero-content>.eyebrow{font-size:11px;text-shadow:0 1px 4px #080808}
.series-hero h1{width:min(62%,740px);margin:auto}.series-hero h1 img{width:100%;filter:drop-shadow(0 4px 20px #08080880)}
.series-hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:28px}.series-hero-bottom p{font:12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em}.series-hero-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:18px}.series-trailer-pending{font:11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:15px 0;border-top:1px solid #ffffff70}
.series-story,.series-making{background:#efefef;color:#080808}.series-story{padding-block:75px}.series-story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:8vw;align-items:center}.series-story h2{font-size:clamp(50px,5.8vw,84px);line-height:.95;margin-top:24px}.series-story-grid>div>p{font-size:17px;line-height:1.85;color:#494949;max-width:42ch}.series-story .eyebrow,.series-making .eyebrow{color:#555;font-size:10px}.series-jumps{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:24px}.series-story :focus-visible,.series-making :focus-visible{outline-color:#080808}
.series-gallery-section{padding-block:80px}.series-section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:36px}.series-section-heading h2{font-size:clamp(54px,6.8vw,100px);line-height:.9;margin-top:24px}.series-section-heading>p{font-size:14px;line-height:1.8;color:#aaa;max-width:37ch}.series-section-heading .eyebrow{font-size:10px}
.series-making{padding-block:78px 88px}.series-making .series-section-heading>p{color:#555}.series-making-empty{display:flex;align-items:center;gap:32px;border-block:1px solid #08080830;padding:32px 0}.series-note-number{font:40px var(--display);color:#777}.series-making-empty h3{font-size:32px}.series-making-empty p{font-size:13px;color:#555;margin-top:9px;line-height:1.6}.series-small-label{font:10px var(--mono);text-transform:uppercase;margin-left:auto;white-space:nowrap}.series-making-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}.series-making-card{min-width:0}.series-making-card>button{display:block;width:100%;padding:0;border:1px solid #08080830;position:relative;aspect-ratio:4/3;background:#111;color:#fff}.series-making-card img{width:100%;height:100%;object-fit:contain}.series-making-card button>span{position:absolute;bottom:10px;right:10px;background:#080808e8;padding:10px 13px;display:flex;align-items:center;gap:15px;font:10px var(--mono);text-transform:uppercase}.series-making-card svg{width:18px;height:18px}.series-making-card h3{font-size:32px;margin-top:20px;overflow-wrap:anywhere}.series-making-card p{font-size:13px;line-height:1.8;color:#555;margin-top:10px;white-space:pre-line}
.series-channel{display:flex;align-items:center;justify-content:space-between;gap:55px;padding-block:85px;border-bottom:1px solid #ffffff30}.series-channel h2{font-size:clamp(58px,7vw,102px);line-height:.88;margin:26px 0}.series-channel p{font-size:14px;line-height:1.8;color:#bbb;max-width:45ch}.series-channel-actions{flex:none}.series-channel-actions>span{display:block;font:10px var(--mono);color:#999;margin-top:17px;text-align:center}
.series-empty{border-block:1px solid #ffffff30;padding:45px 0}.series-empty h3{font-size:50px;line-height:1;margin:20px 0}.series-empty p{font-size:14px;color:#aaa}.series-static-images{display:grid;gap:24px}.series-static-images img{max-height:70vh;object-fit:contain}.series-static-images figcaption{margin-top:12px}

.series-film-frame:active,.series-gallery-controls button:active,.series-viewer-actions button:active{opacity:.65}
@media(max-width:900px){.series-story-grid{gap:40px}.series-making-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.series-channel{gap:30px}}
@media(max-width:760px){.series-hero{min-height:520px;height:74svh;max-height:700px}.series-hero-content{padding-block:28px}.series-hero-content>.eyebrow{font-size:9px}.series-hero h1{width:90%}.series-hero-art img{object-position:50% 40%}.series-hero-bottom{align-items:flex-start;flex-direction:column;gap:18px}.series-hero-bottom p{font-size:10px}.series-hero-actions{justify-content:flex-start;gap:12px}.series-hero-actions{width:100%}.series-hero-actions .button,.series-channel-actions .button{width:100%}.series-trailer-pending{font-size:9px;padding:10px 0}.series-story{padding-block:45px}.series-story-grid{grid-template-columns:1fr;gap:24px}.series-story h2{font-size:52px}.series-story-grid>div>p{font-size:14px;max-width:none}.series-jumps{gap:4px 22px;margin-top:20px}.series-gallery-section{padding-block:48px}.series-section-heading{display:block;margin-bottom:26px}.series-section-heading h2{font-size:60px}.series-section-heading>p{font-size:13px;margin-top:22px;max-width:none}.series-gallery-controls{width:100%;justify-content:space-between}.series-making{padding-block:48px}.series-making-empty{align-items:flex-start;gap:15px;flex-wrap:wrap;padding-block:24px}.series-note-number{font-size:28px}.series-making-empty>div{flex:1;min-width:180px}.series-making-empty h3{font-size:29px}.series-small-label{margin-left:0;width:100%}.series-making-grid{grid-template-columns:1fr;gap:30px}.series-channel{display:block;padding-block:50px}.series-channel h2{font-size:64px}.series-channel-actions{margin-top:28px}.series-channel-actions .button{width:100%}.series-channel-actions>span{text-align:left}}
@media(prefers-reduced-motion:reduce){.series-film-frame:active,.series-gallery-controls button:active,.series-viewer-actions button:active{opacity:1}}


/* Filmstrip: a manually browsed archive, preserving the supplied artwork colours. */
.series-gallery{--frame-width:min(72vw,820px);min-width:0}
.series-film-heading{display:flex;justify-content:space-between;gap:24px;border-block:1px solid #ffffff25;padding:14px 0;color:#aaa;font:9px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.series-film-heading>span:first-child{color:#eee}
.series-film-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#8a0010 #161616;padding:20px max(0px,calc((100% - var(--frame-width))/2)) 16px;touch-action:pan-x pan-y pinch-zoom}
.series-film-track.is-looping{display:block;overflow:clip;scroll-snap-type:none;padding-inline:0;touch-action:pan-y pinch-zoom}
.series-film-rail{display:flex;gap:16px;width:100%;will-change:transform}
.is-looping .series-film-cell{scroll-snap-align:none}.is-looping .series-film-frame{cursor:pointer}.is-looping .series-film-frame[aria-current=true]{cursor:zoom-in}
.series-film-track.is-moving .series-film-frame{cursor:pointer}
@media(max-width:760px){.series-film-rail{gap:12px}.series-film-track.is-looping{--frame-width:calc(100vw - 144px);width:calc(100% + 40px);margin-inline:-20px}}
@media(max-width:360px){.series-film-track.is-looping{width:calc(100% + 32px);margin-inline:-16px}}
.series-film-cell{flex:0 0 var(--frame-width);min-width:0;scroll-snap-align:center;position:relative;background:#181818;border-block:1px solid #ffffff25;padding:40px 12px 28px}
.series-film-cell:before,.series-film-cell:after{content:"";position:absolute;left:12px;right:12px;height:8px;background:repeating-linear-gradient(90deg,#050505 0 12px,transparent 12px 24px);pointer-events:none}
.series-film-cell:before{top:8px}.series-film-cell:after{bottom:8px}
.series-film-label{position:absolute;left:13px;right:13px;top:23px;display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:.12em;color:#aaa;text-transform:uppercase}
.series-film-frame{position:relative;display:block;padding:0;width:100%;aspect-ratio:16/9;background:#080808;border:1px solid #ffffff40;cursor:zoom-in}
.series-film-frame>img{width:100%;height:100%;object-fit:cover;opacity:.72}
.series-film-frame[aria-current=true]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.series-film-frame[aria-current=true]>img{opacity:1}
.series-film-cell:has([aria-current=true]) .series-film-label{color:#fff}
.series-film-open{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:16px;background:#080808d9;padding:12px 15px;color:#fff;font:9px var(--mono);text-transform:uppercase}
.series-film-open svg{width:16px;height:16px}
.series-film-footer{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:24px}
.series-film-footer .eyebrow{font-size:12px}.series-film-footer p{margin-top:9px;font-size:13px;line-height:1.7;color:#aaa;max-width:60ch}
.series-gallery-controls{display:flex;align-items:center;gap:20px;flex:none}.series-gallery-controls button,.series-viewer-actions button{width:46px;height:46px;display:grid;place-items:center;border:1px solid #ffffff70;background:#08080880;color:#fff}
.series-gallery-controls svg{width:22px;height:22px}.series-gallery-controls button:first-child svg{transform:rotate(180deg)}
.series-count{font:11px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* The gallery fills the browser viewport; other media dialogs retain their layout. */
.modal:has(.series-viewer){position:fixed;inset:0;margin:0;border:0;padding:0;width:100%;height:100dvh;max-width:none;max-height:none;overflow:hidden;background:#080808}
.modal:has(.series-viewer) #modal-body{height:100%}
.modal:has(.series-viewer) .modal-head{position:absolute;inset:0 0 auto;z-index:3;padding:18px max(24px,env(safe-area-inset-right)) 40px max(24px,env(safe-area-inset-left));background:linear-gradient(#000b,transparent);border:0;pointer-events:none}
.modal:has(.series-viewer) .modal-close{pointer-events:auto;width:auto;min-width:96px;padding:0 12px;display:flex;justify-content:center;gap:12px;background:#080808b3;border-color:#ffffff80}
.modal:has(.series-viewer) .modal-close:before{content:"Close";font:10px var(--mono);text-transform:uppercase}
.series-viewer{position:relative;width:100%;height:100%;margin:0}
.modal .series-viewer>img.zoomed{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;background:#080808;touch-action:pan-y pinch-zoom}
.modal .series-viewer.is-contained>img.zoomed{object-fit:contain;padding:84px 20px 150px}
.series-viewer-footer{position:absolute;inset:auto 0 0;z-index:2;display:flex;align-items:flex-end;gap:30px;padding:65px max(28px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));background:linear-gradient(transparent,#000e)}
.series-viewer figcaption{flex:1;min-width:0}.series-viewer strong{font:13px var(--mono);text-transform:uppercase}.series-viewer p{font-size:13px;line-height:1.7;color:#ddd;margin-top:9px;max-height:18vh;overflow:auto}
.series-viewer-actions{display:flex;align-items:center;gap:18px;flex:none}.series-viewer-actions>span{font:11px var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums}.series-viewer-actions button{font-size:24px}
.series-viewer-fit{min-height:46px;min-width:125px;padding:10px 14px;background:#080808b3;border:1px solid #ffffff80;font:10px var(--mono);text-transform:uppercase;color:#fff;flex:none}
@media(hover:hover) and (pointer:fine){.series-film-frame:hover>img{opacity:1}.series-film-frame:hover .series-film-open,.series-gallery-controls button:hover,.series-viewer-actions button:hover,.series-viewer-fit:hover{background:#fff;color:#080808}}
@media(max-width:760px){.series-gallery{--frame-width:calc(100vw - 72px)}.series-film-heading{font-size:8px;gap:14px}.series-film-heading>span:last-child{text-align:right;max-width:18ch}.series-film-track{gap:12px}.series-film-cell{padding-inline:8px}.series-film-label{left:9px;right:9px;font-size:7px}.series-film-frame{aspect-ratio:4/3}.series-film-open{bottom:8px;right:8px;padding:9px;font-size:8px;gap:10px}.series-film-footer{align-items:flex-start;flex-direction:column;gap:20px;padding-top:20px}.series-gallery-controls{width:100%;justify-content:space-between}.modal:has(.series-viewer) .modal-head{padding:12px 16px 36px;font-size:9px}.series-viewer-footer{flex-wrap:wrap;gap:14px;padding:50px 16px max(16px,env(safe-area-inset-bottom))}.series-viewer figcaption{flex-basis:100%}.series-viewer strong{font-size:12px}.series-viewer p{font-size:11px;max-height:16vh}.series-viewer-fit{flex:1 0 110px;min-width:110px;padding-inline:8px;font-size:9px}.series-viewer-actions{flex:1 1 160px;justify-content:space-between;gap:12px}.modal .series-viewer.is-contained>img.zoomed{padding:76px 0 205px}}

/* Fill the opening like the original artwork, with readable controls above it. */
.series-hero--video{min-height:560px;height:calc(100svh - 84px);max-height:none;background:#000}
.series-hero--video:after{display:block;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0009 0%,transparent 28%,transparent 55%,#000b 100%)}
.series-hero--video .series-hero-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;z-index:0}
.series-hero--video .series-hero-art img,.series-hero--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.series-hero--video video{opacity:0;pointer-events:none}.series-hero--video video.ready{opacity:1}
.series-hero-top{position:absolute;top:28px;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0}
.series-hero-top .eyebrow{font-size:10px;text-shadow:0 1px 6px #000}
.series-intro-control{display:flex;align-items:center;justify-content:center;gap:10px;min-width:135px;min-height:44px;padding:10px 12px;border:1px solid #ffffff80;background:#080808b3;color:#fff;font:10px var(--mono);text-transform:uppercase}
.series-intro-control svg{width:16px;height:16px}
.series-hero--video .series-hero-bottom{position:absolute;bottom:32px;left:0;right:0;z-index:2;padding:0}
@media(max-width:760px){.series-hero--video{height:calc(100svh - 72px);min-height:520px}.series-hero-top{top:20px;gap:14px}.series-hero-top .eyebrow{font-size:8px;letter-spacing:.06em;gap:8px}.series-hero-top .dash{display:none}.series-intro-control{min-width:118px;font-size:9px}.series-hero--video .series-hero-bottom{bottom:24px}.series-hero--video .series-hero-art img{object-fit:contain}}
@media(hover:hover) and (pointer:fine){.series-intro-control:hover{background:#fff;color:#080808}}

/* Story portrait: a complete illustration on its original white ground. */
.series-story--illustrated{background:#fff;padding-block:0 64px}
.series-story--illustrated .series-story-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px)}
.series-story-art{width:100%;max-width:416px;aspect-ratio:744/1254;margin:0;justify-self:center;align-self:start}
.series-story-art img{width:100%;height:100%;object-fit:contain}
.series-story-copy{min-width:0}
.series-story-copy>p{margin-top:28px}
@media(max-width:760px){
 .series-story--illustrated{padding-block:0 48px}
 .series-story--illustrated .series-story-grid{grid-template-columns:minmax(0,1fr);gap:36px}
 .series-story-art{max-width:330px}
 .series-story-copy>p{margin-top:24px}
}