/* ============================================================
   43 / XLIII — DESIGN SYSTEM
   Tokens volgen het brand book V2 (21 augustus 2026).
   ============================================================ */

:root {
  /* Kleur — smal palet, zwart draagt, rood signaleert, zilver ordent */
  --color-bg: #090909;
  --color-surface: #171717;
  --color-brand: #8f0e18;
  --color-signal: #d01825;
  --color-text: #f2f2f0;
  --color-muted: #aeb3ba;
  --color-steel: #5e646c;

  /* Zachter dan bone white: randen van knoppen mogen de tekst niet overschreeuwen. */
  --border-soft: rgba(242, 242, 240, 0.55);

  /* Typografie */
  --font-display: 'Kanit', 'Arial Narrow', sans-serif;
  /* De hoes van 43 heeft schuine titels; de displayletter volgt dat. Op
     'normal' zetten maakt alle koppen in één keer rechtop. */
  --display-schuin: italic;
  --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  /* De mono staat nog op de knoppen: knopvormen (rand, vulling, padding)
     houden de technische letter, losse labels en kleine tekst zijn naar de
     leesletter gegaan zodat het geen machinale uitdraai meer leest. */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.25rem;
  --fs-2xl: 3.25rem;
  /* Kanit is breder dan de smalle letter die hier eerst stond, en de hero-titel
     staat per teken in een span met een harde spatie: die kan dus niet
     afbreken. Onder de 48rem schaalt de maat daarom mee met het scherm, zodat
     "THIS IS 43" op elke telefoon heel blijft. Boven 48rem neemt de vaste maat
     het weer over. */
  --fs-3xl: min(5rem, 19vw);

  /* Spacing */
  --space-unit: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;

  /* Layout */
  --maxw: 75rem;
  --max-copy: 68ch;
  --page-pad: 1.5rem;
  --header-h: 4.25rem;
  --radius: 0.125rem;

  /* Motion */
  --motion-fast: 160ms;
  --motion-atmosphere: 1100ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* De hefboom: onder ~1935px gebeurt er niets, daarboven schaalt de hele
   pagina mee tot 1,83x. Ondergrens in rem zodat browserinstelling leidend blijft. */
html {
  font-size: clamp(1rem, 0.827vw, 1.833rem);
}

@media (min-width: 48rem) {
  :root {
    --page-pad: 2.5rem;
    --header-h: 6rem;
    --fs-2xl: 4.5rem;
    --fs-3xl: 8rem;
  }
}

@media (min-width: 75rem) {
  :root {
    --page-pad: 4rem;
    --fs-3xl: 10.5rem;
  }
}

/* ---------- Reset ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 3px;
}

::selection {
  background: var(--color-brand);
  color: var(--color-text);
}

/* ---------- Atmosfeer: grain + vignette ---------- */

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

/* Film grain — decoratief, laag contrast */
body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* Vignette — houdt de randen donker */
body::after {
  background: radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.section {
  padding-block: var(--space-xl);
  position: relative;
}

.section--tight {
  padding-block: var(--space-lg);
}

.copy {
  max-width: var(--max-copy);
}

/* ---------- Typografie ---------- */

.display {
  font-family: var(--font-display);
  font-style: var(--display-schuin);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.01em;
  white-space: pre-line;
}

.display--xl {
  font-size: var(--fs-3xl);
}

.display--lg {
  font-size: var(--fs-2xl);
}

.display--md {
  font-size: var(--fs-xl);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-muted);
}

.lead {
  font-size: var(--fs-md);
  color: var(--color-muted);
}

.text-signal {
  color: var(--color-signal);
}

/* ---------- Header ---------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border-bottom: 1px solid rgba(94, 100, 108, 0.25);
}

/* De header ligt vast bovenin; alleen de hero mag eronder doorlopen.
   Alle andere pagina's beginnen eronder, zodat er niets wegvalt. */
body:not([data-page='home']) #main {
  padding-top: var(--header-h);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* Het beeldmerk heeft XLIII onder de 43 staan. Dat regeltje is het eerste wat
   wegvalt als het logo te klein wordt, dus het krijgt zoveel hoogte als de kop
   toelaat. Op breedte begrenzen en de hoogte laten volgen houdt het in
   verhouding, ook als het logo ooit vervangen wordt. */
.header__logo img {
  width: 3.6rem;
  height: auto;
}

@media (min-width: 48rem) {
  .header__logo img {
    width: 5rem;
  }
}

.nav {
  display: none;
}

@media (min-width: 48rem) {
  .nav {
    display: flex;
    gap: var(--space-sm);
  }
}

/* Zelfde knopvorm als in de footer, zodat navigeren overal hetzelfde leest. */
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 1.125rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-signal);
  background: rgba(23, 23, 23, 0.72);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  transition: color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

.nav__link:hover {
  background: var(--color-brand);
  color: var(--color-text);
  border-color: var(--color-signal);
}

.nav__link[aria-current='page'] {
  border-color: var(--color-signal);
}

/* Mobiel menu */

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

@media (min-width: 48rem) {
  .burger {
    display: none;
  }
}

.burger span {
  display: block;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease);
}

.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 89;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--page-pad);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 400ms var(--ease), visibility 400ms;
}

.mobile-nav[data-open='true'] {
  transform: translateY(0);
  visibility: visible;
}

@media (min-width: 48rem) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav a {
  font-family: var(--font-display);
  font-style: var(--display-schuin);
  font-weight: 800;
  font-size: var(--fs-xl);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-muted);
  transition: color var(--motion-fast) var(--ease);
}

.mobile-nav a[aria-current='page'],
.mobile-nav a:hover {
  color: var(--color-text);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 3rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
}

.btn:hover {
  transform: scale(1.02);
}

