/* The SVG converts luminance to alpha, including on mobile WebKit. */
.hero-visual{isolation:isolate;margin-right:25px}
.hero-main-photo{width:88%;object-position:35% center}
.hero-portrait{position:absolute;z-index:3;right:-52px;bottom:-1px;width:490px;max-width:95%;margin:0;pointer-events:none}
.hero-portrait>img{width:100%;height:auto;object-fit:contain;mask-image:url('/assets/joachim-mask-alpha.svg');mask-mode:alpha;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url('/assets/joachim-mask-alpha.svg');-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.hero-portrait figcaption{position:absolute;right:20px;bottom:0;display:flex;flex-direction:column;gap:2px;background:#fff;padding:15px 22px;border-left:4px solid #087cc1;box-shadow:0 8px 28px #07345214;border-radius:4px;transform:translateY(40%)}
.hero-portrait figcaption strong{font-size:19px;line-height:1.4}
.hero-portrait figcaption span{font-size:12px;color:#506a7e}
.photo-caption{left:15px;bottom:18px;max-width:180px;line-height:1.7;font-size:8px;padding:10px;z-index:4}
@media(min-width:1450px){.hero-portrait{width:530px}}
@media(min-width:851px) and (max-width:1150px){.hero-portrait{width:420px;max-width:110%;right:-28px}.hero-visual{margin-right:10px}.photo-caption{max-width:125px;font-size:7px;left:10px;bottom:15px}.hero-portrait figcaption{padding:13px 17px;right:10px}}
@media(min-width:641px) and (max-width:850px){.hero-portrait{width:480px;max-width:80%;right:-15px}.hero-main-photo{width:90%}}
@media(max-width:640px){.hero-visual{height:410px;margin-right:12px;margin-bottom:15px}.hero-main-photo{width:90%;object-position:32% center}.hero-portrait{width:340px;max-width:110%;right:-17px;bottom:0}.hero-portrait figcaption{padding:10px 13px;right:5px;transform:translateY(65%)}.hero-portrait figcaption strong{font-size:16px}.hero-portrait figcaption span{font-size:10px}.photo-caption{left:8px;bottom:12px;max-width:90px;font-size:6px;padding:7px}.round-seal{z-index:4}}

/* The brush stroke fits inside the existing heading margin. */
.hero-stroke{position:relative;display:inline-block;color:var(--rust)}
.hero-stroke>svg{position:absolute;left:3%;bottom:-12px;width:94%;height:12px;pointer-events:none}