:root {
  --cinema-black: #070605;
  --aged-cream: #d7bc8d;
  --practical-amber: #e09a43;

  /* Coordinates measured against the active 1920 × 1080 master composition. */
  --enter-left: 11.7%;
  --enter-top: 70.3%;
  --enter-width: 12.05%;
  --enter-height: 5.65%;
  --enter-films-left: 72.45%;
  --enter-films-top: 2.55%;
  --enter-films-width: 4.55%;
  --enter-films-height: 4.25%;
  --enter-about-left: 79.15%;
  --enter-about-top: 2.55%;
  --enter-about-width: 4.45%;
  --enter-about-height: 4.25%;
  --enter-contact-left: 86.05%;
  --enter-contact-top: 2.55%;
  --enter-contact-width: 5.15%;
  --enter-contact-height: 4.25%;
}

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--cinema-black);
}

body {
  color: var(--aged-cream);
  font-family: "Courier New", Courier, monospace;
}

button {
  color: inherit;
  font: inherit;
}

.global-top-nav {
  position: fixed;
  z-index: 80;
  top: 2.4vh;
  right: 2%;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(1.1rem, 2.2vw, 2.2rem);
  align-items: center;
  pointer-events: auto;
}

.global-top-nav button {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(237, 221, 184, 0.82);
  cursor: pointer;
  font: 0.78rem/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0.35rem 1.1rem rgba(0, 0, 0, 0.64);
}

.global-top-nav button:focus-visible {
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 0.28rem;
}

body:not(.is-films) .global-top-nav {
  display: none;
}

body.is-film-fullscreen .global-top-nav,
body.is-film-fullscreen .film-header {
  display: none !important;
  pointer-events: none !important;
}

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

.enter-page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
  overflow: hidden;
  background: #000;
}

@supports (height: 100svh) {
  .enter-page {
    height: 100svh;
  }
}

.hero-video-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--cinema-black);
}

.hero-background-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  object-position: center center;
  transform: none;
}

