/*
Theme Name: NLBS
Template: autive-starter-theme
Description: Child theme for nlbs.nl
Version: 1.0.0
Author: Autive
Author URI: https://autive.nl
*/

/* NLBS-specific overrides + micro-interactions only.
   Anything theme.json can express belongs there, not here. */

:root {
  /* Variable-font axes for Fraunces - NLBS uses optical-size 144 + soft
     terminal style for headings. Other Autive sites won't necessarily use
     a font with these axes, so the parent leaves them blank. */
  --font-display-vars:      "opsz" 144, "SOFT" 50, "WONK" 0;
  --font-display-vars-soft: "opsz" 144, "SOFT" 100;
}

/* Apply variable-font axes to all display-family text */
body :is(h1, h2, h3, h4, .autive-stat__num, .autive-trait__num, .autive-timeline__year) {
  font-variation-settings: var(--font-display-vars);
}
.autive-stat__num,
.autive-trait__num {
  font-variation-settings: var(--font-display-vars-soft);
}

/* NLBS paper-grain overlay - the warm cream paper texture that gives the
   site its editorial feel. Other clients can drop this. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: multiply;
  opacity: 0.32;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* CTA band and inverse footer get an inverted paper-grain (lighter on dark) */
.autive-cta-band::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  pointer-events: none;
}
.autive-cta-band > *,
.site-footer > * { position: relative; }