/* Shared base for section variants: fonts, brand tokens, resets. Nothing about layout or type scale lives here,
   so each variant is free to compose its own section. Paths are root-absolute (preview server root = the site). */
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-wght.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --white: #ffffff;
  --alt: #f4f6f4;          /* the Workshop's sage, lifted to a near-white band */
  --ink: #101713;
  --ink-2: #3a423d;
  --muted: #646d67;        /* 5.4:1 on white */
  --line: rgb(16 23 19 / .10);
  --line-2: rgb(16 23 19 / .16);
  --green: #1fbf72;        /* VASE green: FILL ONLY (2.4:1 on white, never text) */
  --green-ink: #0d7a4a;    /* green as text: 5.4:1 on white */
  --green-deep: #155c3d;
  --on-green: #03150c;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;   /* Studio UI + body */
  --display: "Jost", "Futura", system-ui, sans-serif;                  /* Studio display face */
  --serif: "Instrument Serif", Georgia, serif;                          /* ONE exception: the hero's italic "form." */
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;                  /* Studio readouts */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.47 var(--sans); letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }