/* Full-bleed Aetheria hero profiles, inspired by illustrated MMORPG character biographies.
   Open image composition and paper background instead of the old framed blue card. */
.characters-section{
  --hero-accent:#d5adf6;
  --hero-ink:#553f4e;
  --hero-paper:#f4edf0;
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 0 46px;
  overflow:hidden;
  color:var(--hero-ink);
  background:var(--hero-paper);
  scroll-margin-top:54px;
}
.characters-section::before{display:none}
.characters-section[data-affinity="ember-knight"]{--hero-accent:#f6a268;--hero-ink:#653f44}
.characters-section[data-affinity="lion-guardian"]{--hero-accent:#f1d08b;--hero-ink:#64523a}
.characters-section[data-affinity="azure-sorceress"]{--hero-accent:#b6a7f8;--hero-ink:#493c68}
.characters-section[data-affinity="silver-elf"]{--hero-accent:#92e5ee;--hero-ink:#35566b}
.characters-section .character-stage,
.characters-section .character-stage-inner{
  position:static;width:100%;max-width:none;min-width:0;margin:0;padding:0;
  background:none;border:0;outline:0;clip-path:none;border-radius:0;
  box-shadow:none;filter:none;
}
.characters-section .character-stage::before,
.characters-section .character-stage-inner::before{display:none}
.character-cinematic-banner{
  --character-banner-bg:url('/characters/hero-poses/seraph.webp');
  height:clamp(365px,43vw,610px);
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  background:linear-gradient(125deg,#1c2235,#3c4655 50%,#1a2636);
}
.character-cinematic-banner::before{
  content:"";position:absolute;z-index:-2;inset:-35px;
  background-image:linear-gradient(180deg,#0d13216c,#11152566 58%,#0b1326af),var(--character-banner-bg);
  background-repeat:no-repeat;
  background-position:center,center 38%;
  background-size:cover;
  filter:blur(15px) saturate(1.23) brightness(.73);
  transform:scale(1.07);
  transition:background-image .2s ease;
}
.character-cinematic-banner::after{
  content:"";position:absolute;left:-1%;width:102%;bottom:-1px;height:31px;z-index:7;
  background:var(--hero-paper);
  clip-path:polygon(0 33%,2% 22%,4% 55%,7% 25%,10% 41%,12% 14%,15% 51%,19% 31%,22% 62%,25% 22%,28% 39%,31% 12%,34% 43%,37% 26%,40% 51%,43% 15%,46% 43%,49% 30%,52% 57%,55% 27%,58% 44%,61% 19%,64% 48%,67% 27%,70% 56%,73% 18%,77% 48%,80% 22%,84% 55%,87% 17%,90% 42%,93% 27%,96% 53%,98% 21%,100% 39%,100% 100%,0 100%);
}
#character-banner-art{
  position:absolute;z-index:-1;top:-13%;left:50%;height:129%;
  width:min(44vw,600px);max-width:90%;object-fit:cover;object-position:50% 37%;
  transform:translateX(-50%);
  -webkit-mask-image:radial-gradient(ellipse 67% 67% at 50% 46%,#000 43%,transparent 96%);
  mask-image:radial-gradient(ellipse 67% 67% at 50% 46%,#000 43%,transparent 96%);
  filter:drop-shadow(0 2px 24px #0909179e) saturate(1.12);
}
.character-banner-text{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:26px 14px clamp(47px,5vw,70px);
  background:linear-gradient(180deg,#10172549,transparent 17%,transparent 42%,#0f10227c 79%,#0f14258a);
  text-align:center;pointer-events:none;z-index:2;
}
.character-banner-text h2{
  position:absolute;top:25px;left:0;width:100%;margin:0;
  font:700 clamp(10px,.9vw,13px)/1.2 var(--sans);
  letter-spacing:.3em;color:#fff1d9;text-shadow:0 2px 5px #07142d;
}
.character-banner-role{
  margin:0 0 7px;color:var(--hero-accent);
  font:700 clamp(9px,1vw,13px)/1.2 var(--serif);
  letter-spacing:.2em;text-transform:uppercase;text-shadow:0 3px 7px #091121;
}
.character-banner-name{
  display:block;color:#fffdf8;
  font:400 clamp(48px,8vw,112px)/.93 var(--serif);
  letter-spacing:.035em;font-variant:small-caps;text-shadow:0 3px 3px #151626,0 0 32px #101323;
}
.character-banner-signature{
  font:700 11px var(--serif);letter-spacing:.2em;color:#e9d2a1;margin-top:13px;
  text-shadow:0 2px 5px #0b1121;
}
.characters-section .character-feature{
  width:min(1450px,100%);
  max-width:none;margin:0 auto;
  padding:15px clamp(24px,4vw,70px) 0;
  display:grid;grid-template-columns:minmax(0,54%) minmax(0,46%);
  align-items:center;gap:clamp(5px,2vw,33px);min-height:0;
}
.characters-section .character-feature-art{
  height:clamp(500px,48vw,750px);min-height:0;
  margin:0;position:relative;align-self:stretch;
  border:0;outline:0;background:none;border-radius:0;box-shadow:none;overflow:visible;max-width:none;
}
.characters-section .character-feature-art::before,
.characters-section .character-feature-art::after,
.characters-section .character-art-glow,
.characters-section .character-aura{display:none}
.characters-section #character-active-art{
  position:absolute;inset:-3% 0 0;width:100%;height:104%;display:block;
  object-fit:contain;object-position:50% 50%;transform:none;
  -webkit-mask-image:radial-gradient(ellipse 65% 68% at 50% 49%,#000 43%,transparent 94%);
  mask-image:radial-gradient(ellipse 65% 68% at 50% 49%,#000 43%,transparent 94%);
  filter:saturate(1.08) contrast(1.04);
}
.characters-section .character-feature-details{
  width:100%;min-width:0;margin:0;align-self:center;max-width:680px;
  padding:22px clamp(14px,2.5vw,36px) 22px 4px;
  border:0;outline:0;box-shadow:none;background:none;color:var(--hero-ink);
  text-shadow:none;position:relative;
}
.characters-section .character-feature-details::before{display:none}
.character-profile-header{
  border:0;margin-bottom:11px;padding-bottom:0;
  font:700 11px var(--sans);letter-spacing:.17em;color:#8b7880
}
.character-feature-kicker{
  font:700 12px var(--serif);color:#8c6d7c;
  letter-spacing:.15em;margin-bottom:12px;
}
.characters-section .character-feature-title-row{
  border:0;padding-bottom:4px;align-items:center;gap:14px;
}
.characters-section .character-feature-title-row h3{
  font:400 clamp(28px,3.15vw,46px)/1.08 var(--serif);
  font-variant:small-caps;color:var(--hero-ink);
}
.characters-section .character-feature-title-row p{font-size:12px;color:#81767b}
.characters-section .character-class-label{font-size:11px;color:#8c6e7b}
.characters-section .character-class-badge{
  border:1px solid #b5a3a8;background:none;color:#8a687a;
  box-shadow:none;font-size:10px;padding:7px 8px
}
.characters-section .character-role-emblem{width:59px;height:59px}
.characters-section .character-description{
  margin:18px 0;max-width:560px;font:400 clamp(13px,1.05vw,16px)/1.78 var(--sans);
  color:#62575f;text-shadow:none;
}
.characters-section .character-tags{margin:0 0 24px;gap:8px}
.characters-section .character-tags span{border:1px solid #cebcc3;background:#fcf7fa75;color:#755e6b;font-size:10px}
.characters-section .character-feature-heading{
  color:#785769;border-bottom:1px solid #c2a7b5;font-size:14px;margin:18px 0 12px;
}
.characters-section .character-feature-heading small{font-size:11px}
.characters-section .character-quick-stats{gap:10px;margin-bottom:18px}
.characters-section .character-quick-stats>div{
  border:0;border-top:1px solid #cabac1;border-bottom:1px solid #cabac1;
  background:#ffffff36;box-shadow:none;padding:12px 5px;
}
.characters-section .character-quick-stats strong{font-size:clamp(19px,1.8vw,26px);color:#684c5b}
.characters-section .character-quick-stats span{font-size:10px;color:#8a7980}
.characters-section .character-attribute>span:first-child{color:#715963;font-size:10px}
.characters-section .character-attribute b{color:#684757}
.characters-section .character-meter{height:8px;border-radius:2px;border:1px solid #c3abb6;background:#e2d9dd}
.characters-section .character-attribute{gap:8px}
.characters-section .character-attributes{gap:14px 20px}
.character-ability-section{
  position:relative;width:min(1180px,100%);margin:4px auto 14px;
  padding:8px clamp(20px,4vw,40px) 12px;text-align:center;color:#614455;
}
.character-ability-heading h3{
  margin:0;color:#624658;font:400 clamp(25px,3vw,38px)/1.1 var(--serif);
  font-variant:small-caps;letter-spacing:.04em;
}
.character-ability-heading>span{display:block;margin:4px 0 0;color:#9f7d8c;letter-spacing:.2em;font-size:17px}
.character-ability-heading p{margin:2px 0 28px;font:700 10px var(--sans);letter-spacing:.17em;color:#998390}
.characters-section .character-feature-skills{
  display:grid;grid-template-columns:repeat(3,minmax(0,185px));
  justify-content:center;gap:clamp(22px,6vw,90px);align-items:start;
  margin:0 auto;max-width:850px;
}
.characters-section .character-skill{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:13px;text-align:center;min-width:0;min-height:0;margin:0;padding:0;
  background:none;border:0;box-shadow:none;
}
.characters-section .character-skill-icon{
  width:clamp(70px,7vw,92px);height:clamp(70px,7vw,92px);
  border-radius:7px;padding:9px;
  border:2px solid #f4d5ac;box-shadow:0 1px 7px #56455a69,inset 0 0 0 1px #fff9ed88;
}
.characters-section .character-skill-icon svg{width:100%;height:100%;filter:none;shape-rendering:geometricPrecision}
.characters-section .character-skill span:last-child{
  color:#543a4a;font:700 clamp(12px,1.25vw,16px)/1.3 var(--serif);
  text-align:center;letter-spacing:0;overflow-wrap:normal;
}
.characters-section .character-arrow{
  position:absolute;top:clamp(255px,33vw,460px);z-index:11;
  width:clamp(36px,3.2vw,50px);height:clamp(36px,3.2vw,50px);
  background:linear-gradient(#2b2c40,#121b2e);color:#fff;
  border:2px solid #e6ceac;border-radius:50%;box-shadow:0 2px 10px #13162279;
}
.characters-section .character-prev{left:clamp(12px,2vw,32px)}
.characters-section .character-next{right:clamp(12px,2vw,32px)}
.characters-section .character-arrow:hover{background:#615376}
.characters-section .character-pagination{margin:10px 0 18px}
.characters-section .character-dot{border-color:#a58c98;background:#d8c0cd}
.characters-section .character-dot.is-active{background:#9a627d;border-color:#a5788d;box-shadow:0 0 0 2px #f1e5e9}
.characters-section .character-concept-note{font-size:11px;color:#948590;margin:20px auto 0;padding:0 20px;text-align:center}
@media(max-width:1050px){
  .characters-section .character-feature{grid-template-columns:minmax(0,51%) minmax(0,49%);padding:8px 20px 0;gap:8px}
  .characters-section .character-feature-art{height:clamp(430px,53vw,650px)}
  .characters-section .character-feature-details{padding:14px 13px 10px}
  .characters-section .character-feature-title-row h3{font-size:clamp(25px,3.7vw,37px)}
  .characters-section .character-description{font-size:12px;margin:10px 0}
  .characters-section .character-tags{margin-bottom:10px}
  .characters-section .character-attributes{gap:9px 10px}
  .characters-section .character-feature-heading{margin:11px 0 9px}
  .characters-section .character-skill-icon{width:75px;height:75px}
}
@media(max-width:720px){
  .character-cinematic-banner{height:clamp(300px,71vw,450px)}
  #character-banner-art{width:min(75vw,430px);height:128%;top:-12%}
  .character-banner-text{padding-bottom:40px}
  .character-banner-name{font-size:clamp(43px,9vw,75px)}
  .character-banner-text h2{font-size:10px;top:17px}
  .character-banner-signature{font-size:9px}
  .characters-section .character-feature{display:flex;flex-direction:column;gap:0;padding:0 18px}
  .characters-section .character-feature-art{width:min(100%,540px);height:clamp(390px,106vw,590px);flex:none;margin:0 auto}
  .characters-section #character-active-art{height:105%}
  .characters-section .character-feature-details{max-width:610px;margin:0 auto;padding:5px 10px 25px}
  .characters-section .character-description{font-size:14px;line-height:1.7}
  .characters-section .character-feature-title-row h3{font-size:34px}
  .characters-section .character-attributes{gap:14px 14px}
  .characters-section .character-quick-stats strong{font-size:23px}
  .characters-section .character-arrow{top:clamp(215px,53vw,320px);width:38px;height:38px}
  .characters-section .character-prev{left:8px}
  .characters-section .character-next{right:8px}
  .character-ability-section{padding:10px 16px}
  .characters-section .character-feature-skills{gap:18px}
  .characters-section .character-skill-icon{width:70px;height:70px}
  .characters-section .character-skill span:last-child{font-size:12px}
}
@media(max-width:440px){
  .character-cinematic-banner{height:290px}
  #character-banner-art{width:79vw;height:129%;top:-13%}
  .character-banner-name{font-size:41px}
  .character-banner-role{font-size:9px}
  .character-banner-text h2{font-size:9px;letter-spacing:.2em}
  .characters-section .character-feature{padding:0 12px}
  .characters-section .character-feature-art{height:380px}
  .characters-section .character-feature-details{padding:5px 12px 15px}
  .characters-section .character-feature-title-row h3{font-size:28px}
  .characters-section .character-description{font-size:13px}
  .characters-section .character-attribute{grid-template-columns:minmax(53px,1fr) minmax(20px,1.3fr) 17px;gap:4px}
  .characters-section .character-attribute>span:first-child{font-size:8px}
  .characters-section .character-attributes{gap:10px 9px}
  .characters-section .character-quick-stats strong{font-size:19px}
  .characters-section .character-role-emblem{width:48px;height:48px}
  .character-ability-section{padding:12px 9px}
  .character-ability-heading h3{font-size:27px}
  .character-ability-heading p{font-size:8px;letter-spacing:.07em}
  .characters-section .character-feature-skills{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .characters-section .character-skill:nth-child(3){grid-column:auto}
  .characters-section .character-skill-icon{width:61px;height:61px;padding:5px}
  .characters-section .character-skill span:last-child{font-size:10px;line-height:1.25}
  .characters-section .character-arrow{top:218px;width:35px;height:35px}
}
@media(prefers-reduced-motion:reduce){.character-cinematic-banner::before{transition:none}}