/*
  This invisible 16:9 artboard uses the same contain calculation as the video.
  The ENTER hit target therefore stays attached to its baked visual label.
*/
.interaction-artboard {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(100vw, 177.777778vh);
  width: min(100vw, 177.777778svh);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.enter-films-visual-patch {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.enter-hit-area {
  position: absolute;
  display: grid;
  place-items: center;
  left: var(--enter-left);
  top: var(--enter-top);
  width: var(--enter-width);
  height: var(--enter-height);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}

.enter-hit-area:focus-visible {
  outline: 0;
  box-shadow: none;
}

.enter-baked-nav-button {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
}

.enter-baked-nav-button:focus-visible {
  outline: 1px solid rgba(215, 188, 141, 0.72);
  outline-offset: 0.18rem;
}

.enter-baked-films-button {
  left: var(--enter-films-left);
  top: var(--enter-films-top);
  width: var(--enter-films-width);
  height: var(--enter-films-height);
  pointer-events: none;
  cursor: default;
}

.enter-baked-about-button {
  left: var(--enter-about-left);
  top: var(--enter-about-top);
  width: var(--enter-about-width);
  height: var(--enter-about-height);
}

.enter-baked-contact-button {
  left: var(--enter-contact-left);
  top: var(--enter-contact-top);
  width: var(--enter-contact-width);
  height: var(--enter-contact-height);
}

.enter-sound-toggle {
  position: absolute;
  left: 14.5%;
  top: 91.1%;
  width: 12%;
  height: 4.5%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.enter-sound-toggle:hover,
.enter-sound-toggle:focus-visible {
  outline: 0;
}

.mobile-enter-label {
  display: none;
}

.channel-switch {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  background: #070605;
  pointer-events: none;
}

.channel-switch__static {
  position: absolute;
  inset: -15%;
  background:
    repeating-linear-gradient(0deg, rgba(215, 188, 141, 0.18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(93deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 52% 48%, rgba(224, 154, 67, 0.34), transparent 24%);
  transform: translate3d(-3%, 1%, 0) scale(1.08);
}

.channel-switch__scan {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  transform: translateY(-50%);
  background: var(--aged-cream);
  box-shadow: 0 0 1rem rgba(255, 220, 165, 0.9);
}

.channel-switch span {
  position: absolute;
  right: 2.5rem;
  top: 2rem;
  color: var(--aged-cream);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.enter-page.is-entering {
  transform: none;
}

.enter-page.is-entering .channel-switch {
  visibility: visible;
  animation: crt-channel-switch 480ms steps(2, end) both;
}

.enter-page.is-entering .channel-switch__static {
  animation: crt-static-jump 120ms steps(2, end) infinite;
}

@keyframes crt-channel-switch {
  0% { clip-path: inset(49.7% 0); }
  18% { clip-path: inset(0); }
  62% { clip-path: inset(0); filter: brightness(1.25); }
  100% { clip-path: inset(49.7% 0); filter: brightness(0.55); }
}

@keyframes crt-static-jump {
  0% { transform: translate3d(-3%, 1%, 0) scale(1.08); }
  50% { transform: translate3d(2%, -2%, 0) scale(1.1); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.09); }
}

/* Post-ENTER film experience. Each approved reference remains a full-viewport scene. */
.film-experience {
  position: fixed;
  z-index: 10;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  overflow: hidden;
  visibility: hidden;
  transform: none;
  background: #000;
  pointer-events: none;
}

body.is-films .film-experience {
  display: block;
  visibility: visible;
  pointer-events: auto;
}

body.is-enter-film-drawer-mounted .film-experience {
  display: block;
  visibility: visible;
  pointer-events: none;
  background: transparent;
}

body.is-enter-film-drawer-mounted .film-header,
body.is-enter-film-drawer-mounted .film-stage {
  visibility: hidden;
  pointer-events: none;
}

body.is-films .enter-page {
  visibility: hidden;
}

.film-stage,
.film-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.film-stage,
.film-page {
  overflow: clip;
}

.film-page {
  z-index: 0;
  visibility: hidden;
  transform: translateY(100%);
  background: #000;
  transition: transform 760ms cubic-bezier(0.72, 0, 0.24, 1);
}

.film-page.is-active {
  z-index: 1;
  visibility: visible;
  transform: translateY(0);
}

.film-page.is-before {
  visibility: visible;
  transform: translateY(-100%);
}

.film-page.is-after {
  visibility: visible;
  transform: translateY(100%);
}

.film-page__background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
}

.tunnel-legacy-nav-mask {
  position: absolute;
  z-index: 3;
  top: 1.2vh;
  right: 1.3vw;
  width: min(26vw, 32rem);
  height: 6.5vh;
  background: radial-gradient(ellipse at 52% 50%, rgba(0, 0, 0, 0.98) 0 52%, rgba(0, 0, 0, 0.78) 70%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.contact-page {
  position: absolute;
  z-index: 0;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  background: #000;
}

.contact-page.is-active {
  z-index: 2;
  visibility: visible;
}

.contact-page__image {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: min(100vw, 150vh);
  height: auto;
  max-height: 100vh;
  object-fit: contain;
  object-position: center center;
  transform: translate(-50%, -50%);
}

.contact-form-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 150vh);
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
}

.contact-field,
.contact-submit {
  position: absolute;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
}

.contact-field {
  padding: 0 1.05%;
  color: var(--aged-cream);
  font: 1.05rem/1.2 Georgia, "Times New Roman", serif;
}

.contact-field::placeholder {
  color: transparent;
}

.contact-field--first { left: 46.35%; top: 19.85%; width: 19.5%; height: 5.65%; }
.contact-field--last { left: 67.75%; top: 19.85%; width: 20.5%; height: 5.65%; }
.contact-field--email { left: 46.35%; top: 32.25%; width: 19.5%; height: 5.65%; }
.contact-field--phone { left: 67.75%; top: 32.25%; width: 20.5%; height: 5.65%; }
.contact-field--website { left: 46.35%; top: 44.15%; width: 41.95%; height: 5.5%; }
.contact-field--message {
  left: 46.35%;
  top: 56%;
  width: 41.95%;
  height: 14.85%;
  padding-top: 1.2%;
  resize: none;
}
.contact-submit {
  left: 46.35%;
  top: 73.55%;
  width: 41.95%;
  height: 6.85%;
  cursor: pointer;
}

.contact-form-status {
  position: absolute;
  left: 46.35%;
  top: 81.05%;
  width: 41.95%;
  margin: 0;
  color: rgba(218, 184, 104, 0.82);
  font: 0.72rem/1.35 Georgia, "Times New Roman", serif;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.contact-credit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 150vh);
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.contact-credit__inner {
  position: absolute;
  left: 13.2%;
  top: 73.1%;
  width: 25.5%;
  color: rgba(218, 184, 104, 0.72);
  font: 0.76rem/1.48 Georgia, "Times New Roman", serif;
  letter-spacing: 0.045em;
  text-align: center;
  text-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.55);
}

.contact-credit__inner p {
  margin: 0;
}

.contact-credit__inner p + p {
  margin-top: 0.18rem;
  color: rgba(226, 218, 196, 0.62);
}

.about-panel {
  position: fixed;
  z-index: 40;
  inset: 0 0 0 auto;
  width: min(100vw, 96rem);
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(6, 5, 4, 0.97);
  border-left: 1px solid rgba(218, 184, 104, 0.36);
  box-shadow: -2rem 0 4rem rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease,
    visibility 0s linear 520ms;
}

.about-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.about-panel__image {
  display: block;
  width: min(92vw, 90rem);
  height: 88vh;
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
}

.about-panel__close {
  position: absolute;
  top: clamp(0.9rem, 2vw, 1.6rem);
  right: clamp(0.9rem, 2vw, 1.6rem);
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(218, 184, 104, 0.48);
  border-radius: 999px;
  background: rgba(10, 8, 6, 0.55);
  color: var(--aged-gold);
  cursor: pointer;
  font: 1.45rem/1 Georgia, "Times New Roman", serif;
}

@media (prefers-reduced-motion: reduce) {
  .about-panel {
    transition: none;
  }
}

/* This approved reference is 3:2; preserve its complete header, rail, and footer composition. */
.film-page[data-film="the-tunnel-of-napkins"] .film-page__background {
  object-fit: contain;
}

.film-page[data-film="the-tunnel-of-napkins"] .tunnel-tv-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.film-artboard {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.film-artboard--wide {
  width: max(100vw, 177.683315vh);
  aspect-ratio: 1672 / 941;
}

.film-artboard--poster {
  width: max(100vw, 149.902344vh);
  aspect-ratio: 1535 / 1024;
}

.tunnel-artboard {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(100vw, 150vh);
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tunnel-screen {
  position: absolute;
  left: 25.7%;
  top: 31.2%;
  width: 44.5%;
  height: 46.6%;
  overflow: hidden;
  visibility: hidden;
  border-radius: 13% / 11%;
  clip-path: polygon(3% 2%, 97% 2%, 99% 7%, 99% 93%, 97% 98%, 3% 98%, 1% 93%, 1% 7%);
  background: #090806;
  box-shadow: inset 0 0 3rem rgba(7, 6, 5, 0.72);
  pointer-events: none;
}

.tunnel-screen.is-tuning,
.tunnel-screen.is-playing {
  visibility: visible;
}

.tunnel-screen.is-playing {
  pointer-events: auto;
}

.tunnel-screen__video {
  position: absolute;
  left: 50%;
  top: calc(50% + 22px);
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%) scale(1.01);
  filter: none;
}

.tunnel-screen__scanlines {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none !important;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

.tunnel-screen__tuning {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(215, 188, 141, 0.23) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(91deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 8px),
    #0b0a08;
  color: var(--aged-cream);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
}

.tunnel-screen.is-tuning .tunnel-screen__tuning {
  visibility: visible;
  animation: tunnel-channel-lock 480ms steps(2, end) both;
}

.film-projection {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  visibility: hidden;
  background: #070605;
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.76);
  pointer-events: none;
}

.film-projection.is-tuning,
.film-projection.is-playing {
  visibility: visible;
}

.film-projection.is-playing {
  pointer-events: auto;
}

.film-projection__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  object-position: center center;
  filter: none;
}

.film-projection__scanlines {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none !important;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

.film-projection__tuning {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(215, 188, 141, 0.2) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(91deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 8px),
    #0b0a08;
  color: var(--aged-cream);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
}

.film-projection.is-tuning .film-projection__tuning {
  visibility: visible;
  animation: tunnel-channel-lock 480ms steps(2, end) both;
}

.tunnel-screen.is-playing,
.film-projection.is-playing {
  box-shadow: none;
}

.tunnel-screen.is-playing .tunnel-screen__scanlines,
.film-projection.is-playing .film-projection__scanlines {
  display: none;
}

/* Versailles has no separate TV frame; this targets the central cinematic image field and leaves the baked page UI visible. */
.film-projection--versailles {
  left: 38.08%;
  top: -0.67%;
  width: 43%;
  height: 91.4%;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.film-projection--versailles .film-projection__video {
  top: 50%;
  bottom: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center center;
  clip-path: inset(1.1% 0);
  transform: translateY(-50%);
}

.film-projection--versailles .film-fullscreen {
  right: 3.4rem;
  bottom: calc(50% - 28.125% + 4rem);
}

.versailles-golden-frame {
  position: absolute;
  z-index: 4;
  inset: auto auto auto -8%;
  top: 50%;
  display: block;
  width: 116%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: fill;
  object-position: center center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scaleY(1.07);
  transform-origin: center center;
}

.film-projection--versailles.is-tuning .versailles-golden-frame,
.film-projection--versailles.is-playing .versailles-golden-frame {
  opacity: 1;
}

.film-projection--versailles:fullscreen .versailles-golden-frame,
.film-projection--versailles:-webkit-full-screen .versailles-golden-frame {
  display: none;
}

.film-projection--versailles:fullscreen .film-projection__video {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  clip-path: none;
  transform: none;
}

/* The Bite plays inside the central theater projection screen in the approved composition. */
.film-projection--bite {
  left: 33.7%;
  top: 18.65%;
  width: 40.6%;
  height: 40.6%;
  border-radius: 0.35rem;
}

.film-page[data-film="paula"] .film-projection--paula {
  left: 29.05%;
  top: 17.45%;
  width: 51.65%;
  height: 37.9%;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  rotate: none;
  scale: none;
  translate: none;
  clip-path: inset(0) !important;
  overflow: hidden;
}

.film-page[data-film="paula"] .film-projection--paula .film-projection__video {
  inset: -7%;
  width: 114%;
  height: 114%;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.08) !important;
  rotate: none;
  scale: none;
  translate: none;
}

.film-page[data-film="spitfire"] .film-artboard {
  z-index: 3;
}

.film-projection--spitfire {
  left: 24%;
  top: 11.8%;
  width: 59.2%;
  height: 50.3%;
  aspect-ratio: 21 / 9;
  border-radius: 0.08rem;
  background: #050403;
  box-shadow: none;
}

.film-projection--spitfire .film-projection__video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.film-page[data-film="spitfire"] .film-projection.is-tuning {
  visibility: hidden;
}

.film-page[data-film="spitfire"] .film-projection.is-playing {
  visibility: visible;
}

.spitfire-room-dim,
.spitfire-commander-dim {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1100ms cubic-bezier(0.45, 0, 0.2, 1);
}

.spitfire-room-dim {
  background: rgba(4, 3, 2, 0.3);
}

.spitfire-commander-dim {
  background: linear-gradient(
    102deg,
    transparent 54%,
    rgba(4, 3, 2, 0.12) 60%,
    rgba(4, 3, 2, 0.7) 69%,
    rgba(4, 3, 2, 0.82) 76%,
    rgba(4, 3, 2, 0.34) 82%,
    transparent 88%
  );
  transform: translateX(0);
  transition: opacity 1000ms ease-out, transform 1000ms ease-out;
}

.spitfire-commander-dim::after {
  position: absolute;
  right: 14.3%;
  top: 32%;
  width: 7.5%;
  height: 34%;
  content: "";
  opacity: 0;
  background: linear-gradient(108deg, transparent 5%, rgba(4, 3, 2, 0.3) 28%, rgba(4, 3, 2, 0.6) 70%, transparent 96%);
  clip-path: polygon(47% 0, 68% 8%, 76% 25%, 70% 48%, 91% 100%, 38% 100%, 30% 63%, 8% 52%, 32% 31%);
  transform: translateX(-18%) scale(0.96);
  transform-origin: 70% 70%;
  transition: opacity 1000ms ease-out, transform 1000ms ease-out;
}

.film-page[data-film="spitfire"].is-preparing-film .spitfire-room-dim,
.film-page[data-film="spitfire"].is-film-playing .spitfire-room-dim {
  opacity: 1;
}

.film-page[data-film="spitfire"].is-preparing-film .spitfire-commander-dim,
.film-page[data-film="spitfire"].is-film-playing .spitfire-commander-dim {
  opacity: 1;
  transform: translateX(2%);
}

.film-page[data-film="spitfire"].is-preparing-film .spitfire-commander-dim::after,
.film-page[data-film="spitfire"].is-film-playing .spitfire-commander-dim::after {
  opacity: 0.48;
  transform: translateX(18%) scale(0.92);
}

.paula-lamp-dim {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 34%, transparent 0 25%, rgba(7, 6, 5, 0.22) 45%, rgba(7, 6, 5, 0.42) 100%),
    linear-gradient(180deg, rgba(7, 6, 5, 0.36) 0, rgba(7, 6, 5, 0.58) 100%);
  pointer-events: none;
  transition: opacity 620ms cubic-bezier(0.45, 0, 0.2, 1);
}

.film-page[data-film="paula"].is-dimming-lights .paula-lamp-dim,
.film-page[data-film="paula"].is-film-playing .paula-lamp-dim {
  opacity: 0;
}

.film-page[data-film="paula"] .film-page__background,
.film-page[data-film="paula"] .paula-top-overlay {
  transition: filter 620ms cubic-bezier(0.45, 0, 0.2, 1);
}

.film-page[data-film="paula"].is-dimming-lights .film-page__background,
.film-page[data-film="paula"].is-dimming-lights .paula-top-overlay,
.film-page[data-film="paula"].is-film-playing .film-page__background,
.film-page[data-film="paula"].is-film-playing .paula-top-overlay {
  filter: brightness(0.5) contrast(0.96);
}

.paula-top-overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.film-page[data-film="paula"].is-dimming-lights .paula-top-overlay,
.film-page[data-film="paula"].is-film-playing .paula-top-overlay {
  opacity: 1;
}

/* These masks replace baked legacy sidebar text with the current approved channel rail. */
.film-page[data-film="the-bite"]::after,
.film-page[data-film="versailles"]::after,
.film-page[data-film="the-tunnel-of-napkins"]::after,
.film-page[data-film="paula"]::after,
.film-page[data-film="spitfire"]::after {
  position: absolute;
  z-index: 11;
  right: 1.65%;
  top: 10.65%;
  width: 14.25%;
  height: 77%;
  content: "";
  background: #070605;
  border: 1px solid rgba(215, 188, 141, 0.14);
  pointer-events: none;
}

.film-page[data-film="the-tunnel-of-napkins"]::after {
  top: 42.8%;
  width: 18.4%;
  height: 49%;
}

/* Small metadata corrections over baked reference art. These are local masks, not new layout elements. */
.film-page[data-film="the-tunnel-of-napkins"]::before,
.film-page[data-film="paula"]::before {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  content: "2026";
  color: rgba(215, 188, 141, 0.9);
  background: rgba(8, 6, 5, 0.94);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.48rem, 0.68vw, 0.66rem);
  line-height: 1;
  letter-spacing: 0.12em;
  pointer-events: none;
}

.film-page[data-film="the-tunnel-of-napkins"]::before {
  display: none;
  content: none;
}

.film-page[data-film="the-bite"]::before {
  content: none;
  display: none;
}

.film-page[data-film="paula"]::before {
  content: none;
}

.film-page[data-film="paula"] .film-artboard::after {
  content: none;
}

@keyframes tunnel-channel-lock {
  0% { clip-path: inset(48% 0); transform: translateX(-2%); filter: brightness(1.8); }
  22% { clip-path: inset(0); transform: translateX(1.5%); }
  58% { clip-path: inset(8% 0 4%); transform: translateX(-1%); filter: brightness(1.15); }
  82% { clip-path: inset(0); transform: translateX(0.4%); }
  100% { clip-path: inset(49.5% 0); transform: translateX(0); filter: brightness(0.7); }
}

.tunnel-artboard .film-action--play {
  left: -6.85%;
  top: 71.8%;
  width: 13.6%;
  height: 6.15%;
}

.tunnel-artboard .film-action--play[data-tunnel-play-disabled] {
  display: none;
  pointer-events: none;
}

.tunnel-artboard .tunnel-play-hotspot {
  left: -6.85%;
  top: 71.8%;
  width: 13.6%;
  height: 6.15%;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
}

.tunnel-artboard .film-action--play::before,
.tunnel-artboard .film-action--play::after {
  content: none;
}

@keyframes play-control-jitter {
  0%, 100% { transform: translate(0); filter: brightness(1); }
  32% { transform: translate(0.4px, -0.3px); filter: brightness(1.12); }
  68% { transform: translate(-0.35px, 0.25px); filter: brightness(0.96); }
}

.film-action--mobile-play {
  display: none;
}

.film-page__mobile-copy {
  display: none;
}

.film-header {
  display: none;
}

.film-header > button,
.film-header nav,
.film-header nav button {
  position: absolute;
}

.film-header > button {
  left: 2%;
  top: 2.5vh;
  width: 19%;
  height: 5vh;
}

.film-header nav {
  top: 2.4vh;
  right: 2%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 18%;
  height: 5vh;
}

.film-header nav button {
  position: relative;
}

.film-header button,
.film-action,
.film-switcher button {
  border: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
}

body.is-films .film-header button,
body.is-films .film-action,
body.is-films .film-switcher button {
  pointer-events: auto;
}

body.is-enter-film-drawer-mounted .film-switcher,
body.is-enter-film-drawer-mounted .film-switcher button {
  pointer-events: auto;
}

body.is-films [data-play-film] {
  cursor: pointer;
  pointer-events: auto;
}

.film-header > button:focus-visible,
.film-action:focus-visible,
.film-switcher button:focus-visible {
  outline: 1px solid var(--aged-cream);
  outline-offset: -2px;
  box-shadow: 0 0 1rem rgba(224, 154, 67, 0.36);
}

.film-header nav button:focus-visible {
  outline: 0;
  box-shadow: none;
}

.film-action--play:focus-visible {
  outline: 0;
  box-shadow: none;
}

.film-action {
  position: absolute;
  z-index: 3;
}

.film-action--play {
  left: 2%;
  top: 70%;
  width: 16%;
  height: 9%;
  border: 0;
  outline: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.film-page[data-film="versailles"] .film-action--play {
  left: 3.15%;
  top: 80.05%;
  width: 14.85%;
  height: 6.25%;
}

.film-page[data-film="the-bite"] .film-action--play {
  left: 2.02%;
  top: 74.25%;
  width: 12.5%;
  height: 5.95%;
}

.film-page[data-film="paula"] .film-action--play {
  left: 2.65%;
  top: 70.4%;
  width: 16.05%;
  height: 6.88%;
}

.film-page[data-film="spitfire"] .film-action--play {
  left: 1.8%;
  top: 78.7%;
  width: 14.85%;
  height: 7.9%;
}

.film-action--play:hover,
.film-action--play:focus-visible {
  outline: 0;
  box-shadow: none;
  animation: none;
}

.film-action--previous {
  left: 1.5%;
  bottom: 0;
  width: 16%;
  height: 8%;
}

.film-page[data-film="versailles"] .film-action--previous,
.film-page[data-film="spitfire"] .film-action--previous {
  pointer-events: none;
  cursor: default;
}

.film-action--next {
  right: 1.5%;
  bottom: 0;
  width: 16%;
  height: 8%;
}

.film-action--explore {
  left: 40%;
  bottom: 0;
  width: 20%;
  height: 8%;
}

.film-switcher {
  position: fixed;
  z-index: 15;
  top: 10.8%;
  right: 1.85%;
  display: grid;
  width: 13.85%;
  height: 76.8%;
  grid-template-rows: repeat(6, minmax(0, 1fr)) 4.6rem;
  border: 1px solid rgba(215, 188, 141, 0.2);
  background: #070605;
  overflow: hidden;
  transform: translateX(118%);
  pointer-events: none;
  transition: transform 520ms cubic-bezier(0.72, 0, 0.24, 1);
}

body.is-films .film-switcher,
body.is-enter-film-drawer-open .film-switcher {
  transform: translateX(0);
}

body.is-contact .film-switcher {
  transform: translateX(118%);
}

body.is-contact.is-contact-sidebar-revealed .film-switcher {
  transform: translateX(0);
}

.film-switcher button {
  position: relative;
  width: 100%;
  padding: clamp(0.55rem, 1vw, 1rem);
  border: 0;
  border-bottom: 1px solid rgba(215, 188, 141, 0.16);
  color: rgba(215, 188, 141, 0.88);
  background: #070605;
  font-size: clamp(0.55rem, 0.74vw, 0.82rem);
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  overflow: hidden;
}

.film-switcher > button {
  isolation: isolate;
}

.film-switcher > button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  background:
    linear-gradient(90deg, #070605 0%, rgba(7, 6, 5, 0.6) 34%, transparent 100%),
    var(--sidebar-image) center / cover no-repeat;
  filter: brightness(1.18) contrast(1.07);
  pointer-events: none;
}

.film-switcher > [data-go-enter] {
  --sidebar-image: url("assets/01-enter-background-poster.jpg");
}

.film-switcher > [data-go-film="the-tunnel-of-napkins"] {
  --sidebar-image: url("assets/runtime-references/02-the-tunnel-of-napkins.jpeg");
}

.film-switcher > [data-go-film="versailles"] {
  --sidebar-image: url("assets/runtime-references/03-versailles.png");
}

.film-switcher > [data-go-film="the-bite"] {
  --sidebar-image: url("assets/runtime-references/04-the-bite.png");
}

.film-switcher > [data-go-film="paula"] {
  --sidebar-image: url("assets/images/05-paula.png");
}

.film-switcher > [data-go-film="spitfire"] {
  --sidebar-image: url("assets/images/06-I-used-to-be-a-Spitfire-pilot.png");
}

.film-switcher > [data-go-contact] {
  --sidebar-image: url("assets/images/contact-sidebar.png");
}

.film-disclaimer {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(4, 3, 2, 0.76);
  opacity: 0;
  pointer-events: none;
}

.film-disclaimer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.film-disclaimer__panel {
  position: relative;
  width: min(44rem, 92vw);
  padding: clamp(2rem, 4vw, 3.2rem);
  border: 1px solid rgba(215, 188, 141, 0.72);
  color: var(--aged-cream);
  background: rgba(8, 7, 6, 0.96);
  box-shadow: 0 0 2.8rem rgba(224, 154, 67, 0.22);
  text-align: center;
}

.film-disclaimer__close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  border: 0;
  color: rgba(215, 188, 141, 0.86);
  background: transparent;
  font-size: 1.45rem;
  cursor: pointer;
}

.film-disclaimer h2 {
  margin: 0;
  color: var(--aged-cream);
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(2.15rem, 4.4vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.film-disclaimer__divider {
  width: 7rem;
  height: 1px;
  margin: 1.25rem auto;
  background: rgba(224, 154, 67, 0.72);
}

.film-disclaimer p {
  max-width: 34rem;
  margin: 0.85rem auto 0;
  font-size: clamp(0.95rem, 1.35vw, 1.12rem);
  line-height: 1.55;
}

.film-disclaimer__lead {
  color: var(--practical-amber);
}

.film-disclaimer__play {
  width: min(28rem, 100%);
  margin-top: 1.8rem;
  border: 0;
  padding: 0.95rem 1.2rem;
  color: #090705;
  background: var(--practical-amber);
  font: inherit;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}

.film-switcher span {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--practical-amber);
}

.film-switcher button:hover,
.film-switcher button:focus-visible,
.film-switcher button[aria-current="page"] {
  color: var(--aged-cream);
  outline: 1px solid rgba(224, 154, 67, 0.82);
  outline-offset: -1px;
  box-shadow: inset 0 0 1rem rgba(224, 154, 67, 0.12), 0 0 0.9rem rgba(224, 154, 67, 0.15);
}

.film-switcher__arrows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 0;
}

.film-switcher__arrows button {
  display: grid;
  place-items: center;
  padding: 0;
  border-bottom: 0;
  border-inline-end: 1px solid rgba(215, 188, 141, 0.16);
  font-size: 1.1rem;
  text-align: center;
}

.film-switcher__arrows button:last-child {
  border-inline-end: 0;
}

.film-custom-controls {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 2rem;
  width: calc(100% - 4rem);
  display: grid;
  grid-template-columns: auto auto minmax(4rem, 1fr) auto auto;
  align-items: center;
  gap: clamp(0.45rem, 1vw, 0.85rem);
  padding: 0.48rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(8, 7, 6, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0.55rem 1.6rem rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translate(-50%, 0.45rem);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  user-select: none;
}

.film-projection--versailles .film-custom-controls {
  bottom: calc(50% - 28.125% + 4rem);
  width: calc(100% - 8.75rem);
  z-index: 9;
}

.tunnel-screen.is-playing .film-custom-controls.is-visible,
.film-projection.is-playing .film-custom-controls.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.film-control {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  font: 700 0.86rem/1 "Courier New", Courier, monospace;
  cursor: pointer;
}

.film-control:hover,
.film-control:focus-visible {
  border-color: var(--practical-amber);
  outline: 0;
}

.film-control-timeline {
  --film-progress: 0%;
  width: 100%;
  height: 0.28rem;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  background: linear-gradient(90deg, var(--practical-amber) 0 var(--film-progress), rgba(255, 255, 255, 0.28) var(--film-progress) 100%);
}

.film-control-timeline::-webkit-slider-thumb {
  width: 0.8rem;
  height: 0.8rem;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--practical-amber);
  box-shadow: 0 0 0.65rem rgba(224, 154, 67, 0.55);
}

.film-control-timeline::-moz-range-thumb {
  width: 0.8rem;
  height: 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--practical-amber);
  box-shadow: 0 0 0.65rem rgba(224, 154, 67, 0.55);
}

.film-control-time {
  min-width: 5.8rem;
  color: rgba(255, 255, 255, 0.86);
  font: 700 0.68rem/1 "Courier New", Courier, monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.film-fullscreen {
  display: none !important;
  position: absolute;
  z-index: 4;
  right: 0.65rem;
  bottom: 0.65rem;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid rgba(215, 188, 141, 0.44);
  border-radius: 999px;
  color: var(--aged-cream);
  background: rgba(7, 6, 5, 0.62);
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transition: opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.tunnel-screen.is-playing:hover .film-fullscreen,
.film-projection.is-playing:hover .film-fullscreen,
.film-fullscreen:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.film-fullscreen:hover,
.film-fullscreen:focus-visible {
  border-color: var(--practical-amber);
  outline: 0;
  box-shadow: 0 0 1rem rgba(224, 154, 67, 0.25);
}

.tunnel-screen:fullscreen,
.film-projection:fullscreen {
  inset: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  clip-path: none;
  background: #000;
}

.tunnel-screen:fullscreen .tunnel-screen__video,
.film-projection:fullscreen .film-projection__video {
  object-fit: contain;
}

.tunnel-screen:fullscreen .film-custom-controls,
.film-projection:fullscreen .film-custom-controls {
  left: 50%;
  bottom: 36px;
  width: min(92%, 1200px);
  transform: translate(-50%, 0.45rem);
}

.tunnel-screen:fullscreen .film-custom-controls.is-visible,
.film-projection:fullscreen .film-custom-controls.is-visible {
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  .film-page[data-film="the-tunnel-of-napkins"]::before,
  .film-page[data-film="the-bite"]::before,
  .film-page[data-film="paula"]::before,
  .film-page[data-film="paula"] .film-artboard::after {
    display: none;
  }

  .film-page::after,
  .film-page[data-film="the-bite"]::after,
  .film-page[data-film="versailles"]::after,
  .film-page[data-film="the-tunnel-of-napkins"]::after,
  .film-page[data-film="paula"]::after,
  .film-page[data-film="spitfire"]::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
    content: "";
    background: linear-gradient(180deg, rgba(7, 6, 5, 0.1) 28%, rgba(7, 6, 5, 0.88) 72%, #070605 100%);
    border: 0;
    pointer-events: none;
  }

  .film-page__background {
    object-position: center center;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-page__background {
    object-fit: cover;
  }

  .tunnel-artboard {
    width: max(100vw, 150vh);
  }

  .tunnel-artboard .film-action--play {
    display: none;
  }

  .film-page__mobile-copy {
    position: absolute;
    z-index: 4;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 8.5rem;
    display: block;
    max-width: 31rem;
    text-shadow: 0 2px 1rem #000;
  }

  .film-page__mobile-copy h2 {
    max-width: 11ch;
    margin: 0.25rem 0 0.7rem;
    color: var(--aged-cream);
    font-family: Impact, "Arial Narrow", sans-serif;
    font-size: clamp(2.7rem, 13vw, 4.4rem);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .film-page__mobile-copy p {
    max-width: 36ch;
    margin: 0.65rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .film-action--mobile-play {
    display: inline-grid;
    place-items: center;
    width: 8rem;
    height: 2.9rem;
    margin-top: 0.85rem;
    border: 1px solid rgba(215, 188, 141, 0.52);
    color: var(--aged-cream);
    background: rgba(7, 6, 5, 0.68);
    font: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .film-action--mobile-play:hover,
  .film-action--mobile-play:focus-visible {
    border-color: var(--practical-amber);
    box-shadow: inset 0 0 1rem rgba(224, 154, 67, 0.12), 0 0 0.8rem rgba(224, 154, 67, 0.2);
  }

  .film-page__number,
  .film-page__category {
    color: var(--practical-amber);
    font-size: 0.74rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .film-header {
    height: 4.25rem;
    padding: 0 1.1rem;
    background: linear-gradient(180deg, rgba(7, 6, 5, 0.82), transparent);
  }

  .film-header > button {
    left: 1.1rem;
    top: 0.8rem;
    width: auto;
    height: 2.5rem;
    color: var(--aged-cream);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .film-header nav {
    top: 0.8rem;
    right: 0.7rem;
    display: flex;
    width: auto;
    height: 2.5rem;
  }

  .film-header nav button {
    width: 3.2rem;
    color: var(--aged-cream);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .film-action {
    z-index: 5;
    top: auto;
    bottom: 5.2rem;
    height: 2.9rem;
    border: 1px solid rgba(215, 188, 141, 0.52);
    color: var(--aged-cream);
    background: rgba(7, 6, 5, 0.68);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .film-action--play {
    left: 1.25rem;
    width: 8rem;
    border: 0;
    color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .film-action--previous,
  .film-action--explore,
  .film-action--next {
    display: none;
  }

  .film-switcher {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    width: 100%;
    height: 4.2rem;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    border-top: 1px solid rgba(215, 188, 141, 0.26);
    background: rgba(7, 6, 5, 0.96);
  }

  .film-switcher button {
    padding: 0.45rem;
    border-inline-end: 1px solid rgba(215, 188, 141, 0.16);
    color: rgba(215, 188, 141, 0.72);
    font-size: 0.54rem;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
  }

  .film-switcher button[aria-current="page"] {
    color: var(--aged-cream);
    box-shadow: inset 0 2px var(--practical-amber);
  }

  .film-switcher span {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--practical-amber);
  }

  .film-switcher__arrows {
    display: none;
  }

  .film-fullscreen {
    right: 0.5rem;
    bottom: 0.5rem;
    width: 2rem;
    height: 2rem;
  }
}

/* The baked ENTER label can leave a portrait cover crop, so retain an accessible visual control. */
@media (max-aspect-ratio: 3 / 4) {
  .interaction-artboard {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
  }

  .enter-hit-area {
    left: 1.25rem;
    top: auto;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    width: 10rem;
    height: 3.25rem;
    border: 1px solid rgba(224, 154, 67, 0.24);
    color: var(--aged-cream);
    background: linear-gradient(90deg, rgba(89, 9, 4, 0.88), rgba(114, 18, 7, 0.56));
    box-shadow: inset 0 0 1rem rgba(224, 82, 17, 0.12), 0 0 1rem rgba(224, 82, 17, 0.12);
  }

  .mobile-enter-label {
    display: inline;
    font-size: 0.88rem;
    letter-spacing: 0.22em;
    text-shadow: 0 0 0.6rem rgba(255, 176, 75, 0.62);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-background-video {
    visibility: hidden;
  }

  .hero-video-layer {
    background: var(--cinema-black) url("assets/01-enter-background-poster.jpg") center center / cover no-repeat;
  }

  .film-experience,
  .film-page {
    transition: none;
  }

  .enter-page.is-entering .channel-switch {
    animation: none;
    visibility: hidden;
  }
}