/* ─────────────────────────────────────────────────────────────
   LudLLM project pages — shared stylesheet
   Reuses the sandip.dev design system (tokens, header, footer,
   palette switcher) and adds a long-form article layer plus a
   few project-specific components.
   ───────────────────────────────────────────────────────────── */

/* Default theme: Cool Fog (Linear-ish, Swiss-modern) */
:root, [data-theme="fog"] {
  --paper: #F6F6F7;
  --paper-2: #EFEFF1;
  --ink: #0A0A0B;
  --ink-soft: #4A4A52;
  --ink-softer: #8A8A92;
  --rule: #E2E2E5;
  --rule-soft: #ECECEF;
  --accent: #1F4DDA;
  --accent-soft: rgba(31, 77, 218, 0.08);
  --highlight: #F2D75A;
}
[data-theme="white"] {
  --paper: #FFFFFF;
  --paper-2: #FAFAFA;
  --ink: #000000;
  --ink-soft: #525252;
  --ink-softer: #8F8F8F;
  --rule: #EAEAEA;
  --rule-soft: #F2F2F2;
  --accent: #000000;
  --accent-soft: rgba(0, 0, 0, 0.05);
  --highlight: #FFE662;
}
[data-theme="paper"] {
  --paper: #F4F1E8;
  --paper-2: #ECE7D7;
  --ink: #161513;
  --ink-soft: #5C5A52;
  --ink-softer: #8E8B7F;
  --rule: #D8D2BF;
  --rule-soft: #E5E0CE;
  --accent: #B5462A;
  --accent-soft: rgba(181, 70, 42, 0.08);
  --highlight: #F2D75A;
}
[data-theme="ink"] {
  --paper: #0E0E10;
  --paper-2: #16161A;
  --ink: #F2F2F4;
  --ink-soft: #9A9AA3;
  --ink-softer: #5E5E66;
  --rule: #2A2A30;
  --rule-soft: #1F1F24;
  --accent: #E07650;
  --accent-soft: rgba(224, 118, 80, 0.12);
  --highlight: #E0B84F;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
}
[data-theme="paper"] body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.serif { font-family: 'Fraunces', Georgia, serif; font-feature-settings: 'ss01'; }
a { color: inherit; text-decoration: none; }

/* ─── Header ───────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 32px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}
.logo {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.logo-mark {
  width: 28px; height: 28px;
  background: url('/logo-mark.png') no-repeat center / contain;
}
[data-theme="ink"] .logo-mark { background-image: url('/logo-mark-white.png'); }
nav.primary { display: flex; gap: 4px; justify-content: center; }
nav.primary a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 8px 14px;
  color: var(--ink-soft);
  transition: color 0.15s;
  position: relative;
}
nav.primary a:hover { color: var(--ink); }
nav.primary a.active { color: var(--ink); }
nav.primary a.active::before { content: '·'; color: var(--accent); margin-right: 4px; }
.header-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-softer);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-dot {
  width: 6px; height: 6px;
  background: #6B9F4D;
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ─── Page frame ───────────────────────── */
main { position: relative; z-index: 2; }
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Section label ────────────────────── */
.label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-softer);
  display: flex;
  align-items: center;
  gap: 10px;
}
.label::before { content: ''; width: 24px; height: 1px; background: var(--ink-softer); }
.label.no-rule::before { display: none; }

/* ─── Breadcrumb ───────────────────────── */
.crumb {
  padding-top: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-softer);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.crumb a {
  color: var(--ink-soft);
  border-bottom: 1px dotted transparent;
  transition: color 0.15s, border-color 0.15s;
  padding-bottom: 1px;
}
.crumb a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.crumb .sep { color: var(--ink-softer); opacity: 0.6; }
.crumb .here { color: var(--ink); }

