/* Media belongs to the work. Frames keep their proportions; controls sit outside.
   Layout inspiration: 21st.dev Interactive Bento Gallery and Hero Video Dialog.
   This is a native implementation, not an imported component or design system. */

:root {
  --surface-media: #101213;
  --surface-raised: #1b1e1f;
  --surface-control: #26292a;
  --text-secondary: #bcb9b2;
  --text-error: #ffb39b;
  --edge-media: rgb(240 232 216 / 16%);
  --edge-active: rgb(240 232 216 / 48%);
  --shade-media: rgb(8 9 10 / 88%);
  --shade-backdrop: rgb(8 9 10 / 94%);
  --radius-media: 8px;
  --radius-control: 6px;
  --ease-media: cubic-bezier(.16, 1, .3, 1);
  --z-collection-nav: 10;
}

html { scrollbar-gutter: stable; }
section[id], li[id], h3[id] { scroll-margin-top: 100px; }
button, a { touch-action: manipulation; }

/* Phosphor icons, vendored with their MIT license in assets/icons. */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
.icon-play { --icon: url("assets/icons/play-fill.svg"); }
.icon-expand { --icon: url("assets/icons/arrows-out-simple.svg"); }
.icon-prev { --icon: url("assets/icons/caret-left.svg"); }
.icon-next { --icon: url("assets/icons/caret-right.svg"); }
.icon-close { --icon: url("assets/icons/x.svg"); }
.icon-arrow { --icon: url("assets/icons/arrow-up-right.svg"); }

/* A picture is a route to its source, even when JavaScript is unavailable. */
.image-link {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: var(--radius-media);
  background: var(--surface-media);
  color: var(--ivory);
  text-decoration: none;
  outline-offset: 5px;
}
.image-link img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: contain;
  filter: none;
  transform: none;
}
.image-expand, .media-open {
  position: absolute;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--edge-active);
  border-radius: var(--radius-control);
  background: var(--shade-media);
  color: var(--ivory);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 240ms var(--ease-media);
}
.image-expand { right: 12px; bottom: 12px; }
.image-link:hover .image-expand, .image-link:focus-visible .image-expand {
  opacity: 1;
  transform: none;
}
.image-link:active { transform: scale(.995); }

/* Process chapters pair a finished film with the material that made it. */
.process-intro { padding-top: clamp(5rem, 9vw, 9rem); padding-bottom: 3rem; }
.process-track {
  position: sticky;
  top: 66px;
  z-index: var(--z-collection-nav);
  display: grid;
  grid-template-columns: repeat(5, auto 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: var(--page);
  margin-inline: auto;
  padding-block: 1.15rem;
  border-block: 1px solid var(--edge-media);
  background: var(--shade-backdrop);
  backdrop-filter: blur(16px);
  color: var(--text-secondary);
  font: 500 .75rem/1 var(--sans);
}
.process-track i { height: 1px; background: var(--edge-media); }
.process-sequence { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.process-scene {
  position: relative;
  display: grid;
  width: var(--page);
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "copy film" "media media";
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-inline: auto;
  padding-block: clamp(4rem, 7vw, 7rem);
}
.process-scene + .process-scene { border-top: 1px solid var(--edge-media); }
.process-copy { grid-area: copy; position: relative; min-width: 0; max-width: 580px; }
.process-copy h3 {
  margin: 0 0 1.3rem;
  color: var(--ivory);
  font: 700 clamp(3rem, 5vw, 5.2rem)/.96 var(--display);
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.process-copy > p { max-width: 38ch; margin: 0; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; }
.process-copy code { display: block; max-width: 40ch; margin-top: 1.5rem; color: var(--text-secondary); font: .72rem/1.7 ui-monospace, monospace; letter-spacing: .04em; }
.stage-film { grid-area: film; min-width: 0; margin: 0; }
.stage-film video, .take-strip video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--edge-media);
  border-radius: var(--radius-media);
  background: var(--obsidian);
}
.stage-film figcaption, .process-media figcaption, .board-sheet figcaption,
.filmora-project figcaption, .process-result-frame figcaption,
.process-reference-grid figcaption, .cast-bento figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .65rem;
  color: var(--text-secondary);
  font: 400 .78rem/1.5 var(--sans);
}
.stage-film figcaption b, .process-media figcaption b, .filmora-project figcaption b { flex: 0 0 auto; font-weight: 400; font-variant-numeric: tabular-nums; }
.process-media, .board-sheet, .process-result-frame, .filmora-project { min-width: 0; margin: 0; }
.process-media img, .board-sheet img, .process-result-frame img,
.filmora-project img, .process-reference-grid img { width: 100%; height: auto; object-fit: contain; }
.process-scene > .concept-scatter, .process-scene > .cast-bento { grid-area: media; }

