/* Jara's own story, with a short introduction and an optional longer reading. */
.hero-intro{max-width:380px;margin-top:27px;font:400 18px/1.6 Georgia,serif;color:#e4d2bb}
.hero-actions{margin-top:30px}
.bio-copy .bio-quote{margin:27px 0 0;padding:0;font:italic 25px/1.45 Georgia,serif;letter-spacing:-.4px;color:#dfb98e}
.bio-copy .signature{margin-bottom:0}
.bio-story{grid-column:1/-1;margin-top:-34px;border-top:1px solid #59412d;border-bottom:1px solid #59412d}
.bio-story summary{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:70px;padding:21px 0;font-size:14px;color:#e3c4a2;cursor:pointer;list-style:none}
.bio-story summary::-webkit-details-marker{display:none}
.bio-story summary:focus-visible{outline:2px solid #dbad79;outline-offset:6px}
.bio-story summary:hover{color:#fff0d7}
.bio-story summary>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2;flex-shrink:0;transition:transform .15s}
.bio-story .story-less{display:none}
.bio-story[open] .story-less{display:inline}
.bio-story[open] .story-more{display:none}
.bio-story[open] summary>svg{transform:rotate(45deg)}
.story-body{max-width:740px;margin:0 auto;padding:22px 0 44px}
.story-chapter+.story-chapter{margin-top:36px}
.story-chapter h3{font:400 28px/1.25 Georgia,serif;color:#ead8c0;letter-spacing:-.4px;margin:0 0 19px}
.story-chapter p{font-size:15px;line-height:1.9;color:#c4b6a4;margin:0 0 18px}
.story-chapter:last-of-type p:last-child{font:italic 24px/1.5 Georgia,serif;color:#dfb98e;margin-top:27px}
.story-body>.text-link{margin-top:10px}
@media(max-width:760px){
 .hero-intro{font-size:17px;margin-top:20px;max-width:350px}
 .hero-actions{margin-top:24px}
 .hero-foot>span{max-width:215px}
 .bio-copy .bio-quote{font-size:24px;margin-top:23px}
 .bio-story{margin-top:0}
 .bio-story summary{min-height:66px;padding:20px 0}
 .story-body{padding:12px 0 27px}
 .story-chapter h3{font-size:25px;margin-bottom:16px}
 .story-chapter p{font-size:15px;line-height:1.85}
 .story-chapter+.story-chapter{margin-top:30px}
 .story-chapter:last-of-type p:last-child{font-size:23px}
}
@media(max-width:360px){.hero-foot>span{max-width:178px}}

/* Family photographs accompany their own chapters, at their original proportions. */
.bio-story{scroll-margin-top:36px}
.story-body{max-width:none;padding:12px 0 62px}
.story-intro{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:8px 0 54px;padding-top:24px;border-top:1px solid rgba(180,125,82,.16)}
.story-intro>span:first-child,.story-kicker{font-size:9px;letter-spacing:2.4px;line-height:1.6;color:#c19b76}
.story-intro>span:last-child{font:italic 16px/1.5 Georgia,serif;color:#c4b6a4}
.story-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:clamp(46px,7vw,104px);padding:0 34px}
.story-chapter.story-scene+.story-scene{margin-top:88px;padding-top:88px;border-top:1px solid rgba(180,125,82,.19)}
.story-text{min-width:0;max-width:460px}
.story-kicker{display:block;margin-bottom:17px}
.story-scene h3{font-size:clamp(31px,3.1vw,41px);line-height:1.15;letter-spacing:-.7px;margin-bottom:25px}
.story-scene h3 em{font-weight:400;color:#d4aa81}
.story-scene p{font-size:15px;line-height:1.95}
.story-scene p:last-child{margin-bottom:0}
.story-photo{width:100%;max-width:340px;margin:0}
.story-photo-link{display:block;width:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:zoom-in}
.story-photo-link img{width:100%;height:auto;display:block;transition:filter .2s ease}
.story-photo-link:hover img{filter:brightness(1.06)}
.story-photo-link:focus-visible{outline:2px solid #dbad79;outline-offset:7px}
.story-photo figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;font:italic 13px/1.5 Georgia,serif;color:#c0aa93}
.story-photo-hint{font:400 18px/1 Arial,sans-serif;color:#bb8f65}
.story-scene-childhood .story-photo{grid-column:1;grid-row:1;justify-self:start}
.story-scene-childhood .story-text{grid-column:2;grid-row:1}
.story-scene-piano .story-photo{justify-self:end;max-width:350px}
.story-scene-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.story-scene-stage .story-photo{max-width:none;align-self:center}
.story-coda{max-width:710px;margin:88px auto 0;padding-top:58px;border-top:1px solid rgba(180,125,82,.24)}
.story-coda .story-chapter+.story-chapter{margin-top:44px}
.story-coda>.text-link{margin-top:15px}
@media(max-width:1000px) and (min-width:761px){
 .story-scene{padding-left:0;padding-right:0;column-gap:42px}
 .story-scene h3{font-size:32px}
 .story-scene-stage{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .story-body{padding:8px 0 35px}
 .story-intro{display:block;margin:0 0 35px;padding-top:20px}
 .story-intro>span{display:block}
 .story-intro>span:last-child{margin-top:9px;font-size:16px}
 .story-scene,.story-scene-stage{display:flex;flex-direction:column;align-items:stretch;gap:29px;padding:0}
 .story-text{max-width:none}
 .story-kicker{font-size:8px;letter-spacing:2px;margin-bottom:13px}
 .story-scene h3{font-size:33px;margin-bottom:21px}
 .story-scene p{font-size:15px;line-height:1.85}
 .story-photo{max-width:290px}
 .story-scene-childhood .story-photo{align-self:flex-start}
 .story-scene-piano .story-photo{max-width:300px;align-self:flex-end}
 .story-photo figcaption{font-size:12px;margin-top:13px}
 .story-chapter.story-scene+.story-scene{margin-top:49px;padding-top:46px}
 .story-scene-stage .story-photo{max-width:none;align-self:stretch}
 .story-coda{margin-top:49px;padding-top:40px}
 .story-coda .story-chapter+.story-chapter{margin-top:36px}
 .story-coda .story-chapter h3{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.story-photo-link img{transition:none}}

/* Gently dissolve archival photographs into the biography background. */
.story-photo-link img{
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 6%,#000 89%,transparent 100%);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 6%,#000 89%,transparent 100%);
  mask-repeat:no-repeat;
  mask-size:100% 100%;
  mask-composite:intersect;
}