assets/styles/layout.css

/* layout.css, page-wide structural primitives:
   tab-lede (paragraph below banner), default vertical section rhythm,
   part dividers (DEMO / MODEL signposts), section eyebrow / title /
   lede / takeaway typography, and the .section--two-col layout that
   parks narrative in a sticky rail next to the demo. */

/* --- Tab lede ------------------------------------------------------------
   Short narrative paragraph that opens each tab. Treated as an editorial
   "lede" (the deck under a magazine headline): one design accent (a thin
   green left-rail that echoes the green caret in the wordmark above) plus a
   typographic step-up to make it clearly *the entry point* rather than just
   the first body paragraph.

   Structure:
     .tab-lede          , outer wrapper, centers the block at page width
       .tab-lede__rail  , green left-rail + padding + max-width on the text
         .tab-lede__eyebrow, small mono "§ Intro" label up top
         p                 , the lede text itself (large, light, dark ink)
--------------------------------------------------------------------------- */
.tab-lede {
  max-width: 1200px; margin: 56px auto 0;
  padding: 0 32px;
}
.tab-lede__rail {
  /* The accent. 3px is just thick enough to read as a deliberate rail and
     not a stray border; the green matches --green / the wordmark caret. */
  border-left: 3px solid #317f3f;
  padding: 4px 0 4px 22px;
  max-width: 820px;
}
.tab-lede__eyebrow {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #317f3f;
  margin-bottom: 12px;
}
.tab-lede p {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #2d2d2a;
  max-width: 760px;
}
/* Release-hero figure (pareto frontier). Sits below the lede rail,
   left-aligned with the text column so the figure feels anchored to the
   announcement rather than floating. Caption mirrors the secondary-note
   typography for visual continuity. */
.tab-lede__figure {
  margin: 28px 0 0;
  max-width: 640px;
  padding: 0;
}
.tab-lede__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
}
.tab-lede__figure figcaption {
  margin-top: 10px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #5b5b56;
}

/* Secondary "navigator" paragraph that follows the lede. Drops a step
   in size + weight + saturation so the eye reads it as a follow-up /
   table of contents rather than another full lede paragraph; the inline
   §X references are styled as chip anchors (below) to keep it scannable. */
.tab-lede p + p.tab-lede__note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #5b5b56;
}
/* Inline chip anchors for the §1..§7 section references. Mono + warm
   green border so they read as deliberate "jump-to" markers within
   the prose. Subtle by default, fill in on hover/focus. */
.lede-chip {
  display: inline-block;
  padding: 0 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1f5024;
  background: rgba(49, 127, 63, 0.06);
  border: 1px solid rgba(49, 127, 63, 0.35);
  border-radius: 3px;
  text-decoration: none;
  vertical-align: 1px;          /* nudge up so it sits on the baseline of 14px prose */
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lede-chip:hover,
.lede-chip:focus-visible {
  background: rgba(49, 127, 63, 0.16);
  border-color: #317f3f;
  color: #1f1f1d;
  outline: none;
}

/* --- Sections --- */
section {
  border-bottom: 1px solid #eee;
  padding: 64px 0;
}
section:last-of-type { border-bottom: none; }

/* --- Part dividers (DEMO / MODEL) --- */
.part-divider {
  text-align: center;
  padding: 80px 32px 48px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background: linear-gradient(to bottom, rgba(49,127,63,0.04), transparent);
}
.part-divider .part-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #317f3f;
  letter-spacing: 4px; text-transform: uppercase;
  margin-bottom: 6px;
}
.part-divider h2 {
  font-family: "JetBrains Mono", monospace;
  font-size: 26px; font-weight: 300; letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.part-divider p {
  color: #666; font-size: 13px; max-width: 580px; margin: 0 auto;
}

.section-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #317f3f;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px; font-weight: 400; letter-spacing: -0.3px;
  margin-bottom: 24px;
  color: #1f1f1d;
}
.lede {
  color: #444; font-size: 14px; margin-bottom: 32px;
  max-width: 640px;
}
.takeaway {
  margin-top: 32px;
  padding: 16px 20px; border-left: 3px solid #317f3f;
  background: #f4f8f4; color: #333;
  font-size: 13px; max-width: 640px;
}
.takeaway strong {
  font-family: "JetBrains Mono", monospace;
  font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  font-size: 10px; color: #317f3f; display: block; margin-bottom: 4px;
}
/* Two-subsection takeaway: each <p> is its own labeled block (Try it /
   What to look for) sitting inside the same card. */
.takeaway p { margin: 0 0 14px; }
.takeaway p:last-child { margin-bottom: 0; }

/* === Two-column section layout =========================================
   The default layout stacks vertically: title → lede → demo → takeaway.
   For demo-heavy sections that means narrative and visualization never
   share visual space, by the time the visitor is mid-demo, the lede
   is scrolled away. .section--two-col places the eyebrow + title +
   lede in a sticky rail on the left and stacks the demo + takeaway
   in the right column. Narration stays in view while the visitor
   scrolls through the demo; the takeaway then appears right under
   the demo, on the right column, as a "now that you've played with
   it…" debrief, same flow on both the Demo and Model tabs.

   Layout math: container.wide is 1200px max with 32px padding =>
   1136px usable. 280px rail + 28px gap + 828px right column. Below
   960px the right column gets squeezed under ~620px (280 + 28 + ~620
   ≈ 928px usable inside a ~960px viewport), which is the point where
   the demos (gene tracks, SVG bars, 3D viewers) start clipping or
   becoming unreadable. We collapse to single-column and unstick the
   rail there so the narrative stacks above the demo + takeaway. */
.section--two-col {
  display: grid;
  grid-template-columns: 280px 1fr;
  column-gap: 28px;
  align-items: start;
  /* Land cleanly under the sticky header on anchor jumps (#folding). */
  scroll-margin-top: 104px;
}
.section--two-col .section-narrative {
  position: sticky;
  /* Sticky header is ~88px tall (title + tab strip on its border);
     +16px so the rail doesn't kiss the underline. */
  top: 104px;
  align-self: start;
  /* Cap on short viewports so a tall narrative still fits without
     pushing demo content off-screen. The narrative scrolls inside
     its own track if it ever overflows. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
}
/* The 640px cap on .lede exists to keep line length readable in the
   single-column layout. Inside a 280px rail that cap is moot, drop
   it so the text fills the rail. */
.section--two-col .section-narrative .lede {
  max-width: none;
  font-size: 13px;
  margin-bottom: 0;
}
/* Right column: demo stacked over takeaway, flex-column with a clear
   visual beat between them. */
.section--two-col .section-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;          /* let inner svg/canvas shrink instead of overflowing */
}
.section--two-col .demo {
  margin: 0;             /* default 24px y-margin is for single-column rhythm */
}
.section--two-col .takeaway {
  margin: 0;             /* gap on section-body handles vertical rhythm */
  max-width: none;       /* fill the right column rather than capping at 640 */
}
@media (max-width: 960px) {
  .section--two-col {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .section--two-col .section-narrative {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* --- "Try it" / "What you can do here" callout. Drops in above an
   interactive widget to spell out the affordances in one line. Subtle
   green-edge card so the reader sees it as a hint, not a heading. --- */
.widget-howto {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #f4f8f4;
  border-left: 2px solid var(--green);
  font-size: 12px; line-height: 1.55;
  color: #3a4a3d;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.widget-howto__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 600;
  color: var(--green);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}
.widget-howto__body { flex: 1 1 0; min-width: 0; }
.widget-howto__body kbd {
  font-family: inherit;
  background: rgba(31, 31, 29, 0.06);
  border-radius: 3px;
  padding: 1px 5px;
}