/* ============================================================
   Alpha Finance / alphafinance.io
   v3 "SIGNAL": crypto-native intelligence desk.
   Neutral black, acid-lime accent, grotesk display,
   mono telemetry, hairline panels, generative liq-surface hero.
   ============================================================ */

:root {
  --bg: #0a0b0d;
  --bg-2: #0d0f12;
  --panel: #101216;
  --panel-2: #14171c;
  --line: #1e2228;
  --line-2: #2a2f37;

  --text: #eceef0;
  --text-2: #a6adb6;
  --muted: #6b727c;
  --faint: #4a5058;

  --lime: #b8f24b;
  --lime-dim: #8fc433;

  --pos: #2ea98e;          /* validated pair on --panel */
  --neg: #e0604d;
  --pos-text: #3fd6ae;     /* brighter, small-text only */
  --neg-text: #ff7a66;

  --heat: #f2a93b;

  --display: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --sans: "Inter", -apple-system, "Segoe UI", Helvetica, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1280px;
  --r: 4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

::selection { background: var(--lime); color: #0a0b0d; }

.up { color: var(--pos-text); }
.down { color: var(--neg-text); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* live dot */
.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px color-mix(in srgb, var(--lime) 70%, transparent);
  animation: pulse 2.2s ease-in-out infinite;
  vertical-align: 1px;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   Loading state (js/loading.js)

   One skin for every feed on its way in. Bars shimmer with a slow sweep
   that carries a trace of the brand lime at its crest; a chart body gets a
   veil with the pulsing dot and the page's own caption; a feed that never
   answers turns the shimmer still and says so.
   ============================================================ */

@keyframes ld-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ld-bar {
  display: inline-block; height: 10px; width: 60%; max-width: 100%;
  border-radius: 3px; vertical-align: middle;
  background: linear-gradient(90deg, var(--panel-2) 0%, var(--panel-2) 35%, color-mix(in srgb, var(--lime) 14%, var(--line-2)) 50%, var(--panel-2) 65%, var(--panel-2) 100%);
  background-size: 200% 100%;
  animation: ld-sweep 1.8s linear infinite;
}
.ld-bar.ld-tile { height: 0.85em; width: 4.5em; border-radius: 4px; }
.ld-row td { padding-top: 0; padding-bottom: 0; }
.ld-row td.l { text-align: left; }
.ld-row .ld-bar { display: block; margin-left: auto; }
.ld-row td.l .ld-bar { margin-left: 0; }
.ld-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ld-line:last-of-type { border-bottom: 0; }
.ld-cap, .ld-cap td {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  text-align: center; white-space: nowrap;
}
tr.ld-cap td { height: 40px; border-bottom: 0; }
div.ld-cap { padding: 12px 0 4px; }
.ld-dot {
  display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; vertical-align: 1px;
  background: var(--lime); box-shadow: 0 0 6px color-mix(in srgb, var(--lime) 70%, transparent);
  animation: pulse 1.6s ease-in-out infinite;
}
.ld-dot.is-late { background: var(--faint); box-shadow: none; animation: none; }
.is-late .ld-bar { animation: none; background: var(--panel-2); opacity: 0.6; }

/* a veil over an undrawn chart: the ground the chart will paint on, with a
   faint grid so the box reads as a chart and not a hole */
.ld-veil {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 12.5% 100%,
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--lime) 5%, transparent) 50%, transparent 100%) 0 0 / 200% 100%,
    var(--panel);
  animation: ld-sweep 2.6s linear infinite;
  transition: opacity 0.25s;
}
.ld-veil span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ld-veil.is-off { opacity: 0; pointer-events: none; }

/* the same veil over a panel that is refetching on a control: the old chart
   or table stays faintly visible underneath, so the reader sees what is being
   replaced and that it is being replaced */
.ld-veil.ld-busy {
  background: color-mix(in srgb, var(--panel) 58%, transparent);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  animation: none;
}
.ld-veil.ld-busy span {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* the feed line before it has a state: a live dot that is still searching */
.feed:not(.is-live):not(.is-stale):not(.is-down):not(.is-captured):not(.is-load) .dot { background: var(--lime-dim); animation: pulse 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ld-bar, .ld-veil, .ld-dot, .feed .dot { animation: none; }
}

/* ============================================================
   Tape: full-bleed running market tape
   ============================================================ */

.tape {
  display: flex;
  align-items: stretch;
  height: 30px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.tape-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 0 15px 0 20px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--text-2);
}

.tape-track {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 72px), transparent 100%);
}

.tape-run {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: tape-roll 72s linear infinite;
}
.tape:hover .tape-run, .tape:focus-within .tape-run { animation-play-state: paused; }

@keyframes tape-roll { to { transform: translateX(-100%); } }

/* one quote: symbol, price, move. The divider is chrome, so it stays neutral;
   direction is carried by the glyph and the colour of the move itself. */
.tk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 11px;
  padding: 0 18px;
  border-left: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
}
.tk.up { --c: var(--pos-text); }
.tk.dn { --c: var(--neg-text); }

