@font-face{font-family:'BebasNeue';src:url('fonts/BebasNeue-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
    @font-face{font-family:'Mont';src: url('fonts/Mont-ExtraLightDEMO.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
    @font-face{font-family:'Mont';src: url('fonts/Mont-HeavyDEMO.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
    @font-face{font-family:'LEMONMILK';src: url('fonts/LEMONMILK-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
    @font-face{font-family:'LEMONMILK';src: url('fonts/LEMONMILK-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}

*{box-sizing:border-box}
body{margin:0;background:#000;color:#f2bf05;font-family:'LEMONMILK','Mont',Arial,sans-serif;font-weight:300}
.wrap{width:min(980px,calc(100% - 48px));margin:42px auto;display:flex;flex-direction:column;gap:18px;align-items:center}
.back{align-self:flex-start;color:inherit;text-decoration:none;font-family:'Mont',Arial,sans-serif;font-size:14px}
h1{font-size:22px;font-weight:300;margin:0;text-align:center}
/* Same 980px content width as the former viewer; per-page ratio matches its first still. */
.video-slot{width:100%;height:min(var(--video-height),66vh);background:#080808;border:1px solid #222}
.video-slot iframe{display:block;width:100%;height:100%;border:0}
.stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:6px}
.still{display:block;overflow:hidden}
.still img{display:block;width:100%;height:130px;object-fit:cover}
a:focus-visible,button:focus-visible{outline:2px solid #f2bf05;outline-offset:3px}
.lightbox{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff;overflow:hidden}
.lightbox::backdrop{background:#000}
.lightbox[open]{display:grid;place-items:center}
.lightbox img{width:100%;height:100%;object-fit:contain;min-height:0}
.lightbox button{position:absolute;z-index:1;width:48px;height:48px;border:1px solid #ffffff55;border-radius:50%;background:#0009;color:#fff;cursor:pointer;display:grid;place-items:center}
.lightbox svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.previous{left:16px;top:calc(50% - 24px)}.next{right:16px;top:calc(50% - 24px)}.close{right:16px;top:16px}
.counter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#0009;padding:6px 12px;font:14px Arial,sans-serif}
@media(max-width:899px){.stills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.stills{grid-template-columns:1fr}.still img{height:auto}.previous{left:8px}.next{right:8px}h1{font-size:18px}}

/* Credits sit between each project's video and stills; use the light font face. */
.project-credits{width:100%;padding:10px 0;font-family:'LEMONMILK','Mont',Arial,sans-serif;font-weight:300;font-size:14px;line-height:1.8;letter-spacing:0.2px}
.project-credits p{margin:0}