/* ═══════════════════════════════════════════════════════════════════
   SIMBIOTREK — site overrides, loaded after simbiotrek.css

   simbiotrek.css is a byte-identical copy of the concept page's
   stylesheet (the "Editorial" system, D38) and is deliberately never
   edited here, so the two stay diffable. Everything this site adds on
   top of it lives in this file:

     1. Brand-colour tokens (2026-09-07): the accent moves from the
        concept page's evergreen to the logo blue.
     2. The one element borrowed from Sneha Debnath's design — the
        Directions as a sticky stack.
     3. Field Notes: post prose, the index, and the cards.
     4. The 404 page.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. BRAND TOKENS ─────────────────────────────────────────────
   --accent is only ever used on the light (--paper) sections; --accent-soft
   only on the dark ones (#search, #contact, the footer). Both are picked to
   clear 4.5:1 against the ground they actually appear on: #156fac on --paper
   is 5.1:1, #5aa7e6 on --deep is 6.2:1.

   --brand-green is the logo green. It is NOT a general-purpose accent: the
   page uses it in exactly one place, the surviving band in figure 3, where it
   means "continues / survives" (and where the figure's alt text names it). It
   is declared here so that meaning has a name. Keep it rare, and note that it
   only reaches 2.4:1 on --paper, so it can't carry a rule or a mark on the
   light sections. */
:root {
  --accent: #156fac;        /* logo blue */
  --accent-soft: #5aa7e6;   /* the same blue lifted for the dark sections */
  --brand-green: #74b532;   /* logo green — "continues / survives" only */
  --summit: #a8703a;        /* burnt ochre, unchanged */
}

/* The contour fragments at the top of the alternating light sections paint a
   literal hex inside a data URI, so var(--accent) can't reach them. Same four
   rules as simbiotrek.css, re-declared with the blue. */
#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='%23156fac' 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='%23156fac' 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='%23156fac' 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='%23156fac' 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"); }

/* ─── 2. THE DIRECTIONS AS A STICKY STACK ─────────────────────────
   Borrowed from Sneha Debnath's 2026-09 design (style.scss, .direction-item),
   which Sean singled out as the element worth carrying over. Reimplemented as
   plain CSS — no GSAP, no Lenis, no scroll listener.

   Each Direction pins under the fixed nav and the next one rides up over it,
   so the three read as a deck rather than a list. Requirements: an opaque
   --paper background on each card (or the card beneath shows through), and no
   ancestor with `overflow` other than <body>, which would silently kill
   sticky. Below 980px the cards flatten back to the original hairline list —
   a stack that tall on a phone is just a series of screens with nothing to
   compare. */
.lens-list {
  --lens-stack-top: 5.5rem;    /* clears the fixed nav (~4.5rem) */
  --lens-stack-step: 4.5rem;   /* how much of each card stays visible */
  position: relative;
  isolation: isolate;
  border-top: 0;
}
.lens {
  position: sticky;
  top: var(--lens-stack-top);
  z-index: 1;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  padding: 2.5rem 0 3rem;
  margin-bottom: 1.5rem;
  /* Rows must not stretch to fill the card: the two-row grid puts the "It
     happens" precedent in row 2 of the right column, and a stretched row 1
     opens a gap between the body copy and it. */
  align-content: start;
}
.lens:nth-child(2) { top: calc(var(--lens-stack-top) + var(--lens-stack-step)); z-index: 2; }
.lens:nth-child(3) { top: calc(var(--lens-stack-top) + 2 * var(--lens-stack-step)); z-index: 3; }
.lens:last-child { margin-bottom: 0; }

/* What the reveal band shows has to be a deliberate strip, not a slice through
   whatever happens to be at the top of the card. On the left, --lens-stack-step
   lands between the "Direction One" label and the headline, so the band is
   label + air, bounded by the two cards' top hairlines. The right-hand column
   started at the same y, which put a sliced first line of prose in the band —
   so the body copy now begins level with the headline instead of level with the
   label. That reads better unstacked too. */
.lens-body { padding-top: 2.4rem; }

