:root {
  --bg: #0b0b0b;
  --cell: #0d0d0d;
  --cell-hover: #111111;
  --text: #f1f1ec;
  --muted: #777772;
  --line: rgba(255,255,255,.07);
  --accent: #d26a52;
}
* { box-sizing: border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; text-transform:uppercase; -webkit-font-smoothing:antialiased; }
body.lightbox-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; text-transform:inherit; }

.site-header {
  width:100%; height:150px; padding:0 clamp(24px,3vw,56px);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  border-bottom:1px solid var(--line); background:var(--bg);
  font-size:11px; line-height:14px; letter-spacing:.16em;
}
.brand,.project-title,.archive-link { font:inherit; line-height:inherit; letter-spacing:inherit; white-space:nowrap; }
.brand { justify-self:start; color:var(--accent); transition:opacity .2s ease; }
.brand:hover,.archive-link:hover { opacity:.72; }
.project-title { justify-self:center; color:var(--muted); }
.archive-link { justify-self:end; display:inline-flex; align-items:center; gap:7px; color:var(--accent); }
.link-arrow { display:inline-block; color:var(--accent); font-size:17px; line-height:14px; letter-spacing:0; transform:translateY(-1px); }

.gallery { width:100%; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); }
.photo-card {
  position:relative; aspect-ratio:1/1; overflow:hidden; border:0; padding:0;
  display:flex; align-items:center; justify-content:center; background:var(--cell); cursor:zoom-in;
  transition:background-color .32s ease;
}
.photo-card img {
  display:block; width:60%; height:80%; max-width:none; max-height:none; aspect-ratio:3/4;
  object-fit:cover; object-position:center; opacity:.96; transform:scale(1);
  transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .3s ease,filter .3s ease;
}
.photo-card:hover { background:var(--cell-hover); }
.photo-card:hover img { transform:scale(1.018); opacity:1; filter:brightness(1.035); }

.gallery-empty { grid-column:1/-1; display:grid; grid-template-columns:inherit; gap:1px; background:var(--line); }
.gallery-empty__frame { aspect-ratio:1/1; display:grid; place-items:center; background:var(--cell); color:rgba(255,255,255,.2); font-size:9px; letter-spacing:.14em; }

.project-note { width:min(760px,calc(100vw - 40px)); margin:150px auto 80px; text-align:center; }
.project-note::before { content:''; display:block; width:38px; height:1px; margin:0 auto 30px; background:var(--line); }
.project-note__lead { margin:0 auto 18px; color:var(--muted); font-size:11px; line-height:1.75; letter-spacing:.16em; }
.project-note__lead--strong { margin-bottom:24px; color:var(--muted); font-size:12px; font-weight:700; }
.project-note__lead--closing { margin-bottom:0; }
.project-note__lead--closing::after { content:''; display:block; width:38px; height:1px; margin:44px auto 0; background:var(--line); }
.project-note__meta { margin:14px 0 0; color:#5f5f5b; font-size:9px; line-height:1.6; letter-spacing:.14em; }
.project-note__meta:first-of-type { margin-top:48px; }
.project-note__meta a { color:var(--accent); transition:opacity .2s ease; }
.project-note__meta a:hover { opacity:.72; }

.lightbox { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(2,2,2,.988); color:var(--text); }
.lightbox::backdrop { background:rgba(2,2,2,.988); }
.lightbox[open] { display:grid; place-items:center; }
.lightbox__figure { margin:0; width:min(92vw,1800px); height:min(90dvh,1200px); display:grid; grid-template-rows:1fr auto; gap:14px; place-items:center; }
.lightbox__image { max-width:100%; max-height:calc(90dvh - 42px); width:auto; height:auto; object-fit:contain; display:block; }
.lightbox__caption { width:100%; display:flex; align-items:center; justify-content:flex-start; color:var(--muted); font-size:11px; letter-spacing:.04em; }
.lightbox__close,.lightbox__nav { position:fixed; z-index:3; border:0; background:transparent; color:var(--text); cursor:pointer; }
.lightbox__close { top:17px; right:21px; font-size:30px; line-height:1; font-weight:300; }
.lightbox__nav { top:50%; transform:translateY(-50%); padding:16px; font-size:20px; }
.lightbox__nav--prev { left:7px; }
.lightbox__nav--next { right:7px; }
.lightbox__nav:hover,.lightbox__close:hover { color:var(--accent); }

@media (min-width:2200px) { .gallery,.gallery-empty { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (min-width:1700px) and (max-width:2199px) { .gallery,.gallery-empty { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1699px) { .gallery,.gallery-empty { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1000px) { .gallery,.gallery-empty { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
  .site-header { height:118px; padding:0 18px; grid-template-columns:1fr auto; }
  .project-title { grid-column:1/-1; grid-row:2; justify-self:start; padding-bottom:18px; font-size:9px; letter-spacing:.12em; }
  .brand { grid-column:1; grid-row:1; }
  .archive-link { grid-column:2; grid-row:1; }
  .gallery,.gallery-empty { grid-template-columns:1fr; }
  .project-note { margin-top:105px; }
  .project-note__lead { font-size:10px; letter-spacing:.13em; }
  .project-note__lead--strong { font-size:11px; }
  .project-note__lead--closing::after { margin-top:34px; }
  .project-note__meta:first-of-type { margin-top:38px; }
  .lightbox__figure { width:calc(100vw - 30px); height:min(86dvh,900px); }
  .lightbox__nav { display:none; }
  .lightbox__caption { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .photo-card,.photo-card img,.brand,.archive-link,.project-note__meta a { transition:none; }
}