/* ------------------------------------------------------------------
   LIFELINE — site styles
   Palette pulled from the poster: gym-dark ground, poster orange,
   bone white. Display type is Archivo set wide (like the poster title).
   Director's letter is set in Newsreader.
------------------------------------------------------------------ */

:root {
  --ink:      #0f0c0a;   /* ground */
  --ink-2:    #171310;   /* raised surface */
  --rule:     #2a241f;   /* hairlines */
  --bone:     #efe8dc;   /* primary text */
  --dust:     #9a918a;   /* secondary text */
  --orange:   #d9651f;   /* poster orange */
  --orange-2: #f07a2d;   /* hover */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Newsreader", "Times New Roman", Georgia, serif;

  --gutter: clamp(20px, 4vw, 64px);
  --max: 1400px;
  --nav-h: 64px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--orange); color: var(--ink);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- type ---------- */

.eyebrow {
  margin: 0 0 1.5rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
}

.h2 {
  margin: 0 0 3rem;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  font-weight: 400;
  font-stretch: 112%;
  letter-spacing: -.02em;
  line-height: .95;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px;
  border: 1px solid var(--orange);
  color: var(--orange);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--orange); color: var(--ink); }
.btn--small { padding: 10px 16px; font-size: .7rem; }
.btn--big { padding: 18px 36px; font-size: .85rem; background: var(--orange); color: var(--ink); }
.btn--big:hover { background: var(--orange-2); border-color: var(--orange-2); }

/* ---------- nav + the line ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
  background: linear-gradient(to bottom, rgba(15,12,10,.85), rgba(15,12,10,0));
  transition: background .4s var(--ease);
}
.nav.is-solid { background: rgba(15,12,10,.92); backdrop-filter: blur(10px); }

.nav__brand {
  font-weight: 500; font-stretch: 125%; letter-spacing: .08em;
  font-size: .95rem; color: var(--orange);
}
.nav__links { display: flex; gap: 1.6rem; justify-content: center; }
.nav__links a {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone);
  opacity: .78; transition: opacity .2s;
}
.nav__links a:hover, .nav__links a[aria-current="true"] { opacity: 1; }

.nav__toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; align-items: center;
}
.nav__toggle span { display: block; width: 22px; height: 1px; background: var(--bone); transition: transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* The lifeline: a hairline that fills across the nav as you read.
   Hidden over the hero, it fades in with the solid nav. */
.nav__line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(239,232,220,.1);
  opacity: 0; transition: opacity .4s var(--ease);
}
.nav__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--orange); transform: scaleX(var(--progress, 0)); transform-origin: left;
}
.nav.is-solid .nav__line { opacity: 1; }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 40;
  background: var(--ink); padding: 2rem var(--gutter);
  display: flex; flex-direction: column; gap: 1.4rem;
}
.mobile-menu a:not(.btn) {
  font-size: clamp(1.8rem, 8vw, 2.6rem); font-weight: 400; font-stretch: 112%; letter-spacing: -.01em; line-height: 1;
}
.mobile-menu .btn { align-self: flex-start; margin-top: 1rem; }
.mobile-menu[hidden] { display: none; }

@media (max-width: 900px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__links, .nav .btn--small { display: none; }
  .nav__toggle { display: flex; grid-column: 3; }
}

/* ---------- hero ---------- */

.hero {
  position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
  isolation: isolate; overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%;
  z-index: -2;
  animation: hero-in 2.4s var(--ease) both;
}
@keyframes hero-in { from { transform: scale(1.06); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Hassan stands at ~63% of the still. Wide screens show the whole frame, so zoom in to 135%
   and shift left to bring him to the centre. Phones already centre him via object-position. */
@media (min-width: 761px) {
  .hero__img { inset: 0 auto auto -35%; width: 135%; max-width: none; height: 135%; }
}

.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(15,12,10,.96) 0%, rgba(15,12,10,.55) 35%, rgba(15,12,10,0) 70%),
    linear-gradient(to bottom, rgba(15,12,10,.5) 0%, rgba(15,12,10,0) 30%);
}

.hero__body { align-self: end; padding: 0 var(--gutter) 3.5rem; }
.hero__eyebrow { margin-bottom: 1rem; color: var(--bone); animation: fade-up .9s var(--ease) .5s both; }

.hero__title {
  margin: 0 0 1.2rem -.105em; /* pull left by the L's side bearing so its stem lines up with the small text */
  font-size: clamp(3.6rem, 16.5vw, 17rem);
  font-weight: 400;
  font-stretch: 125%;
  letter-spacing: -.015em;
  line-height: .82;
  color: var(--orange);
  display: flex;
}
.hero__title span { display: inline-block; animation: title-in 1.1s var(--ease) both; }
.hero__title span:nth-child(1) { animation-delay: .25s; }
.hero__title span:nth-child(2) { animation-delay: .31s; }
.hero__title span:nth-child(3) { animation-delay: .37s; }
.hero__title span:nth-child(4) { animation-delay: .43s; }
.hero__title span:nth-child(5) { animation-delay: .49s; }
.hero__title span:nth-child(6) { animation-delay: .55s; }
.hero__title span:nth-child(7) { animation-delay: .61s; }
.hero__title span:nth-child(8) { animation-delay: .67s; }
@keyframes title-in { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
@keyframes fade-up  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }


