/* Shared brand constants: fonts + design tokens. Loaded by every page. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/bricolage-grotesque-300-800.woff2) format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/newsreader-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/newsreader-italic-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/plex-mono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/plex-mono-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/plex-mono-700.woff2) format('woff2');
}

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --paper:    #f4efe3;   /* ivory ground */
  --chalk:    #fbf8ec;   /* raised cards */
  --slate:    #1d3529;   /* racing green: ink on ivory, dark surfaces */
  --slate-2:  #2a4739;   /* raised surfaces on green */
  --sediment: #67705e;   /* secondary text on ivory */
  --dust:     #9c9c85;   /* tertiary */
  --seam:     #ded6bf;   /* hairlines on ivory */
  --seam-d:   #35543f;   /* hairlines on green */
  --accent-light: #9ec7ab;  /* sage: accents on green surfaces */
  --accent-deep: #2e5c43;  /* racing green, deep: accents on ivory */
  /* Display serif: light old-style for headlines, giant numerals, pull quotes. */
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', P052, serif;
  color-scheme: light;
}

/* Brand wordmark: shared base for the nav lockup on every page.
   Pages override size/gap only (index 21px/8px, subpages 19px/10px). */
.wordmark {
  display: flex; align-items: baseline;
  font-weight: 700; color: var(--slate); text-decoration: none;
}
.wordmark .gtm {
  font-family: 'Plex Mono', monospace; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--accent-deep);
}

/* Display voice: every heading is the light serif; pages override size and
   margin only. Accent words inside headlines turn italic, never bold. */
h1, h2, h3 { font-family: var(--serif); font-weight: 430; letter-spacing: -0.012em; }
.accent-word { font-style: italic; font-weight: inherit; color: var(--accent-deep); }