.btn--primary {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn--primary:hover {
  background: var(--color-signal);
  color: var(--color-text);
}

/* Rode tekst in een witte box — dezelfde taal als de social-iconen.
   De rand wordt pas rood als de knop de huidige pagina is. */
.btn--secondary {
  background: rgba(23, 23, 23, 0.72);
  color: var(--color-signal);
  border-color: var(--border-soft);
  backdrop-filter: blur(0.25rem);
}

.btn--secondary:hover {
  background: var(--color-brand);
  color: var(--color-text);
  border-color: var(--color-signal);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Knop met een merkteken ervoor, bijvoorbeeld Spotify. */
.btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.btn--icon svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--header-h));
  margin-top: var(--header-h);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Eigen ondergrond: het achtergrondvlak ligt vast achter de hele pagina en
     zou anders door de halfdoorzichtige herofoto heen schijnen. Zo dekt de
     hero hem af en staat het effect meteen klaar zodra je eronder komt. */
  background: var(--color-bg);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* De figuur staat rechts van het midden en zijn kap bovenin. Op een staand
     scherm valt links en rechts weg, op een breed scherm boven en onder: met
     dit ankerpunt blijft de kap in beide gevallen in beeld. */
  object-position: 62% 28%;
  opacity: 0.925;
  transform: scale(1.06);
  animation: drift var(--motion-atmosphere) var(--ease) forwards,
    breathe 24s ease-in-out 1.5s infinite;
}

/* Alleen onderin donker maken, zodat de tekst leesbaar blijft maar het
   beeld zelf zichtbaar is. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--color-bg) 0%, rgba(9, 9, 9, 0.6) 22%, rgba(9, 9, 9, 0.08) 60%, rgba(9, 9, 9, 0.22) 100%),
    radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(9, 9, 9, 0.3) 100%);
}

/* Trage rode lichtbundel die over het beeld kruipt. Puur CSS, geen bestand. */
.hero__beam {
  position: absolute;
  inset: -20% -40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(143, 14, 24, 0.11) 46%,
    rgba(208, 24, 37, 0.18) 50%,
    rgba(143, 14, 24, 0.11) 54%,
    transparent 62%
  );
  mix-blend-mode: screen;
  filter: blur(1.5rem);
  animation: sweep 26s ease-in-out infinite;
}

/* Twee mistlagen die langs elkaar schuiven; samen nooit een herhaalbaar patroon. */
.hero__fog {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.25;
  background:
    radial-gradient(60% 45% at 25% 70%, rgba(143, 14, 24, 0.28), transparent 70%),
    radial-gradient(45% 40% at 78% 40%, rgba(94, 100, 108, 0.16), transparent 72%);
  animation: fog 34s ease-in-out infinite alternate;
}

@keyframes sweep {
  0%, 100% {
    transform: translateX(-18%);
    opacity: 0.55;
  }
  50% {
    transform: translateX(18%);
    opacity: 1;
  }
}

@keyframes fog {
  from {
    transform: translate3d(-3%, 2%, 0) scale(1.05);
  }
  to {
    transform: translate3d(4%, -3%, 0) scale(1.14);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-xl) var(--space-lg);
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-style: var(--display-schuin);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: 0.4em;
  color: var(--color-brand);
  margin-bottom: var(--space-sm);
}

/* De hero slaat in. De titel valt letter voor letter van boven binnen en
   klikt vast met een lichte doorslag, er schiet een rode veeg over het beeld
   op het moment dat de laatste letter landt, en de foto zoomt daar traag
   onderuit. Alleen hier; de rest van de site houdt dezelfde rustige wipe. */
.hero__teken {
  display: inline-block;
  opacity: 0;
  transform: translateY(-0.85em) rotate(-7deg);
  filter: blur(0.4rem);
}

.hero.is-in .hero__teken {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    transform 540ms cubic-bezier(0.2, 1.3, 0.34, 1),
    opacity 220ms linear,
    filter 300ms ease-out;
}

.hero.is-in .hero__teken:nth-child(1) { transition-delay: 0ms; }
.hero.is-in .hero__teken:nth-child(2) { transition-delay: 42ms; }
.hero.is-in .hero__teken:nth-child(3) { transition-delay: 84ms; }
.hero.is-in .hero__teken:nth-child(4) { transition-delay: 126ms; }
.hero.is-in .hero__teken:nth-child(5) { transition-delay: 168ms; }
.hero.is-in .hero__teken:nth-child(6) { transition-delay: 210ms; }
.hero.is-in .hero__teken:nth-child(7) { transition-delay: 252ms; }
.hero.is-in .hero__teken:nth-child(8) { transition-delay: 294ms; }
.hero.is-in .hero__teken:nth-child(9) { transition-delay: 336ms; }
.hero.is-in .hero__teken:nth-child(10) { transition-delay: 378ms; }
.hero.is-in .hero__teken:nth-child(11) { transition-delay: 420ms; }
.hero.is-in .hero__teken:nth-child(12) { transition-delay: 462ms; }
.hero.is-in .hero__teken:nth-child(13) { transition-delay: 504ms; }
.hero.is-in .hero__teken:nth-child(14) { transition-delay: 546ms; }
.hero.is-in .hero__teken:nth-child(15) { transition-delay: 588ms; }
.hero.is-in .hero__teken:nth-child(16) { transition-delay: 630ms; }
.hero.is-in .hero__teken:nth-child(17) { transition-delay: 672ms; }
.hero.is-in .hero__teken:nth-child(18) { transition-delay: 714ms; }
.hero.is-in .hero__teken:nth-child(19) { transition-delay: 756ms; }
.hero.is-in .hero__teken:nth-child(20) { transition-delay: 798ms; }

.hero__eyebrow {
  opacity: 0;
  letter-spacing: 1.4em;
}

