/* Project view: the work in a plain box on black; the facts on a full-height band of the section's colour
   (Hayden, 2026-10-19: "Let's try it the critic's way"). --accent marks things drawn on the black. */
.tab-film   { --accent: var(--reese);            --band: var(--reese);              --band-ink: var(--ink); }
.tab-stills { --accent: var(--telescope-yellow); --band: var(--telescope-yellow);   --band-ink: var(--ink); }
.tab-ai     { --accent: var(--green-on-black);   --band: var(--organization-green); --band-ink: var(--white); }
/* The band is painted by the page background itself, so it sits under everything and blocks nothing.
   It starts where the facts column starts (less its inset) and runs to the right edge, top to bottom.
   The split repeats the grid's arithmetic: the facts column is max(320px, its 1fr share). */
.page-project { --inset: clamp(28px, 3vw, 48px); --gap: calc(var(--gutter) + var(--inset)); } /* the black gap before the band equals the page margin */
@media (min-width: 900px) {
  .page-project {
    --split: calc(100% - var(--gutter) - max(320px, (100% - 2 * var(--gutter) - var(--gap)) / 2.55) - var(--inset));
    background: linear-gradient(90deg, #000 var(--split), var(--band) var(--split));
  }
  .page-project .site-nav { color: var(--band-ink); }
  .page-project .site-nav :focus-visible { outline-color: var(--band-ink); }
}

/* Both templates share one grid: the same column edges, and the image and the title start on one line. */
.project {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start; align-content: center;
  gap: var(--gap);
  min-height: calc(100svh - 130px); position: relative;
  padding: clamp(24px, 4vh, 48px) var(--gutter) clamp(32px, 6vh, 64px);
}

/* Films: a 16:9 box. The still is the button; it lifts a touch under the pointer. */
.lightbox { position: relative; min-width: 0; }
.lightbox--film { aspect-ratio: 16 / 9; background: #000; }
.play { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.lightbox--film .lightbox-img { display: block; width: 100%; height: 100%; object-fit: contain; transition: filter .2s; }
.play:hover .lightbox-img { filter: brightness(1.08); }
.play:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.holding .lightbox-img { display: block; width: 100%; height: auto; }

.project-info { max-width: 640px; margin-left: calc(var(--inset) * -1); padding-left: var(--inset); color: var(--band-ink); }
.project-info :focus-visible { outline-color: var(--band-ink); }
.project-title { margin: 0 0 .42em; font: 700 clamp(48px, 5vw, 92px)/.9 var(--font-display); letter-spacing: .004em; text-transform: uppercase; color: var(--band-ink); text-wrap: balance; }
/* A long title is set smaller so it holds to four lines. */
.project-title--long { font-size: clamp(40px, 4.2vw, 76px); }  /* critic round 6: titles large enough to own the band */
.project-role { margin: 0 0 22px; font: 500 19px/1.35 var(--font-text); color: var(--band-ink); }
.project-credit { margin: 0 0 10px; max-width: 46ch; font: 400 16px/1.5 var(--font-text); color: var(--band-ink); }
/* Festival wins: the second display tier. */
.project-awards { margin: 26px 0 0; }
.award-title, .award-list { margin: 0; padding: 0; list-style: none; font: 600 clamp(22px, 1.95vw, 28px)/1.08 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.award-title { font-weight: 800; }

/* Playing is the big action: PLAY, or a project's trailers. The secondary link stays small. */
.project-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 36px; margin: 30px 0 0; }
.play-text { padding: 0; border: 0; background: none; cursor: pointer; color: var(--band-ink);
  font: 800 clamp(48px, 4.4vw, 64px)/.9 var(--font-display); text-transform: uppercase; letter-spacing: .005em;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; text-decoration-color: transparent; }
.play-text:hover, .play-text:focus-visible { text-decoration-color: currentColor; }
.watch, .screener {
  padding: 0 0 5px; border-bottom: 2px solid currentColor; text-decoration: none; color: var(--band-ink);
  font: 600 19px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase;
}
.watch:hover, .screener:hover { border-bottom-width: 4px; padding-bottom: 3px; }
/* Two trailers share a line; the screener request takes the line below, underlined only as far as its words. */
.project-links:has(.play-text + .play-text) { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; }
.project-links:has(.play-text + .play-text) .screener { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }

/* Previous and next, set on the footer's line at the foot of the band, and held there on screen however tall the page
   runs (Hayden, 2026-10-20: the AA page's Next fell below the fold on a laptop window). */
.project-nav { position: fixed; z-index: 3; bottom: 33px; left: calc(var(--split, 0px) + var(--inset)); display: flex; gap: 30px; align-items: baseline;
  font: 600 18px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--band-ink); }
.project-nav a { text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 3px; }
.project-nav a:hover { border-bottom-color: currentColor; }
.project-count { font-variant-numeric: tabular-nums; }

/* The player window: 16:9 at the largest size the screen allows, the page dimmed behind it. */
.player { width: min(92vw, calc((100svh - 120px) * 16 / 9)); max-width: none; max-height: none; padding: 0; border: 0; overflow: visible; background: #000; color: var(--white); }
.player::backdrop { background: rgba(0, 0, 0, .96); }
.player-frame { aspect-ratio: 16 / 9; }
.player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.player-close {
  position: absolute; right: 0; bottom: calc(100% + 12px); padding: 0 0 4px; border: 0; border-bottom: 2px solid var(--accent); background: none; cursor: pointer;
  font: 600 16px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--white);
}

/* A film with its own trailers: the trailers as two captioned frames under the image, the screener request
   centred beneath them, all in the black. */
.project-media { min-width: 0; }
.trailers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } /* two frames on the image's own edges (critic round 6) */
.trailer { display: block; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--white); }
.trailer img { display: block; width: 100%; aspect-ratio: 2.39 / 1; object-fit: cover; object-position: 50% 18%; transition: filter .2s; } /* scope frames on the image's edges, framed high so the subjects' heads stay in */
.trailer:hover img { filter: brightness(1.1); }
.trailer:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.trailer-label { display: block; margin-top: 10px; font: 600 16px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; }
.trailer:hover .trailer-label { color: var(--accent); }
.project-screener { margin: 26px 0 0; text-align: center; }
.project-screener .screener { color: var(--white); }

