/* ─────────────────────────────────────────────────────────────────────────────
   saptarang.net — Saptarang Ventures (OPC) Private Limited
   © Manish Jagdish Thatte

   Hand-written CSS. No framework, no build step, no external request — not even
   a webfont. Every page is a static asset served by Cloudflare, so the whole
   render is one HTML file plus this sheet.

   THE IDENTITY, and why it is what it is:
   "Saptarang" is seven colours. The company is a prism — one entity, white
   light in, a spectrum of ventures out. So the spectrum belongs to the PARENT
   and appears only as its signature: the prism mark, the seven-band rule, the
   dividers. Each venture keeps its OWN brand colour, declared per-card, because
   those colours are real and live on the venture's own site. Never recolour a
   venture to fit the rainbow; four of the seven bands are lit and three are
   not, which is the true state of the portfolio and a better story than a
   tidied-up one.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Tokens ────────────────────────────────────────────────────────────────
   Light is defined on bare :root so a page always has a complete palette;
   dark only REDEFINES. Nothing gets its sole definition inside a media query. */
:root {
  /* The seven. Chosen for even hue spacing AND for contrast: each one is dark
     enough to sit on paper as text, which a naive #FFFF00 yellow is not. */
  --s1: #C8324C;  /* crimson */
  --s2: #DD6A24;  /* amber   */
  --s3: #C99209;  /* gold    */
  --s4: #2E9459;  /* emerald */
  --s5: #1E7FB8;  /* azure   */
  --s6: #3B4C9E;  /* indigo  */
  --s7: #7A4C99;  /* violet  */

  /* Ground and ink. Warm, not clinical — the ventures are warm brands and the
     parent should not read as a different company from its own children. */
  --paper:    #FBF9F5;
  --paper-2:  #F4F1EA;
  --card:     #FFFFFF;
  --ink:      #1A1714;
  --ink-2:    #4A4238;
  --ink-3:    #756B5E;
  --rule:     #E3DDD1;
  --rule-2:   #D2C9B8;

  --accent:   var(--s6);        /* the corporate voice: indigo, not a rainbow */
  --accent-ink: #2C3A7A;

  --shadow:   0 1px 2px rgba(26,23,20,.05), 0 8px 24px -12px rgba(26,23,20,.18);
  --shadow-lg:0 2px 4px rgba(26,23,20,.06), 0 24px 48px -20px rgba(26,23,20,.28);

  --measure: 68ch;
  --wide: 1120px;
  --radius: 14px;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* The seven, lifted. The light-mode values are tuned to be legible ON
       paper; unchanged on near-black several of them go muddy, so each is
       raised in lightness rather than swapped for a different hue. */
    --s1: #F0687F; --s2: #F2934A; --s3: #E2B63C; --s4: #4FC183;
    --s5: #4FAEE2; --s6: #7C8EE0; --s7: #B084D1;

    --paper:   #100E0C;
    --paper-2: #1A1714;
    --card:    #1C1916;
    --ink:     #F2EEE7;
    --ink-2:   #C6BDB0;
    --ink-3:   #948A7C;
    --rule:    #2E2924;
    --rule-2:  #423B33;

    --accent:  var(--s6);
    --accent-ink: #9AA9EA;

    --shadow:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
  }
}

/* Explicit choice wins in BOTH directions, which is why dark is repeated here
   rather than only living in the media query above. */
