/* Nox: the look every page shares. Dark purple and light yellow, the black hole's eight
   colours and nothing else (assets/bh.js draws the hole and the mark); Anybody for headings, set in
   capitals, Martian Mono for the rest (each page loads the two from Google Fonts in its <head>).
   Every section is dark: .paper is kept as a name and is now a slightly lighter purple ground.
   Corners are cut in pixel steps (--step, two steps of --s). Rules only one page needs stay in that page. */
:root {
  /* the hole's colours */
  --f-void: #07040d; --f-bg: #120a1f; --f-deep: #22123b; --f-purple: #3b1e60; --f-violet: #67378d; --f-lilac: #b296cf; --f-yellow: #f4e4a1; --f-cream: #fffbe6;
  /* older names, mapped onto them */
  --f-surface: #1a0f2c; --f-paper: var(--f-cream); --f-blue: var(--f-yellow); --f-ice: var(--f-lilac); --f-orange: var(--f-cream);
  --f-line: rgba(244, 228, 161, .22); --f-line2: rgba(244, 228, 161, .4);
  --f-mute: rgba(255, 251, 230, .6); --f-mute-ink: var(--f-mute);
  --f-gut: clamp(16px, 4.4vw, 64px);
  --f-head: 'Anybody', system-ui, sans-serif; --f-mono: 'Martian Mono', ui-monospace, Menlo, monospace;
  --s: 3px;
  --step: polygon(0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s), calc(var(--s) * 2) 0,
    calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2),
    100% calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 2) 100%,
    calc(var(--s) * 2) 100%, calc(var(--s) * 2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s) * 2), 0 calc(100% - var(--s) * 2));
}
* { box-sizing: border-box; }
html { background: var(--f-bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: 8px; }
body { margin: 0; background: var(--f-bg); color: var(--f-cream); font: 400 13px/1.65 var(--f-mono); font-stretch: 87.5%; overflow-x: hidden; }
a { color: inherit; }
canvas { display: block; image-rendering: pixelated; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 0; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 850; font-stretch: 118%; margin: 0; line-height: .98; text-transform: uppercase; letter-spacing: .005em; }
p { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--f-gut); }
:focus-visible { outline: 2px solid var(--f-yellow); outline-offset: 4px; }
.paper { background: var(--f-surface); color: var(--f-cream); }
.mute, .paper .mute { color: var(--f-mute); }
.y { color: var(--f-yellow); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* for screen readers only */
.kick { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--f-yellow); }

