@import url("https://cdn.jsdelivr.net/npm/@fontsource/space-grotesk@5/400.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/space-grotesk@5/600.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/space-grotesk@5/700.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5/400.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5/600.css");

/* Prototype Playground
   Stable grid, loud labels, real content. Loaded last on every page so the
   existing semantic HTML and interactions remain intact. */

html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  isolation: isolate;
  background-color: var(--cream);
  background-image: radial-gradient(rgb(21 21 21 / 10%) 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--ink);
  font-family: var(--font-family-text);
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 49.8%, rgb(21 21 21 / 3%) 50%, transparent 50.2%);
  background-size: 96px 100%;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 260px at var(--pointer-x, 72%) var(--pointer-y, 18%), rgb(76 111 255 / 16%), transparent 72%),
    radial-gradient(circle 190px at calc(var(--pointer-x, 72%) - 16%) calc(var(--pointer-y, 18%) + 24%), rgb(255 90 78 / 10%), transparent 74%);
  transition: background-position 120ms linear;
}
::selection { background: var(--blue); color: var(--white); }
a, button, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
img { filter: saturate(.85) contrast(1.05); }
.wrap { width: min(100% - 40px, 1280px); max-width: 1280px; padding-inline: 0; }

/* Shell */
.topbar {
  position: relative;
  z-index: 30;
  min-height: 70px;
  margin-block: 18px;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  box-shadow: 6px 6px 0 var(--coral);
}
.wordmark {
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 2px solid currentColor;
  font-family: var(--font-family-display);
  font-size: clamp(.95rem, 1.4vw, 1.2rem);
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
}
.wordmark em { color: var(--yellow); font-style: normal; }
.topnav { gap: 4px; color: var(--white); font-family: var(--font-family-mono); font-size: .73rem; font-weight: 600; text-transform: uppercase; }
.topnav > a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 11px; border: 2px solid transparent; }
.topnav > a:not(.btn):hover, .topnav > a:not(.btn)[aria-current="page"] { color: var(--ink); background: var(--yellow); border-color: var(--ink); transform: rotate(-1deg); }
.nav-toggle {
  display: none;
  width: 46px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  background: var(--yellow);
  color: var(--ink);
  font: 600 .72rem var(--font-family-mono);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--coral);
}
.btn {
  min-height: 46px;
  justify-content: center;
  padding: 11px 18px;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--coral);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: var(--font-family-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 120ms linear;
}
.btn:hover { background: var(--yellow); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn.ghost { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.topbar .btn.ghost { border-color: var(--white); background: var(--coral); color: var(--ink); box-shadow: 3px 3px 0 var(--white); }
.topbar .btn.ghost:hover { border-color: var(--white); background: var(--yellow); }

footer { margin-top: var(--space-8); border-top: 3px solid var(--ink); background: var(--ink); color: var(--white); font-family: var(--font-family-mono); font-size: .72rem; }
footer .cols { gap: 16px; padding-block: 28px; }
footer a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.to-top { width: 48px; height: 48px; right: 20px; bottom: 20px; border: 3px solid var(--ink); border-radius: 0; background: var(--blue); color: var(--white); box-shadow: 4px 4px 0 var(--ink); }
.to-top:hover { background: var(--yellow); color: var(--ink); transform: translate(-2px, -2px); }

/* Shared typography and surfaces */
.page-head, .fh {
  position: relative;
  margin-top: 34px;
  padding: clamp(20px, 4.5vh, 92px) clamp(42px, 7vw, 92px);
  border: 3px solid var(--ink);
  background: var(--yellow);
  box-shadow: 10px 10px 0 var(--ink);
  overflow: hidden;
}
.kicker, .sec-label, .eyebrow, .eco-label {
  width: fit-content;
  margin-bottom: 14px;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-family-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kicker svg.i { width: 14px; height: 14px; stroke-width: 2.5; }
.page-title, .title, .sec-title, .fh h1, .close-band h2 {
  font-family: var(--font-family-display);
  font-weight: 400;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.page-title { max-width: 15ch; font-size: var(--font-size-step-4); line-height: .94; }
.title, .sec-title { max-width: 18ch; font-size: var(--font-size-step-3); line-height: .98; }
h1.page-title em, .page-title em, .title em, .sec-title em, .fh h1 em { color: inherit; font-style: normal; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: .12em; text-underline-offset: .08em; }
.prose { max-width: 66ch; color: var(--color-neutral-11); font-size: clamp(1rem, 1vw + .7rem, 1.13rem); }
.link, .step-link { color: var(--ink); font-family: var(--font-family-mono); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--coral); text-underline-offset: 4px; }
.panel {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-shadow: var(--shadow-2);
}
.accent-line, .gold-line { height: 8px; width: 88px; border-radius: 0; background: var(--blue); border: 2px solid var(--ink); }
.accent-line::after { height: 8px; width: 45px; top: -2px; background: var(--coral); border: 2px solid var(--ink); border-radius: 0; }
.block { position: relative; margin-block: clamp(44px, 7vw, 96px); padding: clamp(28px, 5vw, 64px); border: 3px solid var(--ink); background: var(--paper); box-shadow: 9px 9px 0 var(--ink); }
.block:nth-of-type(3n + 1) { background: var(--yellow); }
.block:nth-of-type(3n + 2) { background: var(--blue); color: var(--white); }
.block:nth-of-type(3n) { background: var(--coral); }
.block .prose { color: var(--ink); }
.block:nth-of-type(3n + 2) .prose { color: inherit; }

/* Home poster */
/* No background fill: body already paints the dotted cream, and covering it
   here made the hero the only section without the dots. */
.hero-stage { min-height: auto; padding-bottom: 22px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(24px, 5vw, 72px);
  min-height: min(720px, calc(100svh - 116px));
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: clamp(20px, 4.5vh, 58px) clamp(26px, 5vw, 58px);
  border: 3px solid var(--ink);
  background: var(--yellow);
  box-shadow: 10px 10px 0 var(--ink);
  overflow: hidden;
}
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 { max-width: 12ch; margin: 0; font-family: var(--font-family-display); font-size: clamp(3.6rem, 9vw, 8.8rem); line-height: .82; letter-spacing: -.065em; text-transform: uppercase; }
.hero h1 em { color: inherit; font-style: normal; }
.hero .sub { max-width: 48ch; margin: 26px 0; padding: 14px 16px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); font: 600 clamp(.9rem, 1.2vw, 1.05rem)/1.5 var(--font-family-mono); }
.hero .actions { justify-content: flex-start; }
.pp-hero-copy { min-width: 0; }
.pp-poster {
  position: relative;
  min-width: 0;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: clamp(22px, 4vw, 42px);
  border: 3px solid var(--ink);
  background: var(--blue);
  box-shadow: 9px 9px 0 var(--ink);
  transform: rotate(1.5deg);
}
.pp-poster-word { display: block; margin: 0; font: 400 clamp(3.2rem, 7vw, 7rem)/.78 var(--font-family-display); letter-spacing: -.08em; text-transform: uppercase; }
.pp-poster-word:nth-of-type(1) { color: var(--yellow); -webkit-text-stroke: 3px var(--ink); }
.pp-poster-word:nth-of-type(2) { color: var(--white); -webkit-text-stroke: 3px var(--ink); }
.pp-poster-word:nth-of-type(3) { width: fit-content; padding: .03em .08em; border: 3px solid var(--ink); background: var(--coral); color: var(--ink); -webkit-text-stroke: 0; }
.pp-poster-note { padding: 13px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); font: 600 .8rem/1.4 var(--font-family-mono); text-transform: uppercase; transform: rotate(-2deg); }
.pp-sticker { width: fit-content; padding: 7px 10px; border: 3px solid var(--ink); background: var(--coral); box-shadow: 4px 4px 0 var(--ink); font: 600 .72rem var(--font-family-mono); text-transform: uppercase; transform: rotate(-3deg); }

/* Visual routes */
.pp-flow, .playground-route, .task-board-intro, .ecosystem-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  margin: 30px 0;
  padding: 18px;
  border: 3px solid var(--ink);
  background: var(--ink);
  box-shadow: 7px 7px 0 var(--coral);
  list-style: none;
}
.playground-route, .task-board-intro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ecosystem-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-flow-step, .route-step, .task-board-step, .ecosystem-rail-step {
  position: relative;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 3px solid var(--ink);
  background: var(--yellow);
  font: 600 .86rem/1.25 var(--font-family-mono);
  text-transform: uppercase;
}
.pp-flow-step > a { min-height: 100%; display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 12px; color: inherit; }
.pp-flow-step > a::after { content: "Open step"; font-size: .64rem; opacity: .78; }
.pp-flow-step > a::before {
  content: "";
  position: absolute;
  bottom: 18px;
  left: 76px;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>') center / contain no-repeat;
  opacity: .78;
}
.pp-flow-step > a:focus-visible { outline-color: var(--white); }
.pp-flow-step:nth-of-type(3n + 1), .route-step:nth-of-type(3n + 1), .task-board-step:nth-of-type(3n + 1), .ecosystem-rail-step:nth-of-type(3n + 1) { background: var(--yellow); color: var(--ink); }
.pp-flow-step:nth-of-type(3n + 2), .route-step:nth-of-type(3n + 2), .task-board-step:nth-of-type(3n + 2), .ecosystem-rail-step:nth-of-type(3n + 2) { background: var(--blue); color: var(--white); }
.pp-flow-step:nth-of-type(3n), .route-step:nth-of-type(3n), .task-board-step:nth-of-type(3n), .ecosystem-rail-step:nth-of-type(3n) { background: var(--coral); color: var(--ink); }
.pp-flow-step > span:first-child, .pp-flow-step strong, .route-step strong, .route-index, .task-board-step strong, .task-board-index, .ecosystem-rail-step strong, .rail-index { font: 700 clamp(1.8rem, 4vw, 3.8rem)/1 var(--font-family-display); }
.pp-flow-arrow, .route-arrow, .rail-arrow { align-self: center; justify-self: center; font: 700 2rem var(--font-family-display); }
.pp-flow-arrow { color: var(--white); }
.pp-flow-arrow svg.i { width: 24px; height: 24px; }
.pp-flow-step strong svg.i { width: clamp(1.8rem, 4vw, 3.8rem); height: clamp(1.8rem, 4vw, 3.8rem); }
.route-arrow, .rail-arrow { color: currentColor; }
.route-arrow svg.i, .rail-arrow svg.i { width: 24px; height: 24px; }
.pp-flow--fellowship { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }

