/* ══════════════════════════════════════════════════════
   JRN — Jurian van der Meulen
   Portfolio stylesheet

   Fonts:
     Fraunces        — JRN emblem (900 italic serif)
     Bebas Neue      — panel headings
     Space Grotesk   — UI, ghost wordmark, body
     Instrument Serif — italic sub-text, descriptions
══════════════════════════════════════════════════════ */


/* ── TOKENS ────────────────────────────────────────── */
:root {
  --bg:    #070709;
  --fg:    #E8E5DC;
  --dim:   rgba(232, 229, 220, .28);
  --faint: rgba(232, 229, 220, .055);
  --bdr:   rgba(232, 229, 220, .07);
  --bdr-m: rgba(232, 229, 220, .15);

  /* ── Neon light sources ──────────────────────────
     Never used as text colour or fill.
     Only bleed as coloured light onto glass surfaces.
  ─────────────────────────────────────────────────── */
  --r: 195, 18, 55;    /* deep cinema red     */
  --b: 191,  88, 52;   /* copper */

  --nav-h: 58px;

  /* ── Strip layout ── */
  --gap-vid:  4.2vw;
  --gap-foto: 3.5vw;
  --strip-top-h: 85vh;
  --strip-bot-h: 65vh;
  --fs: 1;     /* top strip frame scale — override op mobiel */
  --fs-bot: 1; /* bottom strip frame scale — override op mobiel */

  /* ── Film panel tokens ── */
  --bg2:       #0e0e12;
  --blue:      rgb(191, 88, 52);
  --blue-glow: rgba(191, 88, 52, .18);
  --gold:      rgb(204, 166, 52);
  --gold-dim:  rgba(204, 166, 52, .22);
  --muted:     rgba(232, 229, 220, .18);
}


/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
  cursor: none;
}


/* ── CUSTOM CURSOR ─────────────────────────────────── */
.c-d, .c-r {
  position: fixed; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); border-radius: 50%;
}
.c-d {
  width: 3px; height: 3px;
  background: var(--fg);
  mix-blend-mode: difference;
}
.c-r {
  width: 26px; height: 26px;
  border: 1px solid rgba(232, 229, 220, .18);
  transition: width .16s ease, height .16s ease, border-color .3s ease;
}
.c-r.xl { width: 44px; height: 44px; }


/* ── GRAIN ─────────────────────────────────────────── */
#grain {
  position: fixed; inset: 0; z-index: 88;
  pointer-events: none;
  opacity: .025;
  mix-blend-mode: screen;
}


/* ══════════════════════════════════════════════════════
   HERO — Filmstrip landing page
══════════════════════════════════════════════════════ */
#hero {
  position: fixed; inset: 0; z-index: 10;
}
/* ── Atmospheric background ── */
#bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at  8% 42%, rgba(10,16,46,.78), transparent 60%),
    radial-gradient(ellipse 48% 42% at 92% 60%, rgba(30, 6,42,.68), transparent 60%),
    radial-gradient(ellipse 36% 30% at 54% 10%, rgba( 6,11,28,.58), transparent 65%),
    radial-gradient(ellipse 38% 32% at 28% 85%, rgba( 3,14,36,.52), transparent 62%),
    radial-gradient(ellipse 30% 28% at 72% 85%, rgba(16, 6,32,.45), transparent 58%),
    #06060a;
}

/* ── Atmospheric haze — depth layers ── */
#haze-a {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 42% at 10% 25%, rgba(2,5,20,.70), transparent 72%),
    radial-gradient(ellipse 44% 36% at 46% 10%, rgba(2,5,20,.64), transparent 70%),
    radial-gradient(ellipse 58% 46% at 82% 34%, rgba(2,5,20,.68), transparent 72%),
    radial-gradient(ellipse 46% 38% at 26% 64%, rgba(2,5,20,.63), transparent 68%),
    radial-gradient(ellipse 40% 32% at 70% 74%, rgba(2,5,20,.60), transparent 68%),
    radial-gradient(ellipse 34% 28% at 88%  8%, rgba(2,5,20,.56), transparent 65%);
}
#haze-b {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 32% at 20% 46%, rgba(2,4,18,.34), transparent 68%),
    radial-gradient(ellipse 34% 28% at 62% 20%, rgba(2,4,18,.30), transparent 65%),
    radial-gradient(ellipse 42% 34% at 84% 68%, rgba(2,4,18,.32), transparent 68%),
    radial-gradient(ellipse 28% 24% at 38% 80%, rgba(2,4,18,.26), transparent 62%);
}

/* ── Stage ── */
.stage {
  position: absolute; inset: 0;
  overflow: hidden;
  isolation: isolate;
  perspective: 1400px;
}
#scene-rot {
  position: absolute; inset: 0 0 -2vh 0;
  isolation: isolate;
  transform: translateY(-2vh);
}

/* ── Filmstrips ── */
.strip-wrap {
  position: absolute;
  overflow: hidden;
}
.strip-top {
  bottom: 33vh; left: 0;
  width: 100%; height: var(--strip-top-h);
  z-index: 3;
}
.strip-bottom {
  top: 38vh; left: 0;
  width: 100%; height: var(--strip-bot-h);
  z-index: 1;
}

/* Tilt layer — 4× taller so rotated parallelogram covers all corners */
.strip-tilt {
  position: absolute;
  top: -150%; height: 400%;
  display: flex; align-items: center;
}

