/* The Data Centers in LEO — web edition
 *
 * The page is black and white. Colour appears only on data: orange for the
 * orbital or projected case, cool blue for secondary series, grey for
 * superseded. Nothing in the chrome competes with a figure.
 */

:root {
  --page: #FDFDFC;
  --ink: #0F1A24;          /* blue-black */
  --ink-soft: #4A5561;
  --ink-faint: #8A939C;
  --rule: #DCE3E8;
  --rule-soft: #EDF1F4;
  --surface: #F6F8F9;

  /* data only */
  --orbit: #4E2A78;        /* orbital / projected */
  --cool: #4A6E8A;         /* secondary series */
  --legacy: #9CA3AF;       /* superseded */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --sidebar: 16.5rem;

  /* A printed book on paper: white ground, blue-black ink, no dark mode. */
  color-scheme: only light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---------------------------------------------------------------- layout */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  align-items: start;
}

.main { min-width: 0; padding: 0 3rem 6rem; }

.page { max-width: 74rem; margin: 0 auto; padding: 3.25rem 1.5rem 6rem; }

/* --------------------------------------------------------------- sidebar */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--rule);
  padding: 2.25rem 1.25rem 3rem 1.75rem;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  background: var(--page);
}

.sidebar .brand {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.25;
  text-decoration: none;
  margin-bottom: 0.35rem;
}

.sidebar .brand-sub {
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.sidebar .partgroup { margin-bottom: 1.15rem; }

.sidebar .partlabel {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 0.45rem;
}

.sidebar ol { list-style: none; margin: 0; padding: 0; }

.sidebar li a {
  display: flex;
  gap: 0.55rem;
  padding: 0.2rem 0;
  text-decoration: none;
  color: var(--ink-soft);
}

.sidebar li a:hover { color: var(--ink); }

.sidebar li a .n {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  min-width: 1.1rem;
  text-align: right;
  flex: none;
}

.sidebar li a.here { color: var(--ink); font-weight: 600; }
.sidebar li a.here .n { color: var(--orbit); }

/* Source notes and appendices are subordinate: one line each, never wrapped. */
.sidebar li a.sub { font-size: 11.5px; }

.sidebar li a.sub span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sidebar li a.sub .n { color: var(--rule); }
.sidebar li a.sub.here .n { color: var(--orbit); }

.sidebar .backlink {
  display: inline-block;
  margin-top: 1rem;
  color: var(--ink-faint);
  text-decoration: none;
  font-size: 11.5px;
}

/* ----------------------------------------------------------------- spine */

.spine {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 2.5rem;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  max-width: 46rem;
}

.spine a {
  flex: 1;
  padding: 0.5rem 0.65rem;
  text-align: center;
  color: var(--ink-faint);
  border-right: 1px solid var(--rule);
  background: var(--page);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.spine a:last-child { border-right: 0; }

.spine a:hover { color: var(--ink); background: var(--surface); }

.spine a.on { color: var(--page); background: var(--ink); font-weight: 600; }
.spine a.on:hover { background: var(--ink); }

/* -------------------------------------------------- Part IV · skeleton */

.skeleton { margin: 0 0 2.5rem; }

.skelwrap {
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--page);
  max-width: 46rem;
  font-family: var(--sans);
}

/* the compact strip — nine glyphs at the weight of one line of type */

.skelstrip { display: flex; }

.skelcell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.2rem 0.45rem;
  border-right: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink-faint);
  position: relative;
}

.skelcell:last-child { border-right: 0; }

.skelcell svg { width: 30px; height: 21px; display: block; }
.skelcell svg g { stroke: var(--ink-faint); }
.skelcell svg g circle[fill] { fill: var(--ink-faint); }

