/*
 * HJW profile pages: About (Direction B, "Two Things at Once") and the
 * Experience hero (Direction 2, "Career Log"). Loaded only on pages 15 and 14.
 * Tokens come from the theme's :root (--bg, --ink, --accent, --light...).
 */
@property --pp-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

.pp{--pp-deep:#1f2637;--pp-sys:#1a2030;--pp-warn:#ebcb8b;--pp-light2:#d8dee9;--pp-gut:clamp(16px,4vw,56px);--pp-sec:clamp(44px,5vw,72px);font-family:var(--font-body);color:var(--ink)}
.pp *{box-sizing:border-box}
.pp .wp-block-group__inner-container{display:contents}
.pp .is-layout-flow > *,.pp.is-layout-flow > *{margin-block:0}
.pp :where(p,ul,ol,dl,dd,figure,h1,h2,h3){margin:0}
.pp :where(ul,ol){padding:0;list-style:none}
.pp a{color:var(--accent)}
.pp :is(a,button,input):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.pp [id]{scroll-margin-top:120px}
.pp img{max-width:100%;height:auto;display:block}
.pp-wrap{max-width:calc(1320px + var(--pp-gut)*2);margin-inline:auto;padding-inline:var(--pp-gut)}
.pp-sec{padding-top:var(--pp-sec)}
.pp .pp-eyebrow{font:500 12px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
main .pp .pp-h1{font:600 clamp(40px,5.2vw,72px)/.98 var(--font-display);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
main .pp .pp-h2{font:600 clamp(30px,3.5vw,46px)/1.06 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin-bottom:18px;text-wrap:balance}
main .pp .pp-h3{font:600 clamp(18px,1.5vw,21px)/1.3 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.pp .pp-copy > p,.pp p.pp-p{color:var(--muted);max-width:62ch;font-size:17px;line-height:1.65}
.pp .pp-copy > p + p{margin-top:16px}
.pp .pp-copy strong,.pp p.pp-p strong{color:var(--ink);font-weight:500}
.pp .pp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.pp .pp-grid--top{align-items:start}
.pp .pp-grid--end{align-items:end}
@media (max-width:960px){.pp .pp-grid{grid-template-columns:1fr}}

/* window chrome */
.pp .pp-win{background:var(--light);color:var(--light-ink);border-radius:5px;border:1px solid rgba(255,255,255,.2);box-shadow:0 2px 4px rgba(6,16,24,.16),0 18px 44px rgba(6,16,24,.28);overflow:hidden;min-width:0}
.pp .pp-win--dark{background:var(--pp-deep);color:var(--ink);border-color:var(--line)}
.pp .pp-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(41,49,70,.12);font:400 11.5px/1.2 var(--font-mono);color:var(--light-muted);white-space:nowrap;overflow:hidden}
.pp .pp-win--dark .pp-bar{border-color:var(--line);color:var(--muted)}
.pp .pp-dots{display:flex;gap:5px;flex:none}
.pp .pp-dots i{width:8px;height:8px;border-radius:50%;background:#b9c1ce}
.pp .pp-win--dark .pp-dots i{background:#4c566a}
.pp .pp-bp{background-color:var(--pp-sys);background-image:linear-gradient(rgba(135,209,245,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(135,209,245,.06) 1px,transparent 1px);background-size:24px 24px}
.pp .pp-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 13px/1 var(--font-mono);padding:14px 18px;border-radius:3px;text-decoration:none}
.pp .pp-btn--p{background:var(--accent);color:var(--accent-ink)}
.pp .pp-btn--s{border:1px solid var(--control-line,#8995a8);color:var(--ink)}
.pp .pp-btn:hover{filter:brightness(1.08)}
.pp .pp-actions{display:flex;flex-wrap:wrap;gap:12px}
.pp .pp-toc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-block:18px;border-block:1px solid var(--line)}
.pp .pp-toc > span{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp .pp-toc ul{display:flex;flex-wrap:wrap;gap:8px}
.pp .pp-toc a{display:inline-flex;align-items:center;min-height:36px;padding:8px 12px;border:1px solid var(--line);border-radius:3px;font:400 12.5px/1 var(--font-mono);color:var(--ink);text-decoration:none}
.pp .pp-toc a:hover{border-color:var(--accent);color:var(--accent)}

/* ================= ABOUT ================= */
.pp-about{padding-bottom:var(--pp-sec)}
.pp-hero{padding-top:clamp(40px,5vw,72px);position:relative;isolation:isolate}
.pp-hero::before{content:"";position:absolute;inset:0 0 auto;height:min(760px,100%);z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),radial-gradient(at 100% 0%,rgba(135,209,245,.07),transparent 65%);background-size:48px 48px,48px 48px,100% 100%;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.pp .pp-lede{font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--muted);max-width:60ch}
.pp .pp-lede strong{color:var(--ink);font-weight:500}
.pp .pp-hero-intro{margin-bottom:clamp(28px,3vw,40px)}
.pp .pp-thesis{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:14px}
.pp .pp-thesis p{font:600 clamp(18px,1.6vw,22px)/1.3 var(--font-display);max-width:44ch;color:var(--ink)}
.pp .pp-thesis p span{color:var(--accent)}
.pp .pp-seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;padding:3px;gap:3px;background:var(--pp-deep)}
.pp .pp-seg button{appearance:none;border:0;background:transparent;color:var(--muted);font:500 12px/1 var(--font-mono);padding:10px 12px;min-height:36px;border-radius:3px;cursor:pointer}
.pp .pp-seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.pp .pp-seg button:hover:not([aria-pressed="true"]){color:var(--ink)}
.pp .pp-url{flex:1;display:flex;justify-content:center}
.pp .pp-url span{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:3px;padding:4px 16px;color:var(--ink)}
.pp .pp-view{position:relative;height:clamp(380px,34vw,460px);overflow:hidden;container-type:inline-size}
.pp .pp-view.is-auto{animation:pp-sweep 4.4s cubic-bezier(.6,0,.3,1) .7s 1 both}
@keyframes pp-sweep{0%{--pp-x:50%}30%{--pp-x:22%}68%{--pp-x:80%}100%{--pp-x:50%}}
.pp .pp-layer{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);gap:clamp(24px,4cqi,56px);padding:clamp(24px,3.4cqi,44px) clamp(24px,4.4cqi,60px) clamp(40px,4.4cqi,60px)}
.pp .pp-ph{border-radius:4px;min-height:0;overflow:hidden;position:relative}
.pp .pp-ph img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.pp .pp-txt{display:grid;gap:14px;align-content:center;min-width:0}
.pp .pp-nm{font:600 clamp(30px,4.6cqi,58px)/1 var(--font-display);letter-spacing:-.02em;justify-self:start}
.pp .pp-rl{font:500 12.5px/1.2 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;justify-self:start}
.pp .pp-ps{font-size:clamp(15px,1.45cqi,18px);line-height:1.6;max-width:50ch}
.pp .pp-ch{display:flex;gap:8px;flex-wrap:wrap;justify-self:start}
.pp .pp-ch span{font:400 12px/1 var(--font-mono);border-radius:3px;padding:8px 10px}
.pp .pp-front{background:var(--light);color:var(--light-ink);clip-path:inset(0 calc(100% - var(--pp-x)) 0 0);z-index:2}
.pp .pp-front .pp-rl{color:var(--light-accent)}
.pp .pp-front .pp-ps{color:var(--light-muted)}
.pp .pp-front .pp-ch span{border:1px solid rgba(41,49,70,.22)}
.pp .pp-sys{color:transparent}
.pp .pp-sys :is(.pp-ph,.pp-nm,.pp-rl,.pp-ps,.pp-ch){outline:1px dashed rgba(135,209,245,.6);outline-offset:5px;position:relative;overflow:visible}
.pp .pp-sys .pp-ch span{border:1px solid transparent}
.pp .pp-sys .pp-ph{background:linear-gradient(to top right,transparent calc(50% - .5px),rgba(135,209,245,.3) 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(135,209,245,.3) 50%,transparent calc(50% + .5px))}
.pp .pp-sys [data-n]::before{content:attr(data-n);position:absolute;left:-5px;top:-5px;transform:translateY(-100%);font:400 11px/1.3 var(--font-mono);color:var(--accent);background:var(--pp-sys);padding:3px 6px;white-space:nowrap;letter-spacing:0;text-transform:none}
.pp .pp-sys .pp-ph[data-n]::before{top:auto;bottom:12px;left:12px;transform:none;white-space:normal;line-height:1.7;border:1px solid rgba(135,209,245,.4)}
.pp .pp-sysfoot{position:absolute;left:clamp(24px,4.4cqi,60px);right:clamp(24px,4.4cqi,60px);bottom:16px;font:400 11px/1.3 var(--font-mono);color:var(--string);display:flex;gap:6px 22px;flex-wrap:wrap}
.pp .pp-handle{position:absolute;top:0;bottom:0;left:var(--pp-x);width:2px;margin-left:-1px;background:var(--accent);z-index:4;pointer-events:none}
.pp .pp-handle i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:600 15px/1 var(--font-mono);font-style:normal;box-shadow:0 4px 18px rgba(6,16,24,.45)}
.pp .pp-view input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5;appearance:none;background:transparent}
.pp .pp-view input[type=range]:focus-visible ~ .pp-handle i{outline:3px solid #fff;outline-offset:3px}
.pp .pp-vl{position:absolute;top:14px;z-index:3;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:3px;pointer-events:none}
.pp .pp-vl--l{left:14px;background:var(--light-ink);color:var(--light)}
.pp .pp-vl--r{right:14px;background:rgba(135,209,245,.14);color:var(--accent);border:1px solid rgba(135,209,245,.35)}
.pp .pp-cap{margin-top:12px;font:400 12px/1.5 var(--font-mono);color:var(--muted);text-align:center}
@container (max-width:640px){
  .pp .pp-layer{grid-template-columns:1fr;grid-template-rows:40% auto;padding:22px}
  .pp .pp-sysfoot,.pp .pp-sys .pp-ps[data-n]::before{display:none}
}
@media (max-width:640px){.pp .pp-view{height:600px}}
.pp .pp-glance{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--line);gap:1px}
.pp .pp-glance > div{background:var(--bg);padding:16px 20px;min-width:0}
.pp .pp-glance dt{font:500 11px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.pp .pp-glance dd{margin:0;color:var(--ink);font-size:15.5px;line-height:1.5}
@media (max-width:960px){.pp .pp-glance{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.pp .pp-glance{grid-template-columns:1fr}}
.pp .pp-hero .pp-toc{margin-top:clamp(28px,3vw,40px)}

/* then / now */
.pp .pp-tn{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}
.pp .pp-tn .pp-win{display:flex;flex-direction:column}
.pp .pp-tn-b{padding:22px 22px 24px;display:grid;gap:10px;align-content:start}
.pp .pp-tn-b .pp-k{font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--light-accent)}
.pp .pp-win--dark .pp-tn-b .pp-k{color:var(--string)}
.pp .pp-tn-b strong{font:600 clamp(28px,3vw,40px)/1 var(--font-display);letter-spacing:-.02em}
.pp .pp-tn-b p{font-size:15px;line-height:1.55;color:var(--light-muted)}
.pp .pp-tn-b li{display:flex;align-items:baseline;gap:10px;color:var(--ink);font-size:15px}
.pp .pp-tn-b li + li{margin-top:8px}
.pp .pp-tn-b li b{font:600 22px/1 var(--font-display);color:var(--accent);min-width:2.2em}
.pp .pp-tn-arrow{display:grid;place-items:center;padding:0 14px;color:var(--accent);font:500 22px/1 var(--font-mono)}
@media (max-width:640px){.pp .pp-tn{grid-template-columns:1fr}.pp .pp-tn-arrow{transform:rotate(90deg);padding:10px 0}}

/* range */
.pp .pp-range{background:var(--light);color:var(--light-ink);border-radius:5px;padding:clamp(28px,4vw,56px)}
.pp .pp-range .pp-eyebrow{color:var(--light-accent)}
main .pp .pp-range .pp-h2{color:var(--light-ink)}
.pp .pp-range .pp-copy > p{color:var(--light-muted)}
.pp .pp-range .pp-copy strong{color:var(--light-ink)}
.pp .pp-stack{display:grid;gap:6px}
.pp .pp-stack ul{display:grid;gap:6px}
main .pp .pp-grp{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--light-muted);margin:0 0 4px}
.pp .pp-row{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 16px;border-radius:3px;font:400 13px/1.3 var(--font-mono);transition:transform .2s ease}
.pp .pp-row:hover{transform:translateX(6px)}
.pp .pp-row b{font:600 16px/1 var(--font-display)}
.pp .pp-row--v{background:#fff;border:1px solid rgba(41,49,70,.12)}
.pp .pp-row--v span{color:var(--light-muted)}
.pp .pp-row--v i{font-style:normal;color:var(--light-accent)}
.pp .pp-row--s{background:var(--pp-sys);color:var(--ink);border:1px solid rgba(135,209,245,.18)}
.pp .pp-row--s span{color:var(--muted)}
.pp .pp-row--s i{font-style:normal;color:var(--string)}
.pp .pp-seam{display:flex;align-items:center;gap:12px;margin:8px 0;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--light-accent)}
.pp .pp-seam::before,.pp .pp-seam::after{content:"";flex:1;height:2px;background:var(--light-accent)}
@media (max-width:520px){.pp .pp-row{grid-template-columns:1fr auto}.pp .pp-row span{display:none}}

/* workflow */
.pp .pp-flow{padding:clamp(22px,3vw,34px)}
.pp .pp-flow ol{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.25fr) auto minmax(0,1fr) auto minmax(0,.9fr);align-items:center;gap:8px}
.pp .pp-node{border:1px dashed rgba(135,209,245,.55);border-radius:3px;padding:12px;font:500 12.5px/1.35 var(--font-mono);color:var(--ink);text-align:center;background:rgba(26,32,48,.7);display:block}
.pp .pp-node small{display:block;color:var(--muted);font-weight:400;font-size:11px;margin-top:4px}
.pp .pp-node--me{border-style:solid;border-color:var(--accent);background:rgba(135,209,245,.1)}
.pp .pp-node--end{border-style:solid;border-color:var(--string);color:var(--string)}
.pp .pp-arr{color:var(--accent);font:500 14px/1 var(--font-mono)}
.pp .pp-fork{display:grid;gap:8px}
.pp .pp-fork .pp-or{text-align:center;font:400 10.5px/1 var(--font-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.pp .pp-flow figcaption{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font:400 12px/1.6 var(--font-mono);color:var(--muted)}
.pp .pp-flow figcaption b{color:var(--accent);font-weight:500}
.pp .pp-ops{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:auto repeat(6,minmax(0,1fr));border:1px solid var(--line);border-radius:5px;overflow:hidden}
.pp .pp-ops > *{padding:16px 18px;border-right:1px solid var(--line);min-width:0}
.pp .pp-ops > *:last-child{border-right:0}
main .pp .pp-ops h3{font:500 11px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--pp-deep);display:flex;align-items:center}
.pp .pp-ops li{font:600 15px/1.25 var(--font-display)}
.pp .pp-ops ul{display:contents}
.pp .pp-ops small{display:flex;align-items:center;gap:7px;margin-top:7px;font:400 11px/1 var(--font-mono);color:var(--string)}
.pp .pp-ops small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--string);box-shadow:0 0 0 3px rgba(163,190,140,.18)}
.pp p.pp-builds{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font:400 12.5px/1.4 var(--font-mono);color:var(--muted);max-width:none}
.pp .pp-builds span{border:1px solid var(--line);border-radius:3px;padding:8px 10px;color:var(--ink)}
@media (max-width:1060px){
  .pp .pp-ops{grid-template-columns:repeat(3,minmax(0,1fr))}
  main .pp .pp-ops h3{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}
  .pp .pp-ops li{border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .pp .pp-flow ol{grid-template-columns:1fr}
  .pp .pp-arr{text-align:center;transform:rotate(90deg)}
  .pp .pp-fork{grid-template-columns:1fr auto 1fr;align-items:center}
  .pp .pp-ops{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* work */
.pp .pp-work-head{margin-bottom:clamp(28px,3vw,40px)}
.pp .pp-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pp .pp-cases > li{display:flex}
.pp a.pp-case{flex:1;display:flex;flex-direction:column;text-decoration:none;color:var(--light-ink);transition:transform .25s ease,box-shadow .25s ease}
.pp a.pp-case:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(6,16,24,.16),0 26px 54px rgba(6,16,24,.34)}
.pp .pp-case .pp-bar b{color:var(--light-accent);font-weight:500}
.pp .pp-shot{background:linear-gradient(180deg,#f3f5f9,var(--pp-light2));padding:14px 18px 0;aspect-ratio:16/10;display:grid;place-items:center}
.pp .pp-shot img{width:100%;height:100%;object-fit:contain}
.pp .pp-case-b{padding:18px 20px 22px;display:grid;gap:6px;flex:1;align-content:start}
.pp .pp-case-k{font:500 12px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--light-accent)}
main .pp .pp-case h3{font:600 21px/1.2 var(--font-display);color:var(--light-ink);margin:0}
.pp .pp-case p{color:var(--light-muted);font-size:15px;line-height:1.55}
.pp .pp-go{margin-top:10px;font:500 12.5px/1.4 var(--font-mono);color:var(--light-accent)}
@media (max-width:1060px){.pp .pp-cases{grid-template-columns:1fr 1fr}.pp .pp-cases > li:last-child{grid-column:1/-1}}
@media (max-width:640px){.pp .pp-cases{grid-template-columns:1fr}.pp .pp-cases > li:last-child{grid-column:auto}}

/* working with me */
.pp .pp-types{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.pp .pp-types li{font:400 12.5px/1 var(--font-mono);border:1px solid var(--line);border-radius:3px;padding:10px 11px}
.pp .pp-pipe{padding:10px 0 14px;font:400 13.5px/1.5 var(--font-mono)}
.pp .pp-pipe .pp-cmd{padding:8px 20px 12px;color:var(--muted)}
.pp .pp-pipe .pp-cmd b{color:var(--string);font-weight:400}
.pp .pp-stage{display:grid;grid-template-columns:1.6em 6.4em minmax(0,1fr);gap:0 12px;padding:10px 20px;align-items:baseline}
.pp .pp-stage + .pp-stage{border-top:1px dashed rgba(255,255,255,.08)}
.pp .pp-stage i{font-style:normal;color:var(--string)}
.pp .pp-stage b{color:var(--ink);font-weight:500}
.pp .pp-stage span{color:var(--muted);font-family:var(--font-body);font-size:15px}
.pp .pp-stage--rel :is(i,b){color:var(--accent)}
@media (max-width:520px){.pp .pp-stage{grid-template-columns:1.4em minmax(0,1fr)}.pp .pp-stage span{grid-column:2}}

/* faq */
.pp .pp-faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:start}
.pp .pp-qa{border-top:1px solid var(--line)}
.pp .pp-q{padding:20px 0;border-bottom:1px solid var(--line)}
.pp .pp-q > p{color:var(--muted);max-width:64ch;margin-top:8px}
@media (max-width:960px){.pp .pp-faq{grid-template-columns:1fr}}

/* scroll reveal (progressive; content is visible where unsupported) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pp .pp-rv{animation:pp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}
@keyframes pp-rise{from{transform:translateY(28px);opacity:.35}to{transform:none;opacity:1}}

/* ================= EXPERIENCE HERO ================= */
.pp-xp{padding-bottom:28px}
.pp-xp .pp-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
main .pp-xp .pp-h1{font-size:clamp(36px,3.9vw,56px);margin-bottom:22px}
.pp-xp .pp-lede{margin-bottom:24px}
.pp-xp .pp-actions{margin-bottom:4px}
.pp-xp .pp-log{padding:14px 0 16px;font:400 13px/1 var(--font-mono);position:relative}
.pp-xp .pp-log .pp-cmd{padding:0 18px 12px;color:var(--muted)}
.pp-xp .pp-log .pp-cmd b{color:var(--string);font-weight:400}
.pp-xp .pp-log a{display:grid;grid-template-columns:1.2em 5.4em minmax(0,1fr) 3.2em;gap:0 12px;min-height:32px;padding:7px 18px;color:var(--ink);text-decoration:none;align-items:baseline}
.pp-xp .pp-log a:hover,.pp-xp .pp-log a:focus-visible{background:rgba(135,209,245,.08)}
.pp-xp .pp-log a:focus-visible{outline-offset:-3px}
.pp-xp .pp-g{color:var(--accent)}
.pp-xp .pp-hash{color:var(--pp-warn)}
.pp-xp .pp-m{min-width:0;line-height:1.45}
.pp-xp .pp-m em{font-style:normal;color:var(--string)}
.pp-xp .pp-m span{color:var(--muted)}
.pp-xp .pp-y{color:var(--muted);text-align:right}
.pp-xp .pp-end{padding:10px 18px 0;color:var(--muted)}
.pp-xp .pp-caret{display:inline-block;width:.55em;height:1.05em;background:var(--accent);vertical-align:-2px}
.pp-xp .pp-count{margin-left:auto;color:var(--string)}
.pp-xp .pp-toc{margin-top:clamp(28px,3vw,40px);margin-bottom:28px}
@media (prefers-reduced-motion:no-preference){
  .pp-xp .pp-log li a{animation:pp-type .5s steps(18) both}
  .pp-xp .pp-log li:nth-child(1) a{animation-delay:.3s}.pp-xp .pp-log li:nth-child(2) a{animation-delay:.39s}
  .pp-xp .pp-log li:nth-child(3) a{animation-delay:.48s}.pp-xp .pp-log li:nth-child(4) a{animation-delay:.57s}
  .pp-xp .pp-log li:nth-child(5) a{animation-delay:.66s}.pp-xp .pp-log li:nth-child(6) a{animation-delay:.75s}
  .pp-xp .pp-log li:nth-child(7) a{animation-delay:.84s}.pp-xp .pp-log li:nth-child(8) a{animation-delay:.93s}
  .pp-xp .pp-caret{animation:pp-blink 1.1s steps(1) infinite}
}
@keyframes pp-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pp-blink{50%{opacity:0}}
@media (max-width:640px){
  .pp-xp .pp-log a{grid-template-columns:1em minmax(0,1fr) 2.8em}
  .pp-xp .pp-hash{display:none}
}
.hjw-log__item[id]{scroll-margin-top:120px}

@media (prefers-reduced-motion:reduce){
  .pp *,.pp *::before,.pp *::after{transition:none!important}
  /* Motion graphics keep their animations: the plugin pauses them on a still frame and offers Play. */
  .pp :where(:not(.hjw-mg__stage *)),.pp :where(:not(.hjw-mg__stage *))::before,.pp :where(:not(.hjw-mg__stage *))::after{animation:none!important}
}
@media print{
  .pp .pp-view,.pp .pp-seg,.pp .pp-cap{display:none}
  .pp,.pp *{color:#111!important;background:#fff!important;box-shadow:none!important}
}

/* Theme heading icons (added by terminal.js by heading text), sized for these layouts. */
.pp :is(h2,h3) .hjw-icon{display:inline-block;width:.62em;height:.62em;margin-left:.32em;vertical-align:.02em;color:var(--accent);flex:none}
.pp .pp-range :is(h2,h3) .hjw-icon{color:var(--light-accent)}

/* Hero grid/glow runs full-bleed, not just the content width. */
.pp-about{overflow-x:clip}
.pp-hero::before{left:calc(50% - 50vw);right:calc(50% - 50vw)}

/* Experience hero stacks on tablets and phones. */
@media (max-width:960px){.pp-xp .pp-grid{grid-template-columns:1fr}}

/* Experience: bottom "Request my résumé" button had blue text on its blue fill. */
body .gb-text-2bc4a9de a.hjw-btn,body .gb-text-2bc4a9de a.hjw-btn:hover,body .gb-text-2bc4a9de a.hjw-btn:focus-visible{color:var(--accent-ink)!important;text-decoration:none!important}
body .gb-text-2bc4a9de a.hjw-btn{background:var(--accent)!important;border-color:var(--accent)!important}
body .gb-text-2bc4a9de a.hjw-btn:hover,body .gb-text-2bc4a9de a.hjw-btn:focus-visible{background:var(--accent-hi)!important;border-color:var(--accent-hi)!important}

/* ================= ABOUT v2: page rhythm ================= */
/* Sequence (matches the homepage): dark hero → light "at a glance" band →
   dark → light → dark → deep → dark → light FAQ → dark footer. */
.pp-about{counter-reset:ppsec;padding-bottom:0}
.pp-about .pp-hero{padding-bottom:clamp(56px,6vw,88px)}
.pp-about .pp-band{position:relative;isolation:isolate;padding-block:var(--pp-sec)}
.pp-about .pp-band::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none}
.pp-about .pp-band--light::before{background:var(--light)}
.pp-about .pp-band--deep::before{background:#252b35;border-block:1px solid var(--line)}

/* light band theming */
.pp-about .pp-band--light{color:var(--light-ink)}
.pp-about .pp-band--light .pp-eyebrow{color:var(--light-accent)}
main .pp-about .pp-band--light :is(.pp-h2,.pp-h3){color:var(--light-ink)}
.pp-about .pp-band--light :is(.pp-copy > p,.pp-q > p){color:var(--light-muted)}
.pp-about .pp-band--light .pp-copy strong{color:var(--light-ink)}
.pp-about .pp-band--light a{color:var(--light-accent)}
.pp-about .pp-band--light :is(h2,h3) .hjw-icon{color:var(--light-accent)}
.pp-about .pp-band--light :is(a,button,input):focus-visible{outline-color:var(--light-accent)}

/* numbered sections, mirrored in the on-this-page nav */
.pp-about > .pp-sec[id]{counter-increment:ppsec}
.pp-about > .pp-sec[id] .pp-eyebrow::before{content:counter(ppsec,decimal-leading-zero) " / ";opacity:.65}
.pp-about .pp-toc ul{counter-reset:pptoc}
.pp-about .pp-toc li{counter-increment:pptoc}
.pp-about .pp-toc a{gap:10px}
.pp-about .pp-toc a::before{content:counter(pptoc,decimal-leading-zero);font-size:11px;color:var(--accent);opacity:.85}

/* ---- at a glance (light band) ---- */
.pp-about .pp-glance-band{padding-block:clamp(48px,5.5vw,80px)}
.pp-about .pp-glance2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:clamp(28px,4vw,56px);align-items:stretch}
.pp-about .pp-stats{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));align-self:center}
.pp-about .pp-stats li{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:0 20px;padding:14px 0 14px 24px;border-left:1px solid rgba(41,49,70,.2)}
.pp-about .pp-stats li::before{content:"";position:absolute;left:-1px;top:50%;width:2px;height:28px;margin-top:-14px;background:var(--light-accent)}
.pp-about .pp-stats b{min-width:2.15em;font:600 clamp(38px,3.6vw,52px)/1 var(--font-display);letter-spacing:-.03em;color:var(--light-accent);white-space:nowrap}
.pp-about .pp-stats span{font-size:15.5px;line-height:1.45;color:var(--light-muted);max-width:30ch}
.pp-about .pp-glance-band .pp-glance{margin:0;gap:0;display:grid;align-self:center;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff;border:1px solid rgba(41,49,70,.12);border-radius:6px;box-shadow:0 1px 2px rgba(41,49,70,.06),0 14px 34px rgba(41,49,70,.1);overflow:hidden}
.pp-about .pp-glance-band .pp-glance > div{position:relative;background:none;padding:20px 24px 20px 76px;border-bottom:1px solid rgba(41,49,70,.1)}
.pp-about .pp-glance-band .pp-glance > div:nth-child(odd):not(:last-child){border-right:1px solid rgba(41,49,70,.1)}
.pp-about .pp-glance-band .pp-glance > div:last-child{grid-column:1/-1;border-bottom:0}
.pp-about .pp-glance-band .pp-glance dt{color:var(--light-accent);margin-bottom:6px}
.pp-about .pp-glance-band .pp-glance dt svg{position:absolute;left:22px;top:20px;width:38px;height:38px;padding:9px;border-radius:7px;background:var(--light-ink);color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pp-about .pp-glance-band .pp-glance dd{color:var(--light-ink);font-size:15.5px;line-height:1.5}
.pp-about .pp-glance-band .pp-toc{margin-top:clamp(32px,3.5vw,48px);border-color:rgba(41,49,70,.14)}
.pp-about .pp-band--light .pp-toc > span{color:var(--light-muted)}
.pp-about .pp-band--light .pp-toc a{background:#fff;border-color:rgba(41,49,70,.16);color:var(--light-ink);transition:border-color .2s ease,color .2s ease,transform .2s ease}
.pp-about .pp-band--light .pp-toc a::before{color:var(--light-accent)}
.pp-about .pp-band--light .pp-toc a:hover{border-color:var(--light-accent);color:var(--light-accent);transform:translateY(-2px)}
@media (max-width:1060px){
  .pp-about .pp-glance2{grid-template-columns:1fr}
  .pp-about .pp-stats{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .pp-about .pp-stats li{grid-template-columns:1fr;align-items:start;gap:8px}
}
@media (max-width:640px){
  .pp-about .pp-stats{grid-template-columns:1fr;gap:0}
  .pp-about .pp-stats li{grid-template-columns:max-content minmax(0,1fr);align-items:center}
  .pp-about .pp-glance-band .pp-glance{grid-template-columns:1fr}
  .pp-about .pp-glance-band .pp-glance > div:nth-child(odd):not(:last-child){border-right:0}
  .pp-about .pp-glance-band .pp-glance > div{padding:18px 18px 18px 70px}
  .pp-about .pp-glance-band .pp-glance dt svg{left:18px;top:18px}
}

/* ---- range: now a full-bleed light band, not an inset card ---- */
.pp-about .pp-band .pp-range{background:none;padding:0;border-radius:0}

/* ---- ongoing web operations panel ---- */
.pp-about .pp-ops{display:block;margin-top:clamp(40px,4.5vw,64px);border:1px solid var(--line);border-radius:6px;background:var(--pp-deep);overflow:hidden;box-shadow:0 2px 4px rgba(6,16,24,.16),0 18px 44px rgba(6,16,24,.24)}
.pp-about .pp-ops > *{padding:0;border-right:0;min-width:0}
.pp-about .pp-ops-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:16px 24px;border-bottom:1px solid var(--line)}
main .pp-about .pp-ops h3{display:flex;align-items:center;gap:12px;padding:0;background:none;border:0;font:500 12px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
main .pp-about .pp-ops h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--string);box-shadow:0 0 0 4px rgba(163,190,140,.16)}
.pp-about .pp-ops-live{font:400 12.5px/1.3 var(--font-mono);color:var(--muted)}
.pp-about .pp-ops-live b{color:var(--string);font-weight:500}
.pp-about .pp-ops .pp-ops-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line)}
.pp-about .pp-ops .pp-ops-grid li{display:flex;flex-direction:column;gap:6px;padding:22px 20px 20px;background:var(--pp-deep);border:0;font:inherit;transition:background-color .2s ease}
.pp-about .pp-ops .pp-ops-grid li:hover{background:#232b3e}
.pp-about .pp-ops-grid svg{width:24px;height:24px;margin-bottom:8px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pp-about .pp-ops-grid b{font:600 16.5px/1.2 var(--font-display);color:var(--ink);letter-spacing:-.005em}
.pp-about .pp-ops-grid span{font-size:14px;line-height:1.45;color:var(--muted)}
.pp-about .pp-ops-grid small{margin-top:auto;padding-top:12px}
.pp-about .pp-ops-grid small.is-monthly{color:var(--accent)}
.pp-about .pp-ops-grid small.is-monthly::before{background:var(--accent);box-shadow:0 0 0 3px rgba(135,209,245,.18)}
.pp-about .pp-ops-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:16px 24px;border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.pp-about .pp-ops-foot .pp-k{font:500 11.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp-about .pp-ops .pp-ops-foot ul{display:flex;flex-wrap:wrap;gap:8px}
.pp-about .pp-ops .pp-ops-foot li{padding:8px 11px;border:1px solid var(--line);border-radius:3px;background:rgba(255,255,255,.03);font:400 12.5px/1 var(--font-mono);color:var(--ink)}
.pp-about .pp-ops-foot p{flex:1 1 300px;font-size:14px;line-height:1.5;color:var(--muted);text-align:right}
@media (max-width:1100px){
  .pp-about .pp-ops .pp-ops-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  main .pp-about .pp-ops h3{border:0}
  .pp-about .pp-ops-foot p{text-align:left}
}
@media (max-width:640px){
  .pp-about .pp-ops .pp-ops-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-about .pp-ops .pp-ops-grid li{padding:18px 16px}
  .pp-about :is(.pp-ops-head,.pp-ops-foot){padding-inline:16px}
}

/* ---- work: deep band ---- */
.pp-about .pp-band--deep .pp-work-head{margin-bottom:clamp(32px,3.5vw,48px)}

/* ---- FAQ on light ---- */
.pp-about .pp-band--light .pp-qa{border-top-color:rgba(41,49,70,.16)}
.pp-about .pp-band--light .pp-q{border-bottom-color:rgba(41,49,70,.16)}
main .pp-about .pp-band--light .pp-q .pp-h3{color:var(--light-ink)}

/* polish.css forces eyebrows to the dark-mode accent with !important; use the light-mode accent on light bands. */
:root body .pp-about .pp-band--light .pp-eyebrow{color:var(--light-accent)!important}

/* ================= ABOUT v2.1: shared axis + spacing ================= */
/* Same container and 5:7 split as Work With Me (.hjw-wrap), so the left/right
   column edge stays in one place from section to section. */
.pp-about .pp-wrap{max-width:1480px;padding-inline:clamp(16px,4vw,56px)}
@media (min-width:1800px){.pp-about .pp-wrap{max-width:1600px}}
.pp-about .pp-grid,.pp-about .pp-faq,.pp-about .pp-glance2{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.pp-about .pp-hero-intro,.pp-about .pp-work-head{align-items:end}
/* every dark section sits between bands: give each one top and bottom space */
.pp-about > .pp-sec{padding-block:var(--pp-sec)}
/* 'now' card mirrors the 'then' card (stats live only in the glance band) */
.pp-about .pp-win--dark .pp-tn-b p{color:var(--muted)}
.pp-about .pp-win--dark .pp-tn-b strong{color:var(--ink)}
@media (max-width:960px){
  .pp-about .pp-grid,.pp-about .pp-faq,.pp-about .pp-glance2{grid-template-columns:1fr}
  .pp-about .pp-hero-intro,.pp-about .pp-work-head{row-gap:6px}
}
/* tablet: one card per row, image beside text on the same 5:7 split */
@media (min-width:641px) and (max-width:1060px){
  .pp-about .pp-cases{grid-template-columns:1fr}
  .pp-about .pp-cases > li:last-child{grid-column:auto}
  .pp-about a.pp-case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr}
  .pp-about .pp-case .pp-bar{grid-column:1/-1}
  .pp-about .pp-case .pp-shot{aspect-ratio:auto;height:100%;padding:16px}
  .pp-about .pp-case .pp-case-b{align-content:center;padding:22px 24px}
}

/* Tablet: glance stats as a horizontal row, fact card full width below. */
@media (max-width:1279px){
  .pp-about .pp-glance2{grid-template-columns:1fr;gap:clamp(28px,4vw,40px)}
  .pp-about .pp-stats{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .pp-about .pp-stats li{grid-template-columns:1fr;align-items:start;align-content:start;gap:8px}
}
@media (max-width:640px){
  .pp-about .pp-stats{grid-template-columns:1fr;gap:0}
  .pp-about .pp-stats li{grid-template-columns:max-content minmax(0,1fr);align-items:center}
}

/* Project cards: 'Explore' links share one bottom line. */
.pp-about .pp-case .pp-case-b{display:flex;flex-direction:column;gap:6px}
.pp-about .pp-case .pp-go{margin-top:auto;padding-top:14px}
@media (min-width:641px) and (max-width:1060px){
  .pp-about .pp-case .pp-case-b{justify-content:center}
  .pp-about .pp-case .pp-go{margin-top:0;padding-top:10px}
}

/* ================= ABOUT v3: cinematic hero ================= */
/* Letterboxed title card built from the existing portrait. CSS only:
   a slow push-in on load and a light parallax on scroll (where supported). */
.pp-about .pp-hero{padding-top:clamp(24px,3vw,40px)}
.pp-about .pp-cine{--cine-bg:#121722;--cine-bar:#0a0d14;position:relative;display:grid;grid-template-rows:auto 1fr auto;background:var(--cine-bg);border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 2px 4px rgba(6,16,24,.2),0 30px 70px rgba(6,16,24,.4);isolation:isolate}
.pp-about .pp-cine-bar{position:relative;z-index:3;display:flex;justify-content:space-between;gap:16px;padding:12px clamp(16px,2.4vw,28px);background:var(--cine-bar);font:500 10.5px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#7d879a;white-space:nowrap;overflow:hidden}
.pp-about .pp-cine-bar span:last-child{text-align:right}
.pp-about .pp-cine-bar--top span:last-child{color:var(--string)}
.pp-about .pp-cine-bar--bottom span:last-child{color:#a9b3c4}
.pp-about .pp-cine-stage{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:clamp(480px,40vw,640px)}
/* portrait: right side, fading into the frame */
.pp-about .pp-cine-photo{position:absolute;inset:0 0 0 auto;width:auto;height:100%;aspect-ratio:1/1.04;max-width:66%;z-index:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 22%,#000 46%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 22%,#000 46%)}
.pp-about .pp-cine-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;filter:contrast(1.06) saturate(.9) brightness(.92);transform-origin:60% 35%}
.pp-about .pp-cine-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 65% 35%,transparent 45%,rgba(10,13,20,.55) 100%),linear-gradient(0deg,rgba(18,23,34,.75),transparent 30%);pointer-events:none}
/* copy: left 5 columns, same axis as the rest of the page */
.pp-about .pp-cine-copy{position:relative;z-index:2;grid-column:1;align-self:center;display:grid;gap:18px;padding:clamp(32px,4vw,64px) 0 clamp(32px,4vw,64px) clamp(24px,3.6vw,56px)}
.pp-about .pp-cine-copy .pp-eyebrow{margin:0}
main .pp-about .pp-cine-title{margin:0;font:600 clamp(48px,6.4vw,96px)/.92 var(--font-display);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
main .pp-about .pp-cine-title span{display:block;margin-bottom:.12em;font:500 clamp(14px,1.2vw,17px)/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.pp-about .pp-cine-credits{display:grid;gap:6px;font:500 12px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pp-about .pp-cine-credits span + span{color:#a9d9f2}
.pp-about .pp-cine-copy .pp-lede{font-size:clamp(16px,1.25vw,18.5px);max-width:46ch}
.pp-about .pp-cine-copy .pp-actions{margin-top:6px}
/* motion */
@media (prefers-reduced-motion:no-preference){
  .pp-about .pp-cine-photo img{animation:pp-cine-push 3.2s cubic-bezier(.16,1,.3,1) both}
  .pp-about .pp-cine-credits,.pp-about .pp-cine-copy .pp-lede,.pp-about .pp-cine-copy .pp-actions{animation:pp-cine-rise .9s cubic-bezier(.16,1,.3,1) both}
  .pp-about .pp-cine-copy .pp-lede{animation-delay:.12s}
  .pp-about .pp-cine-copy .pp-actions{animation-delay:.22s}
  @supports (animation-timeline:view()){
    .pp-about .pp-cine-photo{animation:pp-cine-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@keyframes pp-cine-push{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes pp-cine-rise{from{transform:translateY(14px);opacity:.25}to{transform:none;opacity:1}}
@keyframes pp-cine-drift{to{transform:translateY(12%)}}
/* tablet: photo takes more of the frame */
@media (max-width:1060px){
  .pp-about .pp-cine-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pp-about .pp-cine-photo{aspect-ratio:auto;width:68%;max-width:none}
}
/* mobile: photo on top, copy below */
@media (max-width:760px){
  .pp-about .pp-cine-stage{display:block;min-height:0}
  .pp-about .pp-cine-photo{position:relative;width:100%;height:auto;max-width:none;aspect-ratio:4/4.2;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
  .pp-about .pp-cine-photo::after{background:radial-gradient(120% 90% at 50% 35%,transparent 50%,rgba(10,13,20,.5) 100%)}
  .pp-about .pp-cine-copy{margin-top:-64px;padding:0 20px 28px}
  .pp-about .pp-cine-bar{font-size:9.5px;letter-spacing:.12em}
  .pp-about .pp-cine-bar--top span:last-child,.pp-about .pp-cine-bar--bottom span:first-child{display:none}
  .pp-about .pp-cine-bar--bottom span:last-child{text-align:left}
}
/* faded blueprint grid in the negative space (same grid as the other heroes),
   masked away from the text column and blended under the photo's fade */
.pp-about .pp-cine-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),radial-gradient(38% 60% at 60% 50%,rgba(135,209,245,.09),transparent 70%);background-size:48px 48px,48px 48px,100% 100%;background-position:center;-webkit-mask-image:radial-gradient(36% 70% at 60% 50%,#000 35%,transparent 100%),linear-gradient(90deg,transparent 40%,#000 52%);-webkit-mask-composite:source-in;mask-image:radial-gradient(36% 70% at 60% 50%,#000 35%,transparent 100%),linear-gradient(90deg,transparent 40%,#000 52%);mask-composite:intersect}
.pp-about .pp-cine-photo{z-index:1}
@media (max-width:1060px){.pp-about .pp-cine-stage::before{display:none}}
@media (max-width:760px){.pp-about .pp-cine-stage::before{display:none}}

/* ================= ABOUT v3.1: landscape office photo ================= */
/* The photo fills the frame; text sits on the open wall at left. Phones get a
   face-centred crop via <picture>. Grid sits over the wall at very low contrast. */
.pp-about .pp-cine-stage{min-height:clamp(460px,40vw,620px)}
.pp-about .pp-cine-photo{inset:0;width:auto;height:auto;max-width:none;aspect-ratio:auto;z-index:0;-webkit-mask-image:none;mask-image:none}
.pp-about .pp-cine-photo picture{display:block;width:100%;height:100%}
.pp-about .pp-cine-photo img{object-position:76% 32%;filter:contrast(1.04) saturate(.95) brightness(.95);transform-origin:76% 40%}
.pp-about .pp-cine-photo::after{background:linear-gradient(90deg,rgba(18,23,34,.9) 0%,rgba(18,23,34,.72) 28%,rgba(18,23,34,.28) 50%,transparent 64%),linear-gradient(0deg,rgba(18,23,34,.6),transparent 26%),radial-gradient(130% 100% at 72% 40%,transparent 55%,rgba(10,13,20,.45) 100%)}
.pp-about .pp-cine-stage::before{z-index:1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(48% 85% at 18% 45%,#000 20%,transparent 100%);mask-image:radial-gradient(48% 85% at 18% 45%,#000 20%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .pp-about .pp-cine-photo{animation-name:pp-cine-drift2}
}}
@keyframes pp-cine-drift2{to{transform:translateY(5%) scale(1.12)}}
@media (max-width:1060px){
  .pp-about .pp-cine-stage{aspect-ratio:auto;min-height:clamp(440px,56vw,560px)}
  .pp-about .pp-cine-photo{width:auto}
  .pp-about .pp-cine-photo img{object-position:72% 30%}
  .pp-about .pp-cine-photo::after{background:linear-gradient(90deg,rgba(18,23,34,.92) 0%,rgba(18,23,34,.78) 36%,rgba(18,23,34,.3) 58%,transparent 72%),linear-gradient(0deg,rgba(18,23,34,.6),transparent 26%)}
}
@media (max-width:760px){
  .pp-about .pp-cine-stage{aspect-ratio:auto;min-height:0}
  .pp-about .pp-cine-photo{position:relative;inset:auto;aspect-ratio:800/821;-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent);mask-image:linear-gradient(180deg,#000 66%,transparent)}
  .pp-about .pp-cine-photo img{object-position:50% 30%}
  .pp-about .pp-cine-photo::after{background:radial-gradient(120% 90% at 55% 35%,transparent 50%,rgba(10,13,20,.45) 100%)}
}

/* ================= ABOUT v3.2: full-bleed hero ================= */
/* No frame or bars: the photo runs edge to edge and the copy sits on the
   page's left axis (same gutter as .hjw-wrap / .pp-wrap). */
.pp-about .pp-hero{padding-top:0;padding-bottom:0}
.pp-about .pp-cine{--cine-g:calc(max(0px,(100vw - 1480px) / 2) + clamp(16px,4vw,56px));display:block;margin-inline:calc(50% - 50vw);border:0;border-radius:0;box-shadow:none}
@media (min-width:1800px){.pp-about .pp-cine{--cine-g:calc(max(0px,(100vw - 1600px) / 2) + 56px)}}
.pp-about .pp-cine-bar{display:none}
.pp-about .pp-cine-stage{display:flex;align-items:center;min-height:clamp(540px,calc(100svh - 110px),820px)}
.pp-about .pp-cine-copy{grid-column:auto;align-self:center;margin-left:var(--cine-g);width:min(42vw,620px);padding:clamp(56px,6vw,96px) 0}
.pp-about .pp-cine-photo img{object-position:78% 30%}
.pp-about .pp-cine-photo::after{background:linear-gradient(90deg,#121722 0%,rgba(18,23,34,.94) 24%,rgba(18,23,34,.55) 44%,rgba(18,23,34,.1) 60%,transparent 70%),linear-gradient(0deg,rgba(18,23,34,.55),transparent 22%),radial-gradient(130% 100% at 74% 40%,transparent 58%,rgba(10,13,20,.4) 100%)}
.pp-about .pp-cine-stage::before{z-index:1;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),radial-gradient(34% 60% at 58% 50%,rgba(135,209,245,.07),transparent 70%);background-size:48px 48px,48px 48px,100% 100%;-webkit-mask-image:radial-gradient(34% 72% at 58% 50%,#000 30%,transparent 100%),linear-gradient(90deg,transparent 40%,#000 52%);-webkit-mask-composite:source-in;mask-image:radial-gradient(34% 72% at 58% 50%,#000 30%,transparent 100%),linear-gradient(90deg,transparent 40%,#000 52%);mask-composite:intersect}
@media (max-width:1060px){
  .pp-about .pp-cine-stage{min-height:clamp(480px,68vw,640px)}
  .pp-about .pp-cine-copy{width:min(56vw,520px)}
  .pp-about .pp-cine-photo img{object-position:72% 30%}
  .pp-about .pp-cine-photo::after{background:linear-gradient(90deg,#121722 0%,rgba(18,23,34,.9) 34%,rgba(18,23,34,.4) 56%,transparent 72%),linear-gradient(0deg,rgba(18,23,34,.55),transparent 22%)}
}
@media (max-width:760px){
  .pp-about .pp-cine-stage{display:block;min-height:0}
  .pp-about .pp-cine-copy{width:auto;margin:-56px 0 0;padding:0 var(--cine-g) 56px}
  .pp-about .pp-cine-photo img{object-position:50% 30%}
  .pp-about .pp-cine-photo::after{background:radial-gradient(120% 90% at 55% 35%,transparent 50%,rgba(10,13,20,.45) 100%)}
}

/* ================= ABOUT v3.3: shorter hero, smaller photo ================= */
/* ~22% shorter than v3.2. The photo keeps its 1916:821 ratio and anchors right,
   so it scales down with the hero instead of cropping in on wide screens. */
.pp-about .pp-cine-stage{--stage-h:clamp(440px,calc((100svh - 110px) * .78),640px);min-height:var(--stage-h)}
.pp-about .pp-cine-photo{left:auto;width:min(100%,calc(var(--stage-h) * 2.334))}
.pp-about .pp-cine-copy{padding:clamp(40px,4.5vw,72px) 0;gap:16px}
main .pp-about .pp-cine-title{font-size:clamp(44px,5.2vw,80px)}
@media (max-width:1060px){
  .pp-about .pp-cine-stage{--stage-h:clamp(400px,52vw,500px)}
  .pp-about .pp-cine-photo{width:100%}
}
@media (max-width:760px){
  .pp-about .pp-cine-stage{min-height:0}
  .pp-about .pp-cine-photo{width:100%;aspect-ratio:5/4}
  .pp-about .pp-cine-photo img{object-position:50% 22%}
  .pp-about .pp-cine-copy{padding:0 var(--cine-g) 48px}
}

/* ================= ABOUT v4: native-block markup ================= */
/* The About page is built from core blocks (group/paragraph/heading/list/image/
   buttons). Decorative pieces (window dots, arrows, check marks, icons) are CSS. */
.pp-about .wp-block-image{margin:0}
.pp-about .wp-block-list{margin:0;padding:0;list-style:none}
.pp-about p.pp-bar::before{content:"";flex:none;width:34px;height:8px;background:radial-gradient(circle at 4px 4px,#b9c1ce 3.5px,transparent 4px) 0 0/13px 8px repeat-x}
.pp-about .pp-win--dark p.pp-bar::before{background-image:radial-gradient(circle at 4px 4px,#4c566a 3.5px,transparent 4px)}
/* buttons */
.pp-about .pp-actions{display:flex;flex-wrap:wrap;gap:12px}
.pp-about .pp-actions .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:14px 18px;border-radius:3px;border:1px solid transparent;font:500 13px/1 var(--font-mono);text-decoration:none;transition:filter .2s ease}
.pp-about .pp-btn-p .wp-block-button__link{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pp-about .pp-btn-s .wp-block-button__link{background:transparent;border-color:var(--control-line,#8995a8);color:var(--ink)}
.pp-about .pp-actions .wp-block-button__link:hover{filter:brightness(1.08)}
/* hero */
.pp-about .pp-cine-photo{margin:0}
main .pp-about p.pp-cine-kicker{margin:0 0 -8px;font:500 clamp(14px,1.2vw,17px)/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.pp-about p.pp-cine-credits{display:block;line-height:1.9}
@media (max-width:760px){.pp-about .pp-cine-photo img{object-position:76% 20%}}
/* glance: stats */
.pp-about .pp-stat{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:0 20px;padding:14px 0 14px 24px;border-left:1px solid rgba(41,49,70,.2)}
.pp-about .pp-stat::before{content:"";position:absolute;left:-1px;top:50%;width:2px;height:28px;margin-top:-14px;background:var(--light-accent)}
.pp-about p.pp-stat-num{min-width:2.15em;font:600 clamp(38px,3.6vw,52px)/1 var(--font-display);letter-spacing:-.03em;color:var(--light-accent);white-space:nowrap}
.pp-about p.pp-stat-label{font-size:15.5px;line-height:1.45;color:var(--light-muted);max-width:30ch}
@media (max-width:1279px){.pp-about .pp-stat{grid-template-columns:1fr;align-items:start;align-content:start;gap:8px}}
@media (max-width:640px){.pp-about .pp-stat{grid-template-columns:max-content minmax(0,1fr);align-items:center}}
/* glance: facts card */
.pp-about .pp-fact::before{content:"";position:absolute;left:22px;top:20px;width:38px;height:38px;border-radius:7px;background:var(--light-ink)}
.pp-about .pp-fact::after{content:"";position:absolute;left:31px;top:29px;width:20px;height:20px;background:var(--accent);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.pp-about p.pp-fact-k{margin:0 0 6px;font:500 11px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--light-accent)}
.pp-about p.pp-fact-v{color:var(--light-ink);font-size:15.5px;line-height:1.5}
@media (max-width:640px){.pp-about .pp-fact::before{left:18px;top:18px}.pp-about .pp-fact::after{left:27px;top:27px}}
.pp-about .pp-fact--role{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5.5A2.5 2.5 0 0 1 10.5 3h3A2.5 2.5 0 0 1 16 5.5V7M3 13h18'/%3E%3C/svg%3E")}
.pp-about .pp-fact--based{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5a7 7 0 0 1 14 0C19 14.9 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.pp-about .pp-fact--focus{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E")}
.pp-about .pp-fact--builds{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 7.5l9 4.5 9-4.5L12 3Z'/%3E%3Cpath d='m3 12 9 4.5 9-4.5'/%3E%3Cpath d='m3 16.5 9 4.5 9-4.5'/%3E%3C/svg%3E")}
.pp-about .pp-fact--works{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.2a6.5 6.5 0 0 1 3.5 5.8'/%3E%3C/svg%3E")}
/* on this page */
.pp-about p.pp-toc-k{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp-about .pp-band--light p.pp-toc-k{color:var(--light-muted)}
/* then / now */
.pp-about .pp-tn{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:stretch}
.pp-about .pp-tn::after{content:"→";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--accent);font:500 22px/1 var(--font-mono)}
.pp-about .pp-tn-card{display:flex;flex-direction:column}
.pp-about .pp-tn-b p.pp-k{font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--light-accent)}
.pp-about .pp-win--dark .pp-tn-b p.pp-k{color:var(--string)}
.pp-about .pp-tn-b p.pp-tn-title{font:600 clamp(28px,3vw,40px)/1 var(--font-display);letter-spacing:-.02em;color:var(--light-ink)}
.pp-about .pp-win--dark .pp-tn-b p.pp-tn-title{color:var(--ink)}
.pp-about .pp-tn-b p.pp-tn-text{font-size:15px;line-height:1.55;color:var(--light-muted)}
.pp-about .pp-win--dark .pp-tn-b p.pp-tn-text{color:var(--muted)}
@media (max-width:640px){.pp-about .pp-tn{grid-template-columns:1fr}.pp-about .pp-tn::after{transform:translate(-50%,-50%) rotate(90deg)}}
/* visitors see / keeps it alive */
.pp-about .pp-rows{display:grid;gap:6px}
.pp-about .pp-rows > li{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 16px;border-radius:3px;font:400 13px/1.3 var(--font-mono);transition:transform .2s ease}
.pp-about .pp-rows > li:hover{transform:translateX(6px)}
.pp-about .pp-rows > li strong{font:600 16px/1 var(--font-display)}
.pp-about .pp-rows > li::after{content:"✓"}
.pp-about .pp-rows--v > li{background:#fff;border:1px solid rgba(41,49,70,.12);color:var(--light-muted)}
.pp-about .pp-rows--v > li strong{color:var(--light-ink)}
.pp-about .pp-rows--v > li::after{color:var(--light-accent)}
.pp-about .pp-rows--s > li{background:var(--pp-sys);border:1px solid rgba(135,209,245,.18);color:var(--muted)}
.pp-about .pp-rows--s > li strong{color:var(--ink)}
.pp-about .pp-rows--s > li::after{color:var(--string)}
@media (max-width:520px){.pp-about .pp-rows > li{grid-template-columns:minmax(0,7.2em) minmax(0,1fr) auto;gap:10px;font-size:12px}}
/* workflow */
.pp-about .pp-flow ol.pp-flow-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,.9fr);align-items:center;column-gap:26px}
.pp-about .pp-flow-list > li{position:relative}
.pp-about .pp-flow-list > li:not(:last-child)::after{content:"→";position:absolute;right:-19px;top:50%;transform:translateY(-50%);color:var(--accent);font:500 14px/1 var(--font-mono)}
.pp-about .pp-flow-list > li:not(.pp-fork),.pp-about .pp-fork-list > li{position:relative;padding:12px;border:1px dashed rgba(135,209,245,.55);border-radius:3px;background:rgba(26,32,48,.7);font:400 11px/1.4 var(--font-mono);color:var(--muted);text-align:center}
.pp-about .pp-flow-list li strong{font:500 12.5px/1.35 var(--font-mono);color:var(--ink)}
.pp-about .pp-flow-list li.is-me{border-style:solid;border-color:var(--accent);background:rgba(135,209,245,.1)}
.pp-about .pp-flow-list li.is-end{border-style:solid;border-color:var(--string)}
.pp-about .pp-flow-list li.is-end strong{color:var(--string)}
.pp-about .pp-fork-list{display:grid;gap:28px}
.pp-about .pp-fork-list > li:first-child::after{content:"or";position:absolute;left:0;right:0;bottom:-20px;font:400 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp-about p.pp-flow-cap{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font:400 12px/1.6 var(--font-mono);color:var(--muted)}
.pp-about p.pp-flow-cap strong{color:var(--accent);font-weight:500}
@media (max-width:640px){
  .pp-about .pp-flow ol.pp-flow-list{grid-template-columns:1fr;row-gap:30px}
  .pp-about .pp-flow-list > li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-22px;transform:translateX(-50%) rotate(90deg)}
}
/* operations panel */
.pp-about .pp-op{display:flex;flex-direction:column;gap:6px;padding:22px 20px 20px;background:var(--pp-deep);transition:background-color .2s ease}
.pp-about .pp-op:hover{background:#232b3e}
.pp-about .pp-op::before{content:"";flex:none;width:24px;height:24px;margin-bottom:8px;background:var(--accent);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.pp-about p.pp-op-name{font:600 16.5px/1.2 var(--font-display);letter-spacing:-.005em;color:var(--ink)}
.pp-about p.pp-op-desc{font-size:14px;line-height:1.45;color:var(--muted)}
.pp-about p.pp-op-status{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px;font:400 11px/1 var(--font-mono);color:var(--string)}
.pp-about p.pp-op-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(163,190,140,.18)}
.pp-about p.pp-op-status.is-monthly{color:var(--accent)}
.pp-about p.pp-op-status.is-monthly::before{box-shadow:0 0 0 3px rgba(135,209,245,.18)}
@media (max-width:640px){.pp-about .pp-op{padding:18px 16px}}
.pp-about .pp-op--performance{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 18.5a9 9 0 1 1 14.8 0'/%3E%3Cpath d='m12 14 3.5-4.5'/%3E%3Ccircle cx='12' cy='14.5' r='1.4'/%3E%3C/svg%3E")}
.pp-about .pp-op--accessibility{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='1.8'/%3E%3Cpath d='m5 8.5 7 1.5 7-1.5M12 10v5l-3.5 6M12 15l3.5 6'/%3E%3C/svg%3E")}
.pp-about .pp-op--security{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.2 7.5 9.5 4.3-1.3 7.5-4.9 7.5-9.5V6L12 3Z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E")}
.pp-about .pp-op--hosting{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13' width='17' height='7' rx='1.5'/%3E%3Cpath d='M7.5 7.5h.01M7.5 16.5h.01'/%3E%3C/svg%3E")}
.pp-about .pp-op--integrations{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.pp-about .pp-op--maintenance{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.6-4.5L4 8'/%3E%3Cpath d='M4 4v4h4'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.6 4.5L20 16'/%3E%3Cpath d='M20 20v-4h-4'/%3E%3C/svg%3E")}
.pp-about .pp-ops-foot p.pp-k{flex:none;text-align:left;font:500 11.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* project cards (whole card clickable via the Explore link) */
.pp-about .pp-case{position:relative;display:flex;flex-direction:column;color:var(--light-ink);transition:transform .25s ease,box-shadow .25s ease}
.pp-about .pp-case:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(6,16,24,.16),0 26px 54px rgba(6,16,24,.34)}
.pp-about .pp-case p.pp-bar{font:400 11.5px/1.2 var(--font-mono);color:var(--light-muted)}
.pp-about .pp-case p.pp-bar strong{color:var(--light-accent);font-weight:500}
.pp-about figure.pp-shot{margin:0;padding:14px 18px 0;aspect-ratio:16/10;display:grid;place-items:center;background:linear-gradient(180deg,#f3f5f9,var(--pp-light2))}
.pp-about .pp-shot img{width:100%;height:100%;object-fit:contain}
.pp-about .pp-case p.pp-case-k{font:500 12px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--light-accent)}
.pp-about .pp-case p.pp-case-text{color:var(--light-muted);font-size:15px;line-height:1.55}
.pp-about .pp-case p.pp-go{font:500 12.5px/1.4 var(--font-mono)}
.pp-about .pp-case p.pp-go a{color:var(--light-accent);text-decoration:none}
.pp-about .pp-case p.pp-go a::after{content:"";position:absolute;inset:0;z-index:1}
.pp-about .pp-case p.pp-go a:focus-visible{outline:none}
.pp-about .pp-case:has(a:focus-visible){outline:3px solid var(--accent);outline-offset:4px}
@media (min-width:641px) and (max-width:1060px){
  .pp-about .pp-case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr}
  .pp-about .pp-case p.pp-bar{grid-column:1/-1}
  .pp-about figure.pp-shot{aspect-ratio:auto;height:100%;padding:16px}
  .pp-about .pp-case .pp-case-b{justify-content:center;padding:22px 24px}
}
/* project steps */
.pp-about .pp-cmd strong{color:var(--string);font-weight:400}
.pp-about ol.pp-pipe-list > li{display:grid;grid-template-columns:1.6em 6.4em minmax(0,1fr);gap:0 12px;align-items:baseline;padding:10px 20px;font:400 15px/1.5 var(--font-body);color:var(--muted)}
.pp-about ol.pp-pipe-list > li + li{border-top:1px dashed rgba(255,255,255,.08)}
.pp-about ol.pp-pipe-list > li::before{content:"✓";font:400 13.5px/1.5 var(--font-mono);color:var(--string)}
.pp-about ol.pp-pipe-list > li strong{font:500 13.5px/1.5 var(--font-mono);color:var(--ink)}
.pp-about ol.pp-pipe-list > li.is-release::before{content:"→";color:var(--accent)}
.pp-about ol.pp-pipe-list > li.is-release strong{color:var(--accent)}
@media (max-width:520px){.pp-about ol.pp-pipe-list > li{display:block;position:relative;padding-left:44px}.pp-about ol.pp-pipe-list > li::before{position:absolute;left:20px}.pp-about ol.pp-pipe-list > li strong{display:block}}

/* v4 fixes: list reset removed the engagement-type tag spacing; long row labels wrapped mid-word on phones. */
.pp-about .wp-block-list.pp-types{margin:22px 0 26px}
@media (max-width:520px){.pp-about .pp-rows > li{grid-template-columns:max-content minmax(0,1fr) auto;gap:12px;font-size:11.5px}.pp-about .pp-rows > li strong{font-size:15px}}

/* ================= EXPERIENCE: native-block markup (2026-10-01) ================= */
.pp-xp .wp-block-list{margin:0;padding:0;list-style:none}
.pp-xp div.pp-bar::before{content:"";flex:none;width:34px;height:8px;background:radial-gradient(circle at 4px 4px,#4c566a 3.5px,transparent 4px) 0 0/13px 8px repeat-x}
.pp-xp .pp-cmd strong,.pp-xp .pp-end strong{color:var(--string);font-weight:400}
.pp-xp .pp-log-list a{display:block;position:relative;min-height:32px;padding:7px 4.4em 7px calc(42px + 6.6em);color:var(--ink);text-decoration:none;line-height:1.45}
.pp-xp .pp-log-list a::before{content:"*";position:absolute;left:18px;top:7px;color:var(--accent)}
.pp-xp .pp-log-list code{position:absolute;left:calc(30px + 1.2em);top:7px;padding:0;border:0;background:none;font:inherit;color:var(--pp-warn)}
.pp-xp .pp-log-list kbd{padding:0;border:0;background:none;box-shadow:none;font:inherit;color:var(--string)}
.pp-xp .pp-log-list em{font-style:normal;color:var(--muted)}
.pp-xp .pp-log-list strong{position:absolute;right:18px;top:7px;font-weight:400;color:var(--muted)}
.pp-xp p.pp-end::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:.45em;background:var(--accent);vertical-align:-2px}
@media (prefers-reduced-motion:no-preference){.pp-xp p.pp-end::after{animation:pp-blink 1.1s steps(1) infinite}}
@media (max-width:640px){.pp-xp .pp-log-list a{padding-left:calc(28px + 1em)}.pp-xp .pp-log-list code{display:none}}
.pp-xp p.pp-toc-k{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp-xp .pp-actions{display:flex;flex-wrap:wrap;gap:12px}
.pp-xp .pp-actions .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:14px 18px;border-radius:3px;border:1px solid transparent;font:500 13px/1 var(--font-mono);text-decoration:none;transition:filter .2s ease}
.pp-xp .pp-btn-p .wp-block-button__link{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pp-xp .pp-btn-s .wp-block-button__link{background:transparent;border-color:var(--control-line,#8995a8);color:var(--ink)}
.pp-xp .pp-actions .wp-block-button__link:hover{filter:brightness(1.08)}

/* Commands sit in <code> so WordPress doesn't turn -- into a dash; keep them unstyled. */
.pp .pp-cmd code{padding:0;border:0;background:none;font:inherit;color:inherit}
@media (max-width:640px){.pp-xp div.pp-bar .pp-count{display:none}}

/* Scroll reveal: motion only. Fading text to .35 opacity failed contrast checks mid-scroll. */
@keyframes pp-rise{from{transform:translateY(28px)}to{transform:none}}

/* Experience hero: top-align the columns so the career log doesn't move when web fonts rewrap the copy (CLS). */
.pp-xp .pp-grid{align-items:start}

/* ================= ABOUT v5: hero background is a block setting ================= */
/* The pp-cine group's Background colour (block Styles > Color) is the hero colour.
   The photo fades into it with a mask instead of a fixed navy overlay, so any colour works. */
.pp-about .pp-cine-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.06) 24%,rgba(0,0,0,.45) 44%,rgba(0,0,0,.9) 60%,#000 70%),linear-gradient(0deg,rgba(0,0,0,.45) 0,#000 22%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.06) 24%,rgba(0,0,0,.45) 44%,rgba(0,0,0,.9) 60%,#000 70%),linear-gradient(0deg,rgba(0,0,0,.45) 0,#000 22%);mask-composite:intersect}
.pp-about .pp-cine-photo::after{background:radial-gradient(130% 100% at 74% 40%,transparent 58%,rgba(0,0,0,.3) 100%)}
@media (max-width:1060px){
  .pp-about .pp-cine-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1) 34%,rgba(0,0,0,.6) 56%,#000 72%),linear-gradient(0deg,rgba(0,0,0,.45) 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1) 34%,rgba(0,0,0,.6) 56%,#000 72%),linear-gradient(0deg,rgba(0,0,0,.45) 0,#000 22%)}
  .pp-about .pp-cine-photo::after{background:none}
}
@media (max-width:760px){
  .pp-about .pp-cine-photo{-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent);mask-image:linear-gradient(180deg,#000 66%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
  .pp-about .pp-cine-photo::after{background:radial-gradient(120% 90% at 55% 35%,transparent 50%,rgba(0,0,0,.3) 100%)}
}

/* Site-wide scale (2026-10-02): same heading sizes, card corners, buttons and section rhythm as the rest of the site. */
main .pp-about .pp-cine-title,main .pp .pp-h1,main .pp-xp .pp-h1{font-size:clamp(40px, 4.6vw, 66px);font-weight:700;line-height:1.08;letter-spacing:-.035em}
main .pp .pp-h2{font-size:clamp(32px, 3.6vw, 52px);line-height:1.1;letter-spacing:-.025em}
.pp .pp-win,.pp .pp-glance,.pp-about .pp-glance-band .pp-glance{border-radius:12px}
.pp-about .pp-actions .wp-block-button__link,.pp-xp .pp-actions .wp-block-button__link{min-height:48px;padding:12px 22px;font-size:14px}
main .pp p.hjw-caret{margin:0 0 16px}