/* Edge fades — mask dark corners + cinematic fade-in/out */
.stage::before,
.stage::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 6vw; z-index: 5;
  pointer-events: none;
}
.stage::before {
  left: 0;
  background: linear-gradient(to right, #060606, transparent);
}
.stage::after {
  right: 0;
  background: linear-gradient(to left, #060606, transparent);
}

/* Top strip: -11.1° CCW */
.strip-top    .strip-tilt { left: -15%; width: 130%; transform: rotate(-11.1deg); }
/* Bottom strip: +4.4° CW */
.strip-bottom .strip-tilt { left: -5%;  width: 110%; transform: rotate(4.4deg); }

/* Scrolling track */
.strip-track {
  display: flex; align-items: center;
  padding: 80px 7px;
  will-change: transform;
}
.strip-top    .strip-track { gap: var(--gap-vid); }
.strip-bottom .strip-track { gap: var(--gap-foto); }

/* Individual frame — self-lit LED screen look */
.fr-s {
  flex: 0 0 auto;
  box-shadow:
    0 6px 28px   rgba(0,0,0,0.88),
    0 2px 8px    rgba(0,0,0,0.60),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 18px 2px rgba(255,255,255,.06),
    0 0 70px 6px rgba(180,140,90,.05);
  filter: brightness(1.14) saturate(1.08) contrast(1.05);
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
}
.fr-s video,
.fr-s img {
  height: 100%; width: auto;
  display: block;
}
.fr-s video { opacity: 0; transition: opacity .35s ease; object-fit: cover; }

/* ── SVG identity layers ── */
.svg-layer {
  position: absolute;
  left: 50%; top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 65vw;
  height: calc(65vw * 709 / 1910);
  display: block;
  pointer-events: none;
  user-select: none;
}
/* JRN — photographic inversion */
.svg-jrn-invert {
  mix-blend-mode: difference;
  opacity: 0.8; z-index: 8;
  filter:
    drop-shadow( 1px  0   0 rgba(232,229,220,.12))
    drop-shadow(-1px  0   0 rgba(232,229,220,.12))
    drop-shadow( 0    1px 0 rgba(232,229,220,.10))
    drop-shadow( 0   -1px 0 rgba(232,229,220,.14));
}
/* JRN — desaturation */
.svg-jrn-gray {
  mix-blend-mode: color;
  opacity: 1; z-index: 9;
  filter:
    brightness(0.876)
    drop-shadow( 1px  0   0 rgba(232,229,220,.10))
    drop-shadow(-1px  0   0 rgba(232,229,220,.10))
    drop-shadow( 0    1px 0 rgba(232,229,220,.08))
    drop-shadow( 0   -1px 0 rgba(232,229,220,.12));
}
/* JRN — darkening */
.svg-jrn-dark {
  mix-blend-mode: multiply;
  z-index: 10;
  filter: brightness(0.28);
}
/* Name + Roles */
.svg-name  { z-index: 20; }
.svg-roles { z-index: 20; }

/* ── Vignette ── */
.vignette {
  position: absolute; inset: 0;
  z-index: 50; pointer-events: none;
  background: radial-gradient(
    ellipse 85% 85% at 50% 50%,
    transparent 40%,
    rgba(6,6,6,0.5) 100%
  );
}


/* ══════════════════════════════════════════════════════
   DOCK
══════════════════════════════════════════════════════ */
#dw {
  position: fixed; left: 0; right: 0; z-index: 500;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 40px;
  height: 58px;
  top: calc(100vh - 96px);
  opacity: 0; pointer-events: none;
  transition: top .78s cubic-bezier(.4, 0, .2, 1), opacity .5s ease;
}
.cb:first-of-type { justify-self: start; }
.cb:last-of-type  { justify-self: end; }
#dw.ready  { opacity: 1; pointer-events: auto; }
#dw.at-top { top: 20px; }

/* Centre pill wrapper */
#dc { position: relative; }

/* ── Bottom-edge fade — covers viewport gap below dock on landing page ── */
#bot-fade {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 32px; z-index: 490; pointer-events: none;
  background: linear-gradient(to top, #06060a 0%, transparent 100%);
}

/* ── Top-zone click overlay — go home by clicking above the nav ── */
#tz {
  position: fixed; top: 0; left: 0; right: 0; height: 18px;
  z-index: 499; pointer-events: none; cursor: none;
}
/* Activated only when a panel is open (dock has .at-top) */
#dw.at-top ~ #tz { pointer-events: auto; }

/* ── Top-zone up-arrow cursor indicator ── */
#cA {
  position: fixed; pointer-events: none; z-index: 498;
  width: 14px; height: 8px;
  opacity: 0;
  cursor: none;
}
#cA::before,
#cA::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 11px; height: 1.5px;
  background: rgba(232, 229, 220, .55);
  border-radius: 1px;
}
#cA::before { left: 0;  transform-origin: left bottom;  transform: rotate(-41deg); }
#cA::after  { right: 0; transform-origin: right bottom; transform: rotate(41deg); }


/* ── Pill — frosted glass surface ──────────────────────
   Neon light bleeds through from off-screen sources,
   one red-left, one copper-right.
   They intensify when that mode is active.
──────────────────────────────────────────────────────── */
#pill {
  position: relative;
  overflow: visible;   /* loupe hangs outside pill edges */
  display: flex; align-items: center;
  background: rgba(7, 7, 11, .68);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid rgba(232, 229, 220, .085);
  border-radius: 100px;
  box-shadow:
    -24px  0 55px rgba(210, 218, 232, .07),
     24px  0 55px rgba(210, 218, 232, .07),
    inset 0  1px 0 rgba(232, 229, 220, .09),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 0 0 1px rgba(232, 229, 220, .05),
    0 0 36px rgba(232, 229, 220, .04),
    0 24px 60px rgba(0, 0, 0, .9);
  transition: box-shadow .7s cubic-bezier(.4, 0, .2, 1);
}

