/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:    #F5F4F1;
  --white: #FFFFFF;
  --ink:   #0F0F0F;
  --mid:   #606060;
  --faint: #AAAAAA;
  --rule:  #D8D6D1;
  --max:   1080px;
  --nav-h: 50px;
  --f:     'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html { font-size: 13px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; }

/* ─── Nav ────────────────────────────────────────────────── */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 100;
}

.logo {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-items {
  list-style: none;
  display: flex;
  gap: 28px;
}

.nav-items a {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.15s;
}

.nav-items a:hover,
.nav-items a.current { color: var(--ink); }

/* ─── Page wrapper ───────────────────────────────────────── */
.pg {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}

/* ─── Section label ──────────────────────────────────────── */
.slabel {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 11px;
  border-bottom: 1px solid var(--rule);
}

/* ─── Ruled list ─────────────────────────────────────────── */
.rlist { list-style: none; }

.rlist li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}

.rlist .r-primary { flex: 1; min-width: 0; }
.rlist .r-secondary { color: var(--mid); font-size: 12px; white-space: nowrap; }
.rlist .r-year { color: var(--faint); font-size: 12px; white-space: nowrap; width: 36px; text-align: right; }
.rlist .r-role { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }

/* ─── Credits table ──────────────────────────────────────── */
/* Six columns need ~530px. The wrapper keeps that width inside its own
   scroll frame so the page itself never scrolls sideways (which pushed the
   fixed nav links off-screen on a phone). Below 560px the table restacks. */
.ctable-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Fixed layout with explicit column widths, so changing filter never
   re-flows the columns. Without this the table re-measures itself against
   whichever rows happen to be visible. */
.ctable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ctable th:nth-child(1), .ctable td:nth-child(1) { width: 17%; }
.ctable th:nth-child(2), .ctable td:nth-child(2) { width: 24%; }
.ctable th:nth-child(3), .ctable td:nth-child(3) { width: 6%;  }
.ctable th:nth-child(4), .ctable td:nth-child(4) { width: 17%; }
.ctable th:nth-child(5), .ctable td:nth-child(5) { width: 15%; }
.ctable th:nth-child(6), .ctable td:nth-child(6) { width: 21%; }

.ctable th {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  text-align: left;
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--rule);
}

.ctable td {
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  font-size: 13px;
}

.ctable td:last-child { padding-right: 0; }
.ctable tr:hover td { background: var(--white); }

.col-artist { font-weight: 400; }
.col-project { color: var(--mid); }
.col-year { color: var(--faint); font-size: 12px; white-space: nowrap; }
.col-studio { color: var(--mid); font-size: 12px; }
.col-label  { color: var(--mid); font-size: 12px; }
.col-roles  { color: var(--mid); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; }

.award-mark { font-size: 10px; color: var(--faint); font-style: normal; }

/* Linked project names stay in the table's own colour. The only affordance is
   the hover lift to full ink, same behaviour as the nav. */
.col-project a { color: inherit; text-decoration: none; }
.col-project a:hover { color: var(--ink); }
.col-project a:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ─── Filters ────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.fgroup {
  display: flex;
  gap: 0;
  border: 1px solid var(--rule);
}

.flabel {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 0;
  display: flex;
  align-items: center;
}

.fbtn {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 13px;
  background: none;
  border: none;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  font-family: var(--f);
  color: var(--mid);
  transition: all 0.12s;
  line-height: 1;
}

.fbtn:last-child { border-right: none; }
.fbtn:hover { color: var(--ink); }
.fbtn.on { background: var(--ink); color: var(--white); }

/* ─── Hero (home) ────────────────────────────────────────── */
#hero {
  min-height: 100vh;
  padding-top: var(--nav-h);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
}

.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 60px 40px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: center;
  width: 100%;
}

.hero-name {
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.93;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 24px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.hero-sub .dot { color: var(--rule); }
.hero-sub a { color: inherit; transition: color 0.15s; }
.hero-sub a:hover { color: var(--ink); }
.hero-sub a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.hero-tagline {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.65;
  max-width: 420px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.hero-photo {
  aspect-ratio: 3/4;
  background: var(--rule);
  overflow: hidden;
}

.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Statement ──────────────────────────────────────────── */
/* Reserved slot between the hero and the gallery. Deliberately the only
   place on the site set larger than 13px, so the one piece of prose
   carries weight against the lists of names. */
.statement p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 560px;
  margin: 0;
}

/* ─── Section block ──────────────────────────────────────── */
.sec {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
}

.sec-head {
  margin-bottom: 24px;
}

/* ─── Gallery strip ──────────────────────────────────────── */
/* Five across, three rows, which fits the 15 frames exactly. */
.gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: var(--rule);
}

