/* =========================================================================
   ROOM 627 — room627film.com
   Palette and type taken from the key art: near-black hallway, the warm
   cream of the doorway light, distressed display lettering.
   ========================================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; }
/* width/height attributes are set on every <img> so the browser can reserve
   space and avoid layout shift. Without this they also act as presentational
   hints and stretch the image — height must stay derived from the width.
   Rules that genuinely need a fixed height (hero, gallery, backgrounds)
   override it later by specificity. */
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- tokens ---------- */
:root {
  --ink:        #08080a;
  --ink-2:      #0e0e11;
  --ink-3:      #15151a;
  --cream:      #ebbf84;
  --cream-soft: #f4dcb9;
  --paper:      #f4efe7;
  --muted:      #9d978e;
  --muted-dim:  #6f6a64;
  --line:       rgba(244, 239, 231, 0.13);
  --line-warm:  rgba(235, 191, 132, 0.30);

  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --label:   "Oswald", "Helvetica Neue", sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;

  --gut: clamp(1.25rem, 4.5vw, 3.5rem);
  --measure: 34rem;
  --shell: 76rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  line-height: 1.72;
  overflow-x: hidden;
}

/* film grain — sits above everything, ignores pointer events */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: grain 720ms steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; opacity: 0.1; }
}

::selection { background: var(--cream); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--cream); color: var(--ink);
  padding: 0.75rem 1.25rem; z-index: 200;
  font-family: var(--label); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { transform: translateY(0); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.shell--narrow { max-width: 52rem; }

section { position: relative; }

.band { padding-block: clamp(4.5rem, 11vw, 9.5rem); }
.band--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band--rule { border-top: 1px solid var(--line); }
.band--panel { background: var(--ink-2); }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 400; line-height: 1.02; }

.eyebrow {
  font-family: var(--label);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-warm);
  max-width: 7rem;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  flex: 1; height: 1px; background: var(--line-warm); max-width: 7rem;
}

.h-display {
  font-family: var(--display);
  font-size: clamp(2.5rem, 7.5vw, 5.75rem);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--paper);
}
.h-section {
  font-family: var(--display);
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--paper);
}
/* Second line of a display heading picks up the cream, the same
   white-then-cream split the ROOM 627 header mark uses. */
.h-display span,
.h-section span { color: var(--cream); }

.h-sub {
  font-family: var(--label);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}

.lede {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.5;
  color: var(--paper);
}
.prose { max-width: var(--measure); color: var(--muted); }
.prose > * + * { margin-top: 1.35em; }
.prose strong { color: var(--paper); font-weight: 600; }
/* :not(.btn) matters — `.prose a` (0-1-1) outranks `.btn--solid` (0-1-0),
   so without it a button inside prose gets cream text on a cream fill and
   the label disappears. */
.prose a:not(.btn):not(.imdb) { color: var(--cream); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.prose a:not(.btn):not(.imdb):hover { color: var(--cream-soft); }

.dim { color: var(--muted); }
.tiny {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* ---------- header ---------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gut);
  transition: background 400ms var(--ease), border-color 400ms var(--ease), padding 400ms var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8,8,10,0.85), rgba(8,8,10,0));
  transition: opacity 400ms var(--ease);
}
.hdr.is-stuck {
  background: rgba(8, 8, 10, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 0.7rem;
}
.hdr.is-stuck::before { opacity: 0; }

.hdr__mark {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  white-space: nowrap;
}
.hdr__mark span { color: var(--cream); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav a {
  font-family: var(--label);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  position: relative;
  padding-block: 0.35rem;
  transition: color 220ms var(--ease);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--cream);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.burger {
  display: none;
  background: none; border: 1px solid var(--line);
  width: 2.75rem; height: 2.75rem;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
}
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 1.1rem; height: 1px; background: var(--paper);
  transition: transform 300ms var(--ease), opacity 200ms var(--ease);
}
.burger span:nth-child(1) { transform: translate(-50%, -5px); }
.burger span:nth-child(2) { transform: translate(-50%, 0); }
.burger span:nth-child(3) { transform: translate(-50%, 5px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

@media (max-width: 800px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 82vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6rem;
    padding: 2rem var(--gut);
    background: var(--ink-2);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 420ms var(--ease);
    visibility: hidden;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav a { font-size: 1rem; letter-spacing: 0.16em; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border: 1px solid var(--cream);
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  transition: background 280ms var(--ease), color 280ms var(--ease), transform 280ms var(--ease);
}
.btn:hover { background: var(--cream); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--cream); color: var(--ink); }
.btn--solid:hover { background: var(--cream-soft); border-color: var(--cream-soft); }
.btn--ghost { border-color: var(--line); color: var(--paper); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--label);
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
}
.arrow-link svg { transition: transform 300ms var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture, .verse__bg picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; transform: scale(1.04); }
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(105% 78% at 50% 45%, rgba(8,8,10,0) 0%, rgba(8,8,10,0.30) 58%, rgba(8,8,10,0.80) 100%),
    linear-gradient(to bottom, rgba(8,8,10,0.72) 0%, rgba(8,8,10,0.22) 22%, rgba(8,8,10,0.28) 55%, rgba(8,8,10,0.88) 88%, var(--ink) 100%);
}

.hero__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(6rem, 15vh, 9rem) var(--gut) clamp(4rem, 9vh, 6.5rem);
  text-align: center;
}

