:root{--bg:#151617;--ink:#f0eee8;--muted:#b9b8b1;--line:#3d4140;--green:#08783f;--green-ink:#21a35b;--green-light:#8eeaa4;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}
body::before{content:'';position:fixed;inset:0 0 auto;height:3px;z-index:20;pointer-events:none;background:linear-gradient(90deg,var(--green) 0 46%,#2aa953 48%,var(--green-light) 50%,#2aa953 52%,var(--green) 54% 100%);background-size:250% 100%;animation:top-line-light 12s linear infinite}
@keyframes top-line-light{0%,18%{background-position:200% 0}82%,100%{background-position:-200% 0}}
body:has(dialog[open]){overflow:hidden}.site-header{display:flex;justify-content:space-between;align-items:end;gap:2rem;padding:22px}
h1{margin:0;font:500 2.25rem/1 'Barlow Condensed','Arial Narrow',Arial,sans-serif;letter-spacing:.03em}h1 span{font-size:inherit;color:var(--green-ink)}.collection span{color:var(--green-ink)}
.site-header p,.collection{margin:.45rem 0 0;color:var(--muted);font-size:.72rem}.collection{text-align:right;letter-spacing:.08em}.collection span{font-family:ui-monospace,monospace;display:block;margin-top:.3rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px;padding:0 22px 22px}.tile{position:relative;aspect-ratio:4/3;border:0;background:#262a2a;padding:0;cursor:pointer;overflow:visible}.tile img{width:100%;height:100%;object-fit:cover;display:block}.tile:focus-visible{outline:3px solid var(--green-ink);outline-offset:2px;z-index:2}
@media(hover:hover) and (pointer:fine){.tile{transition:transform .17s ease,box-shadow .17s ease}.tile:hover{transform:scale(1.055);z-index:2;box-shadow:0 0 0 2px var(--green),0 7px 24px #000b}}
footer{border-top:1px solid var(--line);padding:13px 22px;color:var(--muted);font-size:.72rem;display:flex;justify-content:space-between}
dialog{width:100vw;height:100vh;max-width:none;max-height:none;border:0;margin:0;padding:0;background:#101213;color:var(--ink)}dialog::backdrop{background:#101213}.viewer-header{height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.viewer-header span{font:.75rem ui-monospace,monospace;letter-spacing:.1em;color:var(--green-ink)}button{font:inherit;color:inherit}.viewer-header button,.viewer-controls button{border:1px solid #4b504f;background:#232728;padding:.55rem .75rem;cursor:pointer}
.stage{height:calc(100vh - 175px);margin:12px 14px 0;position:relative;overflow:hidden;touch-action:pan-y}.stage[data-zoomed="true"]{touch-action:none;cursor:grab}.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:center;user-select:none;-webkit-user-drag:none}.metadata{margin:0;padding:6px 14px 0;color:var(--muted);font-size:.74rem;text-align:center}.viewer-controls{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:10px 14px}.viewer-controls div{display:flex;gap:5px}.viewer-controls button[aria-pressed="true"]{border-color:var(--green-ink);color:var(--green-ink)}.context{position:absolute;left:22px;bottom:70px;max-width:38rem;background:#101213e8;padding:.7rem 1rem;font-size:.82rem}.context p{margin:.2rem 0}
@media(max-width:520px){.site-header{padding:18px 13px}.gallery{padding:0 13px 16px;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:5px}.collection{display:none}footer{padding:12px 13px}.viewer-controls{justify-content:center}.viewer-controls button,.viewer-header button{min-height:44px}.stage{margin:10px 8px 0;height:calc(100vh - 190px)}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}.tile{transition:none}}