/*
  Ponk Ventures home page.

  The page is eight chapters and no two share a composition: a full-bleed
  cinematic hero, a typographic statement, an interactive index of where
  Ponk invests, an image-led philosophy, a single-sentence process, a
  split-screen research chapter, an asymmetric about and a full-bleed close.
  Hierarchy comes from scale, image and placement, never from a label above
  a heading.

  Colour stays the Ponk set from tokens.css. Pink appears as action,
  selection, and a few deliberate accents. Motion is load and intersection
  driven, plays once, uses only transform and opacity, and is switched off
  under prefers-reduced-motion.
*/

:root {
  --ch-pad: clamp(88px, 12vw, 168px);
  --ch-display: clamp(52px, 8.2vw, 132px);
  --ch-statement: clamp(34px, 5.6vw, 84px);
  --ch-title: clamp(36px, 5vw, 72px);
  --ch-slow: 900ms;
  --ch-scrim: rgba(10, 9, 13, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ch-slow: 0.01ms;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.home picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Scroll reveal: an element fades and rises 16px once, the first time it
   enters the viewport. Gated on .js so the page reads without script. */
.js [data-io] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--ch-slow) var(--pv-ease),
    transform var(--ch-slow) var(--pv-ease);
}

.js [data-io].is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------- header */

.home .site-header {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
  border-bottom-color: transparent;
  transition:
    background-color var(--pv-travel) var(--pv-ease),
    border-color var(--pv-travel) var(--pv-ease);
}

.home .site-header.is-solid,
.home .site-header:has(.site-nav.is-open) {
  background: var(--pv-page);
  border-bottom-color: var(--pv-line-soft);
}

.btn--on-image {
  border-color: rgba(243, 240, 244, 0.42);
}

.btn--on-image:hover {
  border-color: var(--pv-fg);
}

.btn--large {
  min-height: 56px;
  padding-inline: var(--pv-s8);
  font-size: 15px;
}

/* --------------------------------------------------------------- hero */

.ch-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.ch-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ch-hero__media .media {
  object-position: 62% 50%;
}

/* A legibility scrim, not decoration: the bottom of the photograph is
   darkened so the headline holds its contrast on any crop. */
.ch-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 13, 0.55) 0%, rgba(10, 9, 13, 0.08) 34%, rgba(10, 9, 13, 0.35) 62%, var(--pv-page) 100%);
}

.js .ch-hero__media .media {
  transform: scale(1.08);
  transition:
    opacity 1400ms var(--pv-ease),
    transform 2400ms var(--pv-ease);
}

.js .ch-hero__media .media.is-loaded {
  transform: none;
}

.ch-hero__inner {
  width: 100%;
  max-width: var(--pv-content);
  margin-inline: auto;
  padding: 120px var(--pv-gutter) var(--pv-s12);
  display: grid;
  gap: var(--pv-s8);
}

.ch-hero__title {
  font-size: var(--ch-display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.ch-hero__title .line {
  display: block;
  overflow: hidden;
  /* Room for descenders (the g in "Managed"): the mask clips at the padding
     box, and 0.06em cut the tail off at this line height. The negative
     margin keeps the lines at the same visual spacing. */
  padding-bottom: 0.18em;
  margin-bottom: -0.12em;
}

.ch-hero__title .line > span {
  display: inline-block;
}

.js .ch-hero__title .line > span {
  transform: translateY(105%);
  transition: transform 1100ms var(--pv-ease);
}

.js .is-ready .ch-hero__title .line > span {
  transform: none;
}

.js .is-ready .ch-hero__title .line:nth-child(2) > span {
  transition-delay: 90ms;
}

.js .is-ready .ch-hero__title .line:nth-child(3) > span {
  transition-delay: 180ms;
}

.js .is-ready .ch-hero__title .line:nth-child(4) > span {
  transition-delay: 270ms;
}

.ch-hero__title .line--accent > span {
  color: var(--pv-accent);
}

.ch-hero__lead {
  font-size: var(--pv-text-lead);
  line-height: var(--pv-leading-body);
  color: var(--pv-fg);
  max-width: 44ch;
}

.ch-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pv-s3);
  margin-top: var(--pv-s6);
}

