/* blog/tokens.css  -  Tokens cluster: ticker-style data hero + token-card grid. */
.tok-cover {
  padding: var(--s-7) 0;
  background: linear-gradient(135deg, rgba(142,107,167,0.07), transparent 60%), var(--paper);
  border-bottom: 1px solid var(--rule);
  position: relative; overflow: hidden;
}
.tok-cover__ticker {
  font-family: var(--font-mono); font-size: 14px; color: var(--brand);
  padding: var(--s-2) 0; margin-bottom: var(--s-4);
  border-top: 1px solid var(--brand); border-bottom: 1px solid var(--brand);
  letter-spacing: 0.15em; overflow: hidden; white-space: nowrap;
  display: flex; gap: var(--s-5);
}
.tok-cover__ticker span { display: inline-block; }
.tok-cover__h1 {
  font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700; line-height: 1.05; margin: 0 0 var(--s-3); max-width: 920px;
}
.tok-cover__lede { color: var(--ink-dim); font-size: 1.05rem;  }
.tok-cover__byline {
  display: flex; gap: var(--s-4); margin-top: var(--s-4);
  font-family: var(--font-mono); font-size: 14px; color: var(--ink-mute); letter-spacing: 0.12em;
}
.tok-cover__byline strong { color: var(--ink); }
.tok-hero-img { display: block; width: 100%; margin-top: var(--s-5); border: 1px solid var(--rule); }

.tok-body { padding: var(--s-7) 0; border-bottom: 1px solid var(--rule); }
.tok-body__split { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
@media (min-width: 980px) { .tok-body__split { grid-template-columns: 1fr 280px; } }
.tok-card-stack {
  position: sticky; top: calc(var(--header-h) + 16px); align-self: start;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.tok-card {
  padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--rule);
  border-top: 4px solid var(--brand);
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px;
}
.tok-card__sym { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--brand); letter-spacing: 0.05em; }
.tok-card__brand { font-family: var(--font-serif); font-size: 1rem; color: var(--ink); }
.tok-card__mech { font-family: var(--font-mono); font-size: 14px; color: var(--ink-mute); letter-spacing: 0.1em; }
.tok-card:hover { background: var(--brand-soft); }

.tok-related { padding: var(--s-7) 0; background: var(--surface); }
.tok-related h2 { font-family: var(--font-serif); font-size: var(--t-h2); margin: 0 0 var(--s-5); }
.tok-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }
.tok-related-card {
  padding: var(--s-4); background: var(--paper); border: 1px solid var(--rule);
  border-bottom: 3px solid var(--brand);
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--s-2);
}
.tok-related-card:hover { transform: translateY(-2px); }
.tok-related-card strong { font-family: var(--font-serif); color: var(--ink); font-size: 1.1rem; }
.tok-related-card span { font-family: var(--font-mono); font-size: 14px; color: var(--brand); letter-spacing: 0.12em; }