/* ------------------------------------------------------------------
   Contributor pages: /contributors/{name}/ (WordPress's author archive,
   restyled) and the parts of the Team page that come from user profiles.
   Prefixed `hbcp-`; scoped to `.hbcp` so nothing else is affected.
   Design language follows the Team page: a midnight slab with a Blend
   Field, a cream "print" holding the portrait, champagne labels, and the
   Inter / IBM Plex Mono / Syncopate pairing from base.css.
   ------------------------------------------------------------------ */

.hbcp { color: var(--ink); }

/* ---------- hero ---------- */
.hbcp .hbcp-hero { padding: 16px 0 0; }

.hbcp .hbcp-hero .hb-slab.ink { padding: clamp(72px, 7vw, 100px) 0 clamp(64px, 6vw, 92px); overflow: clip; }

.hbcp .hbcp-hero-field { position: absolute; inset: 0 0 auto 0; height: min(78%, 760px); z-index: 0; pointer-events: none; }

.hbcp .hbcp-hero-wrap { position: relative; z-index: 1; }

.hbcp .hbcp-crumbs { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }

.hbcp .hbcp-crumbs a { color: var(--champagne); text-decoration: none; }

.hbcp .hbcp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.hbcp .hbcp-crumbs span[aria-hidden] { color: var(--stone); }

.hbcp .hbcp-hero-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 4.4vw, 64px); align-items: center; margin-top: clamp(28px, 3.4vw, 44px); }

/* the print: same cream plate as the Team page portraits */
.hbcp .hbcp-plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-width: 352px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(211, 186, 136, 0.38);
  background:
    radial-gradient(56% 80% at 50% 28%, rgba(251, 249, 244, 0.96) 0%, rgba(251, 249, 244, 0) 72%),
    linear-gradient(180deg, #f2ebde 0%, #ebdfc9 56%, #dfcaa4 100%);
}

.hbcp .hbcp-plate::before { content: ""; position: absolute; inset: 14px; z-index: 1; border-radius: 10px; border: 1px solid rgba(31, 42, 55, 0.15); pointer-events: none; }

.hbcp .hbcp-plate .hb-field { inset: 4% -2% 0 -2%; z-index: 0; }

.hbcp .hbcp-plate-n { position: absolute; z-index: 3; top: 28px; left: 30px; font-family: var(--mono); font-weight: 500; font-size: 12.5px; line-height: 1; letter-spacing: 0.12em; color: var(--slate-deep); }

.hbcp .hbcp-plate .hbtf-portrait {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 20px 26px rgba(11, 13, 16, 0.16));
}

.hbcp .hbcp-plate .hbtf-initials {
  position: absolute;
  z-index: 2;
  inset: auto 0 8% 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 9vw, 104px);
  letter-spacing: 0.06em;
  color: var(--slate-deep);
  opacity: 0.82;
}

/* ---------- intro copy ---------- */
.hbcp .hbcp-intro .hb-eyebrow { color: var(--champagne); }

.hbcp .hbcp-intro .hb-eyebrow:before { content: none; }

.hbcp .hbcp-intro .hb-h1 { margin-top: 18px; color: var(--paper); }

.hbcp .hbcp-role { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); }

.hbcp .hbcp-role::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.hbcp .hbcp-lede { margin-top: 20px; max-width: 46ch; color: var(--mist); font-size: 18px; line-height: 1.62; }

.hbcp .hbcp-lede p + p { margin-top: 12px; }

.hbcp .hbcp-actions { margin-top: 28px; }

.hbcp .hbcp-actions .hb-btn { min-height: 48px; }

.hbcp .hbcp-expertise { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding: 0; list-style: none; }

.hbcp .hbcp-expertise li { padding: 6px 12px; border: 1px solid var(--line-dark-strong); border-radius: 999px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mist); }

/* ---------- background ---------- */
.hbcp .hbcp-bio { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(28px, 4vw, 72px); align-items: start; }

.hbcp .hbcp-bio .hb-eyebrow { color: var(--champagne); }

.hbcp .hbcp-bio .hb-h2 { margin-top: 18px; max-width: 16ch; }

.hbcp .hbcp-bio-body { max-width: 62ch; color: var(--slate); font-size: 17.5px; line-height: 1.68; }

.hbcp .hbcp-bio-body p + p { margin-top: 18px; }

/* ---------- articles ---------- */
.hbcp .hbcp-articles-sec .hb-eyebrow { color: var(--champagne); }

.hbcp .hbcp-articles-sec .hb-h2 { margin-top: 18px; }

.hbcp .hbcp-list { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--stone); }

.hbcp .hbcp-list li { border-bottom: 1px solid rgba(166, 168, 172, 0.42); }

.hbcp .hbcp-list a { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 0; color: inherit; text-decoration: none; transition: background-color var(--t-respond) var(--ease); }

.hbcp .hbcp-list a:hover { background: rgba(232, 220, 200, 0.36); }

.hbcp .hbcp-list a:hover .hbcp-list-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.hbcp .hbcp-list-body { display: grid; gap: 6px; min-width: 0; }

.hbcp .hbcp-list-title { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }

.hbcp .hbcp-list-dek { color: var(--slate); font-size: 15.5px; line-height: 1.5; }

.hbcp .hbcp-list-meta { display: inline-flex; align-items: center; gap: 14px; flex: none; padding-top: 3px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-deep); }

/* ---------- closing slab (reuses the About/Team .hbco-close layout) ---------- */
.hbcp .hbcp-close-sec { padding-top: 0; }

.hbcp .hbcp-close-sec .hb-slab { overflow: clip; }

.hbcp .hbcp-close-sec .hbcp-hero-field { height: 130%; }

.hbcp .hbcp-close-sec .hbco-close .hb-eyebrow:before { content: none; }

.hbcp .hbcp-close-sec .hbco-close .hb-eyebrow { color: var(--champagne); }

/* ---------- focus visibility ---------- */
.hbcp a:focus-visible, .hbtf-founder a:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 4px; }

/* ---------- team cards built from user profiles (inc/contributors.php) ---------- */
.hbco-team .hbtf-plate-link { display: block; color: inherit; text-decoration: none; }

.hbco-team .hbtf-plate { margin: 0; }

.hbco-team .hbtf-name a { color: inherit; text-decoration: none; }

.hbco-team .hbtf-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.hbco-team .hbtf-profile { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne); text-decoration: none; }

.hbco-team .hbtf-profile:hover { text-decoration: underline; text-underline-offset: 4px; }

.hbco-team .hbtf-initials { position: absolute; z-index: 2; inset: auto 0 8% 0; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(56px, 7vw, 92px); letter-spacing: 0.06em; color: var(--slate-deep); opacity: 0.82; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hbcp .hbcp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }

  .hbcp .hbcp-plate { max-width: 300px; aspect-ratio: 1 / 1; }

  .hbcp .hbcp-bio { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 639px) {
  .hbcp .hbcp-hero .hb-slab.ink { padding: 56px 0 48px; }

  .hbcp .hbcp-plate { max-width: none; }

  .hbcp .hbcp-lede { font-size: 17px; }

  .hbcp .hbcp-list-title { font-size: 17.5px; }

  .hbcp .hbcp-list a { flex-direction: column; gap: 10px; }
}