.hero-with-portrait {
display:flex;
align-items:center;
justify-content:center;
gap:2.5rem;
flex-wrap:wrap
}

.hero-portrait {
flex:0 0 auto;
max-width:220px;
border:1px solid var(--border);
border-radius:10px;
overflow:hidden;
box-shadow:0 0 24px #0f83
}

.hero-portrait img {
display:block;
width:100%;
height:auto
}

.toolkit-badges {
display:flex;
flex-wrap:wrap;
gap:.6rem;
margin-top:1.25rem
}

.info-card p a {
text-decoration:underline;
text-decoration-color:#0f86;
text-underline-offset:3px;
text-decoration-thickness:1px;
transition:var(--trans)
}

.info-card p a:hover {
text-decoration-color:var(--cyan);
color:var(--cyan)
}

.hero-portrait-link {
display:block;
text-decoration:none;
cursor:zoom-in
}

.lightbox {
display:none;
position:fixed;
inset:0;
z-index:1000;
align-items:center;
justify-content:center;
background:#000000eb;
padding:2rem
}

.lightbox:target {
display:flex
}

.lightbox-inner {
max-width:90vw;
max-height:90vh;
border:1px solid var(--border);
border-radius:10px;
overflow:hidden;
box-shadow:0 0 24px #0f83
}

.lightbox-inner img {
display:block;
max-width:90vw;
max-height:90vh;
width:auto;
height:auto
}

.lightbox-close {
position:fixed;
top:1.25rem;
right:1.5rem;
width:2.75rem;
height:2.75rem;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
line-height:1;
color:var(--green);
text-decoration:none;
border:1px solid var(--border);
border-radius:50%;
background:var(--bg2);
box-shadow:0 0 12px #0f84;
transition:var(--trans)
}

.lightbox-close:hover {
color:var(--bg);
background:var(--green);
box-shadow:0 0 16px #0f8a
}

@media (max-width: 640px) {
.hero-with-portrait {
flex-direction:column
}

.hero-portrait {
max-width:170px
}
}