/* Page-specific components for /about — the portrait block, credential chips, pillar cards,
   stat row and the NAP list. Everything else on the page comes from styles.css.

   This file exists because /about used to load a 14KB fork of the whole stylesheet (about.css)
   taken on 21 July, which had drifted badly: it carried no .navitem/.dropdown rules, so the
   Resources dropdown rendered permanently open inside the header. Only the genuinely page-local
   rules were kept; the rest now comes from the one sitewide stylesheet.

   Load order matters — styles.css first, this second. */

.pillars>*{min-width:0}
.portrait{position:relative}
.portrait .frame{position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--gold);border-radius:var(--radius);z-index:1}
.portrait .ph{position:relative;z-index:2;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 36px 76px -34px rgba(22,49,90,.5);background:var(--stone)}
.portrait .ph img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.portrait .cap{position:absolute;left:-14px;bottom:-20px;z-index:3;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;box-shadow:0 22px 50px -24px rgba(22,49,90,.45)}
.portrait .cap .nm{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:1.05rem}
.portrait .cap .rl{font-size:.82rem;color:var(--gold-2);font-weight:600}
.cpa-logo{height:40px;width:auto}
.creds{display:flex;flex-wrap:wrap;gap:9px;margin:8px 0 22px}
.creds span{display:inline-flex;align-items:center;gap:7px;background:var(--stone);border:1px solid var(--line);border-radius:30px;padding:7px 15px;font-size:.85rem;font-weight:600;color:var(--navy)}
.creds span svg{width:15px;height:15px;color:var(--gold-2)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px}
.pillar .pic{width:54px;height:54px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold-2);margin-bottom:14px}
.pillar .pic svg{width:26px;height:26px;stroke-width:1.6}
.pillar h3{font-size:1.12rem;margin-bottom:6px}
.pillar p{color:var(--muted);font-size:.95rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:22px;text-align:center}
.stat{padding:12px}
.stat .n{font-family:var(--serif);font-size:2.6rem;color:var(--navy);font-weight:600;line-height:1}
.stat .l{color:var(--muted);font-size:.86rem;text-transform:uppercase;letter-spacing:.08em;margin-top:8px}
.stat+.stat{border-left:1px solid var(--line)}
.nap{display:flex;flex-direction:column;gap:14px}
.nap .row{display:flex;gap:13px;align-items:flex-start;font-size:1rem;color:var(--ink)}
.nap .row svg{width:20px;height:20px;color:var(--gold-2);flex-shrink:0;margin-top:3px}
.nap .row b{color:var(--navy)}
.pillars,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat+.stat{border-left:0}
.pillars,.stats{grid-template-columns:1fr}
.portrait{max-width:380px;margin:0 auto}
.portrait .frame{inset:14px -10px -14px 10px}