.person {
text-align: center;
}
.person__inner {
display: flex;
flex-direction: column;
align-items: center;
max-width: 34rem;
}
.person__portrait {
display: block;
width: 10.9375rem;
max-width: 60%;
margin-bottom: var(--space-5);
}
.person__portrait img {
display: block;
width: 100%;
height: auto;
}
.person__name {
margin: 0;
font-size: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text);
}
.person__role {
margin: var(--space-2) 0 0;
font-size: var(--font-size-md);
color: var(--color-accent);
}
.person__cred {
margin: var(--space-1) 0 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.person__lede {
margin: var(--space-4) 0 0;
color: var(--color-text-muted);
-webkit-hyphens: none;
hyphens: none;
}
.person__contact {
list-style: none;
margin: var(--space-6) 0 0;
padding: 0;
width: 100%;
display: grid;
gap: var(--space-1);
}
.person__contact a {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 2.75rem;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--duration-fast) var(--easing-standard);
}
.person__contact a:hover,
.person__contact a:focus-visible {
background-color: rgb(255 255 255 / 0.06);
}
.person__contact .person__mail {
white-space: normal;
overflow-wrap: anywhere;
}
.person__contact .icon {
width: 1.125rem;
height: 1.125rem;
color: var(--color-accent);
flex-shrink: 0;
}
.person__contact .person__icon--filled {
fill: currentColor;
stroke: none;
}
.person__contact .person__icon--stroked {
fill: none;
stroke: currentColor;
stroke-width: 1.75;
}
.person__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-6);
}
.person__links {
list-style: none;
margin: var(--space-7) 0 0;
padding: 0;
width: 100%;
border-top: 1px solid var(--color-border);
}
.person__links li + li {
border-top: 1px solid var(--color-border);
}
.person__links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 2.75rem;
padding: var(--space-3) var(--space-2);
color: var(--color-text);
text-decoration: none;
text-align: left;
transition: color var(--duration-fast) var(--easing-standard);
}
.person__links a:hover,
.person__links a:focus-visible {
color: var(--color-accent);
}
.person__links .icon {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
flex-shrink: 0;
}
.person__note {
margin: var(--space-6) 0 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.check-options {
list-style: none;
margin: var(--space-7) 0 0;
padding: 0;
display: grid;
gap: var(--space-5);
width: 100%;
text-align: left;
}
@media (min-width: 900px) {
.check-options {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.check-option {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-bg-subtle);
}
.check-option h2 {
margin: 0;
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--color-text);
}
.check-option p {
margin: 0;
flex: 1;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.person--wide .person__inner {
max-width: 64rem;
}
.linktree {
list-style: none;
margin: var(--space-7) 0 0;
padding: 0;
width: 100%;
display: grid;
gap: var(--space-3);
}
.linktree a {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 3rem;
padding: var(--space-3) var(--space-5);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--duration-fast) var(--easing-standard),
background-color var(--duration-fast) var(--easing-standard);
}
.linktree a:hover,
.linktree a:focus-visible {
border-color: var(--color-white);
background-color: rgb(255 255 255 / 0.08);
}
@media (max-width: 599.98px) {
.person__contact a,
.person__links a {
justify-content: flex-start;
text-align: left;
}
.person__links a {
justify-content: space-between;
}
}
.person-trust {
padding-top: 0;
text-align: center;
}
.person-trust__inner {
max-width: 34rem;
margin-inline: auto;
padding-top: var(--space-7);
border-top: 1px solid var(--color-border);
}
.person-trust__titel {
margin: 0 0 var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.person-trust__claim {
margin: 0 auto var(--space-5);
max-width: 26rem;
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text);
hyphens: none;
text-wrap: balance;
}
.person-trust__claim-icon {
display: inline-block;
vertical-align: -0.18em;
margin-right: 0.35em;
width: 1.1rem;
height: 1.1rem;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
color: var(--color-accent);
}
.person-trust__band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.person-trust__seals {
display: flex;
align-items: center;
gap: var(--space-3);
}
.person-trust__seal {
width: auto;
height: 2.75rem;
}
.person-trust__more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
font-size: var(--font-size-sm);
font-weight: 500;
text-decoration: none;
color: var(--color-accent);
border-bottom: 1px solid transparent;
}
.person-trust__more:hover,
.person-trust__more:focus-visible {
color: var(--color-text);
border-bottom-color: var(--color-text);
}
.person-trust__arrow {
width: 0.9rem;
height: 0.9rem;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
rotate: 45deg;
transition: translate var(--duration-fast) var(--easing-standard);
}
.person-trust__more:hover .person-trust__arrow,
.person-trust__more:focus-visible .person-trust__arrow {
translate: 3px -3px;
}
@media (max-width: 419.98px) {
.person-trust__band {
flex-direction: column;
gap: var(--space-4);
}
.person-trust__seal {
height: 2.4rem;
}
}