*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#fafafa;color:#252525;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a,button{touch-action:manipulation}a:hover{color:#777}a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:6px}header,main,footer{width:90%;max-width:1600px;margin:auto}header{display:flex;justify-content:space-between;align-items:baseline;gap:30px;padding:48px 0 68px}h1{font-size:21px;font-weight:400;letter-spacing:-.6px;margin:0}.header-links{display:flex;gap:28px;font-size:14px;color:#626262}.collection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}.categories{display:flex;flex-wrap:wrap;gap:8px 25px}.categories button{padding:8px 0;border:0;background:none;color:#747474;cursor:pointer;font-size:14px;line-height:1.5;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}.categories button[aria-pressed=true]{color:#202020;border-color:#202020}.categories button:hover{color:#202020}.total{font-size:12px;color:#777;white-space:nowrap}.gallery{columns:4;column-gap:24px}.photo{margin:0 0 28px;min-width:0;break-inside:avoid}.photo button{width:100%;padding:0;display:block;border:0;background:transparent;cursor:zoom-in}.photo img{display:block;width:100%;height:auto;transition:opacity .3s}.photo button:hover img{opacity:.9}.gallery.single{columns:1;max-width:420px;margin:0 auto}.gallery.changing{animation:appear .35s ease both}@keyframes appear{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.about{border-top:1px solid #dedede;margin-top:85px;padding:38px 0 65px;display:grid;grid-template-columns:1fr 2fr;gap:35px}.about h2{font-size:14px;font-weight:400;margin:5px 0}.about p{max-width:570px;font-size:16px;line-height:1.8;color:#646464;margin:0 0 18px}.about a{font-size:14px;border-bottom:1px solid #aaa;padding-bottom:3px}footer{border-top:1px solid #dedede;display:flex;justify-content:space-between;padding:24px 0 32px;font-size:12px;color:#777;gap:20px}dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;padding:25px 32px;background:#fafafa;color:#252525}dialog::backdrop{background:#fafafa}dialog[open]{display:grid;grid-template-columns:44px 1fr 44px;grid-template-rows:40px 1fr;align-items:center;gap:14px;animation:appear .2s ease}.viewer-bar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#666}dialog button{border:0;background:transparent;color:inherit;padding:12px 6px;cursor:pointer;font-size:14px;min-height:44px}dialog .previous,dialog .next{font-size:24px}dialog figure{margin:0;min-width:0;text-align:center}#full{max-width:100%;max-height:calc(100dvh - 190px);object-fit:contain}#caption{font-size:12px;color:#727272;margin-top:15px;line-height:1.5}body.viewing{overflow:hidden}@media(min-width:1600px){.gallery{column-gap:30px}}@media(max-width:1200px){.gallery{columns:3}}@media(max-width:900px){.gallery{columns:2;column-gap:20px}header{padding:35px 0 48px}}@media(max-width:560px){header,main,footer{width:89%}header{padding:30px 0 36px;align-items:flex-start;gap:18px}h1{font-size:19px;max-width:150px;line-height:1.3}.header-links{gap:17px;font-size:14px;padding-top:4px}.collection-bar{align-items:flex-start;margin-bottom:23px}.categories{gap:3px 20px}.total{display:none}.gallery{columns:2;column-gap:14px}.photo{margin-bottom:24px}.photo figcaption{font-size:13px}.about{margin-top:50px;padding:28px 0 40px;grid-template-columns:1fr;gap:20px}dialog{padding:12px}dialog[open]{grid-template-columns:28px 1fr 28px;gap:4px}#full{max-height:calc(100dvh - 190px)}footer{line-height:1.5}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.photo img,#full{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

.photo figcaption{font-size:14px;line-height:1.5;color:#686868;margin-top:10px;overflow-wrap:anywhere}

#image-status{min-height:1.5em;margin:6px 0 0;font-size:12px;color:#727272;line-height:1.5}

/* Phone layouts keep the staggered gallery and use comfortably sized controls. */
@media(max-width:600px){
 header,main,footer{width:calc(100% - 36px)}
 header{flex-wrap:wrap;align-items:center;gap:10px 20px;padding:24px 0 24px}
 h1{max-width:none;flex:1 0 100%;font-size:22px;line-height:1.3}
 .header-links{padding:0;gap:24px;flex-wrap:wrap}
 .header-links a{display:inline-flex;align-items:center;min-height:44px}
 .collection-bar{display:block;margin-bottom:20px}
 .categories{gap:2px 20px;max-width:100%}
 .categories button{min-height:44px;max-width:100%;overflow-wrap:anywhere;padding:10px 0;font-size:14px}
 .gallery{columns:2;column-gap:14px}
 .photo{margin-bottom:24px}
 .photo figcaption{font-size:14px;line-height:1.5;margin-top:8px}
 .gallery.single{max-width:360px}
 .about{margin-top:38px}
 footer{align-items:center;flex-wrap:wrap;gap:8px 16px;padding:14px 0 max(20px,env(safe-area-inset-bottom));font-size:13px}
 footer a{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:350px){.gallery{columns:1;max-width:290px;margin:auto}}
@media(max-width:700px),(max-height:500px) and (max-width:1000px){
 dialog{height:100vh;height:100dvh;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:hidden}
 dialog[open]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 44px;gap:8px 16px}
 .viewer-bar{grid-row:1;grid-column:1/-1;gap:12px;font-size:14px}
 .viewer-bar #count{min-width:0;overflow-wrap:anywhere}
 dialog #close{min-width:60px;flex-shrink:0}
 dialog figure{grid-row:2;grid-column:1/-1;display:flex;flex-direction:column;align-items:center;height:100%;min-height:0;min-width:0}
 #full{display:block;flex:1 1 0;min-height:0;width:100%;height:0;max-width:100%;max-height:none;object-fit:contain}
 #caption{flex:0 0 auto;max-height:22vh;overflow:auto;font-size:14px;line-height:1.5;margin-top:10px;overflow-wrap:anywhere}
 #image-status{flex:0 0 auto;min-height:0;font-size:12px;max-height:18vh;overflow:auto}
 #image-status:empty{display:none}
 dialog .previous{grid-row:3;grid-column:1;justify-self:start;min-width:56px}
 dialog .next{grid-row:3;grid-column:2;justify-self:end;min-width:56px}
}