/* Film mode — copper bleed from above, slightly right */
body.m-film #pill {
  box-shadow:
    0px   -18px 75px  rgba(var(--b), .52),
    20px   -8px 125px rgba(var(--b), .28),
    40px    5px 165px rgba(var(--b), .11),
    -12px   0   38px  rgba(var(--b), .14),
    -5px    0   22px  rgba(var(--r), .02),
    inset 0  1px 0 rgba(var(--b), .22),
    inset 0 -1px 0 rgba(0, 0, 0, .52),
    0 24px 60px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(var(--b), .24);
}

/* Foto mode — red bleed from upper-left */
body.m-foto #pill {
  box-shadow:
    -28px -16px 64px  rgba(var(--r), .54),
    -48px  -7px 108px rgba(var(--r), .27),
    -62px   7px 158px rgba(var(--r), .12),
     8px    0   56px  rgba(var(--r), .06),
     5px    0   22px  rgba(var(--b), .02),
    inset 0  1px 0 rgba(var(--r), .22),
    inset 0 -1px 0 rgba(0, 0, 0, .52),
    0 24px 60px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(var(--r), .24);
}

/* Overig mode — neutral refined glow */
body.m-overig #pill {
  box-shadow:
    -16px -8px 45px rgba(var(--r), .04),
     16px -8px 45px rgba(232, 229, 220, .03),
    inset 0  1px 0 rgba(232, 229, 220, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .52),
    0 24px 60px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(232, 229, 220, .17);
}


/* ── Dock inner ── */
#di {
  display: flex; align-items: center; gap: 1px; padding: 7px;
  position: relative; z-index: 0;
}


/* ── Loupe — sliding magnifier lens ─────────────────────
   Sits inside #di, absolutely positioned.
   JS calculates active button bounds and moves it.
   Has a glowing rim in the current mode colour.
──────────────────────────────────────────────────────── */
#loupe {
  position: absolute;
  border-radius: 100px;
  pointer-events: none;
  z-index: 10;   /* above pill border, below button text */

  background: rgba(7, 7, 11, .96);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);

  /* Idle state: iridescent/prismatic rim */
  box-shadow:
    0 0 0 1.5px rgba(232, 229, 220, .2),
    0 0 20px    rgba(232, 229, 220, .06),
    inset 0  1.5px 0 rgba(232, 229, 220, .22),
    inset 0 -1.5px 0 rgba(0, 0, 0, .42),
    0 8px 28px rgba(0, 0, 0, .5);

  left: 0; width: 0; opacity: 0;
  transition:
    left     .48s cubic-bezier(.4, 0, .2, 1),
    width    .48s cubic-bezier(.4, 0, .2, 1),
    top      .48s cubic-bezier(.4, 0, .2, 1),
    height   .48s cubic-bezier(.4, 0, .2, 1),
    opacity  .35s ease,
    box-shadow .55s ease,
    background .55s ease;
}

/* ── Loupe hint arrow (landing page only) ── */
#loupe-hint {
  position: absolute;
  pointer-events: none;
  z-index: 11;
  opacity: 0;
  left: 0; width: 0;
  transition:
    left    .48s cubic-bezier(.4, 0, .2, 1),
    width   .48s cubic-bezier(.4, 0, .2, 1),
    opacity .35s ease;
}
#loupe-hint::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(232, 229, 220, .3);
  border-bottom: 1.5px solid rgba(232, 229, 220, .3);
  transform: translateX(-50%) rotate(45deg);
  animation: jrn-hint-float 2.2s ease-in-out infinite;
}
@keyframes jrn-hint-float {
  0%, 100% { transform: translateX(-50%) rotate(45deg) translateY(0); }
  50%       { transform: translateX(-50%) rotate(45deg) translateY(4px); }
}

/* Loupe idle: visible, no colour — rests on Film in hero */
#loupe.idle {
  opacity: 1;
  box-shadow:
    0 0 0 1.5px rgba(232, 229, 220, .16),
    0 0 18px    rgba(232, 229, 220, .05),
    inset 0  1.5px 0 rgba(232, 229, 220, .18),
    inset 0 -1.5px 0 rgba(0, 0, 0, .42),
    0 8px 28px rgba(0, 0, 0, .5);
}

/* Loupe glow — mode-specific neon rim */
body.m-film #loupe {
  background: rgba(var(--b), .08);
  box-shadow:
    0 0 0 1.5px rgba(var(--b), .64),
    0 -7px  20px rgba(var(--b), .5),
    0 -2px  38px rgba(var(--b), .25),
    0  5px  45px rgba(var(--b), .08),
    inset 0  1.5px 0 rgba(var(--b), .64),
    inset 0 -1.5px 0 rgba(0, 0, 0, .52),
    0 10px 36px rgba(0, 0, 0, .65);
}
body.m-foto #loupe {
  background: rgba(var(--r), .08);
  box-shadow:
    0 0 0 1.5px rgba(var(--r), .64),
    0 -7px  20px rgba(var(--r), .5),
    0 -2px  38px rgba(var(--r), .25),
    0  5px  45px rgba(var(--r), .08),
    inset 0  1.5px 0 rgba(var(--r), .64),
    inset 0 -1.5px 0 rgba(0, 0, 0, .52),
    0 10px 36px rgba(0, 0, 0, .65);
}
body.m-overig #loupe {
  background: rgba(232, 229, 220, .04);
  box-shadow:
    0 0 0 1.5px rgba(232, 229, 220, .44),
    0 -5px  16px rgba(232, 229, 220, .22),
    0 -2px  28px rgba(232, 229, 220, .11),
    0  4px  36px rgba(232, 229, 220, .04),
    inset 0  1.5px 0 rgba(232, 229, 220, .55),
    inset 0 -1.5px 0 rgba(0, 0, 0, .42),
    0 10px 36px rgba(0, 0, 0, .65);
}


