/* ==========================================================================
   Julian Ashford — Videographer & Director
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body, h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

:root {
  --ink: #14120e;
  --ink-soft: #2b271f;
  --paper: #f2ece1;
  --paper-dim: #e6ddcc;
  --stone: #8c8471;
  --line: rgba(20, 18, 14, 0.14);
  --line-strong: rgba(20, 18, 14, 0.32);
  --paper-line: rgba(242, 236, 225, 0.24);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --gap: clamp(10px, 1.2vw, 22px);
  --pad: clamp(20px, 6vw, 120px);

  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;

  --fs-hero: clamp(3rem, 9vw, 8.5rem);
  --fs-display: clamp(2.2rem, 5vw, 4.6rem);
  --fs-stat: clamp(1.7rem, 3.8vw, 3.4rem);
  --fs-body: clamp(0.98rem, 1.05vw, 1.1rem);
  --fs-small: clamp(0.7rem, 0.8vw, 0.8rem);
}

html, body {
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (hover: hover) and (pointer: fine) {
  body.js-cursor, body.js-cursor a, body.js-cursor button, body.js-cursor .frame, body.js-cursor .film__cover { cursor: none; }
}

::selection { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Grain overlay
   -------------------------------------------------------------------------- */
.grain {
  position: fixed;
  top: -60%; left: -60%;
  width: 220%; height: 220%;
  z-index: 150;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
  background-size: 180px;
  animation: grain 1.1s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1.5%, 1%); }
  50% { transform: translate(1%, -1.5%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* --------------------------------------------------------------------------
   Custom cursor — white dot + difference blend stays visible on any background
   -------------------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 600; /* above lightbox (400) and screener so it stays visible inside modals */
  pointer-events: none;
}
.cursor__dot {
  display: flex; align-items: center; justify-content: center;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  transition:
    width 0.45s var(--ease), height 0.45s var(--ease),
    margin 0.45s var(--ease), background-color 0.45s var(--ease);
}
.cursor__label {
  opacity: 0;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  transition: opacity 0.3s var(--ease);
}
/* over links / buttons: grow slightly, keep difference blend */
.cursor--link .cursor__dot {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
}
/* over gallery frames / covers: expand to a labelled disc, no blend */
.cursor--view .cursor__dot {
  width: 92px; height: 92px;
  margin: -46px 0 0 -46px;
  background: var(--paper);
  mix-blend-mode: normal;
  box-shadow: 0 4px 30px rgba(20, 18, 14, 0.25);
}
.cursor--view .cursor__label { opacity: 1; transition-delay: 0.08s; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* --------------------------------------------------------------------------
   Placeholder media
   -------------------------------------------------------------------------- */
.img-ph { position: relative; overflow: hidden; background: #d6cfc0; }
.img-ph::after {
  content: attr(data-ph);
  position: absolute; left: 0.75rem; bottom: 0.6rem;
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(20,18,14,0.4); pointer-events: none; z-index: 0;
}
.img-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.img-ph img[src=""], .img-ph img:not([src]) { opacity: 0; }

/* --------------------------------------------------------------------------
   Section head
   -------------------------------------------------------------------------- */
.section-head {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: 0 var(--pad);
  margin-bottom: clamp(2.4rem, 5vw, 5rem);
}
.section-head__index {
  font-family: var(--font-serif); font-style: italic;
  font-size: 0.95rem; color: var(--stone);
}
.section-head__label {
  font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 0.2rem; border-bottom: 1px solid var(--line-strong);
}
.section-head__note {
  margin-left: auto; font-size: var(--fs-small); color: var(--stone);
  max-width: 24ch; text-align: right;
}

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 500;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  clip-path: inset(0 0 0 0);
}
.preloader__frames {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.preloader__frame {
  position: absolute;
  width: min(32vw, 340px);
  aspect-ratio: 4 / 5;
  opacity: 0;
  background: #241f17;
}
.preloader__frame::after { display: none; }
.preloader__mark { position: relative; z-index: 2; text-align: center; mix-blend-mode: difference; }
.preloader__name {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 2.9rem);
  letter-spacing: 0.01em;
}
.preloader__role {
  margin-top: 0.7rem;
  font-size: var(--fs-small); letter-spacing: 0.16em; text-transform: uppercase;
}
.preloader__foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 2.4rem;
  display: flex; align-items: center; gap: 1.4rem;
  font-size: var(--fs-small); letter-spacing: 0.08em;
}
.preloader__count { font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.preloader__bar { flex: 1; height: 1px; background: rgba(242,236,225,0.18); position: relative; }
.preloader__bar-fill { position: absolute; inset: 0; width: 0%; background: var(--paper); }

body.is-loading { overflow: hidden; height: 100vh; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem, 2vw, 1.7rem) var(--pad);
  mix-blend-mode: difference;
  color: #fff;
  transform: translateY(-100%);
  opacity: 0;
}
.nav__mark {
  font-family: var(--font-serif); font-style: italic; font-size: 1.05rem;
}
.nav__meta {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem); }
.nav__links a {
  font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase;
  position: relative;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -0.3rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { border: 1px solid rgba(255,255,255,0.35); padding: 0.55rem 1rem; border-radius: 999px; transition: background-color 0.35s var(--ease), color 0.35s var(--ease); }
.nav__cta:hover { background: #fff; color: #000; }
.nav__cta::after { display: none; }

/* --------------------------------------------------------------------------
   Hero — pinned triptych: center frame covers viewport, splits on scroll
   -------------------------------------------------------------------------- */
.hero { position: relative; height: 300vh; background: var(--ink); }
.hero__pin {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden;
  display: flex; align-items: stretch;
}
.hero__row {
  display: flex; flex-direction: row;
  /* gap starts at 0 — the scrub animates it open as the side panels grow in */
  gap: 0;
  padding: clamp(6px, 0.7vw, 14px);
  width: 100%; height: 100%;
}
.hero__panel { position: relative; flex: 1 1 0%; overflow: hidden; z-index: 1; }
.hero__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* sides start collapsed so the center image fills the viewport uncropped-wide */
.hero__panel--left, .hero__panel--right { flex-grow: 0; }
.hero__panel--center { z-index: 2; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20,18,14,0.4) 0%, rgba(20,18,14,0) 20%),
    linear-gradient(to top, rgba(20,18,14,0.9) 0%, rgba(20,18,14,0.6) 34%, rgba(20,18,14,0.2) 58%, rgba(20,18,14,0) 78%);
}
.hero__content {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 16vh; z-index: 4;
  color: var(--paper);
}
.hero__kicker {
  font-size: var(--fs-small); letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: clamp(0.9rem, 1.6vw, 1.5rem);
  overflow: hidden;
}
.hero__title {
  font-family: var(--font-serif); font-weight: 340; font-size: var(--fs-hero);
  line-height: 0.98; letter-spacing: -0.015em;
}
.hero__title em { font-style: italic; font-weight: 320; }
.hero__line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__line-inner { display: block; }
.hero__sub {
  margin-top: clamp(1.1rem, 2vw, 1.7rem);
  font-size: var(--fs-body); color: rgba(242,236,225,0.72);
  max-width: 34ch; overflow: hidden;
}
.hero__foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 2.2rem; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
}
.hero__foot-item { display: flex; align-items: center; gap: 0.6rem; }
.hero__scroll-dash {
  width: 1px; height: 20px; background: var(--paper);
  display: inline-block; animation: scrollDash 1.8s var(--ease) infinite;
}
@keyframes scrollDash { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.01% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero__credit {
  position: absolute; top: clamp(4.6rem, 8vh, 6.5rem); left: var(--pad); right: var(--pad); z-index: 4;
  display: flex; justify-content: space-between;
  font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); opacity: 0;
}

