:root {
  --bg: #0e0e10;
  --bg-subtle: #161618;
  --bg-card: #1c1c1f;
  --border: #2a2a2d;
  --text: #e8e8ec;
  --text-muted: #8b8b94;
  --text-dim: #5c5c64;
  --accent: #7C6CFF;
  --accent-subtle: rgba(124, 108, 255, 0.08);
  --radius: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scrollbar-color: #2a2a2d #0e0e10; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ---------- Homepage chrome shims ----------
   The nav + footer markup is server-rendered from the REAL homepage
   components (scripts/render-news-chrome.mjs, single source of truth) and
   styled by the same compiled landing CSS the /lp pages ship
   (/lp/assets/index.css + landing.css, linked before this file). The rules
   below only adapt that chrome to the news context; they never restyle it. */

/* The homepage bar is translucent because it rests on a cream page; the
   news articles are dark, so solidify the same cream so the bar reads
   the way it does on the homepage. */
.news-chrome .v3h-nav { background: rgba(248, 242, 232, 0.94); }

/* Mobile burger: v3-nav's React overlay is client-state and doesn't
   serialize, so chromeGlue() in build-news.mjs toggles .news-mobile-open on
   the nav instead, and these rules stack the real desktop link + CTA groups
   under the bar. The show/hide itself happens via inline style in the glue
   JS: Tailwind's !hidden is an !important inside @layer utilities, which
   outranks stylesheet importants but not style-attribute ones. 1024px = the
   lg breakpoint where the desktop groups come back on their own. */
@media (max-width: 1023.98px) {
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-inner { flex-wrap: wrap; }
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-links,
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-cta {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 10px 0 0;
  }
  /* Keep the brand + burger on the first row; the stacked groups wrap below. */
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-links { order: 10; }
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-cta { order: 11; }
  /* landing.css hides the Dashboard ghost at <=560px because the homepage's
     React overlay renders its own Dashboard link there; this stacked menu IS
     the overlay stand-in, so re-show it (the homepage overlay shows it too). */
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-ghost { display: inline-flex; }
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-links {
    border-top: 1px solid rgba(27, 22, 18, 0.08);
    margin-top: 10px;
  }
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-link { padding: 10px 4px; font-size: 16px; }
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-cta { padding-bottom: 12px; }
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-ghost,
  .news-chrome .v3h-nav.news-mobile-open .v3h-nav-primary {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Listing / index ---------- */
.news-index { max-width: 1120px; margin: 0 auto; padding: 48px 24px 96px; }
.news-index-hero { margin-bottom: 40px; }
.news-index-hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.news-index-hero p { font-size: 16px; color: var(--text-muted); max-width: 640px; }

.news-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/* Text-only cards: clean typographic layout, no image thumbnails. */
.news-card {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 22px 24px;
  color: var(--text); text-decoration: none;
  transition: border-color 0.12s, transform 0.12s, background 0.12s;
}
.news-card:hover { border-color: var(--accent); transform: translateY(-2px); background: #202024; text-decoration: none; }
.news-card-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.news-card-title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--text); }
.news-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ---------- Article ---------- */
.article { max-width: 760px; margin: 0 auto; padding: 40px 24px 96px; }
.news-back { display: inline-block; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.article-category { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.article-title { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; }
.article-meta { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-dim); display: inline-block; }
/* Hero images: the estate ships 226 assets at 39 distinct pixel dimensions and 29
   aspect ratios (55 portrait 1000x1300, 45 ultrawide 2200x1000, 39 at 1200x630).
   With only `width:100%` and the global `img{height:auto}` every hero rendered at
   its own natural shape, so a portrait source became a full-width tower and an
   ultrawide became a letterbox strip. Jem, 2026-08-27: "all the images are wrong
   ... they're all different." Pinning the BOX and cropping to it normalises all
   139 heroes regardless of source, and is the only fix that does not require
   re-cutting 226 files.
   HOW IT WORKS, stated because the obvious guess is wrong: `height` is NOT
   overridden here. What matters is that height's USED VALUE stays `auto`, so
   `width:100%` fixes the used width and a non-auto `aspect-ratio` DERIVES the
   height from it. The global `img { height: auto }` at :22 also resolves to
   auto, so it agrees; but it is SUFFICIENT, NOT NECESSARY - `auto` is height's
   initial value, so deleting :22 would not break this rule either.
   An earlier version re-declared `height: auto` locally and claimed to be
   "pinning" it against the global. That rule was a no-op and the claim was
   backwards. Do not re-add it, and do not set an explicit height: that would
   defeat the aspect-ratio, not enforce it.
   Source normalisation is still worth doing for WEIGHT, but it is no longer
   what consistency depends on. */
.article-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 28px;
}
/* Body images vary the same way. Cap them so a portrait source cannot push the
   reading column into a scroll tunnel, without cropping (contain, not cover):
   in-body figures often carry diagrams where a crop would remove the point. */
.article-body img {
  max-height: 520px;
  object-fit: contain;
}

/* TL;DR answer-first block (AEO) */
.tldr {
  background: var(--accent-subtle); border: 1px solid rgba(124,108,255,0.25);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 32px;
  font-size: 16px; line-height: 1.6;
}
.tldr strong { color: var(--accent); }

/* Body */
.article-body { font-size: 16px; color: var(--text); }
.article-body h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 40px 0 14px; line-height: 1.3; }
.article-body h3 { font-size: 20px; font-weight: 600; margin: 30px 0 10px; }
.article-body h4 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
.article-body p { margin: 0 0 18px; color: var(--text); }
/* Explicit list-style: the compiled Tailwind layer (/lp/assets/index.css)
   preflight-resets ol/ul to list-style none. */
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body img { border-radius: var(--radius); border: 1px solid var(--border); margin: 24px 0; }
.article-body blockquote {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; margin: 24px 0;
  color: var(--text-muted); font-style: italic;
}
.article-body code { padding: 2px 6px; border-radius: 4px; background: var(--bg-subtle); border: 1px solid var(--border); font-size: 14px; font-family: 'SF Mono', 'Fira Code', monospace; }
.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.article-body th { background: var(--bg-subtle); font-weight: 600; }

/* FAQ (visible, matches FAQPage schema) */
.article-faq { margin: 48px 0 0; }
.article-faq h2 { font-size: 26px; font-weight: 700; margin-bottom: 16px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--bg-card); }
.faq-item summary { cursor: pointer; padding: 16px 18px; font-weight: 600; font-size: 16px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-answer { padding: 14px 18px 18px; color: var(--text-muted); font-size: 15px; }

/* CTA */
.article-cta { margin: 48px 0; text-align: center; }
.btn-primary {
  display: inline-block; background: var(--accent); color: #fff;
  padding: 14px 28px; border-radius: 10px; font-weight: 600; font-size: 16px;
}
.btn-primary:hover { background: #6a5af0; text-decoration: none; }

/* Related */
.related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); }
.related h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.related-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.related-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; color: var(--text); text-decoration: none; transition: border-color 0.12s;
}
.related-card:hover { border-color: var(--accent); text-decoration: none; }
.related-card-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.related-card-title { font-size: 14px; font-weight: 600; line-height: 1.4; }

@media (max-width: 640px) {
  .article-title { font-size: 30px; }
  .news-index-hero h1 { font-size: 32px; }
}