/* =====================================================================
 * /assets/hbm-teams.css
 * /serve/mission-teams/ — "2026 Teams and Interns". Mrs. Taylor, 2026-08-17.
 *
 * Her brief: "blue background. each an individual section. professional
 * look." — plus, from earlier today: the same navy as the About pages, no
 * black corner tips, headings bold, titles centred with space beneath.
 *
 * The page keeps body.hbm-doc, so it inherits the About-page navy. But the
 * default hbm-doc shape is ONE white sheet wrapping the whole page, and
 * "each an individual section" asks for the opposite. So the sheet is
 * dissolved here and each person is given a card of their own on that navy.
 * The card anatomy is .hbm-mp__block from the missionary pages, near enough
 * line for line — white, 1px #dde3e9, 16px radius, navy h2, uppercase
 * letter-spaced subheads, a two-column Praises / Prayer Requests grid and a
 * contact-sheet photo band. A visitor arriving from /missionary/nalty/
 * meets a shape they have already read.
 *
 * LOAD ORDER: this file must come AFTER hbm-doc.css. It is scoped to
 * body.hbm-teams-page throughout, so it cannot reach another page.
 *
 * SPECIFICITY: nearly every selector carries #main-content. That is not
 * decoration — hbm-modern.css:35 sets `#main-content p, #main-content li
 * { line-height: 1.75 }` and :40 sets `#main-content h1,h2,h3,h4
 * { letter-spacing: -0.012em; line-height: 1.22 }` from id-scoped rules,
 * and an id beats any number of classes. Without the id prefix the leading
 * and tracking below would silently not apply. The same prefix is what
 * beats Divi's `.entry-content ul { padding: 0 0 23px 1em; line-height:
 * 26px }`, which this content sits inside.
 *
 * PHOTOGRAPHS: the sources came out of Word. The largest is 824px wide and
 * several are near 340px. Every frame on this page is therefore capped at
 * 288px, and each figure additionally carries its own true pixel dimensions
 * as --w / --h, from which a hard ceiling is computed. Nothing on this page
 * is ever rendered larger than the file behind it, at any viewport —
 * measured at 390, 560, 768, 900, 1024 and 1440.
 * ================================================================== */

body.hbm-teams-page {
  /* Secondary text on the navy. 7.9:1 on #0f2c49 — past AA. */
  --tm-onnavy: #a8c6e2;
  /* The destinations line. 10.0:1 on #0f2c49. */
  --tm-onnavy-strong: #c9dcee;
  /* The rule under the page title. This is the same 84x3px gold device the
     roster page already uses (.hbm-roster__title::after, hbm-modern.css
     2620) — the site's other navy page. 6.2:1 on the navy, where
     --hbm-accent would have been 3.3:1 and read as a smudge. */
  --tm-gold: #d8a33c;
  /* The mat behind a photograph, as .hbm-mp__shots figure. */
  --tm-mat: #eef2f6;
  --tm-gap: 14px;
  /* One frame width for the whole page. 288px is the largest size at which
     EVERY photograph here is still a downscale: the binding file is
     frank-families at 339x217, which in a 4:3 window can fill 289px before
     its height starts being enlarged. */
  --tm-frame: 288px;
  --tm-half: calc((var(--tm-frame) - var(--tm-gap)) / 2);
}

/* ------------------------------------------------------------------ *
 * 1. Dissolve the single white sheet.
 *
 * OVERRIDES hbm-doc.css:
 *   body.hbm-doc .et_pb_text { background-color:#fff; border-radius:12px }
 *   body.hbm-doc .et_pb_text .et_pb_text_inner { padding:40px 44px 44px }
 *   and its 720px variant { padding:26px 20px 30px }
 * Everything else hbm-doc does — the navy on body/#main-content/.et_pb_section,
 * the cleared grey row that caused the black corner tips, the section
 * padding — is kept exactly as it is.
 * ------------------------------------------------------------------ */
body.hbm-teams-page #main-content .et_pb_text.hbm-teams {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  /* Divi's own page CSS puts text-align:center on .et_pb_text_0. */
  text-align: left;
}