:root[data-theme="dark"] {
  --s1: #F0687F; --s2: #F2934A; --s3: #E2B63C; --s4: #4FC183;
  --s5: #4FAEE2; --s6: #7C8EE0; --s7: #B084D1;
  --paper: #100E0C; --paper-2: #1A1714; --card: #1C1916;
  --ink: #F2EEE7; --ink-2: #C6BDB0; --ink-3: #948A7C;
  --rule: #2E2924; --rule-2: #423B33;
  --accent: var(--s6); --accent-ink: #9AA9EA;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3rem); }
/* A page's title block. No bottom padding: the section that follows supplies
   its own top padding, and two stacked paddings put ~180px of nothing between a
   heading and the thing it heads.

   Match the CONTAINER to the body below it — .narrow head over .narrow prose,
   .wrap over .wrap. Mixing them left every h1 on the legal pages 180px to the
   left of its own text. */
.page-head { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }

/* ── Type ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.15em; max-width: var(--measure); }
.lede { font-size: clamp(1.08rem, 2.1vw, 1.3rem); color: var(--ink-2); line-height: 1.6; }

.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 .9rem; display: block;
}

.muted { color: var(--ink-3); }
.small { font-size: .875rem; }

/* The seven-band rule. The parent's signature — used under a section heading,
   never inside a venture card. */
.spectrum-rule {
  display: flex; gap: 3px; width: 152px; height: 5px;
  margin: 0 0 1.6rem; border-radius: 2px; overflow: hidden;
}
.spectrum-rule i { flex: 1; border-radius: 2px; }
.spectrum-rule i:nth-child(1) { background: var(--s1); }
.spectrum-rule i:nth-child(2) { background: var(--s2); }
.spectrum-rule i:nth-child(3) { background: var(--s3); }
.spectrum-rule i:nth-child(4) { background: var(--s4); }
.spectrum-rule i:nth-child(5) { background: var(--s5); }
.spectrum-rule i:nth-child(6) { background: var(--s6); }
.spectrum-rule i:nth-child(7) { background: var(--s7); }
.spectrum-rule.center { margin-inline: auto; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
nav.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  width: min(100% - 2.5rem, var(--wide)); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px;
}
.nav-logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.nav-logo svg { display: block; }
.nav-links { list-style: none; display: flex; gap: .35rem; margin: 0 0 0 auto; padding: 0; align-items: center; }
.nav-links a {
  display: block; padding: .45rem .7rem; border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.nav-links a:hover { background: var(--paper-2); color: var(--ink); }
.nav-links a.active { color: var(--ink); font-weight: 650; }
.nav-links a.nav-cta {
  background: var(--ink); color: var(--paper); font-weight: 600;
  padding-inline: 1rem; margin-left: .4rem;
}
.nav-links a.nav-cta:hover { background: var(--accent-ink); color: #fff; }

.nav-hamburger {
  display: none; margin-left: auto; background: none; border: 1px solid var(--rule-2);
  border-radius: 9px; width: 42px; height: 38px; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0;
}
.nav-hamburger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-mobile { display: none; flex-direction: column; padding: .5rem 1.25rem 1.1rem; border-top: 1px solid var(--rule); }
.nav-mobile a { padding: .6rem .2rem; text-decoration: none; color: var(--ink-2); font-weight: 500; border-bottom: 1px solid var(--rule); }
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile.open { display: flex; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); position: relative; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: .35em; }
.hero h1 .spectrum-word {
  background: linear-gradient(100deg, var(--s1), var(--s2) 18%, var(--s3) 33%,
              var(--s4) 50%, var(--s5) 66%, var(--s6) 82%, var(--s7));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 10px; font-weight: 600; font-size: .95rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent-ink); color: #fff; }
.btn-ghost { border-color: var(--rule-2); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ── The prism ─────────────────────────────────────────────────────────────
   SVG + CSS only — no library, per the standing rule for these sites.

   NOTE THE ORDER, because the obvious way round is a trap. The tempting version
   sets opacity:0 on the rays and animates them up, then restores them inside
   `@media (prefers-reduced-motion: reduce)`. That is backwards: the hidden state
   becomes the DEFAULT, so anything that does not run the animation — reduced
   motion honoured a different way, a headless renderer taking a screenshot, an
   engine that skipped the keyframes — shows an empty box where the company's
   entire visual identity should be. It was caught here exactly that way, by a
   screenshot with a blank hero.

   So: the finished diagram is the default, and the animation is applied only
   under `no-preference`, where something is definitely going to run it. */
.prism { width: 100%; max-width: 480px; margin-inline: auto; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .prism .beam-in {
    stroke-dasharray: 200; stroke-dashoffset: 200;
    animation: beam 1.1s ease-out .15s forwards;
  }
  .prism .ray {
    opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300;
    animation: ray 1.5s cubic-bezier(.22,.8,.3,1) forwards;
  }
  .prism .ray:nth-of-type(1) { animation-delay: .85s; }
  .prism .ray:nth-of-type(2) { animation-delay: .95s; }
  .prism .ray:nth-of-type(3) { animation-delay: 1.05s; }
  .prism .ray:nth-of-type(4) { animation-delay: 1.15s; }
  .prism .ray:nth-of-type(5) { animation-delay: 1.25s; }
  .prism .ray:nth-of-type(6) { animation-delay: 1.35s; }
  .prism .ray:nth-of-type(7) { animation-delay: 1.45s; }
  .prism .glass { opacity: 0; animation: fade .7s ease-out .1s forwards; }
}

@keyframes beam { to { stroke-dashoffset: 0; } }
@keyframes ray  { to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.25rem; }
/* Explicitly two, not auto-fit. There are four venture cards and auto-fit lays
   them out 3 + 1 at this container width, which reads as "one of these is
   different". Two columns give a 2x2. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow);
}

/* A venture card. --brand is set INLINE per card from the venture's real site
   colour; the card never invents one.

   --ink-brand is that same colour AS TEXT. On paper the two are identical, but
   on near-black nanoMani's #DC2626 lands at about 4.0:1 against the card, under
   the 4.5:1 that small text needs — so in dark mode every brand colour is
   lifted 30% toward white. Hue is preserved and the venture is still
   recognisably itself; this is the same treatment the parent's own seven get in
   the dark block at the top of this file, and for the same reason.

   One rule rather than a second inline variable on every card, so a fifth
   venture inherits it without anyone having to remember. The plain `var(--brand)`
   below is the fallback for an engine without color-mix. */
.venture { --ink-brand: var(--brand, var(--accent)); }
.venture {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.venture::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--brand, var(--accent));
}
.venture:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--rule-2); }
@media (prefers-reduced-motion: reduce) { .venture:hover { transform: none; } }

