* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0b0911; color: #f4eee2; font-family: Arial,Helvetica,sans-serif; }
a { color: inherit; text-decoration: none; }
.film-header { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; min-height: 72px; border-bottom: 1px solid rgba(255,255,255,.24); background: rgba(11,9,17,.94); backdrop-filter: blur(12px); }
.film-header > a, .film-header nav a { padding: 0 24px; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.film-header > a:last-child { justify-self: end; color: #efb929; }
.film-header nav { display: flex; align-self: stretch; }
.film-header nav a { display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.18); }
.film-header nav a:last-child { border-right: 1px solid rgba(255,255,255,.18); }
.film-hero { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); min-height: 760px; }
.film-title { display: flex; flex-direction: column; justify-content: center; padding: clamp(50px,7vw,110px); background: radial-gradient(circle at 75% 30%,rgba(76,22,125,.7),transparent 28%),linear-gradient(145deg,#0b0911,#281336 68%,#54166f); }
.film-title p, .film-episodes header p, .film-road header p, .story-call > div:first-child p { margin: 0; color: #efb929; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.film-title h1 { margin: 35px 0; font-size: clamp(64px, 12vw, 206px); line-height: .82; letter-spacing: -.06em; overflow-wrap: break-word; max-width: 100%; }
.film-title h1 em { color: #efb929; font-family: Georgia,serif; font-weight: 400; }
.film-title > span { max-width: 640px; font: 20px/1.4 Georgia,serif; }
.film-manifesto { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 50px 42px; background: #f4eee2; color: #111; }
.film-manifesto strong { font-size: clamp(22px, 3.4vw, 45px); line-height: 1.08; letter-spacing: -.02em; overflow-wrap: break-word; max-width: 100%; }
.film-manifesto p { margin: 0; font: 17px/1.55 Georgia,serif; }
.film-countdown { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 30px; min-height: 160px; padding: 28px 42px; background: #efb929; color: #111; }
.film-countdown small { font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.film-countdown > div { display: flex; align-items: end; gap: 8px; }
.film-countdown b { font-size: 88px; line-height: .72; letter-spacing: -.08em; }
.film-countdown > div span { font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.film-countdown > strong { font-size: 31px; line-height: .95; overflow-wrap: break-word; }
.film-countdown a { padding-bottom: 5px; border-bottom: 2px solid #111; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.film-statement { display: grid; grid-template-columns: repeat(6,1fr); border-bottom: 1px solid rgba(255,255,255,.22); }
.film-statement span { display: grid; min-height: 88px; place-items: center; border-right: 1px solid rgba(255,255,255,.22); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.film-statement span:last-child { border-right: 0; }
.film-episodes { display: grid; grid-template-columns: repeat(2,1fr); }
.film-episodes > header { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr .45fr; gap: 30px; padding: 90px 42px; border-bottom: 1px solid rgba(255,255,255,.22); }
.film-episodes header h2, .film-road h2, .story-call h2 { margin: 20px 0 0; font-size: clamp(42px, 8vw, 136px); line-height: .88; letter-spacing: -.05em; overflow-wrap: break-word; max-width: 100%; }
.film-episodes header span { align-self: end; font: 18px/1.5 Georgia,serif; }
.film-episodes article { display: grid; align-content: space-between; min-height: 480px; padding: 38px; border-right: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.film-episodes article:nth-of-type(even) { border-right: 0; }
.film-episodes article:nth-of-type(1) { background: #281336; }
.film-episodes article:nth-of-type(2) { background: #651d3a; }
.film-episodes article:nth-of-type(3) { background: #3d1466; }
.film-episodes article:nth-of-type(4) { background: #151219; }
.film-episodes article div { display: grid; gap: 24px; }
.film-episodes article span, .film-episodes article small { color: #efb929; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.film-episodes article strong { font-size: clamp(32px, 5.5vw, 84px); line-height: .9; letter-spacing: -.04em; overflow-wrap: break-word; }
.film-episodes article p { max-width: 560px; margin: 40px 0; font: 18px/1.5 Georgia,serif; }
.film-road { display: grid; grid-template-columns: .72fr 1.28fr; background: #f4eee2; color: #111; }
.film-road > header { padding: 80px 42px; border-right: 1px solid #111; }
.film-road > header span { display: block; max-width: 460px; margin-top: 34px; font: 17px/1.5 Georgia,serif; }
.film-road-list > * { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 24px; min-height: 150px; padding: 22px 30px; border-bottom: 1px solid #111; }
.film-road-list > *:last-child { border-bottom: 0; }
.film-road-list b { color: #781f3a; font: italic 25px Georgia,serif; }
.film-road-list span { display: grid; gap: 7px; }
.film-road-list strong { font-size: clamp(21px,3vw,39px); }
.film-road-list small { font: 14px Georgia,serif; }
.film-road-list em { font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .12em; }
.story-call { display: grid; grid-template-columns: 1.1fr .9fr; background: #efb929; color: #111; }
.story-call > div { padding: 86px 42px; }
.story-call > div + div { display: flex; flex-direction: column; justify-content: center; gap: 24px; border-left: 1px solid #111; }
.story-call > div + div > p { margin: 0; font: 18px/1.55 Georgia,serif; }
.story-call > div + div > strong { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.story-call nav { display: grid; }
.story-call nav a { padding: 18px 0; border-top: 1px solid #111; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.story-call nav a:last-child { border-bottom: 1px solid #111; }
.story-call small { line-height: 1.45; }
.film-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 20px; min-height: 110px; padding: 24px 42px; }
.film-footer strong { font-size: 25px; }
.film-footer span, .film-footer a { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 820px) {
  .film-header { grid-template-columns: minmax(0,1fr) auto; }
  .film-header nav { display: none; }
  .film-header > a, .film-header nav a { padding: 0 12px; letter-spacing: .08em; }
  .film-hero { grid-template-columns: minmax(0,1fr); }
  .film-title { min-height: 520px; padding: 48px 20px 36px; }
  .film-title h1 { font-size: clamp(48px, 14vw, 72px); line-height: .9; letter-spacing: -.04em; }
  .film-manifesto { padding: 48px 20px; }
  .film-manifesto strong { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.12; letter-spacing: -.01em; }
  .film-countdown { grid-column: auto; grid-template-columns: minmax(0,1fr) auto; padding: 30px 20px; }
  .film-countdown b { font-size: clamp(52px, 18vw, 88px); }
  .film-countdown a { grid-column: 1 / -1; justify-self: start; }
  .film-statement { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .film-statement span:nth-child(3) { border-right: 0; }
  .film-episodes { grid-template-columns: minmax(0,1fr); }
  .film-episodes > header { grid-column: auto; grid-template-columns: minmax(0,1fr); padding: 62px 20px; }
  .film-episodes header h2, .film-road h2, .story-call h2 { font-size: clamp(36px, 11vw, 56px); line-height: .95; }
  .film-episodes article strong { font-size: clamp(28px, 9vw, 40px); }
  .film-episodes article, .film-episodes article:nth-of-type(even) { min-height: 400px; padding: 30px 20px; border-right: 0; }
  .film-road, .story-call { grid-template-columns: minmax(0,1fr); }
  .film-road > header { border-right: 0; border-bottom: 1px solid #111; }
  .film-road > header, .story-call > div { padding: 60px 20px; }
  .story-call > div + div { border-left: 0; border-top: 1px solid #111; }
  .film-road-list > * { grid-template-columns: 52px minmax(0,1fr); padding: 22px 20px; }
  .film-road-list em { grid-column: 2; }
  .film-footer { grid-template-columns: minmax(0,1fr); padding: 34px 20px; }
}