/* Shared page-header component (TGLC + Partners). Spec: /workspace/inspo/page-header-spec.md
   Markup: <header class="pr-hero phd"><div class="w"><div class="pr-hero-t"><h1/><p class="pr-lead"/>[<div class="pr-acts"/>]</div><figure class="phd-art"><svg class="phd-svg"/></figure></div></header>
   Each site ships a byte-identical copy as /page-header.css. */
:root{--phd-h1:clamp(40px,5.2vw,68px);--phd-sub:clamp(17px,1.45vw,20px);--phd-gap-title:14px;--phd-gap-acts:28px;--phd-pt:clamp(104px,9vw,128px);--phd-pb:clamp(40px,5vw,72px);--phd-col-gap:clamp(56px,4.2vw,64px);--phd-stack-gap:clamp(28px,4vw,36px);--phd-art-w:37%;--phd-ink:#16233A;--phd-mut:#45474d}
html body header.phd:not(#_):not(#_){padding:var(--phd-pt) 0 var(--phd-pb)!important;margin:0!important;background:transparent!important;min-height:0!important;border:0!important}
html body header.phd>.w:not(#_):not(#_){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:var(--phd-stack-gap)!important;align-items:center!important}
/* Desktop: text on the shared left margin (.w padding), art column --phd-art-w of the content width, flush to the right margin,
   starting --phd-col-gap after the text column. Both vertically centred. Pure CSS grid, no script. */
@media(min-width:900px){html body header.phd>.w:not(#_):not(#_){grid-template-columns:minmax(0,1fr) minmax(0,var(--phd-art-w))!important;column-gap:var(--phd-col-gap)!important;align-items:center!important}}
html body header.phd .pr-hero-t:not(#_){max-width:none!important;padding:0!important;margin:0!important;text-align:left!important}
html body header.phd h1:not(#_):not(#_){font:600 var(--phd-h1)/1.04 "Plus Jakarta Sans",Inter,system-ui,sans-serif!important;letter-spacing:-.03em!important;margin:0!important;color:var(--phd-ink)!important;text-wrap:balance}
html body header.phd h1 em:not(#_){font:inherit!important;font-style:normal!important;color:inherit!important}
html body header.phd .pr-lead:not(#_):not(#_){font:400 var(--phd-sub)/1.55 Inter,system-ui,sans-serif!important;color:var(--phd-mut)!important;margin:var(--phd-gap-title) 0 0!important;max-width:40ch!important}
html body header.phd .pr-acts:not(#_){margin:var(--phd-gap-acts) 0 0!important}
/* Art: inline SVG (viewBox 560x200, 14:5, or a wider strip on short-text pages via --phd-ar), no container. Desktop: the full art column (37% of the content width), so it stays about as tall as the text.
   Phone and tablet (< 900px): below the text, the full content width, so both edges sit on the side margins. */
html body header.phd .phd-art:not(#_){display:block!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:100%!important;max-width:none!important;aspect-ratio:var(--phd-ar,14/5)!important}
@media(min-width:900px){html body header.phd .phd-art:not(#_){max-width:none!important;aspect-ratio:var(--phd-ar,14/5)!important;height:auto!important;justify-self:stretch!important;align-self:center!important}}
html body header.phd .phd-svg:not(#_){display:block;width:100%;height:100%;overflow:visible}
.phd-svg .sh{filter:drop-shadow(0 6px 10px rgba(13,60,135,.14))}
.phd-svg .in{opacity:0;animation:phd-in .9s cubic-bezier(.22,1,.36,1) var(--d,0s) forwards}
.phd-svg .in.fl{animation:phd-in .9s cubic-bezier(.22,1,.36,1) var(--d,0s) forwards,phd-fl var(--fd,7s) ease-in-out calc(var(--d,0s) + .9s) infinite}
.phd-svg .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:phd-draw 1.6s cubic-bezier(.45,0,.2,1) var(--d,0s) forwards}
@keyframes phd-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes phd-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes phd-draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.phd-svg .in,.phd-svg .in.fl,.phd-svg .draw{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}