/* A quiet black chapter separates the forest hero from the castle. */
#about-boros.about-bio{position:relative;z-index:2;margin:0;padding:clamp(80px,7.5vw,128px) 32px;background:#000;color:#f4efdf;isolation:isolate}
.about-bio-layout{width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);gap:clamp(48px,7vw,104px);align-items:center}
.about-bio-face{display:block;width:100%;max-width:430px;height:auto;justify-self:center;object-fit:contain}
.about-bio-copy .about-bio-label{margin:0 0 18px;color:#0cd986;font:700 14px/1.4 Fell,Georgia,serif;letter-spacing:.18em;text-transform:uppercase}
.about-bio-copy h2{margin:0 0 28px;color:#fff6df;font:400 clamp(34px,3.5vw,53px)/1.22 Uncial,Georgia,serif;letter-spacing:-.025em;transform:none;text-shadow:none}
.about-bio-copy p:not(.about-bio-label){margin:0;color:#b9c2b6;font:400 clamp(20px,1.8vw,25px)/1.6 Fell,Georgia,serif}
.about-bio-copy p+p:not(.about-bio-label){margin-top:20px}
.about-bio-copy strong{color:#efefdf;font-weight:700}
#about-boros + #river{margin-top:0}
#beginning.video-hero .hero-picture{mask-image:none;-webkit-mask-image:none}
@media(max-width:760px){
 #about-boros.about-bio{padding:58px 26px 80px}
 .about-bio-layout{grid-template-columns:1fr;gap:28px;width:min(520px,100%)}
 .about-bio-face{width:min(270px,80%)}
 .about-bio-copy .about-bio-label{font-size:13px;margin-bottom:15px}
 .about-bio-copy h2{font-size:clamp(30px,7.6vw,39px);margin-bottom:23px}
 .about-bio-copy p:not(.about-bio-label){font-size:21px;line-height:1.55}
 .about-bio-copy p+p:not(.about-bio-label){margin-top:19px}
}

/* The dragon introduces the bio; the castle illustration closes its right side. */
.about-bio-layout{width:min(1400px,100%);grid-template-columns:minmax(160px,.75fr) minmax(0,1.35fr) minmax(220px,1fr);gap:clamp(24px,3.2vw,52px)}
.about-bio-face{max-width:330px}
.about-bio-copy p:not(.about-bio-label){font-size:clamp(20px,1.65vw,24px);line-height:1.55}
.about-bio-castle{margin:0;min-width:0;align-self:center}
.about-bio-castle img{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;object-fit:contain}
.chapter-pause{position:relative;height:clamp(88px,10vw,168px);margin:0;background:#000}
.chapter-pause + #riddles.crypt-art-only{margin-top:0}
#river.river-panorama>img{mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%)}
@media(max-width:1000px){
 .about-bio-layout{grid-template-columns:.8fr 1.2fr;grid-template-areas:"face castle" "copy copy";width:min(620px,100%);gap:30px 24px}
 .about-bio-face{grid-area:face;width:100%;max-width:240px}
 .about-bio-copy{grid-area:copy}
 .about-bio-castle{grid-area:castle}
 .about-bio-castle img{max-width:320px}
 .about-bio-copy p:not(.about-bio-label){font-size:21px}
 .chapter-pause{height:80px}
}
@media(max-width:500px){.about-bio-layout{gap:25px 16px}.about-bio-copy h2{font-size:30px}.about-bio-copy p:not(.about-bio-label){font-size:20px}.chapter-pause{height:64px}}

/* Match the hero subtitle's Fell lettering, with stronger white story copy. */
.about-bio-copy h2{font-weight:700;color:#fff}
.about-bio-copy p:not(.about-bio-label){font:700 clamp(23px,1.85vw,26px)/1.55 Fell,Georgia,serif;color:#fff}
.about-bio-copy p:not(.about-bio-label) strong,.about-bio-copy p:not(.about-bio-label) em{font-weight:700;color:inherit}
dialog.topic-scroll #dialog-content:has(>.topic-emblem){font:700 clamp(23px,1.85vw,26px)/1.55 Fell,Georgia,serif}
dialog.topic-scroll #dialog-content:has(>.topic-emblem) strong{font-weight:700}
@media(max-width:1000px){
 .about-bio-copy p:not(.about-bio-label),dialog.topic-scroll #dialog-content:has(>.topic-emblem){font-size:22px}
}

.about-bio-castle{position:relative}
.bear-profile-link{position:absolute;left:41%;top:34%;width:18%;height:29%;display:block;background:transparent;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bear-profile-link:hover{background:transparent;box-shadow:none}
.bear-profile-link:focus-visible{outline:2px solid #fff2a3;outline-offset:3px}

.about-bio-face{animation:bio-dragon-hover 8s ease-in-out infinite}
@keyframes bio-dragon-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.about-bio-face{animation:none}}
.still .about-bio-face{animation:none}