/* About page: the house frame in a warmer, human register. Mulberry cover, rose accents,
   the owner's certified-event stamps kept as the page's one running joke. */

.person-cover { --cover-a: #5b2a55; --cover-b: #1d1431; --cover-glow: rgba(255, 150, 200, .28); --cover-warm: rgba(255, 207, 102, .2); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 300px); grid-template-areas: "title plate" "deck plate"; column-gap: clamp(22px, 4vw, 48px); align-items: end; }
.person-cover > h1 { grid-area: title; align-self: end; }
.person-cover > .house-deck { grid-area: deck; align-self: start; font-style: italic; }
.person-cover > .person-plate { grid-area: plate; }
.house-frame:has(.person-cover) { --accent: #8a3d6e; --surface: #f8f2f4; }

.person-plate { grid-template-columns: 1fr; gap: 10px; padding: 12px 12px 4px; }
.person-plate .house-plate-more { padding-bottom: 2px; }
.person-plate .house-plate-more a { padding-inline: 4px; }
.person-plate img { width: 100%; height: auto; aspect-ratio: 288 / 340; object-fit: cover; object-position: center 18%; border-radius: 3px; background: #d9cfd8; }
.person-role { margin: 0; font: 600 19px/1.2 var(--h-serif); }
.person-unknown { display: inline-block; margin: 6px 0 0; padding: 3px 8px; color: #8a2d4f; font: 700 10.5px/1.2 var(--h-sans); letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid currentColor; border-radius: 3px; transform: rotate(-2deg); }

.person-body { --accent: #8a3d6e; }
.person-section > h2 { color: #3b1c37; }
.person-record { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 32px; margin: 0; }
.person-record div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dotted #c9b6c4; }
.person-record dt { color: var(--h-muted); font-size: 13px; }
.person-record dd { margin: 0; font: 16px/1.4 var(--h-serif); }

.person-timeline { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; max-width: 760px; }
.person-event { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; background: #fffdfb; border-left: 3px solid #c99a3a; box-shadow: 0 1px 2px rgba(60, 30, 50, .12); }
.person-event-year { font: 600 20px/1 var(--h-serif); }
.person-event-year small { display: block; margin-top: 3px; font: 11px/1 var(--h-sans); letter-spacing: .08em; color: var(--h-muted); }
.person-event p { margin: 0; font: 16px/1.45 var(--h-serif); }
.person-stamp { margin: 0; padding: 4px 8px; color: #8a6510; font: 700 10.5px/1.15 var(--h-sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; border: 1.5px solid currentColor; border-radius: 3px; transform: rotate(-3deg); }
.person-stamp--documented { color: #2e6a47; }
.person-stamp--waiting { float: right; margin: 0 0 12px 18px; color: #8a2d4f; font-size: 12px; }
.person-ending { margin-top: 22px; font-style: italic; }

.person-credentials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 760px; }
.person-credentials li { display: grid; gap: 2px; padding: 12px 14px; font-size: 13.5px; color: var(--h-muted); background: linear-gradient(#fffefd, #f3eaee); border: 1px solid #dccbd5; border-radius: 3px; }
.person-credentials span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.person-credentials strong { font: 600 24px/1.1 var(--h-serif); color: var(--h-ink); }
.person-credentials b { margin-top: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8a6510; }

.person-objects { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.person-objects li { padding: 5px 10px; font-size: 12.5px; background: #fff; border: 1px solid #dccbd5; border-radius: 999px; }
.person-buzzwords { font-style: italic; color: #4a3048; }
.person-mileage { margin: 0 0 10px; font: 15px/1.4 var(--h-serif); color: var(--h-muted); }
.person-mileage strong { font-size: 24px; color: var(--h-ink); }

.person-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; max-width: 900px; }
.person-note { margin: 0; padding: 16px 18px; font: 17px/1.5 var(--h-serif); background: #fffdfb; border-top: 2px solid #c99a3a; }

.person-gallery { columns: 3 240px; column-gap: 16px; }
.person-photo { break-inside: avoid; margin: 0 0 16px; }
.person-photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.person-photo figcaption { padding: 6px 2px 0; font: 14px/1.4 var(--h-serif); color: var(--h-muted); }

.person-warning { margin: 0 0 10px; font: italic 15px/1.4 var(--h-serif); color: var(--h-muted); }
.person-titles summary { cursor: pointer; font: 600 16px/1.4 var(--h-serif); color: var(--h-link); }
.person-titles ol { columns: 2 280px; column-gap: 32px; margin: 14px 0 0; padding-left: 22px; font: 15px/1.6 var(--h-serif); }

@media (max-width: 760px) {
  .person-cover { grid-template-columns: 1fr; grid-template-areas: "title" "deck" "plate"; }
  .person-cover > .person-plate { max-width: 240px; margin-top: 20px; }
  .person-event { grid-template-columns: 1fr; }
  .person-stamp { justify-self: start; }
}