/* F2 venture landing — one skeleton, one accent per product (portals-doctrine.md 3.1-3.4).
   Spec: docs/ops/venture-landing-template.md. Every measure below is copied from a live
   page, not reasoned about (feedback_mirror_the_named_reference):
     light theme and grid   <- mercatalia.com (source read 28 Sep 2026)
     dark theme             <- kerubim.tech  (computed styles read 28 Sep 2026)
   Where kerubim.tech measured below the floor (muted text Lc 51.5 on its dark ground) the
   template departs from it and the spec says so.
   Flat selectors on purpose: scripts/check-readability.py resolves tag/class rules only. */

:root {
  --paper: #faf8f4;
  --paper-tint: #f1eee6;
  --ink: #1c1a17;
  --ink-muted: #5c574f;
  --rule: #e4dfd6;
  --state-green: #1b7a43;
  --state-amber: #8a5a00;
  --state-grey: #6b6f76;
  --accent: #2c3e63;
  --accent-ink: #faf8f4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #060b18;
    --paper-tint: #0d1424;
    --ink: #e2e8f0;
    --ink-muted: #c3cddc;
    --rule: #263048;
    --state-green: #4ade80;
    --state-amber: #f5b73b;
    --state-grey: #94a3b8;
    --accent: #a9bfe8;
    --accent-ink: #060b18;
  }
}

/* The seven F2 accents. The ONLY per-product variable (Decision 3.3). Light value, then dark. */
body.accent-slate   { --accent: #2c3e63; }
body.accent-indigo  { --accent: #4338ca; }
body.accent-rust    { --accent: #9a3b1e; }
body.accent-teal    { --accent: #0f6b62; }
body.accent-plum    { --accent: #6f3a86; }
body.accent-rose    { --accent: #a3234f; }
body.accent-olive   { --accent: #586a10; }
@media (prefers-color-scheme: dark) {
  body.accent-slate   { --accent: #a9bfe8; }
  body.accent-indigo  { --accent: #a5b4fc; }
  body.accent-rust    { --accent: #f0a184; }
  body.accent-teal    { --accent: #5fd0c2; }
  body.accent-plum    { --accent: #d3a5ea; }
  body.accent-rose    { --accent: #f4a0bb; }
  body.accent-olive   { --accent: #b9cf5a; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 Georgia, 'Times New Roman', serif;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* grid: one column, 640px measure, 24px gutters — mercatalia.com as measured */
main { max-width: 640px; margin: 0 auto; padding: 4.5rem 1.5rem 3rem; }

/* Utility role: the wordmark, the section labels, the badge, the footer */
.wordmark {
  display: flex; align-items: center; gap: 0.75em;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85rem; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 3rem;
}
.mark { width: 0.85em; height: 0.85em; background: var(--accent); flex: none; }

/* Display role */
h1 { font-size: 1.9rem; line-height: 1.3; font-weight: normal; margin: 0 0 1.25rem; text-wrap: balance; color: var(--ink); }
.lede { color: var(--ink-muted); margin: 0 0 3rem; }

section { border-top: 1px solid var(--rule); padding: 1.75rem 0; }
h2 {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: normal;
  color: var(--ink-muted); margin: 0 0 0.6rem;
}
section p { margin: 0 0 0.75rem; }
section p:last-child { margin-bottom: 0; }

/* Where it stands: the status word is FACTS.yaml verbatim; the dot only reinforces it */
.badge {
  display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 0.75rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.85rem;
  color: var(--ink); background: var(--paper-tint);
  border-left: 4px solid var(--rule); padding: 0.45em 0.8em 0.45em 0.65em;
}
.dot { width: 0.6em; height: 0.6em; border-radius: 50%; flex: none; }
.badge-early { border-left-color: var(--state-grey); }
.badge-early .dot { background: var(--state-grey); }
.badge-building { border-left-color: var(--state-amber); }
.badge-building .dot { background: var(--state-amber); }
.badge-live { border-left-color: var(--state-green); }
.badge-live .dot { background: var(--state-green); }

/* How you get in: the one call to action of the page */
.cta {
  display: inline-block; margin-top: 0.4rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.95rem; font-weight: 600;
  color: var(--accent-ink); background: var(--accent);
  padding: 0.7em 1.3em; text-decoration: none; border-radius: 3px;
}
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a.cta { text-decoration: none; color: var(--accent-ink); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

footer { border-top: 1px solid var(--rule); margin-top: 1.75rem; padding: 1.5rem 0 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--ink-muted); }
footer p { margin: 0 0 0.4rem; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 0.75rem; top: 0.75rem; background: var(--paper); padding: 0.5em 0.9em; z-index: 10; }

@media (max-width: 480px) {
  main { padding-top: 3rem; }
  h1 { font-size: 1.6rem; }
}