/* Zomi tokens and chrome.

   One ground, one accent family, one typeface. Everything on the site is a
   rectangle on black separated by a hairline: no rounded cards, no shadows, no
   gradients behind text. Numbers are the design, so they are given the room.

   Contrast against #000 is in the comment beside each text colour, and every
   number there is what scripts/check-contrast.mjs measured, not an estimate.
   scripts/qa.mjs then measures what the browser actually painted, which is the
   half that catches a rule repainting something in a colour nobody chose. */

:root {
  --ground: #000000;
  --panel: #050b08;
  --panel-2: #08120d;

  --line: #14301f;
  --line-soft: #0c1d14;

  --accent: #35e0a1;      /* 12.33:1 on black */
  --accent-hi: #7ff0c4;   /* 15.16:1 on black */

  --text: #dcefe6;        /* 17.53:1 on black, headings and figures */
  --body: #7fa493;        /*  7.63:1 on black, running prose */
  --meta: #6b8c7c;        /*  5.67:1 on black, eyebrows, labels, captions */
  --faint: #628574;       /*  5.13:1 on black, side notes and the legal line */
  --pending: #e8b75c;     /* 11.36:1 on black, the one unset state */

  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: 28px;
  --wide: 1360px;
  --rule: 1px solid var(--line);
  --rule-soft: 1px solid var(--line-soft);

  --bar-h: 52px;
}

/* The webfont and the fallback are both monospace at the same advance, so a
   late font swap moves nothing sideways. */
@font-face {
  font-family: "JetBrains Mono fallback";
  src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--text); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .35em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img, canvas { display: block; max-width: 100%; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--accent);
  color: #000;
  padding: 10px 16px;
}
.skip:focus { left: 0; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ------------------------------------------------------------------ type -- */

.eyebrow {
  margin: 0;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--meta);
}

.num {
  font-size: 22px;
  line-height: 1.25;
  color: var(--accent);
  letter-spacing: -.01em;
}

.sub { color: var(--meta); font-size: 11px; }

.lede { color: var(--body); max-width: 68ch; }

.pending { color: var(--pending); }

/* A figure with nothing behind it yet. Not an alarm and not a value: the same
   grey the labels use, so an empty market reads as empty rather than as a
   warning. The amber --pending is spent once, on the token contract pill. */
.num.none { color: var(--meta); }

/* ---------------------------------------------------------------- top bar -- */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ground);
  border-bottom: var(--rule);
}

.bar-in {
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--bar-h);
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .22em;
  font-size: 12px;
  flex: none;
}
.brand:hover { color: var(--accent); text-decoration: none; }
.brand i {
  font-style: normal;
  font-weight: 400;
  letter-spacing: .1em;
  font-size: 9px;
  color: var(--meta);
  text-transform: lowercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}
.nav a {
  color: var(--meta);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); }

.bar-tools { display: flex; align-items: center; gap: 10px; flex: none; }

.find { display: flex; align-items: stretch; border: var(--rule); }
.find input {
  width: 152px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  padding: 5px 9px;
}
.find input::placeholder { color: var(--faint); }
/* The search box draws its own accent border on focus. It gets the ring as
   well: a border is a colour change, and a colour change alone is not a focus
   indicator for anyone who cannot separate those two colours. */
.find input:focus { outline: none; }
.find input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.find:focus-within { border-color: var(--accent); }
.find button {
  border: 0;
  border-left: var(--rule);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 10px;
  letter-spacing: .16em;
  padding: 0 11px;
  cursor: pointer;
}
.find button:hover { background: var(--accent); color: #000; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .12s linear, color .12s linear;
}
.btn:hover { background: var(--accent); color: #000; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { border-color: var(--line); color: var(--faint); cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; color: var(--faint); }

.btn-quiet { border-color: var(--line); color: var(--body); }
.btn-quiet:hover { background: var(--line); color: var(--text); }

.burger {
  display: none;
  border: var(--rule);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 10px;
  letter-spacing: .16em;
  padding: 6px 12px;
  cursor: pointer;
}

/* --------------------------------------------------------------- drawer -- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ground);
  display: none;
  flex-direction: column;
  padding: 0 var(--gutter) 32px;
  overflow-y: auto;
}
.drawer[data-open] { display: flex; }

.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-h);
  border-bottom: var(--rule);
  margin-bottom: 8px;
}
.drawer-top span {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--meta);
}
.drawer-close {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  letter-spacing: .16em;
  cursor: pointer;
  padding: 6px 0;
}

.drawer a.item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  border-bottom: var(--rule-soft);
  color: var(--text);
  font-size: 17px;
  letter-spacing: .02em;
}
.drawer a.item:hover { color: var(--accent); text-decoration: none; }
.drawer a.item b {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--meta);
  min-width: 22px;
}
.drawer a.item span { margin-left: auto; color: var(--meta); font-size: 12px; }

.drawer .find { margin-top: 22px; }
.drawer .find input { width: 100%; }

/* --------------------------------------------------------------- section -- */

.band { padding: 64px 0; border-top: var(--rule); }
.band:first-of-type { border-top: 0; }

.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.band-head h2 {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--meta);
}
.band-head .side { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }

/* ------------------------------------------------------------------ grid -- */

/* The figure grid the market numbers live in. Hairlines between, no boxes. */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: var(--rule);
}
.figures > div {
  padding: 18px 20px 20px;
  border-bottom: var(--rule);
  border-right: var(--rule);
}
.figures > div:last-child { border-right: 0; }
.figures .eyebrow { margin-bottom: 8px; }

/* --------------------------------------------------------------- tokens --- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: var(--rule);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--meta);
}
.pill b { font-weight: 400; color: var(--text); letter-spacing: .06em; text-transform: none; }
.pill.on { border-color: var(--accent); color: var(--accent); }
.pill.off { border-color: #3a3218; color: var(--pending); }

.ca {
  font-size: 11px;
  letter-spacing: .02em;
  word-break: break-all;
  color: var(--text);
  text-transform: none;
}

/* ------------------------------------------------------------- zomi tile -- */

.tile { position: relative; display: block; background: var(--panel); }
.tile canvas { width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.tile figcaption,
.tile .cap {
  padding: 8px 10px 10px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--meta);
  border-top: var(--rule-soft);
}
.tile .cap b { display: block; font-weight: 400; color: var(--text); letter-spacing: .06em; }

/* ---------------------------------------------------------------- footer -- */

.foot { border-top: var(--rule); padding-top: 36px; overflow: hidden; }

/* Full bleed, and wider than the viewport on purpose: the mark is cropped by the
   edges rather than framed by them, which is what makes it read as a device
   closing the page rather than as a picture of a logo. No aspect-ratio here:
   site.js sizes the canvas to a whole number of cells per pixel, and a ratio
   would fight it for half a pixel on every letter. */
.wordmark {
  display: block;
  width: 108vw;
  max-width: none;
  margin-left: calc(50% - 54vw);
  height: auto;
  image-rendering: pixelated;
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 20px 0 34px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--meta);
}
.foot-row a { color: var(--meta); }
.foot-row a:hover { color: var(--accent); }
.foot-note {
  border-top: var(--rule-soft);
  padding: 16px 0 44px;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--faint);
  text-transform: none;
  max-width: 82ch;
}

/* ----------------------------------------------------------------- reveal -- */

/* Only hide a band when the script that shows it again has loaded. `html.js`
   is set by config.js, the first blocking script on the page, so a run with no
   scripting or a failed asset leaves every band visible instead of leaving the
   home page empty below the fold. */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s linear, transform .5s cubic-bezier(.16,1,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  /* the same selector weight as the rule above it, or this one loses */
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ 900 --- */

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: inline-block; }
  .bar-in .find { display: none; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 13px; }
  .band { padding: 36px 0; }
  .band-head { margin-bottom: 18px; }
  /* One column of figures at 390 means every row costs its own padding and its
     own rule. At desktop that air is the design; stacked, it is a third of the
     scroll. */
  .figures { grid-template-columns: 1fr; }
  .figures > div { border-right: 0; padding: 12px 0 14px; }
  .figures .eyebrow { margin-bottom: 4px; }
  .num { font-size: 20px; }
  .bar-tools .btn { padding: 6px 10px; }
  .foot { padding-top: 26px; }
  .foot-row { padding: 16px 0 24px; }
  .foot-note { padding: 14px 0 32px; }
}