/* ==========================================================================
   OVER WFL (over-ons.html) — brief §5.9
   Scoped to body.page-over-ons. Components come from components.css; this
   file only composes the brand-story scenes (no scene or chapter numbering).
   ========================================================================== */

/* ---- Openingstitel --------------------------------------------------------- */
.page-over-ons .ow-hero { position: relative; padding: var(--screen-inset) var(--screen-inset) 0; }
.page-over-ons .ow-hero__stage { position: relative; max-width: var(--max-screen); margin-inline: auto; }
.page-over-ons .ow-hero__screen { aspect-ratio: 16 / 9; }
.page-over-ons .ow-hero__screen .screen__fx {
  background: linear-gradient(to top, rgba(7, 7, 10, .7) 0%, rgba(7, 7, 10, 0) 30%), var(--vignet);
}
.page-over-ons .ow-hero__screen .media img, .page-over-ons .ow-hero__screen .media video { filter: contrast(1.05) saturate(1.05); }
.page-over-ons .ow-hero__copy {
  display: grid; gap: var(--s-4); justify-items: start;
  padding: var(--s-6) calc(var(--margin) - var(--screen-inset)) 0;
}
.page-over-ons .ow-hero__title { font-size: calc((100vw - 2 * var(--margin)) / 6.9); line-height: .84; }
.page-over-ons .ow-hero__intro { padding-top: var(--s-8); }
.page-over-ons .ow-hero__lead { max-width: 40ch; color: var(--bot); font-size: clamp(1.1875rem, 1.6vw, 1.5rem); line-height: 1.4; text-wrap: balance; }

@media (max-width: 767.98px) { .page-over-ons .ow-hero__screen { aspect-ratio: 1 / 1; } }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page-over-ons .ow-hero__title { font-size: min(var(--fs-mega), 13vw); }
}
@media (min-width: 1024px) {
  .page-over-ons .ow-hero__screen {
    aspect-ratio: auto;
    height: calc(100svh - var(--header-h) - 2 * var(--screen-inset));
    min-height: 600px; max-height: 1120px;
  }
  .page-over-ons .ow-hero__screen .screen__fx {
    background: linear-gradient(to top, rgba(7, 7, 10, .94) 0%, rgba(7, 7, 10, .62) 22%, rgba(7, 7, 10, 0) 48%), var(--vignet);
  }
  .page-over-ons .ow-hero__copy {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
    grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6);
    padding: 0 calc(clamp(20px, 3.4vw, 56px) + 56px) clamp(24px, 3.4vw, 56px) clamp(20px, 3.4vw, 56px);
    pointer-events: none;
  }
  .page-over-ons .ow-hero__copy > * { pointer-events: auto; }
  .page-over-ons .ow-hero__title { font-size: min(var(--fs-mega), 12.5svh, 9.4vw); }
  .page-over-ons .ow-hero__intro { padding-top: var(--s-9); }
}

/* ---- De maker: the name over Melvin at the podcast table ------------------- */
/* scene rhythm: the hero intro and the chapters are not .section, so trim the double padding after them */
.page-over-ons .ow-maker, .page-over-ons .ow-missie { padding-top: calc(var(--section-y) * .6); }
.page-over-ons .ow-maker__grid { display: grid; gap: var(--s-7); align-items: center; }
/* Melvin at the podcast table, graded into the room: the name sits on the dark lower part of the frame */
.page-over-ons .ow-maker__card .screen__fx {
  background: linear-gradient(to top, rgba(7, 7, 10, .9) 0%, rgba(7, 7, 10, .55) 30%, rgba(7, 7, 10, 0) 58%), var(--vignet);
}
.page-over-ons .ow-maker__card .screen__fx::before, .page-over-ons .ow-maker__card .screen__fx::after { opacity: .2; }
.page-over-ons .ow-maker__photo img { object-position: 45% 30%; filter: contrast(1.06) saturate(.82) brightness(.92); }
.page-over-ons .ow-maker__card-copy { max-width: none; }
.page-over-ons .ow-maker__name { display: grid; gap: 8px; justify-items: start; text-transform: none; }
.page-over-ons .ow-maker__first { font: italic 400 clamp(2rem, 4.2vw, 3.75rem) / 1 var(--font-serif); color: var(--bot); }
.page-over-ons .ow-maker__nick { font: 400 var(--fs-mono) / 1.4 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--rood-signaal); font-stretch: 87.5%; }
.page-over-ons .ow-maker__last {
  display: block; font: 900 clamp(4rem, 17vw, 10.5rem) / .82 var(--font-display); text-transform: uppercase; color: var(--bot); letter-spacing: -.01em;
}
.page-over-ons .ow-maker__copy { display: grid; gap: var(--s-6); justify-items: start; }
.page-over-ons .ow-maker__copy .lead { max-width: 36ch; color: var(--bot); }
.page-over-ons .ow-facts { display: grid; width: 100%; border-top: 1px solid var(--touw); }
.page-over-ons .ow-facts > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--touw); }
.page-over-ons .ow-facts dt { color: var(--rook); }
.page-over-ons .ow-facts dd { margin: 0; color: var(--bot); }
@media (max-width: 767.98px) { .page-over-ons .ow-maker__card { aspect-ratio: 1 / 1; } }
/* tablets and up: the 5:4 frame of the photo itself (no 4:5 card the height of a phone screen) */
@media (min-width: 768px) { .page-over-ons .ow-maker__card { aspect-ratio: 5 / 4; } }
@media (min-width: 1024px) {
  .page-over-ons .ow-maker__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-9); }
  .page-over-ons .ow-maker__last { font-size: min(9vw, 10.5rem); }
  .page-over-ons .ow-facts > div { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
}