/* ─── Project hero ─────────────────────── */
.lud-hero {
  padding-top: 36px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: end;
}
.lud-hero h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-top: 16px;
}
.lud-hero h1 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.lud-hero .lead {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 560px;
}
.lud-hero .lead strong { color: var(--ink); font-weight: 600; }
.lud-hero-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* book cover */
.cover {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 2 / 3;
  background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 16px 40px rgba(0,0,0,0.16);
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.cover:hover { transform: translateY(-3px) scale(1.01); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Sub-nav (Overview / Novels / Write-up) ─── */
.subnav {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0;
}
.subnav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ─── Buttons / CTAs ───────────────────── */
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s;
}
.download-btn:hover { background: var(--accent); }
.download-btn .arrow { font-size: 14px; }

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.cta-link:hover { color: var(--accent); border-color: var(--accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* small link buttons used in version cards */
.minilink {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border-bottom: 1px dotted var(--ink-softer);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.minilink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── Article / long-form prose ────────── */
.article {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding-bottom: 40px;
}
.article-rail { position: sticky; top: 96px; }
.article-rail .rail-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.article-rail .rail-note a {
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--ink-softer);
  transition: color 0.15s, border-color 0.15s;
}
.article-rail .rail-note a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.prose { max-width: 680px; }
.prose > p {
  font-size: 17px;
  line-height: 1.68;
  margin-bottom: 22px;
  color: var(--ink);
}
.prose > p:first-of-type { margin-top: 0; }
.prose .lede {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
}
.prose h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 56px 0 18px;
  padding-top: 8px;
}
.prose h2 em, .prose h3 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.prose h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 40px 0 14px;
}
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }
.prose a.tlink {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  text-underline-offset: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.prose a.tlink:hover { color: var(--accent); border-bottom-color: var(--accent); }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.prose ul li, .prose ol li {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 12px;
  padding-left: 26px;
  position: relative;
  color: var(--ink);
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 12px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; }
.prose ol li::before {
  content: counter(li);
  position: absolute;
  left: 0; top: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.prose code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86em;
  background: var(--paper-2);
  padding: 1px 6px;
  color: var(--ink);
}

/* lead-in callout (used on the novels page) */
.prose blockquote {
  border-left: 2px solid var(--accent);
  background: var(--paper-2);
  padding: 18px 24px;
  margin: 0 0 24px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}

/* ─── Tables ───────────────────────────── */
.table-wrap {
  margin: 8px 0 28px;
  overflow-x: auto;
  border: 1px solid var(--rule);
}
table.lud {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 540px;
}
table.lud th, table.lud td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.5;
}
table.lud thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-softer);
  background: var(--paper-2);
  font-weight: 500;
  white-space: nowrap;
}
table.lud tbody tr:last-child td { border-bottom: none; }
table.lud tbody tr:hover { background: var(--accent-soft); }
table.lud td strong, table.lud th strong { color: var(--ink); font-weight: 600; }
table.lud code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  background: var(--paper-2);
  padding: 1px 5px;
}

/* ─── Figures ──────────────────────────── */
figure.lud {
  margin: 32px 0;
}
figure.lud img {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
figure.lud figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-softer);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.01em;
}
figure.lud.diagram img { padding: 8px; }

/* ─── Version cards (novels page) ──────── */
.versions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.vcard {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vcard .vtag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-softer);
}
.vcard h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.vcard .vlog {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.vcard .vmeta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-softer);
  text-transform: lowercase;
}
.vcard .vlinks { margin-top: auto; display: flex; flex-wrap: wrap; gap: 16px; padding-top: 6px; }

/* ─── Plot synopsis + spoiler toggle ───── */
.synopsis { margin-top: 24px; }
.synopsis .syn-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 18px;
}
.synopsis .syn-head h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.synopsis .syn-logline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 620px;
  margin-top: 16px;
}
.spoiler-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.spoiler-toggle:hover { color: var(--accent); border-color: var(--accent); }
.spoiler-toggle .tw { font-size: 13px; }
.syn-body {
  margin-top: 28px;
  display: none;
}
.syn-body.open { display: block; animation: fadeIn 0.35s ease; }
.syn-veil {
  margin-top: 24px;
  border: 1px dashed var(--rule);
  background: var(--paper-2);
  padding: 22px 24px;
  font-size: 14px;
  color: var(--ink-softer);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.6;
}
.syn-veil.hidden { display: none; }

/* ─── Studio (graph) page ──────────────── */
.studio-bar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.studio-bar .sb-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.studio-bar .sb-title span { color: var(--ink-softer); font-weight: 500; }
.studio-frame {
  width: 100%;
  height: 88vh;
  min-height: 560px;
  border: 0;
  border-top: 1px solid var(--rule);
  display: block;
  background: var(--paper);
}
.studio-note {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 32px 0;
  font-size: 13px;
  color: var(--ink-softer);
}

/* ─── Tabs (per-novel page) ────────────── */
.tabs {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
}
.tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 18px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.tabpanel { display: none; }
.tabpanel.active { display: block; animation: fadeIn 0.35s ease; }
.tabpanel.plot { margin-top: 28px; }

/* the studio embedded inside the studio tab */
.tab-studio-frame {
  width: 100%;
  height: 86vh;
  min-height: 560px;
  border: 1px solid var(--rule);
  display: block;
  background: var(--paper);
  margin-top: 24px;
}
.tab-studio-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-softer);
}
.tab-studio-note a {
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--ink-softer);
  transition: color 0.15s, border-color 0.15s;
}
.tab-studio-note a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.studio-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
.newtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: color 0.15s, border-color 0.15s;
}
.newtab-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ─── Disclaimer banner (novel pages) ──── */
.disclaimer {
  margin-top: 24px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.disclaimer strong { color: var(--ink); font-weight: 600; }
.disclaimer .dl-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}

