/* ===========================================================================
   DE COMPOSITIE VAN /bewijs

   Alleen wat deze pagina zelf nodig heeft. De basis, de bouwstenen, de kopbalk,
   de voet en de twee slotblokken komen uit landing.css. De waarden uit
   landing-tokens.css, dat als eerste wordt gelinkt. Die volgorde is
   load-bearing.

   DE VORM EN WAAROM HIJ ZO IS
   Deze pagina is een grootboek. Er loopt een verticale as door het midden van
   het hoofdstuk waar alles om draait: de reis van een gesproken zin naar een
   geblokkeerde voordracht, in acht haltes onder elkaar.

   /matching gebruikt de breedte als grens, want daar gaat het over twee dingen
   naast elkaar. Hier gaat het over een volgorde in de tijd en dan is hoogte de
   juiste as. Twee verdiepingspagina's met hetzelfde raster zouden meteen als
   sjabloon lezen en dat is precies wat dit herontwerp overal weghaalt.

   WAT HIER BEWUST NIET IN ZIT
   De displayschaal. Die hoort bij de voorpagina, die het luidst mag zijn. Een
   verdiepingspagina is dichter en rustiger: hier staat meer per vierkante
   centimeter en dan zou een letter van 132 pixels de lezer alleen maar uit de
   tekst tillen.
   =========================================================================== */

/* ---------- De opening ----------
   Waar /matching opent met een kop naast een kernzin, opent deze pagina met
   een citaat. Dat is geen stijlverschil om het verschil: deze pagina gaat over
   wat er met een gesproken zin gebeurt, dus de zin hoort het eerste te zijn
   wat je ziet. */
.bw-opening{
  background:linear-gradient(180deg,var(--papier) 0%,var(--wit) 82%);
  padding-top:calc(var(--r-sectie) + var(--r9));
  overflow:hidden;
}
.bw-opening .titel-1{margin-top:var(--r5);max-width:16ch}
.bw-citaat{
  margin-top:clamp(38px,4.6vw,68px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,72px);align-items:start;
}
.bw-citaat-zin{
  padding:var(--r6) var(--r7);border-radius:var(--rond-lg) var(--rond-lg) var(--rond-lg) var(--rond-xs);
  background:var(--wit);border:1px solid var(--rand);box-shadow:var(--schaduw-2);
  font-size:var(--t-xl);line-height:1.5;color:var(--ink-900);
}
.bw-citaat-bron{
  display:block;margin-top:var(--r4);font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.1em;color:var(--ink-400);
}
.bw-citaat-uitleg p{font-size:var(--t-lg);line-height:1.68;color:var(--ink-600);max-width:46ch}
.bw-citaat-uitleg p+p{margin-top:var(--r4)}
.bw-citaat-uitleg b{color:var(--ink-900);font-weight:600}

/* ---------- De vijf soorten ----------
   Een grootboek en geen kaartenrij: naam, wat het is en een echte voorbeeldzin
   op een rij, vijf keer onder elkaar. De voorbeeldzin is het belangrijkste
   veld en staat daarom in de breedste kolom. Zonder die zin blijven het vijf
   etiketten en dan is het onderscheid een woordenspel. */
.bw-soorten{background:var(--wit)}
.bw-kop{max-width:58ch}
.bw-kop .titel-2{margin-top:var(--r5);max-width:22ch}
.bw-kop .lead{margin-top:var(--r5)}
.bw-boek{
  margin-top:clamp(34px,4vw,54px);
  border:1px solid var(--rand);border-radius:var(--rond-lg);overflow:hidden;
}
.bw-rij{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr) minmax(0,1fr);
  gap:var(--r3) clamp(18px,2.6vw,40px);
  padding:var(--r5) clamp(20px,2.6vw,32px);
  align-items:baseline;background:var(--wit);
}
.bw-rij+.bw-rij{border-top:1px solid var(--rand-zacht)}
.bw-rij-kop{background:var(--papier);border-bottom:1px solid var(--rand)}
.bw-rij-kop span{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-400);
}
.bw-soort{display:flex;align-items:center;gap:var(--r3);min-width:0}
.bw-soort-naam{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.01em}
.bw-wat{font-size:var(--t-md);line-height:1.55;color:var(--ink-600)}
.bw-voorbeeld{
  font-size:var(--t-md);line-height:1.55;color:var(--ink-700);
  padding-left:var(--r4);border-left:2px solid var(--rand-sterk);font-style:italic;
}
/* De vijfde rij is geen lichtere versie van de andere vier maar een andere
   soort regel: hij legt vast dat er NIETS bekend is. Dat verschil zit in de
   rustiger inkt en in het ontbreken van de accentrand. Het staat ook voluit
   in de kolom ernaast. Kleur draagt hier niets alleen. */
.bw-rij-onbekend .bw-voorbeeld{color:var(--ink-500);border-left-color:var(--rand)}
.bw-rij-onbekend .bw-soort-naam{color:var(--ink-600)}

