/* ==========================================================================
   Libra Engine -- the site chrome (nav, footer, welcome sequence) on every
   page, and the homepage. Loads AFTER styles.css and builds on its tokens and its page-shell grid.
   Built from the approved spike (spike/homepage-2026-10-26.html, v14):
   hero first with the canvas torus, the name strip, a sticky nav from there,
   mission, venture cards, the Bridge, Bytes, founder, four-column footer.
   Single committed dark look; the palette is dark by definition.
   Components are recorded in STYLE-GUIDE.md under "Homepage components".
   ========================================================================== */

:root {
  color-scheme: dark;
  --nav-h: 104px;  /* tall: the menu labels sit low under a deep top */
  --t-wipe: 600ms;
  --t-ui: 200ms;
  /* the homepage runs a wider gutter than the inner pages; clears a notch */
  --site-edge-min: max(40px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.le-force-motion) { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--le-bg);
  color: var(--le-ink);
  font-family: var(--le-font-serif);
  font-size: 20px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  overflow-x: hidden;
}
/* The band above the sticky nav on a phone with a notch. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--le-bg);
}

[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--le-gold); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--le-gold); outline-offset: 2px; }


/* ---- type ------------------------------------------------------------ */
.eyebrow {
  margin: 0 0 18px;
  font-family: var(--le-font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--le-gold);
}
.h2 {
  margin: 0;
  font-family: var(--le-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: 0.06em;
  color: var(--le-ink-bright);
  text-wrap: balance;
}
.h2--caps { text-transform: uppercase; }  /* a one-word head set in full caps */
.lede {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: var(--le-ink-dim);
}
.prose p { margin: 0 0 1.1em; max-width: 64ch; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--le-ink-bright); }

/* ---- buttons --------------------------------------------------------- */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  overflow: hidden;
  border: 1px solid var(--le-gold);
  border-radius: 2px;
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--le-gold);
  background: transparent;
  cursor: pointer;
  transition: color var(--t-ui) ease var(--t-ui);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--le-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-wipe) ease;
}
.btn:hover, .btn:focus-visible { color: var(--le-gold-ink); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn--solid { color: var(--le-gold-ink); background: var(--le-gold); }
.btn--solid::before { background: var(--le-gold-bright); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--le-gold-ink); }
.btn svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  html:not(.le-force-motion) .btn::before { transition: none; }
  html:not(.le-force-motion) .btn { transition: none; }
}

/* ---- nav -------------------------------------------------------------- */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 70;
  background: rgba(8, 8, 15, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--le-rule);
  border-bottom: 1px solid var(--le-rule);
  transition: transform 300ms ease;
}
/* Scroll-up-only: tucked up out of view while scrolling down (home.js). It
   clears the notch band too. Focus brings it back, so keyboard users never
   tab through links hidden off the top of the screen. */
.nav--hidden { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
.nav--hidden:focus-within { transform: none; }
/* Sticky things that sit under the nav move up when it tucks away. */
body { --nav-live: var(--nav-h); }
body:has(.nav--hidden:not(:focus-within)) { --nav-live: 0px; }
@media (prefers-reduced-motion: reduce) {
  html:not(.le-force-motion) .nav { transition: none; }
}
/* Stuck: once the nav sticks to the top, its ground goes fully opaque (a
   scroll-state container query). The opaque ground is the nav's own
   ::before, under its content. The brand's plate stays hover only. Engines
   without scroll-state queries keep the nav the same stuck or not. */
@supports (container-type: scroll-state) {
  .nav { container-type: scroll-state; }
  .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--le-bg);
    opacity: 0;
    transition: opacity var(--t-ui) ease;
  }
  @container scroll-state(stuck: top) {
    .nav::before { opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.le-force-motion) .nav::before, html:not(.le-force-motion) .nav__brand::before { transition: none; }
}
.nav__inner {
  min-height: var(--nav-h);
  display: flex;
  align-items: stretch;   /* the menu cells run the full nav height */
  justify-content: space-between;
  gap: 0;  /* the brand cell grows to meet the first menu cell (below) */
}
.nav__brand {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 6px 12px;
  margin-inline: -12px;
  border-radius: 2px;
  text-decoration: none;
  font-family: var(--le-font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--le-ink-bright);
  white-space: nowrap;
}
/* In the nav the brand is a cell like the menu's: full height, ruled on the
   left, its content sitting low. A one-line wrapping flex row lets
   align-content drop the line to the bottom while align-items keeps the mark
   and name centred on each other. The name is trimmed to its baseline (text
   box trim, below), and so are the menu labels, so one bottom pad,
   --nav-base, puts Engine on the labels' baseline. The cell grows to the
   first menu cell's rule, so its hover plate fills the whole way there. */