/* ─── Novel cards on the overview ──────── */
.novel-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.novel-card {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s;
}
.novel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
.novel-card .nc-cover {
  aspect-ratio: 16 / 9;
  background: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.novel-card .nc-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.novel-card .nc-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.novel-card .nc-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-softer);
}
.novel-card h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.novel-card .nc-log {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.novel-card .nc-plot {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.novel-card .nc-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-softer);
  text-transform: lowercase;
}
.novel-card .nc-cta {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: color 0.15s, gap 0.2s;
}
.novel-card:hover .nc-cta { color: var(--accent); gap: 12px; }

a.card-link { color: inherit; text-decoration: none; display: block; }

/* big call-to-action panel (architecture link) */
.cta-panel {
  margin-top: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  transition: border-color 0.15s, background 0.15s;
}
a.card-link:hover .cta-panel { border-color: var(--accent); }
.cta-panel .cp-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.cta-panel .cp-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.5; max-width: 560px; }
.cta-panel .cp-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: color 0.15s, gap 0.2s;
}
a.card-link:hover .cp-arrow { color: var(--accent); gap: 12px; }

/* ─── Footer ───────────────────────────── */
footer.site {
  border-top: 1px solid var(--rule);
  margin-top: 0;
  padding: 48px 32px 56px;
  position: relative;
  z-index: 2;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-softer);
  text-transform: uppercase;
}
.footer-mark { display: flex; flex-direction: column; gap: 6px; }
.footer-mark .big {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: none;
}
.footer-center { text-align: center; line-height: 1.6; }
.footer-right { text-align: right; }

/* ─── Palette switcher ─────────────────── */
.palette-switcher {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 200;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-softer);
}
.palette-switcher .ps-label { border-right: 1px solid var(--rule); padding-right: 10px; }
.palette-switcher .swatches { display: flex; gap: 6px; }
.swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--paper); }
.swatch[data-pal="fog"]   { background: linear-gradient(135deg, #F6F6F7 50%, #1F4DDA 50%); }
.swatch[data-pal="white"] { background: linear-gradient(135deg, #FFFFFF 50%, #000000 50%); border-color: rgba(0,0,0,0.15); }
.swatch[data-pal="paper"] { background: linear-gradient(135deg, #F4F1E8 50%, #B5462A 50%); }
.swatch[data-pal="ink"]   { background: linear-gradient(135deg, #16161A 50%, #E07650 50%); border-color: rgba(255,255,255,0.15); }

/* ─── Responsive ───────────────────────── */
@media (max-width: 880px) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px 20px; }
  .header-meta { display: none; }
  nav.primary { gap: 0; }
  nav.primary a { padding: 8px 8px; font-size: 11px; }
  .page { padding: 0 20px; }
  .lud-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; }
  .lud-hero-aside { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .cover { max-width: 180px; }
  .article { grid-template-columns: 1fr; gap: 8px; }
  .article-rail { position: static; margin-bottom: 8px; }
  .versions { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align: left; gap: 16px; }
  .footer-center, .footer-right { text-align: left; }
  .studio-bar, .studio-note { padding-left: 20px; padding-right: 20px; }
  .palette-switcher { bottom: 12px; right: 12px; padding: 8px; }
  .palette-switcher .ps-label { display: none; }
}

/* ─── Header nav at small widths ──────────────────────────────────
   .header-inner was `auto 1fr`, and `1fr` means minmax(auto, 1fr): the auto
   floor holds the nav track open to its min-content, which for a flex row of
   five links is all five laid end to end. At 375px the nav wanted 294px and
   the header could spare 202px, so every page overflowed sideways by 73px.
   minmax(0, 1fr) lets the track shrink.

   The links still have to fit inside it. Below 560px the logo keeps its mark
   and drops the wordmark, and the links tighten their padding. All five stay
   visible down to 320px. */
@media (max-width: 560px) {
  .logo span:not(.logo-mark) { display: none; }
  nav.primary a { padding: 8px 5px; }
}
@media (max-width: 380px) {
  nav.primary a { padding: 8px 3px; }
}

/* ═════════════════════════════════════════════════════════════
   Sentinel case-study additions
   (everything above is shared with the LudLLM pages)
   ═════════════════════════════════════════════════════════════ */

/* ─── Wide breakout: the diagram needs more than the 680px prose ─── */
.sn-wide {
  width: calc(100% + 264px);
  margin-left: -264px;
}
@media (max-width: 880px) {
  .sn-wide { width: 100%; margin-left: 0; }
}

/* ─── The architecture figure ───────────── */
figure.sn-figure {
  margin: 28px 0 32px;
}
/* full-bleed: the diagram is 1200 units wide and unreadable inside a 680px column.
   The prose column starts at max((100vw - 1080) / 2, 0) + 32 + 200 + 64, so pulling
   left by that amount and leaving a 40px gutter lands the figure on the page edge. */
figure.sn-figure.sn-bleed {
  width: calc(100vw - 80px);
  margin: 32px 0 36px calc(284px - 50vw);
}
@media (max-width: 1080px) {
  figure.sn-figure.sn-bleed { margin-left: -256px; }
}
@media (max-width: 880px) {
  figure.sn-figure.sn-bleed { width: 100%; margin-left: 0; }
}

.sn-figure .sn-frame {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 18px;
  overflow-x: auto;
}
.sn-figure .sn-frame svg {
  display: block;
  width: 100%;
  height: auto;
}
.sn-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-softer);
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
}
.sn-figure figcaption a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.sn-figure figcaption a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* below the breakpoint the diagram stops being legible at column width, so let it
   keep its own width and pan inside the frame */
@media (max-width: 880px) {
  .sn-figure .sn-frame { padding: 12px; }
  .sn-figure .sn-frame svg { width: 900px; min-width: 900px; }
}

/* ─── Reserved walkthrough slot ─────────── */
.sn-video {
  margin: 26px 0 8px;
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--rule);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
}
.sn-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.sn-video .sn-v-mark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
}
.sn-video .sn-v-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.sn-video .sn-v-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-softer);
  max-width: 420px;
}

