/* ════════════════════════════════════════════════════════════════════
   About page — story, leadership
   Shares tokens/layout with site.css; loaded after it.
   ════════════════════════════════════════════════════════════════════ */

/* #region hero */
/* ─── hero ───────────────────────────────────────────────────────── */
/* wordmark + tagline */
.about-hero{position:relative;padding:170px 0 60px;text-align:center;overflow:hidden}
.about-hero .wrap{position:relative;z-index:1}
.about-hero .wordmark{width:min(720px,84vw);margin:0 auto;opacity:.96}
.about-hero .tag{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.6;margin-top:22px}
/* faint floating mascot/logo mark behind the hero */
.ghost{position:absolute;right:-5%;top:8%;width:min(460px,46vw);opacity:.05;pointer-events:none;z-index:0;
  animation:gfloat 14s ease-in-out infinite}
@keyframes gfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(1.5deg)}}
/* #endregion */

/* #region story / pull quote */
/* ─── story / pull quote ─────────────────────────────────────────── */
/* two-column layout — sticky quote beside scrolling body copy */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,88px);align-items:start}
.story-quote{font-family:var(--stamp);text-transform:uppercase;line-height:1;
  font-size:clamp(26px,3.2vw,44px);position:sticky;top:120px}
.story-quote .ac{color:var(--acc)}
/* body paragraphs + closing tagline */
.story-body p{font-size:16.5px;opacity:.84;margin-top:18px;line-height:1.7;max-width:54ch}
.story-body p:first-child{margin-top:0}
.story-tag{font-family:var(--stamp);text-transform:uppercase;font-size:clamp(22px,2.6vw,34px);
  color:var(--fp-cream);opacity:1!important;margin-top:30px!important;line-height:1.05}
/* #endregion */

/* #region leadership grid */
/* ─── leadership grid ────────────────────────────────────────────── */
/* card container — lift + border brighten on hover */
.lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.leader{background:var(--ink-850);border:1.5px solid var(--border);border-radius:16px;overflow:hidden;
  transition:border-color .25s,transform .25s}
.leader:hover{border-color:var(--border-strong);transform:translateY(-4px)}
/* headshot — desaturated by default, full color on hover */
.leader .ph{aspect-ratio:1/1;overflow:hidden;background:#1c1c19}
.leader .ph img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(.3) contrast(1.05)}
/* per-headshot framing override — shifts the visible crop lower */
.leader .ph--low img{object-position:center 40%}
.leader:hover .ph img{filter:grayscale(0)}
/* name, role, bio, credit list */
.leader .body{padding:24px}
.leader h3{font-family:var(--stamp);font-size:24px;text-transform:uppercase;line-height:1;letter-spacing:.01em}
.leader .role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-top:8px}
.leader .bio{font-size:14px;opacity:.78;margin-top:14px;line-height:1.55}
.leader .credits{font-size:12.5px;opacity:.6;margin-top:14px;line-height:1.6}
.leader .credits .cl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);opacity:.9}
/* social/contact links row */
.leader .links{display:flex;gap:6px 14px;margin-top:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.leader .links a{opacity:.7;transition:opacity .15s,color .15s;display:inline-flex;align-items:center;min-height:24px;padding:2px 3px}
.leader .links a:hover,.leader .links a:focus-visible{opacity:1;color:var(--acc)}
/* #endregion */

/* #region responsive */
/* ─── responsive ─────────────────────────────────────────────────── */
@media(max-width:900px){.lead-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.story,.lead-grid{grid-template-columns:1fr}.story-quote{position:static}}
/* #endregion */