/* The Reckoning — film site
   A dystopian survival short: this stylesheet is built to feel like a field
   report from inside the story, not a polished movie-marketing page.

   Design system derived from the film's own key art:
   - ground near-black sampled from the poster's credit-block
   - hazard red sampled from the poster's distressed title lettering —
     used sparingly and deliberately, like a warning stencil, not decoration
   - gold sampled from the practical lamp glow in a BTS still (a doorway
     lit from within a dark house) — the one warm thing in a cold film,
     rationed on purpose so it still reads as "the only light left"
   - cold teal sampled from the poster's toxic overcast sky
*/

:root{
  --bg: #0a0b0b;
  --bg-alt: #060707;
  --surface: #141615;
  --surface-2: #1d201e;
  --border: #2c2f2c;
  --border-hazard: #4a2321;

  --ink: #eeeee8;
  --ink-dim: #9a9a92;
  --ink-faint: #5f625c;

  --accent: #d4241f;       /* hazard / title red */
  --accent-deep: #6e1512;
  --accent-soft: #7a3330;  /* desaturated red for body emphasis */

  --gold: #c7a668;         /* the one warm light: hope, faith — used rarely */
  --gold-dim: #8d774f;

  --cold: #3d6f83;         /* toxic-sky teal: secondary/cool */
  --cold-dim: #263c44;

  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --stencil: 'Big Shoulders Stencil Display', 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --sans: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --max: 1240px;
  --edge: clamp(1.25rem, 4vw, 3.5rem);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--bg); }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
  opacity: 0;
  transition: opacity .22s ease;
}
body.page-loaded{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  body{ opacity:1; transition:none; }
}

/* film-grain texture over the whole page — subtle, constant, never announces itself */
body::before{
  content:"";
  position: fixed; inset:0; z-index: 90; pointer-events:none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--edge); }