/* ── Mode buttons ── */
.mb {
  position: relative; z-index: 12;   /* above loupe */
  border: none; background: transparent; cursor: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(232, 229, 220, .4);
  padding: 11px 22px; border-radius: 100px;
  transition:
    color      .35s ease,
    transform  .45s cubic-bezier(.4, 0, .2, 1),
    font-size  .45s cubic-bezier(.4, 0, .2, 1);
}

/* Film is the home anchor — slightly larger baseline */
.mb[data-m="film"] { font-size: .68rem; padding: 11px 28px; }

/* Active button: grows into the loupe */
.mb.on {
  color: var(--fg);
  transform: scale(1.35);
  letter-spacing: .3em;
}
/* Film idle state (on hero): loupe rests on it, same scaled style */
body.film-idle .mb[data-m="film"] {
  transform: scale(1.35);
  letter-spacing: .3em;
  color: var(--fg);
}

.mb:not(.on):hover { color: rgba(232, 229, 220, .54); }

/* Separator ticks */
.dsep {
  position: relative; z-index: 12;
  width: 1px; height: 11px;
  background: rgba(232, 229, 220, .12);
  flex-shrink: 0;
}


/* ── Corner pills — Over mij / Contact ── */
.cb {
  font-family: 'Space Grotesk', sans-serif; font-weight: 300;
  font-size: .49rem; letter-spacing: .46em; text-transform: uppercase;
  color: rgba(232, 229, 220, .65); text-decoration: none; cursor: none;
  padding: 9px 18px; border-radius: 100px;
  background: rgba(7, 7, 11, .65);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  border: 1px solid rgba(232, 229, 220, .11);
  box-shadow:
    inset 0 1px 0 rgba(232, 229, 220, .07),
    0  8px 22px rgba(0, 0, 0, .5),
    0  0  28px rgba(232, 229, 220, .07),
    0  0  0 1px rgba(232, 229, 220, .055);
  transition:
    color .35s ease, border-color .35s ease, box-shadow .5s ease,
    padding .42s cubic-bezier(.4, 0, .2, 1),
    font-size .42s cubic-bezier(.4, 0, .2, 1),
    letter-spacing .42s cubic-bezier(.4, 0, .2, 1),
    transform .42s cubic-bezier(.4, 0, .2, 1);
}
.cb:hover {
  color: var(--fg);
  transform: translateY(-2px);
  border-color: rgba(232, 229, 220, .38);
  box-shadow:
    inset 0 1px 0 rgba(232, 229, 220, .12),
    0  8px 22px rgba(0, 0, 0, .5),
    0  0  36px rgba(232, 229, 220, .13),
    0  0  0 1px rgba(232, 229, 220, .14);
}
.cb:first-of-type:hover { padding: 17px 35px; }
.cb:last-of-type:hover  { padding: 17px 31px; }
body:not([data-mode]) .cb:hover { transform: none; }
body.m-film .cb:hover {
  border-color: rgba(var(--b), .4);
  box-shadow:
    inset 0 1px 0 rgba(var(--b), .15),
    0  8px 22px rgba(0, 0, 0, .5),
    0 -10px 26px rgba(var(--b), .28),
    0  0  0 1px rgba(var(--b), .18);
}
body.m-foto .cb:hover {
  border-color: rgba(var(--r), .4);
  box-shadow:
    inset 0 1px 0 rgba(var(--r), .15),
    0  8px 22px rgba(0, 0, 0, .5),
    0 -10px 26px rgba(var(--r), .28),
    0  0  0 1px rgba(var(--r), .18);
}

/* Corner buttons pick up mode glow from above */
body.m-film .cb {
  border-color: rgba(var(--b), .2);
  box-shadow:
    inset 0 1px 0 rgba(232, 229, 220, .05),
    0  8px 22px rgba(0, 0, 0, .5),
    0 -7px 22px rgba(var(--b), .22),
    0  3px 14px rgba(var(--b), .06),
    0  0  0 1px rgba(var(--b), .11);
}
body.m-foto .cb {
  border-color: rgba(var(--r), .2);
  box-shadow:
    inset 0 1px 0 rgba(232, 229, 220, .05),
    0  8px 22px rgba(0, 0, 0, .5),
    0 -7px 22px rgba(var(--r), .22),
    0  3px 14px rgba(var(--r), .06),
    0  0  0 1px rgba(var(--r), .11);
}



/* ══════════════════════════════════════════════════════
   PAGE TYPOGRAPHY
══════════════════════════════════════════════════════ */
/* Eyebrow label */
.pey {
  font-family: 'Space Grotesk', sans-serif; font-weight: 300;
  font-size: .52rem; letter-spacing: .62em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 16px;
  display: flex; align-items: center; gap: 20px;
}
.pey::after { content: ''; flex: 1; height: 1px; background: var(--faint); }

/* Section title — Fraunces 900 italic, very large */
.ph1 {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(4.5rem, 11vw, 11rem);
  line-height: .86; letter-spacing: -.02em;
  color: var(--fg); margin-bottom: 16px;
}

/* Intro sub-line */
.psub {
  font-family: 'Space Grotesk', sans-serif; font-weight: 300;
  font-size: clamp(.86rem, 1.5vw, 1.08rem);
  color: var(--dim); max-width: 520px;
  margin-bottom: 56px; line-height: 1.82;
}

