/* ───────────────────────────────────────────────────────────
   Birmingham Men's Health — team biography page (bio.php)
   Light / high-key treatment. Everything scoped under .profile so
   it never collides with site.css. Built on the brand tokens.
   The hero portrait is multiply-washed onto sand — upload headshots
   on a plain WHITE / light background and the white keys straight out.
   ─────────────────────────────────────────────────────────── */

.profile{
  --p-paper:#FCFAF5;
  --p-sand:#F5F0E7;
  --p-sand-2:#EEE7DA;
  --p-sage-tint:#E7EDE8;
  --p-line:#E4DBCB;
  --p-forest:#254E42;
  --p-forest-soft:#3E6B5C;
  --p-clay:#C96F44;
  --p-clay-text:#A24E2A;   /* AA-safe clay for small text on light */
  --p-clay-ink:#7A3E1E;
  --p-clay-soft:#E7B999;
  --p-sage:#8FA99A;
  --p-ink:#463A2E;
  --p-ink-soft:#7C6E5F;
  --p-ink-faint:#A79A88;
  --p-head:var(--bmh-head, "Hanken Grotesk", system-ui, sans-serif);
  --p-body:var(--bmh-body, "Inter", system-ui, sans-serif);
  --p-measure:60ch;

  background:var(--p-sand); color:var(--p-ink); font-family:var(--p-body);
  line-height:1.68; overflow-x:hidden;
}
.profile *{box-sizing:border-box;}
.profile .wrap{max-width:1160px; margin:0 auto; padding:0 clamp(1.3rem,4vw,3.2rem);}
.profile h1,.profile h2,.profile h3{font-family:var(--p-head); line-height:1.06; color:var(--p-forest); font-weight:700; margin:0;}
.profile a{color:inherit;}
.profile .eyebrow{font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--p-clay-text);}

/* back link */
.profile .p-top .wrap{display:flex; align-items:center; height:44px;}
.profile .back{display:inline-flex; align-items:center; gap:.45rem; font-size:.86rem; color:var(--p-ink-soft); text-decoration:none;}
.profile .back:hover{color:var(--p-clay-text);}
.profile .back i{font-size:1.05rem;}

/* HERO — washed portrait */
.profile .hero{position:relative; overflow:hidden; min-height:clamp(420px,54vh,560px); display:flex; align-items:center; padding:1rem 0;}
.profile .hero-photo{position:absolute; right:0; top:0; bottom:0; width:min(60%,760px); z-index:1;}
.profile .hero-photo img{width:100%; height:100%; object-fit:cover; object-position:44% 12%;
  filter:grayscale(1) brightness(1.2) contrast(.9); mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(115% 96% at 50% 40%, #000 42%, transparent 80%);
          mask-image:radial-gradient(115% 96% at 50% 40%, #000 42%, transparent 80%);}
.profile .hero-photo::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--p-sand) 8%, rgba(245,240,231,.22) 30%, transparent 56%, transparent 74%, var(--p-sand) 98%),
    linear-gradient(0deg, var(--p-sand) 4%, transparent 48%),
    radial-gradient(84% 100% at 48% 34%, transparent 50%, var(--p-sand) 84%);}
.profile .hero-photo .tint{position:absolute; inset:0; background:var(--p-sage); mix-blend-mode:color; opacity:.12;}
.profile .hero .wrap{position:relative; z-index:2; width:100%;}
.profile .hero-content{width:min(52%,560px);}
.profile .hero .eyebrow{display:inline-flex; align-items:center; gap:.7rem;}
.profile .hero .kicker{color:var(--p-ink-faint); padding-right:.7rem; border-right:1px solid var(--p-line); font-variant-numeric:tabular-nums;}
.profile .hero h1{font-size:clamp(3rem,7vw,5.4rem); letter-spacing:-.03em; margin:1rem 0 0; text-wrap:balance;}
.profile .hero h1 .ln{display:block;}
.profile .hero .role{font-family:var(--p-head); font-weight:500; font-size:clamp(1.05rem,2.1vw,1.4rem); color:var(--p-clay-text); margin:1.1rem 0 0;}
.profile .hero .stand{color:var(--p-ink-soft); margin:1.2rem 0 2rem; font-size:1.08rem; max-width:34ch;}
.profile .hero-cta{display:flex; gap:.7rem; flex-wrap:wrap;}

