/* atlas.css — ingmmo.com cartographic theme
   Hand-rolled, no build step. Replaces the prebuilt Tailwind bundle.

   Palette: paper / ink / cinnabar / woodblock-green in OKLCH.
   Type: Eczar (display + small caps) + Karla (body) + JetBrains Mono (metadata).
   Both modes designed; system pref drives default; manual toggle persists. */

:root {
  --paper:        oklch(96% 0.012 80);
  --paper-stain:  oklch(93% 0.018 75);
  --ink:          oklch(22% 0.025 60);
  --ink-faded:    oklch(40% 0.030 60);
  --ink-quiet:    oklch(58% 0.025 65);
  --hairline:     oklch(72% 0.020 70);
  --cinnabar:     oklch(48% 0.180 30);
  --cinnabar-mute: oklch(56% 0.140 30);
  --woodblock:    oklch(42% 0.080 145);

  --g-geo:        var(--cinnabar);
  --g-lang:       oklch(48% 0.085 70);
  --g-backend:    var(--woodblock);
  --g-frontend:   oklch(45% 0.115 245);
  --g-ai:         oklch(46% 0.110 320);
  --g-realtime:   oklch(48% 0.080 200);
  --g-ops:        oklch(50% 0.025 60);

  --serif: 'Eczar', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:  'Karla', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.333rem;
  --text-xl:    1.777rem;
  --text-2xl:   2.369rem;
  --text-3xl:   3.157rem;
  --text-4xl:   4.209rem;

  --measure: 65ch;
  --plate-max: 76rem;
  --plate-pad: clamp(20px, 5vw, 56px);
  --plate-inner-pad: clamp(16px, 4vw, 40px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-day):not(.theme-night) {
    --paper:        oklch(18% 0.015 60);
    --paper-stain:  oklch(22% 0.020 60);
    --ink:          oklch(89% 0.018 80);
    --ink-faded:    oklch(72% 0.020 70);
    --ink-quiet:    oklch(54% 0.020 65);
    --hairline:     oklch(38% 0.020 60);
    --cinnabar:     oklch(64% 0.160 30);
    --cinnabar-mute: oklch(56% 0.130 30);
    --woodblock:    oklch(64% 0.100 145);

    --g-lang:       oklch(70% 0.080 70);
    --g-frontend:   oklch(70% 0.110 245);
    --g-ai:         oklch(70% 0.105 320);
    --g-realtime:   oklch(70% 0.075 200);
    --g-ops:        oklch(70% 0.020 60);
  }
}

:root.theme-night {
  --paper:        oklch(18% 0.015 60);
  --paper-stain:  oklch(22% 0.020 60);
  --ink:          oklch(89% 0.018 80);
  --ink-faded:    oklch(72% 0.020 70);
  --ink-quiet:    oklch(54% 0.020 65);
  --hairline:     oklch(38% 0.020 60);
  --cinnabar:     oklch(64% 0.160 30);
  --cinnabar-mute: oklch(56% 0.130 30);
  --woodblock:    oklch(64% 0.100 145);

  --g-lang:       oklch(70% 0.080 70);
  --g-frontend:   oklch(70% 0.110 245);
  --g-ai:         oklch(70% 0.105 320);
  --g-realtime:   oklch(70% 0.075 200);
  --g-ops:        oklch(70% 0.020 60);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body { min-height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out);
}

:root.theme-night body { line-height: 1.65; }

img { display: block; max-width: 100%; height: auto; }

p + p { margin-top: var(--space-md); }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--cinnabar);
  padding-bottom: 1px;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
a:hover {
  color: var(--cinnabar);
}
a:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 3px;
  border-bottom-color: transparent;
}

::selection { background: var(--cinnabar); color: var(--paper); }

/* Plate — atlas page wrapper */
.plate {
  max-width: var(--plate-max);
  margin-inline: auto;
  padding: var(--plate-pad);
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  row-gap: var(--space-3xl);
}

/* Coordinate frame — corner tick marks + plate labels */
.frame {
  position: absolute;
  inset: var(--plate-pad);
  pointer-events: none;
  z-index: 0;
  animation: frame-fade 700ms var(--ease-out) 220ms both;
}
@media (prefers-reduced-motion: reduce) {
  .frame { animation: none; }
}
@keyframes frame-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.frame__tick {
  position: absolute;
  width: 14px;
  height: 14px;
}
.frame__tick--tl { top: 0;    left: 0;    border-top: 1px solid var(--cinnabar); border-left: 1px solid var(--cinnabar); }
.frame__tick--tr { top: 0;    right: 0;   border-top: 1px solid var(--cinnabar); border-right: 1px solid var(--cinnabar); }
.frame__tick--bl { bottom: 0; left: 0;    border-bottom: 1px solid var(--cinnabar); border-left: 1px solid var(--cinnabar); }
.frame__tick--br { bottom: 0; right: 0;   border-bottom: 1px solid var(--cinnabar); border-right: 1px solid var(--cinnabar); }