/* ---------- De vier zekerheden ----------
   HIER STOND EEN BALKJE PER NIVEAU en dat is er bewust weer uit gehaald. Een
   balk zonder as en zonder getal suggereert toch een verhouding: vermoed op een
   kwart en waarschijnlijk op tweederde leest als een gewicht, terwijl hoe zwaar
   een niveau meetelt per competentie verschilt en niet als vast percentage
   bestaat. Dan is het een verzonnen getal in beeldvorm.

   Wat er nu staat is wat elk niveau DOET, voluit in woorden. Dat is minder
   grafisch en het klopt wel. */
.bw-zekerheid{background:var(--papier)}
.bw-trap{
  margin-top:clamp(34px,4vw,54px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);
}
.bw-trede{
  display:grid;gap:var(--r3);align-content:start;
  padding:var(--r5);border-radius:var(--rond);
  background:var(--wit);border:1px solid var(--rand);
}
.bw-trede-naam{font-size:var(--t-lg);font-weight:600;color:var(--ink-900)}
.bw-trede-doet{font-family:var(--mono);font-size:var(--t-2xs);color:var(--blauw-diep);letter-spacing:.08em;line-height:1.6}
.bw-trede p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-600)}
/* De laatste trede is geen lichtere versie van de eerste drie maar een ander
   soort ding: hij telt niet mee en blokkeert. Dat verschil hoort te zien te
   zijn en niet alleen te lezen. */
.bw-trede-nul{border-color:var(--roze-rand);background:var(--papier-roze)}
.bw-trede-nul .bw-trede-doet{color:var(--roze-diep)}

/* ---------- De reis, de handtekening van deze pagina ----------
   Acht haltes onder elkaar met een doorlopende lijn erlangs. De lijn is een
   pseudo-element van de lijst en geen rand per halte: zo loopt hij door achter
   de tussenruimte heen en breekt hij niet op bij elke halte.

   Per halte staat er wie hem zet, mens of machine. Dat is niet decoratief: de
   hele bewering van deze pagina is dat een machine mag voorstellen en dat een
   mens vastlegt. Die afwisseling hoort zichtbaar te zijn. */
.bw-reis{background:var(--wit)}
.bw-haltes{position:relative;margin:clamp(38px,4.4vw,64px) 0 0;padding:0;list-style:none}
.bw-haltes::before{
  content:"";position:absolute;top:14px;bottom:14px;left:15px;width:2px;
  background:linear-gradient(180deg,var(--blauw) 0%,var(--lila) 52%,var(--amber) 100%);
  opacity:.32;
}
.bw-halte{
  position:relative;display:grid;
  grid-template-columns:32px minmax(0,.44fr) minmax(0,1fr);
  gap:var(--r3) clamp(20px,3vw,48px);align-items:start;
  padding:0 0 clamp(30px,3.6vw,52px);
}
.bw-halte:last-child{padding-bottom:0}
.bw-halte-stip{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--wit);border:2px solid var(--rand-sterk);
  font-family:var(--mono);font-size:10px;color:var(--ink-500);
}
/* Een halte die een mens zet krijgt een gevulde stip, een halte die de machine
   zet een open stip. Dezelfde regel als bij de vierkantjes: vorm draagt de
   betekenis en de kleur komt erbij, niet andersom. Het woord staat er ook. */
.bw-halte-mens .bw-halte-stip{background:var(--blauw);border-color:var(--blauw);color:#fff}
.bw-halte-naam{font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.015em;line-height:1.3}
.bw-halte-wie{
  display:inline-block;margin-top:var(--r3);padding:4px 10px;border-radius:var(--rond-vol);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--rand-sterk);color:var(--ink-500);background:var(--papier);
}
.bw-halte-mens .bw-halte-wie{border-color:var(--blauw-rand);background:var(--blauw-zacht);color:var(--blauw-diep)}
.bw-halte-lijf p{font-size:var(--t-base);line-height:1.7;color:var(--ink-600);max-width:66ch}
.bw-halte-lijf p+p{margin-top:var(--r3)}
.bw-halte-lijf b{color:var(--ink-900);font-weight:600}
.bw-halte-vast{
  margin-top:var(--r4);padding:var(--r3) var(--r4);border-radius:var(--rond-sm);
  background:var(--papier);border:1px solid var(--rand);
  font-family:var(--mono);font-size:var(--t-2xs);line-height:1.7;color:var(--ink-600);
}
.bw-halte-vast b{color:var(--ink-900);font-weight:400}

/* ---------- De harde regel ----------
   Bijna zwart, net als de bewijssectie op de voorpagina, met dezelfde
   techniek: randlicht en verder niets. Dat is bewust geen nieuwe sfeer: dit is
   inhoudelijk dezelfde kamer als daar en dan hoort hij er ook zo uit te zien.
   De regel van een sfeertechniek per donkere sectie blijft gelden. */
