/* ============================================================
   Rafa Diniz, Photography and Film
   A near-black projection room. The work is lit; everything
   else recedes. Type carries the motion, images hold still.
   ============================================================ */

:root {
  --ink:        #0a0a0b;
  --ink-2:      #121213;
  --paper:      #f3f0ea;
  --paper-dim:  #a9a49b;
  /* 5.06:1 on --ink. The previous #6d6862 was 3.59:1, and every use of it
     is 10-11px mono, which is exactly where WCAG asks for 4.5:1. */
  --paper-mute: #85807a;
  --line:       rgba(243, 240, 234, .14);
  --line-soft:  rgba(243, 240, 234, .07);
  --ember:      #e2542c;

  --edge: clamp(20px, 5vw, 64px);
  --gap:  clamp(16px, 2.4vw, 32px);

  --f-disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .62s;
}

/* ── reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-disp);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

::selection { background: var(--ember); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.srOnly {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 16px; background: var(--paper); color: var(--ink);
  font-family: var(--f-mono); font-size: 12px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Every other container in the layout is `max-width + margin auto + width
   100%`. Without the width the auto margins resolve against the grid track
   and the heading shrink-wraps to its text, so section titles sat centred on
   a wide screen and left aligned on a narrow one. */
.secHead {
  padding: 0 var(--edge);
  max-width: 1560px; margin: 0 auto; width: 100%;
  display: grid; gap: 20px;
}
.secHead__title {
  font-size: clamp(2.6rem, 8vw, 6.4rem);
  line-height: .94;
  letter-spacing: -.035em;
  font-weight: 700;
}
.secHead__note {
  color: var(--paper-dim);
  max-width: 42ch;
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
}

/* ── header ──────────────────────────────────────────────── */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: clamp(16px, 2.2vw, 26px) var(--edge);
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.hdr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 10, 11, .55), transparent);
  transition: opacity .4s var(--ease);
}
.hdr.is-solid { background: rgba(10, 10, 11, .82); backdrop-filter: blur(12px); }
.hdr.is-solid::before { opacity: 0; }
.hdr.is-hidden { transform: translateY(-110%); }
.hdr__mark { display: grid; gap: 2px; line-height: 1.1; }
.hdr__markName { font-weight: 700; letter-spacing: -.02em; font-size: 1rem; }
.hdr__markRole {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim);
}
.hdr__nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.hdr__nav a {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  position: relative; padding: 4px 0;
}
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .34s var(--ease);
}
.hdr__nav a:hover::after, .hdr__nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.hdr__cta::after { transform: scaleX(1) !important; }

.hdr__burger { display: none; align-items: center; gap: 10px; }
.hdr__burgerLabel { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.hdr__burgerIcon { display: grid; gap: 5px; width: 22px; }
.hdr__burgerIcon i { height: 1px; background: currentColor; transition: transform .34s var(--ease); display: block; }
.hdr__burger[aria-expanded="true"] .hdr__burgerIcon i:first-child { transform: translateY(3px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] .hdr__burgerIcon i:last-child  { transform: translateY(-3px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 110;
  background: var(--ink);
  display: grid; align-content: center;
  padding: var(--edge);
}
.menu__nav { display: grid; gap: clamp(8px, 2vw, 18px); }
.menu__nav a {
  font-size: clamp(2.2rem, 11vw, 4.4rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1;
  display: flex; align-items: baseline; gap: 16px;
}
.menu__nav a span {
  font-family: var(--f-mono); font-size: 12px; font-weight: 400;
  letter-spacing: .1em; color: var(--paper-mute);
}

/* ── 01 hero ─────────────────────────────────────────────
   Tall section, sticky stage. Only reserve the extra scroll when there is a
   sequence to spend it on; without motion this is a plain 100svh hero. */
.hero { position: relative; height: 100svh; background: var(--ink); }
html.motion .hero { height: 260svh; }
/* Matches the guard in heroTakeover(): no sequence here, so no scroll for it. */
@media (max-aspect-ratio: 4 / 5) { html.motion .hero { height: 100svh; } }

.hero__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--edge) * 2.6) var(--edge) var(--edge);
}

.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/video/hero-poster.jpg") center / cover no-repeat var(--ink);
}
.hero__video,
.hero__reel { width: 100%; height: 100%; object-fit: cover; }
.hero__video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  /* Pushed back so the name always reads over it. The grade lifts as the
     titles leave and the reel takes the frame. */
  filter: saturate(.82) contrast(1.04) brightness(.86);
}
.hero__video.is-ready { opacity: 1; }
.hero__reel { position: absolute; inset: 0; opacity: 0; }