.venture h3 { margin-bottom: .25em; font-size: 1.32rem; }
.venture h3 a { color: var(--ink); text-decoration: none; }
.venture h3 a:hover { color: var(--ink-brand); }
.venture .role {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-brand); margin-bottom: .9rem; display: block;
}
.venture p { font-size: .93rem; color: var(--ink-2); flex: 1; }
.venture .visit {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem;
  font-size: .88rem; font-weight: 600; color: var(--ink-brand);
  text-decoration: none;
}
.venture .visit:hover { text-decoration: underline; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.chips li {
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  padding: .22rem .55rem; border-radius: 999px;
  border: 1px solid var(--rule-2); color: var(--ink-3); background: var(--paper-2);
}

/* The full-detail card on /ventures/.
   The plain .venture card is a flex column, which is right when four of them sit
   side by side. Here there is one card across the whole 1120px container, and a
   single column of prose inside it stops at its 68ch measure and leaves the
   right half of the card empty. So the detail card is a two-column grid: the
   identity on the left, the argument on the right, and the measure does the
   right thing in both. Below 900px it collapses back to one column and the
   source order — name first, then detail — is already correct. */
.venture.detail { padding: 2rem 2.25rem 1.9rem; }
.venture.detail h3 { font-size: 1.7rem; }
.venture.detail .vd-lede { font-size: 1.06rem; color: var(--ink-2); line-height: 1.55; }
.venture.detail .vd-body p { font-size: .96rem; color: var(--ink-2); }
.venture.detail .vd-body p:last-child { margin-bottom: 0; }
.venture.detail .visit { margin-top: .4rem; }

@media (min-width: 900px) {
  .venture.detail {
    display: grid;
    grid-template-columns: minmax(0, .40fr) minmax(0, .60fr);
    column-gap: 3rem;
    align-items: start;
  }
  .venture.detail .vd-head { padding-top: .1rem; }
  /* The chips are the last thing before the link in the left column, so the
     link needs its own separation rather than inheriting the chip margin. */
  .venture.detail .vd-head .chips { margin-bottom: .6rem; }
}

/* An unlit band — the three ventures that do not exist yet. Deliberately drawn
   as a dashed placeholder rather than omitted: the spectrum is the promise and
   an honest gap is better than a rainbow padded out with inventions. */
.venture.unlit {
  border-style: dashed; box-shadow: none; background: transparent;
  color: var(--ink-3);
}
.venture.unlit::before { opacity: .35; }
.venture.unlit h3 { color: var(--ink-3); font-style: italic; }

/* ── Facts / statutory table ───────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.facts > div { background: var(--card); padding: 1.3rem 1.4rem; }
.facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .4rem; }
.facts dd { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.facts dd.mono { font-family: var(--mono); font-size: .95rem; letter-spacing: -.01em; }

table.data { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0 0 1.5rem; }
table.data th, table.data td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data th { width: 34%; font-weight: 600; color: var(--ink-3); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
table.data td { color: var(--ink); }
table.data td.mono { font-family: var(--mono); }
table.data tr:last-child th, table.data tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }

/* ── Callout ───────────────────────────────────────────────────────────── */
.note {
  border-left: 3px solid var(--accent); background: var(--paper-2);
  padding: 1.1rem 1.3rem; border-radius: 0 10px 10px 0; margin: 1.75rem 0;
}
.note p:last-child { margin-bottom: 0; }
.note.warn { border-left-color: var(--s1); }

/* ── Prose (legal pages) ───────────────────────────────────────────────── */
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--ink-3); }