/* These seven source frames are deliberately composed, not cropped to tiles. */
.concept-scatter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.8rem, 1.8vw, 1.6rem); align-items: end; }
.concept-scatter figure { margin: 0; min-width: 0; grid-column: span 2; }
.concept-scatter figure:first-child { grid-column: span 3; }
.concept-scatter figure:nth-child(3), .concept-scatter figure:nth-child(7) { grid-column: span 1; }
.concept-scatter figure:nth-child(6) { grid-column: span 1; }
.concept-scatter img { display: block; width: 100%; height: auto; object-fit: contain; }

.process-scene--research { grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); grid-template-areas: "copy film" "paper film"; gap: 2rem clamp(3rem, 7vw, 7rem); }
.process-scene--research .stage-film { align-self: center; }
.process-media--paper { grid-area: paper; width: min(100%, 390px); }
.process-media--paper figcaption { flex-direction: column; gap: .1rem; }
.process-scene--story { grid-template-areas: "copy copy" "film board"; }
.process-scene--story .board-sheet { grid-area: board; }
.process-scene--character { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.process-scene--direction { grid-template-areas: "copy copy" "film takes" "references references"; }
.process-scene--direction .process-copy { max-width: 900px; }
.process-scene--direction .process-copy code { max-width: none; margin-top: 0; }
.take-strip { grid-area: takes; min-width: 0; }
.take-strip ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.take-strip li { display: grid; gap: .5rem; min-width: 0; }
.take-strip li > span { color: var(--text-secondary); font-size: .75rem; }
.take-strip li.is-picked > span { color: var(--ivory); }
.take-strip li.is-picked video { border-color: var(--lava); }
.take-strip > p { margin: 1rem 0 0; color: var(--text-secondary); font-size: .8rem; }
.process-reference-grid { grid-area: references; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 2rem; }
.process-reference-grid figure { min-width: 0; margin: 0; }
.process-scene--finish { grid-template-areas: "copy copy" "film timeline" "media media"; }
.process-scene--finish .process-copy { max-width: none; }
.process-finish-media { grid-area: media; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.5rem; min-width: 0; }
.filmora-project { grid-area: timeline; }
.process-result-frame { grid-column: 1; grid-row: 1 / span 2; }
.process-cuts { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.process-cuts button { padding: 0; border: 0; background: transparent; color: var(--ivory); text-align: left; cursor: pointer; }
.process-cuts img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: var(--radius-media); }
.process-cuts span { display: block; padding-top: .65rem; font-size: .8rem; line-height: 1.5; }
.process-cuts span b { display: inline; margin-right: .5rem; color: var(--text-secondary); font-weight: 400; font-variant-numeric: tabular-nums; }
.process-cuts button:hover span, .process-cuts button:focus-visible span { text-decoration: underline; text-underline-offset: .2em; }
.process-cuts-note { grid-column: 2; margin: 0; color: var(--text-secondary); font-size: .8rem; }
.progression-steps .image-link img { object-fit: contain; filter: none; }

/* The library opens with films, not a full screen of channel statistics. */
.screening-room { padding-block: 4rem clamp(5rem, 8vw, 8rem); }
#screening { scroll-margin-top: 66px; }
.screening-room .section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  align-items: end;
  gap: 3rem;
  margin-bottom: 2rem;
}
.screening-room .section-intro h2 { max-width: 20ch; margin-bottom: 0; font-size: clamp(3.2rem, 5vw, 5rem); }
.screening-room .section-intro > p { max-width: 32ch; margin: 0; color: var(--text-secondary); }
.library-nav {
  position: sticky;
  top: 66px;
  z-index: var(--z-collection-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 3vw, 3rem);
  border-block: 1px solid var(--edge-media);
  background: var(--shade-backdrop);
  backdrop-filter: blur(16px);
}
.library-links { display: flex; gap: clamp(1.2rem, 3vw, 3rem); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.library-links::-webkit-scrollbar { display: none; }
.library-links a {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  font-size: .83rem;
  color: var(--text-secondary);
  transition: color 150ms ease;
}
.library-links a:hover, .library-links a:focus-visible { color: var(--ivory); }
.library-count { flex: 0 0 auto; color: var(--text-secondary); font-size: .75rem; font-variant-numeric: tabular-nums; }
.screening-program { max-width: 1400px; margin-inline: auto; padding-bottom: 0; }
.program-chapter + .program-chapter { margin-top: clamp(5rem, 9vw, 9rem); }
.program-heading { margin-bottom: 1.8rem; }
.js .program-heading.reveal { transform: none; }
.program-heading h3 {
  width: fit-content;
  max-width: 24ch;
  margin: 0 0 .65rem;
  font: 700 clamp(2.5rem, 4.2vw, 4.2rem)/1 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  scroll-margin-top: 152px;
}
.program-heading p {
  max-width: 65ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.6;
}
.program-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.5vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.program-item { min-width: 0; margin: 0; grid-column: span 6; }
.program-cue {
  --scrub-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: .9rem;
  min-width: 0;
  padding: 0;
  border-radius: var(--radius-media);
  color: var(--ivory);
  text-decoration: none;
  outline-offset: 7px;
}
.program-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  border-radius: var(--radius-media);
  background: var(--surface-media);
  outline: 1px solid var(--edge-media);
  outline-offset: -1px;
}
.program-thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 1;
  transform: none;
}
.program-cue:hover .program-thumb, .program-cue:focus-visible .program-thumb,
.program-cue[aria-current="true"] .program-thumb { outline-color: var(--edge-active); }
.program-cue:hover .program-thumb img,
.program-cue:focus-visible .program-thumb img { transform: none; opacity: 1; }
.program-meta { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.program-title { display: block; min-width: 0; }
.program-title strong {
  display: block;
  font-size: clamp(.95rem, 1.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  text-wrap: pretty;
}
.program-title small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem 1rem;
  margin-top: .45rem;
  color: var(--text-secondary);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}
.program-meta .views-badge, .program-meta .film-state {
  position: static;
  grid-column: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  letter-spacing: 0;
}
.film-open {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  color: var(--text-secondary);
  transition: transform 220ms var(--ease-media), color 150ms ease;
}
.program-cue:hover .film-open, .program-cue:focus-visible .film-open { color: var(--ivory); transform: translate(2px,-2px); }
.program-cue:active { transform: scale(.995); }
.media-open { right: 14px; bottom: 14px; }
.program-cue:hover .media-open, .program-cue:focus-visible .media-open { opacity: 1; transform: none; }
.program-cue.is-scrubbing .media-open { opacity: 0; }

/* Two feature films followed by their shorter companion cuts. */
.program-chapter--feature .program-item:nth-child(1) { grid-column: span 7; }
.program-chapter--feature .program-item:nth-child(2) { grid-column: span 5; align-self: end; }
.program-chapter--feature .program-item:nth-child(n+3) { grid-column: span 6; }

/* A campaign master and a compact rail of alternate edits. */
.program-chapter--automotive .program-list { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; }
.program-chapter--automotive .program-item { grid-column: 2; }
.program-chapter--automotive .program-item:first-child { grid-column: 1; grid-row: 1 / span 3; }
.program-chapter--automotive .program-item:not(:first-child) .program-cue {
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  grid-template-rows: auto;
  align-items: center;
}
.program-chapter--automotive .program-item:not(:first-child) .program-title strong { font-size: .95rem; }
.program-chapter--automotive .program-item:not(:first-child) .film-open { display: none; }
.program-chapter--automotive .program-item:not(:first-child) .program-title small { gap: .2rem; font-size: .7rem; }

/* Squares form a campaign triptych; the next row shares one natural frame height. */
.program-chapter--commerce .program-list { --media-gap: clamp(1.4rem, 2.5vw, 2.5rem); display: flex; flex-wrap: wrap; gap: var(--media-gap); align-items: start; }
.program-chapter--commerce .program-item { flex: var(--frame-ratio) 1 0; }
.program-chapter--commerce .program-item:nth-child(-n+3) { flex: 1 0 calc((100% - 2 * var(--media-gap)) / 3); }
.program-chapter--commerce .program-item:nth-child(n+4) .film-open { display: none; }

/* Justified rows keep visual order and keyboard order the same. */
.program-chapter--channel .program-list { --row-height: 224px; display: flex; flex-wrap: wrap; align-items: start; }
.program-chapter--channel .program-item { flex: var(--frame-ratio) 1 calc(var(--row-height) * var(--frame-ratio)); min-width: 125px; max-width: min(100%, calc(330px * var(--frame-ratio))); }
.program-chapter--channel .program-list::after { content: ""; flex: 999 1 0; }
.program-chapter--channel .program-title strong { font-size: .94rem; }
.program-chapter--channel .program-meta { gap: .4rem; }
.program-chapter--channel .film-open { width: 24px; flex-basis: 24px; }
.program-chapter--channel .program-cue[data-height="1920"] .film-open,
.program-chapter--channel .program-cue[data-height="1280"] .film-open { display: none; }
.screening-room .channel-stats { margin-top: 5rem; padding-top: 2rem; }
.channel-stats dt { font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; }

/* A seek preview is one decoded frame. It never becomes a playing video. */
.program-scrub { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.program-cue.is-scrubbing .program-scrub { opacity: 1; }
.program-cue.is-scrubbing .program-thumb img { opacity: 0; }
.program-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 2px;
  background: var(--lava);
  transform: scaleX(var(--scrub-progress));
  transform-origin: left;
  opacity: 0;
}
.program-cue.is-scrubbing .program-thumb::after { opacity: 1; }
.program-scrub-time { position: absolute; z-index: 2; bottom: 12px; left: 12px; min-width: 4.2em; padding: .25rem .5rem; border: 1px solid var(--edge-media); border-radius: 4px; background: var(--shade-media); color: var(--ivory); font: .7rem/1.3 ui-monospace, monospace; font-variant-numeric: tabular-nums; opacity: 0; }
.program-cue.is-scrubbing .program-scrub-time { opacity: 1; }

/* Still-image groups: one scrollable reference rail and a separate cast study. */
.reference-scene { width: var(--page); margin: 0 auto 3rem; list-style: none; }
.reference-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.reference-toolbar h3 { margin: 0 0 .3rem; font: 600 1.3rem/1.3 var(--sans); letter-spacing: -.02em; }
.reference-toolbar p { margin: 0; color: var(--text-secondary); font-size: .85rem; }
.rail-controls { display: none; gap: .5rem; }
.reference-scene[data-rail-ready="true"] .rail-controls { display: flex; }
.ref-wall { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 8px 0 20px; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--text-secondary) transparent; }
.ref-wall-track { position: relative; width: max-content; }
.rail-edge { position: absolute; top: 50%; width: 1px; height: 1px; pointer-events: none; }
[data-rail-edge="start"] { left: 0; }
[data-rail-edge="end"] { right: 0; }
.ref-wall-run { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ref-wall-run li { width: auto; height: clamp(190px, 19vw, 280px); flex: 0 0 auto; scroll-snap-align: start; }
.ref-wall-run .image-link { height: 100%; }
.ref-wall-run img { width: auto; max-width: none; height: 100%; object-fit: contain; }
.cast-bento { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.cast-bento figure { min-width: 0; margin: 0 0 1.5rem; break-inside: avoid; }
.cast-bento .cast-lead { position: sticky; top: 100px; margin: 0; }
.cast-grid { columns: 2; column-gap: 1.5rem; }
.cast-bento img, .cast-bento .cast-lead img, .cast-bento .cast-wide img { width: 100%; height: auto; object-fit: contain; filter: none; transform: none; }
.cast-bento figure:hover img { transform: none; filter: none; }
.cast-bento figcaption, .board-sheet figcaption { font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }

/* Native dialogs preserve the page beneath them and the source frame within. */
html.film-modal-open, html.film-modal-open body,
html.image-viewer-open, html.image-viewer-open body { overflow: hidden; }
.film-modal, .image-viewer {
  width: min(1180px, calc(100vw - 2.5rem));
  max-width: none;
  max-height: calc(100dvh - 2.5rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--edge-media);
  border-radius: 12px;
  background: var(--surface-media);
  color: var(--ivory);
  box-shadow: 0 32px 100px var(--shade-media);
}
.film-modal::backdrop, .image-viewer::backdrop { background: var(--shade-backdrop); backdrop-filter: blur(16px); }
.film-modal[open], .image-viewer[open] { animation: film-modal-in 280ms var(--ease-media) both; }
.film-modal-shell { padding: 0 clamp(1rem, 2vw, 2rem) 1rem; }
.film-modal-header, .image-viewer-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 64px; }
.film-modal-context { display: flex; align-items: center; gap: 1.5rem; min-width: 0; color: var(--text-secondary); font-size: .78rem; font-variant-numeric: tabular-nums; }
.film-modal-context > span:first-child { color: var(--ivory); }
.film-modal-screen {
  position: relative;
  display: grid;
  width: min(100%, calc((100dvh - 22rem) * var(--film-ratio, 1.777778)));
  min-height: 0;
  max-height: none;
  aspect-ratio: var(--film-aspect, auto);
  place-items: center;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--obsidian);
}
.film-modal-screen video { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; background: var(--obsidian); }
.film-modal-play { position: absolute; inset: 50% auto auto 50%; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 48px; padding: .8rem 1.2rem; transform: translate(-50%, -50%); border: 1px solid var(--edge-active); border-radius: var(--radius-control); background: var(--shade-media); color: var(--ivory); cursor: pointer; white-space: nowrap; }
.film-modal-play b { font: 600 .85rem/1 var(--sans); }
.film-modal-play:hover { background: var(--surface-control); }
.film-modal-play:active { transform: translate(-50%, -50%) scale(.98); }
.film-modal[data-has-started="true"] .film-modal-play { visibility: hidden; opacity: 0; pointer-events: none; }
.film-modal-status { display: flex; justify-content: space-between; gap: .7rem; padding-block: .7rem; color: var(--text-secondary); font-size: .68rem; font-variant-numeric: tabular-nums; }
.film-modal-status > span:last-child { text-align: right; }
.film-modal-status b { font-weight: 400; }
.film-modal-status > span:first-child::before { display: none; }
.film-modal[data-media-state="error"] [data-film-status] { color: var(--text-error); }
.film-modal-navigation { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; border-block: 1px solid var(--edge-media); }
.film-modal-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.5rem; padding-top: 1.3rem; }
.active-film-copy h3 { font: 500 clamp(1.25rem, 2vw, 1.8rem)/1.25 var(--sans); letter-spacing: -.035em; margin-bottom: .7rem; }
.film-index { color: var(--text-secondary); font-size: .7rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.active-film-copy > p:not(.film-index) { font-size: .85rem; line-height: 1.6; }
.active-film-copy > p:empty, .signal-list:empty { display: none; }
.signal-list { color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
.signal-list li::before { content: none; }
.film-modal-links { display: flex; flex-direction: column; align-items: end; gap: .8rem; }
.film-direct-link, .active-source-link { font-size: .8rem; color: var(--ivory); text-underline-offset: .25em; }
.film-modal-close, .film-modal-navigation button, .rail-controls button,
.image-viewer button, .image-viewer-controls a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem .8rem;
  border: 1px solid var(--edge-media);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ivory);
  font: 500 .78rem/1.25 var(--sans);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms var(--ease-media);
}
.film-modal button:hover:not(:disabled), .rail-controls button:hover:not(:disabled),
.image-viewer button:hover:not(:disabled), .image-viewer-controls a:hover { background: var(--surface-control); }
.film-modal-navigation button:active, .film-modal-close:active,
.rail-controls button:active, .image-viewer button:active { transform: scale(.97); }
.film-modal button:disabled, .rail-controls button:disabled, .image-viewer button:disabled { opacity: .38; cursor: default; }

