/* ============================================================
   Hinze Group v8 - vormgeving
   Eén scherm. Een zwart-witfoto (of een bewegende muur met
   Keytone-hoezen) over de hele breedte, linksonder de zin
   "Investing in music, publishing and real estate", en onderin
   de vier bedrijven; de kleuren van de zin lichten daar ook op.
   Kleuren en letters staan hieronder bij elkaar.
   ============================================================ */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/jetbrains-mono-normal.woff2') format('woff2'); }

/* nodig voor het openschuiven met balken (zoals bij Sony Music) */
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

:root {
  /* zwart en grijs */
  --black: #0c0c0c;
  --text: #ece8df;                       /* gebroken wit */
  --soft: rgba(236, 232, 223, .62);
  --line: rgba(236, 232, 223, .14);

  /* gedempte accentkleuren, één per bedrijf (ook in de zin links) */
  --red: #c8312f;      /* music - Intimate */
  --rust: #c7652e;     /* real estate - C&B Ventures */
  --ochre: #c9a13f;    /* publishing - Bright Books */
  --indigo: #6f63d6;   /* music, catalog, sync - Hinze Music Group */

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --gutter: 20px;
  --ticker-h: 32px;
  --ease: cubic-bezier(.16, .84, .24, 1);
}
@media (min-width: 800px) { :root { --gutter: 36px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--black); color: var(--text);
  font-family: var(--sans); font-size: 18px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* fijne korrel over alles (zonder mengmodus, dat scheelt rekenwerk) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--text); color: var(--black); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--text); color: var(--black); padding: 10px 16px; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.arrow { display: inline-block; transition: transform .3s var(--ease); }
a:hover .arrow { transform: translate(3px, -3px); }

