/* Motion Prompt #074 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#074 */
/* Motion Prompt #079 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#079 */
/* Motion Prompt #089 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#089 */
/* Motion Prompt #092 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#092 */
/* Motion Prompt #086 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#086 */
/* (numbers only: #074 rise-in on scroll, sharpened to 20 px / 0.5 s opacity + 0.8 s transform on an expo
   ease-out, played once; #079 scroll progress bar; #089 leader bar 180×4; #092 shutter panel, re-cut as
   a clip-path curtain; #086 the nav and card-title underlines, 0.45 s in from the left. The timing of
   the first four lives in assets/js/site/{reveal,progress,preloader,shutter}.js.)
   Desktop (fine pointer, ≥ 1024 px) adds the GSAP layer in assets/js/site/motion/ + motion.css. */

/* Site shell: index.html, project.html. Requires tokens.css, base.css, player.css.
   Layout language: letterboxed frames on ink, Cormorant display type, IBM Plex Mono camera-report
   labels. Breakpoints: 390 (phone, base), 720 (tablet), 900 (inline nav), 1100 (desktop grids),
   1440 / 1680 / 2000 / 2400 (large screens: fluid gutter, 2240 px content, stepped root size; see the
   end of this file and tokens.css). */

html { scroll-padding-top: 72px; }
/* A jump into the page (index.html#contact) is held back, in its place, until the type it shows has loaded
   (the landing script at the end of index.html; 1.5 s at most): the header stays. The hold is an opacity
   set without a transition: with motion off every property eases over 0.01 ms (base.css), which would
   leave the page showing for a frame, and visibility, being inherited, would ease so on every element. */
html.is-arriving main, html.is-arriving .site-footer { opacity: 0; transition: none !important; }
/* A modal (the frame lightbox) holds the page still under it; smooth scroll stops too (motion/smooth.js). */
html.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
main:focus, section[tabindex="-1"]:focus, footer[tabindex="-1"]:focus { outline: none; }
.mono { font-family: var(--font-mono); }
kbd {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: var(--radius-1); color: var(--paper-3);
}

/* --- Buttons ------------------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: var(--target); padding: 0 var(--s5);
  border: 1px solid var(--paper-2); border-radius: var(--radius-pill);
  background: rgb(7 8 10 / 0.35);
  color: var(--paper);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: var(--tracking-mono); text-transform: uppercase; text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.btn:hover { border-color: var(--tungsten); color: var(--tungsten); }
.btn--ghost { border-color: var(--line-strong); color: var(--paper-2); background: transparent; }
.btn--ghost[aria-pressed="true"] { border-color: var(--tungsten); color: var(--tungsten); }
.btn__play {
  width: 0; height: 0;
  border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

/* --- Tags --------------------------------------------------------------------------------------- */

.tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 3px var(--s2);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-1);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--paper-3);
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.tag--live { border-style: solid; color: var(--paper-2); }
.tag--live::before { background: var(--tally); border-color: var(--tally); }

/* --- #079 progress bar + timecode ---------------------------------------------------------------- */

/* #079: a 6 px bar along the top of the viewport, tungsten fill on a faint track. */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 6px;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
  background: rgb(236 230 218 / 0.05);
}
.progress__fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(rgb(244 178 106 / 0.9), rgb(244 178 106 / 0.62));
  transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress-css .progress__fill { animation: progress-grow linear both; animation-timeline: scroll(root block); }
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html[data-motion="off"] .progress, html[data-motion="off"] .site-header__tc { display: none; }

/* --- Header -------------------------------------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--s5);
  height: 64px; padding: 0 var(--gutter);
  transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header-solid .site-header, .site--project .site-header {
  background: rgb(7 8 10 / 0.86);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.site-header__mark {
  display: inline-flex; align-items: center; min-height: var(--target);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.12em;
  text-decoration: none; color: var(--paper);
}
.site-header__mark span, .shutter__mark span, .menu__mark { color: var(--tungsten); }
.site-header__mark span { margin: 0 0.08em; }

.site-nav { margin-left: auto; display: none; }
.site-nav ul { display: flex; gap: clamp(12px, 1.6vw, 28px); margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--target);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--paper-2); text-decoration: none;
  background: linear-gradient(var(--tungsten), var(--tungsten)) right calc(50% + 0.95em) / 0 1px no-repeat;
  transition: color var(--dur-2), background-size 450ms var(--ease-io-expo);
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--paper); background-size: 100% 1px; background-position-x: left; }
/* Contact, one click away on every page: a pill after the nav (on phones the header reads mark ·
   Contact · Menu). 36 px tall with a 44 px hit area, like the motion toggle. */
.site-header__contact {
  position: relative; display: inline-flex; align-items: center; margin-left: auto;
  min-height: 36px; padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--paper); text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-2) var(--ease-ui);
}
.site-header__contact::after { content: ""; position: absolute; inset: -5px; }   /* 44 px hit area (34 inside the border + 10) */
.site-header__contact:hover { border-color: var(--tungsten); }
/* The timecode is decoration: progress.js writes it to data-tc, so it is never page text. */
.site-header__tc {
  margin: 0;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--paper-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.site-header__tc::after { content: attr(data-tc); }
@media (max-width: 1279px) { .site-header__tc { display: none; } }   /* the header never overflows at 1024–1279 px */
.site-header__motion {
  display: none;
  min-height: 36px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--paper-3);
  position: relative;
}
.site-header__motion::after { content: ""; position: absolute; inset: -5px; }   /* 44 px hit area, as the pill's */
.site-header__motion:hover { color: var(--paper); border-color: var(--paper-3); }
.site-header__motion[aria-pressed="true"] { color: var(--tungsten); border-color: var(--tungsten); }
/* Pressed is also shown by shape, not colour alone: a filled dot before the label. */
[data-motion-toggle][aria-pressed="true"]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: var(--s2); border-radius: 50%;
  background: currentColor; vertical-align: 0.05em;
}
@media (forced-colors: active) {
  [data-motion-toggle][aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}
/* The same 36 px pill as Contact beside it, with the same 44 px hit area. */
.site-header__menu {
  position: relative; min-height: 36px; padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: rgb(7 8 10 / 0.4);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono); text-transform: uppercase;
}
.site-header__menu::after { content: ""; position: absolute; inset: -5px; }
.no-js .site-header__menu, html:not(.js) .site-header__menu { display: none; }

