/**
 * Portfolio Moguls — About & Founders.
 *
 * Loaded only on /about and the three founder bio pages (LESSON-006).
 * Mobile-first throughout; min-width queries only (LESSON-009).
 *
 * The .pm-numbers rules are a deliberate copy of the Home ones: the component
 * is shared but its stylesheet is page-scoped, and only one of home.css /
 * about.css ever loads on a given page, so the duplication cannot conflict.
 * Change both or neither.
 */

/* --------------------------------------------------------------------------
   1 · Header band — a band, not a hero
   -------------------------------------------------------------------------- */

.pm-abouthead {
  background: var(--pm-navy);
  color: var(--pm-on-navy);
  border-bottom: var(--pm-rule-gold);
  padding-block: 44px 40px;
}

.pm-abouthead__h1 {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

.pm-abouthead__sub {
  font-family: var(--pm-font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--pm-on-navy-soft);
  margin: 14px 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   2 · The thesis — two serif paragraphs, no more
   -------------------------------------------------------------------------- */

.pm-thesis { padding-block: 54px 10px; }

.pm-thesis__measure {
  max-width: 68ch;
  font-family: var(--pm-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--pm-text);
}

.pm-thesis__measure p { margin: 0; }

.pm-thesis__measure p + p { margin-top: 18px; }

/* --------------------------------------------------------------------------
   3 · Numbers Wall — copied from home.css, see the header note
   -------------------------------------------------------------------------- */

.pm-numbers { padding-block: 52px 58px; }

.pm-numbers__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 28px;
}

.pm-numbers__item {
  border-top: 1px solid var(--pm-navy);
  padding-top: 18px;
}

.pm-numbers__figure {
  font-family: var(--pm-font-ui);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--pm-navy);
  letter-spacing: -0.01em;
}

.pm-numbers__label {
  font-size: 13.5px;
  color: var(--pm-muted-cool);
  margin-top: 10px;
  line-height: 1.35;
}

.pm-numbers__quote {
  margin-top: 44px;
  max-width: 760px;
}

.pm-numbers__rule {
  display: block;
  width: 52px;
  height: 1px;
  background: var(--pm-gold);
}

.pm-numbers__quotetext {
  font-family: var(--pm-font-body);
  font-size: 22px;
  line-height: 1.4;
  color: var(--pm-navy);
  margin: 18px 0 0;
  text-wrap: pretty;
}

.pm-numbers__quote .pm-stamp {
  display: block;
  margin-top: 14px;
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------------------
   4 · The Founders
   -------------------------------------------------------------------------- */

.pm-founders { padding-block: 56px 62px; }

.pm-founders .pm-eyebrow {
  letter-spacing: 0.2em;
  font-size: 11px;
}

.pm-founders__heading {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 26px;
  color: var(--pm-navy);
  margin: 10px 0 28px;
}

.pm-founders__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.pm-founder {
  border: 1px solid var(--pm-border-soft);
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
  background: var(--pm-white);
  box-shadow: var(--pm-shadow-card);
}

.pm-founder__frame {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--pm-surface-deep);
}

.pm-founder__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-founder__frame--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pm-founder__icon { line-height: 0; }

.pm-founder__note {
  font: var(--pm-stamp-type);
  letter-spacing: var(--pm-stamp-tracking);
  text-transform: uppercase;
  color: var(--pm-stamp);
}

.pm-founder__body { padding: 20px 22px 22px; }

.pm-founder__name {
  font-family: var(--pm-font-ui);
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}

/* Base.css underlines content links; a card title carries its own affordance. */
.pm-founder__name a {
  color: var(--pm-navy);
  text-decoration: none;
}

.pm-founder__name a:hover,
.pm-founder__name a:focus-visible {
  color: var(--pm-link-hover);
  text-decoration: underline;
}

.pm-founder__role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-muted-cool);
  margin: 6px 0 0;
}

.pm-founder__points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.pm-founder__points li {
  font-family: var(--pm-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--pm-text-soft);
  padding: 10px 0;
  border-top: 1px solid var(--pm-hairline);
}

.pm-founder__more {
  display: inline-block;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   5 · "Why this table" strip
   -------------------------------------------------------------------------- */

.pm-whytable {
  padding-block: 54px;
  text-align: center;
}

.pm-whytable__rule {
  display: inline-block;
  width: 52px;
  height: 1px;
  background: var(--pm-gold);
}

.pm-whytable__line {
  font-family: var(--pm-font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--pm-navy);
  max-width: 760px;
  margin: 18px auto 0;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   6 · Standards strip
   -------------------------------------------------------------------------- */

.pm-standards { padding-block: 52px 58px; }

.pm-standards__heading {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 22px;
  color: var(--pm-navy);
  margin: 0 0 22px;
}

.pm-standards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.pm-stdcard {
  position: relative;
  display: block;
  background: var(--pm-white);
  border: 1px solid var(--pm-border-soft);
  border-radius: var(--pm-radius-lg);
  padding: 20px 44px 20px 22px;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pm-stdcard:hover,
.pm-stdcard:focus-visible {
  border-color: var(--pm-navy);
  box-shadow: var(--pm-shadow-card);
}

.pm-stdcard__title {
  display: block;
  font-family: var(--pm-font-ui);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--pm-navy);
}

.pm-stdcard__line {
  display: block;
  font-family: var(--pm-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--pm-muted-cool);
  margin-top: 6px;
}

.pm-stdcard__arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: var(--pm-link-hover);
}

/* --------------------------------------------------------------------------
   7 · Closing CTA band — shared by /about and the bio pages
   -------------------------------------------------------------------------- */

.pm-aboutcta {
  background: var(--pm-navy);
  color: var(--pm-on-navy);
  padding-block: 52px;
}

.pm-aboutcta__inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pm-aboutcta__heading {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 24px;
  margin: 0;
  text-wrap: pretty;
}

.pm-aboutcta__body {
  font-family: var(--pm-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--pm-on-navy-soft);
  margin: 10px 0 0;
  max-width: 56ch;
}

.pm-aboutcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   8 · Founder bio page
   -------------------------------------------------------------------------- */

.pm-bio { padding-block: 40px 58px; }

/* Base: one column, portrait first. The two-column rail is the ≥1024
   enhancement — see the note at the foot of this file. */
.pm-bio__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.pm-bio__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 300px;
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
  background: var(--pm-surface-deep);
  border: 1px solid var(--pm-border-soft);
}

