/* Ben Blennerhassett — proof-first portfolio
   Warm paper · tight work index · signature in motion only */

:root {
  --bg: #e8e6e0; /* warm paper (mock B) */
  --fg: #111111;
  --mute: #5c5852; /* warm graphite */
  --line: rgba(17, 17, 17, 0.12);
  --line-strong: rgba(17, 17, 17, 0.7);
  --paper: #faf8f4;
  --pad: clamp(1.15rem, 3.4vw, 2.35rem);
  --gap: clamp(0.9rem, 1.8vw, 1.4rem);
  --nav-h: 3.75rem;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif; /* kept as alias; titles use --display */
  --display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fade: 300ms ease-out;
  --grain-op: 0.09;
  --leica-red: #e20612; /* documented Leica brand red (Pantone 185 C working value) */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
/* Grid pictures fill the same box their img used to. */
.card__media > picture,
.album-card__media > picture,
.doco-card__poster > picture,
.photo-cell > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.card__media > picture > img,
.album-card__media > picture > img,
.doco-card__poster > picture > img,
.photo-cell > picture > img {
  width: 100%;
  height: 100%;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
main { min-height: 60vh; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 400;
  padding: 0.45rem 0.7rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(-160%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}

/* Global film grain — over paper/stills, not video players / active previews / lightbox.
   The warm-white lightbox surround has its own static grain (`.still-lightbox__grain`), behind the photograph only. */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: var(--grain-op);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.065  0 0 0 0 0.055  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-repeat: repeat;
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: reduce) {
  .film-grain { opacity: 0.0476; }
}
/* Mobile / iOS: multiply or soft-light on a position:fixed overlay is often
   dropped by Safari (worse when pinch-zooming), and soft-light at ~0.09 is
   nearly invisible on this paper. Use normal blend, desktop-matching opacity,
   and absolute positioning so the grain scrolls and zooms with the page.
   The noise is a 540×540 source tile (3×, baseFrequency 0.28333 so the
   visual pitch matches the desktop 180px / 0.85 tile) painted at 180px CSS —
   similarly fine to desktop, sharp at 3× DPR, not a chunky 540px stretch.
   The coarse-pointer query covers iPhone landscape (>760px wide). */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  :root { --grain-op: 0.09; }
  body { position: relative; }
  .film-grain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    mix-blend-mode: normal;
    opacity: 0.09;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='540' height='540'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.28333' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.065  0 0 0 0 0.055  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
    background-size: 180px 180px;
  }
}
.video-embed,
.still-lightbox,
.card.is-previewing .card__media {
  position: relative;
  z-index: 90; /* sit above grain */
}

/* Soft exposure reveals */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--fade), transform var(--fade);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Image develop-in (from slightly lifted/soft) */
.develop {
  filter: brightness(1.06) contrast(0.96) saturate(0.92);
  opacity: 0.72;
  transition: filter var(--fade), opacity var(--fade);
}
.develop.is-developed {
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .develop { filter: none; opacity: 1; transition: none; }
}




/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  /* Above grain (80) and video embeds (90), below the lightbox (300).
     The mobile menu panel is inside this stacking context, so a lower
     header z-index hid the open menu behind the project-page Vimeo player. */
  z-index: 200;
  height: var(--nav-h);
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.nav-left {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  justify-self: start;
}
/* Same type as the album meta line (.page-intro__meta): IBM Plex Mono,
   10px, 0.12em tracking, uppercase, muted ink. Padding is reserved at
   rest (and cancelled with a negative margin) so the Leica hover block
   cannot shift the row. */
.nav-left a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.55;
  padding: 0 3px;
  margin: 0 -3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: inline-block;
  white-space: nowrap;
}
.nav-left a:hover,
.nav-left a:focus-visible {
  color: #f6f4ef;
  background-color: var(--leica-red);
  outline: none;
}
/* Active page: dark ink at rest, so it doesn't compete with the hover block. */
.nav-left a.is-active {
  color: var(--fg);
  background-color: transparent;
}
.nav-left a.is-active:hover,
.nav-left a.is-active:focus-visible {
  color: #f6f4ef;
  background-color: var(--leica-red);
}
.nav-left__break,
.nav-left .nav-aux { display: none; }

.nav-logo {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  line-height: 1.1;
  min-width: 0;
}
.nav-logo:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 4px;
}
.nav-logo--mark {
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  text-align: left;
}
.nav-logo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}
.nav-logo--wordmark .nav-logo__text { align-items: center; }
.nav-logo img,
.nav-logo__mark { height: 22px; width: auto; display: block; flex: 0 0 auto; }
.nav-logo__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
.nav-logo__meta {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

.nav-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  z-index: 2;
}
.social-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
/* Header icon strip: thin 14px line icons, 0.75px non-scaling stroke
   (was 1px), muted at rest, darker ink on hover / keyboard focus.
   No Leica-red block, no layout shift. */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  color: var(--mute);
  background: transparent;
  border: 0;
  border-radius: 0;
  flex: 0 0 auto;
  line-height: 0;
}
.nav-icon:hover,
.nav-icon:focus-visible {
  color: var(--fg);
  background: transparent;
  outline: none;
}
.nav-icon:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}
.nav-icon__svg {
  display: block;
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  color: inherit;
  flex: 0 0 auto;
}
/* vector-effect is not inherited from <g>, so apply it to every painted child.
   Combined with stroke-width="0.75" this renders at 0.75 CSS px at any scale. */
.nav-icon__svg * {
  vector-effect: non-scaling-stroke;
}


.nav-toggle {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.55;
  padding: 0;
  background: none;
}

