:root {
  --ink: oklch(17% 0.012 255);
  --paper: oklch(95% 0.014 85);
  --signal: oklch(61% 0.18 32);
  --muted: oklch(48% 0.016 255);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 4rem);
  border-bottom: 2px solid var(--ink);
}

.wordmark {
  color: var(--ink);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: .78;
  letter-spacing: -.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.wordmark span { color: var(--signal); }
.site-header p, .youtube-link, footer, .intro p { font-family: Arial, sans-serif; }
.site-header p { margin: 0; color: var(--muted); font-size: .8rem; text-align: center; }
.youtube-link { justify-self: end; color: var(--ink); font-size: .85rem; font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.youtube-link span { color: var(--signal); font-size: 1.1em; }

main { padding: clamp(3.5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 4rem) 5rem; }
.intro { margin: 0 0 clamp(2.5rem, 6vw, 5.5rem); }
.eyebrow { margin: 0 0 .45rem; color: var(--signal); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 10ch; margin: 0; font-size: clamp(4rem, 11vw, 10rem); line-height: .82; letter-spacing: -.04em; text-transform: uppercase; }
.intro > p:last-child { margin: 1.25rem 0 0; color: var(--muted); font-size: .95rem; }

.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.6rem, 1.4vw, 1.3rem); }
.photo { grid-column: span 4; min-height: 18rem; margin: 0; overflow: hidden; background: oklch(82% 0.018 85); }
.photo:nth-child(5n + 1) { grid-column: span 7; min-height: clamp(22rem, 40vw, 42rem); }
.photo:nth-child(5n + 3) { grid-column: span 5; }
.photo-button { display: block; width: 100%; height: 100%; min-height: inherit; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.photo img { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; filter: saturate(.8) contrast(1.05); transition: transform 500ms cubic-bezier(.16, 1, .3, 1), filter 500ms ease; }
.photo-button:hover img, .photo-button:focus-visible img { filter: saturate(1) contrast(1); transform: scale(1.035); }
.photo-button:focus-visible { outline: 4px solid var(--signal); outline-offset: -4px; }

.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; padding: clamp(1rem, 3vw, 3rem); border: 0; background: oklch(12% 0.01 255 / .98); color: oklch(96% 0.01 85); }
.lightbox::backdrop { background: oklch(12% 0.01 255 / .85); }
.lightbox img { display: block; width: 100%; height: calc(100% - 2.8rem); object-fit: contain; }
.lightbox p { margin: .7rem 0 0; font-family: Arial, sans-serif; font-size: .8rem; text-align: center; }
.close-button { position: fixed; top: 1rem; right: 1rem; z-index: 1; padding: .6rem .8rem; border: 1px solid oklch(96% 0.01 85 / .5); color: inherit; background: oklch(12% 0.01 255 / .72); font: 700 .8rem Arial, sans-serif; cursor: pointer; }
.close-button span { margin-left: .35rem; font-size: 1.2rem; line-height: 0; }

footer { padding: 1.5rem clamp(1.25rem, 4vw, 4rem); border-top: 1px solid oklch(17% 0.012 255 / .25); color: var(--muted); font-size: .72rem; }

@media (max-width: 650px) {
  .site-header { grid-template-columns: 1fr auto; gap: 1rem; }
  .site-header p { display: none; }
  .gallery { gap: .6rem; }
  .photo, .photo:nth-child(5n + 1), .photo:nth-child(5n + 3) { grid-column: span 6; min-height: 13rem; }
  .photo:nth-child(5n + 1) { grid-column: span 12; min-height: 24rem; }
}