/* Madness Kickstarter — base shell.
   Harmonized with Madness Games Hero / Press Kit / Unlock Tree:
   same dark canvas, Space Grotesk + JetBrains Mono, orange accent,
   1px lines, mono tracked-caps kickers. */

:root {
  --bg: #0a0b0d;
  --bg-2: #111316;
  --bg-3: #15171b;
  --ink: #f4f2ee;
  --ink-dim: #8a8d93;
  --ink-soft: #5a5d63;
  --line: #1e2126;
  --line-2: #2a2d33;
  --orange: oklch(72% 0.17 48);     /* ≈ #FF5A1F franchise accent */
  --orange-dim: oklch(55% 0.13 48);
  --orange-glow: rgba(255, 120, 40, 0.35);

  /* Sport overlay (single-source, swapped by tweaks). Default = master orange. */
  --sport: var(--orange);
  --sport-dim: var(--orange-dim);

  /* Density (rewritten by tweaks) */
  --density: 1;

  --max: 1440px;
  --pad: 80px;
}

/* Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Utilities */
.mono { font-family: 'JetBrains Mono', 'SF Mono', monospace; }
.kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.kicker .tag { color: var(--orange); font-weight: 600; }
.rule { height: 1px; background: var(--line-2); }
.em-orange { color: var(--orange); font-style: normal; }
.em-sport  { color: var(--sport); font-style: normal; }

/* Section frame */
.section {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(80px * var(--density)) var(--pad);
}
.section + .section { border-top: 1px solid var(--line); }

/* Section head */
.s-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 24px;
}
.s-head .s-num { color: var(--orange); }
.s-head h2 {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin: 12px 0 0 0;
  max-width: 760px;
}
.s-head h2 em { font-style: normal; color: var(--orange); }
.s-head .s-side {
  text-align: right;
  max-width: 360px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.55;
}
.s-head .s-side strong { color: var(--ink); font-weight: 500; }

/* Wordmark + brand mark — shared across files */
.brand { display: flex; align-items: center; gap: 14px; }
.mark {
  width: 48px; height: 48px;
  background: url("_assets/logos/madness-mark-cube-256.png") center/contain no-repeat;
  position: relative;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(255,90,31,0.30));
}
.mark::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; background: var(--orange);
}
.mark span { display: none; }
.wordmark { line-height: 1; }
.wordmark .w1 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.045em;
}
.wordmark .w2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.045em;
  color: var(--ink-soft); margin-top: -2px;
}
.wordmark .w2 em { font-style: normal; color: var(--orange); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.btn:hover { border-color: var(--ink); }
.btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #0a0b0d;
}
.btn-primary:hover { background: #ff7233; border-color: #ff7233; }
.btn .arrow { font-family: 'JetBrains Mono', monospace; font-weight: 500; }

/* Pulse dot */
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 120, 40, 0.18);
  animation: pulse 2.1s infinite;
  display: inline-block;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 120, 40, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 120, 40, 0.0); }
}

/* Subtle dot grid texture */
.dotgrid {
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.linegrid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Sport-color hairline used everywhere as accent */
.accent-bar {
  width: 4px; align-self: stretch; background: var(--sport);
}