/* 04b-orbit-navigator: Orbit navigator (upgrade of 04-orbit). One stylesheet for index.html (the
   navigator and mission log) and chart.html (the full star chart). Two themes on <html data-theme>:
   dark  = deep-space navy with gold (native; also the no-JavaScript look),
   light = a printed celestial atlas: pale paper, navy ink, brass, sector hues deepened for paper.
   Every colour, including the inline SVG dial and chart, comes from the tokens below. */

:root:not([data-theme]), :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f1f;
  --bg-2: #0c1328;
  --panel: #111a35;
  --panel-2: #18244a;
  --line: #2a3866;
  --line-soft: #1b2648;
  --ink: #eceff8;
  --ink-2: #c5cde2;
  --muted: #9ea9c8;
  --gold: #f0ca58;
  --gold-soft: rgba(240, 202, 88, .45);
  --gold-wash: rgba(240, 202, 88, .1);
  --gold-ring: rgba(240, 202, 88, .12);
  --gold-glow: rgba(240, 202, 88, .55);
  --on-gold: #0a0f1f;
  --hover: rgba(255, 255, 255, .04);
  --top-bg: rgba(10, 15, 31, .94);
  --top-bg-blur: rgba(10, 15, 31, .8);
  --page-glow-1: rgba(52, 76, 160, .28);
  --page-glow-2: rgba(240, 202, 88, .05);
  --status-bg: #172350;
  --status-line: rgba(240, 202, 88, .3);
  --lead-bg: #1b2347;
  --foot-bg: #070b17;
  --photo-bg: #070b17;
  --shadow: 0 20px 60px -30px rgba(0, 0, 0, .8);
  --edge-shadow: rgba(0, 0, 0, .5);
  --held: #8fe0b0;
  --expired: #ffb3a7;
  --switch-bg: #070b17;

  /* navigator dial */
  --dial-track: #2f3f72;
  --dial-dot: #8f9cc4;
  --dial-centre: #0e1633;

  /* chart */
  --disc-0: #16224a;
  --disc-1: #0d1531;
  --disc-2: #090f24;
  --disc-edge: #2a3866;
  --glow-0: #ffe7a3;
  --glow-0a: .55;
  --glow-1: #f0ca58;
  --glow-1a: .2;
  --sky-dot: #d6defa;
  --grat: rgba(158, 169, 200, .16);
  --c-line: rgba(240, 202, 88, .45);
  --spark: #fff2c6;
  --core: #ffffff;
  --label-halo: #0e1633;
  --dial: #2a3866;
  --tick: #9ea9c8;
  --lane-track: rgba(150, 170, 235, .07);
  --lane-gap: rgba(158, 169, 200, .35);
  --deco: rgba(240, 202, 88, .28);
  --dot-edge: #0a0f1f;
  --sat-head: #ffffff;
  --sat-tail: #c4d2ff;

  /* DESIGN-SPEC sector hues. AI is lifted from #8a49ba so markers and rails reach 3:1 on navy. */
  --s-space: #f0ca58;
  --s-academia: #8ed1fc;
  --s-defense: #79e6ad;
  --s-enterprise: #d4af37;
  --s-legal: #c9a4f0;
  --s-smallbiz: #f78da7;
  --s-community: #ff9f6e;
  --s-ai: #a87be0;

  /* Accent names used by strengths, projects and skill groups in the data. */
  --a-cobalt: #7ea6ff;
  --a-violet: #b79cff;
  --a-amber: #f0c25a;
  --a-teal: #5fd3c4;
  --a-crimson: #ff7a85;
  --a-orange: #ffa36b;
  --a-sky: #8ed1fc;
  --a-magenta: #f28bd0;
  --a-green: #7fdc9a;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4efe4;
  --bg-2: #ede6d6;
  --panel: #fbf8f1;
  --panel-2: #f2ecdf;
  --line: #cdc4ae;
  --line-soft: #e2dac8;
  --ink: #141d3a;
  --ink-2: #343f5e;
  --muted: #535d78;
  --gold: #7d5400;
  --gold-soft: rgba(125, 84, 0, .42);
  --gold-wash: rgba(125, 84, 0, .08);
  --gold-ring: rgba(125, 84, 0, .14);
  --gold-glow: rgba(125, 84, 0, .4);
  --on-gold: #fffaf0;
  --hover: rgba(20, 29, 58, .04);
  --top-bg: rgba(244, 239, 228, .95);
  --top-bg-blur: rgba(244, 239, 228, .82);
  --page-glow-1: rgba(40, 70, 150, .07);
  --page-glow-2: rgba(135, 91, 0, .05);
  --status-bg: #f5ecd4;
  --status-line: rgba(135, 91, 0, .32);
  --lead-bg: #f3e9d0;
  --foot-bg: #ebe4d3;
  --photo-bg: #e9e2d2;
  --shadow: 0 18px 46px -30px rgba(20, 29, 58, .45);
  --edge-shadow: rgba(20, 29, 58, .12);
  --held: #1b6b40;
  --expired: #a3261a;
  --switch-bg: #e4dccb;

  --dial-track: #b9b19c;
  --dial-dot: #6b7390;
  --dial-centre: #fbf8f1;

  --disc-0: #faf8f2;
  --disc-1: #eff0ec;
  --disc-2: #e4e8ec;
  --disc-edge: #8f97ad;
  --glow-0: #b98a1e;
  --glow-0a: .2;
  --glow-1: #b98a1e;
  --glow-1a: .07;
  --sky-dot: #1b2a55;
  --grat: rgba(20, 29, 58, .2);
  --c-line: rgba(135, 91, 0, .55);
  --spark: #18234a;
  --core: #faf8f2;
  --label-halo: #f6f5f0;
  --dial: #9aa1b6;
  --tick: #535d78;
  --lane-track: rgba(30, 50, 110, .06);
  --lane-gap: rgba(20, 29, 58, .38);
  --deco: rgba(125, 84, 0, .42);
  --dot-edge: #f4efe4;
  --sat-head: #141d3a;
  --sat-tail: #2d3a6b;

  --s-space: #a15f00;
  --s-academia: #1d63a5;
  --s-defense: #16764a;
  --s-enterprise: #6e6510;
  --s-legal: #8b3aa8;
  --s-smallbiz: #b0285a;
  --s-community: #b8401c;
  --s-ai: #5a3aa6;

  --a-cobalt: #2a55c4;
  --a-violet: #6a44c0;
  --a-amber: #946000;
  --a-teal: #0d776b;
  --a-crimson: #b32035;
  --a-orange: #b04e10;
  --a-sky: #1d63a5;
  --a-magenta: #a42f7c;
  --a-green: #22783b;
}

