/*
  Section pages (/approach, /investments, /research, /about). Built on the
  framed hero from home.css; below it, a pull statement and rows whose
  title and body swap sides as they go down the page.
*/

.ch-hero--sub .ch-hero__frame {
  height: clamp(420px, 60vh, 640px);
}

.ch-hero--sub .ch-hero__title {
  font-size: clamp(44px, 6vw, 100px);
}

.sub-pull {
  padding-block: var(--pv-s24) var(--pv-s16);
}

.sub-pull__grid {
  display: grid;
  gap: var(--pv-s4);
}

.sub-pull__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--pv-accent);
}

.sub-pull__text {
  max-width: 30ch;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--pv-fg);
}

@media (min-width: 960px) {
  .sub-pull__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--pv-s8);
  }

  .sub-pull__text {
    padding-left: var(--pv-s8);
    border-left: 1px solid var(--pv-line);
  }
}

.sub-rows {
  padding-block: var(--pv-s8) var(--pv-s16);
}

.sub-row {
  display: grid;
  gap: var(--pv-s4);
  padding-block: var(--pv-s12);
  border-top: 1px solid var(--pv-line-soft);
  scroll-margin-top: calc(var(--pv-header) + var(--pv-s6));
}

.sub-row__title {
  font-size: clamp(30px, 3.6vw, 56px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.sub-row__body {
  display: grid;
  gap: var(--pv-s3);
  max-width: 46ch;
  font-size: var(--pv-text-lead);
  color: var(--pv-fg-2);
}

.sub-row__body p:first-child {
  color: var(--pv-fg);
}

.sub-row__body a {
  color: var(--pv-accent);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 420ms var(--pv-ease);
}

.sub-row__body a:hover {
  background-size: 0% 1px;
  text-decoration: none;
}

.sub-row:target .sub-row__title {
  color: var(--pv-accent);
}

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

  .sub-row.is-right .sub-row__title {
    order: 2;
  }

  .sub-row.is-right .sub-row__body {
    order: 1;
    justify-self: end;
  }
}

/* The process rows read as a numbered sequence by position alone. */
.sub-rows--process {
  background: var(--pv-surface);
  border-block: 1px solid var(--pv-line-soft);
  padding-block: var(--pv-s16);
}

.sub-rows--process .sub-row {
  padding-block: var(--pv-s8);
}

.sub-rows--process .sub-row:last-child .sub-row__title {
  color: var(--pv-accent);
}

.sub-close {
  padding-block: var(--pv-s24);
  border-top: 1px solid var(--pv-line-soft);
}

.sub-close__inner {
  display: grid;
  gap: var(--pv-s6);
}

.sub-close__title {
  font-size: clamp(44px, 6.4vw, 104px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 14ch;
}

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

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

/* Corporate structure pass: rows always read title left, body right, and
   the pull statement sits on a light band, the way citadel and blackrock
   break a long dark page into chapters. */
@media (min-width: 960px) {
  .sub-row.is-right .sub-row__title,
  .sub-row.is-right .sub-row__body {
    order: initial;
    justify-self: start;
  }

  .sub-row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.sub-pull {
  background: var(--pv-fg);
  color: var(--pv-page);
  padding-block: var(--pv-s24);
  margin-top: var(--pv-s16);
}

.sub-pull__label {
  color: var(--pv-page);
}

.sub-pull__text {
  color: var(--pv-page);
}

@media (min-width: 960px) {
  .sub-pull__text {
    border-left-color: var(--pv-accent);
    border-left-width: 2px;
  }
}

/* Row titles and "Read more" open the item's own page. */
.sub-row__link {
  color: inherit;
  background-image: linear-gradient(var(--pv-accent), var(--pv-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition:
    color var(--pv-hover) var(--pv-ease),
    background-size 480ms var(--pv-ease);
}

.sub-row__link:hover,
.sub-row__link:focus-visible {
  color: var(--pv-fg);
  background-size: 100% 2px;
  text-decoration: none;
}

.sub-row__more {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-s3);
  min-height: var(--pv-control-lg);
  margin-top: var(--pv-s2);
  font-size: 15px;
  font-weight: 700;
  color: var(--pv-accent);
}

.sub-row__body .sub-row__more {
  background-image: none;
}

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

.sub-row__more:hover {
  text-decoration: none;
  color: var(--pv-accent-strong);
}

.sub-row__more:hover::after {
  transform: scaleX(1.6);
}

.sub-pull__label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Related items: the other pages in the same section, the current one
   marked in pink. */
.related {
  padding-block: var(--pv-s16);
  border-top: 1px solid var(--pv-line-soft);
}

.related__grid {
  display: grid;
  gap: var(--pv-s6);
}

.related__label {
  font-size: var(--pv-text-meta);
  font-weight: 700;
  letter-spacing: var(--pv-tracking-caps);
  text-transform: uppercase;
}

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

.related__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pv-s2) var(--pv-s8);
}

.related__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pv-control-lg);
  font-size: 18px;
  font-weight: 500;
  color: var(--pv-fg-2);
  background-image: linear-gradient(var(--pv-accent), var(--pv-accent));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 8px);
  background-size: 0% 1px;
  transition:
    color var(--pv-hover) var(--pv-ease),
    background-size 420ms var(--pv-ease);
}

.related__link:hover {
  color: var(--pv-fg);
  background-size: 100% 1px;
  text-decoration: none;
}

.related__link.is-current {
  color: var(--pv-accent);
}

@media (min-width: 960px) {
  .related__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: baseline;
  }
}

/* The base hero rule paints the home poster behind every hero video. On
   section and detail pages the hero has its own poster or picture, so the
   home poster would be a wasted download competing with the real LCP image. */
.sub .ch-hero__video {
  background-image: none;
}

.sub-pull :focus-visible {
  outline-color: var(--pv-page);
}