/* ============================================================
   JetXInfo — article / long-read + stub styles
   Loaded only on content pages (extraCss). The reading column,
   editorial typography accents, table of contents, related,
   and the placeholder stub block.
   ============================================================ */

/* ---- Breadcrumb ---- */
.jx-breadcrumb {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--text-muted); display: flex; gap: var(--space-2);
  flex-wrap: wrap; align-items: center; margin-bottom: var(--space-5);
}
.jx-breadcrumb a { color: var(--text-muted); }
.jx-breadcrumb a:hover { color: var(--link-hover); }
.jx-breadcrumb .sep { color: var(--text-faint); }
.jx-breadcrumb [aria-current] { color: var(--text-strong); }

/* ---- Article hero ---- */
.arthead { padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) 0 var(--space-7); border-bottom: 1px solid var(--border-soft); }
.arthead h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); max-width: 20ch; margin-bottom: var(--space-5); }
.arthead__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: var(--measure-prose); line-height: 1.55; }
.arthead__meta {
  display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center;
  margin-top: var(--space-6); font-family: var(--font-mono);
  font-size: var(--fs-caption); color: var(--text-faint);
}
.arthead__meta .m { display: inline-flex; align-items: center; gap: 6px; }
.arthead__meta .jx-icon { color: var(--text-muted); }

/* ---- Two-column layout with sticky TOC on wide screens ---- */
.layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-8) 0; }
@media (min-width: 1040px) { .layout { grid-template-columns: 220px minmax(0, 1fr); } }

.toc { position: sticky; top: 90px; align-self: start; display: none; }
@media (min-width: 1040px) { .toc { display: block; } }
.toc h4 {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-caption); margin-bottom: var(--space-4);
}
.toc a { display: block; color: var(--text-muted); font-size: var(--fs-small); padding: 6px 0 6px 12px; border-left: 1px solid var(--border-soft); }
.toc a:hover, .toc a.active { color: var(--text-display); border-color: var(--signal); }

/* ---- Prose accents (column + line-height come from base.css .prose) ---- */
.prose h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-top: var(--space-8); margin-bottom: var(--space-4); scroll-margin-top: 90px; }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose p { margin-top: var(--space-4); }
.prose ul, .prose ol { margin-top: var(--space-4); padding-left: var(--space-5); }
.prose li { margin-top: var(--space-2); }
.prose li::marker { color: var(--text-muted); }
.prose a { color: var(--link); text-decoration: underline; text-decoration-color: var(--tech-line); text-underline-offset: 3px; }
.prose a:hover { color: var(--link-hover); text-decoration-color: var(--link-hover); }
.prose strong { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* Drop-cap opening paragraph */
.prose p.lead-cap::first-letter {
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: 3.4em;
  float: left; line-height: 0.8; padding: 6px 10px 0 0; color: var(--signal-bright);
}
/* Handwritten margin annotation */
.prose .annot { font-family: var(--font-hand); font-size: 1.45rem; color: var(--signal-bright); display: block; margin: var(--space-5) 0; }

/* Pull-quote */
.pullquote {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.3;
  color: var(--text-display); border-left: 3px solid var(--signal);
  padding-left: var(--space-5); margin: var(--space-7) 0;
}

.prose figure { margin: var(--space-7) 0; }
.prose figcaption { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-caption); margin-top: var(--space-3); }

/* Inline mono token in prose (seeds, multipliers, code spans) */
.prose code:not(pre code) {
  background: var(--surface-well); border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs); padding: 0.1em 0.4em; font-size: 0.92em;
  color: var(--text-strong);
}

/* ---- FAQ section heading on content pages ---- */
.jx-faqhead { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-bottom: var(--space-5); }

/* ---- Related cards ---- */
.jx-related { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--space-5); }
.jx-related__card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: var(--space-5);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.jx-related__card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.jx-related__card h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-semibold); color: var(--text-display); }

/* ---- Stub / "coming soon" placeholder ---- */
.jx-stub {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: var(--space-7); margin: var(--space-8) 0;
  max-width: var(--measure-prose);
}
.jx-stub__badge {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--signal);
  background: var(--signal-tint); border: 1px solid var(--signal-line);
  border-radius: var(--radius-pill); padding: 4px 12px;
}
.jx-stub p { color: var(--text-muted); line-height: 1.6; }