/* Palet: acidgeel en magenta op perkament. Geel en magenta zijn de twee
   kanalen die bij elke glitch uit elkaar schuiven. */
:root {
  --bg: #faf9f5;
  --bg-2: #e9e4d9;
  --card: #ffffff;
  --acid: #eaff00;
  --acid-hover: #f2ff4d;
  --mag: #e12afb;
  --mag-soft: #fae8ff;
  --select: #f6cfff;
  --ink: #141210;
  --ink-soft: #5d574c;
  --ink-deep: #0e0d0b;
  --line: #ded8ca;
  --line-inv: #faf9f52e;

  --font-display: "Tanker", "Arial Black", sans-serif;
  --font-body: "Familjen Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-micro: clamp(0.62rem, 0.58rem + 0.16vw, 0.74rem);
  --text-body: clamp(1rem, 0.95rem + 0.24vw, 1.15rem);
  --pad: clamp(1.1rem, 4vw, 4rem);
  --rail-w: clamp(0px, 3.2vw, 52px);
  --skew: -11deg;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-mag: 4px 4px 0 var(--mag);

  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--select); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- Cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
}
#trail {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 58; image-rendering: pixelated;
}
#cv, #dot { display: none; }
html.has-cursor #cv, html.has-cursor #dot { display: block; }
#cv {
  position: fixed; left: 0; top: 0; width: 34px; height: 34px;
  z-index: 60; pointer-events: none;
  border: 1.5px solid var(--mag);
  will-change: transform, width, height;
}
#cv.is-on-dark { border-color: var(--acid); }
.cv-label {
  position: absolute; left: -1.5px; bottom: calc(100% + 1.5px);
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  letter-spacing: 0.08em; white-space: nowrap;
  padding: 3px 5px 3px; background: var(--mag); color: #fff;
}
.cv-label b { font-weight: 600; }
.cv-label i { font-style: normal; opacity: 0.8; }
#cv.is-idle .cv-name::after { content: "_"; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
#cv.is-on-dark .cv-label { background: var(--acid); color: var(--ink); }
.cv-h { position: absolute; width: 5px; height: 5px; background: var(--mag); }
#cv.is-on-dark .cv-h { background: var(--acid); }
.cv-h--tl { left: -3px; top: -3px; } .cv-h--tr { right: -3px; top: -3px; }
.cv-h--bl { left: -3px; bottom: -3px; } .cv-h--br { right: -3px; bottom: -3px; }
#cv.is-click { animation: cv-click 0.32s steps(4) 1; }
@keyframes cv-click {
  0% { box-shadow: -6px 0 0 var(--acid), 6px 0 0 var(--mag); }
  50% { box-shadow: 8px 2px 0 var(--acid), -8px -2px 0 var(--mag); }
  100% { box-shadow: none; }
}
#dot {
  position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: var(--ink); z-index: 61; pointer-events: none;
}
#dot.is-on-dark { background: var(--acid); }

/* Preview in de cursor: het kader wordt het beeld */
.pv {
  position: absolute; inset: 4px; overflow: hidden;
  background: var(--mag); opacity: 0; transition: opacity 0.18s linear;
}
#cv.is-preview .pv { opacity: 1; }
.pv img, .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.35) brightness(1.08);
  mix-blend-mode: multiply;
}
/* Grafieken en eigen beelden houden hun kleur */
.pv.is-raw, .thumb.is-raw { background: var(--ink); }
.pv.is-raw img, .thumb.is-raw img { filter: none; mix-blend-mode: normal; object-fit: contain; }
.thumb.is-raw img { object-fit: cover; }
.pv::after, .thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, #0000 0 2px, #14121014 2px 3px);
}
.pv.is-swap { animation: swap 0.34s steps(5) 1; }
@keyframes swap {
  0% { clip-path: inset(0 0 72% 0); transform: translateX(-14px); }
  20% { clip-path: inset(30% 0 40% 0); transform: translateX(16px); }
  40% { clip-path: inset(10% 0 10% 0); transform: translateX(-8px); box-shadow: inset 8px 0 0 var(--acid); }
  60% { clip-path: inset(55% 0 0 0); transform: translateX(10px); }
  80% { clip-path: inset(0 0 0 0); transform: translateX(-3px); }
  100% { clip-path: inset(0 0 0 0); transform: none; }
}