.js .ch-hero__aside {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 900ms var(--pv-ease) 420ms,
    transform 900ms var(--pv-ease) 420ms;
}

.js .is-ready .ch-hero__aside {
  opacity: 1;
  transform: none;
}

.ch-hero__strip {
  width: 100%;
  max-width: var(--pv-content);
  margin-inline: auto;
  padding: var(--pv-s4) var(--pv-gutter) var(--pv-s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pv-s2) var(--pv-s6);
  border-top: 1px solid rgba(243, 240, 244, 0.14);
  font-size: var(--pv-text-meta);
  font-weight: 700;
  letter-spacing: var(--pv-tracking-caps);
  text-transform: uppercase;
  color: var(--pv-fg-2);
}

@media (max-width: 719px) {
  .ch-hero__actions .btn {
    width: 100%;
  }
}

@media (min-width: 960px) {
  .ch-hero__inner {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: end;
    gap: var(--pv-s12);
    padding-bottom: var(--pv-s16);
  }

  .ch-hero__aside {
    padding-bottom: 0.9em;
  }

  .ch-hero__strip {
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------- statement */

.ch-statement {
  padding-block: var(--ch-pad);
}

.ch-statement__title {
  font-size: var(--ch-statement);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 17ch;
  text-wrap: balance;
}

.ch-statement__title em {
  font-style: normal;
  color: var(--pv-accent);
}

.ch-statement__body {
  margin-top: var(--pv-s12);
  display: grid;
  gap: var(--pv-s4);
  max-width: 46ch;
  color: var(--pv-fg-2);
  font-size: var(--pv-text-lead);
}

.ch-statement__body p:first-child {
  color: var(--pv-fg);
}

@media (min-width: 960px) {
  .ch-statement__body {
    margin-left: auto;
    margin-right: 6%;
    margin-top: var(--pv-s16);
    padding-top: var(--pv-s6);
    border-top: 1px solid var(--pv-accent);
  }
}

/* -------------------------------------------------- investments index */

.ch-index {
  padding-block: var(--ch-pad);
  border-top: 1px solid var(--pv-line-soft);
}

.ch-index__grid {
  display: grid;
  gap: var(--pv-s8);
}

.ch-index__title {
  font-size: var(--ch-title);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 13ch;
}

.ch-index__note {
  margin-top: var(--pv-s4);
  color: var(--pv-fg-2);
  font-size: var(--pv-text-lead);
  max-width: 36ch;
}

.ch-index__stage {
  display: none;
}

.index {
  border-top: 1px solid var(--pv-line);
}

.index__row {
  border-bottom: 1px solid var(--pv-line-soft);
}

.index__trigger {
  display: grid;
  width: 100%;
  gap: var(--pv-s2);
  padding: var(--pv-s6) 0;
  text-align: left;
  color: inherit;
  cursor: default;
}

.index__name {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  transition: color var(--pv-fast) var(--pv-ease);
}

.index__text {
  color: var(--pv-fg-2);
  font-size: var(--pv-text-body);
  max-width: 44ch;
}

.index__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: var(--pv-s6);
  border: 1px solid var(--pv-line-soft);
}

.index__thumb .media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 960px) {
  .ch-index__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--pv-s16);
    row-gap: var(--pv-s12);
  }

  .ch-index__head {
    grid-column: 1;
    grid-row: 1;
  }

  .index {
    grid-column: 1;
    grid-row: 2;
  }

  .ch-index__stage {
    display: block;
    grid-column: 2;
    grid-row: 1 / 3;
    position: sticky;
    top: 96px;
    align-self: start;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--pv-line-soft);
    background: var(--pv-surface);
  }

  .stage__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.04);
    transition:
      opacity 600ms var(--pv-ease),
      transform 1200ms var(--pv-ease);
  }

  .stage__frame.is-active {
    opacity: 1;
    transform: none;
  }

  .stage__frame .media {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .index__thumb {
    display: none;
  }

  .index__trigger {
    cursor: pointer;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--pv-s8);
    padding: var(--pv-s6) 0;
  }

  .index__name {
    color: var(--pv-fg-3);
  }

  .index__text {
    opacity: 0.55;
    transition: opacity var(--pv-fast) var(--pv-ease);
  }

  .index__row.is-active .index__name {
    color: var(--pv-fg);
  }

  .index__row.is-active .index__text {
    opacity: 1;
  }

  .index__row.is-active {
    border-bottom-color: var(--pv-accent);
  }
}

