/* The film page. One page uses this, so it stays out of the base sheet —
   see the note in README about shared primitives. No JavaScript here, so the
   page ships script-src 'none'. */

.film{ padding:clamp(52px,8vw,96px) 0 clamp(72px,10vw,120px); position:relative; }

.film__top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px clamp(20px,5vw,40px);
  border-bottom:1px solid var(--line);
}
.film__brand{ display:flex; align-items:center; gap:11px; font-size:16px; font-weight:600; }
.film__mark{ width:26px; height:26px; filter:drop-shadow(0 0 10px rgba(45,130,255,.65)); }

.film__head{ max-width:720px; margin:0 0 clamp(34px,5vw,52px); }
.film__head h1{
  font-size:clamp(34px,5vw,60px); letter-spacing:-.04em; margin:18px 0 0;
  text-wrap:balance;
}
.film__head h1 em{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--sapph-lt);
}

/* The player sits in the same facet-cut frame as the cards on the front page:
   a 1px gradient border and an inner panel clipped to the same notch. */
.player{
  position:relative; --cut:26px;
  padding:1px; border-radius:2px;
  background:linear-gradient(150deg,rgba(120,190,255,.42),rgba(31,111,255,.10) 48%,rgba(255,255,255,.05));
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  box-shadow:0 60px 130px -60px rgba(6,30,90,.95);
}
.player__in{
  background:#02040a;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.player video{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  background:#02040a;
}

.film__meta{
  list-style:none; padding:0; margin:clamp(26px,4vw,38px) 0 0;
  display:grid; gap:14px 34px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--line); padding-top:22px;
}
.film__meta div{ display:flex; flex-direction:column; gap:5px; }
.film__meta dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-mute);
}
.film__meta dd{ margin:0; font-size:14.5px; color:var(--fg-dim); }

.film__cta{ display:flex; flex-wrap:wrap; gap:13px; margin:clamp(30px,4vw,44px) 0 0; }

.film__note{
  margin:clamp(30px,4vw,44px) 0 0; max-width:62ch;
  font-family:var(--mono); font-size:11.5px; line-height:1.85;
  letter-spacing:.04em; color:var(--fg-mute);
}