@import url('/fonts/fonts.css');

:root {
  --bg: #1A1513;
  --card: #1E1916;
  --card-2: #241D19;
  --cream: #ECE4D8;
  --cream-dim: #BCB1A2;
  --meta: #9C9285;
  --gold: #D2A24A;
  --gold-glow: #E9D9A8;
  --gold-soft: #E0C496;
  --jade: #5DCAA5;
  --clay: #C08A6A;
  --border: #2C2420;
  --border-light: #3A322B;
  --max: 1120px;
  --article: 720px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid rgba(210,162,74,.35); }
a:hover { color: var(--gold-glow); border-bottom-color: rgba(210,162,74,.7); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: rgba(26,21,19,.94);
  backdrop-filter: blur(9px);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.brand {
  color: var(--cream);
  border: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
}
.nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.nav a {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--cream-dim);
  font: 500 12.5px/1.2 Inter, system-ui, sans-serif;
}
.nav a.outline { border-color: var(--border-light); color: var(--cream); }

.page-frame { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.article { max-width: var(--article); margin: 0 auto; padding: 28px 0 84px; }
.breadcrumbs, .eyebrow, .module-label, .source-list, .author, .article-meta {
  font-family: Inter, system-ui, sans-serif;
}
.breadcrumbs { color: var(--meta); font-size: 12px; }
.breadcrumbs a { color: var(--meta); border: 0; }
.eyebrow {
  margin: 22px 0 10px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow span { margin-left: 10px; color: var(--meta); font-weight: 500; letter-spacing: .06em; text-transform: none; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; text-wrap: balance; }
h1 { margin: 0 0 18px; font-size: clamp(31px,5vw,43px); line-height: 1.12; letter-spacing: -.01em; }
h2 { margin: 46px 0 12px; font-size: clamp(24px,3vw,29px); line-height: 1.22; }
h3 { margin: 30px 0 10px; font-size: 22px; line-height: 1.3; }
p { max-width: 68ch; margin: 0 0 15px; }
strong { color: var(--gold-glow); font-weight: 600; }
.quick-answer { margin-bottom: 18px; color: var(--cream); font-size: 22px; line-height: 1.5; }
.lead { color: var(--cream-dim); font-size: 21px; }
.muted { color: var(--cream-dim); }
.meta-note { color: var(--meta); font: 12px/1.5 Inter, system-ui, sans-serif; }

.card {
  margin: 18px 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--card);
  color: var(--cream-dim);
  font: 14.5px/1.55 Inter, system-ui, sans-serif;
}
.card p { max-width: none; }
.module-label {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.card-title { margin: 0 0 10px; color: var(--cream); font-family: 'Playfair Display', Georgia, serif; font-size: 22px; line-height: 1.3; }
.action-card {
  border-color: rgba(210,162,74,.45);
  background: linear-gradient(180deg,#221B17 0%,#1E1916 100%);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 22px;
  align-items: center;
}
.action-card .micro { margin-top: 8px; color: var(--meta); font-size: 12px; }
.btn {
  display: inline-block;
  border: 0;
  border-radius: 8px;
  padding: 13px 18px;
  background: var(--gold);
  color: #1A1513;
  font: 600 12.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn:hover { color: #1A1513; background: var(--gold-glow); }

.decision-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.branch { padding: 12px 14px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--card-2); }
.branch p { margin: 0; }
.pill { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 4px; font: 600 10.5px/1.5 Inter,system-ui,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.pill.yes { color: var(--jade); background: rgba(93,202,165,.14); }
.pill.no { color: var(--gold); background: rgba(210,162,74,.16); }
.experiment { border-color: rgba(93,202,165,.42); background: linear-gradient(180deg,#1A2220 0%,#1E1916 100%); }
.experiment .module-label { color: var(--jade); }
.experiment ul { margin: 10px 0; padding-left: 20px; color: var(--cream); }
.experiment li { margin-bottom: 6px; }

.trace { margin: 18px 0 28px; font-family: Inter,system-ui,sans-serif; }
.trace-nodes { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.trace-node { min-height: 94px; padding: 10px 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); position: relative; }
.trace-node:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 40%; color: var(--meta); }
.trace-node.saved { border-color: var(--gold); background: linear-gradient(180deg,#241D14,#1E1916); }
.trace-label { margin-bottom: 5px; color: var(--meta); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.trace-node.saved .trace-label { color: var(--gold); }
.trace-value { color: var(--cream); font-family: 'Cormorant Garamond',Georgia,serif; font-size: 16px; line-height: 1.3; }

.timeline { margin: 22px 0 28px; padding-left: 18px; border-left: 1px solid var(--border-light); }
.timeline-item { position: relative; padding: 0 0 18px 14px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: -22px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.timeline-year { color: var(--gold); font: 600 11px/1.5 Inter,system-ui,sans-serif; letter-spacing: .08em; }
.timeline-text { color: var(--cream-dim); }

.quote-card { padding-left: 18px; border-left: 3px solid var(--gold); }
.quote-card blockquote { margin: 0; color: var(--cream); font-size: 18px; line-height: 1.5; }
.quote-card cite { display: block; margin-top: 8px; color: var(--meta); font-size: 12px; font-style: normal; }
.example-record { border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; }
.example-record dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; }
.example-record dt { color: var(--meta); font-size: 12.5px; }
.example-record dd { margin: 0; color: var(--cream); }
.safety { margin: 14px 0; padding: 12px 16px; border-left: 3px solid var(--clay); border-radius: 0 8px 8px 0; background: rgba(192,138,106,.08); color: var(--cream-dim); font: 14.5px/1.55 Inter,system-ui,sans-serif; }

.related { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--border); }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; font: 14px/1.45 Inter,system-ui,sans-serif; }
.related-grid a { color: var(--cream); border: 0; }
.related-grid span { display: block; margin-top: 2px; color: var(--meta); font-size: 12px; }
.next-step { margin-top: 40px; padding: 26px 24px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--card); }
.next-step h2 { margin: 0 0 8px; }
.next-step p { color: var(--cream-dim); }
.secondary-actions { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border); display: flex; gap: 12px 24px; flex-wrap: wrap; font: 13px/1.5 Inter,system-ui,sans-serif; }
.secondary-actions a { color: var(--cream-dim); }
.author { display: flex; gap: 12px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--meta); font-size: 13px; }
.author b { display: block; color: var(--cream); font-weight: 500; }
.source-list { margin-top: 28px; color: var(--meta); font-size: 12.5px; }
.source-list ol { padding-left: 20px; }
.source-list li { margin-bottom: 6px; }

.blog-index { max-width: var(--max); margin: 0 auto; padding: 54px 20px 90px; }
.index-hero { max-width: 780px; margin-bottom: 54px; }
.index-hero h1 { font-size: clamp(38px,6vw,60px); }
.index-hero p { color: var(--cream-dim); font-size: 22px; }
.pillar { padding: 36px 0; border-top: 1px solid var(--border); }
.pillar-head { display: grid; grid-template-columns: 210px 1fr; gap: 28px; margin-bottom: 24px; }
.pillar-head p { color: var(--cream-dim); }
.article-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.article-link { display: block; min-height: 132px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--cream); }
.article-link:hover { border-color: var(--border-light); }
.article-link .type { color: var(--gold); font: 600 10.5px/1.4 Inter,system-ui,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.article-link h3 { margin: 8px 0 6px; font-size: 20px; }
.article-link p { margin: 0; color: var(--meta); font: 13px/1.45 Inter,system-ui,sans-serif; }
.article-link.featured { border-color: rgba(210,162,74,.45); background: linear-gradient(180deg,#221B17,#1E1916); }

footer { padding: 28px 20px 42px; border-top: 1px solid var(--border); color: var(--meta); text-align: center; font: 12.5px/1.5 Inter,system-ui,sans-serif; }

@media (max-width: 700px) {
  body { font-size: 18px; }
  .nav .hide-mobile { display: none; }
  .quick-answer { font-size: 21px; }
  .decision-branches, .article-list, .pillar-head { grid-template-columns: 1fr; }
  .action-card { grid-template-columns: 1fr; }
  .action-card .btn { width: 100%; text-align: center; }
  .related-grid { grid-template-columns: 1fr; }
  .example-record dl { grid-template-columns: 1fr; }
  .trace-nodes { display: block; margin-left: 8px; padding-left: 16px; border-left: 2px solid var(--border-light); }
  .trace-node { min-height: 0; padding: 0 0 13px; border: 0; background: transparent; }
  .trace-node.saved { background: transparent; }
  .trace-node::before { content: ''; position: absolute; left: -22px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--meta); }
  .trace-node.saved::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(210,162,74,.22); }
  .trace-node:not(:last-child)::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}