/* Home/feed/programming */
.repo-carousel-shell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.repo-carousel { padding: 10px 10px 18px; mask-image: none; -webkit-mask-image: none; }
.carousel-arrow {
  width: 48px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font: 700 1.45rem/1 var(--font-family-mono);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 120ms linear;
}
.carousel-arrow:hover { background: var(--coral); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.carousel-arrow:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.repo-card {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.repo-card:nth-child(3n + 1) { background: var(--yellow); color: var(--ink); }
.repo-card:nth-child(3n + 2) { background: var(--blue); color: var(--white); }
.repo-card:nth-child(3n) { background: var(--coral); color: var(--ink); }
.repo-rank { color: inherit; font-family: var(--font-family-display); font-size: 2rem; }
.repo-stars, .repo-meta, .repo-desc { color: inherit; }
.repo-stars svg.i, .repo-meta svg.i { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.repo-stars:only-child { margin-left: auto; }
.rolechips { gap: 11px; }
.rolechips a, .prog-chip, .chip-row span, .stp-panel ul li, .eco-pill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-family-mono);
  font-size: .72rem;
  text-transform: uppercase;
}
.rolechips a:nth-child(3n + 1) { background: var(--yellow); color: var(--ink); }
.rolechips a:nth-child(3n + 2) { background: var(--blue); color: var(--white); }
.rolechips a:nth-child(3n) { background: var(--coral); color: var(--ink); }
.rolechips a:hover { border-color: var(--ink); color: var(--ink); }
.prog { grid-template-columns: minmax(240px, .7fr) 1.3fr; }
.prog-tabs, .stp-tabs { gap: 9px; }
.prog-tab, .stp-tab {
  min-height: 58px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-family-mono);
}
.prog-tab:hover, .stp-tab:hover { background: var(--yellow); }
.prog-tab[aria-selected="true"], .stp-tab[aria-selected="true"] { border-color: var(--ink); background: var(--coral); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
.prog-tab .m, .stp-tab .k { color: inherit; }
.prog-panel, .stp-panel { padding: 26px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 7px 7px 0 var(--ink); }
.prog-panel .pk, .stp-panel .n { color: var(--ink); }
.prog-panel h3, .stp-panel h3 { font-family: var(--font-family-display); text-transform: uppercase; }
.prog-brief { border: 3px solid var(--ink); border-radius: 0; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.prog-agenda li { border-top: 2px solid var(--ink); }

/* About */
.band { align-items: stretch; }
body[data-page="about"] .band { grid-template-columns: 1fr; gap: 24px; }
.pp-mission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
  border: 3px solid var(--ink);
  background: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  gap: 3px;
}
.pp-mission-grid > p { margin: 0; padding: clamp(20px, 3vw, 34px); background: var(--paper); color: var(--ink); }
.pp-pillar-board { padding: clamp(20px, 3vw, 34px); }
.pp-board-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pp-board-head > * { margin: 0; }
.pp-board-head > p:last-child { font-family: var(--font-family-mono); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pillar { border: 3px solid var(--ink); padding: 18px; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
.pillar + .pillar { border-top: 3px solid var(--ink); }
.pillar:nth-child(3n + 1) { background: var(--yellow); color: var(--ink); }
.pillar:nth-child(3n + 2) { background: var(--blue); color: var(--white); }
.pillar:nth-child(3n) { background: var(--coral); color: var(--ink); }
.pillar .num, .pillar p { color: inherit; }
.pp-sticker-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.pp-sticker-loop .pillar { display: block; min-height: 180px; transform: rotate(-1deg); }
.pp-sticker-loop .pillar:nth-child(even) { transform: rotate(1deg); }
.team-grid { gap: 22px; }
.member {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--ink);
  overflow: visible;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.member:nth-child(3n + 1) { box-shadow: 7px 7px 0 var(--yellow); }
.member:nth-child(3n + 2) { box-shadow: 7px 7px 0 var(--blue); }
.member:nth-child(3n) { box-shadow: 7px 7px 0 var(--coral); }
.member img { filter: none; }
.member:hover img { filter: none; transform: none; }
.member .role { width: fit-content; padding: 4px 7px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); font-family: var(--font-family-mono); text-transform: uppercase; }

/* Projects */
.project { gap: 42px; border-top: 3px solid var(--ink); }
.project .panel { background: var(--blue); }
.project .tag { width: fit-content; padding: 5px 8px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--font-family-mono); }
.project h2 { font-family: var(--font-family-display); text-transform: uppercase; }
.pp-browser { margin: 0; border: 3px solid var(--ink); background: var(--paper); box-shadow: 9px 9px 0 var(--ink); transform: rotate(-1deg); overflow: hidden; }
.pp-browser-bar { display: flex; gap: 7px; padding: 10px; border-bottom: 3px solid var(--ink); background: var(--coral); }
.pp-browser-bar span { width: 13px; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.pp-browser-bar strong { margin-left: auto; font: 600 .7rem var(--font-family-mono); text-transform: uppercase; }
.pp-browser-screen { padding: 18px; background: var(--blue); }
.pp-browser figcaption { padding: 12px; border-top: 3px solid var(--ink); background: var(--paper); color: var(--ink); }
.pp-planner-head { margin-bottom: 14px; padding: 12px; border: 3px solid var(--ink); background: var(--paper); font: 400 clamp(1.4rem, 3vw, 2.4rem)/1 var(--font-family-display); text-transform: uppercase; }
.pp-planner-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pp-planner-stats span { padding: 9px; border: 2px solid var(--ink); background: var(--yellow); font: 600 .68rem var(--font-family-mono); text-transform: uppercase; }
.pp-planner-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 8px; padding: 10px; border: 2px solid var(--ink); background: var(--paper); font: 600 .7rem var(--font-family-mono); }
.pp-planner-row:nth-child(even) { background: var(--coral); }

/* Fellowship */
.lead-band, .facts-band, .cohorts, .steps, .split, .otherroles { margin-block: 56px; }
.pullquote { font-family: var(--font-family-display); font-size: var(--font-size-step-3); line-height: .98; text-transform: uppercase; }
.pullquote em { color: inherit; font-style: normal; text-decoration: underline; text-decoration-color: var(--coral); }
.stp-req { border: 2px solid var(--ink); border-radius: 0; background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.facts-band { gap: 22px; border-top: 3px solid var(--ink); }
.facts-band > div { padding: 26px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 6px 6px 0 var(--ink); }
.facts-band > div:first-child { background: var(--blue); }
.facts-band > div:last-child { background: var(--yellow); }
.facts-band > div:first-child h3, .facts-band > div:first-child .prose { color: var(--white); }
.facts-band > div:first-child .sec-label { color: var(--ink); }
.leave-list li { border-bottom: 2px solid var(--ink); }
.fellow-grid { grid-template-columns: 1fr; }
.fellow, .pp-cohort-status {
  padding: 28px;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--blue);
  color: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
}
.pp-cohort-status h3, .pp-cohort-status h4, .pp-cohort-status p { color: var(--white); }
.pp-cohort-status .ind { width: fit-content; padding: 4px 7px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); }
.intake { border: 3px solid var(--ink); border-radius: 0; background: var(--yellow); box-shadow: 8px 8px 0 var(--ink); }
.intake .badge.now { border: 2px solid var(--ink); background: var(--ink); color: var(--white); }

