/* ==========================================================================
   No Context Productions — site.css
   --------------------------------------------------------------------------
   Per-still custom properties, set inline in the HTML:
     --ar   the still's own aspect ratio    e.g. 16 / 9   (default 16 / 9)
     --pos  background-position             e.g. 44% center (default center)
     --s    framing scale, 0.95 – 1.10      (default 1)
            1 = the natural cover crop. Values below 0.95 will show the
            backing colour at the edges, so stay inside that range.
   ========================================================================== */

/* ---------- tokens -------------------------------------------------------- */
:root{
  --ink:#0a0a0b;
  --ink-2:#101012;
  --cream:#f2efe9;
  --dim:rgba(242,239,233,.56);
  --mute:rgba(242,239,233,.34);
  --hair:rgba(242,239,233,.14);
  --accent:#f5f374;

  --pad:clamp(20px,4.4vw,64px);
  --max:1680px;
  --micro:clamp(.6rem,.72vw,.688rem);   /* tracked caps */

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,1,.3,1);

  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Inter","Segoe UI",
         Roboto,Arial,sans-serif;

  color-scheme:dark;
}

/* ---------- reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

/* a shared caps style: used by every small label on the site */
.caps,.meta,.soon,.watch,.back,.year,.colophon,
.details span,.index a::before{
  font-size:var(--micro);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* ==========================================================================
   Full-bleed panels — the home hero and the film headers share a skeleton
   ========================================================================== */
.hero,.film{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}

/* the picture layer ------------------------------------------------------- */
.stage,.still{
  position:absolute;
  inset:0;
  z-index:0;
  background-color:var(--tint,#141416);
}
.plate,.still{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:var(--pos,center);
  /* 1.06 is overscan, so a --s of .95 still covers the frame edge to edge */
  transform:scale(calc(var(--s,1) * 1.06));
}
.plate{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s var(--ease),transform 1.6s var(--ease);
  will-change:opacity;
}
.plate.on{opacity:1}

/* colour plates, visible for the instant before a still decodes */
.plate[data-fallback="1"]{--tint:#1b232c}
.plate[data-fallback="2"]{--tint:#2a211a}
.plate[data-fallback="3"]{--tint:#171a17}
.plate[data-fallback="4"]{--tint:#241b20}
.plate[data-fallback="5"]{--tint:#1d1c26}
.plate[data-fallback="6"]{--tint:#20262a}

/* the film-page still fades up once it has decoded. The opacity:0 is scoped
   to .js so the still is never left invisible if the script fails to run. */
.still{transition:opacity 1.1s var(--ease)}
.js .still{opacity:0}
.still.is-ready{opacity:1}

/* the scrim: readable type over any frame, without flattening the image ---- */
.scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(10,10,11,.78),rgba(10,10,11,0) 24%),
    linear-gradient(to top,rgba(10,10,11,.96) 4%,rgba(10,10,11,.74) 30%,
                    rgba(10,10,11,.16) 62%,rgba(10,10,11,0)),
    linear-gradient(to right,rgba(10,10,11,.62),rgba(10,10,11,.12) 52%,rgba(10,10,11,0)),
    linear-gradient(rgba(10,10,11,.14),rgba(10,10,11,.14));
}

/* the display type sits directly on the picture, so it carries its own shadow */
.index a,.film-info h1,.film-info .meta,.soon,.back,.watch{
  text-shadow:0 1px 2px rgba(10,10,11,.4),0 2px 36px rgba(10,10,11,.62);
}
.watch:hover{text-shadow:none}

/* ---------- masthead ------------------------------------------------------ */
.masthead{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:clamp(16px,2.4vw,26px) var(--pad);
}
.mark{display:block}
.mark img{
  height:clamp(52px,5.4vw,74px);
  width:auto;
  transition:opacity .3s var(--ease);
}
.mark:hover img{opacity:.7}
/* ==========================================================================
   Home — the film index
   ========================================================================== */
.index{
  position:relative;
  z-index:5;
  margin-top:auto;
  width:100%;
  max-width:var(--max);
  padding:0 var(--pad) clamp(64px,11vh,124px);
}
.index ol{counter-reset:film}
.index li+li{margin-top:clamp(2px,.5vh,8px)}

.index a{
  display:flex;
  align-items:baseline;
  gap:clamp(.5rem,1.4vw,1.1rem);
  padding:clamp(2px,.4vh,7px) 0;
  font-size:clamp(1.9rem,5.4vw,4.4rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.06;
  text-transform:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.index a::before{
  counter-increment:film;
  content:counter(film,decimal-leading-zero);
  flex:none;
  color:var(--mute);
  transform:translateY(-.55em);
  transition:color .3s var(--ease);
}
.index .year{
  flex:none;
  color:var(--mute);
  transform:translateY(-.35em);
}
.index .year:empty{display:none}

/* the classic index treatment: the row you are on stays lit, the rest recede */
@media (hover:hover){
  .index:hover a{opacity:.32}
  .index a:hover{opacity:1;transform:translateX(clamp(4px,.8vw,14px))}
  .index a:hover::before{color:var(--accent)}
}
.index a:focus-visible{opacity:1}

/* ---------- scroll cue ---------------------------------------------------- */
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:clamp(20px,3.4vh,40px);
  z-index:5;
  width:16px;
  height:44px;
  margin-left:-8px;
  stroke-width:2;
  opacity:.5;
  cursor:pointer;
  animation:cue 2.6s var(--ease) infinite;
  transition:opacity .4s var(--ease);
}
.scroll-cue:hover{opacity:.9}
body.scrolled .scroll-cue{opacity:0;pointer-events:none}
@keyframes cue{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(7px)}
}

/* ==========================================================================
   Home — the deck below the fold
   ========================================================================== */
.deck{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(64px,11vw,150px) var(--pad) clamp(36px,5vw,64px);
}
.details{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(30px,5vw,72px);
  padding-bottom:clamp(52px,8vw,110px);
  border-bottom:1px solid var(--hair);
}
.details>div{
  display:flex;
  flex-direction:column;
  gap:.85em;
  font-size:clamp(1rem,1.5vw,1.22rem);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.45;
  color:var(--cream);
}
.details span{color:var(--dim);font-size:var(--micro)}
.details a{
  width:fit-content;
  padding-bottom:2px;
  border-bottom:1px solid var(--hair);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.details a:hover{border-color:var(--accent)}

.colophon{
  padding-top:clamp(24px,4vw,44px);
  color:var(--dim);
  letter-spacing:.16em;
}

/* ==========================================================================
   Film pages
   ========================================================================== */
.film-info{
  position:relative;
  z-index:5;
  margin-top:auto;
  width:100%;
  max-width:min(var(--max),980px);
  padding:0 var(--pad) clamp(56px,9vh,110px);
}
.film-info h1{
  font-size:clamp(2.6rem,9vw,7.2rem);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:.96;
  text-wrap:balance;
}
.film-info .meta{
  margin-top:clamp(14px,2vw,22px);
  color:var(--dim);
}

.watch{
  display:inline-flex;
  align-items:center;
  gap:.9em;
  margin-top:clamp(26px,3.4vw,40px);
  padding:1.1em 1.7em;
  border:1px solid var(--hair);
  border-radius:999px;
  background:rgba(242,239,233,.05);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease);
}
.watch::after{
  content:"";
  width:1.7em;
  height:1px;
  background:currentColor;
  transition:width .35s var(--ease);
}
.watch:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.watch:hover::after{width:2.5em}

.soon{
  display:inline-flex;
  align-items:center;
  gap:.85em;
  margin-top:clamp(26px,3.4vw,40px);
  color:var(--dim);
}
.soon::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.back{
  position:absolute;
  right:var(--pad);
  bottom:clamp(56px,9vh,110px);
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:.75em;
  color:var(--dim);
  transition:color .3s var(--ease),gap .3s var(--ease);
}
.back::before{content:"";width:1.6em;height:1px;background:currentColor}
.back:hover{color:var(--cream);gap:1.1em}

/* ==========================================================================
   Narrow screens — the still keeps its own aspect ratio and dissolves into
   the page instead of being cropped to a portrait letterbox
   ========================================================================== */
@media (max-width:760px){
  /* The panels stop being full-height. The picture takes real space in the
     flow at its own aspect ratio and dissolves into the page, so the type
     below always clears the image instead of the image being cropped into a
     portrait letterbox. */
  .hero,.film{min-height:0}

  .stage,.still{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:var(--ar,16 / 9);
    min-height:42svh;
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  }
  /* no overscan needed here — the box already matches the still's own ratio */
  .plate,.still{transform:none}

  /* the picture is in the flow now, so the masthead lifts out of it and sits
     over the top of the frame the way it does on wide screens */
  .masthead{position:absolute;top:0;left:0;right:0}

  .scrim{
    background:
      linear-gradient(to bottom,rgba(10,10,11,.62),rgba(10,10,11,0) 22%),
      linear-gradient(to top,rgba(10,10,11,.9),rgba(10,10,11,0) 34%);
  }

  .index,.film-info{margin-top:clamp(10px,3.4vh,30px)}
  .index{padding-bottom:clamp(64px,11vh,96px)}
  .index a{gap:.7rem}
  .index a::before{transform:translateY(-.35em)}

  .film-info{padding-bottom:clamp(18px,4vh,34px)}
  .back{
    position:static;
    margin:0 0 clamp(34px,7vh,56px) var(--pad);
    z-index:5;
  }
}

@media (max-width:520px){
  .details{grid-template-columns:1fr;gap:34px}
}

/* ---------- motion preferences -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .index a:hover{transform:none}
}