/* a quote is a link to that coin's chart on /crypto-prices/; the strip stops
   under the pointer, so a moving quote can still be clicked */
.tape a.tk { cursor: pointer; }
.tape a.tk:hover, .tape a.tk:focus-visible { background: rgba(255, 255, 255, 0.04); }
.tape a.tk:hover b, .tape a.tk:focus-visible b { color: var(--lime); }
.tape a.tk:focus-visible { outline: 1px solid var(--lime); outline-offset: -2px; }

.tk b { font-weight: 600; letter-spacing: 0.08em; color: var(--text); }
.tk .px { color: var(--text-2); font-variant-numeric: tabular-nums; }
.tk .ch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c);
  font-variant-numeric: tabular-nums;
}
/* drawn triangle instead of a glyph: JetBrains Mono has no U+25B2/25BC, and
   the fallback fonts render them oversized and off-baseline */
.tk .ch .ar {
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  flex: none;
}
.tk.up .ch .ar { border-bottom: 4.5px solid currentColor; }
.tk.dn .ch .ar { border-top: 4.5px solid currentColor; }

@media (prefers-reduced-motion: reduce) {
  .tape-run { animation: none; }
  .tape-run + .tape-run { display: none; }
  .tape-track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tape-track::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Nav
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav .wrap {
  display: flex;
  align-items: center;
  gap: 34px;
  height: 58px;
}

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark { width: 27px; height: 27px; }
.logo-word {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
}
.logo-word span { font-weight: 500; color: var(--text-2); }

.nav-links { display: flex; gap: 4px; margin-right: auto; }
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  padding: 7px 12px;
  border-radius: var(--r);
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--text); background: var(--panel-2); }

/* ---------- nav submenu ----------
   Opens on hover and on focus-within, so it works from the keyboard without
   any JS: tabbing onto the trigger reveals the menu, the next tab enters it.
   visibility (not just opacity) keeps the closed menu out of the tab order. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-links .nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret {
  opacity: 0.5;
  transition: transform 0.15s, opacity 0.15s;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { opacity: 1; transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 80;
  padding-top: 9px;          /* transparent bridge so the hover is not lost */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.14s, transform 0.14s, visibility 0.14s;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }

.nav-menu-in {
  min-width: 236px;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-2) 94%, var(--text));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.nav-links .nav-menu a {
  display: block;
  padding: 9px 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.nav-links .nav-menu a span {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;      /* one line always; the column grows to fit */
}
.nav-links .nav-menu a:hover { background: var(--panel); }
.nav-links .nav-menu a:hover span { color: var(--text-2); }

/* grouped, multi-column variant: one column per desk section */
.nav-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(212px, auto));
  gap: 0 14px;
  padding: 10px 12px 12px;
}
.nav-col-h {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 11px 7px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px;
  white-space: nowrap;
}
.nav-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 1px 11px 9px;
}
.nav-links .nav-menu .nav-sub a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s;
}
.nav-links .nav-menu .nav-sub a:hover {
  background: none;
  color: var(--lime);
  border-color: var(--line-2);
}
.nav-sub .c {
  display: flex;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--b);
  opacity: 0.75;
  transition: opacity 0.15s;
  /* optical: mono caps ride high in their line box, so lift the icon to match */
  transform: translateY(-1.5px);
}
.nav-sub .c svg { width: 100%; height: 100%; display: block; }
.nav-sub a:hover .c { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-caret { transition: none; }
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.nav-search:hover { border-color: var(--line-2); color: var(--text-2); }
.nav-search kbd {
  font-family: var(--mono);
  font-size: 9.5px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--faint);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 9px 18px;
  border-radius: var(--r);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, background 0.15s, color 0.15s;
}
.btn-lime { background: var(--lime); color: #0a0b0d; }
.btn-lime:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

/* ============================================================
   Hero

   The old hero was a headline against a decorative particle field: a poster
   for a data desk, drawn with invented data. The flagship instrument is the
   pitch, so the right-hand side is the live BTC liquidation map itself, and
   the strip beneath carries each dashboard's live headline figure. The only
   thing on screen that is not real is nothing.
   ============================================================ */

.hero {
    background:
    radial-gradient(ellipse 60% 90% at 85% 10%, color-mix(in srgb, var(--lime) 4%, transparent), transparent),
    var(--bg);
}

.hero-grid {
  display: grid;
  /* the copy takes the wider half: the map reads fine at ~half the row, and
     past that it was crowding the headline it is there to prove */
  grid-template-columns: minmax(0, 6fr) minmax(360px, 6fr);
  gap: 52px;
  align-items: center;
  padding-top: 54px;
  padding-bottom: 50px;
}

.hero-inner { max-width: 560px; }

.hero-kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime-dim);
  margin-bottom: 16px;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(30px, 3.9vw, 47px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.hero h1 .dim { color: var(--muted); }

.hero-sub {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 34em;
  margin-bottom: 24px;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

.hero-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-form input {
  flex: 0 1 250px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s;
}
.hero-form input::placeholder { color: var(--muted); }
.hero-form input:focus { outline: none; border-color: var(--lime); }

.form-note { margin-top: 10px; font-size: 13px; color: var(--lime); display: none; }
.form-note.show { display: block; }
.form-note.is-bad { color: var(--heat); }

.hero-proof {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
}
.hero-proof b { color: var(--text-2); font-weight: 600; }

/* ---------- the hero map ----------
   The flagship instrument, live, framed a step above the desk panels below.
   A card of label:value rows is every data site's hero; nobody else's hero is
   this surface. */

.heromap {
  border-color: var(--line-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.heromap .panel-body.is-map { min-height: 0; height: 286px; }

/* ============================================================
   Instruments: the five dashboards, as the hero's bottom edge
   ============================================================ */


/* ============================================================
   Sections
   ============================================================ */

.section { padding: 58px 0 64px; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.section-head h2 {
  font-family: var(--display);
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-head .more {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--lime);
}
.section-head .more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Data desk panels
   ============================================================ */

.desk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* the heatmap is the flagship, so it leads full width instead of sitting in a 2x2 */
.panel.wide { grid-column: 1 / -1; }

/* The desk cards sit in a grid, so a row is as tall as whatever is tallest in
   it and every other card gets stretched to match. There are two wrong ways to
   answer that. Letting the card keep its content height leaves dead space under
   the footer; letting the chart grow into the slack draws a 208px teaser at
   318px, which is not fuller, it is out of proportion.

   So the row is made uniform at the source instead: one body height for the
   three cards that share a row, and each kind of content fits inside it. The
   charts are then always drawn at the size they were designed for, and there is
   no slack left to distribute. */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.panel:hover { border-color: var(--line-2); }
.panel-head { flex: none; }
.panel-foot { flex: none; margin-top: auto; }   /* auto: a safety net, not the plan */
.panel-body { flex: none; min-height: 0; }

.desk-grid .panel:not(.wide) .panel-body { height: 208px; }

/* the Data desk heatmap is the real map in compact mode, not an SVG mock */
.panel-body.is-map { padding: 0; position: relative; height: 208px; }
.panel.wide .panel-body.is-map { height: 232px; }
/* the canvas takes the body's box exactly. Both chart modules watch their
   canvas with a ResizeObserver, so a width change repaints at the new size
   rather than stretching the old bitmap. */
.panel-body.is-map > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The funding teaser is an SVG, so unlike a canvas it grows with the column
   width and would otherwise be the thing setting the row height. Cap it to the
   body and centre it: past that width it simply stops growing. */
.panel-body:has(> svg) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel-body > svg { max-height: 100%; }

/* marks the current reading on the live funding chart */
#chart-fund .ping {
  transform-box: fill-box;
  transform-origin: center;
  animation: ping 2.6s ease-out infinite;
}
@keyframes ping {
  0%   { transform: scale(0.7); opacity: 0.55; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #chart-heat rect { transition: none; }
  #chart-fund .ping { animation: none; opacity: 0; }
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.panel-head h3 {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.panel-head .badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.panel-head .badge.dim { color: var(--muted); }

.panel-head .view {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--lime);
}
.panel-head .view:hover { text-decoration: underline; text-underline-offset: 3px; }

.panel-body { padding: 16px 18px 14px; }
.panel-body svg { width: 100%; height: auto; }

/* the heatmap panel's footer doubles as the switcher into the live pages */
.panel-foot a { color: var(--text-2); }
.panel-foot a:hover { color: var(--lime); }

.panel-foot {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  padding: 11px 18px 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.panel-foot .foot-maps { margin-left: auto; }
/* both halves sit on one baseline; the left label used to carry a date the
   chart's own axis already gives */
.panel-foot > span { line-height: 1.4; }
.panel-foot .foot-maps a { margin-left: 9px; }

/* the badge stops claiming LIVE when the feed is not */
.badge.is-off { color: var(--muted); }
.badge.is-off .live-dot { background: var(--faint); box-shadow: none; animation: none; }

/* a dated capture is not live and does not dress as it: no dot, just the date */
.badge.dim { color: var(--faint); border: 1px solid var(--line-2); border-radius: 3px; padding: 2px 6px; }

/* the chart's latest reading, sitting on the chart like a legend: the head
   has no room for it in a three-up column without wrapping its own title */
.body-stat {
  position: absolute;
  top: 9px;
  left: 12px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.body-stat:empty { display: none; }
.body-stat i { font-style: normal; font-weight: 600; }
.body-stat .up { color: var(--pos-text); }
.body-stat .down { color: var(--neg-text); }

/* ============================================================
   Data tables

   The ETF funds table, the treasury companies table and the DeFi pools table
   are the same component wearing three class names, and they had drifted into
   three different type scales. A single row was carrying two typefaces, three
   sizes, three weights and five colours, and the figures were dimmer than the
   chrome around them.

   One ladder, defined here, used by all three:

     name   13px sans 600            the label, in a text face not a display
                                     face: Space Grotesk is for headlines, and
                                     at 14px inside a data row it shouts over
                                     the numbers it is supposed to introduce.
     cell   12.5px mono, --text      the figures are the brightest thing in the
                                     row, because they are the reason for it.
     sub    11px mono, --muted       never --faint: at 2.2:1 on a panel the
                                     ticker and the country were unreadable.
     head   10px mono, --text-2      one step up in size and two in contrast
                                     from where these started.

   Page skins own layout, width and colour-by-meaning. They do not re-declare
   the type, so the three cannot drift apart again.
   ============================================================ */

.funds, .cos, .pools {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.funds th, .cos th, .pools th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.funds th:first-child, .funds th.l,
.cos th:first-child, .cos th.l,
.pools th:first-child, .pools th.l { text-align: left; }

.funds td, .cos td, .pools td {
  padding: 9px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: right;
  color: var(--text);
  white-space: nowrap;
}
.funds tr:last-child td, .cos tr:last-child td, .pools tr:last-child td { border-bottom: 0; }
.funds tbody tr, .cos tbody tr, .pools tbody tr { transition: background 0.15s; }
.funds tbody tr:hover, .cos tbody tr:hover, .pools tbody tr:hover { background: var(--panel-2); }

/* Sortable heads. The caret is absolutely positioned on the right-aligned
   columns: in the text flow it reserved its width whether or not it was
   visible, which sat every sortable label ~12px inboard of the figures it
   labels. Left-aligned heads keep it inline, where a trailing caret costs the
   alignment nothing. */
.funds th[data-k], .cos th[data-k], .pools th[data-k] {
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: color 0.13s;
}
.funds th[data-k]:hover, .cos th[data-k]:hover, .pools th[data-k]:hover { color: var(--text); }
.funds th[data-k]::after, .cos th[data-k]::after, .pools th[data-k]::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: 1.5px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0;
}
.funds th[data-k]:not(.l)::after,
.cos th[data-k]:not(.l)::after,
.pools th[data-k]:not(.l)::after {
  position: absolute;
  right: 5px;
  top: 50%;
  margin: -2px 0 0 0;
}
.funds th[data-k][aria-sort], .cos th[data-k][aria-sort], .pools th[data-k][aria-sort] { color: var(--text); }
.funds th[data-k][aria-sort]::after,
.cos th[data-k][aria-sort]::after,
.pools th[data-k][aria-sort]::after { opacity: 1; color: var(--lime); }
.funds th[data-k][aria-sort="ascending"]::after,
.cos th[data-k][aria-sort="ascending"]::after,
.pools th[data-k][aria-sort="ascending"]::after {
  border-top: 0;
  border-bottom: 4px solid currentColor;
}

/* the row number is chrome, so it is the one thing allowed to recede */
.funds .rk, .cos .rk, .pools .rk {
  width: 30px;
  text-align: left;
  font-size: 11px;
  color: var(--muted);
}

/* the name cell: one line of label, one line of identifiers under it */
.funds .tkr, .cos .nm, .pools .pl b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--text);
}
.funds .issuer, .cos .co-tk, .pools .pl .sub {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.funds .fund, .cos .co, .pools .pl { text-align: left; }

/* colour carries meaning here and nothing else, so it is the only thing a
   skin adds on top of the scale */
.funds .up, .cos .up, .pools .up { color: var(--pos-text); }
.funds .down, .cos .down, .pools .down { color: var(--neg-text); }
.funds .none, .cos .none, .pools .none { color: var(--muted); }
.funds .strong, .cos .strong, .pools .strong { color: var(--text); }

/* a two-line figure cell: the number, then what it is a proportion of */
.cos .co-pl b, .pools .apy b { display: block; font-weight: 500; }
.cos .co-pl span, .pools .apy span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

/* ---------- the pager under a long table ----------
   Fifty rows a page; the count on the left, two arrows in a seg on the
   right. Hidden while the table fits on one page. */
.tbl-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.tbl-pager[hidden] { display: none; }
.tbl-pager-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); }
.tbl-pager .seg { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.tbl-pager .seg button {
  min-width: 34px; padding: 6px 10px; border: 0; border-left: 1px solid var(--line); background: transparent;
  font-family: var(--mono); font-size: 13px; color: var(--muted); cursor: pointer; transition: color 0.13s, background 0.13s;
}
.tbl-pager .seg button:first-child { border-left: 0; }
.tbl-pager .seg button:hover:not(:disabled) { color: var(--text); background: var(--panel-2); }
.tbl-pager .seg button:disabled { opacity: 0.35; cursor: default; }

/* ---------- trust score pills ----------
   Shared by the DeFi yields page and the home page teaser. A number out of
   100 in the colour of its tier: Strong, Fair, Weak, Poor, or no score. */

.ttable .gr { min-width: 34px; padding: 2px 6px 1px; font-size: 9.5px; }

.gr {
  display: inline-block;
  min-width: 32px;
  padding: 3px 7px 2px;
  border: 1px solid;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-align: center;
  white-space: nowrap;
}
.gr-strong { color: var(--lime); background: color-mix(in srgb, var(--lime) 15%, transparent); border-color: color-mix(in srgb, var(--lime) 45%, transparent); }
.gr-fair   { color: #6fd6c0; background: color-mix(in srgb, #2ea98e 12%, transparent); border-color: color-mix(in srgb, #2ea98e 34%, transparent); }
.gr-weak   { color: var(--heat); background: color-mix(in srgb, var(--heat) 12%, transparent); border-color: color-mix(in srgb, var(--heat) 38%, transparent); }
.gr-poor   { color: var(--neg-text); background: color-mix(in srgb, var(--neg) 12%, transparent); border-color: color-mix(in srgb, var(--neg) 40%, transparent); }
.gr-none   { color: var(--muted); background: transparent; border-color: var(--line-2); }

/* treasury table */
.ttable {
  width: 100%;
  /* the body is a fixed height shared with the two charts beside it, so the
     rows divide that height rather than setting it */
  height: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* fixed, so the two figure columns get the width they need and the company
     column gets the remainder. Under auto layout the long names bid the name
     column wide and pushed "840.4K BTC" onto a second line. */
  table-layout: fixed;
}
.ttable th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: left;
  padding: 4px 0 7px;
  border-bottom: 1px solid var(--line);
}
.ttable th:last-child, .ttable td:last-child { text-align: right; }
.ttable th:nth-child(2) { width: 86px; }
.ttable th:nth-child(3) { width: 70px; }
.ttable td {
  font-size: 12px;
  /* tighter than a full table's: five rows and a header have to sit inside the
     same 208px the flow chart next door occupies */
  padding: 5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  color: var(--text);
  white-space: nowrap;       /* a wrapped "840.4K BTC" is two ragged lines */
}
.ttable tr:last-child td { border-bottom: 0; }

/* Only the name is clipped. The ticker is the identifier a reader scans for, so
   it sits outside the clipped span and survives however long the name runs. */
.ttable .co {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: baseline;
  /* a clipped name pushes its ticker right up to the cell edge, and without a
     gutter "CEPO" ends up touching "30.0K BTC" */
  padding-right: 12px;
}
.ttable .co > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ttable .co .tt-rk {
  flex: none;
  width: 14px;
  margin-right: 4px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  color: var(--faint);
}
.ttable .co small {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
  flex: none;
}
/* the cell that stands in for the rows: waiting on the feed, or told it failed.
   Left-aligned against the last-child rule, since it spans the whole table. */
.ttable .tt-none { text-align: left; color: var(--muted); font-size: 11.5px; padding: 18px 0; }

/* ============================================================
   Featured research: the three strongest pieces, above the desk
   ============================================================ */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.fcard {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.fcard:hover { border-color: var(--lime-dim); transform: translateY(-2px); }

.fcard img {
  width: 100%;
  height: auto;              /* let aspect-ratio win over the img height attribute */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.fcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; }

.fcard .cat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime-dim);
  margin-bottom: 9px;
}
.fcard .cat i { font-style: normal; color: var(--muted); letter-spacing: 0.06em; }

.fcard h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.012em;
  margin-bottom: 9px;
  transition: color 0.15s;
}
.fcard:hover h3 { color: var(--lime); }

.fcard .dek { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ============================================================
   Research
   ============================================================ */

.research-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 44px;
}

.feature-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 14px;
}

.feature h3 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.feature h3 a:hover { color: var(--lime); }

.feature .dek {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 42em;
  margin-bottom: 16px;
}

.feature .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.feature .meta b { color: var(--text-2); font-weight: 500; }
.feature .meta .sep { margin: 0 8px; color: var(--faint); }

.feature-thumb {
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
  margin-bottom: 18px;
}
.feature-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.2s;
}
.feature:hover .feature-thumb img { transform: scale(1.015); }

/* latest feed */
.feed-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}

.feed-item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.feed-thumb {
  width: 104px;
  height: 73px;
  border: 1px solid var(--line);
  border-radius: 4px;
  object-fit: cover;
  background: var(--panel);
}
.feed-item h4 {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
  transition: color 0.15s;
}
.feed-item:hover h4 { color: var(--lime); }
.feed-item p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.feed-item .cat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime-dim);
  display: block;
  margin-bottom: 5px;
}
.feed-item .cat .date { color: var(--muted); letter-spacing: 0.06em; }