@media (min-width: 900px) {
  .site-header { height: 72px; }
  .site-nav { display: block; }
  .site-header__contact { margin-left: 0; }
  .site-header__tc { margin-left: var(--s4); }
  .site-header__motion { display: inline-flex; align-items: center; }
  .site-header__menu { display: none; }
}
/* Without JavaScript the page is the HTML tools/prerender.mjs wrote: the work, about, kit, credits and
   contact read as text. What needs scripts stays out of the way: the reel's player, the live studies
   and the previs plans (and their nav links), the motion toggle, the timecode, the hero's buttons, the
   colophon's Replay titles button, and any section the prerender has not filled. */
html:not(.js) [data-motion-toggle], html:not(.js) .site-header__tc, html:not(.js) .hero__foot,
html:not(.js) [data-replay-titles],
html:not(.js) :is(#reel, #studies, #previs),
html:not(.js) .site-nav li:has(> a:is([href$="#reel"], [href$="#studies"], [href$="#previs"])),
html:not(.js) [data-render]:empty, html:not(.js) main > section:has(> [data-render]:empty),
html:not(.js) .site-footer:not(:has([data-render]:not(:empty))) { display: none; }

/* During the title sequence the header stays, so the work and the contact are a click away from the
   first second; only the call to action waits for the name, fading in at 1.2 s (keyboard focus shows
   it at once). */
html[data-intro="playing"] .hero__cta { animation: hero-cta-in 600ms var(--ease-out) 1.2s both; }
html[data-intro="playing"] .hero__cta:focus-visible { animation: none; }
@keyframes hero-cta-in { from { opacity: 0; } }

/* --- Menu sheet (phones) ---------------------------------------------------------------------- */

.menu {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: var(--s4) var(--gutter) var(--s7);
  border: 0; background: var(--ink-0); color: var(--paper);
  flex-direction: column;
}
.menu[open] { display: flex; }
.menu::backdrop { background: rgb(7 8 10 / 0.6); }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.menu__mark { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.12em; }
.menu__close {
  min-height: var(--target); padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono); text-transform: uppercase;
}
/* The list sits in the middle of the sheet (the nav is the flex item), the Motion pill at its foot. */
.menu > nav { margin-block: auto; }
.menu .menu__list { margin: 0; padding-block: var(--s6); list-style: none; display: grid; gap: var(--s1); }
.menu__list a {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s2) 0; min-height: var(--target);
  font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.menu__list .cam-label { min-width: 6ch; font-size: 0.7rem; }
.menu__motion { align-self: flex-start; }

/* --- #089 film-leader preloader -------------------------------------------------------------- */

.preloader { display: none; }
.is-preloading .preloader {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-content: center; justify-items: center; gap: var(--s6);
  background: var(--ink-0);
  will-change: transform;
}
.is-preloading body { overflow: hidden; }
.leader { position: relative; width: min(56vw, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.leader__sweep {
  position: absolute; inset: 4%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(236 230 218 / 0.10) var(--a, 0deg), transparent 0);
}
.leader__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leader__dial circle, .leader__dial path { fill: none; stroke: var(--paper-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.55; }
.leader__dial circle:first-child { stroke: var(--paper-2); opacity: 0.7; }
.leader__num {
  position: relative;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(5rem, 22vw, 8.5rem); line-height: 1;
  color: var(--paper); font-variant-numeric: tabular-nums;
}
/* The leader's numerals and label are decoration: they live in data-* attributes (preloader.js writes
   them), so a text reader of the page never meets "Reel 1 000 8". */
.leader__num::after { content: attr(data-n); }
.preloader__label [data-t]::after { content: attr(data-t); }
.preloader__bar { width: 180px; height: 4px; background: rgb(236 230 218 / 0.12); border-radius: 2px; overflow: hidden; }
.preloader__bar span { display: block; height: 100%; background: var(--tungsten); transform: scaleX(0); transform-origin: 0 50%; }
.preloader__label {
  margin: 0; display: flex; gap: var(--s4);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--paper-3);
  font-variant-numeric: tabular-nums;
}

/* --- #092 shutter --------------------------------------------------------------------------- */

.shutter {
  position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 1);
  display: none; place-content: center; justify-items: center; gap: var(--s5);
  background: var(--ink-0);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.shutter::before {   /* the tungsten leading edge of the curtain */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--tungsten); opacity: 0.8;
}
.shutter-cover .shutter, .shutter-leaving .shutter { display: grid; }
.shutter-cover .shutter { clip-path: inset(0); }
.shutter__mark { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: 0.14em; color: var(--paper); }
.shutter__mark span { margin: 0 0.06em; }
/* Intertitle: the destination film's title, set by the leaving page (shutter.js) and by the arriving
   page's inline script (--shutter-title holds a CSS string). Empty → the monogram alone. */
.shutter__title { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.6vw, 3rem); color: var(--paper-2); }
.shutter__title::after { content: var(--shutter-title, ""); }
.shutter-titled .shutter__mark { font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem); letter-spacing: 0.24em; color: var(--paper-3); }

/* --- Sections ------------------------------------------------------------------------------- */

