/* ==========================================================================
   THE REPLICA — site.css
   Reference frame: 1728px (MacBook Pro 16"), per Figma.
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   NOTE: bump the ?v= query on these URLs whenever a font file is replaced —
   assets are cached for a year, and this stylesheet is the only reference. */

@font-face {
  font-family: "Offset TM";
  src: url("../assets/fonts/offset-tm.woff2?v=2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bradford Mono";
  src: url("../assets/fonts/bradford-mono.woff2?v=2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* NOTE: AutoscapeLLVarTrial is a TRIAL file. Only A–Z, a–z, 0–9, space, comma,
   period, hyphen, slash and the accented Latin set are real outlines — every
   other codepoint (& : × © – — ! ? ' ") maps to a placeholder dot. Copy set in
   --font-micro therefore avoids those characters. Once the retail Autoscape
   licence is in place, drop in the real woff2 and the restriction disappears. */
@font-face {
  font-family: "Autoscape";
  src: url("../assets/fonts/autoscape.woff2?v=2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --bg: #1a1a1a;
  --bg-lift: #202020;
  --ink: #ffffff;
  --ink-2: #d2d2d2;
  --grey: #767676; /* body/value grey — clearly below the white labels */
  --edge: 60px; /* shared inset for hamburger, close, and footer meta */
  --ink-3: rgba(255, 255, 255, 0.42);
  --red: #ff0026;
  --rule: rgba(255, 255, 255, 0.18);
  --rule-soft: rgba(255, 255, 255, 0.09);
  --scrim: rgba(71, 71, 71, 0.2);

  --font-label: "Offset TM", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Bradford Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-micro: "Autoscape", "Offset TM", Arial, sans-serif;

  /* Fluid scale anchored to the 1728px Figma frame. */
  --t-label: clamp(11px, 1.1vw, 19px);
  --t-label-lg: clamp(12px, 1.35vw, 21px);
  --t-name: clamp(21px, 2.03vw, 35px);
  --t-body: clamp(15px, 1.16vw, 20px);
  --t-body-lg: clamp(16px, 1.39vw, 24px);
  --t-micro: clamp(10px, 0.81vw, 14px);
  --t-alabel: clamp(11px, 0.93vw, 16px); /* Autoscape labels, per rev-2 comp */

  --track-label: 0.15em;
  --track-micro: 0.1em;

  --gutter: clamp(20px, 7.64vw, 132px);
  --gutter-tight: clamp(20px, 3.65vw, 63px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --header-h: clamp(56px, 6.2vw, 108px);
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 2.1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: 3px;
}

::selection {
  background: var(--red);
  color: #fff;
}

/* --- Type utilities ------------------------------------------------------- */

.label {
  font-family: var(--font-label);
  font-size: var(--t-label-lg);
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

.label--sm {
  font-size: var(--t-label);
}

.micro {
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Autoscape label — the rev-2 comp moved most sub-hero labels to this.
   Trial-font caveat applies: letters, digits, space, comma, period only. */
.alabel {
  font-family: var(--font-micro);
  font-size: var(--t-alabel);
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
}

.body {
  font-family: var(--font-body);
  color: var(--ink-2);
  line-height: 2.12;
}

.wordmark {
  color: var(--red);
  width: 100%;
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Link affordances ----------------------------------------------------- */

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: 0.2em;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.inline-link {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.35s var(--ease-soft);
}

.inline-link:hover {
  color: var(--red);
}

/* --- Page shell ----------------------------------------------------------- */

/* Short pages (Cast, Contact) still pin the footer to the bottom of the screen. */
body > main {
  flex: 1 0 auto;
}

.page__body {
  flex: 1 0 auto;
}

.footer {
  flex: none;
}

.shell {
  max-width: 1728px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}

/* --- Masthead (inner pages) ----------------------------------------------- */

/* Interior masthead: identical on every inner page — wordmark at 42vw,
   top-cropped by 28% (726w at y −113 in the comps). The crop lives on an
   overflow-hidden wrapper so the link's hit area matches the visible mark. */
.masthead {
  position: relative;
  padding-bottom: clamp(24px, 3.4vw, 60px);
}

.masthead__mark {
  display: block;
  width: clamp(160px, 20vw, 346px);
  margin-inline: auto;
  overflow: hidden;
}

.masthead__mark .wordmark {
  width: 100%;
  height: auto;
  /* Crop ~10% of the mark's height — ascenders clip, everything else reads. */
  margin-top: calc(clamp(160px, 20vw, 346px) * -0.05);
}

/* Wordmark hover: a quiet double — a soft white echo eases out from behind
   the mark as it drifts a hair left. No stutter, no dimming. */
.masthead__mark .wordmark,
.menu__mark .wordmark {
  transition: filter 0.6s var(--ease), transform 0.6s var(--ease);
}

.masthead__mark:hover .wordmark,
.menu__mark:hover .wordmark,
.masthead__mark:focus-visible .wordmark,
.menu__mark:focus-visible .wordmark {
  transform: translateX(-3px);
  filter: drop-shadow(6px 0 0 #000);
}

@media (prefers-reduced-motion: reduce) {
  .masthead__mark:hover .wordmark,
  .menu__mark:hover .wordmark {
    transform: none;
  }
}

/* --- Menu button ---------------------------------------------------------- */

/* Same coordinates as .menu__close, so the hamburger and the X never jump
   when the overlay opens. Keep the two rules in lockstep. */
.menu-btn {
  position: absolute;
  top: clamp(20px, 3.1vw, 54px);
  right: var(--edge);
  z-index: 50; /* below the menu overlay — the menu carries its own close */
  width: 33px;
  height: 19px;
  display: grid;
  align-content: space-between;
  padding: 0;
}

.menu-btn__bar {
  display: block;
  width: 33px;
  height: 3px;
  background: var(--ink);
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease-soft);
}

.menu-btn[aria-expanded="true"] .menu-btn__bar:first-child {
  transform: translateY(8px) rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-btn__bar:last-child {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Overlay menu ----------------------------------------------------------
   Full-screen takeover. Nearly black at rest; hovering an item fades in that
   item's full-screen still. Hover and the current page get a hand-drawn
   scratch through the label. */

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #0d0d0d;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-soft), visibility 0.5s;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
}

/* Per-item full-screen stills, crossfaded via .is-active from JS. */
.menu__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.menu__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.7s var(--ease-soft), transform 1.4s var(--ease);
}

.menu__bg img.is-active {
  opacity: 0.45;
  transform: none;
}

/* Close affordance inside the panel, mirroring the hamburger's position. */
.menu__close {
  position: absolute;
  top: clamp(20px, 3.1vw, 54px);
  right: var(--edge);
  width: 33px;
  height: 19px;
  display: grid;
  align-content: space-between;
  z-index: 3;
}

.menu__close .menu-btn__bar:first-child {
  transform: translateY(8px) rotate(45deg);
}

.menu__close .menu-btn__bar:last-child {
  transform: translateY(-8px) rotate(-45deg);
}

/* Left column: mark, TJC, credits. */
.menu__left {
  position: absolute;
  left: clamp(24px, 7vw, 122px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(170px, 16vw, 278px);
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.7s var(--ease-soft) 0.15s;
}

.menu.is-open .menu__left {
  opacity: 1;
}

.menu__mark {
  display: block;
  margin-bottom: clamp(16px, 2.6svh, 30px);
}

.menu__mark .wordmark {
  width: 100%;
  height: auto;
}

.menu__tjc {
  width: clamp(28px, 2.4vw, 42px);
  height: auto;
  margin: 0 auto clamp(14px, 2.4svh, 28px);
}

.menu__credit {
  margin: 0 0 0.9em;
  font-family: var(--font-micro);
  font-size: 10px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}

/* Items */
.menu__list {
  list-style: none;
  margin: 0 0 0 clamp(80px, 30vw, 520px);
  padding: 0;
  display: grid;
  gap: clamp(22px, 5.8svh, 58px);
  position: relative;
  z-index: 2;
}

.menu__list a {
  display: inline-flex;
  align-items: center; /* optical center with the label, not baseline */
  gap: clamp(16px, 2.2vw, 38px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.menu.is-open .menu__list a {
  opacity: 1;
  transform: none;
}

.menu__num {
  font-family: var(--font-body); /* Bradford: real brackets, unlike the trial Autoscape */
  font-size: clamp(11px, 0.93vw, 16px);
  letter-spacing: 0.12em;
  color: var(--ink);
  flex: none;
}

.menu__label {
  position: relative;
  display: inline-block;
  font-family: var(--font-label);
  font-size: clamp(19px, 1.62vw, 28px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
}

/* --- Scratch stroke (shared with the hero nav) ----------------------------- */

.scratch {
  position: absolute;
  left: -5%;
  top: 50%;
  width: 110%;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  clip-path: inset(-30% 100% -30% 0);
  transition: clip-path 0.45s var(--ease);
}

.menu__list a:hover .scratch,
.menu__list a:focus-visible .scratch,
.menu__list a[aria-current="page"] .scratch,
.hero__nav .nav-link:hover .scratch,
.hero__nav .nav-link:focus-visible .scratch,
.hero__nav .nav-link[aria-current="page"] .scratch {
  clip-path: inset(-30% -3% -30% 0);
}

.nav-link__text {
  position: relative;
  display: inline-block;
}

/* Hero nav uses the scratch, not the underline. */
.hero__nav .nav-link::after {
  display: none;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  position: relative;
  padding-top: clamp(60px, 9vw, 150px);
  padding-bottom: clamp(22px, 2.2vw, 38px);
  overflow: hidden;
}

/* One footer mark size everywhere: 12.3vw, genuinely bleeding off the bottom
   edge of the page — roughly the lower 40% of the mark is cut, per comp. The
   extra fixed term pushes it past the meta row and the footer's own padding. */
/* Cut just below the p's stem — bleed, but keep the descenders readable. */
.footer__mark {
  width: clamp(110px, 12.3vw, 213px);
  margin-inline: auto;
  margin-bottom: calc(clamp(110px, 12.3vw, 213px) * -0.09 - 48px);
  pointer-events: none;
}

.footer--home {
  padding-top: clamp(14px, 2svh, 36px);
  padding-bottom: clamp(14px, 2svh, 30px);
}

/* The meta row used to occupy 24px below the mark; with it hidden, the mark
   hung 24px deeper off the page edge on the 100svh home panel. Compensate. */
.footer--home .footer__mark {
  margin-bottom: calc(clamp(110px, 12.3vw, 213px) * -0.09 - 24px);
}

/* Hidden everywhere for now (Zach, July 31 — may come back). The markup
   still renders; flip this one rule to restore it. */
.footer__meta {
  display: none;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  position: relative;
  z-index: 2;
}

/* Autoscape, and no © — the trial font has no real glyph for it.
   Fixed 12px and inset to --edge so it registers with the menu button. */
.footer__meta {
  padding-inline: var(--edge);
}

.footer__meta span {
  font-family: var(--font-micro);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ==========================================================================
   HOME
   ========================================================================== */

.hero {
  position: relative;
  height: 100svh;
  min-height: 460px;
  overflow: hidden;
  background: #000;
}

.hero__media,
.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The poster fades up on a pure-CSS animation so the hero is never black, even
   if JavaScript never arrives. The video then crossfades over it once it can
   actually play — that part needs JS, and degrades to "poster only". */
.hero__poster {
  z-index: 1;
  opacity: 0;
  animation: hero-in 1.6s var(--ease-soft) 60ms forwards;
}

.hero__video {
  z-index: 2;
  opacity: 0;
  transition: opacity 1.6s var(--ease-soft);
}

@keyframes hero-in {
  to {
    opacity: 0.9;
  }
}

.hero.video-ready .hero__video {
  opacity: 0.9;
}

/* Once the video is up, the poster must go fully away — at 0.9 video opacity a
   0.9-opacity poster bleeds through as a ghost of the first frame. */
.hero.video-ready .hero__poster {
  animation: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease-soft);
}

/* Weight the bottom so nav stays legible over any frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0) 26%
    ),
    linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 34%);
}

/* Per rev-2 comp: the wordmark is smaller (740/1728 frame) and bleeds off the
   top of the viewport — 29% of its height is cropped above the fold. The crop
   is a negative margin inside an overflow-hidden hero, so the load animation
   still owns `transform` on .hero__mark. */
.hero__mark {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.hero__mark .wordmark {
  width: clamp(220px, 32.8vw, 567px);
  height: auto;
  /* Crop ~13% of the mark's height: ascenders bleed off, the T's crossbar stays. */
  margin-top: calc(clamp(220px, 32.8vw, 567px) * -0.066);
}

.hero__bar {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: clamp(16px, 1.8vw, 31px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-inline: var(--gutter-tight);
}

/* Blur box, no tint shift on hover — per Zach's note the red hover is gone;
   intent reads through a slightly brighter frost instead. */
.play-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 22px);
  padding: clamp(10px, 0.9vw, 15px) clamp(14px, 1.5vw, 26px);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  flex: none;
  font-family: var(--font-micro);
  font-size: calc(var(--t-alabel) * 0.85); /* hero-only: 15% under the token */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background 0.45s var(--ease-soft);
}

.play-btn:hover {
  background: rgba(255, 255, 255, 0.13);
}

.play-btn__tri {
  width: clamp(11px, 1.04vw, 18px);
  height: auto;
  flex: none;
  fill: currentColor;
  transition: transform 0.5s var(--ease);
}

.play-btn:hover .play-btn__tri {
  transform: translateX(3px);
}

/* Nav is dead-centered in the viewport regardless of what flanks it.
   Hero-only type sizes: both faces run 15% under their global tokens
   (--t-label and --t-alabel, set in :root at the top of this file). */
.hero__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(14px, 2.4vw, 42px);
  white-space: nowrap;
}

.hero__nav .nav-link {
  font-size: var(--t-label);
}

/* --- TJC corner module ---------------------------------------------------- */

.tjc {
  position: relative;
  flex: none;
  display: block;
}

.tjc__icon {
  display: block;
  width: clamp(44px, 4.34vw, 75px);
  height: auto;
  opacity: 0.92;
  transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--ease);
}

.tjc:hover .tjc__icon,
.tjc:focus-visible .tjc__icon {
  opacity: 1;
  transform: scale(1.04);
}

/* The picture-in-picture blur box that rises above the icon on hover. */
.tjc__peek {
  position: absolute;
  right: 0;
  bottom: calc(100% + clamp(10px, 1vw, 18px));
  width: clamp(180px, 13.3vw, 230px);
  padding: clamp(5px, 0.4vw, 8px);
  background: rgba(105, 105, 105, 0.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-soft), transform 0.55s var(--ease),
    visibility 0.45s;
  pointer-events: none;
}

.tjc:hover .tjc__peek,
.tjc:focus-visible .tjc__peek {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.tjc__peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0.25em 0.2em 0.55em;
  color: #fff;
  font-family: var(--font-micro);
  font-size: clamp(9px, 0.7vw, 12px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tjc__peek-head svg {
  width: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  flex: none;
}

.tjc__peek video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

/* Nav is inline in the hero on desktop; the hamburger takes over on small screens. */
.hero .menu-btn {
  top: auto;
  bottom: clamp(22px, 2.6vw, 44px);
  right: var(--gutter-tight);
  display: none;
}

/* --- Home: the fold below ------------------------------------------------- */

/* Everything below the hero — premise, facts, footer — is exactly one
   viewport tall, per the rev-2 comp. */
.below {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.below .menu-btn {
  position: absolute;
  top: clamp(20px, 3.1vw, 54px);
  right: var(--edge);
  display: grid;
}

/* Auto margins center the content block exactly between panel top and footer,
   so the air above and below it is always equal. */
.premise {
  margin-block: auto;
  padding-block: clamp(16px, 3svh, 40px);
  text-align: center;
}

/* Same interval as label→value in the facts row below. */
.premise__eyebrow {
  margin-bottom: clamp(3px, 0.45vw, 8px);
}

.premise__text {
  max-width: 704px;
  margin-inline: auto;
  margin-block: 0;
  font-size: var(--t-body-lg);
  line-height: 2.12;
  color: var(--grey);
  text-wrap: balance;
}

/* Short screens: trade line air for fit before anything overflows. */
@media (max-height: 760px) {
  .premise__text {
    line-height: 1.9;
  }
}

/* Row gap matches .facts' own top margin, so premise→facts and
   facts→"written and directed by" read as the same interval. */
.facts {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 6.5svh, 74px) clamp(30px, 7.3vw, 126px);
  margin-top: clamp(40px, 6.3vw, 108px);
  flex-wrap: wrap;
}

.fact {
  text-align: center;
}

.fact__k {
  margin-bottom: clamp(3px, 0.45vw, 8px);
  color: var(--ink);
}

/* Values moved from Bradford to Autoscape caps in the rev-2 comp. */
.fact__v {
  font-family: var(--font-micro);
  font-size: var(--t-alabel);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
  line-height: 1.6;
}

.facts {
  margin-top: clamp(20px, 6.5svh, 74px);
}

.fact--wide {
  margin-top: 0; /* spacing comes from the grid's row gap */
  flex-basis: 100%;
}

/* ==========================================================================
   PEOPLE GRID  (Cast / Team)
   ========================================================================== */

.section-intro {
  font-size: var(--t-body-lg);
  color: var(--ink-2);
  margin: 0 0 clamp(22px, 2.6vw, 45px);
}

.people {
  --pg: clamp(20px, 2.25vw, 39px); /* column gap, shared with the rules below */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--pg);
  row-gap: clamp(34px, 4.6vw, 80px);
  margin-bottom: clamp(40px, 7vw, 120px);
  position: relative;
}

/* Vertical hairlines, dead-center in each gutter, spanning the full grid.
   For 3 equal columns with gap g: line 1 sits at 33.333% − g/6,
   line 2 at 66.667% + g/6. (Previous build eyeballed this and drifted.) */
.people::before,
.people::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-soft);
  pointer-events: none;
}

.people::before {
  left: calc(33.333% - var(--pg) / 6);
}

.people::after {
  left: calc(66.667% + var(--pg) / 6);
}

.person {
  display: block;
  position: relative;
}

.person__frame {
  display: block; /* span by default — inline boxes ignore aspect-ratio */
  position: relative;
  aspect-ratio: 423 / 353;
  overflow: hidden;
  background: var(--bg-lift);
}

.person__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1.001);
  transition: transform 1.1s var(--ease), filter 0.7s var(--ease-soft),
    opacity 0.7s var(--ease-soft);
  opacity: 0.9;
}

.person:hover .person__img {
  transform: scale(1.035);
  opacity: 1;
}

/* Placeholder portrait — replace with real headshots. */
.person__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.014) 0 2px,
      transparent 2px 4px
    ),
    var(--bg-lift);
  border: 1px solid var(--rule-soft);
}

.person__initials {
  font-family: var(--font-label);
  font-size: clamp(22px, 2.4vw, 42px);
  letter-spacing: var(--track-label);
  color: rgba(255, 255, 255, 0.13);
  transition: color 0.7s var(--ease-soft);
}

.person:hover .person__initials {
  color: rgba(255, 0, 38, 0.4);
}

.person__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(10px, 1.15vw, 20px);
}

.person__name {
  display: block;
  margin: 0 0 2px;
  font-family: var(--font-label);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.3;
}

.person__role {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  color: var(--ink-2);
  line-height: 1.5;
}

.person__bio-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.32em 0.85em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.4s var(--ease-soft),
    background 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
}

.person:hover .person__bio-tag {
  border-color: var(--red);
  color: var(--red);
}

.person__bio-tag svg {
  width: 0.75em;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* ==========================================================================
   CAST GRID — 2×2, portrait frames, character-first. Deliberately not the
   team page: no column rules, no BIO pill, taller images, the role leads.
   ========================================================================== */

.castgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 70px) clamp(20px, 2.6vw, 45px);
  padding-bottom: clamp(40px, 7vw, 120px);
}

.castcard {
  display: block;
  position: relative;
}

.castcard__frame {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-lift);
}

.castcard__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 2;
  transition: border-color 0.35s var(--ease-soft);
}