/* ============================================================
   Rankings
   ============================================================ */

.rank-note {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 60em;
  margin: 0 0 22px;
}
.rank-note a { color: var(--lime); }
.rank-note a:hover { text-decoration: underline; }

.rank-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.rank-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 18px 16px;
  transition: border-color 0.15s, transform 0.15s;
}
.rank-card:hover { border-color: var(--lime-dim); transform: translateY(-2px); }

.rank-card .upd {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.rank-card h3 {
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.rank-list { list-style: none; margin-bottom: 16px; }
.rank-list li {
  display: flex;
  align-items: baseline;
  padding: 7.5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: 13.5px;
  font-weight: 500;
}
.rank-list li:last-child { border-bottom: 0; }
.rank-list .pk-n { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-right: 10px; }
.rank-list .dots { flex: 1; border-bottom: 1px dotted var(--line-2); margin: 0 8px; transform: translateY(-3px); }
.rank-list .pk-s { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--lime); }

.rank-card .mlink {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--lime);
}
.rank-card:hover .mlink { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Weekly Alpha
   ============================================================ */

.weekly {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 120% at 80% 0%, color-mix(in srgb, var(--lime) 7%, transparent), transparent 60%),
    var(--bg-2);
}

.weekly .wrap {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 44px;
}

.weekly-copy .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 10px;
  display: block;
}