.section { padding-block: var(--section-pad); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: var(--s5); margin-bottom: clamp(40px, 6vw, 88px); }
.section-head__slate {
  margin: 0; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.section-head__slate > span:first-child { color: var(--tungsten); }
.section-head__rule { flex: 1 1 40px; height: 1px; background: var(--line); min-width: 24px; }
.section-head__aside { color: var(--paper-3); }
.section-head__aside::before { content: "·"; margin-right: var(--s3); color: var(--line-strong); }
/* Tools in the slate row (the Selected work view toggle) sit at its end: the head is no taller. */
.section-head__tools { margin-left: auto; display: flex; align-items: center; }
@media (max-width: 639px) {
  .section-head__aside { flex-basis: 100%; }
  .section-head__aside::before { content: none; }
}
.section-head__title {
  font-size: clamp(2.6rem, 0.6rem + 6.2vw, 11rem);
  font-weight: 400; letter-spacing: -0.005em; line-height: 1.02;
  text-wrap: balance;
}
.section-head__lede { max-width: 56ch; color: var(--paper-2); font-size: var(--step-0); }

/* Reveal (#074, sharpened): hidden state only while JS armed it; one shot. Opacity is short, the rise
   settles longer on the expo curve, so it reads as a cut-in rather than a fade. */
.reveal-on [data-reveal] { transition: opacity 500ms var(--ease-out-expo), transform 800ms var(--ease-out-expo); }
.reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(20px); }

/* --- Hero --------------------------------------------------------------------------------------- */

.hero {
  --pic: calc(100vw / 2.39);
  --bar: max(0px, calc((100vh - var(--pic)) / 2));
  position: relative;
  height: 100vh; height: 100svh; min-height: 480px;
  overflow: hidden;
  background: var(--ink-0);
}
@supports (height: 100svh) { .hero { --bar: max(0px, calc((100svh - var(--pic)) / 2)); } }
@media (max-width: 639px) and (orientation: portrait) {
  .hero { --pic: calc(100vw * 1.25); }
}
.hero__fallback { position: absolute; inset: 0; }
.hero__picture {
  position: absolute; inset: var(--bar) 0;
  display: grid; place-content: center; justify-items: center; gap: var(--s5);
  padding: var(--s5) var(--gutter);
  text-align: center;
  background:
    radial-gradient(42% 60% at 50% 46%, rgb(244 178 106 / 0.07), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, var(--ink-2), var(--ink-1) 70%, var(--ink-0));
}
.hero__title { display: grid; justify-items: center; gap: var(--s4); font-weight: 400; }
.hero__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 0.9rem + 5.2vw, 9rem);
  letter-spacing: var(--tracking-display); text-transform: uppercase; line-height: 1;
  margin-right: calc(-1 * var(--tracking-display));
}
.hero__role { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--paper-2); letter-spacing: 0.02em; }
.hero__slate { order: 2; margin: 0; color: var(--paper-3); }
.hero__picture .hero__title { order: 1; }

.hero__stage { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 600ms var(--ease-out); }
.hero__stage[data-drawn] { opacity: 1; }
.hero__stage[data-state="error"] { display: none; }
/* With JS the DOM title waits under the dark picture instead of showing through the title piece's
   fade-in: a dissolve between two differently set titles reads as a double exposure. It shows on its
   own only if the piece fails, or has not drawn after 2.5 s. (Reduced motion and Motion off drop the
   animation, so there the DOM title holds until the drawn frame cuts in over it.) */
html.js .hero__fallback :is(.hero__title, .hero__slate) { animation: hero-fallback 600ms var(--ease-out) 2.5s both; }
.hero:has(.hero__stage[data-drawn]) .hero__fallback :is(.hero__title, .hero__slate) { animation: none; opacity: 0; }
.hero:has(.hero__stage[data-state="error"]) .hero__fallback :is(.hero__title, .hero__slate) { animation: none; opacity: 1; }
@keyframes hero-fallback { from { opacity: 0; } }

.hero__foot {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  height: max(var(--bar), 96px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 0 var(--gutter);
}
.hero__cta { background: rgb(7 8 10 / 0.5); }
.hero__skip { position: absolute; right: var(--gutter); }
.hero__skip:not([hidden]) ~ .hero__down { visibility: hidden; }
.hero__skip kbd { margin-left: var(--s1); }
.hero__down { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--target); text-decoration: none; color: var(--paper-3); }
.hero__down:hover { color: var(--paper); }
@media (max-width: 639px) {
  .hero__down { display: none; }
  .hero__foot { justify-content: center; }
  /* The call to action shows while the title plays, so Skip shares the row with it: no Esc hint here. */
  .hero__skip { right: var(--gutter); padding-inline: var(--s4); }
  .hero__skip kbd { display: none; }
  html[data-intro="playing"] .hero__foot { justify-content: flex-start; }
}
@media (max-width: 359px) { .hero__foot .btn { padding-inline: var(--s3); } }

/* --- Reel --------------------------------------------------------------------------------------- */