/* ─── Stat strip ────────────────────────── */
.sn-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 24px 0 30px;
}
.sn-stats > div {
  background: var(--paper);
  padding: 16px 18px;
}
.sn-stats .sn-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: block;
}
.sn-stats .sn-k {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-softer);
  display: block;
  margin-top: 5px;
}
@media (max-width: 880px) {
  .sn-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Pull quote / thesis line ──────────── */
.sn-thesis {
  border-left: 2px solid var(--accent);
  background: var(--paper-2);
  padding: 20px 24px;
  margin: 28px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}

/* ─── Verdict pill used in the build/buy table ─── */
.sn-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-soft);
  white-space: nowrap;
  display: inline-block;
}
.sn-pill.buy   { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sn-pill.build { border-color: var(--ink); color: var(--ink); }

/* ─── Honest-limits list ────────────────── */
.sn-limits {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-softer);
  background: var(--paper-2);
  padding: 20px 24px 8px;
  margin: 24px 0 8px;
}
.sn-limits .sn-l-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-softer);
  display: block;
  margin-bottom: 12px;
}
.sn-limits ul li { font-size: 15px; color: var(--ink-soft); }
.sn-limits ul li::before { background: var(--ink-softer); top: 10px; }

/* ─── Column blowout at the mobile breakpoint ─────────────────────
   The shared rule collapses .article to `1fr`, which is minmax(auto, 1fr):
   the auto floor holds the track open to the widest child's min-content.
   LudLLM has nothing wide enough for that to show. Sentinel does: the
   900px diagram and the build-versus-buy tables. The track was resolving
   to 680px inside a 335px container and pushing the page into horizontal
   overflow instead of letting those children scroll inside their own boxes.
   minmax(0, 1fr) drops the floor so the column tracks the viewport and
   .sn-frame / .table-wrap scroll internally, which is what they are for. */
@media (max-width: 880px) {
  .article { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Walkthrough slot, filled ────────────────────────────────────
   The dashed border and centred padding belong to the empty placeholder.
   Once the iframe is in, the box is just a frame around the video. */
.sn-video.sn-video-live {
  border-style: solid;
  display: block;
  padding: 0;
}

/* ─── Sticky rail versus full-bleed content ───────────────────────
   .article-rail is position:sticky, which makes it a positioned box, so it
   paints above in-flow content no matter the DOM order. Everything that
   breaks out of the 680px prose column runs underneath it: the bleed figure
   and all three .sn-wide tables start at the page edge, left of the rail.
   The result was the contents list floating on top of the diagram.

   Giving the breakout elements a position and a higher z-index puts them
   back on top. They need an opaque background too, otherwise the rail text
   still reads through the gaps between table rows and under the figcaption. */
.article-rail { z-index: 0; }
figure.sn-figure,
.prose .sn-wide {
  position: relative;
  z-index: 1;
  background: var(--paper);
}