/* ═══════════════════════════════════════════════════════════════════
   SIMBIOTREK — "Editorial" (chosen 2026-07-29, D38)

   Design thesis: the reader is an owner who was referred here and is
   deciding whether this firm is senior enough to hand six figures to.
   That impression comes from restraint, not energy. So: near-white
   throughout, an editorial serif for display, hairline rules instead of
   cards, one accent used sparingly, and a lot of air. It should read like
   the point of view of a firm that doesn't need the work.

   Two elements borrowed from the Dossier variant (kept at v-dossier.css
   as the road not taken):
     1. The decision gate is a bordered box, not a soft aside — it's the
        hinge of the commercial model and should look like a hard stop.
     2. The you-bring / we-bring lists are numbered, which reads as
        method rather than as bullets.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ink: #16181a;
  --ink-soft: #3f4448;
  --muted: #6b7176;
  --paper: #fbfaf8;
  --paper-2: #f3f1ec;
  --paper-3: #ebe8e1;
  --deep: #1b2422;
  --accent: #1f6f5c;        /* deep evergreen — quieter than the spring green */
  --accent-soft: #3d9a83;
  --summit: #a8703a;        /* burnt ochre, not amber */
  --rule: #dcd8cf;
  --rule-soft: #e8e5de;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── Type system ─── */
.eyebrow, .section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--muted);
}
.section-eyebrow { margin-bottom: 1.6rem; display: block; }
.section-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1.6rem;
}
.section-headline em { font-style: italic; color: var(--accent); }
.section-rule { display: none; }              /* rules come from layout, not decoration */
.section-lead {
  font-size: 1.22rem; line-height: 1.65;
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 3.5rem;
  font-weight: 300;
}
.section-lead em { font-style: italic; color: var(--ink); }
.hl { color: var(--accent); }
.bio { font-style: italic; }

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 3.5rem;
  background: rgba(251,250,248,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-brand { display: flex; align-items: center; text-decoration: none; }
.nav-logo { height: 34px; width: auto; display: block; }
.nav-links { display: flex; gap: 2.4rem; list-style: none; align-items: center; }
.nav-links a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--muted); transition: color 0.2s; white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta-link { color: var(--accent) !important; border-bottom: 1px solid var(--accent); padding-bottom: 2px !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--ink-soft); }

/* ─── Sections ─── */
section { padding: 9rem 0 8rem; position: relative; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 3.5rem; width: 100%; }

/* ─── COVER ─── */
#cover {
  min-height: 96vh; background: var(--paper);
  display: flex; align-items: center; justify-content: flex-start;
  text-align: left; padding: 12rem 0 7rem; overflow: hidden;
}
.contour { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 1; }
.contour path { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.09; }
.cover-inner {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto; padding: 0 3.5rem; width: 100%;
  display: block;
}
.cover-logo { width: clamp(220px, 26vw, 290px); height: auto; margin-bottom: 4rem; display: block; }
.cover-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.84rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2rem;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule);
  max-width: 40em;
}
.cover-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: 1.06; letter-spacing: -0.02em;
  margin-bottom: 2rem; max-width: 22em;
}
.cover-headline em { font-style: italic; color: var(--accent); }
.cover-sub {
  font-size: 1.25rem; font-weight: 300; line-height: 1.62;
  color: var(--ink-soft); max-width: 33em; margin-bottom: 3rem;
}
.cover-cta {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.80rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding: 1rem 0 0.7rem; border-bottom: 1px solid var(--ink);
  transition: color 0.2s, border-color 0.2s;
}
.cover-cta:hover { color: var(--accent); border-color: var(--accent); }
.cover-scroll { display: none; }

/* ─── THE ASK ─── */
#ask { background: var(--paper); }
.asset-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-bottom: 5rem;
  border-top: 1px solid var(--rule);
}
.asset-card {
  padding: 2.2rem 2rem 2.2rem 0;
  border-right: 1px solid var(--rule-soft);
}
.asset-card:last-child { border-right: none; }
.asset-card:not(:first-child) { padding-left: 2rem; }
/* The asset cards were numbered 01/02/03, which read as a count and collided
   with Direction One/Two/Three further down the page. Numbers removed. */
.asset-card h4 {
  margin-top: 0.4rem;
  font-family: 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: 1.3rem; line-height: 1.25; margin-bottom: 0.7rem; letter-spacing: -0.01em;
}
.asset-card p { font-size: 0.98rem; color: var(--muted); line-height: 1.65; }