.hero.is-in .hero__eyebrow {
  opacity: 1;
  letter-spacing: 0.4em;
  transition:
    opacity 420ms ease-out,
    letter-spacing 960ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__line,
.hero__inner .btn-row,
.hero__scroll {
  opacity: 0;
  transform: translateY(1rem);
}

.hero.is-in .hero__line,
.hero.is-in .hero__inner .btn-row,
.hero.is-in .hero__scroll {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms ease-out,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero.is-in .hero__line { transition-delay: 600ms; }
.hero.is-in .hero__inner .btn-row { transition-delay: 700ms; }
.hero.is-in .hero__scroll { transition-delay: 900ms; }

.hero__media img {
  transform: scale(1.14);
}

.hero.is-in .hero__media img {
  transform: scale(1);
  transition: transform 2600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* De veeg trekt schuin over het hele beeld, één keer. */
.hero__flits {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(208, 24, 37, 0.55) 50%, transparent 62%);
}

.hero.is-in .hero__flits {
  animation: hero-flits 640ms cubic-bezier(0.16, 1, 0.3, 1) 760ms both;
}

@keyframes hero-flits {
  from {
    opacity: 0;
    transform: translateX(-35%);
  }
  22% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(35%);
  }
}

/* Elke letter staat in een eigen span voor de inslag-animatie. Daardoor mag de
   regel ook tússen twee letters afbreken, en dan staat er "THIS IS 4" met een
   losse 3 eronder. Hard uitzetten; de maat hierboven zorgt dat hij past. */
.hero__title {
  margin-bottom: var(--space-md);
  white-space: nowrap;
  /* Met het logo erin is de regel 5,2 keer de lettermaat breed. Op een
     telefoon moet hij binnen de kolom blijven, dus hier een eigen maat die
     meeschaalt; vanaf tabletbreedte geldt weer de gewone titelmaat. */
  font-size: min(5rem, 16vw);
}

@media (min-width: 48rem) {
  .hero__title {
    font-size: var(--fs-3xl);
  }
}

/* De 43 in de titel is het logo zelf. Het is hoger dan de letters, want de
   punten van de tekening steken boven en onder de regel uit; de negatieve
   marges zorgen dat de regel daar niet hoger van wordt en de rest van de hero
   op zijn plek blijft. De marge links trekt het logo tegen "IS" aan: de linker
   punt van de 4 is lucht, geen letter. */
.hero__teken--logo {
  line-height: 0;
  margin-left: -0.2em;
}

.hero__teken--logo img {
  display: inline-block;
  height: 1.45em;
  width: auto;
  max-width: none;
  margin-block: -0.375em;
}

/* Eigen letter, alleen hier: dezelfde regel staat zo onder de titel op de hoes.
   Cinzel is een kapitalenletter, dus hij vraagt om ruimte tussen de letters —
   op de normale regelafstand lopen de schreven anders tegen elkaar aan. */
.hero__line {
  font-family: 'Cinzel', Georgia, serif;
  font-size: var(--fs-lg);
  letter-spacing: 0.3em;
  /* Letterspatiëring zet ook ruimte áchter de laatste letter; die halen we er
     weer af zodat de regel links netjes uitlijnt met de titel erboven. */
  margin-right: -0.3em;
  color: var(--color-muted);
  max-width: 32ch;
  margin-bottom: var(--space-lg);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-md);
  right: var(--page-pad);
  z-index: 1;
  display: none;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  color: var(--color-steel);
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .hero__scroll {
    display: flex;
  }
}

.hero__scroll span {
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--color-steel);
  transform-origin: right;
  animation: pull 2.4s var(--ease) infinite;
}

@keyframes drift {
  from {
    opacity: 0;
    transform: scale(1.12);
  }
  to {
    opacity: 0.28;
    transform: scale(1.06);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1.06);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes pull {
  0%, 100% {
    transform: scaleX(1);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(0.4);
    opacity: 1;
  }
}

/* ---------- Featured release ---------- */

.release {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 48rem) {
  /* Gespiegeld ten opzichte van de kennismaking erboven: daar staat het beeld
     links, hier rechts. Zo wisselt de voorpagina af. */
  .release {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-xl);
  }

  .release__art {
    order: 2;
  }
}

.release__art {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface);
}

.release__art img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.release__art:hover img {
  transform: scale(1.03);
}

.release__tag {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  margin-bottom: var(--space-sm);
  background: var(--color-brand);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-radius: var(--radius);
}

.release__title {
  margin-bottom: var(--space-sm);
}

.release__blurb {
  color: var(--color-muted);
  max-width: 42ch;
  margin-bottom: var(--space-md);
}

/* ---------- Platform links ---------- */

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.platforms a {
  padding: 0.5rem 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-steel);
  border: 1px solid rgba(94, 100, 108, 0.4);
  border-radius: var(--radius);
  transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}

.platforms a:hover {
  color: var(--color-text);
  border-color: var(--color-signal);
}

.release__volg {
  margin-top: var(--space-md);
}

.platforms__none {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-brand);
}

/* ---------- Home: de secties krijgen elk een scherm ---------- */

/* Op een ruim scherm stond alles op elkaar geperst. Elke sectie vult daar nu
   een beeldhoogte met zijn inhoud in het midden, zodat je per keer één ding
   voor je hebt. Op een telefoon blijft het gewoon doorlopen: daar zou een
   vaste hoogte alleen maar gaten trekken. */
@media (min-width: 62rem) {
  #intro,
  #release,
  #music {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
  }

  /* De laatste sectie doet niet mee. Zijn inhoud is laag, en bij een volle
     beeldhoogte met alles in het midden valt de helft van de overgebleven
     ruimte onder de knoppen: dan hangt de footer los onderaan. Hier volgt de
     hoogte dus de inhoud, met ruimte eromheen. */
  #boeking {
    padding-block: var(--space-xl);
  }
}

/* ---------- Home: kennismaking ---------- */

.intro {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

.intro__portret {
  width: min(100%, 26rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

.intro__portret img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(208, 24, 37, 0.45);
  border-radius: 0.625rem;
}

.intro__tekst {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
}

.intro__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-signal);
}

.intro__body {
  color: var(--color-muted);
  max-width: 52ch;
}

/* Een liggend sfeerbeeld vraagt meer breedte dan een portret. */
.intro__portret--breed {
  width: min(100%, 30rem);
  aspect-ratio: 3 / 2;
}

@media (min-width: 48rem) {
  /* Dezelfde verdeling als de release eronder, zodat het portret en de hoes
     precies even groot in beeld staan. */
  .intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-xl);
  }

  .intro__portret {
    width: 100%;
  }

  /* Gespiegeld, zodat het beeld niet twee keer aan dezelfde kant staat. */
  .intro--flip {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .intro--flip .intro__portret {
    order: 2;
  }
}

/* ---------- Home: doorverwijzing naar de tracks ---------- */

/* De hele sectie is de knop. Daarom zitten er binnenin geen losse links of
   knoppen meer: alles wijst naar dezelfde plek. */
