/* People pages: Loren's biography (/read-more), his designations, his family, and the seven team biographies.
   Loaded after system.css (page cssAfter). Same language as Our Team: uniform circle portraits with hairline rings,
   Lora display with italic emphasis, navy stages, warm paper, tracked eyebrows, the short rule. */

/* ---------- bio hero: copy left, circle portrait on a navy stage ---------- */
.person-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); margin-left: var(--gutter); min-height: min(760px, calc(100svh - 106px)); }
.person-hero-copy { padding: 26px 56px 76px 0; align-self: center; }
.person-hero .eyebrow { margin-bottom: 24px; }
.person-hero h1 { font-size: clamp(56px, 5.6vw, 92px); line-height: 1.02; letter-spacing: -.064em; margin-bottom: 22px; }
.person-hero-credentials { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 30px; font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--muted); }
.person-hero-credentials span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px; border-radius: 50%; background: #9db4c6; vertical-align: middle; }
.person-hero .short-rule { margin-bottom: 29px; }
.person-hero-lede { font-family: var(--serif); font-size: clamp(21px, 1.75vw, 26px); line-height: 1.5; letter-spacing: -.022em; color: var(--ink); max-width: 560px; margin-bottom: 38px; }
.person-hero-stage { position: relative; margin: 0; display: grid; place-items: center; min-height: 640px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #1d4565 0%, var(--navy-3) 62%, var(--navy) 100%); }
.person-hero-stage::before { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: url('media/mountains.webp') center bottom / cover no-repeat; opacity: .42; z-index: -1; mask-image: linear-gradient(transparent, #000 70%); -webkit-mask-image: linear-gradient(transparent, #000 70%); }
.person-hero-portrait { position: relative; width: clamp(250px, 25vw, 380px); aspect-ratio: 1; border-radius: 50%; margin-bottom: 40px; }
.person-hero-portrait::before, .person-hero-portrait::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; animation: ring-in 1.6s var(--ease) both; }
.person-hero-portrait::before { inset: -16px; border: 1px solid rgb(169 205 238 / .55); }
.person-hero-portrait::after { inset: -46px; border: 1px solid rgb(169 205 238 / .2); animation-delay: .25s; }
.person-hero-portrait img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #e9eef1; box-shadow: 0 40px 80px -36px rgb(0 0 0 / .7); animation: portrait-in 1.4s var(--ease) both; }
.person-hero-tag { position: absolute; left: 40px; right: 40px; bottom: 36px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; color: #dbe6ee; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.person-hero-count { white-space: nowrap; font-family: var(--serif); font-size: 17px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: #fff; }
.person-hero-count i { font-style: normal; color: #7f9db4; margin: 0 4px; }
@keyframes ring-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes portrait-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- bio body: profile card + prose ---------- */
.bio-section { padding-top: clamp(80px, 8vw, 120px); }
.bio-section .bio-layout { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
.profile-card { position: sticky; top: 40px; padding: 34px 32px 32px; background: var(--paper-soft); border: 1px solid var(--line); }
.profile-card-head { display: flex; align-items: center; gap: 18px; padding-bottom: 24px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.profile-card-head img { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--paper-soft), 0 0 0 6px #c9d4dc; }
.profile-card-name { font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: -.04em; color: var(--ink); margin: 0 0 4px; }
.profile-card-role { font-size: 14px; line-height: 1.45; margin: 0; color: #41576b; }
.profile-facts { margin: 0 0 28px; }
.profile-facts > div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.profile-facts dt { font-size: 11px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.profile-facts dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.profile-card .button { width: 100%; gap: 16px; padding-left: 18px; padding-right: 18px; }
.profile-card-note { margin: 14px 0 0; font-size: 13.5px; text-align: center; color: var(--muted); }
.bio-prose { max-width: 740px; }
.prose .text-link { text-decoration: none; }
.bio-prose h2 { position: relative; display: flex; align-items: center; gap: 18px; font-size: clamp(30px, 2.5vw, 38px); }
.bio-prose h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bio-prose > h2:first-child { margin-top: 0; }
.own-words { position: relative; margin: 8px 0 30px; padding: clamp(28px, 3vw, 42px) clamp(26px, 3vw, 44px) 30px; background: var(--paper-warm); border-left: 2px solid var(--blue); }
.own-words::before { content: "“"; position: absolute; top: 4px; right: 26px; font-family: var(--serif); font-size: 120px; line-height: 1; color: rgb(7 89 173 / .14); }
.own-words blockquote { margin: 0; padding-right: 44px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.62; letter-spacing: -.012em; color: var(--ink); }
.own-words blockquote p { margin: 0 0 16px; }
.own-words blockquote p:last-child { margin: 0; }
.own-words figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--ink); }
.own-words figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.bio-note { margin: 30px 0 0; padding: 22px 26px; border: 1px solid #c7d8e8; background: #f6faff; }
.bio-note .eyebrow { font-size: 11px; margin-bottom: 8px; color: var(--blue-dark); }
.bio-note p:last-child { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.5; letter-spacing: -.02em; color: var(--ink); }

/* ---------- pull-quote band ---------- */
.bio-pull { padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(64px, 7vw, 104px); }
.bio-pull .pull-quote blockquote { font-size: clamp(27px, 2.6vw, 40px); }
.twain .pull-quote figcaption, .verse .pull-quote figcaption { color: #b9cbd8; }
.section--navy .pull-quote--center::before { color: #5d87ab; }

/* ---------- team rail: pager + circles ---------- */
.people-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 36px; }
.people-pager-link { display: flex; flex-direction: column; gap: 16px; padding: 24px 28px 26px; background: #fff; border: 1px solid var(--line); transition: border-color .35s, box-shadow .45s var(--ease), transform .45s var(--ease); }
.people-pager-link--next { align-items: flex-end; text-align: right; }
.people-pager-dir { font-size: 11px; font-weight: 650; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.people-pager-dir span { font-size: 18px; letter-spacing: 0; vertical-align: -2px; }
.people-pager-person { display: flex; align-items: center; gap: 18px; }
.people-pager-link--next .people-pager-person { flex-direction: row-reverse; }
.people-pager-person img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #c9d4dc; transition: box-shadow .4s var(--ease); }
.people-pager-person strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; letter-spacing: -.04em; color: var(--ink); transition: color .25s; }
.people-pager-person small { display: block; margin-top: 4px; font-size: 14px; color: #41576b; }
@media (hover: hover) {
  .people-pager-link:hover { border-color: #b9c9d6; box-shadow: 0 24px 50px -32px rgb(16 47 73 / .5); transform: translateY(-2px); }
  .people-pager-link:hover strong { color: var(--blue); }
  .people-pager-link:hover img { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--blue); }
}
.people-grid .person-card.is-current { background: #fbfcfd; }
.people-grid .person-card.is-current .person-card-portrait::after { border-color: var(--blue); inset: -12px; }
.person-card-here { margin: 12px 0 0; font-size: 10.5px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
.people-back { margin: 34px 0 0; text-align: center; }

/* ---------- Loren: learning list, credential chips, journey, photo pair ---------- */
.bio-prose h3 { margin-top: 44px; }
.learn-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 30px !important; padding: 0 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.learn-list li { margin: 0; padding: 18px 16px 18px 0; font-family: var(--serif); font-size: 18px; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.learn-list li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.learn-num { display: block; margin-bottom: 10px; font-family: var(--sans); font-size: 11px; font-weight: 650; letter-spacing: .2em; color: var(--blue); }

.cred-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cred-chips li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cred-chips a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 28px 30px; height: 100%; background: #fff; transition: background .35s; }
.cred-chip-abbr { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 1px solid #c9d4dc; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px #e3e9ee; font-family: var(--serif); font-size: 22px; letter-spacing: -.03em; color: var(--ink); transition: border-color .35s, color .35s; }
.cred-chip-abbr sup, .cred-seals-abbr sup, .credential-seal sup, .cred-thumb sup { font-size: .45em; vertical-align: super; margin-left: 1px; }
.cred-chip-name { font-family: var(--serif); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -.025em; color: var(--ink); }
.cred-chip-arrow { font-size: 22px; color: #6c8598; transition: transform .3s var(--ease), color .3s; }
@media (hover: hover) { .cred-chips a:hover { background: #f8fafb; } .cred-chips a:hover .cred-chip-abbr { border-color: var(--blue); color: var(--blue); } .cred-chips a:hover .cred-chip-arrow { color: var(--blue); transform: translateX(4px); } }

.journey { --line-top: 33px; position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin: 0 0 clamp(60px, 6vw, 90px); padding: 0; }
.journey::before, .journey::after { content: ""; position: absolute; left: 6px; right: 6px; top: var(--line-top); height: 1px; background: #cbd5dd; }
.journey::after { background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease) .2s; }
.journey.is-drawn::after { transform: scaleX(1); }
.journey-stop { position: relative; padding-top: 0; }
.journey-when { min-height: 20px; margin: 0 0 18px; font-size: 11px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.journey-dot { position: absolute; left: 0; top: calc(var(--line-top) - 7px); width: 15px; height: 15px; border-radius: 50%; background: var(--paper-warm); border: 1px solid #9fb4c5; z-index: 1; transition: background .5s, border-color .5s; transition-delay: calc(var(--i) * .42s + .3s); }
.journey.is-drawn .journey-dot { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 5px var(--paper-warm); }
.journey-stop h3 { margin: 30px 0 10px; font-size: clamp(25px, 2.1vw, 32px); line-height: 1.1; letter-spacing: -.045em; }
.journey-stop p:last-child { margin: 0; font-size: 15.5px; line-height: 1.65; }
.personal-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
.pastimes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 30px !important; padding: 0 !important; }
.pastimes li { margin: 0; padding: 8px 16px; border: 1px solid #cbd7e0; border-radius: 99px; background: #fff; font-size: 14px; line-height: 1.4; color: var(--ink); }
.photo-pair { position: relative; display: block; aspect-ratio: 1 / 1.08; }
.photo-pair figure { position: absolute; margin: 0; overflow: hidden; background: #fff; padding: 10px; box-shadow: 0 34px 70px -34px rgb(16 47 73 / .55); transition: transform .9s var(--ease); }
.photo-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-pair-a { left: 0; top: 0; width: 52%; height: 86%; transform: rotate(-2.2deg); }
.photo-pair-b { right: 0; bottom: 6%; width: 64%; aspect-ratio: 2 / 1.12; transform: rotate(1.8deg); }
.photo-pair-tag { position: absolute; left: 0; bottom: 0; font-size: 12px; font-weight: 650; letter-spacing: .26em; text-transform: uppercase; color: var(--blue-dark); }
@media (hover: hover) { .photo-pair:hover .photo-pair-a { transform: rotate(-3deg) translateY(-4px); } .photo-pair:hover .photo-pair-b { transform: rotate(2.4deg) translateY(-4px); } }

/* ---------- designations ---------- */
.cred-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); margin-left: var(--gutter); min-height: min(760px, calc(100svh - 106px)); }
.cred-hero-copy { padding: 26px 56px 76px 0; align-self: center; }
.cred-hero .eyebrow { margin-bottom: 24px; }
.cred-hero h1 { font-size: clamp(52px, 4.9vw, 80px); line-height: 1.04; letter-spacing: -.063em; margin-bottom: 31px; }
.cred-hero .short-rule { margin-bottom: 29px; }
.cred-hero .page-hero-lede { font-family: var(--serif); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.55; letter-spacing: -.02em; color: var(--ink); max-width: 560px; }
.cred-hero-stage { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 70px clamp(30px, 4vw, 70px) 44px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 70% 60% at 50% 40%, #1d4565 0%, var(--navy-3) 62%, var(--navy) 100%); }
.cred-hero-stage::before { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: url('media/mountains.webp') center bottom / cover no-repeat; opacity: .35; z-index: -1; mask-image: linear-gradient(transparent, #000 70%); -webkit-mask-image: linear-gradient(transparent, #000 70%); }
.cred-seals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 34px) clamp(12px, 1.6vw, 26px); }
.cred-seals li { animation: ring-in 1.1s var(--ease) both; animation-delay: calc(var(--i) * 90ms + .15s); }
.cred-seals a { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.cred-seals-abbr { position: relative; display: grid; place-items: center; width: clamp(96px, 9vw, 138px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(169 205 238 / .6); box-shadow: inset 0 0 0 7px var(--navy-3), inset 0 0 0 8px rgb(169 205 238 / .22); font-family: var(--serif); font-size: clamp(24px, 2.1vw, 32px); letter-spacing: -.035em; color: #fff; transition: border-color .35s, background .35s; }
.cred-seals-name { max-width: 170px; font-size: 12.5px; line-height: 1.45; color: #b9cbd8; }
@media (hover: hover) { .cred-seals a:hover .cred-seals-abbr { border-color: #fff; background: rgb(255 255 255 / .06); } .cred-seals a:hover .cred-seals-name { color: #fff; } }
.cred-hero-tag { display: flex; align-items: center; gap: 14px; margin: 0; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .16); font-size: 12px; letter-spacing: .14em; color: #b9cbd8; }
.cred-hero-tag img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--navy), 0 0 0 4px rgb(169 205 238 / .5); }
.cred-hero-tag strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: -.02em; color: #fff; margin-bottom: 2px; }
.cred-split { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
.cred-index { margin-top: 34px; }
.cred-index ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cred-index a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink); transition: color .25s, padding .3s var(--ease); }
.cred-index a span { grid-row: span 2; font-family: var(--serif); font-weight: 400; color: #9aa9b8; }
.cred-index small { font-size: 13px; font-weight: 400; color: var(--muted); }
@media (hover: hover) { .cred-index a:hover { color: var(--blue); padding-left: 4px; } }
.credentials { border-top: 1px solid var(--line); }
.credential { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(28px, 3.4vw, 54px); padding: clamp(40px, 4vw, 58px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 30px; }
.credential-mark { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.credential-seal { position: relative; display: grid; place-items: center; width: 150px; aspect-ratio: 1; border-radius: 50%; border: 1px solid #b9c9d6; box-shadow: inset 0 0 0 8px #fff, inset 0 0 0 9px #e1e8ee; font-family: var(--serif); font-size: 30px; letter-spacing: -.035em; color: var(--ink); }
.credential-seal::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed #d4dde5; }
.credential:target .credential-seal { border-color: var(--blue); color: var(--blue); }
.credential-since { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: .2em; line-height: 1.6; text-transform: uppercase; color: var(--muted); max-width: 150px; }
.credential-num { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; font-size: 12px; font-weight: 650; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-dark); }
.credential-num span { font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: .02em; color: #9aa9b8; }
.credential-body h3 { font-size: clamp(28px, 2.5vw, 40px); line-height: 1.12; letter-spacing: -.045em; margin-bottom: 20px; }
.credential-body > p { font-size: 17.5px; line-height: 1.78; max-width: 720px; }
.credential-body > :last-child { margin-bottom: 0; }
.credential-body sup, .credential-quote sup { font-size: .6em; line-height: 0; }
.credential-quote { margin: 4px 0 0; padding: 26px 30px; background: var(--paper-warm); border-left: 2px solid var(--blue); max-width: 720px; }
.credential-quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.62; color: var(--ink); }
.credential-quote blockquote p { margin: 0; }
.credential-quote figcaption { margin-top: 14px; font-size: 11px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.credential-parts { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 6px 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 720px; }
.credential-parts li { padding: 16px 12px 4px 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.credential-parts li + li { padding-left: 12px; border-left: 1px solid var(--line); }
.credential-parts span { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; border: 1px solid var(--blue); font-family: var(--serif); font-size: 13px; color: var(--blue); }
.credential-also { padding: 44px 0 0; }
.credential-also .eyebrow { margin: 0; color: var(--muted); }
.credential-also + .credential { padding-top: 26px; }
#cbda .credential-seal { font-size: 26px; border-style: solid; }
.verse .pull-quote blockquote { font-size: clamp(30px, 3vw, 46px); }

/* ---------- family ---------- */
.family-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 4vw, 70px); padding: 26px var(--inline) clamp(60px, 6vw, 96px); min-height: min(760px, calc(100svh - 106px)); background: linear-gradient(180deg, #fff 0%, #fff 55%, var(--paper-warm) 100%); }
.family-hero-copy { align-self: center; padding: 20px 0; }
.family-hero .eyebrow { margin-bottom: 24px; }
.family-hero h1 { font-size: clamp(56px, 5.6vw, 92px); line-height: 1.02; letter-spacing: -.064em; margin-bottom: 31px; }
.family-hero .short-rule { margin-bottom: 29px; }
.family-hero .page-hero-lede { font-family: var(--serif); font-size: clamp(20px, 1.65vw, 25px); line-height: 1.55; letter-spacing: -.02em; color: var(--ink); max-width: 540px; }
.family-hero-stack { position: relative; aspect-ratio: 1 / .92; }
.stack-photo { position: absolute; margin: 0; padding: 10px; background: #fff; box-shadow: 0 40px 80px -40px rgb(16 47 73 / .6), 0 1px 0 rgb(0 0 0 / .04); animation: stack-in 1.3s var(--ease) both; }
.stack-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stack-photo--a { left: 4%; top: 0; width: 38%; height: 92%; transform: rotate(-3deg); z-index: 2; }
.stack-photo--b { right: 3%; top: 2%; width: 44%; aspect-ratio: 1; transform: rotate(2.5deg); animation-delay: .12s; }
.stack-photo--c { right: 0; bottom: 0; width: 64%; aspect-ratio: 2 / 1.1; transform: rotate(-1deg); z-index: 3; animation-delay: .24s; }
@keyframes stack-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.family-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: clamp(10px, 1.1vw, 16px); }
.family-photo { position: relative; margin: 0; overflow: hidden; background: #e9e6df; }
.family-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.family-photo::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(9 28 43 / .62)); pointer-events: none; }
.family-photo figcaption { position: absolute; left: 22px; bottom: 18px; z-index: 1; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.family-photo--evening, .family-photo--cycling, .family-photo--garden { aspect-ratio: 1; }
.family-photo--wedding { grid-column: 1; grid-row: 2 / span 2; }
.family-photo--dogs, .family-photo--porch { grid-column: 2 / span 2; aspect-ratio: 2 / 1; }
.family-photo--wedding img { object-position: 50% 30%; }
.family-photo--evening { grid-column: 1; grid-row: 1; }
.family-photo--cycling { grid-column: 2; grid-row: 1; }
.family-photo--garden { grid-column: 3; grid-row: 1; }
.family-photo--dogs { grid-row: 2; }
.family-photo--porch { grid-row: 3; }
@media (hover: hover) { .family-photo:hover img { transform: scale(1.035); } }
.cred-thumb { display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; gap: 4px; padding: 18px 26px; background: radial-gradient(ellipse 80% 70% at 50% 40%, #1d4565, var(--navy-3) 70%); }
.cred-thumb span { display: grid; place-items: center; width: 74%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(169 205 238 / .5); font-family: var(--serif); font-size: clamp(14px, 1.15vw, 17px); color: #fff; }
.team-thumb { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 10px; padding: 0 22px; background: var(--paper-soft); }
.team-thumb img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #c9d4dc; }

/* ---------- responsive ---------- */
@media (min-width: 1800px) {
  .person-hero, .cred-hero { margin-left: max(var(--gutter), calc((100vw - var(--wide)) / 2)); }
}
@media (max-width: 1250px) {
  .learn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .learn-list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cred-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .credential-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .credential-parts li:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1100px) {
  .person-hero, .cred-hero { margin-left: 40px; min-height: 0; }
  .person-hero-copy, .cred-hero-copy { padding-right: 32px; }
  .person-hero h1 { font-size: clamp(50px, 6.6vw, 72px); }
  .person-hero-stage { min-height: 600px; }
  .bio-section .bio-layout { grid-template-columns: 1fr; }
  .profile-card { position: static; max-width: 620px; order: 2; }
  .profile-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
  .cred-split { grid-template-columns: 1fr; }
  .cred-index ol { columns: 2; column-gap: 26px; }
  .cred-index li { break-inside: avoid; }
  .journey { grid-template-columns: 1fr; gap: 0; max-width: 640px; --line-top: 0px; }
  .journey::before, .journey::after { left: 7px; right: auto; top: 10px; bottom: 30px; width: 1px; height: auto; }
  .journey::after { transform: scaleY(0); transform-origin: top; }
  .journey.is-drawn::after { transform: scaleY(1); }
  .journey-stop { padding: 0 0 34px 46px; }
  .journey-dot { top: 3px; }
  .journey-when { margin-bottom: 6px; }
  .journey-stop h3 { margin-top: 0; }
  .personal-grid { grid-template-columns: 1fr; }
  .photo-pair { max-width: 560px; }
  .family-hero { grid-template-columns: 1fr; min-height: 0; }
  .family-hero-stack { max-width: 640px; width: 100%; justify-self: center; }
}
@media (max-width: 740px) {
  .person-hero, .cred-hero { grid-template-columns: 1fr; margin: 0; }
  .person-hero-copy, .cred-hero-copy { padding: 22px var(--gutter) 44px; }
  .person-hero .eyebrow, .cred-hero .eyebrow { font-size: 11px; margin-bottom: 20px; }
  .person-hero h1 { font-size: clamp(46px, 13vw, 60px); margin-bottom: 18px; }
  .cred-hero h1, .family-hero h1 { font-size: clamp(44px, 12vw, 58px); margin-bottom: 26px; }
  .cred-hero h1 br, .family-hero h1 br { display: none; }
  .person-hero-credentials { font-size: 11px; margin-bottom: 24px; }
  .person-hero-credentials { gap: 6px 16px; }
  .person-hero-credentials span + span::before { display: none; }
  .person-hero-lede, .cred-hero .page-hero-lede, .family-hero .page-hero-lede { font-size: 19px; }
  .person-hero-stage { min-height: 0; aspect-ratio: 1 / 1.02; order: 2; }
  .person-hero-portrait { width: min(62vw, 270px); margin-bottom: 34px; }
  .person-hero-portrait::after { inset: -34px; }
  .person-hero-tag { left: var(--gutter); right: var(--gutter); bottom: 22px; font-size: 10.5px; letter-spacing: .2em; }
  .bio-section { padding-top: 56px; }
  .profile-card { padding: 26px 22px 24px; }
  .profile-facts { grid-template-columns: 1fr; }
  .bio-prose h2 { font-size: 30px; }
  .own-words { padding: 26px 22px 24px; margin-left: calc(var(--gutter) * -1 + 12px); margin-right: calc(var(--gutter) * -1 + 12px); }
  .own-words::before { font-size: 90px; right: 14px; }
  .own-words blockquote { padding-right: 24px; }
  .own-words blockquote { font-size: 18.5px; }
  .bio-pull .pull-quote blockquote, .verse .pull-quote blockquote { font-size: 25px; }
  .people-pager { grid-template-columns: 1fr 1fr; gap: 10px; }
  .people-pager-link { padding: 18px 14px 18px; gap: 12px; }
  .people-pager-person { flex-direction: column; align-items: flex-start; gap: 10px; }
  .people-pager-link--next .people-pager-person { flex-direction: column; align-items: flex-end; }
  .people-pager-person img { width: 52px; height: 52px; }
  .people-pager-person strong { font-size: 20px; }
  .people-pager-person small { font-size: 12.5px; }
  .people-pager-dir { font-size: 10px; letter-spacing: .2em; }
  .person-card-here { font-size: 9.5px; letter-spacing: .16em; }
  .learn-list li { font-size: 16.5px; }
  .cred-chips { grid-template-columns: 1fr; border-left: 0; }
  .cred-chips li { border-right: 0; }
  .cred-chips a { gap: 16px; padding: 18px 0; }
  .cred-chip-abbr { width: 68px; height: 68px; font-size: 17px; }
  .cred-chip-name { font-size: 18px; }
  .pastimes li { font-size: 13px; padding: 7px 13px; }
  .photo-pair { aspect-ratio: 1 / 1.1; }
  .cred-hero-stage { padding: 48px var(--gutter) 30px; gap: 30px; order: 2; }
  .cred-seals { gap: 22px 8px; }
  .cred-seals-abbr { width: min(25vw, 98px); font-size: 20px; box-shadow: inset 0 0 0 5px var(--navy-3), inset 0 0 0 6px rgb(169 205 238 / .22); }
  .cred-seals-name { font-size: 11px; }
  .cred-hero-tag { letter-spacing: .08em; font-size: 11px; }
  .cred-index ol { columns: 1; }
  .credential { grid-template-columns: 1fr; gap: 22px; padding: 38px 0; }
  .credential-mark { flex-direction: row; justify-content: flex-start; text-align: left; gap: 22px; }
  .credential-seal { width: 96px; font-size: 21px; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px #e1e8ee; }
  .credential-seal::after { inset: -6px; }
  #cbda .credential-seal { font-size: 18px; }
  .credential-since { max-width: none; }
  .credential-body > p { font-size: 16.5px; }
  .credential-quote { padding: 22px 20px; }
  .credential-parts { grid-template-columns: 1fr; border-top: 0; }
  .credential-parts li, .credential-parts li + li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-left: 0; border-top: 1px solid var(--line); }
  .credential-parts span { flex: none; margin: 0; }
  .family-hero { padding-top: 22px; padding-bottom: 56px; }
  .family-hero-copy { padding: 0; }
  .family-hero-stack { aspect-ratio: 1 / 1; }
  .family-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .family-photo--wedding { grid-column: 1; grid-row: 1 / span 2; }
  .family-photo--evening { grid-column: 2; grid-row: 1; }
  .family-photo--cycling { grid-column: 2; grid-row: 2; }
  .family-photo--garden { grid-column: 1 / span 2; grid-row: 3; aspect-ratio: 4 / 3; }
  .family-photo--dogs { grid-column: 1 / span 2; grid-row: 4; }
  .family-photo--porch { grid-column: 1 / span 2; grid-row: 5; }
  .family-photo figcaption { left: 14px; bottom: 12px; font-size: 10px; letter-spacing: .18em; }
}
@media (prefers-reduced-motion: reduce) {
  .person-hero-portrait::before, .person-hero-portrait::after, .person-hero-portrait img, .cred-seals li, .stack-photo { animation: none; }
  .journey::after { transform: none; transition: none; }
  .journey-dot { transition: none; }
}