/* Learning */
.course-card, .door, .floor-card, .gym-module, .gym-challenge, .gym-definition, .agent-prompt, .role-card {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
}
.course-card { background: var(--blue); color: var(--white); }
.course-card p, .course-card .facts { color: inherit; }
.course-card .kicker { background: var(--ink); color: var(--white); }
.doors { gap: 20px; }
.door { min-height: 210px; }
.door:nth-child(1) { background: var(--yellow); color: var(--ink); }
.door:nth-child(2) { background: var(--blue); color: var(--white); }
.door:nth-child(3) { background: var(--coral); color: var(--ink); }
.door:hover, .role-card:hover, .eco-card:hover { border-color: var(--ink); }
.door .says { color: inherit; font-style: normal; }
.door .go { border-top: 2px solid currentColor; color: inherit; font-family: var(--font-family-mono); }
button.door[aria-pressed="true"] { border-color: var(--ink); box-shadow: 9px 9px 0 var(--coral); }
button.door[aria-pressed="true"] .go { border-top-color: currentColor; color: inherit; }
.entry-note { width: fit-content; padding: 9px 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.step { grid-template-columns: 84px 1fr; margin-top: 14px; padding: 24px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.step:nth-child(3n + 1) { box-shadow: 7px 7px 0 var(--yellow); }
.step:nth-child(3n + 2) { box-shadow: 7px 7px 0 var(--blue); }
.step:nth-child(3n) { box-shadow: 7px 7px 0 var(--coral); }
.step .num { width: 64px; height: 64px; display: grid; place-items: center; border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--font-family-display); font-size: 1.8rem; }
.step h3, .gym-title, .gym-challenge h4, .floor-card h3 { font-family: var(--font-family-display); text-transform: uppercase; }
.done, .gym-fact { border: 2px solid var(--ink); border-radius: 0; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.tablist { gap: 8px; padding: 8px; border: 3px solid var(--ink); background: var(--ink); }
.tab {
  min-height: 46px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-weight: 600;
  text-transform: uppercase;
}
.tab:hover { background: var(--yellow); }
.tab[aria-selected="true"] { background: var(--coral); color: var(--ink); box-shadow: inset 0 -5px 0 var(--yellow); }
.floor-card { border-top: 3px solid var(--ink); background: var(--blue); color: var(--white); }
.floor-card p, .floor-card h3 { color: inherit; }
.floor-card .link { color: var(--white); }
.block:nth-of-type(3n + 2) > .prose .step-link { color: var(--white); }
.gym-modules { gap: 18px; }
.gym-module:nth-child(3n + 1) { box-shadow: 7px 7px 0 var(--yellow); }
.gym-module:nth-child(3n + 2) { box-shadow: 7px 7px 0 var(--blue); }
.gym-module:nth-child(3n) { box-shadow: 7px 7px 0 var(--coral); }
.gym-module summary { min-height: 76px; border: 0; }
.gym-module[open] summary { background: var(--yellow); border-bottom: 3px solid var(--ink); }
.gym-body { border-top: 0; background: var(--cream); }
.gym-badge { border: 2px solid var(--ink); border-radius: 0; background: var(--yellow); color: var(--ink); }
.gym-badge-do { background: var(--coral); }
.gym-badge-watch { background: var(--blue); color: var(--white); }
.gym-challenge-grid { gap: 18px; }
.gym-challenge:nth-child(3n + 1) { background: var(--yellow); color: var(--ink); }
.gym-challenge:nth-child(3n + 2) { background: var(--blue); color: var(--white); }
.gym-challenge:nth-child(3n) { background: var(--coral); color: var(--ink); }
.gym-challenge p, .gym-challenge ol { color: inherit; }
.gym-challenge .gym-challenge-num, .gym-challenge .gym-challenge-proof, .gym-challenge .gym-challenge-proof strong { color: inherit; }
.gym-challenge .gym-challenge-scenario { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.gym-challenge .gym-challenge-student { border-left: 3px solid var(--yellow); color: var(--ink); }
.gym-definition .gym-definition-label, .gym-fact a { color: var(--ink); }
.agent-prompt { background: var(--ink); color: var(--white); }
.agent-prompt-head { border-bottom: 3px solid var(--ink); background: var(--coral); color: var(--ink); }
.prompt-ladder, .ladder-builder { border: 3px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); }
.ladder-dialog { border: 3px solid var(--ink); border-radius: 0; box-shadow: 12px 12px 0 var(--blue); }
.ladder-dialog-head { border-bottom: 3px solid var(--ink); background: var(--yellow); }
.ladder-dialog-head h2 { text-transform: uppercase; }
.ladder-dialog-head h2 em, .course-card h2 em { color: inherit; font-style: normal; }
.ladder-close { width: 44px; height: 44px; justify-content: center; align-items: center; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.ladder-close:hover { border-color: var(--ink); background: var(--coral); color: var(--ink); }
.ladder-tabs { border-bottom: 3px solid var(--ink); background: var(--cream); }
.ladder-notes { background: var(--cream); }
.ladder-notes .ladder-tip { border: 3px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.ladder-output { border: 3px solid var(--ink); border-radius: 0; background: var(--ink); box-shadow: 6px 6px 0 var(--blue); }
.ladder-output-head { border-bottom: 3px solid var(--ink); background: var(--coral); color: var(--ink); }
.scratch-card { padding: 24px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 6px 6px 0 var(--ink); }
.ladder-field input, .ladder-field textarea, .ladder-select, input, select, textarea {
  min-height: 46px;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 5px 5px 0 var(--blue); }
.role-grid { gap: 20px; }
.role-card:nth-child(3n + 1) { background: var(--yellow); color: var(--ink); }
.role-card:nth-child(3n + 2) { background: var(--blue); color: var(--white); }
.role-card:nth-child(3n) { background: var(--coral); color: var(--ink); }
.role-card h3, .role-card p, .role-card .go { color: inherit; }
.role-card svg.rl { color: currentColor; }

/* Playbooks / role pages */
.job-strip { gap: 0; border: 3px solid var(--ink); background: var(--ink); box-shadow: 7px 7px 0 var(--coral); }
.job-strip > a { position: relative; min-height: 118px; padding: 14px; border: 2px solid var(--ink); background: var(--paper); transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.job-strip > a::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="7" x2="17" y2="17"/><polyline points="17 8 17 17 8 17"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="7" x2="17" y2="17"/><polyline points="17 8 17 17 8 17"/></svg>') center / contain no-repeat;
}
.job-strip > a:nth-child(3n + 1) { background: var(--yellow); color: var(--ink); }
.job-strip > a:nth-child(3n + 2) { background: var(--blue); color: var(--white); }
.job-strip > a:nth-child(3n) { background: var(--coral); color: var(--ink); }
.job-strip .jn { color: inherit; font-family: var(--font-family-display); font-size: 2rem; }
.job-strip .jt { color: inherit; font-family: var(--font-family-mono); font-size: .7rem; font-weight: 600; text-transform: uppercase; }
.evidence-note { margin-block: 28px; padding: 18px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); font-family: var(--font-family-mono); }
.task { margin-block: 28px; border: 3px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 8px 8px 0 var(--ink); overflow: visible; }
.task:nth-of-type(3n + 1) { box-shadow: 8px 8px 0 var(--yellow); }
.task:nth-of-type(3n + 2) { box-shadow: 8px 8px 0 var(--blue); }
.task:nth-of-type(3n) { box-shadow: 8px 8px 0 var(--coral); }
.task-head { padding: 24px; border-bottom: 3px solid var(--ink); background: var(--ink); color: var(--white); }
.task-head .tn { color: var(--yellow); font-family: var(--font-family-display); font-size: 2rem; }
.task-head h3 { font-family: var(--font-family-display); text-transform: uppercase; }
.task-head .cls { border: 2px solid var(--white); border-radius: 0; background: var(--coral); color: var(--ink); font-family: var(--font-family-mono); }
.task-body { padding: 24px; }
.jtbd { border: 3px solid var(--ink); background: var(--cream); }
.jtbd > div { border: 2px solid var(--ink); padding: 13px; }
.jtbd dt { color: var(--ink); font-family: var(--font-family-mono); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; text-transform: uppercase; }
.workflow-map { padding: 14px; border: 3px solid var(--ink); background: var(--blue); box-shadow: 5px 5px 0 var(--ink); }
.workflow-map > h4 { color: var(--white); font-family: var(--font-family-mono); }
.workflow-map li { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-family-mono); }
.workflow-map li:nth-child(even) { background: var(--yellow); }
.workflow-map li::before { color: var(--coral); }
.evidence, .yours { border: 3px solid var(--ink); border-radius: 0; box-shadow: 5px 5px 0 var(--ink); }
.evidence { background: var(--yellow); }
.yours { background: var(--coral); }
.evidence h4, .yours h4 { color: var(--ink); font-family: var(--font-family-display); text-transform: uppercase; }
.yours p { color: var(--ink); }
.mvp-lab { margin-block: 58px; }
.mvp-project { border: 3px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 6px 6px 0 var(--ink); }
.mvp-project:nth-child(3n + 1) { box-shadow: 6px 6px 0 var(--yellow); }
.mvp-project:nth-child(3n + 2) { box-shadow: 6px 6px 0 var(--blue); }
.mvp-project:nth-child(3n) { box-shadow: 6px 6px 0 var(--coral); }
.mvp-project summary { border-bottom: 0; background: var(--paper); transition: background 150ms linear; }
.mvp-project summary::after, .mvp-num { color: var(--ink); }
.mvp-project[open] summary { border-bottom: 3px solid var(--ink); background: var(--yellow); }
.mvp-body { border-top: 0; }
.mvp-fact, .mvp-reference, .mvp-standard { border: 2px solid var(--ink); border-radius: 0; background: var(--cream); }
.mvp-reference { border-left-width: 5px; border-left-color: var(--coral); }
.mvp-standard { box-shadow: 4px 4px 0 var(--ink); }
.otherroles .row a { border: 2px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); font-family: var(--font-family-mono); }
.otherroles .row a:hover { border-color: var(--ink); background: var(--yellow); color: var(--ink); }
.split { border: 3px solid var(--ink); background: var(--yellow); box-shadow: 7px 7px 0 var(--ink); }

/* Ecosystem */
.layer { margin-block: 38px; padding: 24px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); }
.layer:nth-of-type(even) { background: var(--yellow); }
.eco-grid { gap: 22px; }
.eco-card { border: 3px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 6px 6px 0 var(--ink); }
.eco-card:nth-child(3n + 1) { box-shadow: 7px 7px 0 var(--yellow); }
.eco-card:nth-child(3n + 2) { box-shadow: 7px 7px 0 var(--blue); }
.eco-card:nth-child(3n) { box-shadow: 7px 7px 0 var(--coral); }
.eco-name { font-family: var(--font-family-display); text-transform: uppercase; }
.eco-name em { color: inherit; font-style: normal; }
.eco-badge { border: 2px solid var(--ink); border-radius: 0; background: var(--yellow); color: var(--ink); font-family: var(--font-family-mono); }
.eco-mods { border: 2px solid var(--ink); }
.eco-mod-row + .eco-mod-row { border-top: 2px solid var(--ink); }
.eco-links { border-top: 3px solid var(--ink); }
.eco-links a { color: var(--ink); font-family: var(--font-family-mono); text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }

/* Closing band */
.close-band { margin-top: 72px; border-block: 3px solid var(--ink); background: var(--coral); color: var(--ink); }
.close-band .close { position: relative; padding-block: clamp(54px, 8vw, 96px); }
.close-band .pp-mark { width: 64px; height: 12px; margin-bottom: var(--space-5); border: 2px solid var(--ink); background: var(--yellow); transform: rotate(-2deg); }
.close-band h2 { max-width: 16ch; color: var(--ink); font-size: var(--font-size-step-4); }
.close-band .prose { color: var(--ink); }
.close-band .btn { background: var(--yellow); color: var(--ink); }
.close-band .btn.ghost { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.btn.ghost:hover, .close-band .btn:hover, .close-band .btn.ghost:hover { border-color: var(--ink); background: var(--yellow); color: var(--ink); }

section.block + section.block { border-top: 3px solid var(--ink); }

.topnav > a:not(.btn), .rolechips a, .prog-tab, .stp-tab, .tab, .otherroles a,
.pp-flow-step, .route-step, .task-board-step, .ecosystem-rail-step, .mvp-project,
.nav-toggle, .ladder-close, input, select, textarea {
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 150ms linear, color 150ms linear;
}

/* Motion */
@keyframes poster-in {
  from { opacity: 0; transform: translateY(34px) rotate(1deg) scale(.96); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes sticker-wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(2deg); }
}
.js .rv { opacity: 0; transform: translateY(30px) rotate(.25deg) scale(.985); transition: opacity 520ms linear, transform 650ms var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }
.pp-poster-word { opacity: 0; animation: poster-in 650ms var(--ease-out) forwards; }
.pp-poster-word:nth-of-type(2) { animation-delay: 90ms; }
.pp-poster-word:nth-of-type(3) { animation-delay: 180ms; }
.pp-poster { opacity: 0; animation: poster-in 700ms 260ms var(--ease-out) forwards; }
.page-head, .fh { animation: poster-in 650ms var(--ease-out) both; }
.pp-sticker { animation: sticker-wiggle 2.8s ease-in-out infinite; }

@media (hover: hover) and (pointer: fine) {
  .repo-card:hover { border-color: var(--ink); box-shadow: 9px 9px 0 var(--ink); transform: translate(-3px, -3px); }
  .member:hover, .door:hover, .role-card:hover, .eco-card:hover, .mvp-project:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ink); }
  .rolechips a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
  .job-strip > a:hover { z-index: 1; transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
  .pp-flow-step:hover, .route-step:hover, .task-board-step:hover, .ecosystem-rail-step:hover { transform: translateY(-5px); box-shadow: 5px 5px 0 var(--white); }
}