/* --------------------------------------------------------------------------
   Statement
   -------------------------------------------------------------------------- */
.statement { padding: clamp(7rem, 15vw, 13rem) 0 clamp(6rem, 13vw, 11rem); }
.statement__text {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: var(--fs-stat); line-height: 1.3; letter-spacing: -0.01em;
  max-width: 24ch; padding: 0 var(--pad);
}
.statement__text .word { display: inline-block; opacity: 0.14; }

/* --------------------------------------------------------------------------
   Work — editorial grid, locked aspect ratios, visible captions
   -------------------------------------------------------------------------- */
.work { padding-bottom: clamp(6rem, 12vw, 10rem); }
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: clamp(3.5rem, 7vw, 8rem);
  padding: 0 var(--pad);
  align-items: start;
}
.frame__media {
  aspect-ratio: var(--ar, 3 / 2);
  clip-path: inset(0 0 0 0);
}
.frame__media img {
  height: 116%;
  will-change: transform;
  transition: scale 1s var(--ease-soft);
}
.frame:hover .frame__media img, .frame:focus-visible .frame__media img { scale: 1.045; }
.frame:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.frame__caption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 0.9rem;
}
.frame__title { font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 1.4vw, 1.25rem); }
.frame__meta { font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); white-space: nowrap; }

