:root{
  --bg:#fbf0e9; --surface:#fffaf6; --fg:#2c2523; --muted:#7f716b; --line:#ecdcd0;
  --accent:#5d7892; --accent-fg:#ffffff; --tile-a:#d6dbe0; --tile-b:#f2d9c6; --overlay:rgba(20,22,26,.94);
  --display:'Cormorant Garamond',Georgia,serif; --body:'Work Sans',system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1b1815; --surface:#25211d; --fg:#f0eae1; --muted:#a69d91; --line:#3b362f;
  --accent:#9bb5cc; --accent-fg:#14110e; --tile-a:#34393d; --tile-b:#4d422c; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:env(safe-area-inset-top,0px);padding-bottom:max(48px,env(safe-area-inset-bottom,0px))}
.wrap{max-width:1200px;margin:0 auto}
header{text-align:center;padding:44px 0 20px}
.date{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,7vw,64px);line-height:1.05;margin:10px 0 0;text-wrap:balance}
figure.hero{margin:6px auto 0;max-width:980px}
figure.hero img{display:block;width:100%;height:auto;border-radius:3px;background:linear-gradient(135deg,var(--tile-a),var(--tile-b));aspect-ratio:2000/1325}
nav{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:22px 0 26px;border-bottom:1px solid var(--line)}
nav a{padding:12px 16px;color:var(--muted);text-decoration:none;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
nav a:hover{color:var(--fg)}
nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
nav a:focus-visible,.tile:focus-visible,#lb button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.count{font-size:13px;color:var(--muted);margin:0 0 14px;text-align:center}
.rows{display:flex;flex-wrap:wrap;gap:6px}
.tile{flex:var(--r) 1 calc(var(--r) * 210px);aspect-ratio:var(--r);min-width:0;border:0;padding:0;cursor:zoom-in;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--tile-a),var(--tile-b));border-radius:2px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile:hover img{filter:brightness(1.06)}
.rows::after{content:"";flex-grow:1000000}
footer{margin-top:40px;text-align:center;color:var(--muted);font-size:13px}
#lb{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:50;
  padding:max(56px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(44px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
#lb[hidden]{display:none}
#lb .frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:0}
#lbimg{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;box-shadow:0 8px 40px rgba(0,0,0,.45)}
#lb button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:24px;line-height:1;cursor:pointer;z-index:2}
#lb button:hover{background:rgba(255,255,255,.26)}
#lbx{top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px))}
#lbp{left:max(10px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
#lbn{right:max(10px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
#lbc{position:absolute;bottom:max(12px,env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:#d8d8d4;font-size:13px}
@media (prefers-reduced-motion:no-preference){.tile img{transition:filter .15s}}