@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500&display=swap");

html.program-page {
  background: #091116;
  overflow-x: clip;
  scroll-padding-top: 112px;
}

body.program-page {
  --pp-ink: #091116;
  --pp-deep: #060e13;
  --pp-navy: #0d1b24;
  --pp-close: #030a0f;
  --pp-cyan: #a5eaff;
  --pp-paper: #f2f5f2;
  --pp-muted: #b8c9cf;
  --pp-rule: #718087;
  --pp-sans: "Instrument Sans", var(--font-sans);
  --pp-mono: "IBM Plex Mono", var(--font-mono);
  --header-height: 72px;
  background: var(--pp-ink);
  color: var(--pp-paper);
  font-family: var(--pp-sans);
  overflow-x: clip;
}

body.program-page h1,
body.program-page h2,
body.program-page h3,
body.program-page p,
body.program-page figure {
  margin: 0;
  font-weight: 400;
  color: inherit;
}

body.program-page a {
  color: inherit;
}

body.program-page #site-footer {
  display: none;
}

body.program-page .site-header {
  height: 72px;
  background: var(--pp-ink);
}

body.program-page .site-header::before {
  display: none;
}

body.program-page .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgb(165 234 255 / 11%);
  pointer-events: none;
}

body.program-page .site-header__bar.container {
  max-width: 1696px;
  width: 100%;
  height: 72px;
  margin-inline: auto;
  padding-inline: max(env(safe-area-inset-left, 0px), clamp(20px, 5vw, 72px));
  padding-block: 0;
  align-items: center;
  gap: 24px;
}

body.program-page .site-logo {
  gap: 0;
}

body.program-page .site-logo__mark {
  display: none;
}