.nav { --nav-base: 20px; }
.nav__inner > .nav__brand {
  flex: 1 1 auto;
  align-self: stretch;
  flex-wrap: wrap;
  align-content: flex-end;
  margin: 0;
  padding: 0 16px var(--nav-base);
  border-left: 1px solid var(--le-rule);
  border-radius: 0;
}
.nav__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--le-plate);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-wipe) ease;
  will-change: transform;
}
.nav__brand:hover::before, .nav__brand:focus-visible::before { transform: scaleX(1); transform-origin: left; }
/* The hero lockup at small scale: the name on two lines at the wordmark's
   line-height and tracking (with its widened E), and the torus as tall as the
   name reads, cap line of Libra to baseline of Engine: (0.74 + 0.625)em.
   Width is that height times the drawn torus's own aspect, 1.544 (home.js
   fits the drawing to the height). Both scale with the brand's font-size.
   Trimmed, the name's box IS that span, so the mark centres on it exactly. */
.nav__name { display: block; line-height: 0.74; text-box: trim-both cap alphabetic; }
.nav__name > span { display: block; }
/* The nav's name morphs into a subpage's back link (styles.css, Page
   transitions). The footer lockup stays out: a name may appear once. */
.nav__inner .nav__name { view-transition-name: le-brand; }
.nav__mark { display: block; height: 1.365em; width: calc(1.365em * 1.544); }
/* The menu is a row of blocky cells, not buttons: square, no radius, each
   ruled off by a full-height line from the top of the nav to its bottom rule.
   A gold fill wipes in left to right on hover; The Bridge is set apart by a faint gold tint and gold lettering. */
.nav__links { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.nav__links li { display: flex; }
.nav__links a, .nav__menu {
  position: relative;
  z-index: 0;
  display: block;
  align-content: end;  /* lots of room on top, the label sits low */
  text-box: trim-end cap alphabetic;  /* the box ends on the baseline */
  overflow: clip;  /* not hidden: Firefox will not trim inside a scroll container */
  padding: 0 16px var(--nav-base);
  border-left: 1px solid var(--le-rule);
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: 1.275rem;  /* 1.02rem + 25% */
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--le-ink);
  transition: color var(--t-ui) ease var(--t-ui);
}
.nav__links li:last-child a { border-right: 1px solid var(--le-rule); }
.nav__links a::before, .nav__menu::before, .nav__pop a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--le-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-wipe) ease;
}
.nav__links a:hover, .nav__links a:focus-visible, .nav__menu:hover, .nav__menu:focus-visible,
.nav__pop a:hover, .nav__pop a:focus-visible { color: var(--le-gold-ink); }
.nav__links a:hover::before, .nav__links a:focus-visible::before, .nav__menu:hover::before, .nav__menu:focus-visible::before,
.nav__pop a:hover::before, .nav__pop a:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.nav__links a:focus-visible, .nav__menu:focus-visible, .nav__pop a:focus-visible { outline-offset: -3px; }
/* The Bridge: set apart by a faint gold tint and gold lettering, not a
   solid fill; it takes the same gold wipe as the other cells on hover. */
.nav__links a.nav__cta, .nav__pop a.nav__cta { color: var(--le-gold); background: rgba(216, 182, 100, 0.1); }
.nav__links a.nav__cta:hover, .nav__links a.nav__cta:focus-visible,
.nav__pop a.nav__cta:hover, .nav__pop a.nav__cta:focus-visible { color: var(--le-gold-ink); }
@media (prefers-reduced-motion: reduce) {
  html:not(.le-force-motion) :is(.nav__links a, .nav__links a::before, .nav__menu, .nav__menu::before, .nav__pop a, .nav__pop a::before) { transition: none; }
}
/* The Menu cell: a button dressed as a menu cell. It only shows when the
   row of links does not fit, and it stays gold while its popover is open.
   A button will not take align-content or text box trim itself, so its
   label is a trimmed span sitting at the flex end, on the same baseline. */