:root {
  --f-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --radius: 16px;
  --gut: clamp(16px, 3vw, 48px);
  --dial-size: 72px;   /* phones; 96 px from 744 px, 120 px from 1200 px */
  --top-h: 82px;       /* sticky header height, for scroll margins and the docked reader */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 70% 50% at 72% 0%, var(--page-glow-1), transparent 70%),
    radial-gradient(ellipse 40% 30% at 8% 18%, var(--page-glow-2), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 400 17px/1.65 var(--f-body);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-color: var(--gold-soft); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4, h5 { font-family: var(--f-display); line-height: 1.2; margin: 0; color: var(--ink); }
p { margin: 0 0 .8em; }
ul, ol { margin: 0; }
[id] { scroll-margin-top: calc(var(--top-h) + 8px); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip, .skip-chart {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--gold); color: var(--on-gold); font: 600 15px var(--f-display);
  padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip:hover, .skip-chart:hover { color: var(--on-gold); }
.skip:focus { top: 12px; }
.skip-chart { top: 4px; left: -10000px; }
.skip-chart:focus { left: 4px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

.kicker {
  font: 600 13px/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 10px; display: flex; align-items: center; gap: 10px;
}
.kicker::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--gold); box-shadow: 0 0 0 4px var(--gold-ring);
}
.band { padding-block: clamp(44px, 6vw, 88px); border-top: 1px solid var(--line-soft); }
.band h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; }
.intro { color: var(--ink-2); max-width: 68ch; margin-bottom: 24px; }
.glyph { width: .8em; height: .8em; fill: var(--gold); flex: none; }
.tag { font: 600 12.5px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-right: 6px; }

/* Evidence status words. The data's two values only: public_artifact and self_reported. */
.vtag {
  display: inline-block; font: 600 12px/1.25 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; vertical-align: middle;
}
.vtag--public_artifact { color: var(--held); border-color: currentColor; }
.vtag--self_reported { color: var(--muted); }