@media (min-width: 1001px) and (min-height: 650px) {
  .hero h1 { font-size: min(clamp(3.6rem, 9vw, 8.8rem), 10vh); }
  .page-title, .fh h1 { font-size: min(var(--font-size-step-4), 9vh); }
  .playground-route, .task-board-intro, .ecosystem-rail { margin-block: clamp(16px, 3vh, 30px); padding: clamp(10px, 2vh, 18px); }
  .route-step, .task-board-step, .ecosystem-rail-step { min-height: min(118px, 14vh); padding: clamp(12px, 2vh, 16px); }
  .pp-poster { min-height: min(440px, calc(100svh - 170px)); max-height: calc(100svh - 150px); }
}

@media (max-width: 1000px) {
  .js .nav-toggle { display: inline-flex; margin-left: auto; }
  .js .topnav {
    position: absolute;
    left: -3px;
    right: -3px;
    top: calc(100% + 3px);
    display: none;
    padding: 10px;
    border: 3px solid var(--ink);
    background: var(--cream);
    color: var(--ink);
    box-shadow: 7px 7px 0 var(--ink);
  }
  .js .topbar.nav-open .topnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .topnav > a:not(.btn), .js .topnav .btn { width: 100%; justify-content: flex-start; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: none; }
  .js .topbar .btn.ghost { border-color: var(--ink); box-shadow: none; }
  .hero { grid-template-columns: 1fr; }
  .pp-poster { min-height: 300px; }
  .prog, .stp { grid-template-columns: 1fr; }
  .prog-panel, .stp-panel { grid-column: 1; }
  .pp-sticker-loop { grid-template-columns: repeat(2, 1fr); }
  .pp-mission-grid { grid-template-columns: 1fr; }
  .pp-flow, .playground-route, .task-board-intro, .ecosystem-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-flow-arrow, .route-arrow, .rail-arrow { display: none; }
}

