/* ==========================================================================
   Deep Space design system — rodrigo-schmitt.github.io
   Single source of truth for the whole site. Hand-written; no frameworks.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --bg-0: #060913;
  --bg-1: #0B1020;
  --panel: rgba(14, 20, 40, 0.6);
  --panel-solid: #0E1428;
  --text-1: #E6EAF2;
  --text-2: #98A2B8;
  --accent-cyan: #5EEAD4;
  --accent-blue: #60A5FA;
  --accent-violet: #A78BFA;
  --border: rgba(148, 163, 184, 0.15);
  --border-strong: rgba(148, 163, 184, 0.3);
  --glow-cyan: rgba(94, 234, 212, 0.12);
  --glow-violet: rgba(167, 139, 250, 0.12);

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-lg: clamp(1.4rem, 1.25rem + 0.7vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.5rem + 1.3vw, 2.5rem);
  --fs-hero: clamp(2.1rem, 1.6rem + 2.6vw, 3.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  --measure: 100ch;
  --container: 1120px;
  --nav-height: 60px;
}

/* ---------- 2. Fonts ---------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 3. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}

body {
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%) fixed, var(--bg-0);
  background-color: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-1);
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); margin-top: var(--space-5); margin-bottom: var(--space-3); }
h3 { font-size: var(--fs-md); margin-top: var(--space-4); margin-bottom: var(--space-2); }
p, ul, ol { max-width: var(--measure); }
p { margin-bottom: var(--space-3); }
ul, ol { padding-left: 1.4em; margin-bottom: var(--space-3); }
li { margin-bottom: var(--space-2); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
strong, b { color: var(--text-1); font-weight: 650; }
em { color: inherit; }
blockquote { border-left: 2px solid var(--accent-violet); padding-left: var(--space-3); color: var(--text-2); }
code { font-size: 0.92em; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.35em; }

/* Links: accent color + slide-in underline */
a {
  color: var(--accent-blue);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.25s ease-out, color 0.15s ease-out;
}
a:hover, a:focus-visible { color: var(--accent-cyan); background-size: 100% 1px; }

:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: rgba(96, 165, 250, 0.35); color: var(--text-1); }

/* ---------- 4. Starfield & nebula (decorative, fixed behind content) ---------- */
.starfield { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }

.stars { position: absolute; top: -200px; left: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; }

.stars--s {
  box-shadow: 21px 641px #8B96B3, 37px 67px #8B96B3, 47px 1403px #8B96B3, 83px 264px #8B96B3, 101px 1455px #8B96B3, 103px 1178px #8B96B3, 105px 52px #8B96B3, 137px 594px #8B96B3, 284px 1120px #8B96B3, 300px 105px #8B96B3, 312px 1480px #8B96B3, 322px 784px #8B96B3, 345px 855px #8B96B3, 371px 816px #8B96B3, 377px 0px #8B96B3, 381px 930px #8B96B3, 387px 438px #8B96B3, 401px 920px #8B96B3, 402px 897px #8B96B3, 420px 457px #8B96B3, 420px 1469px #8B96B3, 434px 797px #8B96B3, 453px 588px #8B96B3, 487px 654px #8B96B3, 491px 1079px #8B96B3, 499px 1283px #8B96B3, 528px 100px #8B96B3, 552px 1117px #8B96B3, 613px 1342px #8B96B3, 655px 277px #8B96B3, 656px 1354px #8B96B3, 699px 315px #8B96B3, 710px 92px #8B96B3, 747px 55px #8B96B3, 761px 798px #8B96B3, 772px 990px #8B96B3, 797px 1530px #8B96B3, 800px 1325px #8B96B3, 847px 888px #8B96B3, 913px 968px #8B96B3, 919px 1568px #8B96B3, 947px 10px #8B96B3, 955px 1389px #8B96B3, 982px 5px #8B96B3, 1015px 247px #8B96B3, 1059px 860px #8B96B3, 1065px 1418px #8B96B3, 1079px 950px #8B96B3, 1091px 1020px #8B96B3, 1117px 871px #8B96B3, 1196px 589px #8B96B3, 1205px 550px #8B96B3, 1243px 921px #8B96B3, 1248px 383px #8B96B3, 1260px 1122px #8B96B3, 1287px 430px #8B96B3, 1297px 937px #8B96B3, 1334px 1063px #8B96B3, 1335px 248px #8B96B3, 1342px 1398px #8B96B3, 1353px 835px #8B96B3, 1394px 183px #8B96B3, 1409px 357px #8B96B3, 1421px 1323px #8B96B3, 1424px 730px #8B96B3, 1440px 1150px #8B96B3, 1441px 321px #8B96B3, 1447px 1576px #8B96B3, 1463px 316px #8B96B3, 1474px 409px #8B96B3, 1510px 744px #8B96B3, 1516px 197px #8B96B3, 1540px 28px #8B96B3, 1541px 1527px #8B96B3, 1599px 304px #8B96B3, 1627px 515px #8B96B3, 1630px 1074px #8B96B3, 1634px 69px #8B96B3, 1684px 299px #8B96B3, 1702px 589px #8B96B3, 1742px 1037px #8B96B3, 1743px 1490px #8B96B3, 1773px 414px #8B96B3, 1840px 28px #8B96B3, 1848px 1189px #8B96B3, 1850px 1545px #8B96B3, 1855px 374px #8B96B3, 1871px 1380px #8B96B3, 1873px 288px #8B96B3, 1879px 1225px #8B96B3, 1888px 864px #8B96B3, 1915px 362px #8B96B3, 1922px 1463px #8B96B3, 1925px 291px #8B96B3, 1961px 823px #8B96B3, 1962px 131px #8B96B3, 1974px 468px #8B96B3, 1974px 910px #8B96B3, 1988px 955px #8B96B3, 2008px 1391px #8B96B3, 2010px 1538px #8B96B3, 2015px 1412px #8B96B3, 2036px 889px #8B96B3, 2038px 955px #8B96B3, 2038px 1597px #8B96B3, 2041px 238px #8B96B3, 2055px 1430px #8B96B3, 2058px 1048px #8B96B3, 2067px 595px #8B96B3, 2079px 843px #8B96B3, 2090px 974px #8B96B3, 2094px 1570px #8B96B3, 2101px 1060px #8B96B3, 2103px 1306px #8B96B3, 2110px 530px #8B96B3, 2117px 282px #8B96B3, 2130px 402px #8B96B3, 2141px 1002px #8B96B3, 2143px 1373px #8B96B3, 2149px 560px #8B96B3, 2170px 447px #8B96B3, 2183px 848px #8B96B3, 2231px 98px #8B96B3, 2232px 1372px #8B96B3, 2234px 514px #8B96B3, 2238px 170px #8B96B3, 2238px 549px #8B96B3, 2279px 861px #8B96B3, 2283px 1101px #8B96B3, 2284px 1359px #8B96B3, 2292px 823px #8B96B3, 2310px 981px #8B96B3, 2341px 1266px #8B96B3, 2345px 1121px #8B96B3, 2365px 632px #8B96B3, 2388px 1176px #8B96B3, 2399px 1135px #8B96B3, 2400px 626px #8B96B3, 2402px 903px #8B96B3, 2408px 268px #8B96B3, 2421px 1064px #8B96B3, 2446px 938px #8B96B3, 2449px 1418px #8B96B3, 2458px 1005px #8B96B3, 2461px 1272px #8B96B3, 2499px 407px #8B96B3, 2515px 165px #8B96B3, 2543px 91px #8B96B3, 2548px 879px #8B96B3, 2553px 688px #8B96B3;
  opacity: 0.7;
  animation: drift 240s linear infinite alternate;
}