.castcard:hover .castcard__frame::after,
.castcard:focus-visible .castcard__frame::after {
  border-color: var(--red);
}

.castcard__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  opacity: 0.92;
  transform: scale(1.001);
  transition: transform 1.1s var(--ease), opacity 0.7s var(--ease-soft);
}

.castcard:hover .castcard__frame img {
  transform: scale(1.03);
  opacity: 1;
}

.castcard__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(14px, 1.5vw, 26px);
}

/* The character leads — large Offset caps. */
.castcard__role {
  font-family: var(--font-label);
  font-size: clamp(17px, 1.62vw, 28px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
}

.castcard__actor {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.3vw, 22px);
  color: var(--ink);
  white-space: nowrap;
}

/* ==========================================================================
   BIO DETAIL
   ========================================================================== */

.bio {
  display: grid;
  grid-template-columns: 569fr 149fr 734fr;
  padding-bottom: clamp(50px, 9vw, 155px);
}

.bio__aside {
  grid-column: 1;
}

.bio__main {
  grid-column: 3;
}

.bio__head {
  margin-bottom: clamp(20px, 2.4vw, 42px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bio__name {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--t-name);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.15;
}

/* Role and location sit in the grey, clearly below the white name. */
.bio__role {
  font-family: var(--font-body);
  font-size: var(--t-label);
  color: var(--grey);
  margin-top: 0.35em;
  line-height: 1.5;
}

.bio__place {
  flex: none;
  margin-top: 0.5em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--grey);
  color: var(--grey);
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  line-height: 1;
}

