.charHero{background:#0a1423;color:#f7f0e5;padding:160px 7vw 80px}
.charHero h1{font-size:clamp(40px,5vw,72px);line-height:1.25;margin:24px 0 30px;font-weight:500;letter-spacing:-.04em}
.charHero .lead{max-width:640px;color:#b8c0cd;letter-spacing:.04em}

.charListSection{background:#0a1423;padding:0 7vw 120px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background-color:#0a1423}
.charCard{position:relative;display:flex;flex-direction:column;background:#0d1a2c;border:1px solid #ffffff18;overflow:hidden;transition:.3s}
.charCard:hover{border-color:var(--accent);transform:translateY(-4px)}
.charCard img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block;filter:saturate(.85)}
.charCardNo{position:absolute;top:12px;left:12px;z-index:2;font:11px Arial,sans-serif;color:#f7f0e5;background:#00000070;padding:4px 8px}
.charCardBody{padding:18px 16px 22px;color:#f7f0e5}
.charCardRole{margin:0;font:10px Arial,sans-serif;letter-spacing:.18em;color:var(--accent)}
.charCardBody h2{margin:8px 0 6px;font-size:26px}
.charCardTitle{margin:0;font-size:12px;color:#aeb7c6;letter-spacing:.05em}

.charDetail{background:#0a1423;color:#f7f0e5;min-height:100vh}
.charDetailHero{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.charDetailArt{position:relative;overflow:hidden;background:#06101e}
.charDetailArt img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.9)}
.charDetailBody{padding:18vh 5vw 60px;display:flex;flex-direction:column;justify-content:center}
.charBack{font:11px Arial,sans-serif;letter-spacing:.1em;color:#b8c0cd;margin-bottom:30px;display:inline-flex;align-items:center;gap:8px;width:fit-content}
.charBack:hover{color:var(--accent,#c69a54)}
.charRole{font:600 11px Arial,sans-serif;letter-spacing:.26em;color:var(--accent)}
.charNameEn{font-family:"Playfair Display",Georgia,serif;font-weight:900;font-size:clamp(50px,6vw,92px);line-height:1;margin:20px 0 10px;letter-spacing:-.01em;color:var(--accent)}
.charName{font-size:clamp(32px,4vw,48px);margin:0 0 18px;font-weight:500}
.charTitle{font-size:15px;letter-spacing:.05em;margin:0 0 4px}
.charTitleEn{font:11px Arial,sans-serif;letter-spacing:.18em;color:#8994a6;margin:0 0 36px}
.charCopy{font-size:15px;line-height:2.1;color:#e6e9ef;white-space:pre-line;margin:0 0 36px;max-width:480px}
.charTagline{font-family:Georgia,serif;font-style:italic;font-size:18px;color:var(--accent);border-top:1px solid #ffffff24;padding-top:24px}
.charToolLinks{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.charToolLinks .toolCharLink{display:inline-flex;align-items:center;gap:8px;font:12px Arial,sans-serif;letter-spacing:.08em;color:var(--accent);border:1px solid var(--accent);padding:12px 18px}

.charNav{display:flex;justify-content:space-between;padding:30px 7vw;border-top:1px solid #ffffff18;font:12px Arial,sans-serif;letter-spacing:.08em}
.charNav a{color:#b8c0cd}
.charNav a:hover{color:var(--accent,#c69a54)}

@media(max-width:850px){
  .charHero{padding:110px 6vw 60px}
  .charListSection{grid-template-columns:repeat(2,1fr);padding:0 6vw 90px}
  .charDetailHero{grid-template-columns:1fr}
  .charDetailArt{height:70vw}
  .charDetailArt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06101eb0 0%,transparent 25%)}
  .charDetailBody{padding:50px 6vw 60px}
  .charNameEn{font-size:56px}
}