@media (max-width: 760px) {
  :root { --space-8: 52px; --shadow-3: 5px 5px 0 var(--ink); }
  .wrap { width: min(100% - 24px, 1280px); }
  .topbar { min-height: 62px; margin-block: 10px; box-shadow: 4px 4px 0 var(--coral); }
  .wordmark { font-size: .82rem; }
  .js .topbar.nav-open .topnav { grid-template-columns: 1fr; max-height: calc(100vh - 90px); overflow-y: auto; }
  .page-head, .fh { margin-top: 20px; padding: 28px 20px 34px; box-shadow: 6px 6px 0 var(--ink); }
  .page-title { padding-top: 0; }
  .block { margin-block: 34px; padding: 24px 18px; box-shadow: 6px 6px 0 var(--ink); }
  .hero { min-height: auto; padding: 28px 18px; box-shadow: 6px 6px 0 var(--ink); }
  .pp-poster-word { font-size: clamp(4.1rem, 25vw, 7.4rem); }
  .pp-poster { transform: none; }
  .pp-flow--fellowship { grid-template-columns: 1fr; }
  .pp-flow, .playground-route, .task-board-intro, .ecosystem-rail { grid-template-columns: 1fr; padding: 10px; }
  .pp-flow-step, .route-step, .task-board-step, .ecosystem-rail-step { min-height: 94px; }
  .pp-sticker-loop { grid-template-columns: 1fr; }
  .pp-board-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .pp-sticker-loop .pillar { min-height: 140px; transform: none; }
  .pp-sticker-loop .pillar:nth-child(even) { transform: none; }
  .prog-panel, .stp-panel { padding: 18px; box-shadow: 5px 5px 0 var(--ink); }
  .job-strip { grid-template-columns: repeat(2, 1fr); }
  .job-strip > a { min-height: 92px; }
  .step { grid-template-columns: 1fr; padding: 18px; }
  .step .num { width: 54px; height: 54px; }
  .gym-challenge-grid { grid-template-columns: 1fr; }
  .repo-carousel-shell { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; }
  .carousel-arrow { width: 44px; height: 50px; box-shadow: 3px 3px 0 var(--ink); }
  .task-body { padding: 16px; }
  .task-head { padding: 16px; }
  .jtbd { grid-template-columns: 1fr; }
  .workflow-map { grid-template-columns: 1fr; }
  .pp-browser { transform: none; }
  .pp-planner-stats { grid-template-columns: 1fr; }
  .close-band { margin-top: 48px; }
  footer .cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .pp-sticker, .pp-poster, .pp-poster-word { opacity: 1; transform: none; }
  body::after { display: none; }
}