/* Full link row needs room for the centred wordmark plus five section links — hamburger below this. */
@media (max-width: 1279px) {
  .nav-toggle {
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    z-index: 2;
  }
  .nav-logo { grid-row: 1; }
  .nav-logo__mark { height: 18px; }
  .nav-logo__name {
    font-size: 12px;
    letter-spacing: 0.13em;
  }
  .nav-logo__meta {
    font-size: 8px;
    letter-spacing: 0.11em;
  }
  /* Icons stay in the header, opposite Menu, at every width. */
  .nav-right {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .nav-left {
    display: none;
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    z-index: 40;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 1.15rem var(--pad) 1.4rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    justify-self: stretch;
  }
  .nav-left .nav-aux { display: inline; }
  .nav-left__break {
    display: block;
    width: 1.75rem;
    height: 0;
    margin: 0.15rem 0 0.1rem;
    border-top: 1px solid var(--line);
  }
  body.nav-open .nav-left { display: flex; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 620px) {
  .nav-logo__name {
    font-size: 11.5px;
    letter-spacing: 0.12em;
  }
}

/* ---------- Work grid ---------- */
/* Contact-sheet (Option D): 4 columns desktop ≥1100px, 3 columns 700–1099px, 2 columns ≤699px.
   Gaps match the BTS contact sheet (0.55rem / 0.4rem). */
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 1.15rem var(--pad) clamp(3.5rem, 9vh, 5.5rem);
}
@media (max-width: 1099px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
}

.card {
  display: block;
  position: relative;
  color: inherit;
}
.card__index {
  position: absolute;
  top: 0.45rem;
  left: 0.5rem;
  z-index: 3;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(252, 251, 248, 0.88);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  pointer-events: none;
}
.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  --card-ar: 1.7777778;
  overflow: hidden;
  background: #e8e5df;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.28s var(--ease);
}
.card:hover .card__media,
.card:focus-visible .card__media {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.card__poster {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  background: #e8e5df;
}
.card__preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  background: transparent; /* never flash black behind poster */
}
.card__preview iframe,
.card__preview video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Shift so the PICTURE (not the player frame) is centred, honouring optional bar offsets */
  transform: translate(
    calc(-50% - var(--bar-off-x, 0) * 100%),
    calc(-50% - var(--bar-off-y, 0) * 100%)
  );
  /*
    Cover the card with the PICTURE region inside the Vimeo player frame.
    --frame-ar: player/file aspect (oEmbed). --picture-ar: picture inside, excluding baked bars.
    When they are equal, this is a normal cover plus 1.5% overscan.
    When the file is 16:9 with a 2.39 picture, the iframe is sized so the 2.39 region covers the card.
  */
  --_overscan: 1.015;
  --_pic-w: max(100%, calc(100% * var(--picture-ar, var(--frame-ar, 1.7777778)) / var(--card-ar, 1.7777778)));
  --_pic-h: max(100%, calc(100% * var(--card-ar, 1.7777778) / var(--picture-ar, var(--frame-ar, 1.7777778))));
  width: calc(var(--_pic-w) * var(--_overscan) / min(1, calc(var(--picture-ar, 1.7777778) / var(--frame-ar, 1.7777778))));
  height: calc(var(--_pic-h) * var(--_overscan) / min(1, calc(var(--frame-ar, 1.7777778) / var(--picture-ar, 1.7777778))));
  border: 0;
  pointer-events: none;
  max-width: none;
  max-height: none;
}
/* Only crossfade once the player is actually playing */
.card.is-previewing .card__preview { opacity: 1; }
.card.is-previewing .card__poster { opacity: 0; }
@media (hover: none), (pointer: coarse) {
  .card__preview { display: none !important; }
  .card.is-previewing .card__poster { opacity: 1; }
}

.card__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: baseline;
  padding: 0.5rem 0.05rem 0;
  font-size: 11.5px;
}
.card__label {
  color: var(--fg);
  letter-spacing: 0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card__label span { color: var(--mute); }
.card__year {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mute);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
@media (max-width: 1100px) and (min-width: 981px) {
  .card__meta { font-size: 11px; }
}

/* ---------- Project page ---------- */
.project {
  padding: 0 var(--pad) clamp(3rem, 8vh, 5rem);
}
.project__player {
  margin: 0.5rem 0 1.75rem;
}
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  background: #111;
}
.video-embed__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f6f4ef;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video-embed__play-face {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.7rem 0.42rem 0.55rem;
  border: 1px solid rgba(246, 244, 239, 0.78);
  background: rgba(17, 17, 17, 0.32);
  color: #f6f4ef;
  pointer-events: none;
}
.video-embed__play-icon {
  display: block;
  width: 11px;
  height: 11px;
}
.video-embed__play-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.video-embed__play:hover .video-embed__play-face,
.video-embed__play:focus-visible .video-embed__play-face {
  color: #fff;
  background: rgba(17, 17, 17, 0.5);
  border-color: #f6f4ef;
}
.video-embed__play:hover,
.video-embed__play:focus-visible {
  color: #fff;
  outline: none;
}
.video-embed__play:focus-visible {
  box-shadow: inset 0 0 0 1px #f6f4ef;
}
.video-stack { display: grid; gap: 1rem; }
.video-stack__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.35rem;
}