/* ---- Hoofdstukken ------------------------------------------------------------ */
.page-over-ons .ow-chapters-head { padding-bottom: calc(var(--section-y) * .3); }

.page-over-ons .ow-chapters { padding-block: var(--s-5) calc(var(--section-y) * .6); background: var(--nacht); }
.page-over-ons .hscroll--ow { --item: 86vw; }
.page-over-ons .hscroll--ow { --ow-gap: clamp(28px, 6vw, 112px); }
.page-over-ons .hscroll--ow .hscroll__track { gap: var(--ow-gap); }
.page-over-ons .hscroll--ow .hscroll__item { max-width: none; position: relative; }
.page-over-ons .hscroll--ow .hscroll__item + .hscroll__item::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--ow-gap) / -2); width: 1px;
  background: linear-gradient(to bottom, transparent, var(--touw) 15%, var(--touw) 85%, transparent);
}
@media (min-width: 768px) { .page-over-ons .hscroll--ow { --item: 74vw; } }
@media (min-width: 1024px) {
  .page-over-ons .hscroll--ow { --item: min(88vw, 1560px, calc((100svh - var(--header-h) - 290px) * 2.55 + 56px)); }
  .page-over-ons .ow-chapters { padding-block: var(--s-5); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; }
  .page-over-ons .ow-chapters > .container { width: 100%; }
}

/* chapter */
.page-over-ons .ow-ch { --act: 1; position: relative; display: grid; gap: var(--s-4); align-content: start; }
.page-over-ons .ow-ch__year {
  --yl: 1;
  font-size: calc(clamp(3.5rem, 18vw, 5.5rem) * var(--yl));
  line-height: .8; color: var(--bot); white-space: nowrap;
  /* the year is content, not a ghost numeral: neighbours hide it with their text instead of greying it out */
  opacity: clamp(0, (var(--act) - .22) * 1.6, 1);
}
.page-over-ons .ow-ch--long .ow-ch__year { --yl: .6; }
.page-over-ons .ow-ch__media {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-screen); overflow: hidden; background: var(--zaal); isolation: isolate;
}
.page-over-ons .ow-ch__media > .media, .page-over-ons .ow-ch__media > .vid, .page-over-ons .ow-ch__media > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-over-ons .ow-ch__media img, .page-over-ons .ow-ch__media video { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) brightness(.94); }
/* scrub dimming: a black layer whose opacity follows --act (compositor-only, no filter repaint) */
.page-over-ons .ow-ch__dim { position: absolute; inset: 0; z-index: 3; background: var(--nacht); opacity: calc((1 - var(--act)) * .38); pointer-events: none; }
.page-over-ons .ow-ch__media--crop-tr > .media, .page-over-ons .ow-ch__media--crop-tr > picture { transform: scale(1.2); transform-origin: 0% 100%; }
.page-over-ons .ow-ch__fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--vignet); }
.page-over-ons .ow-ch__fx::before, .page-over-ons .ow-ch__fx::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; opacity: .26; }
.page-over-ons .ow-ch__fx::before { background: var(--licht-rood); }
.page-over-ons .ow-ch__fx::after { background: var(--licht-blauw); }
.page-over-ons .ow-ch__second {
  position: absolute; z-index: 6; right: 10px; bottom: 10px; width: 38%; aspect-ratio: 16 / 9; border-radius: var(--r-chip); overflow: hidden; margin: 0;
  background: var(--doek); box-shadow: 0 0 0 1px rgba(241, 238, 232, .35), 0 18px 40px rgba(0, 0, 0, .6);
  opacity: calc(.4 + .6 * var(--act));
}
.page-over-ons .ow-ch__second > picture, .page-over-ons .ow-ch__second > .media { position: absolute; inset: 0; }
.page-over-ons .ow-ch__second img { filter: contrast(1.06) brightness(.94); }
.page-over-ons .ow-ch__text { display: grid; gap: 10px; align-content: start; max-width: 46ch; opacity: clamp(0, (var(--act) - .22) * 1.6, 1); }
.page-over-ons .ow-ch__title { font: italic 400 var(--fs-serif-l) / 1.05 var(--font-serif); color: var(--bot); }
.page-over-ons .ow-ch__body { color: var(--bot-80); }
.page-over-ons .ow-ch__ctas { margin-top: 6px; gap: var(--s-4); }


