.page-hero{ padding:80px 0 40px; text-align:center; max-width:760px; margin:0 auto; }
.page-lead{ color:var(--ash-dim); margin-top:16px; line-height:1.8; }

.lore-grid{ display:grid; grid-template-columns:.9fr 1.4fr; gap:50px; padding:40px 0 80px; align-items:start; }
.portrait-frame{
  aspect-ratio:3/4; border:1px solid rgba(255,255,255,.12); position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(230,57,80,.15), rgba(47,232,212,.1));
  display:flex; align-items:center; justify-content:center;
}
.portrait-frame img{ width:62%; opacity:.95; filter:drop-shadow(0 0 20px rgba(230,57,80,.35)); }
.portrait-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(45deg, transparent 48%, rgba(212,168,87,.4) 50%, transparent 52%); }
.portrait-caption{ font-size:.72rem; color:var(--ash-faint); margin-top:10px; text-align:center; }
.lore-text h3{ font-family:var(--f-display); font-size:1.3rem; margin:22px 0 10px; color:var(--horn); }
.lore-text h3:first-child{ margin-top:0; }
.lore-text p{ color:var(--ash-dim); line-height:1.85; }
.trait-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.trait{
  font-family:var(--f-tech); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px; border:1px solid rgba(255,255,255,.15); color:var(--ash-dim);
}
@media (max-width:820px){ .lore-grid{ grid-template-columns:1fr; } }

.identity-section{ padding:60px 0 90px; }
.identity-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
.identity-card{ padding:30px 26px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); transition:transform .3s ease; }
.identity-card:hover{ transform:translateY(-6px); }
.id-icon{ display:block; width:44px; height:44px; margin-bottom:16px; }
.identity-card h4{ font-family:var(--f-display); font-size:1.15rem; margin-bottom:12px; }
.identity-card ul{ color:var(--ash-dim); font-size:.86rem; line-height:2; }
.identity-card ul li::before{ content:'— '; color:var(--horn); }
.identity-card.demon{ border-top:2px solid var(--ember); }
.identity-card.circuit{ border-top:2px solid var(--circuit); }
.identity-card.horn{ border-top:2px solid var(--horn); }
@media (max-width:820px){ .identity-grid{ grid-template-columns:1fr; } }

.skills-section{ padding:20px 0 100px; }
.skill-bars{ margin-top:30px; display:flex; flex-direction:column; gap:20px; max-width:700px; }
.skill span{ font-family:var(--f-tech); font-size:.75rem; letter-spacing:.08em; color:var(--ash-dim); }
.bar{ height:6px; background:var(--void-3); margin-top:8px; overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--seam-grad); width:0; transition:width 1.4s ease; }
.skill.in .bar i, .reveal.in .bar i{ }