/*
  social-band — de Instagram-feed als zelfstandige sectie: FIELD / フィールド.

  Uitgeprinte telefoonschermen: een polaroid met een wit-crème rand, een stukje
  tape erover, en onder het beeld dezelfde sighting-stub die ook de beursflyers
  dragen. Dat is wat de twee banden nog verbindt nu ze niet meer op hetzelfde
  vel papier hangen.

  Dezelfde drie materiaalregels als de beursagenda, zodat het familie blijft:
    · harde offset-schaduw (papier op papier), nooit een zachte blur;
    · een kleine, VASTE rotatie per positie — niet random, want dan hangt hij
      bij elke verversing anders en leest het als een bug;
    · alleen wat écht klikbaar is beweegt bij hover.

  DE BAND STAAT OP NACHT (.bsc-night in de markup) en niet op crème. De
  beursagenda erboven is crème en de collectors-band eronder ook; drie crème
  banden achter elkaar lopen in elkaar over. Daarom staan hier bijna geen
  kleuren maar semantische tokens — die kantelen mee — behalve waar het motief
  zélf de kleur ís (de gele tape, de hazard-rail).
*/
/* ══════════════════════════════════════════════════════════════════════════
   DE SECTIESCHIL — .bsc-band
   ══════════════════════════════════════════════════════════════════════════

   Deze schil stond tot 2026-08-08 in dev/css/components/_standwand.scss en
   hoorde bij de Standwand: één band met drie zones (beurzen, partners, social).
   Die container is opgeheven — Duncan wilde de beursagenda als zelfstandige
   sectie en de feed als een apart blok, en partners helemaal weg. De band zelf
   was het sterke deel en is daarom mee verhuisd naar de blocks die hem nog
   gebruiken.

   HET STAAT BEWUST TWEE KEER. fair-agenda.css en social-band.css dragen elk
   hun eigen kopie, want beide blokken moeten los bruikbaar zijn zonder de CSS
   van de ander (dezelfde afweging als bij het flyer/print-motief). Wijzig je
   hier iets, wijzig het dan in béide bestanden.

   Familie A (§3): verticaal ritme op de sectie, goot op de inner.
*/

.bsc-band {
  position: relative;
  padding: var(--band-y, 96px) 0;
  /* De rails staan absoluut tegen de rand; overflow houdt ze binnen de band. */
  overflow: hidden;
  /* Eigen stapelcontext, zodat het halftone-raster op z-index -1 onder de
     inhoud blijft maar niet achter de sectie erboven wegzakt. */
  isolation: isolate;
  background: var(--surface-page);
  color: var(--text-body);
}

/*
  Halftone. Een radiaal puntraster op lage dekking geeft het vlak textuur zonder
  een afbeelding te kosten. `background-attachment` blijft bewust op de
  standaardwaarde: fixed geeft op iOS Safari een schokkerige scroll.

  De kleur komt uit --border-hairline en niet uit een vaste crèmewaarde: deze
  band staat nu ook op nacht (de socialband), en daar moet het raster meekantelen.
*/
.bsc-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--border-hairline) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .55;
}

/* ── De hazard-rail ────────────────────────────────────────────────────── */

/*
  Schuine geel/navy strepen, boven en onder de band. Absoluut gepositioneerd:
  in de normale flow zouden ze ná de band-padding beginnen en zweefde er een
  strook achtergrond bóven de bovenste rail — dan leest de band niet meer als
  één afgesloten vlak, precies wat de rail moest voorkomen.

  `--_rail` maakt de streepbreedte instelbaar zonder de gradient te herhalen.
*/
.bsc-band__rail {
  --_rail: 14px;

  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  /* De strepen zitten op het pseudo-element; deze doos is het venster waar de
     tape doorheen rolt. */
  overflow: hidden;
}

.bsc-band__rail:first-child { top: 0; }
.bsc-band__rail:last-child  { bottom: 0; }

.bsc-band__rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bsc-yellow-500) 0,
    var(--bsc-yellow-500) var(--_rail),
    var(--bsc-navy-900) var(--_rail),
    var(--bsc-navy-900) calc(var(--_rail) * 2)
  );
}