.hero__foot {
  display: flex; justify-content: space-between; align-items: end;
  padding: 0 var(--gutter) 1.6rem;
  border-top: 1px solid rgba(239,232,220,.12);
  margin: 0 var(--gutter); padding-inline: 0; padding-top: 1.2rem;
  animation: fade-up .9s var(--ease) 1.2s both;
}
.hero__cities { margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); }
.hero__cities span { color: var(--orange); margin-right: .8em; }
.hero__scroll { font-size: 1.1rem; color: var(--dust); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- sections ---------- */

.section { padding-block: clamp(5rem, 11vw, 10rem); border-top: 1px solid var(--rule); scroll-margin-top: var(--nav-h); }
.section .wrap > .eyebrow:first-child { margin-bottom: 2.5rem; }

/* the film */
.logline {
  margin: 0 0 clamp(3.5rem, 7vw, 6rem);
  max-width: 22ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 4.2vw, 3.9rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.credits {
  margin: 0; display: grid; gap: 2.5rem 3rem;
  grid-template-columns: 1fr 1fr 1fr 1.5fr .5fr;   /* room for the company names; the year needs little */
  border-top: 1px solid var(--rule); padding-top: 2rem;
}
.credits dt { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dust); margin-bottom: .9rem; }
.credits dd { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 400; line-height: 1.35; letter-spacing: -.01em; }
@media (max-width: 900px) { .credits { grid-template-columns: repeat(2, 1fr); } }

/* trailer */
.trailer__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2);
}
.trailer__frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.55); }
.trailer__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer__play {
  position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; color: var(--bone);
}
.trailer__ring {
  width: clamp(72px, 9vw, 110px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--bone);
  display: grid; place-items: center; transition: transform .4s var(--ease), border-color .3s;
}
.trailer__ring::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--bone);
}
.trailer__play:hover .trailer__ring { transform: scale(1.08); border-color: var(--orange); }
.trailer__label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }

/* screenings — the line runs vertically through the stops */
.stops { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.stop {
  position: relative;
  display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 2rem;
  padding: 2.2rem 0 2.2rem 2.2rem;
  border-bottom: 1px solid var(--rule);
}
.stop::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule);
}
.stop::after {
  content: ""; position: absolute; left: -4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--ink);
}
.stop__date { margin: 0; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.stop__city { margin: 0 0 .2rem; font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 400; font-stretch: 112%; letter-spacing: -.02em; line-height: 1; }
.stop__fest { margin: 0; color: var(--dust); font-size: 1rem; }
/* Past screenings (main.js moves them to the end, without their ticket link): muted. */
.stop--past .stop__date, .stop--past .stop__city { color: var(--dust); }
.stop--past::after { background: var(--dust); }
.stops__divider {
  position: relative; padding: 2.4rem 0 .4rem 2.2rem;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dust);
}
.stops__divider::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.screenings__note { margin: 2rem 0 0; color: var(--dust); font-size: .95rem; }
.screenings__note a { color: var(--bone); border-bottom: 1px solid var(--orange); }
@media (max-width: 760px) {
  .stop { grid-template-columns: 1fr; gap: .8rem; padding-left: 1.6rem; }
  .stops__divider { padding-left: 1.6rem; }
  .stop .btn { justify-self: start; margin-top: .4rem; }
}

/* press */
.press__quote { margin: 0 0 clamp(3rem, 6vw, 5rem); }
.press__quote blockquote { margin: 0; }
.press__quote p {
  margin: 0; max-width: 24ch;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.75rem, 4.2vw, 3.9rem); line-height: 1.12; letter-spacing: -.01em;
  text-wrap: balance;
}
.press__quote figcaption { margin-top: 1.5rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dust); }
.press__quote figcaption::before { content: "— "; color: var(--orange); }
.press__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.press__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--rule);
  transition: padding-left .35s var(--ease);
}
.press__list a:hover { padding-left: 1rem; }
.press__name { font-size: clamp(1.8rem, 5vw, 4.2rem); font-weight: 400; font-stretch: 112%; letter-spacing: -.02em; line-height: 1; }
.press__cta { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); white-space: nowrap; }
@media (max-width: 760px) { .press__list a { flex-direction: column; gap: .8rem; } }   /* long names like ComingSoon.net push the CTA off-screen */