/* ---------- Rail ---------- */
.rail {
  position: fixed; top: 0; right: 12px; bottom: 0; width: var(--rail-w);
  z-index: 30; touch-action: none; user-select: none;
}
.rail::before {
  content: ""; position: absolute; top: 9vh; bottom: 9vh; left: 50%;
  width: 1.5px; background: var(--mag);
}
.rail-mark {
  position: absolute; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  display: grid; place-items: center; background: none; border: 0; padding: 0;
}
.rail-mark::before { content: ""; width: 9px; height: 9px; background: var(--mag); transition: transform 0.15s steps(2); }
.rail-mark:hover::before, .rail-mark:focus-visible::before { transform: scale(1.5); }
.rail-mark.is-here::before { background: var(--acid); outline: 1.5px solid var(--mag); }
.rail-tag {
  position: absolute; left: 50%; top: 9vh; transform: translate(-50%, -50%); will-change: transform; z-index: 2;
  display: grid; justify-items: center; gap: 1px; padding: 4px 5px 3px;
  background: var(--mag); color: #fff; font-family: var(--font-mono);
}
.rail-tag b { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.rail-tag small { font-size: 6.5px; letter-spacing: 0.16em; }
.rail.is-on-mag::before, .rail.is-on-mag .rail-mark::before { background: var(--ink); }
.rail.is-on-mag .rail-tag { background: var(--ink); color: var(--acid); }
@media (max-width: 760px) { .rail { display: none; } }

/* ---------- Easter eggs: vliegtuigje en raket ---------- */
#plane {
  position: fixed; top: 15vh; left: 0; z-index: 25; pointer-events: none;
  transform: translateX(105vw); visibility: hidden;
}
#plane.is-flying { visibility: visible; animation: fly 11s linear 1 forwards; }
@keyframes fly { to { transform: translateX(calc(-100% - 6vw)); } }
.plane-bob { display: flex; align-items: center; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.plane-svg { flex: none; }
.plane-svg .prop { animation: prop 0.12s steps(2) infinite; }
@keyframes prop { 50% { transform: translateY(2px) scaleY(0.4); transform-origin: 0 6px; } }
.rope { flex: none; width: 34px; height: 1px; background: var(--ink); opacity: 0.6; }
.banner { display: flex; height: 22px; }
.banner > span {
  position: relative; overflow: hidden; height: 22px; flex: none;
  background: var(--bg); border-block: 1.5px solid var(--ink);
  animation: flutter 1.4s ease-in-out infinite;
}
.banner > span:first-child { border-left: 1.5px solid var(--ink); }
.banner > span:last-child { border-right: 1.5px solid var(--ink); }
.banner > span > i {
  position: absolute; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap;
  font-family: var(--font-mono); font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  padding: 0 12px; color: var(--ink);
}
@keyframes flutter { 0%, 100% { transform: translateY(-1.5px) skewY(-2deg); } 50% { transform: translateY(1.5px) skewY(2deg); } }

#rocket {
  position: fixed; right: calc(12px + var(--rail-w) / 2 - 13.5px); top: calc(91vh - 20px); z-index: 31; pointer-events: none;
  visibility: hidden;
}
#rocket.is-launching { visibility: visible; }
#rocket .flame { animation: prop 0.1s steps(2) infinite; }
#rocket svg { filter: drop-shadow(1.5px 0 0 #141210) drop-shadow(-1.5px 0 0 #141210) drop-shadow(0 1.5px 0 #141210) drop-shadow(0 -1.5px 0 #141210); }
@media (max-width: 760px) { #rocket { right: 8px; } #plane { top: 11vh; } }

/* ---------- Header ---------- */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.ticker {
  overflow: hidden; border-bottom: 1.5px solid var(--ink);
  font-family: var(--font-display); font-size: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  letter-spacing: 0.06em; line-height: 1; padding: 0.55rem 0 0.45rem;
  background: var(--bg);
}
.ticker-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.ticker-track span { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
.nav {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1rem calc(var(--pad) + var(--rail-w) * 0.4) 0 var(--pad);
}
.logo {
  display: grid; gap: 4px; padding: 6px 10px 7px;
  border: 1.5px solid var(--mag); background: var(--bg);
}
.logo-mark { font-family: var(--font-display); font-size: 1.6rem; line-height: 0.9; letter-spacing: 0.02em; display: inline-block; transform: skewX(var(--skew)); }
.logo-mark em { font-style: normal; color: var(--mag); }
.logo-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 4px; }
.nav-actions { display: flex; gap: 0.75rem; }

/* Knoppen: rechthoek met harde schaduw. Hoofdknop geel met magenta schaduw,
   tweede knop papier met inktschaduw. Hover drukt de knop in de schaduw. */
.btn {
  --sh: var(--shadow-hard);
  position: relative; display: inline-flex; align-items: center;
  height: 2.75rem; padding: 0 1.15rem;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1.5px solid var(--ink); box-shadow: var(--sh);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s;
}
.btn--main { background: var(--acid); color: var(--ink); --sh: var(--shadow-mag); }
.btn--main:hover { background: var(--acid-hover); }
.btn--ghost { background: var(--bg); }
.btn--inv { background: transparent; color: var(--bg); border-color: var(--bg); --sh: 4px 4px 0 var(--mag); }
.btn--dark { background: var(--ink); color: var(--acid); border-color: var(--ink); --sh: 4px 4px 0 var(--acid); }
.btn:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn:hover span { animation: jitter 0.3s steps(3) 1; }
.btn:focus-visible { outline: 2px solid var(--mag); outline-offset: 4px; }
@keyframes jitter {
  0% { text-shadow: -3px 0 var(--mag), 3px 0 var(--acid); transform: translateX(1px); }
  50% { text-shadow: 3px 0 var(--mag), -3px 0 var(--acid); transform: translateX(-1px); }
  100% { text-shadow: none; transform: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100svh; min-height: 720px; overflow: hidden;
  background: var(--bg);
}
.hero::after {
  /* korrel van een gedrukte poster */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .06 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.cvbox {
  position: absolute; z-index: 3; border: 1.5px solid var(--mag); pointer-events: none;
  opacity: 0; transition: opacity 0.4s;
}
.cvbox.is-ready { opacity: 1; }
.cvbox span {
  position: absolute; left: -1.5px; bottom: 100%;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  background: var(--mag); color: #fff; padding: 3px 5px; white-space: nowrap;
}
.cvbox i { font-style: normal; opacity: 0.8; }
.cvbox::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 6px; height: 6px; background: var(--mag); }
.cvbox--b { border-color: var(--ink); }
.cvbox--b span, .cvbox--b::after { background: var(--ink); }

.readout {
  position: absolute; right: calc(var(--pad) + var(--rail-w)); top: 7.6rem; margin: 0;
  display: grid; gap: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  z-index: 3;
}
.readout div { display: grid; grid-template-columns: 5.5rem 4.5rem; }
.readout dt { color: var(--ink-soft); text-align: right; padding-right: 1rem; }
.readout dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--mag); font-weight: 600; }