.reel { display: grid; gap: var(--s4); }
.reel__frame { border: 1px solid var(--line); }
.reel__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; }
.reel-slate {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: auto 1fr auto; padding: clamp(14px, 2.4vw, 32px);
  background:
    radial-gradient(70% 90% at 50% 50%, rgb(244 178 106 / 0.045), transparent 70%),
    var(--ink-0);
}
.reel-slate:focus-visible { outline-offset: -4px; }
.reel-slate__grid {
  position: absolute; inset: clamp(14px, 2.4vw, 32px);
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--line), var(--line)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 66.666% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 0 33.333% / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 66.666% / 100% 1px no-repeat;
  opacity: 0.4;
}
@media (max-width: 639px) { .reel__frame--slate { aspect-ratio: 1.5; } }
.reel-slate__top, .reel-slate__bottom {
  position: relative; margin: 0; padding: var(--s3) var(--s4);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); align-items: center;
}
.reel-slate__title {
  position: relative; margin: 0; align-self: center; justify-self: center;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 var(--s4);
  font-family: var(--font-display); font-size: clamp(2rem, 1rem + 4vw, 4.6rem); line-height: 1.05; text-align: center;
}
.reel-slate__title .display-caps { letter-spacing: 0.24em; margin-right: -0.24em; }
.reel-slate__dash { color: var(--tungsten); }
.reel-slate__title em { font-style: italic; color: var(--paper-2); }
@media (max-width: 639px) {
  .reel-slate__top span:nth-child(2) { display: none; }
  .reel-slate__bottom > span:first-child { display: none; }
  .reel-slate__top, .reel-slate__bottom { padding: var(--s2) var(--s3); font-size: 0.66rem; }
}
.reel-facade { position: absolute; inset: 0; padding: 0; border: 0; background: var(--ink-0); color: var(--paper); }
.reel-facade__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity var(--dur-2); }
.reel-facade__poster--none { background: radial-gradient(60% 70% at 50% 50%, var(--ink-3), var(--ink-0)); }
.reel-facade:hover .reel-facade__poster { opacity: 1; }
.reel-facade__play {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; translate: -50% -50%;
  border: 1px solid var(--paper); border-radius: 50%; background: rgb(7 8 10 / 0.45); backdrop-filter: blur(4px);
  display: grid; place-items: center; transition: border-color var(--dur-2);
}
.reel-facade__play span { width: 0; height: 0; margin-left: 5px; border-left: 18px solid var(--paper); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.reel-facade:hover .reel-facade__play { border-color: var(--tungsten); }
.reel-facade__label { position: absolute; left: var(--s4); bottom: var(--s4); color: var(--paper-2); }
.reel__iframe, .reel__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

/* --- Selected work -------------------------------------------------------------------------- */

.work-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s8) var(--s6); }
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s6); } }
@media (min-width: 1100px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s9) var(--s6); } }
.work-card { display: flex; min-width: 0; }
.work-card__link { flex: 1; display: flex; flex-direction: column; gap: var(--s4); color: inherit; text-decoration: none; }
/* Every card sits in one common 2:1 gate; the delivered aspect shows as black mattes inside it. */
.work-card__gate {
  position: relative; aspect-ratio: 2 / 1; display: grid; place-items: center; overflow: hidden;
  background: #030304; outline: 1px solid var(--line); outline-offset: -1px;
  transition: outline-color var(--dur-2) var(--ease-out);
}
.work-card__frame {
  width: min(100%, calc(var(--ar) * 50%)); aspect-ratio: var(--ar); background-color: var(--ink-0);
  transition: filter var(--dur-3) var(--ease-out);
  filter: brightness(0.92);
}
.work-card__frame > img, .work-card__frame > canvas { z-index: 0; }
.work-card__frame::before {   /* placeholder grain-free horizon line until a still or card draws */
  content: ""; position: absolute; left: 8%; right: 8%; top: 62%; height: 1px; background: rgb(236 230 218 / 0.10);
}
.work-card__frame.has-piece::before { display: none; }
.work-card__aspect, .work-card__still-tag {
  position: absolute; z-index: 2;
  padding: 1px 6px; background: rgb(7 8 10 / 0.6); border-radius: var(--radius-1);
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: var(--tracking-mono); color: var(--paper-2);
}
.work-card__aspect { left: var(--s2); top: var(--s2); }
/* A tag over the picture keeps 4.5:1 on its lightest pixels (white sky included): a near-opaque chip. */
.work-card__still-tag { right: var(--s2); bottom: var(--s2); text-transform: uppercase; font-size: 0.58rem; background: rgb(7 8 10 / 0.85); }
.work-card__link:hover .work-card__gate, .work-card__link:focus-visible .work-card__gate { outline-color: var(--paper-3); }
.work-card__link:hover .work-card__frame, .work-card__link:focus-visible .work-card__frame { filter: none; }
.work-card__link:focus-visible { outline: none; }
.work-card__link:focus-visible .work-card__gate { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (forced-colors: active) {
  .work-card__gate { outline-color: transparent; }
  .work-card__link:focus-visible .work-card__gate { outline: 3px solid Highlight; outline-offset: var(--focus-offset); }
}

/* A still with the film's camera move applied as a transform (ui/still-move.js). */
.still-move { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.still-move__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden;
}
.still-move__front, .still-move__sharp {   /* the subject held over the background, or the plane of focus */
  --mask: radial-gradient(ellipse var(--mw, 22%) var(--mh, 34%) at var(--fx, 50%) var(--fy, 50%), #000 55%, transparent 100%);
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
}
.still-move__front { --mw: 26%; --mh: 50%; }
.still-move__defs { position: absolute; width: 0; height: 0; }
.still-move__brackets {
  position: absolute; width: 18%; aspect-ratio: 1.25; transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0;
}
.still-move__brackets i { position: absolute; width: 22%; height: 22%; border: 0 solid var(--tungsten); }
.still-move__brackets i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.still-move__brackets i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.still-move__brackets i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.still-move__brackets i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.work-card__text { display: grid; gap: var(--s2); }
.work-card__slate { margin: 0; display: flex; gap: var(--s3); flex-wrap: wrap; }
.work-card__slate span:first-child { color: var(--paper-2); }
.preloader__label > span + span::before {
  content: "·"; margin-right: var(--s3); color: var(--paper-3);
}
.work-card__title {
  font-size: var(--step-2); font-weight: 500; line-height: 1.15;
  background: linear-gradient(var(--tungsten), var(--tungsten)) 100% 100% / 0 1px no-repeat;
  transition: background-size 450ms var(--ease-io-expo);
  justify-self: start;
}
.work-card__link:hover .work-card__title, .work-card__link:focus-visible .work-card__title { background-size: 100% 1px; background-position-x: 0; }
.work-card__role { color: var(--paper-2); font-size: 0.95rem; }
.work-card__dir { color: var(--paper-3); }
.work-card__foot { margin: var(--s1) 0 0; display: flex; align-items: center; gap: var(--s3); min-height: 22px; }
.work-note { margin-top: var(--s8); }

/* --- Studies ---------------------------------------------------------------------------------- */

.study-block { padding-top: clamp(48px, 6vw, 96px); }
.study-block + .study-block { margin-top: clamp(48px, 6vw, 96px); border-top: 1px solid var(--line); }
.study-block__head { display: grid; gap: var(--s3); margin-bottom: var(--s6); max-width: 62ch; }
.study-block__head .cam-label { color: var(--tungsten); }
.study-block__title { font-size: clamp(2.2rem, 1.2rem + 3.2vw, 6rem); font-weight: 400; }
.study-block__kind { justify-self: start; }
.study-block__lede { color: var(--paper-2); }
.study-block__body { display: grid; gap: var(--s6); align-items: start; grid-template-columns: minmax(0, 1fr); }
.study-block__stage { min-width: 0; margin-inline: calc(-1 * var(--gutter)); }
.study-block__stage .player__frame { border-block: 1px solid var(--line); }
.study-block__panel { min-width: 0; }
/* Space is reserved for what mounts later (the picture's aspect, the controls, the ruler and the
   plan's notes), so the page does not grow under a visitor who jumps past the studies. The numbers
   are the mounted sizes, measured at each layout. */
.study-block--focus [data-study-host] { --ar: 2.39; }
.study-block--light [data-study-host] { --ar: 0.8; }
.study-block--colour [data-study-host] { --ar: 1.5; }
@media (max-width: 639px) and (orientation: portrait) {
  .study-block--focus [data-study-host] { --ar: 1.3333; }
  .study-block--colour [data-study-host] { --ar: 0.68; }
}
/* The empty stage (the prerendered page, until the Player builds its frame in it) is already the
   picture's box: the frame is the stage's full width at the same aspect. */
.study-block__stage:empty { aspect-ratio: var(--ar); }
.study-block__panel:empty { min-height: var(--panel-min, 0px); }
.study-block--focus { --panel-min: 776px; --ruler-min: 430px; }
.study-block--light { --panel-min: 808px; --plan-min: 659px; }
.study-block--colour { --panel-min: 644px; }
@media (min-width: 720px) {
  .study-block--focus { --panel-min: 558px; --ruler-min: 274px; }
  .study-block--light { --panel-min: 777px; --plan-min: 667px; }
  .study-block--colour { --panel-min: 408px; }
}
@media (min-width: 1100px) {
  .study-block--focus { --panel-min: 742px; --ruler-min: 275px; }
  .study-block--light { --panel-min: 788px; --plan-min: 683px; }
  .study-block--colour { --panel-min: 638px; }
}
.study-plan:has(.study-plan__note:empty) { min-height: var(--plan-min, 0px); }
.study-block__foot { margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; align-items: center; }
.study-block__open {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--target);
  color: var(--paper); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.study-block__open:hover { border-bottom-color: var(--tungsten); color: var(--tungsten); }
.study-block.is-unavailable .study-block__panel { display: none; }
.study-block.is-unavailable .player__frame { --ar: 2.39; }

.study-plan { margin: 0; display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.study-plan__svg {
  width: 100%; max-width: 420px; aspect-ratio: 1; justify-self: center;
  border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--ink-0);
}
.study-plan__cap { display: grid; gap: var(--s4); }
.study-plan__note { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.3; text-wrap: balance; }
.study-ruler { min-width: 0; display: grid; gap: var(--s4); }
.study-ruler__frame { min-width: 0; }
.study-ruler:has(.study-ruler__frame:empty) { min-height: var(--ruler-min, 0px); }
.study-block__panel .controls__item--range:has(.dof-ring) { padding-bottom: var(--s4); }
/* Kelvin detents on the Light study sliders (2700–6500 K → 3200 K at 13.16 %, 5600 K at 76.32 %). */
.study-block--light input[id$="-keyK"], .study-block--light input[id$="-fillK"] {
  background:
    linear-gradient(var(--paper-3), var(--paper-3)) 13.16% 50% / 1px 10px no-repeat,
    linear-gradient(var(--paper-3), var(--paper-3)) 76.32% 50% / 1px 10px no-repeat;
}

/* Colour study controls: compact look buttons; a toggle's hint runs full width. */
.study-block--colour .controls__radios { gap: 6px; }
.study-block--colour .controls__radio span { padding: 0 10px; }
.study-block .controls__item--toggle .controls__hint { grid-column: 1 / -1; }
.study-block .controls__item--toggle { justify-items: start; }

@media (min-width: 720px) {
  .study-block__stage { margin-inline: 0; }
  .study-block__stage .player__frame { border: 1px solid var(--line); }
  .study-block__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-block__stage, .study-ruler { grid-column: 1 / -1; }
  /* The Light study picture is 4:5: never taller than the viewport allows. */
  .study-block--light .study-block__stage { grid-column: 1 / -1; width: min(100%, calc((100svh - 140px) * 0.8)); justify-self: center; }
  .study-block__panel { grid-column: 1 / -1; }
  .study-block--light .study-block__panel { grid-column: auto; }
  .study-block__panel .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); align-items: start; }
  .study-block__panel .controls__group { align-content: start; }
  .study-block__panel .controls__radios { align-items: flex-start; }
  .study-block--light .study-block__panel .controls { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .study-block__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s6); row-gap: var(--s5); }
  .study-block__stage, .study-ruler { grid-column: 1 / 9; }
  .study-block__panel { grid-column: 9 / 13; grid-row: 1 / span 2; position: sticky; top: 96px; }
  .study-block__panel .controls { grid-template-columns: minmax(0, 1fr); }
  .study-block--light .study-block__stage { grid-column: 1 / 6; width: 100%; max-width: calc((100svh - 140px) * 0.8); justify-self: start; }
  .study-block--light .study-plan { grid-column: 6 / 9; grid-row: 1; }
  .study-block--light .study-block__panel { grid-column: 9 / 13; }
  .study-block--light.no-companion .study-block__stage { grid-column: 1 / 9; }
}

