/*
 * Inference — VeloCMS theme (slug: "inference")
 * 1:1 port of the founder's Claude-Design canvas "Inference Theme.dc.html".
 *
 * "A global wire service for the machine-intelligence age."
 * Palette (1o §1): paper #F8F7F4 · ink #0E1013 · slate #33373D ·
 *   wire-grey #C9CDD3 · signal-cobalt #1B4FE0.
 * Display: Archivo (900/800/700) · Body: Libre Franklin (400/600) ·
 *   Mono: IBM Plex Mono (400/500/600) — timestamps, chips, nav, tags,
 *   tables, code, prices. font-variant-numeric: tabular-nums on figures.
 *
 * All values below are copied verbatim from the design's inline styles and
 * the 1o engineering-notes spec (color tokens, spacing/radius scale, hover
 * table, motion keyframes, mobile-drawer spec, RTL safety). No rounding, no
 * reinterpretation.
 *
 * Scoped to [data-theme="inference"] (NOT main-scoped) so /shop and
 * /products/* resolve the same tokens. P-094 token bridge at the bottom.
 * No document-level horizontal overflow — any wide ticker/wire strip gets
 * overflow-x:clip on its stage (P-140).
 */

/* ═══════════════════ COLOR TOKENS (1o §1) ═══════════════════ */
[data-theme="inference"] {
  /* canonical (--vb-* bridge) */
  --if-paper: #f8f7f4; /* oklch(0.975 0.003 106) — page background */
  --if-ink: #0e1013; /* oklch(0.180 0.008 250) — headings, heavy rule, ink surfaces */
  --if-primary: #1b4fe0; /* oklch(0.500 0.210 262) — signal-cobalt CTA/links */
  --if-accent: #33373d; /* oklch(0.350 0.010 250) — slate */

  /* derived (1o §1 table) */
  --if-wire-grey: #c9cdd3; /* chip/input borders */
  --if-hairline: rgba(14, 16, 19, 0.14); /* hairlines + column rules */
  --if-heavy: #0e1013; /* 2px heavy rule */
  --if-muted: #5a5f66; /* mono meta text — 6.3:1 on paper */
  --if-prose: #24272c; /* article prose body */
  --if-slate-text: #33373d; /* dek / secondary text */
  --if-cobalt-hover: #1640b8; /* CTA / link hover */
  --if-on-ink-cobalt: #7da2ff; /* cobalt on dark (footer/on-ink links) — 7.7:1 */
  --if-footer-link: #c6cbd2; /* footer link idle */
  --if-footer-meta: #9ba1a9; /* footer meta */
  --if-footer-dim: #6e747d; /* footer heading / dim mono */
  --if-plate: #e9e8e3; /* product plate bg */
  --if-img-placeholder: #e7e6e1; /* image placeholder */
  --if-on-primary: #ffffff; /* text on cobalt (6.2:1 AA) */

  /* code block */
  --if-code-bg: #0e1013;
  --if-code-bar: #1a1d22;
  --if-code-fg: #e8eaed;
  --if-code-comment: #6e747d;
  --if-code-string: #a5c6a8;
  --if-code-number: #e8c47b;

  /* fonts (registered — getThemeFontVars("inference")) */
  --if-display-font: var(--font-archivo), "Helvetica Neue", Arial, sans-serif;
  --if-body-font: var(--font-libre-franklin), -apple-system, "Segoe UI",
    sans-serif;
  --if-mono-font: var(--font-ibm-plex-mono), ui-monospace, "SFMono-Regular",
    Consolas, monospace;

  /* layout scale (1o §3) */
  --if-container: 1440px;
  --if-gutter: 40px;
  --if-gutter-mobile: 20px;
  --if-prose: 720px;

  /* engine names for the P-094 token bridge / shared components */
  --velo-bg: var(--if-paper);
  --velo-fg: var(--if-ink);
  --velo-border: var(--if-wire-grey);
  --velo-accent: var(--if-primary);
}