/* ---------- balk bovenin (loopt altijd door) ---------- */
.ticker { background: #000; color: var(--soft); overflow: hidden; height: var(--ticker-h); position: relative; z-index: 61; border-bottom: 1px solid var(--line); }
.ticker:empty { display: none; }
.ticker__track { display: flex; width: max-content; animation: ticker 200s linear infinite; }
.ticker__half { display: flex; flex: none; }
.ticker__item { flex: none; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; line-height: var(--ticker-h); padding-right: 30px; }
.ticker__item::before { content: '\25A0'; color: var(--text); margin-right: 30px; font-size: 9px; vertical-align: 1px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- intro: horizontale balken schuiven weg (alleen eerste bezoek) ---------- */
.intro { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-rows: repeat(8, 1fr); pointer-events: none; }
.intro span { background: var(--black); transition: transform .9s var(--ease); }
.intro span:nth-child(2) { transition-delay: .05s; } .intro span:nth-child(3) { transition-delay: .1s; }
.intro span:nth-child(4) { transition-delay: .15s; } .intro span:nth-child(5) { transition-delay: .2s; }
.intro span:nth-child(6) { transition-delay: .25s; } .intro span:nth-child(7) { transition-delay: .3s; }
.intro span:nth-child(8) { transition-delay: .35s; }
.intro.is-done span:nth-child(odd) { transform: translateX(-101%); }
.intro.is-done span:nth-child(even) { transform: translateX(101%); }

/* ---------- indeling: de foto over het hele scherm; de bedrijven onderin (computer) of eronder (telefoon) ---------- */
.page { position: relative; display: grid; grid-template-areas: "hero" "tiles"; }
@media (min-width: 900px) {
  .page {
    grid-template-rows: 1fr auto;
    min-height: calc(100vh - var(--ticker-h));
    min-height: calc(100svh - var(--ticker-h));
    overflow: clip;
  }
}

/* ---------- over de foto: de zin onderin (vlak boven de lijn) en de pijltjes in het midden ---------- */
.hero { grid-area: hero; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 76svh; padding: 26px var(--gutter) 18px; }
@media (min-width: 900px) { .hero { position: static; min-height: 0; padding: clamp(24px, 4.5vh, 48px) var(--gutter) clamp(14px, 2.2vh, 20px); } }

/* de foto ligt achter alles en vult het hele scherm; alleen onderin een zachte schaduw, zodat de zin
   en de bedrijven leesbaar blijven (op de telefoon loopt hij onderaan over in zwart) */
.hero__media, .hero__shade { position: absolute; inset: 0; z-index: -1; }
.hero__media { overflow: hidden; background: var(--black); }
.hero__shade { z-index: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 45%, rgba(12, 12, 12, .6) 78%, var(--black) 100%); }
@media (min-width: 900px) {
  .hero__media { z-index: 0; }
  .hero__shade { z-index: 1; background: linear-gradient(to top, rgba(12, 12, 12, .9) 0%, rgba(12, 12, 12, .62) 20%, rgba(12, 12, 12, .2) 42%, transparent 58%); }
}
/* tekst en knoppen altijd boven de foto en de schaduw */
.hero > .logo, .hero > .hero__text { position: relative; z-index: 2; }

/* één foto (of muur). Nieuwe foto verschijnt door horizontale balken; daarna gaat het masker eraf */
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.slide.is-current, .slide.is-leaving { visibility: visible; }
.slide.is-current { opacity: 1; z-index: 2; -webkit-mask-image: linear-gradient(#000 var(--p), transparent var(--p)); mask-image: linear-gradient(#000 var(--p), transparent var(--p)); -webkit-mask-size: 100% 64px; mask-size: 100% 64px; animation: blinds 1.5s var(--ease) both; }
.slide.is-current.is-shown { -webkit-mask-image: none; mask-image: none; animation: none; }
.slide.is-leaving { opacity: 1; z-index: 1; }
@keyframes blinds { from { --p: 0%; } to { --p: 100%; } }
.slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.8); }
.slide.is-current .slide__img, .slide.is-leaving .slide__img { animation: slow-zoom var(--dur, 12s) linear both; }
/* een vertrekkende foto blijft staan zoals hij was (hij springt niet terug terwijl de volgende verschijnt) */
.slide.is-leaving .slide__img { animation-play-state: paused; }
/* muren die niet in beeld zijn staan stil; dat scheelt rekenwerk */
.slide:not(.is-current):not(.is-leaving) .ring, .slide:not(.is-current):not(.is-leaving) .cols__col, .slide:not(.is-current):not(.is-leaving) .floor__grid { animation-play-state: paused; }
/* left: true = de foto blijft aan de linkerkant, zodat het onderwerp niet achter de blokken valt
   (met position schuif je het onderwerp dan naar links, bv. "85% center") */
@media (max-width: 899px) { .slide--left .slide__img { object-position: center !important; } }
@media (min-width: 900px) { .slide--left .slide__img { width: 78%; -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%); mask-image: linear-gradient(to right, #000 62%, transparent 100%); } }
/* foto's met color: true houden hun kleur (de rode Paradiso-foto's springen er zo uit) */
.slide__img.is-color { filter: contrast(1.05) brightness(.84) saturate(.95); }
@keyframes slow-zoom { from { transform: scale(1.03); } to { transform: scale(1.11); } }

/* ---------- de muren met Keytone-hoezen (de hoezen zijn al zwart-wit) ---------- */
.slide--wall { background: radial-gradient(70% 70% at 50% 42%, #1c1c1c, var(--black) 75%); }
.slide--wall::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(12, 12, 12, .34); }
.wall { position: absolute; inset: 0; overflow: hidden; --cover: min(9.4vw, 15vh); --gap: 26px; }
@media (max-width: 899px) { .wall { --cover: 21vw; --gap: 16px; } }
/* op de computer schaalt de diepte mee met de hoezen, zodat een muur op een groot scherm er hetzelfde uitziet
   als op een laptop (anders wordt de voorkant van de ring te groot en valt de bovenkant weg) */
@media (min-width: 900px) {
  .wall.wall--ring { perspective: calc(var(--cover) * 8.15); }
  .wall.wall--columns { perspective: calc(var(--cover) * 8.9); }
  .wall.wall--floor { perspective: calc(var(--cover) * 5.2); }
}
.wall img { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); }

/* 1. ring: een draaiende cilinder (zoals capitolrecords.com) */
.wall--ring { perspective: 1100px; perspective-origin: 50% 40%; }
.ring__tilt { position: absolute; left: 50%; top: 44%; transform-style: preserve-3d; transform: rotateX(7deg) rotateZ(-5deg); }
.ring {
  --n: 13; --r: calc(var(--n) * (var(--cover) + var(--gap)) / 6.2832);
  position: absolute; left: calc(var(--cover) / -2); top: calc(var(--cover) / -2 + var(--row, 0) * (var(--cover) + 30px));
  width: var(--cover); height: var(--cover); transform-style: preserve-3d; will-change: transform;
  animation: ring 80s linear infinite;
}
.ring:nth-child(1) { --row: -1; animation-duration: 90s; }
.ring:nth-child(2) { --row: 0; --start: 14deg; animation-duration: 74s; }
.ring:nth-child(3) { --row: 1; --start: 7deg; animation-duration: 100s; }
@keyframes ring { from { transform: rotateY(var(--start, 0deg)); } to { transform: rotateY(calc(var(--start, 0deg) - 360deg)); } }
.ring__cover { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); }

/* 2. kolommen: schuin geplaatste rijen hoezen die op en neer schuiven */
.wall--columns { perspective: 1200px; perspective-origin: 50% 40%; }
/* door het draaien komt de rechterkant dichterbij (groter); daarom staat het geheel iets naar links, zodat het in het midden oogt */
/* elke kolom bestaat uit twee gelijke helften en schuift één helft op; het midden van de eerste helft staat in het
   midden van het beeld (translate -25% en transform-origin 25%), zo is het scherm altijd vol, zonder gaten */
.cols { position: absolute; left: calc(50% - var(--cover) * .78); top: 46%; display: flex; gap: var(--gap); transform-origin: 50% 25%; transform: translate(-50%, -25%) rotateX(18deg) rotateY(-16deg) rotateZ(-12deg); }
.cols__col { flex: none; width: var(--cover); display: flex; flex-direction: column; gap: var(--gap); will-change: transform; animation: col-up 70s linear infinite; }
.cols__col:nth-child(even) { animation-name: col-down; animation-duration: 84s; }
.cols__col img { height: var(--cover); }
@keyframes col-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--gap) / 2)); } }
@keyframes col-down { from { transform: translateY(calc(-50% - var(--gap) / 2)); } to { transform: translateY(0); } }

