/* 04a-orbit-planetarium: Orbit, planetarium (upgrade of 04-orbit). 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 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);
  --on-gold: #0a0f1f;
  --hover: rgba(255, 255, 255, .04);
  --top-bg: rgba(10, 15, 31, .92);
  --top-bg-blur: rgba(10, 15, 31, .78);
  --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;

  /* 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 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);
  --on-gold: #fffaf0;
  --hover: rgba(20, 29, 58, .04);
  --top-bg: rgba(244, 239, 228, .94);
  --top-bg-blur: rgba(244, 239, 228, .8);
  --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;

  /* chart: a printed planisphere. Pale sky window, navy ink stars, brass constellation lines. */
  --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;

  /* Sector hues deepened for paper: markers and rails reach at least 4:1 on the paper and the sky window. */
  --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);
  --top-h: 50px;   /* height of the sticky section strip (phones, tablets) */
  --brand-h: 54px; /* brand row, which scrolls away on phones and tablets */
}

*, *::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 { 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: var(--top-h); }

.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(48px, 7vw, 96px); 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: 28px; }
.glyph { width: .8em; height: .8em; fill: var(--gold); flex: none; }

/* ---------- top bar ----------
   Phones and tablets: the header sticks at -var(--brand-h), so the brand row scrolls away and only the
   section strip (about 42 px) stays stuck to the top as the jump bar. Desktop (1200 px up): one row. */
.top {
  position: sticky; top: calc(-1 * var(--brand-h)); 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: 0 var(--gut); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--brand-h); }
.brand { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 16px var(--f-display); white-space: nowrap; min-width: 0; }
.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; }
.nav { min-width: 0; width: calc(100% + 16px); margin-inline: -8px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav ul { list-style: none; padding: 0 8px 6px; display: flex; gap: 2px; }
.nav a {
  display: block; padding: 8px 10px; border-radius: 8px;
  font: 500 14.5px var(--f-display); color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav a:hover { color: var(--gold); background: var(--hover); }

/* 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: 40px; padding: 6px 14px 6px 7px; 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; }

/* ---------- hero: identity, chart, strengths catalogue, reader ---------- */
.hero {
  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;
}
.hero__id { grid-area: id; padding-top: 8px; }
.hero h1 {
  font: 700 clamp(2.3rem, 9vw, 4.6rem)/1 var(--f-display);
  letter-spacing: -.035em; margin: 6px 0 14px;
}
.headline { font: 500 clamp(1.1rem, 1.8vw, 1.35rem)/1.4 var(--f-display); color: var(--ink-2); margin-bottom: 22px; max-width: 30ch; }
.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. */
.facts {
  margin: 22px 0 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; }
.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); }

.chart { grid-area: chart; margin: 0; position: relative; min-width: 0; }
.chart__scroll { position: relative; }
/* The stage is a size container (cqw places the satellites) and clips paint, so the compositor knows the
   moving layers can never overlap anything outside it. */
.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; }
/* Moving layers: absolutely placed HTML boxes, each holding a small SVG, rotated about the chart centre. */
.sky, .sat { position: absolute; pointer-events: none; }
/* Satellites exist only while they can move (motion allowed and script present); parked, they would look like markers. */
.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; }
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.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); }
.motion, .btn {
  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; }
.motion:hover, .btn:hover { background: var(--gold-wash); color: var(--gold); }

/* SVG layers: every paint is a theme token */
.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: 23px; 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; }
/* data-shown: this star's strength is in the chart reader (a visual cue only; the star itself is a link). */
.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; }

/* ---------- phone dome: the constellation alone, numbered (shown below 744 px) ---------- */
.chart__mini { display: none; width: 100%; height: auto; overflow: visible; }
.dome { stroke: var(--disc-edge); stroke-width: 2; }
.mstar__hit { fill: transparent; }
.mstar__disc { fill: var(--bg); stroke: var(--gold); stroke-width: 3; }
/* 36 units in a 672-unit box: 13 px at a 248 px chart (280 px screen), 19 px at 358 px. */
.mstar__n { font: 700 36px var(--f-display); color: var(--ink); fill: currentColor; pointer-events: none; }
.mstar:hover .mstar__disc, .mstar:focus-visible .mstar__disc { fill: var(--gold); }
.mstar:hover .mstar__n, .mstar:focus-visible .mstar__n { color: var(--on-gold); }