.nav__menu { display: flex; align-items: flex-end; margin: 0; background: none; border-block: 0; border-right: 0; cursor: pointer; anchor-name: --nav-menu; }
.nav__menu > span { display: block; text-box: trim-end cap alphabetic; }
.nav:has(.nav__pop:popover-open) .nav__menu { color: var(--le-gold-ink); }
.nav:has(.nav__pop:popover-open) .nav__menu::before { transform: scaleX(1); transform-origin: left; }
.nav__links li.nav__li-menu { display: none; }
/* The section links again, as a popover hung from the Menu cell by anchor
   positioning: right edges flush, its top on the nav's bottom rule. When
   the nav sits low on the first screen it flips to open above it. */
.nav__pop {
  position-anchor: --nav-menu;
  position-try-fallbacks: flip-block;
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
  margin: 0;
  min-width: 15rem;
  padding: 0;
  color: var(--le-ink);
  background: var(--le-bg);
  border: 1px solid var(--le-rule);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
/* Without anchor positioning: pinned under where the stuck nav sits. */
@supports not (anchor-name: --a) {
  .nav__pop { top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 1px); right: 16px; }
}
.nav__pop ul { margin: 0; padding: 0; list-style: none; }
.nav__pop a {
  position: relative;
  z-index: 0;
  display: block;
  overflow: clip;
  padding: 16px 20px;
  border-top: 1px solid var(--le-rule);
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: 1.275rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--le-ink);
  transition: color var(--t-ui) ease var(--t-ui);
}
.nav__pop li:first-child a { border-top: 0; }
.nav__pop-cta { display: none; }
/* Brand cell + four cells + CTA measure about 940px at the menu size, inside 48px
   of nav padding and 32px of body gutter: below 1060 the row does not fit,
   so the four links fold into the Menu cell's popover beside the CTA. */
@media (max-width: 1060px) {
  .nav__links li:not(.nav__li-cta) { display: none; }
  .nav__links li.nav__li-menu { display: flex; }
}
/* Below 560 the Menu cell takes the CTA's place too, and The Bridge rides
   at the foot of the popover. */
@media (max-width: 560px) {
  .nav__links .nav__li-cta { display: none; }
  .nav__menu { border-right: 1px solid var(--le-rule); }
  .nav__pop-cta { display: block; }
}

/* ---- hero ------------------------------------------------------------- */
/* 45/55: wordmark column, torus column. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 96px);
  position: relative;
}
.wordmark {
  /* The box starts on the cap line of Libra (text box trim). */
  margin: 0;
  text-box: trim-start cap alphabetic;
  font-family: var(--le-font-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 9.4vw, 7.4rem);
  /* "Engine" measures about 3.5em with its tracking (Cormorant SC 500), so
     28cqi keeps the wordmark inside its column at every width. */
  font-size: min(28cqi, clamp(3.2rem, 9.4vw, 7.4rem));
  line-height: 0.74;
  letter-spacing: 0.08em;
  color: var(--le-ink-bright);
  text-wrap: balance;
}
.hero__text { container-type: inline-size; }
.wordmark > span { display: block; }
/* Fallback for engines without text box trim: the measured offsets.
   Cormorant SC: ascent 0.924, descent 0.287, cap height 0.625. At
   line-height 0.74 the line box tops out (0.924 - 0.287 + 0.74) / 2 =
   0.6885em above the baseline, leaving 0.0635em over the caps of Libra.
   The labels sit 12px + half-leading + descent off the bottom, so the
   brand takes 19px to share their baseline. */
@supports not (text-box: trim-both cap alphabetic) {
  .wordmark { margin-top: -0.0635em; }
  .nav__inner > .nav__brand { padding-bottom: 19px; }
  .nav__links a, .nav__menu { display: flex; align-items: flex-end; padding-bottom: 12px; }
}
/* The E is drawn wider so its ink spans the L's above it, foot serif to foot
   serif. Cormorant SC 500 ink, in em: L 0.031 to 0.523, E 0.040 to 0.494.
   Scaling 492/454 and pulling left 0.0123em lands the E on 0.031 to 0.523;
   the right margin gives back the space the wider E took from the n. */