/* Body font inheritance for the whole theme surface */
/*
  Shared --vb-* bridge (added 2026-07-29).

  Without these, globals.css's five-rung chain

    --primary: var(--vgc-color-primary, var(--vb-color-primary,
                 var(--velo-primary, var(--vb-color-accent,
                   var(--accent, currentColor)))))

  fell all the way through to `currentColor`, because this theme defines
  --velo-accent but not --velo-primary, and none of the --vb-color-* names.
  One name off at rung three, and the whole chain misses.

  `background-color: currentColor` paints the background the element's own text
  colour, so any bg-primary control is invisible BY CONSTRUCTION — measured on
  globai.org/member/subscribe: color and background-color both rgb(27,79,224),
  contrast 1:1, the label present in the DOM and unreadable.

  The other eight own-prefix themes (gallery-noir, workbench, chambers, vitrine,
  …) all define --vb-color-primary + --vb-color-accent and catch at rung two;
  inference was the only one that fell through. Fixed here rather than in
  globals.css: changing the shared fallback would touch all 39 themes to repair
  one, and `currentColor` as a last resort is defensible — a theme supplying no
  primary at all has told us nothing better to use.

  var(--vgc-color-*, …) wrappers preserve the tenant's Global Design override,
  matching how workbench.css writes the same bridge.
*/
[data-theme="inference"] {
  --vb-color-primary: var(--vgc-color-primary, var(--if-primary));
  --vb-color-primary-fg: var(--vgc-color-primary-fg, var(--if-on-primary));
  --vb-color-accent: var(--vgc-color-accent, var(--if-primary));
}

[data-theme="inference"] {
  font-family: var(--if-body-font);
  color: var(--if-ink);
  background: var(--if-paper);
}

/* ═══════════════════ MOTION — entrances only (1o §6) ═══════════════════ */
/* @keyframes inf-rise: translateY(14px)→0. Opacity NEVER animated — first
   frame fully visible (P-068). No loops, pulses or marquees ship. */
@keyframes inf-rise {
  from {
    transform: translateY(14px);
  }
  to {
    transform: none;
  }
}
[data-theme="inference"] .if-rise {
  animation: inf-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-theme="inference"] .if-rise-1 {
  animation: inf-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) 70ms both;
}
[data-theme="inference"] .if-rise-2 {
  animation: inf-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="inference"] * {
    animation: none !important;
    transition: none !important;
  }
  /* Ambient hero video is muted decoration, not content — a reduced-motion
     visitor gets the static poster underneath instead (P-068/P-096). */
  [data-theme="inference"] .if-hero-video {
    display: none !important;
  }
}

/* ═══════════════════ CHROME — sticky header (Inference Header) ═══════════ */
[data-theme="inference"] .if-header {
  background: var(--if-paper);
  color: var(--if-ink);
  border-bottom: 2px solid var(--if-ink);
  position: sticky;
  top: 0;
  z-index: 40; /* 1o §7 z-index table */
}

/* top utility strip (desktop) */
[data-theme="inference"] .if-header-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  padding-inline: var(--if-gutter);
  border-bottom: 1px solid var(--if-hairline);
  font-family: var(--if-mono-font);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--if-muted);
}
[data-theme="inference"] .if-header-strip-links {
  display: flex;
  gap: 22px;
  align-items: center;
}
[data-theme="inference"] .if-strip-link {
  color: var(--if-muted);
  text-decoration: none;
  transition: color 120ms linear;
}
[data-theme="inference"] .if-strip-link:hover {
  color: var(--if-ink);
}
[data-theme="inference"] .if-strip-link.is-cobalt {
  color: var(--if-primary);
}
[data-theme="inference"] .if-strip-link.is-cobalt:hover {
  color: var(--if-cobalt-hover);
}