body.program-page .site-logo__name {
  font-family: var(--pp-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2.24px;
  color: var(--pp-paper);
}

body.program-page .nav-toggle {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  height: auto;
  border: 0;
  padding: 12px 8px;
  color: var(--pp-paper);
  font-family: var(--pp-sans);
  font-size: 16px;
  line-height: 20px;
  position: relative;
  z-index: 240;
}

body.program-page .nav-toggle span {
  display: none;
}

body.program-page .nav-toggle::after {
  content: "Menu";
}

body.program-page.is-nav-open .nav-toggle::after {
  content: "Close";
}

body.program-page .site-nav.is-open {
  inset: 0;
  z-index: 220;
  background: var(--pp-ink);
  border: 0;
  padding: 96px clamp(20px, 5vw, 72px) 32px;
}

body.program-page .site-nav__link,
body.program-page .site-nav__dropdown-toggle {
  min-height: 44px;
  color: var(--pp-paper);
  font-family: var(--pp-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  background: transparent;
}

body.program-page .site-nav__link:hover,
body.program-page .site-nav__link.is-active,
body.program-page .site-nav__dropdown-link:hover,
body.program-page .site-nav__dropdown-link.is-active {
  color: var(--pp-paper);
  background: transparent;
}

body.program-page .site-nav__link:focus-visible,
body.program-page .site-nav__dropdown-link:focus-visible,
body.program-page .nav-toggle:focus-visible,
body.program-page .pp-text-link:focus-visible,
body.program-page .pp-next__name:focus-visible,
body.program-page .pp-family__item:focus-visible {
  outline: 2px solid var(--pp-cyan);
  outline-offset: 3px;
}

body.program-page .site-nav__dropdown-link {
  min-height: 44px;
  color: var(--pp-muted);
  text-transform: none;
}

body.program-page .page-content {
  padding-top: 72px;
}

.pp-page {
  width: 100%;
  background: var(--pp-ink);
}

.pp-band,
.pp-open {
  position: relative;
  width: 100%;
  padding: 72px max(20px, 5vw) 96px;
  overflow: clip;
}

.pp-open {
  padding-top: 24px;
  padding-bottom: 40px;
}

.pp-band--deep {
  background: var(--pp-deep);
}

.pp-band--use {
  background: var(--pp-navy);
  padding-top: 132px;
  padding-bottom: 144px;
}

.pp-band--close {
  background: var(--pp-close);
  padding-top: 116px;
  padding-bottom: 64px;
}

.pp-contour {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: min(800px, 100%);
  object-fit: cover;
  pointer-events: none;
  opacity: 0.95;
}

.pp-kicker {
  position: relative;
  font-family: var(--pp-mono);
  font-size: 14px;
  line-height: 1.4;
  color: var(--pp-cyan);
}

.pp-band > .pp-kicker {
  padding-bottom: 16px;
}

.pp-identity {
  position: relative;
  display: grid;
  gap: 8px 48px;
  margin-bottom: 24px;
}

.pp-name {
  font-size: clamp(4.5rem, 12vw, 6.75rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.pp-one-liner {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--pp-muted);
  max-width: 36rem;
}

.pp-open__motion {
  position: relative;
  display: grid;
  gap: 24px;
  align-items: start;
}

.pp-thesis,
.pp-open__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.pp-thesis {
  padding-top: 8px;
}

.pp-open__meta {
  gap: 32px;
}

.pp-thesis__statement,
.pp-display {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.75rem, 4vw, 2rem);
  line-height: 1.16;
}

.pp-display {
  font-size: clamp(2.25rem, 6vw, 4.125rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.pp-display--how,
.pp-display--system {
  font-size: clamp(2.125rem, 5.5vw, 3.875rem);
  max-width: none;
  margin: 24px 0 8px;
}

.pp-display--use {
  font-size: clamp(2.5rem, 7vw, 4.875rem);
  max-width: 18ch;
  margin: 8px 0 24px;
}

.pp-display--close {
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  letter-spacing: -0.02em;
  max-width: none;
  overflow-wrap: anywhere;
}

.pp-tags {
  display: flex;
  flex-direction: column;
  font-family: var(--pp-mono);
  font-size: 14px;
  line-height: 1.4;
  color: var(--pp-cyan);
}

.pp-text-link,
.pp-next__name,
.pp-family__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 8px;
  text-decoration: none;
}

.pp-open__meta .pp-text-link,
.pp-band--close .pp-text-link,
.pp-next__name,
.pp-family__item {
  padding-left: 0;
  padding-right: 0;
}

.pp-text-link:hover,
.pp-next__name:hover,
.pp-family__item:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pp-clip {
  position: relative;
  width: 100%;
  background: #030a0f;
}

.pp-clip__stage {
  position: absolute;
  inset: 0;
}

.pp-clip__poster,
.pp-clip__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.pp-clip__video {
  opacity: 0;
}

.pp-clip__stage.is-playing .pp-clip__video,
.pp-clip__stage.is-held .pp-clip__video {
  opacity: 1;
}

.pp-clip__stage.is-playing .pp-clip__poster,
.pp-clip__stage.is-held .pp-clip__poster {
  opacity: 0;
}

.pp-clip__caption {
  position: absolute;
  z-index: 3;
  top: 3.6%;
  left: 2.6%;
  width: max-content;
  max-width: 72%;
  padding: 0.22em 0.48em 0.28em 0.42em;
  box-sizing: border-box;
  background: rgb(9 17 22 / 0.86);
  pointer-events: none;
}

.pp-clip__caption-kicker {
  font-family: var(--pp-sans);
  font-size: clamp(0.625rem, 1.05vw, 0.8rem);
  letter-spacing: 0.14em;
  color: rgb(242 245 242 / 0.78);
}

.pp-clip__caption-line {
  margin-top: 0.2em;
  font-size: clamp(1.15rem, 2.15vw, 1.75rem);
  line-height: 1.12;
  color: var(--pp-paper);
}

button.pp-family__item {
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.pp-page[data-program="shoal"] .pp-family__item:hover,
.pp-page[data-program="leadline"] .pp-family__item:hover,
.pp-page[data-program="tideline"] .pp-family__item:hover,
.pp-page[data-program="mosaic"] .pp-family__item:hover {
  text-decoration: none;
  color: var(--pp-paper);
}

.pp-page[data-program="shoal"] .pp-band > .pp-kicker + .pp-problem,
.pp-page[data-program="shoal"] .pp-band > .pp-kicker + .pp-display,
.pp-page[data-program="shoal"] .pp-band > .pp-kicker + .pp-core,
.pp-page[data-program="leadline"] .pp-band > .pp-kicker + .pp-problem,
.pp-page[data-program="leadline"] .pp-band > .pp-kicker + .pp-display,
.pp-page[data-program="leadline"] .pp-band > .pp-kicker + .pp-core,
.pp-page[data-program="tideline"] .pp-band > .pp-kicker + .pp-problem,
.pp-page[data-program="tideline"] .pp-band > .pp-kicker + .pp-display,
.pp-page[data-program="tideline"] .pp-band > .pp-kicker + .pp-core,
.pp-page[data-program="tideline"] .pp-band > .pp-kicker + .pp-listed,
.pp-page[data-program="mosaic"] .pp-band > .pp-kicker + .pp-problem,
.pp-page[data-program="mosaic"] .pp-band > .pp-kicker + .pp-display,
.pp-page[data-program="mosaic"] .pp-band > .pp-kicker + .pp-core,
.pp-page[data-program="mosaic"] .pp-band > .pp-kicker + .pp-listed {
  margin-top: 40px;
}

.pp-page[data-program="shoal"] .pp-display--use,
.pp-page[data-program="leadline"] .pp-display--use,
.pp-page[data-program="tideline"] .pp-display--use,
.pp-page[data-program="mosaic"] .pp-display--use {
  max-width: 22ch;
}

.pp-page[data-program="shoal"] .pp-use-copy,
.pp-page[data-program="leadline"] .pp-use-copy,
.pp-page[data-program="tideline"] .pp-use-copy,
.pp-page[data-program="mosaic"] .pp-use-copy {
  display: block;
  width: min(50rem, 100%);
  margin-top: 40px;
  margin-left: auto;
}

.pp-page[data-program="shoal"] .pp-display--close,
.pp-page[data-program="leadline"] .pp-display--close,
.pp-page[data-program="tideline"] .pp-display--close,
.pp-page[data-program="mosaic"] .pp-display--close {
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  letter-spacing: -0.02em;
}

.pp-page[data-program="shoal"] .pp-tags,
.pp-page[data-program="leadline"] .pp-tags,
.pp-page[data-program="tideline"] .pp-tags,
.pp-page[data-program="mosaic"] .pp-tags {
  align-items: flex-start;
}

.pp-page[data-program="shoal"] .pp-tags span,
.pp-page[data-program="leadline"] .pp-tags span,
.pp-page[data-program="tideline"] .pp-tags span,
.pp-page[data-program="mosaic"] .pp-tags span {
  white-space: nowrap;
  width: max-content;
}

.pp-scribe {
  position: relative;
  margin-top: 72px;
  max-width: 66rem;
}

.pp-scribe__body {
  margin-top: 20px;
  max-width: 54rem;
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.45;
  color: var(--pp-muted);
}

.pp-page[data-program="shoal"] .pp-scribe__body {
  margin-top: 40px;
}

.pp-scribe__stages {
  display: grid;
  gap: 28px;
  margin-top: 40px;
}

.pp-scribe__title {
  font-size: clamp(1.25rem, 2.1vw, 1.5rem);
  line-height: 1.16;
}

.pp-scribe__copy {
  margin-top: 10px;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.4;
  color: var(--pp-muted);
}

@media (min-width: 900px) {
  .pp-scribe__stages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 32px;
  }
}

.pp-page[data-program="shoal"] .pp-band--next,
.pp-page[data-program="leadline"] .pp-band--next,
.pp-page[data-program="tideline"] .pp-band--next,
.pp-page[data-program="mosaic"] .pp-band--next {
  padding-top: 28px;
  padding-bottom: 56px;
}

.pp-page[data-program="shoal"] .pp-band--next .pp-next,
.pp-page[data-program="leadline"] .pp-band--next .pp-next,
.pp-page[data-program="tideline"] .pp-band--next .pp-next,
.pp-page[data-program="mosaic"] .pp-band--next .pp-next {
  padding-top: 0;
}

.pp-page[data-program="shoal"] .pp-band--close .pp-colophon,
.pp-page[data-program="leadline"] .pp-band--close .pp-colophon,
.pp-page[data-program="tideline"] .pp-band--close .pp-colophon,
.pp-page[data-program="mosaic"] .pp-band--close .pp-colophon {
  padding-top: 96px;
}

.pp-rule {
  width: 112px;
  height: 1px;
  background: var(--pp-rule);
  opacity: 0.35;
}

.pp-rule--short {
  width: 48px;
  background: var(--pp-cyan);
  opacity: 0.65;
}

.pp-rule--quiet {
  width: 112px;
  margin: 8px 0;
}

.pp-problem,
.pp-how,
.pp-io,
.pp-core {
  position: relative;
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.pp-problem__aside,
.pp-core__body,
.pp-copy,
.pp-step__body,
.pp-io__item {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.45;
  color: var(--pp-muted);
}

.pp-problem__aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 32rem;
}

.pp-diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.pp-diagram figcaption {
  margin-top: 16px;
  font-family: var(--pp-mono);
  font-size: 14px;
  line-height: 1.4;
  color: var(--pp-cyan);
}

.pp-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
}

.pp-steps {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.pp-step__num {
  font-family: var(--pp-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--pp-cyan);
}

.pp-step__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-step__title,
.pp-core__title {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  line-height: 1.16;
}

.pp-core {
  align-items: start;
}

.pp-core--accent .pp-core__title {
  color: var(--pp-cyan);
}

.pp-core--pair .pp-core__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.pp-clock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 16px 0 8px;
  font-size: clamp(3.5rem, 10vw, 7rem);
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.pp-clock p:last-child {
  color: var(--pp-cyan);
}

.pp-clock p:first-child {
  color: var(--pp-muted);
}

.pp-io {
  margin-top: 72px;
}

.pp-io > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pp-use-copy {
  position: relative;
  max-width: 50rem;
  margin-left: auto;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--pp-paper);
}

.pp-family {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 16px 0 8px;
}

.pp-family__item {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  color: var(--pp-muted);
  padding-left: 0;
}

.pp-family__item.is-current {
  color: var(--pp-cyan);
  box-shadow: inset 0 -1px 0 rgb(165 234 255 / 75%);
}

.pp-family-panel {
  transition: opacity 0.16s ease;
}

.pp-family-panel.is-fading {
  opacity: 0.35;
}

.pp-copy--wide {
  max-width: 66rem;
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
}

.pp-status {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 40px;
  max-width: 62rem;
}

.pp-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 64px;
}

/* Same size as the other pages' "Navigate to …" link (Rick 2026-10-19). */
body.program-page .pp-next__name,
.pp-next__name {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--pp-cyan);
  padding-left: 0;
}