.ask-beat { max-width: 36em; }
.ask-beat > p { font-size: 1.1rem; color: var(--ink-soft); line-height: 1.75; font-weight: 300; }
.ask-beat > p em { font-style: italic; color: var(--ink); }
.ask-beat p.ask-question {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.25; letter-spacing: -0.015em;
  color: var(--ink); margin: 2.8rem 0 1.4rem; padding: 0; border: none;
}
.ask-beat p.ask-answer { font-size: 1.1rem; color: var(--muted); line-height: 1.75; padding: 0; font-weight: 300; }

/* ─── WHY IT STAYS BURIED ─── */
#why { background: var(--paper-2); }
.bring-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  margin-bottom: 4.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule);
}
.bring-col { padding: 0; background: none; border: none; }
.bring-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.8rem;
}
.bring-col--us .bring-label { color: var(--accent); }
/* Borrow from Dossier: numbered, so the split reads as method not bullets. */
.bring-col ul { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; counter-reset: bring; }
.bring-col li {
  font-size: 1.06rem; line-height: 1.6; color: var(--ink-soft); font-weight: 300;
  padding-top: 1.4rem; padding-left: 2.6rem; border-top: 1px solid var(--rule-soft);
  position: relative;
}
.bring-col li::before {
  counter-increment: bring;
  content: counter(bring, decimal-leading-zero);
  position: absolute; left: 0; top: 1.55rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.1em; color: var(--accent);
}
.bring-col--you li::before { color: var(--muted); }
.bring-join { display: none; }
.why-close {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.35; letter-spacing: -0.015em;
  max-width: 32em; color: var(--ink);
}

/* ─── THREE DIRECTIONS ─── */
#lenses { background: var(--paper); }
.lens-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 4.5rem; border-top: 1px solid var(--rule); }
.lens {
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 3rem 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start;
}
.lens-head { margin-bottom: 0; grid-column: 1; }
.lens-num {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.lens-head h3 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em;
}
.lens-body { grid-column: 2; font-size: 1.04rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.6rem; font-weight: 300; }
.lens-uses {
  display: block; margin-top: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.lens-proof {
  grid-column: 2; background: none; border-radius: 0;
  padding: 1.5rem 0 0; border-top: 1px solid var(--rule-soft);
  font-size: 0.97rem; color: var(--muted); line-height: 1.7;
}
.lens-proof span {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--summit); margin-bottom: 0.7rem;
}
.lens-caution {
  background: none; color: var(--ink-soft); border-radius: 0;
  padding: 0 0 0 2rem; border-left: 1px solid var(--summit);
  font-size: 1.06rem; line-height: 1.75; max-width: 40em; font-weight: 300;
}
.caution-mark {
  display: block; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-style: italic;
  font-size: 1.45rem; letter-spacing: -0.01em; color: var(--summit); margin-bottom: 0.8rem;
}
.lens-caution .hl { color: var(--ink); font-weight: 400; }

/* ─── HOW WE FIND OUT ─── */
#search { background: var(--deep); color: var(--paper); }
#search .section-headline { color: var(--paper); }
#search .section-headline em { color: var(--accent-soft); }
#search .section-lead { color: rgba(251,250,248,0.72); }
#search .section-eyebrow, #search .eyebrow { color: rgba(251,250,248,0.5); }

.phase-flow { display: flex; flex-direction: column; }
.phase-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 2rem;
  padding-bottom: 1rem; border-bottom: 1px solid rgba(251,250,248,0.14);
}
.trek-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.5rem; }
.trek-track--single { grid-template-columns: 1fr; max-width: 30em; }
.stage { background: none !important; border: none !important; border-radius: 0; padding: 0; }
.stage-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.18em; color: var(--accent-soft); margin-bottom: 1.2rem;
}
.stage h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 1.75rem; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.stage .stage-arc {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(251,250,248,0.45); margin-bottom: 1.4rem;
}
.stage p { font-size: 1rem; color: rgba(251,250,248,0.72); line-height: 1.7; font-weight: 300; }
.stage .owner-tag {
  display: block; margin-top: 1.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-soft); padding: 0; border: none;
}
.stage .deliverable {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(251,250,248,0.14);
  font-size: 0.95rem; color: rgba(251,250,248,0.85);
}
.stage .deliverable span {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 0.70rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(251,250,248,0.42); margin-bottom: 0.35rem;
}

