/* ============================================================
   FLIBBRATI SINGLE — page-specific CSS

   Lifted verbatim (modulo de-indent) from locked canonical
   `flibbr-design-mockup-final-single-flibbrati-profile.html`
   lines 2495-2776 (the profile-* family block).

   Loaded conditionally via flibbr_enqueue_assets() when the
   request is is_singular('flibbrati'). Depends on
   flibbr-page-chassis (page-chassis.css) — specifically the
   .page-prose base, which this file extends with .is-profile.

   Shared families (.dispatch-card, .author-portrait + 16
   gradients, .visually-hidden) live in base.css (op-learning #16).

   v0.5.46 — created. Reference:
     flibbr-design-mockup-final-single-flibbrati-profile.html
   ============================================================ */

/* ----------------------------------------------------------
   PROFILE HEADER — name, hero portrait, role, discipline meta

   The header IS the byline — there's no separate byline strip
   because the profile is what the article's About-the-Author
   block becomes when given the run of a whole page.

   Layout: kicker + h1 + role italic + discipline-meta strip on
   the left; hero portrait on the right. Stacks on mobile.

   Hero portrait scale: 4:5 at 300px desktop. One notch above
   the archive card's portrait (which sits at ~280-320px wide
   inside its card container). The aim is "expanded card", not
   "magazine cover" — 360px tested first, felt grandstanding.
---------------------------------------------------------- */
.profile-header {
  padding-block: var(--s-9) var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.profile-header-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 880px) {
  .profile-header-grid {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
}
.profile-header-text {
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.profile-header-kicker {
  font-family: var(--sans); font-weight: 600;
  font-size: 12px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.profile-header-kicker .sep {
  color: var(--ink-quiet);
  margin-inline: var(--s-2);
  font-weight: 400;
}
.profile-header-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  max-width: 18ch;
}
.profile-header-role {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.4;
  color: var(--ink-quiet);
  margin: 0;
  max-width: 36ch;
}


/* Discipline-meta strip — three items, pipe-separated.
   Inherits the live-site convention from the locked Flibbrati
   archive (discipline kicker + role line) but stretches across
   three meta items: discipline, location, time-in-craft.
---------------------------------------------------------- */
.profile-meta-strip {
  display: flex; flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-quiet);
}
.profile-meta-strip .item-label {
  color: var(--accent);
  margin-right: var(--s-1);
}
.profile-meta-strip .item + .item::before {
  content: "·";
  margin-right: var(--s-3);
  color: var(--ink-quiet);
  font-weight: 400;
}


/* Hero portrait — 4:5 at 300px desktop, fluid on mobile.
   Reuses .author-portrait base + gradient class (.sk for Subbu)
   from the lifted dispatch-archive family. Initials sized up
   to 36px to match the scale (archive cards use ~24px).
---------------------------------------------------------- */
.profile-hero-portrait {
  width: 300px;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  justify-self: end;
}
@media (max-width: 880px) {
  .profile-hero-portrait {
    width: 240px;
    justify-self: start;
  }
}
.profile-hero-portrait .portrait-initials {
  font-size: 36px;
}

/* v0.5.94: real-image sizing inside the hero portrait wrapper. The <img>
   was introduced via single-flibbrati.php at v0.5.46 but the matching
   sizing rule was deferred. Without it the img falls back to intrinsic
   1200×1500 dimensions and overflows the 300px wrapper, producing the
   cropping bug. Mirrors the archive .flibbrati-portrait rule. */
.profile-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* ----------------------------------------------------------
   PROFILE BIO — long-form prose

   Inherits .page-prose chassis with new .is-profile modifier.
   The modifier:
     - Tunes the lede to a slightly louder serif register
       (calmer than .is-article's 21px, but louder than legal).
     - Caps prose measure at 64ch — biography reads denser than
       essay; a tighter measure helps.
   Everything else (paragraph spacing, link grammar, ul/ol)
   comes from the chassis. No pull-quote variant — profiles
   don't pull-quote themselves.
---------------------------------------------------------- */
.profile-body {
  padding-block: var(--s-8) var(--s-9);
}
.page-prose.is-profile {
  max-width: 64ch;
}
.page-prose.is-profile p.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
}


/* ----------------------------------------------------------
   PROFILE TRAIL — wrapper for each of the three trail blocks
   (Dispatch, case-credits empty-state, Elsewhere).

   Each trail has its own kicker + headline header pattern,
   followed by the trail content. Quiet section break above
   each trail to separate them from the bio body and from
   each other.
---------------------------------------------------------- */
.profile-trail {
  padding-block: var(--s-8);
  border-top: 1px solid var(--rule);
}
.profile-trail-header {
  display: flex; align-items: baseline; gap: var(--s-5);
  margin-bottom: var(--s-7);
  flex-wrap: wrap;
}
.profile-trail-kicker {
  font-family: var(--sans); font-weight: 600;
  font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.profile-trail-headline {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.profile-trail-headline em { font-style: italic; }


/* Dispatch trail — 3-up grid of .dispatch-card on desktop,
   2-up tablet, 1-up mobile. With six pieces, this is a
   6-card grid in two rows desktop / three rows tablet /
   six rows mobile.
---------------------------------------------------------- */
.profile-trail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7) var(--s-6);
}
@media (max-width: 1080px) {
  .profile-trail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .profile-trail-grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}


/* Empty-state trail — case study credits.

   The locked work archive doesn't credit individual Flibbrati
   on the cards (it credits Flibbr collectively). Rather than
   fabricate a credit list, the empty state IS the design.
   A single italic line explains the convention and points to
   the Work archive. The pattern works for every Flibbrati,
   not just the credited leads — quiet, honest, no orphan.
---------------------------------------------------------- */
.profile-credits-empty {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}
.profile-credits-empty a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color var(--motion-duration-content) var(--motion-ease-content);
}
.profile-credits-empty a:hover {
  border-bottom-color: var(--accent);
}


/* Elsewhere trail — single line, italic, accent-link.
   For Flibbrati who have parallel ventures (Subbu → Subuism).
   ACF field auto-hides this trail when the field is empty.
---------------------------------------------------------- */
.profile-elsewhere-line {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
.profile-elsewhere-line a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color var(--motion-duration-content) var(--motion-ease-content);
}
.profile-elsewhere-line a:hover {
  color: var(--accent);
}


/* ----------------------------------------------------------
   PROFILE COLOPHON — quiet closing, mirrors archive endings
---------------------------------------------------------- */
.profile-colophon {
  padding-block: var(--s-8) var(--s-7);
  border-top: 1px solid var(--rule);
}
.profile-colophon-line {
  font-family: var(--serif); font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-quiet);
  text-align: center;
  margin: 0;
  max-width: 56ch;
  margin-inline: auto;
}
.profile-colophon-line a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color var(--motion-duration-content) var(--motion-ease-content);
}
.profile-colophon-line a:hover {
  border-bottom-color: var(--accent);
}