:root {
  --bg: #f6f4ee;
  --bg2: #efece3;
  --ink: #111418;
  --mut: #4f5864;
  --faint: #5f6775;   /* 5.4:1 on --bg — WCAG AA for body text */
  --hair: #d5d9e0;    /* decoration only: dots, ticks, hairlines */
  --alive: #163a7a;
  --alive2: #2b4c9b;
  --gold: #8a5a10;
  --line: #dcd8cc;
  --card: #ffffff;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --page: 1180px;
  --track-nav: 0.12em;     /* nav links, small signatures */
  --track-label: 0.22em;   /* all-caps mono labels */
  --track-kicker: 0.3em;   /* kickers and scroll cues */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 28px; }
.mut { color: var(--mut); }
.alive { color: var(--alive); }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 80;
  background: var(--card);
  color: var(--ink);
  padding: 0.4rem 0.7rem;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  letter-spacing: var(--track-label);
  font-size: 13px;
  color: var(--ink);
  flex: 0 0 auto;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--alive);
  box-shadow: none;
  animation: beat 1.9s infinite;
}

/* the seed-head mark: 21 points on the golden angle, breathing on the
 * same heartbeat as the old dot but without the 1.55x scale jump that
 * would smear a figure this detailed */
.markdot {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  animation: markbeat 1.9s infinite;
}
@keyframes markbeat {
  0%, 100% { opacity: 1; transform: scale(1); }
  14%      { opacity: .72; transform: scale(1.09); }
  28%      { opacity: 1; transform: scale(1); }
  42%      { opacity: .86; transform: scale(1.05); }
}

/* per-habitat glyph — same law, different organism */
.hglyph {
  display: block;
  margin-top: 30px;
  opacity: .92;
}
.navlinks {
  display: flex;
  gap: 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--track-nav);
  color: var(--mut);
  overflow-x: auto;
  scrollbar-width: none;
}
.navlinks::-webkit-scrollbar { display: none; }
.navlinks a { white-space: nowrap; }
.navlinks a:hover,
.navlinks a[aria-current="page"] { color: var(--alive); }

/* Phones: the links fold into a menu. pulse.js adds .navjs; without script the row scrolls. */
.navtoggle { display: none; }
@media (max-width: 640px) {
  nav.navjs .navtoggle {
    display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; margin-right: -4px;
    font: 11px var(--mono); letter-spacing: var(--track-nav); color: var(--ink);
    background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  }
  nav.navjs .navtoggle::before {
    content: ""; width: 14px; height: 6px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transition: transform 0.2s;
  }
  nav.navjs.open .navtoggle { color: var(--alive); border-color: var(--alive2); }
  nav.navjs.open .navtoggle::before { transform: scaleX(0.6); }
  nav.navjs .navlinks { display: none; }
  nav.navjs.open .navlinks {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0;
    padding: 4px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line);
    font-size: 14px; overflow: visible; box-shadow: 0 24px 48px rgba(20, 30, 50, 0.14);
  }
  nav.navjs.open .navlinks a { padding: 16px 2px; border-bottom: 1px solid var(--line); color: var(--ink); }
  nav.navjs.open .navlinks a:last-child { border-bottom: 0; }
  nav.navjs.open .navlinks a[aria-current="page"] { color: var(--alive); }
}

@keyframes beat {
  0%, 100% { transform: scale(1); opacity: 1; }
  14% { transform: scale(1.55); opacity: 0.75; }
  28% { transform: scale(1); opacity: 1; }
  42% { transform: scale(1.35); opacity: 0.85; }
}

.hero {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 84px 0 56px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.62) 46%, rgba(255, 255, 255, 0.3) 100%),
    url("/assets/bg-hero.svg") center / cover no-repeat var(--bg);
}
.hero .wrap { position: relative; z-index: 2; }
.breath {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(43, 76, 155, 0.12), rgba(43, 76, 155, 0) 62%);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.86); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: #8a5a10;
}
.h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 14ch;
  margin-top: 14px;
}
.h1 em {
  font-style: normal;
  color: var(--alive);
}
.hero p.sub {
  margin-top: 22px;
  font-size: clamp(16px, 2vw, 21px);
  color: var(--ink);
  max-width: 46ch;
}
.herometa {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: var(--track-nav);
  color: var(--faint);
}
.herometa span { display: inline-flex; align-items: center; gap: 9px; }
.herometa i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hair);
  display: inline-block;
}
.herometa i.on { background: var(--alive); box-shadow: none; }
.scrollcue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--track-kicker);
  color: var(--faint);
  z-index: 2;
}

section {
  padding: 62px 0;
  border-top: 1px solid var(--line);
  position: relative;
}
section.tight { padding: 48px 0; }
h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  margin: 14px 0 10px;
}
h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.lead {
  color: var(--mut);
  max-width: 62ch;
  font-size: 17px;
}

/* ---- status strip ---- */
.strip {
  display: flex;
  flex-wrap: wrap;
  margin-top: 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
}
.strip div {
  flex: 1 1 200px;
  padding: 20px 22px;
  border-right: 1px solid var(--line);
}
.strip div:last-child { border-right: 0; }
.strip .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}
.strip .v {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
}
.strip .v.on { color: var(--alive); }

/* ---- generic grids and cards ---- */
.grid {
  display: grid;
  gap: 18px;
  margin-top: 38px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid.two { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 26px 24px;
}
.card .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  color: var(--alive2);
  margin-bottom: 12px;
}
.card p {
  color: var(--mut);
  font-size: 15px;
}
a.card {
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
a.card:hover {
  border-color: var(--alive2);
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(43, 76, 155, 0.09);
}
a.card:hover h3 { color: var(--alive); }
.cardmore {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  color: var(--faint);
}
a.card:hover .cardmore { color: var(--alive); }

/* ---- editorial two-column rows ---- */
.rows { margin-top: 34px; border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.row .rk {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alive2);
  padding-top: 3px;
}
.row p { color: var(--mut); font-size: 16px; max-width: 62ch; }
.row p + p { margin-top: 10px; }

/* ---- disclosure columns ---- */
.disc {
  display: grid;
  gap: 18px;
  margin-top: 36px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.disc .col {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
  background: var(--card);
}
.disc .col.sealed { border-color: rgba(183, 121, 31, 0.28); }
.disc h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--alive2);
  margin-bottom: 16px;
  font-weight: 400;
}
.disc .col.sealed h4 { color: var(--gold); }
.disc ul { list-style: none; }
.disc li {
  color: var(--mut);
  font-size: 14.5px;
  padding: 7px 0 7px 20px;
  position: relative;
}
.disc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 7px;
  height: 1px;
  background: var(--hair);
}
.disc .col.sealed li::before { background: var(--gold); opacity: 0.5; }

/* ---- habitat atlas ---- */
.tree {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: radial-gradient(800px 300px at 20% 0%, rgba(43, 76, 155, 0.05), transparent), var(--card);
  padding: 30px 26px;
}
.node {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg2);
  margin: 6px 8px 6px 0;
  color: var(--ink);
}
.node .s {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hair);
  flex: 0 0 auto;
}
.node.build {
  border-color: var(--alive2);
  box-shadow: 0 0 22px rgba(43, 76, 155, 0.14);
}
.node.build .s {
  background: var(--alive);
  box-shadow: none;
  animation: beat 2s infinite;
}
a.node:hover { border-color: var(--alive2); color: var(--alive); }
.node a { color: inherit; }
.node a:hover { color: var(--alive); }
.branch {
  padding-left: 26px;
  border-left: 1px solid var(--line);
  margin: 8px 0 8px 14px;
}
.treelabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  color: var(--alive2);
  text-transform: uppercase;
  margin: 18px 0 6px;
}
.treenote {
  color: var(--faint);
  font-size: 13px;
  margin: 2px 0 4px;
  max-width: 70ch;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hair);
  display: inline-block;
}
.legend i.on { background: var(--alive); box-shadow: none; }

/* ---- receptor ---- */
.receptor {
  margin-top: 38px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.86)),
    url("/assets/bg-wash-1.svg") center / cover no-repeat var(--card);
  padding: 40px 34px;
}
.receptor .q {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  max-width: 22ch;
  margin-bottom: 16px;
}
.receptor p { color: var(--mut); max-width: 60ch; font-size: 16px; }
.notice {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13px;
  max-width: 74ch;
  line-height: 1.75;
}

.page {
  padding: 92px 0 64px;
  flex: 1;
}
.page .h1 { font-size: clamp(32px, 5vw, 56px); max-width: 20ch; }
.page p {
  color: var(--mut);
  max-width: 62ch;
  margin: 0 0 1rem;
  font-size: 17px;
}
.page p.lede {
  color: var(--ink);
  font-size: clamp(16px, 2vw, 21px);
  margin: 18px 0 16px;
  max-width: 58ch;
}

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: var(--track-nav);
  padding: 15px 34px;
  border: 1px solid var(--alive2);
  border-radius: 999px;
  color: var(--alive);
  margin-top: 12px;
  transition: 0.3s;
}
.btn:hover {
  background: var(--alive);
  color: #ffffff;
  box-shadow: 0 0 30px rgba(43, 76, 155, 0.35);
}
.btn.ghost { border-color: var(--line); color: var(--mut); }
.btn.ghost:hover {
  background: transparent;
  border-color: var(--alive2);
  color: var(--alive);
  box-shadow: none;
}
.btnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