/* Multi-film: featured player + left film-strip + right next-project pill (no autoplay) */
.film-switcher { width: 100%; }
.project__player--switcher {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.project__player--switcher .film-switcher {
  width: min(100%, calc(58vh * 16 / 9));
}
.project__player--switcher .video-embed {
  width: 100%;
  max-height: 58vh;
  aspect-ratio: 16 / 9;
}
.film-badge {
  margin: 0.6rem 0 0;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
}
.film-badge span { opacity: 0.7; }
.film-switcher__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 0.55rem;
  width: 100%;
}
.film-switcher--single .film-switcher__row { justify-content: flex-end; }
.film-strip {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}
.film-strip__item {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  flex: 0 1 8.5rem;
  max-width: 9.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  color: var(--mute);
  cursor: pointer;
  font: inherit;
  opacity: 0.62;
}
.film-strip__item:hover,
.film-strip__item:focus-visible { color: var(--fg); opacity: 0.92; }
.film-strip__item[aria-selected="true"] { color: var(--fg); opacity: 1; }
.film-strip__item:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}
.film-strip__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e8e5df;
  box-shadow: inset 0 0 0 1px transparent;
}
.film-strip__item[aria-selected="true"] .film-strip__media {
  box-shadow: inset 0 0 0 1px var(--fg);
}
.film-strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film-strip__n {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.35rem;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.next-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 1 auto;
  max-width: min(22rem, 44%);
  margin: 0;
  padding: 0.45rem 0.8rem 0.45rem 0.7rem;
  border: 1px solid var(--line, #ddd8cf);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  text-decoration: none;
  line-height: 1.35;
  align-self: flex-start;
}
.next-pill em { font-style: normal; color: var(--mute); letter-spacing: 0.14em; }
.next-pill:hover { border-color: var(--fg); color: var(--fg); }
.next-pill:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
@media (max-width: 620px) {
  .project__player--switcher .film-switcher,
  .project__player--switcher .video-embed {
    width: 100%;
    max-height: none;
  }
  .film-switcher__row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }
  .film-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
  }
  .film-strip__item { flex: 0 0 6.5rem; max-width: 6.5rem; }
  .next-pill { max-width: 100%; align-self: flex-end; }
}

.project__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
  align-items: start;
}
.project__left {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  min-width: 0;
}
.project__credits { min-width: 0; }
.project__kit { min-width: 0; }
.kit--inline { margin-top: 0; }
@media (max-width: 860px) {
  .project__head {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
  }
  .project__intro { width: 100%; }
  /* Mobile order: title/Shot on → credits → Camera Notes */
  .project__left { display: contents; }
  .project__intro { order: 1; }
  .project__credits { order: 2; }
  .project__kit { order: 3; }
}
/* Colour palette bar: 15 seamless ~1.35:1 cells, no hairlines or rule.
   Lives in the left (title) column, directly under the title (and client
   line, if any), flush with that column's content width. ~1rem gap below
   the title. On mobile, full content width under the title. */
.palette {
  margin: 1rem 0 0;
  width: 100%;
  max-width: 100%;
}
.palette__bar {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  width: 100%;
  gap: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.palette__swatch {
  aspect-ratio: 1.35 / 1;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
  box-shadow: none;
}
.palette__swatch:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
  z-index: 1;
  position: relative;
}
.palette__readout {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0.35rem 0 0;
  min-height: 1.15rem; /* reserved so hover/tap never shifts the layout */
  line-height: 1.15rem;
}
/* Project BTS: Photography contact-sheet treatment, in the title column
   under the swatch bar. Always 4 columns, wrapping to further rows of 4;
   2 columns below 620px (4 across is too tight at 390). Same 3:2 cover
   frames, mono numbers, and gaps as .photo-cell / .photo-grid. */
/* Single shared BTS contact sheet — every project/film with a `bts` array uses this (see EDITING.md). */
.project-bts {
  margin: 1rem 0 0;
  width: 100%;
}
.project-bts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0;
}
@media (max-width: 620px) {
  .project-bts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
}
.palette__readout.is-copied { color: var(--fg); }
.project__kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 0.55rem;
}
.project__title {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.55rem);
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.project__client {
  color: var(--mute);
  font-size: 14px;
}

.slate {
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mute);
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  max-width: 28rem;
}
.slate strong { color: var(--fg); font-weight: 500; }

.credits {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.credits__row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 520px) {
  .credits__row { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.7rem 0; }
}
.credits__k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.credits__v {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg);
  line-height: 1.45;
}
.credits__v br { display: block; content: ""; margin: 0; }
.credits__v.is-tbd { color: var(--mute); }

/* BTS */
.section {
  margin: 2.75rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.section__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 1rem;
}
.bts-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: start;
}
@media (max-width: 700px) {
  .bts-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Camera notes (kit plates) — under title beside credits; never mirror camera */
.kit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
  background: #fff;
  padding: 1.05rem 1.05rem 0.9rem;
  border: 1px solid var(--line);
}
.kit--inline {
  margin-top: 0;
  max-width: 100%;
}
.kit__plate {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  min-height: 0;
}
.kit__plate img {
  height: clamp(112px, 15vw, 168px);
  width: 100%;
  max-width: 100%;
  margin: 0 auto 0.45rem;
  object-fit: contain;
  object-position: center;
}
.kit__plate--lens img,
.kit__plate--cam img { transform: none; } /* never mirror camera logos */
.kit__name {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.35;
}
.kit__note {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--mute);
  margin: 0.15rem 0 0;
}
@media (max-width: 860px) {
  .kit--inline { margin-top: 0.25rem; }
}
@media (max-width: 420px) {
  .kit { grid-template-columns: 1fr; gap: 0.75rem; }
  .kit__plate img { height: 130px; }
}