/* On a portrait screen, covering with a 2.39:1 film means scaling it ~5x and
   throwing away most of the width, so the picture turns to mush and the reel's
   own burned-in subtitles run off the edges. Letterbox it instead, which is
   how a film should sit on a phone anyway. The closing bars land exactly on
   those edges, since both are derived from the same 2.39:1 band. */
@media (max-aspect-ratio: 4 / 5) {
  .hero__reel { object-fit: contain; background: var(--ink); }
}

.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,11,.80) 0%, rgba(10,10,11,.42) 30%, rgba(10,10,11,.62) 70%, rgba(10,10,11,.96) 100%),
    radial-gradient(130% 95% at 50% 45%, transparent 24%, rgba(10,10,11,.68) 100%);
}

/* Close to 2.39:1 on the way out, the handoff into the films. */
.hero__bar {
  position: absolute; left: 0; right: 0;
  height: 50%;
  background: var(--ink);
  transform: scaleY(0);
  will-change: transform;
}
.hero__bar--top    { top: 0;    transform-origin: 50% 0%; }
.hero__bar--bottom { bottom: 0; transform-origin: 50% 100%; }

.hero__body { position: relative; z-index: 1; align-self: center; display: grid; gap: clamp(16px, 2.4vw, 26px); max-width: 1560px; margin: 0 auto; width: 100%; }
.hero__title {
  font-size: clamp(3.4rem, 15.5vw, 15rem);
  line-height: .84;
  letter-spacing: -.05em;
  font-weight: 800;
  text-transform: uppercase;
}
.hero__lede {
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.7vw, 1.35rem);
  color: rgba(243, 240, 234, .86);
}
.hero__lede em { font-family: var(--f-serif); font-style: italic; color: var(--paper); }

.hero__foot {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  max-width: 1560px; margin: 0 auto; width: 100%;
  padding-top: clamp(28px, 5vw, 60px);
}
.hero__cue {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  display: grid; gap: 12px; justify-items: start;
}
.hero__cueLine {
  width: 1px; height: 46px; background: var(--line);
  position: relative; overflow: hidden;
}
.hero__cueLine::after {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* The showreel control sits in the hero, because the hero *is* the reel
   playing quietly. */
.heroReel {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 20px 12px 14px;
  border: 1px solid rgba(243, 240, 234, .34);
  border-radius: 999px;
  background: rgba(10, 10, 11, .3);
  backdrop-filter: blur(6px);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.heroReel__icon {
  width: 0; height: 0; flex: none; margin-left: 3px;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.heroReel__text i { font-style: normal; opacity: .6; }
.heroReel:hover, .heroReel:focus-visible {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}

/* Player chrome for the takeover. */
.hero__controls {
  position: absolute; z-index: 3;
  left: 50%; bottom: clamp(20px, 4vw, 46px);
  transform: translateX(-50%);
  display: flex; gap: 10px;
  opacity: 0;
}
.heroCtl {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid rgba(243, 240, 234, .3);
  border-radius: 999px;
  background: rgba(10, 10, 11, .46);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.heroCtl:hover, .heroCtl:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.heroCtl__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor; opacity: .45;
}
.heroCtl[aria-pressed="true"] .heroCtl__dot { opacity: 1; background: var(--ember); }

/* ── 03 films ────────────────────────────────────────────── */
.films { padding: clamp(60px, 10vh, 120px) 0 clamp(80px, 14vh, 180px); display: grid; gap: clamp(70px, 12vh, 150px); }

.film {
  max-width: 1560px; margin: 0 auto; width: 100%;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.film--alt .film__meta { order: 2; }
/* The columns are asymmetric, so reversing the order must reverse the
   widths too, otherwise the alternating row hands the still the narrow
   column and the image shrinks by a third. */
.film--alt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.film__meta { display: grid; gap: 18px; align-content: center; }
.film__no { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; color: var(--paper-mute); }
.film__title {
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: .96; letter-spacing: -.04em; font-weight: 700;
}
.film__sub { font-family: var(--f-serif); font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--paper-dim); margin-top: -8px; }
.film__facts { display: grid; gap: 10px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 16px 0; }
.film__facts > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; align-items: baseline; }
.film__facts dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mute); }
.film__facts dd { font-size: .94rem; }
.film__copy { color: var(--paper-dim); max-width: 40ch; }