.frame__label {
  position: absolute;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--ink-faded);
  white-space: nowrap;
}
.frame__label--tl { top: -5px;    left: 26px; }
.frame__label--tr { top: -5px;    right: 26px; }
.frame__label--bl { bottom: -5px; left: 26px; }
.frame__label--br { bottom: -5px; right: 26px; }

@media (max-width: 700px) {
  .frame__label--tr,
  .frame__label--bl,
  .frame__label--br { display: none; }
  .frame__label--tl {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

/* Header bar — sits inside plate, above masthead */
.bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--serif);
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--ink-faded);
}
.bar__name { color: var(--ink); }

.toggle {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-faded);
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.toggle:hover {
  border-color: var(--cinnabar);
  color: var(--cinnabar);
}
.toggle:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 2px;
}
.toggle svg { width: 14px; height: 14px; }
.toggle .toggle__sun  { display: none; }
.toggle .toggle__moon { display: block; }
:root.theme-night .toggle .toggle__sun  { display: block; }
:root.theme-night .toggle .toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-day):not(.theme-night) .toggle .toggle__sun  { display: block; }
  :root:not(.theme-day):not(.theme-night) .toggle .toggle__moon { display: none; }
}

/* Masthead */
.masthead {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(var(--space-lg), 6vw, var(--space-3xl));
  align-items: end;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--hairline);
}
.masthead__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}
.masthead__sub {
  font-family: var(--serif);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: var(--ink-faded);
  max-width: 38ch;
  line-height: 1.5;
}

.portrait {
  width: clamp(96px, 16vw, 152px);
  background: var(--paper-stain);
  border: 1px solid var(--hairline);
  padding: 6px;
  align-self: end;
}
.portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(0.85);
}
:root.theme-night .portrait img { filter: saturate(0.7) brightness(0.92); }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-day):not(.theme-night) .portrait img { filter: saturate(0.7) brightness(0.92); }
}
.portrait figcaption {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 10px;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--ink-faded);
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .masthead {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .portrait {
    width: 108px;
    justify-self: start;
    margin-top: var(--space-md);
  }
  .masthead__title { font-size: clamp(2rem, 10vw, 2.6rem); }
}

/* Body grid — content sits in main column with right-side gutter for marginalia */
.body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-3xl);
}

/* Section markers */
.section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.section__num {
  font-family: var(--serif);
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: var(--cinnabar);
  font-weight: 600;
}
.section__title {
  font-family: var(--serif);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--ink);
  flex: 0 0 auto;
}
.section__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
  align-self: center;
}

/* Lede — the about paragraph with drop cap */
.lede {
  max-width: var(--measure);
}
.lede__body {
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--ink);
}
.lede__body::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  float: left;
  font-size: 4.4em;
  line-height: 0.85;
  padding: 0.05em 0.12em 0 0;
  margin: 0.05em 0.12em -0.1em 0;
  color: var(--cinnabar);
}

/* Index of works */
.works {
  display: grid;
  grid-template-columns: 1fr;
}
.work {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: clamp(var(--space-md), 3vw, var(--space-xl));
  align-items: baseline;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--hairline);
  position: relative;
  transition: background 240ms var(--ease-out);
}
.work:last-child { border-bottom: 1px solid var(--hairline); }
.work:hover { background: var(--paper-stain); }

.work__num {
  font-family: var(--serif);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--ink-faded);
  font-weight: 600;
  white-space: nowrap;
  align-self: start;
  padding-top: 0.4em;
}
.work__body { min-width: 0; }
.work__title {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-xs);
}
.work__title a {
  border-bottom: none;
  background-image: linear-gradient(var(--cinnabar), var(--cinnabar));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 260ms var(--ease-out), color 180ms var(--ease-out);
}
.work__title a:hover {
  background-size: 100% 1px;
  color: var(--cinnabar);
}
.work__desc {
  max-width: 62ch;
  color: var(--ink-faded);
  font-size: var(--text-base);
  line-height: 1.6;
}
.work__desc p { margin: 0; }