body.hbm-teams-page #main-content .et_pb_text.hbm-teams > .et_pb_text_inner {
  padding: 0;
  /* Divi names 'Roboto' 16px/1.8em here; the site is Open Sans. Open Sans is
     already loaded by the page — no new webfont is introduced. */
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  /* Divi's theme sets body{color:#fff}, so anything left uncoloured is white
     on a white card. Colour is set here and again on every text component. */
  color: var(--hbm-ink);
  text-align: left;
}

/* Divi rounds .et_pb_section_0 to 10px and clips it — the source of the
   black corner tips on the other pages. Navy on navy already hides them
   here; they are squared off so they cannot come back. */
body.hbm-teams-page #main-content .et_pb_section_0 {
  border-radius: 0;
  overflow: visible;
}

/* ------------------------------------------------------------------ *
 * 2. The page header, directly on the navy.
 * ------------------------------------------------------------------ */
body.hbm-teams-page #main-content .hbm-tm__masthead {
  margin: 0 0 30px;
  text-align: center;
}

/* Divi sets .et_pb_text_0 .et_pb_text_inner h1 to 82px Roboto (40px at 980,
   32px at 767) and hbm-doc colours every heading var(--doc-ink) #14385c,
   which on this navy is invisible. !important on the colour is belt and
   braces against /assets/hbm-contrast-generated.css, which carried a
   page-id-1273 block forcing #1f2a36 onto this page's h1 (that block is
   deleted as part of this change — see the build notes). */
body.hbm-teams-page #main-content .et_pb_text_inner h1.hbm-tm__title {
  margin: 0;
  padding: 0;
  color: #fff !important;
  font-family: inherit;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

/* Her instruction was "titles centred with space beneath them". A rule is
   what turns that space into something deliberate rather than a margin
   nobody set. Same device, same measurements as the roster page. */
body.hbm-teams-page #main-content .et_pb_text_inner h1.hbm-tm__title::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin: 18px auto 0;
  background: var(--tm-gold);
  border-radius: 2px;
}

/* Assembled from her own content — no new copy. */
body.hbm-teams-page #main-content .hbm-tm__places {
  margin: 18px 0 0;
  padding: 0;
  color: var(--tm-onnavy-strong);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Dated once for the page rather than once per card: all three reports came
   out of one document on one day, unlike the missionary blocks .hbm-mp__asof
   was written for. Same treatment, different scope. */
body.hbm-teams-page #main-content .hbm-tm__asof {
  margin: 10px 0 0;
  padding: 0;
  color: var(--tm-onnavy);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 3. The card. .hbm-mp__block with one change: --hbm-shadow-sm is low-alpha
 *    navy and vanishes on a navy ground, so the heavier --hbm-shadow-md is
 *    used instead.
 * ------------------------------------------------------------------ */
body.hbm-teams-page #main-content .hbm-tm__block {
  margin: 0 0 26px;
  padding: 30px 44px 34px;
  color: var(--hbm-ink);
  background: var(--hbm-surface);
  border: 1px solid var(--hbm-line);
  border-radius: var(--hbm-r-lg);
  box-shadow: var(--hbm-shadow-md);
}

body.hbm-teams-page #main-content .hbm-tm__block:last-child {
  margin-bottom: 0;
}

/* .hbm-mp__block a — the one accessibility rule the missionary cards carry
   that is easy to forget when the first link appears next summer. */
body.hbm-teams-page #main-content .hbm-tm__block a {
  color: var(--hbm-blue);
}

/* ---- identity strip: a dateline, not a biography ---- */
body.hbm-teams-page #main-content .hbm-tm__head {
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hbm-line);
}

/* TEAM and INTERN take the SAME pill. Two fills would read as active and
   inactive, or as a rank; the word is the distinction and it does not need
   colour-coding. White on #14385c is 11.9:1. */