.weekly-copy h2 {
  font-family: var(--display);
  font-size: clamp(25px, 2.6vw, 33px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.weekly-copy p {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 36em;
  margin-bottom: 18px;
}

.weekly-meta {
  display: flex;
  gap: 28px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.weekly-meta b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 3px;
}

/* issue preview terminal card */
.issue {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
}
.issue-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.issue-bar .no { margin-left: auto; color: var(--faint); text-transform: none; }

.issue ol { list-style: none; counter-reset: toc; padding: 8px 18px 14px; }
.issue ol li {
  counter-increment: toc;
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.45;
}
.issue ol li:last-child { border-bottom: 0; }
.issue ol li::before {
  content: "0" counter(toc);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--lime);
  padding-top: 2px;
}
.issue-foot {
  padding: 0 18px 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--faint);
}

/* ============================================================
   Footer
   ============================================================ */

.footer { padding: 48px 0 36px; background: var(--bg); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr));
  gap: 32px 36px;
  margin-bottom: 34px;
}

.footer-brand p {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 30em;
}

.footer h5 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 10px;
}

.footer-col a {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  padding: 4px 0;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.65;
}
.footer-legal p + p { margin-top: 8px; }
.footer-legal strong { color: var(--muted); }

.footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* ---------- tooltip ----------
   One hover readout for every chart, filled by js/tip.js: what and when, the
   figure that matters, then label and value rows. Words are set in the text
   face; only figures are tabular. */