.playBtn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 22px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  justify-self: start;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.playBtn__icon {
  width: 0; height: 0; flex: none;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 4px;
}
.playBtn:hover, .playBtn:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.film__figure { overflow: hidden; background: var(--ink-2); }
.film--alt .film__figure { order: 1; }
.film__figure img {
  width: 100%; height: auto; aspect-ratio: 1800 / 754; object-fit: cover;
  transition: transform .8s var(--ease);
}
.film:hover .film__figure img { transform: scale(1.02); }

/* ── 04 work ─────────────────────────────────────────────── */
.work { padding: clamp(70px, 12vh, 150px) 0 clamp(60px, 10vh, 120px); display: grid; gap: clamp(34px, 5vw, 56px); }

.filters {
  max-width: 1560px; margin: 0 auto; width: 100%;
  padding: 0 var(--edge);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.filters button {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--paper-dim);
  transition: color .26s var(--ease), border-color .26s var(--ease), background .26s var(--ease);
}
.filters button:hover { color: var(--paper); border-color: var(--line); }
.filters button[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.filters button i { font-style: normal; opacity: .5; margin-left: .6em; }

.grid {
  max-width: 1560px; margin: 0 auto; width: 100%;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 54px) var(--gap);
  align-items: start;
}

.cell { grid-column: span 6; position: relative; }
/* Editorial rhythm: spans and vertical offsets assigned in JS so the grid
   reads like a spread rather than a uniform contact sheet. */
.cell[data-span="3"]  { grid-column: span 3; }
.cell[data-span="4"]  { grid-column: span 4; }
.cell[data-span="5"]  { grid-column: span 5; }
.cell[data-span="6"]  { grid-column: span 6; }
.cell[data-span="7"]  { grid-column: span 7; }
.cell[data-span="8"]  { grid-column: span 8; }
.cell[data-span="12"] { grid-column: span 12; }
.cell[data-drop="1"] { margin-top: clamp(20px, 5vw, 90px); }
.cell[data-drop="2"] { margin-top: clamp(36px, 9vw, 170px); }

.cell__btn { display: block; width: 100%; text-align: left; }
.cell__media {
  position: relative; overflow: hidden;
  background: var(--ink-2) center / cover no-repeat;
}
/* The build writes a static grid into the HTML; those frames must be visible
   on their own. Only the JS-rendered grid fades its images in. */
.cell__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
html.js .cell__media img { opacity: 0; }
html.js .cell__media img.is-loaded { opacity: 1; }
.cell__btn:hover .cell__media img,
.cell__btn:focus-visible .cell__media img { transform: scale(1.025); }

/* Scroll focus: the frame under the cursor comes forward while the page is
   moving, then settles back once the scroll stops. Class is added by JS only
   for a fine pointer, so touch never sees it. Transform-only: the grid does
   not reflow, the frame just overlaps its neighbours. */