h1,h2,h3{ font-family: var(--stencil); font-weight:800; text-transform: uppercase; letter-spacing: .01em; line-height: .95; margin: 0 0 .5em; }
h1{ font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2{ font-size: clamp(2.1rem, 5vw, 3.4rem); }
h3{ font-family: var(--display); font-weight:800; font-size: clamp(1.15rem, 2.2vw, 1.4rem); text-transform: uppercase; }
/* Press kit field headings: match the title treatment (stencil font, full
   hazard red) rather than the plain h3 look used for cast/crew names. */
h3.accent-heading{ font-family: var(--stencil); color: var(--accent); }
h1 span, h2 span, h3 span{ color: var(--accent); }

.eyebrow{
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  color: var(--gold);
  display:block;
  margin-bottom: 1em;
}
.eyebrow::before{ content: "[ "; color: var(--ink-faint); }
.eyebrow::after{ content: " ]"; color: var(--ink-faint); }

p{ margin: 0 0 1.2em; }
.lede{ font-size: 1.2rem; color: var(--ink); }
.dim{ color: var(--ink-dim); }

.btn{
  display:inline-block;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  padding: .9em 1.6em;
  border: 1px solid var(--accent);
  color: var(--ink);
  text-decoration:none;
  background: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.btn::before{ content: "> "; color: var(--accent); }
.btn:hover{ background: var(--accent); color: #0a0b0b; }
.btn:hover::before{ color: #0a0b0b; }
.btn.gold{ border-color: var(--gold); }
.btn.gold::before{ color: var(--gold); }
.btn.gold:hover{ background: var(--gold); color: #16130a; }
.btn.gold:hover::before{ color: #16130a; }
.btn.ghost{ border-color: var(--border); }
.btn.ghost::before{ color: var(--ink-faint); }
.btn.ghost:hover{ background: var(--surface-2); border-color: var(--ink-faint); }
.btn.ghost:hover::before{ color: var(--ink); }
.btn.solid{
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight:700;
}
.btn.solid::before{ color: #fff; }
.btn.solid:hover{ background: var(--accent-deep); border-color: var(--accent-deep); color:#fff; }
.btn.solid:hover::before{ color: #fff; }

/* ---------- Contact form (submits to a Google Form -> Sheet + email notification) ---------- */
.contact-form{
  display:flex; flex-direction:column; gap:1.2em; max-width:560px; margin:0 auto; text-align:left;
}
.contact-form label{
  display:block; font-family: var(--mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; color: var(--ink-dim); margin-bottom:.5em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea{
  width:100%; font-family: var(--mono); font-size:.9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); padding: .9em 1.1em;
}
.contact-form textarea{ resize:vertical; min-height:9em; }
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: var(--ink-faint); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{ outline:none; border-color: var(--accent); }
.contact-form select{ appearance:none; -webkit-appearance:none; }
.contact-form button{ align-self:flex-start; }
.form-note{ font-size:.78rem; margin-top:1em; }
.form-thanks{ font-size:.95rem; color: var(--ink); font-weight:600; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:.5em; top:-3.5em; z-index:100;
  background: var(--accent); color:#fff; padding:.7em 1.3em;
  text-decoration:none; font-family: var(--mono); font-size:.85rem;
  transition: top .15s ease;
}
.skip-link:focus{ top:.5em; }

/* ---------- Nav ---------- */

.site-nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(6,7,7,.92);
  border-bottom: 1px solid var(--border);
}
.site-nav::after{
  content:""; display:block; height:3px;
  background: repeating-linear-gradient(-45deg, var(--accent-deep) 0 10px, transparent 10px 20px);
  opacity:.6;
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:.9em; padding-bottom:.9em; }
.site-nav .logo{ text-decoration:none; }
.site-nav .logo-text{
  font-family: var(--stencil); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height:1;
  color: var(--ink);
}
.site-nav .logo-text span{ color: var(--accent); }
.site-nav nav{ display:flex; gap: 0; flex-wrap:wrap; align-items:center; }
.site-nav nav a{
  font-family: var(--mono); text-transform: uppercase; letter-spacing:.06em;
  font-size: .76rem; text-decoration:none; color: var(--ink-dim);
  padding: .3em .7em; border-bottom: 2px solid transparent;
}
.site-nav nav > a:not(:last-child)::after{ content:"/"; color: var(--border); margin-left:.7em; }
.site-nav nav a:hover, .site-nav nav a[aria-current="page"]{ color: var(--ink); border-color: var(--accent); }
.nav-toggle{ display:none; }

/* Dropdown nav group (e.g. Gallery > Production Stills / Behind the Scenes) */
.nav-drop{ position:relative; display:inline-flex; align-items:center; }
.site-nav nav > .nav-drop:not(:last-child)::after{ content:"/"; color: var(--border); margin-left:.7em; }
.nav-drop-trigger{
  font-family: var(--mono); text-transform: uppercase; letter-spacing:.06em;
  font-size: .76rem; color: var(--ink-dim);
  padding: .3em .7em; border:none; border-bottom: 2px solid transparent;
  background:none; cursor:pointer; display:inline-flex; align-items:center; gap:.35em;
}
.nav-drop-trigger .caret{ font-size:.65em; line-height:1; transition: transform .15s ease; }
.nav-drop-trigger:hover,
.nav-drop.open .nav-drop-trigger,
.nav-drop.active .nav-drop-trigger{ color: var(--ink); border-color: var(--accent); }
.nav-drop.open .nav-drop-trigger .caret{ transform: rotate(180deg); }
.nav-drop-menu{
  display:none; flex-direction:column; position:absolute; top:100%; left:0; margin-top:0;
  background: var(--bg-alt); border:1px solid var(--border); min-width:200px; z-index:60; padding:.4em 0;
}
.nav-drop-menu a{ padding:.65em 1.1em; border-bottom:none; width:100%; }
.nav-drop-menu a:not(:last-child)::after{ content:none; }
.nav-drop-menu a:hover, .nav-drop-menu a[aria-current="page"]{ background: rgba(255,255,255,.05); }
.nav-drop.open .nav-drop-menu{ display:flex; }
@media (hover:hover){
  .nav-drop:hover .nav-drop-menu{ display:flex; }
}

@media (max-width: 760px){
  .site-nav nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background: var(--bg-alt); border-bottom: 1px solid var(--border);
    flex-direction:column; align-items:flex-start; gap:0; padding: .5em var(--edge) 1em;
  }
  .site-nav nav a{ padding: .7em 0; border-bottom:1px solid var(--border); width:100%; }
  .site-nav nav > a:not(:last-child)::after{ content:none; }
  .site-nav nav > .nav-drop:not(:last-child)::after{ content:none; }
  .site-nav.open nav{ display:flex; }
  .nav-toggle{
    display:block; background:none; border:1px solid var(--border); color: var(--ink);
    font-family: var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem;
    padding:.5em .9em; cursor:pointer;
  }
  .nav-drop{ display:flex; flex-direction:column; align-items:stretch; width:100%; position:static; }
  .nav-drop-trigger{ width:100%; justify-content:space-between; padding:.7em 0; border-bottom:1px solid var(--border); }
  .nav-drop-menu{
    position:static; display:none; background:none; border:none; margin-top:0; padding:0; min-width:0;
  }
  .nav-drop.open .nav-drop-menu{ display:flex; }
  .nav-drop-menu a{ padding:.7em 0 .7em 1.2em; border-bottom:1px solid var(--border); }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 94vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 8vh var(--edge) 3.5em;
  background: #030404;
}
.hero-media{ position:absolute; inset:0; width:100%; height:100%; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position: center 30%;
  opacity:.8;
  filter: grayscale(.3) contrast(1.15) saturate(.75);
}
/* Muted autoplay trailer loop, standing in for the static hero photo on
   wider screens once the Vimeo player is ready; disabled entirely for
   reduced-motion and left off on narrow/mobile viewports. */
.hero-video{ display:none; position:absolute; inset:0; overflow:hidden; }
.hero-video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:43vw; min-width:234vh; min-height:100vh;
  border:0; pointer-events:none;
  filter: grayscale(.3) contrast(1.1) saturate(.75) brightness(1.25);
}
@media (min-width:760px){
  .hero-video.is-ready{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none !important; }
}
.hero::before{
  /* scanline texture */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
  opacity:.35;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(3,4,4,.25) 0%, rgba(5,6,6,.65) 55%, var(--bg) 97%);
}
.hero-content{ position:relative; z-index:2; max-width: var(--max); margin:0 auto; width:100%; text-align:left; }
.hero-presents{
  font-family: var(--mono); font-size: clamp(.7rem, 1.33vw, .9rem); letter-spacing:-.01em;
  color: var(--ink); margin: 0 0 .5em;
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
}
@media (min-width:600px){
  .hero-presents{ white-space: nowrap; }
}
.hero-presents em{ font-style:normal; color: var(--ink); font-size: 1.3em; font-weight:600; letter-spacing:-.01em; }
.hero-presents .dim{ color: var(--ink); text-transform:lowercase; font-size:.7em; letter-spacing:.01em; }
.hero-byline{
  font-family: var(--mono); font-size: clamp(1rem, 2.1vw, 1.35rem); letter-spacing:.02em;
  color: var(--gold); margin: 0 0 .6em;
}
.hero-byline em{ font-style:italic; font-weight:700; }
.hero-byline .byline-small{ font-size:.75em; }
.hero-title{ max-width: 900px; margin: 0 0 .25em; font-size: clamp(3.4rem, 9vw, 6.8rem); }
.hero-tagline{
  font-family: var(--sans); font-style: italic; color: var(--ink);
  font-size: clamp(1.3rem, 2.8vw, 1.75rem); margin: -.3em 0 0; max-width: 34em;
  border-left: 3px solid var(--accent); padding-left: .9em;
}
.hero-links{ display:flex; flex-wrap:wrap; gap: .8em; margin-top: 2em; }
.hero-imdb, .hero-site{
  display:inline-flex; align-items:center; gap:.6em;
  text-decoration:none; color: var(--ink-dim); font-family: var(--mono); font-size:.82rem;
  letter-spacing:.04em; border: 1px solid var(--border); padding: .6em 1em; background: rgba(6,7,7,.5);
  transition: border-color .2s, color .2s;
}
.hero-watch{ font-size: 1rem; padding: 1.05em 2.1em; }
.hero-imdb img{ height: 18px; width:auto; }
.hero-imdb:hover, .hero-site:hover{ border-color: var(--gold); color: var(--ink); }
.hero-scroll{
  position:relative; z-index:2; text-align:left; margin-top: 2.5em;
  font-family: var(--mono); text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; color: var(--ink-dim);
}

/* ---------- Sections ---------- */
section{ padding: 5.5em 0; }
.section-alt{ background: var(--bg-alt); }
.center{ text-align:center; }
.narrow{ max-width: 780px; margin:0 auto; }

.statement{
  font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height:1.35; text-align:center; max-width: 900px; margin: 0 auto;
  color: var(--ink); text-transform: uppercase;
}

.pullquote{
  position:relative; padding: 3.5em var(--edge);
  background: var(--bg-alt);
  border-top: 3px solid var(--accent-deep); border-bottom: 3px solid var(--accent-deep);
  text-align:center;
}
.pullquote blockquote{
  margin:0 auto; max-width: 920px; font-family: var(--display); font-weight:700;
  font-size: clamp(1.5rem, 3.8vw, 2.6rem); line-height:1.3; color: var(--ink); text-transform:uppercase;
}
.pullquote cite{ display:block; margin-top: 1.2em; font-style:normal; font-family: var(--mono); letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; color: var(--gold); }

/* ---------- Critic slider ---------- */
.critic-slider{ max-width: var(--max); margin: 0 auto; }
.critic-track{ position:relative; }
.critic-slide{
  position:absolute; inset:0; margin:0; opacity:0; pointer-events:none;
  display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,4vw,3rem);
  align-items:stretch; transition: opacity 1.4s ease;
}
.critic-slide.is-active{ opacity:1; pointer-events:auto; position:relative; }
.critic-media{ position:relative; min-height: 16em; background:#000; }
.critic-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(.35) contrast(1.15) saturate(.85);
}
.critic-text{ display:flex; flex-direction:column; justify-content:center; padding: .5em 0; }
.critic-text p{
  font-family: var(--sans); font-style:italic; color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height:1.55; margin: 0 0 .9em;
}
.critic-text cite{
  font-style:normal; font-family: var(--mono); letter-spacing:.08em; text-transform:uppercase;
  font-size:.76rem; color: var(--gold); display:block;
}
.critic-controls{ display:flex; align-items:center; justify-content:center; gap:1.3em; margin-top: 2em; }
.critic-arrow{
  background:none; border:1px solid var(--border); color: var(--ink-dim);
  width:2.4em; height:2.4em; border-radius:50%; cursor:pointer; font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition: border-color .2s, color .2s;
}
.critic-arrow:hover{ border-color: var(--accent); color: var(--ink); }
.critic-dots{ display:flex; gap:.55em; }
.critic-dot{
  width:.55em; height:.55em; border-radius:50%; background: var(--border); border:none; padding:0; cursor:pointer;
}
.critic-dot.is-active{ background: var(--accent); }
@media (max-width:760px){
  .critic-slide.is-active{ grid-template-columns:1fr; }
  .critic-media{ min-height: 13em; }
}

/* ---------- Watch page ---------- */
.watch-hero{ position:relative; padding: 9em 0 4em; background:#030404; overflow:hidden; }
.watch-hero .hero-media{ opacity:.4; }
.watch-hero .hero-media img{ filter: grayscale(.5) contrast(1.1) saturate(.6); opacity:1; }
.watch-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(3,4,4,.55) 0%, rgba(3,4,4,.85) 55%, var(--bg) 100%);
}
.watch-hero-content{ position:relative; z-index:2; }
.watch-frame{ max-width: 920px; margin: 0 auto; }

/* ---------- Trailer embed ---------- */
.video-frame{
  border: 1px solid var(--border-hazard);
  outline: 1px solid var(--border); outline-offset: 6px;
  background: #000;
}

/* stat / why grid */
.why-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 3em; align-items:center; }
.why-grid img{ border: 1px solid var(--border); filter: grayscale(.25) contrast(1.1); }
@media (max-width: 860px){ .why-grid{ grid-template-columns: 1fr; } }

/* ---------- Gallery teaser (homepage) ---------- */
.gallery-teaser{ display:grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.gallery-teaser img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 2.35/1; filter: grayscale(.2) contrast(1.1); border: 1px solid var(--border); }
@media (max-width:700px){ .gallery-teaser{ grid-template-columns: 1fr; } }

/* ---------- Gallery / lightbox ---------- */
.gallery-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: .5em;
}
.gallery-grid button{
  all:unset; cursor: zoom-in; display:block; overflow:hidden; position:relative;
  border: 1px solid var(--border); grid-column: span 2; aspect-ratio: 2.35/1;
}
.gallery-grid button::after{
  content:""; position:absolute; inset:0; border: 1px solid transparent;
  transition: border-color .2s; pointer-events:none;
}
.gallery-grid button:hover::after{ border-color: var(--accent); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.2) contrast(1.1); transition: transform .5s ease, filter .3s ease; }
.gallery-grid button:hover img{ transform: scale(1.05); filter: grayscale(0) contrast(1.15); }
@media (max-width: 860px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid button{ grid-column: span 1; }
}

.lightbox{
  position: fixed; inset:0; z-index: 100; background: rgba(3,4,4,.96);
  display:none; align-items:center; justify-content:center; padding: 4vh 4vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width: 100%; max-height: 82vh; margin:0 auto; border: 1px solid #000; }
.lightbox .cap{ text-align:center; color: var(--ink-dim); font-family: var(--mono); letter-spacing:.04em; font-size:.85rem; margin-top: 1em; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:none; border:none; color: var(--ink); font-size: 2rem; cursor:pointer; line-height:1;
  font-family: var(--mono);
}
.lightbox-close{ top: 1.2em; right: 1.4em; }
.lightbox-prev{ left: 1em; top:50%; transform:translateY(-50%); }
.lightbox-next{ right: 1em; top:50%; transform:translateY(-50%); }

/* ---------- masonry (BTS) ---------- */
.masonry{ column-count: 3; column-gap: .5em; }
.masonry figure{ margin:0 0 .5em; break-inside: avoid; border:1px solid var(--border); position:relative; }
.masonry img{ width:100%; height:auto; filter: grayscale(.35) contrast(1.05); }
.masonry figcaption{ font-family: var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-dim); padding:.5em .6em; border-top:1px solid var(--border); }
@media (max-width: 860px){ .masonry{ column-count:2; } }
@media (max-width: 560px){ .masonry{ column-count:1; } }

/* ---------- Cast / Crew ---------- */
.cast-grid, .crew-grid{ display:grid; gap: 1.5em; }
.cast-grid{ grid-template-columns: repeat(4, 1fr); }
.crew-grid{ grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px){ .cast-grid{ grid-template-columns: repeat(2,1fr);} .crew-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 520px){ .cast-grid, .crew-grid{ grid-template-columns: repeat(2,1fr);} }

.person{ border: 1px solid var(--border); background: var(--surface); }
.person img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter: grayscale(.5) contrast(1.1); display:block; }
.person h3{ font-size: .95rem; margin: .7em .7em 0; }
.person .role{ font-family: var(--mono); text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; color: var(--gold); margin: 0 .7em .6em; display:block; }
.person p{ font-size: .88rem; color: var(--ink-dim); margin: 0 .7em 1em; }