.hero-foot {
  position: absolute; left: var(--pad); right: calc(var(--pad) + var(--rail-w)); bottom: clamp(1.25rem, 4vh, 2.5rem);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; z-index: 3;
}
.role {
  margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mag);
}
.lede { margin: 0 0 0.8rem; max-width: 17rem; font-weight: 500; }
.claim {
  margin: 0; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); line-height: 0.86; letter-spacing: 0.01em;
  transform: skewX(var(--skew)); transform-origin: left bottom;
}
.hero-no { display: grid; justify-items: end; gap: 0.4rem; text-align: right; }
.no { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 3vw, 5.5rem); line-height: 0.8; color: var(--mag); transform: skewX(var(--skew)); }
.hero-no .mono { color: var(--ink-soft); }

/* ---------- Nu: ToetsChecker als stapel die kleiner wordt ---------- */
.pile { position: relative; height: 320vh; background: var(--mag); color: var(--ink); border-block: 1.5px solid var(--ink); }
.pile-sticky {
  position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  padding: 4rem calc(var(--pad) + var(--rail-w)) 3rem var(--pad);
}
.sq.sq--ink { background: var(--ink); }
.pile-title {
  margin: 1rem 0 1.4rem; font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--tfs); line-height: 0.84;
  transform: skewX(var(--skew)); transform-origin: left bottom;
}
.pile-lede { margin: 0 0 2rem; max-width: 30rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); font-weight: 500; line-height: 1.35; }

