/* ==========================================================================
   GRAND AI FILMS
   Design language: SPECTACLE.
     · type is the design — oversized, condensed, overlapping the work
     · full-bleed imagery, deliberate asymmetry, no boxed cards
     · the page responds: light follows the cursor, images parallax,
       words mask-reveal, frames advance on hover
     · one inverted light band to break the dark
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Warm black, not blue-black — film, not software */
  --void:      #0a0908;
  --void-2:    #121010;
  --void-3:    #1c1917;
  --hair:      #2a2622;
  --hair-2:    #3a352f;

  --bone:      #efeae0;
  --bone-2:    #b8b1a4;
  --bone-3:    #8b8478;

  /* Studio accent — a filmic vermilion, used sparingly.
     --flare is tuned for dark surfaces; --flare-ink is the darker variant
     that clears 4.5:1 on the light band. --line-ui is the control-boundary
     token (3:1, WCAG 1.4.11) — --hair/--hair-2 are decorative and stay faint.
     All four are verified by _source/contrast.js. */
  --flare:     #e8552f;
  --flare-ink: #a8300f;
  --line-ui:   #6f665c;

  /* Per-work accents */
  --blue:      #6a9bd8;
  --gold:      #d2a227;
  --cherry:    #d4586a;

  --accent: var(--gold);

  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, "Courier New", monospace;

  /* Fluid type — extreme scale contrast is the point */
  --t-mega:  clamp(3.2rem, 13.5vw, 12.5rem);
  --t-xxl:   clamp(2.4rem, 8vw, 7rem);
  --t-xl:    clamp(1.9rem, 5vw, 4rem);
  --t-lg:    clamp(1.35rem, 2.6vw, 2.2rem);
  --t-md:    clamp(1.05rem, 1.5vw, 1.4rem);
  --t-body:  clamp(1rem, .35vw + .92rem, 1.125rem);
  --t-sm:    .875rem;
  --t-micro: .69rem;

  --gut:   clamp(1.1rem, 4vw, 4rem);
  --edge:  clamp(1.1rem, 3.5vw, 3.5rem);
  --nav-h: 64px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--display);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 750;
  font-stretch: 82%;
  line-height: .88;
  letter-spacing: -.028em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

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

/* ---------- 3. Type utilities -------------------------------------------- */

.mono {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.mono--tight { letter-spacing: .04em; }

.dim  { color: var(--bone-3); }
.dim2 { color: var(--bone-2); }

.lede {
  font-size: var(--t-md);
  line-height: 1.42;
  color: var(--bone);
  max-width: 34ch;
  text-wrap: pretty;
}

.copy { color: var(--bone-2); max-width: 62ch; }
.copy strong { color: var(--bone); font-weight: 600; }
.copy a { color: var(--bone); text-underline-offset: 3px; }

/* a word that flips to the accent on hover of its parent */
.hot { transition: color .3s var(--ease); }

/* ---------- 4. Layout ---------------------------------------------------- */

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

.bleed { width: 100%; }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

.skip {
  position: fixed;
  left: -9999px; top: 0; z-index: 200;
  background: var(--flare); color: #fff;
  padding: .8rem 1.2rem;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 1rem; top: 1rem; }

/* Heading for a section whose visible label is an eyebrow rather than a
   heading. Keeps the document outline complete for screen readers — the W3C
   validator flags a <section> with no heading inside it — without adding a
   visible element the design did not ask for. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 5. Film grain ------------------------------------------------ */

.grain {
  position: fixed;
  inset: -60%;
  z-index: 3;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain 620ms steps(1) infinite; }
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 1%); }
}

/* ---------- 6. Nav ------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: var(--edge);
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav[data-stuck] {
  /* Declared twice on purpose. color-mix() lands in Safari 16.2 / Chrome 111;
     before that the declaration is invalid and is dropped, which leaves the
     sticky nav fully transparent with white text sitting on the page beneath
     it — a silent failure that only appears after you scroll. The plain rgba
     is the identical colour for browsers that need it. Same reasoning for the
     -webkit- prefix: Safari only took the unprefixed form in 18. */
  background: rgba(10, 9, 8, .88);
  background: color-mix(in srgb, var(--void) 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--hair);
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav__mark b {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.02rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__dot {
  width: 9px; height: 9px;
  background: var(--flare);
  border-radius: 50%;
  flex-shrink: 0;
}

.nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2.6vw, 2.4rem);
}
.nav__links a {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-2);
  position: relative;
  padding-block: .3rem;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--flare);
  transition: right .35s var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--bone); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { right: 0; }