.tracklink {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg) 0 var(--space-lg) var(--space-md);
  overflow: hidden;
  border: 1px solid rgba(208, 24, 37, 0.35);
  border-radius: 1rem;
  background: rgba(23, 23, 23, 0.35);
  transition: border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.tracklink:hover {
  border-color: rgba(208, 24, 37, 0.7);
  background: rgba(143, 14, 24, 0.08);
}

.tracklink__tekst {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
  padding-right: var(--space-md);
}

.tracklink__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-signal);
}

.tracklink__title {
  display: block;
}

.tracklink__hint {
  color: var(--color-muted);
}

.tracklink__pijl {
  width: 2rem;
  margin-top: var(--space-xs);
  color: var(--color-signal);
  transition: transform var(--motion-fast) var(--ease);
}

.tracklink:hover .tracklink__pijl {
  transform: translateX(0.375rem);
}

/* De hoezen trekken door het vlak. De reeks staat er twee keer in en schuift
   precies de helft op, zodat het einde naadloos op het begin aansluit. Aan de
   randen vervaagt de band, waardoor hij door de sectie heen lijkt te lopen in
   plaats van erin te beginnen en te eindigen. */
.tracklink__band {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* Lineair, want een doorlopende band met een versnelling laat bij elke ronde
   zien waar de herhaling begint. */
.tracklink__rij {
  display: flex;
  width: max-content;
  animation: tracklink-band 44s linear infinite;
}

/* Marge in plaats van gap: dan is elk item even breed inclusief tussenruimte
   en klopt die halve verschuiving op de pixel. */
.tracklink__rij img {
  width: min(9rem, 26vw);
  aspect-ratio: 1;
  object-fit: cover;
  margin-right: var(--space-sm);
  border: 1px solid rgba(208, 24, 37, 0.45);
  border-radius: 0.5rem;
}

@keyframes tracklink-band {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tracklink__rij {
    animation: none;
  }
}

@media (min-width: 62rem) {
  .tracklink {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--space-lg);
    padding: var(--space-lg) 0 var(--space-lg) var(--space-lg);
  }
}

/* ---------- Track list + waveform ---------- */

.tracks {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(94, 100, 108, 0.22);
  border-block: 1px solid rgba(94, 100, 108, 0.22);
}

.track {
  background: var(--color-bg);
  padding: var(--space-md) 0;
  transition: background var(--motion-fast) var(--ease);
}

.track:hover,
.track[data-active='true'] {
  background: var(--color-surface);
}

.track__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding-inline: var(--space-sm);
}

@media (min-width: 48rem) {
  .track__head {
    grid-template-columns: auto 4.5rem minmax(0, 1fr) auto;
    gap: var(--space-md);
  }
}

.track__play {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-steel);
  border-radius: var(--radius);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.track__play:hover {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

.track[data-active='true'] .track__play {
  background: var(--color-signal);
  border-color: var(--color-signal);
  color: var(--color-text);
}

.track__play svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}

.track__art {
  display: none;
}

@media (min-width: 48rem) {
  .track__art {
    display: block;
    width: 4.5rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
  }

  .track__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease);
  }

  .track:hover .track__art img {
    transform: scale(1.03);
  }
}

.track__meta {
  min-width: 0;
}

.track__title {
  font-family: var(--font-display);
  font-style: var(--display-schuin);
  font-weight: 800;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Mobiel: titel mag wrappen — display type wordt nooit afgekapt.
   Vanaf tablet is er breedte genoeg voor één regel. */
@media (min-width: 48rem) {
  .track__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.track__sub {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-steel);
  margin-top: 0.25rem;
}

.track__time {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-steel);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: start;
  padding-top: 0.3rem;
}

@media (min-width: 48rem) {
  .track__time {
    align-self: center;
    padding-top: 0;
  }
}

.track__wave {
  padding: var(--space-sm) var(--space-sm) 0;
}

.wave {
  position: relative;
  width: 100%;
  height: 3.5rem;
  cursor: pointer;
  touch-action: none;
}

@media (min-width: 48rem) {
  .wave {
    height: 4.5rem;
  }
}

.wave canvas {
  width: 100%;
  height: 100%;
}

.wave__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-steel);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease);
  pointer-events: none;
}

.track__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) 0;
}

.track__blurb {
  color: var(--color-muted);
  font-size: var(--fs-sm);
  max-width: 46ch;
}

.track__more {
  padding: var(--space-sm) var(--space-sm) 0;
}

.track__more summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-steel);
  cursor: pointer;
  list-style: none;
  transition: color var(--motion-fast) var(--ease);
}

.track__more summary::-webkit-details-marker {
  display: none;
}

.track__more summary::before {
  content: '+';
  color: var(--color-signal);
  transition: transform var(--motion-fast) var(--ease);
}

.track__more[open] summary::before {
  transform: rotate(45deg);
}

.track__more summary:hover {
  color: var(--color-text);
}

.track__more p {
  max-width: var(--max-copy);
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

/* ---------- Music: carrousel ---------- */

.music .container {
  text-align: center;
}

.carousel {
  margin-top: var(--space-lg);
}

/* Het speelvlak is precies zo breed als een kaart, zodat de pijlen binnen de
   kaartrand vallen en niet ergens in de marge van de pagina zweven. */
.carousel__stage {
  position: relative;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* Het vlak zelf schuift; vastklikken en vegen komen van de browser. */
.carousel__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.carousel__viewport::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  opacity: 0.35;
  transition: opacity var(--motion-atmosphere) var(--ease);
}

/* Alleen de track die voor je staat is volledig aanwezig. */
.slide[data-current='true'] {
  opacity: 1;
}

/* Alles van één track zit in één omheind vlak, zodat je ziet dat je door
   kaarten bladert en niet door losse stukken pagina. */
.slide__card {
  display: grid;
  gap: var(--space-md);
  margin-inline: auto;
  padding: var(--space-md);
  border: 1px solid rgba(208, 24, 37, 0.35);
  border-radius: 1rem;
  background: rgba(23, 23, 23, 0.35);
}

.slide__top {
  display: grid;
  gap: var(--space-md);
}

.slide__art {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

.slide__art img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(208, 24, 37, 0.45);
  border-radius: 0.625rem;
}

/* De gloed achter de hoes ademt mee met de lage tonen: --puls wordt door de
   weergave gezet en loopt van 0 tot 1. */
.slide__pulse {
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle at 50% 55%, rgba(208, 24, 37, 0.55), rgba(9, 9, 9, 0) 70%);
  opacity: calc(0.12 + var(--puls, 0) * 0.55);
  transform: scale(calc(0.94 + var(--puls, 0) * 0.1));
  filter: blur(1.25rem);
  pointer-events: none;
}