/* The production credit and the film-by line are one block on the poster,
   so they share a single treatment here. The byline previously used cream
   at a different weight and tracking, which read as a different typeface
   even though both are Oswald. */
.hero__presents,
.hero__byline {
  font-family: var(--label);
  font-weight: 400;
  font-size: clamp(0.6rem, 1.3vw, 0.74rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.72);
}
.hero__presents { margin-bottom: clamp(0.15rem, 0.5vw, 0.35rem); }

.hero__presents em,
.hero__byline em {
  font-weight: 600;
  color: var(--paper);
}
/* Company names stay upright; the italic is reserved for the director's
   name on the line below, so only one thing on the credit block leans. */
.hero__presents em { font-style: normal; }
.hero__byline em   { font-style: italic; }

.hero__wordmark {
  width: min(60%, 37rem);
  margin-inline: auto;
  /* Layered drop-shadows: drop-shadow follows the PNG alpha, so each layer
     hugs the letterforms rather than boxing the image. A tight dark pass
     gives the edges definition, a mid pass lifts the mark off the photo,
     and a wide soft pass darkens the plate behind it for contrast. */
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 60px rgba(0, 0, 0, 0.65));
}

.hero__byline {
  margin-bottom: clamp(0.5rem, 1.2vw, 0.9rem);
  text-indent: 0.24em;
}

.hero__official {
  font-family: var(--label);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.75vw, 1.12rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.62);
  margin-top: clamp(0.9rem, 2vw, 1.35rem);
  text-indent: 0.42em;              /* balance the trailing letter-space */
}

.hero__logline {
  font-family: var(--label);
  font-weight: 300;
  font-size: clamp(0.95rem, 2.1vw, 1.35rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper);
  margin-top: clamp(0.25rem, 0.8vw, 0.6rem);
}

.hero__laurels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3.5vw, 3rem);
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
}
.hero__status {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.6rem;
  font-family: var(--label);
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted-dim);
  text-decoration: none;
}
.scroll-cue i {
  display: block; width: 1px; height: 2.6rem;
  background: linear-gradient(to bottom, var(--cream), transparent);
  animation: cue 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue i { animation: none; } }

