/* 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;
  --head: var(--ink);
  /* ONE type scale for every venture landing (DD 2 Oct 2026): same sizes, same rhythm, whatever the typeface.
     Only --font changes, per venture GROUP (below); size-adjust on each @font-face brings every typeface to the
     same x-height (0.50 em), so 17px reads as 17px in all of them. */
  --font: Georgia, 'Times New Roman', serif;
  --utility: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-body: 17px;
  --lh-body: 1.65;
  --fs-h1: 1.9rem;
  --fs-h1-small: 1.6rem;
  --fs-label: 0.8rem;
  --fs-meta: 0.85rem;
  --fs-cta: 0.95rem;
}
@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 F2 accents. The ONLY per-product variable (Decision 3.3). Light value, then dark.
   Slate to olive: the first seven. */
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; }
              }

/* The twelve venture tones (fnp-ops-baaqf.21): LIGHT ONLY, never black. One class per venture sets the whole
   colour identity — tinted paper, deep ink, heading, rule, accent — and the accent stays the one per-product
   variable of Decision 3.3 (frozen at go-live). Each tone is the palette of what the venture is; the proposal
   sheet docs/kompass/phase-a/batch-c-preview.html says why. They hold in either system theme: each sets every
   variable on body, which outranks the :root dark block. ai3.studio's emerald recalls app.ai3.studio (read from
   the live app 2 Oct 2026: emerald #059669 / #00bc7d, steel blue #2a6a94, orange #e07020, cream #f0ece6).
   APCA-checked by venture-landing-build.py --check. */