.skellabel {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.skelch {
  position: absolute;
  top: 0.25rem;
  left: 0.3rem;
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  opacity: 0.55;
}

.skelcell:hover { background: var(--surface); color: var(--ink); }
.skelcell:hover svg g { stroke: var(--ink); }
.skelcell:hover svg g circle[fill] { fill: var(--ink); }

.skelcell.here { background: #F2EEF8; color: var(--orbit); }
.skelcell.here svg g { stroke: var(--orbit); }
.skelcell.here svg g circle[fill] { fill: var(--orbit); }
.skelcell.here .skellabel { font-weight: 700; }
.skelcell.here .skelch { color: var(--orbit); opacity: 1; }

/* the whole machine, only when asked for */

.skelfull { display: none; border-top: 1px solid var(--rule); }
.skelwrap.open .skelfull { display: block; }
.skelfull svg { display: block; width: 100%; height: auto; }

.skelfoot {
  border-top: 1px solid var(--rule);
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.skeltoggle {
  flex: none;
  font-family: var(--sans);
  font-size: 10.5px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--page);
  color: var(--ink-faint);
  cursor: pointer;
  white-space: nowrap;
}

.skeltoggle:hover { color: var(--ink); border-color: var(--ink-faint); }

.skelwrap .layer { cursor: pointer; }

.skelwrap .layer rect,
.skelwrap .layer polygon,
.skelwrap .layer path,
.skelwrap .layer circle,
.skelwrap .layer line { transition: stroke 0.12s, fill 0.12s; }

.skelwrap .layer:hover rect:not([fill="transparent"]),
.skelwrap .layer:focus rect:not([fill="transparent"]),
.skelwrap .layer.here rect:not([fill="transparent"]),
.skelwrap .layer:hover polygon,
.skelwrap .layer:focus polygon,
.skelwrap .layer.here polygon { stroke: var(--orbit); }

.skelwrap .layer:hover circle,
.skelwrap .layer:focus circle,
.skelwrap .layer.here circle { fill: var(--orbit); }

.skelwrap .layer.here rect:not([fill="transparent"]),
.skelwrap .layer.here polygon { fill: #F2EEF8; }

.skelwrap .layer:focus { outline: none; }

.skelcap {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.7rem;
}

.skelcap em { color: var(--ink-faint); font-style: italic; }

.skelcap .skelno {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orbit);
  font-weight: 700;
}

.skelcap .skelname { font-weight: 600; color: var(--ink); }
.skelcap .skelnote { color: var(--ink-faint); flex: 1 1 14rem; }

/* ---------------------------------------------------------- chapter head */

.chapterhead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem 0;
  margin-bottom: 0.5rem;
  background: var(--page);
  border-bottom: 2px solid var(--ink);
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

.chapterhead .home { text-decoration: none; color: var(--ink-soft); }
.chapterhead .home:hover { color: var(--ink); }

.chapterlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
}

.chapterlinks .lkwhat { color: var(--rule); font-size: 10px; letter-spacing: 0.06em; }

.chapterlinks a {
  text-decoration: none;
  color: var(--ink-faint);
  border-bottom: 1px solid transparent;
}

.chapterlinks a:hover { color: var(--ink); border-bottom-color: var(--rule); }

.chapterlinks .lkfund {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--page);
  background: var(--orbit);
  border: 1px solid var(--orbit);
  border-radius: 2px;
  padding: 0.45rem 0.85rem;
  margin-left: 0.35rem;
  white-space: nowrap;
  transition: background 0.12s, box-shadow 0.12s;
}

.chapterlinks .lkfund:hover {
  color: var(--page);
  background: #3E2160;
  border-color: #3E2160;
  box-shadow: 0 2px 8px rgba(78, 42, 120, 0.25);
}

.crumb {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--orbit);
  margin: 2.25rem 0 0.6rem;
}

h1 {
  font-size: 2.35rem;
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 1.6rem;
  max-width: 24ch;
}

h2 { font-size: 1.6rem; font-weight: 400; line-height: 1.2; margin: 0 0 0.6rem; }

h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 2.6rem 0 0.75rem;
}

hr { border: 0; margin: 0; }
hr.heavy { border-top: 2px solid var(--ink); margin: 1.1rem 0; }
hr.rule { border-top: 1px solid var(--rule); margin: 0.85rem 0; }

/* --------------------------------------------------------------- reading */

.reading {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  gap: 3.25rem;
  align-items: start;
}

.prose { min-width: 0; }
.prose p { margin: 0 0 1.15rem; }

.prose p.li { padding-left: 1.15rem; position: relative; margin-bottom: 0.6rem; }

.prose p.li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.4rem;
  height: 1px;
  background: var(--orbit);
}

.prose .figref {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  border-left: 2px solid var(--rule);
  padding-left: 0.7rem;
  margin: 1.6rem 0;
}

.callout {
  border-left: 3px solid var(--orbit);
  background: var(--surface);
  padding: 1rem 1.15rem;
  margin: 1.9rem 0;
  font-size: 16.5px;
}

.note-item {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
}

.tablegrid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
}

.tablegrid span:first-child { color: var(--ink); font-weight: 600; min-width: 12rem; }

/* ------------------------------------------------------------------ rail */

.rail { position: sticky; top: 2rem; font-family: var(--sans); }

.railcard {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.9rem;
  margin: 0 0 1.25rem;
  background: var(--page);
}

.railcard.empty { color: var(--ink-faint); font-size: 12.5px; }
.railcard.empty p { margin: 0; }

.railhead {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.railcard img { width: 100%; height: auto; display: block; border: 1px solid var(--rule-soft); }

.railcard figcaption {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}

/* ----------------------------------------------------------------- pager */

.pager { display: flex; justify-content: space-between; gap: 1.5rem; font-family: var(--sans); font-size: 13px; }
.pager a { text-decoration: none; color: var(--ink-soft); max-width: 20rem; }
.pager a:hover { color: var(--orbit); }

/* ------------------------------------------------------------ index page */

.masthead { padding: 1rem 0 0; }
.masthead h1 { font-size: 3.1rem; margin-bottom: 0.4rem; max-width: 18ch; }
.masthead .sub { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 1.25rem; }

.stamp {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}

.stamp a { color: var(--orbit); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1.5rem 2rem;
  margin: 1.5rem 0;
}

.card h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--orbit); }
.card p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 0.6rem; }