.desk { position: relative; height: min(70vh, 560px); }
.desk-labels {
  position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.2em; z-index: 1100;
}
.desk-labels span { background: var(--ink); color: var(--bg); padding: 4px 7px 3px; }
.desk-labels b { color: var(--acid); font-weight: 600; margin-left: 0.5em; font-variant-numeric: tabular-nums; }
.desk-note {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1100;
  margin: 0; padding: 4px 0 3px; font-size: 10px; letter-spacing: 0.2em; opacity: 0.75; white-space: nowrap;
}
.sheets { position: absolute; inset: 2.4rem 0 2rem; }
.sheet {
  position: absolute; left: 0; top: 0;
  background: var(--card); border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 #14121040;
  will-change: transform;
}
.sheet::before {
  /* regels van een antwoordblad */
  content: ""; position: absolute; inset: 22% 10% 10%;
  background: repeating-linear-gradient(0deg, #0000 0 13px, #14121022 13px 14px);
}
.sheet-head {
  position: absolute; left: 10%; right: 10%; top: 7%; display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-soft);
  border-bottom: 1.5px solid var(--ink); padding-bottom: 6px;
}
.sheet-ticks { position: absolute; right: 12%; top: 25%; display: grid; gap: 10px; }
.sheet-ticks i {
  display: block; width: 12px; height: 6px; border-left: 2.5px solid var(--mag); border-bottom: 2.5px solid var(--mag);
  transform: rotate(-45deg) scale(0);
}
.sheet.is-done .sheet-ticks i { transform: rotate(-45deg) scale(1); transition: transform 0.12s steps(2); }
.sheet.is-done .sheet-ticks i:nth-child(2) { transition-delay: 0.06s; }
.sheet.is-done .sheet-ticks i:nth-child(3) { transition-delay: 0.12s; }
.sheet.is-done .sheet-ticks i:nth-child(4) { transition-delay: 0.18s; }
.sheet.is-done .sheet-ticks i:nth-child(5) { transition-delay: 0.24s; }
.sheet-scan {
  position: absolute; left: -1.5px; right: -1.5px; top: 0; height: 2px; background: var(--acid);
  box-shadow: 0 0 0 1px var(--ink); opacity: 0;
}
.sheet.is-flying .sheet-scan { opacity: 1; }