/* Borrow from Dossier: a bordered box, because this is a hard stop in the
   commercial model — not an aside. The one place on the page that gets a
   filled container. */
.gate {
  margin: 4rem 0; padding: 2.2rem 2.4rem;
  border: 1px solid rgba(168,112,58,0.55);
  border-left: 4px solid var(--summit);
  border-radius: 0;
  background: rgba(168,112,58,0.09);
  max-width: 40em;
}
.gate-mark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #d9a06a; margin-bottom: 1rem;
}
.gate p { font-size: 1.15rem; color: rgba(251,250,248,0.82); line-height: 1.7; font-weight: 300; }
.gate strong { color: var(--paper); font-weight: 400; font-family: 'Newsreader', Georgia, serif; font-size: 1.3rem; }

.timeline-note { margin-top: 4.5rem; max-width: 38em; padding: 2rem 0 0; border-left: none; border-top: 1px solid rgba(251,250,248,0.14); }
.timeline-note .eyebrow { display: block; margin-bottom: 1rem; }
.timeline-note p { font-size: 1.02rem; color: rgba(251,250,248,0.7); line-height: 1.75; font-weight: 300; }
.timeline-note strong { color: var(--accent-soft); font-weight: 400; }

/* ─── WHERE WE FIT ─── */
#frame { background: var(--paper); }
.frame-table { margin-bottom: 6rem; border-top: 1px solid var(--rule); }
.frame-row {
  display: grid; grid-template-columns: 0.8fr 1.1fr 1fr; gap: 2.5rem;
  align-items: baseline; padding: 2rem 0; border-bottom: 1px solid var(--rule-soft);
}
.frame-them { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.01em; }
.frame-arrow { font-size: 1rem; color: var(--muted); line-height: 1.6; font-weight: 300; }
.frame-us { font-size: 1.06rem; color: var(--ink); line-height: 1.55; font-weight: 400; padding-left: 0; border-left: none; }
.frame-us::before { content: '→ '; color: var(--accent); }

.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.who-list { list-style: none; border-top: 1px solid var(--rule); }
.who-list li {
  font-size: 1.04rem; color: var(--ink-soft); line-height: 1.6; font-weight: 300;
  padding: 1.2rem 0; border-bottom: 1px solid var(--rule-soft); position: static;
}
.who-list li:first-child { border-top: none; }
.who-list li { position: relative; padding-left: 1.7rem; }
.who-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent); font-size: 0.95em; }
.who-aside { background: none; color: var(--ink); border-radius: 0; padding: 0; position: static; }
.who-aside .eyebrow { display: block; margin-bottom: 1.6rem; color: var(--summit); }
.who-aside .notfit-list { list-style: none; border-top: 1px solid var(--rule); }
.who-aside .notfit-list li {
  font-size: 1.02rem; color: var(--muted); line-height: 1.6; font-weight: 300;
  padding: 1.2rem 0; border-bottom: 1px solid var(--rule-soft); position: relative; padding-left: 1.6rem;
}
.who-aside .notfit-list li::before { content: '×'; position: absolute; left: 0; color: var(--summit); }

/* ─── PROOF ─── */
#proof { background: var(--paper-2); }
.proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.proof-card { background: none; border: none; border-radius: 0; padding: 0; border-left: none; }
.proof-card .eyebrow { color: var(--summit); display: block; margin-bottom: 1.2rem; }
.proof-card p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.72; font-weight: 300; }
.proof-honest {
  margin-top: 3rem; font-size: 1.1rem; color: var(--ink); line-height: 1.7;
  max-width: 34em; padding-left: 2rem; border-left: 1px solid var(--accent);
  font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400;
}
.proof-prior { margin-top: 4.5rem; max-width: 40em; padding-top: 2rem; border-top: 1px solid var(--rule); }
.proof-prior .eyebrow { display: block; margin-bottom: 1rem; }
.proof-prior p { font-size: 1.04rem; color: var(--ink-soft); line-height: 1.75; font-weight: 300; }

/* ─── FOUNDER ─── */
#founder { background: var(--paper); }
.founder-beat { max-width: 44em; }