/* scroll progress hairline */
.nav__prog {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: var(--prog, 0%);
  background: var(--flare);
  transition: width .1s linear;
}

/* Small screens: shrink the wordmark, tighten the list, then drop the longest
   in-page label rather than let the bar overflow the viewport. */
@media (max-width: 760px) {
  .nav { gap: .6rem; }
  .nav__mark b { font-size: .86rem; }
  .nav__dot { width: 7px; height: 7px; }
  .nav__links { gap: .75rem; }
  .nav__links a { font-size: .62rem; letter-spacing: .1em; }
}
@media (max-width: 540px) {
  .nav__mark b { font-size: .78rem; }
  .nav__links a { font-size: .6rem; }
  .nav__links a[data-collapse] { display: none; }
}
@media (max-width: 400px) {
  .nav__mark b { letter-spacing: 0; }
  .nav__links { gap: .6rem; }
}

/* ---------- 7. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  /* vh first, svh second: svh (Safari 15.4+) excludes the mobile browser
     chrome so the hero is not cut off by the address bar, but a browser
     without it would drop the whole clamp and lose the min-height entirely. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__plate { position: absolute; inset: 0; z-index: -2; }
.hero__plate picture { display: block; width: 100%; height: 100%; }
.hero__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 45%);
  filter: saturate(.8) contrast(1.06) brightness(.5);
  transform: scale(1.06);
  transition: transform 2.6s var(--ease-out);
}
.hero[data-ready] .hero__plate img { transform: scale(1); }

/* Motion layer. Sits directly over the still under an identical grade, so the
   hero looks the same whether or not the loop plays. It carries no src in the
   HTML — the script only fetches it when motion is wanted, so reduced-motion,
   data-saver, slow-connection and no-JS visitors never download it, and a
   failed or blocked video simply leaves the still in place. */
.hero__motion {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 45%);
  filter: saturate(.8) contrast(1.06) brightness(.5);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.hero__motion[data-ready] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__motion { display: none; }
}
.hero__plate::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.9) 0%, rgba(10,9,8,.16) 32%, rgba(10,9,8,.7) 72%, var(--void) 100%),
    radial-gradient(130% 90% at 24% 58%, transparent 34%, rgba(10,9,8,.66) 100%);
}

/* projector light that follows the cursor (desktop, fine pointer only) */
.hero__light {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s var(--ease);
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 236, 210, .13), transparent 62%);
}
@media (hover: hover) and (pointer: fine) {
  .hero[data-lit] .hero__light { opacity: 1; }
}

.hero__inner { position: relative; width: 100%; }

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1.4rem;
  margin-bottom: clamp(1.2rem, 3vw, 2.2rem);
}
.tag {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-2);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.tag--live { color: var(--flare); }
.tag--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--flare);
  box-shadow: 0 0 10px 1px var(--flare);
}
@media (prefers-reduced-motion: no-preference) {
  .tag--live::before { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

/* The headline: oversized, condensed, optically flush */
.hero__h {
  font-size: var(--t-mega);
  font-stretch: 78%;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.038em;
  margin-bottom: clamp(1.2rem, 3vw, 2.4rem);
  text-transform: uppercase;
}
.hero__h .ln { display: block; overflow: hidden; }
/* Guarded by .js: without JS the headline must simply be readable, never
   parked off-screen waiting for a script that may not run. */
.js .hero__h .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
}
.js .hero[data-ready] .hero__h .ln > span { transform: none; }
.js .hero__h .ln:nth-child(2) > span { transition-delay: .09s; }
.js .hero__h .ln:nth-child(3) > span { transition-delay: .18s; }

.hero__h em {
  font-style: normal;
  color: var(--flare);
}

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: clamp(1.2rem, 4vw, 3.5rem);
  align-items: end;
  border-top: 1px solid var(--hair);
  padding-top: clamp(1rem, 2.4vw, 1.6rem);
}
@media (max-width: 780px) { .hero__foot { grid-template-columns: minmax(0, 1fr); } }