@media (prefers-contrast: more) {
  .bsc-band__rail { height: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MERKACCENT — DE TAPE DIE UITROLT
   ══════════════════════════════════════════════════════════════════════════

   Rolt de hazard-tape bij binnenkomst over de boven- en onderrand — bovenaan
   van links naar rechts, onderaan terug — dan zie je de band letterlijk
   afgezet worden voordat je hem leest.

   LET OP, DIT IS NU SLAPEND. dev/scripts/custom/reveal.js zet het attribuut
   [data-bsc-reveal] alleen op de selectors die in zijn eigen TAPE-lijst staan,
   en dat is nog '.bsc-standwand__rail' — een class die na de opheffing van de
   Standwand nergens meer gerenderd wordt. De regels hieronder werken dus pas
   zodra '.bsc-band__rail' in die lijst staat. Tot die tijd staat de tape er
   gewoon (de keyframe komt uit -100% náár de rustpositie, dus zonder JS is de
   rustpositie de enige staat) — er is geen zichtbare fout, alleen een gemiste
   beweging.
*/

/*
  Geen uitrollende tape meer.

  De hazard-rail rolde bij binnenkomst over de rand — een gele streep die de
  volle bandbreedte aflegde. Duncan: "de animaties van deze dingen is echt to
  much". Terecht: op een pagina met twee banden zag je hem vier keer, en een
  strook die 1280px aflegt trekt meer aandacht dan de inhoud erachter.

  De rail staat er nu gewoon. Dat is ook wat hazard-tape doet: het hángt er.
*/


/* ── Inner en kop ──────────────────────────────────────────────────────── */

.bsc-band__inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
  display: grid;
  gap: var(--space-6);
}

.bsc-band__head {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  max-width: 46ch;
}

/*
  De ruiter. Een omgevouwen papieren labeltje met een Latijnse code en het
  katakana-equivalent eronder.

  HIJ STAAT NU BOVEN DE KOP, OP DE PLEK VAN DE EYEBROW. In de Standwand hing hij
  ónder de kop als zonelabel — er waren drie zones onder één kop en hij zei welke
  je las. Met één zone per sectie zou dat twee labels boven dezelfde lijst
  opleveren die hetzelfde zeggen. Als eyebrow blijft het merksignaal staan en is
  de dubbeling weg. Zet hem niet terug onder de kop.
*/
.bsc-band__tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  /* Reset: dit is een <p> en zou anders de globale p-margin erven. */
  margin: 0;
  justify-self: start;
  padding: 7px 16px 6px;
  background: var(--bsc-navy-900);
  color: var(--bsc-yellow-500);
  /* Afgesneden hoek rechtsonder: een ruiter, geen knop. */
  clip-path: polygon(0 0, 100% 0, 100% 65%, calc(100% - 10px) 100%, 0 100%);
}

.bsc-band__tab-code {
  font: var(--weight-regular) 15px / 1 var(--font-display);
  letter-spacing: .04em;
}

.bsc-band__tab-ja {
  font: var(--weight-regular) 10px / 1 var(--font-mono);
  letter-spacing: .1em;
  /* Yellow-200 op navy-900 haalt ruim 4,5:1; yellow-500 zou hier te hard
     concurreren met de code ernaast. */
  color: var(--bsc-yellow-200);
}

.bsc-band__title {
  margin: 0;
  font: var(--weight-regular) clamp(34px, 5vw, 56px) / .95 var(--font-display);
  letter-spacing: -.01em;
  color: var(--text-strong);
  text-wrap: balance;
}

.bsc-band__intro {
  margin: 0;
  font: var(--weight-regular) var(--text-md) / 1.6 var(--font-ui);
  color: var(--text-muted);
}

/*
  DE MASTHEAD: kop links, intro rechts.

  Gestapeld op één kolom van 46ch is de goede vorm op een telefoon, maar op
  desktop laat het tweederde van de band leeg náást een kop die daardoor over
  drie regels valt. Vanaf 861px wordt de kop daarom een spread met een haarlijn
  eronder: ruiter en titel links, intro rechts, en dan begint de inhoud. De
  kolommen zijn 1fr en minmax(0, 42ch) — die tweede grens houdt de intro
  leesbaar in plaats van hem tot 600px op te rekken.

  Deze vorm komt uit de Standwand en is bewust meeverhuisd; hij was daar de
  oplossing voor vier identieke sectie-openingen onder elkaar op de homepage.
*/

