:root {
  --paper: #f7f9fb;
  --paper-deep: #edf1f4;
  --surface: rgba(255, 255, 255, 0.92);
  --ink: #182d34;
  --muted: #5c6d6e;
  --rule: #d4dde1;
  --teal: #0b5c5b;
  --teal-pale: #d8e8e3;
  --copper: #a7572e;
  --copper-pale: #f1dfd2;
  --shadow: 0 18px 45px rgba(24, 45, 52, 0.08);
  --masthead-height: 92px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; }

.site-shell {
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 92px;
  border-bottom: 1px solid var(--rule);
  background: rgba(247, 249, 251, 0.94);
  backdrop-filter: blur(14px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.wordmark-emblem {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

/* Hide the retired planar mark if an already-open legacy page still contains it. */
.wordmark img[src*="cq3-emblem.svg"] { display: none; }

.wordmark-copy {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 23px;
}

.primary-nav a {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-decoration: none;
  text-transform: uppercase;
}

.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--teal); }

.primary-nav a[aria-current='page'] {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
  min-height: 620px;
  padding: 78px 0 86px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 16px;
  color: var(--copper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: -0.045em;
}

h1 {
  max-width: 690px;
  margin-bottom: 25px;
  font-size: clamp(3.3rem, 7vw, 6.15rem);
  line-height: 0.94;
}

.hero-summary {
  max-width: 640px;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.82;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.action:hover,
.action:focus-visible { transform: translateY(-2px); }
.action.primary { border-color: var(--teal); background: var(--teal); color: #fff; }
.action.primary:hover,
.action.primary:focus-visible { background: #074847; }

.network-stage {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.network-stage::before {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(11, 92, 91, 0.2);
  content: '';
  pointer-events: none;
}

.network-stage svg,
.network-stage img {
  position: relative;
  display: block;
  width: 100%;
  height: 440px;
}

.network-stage--hero {
  min-height: 0;
  aspect-ratio: 1;
  isolation: isolate;
  background:
    radial-gradient(circle at 23% 78%, rgba(11, 92, 91, 0.11), transparent 37%),
    radial-gradient(circle at 78% 24%, rgba(167, 87, 46, 0.10), transparent 34%),
    var(--surface);
}

.network-stage--hero::after {
  position: absolute;
  inset: 20%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 62%, rgba(11, 92, 91, 0.25), transparent 42%),
    radial-gradient(circle at 70% 35%, rgba(167, 87, 46, 0.20), transparent 40%);
  filter: blur(21px);
  content: '';
  opacity: 0.64;
  pointer-events: none;
  animation: cq-hero-glow 13s ease-in-out infinite alternate;
}

.network-stage--hero::before { z-index: 2; }

.network-stage--hero img {
  z-index: 1;
  height: 100%;
  filter: drop-shadow(0 10px 16px rgba(24, 45, 52, 0.10));
  animation: cq-hero-float 9s ease-in-out infinite;
}

@keyframes cq-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes cq-hero-glow {
  0% { opacity: 0.42; transform: scale(0.94) rotate(-4deg); }
  100% { opacity: 0.72; transform: scale(1.08) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .network-stage--hero::after,
  .network-stage--hero img { animation: none; }
}

.stage-caption {
  position: absolute;
  right: 33px;
  bottom: 30px;
  margin: 0;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.research-areas {
  padding: 84px 0 104px;
  border-top: 1px solid var(--rule);
}

.section-heading {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 40px;
  margin-bottom: 44px;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 0.98;
}

.section-intro {
  align-self: end;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.area {
  min-height: 300px;
  padding: 28px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 251, 0.26);
  transition: background-color 180ms ease;
}

.area:hover { background: rgba(216, 232, 227, 0.45); }

.area-number {
  color: var(--copper);
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
}

.area h3 {
  margin: 48px 0 14px;
  font-family: Fraunces, Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.area p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.72;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 0 37px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.6;
}

.site-footer p { margin: 0; }

.demo-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: clamp(34px, 6vw, 88px);
  padding: 70px 0 38px;
}

.demo-intro h1 {
  max-width: 850px;
  margin-bottom: 22px;
  font-size: clamp(3rem, 6.2vw, 5.7rem);
}

.demo-intro-copy {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.demo-meta {
  align-self: end;
  margin: 0;
  padding: 20px 0 2px;
  border-top: 1px solid var(--teal);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

.demo-meta strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-stage {
  position: sticky;
  top: calc(var(--masthead-height) + 12px);
  display: grid;
  height: calc(100svh - var(--masthead-height) - 24px);
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 20px;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 251, 0.76);
  box-shadow: var(--shadow);
}

.demo-frame {
  display: block;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
  background: #f5f7fb;
}

.demo-caption {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 15px 3px 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.demo-caption p { margin: 0; }

.flood-stage {
  margin-bottom: 74px;
  padding: clamp(18px, 2.8vw, 36px);
  border: 1px solid var(--rule);
  background: rgba(255, 255, 251, 0.8);
  box-shadow: var(--shadow);
}

.flood-stage-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.72fr);
  gap: clamp(26px, 5vw, 72px);
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}

.flood-stage h2 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 4.1rem);
  line-height: 0.98;
}

.flood-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.flood-summary div { padding: 12px 14px; background: var(--paper); }
.flood-summary span,
.flood-network-panel .section-kicker {
  display: block;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.flood-summary strong { display: block; margin-top: 4px; color: var(--ink); font-family: Fraunces, Georgia, serif; font-size: 1.2rem; }

.flood-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
}

.flood-button {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 0.71rem;
  letter-spacing: 0.045em;
  padding: 9px 11px;
  text-transform: uppercase;
}

.flood-button:hover,
.flood-button:focus-visible { border-color: var(--teal); color: var(--teal); }
.flood-primary { border-color: var(--teal); background: var(--teal); color: #ffffff; }
.flood-primary:hover,
.flood-primary:focus-visible { background: #064746; color: #ffffff; }

.flood-root { display: grid; gap: 3px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; }
.flood-root select { min-width: 90px; border: 1px solid var(--rule); border-radius: 0; background: #ffffff; color: var(--ink); cursor: pointer; font: 0.72rem 'DM Mono', monospace; padding: 5px 7px; }

.flood-scrubber {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr);
  align-items: center;
  flex: 1;
  gap: 12px;
  margin-left: 10px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 0.69rem;
}

.flood-scrubber input { accent-color: var(--teal); cursor: pointer; min-width: 120px; width: 100%; }

.flood-network-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.flood-network-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; background: #ffffff; }
.flood-network-panel > header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; padding: 16px 18px 10px; border-bottom: 1px solid #ebe8df; }
.flood-network-panel h3 { margin: 3px 0 0; font-family: Fraunces, Georgia, serif; font-size: 1.8rem; font-weight: 600; line-height: 1; }
.flood-network-panel > header > p { margin: 0; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.66rem; text-align: right; }
.flood-network-panel > footer { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px 13px; border-top: 1px solid #ebe8df; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.65rem; }

.flood-graph {
  display: grid;
  min-height: clamp(370px, 47vw, 610px);
  place-items: center;
  overflow: hidden;
  background: #fbfbf8;
}

.flood-svg { display: block; width: 100%; height: 100%; max-height: 620px; }
.flood-svg .flood-edge path { stroke: #c9c8c1 !important; stroke-width: 1.15 !important; opacity: 0.58; transition: stroke 160ms ease, stroke-width 160ms ease, opacity 160ms ease; }
.flood-svg .flood-node polygon,
.flood-svg .flood-node ellipse { fill: #ffffff; stroke: #868a88; stroke-width: 1.1; transition: fill 160ms ease, stroke 160ms ease; }
.flood-svg .flood-node text { fill: #596260; font-size: 9px; transition: fill 160ms ease; }
.flood-svg .flood-node { cursor: pointer; }
.flood-svg .flood-node:focus-visible polygon,
.flood-svg .flood-node:focus-visible ellipse { stroke: var(--teal); stroke-width: 2.4; }
.flood-svg .flood-reached polygon,
.flood-svg .flood-reached ellipse { fill: #dceeea; stroke: #4b8d83; }
.flood-svg .flood-source polygon,
.flood-svg .flood-source ellipse { fill: var(--copper); stroke: #9b572b; stroke-width: 1.7; }
.flood-svg .flood-source text { fill: #ffffff; font-weight: 700; }
.flood-svg .flood-active-edge path { stroke: var(--copper) !important; stroke-width: 3.4 !important; opacity: 1; }
.flood-svg .flood-heavy-edge path { stroke: #a44719 !important; stroke-width: 4.6 !important; opacity: 1; }
.flood-svg .broadcast-settled-edge path { stroke: #4b8d83 !important; stroke-width: 2.25 !important; opacity: 0.9; }
.flood-svg .broadcast-dot { fill: var(--copper); pointer-events: none; filter: drop-shadow(0 0 2px rgba(132, 69, 35, 0.45)); }

.flood-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; color: var(--muted); font-size: 0.75rem; }
.flood-legend code { font-size: 0.75rem; }
.legend-source,.legend-reached,.legend-active { width: 15px; height: 15px; display: inline-block; margin-left: 9px; border: 1px solid #868a88; }
.legend-source { margin-left: 0; border-color: #9b572b; background: var(--copper); }
.legend-reached { border-color: #4b8d83; background: #dceeea; }
.legend-active { height: 3px; border: 0; background: var(--copper); }
.legend-heavy { width: 15px; height: 5px; display: inline-block; margin-left: 9px; background: #a44719; }

.communication-hero {
  max-width: 920px;
  padding: clamp(70px, 11vw, 154px) 0 clamp(48px, 7vw, 90px);
}

.communication-hero h1 { max-width: 880px; margin: 0 0 24px; font-size: clamp(3.2rem, 7vw, 6.8rem); line-height: 0.91; }
.communication-hero > p:last-child { max-width: 720px; margin: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.8; }

.study-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 46px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.study-nav span,
.study-nav a {
  padding: 12px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.045em;
  text-decoration: none;
  text-transform: uppercase;
}

.study-nav span { padding-left: 0; color: var(--muted); }
.study-nav a { border-left: 1px solid var(--rule); color: var(--ink); }
.study-nav a:hover,
.study-nav a:focus-visible,
.study-nav a[aria-current="page"] { background: var(--teal-pale); color: var(--teal); }

.communication-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 88px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.communication-card { min-height: 280px; padding: clamp(26px, 4vw, 48px); background: rgba(255, 255, 251, 0.82); }
.communication-card-featured { background: var(--teal); color: #ffffff; }
.communication-card h2 { max-width: 520px; margin: 17px 0 14px; font-size: clamp(2rem, 3vw, 3.6rem); line-height: 0.97; }
.communication-card p:not(.section-kicker) { max-width: 540px; color: var(--muted); line-height: 1.75; }
.communication-card-featured p:not(.section-kicker) { color: rgba(255,255,255,0.78); }
.communication-card-featured .section-kicker { color: #c9e2dc; }
.study-link { display: inline-flex; gap: 9px; margin-top: 15px; color: var(--teal); font-family: 'DM Mono', monospace; font-size: 0.74rem; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; }
.communication-card-featured .study-link { color: #ffffff; }
.study-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.study-status { display: inline-block; margin-top: 21px; padding: 7px 9px; border: 1px solid var(--rule); color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }

.routing-stage { margin-bottom: 74px; padding: clamp(18px, 3vw, 38px); border: 1px solid var(--rule); background: rgba(255, 255, 251, 0.8); box-shadow: var(--shadow); }
.routing-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.5fr); gap: 34px; align-items: end; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.routing-header h2 { margin: 0; font-size: clamp(2.3rem, 4vw, 4.2rem); line-height: 0.96; }
.routing-header > p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.7; }

.routing-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 13px 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.routing-controls > label { display: grid; gap: 7px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; }
.routing-controls select { min-width: 130px; padding: 8px; border: 1px solid var(--rule); background: #ffffff; color: var(--ink); font-family: 'DM Mono', monospace; font-size: 0.78rem; }
.routing-controls fieldset { display: flex; gap: 12px; margin: 0; padding: 0; border: 0; }
.routing-controls legend { margin-bottom: 7px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; }
.routing-controls fieldset label { color: var(--ink); font-size: 0.8rem; }
.routing-reset { padding: 9px 11px; border: 1px solid var(--teal); background: transparent; color: var(--teal); cursor: pointer; font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
.routing-reset:hover { background: var(--teal); color: #ffffff; }
.routing-selection-status { margin: 0; padding: 12px 14px; border-left: 3px solid var(--teal); background: var(--teal-pale); color: #315252; font-family: 'DM Mono', monospace; font-size: 0.72rem; line-height: 1.55; }

.routing-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 20px 0; border: 1px solid var(--rule); background: var(--rule); }
.routing-metrics div { padding: 12px 14px; background: #ffffff; }
.routing-metrics span { display: block; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase; }
.routing-metrics strong { display: block; margin-top: 4px; font-family: Fraunces, Georgia, serif; font-size: 1.45rem; }

.routing-graph { min-height: min(68vw, 750px); overflow: hidden; background: #fbfbf8; }
.routing-svg { display: block; width: 100%; height: auto; max-height: 750px; }
.routing-svg .routing-edge path { stroke: #c9c8c1 !important; stroke-width: 1.05 !important; opacity: 0.58; transition: stroke 150ms ease, stroke-width 150ms ease, opacity 150ms ease; }
.routing-svg .routing-node polygon,
.routing-svg .routing-node ellipse { fill: #ffffff; stroke: #868a88; stroke-width: 1.1; transition: fill 150ms ease, stroke 150ms ease; }
.routing-svg .routing-node { cursor: pointer; }
.routing-svg .routing-node:hover polygon,
.routing-svg .routing-node:hover ellipse { stroke: var(--teal); stroke-width: 2; }
.routing-svg .routing-node text { fill: #596260; font-size: 9px; }
.routing-svg .route-node polygon,
.routing-svg .route-node ellipse { fill: #ddecf0; stroke: #4c8590; }
.routing-svg .route-source polygon,
.routing-svg .route-source ellipse { fill: var(--teal); stroke: #064746; stroke-width: 1.7; }
.routing-svg .route-destination polygon,
.routing-svg .route-destination ellipse { fill: var(--copper); stroke: #9b572b; stroke-width: 1.7; }
.routing-svg .route-source text,
.routing-svg .route-destination text { fill: #ffffff; font-weight: 700; }
.routing-svg .route-all-edge path { stroke: #4283a1 !important; stroke-width: 2.4 !important; opacity: 0.92; }
.routing-svg .route-one-edge path { stroke: var(--copper) !important; stroke-width: 3.8 !important; opacity: 1; }
.routing-caption { margin: 15px 0 0; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.75rem; }

.study-notes {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 46px;
  padding: 74px 0 94px;
}

.study-notes h2 {
  margin: 0;
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 0.99;
}

.study-notes p {
  max-width: 760px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.78;
}

.topology-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.36fr);
  gap: clamp(34px, 6vw, 88px);
  padding: 70px 0 50px;
}

.topology-intro h1 {
  max-width: 900px;
  margin-bottom: 23px;
  font-size: clamp(3rem, 6.2vw, 5.7rem);
}

.topology-intro-copy {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.topology-aside {
  align-self: end;
  margin: 0;
  padding: 20px 0 2px;
  border-top: 1px solid var(--copper);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

.topology-aside strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topology-study {
  padding: 72px 0;
  border-top: 1px solid var(--rule);
}

.study-heading {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 42px;
  margin-bottom: 36px;
}

.study-heading h2 {
  margin-bottom: 0;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1;
}

.study-heading p {
  align-self: end;
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.75;
}

.flight-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.flight-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 54px);
  background: rgba(255, 255, 251, 0.76);
}

.flight-copy h3 {
  margin: 32px 0 15px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2rem, 3vw, 3.05rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.flight-copy > p {
  max-width: 420px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.75;
}

.flight-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 8px 0 25px;
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.015em;
}

.flight-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dimension-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(24, 45, 52, 0.07); }
.dimension-0 { background: #5fd0c8; }
.dimension-1 { background: #f19b62; }
.dimension-2 { background: #89a9ec; }
.dimension-3 { background: #f1cf72; }

.flight-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.flight-readout {
  min-height: 45px;
  margin: 26px 0 0 !important;
  padding: 11px 12px;
  border-left: 3px solid var(--teal);
  background: var(--teal-pale);
  color: #315252 !important;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem !important;
  line-height: 1.55 !important;
}

.flight-visual {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(52, 116, 116, 0.42), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(240, 182, 102, 0.16), transparent 24%),
    #112d34;
}

.flight-visual::before {
  position: absolute;
  inset: 19px;
  border: 1px solid rgba(224, 241, 235, 0.18);
  content: '';
  pointer-events: none;
}

.flight-visual canvas {
  display: block;
  width: 100%;
  height: 410px;
  cursor: grab;
  touch-action: none;
}

.flight-visual canvas:active { cursor: grabbing; }

.flight-overlay {
  position: absolute;
  right: 30px;
  bottom: 25px;
  margin: 0;
  color: rgba(233, 246, 242, 0.73);
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.dimension-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.dimension-pane {
  padding: 24px;
  background: rgba(255, 255, 251, 0.76);
}

.dimension-pane h3 {
  margin: 0 0 5px;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.dimension-pane p {
  max-width: 540px;
  min-height: 48px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.dimension-plot,
.dimension-host {
  display: block;
  width: 100%;
  height: 620px;
  background: #fff;
  border: 1px solid #e4e1d8;
}

.dimension-plot {
  object-fit: contain;
  object-position: center top;
}

.dimension-host {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.dimension-host svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.figure-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.figure-expand,
.figure-detail-close {
  border: 1px solid var(--teal);
  background: transparent;
  color: var(--teal);
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  text-transform: uppercase;
}

.figure-expand:hover,
.figure-expand:focus-visible,
.figure-detail-close:hover,
.figure-detail-close:focus-visible {
  background: var(--teal);
  color: #ffffff;
}

.figure-detail-dialog {
  width: min(96vw, 1440px);
  max-width: none;
  border: 1px solid var(--teal);
  box-shadow: 0 28px 80px rgba(25, 40, 43, 0.28);
  padding: 18px;
}

.figure-detail-dialog::backdrop { background: rgba(27, 37, 42, 0.7); }

.figure-detail-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.figure-detail-header .section-kicker { margin: 0; }
.figure-detail-header form { margin: 0; }

.figure-detail-host {
  align-items: center;
  display: flex;
  justify-content: center;
  max-height: calc(100svh - 150px);
  overflow: auto;
}

.figure-detail-host svg {
  display: block;
  height: auto;
  max-height: calc(100svh - 175px);
  max-width: none;
  min-width: 1100px;
  width: 100%;
}

.dimension-hover-note {
  min-height: 66px;
  margin: 14px 0 0;
  padding: 11px 12px;
  border-left: 3px solid var(--teal);
  background: var(--teal-pale);
  color: #315252;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.55;
}

.odd-dimension-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.odd-dimension-copy,
.odd-dimension-visual {
  padding: 28px;
  background: rgba(255, 255, 251, 0.76);
}

.odd-dimension-copy h3 {
  margin: 0 0 15px;
  font-family: Fraunces, Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.odd-dimension-copy p {
  max-width: 460px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.72;
}

.cut-stage {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.cut-copy,
.cut-graphic {
  padding: 28px;
  background: rgba(255, 255, 251, 0.76);
}

.cut-copy h3 {
  margin: 34px 0 15px;
  font-family: Fraunces, Georgia, serif;
  font-size: 2.15rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.cut-copy p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.75;
}

.cut-tag {
  color: var(--copper);
  font-family: 'DM Mono', monospace;
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cut-graphic img {
  display: block;
  width: 100%;
  max-height: 470px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e4e1d8;
}

.distance-stage {
  padding: 28px;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 251, 0.76);
}

.distance-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.distance-chart .grid { stroke: #d6d7d0; stroke-width: 1; }
.distance-chart .axis-label { fill: #5c6d6e; font: 12px 'DM Mono', monospace; }
.distance-chart .series-label { fill: #182d34; font: 600 13px Manrope, sans-serif; }
.distance-chart .hypercube { fill: none; stroke: #a7572e; stroke-width: 4; }
.distance-chart .crossed-cube { fill: none; stroke: #0b5c5b; stroke-width: 4; }
.distance-chart .point-q { fill: #a7572e; }
.distance-chart .point-cq { fill: #0b5c5b; }

.distance-footnote {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .site-shell { width: min(100% - 34px, 700px); }
  .masthead { min-height: 108px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 13px; }
  .primary-nav { justify-content: flex-start; gap: 15px; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 58px 0 70px; }
  .network-stage { min-height: 340px; }
  .network-stage svg { height: 340px; }
  .network-stage--hero { min-height: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .demo-intro,
  .study-notes,
  .topology-intro,
  .study-heading,
  .flight-stage,
  .cut-stage,
  .odd-dimension-stage { grid-template-columns: 1fr; gap: 25px; }
  .dimension-stage { grid-template-columns: 1fr; }
  .dimension-plot,
  .dimension-host { height: 460px; }
  .flight-visual,
  .flight-visual canvas { min-height: 420px; height: 420px; }
  :root { --masthead-height: 108px; }
  .demo-stage {
    top: 9px;
    height: calc(100svh - 18px);
    padding: 11px;
  }
  .area-grid { grid-template-columns: 1fr; }
  .area { min-height: 0; }
  .area h3 { margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .action,
  .area { transition: none; }
}

/* A single, conventional type treatment keeps the research pages and demos
   readable without relying on downloaded display fonts. */
body * { font-family: Arial, Helvetica, sans-serif !important; }
pre,
code,
kbd,
samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }