/* John Chow personal brand shell. Page content and functional controls retain their layout. */
.personal-wordmark { display:inline-flex !important; align-items:baseline !important; gap:0 !important; flex-shrink:0; white-space:nowrap; line-height:1; text-decoration:none; letter-spacing:-.055em; }
.personal-wordmark .brand-main { color:#f1e9fa; font-size:29px; font-weight:800; }
.personal-wordmark .brand-affix { color:#bf8aea; font-size:16px; font-weight:600; letter-spacing:-.035em; }
.personal-wordmark:hover { opacity:.85; }
.personal-header { background:#150d22 !important; }
.personal-header { --lime:#bf8aea; }
section.hero { --lime:#bf8aea; }
.btn-primary, .cta, .inv-cta { background:#8952ba !important; color:#fff !important; }
.btn-primary:hover, .cta:hover, .inv-cta:hover { background:#75439f !important; color:#fff !important; }
.timeline .num { background:#8952ba; color:#fff; }
:focus-visible { outline:2px solid #8952ba; outline-offset:3px; }
@media(max-width:700px) {
 .personal-header > div { flex-wrap:wrap; gap:16px !important; }
 .personal-header nav { width:100%; justify-content:flex-start !important; gap:12px 18px !important; }
 .personal-wordmark .brand-main { font-size:25px; }
 .personal-wordmark .brand-affix { font-size:14px; }
}
@media(max-width:400px) {
 .personal-header > div { padding-inline:16px !important; }
 .personal-header > div > span { flex-wrap:wrap; gap:10px !important; }
}