/* 3. vloer: hoezen liggen op een vloer tot aan de horizon en schuiven naar je toe */
.wall--floor { perspective: 700px; perspective-origin: 50% 0%; }
.wall--floor::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(var(--black) 6%, rgba(12, 12, 12, .6) 30%, transparent 55%); }
.floor { position: absolute; left: 50%; top: 16%; transform: translateX(-50%) rotateX(64deg); transform-origin: 50% 0; }
.floor__grid { display: grid; grid-template-columns: repeat(9, var(--cover)); gap: var(--gap); will-change: transform; animation: floor 46s linear infinite; }
.floor__grid img { height: var(--cover); }
@keyframes floor { from { transform: translateY(calc(-50% - var(--gap) / 2)); } to { transform: translateY(0); } }

/* ---------- monogram linksboven (staat uit: showLogo in js/config.js) ---------- */
.logo { display: inline-flex; align-self: flex-start; margin-bottom: auto; font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: .02em; }
/* de H kleurt mee met het woord dat oplicht */
.logo__h { color: var(--dot, var(--text)); transition: color .6s ease; }
.logo[data-hl="music"] { --dot: var(--red); }
.logo[data-hl="publishing"] { --dot: var(--ochre); }
.logo[data-hl="estate"] { --dot: var(--rust); }
.logo[data-hl="catalog"] { --dot: var(--indigo); }