/* desktop: media left; year, title and text as ONE caption block on the media's bottom line (no gap between a
   year at the top and the text at the bottom of the column) */
@media (min-width: 1024px) {
  .page-over-ons .ow-ch {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    column-gap: clamp(32px, 3.4vw, 56px); row-gap: 0;
    align-items: end;
  }
  .page-over-ons .ow-ch__media { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 3 / 2; }
  .page-over-ons .ow-ch__year { grid-column: 2; grid-row: 2; font-size: calc(min(8vw, 14svh) * var(--yl)); margin-bottom: var(--s-5); }
  .page-over-ons .ow-ch--long .ow-ch__year { --yl: .72; }
  .page-over-ons .ow-ch__text { grid-column: 2; grid-row: 3; }
  .page-over-ons .ow-ch__second { width: 30%; right: 18px; bottom: 18px; }
  .page-over-ons .ow-ch__second--tr { right: 18px; top: 18px; bottom: auto; }

  /* wide chapters (2017, 2026–27): the media takes the whole frame, the caption block sits on it bottom-left */
  .page-over-ons .ow-ch--wide { grid-template-columns: minmax(0, 1fr); }
  .page-over-ons .ow-ch--wide .ow-ch__media { grid-column: 1; aspect-ratio: 2.45 / 1; }
  .page-over-ons .ow-ch--wide .ow-ch__fx {
    background: linear-gradient(to top, rgba(7, 7, 10, .9) 0%, rgba(7, 7, 10, .35) 42%, rgba(7, 7, 10, 0) 64%), linear-gradient(to right, rgba(7, 7, 10, .55), rgba(7, 7, 10, 0) 48%), var(--vignet);
  }
  .page-over-ons .ow-ch--wide .ow-ch__year { grid-column: 1; position: relative; z-index: 7; justify-self: start; margin-left: clamp(20px, 2.4vw, 40px); pointer-events: none; }
  .page-over-ons .ow-ch--wide .ow-ch__text { grid-column: 1; position: relative; z-index: 7; justify-self: start; max-width: 44ch; padding: 0 0 clamp(20px, 2.4vw, 40px) clamp(20px, 2.4vw, 40px); }
  .page-over-ons .ow-ch--wide .ow-ch__body { color: var(--bot); }
  .page-over-ons .ow-ch--wide .ow-ch__second { width: 22%; }
  /* 2017: the year stands apart, bottom-right, opposite the text */
  .page-over-ons .ow-ch--year-end .ow-ch__year { grid-row: 2 / span 2; justify-self: end; margin: 0 clamp(20px, 2.4vw, 40px) clamp(14px, 1.8vw, 30px) 0; }
}