/* Nav + more work */
.project-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-family: var(--sans);
}
.project-nav a {
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 48%;
  transition: color 180ms ease, transform 180ms ease;
}
.project-nav a:hover { color: var(--fg); }
.project-nav__next:hover { transform: translateX(3px); }
.project-nav__prev:hover { transform: translateX(-3px); }
.project-nav .dim { color: var(--mute); }
.project-nav__arrow {
  font-size: 0.95em;
  opacity: 0.75;
}
.project-nav a:hover .project-nav__arrow { opacity: 1; }

.more-work { margin-top: 1.5rem; }
.more-work__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
@media (max-width: 860px) {
  .more-work__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.more-work__card .card__media { aspect-ratio: 16 / 9; }
.more-work__card .card__meta { font-size: 11px; }

/* Lightbox — opaque warm paper surround (site --bg #E8E6E0).
   Solid so the page behind never shows through. Images stay unfiltered
   so the paper cannot cast a colour on the still. Close / arrows (and any
   counter or caption) use dark ink for contrast on the light ground. */
.still-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg); /* #e8e6e0 */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.still-lightbox.is-open { display: flex; }
/* Grain on the warm paper surround only: full-bleed, behind the still.
   Same multiply grain as the page, slightly stronger so it reads on the
   large empty surround without looking heavy. The photograph sits above
   it (z-index 1), unfiltered, so colour, contrast and grain are unchanged. */
.still-lightbox__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.167;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.065  0 0 0 0 0.055  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-repeat: repeat;
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: reduce) {
  .still-lightbox__grain { opacity: 0.0952; }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .still-lightbox__grain {
    mix-blend-mode: normal;
    opacity: 0.167;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='540' height='540'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.28333' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.065  0 0 0 0 0.055  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
    background-size: 180px 180px;
  }
}
.still-lightbox__close {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: var(--pad);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: none;
}
.still-lightbox img {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 100%);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none; /* always full colour; never inherit BTS thumb grayscale; no surround grain or cast */
  background: none;
  mix-blend-mode: normal;
}
.still-lightbox__nav {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.still-lightbox__prev { left: var(--pad); }
.still-lightbox__next { right: var(--pad); }
/* Thin 12px line arrows, 0.75px non-scaling stroke, matching header icons.
   currentColor so they follow the label ink (and any hover). */
.still-lightbox__arrow {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  color: inherit;
}
.still-lightbox__arrow * {
  vector-effect: non-scaling-stroke;
}
.still-lightbox.is-single .still-lightbox__nav { display: none; }
.still-lightbox__meta,
.still-lightbox__count,
.still-lightbox__caption {
  color: var(--fg);
  text-shadow: none;
}
.still-lightbox__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(1100px, 100%);
}
.still-lightbox__frame img {
  max-width: 100%;
  max-height: calc(82vh - 2.2rem);
}
/* Photography */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0 var(--pad) 4.5rem;
}
@media (max-width: 980px) {
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
}
.photo-cell {
  position: relative;
  background: #e8e5df;
  outline: 1px solid var(--line);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  width: 100%;
  display: block;
  text-align: left;
  color: inherit;
  font: inherit;
  overflow: hidden;
}
.photo-cell img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.photo-cell:hover,
.photo-cell:focus-visible {
  outline: 1px solid var(--line-strong);
  outline-offset: 0;
}

/* Photography album contact sheet — justified rows at each frame's real
   aspect ratio. BTS (.project-bts) keeps the 3:2 .photo-grid / .photo-cell
   treatment above, including the rest outline and B&W-to-colour hover. */
.photo-grid--justified {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--pad) 4.5rem;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip; /* belt: do not let a stray subpixel or hover outline scroll the page */
}
.photo-grid--justified .photo-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.photo-grid--justified .photo-cell {
  background: transparent;
  outline: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: var(--cell-w);
  height: var(--cell-h);
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.photo-grid--justified .photo-cell:hover,
.photo-grid--justified .photo-cell:focus-visible {
  outline: 1px solid var(--line-strong);
  outline-offset: 0;
}
.photo-grid--justified .photo-cell img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: fill;
  display: block;
}

/* BTS thumbs: B&W lives on a wrapper so it does not collide with the
   .develop filter on the <img>. Full colour on hover/keyboard focus
   only when a fine pointer can hover. Touch stays B&W; the lightbox
   image is unfiltered and always colour. */
.project-bts__thumb {
  display: block;
  width: 100%;
  overflow: hidden;
  filter: grayscale(1);
  transition: filter 0.35s var(--ease);
}
.project-bts .photo-cell:hover .project-bts__thumb,
.project-bts .photo-cell:focus-visible .project-bts__thumb {
  filter: grayscale(0);
}
@media (hover: none) {
  .project-bts .photo-cell:hover .project-bts__thumb,
  .project-bts .photo-cell:focus-visible .project-bts__thumb {
    filter: grayscale(1); /* touch: no sticky-hover colour; lightbox is colour */
  }
}
.photo-cell__n {
  position: absolute;
  left: 0.35rem;
  bottom: 0.3rem;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(252,251,248,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.page-intro {
  padding: 2.75rem var(--pad) 1.5rem;
}
/* Section indexes (Commercial, Music Video, Documentary, Photography)
   share this intro. After it, tighten the grid's top padding so the gap
   under the meta line matches the photography albums index / album page
   (intro padding-bottom 1.5rem + 0.35rem). */
.work-grid--after-intro {
  padding-top: 0.35rem;
}
.doco--index {
  max-width: none;
  padding-top: 0.35rem;
}
.page-intro h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.65rem, 3.2vw, 2.15rem);
  letter-spacing: -0.015em;
}
.page-intro__meta {
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.55;
}
/* Section-index count only (not album meta). Same mono line, no box.
   The sensor-plane mark sits just before the count. Height is locked to
   the 10px text em so the taller vertical mark overflows into the meta
   line's existing leading and does not push line-height or spacing. */
