/* QUBE draft 3, interior pages.

   Loaded AFTER draft3.css on the six draft3-* interior pages. draft3.css is
   owned by another workstream and is not edited here, so every rule the
   interior pages need lives in this file.

   The system is the homepage system with nothing added: cream canvas, ink,
   muted, one hairline colour as the only separator, the accent used for links
   and for the primary button, EB Garamond for headings and Inter for body,
   about 120px between sections. No boxes, no cards, no shadows, no gradients,
   no radius above 2px, no uppercase eyebrow labels, no category pills.

   Interior pages differ from the homepage in one respect only: the homepage
   hero is centred because it is a title page, and an interior page is a
   document, so its hero sets flush left. Everything else is shared. */

/* PAGE HERO.
   Same construction as #hero on the homepage, a band of empty paper closed by
   a full width hairline, at a shorter measure because there is a page of
   content under it rather than a fold. */

.page-hero {
  padding: 132px 0 110px;
  border-bottom: 1px solid var(--rule);
}

.page-hero-inner {
  opacity: 0.001;
  will-change: opacity;
  animation: fade-in 1200ms var(--ease) 200ms forwards;
}

.page-hero h1 {
  font-family: var(--serif);
  font-size: var(--page-hero-size, 46px);
  line-height: 1.15;
  max-width: 18ch;
  margin: 0;
}

