/* ===== Characters page ===== */
.charpage{background:var(--aqua2)}
.nowrap{white-space:nowrap}

/* ---- Character hero ---- */
.chero{position:relative;padding:150px 0 90px;text-align:center;color:var(--ink);overflow:hidden;background:linear-gradient(180deg,#bfe9fb 0%,#e3f5fd 60%,var(--aqua2) 100%)}
.chero__bg{position:absolute;inset:0;background:
  radial-gradient(circle at 18% 30%,rgba(255,255,255,.6),transparent 38%),
  radial-gradient(circle at 82% 22%,rgba(255,255,255,.5),transparent 36%);pointer-events:none}
.chero__inner{position:relative;z-index:2}
.chero__en{font-family:var(--display);font-weight:700;letter-spacing:.2em;color:var(--blue);font-size:.86rem;margin-bottom:12px}
.chero__title{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.3;color:var(--ink)}
.chero__lead{margin-top:18px;color:var(--ink-soft);font-size:1rem;line-height:1.9}
.chero__duo{display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,6vw,80px);margin-top:30px}
.chero__fig{display:flex;flex-direction:column;align-items:center}
.chero__fig img{width:clamp(150px,22vw,250px);filter:drop-shadow(0 18px 28px rgba(0,40,70,.28));animation:bob 3.8s ease-in-out infinite}
.chero__fig:last-child img{animation-delay:.7s}
.chero__fig figcaption{margin-top:10px;font-family:var(--display);font-weight:900;font-size:1.1rem;color:var(--blue)}
.chero__wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:1}
.chero__wave svg{width:100%;height:90px}
.chero__wave path{fill:var(--aqua2)}

/* ---- Story ---- */
.story{padding:80px 0}
.story__steps{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:920px;margin:0 auto}
.story__step{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s);padding:28px 28px 26px;position:relative}
.story__no{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--sky-l);display:block;margin-bottom:8px}
.story__step p{font-size:.95rem;line-height:1.95;color:var(--ink-soft)}

/* ---- Profile ---- */
.profile{padding:70px 0}
.profile--iwa{background:linear-gradient(180deg,var(--aqua2),#f4efe2)}
.profile--ayu{background:linear-gradient(180deg,var(--aqua2),#eef6dd)}
.profile__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;margin-bottom:50px}
.profile__grid--rev{grid-template-columns:1.15fr .85fr}
.profile__grid--rev .profile__visual{order:2}
.profile__visual{display:flex;justify-content:center}
.profile__main{width:min(360px,80%);filter:drop-shadow(0 20px 30px rgba(0,40,70,.25));animation:bob 4s ease-in-out infinite}
.profile__en{font-family:var(--display);font-weight:700;letter-spacing:.16em;color:var(--sky);font-size:.8rem}
.profile__name{font-family:var(--display);font-weight:900;font-size:clamp(2rem,5vw,2.8rem);color:var(--blue);margin-top:4px}
.profile__motif{font-weight:700;color:var(--sun-d);margin:6px 0 18px}
.profile__dl{display:flex;flex-direction:column;gap:14px}
.profile__dl div{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;border-bottom:1px solid rgba(0,40,70,.08);padding-bottom:14px}
.profile__dl dt{font-family:var(--display);font-weight:700;color:var(--blue);font-size:.92rem}
.profile__dl dd{font-size:.94rem;color:var(--ink-soft);line-height:1.8}

/* ---- Faces grid ---- */
.faces__h{text-align:center;font-family:var(--display);font-weight:900;font-size:1.4rem;color:var(--ink);margin:46px 0 26px}
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:720px;margin:0 auto}
.faces__item{background:#fff;border-radius:var(--radius-s);box-shadow:var(--shadow-s);padding:14px 8px 10px;text-align:center;transition:transform .25s}
.faces__item:hover{transform:translateY(-5px)}
.faces__item img{width:78%;margin:0 auto}
.faces__item figcaption{margin-top:6px;font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--ink-soft)}

/* ---- Poses grid ---- */
.poses{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:760px;margin:0 auto}
.poses__item{background:#fff;border-radius:var(--radius-s);box-shadow:var(--shadow-s);padding:14px;display:flex;align-items:center;justify-content:center;transition:transform .25s}
.poses__item:hover{transform:translateY(-5px)}
.poses__item img{width:88%}

/* ---- Evolution (page) ---- */
.cevo{padding:80px 0;background:linear-gradient(180deg,var(--aqua2),var(--aqua))}
.cevo__rows{display:flex;flex-direction:column;gap:30px;max-width:920px;margin:0 auto}
.cevo__row{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:22px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s);padding:26px 30px}
.cevo__cell{display:flex;flex-direction:column;align-items:center;gap:6px}
.cevo__cell img{width:96px;filter:drop-shadow(0 10px 14px rgba(0,40,70,.2))}
.cevo__cell--big img{width:150px}
.cevo__cell figcaption{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--blue)}
.cevo__cell--big figcaption{color:var(--sun-d)}
.cevo__arrow{color:var(--sky);font-size:1.5rem}
.cevo__desc{font-size:.92rem;color:var(--ink-soft);line-height:1.85}

/* ---- Back button ---- */
.charback{text-align:center;padding:56px 0 70px;background:var(--aqua)}

/* current nav */
.hdr__nav a.is-current{color:var(--sky-l);font-weight:700}
.hdr.scrolled .hdr__nav a.is-current{color:var(--blue);font-weight:700}

/* ===== Responsive ===== */
@media (max-width:860px){
  .profile__grid,.profile__grid--rev{grid-template-columns:1fr;gap:24px}
  .profile__grid--rev .profile__visual{order:0}
}
@media (max-width:760px){
  .chero{padding:120px 0 70px}
  .story__steps{grid-template-columns:1fr;max-width:460px}
  .faces{max-width:420px;gap:12px}
  .poses{grid-template-columns:repeat(2,1fr);max-width:380px}
  .profile__dl div{grid-template-columns:80px 1fr;gap:10px}
  .cevo__row{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding:24px 18px}
  .cevo__arrow{transform:rotate(90deg)}
  .cevo__cell img{width:84px}
  .cevo__cell--big img{width:120px}
}