.page-intro__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  height: 1em;
  overflow: visible;
  vertical-align: middle;
}
/* Reserves the diagonal of the 9×15 mark (√(9²+15²) ≈ 17.5px → 18px)
   so a full rotation never overlaps the count text. The 6px gap is
   measured from this reserved box, so the clearance holds at every
   angle. Height stays 1em so the line box does not grow. */
.sensor-mark-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: none;
}
/* Reusable film / sensor-plane symbol: circle with a vertical through-line
   that extends half a diameter above and below. Layout box is 9×15 so it
   fits inside the 10px / 1.55 meta line box and does not push spacing.
   Inherits currentColor; 1px stroke; ~7px visual circle.
   Spins clockwise around its exact centre, 3.5s linear infinite, unless
   the user prefers reduced motion. */
.sensor-mark {
  display: block;
  width: 9px;
  height: 15px;
  flex: 0 0 auto;
  overflow: visible;
  color: inherit;
  fill: none;
  shape-rendering: geometricPrecision;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: sensor-mark-spin 3.5s linear infinite;
}
@keyframes sensor-mark-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sensor-mark { animation: none; }
}
.album-note__highlight {
  display: inline;
  color: #f6f4ef; /* previous brighter paper, kept for contrast on the red block */
  background-color: var(--leica-red);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  padding: 0 3px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.album-note,
.album-note__k,
.album-note__v,
.album-note__item {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.album-note-sep,
.album-note__sep { white-space: pre-wrap; }

/* Album description / article: a little larger than the 10px mono header
   line, quiet secondary colour, narrow measure. Used for Ben’s copy, the
   shared placeholder, and The Explore Project article. */
.album-intro {
  padding: 0.35rem var(--pad) 2.75rem;
}
.album-intro--with-book {
  display: grid;
  grid-template-columns: minmax(0, 24rem) auto;
  justify-content: start;
  align-items: start;
  column-gap: clamp(1.5rem, 2.4vw, 2.25rem);
  row-gap: 1.5rem;
}
.album-article { min-width: 0; }
.album-article p {
  max-width: 24rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mute);
}
.album-article p + p { margin-top: 0.9em; }
.album-article__closer { margin-top: 1.6em; }

/* The Explore Project book stills sit to the right of the article, after a
   balanced gutter, as a compact row of small quiet thumbnails (120px at
   desktop). The book column shrinks to the thumbs and does not fill leftover
   width, sit at the far edge, or extend below the article text. Generous
   empty space around them is intentional. Tiny mono label. Not clickable;
   no lightbox. On small screens a small row sits under the article. */
.album-book {
  min-width: 0;
  width: max-content;
  max-width: 100%;
  padding: 0;
  align-self: start;
}
.album-book__label {
  margin: 0 0 0.55rem;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.55;
}
.album-book__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
}
.album-book__item {
  margin: 0;
  flex: 0 0 120px;
  width: 120px;
  background: #e8e5df;
}
.album-book__item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 720px) {
  .album-intro--with-book {
    grid-template-columns: minmax(0, 1fr);
  }
  .album-book {
    width: 100%;
    max-width: 100%;
  }
  .album-book__row {
    width: 100%;
  }
  .album-book__item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 120px;
  }
}

/* About / contact */
.simple {
  max-width: 36rem;
  padding: 2.5rem var(--pad) 5rem;
}
.simple h1 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.05rem;
  letter-spacing: -0.015em;
}
.simple p { color: var(--mute); margin: 0 0 0.85rem; }
.empty-line {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0.25rem var(--pad) 4rem;
}
.simple a { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- About + Contact ---------- */
.about-page {
  padding: 2.85rem var(--pad) 5.5rem;
}
.about-page__intro {
  margin: 0 0 clamp(2rem, 4.5vw, 3.25rem);
}
.about-page__kicker {
  margin: 0 0 1.1rem;
}
.about-page__kicker-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1;
  height: 1em;
  overflow: visible;
}
.about-page__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.35rem, 6.2vw, 4.35rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 12ch;
  color: var(--fg);
}
.about-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.25rem);
  align-items: start;
}
.about-page__photo {
  margin: 0;
  max-width: 28rem;
}
.about-page__photo picture,
.about-page__photo img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}
.about-page__photo-credit {
  margin: 0.55rem 0 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.55;
  text-align: left;
}
.about-page__copy {
  max-width: 38rem;
  min-width: 0;
  padding-top: 0.15rem;
}
.about-page__bio {
  margin: 0 0 2.35rem;
}
.about-page__bio-p {
  margin: 0 0 0.9em;
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: 36em;
}
.about-page__bio-p:last-child { margin-bottom: 0; }
.about-report,
.about-contacts,
.about-clients {
  margin: 0 0 1.85rem;
}
.about-report:last-child,
.about-contacts:last-child,
.about-clients:last-child { margin-bottom: 0; }
.about-report__heading,
.about-contacts__heading,
.about-clients__heading {
  margin: 0 0 0.15rem;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.about-report__list,
.about-contacts__list {
  margin: 0;
  border-top: 1px solid var(--line);
}
.about-report__row,
.about-contacts__row {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0.58rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.about-report__row dt,
.about-contacts__row dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
}
.about-report__row dd,
.about-contacts__row dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Keep emails in the case they were written (Ben@benblenner.com). */
.about-contacts__row dd {
  text-transform: none;
  letter-spacing: 0.06em;
}
.about-page__link {
  display: inline;
  padding: 0 3px;
  margin: 0 -3px;
  color: inherit;
  text-decoration: none;
}
.about-page__link:hover,
.about-page__link:focus-visible {
  color: #f6f4ef;
  background-color: var(--leica-red);
  outline: none;
}
.about-socials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  margin: 0 0 1.85rem;
  padding-top: 0.15rem;
}
.about-socials .social-row { gap: 0.85rem; }
.about-socials .nav-icon { color: var(--mute); }
.about-socials .nav-icon:hover,
.about-socials .nav-icon:focus-visible { color: var(--fg); }
.about-socials__auscrew {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.about-socials__auscrew:hover,
.about-socials__auscrew:focus-visible {
  color: var(--fg);
}
.about-socials__auscrew:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}
.about-clients__line {
  margin: 0.55rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.75;
}
@media (max-width: 860px) {
  .about-page {
    padding-top: 2.15rem;
    padding-bottom: 4.25rem;
  }
  .about-page__intro { margin-bottom: 1.75rem; }
  .about-page__layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .about-page__photo { max-width: 22.5rem; }
  .about-page__copy { max-width: none; }
  .about-report__row,
  .about-contacts__row {
    grid-template-columns: 7.25rem minmax(0, 1fr);
    gap: 0.55rem 0.75rem;
  }
}

