/* =============================================================
   Oliver Durnford — Director of Photography
   Cinema-dark direction. Tokens from the OD design system,
   refined per wireframes-a-refined (June 2026).
   ============================================================= */

/* Fonts: Newsreader (display), Geist (body), Geist Mono (metadata).
   Loaded by a <link> in each page head so they fetch in parallel with this
   file rather than serially behind it. */

:root {
  /* ---- Cinema-dark surfaces (no pure black, no pure white) ---- */
  --bg:        #0d0c0b;   /* warm-black page ground */
  --bg-deep:   #07070a;   /* intro / letterbox wells */
  --bg-card:   #131211;
  --ink:       #f0ece4;   /* primary type on dark */
  --ink-2:     rgba(240, 236, 228, 0.62);
  --ink-3:     rgba(240, 236, 228, 0.28);
  --rule:      rgba(240, 236, 228, 0.12);
  --rule-mid:  rgba(240, 236, 228, 0.18);
  --rule-hi:   rgba(240, 236, 228, 0.34);

  /* Single accent, used sparingly. Curated filmic options:
     #5a6f8a moonlight blue (default) · #d4a574 sodium amber ·
     #b8593a kodak red · #7a9a96 dusty teal · #e6dfd1 projector bone ·
     #c9a96a brass */
  --accent: #5a6f8a;
  --accent-soft: rgba(90, 111, 138, 0.22);

  /* ---- Type ---- */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display-xl: clamp(44px, 8vw, 128px);
  --t-display-l:  clamp(34px, 5.5vw, 84px);
  --t-display-m:  clamp(28px, 4vw, 56px);
  --t-body:   17px;
  --t-body-s: 15px;
  --t-meta:   12px;
  --t-micro:  10.5px;

  --tr-wide:   0.08em;
  --tr-wider:  0.18em;
  --tr-widest: 0.30em;

  /* ---- Motion — long, eased, never bouncy ---- */
  --ease-cine: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-land: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 240ms;
  --dur-base: 420ms;
  --dur-slow: 720ms;
  --dur-fade: 1200ms;

  /* ---- Layout ---- */
  --margin: clamp(20px, 4.5vw, 72px);
  --col-max: 1440px;

  /* ---- Film FX intensity (tweakable) ---- */
  --grain-mul: 1;
  --halation-mul: 2;
}

/* =============================================================
   GLOBAL
   ============================================================= */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--bg-deep); }

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: opacity var(--dur-fast) var(--ease-cine); }
a:hover { opacity: 0.6; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Display face — cinema-poster heft */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 48;
  letter-spacing: -0.015em;
  line-height: 1;
  font-feature-settings: 'liga' 1, 'dlig' 1;
  text-wrap: balance;
  /* warm bloom on bright display type */
  text-shadow:
    0 0 6px rgba(240, 230, 210, 0.10),
    0 0 22px rgba(196, 72, 48, calc(0.04 * var(--halation-mul)));
}

/* Mono metadata — ALL CAPS · WIDE TRACKING, middle-dot joined */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink-2);
  text-shadow: 0 0 4px rgba(240, 230, 210, 0.04);
}
.mono.s  { font-size: var(--t-micro); }
.mono.hi { color: var(--ink); }

.body-copy {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 62ch;
}
.body-copy.muted { color: var(--ink-2); }

/* Skip-to-content (a11y) */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--margin);
  z-index: 300;
  padding: 10px 16px;
  background: var(--bg-deep);
  border: 1px solid var(--rule-hi);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-cine);
}
.skip-link:focus { top: 12px; opacity: 1; }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* =============================================================
   FILM FX — grain · halation · vignette (site-wide, subtle)
   ============================================================= */
.film-grain {
  position: fixed;
  inset: -25%;
  z-index: 90;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: 240px 240px;
  opacity: calc(0.05 * var(--grain-mul));
  mix-blend-mode: overlay;
  will-change: transform;
  animation: filmGrain 1.1s steps(8) infinite;
}
.film-vignette {
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  box-shadow:
    inset 0 0 220px rgba(0, 0, 0, 0.45),
    inset 0 0 60px rgba(0, 0, 0, 0.28);
}
.film-halation {
  position: fixed;
  inset: 0;
  z-index: 88;
  pointer-events: none;
  opacity: var(--halation-mul);
  background:
    radial-gradient(45% 32% at 50% 38%, rgba(196, 72, 48, 0.05), rgba(196, 72, 48, 0) 72%),
    radial-gradient(95% 70% at 50% 45%, rgba(220, 120, 80, 0.02), rgba(220, 120, 80, 0) 70%),
    radial-gradient(120% 90% at 50% 100%, rgba(255, 180, 130, 0.012), rgba(255, 180, 130, 0) 60%);
  mix-blend-mode: screen;
}
@keyframes filmGrain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-3%, -2%); }
  24%  { transform: translate(2%, -4%); }
  36%  { transform: translate(-4%, 2%); }
  48%  { transform: translate(3%, 3%); }
  60%  { transform: translate(-2%, -3%); }
  72%  { transform: translate(4%, 1%); }
  84%  { transform: translate(-1%, 4%); }
  100% { transform: translate(0, 0); }
}