/* Portrait: top-aligned with the name block, full grid brightness, and
   clickable — opens the full-screen viewer with a download. */
.bio__portrait {
  position: relative;
  display: block;
  aspect-ratio: 569 / 475;
  overflow: hidden;
  background: var(--bg-lift);
  margin-bottom: clamp(20px, 2.5vw, 42px);
  cursor: zoom-in;
}

.bio__portrait--tall {
  aspect-ratio: 4 / 5;
}

.bio__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  filter: grayscale(1);
  transition: opacity 0.5s var(--ease-soft);
}

.bio__portrait:hover img {
  opacity: 1;
}

.bio__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bio__links li {
  border-bottom: 1px solid var(--rule-soft);
}

.bio__links a {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.62em 0;
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  transition: color 0.4s var(--ease-soft), padding-left 0.5s var(--ease);
}

.bio__links a:hover {
  color: var(--red);
  padding-left: 0.5em;
}

.bio__links svg {
  width: 0.95em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.bio__text p {
  font-size: var(--t-body);
  line-height: 2.1;
  color: var(--ink);
  margin: 0 0 2.1em;
  max-width: 66ch;
}

.back-link {
  position: absolute;
  top: clamp(20px, 3.1vw, 54px);
  left: var(--gutter);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  transition: color 0.4s var(--ease-soft);
}

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

.back-link svg {
  width: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  transition: transform 0.5s var(--ease);
}

.back-link:hover svg {
  transform: translateX(-3px);
}

/* ==========================================================================
   STILLS
   ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: clamp(22px, 2.6vw, 45px);
  flex-wrap: wrap;
}

.page-head__title {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--t-name);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.15;
}

.page-head__note {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  color: var(--ink-2);
  max-width: 46ch;
  line-height: 1.9;
}

.stills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 28px);
  padding-bottom: clamp(40px, 7vw, 120px);
}

/* Media Kit / Team: heading sits 30px above the content, no intro copy. */
.page-head--tight {
  padding-bottom: 30px;
}

.section-intro {
  margin-bottom: 30px;
}

/* 1.775:1 — the stills' native ratio, so nothing is cropped in the grid. */
.still {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-lift);
  aspect-ratio: 444 / 250;
  cursor: zoom-in;
}