.wordmark__e {
  display: inline-block;
  transform: scaleX(1.0837);
  transform-origin: left center;
  margin-left: -0.0123em;
  margin-right: 0.0414em;
}
.hero__line {
  margin: 30px 0 0;
  max-width: 34ch;
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.62rem);
  line-height: 1.5;
  color: var(--le-ink-dim);
}
.hero__line em { font-style: normal; color: var(--le-ink); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 40px; }
/* ---- first screen ----------------------------------------------------- */
/* The hero and the name strip fill the first screen, so the nav starts on its
   bottom edge (--nav-h plus its two 1px rules). The hero centres in what the strip
   leaves; the strip sits on the nav. The welcome sequence opens when the nav has
   risen to mid-screen (home.js). */
#top {
  min-height: calc(100vh - var(--nav-h) - 2px);
  min-height: calc(100svh - var(--nav-h) - 2px);
  grid-template-rows: 1fr auto;
}
#top > .hero { align-self: center; }

/* ---- the name --------------------------------------------------------- */
/* A lifted panel: one shade up from the ground, same ink. */
.name {
  margin-block: 8px clamp(40px, 5vw, 64px);
  padding: 28px 32px;
  background: var(--le-bg-card);
  border: 1px solid var(--le-rule);
  color: var(--le-ink-dim);
  border-radius: 4px;
}
.name__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
  margin: 0;
  font-size: 1.05rem;
}
.name__grid div { display: grid; gap: 2px; align-content: start; }
.name__grid div + div { border-left: 1px solid var(--le-rule); padding-left: 40px; }
.name__grid dt {
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--le-ink-bright);
}
.name__grid dd { margin: 0; }
.name__grid i { color: var(--le-gold); }
@media (max-width: 640px) {
  .name { padding: 22px 20px; }
  .name__grid div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--le-rule); padding-top: 16px; }
}
@media (max-width: 640px) { .name__grid { grid-template-columns: 1fr; } }

.torus {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 100%;
  justify-self: end;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .torus { max-width: 420px; justify-self: center; order: -1; }
  .wordmark { line-height: 0.8; }  /* stacked: a smidge more air between Libra and Engine */
}

/* ---- the totem --------------------------------------------------------- */
/* The torus is drawn once, in a box (.totem, made by home.js) that starts
   in the hero's column and then rides the page small as the reader scrolls:
   the left or right gutter beside the content, by section (data-totem on
   the section), with one novelty stop where it docks into the Bytes profile
   picture. At rest in a layout slot (.torus-slot: the hero box, the avatar)
   it is that slot's child, so scroll and sticky carry it natively; in a
   gutter, and in flight between stops, it is fixed (.totem--free) and
   placed by home.js each frame. The gold glow and the canvas travel with the
   box; the canvas runs 40% past the box top and bottom so the light column
   has room to rise and fall, and the ring itself fits the box width. */
.torus-slot { position: relative; }
.totem {
  position: absolute;
  inset: 0;
  z-index: 20;  /* over the page, under the nav (70) and the welcome sequence (100) */
  pointer-events: none;
}
.totem--free { position: fixed; inset: auto; top: 0; left: 0; will-change: transform; }
/* A gutter stop: a rail the full height of its section, out in the gutter
   (home.js sets the side, gap and width), with the box sticky inside it
   (top set by home.js). The section's end carries it away, as sticky does. */
[data-totem] { position: relative; }
.totem-rail { position: absolute; top: 24px; bottom: 24px; pointer-events: none; }
.totem--rail { position: sticky; inset: auto; }
.totem::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(216,182,100,0.16), rgba(216,182,100,0.04) 42%, transparent 68%);
}
.totem canvas { position: absolute; inset: -40% 0; width: 100%; height: 180%; display: block; }
/* Docked in the profile picture, the live ring stands in for the icon. */
.avatar--big.torus-slot:has(.totem) svg { visibility: hidden; }

/* ---- scroll-driven ----------------------------------------------------- */
/* Tied to scroll in CSS, off the main thread, with no listeners. Where the
   engine has no scroll timelines, or motion is reduced, all of it rests in
   its final state, which is the page as it looks with none of it. */