/* ---------- star card: a popover anchored to the star that is pointed at or focused ----------
   script.js sets left/top (relative to figure.chart), data-place and --ax/--ay for the arrow. */
.popover {
  position: absolute; z-index: 10; left: 0; top: 0;
  width: min(316px, calc(100vw - 24px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px 12px; box-shadow: var(--shadow), 0 0 0 1px var(--gold-ring);
  color: var(--ink); font-size: 15px; line-height: 1.5;
}
.popover[hidden] { display: none; }
.popover::before {
  content: ""; position: absolute; width: 12px; height: 12px; background: var(--panel);
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.popover[data-place="right"]::before { left: -7px; top: calc(var(--ay, 50%) - 6px); transform: rotate(45deg); }
.popover[data-place="left"]::before { right: -7px; top: calc(var(--ay, 50%) - 6px); transform: rotate(225deg); }
.popover[data-place="below"]::before { top: -7px; left: calc(var(--ax, 50%) - 6px); transform: rotate(135deg); }
.popover[data-place="above"]::before { bottom: -7px; left: calc(var(--ax, 50%) - 6px); transform: rotate(-45deg); }
.pop[hidden] { display: none; }
.pop__meta { font: 600 12px/1.6 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin: 0 0 4px; }
.pop__title { font: 600 17px/1.25 var(--f-display); margin: 0 0 4px; color: var(--ink); }
.pop__fig { font: 500 14.5px/1.4 var(--f-display); color: var(--gold); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.pop__pt { color: var(--ink-2); margin: 0 0 10px; font-size: 14.5px; }
.pop__links { display: grid; gap: 7px; margin: 0; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.pop__links a { font: 500 14.5px/1.35 var(--f-display); color: var(--ink); text-decoration-color: var(--gold-soft); width: fit-content; }
.pop__open { color: var(--gold); font-weight: 600; }
.pop__links a:hover { color: var(--gold); text-decoration-color: currentColor; }

/* ---------- evidence status words: always the data's own status, never invented ---------- */
.evtag {
  display: inline-block; font: 600 12px/1.25 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); vertical-align: 2px; white-space: nowrap;
}
.evtag--public_artifact { color: var(--held); border-color: var(--held); }
.evtag--self_reported { color: var(--muted); }
.vmark { display: inline; font-size: 14.5px; color: var(--ink-2); }
.vmark .evtag { margin: 0 4px 0 6px; }
.vmark a { color: var(--ink-2); }

.dial__ring { fill: none; stroke: var(--dial); stroke-width: 2; }
.dial__tick { stroke: var(--tick); stroke-width: 1.5; opacity: .55; }
.dial__tick--major { stroke-width: 2.5; opacity: .95; }
.dial__year { font: 500 23px var(--f-display); color: var(--muted); fill: currentColor; }
.dial__year--now { color: var(--gold); font-weight: 600; }
.dial__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) {
  html { scroll-behavior: smooth; }
  /* Orbits run only when script.js is present (it provides the pause button and the off-screen pause). */
  :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), .chart[data-popover] :is(.sat, .sky) { animation-play-state: paused; }
  .popover { opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; }
  .popover[data-open] { opacity: 1; transform: none; }
  .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); }
  .str, .rl, .nav a, .theme { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
  .theme__knob { transition: transform .2s ease; }
}
@keyframes orbit { to { transform: rotate(1turn); } }

/* ---------- strengths catalogue: 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: 10px; align-items: center; }
/* The number: the same disc as the numbered stars in the phone dome. */
.str__n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--bg); border: 2px solid var(--gold); color: var(--ink); font: 700 13px/1 var(--f-display);
}
.str__ev { grid-column: 1 / -1; margin-top: 6px; line-height: 1; }
.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: 4px; 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; }
/* Preview: the HTMX link that loads the strength into the chart reader, sitting in the card's corner. */
.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); }

/* Below the wide layout the catalogue is drawn as a constellation strip: each card's star sits in a
   left rail, staggered, joined to the next by a thin line (a corner-to-corner gradient). */