.cell__media { transition: transform .55s var(--ease); }
.cell.is-focus { z-index: 2; }
.cell.is-focus .cell__media { transform: scale(1.07); }

.work__more { display: grid; justify-items: center; padding: 0 var(--edge); }
.moreBtn {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 28px;
  border: 1px solid var(--line); border-radius: 999px;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.moreBtn:hover, .moreBtn:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.work__empty { text-align: center; color: var(--paper-dim); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* ── 05 quiet moment ─────────────────────────────────────── */
.quiet { padding: clamp(60px, 10vh, 130px) 0; }
.quiet__figure { position: relative; }
/* The caption sits over whatever the bottom of the frame happens to be, and
   on a bright picture it disappears without this. */
.quiet__figure::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 48%;
  background: linear-gradient(to top, rgba(10, 10, 11, .88), transparent);
  pointer-events: none;
}
.quiet__figure img { width: 100%; height: clamp(60vh, 86vh, 100svh); object-fit: cover; }

/* ── 06 about ────────────────────────────────────────────── */
.about {
  padding: clamp(70px, 12vh, 160px) var(--edge);
  max-width: 1560px; margin: 0 auto;
  display: grid; gap: clamp(30px, 5vw, 56px);
}
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}
/* Sticky so the portrait holds the left column while the copy scrolls past it.
   The height is capped to the viewport, otherwise the frame is taller than the
   screen and there is nothing left for it to stick to. */
.about__portrait {
  overflow: hidden; background: var(--ink-2);
  position: sticky; top: clamp(70px, 12vh, 120px);
  aspect-ratio: 4 / 5; max-height: calc(100svh - clamp(110px, 18vh, 190px));
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__body { display: grid; gap: clamp(24px, 3.4vw, 40px); max-width: 60ch; }
.about__title { font-size: clamp(2rem, 5vw, 3.6rem); line-height: .98; letter-spacing: -.035em; font-weight: 700; margin-bottom: 6px; }
.about__lead { font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.28; letter-spacing: -.02em; }
/* The short measure is a desktop device: in a phone-width column it just
   leaves a ragged 100px gutter down the right. */
@media (min-width: 901px) { .about__lead { max-width: 20ch; } }
.about__block { display: grid; gap: 18px; }
.about__body p:not(.about__lead):not(.about__close) { color: var(--paper-dim); }

/* Three short chapters instead of one wall of prose: the mono kicker gives the
   eye a place to stop, and each block reveals on its own. */
.about__chapters { display: grid; gap: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line-soft); padding-top: clamp(26px, 3vw, 38px); }
.about__chapter { display: grid; grid-template-columns: 9em 1fr; gap: 14px; align-items: baseline; }
.about__kicker {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-mute); font-weight: 400;
}
.about__close {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.42;
  border-top: 1px solid var(--line-soft); padding-top: clamp(26px, 3vw, 38px);
}