/* ── Ander werk panel ───────────────────────────────── */
.ogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 182px;
  gap: 8px;
}
.oc {
  position: relative; overflow: hidden;
  background: rgba(10, 10, 16, 1);
  border: 1px solid var(--bdr); cursor: none;
  transition:
    transform     .4s ease,
    border-color  .3s ease,
    box-shadow    .35s ease;
}
.oc:hover {
  transform: translateY(-3px) scale(1.006);
  border-color: var(--bdr-m);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .52);
  z-index: 5;
}
.oc--tall { grid-row: span 2; }
.oc--wide { grid-column: span 2; }

/* Placeholder gradients */
.ob1 { background: linear-gradient(145deg, #0e0e13, #1a1a1f); }
.ob2 { background: linear-gradient(130deg, #0a0a0f, #18181b); }
.ob3 { background: linear-gradient(120deg, #111114, #1d1d21); }
.ob4 { background: linear-gradient(155deg, #0f0f13, #1c1c1f); }
.ob5 { background: linear-gradient(135deg, #0d0d11, #19191b); }

.oc-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .88), transparent 60%);
  z-index: 2;
}
.oc-in {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 16px; z-index: 3;
}
.oc-cat {
  font-family: 'Space Grotesk', sans-serif; font-weight: 300;
  font-size: .48rem; letter-spacing: .48em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 3px;
}
.oc-n {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: .92rem; letter-spacing: -.01em;
}


/* ══════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════ */


/* ── Landing page entrance sequence ── */
@keyframes jrn-strip-top-in {
  from { opacity: 0; transform: rotate(-11.1deg) translateY(-72px); }
  to   { opacity: 1; transform: rotate(-11.1deg) translateY(0); }
}
@keyframes jrn-strip-bot-in {
  from { opacity: 0; transform: rotate(4.4deg) translateY(72px); }
  to   { opacity: 1; transform: rotate(4.4deg) translateY(0); }
}
@keyframes jrn-svg-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(calc(-50% + 20px)); }
  to   { opacity: 1; transform: translateX(-50%) translateY(-50%); }
}
@keyframes jrn-svg-invert-enter {
  from { opacity: 0;   transform: translateX(-50%) translateY(calc(-50% + 20px)); }
  to   { opacity: 0.8; transform: translateX(-50%) translateY(-50%); }
}

/* Filmstrips — slide in from above/below */
#hero .strip-top    .strip-tilt { will-change: transform, opacity; animation: jrn-strip-top-in .9s cubic-bezier(.4,0,.2,1)  .0s  both; }
#hero .strip-bottom .strip-tilt { will-change: transform, opacity; animation: jrn-strip-bot-in .9s cubic-bezier(.4,0,.2,1)  .14s both; }

/* SVG identity — each layer animated individually to preserve blend modes */
.svg-jrn-invert { will-change: transform, opacity; animation: jrn-svg-invert-enter 1.0s cubic-bezier(.4,0,.2,1) .38s both; }
.svg-jrn-gray   { will-change: transform, opacity; animation: jrn-svg-enter        1.0s cubic-bezier(.4,0,.2,1) .38s both; }
.svg-jrn-dark   { will-change: transform, opacity; animation: jrn-svg-enter        1.0s cubic-bezier(.4,0,.2,1) .38s both; }
.svg-name       { will-change: transform, opacity; animation: jrn-svg-enter        1.0s cubic-bezier(.4,0,.2,1) .42s both; }
.svg-roles      { will-change: transform, opacity; animation: jrn-svg-enter        1.0s cubic-bezier(.4,0,.2,1) .46s both; }


/* ══════════════════════════════════════════════════════
   FILM PANEL — Feature hero + timeline
══════════════════════════════════════════════════════ */

/* ── Panel header pills (IMDb / TMDB) ── */
.header-pills {
  display: flex;
  gap: 10px;
}
.pill-btn {
  display: inline-block;
  padding: 11px 28px;
  border-radius: 100px;
  border: 1px solid rgba(232, 229, 220, .28);
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  opacity: 1;
  cursor: none;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.pill-btn:hover {
  border-color: var(--blue);
  background: var(--blue-glow);
  box-shadow: 0 0 16px var(--blue-glow);
}

/* ── Hero newest-film label ── */
.hero-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}

/* ── Hero clickable link ── */
.film-hero--link {
  display: block;
  cursor: none;
  text-decoration: none;
}
.film-hero--link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(191, 88, 52, .07);
  opacity: 0;
  transition: opacity .3s;
  z-index: 4;
  pointer-events: none;
}
.film-hero--link:hover::before { opacity: 1; }

/* ── Hero "meer info" badge ── */
.film-hero__more-badge {
  position: absolute;
  top: 36px;
  right: 44px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .35);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 100px;
  padding: 6px 16px;
  z-index: 5;
  transition: color .22s, border-color .22s;
}
.film-hero--link:hover .film-hero__more-badge {
  color: rgba(255, 255, 255, .85);
  border-color: rgba(255, 255, 255, .4);
}

/* ── Hero block ── */
.film-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 640px;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 2px;
}
.film-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(7, 7, 11, .12) 0%,
    rgba(7, 7, 11, .15) 35%,
    rgba(7, 7, 11, .72) 65%,
    rgba(7, 7, 11, .95) 100%
  );
  pointer-events: none;
}
.film-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at 0% 80%, rgba(191, 88, 52, .22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.film-hero__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 44px;
  z-index: 2;
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 0;
  align-items: end;
}
.film-hero__left {
  display: flex;
  flex-direction: column;
  padding-right: 20px;
  text-align: right;
}
.film-hero__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
  position: relative;
  z-index: 1;
}
.film-hero__year-bg {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: .85;
  letter-spacing: -.04em;
  color: #fff;
  opacity: .065;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 0;
  margin-top: -0.22em;
}
.film-hero__right {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 26px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.film-hero__awards {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.film-hero__meta {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .45);
}
.film-hero__synopsis {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .5);
}
.film-hero__credit {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

/* ── Award badges ── */
.award-win {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 100px;
  border: 1px solid rgba(204, 166, 52, .58);
  background: linear-gradient(110deg, rgba(204, 166, 52, .26) 0%, rgba(204, 166, 52, .07) 45%, rgba(204, 166, 52, .20) 100%);
  color: rgb(220, 179, 58);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 80, .22),
    0 2px 12px rgba(204, 166, 52, .16);
}
.award-win::before,
.award-win::after {
  content: '';
  width: 8px;
  height: 14px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
}
.award-win::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M7,17 C7,13 7,9 7,5 C7,3 7,2 7,1' stroke='%23cca634' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7,14 C5,13 3,12 3,10 C3,9 5,9 7,11' stroke='%23cca634' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7,10 C5,9 3,8 3,6 C3,5 5,5 7,7' stroke='%23cca634' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7,6 C5,5 4,4 4,3 C4,2 6,2 7,4' stroke='%23cca634' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.award-win::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M3,17 C3,13 3,9 3,5 C3,3 3,2 3,1' stroke='%23cca634' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3,14 C5,13 7,12 7,10 C7,9 5,9 3,11' stroke='%23cca634' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3,10 C5,9 7,8 7,6 C7,5 5,5 3,7' stroke='%23cca634' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3,6 C5,5 6,4 6,3 C6,2 4,2 3,4' stroke='%23cca634' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.award-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid rgba(204, 166, 52, .28);
  background: transparent;
  color: rgba(204, 166, 52, .65);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: none;
}
.award-more[data-list]:hover::after {
  content: attr(data-list);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #1a1a1c;
  border: 1px solid rgba(232, 229, 220, .15);
  border-radius: 5px;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 400;
  white-space: pre-line;
  width: max-content;
  z-index: 20;
  pointer-events: none;
  color: rgba(232, 229, 220, .75);
  letter-spacing: .02em;
  line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.film-hero__awards .award-more[data-list]:hover::after {
  display: none;
}

/* ── Bridge between hero and timeline ── */
.filmography-bridge {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 48px;
  height: 52px;
}
.filmography-bridge::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent 0%, var(--blue) 40%, var(--blue) 100%);
  opacity: .4;
}
.filmography-bridge__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Post-hero timeline ── */
.film-timeline {
  position: relative;
  padding-left: 48px;
}
.film-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--blue) 0%, var(--blue) 88%, transparent 100%);
  opacity: .4;
}
.tl-entry {
  position: relative;
  margin-bottom: 22px;
}
.tl-entry::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 22px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--blue);
  box-shadow: 0 0 10px rgba(191, 88, 52, .4);
  z-index: 2;
}
.tl-card {
  position: relative;
  display: flex;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  overflow: hidden;
  cursor: none;
  transition: box-shadow .3s, border-color .3s;
}
.tl-card:hover {
  box-shadow: -4px 0 0 0 var(--blue), 0 0 28px rgba(191, 88, 52, .1);
  border-color: rgba(191, 88, 52, .3);
}
.tl-card__still {
  flex: 0 0 38%;
  overflow: hidden;
}
.tl-card__still img {
  width: 100%; height: 100%; min-height: 180px;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.tl-card:hover .tl-card__still img { transform: scale(1.04); }
.tl-card__body {
  flex: 1;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.tl-watermark {
  position: absolute;
  right: -4px; top: -0.22em;
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 900;
  font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: 1; letter-spacing: -.04em;
  color: var(--fg); opacity: .06;
  pointer-events: none; user-select: none; z-index: 0;
}
.tl-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -.01em;
  position: relative; z-index: 1;
}
.tl-meta {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--dim);
  position: relative; z-index: 1;
}
.tl-synopsis {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.62;
  color: rgba(232, 229, 220, .5);
  position: relative; z-index: 1;
}
.tl-awards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative; z-index: 1;
}
.tl-credit {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  position: relative; z-index: 1;
}

