/* ==========================================================================
   WFL — RINGLICHT base
   Reset · typography · NAAMSLOT · scene labels · grain · focus · utilities
   · reveal pre-states (only under html.js-motion) · reduced motion
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1440 / 1920.
   ========================================================================== */

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-padding-bottom: 16px;
  overflow-x: clip;               /* never horizontal scroll (§2.5) */
}
body {
  min-height: 100svh;
  overflow-x: clip;
  background: var(--nacht);
  color: var(--bot-80);
  font: 400 var(--fs-body) / var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
/* no play triangles anywhere: hide the browser's own overlay play button that iOS Safari (Low Power Mode),
   Android data saver and blocked autoplay draw over a muted background loop — the poster simply stays */
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls-overlay-enclosure { display: none !important; }
video:not([controls])::-webkit-media-controls { display: none !important; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* zero specificity: a component's own list padding (.hscroll__track, .vrail, .tier__incl …) always wins */
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
table { border-collapse: collapse; }
p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption, blockquote { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: inherit; color: var(--bot); }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
::selection { background: var(--rood); color: var(--wit); }
dialog { padding: 0; border: 0; max-width: none; max-height: none; color: inherit; background: transparent; }
dialog::backdrop { background: rgba(7, 7, 10, .82); }

/* Cross-document view transitions: 250ms "cut to black" (§3.1) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 250ms var(--ease-cut) both vt-out; }
::view-transition-new(root) { animation: 250ms var(--ease-licht) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---- Typography ------------------------------------------------------------ */
.d-mega, .d1, .d2, .d3, .d4, .display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--bot);
  letter-spacing: -.005em;
  font-synthesis: none;
}
.d-mega { font-size: var(--fs-mega); line-height: var(--lh-mega); }
.d1 { font-size: var(--fs-d1); line-height: var(--lh-d1); }
.d2 { font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 800; }
.d3 { font-size: var(--fs-d3); line-height: var(--lh-d3); }
.d4 { font-size: var(--fs-d4); line-height: var(--lh-d3); }
.d-mega .line, .d1 .line, .d2 .line { display: block; }
/* one calm title scale for every page H1 (site-wide pass, 2026-10-08): page titles had grown to 112–195px each,
   independently; the homepage hero is deliberately small. All page H1s now share one size. !important because page
   stylesheets set their hero title sizes with higher-specificity, breakpoint-specific rules. Fighter names
   (.fp-name) and article titles keep their own scale (portrait / long headline). */
body:not(.page-home) main h1:is(.d-mega, .d1) { font-size: clamp(3rem, 6.6vw, 6rem) !important; line-height: .86 !important; }
/* fighter profile: the name stays the portrait's headline, one step above the page titles (was up to 240px) */
main h1.fp-name .naamslot__last { font-size: clamp(3.5rem, 10vw, 9rem) !important; }
/* a display line that starts with an accented capital (ÉÉN): the acute sits ~.18em above cap height and
   would land in the line above at display leading — h() adds .line--acc automatically */
.line--acc { margin-top: .16em; }
.w800 { font-weight: 800; }

.serif, .serif-l, .serif-s {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--bot);
  letter-spacing: 0;
  text-transform: none;
}
.serif-l { font-size: var(--fs-serif-l); line-height: 1.1; }
.serif-s { font-size: var(--fs-serif-s); line-height: 1.1; }

.stencil {
  font-family: var(--font-stencil);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--bot);
}
.mono, .label, .chip {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-mono);
  line-height: 1.4;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  font-variation-settings: "wdth" 87.5;
  font-stretch: 87.5%;
  font-variant-numeric: tabular-nums;
}
.mono--500 { font-weight: 500; }
.lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--bot-80); max-width: 46ch; }
.small, small { font-size: var(--fs-small); line-height: 1.5; }
.muted { color: var(--rook); }
.bone { color: var(--bot); }

/* The red full stop that ends every headline (§2.4). puntify() wraps the last word + full stop in
   .punt-wrap so the stop never wraps onto a line of its own. */
.punt { color: var(--rood); }
.punt-wrap, .nowrap { white-space: nowrap; }
/* Small-red text uses the signaal tints only */
.t-rood { color: var(--rood-signaal); }
.t-blauw { color: var(--blauw-signaal); }

/* Running text (prose) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .95; margin-top: 1.6em; }
.prose h2 { font-size: var(--fs-d4); }
.prose h3 { font-size: 1.5rem; }
.prose a, .link {
  color: var(--blauw-signaal);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--t-micro) var(--ease-out);
}
.prose a:hover, .link:hover { background-size: 0 1px; background-position: 100% 100%; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.prose strong { color: var(--bot); font-weight: 600; }
.prose blockquote { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-serif-l); line-height: 1.15; color: var(--bot); }

/* Placeholder state: client copy still to come → styled "volgt" (brief §5 conventions) */
.volgt { color: var(--rook); font-style: normal; }
.placeholder {
  display: inline-block; color: var(--rook);
  border: 1px dashed var(--touw); border-radius: var(--r-chip);
  padding: 0 .4em; font-size: .92em;
}