/* main nav row (desktop) */
[data-theme="inference"] .if-nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 74px;
  padding-inline: var(--if-gutter);
}
[data-theme="inference"] .if-brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--if-ink);
  text-decoration: none;
  white-space: nowrap;
}
[data-theme="inference"] .if-brand-word {
  font-family: var(--if-display-font);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.04em;
  line-height: 1;
}
[data-theme="inference"] .if-brand-square {
  width: 9px;
  height: 9px;
  background: var(--if-primary);
  display: inline-block;
}
[data-theme="inference"] .if-nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
  font-family: var(--if-mono-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
[data-theme="inference"] .if-nav-link {
  color: #4a4f57;
  text-decoration: none;
  padding: 9px 11px 7px;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease-out;
}
[data-theme="inference"] .if-nav-link:hover {
  color: var(--if-ink);
}
[data-theme="inference"] .if-nav-link.is-active {
  color: var(--if-ink);
  border-bottom-color: var(--if-primary);
}
[data-theme="inference"] .if-nav-spacer {
  flex: 1;
}
[data-theme="inference"] .if-nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-theme="inference"] .if-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--if-accent);
  border-radius: 2px;
  text-decoration: none;
  transition: color 120ms linear, background-color 120ms linear;
}
[data-theme="inference"] .if-icon-btn:hover {
  color: var(--if-ink);
  background: rgba(14, 16, 19, 0.05);
}
[data-theme="inference"] .if-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--if-ink);
  color: var(--if-paper);
  font-family: var(--if-mono-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: none;
}
[data-theme="inference"] .if-btn-subscribe {
  background: var(--if-primary);
  color: var(--if-on-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 2px;
  line-height: 1;
  text-decoration: none;
  transition: background-color 140ms ease-out;
}
[data-theme="inference"] .if-btn-subscribe:hover {
  background: var(--if-cobalt-hover);
}
[data-theme="inference"] .if-btn-subscribe:active {
  transform: translateY(1px);
}

/* bespoke header cart (InferenceCartLink) — design bag glyph + cobalt badge */
[data-theme="inference"] .if-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--if-accent);
  border-radius: 2px;
  text-decoration: none;
  transition: color 120ms linear, background-color 120ms linear;
}
[data-theme="inference"] .if-cart-link:hover {
  color: var(--if-ink);
  background: rgba(14, 16, 19, 0.05);
}
[data-theme="inference"] .if-cart-badge {
  position: absolute;
  top: 1px;
  inset-inline-end: 0;
  min-width: 15px;
  height: 15px;
  background: var(--if-primary);
  color: var(--if-on-primary);
  font-family: var(--if-mono-font);
  font-size: 9.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 3px;
  line-height: 1;
}

/* mobile header (grid: hamburger | brand | actions) */
[data-theme="inference"] .if-header-mobile {
  display: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 58px;
  padding-inline: 10px;
  background: var(--if-paper);
  color: var(--if-ink);
  border-bottom: 2px solid var(--if-ink);
}
[data-theme="inference"] .if-header-mobile-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}
[data-theme="inference"] .if-cart-link.is-mobile {
  width: 44px;
  height: 44px;
}
[data-theme="inference"] .if-cart-link.is-mobile .if-cart-badge {
  top: 5px;
  inset-inline-end: 4px;
}
[data-theme="inference"] .if-mobile-brand {
  justify-self: center;
}
[data-theme="inference"] .if-mobile-brand .if-brand-word {
  font-size: 21px;
}
[data-theme="inference"] .if-mobile-brand .if-brand-square {
  width: 7px;
  height: 7px;
}
[data-theme="inference"] .if-avatar.is-mobile {
  width: 44px;
  height: 44px;
  background: none;
  color: inherit;
}
[data-theme="inference"] .if-avatar.is-mobile .if-avatar-inner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--if-ink);
  color: var(--if-paper);
  font-family: var(--if-mono-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hamburger trigger — hidden desktop, shown < lg */
[data-theme="inference"] .if-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  color: var(--if-ink);
  cursor: pointer;
}

/* desktop chrome shown >= lg, mobile chrome shown < lg */
[data-theme="inference"] .if-header-desktop {
  display: block;
}
@media (max-width: 1023px) {
  [data-theme="inference"] .if-header-desktop {
    display: none;
  }
  [data-theme="inference"] .if-header-mobile {
    display: grid;
  }
}

