
/* Interaction, screening room and typography study; current site untouched. */
.work .frame{position:relative}
.work .frame:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0004,transparent 60%);opacity:0;transition:opacity .3s}
.work-play{position:absolute;right:14px;bottom:14px;z-index:1;display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffffb0;border-radius:50%;color:white;background:#0003;opacity:0;transform:translateY(5px);transition:opacity .3s,transform .3s;font-size:11px;padding-left:2px}
.work:not([aria-disabled=true]):hover .work-play,.work:focus-visible .work-play{opacity:1;transform:none}
.work:not([aria-disabled=true]):hover .frame:after,.work:focus-visible .frame:after{opacity:1}
.work:focus-visible{outline:2px solid #666;outline-offset:6px}
.work-meta{padding-top:12px;gap:8px;grid-template-columns:20px minmax(0,1fr)}
.work-title{line-height:1.65;text-wrap:pretty;overflow-wrap:anywhere;letter-spacing:.015em}
.work-role{margin-top:6px;line-height:1.7;font-size:10px;color:#676761}
.section-head h2,.service-heading h2{letter-spacing:-.04em;line-height:1.12}
.service-item p{max-width:36em;text-wrap:pretty;line-height:2}
.bio{max-width:36em;line-height:2.15;text-wrap:pretty}
.contact-copy{max-width:35em;text-wrap:pretty}
.film-dialog{width:min(1120px,94vw)!important;padding:24px!important;background:#121313!important;border:1px solid #ffffff20!important;border-radius:4px;max-height:92dvh;overflow-y:auto;box-shadow:0 25px 100px #0008}
.film-dialog::backdrop{background:#090b0ded!important;backdrop-filter:blur(8px)}
.film-head{align-items:flex-start!important;gap:24px!important;padding:0 0 18px;margin-bottom:0!important;background:#121313!important}
.film-head>span{font-size:clamp(14px,1.5vw,20px);line-height:1.6;max-width:800px;text-wrap:pretty}
.film-close{flex-shrink:0;font-size:10px;letter-spacing:.12em;border:1px solid #ffffff35!important;border-radius:2px}
.film-close:hover{background:#ffffff15}
.film-dialog .project-context{border:0;margin:0;padding:20px 0;font-size:16px;color:#ddd;letter-spacing:.04em}
.film-pagination{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff25;padding-top:18px;gap:15px}
.film-pagination button{background:none;border:0;color:#ddd;cursor:pointer;padding:10px 0;font:inherit;font-size:12px}
.film-pagination button:disabled{opacity:.3;cursor:default}
.film-position{font-size:10px;letter-spacing:.12em;color:#999}
.film-screen .play-gate span{width:68px;height:68px;font-size:21px;transition:background .25s,transform .25s}
.play-gate:hover span{background:#ffffff20;transform:scale(1.06)}
.preview-return{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:8;background:#111;color:#eee;border:1px solid #ffffff40;padding:12px 18px;border-radius:30px;font-size:10px;box-shadow:0 4px 20px #0002;white-space:nowrap}
@media(hover:none){.work-play{opacity:1;transform:none;width:30px;height:30px;bottom:10px;right:10px}}
@media(max-width:620px){.work-meta{grid-template-columns:1fr}.work-title{line-height:1.65}.film-dialog{padding:16px!important;width:96vw!important}.film-head{gap:12px!important}.film-head>span{font-size:13px}.film-close{padding:10px!important}.film-dialog .project-context{font-size:14px}.work-role{font-size:9px}}
@media(prefers-reduced-motion:reduce){.work-play,.work .frame:after,.film-screen .play-gate span{transition:none}}

