/* Styling for the sample pages only (src/pagina/paginas.mjs). The home page's stroming.css is loaded first and carries the tokens,
   the header, the buttons and the page transition; this file adds no more than a page needs to stand there. */
body { background: var(--w0); color: #fff; font-family: var(--f); -webkit-font-smoothing: antialiased; }
/* the two still planes of the ground's fallback, so the world under the header is the home page's (grond.css) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 64%, color-mix(in srgb, var(--w2) 22%, transparent) 64.15%, transparent 96%),
    linear-gradient(116deg, transparent 38%, color-mix(in srgb, var(--w3) 14%, transparent) 38.15%, transparent 78%);
}
.vb { position: relative; z-index: 1; padding: var(--pagina-top) var(--rand) 0; }
.vb-boven { max-width: 22ch; }
.vb-merk { display: block; margin: 0 0 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--rood); }
.vb h1 { margin: 0; font-size: var(--t-pagina); font-weight: 640; line-height: .98; letter-spacing: -.028em; }
.vb-lead { margin: 22px 0 0; max-width: 34ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .78); }
.vb-let { margin: 34px 0 0; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; max-width: 46ch;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .6); }
.vb-terug { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; margin-top: 30px; color: #fff; text-decoration: none; font-weight: 500; }
.vb-terug span { border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

/* the anchors the home page links into (#vol-gas, #smartchargers, ...): a band each, so the jump lands somewhere */
.vb-blok { position: relative; z-index: 1; margin-top: var(--sec-y); padding: var(--kop-y) var(--rand);
  border-top: 1px solid rgba(255, 255, 255, .14); scroll-margin-top: 110px; }
.vb-blok h2 { margin: 0; font-size: var(--t-kop2); font-weight: 620; letter-spacing: -.022em; }
.vb-blok p { margin: 12px 0 0; color: rgba(255, 255, 255, .62); font-size: 16px; }
.vb-blok:target h2 { color: var(--rood); }

.vb-voet { position: relative; z-index: 1; margin-top: var(--sec-y); padding: var(--kop-y) var(--rand) 46px;
  border-top: 1px solid rgba(255, 255, 255, .14); }
.vb-voet h2 { margin: 0 0 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); font-weight: 400; }
.vb-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px 24px; }
.vb-lijst h3 { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .5); font-weight: 400; }
.vb-lijst a { display: block; padding: 4px 0; color: rgba(255, 255, 255, .8); text-decoration: none; font-size: 15px; }
.vb-lijst a:hover { color: #fff; }
.vb-lijst a[aria-current] { color: var(--rood); }
.vb-regel { margin: 40px 0 0; font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, .4); }
@media (max-width: 760px) { .vb-lijst { gap: 24px 16px; } }