.slide__body {
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  text-align: left;
}

.slide__meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-signal);
}

.slide__title {
  font-size: var(--fs-xl);
  line-height: 1.05;
}

.slide__blurb {
  color: var(--color-muted);
  max-width: 46ch;
}

/* De weergave is het hart van de kaart en krijgt daarom de volle breedte. */
.slide__stage {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.slide__play {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--color-signal);
  background: transparent;
  transition: background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
}

.slide__play svg {
  width: 0.875rem;
  fill: currentColor;
}

.slide__play:hover {
  background: var(--color-signal);
  border-color: var(--color-signal);
  color: var(--color-text);
  transform: scale(1.04);
}

/* Geen vooraf getekende golfvorm meer: dit is het spectrum van wat er nu klinkt. */
.slide__spectrum {
  flex: 1;
  height: 11rem;
  min-width: 0;
}

.slide__time {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.slide__seek {
  position: relative;
  height: 0.25rem;
  background: rgba(94, 100, 108, 0.3);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
}

.slide__played {
  position: absolute;
  inset: 0;
  background: var(--color-signal);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
}

.slide__seek:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 0.375rem;
}

.slide__more summary {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  cursor: pointer;
  padding-block: var(--space-xs);
}

.slide__more p {
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-xs);
}

/* Oproep onder de carrousel. Spotify is de belangrijkste van de twee en
   krijgt daarom de volle knop; Instagram staat ernaast, niet ertegenover. */
.follow {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  max-width: 68rem;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid rgba(208, 24, 37, 0.35);
  border-radius: 1rem;
  background: rgba(23, 23, 23, 0.35);
  text-align: left;
}

.follow__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-signal);
}

.follow__title {
  font-size: var(--fs-xl);
  line-height: 1.05;
  margin-top: var(--space-xs);
}

.follow__body {
  margin-top: var(--space-sm);
  max-width: 52ch;
  color: var(--color-muted);
}

.follow__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}



@media (min-width: 62rem) {
  .follow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }
}

/* Bladeren */

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: rgba(9, 9, 9, 0.6);
  color: var(--color-signal);
  transition: background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

.carousel__nav svg {
  width: 1.125rem;
}

.carousel__nav:hover {
  background: var(--color-signal);
  border-color: var(--color-signal);
  color: var(--color-text);
}

/* Op een telefoon is vegen de manier om te bladeren; daar zouden knoppen
   alleen over de kaart heen liggen. De stippen blijven wel staan. */
.carousel__nav {
  display: none;
}

.carousel__teller {
  margin-top: var(--space-md);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  color: var(--color-muted);
}

.carousel__teller b {
  font-weight: 400;
  color: var(--color-signal);
}

@media (min-width: 62rem) {
  /* Binnen de kaart wordt links en rechts een strook vrijgehouden waar de
     pijlen in staan, zodat ze nergens overheen liggen. */
  .slide__card {
    padding-inline: 5rem;
  }

  .carousel__nav {
    display: grid;
    left: calc(var(--page-pad) + 1.125rem);
  }

  .carousel__nav--next {
    left: auto;
    right: calc(var(--page-pad) + 1.125rem);
  }

  .slide__top {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-lg);
  }

  .slide__art {
    width: 100%;
  }

  .slide__spectrum {
    height: 17rem;
  }

}

/* ---------- Cards ---------- */

.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.card {
  background: var(--color-surface);
  border: 1px solid rgba(94, 100, 108, 0.18);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

.card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(208, 24, 37, 0.5);
}

.card__media {
  overflow: hidden;
  background: var(--color-bg);
}

.card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.03);
}

.card__body {
  padding: var(--space-md);
}

/* ---------- Achtergrondeffecten per pagina ----------
   Elke pagina krijgt zijn eigen variant. Alles in CSS: geen bestanden,
   geen canvas, en het staat stil bij prefers-reduced-motion. */

/* Vast in beeld achter de hele pagina: de inhoud scrollt eroverheen.
   Header en footer hebben een eigen ondergrond en blijven dus schoon. */
.fx--page {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

body:has(.fx--page) #main,
body:has(.fx--page) .footer {
  position: relative;
  z-index: 1;
}

body:has(.fx--page) .footer {
  background: var(--color-bg);
}

.fx span {
  position: absolute;
  inset: 0;
  display: block;
}

/* De effecten tekenen op zwart; `screen` laat dat zwart wegvallen. */
.fx__laag canvas {
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0.45;
}

/* De golfringen zijn smaller dan de vezels en verdragen iets meer. */
.fx__signal canvas {
  opacity: 0.55;
}

/* De banen zijn groot en aaneengesloten, dus die moeten juist inhouden. */
.fx__beams canvas {
  opacity: 0.4;
}

/* De tekens regelen hun eigen doorzichtigheid per stuk, dus het doek zelf
   hoeft niet getemperd te worden. */
.fx__glyphs canvas {
  opacity: 1;
}

.fx--page .fx__glow {
  filter: blur(0.5rem);
  animation: fx-glow 38s ease-in-out infinite alternate;
}

/* Onderin, waar de vonken vandaan lijken te komen. */
.fx--home .fx__glow {
  background:
    radial-gradient(52% 32% at 50% 104%, rgba(143, 14, 24, 0.26), transparent 72%),
    radial-gradient(30% 24% at 14% 34%, rgba(208, 24, 37, 0.1), transparent 74%);
}

.fx--about .fx__glow {
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(143, 14, 24, 0.3), transparent 70%),
    radial-gradient(32% 26% at 82% 68%, rgba(208, 24, 37, 0.16), transparent 72%);
}

/* Het licht komt van boven, dus daar ligt ook de gloed. */
.fx--music .fx__glow {
  background:
    radial-gradient(46% 34% at 28% 6%, rgba(143, 14, 24, 0.24), transparent 72%),
    radial-gradient(38% 30% at 76% 96%, rgba(208, 24, 37, 0.12), transparent 74%);
}