body.hbm-teams-page #main-content .hbm-tm__tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  color: #fff;
  background: var(--hbm-navy);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Explicit margins, not a blanket reset: hbm-doc.css sets
   `body.hbm-doc .et_pb_text_inner h2:not(.hbm-doc__title)
   { margin-top:30px; margin-bottom:6px }` at (0,3,2), and zeroing that
   without restating it is what leaves a name touching the line under it. */
body.hbm-teams-page #main-content .et_pb_text_inner h2.hbm-tm__name {
  margin: 0 0 10px;
  padding: 0;
  color: var(--hbm-navy);
  font-family: inherit;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  text-wrap: balance;
}

/* Country and length of stay. The duration is the fact that separates a
   summer team from a career missionary, so it gets equal billing with the
   country rather than being buried in prose. */
body.hbm-teams-page #main-content .hbm-tm__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

body.hbm-teams-page #main-content .hbm-tm__place {
  color: var(--hbm-blue);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.hbm-teams-page #main-content .hbm-tm__dot {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b6c3cf;
}

body.hbm-teams-page #main-content .hbm-tm__stay {
  color: var(--hbm-muted);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------ *
 * 4. Praises / Prayer Requests. This is .hbm-mp__pp, with min() guarding
 *    the track floor so a 390px screen cannot be forced to scroll.
 * ------------------------------------------------------------------ */
body.hbm-teams-page #main-content .hbm-tm__pp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px 40px;
  margin: 0 0 26px;
}

/* When only Praises came in, the lone column would otherwise stretch the
   full 992px card and set a 130-character line. Capped to a reading
   measure instead. That is the whole of what handling a missing list
   requires — no placeholder, no apology line. */
body.hbm-teams-page #main-content .hbm-tm__pp:has(> :only-child) > * {
  max-width: 62ch;
}

/* Divi's own page CSS sets `.et_pb_text_0 .et_pb_text_inner h3
   { color:#ffffff !important }` — without the !important below, both
   subheads are white text on a white card. It also sets 24px, 10px
   tracking, 2em leading, Roboto and centring, all of which lose on
   specificity here. */
body.hbm-teams-page #main-content .et_pb_text_inner h3.hbm-tm__pphead {
  margin: 0 0 10px;
  padding: 0;
  color: var(--hbm-navy) !important;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
}

/* Divi strips list markers site-wide (`ol,ul{list-style:none}`) and
   `.entry-content ul` — which this content IS inside — sets
   `padding:0 0 23px 1em; line-height:26px` at (0,1,1). Both are taken back
   here, which needs the id prefix to win. */
body.hbm-teams-page #main-content .hbm-tm__pplist {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: disc outside;
}

body.hbm-teams-page #main-content .hbm-tm__pplist li {
  margin: 0 0 9px;
  padding: 0;
  color: var(--hbm-ink);
  font-size: 1rem;
  line-height: 1.62;
  overflow-wrap: break-word;
}

body.hbm-teams-page #main-content .hbm-tm__pplist li:last-child {
  margin-bottom: 0;
}

body.hbm-teams-page #main-content .hbm-tm__pplist li::marker {
  color: var(--hbm-accent);
}

/* ------------------------------------------------------------------ *
 * 5. Photographs — one frame shape, one frame size, never upscaled.
 *
 * Card content is 992px at desktop (1080px Divi row less 2x44px padding).
 * Three 288px frames with 14px gaps make an 892px band, centred. The band
 * is deliberately narrower than the card: filling 992px would mean either
 * enlarging a 339px original by 15% or cropping much harder, and a row of
 * equal prints centred on the sheet is a contact-sheet convention rather
 * than an accident.
 *
 * The per-figure ceiling is the belt to that braces. --w / --h are the
 * file's real pixel dimensions; the ceiling is the width at which a 4:3
 * cover crop is still 1:1 or smaller — min(w, h * 4/3). The fallbacks
 * (288 / 216) mean a figure with the variables MISSING falls back to the
 * page cap rather than rendering full size: it fails closed.
 * ------------------------------------------------------------------ */