/* editorial placement — staggered, magazine rhythm */
.frame--1  { grid-column: 1 / span 7; }
.frame--2  { grid-column: 9 / span 4; margin-top: clamp(4rem, 10vw, 12rem); }
.frame--3  { grid-column: 2 / span 4; }
.frame--4  { grid-column: 7 / span 6; margin-top: clamp(2.5rem, 6vw, 7rem); }
.frame--5  { grid-column: 1 / span 8; }
.frame--6  { grid-column: 10 / span 3; margin-top: clamp(4rem, 9vw, 11rem); }
.frame--7  { grid-column: 1 / span 4; }
.frame--8  { grid-column: 6 / span 7; margin-top: clamp(2.5rem, 6vw, 7rem); }
.frame--9  { grid-column: 2 / span 5; }
.frame--10 { grid-column: 8 / span 5; margin-top: clamp(3.5rem, 8vw, 9rem); }

/* --------------------------------------------------------------------------
   Filmstrip — pinned horizontal reel
   -------------------------------------------------------------------------- */
.filmstrip { position: relative; height: 320vh; background: var(--ink); }
.filmstrip__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}
.filmstrip__label {
  position: absolute; top: clamp(4.6rem, 8vh, 6.5rem); left: var(--pad); z-index: 3;
  color: var(--paper); font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 1.4vw, 1.3rem);
}
.filmstrip__track {
  display: flex; align-items: center; gap: clamp(28px, 4.5vw, 72px);
  padding-left: var(--pad); will-change: transform;
}
/* true image ratios — 3:2 landscape / 2:3 portrait — sized by height, never cropped narrow */
.filmstrip__item {
  position: relative; flex: 0 0 auto;
  height: min(52vh, 60vw);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.filmstrip__item--portrait { aspect-ratio: 2 / 3; }
/* alternating editorial offsets */
.filmstrip__item:nth-child(odd) { transform: translateY(-32px); }
.filmstrip__item:nth-child(even) { transform: translateY(32px); }
.filmstrip__item img { width: 100%; height: 100%; object-fit: cover; }
.filmstrip__progress {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 2.4rem; z-index: 3;
  height: 1px; background: rgba(242,236,225,0.18);
}
.filmstrip__progress-fill {
  position: absolute; inset: 0;
  background: var(--paper);
  transform: scaleX(0); transform-origin: left;
}

/* --------------------------------------------------------------------------
   Featured film
   -------------------------------------------------------------------------- */
.film { padding-top: clamp(6rem, 12vw, 10rem); padding-bottom: clamp(6rem, 12vw, 10rem); }
.film__cover { cursor: pointer; }
.film__cover:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.film__cover {
  margin: 0 var(--pad);
  aspect-ratio: 21 / 10;
  max-height: 82vh;
  width: auto;
  clip-path: inset(0 0 0 0);
}
.film__cover::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,18,14,0.92) 0%, rgba(20,18,14,0.6) 26%, rgba(20,18,14,0.15) 48%, rgba(20,18,14,0) 62%);
}
.film__titlecard {
  position: absolute; left: clamp(1.2rem, 3vw, 3rem); bottom: clamp(1.2rem, 3vw, 3rem); right: clamp(1.2rem, 3vw, 3rem); z-index: 2;
  color: var(--paper);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.film__name {
  font-family: var(--font-serif); font-style: italic; font-weight: 340;
  font-size: clamp(2.2rem, 5.4vw, 5rem); line-height: 1;
}
.film__note { font-size: var(--fs-small); letter-spacing: 0.04em; max-width: 46ch; color: rgba(242,236,225,0.75); }
.film__meta {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--pad) 0;
  margin: 0 0 var(--gap);
  font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone);
}
.film__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  padding: 0 var(--pad);
}
.film__still { aspect-ratio: 16 / 10; clip-path: inset(0 0 0 0); }
.film__still img { height: 116%; }