/* ---------- Screenings / specs ---------- */
.specs{ display:grid; grid-template-columns: repeat(3,1fr); gap: 0; text-align:left; margin: 2.5em 0; border: 1px solid var(--border); }
.specs div{ border-left: 1px solid var(--border); padding: 1.2em; }
.specs div:first-child{ border-left:none; }
.specs .eyebrow{ margin-bottom:.5em; }
@media (max-width:700px){ .specs{ grid-template-columns: repeat(2,1fr);} .specs div:nth-child(3){ border-left:none; } }

/* ---------- Footer ---------- */
footer{ border-top: 1px solid var(--border); padding: 3em 0 2.5em; background: var(--bg-alt); position:relative; }
footer::before{
  content:""; display:block; position:absolute; top:-3px; left:0; right:0; height:3px;
  background: repeating-linear-gradient(-45deg, var(--accent-deep) 0 10px, transparent 10px 20px); opacity:.6;
}
footer .wrap{ display:flex; flex-wrap:wrap; gap: 2em; justify-content:space-between; align-items:flex-start; }
footer .brand-text{
  font-family: var(--stencil); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; font-size: clamp(1.5rem, 3vw, 2rem); line-height:1;
  color: var(--ink); margin: 0 0 .5em;
}
footer .brand-text span{ color: var(--accent); }
footer .connect-item{ display:flex; align-items:center; gap:.5em; }
footer .connect-item svg{ width:14px; height:14px; fill: currentColor; flex-shrink:0; }
.studio-logos{ display:flex; gap: 1.6em; align-items:center; margin-top: 1.2em; opacity: .75; filter: grayscale(1) contrast(1.2); }
.studio-logos img{ height: 40px; width:auto; }
.page-hero .studio-logos{ opacity:1; filter:none; justify-content:center; }
footer .cols{ display:flex; gap: 3.5em; flex-wrap:wrap; }
footer h4{ font-family: var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color: var(--ink-dim); margin: 0 0 .8em; }
footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin-bottom:.5em; }
footer a{ text-decoration:none; color: var(--ink-dim); font-size:.9rem; font-family: var(--mono); }
footer a:hover{ color: var(--ink); }
.copyright{ margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid var(--border); font-size:.76rem; font-family: var(--mono); color: var(--ink-dim); }