/* laurel */
.laurel {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  color: var(--cream);
  position: relative;
  padding-inline: 1.45rem;
}
.laurel svg { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0.85; }
.laurel svg:first-of-type { left: 0; }
.laurel svg:last-of-type { right: 0; transform: translateY(-50%) scaleX(-1); }
.laurel b {
  font-family: var(--label);
  font-weight: 500;
  font-size: clamp(0.8rem, 1.55vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
}
.laurel span {
  font-family: var(--label);
  font-weight: 300;
  font-size: clamp(0.69rem, 1.3vw, 0.8rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.82);
  text-align: center;
  max-width: 13rem;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .hero { min-height: auto; }
  .hero__media { position: relative; inset: auto; aspect-ratio: 2.35 / 1; }
  .hero::before { background: linear-gradient(to bottom, rgba(8,8,10,0.25), rgba(8,8,10,0.55) 40%, var(--ink) 88%); }
  .hero__inner { padding-top: 2.5rem; padding-bottom: 3.5rem; }
  .hero__wordmark { width: min(80%, 25rem); }
  .hero__laurels { gap: 1.6rem; }
  .scroll-cue { display: none; }
}

/* =========================================================================
   STATEMENT — the hook under the fold
   ========================================================================= */
.statement { text-align: center; }
.statement p {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.34;
  max-width: 30ch;
  margin-inline: auto;
  color: var(--paper);
}
.statement p + p { margin-top: 1.1em; color: var(--muted); }
.statement em { font-style: normal; color: var(--cream); }

/* =========================================================================
   SPLIT — image beside text
   ========================================================================= */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  /* The stills are 2.35:1 and the prose beside them runs 600-900px tall, so
     centring left the image marooned in a tall empty column. Top-aligning
     and sticking it means the frame sits beside the opening lines and then
     travels with the reader instead of scrolling away into dead space.
     Cropping the stills taller was the alternative and was rejected: these
     are two-shots with a subject at each edge, so a portrait crop loses one
     of them. */
  .split { grid-template-columns: 1.15fr 1fr; }
  .split--flip .split__media { order: 2; }
  /* .split .split__media (0-2-0), not .split__media (0-1-0): the base rule
     setting position:relative appears later in this file and would win a
     specificity tie. */
  .split .split__media {
    position: sticky;
    top: calc(4.5rem + var(--gut) * 0.2);
  }
}
.split__media { position: relative; }
.split__media img { width: 100%; }
.frame {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
}
.frame::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 90px rgba(0,0,0,0.55);
  pointer-events: none;
}
.frame img { transition: transform 1.2s var(--ease); }
/* stacked stills inside a split column */
.split__media .frame + .frame { margin-top: clamp(0.6rem, 1.3vw, 1rem); }

.caption {
  margin-top: 0.9rem;
  font-family: var(--label);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* =========================================================================
   PULL QUOTE — Luke 6:27
   ========================================================================= */
.verse {
  position: relative;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.verse__bg { position: absolute; inset: 0; z-index: -2; }
.verse__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.verse::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8,8,10,0.9), rgba(8,8,10,0.78)), rgba(8,8,10,0.2);
}
.verse blockquote {
  font-size: clamp(1.6rem, 4.4vw, 3.1rem);
  line-height: 1.28;
  max-width: 22ch;
  margin-inline: auto;
  color: var(--cream-soft);
  font-style: italic;
}
.verse cite {
  display: block;
  margin-top: 1.8rem;
  font-family: var(--label);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================================
   STAT ROW
   ========================================================================= */
.stats {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.stat { border-top: 1px solid var(--line-warm); padding-top: 1.4rem; }
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--cream);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.stat p { font-size: 0.98rem; line-height: 1.55; color: var(--muted); }
.stat cite {
  display: block; margin-top: 0.7rem;
  font-family: var(--label); font-style: normal;
  font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-dim);
}
.stat cite a { color: inherit; text-decoration-color: var(--line); }
.stat cite a:hover { color: var(--cream); }

/* =========================================================================
   GALLERY
   ========================================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);   /* matches .feature__media */
}
.shot {
  position: relative;
  grid-column: span 6;
  border: 0; padding: 0;
  background: var(--ink-3);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 2.35 / 1;
}
.shot:nth-child(1), .shot:nth-child(6) { grid-column: span 12; }
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease), opacity 500ms var(--ease);
  opacity: 0.88;
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.045); opacity: 1; }
.shot::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
@media (max-width: 640px) {
  .shot, .shot:nth-child(1), .shot:nth-child(6) { grid-column: span 12; }
}

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(4, 4, 6, 0.96);
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
/* The `hidden` attribute does the real hiding. It needs an author-level rule
   because `.lb { display: grid }` would otherwise outrank the UA default.
   Deliberately no `visibility` transition here: its computed value does not
   flip within the frame the class is added, which stops the close button
   from taking focus when the dialog opens. */
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lb__cap {
  margin-top: 1rem; text-align: center;
  font-family: var(--label); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.lb__x, .lb__nav {
  position: absolute;
  background: none; border: 1px solid var(--line);
  color: var(--paper);
  width: 3rem; height: 3rem;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}
.lb__x:hover, .lb__nav:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.lb__x { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__nav--prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* =========================================================================
   CAST + CREW
   ========================================================================= */
.people {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.person { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.person h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--paper);
}
.person .role {
  font-family: var(--label);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream);
  margin: 0.55rem 0 1rem;
}
.person p { font-size: 0.97rem; line-height: 1.62; color: var(--muted); }

.credits {
  display: grid;
  gap: 0.05rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
.credit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.credit dt {
  font-family: var(--label);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-dim);
}
.credit dd {
  font-family: var(--label);
  font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paper);
  text-align: right;
}