footer {
  padding: 56px 0 64px;
  border-top: 0;
  background: #13244f;
  color: rgba(246, 244, 238, 0.75);
  font-family: var(--mono);
  font-size: 11.5px;
  margin-top: auto;
}
footer .cols {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 8px;
}
footer .cols h5 {
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--alive2);
  font-weight: 400;
  margin-bottom: 12px;
}
footer .cols a,
footer .cols p {
  display: block;
  color: var(--mut);
  margin-bottom: 7px;
  max-width: 34ch;
  line-height: 1.7;
}
footer .cols a:hover { color: var(--alive); }
footer .doc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-bottom: 18px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
footer .doc a,
footer .doc span { color: rgba(246, 244, 238, 0.8); }
footer .doc a:hover { color: #e8d6a3; }

/* ---- signal instrument ---- */
.instrument {
  position: relative;
  margin-top: 46px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(125,138,151,0.05), transparent 34%),
    radial-gradient(900px 220px at 86% 50%, rgba(43, 76, 155, 0.055), transparent 70%);
}
.instrumentbody {
  display: grid;
  grid-template-columns: 178px 1fr;
}
.instrument canvas {
  display: block;
  width: 100%;
  height: 360px;
  touch-action: none;
  cursor: crosshair;
}
.sources {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.src {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--mut);
  text-align: left;
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}
.src:last-child { border-bottom: 0; }
.src:hover, .src.on { color: var(--alive); background: rgba(43, 76, 155, 0.045); }
.src.pinned { color: var(--alive); background: rgba(43, 76, 155, 0.08); }
.src:focus-visible { outline: 1px solid var(--alive2); outline-offset: -3px; }
.src .sm {
  display: block;
  height: 2px;
  background: rgba(213, 217, 224, 0.7);
  overflow: hidden;
}
.src .sm i {
  display: block;
  height: 100%;
  background: var(--alive);
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 8px rgba(43, 76, 155, 0.6);
}
.stages {
  display: grid;
  grid-template-columns: 178px 1fr 1fr 1fr;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.stages span {
  padding: 13px 0 14px;
  color: var(--faint);
  border-right: 1px solid var(--line);
  text-align: center;
}
.stages span:last-child { border-right: 0; color: var(--alive2); }
.stages span:first-child { text-align: left; padding-left: 18px; }
.instrumenthint {
  position: absolute;
  right: 16px;
  top: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: var(--track-label);
  color: var(--faint);
  pointer-events: none;
}

@media (max-width: 820px) {
  .instrumentbody { grid-template-columns: 116px 1fr; }
  .instrument canvas { height: 270px; }
  .src { padding: 0 12px; font-size: 9px; letter-spacing: var(--track-nav); }
  .stages { grid-template-columns: 116px 1fr 1fr 1fr; font-size: 8px; letter-spacing: var(--track-nav); }
  .stages span { padding: 11px 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .instrumenthint { display: none; }
}

/* ---- opening statement ---- */
.statement {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3.5vw, 40px);
  line-height: 1.28;
  letter-spacing: -0.008em;
  max-width: 22ch;
  color: var(--ink);
}
.statement em { font-style: normal; color: var(--alive); }
.statementgrid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: start;
}
.statementgrid p {
  color: var(--mut);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 52ch;
}
.statementgrid p + p { margin-top: 16px; }

/* ---- habitat matrix ---- */
.matrix {
  display: grid;
  /* five groups: explicit counts so none is orphaned on a row of its own —
   * auto-fit at 240px min fits only four in the 1124px wrap, leaving Story
   * alone beside three empty cells */
  grid-template-columns: repeat(3, 1fr);
  gap: 0 44px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}
.matrix col-x { display: none; }
.matrix .mcol { padding-top: 26px; }
.matrix h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--alive2);
  font-weight: 400;
  margin-bottom: 4px;
}
.matrix .mnote {
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: 16px;
  min-height: 2.6em;
}
.matrix a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  padding: 10px 0;
  border-top: 1px solid var(--line);
  transition: color 0.22s, padding-left 0.22s;
}
.matrix a:hover { color: var(--alive); padding-left: 6px; }
.matrix a .s {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hair);
  flex: 0 0 auto;
  transition: background 0.22s;
}
.matrix a:hover .s { background: var(--alive); box-shadow: none; }
.matrix a.principal .s {
  background: var(--alive);
  box-shadow: none;
  animation: beat 2s infinite;
}

@media (max-width: 820px) {
  .statementgrid { grid-template-columns: 1fr; gap: 26px; }
  .statement { max-width: none; }
  .matrix { gap: 0 24px; }
}

/* ---- spec columns: scope / delivery ---- */
.spec {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  border-top: 1px solid var(--line);
}
.spec section {
  padding: 24px 36px 26px 0;
  border-bottom: 1px solid var(--line);
}
.spec h2.sh, .spec h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--alive2);
  margin: 0 0 18px;
}
.spec ul { list-style: none; }
.spec li {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.55;
  padding: 9px 0 9px 22px;
  position: relative;
}
.spec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 9px;
  height: 1px;
  background: var(--faint);
}

/* ---- index lines ---- */
.grouplede {
  color: var(--faint);
  font-size: 14px;
  margin-top: 10px;
}
.lines { margin-top: 22px; border-top: 1px solid var(--line); }
.line {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: 0.25s;
}
.line:hover { background: rgba(43, 76, 155, 0.03); }
.line .lt {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  transition: color 0.25s;
}
.line:hover .lt { color: var(--alive); }
.line .ld {
  color: var(--mut);
  font-size: 15px;
  max-width: 68ch;
}

/* ---- enquiry form ---- */
.form {
  margin-top: 36px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.9)),
    url("/assets/bg-wash-2.svg") center / cover no-repeat var(--card);
  padding: 38px 34px;
}
.fgrid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--alive2);
  margin-bottom: 9px;
}
.field .hint {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
  margin: 8px 0 0;
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s;
  appearance: none;
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.65; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select option { background: var(--bg2); color: var(--ink); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--alive2);
  box-shadow: 0 0 0 3px rgba(43, 76, 155, 0.1);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }
.field.bad input,
.field.bad select,
.field.bad textarea { border-color: var(--t-neg); }
.err {
  color: var(--t-neg);
  font-size: 12.5px;
  margin-top: 7px;
  display: none;
}
.field.bad .err { display: block; }
.formfoot {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: center;
  justify-content: space-between;
}
.formfoot .fine {
  color: var(--faint);
  font-size: 12.5px;
  max-width: 52ch;
  line-height: 1.7;
}
button.btn {
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
}
.sent {
  display: none;
  border: 1px solid var(--alive2);
  border-radius: 12px;
  background: rgba(43, 76, 155, 0.05);
  padding: 24px 22px;
  margin-top: 24px;
}
.sent.show { display: block; }
.sent h3 { color: var(--alive); }
.sent p { color: var(--mut); font-size: 15px; max-width: 62ch; }
.sent textarea {
  width: 100%;
  min-height: 190px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px;
  resize: vertical;
}

/* ---- page graphics: same golden-angle law, larger canvas ---- */
.banner {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.flow {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.gmark {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  opacity: .95;
}
.mcol h4 { display: flex; align-items: center; gap: 12px; }
.mcol h4 .gmark { margin-bottom: 0; width: 30px; height: 30px; }

@media (max-width: 820px) {
  .banner, .flow { margin-top: 26px; border-radius: 10px; }
}

/* ---- narrow viewports: collapse every fixed-track grid to one column ----
 * Figures switch to their portrait rendition at 1024px via <picture>, so a
 * wide figure is never asked to render in a column too small for its type. */
@media (max-width: 1023px) {
  .banner, .flow { border-radius: 12px; }
}
@media (max-width: 820px) {
  .line { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .line .ld { max-width: none; }
  .grid, .grid.two, .disc, .spec, .matrix, .fgrid,
  .statementgrid { grid-template-columns: 1fr; }
  .spec section { padding-right: 0; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .page p, .page p.lede, .lead, .card p, .row p { max-width: none; }
  .h1 { max-width: none; }
  .receptor { padding: 26px 20px; }
  .tree { padding: 22px 18px; }
  footer .cols a, footer .cols p { max-width: none; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .node { font-size: 12px; padding: 8px 12px; }
  .strip div { flex-basis: 100%; }
}

/* ---- page head: text and its figure side by side, not stacked ----
 * The single-column stack left ~40% of every screen empty and pushed
 * everything below the fold. */
.pagehead {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 46px;
  align-items: center;
}
.pagehead .h1 { max-width: 100%; }
.pagehead .lede { margin-bottom: 0; }
.pagehead picture { display: block; }
.pagehead .banner { margin-top: 0; }
@media (max-width: 900px) {
  .pagehead { grid-template-columns: 1fr; gap: 24px; }
  .pagehead .banner { margin-top: 6px; }
}

.divider {
  display: block;
  width: 100%;
  height: auto;
  opacity: .85;
}

/* ---- habitat directory thumbnails + index-page wash panels ---- */
.line { grid-template-columns: 148px 210px 1fr; align-items: center; }
.lthumb {
  display: block;
  width: 148px;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  opacity: .92;
  transition: opacity .25s;
}
.line:hover .lthumb { opacity: 1; }

.spec.washpanel {
  border: 1px solid var(--line);
  border-radius: 16px;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.92)),
    url("/assets/bg-wash-2.svg") center / cover no-repeat var(--card);
  padding: 8px 30px;
}
.spec.washpanel section { padding-left: 4px; }

@media (max-width: 820px) {
  .line { grid-template-columns: 1fr; }
  .lthumb { width: 100%; height: 120px; }
}

@media (min-width: 1180px) {
  .matrix { grid-template-columns: repeat(5, 1fr); }
}

/* ---- the signal instrument, touch layout ----
 * The component works by pointerenter (focus) and click (pin) — both fire on
 * tap — so below the figure breakpoint it restructures instead of hiding:
 * sources become a wrap row above the canvas, the stage bar goes 2x2. */
.hint-touch { display: none; }
@media (max-width: 1023px) {
  .hint-pointer { display: none; }
  .hint-touch { display: inline; }
  .instrumentbody { grid-template-columns: 1fr; }
  .sources {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .src {
    flex: 1 1 auto;
    padding: 12px 14px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    text-align: center;
  }
  .src:last-child { border-right: 0; }
  .instrument canvas { height: 280px; }
  .stages { grid-template-columns: 1fr 1fr; }
  .stages span { border-right: 0; border-top: 1px solid var(--line); }
  .stages span:first-child { text-align: center; padding-left: 0; }
  .instrumenthint { position: static; display: block; padding: 12px 16px 0; text-align: right; }
}

/* widow control on display settings; balanced rag on ledes */
.h1, h2, .statement, .receptor .q { text-wrap: balance; }
.page p.lede, .hero p.sub, .lead, .line .ld, .notice { text-wrap: pretty; }

footer .sig { letter-spacing: var(--track-nav); color: rgba(246, 244, 238, 0.55); }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .navlinks { gap: 16px; }
  .breath { width: 420px; height: 420px; }
  .row { grid-template-columns: 1fr; gap: 10px; }
  .strip div { border-right: 0; border-bottom: 1px solid var(--line); }
  .strip div:last-child { border-bottom: 0; }
  section { padding: 72px 0; }
  .receptor { padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .dot, .markdot, .node.build .s, .breath, .reveal { animation: none; transition: none; }
  .breath { opacity: 0.5; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- live planet (home): public sources drawn where their events happen ---- */
.planet { margin-top: 46px; position: relative; z-index: 2; }
.planethead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.planetlabel, .planetclock {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--alive2);
}
.planetclock { color: var(--mut); white-space: nowrap; }
.livedot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alive);
  margin-right: 10px;
  vertical-align: 1px;
  box-shadow: 0 0 10px rgba(43, 76, 155, 0.7);
  animation: livepulse 2.4s ease-in-out infinite;
}
.herogrid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.herogrid .h1 { font-size: clamp(38px, 4.9vw, 74px); }
.planetstage { position: relative; min-width: 0; }
.planetstage canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 560px;
  touch-action: none;
  cursor: grab;
}
.planetstage canvas:active { cursor: grabbing; }
.planetfocus {
  min-height: 1.5em;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  text-align: center;
}
.stream {
  list-style: none;
  columns: 2 380px;
  column-gap: 44px;
  padding-top: 6px;
  border-bottom: 1px solid var(--line);
}
.stream li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.stream .srow {
  display: grid;
  grid-template-columns: 74px 104px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.45;
  transition: background 0.25s;
}
.stream .srow:hover { background: rgba(43, 76, 155, 0.04); }
.stream .srow:hover .tl b { color: var(--alive); }
.stream .tt, .tape .tt {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mut);
  white-space: nowrap;
  padding-top: 1px;
}
.stream .tg {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alive2);
  padding-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stream .tl, .tape .tl { color: var(--mut); overflow-wrap: anywhere; min-width: 0; }
.stream .tl b, .tape .tl b { color: var(--ink); font-weight: 500; margin-right: 6px; }
.planetcount {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  padding: 18px 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--mut);
}
.planetcount b {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  margin-right: 8px;
  vertical-align: -3px;
}
.planetnote { margin-top: 8px; color: var(--mut); font-size: 13px; }