/* ---------------------------------------------------------- philosophy */

.ch-philosophy {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--ch-pad);
}

.ch-philosophy__media {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(520px, 92vh, 980px);
  z-index: -1;
  overflow: hidden;
}

.ch-philosophy__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--pv-page) 0%, rgba(10, 9, 13, 0) 22%, rgba(10, 9, 13, 0) 55%, var(--pv-page) 100%);
}

.ch-philosophy__inner {
  min-height: clamp(520px, 92vh, 980px);
  display: flex;
  align-items: center;
}

.ch-philosophy__title {
  font-size: var(--ch-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.tenets {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--pv-line);
}

.tenet {
  padding: var(--pv-s6) 0;
  border-bottom: 1px solid var(--pv-line-soft);
}

.tenet dt {
  font-size: var(--pv-text-h3);
  font-weight: 700;
  margin-bottom: var(--pv-s2);
}

.tenet dd {
  color: var(--pv-fg-2);
  max-width: 34ch;
}

@media (min-width: 720px) {
  .tenets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--pv-s8);
  }
}

@media (min-width: 1100px) {
  .tenets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 0;
  }

  .tenet {
    border-bottom: 0;
    border-top: 1px solid var(--pv-line);
    padding-top: var(--pv-s6);
  }

  .tenet:nth-child(2) {
    transition-delay: 80ms;
  }

  .tenet:nth-child(3) {
    transition-delay: 160ms;
  }

  .tenet:nth-child(4) {
    transition-delay: 240ms;
  }
}

/* ------------------------------------------------------------ process */

.ch-process {
  padding-block: var(--ch-pad);
  background: var(--pv-surface);
  border-block: 1px solid var(--pv-line-soft);
}

.ch-process__sentence {
  max-width: none;
  font-size: clamp(38px, 7.2vw, 112px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--pv-line);
}

.ch-process__sentence span {
  transition: color 600ms var(--pv-ease);
}

/* Each word lights in turn when the sentence first enters view; the last
   word, Manage, stays pink because managing never stops. */
.ch-process__sentence.is-in span {
  color: var(--pv-fg);
}

.ch-process__sentence.is-in span:nth-child(2) {
  transition-delay: 160ms;
}

.ch-process__sentence.is-in span:nth-child(3) {
  transition-delay: 320ms;
}

.ch-process__sentence.is-in span:nth-child(4) {
  transition-delay: 480ms;
}

.ch-process__sentence.is-in span:nth-child(5) {
  transition-delay: 640ms;
  color: var(--pv-accent);
}

.sequence {
  margin-top: var(--pv-s16);
  display: grid;
  gap: 0;
  counter-reset: none;
}

.sequence__step {
  position: relative;
  padding: 0 0 var(--pv-s8) var(--pv-s8);
  border-left: 1px solid var(--pv-line);
}

.sequence__step::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 4px;
  width: 7px;
  height: 7px;
  background: var(--pv-page);
  border: 1px solid var(--pv-fg-3);
}

.sequence__step:last-child::before {
  background: var(--pv-accent);
  border-color: var(--pv-accent);
}

.sequence__name {
  display: block;
  font-size: var(--pv-text-body);
  font-weight: 700;
  margin-bottom: var(--pv-s2);
}

.sequence__step p {
  color: var(--pv-fg-2);
  font-size: var(--pv-text-small);
  line-height: 1.55;
}

@media (min-width: 960px) {
  .sequence {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--pv-s6);
    border-top: 1px solid var(--pv-line);
  }

  .sequence__step {
    padding: var(--pv-s6) 0 0;
    border-left: 0;
  }

  .sequence__step::before {
    left: 0;
    top: -4px;
  }
}

/* ----------------------------------------------------------- research */

.ch-research {
  display: grid;
  border-bottom: 1px solid var(--pv-line-soft);
}

