:root { color-scheme: dark; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: oklch(0.95 0.006 60); background: radial-gradient(ellipse 120% 90% at 50% 0%, oklch(0.19 0.012 50), oklch(0.12 0.008 40) 70%); }
header { padding: 56px 24px 32px; text-align: center; }
h1 { margin: 0; color: oklch(0.97 0.006 60); font-size: clamp(28px, 4vw, 44px); font-weight: 500; letter-spacing: .04em; }
header p { margin: 10px 0 0; color: oklch(0.65 0.02 50); font-size: 13px; letter-spacing: .12em; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; max-width: 1400px; margin: 0 auto; padding: 8px 20px 80px; }
.tile { aspect-ratio: 1.358 / 1; overflow: hidden; padding: 0; cursor: pointer; border: 7px solid oklch(0.99 0.002 60); border-radius: 2px; background: oklch(0.16 0.01 45); transition: transform .22s ease, box-shadow .22s ease; }
.tile:hover, .tile:focus-visible { transform: scale(1.06); box-shadow: 0 8px 28px oklch(0 0 0 / .5), 0 0 0 1px oklch(0.6 0.03 60 / .3); outline: none; z-index: 1; }
.tile img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lightbox { position: fixed; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: oklch(0.05 0.005 40 / .88); align-items: center; justify-content: center; }
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: transparent; }
.lightbox button { position: absolute; border: 0; background: none; color: oklch(0.9 0.005 60); cursor: pointer; }
.close { top: 20px; right: 24px; padding: 8px; font-size: 32px; line-height: 1; }
.previous, .next { top: 50%; padding: 16px; font-size: 48px; line-height: 1; opacity: .7; transform: translateY(-50%); transition: opacity .15s; }
.previous { left: 8px; } .next { right: 8px; } .previous:hover, .next:hover { opacity: 1; }
figure { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: calc(100vw - 48px); margin: 0; }
video { width: min(90vh, calc(100vw - 48px)); aspect-ratio: 1.358 / 1; display: block; border: 7px solid oklch(0.99 0.002 60); border-radius: 2px; box-shadow: 0 30px 80px oklch(0 0 0 / .6); background: #000; object-fit: contain; }
figcaption a { display: inline-block; padding: 10px 20px; border: 1px solid oklch(0.5 0.02 50 / .5); border-radius: 2px; color: oklch(0.88 0.005 60); font-size: 13px; letter-spacing: .06em; text-decoration: none; transition: border-color .15s, color .15s; }
figcaption a:hover { border-color: oklch(0.75 0.15 70); color: oklch(0.75 0.15 70); }
@media (max-width: 520px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .previous, .next { font-size: 40px; padding: 8px; } }