/* Entry stylesheet: the only file pages link. Order matters. build.py inlines the
   imports into one file in dist/, so the browser makes a single request. */
/* Self-hosted fonts (SIL Open Font License, see assets/fonts/LICENSE-*.txt): variable
   WOFF2 subsets made by web/tools/subset-fonts.sh. No third-party font requests. */
@font-face {
  font-family: "Exo 2";
  src: url("/assets/fonts/exo2.woff2?v=8d7d30fef9") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("/assets/fonts/orbitron.woff2?v=8d7d30fef9") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* Design tokens: the palette and type of Orbit (UiTheme in the game). Change values
   here, not in components. The colours mean what they mean in the game: teal is the
   action (JUGAR), sky blue a link or a ring, gold today's goal and the test status. */
:root {
  /* Colours */
  --bg: #040a13;
  --bg-2: #0a1422;
  --card: #0c1624;
  --line: #1f3147;
  --line-soft: #ffffff12;
  --text: #eaeaea;
  --text-soft: #cfd6de;
  --muted: #9aa8b8;
  --faint: #7d8ca0;      /* 4.84:1 on the lightest surface (#131f30); was #6b7a8c */
  --accent: #4ecdc4;
  --accent-hover: #6fe0d8;
  --blue: #8fd3ff;
  --gold: #ffd166;
  --coral: #ff6b6b;

  /* Type: Orbitron only for the logo, H1 and H2; Exo 2 for everything else. */
  --font-display: "Orbitron", sans-serif;
  --font-body: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 17px;
  --leading: 1.65;

  /* Spacing and shape. Two radii only: the game's button (14) and a small one (6). */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 28px;
  --space-5: 56px;
  --space-6: 96px;
  --radius: 14px;
  --radius-sm: 6px;
  --max: 1120px;
  --header-h: 64px;
}

/* Reset, page background and typography. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
}
/* The game's night sky: a few fixed stars, nothing else. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 64%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 58%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, #fff5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 36%, #8fd3ff66 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 90%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 46%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 80%, #ffd16655 50%, transparent 51%);
}

a { color: var(--blue); text-decoration: underline; text-decoration-color: #8fd3ff55; text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
img, video { max-width: 100%; display: block; }
code { font-size: .92em; color: var(--text); background: #ffffff0d; padding: 1px 5px; border-radius: 4px; }

h1, h2 {
  font-family: var(--font-display);
  line-height: 1.18;
  letter-spacing: .01em;
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 700; margin-bottom: 14px; }
h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.accent { color: var(--accent); }
.lead { color: var(--text-soft); font-size: 1.14rem; max-width: 36em; }

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

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 8px 14px; background: var(--accent); color: var(--bg); border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; color: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Page frame: container, header, navigation, language selector, footer. */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
main { flex: 1; }

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #040a13f2;
  border-bottom: 1px solid var(--line-soft);
}
.top .wrap { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text); letter-spacing: .02em; margin-right: auto; white-space: nowrap; text-decoration: none; }
.brand span { color: var(--accent); }
.brand:hover { color: var(--text); }
.nav { display: flex; gap: 22px; font-size: .95rem; }
.nav a { color: var(--muted); white-space: nowrap; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* Language selector: a disclosure with one link per language. */
.lang { position: relative; font-size: .9rem; }
.lang summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 700; font-size: .8rem; letter-spacing: .08em;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--text); border-color: #8fd3ff55; }
.lang summary svg { width: 16px; height: 16px; }
.lang ul {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 170px; list-style: none; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px #000a;
}
.lang li a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 4px; color: var(--text-soft); text-decoration: none; }
.lang li a:hover { background: #ffffff0a; color: var(--text); }
.lang li a[aria-current="true"] { color: var(--accent); }
.lang li a small { color: var(--faint); font-size: .72rem; letter-spacing: .08em; align-self: center; }

/* Footer */
.foot { border-top: 1px solid var(--line-soft); padding: 32px 0 40px; color: var(--faint); font-size: .9rem; margin-top: var(--space-5); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: flex-start; }
.foot p { line-height: 1.8; }
.foot nav { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 28px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot .social { display: flex; gap: 14px; margin: 0; }
.foot .social a { display: inline-flex; padding: 6px; margin: -6px; border-radius: 8px; }
.foot .social svg { display: block; }

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .top .wrap { gap: 12px; }
  .nav { gap: 14px; font-size: .9rem; }
  .foot nav { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  .top .wrap { gap: 10px; }
  .brand { font-size: 1.02rem; }
  .nav { gap: 11px; font-size: .86rem; }
  .lang summary { padding: 6px 7px; }
  .lang summary span { display: none; }
}

/* Misión Fastdator (14-oct-2026): a thin strip under the header on every page. */
.mission-strip {
  display: block; padding: 8px 16px; text-align: center; font-size: 0.92rem; font-weight: 600;
  color: var(--bg); background: linear-gradient(90deg, var(--gold), #ffe08c 50%, var(--gold));
  text-decoration: none;
}
.mission-strip:hover, .mission-strip:focus-visible { filter: brightness(1.06); text-decoration: underline; }

/* Phone menu (16-oct-2026): the bar keeps the primary links (Curiosidades, Orbit); a burger opens the rest. */
.menu { display: none; position: relative; }
.menu summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { color: var(--text); border-color: #8fd3ff55; }
.menu-icon { display: grid; gap: 4px; width: 16px; }
.menu-icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.menu[open] .menu-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu-icon i:nth-child(2) { opacity: 0; }
.menu[open] .menu-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu nav {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; padding: 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 18px 40px #000a;
}
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu li a { display: block; padding: 11px 14px; border-radius: 6px; color: var(--text-soft); text-decoration: none; font-size: 1rem; }
.menu li a:hover { background: #ffffff0a; color: var(--text); }
.menu li a[aria-current="page"] { color: var(--accent); }
@media (max-width: 760px) {
  .nav .nav-extra { display: none; }
  .menu { display: block; }
}
@media (max-width: 360px) {
  .brand { font-size: .95rem; }
}

/* Reusable pieces: hero, buttons, status, phones, HUD readouts, project, blocks,
   facts, closing call, carousel, long text, FAQ, press kit, legal data, picker. */

/* Hero: text on the left, the game on the right, not centred. */
.hero { padding: var(--space-5) 0 var(--space-5); }
.hero-grid { display: grid; gap: 48px; align-items: center; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hero h1 { max-width: 15em; }
.hero--home h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.hero .lead { margin-top: var(--space-3); }
.lead--second { margin-top: var(--space-2) !important; color: var(--muted); }
.hero-more { margin-top: var(--space-3); font-size: .98rem; }
.hero-more a::after { content: " →"; }
.hero-slot { margin: var(--space-3) 0 0; font-weight: 600; font-size: 1rem; }
.hero-slot a { color: var(--gold, #ffd166); text-decoration: none; border-bottom: 1px solid currentColor; }

.title-row { display: flex; align-items: center; gap: 20px; }
.app-icon { width: 88px; height: 88px; border-radius: 22px; flex: none; box-shadow: 0 0 0 1px #ffffff14; }
.h1-sub { display: block; margin-top: 8px; font-family: var(--font-body); font-weight: 600; font-size: clamp(1.05rem, 2.6vw, 1.35rem); letter-spacing: 0; color: var(--text-soft); line-height: 1.3; }

/* Breadcrumbs on sub-pages */
.crumbs { margin-bottom: 20px; font-size: .9rem; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text-soft); }
.crumbs li, .prose .crumbs li + li { margin-top: 0; }

/* Status: the game's gold, a small square like a HUD light. Not a pill. */
.status { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; font-size: .92rem; font-weight: 600; color: var(--muted); }
.status span + span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 2px; background: var(--gold); }
.status .status-closedTest { color: var(--gold); }
.status .status-live { color: var(--accent); }
.status .status-live::before { background: var(--accent); }

/* Buttons: the game's JUGAR button. One solid action per screen. */
.cta { margin-top: var(--space-4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 26px; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em;
  border: 2px solid transparent; text-decoration: none; transition: background .15s ease;
}
.btn-solid { background: var(--accent); color: var(--bg); }
.btn-solid:hover { background: var(--accent-hover); color: var(--bg); }
.btn-ghost { border: 2px solid var(--blue); color: var(--blue); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.cta-note { margin-top: 10px; font-size: .9rem; color: var(--muted); max-width: 30em; }

/* Phones: every screenshot sits in a plain dark bezel. */
.phone { position: relative; }
.shot-frame {
  position: relative;
  padding: 8px;
  border-radius: 34px;
  background: #0d1726;
  box-shadow: inset 0 0 0 1px #ffffff1a, 0 18px 40px #000b;
}
.shot-frame img, .shot-frame video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  object-fit: cover; border-radius: 27px; background: var(--card);
}

/* Home hero: two phones, one behind the other, slightly turned. */
.hero-phones { position: relative; justify-self: center; width: min(400px, 100%); aspect-ratio: 5 / 6; }
.hero-phones .phone { position: absolute; width: 58%; }
.hero-phones .phone--back { left: 0; top: 4%; transform: rotate(-7deg); opacity: .8; }
.hero-phones .phone--front { right: 0; top: 0; transform: rotate(3deg); }

/* Orbit hero: the clip in one phone, and its pause button. */
.phone--hero { justify-self: center; width: min(300px, 78vw); }
.clip-toggle {
  position: absolute; right: -10px; bottom: 26px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid #8fd3ff66; background: #040a13e6; color: var(--blue);
  font: 600 .85rem var(--font-body); cursor: pointer;
}
.clip-toggle:hover { color: var(--text); border-color: var(--blue); }

/* HUD readout: the game's own jump counter (SALTO / 97), laid over a phone's corner. */
.hud {
  position: absolute; z-index: 2; left: -22px; bottom: 34px;
  display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline;
  padding: 8px 12px; background: #040a13f0; border: 1px solid #8fd3ff40; border-radius: var(--radius-sm);
  line-height: 1.15; max-width: 88%;
}
.hud-k { grid-column: 1 / -1; font-size: .72rem; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.hud-v { font-size: 1.6rem; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.hud-x { font-size: .82rem; color: var(--text-soft); }

/* Sections */
.section { padding: var(--space-5) 0; }
.projects { padding-top: var(--space-3); }
.about { padding-top: var(--space-4); }
.links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--space-3); font-weight: 600; }

/* Home: the project. Icon and name on the left, text in the middle, the game along the bottom. */
.project {
  display: grid; gap: 22px 40px; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.project-head { display: flex; gap: 20px; align-items: flex-start; }
.project-head img { width: 96px; height: 96px; border-radius: 24px; flex: none; }
.project-head h2 { margin: 6px 0 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.project-head h2 a { color: var(--text); text-decoration: none; }
.project-head h2 a:hover { color: var(--accent); }
.project-body p { color: var(--text-soft); max-width: 40em; }
.project-body p + p { margin-top: 12px; }
.project-body .project-summary { color: var(--text); font-size: 1.12rem; }
.project-body .links { margin-top: var(--space-3); }
.thumbs { grid-column: 2; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 150px)); gap: 14px; margin-top: 4px; padding-bottom: 22px; }
.thumbs img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border-radius: var(--radius); box-shadow: inset 0 0 0 1px #ffffff14; }
.thumbs li:nth-child(even) { transform: translateY(22px); }

/* Home: who is behind it. */
.about-grid { display: grid; gap: 12px 40px; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.about-grid p { color: var(--text-soft); max-width: 40em; }
.about-grid strong { color: var(--text); }
.about-links { margin-top: 12px; }

/* Orbit: one idea per block, screenshot and text, alternating sides. */
.block { padding: var(--space-5) 0; }
.block-grid { display: grid; gap: 40px 64px; align-items: center; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.block .phone { width: min(260px, 72vw); justify-self: center; }
.block:first-of-type .phone, #route .phone { width: min(300px, 76vw); }
.block--flip .block-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.block--flip .phone { order: 2; }
.block--flip .hud { left: auto; right: -22px; }
.block-text p { color: var(--text-soft); max-width: 36em; }
.block-text p + p { margin-top: 14px; color: var(--muted); }
.block + .block { border-top: 1px solid var(--line-soft); }

/* Orbit: the short facts, as a spec sheet. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 40px; margin-top: 8px; }
.facts div { padding: 14px 0; border-top: 1px solid var(--line); }
.facts dt { font-weight: 700; color: var(--text); }
.facts dd { color: var(--muted); }

/* Orbit: the closing call, framed like the game's RETO DE HOY card. */
.closing-box { border: 2px solid #ffd166aa; border-radius: var(--radius); padding: 32px 36px; background: #0c1624; max-width: 780px; }
.closing-box h2 { color: var(--gold); }
.closing-box p { color: var(--text-soft); }
.closing-box p + p, .closing-box ol + p { margin-top: var(--space-2); }
.closing .links { margin-top: var(--space-4); }
.test-steps { margin: var(--space-3) 0; padding-left: 1.4em; display: grid; gap: var(--space-3); }
.test-steps li { color: var(--text); }
.test-steps li span { display: block; margin-bottom: 8px; font-weight: 600; }

/* Screenshots carousel. Without JavaScript: a strip that scrolls sideways. With it,
   assets/js/carousel.js adds .is-carousel and Swiper makes it a coverflow. It never
   moves by itself. */
.shots-carousel { position: relative; }
.shots-carousel:not(.is-carousel) .shots {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px);
  gap: 16px; overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x mandatory;
}
.shots-carousel:not(.is-carousel) .shot { scroll-snap-align: start; }
.shots-carousel:not(.is-carousel) .carousel-controls { display: none; }
.shot figcaption { color: var(--muted); font-size: .92rem; line-height: 1.4; margin-top: 14px; text-align: center; }
.is-carousel { padding: 12px 0 8px; overflow: hidden; }
.is-carousel .shot { width: min(260px, 62vw); transition: opacity .4s ease; }
.is-carousel .shot:not(.swiper-slide-active) { opacity: .45; }
.is-carousel .shot figcaption { opacity: 0; transition: opacity .3s ease; }
.is-carousel .shot.swiper-slide-active figcaption { opacity: 1; color: var(--text); }
.is-carousel .swiper-slide-active .shot-frame { box-shadow: inset 0 0 0 1px #4ecdc488, 0 18px 40px #000b; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.carousel-prev, .carousel-next {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid #8fd3ff55; background: var(--card); color: var(--blue);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.carousel-prev:hover, .carousel-next:hover { border-color: var(--accent); color: var(--text); }
.carousel-dots { display: flex; gap: 8px; position: static !important; width: auto !important; }
.carousel-dots .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important; border-radius: 1px; background: #8fd3ff55; opacity: 1; }
.carousel-dots .swiper-pagination-bullet-active { width: 22px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .is-carousel .shot, .is-carousel .shot figcaption { transition: none; }
}

/* Long text: policies, legal notice, help */
.prose { max-width: 760px; padding: 48px 0 24px; }
.prose h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); margin-bottom: 8px; }
.prose .updated { color: var(--muted); font-size: .95rem; margin-bottom: 28px; }
.prose .scope { color: var(--muted); font-size: .95rem; margin-top: 14px; }
.prose h2, .prose-body h2 { font-size: 1.2rem; margin: 36px 0 10px; color: var(--text); }
.prose p, .prose li, .prose-body p, .prose-body li { color: var(--text-soft); }
.prose p + p, .prose-body p + p { margin-top: 12px; }
.prose ul, .prose-body ul { padding-left: 22px; margin-top: 8px; }
.prose li + li, .prose-body li + li { margin-top: 6px; }
.prose strong { color: var(--text); }
.summary { border-left: 3px solid var(--accent); background: #4ecdc40f; padding: 16px 20px; margin: 8px 0 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.summary p { color: var(--text); }
.mail { display: inline-block; margin-top: 10px; font-weight: 700; font-size: clamp(1.05rem, 4vw, 1.35rem); color: var(--gold); word-break: break-all; }
.note { border: 1px solid #ffd16688; border-radius: var(--radius-sm); padding: 14px 18px; margin: 18px 0; background: #ffd1660d; }
.note p { color: var(--text-soft); }
.pending { color: var(--gold); font-style: italic; }

/* Legal data and the press factsheet: label / value rows. */
.legal-data div, .factsheet div { display: grid; grid-template-columns: 11em 1fr; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.legal-data dt, .factsheet dt { font-weight: 700; color: var(--text); }
.legal-data dd, .factsheet dd { color: var(--text-soft); overflow-wrap: anywhere; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); padding: 16px 4px; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 10px; color: var(--muted); }

/* Press kit (presskit() layout): factsheet on the side, everything else in the main column. */
.press { padding: 48px 0 24px; }
.press h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); }
.press > .lead { margin-top: 10px; }
.press-grid { display: grid; gap: 24px 56px; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; margin-top: var(--space-4); }
.factsheet { position: sticky; top: calc(var(--header-h) + 20px); }
.factsheet h2 { font-size: 1.2rem; margin: 0 0 10px; }
.factsheet div { grid-template-columns: 1fr; gap: 2px; }
.factsheet dd { font-size: .95rem; }
.press-main > h2:first-child { margin-top: 0; }
.quote-block { font-size: 1.12rem; color: var(--text) !important; border-left: 3px solid var(--gold); padding-left: 16px; }
.press-shots { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 18px 14px; margin-top: 16px !important; }
.press-shots li { margin: 0 !important; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.press-shots img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px #ffffff14; }
.press-icon { display: flex; align-items: center; gap: 16px; margin-top: 22px !important; }
.press-icon img { width: 72px; height: 72px; border-radius: 18px; }
.note-inline { font-size: .95rem; color: var(--muted) !important; }

/* 404 */
.hero--center { text-align: center; }
.hero--center .lead { margin: var(--space-3) auto 0; }
.hero--center .actions { display: flex; justify-content: center; margin-top: var(--space-4); }

@media (max-width: 860px) {
  .hero { padding: 36px 0 24px; }
  .hero-grid, .block-grid, .block--flip .block-grid, .project, .about-grid, .press-grid { grid-template-columns: 1fr; }
  .hero-phones { width: min(340px, 92%); }
  .block--flip .phone { order: 0; }
  .block .phone { width: min(250px, 66vw); }
  .hud { left: -12px; }
  .block--flip .hud { left: -12px; right: auto; }
  .thumbs { grid-column: 1; grid-template-columns: repeat(4, 140px); overflow-x: auto; padding-bottom: 26px; }
  .factsheet { position: static; }
  .closing-box { padding: 24px 20px; }
  .clip-toggle { right: 0; }
}
@media (max-width: 480px) {
  .title-row { gap: 14px; }
  .app-icon { width: 64px; height: 64px; border-radius: 16px; }
  .legal-data div { grid-template-columns: 1fr; }
  .btn { width: 100%; }
}

/* Orbit: what the logbook holds, four numbers that open the logbook page. */
.inside { border-top: 1px solid var(--line-soft); }
.inside-intro { color: var(--text-soft); max-width: 40em; }
.inside-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; margin-top: var(--space-4); }
.inside-card {
  display: grid; gap: 2px; height: 100%; padding: 18px 20px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  color: var(--text); text-decoration: none;
}
.inside-card:hover { border-color: #4ecdc488; color: var(--text); }
.inside-art { display: flex; align-items: center; gap: 6px; min-height: 64px; margin-bottom: 8px; flex-wrap: wrap; }
.inside-art img { width: 56px; height: 56px; object-fit: contain; }
.inside-art .chip { font-size: .78rem; line-height: 1.2; padding: 4px 8px; border: 1px solid #ffd16666; border-radius: var(--radius-sm); color: var(--gold); }
.inside-n { font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; }
.inside-label { font-weight: 700; font-size: 1.05rem; }
.inside-note { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.inside-cta { margin-top: var(--space-4); }

/* Logbook page: the game's own logbook, laid open. */
.hero--logbook { padding-bottom: var(--space-3); }
.hero--logbook .lead { margin-top: var(--space-3); }
.toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); }
.toc a {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  color: var(--text); font-weight: 600; text-decoration: none;
}
.toc a:hover { border-color: #4ecdc488; color: var(--text); }
.toc a span { color: var(--blue); font-variant-numeric: tabular-nums; }
.logbook-section + .logbook-section { border-top: 1px solid var(--line-soft); }
.logbook-section h2 .count, .logbook-section h3 .count { color: var(--blue); font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.logbook-section h3 .count { font-size: .9rem; margin-left: 4px; }
.section-intro { color: var(--text-soft); max-width: 44em; }
.legend { margin-top: var(--space-2); color: var(--muted); font-size: .95rem; max-width: 52em; }
.legend strong { color: var(--text-soft); }
.tag { display: inline-block; font-size: .8rem; font-weight: 600; line-height: 1.3; padding: 2px 8px; border: 1px solid #8fd3ff44; border-radius: var(--radius-sm); color: var(--blue); }
.tag--gold { border-color: #ffd16666; color: var(--gold); }

.ship-group { margin-top: var(--space-5); }
.ship-group h3 { font-size: 1.2rem; }
.group-note { color: var(--muted); max-width: 46em; }
.ship-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; margin-top: var(--space-3); }
.ship { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ship-img { width: 88px; height: 88px; object-fit: contain; }
.ship h4 { font-size: 1.08rem; line-height: 1.3; }
.ship-about { margin-top: 4px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.ship-stats { margin-top: 8px; display: grid; gap: 4px; font-size: .92rem; line-height: 1.45; }
.ship-stats div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 8px; }
.ship-stats dt { color: var(--faint); }
.ship-stats dd { color: var(--text-soft); }
.ship-stats dd span { display: block; color: var(--muted); font-size: .86rem; }
.ship-stats .gain dd { color: var(--accent); }
.ship-stats .pay dd { color: var(--coral); }
.ship-obtain { margin-top: 10px; font-size: .9rem; color: var(--text-soft); line-height: 1.5; }
.ship-obtain .tag { margin-right: 4px; }

.critter-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; gap: 14px; margin-top: var(--space-4); }
.critter { padding: 18px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-align: center; }
.critter img { width: 96px; height: 96px; margin: 0 auto 8px; object-fit: contain; }
.critter h3 { font-size: 1.05rem; margin-bottom: 4px; }
.critter p { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.critter strong { color: var(--text-soft); }
.critter .tag { margin-top: 8px; color: var(--gold); }

.logbook-section#atlas h3 { font-size: 1.2rem; margin-top: var(--space-4); }
.atlas-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 0 40px; margin-top: 8px; }
.atlas-list li { display: grid; grid-template-columns: 2.6em 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.atlas-list .jump { color: var(--blue); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.body-img { width: 56px; height: 56px; object-fit: contain; }
.atlas-list p { line-height: 1.4; }
.place-name strong { color: var(--text); }
.place-name .kind { color: var(--faint); font-size: .85rem; margin-left: 4px; }
.place-distance { color: var(--text-soft); font-size: .92rem; font-variant-numeric: tabular-nums; }
.place-fact { color: var(--muted); font-size: .88rem; }
.atlas-beyond { margin-top: var(--space-4); padding: 16px 20px; border: 1px solid #8fd3ff44; border-radius: var(--radius-sm); color: var(--text-soft); max-width: 46em; }

.daily-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; margin-top: var(--space-4); }
.daily { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.daily h3 { font-size: 1.05rem; margin-bottom: 4px; }
.daily p { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.daily .reward { margin-top: 8px; color: var(--faint); }
.daily .reward strong { color: var(--gold); }
.logbook-contact { margin-top: var(--space-4); color: var(--muted); }

/* Press kit: the game's content, as plain lists a writer can copy. */
.prose-body h3 { margin: 20px 0 6px; color: var(--text); }
.press-list--cols { columns: 2 16em; column-gap: 28px; }
.press-list--cols li { break-inside: avoid; }
.press-list li strong { color: var(--text); }

@media (max-width: 480px) {
  .ship { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .ship-img { width: 64px; height: 64px; }
  .ship-stats div { grid-template-columns: 1fr; gap: 0; }
  .atlas-list li { grid-template-columns: 2.2em 44px minmax(0, 1fr); gap: 10px; }
  .body-img { width: 44px; height: 44px; }
  .critter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .critter { padding: 14px 10px; }
  .critter img { width: 72px; height: 72px; }
  .inside-grid { gap: 10px; }
  .inside-card { padding: 14px 12px 16px; }
  .inside-art { gap: 4px; min-height: 44px; }
  .inside-art img { width: 42px; height: 42px; }
  .inside-n { font-size: 1.8rem; }
}

/* Language picker at "/" (only visible for a moment, or without JavaScript). */
.picker { max-width: 520px; padding: 64px 20px; text-align: center; }
.picker .brand { display: inline-block; font-size: 1.6rem; margin: 0 0 18px; }
.picker h1 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; color: var(--muted); margin-bottom: 24px; }
.picker-list { list-style: none; display: grid; gap: 10px; }
.picker-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); text-decoration: none;
}
.picker-list a:hover { border-color: #4ecdc455; color: var(--text); }
.picker-list span { color: var(--muted); font-size: .9rem; text-align: right; }

/* Per-block HUD placement: over empty sky, never over the game's own hint text. */
#stops .hud { bottom: auto; top: 46%; }
.inside-art .chip.chip--hidden { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-right: 8px; border-radius: 12px; border: 1px dashed var(--line, #2a3b52); color: var(--gold); font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 1.3rem; }

/* Beta page (/orbit/beta/): the two steps as big cards, one button each, so nobody
   misses the second one. */
.beta-steps {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  display: grid;
  gap: 1rem;
}
.beta-steps li {
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.4rem;
  background: var(--surface, rgba(255, 255, 255, 0.03));
}
.beta-steps h2 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}
.beta-steps p {
  margin: 0 0 1rem;
}
.beta-steps .btn {
  display: inline-block;
}
/* Beta intro: one real screenshot beside what Orbit is, small enough on a phone
   that the two buttons stay close to the top. */
.beta-intro {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
}
.phone--beta .shot-frame { padding: 4px; border-radius: 18px; }
.phone--beta img { border-radius: 14px; }
.beta-what { margin: 0 0 .6rem; font-size: 1.05rem; }
.beta-facts { margin: 0; padding-left: 1.1rem; color: var(--text-soft); }
.beta-facts li + li { margin-top: .2rem; }
@media (min-width: 640px) {
  .beta-intro { grid-template-columns: 180px minmax(0, 1fr); gap: 1.5rem; }
}
.beta-steps .btn { font-size: 1.05rem; padding: .9rem 1.4rem; }
@media (max-width: 639px) {
  .beta-steps .btn { display: block; text-align: center; }
}

/* What people miss: joining the group is not installing the game. */
.beta-callout {
  border: 2px solid var(--gold, #ffd166);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  background: rgba(255, 209, 102, 0.08);
}
.beta-callout h2 {
  margin-top: 0;
}
.beta-after {
  margin: 1rem 0 0 !important;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--gold, #ffd166);
  background: rgba(255, 209, 102, 0.08);
  border-radius: 6px;
}

/* Articles (/blog/): numbered facts, each with its source. */
.article-toc ol { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 24px 0 0; font-size: .95rem; }
.article-toc li + li { margin-top: 0; }
.prose .fact-list { padding-left: 1.8em; }
.prose .fact-list > li::marker { color: var(--gold); font-weight: 700; }
.prose .fact-list > li { margin-top: 22px; }
.prose .fact-list h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--text); }
.prose .fact-source { font-size: .9rem; color: var(--muted); margin-top: 6px; }
.article-shot { max-width: 240px; margin: 36px auto 0; }
.article-shot figcaption { margin-top: 10px; font-size: .9rem; color: var(--muted); text-align: center; }
.article-closing { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--line); }
.article-closing .cta { margin-top: 20px; }
.posts { list-style: none; padding-left: 0 !important; }
.posts .post { padding: 18px 0; border-top: 1px solid var(--line); }
.posts .post h2 { margin: 0 0 4px; }
.posts .post .updated { margin-bottom: 8px; }

/* Planets of Orbit (planets.py): the library index, the body pages and the entry band
   on the home and Orbit pages. Space photos keep their black sky: mix-blend-mode
   lighten lets the page show through it, so no photo sits in a black box.
   Motion is limited to three things, all off with prefers-reduced-motion and only
   where the browser has scroll-driven animations: the star field drifting with the
   scroll, the route line filling as you read it, and the body photo sinking as you
   leave it. Everything works and reads the same without them. */

/* ---------------------------------------------------------------- star field */
.starfield { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.starfield span { position: absolute; inset: 0 0 -45vh; background-repeat: repeat; }
.starfield span:nth-child(1) {
  background-image:
    radial-gradient(1px 1px at 22px 34px, #ffffff8c 50%, transparent 51%),
    radial-gradient(1px 1px at 141px 92px, #ffffff66 50%, transparent 51%),
    radial-gradient(1px 1px at 88px 171px, #8fd3ff80 50%, transparent 51%);
  background-size: 210px 210px;
}
.starfield span:nth-child(2) {
  background-image:
    radial-gradient(1.4px 1.4px at 61px 240px, #ffffffa6 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 277px 66px, #ffffff80 50%, transparent 51%);
  background-size: 340px 340px;
}
.starfield span:nth-child(3) {
  background-image:
    radial-gradient(2px 2px at 410px 120px, #ffd16699 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 90px 470px, #ffffffb3 50%, transparent 51%);
  background-size: 560px 560px;
}
@keyframes star-drift { to { transform: translateY(var(--drift)); } }

/* ---------------------------------------------------------------- index: hero */
.lib-hero { padding: var(--space-5) 0 var(--space-3); }
.lib-title { font-size: clamp(2.4rem, 7.4vw, 4.8rem); line-height: 1.02; max-width: 11em; }
.lib-sub {
  display: block; margin-top: 16px; max-width: 30em;
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0;
  font-size: clamp(1.08rem, 2.4vw, 1.42rem); line-height: 1.3; color: var(--text-soft);
}
.lib-hero .lead { margin-top: var(--space-3); max-width: 40em; }
.lib-lead2 { margin-top: 12px; color: var(--gold); font-weight: 600; }

/* The route map: every body of the library on one line, in jump order. */
.route-map { margin: var(--space-4) auto 0; max-width: 1320px; padding: 0 12px; }
.route-map-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.route-map-scroll:focus-visible { outline-offset: -2px; }
.route-map-inner { position: relative; min-width: 920px; aspect-ratio: 5 / 1.25; margin: 0 24px; }
.route-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-line path {
  fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 7;
  stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75;
}
.route-dots { list-style: none; position: absolute; inset: 0; }
.route-dots li {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--size); height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
}
.route-dots a { position: relative; display: block; color: var(--text-soft); text-decoration: none; border-radius: 50%; }
.route-dots img {
  width: var(--size); height: var(--size); border-radius: 50%;
  mix-blend-mode: lighten; transition: transform .25s ease;
}
.route-dots a:hover img, .route-dots a:focus-visible img { transform: scale(1.18); }
.map-label {
  position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 0;
  padding: 2px 8px; border-radius: 4px; background: #040a13e6;
  font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--text);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.map-jump { font-family: var(--font-display); color: var(--accent); font-size: .7rem; }
.route-dots a:hover .map-label, .route-dots a:focus-visible .map-label { opacity: 1; }
.route-map figcaption {
  display: flex; justify-content: space-between; gap: 12px; margin: 10px 24px 0;
  color: var(--faint); font-size: .82rem;
}
.route-map-hint { display: none; color: var(--muted); }

/* ---------------------------------------------------------------- index: the route */
.lib-route { padding-top: var(--space-4); }
.strip-intro { color: var(--muted); max-width: 40em; }
.route-region { container-type: inline-size; margin-top: var(--space-4); }
.region-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 18px;
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em; color: var(--blue);
}
.region-title span { font-family: var(--font-body); font-size: .88rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }

.route { list-style: none; position: relative; display: grid; gap: 14px; padding-left: 34px; view-timeline: --route block; }
.route::before, .route::after { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; }
.route::before { background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); }
.route::after { background: var(--accent); transform-origin: top; }
.stop { position: relative; }
/* The node on the line: the game's ring, seen edge on. */
.stop::before {
  content: ""; position: absolute; top: 50%; left: -27px; width: 10px; height: 10px; margin-top: -5px;
  background: var(--bg); border: 2px solid var(--accent); transform: rotate(45deg);
}
.stop-card {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 12px 18px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.stop-card:hover { border-color: #8fd3ff66; background: #0f1b2c; color: var(--text); }
.stop-photo { width: 88px; height: 88px; mix-blend-mode: lighten; transition: transform .45s ease; }
.stop-card:hover .stop-photo { transform: rotate(-10deg) scale(1.06); }
.stop-text { display: grid; gap: 2px; min-width: 0; }
.stop-jump { font-family: var(--font-display); font-size: .8rem; color: var(--accent); }
.hud-k { font-family: var(--font-body); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stop-name { font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; line-height: 1.2; }
.stop-hook { color: var(--text-soft); line-height: 1.35; }
.stop-meta { margin-top: 2px; color: var(--faint); font-size: .86rem; }

/* Wide enough: the cards zigzag on both sides of the line, like the game's route. */
@container (min-width: 780px) {
  .route { grid-template-columns: 1fr 1fr; column-gap: 64px; padding: 0 0 70px; }
  .route::before, .route::after { left: 50%; margin-left: -1px; }
  .stop:nth-child(odd) { grid-column: 1; }
  .stop:nth-child(even) { grid-column: 2; translate: 0 50%; }
  .stop:nth-child(odd)::before { left: auto; right: -37px; }
  .stop:nth-child(even)::before { left: -37px; }
}

/* ---------------------------------------------------------------- videos */
.strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.strip-head h2 { margin-bottom: 6px; }
.strip-nav { display: flex; gap: 10px; }
.strip-nav[hidden] { display: none; }
.strip-nav button {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.strip-nav button:hover:not(:disabled) { border-color: var(--accent); }
.strip-nav button:disabled { opacity: .35; cursor: default; }
.vstrip {
  list-style: none; display: flex; gap: 18px; margin-top: var(--space-3); padding: 4px 4px 18px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.vcard { flex: 0 0 218px; display: grid; gap: 8px; align-content: start; scroll-snap-align: start; }
.vcard--long { flex-basis: 388px; }
/* A playing video: big enough to watch, and the player has its own fullscreen button. */
.vcard.is-playing { flex-basis: min(400px, 100%); }
.vcard--long.is-playing { flex-basis: min(720px, 100%); }
.vcard-link, .vcard-frame { aspect-ratio: 9 / 16; border-radius: var(--radius); }
.vcard--long .vcard-link, .vcard--long .vcard-frame { aspect-ratio: 16 / 9; }
.vcard-link {
  position: relative; display: grid; grid-template-rows: 1fr auto auto; padding: 16px;
  border: 1px solid var(--line); overflow: hidden; color: var(--text); text-decoration: none;
  background: linear-gradient(180deg, #0f1d30 0%, #070f1c 72%);
  transition: border-color .2s ease;
}
.vcard-poster { display: grid; place-items: start center; padding-top: 10px; }
.vcard-poster img { width: 82%; height: auto; mix-blend-mode: lighten; transition: transform .6s ease; }
.vcard-link:hover { border-color: var(--accent); color: var(--text); }
.vcard-link:hover .vcard-poster img { transform: scale(1.05) rotate(-4deg); }
/* The one translucent piece: the play button over the photo. */
.vcard-play {
  position: absolute; left: 50%; top: 40%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border: 2px solid var(--text); border-radius: 50%;
  background: #040a13a6; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease;
}
.vcard-play::after {
  content: ""; position: absolute; inset: 0; margin: auto; left: 5px;
  width: 17px; height: 20px; background: var(--text); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.vcard-link:hover .vcard-play, .vcard-link:focus-visible .vcard-play { background: var(--accent); border-color: var(--accent); }
.vcard-link:hover .vcard-play::after, .vcard-link:focus-visible .vcard-play::after { background: var(--bg); }
.vcard-title { font-weight: 700; font-size: 1.02rem; line-height: 1.25; text-wrap: balance; }
.vcard-meta { margin-top: 6px; color: var(--muted); font-size: .82rem; }
.vcard-frame { overflow: hidden; background: #000; }
.vcard-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vcard-note { color: var(--faint); font-size: .78rem; line-height: 1.35; }
.vcard-about { font-size: .92rem; font-weight: 600; }
.vcard-about a::after { content: " \2192"; }
.vstrip-note { max-width: 46em; color: var(--muted); font-size: .88rem; }
.vstrip-channel { margin-top: 10px; font-weight: 600; }

/* ---------------------------------------------------------------- index: method */
.method-grid { display: grid; gap: 12px 48px; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); border-top: 1px solid var(--line-soft); padding-top: var(--space-4); }
.method-grid p { color: var(--text-soft); max-width: 40em; }
.method-cta { margin-top: var(--space-3); color: var(--text) !important; font-weight: 600; }
.method-grid .cta { margin-top: var(--space-2); }

/* ---------------------------------------------------------------- body page: hero */
.planet-hero { padding: var(--space-4) 0 var(--space-3); }
.planet-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 56px; align-items: center; }
.planet-hud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 16px; }
.planet-hud .hud-v { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.planet-hud .hud-x { color: var(--text-soft); font-size: .95rem; }
.planet h1 { display: grid; gap: 12px; }
.planet-name { font-size: clamp(2.7rem, 8.4vw, 5.2rem); line-height: .98; }
.planet-hook {
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0; line-height: 1.22;
  font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--blue);
}
.planet .lead { margin-top: var(--space-3); }
.planet-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.planet-toc a {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text-soft); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.planet-toc a span { font-family: var(--font-display); font-size: .8rem; color: var(--accent); }
.planet-toc a:hover { border-color: var(--blue); color: var(--text); }
.planet-figure { justify-self: center; width: 100%; max-width: 540px; }
.planet-photo img { width: 100%; height: auto; mix-blend-mode: lighten; }
.planet-figure figcaption { margin-top: 12px; color: var(--faint); font-size: .8rem; line-height: 1.45; text-align: center; }
.credit-label {
  display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid #ffd16680; border-radius: 4px;
  color: var(--gold); font-size: .74rem; font-weight: 600;
}

/* ---------------------------------------------------------------- body page: facts */
.lib-facts { padding-top: var(--space-4); }
.facts-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 48px; margin-top: 6px; }
.fact { position: relative; padding: 22px 0 26px 66px; border-top: 1px solid var(--line); }
.fact-n {
  position: absolute; left: 0; top: 18px; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem;
  line-height: 1; color: transparent; -webkit-text-stroke: 1px #8fd3ffaa;
}
.fact h3 { font-size: 1.16rem; margin-bottom: 8px; }
.fact p { color: var(--text-soft); }
.refs { font-size: .7em; white-space: nowrap; }
.refs a { margin-left: 2px; padding: 0 3px; color: var(--accent); font-weight: 700; text-decoration: none; }
.refs a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- body page: in the game */
.game-card {
  display: grid; gap: 14px; max-width: 780px; padding: 30px 34px;
  border: 2px solid #4ecdc455; border-radius: var(--radius); background: var(--card);
}
.game-card h2 { margin-bottom: 0; }
.game-card > p { color: var(--text-soft); }
.logbook-card { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.logbook-k { color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.logbook-v { margin-top: 4px; font-size: 1.12rem; color: var(--text); }
.game-card .cta { margin-top: 4px; }
.game-card .links { margin-top: 0; }

.jump-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: var(--space-4); }
.jump-prev, .jump-next {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 700;
}
.jump-next { flex-direction: row-reverse; text-align: right; }
.jump-prev:hover, .jump-next:hover { border-color: var(--accent); color: var(--text); }
.jump-prev img, .jump-next img { width: 56px; height: 56px; flex: none; border-radius: 50%; mix-blend-mode: lighten; }
.jump-prev small, .jump-next small { display: block; font-family: var(--font-body); font-size: .78rem; font-weight: 600; color: var(--muted); }
.jump-all { font-weight: 600; text-align: center; }

/* ---------------------------------------------------------------- body page: sources */
.lib-sources { padding-top: var(--space-3); }
.source-list { display: grid; gap: 6px; padding-left: 1.7em; color: var(--text-soft); font-size: .95rem; }
.source-list a { overflow-wrap: anywhere; }
.source-list li { scroll-margin-top: calc(var(--header-h) + 24px); }
.source-list li:target { color: var(--text); background: #4ecdc41a; border-radius: 4px; }
.sources-note { margin-top: 12px; color: var(--faint); font-size: .86rem; }

/* ---------------------------------------------------------------- entry band (home, Orbit) */
.band-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px 56px; align-items: center;
  padding: 34px 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.band-text h2 { margin-bottom: 10px; }
.band-text p { color: var(--text-soft); max-width: 34em; }
.band-cta { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.band-note { color: var(--muted); font-size: .88rem; }
.band-orbs { list-style: none; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.band-orbs::before { content: ""; position: absolute; left: 6%; right: 6%; top: calc(50% - 12px); border-top: 2px dashed #4ecdc455; }
.band-orbs li { position: relative; }
.band-orbs a { display: grid; justify-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-family: var(--font-display); font-size: .78rem; }
.band-orbs img { width: clamp(40px, 6.4vw, 78px); height: auto; border-radius: 50%; mix-blend-mode: lighten; transition: transform .35s ease; }
.band-orbs li:nth-child(4) img, .band-orbs li:nth-child(6) img { width: clamp(50px, 8vw, 100px); }
.band-orbs a:hover { color: var(--accent); }
.band-orbs a:hover img { transform: scale(1.1) rotate(-8deg); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  .planet-grid { grid-template-columns: 1fr; }
  .planet-figure { order: -1; max-width: 340px; }
  .band-grid, .method-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .route-map-inner { min-width: 1500px; }
  .route-map figcaption span:not(.route-map-hint) { display: none; }
  .route-map-hint { display: inline; }
  .band-grid { padding: 26px 20px; }
  .game-card { padding: 24px 20px; }
  .jump-nav { grid-template-columns: 1fr 1fr; }
  .jump-all { grid-column: 1 / -1; order: 3; }
  .jump-prev, .jump-next { padding: 8px 10px; font-size: .92rem; }
  .jump-prev img, .jump-next img { width: 44px; height: 44px; }
  .fact { padding-left: 54px; }
  .fact-n { font-size: 1.55rem; }
}
@media (max-width: 420px) {
  .stop-card { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .stop-photo { width: 68px; height: 68px; }
  .vcard { flex-basis: 196px; }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .route-line path { stroke-dashoffset: 0; animation: route-draw 1.6s ease-out both; }
  @supports (animation-timeline: scroll()) {
    .starfield span { animation: star-drift linear both; animation-timeline: scroll(root); }
    .starfield span:nth-child(1) { --drift: -8vh; }
    .starfield span:nth-child(2) { --drift: -18vh; }
    .starfield span:nth-child(3) { --drift: -34vh; }
    .route::after { animation: route-fill linear both; animation-timeline: --route; animation-range: cover 15% cover 75%; }
    .planet-photo img { animation: photo-sink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
}
@keyframes route-draw { from { opacity: 0; stroke-dashoffset: 200; } to { opacity: .75; stroke-dashoffset: 0; } }
@keyframes route-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes photo-sink { to { transform: translateY(14%) rotate(5deg) scale(.92); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* The video blog (blog.py, blog_html.py): the index grid, the post page, the posts on
   the planet pages and the «latest updated planets» band. Same pieces as the library
   (planets.css): cards with a 1px line, the game's two radii, photos on the page's sky
   with mix-blend-mode lighten. No new colours. */

/* ---------------------------------------------------------------- cards */
.post-grid {
  list-style: none; display: grid; gap: 22px; padding: 0; margin: var(--space-3) 0 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.post-card { display: flex; margin: 0; }
.post-card-link {
  display: grid; grid-template-rows: auto 1fr; width: 100%; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  color: var(--text); text-decoration: none; transition: border-color .2s ease;
}
.post-card-link:hover { border-color: var(--accent); color: var(--text); }
.post-card-cover {
  display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(180deg, #0f1d30 0%, #070f1c 80%);
}
.post-card-cover img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; transition: transform .5s ease; }
.post-card-link:hover .post-card-cover img { transform: scale(1.04); }
.post-card-body { display: grid; align-content: start; gap: 8px; padding: 18px 20px 20px; }
.post-card-tags { color: var(--accent); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.post-card-title { margin: 0; font-family: var(--font-body); font-size: 1.18rem; font-weight: 700; line-height: 1.28; letter-spacing: 0; text-wrap: balance; }
.post-card-text { color: var(--text-soft); font-size: .95rem; line-height: 1.5; }
.post-card-meta { margin-top: 4px; color: var(--faint); font-size: .85rem; }

/* The newest post opens the index wide, picture beside the text. */
@media (min-width: 900px) {
  .blog-list .post-card:first-child { grid-column: 1 / -1; }
  .blog-list .post-card:first-child .post-card-link { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: none; }
  .blog-list .post-card:first-child .post-card-cover { aspect-ratio: 16 / 9; }
  .blog-list .post-card:first-child .post-card-body { align-content: center; padding: 32px 36px; }
  .blog-list .post-card:first-child .post-card-title { font-family: var(--font-display); font-size: 1.7rem; }
}

/* ---------------------------------------------------------------- index */
.blog-hero { padding: var(--space-5) 0 0; }
.blog-hero h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.04; }
.blog-hero .lead { margin-top: var(--space-3); max-width: 40em; }
.blog-feed { margin-top: 14px; font-size: .92rem; font-weight: 600; }
.blog-list { padding-top: var(--space-4); }

/* ---------------------------------------------------------------- post: hero */
.post-hero { padding: var(--space-4) 0 var(--space-3); }
.post-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px 56px; align-items: center; }
.post-hero h1 { font-size: clamp(2rem, 5.4vw, 3.3rem); line-height: 1.08; text-wrap: balance; }
.post-hero .lead { margin-top: var(--space-3); max-width: 36em; }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; }
.post-tags li { margin: 0; }
.post-tags a {
  display: inline-block; padding: 4px 11px; border: 1px solid #4ecdc466; border-radius: var(--radius-sm);
  color: var(--accent); font-size: .82rem; font-weight: 600; text-decoration: none;
}
.post-tags a:hover { border-color: var(--accent); color: var(--text); }
.post-byline { margin-top: var(--space-3); color: var(--muted); font-size: .92rem; }
.post-byline a { font-weight: 600; }
.post-main-video { list-style: none; display: flex; justify-content: center; padding: 0; margin: 0; }
.post-main-video .vcard { flex: 0 1 300px; }
.post-main-video .vcard--long { flex-basis: 100%; }
.post-main-video .vcard.is-playing { flex-basis: 100%; }
.post-hero-video .vstrip-note { margin-top: 10px; font-size: .78rem; text-align: center; }

/* ---------------------------------------------------------------- post: body */
.post-layout { padding-bottom: var(--space-5); }
.post-body { max-width: 760px; }
.post-body > h2, .post-body section > h2 { font-size: 1.45rem; margin: 44px 0 12px; scroll-margin-top: calc(var(--header-h) + 20px); }
.post-body h3 { scroll-margin-top: calc(var(--header-h) + 20px); }
.post-body p, .post-body li { color: var(--text-soft); font-size: 1.06rem; line-height: 1.75; }
.post-body p + p { margin-top: 14px; }
.post-body ul, .post-body ol { padding-left: 22px; margin-top: 10px; }
.post-body li + li { margin-top: 6px; }
.post-body strong { color: var(--text); }
.post-body blockquote { margin: 22px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--gold); }
.post-body blockquote p { color: var(--text); font-size: 1.12rem; }
.post-toc { margin: 8px 0 8px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.post-toc p { color: var(--muted) !important; font-size: .78rem !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.post-toc ol { margin-top: 8px; }
.post-toc li { font-size: .98rem !important; }

.post-video { margin: 36px 0; padding: 22px 0 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
.post-video h2, .post-video h3 { margin: 0 0 14px !important; font-size: 1.2rem; }
.post-video-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.post-video-card { list-style: none; display: flex; padding: 0 !important; margin: 0 !important; }
.post-video-card .vcard { flex: 0 0 200px; }
.post-video-card .vcard--long { flex-basis: 340px; }
.post-video-card .vcard.is-playing { flex-basis: min(400px, 80vw); }
.post-body .vcard-note { font-size: .78rem; line-height: 1.35; }
.post-body .vcard-about { font-size: .92rem; margin-top: 0; }
.post-video-meta { color: var(--muted) !important; font-size: .9rem !important; }
.post-video-meta a { font-weight: 600; }
.post-transcript { margin-top: 12px; }
.post-transcript summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.post-transcript p { margin-top: 10px; font-size: .98rem !important; }

.post-faq { margin-top: 12px; }
.post-planets ul { list-style: none; display: grid; gap: 12px; padding: 0 !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.post-planets li { margin: 0 !important; }
.post-planets a {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--text); text-decoration: none;
}
.post-planets a:hover { border-color: var(--accent); color: var(--text); }
.post-planets img { width: 64px; height: 64px; border-radius: 50%; mix-blend-mode: lighten; }
.post-planets span { display: grid; gap: 2px; }
.post-planets strong { font-family: var(--font-display); font-size: 1.02rem; }
.post-planets small { color: var(--text-soft); font-size: .88rem; line-height: 1.35; }
.post-planets .post-planet-jump { color: var(--accent); font-size: .8rem; }

.post-sources { margin-top: 12px; }
.post-sources li, .post-sources p { font-size: .94rem !important; }
.post-sources a { overflow-wrap: anywhere; }
.post-credits { list-style: none; padding: 0 !important; margin-top: 18px !important; }
.post-credits li { color: var(--faint) !important; font-size: .82rem !important; }
.post-related { padding-top: 0; }

/* ---------------------------------------------------------------- planet pages and bands */
.planet-posts .post-grid { margin-top: var(--space-2); }
.updated-list {
  list-style: none; display: grid; gap: 12px; padding: 0; margin: var(--space-3) 0 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.updated-item { display: grid; align-content: start; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.updated-planet { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; color: var(--text); text-decoration: none; }
.updated-planet:hover { color: var(--accent); }
.updated-planet img { width: 56px; height: 56px; border-radius: 50%; mix-blend-mode: lighten; }
.updated-planet span { display: grid; gap: 2px; }
.updated-planet strong { font-family: var(--font-display); font-size: 1rem; }
.updated-planet small { color: var(--muted); font-size: .82rem; }
.updated-post { display: block; padding: 10px 14px 12px; border-top: 1px solid var(--line-soft); color: var(--text-soft); font-size: .9rem; line-height: 1.35; text-decoration: none; }
.updated-post span { display: block; color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.updated-post:hover { color: var(--text); }

/* ---------------------------------------------------------------- author */
.author .lead { margin-top: 10px; }
.author-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding-left: 0 !important; font-weight: 600; }
.author-links li + li { margin-top: 0; }
.author-posts { padding: var(--space-3) 0 var(--space-5); }

@media (max-width: 900px) {
  .post-hero-grid { grid-template-columns: 1fr; }
  .post-hero-video { max-width: 340px; width: 100%; justify-self: center; }
  .post-hero-video:has(.vcard--long) { max-width: none; }
}
@media (max-width: 560px) {
  .post-video-grid { grid-template-columns: 1fr; }
  .post-video-card .vcard { flex-basis: min(240px, 100%); }
  .post-video-card .vcard--long { flex-basis: 100%; }
}