@supports (animation-timeline: view()) {
  /* The hero torus eases back and dims as it leaves the top of the screen:
     from its top crossing the viewport top to its bottom crossing it. Only
     while it sits in the hero; by the time the totem leaves for a gutter the
     hero box is off screen. scale and opacity, so the bob's transform from
     home.js composes with it. */
  .hero .totem {
    animation: le-recede linear both;
    animation-timeline: view();
    animation-range: exit-crossing 0% exit-crossing 100%;
  }
  @keyframes le-recede { to { scale: 0.86; opacity: 0.3; } }

  /* Reading progress: a gold line along the nav's bottom rule. */
  .nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--le-gold);
    transform-origin: left;
    animation: le-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes le-progress { from { scale: 0 1; } }

  /* Section heads settle in as they enter from the bottom of the screen. */
  .section__head {
    animation: le-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  @keyframes le-settle { from { opacity: 0; translate: 0 32px; } }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.le-force-motion) .hero .totem,
  html:not(.le-force-motion) .section__head { animation: none; }
  html:not(.le-force-motion) .nav::after { display: none; }
}

/* ---- sections ---------------------------------------------------------- */
.section {
  padding-block: clamp(72px, 9vw, 140px);
  border-top: 1px solid var(--le-rule);
}
/* The Bridge closes the page on a full-width band in the nav's Bridge-cell
   tint. The section inside keeps the content column, so the totem rail
   still sits in the gutter beside it. */
.bridge-band {
  background: rgba(216, 182, 100, 0.1);
  border-top: 1px solid var(--le-rule);
}
.bridge-band > .section { border-top: 0; }
/* On the gold band the panels sit on the black ground, not the blue card. */
.bridge-band .mission__card,
.bridge-band .bridge { background: var(--le-bg); }
.section__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section__head .lede { max-width: 42ch; }
/* A head with no lede: the heading takes the full row and wraps naturally. */
.section__head--solo { grid-template-columns: 1fr; }
.section__head--solo .h2 { text-wrap: wrap; }
.section__head:last-child { margin-bottom: 0; }  /* a section that is only its head */
@media (max-width: 900px) {
  .section__head { grid-template-columns: 1fr; }
}

/* ---- mission ----------------------------------------------------------- */
.mission__statement {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.25;
  color: var(--le-ink-bright);
}
.mission__key { color: var(--le-gold-bright); }
.mission__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 5vw, 72px);
}
.mission__card {
  padding: 34px 32px 32px;
  background: var(--le-bg-card);
  border: 1px solid var(--le-rule);
  border-radius: 4px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.mission__card h3,
.bridge h3 {
  margin: 0;
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
  color: var(--le-ink-bright);
}
.mission__card p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--le-ink); }
.mission__card p em { color: var(--le-gold); }
.callout {
  margin: 0;
  padding-left: 24px;
  border-left: 2px solid var(--le-gold);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.45;
  color: var(--le-ink-bright);
}
@media (max-width: 900px) {
  .mission__grid { grid-template-columns: 1fr; }
}

/* ---- initiatives ------------------------------------------------------- */
/* Every card the same height: each row as tall as the tallest card. */
.ventures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(32px, 4vw, 56px);  /* room between the cards, rows and columns */
  margin: 0;
  padding: 0;
  list-style: none;
}
.ventures > li { display: flex; }
.venture {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--le-bg-card);
  border: 1px solid var(--le-rule);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-ui) ease, transform var(--t-ui) ease, background-color var(--t-ui) ease;
}
.venture:hover, .venture:focus-visible {
  border-color: var(--le-gold);
  background: var(--le-bg-soft);
  transform: translateY(-2px);
}
/* The venture's own homepage, as it looks right now: its whole first
   screen, a 1440 x 900 capture (cookie bars and modals cleared), shown
   uncropped at 16:10, assets/ventures/hero-<slug>.webp at 1200 x 750. */
.venture__shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--le-bg);
  border-bottom: 1px solid var(--le-rule);
}
.venture__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.venture__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 16px;
  align-content: start;
  padding: 24px 26px 26px;
}
.venture__name {
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.08em;
  color: var(--le-ink-bright);
  transition: color var(--t-ui) ease;
}
.venture:hover .venture__name { color: var(--le-gold); }
.venture__name--cw {
  font-family: var(--le-font-cw);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  letter-spacing: -0.03em;
  text-transform: none;
}
.venture__desc { grid-column: 1 / -1; margin: 0; font-size: 1.08rem; line-height: 1.5; color: var(--le-ink-dim); }
@media (max-width: 640px) {
  .ventures { grid-template-columns: 1fr; }
}

.bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(36px, 4vw, 56px);
  background: var(--le-bg-card);
  border: 1px solid var(--le-rule);
  border-radius: 4px;
}
.bridge h3 { margin-bottom: 20px; }
.bridge__links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--le-rule); }
.bridge__links a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--le-rule);
  text-decoration: none;
  color: var(--le-ink);
  transition: padding-left var(--t-ui) ease, color var(--t-ui) ease;
}
.bridge__links a:hover { color: var(--le-gold); padding-left: 14px; }
.bridge__links strong {
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  color: var(--le-ink-bright);
}
.bridge__links a:hover strong { color: var(--le-gold); }
.bridge__links span { font-size: 1.02rem; color: var(--le-ink-dim); text-align: right; }
@media (max-width: 900px) {
  .bridge { grid-template-columns: 1fr; }
  .bridge__links span { text-align: left; }
  .bridge__links a { flex-direction: column; gap: 4px; }
}

/* ---- bytes ------------------------------------------------------------- */
.bytes__split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.bytes__aside { position: sticky; top: calc(var(--nav-live) + env(safe-area-inset-top, 0px) + 24px); transition: top 300ms ease; }
.timeline, .profile {
  background: var(--le-bg-card);
  border: 1px solid var(--le-rule);
  border-radius: 4px;
  font-size: 1.05rem;
  line-height: 1.45;
}
.tabs { display: flex; border-bottom: 1px solid var(--le-rule); }
.tabs__tab {
  flex: 1;
  display: flex;
  justify-content: center;
  min-height: 56px;
  font-family: var(--le-font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--le-ink-dim);
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease;
}
button.tabs__tab { padding: 0; border: 0; background: none; cursor: pointer; }
.tabs__tab:hover { background: var(--le-bg-soft); color: var(--le-ink-bright); }
.tabs__tab span { position: relative; display: flex; align-items: center; }
.tabs__tab.is-active { color: var(--le-ink-bright); font-weight: 700; }
.tabs__tab.is-active span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--le-gold);
}
.byte {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--le-rule);
  cursor: pointer;
  transition: background-color var(--t-ui) ease;
}
.byte:hover { background: var(--le-bg-soft); }
.byte:last-of-type { border-bottom: 0; }
.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--le-bg);
  border: 1px solid var(--le-rule);
  color: var(--le-gold);
}
.avatar svg { width: 60%; height: 60%; }
.byte__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-bottom: 4px; }
.byte__name { font-family: var(--le-font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.08em; color: var(--le-ink-bright); }
.byte__handle, .byte__dot, .byte__time { color: var(--le-ink-dim); font-size: 0.98rem; }
.byte__time { text-decoration: none; }
.byte__time:hover { text-decoration: underline; }
.byte__text { overflow-wrap: anywhere; color: var(--le-ink); }
.byte__text a { color: var(--le-gold); text-decoration: none; }
.byte__text a:hover { text-decoration: underline; }
.byte__card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  margin-top: 12px;
  border: 1px solid var(--le-rule);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--le-bg);
  transition: border-color var(--t-ui) ease;
}
.byte__card:hover { border-color: var(--le-gold); }
.byte__card-art {
  display: grid;
  place-items: center;
  background: var(--le-bg-soft);
  border-right: 1px solid var(--le-rule);
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--le-gold);
  text-align: center;
  padding: 10px;
  line-height: 1.3;
}
/* A card can carry the linked site's own ground and ink (bg/ink in bytes.json),
   and a sans label for a wordmark that is not set in small caps. */
