*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0d0d0f; --fg:#f2f2f0; --muted:#8f8f96; --line:#26262b;
  --max:1500px; --gap:14px;
  --serif:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

header.site{padding:64px 0 48px;border-bottom:1px solid var(--line);margin-bottom:48px}
header.site h1{margin:0 0 12px;font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(34px,5.2vw,60px);font-weight:500;letter-spacing:-.015em;line-height:1.08}
header.site p{margin:0;color:var(--muted);font-size:17.5px;font-style:italic;
  font-family:var(--serif);font-weight:400;letter-spacing:.005em}
.back{display:inline-block;margin:36px 0 22px;color:var(--muted);font-size:14px;letter-spacing:.04em}
.back:hover{color:var(--fg)}

.lede{max-width:60ch;margin:0 0 34px;color:#c9c9cf;font-size:18.5px;line-height:1.62;
  font-family:var(--serif);font-weight:400;font-optical-sizing:auto}
h2.gallery-title{margin:0 0 16px;font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(30px,4.2vw,48px);font-weight:500;letter-spacing:-.015em;line-height:1.1}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;padding-bottom:80px}
.card{display:block;border-radius:3px;overflow:hidden;background:#141418}
.card img{width:100%;height:260px;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover img{transform:scale(1.03)}
.card .meta{padding:16px 18px 20px}
.card h3{margin:0 0 5px;font-family:var(--serif);font-optical-sizing:auto;
  font-size:23px;font-weight:500;letter-spacing:-.01em}
.card span{color:var(--muted);font-size:14px}

/* HDR / SDR viewing indicator ------------------------------------------ */
.dr{display:flex;align-items:center;gap:10px;margin:0 0 34px;font-size:16px;
    line-height:1.6;color:#b4b4bc;max-width:66ch}
.dr-hdr{display:none;align-items:center;gap:8px;color:#e8e8ee;
    border:1px solid #34343c;border-radius:999px;padding:7px 16px 7px 13px;
    font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.dr-hdr::before{content:"";width:8px;height:8px;border-radius:50%;
    background:#7de2b0;box-shadow:0 0 11px #7de2b0}
.dr-sdr::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
    background:#6a6a72;margin-right:10px;vertical-align:middle}
@media (dynamic-range: high){
  .dr-sdr{display:none}
  .dr-hdr{display:inline-flex}
}

.grid{columns:3 340px;column-gap:var(--gap);padding-bottom:80px}
.grid figure{margin:0 0 var(--gap);break-inside:avoid;position:relative;cursor:zoom-in}
.grid img{width:100%;height:auto;display:block;background:#141418}
.grid figcaption{
  position:absolute;inset:auto 0 0 0;padding:28px 14px 12px;font-size:13px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:0;transition:opacity .25s
}
.grid figure:hover figcaption{opacity:1}

.lb{position:fixed;inset:0;background:rgba(8,8,10,.97);display:none;z-index:50;
    align-items:center;justify-content:center;flex-direction:column}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:86vh;object-fit:contain}
.lb .cap{color:#c2c2c9;font-family:var(--serif);font-size:16.5px;font-style:italic;
  margin-top:18px;padding:0 24px;text-align:center;min-height:1.4em}
.lb button{position:absolute;background:none;border:0;color:#dcdce2;font-size:34px;line-height:1;
           cursor:pointer;padding:14px 20px;opacity:.65}
.lb button:hover{opacity:1}
.lb .prev{left:4px;top:50%;transform:translateY(-50%)}
.lb .next{right:4px;top:50%;transform:translateY(-50%)}
.lb .close{right:6px;top:6px;font-size:28px}

footer{border-top:1px solid var(--line);padding:36px 0 60px;color:var(--muted);font-size:14px}

@media(max-width:640px){
  .grid{columns:1}
  .wrap{padding:0 16px}
  header.site{padding:44px 0 32px;margin-bottom:34px}
  .card img{height:200px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}