/* The red frame Zach liked — on intent only. Drawn on an overlay so the
   zooming image underneath can never paint over it. */
.still::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 3;
  transition: border-color 0.35s var(--ease-soft);
}

.still:hover::after,
.still:focus-visible::after {
  border-color: var(--red);
}

/* The ::after frame IS the focus indicator here — the global focus outline on
   top of it reads as a double stroke (visible after closing the lightbox). */
.still:focus-visible {
  outline: none;
}

.still--wide {
  grid-column: span 2;
}

.still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity 0.6s var(--ease-soft);
  opacity: 0.92;
}

.still:hover img {
  transform: scale(1.028);
  opacity: 1;
}

.still__no {
  position: absolute;
  left: clamp(10px, 1vw, 18px);
  bottom: clamp(8px, 0.8vw, 14px);
  z-index: 2;
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 10, 10, 0.97);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-soft), visibility 0.45s;
  padding: clamp(16px, 4vw, 64px);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  transform: scale(0.985);
  transition: transform 0.6s var(--ease);
}

.lightbox.is-open img {
  transform: none;
}

/* Three balanced columns: count left, arrows dead-center, download right. */
.lightbox__bar {
  position: absolute;
  left: clamp(16px, 4vw, 64px);
  right: clamp(16px, 4vw, 64px);
  bottom: clamp(16px, 2.4vw, 40px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.lightbox__dl {
  justify-self: end;
}

/* Single-image viewer (poster): just "Download ↓", centered. */
.lightbox--single .lightbox__bar {
  grid-template-columns: 1fr;
}

.lightbox--single .lightbox__dl {
  justify-self: center;
}

.lightbox--single .lightbox__dl-ext {
  display: none;
}

.lightbox__nav {
  display: flex;
  gap: clamp(18px, 2vw, 34px);
}

.lightbox__nav button {
  width: clamp(22px, 1.8vw, 30px);
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.35s var(--ease-soft), transform 0.4s var(--ease);
}

.lightbox__nav svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.lightbox__nav button:hover {
  color: var(--red);
}

.lightbox__nav [data-lb="prev"]:hover {
  transform: translateX(-3px);
}

.lightbox__nav [data-lb="next"]:hover {
  transform: translateX(3px);
}

.lightbox__close {
  position: absolute;
  top: clamp(16px, 2vw, 34px);
  right: clamp(16px, 2.6vw, 44px);
  width: clamp(20px, 1.6vw, 26px);
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.35s var(--ease-soft), transform 0.4s var(--ease);
  z-index: 2;
}

.lightbox__close svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.lightbox__close:hover {
  color: var(--red);
  transform: scale(1.08);
}

.lightbox__dl {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-micro);
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  transition: color 0.35s var(--ease-soft);
}

.lightbox__dl svg {
  width: 0.85em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 0.5s var(--ease);
}

.lightbox__dl:hover {
  color: var(--red);
}

.lightbox__dl:hover svg {
  transform: translateY(2px);
}

/* ==========================================================================
   MEDIA KIT — preview-forward cards
   ========================================================================== */

/* Row 1: poster + trailer, column widths solved so both cards land at exactly
   the same height (poster ratio 0.665, trailer 16:9 → poster gets ~27%).
   Row 2: three uniform 4:3 preview cards. Row 3: the full-kit band. */
.kit {
  display: grid;
  grid-template-columns: 27fr 36.5fr 36.5fr;
  grid-auto-rows: auto;
  gap: clamp(14px, 1.6vw, 28px);
  padding-bottom: clamp(30px, 4vw, 60px);
}

.kcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-soft);
  overflow: hidden;
  transition: border-color 0.45s var(--ease-soft);
  color: inherit;
}