.hero__sub {
  color: var(--bone-2);
  max-width: 44ch;
  margin: 0;
  font-size: var(--t-body);
}
.hero__sub b { color: var(--bone); font-weight: 600; }

.hero__scroll {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-3);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  white-space: nowrap;
}
.hero__scroll i {
  display: block;
  width: 34px; height: 1px;
  background: var(--bone-3);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll i { animation: sweep 2.6s var(--ease) infinite; }
}
@keyframes sweep {
  0%   { transform: scaleX(0); opacity: 0; }
  40%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---------- 8. Ticker ---------------------------------------------------- */

.ticker {
  border-block: 1px solid var(--hair);
  padding-block: clamp(.7rem, 1.6vw, 1.05rem);
  overflow: hidden;
  white-space: nowrap;
  background: var(--void);
}
.ticker__row {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  animation: slide 34s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ticker__row { animation: none; } }
@keyframes slide { to { transform: translateX(-50%); } }

.ticker__row span {
  font-family: var(--display);
  font-weight: 750;
  font-stretch: 80%;
  font-size: clamp(1rem, 2.4vw, 1.8rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.ticker__row span:nth-child(even) { color: var(--flare); }

/* The separator was the character ●. Neither webfont contains U+25CF, so every
   browser drew it from a system fallback: a different diameter, weight and
   baseline on Windows, macOS, Android and Linux, none of it controllable from
   here. It is a circle drawn in CSS now, sized in em so it tracks the ticker's
   own clamp(), and coloured by currentColor so the :nth-child(even) accent
   still applies. */
.ticker__row span.tick__dot {
  flex: none;
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: currentColor;
}
.ticker:hover .ticker__row { animation-play-state: paused; }

/* ---------- 9. Section scaffolding --------------------------------------- */

.sec { padding-block: clamp(3.5rem, 9vw, 7.5rem); position: relative; }
.sec--tight { padding-block: clamp(2.2rem, 5vw, 4rem); }

/* an off-grid eyebrow: number, label, rule */
.eyebrow {
  display: grid;
  grid-template-columns: auto auto minmax(2rem, 1fr) auto;
  align-items: center;
  gap: .9rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.8rem);
}
.eyebrow b { color: var(--flare); font-weight: 700; }
.eyebrow i { display: block; height: 1px; background: var(--hair-2); }
.eyebrow span:last-child { white-space: nowrap; }
@media (max-width: 620px) { .eyebrow { grid-template-columns: auto 1fr; } .eyebrow i, .eyebrow span:last-child { display: none; } }

/* big section heading that reveals word by word — .js guarded, same reason */
.h-mask { overflow: hidden; display: block; }
.js .h-mask > span {
  display: block;
  transform: translateY(102%);
  transition: transform 1s var(--ease-out);
}
.js [data-in] .h-mask > span, .js .h-mask[data-in] > span { transform: none; }
.js .h-mask:nth-of-type(2) > span { transition-delay: .08s; }

.h-big {
  font-size: var(--t-xxl);
  font-stretch: 80%;
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.036em;
}
.h-mid {
  font-size: var(--t-xl);
  font-stretch: 82%;
  font-weight: 750;
  line-height: .9;
}

/* ---------- 10. Work panels --------------------------------------------- */

.work { border-top: 1px solid var(--hair); }

.panel {
  --accent: var(--gold);
  display: block;
  position: relative;
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
  isolation: isolate;
}

.panel__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.panel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 45%);
  filter: saturate(.72) contrast(1.05) brightness(.42);
  transform: scale(1.08) translateY(var(--py, 0px));
  transition: filter .7s var(--ease), transform 1.2s var(--ease-out);
}
.panel:hover .panel__media img,
.panel:focus-visible .panel__media img {
  filter: saturate(.92) contrast(1.05) brightness(.56);
  transform: scale(1.02) translateY(var(--py, 0px));
}
.panel__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.62) 0%, rgba(10,9,8,.2) 40%, rgba(10,9,8,.86) 100%);
}

.panel__in {
  position: relative;
  min-height: clamp(420px, 74vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.3rem, 3.4vw, 3rem) var(--edge) clamp(1.3rem, 3vw, 2.4rem);
  gap: clamp(1rem, 2.6vw, 1.8rem);
}

