/* TMBTP v3 — Design System. Runner energy meets premium. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  --bg: #E8E6E2; --bg-light: #F0EEEA;
  --ink: #1A1A1F; --ink-soft: #2A2A30;
  --mid: #8A847E; --light: #B5AFA8; --faint: #D5D0CA;
  --strava: #FC4C02;
  --cream: #F5F0E8; --cream-dark: #EDE4D5;
  --mid-bg: #0C1117; --mid-route: #8FB8CC; --mid-glow: #A5CBE0;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --t-fast: 0.2s; --t-normal: 0.35s; --t-slow: 0.5s;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font-family: 'JetBrains Mono', monospace; color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* Typography */
.t-display { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.05; }
.t-display--xl { font-size: clamp(2.2rem, 6vw, 3.8rem); }
.t-display--lg { font-size: clamp(1.6rem, 4vw, 2.8rem); }
.t-display--md { font-size: clamp(1.3rem, 3vw, 2rem); }
.t-display em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; text-transform: none; letter-spacing: -0.01em; }
.t-mono { font-family: 'JetBrains Mono', monospace; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; }
.t-mono--sm { font-size: 0.5rem; letter-spacing: 0.18em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--t-normal) var(--ease-out); }
.btn--primary { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 32px; background: var(--ink); color: var(--bg); border-radius: 6px; }
.btn--primary:hover { background: #000; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.btn--secondary { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 24px; border: 1.5px solid var(--faint); color: var(--mid); border-radius: 6px; }
.btn--secondary:hover { border-color: var(--mid); color: var(--ink); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal--d1 { transition-delay: 0.1s; } .reveal--d2 { transition-delay: 0.2s; } .reveal--d3 { transition-delay: 0.3s; }