/* --------------------------------------------------------------------------
   Marquee strip
   -------------------------------------------------------------------------- */
.marquee-strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(1.1rem, 2vw, 1.8rem) 0;
  margin: clamp(5rem, 11vw, 9rem) 0;
  overflow: hidden; white-space: nowrap;
}
.marquee-strip__track {
  display: inline-flex; gap: clamp(1rem, 2vw, 2rem);
  animation: marquee 36s linear infinite;
}
.marquee-strip__track span {
  font-family: var(--font-serif); font-style: italic; font-weight: 320;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  color: var(--stone);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-strip__track { animation: none; } }

/* --------------------------------------------------------------------------
   Studio / about
   -------------------------------------------------------------------------- */
.about { padding-bottom: clamp(6rem, 12vw, 10rem); }
.about__body {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.6rem, 4vw, 5rem);
  padding: 0 var(--pad); margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.about__heading {
  font-family: var(--font-serif); font-weight: 340; font-size: var(--fs-display);
  line-height: 1.04; letter-spacing: -0.01em;
}
.about__heading em { font-style: italic; color: var(--stone); }
.about__col { display: flex; flex-direction: column; gap: 1.1rem; align-self: end; }
.about__text { max-width: 38ch; }
.about__image { margin: 0 var(--pad); aspect-ratio: 16 / 9; max-height: 74vh; clip-path: inset(0 0 0 0); }
.about__image img { height: 116%; }

/* --------------------------------------------------------------------------
   Outro / contact + footer
   -------------------------------------------------------------------------- */
.outro {
  position: relative;
  background: var(--ink); color: var(--paper);
  overflow: hidden;
}
.outro__bg { position: absolute; inset: 0; opacity: 0.36; }
.outro__bg img { filter: grayscale(0.35) contrast(1.02); transform: scale(1.1); }
.cta {
  position: relative; z-index: 2;
  padding: clamp(7rem, 17vw, 14rem) var(--pad) clamp(4rem, 9vw, 7rem);
}
.cta__kicker { font-family: var(--font-serif); font-style: italic; color: var(--stone); margin-bottom: 1.2rem; }
.cta__title {
  font-family: var(--font-serif); font-weight: 340; font-size: var(--fs-display);
  line-height: 1.05; letter-spacing: -0.01em;
  max-width: 20ch; margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.cta__link {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--paper-line);
}
.cta__link-arrow { transition: transform 0.4s var(--ease); }
.cta__link:hover .cta__link-arrow { transform: translateX(0.45rem); }
.cta__note { margin-top: 1.5rem; font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--stone); }