body.accent-terracotta { --paper: #faecea; --paper-tint: #f2d7d4; --rule: #daaea9; --ink: #2a110e; --ink-muted: #5b332f; --head: #6b180f; --accent: #af2b1d; --accent-ink: #faecea; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* Mercatalia — the clay and awnings of a Mediterranean market */
body.accent-copper { --paper: #faf1ea; --paper-tint: #f2e0d4; --rule: #dabda9; --ink: #2a190e; --ink-muted: #5b402f; --head: #6b340f; --accent: #9e4f1a; --accent-ink: #faf1ea; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* Forge DAO — governance forged in copper */
body.accent-harvest { --paper: #fafaea; --paper-tint: #f2f1d4; --rule: #dad9a9; --ink: #2a290e; --ink-muted: #5b592f; --head: #6b680f; --accent: #767313; --accent-ink: #fafaea; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* K2Yield — the yield of a harvest */
body.accent-lime { --paper: #f2faea; --paper-tint: #e2f2d4; --rule: #c0daa9; --ink: #1b2a0e; --ink-muted: #435b2f; --head: #3a6b0f; --accent: #447b14; --accent-ink: #f2faea; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* Evidalent — a fresh, verified tick */
body.accent-forest { --paper: #eafaec; --paper-tint: #d4f2d8; --rule: #a9dab0; --ink: #0e2a12; --ink-muted: #2f5b35; --head: #0f6b1c; --accent: #147b22; --accent-ink: #eafaec; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* GrantBazaar — funds that grow */
body.accent-turquoise { --paper: #eaf9fa; --paper-tint: #d4f0f2; --rule: #a9d7da; --ink: #0e282a; --ink-muted: #2f585b; --head: #0f656b; --accent: #14747b; --accent-ink: #eaf9fa; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* Samarcanda — the turquoise domes of the Silk Road */
body.accent-azure { --paper: #eaf2fa; --paper-tint: #d4e2f2; --rule: #a9c0da; --ink: #0e1b2a; --ink-muted: #2f435b; --head: #0f3a6b; --accent: #1d64b4; --accent-ink: #eaf2fa; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* TalkProof — conversation blue */
body.accent-dusk { --paper: #edeafa; --paper-tint: #d9d4f2; --rule: #b1a9da; --ink: #130e2a; --ink-muted: #362f5b; --head: #1f0f6b; --accent: #4a2cdd; --accent-ink: #edeafa; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* Stokatsu — time-series dusk */
body.accent-violet { --paper: #f4eafa; --paper-tint: #e7d4f2; --rule: #c8a9da; --ink: #200e2a; --ink-muted: #4b2f5b; --head: #490f6b; --accent: #8920c5; --accent-ink: #f4eafa; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* Amarchord — a warm, social violet */
body.accent-orchid { --paper: #faeaf7; --paper-tint: #f2d4ec; --rule: #daa9d0; --ink: #2a0e24; --ink-muted: #5b2f52; --head: #6b0f59; --accent: #a71b8b; --accent-ink: #faeaf7; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* Wollcraft — dyed wool */
body.accent-curtain { --paper: #faeaee; --paper-tint: #f2d4db; --rule: #daa9b5; --ink: #2a0e15; --ink-muted: #5b2f39; --head: #6b0f25; --accent: #af1d3f; --accent-ink: #faeaee; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* Ribalta — the footlights' curtain */
body.accent-emerald { --paper: #f7f2e8; --paper-tint: #ece4d3; --rule: #d9cfb8; --ink: #17130e; --ink-muted: #4d4639; --head: #065f46; --accent: #05694b; --accent-ink: #f7f2e8; --state-green: #1b7a43; --state-amber: #8a5a00; --state-grey: #5b6068; }  /* ai3.studio — the emerald of app.ai3.studio on warm cream */

body.accent-terracotta,
body.accent-copper,
body.accent-harvest,
body.accent-lime,
body.accent-forest,
body.accent-turquoise,
body.accent-azure,
body.accent-dusk,
body.accent-violet,
body.accent-orchid,
body.accent-curtain,
body.accent-emerald { border-top: 14px solid var(--accent); }
/* ai3.studio carries the app's three colours in its band: emerald, steel blue, orange */
body.accent-emerald { border-top: 14px solid; border-image: linear-gradient(90deg, #059669 0 60%, #2a6a94 60% 82%, #e07020 82% 100%) 1; }

/* The eight typefaces, one per venture GROUP (FACTS.yaml → ventures → groups; DD 2 Oct 2026). Self-hosted Latin
   woff2, regular weight, cut by scripts/landing-fonts.py from open fonts (SIL OFL 1.1: Source Serif 4, Inter,
   Fira Sans, Barlow, Crimson Pro, Noto Serif; Apache 2.0: Roboto Slab, Open Sans; the licence stays in each file).
   size-adjust brings every one to an x-height of 0.50 em. A landing loads only its own group's file. */
@font-face { font-family: 'Source Serif 4'; src: url(fonts/source-serif-4.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 105.3%; }
@font-face { font-family: 'Inter'; src: url(fonts/inter.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 91.6%; }
@font-face { font-family: 'Roboto Slab'; src: url(fonts/roboto-slab.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 94.6%; }
@font-face { font-family: 'Fira Sans'; src: url(fonts/fira-sans.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 94.9%; }
@font-face { font-family: 'Barlow'; src: url(fonts/barlow.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 98.8%; }
@font-face { font-family: 'Open Sans'; src: url(fonts/open-sans.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 93.4%; }
@font-face { font-family: 'Crimson Pro'; src: url(fonts/crimson-pro.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 119.1%; }
@font-face { font-family: 'Noto Serif'; src: url(fonts/noto-serif.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 93.3%; }

/* Group -> typeface. The same for every venture of a group, a different one for every other group. */
body.group-a { --font: 'Source Serif 4', Georgia, 'Times New Roman', serif; }  /* Assessment — evidence-grade reading: an editorial serif */
body.group-b { --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }  /* Temporal intelligence — precise and analytical: a neutral grotesque built for screens and figures */
body.group-c { --font: 'Roboto Slab', Rockwell, Georgia, serif; }  /* Infrastructure and application — sturdy and engineered: a slab, like market and station signage */
body.group-d { --font: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }  /* Assurance — exact and technical: a humanist sans drawn for clarity */
body.group-e { --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; }  /* Competitions — scoreboard and signage: a sporty, slightly condensed grotesque */
body.group-f { --font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }  /* Assistive interaction — friendly and open: a humanist sans tuned for legibility */
body.group-g { --font: 'Crimson Pro', Georgia, 'Times New Roman', serif; }  /* Treasury — sober and financial: a classic old-style text serif */
body.group-foundation { --font: 'Noto Serif', Georgia, 'Times New Roman', serif; }  /* Foundation projects (Forge DAO, no group of its own) — institutional: a broad, even serif */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-body)/var(--lh-body) var(--font);
  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: var(--utility);
  font-size: var(--fs-meta); 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: var(--fs-h1); line-height: 1.3; font-weight: normal; margin: 0 0 1.25rem; text-wrap: balance; color: var(--head); }
.lede { color: var(--ink-muted); margin: 0 0 3rem; }

section { border-top: 1px solid var(--rule); padding: 1.75rem 0; }
h2 {
  font-family: var(--utility);
  font-size: var(--fs-label); 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: var(--utility); font-size: var(--fs-meta);
  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: var(--utility); font-size: var(--fs-cta); 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: var(--utility); font-size: var(--fs-meta); 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: var(--fs-h1-small); }
}