a.kcard,
.kcard[data-trailer] {
  cursor: pointer;
}

.kcard:hover {
  border-color: var(--rule);
}

.kcard--wide {
  grid-column: span 2;
}

.kcard--kit {
  grid-column: span 3;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Media well */
.kcard__media {
  position: relative;
  flex: 1 0 auto;
  min-height: clamp(150px, 14vw, 250px);
  background: var(--bg-lift);
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Fixed-proportion media wells */
.kcard__media--poster {
  aspect-ratio: 676 / 1017; /* the actual art — swap when final 18×24 lands */
  min-height: 0;
  padding: 0;
}

.kcard__media--poster > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kcard__media--video {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.kcard__media--sq {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

/* Stills 2×2 preview */
.kcard__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(4px, 0.4vw, 8px);
  padding: clamp(4px, 0.4vw, 8px);
}

.kcard__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transition: opacity 0.5s var(--ease-soft);
}

.kcard:hover .kcard__grid img {
  opacity: 1;
}

.kcard__chip.kcard__chip--count {
  top: auto;
  left: auto;
  right: clamp(12px, 1.1vw, 20px);
  bottom: clamp(12px, 1.1vw, 20px);
}

.kcard__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease-soft);
  opacity: 0.94;
}

.kcard:hover .kcard__media > img {
  transform: scale(1.025);
  opacity: 1;
}