.founder-main {
  display: grid; grid-template-columns: 260px 1fr; gap: 3.5rem;
  align-items: start; margin-bottom: 4.5rem;
}
.founder-portrait { margin: 0; }
.founder-portrait img {
  display: block; width: 100%; height: auto;
  filter: saturate(0.92) contrast(1.02);
}
.founder-id {
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.founder-id strong {
  font-family: 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: 1.22rem; letter-spacing: -0.01em; color: var(--ink);
}
.founder-id span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.founder-quote {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.4; letter-spacing: -0.015em;
  color: var(--ink); margin-bottom: 2rem;
}
.founder-bio { font-size: 1.08rem; color: var(--muted); line-height: 1.75; max-width: 38em; font-weight: 300; }

.record-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.6rem;
}
.founder-record { max-width: 46em; }
.founder-record ul { list-style: none; border-top: 1px solid var(--rule); }
.founder-record li {
  font-size: 1.02rem; line-height: 1.7; color: var(--muted); font-weight: 300;
  padding: 1.3rem 0; border-bottom: 1px solid var(--rule-soft);
}
/* One record item carries the fullest story, including a partial failure. Featured
   deliberately so its length reads as emphasis rather than as imbalance. */
.founder-record li.record-feature {
  padding: 1.6rem 0 1.6rem 1.6rem;
  border-left: 2px solid var(--accent);
  font-size: 1.06rem; color: var(--ink-soft);
}
.founder-record li.record-feature em { font-style: italic; color: var(--ink); }
.founder-record li strong {
  display: block; font-family: 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: 1.15rem; letter-spacing: -0.01em; color: var(--ink);
  margin-bottom: 0.25rem;
}
.founder-transfer { margin-top: 4rem; max-width: 40em; padding-left: 2rem; border-left: 1px solid var(--accent); }
.founder-transfer p { font-size: 1.12rem; line-height: 1.72; color: var(--ink-soft); font-weight: 300; }
.founder-transfer strong { color: var(--ink); font-weight: 400; }

/* ─── CONTACT ─── */
#contact { background: var(--deep); color: var(--paper); text-align: left; padding: 9rem 0; }
#contact .section-eyebrow { color: rgba(251,250,248,0.5); margin-bottom: 2rem; }
.cta-inner { max-width: 34em; margin: 0; }
.cta-headline {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 3.8rem); letter-spacing: -0.02em; line-height: 1.05;
  margin: 0 0 1.6rem;
}
.cta-sub { font-size: 1.14rem; color: rgba(251,250,248,0.68); line-height: 1.7; margin-bottom: 3rem; font-weight: 300; }
.cta-email {
  display: inline-block; font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 2rem); color: var(--paper);
  background: none; border: none; cursor: pointer;
  padding-bottom: 0.4rem; border-bottom: 1px solid rgba(251,250,248,0.35);
  transition: color 0.2s, border-color 0.2s;
}
.cta-email:hover { color: var(--accent-soft); border-bottom-color: var(--accent-soft); }

/* ─── FIGURES ─────────────────────────────────────────────────────
   Three figures, each a standalone file in figures/, referenced with
   <img>. They are held to the same rules as the rest of the page: 1px
   hairlines, no radius, mono for every label, and colour used only as
   reinforcement — meaning is carried by FORM first, because these get
   reproduced small and in greyscale in written pieces.

   Consequences of referencing rather than inlining, all of them handled
   inside the SVG files themselves:

   1. An <img>-referenced SVG is an isolated document. It cannot see these
      rules and it cannot see the page's Google Fonts, so all of its own
      styling lives in a <style> block inside each file, and the two
      figures that set type carry subset webfonts embedded as base64.
      Regenerate those with scripts/embed-figure-fonts.py after editing
      any figure text. There are deliberately no .f-* rules here — they
      would be dead weight, since nothing in this stylesheet can reach
      inside an <img>.
   2. Each file paints its own background rect, matching --paper for the
      3x3 and --deep for the two in #search. If either of those variables
      ever changes, the figure files have to change with them.
   3. Colours inside the files are literal hex, for the same reason: no
      var() can cross the <img> boundary.

   Prose lives in <figcaption> out here, not in the SVG — it reflows, it
   stays at body size on a phone, and it keeps the drawings to structural
   labels. */
.fig { margin: 0; }
.fig picture { display: block; }
.fig img { display: block; width: 100%; height: auto; }

