/* ===========================================================================
   Eigen-Rho — shared styling for prose / trust pages
   (privacy, terms, security, candidate-fairness). Tokens come from brand.css;
   this file only adds the reading layout. Body text capped at ~68ch for
   readability, ink-on-paper at WCAG AA.
   =========================================================================== */

.lp-body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- header ---- */
.lp-head {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(238,240,242,.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.lp-head-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.lp-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; background: var(--ink);
  color: var(--paper); font-family: Georgia, 'Times New Roman', serif; font-weight: 600; font-size: 16px;
}
.lp-brand-mark .rho { color: #7fb0e0; font-style: italic; margin-left: 1px; }
.lp-brand-word { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em; }
.lp-head nav { display: flex; gap: 22px; align-items: center; }
.lp-head nav a { color: var(--muted); font-size: .9rem; font-weight: 500; text-decoration: none; transition: color .16s ease; }
.lp-head nav a:hover { color: var(--ink); }
.lp-head nav a.lp-home { color: var(--accent-ink); }
@media (max-width: 640px) { .lp-head nav a:not(.lp-home) { display: none; } }

/* ---- prose ---- */
.lp-main { max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) 24px clamp(56px, 8vw, 96px); }
.lp-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 14px;
}
.lp-main h1 {
  font-family: 'Playfair Display', serif; font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 14px; text-wrap: balance;
}
.lp-lede { font-size: 1.12rem; color: var(--muted); line-height: 1.6; margin: 0 0 10px; }
.lp-updated {
  font-family: 'IBM Plex Mono', monospace; font-size: .76rem; color: var(--muted);
  margin: 0 0 36px; padding-bottom: 28px; border-bottom: 1px solid var(--border);
}
.lp-main h2 {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.2; letter-spacing: -.01em;
  margin: 44px 0 12px; text-wrap: balance;
}
.lp-main h3 { font-size: 1.05rem; font-weight: 700; margin: 26px 0 6px; color: var(--ink); }
.lp-main p { margin: 0 0 16px; }
.lp-main ul, .lp-main ol { margin: 0 0 16px; padding-left: 22px; }
.lp-main li { margin: 0 0 8px; }
.lp-main a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.lp-main strong { font-weight: 700; }

/* callout — a full-bordered note box (no side-stripe) */
.lp-note {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; margin: 22px 0; font-size: .96rem;
}
.lp-note strong { color: var(--accent-ink); }

/* a two-column "what we do / don't" table feel without a heavy table */
.lp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.lp-pair > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.lp-pair h3 { margin-top: 0; }
.lp-pair--yes h3 { color: var(--green-ink); }
.lp-pair--no h3 { color: var(--suspect-ink); }
@media (max-width: 560px) { .lp-pair { grid-template-columns: 1fr; } }

/* contents nav at top of long pages */
.lp-toc { background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin: 0 0 36px; }
.lp-toc p { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.lp-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.lp-toc li { margin: 0 0 6px; }
@media (max-width: 560px) { .lp-toc ul { columns: 1; } }

/* ---- footer ---- */
.lp-foot {
  border-top: 1px solid var(--border); background: var(--cream);
  font-size: .86rem; color: var(--muted);
}
.lp-foot-inner {
  max-width: 1080px; margin: 0 auto; padding: 32px 24px;
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between;
}
.lp-foot a { color: var(--muted); text-decoration: none; }
.lp-foot a:hover { color: var(--ink); }
.lp-foot nav { display: flex; flex-wrap: wrap; gap: 16px; }