/* ═══════════════════ LIVE TICKER (1a) — overflow-x:clip stage (P-140) ═══ */
[data-theme="inference"] .if-ticker {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 40px;
  padding-inline: var(--if-gutter);
  background: var(--if-ink);
  color: var(--if-paper);
  font-family: var(--if-mono-font);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow-x: clip; /* P-140 — no document horizontal overflow */
}
[data-theme="inference"] .if-ticker-live {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
[data-theme="inference"] .if-ticker-dot {
  width: 8px;
  height: 8px;
  background: var(--if-primary);
  flex: none;
}
[data-theme="inference"] .if-ticker-sep {
  color: var(--if-accent);
}
[data-theme="inference"] .if-ticker-item {
  color: var(--if-paper);
  text-decoration: none;
  transition: color 120ms linear;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="inference"] .if-ticker-item.is-dim {
  color: #c6cbd2;
}
[data-theme="inference"] .if-ticker-item:hover {
  color: var(--if-on-ink-cobalt);
}
[data-theme="inference"] .if-ticker-full {
  color: var(--if-on-ink-cobalt);
  text-decoration: none;
  flex: none;
  margin-inline-start: auto;
}
@media (max-width: 1023px) {
  [data-theme="inference"] .if-ticker {
    height: 38px;
    padding-inline: var(--if-gutter-mobile);
    gap: 12px;
  }
}

/* ═══════════════════ MOBILE DRAWER (InferenceMobileMenu, 1i) ═══════════ */
/* scrim (1o §7): rgba(14,16,19,0.55), flat, NO backdrop-blur, z 90 */
[data-theme="inference"] .if-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 16, 19, 0.55);
}
/* panel: min(340px, 88vw) × 100dvh · background paper · inset-inline-end:0 · z 100 */
[data-theme="inference"] .if-drawer-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(340px, 88vw);
  height: 100dvh;
  background: var(--if-paper);
  color: var(--if-ink);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(14, 16, 19, 0.4);
  font-family: var(--if-body-font);
}
[data-theme="inference"] .if-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding-inline: 20px 8px;
  border-bottom: 2px solid var(--if-ink);
}
[data-theme="inference"] .if-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  color: var(--if-ink);
  cursor: pointer;
}
[data-theme="inference"] .if-drawer-nav {
  padding: 10px 20px 0;
  display: flex;
  flex-direction: column;
}
[data-theme="inference"] .if-drawer-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 13px;
  border-bottom: 1px solid var(--if-hairline);
  color: var(--if-ink);
  text-decoration: none;
}
[data-theme="inference"] .if-drawer-link.is-last {
  border-bottom: none;
}
[data-theme="inference"] .if-drawer-link.is-active {
  color: var(--if-primary);
}
[data-theme="inference"] .if-drawer-idx {
  font-family: var(--if-mono-font);
  font-size: 11px;
  font-weight: 600;
  color: var(--if-primary);
}
[data-theme="inference"] .if-drawer-label {
  font-family: var(--if-display-font);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
[data-theme="inference"] .if-drawer-foot {
  margin-top: auto;
  border-top: 2px solid var(--if-ink);
  padding: 16px 20px 0;
}
[data-theme="inference"] .if-drawer-subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--if-primary);
  color: var(--if-on-primary);
  font-size: 15px;
  font-weight: 600;
  padding: 14px;
  border-radius: 2px;
  margin-top: 8px;
  text-decoration: none;
}
[data-theme="inference"] .if-drawer-subscribe:active {
  transform: translateY(1px);
}
[data-theme="inference"] .if-drawer-utility {
  display: flex;
  gap: 18px;
  padding-block: 16px;
  font-family: var(--if-mono-font);
  font-size: 10px;
  letter-spacing: 0.12em;
}
[data-theme="inference"] .if-drawer-utility a {
  color: var(--if-muted);
  text-decoration: none;
}
[data-theme="inference"] .if-drawer-utility .if-drawer-utility-spacer {
  flex: 1;
}
[data-theme="inference"] .if-drawer-utility .if-drawer-utility-time {
  color: var(--if-muted);
}