/* Halation bleed on dark image plates */
.plate {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.55),
    inset 0 0 60px rgba(196, 72, 48, calc(0.025 * var(--halation-mul))),
    0 0 22px rgba(196, 72, 48, calc(0.025 * var(--halation-mul))),
    0 0 50px rgba(220, 120, 80, calc(0.012 * var(--halation-mul)));
}
.plate img, .plate video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================
   VIEWFINDER CHROME — corner ticks, timecode, ratio chip
   ============================================================= */
.vf-fade { transition: opacity 700ms ease; }
body.cine-idle .vf-fade { opacity: 0; }

.vf-ticks, .vf-ticks::before, .vf-ticks::after { pointer-events: none; }
.vf-ticks span, .vf-ticks::before, .vf-ticks::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid rgba(240, 236, 228, 0.55);
}
.vf-ticks::before { top: 8px; left: 8px; border-top-width: 1.2px; border-left-width: 1.2px; }
.vf-ticks::after  { top: 8px; right: 8px; border-top-width: 1.2px; border-right-width: 1.2px; }
.vf-ticks .bl { bottom: 8px; left: 8px; border-bottom-width: 1.2px; border-left-width: 1.2px; }
.vf-ticks .br { bottom: 8px; right: 8px; border-bottom-width: 1.2px; border-right-width: 1.2px; }

.ratio-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border: 1px solid var(--rule-hi);
  color: var(--ink-2);
  border-radius: 1px;
  line-height: 1;
  white-space: nowrap;
}

.timecode {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Availability dot */
/* Sized to match .mono so it sits level with the credit lines above it */
.avail-dot {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.avail-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Section mark — slate-style labelled rule */
.section-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-2);
}
.section-mark .lbl,
.section-mark .lbl-r {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  white-space: nowrap;
}
.section-mark .lbl-r a { border-bottom: none; }
.section-mark::after { content: none; }
.section-mark .rule-line { flex: 1; height: 0; border-top: 1px solid var(--rule-mid); }

/* =============================================================
   NAV
   ============================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--margin);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: none; /* no glassmorphism — solid-ish scrim only */
  transition: transform var(--dur-base) var(--ease-cine);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  mix-blend-mode: screen;
}
.brand .word {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand .word .nm {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  color: var(--ink);
  text-transform: uppercase;
}
.brand .word .rl {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: var(--ink-2);
  margin-top: 3px;
  text-transform: uppercase;
}
.brand:hover { opacity: 1; }

.site-nav {
  display: flex;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
}
.site-nav a { color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); opacity: 1; }
.site-nav a[aria-current="page"] { color: var(--ink); }

main { padding-top: 61px; }

/* =============================================================
   HERO REEL (home)
   ============================================================= */
.hero {
  position: relative;
  padding: 14px var(--margin) 0;
}
.hero-well {
  position: relative;
  background: var(--bg-deep);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 2.39 / 1;
  min-height: 320px;
  max-height: calc(100svh - 140px);
  width: 100%;
}
@media (max-width: 720px) {
  .hero-well { aspect-ratio: 16 / 9; }
}
.hero-well video,
.hero-well .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-flash {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease-out;
}
.hero-flash.on { opacity: 1; transition: opacity 120ms ease-in; }

.hero-chrome { transition: opacity 1000ms ease; }
.hero.watching .hero-chrome { opacity: 0; pointer-events: none; }

/* The hero progress line deliberately carries no .vf-fade: it holds the strip
   beneath the caption for the whole idling loop, and only clears once the reel
   is clicked. Letting it fade on idle left that strip reading as dead space. */