/* ---------- de naam: groot en rustig ---------- */
.hero__text { margin-top: auto; }
.name { --scale: 1; font-weight: 400; font-stretch: 100%; letter-spacing: -.04em; line-height: .88; font-size: calc(clamp(56px, 18vw, 120px) * var(--scale)); }
@media (min-width: 900px) { .name { font-size: calc(clamp(64px, min(9.2vw, 17vh), 172px) * var(--scale)); } }
/* de letter van de naam: kies in js/config.js bij titleFont (de nummers horen bij het vergelijkingsblad) */
.font-serif .name        { font-family: 'Instrument Serif', Georgia, serif; letter-spacing: -.015em; line-height: .86; --scale: 1.2; }        /* 1 */
.font-bodoni .name       { font-family: 'Bodoni Moda', Didot, Georgia, serif; font-weight: 500; letter-spacing: -.02em; line-height: .92; --scale: 1.02; } /* 2 */
.font-gloock .name       { font-family: 'Gloock', Georgia, serif; letter-spacing: -.02em; line-height: .92; }                                /* 3 */
.font-fraunces .name     { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-variation-settings: 'SOFT' 100, 'opsz' 144; letter-spacing: -.03em; line-height: .92; } /* 4 */
.font-dmserif .name      { font-family: 'DM Serif Display', Georgia, serif; letter-spacing: -.01em; line-height: .92; }                     /* 5 */
.font-italiana .name     { font-family: 'Italiana', Georgia, serif; text-transform: uppercase; letter-spacing: .08em; line-height: 1.04; --scale: .86; } /* 6 */
.font-syne .name         { font-family: 'Syne', var(--sans); font-weight: 700; letter-spacing: -.03em; line-height: .92; --scale: .9; }        /* 7 */
.font-unbounded .name    { font-family: 'Unbounded', var(--sans); letter-spacing: -.02em; line-height: .95; --scale: .76; }                     /* 8 */
.font-wide .name         { font-stretch: 125%; font-weight: 300; text-transform: uppercase; letter-spacing: .08em; line-height: 1.05; --scale: .6; } /* 9 */
.font-bigshoulders .name { font-family: 'Big Shoulders Display', var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: .88; --scale: 1.12; } /* 10 */
.font-heavy .name        { font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .92; --scale: .7; } /* 12 */
.name__line { display: block; }
.lead { max-width: 24em; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.4; color: rgba(236, 232, 223, .9); }
.name:not(.visually-hidden) + .lead { margin-top: clamp(14px, 2.4vh, 26px); }
.lead mark { color: inherit; padding: 0 .1em; margin: 0 -.1em; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / 0% 100%; transition: background-size .5s var(--ease), color .3s; }
.lead mark[data-field="music"] { --hl: var(--red); }
.lead mark[data-field="publishing"] { --hl: var(--ochre); }
.lead mark[data-field="estate"] { --hl: var(--rust); }
.lead mark.is-on { background-size: 100% 100%; color: #fff; }
.lead mark[data-field="publishing"].is-on { color: var(--black); }

/* ---------- pijltjes links en rechts in het midden ----------
   onzichtbaar tot de muis in de buurt komt (js: is-near) of je met Tab erop komt.
   Op een aanraakscherm geen pijltjes: daar veeg je over de foto. */
.hero__arrow {
  position: absolute; z-index: 3; top: 50%; width: 52px; height: 52px; margin-top: -26px;
  display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid rgba(236, 232, 223, .5); background: rgba(12, 12, 12, .45); color: var(--text); cursor: pointer;
  opacity: 0; transition: opacity .45s ease, transform .45s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.hero__arrow--prev { left: var(--gutter); transform: translateX(-8px); }
.hero__arrow--next { right: var(--gutter); transform: translateX(8px); }
.hero__arrow.is-near, .hero__arrow:focus-visible { opacity: 1; transform: none; }
.hero__arrow:hover { background: var(--text); border-color: var(--text); color: var(--black); }
.hero__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
@media (hover: none), (pointer: coarse), (pointer: none) { .hero__arrow { display: none; } }

/* ---------- de vier bedrijven ----------
   telefoon: kaartjes onder de foto.
   computer: één rustige rij onderin over de foto, gescheiden door dunne lijntjes (zoals een index),
   met bovenlangs de lijn die laat zien wanneer de volgende foto komt */
.companies { grid-area: tiles; position: relative; z-index: 2; display: grid; gap: 10px; padding: 0 var(--gutter) 34px; }

/* de lijn van de foto's: vult zich, en loopt aan het eind zacht weg */
.progress { position: relative; height: 1px; margin-bottom: 4px; background: var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); }
.progress span { position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: left center; }
.progress span.is-running { animation: progress var(--d, 6.5s) linear forwards; }
@keyframes progress { 0% { transform: scaleX(0); opacity: 1; } 88% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

.company {
  --accent: var(--text); --on-accent: #fff;
  position: relative; display: block; padding: 14px 46px 15px 16px; color: var(--text);
  background: rgba(236, 232, 223, .03);
  border: 1px solid rgba(236, 232, 223, .16);
  transition: background-color .4s ease, border-color .4s ease, opacity .8s ease, transform .8s var(--ease);
}
.company--intimate { --accent: var(--red); }
.company--ventures { --accent: var(--rust); }
.company--books { --accent: var(--ochre); --on-accent: var(--black); }
.company--musicgroup { --accent: var(--indigo); }
/* iets lichter als je erover gaat */
.company:hover, .company:focus-visible { background: rgba(236, 232, 223, .08); border-color: rgba(236, 232, 223, .34); }

.company__field { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; word-spacing: -.45em; text-transform: uppercase; color: var(--soft); }
.company__field::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--accent); }
.company__name { font-weight: 400; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(20px, 1.6vw, 26px); }
/* dezelfde kleurbalk als bij de woorden links */
.company__hl { padding: 0 .08em; margin: 0 -.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 0% 100%; transition: background-size .6s var(--ease), color .3s ease; }
.company.is-lit .company__hl, .company:hover .company__hl { background-size: 100% 100%; color: var(--on-accent); }
/* de punt van "Intimate." in het rood (wit zodra de naam rood oplicht) */
.company__dot { color: var(--red); transition: color .3s ease; }
.company.is-lit .company__dot, .company:hover .company__dot { color: inherit; }
/* pijltje rechtsboven bij bedrijven met een website */
.company__go { position: absolute; top: 14px; right: 16px; font-family: var(--mono); font-size: 15px; line-height: 1; color: var(--soft); transition: color .3s, transform .3s var(--ease); }
.company:not([href]) .company__go { display: none; }
.company:hover .company__go { color: var(--text); transform: translate(2px, -2px); }