/* ═══════════════════ FOOTER (Inference Footer) ═══════════════════ */
[data-theme="inference"] .if-footer {
  background: var(--if-ink);
  color: var(--if-paper);
  font-family: var(--if-body-font);
}
[data-theme="inference"] .if-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 56px;
  padding: 64px var(--if-gutter) 56px;
}
[data-theme="inference"] .if-footer-brand-word {
  font-family: var(--if-display-font);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--if-paper);
}
[data-theme="inference"] .if-footer-brand-square {
  width: 9px;
  height: 9px;
  background: var(--if-on-ink-cobalt);
  display: inline-block;
}
[data-theme="inference"] .if-footer-mono-line {
  font-family: var(--if-mono-font);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--if-footer-meta);
  margin-top: 12px;
}
[data-theme="inference"] .if-footer-news-head {
  font-family: var(--if-mono-font);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--if-footer-dim);
  margin-top: 36px;
}
[data-theme="inference"] .if-footer-heading {
  font-family: var(--if-mono-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--if-footer-dim);
  margin-bottom: 16px;
}
[data-theme="inference"] .if-footer-link {
  color: var(--if-footer-link);
  font-size: 14px;
  line-height: 1;
  padding-block: 7px;
  text-decoration: none;
  transition: color 120ms linear;
}
[data-theme="inference"] .if-footer-link:hover {
  color: var(--if-paper);
}
[data-theme="inference"] .if-footer-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--if-accent);
  color: var(--if-paper);
  padding: 11px 13px;
  font-family: var(--if-mono-font);
  font-size: 12.5px;
  border-radius: 2px;
  outline-offset: 2px;
}
[data-theme="inference"] .if-footer-signup {
  background: var(--if-primary);
  color: var(--if-on-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 2px;
  line-height: 1;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 140ms ease-out;
}
[data-theme="inference"] .if-footer-signup:hover {
  background: var(--if-cobalt-hover);
}
[data-theme="inference"] .if-footer-fine {
  font-family: var(--if-mono-font);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--if-footer-dim);
  margin-top: 10px;
}
[data-theme="inference"] .if-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid rgba(248, 247, 244, 0.12);
  padding: 20px var(--if-gutter);
  font-family: var(--if-mono-font);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--if-footer-dim);
}
[data-theme="inference"] .if-footer-bottom-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
[data-theme="inference"] .if-footer-bottom-link {
  color: var(--if-footer-meta);
  text-decoration: none;
  transition: color 120ms linear;
}
[data-theme="inference"] .if-footer-bottom-link:hover {
  color: var(--if-paper);
}
@media (max-width: 1023px) {
  [data-theme="inference"] .if-footer-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 48px var(--if-gutter-mobile) 40px;
  }
  [data-theme="inference"] .if-footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    margin-top: 44px;
  }
  [data-theme="inference"] .if-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px var(--if-gutter-mobile);
  }
}

/* ═══════════════════ SHARED PRIMITIVES ═══════════════════ */
/* mono category-pill (blog/shop filters) */
[data-theme="inference"] .if-pill {
  color: var(--if-slate-text);
  padding: 7px 14px;
  border: 1px solid var(--if-wire-grey);
  border-radius: 2px;
  font-weight: 500;
  text-decoration: none;
  transition: color 120ms linear, border-color 120ms linear;
  white-space: nowrap;
}
[data-theme="inference"] .if-pill:hover {
  color: var(--if-primary);
  border-color: var(--if-primary);
}
[data-theme="inference"] .if-pill-active {
  background: var(--if-ink);
  color: var(--if-paper);
  padding: 7px 14px;
  border: 1px solid var(--if-ink);
  border-radius: 2px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
/* overflow-safe filter row on mobile (P-140) */
[data-theme="inference"] .if-pill-scroll {
  overflow-x: clip;
}
@media (max-width: 1023px) {
  [data-theme="inference"] .if-pill-scroll.is-mobile-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* post/dispatch card link (hover: whole card → cobalt, title inherits) */
[data-theme="inference"] .if-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--if-ink);
  text-decoration: none;
  transition: color 120ms ease-out;
}
[data-theme="inference"] .if-card:hover {
  color: var(--if-primary);
}
[data-theme="inference"] .if-photo {
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--if-img-placeholder);
}

/* wire-row link (briefing wire / top-of-wire) */
[data-theme="inference"] .if-wire-row {
  color: var(--if-ink);
  text-decoration: none;
  transition: color 120ms ease-out;
}
[data-theme="inference"] .if-wire-row:hover {
  color: var(--if-primary);
}

/* product card — CSS-ONLY hover (translateY, P-097, no JS) */
[data-theme="inference"] .if-product-card {
  display: flex;
  flex-direction: column;
  color: var(--if-ink);
  text-decoration: none;
  transition: transform 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
[data-theme="inference"] .if-product-card:hover {
  transform: translateY(-4px);
}

/* mono meta helper */
[data-theme="inference"] .if-mono {
  font-family: var(--if-mono-font);
}
[data-theme="inference"] .if-tnum {
  font-variant-numeric: tabular-nums;
}

/* category chip (bordered mono badge — post eyebrow) */
[data-theme="inference"] .if-chip {
  display: inline-flex;
  border: 1px solid rgba(27, 79, 224, 0.4);
  color: var(--if-primary);
  font-family: var(--if-mono-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 4px 9px;
  border-radius: 2px;
}

/* ═══════════════════ BUTTONS / CTAs (1o §5) ═══════════════════ */
[data-theme="inference"] .if-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--if-primary);
  color: var(--if-on-primary);
  border: 1px solid var(--if-primary);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 20px;
  border-radius: 2px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease-out;
}
[data-theme="inference"] .if-btn-primary:hover {
  background: var(--if-cobalt-hover);
  border-color: var(--if-cobalt-hover);
}
[data-theme="inference"] .if-btn-primary:active {
  transform: translateY(1px);
}
[data-theme="inference"] .if-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--if-ink);
  color: var(--if-ink);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 20px;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
[data-theme="inference"] .if-btn-outline:hover {
  background: var(--if-ink);
  color: var(--if-paper);
}
[data-theme="inference"] .if-btn-outline:active {
  transform: translateY(1px);
}

/* ═══════════════════ PROSE (post/page body) ═══════════════════ */
[data-theme="inference"] .if-prose {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--if-prose);
}
[data-theme="inference"] .if-prose p {
  margin: 0 0 24px;
  max-width: 65ch;
}
[data-theme="inference"] .if-prose h2 {
  margin: 44px 0 18px;
  font-family: var(--if-display-font);
  font-weight: 800;
  font-size: 29px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--if-ink);
}
[data-theme="inference"] .if-prose h3 {
  margin: 36px 0 16px;
  font-family: var(--if-display-font);
  font-weight: 700;
  font-size: 21.5px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--if-ink);
}
/*
  Prose links, with button-like anchors exempted (2026-07-29).

  InferencePageLayout wraps generic page bodies in .if-prose, so this rule also
  caught the member/subscribe CTA — an <a> carrying bg-primary and
  text-primary-foreground. At (0,2,1) it outranks a single utility class, so the
  button rendered cobalt-on-cobalt (contrast 1:1, label present and unreadable)
  AND underlined like body copy. Measured on globai.org/member/subscribe.

  The rule is not wrong; a theme is entitled to colour its prose links. What is
  wrong is that it cannot tell an inline citation from a button. :not([class*="bg-"])
  draws that line: prose links come from editor output and carry no class, so
  they still match, while anything with a background utility is unambiguously a
  control and keeps its own colours.

  Note the asymmetry this exposes — the theme's own bespoke bodies (the 404, the
  shop) set colour via inline style, which beats any selector, so they were never
  affected. Only shared bodies that style with utility classes lose here. Same
  family as S-51 / S-53: a shared utility silently outranked inside a theme scope.
*/
[data-theme="inference"] .if-prose a:not([class*="bg-"]) {
  color: var(--if-primary);
  text-decoration: underline;
  text-decoration-color: rgba(27, 79, 224, 0.35);
  text-underline-offset: 3px;
  transition: color 120ms linear, text-decoration-color 120ms linear;
}
[data-theme="inference"] .if-prose a:not([class*="bg-"]):hover {
  color: var(--if-cobalt-hover);
  text-decoration-color: var(--if-cobalt-hover);
}
[data-theme="inference"] .if-prose strong {
  color: var(--if-ink);
}
[data-theme="inference"] .if-prose blockquote {
  margin: 40px 0;
  padding-block: 26px;
  border-block: 1px solid var(--if-hairline);
}
[data-theme="inference"] .if-prose blockquote p {
  margin: 0;
  font-family: var(--if-display-font);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--if-ink);
  max-width: none;
}
[data-theme="inference"] .if-prose img {
  width: 100%;
  height: auto;
  display: block;
  margin: 36px 0;
  background: var(--if-img-placeholder);
}
[data-theme="inference"] .if-prose ul,
[data-theme="inference"] .if-prose ol {
  margin: 0 0 24px;
  padding-inline-start: 22px;
  max-width: 65ch;
}
[data-theme="inference"] .if-prose li {
  margin-bottom: 8px;
}
/* code block — dark bar + ink body (1d) */
[data-theme="inference"] .if-prose pre {
  margin: 32px 0;
  background: var(--if-code-bg);
  color: var(--if-code-fg);
  font-family: var(--if-mono-font);
  font-size: 13.5px;
  line-height: 1.75;
  padding: 22px 24px;
  overflow-x: auto;
  border-radius: 2px;
}
[data-theme="inference"] .if-prose code {
  font-family: var(--if-mono-font);
  font-size: 0.9em;
}
[data-theme="inference"] .if-prose pre code {
  font-size: inherit;
}
[data-theme="inference"] .if-prose :not(pre) > code {
  background: rgba(14, 16, 19, 0.06);
  padding: 1px 5px;
  border-radius: 2px;
}