/* ── Film section divider ── */
.section-divider {
  border: none;
  border-top: 1px solid var(--bdr);
  margin: 52px 0 48px;
}

/* ── Trajecten ── */
.section-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 22px;
}
.trajecten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.traject-card {
  position: relative;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  padding: 26px 26px 22px;
}
.traject-bg-year {
  position: absolute;
  right: -4px; bottom: -18px;
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 900;
  font-size: 6.5rem; line-height: 1;
  letter-spacing: -.04em;
  color: var(--fg); opacity: .05;
  pointer-events: none; user-select: none;
}
.traject-year-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 7px;
  position: relative;
}
.traject-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
  position: relative;
}
.traject-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--dim);
  line-height: 1.55;
  position: relative;
}

/* ── Mobiel-only elementen: verborgen op desktop ── */
#mob-home-btn, #mob-menu-btn, #mob-menu { display: none; }

/* ── Knoplabels: mobiel toont de verkorte versie ── */
.mb__mob { display: none; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — mobile
══════════════════════════════════════════════════════ */
@media (max-width: 729px) {
  :root { --fs: 0.80; --fs-bot: 0.73; --gap-vid: 7vw; --gap-foto: 6vw; }
  body { cursor: auto; }
  #grain { opacity: .010; }
  .c-d, .c-r { display: none; }

  .ogrid { grid-template-columns: 1fr 1fr; }
  .oc--tall, .oc--wide { grid-column: span 1; grid-row: span 1; }

  /* ── Top-zone uitschakelen op mobiel ── */
  #tz { display: none; }
  #bot-fade { display: none; }

  /* ── Dock: zwevende balk onderaan ── */
  /* bottom > 0 is vereist: bottom:0 blokkeert content achter Safari 26 Liquid Glass */
  #dw {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 16px;
    top: auto !important;
    bottom: 4px;
    left: 12px;
    right: 12px;
    border-radius: 100px;
    background: rgba(7, 7, 11, .68);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(232, 229, 220, .12);
    box-shadow:
      inset 0 1px 0 rgba(232, 229, 220, .08),
      inset 0 -1px 0 rgba(0, 0, 0, .4),
      0 0 20px rgba(0, 0, 0, .6);
    clip-path: inset(-200px -200px 0 -200px); /* glow mag boven/zijkanten uitsteken, niet onder */
    transition: opacity .5s ease;
  }
  .cb { display: none; }

  /* Pill: gecentreerd, interne loupe */
  #dc { flex: 1; display: flex; justify-content: center; }
  #pill { overflow: hidden; margin-left: 0 !important; }
  #loupe-hint { display: none; }

  /* Verkorte knoplabels op mobiel */
  .mb__desk { display: none; }
  .mb__mob  { display: inline; }

  /* Compacte knoppen — kleurtest-stijl */
  .mb {
    font-size: 11.5px;
    letter-spacing: .06em;
    padding: 7px 12px;
    cursor: auto;
  }
  .mb[data-m="film"] { font-size: 12px; padding: 7px 15px; }
  .mb.on, body.film-idle .mb[data-m="film"] {
    transform: none;
    letter-spacing: .06em;
  }

  /* Separatorlijntjes in pill verbergen op mobiel */
  #pill .dsep { display: none; }

  /* ── Home-knop + hamburger: gedeelde basisstijl ── */
  #mob-home-btn,
  #mob-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(232, 229, 220, .45);
    cursor: auto;
    flex-shrink: 0;
    transition: color .25s ease, filter .25s ease;
  }
  #mob-home-btn { left: 16px; }
  #mob-menu-btn { right: 16px; }

  /* Actief/open: icoon licht op in accentkleur */
  #mob-home-btn:active,
  #mob-menu-btn.open {
    color: rgba(232, 229, 220, .92);
    filter: drop-shadow(0 0 6px rgba(232, 229, 220, .5));
  }
  body.m-film #mob-menu-btn.open, body.m-film #mob-home-btn:active {
    color: rgb(var(--b));
    filter: drop-shadow(0 0 7px rgba(var(--b), .7));
  }
  body.m-foto #mob-menu-btn.open, body.m-foto #mob-home-btn:active {
    color: rgb(var(--r));
    filter: drop-shadow(0 0 7px rgba(var(--r), .7));
  }

  /* ── Dropdown menu ── */
  #mob-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom)); /* 60px balk + 4px offset + 8px gap */
    z-index: 501;
    min-width: 148px;
    background: rgba(10, 10, 14, .65);
    backdrop-filter: blur(22px) saturate(1.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    border: 1px solid rgba(232, 229, 220, .13);
    box-shadow: inset 0 1px 0 rgba(232, 229, 220, .09), 0 16px 40px rgba(0, 0, 0, .6);
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
  }
  #mob-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  #mob-menu a {
    display: block;
    padding: 14px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .05em;
    color: rgba(232, 229, 220, .62);
    text-decoration: none;
    cursor: auto;
    transition: color .15s, background .15s;
  }
  #mob-menu a:active { color: var(--fg); background: rgba(232, 229, 220, .06); }
  #mob-menu a + a { border-top: 1px solid rgba(232, 229, 220, .07); }
  #mob-menu a:first-child { border-radius: 12px 12px 0 0; }
  #mob-menu a:last-child  { border-radius: 0 0 12px 12px; }

  /* Actieve pagina in dropdown */
  body.m-over-mij #mob-menu a[href="over-mij"],
  body.m-contact  #mob-menu a[href="contact"] { color: var(--fg); }

  .ph1 { font-size: clamp(3.5rem, 14vw, 7rem); }

  /* Filmstrips: positie op mobiel */
  .strip-top    { height: 68vh; bottom: 41vh; }
  .strip-bottom { height: 55vh; top: 45vh; }

  /* SVG identity: groter op mobiel + gecentreerd boven nav bar */
  .svg-layer { width: 95vw; height: calc(95vw * 709 / 1910); top: calc(50vh - 34px); }

  /* Film panel — mobile */
  /* Film hero: video boven, content onder — zelfde stijl als tijdlijn */
  .film-hero { display: flex; flex-direction: column; height: auto; min-height: 0; aspect-ratio: auto; }
  .film-hero::after, .film-hero::before { background: none; }
  .film-hero__img { position: relative; inset: auto; width: 100%; aspect-ratio: 16/9; height: auto; flex-shrink: 0; }
  .film-hero__content { position: relative; bottom: auto; left: auto; right: auto; overflow: hidden; background: var(--bg2); padding: 22px 26px; grid-template-columns: 1fr; gap: 8px; }
  .film-hero__left { text-align: left; padding-right: 0; gap: 8px; }
  .film-hero__year-bg { position: absolute; right: -4px; top: -0.22em; margin-top: 0; line-height: 1; color: var(--fg); opacity: .06; }
  .film-hero__title { font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: var(--fg); }
  .film-hero__credit { color: var(--dim); }
  .film-hero__meta { font-size: 11.5px; color: var(--dim); }
  .film-hero__synopsis { color: rgba(232, 229, 220, .5); }
  .film-hero__right { border-left: none; border-top: none; padding-left: 0; padding-top: 0; gap: 8px; }
  .film-hero__more-badge { display: none; }
  .filmography-bridge { padding-left: 30px; }
  .filmography-bridge::before { left: 8px; }
  .film-timeline { padding-left: 30px; }
  .film-timeline::before { left: 8px; }
  .tl-entry::before { left: -26px; }
  .tl-card { flex-direction: column; }
  .tl-card__still { flex: none; max-width: 100%; height: 160px; }

  /* Award pills: kleiner op mobiel */
  .award-win  { padding: 3px 8px; font-size: 9px; }
  .award-more { padding: 3px 8px; font-size: 9px; }
  .film-hero__awards, .tl-awards { margin-top: 6px; }
  /* CSS tooltip uitgeschakeld op mobiel — JS tooltip handelt tap-to-show af */
  .award-more[data-list]:hover::after { display: none; }
}


