/*
  stamp-note — de gestempelde mededeling.

  Twee kolommen: tekst links, stempel rechts. Dat is geen decoratieve keuze —
  het vult de rechterhelft die bij elke tekstsectie op deze site leeg bleef, en
  het geeft de boodschap een vaste plek in het beeld.
*/

/* Familie A (§3): verticaal ritme op de sectie, goot op de inner. */
.bsc-note {
  padding: var(--block-y, 64px) 0;
  background: var(--surface-page);
  color: var(--text-body);
}

.bsc-note__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
}

/*
  Het vel. Altijd crème, ook in een nachtband: dit is papier, net als het
  ticket en de sighting-stub.
*/
.bsc-note__sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7) var(--space-7) var(--space-7) calc(var(--space-7) + 18px);
  background: var(--bsc-paper-100);
  color: var(--bsc-navy-900);
  border: var(--border-3) solid var(--bsc-navy-900);
  /* Contentkaart (§1). */
  border-radius: var(--radius-card);
  /*
    Geel en niet --shadow-hard. Dat token volgt --border-outline en is op een
    nachtband gelijk aan de paginakleur, dus onzichtbaar. Dit blok is bovendien
    het attentiestuk van zijn pagina; geel is precies waarvoor
    --shadow-hard-yellow bestaat.
  */
  box-shadow: var(--shadow-hard-yellow, 5px 5px 0 var(--bsc-yellow-500));
}

/* Halftone: hetzelfde papierraster als de rest van de crème objecten. */
.bsc-note__sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(var(--bsc-paper-300) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .6;
}

/* De hazard-strook langs de linkerrand — de ruggengraat van de Standwand. */
.bsc-note__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  /* Volgt de binnenkant van de 12px-hoek. */
  border-radius: 9px 0 0 9px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bsc-yellow-500) 0 12px,
    var(--bsc-navy-900) 12px 24px
  );
}

.bsc-note__body {
  position: relative;
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
}

.bsc-note__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--bsc-navy-900);
  text-wrap: balance;
}

.bsc-note__text {
  font: var(--weight-regular) var(--text-md) / 1.65 var(--font-ui);
  color: var(--bsc-navy-900);
}

.bsc-note__text p { margin: 0 0 var(--space-4); }
.bsc-note__text > :last-child { margin-bottom: 0; }

/*
  Links staan hier op crème terwijl de sectie eromheen nacht is. De globale
  --link is dan geel (1,4:1 op crème), dus die moet hier om.
*/
.bsc-note__text a {
  color: var(--bsc-navy-700);
  text-underline-offset: .18em;
}

.bsc-note__text a:hover,
.bsc-note__text a:focus-visible {
  color: var(--bsc-navy-900);
}

/* ── De stempel ────────────────────────────────────────────────────────── */

/*
  Dubbele rand en een lichte draai. Geen opacity-truc om 'gebruikte inkt' te
  spelen: dat kost contrast, en navy op crème is met 13,5:1 juist de reden dat
  deze stempel ook op een telefoon in de zon leesbaar blijft.
*/
.bsc-note__stamp {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
  border: var(--border-3) solid var(--bsc-navy-900);
  outline: var(--border-1) solid var(--bsc-navy-900);
  outline-offset: 4px;
  /* Papieren object (§1). */
  border-radius: var(--radius-sm);
  transform: rotate(-8deg);
  color: var(--bsc-navy-900);
  text-align: center;
}

.bsc-note__stamp-main {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bsc-note__stamp-sub {
  font: var(--weight-bold) 10px / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ── Onder tablet: stempel boven de tekst ──────────────────────────────── */
@media screen and (max-width: 768px) {
  .bsc-note__sheet {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-6);
  }

  /* De stempel eerst: hij is de samenvatting, en boven de tekst leest dat
     als een opschrift in plaats van als een naschrift. */
  .bsc-note__stamp {
    order: -1;
  }
}

@media screen and (max-width: 600px) {
  /* Contentblok: 64 desktop → 40 mobiel (§4). */
  .bsc-note {
    padding: var(--block-y, 40px) 0;
  }

  .bsc-note__inner {
    padding: 0 var(--gutter-x, 20px);
  }

  .bsc-note__sheet {
    padding: var(--space-6) var(--space-5) var(--space-6) calc(var(--space-5) + 14px);
  }

  .bsc-note__rail {
    width: 14px;
  }

  /*
    De draai kost aan weerszijden ruimte. Op 390px staat de stempel links
    uitgelijnd tegen de goot, en dan duwt die draai hem eroverheen.
  */
  .bsc-note__stamp {
    transform: rotate(-4deg);
    margin-left: var(--space-2);
  }
}