.gal-cell {
  height: 260px;
  overflow: hidden;
  background: var(--rule);
  position: relative;
}

.gal-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gal-cell:hover img { transform: scale(1.04); }

.gal-cap {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
  color: #fff;
  font-size: 11px;
  padding: 20px 14px 10px;
  opacity: 0;
  transition: opacity 0.2s;
}

.gal-cell:hover .gal-cap { opacity: 1; }
.gal-cell { cursor: pointer; }
.gal-cell:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* Touch devices have no hover, so the caption would never appear.
   Show it permanently there instead, and let the tap open the lightbox. */
@media (hover: none) {
  .gal-cap { opacity: 1; }
}

/* ─── Lightbox ───────────────────────────────────────────── */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 12, 12, 0.96);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px 64px;
}
.lb[data-open="1"] { display: flex; }
.lb img {
  max-width: min(1400px, 94vw);
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lb-cap {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9a9a;
  text-align: center;
  max-width: 90vw;
}
.lb-count { color: #5e5e5e; margin-left: 12px; }
.lb button {
  position: absolute;
  background: none;
  border: none;
  color: #9a9a9a;
  font-family: var(--f);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 14px 18px;
  transition: color 0.15s;
}
.lb button:hover { color: #fff; }
.lb button:focus-visible { outline: 1px solid #9a9a9a; outline-offset: 2px; }
.lb-close { top: 8px; right: 12px; }
.lb-prev  { left: 4px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 4px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
  .lb { padding: 48px 10px 56px; }
  .lb-prev { left: 0; }
  .lb-next { right: 0; }
}

/* ─── Full-bleed break ───────────────────────────────────── */
.photo-break {
  height: 460px;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.photo-break img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

/* ─── Page heading ───────────────────────────────────────── */
.pg-head {
  padding: calc(var(--nav-h) + 56px) 0 48px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}

.pg-head h1 {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}

/* ─── Two columns ────────────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

/* ─── Footer ─────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule);
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.foot-name {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.foot-right {
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
  /* The portrait used to be hidden here, which threw away the best image
     on the site on the devices most people open it with. It now sits
     under the tagline and the hero sizes to its content. */
  #hero { min-height: 0; padding-top: calc(var(--nav-h) + 24px); }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  /* No max-width: the portrait fills the content column so its edges line
     up with the name, the rule and the tagline. A narrower box left it
     32px short of the right margin on any phone wider than 375pt. */
  /* Square on phones: a quarter shorter than 3:4, and because a square at
     full frame height takes a 2160px slice instead of 1620px, it also shows
     more of the room. Desktop keeps the 3:4 crop. */
  .hero-photo { display: block; aspect-ratio: 1 / 1; }
  .hero-photo picture { display: contents; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 560px) {
  nav, footer { padding: 0 20px; }
  footer { padding: 16px 20px; }
  .pg { padding: 0 20px; }
  .hero-inner { padding: 48px 20px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gal-cell { height: 200px; }
  .photo-break { height: 300px; }
  .pg-head { padding-top: calc(var(--nav-h) + 36px); }
  .sec { padding: 52px 0; }

  /* Credits restack: one credit per ruled block, columns become lines.
     Selectors carry .ctable so they outrank the `.ctable td` block rule. */
  .ctable-wrap { overflow-x: visible; }
  .ctable { table-layout: auto; }
  .ctable, .ctable thead, .ctable tbody, .ctable tr, .ctable td { display: block; width: 100%; }
  .ctable td:nth-child(n) { width: 100%; }
  .ctable thead { display: none; }
  .ctable tr { padding: 15px 0; border-bottom: 1px solid var(--rule); }
  .ctable tr:hover td { background: none; }
  .ctable td { border-bottom: 0; padding: 0; }
  .ctable td:empty { display: none; }
  .ctable td.col-project { margin: 2px 0 7px; }
  .ctable td.col-year,
  .ctable td.col-studio,
  .ctable td.col-label { display: inline; }
  .ctable td.col-studio::before,
  .ctable td.col-label::before { content: " · "; color: var(--rule); }
  .ctable td.col-roles { margin-top: 7px; }

  /* Award citations are long and the row is nowrap, which pushed the page
     sideways. Stack each entry instead: citation, source, year. */
  .rlist li { flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 0; }
  .rlist .r-secondary { white-space: normal; }
  .rlist .r-year { width: auto; text-align: left; }
}