body { background: #0e0f16; color: #fff; font-family: Manrope, sans-serif; }
.cinema-header { height: 86px; padding: 0 4.2vw; display: grid; grid-template-columns: 300px 1fr 150px; align-items: center; border-bottom: 1px solid #ffffff2b; background: #0e0f16; }
.cinema-header nav { display: flex; justify-content: center; gap: 40px; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }
.cinema-header nav .active { color: var(--violet); }
.cinema-header button { justify-self: end; border: 0; background: none; color: #fff; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.cinema-header button span { margin-left: 13px; color: var(--violet); font-size: 20px; }
.cinema-hero { position: relative; min-height: calc(100vh - 86px); overflow: hidden; display: flex; align-items: center; padding: 8vw 7vw 10vw; }
.hero-still, .hero-still::after { position: absolute; inset: 0; }
.hero-still img { height: 100%; object-fit: cover; filter: brightness(.38) saturate(.7); }
.hero-still::after { content: ""; background: #0e0f1654; }
.cinema-hero__copy { position: relative; z-index: 1; max-width: 1060px; }
.frame-label { font: 400 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
.frame-label span { background: var(--violet); color: #11121b; padding: 7px 10px; margin-right: 14px; }
.cinema-hero h1 { margin: 42px 0 28px; font: 600 clamp(66px, 8vw, 134px)/.85 "Bricolage Grotesque", sans-serif; letter-spacing: -.065em; }
.cinema-hero h1 em { color: var(--violet); font-style: normal; }
.cinema-hero__copy > p:not(.frame-label) { max-width: 600px; font-size: 18px; line-height: 1.6; color: #d6d6dc; }
.play-cta { margin-top: 45px; display: grid; grid-template-columns: 58px auto; grid-template-rows: 1fr 1fr; width: max-content; min-width: 280px; border: 1px solid #ffffff63; padding: 13px 18px; }
.play-cta > span { grid-row: 1/3; align-self: center; width: 40px; height: 40px; display: grid; place-items: center; background: var(--violet); color: #0e0f16; border-radius: 50%; }
.play-cta b { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.play-cta small { color: #9a9aa5; }
.playhead { position: absolute; z-index: 1; left: 7vw; right: 7vw; bottom: 40px; display: grid; grid-template-columns: 10px 50px 1fr 50px; align-items: center; gap: 9px; font: 10px "DM Mono", monospace; }
.playhead i { width: 9px; height: 9px; background: var(--violet); border-radius: 50%; }
.playhead b { height: 1px; background: linear-gradient(to right, var(--violet) 22%, #ffffff42 22%); }
.scroll-cue { position: absolute; z-index: 2; right: 7vw; bottom: 65px; writing-mode: vertical-rl; font: 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .11em; }
.cinema-chapters { padding: 130px 6vw; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1px; background: #30313a; }
.chapter-intro, .cinema-chapters article { min-height: 470px; padding: 40px 32px; background: #151620; }
.chapter-intro h2 { margin: 28px 0; max-width: 520px; font: 600 clamp(48px, 4.2vw, 76px)/.95 "Bricolage Grotesque", sans-serif; letter-spacing: -.05em; }
.cinema-chapters article { display: flex; flex-direction: column; justify-content: space-between; transition: background .2s; }
.cinema-chapters article:hover { background: #1c1e2b; }
.cinema-chapters article > span { color: var(--violet); font: 400 14px "DM Mono", monospace; }
.cinema-chapters article h3 { margin: 10px 0 14px; font-size: 28px; line-height: 1.05; }
.cinema-chapters article p:last-child { color: #a5a5af; line-height: 1.55; }
.cinema-beta { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 760px; background: var(--paper); color: var(--ink); }
.cinema-beta__still { min-height: 700px; position: relative; overflow: hidden; }
.cinema-beta__still img { height: 100%; object-fit: cover; filter: grayscale(1); }
.cinema-beta__still span { position: absolute; bottom: 0; left: 0; padding: 16px 24px; background: var(--violet); font: 11px "DM Mono", monospace; text-transform: uppercase; }
.cinema-beta__form { padding: 90px 6vw; align-self: center; }
.cinema-beta__form h2 { margin: 24px 0; font: 600 88px/.8 "Bricolage Grotesque", sans-serif; letter-spacing: -.06em; }
.cinema-beta__form > p:not(.eyebrow) { max-width: 470px; line-height: 1.6; }
.cinema-beta__form form { margin-top: 44px; }
.cinema-beta__form .field { margin-top: 22px; }
.cinema-beta__form input { border: 0; border-bottom: 1px solid #585965; padding-left: 0; }
.cinema-beta__form button { width: 100%; margin-top: 35px; min-height: 58px; display: flex; justify-content: space-between; align-items: center; border: 0; padding: 0 18px; background: var(--ink); color: #fff; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.cinema-beta__form button span { color: var(--violet); font-size: 20px; }
.cinema-featured { padding: 120px 0 90px; overflow: hidden; }
.cinema-featured > header { padding: 0 6vw 72px; display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: end; }
.cinema-featured header h2 { margin: 15px 0 0; font: 600 clamp(57px, 5.4vw, 94px)/.9 "Bricolage Grotesque", sans-serif; letter-spacing: -.05em; }
.cinema-featured header > p { color: #aaaab4; line-height: 1.6; }
.filmstrip { padding: 0 4vw; display: grid; grid-template-columns: 1.25fr .8fr 1fr; gap: 10px; align-items: stretch; }
.film figure { height: 560px; margin: 0; position: relative; overflow: hidden; }
.film img { height: 100%; object-fit: cover; filter: brightness(.62) saturate(.75); transition: transform .4s; }
.film:hover img { transform: scale(1.025); }
.film figcaption { position: absolute; inset: auto 0 0; padding: 28px; background: #0e0f16df; }
.film figcaption span { color: var(--violet); font: 10px "DM Mono", monospace; text-transform: uppercase; }
.film h3 { margin: 9px 0 18px; font: 600 32px/1 "Bricolage Grotesque", sans-serif; }
.film i { font-size: 12px; font-style: normal; text-transform: uppercase; }
.film-two figure { margin-top: 80px; height: 480px; }
.film-three figure { margin-top: 35px; height: 525px; }
.film-perf { padding: 24px 4vw 0; overflow: hidden; color: #343641; word-spacing: 36px; white-space: nowrap; }
.cinema-news { padding: 120px 7vw; background: var(--violet); color: var(--ink); display: grid; grid-template-columns: .7fr 1.5fr .8fr; gap: 5vw; }
.cinema-news header h2 { margin: 16px 0; font: 600 76px/.85 "Bricolage Grotesque", sans-serif; letter-spacing: -.06em; }
.cinema-news__lead figure { margin: 0 0 32px; position: relative; }
.cinema-news__lead figure img { aspect-ratio: 16/9; object-fit: cover; }
.cinema-news__lead figure span { position: absolute; left: 0; bottom: 0; padding: 9px 12px; background: var(--ink); color: #fff; font: 10px "DM Mono", monospace; }
.cinema-news time { font: 11px "DM Mono", monospace; text-transform: uppercase; }
.cinema-news h3 { margin: 12px 0 18px; font: 600 35px/1.05 "Bricolage Grotesque", sans-serif; }
.cinema-news p { line-height: 1.55; }
.cinema-news article a { border-bottom: 1px solid; font-size: 12px; text-transform: uppercase; }
.cinema-news__second { align-self: center; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 24px 0 30px; }
.cinema-news__second h3 { font-size: 30px; }
.news-index { grid-column: 3; text-transform: uppercase; font-size: 11px; align-self: end; }
.cinema-about { min-height: 780px; display: grid; grid-template-columns: 1fr 1fr; }
.cinema-about > img { height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.cinema-about > div { padding: 100px 7vw; align-self: center; }
.cinema-about h2 { margin: 25px 0 30px; font: 600 clamp(55px, 5vw, 88px)/.87 "Bricolage Grotesque", sans-serif; letter-spacing: -.06em; }
.cinema-about p { max-width: 510px; color: #aaaab4; line-height: 1.65; }
.cinema-about a { display: inline-block; margin-top: 28px; color: var(--violet); font-size: 12px; text-transform: uppercase; }
.cinema-footer { background: #08090e; padding: 100px 6vw 34px; }
.subscribe { display: grid; grid-template-columns: .7fr 1fr 1.3fr; gap: 3vw; align-items: end; padding-bottom: 80px; }
.subscribe > p { color: var(--violet); font: 11px "DM Mono", monospace; text-transform: uppercase; }
.subscribe h2 { margin: 0; font: 600 47px/.95 "Bricolage Grotesque", sans-serif; }
.subscribe form { display: grid; grid-template-columns: 1fr auto; }
.subscribe input { min-height: 58px; border: 1px solid #ffffff45; background: transparent; color: #fff; padding: 0 16px; }
.subscribe button { border: 0; background: var(--violet); padding: 0 22px; font-size: 12px; text-transform: uppercase; }
.end-credits { display: grid; grid-template-columns: 230px 1fr auto; gap: 35px; align-items: center; padding-top: 30px; border-top: 1px solid #ffffff28; }
.end-credits .brand-logo { width: 205px; }
.end-credits p, .end-credits > span { color: #888993; font-size: 10px; }

@media (max-width: 800px) {
  .cinema-header { height: 74px; grid-template-columns: 1fr auto; padding: 0 20px; }
  .cinema-header nav { display: none; }
  .cinema-header button { font-size: 0; }
  .cinema-hero { min-height: 720px; padding: 90px 22px 120px; }
  .cinema-hero h1 { font-size: 59px; }
  .scroll-cue { display: none; }
  .playhead { left: 22px; right: 22px; }
  .cinema-chapters { padding: 70px 20px; grid-template-columns: 1fr; }
  .chapter-intro, .cinema-chapters article { min-height: 300px; }
  .chapter-intro h2 { font-size: 48px; }
  .cinema-beta { grid-template-columns: 1fr; }
  .cinema-beta__still { min-height: 380px; }
  .cinema-beta__form { padding: 70px 22px; }
  .cinema-beta__form h2 { font-size: 70px; }
  .cinema-featured { padding-top: 75px; }
  .cinema-featured > header { padding: 0 22px 45px; grid-template-columns: 1fr; }
  .cinema-featured header h2 { font-size: 52px; }
  .filmstrip { padding: 0 20px; grid-template-columns: 1fr; }
  .film figure, .film-two figure, .film-three figure { height: 420px; margin: 0; }
  .cinema-news { padding: 75px 22px; grid-template-columns: 1fr; }
  .cinema-news header h2 { font-size: 65px; }
  .news-index { grid-column: 1; }
  .cinema-about { grid-template-columns: 1fr; }
  .cinema-about > img { height: 420px; }
  .cinema-about > div { padding: 72px 22px; }
  .cinema-about h2 { font-size: 55px; }
  .cinema-footer { padding: 72px 22px 30px; }
  .subscribe { grid-template-columns: 1fr; }
  .subscribe form { grid-template-columns: 1fr; }
  .subscribe button { min-height: 52px; }
  .end-credits { grid-template-columns: 1fr; }
}