.pm-bio__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-bio__frame--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pm-bio__icon { line-height: 0; }

.pm-bio__note {
  font: var(--pm-stamp-type);
  letter-spacing: var(--pm-stamp-tracking);
  text-transform: uppercase;
  color: var(--pm-stamp);
}

.pm-bio__name {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pm-navy);
  margin: 0;
}

.pm-bio__role {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-muted-cool);
  margin: 10px 0 0;
}

/* The public-profile pill — sits where the credential chips used to, so it
   keeps their hairline weight rather than reading as a call to action. */
.pm-bio__profile { margin: 18px 0 0; }

.pm-bio__profile a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--pm-chip);
  color: var(--pm-navy);
  text-decoration: none;
  border: 1px solid var(--pm-border-soft);
  border-radius: var(--pm-radius-sm);
  padding: 8px 12px;
  background: var(--pm-white);
  transition: border-color 120ms ease, color 120ms ease;
}

.pm-bio__profile a:hover,
.pm-bio__profile a:focus-visible {
  border-color: var(--pm-navy);
  color: var(--pm-link-hover);
}

.pm-bio__body {
  font-family: var(--pm-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--pm-text);
  margin-top: 22px;
}

.pm-bio__body p { margin: 0; }

.pm-bio__body p + p { margin-top: 18px; }

.pm-bio__unmatched {
  font-family: var(--pm-font-body);
  font-size: 16px;
  color: var(--pm-muted);
  max-width: 60ch;
}

.pm-bio__pubs {
  margin-top: 38px;
  border-top: 1px solid var(--pm-border-faint);
  padding-top: 26px;
}

.pm-bio__pubsheading {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 19px;
  color: var(--pm-navy);
  margin: 0 0 14px;
}

.pm-bio__publist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pm-bio__publist li {
  font-family: var(--pm-font-body);
  font-size: 15.5px;
  line-height: 1.55;
  padding: 11px 0;
  border-top: 1px solid var(--pm-hairline);
}

.pm-bio__publist li:first-child { border-top: 0; }

/* --------------------------------------------------------------------------
   Wider screens
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .pm-abouthead { padding-block: 56px 52px; }

  .pm-thesis { padding-block: 66px 12px; }

  .pm-thesis__measure { font-size: 19px; }

  .pm-founders__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pm-standards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pm-aboutcta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 900px) {
  .pm-numbers__grid { grid-template-columns: repeat(4, 1fr); }
  .pm-numbers__figure { font-size: 46px; }
  .pm-numbers__quotetext { font-size: 27px; }

  .pm-founders { padding-block: 68px 74px; }
  .pm-founders__heading { font-size: 30px; }

  .pm-whytable { padding-block: 66px; }
  .pm-whytable__line { font-size: 22px; }

  .pm-bio { padding-block: 48px 70px; }
  .pm-bio__name { font-size: 36px; }
}

/* --------------------------------------------------------------------------
   Bio page, two columns
   The stacked layout left the whole right half of a 1280px wrap empty: a 68ch
   measure has nowhere to go once the viewport is twice that wide. So the
   portrait moves into a fixed rail and every text block runs beside it, which
   consumes the width without stretching a line of serif to 150ch — unreadable,
   and the reason simply deleting the max-width was not the fix.

   The rail width is doing typographic work, not decoration. It is what holds
   the measure down as the viewport grows, so it WIDENS at each step rather
   than staying put. Measured, body column in ch:

     390px   no rail    →  38ch
     834px   rail 240   →  56ch
     1024px  rail 300   →  65ch
     1280px+ rail 400   →  80ch   (wrap caps at 1280, so this is the widest)

   Without the 1280 step the measure reached 89ch — past comfortable for a
   serif at this size, which is why the rail grows a second time.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .pm-bio__layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }

  .pm-bio__frame { max-width: none; }
}

@media (min-width: 1024px) {
  .pm-bio__layout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
  }

  .pm-bio__body {
    font-size: 18px;
    margin-top: 24px;
  }

  /* Seven short entries in one tall stack would reintroduce the empty space
     lower down the page, so the list splits once there is room for it. */
  .pm-bio__publist {
    columns: 2;
    column-gap: 44px;
  }

  /* Keeps a two-line entry from splitting across the column break. */
  .pm-bio__publist li {
    break-inside: avoid;
    padding: 12px 0;
  }

  /* With two columns, "first child has no rule" only clears entry 1 — the
     entry that starts column 2 keeps a stray top border. Rule them all
     instead and drop the exception. */
  .pm-bio__publist li:first-child { border-top: 1px solid var(--pm-hairline); }
}

@media (min-width: 1280px) {
  .pm-bio__layout {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 64px;
  }
}