/* ---------- Over: één geel vlak met drie regels ---------- */
.about {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end;
  background: var(--acid); border-bottom: 1.5px solid var(--ink);
  padding: clamp(4.5rem, 9vw, 8rem) calc(var(--pad) + var(--rail-w)) clamp(3.5rem, 7vw, 6rem) var(--pad);
}
.about-title {
  margin: 1.2rem 0 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--tfs); line-height: 0.86;
  transform: skewX(var(--skew)); transform-origin: left bottom;
}
.facts { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.facts li {
  position: relative; z-index: 0; display: grid; align-items: center; gap: 0.4rem 1.25rem;
  grid-template-columns: 36px 6.5rem minmax(0, 1fr) auto;
  padding: 1.15rem 0.6rem; border-bottom: 1.5px solid var(--ink);
}
.facts li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg);
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease);
}
.facts li:hover::before { transform: scaleX(1); }
.px { display: block; }
.fact-k { font-size: 10px; }
a.fact-v { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: #14121055; }
a.fact-v:hover { text-decoration-color: var(--ink); }
.fact-v { font-weight: 700; font-size: clamp(1.2rem, 0.95rem + 1vw, 1.85rem); line-height: 1.15; letter-spacing: -0.01em; }
.fact-m { font-size: 10px; color: #141210aa; text-align: right; }

/* ---------- Werk ---------- */
.work { padding: clamp(4.5rem, 9vw, 9rem) calc(var(--pad) + var(--rail-w)) clamp(4.5rem, 9vw, 8rem) var(--pad); }
.work-head { display: grid; gap: 1.2rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.eyebrow { margin: 0; display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.2em; text-transform: uppercase; }
.sq { width: 8px; height: 8px; background: var(--mag); display: inline-block; }
.work-title {
  margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--tfs); line-height: 0.84; letter-spacing: 0.005em;
  transform: skewX(var(--skew)); transform-origin: left bottom;
}

.rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.row { position: relative; border-bottom: 1px solid var(--line); }
.row > a, .row > div {
  position: relative; z-index: 1;
  display: grid; align-items: center; gap: 1.5rem;
  grid-template-columns: 3.2rem minmax(0, 1.05fr) minmax(0, 1fr) 9.5rem;
  padding: 1.35rem 0.75rem;
}
.row::before {
  content: ""; position: absolute; inset: 0; background: var(--acid);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.row:hover::before, .row:focus-within::before { transform: scaleX(1); }
.row-i { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.row-name {
  margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 1rem + 3.2vw, 4.1rem); line-height: 0.9; letter-spacing: 0.01em;
  transform: skewX(var(--skew)); transform-origin: left bottom;
}
.row:hover .row-name { animation: name-glitch 0.42s steps(6) 1; color: var(--ink); }
@keyframes name-glitch {
  0% { text-shadow: -6px 0 var(--mag); clip-path: inset(0 0 55% 0); transform: skewX(var(--skew)) translateX(6px); }
  25% { text-shadow: 5px 0 var(--mag); clip-path: inset(40% 0 0 0); transform: skewX(var(--skew)) translateX(-5px); }
  50% { text-shadow: -3px 0 var(--mag); clip-path: inset(0 0 0 0); transform: skewX(var(--skew)) translateX(2px); }
  75% { text-shadow: 2px 0 var(--mag); }
  100% { text-shadow: none; transform: skewX(var(--skew)); }
}
.row-desc { margin: 0; color: var(--ink-soft); max-width: 30rem; }
.row:hover .row-desc { color: var(--ink); }
.row-meta { display: grid; justify-items: end; gap: 0.35rem; text-align: right; }
.row-meta .yr { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; }
.row-meta .tags { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-soft); }
.row-meta .go { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; background: var(--ink); color: var(--acid); padding: 3px 6px 2px; }
.thumb { display: none; position: relative; overflow: hidden; background: var(--mag); }

/* ---------- Footer ---------- */
.foot {
  position: relative; background: var(--ink-deep); color: var(--bg); overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) calc(var(--pad) + var(--rail-w)) 1.25rem var(--pad);
}
.foot-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--line-inv); }
.eyebrow--inv { color: var(--bg); }
.eyebrow--inv .sq { background: var(--acid); }
.foot-time { position: relative; margin: 0; color: #faf9f5aa; }
/* Pixelklok verschijnt boven de tijd bij hover */
.pixclock {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 5; width: 132px; height: 132px;
  image-rendering: pixelated; border: 1.5px solid var(--acid); background: var(--ink-deep);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.15s steps(3), transform 0.15s steps(3);
}
.has-pix:hover .pixclock, .has-pix:focus .pixclock { opacity: 1; transform: none; }
.readout .has-pix { position: relative; }
.readout .pixclock { right: 0; top: calc(100% + 10px); }
.foot-time:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.foot-time .clock { color: var(--acid); font-variant-numeric: tabular-nums; }
.foot-cta { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.foot-title {
  margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.2rem + 5vw, 6.2rem); line-height: 0.86;
  transform: skewX(var(--skew)); transform-origin: left bottom;
}
.foot-title em { font-style: normal; color: var(--acid); }
.foot-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.foot .btn--main { --sh: 4px 4px 0 var(--mag); }

.wordmark { position: relative; line-height: 0.78; margin: 0 -0.02em; user-select: none; }
.wm {
  display: block; font-family: var(--font-display); text-transform: uppercase; white-space: nowrap;
  font-size: clamp(4rem, 23.6vw, 27rem); letter-spacing: -0.005em;
  transform: skewX(var(--skew)); transform-origin: left bottom; color: var(--bg);
}
.wm em { font-style: normal; color: var(--mag); }
.wordmark::before, .wordmark::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  font-family: var(--font-display); white-space: nowrap; font-size: clamp(4rem, 23.6vw, 27rem);
  transform: skewX(var(--skew)); transform-origin: left bottom; opacity: 0;
}
.wordmark::before { color: var(--mag); }
.wordmark::after { color: var(--acid); }
.wordmark.is-glitch::before { animation: wm-a 0.5s steps(5) 1; }
.wordmark.is-glitch::after { animation: wm-b 0.5s steps(5) 1; }
@keyframes wm-a {
  0% { opacity: 0.9; clip-path: inset(10% 0 70% 0); transform: skewX(var(--skew)) translateX(-18px); }
  40% { clip-path: inset(50% 0 20% 0); transform: skewX(var(--skew)) translateX(22px); }
  80% { clip-path: inset(75% 0 5% 0); transform: skewX(var(--skew)) translateX(-8px); }
  100% { opacity: 0; }
}
@keyframes wm-b {
  0% { opacity: 0.9; clip-path: inset(60% 0 15% 0); transform: skewX(var(--skew)) translateX(16px); }
  40% { clip-path: inset(5% 0 75% 0); transform: skewX(var(--skew)) translateX(-20px); }
  80% { clip-path: inset(35% 0 45% 0); transform: skewX(var(--skew)) translateX(10px); }
  100% { opacity: 0; }
}
.foot-legal { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line-inv); color: #faf9f5aa; }
.foot-legal a:hover { color: var(--acid); }
.whisper { opacity: 0.45; transition: opacity 0.3s, color 0.3s; }
.foot-legal span:hover .whisper { opacity: 1; color: var(--acid); }