/* Hier ligt de gloed waar de twee bronnen staan, zodat het beeld één geheel
   is in plaats van een doek met een gordijn ervoor. */
.fx--booking .fx__glow {
  background:
    radial-gradient(34% 28% at 12% 62%, rgba(143, 14, 24, 0.26), transparent 70%),
    radial-gradient(30% 24% at 88% 26%, rgba(208, 24, 37, 0.14), transparent 72%);
}

@keyframes fx-glow {
  from {
    transform: translate3d(-2%, 1%, 0) scale(1);
  }
  to {
    transform: translate3d(3%, -2%, 0) scale(1.12);
  }
}

@keyframes fx-scan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  8% {
    opacity: 0.25;
  }
  60%, 100% {
    transform: translateY(260vh);
    opacity: 0;
  }
}

/* ---------- Glow cursor ---------- */

.glow-cursor {
  position: fixed;
  inset: 0;
  z-index: 95;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------- Rode onderbreking in lopende tekst ---------- */

.mark {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

.mark span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(208, 24, 37, 0.55), transparent);
}

/* Het 43-monogram als vorm: de afbeelding dient als masker, de kleur komt
   uit het palet. Zo is het rood en volgt het automatisch het echte logo
   zodra dat aangeleverd is. */
.mark b {
  width: 1.9rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: var(--color-signal);
  mask-image: var(--logo-shape);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--logo-shape);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ---------- About ---------- */

/* Titel en intro staan over de volle breedte en gecentreerd; `balance`
   verdeelt de regels evenredig in plaats van één lange en één korte. */
.about__head {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.about__head .lead {
  max-width: 62ch;
  margin: var(--space-md) auto 0;
  text-wrap: balance;
}

.about__head .display {
  text-wrap: balance;
}

.about__head .mark {
  max-width: 28rem;
  margin: var(--space-lg) auto 0;
}

.about {
  display: grid;
  gap: var(--space-lg);
}

.about + .about {
  margin-top: var(--space-xl);
}

/* Elk bioblok heeft een beeld naast zich; 'side' zegt aan welke kant. Door
   de kanten af te wisselen blijft de tekst niet als één lap aan dezelfde
   zijde van de pagina staan. Op een smal scherm vervalt dat vanzelf: daar
   staat alles onder elkaar in leesvolgorde. */
@media (min-width: 48rem) {
  .about {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .about--right .about__copy {
    grid-column: 1;
    grid-row: 1;
  }

  .about--right .about__figure {
    grid-column: 2;
    grid-row: 1;
  }

  /* Halverwege de tekst in plaats van er bovenaan tegenaan geplakt. */
  .about__figure {
    align-self: center;
  }

  .about--left {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .about--left .about__figure {
    grid-column: 1;
    grid-row: 1;
  }

  .about--left .about__copy {
    grid-column: 2;
    grid-row: 1;
  }
}

.about__figure {
  position: relative;
}

.about__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(208, 24, 37, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 0 0 0.375rem rgba(143, 14, 24, 0.12);
}

/* Een foto mag aan de randen in het zwart zakken, zodat hij niet als een blok
   naast de tekst staat. Een hoes is een ontwerp op zichzelf en krijgt dat
   verloop juist niet: dat zou het artwork aansnijden. */
.about__frame--art::after {
  display: none;
}

/* De foto staat bovenaan zijn kolom en beweegt niet: hij scrollt gewoon mee
   met de tekst. Zijn breedte wordt begrensd door de vensterhoogte, zodat hij
   bij binnenkomst ook op een lager scherm nog helemaal in beeld past. */
@media (min-width: 48rem) {
  .about__frame {
    width: min(100%, calc(100dvh - 24rem));
    margin-inline: auto;
  }
}

/* Laptopschermen (1366x768 en vergelijkbaar): kop en kader compacter, zodat
   de foto ook bovenaan de pagina al helemaal in beeld staat. */
@media (min-width: 48rem) and (max-height: 56rem) {
  .about__head {
    margin-bottom: var(--space-lg);
  }

  .about__head .lead,
  .about__head .mark {
    margin-top: var(--space-md);
  }
}

/* De foto vult het ronde kader volledig. */
.about__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Randen laten uitvloeien zodat de foto in het zwart zakt in plaats van
   als een blok naast de tekst te staan. */
.about__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(9, 9, 9, 0.4) 0%, transparent 16%, transparent 80%, rgba(9, 9, 9, 0.85) 100%);
}

.about__copy .lead {
  margin-top: var(--space-md);
}

.about__copy p {
  color: var(--color-muted);
}

.about__copy p + p {
  margin-top: var(--space-sm);
}

/* Accenten in de biografie: iets lichter dan de lopende tekst, niet zwaarder,
   zodat de regel rustig blijft. */
.about__copy strong {
  font-weight: 500;
  color: var(--color-text);
}

/* Staat los onder de twee kolommen, gecentreerd op de pagina. */
.facts {
  max-width: 46rem;
  margin: var(--space-xl) auto 0;
  border-top: 1px solid rgba(208, 24, 37, 0.45);
}

.facts__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-bottom: 1px solid rgba(208, 24, 37, 0.45);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Een waarde die uit meer delen bestaat breekt alleen bij het scheidingsteken,
   niet middenin een naam. Anders staat er op een telefoon "Herman Brood" op de
   ene regel en "Academie" op de volgende. Het breekpunt zelf staat als <wbr>
   achter het teken, want daar omheen staat geen spatie. */
.facts__deel {
  white-space: nowrap;
}

.facts__sep {
  font-style: normal;
  color: var(--color-signal);
  padding-inline: 0.25rem;
}

.facts__key {
  flex-shrink: 0;
}

.facts__mail {
  text-transform: none;
  letter-spacing: 0.06em;
  color: inherit;
  text-decoration-color: rgba(208, 24, 37, 0.5);
  text-underline-offset: 0.25em;
  transition: color 0.3s ease;
}

.facts__mail:hover {
  color: var(--color-signal);
}

.facts__row > :last-child {
  text-align: right;
}

/* Landt een anker onder de vaste kop in plaats van erachter. */
#studio,
#press {
  scroll-margin-top: calc(var(--header-h) + var(--space-md));
}