/* =========================================================================
   SPEC TABLE
   ========================================================================= */
.specs { margin-top: 2rem; border-top: 1px solid var(--line); }
.specs div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.specs dt {
  font-family: var(--label);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-dim);
}
.specs dd { color: var(--paper); font-size: 0.98rem; }
@media (max-width: 560px) { .specs div { grid-template-columns: 1fr; gap: 0.2rem; } }

/* =========================================================================
   CRISIS RESOURCES
   ========================================================================= */
.help { background: var(--ink-2); border-top: 1px solid var(--line-warm); }
.help__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 2.2rem;
}
.help__card {
  border: 1px solid var(--line);
  padding: 1.6rem;
  background: rgba(244, 239, 231, 0.02);
}
.help__card h3 {
  font-family: var(--label);
  font-weight: 500;
  font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 0.7rem;
}
.help__num {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--cream);
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.4rem;
}
a.help__num:hover { color: var(--cream-soft); text-decoration: underline; text-underline-offset: 0.2em; }
.help__card p { font-size: 0.92rem; line-height: 1.55; color: var(--muted); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.ftr { background: var(--ink); border-top: 1px solid var(--line); }
.ftr__top {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.ftr h3 {
  font-family: var(--label);
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 1.1rem;
}
.ftr ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.ftr a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.ftr a:hover { color: var(--paper); }
.ftr__bottom {
  border-top: 1px solid var(--line);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
.social { display: flex; gap: 0.8rem; }
.social a {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
}
.social a:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   PRESS PAGE
   ========================================================================= */
.page-head {
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.dl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  margin-top: 2rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--line-warm);
  background: rgba(235, 191, 132, 0.045);
}
.toc { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.toc a {
  font-family: var(--label);
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.toc a:hover { color: var(--cream); }
@media (min-width: 960px) {
  .press-layout { display: grid; grid-template-columns: 13rem 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .press-layout aside { position: sticky; top: 6rem; }
}
.note-panel {
  border: 1px solid var(--line);
  border-left: 2px solid var(--cream);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: rgba(244, 239, 231, 0.025);
}
.note-panel h3 {
  font-family: var(--label);
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper); margin-bottom: 0.8rem;
}
.note-panel p { font-size: 0.95rem; color: var(--muted); line-height: 1.65; }
.note-panel p + p { margin-top: 0.9rem; }

/* =========================================================================
   PRODUCTION TEAM — portrait beside a long-form bio
   ========================================================================= */
.bios { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.bio { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 760px) {
  .bio { grid-template-columns: minmax(11rem, 17rem) 1fr; }
}

.bio__portrait {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 1 / 1;
  max-width: 17rem;
}
.bio__portrait img { width: 100%; height: 100%; object-fit: cover; }
.bio__portrait::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}

.bio h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.bio .role {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0.6rem 0 1.2rem;
}
.bio__text { color: var(--muted); max-width: 42rem; }
.bio__text > * + * { margin-top: 1.15em; }
.bio__text em { color: var(--paper); font-style: italic; }

/* compact portrait strip used as a teaser on the homepage */
.team-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: clamp(0.6rem, 1.5vw, 1.1rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 52rem;
}
.team-strip figure { margin: 0; }
.team-strip .shot-sq {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink-3);
}
.team-strip img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.82;
  transition: opacity 400ms var(--ease), transform 700ms var(--ease);
}
.team-strip a:hover img { opacity: 1; transform: scale(1.05); }
.team-strip .shot-sq::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.team-strip figcaption {
  margin-top: 0.5rem;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-dim);
  line-height: 1.4;
}

/* ---------- cast card portrait ---------- */
.person__portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink-3);
  margin-bottom: 1.5rem;
}
.person__portrait img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.9;
  transition: opacity 500ms var(--ease), transform 900ms var(--ease);
}
.person:hover .person__portrait img { opacity: 1; transform: scale(1.035); }
.person__portrait::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
/* the portrait replaces the rule that separated the text-only cards */
.people .person { border-top: 0; padding-top: 0; }

