/* base tokens — frozen after section 1 */

:root {
  /* palette — swiss bone base, ink black text, and vermilion strictly for orientation */
  --color-bg: #f7f5f0;
  --color-surface: #0a0a0a;
  --color-text: #1a1c1b;
  --color-text-muted: #5c5e5d;
  --color-accent: #e34a22;
  --color-line: #1a1c1b;

  /* typography — the editorial tension between luxury serif and engineered monospace */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-text: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-size-display: clamp(3rem, 1.5rem + 7.5vw, 8rem);
  --font-size-h2: clamp(2rem, 1.2rem + 4vw, 4.5rem);
  --font-size-h3: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-small: 0.875rem;

  /* space — generous, magazine-like margins and padding */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;
  --space-2xl: 10rem;
  --space-section: clamp(6rem, 3rem + 10vw, 12rem);

  /* radius — raw, honest, unmasked images (predominantly sharp) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* motion — deliberate and calm: print coming to life, no bouncing */
  --dur-fast: 0.4s;
  --dur-base: 0.8s;
  --dur-slow: 1.6s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* elevation — extremely subtle, as the aesthetic relies on flat editorial hairlines */
  --shadow-soft: 0 24px 64px rgba(26, 28, 27, 0.08);
}

/* base layer — consumes the tokens above; sections extend it, never fight it. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns smoothing; never set smooth here */
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

main {
  overflow-x: clip; /* sections animate from off-canvas; never leak a scrollbar */
}

.is-reduced-motion *,
.is-reduced-motion *::before,
.is-reduced-motion *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}