:root {
  --fg: #111;
  --muted: #8a8a8a;
  --bg: #fff;
  --gap: 16px;
  --maxw: 1560px;
  color-scheme: light;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

/* header */
.site-header {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  padding: 26px clamp(20px, 4vw, 56px);
  max-width: var(--maxw); width: 100%; margin: 0 auto;
}
.logo { font-weight: 600; font-size: 19px; letter-spacing: .02em; white-space: nowrap; }
.nav { display: flex; gap: 26px; flex: 1; flex-wrap: wrap; }
.nav a { color: var(--muted); transition: color .15s ease; padding-bottom: 2px; }
.nav a:hover { color: var(--fg); }
.nav a.active { color: var(--fg); border-bottom: 1px solid var(--fg); }
.social { display: flex; gap: 18px; }
.social a { color: var(--muted); font-size: 13px; }
.social a:hover { color: var(--fg); }

/* main */
main {
  flex: 1 0 auto; max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 6px clamp(20px, 4vw, 56px) 64px;
}
.page-title {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; margin: 6px 0 26px;
}

/* project intro copy */
.project-intro { max-width: 720px; margin: 0 0 34px; }
.project-tagline {
  font-size: 17px; line-height: 1.55; color: var(--fg); letter-spacing: .01em;
}
.project-desc { margin-top: 18px; }
.project-tagline + .project-desc { margin-top: 18px; }
.project-desc p { color: #555; font-size: 14px; line-height: 1.85; margin-bottom: 14px; }
.project-desc p:last-child { margin-bottom: 0; }

/* gallery — layout baked from the original site (see lightbox.js).
   Default (pre-JS / JS-off) is a single source-order column, so the page is
   never blank. JS then switches to masonry columns or justified rows. */
.gallery { display: flex; flex-direction: column; gap: var(--gap); }

/* masonry: a row of equal-width column stacks */
.gallery.cols-ready { flex-direction: row; align-items: flex-start; }
.gallery .col {
  flex: 1 1 0;
  min-width: 0;               /* let columns shrink evenly */
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* justified rows: each row fills the width; cells flex-grow by aspect ratio,
   so every image in a row ends up the same height (height = width / aspect). */
.gallery.justified-ready { flex-direction: column; }
.jrow { display: flex; align-items: flex-start; gap: var(--gap); }
.jrow .cell { flex: 0 1 0; min-width: 0; }   /* flex-grow set inline per cell */

.gallery .cell {
  display: block;
  cursor: zoom-in;
  background: #f3f3f3;
  overflow: hidden;
  line-height: 0;
}
.gallery .cell img { width: 100%; height: auto; display: block; transition: opacity .2s ease; }
.gallery .cell:hover img { opacity: .9; }

/* projects index */
.projects-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.project-card {
  position: relative; display: block; overflow: hidden;
  background: #f3f3f3; aspect-ratio: 4 / 3;
}
.project-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease, filter .3s ease; filter: brightness(.82);
}
.project-card:hover img { transform: scale(1.04); filter: brightness(.58); }
.project-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px;
  color: #fff; font-size: 16px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
@media (max-width: 560px) { .projects-index { grid-template-columns: 1fr; } }

/* video / films */
.film { max-width: 980px; margin: 0 auto 64px; }
.video-frame { position: relative; padding-bottom: 56.25%; height: 0; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-title {
  font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; margin: 20px 0 12px;
}
.credits { color: #555; font-size: 13px; line-height: 1.9; }
.film-link { margin-top: 10px; }
.film-link a { color: var(--fg); border-bottom: 1px solid var(--muted); }
.film-link a:hover { border-color: var(--fg); }

/* contact */
.contact { padding: 8vh 0; line-height: 2.1; }
.contact h1 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.contact p { color: #333; }
.contact a { border-bottom: 1px solid var(--muted); }
.contact a:hover { border-color: var(--fg); }
.contact-social { margin-top: 14px; }
.contact-social a { color: var(--muted); border: 0; }
.contact-social a:hover { color: var(--fg); }

/* footer */
.site-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 26px clamp(20px, 4vw, 56px);
  color: var(--muted); font-size: 13px;
}
.site-footer a:hover { color: var(--fg); }

/* lightbox */
.lb {
  position: fixed; inset: 0; background: rgba(255,255,255,.98);
  display: none; align-items: center; justify-content: center; z-index: 100; cursor: zoom-out;
}
.lb.open { display: flex; }
.lb img { max-width: 94vw; max-height: 92vh; object-fit: contain; }
.lb .lb-close { position: absolute; top: 18px; right: 26px; font-size: 26px; cursor: pointer; line-height: 1; }
.lb .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 40px; cursor: pointer; user-select: none; padding: 0 22px; opacity: .45; transition: opacity .15s;
}
.lb .lb-nav:hover { opacity: 1; }
.lb .lb-prev { left: 0; } .lb .lb-next { right: 0; }
@media (max-width: 560px) { .lb .lb-nav { font-size: 30px; padding: 0 12px; } }