.ch-research__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ch-research__media .media {
  transition:
    opacity var(--pv-travel) var(--pv-ease),
    transform 1600ms var(--pv-ease);
}

.ch-research:hover .ch-research__media .media.is-loaded {
  transform: scale(1.03);
}

.ch-research__body {
  padding: var(--pv-s16) var(--pv-gutter);
}

.ch-research__title {
  font-size: var(--ch-title);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 10ch;
}

.ch-research__lead {
  margin-top: var(--pv-s6);
  color: var(--pv-fg-2);
  font-size: var(--pv-text-lead);
  max-width: 40ch;
}

.topics {
  margin-top: var(--pv-s8);
  border-top: 1px solid var(--pv-line);
}

.topics li {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--pv-line-soft);
  font-size: var(--pv-text-lead);
  font-weight: 700;
}

.ch-research .note {
  margin-top: var(--pv-s8);
}

.ch-research .note__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-s3);
  min-height: var(--pv-control-lg);
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--pv-accent);
}

.ch-research .note__summary::-webkit-details-marker {
  display: none;
}

.ch-research .note__summary::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform var(--pv-fast) var(--pv-ease);
  transform-origin: left;
}

.ch-research .note__summary:hover::after {
  transform: scaleX(1.5);
}

.ch-research .note__body {
  margin-top: var(--pv-s4);
  padding-top: var(--pv-s4);
  border-top: 1px solid var(--pv-line-soft);
  color: var(--pv-fg-2);
}

@media (min-width: 960px) {
  .ch-research {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 92vh;
  }

  .ch-research__media {
    aspect-ratio: auto;
  }

  .ch-research__body {
    align-self: center;
    padding: var(--pv-s24) max(var(--pv-gutter), calc((100vw - var(--pv-content)) / 2 + var(--pv-gutter))) var(--pv-s24) var(--pv-s16);
  }
}

/* -------------------------------------------------------------- about */

.ch-about {
  padding-block: var(--ch-pad);
}

.ch-about__grid {
  display: grid;
  gap: var(--pv-s8);
}

.ch-about__title {
  font-size: var(--ch-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.ch-about__media {
  aspect-ratio: 3 / 4;
  max-width: 420px;
  overflow: hidden;
  border: 1px solid var(--pv-line-soft);
}

.ch-about__text {
  font-size: var(--pv-text-lead);
  color: var(--pv-fg);
  max-width: 38ch;
}

.ch-about__kin {
  color: var(--pv-fg-3);
  font-size: var(--pv-text-small);
}

.ch-about__kin a {
  color: var(--pv-accent);
}

@media (min-width: 960px) {
  .ch-about__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: var(--pv-gutter);
    row-gap: var(--pv-s8);
  }

  .ch-about__title {
    grid-column: 1 / 9;
    grid-row: 1;
    position: relative;
    z-index: 1;
  }

  .ch-about__media {
    grid-column: 8 / 12;
    grid-row: 1 / 4;
    max-width: none;
    margin-top: var(--pv-s24);
  }

  .ch-about__text {
    grid-column: 3 / 7;
    grid-row: 2;
    margin-top: var(--pv-s8);
  }

  .ch-about__kin {
    grid-column: 3 / 7;
    grid-row: 3;
  }
}

/* -------------------------------------------------------------- close */

.ch-close {
  position: relative;
  isolation: isolate;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.ch-close__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ch-close__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--pv-page) 0%, rgba(10, 9, 13, 0.25) 30%, var(--ch-scrim) 70%, var(--pv-page) 100%);
}

.ch-close__inner {
  padding-block: var(--pv-s24) var(--pv-s16);
  display: grid;
  gap: var(--pv-s6);
}