/* --- Previs ---------------------------------------------------------------------------------- */

.previs-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s7) var(--s6); }
/* Two columns only where a 16:9 slot is tall enough (≈ 330 px) for the plan's labels to read. */
@media (min-width: 1100px) { .previs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s7); } }
.previs-slot__fig { margin: 0; display: grid; gap: var(--s4); }
.previs-slot__frame { outline: 1px solid var(--line); outline-offset: -1px; }
.previs-slot__frame:has(.previs-slot__plan) { aspect-ratio: 16 / 9; background: radial-gradient(80% 90% at 50% 40%, var(--ink-2), var(--ink-0)); }
@media (max-width: 639px) { .previs-slot__frame:has(.previs-slot__plan) { aspect-ratio: 1; } }
.previs-slot__plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.previs-slot__corner {
  position: absolute; z-index: 1; margin: 0;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--paper-3);
}
.previs-slot__corner--tl { left: var(--s3); top: var(--s3); }
.previs-slot__corner--tr { right: var(--s3); top: var(--s3); color: var(--paper-2); }
@media (max-width: 639px) { .previs-slot__corner--tr { display: none; } }
.previs-slot__video { object-fit: cover; }
.previs-slot__cap { display: grid; gap: var(--s3); }
.previs-slot__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.previs-slot__id { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: var(--tracking-mono); color: var(--tungsten); margin-right: var(--s2); }
.previs-slot__slate { margin: 0; display: grid; gap: 2px; }
.previs-slot__line--lead { color: var(--paper-2); }
.previs-slot__notes { color: var(--paper-3); font-size: 0.9rem; }