/* 2026–27: city codes on the L46 loop, the red NU playhead before the first date */
.page-over-ons .ow-cities {
  position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); bottom: 14px;
  display: flex; align-items: flex-end; gap: clamp(14px, 2.4vw, 40px); white-space: nowrap;
}
.page-over-ons .ow-cities__nu { position: relative; align-self: stretch; width: 2px; background: var(--rood); margin-right: clamp(2px, .6vw, 10px); }
.page-over-ons .ow-cities__nu .mono { position: absolute; top: -1.6em; left: 50%; transform: translateX(-50%); color: var(--rood-signaal); font-size: var(--fs-mono-s); }
.page-over-ons .ow-cities__stop { display: grid; gap: 4px; justify-items: start; }
.page-over-ons .ow-cities__code { font: 900 clamp(2.25rem, 9vw, 3.5rem) / .82 var(--font-display); color: var(--bot); letter-spacing: -.005em; text-transform: uppercase; }
.page-over-ons .ow-cities__date { font-size: clamp(.9rem, 1.2vw, 1.375rem); line-height: 1; color: var(--bot-80); }
@media (min-width: 1024px) {
  .page-over-ons .ow-cities { left: auto; transform: none; right: clamp(20px, 2.4vw, 40px); bottom: clamp(20px, 2.4vw, 40px); }
  .page-over-ons .ow-cities__code { font-size: clamp(2.75rem, min(4.6vw, 9svh), 5.5rem); }
}

/* year index (jump + active) */
.page-over-ons .ow-years { margin-top: var(--s-5); }
.page-over-ons .ow-years ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--s-5); }
.page-over-ons .ow-years__btn {
  position: relative; padding: 6px 0; color: var(--rook);
  transition: color var(--t-micro);
}
.page-over-ons .ow-years__btn .stencil { color: inherit; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1; }
.page-over-ons .ow-years__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rood); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.page-over-ons .ow-years__btn:hover, .page-over-ons .ow-years__btn[aria-current="true"] { color: var(--bot); }
.page-over-ons .ow-years__btn[aria-current="true"]::after { transform: scaleX(1); }
/* mobile: the brief's vertical timeline instead of a swipe carousel */
@media (max-width: 767.98px) {
  .page-over-ons .ow-years, .page-over-ons .hscroll--ow .hscroll__bar, .page-over-ons .hscroll--ow .hscroll__progress { display: none; }
  .page-over-ons .hscroll--ow .hscroll__track {
    display: grid; gap: var(--s-8); overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding: 0 0 0 26px; position: relative;
  }
  .page-over-ons .hscroll--ow .hscroll__track::before {
    content: ""; position: absolute; left: 4px; top: 1.4rem; bottom: 0; width: 1px;
    background: linear-gradient(to bottom, var(--rood), var(--touw) 12%, var(--touw) 88%, var(--blauw));
  }
  .page-over-ons .hscroll--ow .hscroll__item { flex: none; width: 100%; }
  .page-over-ons .hscroll--ow .hscroll__item + .hscroll__item::before { display: none; }
  .page-over-ons .hscroll--ow .hscroll__item::after {
    content: ""; position: absolute; left: -26px; top: 1.4rem; width: 9px; height: 9px; border-radius: 50%;
    background: var(--nacht); box-shadow: inset 0 0 0 2px var(--bot-80);
  }
  .page-over-ons .hscroll--ow .hscroll__item:first-child::after {  /* newest first: the red dot is now at the top */ background: var(--rood); box-shadow: 0 0 0 3px rgba(234, 0, 23, .25); }
  .page-over-ons .ow-ch { --act: 1 !important; gap: var(--s-4); }
  .page-over-ons .ow-ch__year { font-size: calc(clamp(3rem, 15vw, 4.25rem) * var(--yl)); }
  .page-over-ons .ow-ch--long .ow-ch__year { --yl: .8; }
  .page-over-ons .ow-ch__media { aspect-ratio: 16 / 10; }
  .page-over-ons .ow-ch.is-now .ow-ch__media { aspect-ratio: 4 / 3; }
  .page-over-ons .ow-ch__second { width: 40%; }
  .page-over-ons .ow-ch__second--tr { top: 10px; bottom: auto; }
  .page-over-ons .ow-chapters { padding-bottom: var(--s-6); }
}
/* desktop pinned track: neighbouring chapters fade out at the viewport edges */
@media (min-width: 1024px) {
  .page-over-ons .ow-chapters:has(.hscroll--ow.is-pinned) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--margin), #000 calc(100% - var(--margin)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--margin), #000 calc(100% - var(--margin)), transparent 100%);
  }
}