/* (Poster media well is .kcard__media--poster: the container IS the poster's
   exact shape, art edge to edge.) */

/* Screenplay pages sit on true black. */
.kcard--script .kcard__media {
  background: #000;
}

/* Touch devices: no hover motion or color shifts on download affordances. */
@media (hover: none) {
  .kcard:hover .kcard__cta,
  .kcard:hover .kcard__cta svg,
  .kcard:hover .kcard__media > img {
    transform: none;
  }

  .kcard:hover .kcard__cta {
    color: var(--ink);
  }

  /* The screenplay stack keeps its resting fan on tap. */
  .kcard:hover .kcard__pages img:nth-child(1) {
    transform: rotate(-4deg) translate(-9%, 2%);
  }

  .kcard:hover .kcard__pages img:nth-child(2) {
    transform: rotate(3.5deg) translate(9%, -1%);
  }
}

/* Screenplay: three pages, title page front, loosely stacked. */
.kcard__pages {
  position: relative;
  width: 42%;
  aspect-ratio: 76 / 100;
  margin: clamp(18px, 1.8vw, 32px) 0;
}

.kcard__pages img {
  position: absolute;
  inset: 0;
  width: 100%;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  background: #f4f2ec;
  transition: transform 0.7s var(--ease);
}

.kcard__pages img:nth-child(1) {
  transform: rotate(-4deg) translate(-9%, 2%);
}

.kcard__pages img:nth-child(2) {
  transform: rotate(3.5deg) translate(9%, -1%);
}

.kcard__pages img:nth-child(3) {
  transform: none;
}

.kcard:hover .kcard__pages img:nth-child(1) {
  transform: rotate(-5.5deg) translate(-12%, 2.5%);
}

.kcard:hover .kcard__pages img:nth-child(2) {
  transform: rotate(5deg) translate(12%, -1.5%);
}

/* Trailer: poster frame + play glyph. */
.kcard__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.kcard__play span {
  width: clamp(44px, 3.8vw, 64px);
  height: clamp(44px, 3.8vw, 64px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.5s var(--ease), background 0.45s var(--ease-soft);
}

.kcard:hover .kcard__play span {
  transform: scale(1.08);
  background: rgba(255, 0, 38, 0.35);
}

.kcard__play svg {
  width: 34%;
  fill: #fff;
  margin-left: 3%; /* optical center — the glyph's mass already sits right of true center */
}


/* Caption bar — true black against the charcoal page. */
.kcard__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(12px, 1.15vw, 20px) clamp(14px, 1.3vw, 24px);
  border-top: 1px solid var(--rule-soft);
  background: #000;
}

