:root {
  --page: #080a0b;
  --panel: #0d1011;
  --ink: #ecece7;
  --muted: #8d918d;
  --line: rgba(236, 236, 231, 0.18);
  --mono: "DM Mono", monospace;
  --sans: Inter, Arial, sans-serif;
  --display: "Barlow Condensed", Impact, sans-serif;
  --nav-h: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--page); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--page);
  font-family: var(--sans);
  font-weight: 300;
}
body.storyboard-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.film-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 3.2vw;
  color: #e7e7e2;
  background: linear-gradient(to bottom, rgba(8,10,11,.92), rgba(8,10,11,.58) 68%, transparent);
  font: 10px var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.film-nav__name { letter-spacing: .42em; white-space: nowrap; }
.film-nav nav { display: flex; align-items: center; gap: 31px; white-space: nowrap; }
.film-nav nav a { position: relative; opacity: .72; transition: opacity .25s ease; }
.film-nav nav a:hover, .film-nav nav a.is-active { opacity: 1; }
.film-nav nav a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 1px;
  background: currentColor;
}
.film-nav__dot { display: none; }
.film-nav{z-index:30;height:76px;padding:0 4vw;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(3,4,4,.72),transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 11px var(--sans);letter-spacing:.06em}
.film-nav__name{font:500 14px var(--mono);letter-spacing:.32em}
.film-nav nav{gap:40px}
.film-nav nav a{opacity:1;transition:none}
.film-nav nav a::after{content:"";position:absolute;left:0;right:auto;bottom:-5px;width:0;height:1px;background:#fff;transition:width .25s ease}
.film-nav nav a:hover::after,.film-nav nav a.is-active::after{width:100%;bottom:-5px}

.film-backdrop {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 470px;
  overflow: hidden;
  background: #080a0b;
}
.film-backdrop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  opacity: .25;
  filter: grayscale(1) contrast(1.12) brightness(.58);
}
.film-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,10,11,.96) 0%, rgba(8,10,11,.55) 47%, rgba(8,10,11,.82) 100%),
    linear-gradient(0deg, var(--page) 0%, transparent 52%, rgba(8,10,11,.45) 100%);
}

.film-intro, .film-archive, .film-quote, .secondary-about { position: relative; z-index: 2; }
.film-intro {
  width: min(1320px, calc(100% - 9vw));
  min-height: 470px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 26px) 0 46px;
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr) 145px;
  grid-template-rows: 38px 1fr;
  column-gap: 6vw;
  align-items: center;
}
.film-back {
  grid-column: 1 / -1;
  align-self: start;
  color: #9a9d98;
  font: 9px var(--mono);
  letter-spacing: .04em;
  transition: color .25s ease;
}
.film-back:hover { color: var(--ink); }
.film-intro__title > span { font: 9px var(--mono); letter-spacing: .12em; color: #9a9d98; }
.film-intro h1 {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 14px 0 12px;
  font: 600 clamp(88px, 9vw, 142px)/.78 var(--display);
  letter-spacing: -.04em;
}
.film-intro h1 small {
  font: 400 18px/1 var(--sans);
  letter-spacing: .08em;
  color: #b3b5af;
}
.film-intro__title p { margin: 0; color: #b8bbb5; font-size: 13px; letter-spacing: .04em; }
.film-intro__copy { max-width: 470px; color: #b0b2ad; font-size: 12px; line-height: 2.05; }
.film-intro__copy p { margin: 0 0 5px; }
.film-ring {
  width: 120px;
  height: 120px;
  display: grid;
  place-content: center;
  gap: 10px;
  border: 1px solid rgba(236,236,231,.22);
  border-radius: 50%;
  color: #a4a7a1;
  font: 8px var(--mono);
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(-12deg);
}
.film-ring b { font: 200 25px var(--sans); transform: rotate(12deg); }
.film-side-note { display: none; }

.film-archive {
  width: min(1320px, calc(100% - 9vw));
  margin: 0 auto;
  background: var(--page);
}
.film-work {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(300px, .78fr) 218px;
  gap: 34px;
  align-items: stretch;
  padding: 38px 0 64px;
  border-top: 1px solid var(--line);
}
.film-work__media {
  position: relative;
  align-self: start;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(236,236,231,.26);
  background: #111415;
}
.film-work__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.04) brightness(.84);
  transition: transform .8s cubic-bezier(.16,1,.3,1), filter .45s ease;
}
.film-work__media:hover video { transform: scale(1.018); filter: saturate(.9) contrast(1.04) brightness(.96); }
.film-work__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.24));
}
.film-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0 0 0 2px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 50%;
  color: #f2f2ee;
  background: rgba(8,10,11,.26);
  backdrop-filter: blur(6px);
  transform: translate(-50%,-50%);
  transition: transform .28s cubic-bezier(.16,1,.3,1), background .25s ease;
}
.film-play:hover { background: rgba(8,10,11,.56); transform: translate(-50%,-50%) scale(1.06); }
.film-play:active { transform: translate(-50%,-50%) scale(.96); }
.film-play.is-playing { padding-left: 0; font-size: 12px; }

