/* ============================================================
   CUTPAD — the look.

   A market page printed on paper: warm stock, hairline rules,
   serif headlines, mono figures. Nothing glows, nothing is
   glass, and the only saturated things on the page are the
   accent marks that mean money moved.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --paper: #f4f1e9;
  /* The panels are see-through, not frosted: no blur behind any of
     them, so the landscape runs under every card, table and stub
     at full sharpness. These two alphas are the whole dial — the
     only thing keeping a tabular figure off a mountain ridge is
     this much cream. `--paper` itself stays solid: it is also the
     text colour on the ink buttons. */
  --paper-2: rgba(239, 235, 225, 0.34);
  --card: rgba(251, 249, 244, 0.36);
  --card-solid: #fbf9f4;
  --ink: #17150f;
  --ink-2: #4a463c;
  --ink-3: #7d786c;
  --rule: #ddd6c6;
  --rule-hard: #c6bda9;
  --accent: #1b3a6b;
  --accent-soft: #e3e8f2;
  --green: #14613c;
  --green-soft: #dfeade;
  --red: #a7240e;

  --display: 'Instrument Serif', 'Times New Roman', serif;
  --text: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --gutter: clamp(16px, 4vw, 44px);
  --max: 1220px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Transparent, deliberately: the page sits on the artwork below,
     and a background here would paint over it. */
  background: transparent;
  color: var(--ink);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- the artwork underneath --------------------------
   A looping teal ink landscape, fixed to the viewport so the
   page scrolls across it instead of dragging it along. It is
   under everything (z-index -2) and takes no clicks.

   Over it sits one cream wash — lighter towards the bottom,
   where the lake and the cranes are, heavier up top where the
   dense tables live. Without it a 15px tabular figure has to
   compete with a moving image, and loses.
   ------------------------------------------------------------ */

.page-media {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--paper);
  overflow: hidden;
}

.page-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  /* The clip is drawn in teal; the site's ink is blue. Rotating
     the hue about 28 degrees walks the teal over to the same
     blue, and the extra saturation is what makes the mountains
     read at all through the cream wash above them. */
  filter: hue-rotate(28deg) saturate(1.55) contrast(1.08);
  animation: fade-in 1.4s ease both;
}

.page-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* the faint ruled texture of ledger paper, two hairlines, no image */
    linear-gradient(transparent 27px, rgba(23, 21, 15, 0.03) 28px),
    linear-gradient(
      180deg,
      rgba(244, 241, 233, 0.9) 0%,
      rgba(244, 241, 233, 0.84) 34%,
      rgba(244, 241, 233, 0.71) 64%,
      rgba(244, 241, 233, 0.62) 100%
    );
  background-size: 100% 28px, 100% 100%;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; margin: 0; }

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

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.up { color: var(--green); }
.down { color: var(--red); }
.muted { color: var(--ink-3); }
.hide { display: none !important; }

/* ---------- masthead ---------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule-hard);
  background: rgba(244, 241, 233, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

.wordmark {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.wordmark i { font-style: italic; color: var(--accent); }
.wordmark s { text-decoration: none; color: var(--accent); }
/* The mark, at the wordmark's own size. Nudged down a touch because
   the serif's cap height sits above the icon's optical centre. */
.wordmark__mark { vertical-align: -0.12em; margin-right: 0.3em; display: inline-block; }

