/* staff — the page's own styles, on this page only. */

.product-back { display: inline-block; margin-bottom: 1.4rem; color: var(--muted); font-size: .92rem; }

.product-back:hover { color: var(--mark, var(--primary)); }

.product-crumbs .product-back { margin-bottom: 0; }

/* A person's page: the portrait on the left, kept in sight; the rest on the right. */

.person-page { padding-top: clamp(1.6rem, 3vw, 2.4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.person-page__back { display: block; width: fit-content; margin-bottom: 1.4rem; }

.person-page__grid { display: grid; gap: 2rem; }

.person-page.has-photo .person-page__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: start; }

.person-page.is-text .person-page__grid { max-width: 44rem; }

.person-page__photo { margin: 0; position: sticky; top: calc(var(--header-sticky-h, 0px) + 1.5rem); }

.person-page__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: var(--radius); display: block; }

.person-page__main { display: grid; gap: 2rem; min-width: 0; }

.person-page__name { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; margin: .3rem 0 .8rem; text-wrap: balance; }

.person-page__bio { max-width: 44rem; }

.person-page__photos h2 { font-size: 1.3rem; margin: 0 0 .9rem; }

.person-page__photos .photo-grid__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.person-book h2 { font-size: 1.4rem; margin: 0 0 .3rem; }

.person-book__sub { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }

.service-picks { list-style: none; margin: 0; padding: 0; border: var(--card-border, 1px solid var(--card-line)); border-radius: var(--radius); background: var(--surface); overflow: hidden; }

.service-pick { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; }

.service-pick + .service-pick { border-top: 1px solid var(--line); }

.service-pick:hover { background: var(--hover-wash); }

.service-pick__main { flex: 1; min-width: 0; display: grid; gap: .2rem; }

.service-pick__name { color: var(--ink); font-weight: 600; text-decoration: none; }

.service-pick__name::after { content: ''; position: absolute; inset: 0; }

.service-pick:hover .service-pick__name { color: var(--mark, var(--primary)); }

.service-pick:has(.service-pick__name:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }

.service-pick__len { font-size: .85rem; color: var(--muted); }

.service-pick__side { display: grid; justify-items: end; gap: .2rem; text-align: right; }

.service-pick__price { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }

.service-pick__near { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); white-space: nowrap; }

.service-pick__near::before { content: ''; width: .5rem; height: .5rem; border-radius: 999px; background: var(--muted); }

.service-pick__near.is-free { color: var(--body-text); }

.service-pick__near.is-free::before { background: var(--success); }

.service-pick__go { color: var(--muted); font-size: 1.4rem; line-height: 1; }

.person-hours { margin: 0; padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--tint); color: var(--body-text); font-size: .95rem; }

.person-hours__title { display: block; margin-bottom: .3rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.person-hours strong { color: var(--ink); font-weight: 600; }

.person-more { border-top: 1px solid var(--line); margin-top: 1rem; }

@media (max-width: 899px) {
  .person-page.has-photo .person-page__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .person-page__photo { position: static; max-width: 28rem; }
  .person-page__photos .photo-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
  .person-page__photo { margin: 0 -24px; max-width: none; }
  .person-page__photo img { aspect-ratio: 1; border-radius: 0; }
  .service-pick { flex-wrap: wrap; }
  .service-pick__side { justify-items: start; text-align: left; flex-basis: 100%; order: 3; }
  .service-pick__go { display: none; }
}