/* ---------- the strip of trades along the top: <div class="tick"><span class="tag"><i></i>label</span><div class="tape">…</div></div> ---------- */
.tick { display: flex; align-items: center; height: 34px; border-bottom: 1px solid var(--f-line); font-size: 11px; white-space: nowrap; overflow: hidden; background: var(--f-void); }
.tick .tag { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 var(--f-gut); height: 100%; border-right: 1px solid var(--f-line); color: var(--f-yellow); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.tick .tag i { width: 6px; height: 6px; background: var(--f-yellow); animation: f-blink 1.6s steps(1) infinite; }
@keyframes f-blink { 50% { opacity: .15; } }
.tape { flex: 1; display: flex; gap: 28px; padding-left: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tape > * { flex: none; display: inline-flex; align-items: center; gap: 7px; color: var(--f-mute); text-decoration: none; }
.tape b { font-weight: 500; color: var(--f-cream); }
.tape i { width: 5px; height: 5px; background: var(--f-lilac); }
.tape .buy i { background: var(--f-yellow); }
.tape .grad { color: var(--f-yellow); }
.tape .grad i { background: var(--f-cream); box-shadow: 0 5px 0 var(--f-yellow), 0 -5px 0 var(--f-yellow); height: 3px; }
.tape .new { animation: f-slidein .5s steps(5) both; }
@keyframes f-slidein { from { transform: translateX(-30px); opacity: 0; } }

/* ---------- header: the mark (BH.mark) and the name, a quiet nav ending in a button ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; max-width: 1240px; margin: 0 auto; padding: 0 var(--f-gut); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand b { font: 850 22px/1 var(--f-head); font-stretch: 125%; letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); font-size: 12px; }
.nav a { text-decoration: none; color: var(--f-mute); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav a:hover, .nav a:focus-visible { color: var(--f-cream); }
/* the page the visitor is on ("page"), or the part of the site it belongs to ("true", as a coin's page is one of the coins) */
.nav a[aria-current="page"], .nav a[aria-current="true"] { color: var(--f-cream); text-decoration: underline; text-decoration-color: var(--f-yellow); }
.nav .btn, .nav .btn:hover, .nav .btn:focus-visible, .nav a.btn[aria-current] { color: var(--f-bg); text-decoration: none; }   /* a button stays a button on its own page */
.nav .short { display: none; }

/* ---------- buttons with pixel corners: .btn filled yellow, .btn.ghost outlined, .btn.sm smaller ---------- */
.btn { --s: 3px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 22px 14px; font: 850 13px/1 var(--f-head); font-stretch: 125%; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; background: var(--f-yellow); color: var(--f-bg); clip-path: var(--step); -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.btn:hover, .btn:focus-visible { background: var(--f-cream); }
.btn.sm { padding: 11px 15px 10px; font-size: 11px; }
.btn.ghost { position: relative; isolation: isolate; background: var(--f-line2); color: var(--f-cream); }
.btn.ghost::before { content: ''; position: absolute; inset: 2px; background: var(--f-bg); clip-path: var(--step); z-index: -1; }
.btn.ghost:hover, .btn.ghost:focus-visible { background: var(--f-yellow); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
/* keyboard focus: the pixel corners clip any outline, so the ring is drawn inside: the edge, a dark line, then a
   second line (on a filled button the fill is the second line) */
.btn:focus-visible { box-shadow: inset 0 0 0 2px var(--f-yellow), inset 0 0 0 4px var(--f-bg); }
.btn.ghost:focus-visible { box-shadow: none; }
.btn.ghost:focus-visible::before { box-shadow: inset 0 0 0 2px var(--f-bg), inset 0 0 0 4px var(--f-yellow); }

/* ---------- outlined pixel cards: .card (a 2px line, the ground inside) ---------- */
.card { --s: 4px; position: relative; isolation: isolate; background: var(--f-line); clip-path: var(--step); padding: 22px 22px 24px; }
.card::before { content: ''; position: absolute; inset: 2px; background: var(--card-bg, var(--f-bg)); clip-path: var(--step); z-index: -1; }
.paper .card { --card-bg: var(--f-surface); }

/* ---------- quiet text buttons ---------- */
.q { color: var(--f-mute); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.q:hover, .q:focus-visible, .q.on, .paper .q:hover, .paper .q.on { color: var(--f-cream); }
.paper .q { color: var(--f-mute); }

/* ---------- number blocks: a big number, then small lines under it ---------- */
.n b { display: block; font-size: clamp(22px, 2.3vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.n span { display: block; font-size: 11px; line-height: 1.55; white-space: nowrap; }
.n .l1 { margin-top: 6px; }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 10vw, 128px) 0; }
.sec h2 { font-size: clamp(30px, 4.2vw, 58px); }
.lead, .paper .lead { max-width: 58ch; margin-top: 16px; color: var(--f-mute); font-size: 13px; }

/* ---------- footer ---------- */
.foot { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; margin-top: 40px; padding-top: 26px; padding-bottom: 44px; border-top: 1px solid var(--f-line); font-size: 11px; color: var(--f-mute); }
.foot a { text-underline-offset: 4px; }

@media (max-width: 760px) {
  .top { height: 64px; }
  .nav { gap: 16px; font-size: 11px; }
  .nav .long { display: none; }
  .nav .short { display: inline; }
  .n b { font-size: 22px; }
}
/* small phones (down to 320 px): the header has to fit in one row */
@media (max-width: 420px) {
  .top { gap: 10px; }
  .brand { gap: 8px; }
  .brand b { font-size: 18px; }
  .nav { gap: 12px; }
  .nav .btn.sm { padding: 10px 11px 9px; }
  .n span { white-space: normal; }   /* two number blocks side by side: their small lines wrap rather than meet */
}
/* the narrowest phones: "how" goes (the landing's section is one scroll away), so coins, sim and launch fit */
@media (max-width: 380px) { .nav a[href$="#how"] { display: none; } }
@media (prefers-reduced-motion: reduce) { .tick .tag i, .tape .new { animation: none; } }