:root {
  /* Colors — black/white only, per brief */
  --color-black: #0A0A0A;
  --color-white: #FAFAFA;
  --color-bg: var(--color-white);
  --color-fg: var(--color-black);

  /* Card surface — a distinct, slightly lifted tone from the page bg */
  --card-bg: #F5F2EC;

  /* 8pt spacing grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;

  /* Layout */
  --content-max-width: 1360px;
  --radius-sm: 4px;
  --radius-lg: 20px;

  /* Catalogue grid (used starting step 3) */
  --grid-columns: 2;
  --grid-gutter: var(--space-2);

  /* Type scale — mobile default: base 15px, ratio 1.15 */
  --type-ratio: 1.15;
  --font-caption: calc(15px / var(--type-ratio));
  --font-body: 15px;
  --font-subhead: calc(15px * var(--type-ratio));
  --font-heading: calc(15px * var(--type-ratio) * var(--type-ratio));
  --font-display: calc(15px * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));

  /* Typeface */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'IBM Plex Mono', 'Space Mono', Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --color-bg: var(--color-black);
  --color-fg: var(--color-white);
  --card-bg: #111111;
}

/* Tablet: 600–1023px */
@media (min-width: 600px) {
  :root {
    --type-ratio: 1.18;
    --font-caption: calc(16px / var(--type-ratio));
    --font-body: 16px;
    --font-subhead: calc(16px * var(--type-ratio));
    --font-heading: calc(16px * var(--type-ratio) * var(--type-ratio));
    --font-display: calc(16px * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
    --grid-columns: 3;
    --grid-gutter: var(--space-2);
  }
}

/* Desktop: 1024–1439px */
@media (min-width: 1024px) {
  :root {
    --type-ratio: 1.2;
    --font-caption: calc(16px / var(--type-ratio));
    --font-body: 16px;
    --font-subhead: calc(16px * var(--type-ratio));
    --font-heading: calc(16px * var(--type-ratio) * var(--type-ratio));
    --font-display: calc(16px * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
    --grid-columns: 4;
    --grid-gutter: var(--space-3);
  }
}

/* Large: 1440px+ */
@media (min-width: 1440px) {
  :root {
    --type-ratio: 1.2;
    --font-caption: calc(17px / var(--type-ratio));
    --font-body: 17px;
    --font-subhead: calc(17px * var(--type-ratio));
    --font-heading: calc(17px * var(--type-ratio) * var(--type-ratio));
    --font-display: calc(17px * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
    --grid-columns: 6;
    --grid-gutter: var(--space-3);
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* Centered content column, never edge-to-edge */
.wrapper {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

@media (min-width: 1024px) {
  .wrapper { padding-inline: var(--space-3); }
}