/* Bouwt op .band-sectie uit landing-gedeeld.css en wijkt op twee punten af:
   een tint dieper en een gekleurde kaplijn. Alleen die twee staan hier, zodat
   het verschil te zien is in plaats van te verdwijnen tussen vier declaraties
   die overal hetzelfde zijn. */
.bw-regel{background:var(--band-diep);border-top:4px solid var(--lila)}
.bw-regel-spread{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}
.bw-regel-zin{font-size:var(--t-h2);font-weight:600;color:#fff;line-height:1.1;letter-spacing:-.03em;max-width:14ch}
.bw-regel-lead{margin-top:var(--r5);font-size:var(--t-lg);line-height:1.65;color:var(--band-zacht);max-width:44ch}
.bw-gevolgen{display:grid;gap:1px;background:var(--band-rand);border:1px solid var(--band-rand);border-radius:var(--rond);overflow:hidden}
.bw-gevolg{background:rgba(255,255,255,.03);padding:var(--r5)}
.bw-gevolg-naam{font-size:var(--t-lg);font-weight:600;color:#fff}
.bw-gevolg p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.65;color:var(--band-zacht)}

/* ---------- De bevinding zoals hij in het dossier staat ---------- */
.bw-voorbeeld{background:var(--papier)}
.bw-bevinding{
  margin-top:clamp(34px,4vw,54px);border-radius:var(--rond-xl);overflow:hidden;
  background:var(--wit);border:1px solid var(--rand);box-shadow:var(--schaduw-3);
}
.bw-bevinding-balk{
  padding:13px var(--r5);border-bottom:1px solid var(--rand-zacht);
  background:linear-gradient(180deg,var(--papier) 0%,var(--wit) 100%);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r5);
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-400);
}
.bw-bevinding-balk b{font-weight:400;color:var(--ink-700)}
.bw-bevinding-lijf{padding:clamp(22px,2.8vw,34px)}
.bw-bevinding-zin{
  font-size:var(--t-xl);line-height:1.5;color:var(--ink-900);
  padding-left:var(--r5);border-left:3px solid var(--blauw);
}
.bw-velden{
  margin-top:clamp(22px,2.6vw,32px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--r5);
}
.bw-veld .mono{color:var(--ink-400)}
.bw-veld-waarde{margin-top:6px;font-size:var(--t-md);font-weight:600;color:var(--ink-900)}
.bw-veld-bij{margin-top:3px;font-size:var(--t-sm);line-height:1.5;color:var(--ink-500)}
.bw-bevinding-voet{
  padding:var(--r4) var(--r5);border-top:1px solid var(--rand-zacht);background:var(--papier);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r4);
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-600);
}
.bw-bevinding-stip{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:0 0 auto}

/* ---------- Eerlijk over de stand van zaken ----------
   Een pagina die vertelt hoe goed het model is hoort ook te vertellen waar de
   gegevens nog dun zijn. Anders verkoopt hij iets anders dan er staat. */
.bw-eerlijk{
  margin-top:clamp(34px,4vw,54px);padding:clamp(22px,2.8vw,34px);
  border-radius:var(--rond-lg);background:var(--wit);
  border:1px solid var(--amber-rand);border-left:3px solid var(--amber);
}
.bw-eerlijk h3{font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.015em}
.bw-eerlijk p{margin-top:var(--r3);font-size:var(--t-base);line-height:1.68;color:var(--ink-600);max-width:74ch}

/* ---------- Schermbreedtes ---------- */
@media (max-width:1080px){
  .bw-citaat{grid-template-columns:minmax(0,1fr);gap:var(--r7)}
  .bw-citaat-uitleg p{max-width:60ch}
  .bw-regel-spread{grid-template-columns:minmax(0,1fr)}
  .bw-regel-zin{max-width:20ch}
  .bw-velden{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:940px){
  /* Het grootboek wordt twee kolommen: naam en omschrijving naast elkaar, de
     voorbeeldzin op een eigen regel eronder. Drie kolommen op 900px levert een
     citaatkolom van tweehonderd pixels op en dan breekt elke zin in vijven. */
  .bw-rij{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
  .bw-voorbeeld{grid-column:1 / -1;margin-top:var(--r2)}
  .bw-rij-kop span:last-child{display:none}
  .bw-trap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bw-halte{grid-template-columns:32px minmax(0,1fr)}
  .bw-halte-lijf{grid-column:2}
}
@media (max-width:640px){
  .bw-rij{grid-template-columns:minmax(0,1fr);gap:var(--r2)}
  .bw-rij-kop{display:none}
  .bw-trap{grid-template-columns:minmax(0,1fr)}
  .bw-velden{grid-template-columns:minmax(0,1fr)}
  .bw-citaat-zin{font-size:var(--t-lg)}
}