/* Stills: the photograph whole on the left; the facts and the contact print on the right. */
.project--stills { grid-template-rows: auto auto; row-gap: 28px; }
.project--stills .lightbox { grid-row: 1 / span 2; display: grid; place-items: start; }
.lightbox--still .lightbox-img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 230px); }
.project--stills .project-title { font-size: clamp(44px, 4.6vw, 80px); }

/* The contact print: strips of negative printed on paper, frame numbers along the rebate. */
.contact-sheet {
  --cols: 5;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); row-gap: 12px;
  max-height: calc(100svh - 430px); min-height: 220px; overflow-y: auto; margin: 0; padding: 14px; list-style: none;
  background: var(--mat); scrollbar-width: thin;
}
.contact-sheet li { min-width: 0; }
.sheet-frame { position: relative; display: block; width: 100%; padding: 13% 4% 17%; border: 0; background: var(--film-base); cursor: pointer; }
.sheet-frame img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sheet-frame-no { position: absolute; left: 6%; bottom: 2%; font: 600 10px/1 var(--font-display); letter-spacing: .2em; color: #B8B49E; }
.sheet-frame .loop { position: absolute; inset: -6% -10%; width: 120%; height: 112%; pointer-events: none; z-index: 1; }
.sheet-frame:focus-visible { outline: 3px solid var(--band-ink); outline-offset: 2px; z-index: 2; }

@media (max-width: 899px) {
  .project, .project--stills { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; gap: 32px; padding: 32px var(--gutter) 48px; }
  .project--stills .lightbox { grid-row: auto; min-height: 0; }
  .lightbox--still .lightbox-img { max-height: 70svh; }
  .contact-sheet { --cols: 4; max-height: none; }
  /* On a phone the band is the facts block alone, edge to edge. */
  .project-info { max-width: none; margin: 0 calc(var(--gutter) * -1); padding: 28px var(--gutter) 32px; background: var(--band); }
  /* On a phone, Previous / Next ride along the bottom of the screen as a bar in the section's colour. */
  .project-nav { left: 0; right: 0; bottom: 0; justify-content: space-between; gap: 12px; margin: 0;
    padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: var(--band); font-size: 16px; box-shadow: 0 -1px 0 rgba(0,0,0,.25); }
  .page-project { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}