.work__links {
  display: flex;
  gap: var(--space-md);
  font-family: var(--serif);
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-weight: 500;
  white-space: nowrap;
  padding-top: 0.6em;
  align-self: start;
}
.work__link {
  color: var(--ink-faded);
  border-bottom: 1px solid transparent;
}
.work__link:hover {
  color: var(--cinnabar);
  border-bottom-color: var(--cinnabar);
}

@media (max-width: 720px) {
  .work {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num   body"
      ".     links";
    row-gap: var(--space-sm);
  }
  .work__num   { grid-area: num; }
  .work__body  { grid-area: body; }
  .work__links { grid-area: links; padding-top: 0; }
}

/* Marginalia — ledger of affiliations, hobbies, etc. */
.marginalia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-xl) var(--space-2xl);
}
.marg {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}
.marg__head {
  font-family: var(--serif);
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--cinnabar);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--space-xs);
}
.marg__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--ink-faded);
  line-height: 1.5;
}
.marg__list li { display: flex; gap: var(--space-xs); align-items: baseline; }
.marg__role {
  font-family: var(--serif);
  font-size: 10px;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  color: var(--cinnabar-mute);
  flex: 0 0 auto;
}
.marg__entity { color: var(--ink); flex: 1 1 auto; }

/* Elsewhere — typographic catalog of social links */
.elsewhere {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-sm);
  font-size: var(--text-sm);
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  line-height: 2;
}
.elsewhere a {
  border-bottom: none;
  color: var(--ink);
  position: relative;
}
.elsewhere a::after {
  content: '·';
  margin-left: var(--space-sm);
  color: var(--hairline);
}
.elsewhere a:last-child::after { content: ''; margin-left: 0; }
.elsewhere a:hover { color: var(--cinnabar); }

/* Formerly — past works as a dense catalog */
.formerly {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-md);
  font-family: var(--serif);
  font-size: var(--text-base);
  color: var(--ink);
  line-height: 1.7;
  max-width: var(--measure);
}
.formerly a { border-bottom: none; }
.formerly a::after {
  content: '·';
  margin-left: var(--space-md);
  color: var(--hairline);
}
.formerly span:last-of-type::after,
.formerly a:last-of-type::after { content: ''; }

/* Dispatches — Medium feed list */
.dispatches { display: grid; gap: 0; max-width: var(--measure); }
.dispatch {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-top: 1px solid var(--hairline);
}
.dispatch:last-child { border-bottom: 1px solid var(--hairline); }
.dispatch__title {
  font-family: var(--serif);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.dispatch__title a { border-bottom: none; }
.dispatch__title a:hover { color: var(--cinnabar); }
.dispatch__date {
  font-family: var(--serif);
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--ink-faded);
  white-space: nowrap;
}
.dispatches__empty {
  font-style: italic;
  color: var(--ink-faded);
  font-family: var(--serif);
  font-size: var(--text-sm);
}

/* Support */
.support {
  display: grid;
  gap: var(--space-md);
  max-width: var(--measure);
}
.support__line {
  font-family: var(--serif);
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.55;
}
.support__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}
.support__buttons iframe { vertical-align: middle; }

/* Footer */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-lg);
  font-family: var(--serif);
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--ink-faded);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.footer p { margin: 0; }

/* Page reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 600ms var(--ease-out) both; }
  .reveal--delay-1 { animation-delay: 80ms; }
  .reveal--delay-2 { animation-delay: 160ms; }
  .reveal--delay-3 { animation-delay: 240ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 404 */
.notfound {
  display: grid;
  place-items: center;
  min-height: 60vh;
  text-align: center;
  gap: var(--space-md);
}
.notfound__code {
  font-family: var(--serif);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 600;
  color: var(--cinnabar);
  line-height: 1;
}
.notfound__msg {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: var(--ink-faded);
}

/* Skip link (a11y) */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--plate-pad);
  top: var(--plate-pad);
  background: var(--paper);
  border: 1px solid var(--cinnabar);
  padding: var(--space-xs) var(--space-md);
  z-index: 10;
}

/* ─── Technical metadata ─────────────────────────────────────────── */