.image-viewer { width: min(1400px, calc(100vw - 2.5rem)); }
.image-viewer-header, .image-viewer-footer { padding-inline: clamp(1rem, 2vw, 2rem); }
.image-viewer-header > div { display: flex; gap: 1.25rem; align-items: center; font-size: .8rem; }
[data-image-count] { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.image-viewer-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: min(70dvh, 900px); place-items: center; overflow: auto; background: var(--obsidian); overscroll-behavior: contain; }
.image-viewer-stage [data-image-content] { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; }
.image-viewer-stage [data-image-content][hidden] { display: none; }
.image-viewer.is-zoomed .image-viewer-stage { display: block; }
.image-viewer.is-zoomed [data-image-content] { width: auto; height: auto; max-width: none; max-height: none; }
.image-viewer-placeholder { position: absolute; inset: 12% 20%; border: 1px solid var(--edge-media); background: var(--surface-raised); border-radius: var(--radius-media); pointer-events: none; }
.image-viewer:not([data-image-state="loading"]) .image-viewer-placeholder { display: none; }
.image-viewer-footer { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1rem; }
.image-viewer-caption { min-width: 0; }
.image-viewer-caption h2 { max-width: 65ch; margin: 0; font: 500 .95rem/1.5 var(--sans); }
.image-viewer-caption h2:focus { outline: none; }
.image-viewer-caption p { margin: .2rem 0 0; color: var(--text-secondary); font-size: .74rem; }
.image-viewer[data-image-state="error"] [data-image-status] { color: var(--text-error); }
.image-viewer-controls { display: flex; flex: 0 0 auto; align-items: center; gap: .45rem; }