.panel__top {
  position: absolute;
  top: clamp(1.1rem, 3vw, 2.2rem);
  left: var(--edge);
  right: var(--edge);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.panel__idx { color: var(--accent); font-weight: 700; }

.panel__title {
  font-size: var(--t-mega);
  font-stretch: 76%;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.042em;
  text-transform: uppercase;
  transition: color .4s var(--ease);
}
.panel:hover .panel__title { color: var(--accent); }

.panel__sub {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}

.panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  align-items: end;
  border-top: 1px solid var(--hair);
  padding-top: clamp(.9rem, 2vw, 1.3rem);
}
@media (max-width: 860px) { .panel__body { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

.panel__log {
  color: var(--bone-2);
  max-width: 52ch;
  margin: 0;
  font-size: var(--t-sm);
}

.panel__go {
  justify-self: end;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  white-space: nowrap;
}
.panel__go i {
  display: block; width: 28px; height: 1px;
  background: var(--accent);
  transition: width .4s var(--ease-out);
}
.panel:hover .panel__go i { width: 58px; }
@media (max-width: 860px) { .panel__go { justify-self: start; } }

/* frame strip along the bottom edge, advances on hover */
.panel__strip {
  position: absolute;
  right: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 6px;
  width: clamp(96px, 12vw, 168px);
  z-index: -1;
  opacity: 0;
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}
.panel:hover .panel__strip,
.panel:focus-visible .panel__strip { opacity: 1; transform: translateY(-50%) translateX(-10px); }
@media (max-width: 1180px) { .panel__strip { display: none; } }

.panel__strip img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(239,234,224,.16);
  filter: saturate(.8) brightness(.9);
}

/* ---------- 11. Capabilities -------------------------------------------- */

.caps { border-top: 1px solid var(--hair); }

.cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--hair);
  position: relative;
  transition: padding-left .45s var(--ease-out);
}
@media (max-width: 860px) { .cap { grid-template-columns: minmax(0, 1fr); gap: .5rem; } }

.cap::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width .45s var(--ease-out);
}
.cap:hover { padding-left: clamp(.8rem, 2vw, 1.6rem); }
.cap:hover::before { width: 3px; }
.cap:hover .cap__t { color: var(--accent); }

.cap__t {
  font-size: clamp(1.3rem, 3.6vw, 2.6rem);
  font-stretch: 80%;
  font-weight: 780;
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
  transition: color .35s var(--ease);
  margin: 0;
}
.cap__d { color: var(--bone-3); font-size: var(--t-sm); margin: 0; max-width: 56ch; }

/* ---------- 12. Inverted band ------------------------------------------- */

.band {
  background: var(--bone);
  color: var(--void);
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
}
/* De-emphasis via colour, never opacity: the reveal system sets
   `.js [data-rise][data-in] { opacity: 1 }`, which out-specifies any opacity
   set here — so an opacity-based dim would render differently with and
   without JS, and the dimmed variant failed contrast besides. */
.band .eyebrow { color: rgba(10,9,8,.72); }
.band .eyebrow i { background: rgba(10,9,8,.22); }
.band .eyebrow b { color: var(--flare-ink); }
.band .lede, .band .copy { color: rgba(10,9,8,.78); }
.band .copy strong, .band .lede { color: var(--void); }
.band ::selection { background: var(--void); color: var(--bone); }

.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .band__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }

/* Two-column split used inside sections.
   This began as four separate inline styles on the grids. An inline
   grid-template-columns cannot be overridden by a media query in the
   stylesheet, so none of the four ever collapsed — on a 320px phone the copy
   column measured 131px, about 16 characters per line, in a design where every
   other grid stacks. The ratio stays declarative via --split; the collapse
   lives here, at the same 900px the rest of the site uses. */
.split {
  display: grid;
  grid-template-columns: var(--split, minmax(0, 1.15fr) minmax(0, 1fr));
  gap: clamp(1.4rem, 5vw, 5rem);
  align-items: var(--split-align, start);
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}

.band__h {
  font-size: var(--t-xxl);
  font-stretch: 80%;
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.036em;
  text-transform: uppercase;
  color: var(--void);
}

/* a bordered statement list — works on dark by default, inverted inside .band */
.slips { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.slip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: baseline;
  padding-block: 1rem;
  border-bottom: 1px solid var(--hair);
}
.slip b {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--flare);
  font-weight: 700;
}
.slip span { color: var(--bone-2); font-size: var(--t-sm); }
.slip a { color: inherit; }

