/* About extends the shared Volt system; photography sits inside the reading flow. */
.about-page{padding-top:64px;padding-bottom:72px}
/* Use the shared .wrap width for the heading, biography and closing callout. */
.biography-heading{margin-bottom:44px}
.biography-heading h1{font-size:clamp(3.5rem,7vw,5rem);letter-spacing:-.04em;line-height:1.1}
.biography-heading h1 em{font-weight:400}
.biography{font-size:1.0625rem;line-height:1.85}
.biography p+p{margin-top:24px}
.biography-opening,.biography-section{display:flow-root}
.biography-section{margin-top:48px}
.biography-section>h3{margin-bottom:24px;font-size:var(--type-section);line-height:1.2;break-after:avoid}
.biography-career{margin-top:64px}
.career-introduction>h2{font-size:var(--type-feature);line-height:1.15}
.career-introduction>h2>span{display:block;margin-top:12px;font-size:.8em;line-height:1.25;letter-spacing:-.025em}
/* The route is decorative; its stations are ordinary, keyboard-accessible links. */
.career-map{position:relative;margin-top:32px}
.career-route{position:absolute;inset:0;width:100%;height:100px;overflow:visible;pointer-events:none;fill:none;stroke:var(--link);stroke-width:3;stroke-linecap:round}
.career-route path{vector-effect:non-scaling-stroke}
.career-route-mobile{display:none}
.career-map ol{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));padding:0;margin:0;list-style:none}
.career-map a{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:80px;padding:4px 3px 8px;color:var(--muted);font-size:.75rem;line-height:1.4;text-align:center;text-decoration:none}
.career-map li:nth-child(-n+4) a{padding-top:28px}
.career-station{flex:none;width:16px;height:16px;border:3px solid var(--link);border-radius:50%;background:var(--paper)}
.career-map a:hover,.career-map a:focus-visible{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.career-map a:hover .career-station,.career-map a:focus-visible .career-station{background:var(--link)}
.career-map a:focus-visible{outline-offset:2px}
.biography .biography-lead{font:400 clamp(1.6rem,3vw,2rem)/1.45 var(--display);letter-spacing:-.02em;text-wrap:pretty}
.biography-photo{margin:0;break-inside:avoid}
.biography-photo img{width:100%;object-fit:cover}
.biography-photo figcaption{margin-top:12px;font-size:.75rem;line-height:1.5;color:var(--muted)}
.biography-photo-intro{float:right;width:280px;margin:8px 0 28px 36px;transform:rotate(2deg)}
.biography-photo-intro img{aspect-ratio:4/3;object-position:65% center}
.photo-print{padding:10px 10px 16px;background:#fff;color:#141414}
.photo-print img{height:auto;object-fit:contain}
.photo-print figcaption{margin:10px 2px 0;color:#333}
/* Related prints share space, but their complete footprint stays in document flow. */
.photo-group{display:grid;align-items:start;isolation:isolate;clear:both;margin-block:48px}
.photo-group-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin:32px auto 16px;padding:12px 12px 20px}
.photo-group-pair>.biography-photo:first-child{transform:rotate(-2deg)}
.photo-group-pair>.biography-photo:last-child{margin-top:40px;transform:rotate(2deg)}
.photo-group-music{grid-template-columns:1.3fr 1fr;max-width:680px}
.photo-group-music>.biography-photo:last-child{max-width:276px;justify-self:end}
.photo-group-myspace{display:block;width:100%;max-width:640px;margin:24px auto 32px}
.myspace-stack{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;padding:12px 10px 16px}
.myspace-stack>.biography-photo{grid-row:1;padding:8px 8px 18px}
.myspace-stack>.biography-photo:nth-child(1){grid-column:4/10;margin-top:108px;transform:rotate(-2deg);z-index:3}
.myspace-stack>.biography-photo:nth-child(2){grid-column:1/7;transform:rotate(-5deg);z-index:0}
.myspace-stack>.biography-photo:nth-child(3){grid-column:7/13;transform:rotate(4deg);z-index:1}
.photo-group-myspace>figcaption{margin-top:8px;color:var(--muted);font-size:.75rem;line-height:1.6}
.photo-group-harkable{grid-template-columns:1fr 1.08fr;padding:12px 16px 20px}
.photo-group-harkable>.biography-photo:first-child{transform:rotate(-2deg)}
.photo-group-harkable>.biography-photo:last-child{width:calc(100% + 12px);margin-top:80px;margin-left:-12px;transform:rotate(3deg)}
.photo-group-broadcast{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-block:32px;padding:12px 6px}
.photo-group-broadcast>.biography-photo:first-child{grid-column:1/-1;width:88%;justify-self:start;transform:rotate(-1deg)}
.photo-group-broadcast>.biography-photo:nth-child(2){transform:rotate(-2deg)}
.photo-group-broadcast>.biography-photo:nth-child(3){margin-top:20px;transform:rotate(2deg)}
.biography-showreel{width:100%;max-width:480px;margin:32px auto 0}
.biography-showreel figcaption a{color:inherit;text-underline-offset:3px}
.photo-group+p{margin-top:24px}
.biography-photo-wide{width:94%;margin:48px auto;transform:rotate(-1deg)}
.biography-photo-wide img{aspect-ratio:1.85;object-position:center 25%}
.biography-photo-creator{width:88%;max-width:760px;margin:36px auto}
.biography-photo-creator img{height:auto;object-fit:contain}
.biography .biography-closing{margin-top:40px;font:400 clamp(1.4rem,2.5vw,1.75rem)/1.55 var(--display);letter-spacing:-.015em;text-wrap:pretty}
.biography-community-conclusion{margin-top:28px}
@media(max-width:1000px){
  .biography-photo-intro{width:260px;margin-left:32px}
}
@media(max-width:760px){
  .about-page{padding-top:40px;padding-bottom:48px}
  .biography-heading{margin-bottom:32px}
  .biography{font-size:1rem;line-height:1.8}
  .biography-photo-intro{width:230px;margin-left:28px}
  .biography-section{margin-top:40px}
  .biography-career{margin-top:48px}
  .biography-photo-wide{margin-block:36px}
  .photo-group-harkable>.biography-photo:last-child{margin-top:56px}
}
@media(max-width:600px){
  .career-map ol{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,96px)}
  .career-map li:nth-child(n) a{padding-top:4px}
  .career-map li:nth-child(-n+4){grid-row:2}
  .career-map li:nth-child(5){grid-column:4;grid-row:1}
  .career-map li:nth-child(6){grid-column:3;grid-row:1}
  .career-map li:nth-child(7){grid-column:2;grid-row:1}
  .career-map li:nth-child(8){grid-column:1;grid-row:1}
  .career-route-desktop{display:none}
  .career-route-mobile{display:block;height:192px}
  .biography-heading h1{font-size:clamp(3rem,12vw,4rem)}
  .biography-opening{display:flex;flex-direction:column}
  .biography-opening>.biography-lead{order:-2}
  .biography-photo-intro{order:-1;float:none;align-self:flex-end;width:76%;max-width:310px;margin:28px 4px 30px 0}
  .biography-photo-intro+p+p{margin-top:0}
  .biography-photo figcaption{font-size:.73rem}
  .photo-group{grid-template-columns:minmax(0,1fr);gap:28px;margin-block:36px;padding:12px 6px}
  .photo-group>.biography-photo:nth-child(n){grid-column:1;width:90%;max-width:360px;margin:0;transform:rotate(-2deg);justify-self:start}
  .photo-group>.biography-photo:nth-child(even){justify-self:end;transform:rotate(2deg)}
  .photo-group-pair{margin-block:28px 12px}
  .photo-group-music>.biography-photo:last-child{width:76%;max-width:276px}
  .photo-group-harkable>.biography-photo:first-child{width:74%;max-width:280px}
  .photo-group-myspace{margin-block:24px;padding:0}
  .myspace-stack>.biography-photo:nth-child(1){grid-column:1/10;margin-top:192px;transform:rotate(-3deg)}
  .myspace-stack>.biography-photo:nth-child(2){grid-column:1/10;transform:rotate(-4deg)}
  .myspace-stack>.biography-photo:nth-child(3){grid-column:4/13;margin-top:96px;transform:rotate(3deg)}
  .photo-group-broadcast{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .photo-group-broadcast>.biography-photo:nth-child(n){grid-column:auto;width:100%;padding:6px 6px 12px;max-width:none}
  .photo-group-broadcast>.biography-photo:first-child{grid-column:1/-1;width:96%;justify-self:start}
  .photo-group-broadcast>.biography-photo:nth-child(3){margin-top:14px}
  .photo-group-broadcast figcaption{margin-inline:0;font-size:.72rem}
  .biography-photo-wide{width:100%;transform:none;margin-block:32px}
  .biography-photo-wide img{aspect-ratio:1.4}
  .biography-photo-creator{width:100%;margin-block:28px}
  .biography .biography-closing{margin-top:32px}
  .biography-community-conclusion{margin-top:24px}
}
@media(max-width:360px){
  .photo-group>.biography-photo:nth-child(n){width:94%;transform:rotate(-1deg)}
  .photo-group>.biography-photo:nth-child(even){transform:rotate(1deg)}
  .photo-group-harkable>.biography-photo:first-child{width:80%}
  .myspace-stack>.biography-photo:nth-child(1){margin-top:168px}
  .myspace-stack>.biography-photo:nth-child(3){margin-top:84px}
}
@media print{
  .biography-showreel iframe{display:none}
  .about-page{padding:20px 0}
  .biography{font-size:11pt;line-height:1.6}
  .biography-heading h1{font-size:32pt}
  .biography-photo{float:none;transform:none;width:55%;margin:24px auto}
  .biography-opening{display:block}
  .photo-group{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:24px 0;gap:16px;padding:0;break-inside:avoid}
  .photo-group>.biography-photo:nth-child(n){width:100%;margin:0;transform:none;grid-column:auto;max-width:none}
  .myspace-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0}
  .myspace-stack>.biography-photo:nth-child(n){grid-column:auto;grid-row:auto;margin:0;transform:none}
  .biography-photo figcaption{color:#333}
  .biography-community-conclusion a{color:#111}
}