/* Geldt op ÉLKE breedte: zonder deze regel valt de gap van de buitenste grid
   tussen de ruiter en de <h2> weg zodra ze in een eigen omhulling zitten. */
.bsc-band__head-main {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

@media screen and (min-width: 861px) {
  .bsc-band__head {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42ch);
    align-items: end;
    column-gap: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: var(--border-1) solid var(--border-hairline);
  }

  /* De intro lijnt met de onderkant van de titel uit, niet met de bovenkant. */
  .bsc-band__intro {
    padding-bottom: 6px;
  }
}

@media screen and (max-width: 600px) {
  .bsc-band__inner {
    gap: var(--space-5);
  }
}

/* ── Het blok ──────────────────────────────────────────────────────────── */

/*
  .bsc-veld staat op de SECTIE en is hier alleen nog een naamruimte-haak, geen
  layout. Dat is bewust.

  Er stond `display: grid; gap: var(--space-6)`. Dat kon in de Standwand, want
  daar zat deze class op een zone-<div> ín de wand. Nu staat hij op hetzelfde
  element als .bsc-band, en dan wordt .bsc-band__inner een grid-item. Gemeten
  gevolg op 500px: de inner kromp naar de breedte van zijn breedste kind (417px,
  de 46ch van de lege staat) en ging midden in de band hangen, terwijl de
  beursagenda ernaast gewoon de volle 390–500px vulde. Twee banden onder elkaar
  met een verschillende goot.

  De opbouw die deze class leverde zit al in .bsc-band__inner (display: grid met
  dezelfde gap), dus er is niets voor teruggekomen. Zet hier geen display op
  zonder na te gaan wat het met de inner doet.
*/

.bsc-veld__kanalen {
  display: grid;
  gap: var(--space-8);
}

/* ── De kop van een kanaal ─────────────────────────────────────────────── */

.bsc-veld__kanaal {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.bsc-veld__kop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-1) dashed var(--border-hairline);
}

/*
  De avatar als afgedrukte pasfoto: vierkant met een kleine radius en dezelfde
  harde rand als de prints. Bewust geen Instagram-verloopring — dat is hun
  merkteken, niet dat van deze wand.
*/
.bsc-veld__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 4px;
  background: var(--surface-card);
  border: var(--border-2) solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--border-outline);
}