.ch-close__title {
  font-size: var(--ch-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.ch-close__text {
  font-size: var(--pv-text-lead);
  max-width: 40ch;
  color: var(--pv-fg);
}

@media (max-width: 719px) {
  .ch-close .btn--large {
    width: 100%;
  }
}

@media (max-width: 959px) {
  .ch-philosophy__media,
  .ch-philosophy__inner {
    height: auto;
    min-height: 0;
  }

  .ch-philosophy__media {
    height: 78vw;
    min-height: 360px;
  }

  .ch-philosophy__inner {
    min-height: max(78vw, 360px);
    align-items: flex-end;
    padding-bottom: var(--pv-s8);
  }

  .ch-philosophy__media .media {
    object-position: 70% 50%;
  }
}

/* The close: on wide screens the doorway sits in the right of the frame and
   the words stand in the dark to its left, so the two never collide. */
@media (min-width: 960px) {
  .ch-close__media {
    inset: 0 0 0 34%;
  }

  .ch-close__media::after {
    background:
      linear-gradient(90deg, var(--pv-page) 0%, rgba(10, 9, 13, 0) 38%),
      linear-gradient(180deg, var(--pv-page) 0%, rgba(10, 9, 13, 0) 24%, rgba(10, 9, 13, 0) 70%, var(--pv-page) 100%);
  }

  .ch-close__inner {
    align-self: center;
    padding-block: var(--pv-s24);
  }

  .ch-close__text {
    max-width: 34ch;
  }
}

@media (max-width: 959px) {
  .ch-close {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .ch-close__media {
    position: relative;
    inset: auto;
    height: 68vw;
    min-height: 300px;
  }

  .ch-close__media::after {
    background: linear-gradient(180deg, var(--pv-page) 0%, rgba(10, 9, 13, 0) 30%, rgba(10, 9, 13, 0) 60%, var(--pv-page) 100%);
  }

  .ch-close__inner {
    padding-block: var(--pv-s6) var(--pv-s16);
  }
}

@media (min-width: 720px) and (max-width: 959px) {
  .index__thumb {
    aspect-ratio: 21 / 9;
  }
}

/* ------------------------------------------------------- hero video */

.ch-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--pv-page) url("/media/hero-poster.jpg") center / cover no-repeat;
}

.js .ch-hero__video {
  transform: scale(1.06);
  transition: transform 2600ms var(--pv-ease);
}

.js .is-ready .ch-hero__video {
  transform: none;
}

.ch-hero__pause {
  position: absolute;
  right: max(var(--pv-gutter), calc((100vw - var(--pv-content)) / 2 + var(--pv-gutter)));
  top: calc(var(--pv-header) + var(--pv-s6));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--pv-s2);
  min-height: var(--pv-control-lg);
  font-size: var(--pv-text-meta);
  font-weight: 700;
  letter-spacing: var(--pv-tracking-caps);
  text-transform: uppercase;
  color: var(--pv-fg-2);
  cursor: pointer;
  transition: color var(--pv-hover) var(--pv-ease);
}

.ch-hero__pause:hover {
  color: var(--pv-fg);
}

.ch-hero__pause-icon {
  position: relative;
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.ch-hero__pause[aria-pressed="true"] .ch-hero__pause-icon {
  width: 0;
  height: 0;
  border-right: 0;
  border-left: 9px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* --------------------------------------------- smoother index hovers */

@media (min-width: 960px) {
  .index__name {
    transition:
      color 360ms var(--pv-ease),
      transform 480ms var(--pv-ease);
  }

  .index__row.is-active .index__name {
    transform: translateX(10px);
  }

  .index__text {
    transition: opacity 360ms var(--pv-ease);
  }

  .stage__frame {
    transition:
      opacity 700ms var(--pv-ease),
      transform 1600ms var(--pv-ease);
  }
}

.topics li {
  transition:
    color var(--pv-hover) var(--pv-ease),
    padding-left 0s;
}

/* ===================================================================
   Consolidation pass: three videos, no stills.
   =================================================================== */

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms var(--pv-ease);
}

.bg-video.is-playing,
.bg-video[poster] {
  opacity: 1;
}

.ch-philosophy__media,
.ch-close__media {
  overflow: hidden;
}

/* Investments: type only. The active row grows a pink rule and its line
   brightens; nothing else changes, so the list reads as a ledger. */
@media (min-width: 960px) {
  .ch-index__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto;
  }

  .ch-index__head {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 120px;
    align-self: start;
  }

  .index {
    grid-column: 2;
    grid-row: 1;
  }

  .index__name {
    font-size: clamp(32px, 3.6vw, 52px);
  }
}