.kcard__id .kcard__title {
  display: block;
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.3;
}

.kcard__id .kcard__spec {
  display: block;
  margin-top: 0.35em;
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}

.kcard__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  transition: color 0.4s var(--ease-soft);
}

.kcard:hover .kcard__cta,
a.kcard__cta:hover {
  color: var(--red);
}

.kcard__cta svg {
  width: 0.85em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 0.5s var(--ease);
}

.kcard:hover .kcard__cta svg {
  transform: translateY(2px);
}

.kcard__cta--muted,
.kcard:hover .kcard__cta--muted {
  color: var(--ink-3);
}

/* FPO chip on the poster */
.kcard__chip {
  position: absolute;
  top: clamp(10px, 1vw, 18px);
  left: clamp(10px, 1vw, 18px);
  padding: 0.35em 0.8em;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule);
  font-family: var(--font-micro);
  font-size: clamp(9px, 0.64vw, 11px);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Full-kit band */
.kcard--kit .kcard__media {
  display: none;
}

.kcard--kit .kcard__bar {
  border-top: 0;
  width: 100%;
  padding: clamp(18px, 1.8vw, 32px) clamp(14px, 1.3vw, 24px);
}

.credits {
  padding: clamp(15px, 2.5vw, 45px) 0 clamp(20px, 3.5vw, 60px);
}

/* Media kit credit values: Bradford at a fixed 15px, per design note. */
[data-page="media-kit"] .credit__v {
  font-size: 15px;
}

.kcard__media--poster {
  cursor: zoom-in;
}

.credits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 70px);
  row-gap: 0;
  margin-top: clamp(18px, 2.2vw, 38px);
}

.credit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--rule-soft);
}

.credit__k {
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
}

.credit__v {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  color: var(--ink);
  text-align: right;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: 569fr 149fr 734fr;
  padding-bottom: clamp(50px, 9vw, 155px);
}

.contact__aside {
  grid-column: 1;
}

.contact__main {
  grid-column: 3;
}

.contact__block {
  padding: 0 0 1.5em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid var(--rule-soft);
}

.contact__block:last-child {
  border-bottom: 0;
}

.contact__k {
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.6em;
}

.contact__v {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink);
  line-height: 1.8;
}

.form {
  display: grid;
  gap: clamp(18px, 2vw, 34px);
}

.field {
  display: grid;
  gap: 0.5em;
}

.field label {
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.5em 0;
  border-radius: 0;
  transition: border-color 0.4s var(--ease-soft);
  -webkit-appearance: none;
  appearance: none;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field select option {
  background: var(--bg);
  color: var(--ink);
}

.field textarea {
  resize: vertical;
  min-height: 8em;
  line-height: 1.9;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-bottom-color: var(--red);
}

.form__submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.85em 1.6em;
  background: var(--scrim);
  font-family: var(--font-label);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: background 0.45s var(--ease-soft);
}

.form__submit:hover {
  background: rgba(255, 0, 38, 0.24);
}

.form__submit svg {
  width: 0.8em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform 0.5s var(--ease);
}

.form__submit:hover svg {
  transform: translateX(3px);
}

.form__hp {
  position: absolute;
  left: -9999px;
}

/* ==========================================================================
   LOAD + SCROLL ANIMATIONS
   ========================================================================== */

[data-anim] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

[data-anim="mark"] {
  transform: translateY(0) scale(1.014);
  filter: blur(4px);
  transition: opacity 1.5s var(--ease), transform 1.5s var(--ease),
    filter 1.5s var(--ease);
}

[data-anim].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

.no-js [data-anim] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ==========================================================================
   TRAILER PLAYER
   ========================================================================== */

.player {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-soft), visibility 0.6s;
}

.player.is-open {
  opacity: 1;
  visibility: visible;
}

.player.is-idle {
  cursor: none;
}

.player__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Center overlay: spinner while loading, glyph on pause. */
.player__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}

.player__glyph {
  width: clamp(46px, 4.5vw, 74px);
  height: clamp(46px, 4.5vw, 74px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--ease);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.22);
}

.player.is-paused:not(.is-buffering) .player__glyph {
  opacity: 1;
  transform: none;
}

.player__glyph svg {
  width: 34%;
  height: auto;
  fill: #fff;
  margin-left: 3%;
}

.player__spinner {
  position: absolute;
  width: clamp(28px, 2.6vw, 42px);
  height: clamp(28px, 2.6vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft);
  animation: player-spin 0.9s linear infinite;
}

.player.is-buffering .player__spinner {
  opacity: 1;
}

@keyframes player-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Chrome */
.player__ui {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.55s var(--ease-soft);
}

.player.is-idle .player__ui {
  opacity: 0;
}

.player__ui > * {
  pointer-events: auto;
}

.player__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2vw, 34px) clamp(16px, 2.6vw, 44px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
}

.player__title {
  font-family: var(--font-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.player__actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
}

.player__btn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.35s var(--ease-soft), transform 0.4s var(--ease);
}

.player__btn:hover {
  color: #fff;
  transform: scale(1.08);
}

.player__btn svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.player__btn--close svg {
  stroke-width: 1.2;
}

.player__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(30px, 4vw, 60px) clamp(16px, 2.6vw, 44px)
    clamp(14px, 1.8vw, 30px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
  display: grid;
  gap: clamp(7px, 0.8vw, 13px);
}

