:root {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #6b6b6b;
  --maxw: 1280px;
  --gap: 28px;

  /* Driven by the staging editor (studio.js). These are the desktop values;
     the clamp()s that use them keep small screens sane, so editing a token
     can't break mobile. */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --wordmark-size: 4.5rem;
  --wordmark-tracking: 0.04em;
  --caption-size: 1.05rem;
  --caption-tracking: 0.08em;
  --label-size: 1.1rem;
  --specs-size: 0.95rem;
  --nav-size: 1.15rem;
  --about-size: 1.75rem;
  --about-measure: 32rem;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site-header {
  text-align: center;
  padding: clamp(40px, 8vw, 88px) clamp(16px, 4vw, 48px) clamp(28px, 5vw, 56px);
}

/* Mirrors main > .gallery — same inset, same max-width — so the nav's right
   edge lands on the gallery's right edge.
   1fr auto 1fr keeps the wordmark centred on the page however many nav items
   are added; the nav grows leftward from the right edge without shifting it. */
.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}

.site-header h1 {
  grid-column: 2;
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, var(--wordmark-size));
  letter-spacing: var(--wordmark-tracking);
  line-height: 1;
}

/* Foot of the page. */
.site-footer {
  padding: 0 clamp(16px, 4vw, 48px) clamp(48px, 8vw, 96px);
}

/* Stacked and centred — new items append downward. */
.site-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

main {
  padding: 0 clamp(16px, 4vw, 48px) clamp(48px, 8vw, 96px);
}

.gallery {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--gap);
}

/* Stills run two-up rather than three. A 3:2 photograph at a third of the
   column is too small to read as a photograph. Declared before the media
   queries below so they still override it. */
.gallery--stills {
  grid-template-columns: repeat(2, 1fr);
}

/* Shoot heading — same vocabulary as a wall label: name, then what it's on. */
.shoot {
  max-width: var(--maxw);
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}

.shoot__name {
  margin: 0;
  font-size: var(--label-size);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

.shoot__medium {
  margin: 6px 0 0;
  font-size: var(--specs-size);
  color: var(--muted);
}

.tile {
  display: block;
  margin: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Gated content starts hidden, so production never paints an unreleased tile
   and then reflows when flags.js removes it. flags.js drops the data-flag
   attribute on anything it enables, which stops these rules matching and lets
   the element take its normal display. The :has rule hides the whole row so an
   empty one doesn't leave a grid gap behind. */
[data-flag] { display: none; }
.gallery__row:has(> [data-flag]) { display: none; }

/* Justified row — equal-width columns can't bottom-align films of different
   aspect ratios. Giving each tile a flex-grow equal to its aspect ratio makes
   width proportional to width/height, so every tile in the row resolves to the
   same height. Set --ar per tile (video width ÷ height). Nothing is cropped. */
.gallery__row {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
}

.gallery__row > .tile {
  flex: var(--ar) 1 0;
  min-width: 0;
}

/* Set by flags.js when gating leaves a row holding one tile. Without this the
   lone tile's flex-grow would stretch it across the full width. */
.gallery__row--single > .tile {
  flex-grow: 0;
  flex-basis: calc(50% - var(--gap) / 2);
}

.tile .frame video {
  transition: opacity 0.25s ease;
}

.tile:hover .frame video {
  opacity: 0.82;
}

.frame {
  width: 100%;
  background: #fff;
  overflow: hidden;
}

.frame video,
.frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
}

.caption {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: var(--caption-size);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

/* Sentence case, so the tracking stays low — 0.08em is spacing for caps and
   opens mixed case up too much. */
.site-nav a {
  font-size: var(--nav-size);
  letter-spacing: 0.03em;
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-header h1 a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
    --gap: 36px;
  }

  /* Single column — the justified row stacks. */
  .gallery__row { flex-direction: column; }

  .site-header__inner { grid-template-columns: 1fr; }
  .site-header h1 { grid-column: 1; }
}

/* ---- About page ---- */
/* Reuses .watch / .stage for the centred single-screen layout. */
/* Top left, not centred. Shares the back link's inset so the page has one left
   edge, and its top matches .site-header's padding-top, so the text sits where
   the wordmark sits on the index. The 64px floor keeps it clear of the back
   link on narrow screens. Specificity beats .stage's centring without relying
   on rule order. */
.stage.stage--left {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: clamp(64px, 8vw, 88px);
  padding-inline: clamp(16px, 4vw, 36px);
}

/* Text left, picture in the space to its right. Both tops align. */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 32rem) minmax(0, 26rem);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  width: 100%;
}

.about-figure {
  margin: 0;
}

.about-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  /* Picture drops under the text rather than squeezing beside it. */
  .about-layout {
    grid-template-columns: minmax(0, 32rem);
    gap: clamp(28px, 5vw, 40px);
  }
}

/* Measure in rem, not ch, so it doesn't shift with the font size. ~32rem holds
   a comfortable line at the display size below. */
.about {
  max-width: var(--about-measure);
  text-align: left;
  font-size: clamp(1.3rem, 2.5vw, var(--about-size));
  line-height: 1.35;
}

.about p {
  margin: 0;
  /* Keeps the last line off a single orphaned word. Ignored where unsupported,
     which only costs the orphan back. */
  text-wrap: pretty;
}

.about p + p {
  margin-top: 1.1em;
}

/* Set like the back link — lowercase, in ink, no tracking for caps — so the
   address reads as the one thing on the page you act on. */
.about-email {
  display: inline-block;
  margin-top: 20px;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
}

.about-email:hover {
  color: var(--muted);
}

/* ---- Watch (single-film) page ---- */
.watch { min-height: 100vh; }

.back {
  position: fixed;
  top: clamp(16px, 3vw, 28px);
  left: clamp(16px, 4vw, 36px);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  z-index: 10;
}

.back:hover { color: var(--muted); }

.stage {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(64px, 10vw, 104px) clamp(16px, 4vw, 48px) clamp(32px, 6vw, 56px);
}

.stage video {
  max-width: min(100%, 1100px);
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  background: #000;
}

.watch-title {
  margin: 0;
  text-align: center;
  font-size: var(--label-size);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

/* Wall label. Deliberately quieter than the title and set in mixed case — the
   uppercase treatment above is the work's name, this is the catalogue entry
   under it. One fact per line, the way a gallery prints it. */
.specs {
  margin: -6px 0 0;
  text-align: center;
  font-size: var(--specs-size);
  line-height: 1.55;
  color: var(--muted);
}

.specs span { display: block; }

/* The measured line — format and running time — sits slightly apart, as the
   last line of a label does. */
.specs span:last-child {
  margin-top: 6px;
}