nav.links { display: flex; gap: 18px; margin-left: auto; align-items: center; flex-wrap: wrap; }
nav.links a {
  text-decoration: none;
  font-size: 13.5px;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
nav.links a:hover { color: var(--ink); border-color: var(--rule-hard); }
nav.links a[aria-current='page'] { color: var(--ink); border-color: var(--accent); }

/* the tape: real prices, scrolling, the one moving thing up top */
.tape {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  overflow: hidden;
  height: 30px;
  position: relative;
}
.tape__row {
  display: flex;
  gap: 28px;
  align-items: center;
  height: 30px;
  white-space: nowrap;
  width: max-content;
  animation: tape 60s linear infinite;
  padding-left: 24px;
}
.tape:hover .tape__row { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tape__item { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0.02em; }
.tape__item b { color: var(--ink); font-weight: 600; }

/* ---------- buttons ----------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13.5px/1 var(--text);
  padding: 11px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: rgba(23, 21, 15, 0.05); }
.btn--accent { background: var(--accent); border-color: var(--accent); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--sm { padding: 7px 11px; font-size: 12.5px; }

/* ---------- hero -------------------------------------------- */

/* The gaps are where the artwork lives. Everything below the
   masthead is spaced so there is open page between one panel and
   the next — the panels are translucent, but it is these runs of
   nothing that actually let the landscape read. */
.hero { padding: clamp(40px, 6vw, 76px) 0 clamp(60px, 10vh, 118px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr); gap: clamp(24px, 5vw, 56px); align-items: start; }
.eyebrow {
  font: 500 11px/1 var(--text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::after { content: ''; height: 1px; background: var(--rule-hard); flex: 1; }

.hero h1 {
  font-size: clamp(46px, 8vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.025em;
}
.hero h1 em { font-style: italic; color: var(--ink); }
.hero__lede { font-size: clamp(16px, 2vw, 18.5px); color: var(--ink-2); max-width: 54ch; margin: 22px 0 26px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* the round clock — a receipt stub */
/* Every panel below is see-through. The blur is what keeps a
   15px tabular figure legible with a mountain ridge moving
   underneath it — without it the numbers have to compete with the
   artwork, and they lose. */
.stub {
  border: 1px solid var(--ink);
  background: var(--card);
  box-shadow: 6px 6px 0 rgba(23, 21, 15, 0.08);
  border-radius: 2px;
}
.stub__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--rule-hard);
  font: 500 11px/1 var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stub__body { padding: 16px; }
.clock { font-family: var(--mono); font-size: clamp(36px, 6vw, 52px); letter-spacing: -0.04em; line-height: 1; }
.clock small { font-size: 14px; letter-spacing: 0; color: var(--ink-3); }
.meter { height: 6px; background: var(--paper-2); border: 1px solid var(--rule-hard); margin: 14px 0 6px; position: relative; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--accent); display: block; }
.stub__rows { border-top: 1px dashed var(--rule-hard); margin-top: 14px; padding-top: 12px; display: grid; gap: 8px; }
.stub__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.stub__row span { color: var(--ink-3); }

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

.section { padding: clamp(46px, 8vh, 96px) 0; border-top: 1px solid var(--rule); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 3vh, 32px); flex-wrap: wrap; }
.section__head h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.05; }
/* Section headings sit on open artwork now rather than on a
   panel, so their sub-copy takes the darker ink — the lightest
   grey disappeared into the mountains. */
.section__head p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; max-width: 60ch; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  border: 1px solid var(--rule-hard);
  background: var(--card);
}
.kpi { padding: 18px; border-right: 1px solid var(--rule); }
.kpi:last-child { border-right: 0; }
.kpi h3 { font-family: var(--text); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.kpi .v { font-family: var(--mono); font-size: 27px; letter-spacing: -0.03em; margin-top: 8px; display: block; }
.kpi .s { font-size: 12.5px; color: var(--ink-3); }

/* ---------- ruled table -------------------------------------- */

.sheet {
  border: 1px solid var(--rule-hard);
  background: var(--card);
  overflow-x: auto;
}
table.ledger { width: 100%; border-collapse: collapse; min-width: 720px; }
table.ledger th {
  text-align: left;
  font: 500 10.5px/1 var(--text);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule-hard);
  white-space: nowrap;
  /* The header row keeps a little more cream than the panel it
     sits in: it is the one band of small caps on the page and it
     has to stay separable from the rows under it. */
  background: rgba(239, 235, 225, 0.52);
}
table.ledger td { padding: 13px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; font-size: 14px; }
table.ledger tbody tr:hover { background: rgba(27, 58, 107, 0.04); cursor: pointer; }
table.ledger tbody tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }

.ticker-cell { display: flex; align-items: center; gap: 10px; }
/* A coin's mark: its own picture laid over the two letters. The
   letters are always in the markup, so a coin with no image — or
   one whose image fails — shows a face rather than a hole. */