.hero-tc { position: absolute; top: 14px; right: 16px; }
.hero-fs {
  position: absolute;
  top: 36px;
  right: 14px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.hero-fs:hover { color: var(--ink); }

.hero-caption {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 52px;
}
.hero-caption .nm { font-size: var(--t-display-l); color: var(--ink); line-height: 0.9; margin-bottom: 0; }
.hero-caption .sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.hero-caption .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.hero-play .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink-2);
}
.play-ring {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.2px solid rgba(240, 236, 228, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.play-tri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 1px;
  filter: drop-shadow(0 0 4px rgba(240, 236, 228, 0.18));
}

/* Scrubber — shared by hero + project player */
.scrubber {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.scrubber .t {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.scrubber .track {
  flex: 1;
  height: 14px; /* generous hit target */
  display: flex;
  align-items: center;
  cursor: pointer;
}
.scrubber .track .bar {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(240, 236, 228, 0.18);
}
.scrubber .track .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--accent);
}
.scrubber .track .head {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-4px, -50%);
  left: 0%;
}

/* Page-dim while watching */
.dimmable { transition: opacity 1000ms ease, filter 1000ms ease; }
body.watching .dimmable { opacity: 0.18; filter: blur(1px); pointer-events: none; }

/* =============================================================
   PROJECT TILES
   ============================================================= */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 22px;
  padding: 0 var(--margin);
}
.tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
@media (max-width: 900px) {
  .tile-grid, .tile-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tile-grid, .tile-grid.cols-3 { grid-template-columns: 1fr; }
}

.tile { display: flex; flex-direction: column; gap: 8px; }
.tile .well {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.tile .well img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-cine), opacity var(--dur-slow) ease;
}
.tile .well video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* native aspect on hover clips — wider-than-16:9 films letterbox as they should */
  object-fit: contain;
  background: #000;
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}
.tile .well video.playing { opacity: 1; }
.tile:hover .well img { transform: scale(1.015); }
/* stills with letterbox baked into the frame get punched in past the bars */
.tile .well img.debar { transform: scale(1.345); }
.tile:hover .well img.debar { transform: scale(1.365); }
/* media tiles are exempt from the global link-hover dim — it reads as underexposure on stills/clips */
a.tile:hover { opacity: 1; }
.tile .meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.tile .t {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.tile .k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.tile.placeholder .well {
  border: 1px solid var(--rule);
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.92) 0 6px, rgba(255, 255, 255, 0.045) 6px 13px),
    #101015;
}
.tile.placeholder .well .ph-lbl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-wider);
  color: var(--ink-3);
  text-transform: uppercase;
  text-align: center;
  padding: 0 16px;
}

/* =============================================================
   WORK INDEX
   ============================================================= */
.work-head { padding: 34px var(--margin) 10px; }
.work-head h1 { margin: 0; font-size: var(--t-display-m); }
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
}
.filters button {
  color: var(--ink-2);
  letter-spacing: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  transition: color var(--dur-fast) ease;
}
.filters button:hover { color: var(--ink); }
.filters button .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--dur-fast) ease;
}
.filters button[aria-pressed="true"] { color: var(--accent); }
.filters button[aria-pressed="true"] .dot { background: var(--accent); }

.tile.is-hidden { display: none; }

/* =============================================================
   PROJECT PAGE
   ============================================================= */
.proj-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--margin);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
}
.proj-breadcrumb .mid { color: var(--ink-2); }
.proj-breadcrumb a { color: var(--ink-2); }
.proj-breadcrumb a:hover { color: var(--ink); opacity: 1; }

.proj-title-block {
  padding: 30px var(--margin) 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.proj-title-block h1 { margin: 0; font-size: var(--t-display-m); }
.proj-title-block .meta { margin-top: 10px; }

.player-wrap { padding: 0 var(--margin); }
.player {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
  cursor: pointer;
}
.player video {
  width: 100%;
  height: auto;
  display: block;
}
.player .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-slow) ease;
}
.player.started .poster { opacity: 0; pointer-events: none; }
.player .center-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity var(--dur-base) ease;
}
.player.playing .center-play { opacity: 0; }
.player .center-play .ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.3px solid rgba(240, 236, 228, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.player .center-play .tri {
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #f0ece4;
  margin-left: 3px;
}
.player .np {
  position: absolute;
  left: 16px;
  bottom: 34px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.player .np .dim { color: var(--ink-2); }
.player .np .hi { color: var(--ink); }
.player .tc-corner { position: absolute; top: 12px; right: 14px; }
.player .fs-btn {
  position: absolute;
  top: 32px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.player .fs-btn:hover { color: var(--ink); }
.player .mute-btn {
  position: absolute;
  top: 56px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}

.player .mute-btn:hover { color: var(--ink); }
.player .mute-btn .x { display: none; }
.player .mute-btn.muted .x { display: block; }
.player .mute-btn.muted .wave { display: none; }
.player:focus-visible, .hero-well:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
/* the clip sits under the pointer so hover state stays on the well */
.tile .well video { pointer-events: none; }

/* status plate for projects in post / placeholder video */
/* The player takes its height from the video, so a film that has not been
   transcoded yet collapses the box to zero and the status plate never shows.
   Hold a frame so the plate is visible. */
.player.media-missing { aspect-ratio: 16 / 9; cursor: default; }
/* No film to play, so the play ring would only invite a dead click. */
.player.media-missing .center-play { display: none; }

.player .status-plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.92) 0 6px, rgba(255, 255, 255, 0.045) 6px 13px),
    #101015;
}