@media (max-width: 980px) {
  .lens, .lens:nth-child(2), .lens:nth-child(3) {
    position: static;
    top: auto;
    z-index: auto;
    margin-bottom: 0;
    padding: 3rem 0;
    border-top: 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .lens-body { padding-top: 0; }
  .lens-list { border-top: 1px solid var(--rule); }
}

/* ─── 3. FIELD NOTES ──────────────────────────────────────────────
   The writing lives on the same Editorial system as the homepage: paper,
   Newsreader for display, a mono eyebrow, hairlines instead of cards. The
   homepage sets its own rhythm section by section; a post is one column of
   running prose, so it gets a measure (~40em) and very little else. */
.notes-page { padding: 11rem 0 7rem; }

.post-header { max-width: 40em; margin-bottom: 3rem; }
.post-header .eyebrow { display: block; margin-bottom: 1.4rem; }
.post-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.post-feature { margin: 0 0 3rem; max-width: 46em; }
.post-feature img { width: 100%; height: auto; display: block; }

.post-body {
  max-width: 40em;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.72;
  color: var(--ink-soft);
  font-weight: 400;
}
.post-body > * + * { margin-top: 1.5rem; }
.post-body h2, .post-body h3, .post-body h4 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: 3rem;
}
.post-body h2 { font-size: 1.75rem; }
.post-body h3 { font-size: 1.35rem; }
.post-body h4 { font-size: 1.12rem; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body em { font-style: italic; }
.post-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
.post-body a:hover { border-bottom-color: var(--accent); }
.post-body ul, .post-body ol { padding-left: 1.4rem; }
.post-body li + li { margin-top: 0.5rem; }
.post-body img { max-width: 100%; height: auto; display: block; }
.post-body figure { margin: 2.5rem 0; }
.post-body figcaption {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem; color: var(--muted); margin-top: 0.7rem;
}
.post-body blockquote {
  padding-left: 1.6rem;
  border-left: 1px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}
.post-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}
.post-body pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  line-height: 1.6;
  background: var(--paper-2);
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
}
.post-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
}
.post-body table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.post-body th, .post-body td {
  text-align: left; padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.post-tags { max-width: 40em; margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.post-tags .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.post-byline, .post-back {
  max-width: 40em; margin-top: 2.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.post-back { margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.post-back a { color: var(--muted); text-decoration: none; }
.post-back a:hover { color: var(--ink); }

/* The Field Notes index */
.notes-intro { max-width: 36em; font-size: 1.1rem; color: var(--ink-soft); font-weight: 300; }
.card-list { margin-top: 4rem; border-top: 1px solid var(--rule); }
.card { padding: 2.2rem 0; border-bottom: 1px solid var(--rule-soft); max-width: 46em; }
.card-media { display: block; margin-bottom: 1.2rem; max-width: 22rem; }
.card-media img { width: 100%; height: auto; display: block; }
.card-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.7rem;
}
.card-title {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.18; letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
}
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--accent); }
.card-excerpt { color: var(--muted); font-size: 1rem; line-height: 1.65; font-weight: 300; }
.read-more {
  display: inline-block; margin-top: 0.9rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
.pagination {
  margin-top: 3rem; display: flex; gap: 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.pagination a { color: var(--muted); text-decoration: none; }
.pagination a:hover { color: var(--ink); }

/* A paragraph that is only a YouTube URL becomes an embed (see the
   youtubeEmbeds transform in .eleventy.js). */
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 2.5rem 0; }
.video-embed.is-short { aspect-ratio: 9 / 16; max-width: 24rem; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Generic page layout, same measure as a post. */
.page-title {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
}

/* ─── 4. 404 ──────────────────────────────────────────────────────
   One line and a way back. */
.notfound { padding: 14rem 0 10rem; }
.notfound .eyebrow { display: block; margin-bottom: 1.4rem; }
.notfound h1 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em;
  max-width: 26em; margin-bottom: 2rem;
}
.notfound p { max-width: 34em; color: var(--ink-soft); font-weight: 300; }
.notfound a {
  display: inline-block; margin-top: 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 2px;
}

@media (max-width: 980px) {
  .notes-page { padding: 8rem 0 5rem; }
  .notfound { padding: 9rem 0 6rem; }
}