/* ══════════════════════════════════════════════════════
   SUB-PAGES — Page layout
══════════════════════════════════════════════════════ */

/* Page content wrapper */
.page-wrap {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
  padding: 90px 40px 80px;
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px 0 32px;
  margin-bottom: 28px;
}
.page-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.page-title-film {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--fg);
}
.page-subtitle {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(232, 229, 220, .5);
}
.in-dev-label-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px dashed var(--bdr-m);
  border-radius: 3px;
  padding: 3px 9px;
  margin-bottom: 6px;
}

/* ── Page entrance animations ── */
@keyframes jrn-slide-up {
  from { transform: translateY(100vh); }
  to   { transform: translateY(0); }
}
@keyframes jrn-enter-right {
  from { transform: translateX(65px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes jrn-enter-left {
  from { transform: translateX(-65px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.page-wrap.anim-from-hero  { animation: jrn-slide-up    .78s cubic-bezier(.4,0,.2,1) both; }
.page-wrap.anim-from-right { animation: jrn-enter-right .48s cubic-bezier(.4,0,.2,1) both; }
.page-wrap.anim-from-left  { animation: jrn-enter-left  .48s cubic-bezier(.4,0,.2,1) both; }
.page-wrap.anim-exit-down  { animation: jrn-slide-up    .78s cubic-bezier(.4,0,.2,1) reverse both; }

@media (max-width: 729px) {
  .page-wrap { padding: 32px 20px 80px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 16px; padding: 12px 0 24px; margin-bottom: 24px; }
  .page-title-film { font-size: clamp(2.6rem, 11vw, 4rem); }
  .page-header-left { gap: 14px; }
  .page-subtitle { font-size: 11px; }
  .header-pills { margin-bottom: 0; }

  /* Trajecten-grid: één kolom */
  .trajecten-grid { grid-template-columns: 1fr; }

  /* Footer: zie blok onderaan (na footer-regels) */
}


/* ══════════════════════════════════════════════════════
   SITE FOOTER
══════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  margin-top: 80px;
}

/* Gekleurde gradient-lijn bovenaan — kleur per pagina */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--footer-accent, rgba(232,229,220,.07)) 30%,
    var(--footer-accent, rgba(232,229,220,.07)) 70%,
    transparent 100%
  );
}

/* Subtiele gloed */
.site-footer::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 60px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--footer-glow, transparent), transparent);
  pointer-events: none;
}