/* ---- NAAMSLOT (name lockup, §2.4) --------------------------------------
   <span class="naamslot naamslot--red"><span class="naamslot__first">Zakaria</span>
   <span class="naamslot__last">EL JARI</span></span>
   The first name (serif italic ≈ 28% of the surname) sits on the cap line.
   Size via --ns (the surname font-size). */
.naamslot {
  --ns: var(--fs-d3);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  color: var(--bot);
}
.naamslot__first {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: max(15px, calc(var(--ns) * .28));
  line-height: .9;
  /* clearance for j/y/g descenders above the cap line of the surname */
  margin-bottom: calc(var(--ns) * .03);
  color: var(--bot);
  text-transform: none;
}
/* a surname with an accented capital (GÜREN, KÖRNIG): room for the diacritic above the cap height */
.naamslot--accent .naamslot__first { margin-bottom: calc(var(--ns) * .12); }
.naamslot__last {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--ns);
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.naamslot__nick { font-family: var(--font-serif); font-style: italic; font-size: max(14px, calc(var(--ns) * .22)); color: var(--rook); margin-top: .35em; }
.naamslot--end { align-items: flex-end; text-align: right; }
.naamslot--center { align-items: center; text-align: center; }
/* corner colours: signaal under 40px, full red at ≥ 40px (set via --ns-big) */
.naamslot--red .naamslot__last { color: var(--rood-signaal); }
.naamslot--blue .naamslot__last { color: var(--blauw-signaal); }
.naamslot--red.naamslot--big .naamslot__last { color: var(--rood); }
.naamslot--xs { --ns: 1.375rem; }
.naamslot--s { --ns: 2rem; }
.naamslot--m { --ns: var(--fs-d3); }
.naamslot--l { --ns: var(--fs-d2); }
.naamslot--xl { --ns: var(--fs-d1); }
.naamslot--mega { --ns: clamp(4.5rem, 14vw, 15rem); }
.naamslot--inline { display: inline; }
/* TBA corner: mono "TEGENSTANDER VOLGT" on --doek — never a silhouette (C5 / C9) */
.naamslot--tba { display: inline-flex; }
.naamslot--tba .naamslot__last {
  font: 400 var(--fs-mono) / 1.4 var(--font-mono); letter-spacing: var(--track-mono); font-stretch: 87.5%;
  color: var(--rook); padding: 14px 16px; border-radius: var(--r-chip); background: var(--doek);
}
.naamslot--inline .naamslot__first { font-size: 1.05em; margin: 0 .2em 0 0; }
.naamslot--inline .naamslot__last { font-size: 1em; line-height: inherit; }

/* The word vs — always lowercase serif italic, never "VS" */
.vs {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--bot);
  letter-spacing: 0;
}

/* ---- Scene labels with the Hoeklijn bullet (§2.7) ----------------------- */
.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rook);
}
.label::before {
  content: "";
  flex: none;
  width: 14px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='48 68 254 214'%3E%3Cpolygon fill='%23ea0017' points='169.89 189.62 180.8 157.31 140.94 157.31 151.43 124.98 191.79 124.98 209.81 71.56 120.2 71.56 52.53 278.44 104.87 278.44 134.73 189.62 169.89 189.62'/%3E%3Cpolygon fill='%2303f' points='244.76 71.56 215.48 157.31 180.8 157.31 169.87 189.62 209.27 189.62 198.78 221.94 158.87 221.94 139.83 278.44 229.55 278.44 297.47 71.56 244.76 71.56'/%3E%3C/svg%3E") center / contain no-repeat;
}
.label--plain::before { display: none; }
.label--bone { color: var(--bot); }
.kicker { color: var(--bot); }

/* ---- Icons ------------------------------------------------------------------ */
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.25em; }
.icon--s { width: 1em; height: 1em; }
.icon--l { width: 24px; height: 24px; }
.flag {
  display: inline-block; width: 16px; height: 12px; flex: none;
  outline: 1px solid var(--touw); outline-offset: 0; border-radius: 1px;
  vertical-align: -1px; object-fit: cover;
}

/* ---- Grain overlay (§2.6) --------------------------------------------------
   Static and viewport-sized, normal blending: an animated, 4×-viewport overlay-blended layer made the
   browser re-blend the whole page (and every playing video under it) on every frame. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* sticky chrome never hides the focused element (WCAG 2.4.11): the Kassa line under the header */
html.has-kassa { scroll-padding-top: calc(var(--header-h) + var(--kassa-h) + 16px); }