.capture .rv, .capture.js .rv, .capture .pp-poster-word, .capture .pp-poster { opacity: 1; transform: none; animation: none; }

/* Page-level section index */
/* Land the section just under the top of the viewport. Desktop keeps the index
   fixed to the side, so nothing overlaps and a few pixels is enough. */
.page-nav-target { scroll-margin-top: 14px; }
.page-nav {
  position: fixed;
  top: 50%;
  right: 14px;
  z-index: 24;
  width: 164px;
  max-height: calc(100vh - 48px);
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--blue);
  color: var(--ink);
  transform: translateY(-50%);
  overflow: auto;
}
.page-nav-label { display: block; padding: 9px 10px; background: var(--ink); color: var(--white); font: 700 .68rem/1 var(--font-family-mono); letter-spacing: .08em; text-transform: uppercase; }
.page-nav ol { display: grid; margin: 0; padding: 6px; list-style: none; }
.page-nav a { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; min-height: 38px; padding: 6px; border: 2px solid transparent; color: var(--ink); font: 700 .68rem/1.2 var(--font-family-mono); text-decoration: none; text-transform: uppercase; }
.page-nav a > span:first-child { color: var(--color-neutral-9); font-size: .62rem; }
.page-nav-text { overflow: hidden; text-overflow: ellipsis; }
.page-nav a:hover { border-color: var(--ink); background: var(--coral); color: var(--ink); }
.page-nav a.is-current { border-color: var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: translate(-2px, -2px); }
.page-nav a.is-current > span:first-child { color: var(--ink); }

@media (min-width: 1001px) and (max-width: 1639px) {
  .wrap { width: min(calc(100% - 224px), 1280px); margin-left: auto; margin-right: 200px; }
}

@media (max-width: 1000px) {
  /* Here the index is a sticky strip across the top, so a jumped-to section has
     to clear it: 8px offset + 62px strip, plus a little breathing room. */
  .page-nav-target { scroll-margin-top: 78px; }
  .page-nav {
    position: sticky;
    top: 8px;
    width: min(calc(100% - 24px), 980px);
    max-height: none;
    margin: 0 12px 18px auto;
    transform: none;
    overflow: hidden;
  }
  .page-nav-label { display: none; }
  .page-nav ol { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
  .page-nav li { flex: 0 0 auto; }
  .page-nav a { grid-template-columns: 22px auto; min-height: 44px; }
  .page-nav-text { max-width: 190px; }
}

/* Short desktops: the hero must stay fully visible at scroll-top, so tighten the
   intro card rows and their oversized display numerals rather than let the box
   run past the fold. */
@media (min-width: 1000px) and (max-height: 900px) {
  .page-head, .fh { margin-top: 18px; }
  .playground-route, .task-board-intro, .ecosystem-rail { padding: 12px; gap: 10px; }
  .pp-flow-step, .route-step, .task-board-step, .ecosystem-rail-step { min-height: 0; gap: 8px; padding: 13px; }
  .pp-flow-step > span:first-child, .pp-flow-step strong, .route-step strong, .route-index,
  .task-board-step strong, .task-board-index, .ecosystem-rail-step strong, .rail-index { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
}

/* ---- Page transitions ----
   Native cross-document view transitions: the browser snapshots the outgoing
   page and animates into the incoming one on any same-origin navigation. No
   router and no link interception, so every page keeps running its own scripts
   exactly as before; browsers without support simply navigate as usual.

   Naming the header and footer lifts them out of the root snapshot, so the
   chrome holds still while the content boxes swap underneath it. The blocks
   themselves then arrive on the .rv reveal the pages already use. */
@view-transition { navigation: auto; }

.topbar { view-transition-name: site-header; }
footer { view-transition-name: site-footer; }

::view-transition-old(root) {
  animation: pt-leave 280ms cubic-bezier(.55, .085, .68, .53) both;
}
::view-transition-new(root) {
  animation: pt-enter 460ms cubic-bezier(.16, 1, .3, 1) 60ms both;
}
@keyframes pt-leave { to { opacity: 0; transform: translateY(-18px) scale(.985); } }
@keyframes pt-enter { from { opacity: 0; transform: translateY(26px) scale(.99); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}