/* Below 700px the two wide figures swap to portrait variants via <picture>,
   because their label type cannot survive being scaled into a phone column
   and neither can their left-to-right geometry. An earlier version instead
   scrolled them inside an overflow box with a min-width floor; that kept the
   type legible but left a clipped figure with no affordance, which is not
   something useful on a phone. <picture> means the browser fetches only the
   variant it will actually show, so the second file costs nothing on desktop.
   Figure 3 needs no variant — it is 300px wide and textless already. */

.fig figcaption {
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.95rem; line-height: 1.68; font-weight: 300;
  color: var(--muted); max-width: 42em;
}
.fig figcaption b { font-weight: 400; color: var(--ink-soft); }
.fig figcaption .f-cap {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.fig--dark figcaption { border-top-color: rgba(251,250,248,0.14); color: rgba(251,250,248,0.6); }
.fig--dark figcaption b { color: rgba(251,250,248,0.9); }
.fig--dark figcaption .f-cap { color: rgba(251,250,248,0.42); }

/* Placement */
.fig--space  { margin: 0 0 4.5rem; }              /* the 3x3, above the directions */
.fig--flow   { margin: 0 0 3.6rem; }              /* the phase flow, above the cards */
.fig--margin { max-width: 300px; margin: 2.2rem 0 0; }   /* narrowing — a footnote figure */
.fig--margin figcaption { font-size: 0.88rem; margin-top: 1.1rem; padding-top: 0.9rem; }

/* ─── CONTOUR FRAGMENTS ───────────────────────────────────────────
   The contour motif previously appeared once, in the hero, and never
   returned. These fragments let it surface at the top of alternating
   light sections, so the map reads as continuing underneath the page.
   Inline data URIs — no extra requests, no asset dependency.
   Deliberately not applied to the dark sections: the motif appearing
   only on light ground gives the page a rhythm instead of wallpaper. */
#ask, #lenses, #frame, #founder {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 180px;
}
#ask    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231f6f5c' stroke-width='1' stroke-opacity='0.11'%3E%3Cpath d='M-20,150 C220,110 430,140 650,100 C870,58 1030,88 1220,44'/%3E%3Cpath d='M-20,126 C240,86 450,116 660,78 C880,36 1040,64 1220,22'/%3E%3Cpath d='M-20,102 C260,64 470,92 680,56 C890,16 1050,42 1220,2'/%3E%3C/g%3E%3C/svg%3E"); }
#lenses { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231f6f5c' stroke-width='1' stroke-opacity='0.11'%3E%3Cpath d='M-20,20 C200,60 420,32 640,72 C860,112 1030,84 1220,128'/%3E%3Cpath d='M-20,44 C220,84 440,56 660,96 C880,134 1040,108 1220,150'/%3E%3Cpath d='M-20,68 C240,108 460,80 680,118 C890,156 1050,130 1220,172'/%3E%3C/g%3E%3C/svg%3E"); }
#frame  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231f6f5c' stroke-width='1' stroke-opacity='0.11'%3E%3Cpath d='M-20,150 C220,110 430,140 650,100 C870,58 1030,88 1220,44'/%3E%3Cpath d='M-20,126 C240,86 450,116 660,78 C880,36 1040,64 1220,22'/%3E%3Cpath d='M-20,102 C260,64 470,92 680,56 C890,16 1050,42 1220,2'/%3E%3C/g%3E%3C/svg%3E"); }
#founder{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231f6f5c' stroke-width='1' stroke-opacity='0.11'%3E%3Cpath d='M-20,20 C200,60 420,32 640,72 C860,112 1030,84 1220,128'/%3E%3Cpath d='M-20,44 C220,84 440,56 660,96 C880,134 1040,108 1220,150'/%3E%3Cpath d='M-20,68 C240,108 460,80 680,118 C890,156 1050,130 1220,172'/%3E%3C/g%3E%3C/svg%3E"); }

/* ─── RUNNING RAIL ────────────────────────────────────────────────
   Section numbers in the left margin. A standard editorial device, and
   the cheapest way to give a 13,000px page scan landmarks without
   adding imagery. Margin-dependent, so it hides once the viewport can
   no longer spare the gutter. */
body { counter-reset: sect; }

/* The numeral used to be positioned against the section's top edge while the
   eyebrow sat in normal flow, so their baselines were never related — the
   numeral floated high. Now it's a flex item of the eyebrow itself with
   `align-items: baseline`, which aligns them by construction at any font size.
   The three horizontal values cancel (-3.9 + 3.2 + 0.7 = 0), so the eyebrow
   text stays exactly where it was and only the numeral sits out in the margin. */