.pp-colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 64px;
  padding-top: 80px;
}

.pp-colophon img {
  width: 240px;
  height: auto;
}

.pp-colophon p {
  font-family: var(--pp-mono);
  font-size: 12px;
  color: var(--pp-muted);
}

@media (min-width: 900px) {
  .pp-identity {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
    align-items: center;
  }

  .pp-identity .pp-kicker,
  .pp-identity .pp-name {
    grid-column: 1;
  }

  .pp-identity .pp-one-liner {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .pp-open__motion {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "thesis clip"
      "meta clip";
    column-gap: 48px;
    row-gap: 32px;
    align-items: start;
  }

  .pp-thesis {
    grid-area: thesis;
  }

  .pp-clip {
    grid-area: auto;
  }

  .pp-open__media {
    grid-area: clip;
    min-width: 0;
  }

  .pp-open__meta {
    grid-area: meta;
  }

  .pp-problem {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
    gap: 88px;
  }

  .pp-how {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr);
    gap: 72px;
    align-items: start;
  }

  .pp-core {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
    gap: 56px;
    align-items: start;
  }

  .pp-core--shift {
    padding-left: 80px;
  }

  .pp-core .pp-core__title {
    font-size: clamp(2.75rem, 5vw, 4.375rem);
    letter-spacing: -0.03em;
  }

  .pp-io {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

@media (min-width: 1024px) and (max-width: 1099px) {
  body.program-page .nav-toggle {
    display: flex;
  }

  body.program-page .site-nav {
    display: none;
  }

  body.program-page .site-nav.is-open {
    display: block;
    position: fixed;
  }
}

@media (min-width: 1100px) {
  html.program-page {
    scroll-padding-top: 112px;
  }

  body.program-page,
  body.program-page .site-header,
  body.program-page .site-header__bar.container,
  body.program-page .page-content {
    --header-height: 88px;
  }

  body.program-page .site-header,
  body.program-page .site-header__bar.container {
    height: 88px;
  }

  body.program-page .page-content {
    padding-top: 88px;
  }

  body.program-page .site-logo__name {
    font-size: 19px;
    letter-spacing: 2.66px;
  }

  body.program-page .nav-toggle {
    display: none;
  }

  body.program-page .site-nav,
  body.program-page .site-nav.is-open {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    position: static;
    background: none;
    padding: 0;
  }

  body.program-page .site-nav__panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
  }

  body.program-page .site-nav__list {
    flex-direction: row;
    justify-content: flex-end;
    gap: 12px;
  }

  body.program-page .site-nav__link,
  body.program-page .site-nav__dropdown-toggle {
    padding: 12px 8px;
  }

  body.program-page .site-nav__dropdown {
    position: relative;
  }

  body.program-page .site-nav__dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 12rem;
    padding: 8px 0;
    background: var(--pp-ink);
    border: 1px solid rgb(165 234 255 / 28%);
  }

  body.program-page .site-nav__dropdown.is-open .site-nav__dropdown-menu {
    display: flex;
    flex-direction: column;
  }

  body.program-page .site-nav__dropdown-icon {
    display: none;
  }
}

