/* ============================================================
   DESIGN TOKENS — Quiet Center / emotional-chess brand system
   ============================================================
   Palette rationale:
   --paper     warm parchment, not the generic AI-cliché cream —
               pulled slightly toward tan, like an old scoresheet.
   --ink       near-black warm charcoal, never pure #000.
   --board     near-black espresso brown, the darkest wood surface —
               used for the footer, dark panels, and high-contrast
               moments. No olive/green left anywhere in the palette.
   --olive     warm walnut brown — the calm, considered accent.
               Used for primary actions, links, "the right move."
               Same material family as the board's wood tones, so
               buttons and dark sections read as carved from one
               piece rather than a separate green accent color.
   --rust      warm terracotta — the felt, emotional accent.
               Used sparingly: the moment of hesitation, warnings,
               anything that carries feeling rather than instruction.
   --brass     dull warm gold — used only for hairline notation
               marks, coordinates, and small dividers. Never fills.
   --wood-*    the chess board's own palette (maple/walnut/frame),
               reused directly by --olive/--olive-deep below so the
               board and the rest of the UI share one wood language.
   ============================================================ */

:root {
  /* Color */
  --paper: #EDE6D3;
  --paper-dim: #E4DBC4;
  --paper-deep: #DCD0B2;
  --ink: #211D16;
  --ink-soft: #4A4437;
  --ink-faint: #8A8069;
  --board: #1D140C;
  --board-soft: #2A1E14;
  --olive: #6B4226;
  --olive-deep: #4A2E18;
  --olive-pale: #E7CB9C;
  --rust: #B0552B;
  --rust-deep: #8C4220;
  --rust-pale: #EAD3BE;
  --brass: #A6863F;
  --wood-light: #F0DFB8;
  --wood-dark: #3E2416;
  --wood-frame: #2E1B0F;
  --wood-frame-deep: #21120A;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.010 0.30' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --line: rgba(33, 29, 22, 0.14);
  --line-soft: rgba(33, 29, 22, 0.08);
  --line-on-dark: rgba(237, 230, 211, 0.18);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Type scale — fluid, board-rhythm based (8pt-ish system referencing
     the 8x8 board without being cute about it) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.22rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2vw, 3.4rem);
  --step-5:  clamp(3rem, 2.2rem + 3.2vw, 4.6rem);
  --step-6:  clamp(3.6rem, 2.5rem + 4.5vw, 6rem);

  /* Space — 8px rhythm, one unit per board square feel */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --sp-9: 9rem;

  /* Shape */
  --radius-sm: 3px;
  --radius-md: 6px;
  --container: 1180px;
  --container-narrow: 760px;
  --container-wide: 1360px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 720ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.13 0 0 0 0 0.1 0 0 0 0 0.07 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

::selection { background: var(--rust); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 1.1em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow--on-dark { color: var(--brass); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-3);
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-2) var(--sp-4);
  z-index: 200;
  border-radius: var(--radius-sm);
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }