/*
  THE DIGITAL CRUX — crux-engine.css (SOURCE OF TRUTH V1.0)
  RESTORING ORIGINAL DESIGN SYSTEM. PURGING ALL LATER ADDITIONS.
*/

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Type */
  --font-display: "Newsreader", "Source Serif Pro", Georgia, serif;
  --font-body:    "Geist", "Inter", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Color System (OKLCH) */
  --c-bg:        oklch(0.985 0.005 80);   /* warm off-white */
  --c-bg-deep:   oklch(0.965 0.008 78);   /* section bg */
  --c-surface:   oklch(1 0 0);
  --c-line:      oklch(0.90 0.008 75);
  --c-line-soft: oklch(0.94 0.006 78);

  --c-ink:       oklch(0.18 0.01 60);     /* headlines */
  --c-body:      oklch(0.32 0.01 60);     /* body */
  --c-muted:     oklch(0.52 0.01 60);     /* captions */
  --c-faint:     oklch(0.70 0.01 60);     /* metadata */

  /* Blog accent */
  --c-blog:      oklch(0.55 0.16 38);     /* terracotta */
  --c-blog-soft: oklch(0.94 0.04 38);

  /* Store accent */
  --c-store:     oklch(0.68 0.18 70);     /* marigold */
  --c-store-deep: oklch(0.48 0.16 65);    
  --c-store-soft: oklch(0.95 0.06 75);    
  --c-store-bg:   oklch(0.97 0.012 76);

  --c-success:   oklch(0.58 0.13 155);
  --c-warn:      oklch(0.72 0.15 75);

  /* Radius */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px;

  /* Shadows */
  --sh-card: 0 1px 0 rgba(30,20,10,.04), 0 2px 6px rgba(30,20,10,.04);
  --sh-pop:  0 6px 24px rgba(30,20,10,.08), 0 1px 0 rgba(30,20,10,.04);
  --sh-deep: 0 18px 60px rgba(30,20,10,.18), 0 2px 8px rgba(30,20,10,.06);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 500;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }

.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ── Common Components ───────────────────────────────────────── */

.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 3px;
  background: oklch(0.96 0.008 75);
  color: var(--c-muted);
  letter-spacing: 0.06;
  text-transform: uppercase;
  border: 1px solid var(--c-line-soft);
}

.placeholder {
  background: repeating-linear-gradient(135deg, oklch(0.93 0.008 75) 0 8px, oklch(0.89 0.01 75) 8px 16px);
  display: grid;
  place-items: center;
  border-radius: 4px;
}

.placeholder-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: oklch(0.45 0.01 70);
  background: rgba(255,255,255,0.7);
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.04;
}

/* ── Article Layout (Blog) ──────────────────────────────────── */

.article-shell {
  padding: 56px 96px 96px;
  display: grid;
  grid-template-columns: 200px 1fr 240px;
  gap: 56px;
  max-width: 1440px;
  margin: 0 auto;
}

.article-main {
  min-width: 0;
}

.article-hero-section {
  padding: 64px 96px 80px;
  border-bottom: 1px solid var(--c-line);
}

.article-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Sidebar TOC */
.toc-sidebar {
  position: sticky;
  top: 24px;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--c-line);
}

.toc-item {
  font-size: 12.5px;
  padding: 2px 0 2px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--c-muted);
}

.toc-item.active {
  border-left: 2px solid var(--c-blog);
  color: var(--c-ink);
  font-weight: 500;
}

/* Right Rail */
.right-rail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pull-quote {
  border-top: 2px solid var(--c-ink);
  padding-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: var(--c-ink);
}

/* ── Content ────────────────────────────────────────────────── */

.entry-content p {
  font-size: 17.5px;
  color: var(--c-body);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 680px;
}

.entry-content h1 { font-size: 52px; letter-spacing: -0.018em; line-height: 1.08; margin-bottom: 24px; }
.entry-content h2 { font-size: 30px; margin-top: 48px; marginBottom: 16px; }
.entry-content h3 { font-size: 24px; margin-top: 32px; marginBottom: 14px; }

.lead-p {
  font-family: var(--font-body);
  font-size: 20px !important;
  color: var(--c-body);
  line-height: 1.5 !important;
  margin-bottom: 32px !important;
  font-style: italic;
  border-left: 2.5px solid var(--c-blog);
  padding-left: 24px;
}

/* Ensure 3-column doesn't collapse too early */
@media (min-width: 1024px) {
  .article-shell {
    grid-template-columns: 200px 1fr 240px !important;
  }
}

/* Product Aside / Callout */
.product-callout {
  margin: 36px 0;
  padding: 24px 28px;
  background: var(--c-bg-deep);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  display: flex;
  gap: 24px;
  align-items: center;
}

/* Buttons (Restrained) */
.btn-restrained {
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.btn-restrained:hover { opacity: 0.8; }

/* ── Site Shell ─────────────────────────────────────────────── */

.utility-bar {
  border-bottom: 1px solid var(--c-lineSoft);
  background: var(--c-bgDeep);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  font-size: 11px;
}

.header-main {
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-footer {
  background: var(--c-ink);
  color: var(--c-bg);
  padding: 64px 32px 32px;
}

/* Progress Bar */
.scroll-progress {
  height: 3px;
  background: var(--c-lineSoft);
  position: sticky;
  top: 0;
  z-index: 10;
}

.scroll-progress-bar {
  height: 100%;
  background: var(--c-blog);
  width: 0%;
}