/* ---------- Mobiel en touch ---------- */
@media (max-width: 960px) {
  .row > a, .row > div { grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.4rem 1rem; }
  .row-desc { grid-column: 2 / 3; grid-row: 2; font-size: 0.95rem; }
  .row-meta { grid-column: 3; grid-row: 1 / 3; align-self: start; }
  .about { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pile-sticky { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; padding-top: 3.5rem; gap: 1rem; }
  .pile-lede { margin-bottom: 1.2rem; font-size: 1rem; }
  .pile-title { margin: 0.6rem 0 0.8rem; }
  .pile-text { --tfs: clamp(2.8rem, 1rem + 9vw, 5rem); }
  .desk { height: 100%; min-height: 260px; }
}
@media (hover: none), (max-width: 760px) {
  .row > a, .row > div { grid-template-columns: 2rem minmax(0, 1fr) 5.25rem; }
  .row-meta { grid-column: 2 / 4; grid-row: 3; justify-items: start; text-align: left; display: flex; gap: 0.75rem; align-items: center; white-space: nowrap; }
  .thumb { display: block; grid-column: 3; grid-row: 1 / 3; align-self: start; width: 5.25rem; aspect-ratio: 1; }
}
@media (max-width: 760px) {
  .readout { display: none; }
  .nav-actions .btn--ghost { display: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .hero-no { justify-items: start; text-align: left; }
  .foot-cta { align-items: flex-start; }
  .foot-legal { flex-direction: column; }
  .pile-sticky .btn { display: none; }
  .facts li { grid-template-columns: 30px minmax(0, 1fr); }
  .facts .px { grid-row: 1 / 3; width: 30px; height: 30px; }
  .fact-m { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .row::before { transition: none; }
  #plane, #rocket { display: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 1100px) and (min-width: 761px) { .lede { max-width: 24rem; } }

/* Schuine titels kantelen vanaf de onderkant; het label erboven springt even ver in
   als de bovenste regel opschuift (twee regels × regelhoogte × tan 11°), zodat alles één lijn volgt. */
.pile-text { --tfs: clamp(3.2rem, 1.2rem + 7.4vw, 8.6rem); }
.about-head { --tfs: clamp(3rem, 1rem + 6.4vw, 7.4rem); }
.work-head { --tfs: clamp(3.4rem, 1.2rem + 9vw, 10rem); }
.pile-text > .eyebrow, .about-head > .eyebrow, .work-head > .eyebrow { padding-left: calc(var(--tfs) * 0.3); }
@media (max-width: 960px) { .pile-text { --tfs: clamp(2.8rem, 1rem + 9vw, 5rem); } }

/* ---------- Kleine schermen: koppen op één regel, rustigere projectlijst ---------- */
.only-mob { display: none; }
@media (max-width: 760px) {
  .br-desk { display: none; }
  .only-desk { display: none; }
  .only-mob { display: inline; }
  .pile-text { --tfs: clamp(2rem, 10.6vw, 3.4rem); }
  .work-head { --tfs: clamp(2rem, 10.6vw, 3.4rem); }
  .pile-sticky .btn { display: inline-flex; }
  .desk-note { top: auto; bottom: 0; }
  .facts li { grid-template-columns: 30px minmax(0, 1fr); }
  .fact-m { display: block; grid-column: 2; text-align: left; }
  .to-top { display: none; }

  /* projectrij: tekst bovenaan, beeld eronder over de volle breedte met eigen verhouding */
  .row > a, .row > div { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem 0.75rem; padding: 1.6rem 0.25rem 1.8rem; }
  .row-desc { grid-column: 2; grid-row: 2; }
  .row-meta { grid-column: 2; grid-row: 3; }
  .thumb {
    grid-column: 1 / 3; grid-row: 4; width: 100%; margin-top: 0.9rem;
    aspect-ratio: var(--r, 1.6); max-height: 62vw; border: 1.5px solid var(--ink);
  }
  .thumb img { object-position: 50% 20%; }
  .thumb.is-raw img { object-fit: contain; }
}
@media (max-width: 760px) {
  .pile-text > .eyebrow, .work-head > .eyebrow { padding-left: calc(var(--tfs) * 0.15); }
}

/* Footerkop: elke regel schuin vanaf zijn eigen linkeronderhoek, zodat de regels onder elkaar beginnen */
.foot-title { transform: none; }
.foot-title .ln { display: block; transform: skewX(var(--skew)); transform-origin: left bottom; }