:root{--black:#000;--white:#fff;--lilac:#b08ce7;--acid:#d9fb4a;--muted:#b7b0bd}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,.guest-dialog,.viewer,.video-dialog{scrollbar-color:#b08ce7 #000;scrollbar-width:thin}
html::-webkit-scrollbar,.guest-dialog::-webkit-scrollbar,.viewer::-webkit-scrollbar,.video-dialog::-webkit-scrollbar{width:9px}
html::-webkit-scrollbar-track,.guest-dialog::-webkit-scrollbar-track,.viewer::-webkit-scrollbar-track,.video-dialog::-webkit-scrollbar-track{background:#000}
html::-webkit-scrollbar-thumb,.guest-dialog::-webkit-scrollbar-thumb,.viewer::-webkit-scrollbar-thumb,.video-dialog::-webkit-scrollbar-thumb{background:#b08ce7;border-radius:999px}
body{margin:0;background:var(--black);color:var(--white);font:500 1rem/1.35 Nunito,system-ui,sans-serif}
body.modal-open{overflow:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.2em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--lilac);outline-offset:3px}
img{display:block;max-width:100%}
h1,h2,h3,p,figure{margin:0}
h1,h2{font-weight:800;letter-spacing:0;line-height:1.1}
.skip{position:absolute;top:-80px;left:12px;padding:10px;background:var(--lilac);color:#000;z-index:50}
.skip:focus{top:12px}
.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}
.wrap{width:min(100% - 42px,1380px);margin:auto}
.site-header{position:relative;z-index:20;background:#000;border-bottom:1px solid #29212f}
.header-row{height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-logo{width:98px;height:auto}
.main-nav{display:flex;align-items:center;gap:clamp(16px,2.7vw,36px);color:var(--lilac);font-size:.95rem;font-weight:800}
.main-nav a[aria-current=page]{color:white}
.main-nav .podcast-nav{border-left:1px solid #574566;padding-left:clamp(16px,2.7vw,36px);color:var(--acid)}
.menu-toggle{display:none;border:1px solid var(--lilac);background:#000;color:var(--lilac);border-radius:999px;padding:6px 15px}
.site-footer{border-top:1px solid #29212f;margin-top:38px}
.footer-row{height:52px;display:flex;align-items:center;justify-content:end}
.footer-row small{font-size:.82rem;color:var(--muted)}
.page-intro{min-height:86px;display:flex;align-items:center;gap:20px}
.page-intro h1{font-size:clamp(2rem,3vw,2.8rem);flex:none}
.page-art-strip{height:68px;flex:1;min-width:0;overflow:hidden;border-radius:9px}
.page-art-strip img{width:100%;height:100%;object-fit:cover}
.page-intro-visual{position:relative}
.commission-button{position:absolute;right:9px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--lilac);border-radius:999px;background:#000;color:var(--lilac);font-size:.93rem;font-weight:800;white-space:nowrap}
.commission-button svg{width:20px;height:20px;flex:none}
.commission-button:hover{background:var(--lilac);color:#000;text-decoration:none}
.cover{padding-top:0;width:100vw;margin-left:calc(50% - 50vw)}
.cover-stage{position:relative;height:clamp(165px,16vw,240px);overflow:hidden;background:#0c0810}
.cover-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.cover-slide.is-active{opacity:1;visibility:visible;z-index:1}
.cover-slide img{width:100%;height:100%;object-fit:cover}
.recent{margin-top:25px}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:12px}
.section-title h2{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.section-title a{color:var(--lilac);font-weight:800;font-size:.94rem}
.recent-layout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.art-link{display:block;overflow:hidden;border-radius:12px}
.art-link img{width:100%;height:clamp(120px,15vw,205px);object-fit:cover;transition:transform .22s}
.art-link:hover img{transform:scale(1.035)}
.home-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.home-pair-link{display:grid;grid-template-columns:minmax(0,3fr) minmax(108px,1fr);align-items:center;gap:0;border:1px solid #3b3044;border-radius:13px;overflow:hidden;height:118px;color:var(--lilac);font-weight:800;font-size:1.3rem}
.home-pair-link:hover{border-color:var(--lilac);text-decoration:none}
.home-pair-link img{width:100%;height:118px;object-fit:cover;object-position:center 38%}
.home-pair-link span{padding:0 15px;text-align:center}
.podcast-band{margin-top:24px;padding:20px 25px;display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #5b6030;border-radius:16px;background:#070707}
.podcast-mark{width:min(43%,420px)}
.podcast-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.podcast-actions>a{color:var(--acid);font-weight:800}
.guest-button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--acid);border-radius:999px;padding:7px 16px;color:var(--acid);font-weight:800;white-space:nowrap}
.guest-button[type=button]{background:transparent}
.guest-button img{width:25px;height:25px;object-fit:contain}
.guest-button:hover,.guest-button[type=button]:hover{background:var(--acid);color:#000;text-decoration:none}
.guest-button:hover img{filter:brightness(0)}
.gallery-feed{columns:4;column-gap:9px}
.gallery-feed figure{break-inside:avoid;margin-bottom:9px}
.gallery-feed button{display:block;width:100%;padding:0;border:0;background:none}
.gallery-feed img{width:100%;height:auto;border-radius:8px}
.gallery-feed button:hover img{opacity:.83}
.viewer{border:0;padding:0;background:#050505;color:white;width:min(96vw,1420px);max-width:none;max-height:95vh;border-radius:16px;overflow:auto}
.viewer::backdrop{background:rgba(0,0,0,.94)}
.viewer-shell{position:relative;padding:46px 55px 22px}
.viewer img{display:block;max-height:76vh;max-width:100%;width:auto;margin:auto;object-fit:contain}
.viewer-title{padding-top:11px;text-align:center;text-transform:lowercase}
.viewer-controls{position:absolute;top:8px;right:14px}
.viewer button{border:1px solid #88769e;background:#000;color:white;border-radius:999px;min-width:42px;min-height:42px}
.viewer-prev,.viewer-next{position:absolute;top:50%;transform:translateY(-50%);font-size:1.5rem}
.viewer-prev{left:7px}.viewer-next{right:7px}
.character-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.character-entry{display:flex;align-items:center;gap:14px;min-height:92px;border:1px solid #322739;border-radius:11px;overflow:hidden;padding-right:14px}
.character-thumb{width:90px;height:90px;flex:none;display:grid;place-items:center;background:#17101e;color:var(--lilac)}
.character-thumb img{width:100%;height:100%;object-fit:cover}
.character-entry h2{font-size:1.05rem}
.character-entry p{font-size:.84rem;color:var(--muted)}
.character-entry a{margin-left:auto;color:var(--lilac);font-weight:800;font-size:.85rem;white-space:nowrap}
.character-entry.is-placeholder{opacity:.5}
.character-entry:not(.is-placeholder){min-height:108px;gap:0}
.character-open{display:grid;grid-template-columns:minmax(0,76%) minmax(0,24%);align-items:center;gap:0;flex:1;min-width:0;border:0;padding:0;text-align:left;color:inherit;background:transparent}
.character-open .character-thumb{width:100%;height:108px}
.character-open .character-thumb img{object-position:center 29%}
.character-open .character-summary{padding:0 13px}
.character-entry:not(.is-placeholder) a{margin-left:0;padding:0 13px}
.character-open:hover .character-name{text-decoration:underline;text-underline-offset:.2em}
.character-summary{display:flex;flex-direction:column;min-width:0}
.character-name{font-size:1.05rem;font-weight:800;line-height:1.1}
.character-production{font-size:.84rem;color:var(--muted)}
.character-dialog{width:min(92vw,460px);max-width:none;border:1px solid #6d5686;border-radius:16px;background:#0b080d;color:white;padding:25px 28px;box-shadow:0 20px 80px #000}
.character-dialog::backdrop{background:#000b}
.character-dialog-label{color:var(--lilac);font-size:.86rem}
.character-dialog h2{font-size:1.55rem;margin:6px 0 14px}
.character-dialog-copy{margin-bottom:12px}
.character-director{color:var(--muted);font-size:.9rem;margin-bottom:17px}
.character-dialog a{color:var(--lilac);font-weight:800}
.character-close{position:absolute;right:12px;top:10px;border:0;background:none;color:var(--lilac);font-size:1.6rem;line-height:1}
.reel-section{margin-top:24px;max-width:470px}
.reel-section h2{font-size:1.15rem;margin-bottom:8px}
.reel-section iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#100c13}
.video-section{margin:8px 0 20px}
.video-section h2{font-size:1.25rem;margin-bottom:5px}
.video-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.video-entry{min-width:0}
.video-open{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);align-items:center;width:100%;height:106px;padding:0;border:1px solid #34283d;border-radius:10px;overflow:hidden;background:#000;color:white;text-align:left}
.video-open:hover{border-color:var(--lilac)}
.video-open img{width:100%;height:106px;object-fit:cover;object-position:center 42%;background:#19151c}
.video-details{min-width:0;padding:0 12px;font-size:.96rem;line-height:1.2;font-weight:600}
.video-dialog{width:min(94vw,900px);max-width:none;max-height:92vh;overflow:auto;border:1px solid #6d5686;border-radius:16px;background:#080609;color:white;padding:24px}
.video-dialog::backdrop{background:#000d}
.video-dialog h2{font-size:1.35rem;margin:0 35px 14px 0;font-weight:700}
.video-dialog iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:9px;background:#000}
.video-dialog.is-short iframe{width:min(100%,330px);aspect-ratio:9/16;margin:auto}
.video-close{position:absolute;top:8px;right:14px;border:0;background:none;color:var(--lilac);font-size:1.6rem}
.video-external{display:inline-block;color:var(--lilac);font-size:.9rem;font-weight:800;margin-top:13px}
.volume-hero{margin-top:20px;min-height:225px;border-radius:18px;background:#070707;border:1px solid #5b6030;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:30px}
.volume-hero>img{width:min(65%,690px)}
.volume-hero .guest-button{color:var(--acid)}
.volume-content{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,.8fr);gap:clamp(24px,4vw,70px);align-items:start}
.episode-section{margin-top:24px}
.episode-section h1{font-size:1.55rem;margin-bottom:10px}
.episode-entry{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:16px;border-top:1px solid #5b6030;padding:11px 4px}
.episode-number{font-size:1.25rem;font-weight:800;color:var(--acid)}
.episode-name{display:flex;align-items:baseline;gap:12px;min-width:0}
.episode-name span{font-size:.85rem;color:var(--lilac)}
.episode-name strong{font-size:1.24rem;font-weight:800;color:var(--acid)}
.episode-status{color:var(--muted);font-size:.9rem;white-space:nowrap}
.episode-status a{font-weight:800;color:var(--acid)}
.volume-about{margin-top:25px;max-width:300px;color:white;font-size:1rem;line-height:1.4}
.volume-about p+p{margin-top:10px}
.guest-wrap{max-width:780px;padding:28px 0 12px}
.guest-wrap h1{font-size:clamp(2.2rem,4vw,3.5rem);margin:8px 0 18px}
.acid-link{color:var(--acid);font-weight:800}
.guest-form{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.guest-form label{display:flex;flex-direction:column;gap:5px;font-weight:700}
.field-label{display:flex;gap:5px;align-items:baseline;flex-wrap:wrap}
.guest-form label.full{grid-column:1/-1}
.guest-form input,.guest-form textarea{border:1px solid #554461;border-radius:10px;padding:10px 13px;background:#110d16;color:white;width:100%;min-height:44px}
.guest-form textarea{min-height:72px;resize:vertical}
.guest-form .optional{color:var(--muted);font-weight:500;font-size:.86rem}
.form-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.form-actions button{border-radius:999px;padding:10px 18px;border:1px solid var(--acid);background:var(--acid);color:#000;font-weight:800}
.form-actions button.secondary{background:transparent;color:var(--acid)}
.form-feedback{grid-column:1/-1;color:var(--muted);font-size:.88rem}
.copy-fallback{grid-column:1/-1;min-height:170px}
.copy-fallback[hidden]{display:none}
.guest-dialog{width:min(94vw,650px);max-width:none;max-height:min(90dvh,780px);overflow:hidden;border:1px solid #676029;border-radius:16px;background:#090909;color:white;padding:22px 25px}
.guest-dialog::backdrop{background:#000c}
.guest-dialog[open]{display:flex;flex-direction:column}
.guest-dialog h2{font-size:1.65rem;margin:0 34px 15px 0;color:var(--acid);flex:0 0 auto}
.guest-close{position:absolute;right:13px;top:9px;border:0;background:none;color:var(--acid);font-size:1.65rem;line-height:1}
.guest-dialog .guest-form{gap:10px 13px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:3px}
.guest-dialog .guest-form label{font-size:.86rem;gap:3px}
.guest-dialog .guest-form input,.guest-dialog .guest-form textarea{min-height:39px;padding:7px 10px}
.guest-dialog .guest-form textarea{min-height:56px}
@media(max-width:850px){
 .gallery-feed{columns:3}
 .video-open{height:90px}.video-open img{height:90px}.video-details{font-size:.87rem}
 .character-open{grid-template-columns:minmax(0,66%) minmax(0,34%)}
}
@media(max-width:650px){
 .wrap{width:min(100% - 26px,1380px)}
 .header-row{height:58px}.site-logo{width:90px}
 .menu-toggle{display:block}.main-nav{display:none;position:absolute;top:56px;right:13px;background:#090609;border:1px solid #604d78;border-radius:15px;padding:7px;min-width:145px;box-shadow:0 18px 40px #000a}
 .main-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.main-nav a{padding:9px 11px}.main-nav .podcast-nav{border-left:0;border-top:1px solid #574566;padding:11px 11px 9px}
 .cover-stage{height:clamp(120px,36vw,190px)}
 .recent{margin-top:20px}
 .recent-layout{gap:6px}.art-link{border-radius:7px}.art-link img{height:clamp(84px,24vw,145px)}
 .home-pair{gap:7px;margin-top:18px}
 .home-pair-link{grid-template-columns:minmax(0,3fr) minmax(72px,1fr);height:72px;font-size:.95rem;border-radius:9px}
 .home-pair-link img{width:100%;height:72px}.home-pair-link span{padding:0 5px}
 .podcast-band{margin-top:18px;padding:16px;display:block;border-radius:12px}
 .podcast-mark{width:min(100%,365px)}
 .podcast-actions{margin-top:17px;justify-content:space-between}
 .page-intro{min-height:70px;gap:12px}.page-intro h1{font-size:2rem}.page-art-strip{height:55px;border-radius:7px}
 .commission-button{right:6px;padding:6px 9px;gap:4px;font-size:.75rem}.commission-button svg{width:17px;height:17px}
 .gallery-feed{columns:2;column-gap:6px}.gallery-feed figure{margin-bottom:6px}.gallery-feed img{border-radius:6px}
 .character-list{grid-template-columns:1fr;gap:6px}
 .character-entry{min-height:74px;gap:10px}.character-thumb{width:72px;height:72px}.character-entry h2{font-size:1rem}
 .character-entry:not(.is-placeholder){min-height:84px}.character-open{grid-template-columns:minmax(0,70%) minmax(0,30%)}.character-open .character-thumb{height:84px}.character-name{font-size:1rem}
 .character-open .character-summary{padding:0 8px}.character-entry:not(.is-placeholder) a{padding:0 9px;font-size:.77rem}
 .video-list{grid-template-columns:1fr;gap:7px}.video-open{height:85px}.video-open img{height:85px}.video-details{font-size:.93rem}
 .episode-entry{grid-template-columns:33px 1fr auto;gap:8px}
 .episode-number,.episode-name strong{font-size:1rem}
 .episode-name{display:block}.episode-name span{display:block;font-size:.72rem}
 .episode-status{font-size:.78rem}
 .volume-hero{min-height:0;display:block;padding:19px}.volume-hero>img{width:100%}.volume-hero .guest-button{margin-top:19px}
 .volume-content{display:block}.volume-about{margin-top:18px;max-width:450px}
 .guest-form{display:block}.guest-form label{margin-bottom:13px}.form-actions{margin-top:14px}.form-feedback{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Compact, image-led page headers and shared focal cropping. */
.page-intro{position:relative}
.page-art-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:#000}
.page-art-strip img{width:100%;min-width:0;height:100%;object-fit:cover}
.action-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;font-size:1.1rem;line-height:1}
.commission-button{z-index:1}
.home-pair-link:first-child img{object-position:center 29%}
.home-pair-link:last-child img{object-position:center 38%}
.video-open img{object-position:center 35%}

/* One horizontal shelf per video type, with accessible scroll controls. */
.video-section{margin:8px 0 19px}
.video-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.video-section-head h2{margin:0}
.carousel-controls{display:flex;gap:6px}
.carousel-controls button{width:32px;height:29px;border:1px solid #604d78;border-radius:999px;background:#000;color:var(--lilac);font-size:1rem;line-height:1}
.carousel-controls button:hover:not(:disabled){background:var(--lilac);color:#000}
.carousel-controls button:disabled{opacity:.28;cursor:default}
.video-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,calc((100% - 20px)/3));grid-template-columns:none;gap:10px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--lilac) #000;padding-bottom:5px}
.video-entry{scroll-snap-align:start}
.video-open{height:112px}
.video-open img{height:112px}

/* Artwork and character sheets use the same contained dialog language. */
.viewer{width:min(94vw,900px);max-height:92vh;border:1px solid #6d5686;border-radius:16px;background:#080609}
.viewer::backdrop{background:#000d}
.viewer-shell{padding:20px}
.viewer-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.viewer-title{padding:0;text-align:left;font-size:1.16rem;font-weight:700}
.viewer .viewer-close{border:0;background:none;color:var(--lilac);font-size:1.65rem;min-width:30px;min-height:30px;line-height:1}
.viewer img{max-width:100%;width:auto;max-height:64vh;margin:auto;border-radius:8px;object-fit:contain}
.viewer-controls{position:static;display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.viewer .viewer-prev,.viewer .viewer-next{position:static;transform:none;font-size:.9rem;min-height:34px;padding:5px 13px;color:var(--lilac);border-color:#604d78}
.character-dialog{width:min(94vw,760px);padding:20px}
.character-sheet{display:grid;grid-template-columns:minmax(0,43%) minmax(0,1fr);gap:22px;align-items:center;padding-right:18px}
.character-sheet-image{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 29%;border-radius:10px}
.character-sheet-image[hidden]{display:none}
.character-sheet-copy{min-width:0}

/* Quiet footer marks: full names remain available to screen readers and on hover. */
.footer-row{height:auto;min-height:58px;justify-content:space-between;gap:18px;padding:10px 0}
.socials{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.socials a{display:grid;place-items:center;min-width:28px;height:28px;padding:0 3px;border:1px solid #574566;border-radius:999px;color:var(--lilac);font-size:.78rem;font-weight:800;line-height:1}
.socials a:hover{background:var(--lilac);color:#000;text-decoration:none}
.socials svg{display:block;width:16px;height:16px}

/* One shared, contained artwork banner on home and the three work pages. */
html,body{overflow-x:clip}
.cover{position:relative;width:100%;margin:0 0 14px;padding:0;overflow:hidden;border-radius:11px}
.cover{border:1px solid var(--lilac)}
.cover-stage{height:clamp(150px,16vw,230px)}
.cover-overlay{position:absolute;z-index:2;inset:auto 13px 13px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none}
.cover-overlay h1{background:#000;color:#fff;padding:8px 14px;border-radius:9px;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1}
.cover-overlay .commission-button{position:static;transform:none;pointer-events:auto;padding:8px 14px}

/* Thumbnail-only shelves keep their natural cinematic aspect ratio. */
.video-section{margin:13px 0 21px}
.video-list{grid-auto-columns:minmax(240px,calc((100% - 20px)/3));padding-bottom:5px}
.video-open{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px}
.video-open img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;object-position:center}
.video-open:hover img{opacity:.88}
.video-dialog{width:min(94vw,1120px);max-height:92vh;padding:24px}
.video-dialog-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.8fr);gap:22px;align-items:start}
.video-player{min-width:0}
.video-dialog iframe{width:100%;aspect-ratio:16/9}
.video-info{min-width:0;padding-right:13px}
.video-dialog h2{font-size:1.35rem;margin:0 22px 12px 0;line-height:1.2}
.video-dialog-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;margin-bottom:13px;background:#17101e}
.video-description{font-size:.95rem;line-height:1.35;max-height:11em;overflow:auto;color:#fff}
.video-external{margin-top:14px}
.video-section-head h2{font-weight:500}

/* Character portraits form a gallery as verified roles are added. */
.character-tools{display:flex;align-items:center;gap:7px;margin:0 0 10px;color:var(--muted);font-size:.86rem}
.character-tools button{border:1px solid #604d78;border-radius:999px;background:#090609;color:var(--lilac);padding:6px 12px;font-weight:800}
.character-tools button[aria-pressed=true]{background:var(--lilac);color:#000}
.character-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.character-open{display:block;width:100%;height:auto;aspect-ratio:1;padding:0;border:1px solid #604d78;border-radius:10px;overflow:hidden;background:#100c13;color:#fff}
.character-open img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:center 29%;transition:transform .2s ease}
.character-open:hover img{transform:scale(1.035)}
.character-fallback{display:grid;place-items:center;width:100%;height:100%;padding:12px;font-weight:600;text-align:center;color:#000;background:rgba(176,140,231,.78)}
.volume-hero{margin:0 0 14px;width:100%;min-height:clamp(150px,16vw,230px);padding:20px 25px;border:1px solid var(--acid);border-radius:11px}

@media(max-width:850px){.video-list{grid-auto-columns:minmax(230px,calc((100% - 10px)/2))}}
@media(max-width:650px){
 .page-intro{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:0;gap:8px 10px;padding:10px 0}
 .page-art-strip{grid-column:1/-1;grid-row:2;height:50px;gap:2px}
 .commission-button{position:static;grid-column:2;grid-row:1;justify-self:end;align-self:center;transform:none;max-width:100%;font-size:.73rem}
 .action-icon{width:17px;height:17px}
 .video-list{grid-template-columns:none;grid-auto-columns:minmax(220px,78%);gap:8px}
 .video-open,.video-open img{height:92px}
 .viewer-shell{padding:13px}
 .viewer img{max-height:65vh}
 .character-sheet{grid-template-columns:1fr;gap:12px;padding-right:0}
 .character-sheet-image{width:100%;max-height:40vh;aspect-ratio:4/3}
 .character-dialog{padding:16px}
 .footer-row{min-height:0;align-items:flex-start;gap:12px}
 .socials{max-width:255px}
 .cover{margin-bottom:10px;border-radius:8px}
 .cover-stage{height:clamp(120px,36vw,178px)}
 .cover-overlay{inset:auto 7px 7px;gap:6px}
 .cover-overlay h1{font-size:1.35rem;padding:6px 9px;border-radius:7px}
 .cover-overlay .commission-button{font-size:.72rem;padding:5px 8px;gap:3px;white-space:normal;text-align:center}
 .video-list{grid-auto-columns:minmax(215px,76%)}
 .video-open,.video-open img{height:auto;aspect-ratio:16/9}
 .guest-dialog{width:calc(100vw - 22px);max-height:calc(100dvh - 22px);padding:14px 14px 12px;border-radius:12px}
 .guest-dialog h2{font-size:1.35rem;margin:0 32px 9px 0}
 .guest-close{right:10px;top:8px;font-size:1.45rem}
 .guest-dialog .guest-form{display:block;max-height:none;padding-right:3px}
 .guest-dialog .guest-form label{margin-bottom:8px;font-size:.82rem}
 .guest-dialog .guest-form input,.guest-dialog .guest-form textarea{min-height:34px;padding:6px 9px;border-radius:8px}
 .guest-dialog .guest-form textarea{min-height:42px}
 .guest-dialog .form-actions{position:sticky;bottom:0;margin-top:8px;padding-top:8px;background:linear-gradient(180deg,rgba(9,9,9,0),#090909 28%)}
 .guest-dialog .form-actions button{padding:8px 12px;font-size:.86rem}
 .guest-dialog .form-feedback{font-size:.78rem;margin-top:7px}
 .video-dialog{padding:15px}
 .video-dialog-grid{display:block}
 .video-info{padding:14px 0 0}
 .video-dialog-thumb{width:min(56%,210px)}
 .character-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .character-tools{margin-bottom:8px;gap:6px;font-size:.78rem}
 .character-tools button{padding:5px 9px}
 .volume-hero{margin:0 0 10px;padding:16px;border-radius:8px}
}
@media(min-width:651px) and (max-width:850px){.video-list{grid-auto-columns:minmax(230px,calc((100% - 10px)/2))}}
@media(min-width:651px) and (max-width:850px){.character-list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Three individually framed pieces sit directly below the header rule. */
.cover{border-top:0;border-radius:0 0 11px 11px}
.cover-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.cover-panel{display:block;min-width:0;min-height:0;overflow:hidden;background:#0c0810}
.cover-panel img{width:100%;height:100%;object-fit:cover}
.cover-panel:hover img{opacity:.88}
.cover-panel:focus-visible{outline:3px solid var(--lilac);outline-offset:-3px;position:relative;z-index:3}

/* Image-only character tiles reveal their credits on hover and keyboard focus. */
.character-open{position:relative;border:0}
.character-caption{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:2px;padding:10px 11px;background:rgba(0,0,0,.88);color:#fff;text-align:left;opacity:0;transition:opacity .18s ease;pointer-events:none}
.character-caption strong{font-size:.92rem;font-weight:800;line-height:1.1}
.character-caption span{font-size:.8rem;font-weight:500;line-height:1.15}
.character-open:hover .character-caption,.character-open:focus-visible .character-caption{opacity:1}
@media(hover:none){.character-caption{opacity:1}}

/* Podcast and artwork headers share a height and align with the same header line. */
.volume-hero{height:clamp(150px,16vw,230px);min-height:0;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:0;border-radius:0 0 11px 11px;padding:16px 24px}
.volume-hero>img{width:min(65%,690px);max-height:100%;object-fit:contain;object-position:left center}
.volume-hero .guest-button{margin:0;flex:none}
@media(max-width:650px){
 .cover,.volume-hero{border-radius:0 0 8px 8px}
 .cover-stage,.volume-hero{height:clamp(120px,36vw,178px)}
 .cover-stage{gap:2px}
 .volume-hero{display:flex;padding:10px 13px;gap:8px}
 .volume-hero>img{width:calc(100% - 128px);max-height:100%}
 .volume-hero .guest-button{font-size:.77rem;padding:6px 8px;gap:4px}
 .volume-hero .guest-button img{width:19px;height:19px}
}

/* Keep the page chrome in the same place whether a route needs a scrollbar. */
html{overflow-y:scroll;scrollbar-gutter:stable}

/* Shallow banner: three works, two diagonals, one fixed selection per page load. */
.cover-stage{display:flex;gap:0;height:clamp(105px,12vw,170px);--cut:18px;background:#000}
.cover-panel{position:relative;flex:0 0 calc((100% + 2 * var(--cut))/3);clip-path:polygon(var(--lt) 0,var(--rt) 0,var(--rb) 100%,var(--lb) 100%)}
.cover-panel+.cover-panel{margin-left:calc(-1 * var(--cut))}
.cover-panel:focus-visible{outline:none;filter:brightness(.65)}
.cover-panel:focus-visible::after{content:'';position:absolute;inset:3px;border:3px solid var(--lilac);pointer-events:none}

/* Give the playable thumbnails the same unframed interaction as the portraits. */
.video-open{border:0}
.video-open:hover{border-color:transparent}
.video-open:focus-visible{outline:3px solid var(--lilac);outline-offset:3px}

.volume-hero{height:clamp(105px,12vw,170px)}
@media(max-width:650px){
 .cover-stage{height:clamp(88px,26vw,125px);--cut:11px}
 .volume-hero{height:clamp(88px,26vw,125px)}
}

/* Titles share the vertical centre of the podcast mark; actions stay in the corner. */
.cover-overlay{inset:0 13px;align-items:center;justify-content:flex-start}
.cover-overlay .commission-button{position:absolute;right:0;bottom:13px}

/* Lilac shows through the artwork at the existing, restrained hover opacity. */
.cover-panel,.art-link,.gallery-feed button,.video-open,.character-open{background:var(--lilac)}
.art-link:hover img,.art-link:focus-visible img{opacity:.88}
.gallery-feed button:hover img,.gallery-feed button:focus-visible img{opacity:.83}
.video-open:hover img,.video-open:focus-visible img,.cover-panel:hover img,.cover-panel:focus-visible img{opacity:.88}
.character-open:hover img,.character-open:focus-visible img{opacity:.88}
.character-caption{align-items:center;text-align:center;background:rgba(176,140,231,.88);color:#000}
.home-pair-image{height:100%;min-width:0;overflow:hidden;background:var(--lilac)}
.home-pair-link:hover .home-pair-image img,.home-pair-link:focus-visible .home-pair-image img{opacity:.88}

@media(max-width:650px){
 .cover-overlay{inset:0 7px}
 .cover-overlay .commission-button{bottom:7px}
}

/* Both the title and action sit on the banner's vertical centre line. */
.cover-overlay{justify-content:space-between}
.cover-overlay .commission-button{position:static;transform:none;margin-left:auto;flex:none}

/* A single arrow path mirrored for matching previous/next controls. */
.carousel-controls button{display:grid;place-items:center;padding:0}
.carousel-controls svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carousel-controls [data-scroll="prev"] svg{transform:rotate(180deg)}
@media(max-width:650px){.cover-overlay .commission-button{max-width:60%;flex:none}}

/* Matched artwork navigation, using the same path as the video carousel. */
.viewer .viewer-prev,.viewer .viewer-next{display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0}
.viewer-controls svg,.acid-link svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.viewer .viewer-prev svg,.acid-link svg{transform:rotate(180deg)}
.acid-link{display:inline-flex;align-items:center;gap:7px}
.carousel-controls button{width:36px;height:36px}
.carousel-controls svg{width:18px;height:18px}

/* Contain the lilac hover colour within the gallery's rounded image mask. */
.gallery-feed button{border-radius:8px;overflow:hidden}
.gallery-feed button img{border-radius:0}
@media(max-width:650px){.gallery-feed button{border-radius:6px}}