/* ============================================================================
   HYDRO2050 - PAGE 09, ABOUT US
   ----------------------------------------------------------------------------
   Measured from Paper artboards 889-0 (1440) and B1V-0 (375).

   TWO CORRECTIONS OFF THE ARTBOARD, both recorded in DESIGN-NOTES.md:

   1. The Body frame declares height 1158 against 1246 of its own content, so
      it is 88px short of what it holds. Height follows content here.

   2. The bio control's ring. An earlier brief put one of these at 3.39:1.
      Recomputed against the real portraits rather than carried forward, by
      sampling the pixels immediately outside the ring in each of the four
      304 x 340 source images:

        Michael Schaefer   1.04:1   worst pixel #30486E, his navy suit
        Damian Serong      7.40:1   worst pixel #E2E1E9
        Danny Macmahon     8.80:1   worst pixel #EBF7FD
        Katie Byrne        1.00:1   worst pixel #5F3D2B, her hair

      So it is worse than reported, on two of the four, and no single ring
      colour can fix it: the ground is a photograph and runs from #30486E to
      near white. The fix is a two-tone ring. The navy stroke keeps a 2px
      white halo outside it as well as the white fill inside, so the stroke
      measures 9.60:1 against its own surround whatever the photograph does,
      and the halo carries the outer edge when the photograph is dark.

      That pair is provably sufficient. Navy has relative luminance 0.0619, so
      navy clears 3:1 against any pixel above L 0.2857, and white clears 3:1
      against any pixel below L 0.30. The two ranges overlap, so every possible
      photograph pixel is covered by one edge or the other.
   ========================================================================== */

.p09-open { padding-top: var(--rhythm-open); }
.p09-open__eyebrow { margin-bottom: 28px; }
.p09-open__title { max-width: 900px; }

.p09-body { padding-top: var(--rhythm-block); padding-bottom: var(--rhythm-section); }

/* ===== THE COMPANY ======================================================= */

/* `isolation: isolate` for the reason partners.css states at length: `.art` and
   `.p09-mark` are positioned with z-index 0, and a positioned z-index-0 element
   paints AFTER every non-positioned block in the same stacking context. Without
   its own context here, this section's mark competes against the whole document
   rather than against its own children, and can surface over a neighbour. Every
   other art-carrying section on the site carries this; these two did not. */
.p09-company {
  border-top: 1px solid var(--rule);
  padding-top: 44px;
  padding-bottom: 56px;
  position: relative;
  isolation: isolate;
}
.p09-company__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(680px, 100%);
}
.p09-company__copy p { font-size: 18px; line-height: 30px; color: var(--ink); }

/* The client's own droplet mark, drawn as the five paths it is in the file
   rather than rastered. The artboard puts it at left 896, top 20, 347 square
   inside the 1312 column, so it ends 69 short of the column's right edge.
   Anchored to that right edge rather than to the 896, because a fixed left
   offset inside a fluid column overflowed the viewport at 1259 and below.
   The width then gives way to the 680 copy column rather than colliding with
   it: at 1440 the clamp resolves to the measured 347. */
/* 347 wide at right 69 inside the 1312 column. Both are fractions of the
   column, so the mark keeps its place in the composition at every width and
   simply runs out of room and disappears when the copy needs the space. */
/* THE WIDTH REACHES ZERO AT THE BREAKPOINT, not at 720. The old lower bound
   was calc(100% - 720px), which never reaches zero on the desktop side: the
   column is 772 at 900, so the mark was still drawn at 52px there and at
   152px at 1000. At that size the client's droplet is not a mark, it is a
   speck in the top corner with nothing anchoring it to the copy beside it.
   772 is the column at the 900 breakpoint, and 1.285 is the slope that takes
   the mark from zero there to its own 26.45% cap at 1100, after which the
   cap carries it to the artboard's measured 347 at 1440. */
.p09-mark {
  position: absolute;
  right: 5.26%;
  top: 20px;
  z-index: var(--z-art);
  width: clamp(0px, calc((100% - 772px) * 1.285), 26.45%);
  height: auto;
  aspect-ratio: 1;
  pointer-events: none;
}

/* ===== THE TEAM ========================================================== */

/* Same isolation rule as .p09-company above, and for the same reason.
   padding-bottom is 0 because nothing follows this section inside .p09-body,
   which already carries --rhythm-section beneath it. Precisely: .p09-team is
   the last child of .p09-body's own .wrap, not of .p09-body itself, so the two
   paddings still stack with nothing between them. Both together put 168px
   under the last portrait caption, which is off the rhythm scale and read as
   an unexplained white run above the navy band. */
.p09-team {
  border-top: 1px solid var(--rule);
  padding-top: 44px;
  padding-bottom: 0;
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
/* "Particle ground, vignette": the brand artwork cropped to a 208px strip
   running the full 1440 behind the head of this section. */
/* Named children, not `> *`. A `.p09-team > *` rule is specificity 0,1,1 and
   beat `.p09-team__art`'s own 0,1,0 `position: absolute`, which put the
   vignette into normal flow: it rendered as a 208px empty band above the
   heading and pushed the whole team section down by exactly that. */
.p09-team > .p09-team__head,
.p09-team > .people { position: relative; z-index: var(--z-content); }

.p09-team__head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 44px; }
.p09-team__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.p09-team__deck { font-size: 18px; line-height: 30px; color: var(--ink); max-width: 680px; }

