/* ---------- Settings: change these to restyle the whole site ---------- */
:root {
  --bg: #f7f6f3;
  --ink: #1c1b19;
  --muted: #5f5c56;
  --faint: #8a867e;
  --gap: clamp(12px, 1.6vw, 24px);      /* space between photos */
  --page-pad: clamp(20px, 4vw, 56px);   /* space at page edges */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --columns: 2;        /* photos per row on series pages (grid & masonry) */
  --cover-columns: 1;  /* covers per row on the home page */
}
/* On a single page you can override it, e.g. <div class="gallery grid" style="--columns: 4"> */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  padding: 0 var(--page-pad);
  background: var(--bg); color: var(--ink);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--faint); }
img { display: block; width: 100%; height: auto; background: #ebe9e4; } /* keeps each photo's own shape */
figure { margin: 0; }
p { text-wrap: pretty; }

/* ---------- Header & footer ---------- */
.site-header {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 16px; padding: 32px 0 56px;
}
.site-header .name { font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.site-header nav { display: flex; gap: 28px; font-size: 13px; letter-spacing: .04em; }
.site-header nav a { color: var(--faint); }
.site-header nav a:hover { color: var(--ink); }
.site-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 80px 0 32px; font-size: 12px; color: var(--faint); letter-spacing: .02em;
}

/* ---------- Home: series covers ---------- */
.covers {
  max-width: 60%;
  margin: 0 auto;
  display: grid; align-items: start;
  grid-template-columns: repeat(var(--cover-columns), minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px) clamp(16px, 2vw, 32px);
}
.cover { display: flex; flex-direction: column; gap: 6px; }
.cover img { margin-bottom: 8px; transition: opacity .2s; }
.cover:hover { color: var(--ink); }
.cover:hover img { opacity: .85; }
.cover h2 { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: .02em; }
.cover p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 46ch; }

/* ---------- Series page ---------- */
.series-intro {
  display: flex; justify-content: space-between; align-items: start;
  flex-wrap: wrap; gap: 24px; padding-bottom: 56px;
}
.series-intro > div { max-width: 680px; }
.series-intro h1 { margin: 0 0 20px; font-size: clamp(24px, 3vw, 34px); font-weight: 400; letter-spacing: -.01em; }
.series-intro p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.back, .series-nav a { font-size: 13px; letter-spacing: .04em; color: var(--faint); }
.back { padding-top: 12px; }
.back:hover, .series-nav a:hover { color: var(--ink); }
.series-nav { display: flex; justify-content: space-between; gap: 16px; padding-top: 72px; }
figcaption { margin-top: 10px; font-size: 12px; color: var(--faint); letter-spacing: .02em; }
/* To hide all captions, uncomment the next line: */
/* figcaption { display: none; } */

/* ---------- Gallery layouts ---------- */
/* grid: rows of photos */
.gallery.grid {
  display: grid; align-items: start; gap: var(--gap);
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
/* masonry: columns, photos stack without gaps */
/*.gallery.masonry { columns: var(--columns); column-gap: var(--gap); }*/
/*.gallery.masonry figure { break-inside: avoid; margin-bottom: var(--gap); }*/
/* column: one large photo after another */

/* New masonry layout to fill row by row */
.gallery.masonry { 
  max-width: 80%;
  margin: 0 auto;
  opacity: 0; transition: opacity .4s ease;
}
.gallery.masonry.ready { opacity: 1; }
.gallery.masonry { display: flex; align-items: flex-start; gap: var(--gap); }
.gallery.masonry .masonry-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); } 

.gallery.column {
  max-width: 960px; margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(48px, 8vw, 120px);
}

/* Smaller screens: fewer photos per row */
@media (max-width: 900px) { .gallery.grid, .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery.masonry { columns: 2; } }
@media (max-width: 560px) { .gallery.grid, .covers { grid-template-columns: 1fr; } .gallery.masonry { columns: 1; } .covers { max-width: 90%; } }

/* ---------- About & contact ---------- */
.about {
  display: grid; align-items: start; max-width: 1100px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 6vw, 96px);
}
.about-text { max-width: 520px; font-size: 17px; line-height: 1.6; }
.about-text p { margin: 0 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 13px; color: var(--faint); letter-spacing: .02em; padding-top: 12px; }
.contact { display: flex; flex-direction: column; gap: 10px; max-width: 640px; font-size: 15px; }
.contact .lead {
  margin: 0 0 18px; font-size: clamp(28px, 4vw, 44px); line-height: 1.2;
  letter-spacing: -.01em; text-wrap: balance;
}

/* ---------- Photo viewer (opens when you click a photo) ---------- */
.gallery img { cursor: zoom-in; }
.viewer {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: #000; /* black viewer */
  user-select: none; -webkit-user-select: none;
}
.viewer.open { display: block; }
.viewer-stage { position: absolute; inset: 64px 72px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.viewer-stage img {
  width: auto; height: auto; max-width: 100%; max-height: 100%; background: none;
  cursor: zoom-in; transform-origin: 0 0; transition: transform .25s ease; will-change: transform;
}
.viewer.zoomed .viewer-stage img { cursor: grab; }
.viewer.dragging .viewer-stage img { cursor: grabbing; transition: none; }
.viewer button {
  position: absolute; background: none; border: 0; padding: 12px; cursor: pointer;
  font: 300 28px/1 var(--font); color: #8a867e; /* light gray controls on black */
}
.viewer button:hover { color: #fff; }
.viewer-close { top: 14px; right: 18px; font-size: 32px !important; }
.viewer-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.viewer-next { right: 12px; top: 50%; transform: translateY(-50%); }
.viewer-info {
  position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 16px;
  font-size: 12px; letter-spacing: .04em; color: #8a867e;
}
@media (max-width: 560px) { .viewer-stage { inset: 56px 8px 64px; } .viewer-prev, .viewer-next { top: auto; bottom: 8px; transform: none; } }