:root {
    --bg: #000;
    --bg-soft: #0a0a0a;
    --panel: #0f0f12;
    --line: #1c1c20;
    --line-soft: #141418;
    --fg: #f5f5f7;
    --fg-dim: #a1a1a6;
    --fg-mute: #6e6e73;
    --accent-y: #ffcc00;
    --accent-r: #ff3b30;
    --accent-c: #00d4ff;
    --accent-g: #30d158;
    --accent-m: #ff2d55;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
    overflow-x: hidden;
  }
  a { color: var(--accent-c); text-decoration: none; }
  a:hover { text-decoration: underline; }
  code, kbd {
    font-family: "SF Mono", ui-monospace, "Menlo", Consolas, monospace;
    font-size: 0.92em;
    background: #15151a;
    padding: 1px 6px;
    border-radius: 4px;
    color: #e8e8ed;
  }

  /* ---------- Layout ---------- */
  .wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
  }
  section { padding: 96px 0; position: relative; }
  section + section { border-top: 1px solid var(--line-soft); }

  /* ---------- Top nav ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(0, 0, 0, 0.72);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
  }
  .nav-brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; letter-spacing: 0.2px;
    color: var(--fg);
  }
  .nav-brand-mark {
    /* The hero cube, shrunk. Height-driven so the aspect stays true; at this
       size the hero's 1px face strokes and edge highlights would land well
       under a device pixel, so the three face tones carry the form alone --
       lightened from the hero's values, which go muddy against the nav's
       near-black at 24px. */
    height: 24px;
    width: auto;
    flex: none;
    display: block;
  }
  .nav-brand:hover .nav-brand-mark { opacity: 0.85; }
  .nav-links { display: flex; gap: 22px; }
  .nav-links a {
    color: var(--fg-dim); font-size: 14px;
    text-decoration: none;
  }
  .nav-links a:hover { color: var(--fg); text-decoration: none; }

  /* Hamburger. Hidden entirely at desktop widths -- the tab row is the
     nav there, and the button would just be a second way to do the same
     thing. It appears only once the tabs no longer fit. */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:hover { border-color: #2a2a30; }
  .nav-toggle[aria-expanded="true"] { border-color: #2a2a30; }
  .nav-toggle-bar {
    display: block;
    width: 18px; height: 1.5px;
    background: var(--fg-dim);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Bars fold into an X when open: 1.5px bar + 5px gap = 6.5px of travel. */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* 780px: seven tabs plus the brand need ~680px, so this leaves the row
     comfortable rather than cramped right before it collapses. */
  @media (max-width: 780px) {
    .nav-toggle { display: flex; }
    .nav-links {
      /* .nav is position:sticky, so it is the containing block -- the panel
         spans the full nav width rather than the padded .wrap. */
      position: absolute;
      top: 56px;
      left: 0; right: 0;
      display: none;
      flex-direction: column;
      gap: 0;
      padding: 4px 0 10px;
      background: rgba(0, 0, 0, 0.94);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--line-soft);
    }
    .nav-links[data-open="true"] { display: flex; }
    .nav-links a {
      padding: 13px 28px;
      font-size: 15px;
      border-top: 1px solid var(--line-soft);
    }
    .nav-links a:first-child { border-top: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-toggle-bar { transition: none; }
  }

  /* ---------- Hero ---------- */
  .hero {
    /* Not a full viewport: surrender ~110px so the footer's top edge shows.
       A hero that exactly fills the screen reads as the whole page, and the
       visitor never learns there is anything below it. */
    min-height: calc(100vh - 166px);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 80px 0 120px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(900px 500px at 50% 28%, rgba(255, 204, 0, 0.06), transparent 60%),
      radial-gradient(700px 500px at 18% 80%, rgba(255, 45, 85, 0.05), transparent 60%),
      radial-gradient(700px 500px at 82% 80%, rgba(0, 212, 255, 0.05), transparent 60%);
    pointer-events: none;
  }
  .hero::after {
    /* subtle grid */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
  }
  .hero-inner { position: relative; z-index: 1; }

  /* ---------- Logo cube (SVG) ---------- */
  .logo-cube {
    width: clamp(220px, 32vw, 320px);
    height: auto;
    margin: 0 auto 48px;
    display: block;
    animation: cube-float 9s ease-in-out infinite;
  }
  @keyframes cube-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }

  /* ---------- Wordmark + tagline ---------- */
  .wordmark {
    font-size: clamp(56px, 9vw, 104px);
    font-weight: 800;
    letter-spacing: -3px;
    /* Display type, so it wants tight leading -- inheriting the body's 1.55
       put ~50px of empty air above and below the wordmark at full size. */
    line-height: 1.05;
    margin: 0;
    background: linear-gradient(180deg, #fff 0%, #b8b8c0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .wordmark .next { font-weight: 300; }
  .tagline {
    font-size: clamp(18px, 2.2vw, 24px);
    color: var(--fg-dim);
    margin: 16px 0 0;
    font-weight: 400;
    letter-spacing: 0.2px;
  }
  .cta {
    margin-top: 44px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 99px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .btn-primary {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
  }
  .btn-primary:hover { transform: translateY(-1px); background: #f0f0f0; text-decoration: none; }
  .btn-ghost {
    background: transparent;
    color: var(--fg);
    border: 1px solid #2a2a30;
  }
  .btn-ghost:hover { border-color: #4a4a52; text-decoration: none; }

  .hero-points {
    margin: 34px auto 0;
    max-width: 760px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    color: var(--fg-mute);
    font-size: 13px;
    letter-spacing: 0.3px;
  }
  .hero-points span { white-space: nowrap; }
  /* Dot separators drawn in CSS so they never wrap onto a line alone. */
  .hero-points span + span::before {
    content: "\00B7";
    margin-right: 10px;
    color: #3a3a42;
  }
  @media (max-width: 560px) {
    .hero-points { font-size: 12px; gap: 2px 8px; }
    .hero-points span + span::before { margin-right: 8px; }
  }

  /* ---------- Section heads ---------- */
  .kicker {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--accent-c);
    margin: 0 0 12px;
    font-weight: 600;
  }
  .section-title {
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: 0 0 16px;
    line-height: 1.1;
  }
  .section-lede {
    font-size: clamp(17px, 1.6vw, 19px);
    color: var(--fg-dim);
    max-width: 720px;
    margin: 0 0 56px;
  }

  /* ---------- Vision (manifesto) ---------- */
  .vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  @media (max-width: 760px) { .vision-grid { grid-template-columns: 1fr; } }
  .vision-card {
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--panel) 0%, #08080a 100%);
  }
  .vision-card h3 {
    font-size: 22px;
    margin: 0 0 10px;
    font-weight: 600;
    letter-spacing: -0.3px;
  }
  .vision-card p { margin: 0; color: var(--fg-dim); }

  /* ---------- About: forms ---------- */
  .about-bridge {
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--fg);
    margin: 0 0 28px;
  }
  .forms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  @media (max-width: 760px) { .forms-grid { grid-template-columns: 1fr; } }
  .forms-grid .vision-card {
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  .forms-grid .vision-card:hover { border-color: #2a2a30; transform: translateY(-2px); }
  .forms-grid .vision-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--form-accent, var(--accent-c));
    opacity: 0.85;
  }
  .forms-grid .vision-card h3 { font-size: 19px; }
  .forms-grid .vision-card .role {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--form-accent, var(--accent-c));
    margin: 0 0 10px;
  }

  /* ---------- Team ---------- */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 760px;
  }
  @media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }
  .member {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  .member:hover { border-color: #2a2a30; transform: translateY(-2px); }
  .member h3 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.3px;
  }
  .member .member-role {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--accent-c);
    margin: 0 0 12px;
  }
  .member p { margin: 0 0 12px; color: var(--fg-dim); font-size: 14.5px; line-height: 1.6; }
  .member a { font-size: 13px; }

  /* ---------- Reference pages: wide, card-free ---------- */
  /* Why and Status are read by scanning, not by reading top to bottom, so
     they want width and density rather than the 1080px measure that suits
     prose. Neither uses cards any more: card chrome (border, radius, ~25px of
     padding, a letter badge) cost roughly 90px an item and said nothing the
     heading did not already say. */
  .page-wide .wrap { max-width: 1280px; }
  .page-wide section:first-of-type { padding-top: 48px; padding-bottom: 56px; }
  .page-wide .section-lede { margin-bottom: 32px; }

  /* ---------- Why: editorial feature list ---------- */
  .feature-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 56px;
    row-gap: 30px;
  }
  @media (max-width: 800px) {
    .feature-grid { grid-template-columns: 1fr; row-gap: 24px; }
  }
  .feature-name {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--fg);
  }
  .feature-desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fg-dim);
  }

  /* ---------- Status: grouped rows ---------- */
  /* State is stated once per group instead of repeated as a tag on all
     fifteen records, which is what lets the tag column disappear. */
  .group + .group { margin-top: 32px; }
  .group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--fg-dim);
  }
  .group-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--group-accent);
    flex: none;
  }
  .group-count {
    margin-left: auto;
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--fg-mute);
  }

  .rows { list-style: none; margin: 0; padding: 0; }
  .row {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 28px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .row:last-child { border-bottom: none; }
  .row-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--fg);
  }
  .row-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg-dim);
  }
  /* The finished components are a roll-call more than a narrative, so that
     group runs two abreast; the groups a reader came for stay full width. */
  @media (min-width: 900px) {
    .group-split .rows {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 48px;
    }
    .group-split .row { grid-template-columns: 165px 1fr; gap: 20px; }
  }
  /* Below ~700px two columns leave the description a sliver, so the name
     becomes a heading above it. */
  @media (max-width: 700px) {
    .row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  }

  /* ---------- Status timeline ---------- */
  .status-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px;
  }
  .status-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px dashed var(--line);
  }
  .status-item:last-child { border-bottom: none; }
  .status-when {
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
    color: var(--fg-mute);
    font-size: 13px;
    letter-spacing: 0.5px;
  }
  .status-body strong { font-weight: 600; color: var(--fg); }
  .status-body p { margin: 4px 0 0; color: var(--fg-dim); }
  @media (max-width: 600px) {
    .status-item { grid-template-columns: 1fr; gap: 4px; }
  }

  /* ---------- Quote pull ---------- */
  .pull {
    margin: 64px auto 0;
    max-width: 820px;
    padding: 40px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-y);
    border-radius: 8px;
    background: linear-gradient(180deg, #0c0c0f 0%, #07070a 100%);
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.4;
    color: var(--fg);
    font-weight: 300;
    letter-spacing: -0.4px;
  }
  .pull cite {
    display: block;
    margin-top: 18px;
    font-style: normal;
    font-size: 13px;
    color: var(--fg-mute);
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  /* ---------- Footer ---------- */
  footer {
    border-top: 1px solid var(--line-soft);
    padding: 56px 0 80px;
    color: var(--fg-mute);
    font-size: 13.5px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
  }
  @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  .footer-grid h5 {
    color: var(--fg);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 14px;
    font-weight: 600;
  }
  .footer-grid ul { list-style: none; padding: 0; margin: 0; }
  .footer-grid li { margin-bottom: 8px; }
  .footer-grid a { color: var(--fg-dim); }
  .footer-grid a:hover { color: var(--fg); text-decoration: none; }
  .colophon {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--fg-mute);
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    .cube { animation: none; }
  }

  /* ---------- Per-page nav state ---------- */
  /* Each page ships its own copy of the nav with class="active" on the tab
     it corresponds to, so the current page is marked without a JS pass. */
  .nav-links a.active { color: var(--fg); }
  .nav-links a.active::after {
    content: "";
    display: block;
    height: 1.5px;
    margin-top: 3px;
    border-radius: 2px;
    background: var(--accent-y);
  }
  @media (max-width: 780px) {
    /* In the stacked panel an underline reads as a divider, so mark the
       current tab with a left rule instead. */
    .nav-links a.active::after { display: none; }
    .nav-links a.active {
      box-shadow: inset 2px 0 0 var(--accent-y);
    }
  }

  /* ---------- Interior pages ---------- */
  /* Only index.html leads with the hero. Everywhere else the first section
     butts straight up against the sticky nav, so it needs its own breathing
     room at the top rather than the symmetric 96px a mid-page section wants. */
  .page section:first-of-type { padding-top: 72px; }
  @media (max-width: 640px) {
    section { padding: 64px 0; }
    .page section:first-of-type { padding-top: 48px; }
  }

  /* ---------- Home page: fit the viewport ---------- */
  /* index.html is nav + hero + footer and nothing else, so it should resolve
     to one screen rather than a screen-and-a-bit. The old hero locked in
     min-height:calc(100vh - 166px), which -- once the 56px nav and the ~220px
     footer were added -- guaranteed ~110px of overflow at *every* window
     size, so the scrollbar was always there and always led nowhere.

     Instead: make the body a full-height flex column and let the hero absorb
     whatever space is left over. min-height (not height) is deliberate --
     if the content genuinely cannot fit, the page grows and scrolls
     normally rather than clipping. */
  body.home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  /* Mobile browsers report 100vh as the URL-bar-hidden height, which
     overshoots the visible area. dvh tracks the real viewport where it is
     supported; the 100vh above stays as the fallback. */
  @supports (min-height: 100dvh) {
    body.home { min-height: 100dvh; }
  }
  body.home .hero {
    flex: 1 1 auto;
    /* Drop the fixed floor -- flex-grow now sizes this. */
    min-height: 0;
    padding: clamp(20px, 4.5vh, 80px) 0 clamp(24px, 5.5vh, 120px);
  }

  /* The hero's own furniture scales with viewport *height* as well as width.
     A short-and-wide window (a laptop at 1440x790, a landscape phone) has
     plenty of horizontal room, so width-only clamps keep the cube and
     wordmark at full size and push the footer off-screen. min() lets
     whichever axis is tighter win. */
  body.home .logo-cube {
    width: clamp(120px, min(30vw, 27vh), 320px);
    margin: 0 auto clamp(14px, 3.4vh, 48px);
  }
  body.home .wordmark { font-size: clamp(40px, min(9vw, 10.5vh), 104px); }
  body.home .tagline {
    font-size: clamp(15px, min(2.2vw, 2.5vh), 24px);
    margin-top: clamp(8px, 1.5vh, 16px);
  }
  body.home .cta { margin-top: clamp(18px, 3.8vh, 44px); }
  body.home .hero-points { margin-top: clamp(14px, 3vh, 34px); }

  /* The footer on this page carries a single colophon line. Its 40px top
     margin, 24px padding and rule exist to separate it from the .footer-grid
     block -- which no page actually renders -- so here they only burn height
     that the hero could use. */
  body.home footer { padding: clamp(14px, 2.6vh, 32px) 0 clamp(16px, 3vh, 40px); }
  body.home .colophon {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }