/* The heads' drawings (D-248, D-250), written by src/pagina/koppen.mjs and drawn by core/koppen.js; loaded by the ten pages whose head
   carries one. One pen, quiet by rule (Alex, 23-09): a fine white line at a low alpha, drawn once, no pencil. The lab's original is
   mockups/stroom-v4-lab/koppen/koppen-in.css. */

/* ---------- the pen: a line, a fine line (f), a hidden line (v, dashed), a brighter line (h), mono labels ---------- */
.kp-tek { margin: 0; pointer-events: none; --kp-a: 1; --kp-sw: 1.6; --kp-tx: 13px; color: rgb(255 255 255 / var(--kp-a)); }
.kp-tek > svg { display: block; width: 100%; height: auto; overflow: visible; }
.kp-tek svg { fill: none; stroke: currentColor; stroke-width: var(--kp-sw); stroke-linecap: round; stroke-linejoin: round; }
.kp-tek svg .f { color: rgb(255 255 255 / calc(var(--kp-a) * .55)); stroke-width: calc(var(--kp-sw) * .7); }
.kp-tek svg .v { stroke-width: calc(var(--kp-sw) * .85); stroke-dasharray: 6 7; }
.kp-tek svg .h { color: rgb(255 255 255 / min(1, calc(var(--kp-a) * 2))); }
.kp-tek svg path.h { stroke-width: calc(var(--kp-sw) * 1.25); }
.kp-tek svg .dik { stroke-width: 5; }
.kp-tek svg .vol { fill: currentColor; }
.kp-tek svg .rood { fill: var(--rood); stroke: none; }
.kp-tek svg text { fill: currentColor; stroke: none; font-family: var(--mono); font-size: var(--kp-tx); letter-spacing: .06em; }
/* the site's own type where a page is drawn: a title typed with a red caret, as /werkwijze/ types his page list */
.kp-tek svg .typ { font-family: var(--f); font-size: 32px; font-weight: 650; letter-spacing: -.02em; white-space: pre; }
.kp-tek svg .knoptekst { font-family: var(--f); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.kp-tek svg .prijs { font-family: var(--f); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.kp-tek svg .caret { fill: var(--rood); stroke: none; }
/* our own footage in a drawn frame: toned down so the line stays the drawing */
.kp-tek svg .foto { opacity: .6; }
.kp-tek svg .foto image { filter: saturate(.6); }
/* until the pen has hidden the strokes it will draw, the figure waits out of sight; if the script never comes, it shows drawn */
.js .kp-tek:not(.kp-klaar) { visibility: hidden; animation: kp-toon 0s 2.5s forwards; }
@keyframes kp-toon { to { visibility: visible; } }

/* ---------- T1 and T2 heads: the drawing in the right column, the four facts under the lead in two columns (visual-pass.md §5) ---------- */
.kp-kolom { --kp-a: .44; --kp-tx: 15px; width: 100%; }
.f-kop-boven.met-tek > .f-feiten { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 14px 40px; }
.f-kop-boven.met-tek > .f-feiten li { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-size: var(--t-sub); font-weight: 540; }
.f-kop-boven.met-tek > .f-feiten .vink { width: 26px; height: 26px; }
.f-kop-boven.met-tek > .f-feiten .vink svg { width: 13px; height: 13px; }
@media (min-width: 1101px) {
  .f-kop-boven.met-tek > .kp-kolom { grid-column: 2; grid-row: 2 / span 3; align-self: center; justify-self: end; max-width: 540px; }
  .f-kop-boven.met-tek > .f-feiten { grid-column: 1; grid-row: 4; align-self: start; margin-top: 44px; }
}
@media (max-width: 1100px) {
  .f-kop-boven.met-tek > .kp-kolom { max-width: 560px; margin-top: 48px; }
}

/* ---------- the sector heads without film (T3's fallback): the trade drawn where its film will play, faint, the camera on STBY.
   The drawing stands on the title's last line (its ground line, 84 % down the drawing, on the title's foot), behind the letters and
   clear of the buttons, running off the right edge; its left third fades out towards the title and its top towards the kicker ---------- */
.sh-kaal.met-tek { overflow: clip; }
/* the title and its drawing share a box, so the drawing stands on the title's foot (the box holds the title's space below it) */
.kp-titel { position: relative; margin-bottom: 32px; }
.kp-titel > .sh-titel { margin-bottom: 0; }
.kp-bord {
  position: absolute; right: calc(-1 * var(--rand) - 3vw); bottom: 0; z-index: -1; width: min(52vw, 820px); translate: 0 15.7%;
  opacity: .2;
  -webkit-mask: linear-gradient(90deg, transparent, #000 34%), linear-gradient(transparent, #000 24%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 34%), linear-gradient(transparent, #000 24%);
  mask-composite: intersect;
}
.kp-stby { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .62); }
.kp-stby i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); }

@media (max-width: 760px) {
  .kp-tek { --kp-sw: 2.4; --kp-tx: 19px; }
  .kp-tek svg .typ { font-size: 38px; }
  .f-kop-boven.met-tek > .f-feiten { grid-template-columns: minmax(0, 1fr); }
  .kp-titel { margin-bottom: 24px; }
  .kp-bord { right: -24vw; width: 118vw; opacity: .15; --kp-sw: 2.8; }
  .kp-stby span { display: none; }
}