body.hbm-teams-page #main-content .hbm-tm__shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--tm-frame)));
  justify-content: center;
  justify-items: center;
  gap: var(--tm-gap);
  margin: 0;
}

body.hbm-teams-page #main-content .hbm-tm__shots figure {
  width: 100%;
  max-width: min(
    var(--tm-frame),
    calc(var(--w, 288) * 1px),
    calc(var(--h, 216) * 4 / 3 * 1px)
  );
  margin: 0;
  overflow: hidden;
  background: var(--tm-mat);
  border-radius: var(--hbm-r-md);
}

body.hbm-teams-page #main-content .hbm-tm__shots img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* 50% 42% is what .hbm-mp__shots already uses. --pos reframes one
     stubborn photograph without inventing a class for it. */
  object-position: var(--pos, 50% 42%);
  border-radius: 0;
}

/* ---- five photographs (Peter Frank) ----
   A six-column base. Each frame spans 2 (288px), so row one carries three
   and row two carries two, explicitly offset by one track so the pair is
   centred under the three. No empty cell, no orphan hanging off the left. */
body.hbm-teams-page #main-content .hbm-tm__shots--five {
  grid-template-columns: repeat(6, minmax(0, var(--tm-half)));
}

body.hbm-teams-page #main-content .hbm-tm__shots--five > figure {
  grid-column: span 2;
}

body.hbm-teams-page #main-content .hbm-tm__shots--five > figure:nth-child(4) {
  grid-column: 2 / span 2;
}

body.hbm-teams-page #main-content .hbm-tm__shots--five > figure:nth-child(5) {
  grid-column: 4 / span 2;
}

/* ---- two or four photographs (nobody yet) ----
   Here so next summer's update does not land in a three-column grid with a
   hole in it. */
body.hbm-teams-page #main-content .hbm-tm__shots--pair {
  grid-template-columns: repeat(2, minmax(0, var(--tm-frame)));
}

/* ---- one photograph (Ashley Robertson) ----
   A 250x357 portrait in a 3:4 frame, held to its own intrinsic width. On a
   phone it renders 250x333 — 1:1, a true plate rather than a soft
   enlargement. In the --aside column below it renders 220x293. Left
   aligned, because there it sits in a column of its own beside the list. */
body.hbm-teams-page #main-content .hbm-tm__shots--single {
  grid-template-columns: minmax(0, 250px);
  justify-content: start;
  justify-items: start;
}

body.hbm-teams-page #main-content .hbm-tm__shots--single figure {
  max-width: min(
    250px,
    calc(var(--w, 250) * 1px),
    calc(var(--h, 333) * 3 / 4 * 1px)
  );
}

body.hbm-teams-page #main-content .hbm-tm__shots--single img {
  aspect-ratio: 3 / 4;
}

/* ------------------------------------------------------------------ *
 * 6. The one-photograph card.
 *
 * A lone plate stranded under a two-line list looks like something went
 * missing. Set beside the list it looks composed — and it is the
 * .hbm-mp__hero arrangement from the missionary pages, brought inside the
 * card. The list is centred against the portrait so the white that is left
 * over sits above and below it rather than pooling in one corner.
 * ------------------------------------------------------------------ */
@media (min-width: 900px) {
  body.hbm-teams-page #main-content .hbm-tm__block--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas:
      "head  head"
      "pp    shots";
    gap: 0 36px;
    align-items: start;
  }

  body.hbm-teams-page #main-content .hbm-tm__block--aside .hbm-tm__head  { grid-area: head; }
  /* Top-aligned, not centred. Centring floated the Praises heading into the
     middle of the card with a hand's width of nothing above it, while on the
     other two cards Praises begins immediately under the rule. Reading down
     three cards in a row, that inconsistency is what the eye catches. */
  body.hbm-teams-page #main-content .hbm-tm__block--aside .hbm-tm__pp    { grid-area: pp; align-self: start; margin-bottom: 0; }
  body.hbm-teams-page #main-content .hbm-tm__block--aside .hbm-tm__shots { grid-area: shots; }

  /* The grid track is already setting the measure; the 62ch cap would only
     fight it. Specificity is (1,4,0) so it beats the :has() rule at (1,3,0)
     — that ordering is deliberate, not luck. Verified computed: max-width
     resolves to none here and to 62ch on the other single-list card. */
  body.hbm-teams-page #main-content .hbm-tm__block--aside .hbm-tm__pp:has(> :only-child) > * {
    max-width: none;
  }
}