.cardmeta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.card .more { font-family: var(--sans); font-size: 11.5px; color: var(--orbit); text-decoration: none; }

.card.hasmodel .cardmeta em { font-style: normal; color: var(--orbit); }

.partbreak { grid-column: 1 / -1; margin-top: 1.25rem; }
.partbreak h2 { font-size: 1.35rem; }
.partdek { font-size: 14.5px; color: var(--ink-soft); max-width: 46rem; margin: 0.35rem 0 0; }

/* ---------------------------------------------------------------- models */

.model {
  border: 1px solid var(--ink);
  border-radius: 2px;
  margin: 2.5rem 0;
  font-family: var(--sans);
  background: var(--page);
}

.model > header {
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.model .kicker {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orbit);
  font-weight: 700;
}

.model h4 { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; margin: 0.15rem 0 0; }

.model .reset {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.model .reset:hover { color: var(--ink); border-color: var(--ink-faint); }

.model .body { padding: 1rem; }

.controls { display: grid; gap: 0.85rem; }

.ctrl { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; align-items: baseline; }
.ctrl label { font-size: 12px; color: var(--ink-soft); }

.ctrl output {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.ctrl input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--orbit); }

.presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }

.presets button {
  font-family: var(--sans);
  font-size: 11px;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--page);
  color: var(--ink-soft);
  cursor: pointer;
}

.presets button:hover { border-color: var(--ink-faint); color: var(--ink); }
.presets button.on { background: var(--ink); color: var(--page); border-color: var(--ink); }

.readout {
  border-top: 1px solid var(--rule);
  margin-top: 1rem;
  padding-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.85rem;
}

.readout .cell .k {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}

.readout .cell .v {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.readout .cell .v.data { color: var(--orbit); }
.readout .cell .v.cool { color: var(--cool); }
.readout .cell .sub { font-size: 11px; color: var(--ink-faint); margin-top: 0.15rem; }

.model figure { margin: 1rem 0 0; }
.model svg { width: 100%; height: auto; display: block; }

.model .foot {
  border-top: 1px solid var(--rule);
  margin-top: 1rem;
  padding-top: 0.7rem;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

.model .foot code { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }

/* falsifiers */

.falsifiers { display: grid; gap: 1.25rem; }

.fgroup > .fhead {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.5rem;
}

.fitem { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0; font-size: 13px; line-height: 1.45; }
.fitem input { margin-top: 0.28rem; accent-color: var(--orbit); flex: none; }
.fitem span { color: var(--ink-soft); }
.fitem input:checked + span { color: var(--ink); }

/* ---------------------------------------------------- interactive figures */

.ifig {
  margin: 2.5rem 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--page);
  font-family: var(--sans);
}

.ifighead {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  align-items: baseline;
}

.ifighead .figno {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orbit);
  font-weight: 700;
}

.ifighead .figtitle { font-family: var(--serif); font-size: 1rem; }

.ifigsvg { padding: 0.85rem 0.9rem 0.25rem; }
.ifigsvg svg { display: block; width: 100%; height: auto; overflow: visible; }

.ifig .bar:focus { outline: none; }
.ifig .bar:focus rect { stroke: var(--ink); stroke-width: 1.5; }

.ifigtip {
  padding: 0.5rem 0.9rem;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-soft);
  min-height: 2.6rem;
}

.ifigtip em { color: var(--ink-faint); }
.ifigtip strong { color: var(--ink); font-weight: 600; }
.ifigtip .rat { color: var(--orbit); font-weight: 700; font-family: var(--mono); }

.ifigtools {
  display: flex;
  gap: 0.4rem;
  padding: 0 0.9rem 0.75rem;
}

.figbtn {
  font-family: var(--sans);
  font-size: 11px;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--page);
  color: var(--ink-soft);
  cursor: pointer;
}

.figbtn:hover { border-color: var(--ink-faint); color: var(--ink); }

.ifig figcaption {
  border-top: 1px solid var(--rule);
  padding: 0.6rem 0.9rem;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------ pdf button */

.pdfbtn {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 40;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--page);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.5rem 0.8rem;
  box-shadow: 0 2px 10px rgba(15, 26, 36, 0.16);
}

.pdfbtn:hover { background: var(--orbit); border-color: var(--orbit); }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 62rem) {
  .layout { grid-template-columns: 1fr; }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 1.5rem 1.25rem;
  }

  .sidebar .scroller { max-height: 15rem; overflow-y: auto; }

  .main { padding: 2rem 1.25rem 4rem; }
  .page { padding: 2rem 1.25rem 4rem; }

  .reading { grid-template-columns: 1fr; gap: 1.75rem; }
  .rail { position: static; }

  h1 { font-size: 1.85rem; }
  .masthead h1 { font-size: 2.2rem; }
  .spine { font-size: 9px; }
  .spine div { padding: 0.45rem 0.25rem; }
}

@media print {
  .sidebar, .spine, .skeleton, .pager, .pdfbtn, .model .presets, .model .reset, .ifigtools { display: none; }
  .reading { grid-template-columns: 1fr; }
}