/* Scrub track — a hairline that thickens on intent. */
.player__track {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.player__rail {
  position: relative;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
  transition: height 0.35s var(--ease), background 0.35s var(--ease-soft);
}

.player__track:hover .player__rail,
.player__track.is-scrubbing .player__rail {
  height: 3px;
  background: rgba(255, 255, 255, 0.32);
}

.player__buffer,
.player__progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  transform-origin: left;
  transform: scaleX(0);
}

.player__buffer {
  background: rgba(255, 255, 255, 0.22);
}

.player__progress {
  background: var(--red);
}

.player__knob {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--red);
  transform: translateY(-50%) scale(0);
  transition: transform 0.35s var(--ease);
  pointer-events: none;
}

.player__track:hover .player__knob,
.player__track.is-scrubbing .player__knob {
  transform: translateY(-50%) scale(1);
}

/* Bradford, not Autoscape: the trial Autoscape has no colon glyph. */
.player__times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}

.player__hint {
  font-family: var(--font-micro);
  letter-spacing: var(--track-micro);
}

.player__hint {
  color: rgba(255, 255, 255, 0.34);
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .player__hint {
    display: none;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

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

  .kcard--kit,
  .kcard--wide {
    grid-column: span 2;
  }

  .bio,
  .contact {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 56px);
  }

  .bio__main,
  .contact__main {
    grid-column: 1;
  }

  .people {
    grid-template-columns: repeat(2, 1fr);
  }

  .people::after {
    display: none;
  }

  .people::before {
    left: 50%;
  }

  .credits__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --t-label: 11px;
    --t-label-lg: 12px;
    --t-micro: 10px;
    --t-body: 15px;
    --t-body-lg: 16px;
    --t-name: 22px;
    --edge: 26px;
  }

  body {
    line-height: 1.95;
  }

  /* Smaller, tighter hamburger/close (desktop's reads oversized here). */
  .menu-btn,
  .menu__close {
    width: 26px;
    height: 15px;
    top: 26px;
  }

  .menu-btn__bar {
    width: 26px;
    height: 2.5px;
  }

  .menu-btn[aria-expanded="true"] .menu-btn__bar:first-child,
  .menu__close .menu-btn__bar:first-child {
    transform: translateY(6.25px) rotate(45deg);
  }

  .menu-btn[aria-expanded="true"] .menu-btn__bar:last-child,
  .menu__close .menu-btn__bar:last-child {
    transform: translateY(-6.25px) rotate(-45deg);
  }

  /* --- Mobile hero, per comp: menu top-right, uncropped centered mark in the
     upper third, one full-width play button pinned to the bottom. --- */
  .hero__nav {
    display: none;
  }

  .hero .menu-btn {
    display: grid;
    top: 26px;
    right: var(--edge);
    bottom: auto;
  }

  .hero__mark {
    top: 11svh;
  }

  .hero__mark .wordmark {
    width: 68vw;
    margin-top: 0; /* uncropped on mobile */
  }

  .hero__bar {
    bottom: 20px;
    padding-inline: 20px;
  }

  /* 25% larger text, a touch taller. */
  .play-btn {
    width: 100%;
    justify-content: center;
    padding-block: 19px;
    font-size: 12px;
  }

  .people {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .castgrid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .people::before,
  .people::after {
    display: none;
  }

  /* BIO rides the right edge, level with the name; name and role 15% up. */
  .person__name {
    font-size: 12.5px;
  }

  .person__role {
    font-size: 11.5px;
  }

  /* Team heading hugs the first photo. */
  .section-intro {
    margin-bottom: 10px;
  }

  /* Contact intro paragraph is desktop-only context. */
  .page-head__note,
  .lightbox__dl-ext {
    display: none;
  }

  .stills,
  .kit {
    grid-template-columns: 1fr;
  }

  .still--wide,
  .kcard--kit,
  .kcard--wide,
  .kcard--poster,
  .kcard--sq {
    grid-column: span 1;
  }

  .kcard--kit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .kcard__strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .tjc {
    display: none;
  }

  /* Menu on small screens: just the items, centered. No logo, no credits. */
  .menu__list {
    margin: 0;
    width: 100%;
    gap: clamp(22px, 5svh, 46px);
  }

  .menu__list li {
    display: flex;
    justify-content: center;
  }

  .menu__left {
    display: none;
  }

  .facts {
    gap: 30px 40px;
  }

  .back-link {
    top: 22px;
  }

  /* Interior mastheads: uncropped, flush with the content's left line,
     top-aligned with the menu button. */
  .masthead {
    padding-top: 0;
    padding-bottom: 30px;
  }

  .masthead__mark {
    width: min(56vw, 230px);
    margin-inline: 0 auto;
    margin-top: 26px;
  }

  .masthead__mark .wordmark {
    margin-top: 0;
  }

  /* Bio pages: the back link occupies the top-left, push the mark down. */
  [data-page="bio"] .masthead {
    padding-top: 62px;
  }

  /* Footer on mobile: the mark alone, fully visible — no cropping. */
  .footer__mark {
    width: 34vw;
    margin-bottom: 0;
  }

  .footer__meta {
    display: none;
  }

  /* One hamburger is enough — the hero carries it at the top. */
  .below .menu-btn {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  [data-anim] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}