/* =========================================================================
   PRESS KIT PAGE PREVIEW
   The kit is shown as rendered page images rather than an embedded PDF
   viewer: <object>/<iframe> PDF embedding is unreliable (blank frames on
   several desktop browsers, and mobile browsers refuse it outright), and a
   blank grey box is worse than no preview. Images work everywhere; the real
   PDF is one click away underneath.
   ========================================================================= */
.kit { margin-top: clamp(2rem, 4vw, 3rem); }

.kit__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(11rem, 26vw, 17rem);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-warm) transparent;
}
.kit__strip::-webkit-scrollbar { height: 6px; }
.kit__strip::-webkit-scrollbar-track { background: rgba(244,239,231,0.05); }
.kit__strip::-webkit-scrollbar-thumb { background: var(--line-warm); }

.kit__page {
  scroll-snap-align: start;
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--ink-3);
}
.kit__page img {
  width: 100%;
  aspect-ratio: 1236 / 1600;
  object-fit: cover;
  transition: opacity 400ms var(--ease), transform 600ms var(--ease);
  opacity: 0.92;
}
.kit__page:hover img, .kit__page:focus-visible img { opacity: 1; transform: scale(1.02); }
.kit__page::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.kit__page span {
  position: absolute;
  left: 0.5rem; bottom: 0.5rem;
  font-family: var(--label);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(8,8,10,0.78);
  padding: 0.2rem 0.5rem;
}
.kit__hint {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  align-items: baseline;
  margin-top: 0.4rem;
}

/* ---------- IMDb badge ---------- */
.imdb {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.imdb img { width: 3.5rem; height: auto; }
.imdb span {
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.imdb:hover { transform: translateY(-1px); }
.imdb:hover span { color: var(--paper); }
.hero__imdb { margin-top: clamp(1.2rem, 2.5vw, 1.7rem); }

/* =========================================================================
   FEATURE — one large still with the copy set beneath it
   Replaces the image-beside-text split for the long-form sections. A 2.35:1
   frame run to the full column is properly cinematic, and setting the body
   copy in two columns underneath keeps a readable measure while using the
   whole width, so no tall empty column is left beside the picture.
   ========================================================================= */
.feature__head { max-width: 46rem; }

/* Top margin matches .gallery exactly so a heading sits the same distance
   above its picture on every section of the site. */
.feature__media {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
/* for images whose source is too small to run full width without upscaling */
.feature__media--cap { max-width: 46rem; }

/* The opening line of each section, set larger than the body to give the
   reader a way in before the columns begin. */
.feature__lede {
  max-width: 44rem;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.45;
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
  /* Warm cream rather than the body's near-white. Same tone as the Luke 6:27
     quote, so the opening line of a section reads as a lead-in rather than as
     more body copy. Deliberately --cream-soft, not the full --cream accent:
     a whole paragraph at accent strength competes with the headline. */
  color: var(--cream-soft);
}

/* page openers on the press, team and behind-the-scenes pages get the
   same treatment, so every entry point to the site reads alike */
.page-head .lede { color: var(--cream-soft); }

.feature__cols {
  columns: 2;
  column-gap: clamp(2.5rem, 5vw, 5rem);
  color: var(--muted);
  line-height: 1.8;
}
/* generous, even spacing between paragraphs — the copy is dense and needs air */
.feature__cols p { break-inside: avoid; margin: 0 0 1.9em; }
.feature__cols p:last-child { margin-bottom: 0; }
.feature__cols strong { color: var(--paper); font-weight: 600; }
.feature__cols em { font-style: italic; }

@media (max-width: 860px) {
  .feature__cols { columns: 1; max-width: 34rem; }
}

/* =========================================================================
   BEHIND THE SCENES — masonry
   The BTS photographs are a mix of portrait and landscape at wildly
   different aspect ratios, so a fixed-ratio grid would crop most of them
   badly. CSS columns keeps every frame at its own proportions.
   ========================================================================= */
.bts {
  columns: 3;
  column-gap: clamp(0.6rem, 1.4vw, 1.1rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 980px) { .bts { columns: 2; } }
@media (max-width: 560px) { .bts { columns: 1; } }

.bts .shot {
  break-inside: avoid;
  display: block;
  width: 100%;
  aspect-ratio: auto;          /* override the 2.35:1 stills grid */
  margin-bottom: clamp(0.6rem, 1.4vw, 1.1rem);
}
.bts .shot img { height: auto; }