/* Quiet animation highlights with a compact, ordered film preview. */
.animation-portfolio { padding-top:56px; scroll-margin-top:22px; border-bottom:1px solid var(--line); }
.header nav { gap:26px; }
.animation-reel { position:relative; width:100%; height:min(56.25vw,100svh); overflow:hidden; background:#030609; color:#fff; isolation:isolate; }
.reel-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; opacity:0; pointer-events:none; }
.reel-video.is-active { opacity:1; z-index:1; }
.reel-navigation { position:absolute; z-index:2; right:max(24px,3vw); bottom:24px; display:flex; align-items:center; justify-content:space-between; gap:22px; color:#fff; text-shadow:0 1px 9px #000,0 1px 3px #000; }
.reel-position { font-size:13px; font-weight:400; letter-spacing:.04em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.reel-position span { color:#ffffffb3; margin-left:8px; }
.reel-actions { display:flex; align-items:center; gap:2px; }
.reel-actions button { display:grid; place-items:center; width:44px; height:44px; padding:10px; background:none; border:0; color:inherit; font-size:22px; font-weight:300; text-shadow:inherit; border-radius:50%; }
.reel-actions svg { width:15px; height:15px; filter:drop-shadow(0 1px 3px #000); }
.reel-actions button:hover,.reel-actions button:focus-visible { background:#08122059; }
.reel-status { position:absolute; z-index:2; top:18px; left:50%; transform:translateX(-50%); background:#080e18e8; border:1px solid #566273; padding:12px 18px; max-width:calc(100% - 32px); width:max-content; text-align:center; font-size:12px; line-height:1.5; }
.reel-status[hidden] { display:none; }
.film-gallery-heading { padding-block:42px 24px; scroll-margin-top:30px; }
.film-gallery-heading h3 { color:var(--ink); font-size:clamp(35px,4.2vw,65px); font-weight:400; letter-spacing:-.05em; line-height:1.1; }
.film-gallery-heading h3 span { color:var(--accent); }
.film-mosaic { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(145px,14.1vw,310px); grid-auto-flow:row; gap:8px; margin-inline:16px; }
.film-tile { position:relative; display:block; width:100%; min-height:0; min-width:0; overflow:hidden; padding:0; border:0; background:radial-gradient(ellipse at 25% 20%,#29405b,#101c2c 70%); text-align:left; color:#fff; }
.film-tile:nth-child(5n+1) { grid-column:span 2; grid-row:span 2; }
.film-tile img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .55s; }
.film-tile::after { content:""; position:absolute; inset:30% 0 0; background:linear-gradient(transparent,#02070edb); pointer-events:none; }
.film-tile:hover img { transform:scale(1.035); }
.film-tile:focus-visible { outline-offset:-4px; }
.film-tile img.thumbnail-unavailable { visibility:hidden; }
.film-play { position:absolute; z-index:1; top:16px; right:16px; width:36px; height:36px; border:1px solid #ffffff8c; display:grid; place-items:center; border-radius:50%; background:#07111ab8; transition:background .2s,border-color .2s; }
.film-play svg { width:19px; height:19px; }
.film-tile:hover .film-play,.film-tile:focus-visible .film-play { background:var(--accent); border-color:var(--accent); color:#07111a; }
.film-caption { position:absolute; z-index:1; inset:auto 18px 17px; display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; gap:10px; }
.film-number { font-size:10px; line-height:1.5; color:#e0c687; padding-top:2px; }
.film-caption strong { font-size:clamp(13px,1.03vw,19px); font-weight:500; line-height:1.35; letter-spacing:-.01em; text-wrap:pretty; }
.film-watch { display:none; font-size:10px; color:#d0d6df; grid-column:2; }
.film-tile:nth-child(5n+1) .film-caption { inset-inline:28px; bottom:25px; grid-template-columns:26px minmax(0,1fr); gap:10px; }
.film-tile:nth-child(5n+1) .film-caption strong { font-size:clamp(20px,2.2vw,38px); font-weight:400; letter-spacing:-.035em; }
.film-tile:nth-child(5n+1) .film-number { padding-top:7px; }
.film-tile:nth-child(5n+1) .film-watch { display:block; }
.film-tile:nth-child(5n+1) .film-play { width:50px; height:50px; top:24px; right:24px; }
.film-tile:nth-child(5n+1) .film-play svg { width:24px; height:24px; }
.film-tile[hidden] { display:none; }
.animation-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:24px 38px; }
.animation-footer p { color:var(--muted); font-size:11px; line-height:1.6; }
/* Fill the available screen for films, keeping their original ratio in the player. */
dialog.video-viewer { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; overflow:hidden; }
dialog.video-viewer[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
dialog.video-viewer .dialog-top { padding:10px 24px; position:relative; }
dialog.video-viewer #dialog-media { width:100%; height:100%; min-width:0; min-height:0; aspect-ratio:auto; background:#000; }
dialog.video-viewer #dialog-media iframe { width:100%; height:100%; }
dialog.video-viewer .viewer-controls,dialog.video-viewer .dialog-details,dialog.video-viewer #dialog-description { display:none; }
dialog.video-viewer .dialog-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:28px; padding:14px 24px 18px; }
dialog.video-viewer .dialog-copy h2 { font-size:clamp(18px,2vw,28px); line-height:1.2; }
dialog.video-viewer .dialog-credit { grid-column:1; font-size:10px; line-height:1.4; margin-top:6px; }
dialog.video-viewer #dialog-link { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:11px; margin:0; white-space:nowrap; }
.film-viewer-navigation { position:absolute; inset:0; pointer-events:none; z-index:4; }
.film-viewer-navigation[hidden] { display:none; }
.film-viewer-navigation button { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; display:grid; place-items:center; border:1px solid #ffffff80; border-radius:50%; background:#081220d9; color:#fff; font-size:27px; pointer-events:auto; box-shadow:0 2px 16px #0007; }
.film-viewer-navigation button:hover { background:var(--accent); color:#081220; border-color:var(--accent); }
#film-prev { left:18px; }
#film-next { right:18px; }
#film-position { position:absolute; top:21px; left:50%; transform:translateX(-50%); color:#d2b675; font-size:12px; font-variant-numeric:tabular-nums; }
@media(max-width:1000px) { .header nav { gap:18px; font-size:11px; }.header nav .nav-contact { gap:12px; }.film-caption { inset-inline:12px; bottom:12px; gap:5px; }.film-play { top:12px; right:12px; width:30px; height:30px; } }
@media(min-width:581px) and (max-width:900px) { .header { height:auto; min-height:80px; flex-wrap:wrap; gap:12px; padding-block:16px; }.header nav { flex-wrap:wrap; gap:16px; } }
@media(max-width:800px) { .animation-portfolio { padding-top:36px; }.reel-navigation { right:18px; bottom:15px; gap:14px; }.film-gallery-heading { padding-block:32px 22px; }.film-mosaic { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(132px,27vw,216px); gap:6px; margin-inline:8px; }.film-tile:nth-child(5n+1) { grid-row:span 2; }.film-caption strong { font-size:14px; }.film-tile:nth-child(5n+1) .film-caption strong { font-size:29px; }.film-tile:nth-child(5n+1) .film-caption { inset-inline:22px; bottom:22px; }.animation-footer { flex-wrap:wrap; gap:14px; } }
@media(max-width:580px) { .reel-navigation { right:12px; bottom:8px; gap:8px; }.reel-position { font-size:11px; }.reel-actions { gap:0; }.reel-actions button { font-size:20px; }.film-caption { grid-template-columns:18px minmax(0,1fr); inset-inline:10px; bottom:12px; gap:5px; }.film-caption strong { font-size:12px; }.film-number { font-size:9px; }.film-tile:nth-child(5n+1) .film-caption strong { font-size:26px; }.film-tile:nth-child(5n+1) .film-play { top:18px; right:18px; width:42px; height:42px; }dialog.video-viewer .dialog-top { padding:8px 14px; }dialog.video-viewer .dialog-copy { padding:12px 14px 16px; grid-template-columns:1fr; gap:0; }dialog.video-viewer #dialog-link { grid-column:1; grid-row:auto; margin-top:10px; justify-self:start; } }
@media(prefers-reduced-motion:reduce) { .film-tile img,.film-play { transition:none; } }

@media(max-width:580px) {
 .film-viewer-navigation button { width:44px; height:44px; font-size:24px; }
 #film-prev { left:8px; }
 #film-next { right:8px; }
 #film-position { top:18px; font-size:10px; }
 dialog.video-viewer .dialog-top .eyebrow { max-width:40%; font-size:8px; }
}