/* 04-orbit: Orbit 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 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: 112px;
}

*, *::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 ---------- */
.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: 8px var(--gut) 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; margin: 0 auto 0 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 { order: 3; min-width: 0; width: calc(100% + 16px); margin-inline: -8px; overflow-x: auto; scrollbar-width: none; }
.nav ul { list-style: none; padding: 0 0 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: 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; }
/* 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; }

.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) { 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); }
  .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: 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; }
/* 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 .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));
  }
}

/* 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; }
.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__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 chart becomes a label-free overview ----------
   Below 744 px the chart's labels would render under 12 px, so the chart is drawn without text as an
   overview (it still marks the selected star or role), and the strengths list and the ring index are
   the controls. script.js also makes the overview 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; }
}
/* landscape phones: overview beside its caption */
@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; }
}
@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__in { flex-wrap: nowrap; padding-block: 0; gap: 12px 24px; }
  .brand { margin-right: 0; }
  .nav { order: 0; margin-left: auto; width: auto; margin-inline: auto 0; overflow: visible; }
  .nav ul { padding-bottom: 0; }
  .nav a { padding: 8px 11px; }
  :root { --top-h: 84px; }
}
/* 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; }
}

/* ---------- 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, .index, .mission__media, .catalog__tip, .back, .str__peek, .str__dest, .kicker::before, .mission::before, .log::before, .glyph, .strs li::after { display: none !important; }
  .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 { display: none; }
  .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; } }