.page-hero .page-hero-lead {
  margin-top: 22px;
  max-width: 56ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* SECTIONS.
   One padding value, one separator. A section that follows another carries the
   hairline on its own top edge so the rule always sits in the middle of the
   120px run rather than hard against one side of it. */

.p-section { padding: var(--section) 0; }
.p-section + .p-section { border-top: 1px solid var(--rule); }
.p-section--band { background: var(--canvas-alt); }

/* The homepage caps .section-heading at 20ch because it sits in a half width
   column beside a second column. On these pages the heading opens a full width
   section, so the same cap breaks short headings onto two lines against an
   empty right half. 30ch lets them set on one line and still stops them running
   the full 1080px measure. */
.p-section > .container > .section-heading { max-width: 30ch; }

.p-lead {
  margin-top: 18px;
  max-width: 60ch;
  color: var(--muted);
  font-size: 1rem;
}

.p-sub {
  margin-top: 14px;
  max-width: 60ch;
  color: var(--muted);
  font-size: 0.9375rem;
}

.p-prose p {
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.75;
}
.p-prose p + p { margin-top: 20px; }
.p-prose .section-heading { margin-top: 0; }
.p-prose .section-heading + p { margin-top: 0; }

.p-heading-sm {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 20px;
}

/* A run of text and a narrow column of short facts beside it. */
.p-split {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 80px;
  align-items: start;
}

/* FACT LIST. The sidebar cards from the old design, rebuilt as hairline
   separated entries. The small line above each entry is its own label and is
   set in sentence case at body colour muted, not as an uppercase eyebrow. */
.fact {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.fact:first-child { border-top: 0; padding-top: 0; }
.fact:last-child { border-bottom: 1px solid var(--rule); }

.fact-label {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-bottom: 6px;
}
.fact h4 {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.fact p {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* ENTRY LIST. The single repeating unit for every list of named things on
   these pages: membership benefits, events, team features, application steps,
   sectors. Two columns at desktop, one below 768. Each entry is separated by a
   hairline on its top edge and nothing else. */
.entry-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
  margin-top: 44px;
}
.entry-list--one { grid-template-columns: 1fr; }

.entry {
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  align-items: baseline;
}
/* The two leading entries of a two column list sit under one shared rule, so
   the top of the list reads as a single line across the page. */
.entry-list > .entry:nth-child(-n+2) { padding-top: 26px; }
.entry-list--one > .entry:first-child { padding-top: 26px; }

.entry-num {
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
/* An entry with no number collapses its first column rather than leaving a
   ragged indent. */
.entry--plain { grid-template-columns: 1fr; }

.entry h3,
.entry h4 {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.25;
  margin: 0 0 8px;
}
.entry p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 46ch;
}
.entry p + p { margin-top: 10px; }
.entry strong { color: var(--ink); font-weight: 500; }

/* The audience note that used to be a coloured pill. Plain muted text on its
   own line, sentence case, no border, no background. */
.entry-note {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* SECTOR INDEX. A list of links, so it gets a hover state the entry list does
   not need. The rule and the arrow are the whole treatment. */
.index-list { margin-top: 44px; border-bottom: 1px solid var(--rule); }

.index-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 300px) 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.index-row:hover { text-decoration: none; }
.index-row:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.index-row:hover .index-arrow { transform: translateX(6px); }

.index-num {
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.index-row h3 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}
.index-row p {
  color: var(--muted);
  font-size: 0.9375rem;
}
.index-arrow {
  color: var(--muted);
  font-size: 0.9375rem;
  transition: transform 240ms var(--ease);
}

/* PEOPLE. The homepage People pattern: real headshots in full colour, name and
   role set beneath in small type. No frame, no radius, no caption box. */
.people-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 24px;
  margin-top: 36px;
}
.people-grid--three { grid-template-columns: repeat(3, 1fr); max-width: 640px; }

.people-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.person-name {
  display: block;
  margin-top: 12px;
  font-size: 0.8125rem;
}
.person-role {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* A named run of people inside a larger group, for example the Co-Chairs. The
   label is a plain muted line, not an uppercase tag. */
.people-group + .people-group { margin-top: 56px; }
.people-group-label {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

/* TEAMS PAGE, TWO EQUAL COLUMNS.
   Capital and Consulting are peers, so they sit side by side in two columns of
   exactly equal width (1fr and 1fr, one shared gutter) that start on the same
   top edge. Nothing distinguishes one from the other: same heading level, same
   type sizes, same spacing, no background band on either. The shorter column
   simply ends earlier, it is never stretched or padded to match.

   The divider is a single vertical hairline in the gutter, drawn as a border on
   the second column, because a rule is the only separator this system owns. It
   is placed by splitting the gutter evenly either side of it. */
.teams-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  align-items: stretch;
}

/* Both columns take the height of the taller one and lay their content out as a
   column, so the leadership portraits can be pushed to the bottom edge and the
   two photo rows line up with each other even though Consulting carries one
   more entry than Capital. */
.team-col { min-width: 0; padding-right: 44px; display: flex; flex-direction: column; }
.team-col + .team-col {
  padding-right: 0;
  padding-left: 44px;
  border-left: 1px solid var(--rule);
}

/* Inside a column the prose and the feature list stack, because a column is
   already half the page and does not split again. */
.team-body { margin-top: 48px; }
.team-col .p-prose p { max-width: none; }
.team-col .entry p { max-width: none; }
.team-col .p-lead { max-width: none; }
.team-col .section-heading { max-width: none; }
.team-col .entry-list { margin-top: 0; }

/* The Co-Chairs, above the split and across the full content width. */
.team-chairs { margin-bottom: 72px; }
.people-grid--chairs {
  grid-template-columns: repeat(2, 170px);
  justify-content: center;
  margin-top: 0;
}

/* CENTRED PEOPLE. No one in a leadership block is positioned ahead of anyone
   else, so every grid of people on this page centres in its container and the
   names and roles centre under the portraits. */
.people-grid--chairs,
.team-col .people-grid,
.p-section--centred .people-grid {
  justify-content: center;
  text-align: center;
}

.team-col .people-group { text-align: center; }
.people-group--bottom { margin-top: auto; padding-top: 72px; }
/* The group is bottom aligned, so a role that wraps to two lines in one column
   and one in the other would lift that column's portraits. Reserve two lines for
   every role inside the team columns and the two photo rows sit on one line. */
.team-col .person-role { min-height: 3em; }
.team-col .people-grid--three { max-width: none; }

.p-section--centred > .container > .section-heading,
.p-section--centred > .container > .p-sub {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.people-grid--ops {
  grid-template-columns: repeat(2, 170px);
  justify-content: center;
}

/* EXECUTIVE TEAM TIERS, CENTRED.
   The section is a pyramid: tiers of two, three, three and two, each centred on
   the page, so a row of peers reads as a row of peers. Left aligned rows put
   whoever happens to be written first at the same x position as the person who
   outranks the whole tier above, and the short tiers trail off to the right,
   which reads as a ranking nobody intended.

   THIS IS A FLEX ROW, NOT A GRID, and that is the whole trick. A grid of
   repeat(3, 170px) lays down three tracks whether or not there are three people
   in the tier, so the two person tiers centre the empty third track along with
   themselves and land 97px left of the three person tiers above them. Measured,
   not guessed. A flex row is only as wide as the people actually in it, so
   every tier centres on the same axis.

   170px is the portrait width the Co-Chairs and Operations rows already use on
   the Teams page, so every headshot on the site stays one size. */
.people-grid--tier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: none;
  text-align: center;
}
.people-grid--tier > li { width: 170px; }

/* The tier label sits over a full width hairline, so the rule still reads as
   the divider between tiers while the label centres over the portraits. */
.people-group--tier .people-group-label { text-align: center; }

/* CLIENT LOGO SLOT. Any client mark added here inherits the homepage alumni
   treatment: black by default, true brand colour on hover or keyboard focus.
   The class is the homepage's .alumni-mark, reused rather than reinvented, so
   there is one logo behaviour on the site. While the list is empty the slot
   renders nothing at all. There is no grey placeholder box in this system. */
.client-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 56px;
  margin-top: 40px;
}
.client-marks .alumni-mark { height: 34px; }
/* An empty slot takes no space at all, not even its own top margin. :empty is
   not enough on its own here, because the whitespace text nodes around the
   commented example count as content, so the test is "contains no image". */
.client-marks:not(:has(img)) { display: none; }

/* LINK ROWS. The homepage .btn-ghost, used where a page ends on a next step. */
.p-links {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.p-actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Inline social links at the foot of the apply page. Plain accent links on one
   hairline, no buttons and no tiles. */
.p-social {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}

/* RESPONSIVE */

@media (max-width: 1024px) {
  .page-hero { padding: 108px 0 92px; }
  :root { --page-hero-size: 40px; }
  .p-split { grid-template-columns: 1fr; gap: 56px; }
  .entry-list { column-gap: 48px; }
  .people-grid { grid-template-columns: repeat(4, 1fr); }
  .index-row { grid-template-columns: 44px minmax(0, 240px) 1fr auto; }

  /* The two team columns stay side by side here, on a narrower gutter. Their
     people grids keep three across so both columns stay identical. */
  .team-col { padding-right: 28px; }
  .team-col + .team-col { padding-left: 28px; }
  .team-col .people-grid--three { grid-template-columns: repeat(3, 1fr); }
  .people-grid--chairs, .people-grid--ops { grid-template-columns: repeat(2, 150px); }
  .people-grid--tier > li { width: 150px; }
}

@media (max-width: 768px) {
  :root { --page-hero-size: 34px; }
  .page-hero { padding: 80px 0 68px; }
  .page-hero h1 { max-width: none; }
  .page-hero .page-hero-lead { max-width: none; }

  .entry-list { grid-template-columns: 1fr; column-gap: 0; margin-top: 32px; }
  .entry p { max-width: none; }
  .p-prose p { max-width: none; }
  .p-lead, .p-sub { max-width: none; }

  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .people-grid--three { grid-template-columns: repeat(2, 1fr); max-width: none; }

  /* The index rows stop being a table and become a stacked entry, because four
     columns inside 342px of content is not a row any more. */
  .index-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .index-arrow { display: none; }

  .p-links, .p-social { gap: 16px; flex-direction: column; }

  /* Vertical order is unavoidable on a phone, so the two columns become one
     stack, Capital first, and the vertical hairline becomes a horizontal one
     between the two teams. */
  .teams-split { grid-template-columns: 1fr; }
  .team-col { padding-right: 0; }
  .team-col + .team-col {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    margin-top: 72px;
    padding-top: 72px;
  }
  .team-col .people-grid--three { grid-template-columns: repeat(2, 1fr); }
  .team-chairs { margin-bottom: 56px; }
  .people-grid--chairs, .people-grid--ops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A fixed portrait width would overflow a phone, so the tier rows become
     two flexible columns like every other people grid at this width. */
  .people-grid--tier > li { width: calc(50% - 12px); }
}

@media (max-width: 480px) {
  :root { --page-hero-size: 30px; }
  .page-hero { padding: 60px 0 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero-inner { animation: none; opacity: 1; }
  .index-arrow { transition: none; }
}