/* ═══════════════════ HOME LAYOUT (1A / 1H) ═══════════════════ */
[data-theme="inference"] .if-band {
  max-width: var(--if-container);
  margin: 0 auto;
}
[data-theme="inference"] .if-hero-grid {
  max-width: var(--if-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 440px;
  padding: 36px var(--if-gutter) 52px;
}
[data-theme="inference"] .if-hero-lead {
  padding-inline-end: var(--if-gutter);
}
[data-theme="inference"] .if-hero-aside {
  border-inline-start: 1px solid var(--if-hairline);
  padding-inline-start: var(--if-gutter);
}
[data-theme="inference"] .if-dispatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* column rules + inset padding (1A) */
[data-theme="inference"] .if-dispatch-cell {
  padding-inline-end: 26px;
}
[data-theme="inference"] .if-dispatch-cell[data-i="1"],
[data-theme="inference"] .if-dispatch-cell[data-i="2"] {
  padding-inline: 26px;
  border-inline-start: 1px solid var(--if-hairline);
}
[data-theme="inference"] .if-dispatch-cell[data-i="3"] {
  padding-inline-start: 26px;
  padding-inline-end: 0;
  border-inline-start: 1px solid var(--if-hairline);
}
/* signal index (5 cells, hairline column rules) */
[data-theme="inference"] .if-signal-index {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--if-hairline);
  margin-bottom: 26px;
}
[data-theme="inference"] .if-signal-cell {
  padding: 16px 20px 14px;
}
[data-theme="inference"] .if-signal-cell + .if-signal-cell {
  border-inline-start: 1px solid var(--if-hairline);
}
/* wire list rows (grid: time | cat | headline | desk) */
[data-theme="inference"] .if-wire-list-row {
  display: grid;
  grid-template-columns: 64px 108px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding-block: 14px;
  border-top: 1px solid var(--if-hairline);
  color: var(--if-ink);
  text-decoration: none;
}
[data-theme="inference"] .if-wire-cat {
  justify-self: start;
  border: 1px solid var(--if-wire-grey);
  color: var(--if-accent);
  font-family: var(--if-mono-font);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 2px;
}

/* ═══════════════════ BLOG LAYOUT (1C / 1J) ═══════════════════ */
[data-theme="inference"] .if-listing-inner {
  max-width: var(--if-container);
  margin: 0 auto;
}
[data-theme="inference"] .if-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 var(--if-gutter);
}
[data-theme="inference"] .if-blog-cell {
  padding: 32px 30px;
  border-bottom: 1px solid var(--if-hairline);
  border-inline-start: 1px solid var(--if-hairline);
}
/* first column of each row has no inner-start rule + flush-start padding */
[data-theme="inference"] .if-blog-cell.is-col0 {
  padding-inline: 0 30px;
  border-inline-start: none;
}
[data-theme="inference"] .if-blog-cell.is-col2 {
  padding-inline: 30px 0;
}
[data-theme="inference"] .if-pagination {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 var(--if-gutter);
  border-top: 2px solid var(--if-ink);
  padding: 22px 0 56px;
  font-family: var(--if-mono-font);
  font-size: 12px;
  letter-spacing: 0.1em;
}
[data-theme="inference"] .if-page-num {
  color: var(--if-slate-text);
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  transition: color 120ms linear, border-color 120ms linear;
}
[data-theme="inference"] .if-page-num:hover {
  color: var(--if-primary);
  border-color: var(--if-wire-grey);
}
[data-theme="inference"] .if-page-num.is-active {
  background: var(--if-primary);
  color: var(--if-on-primary);
  font-weight: 600;
}

/* ═══════════════════ SHOP LAYOUT (1F / 1M) ═══════════════════ */
[data-theme="inference"] .if-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px var(--if-gutter);
  padding: 40px var(--if-gutter) 64px;
  max-width: var(--if-container);
  margin: 0 auto;
}
/* product cover plate (variant A ink / B lined-paper / C cobalt handled inline) */
[data-theme="inference"] .if-product-plate {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  padding: 28px;
}

/* ═══════════════════ POST LAYOUT (1D / 1K) ═══════════════════ */
[data-theme="inference"] .if-article {
  padding: 48px 0 0;
}
[data-theme="inference"] .if-article-col {
  max-width: var(--if-prose);
  margin-inline: auto;
  padding-inline: var(--if-gutter-mobile);
}
[data-theme="inference"] .if-article-figure {
  max-width: 960px;
  margin: 36px auto 0;
  padding-inline: var(--if-gutter-mobile);
}
[data-theme="inference"] .if-postnav {
  max-width: 960px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 2px solid var(--if-ink);
  padding-inline: var(--if-gutter-mobile);
}

/* ═══════════════════ PAGE LAYOUT (1E / 1L) ═══════════════════ */
[data-theme="inference"] .if-page-col {
  max-width: var(--if-prose);
  margin-inline: auto;
  padding: 52px var(--if-gutter-mobile) 72px;
}

/* ═══════════════════ RESPONSIVE (< lg → mobile 390) ═══════════════════ */
@media (max-width: 1023px) {
  [data-theme="inference"] .if-hero-grid {
    grid-template-columns: 1fr;
    padding: 24px var(--if-gutter-mobile) 0;
    gap: 8px;
  }
  [data-theme="inference"] .if-hero-lead {
    padding-inline-end: 0;
  }
  [data-theme="inference"] .if-hero-aside {
    display: none; /* mobile hero (1H) drops the top-of-wire aside */
  }
  [data-theme="inference"] .if-hero-lead h1 {
    font-size: 33px !important;
    line-height: 1.05 !important;
  }
  [data-theme="inference"] .if-band {
    padding-inline: 0 !important;
  }
  [data-theme="inference"] .if-dispatch-grid {
    grid-template-columns: 1fr;
    padding-inline: var(--if-gutter-mobile);
  }
  [data-theme="inference"] .if-dispatch-cell,
  [data-theme="inference"] .if-dispatch-cell[data-i="1"],
  [data-theme="inference"] .if-dispatch-cell[data-i="2"],
  [data-theme="inference"] .if-dispatch-cell[data-i="3"] {
    padding-inline: 0;
    border-inline-start: none;
    padding-block: 24px;
    border-bottom: 1px solid var(--if-hairline);
  }
  [data-theme="inference"] .if-signal-index {
    grid-template-columns: 1fr 1fr;
  }
  [data-theme="inference"] .if-signal-cell + .if-signal-cell {
    border-inline-start: none;
  }
  [data-theme="inference"] .if-signal-cell:nth-child(even) {
    border-inline-start: 1px solid var(--if-hairline);
  }
  [data-theme="inference"] .if-signal-cell:nth-child(n + 3) {
    border-top: 1px solid var(--if-hairline);
  }
  [data-theme="inference"] .if-wire-list-row {
    grid-template-columns: 56px 1fr;
    gap: 10px 14px;
  }
  [data-theme="inference"] .if-wire-cat,
  [data-theme="inference"] .if-wire-desk {
    display: none;
  }
  [data-theme="inference"] .if-blog-grid {
    grid-template-columns: 1fr;
    padding-inline: var(--if-gutter-mobile);
  }
  [data-theme="inference"] .if-blog-cell,
  [data-theme="inference"] .if-blog-cell.is-col0,
  [data-theme="inference"] .if-blog-cell.is-col2 {
    padding: 24px 0;
    border-inline-start: none;
  }
  [data-theme="inference"] .if-shop-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
    padding: 24px var(--if-gutter-mobile) 40px;
  }
  [data-theme="inference"] .if-pagination {
    margin-inline: var(--if-gutter-mobile);
    gap: 16px;
    padding-bottom: 40px;
  }
}

/* ═══════════════════ RTL / DIRECTION SAFETY (1o §8) ═══════════════════ */
/* Timestamps/prices/DOIs/code are wrapped dir="ltr" at the markup level.
   Arrows mirror naturally via logical properties. The letter-spacing on the
   mono display strings is direction-neutral. No directional decoration. */
[dir="rtl"] [data-theme="inference"] .if-nav-link,
[dir="rtl"] [data-theme="inference"] .if-drawer-label {
  letter-spacing: 0.08em; /* mirror-safe tracking */
}