.selected-work { background:#efeee7; }
.work-intro { max-width:390px; }
.work-filters { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 28px; }
.work-filters[hidden] { display:none; }
.work-filters button { padding:10px 16px; min-height:44px; border:1px solid #bac2b9; background:none; border-radius:2px; font-size:12px; }
.work-filters button[aria-pressed="true"] { background:#172a31; border-color:#172a31; color:#f5f3ed; }
.work-filters button:hover { border-color:#172a31; }
.film-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:33px 25px; }
.film-card { min-width:0; display:block; }
.film-card[hidden] { display:none; }
.film-poster { aspect-ratio:16/10; overflow:hidden; position:relative; background:#162830; }
.film-poster img { height:100%; object-fit:cover; transition:transform .65s ease; }
.film-poster.portrait img { object-position:center 30%; }
.film-poster:after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#08171ed9); pointer-events:none; }
.film-card:hover img { transform:scale(1.04); }
.film-play { position:absolute; z-index:1; left:18px; bottom:17px; display:flex; gap:11px; align-items:center; font-size:11px; color:white; }
.film-play b { display:grid; place-items:center; width:35px; height:35px; border:1px solid #fff8; border-radius:50%; font-weight:400; font-size:13px; background:#14252c60; }
.film-duration { position:absolute; z-index:1; bottom:24px; right:18px; color:white; font-size:11px; font-variant-numeric:tabular-nums; }
.film-caption { padding-top:15px; }
.film-caption>span { color:#874d35; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; }
.film-caption h3 { font-size:20px; font-weight:550; letter-spacing:-.65px; line-height:1.35; margin-top:7px; }
.portfolio-bottom { display:flex; justify-content:space-between; align-items:center; gap:25px; border-top:1px solid #c8cec4; margin-top:35px; padding-top:20px; }
#film-count { font-size:12px; color:#52625b; }
#show-all-films[hidden] { display:none; }
.photo-collections { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.collection-card { min-width:0; }
.collection-image { position:relative; overflow:hidden; aspect-ratio:4/5; background:#e6e6df; }
.collection-image img { height:100%; object-fit:cover; transition:transform .6s ease; }
.collection-card:hover img { transform:scale(1.035); }
.collection-image span { position:absolute; right:13px; bottom:14px; background:#14252cd9; color:white; font-size:11px; padding:6px 10px; }
.collection-card h3 { font-size:20px; font-weight:550; line-height:1.3; letter-spacing:-.7px; margin-top:16px; }
.collection-card p { font-size:12px; color:#52625b; margin-top:7px; }
.hero-film { display:block; width:100%; height:100%; position:relative; }
.hero-film img { object-fit:cover; object-position:53% center; }
.hero-film .hero-play { position:absolute; z-index:3; left:25px; bottom:25px; padding:13px 18px; background:#f5f3ed; color:#172a31; display:flex; align-items:center; gap:16px; font-size:13px; font-weight:600; box-shadow:0 4px 20px #0002; }
.hero-play b { font-size:15px; }
.hero-art .film-frame { height:440px; }
.hero-art .film-frame .hero-film { overflow:hidden; }
#project-dialog { background:#101e24; color:#f5f3ed; padding:20px; width:min(1120px,calc(100% - 30px)); max-height:94vh; overflow:auto; }
.project-close { position:sticky; top:0; z-index:3; display:block; margin:0 0 12px auto; width:42px; height:42px; border:1px solid #ffffff55; background:#172a31; color:white; font-size:22px; }
#project-stage { height:min(65vh,690px); background:#071216; display:flex; align-items:center; justify-content:center; }
#project-stage video,#project-stage img { width:100%; height:100%; object-fit:contain; display:block; }
.project-meta { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:23px 5px 6px; }
#project-title { font-family:var(--display); font-size:38px; letter-spacing:-.02em; line-height:1.1; margin:8px 0 0; }
#project-detail { font-size:11px; color:#bfccc5; letter-spacing:1px; }
.project-meta .text-link { flex-shrink:0; color:#f5f3ed; }
#project-status { color:#d7dfda; font-size:12px; margin-top:12px; }
#project-status a { text-decoration:underline; }
#album-controls { display:flex; gap:10px; margin-top:14px; }
#album-controls[hidden] { display:none; }
#album-controls button { width:44px; height:44px; background:none; color:white; border:1px solid #ffffff60; font-size:24px; }
@media(max-width:1000px) { .film-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .photo-collections { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 22px; } .hero-art .film-frame { height:430px; } }
@media(max-width:600px) { .film-grid { grid-template-columns:1fr; gap:29px; } .work-filters { gap:7px; } .work-filters button { font-size:11px; padding:9px 12px; } .film-caption h3 { font-size:21px; } .photo-collections { gap:26px 16px; } .collection-card h3 { font-size:18px; } .collection-card p { font-size:11px; } .hero-art .film-frame { height:auto; aspect-ratio:4/3; } .hero-film .hero-play { left:16px; bottom:16px; font-size:12px; padding:11px 14px; } .project-meta { flex-direction:column; align-items:start; gap:18px; } #project-title { font-size:30px; } #project-dialog { padding:12px; } #project-stage { height:55vh; } .portfolio-bottom { align-items:start; } #show-all-films { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .film-poster img,.collection-image img { transition:none; } }