/* ── Form ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .85rem; font-weight: 650; margin-bottom: .35rem; color: var(--ink-2); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule-2); border-radius: 10px;
  padding: .7rem .85rem;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: .8rem; color: var(--ink-3); margin-top: .3rem; }

/* The honeypot. Not display:none — some bots skip hidden inputs but fill
   anything the DOM says is there. Off-screen and aria-hidden keeps it out of
   the accessibility tree while still looking fillable to a naive scraper. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 1rem; padding: .85rem 1rem; border-radius: 10px; font-size: .92rem; display: none; }
.form-status.show { display: block; }
.form-status.ok  { background: color-mix(in srgb, var(--s4) 12%, var(--card)); border: 1px solid var(--s4); color: var(--ink); }
.form-status.err { background: color-mix(in srgb, var(--s1) 12%, var(--card)); border: 1px solid var(--s1); color: var(--ink); }

/* ── Footer ────────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--rule); background: var(--paper-2); padding-block: 3rem 2rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; }
.footer-grid h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .45rem; }
.footer-grid a { color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.footer-grid a:hover { color: var(--ink); text-decoration: underline; }
.footer-about p { font-size: .88rem; color: var(--ink-3); margin-bottom: .8rem; }
.footer-legal {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .8rem; color: var(--ink-3);
}
.footer-legal p { margin: 0; max-width: none; }
.footer-legal .mono { font-family: var(--mono); }

/* ── Utility ───────────────────────────────────────────────────────────── */
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.stack > * + * { margin-top: 1rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ── Logo lockup ───────────────────────────────────────────────────────────
   Mark is inline SVG (inherits currentColor, costs no request); the wordmark is
   real HTML text rather than SVG paths, so it renders in the page's own serif
   and stays selectable, translatable and crisp at any zoom. */
.logo-mark { width: 44px; height: 34px; color: var(--ink); flex: 0 0 auto; }
.nav-logo .wordmark {
  font-family: var(--serif); font-size: 1.18rem; font-weight: 600;
  line-height: 1.05; color: var(--ink); margin-left: .6rem; letter-spacing: -.005em;
}
.nav-logo .wordmark small {
  display: block; font-family: var(--sans); font-size: .58rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  margin-top: .18rem;
}
@media (max-width: 420px) { .nav-logo .wordmark { font-size: 1.02rem; } }

/* ── The portfolio bar ─────────────────────────────────────────────────────
   Seven segments, four lit. Distinct from .spectrum-rule: that one is the
   parent's signature and is always the parent's seven colours, while this one
   is a STATEMENT OF FACT about the portfolio — the lit segments carry the
   ventures' own colours and the three unlit ones are genuinely unlit. If a
   fifth venture launches, light a fifth segment; do not restyle the bar so the
   gap stops showing. */
.portfolio-bar { display: flex; gap: 6px; margin: 0 0 1.5rem; }
.portfolio-bar span {
  height: 10px; border-radius: 5px; flex: 1;
  background: var(--seg, var(--rule-2));
}
.portfolio-bar span.unlit { background: var(--rule); }

/* The dark-mode legibility lift described on .venture above. Applied to the
   TEXT colour only: the 4px bar at the top of each card keeps the venture's
   exact brand colour, because a 4px rule is decoration and has no contrast
   obligation to meet. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .venture {
    --ink-brand: color-mix(in srgb, var(--brand, var(--accent)) 70%, #FFF);
  }
}
:root[data-theme="dark"] .venture {
  --ink-brand: color-mix(in srgb, var(--brand, var(--accent)) 70%, #FFF);
}

/* ── Facts strip ───────────────────────────────────────────────────────── */
.strip { background: var(--paper-2); border-block: 1px solid var(--rule); }
.strip .facts { border: 0; border-radius: 0; background: var(--rule); }

/* ── Definition list used on About / Governance ────────────────────────── */
.deflist { margin: 0; }
.deflist > div { display: grid; grid-template-columns: minmax(160px, 34%) 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: .15rem 0 0; }
.deflist dd { margin: 0; color: var(--ink); }
.deflist dd.mono { font-family: var(--mono); font-size: .95rem; }
@media (max-width: 620px) { .deflist > div { grid-template-columns: 1fr; gap: .25rem; } }