@media (max-width: 1179.98px) {
  .strs li { padding-left: 40px; --x: 6px; }
  .strs li:nth-child(even) { --x: 22px; }
  .str .str__n { position: absolute; z-index: 1; left: calc(var(--x) - 46px); top: 11px; }
  .strs li:has(.str__peek[aria-current="true"]) .str__n { outline: 1.5px dashed var(--gold); outline-offset: 3px; }
  .strs li:not(:last-child)::after {
    content: ""; position: absolute; top: 28px; 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));
  }
}

/* reader */
.reader {
  grid-area: 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: 12rem; }
/* Folds: the reader body and the ring index are open in the HTML; script.js closes them on phones. */
.fold__sum {
  cursor: pointer; font: 600 14.5px var(--f-display); color: var(--gold); width: fit-content;
  padding: 8px 0; min-height: 36px; list-style: none; display: flex; align-items: center; gap: 8px;
}
.fold__sum::-webkit-details-marker { display: none; }
.fold__sum::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; }
.fold[open] > .fold__sum::before { content: "‘2"; }
.reader__fold { display: contents; }
.reader__fold > .fold__sum { display: none; }
@media (max-width: 743.98px) { .reader__fold { display: block; } .reader__fold > .fold__sum { display: flex; } .reader__fold:not([open]) ~ * { display: none; } }
@media (min-width: 744px) { .index .fold__sum { display: none; } }
.load-error { color: var(--ink); padding-top: 16px; }

/* fragment content inside the reader 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__where a, .frag__ref a, .frag__check a { color: var(--ink-2); text-decoration-color: var(--gold-soft); }
.frag__where a:hover, .frag__ref a:hover, .frag__check a:hover { color: var(--gold); }
.frag__check .evtag { margin-right: 4px; }
.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; }

/* ---------- chart index: the rings as a list ---------- */
.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); }

/* ---------- star destinations: highlighted when reached from a star, 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); }
.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); }
.tag { font: 600 12.5px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-right: 6px; }

/* ---------- 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; 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__evh { font: 600 12.5px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.prj__ev ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prj__ev a {
  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;
}
.prj__ev a:hover { border-color: var(--gold-soft); }
.prj__ev p { color: var(--ink-2); margin: 0; }

/* ---------- mission log ---------- */
.log { list-style: none; padding: 0 0 0 24px; margin: 8px 0 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__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;
}
.mission__more summary::-webkit-details-marker { display: none; }
.mission__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; }
.mission__more[open] summary::before { content: "\2212"; }
.mission__more[open] summary { margin-bottom: 10px; }
.mission__media { margin-top: 12px; }
.mission__media:has(#nasa-photos .fragment) .mission__load { display: none; }
.photos:empty { display: none; }

/* ---------- 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; }
.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__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; }

/* ---------- small screens: the phone dome ----------
   Below 744 px the full chart's labels would render under 12 px, so the full chart, its sky and its
   satellites are not drawn. The dome shows the constellation alone, fitted to the screen, with numbered
   stars (36 units: 13 px at 280 px, 19 px at 390 px); the numbered strengths list under it is the legend. */
@media (max-width: 743.98px) {
  .chart__stage { width: min(100%, 440px); }
  .chart__svg, .sky, :root[data-orbits] .sat { display: none; }
  .chart__mini { display: block; }
  .chart__how, .legend, .motion { display: none; }
  .chart__phone { display: block; }
  .chart__cap { margin-top: 8px; }
  .constellation__lines { stroke-width: 3; }
  .nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
}
/* landscape phones: the dome beside its caption */
@media (max-width: 743.98px) and (min-width: 520px) {
  .chart { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 24px; align-items: center; }
  .chart__cap { margin: 0; }
}
@media (max-width: 359.98px) {
  .contact li { display: grid; gap: 0; }
}
@media (max-width: 399.98px) {
  .brand__cv { display: none; }
  .theme { padding: 6px; }
  .theme__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- full chart from 744 px: labels render at 12 px or larger ---------- */
@media (min-width: 744px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas: "id id" "chart chart" "catalog reader";
    gap: 28px 32px;
  }
  .hero__id { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .hero__id > * { grid-column: 1; }
  .hero__id > .contact { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-bottom: 22px; }
  .hero__id > .facts { grid-column: 1 / -1; margin-top: 6px; }
  .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, 6vw, 4.2rem); }
  /* Under 832 px the chart runs edge to edge so it stays wide enough for 12 px labels. */
  .chart__scroll { margin-inline: calc(-1 * clamp(0px, (800px - 100cqi) / 2, var(--gut))); }
  .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; }
}
@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: 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 { grid-column: 1 / -1; }
  .prj--lead .pfacts { display: contents; }
  .prj--lead .pfacts > div, .prj--lead .prj__ev { margin-top: 18px; }
  .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) {
  .hero {
    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;
    padding-top: 22px;
  }
  .hero__id { display: block; padding-top: 10px; }
  .hero__id > .contact { margin-bottom: 0; }
  .hero h1 { font-size: clamp(2.6rem, 3.5vw, 3.3rem); margin-bottom: 10px; }
  .headline { margin-bottom: 16px; max-width: none; }
  .hero__id > .facts { margin-top: 18px; }
  .facts__row { grid-template-columns: minmax(0, 1fr); padding: 5px 0; }
  .facts__row::before { top: 11px; }
  .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; }
  .reader { contain: size; align-self: stretch; display: flex; flex-direction: column; min-height: 360px; }
  .reader__body {
    flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
    padding-right: 8px; margin-right: -8px;
    /* scroll shadows: a soft edge appears only where more content is hidden */
    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;
  }
}
/* From 1320 px the identity column is wide enough for the contact list as a 2 x 2 grid (label above link),
   which keeps the whole key-facts strip in the first 900 px beside the chart. */