/* --- About & approach --------------------------------------------------------------------------- */

.about { display: grid; gap: var(--s7); }
.about__lead { display: grid; gap: var(--s5); align-content: start; }
.about__portrait { margin: 0; max-width: 420px; }
.about__short {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.7rem, 1.1rem + 2vw, 3.6rem); line-height: 1.22; text-wrap: balance;
}
.about__short::before { content: "“"; color: var(--tungsten); margin-left: -0.45em; padding-right: 0.05em; }
.about__lead .badge-sample { justify-self: start; }
.about__body { display: grid; gap: var(--s5); align-content: start; color: var(--paper-2); max-width: 60ch; }
.about__body > p:first-child { color: var(--paper); }
.about__edu ul, .about__films ul { margin: var(--s3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.about__school, .about__film { color: var(--paper); }
.about__prog { color: var(--paper-3); }
@media (min-width: 1000px) {
  .about { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(48px, 7vw, 128px); }
  .about__lead { position: sticky; top: 120px; }
}

.report { margin: 0; display: grid; gap: 0; }
.report__row { display: grid; grid-template-columns: minmax(9ch, 13ch) minmax(0, 1fr); gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.report__row:last-child { border-bottom: 1px solid var(--line); }
.report dt, .report dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.report dt { color: var(--paper-3); }
.report dd { color: var(--paper); overflow-wrap: anywhere; }
.report--tight .report__row, .study-plan .report > div { padding: var(--s2) 0; }
/* light-plot.js writes plain <div><dt><dd> rows into the readout. */
.study-plan .report > div { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: var(--s3); border-top: 1px solid var(--line); }

.approach-title { margin: clamp(64px, 9vw, 128px) 0 var(--s6); font-size: var(--step-3); font-weight: 400; }
.approach { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s7); }
@media (min-width: 900px) { .approach { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.approach__item { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5); border-top: 1px solid var(--line-strong); }
.approach__n { color: var(--tungsten); margin: 0; }
.approach__head { font-size: var(--step-2); font-weight: 500; }
.approach__text { color: var(--paper-2); }
.approach__link {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--target);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono); text-transform: uppercase;
  text-decoration: none; color: var(--paper); border-bottom: 1px solid var(--line-strong);
}
.approach__link:hover { color: var(--tungsten); border-bottom-color: var(--tungsten); }

/* --- Kit (camera report) ----------------------------------------------------------------------- */

.kit { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); } }
.kit__title { margin: 0 0 var(--s4); color: var(--tungsten); font-family: var(--font-mono); font-size: var(--step--1); }
.kit__list { margin: 0; }
.kit__row { display: grid; grid-template-columns: minmax(10ch, 14ch) minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.kit__row:last-child { border-bottom: 1px solid var(--line); }
.kit__row dt { margin: 0; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--paper-3); padding-top: 0.2em; }
.kit__row dd { margin: 0; color: var(--paper); }
.kit__note, .approach__note { margin-top: var(--s5); }

/* --- End credits ------------------------------------------------------------------------------ */