@media (min-width: 900px) {
  .companies { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0 calc(var(--gutter) - 18px) clamp(12px, 2.2vh, 22px); }
  .progress { grid-column: 1 / -1; margin: 0 18px; }
  .company { padding: clamp(14px, 2.2vh, 20px) 44px clamp(12px, 2vh, 18px) 18px; background: transparent; border: 0; border-left: 1px solid var(--line); }
  .company:first-of-type { border-left-color: transparent; }
  .company:hover, .company:focus-visible { background: rgba(236, 232, 223, .06); }
  .company__go { top: clamp(14px, 2.2vh, 20px); right: 18px; }
}
/* smalle computerschermen (900 - 1099 px breed): iets compacter, zodat "Hinze Music Group" en
   "Music, catalog, sync" op één regel blijven */
@media (min-width: 900px) and (max-width: 1099px) {
  .companies { padding-left: calc(var(--gutter) - 14px); padding-right: calc(var(--gutter) - 14px); }
  .progress { margin: 0 14px; }
  .company { padding-left: 14px; padding-right: 30px; }
  .company__go { right: 12px; }
  .company__field { font-size: 10.5px; letter-spacing: .1em; }
  .company__name { font-size: 18px; }
}

/* ---------- binnenkomen ---------- */
.js .logo, .js .lead { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s var(--ease); }
.js .name__line { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1.1s var(--ease); }
.js .name__line + .name__line { transition-delay: .1s; }
.js .is-in .name__line, .js .is-in .logo, .js .is-in .lead { opacity: 1; transform: none; }
.js .is-in .lead { transition-delay: .25s; }
.js .company { opacity: 0; transform: translateY(14px); }
.js .company.is-visible { opacity: 1; transform: none; }

/* ---------- 404-pagina ---------- */
.nf { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 4.5vh, 48px) var(--gutter) clamp(28px, 6vh, 64px); background: radial-gradient(80% 70% at 30% 40%, #1a1a1a, var(--black) 70%); }
.nf__code { margin-bottom: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: var(--soft); }
.nf__title { max-width: 16em; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -.02em; line-height: 1.1; }
.nf__back { display: inline-flex; gap: 10px; margin-top: 22px; font-size: 17px; padding-bottom: 3px; border-bottom: 1px solid rgba(236, 232, 223, .4); transition: border-color .3s; }
.nf__back:hover { border-color: var(--text); }

/* ---------- minder beweging gewenst ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .logo, .js .lead, .js .name__line, .js .company { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ticker__track, .ring, .cols__col, .floor__grid, .slide.is-current, .slide.is-current .slide__img { animation: none !important; }
  .intro { display: none; }
}