/* ---------- top bar: the instrument panel ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--top-bg);
  border-bottom: 1px solid var(--line-soft);
}
@supports (backdrop-filter: blur(6px)) { .top { background: var(--top-bg-blur); backdrop-filter: blur(10px); } }
.top__in {
  max-width: 1400px; margin: 0 auto; padding: 5px var(--gut);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "dial brand ctrl" "dial nav nav";
  align-items: center; column-gap: 12px; row-gap: 0;
}
.brand { grid-area: brand; min-width: 0; display: grid; gap: 1px; align-self: center; }
.brand__name { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 16px/1.3 var(--f-display); white-space: nowrap; min-width: 0; }
.brand__name a { text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__ring { fill: none; stroke: var(--line); stroke-width: 1.6; }
.brand__ring--in { stroke: var(--gold-soft); stroke-dasharray: 3 3; }
.brand__star { fill: var(--gold); }
.brand__moon { fill: var(--s-academia); }
.brand__cv { font: 600 12px var(--f-display); letter-spacing: .14em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
/* Era readout: one span per era, shown by the header's data-era. Hidden on phones (no room). */
.brand__out { display: none; margin: 0; font: 500 13px/1.3 var(--f-display); color: var(--muted); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.out { display: none; }
.out__k { color: var(--gold); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; margin-right: 6px; }
.top[data-era="0"] .out--0, .top[data-era="1"] .out--1, .top[data-era="2"] .out--2, .top[data-era="3"] .out--3,
.top[data-era="4"] .out--4, .top[data-era="5"] .out--5, .top[data-era="6"] .out--6 { display: inline; }

.nav { grid-area: nav; min-width: 0; margin-inline: -8px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 2px; }
.nav a {
  display: block; padding: 6px 9px; border-radius: 8px;
  font: 500 14.5px/1.35 var(--f-display); color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav a:hover { color: var(--gold); background: var(--hover); }

.ctrl { grid-area: ctrl; display: flex; align-items: center; gap: 8px; justify-self: end; }
.chartlink {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 12px 5px 9px; border-radius: 99px;
  border: 1px solid var(--gold-soft); color: var(--gold); font: 600 14px var(--f-display); text-decoration: none; white-space: nowrap;
}
.chartlink:hover { background: var(--gold-wash); color: var(--gold); }
.chartlink__ic { width: 18px; height: 18px; flex: none; }
.chartlink__ic circle { fill: none; stroke: currentColor; stroke-width: 1.3; }
.chartlink__ic circle + circle { stroke-dasharray: 2 2.5; }
.chartlink__ic path { fill: currentColor; }

/* theme switch: one button, label stays "Dark theme"; aria-pressed (and html[data-theme]) carry the state */
.theme {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  min-height: 36px; padding: 4px 12px 4px 5px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  font: 500 14.5px var(--f-display); cursor: pointer;
}
.theme:hover { border-color: var(--gold-soft); color: var(--ink); }
.theme__sw { position: relative; width: 46px; height: 26px; border-radius: 99px; background: var(--switch-bg); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.theme__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); display: grid; place-items: center;
}
:root[data-theme="dark"] .theme__knob { transform: translateX(20px); }
.theme__knob svg { grid-area: 1 / 1; width: 14px; height: 14px; }
.theme__sun { fill: var(--on-gold); stroke: var(--on-gold); stroke-width: 2; stroke-linecap: round; }
.theme__moon { fill: var(--on-gold); }
:root[data-theme="dark"] .theme__sun, :root[data-theme="light"] .theme__moon { display: none; }
html:not([data-theme]) [data-theme-toggle] { display: none; }

/* ---------- the navigator dial ----------
   Two stacked SVGs: the ring (nodes, ticks) turns; the face (index mark, centre, numeral) stays put.
   The ring is an HTML-level element, so its transform animation is composited. */
.dial { grid-area: dial; position: relative; width: var(--dial-size); height: var(--dial-size); flex: none; }
.dial__ring, .dial__face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.dial__face { pointer-events: none; }
.dial__ring { transform-origin: 50% 50%; }
.dial__track { fill: none; stroke: var(--dial-track); stroke-width: 1.5; }
.dial__tick { stroke: var(--dial-dot); stroke-width: 1.5; opacity: .45; }
.dial__node { cursor: pointer; outline: none; }
.dial__hit { fill: transparent; }
.dial__halo { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; }
.dial__dot { fill: var(--dial-dot); stroke: var(--bg); stroke-width: 1.5; }
.dial__node:hover .dial__halo { opacity: .8; }
.dial__node:focus-visible .dial__halo { opacity: 1; stroke-width: 3; }
.dial__node:hover .dial__dot, .dial__node:focus-visible .dial__dot { fill: var(--gold); }
/* the lit node: the era in view */
.dial__node[aria-current] .dial__dot { fill: var(--gold); stroke: var(--gold); r: 6; }
.dial__node[aria-current] .dial__halo { opacity: .9; stroke-dasharray: 2.5 3.5; }
.dial__index { fill: var(--gold); }
.dial__centre { fill: var(--dial-centre); stroke: var(--line); stroke-width: 1; }
.dial__home { fill: var(--gold); opacity: .9; }
.dial__num { display: none; font: 600 26px var(--f-display); fill: var(--ink); letter-spacing: .02em; }
.top[data-era="1"] .dial__num--1, .top[data-era="2"] .dial__num--2, .top[data-era="3"] .dial__num--3,
.top[data-era="4"] .dial__num--4, .top[data-era="5"] .dial__num--5, .top[data-era="6"] .dial__num--6 { display: block; }
.top:not([data-era="0"]) .dial__home { display: none; }

/* Rotation. Scroll-linked when the browser can do it (compositor-driven, no script per frame; script.js
   refines the keyframes to the real era positions). Otherwise the ring turns to the last era seen, with a
   transition. Under reduced motion the ring never turns: the lit node and the numeral still update. */
@keyframes dial-turn {
  0%, 30% { transform: rotate(0deg); }
  34.8% { transform: rotate(0deg); }
  38%, 42.8% { transform: rotate(60deg); }
  46%, 50.8% { transform: rotate(120deg); }
  54%, 58.8% { transform: rotate(180deg); }
  62%, 66.8% { transform: rotate(240deg); }
  70%, 100% { transform: rotate(300deg); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .dial__ring { will-change: transform; }
  @supports (animation-timeline: scroll()) {
    .dial__ring { animation: dial-turn linear both; animation-timeline: scroll(root); }
  }
  @supports not (animation-timeline: scroll()) {
    .dial__ring { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
    .top[data-last="5"] .dial__ring { transform: rotate(60deg); }
    .top[data-last="4"] .dial__ring { transform: rotate(120deg); }
    .top[data-last="3"] .dial__ring { transform: rotate(180deg); }
    .top[data-last="2"] .dial__ring { transform: rotate(240deg); }
    .top[data-last="1"] .dial__ring { transform: rotate(300deg); }
  }
  .dial__dot, .dial__halo { transition: fill .25s ease, opacity .25s ease; }
  .cell, .nav a, .theme, .chip, .rl, .str { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
  .theme__knob { transition: transform .2s ease; }
}

/* ---------- hero: identity and key facts ---------- */
.hero {
  max-width: 1400px; margin: 0 auto;
  padding: 22px var(--gut) 36px;
  display: grid; gap: 22px 48px;
  grid-template-columns: minmax(0, 1fr);
}
.hero__id { min-width: 0; }
.hero h1 {
  font: 700 clamp(2.3rem, 9vw, 4.2rem)/1 var(--f-display);
  letter-spacing: -.035em; margin: 6px 0 14px;
}
.headline { font: 500 clamp(1.1rem, 1.8vw, 1.3rem)/1.4 var(--f-display); color: var(--ink-2); margin-bottom: 20px; max-width: 34ch; }
.contact { list-style: none; padding: 0; display: grid; gap: 6px; margin-bottom: 0; }
.contact li { display: flex; gap: 4px 12px; align-items: baseline; flex-wrap: wrap; }
.contact__k { font: 600 12.5px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-width: 4.6em; }
.contact a { font-weight: 500; }

/* Key facts (kit.facts_strip): a flight-data readout. Each row is a tick on a gold rail. */
.hero__facts { min-width: 0; }
.facts {
  margin: 0; padding: 4px 0 4px 18px; position: relative;
  border-left: 2px solid var(--gold-soft);
}
.facts__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 7px 0; position: relative; }
.facts__row + .facts__row { border-top: 1px dashed var(--line); }
.facts__row::before {
  content: ""; position: absolute; left: -24px; top: 14px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--gold);
}
.facts__k { font: 600 12.5px/1.5 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.facts__v { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.facts__strong { color: var(--ink); font-weight: 600; }
.facts__v a { color: var(--ink); white-space: nowrap; }

/* ---------- strengths index: the 3 x 3 board and its reader ---------- */
.index__grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.index__main { min-width: 0; }
.grid9 { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.cell {
  position: relative; display: grid; gap: 3px; align-content: start; min-width: 0;
  padding: 12px 14px 13px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--hue); border-radius: 14px;
}
.cell__no { position: absolute; right: 12px; top: 9px; font: 600 12px var(--f-display); letter-spacing: .12em; color: var(--muted); }
.cell__label { font: 600 15.5px/1.3 var(--f-display); padding-right: 30px; margin-bottom: 2px; }
.cell__fig { font: 500 14.5px/1.4 var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; margin: 0; }
.cell__span { font-size: 13.5px; line-height: 1.4; color: var(--muted); margin: 0; }
.cell__ev { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 5px 0 0; font-size: 13.5px; }
.cell__ev a, .pt-ev a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 24px; }
.cell__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 8px 0 0; }
.cell__go { display: inline-flex; align-items: center; min-height: 26px; font: 500 14.5px/1.4 var(--f-display); color: var(--ink-2); text-decoration-color: var(--gold-soft); }
.cell__go:hover { color: var(--gold); }
.cell__read {
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px 13px;
  font: 600 13.5px/1 var(--f-display); color: var(--gold); text-decoration: none;
  border: 1px solid var(--gold-soft); border-radius: 99px;
}
.cell__read:hover { background: var(--gold-wash); color: var(--gold); }
.cell__read[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.cell:has(.cell__read[aria-current="true"]) { border-color: var(--gold); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--gold); }

/* reader (strength reader on index.html, chart reader on chart.html) */
.reader {
  align-self: start; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 20px clamp(16px, 2.4vw, 28px) 24px; position: relative;
  box-shadow: var(--shadow);
}
.reader::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7;
}
.reader__head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }
.reader__h { font: 600 13px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.reader__tip { color: var(--muted); font-size: 14px; margin: 0; }
.reader__body { min-height: 10rem; }
.load-error { color: var(--ink); padding-top: 16px; }

/* fragment content inside the readers, the evidence boxes and the photo slot */
.fragment .frag__meta { font: 600 13px/1.5 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 18px 0 6px; }
.fragment .frag__title { font: 600 clamp(1.35rem, 2.2vw, 1.75rem)/1.2 var(--f-display); margin: 0 0 10px; letter-spacing: -.01em; }
.fragment .frag__title:focus { outline: none; }
.fragment .frag__title:focus-visible { outline: 2px dashed var(--gold-soft); outline-offset: 6px; }
.frag__org { color: var(--ink-2); margin-bottom: 10px; }
.frag__lede { color: var(--ink); }
.frag__note { color: var(--muted); font-size: 15px; }
.frag__points, .mission__pts, .vol__pts, .also__pts { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.frag__points li, .mission__pts li, .vol__pts li, .also__pts li { position: relative; padding-left: 22px; }
.frag__points li::before, .mission__pts li::before, .vol__pts li::before, .also__pts li::before {
  content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px;
  background: var(--hue, var(--gold)); transform: rotate(45deg); opacity: .9;
}
.frag__where, .frag__check, .frag__url { color: var(--ink-2); font-size: 16px; margin-bottom: 10px; }
.frag__ref a { color: var(--ink); }
.frag__k, .frag__facts dt {
  display: inline-block; font: 600 12.5px var(--f-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-right: 8px;
}
.frag__status { border-left: 3px solid var(--gold); background: var(--status-bg); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 16px; }
.frag__status strong { color: var(--gold); font-weight: 600; }
.frag__facts { margin: 0 0 12px; }
.frag__facts dt { display: block; margin-top: 10px; }
.frag__facts dd { margin: 2px 0 0; }
.frag__rec { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 12px; }
.frag__rec h4 { font-size: 1.05rem; }
.frag__gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-top: 14px; }
.frag__gallery figure { margin: 0; background: var(--photo-bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.frag__gallery img { display: block; width: 100%; height: 200px; object-fit: cover; }
.frag__gallery figcaption { font-size: 14.5px; color: var(--ink-2); padding: 10px 12px 12px; line-height: 1.45; }

/* ---------- destinations: highlighted when reached from the strengths index, with a way back ---------- */
.back {
  display: none; align-items: center; gap: 8px; width: fit-content; min-height: 34px; margin: 0 0 14px;
  padding: 6px 15px 6px 11px; border-radius: 99px; background: var(--gold); color: var(--on-gold);
  font: 600 14.5px/1.2 var(--f-display); text-decoration: none;
}
.back:hover { color: var(--on-gold); text-decoration: underline; }
.back__ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:target .back { display: inline-flex; }
.prj:target, .mission:target, .vol:target {
  outline: 3px solid var(--gold); outline-offset: 5px;
  box-shadow: 0 0 0 11px var(--gold-ring), var(--shadow);
}
.prj__name[tabindex="-1"]:focus, .mission__title[tabindex="-1"]:focus, .vol__role[tabindex="-1"]:focus { outline: none; }

/* ---------- brief ---------- */
.brief { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.brief__grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.brief__summary { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.7; max-width: 64ch; color: var(--ink); }
.focus { border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 24px; max-width: 64ch; }
.focus__h { font: 600 13px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.focus ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.focus li { display: flex; gap: 10px; align-items: baseline; color: var(--ink); }
.brief__h { font: 600 1.1rem var(--f-display); margin-bottom: 12px; }
.now { list-style: none; padding: 0; display: grid; gap: 10px; margin-bottom: 18px; }
.now li { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); display: grid; gap: 2px; }
.now a { text-decoration: none; display: grid; gap: 1px; }
.now__t { font: 600 16px/1.35 var(--f-display); }
.now__o { color: var(--ink-2); font-size: 15.5px; }
.now a:hover .now__t { color: var(--gold); text-decoration: underline; }
.now__m { color: var(--muted); font-size: 14px; }
.brief__clear { color: var(--ink-2); }

/* ---------- projects ---------- */
.prj-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.prj {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(18px, 3vw, 32px); position: relative; overflow: hidden;
}
.prj::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--hue); }
.prj__stage { font: 600 13px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.prj__name { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; margin-bottom: 8px; }
.prj__rel { color: var(--muted); font-size: 15.5px; }
.prj__status { background: var(--status-bg); border: 1px solid var(--status-line); border-left: 3px solid var(--gold); border-radius: 4px 12px 12px 4px; padding: 12px 16px; color: var(--ink); }
.pfacts { margin: 18px 0 14px; display: grid; gap: 14px 28px; grid-template-columns: minmax(0, 1fr); }
.pfacts dt { font: 600 12.5px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pfacts dd { margin: 3px 0 0; }
.prj__ev { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.prj__evh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font: 600 12.5px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.prj__evnone { color: var(--ink-2); margin: 0; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block; font-size: 14.5px; line-height: 1.4; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--hover); text-decoration: none;
}
.chip:hover { border-color: var(--gold-soft); }
.chip[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.evbox { margin-top: 12px; padding: 4px 16px 10px; border: 1px dashed var(--line); border-radius: 12px; background: var(--hover); }
.evbox .fragment .frag__meta { margin-top: 12px; }
.evbox .fragment .frag__title { font-size: 1.08rem; margin-bottom: 6px; }
.evbox p { margin-bottom: 6px; }
.evbox .frag__url { word-break: break-all; font-size: 15px; }
.evbox .frag__note { margin-bottom: 0; font-size: 14.5px; }

/* ---------- mission log: six eras ---------- */
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-2); margin-bottom: 24px; }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 0 3px var(--hover); }
.eras { list-style: none; padding: 0; margin: 0; display: grid; gap: 44px; }
.era { position: relative; }
.era__head { position: relative; padding: 16px 0 0; border-top: 2px solid var(--line); margin-bottom: 20px; }
.era__wm {
  position: absolute; right: 0; top: 8px; font: 700 clamp(3rem, 8vw, 5.6rem)/1 var(--f-display);
  color: var(--gold); opacity: .13; letter-spacing: -.04em; pointer-events: none; user-select: none;
}
.era__kicker { font: 600 13px/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.era__node { width: 12px; height: 12px; border-radius: 50%; background: var(--dial-dot); box-shadow: 0 0 0 4px var(--gold-ring); flex: none; }
.era.is-current .era__node { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-ring), 0 0 16px var(--gold-glow); }
.era h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 600; display: flex; flex-wrap: wrap; gap: 2px 16px; align-items: baseline; padding-right: 2.2em; }
.era__years { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.era__dek { color: var(--muted); font-size: 15px; margin: 8px 0 0; max-width: 72ch; }
.era__dek a { color: var(--ink-2); }

.log { list-style: none; padding: 0 0 0 24px; margin: 0; position: relative; display: grid; gap: 18px; max-width: 1060px; }
.log::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--gold-soft), var(--line) 30%, var(--line-soft)); }
.mission {
  position: relative; display: grid; gap: 6px 28px; grid-template-columns: minmax(0, 1fr);
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--hue);
  border-radius: 14px; padding: 18px clamp(14px, 2.6vw, 28px);
}
.mission::before {
  content: ""; position: absolute; left: -26px; top: 24px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--hue); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line);
}
.mission__meta p { margin: 0; }
.mission__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; align-content: start; }
.mission__dates { font: 600 17px var(--f-display); font-variant-numeric: tabular-nums; color: var(--ink); width: 100%; }
.mission__eng { font-size: 14.5px; color: var(--ink-2); }
.mission__sector { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.mission__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); }
.mission__now { font: 700 12px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--on-gold); background: var(--gold); padding: 2px 9px; border-radius: 99px; }
.mission__title { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 600; margin-bottom: 4px; }
.mission__org { color: var(--ink-2); margin-bottom: 6px; }
.mission__note { color: var(--muted); font-size: 15px; margin-bottom: 6px; }
.mission__scope { color: var(--ink); border-left: 2px solid var(--line); padding-left: 12px; margin-bottom: 12px; }
.mission__pts { margin-bottom: 10px; }
.pt-ev { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-left: 4px; vertical-align: middle; font-size: 14.5px; }
.more summary {
  cursor: pointer; font: 600 14.5px var(--f-display); color: var(--gold); width: fit-content;
  padding: 6px 0; min-height: 32px; list-style: none; display: flex; align-items: center; gap: 8px;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--gold-soft); border-radius: 50%; font-size: 14px; line-height: 1; flex: none; }
