/* Responsive layout and scroll choreography. */
body { isolation: isolate; }
body::before { z-index: -1; pointer-events: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, .team-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img, video { max-width: 100%; }
header { min-height: 100svh; }
.title { bottom: max(48px, env(safe-area-inset-bottom)); padding-inline: 4vw; }
.title h1 { font-size: clamp(20px, 6.3vw, 108px); line-height: 1.15; }
h2 { font-size: clamp(34px, 6vw, 80px); overflow-wrap: break-word; }
.label { letter-spacing: .12em; }
section { padding-block: clamp(48px, 8vw, 110px); }
.logline-block { padding-block: clamp(32px, 6vw, 75px) 16px; }
.logline { font-size: clamp(26px, 4vw, 54px); line-height: 1.23; }
.interlude { padding: 0; border: 0; }
.audience-grid { gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: 20px; overflow: clip; }
.audience figure { min-width: 0; }
.audience figure img { max-height: 420px; width: auto; }
.audience figcaption { flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 0; }
.audience strong { font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.views-title { line-height: 1.2; }
.views-title strong { line-height: 1.16; margin-block: 6px; }
.trailer-screen { padding: 0; }
.player-shell { position: relative; aspect-ratio: 16 / 9; border-radius: 3px; background: #080a09; }
.player-shell video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.watch-button { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; justify-content: center; gap: 12px; min-height: 52px; max-width: 90%; padding: 14px 24px; border: 1px solid #eee8d58c; border-radius: 2px; background: #171e1bd9; color: var(--ink); backdrop-filter: blur(14px); white-space: nowrap; box-shadow: 0 0 65px #cad5c72b; z-index: 3; }
.watch-button:hover { background: #333d32ed; }
.watch-button span { font-size: 25px; line-height: 1; }
.enhanced .watch-button { display: flex; }
.player-shell.is-playing .watch-button, .player-shell.has-started .watch-button { display: none; }
.playback-message { position: absolute; bottom: 44px; left: 5%; width: 90%; text-align: center; color: var(--ink); font-size: 14px; z-index: 4; }
.playback-message:empty { display: none; }
.team-carousel { position: relative;  }
.team-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 2px; }
.team-track::-webkit-scrollbar { display: none; }
.team-slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 70px); scroll-snap-align: start; scroll-snap-stop: always; }
.team-slide > img, .portrait-pending { display: block; width: 100%; height: clamp(280px, 42vw, 480px); object-fit: contain; object-position: center; }
.person { padding: 12px 4px; }
.person h3 { font: clamp(30px, 4.8vw, 64px)/1.12 Georgia, serif; margin: 14px 0 24px; overflow-wrap: break-word; }
.person a { display: inline-block; padding-block: 8px; border-bottom: 1px solid var(--accent); }
.portrait-pending { display: grid; place-items: center; background: radial-gradient(ellipse, #63705a40, transparent 70%); }
.portrait-pending span { font: 90px/1 Georgia, serif; color: #b1bba66b; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 26px; position: relative; z-index: 3; }
.carousel-controls button { width: 50px; height: 50px; border: 1px solid #d4dac05e; background: #20261c88; color: var(--ink); font-size: 24px; }
.carousel-controls button:disabled { opacity: .3; cursor: default; }
.slide-position { font: 13px/1.4 monospace; font-variant-numeric: tabular-nums; color: var(--muted); }
.enhanced .reveal, .enhanced .stat-card { opacity: 0; transition: opacity 1s ease, transform 1.15s cubic-bezier(.22,.61,.36,1); }
.enhanced .reveal { transform: translateY(25px); }
.enhanced .stat-left { transform: translateX(-65px); }
.enhanced .stat-right { transform: translateX(65px); }
.enhanced .is-visible { opacity: 1; transform: none; }
#contact p { max-width: 38ch; line-height: 1.3; }
.contact-actions a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 700px) {
  .team-slide { grid-template-columns: 1fr; gap: 8px; align-content: start; }
  .team-slide > img, .portrait-pending { height: clamp(250px, 80vw, 420px); }
  .person { text-align: center; }
  .person h3 { font-size: clamp(29px, 7vw, 44px); margin: 10px 0 12px; }
  .audience-grid { grid-template-columns: 1fr; gap: 44px; }
  .audience figure img { max-height: 360px; max-width: 90%; }
  .audience strong { font-size: clamp(36px, 10vw, 52px); }
  .views-title { font-size: clamp(25px, 6.5vw, 40px); }
  .views-title strong { font-size: clamp(44px, 12vw, 80px); }
  .watch-button { min-height: 48px; font-size: 14px; padding: 10px 15px; gap: 8px; }
  .contact-actions { flex-direction: column; align-items: stretch; }
  #contact p { font-size: clamp(23px, 5.7vw, 32px); }
  .projects { grid-template-columns: 1fr; gap: 40px; }
  .projects img { max-height: 65svh; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .title { bottom: 28px; }
  .team-slide { grid-template-columns: 1fr 1fr; }
  .team-slide > img, .portrait-pending { height: 65svh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enhanced .reveal, .enhanced .stat-card { opacity: 1; transform: none; transition: none; }
}


.scene, .title { animation: none; opacity: 1; }

/* Images follow the scroll position on entry from either end of the page. */
body { overflow-x: clip; }
.audience-grid { overflow: visible; }
.watch-button { top: 77%; }
.enhanced .scroll-entry { opacity: var(--entry-opacity, 1); transform: translateX(var(--entry-x, 0px)); transition: none; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .enhanced .scroll-entry { opacity: 1; transform: none; will-change: auto; }
}
/* Clip moving images at the viewport edge, keeping the content grid centred. */
.audience, .projects {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(5vw, calc((100vw - 1160px) / 2));
  overflow: clip;
}

:root { --accent: #d7a24d; }
.art-button { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; box-shadow: none; backdrop-filter: none; line-height: 0; filter: drop-shadow(0 6px 10px #0009); transition: filter .2s ease; }
.art-button:hover { background: transparent; filter: drop-shadow(0 4px 15px #d7a24d60) brightness(1.08); }
.art-button img { display: block; width: 100%; height: auto; object-fit: contain; }
.watch-button.art-button { width: clamp(210px, 31vw, 390px); max-width: 82%; min-height: 0; padding: 0; top: 72%; }
.contact-actions { gap: clamp(16px, 3vw, 36px); align-items: center; }
.contact-actions a.art-button { width: min(390px, 100%); min-height: 44px; padding: 0; border: 0; background: transparent; }
.contact-actions a.art-button:first-child, .contact-actions a.art-button:hover { background: transparent; }
.player-ui { display: none; }
.enhanced .custom-player .player-ui { display: block; position: absolute; z-index: 4; bottom: 0; left: 0; width: 100%; padding: 12px 18px 8px; background: linear-gradient(transparent, #060907e8 45%, #060907fa); color: var(--ink); }
.road-seek { height: 45px; position: relative; margin-inline: 10px; }
.road-bed { position: absolute; left: 22px; right: 22px; top: 20px; height: 12px; border-block: 1px solid #b8c2b381; border-radius: 50%; background: linear-gradient(90deg, #9eada33d, transparent 22%, transparent 78%, #9eada34d), #444b40; box-shadow: 0 -6px 16px #b6c6b84a; }
.road-bed::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: repeating-linear-gradient(90deg, #e5d6a9a6 0 12px, transparent 12px 24px); }
.road-progress { position: absolute; left: 0; top: 0; height: 100%; width: var(--played, 0%); background: #d7a24d40; }
.car-marker { position: absolute; z-index: 2; left: var(--played, 0%); bottom: 2px; transform: translateX(-50%); width: 54px; height: 27px; object-fit: contain; max-width: none; filter: drop-shadow(0 2px 3px #000); }
.seek-input { position: absolute; left: 22px; top: 0; width: calc(100% - 44px); height: 45px; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background: transparent; opacity: .001; z-index: 3; }
.seek-input::-webkit-slider-thumb { appearance: none; width: 1px; height: 44px; }
.seek-input::-moz-range-thumb { width: 1px; height: 44px; border: 0; background: transparent; }
.road-seek:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.seek-input:disabled { cursor: wait; }
.player-toolbar { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.player-toolbar button { min-width: 44px; min-height: 44px; border: 0; padding: 6px; background: transparent; color: var(--ink); border-radius: 3px; }
.player-toolbar button:hover { background: #d7a24d26; }
.toggle-play, .toggle-fullscreen { font-size: 25px; }
.player-time { font: 12px/1.3 monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-loading { font-size: 12px; color: var(--accent); }
.audio-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.toggle-mute { font-size: 12px; white-space: nowrap; }
.volume-input { width: 75px; accent-color: var(--accent); }
.player-shell.custom-player { padding-bottom: 95px; aspect-ratio: auto; }
.player-shell.custom-player > video { width: 100%; height: auto; aspect-ratio: 16/9; max-height: none; }
.player-shell.custom-player .watch-button { top: calc((100% - 95px) * .77); }
.player-shell:fullscreen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 0 95px; background: #030503; }
.player-shell:fullscreen > video { width: 100%; height: 100%; object-fit: contain; }
.playback-message { bottom: 100px; background: #080b09cf; }
@media (max-width: 700px) {
  .player-ui { font-size: 12px; }
  .enhanced .custom-player .player-ui { padding: 4px 6px; }
  .player-toolbar { gap: 3px; }
  .player-time { font-size: 10px; }
  .player-loading { display: none; }
  .volume-input { width: 46px; }
  .toggle-mute { font-size: 10px; }
  .car-marker { width: 46px; height: 23px; }
  .contact-actions a.art-button { width: min(370px, 100%); }
}