/* Footer — slate / camera report */
.site-footer {
  margin-top: auto;
  padding: 0;
  background: transparent;
}
.slate-footer {
  padding: 0 var(--pad) 1.35rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
/* Single 1px rule. A short vertical tick (8px, same 1px line colour)
   crosses the rule at its horizontal centre — an ARRI viewfinder-style
   centre mark. Applied to both the top and bottom rules. */
.slate-footer__rule {
  position: relative;
  height: 1px;
  background: var(--line);
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
}
.slate-footer__rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 8px;
  background: var(--line);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Three columns so the GPS readout (and the rule ticks) stay on the true
   horizontal centre: left group | gps | right group. Side items cannot
   push the centre off. */
.slate-footer__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.55rem 0;
  min-height: 0;
}
.slate-footer__left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.slate-footer__still {
  width: 40px;
  height: 26px;
  object-fit: cover;
  flex-shrink: 0;
  background: #e4e1db;
  outline: 1px solid var(--line);
}
.slate-footer__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slate-footer__center {
  white-space: nowrap;
}
.slate-footer__gps {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: center;
  white-space: nowrap;
  color: inherit;
}
.slate-footer__pin {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  overflow: visible;
}
.slate-footer__gps-text {
  white-space: nowrap;
}
.slate-footer__right {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  min-width: 0;
  max-width: 100%;
  text-align: right;
}
.slate-footer__credit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.slate-footer__bookings {
  margin: 0;
  padding: 0.4rem 0 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.4;
}
.slate-footer__bookings a {
  color: inherit;
  text-decoration: none;
}
.slate-footer__bookings a:hover,
.slate-footer__bookings a:focus-visible {
  color: var(--fg);
}
.slate-footer__bookings a:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}
/* Running Melbourne timecode, reserved to 00:00:00:00 so the row never jumps.
   A static 6px Leica-red tally light sits immediately left, 6px gap, centred
   on the digits. No blink. */
.slate-footer__tc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.slate-footer__tally {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--leica-red); /* #E20612 */
  flex: 0 0 auto;
}
.slate-footer__tc-slot {
  position: relative;
  display: grid;
  justify-items: end;
  align-items: center;
}
.slate-footer__tc-sizer,
.slate-footer__tc-copy {
  grid-area: 1 / 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: inherit;
  font: inherit;
  text-transform: inherit;
}
.slate-footer__tc-sizer {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.slate-footer__tc-copy {
  pointer-events: none;
}
/* Stay a single line on small screens: hide the lowest-priority items. */
@media (max-width: 860px) {
  .slate-footer {
    font-size: 8.5px;
    letter-spacing: 0.08em;
    padding-bottom: 1.1rem;
  }
  .slate-footer__row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.55rem;
  }
  .slate-footer__credit { display: none; } /* credit is already in the header */
  .slate-footer__right { gap: 0; }
  .slate-footer__bookings { text-align: center; }
  .slate-footer__still {
    width: 32px;
    height: 21px;
  }
}
@media (max-width: 560px) {
  .slate-footer__center,
  .slate-footer__label { display: none; }
  .slate-footer__row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.55rem;
  }
}
/* At 390px the longer GPS string needs the still dropped so the
   centre slot and the tally/timecode stay on one unwrapped line. */
@media (max-width: 420px) {
  .slate-footer__still { display: none; }
}