.bsc-veld__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Het merkteken is geen foto; dat mag niet bijgesneden worden. */
.bsc-veld__avatar .bsc-logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.bsc-veld__wie {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.bsc-veld__kanaalnaam {
  font-size: 10px;
  color: var(--text-faint);
}

.bsc-veld__handle {
  font: var(--weight-extrabold) var(--text-lg) / 1.1 var(--font-ui);
  color: var(--text-strong);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Alleen een échte link krijgt linkgedrag; een handle zonder URL is een span. */
a.bsc-veld__handle:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a.bsc-veld__handle:focus-visible {
  outline: var(--border-3) solid var(--focus-ring);
  outline-offset: 3px;
  /* Papieren object → --radius-sm (§1). */
  border-radius: var(--radius-sm);
}

.bsc-veld__weergavenaam {
  font: var(--weight-medium) var(--text-sm) / 1.35 var(--font-ui);
  color: var(--text-muted);
}

/* ── Cijfers ───────────────────────────────────────────────────────────── */

/*
  Het bereik. Dit is het grootste getal in de kop en dat is opzet: het is het
  enige cijfer dat zegt hoeveel mensen dit werk daadwerkelijk voorbij zien
  komen. Volgers en posts staan eronder, kleiner, als context.

  Cijferbreedte via tabular-nums: het getal loopt in de tienduizenden en zonder
  vaste cijferbreedte springt de regel bij elke sync een paar pixels op.
*/
.bsc-veld__bereik {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  margin: var(--space-3) 0 0;
}

.bsc-veld__bereikgetal {
  font: var(--weight-black) clamp(28px, 3.6vw, 40px) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  /*
    Geel, het enige echte accent van dit merk, en op de nachtband het enige
    cijfer dat het krijgt. Het staat hier niet ter decoratie: het is de reden
    dat je dit blok aanklikt. --text-brand is elders op nacht al op contrast
    gecontroleerd; op crème zou dit token niet mogen, maar deze band is altijd
    nacht (zie de toelichting boven in social-band.php).
  */
  color: var(--text-brand);
}

.bsc-veld__bereiklabel {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  font: var(--weight-medium) 11px / 1.3 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Het venster is de kleine letter bij het grote getal — zonder dat venster is
   het cijfer betekenisloos, dus het mag niet weg, maar het hoeft ook geen
   aandacht te trekken. */
.bsc-veld__bereikvenster {
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
}

.bsc-veld__cijfers {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--space-4);
  margin: var(--space-2) 0 0;
}

.bsc-veld__cijfer {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font: var(--weight-medium) 11px / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.bsc-veld__cijfer b {
  font: var(--weight-bold) 18px / 1 var(--font-mono);
  color: var(--text-strong);
}

/*
  De peildatum bij een gecureerd cijfer. Gestippelde onderrand in plaats van
  een tweede badge: hij hoort bij het getal ernaast, hij is geen eigen label.
  Nooit alleen kleur — de tekst zegt "stand 3 aug", dus ook zonder de stippellijn
  is het verschil met een live cijfer leesbaar (WCAG 1.4.1).
*/
.bsc-veld__stand {
  font: var(--weight-medium) 11px / 1.2 var(--font-mono);
  letter-spacing: .06em;
  color: var(--text-muted);
  border-bottom: var(--border-1) dotted var(--border-strong);
  /* Een title-attribuut is een hint, geen bediening: de cursor mag dat zeggen. */
  cursor: help;
}

.bsc-veld__volg {
  margin-left: auto;
}

/* ── De prints ─────────────────────────────────────────────────────────── */

.bsc-veld__prints {
  list-style: none;
  margin: 0;
  /* Ruimte voor de rotatie, de tape en de offset-schaduw: zonder deze padding
     snijdt de overflow:hidden van .bsc-band de buitenste prints af. */
  padding: 10px 8px 14px;
  display: grid;
  /*
    Vaste kolomaantallen, geen auto-fill.

    Met auto-fill bepaalde de vensterbreedte hoeveel kolommen er kwamen, en dan
    is er geen enkel aantal posts dat altijd een volle rij oplevert: op 1440
    paste er vijf, dus zes items gaven 5 + 1 en die losse tegel las als een
    afgebroken rij.

    Nu staat het aantal kolommen vast op deelbare getallen — 4 / 3 / 2 — en
    toont het blok er standaard twaalf. Twaalf deelt door alle drie, dus elke
    rij is vol op elke breedte. Verander je het aantal posts, kies dan weer een
    veelvoud: 12, 8 of 4.

    Vier en niet zes: op een container van 1224px werd een tegel bij zes
    kolommen zo'n 185px breed, en daar past een foto met een bijschrift eronder
    niet fatsoenlijk in. Bij vier is het bijna 300px.

    min(100%, …) blijft nodig in de kolomdefinitie: zonder die 0-ondergrens
    weigert een grid-kolom smaller te worden dan zijn inhoud en breekt de band
    open op een smal scherm.
  */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
}

@media screen and (max-width: 900px) {
  .bsc-veld__prints {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bsc-veld__print {
  display: grid;
  min-width: 0;
}

/* Vier vaste standen; meer dan ±2gr en het onderschrift wordt lastig lezen. */
.bsc-veld__print--tilt0 .bsc-print { --_tilt: -1.2deg; --_tape: 4deg; }
.bsc-veld__print--tilt1 .bsc-print { --_tilt: 1.5deg;  --_tape: -6deg; }
.bsc-veld__print--tilt2 .bsc-print { --_tilt: -0.6deg; --_tape: -3deg; }
.bsc-veld__print--tilt3 .bsc-print { --_tilt: 1deg;    --_tape: 5deg; }

/*
  De polaroid. Ruime onderrand — dat is wat een afdruk een afdruk maakt en
  meteen de plek waar de stub en het onderschrift staan.
*/
.bsc-print {
  --_tilt: 0deg;
  --_tape: -4deg;

  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: var(--border-2) solid var(--border-strong);
  border-radius: var(--radius-sm);
  /* Harde offset, net als de stickers in zone 2: papier op papier, geen diepte. */
  box-shadow: 4px 4px 0 var(--border-outline);
  transform: rotate(var(--_tilt));
}

/* Hetzelfde stukje tape als op de flyers in zone 1. */
.bsc-print__tape {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 62px;
  height: 20px;
  transform: translateX(-50%) rotate(var(--_tape, -4deg));
  background: rgba(255, 208, 36, 0.62);
  border-left: var(--border-1) solid rgba(255, 208, 36, 0.9);
  border-right: var(--border-1) solid rgba(255, 208, 36, 0.9);
  z-index: 2;
  /* Zonder dit vangt de tape de klik op de bovenrand van de print op. */
  pointer-events: none;
}

/* ── Het beeld ─────────────────────────────────────────────────────────── */

.bsc-print__vlak {
  position: relative;
  /*
    display:block en niet grid.

    Met `grid` + `place-items: center` werd de <img> een gecentreerd grid-item
    dat zijn eigen intrinsieke maat mee mocht nemen; bij een niet-vierkante
    Instagram-foto liep hij daardoor buiten het vierkante vlak. Als blok vult
    de img gewoon zijn container (width/height 100% + object-fit hieronder) en
    blijft de foto netjes binnen het frame.

    De centrering is niet weg maar verhuisd naar de plaatshouder, want die is
    het enige kind dat hem écht nodig had.
  */
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface-sunken);
  border: var(--border-1) solid var(--border-hairline);
  color: inherit;
  text-decoration: none;
}

.bsc-print__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

/*
  Geen beeld? Dan het type in de displayletter, geen grijs vlak — dezelfde keuze
  als het woordmerk op een sticker zonder logo in zone 2. Een lege rechthoek
  leest als een ontbrekend bestand, een gezet woord als een keuze.
*/
.bsc-print__woord {
  /* Centreert zichzelf, nu het vlak eromheen een gewoon blok is. */
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font: var(--weight-regular) clamp(18px, 3vw, 26px) / 1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-faint);
}

/* ── De onderrand van de afdruk ────────────────────────────────────────── */

.bsc-print__voet {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

/* Het <time> om de stub mag de stub niet breder maken dan de print. */
.bsc-veld__wanneer {
  display: inline-flex;
  max-width: 100%;
}

.bsc-print__caption {
  margin: 0;
  font: var(--weight-regular) var(--text-sm) / 1.45 var(--font-ui);
  color: var(--text-muted);
  /* Twee regels; een langer onderschrift maakt van de afdruk een artikel. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.bsc-print__cijfers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  margin: 0;
  font: var(--weight-medium) 10px / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.bsc-print__cijfers b {
  font-weight: var(--weight-bold);
  font-size: 12px;
  color: var(--text-body);
}

.bsc-print__cijfer {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

/*
  Het hoofdcijfer is het bereik. Het verschil met de likes ernaast zit in
  grootte én kleur, en niet in kleur alleen — dat is de reden dat de likes
  een graad kleiner staan en niet enkel een tint zachter (WCAG 1.4.1).
*/
.bsc-print__cijfer--hoofd b {
  font-size: 16px;
  color: var(--text-strong);
}

/* De likes staan er als voetnoot bij; scheidingspunt in plaats van een tweede
   blok, zodat de regel als één zin leest. */
.bsc-print__cijfer--hoofd + .bsc-print__cijfer::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--text-faint);
}

/* ── Interactie ────────────────────────────────────────────────────────── */

/*
  HUISREGEL, en op deze site de belangrijkste: alleen een print mét een echte
  permalink krijgt een hover. Een post zonder link is een <span>, en die mag
  niets doen wat klikbaarheid suggereert — geen lift, geen zoom, geen cursor.
*/
.bsc-veld__print--linked .bsc-print {
  transition: transform var(--dur-base) var(--ease-snap), box-shadow var(--dur-base) var(--ease-snap);
}

.bsc-veld__print--linked:hover .bsc-print,
.bsc-veld__print--linked:focus-within .bsc-print {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--border-outline);
}

.bsc-veld__print--linked:hover .bsc-print__img {
  transform: scale(1.04);
}

/* Zichtbare focus op de link zelf: de lift hierboven is beweging en telt niet
   als focusindicator. Geel op crème haalt ruim de 3:1 van WCAG 2.2. */
.bsc-print__vlak:focus-visible {
  outline: var(--border-3) solid var(--focus-ring);
  outline-offset: 3px;
}

/*
  De uitleg bij het bereikcijfer. Klein en zacht: het is een voetnoot, geen
  boodschap. Maar hij staat er wél, want een getal zonder eenheid is geen getal.
*/
.bsc-veld__uitleg {
  margin: var(--space-6) 0 0;
  max-width: 62ch;
  font: var(--weight-regular) 12px / 1.6 var(--font-ui);
  color: var(--text-faint);
}

/* ── Herkomst ──────────────────────────────────────────────────────────── */

/*
  De regel die zegt waar dit vandaan komt. Klein maar niet weggemoffeld: dit is
  het verschil tussen een gemeten en een onthouden cijfer, en dat hoort leesbaar
  te zijn. --text-muted haalt op crème 7:1.
*/
.bsc-veld__herkomst {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font: var(--weight-medium) 11px / 1.4 var(--font-mono);
  letter-spacing: .06em;
  color: var(--text-muted);
}

.bsc-veld__scheiding {
  color: var(--text-faint);
}

.bsc-veld__herkomst .bsc-veld__tijd {
  cursor: help;
  border-bottom: var(--border-1) dotted var(--border-hairline);
}

/* ── Geen koppeling ────────────────────────────────────────────────────── */

/*
  Zelfde vorm als het lege briefje van de beursagenda, zodat de twee banden ook
  in hun lege toestand familie blijven: gestippelde rand, tape erboven, en een
  echte vervolgstap in plaats van een raster met placeholders.
*/
.bsc-veld__leeg {
  --_tape: -3deg;

  position: relative;
  max-width: 46ch;
  margin-top: 12px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--surface-card);
  border: var(--border-2) dashed var(--border-strong);
  color: var(--text-body);
}

.bsc-veld__leeg-kicker {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  color: var(--text-faint);
}

.bsc-veld__leeg-tekst {
  margin: 0;
  font: var(--weight-regular) var(--text-base) / 1.6 var(--font-ui);
}

.bsc-veld__leeg-acties {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
}

/* ── Smal ──────────────────────────────────────────────────────────────── */

@media screen and (max-width: 600px) {
  .bsc-veld__prints {
    /* Twee kolommen blijven leesbaar; drie persen het onderschrift plat. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }

  .bsc-veld__volg {
    margin-left: 0;
    width: 100%;
  }
}

/* ── Voorkeuren van de bezoeker ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bsc-veld__print--linked .bsc-print,
  .bsc-print__img {
    transition: none;
  }

  /* De rotatie blijft staan — dat is een statische vorm, geen beweging — maar
     hij mag niet meer verspringen bij hover. */
  .bsc-veld__print--linked:hover .bsc-print,
  .bsc-veld__print--linked:focus-within .bsc-print {
    transform: rotate(var(--_tilt));
  }

  .bsc-veld__print--linked:hover .bsc-print__img {
    transform: none;
  }
}

/* Scheve tekst is voor sommige lezers lastiger; bij een expliciete
   contrastvoorkeur zetten we de prints recht en verzwaren we de rand. */
@media (prefers-contrast: more) {
  .bsc-print {
    --_tilt: 0deg;
    border-width: var(--border-3);
  }

  .bsc-print__tape {
    display: none;
  }
}

/*
  Windows-contrastmodus vervangt alle kleuren; de gele tape wordt dan een
  betekenisloos blok en de gestippelde peildatum-onderrand verdwijnt. De tekst
  zelf draagt de betekenis al, dus dat mag.
*/
@media (forced-colors: active) {
  .bsc-print__tape {
    display: none;
  }

  .bsc-print {
    box-shadow: none;
  }
}