/* Single Contributor profile (single-contributor.php) styles — split out of
   the original templates/contributor.css bundle during the CSS
   modularization pass (Phase 1). Rules unchanged, only regrouped: this file
   holds every selector used on an individual contributor's profile page;
   the Contributors *archive* page's rules moved to pages/contributors.css.
   Everything else on this page (.archive-intro, .theme-filter-bar,
   .archive-grid/.story-card) is reused untouched from the global/layout
   and component files. */

/* Dark panel, decoupled from the light/dark toggle (same pattern as
   Explore, the footer, and the Stories dark band) — full viewport
   height per the requested "100vh, theme dark grey" treatment, sitting
   flush under the header with no light gap above it. The back link
   lives inside this panel (pinned top-left) rather than in its own
   light strip before it. Padding that explicitly clears the fixed
   header (matching the 200px convention .hero-overlay already uses
   elsewhere) keeps content vertically balanced regardless of viewport
   height. */
.profile-hero{position:relative;background:var(--panel-dark);color:#FFFFFF;min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:150px 0 90px;}

.profile-back-row{position:absolute;top:40px;left:0;right:0;}

.profile-back{font-family:var(--sans);font-size:13px;font-weight:600;color:rgba(255,255,255,.7);transition:color .2s ease;}

.profile-back:hover{color:#FFFFFF;}

.profile-hero .section-label{color:#d7a373;}

.profile-hero .section-label::before{background:#d7a373;}

.profile-hero-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:64px;align-items:center;}

/* Photo sized up with an offset accent frame behind it — the same
   "field photo, not a headshot" dimensionality as the two-photo
   collage on the About page's Who We Are section, scaled to one
   image, rather than a flat rectangle sitting in empty space. */
.profile-photo{position:relative;aspect-ratio:4/4.3;max-width:480px;width:100%;margin:0 auto;}

.profile-photo::before{content:'';position:absolute;top:16px;left:16px;right:-16px;bottom:-16px;border:1px solid var(--accent);z-index:0;}

.profile-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;background:#3A362E;}

.profile-intro{max-width:560px;}

.profile-intro h1{font-family:var(--sans);font-weight:700;font-size:clamp(32px,4vw,52px);color:#FFFFFF;letter-spacing:-0.015em;margin:6px 0 12px;}

.profile-role{font-family:var(--sans);font-size:14px;font-weight:600;color:#8CB07B;margin-top:6px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);margin-bottom:22px;}

.profile-standfirst{font-family:var(--serif);font-size:19px;line-height:1.6;color:rgba(255,255,255,.78);max-width:44ch;}

.profile-lens-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}

.profile-lens-row span{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--heading);border:1px solid var(--border);padding:9px 18px;}

/* The shared .theme-filter-bar carries 96px of bottom padding sized
   for the Stories archive's longer archive-list section below it; on a
   profile page that gap reads as a big dead zone between the filter
   tabs and the grid, so it's tightened here without touching the
   shared rule other pages rely on. */
#profileStories .theme-filter-bar{padding-bottom:40px;}

#profileStories .theme-filter-bar .wrap{padding-bottom:18px;}

#profileStories > .wrap:first-child{margin-bottom:8px;}

/* Consistent section rhythm on contributor profile pages — the shared
   .archive-intro/.feature/.archive-grid-section classes carry padding
   tuned for other pages, which produced an uneven gap here; scoped to
   body.profile-body so those other pages are untouched. */
body.profile-body .archive-intro{padding:64px 0;}

/* About text column. .article-wrap's width rule lives in article.css, which only
   loads on single Story pages, so on this page the About text ran full width.
   Same values as the static site: 720px box, 24px side padding, centred. */
body.profile-body .archive-intro .article-wrap{max-width:720px;margin:0 auto;padding:0 24px;}

body.profile-body #profileStories{padding-top:64px;padding-bottom:120px;}

/* MILESTONES & RECOGNITION — sits between the About text and the
   Their Lens/Connect diptych. Not every contributor has a formal
   award, so this is framed as a flexible ledger of what they've
   actually done rather than a trophy case — same bordered-list
   language as .pillar-grid/.formats-grid elsewhere, at a single
   column since entries vary in length. Rendered by single-contributor.php
   from the repeatable _recognitions data (Task 12/13) whenever a
   Contributor has at least one Recognition entry. */
.profile-milestones{background:var(--bg);padding:0 0 100px;}

.milestones-list{border-top:1px solid var(--border);margin-top:48px;max-width:800px;}

.milestone-item{display:grid;grid-template-columns:104px 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--border);}

.milestone-year{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-top:2px;}

.milestone-item h4{font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.4;color:var(--heading);margin-bottom:8px;}

.milestone-item p{font-family:var(--serif);font-size:15px;line-height:1.65;color:var(--body);max-width:58ch;}

@media (max-width:620px){
.milestone-item{grid-template-columns:1fr;gap:6px;padding:22px 0;}
}

/* PROFILE LENS + CONNECT — one full-bleed two-panel band: "Their
   lens" on a stone/grey panel, "Connect" on the site's accent-orange
   panel (same scheme as the site's existing .contact-band: dark text
   on orange, per --panel-dark), sitting edge to edge as a diptych
   rather than two separate full-width sections. Rendered by
   single-contributor.php from the repeatable _lens_keywords and
   _social_links data (Task 12/13) — each panel appears independently,
   whenever that Contributor has at least one entry for it. */
.profile-lens-connect{display:grid;grid-template-columns:1fr 1fr;}

/* The panels are full-bleed (edge to edge, by design); this mirrors
   .wrap's own inset formula (48px, or more once centered past 1400px)
   on each panel's OUTER edge, with a smaller fixed gap on the inner
   edge where the two panels meet. */
.profile-lens-panel,.profile-connect-panel{padding-top:72px;padding-bottom:72px;}

.profile-lens-panel{padding-left:max(48px, calc((100vw - 1400px) / 2 + 48px));padding-right:56px;}

.profile-connect-panel{padding-left:56px;padding-right:max(48px, calc((100vw - 1400px) / 2 + 48px));}

.profile-lens-panel{background:var(--stone);}

.profile-lens-panel .profile-lens-row{margin-top:28px;}

.profile-connect-panel{background:var(--accent);}

.profile-connect-panel .section-label{color:#FCFAF7;margin-bottom:10px;}

.profile-connect-panel .section-label::before{background:var(--panel-dark);}

.profile-connect-title{max-width:none;color:var(--panel-dark);margin-bottom:14px;}

/* The contributor's name is wrapped in <em>, which the site-wide
   heading rule (.section-title em) colors --accent — invisible here
   since the panel itself is --accent orange. Pin it back to the
   panel's own dark text color. */
.profile-connect-title em{color:var(--panel-dark);}

.profile-connect-text{font-family:var(--serif);font-size:16px;line-height:1.6;color:rgba(36,36,36,.75);max-width:42ch;margin-bottom:28px;}

.profile-connect-links{display:flex;gap:12px;}

.profile-connect-links .icon-btn{width:40px;height:40px;border:1px solid rgba(36,36,36,.3);color:var(--panel-dark);transition:background .2s ease,color .2s ease,border-color .2s ease;}

.profile-connect-links .icon-btn:hover{background:var(--panel-dark);color:#FCFAF7;border-color:var(--panel-dark);}

/* Tablet/stacked: a photo full-width with left-aligned text directly
   under it reads as ragged and unbalanced (long lines, no visual
   center of gravity), so the intro text centers and narrows into a
   readable column once the hero drops to one column. Same logic for
   the lens/connect panels — stacked, they read as two separate cards
   rather than a diptych, so centering both makes them feel like a
   matched pair instead of a left-hugging list. */
@media (max-width:980px){
.profile-lens-connect{grid-template-columns:1fr;}
.profile-lens-panel,.profile-connect-panel{padding:56px 32px;text-align:center;}
.profile-lens-panel .section-title,.profile-connect-panel .section-title{margin-left:auto;margin-right:auto;}
/* TASK 12: .profile-lens-row was previously centered here alongside
   .profile-connect-links when this two-panel layout stacks on
   tablet/mobile. Their Lens must stay left-aligned at every breakpoint
   (an explicit requirement), so it's excluded from this rule now —
   .profile-connect-links (Social Links' icon row) still centers here,
   unchanged. */
.profile-connect-links{justify-content:center;}
.profile-connect-text{margin-left:auto;margin-right:auto;}
.profile-connect-title{max-width:none;}
}

@media (max-width:980px){
.profile-hero-grid{grid-template-columns:1fr;gap:32px;}
.profile-photo{max-width:400px;}
.profile-intro{text-align:center;max-width:56ch;margin:0 auto;}
.profile-standfirst{margin-left:auto;margin-right:auto;}
}

@media (max-width:620px){
.profile-back-row{top:24px;}
.profile-photo{max-width:280px;}
/* "Connect with [Name]" on every contributor profile page — on a
   narrow phone the name can wrap mid-word right after "with"
   rather than breaking as a whole name, and a longer name (or one
   with a title after it) can itself wrap across two ragged lines.
   Forcing the <em> onto its own line keeps "Connect with" together
   on line one and the full name together on line two. Desktop/
   tablet are untouched — this is scoped to the 620px breakpoint. */
.profile-connect-title em{display:block;}
}

/* Centred About / Milestones headings (the static page does this inline). */
.profile-title-center{text-align:center;margin-left:auto;margin-right:auto;}
.profile-list-center{margin-left:auto;margin-right:auto;}