/* ---------- Studio: de signaalketen ---------- */

/* Gecentreerde sectiekop, gedeeld door de studio en de press kit. */
.section-head {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.section-head__intro {
  max-width: 54ch;
  margin: var(--space-sm) auto 0;
  text-align: center;
  color: var(--color-muted);
  /* Verdeelt de woorden over even lange regels in plaats van een volle
     regel gevolgd door een restje. */
  text-wrap: balance;
}

.chain {
  max-width: 60rem;
  margin: var(--space-lg) auto 0;
}

.chain__row {
  display: grid;
  gap: var(--space-md);
}

/* Een schakel in de keten. */
.node {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid rgba(94, 100, 108, 0.3);
  border-radius: var(--radius);
  background: rgba(23, 23, 23, 0.45);
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
}

.node:hover {
  border-color: rgba(208, 24, 37, 0.55);
  background: rgba(143, 14, 24, 0.06);
  transform: translateY(-0.25rem);
}

.node--plain {
  justify-items: center;
  text-align: center;
}

.node__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
}

/* De apparatuur licht pas op als je er aandacht aan geeft. */
.node__media::before {
  content: '';
  position: absolute;
  inset: 8% 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(143, 14, 24, 0.35), rgba(9, 9, 9, 0) 70%);
  opacity: 0;
  transition: opacity var(--motion-atmosphere) var(--ease);
}

.node:hover .node__media::before {
  opacity: 1;
}

.node__media img {
  position: relative;
  max-width: 100%;
  max-height: 13rem;
  width: auto;
  height: auto;
}

.node__role {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-signal);
}

.node__title {
  font-family: var(--font-display);
  font-style: var(--display-schuin);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}

.node__note {
  margin-top: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  max-width: 48ch;
}

.node__items {
  margin-top: var(--space-sm);
  list-style: none;
}

.node__items li {
  position: relative;
  padding: 0.3125rem 0 0.3125rem 1.75rem;
  border-bottom: 1px solid rgba(94, 100, 108, 0.18);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

/* Het streepje groeit uit bij aandacht, van links naar rechts en per regel
   iets later, zodat de lijst uitwaaiert in plaats van in één klap omslaat. */
.node__items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.75rem;
  height: 1px;
  background: var(--color-brand);
  transform-origin: left center;
  transition:
    transform var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.node:hover .node__items li::before {
  transform: scaleX(1.75);
  background: var(--color-signal);
}

.node__items li:nth-child(2)::before { transition-delay: 30ms; }
.node__items li:nth-child(3)::before { transition-delay: 60ms; }
.node__items li:nth-child(4)::before { transition-delay: 90ms; }
.node__items li:nth-child(5)::before { transition-delay: 120ms; }
.node__items li:nth-child(6)::before { transition-delay: 150ms; }
.node__items li:nth-child(7)::before { transition-delay: 180ms; }

/* De verbindingen: een pijl omlaag, en een vork bij de splitsing. */
.chain__link {
  position: relative;
  width: 1px;
  height: var(--space-lg);
  margin-inline: auto;
  background: linear-gradient(to bottom, rgba(143, 14, 24, 0), var(--color-brand));
}

.chain__link::after,
.chain__leg::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  border-top: 0.375rem solid var(--color-signal);
}

.chain__fork {
  position: relative;
  height: var(--space-xl);
}

.chain__fork span {
  position: absolute;
  background: var(--color-brand);
}

.chain__stem {
  left: 50%;
  top: 0;
  width: 1px;
  height: 45%;
  background: linear-gradient(to bottom, rgba(143, 14, 24, 0), var(--color-brand));
}

.chain__bar,
.chain__leg--r {
  display: none;
}

.chain__leg {
  top: 45%;
  left: 50%;
  width: 1px;
  height: 55%;
}

@media (min-width: 48rem) {
  .chain__row--2 {
    grid-template-columns: 1fr 1fr;
  }

  .node--wide {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    align-items: center;
  }

  /* Een schakel zonder beeld heeft die beeldkolom niet nodig. */
  .node--plain {
    grid-template-columns: minmax(0, 1fr);
  }

  .node--half {
    justify-items: center;
    text-align: center;
  }

  .node--half .node__note,
  .node--half .node__items {
    text-align: left;
  }

  .chain__link--stapel {
    display: none;
  }

  .chain__bar {
    display: block;
    left: 25%;
    right: 25%;
    top: 45%;
    height: 1px;
  }

  .chain__leg--l {
    left: 25%;
  }

  .chain__leg--r {
    display: block;
    left: 75%;
  }
}

/* ---------- Concept: nog niet officieel ---------- */

/* Geen kader en geen arcering meer: de aankondiging draagt zichzelf. Het label
   zegt wat er komt, de beelden staan eronder maar zijn niet te lezen. */
.draft {
  margin-top: var(--space-lg);
  text-align: center;
}

.draft__badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: var(--color-brand);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-radius: var(--radius);
}

.draft__content {
  margin-top: var(--space-lg);
  pointer-events: none;
  user-select: none;
}

/* De waas zit op het beeld zelf, niet op het blok: onscherp en gedempt, zodat
   te zien is dát er materiaal is zonder dat iemand het kan gebruiken. Het
   kader eromheen blijft scherp, anders vervaagt de vorm mee. */
.draft__content .card__media img {
  filter: blur(0.75rem) grayscale(0.4) brightness(0.72);
  transform: scale(1.12); /* de blur vreet aan de randen; dit dekt ze af */
}

/* ---------- Live / dates ---------- */

.dates-empty {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  border: 1px solid rgba(94, 100, 108, 0.28);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.dates-empty p {
  color: var(--color-muted);
  margin: var(--space-sm) auto 0;
  max-width: 40ch;
}

.form {
  display: grid;
  gap: var(--space-md);
  max-width: 52rem;
  margin: var(--space-lg) auto 0;
  text-align: left;
}

@media (min-width: 48rem) {
  .form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.field label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
}

/* De randen dragen het merkrood: rustig in ruststand, feller zodra je er bent. */
.field input,
.field select,
.field textarea {
  padding: 0.875rem 1rem;
  min-height: 3rem;
  background: var(--color-surface);
  border: 1px solid rgba(208, 24, 37, 0.7);
  border-radius: var(--radius);
  color: var(--color-text);
  transition: border-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-signal);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-signal);
  box-shadow: 0 0 0 0.1875rem rgba(143, 14, 24, 0.3);
  outline: none;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-steel);
}