/* ---- live panels (habitat, sub-habitat and source pages) ---- */
.livegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px;
  margin-top: 22px;
}
.live {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(43, 76, 155, 0.035), transparent 40%), var(--bg);
  padding: 20px 22px 18px;
  min-width: 0;
}
.livetop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.livet { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--ink); }
.livest {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--alive2);
  white-space: nowrap;
}
.livest::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alive);
  margin-right: 8px;
  vertical-align: 1px;
  animation: livepulse 2.4s ease-in-out infinite;
}
.live.stale .livest { color: var(--gold); }
.live.stale .livest::before { background: var(--gold); animation: none; }
.livehead { color: var(--ink); font-size: 14.5px; line-height: 1.5; margin-top: 10px; }
.tape { list-style: none; margin-top: 14px; border-top: 1px solid var(--line); }
.tape li {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}
.tape li.none { display: block; color: var(--mut); }
.livefoot { margin-top: 12px; font-size: 12px; color: var(--mut); line-height: 1.5; }
.liveage { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; }

/* ---- catalogue: sources ledger and its pages ---- */
.pagehead.solo { grid-template-columns: 1fr; }
.pagehead.solo .h1 { max-width: 22ch; overflow-wrap: anywhere; }
.pagehead.solo .lede { max-width: 72ch; overflow-wrap: anywhere; }
.pagehead.solo ~ .wrap .spec li, .pagehead.solo ~ .wrap .node { overflow-wrap: anywhere; }
.catnote { color: var(--mut); font-size: 15px; margin-top: 10px; max-width: 72ch; }
.catlines { margin-top: 22px; border-top: 1px solid var(--line); }
.catline {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}
.catline:hover { background: rgba(43, 76, 155, 0.03); }
.catline .ct { font-family: var(--serif); font-size: 18px; color: var(--ink); overflow-wrap: anywhere; transition: color 0.25s; }
.catline:hover .ct { color: var(--alive); }
.catline .cd { color: var(--mut); font-size: 14.5px; max-width: 72ch; overflow-wrap: anywhere; }
.catline .cn {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alive2);
}

/* ---- the rabbit hole: breadcrumbs, layers, directories ---- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mut);
}
.crumbs a, .crumbs span { overflow-wrap: anywhere; }
.crumbs a:hover { color: var(--alive); }
.crumbs > * + *::before { content: "/"; margin: 0 10px; color: var(--hair); }
.crumbs span[aria-current] { color: var(--ink); }
.lstate {
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mut);
  font-size: 10px;
  letter-spacing: 0.14em;
}
.spec.layers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.spec li a, .livet a { color: inherit; border-bottom: 1px solid var(--line); transition: color 0.25s, border-color 0.25s; }
.spec li a:hover, .livet a:hover { color: var(--alive); border-color: var(--alive); }
.planetcount a { color: inherit; transition: color 0.25s; }
.planetcount a:hover, .planetcount a:hover b { color: var(--alive); }
.planetstage.solo { max-width: 620px; margin: 0 auto; }
.srcgroup { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 34px 0 10px; }
.srcgroup a:hover { color: var(--alive); }
.srcindex { list-style: none; columns: 2 360px; column-gap: 40px; border-top: 1px solid var(--line); }
.srcindex li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; overflow-wrap: anywhere; }
.srcindex li a { color: var(--ink); transition: color 0.25s; }
.srcindex li a:hover { color: var(--alive); }
.srcindex li span { color: var(--mut); font-size: 13px; margin-left: 6px; }

@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (max-width: 900px) {
  .herogrid { grid-template-columns: 1fr; gap: 28px; }
  .stream .srow { grid-template-columns: 64px 92px minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 700px) {
  .catline { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 480px) {
  .stream .srow { grid-template-columns: 58px minmax(0, 1fr); }
  .stream .tg { display: none; }
  .planetcount { gap: 8px 22px; }
  .tape li { grid-template-columns: 70px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .livedot, .livest::before { animation: none; }
}

/* ---- language switch: the same page in the other language, always in the nav ---- */
.navlinks a.langsw {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--mut);
}
.navlinks a.langsw:hover { color: var(--alive); border-color: var(--alive2); }

/* ---- terminal: the live console at the top of each page (terminal.js) ----
 * After the Apex Seat: dark glass, monospace, neon figures. Its palette is its
 * own; the page around it keeps the house tokens. */
.term {
  --t-bg: #ffffff;
  --t-panel: #f3f5f8;
  --t-line: #e3e6eb;
  --t-grid: rgba(22, 58, 122, 0.12);
  --t-text: #111418;
  --t-soft: #353d49;
  --t-dim: #5f6775;
  --t-neon: #163a7a;
  --t-pos: #0b7a42;
  --t-neg: #c8323c;
  --t-amber: #8a5a10;
  --t-violet: #4f6fa8;
  --t-land: #e9ecf1;
  --t-water: #f7f9fc;
  --t-coast: rgba(22, 58, 122, 0.4);
  --t-face-a: #f3f5f8;
  --t-face-b: #e6eaf0;
  --t-scheme: light;
  position: relative;
  border: 1px solid var(--t-line);
  border-radius: 14px;
  background: radial-gradient(900px 420px at 18% -12%, var(--t-face-a) 0%, var(--t-bg) 60%);
  color: var(--t-text);
  font: 13px/1.4 var(--mono);
  padding: 0 0 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(43, 76, 155, 0.04), 0 30px 90px -50px rgba(43, 76, 155, 0.35);
}
.term p { max-width: none; margin: 0; font-size: inherit; color: inherit; }
.term h2 { text-wrap: wrap; }
.termwrap + .termwrap { margin-top: 28px; }
.page > .termwrap:first-child { margin-top: 0; }
.crumbs + .termwrap, .wrap + .termwrap { margin-top: 8px; }
.pagehead.underterm { margin-top: 40px; }
.termwrap + .pagehead { margin-top: 48px; }
.pagehead.underterm .lede { margin-top: 12px; }

.termbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--t-line);
  background: rgba(255, 255, 255, 0.97);
}
.termmark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-neon);
  box-shadow: none;
  animation: livepulse 2.4s ease-in-out infinite;
}
.term .termt {
  font: 600 15px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-neon);
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.termt a { color: inherit; }
.termt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ttag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  color: var(--t-dim);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ttag.live { color: var(--t-pos); }
.ttag.stale, .ttag.wait { color: var(--t-amber); }
.ttag.down { color: var(--t-neg); }
.ttag.cat { color: var(--t-violet); }
.ttag.board { color: var(--t-neon); }
.termclock { margin-left: auto; color: var(--t-dim); font-variant-numeric: tabular-nums; }
.term .termreq {
  padding: 8px 16px;
  color: var(--t-dim);
  font-size: 12px;
  border-bottom: 1px dashed var(--line);
  overflow-wrap: anywhere;
}
.termreq .tq { color: var(--t-pos); font-weight: 600; margin-right: 4px; }
.termreq .tp { color: var(--t-text); }
.term .thead { padding: 12px 16px 0; color: var(--t-text); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

.tkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 16px; }
.tkpi {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 10px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.tkpi::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 40px rgba(43, 76, 155, 0.06); pointer-events: none; }
.tkpi .l { color: var(--t-dim); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkpi .v { font-size: 24px; margin-top: 4px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--t-neon); overflow-wrap: anywhere; }
.tkpi .s { color: var(--t-dim); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
.term[data-term="record"] .tkpi .v { font-size: 16px; line-height: 1.3; }
.tspark { display: block; width: 100%; height: 22px; margin-top: 6px; overflow: visible; }
.tspark polyline { fill: none; stroke: var(--t-neon); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.85; }
.term .trec { padding: 0 16px 10px; color: var(--t-dim); font-size: 11px; overflow-wrap: anywhere; }
.term .trec:empty { display: none; }

.tgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; padding: 0 16px; }
.tpanel { background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 12px; padding: 12px; min-width: 0; }
.tpanel.wide { margin: 0 16px 12px; }
.term .tpanel h2 {
  margin: 0 0 8px;
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-dim);
}
.term .tline { color: var(--t-text); font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.term .tempty { color: var(--t-dim); padding: 8px 0; list-style: none; }

.tbar { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; }
.tbar .bl { color: var(--t-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar .bt { height: 8px; background: var(--t-line); border-radius: 4px; overflow: hidden; }
.tbar .bt i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--t-neon), #5b7bb5);
  transition: width 0.6s ease;
}
.tbar .bv { color: var(--t-neon); font-variant-numeric: tabular-nums; }
.tcols { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 6px; }
.tcols i { flex: 1; min-height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--t-neon), rgba(43, 76, 155, 0.2)); }
.tcolx { display: flex; justify-content: space-between; color: var(--t-dim); font-size: 11px; margin-top: 4px; }

.ttape { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.ttape .te {
  display: grid;
  grid-template-columns: 62px minmax(0, 10em) minmax(0, 1fr);
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
  font-size: 12px;
}
.ttape .te.fresh { animation: tin 0.9s ease; }
@keyframes tin { from { background: rgba(43, 76, 155, 0.16); } to { background: transparent; } }
.ttape .tt { color: var(--t-dim); font-variant-numeric: tabular-nums; }
.ttape .tl { color: var(--t-amber); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttape .td { color: var(--t-text); overflow-wrap: anywhere; }

.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { padding: 2px 8px; border: 1px solid var(--t-line); border-radius: 6px; background: var(--t-panel); color: var(--t-text); font-size: 11px; overflow-wrap: anywhere; }
.tfacts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--t-dim); font-size: 11px; }
.tfacts b { color: var(--t-text); font-weight: 500; margin-right: 4px; }
.texcerpt, .traw pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--t-soft);
  font: 11.5px/1.5 var(--mono);
  max-height: 320px;
  overflow: auto;
}

.trows { list-style: none; margin: 0; padding: 0; }
.trow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.4fr);
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
  font-size: 12px;
}
.trow:last-child { border-bottom: 0; }
.trow .tsn { color: var(--t-text); overflow-wrap: anywhere; transition: color 0.2s; }
.trow a.tsn:hover { color: var(--t-neon); }
.trow .tso { color: var(--t-dim); overflow-wrap: anywhere; }
.trow .tsd { color: var(--t-soft); overflow-wrap: anywhere; }
.trow .tst { color: var(--t-amber); overflow-wrap: anywhere; }
.trow .tst.ok { color: var(--t-pos); }
.trow .tst.down { color: var(--t-neg); }
.trow .tst.cat { color: var(--t-violet); }

.traw { margin: 12px 16px 0; border: 1px solid var(--t-line); border-radius: 10px; background: var(--t-panel); }
.traw summary { cursor: pointer; padding: 8px 12px; color: var(--t-dim); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.traw summary:hover { color: var(--t-neon); }
.traw pre { padding: 0 12px 12px; }
.term .tfoot { padding: 12px 16px 0; color: var(--t-dim); font-size: 11px; overflow-wrap: anywhere; }

/* ---- context: what each thing is, who needs it, what can be built ---- */
.page p.lede.ctxlede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; max-width: 68ch; }
.page p.ctxp { color: var(--ink); font-size: clamp(17px, 1.8vw, 20px); line-height: 1.65; max-width: 68ch; margin: 16px 0 0; }
.spec.ctxgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.page .spec p.ctxs { color: var(--ink); font-size: 15.5px; line-height: 1.65; max-width: 60ch; margin: 0; }
.ctxcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: 18px; }
.ctxcard { border: 1px solid var(--line); background: var(--card); border-radius: 6px; padding: 16px 18px; min-width: 0; }
.ctxcard h3 { font: 600 15px/1.35 var(--sans); color: var(--ink); margin: 0 0 6px; overflow-wrap: anywhere; }
.page .ctxcard p { font-size: 14.5px; color: var(--mut); line-height: 1.6; max-width: none; margin: 0; }
.ctxlinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ctxlinks a {
  font: 11px/1.4 var(--mono);
  color: var(--alive);
  border: 1px solid rgba(43, 76, 155, 0.25);
  border-radius: 999px;
  padding: 2px 9px;
  overflow-wrap: anywhere;
  transition: border-color 0.2s;
}
.ctxlinks a:hover { border-color: var(--alive); }
/* The home page's intelligence engine: eight capabilities, four across on wide screens. */
.enginegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
@media (max-width: 1100px) { .enginegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .enginegrid { grid-template-columns: minmax(0, 1fr); } }
.ecard { position: relative; padding: 18px 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ecard::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--kc, var(--alive)); }
.page .ecard p, .ecard p { font-size: 14.5px; line-height: 1.6; color: var(--mut); margin: 0; max-width: none; }
.k-data { --kc: #3a63c4; }
.k-sandbox { --kc: var(--t-dim); }
.k-agent { --kc: #b8347a; }
.epow { margin-top: 26px; font: 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--alive); }

/* Models, tested theories, simulations and engines: two across, the engine the full width. */
.ctxcards.models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .ctxcards.models { grid-template-columns: minmax(0, 1fr); } }
.ctxcard.model { position: relative; padding: 18px 20px 20px; border-color: var(--line); }
.ctxcard.model::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--kc, var(--alive)); opacity: 0.85; }
.mkind { font: 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--kc, var(--alive)); margin-bottom: 9px; }
.k-setup { --kc: var(--t-neon); }
.k-arbitrage { --kc: var(--t-amber); }
.k-theory { --kc: var(--t-violet); }
.k-simulation { --kc: var(--t-pos); }
.k-engine { --kc: var(--alive); }
.ctxcard.model.k-engine { grid-column: 1 / -1; border-color: rgba(43, 76, 155, 0.32); background: linear-gradient(135deg, rgba(43, 76, 155, 0.07), rgba(255, 255, 255, 0) 60%), var(--card); }
.mpow { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font: 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--alive); }
.ctxq { list-style: none; margin-top: 16px; display: grid; gap: 10px; max-width: 72ch; }
.ctxq li { position: relative; padding-left: 26px; color: var(--ink); font-size: 16.5px; line-height: 1.55; }
.ctxq li::before { content: "?"; position: absolute; left: 0; top: 0; font-family: var(--mono); color: var(--alive); }

@media (max-width: 900px) {
  .tgrid { grid-template-columns: minmax(0, 1fr); }
  .tkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; }
  .trow .tsd { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .term { border-radius: 10px; }
  .termbar, .term .termreq, .term .thead, .term .tfoot { padding-left: 12px; padding-right: 12px; }
  .termclock { margin-left: 0; }
  .tkpis { padding: 10px 12px; gap: 8px; }
  .tkpi { padding: 9px 10px; }
  .tkpi .v { font-size: 19px; }
  .tgrid { padding: 0 12px; }
  .tpanel.wide { margin: 0 12px 10px; }
  .traw { margin: 10px 12px 0; }
  .tbar { grid-template-columns: minmax(0, 8em) minmax(0, 1fr) auto; }
  .ttape .te { grid-template-columns: 48px minmax(0, 1fr); }
  .ttape .td { grid-column: 1 / -1; }
  .trow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .termmark, .ttape .te.fresh { animation: none; }
  .tbar .bt i { transition: none; }
}