section .section-eyebrow {
  counter-increment: sect;
  display: flex;
  align-items: baseline;
}
section .section-eyebrow::before {
  content: counter(sect, upper-roman);
  /* Offsets are relative to the eyebrow's content box, which sits inside the
     container's 3.5rem padding — so the pull-left has to clear that too, or the
     numeral ends up adjacent to the label and reads as a prefix rather than as
     marginalia. -7.4 + 3.2 + 4.2 = 0, so the label still doesn't move. */
  flex: 0 0 3.2rem;
  margin-left: -7.4rem;
  margin-right: 4.2rem;
  text-align: right;
  /* Roman numerals in the display serif, not the mono label face: they read as
     marginalia against the mono eyebrow rather than competing with it. */
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: none;
  /* No `opacity` — it previously compounded with the rgba alpha on the dark
     sections and left the numeral nearly invisible. */
  color: #8f9498;
}
#search .section-eyebrow::before,
#contact .section-eyebrow::before { color: rgba(251,250,248,0.62); }
@media (max-width: 1300px) {
  section .section-eyebrow::before { display: none; }
}

/* ─── FOOTER ─── */
footer {
  background: var(--deep); color: rgba(251,250,248,0.38);
  padding: 2.5rem 3.5rem; border-top: 1px solid rgba(251,250,248,0.12);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
}
footer a { color: rgba(251,250,248,0.38); text-decoration: none; }
footer a:hover { color: var(--accent-soft); }

/* ─── MOTION ─── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: none; }
.cover-logo, .cover-eyebrow, .cover-headline, .cover-sub, .cover-cta { opacity: 0; animation: fadeUp 0.9s ease forwards; }
.cover-eyebrow { animation-delay: 0.1s; } .cover-headline { animation-delay: 0.2s; }
.cover-sub { animation-delay: 0.35s; } .cover-cta { animation-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cover-logo, .cover-eyebrow, .cover-headline, .cover-sub, .cover-cta { animation: none; opacity: 1; }
}

/* ─── MODAL ─── */
.modal-overlay { position: fixed; inset: 0; background: rgba(22,24,26,0.55); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 1.5rem; backdrop-filter: blur(3px); }
.modal-overlay[hidden] { display: none; }
.modal-dialog { background: var(--paper); color: var(--ink); padding: 3rem 2.8rem 2.4rem; max-width: 460px; width: 100%; position: relative; border-radius: 2px; border-top: 2px solid var(--accent); }
.modal-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--muted); }
.modal-close:hover { color: var(--ink); }
.modal-prompt { font-size: 1rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 1.4rem; font-weight: 300; }
.modal-email { font-family: 'JetBrains Mono', monospace; font-size: 0.98rem; color: var(--ink); margin-bottom: 1.8rem; }
.modal-actions { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }
.modal-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 0;
  background: none; padding: 0.5rem 0; border: none; border-bottom: 1px solid;
}
.modal-btn--primary { color: var(--accent); border-color: var(--accent); }
.modal-btn--secondary { color: var(--muted); border-color: var(--rule); }
.modal-btn--secondary:hover { color: var(--ink); border-color: var(--ink); }
.modal-copied { margin-top: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.modal-copied[hidden] { display: none; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 980px) {
  nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; flex-direction: column; gap: 0; }
  .nav-links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 0.8rem 0; }
  .nav-links.open li a { display: block; padding: 0.8rem 1.5rem; }
  .nav-toggle { display: flex; }
  .container, .cover-inner { padding: 0 1.5rem; }
  section { padding: 5.5rem 0 5rem; }
  #cover { padding: 9rem 0 5rem; min-height: auto; }
  .asset-grid { grid-template-columns: 1fr; }
  .asset-card { border-right: none; border-bottom: 1px solid var(--rule-soft); padding: 1.8rem 0 !important; }
  .bring-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .lens { grid-template-columns: 1fr; gap: 1.4rem; }
  .lens-head, .lens-body, .lens-proof { grid-column: 1; }
  .trek-track { grid-template-columns: 1fr; gap: 2.5rem; }
  .frame-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .who-grid { grid-template-columns: 1fr; gap: 3rem; }
  .proof-pair { grid-template-columns: 1fr; gap: 2.5rem; }
  .founder-main { grid-template-columns: 1fr; gap: 2rem; }
  .founder-portrait { max-width: 220px; }
  #contact { text-align: left; }
}