.credits { position: relative; background: var(--ink-0); color: var(--paper); border-top: 1px solid var(--line); }
.credits__mask { position: sticky; z-index: 1; height: 22vh; pointer-events: none; }
.credits__mask--top { top: 0; height: 12vh; margin-bottom: -12vh; background: linear-gradient(var(--ink-0) 20%, rgb(7 8 10 / 0)); }
.credits__mask--bottom { bottom: 0; margin-top: -22vh; background: linear-gradient(rgb(7 8 10 / 0), var(--ink-0) 80%); }
/* The roll starts one section-pad down, so Kit → Filmography keeps the page's rhythm; the black
   background, not empty space, does the "from black". */
.credits__roll { padding: var(--section-pad) var(--gutter) 30vh; display: grid; justify-items: center; text-align: center; }
.credits__heading { font-size: clamp(1rem, 0.8rem + 0.6vw, 1.35rem); font-weight: 500; letter-spacing: 0.32em; margin: 0 -0.32em var(--s9) 0; color: var(--paper-2); }
.credits__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(40px, 6vh, 64px); width: min(100%, 860px); }
.credits__row { display: grid; gap: var(--s2); justify-items: center; }
.credits__role, .credits__end .credits__role {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-3);
}
.credits__name { display: grid; gap: var(--s1); justify-items: center; }
.credits__film { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 3rem); line-height: 1.15; }
.credits__meta { font-family: var(--font-display); font-style: italic; color: var(--paper-2); font-size: 1.05rem; }
.credits__name .badge-sample { margin-top: var(--s1); font-size: 0.62rem; padding: 1px 6px; }
.credits__end { margin-top: clamp(96px, 16vh, 180px); display: grid; gap: var(--s4); justify-items: center; }
.credits__signature { font-size: clamp(1.8rem, 0.8rem + 3.6vw, 6rem); letter-spacing: var(--tracking-display); margin-right: calc(-1 * var(--tracking-display)); font-weight: 500; }
@media (min-width: 720px) {
  .credits__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); align-items: baseline; text-align: left; justify-items: stretch; }
  .credits__row > .credits__role { text-align: right; }
  .credits__name { justify-items: start; }
}

/* --- Contact + colophon ------------------------------------------------------------------------- */

.site-footer { background: var(--ink-0); padding: 0 0 var(--s8); }
.contact { display: grid; justify-items: center; text-align: center; gap: var(--s5); padding: var(--s6) 0 clamp(80px, 12vw, 160px); }
.contact .cam-label:first-child { color: var(--tungsten); }
.contact__title { font-size: clamp(2.6rem, 1rem + 5.6vw, 10rem); font-weight: 400; line-height: 1.02; }
.contact__avail { color: var(--paper-2); }
.contact__mail a {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem);
  text-decoration: none; color: var(--paper);
  background: linear-gradient(var(--tungsten), var(--tungsten)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  display: inline-block; min-height: var(--target);
}
.contact__mail a:hover { color: var(--tungsten); }
.contact__links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); }
.contact__links:empty { display: none; }
.contact__links a { display: inline-flex; align-items: center; min-height: var(--target); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; }

.colophon { display: grid; gap: var(--s6); padding-top: var(--s7); border-top: 1px solid var(--line); }
.colophon__text { display: grid; gap: var(--s4); max-width: 72ch; }
.colophon__lead { color: var(--paper); font-size: var(--step-0); }
.colophon__credits { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); color: var(--paper-3); font-size: 0.86rem; line-height: 1.55; }
.colophon__credits a { color: var(--paper-2); }
.colophon__flag { margin: 0; }
.colophon__tools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; align-content: start; }
.colophon__mark { flex-basis: 100%; margin-top: var(--s3); }
@media (min-width: 900px) {
  .colophon { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .colophon__tools { justify-content: flex-end; }
  .colophon__mark { text-align: right; }
}

/* --- Project page ------------------------------------------------------------------------------ */

.site--project main { padding-top: 72px; }
.film__head { padding-block: clamp(56px, 8vw, 120px) clamp(32px, 4vw, 56px); display: grid; gap: var(--s5); }
.film__slate { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.film__slate a { color: var(--paper-2); text-decoration: none; min-height: var(--target); display: inline-flex; align-items: center; }
.film__slate a:hover { color: var(--tungsten); }
.film__title { font-size: clamp(2.8rem, 1rem + 6.6vw, 11rem); font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.film__logline { max-width: 46ch; font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--paper-2); }
.film__frame { aspect-ratio: var(--ar); outline: 1px solid var(--line); outline-offset: -1px; }
.film__frame > img { object-fit: cover; }
.film__frame-cap { position: absolute; left: var(--s3); bottom: var(--s3); z-index: 1; background: rgb(7 8 10 / 0.85); }   /* on the picture: as .work-card__still-tag */
.film__body { display: grid; gap: var(--s7); padding-block: clamp(48px, 6vw, 96px); }
@media (min-width: 900px) { .film__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 112px); } }
.film__facts { display: grid; gap: var(--s7); align-content: start; }   /* the camera report, then the credits */
/* From 900 px the facts column holds a role ("Director of Photography", "Production designer") on one line;
   the report and the credits share the label width, so their values line up. */
