/* ─────────────────────────────────────────────────────────────────────
   Vexes design tokens — shared by the public site and the admin app.
   Brand idea: "an index of things made well". Warm paper, near-black ink,
   one vermilion signal colour, editorial serif display + precise sans +
   monospace index labels.
   ───────────────────────────────────────────────────────────────────── */
@font-face { font-family: "Inter Variable"; src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces Variable"; src: url(/fonts/fraunces-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces Variable"; src: url(/fonts/fraunces-latin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Colour — brand */
  --ink: #12110f;
  --ink-2: #2a2824;
  --paper: #f3f0e8;
  --paper-2: #e9e4d8;
  --paper-3: #ddd6c6;
  --graphite: #5a564d;
  --line: #d3ccbb;
  --signal: #ff4d1f;          /* graphic accent (marks, rules, dots) */
  --signal-ink: #b8310d;      /* accessible text/link variant on paper */
  --ok: #1d7a4b;
  --warn: #9a6200;
  --danger: #b42318;

  /* Typography */
  --f-display: "Fraunces Variable", Georgia, "Times New Roman", serif;
  --f-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.375rem;
  --t-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --t-3xl: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  --t-display: clamp(2.8rem, 1.2rem + 6.4vw, 7.25rem);

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;

  /* Layout */
  --w-text: 68ch; --w-page: 1320px; --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  /* Breakpoints (reference): 600px small, 900px medium, 1200px large */

  /* Shape & depth — restrained: hairlines over shadows */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-pill: 999px;
  --hair: 1px solid var(--line);
  --shadow-1: 0 1px 2px rgb(18 17 15 / 0.06), 0 1px 1px rgb(18 17 15 / 0.04);
  --shadow-2: 0 8px 24px -8px rgb(18 17 15 / 0.18), 0 2px 6px rgb(18 17 15 / 0.06);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 120ms; --d-med: 240ms; --d-slow: 600ms;

  /* Focus */
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-sans); font-size: var(--t-md); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
.icon { flex: none; display: inline-block; vertical-align: -0.15em; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 1000; padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper); border-radius: var(--r-1); text-decoration: none; }
.skip:focus { top: var(--s-4); }
.mono { font-family: var(--f-mono); font-feature-settings: "zero" 1; letter-spacing: 0.01em; }
.small { font-size: var(--t-sm); }
.muted { color: var(--graphite); }
.nowrap { white-space: nowrap; }

.wordmark { display: inline-flex; align-items: center; gap: 0.45em; color: inherit; --wm-accent: var(--signal); }
.wordmark-text { font-family: var(--f-display); font-weight: 560; font-size: 1.35em; letter-spacing: -0.03em; line-height: 1; font-variation-settings: "SOFT" 0, "WONK" 1; }

.swatches { display: inline-flex; gap: 2px; }
.swatches i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgb(0 0 0 / 0.12); display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}