/* ------------------------------------------------------------------ *
 * 7. Narrower screens.
 *
 * Breakpoints are 980 (card padding), 900 (aside on/off), 860 (three frames
 * to two) and 560 (two frames to one) — taken from where the layout
 * actually fails rather than from device names.
 * ------------------------------------------------------------------ */

@media (max-width: 980px) {
  body.hbm-teams-page #main-content .hbm-tm__block {
    padding: 26px 28px 30px;
  }
}

@media (max-width: 860px) {
  body.hbm-teams-page #main-content .hbm-tm__shots,
  body.hbm-teams-page #main-content .hbm-tm__shots--pair {
    grid-template-columns: repeat(2, minmax(0, var(--tm-frame)));
  }

  /* Four columns, frames spanning two, the fifth offset by one track so it
     is centred rather than hanging off the left edge. */
  body.hbm-teams-page #main-content .hbm-tm__shots--five {
    grid-template-columns: repeat(4, minmax(0, var(--tm-half)));
  }

  body.hbm-teams-page #main-content .hbm-tm__shots--five > figure:nth-child(4) {
    grid-column: span 2;
  }

  body.hbm-teams-page #main-content .hbm-tm__shots--five > figure:nth-child(5) {
    grid-column: 2 / span 2;
  }

  body.hbm-teams-page #main-content .hbm-tm__shots--single {
    grid-template-columns: minmax(0, 250px);
  }

  body.hbm-teams-page #main-content .hbm-tm__masthead { margin-bottom: 26px; }
}

@media (max-width: 560px) {
  body.hbm-teams-page #main-content .hbm-tm__shots,
  body.hbm-teams-page #main-content .hbm-tm__shots--pair,
  body.hbm-teams-page #main-content .hbm-tm__shots--five {
    grid-template-columns: minmax(0, var(--tm-frame));
  }

  /* The explicit column placements above would otherwise conjure a second
     implicit column and overflow the card. */
  body.hbm-teams-page #main-content .hbm-tm__shots--five > figure,
  body.hbm-teams-page #main-content .hbm-tm__shots--five > figure:nth-child(4),
  body.hbm-teams-page #main-content .hbm-tm__shots--five > figure:nth-child(5) {
    grid-column: auto;
  }

  body.hbm-teams-page #main-content .hbm-tm__shots--single {
    grid-template-columns: minmax(0, 250px);
  }

  body.hbm-teams-page #main-content .hbm-tm__block {
    margin-bottom: 20px;
    padding: 22px 18px 24px;
  }

  body.hbm-teams-page #main-content .hbm-tm__head {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  body.hbm-teams-page #main-content .hbm-tm__pp {
    gap: 20px;
    margin-bottom: 22px;
  }
}

/* ------------------------------------------------------------------ *
 * 8. Print. The board keeps these reports; printed, the navy becomes paper
 *    and a card is not allowed to break across two sheets.
 * ------------------------------------------------------------------ */
