/* ==========================================================================
   Knowledgebooks.ai — Reading pages (blog + legal)
   Reuses tokens.css. Reading-page rules per docs/DESIGN_SYSTEM.md: the book
   metaphor — Lora for the reading body, DM Sans for chrome and meta, generous
   measure and line-height. No motion on posts 2/3 or the legal pages; post 1
   carries the one shared, persisted countdown (via js/main.js).
   ========================================================================== */

/* ---------- Reading nav (shared with the home nav grammar) ---------- */
.read-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hairline) var(--ease);
}
.read-nav.scrolled { border-bottom-color: var(--line); }
.read-nav-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- Article ---------- */
.post {
  max-width: 680px;
  margin: 0 auto;
  padding: 88px var(--space-3) 96px;
}
.post-eyebrow {
  font-size: var(--size-mono-meta);
  color: var(--amber-ink);
  background: var(--amber-tint);
  border-radius: 6px;
  padding: 2px 8px;
  display: inline-block;
}
.post h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 22px;
}
.post-dek {
  font-family: var(--font-sans);
  font-size: var(--size-subhead-body);
  color: var(--muted);
  margin-top: 16px;
}
.post-byline {
  font-size: var(--size-caption);
  color: var(--muted);
  margin-top: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.post-body { margin-top: 40px; }
.post-body p {
  font-family: var(--font-serif);
  font-size: var(--size-subhead-body);
  line-height: 1.8;
  color: var(--ink);
  margin-top: 26px;
}
.post-body p:first-child { margin-top: 0; }
.post-body h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--size-submoment);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 52px;
}

/* Pull-quote — the one decorated quote across all posts (post 3, Brandeis). */
.post-pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 27px;
  line-height: 1.4;
  color: var(--ink);
  margin: 48px 0;
  padding-left: 24px;
  border-left: 3px solid var(--gold);
}

/* The shared countdown pill — post 1 only. */
.post-timer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--card-white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 1px 2px rgba(7, 25, 9, 0.05);
  margin: 34px 0 8px;
}
/* Same rule as the landing page's .timer-label: this label is one unit. Left
   to wrap it breaks at its own hyphen into "auto- / deletes in". */
.post-timer-label { font-family: var(--font-sans); font-size: var(--size-caption); color: var(--muted); white-space: nowrap; }
.post-timer .timer-clock {
  font-size: 22px;
  font-weight: 600;
  color: var(--amber-ink);
  background: var(--amber-tint);
  border-radius: 20px;
  padding: 2px 10px;
}

/* Marked-answer excerpt — post 1, after "here's what that feels like". */
.post-answer {
  background: var(--card-white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-paper);
  padding: 26px 28px;
  margin: 34px 0;
}
.post-answer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--mid-sans-2);
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--muted);
  margin-bottom: 16px;
}
.post-answer-orb { width: 8px; height: 8px; border-radius: 50%; background: var(--lavender); }
.post-answer p { font-family: var(--font-serif); font-size: var(--mid-serif-4); line-height: 1.6; margin: 0; }
.post-answer .recall { padding: 0 2px 1px; }
.post-answer .recall-kb { border-bottom: 1.5px solid var(--lavender); }
.post-answer .recall-chat { border-bottom: 1.5px solid rgba(7, 25, 9, 0.24); }

/* Endcap — post 3 closes with the chorus-breath whitespace of the home page. */
.post-endcap {
  text-align: center;
  padding: var(--chorus-breath) var(--space-3);
}
.post-endcap p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-submoment);
  color: var(--ink);
  margin: 0;
}

/* "Originally published on X" note at the end of a post. */
.post-body .post-x-link {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  line-height: 1.6;
  color: var(--muted);
}
.post-body .post-x-link a { color: var(--forest); text-decoration: underline dotted; text-underline-offset: 3px; }

/* Back link + next-post link */
.post-nav-links {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--space-3) 80px;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--size-caption);
}
.post-nav-links a { color: var(--forest); text-decoration: underline dotted; text-underline-offset: 4px; }

/* ---------- Legal pages ---------- */
.legal { max-width: 680px; margin: 0 auto; padding: 88px var(--space-3) 96px; }
.legal h1 { font-family: var(--font-serif); font-weight: 500; font-size: 40px; letter-spacing: -0.01em; }
.legal .updated { font-family: var(--font-sans); font-size: var(--size-caption); color: var(--muted); margin-top: 10px; }
.legal h2 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; margin-top: 44px; }
.legal p { font-family: var(--font-sans); font-size: var(--size-ui); line-height: 1.75; color: var(--ink); margin-top: 16px; }
.legal a { color: var(--forest); }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-top: var(--space-6); }
.notfound-code { font-size: var(--size-mono-meta); color: var(--muted); letter-spacing: 0.13em; }
.notfound h1 { margin-top: var(--space-2); }
.notfound-line { font-family: var(--font-serif); font-size: var(--size-subhead-body); color: var(--ink); margin-top: var(--space-2); }
.notfound-line--quiet { color: var(--muted); }
.notfound-actions {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- Shared footer ---------- */
.read-footer {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  text-align: center;
}
.read-footer a { color: var(--muted); }

@media (max-width: 640px) {
  .post h1 { font-size: 32px; }
  /* The timer row is label + digits + "· default window" on one nowrap line,
     which doesn't fit a phone. Let it wrap so the suffix drops whole, and
     scale the digits like the landing page's countdowns. */
  .post-timer { flex-wrap: wrap; }
  .post-timer .timer-clock { font-size: var(--size-clock-phone); }
}