/* ---- the home page: a short hero, then the instruments, each section a plain band ---- */
.ehero { padding: 176px 0 64px; border-top: 0; }
.eherocopy { max-width: 820px; }
.eherocopy .kicker { margin-bottom: 18px; }
.eherocopy .h1 { font-size: clamp(40px, 5.3vw, 76px); max-width: 100%; }
.eherocopy .sub { color: var(--ink); opacity: 0.88; max-width: 62ch; margin-top: 24px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; }
.eherocopy .btnrow { margin-top: 30px; }
.edeck { padding: 96px 0 64px; border-top: 0; }
.edeck + .edeck { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 128px; }
@media (max-width: 959px) { .edeck { padding: 64px 0 40px; } .edeck + .edeck { margin-top: 40px; padding-top: 80px; } }
.edmore { margin-top: 30px; font: 12px var(--mono); letter-spacing: 0.06em; color: var(--mut); }
.edmore a { color: var(--alive); border-bottom: 1px solid rgba(43, 76, 155, 0.35); }
.edmore a:hover { border-bottom-color: var(--alive); }
.eline { list-style: none; margin: 8px 0 0; padding: 0; max-width: 760px; }
.eline li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; }
.eline li:last-child { border-bottom: 0; }
.eline b { color: var(--alive); font-weight: 600; margin-right: 6px; }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .doors { grid-template-columns: minmax(0, 1fr); } }
.door { display: flex; flex-direction: column; padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); transition: border-color 0.2s, transform 0.2s; }
.door:hover { border-color: var(--alive2); transform: translateY(-2px); }
.door .mkind { color: var(--alive); margin-bottom: 14px; }
.door h3 { font: 500 clamp(22px, 2.2vw, 28px)/1.2 var(--serif); margin: 0 0 12px; letter-spacing: -0.01em; }
.door p { color: var(--mut); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.door .instrument.mini { padding: 0; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--t-bg); overflow: hidden; flex: 1; }
.door .instrument.mini canvas { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; }
.door .instrument.mini .ireadout { display: none; }
.door .instrument.mini.table { border: 0; }
.door .instrument.mini .dtable table { font-size: 11.5px; }
.door .instrument.mini .dtable th, .door .instrument.mini .dtable td { padding: 6px 8px; }
.door .more { font: 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--alive); margin-top: auto; }
.door .more:hover { text-decoration: underline; }
.egroups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .egroups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .egroups { grid-template-columns: minmax(0, 1fr); } }
.egroups a { display: block; padding: 18px 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
.egroups a:hover { border-color: var(--alive2); }
.egroups .gmark { display: block; margin-bottom: 12px; }
.egroups .gpic { display: block; margin: -18px -18px 14px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px 6px 0 0; background: #13244f; }
.egroups .gpic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.egroups a:hover .gpic img { transform: scale(1.04); }
.egroups a { overflow: hidden; }
.egroups b { display: block; font: 600 16px/1.3 var(--sans); margin-bottom: 6px; }
.egroups span { display: block; color: var(--mut); font-size: 14px; line-height: 1.55; }
#mandate .statement { max-width: 760px; }
#mandate .notice { max-width: 64ch; margin-top: 28px; }
#mandate .btnrow { margin-top: 28px; }
.edhead { margin-bottom: 44px; }
.edhead > * { max-width: 780px; }
.edh { font-size: clamp(30px, 4.4vw, 58px); margin: 12px 0 16px; }
.page p.edp, .edp { color: var(--ink); opacity: 0.84; font-size: clamp(15px, 1.4vw, 18px); max-width: 64ch; line-height: 1.65; }
.edpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.edpair .termwrap, .edpair > .term { margin: 0; }
@media (max-width: 979px) { .edpair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 959px) { .ehero { padding: 120px 0 40px; } }

/* ---- instruments: radars, rings and curves on live readings (instruments.js) ---- */
.term .instrument { margin-top: 0; border: 0; background: none; }
.instframe { background: var(--t-bg, var(--t-bg)); }
.instrument { position: relative; padding: 8px 14px 4px; }
.term .instrument canvas { display: block; width: 100%; height: auto; max-height: none; touch-action: pan-y; }
.term .instrument.round canvas { width: min(100%, 78vh, 780px); aspect-ratio: 1 / 1; margin: 0 auto; }
.edpair .term .instrument.round canvas { width: min(100%, 64vh, 600px); }
.term .instrument.wide canvas { aspect-ratio: 16 / 8.5; min-height: 240px; }
.term .instrument.ifail canvas { opacity: 0.6; }
.itip {
  position: absolute; display: none; z-index: 5; pointer-events: none; min-width: 150px; max-width: 270px;
  padding: 8px 10px; border: 1px solid var(--t-line); border-radius: 8px; background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 30px rgba(20, 30, 50, 0.14); font: 11.5px/1.5 var(--mono); color: var(--t-text);
}
.itip b { display: block; color: var(--t-neon); font-weight: 600; margin-bottom: 2px; }
.itip span { display: block; color: var(--t-soft); }
.itip i { font-style: normal; }
.term .itip .up, .term .ireadout .up { color: var(--t-pos); }
.term .itip .down, .term .ireadout .down { color: var(--t-neg); }
.term .amb { color: var(--t-amber); }
.term .vio { color: var(--t-violet); }
.term .neon { color: var(--t-neon); }
.term .ireadout { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 2px 4px; font-size: 12px; color: var(--t-soft); }
.term .ireadout .dim { color: var(--t-dim); }
.ireadout b { font-weight: 600; }
.term .ireadout .key { white-space: nowrap; color: var(--t-dim); }
.term .ireadout .ln { display: inline-block; width: 16px; margin-right: 7px; vertical-align: middle; border-top: 2px solid var(--t-neon); }
.term .ireadout .ln.dash { border-top-style: dashed; border-top-color: var(--t-violet); }
.term .ireadout .ln.dot { border-top-style: dotted; border-top-color: var(--t-dim); }
.icities { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
.icities button {
  font: 11px var(--mono); letter-spacing: 0.06em; color: var(--t-dim); background: transparent;
  border: 1px solid var(--t-line); border-radius: 999px; padding: 4px 11px; cursor: pointer;
}
.icities button[aria-pressed="true"], .icities button:hover { color: var(--t-neon); border-color: rgba(43, 76, 155, 0.5); }
.term .tfoot a { color: var(--t-soft); border-bottom: 1px solid var(--t-line); }
.term .tfoot a:hover { color: var(--t-neon); }


/* ---- the home hero: a navy band with the mark; short lines, not paragraphs ---- */
.ehero { background: #13244f; color: #f6f4ee; margin-top: 0; padding: 150px 0 72px; position: relative; overflow: hidden; }
.ehero .herofilm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ehero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(19, 36, 79, 0.92) 0%, rgba(19, 36, 79, 0.6) 45%, rgba(19, 36, 79, 0.08) 100%); }
.ehero > .wrap { position: relative; z-index: 2; }
.ehero .heromark { position: absolute; z-index: 1; right: 4%; bottom: 8%; width: 220px; height: 220px; pointer-events: none; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .ehero .herofilm { display: none; } .ehero { background: #13244f url(/assets/media/film-poster.jpg) center / cover; } }
@media (max-width: 959px) { .ehero { padding: 110px 0 56px; } .ehero .heromark { display: none; } .ehero::before { background: linear-gradient(0deg, rgba(19, 36, 79, 0.95) 0%, rgba(19, 36, 79, 0.75) 60%, rgba(19, 36, 79, 0.45) 100%); } }
.ehero .kicker { color: #e8d6a3; }
.ehero .h1 { color: #f6f4ee; }
.ehero .h1 em { color: #e8d6a3; }
.hlines { list-style: none; margin: 26px 0 0; padding: 0; max-width: 620px; }
.hlines li { font: 500 clamp(17px, 1.7vw, 22px)/1.5 var(--serif); color: #f6f4ee; opacity: 0.92; padding: 4px 0; }
.hlines li:first-child { font-size: clamp(20px, 2vw, 26px); color: #e8d6a3; opacity: 1; }
.ehero .btn { border-color: #f6f4ee; color: #f6f4ee; }
.ehero .btn.ghost { border-color: rgba(246, 244, 238, 0.45); color: rgba(246, 244, 238, 0.85); }
.door ul { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.door li { padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.45; }
.door li:last-child { border-bottom: 0; }
#mandate .statement { line-height: 1.35; }


/* ---- habitat band: the habitat's own picture, its title on it ---- */
.hband { position: relative; background: #13244f; color: #f6f4ee; overflow: hidden; padding: 120px 0 56px; min-height: 380px; display: flex; align-items: flex-end; }
.hband .hbimg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hband::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(19, 36, 79, 0.92) 0%, rgba(19, 36, 79, 0.7) 42%, rgba(19, 36, 79, 0.15) 100%); }
.hband .wrap { position: relative; z-index: 2; width: 100%; }
.hband .kicker { color: #e8d6a3; }
.page .hband .h1, .hband .h1 { color: #f6f4ee; margin-top: 10px; }
.page .hband p.lede, .hband .lede { color: #f6f4ee; opacity: 0.9; max-width: 56ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; margin-top: 14px; }
.hband.nopic { min-height: 0; padding-top: 120px; }
.hband + .termwrap, .hband ~ .termwrap:first-of-type { margin-top: 40px; }
@media (max-width: 760px) { .hband { padding: 96px 0 36px; min-height: 300px; } .hband::before { background: linear-gradient(0deg, rgba(19, 36, 79, 0.94) 0%, rgba(19, 36, 79, 0.6) 60%, rgba(19, 36, 79, 0.25) 100%); } }

.hband .hbpics { position: absolute; inset: 0; z-index: 0; }
.hband .hbpics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: cpicfade 21s infinite; }
.hband .hbpics img:nth-child(2) { animation-delay: 7s; }
.hband .hbpics img:nth-child(3) { animation-delay: 14s; }
.hband .hbpics.n2 img { animation-name: cpicfade2; animation-duration: 14s; }
.hband .hbpics.n1 img { opacity: 1; animation: cpicdrift 21s ease-in-out infinite alternate; }
.hband .hbimg { animation: cpicdrift 24s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .hband .hbpics img, .hband .hbimg { animation: none; } .hband .hbpics img:first-child { opacity: 1; } }

/* ---- chewable cards: one sentence, the rest opens in place ---- */
details.ctxcard > summary { list-style: none; cursor: pointer; }
details.ctxcard > summary::-webkit-details-marker { display: none; }
details.ctxcard > summary p { margin: 0; }
details.ctxcard .open { display: inline-block; margin-top: 10px; font: 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--alive); }
details.ctxcard .open::before { content: "More +"; }
details.ctxcard[open] .open::before { content: "Less −"; }
.page details.ctxcard p.rest { margin: 10px 0 0; color: var(--mut); font-size: 14.5px; line-height: 1.6; }
details.ctxcard:hover { border-color: var(--alive2); }


/* ---- card pictures: three real views of the card's subject, crossfading slowly ---- */
.cpics { position: relative; display: block; margin: -18px -20px 16px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px 6px 0 0; background: #13244f; }
.ctxcard.model .cpics { margin: -18px -20px 16px; }
.cpics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: cpicfade 30s infinite; }
.cpics img:nth-child(1) { animation-delay: var(--d, 0s); }
.cpics img:nth-child(2) { animation-delay: calc(var(--d, 0s) + 10s); }
.cpics img:nth-child(3) { animation-delay: calc(var(--d, 0s) + 20s); }
.cpics.n1 img { opacity: 1; animation: cpicdrift 18s ease-in-out infinite alternate; }
.cpics.n2 img { animation-name: cpicfade2; animation-duration: 20s; }
@keyframes cpicfade { 0% { opacity: 0; transform: scale(1); } 6% { opacity: 1; } 33.3% { opacity: 1; } 39.3% { opacity: 0; transform: scale(1.03); } 100% { opacity: 0; } }
@keyframes cpicfade2 { 0% { opacity: 0; transform: scale(1); } 8% { opacity: 1; } 50% { opacity: 1; } 58% { opacity: 0; transform: scale(1.03); } 100% { opacity: 0; } }
/* off screen, pictures stand still (pulse.js marks what is in view) */
.io .cpics img, .io .hband .hbpics img { animation-play-state: paused; }
.cpics.inview img, .hband.inview .hbpics img { animation-play-state: running; }
@keyframes cpicdrift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .cpics img { animation: none; } .cpics img:first-child { opacity: 1; } }

/* ---- the data table kind (site/inst/table.js): figures first ---- */
.term .instrument.table { padding: 4px 0 4px; }
.dtable { width: 100%; overflow: hidden; }
.dtable table { width: 100%; border-collapse: collapse; font: 12.5px/1.45 var(--mono); color: var(--t-text); table-layout: fixed; }
.dtable th, .dtable td { padding: 9px 10px; border-bottom: 1px solid var(--t-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtable th { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-soft); font-weight: 600; border-bottom: 1.5px solid var(--ink); }
.dtable th button { all: unset; cursor: pointer; }
.dtable th[aria-sort="descending"] button::after { content: " ▼"; font-size: 8px; color: var(--t-neon); }
.dtable th[aria-sort="ascending"] button::after { content: " ▲"; font-size: 8px; color: var(--t-neon); }
.dtable .right { text-align: right; }
.dtable .left { text-align: left; }
.dtable td.c-label b { font-weight: 600; color: var(--t-text); }
.dtable td.c-sector { color: var(--t-dim); }
.dtable td.up { color: var(--t-pos); }
.dtable td.down { color: var(--t-neg); }
.dtable td.amb { color: var(--t-amber); }
.dtable td.vio { color: var(--t-violet); }
.dtable td.empty { text-align: center; color: var(--t-dim); padding: 36px 10px; }
.dtable tbody tr:hover td { background: rgba(43, 76, 155, 0.04); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable col.c-label { width: 26%; }
@keyframes flashup { from { background: rgba(15, 138, 75, 0.16); } to { background: transparent; } }
@keyframes flashdown { from { background: rgba(200, 50, 60, 0.14); } to { background: transparent; } }
.dtable tr.flash-up td { animation: flashup 1.4s ease-out; }
.dtable tr.flash-down td { animation: flashdown 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .dtable tr.flash-up td, .dtable tr.flash-down td { animation: none; } }
.dtable .c-label { width: 30%; }
.dtable .c-sector { width: 16%; }
@media (max-width: 760px) { .dtable .c-oi, .dtable .c-fund { display: none; } .dtable .c-label { width: 34%; } }
@media (max-width: 480px) { .dtable .c-sector, .dtable .c-vol { display: none; } .dtable .c-label { width: 44%; } .dtable th, .dtable td { padding: 9px 6px; } }

/* ---- live index, finance cards, credits ---- */
.livecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.livecard {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); transition: border-color 0.2s, transform 0.2s;
}
.livecard:hover { border-color: var(--alive2); transform: translateY(-2px); }
.lct { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.lcd { color: var(--mut); font-size: 14px; line-height: 1.5; }
.lcn { font: 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--alive2); margin-top: auto; }
.habcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: 16px; }
.habcard { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: 500 15px var(--sans); color: var(--ink); transition: border-color 0.2s, color 0.2s; }
.habcard:hover { border-color: var(--alive2); color: var(--alive); }
.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.credit { padding: 22px 0 20px; border-top: 0; border-bottom: 1px solid var(--line); }
.credit h2.sh a { color: inherit; }
.page .credit p { font-size: 14.5px; color: var(--ink); max-width: none; margin: 0 0 6px; }
.page .credit p.cline { color: var(--mut); font-size: 13.5px; }

/* No banners beside page headings any more: the heading takes the full width. */
.pagehead { grid-template-columns: minmax(0, 1fr); }
.line { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
@media (max-width: 700px) { .line { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* The instrument's call to buy its data. */
.term .tfoot a.tbuy { color: var(--alive); font-weight: 600; border-bottom-color: currentColor; }

/* ---- drill-down: a market row opened in place, a pinned item under any instrument ---- */
.dtable tr.drow { cursor: pointer; }
.dtable tr.drow:focus-visible td { outline: 2px solid var(--alive); outline-offset: -2px; }
.dtable tr.drow.open td { background: var(--t-panel); font-weight: 600; }
.dtable tr.dt-detail td { padding: 0; white-space: normal; background: var(--t-panel); border-bottom: 1px solid var(--t-line); }
.dbox { padding: 16px 16px 14px; }
.dchart { display: block; width: 100%; height: 150px; }
.dchart.wait { height: auto; padding: 24px 0; text-align: center; color: var(--t-dim); font: 12px var(--mono); }
.dchart .dline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.dchart.up .dline { stroke: var(--t-pos); } .dchart.up .darea { fill: rgba(11, 122, 66, 0.08); }
.dchart.down .dline { stroke: var(--t-neg); } .dchart.down .darea { fill: rgba(200, 50, 60, 0.07); }
.dchart .dgrid { stroke: var(--t-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dscale { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--t-dim); margin: 4px 0 12px; }
.dfig { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; margin: 0; }
.dfig dt { font: 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-dim); }
.dfig dd { margin: 2px 0 0; font: 600 14px var(--mono); color: var(--t-text); }
.dfig .up { color: var(--t-pos); } .dfig .down { color: var(--t-neg); } .dfig .amb { color: var(--t-amber); } .dfig .vio { color: var(--t-violet); }
.dact { margin: 14px 0 0; font: 12px var(--mono); }
.dact a { color: var(--alive); font-weight: 600; border-bottom: 1px solid currentColor; }
.ipin { position: absolute; z-index: 6; box-shadow: 0 14px 40px -12px rgba(20, 30, 50, 0.35); margin: 0; padding: 14px 40px 12px 16px; border: 1px solid var(--t-line); border-left: 3px solid var(--alive); border-radius: 4px; background: var(--t-panel); font: 12.5px/1.55 var(--mono); color: var(--t-text); }
.ipin .ipbody b { display: block; font-size: 14px; color: var(--t-text); margin-bottom: 4px; }
.ipin .ipbody span { display: block; color: var(--t-soft); }
.ipin .ipbody i { font-style: normal; }
.ipin .ipx { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--t-dim); cursor: pointer; }
.ipin .ipx:hover { color: var(--t-text); }
.instrument canvas { cursor: crosshair; }

/* ---- the habitats index: picture cards, group by group ---- */
.hgroup { padding: 56px 0 8px; }
.hgroup + .hgroup { border-top: 1px solid var(--line); margin-top: 40px; }
.hcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-top: 20px; }
.hcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; background: var(--card); overflow: hidden; color: var(--ink); transition: border-color 0.2s, transform 0.2s; }
.hcard:hover { border-color: var(--alive2); transform: translateY(-2px); }
.hcard .hpic { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #13244f; }
.hcard .hpic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.hcard:hover .hpic img { transform: scale(1.05); }
.hcard b { display: block; font: 500 19px/1.25 var(--serif); padding: 14px 16px 4px; }
.hcard span:last-child:not(.hpic) { display: block; padding: 0 16px 16px; color: var(--mut); font-size: 14px; line-height: 1.5; }
.hjump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hjump a { font: 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #f6f4ee; border: 1px solid rgba(246, 244, 238, 0.45); border-radius: 999px; padding: 7px 14px; }
.hjump a:hover { border-color: #e8d6a3; color: #e8d6a3; }

/* ---- a live page's latest reading, in the page itself ---- */
.snapshot { margin-top: 28px; }
.snapshot p { font-size: 16px; line-height: 1.55; color: var(--ink); max-width: 80ch; }
.snapshot .kicker { display: block; margin-bottom: 6px; }
.snapstats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; padding: 0; font: 13px var(--mono); color: var(--mut); }
.snapstats b { color: var(--ink); }
.snapstats i { font-style: normal; color: var(--faint); }

/* /practice/: the five steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 20px 18px 22px; }
.steps .stepn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #13244f; color: #e8d6a3; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.steps .sh { margin: 0 0 6px; }
.steps p { margin: 0; color: var(--mut); line-height: 1.5; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.dtable tr.dt-more td { text-align: center; padding: 10px 0 4px; border-bottom: 0; }
.dtable tr.dt-more button { font: 600 12px/1 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--alive); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.dtable tr.dt-more button:hover { border-color: var(--alive); }

/* A page that opens on a photo band: the band runs up under the nav, flush like the home hero. */
.page:has(> .hband:first-child) { padding-top: 0; }
.page > .hband:first-child { padding-top: 184px; }
@media (max-width: 760px) { .page > .hband:first-child { padding-top: 150px; } }

/* The build-time snapshot is for readers without scripts (and crawlers); live pages show the live reading. */
.js .snapshot { display: none; }
.tbar .bt i.neg { background: linear-gradient(90deg, #b0832e, #d1b679); }

/* The one filled button in the nav: Build with us. */
.navlinks a.navcta { background: #13244f; color: #f6f4ee; border-radius: 999px; padding: 9px 16px; border: 0; }
.navlinks a.navcta:hover, .navlinks a.navcta[aria-current="page"] { background: #163a7a; color: #fff; }
@media (max-width: 640px) { .navlinks a.navcta { display: inline-block; margin-top: 8px; } }

/* Home hero: the live strip under the buttons */
.heroline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; min-height: 22px; font: 12.5px/1.4 var(--mono); color: rgba(246, 244, 238, 0.78); }
.heroline .hlive { display: inline-flex; align-items: center; gap: 8px; color: #e8d6a3; letter-spacing: var(--track-label); text-transform: uppercase; font-size: 11px; }
.heroline .hlive::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e8d6a3; box-shadow: 0 0 0 0 rgba(232, 214, 163, 0.6); animation: hlpulse 2.4s infinite; }
.heroline .hl { color: inherit; text-decoration: none; white-space: nowrap; }
.heroline .hl:hover b { text-decoration: underline; }
.heroline .hk { color: rgba(246, 244, 238, 0.62); }
.heroline b { color: #f6f4ee; font-weight: 600; }
.heroline i { font-style: normal; font-weight: 500; }
.heroline i.up { color: #8fd3a8; } .heroline i.down { color: #f0a0a0; }
@keyframes hlpulse { 70% { box-shadow: 0 0 0 8px rgba(232, 214, 163, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 214, 163, 0); } }
@media (prefers-reduced-motion: reduce) { .heroline .hlive::before { animation: none; } }
@media (max-width: 640px) { .heroline { gap: 6px 16px; font-size: 12px; } .heroline .hl:nth-of-type(n+4) { display: none; } }

/* The engine card spans the row; its pictures sit to the left at a modest height, not a screen of photo. */
@media (min-width: 761px) {
  .ctxcard.model.k-engine.haspic { display: flow-root; }
  .ctxcard.model.k-engine .cpics { float: left; width: 38%; aspect-ratio: 16 / 10; margin: -18px 26px 10px -20px; border-radius: 6px 0 6px 0; }
  .ctxcard.model.k-engine > summary, .ctxcard.model.k-engine p { max-width: none; }
}

/* Drawn figures on model cards (tools/figures.mjs): the same frame as a card picture; lines draw in when seen. */
.cfig { position: relative; display: block; margin: -18px -20px 16px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px 6px 0 0; background: #13244f; }
.cfig .fig { display: block; width: 100%; height: 100%; }
.io .cfig .fdraw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.io .cfig .flamp, .io .cfig .ffade { opacity: 0; }
.io .cfig .fgrow { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
.io .cfig.inview .fdraw { animation: fdraw 1.8s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: var(--d, 0s); }
.io .cfig.inview .flamp, .io .cfig.inview .ffade { animation: ffade 0.6s ease forwards; animation-delay: var(--d, 0s); }
.io .cfig.inview .fgrow { animation: fgrow 0.7s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes fdraw { to { stroke-dashoffset: 0; } }
@keyframes ffade { to { opacity: var(--o, 1); } }
@keyframes fgrow { to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .io .cfig .fdraw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } .io .cfig .flamp, .io .cfig .ffade { opacity: 1; animation: none; } .io .cfig .fgrow { transform: none; animation: none; } }

/* Keyboard focus: always visible */
.dtable th button:focus-visible, .dtable tr.drow:focus-visible, .dtable tr.dt-more button:focus-visible { outline: 2px solid var(--alive); outline-offset: 2px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--alive); outline-offset: 1px; border-color: var(--alive); }
.field input, .field select, .field textarea { font-size: 16px; } /* no zoom on phones */
footer .doc a { display: inline-block; padding: 4px 0; }

@media (min-width: 761px) {
  .ctxcard.model.k-engine .cfig { float: left; width: 38%; aspect-ratio: 16 / 10; margin: -18px 26px 10px -20px; border-radius: 6px 0 6px 0; }
}
.io .cfig.inview .fsweep { animation: fsweep 6s linear infinite; }
@keyframes fsweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .io .cfig.inview .fsweep { animation: none; } }
.io .cfig .fgrow2 { transform: scaleX(0); transform-box: fill-box; transform-origin: left; }
.io .cfig.inview .fgrow2 { animation: fgrow2 0.8s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes fgrow2 { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .io .cfig .fgrow2 { transform: none; animation: none; } }

/* ================= Home, sharpened (xb): one hard line, a live board, dark bands ================= */
.ehero.xb { padding: 168px 0 88px; min-height: min(92vh, 860px); display: flex; align-items: center; background: #0d1a3d; }
.ehero.xb::before { background: linear-gradient(90deg, rgba(10, 20, 48, 0.97) 0%, rgba(10, 20, 48, 0.88) 38%, rgba(10, 20, 48, 0.45) 70%, rgba(10, 20, 48, 0.62) 100%); }
.ehero.xb .herostill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.ehero.xb > .wrap { width: 100%; }
.herogrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 56px; align-items: center; }
.ehero.xb .eherocopy { max-width: 700px; }
.ehero.xb .kicker { color: #d1a64a; letter-spacing: 0.2em; font-size: 11.5px; }
.ehero.xb .h1 { font-size: clamp(42px, 5.2vw, 78px); line-height: 1.02; letter-spacing: -0.02em; max-width: 13ch; margin-top: 18px; }
.ehero.xb .h1 em { display: block; color: #e2c27a; }
.herosig { margin: 26px 0 0; max-width: 46ch; font: 400 clamp(16px, 1.45vw, 19px)/1.55 var(--sans); color: rgba(246, 244, 238, 0.82); }
.ehero.xb .btnrow { margin-top: 34px; gap: 12px; }
.btn.solid { background: #d1a64a; border-color: #d1a64a; color: #0d1a3d; font-weight: 600; }
.btn.solid:hover { background: #e2c27a; border-color: #e2c27a; color: #0d1a3d; box-shadow: 0 10px 30px -10px rgba(209, 166, 74, 0.6); }
.ehero .btn.outline, .xclose .btn.outline { border-color: rgba(246, 244, 238, 0.5); color: #f6f4ee; background: transparent; }
.ehero .btn.outline:hover, .xclose .btn.outline:hover { border-color: #f6f4ee; background: rgba(246, 244, 238, 0.08); box-shadow: none; }

.liveboard { position: relative; z-index: 2; background: rgba(8, 16, 40, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(226, 194, 122, 0.28); border-radius: 10px; padding: 18px 20px 14px; color: #f6f4ee; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
.lbhead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(246, 244, 238, 0.14); }
.liveboard .hlive { display: inline-flex; align-items: center; gap: 8px; color: #e2c27a; letter-spacing: 0.18em; text-transform: uppercase; font: 600 11px var(--mono); }
.liveboard .hlive::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e2c27a; animation: hlpulse 2.4s infinite; }
.lbclock { font: 11px var(--mono); color: rgba(246, 244, 238, 0.5); }
.lbrows { min-height: 300px; }
.lbwait { font: 12px var(--mono); color: rgba(246, 244, 238, 0.5); padding: 16px 0; margin: 0; }
.lbrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(246, 244, 238, 0.08); color: inherit; }
.lbrow:last-child { border-bottom: 0; }
.lbrow:hover .lbl { color: #fff; }
.lbl { grid-column: 1; grid-row: 1 / span 2; align-self: center; font: 500 14px/1.3 var(--sans); color: rgba(246, 244, 238, 0.78); }
.lbv { grid-column: 2; grid-row: 1; text-align: right; font: 600 22px/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: #f6f4ee; }
.lbn { grid-column: 2; grid-row: 2; text-align: right; font: 500 12px/1.4 var(--mono); color: rgba(246, 244, 238, 0.55); }
.lbn.up { color: #8fd3a8; } .lbn.down { color: #f0a0a0; }
.lbrow.flash .lbv { animation: lbflash 1.2s ease; }
@keyframes lbflash { 0% { color: #e2c27a; } 100% { color: #f6f4ee; } }
.lbfoot { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(246, 244, 238, 0.14); font: 600 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #e2c27a; }
.lbfoot:hover { color: #fff; }

/* The three offers: one dark band, each with one big figure */
.xoffers { background: #0d1a3d; color: #f6f4ee; padding: 0 0 72px; }
.xogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(246, 244, 238, 0.14); }
.xo { display: flex; flex-direction: column; padding: 40px 34px 8px 0; color: inherit; }
.xo + .xo { padding-left: 34px; border-left: 1px solid rgba(246, 244, 238, 0.14); }
.xok { font: 600 11px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: #d1a64a; }
.xobig { font: 500 clamp(48px, 5.4vw, 76px)/1 var(--serif); letter-spacing: -0.02em; color: #f6f4ee; margin-top: 20px; }
.xounit { font: 13px/1.4 var(--mono); color: rgba(246, 244, 238, 0.6); margin-top: 8px; }
.xo b { font: 500 22px/1.25 var(--serif); margin-top: 28px; color: #f6f4ee; }
.xo:hover b { color: #e2c27a; }
.xop { font: 15px/1.55 var(--sans); color: rgba(246, 244, 238, 0.72); margin-top: 8px; max-width: 34ch; }

/* tighter rhythm on the home page */
#main > .edeck { padding: 80px 0 24px; }
#main > .edeck + .edeck { margin-top: 32px; padding-top: 80px; }
#main .edhead { margin-bottom: 32px; }
#main .edh { font-size: clamp(30px, 3.8vw, 52px); letter-spacing: -0.015em; }
.edp { font-size: 17px; color: var(--mut); }
.xpair { align-items: stretch; }
.xpair > .term { height: 100%; }

/* closing band */
.xclose { background: #0d1a3d; color: #f6f4ee; padding: 96px 0 104px; margin-top: 96px; }
.xclose .statement { color: #f6f4ee; font-size: clamp(30px, 4vw, 54px); max-width: 20ch; }
.xclose .statement em { color: #e2c27a; }
.xclose .btnrow { margin-top: 34px; }
.xclose .notice { color: rgba(246, 244, 238, 0.55); margin-top: 28px; border: 0; padding: 0; }
.xclose + footer { border-top: 1px solid rgba(246, 244, 238, 0.12); }

/* house type, tightened: calmer kickers, darker labels */
.kicker { letter-spacing: 0.2em; font-size: 11.5px; color: #7a4f0e; }

@media (max-width: 1000px) {
  .herogrid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .liveboard { max-width: 520px; }
  .ehero.xb { min-height: 0; padding: 128px 0 64px; }
  .ehero.xb::before { background: linear-gradient(180deg, rgba(10, 20, 48, 0.9) 0%, rgba(10, 20, 48, 0.82) 55%, rgba(10, 20, 48, 0.95) 100%); }
}
@media (max-width: 760px) {
  .xogrid { grid-template-columns: minmax(0, 1fr); }
  .xo, .xo + .xo { padding: 30px 0 22px; border-left: 0; }
  .xo + .xo { border-top: 1px solid rgba(246, 244, 238, 0.14); }
  .lbrows { min-height: 0; }
  .lbv { font-size: 19px; }
  #main > .edeck { padding: 56px 0 16px; }
  #main > .edeck + .edeck { padding-top: 56px; margin-top: 16px; }
  .xclose { padding: 64px 0 72px; margin-top: 56px; }
}

/* ================= Revamp: every page in the home page's voice ================= */
/* Bands: the same deep navy as the home hero, darker on the reading side */
.hband { background: #0d1a3d; padding-bottom: 64px; min-height: 440px; }
.hband::before { background: linear-gradient(90deg, rgba(10, 20, 48, 0.96) 0%, rgba(10, 20, 48, 0.84) 40%, rgba(10, 20, 48, 0.35) 78%, rgba(10, 20, 48, 0.5) 100%); }
.hband .kicker { color: #d1a64a; letter-spacing: 0.2em; }
.page .hband .h1, .hband .h1 { font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.02em; line-height: 1.03; max-width: 16ch; }
.page .hband p.lede, .hband .lede { color: rgba(246, 244, 238, 0.82); opacity: 1; font-size: clamp(16px, 1.4vw, 19px); max-width: 52ch; }
.hband .btnrow { margin-top: 28px; gap: 12px; }
.hband .btn.outline { border-color: rgba(246, 244, 238, 0.5); color: #f6f4ee; background: transparent; }
.hband .btn.outline:hover { border-color: #f6f4ee; background: rgba(246, 244, 238, 0.08); box-shadow: none; }
.hband .btn { margin-top: 0; }
/* a band with no picture: navy with a fine grid and a gold glow, never flat */
.hband.plain, .hband.nopic { min-height: 0; padding-top: 168px; padding-bottom: 64px; background:
  radial-gradient(900px 420px at 85% 0%, rgba(209, 166, 74, 0.16), rgba(209, 166, 74, 0) 60%),
  linear-gradient(rgba(246, 244, 238, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
  linear-gradient(90deg, rgba(246, 244, 238, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
  #0d1a3d; }
.hband.plain::before, .hband.nopic::before { display: none; }
.hband .crumbs { margin-bottom: 22px; font: 11.5px var(--mono); letter-spacing: 0.08em; color: rgba(246, 244, 238, 0.55); }
.hband .crumbs a { color: rgba(246, 244, 238, 0.75); }
.hband .crumbs a:hover { color: #fff; }
.hband .crumbs span[aria-current] { color: rgba(246, 244, 238, 0.55); }
.anchor { position: relative; top: -80px; height: 0; }
@media (max-width: 760px) {
  .hband { min-height: 0; padding-bottom: 40px; }
  .page > .hband:first-child { padding-top: 132px; }
  .hband.plain, .hband.nopic { padding-top: 128px; }
  .hband::before { background: linear-gradient(0deg, rgba(10, 20, 48, 0.96) 0%, rgba(10, 20, 48, 0.82) 55%, rgba(10, 20, 48, 0.55) 100%); }
}
/* live pages: the instrument is the point, so the band is shorter */
.page > .hband:first-child:has(.hbpics) { min-height: 340px; }

/* Numbered section heads on habitat pages */
.sechead { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.secn { font: 500 15px/1 var(--mono); color: #b0832e; padding-top: 4px; min-width: 26px; }
.sech { font: 500 clamp(26px, 2.8vw, 38px)/1.12 var(--serif); letter-spacing: -0.015em; margin: 8px 0 0; color: var(--ink); }

/* Warm panels: white cards on paper, a hairline, no blue glow */
.term {
  --t-panel: #faf8f3;
  --t-line: #e6e1d4;
  --t-grid: rgba(13, 26, 61, 0.08);
  --t-face-a: #ffffff;
  --t-face-b: #f4f1e8;
  --t-land: #eeebe2;
  --t-water: #fbfaf6;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(13, 26, 61, 0.04), 0 24px 48px -36px rgba(13, 26, 61, 0.28);
}
.form, .spec.washpanel { background: #ffffff; border-radius: 10px; box-shadow: 0 24px 48px -36px rgba(13, 26, 61, 0.28); }
.ctxcard, .hcard, .livecard, .egroups a, .steps li { border-radius: 8px; }
.ctxcard h3 { font: 600 16.5px/1.3 var(--sans); letter-spacing: -0.005em; }

/* the closing band inside pages */
.page .xclose { margin-top: 96px; margin-bottom: -64px; }
@media (max-width: 760px) { .page .xclose { margin-top: 56px; } }

/* Folded sections (pulse.js): the first few show, one button opens the rest */
.ctxcards.fold:not(.open) > :nth-child(n+4) { display: none; }
ul.ctxq.fold:not(.open) > :nth-child(n+5) { display: none; }
.foldbtn { margin-top: 18px; font: 600 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--alive); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px; min-height: 44px; cursor: pointer; }
.foldbtn:hover { border-color: var(--alive); }
.foldbtn:focus-visible { outline: 2px solid var(--alive); outline-offset: 2px; }

/* Thumb-sized targets on touch screens: pills, sort headers, the menu, panel links */
@media (pointer: coarse) {
  .icities button { min-height: 38px; padding: 8px 14px; font-size: 12px; }
  .dtable th button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; }
  nav.navjs .navtoggle { min-height: 44px; padding: 0 18px; }
  .navlinks a { padding-top: 12px; padding-bottom: 12px; }
  .tfoot a { display: inline-block; padding: 9px 0; }
  .hjump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; }
  .ctxcard summary, .ctxcard .open { min-height: 44px; }
  footer .doc a { padding: 10px 0; }
}

/* Phones: each card section is one swipeable row; the next card peeks in from the edge */
@media (max-width: 640px) {
  .ctxcards, .ctxcards.models { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -18px; padding: 2px 18px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: flex-start; }
  .ctxcards::-webkit-scrollbar { display: none; }
  .ctxcards > * { flex: 0 0 84%; scroll-snap-align: start; scroll-margin-left: 18px; }
  .ctxcards.fold:not(.open) > :nth-child(n+4) { display: block; }
  .ctxcards.fold + .foldbtn { display: none; }
  .ctxcard.model.k-engine { grid-column: auto; }
  .swipehint { display: block; font: 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); margin: -6px 0 12px; }
}
.swipehint { display: none; }

/* the home headline: two lines of statement, two of promise, never six */
.ehero.xb .h1 { font-size: clamp(38px, 4.2vw, 64px); max-width: 17ch; }
@media (max-width: 640px) { .ehero.xb .h1 { font-size: 36px; } }

/* Phones: one whole card at a time (no half pictures); dots and a counter show there is more */
@media (max-width: 640px) {
  .ctxcards, .ctxcards.models { gap: 14px; scroll-padding: 0 18px; }
  .ctxcards > * { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
  .cdots { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; }
  .cdots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: width 0.25s, background 0.25s; }
  .cdots button[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--alive); }
  .cdots button::after { content: ""; display: block; width: 32px; height: 32px; margin: -12px; }
  .cdots .ccount { font: 11px var(--mono); letter-spacing: 0.12em; color: var(--mut); margin-left: 6px; }
}
.cdots { display: none; }
@media (max-width: 640px) { .cdots { display: flex; } }
@media (max-width: 640px) {
  .ctxcards, .ctxcards.models { gap: 40px; }        /* the next card starts past the screen edge */
  .ctxcards.fold ~ .foldbtn { display: none; }      /* phones swipe through every card */
}

/* Older phones (iOS 14 and before) ignore aspect-ratio: give every picture box its height
 * the classic way, so no picture collapses to nothing. */
@supports not (aspect-ratio: 1 / 1) {
  .hcard .hpic, .egroups .gpic, .cpics, .cfig { position: relative; height: 0; aspect-ratio: auto; }
  .hcard .hpic, .cpics, .cfig { padding-top: 56.25%; }
  .egroups .gpic { padding-top: 75%; }
  .hcard .hpic img, .egroups .gpic img, .cfig .fig { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; }
}

/* Live index: a small live mark on each picture */
.hcard.livepic .hpic { position: relative; }
.lpulse { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 8px; border-radius: 999px; background: rgba(10, 20, 48, 0.72); color: #e2c27a; font: 600 10.5px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lpulse::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e2c27a; animation: hlpulse 2.4s infinite; }
@media (prefers-reduced-motion: reduce) { .lpulse::before { animation: none; } }