/* JB2 site. Tokens are the light theme of the JB2 design system (tokens.json, version 2); component
   styles live in bundle.css, copied from the system unchanged. This file adds fonts, type and layout only. */

@font-face { font-family: "Archivo"; src: url("fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
/* logo letters only; the site's logos are outlines, so this never downloads unless something uses --font-logo */
@font-face { font-family: "Archivo Expanded"; src: url("fonts/ArchivoExpanded-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;

  --paper: #f5f2ec;
  --jet: #0c0b0d;
  --ground: var(--paper);
  --surface: #ffffff;
  --surface-alt: #e9e5dc;
  --line: #d4cfc4;
  --line-strong: #7a756e;
  --ink: var(--jet);
  --ink-muted: #5b5760;
  --brand: #a3154e;
  --on-brand: var(--paper);
  --brand-ink: var(--brand);
  --brand-soft: #f3dbe5;
  --accent: var(--brand);
  --on-accent: var(--on-brand);
  --danger: #c2290a;
  --focus: var(--ink);
  --link: var(--ink);

  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-logo: "Archivo Expanded", "Arial Black", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-full: 9999px;

  --double: 4px 4px 0 #0c0b0d;
  --double-brand: 4px 4px 0 #a3154e;

  --border-thin: 1px;
  --border-bold: 2px;

  --page-width: 794px;
  --page-height: 1123px;
  --page-margin: 72px;
  --page-top: 56px;
  --page-bottom: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
h1, h2, h3, p { margin: 0; }
img { display: block; }

/* ---------------------------------------------------------------- type */
/* The system sets headline sizes for wide screens only; the clamps scale the two largest down so they fit a phone. */
.display-xl { font-weight: 700; font-size: clamp(36px, 9vw, 68px); line-height: 1.06; letter-spacing: -0.03em; max-width: 13em; }
.display-md { font-weight: 700; font-size: clamp(26px, 6vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }
.lead { font-size: 20px; line-height: 30px; max-width: 34em; }
.small { font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* -------------------------------------------------------------- layout */
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: var(--space-16); }
.stack > * + * { margin-top: var(--space-6); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: var(--space-2); }

.site-header { padding-block: var(--space-6); }
.hero { padding-block: var(--space-12) var(--space-16); }

.cards { display: grid; gap: var(--space-6); margin-top: var(--space-12); }

.site-footer { padding-block: var(--space-16); border-top: var(--border-thin) solid var(--line); }

@media (min-width: 800px) {
  .section { padding-block: var(--space-24); }
  .hero { padding-block: var(--space-24); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}