.tip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  box-sizing: border-box;
  max-width: 340px;
  padding: 10px 12px 11px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #14171c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.35);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.1s;
  white-space: nowrap;
}
.tip.show { opacity: 1; }
.tip b { font-weight: 600; color: var(--text); }
.tip b.up, .tip .up { color: var(--pos-text); }
.tip b.down, .tip .down { color: var(--neg-text); }
.tip i { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px; vertical-align: 0; }

.tip-h { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.tip-h b { font-size: 12.5px; letter-spacing: -0.005em; }
.tip-h span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tip-hero { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.tip-hero b { font-family: var(--display); font-size: 19px; line-height: 1.15; letter-spacing: -0.02em; }
.tip-hero span { font-size: 11.5px; color: var(--text-2); }
.tip-rows { display: grid; gap: 3px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tip-h + .tip-rows { margin-top: 7px; }
.tip-rows:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tip-r { display: flex; align-items: baseline; justify-content: space-between; gap: 22px; }
.tip-r span { display: flex; align-items: center; min-width: 0; color: var(--text-2); }
.tip-r b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
.tip-r.is-strong span { color: var(--text); }
.tip-r.is-strong b { font-weight: 600; }
.tip-grid { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tip-grid div { display: flex; flex-direction: column; }
.tip-grid span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tip-grid b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
.tip-f { max-width: 300px; margin-top: 8px; font-size: 11px; line-height: 1.45; color: var(--muted); white-space: normal; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 40px; padding-bottom: 38px; }
  .heromap .panel-body.is-map { height: 238px; }
  .rank-grid { grid-template-columns: 1fr 1fr; }
  .research-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .nav-links { display: none; }
  .nav-search { display: none; }
  .logo-word { font-size: 15px; }

  .hero-form { flex-direction: column; align-items: stretch; }
  .hero-form input { flex: none; width: 100%; }
  .hero-proof { margin-left: 0; margin-top: 2px; }


  .desk-grid { grid-template-columns: 1fr; }
  .panel.wide { grid-column: auto; }
  .featured-grid { grid-template-columns: 1fr; }
  .rank-grid { grid-template-columns: 1fr; }

  .feed-item { grid-template-columns: 84px 1fr; gap: 13px; }
  .feed-thumb { width: 84px; height: 59px; }

  .section-head { flex-wrap: wrap; row-gap: 6px; }

  .weekly .wrap { grid-template-columns: 1fr; gap: 36px; }
  .weekly-meta { flex-wrap: wrap; gap: 14px 24px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-meta { flex-direction: column; gap: 6px; }
  .section { padding: 44px 0 50px; }
}


/* ============================================================
   Data desk row labels and the mini-bar teaser component
   (blockchain data and project revenue panels).
   ============================================================ */

.desk-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.desk-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.desk-grid + .desk-sub { margin-top: 26px; }

.ttable i { font-style: normal; }

.mini-bars { display: flex; flex-direction: column; padding-top: 2px; }
.mini-row {
  display: grid;
  grid-template-columns: 126px 1fr 78px;
  align-items: center;
  gap: 10px;
  padding: 6.5px 0;     /* five rows plus the header fit the same 208px the tables use */
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
/* the bar panels read as tables like the panels beside them: a header row of
   the same height, and each row the same height */
.mini-head {
  display: grid;
  grid-template-columns: 126px 1fr 78px;
  gap: 10px;
  padding: 4px 0 7px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mini-head span:last-child { text-align: right; }
.mini-row:last-child { border-bottom: 0; }
.mini-n {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-n small {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
.mini-t {
  height: 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
}
.mini-t i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--lime);
  min-width: 2px;
}
.mini-v {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mini-v small { font-size: 10px; color: var(--faint); margin-left: 5px; }


/* ============================================================
   Partners strip: muted mono marks between the hero and the desk.
   Every mark renders through a CSS mask, so the page owns the colour;
   mark-only brands (OKX, Bitunix) carry their name as text, the same
   rule the buy table uses.
   ============================================================ */

.partners { background: var(--bg); }
.partners-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  margin-top: 6px;
  padding-top: 0;
  padding-bottom: 10px;
}
/* the rule is drawn inside the content box, so it lines up with the boards
   below rather than running out across the page gutters */
.partners-row::before {
  content: "";
  flex-basis: 100%;
  height: 1px;
  background: var(--line);
  margin-bottom: 12px;                 /* + the 14px row gap = 26px */
}
.pl-k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  margin-right: 8px;
}
.partners-row .pl { display: inline-flex; align-items: center; cursor: default; }
.pl-m {
  display: block;
  height: 19px;
  background: var(--muted);
  -webkit-mask: var(--u) center / contain no-repeat;
  mask: var(--u) center / contain no-repeat;
  transition: background 0.15s;
}
.partners-row .pl:hover .pl-m { background: var(--text-2); }
@media (max-width: 720px) {
  .partners-row { gap: 12px 24px; }
  .pl-k { width: 100%; margin-right: 0; }
}


/* one mark per desk panel, left of its title */
.panel-head .ph-ic {
  display: inline-flex;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  color: var(--lime);
  flex: none;
}
.panel-head .ph-ic svg { width: 100%; height: 100%; display: block; }

/* the foot is one line, always: the label truncates, the links never wrap */
.panel-foot > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-foot .foot-maps { flex: none; white-space: nowrap; }

/* the desk's row labels carry their own rules, so the section head
   does not also get to draw one */
#desk .section-head,
#featured .section-head,
#research .section-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; }

/* one vertical rhythm down the home page: every block sits 72px above the
   next heading. Adjacent sections split it 36/36; the first takes the whole
   72 against the exchanges strip, the last takes it against the weekly band. */
#desk { padding: 72px 0 36px; }
#featured { padding: 36px 0; }
#research { padding: 36px 0 72px; }
@media (max-width: 760px) {
  #desk { padding: 52px 0 26px; }
  #featured { padding: 26px 0; }
  #research { padding: 26px 0 52px; }
}


/* dropdown items: an icon column beside the label; coin menus are one line
   with the ticker pushed to the right edge */
.nav-links .nav-menu a {
  display: grid;
  grid-template-columns: 15px 1fr;
  column-gap: 10px;
  align-items: center;
}
.nav-links .nav-menu a .nm-ic {
  display: inline-flex;
  width: 15px;
  height: 15px;
  grid-row: 1 / span 2;
  color: var(--lime);
}
.nav-links .nav-menu a .nm-ic svg { width: 100%; height: 100%; display: block; }
.nav-links .nav-menu a > span:not(.nm-ic) { grid-column: 2; }

.nav-links .nav-menu .nav-coins a { display: flex; align-items: center; gap: 10px; }
.nav-links .nav-menu .nav-coins a .nm-ic { color: var(--b, var(--lime)); }
.nav-links .nav-coins a .nm-tk {
  display: inline;
  margin: 0 0 0 auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--faint);
}


/* teaser marks: one ringed chip class shared by every desk panel */
.tt-ic {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: -4px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-2);
  object-fit: contain;
}
.mini-n .tt-ic { width: 16px; height: 16px; vertical-align: -3.5px; margin-right: 7px; }
.tt-ic-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: -4px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-2);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
}


/* ============================================================
   Data desk board: the six panels as one bordered surface,
   hairline-divided, rather than six floating cards. Home page only:
   nothing else uses .desk-grid.
   ============================================================ */

.desk-board {
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--line);          /* shows through the 1px gaps as rules */
}
.desk-board .desk-sub {
  margin: 0;
  padding: 9px 18px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  background: var(--panel-2);
}
.desk-board .desk-sub::after { display: none; }
.desk-board .desk-grid + .desk-sub { margin-top: 1px; }
.desk-board .desk-grid { gap: 1px; margin-bottom: 1px; }
.desk-board .desk-grid:last-child { margin-bottom: 0; }
.desk-board .panel {
  border: 0;
  border-radius: 0;
  background: var(--bg);
  transition: background 0.15s;
}
.desk-board .panel:hover { background: var(--panel); }
.desk-board .panel-head { padding: 12px 18px; }
.desk-board .panel-head .ph-ic { color: var(--muted); }
.desk-board .panel-head .badge { color: var(--text-2); }
.desk-board .panel-head .view {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.desk-board .panel-head .view:hover { color: var(--text); text-decoration-color: currentColor; }
.desk-board .panel-foot a { color: var(--text-2); }
.desk-board .panel-foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* bars: grey, the leader alone in lime */
.desk-board .mini-t i { background: var(--muted); }
.desk-board .mini-row:first-child .mini-t i,
.desk-board .mini-head + .mini-row .mini-t i { background: var(--lime); }


/* ============================================================
   Research boards: the featured cards and the lead-plus-feed on the
   same surface as the desk. Hairlines, not card borders; the type
   inside stays as it was, only the chrome is greyed and set in
   sentence case.
   ============================================================ */

.research-board {
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
}
/* each cell draws its own hairline into the 1px gap, so a grid with cells
   filtered out (the blog hub) does not leave painted gaps behind */
.research-board .fcard,
.research-board .feature,
.research-board .feed { box-shadow: 0 0 0 1px var(--line); }
.research-board .desk-sub {
  margin: 0;
  padding: 9px 18px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.research-board .desk-sub::after { display: none; }

/* featured: three cells */
.research-board .featured-grid { gap: 1px; }
.research-board .fcard {
  border: 0;
  border-radius: 0;
  background: var(--bg);
  transition: background 0.15s;
}
.research-board .fcard:hover { background: var(--panel); transform: none; }
.research-board .fcard-body { padding: 15px 18px 18px; }
.research-board .fcard .cat {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 8px;
}
.research-board .fcard .cat i { letter-spacing: 0; }
.research-board .fcard:hover h3 {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
}

/* latest: the lead in one cell, the feed in the other */
.research-board .research-grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1px;
}
.research-board .feature { background: var(--bg); padding: 18px 18px 22px; }
.research-board .feed { background: var(--bg); padding: 2px 18px 4px; }
.research-board .feature-thumb { border-radius: 3px; margin-bottom: 16px; }
.research-board .feature-kicker,
.research-board .feed-item .cat {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.research-board .feature-kicker { margin-bottom: 10px; }
.research-board .feed-item .cat .date { letter-spacing: 0; }
.research-board .feature h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; }
.research-board .feature h3 a:hover,
.research-board .feed-item:hover h4 {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
}
.research-board .feature .meta {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0;
}
.research-board .feature .meta b { font-weight: 500; }
.research-board .feed-item:last-child { border-bottom: 0; }

@media (max-width: 1080px) {
  /* restated: these selectors outrank the single-column rules above */
  .research-board .research-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .research-board .featured-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) and (min-width: 761px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* desk teasers: the name gets the whole cell (the ticker tag was what clipped
   it), and the foot is one short fact in a readable grey */
.desk-board .ttable .co small,
.desk-board .mini-n small { display: none; }
.desk-board .panel-foot { color: var(--muted); }
.desk-board .panel-foot > span:first-child { flex: 1; }

/* ---------- venue marks ----------
   Written by js/marks.js, from assets/logos/exchanges. A venue with no mark
   shows its initials in the same footprint, so a column stays aligned. */
.exlogo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex-shrink: 0; }
.exlogo.is-missing { display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 8px; color: var(--text-2); }

/* ---------- the account button (js/acct.js): Sign in, or the reader's face ---------- */
[data-acct][hidden] { display: none !important; }
.acct-face {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  background: color-mix(in srgb, var(--lime) 18%, var(--panel-2)); color: var(--lime);
  font-style: normal; font-family: var(--display); font-size: 10.5px; font-weight: 700; line-height: 1;
}

/* ---------- command palette (js/palette.js): the terminal's and the marketing nav's search ---------- */

.term-palette {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  background: rgba(4, 5, 7, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.term-palette[hidden] { display: none; }
.palette {
  width: min(600px, calc(100vw - 32px));
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.palette-in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.palette-in svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.palette-in input {
  flex: 1;
  height: 48px;
  border: 0;
  background: none;
  font-size: 15px;
  outline: none;
}
.palette-in input::placeholder { color: var(--muted); }
.palette-in kbd {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--faint);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 2px 5px;
}
.palette-list {
  max-height: 52vh;
  overflow-y: auto;
  padding: 6px;
  list-style: none;
}
.palette-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 5px;
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
}
.palette-list li.on { background: var(--panel-2); color: var(--text); }
.palette-list li .ic { display: flex; width: 15px; height: 15px; color: var(--muted); }
.palette-list li.on .ic { color: var(--lime); }
.palette-list li .ic svg { width: 100%; height: 100%; }
.palette-list li .g {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.palette-list li .k {
  display: inline-flex;
  gap: 3px;
}
.palette-list li .k i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--faint);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 2px 4px;
}
.palette-list .none { color: var(--muted); cursor: default; }
.palette-foot {
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--faint);
}
.palette-foot kbd {
  font-family: inherit;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 1px 4px;
  margin-right: 4px;
}