.byte__card-art--sans { font-family: system-ui, sans-serif; letter-spacing: -0.03em; text-transform: none; font-size: 1rem; }
.byte__text p { margin: 0; }
.byte__text p + p { margin-top: 0.6em; }
.byte__media { display: block; width: 100%; height: auto; margin-top: 12px; border: 1px solid var(--le-rule); border-radius: 12px; }
.timeline__empty { margin: 0; padding: 40px 20px; text-align: center; font-style: italic; color: var(--le-ink-dim); }
.byte__card-body { padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.byte__card-host { font-size: 0.86rem; color: var(--le-ink-dim); letter-spacing: 0.04em; }
.byte__card-title { font-weight: 700; color: var(--le-ink-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.byte__card-desc { font-size: 0.95rem; color: var(--le-ink-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.byte__actions { display: flex; gap: 20px; margin-top: 10px; }
.byte__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  color: var(--le-ink-dim);
  cursor: pointer;
}
.byte__action:hover { color: var(--le-gold); }
.byte__action svg { width: 16px; height: 16px; fill: currentColor; }
/* A byte's Share menu: a popover hung under its Share button by anchor
   positioning (build-bytes.mjs names each pair), flipped above when there
   is no room below. */
.share {
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: flip-block;
  margin: 6px 0;
  min-width: 13rem;
  padding: 6px 0;
  color: var(--le-ink);
  background: var(--le-bg-card);
  border: 1px solid var(--le-rule);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
/* Without anchor positioning: pinned to the bottom right of the screen. */
@supports not (anchor-name: --a) {
  .share { top: auto; left: auto; right: 16px; bottom: 16px; }
}
.share__item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.share__item:hover, .share__item:focus-visible { color: var(--le-gold); background: var(--le-plate); }
.share__item:focus-visible { outline-offset: -2px; }
.timeline__pager { display: flex; justify-content: center; padding: 20px; border-top: 1px solid var(--le-rule); }

.profile__banner {
  aspect-ratio: 3 / 1;
  background:
    radial-gradient(ellipse at 70% 120%, rgba(216,182,100,0.35), transparent 60%),
    linear-gradient(135deg, #181824, #0b0b14);
  border-bottom: 1px solid var(--le-rule);
}
.profile__info { padding: 0 20px 20px; }
.profile__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.profile .avatar--big {
  width: 30%;
  min-width: 72px;
  max-width: 120px;
  height: auto;
  aspect-ratio: 1;
  margin-top: max(-15%, -60px);
  border: 4px solid var(--le-bg-card);
  background: var(--le-bg);
}
.profile__name { margin: 0; font-family: var(--le-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.1em; color: var(--le-ink-bright); }
.profile__handle { margin: 0; color: var(--le-ink-dim); }
.profile__bio { margin: 14px 0 0; }
.profile__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--le-ink-dim); font-size: 0.98rem; }
.profile__meta a { color: var(--le-gold); text-decoration: none; }
.profile__meta a:hover { text-decoration: underline; }
.profile__stats { margin: 12px 0 0; color: var(--le-ink-dim); font-size: 0.98rem; }
.profile__stats strong { color: var(--le-ink-bright); }
.profile__note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--le-rule-soft); font-size: 0.88rem; font-style: italic; color: var(--le-ink-dim); }
.btn--sm { padding: 9px 18px; font-size: 0.9rem; }
@media (max-width: 900px) {
  .bytes__split { grid-template-columns: 1fr; }
  .bytes__aside { position: static; order: -1; }
}

/* ---- founder ----------------------------------------------------------- */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: start;
}
/* The eyebrow and portrait ride along beside the bio, under the nav. */
.founder__side {
  position: sticky;
  top: calc(var(--nav-live) + 2px + env(safe-area-inset-top, 0px) + 32px);
  align-self: start;
  transition: top 300ms ease;
}
.founder__portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--le-rule);
  border-radius: 4px;
  background: var(--le-bg-card);
}
.founder__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }  /* the file is cut 4:5 already (chad-lewine-portrait-4x5.webp) */
.founder__portrait figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  background: linear-gradient(transparent, rgba(8,8,15,0.85));
  font-family: var(--le-font-display);
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--le-ink);
}
.founder__text .h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); margin-bottom: 28px; }
.founder__quote {
  margin: 36px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--le-rule);
  font-family: var(--le-font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--le-ink-bright);
}
.founder__quote em { font-style: normal; color: var(--le-gold); }
.founder__ctas { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 32px; }
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; }
  .founder__side { position: static; }
  .founder__portrait { max-width: 420px; }
}

/* ---- footer ------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--le-rule);
  padding-block: clamp(80px, 10vw, 150px) 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  gap: 48px clamp(32px, 4vw, 64px);
}
.footer__brand .nav__brand { font-size: 1.6rem; margin: 0; padding: 0; }
.footer__brand .nav__brand::before { display: none; }
.footer__line { margin: 22px 0 0; max-width: 32ch; font-style: italic; font-size: 1.15rem; color: var(--le-ink-dim); }
.footer__geometry { margin: 28px 0 0; max-width: 36ch; font-size: 1rem; color: var(--le-ink-dim); }
.footer h4 {
  margin: 0 0 18px;
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--le-gold);
}
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.footer ul a { text-decoration: none; color: var(--le-ink); font-size: 1.08rem; transition: color var(--t-ui) ease; }
.footer ul a:hover { color: var(--le-gold); }
.footer ul a.cw { font-family: var(--le-font-cw); letter-spacing: -0.02em; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  /* copyright and the cookie button side by side */
  gap: 12px 40px;
  margin-top: clamp(72px, 9vw, 130px);
  padding: 32px 0 40px;
  border-top: 1px solid var(--le-rule-soft);
  font-family: var(--le-font-display);
  font-size: 0.98rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--le-ink-dim);
}
.footer__bottom p { margin: 0; }
.footer__prefs {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--t-ui) ease;
}
.footer__prefs:hover { color: var(--le-gold); }

