:root {
  --text: #000;
  --menu: #333;
  --hover: #777;
  --bg: #fff;
  --column: 864px;
  --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; /* stand-in for Alliance No. 2 */
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.3;
}
a { color: inherit; text-decoration: none; }

.site-header {
  width: min(var(--column), 100% - 32px);
  margin: 22px auto 0;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark { font-size: 24px; line-height: 1; white-space: nowrap; flex: none; }
.site-nav {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-left: clamp(24px, 12vw, 105px);
  padding-right: 8px;
  font-size: 16px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--menu);
}
.site-nav a { transition: color 0.4s ease 0s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--hover); }

main { width: min(var(--column), 100% - 32px); margin: 53px auto 0; }
figure { margin: 0 0 40px; }
figure img { display: block; width: 100%; height: auto; }
figure.wide img { aspect-ratio: 960 / 660; object-fit: cover; }
figcaption { margin-top: 3px; }

.exhibit { margin: 0 0 40px; }
.exhibit a { display: block; width: 40%; }
.exhibit.portrait a { width: 34.4%; }
.exhibit img { display: block; width: 100%; height: auto; object-fit: cover; }
.exhibit .caption { display: block; margin-top: 3px; }

.gallery { display: flex; flex-direction: column; gap: 55px; }
.gallery .intro { margin: 0 0 -36px; color: #444; }
.gallery figure { margin: 0; position: relative; }
.gallery figcaption { position: absolute; top: 100%; left: 0; margin-top: 3px; color: #333; white-space: nowrap; }

.zoom { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.97);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; }
.lightbox-caption { margin: 10px 0 0; min-height: 17px; font-size: 13px; color: #333; }
.lightbox-close { position: absolute; top: 12px; right: 18px; background: none; border: 0; font: inherit; font-size: 32px; line-height: 1; color: var(--text); cursor: pointer; }

.site-footer { margin-top: 110px; border-top: 1px solid #888; padding: 12px max(16px, calc((100% - var(--column)) / 2 + 9px)) 24px; font-size: 12px; color: #333; }

@media (max-width: 760px) {
  .wordmark { font-size: 20px; }
  .site-nav { font-size: 13px; letter-spacing: 0.02em; margin-left: 16px; padding-right: 0; }
  main { margin-top: 32px; }
  .exhibit a { width: 70%; }
  .exhibit.portrait a { width: 60%; }
}
@media (max-width: 480px) {
  .site-header { flex-direction: column; align-items: flex-start; height: auto; padding: 16px 0 8px; gap: 12px; }
  .site-nav { width: 100%; margin-left: 0; font-size: 14px; }
}