/* HUMANITY — long-form theory page */
:root {
  --bg: #04060c; --ink: #e9edf5; --ink-2: rgba(233,237,245,.72); --ink-3: rgba(233,237,245,.45);
  --line: rgba(233,237,245,.1); --cyan: #86e6ff; --gold: #f3cd93; --violet: #ab9dff;
  --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.doc-bg { position: fixed; inset: -20%; z-index: 0; pointer-events: none; filter: blur(70px);
  background: radial-gradient(40% 35% at 20% 20%, rgba(30,60,120,.4), transparent 70%), radial-gradient(35% 40% at 80% 70%, rgba(70,40,120,.3), transparent 70%); }
.doc-hud { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(20px, 5vw, 64px); background: rgba(4,6,12,.7); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.doc-hud__back { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); }
.doc-hud__back:hover { color: #fff; }
.doc-hud__brand { font-family: var(--font-display); letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.doc { position: relative; z-index: 1; display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 60px; max-width: 1180px; margin: 0 auto; padding: 60px clamp(20px, 5vw, 64px) 120px; }
.doc__toc { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
.doc__toc-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); margin: 0 0 12px; }
.doc__toc nav { display: flex; flex-direction: column; gap: 2px; }
.doc__toc a { font-family: var(--font-display); font-size: 17px; text-decoration: none; color: var(--ink-2); padding: 5px 0; border-bottom: 1px solid var(--line); transition: color .2s, padding-left .3s; }
.doc__toc a:hover { color: #fff; padding-left: 6px; }
.doc__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); margin: 0 0 12px; }
.doc__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 7vw, 84px); line-height: 1; margin: 0 0 8px; color: #fff; }
.doc__body h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; margin: 64px 0 18px; color: #fff; }
.doc__body h3 { font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1.2; margin: 44px 0 12px; color: #fff; }
.doc__body h4 { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 32px 0 10px; }
.doc__body p { margin: 0 0 16px; color: var(--ink-2); font-size: 16.5px; }
.doc__body strong { color: #fff; font-weight: 500; }
.doc__body em { font-style: italic; color: var(--ink); }
.doc__body code { font-family: var(--font-mono); font-size: .9em; color: var(--cyan); }
.doc__body blockquote { margin: 0 0 24px; padding: 18px 22px; border-left: 2px solid var(--violet); background: rgba(171,157,255,.06); border-radius: 0 12px 12px 0; color: var(--ink-2); font-size: 14.5px; }
.doc__body hr { border: 0; height: 1px; background: var(--line); margin: 56px 0; }
.doc__body ul, .doc__body ol { padding-left: 22px; margin: 0 0 18px; color: var(--ink-2); }
.doc__body li { margin: 0 0 8px; }
.doc__body li::marker { color: var(--gold); font-family: var(--font-mono); font-size: 12px; }
.table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); background: rgba(255,255,255,.03); }
tr:last-child td { border-bottom: 0; }
.dash { color: var(--ink-3); }
.doc__foot { margin-top: 80px; padding-top: 30px; border-top: 1px solid var(--line); }
.doc__btn { display: inline-flex; align-items: center; height: 48px; padding: 0 28px; border-radius: 999px; border: 1px solid rgba(233,237,245,.25); font-family: var(--font-mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: #fff; transition: border-color .3s, box-shadow .3s; }
.doc__btn:hover { border-color: rgba(134,230,255,.7); box-shadow: 0 0 30px rgba(134,230,255,.18); }
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; gap: 30px; } .doc__toc { position: static; max-height: none; } }