/* Blog posts + /blog/ index in the dark Launch style.
   Sits on tokens.css (colors, buttons, badge, tile, nav/footer) and home.css (CTA horizon glow).
   Article bodies keep their markup; this file only restyles the classes they already use. */

/* ── Layout ─────────────────────────────────────────────────────────── */
.ct-wrap { max-width: 784px; margin: 0 auto; padding: 0 var(--gutter); }

/* ── Post hero ──────────────────────────────────────────────────────── */
.ct-hero { padding: 140px 0 40px; }
.ct-hero-col { max-width: 720px; }
.ct-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--muted); transition: color 0.15s; }
.ct-back:hover { color: var(--fg); }
.ct-hero .lx-badge { margin-bottom: 20px; }
.ct-title {
  font-size: 48px; font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 20px; text-wrap: balance;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
@media (forced-colors: active) { .ct-title { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; } }
.ct-lede { font-size: 19px; line-height: 30px; color: var(--muted); text-wrap: pretty; }
.ct-byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.ct-avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9999px; box-shadow: 0 0 0 1px var(--border-3);
  background: url('/assets/julian-64.png') center / cover;
  background-image: image-set(url('/assets/julian-64.webp') type('image/webp'), url('/assets/julian-64.png') type('image/png'));
}
.ct-byline-name { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--fg); }
.ct-meta { font-size: 13px; line-height: 18px; color: var(--muted); }

/* ── Article body ───────────────────────────────────────────────────── */
.ct-body { padding: 8px 0 88px; }
.jt-article { font-size: 17px; line-height: 1.75; color: var(--line-strong); min-width: 0; }
.jt-article p { margin: 0 0 20px; text-wrap: pretty; }
.jt-article h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin: 56px 0 18px; color: var(--fg); text-wrap: balance; scroll-margin-top: 96px; }
.jt-article h2:first-child { margin-top: 0; }
.jt-article h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 32px 0 12px; color: var(--fg); text-wrap: balance; }
.jt-article ul, .jt-article ol { padding-left: 22px; margin: 0 0 20px; }
.jt-article li { margin-bottom: 8px; }
.jt-article strong { color: var(--fg); font-weight: 600; }
.jt-article em { color: var(--fg); }
.jt-article a { color: var(--fg); text-decoration: underline; text-decoration-color: rgba(253,186,116,0.5); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
.jt-article a:hover { text-decoration-color: var(--accent-soft); }
.jt-article code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; background: rgba(250,250,250,0.08); padding: 2px 6px; border-radius: 6px; color: var(--fg); }
.jt-article pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; background: #0F0F12; color: #E4E4E7; padding: 20px 24px; border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px var(--border-2); overflow-x: auto; line-height: 1.6; margin: 0 0 24px; }
.jt-article pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.jt-article hr { border: 0; border-top: 1px solid var(--border-2); margin: 40px 0; }
.jt-article .mono { font-family: var(--font); }

/* "How I check it": a glass tile with an orange label */
.jt-check { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-2); border-radius: var(--r-tile); padding: 20px 24px; margin: 0 0 24px; }
.jt-check .mono { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-soft); }

/* Tables */
.jt-table-wrap { overflow-x: auto; margin: 0 0 24px; border-radius: var(--r-tile); }
.jt-table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-2); }
.jt-table th, .jt-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border-1); vertical-align: top; }
.jt-table th { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); background: var(--surface-1); }
.jt-table tr:last-child td { border-bottom: none; }

/* Link tiles: pillar callout, cluster list, table of contents */
.jt-article a.jt-pillar, .jt-article a.jt-cluster { display: block; text-decoration: none; border-radius: var(--r-tile); transition: box-shadow 0.15s, background 0.15s; }
.jt-pillar { padding: 26px 28px; margin: 0 0 40px; background: linear-gradient(180deg, rgba(251,146,60,0.10), rgba(250,250,250,0.02)); box-shadow: inset 0 0 0 1px rgba(253,186,116,0.3); }
.jt-pillar:hover { box-shadow: inset 0 0 0 1px rgba(253,186,116,0.55), 0 0 32px rgba(251,146,60,0.12); }
.jt-pillar .mono, .jt-cluster .mono { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-soft); }
.jt-pillar-title { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--fg); }
.jt-cluster { padding: 26px 28px; margin: 0 0 16px; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-2); }
.jt-cluster:hover { background: var(--surface-2); }
.jt-cluster-title { font-size: 19px; font-weight: 600; margin-bottom: 8px; color: var(--fg); }
.jt-cluster-desc { font-size: 15px; line-height: 1.65; color: var(--muted); }
.jt-toc { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-2); border-radius: var(--r-tile); padding: 24px 28px; margin: 8px 0 40px; }
.jt-toc .mono { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.jt-toc ol { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.jt-toc li { margin-bottom: 9px; }
.jt-toc li:last-child { margin-bottom: 0; }

/* "On this page": built by a small script from the article's H2s, floated in the left margin on wide screens (the right side is where the floating diagnosis button sits) */
.ct-article-wrap { position: relative; max-width: 720px; margin: 0 auto; }
.ct-rail { display: none; position: absolute; top: 0; bottom: 0; right: calc(100% + 48px); width: 208px; }
@media (min-width: 1280px) { .ct-rail { display: block; } }
.ct-aside { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; font-size: 14px; scrollbar-width: none; }
.ct-aside::-webkit-scrollbar { display: none; }
.ct-aside-title { margin: 0 0 14px; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ct-aside ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-2); }
.ct-aside a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); line-height: 20px; text-decoration: none; transition: color 0.15s, border-color 0.15s; }
.ct-aside a:hover { color: var(--fg); }
.ct-aside a[aria-current="true"] { color: var(--fg); border-left-color: var(--accent-soft); }