/* buttons (scoped) */
.profile .btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--p-body); font-weight:500;
  font-size:.96rem; padding:.85rem 1.5rem; border-radius:8px; text-decoration:none; border:1.5px solid transparent; cursor:pointer;}
.profile .btn i{font-size:1.1rem;}
.profile .btn-clay{background:var(--p-clay); color:#fff;} .profile .btn-clay:hover{filter:brightness(1.06);}
.profile .btn-forest{background:var(--p-forest); color:#fff;} .profile .btn-forest:hover{filter:brightness(1.18);}
.profile .btn-ghost{background:transparent; color:var(--p-forest); border-color:var(--p-sage);} .profile .btn-ghost:hover{border-color:var(--p-forest);}
.profile .btn-sand{background:var(--p-sand); color:var(--p-forest);} .profile .btn-sand:hover{background:#fff;}
.profile .btn-ghost-l{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);} .profile .btn-ghost-l:hover{border-color:#fff;}

/* metabar */
.profile .metabar{border-top:1px solid var(--p-line); border-bottom:1px solid var(--p-line); background:var(--p-paper);}
.profile .metabar .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 2rem; padding:1rem 0; font-size:.85rem;}
.profile .metabar .m{display:inline-flex; align-items:baseline; gap:.5rem;}
.profile .metabar .m b{color:var(--p-forest); font-weight:600; font-family:var(--p-head);} .profile .metabar .m span{color:var(--p-ink-soft);}

/* statement quote */
.profile .statement .wrap{padding:clamp(3rem,7vw,5rem) 0; max-width:900px;}
.profile .statement .q{font-family:var(--p-head); font-weight:500; font-size:clamp(1.7rem,3.8vw,2.7rem);
  line-height:1.28; color:var(--p-forest); margin:0; text-wrap:balance;}
.profile .statement .q .mk{color:var(--p-clay-soft);}
.profile .statement .who{margin:1.5rem 0 0; font-size:.92rem; color:var(--p-ink-soft); display:flex; align-items:center; gap:.7rem;}
.profile .statement .who::before{content:""; width:26px; height:1px; background:var(--p-clay);}

/* body: prose + credentials rail */
.profile .body{background:var(--p-paper); border-top:1px solid var(--p-line);}
.profile .body .wrap{padding:clamp(2.4rem,5vw,3.6rem) 0; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(2rem,5vw,4rem); align-items:start;}
.profile .prose h2{font-size:clamp(1.3rem,2.3vw,1.6rem); margin:2rem 0 .7rem;}
.profile .prose h2:first-child{margin-top:0;}
.profile .prose p{margin:0 0 1.1rem; max-width:var(--p-measure); color:var(--p-ink); font-size:1.06rem;}
.profile .prose .lead{font-size:1.16rem; line-height:1.6;}
.profile .prose h3{font-size:1.06rem; margin:1.3rem 0 .4rem; color:var(--p-forest);}
.profile .prose ul,.profile .prose ol{margin:0 0 1.1rem 1.2rem; max-width:var(--p-measure);}
.profile .prose li{margin:.25rem 0;}
.profile .prose blockquote{border-left:3px solid var(--p-clay); margin:1.2rem 0; padding-left:1rem; color:var(--p-ink-soft);}
.profile .prose img{max-width:100%; height:auto; border-radius:8px;}
.profile .chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 0;}
.profile .chip{display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; text-decoration:none;
  padding:.5rem .95rem; border-radius:100px; background:var(--p-sand); border:1px solid var(--p-line); color:var(--p-forest); transition:border-color .18s;}
.profile .chip:hover{border-color:var(--p-clay-text);}
.profile .chip .dot{width:6px; height:6px; border-radius:50%; background:var(--p-clay);}

.profile .side{position:sticky; top:1.4rem; display:flex; flex-direction:column; gap:1.5rem;}
.profile .side h3{font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--p-ink-faint); margin:0 0 .8rem;}
.profile .creds{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; font-size:.92rem;}
.profile .creds li{display:flex; flex-direction:column;}
.profile .creds .k{color:var(--p-forest); font-weight:500; font-family:var(--p-head);}
.profile .creds .v{color:var(--p-ink-soft); font-size:.86rem;}