.form__note {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.channels {
  max-width: 52rem;
  border-top: 1px solid rgba(94, 100, 108, 0.3);
  margin: var(--space-lg) auto 0;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid rgba(94, 100, 108, 0.25);
  padding-block: var(--space-lg) var(--space-md);
  text-align: center;
}

.footer__line {
  font-family: var(--font-display);
  font-style: var(--display-schuin);
  font-weight: 800;
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
}

/* Een logo midden in een tekstregel: de 43 in de voettekst en in de titel van
   About. Zelfde opzet als in de hero: het logo is hoger dan de letters, en de
   negatieve marges houden de regel op zijn eigen hoogte. */
.tekstlogo {
  display: inline-block;
  height: 1.45em;
  width: auto;
  max-width: none;
  margin-block: -0.375em;
  margin-inline: -0.08em;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.footer__nav a[aria-current='page'] {
  border-color: var(--color-signal);
}

/* Alles op één regel: twee navigatieknoppen, streep, de socials, streep, de
   andere twee knoppen. Dat scheelt de footer een hele rij hoogte. De nav zelf
   verdwijnt uit de layout met display: contents, zodat zijn knoppen directe
   deelnemers aan deze rij worden en links en rechts verdeeld kunnen staan;
   als navigatie blijft hij gewoon bestaan. */
.footer__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  /* Zonder grens duwen de strepen de knoppen naar de buitenranden van de
     pagina en valt het blok uit elkaar. */
  max-width: 58rem;
  margin-inline: auto;
}

.footer__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(94, 100, 108, 0.55), transparent);
}

@media (min-width: 62rem) {
  .footer__nav {
    display: contents;
  }

  .footer__nav a:nth-child(1) { order: 1; }
  .footer__nav a:nth-child(2) { order: 2; }
  .footer__row .footer__rule:first-of-type { order: 3; }
  .footer__socials { order: 4; }
  .footer__row .footer__rule:last-of-type { order: 5; }
  .footer__nav a:nth-child(3) { order: 6; }
  .footer__nav a:nth-child(4) { order: 7; }
}

/* Smaller dan dat past die regel niet: dan staan de socials boven de knoppen
   en vervallen de strepen, want daar blijft geen zinnige lengte voor over. */
@media (max-width: 61.99rem) {
  .footer__row {
    flex-direction: column;
    gap: var(--space-md);
  }

  .footer__socials {
    order: 1;
  }

  .footer__nav {
    order: 2;
  }

  .footer__rule {
    display: none;
  }
}

.footer__follow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.footer__socials a {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--color-signal);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  transition: color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
}

.footer__socials svg {
  width: 1.375rem;
  height: 1.375rem;
}

.footer__socials a:hover {
  color: var(--color-text);
  border-color: var(--color-signal);
  background: var(--color-brand);
  transform: translateY(-0.125rem);
}

.footer__legal {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--color-steel);
}

.footer__legal a:hover {
  color: var(--color-muted);
}

/* ---------- Scroll animaties ---------- */

/* Alleen verbergen als JS daadwerkelijk draait (app.js zet .js op <html>).
   Faalt het script, dan staat de content er gewoon in plaats van onzichtbaar. */

/* Geen zachte fade maar een wipe: het blok wordt van onderaf vrijgegeven en
   klikt op zijn plek.

   In rust wordt er alleen met doorzichtigheid verborgen, niet met clip-path of
   een schaal. Die twee verkleinen namelijk het vlak dat de browser van het
   element ziet, en dan meldt de waarnemer die de animatie moet starten nooit
   dat het in beeld staat: het blok houdt zichzelf onzichtbaar. Doorzichtigheid
   telt daar niet in mee, dus het knippen zit in de animatie zelf. */
.js [data-reveal] {
  opacity: 0;
}

/* Een scan trekt horizontaal over het blok en laat het achter, met twee korte
   haperingen alsof het signaal even wegvalt. Bewust een andere beweging dan de
   hero: daar valt alles van boven naar beneden, hier komt het van opzij.

   In rust wordt er alleen met doorzichtigheid verborgen, niet met clip-path of
   een schaal. Die twee verkleinen namelijk het vlak dat de browser van het
   element ziet, en dan meldt de waarnemer die de animatie moet starten nooit
   dat het in beeld staat: het blok houdt zichzelf onzichtbaar. Doorzichtigheid
   telt daar niet in mee, dus het knippen zit in de animatie zelf. */
.js [data-reveal].is-visible {
  animation: reveal-scan 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes reveal-scan {
  0% {
    opacity: 0;
    /* De uitloop ver buiten het element voorkomt dat gloed en schaduw eromheen
       tijdens de beweging worden afgesneden. */
    clip-path: inset(-30% 100% -30% -30%);
    transform: translateX(-2.5rem) skewX(-5deg);
  }

  28% {
    opacity: 1;
  }

  30% {
    opacity: 0.3;
  }

  35% {
    opacity: 1;
  }

  58% {
    clip-path: inset(-30% 24% -30% -30%);
  }

  60% {
    opacity: 0.55;
  }

  66% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    clip-path: inset(-30% -30% -30% -30%);
    transform: none;
  }
}

/* ---------- Toegankelijkheid ---------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 200;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.skip-link:focus {
  top: var(--space-xs);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Page transition */
body {
  animation: fade-in 400ms var(--ease) both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* Ook de vertragingen: zonder dit staat de hero nog steeds letter voor
       letter te wachten, alleen zonder beweging. */
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    animation: none;
  }

  .hero__teken,
  .hero__eyebrow,
  .hero__line,
  .hero__inner .btn-row,
  .hero__scroll {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .hero__eyebrow {
    letter-spacing: 0.4em;
  }

  .hero__flits {
    display: none;
  }

  .fx span {
    animation: none;
  }

  .hero__media img {
    opacity: 0.85;
    transform: scale(1.06);
  }

  .hero__beam,
  .hero__fog {
    animation: none;
  }
}