@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&display=swap');

:root{color-scheme:dark;--bg:#141513;--fg:#f0f0e9;--muted:#8c8d84;--accent:#d6f08a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:14px 'DM Sans',sans-serif}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.work{padding:18px}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.photo{margin:0;min-width:0;position:relative;overflow:hidden}
.photo-button{padding:0;border:0;display:block;width:100%;background:#242920;position:relative}
.photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .6s}
.photo-button:hover img{transform:scale(1.025)}
.photo-open{position:absolute;top:18px;right:18px;background:#14151380;backdrop-filter:blur(10px);width:32px;height:32px;border:1px solid #ffffff40;border-radius:50%;display:grid;place-items:center;opacity:0;transition:opacity .2s}
figcaption{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:48px 22px 22px;background:linear-gradient(transparent,#0009);pointer-events:none;opacity:0;transition:opacity .2s}
figcaption h3{font-size:13px;font-weight:450;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo:hover figcaption,.photo:focus-within figcaption,.photo:hover .photo-open,.photo:focus-within .photo-open{opacity:1}
.viewer{color:var(--fg);width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;background:#11120f;padding:35px 70px;overflow:hidden}
.viewer::backdrop{background:#11120f}
.viewer[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
body:has(.viewer[open]){overflow:hidden}
.viewer img{max-width:100%;max-height:calc(100dvh - 150px);object-fit:contain;min-height:0}
.close{background:none;border:0;font-size:28px;color:var(--muted);padding:0 5px}
.viewer-close{position:absolute;right:25px;top:17px}
.viewer-caption{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1100px;padding-top:18px;gap:16px}
.viewer-caption h2{font-size:18px;font-weight:500;margin:0 0 5px}
.viewer-caption span{font-size:11px;color:var(--muted)}
.viewer-caption a{font-size:12px;color:var(--accent)}
.viewer-arrow{position:absolute;top:45%;background:#20231ddd;border:1px solid #444;color:var(--fg);border-radius:50%;width:40px;height:40px}
.previous{left:15px}.next{right:15px}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 23px;background:var(--accent);color:var(--bg);border-radius:5px;display:none;max-width:90%;z-index:5}
.empty{grid-column:1/-1;color:var(--muted);padding:70px 0;text-align:center}
@media(max-width:650px){
  .work{padding:8px}
  .gallery{grid-template-columns:minmax(0,1fr);gap:8px}
  .photo img{aspect-ratio:auto}
  .viewer{padding:45px 15px 25px}
  .viewer-arrow{top:auto;bottom:100px}
  .viewer img{max-height:calc(100dvh - 200px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}