@font-face{font-family:FilmTitle;src:url('./assets/fonts/film-title.woff2?v=20261016-archive28') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Handwritten;src:url('./assets/fonts/handwritten.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--frame-film:url('./assets/neon/frame-film.webp');--frame-paper:url('./assets/neon/frame-paper.webp');--frame-print:url('./assets/neon/frame-print.webp')}

/* Film archive: a real decorative mount outside the playback area. */
.screening .section-intro{align-items:center}
.film-reel-sticker{width:210px;height:auto;object-fit:contain;rotate:7deg;margin-right:2%;animation:reel-drift 9s ease-in-out infinite;pointer-events:none}
.screen-frame{border:35px solid transparent;border-image:var(--frame-film) 180 190 / 53px stretch;padding:17px 29px 30px;background:#05151c;box-shadow:0 25px 55px #020c1660}
.screen-frame:before,.screen-frame:after{content:none}
.screen-marquee{padding:0 0 22px;align-items:center;gap:22px;border-bottom:1px dashed #4a717a;margin-bottom:21px}
.screen-brand{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.screen-brand b{font:400 26px/1.3 FilmTitle,BodyCN,sans-serif;color:#e9f6f1;letter-spacing:1px}
.screen-brand small{font:500 12px/1.2 BodyCN,sans-serif;letter-spacing:2px;color:var(--cyan);border-left:1px solid #4a717a;padding-left:14px}
.screen-marquee i{width:7px;height:7px;margin-right:0;animation:record-pulse 3s ease-in-out infinite}
#screen-counter{font:400 28px/1 FilmTitle,sans-serif;color:var(--cyan);white-space:nowrap;letter-spacing:2px}
.screen-video-wrap{outline:1px solid #68849166;outline-offset:5px;background:#02070c;box-shadow:0 14px 24px #0004}
.screen-info{align-items:flex-end;gap:25px;padding:35px 0 0}
.screen-info>div:first-child{max-width:none;flex:1;min-width:0}
.screen-meta{gap:10px 17px;margin-bottom:16px;font:500 14px/1.5 BodyCN,sans-serif;letter-spacing:1px}
#screen-category{color:#041c24;background:var(--cyan);padding:5px 10px;font-family:FilmTitle,sans-serif;letter-spacing:.7px;transform:skew(-5deg)}
#screen-duration,#screen-release{color:#b5d0d1}
.screen-info h3{font:400 clamp(28px,3vw,43px)/1.45 FilmTitle,BodyCN,sans-serif;letter-spacing:.5px;color:#eef4ec;margin:0 0 12px;overflow-wrap:anywhere}
.screen-info p:empty{display:none}
.screen-info p:not(.screen-meta){font-size:16px}
.screen-info .performance-block{margin-top:24px;padding-top:20px;border-top:1px dashed #527079;max-width:620px}
.screen-info .performance-stats{gap:28px}
.screen-info .performance-stats dt{font:400 16px/1.5 Handwritten,BodyCN,sans-serif;letter-spacing:1px;color:#c8d9d8}
.screen-info .performance-stats dd{font:400 clamp(32px,3.3vw,46px)/1.2 FilmTitle,sans-serif;letter-spacing:.5px}
.screen-info .performance-source{font:400 12px/1.8 BodyCN,sans-serif;color:#8faeb2;letter-spacing:.3px;margin-top:16px}
.screen-transport{flex:0 0 auto;padding:0 0 6px 24px;border-left:1px solid #43656d}
.screen-transport>div{gap:10px}
.screen-transport>div button{width:49px;height:49px;font-size:29px;border-radius:0}
.screen-transport>button{font:400 18px/1.5 Handwritten,BodyCN,sans-serif;margin-top:14px;color:#bfd9db}
.queue-heading{font:400 16px/1.5 FilmTitle,BodyCN,sans-serif;letter-spacing:2px;margin:39px 0 22px;color:#cee4e2}
.film-ticket{border:0;border-bottom:1px dashed #476c74;padding:0 0 14px;background:#071d2577;position:relative}
.ticket-copy{padding:15px 13px 5px;border-bottom:0}
.ticket-copy small{font:400 12px/1.5 BodyCN,sans-serif;letter-spacing:.8px;color:#90b8bd;margin-bottom:8px}
.ticket-copy strong{font:400 20px/1.5 FilmTitle,BodyCN,sans-serif;letter-spacing:.3px}
.film-ticket.active .ticket-copy{border-left:3px solid var(--pink)}
.film-ticket.active .ticket-copy strong{color:#f5b7e0}
.ticket-play{border-radius:0;rotate:-5deg;background:#08242ee6;border:1px solid var(--cyan)}

/* Project plates: offset print ink; the hand-drawn film gets a paper mount. */
.work-visual{border:20px solid transparent;border-image:var(--frame-print) 130 / 24px stretch;background:#071922;padding:3px;overflow:visible}
.work-visual:after{content:none}
.work-card[data-project=ozai] .work-visual{border-image-source:var(--frame-paper);border-image-slice:145;border-width:25px;border-image-width:29px}
.work-card[data-category=commerce] .work-visual{border-image-source:var(--frame-film);border-image-slice:180 190;border-width:23px;border-image-width:31px}
.work-visual>img,.work-visual .triptych{overflow:hidden}
.work-visual:hover>img{transform:scale(1.015)}
.work-kind{top:17px;left:16px;font:500 12px/1.5 BodyCN,sans-serif;letter-spacing:.5px}
.work-status{top:17px;right:16px}
.work-meta h3{font-family:FilmTitle,BodyCN,sans-serif;font-weight:400;font-size:clamp(29px,2.4vw,40px);letter-spacing:.2px;line-height:1.5}
.work-card[data-project=ozai] .work-meta h3{font-family:Handwritten,BodyCN,sans-serif;font-size:clamp(33px,3vw,45px)}
.work-index{font-family:FilmTitle,sans-serif;font-weight:400;color:var(--pink);font-size:clamp(48px,6vw,85px)}
.work-card .performance-stats dd{font-family:FilmTitle,sans-serif;font-weight:400;font-size:29px}
.work-card .performance-stats dt{font-size:13px}
.work-overlay{inset:3px;overflow:hidden}
.work-overlay span{font:400 22px/1.5 FilmTitle,BodyCN,sans-serif;width:auto;height:auto;min-width:165px;min-height:60px;padding:14px 25px;border:0;border-radius:0;white-space:nowrap;background:var(--label-art) center/100% 100% no-repeat;color:#edfffa;box-shadow:0 10px 30px #0004}
.plain-title .title-part{display:inline-block}

/* Character sketchbook: torn paper and pencil lettering. */
.sketchbook{border:31px solid transparent;border-image:var(--frame-paper) 150 / 38px stretch;background:radial-gradient(ellipse at 30% 50%,#22607342,transparent 70%),#0a2028;padding:17px 20px 20px;gap:22px}
.sketchbook .sketch-margin{display:none}
.sketch-controls{padding-left:24px;border-left:1px dashed #627d80}
.sketch-controls .red-label{font:400 23px/1.5 Handwritten,BodyCN,sans-serif;color:#f3a0d7;letter-spacing:1px}
.sketch-controls h3{font:400 38px/1.4 Handwritten,BodyCN,sans-serif;color:#f4f0db;margin-top:22px}
.sketch-controls>p:not(.sketch-count){font:400 19px/1.8 Handwritten,BodyCN,sans-serif;color:#bed5d3}
.sketch-count span{font:400 60px/1 FilmTitle,sans-serif;color:var(--cyan)}
.sketch-controls .layout-modes button,.sketch-controls .text-button{font:400 19px/1.5 Handwritten,BodyCN,sans-serif}
.gallery-caption{font:400 14px/1.6 Handwritten,BodyCN,sans-serif;letter-spacing:.5px;bottom:16px;color:#d6e4dc}
.process-image-wrap{border:22px solid transparent;border-image:var(--frame-paper) 150 / 28px stretch;background:#081b23;padding:2px}
.process-layout article h3{font-family:Handwritten,BodyCN,sans-serif;font-size:34px;font-weight:400}
.process-tabs button{font-family:Handwritten,BodyCN,sans-serif;font-size:22px}
.process-tabs button span{font-family:FilmTitle,sans-serif;font-size:28px}
.image-caption{font-family:Handwritten,BodyCN,sans-serif;font-size:16px;background:#08212be6;padding:5px 11px;left:9px;bottom:9px}
.credential-grid button{border:17px solid transparent;border-image:var(--frame-print) 130 / 20px stretch;background:#091e26;padding:5px}
.credential-grid span{font-family:Handwritten,BodyCN,sans-serif;font-size:21px}
@keyframes reel-drift{50%{translate:0 -9px;rotate:3deg}}
@keyframes record-pulse{50%{box-shadow:0 0 0 5px #ed86ce1c}}

@media(max-width:1050px){
 .screen-frame{border-width:26px;border-image-width:42px;padding:14px 21px 22px}
 .screen-info{display:block}.screen-transport{border:0;padding:0;margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
 .screen-transport>button{margin:0}.screen-info .performance-block{max-width:none}
 .film-reel-sticker{width:170px}.sketchbook{grid-template-columns:minmax(0,1fr) 225px;padding:10px 12px;border-width:25px;border-image-width:31px;gap:16px}
 .sketch-controls{padding-left:15px}.sketch-controls h3{font-size:32px}.sketch-controls>p:not(.sketch-count){font-size:17px}
 .ticket-copy strong{font-size:18px}
}
@media(max-width:740px){
 .screening .section-intro{position:relative}.film-reel-sticker{position:absolute;width:105px;right:0;bottom:2px;margin:0;rotate:9deg}
 .screen-frame{margin-left:-7px;margin-right:-7px;border-width:15px;border-image-width:25px;padding:9px 9px 15px}
 .screen-marquee{padding-bottom:15px;margin-bottom:15px;gap:12px;align-items:flex-start}
 .screen-brand{gap:7px}.screen-brand b{font-size:19px;letter-spacing:.5px}
 .screen-brand small{display:block;font-size:9px;letter-spacing:1px;border:0;padding:0;width:100%;margin-left:15px}
 .screen-marquee i{width:5px;height:5px}#screen-counter{font-size:22px;letter-spacing:0;line-height:1.5}
 .screen-info{padding-top:24px}.screen-info h3{font-size:28px;line-height:1.5;margin-bottom:11px}
 .screen-meta{font-size:12px;gap:8px;letter-spacing:.2px;margin-bottom:16px}#screen-category{padding:4px 7px;font-size:12px}
 .screen-info .performance-block{margin-top:18px;padding-top:17px}.screen-info .performance-stats{gap:12px}
 .screen-info .performance-stats dt{font-size:15px;letter-spacing:0}.screen-info .performance-stats dd{font-size:clamp(18px,5.6vw,25px);letter-spacing:-.6px}
 .screen-info .performance-source{font-size:10px;margin-top:14px;line-height:1.8}
 .screen-transport{margin-top:20px;padding-top:15px;border-top:1px dashed #42626c}
 .screen-transport>div button{width:43px;height:43px;font-size:25px}.screen-transport>button{font-size:17px}
 .screen-info p:not(.screen-meta){font-size:14px}
 .queue-heading{font-size:14px;letter-spacing:1px;margin-top:30px}
 .ticket-copy{padding:12px 8px 5px}.ticket-copy small{font-size:10px;letter-spacing:0}.ticket-copy strong{font-size:17px;line-height:1.6}
 .work-visual{border-width:13px;border-image-width:17px;padding:2px}
 .work-card[data-project=ozai] .work-visual{border-width:15px;border-image-width:20px}
 .work-card[data-category=commerce] .work-visual{border-width:15px;border-image-width:20px}
 .work-kind{top:11px;left:10px;font-size:10px;max-width:58%}.work-status{top:11px;right:10px;font-size:10px}
 .work-meta h3{font-size:27px}.work-card[data-project=ozai] .work-meta h3{font-size:31px}.work-index{font-size:31px}
 .work-meta{grid-template-columns:minmax(0,1fr) 35px;row-gap:12px}
 .work-meta>div{display:contents}.work-meta h3{grid-column:1;grid-row:1;min-width:0}
 .work-meta>div>p{grid-column:1/-1;grid-row:2;margin-top:0}.work-meta>.card-arrow{grid-column:2;grid-row:1}
 .work-meta .performance-block{grid-column:1/-1;grid-row:4;width:100%;max-width:none;margin-top:10px}
 .work-meta .reference-link{grid-column:1/-1;grid-row:4;justify-self:start}
 .work-card .performance-stats dd{font-size:clamp(20px,6vw,26px)}.work-card .performance-stats dt{font-size:12px}
 .sketchbook{display:block;border-width:17px;border-image-width:24px;padding:8px 9px 14px;overflow:visible;margin-left:-6px;margin-right:-6px}
 .gallery-stage{height:310px}.gallery-caption{font-size:11px;line-height:1.6;bottom:12px;letter-spacing:0}
 .sketch-controls{padding:23px 4px 0;border-left:0;border-top:1px dashed #627d80}
 .sketch-controls .red-label{font-size:21px}.sketch-count span{font-size:41px}
 .sketch-controls h3{font-size:31px;margin-top:15px}.sketch-controls>p:not(.sketch-count){font-size:17px}
 .sketch-controls .layout-modes button{font-size:18px;padding:10px 8px}
 .sketch-controls .text-button{font-size:18px}
 .process-image-wrap{border-width:14px;border-image-width:21px;padding:1px}
 .process-tabs button{font-size:17px;padding:13px 9px}.process-tabs button span{font-size:22px}
 .process-layout article h3{font-size:29px}.image-caption{font-size:13px;padding:4px 8px;bottom:7px;left:7px}
 .credential-grid button{border-width:11px;border-image-width:15px;padding:1px}.credential-grid span{font-size:18px}
}