/* ---- Focus (§8) --------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blauw-signaal);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(0, 51, 255, .45);
  border-radius: 2px;
}
.paper :focus-visible, .on-paper :focus-visible { outline-color: var(--blauw); box-shadow: 0 0 0 5px rgba(0, 51, 255, .25); }
/* the skip-link target is focused programmatically: no page-sized ring */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
/* inline name links in running text carry an underline (not colour alone) */
.prose .naamslot--inline, p .naamslot--inline[href] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- Accessibility helpers -------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: calc(var(--z-header) + 5);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--bot);
  color: var(--inkt);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-micro) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---- Layout: container, grid, sections ------------------------------------ */
.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}
.container--wide { max-width: calc(var(--max-screen) + 2 * var(--margin)); }
.container--narrow { max-width: calc(880px + 2 * var(--margin)); }
.bleed { width: 100%; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-6);
}
.grid > * { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .md\:span-6 { grid-column: span 6; }
  .md\:span-4 { grid-column: span 4; }
  .md\:span-8 { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .lg\:span-3 { grid-column: span 3; }
  .lg\:span-4 { grid-column: span 4; }
  .lg\:span-5 { grid-column: span 5; }
  .lg\:span-6 { grid-column: span 6; }
  .lg\:span-7 { grid-column: span 7; }
  .lg\:span-8 { grid-column: span 8; }
  .lg\:start-6 { grid-column-start: 6; }
  .lg\:start-8 { grid-column-start: 8; }
}

.cols { display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cols--2, .cols--3, .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stack > * + * { margin-top: var(--stack, var(--s-5)); }
.stack-s { --stack: var(--s-3); }
.stack-l { --stack: var(--s-7); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.row--l { gap: var(--s-5); }

/* Scenes are separated by space, not borders (§2.5) */
.section { padding-block: var(--section-y); position: relative; }
.section + .section:not(.paper):not(.presale--band) { padding-top: calc(var(--section-y) * .5); }
.section--tight { padding-block: calc(var(--section-y) * .55); }
.section--flush-top { padding-top: 0; }
.section__head { display: grid; gap: var(--s-4); margin-bottom: clamp(var(--s-6), 5vw, var(--s-8)); }
.section__head .serif-l { max-width: 32ch; }

/* ---- Media grade (§2.6) ------------------------------------------------- */
.media, .media img { width: 100%; height: 100%; object-fit: cover; }
.media img, img.media, video.media { filter: contrast(1.06) brightness(.94); }
.media--css-mono img, img.media--css-mono { filter: grayscale(1) contrast(1.1) brightness(.9); }

/* Neutral placeholder for missing media (build never crashes, §D) */
.media-missing {
  position: relative;
  width: 100%; height: 100%;
  min-height: 100%;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(241, 238, 232, .025) 14px 15px),
    var(--doek);
  display: grid; place-items: end start;
}
.media-missing::after {
  content: attr(data-missing);
  font: 400 10px/1.3 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--rook); opacity: .55;
  padding: 10px 12px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Paper surfaces (Uitslagenblad / Archief / Regels) ------------------ */
.paper, .on-paper {
  background: var(--bot);
  color: var(--inkt);
  --rook: #5E5B55;            /* secondary text on paper (7:1 on --bot) */
  --touw: #CFCAC0;
  --bot-80: #3D3A35;          /* running text (.lead, body copy) on paper — was cream on cream */
}
.paper .lead, .on-paper .lead { color: var(--bot-80); }
.paper h1, .paper h2, .paper h3, .paper .d1, .paper .d2, .paper .d3, .paper .d4, .paper .stencil { color: var(--inkt); }
.paper .label { color: #5E5B55; }

/* ---- Reveal pre-states ------------------------------------------------------
   Content is visible by default. Only when <html> has .js-motion (added by the
   inline head script when motion is allowed, removed again after 3s if site.js
   never boots, e.g. the GSAP CDN is blocked) do elements start hidden. */
.js-motion [data-reveal="fade"],
.js-motion [data-reveal="lines"] { opacity: 0; }
.js-motion [data-reveal="letterbox"] { clip-path: inset(48% 0 48% 0 round var(--r-screen)); }
.js-motion [data-reveal-batch] > * { opacity: 0; }
.js-motion.is-booted [data-reveal].is-revealed,
.js-motion.is-booted [data-reveal-batch] > .is-revealed { opacity: 1; }
/* LETTERBOX OPEN end state: site.js clears its inline clip-path on complete — the screen stays open */
.js-motion.is-booted [data-reveal="letterbox"].is-revealed { clip-path: none; }

/* ---- Reduced motion (§3.5) --------------------------------------------------
   Everything ends in its final state; transitions shrink to short fades. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  [data-reveal], [data-reveal-batch] > * { opacity: 1 !important; clip-path: none !important; transform: none !important; filter: none !important; }
}

/* SplitText line masks clip overflow — give display lines headroom so accents (ÉÉN, Ë) and the
   red full stop are never cut off, while keeping the visual line-height unchanged. */
/* .32em: at display leading (.82–.88) the glyph box already pokes ~.2em above the line box, and an acute (É) adds ~.18em */
.split-line-mask { padding-top: .32em; margin-top: -.32em; padding-bottom: .06em; margin-bottom: -.06em; }