/* 304 x 4 + 32 x 3 = 1312. Expressed as fractions so the row does not
   overflow between 900 and 1440. */
.people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.person { display: flex; flex-direction: column; gap: 20px; }

.person__portrait {
  position: relative;
  aspect-ratio: 304 / 340;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.person__portrait img { width: 100%; height: 100%; object-fit: cover; }

.person__name {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 28px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
/* The artboard fixes this slot at 48px so the four cards' baselines line up
   whether a role runs to one line or two. It is a min, not a fixed height, so
   a longer role than the four current ones cannot clip. */
.person__role {
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-muted);
  min-height: 48px;
  margin-top: 4px;
}

/* THE THREE ROWS ARE ONE LANE ACROSS THE FOUR CARDS.
   The card is three stacked blocks, portrait, name, role, and the artboard
   draws all four cards with those three on shared lines. As four independent
   flex columns they only agree while every name fits one line, which is true
   at the artboard's 304 and false at the 169 the column resolves to at 900:
   Michael Schaefer and Danny Macmahon wrapped, Damian Serong and Katie Byrne
   did not, so the roles sat on two different lines and the four cards read as
   four separate objects. .person__role's min-height cannot fix that, because
   it aligns what is below the name rather than the name itself.

   subgrid is the fix rather than a second min-height: the name row is as tall
   as the tallest name and no taller, so nothing is padded at 1440 where every
   name is one line. .person__card is display: contents, so the three blocks
   are already direct children of .person and can take the rows.

   Desktop only. Below the breakpoint the cards are a two-column list with
   their own spacing, set in the mobile block at the foot of this file. */
@media (min-width: 900px) {
  .people { grid-template-rows: auto auto auto; row-gap: 20px; }
  .person { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; }
}

/* ===== THE BIO CARD ======================================================
   Paper draws a 40px plus button on the portrait and a "Read bio" link on
   mobile, both opening a biography. No biography exists for any of the four,
   so the control opened nothing and is not built: a disclosure that discloses
   an empty panel is a worse defect than a card without one. The portrait, the
   name and the role are the whole card until Hydro2050 supplies the text.

   The .person__card wrapper that used to carry display: contents here is gone
   with the four unreachable bio ids it held; see the note in about-us.html.
   The three blocks are direct children of .person, which is what the subgrid
   rule above needs anyway.                                                 */

/* ===== MOBILE ============================================================
   From artboard B1V-0. Two columns of 160 at a 15 gap, portraits 160 x 179,
   names in Source Sans 3 600 rather than the desktop's Montserrat 500, and
   the plus button replaced by the "Read bio" link the artboard draws.

   The 375 artboard also carries two decorative pattern rectangles behind the
   copy. They are not built, for the same reason the industry family's are
   not: this build paints no artwork behind body type below the breakpoint. */

@media (max-width: 899px) {
  .p09-open { padding-top: var(--rhythm-open); }
  .p09-open__eyebrow { margin-bottom: 14px; }

  .p09-body { padding-top: 0; padding-bottom: 0; }

  /* The mark moves out of the company block and sits ABOVE the copy at 120px,
     which is where the 375 artboard puts it. It is written last in the markup
     because on desktop it is absolutely positioned beside the copy, so the
     order is set here rather than by moving it in the document. */
  .p09-mark {
    position: static;
    order: -1;
    width: 120px;
    height: 120px;
    margin: 0 0 20px;
  }
  .p09-company {
    border-top: 0;
    padding-top: 8px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  .p09-company__copy { gap: 14px; }
  .p09-company__copy p { font-size: 17px; line-height: 27px; }

  .p09-team { border-top: 0; padding-top: 52px; padding-bottom: 0; }
  .p09-team__head { gap: 10px; margin-bottom: 24px; }
  .p09-team__title { font-size: 22px; line-height: 28px; }
  .p09-team__deck { font-size: 17px; line-height: 26px; }

  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 15px; row-gap: 28px; }
  .person { gap: 0; }
  .person__portrait { aspect-ratio: 160 / 179; }
  .person__name {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 24px;
    font-weight: var(--wt-semi);
    margin-top: 10px;
  }
  .person__role { font-size: 13px; line-height: 20px; min-height: 42px; margin-top: 2px; }

  /* .p09-body, not .p09-team. About nests its two body sections inside
     .p09-body's .wrap, so .band is a sibling of .p09-body and never of
     .p09-team: the adjacent-sibling selector this rule used to carry matched
     zero elements at every viewport, and the 56px separator it exists to
     deliver was never applied. Every other page names a top-level section here
     and matches correctly, which is why the fault was specific to this one. */
  .p09-body + .band { margin-top: 56px; }
}