/* ---- welcome sequence --------------------------------------------------- */
/* After chadworks' WelcomeScrim: the title stays pinned, the step under it
   slides left, then a countdown and a fade. Pinned from the top, not centred,
   so steps of different heights do not make the card jump. The card is a
   modal <dialog> (home.js); the scrim is its ::backdrop. */
.le-welcome {
  width: min(34rem, 100% - 32px);
  max-width: none;
  max-height: none;
  margin: max(24px, 12vh) auto auto;
  overflow: hidden;
  padding: clamp(24px, 4vw, 36px);
  color: inherit;
  background: var(--le-bg-card);
  border: 1px solid var(--le-rule);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.le-welcome:focus { outline: none; }  /* holds focus between steps, never shows it */
.le-welcome::backdrop {
  background: rgba(8, 8, 15, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* The page holds still and keeps its width while the dialog is open. */
html:has(dialog.le-welcome:modal) { overflow: hidden; scrollbar-gutter: stable; }
.le-welcome__title {
  margin: 0;
  font-family: var(--le-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--le-ink-bright);
}
/* The clip is padded past the content so a focus ring is not cut off. */
.le-welcome__viewport { overflow: hidden; margin: 16px -8px 0; padding: 0 8px 8px; }
.le-welcome__subtitle {
  margin: 0;
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--le-gold);
}
.le-welcome__body { margin: 10px 0 0; font-size: 1.05rem; line-height: 1.55; color: var(--le-ink); }
.le-welcome__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.le-welcome__actions .btn { flex: 1 1 auto; justify-content: center; min-width: 10rem; }
.le-welcome__thanks { margin: 0; font-style: italic; font-size: 1.3rem; color: var(--le-ink-bright); }
.le-welcome__countdown {
  margin: 8px 0 0;
  font-family: var(--le-font-display);
  font-size: 0.92rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--le-ink-dim);
}
/* The numerals in a plain sans: Cormorant's old-style figures read poorly at this size. */
.le-welcome__countdown span {
  margin-left: 0.2em;
  font-family: system-ui, sans-serif;
  font-size: 1.15em;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  color: var(--le-gold);
}
.le-welcome__bar { height: 2px; margin-top: 14px; overflow: hidden; background: var(--le-rule-soft); }
.le-welcome__bar span {
  display: block;
  height: 100%;
  background: var(--le-gold);
  transform-origin: left;
  animation: le-welcome-count 3s linear forwards;  /* COUNTDOWN in home.js */
}
.le-welcome__step--out { animation: le-welcome-out 323ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.le-welcome__step--in { animation: le-welcome-in 323ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes le-welcome-out { to { transform: translateX(-110%); opacity: 0; } }
@keyframes le-welcome-in { from { transform: translateX(110%); opacity: 0; } }
@keyframes le-welcome-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Motion off (and not forced): steps swap in place, the bar stands still and
   the scrim just goes. The number still counts down. */
@media (prefers-reduced-motion: reduce) {
  html:not(.le-force-motion) .le-welcome__step--out,
  html:not(.le-force-motion) .le-welcome__step--in,
  html:not(.le-force-motion) .le-welcome__bar span { animation: none; }
}
.footer__ghost {
  grid-column: full;
  overflow: hidden;
  padding-bottom: 24px;
  margin-top: -8px;
}
.footer__ghost span {
  display: block;
  text-align: center;
  font-family: var(--le-font-display);
  font-weight: 600;
  font-size: clamp(3.4rem, 14vw, 13rem);
  line-height: 0.9;
  letter-spacing: 0.12em;
  color: rgba(216,182,100,0.16);  /* the gold, nearly out: a warm ghost, not a grey one */
  white-space: nowrap;
  user-select: none;
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :root { --site-edge-min: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  body { font-size: 18px; }
  .footer__grid { grid-template-columns: 1fr; }
  .mission__card { padding: 26px 22px; }
}