/* About Me: the house frame in mulberry, a cinematic crawl of titles, then a plain Record. */

.house-frame:has(.person-cover) { --accent: #8a3d6e; --surface: #f8f2f4; overflow: clip; }

.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; }

.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-body { --accent: #8a3d6e; }
.person-section > h2 { color: #3b1c37; }

/* The epigraph, first thing under the cover. */
.person-epigraph { margin: 0 auto; max-width: 40ch; text-align: center; }
.person-epigraph p { margin: 0; font: italic 400 clamp(22px, 2.6vw, 30px)/1.35 var(--h-serif); color: #3b1c37; }

/* The crawl: a tall section whose sticky stage carries the titles up a tilted plane. */
.crawl { position: relative; margin: 0 calc(-1 * clamp(22px, 5vw, 64px)); background: #05040b; }
.crawl-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 340px; perspective-origin: 50% 30%;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 64%, #fffbe8 50%, transparent 51%), radial-gradient(1px 1px at 88% 52%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 32%, #dfe8ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 26%, #fffbe8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 8%, #fff 50%, transparent 51%),
    radial-gradient(ellipse at 50% 120%, #1a1230 0, #05040b 60%); }
.crawl-heading { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 6vw; pointer-events: none; }
.crawl-heading p { margin: 0 0 18px; font: italic 20px/1.4 var(--h-serif); color: #7fb6ff; }
.crawl-heading h2 { margin: 0; font: 700 clamp(34px, 6vw, 72px)/1.02 var(--h-serif); color: #f2c94c; letter-spacing: .02em; text-transform: uppercase; }
.crawl-tilt { position: absolute; inset: 0; transform-origin: 50% 100%; transform: rotateX(28deg); }
.crawl-plane { position: absolute; top: 100%; left: 50%; width: min(760px, 88vw); transform: translate(-50%, var(--y, 0px)); text-align: center; color: #f2c94c; }
.crawl-plane ol { margin: 0; padding: 0; list-style: none; }
.crawl-plane li { margin: 0 0 9vh; }
.crawl-opening { margin: 0 0 12vh; font: clamp(21px, 2.5vw, 28px)/1.5 var(--h-serif); color: #f6dc8a; }
.crawl-era { display: block; font: 700 15px/1.3 var(--h-sans); letter-spacing: .24em; text-transform: uppercase; color: #e0a93a; }
.crawl-plane h3 { margin: 8px 0 10px; font: 700 clamp(26px, 3.4vw, 40px)/1.12 var(--h-serif); letter-spacing: .01em; }
.crawl-plane li p { margin: 0; font: clamp(19px, 2.2vw, 25px)/1.45 var(--h-serif); color: #f6dc8a; }
.crawl-closing { margin: 14vh 0 0; font: italic 700 clamp(28px, 3.6vw, 44px)/1.2 var(--h-serif); }
.crawl-fade { position: absolute; inset: 0 0 auto; height: 38%; background: linear-gradient(#05040b 10%, transparent); pointer-events: none; }

/* Reduced motion or no script: an ordinary readable list on the night sky. */
.crawl.is-static { padding: 56px 0; }
.crawl.is-static .crawl-stage { position: static; height: auto; perspective: none; overflow: visible; }
.crawl.is-static .crawl-heading { position: static; margin-bottom: 40px; }
.crawl.is-static .crawl-tilt { position: static; transform: none; }
.crawl.is-static .crawl-plane { position: static; transform: none; margin: 0 auto; }
.crawl.is-static .crawl-plane li { margin-bottom: 44px; }
.crawl.is-static .crawl-opening { margin-bottom: 52px; }
.crawl.is-static .crawl-closing { margin-top: 52px; }
.crawl.is-static .crawl-fade { display: none; }

/* The Record. */
.person-record { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 36px; margin: 0; max-width: 980px; }
.person-record div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(138, 61, 110, .35), rgba(138, 61, 110, .12) 70%, transparent) 1; }
.person-record dt { color: #8a3d6e; font: 700 12px/1.6 var(--h-sans); letter-spacing: .1em; text-transform: uppercase; }
.person-record dd { margin: 0; font: 17px/1.45 var(--h-serif); color: var(--h-ink); }
.person-ending { font-style: italic; }

.person-enthusiasms { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.person-enthusiasms li { padding: 8px 16px; font: 600 18px/1.3 var(--h-serif); color: #3b1c37; background: linear-gradient(#fffdfb, #f3e6ee); border: 1px solid #dccbd5; border-radius: 999px; box-shadow: inset 0 1px #fff; }

.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-closing { margin: 0 auto; max-width: 46ch; text-align: center; font: italic 19px/1.5 var(--h-serif); color: #3b1c37; }

@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-record div { grid-template-columns: 1fr; gap: 2px; }
}