/* blckbox.sh
   Een pagina, twee talen, geen javascript. Huisstijl uit assets/brand/blckbox/BRAND.md.

   Twee dingen om niet per ongeluk terug te draaien:
   1. .wrap zet alleen padding-inline, de secties alleen padding-block. Een klasse wint
      van een elementselector, dus padding als shorthand op .wrap drukt het hele
      verticale ritme weg.
   2. Amber is accent, nooit een vlak. Dat is regel 7 in BRAND.md. De knop keert daarom
      om naar off-white, niet naar amber. */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/JetBrainsMono-Latin-400.woff2') format('woff2');
}

:root {
  --zwart: #0A0A0A;
  --wit: #F0F0F0;
  --amber: #F5A623;
  --haar: #1C1C1C;
  /* beide grijstinten halen WCAG AA op #0A0A0A: 7,76:1 en 5,15:1 */
  --zwak: rgba(240, 240, 240, .66);
  --zwakker: rgba(240, 240, 240, .52);
  --kolom: 42rem;
}

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

html {
  background: var(--zwart);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--zwart);
  color: var(--wit);
  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', ui-monospace, monospace;
  font-weight: 400;
  font-size: .9375rem;
  line-height: 1.75;
  letter-spacing: .01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--kolom);
  margin-inline: auto;
  padding-inline: 24px;
}

a { color: inherit; }

/* taalschakelaar */

.top {
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
}

.top a {
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--zwakker);
  text-decoration: none;
  padding: 12px 4px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.top a:hover,
.top a:focus-visible { color: var(--wit); border-bottom-color: var(--wit); }

/* held */

.held { padding-block: 5rem 5.5rem; }

.mark {
  position: relative;
  width: 72px;
  height: 72px;
  background: var(--wit);
  margin-bottom: 44px;
}

.mark span {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 37.5%;
  height: 37.5%;
  background: var(--zwart);
  transform: scale(0);
  transform-origin: top left;
  animation: hoek .6s cubic-bezier(.22, .61, .36, 1) .5s forwards;
}

@keyframes hoek { to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .mark span { transform: scale(1); animation: none; }
}

.naam {
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 4.4rem);
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1;
}

.slogan {
  margin: 22px 0 0;
  font-size: clamp(.78rem, 2.6vw, .88rem);
  letter-spacing: .18em;
  color: var(--zwak);
}

.belofte {
  margin: 44px 0 0;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  line-height: 1.7;
  max-width: 38ch;
  text-wrap: balance;
}

/* knop */

.knop {
  display: inline-block;
  margin-top: 38px;
  padding: 15px 32px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: .875rem;
  letter-spacing: .14em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

/* amber blijft de rand, het vlak wordt off-white: BRAND.md regel 7 */
.knop:hover,
.knop:focus-visible { background: var(--wit); color: var(--zwart); }
.knop:focus-visible { outline-color: var(--wit); }

/* secties */

section { border-top: 1px solid var(--haar); padding-block: 4.5rem; }

.label {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6em;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--zwakker);
  margin-bottom: 28px;
}

.label b { font-weight: 400; color: var(--amber); }

h2 {
  margin: 0 0 24px;
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.45;
  max-width: 30ch;
  text-wrap: balance;
}

p { margin: 0 0 20px; max-width: 58ch; }
p:last-child { margin-bottom: 0; }

.zwak { color: var(--zwak); }
.klein { font-size: .8125rem; margin-top: 18px; }

/* drie blokken */

.blokken { display: grid; gap: 38px; }

.blok h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .08em;
}

.blok p { color: var(--zwak); margin: 0; }

.blok::before {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: var(--amber);
  opacity: .55;
  margin-bottom: 18px;
}

/* bewijs */

.bewijs { margin: 0; }

.bewijs div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--haar);
}

.bewijs div:first-child { border-top: 1px solid var(--haar); }
.bewijs dt, .bewijs .wie { font-weight: 400; letter-spacing: .06em; }
.bewijs dd { margin: 0; }
.bewijs .wat { color: var(--zwak); font-size: .875rem; }

/* voet */

footer {
  border-top: 1px solid var(--haar);
  padding-block: 44px 64px;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--zwakker);
}

footer p { margin: 0 0 6px; max-width: none; }

footer a {
  color: var(--wit);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 4px 0;
}

footer a:hover, footer a:focus-visible { color: var(--amber); }

/* focus zichtbaar houden, ook zonder muis */

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

@media (min-width: 620px) {
  body { font-size: 1rem; }
  .wrap { padding-inline: 32px; }
  .mark { width: 88px; height: 88px; }
  .held { padding-block: 7rem 4rem; }
  section { padding-block: 7rem; }
  .blokken { gap: 44px; }
  .bewijs div { grid-template-columns: 16rem 1fr; gap: 24px; align-items: baseline; }
  footer { padding-block: 5rem 7rem; }
}

/* afdrukken: zonder dit blok print de browser lichte tekst op wit papier */

@media print {
  html, body { background: #fff; color: #0A0A0A; }
  .slogan, .zwak, .blok p, .bewijs .wat, .label, footer { color: #595959; }
  .label b { color: #8A5A00; }
  .knop { background: none; color: #8A5A00; border-color: #8A5A00; }
  footer a { color: #0A0A0A; }
  .mark { background: #0A0A0A; }
  .mark span { background: #fff; transform: scale(1); animation: none; }
  section, footer, .bewijs div, .bewijs div:first-child { border-color: #BDBDBD; }
  .blok::before { background: #8A5A00; opacity: 1; }
  .top { display: none; }
  .held { padding-block: 0 2rem; }
  section { padding-block: 2rem; break-inside: avoid; }
}