/* LEYLINE public site pages. Same cartographer's night palette as the intel map. */
:root {
  --bg: #0a1017; --panel: #101b26; --line: #22384a;
  --ink: #c9d8e4; --muted: #6e8598;
  --concord: #46d5c8; --emberwake: #f0a24b; --verdant: #8ccb5e; --static: #9a8fc0;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "IBM Plex Mono", monospace; font-size: 15px; line-height: 1.65;
}
.topbar {
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,27,38,.9), rgba(10,16,23,.6));
}
.wordmark {
  font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: .18em; color: var(--ink); text-decoration: none;
}
.wordmark span { color: var(--concord); }
.doc { max-width: 780px; margin: 0 auto; padding: 34px 22px 60px; }
.doc h1 { font-family: "Chakra Petch", sans-serif; letter-spacing: .06em; margin-bottom: 18px; }
.doc h2 { font-family: "Chakra Petch", sans-serif; color: var(--concord);
  margin: 26px 0 10px; font-size: 17px; }
.doc p { margin-bottom: 12px; color: var(--ink); }
.sitefoot { border-top: 1px solid var(--line); padding: 18px 22px; }
.sitefoot a { color: var(--muted); margin-right: 16px; text-decoration: none; }
.sitefoot a:hover { color: var(--concord); }
/* landing */
.hero { max-width: 860px; margin: 0 auto; padding: 70px 22px 30px; text-align: center; }
.hero h1 { font-family: "Chakra Petch", sans-serif; font-size: 44px; letter-spacing: .16em; }
.hero h1 span { color: var(--concord); }
.hero .tag { color: var(--muted); margin: 14px 0 30px; font-size: 16px; }
.factions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 26px 0; }
.faction {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; width: 230px; text-align: left;
}
.faction h3 { font-family: "Chakra Petch", sans-serif; margin-bottom: 6px; }
.faction.concord h3 { color: var(--concord); }
.faction.emberwake h3 { color: var(--emberwake); }
.faction.verdant h3 { color: var(--verdant); }
.faction p { color: var(--muted); font-size: 13px; }
.cta { display: inline-block; margin: 8px; padding: 12px 22px; border-radius: 6px;
  text-decoration: none; font-weight: 600; }
.cta.primary { background: var(--concord); color: var(--bg); }
.cta.ghost { border: 1px solid var(--line); color: var(--ink); }
.staticnote { max-width: 620px; margin: 26px auto 0; color: var(--static); font-size: 13px; }
@media (max-width: 640px) { .hero h1 { font-size: 32px; } }