/* ── Closing CTA (each page keeps its own headline and sub-line) ───── */
.ct-cta { text-align: center; padding: 96px 0 150px; }
.ct-cta-title { margin: 0 auto 20px; max-width: 760px; font-size: 48px; font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.ct-cta-sub { margin: 0 auto 32px; max-width: 520px; font-size: 18px; line-height: 28px; color: var(--muted); text-wrap: pretty; }

/* ── Floating "Get a free diagnosis" link ───────────────────────────── */
#jt-chat-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  background: #18181B; color: #FAFAFA; text-decoration: none;
  border: 1px solid rgba(250,250,250,0.1); border-radius: 100px; padding: 13px 22px 13px 16px;
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#jt-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
#jt-chat-fab .fab-dot { width: 8px; height: 8px; border-radius: 50%; background: #FB923C; box-shadow: 0 0 8px #FDBA74, 0 0 16px #FB923C; flex-shrink: 0; }

/* ── /blog/ index ───────────────────────────────────────────────────── */
.bl-hero { padding: 140px 0 40px; }
.bl-hero .ct-back { margin-bottom: 28px; }
.bl-hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.bl-title { margin: 0; padding-bottom: 0.12em; font-size: 72px; font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; }
.bl-lede { max-width: 480px; font-size: 18px; line-height: 28px; color: var(--muted); text-wrap: pretty; }

.bl-featured { display: grid; grid-template-columns: 1.1fr 1fr; padding: 0; margin-bottom: 20px; color: inherit; transition: box-shadow 0.15s; }
.bl-featured:hover { box-shadow: inset 0 0 0 1px var(--border-3); }
.bl-featured-body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.bl-featured h2 { margin: 16px 0 16px; font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--fg); text-wrap: balance; }
.bl-featured p { margin: 0; max-width: 520px; font-size: 16px; line-height: 26px; color: var(--muted); text-wrap: pretty; }
.bl-featured .ct-meta { margin-top: 24px; }

.bl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.bl-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9999px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface-1); color: var(--muted);
  font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 20px; transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.bl-chip:hover { color: var(--fg); background: var(--surface-2); }
.bl-chip[aria-pressed="true"] { color: var(--on-light); background: var(--grad-primary); border-color: transparent; }
.bl-chip-n { font-size: 12px; opacity: 0.65; }

.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bl-card { display: flex; flex-direction: column; padding: 0; color: inherit; transition: transform 0.15s, box-shadow 0.15s; }
.bl-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--border-3); }
.bl-card[hidden], .bl-featured[hidden] { display: none; }
/* The color bands keep their original inline gradients and labels. Only the label font is scoped here so Space Mono still renders them. */
.bl-card .bl-band .mono, .bl-featured .bl-band .mono { font-family: 'Space Mono', monospace; }
.bl-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.bl-card-body h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--fg); text-wrap: pretty; }
.bl-card-body p { margin: 0; padding-top: 4px; font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: auto; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ct-hero, .bl-hero { padding-top: 104px; }
  .ct-title { font-size: clamp(30px, 8.5vw, 40px); overflow-wrap: break-word; }
  .ct-lede { font-size: 17px; line-height: 27px; }
  .jt-article { font-size: 16px; }
  .jt-article h2 { font-size: 26px; margin-top: 44px; }
  .jt-article code { overflow-wrap: anywhere; }
  .ct-cta { padding: 72px 0 120px; }
  .ct-cta-title { font-size: clamp(30px, 8vw, 40px); }
  .bl-title { font-size: 52px; }
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured .bl-band { min-height: 200px; order: -1; }
  .bl-featured-body { padding: 32px 24px; }
  .bl-featured h2 { font-size: 28px; }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: 1fr; }
  #jt-chat-fab { bottom: 20px; right: 20px; }
}