* { box-sizing: border-box; }
:root { color-scheme: dark; background: #171717; color: #f1f1ed; font-family: Arial, Helvetica, sans-serif; }
body { margin: 0; }
header { display: flex; justify-content: flex-end; align-items: center; min-height: 82px; padding: 16px 24px; }
.email { color: inherit; font-size: 14px; text-decoration: none; padding-block: 12px; }
.email:hover { text-decoration: underline; text-underline-offset: 5px; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.gallery { padding: 0 12px 12px; columns: 3; column-gap: 12px; }
.gallery.is-masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 4px; gap: 12px; align-items: start; }
.gallery.is-masonry .clip { margin-bottom: 0; }
.clip { position: relative; display: block; width: 100%; padding: 0; margin: 0 0 12px; border: 0; background: #171717; cursor: pointer; break-inside: avoid; overflow: hidden; }
.clip img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: contain; }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.clip.is-playing video { opacity: 1; }
.clip--animation { background: #171717; }
.animation-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.animation-canvas svg { display: block; width: 100%; height: 100%; }
.clip.is-animated > img { opacity: 0; }
.clip::after { content: ''; position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; border: 1px solid #ffffff70; border-radius: 50%; background: #0006 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='m14 11 10 6-10 6z' fill='white'/%3E%3C/svg%3E") center/100% no-repeat; opacity: 0; transition: opacity .15s; pointer-events: none; }
.clip:hover::after, .clip:focus-visible::after { opacity: 1; }
dialog { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: #090909; color: #fff; }
dialog::backdrop { background: #090909; }
dialog[open] { display: grid; place-items: center; }
.viewer-video { display: block; width: auto; height: auto; max-width: calc(100vw - 64px); max-height: calc(100dvh - 100px); }
.viewer-animation { position: relative; width: min(calc(100vw - 64px), calc((100dvh - 132px) * var(--animation-ratio, 1))); max-width: 1100px; aspect-ratio: var(--animation-ratio, 1); background: #171717; }
.viewer-animation__canvas, .viewer-animation__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.viewer-animation svg { display: block; width: 100%; height: 100%; }
.viewer-playback { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff40; border-radius: 50%; color: #fff; background: #222; cursor: pointer; }
.viewer-playback svg { width: 20px; height: 20px; }
.viewer-video[hidden], .viewer-animation[hidden], .viewer-animation__poster[hidden], .viewer-playback[hidden] { display: none; }
.close { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; background: #222; border: 1px solid #ffffff40; border-radius: 50%; color: #fff; display: grid; place-items: center; cursor: pointer; }
.close svg { width: 20px; height: 20px; }
body:has(dialog[open]) { overflow: hidden; }
@media (min-width: 1800px) { .gallery { columns: 4; } .gallery.is-masonry { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .gallery { columns: 2; } .gallery.is-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { header { min-height: 72px; justify-content: center; padding: 12px 16px; } .gallery, .gallery.is-masonry { display: block; columns: 1; padding: 0 8px 8px; } .clip, .gallery.is-masonry .clip { margin-bottom: 8px; } .clip::after { opacity: 1; width: 30px; height: 30px; right: 12px; bottom: 12px; } .viewer-video { max-width: 100vw; max-height: calc(100dvh - 100px); } }
@media (prefers-reduced-motion: reduce) { .clip::after { transition: none; opacity: 1; } }