.band .slips { border-top-color: rgba(10,9,8,.18); }
.band .slip { border-bottom-color: rgba(10,9,8,.18); }
.band .slip span { color: rgba(10,9,8,.78); }
.band .slip b { color: var(--flare-ink); }
.band .copy a, .band .lede a { color: var(--flare-ink); }
.band .cap { border-bottom-color: rgba(10,9,8,.18); }
.band .cap::before { background: var(--flare-ink); }
.band .cap:hover .cap__t { color: var(--flare-ink); }
.band .cap__d { color: rgba(10,9,8,.72); }
.band .cap__t { color: var(--void); }

/* ---------- 13. Buttons -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.5rem;
  border: 1px solid var(--line-ui);
  color: var(--bone);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--flare);
  transform: translateY(101%);
  transition: transform .42s var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: #fff; border-color: var(--flare); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }

.btn--solid { background: var(--bone); color: var(--void); border-color: var(--bone); }
.btn--solid:hover, .btn--solid:focus-visible { color: #fff; }

.btn--big { padding: 1.15rem 1.9rem; font-size: .78rem; }

/* Arrows drawn as SVG rather than typed as → and ↗. Neither webfont has those
   code points, so they came from a system fallback — thin, differently
   weighted, and sitting on a different baseline on every platform. These
   inherit currentColor so they follow the button's hover colour, and the
   stroke weight is ours to set. Both variants nudge on hover in the direction
   they point. */
.btn__mark {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}
.btn:hover .btn__mark--ne, .btn:focus-visible .btn__mark--ne { transform: translate(2px, -2px); }
.btn:hover .btn__mark--r, .btn:focus-visible .btn__mark--r { transform: translateX(3px); }

.band .btn { border-color: rgba(10,9,8,.3); color: var(--void); }
.band .btn:hover { color: #fff; border-color: var(--flare); }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- 14. Contact -------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }

.mail {
  display: block;
  font-family: var(--display);
  font-weight: 750;
  font-stretch: 80%;
  font-size: clamp(1.35rem, 4.6vw, 3.6rem);
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  padding-block: clamp(.8rem, 2vw, 1.3rem);
  border-block: 1px solid var(--hair);
  word-break: break-word;
  position: relative;
  transition: color .35s var(--ease), padding-left .45s var(--ease-out);
}
.mail:hover { color: var(--flare); padding-left: clamp(.6rem, 2vw, 1.4rem); }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: .4rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--void-2);
  border: 1px solid var(--line-ui);
  color: var(--bone);
  font-family: var(--display);
  font-size: var(--t-body);
  padding: .8rem .9rem;
  transition: border-color .25s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--flare);
}
.field input::placeholder, .field textarea::placeholder { color: #5c554d; }

.note {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-top: .9rem;
  line-height: 1.6;
}

/* ---------- 15. Footer --------------------------------------------------- */

.foot {
  border-top: 1px solid var(--hair);
  padding-block: clamp(2rem, 5vw, 3.4rem) 1.3rem;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 720px) { .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 460px) { .foot__grid { grid-template-columns: minmax(0, 1fr); } }

.foot__mark {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .95;
  margin-bottom: .7rem;
}
.foot__h {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-3);
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: .8rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .45rem; }
.foot a {
  text-decoration: none;
  color: var(--bone-2);
  font-size: var(--t-sm);
  transition: color .22s var(--ease);
}
.foot a:hover { color: var(--flare); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  padding-top: 1.1rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.foot__base .end { margin-left: auto; }

/* ---------- 16. Film page pieces ---------------------------------------- */

.fmast {
  position: relative;
  min-height: clamp(72vh, 86vh, 100vh);
  min-height: clamp(72svh, 86svh, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: clamp(1.4rem, 4vw, 2.8rem);
  overflow: hidden;
  isolation: isolate;
}
.fmast__plate { position: absolute; inset: 0; z-index: -2; }
.fmast__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 42%);
  filter: saturate(.78) contrast(1.06) brightness(.46);
  transform: scale(1.05) translateY(var(--py, 0px));
}
.fmast__plate::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,.82) 0%, rgba(10,9,8,.14) 34%, rgba(10,9,8,.8) 76%, var(--void) 100%);
}
.fmast__t {
  font-size: var(--t-mega);
  font-stretch: 76%;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.042em;
  margin-bottom: 1rem;
}
.fmast__sub {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.facts > div { background: var(--void); padding: 1rem clamp(.8rem, 1.8vw, 1.4rem); }
.facts dt {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: .4rem;
}
.facts dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--bone);
}