.stars--m {
  width: 1.5px; height: 1.5px;
  box-shadow: 63px 117px #C7D2E8, 67px 566px #C7D2E8, 94px 634px #C7D2E8, 229px 1477px #C7D2E8, 236px 1506px #C7D2E8, 247px 1554px #C7D2E8, 257px 28px #C7D2E8, 261px 596px #C7D2E8, 395px 481px #C7D2E8, 415px 1600px #C7D2E8, 434px 1401px #C7D2E8, 461px 332px #C7D2E8, 484px 76px #C7D2E8, 489px 1405px #C7D2E8, 501px 608px #C7D2E8, 503px 192px #C7D2E8, 512px 375px #C7D2E8, 514px 1070px #C7D2E8, 517px 729px #C7D2E8, 759px 1322px #C7D2E8, 808px 1148px #C7D2E8, 878px 1167px #C7D2E8, 886px 224px #C7D2E8, 899px 1587px #C7D2E8, 934px 47px #C7D2E8, 1030px 796px #C7D2E8, 1044px 302px #C7D2E8, 1052px 848px #C7D2E8, 1068px 524px #C7D2E8, 1080px 197px #C7D2E8, 1098px 1372px #C7D2E8, 1133px 1204px #C7D2E8, 1148px 1138px #C7D2E8, 1152px 1423px #C7D2E8, 1195px 729px #C7D2E8, 1207px 1152px #C7D2E8, 1237px 58px #C7D2E8, 1288px 330px #C7D2E8, 1289px 283px #C7D2E8, 1353px 593px #C7D2E8, 1434px 645px #C7D2E8, 1450px 1222px #C7D2E8, 1459px 1479px #C7D2E8, 1532px 1026px #C7D2E8, 1544px 490px #C7D2E8, 1655px 647px #C7D2E8, 1686px 1590px #C7D2E8, 1701px 786px #C7D2E8, 1706px 653px #C7D2E8, 1711px 540px #C7D2E8, 1724px 1356px #C7D2E8, 1739px 1184px #C7D2E8, 1745px 1384px #C7D2E8, 1786px 350px #C7D2E8, 1788px 48px #C7D2E8, 1867px 1243px #C7D2E8, 2075px 642px #C7D2E8, 2216px 980px #C7D2E8, 2217px 1400px #C7D2E8, 2220px 701px #C7D2E8, 2223px 58px #C7D2E8, 2272px 812px #C7D2E8, 2276px 271px #C7D2E8, 2298px 1180px #C7D2E8, 2326px 1497px #C7D2E8, 2344px 1102px #C7D2E8, 2398px 41px #C7D2E8, 2433px 947px #C7D2E8, 2489px 441px #C7D2E8, 2519px 77px #C7D2E8, 2535px 251px #C7D2E8, 2542px 1466px #C7D2E8, 2562px 1340px #C7D2E8, 2567px 1215px #C7D2E8, 2580px 217px #C7D2E8;
  opacity: 0.8;
  animation: drift 180s linear infinite alternate;
}

.stars--l {
  width: 2px; height: 2px;
  box-shadow: 21px 725px #EEF2FF, 46px 1285px #EEF2FF, 238px 454px #EEF2FF, 366px 367px #EEF2FF, 412px 37px #EEF2FF, 629px 992px #EEF2FF, 706px 172px #EEF2FF, 769px 324px #EEF2FF, 994px 963px #EEF2FF, 1085px 282px #EEF2FF, 1224px 763px #EEF2FF, 1300px 115px #EEF2FF, 1395px 1296px #EEF2FF, 1407px 411px #EEF2FF, 1474px 476px #EEF2FF, 1534px 735px #EEF2FF, 1634px 1448px #EEF2FF, 1672px 76px #EEF2FF, 1874px 1123px #EEF2FF, 1881px 1304px #EEF2FF, 1941px 1379px #EEF2FF, 2083px 308px #EEF2FF, 2105px 543px #EEF2FF, 2131px 1545px #EEF2FF, 2143px 1438px #EEF2FF, 2184px 444px #EEF2FF, 2239px 1497px #EEF2FF, 2265px 77px #EEF2FF, 2300px 564px #EEF2FF, 2378px 639px #EEF2FF, 2385px 628px #EEF2FF, 2572px 840px #EEF2FF;
  opacity: 0.9;
  animation: drift 120s linear infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-40px, 60px, 0); }
}