/* Status line — sits beneath masthead subtitle */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faded);
}
.status__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--woodblock);
  flex-shrink: 0;
  position: relative;
}
.status__dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--woodblock);
  opacity: 0.22;
  animation: pulse 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .status__dot::before { animation: none; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.22; }
  50%      { transform: scale(1.6); opacity: 0; }
}
.status a {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.status a:hover {
  color: var(--cinnabar);
  border-bottom-color: var(--cinnabar);
}
.status__sep {
  color: var(--hairline);
  margin-inline: var(--space-xs);
}

/* Stack tags — under each project description */
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-sm);
  margin-top: var(--space-sm);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.stack__lead {
  color: var(--cinnabar-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
}
.stack__item {
  position: relative;
}
.stack__item:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-sm);
  color: var(--hairline);
}

/* Practice — specialties as a code-spec listing */
.practice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  max-width: var(--measure);
}
.practice__item {
  border: 1px solid var(--hairline);
  padding: 5px var(--space-sm) 4px;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.practice__item:hover {
  border-color: var(--cinnabar);
  color: var(--cinnabar);
}

/* Topology — logic map of the practice */
.topology {
  margin-top: var(--space-2xl);
}
.topology__intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--ink-faded);
  max-width: var(--measure);
  margin: 0 0 var(--space-xl);
}
.topology__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--plate-inner-pad));
  padding: 0 var(--plate-inner-pad);
}
.topology__map {
  width: 100%;
  min-width: 760px;
  height: auto;
  display: block;
  overflow: visible;
}
.topology__contour {
  stroke: var(--ink-quiet);
  stroke-width: 0.5;
  fill: none;
  opacity: 0.18;
}
.topology__contour--layer-0 { opacity: 0.26; }
.topology__contour--layer-1 { opacity: 0.18; }
.topology__contour--layer-2 { opacity: 0.10; }
.topology__edge {
  stroke: var(--hairline);
  stroke-width: 0.7;
  fill: none;
  opacity: 0.75;
}
.topology__edge--meta {
  stroke: var(--ink-quiet);
  stroke-width: 0.6;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}
.topology__node-dot {
  r: 3.4;
  fill: var(--ink);
}
.topology__node--allied .topology__node-dot {
  r: 2.6;
  fill: var(--paper);
  stroke-width: 1;
}
.topology__node--geo      .topology__node-dot { fill: var(--g-geo); }
.topology__node--lang     .topology__node-dot { fill: var(--g-lang); }
.topology__node--backend  .topology__node-dot { fill: var(--g-backend); }
.topology__node--frontend .topology__node-dot { fill: var(--g-frontend); }
.topology__node--ai       .topology__node-dot { fill: var(--g-ai); }
.topology__node--realtime .topology__node-dot { fill: var(--g-realtime); }
.topology__node--ops      .topology__node-dot { fill: var(--g-ops); }
.topology__node--allied.topology__node--geo      .topology__node-dot { stroke: var(--g-geo); fill: var(--paper); }
.topology__node--allied.topology__node--lang     .topology__node-dot { stroke: var(--g-lang); fill: var(--paper); }
.topology__node--allied.topology__node--backend  .topology__node-dot { stroke: var(--g-backend); fill: var(--paper); }
.topology__node--allied.topology__node--frontend .topology__node-dot { stroke: var(--g-frontend); fill: var(--paper); }
.topology__node--allied.topology__node--ai       .topology__node-dot { stroke: var(--g-ai); fill: var(--paper); }
.topology__node--allied.topology__node--realtime .topology__node-dot { stroke: var(--g-realtime); fill: var(--paper); }
.topology__node--allied.topology__node--ops      .topology__node-dot { stroke: var(--g-ops); fill: var(--paper); }
.topology__node-label {
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 500;
  fill: var(--ink);
}
.topology__node--allied .topology__node-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  fill: var(--ink-faded);
  letter-spacing: 0.02em;
}
.topology__node--arch .topology__node-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  font-weight: 500;
  fill: var(--ink-quiet);
  letter-spacing: 0.01em;
}
.topology__legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
  margin: var(--space-lg) 0 0;
  padding: 0;
}
.topology__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.topology__swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.topology__swatch--geo      { background: var(--g-geo); }
.topology__swatch--lang     { background: var(--g-lang); }
.topology__swatch--backend  { background: var(--g-backend); }
.topology__swatch--frontend { background: var(--g-frontend); }
.topology__swatch--ai       { background: var(--g-ai); }
.topology__swatch--realtime { background: var(--g-realtime); }
.topology__swatch--ops      { background: var(--g-ops); }
.topology__swatch--allied {
  background: var(--paper);
  border: 1px solid var(--ink-quiet);
}
.topology__legend-arch {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faded);
}