/* director */
.director { padding-block: 0; }
.director__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.director__fig {
  position: sticky; top: calc(var(--nav-h) + 2rem);
  margin: clamp(5rem, 11vw, 10rem) 0 3rem; padding: 0 0 0 var(--gutter);
}
/* the full portrait frame, uncropped; on desktop it is capped to the viewport so the sticky photo always fits */
.director__fig img { width: auto; max-width: 100%; height: auto; max-height: calc(100svh - var(--nav-h) - 4rem); }
.director__text { padding: clamp(5rem, 11vw, 10rem) var(--gutter); max-width: 720px; }
.letter { font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.55; font-weight: 300; }
.letter p { margin: 0 0 1.4em; }
.letter p:first-child::first-letter {
  /* initial-letter sizes the cap to sit on line 1's cap height and line 2's baseline, so the glyph
     and the indent are the same height (a floated cap always fell short of its box) */
  -webkit-initial-letter: 2; initial-letter: 2;
  padding-right: .75rem; color: var(--orange); font-weight: 400;
}
.letter em { font-style: italic; }
.sig { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: .3rem; }
.sig strong { font-weight: 500; font-size: 1.05rem; letter-spacing: .02em; }
.sig span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dust); }
@media (max-width: 900px) {
  .director__grid { grid-template-columns: 1fr; }
  .director__fig { position: static; margin: 0; padding: 0; }
  .director__fig img { width: 100%; max-height: none; }   /* stacked layout: full width, full height */
  .director__text { padding-top: 3rem; }
}

/* cast */
.cast__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cast__list li {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1.5rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
}
.cast__actor { font-size: clamp(1.6rem, 4.5vw, 3.8rem); font-weight: 400; font-stretch: 112%; letter-spacing: -.02em; line-height: 1; }
.cast__as { font-family: var(--serif); font-style: italic; color: var(--dust); font-size: 1.1rem; }
.cast__role { font-size: clamp(1.6rem, 4.5vw, 3.8rem); font-weight: 300; font-stretch: 100%; letter-spacing: -.01em; line-height: 1; text-align: right; color: var(--dust); }
@media (max-width: 600px) {
  .cast__list li { grid-template-columns: 1fr; gap: .3rem; }
  .cast__role { text-align: left; }
}

/* stills strip */
.stills { padding: clamp(2rem, 4vw, 4rem) 0; overflow: hidden; }
.stills .eyebrow { margin-bottom: 2.5rem; }   /* same gap as the .section eyebrows */
.stills__track {
  display: flex; gap: 12px; padding: 0 var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stills__track::-webkit-scrollbar { display: none; }
.stills__track img {
  flex: 0 0 auto; width: min(78vw, 720px); aspect-ratio: 16 / 9; object-fit: cover; scroll-snap-align: start;
}

/* closer */
.closer { position: relative; min-height: 90svh; display: grid; place-items: center; isolation: isolate; overflow: hidden; text-align: center; margin-top: clamp(2rem, 4vw, 4rem); }
.closer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; }
.closer__shade {
  position: absolute; inset: 0; z-index: -1;
  /* dark behind the title on the left, fading so she and the trees show on the right */
  background: linear-gradient(to right, rgba(15,12,10,.65) 0%, rgba(15,12,10,.4) 45%, rgba(15,12,10,.12) 100%);
}
.closer__body { padding: 4rem var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.closer__title {
  margin: 0; font-size: clamp(3rem, 7vw, 7rem); font-weight: 400; font-stretch: 125%; letter-spacing: -.01em; line-height: .85; color: var(--orange);
}
/* Ibtisam sits right of centre looking up-left; the title and CTA sit left of centre, where
   her eyeline goes. The still is zoomed to 110% and shifted left to bring her in a little. */
@media (min-width: 761px) {
  .closer { place-items: center start; text-align: left; }
  .closer__body { align-items: flex-start; }
  .closer__img { inset: -5% auto auto -10%; width: 110%; max-width: none; height: 110%; }
}

/* footer */
.footer { border-top: 1px solid var(--rule); padding: 1.6rem 0; }
.footer__row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.footer p { margin: 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.footer__links { display: flex; gap: 1.6rem; }
.footer__links a { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); border-bottom: 1px solid transparent; }
.footer__links a:hover { border-bottom-color: var(--orange); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- small-screen type tweaks ---------- */
@media (max-width: 760px) {
  .hero__img { object-position: 68% 30%; }   /* centers Hassan in the tall phone crop */

  /* Closer on phones: a square box centred on Ibtisam; title and CTA sized down so the
     text sits below her face. */
  .closer { min-height: 100vw; place-items: end center; }
  .closer__img { object-position: 73% 50%; }
  .closer__shade {
    background:
      linear-gradient(to top, rgba(15,12,10,.94) 0%, rgba(15,12,10,.6) 34%, rgba(15,12,10,.08) 62%),
      linear-gradient(to bottom, rgba(15,12,10,.45) 0%, rgba(15,12,10,0) 22%);
  }
  .closer__body { width: 100%; padding: 0 var(--gutter) 2rem; gap: 1rem; }
  .closer__title { font-size: 11vw; }
  .closer .btn--big { padding: 14px 28px; font-size: .78rem; }
}
@media (max-width: 480px) {
  .hero__cities { font-size: .66rem; }
}