@media (min-width: 1440px) {
  .pp-open,
  .pp-band {
    padding-inline: 72px;
  }
}

@media (min-width: 1920px) {
  .pp-open,
  .pp-band {
    padding-inline: max(72px, calc((100vw - 1760px) / 2));
  }

  .pp-name {
    font-size: 7.25rem;
  }
}

@media (max-width: 719px) {
  .pp-open,
  .pp-band,
  .pp-band--use,
  .pp-band--close {
    padding-inline: 24px;
  }

  .pp-open {
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .pp-identity {
    gap: 16px;
    margin-bottom: 24px;
  }

  .pp-name {
    font-size: 4rem;
    line-height: 1.06;
  }

  .pp-one-liner {
    font-size: 1.25rem;
    line-height: 1.45;
    max-width: none;
  }

  .pp-thesis {
    padding-top: 0;
    gap: 0;
  }

  .pp-open__rule {
    display: none;
  }

  .pp-open__meta {
    gap: 16px;
  }

  .pp-tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 0.35em;
  }

  .pp-tags span:not(:last-child)::after {
    content: " /";
  }

  .pp-clip {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    box-sizing: border-box;
  }

  .pp-open__media {
    overflow: hidden;
    max-width: 100%;
  }

  .pp-family {
    flex-direction: column;
    gap: 18px;
  }

  .pp-band--system .pp-family {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }

  .pp-band--system .pp-family__item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .pp-use-copy {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-clip__video {
    display: none;
  }

  .pp-clip__poster {
    opacity: 1 !important;
  }
}

.pp-open__media {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.pp-media-note {
  margin: 0;
  max-width: 46rem;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.45;
  color: var(--pp-muted);
}

.pp-band--how {
  background: var(--pp-navy);
}

.pp-how-intro,
.pp-how-legend,
.pp-scenario-kicker {
  margin-top: 28px;
  max-width: 46rem;
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.45;
  color: var(--pp-muted);
}

.pp-how-legend,
.pp-scenario-kicker {
  margin-top: 36px;
  font-family: var(--pp-mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--pp-cyan);
}

.pp-scenario {
  display: grid;
  gap: 56px 48px;
  margin-top: 40px;
}

.pp-scenario__panel {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.pp-scenario__title,
.pp-how-notes__title,
.pp-consequence {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.pp-consequence {
  margin-top: 56px;
  max-width: 28ch;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
}

.pp-diagram--scene,
.pp-diagram--fused {
  margin: 0;
  min-width: 0;
}

.pp-page[data-program="mosaic"] .pp-display--how {
  margin: 24px 0 0;
}

.pp-page[data-program="mosaic"] .pp-how-intro {
  margin-top: 36px;
}

.pp-page[data-program="mosaic"] .pp-how-legend {
  margin-top: 28px;
}

.pp-page[data-program="mosaic"] .pp-diagram--fused {
  margin-top: 36px;
}

.pp-page[data-program="mosaic"] .pp-map-label {
  gap: 6px;
  max-width: 15rem;
}

.pp-page[data-program="mosaic"] .pp-map-label__kicker {
  margin-bottom: 2px;
}

.pp-map {
  position: relative;
  overflow: visible;
  background: #0b1b24;
}

.pp-map picture {
  display: block;
  width: 100%;
}

.pp-map img {
  display: block;
  width: 100%;
  height: auto;
}

.pp-map__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pp-map-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  max-width: 12.5rem;
  font-size: 12px;
  line-height: 1.3;
  color: var(--pp-muted);
  white-space: nowrap;
}

.pp-map-label--end {
  text-align: right;
  align-items: flex-end;
  transform: translateX(-100%);
}

.pp-map-label--kicker,
.pp-map-label__kicker {
  font-family: var(--pp-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--pp-cyan);
}

.pp-how-notes {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.pp-listed {
  display: grid;
  gap: 0;
  margin-top: 24px;
}

.pp-listed__row {
  display: grid;
  gap: 12px 32px;
  padding: 28px 0;
}

.pp-listed__num {
  font-family: var(--pp-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--pp-cyan);
}

.pp-listed__title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.16;
}

.pp-listed__body {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.45;
  color: var(--pp-muted);
}

.pp-rule--listed {
  width: 100%;
  max-width: none;
  margin: 0;
}

.pp-columns {
  display: grid;
  gap: 32px;
  margin-top: 40px;
}

.pp-page[data-program="tideline"] .pp-band--use,
.pp-page[data-program="mosaic"] .pp-band--use {
  background: var(--pp-ink);
}

.pp-page[data-program="mosaic"] .pp-band--use {
  padding-top: 96px;
  padding-bottom: 56px;
}

.pp-page[data-program="tideline"] .pp-band--use {
  padding-top: 96px;
  padding-bottom: 56px;
}

.pp-page[data-program="shoal"] .pp-band--use,
.pp-page[data-program="leadline"] .pp-band--use {
  padding-bottom: 56px;
}

.pp-page[data-program="tideline"] .pp-band--use .pp-contour,
.pp-page[data-program="mosaic"] .pp-band--use .pp-contour {
  display: none;
}

.pp-page[data-program="shoal"] .pp-display--system,
.pp-page[data-program="leadline"] .pp-display--system,
.pp-page[data-program="tideline"] .pp-display--system,
.pp-page[data-program="mosaic"] .pp-display--system {
  max-width: 18ch;
}

.pp-page[data-program="tideline"] .pp-scenario__panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pp-page[data-program="tideline"] .pp-scenario__panel > .pp-kicker {
  margin-bottom: 24px;
}

.pp-page[data-program="tideline"] .pp-scenario__panel .pp-diagram--scene {
  margin-bottom: 32px;
}

.pp-page[data-program="tideline"] .pp-scenario__result {
  display: grid;
  gap: 12px;
}

.pp-page[data-program="tideline"] .pp-consequence {
  margin-top: 80px;
  max-width: 22ch;
}

.pp-page[data-program="tideline"] .pp-consequence + .pp-copy {
  margin-top: 16px;
}

.pp-page[data-program="shoal"] .pp-band--system,
.pp-page[data-program="leadline"] .pp-band--system,
.pp-page[data-program="tideline"] .pp-band--system,
.pp-page[data-program="mosaic"] .pp-band--system {
  padding-top: 72px;
  padding-bottom: 48px;
}

.pp-page[data-program="shoal"] .pp-band--system > .pp-kicker + .pp-display,
.pp-page[data-program="leadline"] .pp-band--system > .pp-kicker + .pp-display,
.pp-page[data-program="tideline"] .pp-band--system > .pp-kicker + .pp-display,
.pp-page[data-program="mosaic"] .pp-band--system > .pp-kicker + .pp-display {
  margin-top: 40px;
}

.pp-page[data-program="shoal"] .pp-band--system .pp-family,
.pp-page[data-program="leadline"] .pp-band--system .pp-family,
.pp-page[data-program="tideline"] .pp-band--system .pp-family,
.pp-page[data-program="mosaic"] .pp-band--system .pp-family {
  margin-top: 28px;
  margin-bottom: 24px;
}

.pp-page[data-program="shoal"] .pp-band--system .pp-copy--wide,
.pp-page[data-program="leadline"] .pp-band--system .pp-copy--wide,
.pp-page[data-program="tideline"] .pp-band--system .pp-copy--wide,
.pp-page[data-program="mosaic"] .pp-band--system .pp-copy--wide {
  max-width: 52rem;
}

@media (min-width: 900px) {
  .pp-scenario {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pp-listed__row {
    grid-template-columns: 48px minmax(12rem, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    padding: 32px 0;
  }

  .pp-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 64px;
  }
}

@media (max-width: 699px) {
  .pp-map-label {
    font-size: 11px;
    max-width: none;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgb(3 10 15 / 0.85);
  }

  .pp-map-label--kicker,
  .pp-map-label__kicker {
    font-size: 10px;
  }

  .pp-diagram--fused .pp-map-label {
    font-size: 10px;
  }

  .pp-diagram--fused .pp-map-label--kicker,
  .pp-diagram--fused .pp-map-label__kicker {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .pp-page[data-program="tideline"] .pp-scenario .pp-map-label {
    font-size: 11px;
    white-space: normal;
    max-width: 44%;
    line-height: 1.3;
  }

  .pp-page[data-program="tideline"] .pp-scenario .pp-map-label--end {
    max-width: 46%;
  }

  .pp-page[data-program="tideline"] .pp-scenario__panel .pp-map__labels .pp-map-label:last-child {
    left: auto !important;
    right: 2.5%;
    text-align: right;
    align-items: flex-end;
    max-width: min(46%, 10.5rem);
  }

  .pp-page[data-program="tideline"] .pp-scenario__panel:nth-child(2) .pp-map__labels .pp-map-label:nth-child(2) {
    max-width: min(52%, 11rem);
  }

  .pp-page[data-program="tideline"] .pp-map-label__kicker {
    font-size: 9px;
  }

  .pp-page[data-program="dead-reckoning"] .pp-map-label,
  .pp-page[data-program="crosscurrent"] .pp-map-label,
  .pp-page[data-program="copperhead"] .pp-map-label {
    font-size: 11px;
  }

  .pp-reading__title {
    font-size: 14px;
  }

  .pp-reading__body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--pp-paper);
  }

  .pp-how-legend {
    max-width: 22rem;
  }

  .pp-page[data-program="mosaic"] .pp-how-intro {
    margin-top: 28px;
  }

  .pp-page[data-program="mosaic"] .pp-how-legend {
    margin-top: 22px;
  }

  .pp-page[data-program="mosaic"] .pp-diagram--fused {
    margin-top: 28px;
  }
}

.pp-diagram--sequence {
  margin: 32px 0 0;
  min-width: 0;
}

.pp-diagram--sequence .pp-map {
  overflow: hidden;
  background: var(--pp-deep);
}

.pp-diagram--sequence img {
  display: block;
  width: 100%;
  height: auto;
}

.pp-readings {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

.pp-reading {
  min-width: 0;
  padding-top: 13px;
  box-shadow: inset 0 1px 0 var(--pp-rule);
}

.pp-reading__title {
  font-family: var(--pp-mono);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--pp-cyan);
}

.pp-reading__body {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.45;
  color: var(--pp-muted);
}

.pp-page[data-program="crosscurrent"] .pp-how-intro,
.pp-page[data-program="dead-reckoning"] .pp-how-intro,
.pp-page[data-program="copperhead"] .pp-how-intro {
  margin-top: 32px;
  max-width: 58.75rem;
}

.pp-page[data-program="crosscurrent"] .pp-consequence,
.pp-page[data-program="dead-reckoning"] .pp-consequence,
.pp-page[data-program="copperhead"] .pp-consequence {
  max-width: none;
  margin-top: 32px;
}

.pp-page[data-program="crosscurrent"] .pp-consequence + .pp-copy,
.pp-page[data-program="dead-reckoning"] .pp-consequence + .pp-copy,
.pp-page[data-program="copperhead"] .pp-consequence + .pp-copy {
  margin-top: 16px;
  max-width: 62.5rem;
}

.pp-page[data-program="crosscurrent"] .pp-scenario-kicker,
.pp-page[data-program="dead-reckoning"] .pp-scenario-kicker,
.pp-page[data-program="copperhead"] .pp-scenario-kicker {
  margin-top: 32px;
  color: var(--pp-muted);
}

.pp-family-groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin: 28px 0 0;
}

.pp-family-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pp-family-group__label {
  font-family: var(--pp-mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.65px;
  color: var(--pp-muted);
}

.pp-family--grouped {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
}

.pp-family--grouped .pp-family__item {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: 12px 0;
  font-family: var(--pp-mono);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.65px;
  color: var(--pp-muted);
  box-shadow: inset 0 -1px 0 var(--pp-rule);
  white-space: nowrap;
}

.pp-family--grouped .pp-family__item.is-current {
  color: var(--pp-cyan);
  box-shadow: inset 0 -1px 0 var(--pp-cyan);
}

.pp-family--grouped .pp-family__item:hover {
  color: var(--pp-paper);
}

.pp-family-panel-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.pp-family-title {
  font-size: clamp(1.75rem, 3vw, 2rem);
  line-height: 1.45;
  color: var(--pp-paper);
  transition: opacity 0.16s ease;
}

.pp-family-title.is-fading {
  opacity: 0.35;
}

.pp-page[data-program="crosscurrent"] .pp-family-panel,
.pp-page[data-program="dead-reckoning"] .pp-family-panel,
.pp-page[data-program="copperhead"] .pp-family-panel {
  max-width: none;
  font-size: clamp(1.125rem, 1.8vw, 1.25rem);
}

.pp-page[data-program="crosscurrent"] .pp-next__name,
.pp-page[data-program="dead-reckoning"] .pp-next__name,
.pp-page[data-program="copperhead"] .pp-next__name {
  max-width: 18ch;
  align-items: flex-start;
  white-space: normal;
}

@media (min-width: 900px) {
  .pp-readings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 24px;
  }
}

@media (max-width: 699px) {
  .pp-page[data-program="crosscurrent"] .pp-band--system .pp-family--grouped,
  .pp-page[data-program="dead-reckoning"] .pp-band--system .pp-family--grouped,
  .pp-page[data-program="copperhead"] .pp-band--system .pp-family--grouped {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    overflow: visible;
    flex-wrap: unset;
  }

  .pp-family--grouped .pp-family__item {
    font-size: 11px;
    white-space: normal;
  }

  .pp-page[data-program="crosscurrent"] .pp-next__name,
  .pp-page[data-program="dead-reckoning"] .pp-next__name,
  .pp-page[data-program="copperhead"] .pp-next__name {
    max-width: none;
  }
}

.pp-page[data-program="crosscurrent"] .pp-name,
.pp-page[data-program="dead-reckoning"] .pp-name,
.pp-page[data-program="copperhead"] .pp-name {
  min-width: 0;
}

@media (min-width: 900px) {
  .pp-page[data-program="crosscurrent"] .pp-identity {
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.7fr);
  }

  .pp-page[data-program="crosscurrent"] .pp-name {
    font-size: clamp(3.75rem, 6.6vw, 5.5rem);
  }
}

@media (min-width: 1920px) {
  .pp-page[data-program="crosscurrent"] .pp-name,
  .pp-page[data-program="dead-reckoning"] .pp-name,
  .pp-page[data-program="copperhead"] .pp-name {
    font-size: clamp(4.25rem, 5.2vw, 6.25rem);
  }
}

@media (max-width: 719px) {
  .pp-page[data-program="crosscurrent"] .pp-name,
  .pp-page[data-program="copperhead"] .pp-name {
    font-size: clamp(2.35rem, 8.1vw, 2.85rem);
    overflow-wrap: anywhere;
  }

  .pp-page[data-program="dead-reckoning"] .pp-name {
    font-size: clamp(2.6rem, 9vw, 3.25rem);
  }
}

.pp-page[data-program="crosscurrent"] .pp-band--system {
  padding-top: 72px;
  padding-bottom: 28px;
}

.pp-page[data-program="crosscurrent"] .pp-band--system .pp-display--system {
  margin-bottom: 8px;
}

.pp-page[data-program="crosscurrent"] .pp-band--system .pp-family-groups {
  margin-top: 20px;
  margin-bottom: 0;
}

.pp-page[data-program="crosscurrent"] .pp-band--system .pp-family-panel-block {
  margin-top: 16px;
  gap: 8px;
}

.pp-page[data-program="crosscurrent"] .pp-band--next {
  padding-top: 16px;
  padding-bottom: 56px;
}

.pp-page[data-program="crosscurrent"] .pp-band--next .pp-next {
  padding-top: 0;
  gap: 12px;
}

.pp-page[data-program="crosscurrent"] .pp-next__name {
  max-width: none;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: normal;
  min-height: 0;
  padding: 4px 0;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.pp-page[data-program="crosscurrent"] .pp-band--next .pp-text-link {
  min-height: 0;
  padding: 4px 0;
}

.pp-page[data-program="copperhead"] .pp-band--system {
  padding-bottom: 28px;
}

.pp-page[data-program="copperhead"] .pp-band--next {
  padding-top: 16px;
  padding-bottom: 56px;
}

.pp-page[data-program="copperhead"] .pp-band--next .pp-next {
  padding-top: 0;
  gap: 12px;
}

.pp-page[data-program="copperhead"] .pp-next__name {
  max-width: none;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: normal;
  min-height: 0;
  padding: 4px 0;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.pp-page[data-program="copperhead"] .pp-band--next .pp-text-link {
  min-height: 0;
  padding: 4px 0;
}

.pp-page[data-program="dead-reckoning"] .pp-band--system {
  padding-bottom: 28px;
}

.pp-page[data-program="dead-reckoning"] .pp-band--next {
  padding-top: 16px;
  padding-bottom: 56px;
}

.pp-page[data-program="dead-reckoning"] .pp-band--next .pp-next {
  padding-top: 0;
  gap: 12px;
}

.pp-page[data-program="dead-reckoning"] .pp-next__name {
  max-width: none;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: normal;
  min-height: 0;
  padding: 4px 0;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.pp-page[data-program="dead-reckoning"] .pp-band--next .pp-text-link {
  min-height: 0;
  padding: 4px 0;
}