@media print {
  body.hbm-teams-page,
  body.hbm-teams-page #main-content,
  body.hbm-teams-page #main-content .et_pb_section {
    background: #fff !important;
  }

  body.hbm-teams-page #main-content .et_pb_text_inner h1.hbm-tm__title {
    color: var(--hbm-navy) !important;
  }

  body.hbm-teams-page #main-content .hbm-tm__places,
  body.hbm-teams-page #main-content .hbm-tm__asof {
    color: var(--hbm-ink);
  }

  body.hbm-teams-page #main-content .hbm-tm__block {
    border: 1px solid #c9d6e2;
    box-shadow: none;
    break-inside: avoid;
  }
}
/* ---------------------------------------------------------------------
 * The lead photograph, 2026-08-17.
 *
 * Mrs. Taylor asked for the effect her Word document has, seen on a
 * computer rather than a phone. In that file every picture is a floating
 * anchor with tight wrap: Peter Frank's lead sits at 5.16in — hard right,
 * level with his name — and Ashley Robertson's at 0.28in beside hers, with
 * the praises running around them. So the lead comes out of the band at the
 * foot of the card and floats up beside the person.
 *
 * A float rather than a grid column, because a float is what lets the list
 * wrap around it and close underneath — which is the actual effect in the
 * document, and what a grid column cannot do.
 * ------------------------------------------------------------------ */

body.hbm-teams-page #main-content .hbm-tm__lead {
  float: right;
  margin: 0 0 18px 26px;
  /* Never larger than the file itself, on the same rule the band uses. */
  width: min(300px, calc(var(--w, 300) * 1px), calc(var(--h, 225) * 4 / 3 * 1px));
  border-radius: 10px;
  overflow: hidden;
  background: #eef2f6;
  box-shadow: 0 2px 6px rgba(20, 56, 92, 0.08), 0 12px 28px rgba(20, 56, 92, 0.10);
}

body.hbm-teams-page #main-content .hbm-tm__lead img {
  display: block;
  width: 100%;
  height: auto;
}

/* The card must close below a tall float rather than letting it hang out of
   the bottom edge. */
body.hbm-teams-page #main-content .hbm-tm__block::after {
  content: "";
  display: block;
  clear: both;
}

/* The praises grid is a grid, and a grid does not wrap around a float — it
   would sit beside it and then overlap. Inside a card that carries a lead,
   the two lists become normal flow so the text can run around the picture
   and close under it, exactly as the document does. */
body.hbm-teams-page #main-content .hbm-tm__block:has(.hbm-tm__lead) .hbm-tm__pp {
  display: block;
}

body.hbm-teams-page #main-content .hbm-tm__block:has(.hbm-tm__lead) .hbm-tm__pp > * + * {
  margin-top: 22px;
}

/* Ashley has one list and one photograph, which is what --aside was for.
   With the photograph now floating, that special case is redundant. */
body.hbm-teams-page #main-content .hbm-tm__block--aside {
  display: block;
}

/* On a phone a 300px float beside a 276px column leaves no room for text, so
   it stops floating and becomes a plate above the lists. */
@media (max-width: 700px) {
  body.hbm-teams-page #main-content .hbm-tm__lead {
    float: none;
    width: min(300px, 100%, calc(var(--w, 300) * 1px));
    margin: 0 0 20px;
  }
}


/* The photo band sits below a floating lead, so its available width is what
   the float leaves rather than the card's full width — which put Ashley's
   three prints hard left while Peter Frank's sat centred. Clearing the float
   first gives every band the same full width to centre within. */
body.hbm-teams-page #main-content .hbm-tm__shots {
  clear: both;
}

/* The lead can sit on either side. Mrs. Taylor's document puts Peter Frank's
   portrait and Ashley Robertson's on the left with the text running to their
   right, and only the river photograph on the right — so the side is a
   property of the picture, not a rule of the page. */
body.hbm-teams-page #main-content .hbm-tm__lead--left {
  float: left;
  margin: 0 26px 18px 0;
}

/* A card can now carry a lead on each side, so the block must clear both. */
body.hbm-teams-page #main-content .hbm-tm__block { overflow: hidden; }

@media (max-width: 700px) {
  body.hbm-teams-page #main-content .hbm-tm__lead--left {
    float: none;
    margin: 0 0 20px;
  }
}

/* The banner sits inside Divi's text module on this page, and Divi sizes any
   h1 in there at 82px — so the shared hero rule lost and the Teams banner
   came out half again as large as the same banner everywhere else. */
body.hbm-teams-page #main-content .et_pb_text_inner h1.hbm-hero__title {
  font-size: clamp(28px, 5.2vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding-bottom: 0;
}