/* The one stylesheet for emm.venka.com (frontend standards: one CSS file,
   no browser dependencies, no JS). Structure follows qm.venka.com; the
   palette keeps EMM's rose accent rather than QM's violet. */

:root {
  color-scheme: dark;
  --bg: #1a1014;
  --fg: #f2e7ea;
  --muted: #ab929c;
  --accent: #fb7185;
  --accent-ink: #200a10;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
}

main {
  max-width: 34rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* Vector mark: scales crisply, so size it in CSS. The SVG carries its own
   22% corner radius (so the favicon is rounded too); the CSS radius matches
   it rather than fighting it. */
.mark {
  width: min(192px, 45vw);
  height: auto;
  border-radius: 22%;
}

h1 {
  margin: 0.75rem 0 0;
  font-size: 3rem;
  letter-spacing: 0.02em;
}

.tagline {
  margin: 0.25rem 0 2rem;
  font-size: 1.25rem;
  color: var(--accent);
  text-wrap: balance;
}

.pitch {
  margin: 0 0 1rem;
  color: var(--muted);
  text-wrap: pretty;
}

.pitch em { color: var(--fg); }

.pitch a {
  color: var(--accent);
  text-decoration: none;
}

.pitch a:hover { text-decoration: underline; }

.download {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.8rem 1.6rem;
  border-radius: 0.6rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}

.download:hover { filter: brightness(1.1); }

/* No build to download yet. The button slot stays, dimmed, so the page says
   what is coming without pretending it is here. */
.download.soon {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: color-mix(in oklab, var(--accent) 75%, var(--muted));
  cursor: default;
}

.download.soon:hover { filter: none; }

.fineprint {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.fineprint a {
  color: var(--accent);
  text-decoration: none;
}

.fineprint a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Document pages (/roadmap). The landing page centres a single narrow column;
   these are left-aligned documents, so they opt out of that layout rather
   than fighting it. Everything here is plain CSS — no JS anywhere.
   --------------------------------------------------------------------------- */

body.doc {
  display: block;
  place-items: initial;
  padding: 0 1.5rem 4rem;
}

.doc main,
.doc-head {
  max-width: 52rem;
  margin-inline: auto;
  text-align: left;
}

.doc-head { padding-top: 3rem; }

.home {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.home img { border-radius: 22%; }
.home:hover { color: var(--fg); }

.doc h1 {
  margin: 1.5rem 0 0;
  font-size: 2.5rem;
  letter-spacing: 0.02em;
}

.doc .tagline {
  margin: 0.25rem 0 2.5rem;
  font-size: 1.15rem;
  text-wrap: pretty;
}

.card {
  margin-bottom: 2rem;
  padding: 1.75rem;
  border: 1px solid color-mix(in oklab, var(--muted) 30%, transparent);
  border-radius: 0.9rem;
  background: color-mix(in oklab, var(--fg) 3%, transparent);
}

.card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
}

.lede {
  margin: 0 0 1.5rem;
  color: var(--muted);
  text-wrap: pretty;
}

.card .lede:last-child { margin-bottom: 0; }

.lede strong { color: var(--fg); }

code {
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  font-size: 0.9em;
}

/* /roadmap. One line per item and nothing else: the whole page is meant to be
   read in a glance. The markup is an <ol> because the order is part of what
   the page says. */

.roadmap {
  margin: 0;
  padding: 0;
  list-style: none;
}

.roadmap > li {
  margin-bottom: 0.6rem;
  padding-left: 0.9rem;
  border-left: 2px solid color-mix(in oklab, var(--accent) 55%, transparent);
}

.roadmap > li:last-child { margin-bottom: 0; }

.back { margin-top: 2rem; }
.back a { color: var(--accent); text-decoration: none; }
.back a:hover { text-decoration: underline; }