.film-work__info { min-width: 0; display: flex; flex-direction: column; }
.film-index { color: #919590; font: 10px var(--mono); }
.film-work h2 {
  margin: 12px 0 8px;
  font: 400 clamp(26px, 2.3vw, 35px)/1 var(--sans);
  letter-spacing: -.035em;
  white-space: nowrap;
}
.film-meta { margin: 0 0 30px; color: #919590; font: 9px var(--mono); letter-spacing: .04em; }
.film-work h3 { margin: 0 0 12px; font: 9px/1.55 var(--mono); font-weight: 400; }
.film-work h3 em { color: #a8aba5; font-style: normal; }
.film-work__info > p:not(.film-meta) {
  margin: 0;
  max-width: 36ch;
  color: #aeb1ab;
  font-size: 11px;
  line-height: 1.85;
}
.film-storyboard-link {
  align-self: flex-start;
  margin: 21px 0 24px;
  padding: 10px 13px;
  border: 1px solid rgba(236,236,231,.36);
  color: #d9dad4;
  background: transparent;
  font: 8px var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.film-storyboard-link:hover { border-color: #ecece7; color: #0b0d0e; background: #ecece7; }
.film-storyboard-link:active, .storyboard-card:active { transform: translateY(1px); }
.film-details {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 14px 20px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(236,236,231,.14);
  color: #767b76;
  font: 7px/1.65 var(--mono);
}
.film-details b { color: #bfc1bb; font-weight: 400; }

.storyboard-card {
  align-self: start;
  width: 100%;
  padding: 18px 15px 14px;
  border: 1px solid rgba(236,236,231,.25);
  color: #d9dad5;
  background: rgba(13,16,17,.75);
  text-align: left;
  transition: border-color .25s ease, background .25s ease, transform .15s ease;
}
.storyboard-card:hover { border-color: rgba(236,236,231,.7); background: #111415; }
.storyboard-card > span { display: block; color: #b7bab4; font: 8px var(--mono); }
.storyboard-card > b { display: block; margin: 7px 0 15px; font-size: 9px; font-weight: 400; }
.storyboard-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  padding: 4px;
  background: #d4d3cc;
}
.storyboard-mini img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}

.film-quote {
  width: min(1320px, calc(100% - 9vw));
  min-height: 205px;
  margin: 0 auto;
  padding: 66px 0 74px;
  overflow: hidden;
}
.film-quote strong {
  position: absolute;
  left: -2vw;
  bottom: 12px;
  color: rgba(236,236,231,.035);
  font: 700 clamp(90px, 10vw, 150px)/1 var(--sans);
  letter-spacing: -.08em;
}
.film-quote p { position: relative; margin: 0 0 14px; text-align: center; color: #c5c7c1; font-size: 13px; }
.film-quote span { display: block; text-align: center; color: #7f837e; font: 8px var(--mono); }
.film-quote > a { position: absolute; right: 0; bottom: 36px; padding-left: 19px; border-left: 1px solid var(--line); font: 8px var(--mono); }

.secondary-about { background: #e9e9e5; color: #171919; }
.secondary-about figure { margin: 0; }
.secondary-about figure img { width: 100%; height: 100%; object-fit: cover; }

.storyboard-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility .32s ease;
}
.storyboard-modal.is-open { opacity: 1; visibility: visible; }
.storyboard-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,7,8,.86); }
.storyboard-modal__panel {
  position: relative;
  width: min(1020px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 26px;
  color: #151717;
  background: #e6e6e1;
  transform: translateY(16px);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.storyboard-modal.is-open .storyboard-modal__panel { transform: translateY(0); }
.storyboard-modal__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid #aaaDA8; }
.storyboard-modal__head span { color: #666a66; font: 8px var(--mono); }
.storyboard-modal__head h2 { margin: 8px 0 0; font: 500 32px/1 var(--sans); letter-spacing: -.03em; }
.storyboard-modal__head button { border: 0; background: transparent; font: 9px var(--mono); }
.storyboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 22px 0 6px; }
.storyboard-frame { margin: 0; }
.storyboard-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.storyboard-frame figcaption { padding-top: 6px; color: #666a66; font: 7px var(--mono); }
.storyboard-modal__note { margin: 12px 0 0; color: #727571; font: 8px var(--mono); }

@media (prefers-reduced-motion: no-preference) {
  .film-intro__title, .film-intro__copy, .film-ring { opacity: 0; transform: translateY(16px); animation: film-in .75s cubic-bezier(.16,1,.3,1) forwards; }
  .film-intro__copy { animation-delay: .1s; }
  .film-ring { animation-delay: .18s; }
  .film-work { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
  .film-work.is-visible { opacity: 1; transform: translateY(0); }
  @keyframes film-in { to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 1080px) {
  .film-intro { grid-template-columns: 1fr 1fr; }
  .film-ring { display: none; }
  .film-work { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr); }
  .storyboard-card { grid-column: 2; width: 218px; margin-left: auto; }
}
@media (max-width: 760px) {
  :root { --nav-h: 68px; }
  .film-nav { padding: 0 5vw; }
  .film-nav__name { font-size: 8px; }
  .film-nav nav { gap: 13px; font-size: 7px; }
  .film-nav nav a:first-child, .film-nav nav a:nth-child(3) { display: none; }
  .film-backdrop { height: 500px; }
  .film-intro {
    width: calc(100% - 12vw);
    min-height: 500px;
    padding-top: calc(var(--nav-h) + 20px);
    grid-template-columns: 1fr;
    grid-template-rows: 32px auto auto;
    align-content: center;
    gap: 28px;
  }
  .film-intro h1 { gap: 12px; font-size: 25vw; }
  .film-intro h1 small { font-size: 14px; }
  .film-intro__copy { max-width: 38ch; }
  .film-archive, .film-quote { width: calc(100% - 12vw); }
  .film-work { display: flex; flex-direction: column; gap: 22px; padding: 30px 0 52px; }
  .film-work h2 { white-space: normal; }
  .film-details { margin-top: 8px; }
  .storyboard-card { width: min(240px, 100%); margin: 0; }
  .storyboard-grid { grid-template-columns: repeat(2, 1fr); }
  .film-quote { padding-bottom: 100px; }
  .film-quote > a { bottom: 38px; }
  .storyboard-modal { padding: 3vh 4vw; }
  .storyboard-modal__panel { padding: 17px; }
  .storyboard-modal__head h2 { font-size: 23px; }
  .secondary-about { padding-right: 6vw; padding-left: 6vw; }
}

/* Unified secondary-page hero and film playback */
body.video-open { overflow: hidden; }
.film-hero { position:relative; z-index:2; height:150vh; overflow:visible; background:var(--page); }
.film-hero__back { position:absolute; inset:0 0 auto; height:112vh; overflow:hidden; transform-origin:center top; will-change:transform; background:#090b0b url("./assets/film/poster-01.jpg?v=20260814-liveframe2") center/cover no-repeat; }
.film-hero__back video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; filter:saturate(.66) contrast(1.08) brightness(.64); transition:opacity .4s ease; }
.film-hero__back video.is-ready { opacity:1; }
.film-hero__shade { position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,rgba(2,3,3,.8),transparent 58%),linear-gradient(0deg,var(--page) 0%,transparent 34%); }
.film-hero__front { position:absolute; z-index:7; top:112vh; right:9vw; width:min(27vw,430px); height:72vh; overflow:hidden; box-shadow:0 35px 100px rgba(0,0,0,.42); will-change:transform; }
.film-hero__front img { width:100%; height:100%; object-fit:cover; object-position:center center; filter:saturate(.82) contrast(1.04); }
.film-hero__title { position:absolute; z-index:4; top:29vh; left:4vw; }
.film-hero__title > span,.film-hero__title p,.film-hero__hint { font:8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.film-hero__title h1 { margin:25px 0 22px; font:600 clamp(104px,15vw,245px)/.72 var(--display); letter-spacing:-.045em; text-transform:uppercase; }
.film-hero__title p { color:#b8bcba; }
.film-hero__hint { position:absolute; z-index:5; top:calc(100vh - 58px); left:50%; translate:-50% 0; font-size:10px; }
.film-hero__hint span { display:inline-block; margin-left:15px; font:700 18px/1 var(--sans); }
.film-back { position:absolute; z-index:9; top:104px; left:4vw; color:#b8bcba; font:9px var(--mono); letter-spacing:.04em; text-transform:uppercase; transition:color .25s ease,transform .25s ease; }
.film-back:hover { color:#fff; transform:translateX(-3px); }
.film-hero .film-hero__hint { top:auto; left:auto; right:4vw; bottom:calc(50vh + 3.5vh); translate:none; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .film-hero__back { animation:film-back-parallax 1s linear both; animation-timeline:scroll(root block); animation-range:0 135vh; }
    .film-hero__front { animation:film-front-parallax 1s linear both; animation-timeline:scroll(root block); animation-range:0 135vh; }
    @keyframes film-back-parallax { to { transform:translate3d(0,21.6vh,0) scale(1.034); } }
    @keyframes film-front-parallax { to { transform:translate3d(0,-27vh,0); } }
  }
}

.film-archive { position:relative; z-index:3; }
.film-work { grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr); gap:clamp(34px,5vw,76px); align-items:start; padding:52px 0 72px; }
.film-work__media { cursor:pointer; }
.film-work__media video { position:relative; z-index:1; opacity:0; transform:scale(1.001); transition:opacity .42s ease,transform .7s cubic-bezier(.16,1,.3,1); }
.film-hover-poster { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; pointer-events:none; transition:opacity .42s ease,transform .7s cubic-bezier(.16,1,.3,1); }
.film-work__media.is-hover-previewing video { opacity:1; }
.film-work__media.is-hover-previewing .film-hover-poster { opacity:0; }
.film-work__media.is-hover-preview-ending video { opacity:0; }
.film-work__media.is-hover-preview-ending .film-hover-poster { opacity:1; }
.film-work__media:hover video { transform:scale(1.018); }
.film-work__media:hover .film-hover-poster { transform:scale(1.018); }
.film-work h2 { white-space:normal; }
.film-play { opacity:0; transform:translate(-50%,-46%) scale(.92); transition:opacity .28s ease,transform .35s cubic-bezier(.16,1,.3,1),background .25s ease; }
.film-work__media:hover .film-play,.film-work__media:focus-within .film-play { opacity:1; transform:translate(-50%,-50%) scale(1); }
.film-play:hover { transform:translate(-50%,-50%) scale(1.06); }
.film-play:active { transform:translate(-50%,-50%) scale(.96); }

.video-modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:5vh 5vw; opacity:0; visibility:hidden; transition:opacity .32s ease,visibility .32s ease; }
.video-modal.is-open { opacity:1; visibility:visible; }
.video-modal__backdrop { position:absolute; inset:0; border:0; background:rgba(5,7,8,.9); backdrop-filter:blur(14px); }
.video-modal__panel { position:relative; width:min(1180px,100%); transform:translateY(18px) scale(.985); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.video-modal.is-open .video-modal__panel { transform:none; }
.video-modal__head { display:flex; justify-content:space-between; align-items:center; padding:0 0 14px; color:#d9dad5; font:9px var(--mono); letter-spacing:.06em; }
.video-modal__head button { display:inline-flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid rgba(255,255,255,.28); background:rgba(8,10,11,.4); color:#d9dad5; transition:color .25s ease,background .25s ease,border-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1); }
.video-modal__head button span { display:inline-block; font-size:15px; line-height:1; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.video-modal__head button:hover,.video-modal__head button:focus-visible { color:#080a0a; background:#f1f2ed; border-color:#f1f2ed; transform:translateY(-2px); }
.video-modal__head button:hover span,.video-modal__head button:focus-visible span { transform:rotate(90deg); }
.video-modal__head button:active { transform:translateY(0) scale(.96); }
.video-modal video { display:block; width:100%; max-height:78vh; aspect-ratio:16/9; object-fit:contain; background:#050606; border:1px solid rgba(255,255,255,.2); }

@media (hover:none) { .film-play { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media (max-width:1080px) { .film-work { grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr); } }
@media (max-width:760px) {
  .film-hero { height:155vh; }
  .film-hero__back { height:100vh; }
  .film-hero__front { top:112vh; right:6vw; width:45vw; height:56vh; }
  .film-hero__title { top:25vh; }
  .film-hero__title h1 { font-size:25vw; }
  .film-back { top:88px; left:6vw; }
  .film-work { display:flex; flex-direction:column; gap:22px; }
  .film-work__media { width:100%; }
  .video-modal { padding:3vh 4vw; }
  .video-modal__head { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .film-hero__back,.film-hero__front { transform:none!important; animation:none!important; }
}

@media(max-width:760px){
  .film-hero{height:150dvh}
  .film-hero__back{height:112dvh}
  .film-hero__front{top:112dvh;height:72dvh}
  .film-hero__hint{top:calc(100dvh - 58px)}
  .film-hero .film-hero__hint{bottom:calc(50dvh + 3.5dvh)}
  .film-nav{padding-top:env(safe-area-inset-top);height:max(var(--nav-h),calc(48px + env(safe-area-inset-top)))}
  .film-nav nav a{min-height:44px;display:grid;place-items:center}
  .film-back{min-height:44px;display:inline-flex;align-items:center}
  .film-play,.film-storyboard-link,.video-modal__head button,.storyboard-modal__head button{min-height:44px}
}