/* frame wall — irregular by design: spans and ratios are assigned per frame
   so rows break unevenly and the eye has to travel */
.wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: clamp(.35rem, .8vw, .7rem);
}
.wall figure {
  margin: 0;
  overflow: hidden;
  position: relative;
  background: var(--void-2);
}
.wall img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.84) contrast(1.04) brightness(.82);
  transition: filter .5s var(--ease), transform 1.1s var(--ease-out);
}
.wall figure:hover img { filter: none; transform: scale(1.04); }
.wall figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: .55rem .7rem;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-2);
  background: linear-gradient(0deg, rgba(10,9,8,.92), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.wall figure:hover figcaption,
.wall figure:focus-within figcaption { opacity: 1; transform: none; }

/* column spans */
.wall .s3 { grid-column: span 3; }
.wall .s4 { grid-column: span 4; }
.wall .s5 { grid-column: span 5; }
.wall .s6 { grid-column: span 6; }
.wall .s7 { grid-column: span 7; }
.wall .s8 { grid-column: span 8; }

/* frame ratios — mixed so the wall never reads as a uniform grid */
.wall .r-cine { aspect-ratio: 16 / 9; }
.wall .r-wide { aspect-ratio: 21 / 9; }
.wall .r-soft { aspect-ratio: 3 / 2; }

@media (max-width: 900px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall .s5, .wall .s6, .wall .s7, .wall .s8 { grid-column: span 4; }
  .wall .s3, .wall .s4 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .wall { grid-template-columns: minmax(0, 1fr); }
  .wall .s3, .wall .s4, .wall .s5, .wall .s6, .wall .s7, .wall .s8 { grid-column: span 1; }
}

/* ---------- 17. Player --------------------------------------------------- */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--void-2);
  border: 1px solid var(--line-ui);
  overflow: hidden;
}
.player img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.86) brightness(.66);
  transition: filter .5s var(--ease), transform 1.1s var(--ease-out);
}
.player:hover img { filter: saturate(1) brightness(.8); transform: scale(1.02); }
.player__btn {
  position: absolute; inset: 0;
  width: 100%; border: 0; background: transparent;
  cursor: pointer;
  display: grid; place-content: center; gap: 1rem; justify-items: center;
  color: var(--bone);
}
.player__ring {
  width: 82px; height: 82px;
  border-radius: 50%;
  border: 1px solid var(--bone);
  display: grid; place-items: center;
  background: rgba(10,9,8,.4);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background .3s var(--ease), transform .35s var(--ease-out), color .3s var(--ease);
}
.player__btn:hover .player__ring,
.player__btn:focus-visible .player__ring {
  background: var(--flare); border-color: var(--flare);
  color: #fff; transform: scale(1.07);
}
.player__ring svg { margin-left: 4px; }
.player__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(10,9,8,.6);
  padding: .45rem .75rem;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 18. Next / pager -------------------------------------------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  margin-top: clamp(1.6rem, 4vw, 3rem);
  border-top: 1px solid var(--hair);
}

/* ---------- 19. Notice --------------------------------------------------- */

.notice {
  border-left: 3px solid var(--flare);
  background: var(--void-2);
  padding: 1rem 1.2rem;
  color: var(--bone-2);
  font-size: var(--t-sm);
}
.notice b { color: var(--bone); }

/* ---------- 20. Reveal --------------------------------------------------- */

.js [data-rise] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-rise][data-in] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise] { opacity: 1; transform: none; transition: none; }
  .js .h-mask > span { transform: none; transition: none; }
  .js .hero__h .ln > span { transform: none; transition: none; }
  .grain { animation: none; }
  .ticker__row { animation: none; }
  .hero__plate img { transform: none; transition: none; }
}

@media print {
  .js [data-rise] { opacity: 1 !important; transform: none !important; }
  .grain, .nav, .ticker, .hero__light { display: none !important; }
  body { background: #fff; color: #000; }
}