@media (min-width: 1320px) {
  .contact { grid-template-columns: repeat(2, max-content); gap: 8px 32px; }
  .contact li { display: grid; gap: 0; }
  .contact__k { line-height: 1.4; }
}
@media (min-width: 1200px) {
  .top { top: 0; }
  .top__in { display: flex; align-items: center; gap: 12px 24px; min-height: 60px; }
  .top__row { display: contents; }
  .brand { order: 0; margin-right: auto; }
  .nav { order: 1; width: auto; margin-inline: 0; overflow: visible; }
  .nav ul { padding: 0; }
  .nav a { padding: 8px 11px; }
  .theme { order: 2; }
  :root { --top-h: 84px; }
}
/* Landscape phones and other short screens: only the 42 px section strip stays stuck (the brand row
   has scrolled away), well under a third of a 320 px screen. */

/* ---------- 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, .popover, .reader, .motion, .index, .mission__media, .catalog__tip, .back, .str__peek, .str__dest, .kicker::before, .mission::before, .log::before, .glyph, .strs li::after { display: none !important; }
  .evtag { color: #000 !important; border-color: #888 !important; }
  .str__n { position: static !important; color: #000; border-color: #000; background: #fff; }
  .vmark a::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #333; word-break: break-all; }
  .hero { display: block; padding: 0; }
  .hero__id { display: block; }
  .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; }
  .catalog { border: 0; padding: 10pt 0 0; margin: 0; }
  .catalog__h { color: #000; margin-bottom: 6pt; }
  .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 { color: #444; margin-bottom: 2pt; }
  .str, .prj, .mission, .skill, .cred, .vol, .now li { background: #fff !important; border: 1px solid #bbb; box-shadow: none !important; break-inside: avoid; }
  .prj::before { display: none; }
  .mission { border-left: 3pt solid #555; padding: 8pt 10pt; grid-template-columns: 120pt 1fr; }
  .log { padding-left: 0; gap: 8pt; }
  .strs { grid-template-columns: repeat(3, 1fr); gap: 6pt; }
  .strs li { padding-left: 0; }
  .strs li .str { border: 1px solid #bbb !important; box-shadow: none !important; }
  .facts { border-left: 0; padding-left: 0; margin-top: 8pt; }
  .facts__row::before { display: none; }
  .facts__row { padding: 3pt 0; }
  .str { padding: 6pt 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; }
  .prj__ev a, .vol a, .vol__ev a { border: 0; padding: 0; background: none; }
  .prj__ev a::after, .vol__ev a::after, .vol__org a::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #333; word-break: break-all; }
  .prj__ev ul { display: block; }
  .mission__more summary, .fold__sum { display: none; }
  .reader__fold { display: contents; }
  .mission__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; }

@media screen and (min-width: 1200px) { .hero .facts__row { padding-block: 3px; } }