:root { --bg: #faf9f7; --ink: #1b1a18; --ink-soft: #6b6862; --rule: #e6e3dd; --gap: 18px; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Jost, Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-soft); }

.site-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 32px; padding: 34px 40px 26px; flex-wrap: wrap;
}
.wordmark { font-size: 22px; letter-spacing: .34em; text-transform: lowercase; font-weight: 400; }
/* DM Mono for the address: it draws a true slashed zero by default, so the
   three 0s in meara000 can't be misread as letter o. Jost has no slashed-zero
   feature at all, and Plex/Space/JetBrains/Source Code Pro only dot theirs.
   Mono is already wide, so the tracking comes down from .2em. */
.eyebrow {
  margin: 0; font-size: 13px; letter-spacing: .1em; text-transform: lowercase;
  color: var(--ink-soft); font-weight: 500;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.gallery-wrap { padding: 0 40px 90px; }

/* Masonry columns are real elements (built in gallery.js), laid out as a flex
   row anchored to flex-start. Every column therefore starts on the exact same
   top edge, which CSS multi-column balancing could not guarantee while the
   lazy-loaded images were still resolving their heights. */
.gallery { display: flex; align-items: flex-start; gap: var(--gap); }
.gallery-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--gap);
}
.gallery button {
  display: block; width: 100%; margin: 0; padding: 0; border: 0;
  background: #f0eee9; cursor: zoom-in; line-height: 0; overflow: hidden;
}
.gallery button:hover { opacity: .86; }
.gallery img { display: block; width: 100%; height: auto; }

.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(20,19,17,.93);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .18s ease-out;
}
.lightbox[hidden] { display: none; }
.lightbox-inner {
  width: 90%; max-height: 88vh;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  animation: rise .22s ease-out;
}
.lightbox-inner img {
  display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox-bar {
  display: flex; align-items: center; gap: 20px;
  color: #f2f0ec; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.lightbox-bar span { opacity: .6; font-variant-numeric: tabular-nums; }
.lightbox button {
  border: 0; background: none; color: #f2f0ec; cursor: pointer;
  font-family: inherit; font-size: 12px; letter-spacing: .2em; padding: 6px 2px; font-weight: 300;
}
.lightbox button:hover { color: #a9a49b; }
.lightbox-close { position: absolute; top: 22px; right: 26px; font-size: 26px !important; line-height: 1; padding: 8px 12px !important; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: scale(.985) } to { opacity: 1; transform: scale(1) } }

@media (max-width: 600px) {
  .site-head, .gallery-wrap { padding-left: 20px; padding-right: 20px; }
}