@media (min-width: 900px) { .film__facts .report__row { grid-template-columns: minmax(14ch, 24ch) minmax(0, 1fr); } }
.film__h { margin: 0 0 var(--s4); font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400; color: var(--tungsten); }
.film__notes { display: grid; align-content: start; }
.film__notes .film__h:not(:first-child) { margin-top: var(--s7); }
.film__lighting { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; }
.palette { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.palette__chip { display: grid; gap: var(--s2); }
.palette__swatch { aspect-ratio: 1 / 1.3; border-radius: var(--radius-1); outline: 1px solid rgb(236 230 218 / 0.08); outline-offset: -1px; }
.palette__hex { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--paper-3); }
.film__awards { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.film__watch { margin-top: var(--s6); }
.film__stills { padding-bottom: clamp(48px, 6vw, 96px); }
.stills { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s6); }
@media (min-width: 720px) { .stills { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stills > li:first-child { grid-column: 1 / -1; } }
.still figure { margin: 0; display: grid; gap: var(--s3); }
.still .frame { outline: 1px solid var(--line); outline-offset: -1px; }
.still figcaption { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.film__bts { padding-bottom: clamp(48px, 6vw, 96px); }
.film__pager {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s4); align-items: center;
  padding-block: var(--s7) var(--s9); border-top: 1px solid var(--line);
}
.film__pager-link { display: grid; gap: var(--s2); text-decoration: none; min-height: var(--target); }
.film__pager-link--next { text-align: right; justify-items: end; }
.film__pager-title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }
.film__pager-link:hover .film__pager-title { color: var(--tungsten); }
.film__pager-all { display: inline-flex; align-items: center; min-height: var(--target); text-decoration: none; }
@media (max-width: 639px) {
  .film__pager { grid-template-columns: 1fr 1fr; }
  .film__pager-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .film__pager-title { font-size: var(--step-1); }
}
.film-missing { padding-block: clamp(96px, 14vw, 200px); display: grid; gap: var(--s5); justify-items: start; }
.film-missing__title { font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); font-weight: 400; }
.film-missing__text { color: var(--paper-2); max-width: 56ch; }
.film-missing__list { margin: var(--s3) 0 var(--s5); padding: 0; list-style: none; display: grid; gap: var(--s2); }
.film-missing__list a { font-family: var(--font-display); font-size: var(--step-1); margin-right: var(--s3); }
/* project.html's static filmography (tools/prerender.mjs), for crawlers and visitors without
   JavaScript, and in place of a film whose scripts failed (html.film-failed, project.html's head script);
   project.js renders the film in its place. */
.film-static { padding-block: clamp(96px, 14vw, 200px) clamp(48px, 6vw, 96px); display: grid; gap: var(--s5); }
html.js:not(.film-failed) .film-static, .film-static:empty { display: none; }

/* --- Misc ----------------------------------------------------------------------------------- */

.noscript { padding-block: var(--s7); }
.site-footer--slim { padding-block: var(--s7); border-top: 1px solid var(--line); }
.site-footer--slim .colophon { border-top: 0; padding-top: 0; }

@media (forced-colors: active) {
  .film__frame, .still .frame, .reel__frame { border: 1px solid CanvasText; }
  .progress__fill { background: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader, .shutter, .progress { display: none !important; }
  .hero__stage { transition: none; }
}
html[data-motion="off"] .preloader, html[data-motion="off"] .shutter { display: none !important; }

/* --- Large screens (desktop-first) --------------------------------------------------------------
   From 1440 the page is laid out for the screen it is on rather than centred in a 1440 column:
   tokens.css widens the gutter and container and steps the root size. Here the grids open up, the
   gaps scale with the viewport and the project frame goes edge to edge. 390 / 768 are untouched. */

@media (min-width: 1440px) {
  .section-head { margin-bottom: clamp(88px, 5.6vw, 168px); }
  .section-head__lede { max-width: 52ch; }
  .work-grid { gap: clamp(96px, 6vw, 168px) clamp(32px, 2.4vw, 64px); }
  .study-block__body { column-gap: clamp(32px, 2.4vw, 64px); }
  .study-block { padding-top: clamp(96px, 6vw, 160px); }
  .study-block + .study-block { margin-top: clamp(96px, 6vw, 160px); }
  .study-block__panel { top: 112px; }
  .previs-grid { gap: clamp(64px, 4.4vw, 128px) clamp(40px, 3vw, 80px); }
  .about { column-gap: clamp(96px, 8vw, 224px); }
  .approach { gap: clamp(32px, 3vw, 80px); }
  .kit { gap: clamp(64px, 6vw, 160px); }
  .credits__list { width: min(100%, 1240px); }
  .credits__row { column-gap: clamp(48px, 4vw, 112px); }
  .colophon { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .film__body { column-gap: clamp(96px, 8vw, 224px); }
}
/* Studies on very wide screens: a larger picture, a narrower (3 of 12) control rail. */
@media (min-width: 2000px) {
  .study-block__stage, .study-ruler { grid-column: 1 / 10; }
  .study-block__panel { grid-column: 10 / 13; }
  .study-block--light .study-plan { grid-column: 6 / 10; }
  .study-block--light .study-block__panel { grid-column: 10 / 13; }
  .study-block--light.no-companion .study-block__stage { grid-column: 1 / 10; }
}
@media (min-width: 1800px) {
  .previs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Project page: the page opens on the work. The head is set compact (the title beside its logline; a
   title of about 20 characters keeps to one line from 1280 px) and the lead frame fits the first screen
   under it, edge to edge, pillarboxed in black when the film's aspect would be taller than what is left
   (a 1.33 frame is never cropped to fit a 16:10 window). It is never less than 56 % of the window's
   height: on a short window, or under a longer title, the head costs scroll rather than picture.
   --film-head is the head's height; without a measured one (project.js), the estimate holds the head
   with a one-line title from 1280 to 2560 px. */
@media (min-width: 1024px) {
  .film__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 112px); align-items: end;
    padding-block: clamp(40px, 4vw, 80px) clamp(24px, 2.4vw, 40px);
  }
  .film__slate { grid-column: 1 / -1; }
  .film__title { font-size: clamp(2.8rem, 1rem + 4.4vw, 8rem); }
  .film__logline { font-size: var(--step-1); }
  .film__hero.container { width: 100%; display: grid; justify-items: center; background: var(--ink-0); }
  .film__hero .film__frame {
    width: min(100%, max(calc((100svh - 72px - var(--film-head, calc(7vw + 150px))) * var(--ar)), calc(56svh * var(--ar))));
    outline: 0;
  }
}