@media (max-width: 959px) {
  .index__trigger {
    padding: var(--pv-s6) 0;
  }
}

/* Research and About share one chapter. */
.ch-pair {
  padding-block: var(--ch-pad);
  border-top: 1px solid var(--pv-line-soft);
}

.ch-pair__grid {
  display: grid;
  gap: var(--pv-s16);
}

.ch-pair__title {
  font-size: var(--ch-title);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 11ch;
}

.ch-pair__title--big {
  font-size: var(--ch-display);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.ch-pair__lead {
  margin-top: var(--pv-s6);
  color: var(--pv-fg-2);
  font-size: var(--pv-text-lead);
  max-width: 40ch;
}

.ch-pair__kin {
  margin-top: var(--pv-s6);
  color: var(--pv-fg-3);
  font-size: var(--pv-text-small);
}

.ch-pair__kin a {
  color: var(--pv-accent);
}

.ch-pair .topics {
  margin-top: var(--pv-s8);
  border-top: 1px solid var(--pv-line);
}

.ch-pair .topics li {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--pv-line-soft);
  font-size: var(--pv-text-lead);
  font-weight: 700;
}

.ch-pair .note {
  margin-top: var(--pv-s8);
}

.ch-pair .note__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-s3);
  min-height: var(--pv-control-lg);
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--pv-accent);
}

.ch-pair .note__summary::-webkit-details-marker {
  display: none;
}

.ch-pair .note__summary::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--pv-panel) var(--pv-ease);
}

.ch-pair .note__summary:hover::after {
  transform: scaleX(1.6);
}

.ch-pair .note__body {
  margin-top: var(--pv-s4);
  padding-top: var(--pv-s4);
  border-top: 1px solid var(--pv-line-soft);
  color: var(--pv-fg-2);
}

@media (min-width: 960px) {
  .ch-pair__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--pv-s16);
    align-items: start;
  }

  .ch-pair__col--about {
    padding-left: var(--pv-s16);
    border-left: 1px solid var(--pv-line);
    padding-top: var(--pv-s12);
  }
}

@media (max-width: 959px) {
  .ch-pair__col--about {
    padding-top: var(--pv-s12);
    border-top: 1px solid var(--pv-line);
  }
}

.ch-pair__title--big {
  font-size: clamp(52px, 5.6vw, 92px);
}

/* ===================================================================
   Framed hero. The video is a framed object rather than a backdrop:
   it starts below a solid header, sits on the page margin at the left
   and runs off the right edge. The headline is set inside the frame,
   and a solid Ponk pink block overlaps the frame's bottom edge and
   carries the lead line and both actions.
   =================================================================== */

.home .site-header {
  background: var(--pv-page);
  border-bottom-color: var(--pv-line-soft);
}

.ch-hero--framed {
  display: block;
  min-height: 0;
  overflow: visible;
  padding-top: var(--pv-header);
  isolation: auto;
}

.ch-hero__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-left: clamp(0px, 3.2vw, 56px);
  height: clamp(460px, 68vh, 760px);
  background: var(--pv-surface);
}

.ch-hero--framed .ch-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* A light left-to-right shade so white type holds on the brightest
   frames; the right of the picture stays clean. */
.ch-hero--framed .ch-hero__media::after {
  background: linear-gradient(90deg, rgba(10, 9, 13, 0.62) 0%, rgba(10, 9, 13, 0.18) 48%, rgba(10, 9, 13, 0) 72%);
}

.ch-hero--framed .ch-hero__video {
  filter: brightness(1.32) contrast(1.08);
}

.ch-hero--framed .ch-hero__title {
  position: absolute;
  left: clamp(20px, 7vw, 160px);
  top: clamp(56px, 11vh, 140px);
  right: var(--pv-gutter);
  font-size: clamp(48px, 6.6vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--pv-fg);
}

.ch-hero--framed .ch-hero__title .line:nth-child(3) > span {
  color: var(--pv-accent);
}

.ch-hero--framed .ch-hero__pause {
  top: var(--pv-s6);
  right: var(--pv-s6);
  width: 44px;
  height: 44px;
  justify-content: center;
  color: var(--pv-fg);
}

