/* =====================================================
   GLOBAL: site-wide tokens + base (loads before every block)
   ===================================================== */
:root {
  --vnb-bg: #fcfcfc;
  --vnb-ink: #141414;
  --vnb-grey: #777;
  --vnb-orange: #F15623;
  --vnb-line: rgba(20, 20, 20, .14);
  --vnb-ph1: #ececea;
  --vnb-ph2: #dcdcda;
  --vnb-ease: cubic-bezier(.19, 1, .22, 1);
  --vnb-bar-h: clamp(56px, 4vw, 80px);

  /* Fonts: change this one line to change the site font */
  --vnb-font: 'Outfit', sans-serif;

  /* old names kept as aliases so any widget still using them keeps working; delete once unused */
  --vnb-mono: var(--vnb-font);
  --vnb-serif: var(--vnb-font);
}

/* Base */
html {
  scroll-behavior: auto;
  scroll-padding-top: var(--vnb-bar-h); /* anchor links (e.g. a table of contents) clear the sticky header */
}

body {
  margin: 0;
  background: var(--vnb-bg);
  color: var(--vnb-ink);
  font-family: var(--vnb-font);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* Scroll reveal helper: add data-reveal to any element (used by custom.js) */
html.vnb-js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  html.vnb-js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}