/* Shared character-profile template; Henry retains his original artwork. */
.bio-page{padding:24px 16px;color:#251508}
.bio-panel{position:relative;isolation:isolate;width:min(960px,100%);margin:auto;padding:38px 64px 60px}
.bio-panel::before{content:"";position:absolute;inset:0;z-index:-1;border:32px solid transparent;border-image:url('assets/wood.webp') 32 stretch;background:url('assets/collection/wood-grain.webp') center/700px auto repeat;background-clip:padding-box;filter:drop-shadow(2px 4px 2px #321a0b);pointer-events:none}
.bio-header{margin-bottom:30px}.back-home{display:inline-block;font:bold 14px/1.4 Georgia,serif;color:#28180c;padding:8px 0;text-decoration:none}.back-home:hover{text-decoration:underline}
.bio-series{margin:14px 0 0;font:bold 19px/1.3 Georgia,serif;text-align:center;letter-spacing:1px}
.bio-intro{display:grid;grid-template-columns:minmax(0,1fr) 239px;gap:30px;align-items:start}
.bio-story h1{margin:0 0 5px;text-align:left}.bio-story h1 img{width:min(100%,362px);margin:0}
.bio-role{font:bold 13px/1.4 Georgia,serif;letter-spacing:1px;text-transform:uppercase;margin:8px 0 22px}
.bio-story>p:not(.bio-role){font:600 17px/1.7 Georgia,serif;margin:0 0 20px;text-shadow:0 0 1px #f3c58b80}
.bio-cartoon{width:100%;max-width:239px;height:auto;margin-top:22px}
.bio-listen{display:grid;grid-template-columns:145px minmax(0,1fr);gap:30px;align-items:center;border-top:1px solid #59341670;border-bottom:1px solid #59341670;margin:12px 0 28px;padding:28px 0}
.bio-stage{display:block;width:116px;height:auto;margin:auto}
.bio-clips h2{font:bold 29px/1.2 Georgia,serif;margin:0 0 24px;color:#291508}
.audio-clip+.audio-clip{margin-top:22px}.audio-clip h3{font:bold 16px/1.4 Georgia,serif;margin:0 0 8px;display:flex;gap:12px;justify-content:space-between;align-items:baseline}
.clip-duration{font:13px/1.4 Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.audio-clip audio{display:block;width:100%;height:42px;color-scheme:light}
.audio-fallback{display:inline-block;margin-top:7px;font:12px/1.4 Georgia,serif;color:#291508;text-underline-offset:3px}
.bio-panel .bio-navigation{padding:0;display:flex;flex-direction:row;align-items:end;justify-content:space-between;gap:20px;text-align:left}
.bio-panel .next-bear{display:inline-block;width:auto;min-height:44px;padding:12px 0;font:bold 15px/1.4 Georgia,serif;color:#291508;text-shadow:none;text-align:right;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}
.bio-footer{margin-top:32px;padding-top:25px;border-top:1px solid #59341670;text-align:center;text-shadow:none}.vintage-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}.vintage-badges img{width:auto;max-width:120px;height:31px;object-fit:contain}
.bio-footer .site-history{font:italic 12px/1.5 Georgia,serif;color:#291508;text-shadow:none;margin:12px 0 20px}.bio-footer .disclaimer{font:bold 9px/1.5 Arial,sans-serif;color:#291508;text-shadow:none;margin:0 auto 18px;max-width:570px}.bio-footer .bio-contact{font:bold 15px/1.5 Georgia,serif;color:#291508;text-shadow:none;margin:0}
.bio-panel a:focus-visible,.bio-panel select:focus-visible,.bio-panel button:focus-visible,.bio-panel audio:focus-visible{outline:3px solid #291508;outline-offset:4px}
@media(max-width:680px){.bio-page{padding:8px 5px 18px}.bio-panel{padding:25px 28px 42px}.bio-header{margin-bottom:23px}.bio-series{font-size:17px;margin-top:10px}.back-home{font-size:12px}.bio-intro{display:flow-root}.bio-cartoon{display:block;width:180px;max-width:65%;margin:4px auto 20px}.bio-role{font-size:11px;margin-bottom:18px}.bio-story>p:not(.bio-role){font-size:16px;line-height:1.65}.bio-listen{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:4px;padding:24px 0}.bio-stage{width:90px}.bio-clips h2{font-size:24px;text-align:center}.audio-clip h3{font-size:15px}.bio-panel .bio-navigation{flex-direction:column;align-items:stretch;gap:14px}.bio-panel .next-bear{text-align:center;font-size:14px}.bio-footer{margin-top:22px}.bio-footer .disclaimer{font-size:8px}.bio-footer .site-history{font-size:11px}.bio-footer .bio-contact{font-size:14px}}

/* Character artwork keeps its natural proportions, including group portraits. */
.bio-intro{grid-template-columns:minmax(0,1fr) var(--portrait-width,239px)}
.bio-cartoon{max-width:var(--portrait-width,239px)}
.bio-extra{border-top:1px solid #59341670;border-bottom:1px solid #59341670;margin:12px 0 28px;padding:24px 20px;text-align:center}
.bio-extra blockquote{font:bold italic 21px/1.5 Georgia,serif;margin:0;color:#291508}
.bio-extra p{font:600 15px/1.6 Georgia,serif;margin:16px auto 0;max-width:650px}
.bio-panel .bio-navigation{flex-direction:column;align-items:stretch;gap:20px}
.bio-pager{display:flex;justify-content:space-between;align-items:center;gap:20px}
.bio-panel .bio-pager a{display:block;width:auto;min-height:44px;padding:12px 0;font:bold 15px/1.4 Georgia,serif;color:#291508;text-shadow:none;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}
.bio-panel .bio-pager .prev-bear{text-align:left}
.bio-panel .bio-pager .next-bear{text-align:right}
@media(max-width:680px){.bio-extra{padding:20px 5px}.bio-extra blockquote{font-size:19px}.bio-extra p{font-size:14px}.bio-pager{gap:16px;align-items:start}.bio-panel .bio-pager a{max-width:48%;font-size:13px}.bio-cartoon{max-width:85%;width:min(100%,var(--portrait-width,239px))}.bio-panel .bio-role{line-height:1.6}}

/* Live biography lettering: yellow face, black outline, green offset layer. */
@font-face{font-family:'Luckiest Guy';src:url('assets/fonts/LuckiestGuy-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
/* Match the original bitmap title boxes and their surrounding layout. */
.bio-story h1.bio-name{display:block;width:min(100%,362px);margin:0 0 5px;padding:0;text-align:left;font-family:'Luckiest Guy',Impact,sans-serif;text-shadow:none;line-height:0}
.bio-name svg{display:block;width:100%;height:auto;overflow:visible;font-family:'Luckiest Guy',Impact,sans-serif;font-weight:400;stroke:#12110a;stroke-width:4;stroke-linejoin:round;paint-order:stroke fill}
@media(forced-colors:active){.bio-name svg{stroke:CanvasText}.bio-name svg text{fill:CanvasText}}


/* One visible set of biography links; current page is informational, not a link. */
.bio-panel .bio-navigation{display:block;text-align:center;padding:0}
.bio-navigation h2{margin:0 0 18px;font:bold clamp(20px,2.5vw,27px)/1.25 Georgia,serif;letter-spacing:.04em;text-transform:uppercase;color:#291508;text-shadow:none}
.bear-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.bear-grid li{display:flex;min-width:0;margin:0;padding:0}
.bio-panel .bear-tile{display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:0;min-height:72px;padding:12px 10px;border:1px solid #67431e;border-radius:4px;background:linear-gradient(#fff0d3,#f5ddba);box-shadow:inset 0 0 0 2px #fff4dc80,0 2px 3px #351b0c40;color:#291508;font:bold 16px/1.3 Georgia,serif;text-align:center;text-shadow:none;text-decoration:underline;text-underline-offset:3px;overflow-wrap:break-word}
.bio-panel a.bear-tile:hover{background:#fff0cc;border-color:#291508;box-shadow:inset 0 0 0 2px #fff4dc80,0 3px 5px #351b0c60}
.bio-panel .bear-tile.is-current{background:linear-gradient(#f7cf7a,#e8b659);box-shadow:inset 0 1px 4px #67431e70;text-decoration:none;border:2px solid #67431e}
.bear-tile small{font:bold 10px/1.2 Georgia,serif;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:680px){.bear-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bio-panel .bear-tile{font-size:16px;min-height:76px;padding:10px 8px}.bio-navigation h2{max-width:16em;margin:0 auto 18px;font-size:22px}}
@media(forced-colors:active){.bio-panel .bear-tile.is-current{border:3px double CanvasText}}