/* ── 07 services ─────────────────────────────────────────── */
.serv { padding: clamp(60px, 10vh, 140px) var(--edge); max-width: 1560px; margin: 0 auto; display: grid; gap: clamp(24px, 4vw, 44px); }
.serv__list { border-top: 1px solid var(--line-soft); }
.serv__list li { border-bottom: 1px solid var(--line-soft); }
.serv__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: clamp(14px, 3vw, 40px);
  color: var(--paper-dim);
  padding: clamp(14px, 2.4vw, 26px) 0;
  transition: color .3s var(--ease), padding-left .4s var(--ease);
}
.serv__title {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1;
}
.serv__name {
  font-size: clamp(1.5rem, 4vw, 2.9rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
}
.serv__list a:hover, .serv__list a:focus-visible { color: var(--paper); padding-left: clamp(8px, 1.6vw, 24px); }

/* ── 08 contact ──────────────────────────────────────────── */
.contact {
  background: var(--paper); color: var(--ink);
  padding: clamp(80px, 16vh, 190px) var(--edge);
  display: grid; gap: clamp(18px, 3vw, 30px);
  justify-items: start;
}
.contact__title { font-size: clamp(2.2rem, 6.5vw, 4.8rem); line-height: .94; letter-spacing: -.04em; font-weight: 700; }
.contact__copy { max-width: 44ch; color: rgba(10, 10, 11, .66); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.contact__mail {
  font-size: clamp(1.2rem, 3.4vw, 2.6rem);
  font-weight: 600; letter-spacing: -.03em;
  border-bottom: 2px solid rgba(10, 10, 11, .35);
  padding-bottom: 4px; margin-top: 8px;
  transition: border-color .3s var(--ease);
  overflow-wrap: anywhere;
}
.contact__mail:hover, .contact__mail:focus-visible { border-color: var(--ink); }

/* ── footer ──────────────────────────────────────────────── */
.foot { padding: clamp(40px, 6vw, 70px) var(--edge); display: grid; gap: 26px; }
.foot__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot__mark { font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 700; letter-spacing: -.04em; }
.foot__nav { display: flex; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap; }
.foot__nav a { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-dim); transition: color .26s var(--ease); }
.foot__nav a:hover, .foot__nav a:focus-visible { color: var(--paper); }
.foot__row--fine { border-top: 1px solid var(--line-soft); padding-top: 22px; }
.foot__row--fine p { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-mute); }

/* ── lightbox ────────────────────────────────────────────── */
/* `hidden` must win over the layout display below. */
[hidden] { display: none !important; }

.lb, .vp { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; }
.lb__scrim, .vp__scrim { position: absolute; inset: 0; background: rgba(6, 6, 7, .95); }
.lb__figure {
  position: relative; z-index: 1;
  max-width: min(94vw, 1500px); max-height: 86svh;
  display: grid; gap: 14px; justify-items: center;
}
/* The overlay already locks the page, so a horizontal drag here is ours to
   read as a swipe. `pan-y` keeps the browser's vertical gestures intact. */
.lb__figure { touch-action: pan-y; }
.lb__img { max-width: 100%; max-height: 74svh; width: auto; height: auto; object-fit: contain; }
.lb__cap { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; justify-content: center; }
.lb__note, .lb__count { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-mute); }

.lb__btn {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: clamp(48px, 7vw, 74px); height: clamp(48px, 7vw, 74px);
  border: 1px solid var(--line); border-radius: 50%;
  transition: background .26s var(--ease), border-color .26s var(--ease);
}
.lb__btn:hover { background: rgba(243, 240, 234, .1); border-color: var(--paper); }
.lb__btn::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-left: 1px solid var(--paper); border-bottom: 1px solid var(--paper);
}
.lb__btn--prev { left: clamp(8px, 2vw, 30px); }
.lb__btn--prev::after { transform: translate(-30%, -50%) rotate(45deg); }
.lb__btn--next { right: clamp(8px, 2vw, 30px); }
.lb__btn--next::after { transform: translate(-70%, -50%) rotate(-135deg); }

.lb__close, .vp__close {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(6, 6, 7, .55); backdrop-filter: blur(6px);
  transition: background .26s var(--ease), color .26s var(--ease);
}
.lb__close, .vp__close { position: absolute; z-index: 2; top: var(--edge); right: var(--edge); }
.lb__close:hover, .vp__close:hover { background: var(--paper); color: var(--ink); }
/* ── film player ─────────────────────────────────────────── */
/* `--vp-ar` is the aspect ratio of whatever is playing, set by the player when
   it opens. Capping the width by the height as well as the viewport keeps a
   16:9 film from running taller than the screen: it used to be sized on width
   alone, so on a short laptop viewport the bottom of the picture, and the
   video controls with it, sat below the fold with the page scroll locked. */
