/* ==========================================================================
   Topic pages — /bitcoin-cycle, /bitcoin-funding-rate, …

   Loaded after tools.css and landing.css, and built from their tokens: a
   topic page is the landing page's sibling, one column of reading set in the
   same cards the desk uses. The measure is kept narrower than the desk's
   because these pages are prose. No tables or charts: the data is on the desk.
   ========================================================================== */

.topic .shell > main,
.topic .tp-crumbs { max-width: 1080px; margin-inline: auto; }

/* The wordmark links home here; it must not look like a link. */
.brand-link { color: inherit; text-decoration: none; min-width: 0; }
.brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }

/* ---------- breadcrumb ---------- */
.tp-crumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(16px, 3vw, 26px);
  font-size: 12.5px; color: var(--fg-faint);
}
.tp-crumbs a { color: var(--fg-dim); text-decoration: none; }
.tp-crumbs a:hover { color: var(--accent); }

/* ---------- hero ---------- */
.tp-hero { padding: clamp(12px, 2vw, 18px) 0 4px; }
.tp-hero h1 {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.08; font-weight: 660; letter-spacing: -0.035em;
  text-wrap: balance;
}
.tp-lede {
  margin: 14px 0 0; max-width: 70ch;
  font-size: 16px; line-height: 1.65; color: var(--fg-dim);
  text-wrap: pretty;
}
.tp-meta { margin: 12px 0 0; font-size: 12.5px; color: var(--fg-faint); }

/* ---------- sections and prose ---------- */
.tp-section { padding: clamp(26px, 4vw, 40px) 0 0; }
.tp-section > h2,
.tp-cta h2 {
  margin: 0 0 14px;
  font-size: clamp(19px, 2.4vw, 23px); font-weight: 640; letter-spacing: -0.025em;
}
.tp-prose { max-width: 72ch; }
.tp-prose p, .tp-prose li {
  margin: 0 0 12px;
  font-size: 15px; line-height: 1.7; color: var(--fg-dim);
  text-wrap: pretty;
}
.tp-prose ul { margin: 0 0 16px; padding-left: 20px; }
.tp-prose b, .tp-prose em { color: var(--fg); font-weight: 600; font-style: normal; }
.topic main a:not(.btn) { color: var(--accent); text-decoration: none; }
.topic main a:not(.btn):hover { text-decoration: underline; }
.tp-note { margin: 10px 0 0; max-width: 80ch; font-size: 12.5px; line-height: 1.6; color: var(--fg-faint); }

/* ---------- cards ---------- */
.tp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.tp-cards-5 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
/* tools.css styles a bare h3 as the desk's small uppercase label; these are
   real headings, so they are reset to body case. */
.tp-card h3, .tp-faq summary h3 { color: var(--fg); text-transform: none; }
.tp-card h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 620; letter-spacing: -0.015em; }
.tp-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--fg-dim); }
.tp-band { border-top: 3px solid var(--band); }
.tp-band-1 { --band: var(--neg); }
.tp-band-2 { --band: color-mix(in srgb, var(--neg) 55%, var(--accent)); }
.tp-band-3 { --band: var(--fg-faint); }
.tp-band-4 { --band: color-mix(in srgb, var(--pos) 55%, var(--accent)); }
.tp-band-5 { --band: var(--pos); }

/* ---------- call to action ---------- */
.tp-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px;
  margin-top: clamp(30px, 5vw, 48px);
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.tp-cta > div { flex: 1 1 360px; }
.tp-cta h2 { margin-bottom: 6px; }
.tp-cta p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-dim); max-width: 60ch; }

/* ---------- FAQ ---------- */
.tp-faq details {
  border-bottom: 1px solid var(--border);
  max-width: 820px;
}
.tp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; cursor: pointer; list-style: none;
}
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq summary::after {
  content: '+'; flex: none;
  font-size: 20px; line-height: 1; color: var(--fg-faint);
  transition: transform var(--dur) var(--ease);
}
.tp-faq details[open] summary::after { transform: rotate(45deg); }
.tp-faq summary h3 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.tp-faq .tp-prose { padding: 0 0 6px; }