/* ──────────────────────────────────────────────────────────────
   The K.E.E.P. — Landing site shared base
   Mirrors the app's dark-theme design tokens so the sidebar
   brand (logo + subtitle) renders identically on cavekeep.com
   and app.cavekeep.com. One source of truth for the 10 landing
   pages — edit this file, not each page.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces & text — mirrors frontend/src/styles.css [data-theme="dark"] ── */
  --paper:        #0f172a;  /* slate-900 — sidebar background */
  --paper-2:      #1e293b;  /* slate-800 — cards */
  --paper-3:      #273548;  /* hover */
  --paper-deep:   #0a0f1c;  /* page body deep background */

  --ink:          #f1f5f9;  /* slate-100 — primary text (logo) */
  --ink-2:        #cbd5e1;  /* slate-300 — secondary */
  --ink-3:        #b8c5d3;  /* captions (subtitle) */
  --ink-4:        #64748b;  /* slate-500 — muted */

  --rule:         #334155;  /* border */
  --rule-strong:  #475569;

  --oxide:        #f87171;  /* red — destructive / active in app */
  --indigo:       #60a5fa;  /* blue — accent */

  /* ── Typography ── */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font:         'Manrope', system-ui, sans-serif;
  --mono:         'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* ── Back-compat aliases for existing landing page inline styles ── */
  --bg:       var(--paper-deep);
  --bg-card:  var(--paper-2);
  --bg-hover: var(--paper-3);
  --border:   var(--rule);
  --text:     var(--ink);
  --text-2:   var(--ink-2);
  --text-3:   var(--ink-3);
  --text-4:   var(--ink-4);
  --accent:   var(--indigo);
  --accent-2: var(--indigo);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ──────────────────────────────────────────────────────────────
   Sidebar brand — must match app's .sidebar-logo / .sidebar-logo-sub
   exactly. If these ever drift, edit here (and the app's styles.css
   equivalents) — not in a single HTML page.
   ────────────────────────────────────────────────────────────── */
.sidebar-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 0 20px 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-logo-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}

/* ──────────────────────────────────────────────────────────────
   Landing layout + sidebar navigation
   ────────────────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar-left {
  width: 184px;
  flex-shrink: 0;
  background: var(--paper);
  border-right: 1px solid var(--border);
  padding: 16px 0 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-section { margin-bottom: 8px; }

.sidebar-heading {
  padding: 6px 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-top: 4px;
  font-family: var(--mono);
}

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 16px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 26px;
  font-size: 13px;
  color: var(--text-3);
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}

.sidebar-link:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.sidebar-link.active,
.sidebar-link[aria-current="page"] {
  color: var(--text);
  border-left-color: var(--accent);
  background: rgba(96, 165, 250, .08);
  font-weight: 500;
}

.sidebar-link .icon {
  color: var(--text-4);
  display: flex;
  flex-shrink: 0;
}

/* Sidebar CTA block (Request access / Log in) */
.sidebar-cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.sidebar-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
}

.sidebar-cta .primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

.sidebar-cta .primary:hover { background: #3b82f6; border-color: #3b82f6; }

.sidebar-cta .outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
}

.sidebar-cta .outline:hover {
  border-color: var(--text-4);
  background: var(--bg-hover);
  color: var(--text);
}

/* ──────────────────────────────────────────────────────────────
   Shared utility classes — replace common inline style="..."
   attributes that the cavekeep.com CSP (no 'unsafe-inline' in
   style-src, no style-src-attr) would otherwise block.
   ────────────────────────────────────────────────────────────── */
.brand-link { display: block; color: inherit; text-decoration: none; }
.no-shrink { flex-shrink: 0; }
.muted { color: var(--text-4); }
.muted-mono { color: var(--text-4); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.tag-fictional {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  color: var(--text-4); vertical-align: middle;
}
.tag-withheld {
  color: var(--text-4); font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; margin-left: 4px;
}
.section-lede {
  font-size: 13.5px; color: var(--text-3); line-height: 1.7;
  margin-bottom: 20px; max-width: 56ch;
}
.form-submit-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.form-status { font-size: 13px; color: var(--text-3); }
.form-status.ok { color: var(--accent-2); }
.form-status.err { color: #f87171; }

@media (max-width: 800px) {
  .sidebar-left { display: none; }
  /* Tighten content padding so pages don't read as a wall of text on phones */
  main { padding: 18px 16px 36px !important; }
  .section-lede { font-size: 14px; }
}