/* ---- Missie: the mission as a heading + the way in (the Klassenladder lives on new-talents) ---------- */
.page-over-ons .ow-missie__head { display: grid; gap: var(--s-6); justify-items: start; }

/* ---- Het team (credits) ------------------------------------------------------- */
.page-over-ons .ow-team__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (max-width: 1023.98px) { .page-over-ons .ow-team__media { order: 2; } }
.page-over-ons .ow-team__media .screen { max-width: 560px; }
.page-over-ons .ow-team__copy { display: grid; gap: var(--s-4); justify-items: start; }
.page-over-ons .ow-team__copy h2 { margin-bottom: var(--s-4); }
.page-over-ons .ow-credits { display: grid; width: 100%; border-top: 1px solid var(--touw); }
.page-over-ons .ow-credit { display: grid; gap: 10px; padding: var(--s-5) 0; border-bottom: 1px solid var(--touw); }
.page-over-ons .ow-credit__role { color: var(--rook); }
.page-over-ons .ow-credit__names { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; }
.page-over-ons .ow-credit__sep { color: var(--touw); font: 900 2rem/1 var(--font-display); padding-bottom: .1em; }
.page-over-ons .ow-credit__name { display: inline-grid; gap: 2px; color: var(--bot); }
.page-over-ons a.ow-credit__name:hover .ow-credit__last, .page-over-ons a.ow-credit__name:focus-visible .ow-credit__last { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.page-over-ons .ow-credit__first { font: italic 400 clamp(1rem, 1.4vw, 1.25rem) / 1 var(--font-serif); color: var(--bot-80); }
.page-over-ons .ow-credit__first:empty { display: none; }
.page-over-ons .ow-credit__last { font: 900 var(--fs-d3) / .9 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; }
.page-over-ons .ow-credit__logo { display: inline-flex; align-items: center; min-height: 48px; }
.page-over-ons .ow-credit__logo img { height: 44px; width: auto; }
@media (min-width: 1024px) {
  .page-over-ons .ow-team__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); }
  .page-over-ons .ow-credit { grid-template-columns: 13rem minmax(0, 1fr); align-items: end; gap: var(--s-5); }
  .page-over-ons .ow-credit__role { padding-bottom: .5em; }
}

/* ---- Break (image only) ------------------------------------------------------------------- */
.page-over-ons .ow-focus { padding-block: calc(var(--section-y) * .3) 0; }
@media (max-width: 767.98px) { .page-over-ons .ow-focus__screen { aspect-ratio: 4 / 5; } }

/* ---- Stap in ------------------------------------------------------------------ */
.page-over-ons .ow-doors { border-top: 1px solid var(--touw); }
.page-over-ons .ow-door {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: var(--s-4);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--touw); color: var(--bot);
}
.page-over-ons .ow-door__main { display: grid; gap: 6px; }
.page-over-ons .ow-door__title { font: 900 clamp(2.5rem, 6vw, 6rem) / .86 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; }
.page-over-ons .ow-door__go {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--touw);
  transition: background-color var(--t-micro), box-shadow var(--t-micro), transform var(--t-micro) var(--ease-out);
}
.page-over-ons .ow-door__media { display: none; }
.page-over-ons .ow-door:hover .ow-door__go, .page-over-ons .ow-door:focus-visible .ow-door__go { background: var(--rood); box-shadow: none; color: var(--wit); transform: translateX(4px); }
@media (min-width: 768px) {
  .page-over-ons .ow-door { grid-template-columns: minmax(0, 1fr) clamp(160px, 20vw, 300px) 56px; gap: var(--s-6); padding: var(--s-6) 0; }
  .page-over-ons .ow-door__go { width: 56px; height: 56px; }
  .page-over-ons .ow-door__media {
    display: block; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-panel); overflow: hidden; background: var(--doek);
  }
  .page-over-ons .ow-door__media > picture { position: absolute; inset: 0; }
  .page-over-ons .ow-door__media img { filter: grayscale(1) contrast(1.06) brightness(var(--door-bright, .9)); transition: filter 300ms var(--ease-out), transform 600ms var(--ease-licht); }
  .page-over-ons .ow-door:hover .ow-door__media img, .page-over-ons .ow-door:focus-visible .ow-door__media img { filter: contrast(1.06) brightness(.94); transform: scale(1.03); }
}

/* ---- reduced motion: no scrub dimming ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .page-over-ons .ow-ch { --act: 1 !important; }
}