/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  /* Colors — vintage travel poster × art museum */
  --ink: #1a1612;          /* warm black */
  --paper: #f4ead5;        /* cream paper */
  --paper-2: #ebdfc2;      /* aged paper */
  --paper-3: #e0d2ad;      /* darker cream */
  --locomotive: #1e3a2e;   /* deep forest green — train livery */
  --locomotive-2: #2a5240; /* lighter locomotive */
  --brass: #c9913b;        /* brass fittings */
  --brass-2: #e0a94a;      /* brass highlight */
  --crimson: #8a2a2a;      /* Swedish flag red / stamp */
  --cobalt: #2b4a7a;       /* Dutch blue */
  --shadow: rgba(26, 22, 18, 0.15);
  --shadow-strong: rgba(26, 22, 18, 0.35);

  /* Typography */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Instrument Sans', 'Helvetica', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --gutter: clamp(1rem, 4vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  /* subtle paper grain */
  background-image:
    radial-gradient(ellipse at top left, rgba(201, 145, 59, 0.08), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(43, 74, 122, 0.06), transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

::selection { background: var(--brass); color: var(--ink); }