/* ── Per-pagina kleuren ── */
body.m-film .site-footer {
  --footer-accent: rgba(191, 88, 52, .5);
  --footer-glow:   rgba(191, 88, 52, .07);
}
body.m-foto .site-footer {
  --footer-accent: rgba(195, 18, 55, .5);
  --footer-glow:   rgba(195, 18, 55, .07);
}
body.m-overig .site-footer {
  --footer-accent: rgba(160, 65, 195, .5);
  --footer-glow:   rgba(160, 65, 195, .07);
}
body.m-over-mij .site-footer,
body.m-contact .site-footer {
  --footer-accent: rgba(115, 152, 105, .5);
  --footer-glow:   rgba(115, 152, 105, .07);
}

/* ── Inhoud ── */
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.site-footer__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.site-footer__logo {
  height: 26px;
  width: auto;
  opacity: .38;
  transition: opacity .2s ease;
}
.site-footer__logo-link:hover .site-footer__logo {
  opacity: .65;
}
.site-footer__sep {
  width: 1px; height: 18px;
  background: var(--bdr-m);
  flex-shrink: 0;
}
.site-footer__copy {
  font-size: 12px;
  font-weight: 300;
  color: rgba(232,229,220,.28);
  letter-spacing: .02em;
  white-space: nowrap;
}
.site-footer__right {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.site-footer__roles {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .04em;
  color: rgba(232,229,220,.28);
}
.site-footer__email {
  font-size: 11px;
  font-weight: 400;
  color: rgba(232,229,220,.45);
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid var(--bdr-m);
  border-radius: 100px;
  letter-spacing: .03em;
  transition: color .2s, border-color .2s;
}
.site-footer__email:hover {
  color: var(--fg);
  border-color: rgba(232,229,220,.3);
}

@media (max-width: 900px) {
  .site-footer__roles { display: none; }
}

@media (max-width: 729px) {
  .site-footer { flex-direction: column; align-items: center; text-align: center; padding: 20px 20px calc(70px + env(safe-area-inset-bottom) + 20px); gap: 10px; margin-top: 20px; }
  .site-footer__right { display: none; }
}