:root {
  --font-serif: "jaf-lapture", serif;
  --font-sans: "supria-sans-condensed", sans-serif;
  --font-mono: "inconsolata", monospace;

  --font-size-base: 20px;
  --line-height-base: 1.5;

  --color-bg: #F4F3F0;
  --color-fg: #151515;
  --color-muted: #5e5e5e;
  --color-surface: #d3d3d1;
  --color-accent: #5B5DE9;
  --color-accent-dark: #3D348B;
  --color-link: var(--color-accent);
  --color-border: #d3d3d1;
  --color-highlight: #EC9E38;

  --dark-gold: #BC8230;
  --medium-gold: #DABC8E;
  --ada-gold: #8C6123;
  --light-orange: #F18701;
  --dark-orange: #F35B04;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --content-width: 70ch;
  --sidebar-width: 14rem;

  /* Mobile-first breakpoints (base styles first, min-width overrides only) */
  --breakpoint-xs: 20rem;
  --breakpoint-mobile: 23.4375rem;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;

  /* Anchor jump clearance for current top layout (no sticky top bar). */
  --scroll-offset: 1.5rem;
}

*, *::before, *::after {
  box-sizing: border-box;
  font-feature-settings: 'ss02';
}

html {
  font-size: var(--font-size-base);
  font-family: var(--font-serif);
  font-weight: normal;
  line-height: var(--line-height-base);
  color: var(--color-fg);
  background: var(--color-bg);
  scrollbar-gutter: stable;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-serif);
}

p, li {
  font-weight: 300;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

code, pre {
  font-family: var(--font-mono);
}

/* Utility: visually hidden (accessible hide) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Utility: sans-serif label baseline — uppercase, 16px, condensed sans */
.text-label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-fg);
  text-transform: uppercase;
  letter-spacing: 0.02rem;
}