/* Faint nebula — position varies per page via body class */
.starfield::after {
  content: "";
  position: absolute;
  width: 70vmax; height: 70vmax;
  top: -20vmax; right: -25vmax;
  background:
    radial-gradient(circle at 40% 40%, rgba(167, 139, 250, 0.07), transparent 60%),
    radial-gradient(circle at 60% 60%, rgba(94, 234, 212, 0.05), transparent 55%);
  filter: blur(40px);
}
body.nebula-left .starfield::after { right: auto; left: -25vmax; top: 10vmax; }
body.nebula-low .starfield::after { top: auto; bottom: -25vmax; }

/* ---------- 5. Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.container--narrow { max-width: 940px; }
main { display: block; padding: calc(var(--nav-height) + var(--space-5)) 0 var(--space-6); }

.grid { display: grid; gap: var(--space-4); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* ---------- 6. Skip link ---------- */
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 200;
  background: var(--panel-solid); color: var(--text-1);
  padding: 0.6em 1.2em; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border: 1px solid var(--border-strong);
}
.skip-link:focus { top: 0; }

/* ---------- 7. Scroll progress bar ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; z-index: 120;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- 8. Header / nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(6, 9, 19, 0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
  background: rgba(6, 9, 19, 0.85);
  border-bottom-color: var(--border-strong);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); min-height: var(--nav-height);
}
.site-header__brand {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.05rem;
  color: var(--text-1);
  background: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-header__brand:hover { color: var(--accent-cyan); }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 0.35rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: 0.4em 0.7em;
  font-size: var(--fs-sm); color: var(--text-2);
  border-radius: var(--radius-sm);
  background-image: none;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text-1); background: rgba(148, 163, 184, 0.08); }
.site-nav a[aria-current="page"] {
  color: var(--accent-cyan);
  background: rgba(94, 234, 212, 0.08);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-1); padding: 0.35em 0.6em; font-size: 1rem; cursor: pointer;
}
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; padding-bottom: var(--space-2); }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 0.6em 0.7em; }
  .site-header__inner { flex-wrap: wrap; }
}

/* ---------- 9. Hero ---------- */
.hero { padding: var(--space-5) 0 var(--space-5); }
.hero__layout { display: flex; gap: var(--space-5); align-items: center; }
.hero__text { flex: 1 1 auto; }
.hero__eyebrow {
  /* Cinematic overline per the animated-website label spec (DM Sans, wide tracking) */
  font-family: "DM Sans", var(--font-body);
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: var(--space-2);
}
.hero h1 { font-size: var(--fs-hero); margin-bottom: var(--space-2); }
.hero__tagline { font-size: var(--fs-md); color: var(--text-2); margin-bottom: var(--space-4); }
.hero__portrait {
  flex: 0 0 auto;
  width: clamp(150px, 22vw, 230px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 40px var(--glow-cyan), 0 20px 40px rgba(0, 0, 0, 0.4);
}
@media (max-width: 700px) {
  .hero__layout { flex-direction: column-reverse; align-items: flex-start; }
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-display); font-weight: 550; font-size: var(--fs-sm);
  padding: 0.65em 1.3em;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  background: rgba(148, 163, 184, 0.07) none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.btn:hover, .btn:focus-visible {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 18px var(--glow-cyan);
  transform: translateY(-1px);
  background-image: none;
}
.btn--primary {
  border-color: var(--accent-cyan);
  color: #04211B;
  background: linear-gradient(120deg, var(--accent-cyan), #7DD3FC);
}
.btn--primary:hover, .btn--primary:focus-visible {
  color: #04211B;
  box-shadow: 0 0 24px rgba(94, 234, 212, 0.35);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }

/* ---------- 10. Glass cards ---------- */
.card {
  background: var(--panel);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.card { color: inherit; background-image: none; display: block; }
.card:hover, a.card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px var(--glow-cyan), 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 28px var(--glow-cyan);
}
.card__media {
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card h2, .card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* Tag chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: var(--space-3) 0 0; max-width: none; }
.chips li { margin: 0; }
.chip {
  display: inline-block;
  font-size: var(--fs-xs); font-family: var(--font-display); font-weight: 500;
  color: var(--accent-violet);
  background: rgba(167, 139, 250, 0.09);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 999px;
  padding: 0.2em 0.75em;
  white-space: nowrap;
}
.chip--cyan { color: var(--accent-cyan); background: rgba(94, 234, 212, 0.08); border-color: rgba(94, 234, 212, 0.25); }

/* Highlights strip (About) */
.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 820px) { .highlights { grid-template-columns: 1fr; } }
.highlight { padding: var(--space-3) var(--space-4); }
.highlight__label {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-cyan);
  margin-bottom: var(--space-1);
}
.highlight p { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 0; }
.highlight strong { color: var(--text-1); }

/* ---------- 11. Article / long-form ---------- */
.page-header { margin-bottom: var(--space-5); }
.page-header h1 { margin-bottom: var(--space-2); }
.page-header .lede { font-size: var(--fs-md); color: var(--text-2); }
.breadcrumb { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--space-3); display: inline-block; }