.footer { position: relative; z-index: 2; padding: clamp(2.4rem, 4vw, 3.5rem) var(--pad) 2.2rem; border-top: 1px solid rgba(242,236,225,0.14); }
.footer__cols { display: flex; flex-wrap: wrap; gap: 2.6rem 4.5rem; margin-bottom: 3rem; }
.footer__col { display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--fs-small); letter-spacing: 0.02em; }
.footer__col a { position: relative; width: fit-content; }
.footer__col a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer__label { color: var(--stone); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.35rem; }
.footer__col--last { margin-left: auto; text-align: right; }
.footer__col--last a { margin-left: auto; }
.footer__credit { margin-top: 0.9rem; color: var(--stone); }
.footer__top {
  font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(242,236,225,0.22); border-radius: 999px;
  padding: 0.65rem 1.2rem;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.footer__top:hover { background: var(--paper); color: var(--ink); }

/* --------------------------------------------------------------------------
   Screener (video modal — unreleased film)
   -------------------------------------------------------------------------- */
.screener {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.4rem, 5vw, 5rem);
}
.screener__backdrop {
  position: absolute; inset: 0;
  background: rgba(20,18,14,0.97);
}
.screener__body {
  position: relative; z-index: 2;
  width: min(920px, 100%);
}
.screener__player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0c0b08;
  border: 1px solid rgba(242,236,225,0.14);
  display: flex; align-items: center; justify-content: center;
}
.screener__play {
  display: flex; align-items: center; justify-content: center;
  width: clamp(64px, 9vw, 92px); height: clamp(64px, 9vw, 92px);
  border: 1px solid rgba(242,236,225,0.35);
  border-radius: 50%;
  opacity: 0.85;
}
.screener__triangle {
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--paper);
  margin-left: 4px;
}
.screener__badge {
  position: absolute; left: 1.2rem; bottom: 1.1rem;
  color: var(--stone);
  font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase;
}
.screener__caption {
  display: flex; align-items: baseline; gap: 1.4rem;
  margin-top: 1.2rem; color: var(--paper);
}
.screener__title { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.screener__note { font-size: var(--fs-small); letter-spacing: 0.03em; color: var(--stone); max-width: 44ch; }
.screener__close {
  position: absolute; top: clamp(1.4rem, 3vw, 2.4rem); right: var(--pad); z-index: 5;
  color: var(--paper); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem 0;
}
@media (max-width: 760px) {
  .screener__caption { flex-direction: column; gap: 0.4rem; }
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3.5rem, 7vw, 6rem);
}
.lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(20,18,14,0.97);
}
.lightbox__figure {
  position: relative; z-index: 2;
  max-width: min(1200px, 82vw); max-height: 82vh;
}
.lightbox__imgwrap {
  overflow: hidden;
  max-height: 70vh;
}
.lightbox__imgwrap img {
  max-width: min(1200px, 82vw); max-height: 70vh;
  width: auto; height: auto; object-fit: contain; margin: 0 auto;
}
.lightbox__caption {
  display: flex; align-items: baseline; gap: 1.2rem;
  margin-top: 1.1rem; color: var(--paper);
  font-size: var(--fs-small); letter-spacing: 0.06em;
  justify-content: center;
}
.lightbox__counter { color: var(--stone); font-variant-numeric: tabular-nums; }
.lightbox__name { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; letter-spacing: 0; }
.lightbox__meta { color: var(--stone); text-transform: uppercase; letter-spacing: 0.1em; }
.lightbox__close {
  position: absolute; top: clamp(1.4rem, 3vw, 2.4rem); right: var(--pad); z-index: 5;
  color: var(--paper); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem 0;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  color: var(--paper); font-size: 1.5rem;
  width: clamp(3rem, 8vw, 5rem); height: 8rem;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__nav span { transition: transform 0.35s var(--ease); }
.lightbox__nav--prev { left: clamp(0.4rem, 2.4vw, 2.4rem); }
.lightbox__nav--next { right: clamp(0.4rem, 2.4vw, 2.4rem); }
.lightbox__nav--prev:hover span { transform: translateX(-5px); }
.lightbox__nav--next:hover span { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Reduced motion — static, everything visible
   -------------------------------------------------------------------------- */
body.reduce .hero, body.reduce .filmstrip { height: auto; }
body.reduce .hero__pin { position: relative; height: 100svh; }
body.reduce .filmstrip__pin { position: relative; height: auto; padding: 6rem 0; }
body.reduce .filmstrip__track { overflow-x: auto; padding-right: var(--pad); }
body.reduce .hero__foot, body.reduce .hero__credit { opacity: 1; }
body.reduce .hero__row { gap: clamp(6px, 0.7vw, 14px); }
body.reduce .hero__panel--left, body.reduce .hero__panel--right { flex-grow: 1; }
body.reduce .filmstrip__item { transform: none; }
body.reduce .statement__text .word { opacity: 1; }

/* --------------------------------------------------------------------------
   Responsive — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .frame--1  { grid-column: 1 / span 8; }
  .frame--2  { grid-column: 9 / span 4; }
  .frame--4  { grid-column: 6 / span 7; }
  .frame--6  { grid-column: 9 / span 4; }
  .frame--9  { grid-column: 1 / span 6; }
  .frame--10 { grid-column: 7 / span 6; }
}

/* --------------------------------------------------------------------------
   Responsive — mobile: hero splits into stacked rows, single-column grid
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .nav__meta { display: none; }
  .nav__links a:not(.nav__cta) { display: none; }

  .hero { height: 260vh; }
  .hero__row { flex-direction: column; }
  .hero__content { bottom: 14vh; }
  .hero__credit { top: 4.6rem; }

  .statement__text { max-width: 18ch; }

  .work__grid { row-gap: clamp(3rem, 10vw, 4.5rem); }
  .frame--1, .frame--2, .frame--3, .frame--4, .frame--5,
  .frame--6, .frame--7, .frame--8, .frame--9, .frame--10 {
    grid-column: 1 / -1; margin-top: 0;
  }
  /* editorial rhythm: alternate a narrower inset frame */
  .frame--2, .frame--6 { grid-column: 2 / -1; }
  .frame--3, .frame--9 { grid-column: 1 / 12; }

  .filmstrip { height: 260vh; }
  /* size by width on phones so full frames fit the screen, ratios intact */
  .filmstrip__item { width: 80vw; height: auto; }
  .filmstrip__item--portrait { width: 56vw; }
  .filmstrip__item:nth-child(odd) { transform: translateY(-20px); }
  .filmstrip__item:nth-child(even) { transform: translateY(20px); }

  .film__cover { aspect-ratio: 4 / 5; }
  .film__meta { flex-wrap: wrap; }
  .film__pair { grid-template-columns: 1fr; }

  .about__body { grid-template-columns: 1fr; }
  .about__col { align-self: start; }
  .about__image { aspect-ratio: 4 / 5; max-height: none; }

  .footer__cols { gap: 2rem 3rem; }
  .footer__col--last { margin-left: 0; text-align: left; }
  .footer__col--last a { margin-left: 0; }

  .lightbox { padding: 1.2rem; }
  .lightbox__figure { max-width: 94vw; }
  .lightbox__imgwrap img { max-width: 94vw; max-height: 62vh; }
  .lightbox__caption { flex-wrap: wrap; row-gap: 0.3rem; }
  .lightbox__nav { top: auto; bottom: 3.2rem; transform: none; height: 4rem; }
}

/* --------------------------------------------------------------------------
   Ultra-wide — keep long-form text readable, let imagery breathe
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  .statement__text { max-width: 26ch; }
  .about__text { max-width: 42ch; }
  .work__grid { row-gap: 9rem; }
}