/* Thom as a drawn caricature (js/thom.js, img/thom.svg): the portrait in "Who you work with" and the small faces */
.portrait.toon, .face.toon, #about .portrait.toon{--toon-bg:#f6c746; background:var(--toon-bg)}
.portrait.toon{cursor:pointer; -webkit-tap-highlight-color:transparent; isolation:isolate}
.portrait > img.thom-still, .portrait.toon > svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.portrait > img.thom-still{object-fit:cover}
.portrait.toon .initial, .portrait.toon .ph-note{display:none}
.face.toon{position:relative; overflow:hidden; color:transparent}
.face.toon > svg{position:absolute; inset:0; width:100%; height:100%; display:block}

/* "Hi!" balloon, hand drawn like the doodles: top left, above the waving hand, tail towards his mouth */
.thom-hi{position:absolute; top:7%; left:4%; width:clamp(96px, 24%, 150px); aspect-ratio:120/84; pointer-events:none; opacity:0; transform-origin:76% 92%; z-index:1}
.thom-hi svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:#fff; stroke:#1d1d1d; stroke-width:3.4; stroke-linejoin:round; transform:scaleX(-1)}
.thom-hi b{position:absolute; inset:0 0 26% 0; display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:clamp(1.25rem, 2.1vw, 1.75rem); letter-spacing:-.01em; color:#1d1d1d}
.thom-hi.go{animation:thom-hi 1.95s cubic-bezier(.2,.8,.2,1) .28s both}
@keyframes thom-hi{
  0%{opacity:0; transform:scale(.2) rotate(-10deg)}
  13%{opacity:1; transform:scale(1.08) rotate(4deg)}
  21%{transform:scale(1) rotate(0)}
  82%{opacity:1; transform:scale(1) rotate(0)}
  100%{opacity:0; transform:scale(.8) rotate(-5deg)}
}
@media (prefers-reduced-motion: reduce){ .thom-hi{display:none} }

/* Dozing off after a while without any movement (js/thom.js): three Z's float up and away beside his cap */
.thom-zzz{position:absolute; top:13%; right:3%; width:24%; height:22%; pointer-events:none; z-index:4}
.thom-zzz i{position:absolute; left:0; bottom:0; font:700 clamp(1.9rem, 3.4vw, 3rem)/1 var(--f-display); font-style:normal; color:#1d1d1d; opacity:0}
.portrait.napping .thom-zzz i{animation:thom-z 3s cubic-bezier(.3,.1,.4,1) infinite}
.portrait.napping .thom-zzz i:nth-child(2){animation-delay:1s}
.portrait.napping .thom-zzz i:nth-child(3){animation-delay:2s}
@keyframes thom-z{0%{opacity:0; transform:translate(0,0) rotate(-14deg) scale(.55)} 18%{opacity:1} 75%{opacity:.9} 100%{opacity:0; transform:translate(150%,-190%) rotate(12deg) scale(1.35)}}
@media (prefers-reduced-motion: reduce){ .thom-zzz{display:none} }

/* PJ under Thom in "Who you work with": same layout, a bit of air between them */
.about.about-pj{margin-top:clamp(56px, 8vw, 128px)}
/* PJ's portrait on the right (Thom's on the left); stacked on phones with the drawing first */
.about.about-pj{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.about.about-pj .portrait{order:2; justify-self:end}
@media (max-width: 900px){ .about.about-pj{grid-template-columns:minmax(0,1fr)} .about.about-pj .portrait{order:0; justify-self:start} }
/* PJ mirrors Thom: his text hugs the drawing with the same gap (block pushed to the right of its column, text still
   left-aligned), and his own background colour */
.about.about-pj .about-copy{justify-self:end; width:min(100%, 640px)}
@media (max-width: 900px){ .about.about-pj .about-copy{justify-self:stretch; width:auto} }
#about .about-pj .portrait.toon{--toon-bg:var(--lilac, #aaa4e0)}