/* ---------- Press / inner pages ---------- */
.page-hero{ padding: 7em 0 3em; text-align:left; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.page-hero .wrap{ max-width: var(--max); }
.page-hero .eyebrow{ display:flex; }

/* Press-kit style split hero: dark text panel + torn-edge photo, edge to edge */
.page-hero.split{
  display:grid; grid-template-columns: 1.15fr 1fr; align-items:stretch;
  min-height: 44vh; padding:0; overflow:hidden;
}
.page-hero.split .page-hero-text{
  padding: 8em clamp(1.25rem,4vw,3rem) 3em clamp(1.25rem,4vw,3rem);
  display:flex; flex-direction:column; justify-content:center;
}
.page-hero.split .page-hero-media{
  position:relative;
  clip-path: polygon(
    6% 0%, 3% 5%, 8% 9%, 2% 14%, 7% 18%, 3% 23%, 9% 27%, 2% 32%, 6% 36%, 4% 41%,
    8% 45%, 2% 50%, 7% 55%, 3% 59%, 9% 64%, 2% 68%, 6% 73%, 4% 77%, 8% 82%, 2% 86%,
    7% 91%, 3% 95%, 6% 100%, 100% 100%, 100% 0%
  );
}
.page-hero.split .page-hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(.35) contrast(1.15) saturate(.85);
}