.sigil {
  position: relative;
  overflow: hidden;
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--ink);
  display: grid; place-items: center;
  font: 600 11px/1 var(--mono);
  background: var(--paper-2);
  border-radius: 2px;
}
.sigil img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The coin page wears its own mark at headline size. */
.title-mark { display: inline-block; vertical-align: -0.12em; margin-right: 0.28em; }
.title-mark .sigil {
  width: clamp(44px, 6vw, 72px);
  height: clamp(44px, 6vw, 72px);
  font-size: clamp(15px, 2vw, 22px);
  border-radius: 3px;
}
.ticker-cell b { font-weight: 600; letter-spacing: -0.01em; }
.ticker-cell span { display: block; font-size: 12px; color: var(--ink-3); }

.tag {
  display: inline-block;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 7px;
  border: 1px solid var(--rule-hard);
  border-radius: 2px;
  color: var(--ink-2);
  background: var(--paper-2);
}
.tag--live { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tag--paid { border-color: var(--green); color: var(--green); background: var(--green-soft); }

/* ---------- calls feed --------------------------------------- */

.calls {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule-hard);
  background: var(--card);
}
.call { padding: 16px 18px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; }
.call:last-child { border-bottom: 0; }
.call__who { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.call__who b { font-weight: 600; }
.call__who .addr { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.call__body { font-family: var(--display); font-size: clamp(17px, 2.4vw, 21px); line-height: 1.3; grid-column: 1 / -1; }
.call__body::before { content: '\201C'; color: var(--accent); }
.call__body::after { content: '\201D'; color: var(--accent); }
.call__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); grid-column: 1 / -1; }
.call__earn { text-align: right; font-family: var(--mono); font-size: 15px; white-space: nowrap; }
.call__earn span { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-family: var(--text); }

/* ---------- composer ----------------------------------------- */

.composer {
  border: 1px solid var(--ink);
  background: var(--card);
  box-shadow: 6px 6px 0 rgba(23, 21, 15, 0.08);
}
.composer__head { padding: 14px 18px; border-bottom: 1px solid var(--rule-hard); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.composer__head h3 { font-size: 22px; }
.composer__body { padding: 18px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font: 500 10.5px/1 var(--text); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: 400 15px/1.45 var(--text);
  padding: 11px 12px;
  border: 1px solid var(--rule-hard);
  background: rgba(244, 241, 233, 0.46);
  color: var(--ink);
  border-radius: 2px;
  width: 100%;
}
.field textarea { font-family: var(--display); font-size: 19px; min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.composer__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.note { font-size: 12.5px; color: var(--ink-3); }
/* The hero's small print sits on open artwork rather than on a
   card, so it gets the darker ink to stay legible over it. */
.hero .note { color: var(--ink-2); }
.note b { color: var(--ink-2); font-weight: 500; }
.flash { padding: 10px 12px; border: 1px solid var(--rule-hard); border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 13px; }
.flash--ok { border-left-color: var(--green); background: var(--green-soft); }

/* ---------- flow diagram ------------------------------------- */

.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  border: 1px solid var(--rule-hard);
  background: var(--card);
}
.flow__step { padding: 20px 18px; border-right: 1px solid var(--rule); position: relative; }
.flow__step:last-child { border-right: 0; }
.flow__step b { display: block; font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 8px; }
.flow__step h4 { font-family: var(--display); font-size: 21px; font-weight: 400; margin: 0 0 6px; }
.flow__step p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.split { display: grid; grid-template-columns: 4fr 1fr; border: 1px solid var(--ink); margin-top: 18px; }
.split div { padding: 16px 18px; }
.split div:first-child { background: rgba(23, 21, 15, 0.88); color: var(--paper); }
.split div:last-child { background: var(--card); border-left: 1px solid var(--ink); }
.split b { font-family: var(--mono); font-size: 24px; display: block; }
.split span { font-size: 12.5px; opacity: 0.8; }

/* ---------- charts ------------------------------------------- */

.chart {
  border: 1px solid var(--rule-hard);
  background: var(--card);
  padding: 18px;
}
.chart svg { width: 100%; height: auto; display: block; }
.chart__legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-3); margin-top: 10px; flex-wrap: wrap; }