.proj-meta-grid {
  padding: 22px var(--margin) 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
}
@media (max-width: 760px) { .proj-meta-grid { grid-template-columns: 1fr; } }

.credits {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.credits .k { color: var(--ink-2); }

.stills-grid {
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .stills-grid { grid-template-columns: repeat(2, 1fr); } }
.stills-grid .cell {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: zoom-in;
  padding: 0;
  border: none;
}
.stills-grid .cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-cine);
}
.stills-grid .cell:hover img { transform: scale(1.015); }
/* stills with letterbox baked into the frame get punched in past the bars */
.stills-grid .cell img.debar { transform: scale(1.345); }
.stills-grid .cell:hover img.debar { transform: scale(1.365); }
.stills-grid .cell .n {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: rgba(240, 236, 228, 0.65);
}

.bts-grid {
  padding: 0 var(--margin) 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 700px) { .bts-grid { grid-template-columns: repeat(2, 1fr); } }
.bts-grid .cell {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  cursor: zoom-in;
  padding: 0;
  border: none;
}
.bts-grid .cell img { width: 100%; height: 100%; object-fit: cover; }

.addl-cuts {
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 760px) { .addl-cuts { grid-template-columns: 1fr; } }

.proj-next {
  margin-top: 34px;
  padding: 16px var(--margin) 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
}
.proj-next a { color: var(--ink-2); }
.proj-next a:hover { color: var(--ink); opacity: 1; }

/* =============================================================
   ABOUT + CONTACT
   ============================================================= */
.about-wrap { padding: 34px var(--margin) 0; max-width: var(--col-max); margin: 0 auto; }
.about-grid {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }
.about-portrait { position: relative; overflow: hidden; }
.about-portrait img { width: 100%; height: auto; }
.about-grid h1 { margin: 0; font-size: var(--t-display-m); }

.slate {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 2;
  margin-top: 14px;
}
.slate .k { color: var(--ink-2); }