.vp__box {
  position: relative; z-index: 1;
  width: min(94vw, 1400px, calc(86svh * var(--vp-ar, 1.7778)));
}
.vp__frame { position: relative; aspect-ratio: var(--vp-ar, 1.7778); background: #000; }
.vp__frame iframe,
.vp__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vp__frame video { object-fit: contain; background: #000; }

/* ── enhanced-only initial states ────────────────────────── */
html.js [data-reveal] { opacity: 0; transform: translateY(22px); }
html.js .split__word { display: inline-block; overflow: hidden; vertical-align: top; }
html.js .split__inner { display: inline-block; transform: translateY(105%); }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }

  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { max-width: 420px; position: static; max-height: none; }

  /* One column, and one reading order for both films, since the alternating
     layout only means anything when there are two columns to alternate.
     `display: contents` lifts the meta's children into the film's own grid
     so the still can sit between the title and the details, instead of
     stranded above the title or orphaned below the button. */
  .film { grid-template-columns: 1fr; gap: 20px; }
  .film__meta { display: contents; }
  .film__no      { order: 1; }
  .film__title   { order: 2; }
  .film__sub     { order: 3; }
  .film__figure,
  .film--alt .film__figure { order: 4; }
  .film__facts   { order: 5; }
  .film__copy    { order: 6; }
  .film .playBtn { order: 7; }

  /* Tablet keeps two up, because one full width column at 900px makes every frame
     enormous and the grid endless. It drops to one column at 640 below. */
  .grid { gap: clamp(26px, 5vw, 46px) var(--gap); }
  .cell, .cell[data-span] { grid-column: span 6; }
  .cell[data-drop] { margin-top: 0; }
  .quiet__figure img { height: 70svh; }
  .lb__btn { top: auto; bottom: calc(var(--edge) - 6px); transform: none; }
}

@media (max-width: 640px) {
  /* The name carries the screen on a phone: bigger, stacked over two lines. */
  .hero__title { font-size: clamp(3.4rem, 21vw, 7rem); line-height: .88; }
  .hero__lede { font-size: 1rem; max-width: 34ch; }

  /* Stack the hero footer instead of letting three items fight over one row,
     and give the play control a proper full-width tap target. */
  .hero__foot { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero__cue { display: none; }
  .heroReel { width: 100%; justify-content: center; padding: 15px 20px; }

  /* Chips run off the side rather than stacking three rows deep. */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }

  .film__facts > div, .about__chapter { grid-template-columns: 1fr; gap: 6px; }
  .quiet__figure img { height: 62svh; }
  .grid { gap: clamp(30px, 8vw, 56px) var(--gap); }
  .cell, .cell[data-span] { grid-column: span 12; }
}

/* A phone held sideways: the takeover runs here, so keep the name from
   swallowing a 390px-tall viewport. */
@media (max-height: 460px) and (min-aspect-ratio: 1 / 1) {
  .hero__stage { padding-top: calc(var(--edge) * 2); }
  .hero__title { font-size: clamp(2.4rem, 11vw, 6rem); }
  .hero__lede { font-size: .95rem; max-width: 40ch; }
  .hero__foot { padding-top: 14px; }
  .hero__cue { display: none; }
}

/* ── touch targets ───────────────────────────────────────
   Several controls are comfortably clickable with a mouse but too small for
   a thumb, the menu button worst of all at 19px tall. Only grow them where
   there is actually a finger involved, so the desktop header stays tight. */
@media (pointer: coarse), (max-width: 900px) {
  .hdr__mark { padding-block: 6px; }
  .hdr__burger { min-height: 44px; }
  .foot__nav a,
  .contact__mail,
  .menu__nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .contact__mail { align-items: baseline; }
  .lb__btn { min-width: 52px; min-height: 52px; }
  .filters button, .moreBtn, .playBtn, .heroCtl, .lb__close, .vp__close {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js .split__inner { transform: none; }
  .hero { height: 100svh; }
  .hero__cueLine::after { animation: none; transform: none; }
  .hero__video { opacity: 1; }
}