/* The person pages, as MassiveCMS draws them.

   Ported from the new site's stylesheets with their values unchanged:
   styles/blocks/marketing/webinar-page.css (the hero and the grid),
   person-profile.css (the profile sections), subscribe.css (the band) and the
   Medical Review Board page. Every rule is scoped under .mbp, the page's own
   wrapper, so the theme's rules for headings, links and inputs cannot reach
   in, and nothing here can reach out.

   The new site's stylesheets sit on Tailwind's base reset, which zeroes
   margins, resets headings to the body type and strips link and list styles.
   The theme does the opposite, so the reset comes first, for this page only.
   It leaves .mbp-embed alone: that is where a form from another plugin is
   placed, and it brings styles of its own. */

.mbp {
  --font-poppins: 'Poppins';
  --font-lora: 'Lora';
  font-family: var(--font-poppins), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #0f172a;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* ── Base reset, zero specificity past .mbp ── */
.mbp *:not(:where(.mbp-embed, .mbp-embed *)),
.mbp *:not(:where(.mbp-embed, .mbp-embed *))::before,
.mbp *:not(:where(.mbp-embed, .mbp-embed *))::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}
.mbp :where(h1, h2, h3, h4, h5, h6):not(:where(.mbp-embed *)) {
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}
.mbp :where(a):not(:where(.mbp-embed *)),
.mbp :where(a):not(:where(.mbp-embed *)):hover,
.mbp :where(a):not(:where(.mbp-embed *)):focus {
  color: inherit;
  text-decoration: inherit;
  box-shadow: none;
}
.mbp :where(ul, ol, menu):not(:where(.mbp-embed *)) { list-style: none; }
.mbp :where(svg, img):not(:where(.mbp-embed *)) { display: block; vertical-align: middle; }
.mbp :where(img):not(:where(.mbp-embed *)) { max-width: 100%; height: auto; }
.mbp :where(button, input):not(:where(.mbp-embed *)) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  text-transform: none;
  min-height: 0;
  height: auto;
  width: auto;
}
.mbp :where(input)::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
.mbp :where(button):not(:where(.mbp-embed *)) { cursor: pointer; appearance: button; }
.mbp :where(input[type="search"]):not(:where(.mbp-embed *)) { appearance: none; -webkit-appearance: none; }
.mbp :where(input[type="search"])::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Webinar page blocks (wb-*): hero and grid ── */

.mbp .wb { background: rgb(241, 241, 236); color: rgb(41, 37, 37); }
.mbp .wb-wrap { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

/* At least the design's height, taller when the copy needs it. The inner
   padding-top keeps the copy clear of the header that sits over the banner. */
.mbp .wb-hero { position: relative; width: 100%; min-height: 479px; overflow: hidden;
  background-color: rgb(41, 37, 37); background-position: center; background-size: cover; background-repeat: no-repeat; }
.mbp .wb-hero::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 19, 66, .30) 0%, rgba(2, 19, 66, .55) 50%, rgba(2, 19, 66, .88) 100%); z-index: 1; }
.mbp .wb-hero-inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; min-height: inherit;
  padding: 110px 32px 48px; display: flex; flex-direction: column; justify-content: flex-end; }

/* Where the photograph sits, and how dark the scrim over it goes: the author
   page's own treatment. */
.mbp .wb-hero--focal-right { background-position: 100% 50%; }
.mbp .wb-hero--scrim-author { background-color: rgb(4, 8, 30); }
.mbp .wb-hero--scrim-author::after {
  background: linear-gradient(180deg, rgba(2, 10, 35, .55) 0%, rgba(2, 10, 35, .75) 50%, rgba(2, 10, 35, .95) 100%);
}

/* ── Grid ── */
.mbp .wb-grid-sec { padding: 40px 0 80px; }
.mbp .wb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.mbp .wb-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mbp .wb-pill { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(41, 37, 37, .18); background: transparent; color: rgb(41, 37, 37); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
.mbp .wb-pill:hover { border-color: rgba(41, 37, 37, .55); }
.mbp .wb-pill.is-active { background: rgb(41, 37, 37); border-color: rgb(41, 37, 37); color: #fff; }
.mbp .wb-search { position: relative; display: flex; align-items: center; }
.mbp .wb-search svg { position: absolute; left: 16px; width: 16px; height: 16px; color: rgba(41, 37, 37, .5); pointer-events: none; }
.mbp .wb-search input { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 14px; line-height: normal; color: rgb(41, 37, 37); padding: 11px 18px 11px 42px; border-radius: 999px; border: 1px solid rgba(41, 37, 37, .18); background: #fff; min-width: 240px; outline: none; }
.mbp .wb-search input:focus { border-color: rgb(41, 37, 37); box-shadow: none; }
.mbp .wb-empty { display: none; text-align: center; padding: 56px 0; font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 16px; color: rgba(41, 37, 37, .6); }
.mbp .wb-empty.is-on { display: block; }

/* Category dropdown and search toggle. */
.mbp .wb-dd, .mbp .wb-search-toggle { display: none; }
.mbp .wb-dd { position: relative; }
.mbp .wb-dd-btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; color: rgb(41, 37, 37); background: #fff; border: 1px solid rgba(41, 37, 37, .18); border-radius: 999px; padding: 13px 20px; cursor: pointer; width: 100%; justify-content: space-between; }
.mbp .wb-dd-chev { width: 18px; height: 18px; transition: transform .2s ease; flex: none; }
.mbp .wb-dd.is-open .wb-dd-chev { transform: rotate(180deg); }
.mbp .wb-dd-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; min-width: 280px; max-width: 88vw; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); display: none; }
.mbp .wb-dd.is-open .wb-dd-menu { display: block; }
.mbp .wb-dd-menu li { position: relative; font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 16px; color: rgb(41, 37, 37); padding: 15px 16px 15px 46px; border-radius: 14px; cursor: pointer; }
.mbp .wb-dd-menu li::before { content: '\2713'; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 700; color: #00147f; opacity: 0; }
.mbp .wb-dd-menu li.is-sel { font-weight: 600; }
.mbp .wb-dd-menu li.is-sel::before { opacity: 1; }
.mbp .wb-dd-menu li:hover { background: #f3f3f1; }
/* The filter as a menu at every width: an author writes in enough categories
   that a row of pills would run the width of the page. */
.mbp .wb-toolbar--menu .wb-filters { display: none; }
.mbp .wb-toolbar--menu .wb-dd { display: block; flex: 0 1 auto; order: 1; min-width: 280px; }

.mbp .wb-search-toggle { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(41, 37, 37, .18); background: #fff; color: rgb(41, 37, 37); cursor: pointer; align-items: center; justify-content: center; flex: none; }
.mbp .wb-search-toggle svg { width: 18px; height: 18px; }
.mbp .wb-search-toggle .wb-ic-x { display: none; }
.mbp .wb-toolbar.search-open .wb-search-toggle .wb-ic-search { display: none; }
.mbp .wb-toolbar.search-open .wb-search-toggle .wb-ic-x { display: inline; }
.mbp .wb-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; column-gap: 24px; row-gap: 30px; margin: 0; padding: 0; list-style: none; }
.mbp .wb-card { padding: 0; box-sizing: border-box; display: block; text-decoration: none; color: rgb(41, 37, 37); cursor: pointer; transition: opacity .2s ease; }
.mbp .wb-card:hover, .mbp .wb-card:focus-visible { opacity: .7; outline: none; color: rgb(41, 37, 37); }
.mbp .wb-thumb { position: relative; width: 100%; aspect-ratio: 4/3; background-color: rgb(41, 37, 37);
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; margin-bottom: 16px; }
.mbp .wb-title { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 20px; font-weight: 500;
  line-height: 30px; letter-spacing: -0.2px; color: rgb(41, 37, 37); margin: 0; text-align: left; }
.mbp .wb-date { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 12px; font-weight: 600;
  line-height: 18px; letter-spacing: 1.1px; text-transform: uppercase; color: rgb(41, 37, 37); margin: 10px 0 0; }

/* A list between a choice and the page it loads. */
@keyframes mbpwbpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.mbp .wb[aria-busy="true"] .wb-grid, .mbp .wb[aria-busy="true"] .wb-pager { animation: mbpwbpulse 1.1s ease-in-out infinite; pointer-events: none; }

/* Responsive, with the handoffs' inclusive widths. */
@media (width <= 1200px) {
  .mbp .wb-filters { display: none; }
  .mbp .wb-dd { display: block; flex: 1 1 auto; order: 1; }
  .mbp .wb-search-toggle { display: inline-flex; order: 2; }
  .mbp .wb-search { display: none; flex: 1 1 auto; order: 1; }
  .mbp .wb-toolbar.search-open .wb-dd { display: none; }
  .mbp .wb-toolbar.search-open .wb-search { display: flex; }
  .mbp .wb-toolbar.search-open .wb-search input { width: 100%; min-width: 0; }
}
@media (width <= 64rem) {
  .mbp .wb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (width <= 600px) {
  .mbp .wb-wrap, .mbp .wb-hero-inner { padding-left: 20px; padding-right: 20px; }
  .mbp .wb-hero-inner { padding-top: 96px; }
  .mbp .wb-grid { grid-template-columns: 1fr; }
  .mbp .wb-card { min-height: auto; }
  .mbp .wb-hero { min-height: 360px; }
  .mbp .wb-search input { font-size: 16px; padding: 14px 18px 14px 46px; }
}

/* Pagination: real links. */
.mbp .wb-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 32px 0 8px; }
.mbp .wb-pager a, .mbp .wb-pager span.is-dis { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 14px; font-weight: 500; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: #f2f2f2; color: rgb(41, 37, 37); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.mbp .wb-pager a:hover:not(.is-active) { border-color: rgba(41, 37, 37, .5); color: rgb(41, 37, 37); }
.mbp .wb-pager a.is-active { background: rgb(41, 37, 37); border-color: rgb(41, 37, 37); color: #fff; }
.mbp .wb-pager span.is-dis { opacity: .35; cursor: default; }
.mbp .wb-ellipsis { padding: 0 4px; color: rgba(41, 37, 37, .5); }

/* ── The person's card in the hero (au-*) ── */
.mbp .au-inner { justify-content: flex-end; }
.mbp .au-card { display: flex; align-items: center; gap: 28px; padding-bottom: 44px; }
/* A background rather than an <img>: the design crops it to a circle and the
   name beside it already identifies the person. */
.mbp .au-photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  flex: none;
  background-position: center top;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.5);
}
.mbp .au-name { font-size: 44px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: #ffffff; margin: 0; }
.mbp .au-role { font-size: 19px; line-height: 1.5; color: #ffffff; margin: 6px 0 0; }

@media (width <= 700px) {
  .mbp .au-card { flex-direction: column; align-items: flex-start; gap: 18px; }
  .mbp .au-name { font-size: 34px; }
}

/* The floor is on the inner as well, so justify-content has room to stand
   the card at the bottom while a long line can still grow the box. */
.mbp .wb-hero.has-author { height: auto; min-height: 479px; }
.mbp .wb-hero.has-author .wb-hero-inner { min-height: 479px; padding-top: 104px; }
@media (width <= 700px) {
  .mbp .wb-hero.has-author { min-height: 360px; }
  .mbp .wb-hero.has-author .wb-hero-inner { min-height: 360px; padding-top: 92px; }
}

/* The credentials line and the social row. */
.mbp .au-creds {
  font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 12px 0 0;
}
.mbp .au-social { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; flex-wrap: wrap; }
.mbp .au-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}
.mbp .au-social a:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); color: #ffffff; }
.mbp .au-social a.is-primary { background: #ffffff; border-color: #ffffff; color: rgb(20, 24, 43); font-weight: 600; }
.mbp .au-social a.is-primary:hover { background: rgb(236, 236, 236); border-color: rgb(236, 236, 236); color: rgb(20, 24, 43); }
.mbp .au-social a.is-icon { width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
.mbp .au-social a.is-icon svg { width: 17px; height: 17px; }
.mbp .au-social svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Impreza's header is fixed over the top of the page and gives its height
   as --header-height; its own sections start below it, and the people pages
   do the same, so the breadcrumb is never under it. */
.l-header.pos_fixed ~ .l-main.mbp { padding-top: var(--header-height, 0px); }
.l-header.pos_fixed ~ .l-main.mbp.mbp-board { padding-top: calc(var(--header-height, 0px) + 48px); }

/* ── Breadcrumb (MassiveCMS: components/breadcrumb.tsx) ──
   A white pill. It carries its own surface, so the one look reads on the
   grey band above a person's banner and on a white page alike. The radius is
   half the height of one line: a trail on one line is a pill, one that wraps
   on a phone is a rounded box. The last step is dark, the rest grey, the
   separators lighter still. */
.mbp .mbp-crumbs { display: flex; width: fit-content; max-width: 100%; border-radius: 17px; border: 1px solid oklch(92.8% 0.006 264.531); background: #fff; padding: 6px 18px; font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 13px; line-height: 19px; }
.mbp .mbp-crumbs ol { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; row-gap: 2px; }
/* The theme sets its own type on links and list items; the pill's is the one that counts. */
.mbp .mbp-crumbs :where(ol, li, a, span) { font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; }
.mbp .mbp-crumbs li { display: flex; align-items: center; }
.mbp .mbp-crumbs .mbp-crumbs-step { color: oklch(55.1% 0.027 264.364); text-underline-offset: 3px; transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.mbp .mbp-crumbs a.mbp-crumbs-step:hover { color: oklch(21% 0.034 264.665); text-decoration: underline; }
.mbp .mbp-crumbs .mbp-crumbs-here { color: oklch(21% 0.034 264.665); font-weight: 600; }
.mbp .mbp-crumbs .mbp-crumbs-sep { margin: 0 8px; color: oklch(70.7% 0.022 261.325); }

/* A person page's breadcrumb, above the banner and in the hero's column:
   the pill starts where the photo does. */
.mbp .wb-trail { max-width: 1440px; margin: 0 auto; padding: 24px 32px 12px; }
.mbp .wb-trail--profile { max-width: 1104px; }
@media (width <= 600px) {
  .mbp .wb-trail { padding: 16px 20px 8px; }
}

/* The All Authors page's breadcrumb, above its hero, spaced as the new site
   spaces a template page's lifted trail. Under it the hero no longer starts
   behind the header, so it gives up that part of its top padding (MassiveCMS:
   cp-page.css, 150px or 120px less the 63px header). */
.mbp .mbp-trail-block { max-width: 1600px; margin: 0 auto; padding: 16px 1rem 8px; }
@media (width >= 40rem) { .mbp .mbp-trail-block { padding: 24px 1.5rem 12px; } }
@media (width >= 64rem) { .mbp .mbp-trail-block { padding-left: 2rem; padding-right: 2rem; } }
.mbp .mbp-trail-block + .cp .cp-hero { padding-top: 87px; }
@media (width <= 760px) {
  .mbp .mbp-trail-block + .cp .cp-hero { padding-top: 57px; }
}

/* The profile's narrower column and larger portrait. */
.mbp .wb-hero--profile .wb-hero-inner { max-width: 1104px; }
.mbp .wb-hero--profile .au-card { gap: 32px; }
.mbp .wb-hero--profile .au-photo { width: 148px; height: 148px; }
@media (width <= 700px) {
  .mbp .wb-hero--profile .au-photo { width: 112px; height: 112px; }
  .mbp .wb-hero--profile .au-name { font-size: 32px; }
  .mbp .wb-hero--profile .au-card { gap: 18px; }
}

/* Initials rather than a blank circle. */
.mbp .au-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.18);
  font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #ffffff;
}
.mbp .wb-hero--profile .au-photo--initials { font-size: 46px; }
@media (width <= 700px) {
  .mbp .au-photo--initials { font-size: 34px; }
  .mbp .wb-hero--profile .au-photo--initials { font-size: 32px; }
}

/* ── The profile sections (pp-*, dp-*) ── */
.mbp .pp-section { background: #ffffff; padding: 80px 0 64px; }
.mbp .pp-container { max-width: 1104px; margin: 0 auto; padding: 0 32px; }
.mbp .pp-body {
  max-width: none;
  font-size: clamp(16px, 15px + 0.3vw, 18px);
  line-height: 1.6;
  color: #000000;
}
.mbp .pp-body p { margin: 0 0 18px; }
.mbp .pp-body ul { list-style: disc; padding-left: 20px; margin: 0 0 22px; }
.mbp .pp-body li { margin-bottom: 10px; }
.mbp .pp-body strong { color: #111111; font-weight: 700; }
.mbp .pp-body a { color: inherit; }
.mbp .dp-sec { margin: 0 0 36px; }
.mbp .dp-sec:last-child { margin-bottom: 0; }
.mbp .pp-body .dp-label,
.mbp .dp-label {
  font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #111111;
  margin: 0 0 12px;
}
/* Education runs as tight lines: each is a label and a place, not prose. */
.mbp .dp-edu p:not(.dp-label) { margin: 0 0 9px; font-size: 16px; line-height: 1.55; }

/* The note that closes the page, for somebody who sits on the review board. */
.mbp .dp-note { max-width: 1104px; margin: 0 auto; padding: 0 32px 96px; }
.mbp .dp-note-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgb(244, 246, 249);
  border-radius: 14px;
  padding: 26px 30px;
  font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: #333333;
}
.mbp .dp-note-ic { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; color: #111111; }
.mbp .dp-note-inner p { margin: 0; }
.mbp .dp-note-inner a { color: #111111; font-weight: 700; text-decoration: none; }
.mbp .dp-note-inner a:hover { color: #111111; text-decoration: underline; text-underline-offset: 3px; }
@media (width <= 860px) {
  .mbp .pp-section { padding: 56px 0; }
  .mbp .pp-container { padding: 0 20px; }
  .mbp .dp-note { padding: 0 20px 64px; }
}

/* ── The subscribe band ── */
.mbp .subscribe-section { background: #000000; color: #ffffff; padding: 96px 32px; }
.mbp .subscribe-container { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.mbp .subscribe-title { font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: #ffffff; max-width: 520px; margin: 0; }
@media (width < 64rem) {
  .mbp .subscribe-container { grid-template-columns: 1fr; gap: 40px; }
}
@media (width < 40rem) {
  .mbp .subscribe-section { padding: 56px 20px; }
}

/* ── The Medical Review Board ── */
.mbp.mbp-board { max-width: 1280px; margin: 0 auto; padding: 48px 16px; }
@media (width >= 40rem) { .mbp.mbp-board { padding-left: 24px; padding-right: 24px; } }
@media (width >= 64rem) { .mbp.mbp-board { padding-left: 32px; padding-right: 32px; } }
.mbp .mbp-board-crumbs { margin-bottom: 32px; }
.mbp .mbp-board-head { max-width: 768px; margin-bottom: 48px; }
.mbp .mbp-board-head h1 { margin-bottom: 12px; font-size: 36px; line-height: 40px; font-weight: 700; color: oklch(21% 0.034 264.665); }
.mbp .mbp-board-head p { font-size: 18px; line-height: 1.625; color: oklch(55.1% 0.027 264.364); }
.mbp .mbp-board-none { color: oklch(70.7% 0.022 261.325); }
.mbp .mbp-board-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (width >= 40rem) { .mbp .mbp-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 64rem) { .mbp .mbp-board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mbp .mbp-rcard {
  display: flex;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid oklch(96.7% 0.003 264.542);
  background: #ffffff;
  padding: 20px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mbp .mbp-rcard:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.mbp .mbp-rcard-img { width: 80px; height: 80px; flex-shrink: 0; align-self: flex-start; border-radius: 12px; object-fit: cover; }
.mbp .mbp-rcard-initials { display: flex; width: 80px; height: 80px; flex-shrink: 0; align-self: flex-start; align-items: center; justify-content: center; border-radius: 12px; background: oklch(96.8% 0.007 247.896); font-size: 20px; line-height: 28px; font-weight: 700; color: oklch(70.4% 0.04 256.788); }
.mbp .mbp-rcard-body { display: flex; min-width: 0; flex: 1 1 0%; flex-direction: column; }
.mbp .mbp-rcard-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 48px; font-size: 16px; font-weight: 600; line-height: 24px; color: oklch(21% 0.034 264.665); transition: color .15s cubic-bezier(0.4, 0, 0.2, 1); }
.mbp .mbp-rcard:hover .mbp-rcard-name { color: oklch(48.8% 0.243 264.376); }
.mbp .mbp-rcard-pos { margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; font-size: 13px; line-height: 18px; color: oklch(55.1% 0.027 264.364); }
.mbp .mbp-rcard-foot { margin-top: auto; display: flex; min-height: 20px; align-items: flex-end; padding-top: 12px; }
.mbp .mbp-rcard-role { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; background: oklch(96.8% 0.007 247.896); padding: 2px 10px; font-size: 11px; line-height: 16px; font-weight: 500; color: oklch(44.6% 0.043 257.281); }

/* ── The All Authors page: the photo hero (cp-hero) ── */
.mbp .cp { color: #14182b; }
.mbp .cp-hero { position: relative; background: linear-gradient(180deg, #9fb3e6 0%, #c4d0ef 18%, #e7ecf8 38%, #fff 62%); padding: 150px 0 64px; text-align: center; overflow: hidden; }
.mbp .cp-hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.mbp .cp-hero-h1 { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: clamp(38px, 5.4vw, 68px); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; color: #0b1020; margin: 0 auto; max-width: 18ch; }
.mbp .cp-hero-h1 em { font-family: var(--font-lora), 'Lora', Georgia, serif; font-style: italic; font-weight: 500; }
.mbp .cp-hero-lede { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.55; font-weight: 400; color: #0b1020; margin: 26px auto 0; max-width: 880px; }
.mbp .cp-hero-lede a { text-decoration: underline; }
.mbp .cp-hero--photo { padding: 200px 0 110px; background: linear-gradient(180deg, rgba(4, 8, 20, .92) 0%, rgba(5, 17, 52, .86) 45%, rgba(9, 30, 95, .96) 100%); }
.mbp .cp-hero--photo .cp-hero-h1 { color: #fff; }
.mbp .cp-hero--photo .cp-hero-lede { color: #fff; text-shadow: 0 2px 16px rgba(2, 6, 20, .65); }
@media (width <= 600px) {
  .mbp .cp-hero--photo { padding: 148px 0 72px; }
  .mbp .cp-hero--photo .cp-hero-inner { padding: 0 20px; }
}

/* ── The All Authors grid (al-*) ── */
.mbp .al-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 28px; margin: 0; padding: 0; list-style: none; }
.mbp .al-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid rgba(41, 37, 37, 0.12); border-radius: 16px; padding: 28px; color: rgb(41, 37, 37); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.mbp .al-card:hover { border-color: rgba(41, 37, 37, 0.34); box-shadow: 0 14px 34px -20px rgba(41, 37, 37, 0.45); }
.mbp .al-head { display: flex; align-items: center; gap: 16px; }
/* A background image, or the initials when there is no photograph. */
.mbp .al-avatar { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background-color: rgb(41, 37, 37); background-size: cover; background-position: 50% 20%; background-repeat: no-repeat; flex: 0 0 auto; font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: 0.5px; color: #ffffff; }
.mbp .al-id { min-width: 0; }
.mbp .al-name { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 19px; font-weight: 500; line-height: 26px; letter-spacing: -0.2px; color: rgb(41, 37, 37); margin: 0; }
.mbp .al-name a { color: inherit; text-decoration: none; }
.mbp .al-name a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Every card the same shape: each line holds its place whether or not it has
   anything in it, and the role is held to one line. */
.mbp .al-role { font-family: var(--font-lora), 'Lora', Georgia, serif; font-size: 15px; font-style: italic; line-height: 21px; color: rgba(41, 37, 37, 0.9); margin: 4px 0 0; min-height: 21px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* Three lines, then "more". */
.mbp .al-bio-wrap { position: relative; margin: 18px 0 0; }
.mbp .al-bio { position: relative; font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; color: rgba(41, 37, 37, 0.78); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.55em); }
.mbp .al-bio-wrap.is-open .al-bio { display: block; -webkit-line-clamp: unset; min-height: 0; }
.mbp .al-bio-more { display: none; position: absolute; right: 0; bottom: 0; background: #ffffff; border: 0; padding: 0 0 0 6px; margin: 0; font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 15px; line-height: 1.55; font-weight: 600; color: rgb(41, 37, 37); cursor: pointer; }
/* The fade that lets the word sit on top of the third line. */
.mbp .al-bio-more::before { content: ""; position: absolute; left: -30px; top: 0; bottom: 0; width: 30px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 70%); pointer-events: none; }
.mbp .al-bio-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.mbp .al-bio-more.is-on { display: inline-block; }
.mbp .al-bio-wrap.is-open .al-bio-more { position: static; display: inline; padding: 0; margin-left: 5px; vertical-align: baseline; }
.mbp .al-bio-wrap.is-open .al-bio-more::before { display: none; }
/* Pinned to the foot, so the meta lines up across a row. */
.mbp .al-meta { font-family: var(--font-poppins), 'Poppins', system-ui, sans-serif; font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(41, 37, 37, 0.62); margin: auto 0 0; padding-top: 20px; min-height: 38px; }
.mbp .al-card.wb-hidden { display: none; }
@media (width <= 1024px) {
  .mbp .al-grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
}
@media (width <= 600px) {
  .mbp .al-grid { grid-template-columns: 1fr; }
  .mbp .al-card { padding: 22px; }
  .mbp .al-avatar { width: 64px; height: 64px; font-size: 20px; }
  .mbp .al-bio { font-size: 14.5px; }
}