/* Loosely after judd.furniture: white page, Helvetica, ruled rows. Tighter margins, a full-bleed flipbook, one-line
   index entries and a large project title keep it from being a copy. */

:root {
  --fg: #000;
  --bg: #fff;
  --margin: 40px;
  --gap: 28px;
  --rule: 1px solid var(--fg);
  --rule-heavy: 1px solid var(--fg);   /* every rule is 1px: the same weight as the link underline */
  --room: 40vw;                 /* space under the last index category; the hover still is capped just inside it */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 var(--margin);
  background: var(--bg);
  color: var(--fg);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover, .active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; font-size: 1em; font-weight: inherit; }
ul { list-style: none; }

::selection { background: var(--fg); color: var(--bg); }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  margin-bottom: 8px;
  justify-content: space-between;
  align-items: baseline;
  padding: 28px 0 28px;
}
.wordmark { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.wordmark:hover { text-decoration: none; }
/* About stays pinned top-right on every page, exactly where it sits in the masthead */
.about-link {
  position: fixed;
  top: 34px;
  right: var(--margin);
  z-index: 5;
  background: var(--bg);
  padding: 0 0 2px 6px;
}

/* ---------- index ---------- */

/* Each role is a ruled band: name and count on the left half, one line per project on the right half.
   The heavy rule above each band (and the closing rule) breaks at 50%, over the gap between the halves. */
.index {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gap);
  padding-top: 1px;
}
.index::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    var(--fg) calc(50% - var(--gap) / 2), transparent calc(50% - var(--gap) / 2),
    transparent calc(50% + var(--gap) / 2), var(--fg) calc(50% + var(--gap) / 2));
}
.index::before { top: 0; }
.view { position: relative; container-type: inline-size; }
/* each band is at least tall enough for a 16:9 hover still at half width; a taller still shrinks to fit its band
   (img max-height: 100% of the figure) rather than spilling into the next one */
.index.expanded { min-height: calc(3em + (100cqw - var(--gap)) / 2 * 9 / 16 + var(--gap)); }

.index h2 {
  grid-column: 1 / -1;
  padding: 10px 0 12px;
  cursor: pointer;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
  align-self: start;
}
.index.expanded h2 { grid-column: 1; }
/* grey numbers sit small and raised, like superscripts */
.count,
.list .yr { color: #999; margin-left: 0.2em; font-size: 0.62em; vertical-align: 0.55em; line-height: 0; font-variant-numeric: tabular-nums; }

.list {
  display: none;
  grid-column: 2;
  margin: 0;
  padding: calc(10px + 1.3em) 0 40px;   /* one line lower than the category name */
  list-style: none;
}
.index.expanded .list { display: block; }
.index.expanded .list.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: start; }
/* only the last category gets the big empty space, so the hover still always has room at the bottom of the page */
.index:last-child .list { padding-bottom: var(--room); }
.list li { display: block; }
.list .yr { margin-left: 0.65em; }   /* ~6px, the same gap as name + space + count */   /* evenly spaced: no gaps between years, each title carries its own */

/* Hover a title: its still appears in the empty first column of that row, and stays pinned under the
   sticky row heading while the row scrolls (the figure spans the row; the image inside is sticky). */
.index figure {
  position: absolute;
  top: 3em;
  left: 0;
  width: calc((100% - var(--gap)) / 2);
  bottom: var(--gap);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.index figure img {
  position: sticky;
  top: 3em;
  display: block;
  width: 100%;
  height: auto;
  max-height: min(100%, calc(100vh - 3em - var(--gap)), calc(var(--room) - var(--gap)));
  object-fit: contain;
  object-position: 0 0;
}
.index li:has(a:hover) figure { opacity: 1; }

/* ---------- flipbook (every film still, above the index) ---------- */

.flip { width: 66%; margin: 0 auto 56px; }   /* 66% of the index width, centred */
.flip-frame { display: block; aspect-ratio: 16 / 9; background: #eaeaea; overflow: hidden; }
.flip-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flip-caption { display: inline-block; margin-top: 0.5rem; }
.flip a:hover { text-decoration: none; }

/* ---------- item page ---------- */

.item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap);
  border-top: var(--rule-heavy);
  padding-top: 14px;
  margin-bottom: 72px;
}
/* big title across the whole row, the facts in three columns beneath it */
.item h1 {
  grid-column: 1 / -1;
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
}
.item p + p { margin-top: 1.3em; }

.item dl { display: grid; grid-template-columns: auto 1fr; column-gap: 0.8em; }
.item dt { color: #777; }
.item-bio { max-width: 34em; }
.item-link a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.item-link p + p { margin-top: 1.3em; }

.film {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  margin-bottom: 72px;
}

.stills {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 120px;
}
.stills button { all: unset; display: block; cursor: zoom-in; }
/* never cropped: each still keeps its own aspect ratio, and each row grows to its tallest image */
.stills img { display: block; width: 100%; height: auto; }

.more h2 { padding: 10px 0 12px; border-top: var(--rule-heavy); margin-bottom: 0.4em; }
.more ul { columns: 3; column-gap: var(--gap); }
.more li { break-inside: avoid; }
.more .yr { color: #777; }

/* Hover a title: its thumbnail appears large *behind* the type, centred between the More work rule and the
   footer rule (the section's bottom padding stands in for the footer gap). */
.more { position: relative; isolation: isolate; padding-bottom: 120px; }
main:has(.more) + .colophon { margin-top: 0; }
.colophon { position: relative; z-index: 1; }    /* footer type stays above the still too */
.more figure {
  position: absolute;
  z-index: -1;
  left: 15%;
  width: 61%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.more figure img { display: block; width: 100%; height: auto; }
.more li:has(a:hover) figure { opacity: 1; }

.viewer {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margin);
  cursor: zoom-out;
}
.viewer[hidden] { display: none; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- about modal ---------- */

.about {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margin);
}
.about[hidden] { display: none; }
.about-box {
  position: relative;
  width: min(960px, 100%);
  background: var(--bg);
  border: var(--rule);
  padding: 12px 16px 28px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: var(--gap);
}
.about-box h2 { font-weight: 500; }
.about-bio { max-width: 34em; }
.about-links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.about-links p + p { margin-top: 1.3em; }
.about-close {
  position: absolute;
  top: 12px;
  right: 16px;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.about-close:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- footer ---------- */

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 2em;
  margin-top: 120px;
  padding: 12px 0 60px;
  border-top: var(--rule-heavy);
}
.colophon span:first-child { margin-right: auto; }

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  :root { --margin: 20px; --gap: 20px; --room: 40px; }   /* no hover stills on phones, so no extra room */
  .index::before { background: var(--fg); }   /* one column on phones: the rule doesn't split */
  .list { padding-top: 10px; }
  .index.expanded .list.split { grid-template-columns: 1fr; }
  .index.expanded { min-height: 0; }
  body { font-size: 16px; }
  .masthead { padding: 20px 0 20px; }
  .index, .item { grid-template-columns: 1fr; }
  .index.expanded h2, .list { grid-column: 1; }
  .index figure { display: none; }
  .item { row-gap: 1.3em; }
  .item-bio { grid-column: 1; }
  .stills { grid-template-columns: repeat(2, 1fr); }
  .flip { width: 100%; }
  .more ul { columns: 1; }
  .more figure { display: none; }
  .colophon span:first-child { margin-right: 0; width: 100%; }
  .about { padding: 12px; align-items: flex-start; }
  .about-box { grid-template-columns: 1fr; row-gap: 1.3em; }
}