.ch-hero--framed .ch-hero__pause-icon {
  width: 12px;
  height: 14px;
  border-left-width: 3px;
  border-right-width: 3px;
}

.ch-hero__block {
  position: relative;
  z-index: 2;
  margin: -140px 0 0 clamp(0px, 3.2vw, 56px);
  width: min(100%, 1180px);
  padding: clamp(32px, 4vw, 64px) clamp(20px, 7vw, 160px) clamp(32px, 4vw, 56px);
  background: var(--pv-accent);
  color: var(--pv-fg-on-accent);
}

.js .ch-hero__block {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 900ms var(--pv-ease) 360ms,
    transform 900ms var(--pv-ease) 360ms;
}

.js .is-ready .ch-hero__block {
  opacity: 1;
  transform: none;
}

.ch-hero--framed .ch-hero__lead {
  color: var(--pv-fg-on-accent);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  max-width: 46ch;
}

.ch-hero--framed .ch-hero__actions {
  margin-top: var(--pv-s8);
}

.btn--ink {
  background: var(--pv-page);
  border-color: var(--pv-page);
  color: var(--pv-fg);
}

.btn--ink:hover {
  background: var(--pv-surface);
  border-color: var(--pv-surface);
  color: var(--pv-fg);
}

.btn--ink-outline {
  background: transparent;
  border-color: rgba(10, 9, 13, 0.55);
  color: var(--pv-fg-on-accent);
}

.btn--ink-outline:hover {
  border-color: var(--pv-page);
  color: var(--pv-fg-on-accent);
}

.btn--ink:focus-visible,
.btn--ink-outline:focus-visible {
  outline-color: var(--pv-page);
}

/* Pink on the light and pink grounds is about 1:1, so focus rings there are
   drawn in ink. */
.ch-statement :focus-visible,
.ch-hero__block :focus-visible {
  outline-color: var(--pv-page);
}

/* The investment rows are links to each area's page. They keep the ledger
   look: no underline and no link colour on hover. */
a.index__trigger,
a.index__trigger:hover {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 959px) {
  .ch-hero__frame {
    margin-left: 0;
    height: min(118vw, 560px);
  }

  .ch-hero--framed .ch-hero__media::after {
    background: linear-gradient(180deg, rgba(10, 9, 13, 0.55) 0%, rgba(10, 9, 13, 0.1) 60%);
  }

  .ch-hero--framed .ch-hero__title {
    left: var(--pv-gutter);
    top: var(--pv-s12);
    font-size: clamp(44px, 12vw, 72px);
  }

  .ch-hero__block {
    margin: -56px var(--pv-gutter) 0;
    width: auto;
    padding: var(--pv-s8) var(--pv-s6);
  }
}

@media (max-width: 719px) {
  .ch-hero--framed .ch-hero__actions .btn {
    width: 100%;
  }
}

/* The opening statement becomes a light band: the first break in the
   dark page, so the page reads as chapters rather than one long field. */
.ch-statement {
  background: var(--pv-fg);
  color: var(--pv-page);
  margin-top: var(--pv-s16);
}

.ch-statement__title {
  color: var(--pv-page);
}

.ch-statement__title em {
  color: var(--pv-page);
  background-image: linear-gradient(var(--pv-accent), var(--pv-accent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.14em;
}

.ch-statement__body,
.ch-statement__body p:first-child {
  color: #3a3245;
}

.ch-statement__body p:first-child {
  color: var(--pv-page);
}

@media (min-width: 960px) {
  .ch-statement__body {
    border-top-color: var(--pv-page);
  }
}

/* Still photographs in a framed hero keep their own exposure (the video
   brightening is for night footage only) and get a deeper left shade so
   the headline holds on the white paper. */
.ch-hero--framed img.ch-hero__video {
  filter: none;
  object-position: 60% 55%;
}

.ch-hero--framed .ch-hero__media:has(img)::after {
  background: linear-gradient(90deg, rgba(10, 9, 13, 0.86) 0%, rgba(10, 9, 13, 0.55) 45%, rgba(10, 9, 13, 0.1) 75%);
}