/* LunarCrush brand v2 — petrol, paper, people. Exploration only (Nov 2026). */
@font-face { font-family: "Butler"; src: url(fonts/Butler-Light.otf) format("opentype"); font-weight: 300; }
@font-face { font-family: "Jakarta"; src: url(fonts/PlusJakartaSans-Variable.woff2) format("woff2"); font-weight: 200 800; }
@font-face { font-family: "Mono"; src: url(fonts/RobotoMono-400.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Mono"; src: url(fonts/RobotoMono-500.woff2) format("woff2"); font-weight: 500; }

:root {
  --canvas: #06090A;
  --surface: #0D1416;
  --surface-2: #121B1E;
  --petrol: #0E5661;
  --petrol-light: #2A93A1;
  --bone: #EDEBE6;
  --ink: #0A0C0D;
  --ink-muted: #4A4F52;
  --muted: rgba(237, 235, 230, .58);
  --faint: rgba(237, 235, 230, .36);
  --line: rgba(237, 235, 230, .10);
  --line-ink: rgba(10, 12, 13, .14);
  --up: #14B881;
  --down: #EB5757;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { background: var(--canvas); color: var(--bone); font-family: "Jakarta", sans-serif; font-size: 17px; line-height: 1.55; }
img { display: block; }
a { color: inherit; text-decoration: none; }

.serif { font-family: "Butler", serif; font-weight: 300; letter-spacing: -0.01em; line-height: 1.06; }
.mono { font-family: "Mono", monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { font-family: "Mono", monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--petrol-light); }
.on-paper .eyebrow { color: var(--petrol); }
.num { font-family: "Mono", monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }

.paper { background: var(--bone) url(img/tex-paper.jpg) center / 1600px auto; color: var(--ink); }
.grain { background: var(--canvas) url(img/tex-black.jpg) center / 1600px auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border-radius: 999px;
  font-family: "Jakarta"; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.btn-bone { background: var(--bone); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-line { border: 1px solid var(--line); color: var(--bone); }
.btn-line-ink { border: 1px solid var(--line-ink); color: var(--ink); }
.link { font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }