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

  /* Coordinates measured against the active 1920 × 1080 master composition. */
  --enter-left: 14.1%;
  --enter-top: 67.8%;
  --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;
}

.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;
}

.hero-mobile-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  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 (max-width: 760px) {
  .enter-baked-about-button {
    left: 65.8%;
    top: 1.5%;
    width: 10.5%;
    height: 3.5%;
  }

  .enter-baked-contact-button {
    left: 80.5%;
    top: 1.5%;
    width: 12.5%;
    height: 3.5%;
  }

  .global-top-nav {
    z-index: 100;
  }

  .global-top-nav [data-go-contact] {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .enter-sound-toggle {
    z-index: 4;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .about-panel {
    inset: auto 8px;
    top: 50%;
    width: calc(100vw - 16px);
    height: min(calc((100vw - 16px) * 0.6667 + 1.5rem), calc(100dvh - 16px));
    max-width: none;
    padding: 0.75rem;
    overflow: auto;
    transform: translate(100%, -50%);
  }

  .about-panel.is-open {
    transform: translate(0, -50%);
  }

  .about-panel__image {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}

@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-page[data-film="the-tunnel-of-napkins"] .tunnel-mobile-video-overlay {
  display: none;
  pointer-events: 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-video-viewport {
  display: contents;
}

.versailles-player-close {
  display: none;
}

.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;
}

.paula-mobile-video-overlay {
  display: 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 {
  left: 15.55%;
  top: 66.8%;
  width: 4.8%;
  height: 2.1%;
  background: rgba(13, 10, 7, 0.94);
}

.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 (min-width: 761px) and (max-width: 1180px) {
  .film-page .film-action--play,
  .film-page .tunnel-play-hotspot {
    z-index: 6;
    left: calc((100% - 100vw) / 2 + clamp(1.25rem, 4vw, 2.5rem)) !important;
    top: auto !important;
    bottom: clamp(5.8rem, 8vh, 7.25rem) !important;
    width: clamp(9rem, 18vw, 12.5rem) !important;
    height: clamp(3rem, 5.5vw, 3.75rem) !important;
    border: 1px solid rgba(215, 188, 141, 0.52);
    color: var(--aged-cream);
    background: rgba(7, 6, 5, 0.68);
    box-shadow: inset 0 0 1rem rgba(224, 154, 67, 0.12), 0 0 0.8rem rgba(0, 0, 0, 0.36);
    font: inherit;
    font-size: clamp(0.68rem, 1.2vw, 0.82rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: auto;
  }

  .film-page .film-action--play::before,
  .film-page .film-action--play::after {
    display: none;
  }

  .film-page .tunnel-play-hotspot {
    display: grid;
    place-items: center;
  }

  .film-page .tunnel-play-hotspot::after {
    content: "Play film";
  }
}

@media (max-width: 760px) {

  html,
  body {
    width: 100%;
    max-width: 100vw;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-top: 0;
  }

  html {
    scroll-snap-type: none;
  }

  body.is-films .enter-page {
    display: none;
  }

  body.is-films {
    height: 100dvh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .enter-page,
  .film-experience,
  .film-stage,
  .film-page,
  .contact-page {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  body.is-films .film-experience {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 0;
    scroll-snap-type: y mandatory;
    visibility: visible;
    pointer-events: auto;
  }

  .film-stage {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    scroll-snap-type: none;
  }

  .film-page,
  .film-page.is-active,
  .film-page.is-before,
  .film-page.is-after {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    visibility: visible;
    transform: none;
    transition: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .film-page[data-film="the-tunnel-of-napkins"],
  .film-page[data-film="versailles"],
  .film-page[data-film="the-bite"],
  .film-page[data-film="paula"],
  .film-page[data-film="spitfire"] {
    min-height: calc(100vw * 1.7916667);
  }

  .contact-page {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    min-height: calc(100vw * 1.7916667);
    padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);
    overflow: visible;
    visibility: visible;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .contact-page__image {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    background: #070605;
    transform: none;
  }

  .contact-form-overlay {
    left: 8%;
    right: 8%;
    top: 52.2%;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.46rem 0.62rem;
    padding: 0.68rem;
    border: 1px solid rgba(215, 188, 141, 0.48);
    border-radius: 0.18rem;
    background: rgba(7, 6, 5, 0.86);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.45);
    transform: none;
  }

  .contact-field,
  .contact-submit,
  .contact-form-status {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    box-sizing: border-box;
    transform: none;
  }

  .contact-field {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(215, 188, 141, 0.42);
    border-radius: 0;
    color: var(--aged-cream);
    background: rgba(2, 2, 2, 0.42);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .contact-field::placeholder {
    color: rgba(215, 188, 141, 0.58);
  }

  .contact-field--website,
  .contact-field--message,
  .contact-submit,
  .contact-form-status {
    grid-column: 1 / -1;
  }

  .contact-field--message {
    height: 96px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
    resize: none;
  }

  .contact-submit {
    display: grid;
    place-items: center;
    height: 46px;
    border: 1px solid rgba(179, 34, 24, 0.82);
    color: var(--aged-cream);
    background: rgba(138, 12, 16, 0.9);
    font: 700 0.78rem/1 "Courier New", Courier, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .contact-form-status {
    min-height: 1rem;
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .contact-credit {
    display: none;
  }

  .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="spitfire"]::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:
      radial-gradient(circle at 22% 72%, rgba(76, 12, 7, 0.36) 0%, rgba(76, 12, 7, 0) 48%),
      linear-gradient(180deg, rgba(7, 6, 5, 0.16) 18%, rgba(7, 6, 5, 0.58) 54%, rgba(7, 6, 5, 0.95) 82%, #070605 100%);
    border: 0;
    pointer-events: none;
  }

  .film-page__background {
    width: 100%;
    max-width: 100vw;
    object-position: center center;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-page__background,
  .film-page[data-film="versailles"] .film-page__background,
  .film-page[data-film="the-bite"] .film-page__background,
  .film-page[data-film="paula"] .film-page__background,
  .film-page[data-film="spitfire"] .film-page__background {
    object-fit: contain;
    background: #070605;
  }

  .film-page[data-film="the-bite"] {
    min-height: 0;
    aspect-ratio: auto;
  }

  .film-page[data-film="the-bite"] > picture {
    display: block;
    width: 100%;
  }

  .film-page[data-film="the-bite"] .film-page__background {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: initial;
  }

  .film-page[data-film="the-tunnel-of-napkins"]:not(.is-preparing-film):not(.is-film-playing) .tunnel-artboard,
  .film-page[data-film="the-tunnel-of-napkins"]:not(.is-preparing-film):not(.is-film-playing) .tunnel-tv-overlay,
  .film-page[data-film="the-tunnel-of-napkins"]:not(.is-preparing-film):not(.is-film-playing) .tunnel-legacy-nav-mask {
    display: none;
  }

  .film-page[data-film="versailles"]:not(.is-preparing-film):not(.is-film-playing) .film-artboard {
    display: none;
  }

  .film-page[data-film="the-bite"]:not(.is-preparing-film):not(.is-film-playing) .film-artboard {
    display: none;
  }

  .film-page[data-film="paula"]:not(.is-preparing-film):not(.is-film-playing) .film-artboard,
  .film-page[data-film="paula"]:not(.is-preparing-film):not(.is-film-playing) .paula-top-overlay,
  .film-page[data-film="paula"]:not(.is-preparing-film):not(.is-film-playing) .paula-lamp-dim {
    display: none;
  }

  .film-page[data-film="spitfire"]:not(.is-preparing-film):not(.is-film-playing) .film-artboard,
  .film-page[data-film="spitfire"]:not(.is-preparing-film):not(.is-film-playing) .spitfire-room-dim,
  .film-page[data-film="spitfire"]:not(.is-preparing-film):not(.is-film-playing) .spitfire-commander-dim {
    display: none;
  }

  .film-page[data-film="spitfire"].is-preparing-film .spitfire-room-dim,
  .film-page[data-film="spitfire"].is-film-playing .spitfire-room-dim,
  .film-page[data-film="spitfire"].is-preparing-film .spitfire-commander-dim,
  .film-page[data-film="spitfire"].is-film-playing .spitfire-commander-dim,
  .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;
  }

  .film-page:has([data-film-screen].is-tuning) .film-artboard,
  .film-page:has([data-film-screen].is-playing) .film-artboard,
  .film-page[data-film="the-tunnel-of-napkins"]:has([data-film-screen].is-tuning) .tunnel-artboard,
  .film-page[data-film="the-tunnel-of-napkins"]:has([data-film-screen].is-playing) .tunnel-artboard {
    display: block !important;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-preparing-film .tunnel-artboard,
  .film-page[data-film="the-tunnel-of-napkins"].is-film-playing .tunnel-artboard,
  .film-page[data-film="the-tunnel-of-napkins"]:has([data-film-screen].is-tuning) .tunnel-artboard,
  .film-page[data-film="the-tunnel-of-napkins"]:has([data-film-screen].is-playing) .tunnel-artboard,
  .film-page.is-preparing-film .film-artboard,
  .film-page.is-film-playing .film-artboard,
  .film-page:has([data-film-screen].is-tuning) .film-artboard,
  .film-page:has([data-film-screen].is-playing) .film-artboard {
    position: absolute;
    z-index: 7;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
    pointer-events: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-preparing-film .tunnel-tv-overlay,
  .film-page[data-film="the-tunnel-of-napkins"].is-film-playing .tunnel-tv-overlay {
    display: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-preparing-film .tunnel-mobile-video-overlay,
  .film-page[data-film="the-tunnel-of-napkins"].is-film-playing .tunnel-mobile-video-overlay,
  .film-page[data-film="the-tunnel-of-napkins"]:has([data-film-screen].is-tuning) .tunnel-mobile-video-overlay,
  .film-page[data-film="the-tunnel-of-napkins"]:has([data-film-screen].is-playing) .tunnel-mobile-video-overlay {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    user-select: none;
  }

  .film-page[data-film="paula"] .paula-top-overlay {
    display: none !important;
  }

  .paula-mobile-video-overlay {
    display: none;
  }

  .film-page[data-film="paula"].is-preparing-film .paula-mobile-video-overlay,
  .film-page[data-film="paula"].is-film-playing .paula-mobile-video-overlay,
  .film-page[data-film="paula"]:has([data-film-screen].is-playing) .paula-mobile-video-overlay {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    user-select: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .tunnel-screen {
    left: 9.4% !important;
    top: 35.15% !important;
    width: 77% !important;
    height: 29.35% !important;
    border-radius: 8.5% / 10.5%;
    clip-path: polygon(3% 2%, 97% 2%, 99% 7%, 99% 93%, 97% 98%, 3% 98%, 1% 93%, 1% 7%);
  }

  .film-page[data-film="the-tunnel-of-napkins"] .tunnel-screen__video {
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transform: translate(-50%, -50%);
    opacity: 0;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .tunnel-screen.is-video-ready .tunnel-screen__video {
    opacity: 1;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .tunnel-screen.is-playing:not(.is-video-ready) {
    background: transparent;
    box-shadow: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .tunnel-screen.is-playing .tunnel-screen__video {
    pointer-events: auto;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-film-playing [data-play-film],
  .film-page[data-film="the-tunnel-of-napkins"]:has(.tunnel-screen.is-playing) [data-play-film] {
    pointer-events: none !important;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-film-playing .film-page__mobile-copy {
    pointer-events: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-custom-controls--tunnel-mobile {
    z-index: 40;
    left: 9.4%;
    top: calc(64.5% - 3rem);
    bottom: auto;
    width: 77%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    transform: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-custom-controls--tunnel-mobile .film-control-mute,
  .film-page[data-film="the-tunnel-of-napkins"] .film-custom-controls--tunnel-mobile .film-control-time {
    display: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-film-playing .film-custom-controls--tunnel-mobile.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-custom-controls--tunnel-mobile .film-control-fullscreen {
    width: 2.7rem;
    height: 2.7rem;
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(0, 0, 0, 0.82);
    font-size: 1.2rem;
  }

  body.is-tunnel-mobile-fullscreen {
    overflow: hidden;
  }

  body.is-tunnel-mobile-fullscreen .film-experience {
    overflow: hidden;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen {
    z-index: 9999;
    clip-path: none !important;
    overflow: visible !important;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-artboard {
    position: fixed !important;
    z-index: 10000 !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw;
    max-height: 100dvh;
    transform: none !important;
    background: #000;
    pointer-events: auto;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-screen {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    clip-path: none;
    background: #000;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-screen__video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #000;
  }

  .film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-mobile-video-overlay {
    display: none !important;
  }

  body.is-tunnel-mobile-fullscreen .film-page[data-film="the-tunnel-of-napkins"] .film-custom-controls--tunnel-mobile {
    position: absolute;
    z-index: 10001;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    transform: none;
  }

  @media (orientation: portrait) {
    .film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-artboard {
      inset: auto !important;
      top: 50% !important;
      left: 50% !important;
      width: 100dvh !important;
      height: 100vw !important;
      max-width: 100dvh;
      max-height: 100vw;
      transform: translate(-50%, -50%) rotate(90deg) !important;
      transform-origin: center center;
    }
  }

  .tunnel-rotate-prompt {
    position: absolute;
    z-index: 30;
    left: 50%;
    top: 50%;
    padding: 0.45rem 0.65rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.82);
    font-size: 0.62rem;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .tunnel-rotate-prompt.is-visible {
    opacity: 1;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-page__mobile-copy {
    z-index: 30;
  }

  .film-page[data-film="versailles"] .film-projection--versailles {
    left: 0 !important;
    right: 0;
    top: 36.2% !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    height: auto !important;
    aspect-ratio: 5504 / 3072;
    background: transparent;
    overflow: hidden;
    pointer-events: auto;
    transform: none !important;
  }

  .film-page[data-film="versailles"] .film-projection--versailles .versailles-video-viewport {
    position: absolute;
    z-index: 2;
    inset: 12.79% 11.19% 10.71% 11.81%;
    display: block;
    overflow: hidden;
    background: #000;
  }

  .film-page[data-film="versailles"] .film-projection--versailles .film-projection__video {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    clip-path: none;
    object-fit: cover;
    object-position: center center;
    background: #000;
    opacity: 0;
    transform: none;
  }

  .film-page[data-film="versailles"] .film-projection--versailles.is-video-ready .film-projection__video {
    opacity: 1;
  }

  .film-page[data-film="versailles"] .film-projection--versailles .versailles-golden-frame {
    z-index: 4;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: fill;
    transform: none;
    pointer-events: none;
  }

  .film-page[data-film="versailles"].is-film-playing .versailles-player-close {
    display: none;
    pointer-events: none;
  }

  .film-page[data-film="the-bite"] .film-projection--bite {
    left: 25.7% !important;
    top: 22.4% !important;
    width: 60.6% !important;
    height: 19.8% !important;
    border-radius: 0.12rem;
    overflow: hidden;
    background: #000;
    box-sizing: border-box;
  }

  .film-page[data-film="the-bite"] .the-bite-video-viewport .film-projection__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
  }

  .film-page[data-film="paula"] .film-projection--paula {
    left: 3.125% !important;
    top: 44.26% !important;
    width: 94.27% !important;
    height: 28.27% !important;
    overflow: hidden;
    background: #000 !important;
  }

  .film-page[data-film="paula"] .paula-video-viewport .film-projection__video {
    position: absolute;
    left: 0;
    top: -4px;
    display: block;
    width: 100%;
    height: calc(100% + 8px);
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    transform: none !important;
  }

  .film-page[data-film="spitfire"] .film-projection--spitfire {
    left: 0% !important;
    top: 8.5% !important;
    width: 100% !important;
    height: 33.5% !important;
    overflow: hidden;
    background: #000;
  }

  .film-page[data-film="spitfire"] .spitfire-projection-wrapper .film-projection__video {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    display: block;
    object-fit: cover;
    object-position: center center;
    background: #000;
    transform: translateY(-50%) !important;
  }

  .film-page.is-preparing-film .film-action--mobile-play,
  .film-page.is-film-playing .film-action--mobile-play,
  .film-page:has([data-film-screen].is-tuning) .film-action--mobile-play,
  .film-page:has([data-film-screen].is-playing) .film-action--mobile-play {
    display: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-page__mobile-copy,
  .film-page[data-film="versailles"] .film-page__mobile-copy,
  .film-page[data-film="the-bite"] .film-page__mobile-copy,
  .film-page[data-film="paula"] .film-page__mobile-copy,
  .film-page[data-film="spitfire"] .film-page__mobile-copy {
    inset: 0;
    left: 0;
    right: 0;
    bottom: auto;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-shadow: none;
    pointer-events: auto;
    isolation: isolate;
  }

  .film-page[data-film="versailles"] .film-page__mobile-copy {
    z-index: 30;
    pointer-events: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-page__mobile-copy p,
  .film-page[data-film="the-tunnel-of-napkins"] .film-page__mobile-copy h2,
  .film-page[data-film="versailles"] .film-page__mobile-copy p,
  .film-page[data-film="versailles"] .film-page__mobile-copy h2,
  .film-page[data-film="the-bite"] .film-page__mobile-copy p,
  .film-page[data-film="the-bite"] .film-page__mobile-copy h2,
  .film-page[data-film="paula"] .film-page__mobile-copy p,
  .film-page[data-film="paula"] .film-page__mobile-copy h2,
  .film-page[data-film="spitfire"] .film-page__mobile-copy p,
  .film-page[data-film="spitfire"] .film-page__mobile-copy h2 {
    display: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-action--mobile-play,
  .film-page[data-film="versailles"] .film-action--mobile-play,
  .film-page[data-film="the-bite"] .film-action--mobile-play,
  .film-page[data-film="paula"] .film-action--mobile-play,
  .film-page[data-film="spitfire"] .film-action--mobile-play {
    position: absolute;
    display: block;
    z-index: 8;
    left: 50%;
    top: auto;
    bottom: clamp(2.35rem, 7vw, 3.4rem);
    width: min(15.5rem, 64vw);
    height: max(44px, 5.6vw);
    min-height: 44px;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: transparent;
    opacity: 0;
    transform: translateX(-50%);
    touch-action: manipulation;
    pointer-events: auto;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-action--mobile-play {
    left: 34.1%;
    top: 89.1%;
    width: 32.2%;
    height: 5.85%;
    bottom: auto;
    transform: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-page__mobile-copy {
    height: 100%;
    pointer-events: none;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-action--mobile-play {
    pointer-events: auto;
  }

  .film-page[data-film="versailles"] .film-action--mobile-play {
    left: 31.4%;
    top: 48.6%;
    width: 37.2%;
    height: 5.5%;
    bottom: auto;
    transform: none;
    z-index: 31;
    opacity: 0.001;
  }

  .film-page[data-film="versailles"] .film-action--mobile-play[data-play-film] {
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .film-page[data-film="the-bite"] .film-action--mobile-play {
    left: 37.8%;
    top: 70.6%;
    width: 24.5%;
    height: 4.3%;
    bottom: auto;
    transform: none;
  }

  .film-page[data-film="paula"] .film-action--mobile-play {
    left: 5.2%;
    top: 33.1%;
    width: 33.9%;
    height: 5.9%;
    bottom: auto;
    transform: none;
  }

  .film-page[data-film="spitfire"] .film-action--mobile-play {
    left: 30.3%;
    top: 81.8%;
    width: 39.4%;
    height: 5.8%;
    bottom: auto;
    transform: none;
  }

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

  .film-page .film-action--play,
  .film-page .tunnel-play-hotspot,
  .tunnel-artboard .film-action--play {
    display: none !important;
    pointer-events: none;
  }

  .film-page__mobile-copy {
    position: absolute;
    z-index: 6;
    left: 1.25rem;
    right: 1.25rem;
    bottom: max(2rem, env(safe-area-inset-bottom));
    display: block;
    max-width: 30rem;
    padding: 1rem 1rem 1.05rem;
    border-left: 1px solid rgba(224, 154, 67, 0.48);
    background:
      linear-gradient(90deg, rgba(7, 6, 5, 0.82) 0%, rgba(7, 6, 5, 0.6) 68%, rgba(7, 6, 5, 0.16) 100%);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.34);
    text-shadow: 0 2px 1rem #000, 0 0 0.45rem rgba(0, 0, 0, 0.78);
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-page__mobile-copy,
  .film-page[data-film="versailles"] .film-page__mobile-copy,
  .film-page[data-film="the-bite"] .film-page__mobile-copy,
  .film-page[data-film="paula"] .film-page__mobile-copy,
  .film-page[data-film="spitfire"] .film-page__mobile-copy {
    z-index: 8;
    inset: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-shadow: none;
    pointer-events: auto;
    isolation: isolate;
  }

  .film-page[data-film="versailles"] .film-page__mobile-copy {
    z-index: 30;
  }

  .film-page[data-film="the-tunnel-of-napkins"] .film-page__mobile-copy {
    z-index: 30;
  }

  .film-page__mobile-copy h2 {
    max-width: 12ch;
    margin: 0.18rem 0 0.62rem;
    color: var(--aged-cream);
    font-family: Impact, "Arial Narrow", sans-serif;
    font-size: clamp(2.35rem, 11.5vw, 3.85rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .film-page__mobile-copy p {
    max-width: 34ch;
    margin: 0.56rem 0 0;
    font-size: 0.86rem;
    line-height: 1.42;
  }

  .film-action--mobile-play {
    display: inline-grid;
    place-items: center;
    width: 9.6rem;
    min-height: 3.15rem;
    margin-top: 1rem;
    border: 1px solid rgba(215, 188, 141, 0.68);
    color: var(--aged-cream);
    background: linear-gradient(90deg, rgba(92, 18, 10, 0.9), rgba(31, 7, 4, 0.88));
    box-shadow: inset 0 0 1.05rem rgba(224, 154, 67, 0.12), 0 0.8rem 1.7rem rgba(0, 0, 0, 0.32);
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    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 {
    display: none;
    visibility: hidden;
    pointer-events: none;
  }

  .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: 9%;
    width: 10rem;
    height: 2.5rem;
    padding: 0;
    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 (max-width: 760px) {
  .hero-background-video {
    display: none;
  }

  .hero-mobile-video {
    display: block;
    max-width: 100vw;
    object-fit: contain;
    background: #070605;
  }

  .enter-films-visual-patch {
    display: none;
  }
}

body.is-tunnel-mobile-session .film-page[data-film="the-tunnel-of-napkins"].is-film-playing [data-play-film],
body.is-tunnel-mobile-session .film-page[data-film="the-tunnel-of-napkins"]:has(.tunnel-screen.is-playing) [data-play-film] {
  pointer-events: none !important;
}

body.is-spitfire-mobile-session .film-page[data-film="spitfire"] [data-play-film],
body.is-spitfire-mobile-session .film-page[data-film="spitfire"] .film-page__mobile-copy {
  pointer-events: none !important;
}

body.is-spitfire-mobile-session .film-page[data-film="spitfire"] .film-custom-controls--spitfire-mobile {
  z-index: 12;
  left: 4%;
  right: 4%;
  top: auto;
  bottom: 4px;
  width: auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  transform: none;
}

body.is-spitfire-mobile-session .film-custom-controls--spitfire-mobile .film-control-mute,
body.is-spitfire-mobile-session .film-custom-controls--spitfire-mobile .film-control-time {
  display: none;
}

body.is-spitfire-mobile-session .film-page[data-film="spitfire"].is-film-playing .film-custom-controls--spitfire-mobile.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.is-spitfire-mobile-session .film-custom-controls--spitfire-mobile .film-control-play,
body.is-spitfire-mobile-session .film-custom-controls--spitfire-mobile .film-control-fullscreen {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
}

body.is-paula-mobile-session .film-page[data-film="paula"] [data-play-film],
body.is-paula-mobile-session .film-page[data-film="paula"] .film-page__mobile-copy {
  pointer-events: none !important;
}

body.is-paula-mobile-session .film-page[data-film="paula"] .film-custom-controls--paula-mobile {
  position: absolute;
  z-index: 20;
  left: 4%;
  right: 4%;
  top: 66%;
  bottom: auto;
  width: auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  transform: none;
}

body.is-paula-mobile-session .film-custom-controls--paula-mobile .film-control-mute,
body.is-paula-mobile-session .film-custom-controls--paula-mobile .film-control-time {
  display: none;
}

body.is-paula-mobile-session .film-page[data-film="paula"].is-film-playing .film-custom-controls--paula-mobile.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.is-paula-mobile-session .film-custom-controls--paula-mobile .film-control-play,
body.is-paula-mobile-session .film-custom-controls--paula-mobile .film-control-fullscreen {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
}

body.is-bite-mobile-session .film-page[data-film="the-bite"] [data-play-film],
body.is-bite-mobile-session .film-page[data-film="the-bite"] .film-page__mobile-copy {
  pointer-events: none !important;
}

body.is-bite-mobile-session .film-page[data-film="the-bite"] .film-custom-controls--bite-mobile {
  z-index: 12;
  left: 4%;
  right: 4%;
  bottom: 4px;
  width: auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  transform: none;
}

body.is-bite-mobile-session .film-custom-controls--bite-mobile .film-control-mute,
body.is-bite-mobile-session .film-custom-controls--bite-mobile .film-control-time {
  display: none;
}

body.is-bite-mobile-session .film-page[data-film="the-bite"].is-film-playing .film-custom-controls--bite-mobile.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.is-versailles-mobile-session .film-page[data-film="versailles"] [data-play-film] {
  pointer-events: none !important;
}

body.is-versailles-mobile-session .film-page[data-film="versailles"] .film-page__mobile-copy {
  pointer-events: none !important;
}

body.is-versailles-mobile-session .film-page[data-film="versailles"] .film-custom-controls--versailles-mobile {
  z-index: 10;
  left: 4%;
  right: 4%;
  top: auto;
  bottom: 1%;
  width: auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  transform: none;
}

body.is-versailles-mobile-session .film-custom-controls--versailles-mobile .film-control-mute,
body.is-versailles-mobile-session .film-custom-controls--versailles-mobile .film-control-time {
  display: none;
}

body.is-versailles-mobile-session .film-page[data-film="versailles"].is-film-playing .film-custom-controls--versailles-mobile.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.is-spitfire-mobile-fullscreen,
body.is-spitfire-mobile-fullscreen .film-experience {
  overflow: hidden;
}

body.is-spitfire-mobile-fullscreen .global-top-nav {
  display: none !important;
}

.film-page[data-film="spitfire"].is-spitfire-mobile-fullscreen {
  z-index: 9999;
  overflow: visible !important;
}

.film-page[data-film="spitfire"].is-spitfire-mobile-fullscreen .film-artboard--wide {
  position: fixed !important;
  z-index: 10000 !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  transform: none !important;
  background: #000;
  pointer-events: auto;
}

.film-page[data-film="spitfire"].is-spitfire-mobile-fullscreen .film-projection--spitfire,
.film-page[data-film="spitfire"].is-spitfire-mobile-fullscreen .film-projection__video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000;
}

.film-page[data-film="spitfire"].is-spitfire-mobile-fullscreen .film-projection__video {
  object-fit: contain !important;
  transform: none !important;
}

body.is-spitfire-mobile-fullscreen .film-page[data-film="spitfire"] .film-custom-controls--spitfire-mobile {
  position: absolute;
  z-index: 10001;
  left: 12px;
  right: 12px;
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: auto;
  transform: none;
  pointer-events: auto;
}

@media (orientation: portrait) {
  .film-page[data-film="spitfire"].is-spitfire-mobile-fullscreen .film-artboard--wide {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: 100dvh !important;
    height: 100vw !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center;
  }
}

body.is-paula-mobile-fullscreen,
body.is-paula-mobile-fullscreen .film-experience {
  overflow: hidden;
}

body.is-paula-mobile-fullscreen .global-top-nav,
body.is-paula-mobile-fullscreen .paula-mobile-video-overlay {
  display: none !important;
}

.film-page[data-film="paula"].is-paula-mobile-fullscreen {
  z-index: 9999;
  overflow: visible !important;
}

.film-page[data-film="paula"].is-paula-mobile-fullscreen .film-artboard--poster {
  position: fixed !important;
  z-index: 10000 !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  transform: none !important;
  background: #000;
  pointer-events: auto;
}

.film-page[data-film="paula"].is-paula-mobile-fullscreen .film-projection--paula,
.film-page[data-film="paula"].is-paula-mobile-fullscreen .film-projection__video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000;
}

.film-page[data-film="paula"].is-paula-mobile-fullscreen .film-projection__video {
  object-fit: contain !important;
}

body.is-paula-mobile-fullscreen .film-page[data-film="paula"] .film-custom-controls--paula-mobile {
  position: fixed;
  z-index: 10001;
  left: 12px;
  right: 12px;
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: auto;
  transform: none;
  pointer-events: auto;
}

@media (orientation: portrait) {
  .film-page[data-film="paula"].is-paula-mobile-fullscreen .film-artboard--poster {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: 100dvh !important;
    height: 100vw !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center;
  }
}

body.is-bite-mobile-fullscreen,
body.is-bite-mobile-fullscreen .film-experience {
  overflow: hidden;
}

body.is-bite-mobile-fullscreen .global-top-nav {
  display: none !important;
}

.film-page[data-film="the-bite"].is-bite-mobile-fullscreen {
  z-index: 9999;
  overflow: visible !important;
}

.film-page[data-film="the-bite"].is-bite-mobile-fullscreen .film-artboard--wide {
  position: fixed !important;
  z-index: 10000 !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  transform: none !important;
  background: #000;
  pointer-events: auto;
}

.film-page[data-film="the-bite"].is-bite-mobile-fullscreen .film-projection--bite,
.film-page[data-film="the-bite"].is-bite-mobile-fullscreen .film-projection__video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000;
}

.film-page[data-film="the-bite"].is-bite-mobile-fullscreen .film-projection__video {
  object-fit: contain !important;
}

body.is-bite-mobile-fullscreen .film-page[data-film="the-bite"] .film-custom-controls--bite-mobile {
  position: absolute;
  z-index: 10001;
  left: 12px;
  right: 12px;
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: auto;
  transform: none;
  pointer-events: auto;
}

@media (orientation: portrait) {
  .film-page[data-film="the-bite"].is-bite-mobile-fullscreen .film-artboard--wide {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: 100dvh !important;
    height: 100vw !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center;
  }
}

body.is-versailles-mobile-fullscreen,
body.is-versailles-mobile-fullscreen .film-experience {
  overflow: hidden;
}

body.is-versailles-mobile-fullscreen .global-top-nav {
  display: none !important;
  pointer-events: none;
}

.film-page[data-film="versailles"].is-versailles-mobile-fullscreen {
  z-index: 9999;
  clip-path: none !important;
  overflow: visible !important;
}

.film-page[data-film="versailles"].is-versailles-mobile-fullscreen .film-artboard--wide {
  position: fixed !important;
  z-index: 10000 !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw;
  max-height: 100dvh;
  transform: none !important;
  background: #000;
  pointer-events: auto;
}

.film-page[data-film="versailles"].is-versailles-mobile-fullscreen .film-projection--versailles {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000;
}

.film-page[data-film="versailles"].is-versailles-mobile-fullscreen .film-projection__video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000;
}

.film-page[data-film="versailles"].is-versailles-mobile-fullscreen .versailles-video-viewport {
  inset: 0 !important;
}

.film-page[data-film="versailles"].is-versailles-mobile-fullscreen .versailles-golden-frame {
  display: none !important;
}

.film-page[data-film="versailles"].is-versailles-mobile-fullscreen .versailles-player-close {
  display: none !important;
}

body.is-versailles-mobile-fullscreen .film-page[data-film="versailles"] .film-custom-controls--versailles-mobile {
  position: absolute;
  z-index: 10001;
  left: 12px;
  right: 12px;
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: auto;
  transform: none;
  pointer-events: auto;
}

body.is-versailles-mobile-fullscreen .film-custom-controls--versailles-mobile .film-control-fullscreen {
  min-width: 44px;
  min-height: 44px;
}

@media (orientation: portrait) {
  .film-page[data-film="versailles"].is-versailles-mobile-fullscreen .film-artboard--wide {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: 100dvh !important;
    height: 100vw !important;
    max-width: 100dvh;
    max-height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center;
  }
}

body.is-tunnel-mobile-session .film-page[data-film="the-tunnel-of-napkins"] .film-custom-controls--tunnel-mobile {
  z-index: 40;
  left: 9.4%;
  top: calc(64.5% - 3rem);
  bottom: auto;
  width: 77%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  transform: none;
}

body.is-tunnel-mobile-session .film-page[data-film="the-tunnel-of-napkins"].is-film-playing .film-custom-controls--tunnel-mobile.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.is-tunnel-mobile-session .film-custom-controls--tunnel-mobile .film-control {
  pointer-events: auto;
  touch-action: manipulation;
}

body.is-tunnel-mobile-session .film-custom-controls--tunnel-mobile .film-control-timeline {
  pointer-events: auto;
  touch-action: none;
}

body.is-tunnel-mobile-session .film-custom-controls--tunnel-mobile .film-control-mute,
body.is-tunnel-mobile-session .film-custom-controls--tunnel-mobile .film-control-time {
  display: none;
}

body.is-tunnel-mobile-fullscreen,
body.is-tunnel-mobile-fullscreen .film-experience {
  overflow: hidden;
}

body.is-tunnel-mobile-fullscreen .global-top-nav {
  display: none !important;
  pointer-events: none;
}

.film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen {
  z-index: 9999;
  clip-path: none !important;
  overflow: visible !important;
}

.film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-artboard {
  position: fixed !important;
  z-index: 10000 !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw;
  max-height: 100dvh;
  transform: none !important;
  background: #000;
  pointer-events: auto;
}

.film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-screen {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  clip-path: none;
  background: #000;
}

.film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-screen__video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #000;
}

.film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-mobile-video-overlay {
  display: none !important;
}

body.is-tunnel-mobile-fullscreen .film-page[data-film="the-tunnel-of-napkins"] .film-custom-controls--tunnel-mobile {
  position: absolute;
  z-index: 10001;
  left: 12px;
  right: 12px;
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: auto;
  transform: none;
  pointer-events: auto;
}

body.is-tunnel-mobile-fullscreen .film-custom-controls--tunnel-mobile .film-control-fullscreen {
  min-width: 44px;
  min-height: 44px;
}

@media (orientation: portrait) {
  .film-page[data-film="the-tunnel-of-napkins"].is-tunnel-mobile-fullscreen .tunnel-artboard {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: 100dvh !important;
    height: 100vw !important;
    max-width: 100dvh;
    max-height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-background-video,
  .hero-mobile-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;
  }
}