/* Reusable text + torn-edge photo split, sized to the taller column via grid stretch */
.content-split{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem,4vw,3rem);
  align-items:stretch; max-width: var(--max); margin: 0 auto; padding: 0 var(--edge);
}
.content-split .content-text{ max-width: 640px; }
.content-split .content-media{
  position:relative; min-height: 24em;
  /* Soft feather on the edge facing the text, rather than a hard clip-path
     tear — this box's height is fluid (it stretches to match the text
     column), and a fixed torn-edge shape can't hold up across that range
     the way a proportional gradient mask does. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 9%, #000 24%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 9%, #000 24%);
}
.content-split .content-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(.35) contrast(1.15) saturate(.85);
}
@media (max-width:860px){
  .content-split{ grid-template-columns:1fr; }
  .content-split .content-media{ display:none; }
}

/* Director's statement: full-bleed photo / text / full-bleed photo, per EMK page 6 */
.statement-photo{ width:100%; line-height:0; background:#000; }
.statement-photo img{ width:100%; height:auto; display:block; filter: grayscale(.2) contrast(1.1) saturate(.9); }
/* Feather the slate photo's top edge into the page, same technique as the
   gas-mask photo's edge on the press page, rather than a painted border. */
.statement-photo.slate{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 9%, #000 24%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 9%, #000 24%);
}
.statement-text{ padding-top:1em; }
.statement-text .lede{ font-size: 1.2em; color: var(--gold); }
.statement-sign{
  margin-top:2.5em; padding-top:1.5em; border-top:1px solid var(--border);
  font-family: var(--stencil); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:1.3rem; line-height:1.3;
}
.statement-sign .dim{ font-family: var(--mono); font-weight:400; text-transform:none; letter-spacing:.04em; font-size:.7rem; }
@media (max-width: 860px){
  .page-hero.split{ grid-template-columns: 1fr; min-height:auto; }
  .page-hero.split .page-hero-media{ display:none; }
  .page-hero.split .page-hero-text{ padding: 7em clamp(1.25rem,4vw,3rem) 2.5em; }
}
.credit-table{ width:100%; border-collapse:collapse; margin: 1.5em 0; }
.credit-table tr{ border-bottom: 1px solid var(--border); }
.credit-table td{ padding: .8em .5em; font-size:.95rem; }
.credit-table td:first-child{ font-family: var(--mono); text-transform:uppercase; letter-spacing:.04em; font-size:.72rem; color: var(--ink-dim); width: 40%; }

.laurel-list{ display:flex; flex-wrap:wrap; gap: 0; margin: 1.5em 0; padding:0; list-style:none; border: 1px solid var(--border); }
.laurel-list li{
  border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:.7em 1em; font-family: var(--mono);
  font-size:.7rem; letter-spacing:.02em; text-transform:uppercase; color: var(--ink-dim); flex: 1 1 220px;
}
.laurel-list li b{ color: var(--gold); display:block; font-size:.68rem; margin-bottom:.2em; }

/* ---------- Laurel badges: red laurel-wreath leaves, white lettering ---------- */
.laurel-badges{
  display:flex; flex-wrap:wrap; gap: .8em; margin: 2em 0; padding:0; list-style:none;
  justify-content:center;
}
.laurel-badge{
  position:relative; overflow:hidden;
  flex: 0 1 210px; height: 215px;
  display:flex; flex-direction:column; align-items:center;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.2em 2.5em;
  color: #fff;
  text-align:center;
}
.laurel-badge::before{
  /* grit texture, scoped to the badge only */
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.12; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.laurel-badge .wreath{
  position:absolute; top:50%; width: 32px; height: 62px; margin-top:-31px; color: var(--accent);
}
/* Wreaths sit in the badge's own side padding (42.5px = the badge's 2.5em
   padding), not inside .fest's text column -- .fest is only ~123px wide,
   nowhere near enough room to flank real festival names without this. */
.laurel-badge .wreath-left{ left: -32.5px; }
.laurel-badge .wreath-right{ right: -32.5px; transform: scaleX(-1); }
.laurel-badge .tier{
  position:relative; flex: 0 0 auto; display:block; font-family: var(--mono); font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; color: var(--gold);
}
.laurel-badge .fest{
  position:relative; flex: 1 1 auto; align-self:stretch; width:100%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--stencil); font-weight:800; font-size:1.15rem;
  line-height:1.2; text-transform:uppercase; color:#fff; letter-spacing:.01em;
}
.laurel-badge .yr{
  position:relative; flex: 0 0 auto; display:block; font-family: var(--mono); font-size:.85rem;
  letter-spacing:.08em; color: var(--ink-dim);
}

.journal-list{ display:flex; flex-direction:column; }
.journal-entry{ padding: 2.2em 0; border-bottom: 1px solid var(--border); }
.journal-entry:first-child{ padding-top:0; }
.journal-entry .eyebrow{ margin-bottom:.4em; }
.journal-entry h3{ margin-bottom:.3em; }
.journal-entry .date{ font-family: var(--mono); font-size:.72rem; letter-spacing:.06em; color: var(--ink-dim); text-transform:uppercase; display:block; margin-bottom:1em; }

/* ---------- Press kit page strip ---------- */
.kit-strip{
  display:flex; gap: 1em; overflow-x: auto; padding: .5em .1em 1.2em;
  scroll-snap-type: x proximity;
}
.kit-page{
  flex: 0 0 auto; width: 160px; text-decoration:none; color: var(--ink-dim);
  scroll-snap-align: start;
  background:none; border:none; padding:0; margin:0; font:inherit; text-align:left;
  cursor: zoom-in; display:block;
}
.kit-page img{ border: 1px solid var(--border); width:100%; height:auto; transition: border-color .2s; }
.kit-page:hover img{ border-color: var(--accent); }
.kit-page span{
  display:block; margin-top:.6em; font-family: var(--mono); font-size:.68rem;
  letter-spacing:.03em; text-transform:uppercase; color: var(--ink-dim);
}
.kit-hint{ font-family: var(--mono); font-size:.7rem; color: var(--ink-dim); letter-spacing:.04em; margin: 0 0 1.5em; }
.kit-dl{ display:flex; gap: 1em; flex-wrap:wrap; margin-top: 1em; }

.noscript-note{ padding: .8em 1em; background: var(--surface); border:1px solid var(--border); font-size:.85rem; }