/* credibility band (soft sage) */
.profile .cred-band{background:var(--p-sage-tint);}
.profile .cred-band .wrap{padding:clamp(2.4rem,5vw,3.4rem) 0;}
.profile .cred-band .eyebrow{color:var(--p-forest-soft);}
.profile .cred-band h2{font-size:clamp(1.4rem,2.8vw,2rem); margin:.7rem 0 1.8rem; max-width:24ch; text-wrap:balance;}
.profile .facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
.profile .fact{border-top:2px solid var(--p-sage); padding-top:1rem;}
.profile .fact .n{font-family:var(--p-head); font-weight:700; font-size:clamp(1.9rem,4vw,2.7rem); color:var(--p-forest); letter-spacing:-.02em;}
.profile .fact .l{font-size:.86rem; color:var(--p-ink-soft); margin-top:.25rem; max-width:22ch;}

/* gallery filmstrip */
.profile .filmstrip .wrap{padding:clamp(2.4rem,5vw,3.4rem) 0;}
.profile .filmstrip .head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem;}
.profile .filmstrip h3{font-size:1.1rem; margin:0;}
.profile .strip{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:.8rem; overflow-x:auto; padding-bottom:.5rem;}
.profile .shot{aspect-ratio:4/3; border-radius:10px; overflow:hidden; position:relative; background:var(--p-sand-2); border:1px solid var(--p-line);}
.profile .shot img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(1.06) contrast(.96); transition:filter .2s;}
.profile .shot:hover img{filter:none;}
.profile .shot .cap{position:absolute; left:0; right:0; bottom:0; padding:.55rem .7rem; font-size:.76rem; color:#fff; background:linear-gradient(0deg, rgba(37,78,66,.85), transparent);}

/* final CTA (forest) */
.profile .cta{background:var(--p-forest);}
.profile .cta .wrap{padding:clamp(2.6rem,5vw,3.6rem) 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem;}
.profile .cta h2{color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); max-width:18ch; text-wrap:balance;}
.profile .cta p{color:var(--p-clay-soft); margin:.5rem 0 0; font-size:1rem; max-width:40ch;}

/* lightbox (top-level overlay, not scoped to .profile) */
.bmh-lightbox{position:fixed; inset:0; z-index:1000; background:rgba(23,40,33,.92);
  display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);}
.bmh-lightbox[hidden]{display:none;}
.bmh-lightbox figure{margin:0; max-width:1000px; text-align:center;}
.bmh-lightbox img{max-width:100%; max-height:80vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.bmh-lightbox figcaption{color:#F4EFE7; font-family:"Inter",system-ui,sans-serif; font-size:.9rem; margin-top:.9rem;}
.bmh-lightbox .lb-close{position:absolute; top:1rem; right:1.4rem; background:none; border:0; color:#fff;
  font-size:2.4rem; line-height:1; cursor:pointer; opacity:.8;}
.bmh-lightbox .lb-close:hover{opacity:1;}

@media screen and (max-width:52em){
  .profile .hero{min-height:0; display:block;}
  .profile .hero-photo{position:relative; width:100%; height:44vh; min-height:280px;}
  .profile .hero-photo::after{background:linear-gradient(0deg, var(--p-sand) 5%, transparent 60%);}
  .profile .hero-content{width:100%; padding:1.6rem 0 2rem;}
  .profile .body .wrap{grid-template-columns:1fr;}
  .profile .side{position:static; flex-direction:row; flex-wrap:wrap;}
  .profile .side>div{flex:1; min-width:200px;}
  .profile .facts{grid-template-columns:1fr;}
}