/* ---------- docs --------------------------------------------- */

.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.doc__toc { position: sticky; top: 92px; display: grid; gap: 6px; font-size: 13.5px; }
.doc__toc a { text-decoration: none; color: var(--ink-3); padding: 4px 0; border-bottom: 1px solid transparent; }
.doc__toc a:hover { color: var(--accent); }
.doc article { max-width: 68ch; }
.doc h2 { font-size: clamp(28px, 3.6vw, 38px); margin: 46px 0 10px; }
.doc h2:first-child { margin-top: 0; }
.doc h2 b { font-family: var(--mono); font-size: 13px; color: var(--accent); display: block; letter-spacing: 0.12em; margin-bottom: 4px; font-weight: 500; }
.doc p { color: var(--ink-2); font-size: 15.5px; }
.doc ul { color: var(--ink-2); padding-left: 18px; }
.doc li { margin: 7px 0; }
.doc code { font-family: var(--mono); font-size: 13px; background: var(--paper-2); padding: 1px 5px; border: 1px solid var(--rule); }
.pull-box { border-left: 3px solid var(--accent); background: var(--card); padding: 14px 16px; margin: 20px 0; font-size: 14px; }

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

footer.foot {
  border-top: 1px solid var(--rule-hard);
  margin-top: clamp(64px, 10vh, 120px);
  padding: 34px 0 46px;
  background: var(--paper-2);
}
.foot__grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.foot p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); max-width: 46ch; }
.foot a { color: var(--ink-2); font-size: 13px; display: block; text-decoration: none; margin: 4px 0; }
.foot a:hover { color: var(--accent); }
.health { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.health i { width: 7px; height: 7px; background: var(--green); display: inline-block; border-radius: 50%; margin-right: 6px; }
.health i.bad { background: var(--accent); }

/* ---------- misc --------------------------------------------- */

.empty { padding: 40px 18px; text-align: center; color: var(--ink-3); font-size: 14px; }
.skeleton { color: var(--ink-3); font-family: var(--mono); font-size: 12.5px; padding: 18px; }
.bar { display: inline-block; height: 7px; background: var(--accent); vertical-align: middle; }
.wallet-chip { font-family: var(--mono); font-size: 12px; border: 1px solid var(--rule-hard); padding: 7px 10px; border-radius: 2px; background: var(--card); }

/* Reduced motion: the still frame, no video, nothing moving. */
@media (prefers-reduced-motion: reduce) {
  .page-bg { display: none; animation: none; }
  .page-media {
    background-color: var(--paper);
    background-image: url('https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/4f690bd1-881a-4192-82f2-d714d34c8fb9.png');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .tape__row { animation: none; }
}

@media (max-width: 900px) {
  /* A 16:9 clip stretched over a tall phone screen zooms ~2.5x and
     the cranes end up behind the link lists. Anchored to the
     bottom third at its own scale instead, with the wash carrying
     the rest of the screen. */
  .page-bg { height: 46%; top: auto; bottom: 0; object-fit: cover; }
  .page-media::after {
    background:
      linear-gradient(transparent 27px, rgba(23, 21, 15, 0.03) 28px),
      linear-gradient(
        180deg,
        rgba(244, 241, 233, 0.94) 0%,
        rgba(244, 241, 233, 0.9) 50%,
        rgba(244, 241, 233, 0.68) 78%,
        rgba(244, 241, 233, 0.56) 100%
      );
    background-size: 100% 28px, 100% 100%;
  }

  .hero__grid { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 1fr; }
  .doc__toc { position: static; display: none; }
  .row { grid-template-columns: 1fr; }
  .call { grid-template-columns: 1fr; }
  .call__earn { text-align: left; }
  nav.links { gap: 12px; }
  nav.links a { font-size: 12.5px; }
  .wordmark { font-size: 25px; }
}