figure { margin: var(--space-4) 0; }
figure img, figure video {
  margin: 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-solid);
}
figcaption {
  font-size: var(--fs-xs); color: var(--text-2);
  text-align: center; margin-top: var(--space-2);
  max-width: var(--measure); margin-left: auto; margin-right: auto;
}
figure.fig--limit img, figure.fig--limit video { max-height: 480px; width: auto; max-width: 100%; }

/* Course / timeline rows */
.timeline { list-style: none; padding: 0; }
.timeline > li {
  position: relative;
  padding: 0 0 var(--space-3) var(--space-4);
  border-left: 1px solid var(--border);
  margin: 0;
}
.timeline > li::before {
  content: "";
  position: absolute; left: -4.5px; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-1);
  border: 1.5px solid var(--accent-blue);
}
.timeline .tl-title { font-weight: 600; }
.timeline .tl-meta { font-size: var(--fs-xs); color: var(--accent-blue); font-weight: 600; }
.timeline .tl-desc { font-size: var(--fs-xs); color: var(--text-2); font-style: italic; }

/* Collapsible course descriptions */
details.course { border-bottom: 1px solid var(--border); padding: var(--space-2) 0; max-width: var(--measure); }
details.course summary { cursor: pointer; font-weight: 600; color: var(--text-1); }
details.course summary:hover { color: var(--accent-cyan); }
details.course .course-meta { font-size: var(--fs-xs); color: var(--accent-blue); font-weight: 600; margin: var(--space-1) 0; }
details.course .course-desc { font-size: var(--fs-xs); color: var(--text-2); font-style: italic; }

/* ---------- 12. Publications ---------- */
.pub-list { list-style: none; padding: 0; max-width: none; }
.pub-list li {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  max-width: none;
}
.pub-list li b, .pub-list li strong { color: var(--accent-cyan); font-weight: 650; }
.pub-list li i, .pub-list li em { color: var(--text-1); }

/* Download / resource rows */
.file-row {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  max-width: var(--measure);
}
.file-row svg { flex: 0 0 auto; color: var(--accent-blue); }

/* ---------- 13. Sticky TOC (Grad Applications) ---------- */
.with-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 1000px) {
  .with-toc { grid-template-columns: 220px minmax(0, 1fr); }
  .toc { position: sticky; top: calc(var(--nav-height) + var(--space-4)); align-self: start; }
}
.toc {
  font-size: var(--fs-sm);
  border-left: 1px solid var(--border);
  padding-left: var(--space-3);
}
.toc__title {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
  margin-bottom: var(--space-2);
}
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc a { color: var(--text-2); background-image: none; display: block; padding: 0.2em 0; }
.toc a:hover, .toc a:focus-visible { color: var(--accent-cyan); }

/* ---------- 14. Generated lists (.gr-* books / .lb-* films) ----------
   Markup for these grids is machine-generated (Goodreads RSS / Letterboxd
   export). Do NOT rename these classes without updating the refresh docs. */