/* ---------- Albums index ---------- */
.album-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding: 0.35rem var(--pad) clamp(3.5rem, 9vh, 5.5rem);
}
@media (max-width: 980px) {
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .album-grid { grid-template-columns: 1fr; }
}
.album-card {
  display: block;
  position: relative;
  color: inherit;
}
.album-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e4e1db;
}
.album-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.album-card:hover .album-card__media,
.album-card:focus-visible .album-card__media {
  outline: 1px solid var(--line-strong);
  outline-offset: 0;
}
.album-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.album-card__title { color: var(--fg); letter-spacing: 0.08em; }
.placeholder-flag {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.project-note {
  margin: 1.25rem 0 0;
  max-width: 38rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
  white-space: pre-line;
}

.card__year { display: none; } /* years removed from cards per Ben v5 */

/* ---------- v8: contact-sheet work grid (Option D) ---------- */
.work-grid .card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.work-grid .card__media {
  aspect-ratio: 3 / 2;
  --card-ar: 1.5;
  outline: 1px solid var(--line);
  overflow: hidden;
  flex: 0 0 auto;
}
.work-grid .card__poster { object-position: center 45%; }
.work-grid .card__index {
  top: auto; left: 0.35rem; bottom: 0.3rem;
  font-size: 8px; letter-spacing: 0.12em;
  color: rgba(252,251,248,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  white-space: nowrap;
  font-weight: 400;
}
/* Vimeo hover preview covers the 3:2 frame (2.39, 16:9, 4:3 or 9:16 sources), clipped, no letterbox */
.work-grid .card__meta {
  padding: 0.4rem 0.02rem 0;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  /* Reserve two caption lines so long "Client — Title" wraps without
     shifting thumbnails in the row. */
  min-height: calc(0.4rem + 2 * 9px * 1.35);
  box-sizing: content-box;
}
.work-grid .card__label {
  color: var(--fg);
  white-space: normal;
  overflow: hidden;
  text-overflow: unset;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.35;
}
@media (max-width: 699px) {
  .work-grid .card__index { font-size: 8px; }
}


/* ---------- Splash / home reel ---------- */
body[data-page="splash"] {
  overflow: hidden;
  background: #111;
  height: 100%;
}
body[data-page="splash"] #site-header,
body[data-page="splash"] #site-footer { display: none; }
.splash {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
  color: #fcfbf8;
  background: #111;
}
.splash__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
  --view-ar: 1.777778;
  --frame-ar: 1.777778;
  --picture-ar: 1.777778;
  --bar-off-x: 0;
  --bar-off-y: 0;
}
.splash__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  display: block;
  border: 0;
  z-index: 1;
  pointer-events: none;
  background: #111;
  transition: opacity 0.45s ease;
}
.splash__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(
    calc(-50% - var(--bar-off-x, 0) * 100%),
    calc(-50% - var(--bar-off-y, 0) * 100%)
  );
  /* Cover-crop a 16:9 reel in a portrait viewport, centred. */
  --_overscan: 1.015;
  --_pic-w: max(100%, calc(100% * var(--picture-ar, 1.777778) / var(--view-ar, 1.777778)));
  --_pic-h: max(100%, calc(100% * var(--view-ar, 1.777778) / var(--picture-ar, 1.777778)));
  width: calc(var(--_pic-w) * var(--_overscan) / min(1, calc(var(--picture-ar, 1.777778) / var(--frame-ar, 1.777778))));
  height: calc(var(--_pic-h) * var(--_overscan) / min(1, calc(var(--frame-ar, 1.777778) / var(--picture-ar, 1.777778))));
  border: 0;
  max-width: none;
  max-height: none;
  pointer-events: none;
  object-fit: cover;
  display: block;
}
.splash__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.splash.is-playing .splash__video { opacity: 1; }
.splash.is-playing .splash__poster { opacity: 0; }
.splash__overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.splash__overlay a,
.splash__overlay button { pointer-events: auto; }
.splash__identity {
  position: absolute;
  top: calc(1.35rem + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.splash__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fcfbf8;
  white-space: nowrap;
  margin-right: -0.16em; /* cancel trailing letter-spacing so the lockup is optically centred */
}
.splash__meta {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252, 251, 248, 0.62);
  white-space: nowrap;
  margin-right: -0.14em;
}
/* Full-width dock so the ENTER pill is the flex centre of the viewport, not 50%+translate (avoids padding/letter-spacing skew). */
.splash__dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(2.15rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  pointer-events: none;
}
.splash__play {
  appearance: none;
  border: 1px solid rgba(252, 251, 248, 0.55);
  background: transparent;
  color: #fcfbf8;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  min-height: 36px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}
.splash__play[hidden] { display: none; }
.splash__play:hover { border-color: #fcfbf8; background: rgba(252, 251, 248, 0.06); }
.splash__play:focus-visible { outline: 1px solid #fcfbf8; outline-offset: 3px; }
.splash__enter {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(252, 251, 248, 0.72);
  color: #fcfbf8;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  text-decoration: none;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  white-space: nowrap;
}
.splash__enter-arrow { letter-spacing: 0; }
.splash__enter:hover { border-color: #fcfbf8; background: rgba(252, 251, 248, 0.06); }
.splash__enter:focus-visible { outline: 1px solid #fcfbf8; outline-offset: 3px; }
.splash__sound {
  position: absolute;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px));
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0.7rem 0.35rem;
  min-height: 44px;
  color: rgba(252, 251, 248, 0.7);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.splash__sound:hover { color: #fcfbf8; }
.splash__sound:focus-visible { outline: 1px solid #fcfbf8; outline-offset: 3px; }
.splash__social {
  position: absolute;
  left: calc(1.25rem + env(safe-area-inset-left, 0px));
  bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  z-index: 2;
}
.splash__social.social-row { gap: 0.85rem; }
.splash__social .nav-icon { color: rgba(252, 251, 248, 0.7); }
.splash__social .nav-icon:hover,
.splash__social .nav-icon:focus-visible { color: #fcfbf8; background: transparent; }
@media (max-width: 620px) {
  .splash__social {
    left: calc(0.9rem + env(safe-area-inset-left, 0px));
    bottom: calc(2.55rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 620px) {
  .splash__name { font-size: 12px; letter-spacing: 0.13em; margin-right: -0.13em; }
  .splash__meta { font-size: 8px; }
  .splash__dock {
    bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  }
  .splash__enter {
    padding: 0.65rem 1.1rem;
  }
  .splash__sound {
    right: calc(0.75rem + env(safe-area-inset-right, 0px));
    bottom: calc(2.35rem + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash__poster,
  .splash__video { transition: none; }
}

/* Splash SPEED stamp — once per session, as the reel starts */
.splash__speed {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(252, 251, 248, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  margin-right: -0.22em;
}
.splash__speed.is-in { opacity: 1; transition: opacity 0.25s ease; }
.splash__speed.is-out { opacity: 0; transition: opacity 0.35s ease; }
.splash__speed.is-static { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .splash__speed { transition: none; }
}

/* 'Rolling' — only after a 400ms delay, while a player iframe is still loading */
.rolling {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(252, 251, 248, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  margin-right: -0.18em;
}
.card__media .rolling {
  font-size: 8px;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
}
.card.is-previewing .rolling { display: none; }



/* ---------- Documentary ---------- */
/* 2:3 poster index (4 / 3 / 2) and film pages. Live section, not a mock. */
.doco {
  --doco-pad: var(--pad);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--doco-pad) 6rem;
}
.doco-index__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.03em;
  margin: 0.5rem 0 2.5rem;
}
.doco-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem 1.25rem;
}
@media (max-width: 960px) {
  .doco-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .doco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.85rem; }
}
.doco-card {
  text-decoration: none;
  color: inherit;
  display: block;
}
.doco-card__poster {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #e7e4de;
  position: relative;
}
.doco-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.doco-card__meta {
  margin-top: 0.65rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.doco-card__year { color: var(--mute); }
.doco-card__ph {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 0.2rem 0.4rem;
}
.doco-film__hero {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin: 0.5rem 0 2.75rem;
}
@media (max-width: 720px) {
  .doco-film__hero { grid-template-columns: 1fr; }
  .doco-film__poster { max-width: 280px; }
}
.doco-film__poster {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #e7e4de;
  position: relative;
}
.doco-film__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doco-film__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0 0 0.85rem;
}
.doco-film__sub {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--mute);
  margin: 0 0 0.85rem;
}
.doco-film__meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 1rem;
}
.doco-film__role {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}
.doco-sites {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 1.1rem;
}
.doco-site {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  display: inline-block;
}
.doco-site:hover { border-bottom-color: var(--fg); }
.doco-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  margin: 0 0 2.75rem;
}
.doco-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.doco-syn {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 38rem;
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}
.doco-laurels {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 2.75rem;
  max-width: 38rem;
}
.doco-credits {
  margin: 0 0 3rem;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  max-width: 40rem;
}
.doco-credits__row {
  display: grid;
  grid-template-columns: minmax(8rem, 34%) 1fr;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
}
@media (max-width: 620px) {
  .doco-credits__row { grid-template-columns: 1fr; gap: 0.2rem; }
}
.doco-credits__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}
.doco-credits__v {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0;
  white-space: pre-line;
}
.doco-back {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1.5rem;
}
.doco-back:hover { color: var(--fg); }
.doco .project-bts { margin-top: 0.5rem; margin-bottom: 3rem; }
.doco .palette { margin: 0 0 2.5rem; }
.more-work__row--doco {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 0.85rem;
}
@media (max-width: 960px) {
  .more-work__row--doco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .more-work__row--doco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- Documentary feature layout (A24-style; opt-in via layout: "feature") ---------- */
.doco--feature {
  max-width: none;
  padding: 0 0 6rem;
}
.doco--feature > .doco-back {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--doco-pad);
  padding-right: var(--doco-pad);
}
.doco--feature > .doco-back {
  display: block;
  margin-bottom: 1rem;
}
.doco-feature__hero {
  position: relative;
  width: 100%;
  background: #111;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.doco-feature__still {
  position: relative;
}
.doco-feature__still img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #111;
}
.doco-feature__play {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  min-height: 44px;
  padding: 0.35rem 0.15rem;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f6f4ef;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.doco-feature__play-mark {
  font-size: 0.62rem;
  line-height: 1;
  opacity: 0.9;
}
.doco-feature__play:hover,
.doco-feature__play:focus-visible {
  color: #fff;
  outline: none;
}
.doco-feature__play:focus-visible {
  box-shadow: 0 1px 0 currentColor;
}
.doco-feature__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
}
.doco-feature__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.doco-feature__body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--doco-pad);
}
.doco-feature__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 13vw, 8rem);
  letter-spacing: -0.045em;
  line-height: 0.88;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  text-wrap: balance;
  max-width: 18ch;
}
.doco-feature__syn {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.3vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 38rem;
  margin: 0 0 clamp(2.25rem, 5vw, 3.5rem);
  text-wrap: pretty;
}
.doco-feature__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
}
.doco-feature__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 1.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
}
.doco-feature__fact {
  margin: 0;
}
.doco-feature__fact dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 0.35rem;
}
.doco-feature__fact dd {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  white-space: pre-line;
}
.doco-feature__site .doco-sites { margin-top: 0.25rem; }
.doco-feature__poster {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #e7e4de;
  position: relative;
}
.doco-feature__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.doco--feature .doco-credits { max-width: 40rem; }
.doco--feature .project-bts { margin-top: 0.5rem; margin-bottom: 3rem; }
.doco--feature .palette { margin: 0 0 2.5rem; }
@media (max-width: 720px) {
  .doco-feature__split {
    grid-template-columns: 1fr;
  }
  .doco-feature__poster {
    max-width: 240px;
  }
  .doco-feature__facts {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
  .doco-feature__play {
    left: max(0.85rem, var(--pad));
    bottom: max(0.85rem, var(--pad));
  }
}
@media (max-width: 420px) {
  .doco-feature__title {
    font-size: clamp(2.4rem, 14vw, 3.25rem);
    max-width: none;
  }
}