@media (min-width: 900px) {
  .film-modal[data-orientation="vertical"], .film-modal[data-orientation="square"] { width: min(1020px, calc(100vw - 3rem)); }
  .film-modal:is([data-orientation="vertical"], [data-orientation="square"]) .film-modal-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .66fr); gap: 0 2rem; }
  .film-modal:is([data-orientation="vertical"], [data-orientation="square"]) .film-modal-header { grid-column: 1 / -1; }
  .film-modal:is([data-orientation="vertical"], [data-orientation="square"]) .film-modal-screen { grid-column: 1; grid-row: 2; width: min(100%, calc((100dvh - 17rem) * var(--film-ratio))); }
  .film-modal:is([data-orientation="vertical"], [data-orientation="square"]) .film-modal-status { grid-column: 1; grid-row: 3; flex-direction: column; gap: .1rem; }
  .film-modal:is([data-orientation="vertical"], [data-orientation="square"]) .film-modal-status > span { text-align: left; }
  .film-modal:is([data-orientation="vertical"], [data-orientation="square"]) .film-modal-navigation { grid-column: 1 / -1; grid-row: 4; }
  .film-modal:is([data-orientation="vertical"], [data-orientation="square"]) .film-modal-meta { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; padding-top: 1rem; }
  .film-modal:is([data-orientation="vertical"], [data-orientation="square"]) .film-modal-links { align-items: start; margin-top: auto; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .program-chapter--channel .program-list { --row-height: 180px; }
  .program-chapter--channel .program-item { min-width: 100px; }
  .program-chapter--automotive .program-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .program-chapter--automotive .program-item { grid-column: auto; }
  .program-chapter--automotive .program-item:first-child { grid-column: 1 / -1; grid-row: auto; }
  .program-chapter--automotive .program-item:not(:first-child) .program-cue { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .site-header nav a[href="#screening"] { display: inline-flex; }
  .process-track { display: flex; justify-content: space-between; gap: .55rem; top: 62px; padding-block: 1rem; font-size: .65rem; }
  .process-track i { display: none; }
  .process-scene,
  .process-scene--research, .process-scene--story,
  .process-scene--character, .process-scene--direction, .process-scene--finish {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "film" "media";
    gap: 2rem;
    padding-block: 4rem;
  }
  .process-scene--research { grid-template-areas: "copy" "film" "paper"; }
  .process-scene--story { grid-template-areas: "copy" "film" "board"; }
  .process-scene--direction { grid-template-areas: "copy" "film" "takes" "references"; }
  .process-scene--finish { grid-template-areas: "copy" "film" "timeline" "media"; }
  .process-copy h3 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
  .process-media--paper { width: min(100%, 390px); }
  .concept-scatter { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .concept-scatter figure, .concept-scatter figure:first-child,
  .concept-scatter figure:nth-child(3), .concept-scatter figure:nth-child(6),
  .concept-scatter figure:nth-child(7) { grid-column: auto; }
  .concept-scatter figure:first-child, .concept-scatter figure:nth-child(5) { grid-column: 1 / -1; }
  .process-reference-grid, .process-finish-media { grid-template-columns: minmax(0, 1fr); }
  .process-result-frame, .process-cuts, .process-cuts-note { grid-column: auto; grid-row: auto; }
  .library-nav { top: 62px; width: 100%; padding-inline: 5vw; gap: 0; margin-bottom: 2rem; }
  .library-links { width: 100%; gap: 1.5rem; }
  .library-links a { min-height: 52px; font-size: .78rem; }
  .library-count { display: none; }
  .screening-program { width: 90vw; }
  .screening-room .section-intro { display: block; }
  .screening-room .section-intro h2 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .screening-room .section-intro > p { margin-top: 1rem; }
  .program-heading h3 { font-size: clamp(2.6rem, 11vw, 3.5rem); scroll-margin-top: 140px; }
  .program-list, .program-chapter--automotive .program-list,
  .program-chapter--commerce .program-list, .program-chapter--channel .program-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .program-chapter--channel .program-list::after { content: none; }
  .program-chapter--channel .program-item { max-width: none; }
  .program-list .program-item, .program-chapter--feature .program-item:nth-child(n),
  .program-chapter--automotive .program-item:nth-child(n),
  .program-chapter--commerce .program-item:nth-child(n) { grid-column: 1; grid-row: auto; align-self: auto; }
  .program-chapter--automotive .program-item:not(:first-child) .program-cue { grid-template-columns: minmax(0, 1fr); }
  .program-cue { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .program-title strong, .program-chapter--channel .program-title strong { font-size: 1rem; }
  .program-title small { font-size: .78rem; }
  .media-open, .image-expand { opacity: 1; transform: none; width: 36px; height: 36px; bottom: 10px; right: 10px; }
  .program-chapter + .program-chapter { margin-top: 4.5rem; }
  .screening-room .channel-stats { margin-top: 4rem; }
  .reference-toolbar { align-items: center; }
  .reference-toolbar h3 { font-size: 1.15rem; }
  .reference-toolbar p { max-width: 25ch; font-size: .78rem; }
  .ref-wall-run li { height: 230px; }
  .cast-bento { grid-template-columns: minmax(0, 1fr); }
  .cast-bento .cast-lead { position: static; }
  .cast-grid { columns: 1; }
  .film-modal, .film-modal[data-orientation="vertical"], .film-modal[data-orientation="square"], .image-viewer {
    width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0;
  }
  .film-modal-shell { min-height: 100dvh; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .film-modal-header { min-height: 68px; }
  .film-modal-context { gap: .8rem; font-size: .72rem; }
  .film-modal-context [data-active-duration] { display: none; }
  .film-modal-screen { width: min(100%, calc((100dvh - 17rem) * var(--film-ratio, 1.777778))); height: auto; max-height: none; aspect-ratio: var(--film-aspect, auto); }
  .film-modal-screen video { max-height: none; }
  .film-modal-status { flex-direction: column; gap: .15rem; padding-block: .65rem; font-size: .65rem; }
  .film-modal-status > span:last-child { text-align: left; }
  .film-modal-meta { grid-template-columns: 1fr; gap: .8rem; }
  .film-modal-links { flex-direction: row; flex-wrap: wrap; align-items: start; }
  .film-modal-meta h3 { font-size: 1.3rem; }
  .image-viewer-header { padding-inline: 1rem; }
  .image-viewer-stage { height: calc(100dvh - 15rem); min-height: 200px; }
  .image-viewer-footer { display: grid; gap: .85rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .image-viewer-caption h2 { font-size: .86rem; }
  .image-viewer-controls { flex-wrap: wrap; }
  .image-viewer-controls a { margin-left: auto; }
  .image-viewer-controls button, .image-viewer-controls a { font-size: .72rem; padding-inline: .55rem; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .preview-hint { display: none; }
  .program-scrub, .program-scrub-time, .program-thumb::after { display: none; }
  .program-cue.is-scrubbing .program-thumb img { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .film-modal[open], .image-viewer[open] { animation: none; }
  .image-expand, .media-open, .film-open, .program-scrub,
  .image-viewer button, .film-modal button { transition: none; }
  .program-cue:active, .image-link:active, .film-open { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .library-nav, .film-modal::backdrop, .image-viewer::backdrop { background: var(--obsidian); backdrop-filter: none; }
  .media-open, .image-expand, .program-scrub-time, .film-modal-play { background: var(--surface-media); }
}