.gr-shelf, .lb-shelf {
  list-style: none; padding: 0; margin: 0 0 var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2) var(--space-4);
  max-width: none;
}
.gr-book, .lb-film {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gr-book:hover, .lb-film:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 16px var(--glow-violet);
}
.gr-book img, .lb-film img {
  width: 50px; flex: 0 0 50px;
  aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 4px;
  background: var(--panel-solid);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.gr-meta, .lb-meta { line-height: 1.45; font-size: var(--fs-sm); }
.gr-title, .lb-title { font-weight: 650; color: var(--text-1); }
.gr-author, .lb-year { color: var(--text-2); font-size: var(--fs-xs); }
.gr-stars, .lb-stars { color: #E0AA3E; letter-spacing: 1px; font-size: var(--fs-xs); }
.gr-source, .lb-source { font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- 15. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-5) 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.site-footer__quote { font-style: italic; max-width: var(--measure); margin-bottom: var(--space-3); }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.social { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.social li { margin: 0; }
.social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-2);
  background-image: none;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.social a:hover, .social a:focus-visible {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 14px var(--glow-cyan);
}
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- 16. Utilities (incl. legacy stylesbe.css replacements) ---------- */
.text-muted { color: var(--text-2); }
.center { text-align: center; }
img.center { margin-left: auto; margin-right: auto; }
.section { margin-bottom: var(--space-5); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- 17. Scroll-reveal (JS-gated: html.js only) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stars--s, .stars--m, .stars--l { animation: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn, .gr-book, .lb-film, a, .social a { transition: none; }
  .card:hover, .gr-book:hover, .lb-film:hover, .btn:hover { transform: none; }
}

/* ---------- 19. Print ---------- */
@media print {
  .starfield, .site-header, .progress-bar, .site-footer .social { display: none; }
  body { background: #fff; color: #000; }
  main { padding-top: 0; }
}

/* ==========================================================================
   Planetary navigation system (§20+). Append-only from here: new sections
   get new numbers and are inserted ABOVE §27; §27 (reduced motion) and §28
   (print) must stay the LAST two blocks so their same-specificity overrides
   win the cascade.
   ========================================================================== */

/* ---------- 20. Planets: palettes + spheres ---------- */
/* Each planet's tokens live on BOTH the icon class and the page body class,
   so nav icons and per-page horizons share one palette definition. */
.planet--earth,   body.planet-earth   { --p-glow: rgba(96, 165, 250, 0.40);  --p-horizon: 96, 165, 250;  --p-horizon-2: 62, 156, 110; }
.planet--moon,    body.planet-moon    { --p-glow: rgba(200, 210, 225, 0.28); --p-horizon: 176, 184, 200; --p-horizon-2: 124, 132, 148; }
.planet--mars,    body.planet-mars    { --p-glow: rgba(224, 122, 95, 0.35);  --p-horizon: 224, 122, 95;  --p-horizon-2: 138, 51, 36; }
.planet--jupiter, body.planet-jupiter { --p-glow: rgba(217, 180, 143, 0.32); --p-horizon: 217, 180, 143; --p-horizon-2: 176, 123, 79; }
.planet--saturn,  body.planet-saturn  { --p-glow: rgba(227, 199, 138, 0.32); --p-horizon: 227, 199, 138; --p-horizon-2: 205, 176, 122; }
.planet--uranus,  body.planet-uranus  { --p-glow: rgba(155, 216, 222, 0.32); --p-horizon: 155, 216, 222; --p-horizon-2: 95, 183, 196; }

.planet {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--planet-size, 26px);
  height: var(--planet-size, 26px);
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.28), transparent 44%),
    var(--p-surface);
  box-shadow:
    inset calc(var(--planet-size, 26px) / -5) calc(var(--planet-size, 26px) / -6) calc(var(--planet-size, 26px) / 2.5) rgba(3, 6, 15, 0.72),
    0 0 calc(var(--planet-size, 26px) / 2) var(--p-glow);
}

.planet--earth {
  --p-surface:
    radial-gradient(circle at 68% 30%, rgba(240, 248, 255, 0.5) 0 8%, transparent 10%),
    radial-gradient(circle at 62% 44%, #3E9C6E 0 13%, transparent 15%),
    radial-gradient(circle at 30% 62%, #37875F 0 11%, transparent 13%),
    radial-gradient(circle at 42% 38%, #4C8FD6, #1D3E6E 78%);
}
.planet--moon {
  --p-surface:
    radial-gradient(circle at 60% 55%, #7C8494 0 9%, transparent 11%),
    radial-gradient(circle at 35% 40%, #848CA0 0 7%, transparent 9%),
    radial-gradient(circle at 55% 25%, #8A92A6 0 5%, transparent 7%),
    radial-gradient(circle at 42% 38%, #B9C1CF, #6B7385 80%);
}
.planet--mars {
  --p-surface:
    radial-gradient(circle at 55% 18%, rgba(245, 240, 235, 0.55) 0 9%, transparent 11%),
    radial-gradient(circle at 62% 58%, #8A3324 0 12%, transparent 14%),
    radial-gradient(circle at 42% 38%, #D2694A, #6E2617 80%);
}
.planet--jupiter {
  --p-surface:
    radial-gradient(circle at 64% 62%, #B3502F 0 9%, transparent 11%),
    repeating-linear-gradient(-8deg, #C89B6D 0 14%, #E4C9A4 14% 30%, #B07B4F 30% 42%, #D9B48F 42% 58%),
    radial-gradient(circle at 42% 38%, #E8CBA8, #7A4E2E 80%);
}
.planet--saturn {
  --p-surface:
    repeating-linear-gradient(-6deg, #D9BC80 0 22%, #E9D6A4 22% 46%, #CDA96E 46% 66%),
    radial-gradient(circle at 42% 38%, #EEDCAC, #8A6B38 80%);
}
.planet--uranus {
  --p-surface: radial-gradient(circle at 42% 38%, #C3E9EC, #3F8794 82%);
}

/* Rings (Saturn tilted, Uranus near-vertical) */
.planet--saturn::after, .planet--uranus::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.planet--saturn::after {
  width: 190%; height: 60%;
  transform: translate(-50%, -50%) rotate(-18deg);
  border: solid rgba(205, 176, 122, 0.65);
  border-width: 1px 3px;
}
.planet--uranus::after {
  width: 170%; height: 46%;
  transform: translate(-50%, -50%) rotate(78deg);
  border: solid rgba(155, 216, 222, 0.5);
  border-width: 1px 2px;
}

/* ---------- 21. Header planet strip ---------- */
.site-header__brand::before {
  content: "";
  display: inline-block;
  width: 17px; height: 17px;
  margin-right: 0.5em;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFF3C4, #F59E0B 75%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
  vertical-align: -3px;
}

.site-nav { --planet-size: 26px; position: relative; }
.site-nav ul { align-items: center; }

.planet-link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0.35em 0.5em 0.6em;
  border-radius: var(--radius-sm);
  background-image: none;
}
.planet-link .planet { transition: transform 0.2s ease; }
.planet-link:hover .planet,
.planet-link:focus-visible .planet { transform: scale(1.18); }
.planet-link[aria-current="page"] .planet {
  outline: 2px solid rgba(94, 234, 212, 0.55);
  outline-offset: 3px;
}

/* Desktop: label centered directly under its planet, INSIDE the header bar.
   Absolutely positioned so it adds no width — links stay icon-sized. */
.site-nav .planet-link__label {
  position: absolute;
  top: calc(100% - 5px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--text-1);
  text-shadow: 0 1px 4px rgba(6, 9, 19, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.site-nav .planet-link:hover .planet-link__label,
.site-nav .planet-link:focus-visible .planet-link__label,
.site-nav .planet-link[aria-current="page"] .planet-link__label { opacity: 1; }
/* One label at a time: hovering any planet hides the current page's label so
   adjacent labels never overlap */
.site-nav ul:has(.planet-link:hover) .planet-link[aria-current="page"]:not(:hover) .planet-link__label { opacity: 0; }

/* Mobile dropdown: planet icon + always-visible label rows */
@media (max-width: 760px) {
  .site-nav ul { align-items: flex-start; }
  .site-nav .planet-link { justify-content: flex-start; gap: 0.7em; padding: 0.6em 0.7em; }
  .site-nav .planet-link__label {
    position: static; transform: none; opacity: 1;
    font-size: var(--fs-sm);
    line-height: 1.4;
    letter-spacing: normal;
    text-shadow: none;
    pointer-events: auto;
  }
}

/* Pointer-following glow (JS sets --mx/--my/--glow-on; inert without JS) */
.site-nav::after,
.solar-nav__field::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(var(--glow-r, 180px) circle at var(--mx, 50%) var(--my, 50%),
      rgba(94, 234, 212, 0.10), rgba(96, 165, 250, 0.05) 45%, transparent 70%);
  opacity: var(--glow-on, 0);
  transition: opacity 0.3s ease;
}

/* ---------- 22. Solar-system nav (homepage) ---------- */
.solar-nav { margin: var(--space-4) 0 var(--space-5); }
.solar-nav__field {
  position: relative;
  height: clamp(230px, 28vw, 320px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  --planet-base: clamp(38px, 5vw, 60px);
  --glow-r: 300px;
}

.solar-nav__sun {
  position: absolute; left: 0; top: 50%;
  width: clamp(150px, 20vw, 240px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 62% 44%, #FFF7D6, #FFD27D 40%, #F59E0B 70%, rgba(245, 158, 11, 0) 72%);
}
.solar-nav__sun::after {
  content: "";
  position: absolute; inset: -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.30), rgba(245, 158, 11, 0.10) 42%, transparent 70%);
  animation: sun-pulse 7s ease-in-out infinite alternate;
}
@keyframes sun-pulse { from { opacity: 0.55; } to { opacity: 1; } }

/* Orbit arcs: circles centered on the sun; each diameter = 2x its planet's
   left %, so every arc passes exactly through its planet. */
.solar-nav__orbits i {
  position: absolute; left: 0; top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 50%;
}
.solar-nav__orbits i:nth-child(1) { width: 36%; }
.solar-nav__orbits i:nth-child(2) { width: 62%; }
.solar-nav__orbits i:nth-child(3) { width: 89%; }
.solar-nav__orbits i:nth-child(4) { width: 117%; }
.solar-nav__orbits i:nth-child(5) { width: 145%; }
.solar-nav__orbits i:nth-child(6) { width: 174%; }

.solar-nav__list { list-style: none; margin: 0; padding: 0; max-width: none; }
.solar-nav__list li { position: absolute; top: 50%; margin: 0; }
.solar-nav__list li:nth-child(1) { left: 18%;   --planet-size: calc(var(--planet-base) * 0.9); }
.solar-nav__list li:nth-child(2) { left: 31%;   --planet-size: calc(var(--planet-base) * 0.55); }
.solar-nav__list li:nth-child(3) { left: 44.5%; --planet-size: calc(var(--planet-base) * 0.75); }
.solar-nav__list li:nth-child(4) { left: 58.5%; --planet-size: calc(var(--planet-base) * 1.35); }
.solar-nav__list li:nth-child(5) { left: 71%;   --planet-size: calc(var(--planet-base) * 1.15); }
.solar-nav__list li:nth-child(6) { left: 89.5%; --planet-size: calc(var(--planet-base) * 0.95); }

.solar-nav .planet-link {
  padding: 0.4em;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: bob 7s ease-in-out infinite alternate;
}
.solar-nav__list li:nth-child(2n) .planet-link { animation-duration: 9s; animation-delay: -3.5s; }
.solar-nav__list li:nth-child(3n) .planet-link { animation-delay: -5s; }
@keyframes bob {
  from { transform: translate(-50%, calc(-50% - 4px)); }
  to   { transform: translate(-50%, calc(-50% + 4px)); }
}

/* Labels always visible here: page name + planet name, over open starfield */
.solar-nav .planet-link__label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 10em;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-1);
  text-shadow: 0 1px 4px rgba(6, 9, 19, 0.9), 0 0 12px rgba(6, 9, 19, 0.8);
}
.planet-link__sub {
  display: block;
  font-weight: 500;
  font-size: 0.85em;
  color: var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .solar-nav { display: none; }
}

/* ---------- 23. Warp transition + arrival ---------- */
/* Outbound: content fades, starfield zooms, radial speed-lines, planet lunges */
html.js body.is-warping main,
html.js body.is-warping .site-footer {
  animation: warp-fade 0.55s ease-in 0.2s forwards;
}
@keyframes warp-fade { to { opacity: 0; transform: scale(0.985); } }

html.js body.is-warping .starfield {
  animation: warp-zoom 0.8s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes warp-zoom { to { transform: scale(2.8); opacity: 0.35; } }

html.js body.is-warping::before {
  content: "";
  position: fixed; inset: -60vmax;
  z-index: 90;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
      transparent 0deg 5deg, rgba(199, 210, 232, 0.05) 5deg 5.6deg);
  animation: warp-spokes 0.8s cubic-bezier(0.6, 0, 1, 0.4) forwards;
}
@keyframes warp-spokes {
  from { transform: scale(0.25) rotate(0deg); opacity: 0; }
  to   { transform: scale(1.1) rotate(10deg); opacity: 1; }
}

.is-warp-origin .planet {
  animation: warp-planet 0.8s cubic-bezier(0.45, 0, 0.85, 0.4) forwards;
}
@keyframes warp-planet { to { transform: scale(2.4) rotate(35deg); } }

/* Arrival: page rises from the planet's horizon */
html.js body.is-arriving main {
  animation: arrive-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes arrive-rise { from { opacity: 0; transform: translateY(26px); } }
html.js body.is-arriving::after {
  animation: horizon-settle 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes horizon-settle { from { transform: translate(-50%, 82%); } }

/* ---------- 24. Planet horizons (per-page surface) ---------- */
body[class*="planet-"]::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  left: 50%; bottom: 0;
  width: 240vw; height: 42vh;
  transform: translate(-50%, 64%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(ellipse at 50% 0%,
      rgba(var(--p-horizon), 0.14),
      rgba(var(--p-horizon-2), 0.05) 45%,
      transparent 70%);
  box-shadow:
    0 -1px 0 rgba(var(--p-horizon), 0.30),
    0 -14px 40px rgba(var(--p-horizon), 0.10);
}

/* ---------- 25. Galaxies + aurora ---------- */
/* Distant galaxies: static blurred elliptical blobs (nebula owns ::after) */
.starfield::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90px 34px at 18% 30%, rgba(199, 210, 232, 0.10), rgba(167, 139, 250, 0.05) 55%, transparent 75%),
    radial-gradient(ellipse 60px 22px at 79% 62%, rgba(199, 210, 232, 0.08), rgba(94, 234, 212, 0.04) 55%, transparent 75%),
    radial-gradient(ellipse 44px 18px at 55% 12%, rgba(199, 210, 232, 0.07), transparent 70%);
  filter: blur(3px);
}
body.nebula-left .starfield::before { transform: translate(8vw, 12vh) scaleX(-1); }
body.nebula-low  .starfield::before { transform: translateY(-8vh); }

/* Aurora ribbons near the top of the viewport; animates whole-element
   transform/opacity only. Static (not hidden) under reduced motion. */
.aurora {
  position: absolute;
  left: -20%; top: -14%;
  width: 140%; height: 46%;
  background:
    linear-gradient(100deg, transparent 22%, rgba(94, 234, 212, 0.05) 40%, rgba(167, 139, 250, 0.06) 56%, transparent 76%),
    linear-gradient(80deg, transparent 30%, rgba(96, 165, 250, 0.04) 52%, transparent 72%);
  filter: blur(28px);
  transform: skewY(-6deg);
  animation: aurora-drift 100s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: skewY(-6deg) translateX(-3%); opacity: 0.75; }
  to   { transform: skewY(-5deg) translateX(3%); opacity: 1; }
}

/* ---------- 26. (retired July 2026) ---------- */
/* Was the illustrated SVG astronaut scene at the bottom of the homepage;
   removed when the photographic astronaut hero (§32) took over. */

/* ---------- 29. Cinematic descent hero (video + still modes) ---------- */
/* Full-bleed hero at the top of hero pages — normal page scroll, no pinning.
   Video pages (.descent--video): the descent MP4 plays ONCE on load via
   /js/descent.js and freezes on its last frame (the surface = page cover).
   Stills pages (.descent--still): the surface image, static.
   Markup: one section per page, direct child of <main>, outside .container.
   The overlay type (Playfair Display + DM Sans) is Google-Fonts-loaded only on
   hero pages — sanctioned exception, see CLAUDE.md.
   No-JS / reduced motion: static surface poster/fallback; zero video bytes. */
.descent {
  position: relative;
  height: 56vh;
  height: 56svh;
  min-height: 420px;
  background: var(--bg-0);
  margin-bottom: var(--space-5);
  --dp: 0;
  --font-cine-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-cine-body: "DM Sans", var(--font-body);
}
.descent--still { height: 50vh; height: 50svh; overflow: hidden; }

/* Video pages: pinned scroll-scrub — the sticky viewport holds the screen
   while the ~350vh track scrolls; js/descent.js maps progress to
   video.currentTime (all-intra encode = instant precise seeks). Without JS
   the section stays a 56svh static band (height gated on html.js). */
html.js .descent--video { height: var(--descent-h, 350vh); min-height: 0; }
.descent__sticky { position: relative; height: 100%; overflow: hidden; }
html.js .descent--video .descent__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
}

.descent__fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The video sits above the 2560w surface still and is visible only while
   descending: at landing it fades out to reveal the crisp still beneath
   (the video's last frame matches it, so the crossfade is seamless);
   scrubbing back up fades the video in again. */
.descent__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}
html.js .descent--video.is-ready:not(.is-landed) .descent__video { opacity: 1; }
/* Telemetry appears once the scrub is armed */
html.js .descent--video .descent__hud,
html.js .descent--video .descent__gauge { opacity: 0; transition: opacity 0.5s ease; }
html.js .descent--video.is-ready .descent__hud,
html.js .descent--video.is-ready .descent__gauge { opacity: 1; }

/* Scroll-text snippets: fade in/out at their data-show/data-hide ranges */
.descent__text {
  position: absolute;
  left: clamp(1.2rem, 7vw, 6rem);
  top: 50%;
  z-index: 2;
  max-width: 34ch;
  opacity: 0;
  transform: translateY(calc(-50% + 16px));
  filter: blur(6px);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
  pointer-events: none;
  display: none;
}
html.js .descent__text { display: block; }
.descent__text.visible { opacity: 1; transform: translateY(-50%); filter: blur(0); }
.descent__text p {
  /* Bold white over moving footage (Portal-style) for readability */
  font-family: var(--font-cine-body);
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.7rem);
  line-height: 1.45;
  color: #fff;
  margin: 0;
  max-width: none;
  text-shadow: 0 2px 18px rgba(6, 9, 19, 0.95), 0 0 44px rgba(6, 9, 19, 0.7);
}
.descent__text cite {
  display: block;
  margin-top: 0.6em;
  font-style: normal;
  font-weight: 500;
  font-size: 0.68em;
  letter-spacing: 0.08em;
  color: rgba(230, 234, 242, 0.8);
}

.descent__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--space-6) clamp(1.2rem, 5vw, 4rem) var(--space-5);
  background: linear-gradient(180deg, transparent, rgba(6, 9, 19, 0.55) 45%, rgba(6, 9, 19, 0.85));
}
.descent__caption {
  font-family: var(--font-cine-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin: 0 0 var(--space-2);
  max-width: none;
  text-shadow: 0 1px 10px rgba(6, 9, 19, 0.9);
}
.descent__title {
  font-family: var(--font-cine-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: clamp(2.4rem, 1.8rem + 3.4vw, 4.6rem);
  line-height: 1.08;
  margin: 0;
  color: var(--text-1);
  text-shadow: 0 2px 26px rgba(6, 9, 19, 0.85);
}
/* Letter-split (spans created by JS only under motion): title assembles on landing */
.descent__title .lsw { display: inline-block; white-space: nowrap; }
html.js .descent__title .ls {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i) * 40ms);
}
html.js .descent.is-landed .descent__title .ls { opacity: 1; transform: none; }

/* The hero sits flush under the fixed header on subpages */
body.has-descent main { padding-top: 0; }

/* ---------- 30. (retired July 2026) ---------- */
/* Was the stills-mode orbit->surface scroll crossfade; replaced by the static
   .descent--still surface cover in §29 when the heroes moved to native video. */

/* ---------- 31. Descent telemetry HUD + progress gauge ---------- */
.descent__hud {
  position: absolute;
  z-index: 3;
  top: calc(var(--nav-height) + var(--space-3));
  right: clamp(1rem, 3vw, 2.2rem);
  text-align: right;
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: var(--fs-xs);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  text-shadow: 0 1px 8px rgba(6, 9, 19, 0.95);
  display: none;
  pointer-events: none;
}
html.js .descent__hud { display: block; }
.descent__hud strong { color: var(--text-1); font-weight: 600; }

.descent__gauge {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 3vw, 2.2rem);
  top: 50%;
  height: 20vh;
  width: 2px;
  transform: translateY(-50%);
  background: rgba(148, 163, 184, 0.22);
  display: none;
  pointer-events: none;
}
html.js .descent__gauge { display: block; }
.descent__gauge::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--accent-cyan), var(--accent-violet));
  transform: scaleY(var(--dp));
  transform-origin: 50% 0;
}
.descent__gauge i {
  position: absolute; right: 10px;
  width: max-content;
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--text-2);
}
.descent__gauge i:nth-child(1) { top: -0.4em; }
.descent__gauge i:nth-child(2) { top: 50%; transform: translateY(-50%); }
.descent__gauge i:nth-child(3) { bottom: -0.4em; }

@media (max-width: 760px) {
  .descent__hud, .descent__gauge { display: none !important; }
}

/* ---------- 32. Homepage astronaut hero ---------- */
/* Full-bleed astronaut scene behind the hero text; the image is pre-graded
   to the Deep Space palette and dissolves into the background via mask. */
.hero--cinematic { position: relative; }
.hero__scene {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; max-width: 100vw;
  height: 145%;
  object-fit: cover;
  object-position: center 30%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16% 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16% 80%, transparent);
}
/* Mobile stacks the hero text over the astronaut — dim him for contrast */
@media (max-width: 760px) {
  .hero__scene { opacity: 0.3; }
}

/* ---------- 33. Photoreal planets (homepage solar-nav) ---------- */
/* Circular cutouts from the 4K stills (images/planets/nav/) replace the CSS
   gradient spheres in the big solar-nav only; the header keeps CSS spheres. */
.planet-photo {
  background: none;
  box-shadow: none;
  object-fit: contain;
  filter: drop-shadow(0 0 calc(var(--planet-size, 26px) / 2.5) var(--p-glow));
}
/* Saturn's rings: natural aspect, sized by height, negative margins keep the
   link's layout box the same as its round siblings (no radius: rings must
   not be clipped, and the aria-current outline hugs the wide box) */
.planet-photo.planet--saturn {
  width: auto;
  height: calc(var(--planet-size, 26px) * 1.5);
  margin: calc(var(--planet-size, 26px) * -0.25) calc(var(--planet-size, 26px) * -0.6);
  border-radius: 0;
}

/* ---------- 27. Reduced motion (planetary additions — keep after §20-26) ---------- */
@media (prefers-reduced-motion: reduce) {
  .solar-nav__sun::after,
  .solar-nav .planet-link,
  .aurora { animation: none; }
  .planet-link .planet { transition: none; }
  .planet-link:hover .planet,
  .planet-link:focus-visible .planet { transform: none; }
  .site-nav .planet-link__label { transition: none; }
  .site-nav::after,
  .solar-nav__field::after { transition: none; opacity: 0; }
  html.js body.is-warping main,
  html.js body.is-warping .site-footer,
  html.js body.is-warping .starfield,
  html.js body.is-arriving main,
  .is-warp-origin .planet { animation: none; }
  html.js body.is-warping::before { content: none; }
  html.js body.is-arriving::after { animation: none; }
  /* Descent hero (§29/§31): the video never loads (descent.js bails), the
     pinned scrub track collapses to a static band, and the surface fallback
     is the cover; telemetry and scroll-text hidden. */
  .descent__video, .descent__hud, .descent__gauge,
  .descent__text { display: none !important; }
  html.js .descent--video { height: 56vh; height: 56svh; }
  html.js .descent--video .descent__sticky { position: relative; height: 100%; }
  html.js .descent__title .ls { opacity: 1; transform: none; transition: none; }
}

/* ---------- 28. Print (planetary additions) ---------- */
@media print {
  .solar-nav, .aurora { display: none; }
  body[class*="planet-"]::after { content: none; }
  .descent { height: auto !important; }
  .descent__sticky { position: static !important; height: auto !important; }
  .descent__video, .descent__fallback, .descent__text,
  .descent__hud, .descent__gauge, .hero__scene { display: none; }
  .descent__overlay { position: static; background: none; }
  .descent__title .ls { opacity: 1; transform: none; }
}