.more[open] summary::before { content: "\2212"; }
.more[open] summary { margin-bottom: 10px; }
.prj__more { margin: 0 0 18px; }
.pfacts--more { margin: 0; }
.skill__more[open] summary { margin-bottom: 0; }
.mission__ev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; font-size: 14.5px; color: var(--ink-2); }
.mission__ev .frag__k { margin-right: 0; }
.mission__evnote { color: var(--muted); }
.mission__media { margin-top: 12px; }
.mission__media:has(#nasa-photos .fragment) .mission__load { display: none; }
.photos:empty { display: none; }
.btn, .motion {
  font: 600 14.5px var(--f-display); color: var(--gold); background: transparent;
  border: 1px solid var(--gold-soft); border-radius: 99px; padding: 8px 16px; cursor: pointer; text-decoration: none; display: inline-block;
}
.motion[hidden] { display: none; }
.btn:hover, .motion:hover { background: var(--gold-wash); color: var(--gold); }

/* ---------- skills ---------- */
.skill-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
.skill { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px clamp(16px, 2.4vw, 26px); border-top: 3px solid var(--hue); }
.skill__h { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.skill__list { list-style: none; padding: 0; }
.skill__list > li { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.skill__list > li:first-child { border-top: 0; }
.skill__term { margin: 0 0 2px; font-weight: 500; }
.skill__uses { margin: 0; font-size: 15px; color: var(--muted); }
.skill__uses a { color: var(--ink-2); }
.skill__d { color: var(--muted); }
.period { font: 600 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); vertical-align: 2px; white-space: nowrap; }
.period--current { color: var(--gold); border-color: var(--gold-soft); }

/* ---------- credentials ---------- */
.cred-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
.cred { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px clamp(16px, 2.4vw, 26px); }
.cred h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 6px; }
.cred h3 + .cred__plain, .cred__list + h3, .cred__plain + h3 { margin-top: 18px; }
.cred__list { list-style: none; padding: 0; }
.cred__list > li { padding: 11px 0; border-top: 1px solid var(--line-soft); }
.cred__list > li:first-child { border-top: 0; }
.cred__list p { margin: 0; }
.cred__name { font-weight: 600; }
.cred__sub { color: var(--ink-2); }
.cred__meta { color: var(--muted); font-size: 15px; margin-top: 2px !important; }
.cred__courses { color: var(--ink-2); font-size: 15px; margin-top: 4px !important; }
.cred__plain { color: var(--ink); }
.tag--held { color: var(--held); }
.tag--expired { color: var(--expired); }
.tag--previously-held { color: var(--ink-2); }

/* ---------- community ---------- */
.comm-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); margin-top: 24px; }
.vol { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px clamp(16px, 2.4vw, 22px); --hue: var(--s-community); border-top: 3px solid var(--hue); }
.vol--lead { background: linear-gradient(160deg, var(--lead-bg), var(--panel) 60%); }
.vol__meta { font: 600 12.5px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.vol__role { font-size: 1.15rem; font-weight: 600; margin-bottom: 2px; }
.vol--lead .vol__role { font-size: 1.4rem; }
.vol__org { color: var(--ink-2); margin-bottom: 6px; }
.vol__note { color: var(--ink-2); font-size: 15.5px; }
.vol__ev { font-size: 15px; color: var(--ink-2); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.comm__also { font-size: 1.1rem; font-weight: 600; margin: 36px 0 10px; color: var(--ink-2); }
.also { list-style: none; padding: 0; display: grid; gap: 12px; max-width: 900px; }
.also > li { border-top: 1px solid var(--line-soft); padding-top: 12px; --hue: var(--muted); }
.also__head { margin: 0 0 6px; color: var(--ink-2); }
.also__role { color: var(--ink); font-weight: 600; }
.also__d { color: var(--muted); font-size: 14px; margin-left: 6px; }
.also__pts { color: var(--ink-2); font-size: 15.5px; }

/* ---------- footer ---------- */
.foot { background: var(--foot-bg); border-top: 1px solid var(--line-soft); padding-block: 56px 64px; }
.foot__grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.foot__h { font: 600 13px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.foot__h--2 { margin-top: 22px; }
.foot__contact, .data-links { list-style: none; padding: 0; display: grid; gap: 6px; color: var(--ink-2); }
.foot__ver { color: var(--muted); font-size: 14px; border-top: 1px solid var(--line-soft); padding-top: 18px; margin: 0; }

/* ======================================================================
   chart.html: the full star chart (the parent's hero), its reader and the ring index
   ====================================================================== */
.cpage {
  max-width: 1400px; margin: 0 auto;
  padding: 24px var(--gut) 48px;
  display: grid; gap: 28px 40px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "id" "chart" "catalog" "reader";
  container-type: inline-size;
}
.cpage__id { grid-area: id; padding-top: 8px; }
.cpage h1 { font: 700 clamp(2rem, 7vw, 3.2rem)/1.05 var(--f-display); letter-spacing: -.03em; margin: 6px 0 12px; }
.cpage__lede { color: var(--ink-2); max-width: 64ch; margin: 0; }
.cpage .reader { grid-area: reader; }

.chart { grid-area: chart; margin: 0; position: relative; min-width: 0; }
.chart__scroll { position: relative; }
.chart__stage { position: relative; width: 100%; max-width: 800px; margin: 0 auto; container-type: inline-size; contain: paint; }
.chart__svg { position: relative; display: block; width: 100%; height: auto; overflow: hidden; }
.sky, .sat { position: absolute; pointer-events: none; }
.sat { left: 50%; top: 50%; width: 0; height: 0; display: none; }
.sky__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sat__svg { position: absolute; display: block; overflow: visible; }
.sat__tail { fill: none; stroke-width: 6; stroke-linecap: round; }
.tail-stop--0 { stop-color: var(--sat-tail); stop-opacity: 0; }
.tail-stop--1 { stop-color: var(--sat-tail); stop-opacity: .95; }
.sat__glow { fill: var(--sat-tail); opacity: .32; }
.sat__head { fill: var(--sat-head); stroke: var(--sat-tail); stroke-width: 2.5; }
.sat__glow, .sat__head { transform-box: fill-box; transform-origin: 50% 50%; }
.chart__cap { max-width: 800px; margin: 10px auto 0; color: var(--ink-2); font-size: 16px; }
.chart__how { margin-bottom: 12px; }
.chart__how strong { color: var(--ink); font-weight: 600; }
.chart__phone { display: none; color: var(--ink-2); margin: 0 0 10px; }
.chart__cap .legend { margin-bottom: 12px; }

.disc-stop--0 { stop-color: var(--disc-0); }
.disc-stop--1 { stop-color: var(--disc-1); }
.disc-stop--2 { stop-color: var(--disc-2); }
.glow-stop--0 { stop-color: var(--glow-0); stop-opacity: var(--glow-0a); }
.glow-stop--1 { stop-color: var(--glow-1); stop-opacity: var(--glow-1a); }
.glow-stop--2 { stop-color: var(--glow-1); stop-opacity: 0; }
.disc { stroke: var(--disc-edge); stroke-width: 1.5; }
.sky__dots { fill: none; stroke: var(--sky-dot); stroke-linecap: round; }
.sky__dots--a { stroke-width: 2.2; opacity: .32; }
.sky__dots--b { stroke-width: 3.2; opacity: .5; }
.sky__dots--c { stroke-width: 4.6; opacity: .72; }
.sky__grat { fill: none; stroke: var(--grat); stroke-width: 1.2; stroke-dasharray: 2 9; }

.constellation__lines { fill: none; stroke: var(--c-line); stroke-width: 1.8; stroke-linejoin: round; }
.star { cursor: pointer; outline: none; }
.star__hit { fill: transparent; }
.star__ring { fill: none; stroke: var(--gold); stroke-width: 3; opacity: 0; }
.star__spark { fill: var(--spark); }
.star__core { fill: var(--core); }
.star__spark, .star__glow, .star__ring, .role__dot, .role__halo { transform-box: fill-box; transform-origin: 50% 50%; }
.star__label {
  font: 500 24px var(--f-display); color: var(--ink); fill: currentColor; letter-spacing: .005em;
  paint-order: stroke; stroke: var(--label-halo); stroke-width: 8px; stroke-linejoin: round;
}
.star__dest { font-size: 22px; font-weight: 500; fill: var(--gold); }
.star:hover .star__label, .star[data-shown] .star__label { color: var(--gold); }
.star:hover .star__dest { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.star:hover .star__ring { opacity: .7; }
.star[data-shown] .star__ring { opacity: 1; stroke-dasharray: 5 5; }
.star:focus-visible .star__ring { opacity: 1; stroke-width: 4.5; stroke-dasharray: none; }
.star:focus-visible .star__label { color: var(--gold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.cdial__ring { fill: none; stroke: var(--dial); stroke-width: 2; }
.cdial__tick { stroke: var(--tick); stroke-width: 1.5; opacity: .55; }
.cdial__tick--major { stroke-width: 2.5; opacity: .95; }
.cdial__year { font: 500 23px var(--f-display); color: var(--muted); fill: currentColor; }
.cdial__year--now { color: var(--gold); font-weight: 600; }
.cdial__now { stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 3 7; opacity: .75; }

.lane__track { fill: none; stroke: var(--lane-track); }
.lane__gap { fill: none; stroke: var(--lane-gap); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 7; }
.lane__label {
  font: 500 23px var(--f-display); color: var(--ink-2); fill: currentColor; letter-spacing: .01em;
  paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round;
}

.role { cursor: pointer; outline: none; }
.role__arc { fill: none; stroke: var(--hue); stroke-width: 4.5; stroke-linecap: round; opacity: .8; }
.role__hit { fill: transparent; }
.role__halo { fill: none; stroke: var(--gold); stroke-width: 3.5; opacity: 0; }
.role__dot { fill: var(--hue); stroke: var(--dot-edge); stroke-width: 2.5; }
.role:hover .role__arc, .role[aria-current="true"] .role__arc, .role:focus-visible .role__arc { opacity: 1; stroke-width: 7.5; }
.role:hover .role__halo { opacity: .75; }
.role[aria-current="true"] .role__halo { opacity: 1; stroke-dasharray: 4 4; }
.role:focus-visible .role__halo { opacity: 1; stroke-width: 4.5; stroke-dasharray: none; }

.deco-ring { fill: none; stroke: var(--deco); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 12; }

@media (prefers-reduced-motion: no-preference) {
  :root[data-orbits] .sat { display: block; will-change: transform; animation: orbit var(--t) linear var(--d) infinite; }
  :root[data-orbits] .sat--ccw { animation-direction: reverse; }
  :root[data-orbits] .sky { will-change: transform; animation: orbit 360s linear infinite reverse; }
  .chart:hover :is(.sat, .sky), .chart:focus-within :is(.sat, .sky),
  .chart[data-offscreen] :is(.sat, .sky), .chart[data-tab-hidden] :is(.sat, .sky),
  :root[data-motion="paused"] :is(.sat, .sky) { animation-play-state: paused; }
  .star__spark, .role__dot { transition: transform .25s ease; }
  .star:hover .star__spark, .star:focus-visible .star__spark { transform: scale(1.3); }
  .role:hover .role__dot, .role:focus-visible .role__dot { transform: scale(1.35); }
}
@keyframes orbit { to { transform: rotate(1turn); } }

/* strengths catalogue on the chart page: the nine stars as a list */
.catalog { grid-area: catalog; min-width: 0; }
.catalog__h { font: 600 13px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.catalog__tip { color: var(--ink-2); font-size: 15px; margin-bottom: 14px; }
.strs { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.strs li { display: flex; position: relative; }
.str {
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 2px 12px; padding: 12px 14px 11px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); text-decoration: none; position: relative;
}
.str__label { grid-column: 1 / -1; font: 600 16.5px/1.3 var(--f-display); display: flex; gap: 9px; align-items: baseline; }
.str__fig { font: 500 15px/1.4 var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; }
.str__span { font-size: 14px; line-height: 1.5; color: var(--muted); text-align: right; white-space: nowrap; }
.str__dest {
  grid-column: 1 / -1; margin-top: 6px; padding-right: 96px;
  font: 500 14.5px/1.4 var(--f-display); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: .22em;
}
.str:hover { border-color: var(--gold-soft); background: var(--panel-2); color: var(--ink); }
.str:hover .str__dest { color: var(--gold); text-decoration-color: currentColor; }
.str__peek {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; min-height: 30px; padding: 5px 13px;
  font: 600 13.5px/1 var(--f-display); color: var(--gold); text-decoration: none;
  border: 1px solid var(--gold-soft); border-radius: 99px;
}
.str__peek:hover { background: var(--gold-wash); color: var(--gold); }
.str__peek[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.strs li:has(.str__peek[aria-current="true"]) .str { border-color: var(--gold); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--gold); }
@media (max-width: 1179.98px) {
  .strs li { padding-left: 40px; --x: 6px; }
  .strs li:nth-child(even) { --x: 22px; }
  .str .glyph { position: absolute; z-index: 1; left: calc(var(--x) - 41px); top: 15px; width: 16px; height: 16px; }
  .strs li:has(.str__peek[aria-current="true"]) .glyph { outline: 1.5px dashed var(--gold); outline-offset: 4px; border-radius: 50%; }
  .strs li:not(:last-child)::after {
    content: ""; position: absolute; top: 24px; left: 14px; width: 16px; height: calc(100% + 10px);
    background: linear-gradient(to bottom left, transparent calc(50% - 1.2px), var(--gold-soft) calc(50% - .6px), var(--gold-soft) calc(50% + .6px), transparent calc(50% + 1.2px));
  }
  .strs li:nth-child(even):not(:last-child)::after {
    background: linear-gradient(to bottom right, transparent calc(50% - 1.2px), var(--gold-soft) calc(50% - .6px), var(--gold-soft) calc(50% + .6px), transparent calc(50% + 1.2px));
  }
}

/* ring index on the chart page */
.ringgrid { display: grid; gap: 8px 40px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.ringlist { margin-bottom: 18px; }
.ringlist__h { font: 600 12.5px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ringlist ul { list-style: none; padding: 0; }
.rl { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; margin: 0 -10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.rl__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hue); flex: none; }
.rl__text { display: grid; min-width: 0; }
.rl__name { font-weight: 500; }
.rl__role { color: var(--muted); font-size: 14px; line-height: 1.4; }
.rl__dates { margin-left: auto; padding-left: 12px; color: var(--muted); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl:hover { background: var(--panel-2); color: var(--ink); }
.rl[aria-current="true"] { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--gold); }

/* small screens: the chart becomes a label-free overview (chart.js makes it inert there) */
@media (max-width: 743.98px) {
  .chart__stage { width: min(100%, 440px); }
  .chart__svg { pointer-events: none; }
  .sat__tail { stroke-width: 12; }
  .sat__head, .sat__glow { transform: scale(1.8); }
  .chart__svg text { display: none; }
  .chart__phone { display: block; }
  .star__spark { transform: scale(1.8); }
  .star__glow { transform: scale(1.5); }
  .star__ring { transform: scale(1.7); stroke-width: 6; }
  .role__arc { stroke-width: 8; }
  .role[aria-current="true"] .role__arc { stroke-width: 13; }
  .role__dot { transform: scale(1.7); }
  .role__halo { transform: scale(1.8); stroke-width: 6; }
  .constellation__lines { stroke-width: 3.5; }
}
@media (max-width: 743.98px) and (min-width: 520px) {
  .chart { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 24px; align-items: center; }
  .chart__cap { margin: 0; }
}

/* ======================================================================
   responsive rules shared by both pages
   ====================================================================== */
@media (max-width: 359.98px) {
  .contact li { display: grid; gap: 0; }
  :root { --dial-size: 56px; --top-h: 68px; }
  .brand__mark, .chartlink { display: none; }
  .brand__name { font-size: 15px; }
}
@media (max-width: 399.98px) {
  .brand__cv { display: none; }
  .theme { padding: 4px; }
  .theme__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 743.98px) {
  .chartlink span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chartlink { padding: 5px 8px; }
}
@media (max-width: 599.98px) {
  .cell { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px 11px; }
  .cell__label, .cell__ev, .cell__links { grid-column: 1 / -1; }
  .cell__span { text-align: right; align-self: baseline; }
  .cell__ev { margin-top: 3px; }
  .cell__links { margin-top: 4px; }
}
@media (min-width: 600px) {
  .grid9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 744px) {
  :root { --dial-size: 96px; --top-h: 106px; }
  .brand__out { display: block; }
  .facts__row { grid-template-columns: 8.6rem minmax(0, 1fr); gap: 0 16px; }
  .facts__k { padding-top: 2px; }
  .hero h1 { font-size: clamp(2.6rem, 5vw, 3.6rem); }
  .brief__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred-grid > :last-child { grid-column: 1 / -1; }
  .cpage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "id id" "chart chart" "catalog reader"; gap: 28px 32px; }
  .chart__scroll { margin-inline: calc(-1 * clamp(0px, (800px - 100cqi) / 2, var(--gut))); }
}
@media (min-width: 760px) {
  .mission { grid-template-columns: 190px minmax(0, 1fr); }
  .mission__meta { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr 1.4fr; }
  .foot__ver { grid-column: 1 / -1; }
  .log { padding-left: 30px; }
  .log::before { left: 7px; }
  .mission::before { left: -32px; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 24px 56px; padding-bottom: 40px; }
  .hero__facts { padding-top: 14px; }
  .hero__id { padding-top: 4px; }
}
@media (min-width: 1000px) {
  .brief__grid { gap: 56px; }
  .prj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prj--lead { grid-column: 1 / -1; }
  .prj--lead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
  .prj--lead > p, .prj--lead > h3, .prj--lead > .back, .prj--lead > .prj__ev { grid-column: 1 / -1; }
  .prj--lead .pfacts { display: contents; }
  .prj--lead .pfacts > div { margin-top: 18px; }
  .prj--lead > .prj__more { grid-column: 1 / -1; }
  .prj--lead .pfacts--more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; }
  .prj--lead .pfacts--more > div { margin-top: 0; }
  .prj--lead .prj__ev { margin-top: 22px; }
  .prj:not(.prj--lead) .pfacts { grid-template-columns: minmax(0, 1fr); }
  .cred-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cred-grid > :last-child { grid-column: auto; }
  .comm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
  .vol--lead { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1180px) {
  .index__grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start; gap: 40px; }
  .reader { position: sticky; top: calc(var(--top-h) + 14px); }
  .index__grid .reader { margin-top: 46px; }
  .cpage {
    grid-template-columns: minmax(320px, 1fr) minmax(0, 800px);
    grid-template-areas: "id chart" "reader chart" "catalog catalog";
    grid-template-rows: auto minmax(360px, 1fr) auto;
    gap: 22px 40px;
  }
  .cpage .reader { position: static; contain: size; align-self: stretch; display: flex; flex-direction: column; min-height: 360px; }
  .cpage .reader__body {
    flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
    padding-right: 8px; margin-right: -8px;
    background:
      linear-gradient(var(--panel) 30%, transparent) center top / 100% 36px no-repeat local,
      linear-gradient(transparent, var(--panel) 70%) center bottom / 100% 36px no-repeat local,
      radial-gradient(farthest-side at 50% 0, var(--edge-shadow), transparent) center top / 100% 14px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, var(--edge-shadow), transparent) center bottom / 100% 14px no-repeat scroll;
  }
  .chart__scroll { margin-inline: 0; }
  .catalog { border-top: 1px solid var(--line-soft); padding-top: 28px; margin-top: 12px; }
  .strs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .str { padding: 14px 16px 13px; gap: 4px 12px; }
}
@media (min-width: 1200px) {
  :root { --dial-size: 120px; --top-h: 132px; }
  .top__in { column-gap: 18px; }
  .nav a { padding: 7px 11px; }
}
/* Landscape phones and other short screens: the header scrolls away instead of covering the page. */
@media (max-height: 500px) {
  .top { position: static; }
  :root { --top-h: 16px; }
  .reader { position: static; }
}

/* ---------- print: always the light palette ---------- */
@media print {
  :root, :root[data-theme] {
    --bg: #fff; --bg-2: #fff; --ink: #000; --ink-2: #222; --muted: #444; --gold: #000; --gold-soft: #888;
    --line: #bbb; --line-soft: #ddd; --panel: #fff; --panel-2: #fff; --status-bg: #fff; --on-gold: #fff;
  }
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .top, .skip, .skip-chart, .chart, .reader, .motion, .mission__media, .back, .cell__read, .cell__go, .str__peek, .str__dest,
  .kicker::before, .mission::before, .log::before, .glyph, .strs li::after, .era__wm, .era__node, .chips, .evbox, .legend, .foot__h--2, .foot__h--2 + ul { display: none !important; }
  .hero { display: block; padding: 0; }
  .hero h1 { font-size: 26pt; margin: 0 0 4pt; }
  .headline { margin-bottom: 8pt; max-width: none; }
  .contact { grid-template-columns: repeat(2, auto); gap: 2pt 18pt; margin-bottom: 8pt !important; }
  .facts { border-left: 0; padding-left: 0; margin-top: 8pt; }
  .facts__row::before { display: none; }
  .facts__row { padding: 3pt 0; grid-template-columns: 90pt 1fr; }
  .band { padding: 14pt 0 0; border-top: 1px solid #999; background: none; }
  .wrap { padding: 0; max-width: none; }
  .band h2 { font-size: 16pt; margin-bottom: 6pt; }
  .kicker, .era__kicker { color: #444; margin-bottom: 2pt; }
  .index__grid { display: block; }
  .grid9 { grid-template-columns: repeat(3, 1fr); gap: 6pt; }
  .cell, .prj, .mission, .skill, .cred, .vol, .now li { background: #fff !important; border: 1px solid #bbb; box-shadow: none !important; break-inside: avoid; }
  .cell { padding: 6pt 8pt; border-top-width: 1px; }
  .cell__no { display: none; }
  .vtag { border-color: #888; color: #000; padding: 0 4pt; }
  .prj::before { display: none; }
  .prj__evh::after { content: " (listed below)"; }
  .prj__ev .chips { display: block !important; }
  .chip { border: 0; padding: 0; background: none; }
  .chip::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #333; word-break: break-all; }
  .eras { gap: 10pt; }
  .era__head { border-top: 2px solid #000; padding-top: 6pt; margin-bottom: 8pt; }
  .era h3 { font-size: 13pt; padding-right: 0; }
  .mission { border-left: 3pt solid #555; padding: 8pt 10pt; grid-template-columns: 120pt 1fr; }
  .log { padding-left: 0; gap: 8pt; }
  .prj-grid, .skill-grid, .cred-grid, .comm-grid { gap: 8pt; }
  .prj__status, .frag__status { background: none; border: 1px solid #888; }
  a { color: #000; text-decoration: none; }
  .vol a, .vol__ev a, .pt-ev a, .cell__ev a { border: 0; padding: 0; background: none; }
  .vol__ev a::after, .vol__org a::after, .pt-ev a::after, .cell__ev a::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #333; word-break: break-all; }
  .more summary { display: none; }
  .more::details-content { content-visibility: visible; display: block; }
  .tag, .period, .mission__now { color: #000 !important; background: none !important; border-color: #888 !important; }
  .foot { background: #fff; padding: 12pt 0 0; }
}

.people-opening { font-size: 1rem; line-height: 1.5; margin-top: 0.7rem; max-width: 60ch; }