/* ============================================================================
   Fonts — self-hosted Inter (OFL). Self-hosted rather than fetched from
   fonts.gstatic.com so the critical path has no third-party DNS + TLS hop;
   the old Google Fonts <link> put the woff2 three levels deep in the request
   chain and delayed first paint.

   "Inter Fallback" is metric-matched to Arial (overrides below), so the swap
   from fallback to Inter does not reflow text. Without this the swap shifted
   every text block on the page and measured CLS 0.47.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%;
}

/* ============================================================================
   ChromaLayer — shared stylesheet
   ----------------------------------------------------------------------------
   Loaded by EVERY page (the Astro homepage and every ArticleLayout page).

   Scope: design tokens, plus only those components the blog pages render their
   inline styles against — verified against the markup: .nav-link, .wordmark,
   .btn-white, .card-hover, [data-reveal].

   The blog HTML references these custom property names directly, so renaming
   or removing one silently breaks four published posts.

   Landing-page styling lives in home.css, namespaced `cl-`, loaded only by
   index.html. Nothing landing-specific belongs in this file: it used to also
   carry `#faq`, `.faq-*` and `.lp-*` rules for the previous index.html, and
   because `#faq details p { opacity: 0 }` is an ID selector it outranked
   anything the new page could set — every FAQ answer rendered invisible.
   Page-specific rules go in the page's own sheet.
   ========================================================================== */

:root {
  /* Dark is the only theme now — light mode and the toggle have been removed. */
  --color-bg: #07080a;
  --color-bg-elevated: #0d0d0d;
  --color-bg-surface: #101111;
  --color-border: #242728;
  --color-border-hover: #3a3d40;
  --color-text: #f4f4f6;
  --color-text-body: #cdcdcd;
  --color-text-muted: #9c9c9d;
  --color-text-faint: #6a6b6c;
  --color-accent: #8f9fe8;
  --color-accent-muted: #7d8ac4;
  --color-btn-primary-bg: #ffffff;
  --color-btn-primary-text: #000000;
  --color-overlay-nav: rgba(13, 13, 14, 0.9);
  --color-overlay-nav-scrolled: rgba(10, 10, 11, 0.97);
  --color-overlay-hover: rgba(255, 255, 255, 0.06);
  --color-overlay-border: rgba(255, 255, 255, 0.16);
  --color-overlay-grid: rgba(255, 255, 255, 0.035);
  --color-overlay-shadow: rgba(255, 255, 255, 0.03);

  /* Brand colors: decorative gradients/badges, intentionally constant across themes */
  --color-brand-navy: #1c2450;
  --color-brand-blue: #4a5fd6;
  --color-brand-blue-dark: #1c2b7a;
  --color-brand-indigo: #3045B1;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body { margin: 0; background: var(--color-bg); color: var(--color-text-body); font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-feature-settings: "calt", "kern", "liga", "ss03"; -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease; }
a { color: var(--color-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Nav and card components used by blog.html and blog-post-*.html */
.nav-link { transition: color .2s ease; }
.nav-link:hover { color: var(--color-text) !important; text-decoration: none; }
.wordmark:hover { opacity: .8; text-decoration: none; }
.btn-white:hover { opacity: .9; text-decoration: none; }
.btn-white:active { transform: scale(0.96); }

.card-hover { transition: all .25s ease; }
.card-hover:hover { transform: translateY(-4px) scale(1.01); border-color: var(--color-border-hover); text-decoration: none; box-shadow: 0 0 0 1px var(--color-border-hover), 0 12px 32px var(--color-overlay-shadow); }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].in-view { opacity: 1; transform: translateY(0); }

/* Shared a11y affordances. Before this, keyboard focus was invisible on every
   link in a blog post. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Motion enabled globally */