.credit-line {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.credit-line .net {
  color: var(--ink-2);
  font-size: 9.5px;
}

.awards-list { display: flex; flex-direction: column; gap: 10px; }
.awards-list .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.awards-list .row .a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.awards-list .row .b {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Awards table — the designed 4-column layout from the wireframe:
   year (accent) · awarding body · award · project */
.awards-table {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  line-height: 1.5;
}
.awards-table .row {
  display: grid;
  grid-template-columns: 52px 190px 1fr auto;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid rgba(240, 236, 228, 0.10);
  align-items: baseline;
}
.awards-table .row:last-of-type { border-bottom: 1px solid rgba(240, 236, 228, 0.10); }
.awards-table .y { color: var(--accent); letter-spacing: 0.1em; }
.awards-table .b { color: var(--ink); letter-spacing: 0.12em; }
.awards-table .a { color: var(--ink-2); letter-spacing: 0.08em; }
.awards-table .p { color: var(--ink-2); font-size: 9.5px; letter-spacing: 0.06em; text-align: right; }
@media (max-width: 700px) {
  .awards-table .row { grid-template-columns: 52px 1fr; }
  .awards-table .a, .awards-table .p { grid-column: 2; text-align: left; }
}

/* Bloom — brand signature. A soft photographic halation on display type,
   like a highlight blooming through a diffusion filter. */
.bloom {
  text-shadow:
    0 0 14px rgba(240, 236, 228, 0.30),
    0 0 42px rgba(240, 236, 228, 0.16),
    0 0 90px rgba(90, 111, 138, 0.20);
}

.contact-email {
  font-family: var(--font-mono);
  font-size: clamp(16px, 3vw, 26px);
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-hi);
  padding-bottom: 2px;
}
.contact-links {
  margin-top: 16px;
  display: flex;
  gap: 26px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* =============================================================
   FOOTER — quiet camera-HUD
   ============================================================= */
.site-footer {
  margin-top: 56px;
  padding: 14px var(--margin);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer span, .site-footer a {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* =============================================================
   SECTION SPACING
   ============================================================= */
.sect-mark-row { padding: 26px var(--margin) 18px; }
.sect-pad { padding-top: 10px; }

/* =============================================================
   LIGHTBOX
   ============================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(7, 7, 10, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.lightbox .lb-meta {
  position: absolute;
  bottom: 20px;
  left: 26px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-wider);
  color: var(--ink-2);
  text-transform: uppercase;
}
.lightbox .lb-close {
  position: absolute;
  top: 18px;
  right: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-wider);
  color: var(--ink-2);
  text-transform: uppercase;
}
.lightbox .lb-close:hover { color: var(--ink); }
.lightbox .lb-prev, .lightbox .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-2);
  padding: 20px;
}
.lightbox .lb-prev { left: 6px; }
.lightbox .lb-next { right: 6px; }

/* =============================================================
   INTRO SEQUENCE (home) — loader → columns build → zoom to reel
   ============================================================= */
body.intro-lock { overflow: hidden; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--bg-deep);
  transition: opacity 700ms ease;
}
.intro.fade { opacity: 0; pointer-events: none; }
.intro.done { display: none; }
.intro .stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.intro .grid-cols {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14%;
  right: -14%;
  display: flex;
  gap: 22px;
  padding: 0 22px;
  transform-origin: 0 0;
  will-change: transform;
}
.intro .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  will-change: transform, filter;
}
.intro .itile {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(240, 236, 228, 0.14);
  background: #101015;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.intro .itile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.intro .itile .lbl {
  position: absolute;
  left: 10px;
  bottom: 9px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--font-mono);
  color: rgba(240, 236, 228, 0.82);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.intro .itile .lbl b { font-size: 10px; font-weight: 600; }
.intro .itile .lbl s { font-size: 8.5px; text-decoration: none; color: rgba(240, 236, 228, 0.55); }
.intro .itile .tick {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid rgba(240, 236, 228, 0.4);
  z-index: 2;
}
.intro .itile .tick.tl { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; }
.intro .itile .tick.br { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; }

/* The zoom target is the page's own hero frame — same aspect as .hero-well
   so the intro lands flush on the real page before the overlay dissolves. */
.intro .itile.hero {
  border-color: rgba(240, 236, 228, 0.34);
  aspect-ratio: 2.39 / 1;
}
.intro .itile.hero img { opacity: 1; }

/* loader */
.intro .loader {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 600ms ease;
}
.intro .loader.off { opacity: 0; pointer-events: none; }
.intro .logo-wrap { position: relative; width: min(200px, 40vw); aspect-ratio: 1; }
.intro .logo-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}
.intro .logo-wrap img.ghost { opacity: 0.12; }
.intro .load-meta {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.intro .load-bar {
  width: 140px;
  height: 1px;
  background: rgba(240, 236, 228, 0.16);
  position: relative;
  overflow: hidden;
}
.intro .load-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: rgba(240, 236, 228, 0.7);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.intro .load-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  color: rgba(240, 236, 228, 0.5);
  display: flex;
  gap: 10px;
  align-items: baseline;
  text-transform: uppercase;
}
.intro .load-num b {
  font-weight: 600;
  color: rgba(240, 236, 228, 0.82);
  font-variant-numeric: tabular-nums;
}

/* stage chrome */
.intro .stage-cap {
  position: absolute;
  z-index: 25;
  font-family: var(--font-mono);
  color: rgba(240, 236, 228, 0.55);
  letter-spacing: 0.22em;
  font-size: 10px;
  text-transform: uppercase;
  transition: opacity 600ms ease;
}
.intro .stage-cap.tl { top: 24px; left: 26px; line-height: 1.7; }
.intro .stage-cap.bl { bottom: 24px; left: 26px; }
.intro .skip {
  position: absolute;
  z-index: 31;
  top: 22px;
  right: 26px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(240, 236, 228, 0.55);
  padding: 6px;
  text-transform: uppercase;
  transition: color var(--dur-fast) ease;
}
.intro .skip:hover { color: var(--ink); }

.replay-intro {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .film-grain { animation: none; }
  html { scroll-behavior: auto; }
  .tile .well img, .stills-grid .cell img { transition: none; }
}