/* Character page: its own look. A profile banner (the photo, softly blurred, as the backdrop), a pinned row of section links,
 * then one calm column: about, quotes and the shows as sliding rows, voice actors as round portraits. */
.ch-main{background:var(--paper); padding:0 0 70px; min-height:70vh;}
.ch-wrap{width:min(1080px,100% - 32px); margin-inline:auto;}

/* --- banner --- */
.ch-banner{position:relative; overflow:hidden; isolation:isolate; padding:26px 0 0; border-bottom:1px solid var(--border-soft);}
.ch-banner::before{content:""; position:absolute; inset:-40px; z-index:-2; background:var(--ch-bg, none) center/cover no-repeat; filter:blur(38px) saturate(1.3); opacity:.55; transform:scale(1.1);}
.ch-banner::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 30%, transparent), var(--paper) 96%);}
.ch-back{display:inline-flex; align-items:center; gap:6px; padding:8px 14px 8px 10px; border-radius:999px; background:color-mix(in srgb, var(--white) 70%, transparent); border:1px solid var(--border-soft); color:var(--navy); font:600 13.5px/1 'Inter',sans-serif; text-decoration:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.ch-back:hover{border-color:var(--blue);}
.ch-back svg{width:16px; height:16px;}
html[dir="rtl"] .ch-back svg{transform:scaleX(-1);}
.ch-id{display:flex; align-items:flex-end; gap:34px; padding:30px 0 34px;}
.ch-photo{flex:none; width:230px; aspect-ratio:3/4; border-radius:28px; overflow:hidden; background:var(--blue-tint); border:4px solid var(--paper); box-shadow:0 0 0 1px var(--border-soft), 0 26px 50px -20px rgb(0 0 0 / .6);}
.ch-photo .hm-ph{width:100%; height:100%;}
.ch-info{flex:1; min-width:0; padding-bottom:4px;}
.ch-id h1{font:800 clamp(30px,4.6vw,52px)/1.12 'Sora','Inter',sans-serif; letter-spacing:-.02em; color:var(--navy); overflow-wrap:anywhere;}
html[lang="ar"] .ch-id h1,html[lang="ja"] .ch-id h1{font-family:inherit; letter-spacing:0; line-height:1.35;}
.ch-sub{margin-top:6px; color:var(--navy-soft); font:500 17px/1.4 'Inter',sans-serif; overflow-wrap:anywhere;}
html[lang="ar"] .ch-sub,html[lang="ja"] .ch-sub{font-family:inherit;}
.ch-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.ch-pill{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--border-soft); background:color-mix(in srgb, var(--white) 75%, transparent); color:var(--navy); font:700 14px/1 'Inter',sans-serif; cursor:default; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
button.ch-pill{cursor:pointer; transition:border-color .15s, background .15s;}
button.ch-pill:hover{border-color:var(--blue); background:var(--blue-tint);}
.ch-pill:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.ch-pill svg{width:17px; height:17px; flex:none;}
.ch-pill .ch-heart{fill:#e5484d;}
.ch-pill i{font:normal 600 12px/1 'Inter',sans-serif; color:var(--navy-soft);}
html[lang="ar"] .ch-pill,html[lang="ja"] .ch-pill{font-family:inherit;}

.ch-stats{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:22px 0 0; padding:0;}
.ch-stats li{display:flex; flex-direction:column; gap:4px; min-width:92px; padding:12px 18px; border-radius:16px; background:color-mix(in srgb, var(--white) 72%, transparent); border:1px solid var(--border-soft); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.ch-stats b{font:800 24px/1 'Sora','Inter',sans-serif; color:var(--navy);}
.ch-stats span{font:600 12px/1.2 'Inter',sans-serif; color:var(--navy-soft);}
html[lang="ar"] .ch-stats b,html[lang="ar"] .ch-stats span,html[lang="ja"] .ch-stats b,html[lang="ja"] .ch-stats span{font-family:inherit;}

/* --- pinned section links --- */
.ch-jump{position:sticky; top:141px; z-index:30; background:color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border-soft); transition:top .28s ease;}
html.nav-hidden .ch-jump{top:61px;}
html.nav-instant .ch-jump{transition:none;}
.ch-jump-in{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:10px 0;}
.ch-jump-in::-webkit-scrollbar{display:none;}
.ch-jump a{flex:none; padding:8px 16px; border-radius:999px; color:var(--navy-soft); font:700 13.5px/1 'Inter',sans-serif; text-decoration:none; transition:background .15s,color .15s;}
.ch-jump a:hover{background:var(--blue-tint); color:var(--navy);}
.ch-jump a.is-on{background:var(--navy); color:var(--white);}
html[lang="ar"] .ch-jump a,html[lang="ja"] .ch-jump a{font-family:inherit;}

/* --- two columns: the story on the left, names and voices on the right --- */
.ch-cols{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; padding-top:30px;}
.ch-col-main,.ch-col-side{display:flex; flex-direction:column; gap:28px; min-width:0;}

/* --- sections --- */
.ch-sec{padding:0; scroll-margin-top:210px;}
.ch-sec > h2{display:flex; align-items:center; gap:10px; margin-bottom:16px; font:800 20px/1.2 'Sora','Inter',sans-serif; color:var(--navy);}
.ch-sec > h2::before{content:""; width:5px; height:20px; border-radius:3px; background:linear-gradient(180deg, var(--blue), var(--teal));}
html[lang="ar"] .ch-sec > h2,html[lang="ja"] .ch-sec > h2{font-family:inherit;}
.ch-box{padding:22px; border-radius:20px; background:var(--white); border:1px solid var(--border-soft);}
.ch-about-title{font:700 18px/1.4 'Inter',sans-serif; color:var(--blue-dark); margin-bottom:10px;}
.ch-text{font:400 16.5px/1.85 'Inter',sans-serif; color:var(--prose-text); overflow-wrap:anywhere;}
html[lang="ar"] .ch-text{font-family:'Noto Sans Arabic','Inter',sans-serif; line-height:2.05;}
html[lang="ja"] .ch-text{font-family:'Noto Sans JP','Inter',sans-serif; line-height:1.95;}
#ch-about-text.is-clamped{display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden;}
.ch-more{margin-top:8px; padding:6px 0; border:0; background:none; color:var(--blue-dark); font:700 14px/1 'Inter',sans-serif; cursor:pointer;}
.ch-more:hover{color:var(--blue);}
.ch-muted{color:var(--navy-soft);}
.ch-chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.ch-chips li{display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; background:var(--blue-tint); color:var(--navy); font:600 13.5px/1.2 'Inter',sans-serif; overflow-wrap:anywhere;}
.ch-chips i{font:normal 700 10px/1 'JetBrains Mono',monospace; letter-spacing:.06em; color:var(--blue-dark);}
html[lang="ar"] .ch-chips li,html[lang="ja"] .ch-chips li{font-family:inherit;}

/* quotes: cards in a grid */
.ch-quotes{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.ch-quote{position:relative; margin:0; min-height:130px; padding:48px 22px 22px; border-radius:20px; background:linear-gradient(145deg, var(--blue-tint), color-mix(in srgb, var(--teal) 14%, var(--white))); border:1px solid var(--border-soft); color:var(--navy); font:600 16.5px/1.65 'Inter',sans-serif; overflow-wrap:anywhere;}
.ch-quote::before{content:"\201C"; position:absolute; top:8px; inset-inline-start:18px; font:800 56px/1 'Sora',Georgia,serif; color:var(--blue); opacity:.7;}
html[lang="ar"] .ch-quote,html[lang="ja"] .ch-quote{font-family:inherit; line-height:1.9;}

/* shows: poster cards that slide sideways */
.ch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:18px 14px;}
.ch-card{min-width:0; display:flex; flex-direction:column; gap:7px; color:inherit; text-decoration:none;}
.ch-cover{position:relative; aspect-ratio:2/3; border-radius:16px; overflow:hidden; background:var(--blue-tint); border:1px solid var(--border-soft); transition:transform .18s, box-shadow .18s;}
.ch-cover .hm-ph{width:100%; height:100%;}
a.ch-card:hover .ch-cover{transform:translateY(-3px); box-shadow:0 14px 26px -14px rgb(0 0 0 / .6);}
a.ch-card:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:16px;}
.ch-role{position:absolute; inset-inline-start:8px; bottom:8px; padding:4px 9px; border-radius:999px; background:rgb(10 16 28 / .78); color:#fff; font:700 11px/1 'Inter',sans-serif; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
html[lang="ar"] .ch-role,html[lang="ja"] .ch-role{font-family:inherit;}
.ch-card b{font:600 14px/1.35 'Inter',sans-serif; color:var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;}
html[lang="ar"] .ch-card b,html[lang="ja"] .ch-card b{font-family:inherit;}
.ch-card small{font-size:12.5px; color:var(--navy-soft);}

/* voice actors: a list of rows */
.ch-people{display:flex; flex-direction:column; gap:6px; margin:-6px -8px;}
.ch-person{display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; padding:8px; border-radius:14px; text-align:start; transition:background .15s;}
.ch-avatar{width:52px; height:52px; border-radius:50%; overflow:hidden; background:var(--blue-tint); border:2px solid var(--paper); box-shadow:0 0 0 1px var(--border-soft);}
.ch-avatar .hm-ph{width:100%; height:100%;}
a.ch-person{color:inherit; text-decoration:none;}
a.ch-person:hover{background:var(--blue-tint);}
a.ch-person:hover b{color:var(--blue-dark);}
a.ch-person:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.ch-person b{font:600 14.5px/1.35 'Inter',sans-serif; color:var(--navy); overflow-wrap:anywhere;}
html[lang="ar"] .ch-person b,html[lang="ja"] .ch-person b{font-family:inherit;}
.ch-lang{padding:4px 9px; border-radius:999px; background:var(--mint-tint); color:var(--teal-dark); font:700 10.5px/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase;}

/* not found */
.ch-missing{text-align:center; padding:80px 0; max-width:520px;}
.ch-missing h1{font:800 28px/1.3 'Sora','Inter',sans-serif; color:var(--navy);}
.ch-missing p{margin:12px 0 22px; color:var(--navy-soft);}

.ch-toast{position:fixed; inset-inline:0; bottom:90px; margin:auto; width:max-content; max-width:calc(100% - 32px); padding:11px 18px; border-radius:999px; background:var(--navy); color:var(--white); font:600 14px/1.3 'Inter',sans-serif; opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s; z-index:300;}
.ch-toast.is-in{opacity:1; transform:none;}

@media (max-width:900px){
  .ch-cols{grid-template-columns:1fr;}
  .ch-col-side{order:2;}
}
@media (max-width:720px){
  .ch-jump{top:61px;}
  html.nav-hidden .ch-jump{top:0;}
  .ch-sec{scroll-margin-top:120px;}
  .ch-id{flex-direction:column; align-items:center; text-align:center; gap:0; padding:22px 0 26px;}
  .ch-photo{width:min(200px,52vw);}
  .ch-info{padding-top:20px;}
  .ch-meta,.ch-stats{justify-content:center;}
  .ch-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));}
}