/* ==========================================================
   CECILIA / 塞西莉亚 — 白聖女と黒牧師
   Aesthetic: illuminated manuscript × stained glass × editorial
   ========================================================== */

:root{
  --ink:#1c1a24;
  --ink-soft:#3a3644;
  --paper:#f5f1e8;
  --paper-2:#efe9dc;
  --paper-3:#e6dfd0;
  --gold:#b08d4f;
  --gold-lt:#d8bd85;
  --gold-dp:#8a6c33;
  --rose:#c2707a;
  --rose-lt:#e3aeb2;
  --sage:#8fa48c;
  --night:#171520;
  --night-2:#221f2d;
  --line:rgba(28,26,36,.14);
  --line-2:rgba(28,26,36,.08);

  --f-disp:"Cinzel",serif;
  --f-serif:"Cormorant Garamond",serif;
  --f-cn:"Noto Serif SC",serif;

  --max:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-cn),var(--f-serif),serif;
  font-weight:300;
  line-height:1.9;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

::selection{background:var(--gold);color:#fff}

/* ---------- 纸纹 / 暗角 / 光尘 ---------- */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.vignette{
  position:fixed;inset:0;z-index:8998;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 52%,rgba(60,48,30,.16) 100%);
}
.motes{position:fixed;inset:0;z-index:8997;pointer-events:none;overflow:hidden}
.mote{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(216,189,133,.95),rgba(216,189,133,0) 70%);
  animation:drift linear infinite;
}
@keyframes drift{
  0%{transform:translate3d(0,110vh,0) scale(.6);opacity:0}
  12%{opacity:.85}
  88%{opacity:.7}
  100%{transform:translate3d(24px,-12vh,0) scale(1.15);opacity:0}
}

/* ---------- 载入幕 ---------- */
.veil{
  position:fixed;inset:0;z-index:9500;background:var(--night);
  display:grid;place-items:center;
  transition:opacity .9s var(--ease),visibility .9s;
}
.veil.is-gone{opacity:0;visibility:hidden}
.veil__mark{text-align:center}
.veil__cross{
  display:block;width:1px;height:74px;margin:0 auto 22px;
  background:linear-gradient(var(--gold-lt),transparent);
  animation:growLine 1.1s var(--ease) both;
}
.veil__cross::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  margin-top:26px;width:34px;height:1px;background:var(--gold-lt);
  animation:growBar .9s .35s var(--ease) both;
}
@keyframes growLine{from{height:0;opacity:0}to{height:74px;opacity:1}}
@keyframes growBar{from{width:0;opacity:0}to{width:34px;opacity:1}}
.veil__word{
  font-family:var(--f-disp);letter-spacing:.85em;font-size:.78rem;
  color:var(--gold-lt);padding-left:.85em;
  animation:fadeUp 1s .6s var(--ease) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 侧栏导航 ---------- */
.rail{
  position:fixed;left:26px;top:50%;transform:translateY(-50%);
  z-index:600;opacity:0;transition:opacity .6s .3s;
}
.rail.is-on{opacity:1}
.rail__list{display:flex;flex-direction:column;gap:2px}
.rail a{
  display:flex;align-items:center;gap:10px;padding:5px 0;
  font-family:var(--f-disp);font-size:.6rem;letter-spacing:.16em;
  color:rgba(28,26,36,.34);transition:color .35s var(--ease);
}
.rail a i{
  font-style:normal;width:26px;text-align:right;
  border-right:1px solid var(--line);padding-right:9px;
  transition:border-color .35s,color .35s;
}
.rail a span{
  font-family:var(--f-cn);font-size:.66rem;letter-spacing:.1em;
  opacity:0;transform:translateX(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.rail a:hover,.rail a.is-active{color:var(--gold-dp)}
.rail a:hover i,.rail a.is-active i{border-color:var(--gold);color:var(--gold-dp)}
.rail a:hover span,.rail a.is-active span{opacity:1;transform:none}

/* ---------- 通用容器 / 区块 ---------- */
.wrap{width:min(100% - 3rem,var(--max));margin-inline:auto}
.sec{padding:clamp(5rem,11vw,9.5rem) 0;position:relative}

.head{margin-bottom:clamp(2.6rem,5vw,4.2rem);text-align:center;position:relative}
.head__num{
  display:block;font-family:var(--f-disp);font-size:.7rem;
  letter-spacing:.5em;color:var(--gold);padding-left:.5em;margin-bottom:1.1rem;
}
.head__title{
  font-family:var(--f-cn);font-weight:500;
  font-size:clamp(1.65rem,4.2vw,2.7rem);letter-spacing:.12em;line-height:1.35;
}
.head__en{
  display:block;margin-top:1rem;font-family:var(--f-disp);
  font-size:.62rem;letter-spacing:.42em;color:rgba(28,26,36,.4);padding-left:.42em;
}
.head::after{
  content:"";display:block;width:52px;height:1px;margin:1.7rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.lede{
  max-width:44ch;margin:0 auto clamp(2.5rem,5vw,3.6rem);text-align:center;
  font-size:clamp(.94rem,1.6vw,1.08rem);color:var(--ink-soft);line-height:2.1;
}
.sub{
  font-family:var(--f-disp);font-size:.68rem;letter-spacing:.4em;
  color:var(--gold-dp);margin-bottom:1.6rem;padding-bottom:.85rem;
  border-bottom:1px solid var(--line);font-weight:500;
}
.sub--center{text-align:center;border-bottom:0;padding-left:.4em}
.sub--center::after{
  content:"";display:block;width:34px;height:1px;margin:.9rem auto 0;background:var(--gold);
}

/* ---------- 入场动画 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
[data-rise]{opacity:0;transform:translateY(22px)}
body.ready [data-rise]{animation:rise 1.05s var(--ease) both}
body.ready [data-rise="1"]{animation-delay:.10s}
body.ready [data-rise="2"]{animation-delay:.20s}
body.ready [data-rise="3"]{animation-delay:.30s}
body.ready [data-rise="4"]{animation-delay:.40s}
body.ready [data-rise="5"]{animation-delay:.50s}
body.ready [data-rise="6"]{animation-delay:.60s}
body.ready [data-rise="7"]{animation-delay:.70s}
body.ready [data-rise="8"]{animation-delay:.80s}
@keyframes rise{to{opacity:1;transform:none}}

/* ==========================================================
   I. HERO
   ========================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:clamp(6rem,12vh,9rem) 0 clamp(4rem,8vh,6rem);
  background:
    radial-gradient(90% 70% at 62% 22%,rgba(216,189,133,.28),transparent 60%),
    radial-gradient(70% 60% at 18% 78%,rgba(194,112,122,.13),transparent 62%),
    linear-gradient(178deg,#fbf8f1 0%,var(--paper) 42%,var(--paper-2) 100%);
  overflow:hidden;
}
.hero__glow{
  position:absolute;top:-22%;left:52%;transform:translateX(-50%);
  width:min(920px,105vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,228,.95),rgba(216,189,133,.24) 45%,transparent 70%);
  filter:blur(12px);animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
.hero__rays{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 90deg at 62% 8%,
    rgba(216,189,133,.14) 0deg 2.2deg,transparent 2.2deg 9deg);
  mask-image:radial-gradient(72% 62% at 62% 8%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(72% 62% at 62% 8%,#000 0%,transparent 72%);
  animation:spinRays 90s linear infinite;
}
@keyframes spinRays{to{transform:rotate(360deg)}}

.hero__frame{position:absolute;inset:clamp(14px,2.4vw,30px);pointer-events:none}
.hero__frame::before,.hero__frame::after{
  content:"";position:absolute;background:var(--line);
}
.hero__frame::before{left:0;right:0;top:0;height:1px}
.hero__frame::after{left:0;right:0;bottom:0;height:1px}
.corner{position:absolute;width:16px;height:16px;border:1px solid var(--gold);opacity:.65}
.corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

.hero__inner{
  position:relative;z-index:2;
  width:min(100% - 3.5rem,var(--max));margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero__eyebrow{
  font-family:var(--f-disp);font-size:.6rem;letter-spacing:.44em;
  color:var(--gold-dp);margin-bottom:1.5rem;padding-left:.44em;
}
.hero__title{display:flex;flex-direction:column;line-height:1}
.hero__jp{
  font-family:var(--f-cn);font-weight:200;
  font-size:clamp(2.6rem,7.2vw,5rem);letter-spacing:.1em;
}
.hero__en{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(.85rem,2.1vw,1.35rem);letter-spacing:.62em;
  color:var(--gold-dp);margin-top:1rem;padding-left:.62em;
}
.hero__cn{
  margin-top:1.1rem;font-size:clamp(.82rem,1.5vw,.98rem);
  letter-spacing:.5em;color:rgba(28,26,36,.5);
}
.hero__rule{display:flex;align-items:center;gap:.9rem;margin:2rem 0 1.9rem;max-width:340px}
.hero__rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lt),transparent)}
.hero__rule b{color:var(--gold);font-size:.62rem}
.hero__catch{
  font-family:var(--f-serif);font-size:clamp(1rem,1.9vw,1.24rem);
  line-height:2.05;color:var(--ink-soft);
}
.hero__catch em{font-style:italic;color:var(--rose);font-weight:400}
.hero__catch--cn{
  font-family:var(--f-cn);font-size:clamp(.82rem,1.4vw,.92rem);
  line-height:2.1;color:rgba(28,26,36,.52);margin-top:1.1rem;
}
.hero__meta{
  display:flex;align-items:center;gap:.95rem;flex-wrap:wrap;margin-top:2.3rem;
  font-family:var(--f-disp);font-size:.63rem;letter-spacing:.24em;color:rgba(28,26,36,.46);
}
.hero__meta i{width:3px;height:3px;border-radius:50%;background:var(--gold);display:inline-block}

.hero__portrait{position:relative;display:grid;place-items:center;transition:transform .5s var(--ease)}
.halo{
  position:absolute;width:min(76%,380px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(176,141,79,.42);top:6%;
  animation:haloSpin 26s linear infinite;
}
.halo::after{
  content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--gold-lt);
  box-shadow:0 0 14px 3px rgba(216,189,133,.85);
}
.halo--2{width:min(90%,452px);top:1%;border-style:dashed;border-color:rgba(176,141,79,.24);animation-duration:44s;animation-direction:reverse}
.halo--2::after{display:none}
@keyframes haloSpin{to{transform:rotate(360deg)}}
.hero__portrait img{
  position:relative;z-index:2;width:min(100%,470px);
  filter:drop-shadow(0 28px 48px rgba(60,48,30,.24));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.hero__portrait figcaption{
  position:relative;z-index:2;margin-top:1.1rem;text-align:center;
  font-size:.56rem;letter-spacing:.09em;color:rgba(28,26,36,.36);
}

.hero__scroll{
  position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-family:var(--f-disp);font-size:.55rem;letter-spacing:.4em;
  color:rgba(28,26,36,.42);padding-left:.4em;
}
.hero__scroll i{display:block;width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:pull 2.1s ease-in-out infinite}
@keyframes pull{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ==========================================================
   II. PROFILE
   ========================================================== */
.sec--profile{background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.profile{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.profile__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pcell{
  background:var(--paper);padding:1.5rem 1.35rem;position:relative;
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),background .4s;
}
.pcell.is-in{opacity:1;transform:none}
.pcell:hover{background:#fffdf8}
.pcell__label{
  font-family:var(--f-disp);font-size:.55rem;letter-spacing:.3em;
  color:var(--gold-dp);margin-bottom:.7rem;
}
.pcell__value{font-size:1.02rem;font-weight:400;letter-spacing:.06em;line-height:1.5}
.pcell__note{font-size:.68rem;color:rgba(28,26,36,.42);margin-top:.5rem;letter-spacing:.04em}
.pcell::after{
  content:"";position:absolute;left:1.35rem;bottom:0;width:0;height:1px;
  background:var(--gold);transition:width .5s var(--ease);
}
.pcell:hover::after{width:calc(100% - 2.7rem)}

.quotecard{
  position:relative;background:#fffdf8;border:1px solid var(--line);
  padding:clamp(1.9rem,3.4vw,2.9rem);
  box-shadow:0 22px 44px -30px rgba(60,48,30,.4);
}
.quotecard::before{
  content:"";position:absolute;inset:8px;border:1px solid var(--line-2);pointer-events:none;
}
.quotecard__mark{
  position:absolute;top:-.1em;left:1.2rem;font-family:var(--f-serif);
  font-size:5rem;color:rgba(176,141,79,.2);line-height:1;
}
.quotecard__jp{
  position:relative;font-family:var(--f-serif);font-size:1.02rem;
  line-height:2.1;color:var(--ink);letter-spacing:.02em;
}
.quotecard__cn{
  margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line-2);
  font-size:.85rem;line-height:2.05;color:rgba(28,26,36,.58);
}
.quotecard__src{
  margin-top:1.5rem;font-family:var(--f-disp);font-size:.55rem;
  letter-spacing:.2em;color:var(--gold-dp);text-align:right;
}
.faces{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.6rem}
.faces figure{
  background:linear-gradient(160deg,#fffdf8,var(--paper-2));
  border:1px solid var(--line);padding:1rem;text-align:center;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.faces figure:hover{transform:translateY(-6px);box-shadow:0 20px 34px -24px rgba(60,48,30,.5)}
.faces img{margin:0 auto;max-height:190px;width:auto}
.faces figcaption{
  margin-top:.8rem;font-family:var(--f-serif);font-size:.72rem;
  letter-spacing:.22em;color:var(--gold-dp);
}

/* ==========================================================
   III. DUALITY
   ========================================================== */
.sec--duality{background:var(--paper-3);position:relative;overflow:hidden}
.sec--duality::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(255,253,248,.85) 0 48%,rgba(23,21,32,.05) 52% 100%);
  pointer-events:none;
}
.sec--duality .wrap{position:relative;z-index:1}
.duality{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,3vw,2.4rem);align-items:stretch}
.face{
  position:relative;padding:clamp(1.9rem,3.4vw,2.8rem);
  border:1px solid var(--line);transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.face:hover{transform:translateY(-8px)}
.face--light{
  background:linear-gradient(170deg,#fffdf8,var(--paper));
  box-shadow:0 24px 50px -34px rgba(60,48,30,.45);
}
.face--light:hover{box-shadow:0 34px 60px -34px rgba(60,48,30,.55)}
.face--dark{
  background:linear-gradient(170deg,var(--night-2),var(--night));
  border-color:rgba(216,189,133,.24);color:var(--paper);
  box-shadow:0 24px 50px -34px rgba(23,21,32,.8);
}
.face--dark:hover{box-shadow:0 34px 60px -34px rgba(23,21,32,.9)}
.face__tag{
  font-family:var(--f-disp);font-size:.55rem;letter-spacing:.42em;
  color:var(--gold-dp);margin-bottom:1.2rem;padding-left:.42em;
}
.face--dark .face__tag{color:var(--gold-lt)}
.face__title{
  font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:500;letter-spacing:.1em;
  padding-bottom:1.3rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line);
  position:relative;
}
.face--dark .face__title{border-color:rgba(216,189,133,.22)}
.face__title::after{
  content:attr(data-jp);display:block;margin-top:.5rem;
  font-family:var(--f-serif);font-size:.76rem;letter-spacing:.16em;
  color:rgba(28,26,36,.4);font-weight:400;
}
.face--dark .face__title::after{color:rgba(245,241,232,.42)}
.face__list li{
  position:relative;padding-left:1.5rem;margin-bottom:1.05rem;
  font-size:.93rem;line-height:1.95;color:var(--ink-soft);
}
.face--dark .face__list li{color:rgba(245,241,232,.76)}
.face__list li:last-child{margin-bottom:0}
.face__list li::before{
  content:"✦";position:absolute;left:0;top:.1em;
  font-size:.52rem;color:var(--gold);
}
.face--dark .face__list li::before{color:var(--gold-lt)}
.face__divider{display:grid;place-items:center;position:relative}
.face__divider::before{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(transparent,var(--gold-lt),transparent);
}
.face__vs{
  position:relative;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--paper-3);
  border:1px solid var(--gold);color:var(--gold-dp);
  font-family:var(--f-serif);font-size:1rem;
}

/* ==========================================================
   IV. POWER
   ========================================================== */
.sec--power{
  background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);
  color:var(--paper);position:relative;overflow:hidden;
}
.sec--power::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(60% 50% at 50% 0%,rgba(216,189,133,.22),transparent 70%);
}
.sec--power .head__title{color:var(--paper)}
.sec--power .head__en{color:rgba(245,241,232,.42)}
.sec--power .head__num{color:var(--gold-lt)}
.sec--power .head::after{background:linear-gradient(90deg,transparent,var(--gold-lt),transparent)}
.sec--power .wrap{position:relative;z-index:1}

.powers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}
.pw{
  position:relative;padding:clamp(2rem,3.4vw,2.8rem) clamp(1.5rem,2.6vw,2.2rem);
  border:1px solid rgba(216,189,133,.2);
  background:linear-gradient(170deg,rgba(216,189,133,.07),rgba(216,189,133,.015));
  overflow:hidden;
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),border-color .5s,background .5s;
}
.pw.is-in{opacity:1;transform:none}
.pw:hover{border-color:rgba(216,189,133,.55);background:linear-gradient(170deg,rgba(216,189,133,.14),rgba(216,189,133,.03))}
.pw::before{
  content:"";position:absolute;top:-40%;left:-60%;width:60%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,247,228,.16),transparent);
  transform:skewX(-18deg);transition:left .9s var(--ease);
}
.pw:hover::before{left:130%}
.pw__no{
  font-family:var(--f-disp);font-size:2.6rem;line-height:1;
  color:rgba(216,189,133,.26);margin-bottom:1.2rem;
}
.pw__name{font-size:1.28rem;font-weight:500;letter-spacing:.13em;margin-bottom:.5rem}
.pw__jp{
  font-family:var(--f-serif);font-size:.78rem;letter-spacing:.24em;
  color:var(--gold-lt);margin-bottom:1.4rem;
}
.pw__jp::after{content:"";display:block;width:26px;height:1px;background:rgba(216,189,133,.5);margin-top:1.1rem}
.pw__desc{font-size:.88rem;line-height:2;color:rgba(245,241,232,.68)}
.power__foot{
  margin-top:clamp(2.6rem,5vw,4rem);text-align:center;
  font-family:var(--f-serif);font-size:clamp(1rem,1.9vw,1.2rem);
  line-height:2.1;color:rgba(245,241,232,.7);
}
.power__foot em{font-style:italic;color:var(--gold-lt)}

/* ==========================================================
   V. STORY / CHRONICLE
   ========================================================== */
.sec--story{background:var(--paper)}
.chrono{
  position:relative;max-width:880px;margin-inline:auto;
  padding-left:clamp(2.4rem,5vw,4.5rem);
}
.chrono::before{
  content:"";position:absolute;left:clamp(.9rem,2.2vw,2rem);top:.6rem;bottom:.6rem;width:1px;
  background:linear-gradient(transparent,var(--line),var(--line),transparent);
}
.ch{
  position:relative;padding:0 0 clamp(2.4rem,4.4vw,3.4rem);
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.ch.is-in{opacity:1;transform:none}
.ch:last-child{padding-bottom:0}
.ch__dot{
  position:absolute;left:calc(clamp(2.4rem,5vw,4.5rem) * -1 + clamp(.9rem,2.2vw,2rem) - 5px);
  top:.55rem;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1px solid var(--gold);
  display:grid;place-items:center;
}
.ch__dot::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--gold);transition:transform .4s}
.ch:hover .ch__dot::after{transform:scale(2.2)}
.ch__no{
  font-family:var(--f-disp);font-size:.6rem;letter-spacing:.34em;
  color:var(--gold-dp);margin-bottom:.7rem;
}
.ch__title{font-size:clamp(1.1rem,2.3vw,1.42rem);font-weight:500;letter-spacing:.09em}
.ch__jp{
  font-family:var(--f-serif);font-size:.8rem;letter-spacing:.2em;
  color:rgba(28,26,36,.42);margin-top:.45rem;
}
.ch__desc{
  margin-top:1.1rem;font-size:.92rem;line-height:2.05;
  color:var(--ink-soft);max-width:60ch;
}

/* ==========================================================
   VI. BONDS
   ========================================================== */
.sec--bonds{background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.pair{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.4rem);
  align-items:center;padding:clamp(1.8rem,3.6vw,3rem);
  background:linear-gradient(150deg,#fffdf8,var(--paper-2));
  border:1px solid var(--line);position:relative;overflow:hidden;
  margin-bottom:clamp(2.4rem,5vw,3.8rem);
  box-shadow:0 26px 54px -38px rgba(60,48,30,.5);
}
.pair::before{
  content:"";position:absolute;top:0;right:0;width:42%;height:100%;
  background:radial-gradient(circle at 80% 30%,rgba(194,112,122,.1),transparent 65%);
  pointer-events:none;
}
.pair__figure{position:relative;width:clamp(150px,20vw,240px)}
.pair__figure img{filter:drop-shadow(0 18px 30px rgba(60,48,30,.28))}
.pair__body{position:relative}
.pair__tag{
  display:inline-block;font-family:var(--f-disp);font-size:.54rem;
  letter-spacing:.3em;color:var(--gold-dp);border:1px solid var(--gold);
  padding:.4rem .95rem .4rem 1.25rem;margin-bottom:1.2rem;
}
.pair__name{font-size:clamp(1.4rem,3vw,2rem);font-weight:500;letter-spacing:.1em}
.pair__jp{
  font-family:var(--f-serif);font-size:.9rem;letter-spacing:.26em;
  color:rgba(28,26,36,.45);margin-top:.5rem;
}
.pair__cv{
  font-family:var(--f-disp);font-size:.62rem;letter-spacing:.22em;
  color:var(--gold-dp);margin-top:.9rem;
}
.pair__desc{
  margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.93rem;line-height:2.05;color:var(--ink-soft);max-width:62ch;
}

.bonds{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.6rem)}
.bond{
  position:relative;background:#fffdf8;border:1px solid var(--line);
  padding:1.5rem 1.3rem 1.7rem;text-align:center;overflow:hidden;
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s;
}
.bond.is-in{opacity:1;transform:none}
.bond:hover{transform:translateY(-8px);border-color:var(--gold-lt);box-shadow:0 26px 46px -30px rgba(60,48,30,.5)}
.bond__img{
  width:104px;height:104px;margin:0 auto 1.1rem;border-radius:50%;
  background:linear-gradient(160deg,var(--paper-2),var(--paper-3));
  border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;
  transition:border-color .4s;
}
.bond:hover .bond__img{border-color:var(--gold-lt)}
.bond__img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.bond__name{font-size:1.05rem;font-weight:500;letter-spacing:.1em}
.bond__jp{
  font-family:var(--f-serif);font-size:.72rem;letter-spacing:.16em;
  color:rgba(28,26,36,.42);margin-top:.35rem;
}
.bond__cv{
  font-family:var(--f-disp);font-size:.55rem;letter-spacing:.16em;
  color:var(--gold-dp);margin-top:.7rem;
}
.bond__tag{
  display:inline-block;margin-top:.9rem;font-size:.66rem;letter-spacing:.08em;
  color:rgba(28,26,36,.5);border-top:1px solid var(--line);padding-top:.8rem;
}
.bond__desc{
  margin-top:.9rem;font-size:.8rem;line-height:1.95;
  color:rgba(28,26,36,.55);text-align:left;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ease),opacity .5s var(--ease),margin-top .5s;
}
.bond:hover .bond__desc{max-height:280px;opacity:1}

/* ==========================================================
   VII. ANIME
   ========================================================== */
.sec--anime{background:var(--paper-3)}
.kv{
  position:relative;margin-bottom:clamp(2.6rem,5vw,4rem);
  border:1px solid var(--line);overflow:hidden;
  box-shadow:0 28px 56px -40px rgba(60,48,30,.6);
}
.kv img{width:100%;transition:transform 1.4s var(--ease)}
.kv:hover img{transform:scale(1.03)}
.kv__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1.6rem,3.4vw,2.6rem);
  background:linear-gradient(transparent,rgba(23,21,32,.86));
  color:var(--paper);
}
.kv__jp{font-family:var(--f-serif);font-size:clamp(.86rem,1.7vw,1.1rem);line-height:1.85;letter-spacing:.03em}
.kv__cn{margin-top:.7rem;font-size:.8rem;color:rgba(245,241,232,.66);line-height:1.9}

.anime__cols{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.epi__list{border-top:1px solid var(--line)}
.epi__list li{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:baseline;
  padding:1rem .6rem;border-bottom:1px solid var(--line);
  transition:background .35s,padding-left .35s var(--ease);
}
.epi__list li:hover{background:#fffdf8;padding-left:1.2rem}
.epi__no{font-family:var(--f-disp);font-size:.72rem;color:var(--gold-dp);letter-spacing:.1em}
.epi__t b{display:block;font-weight:400;font-size:.95rem;letter-spacing:.04em}
.epi__t span{display:block;font-size:.74rem;color:rgba(28,26,36,.46);margin-top:.25rem}
.epi__d{font-family:var(--f-disp);font-size:.6rem;color:rgba(28,26,36,.36);letter-spacing:.08em;white-space:nowrap}

.side{display:flex;flex-direction:column;gap:clamp(1.8rem,3.6vw,2.8rem)}
.songs{display:flex;flex-direction:column;gap:1rem}
.song{
  padding:1.2rem 1.3rem;background:#fffdf8;border:1px solid var(--line);
  border-left:2px solid var(--gold);transition:transform .45s var(--ease),box-shadow .45s;
}
.song:hover{transform:translateX(6px);box-shadow:0 16px 30px -24px rgba(60,48,30,.5)}
.song__type{font-family:var(--f-disp);font-size:.52rem;letter-spacing:.34em;color:var(--gold-dp)}
.song__title{font-size:1.08rem;font-weight:500;letter-spacing:.06em;margin-top:.55rem}
.song__artist{font-family:var(--f-serif);font-size:.82rem;letter-spacing:.14em;color:var(--rose);margin-top:.3rem}
.song__credit{font-size:.68rem;color:rgba(28,26,36,.42);margin-top:.5rem}

.staff{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;font-size:.85rem}
.staff dt{color:rgba(28,26,36,.45);letter-spacing:.06em;white-space:nowrap}
.staff dd{letter-spacing:.05em}
.staff dd .pcell__note{display:block;margin-top:.15rem}

.voices{margin-top:clamp(2.8rem,5.5vw,4.4rem)}
.voices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.8rem)}
.vc{
  position:relative;padding:clamp(1.6rem,3vw,2.2rem);
  background:linear-gradient(165deg,#fffdf8,var(--paper-2));
  border:1px solid var(--line);
  opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),box-shadow .5s;
}
.vc.is-in{opacity:1;transform:none}
.vc:hover{box-shadow:0 22px 44px -32px rgba(60,48,30,.5)}
.vc__who{font-size:1.02rem;font-weight:500;letter-spacing:.1em}
.vc__role{
  font-family:var(--f-serif);font-size:.7rem;letter-spacing:.2em;
  color:var(--gold-dp);margin-top:.35rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line);margin-bottom:1.1rem;
}
.vc__jp{font-family:var(--f-serif);font-size:.88rem;line-height:2;color:var(--ink-soft)}
.vc__cn{margin-top:.9rem;font-size:.78rem;line-height:1.95;color:rgba(28,26,36,.5)}

.comics{margin-top:clamp(2.8rem,5.5vw,4.4rem)}
.comics__note{text-align:center;font-size:.78rem;color:rgba(28,26,36,.45);margin-bottom:1.8rem;letter-spacing:.06em}
.comics__strip{
  display:flex;gap:1rem;overflow-x:auto;padding:.6rem .2rem 1.4rem;
  scroll-snap-type:x mandatory;
  cursor:grab;
  scroll-behavior:smooth;
}
.comics__strip.is-grabbing{cursor:grabbing;scroll-behavior:auto}
.comics__strip::-webkit-scrollbar{height:3px}
.comics__strip::-webkit-scrollbar-track{background:var(--line-2)}
.comics__strip::-webkit-scrollbar-thumb{background:var(--gold-lt)}
.comics__strip figure{
  flex:0 0 auto;width:clamp(108px,13vw,152px);scroll-snap-align:start;
  transition:transform .5s var(--ease),box-shadow .5s;
}
.comics__strip figure:hover{transform:translateY(-9px) rotate(-1.2deg);box-shadow:0 24px 40px -26px rgba(60,48,30,.65)}
.comics__strip img{border:1px solid var(--line)}
.comics__strip figcaption{
  margin-top:.6rem;text-align:center;font-family:var(--f-disp);
  font-size:.55rem;letter-spacing:.2em;color:rgba(28,26,36,.42);
}

/* ==========================================================
   VIII. CHARM
   ========================================================== */
.sec--charm{background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.charms{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.9rem)}
.cm{
  position:relative;padding:clamp(1.9rem,3.4vw,2.7rem);
  background:#fffdf8;border:1px solid var(--line);overflow:hidden;
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),box-shadow .5s;
}
.cm.is-in{opacity:1;transform:none}
.cm:hover{box-shadow:0 26px 50px -34px rgba(60,48,30,.5)}
.cm__no{
  position:absolute;top:.4rem;right:1.1rem;font-family:var(--f-disp);
  font-size:4.2rem;color:rgba(176,141,79,.11);line-height:1;
}
.cm__title{
  position:relative;font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:500;
  letter-spacing:.1em;padding-bottom:1.1rem;margin-bottom:1.2rem;
}
.cm__title::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:1px;background:var(--gold);transition:width .55s var(--ease)}
.cm:hover .cm__title::after{width:74px}
.cm__desc{font-size:.92rem;line-height:2.05;color:var(--ink-soft)}

.finale{
  margin-top:clamp(3rem,6vw,5rem);padding:clamp(2.4rem,5vw,4rem) 1.5rem;
  text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;
}
.finale::before,.finale::after{
  content:"✦";position:absolute;left:50%;transform:translateX(-50%);
  font-size:.6rem;color:var(--gold);background:var(--paper);padding:0 .8rem;
}
.finale::before{top:-.55rem}
.finale::after{bottom:-.55rem}
.finale__jp{
  font-family:var(--f-serif);font-size:clamp(1.2rem,2.8vw,1.75rem);
  line-height:1.95;letter-spacing:.04em;
}
.finale__jp em{font-style:italic;color:var(--rose);font-weight:500}
.finale__cn{
  margin-top:1.4rem;font-size:clamp(.84rem,1.5vw,.95rem);
  line-height:2.1;color:rgba(28,26,36,.55);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.foot{
  background:var(--night);color:rgba(245,241,232,.6);
  padding:clamp(3rem,6vw,4.6rem) 0;text-align:center;
}
.foot__mark{color:var(--gold-lt);font-size:.7rem;margin-bottom:1.4rem}
.foot__title{
  font-family:var(--f-cn);font-size:1.15rem;font-weight:300;
  letter-spacing:.34em;color:var(--paper);padding-left:.34em;
}
.foot__line{margin-top:1.3rem;font-size:.74rem;letter-spacing:.08em}
.foot__cr{margin-top:.7rem;font-size:.66rem;color:rgba(245,241,232,.4);letter-spacing:.04em}
.foot__note{margin-top:1.4rem;font-size:.62rem;color:rgba(245,241,232,.3)}

.totop{
  position:fixed;right:26px;bottom:26px;z-index:700;
  width:44px;height:44px;border-radius:50%;
  background:var(--paper);border:1px solid var(--gold);color:var(--gold-dp);
  font-size:.62rem;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);
  box-shadow:0 12px 26px -16px rgba(60,48,30,.6);
  transition:opacity .5s,visibility .5s,transform .5s var(--ease),background .35s,color .35s;
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--gold);color:#fff}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1180px){
  .rail{display:none}
  .bonds{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .hero{min-height:auto}
  .hero__inner{grid-template-columns:1fr;text-align:center;gap:2.6rem}
  .hero__title{align-items:center}
  .hero__rule{margin-inline:auto}
  .hero__meta{justify-content:center}
  .hero__portrait{order:-1}
  .hero__portrait img{width:min(72%,330px)}
  .hero__scroll{display:none}
  .profile{grid-template-columns:1fr}
  .duality{grid-template-columns:1fr}
  .face__divider{padding:.4rem 0}
  .face__divider::before{top:auto;bottom:auto;left:0;right:0;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lt),transparent)}
  .powers{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr;text-align:center;justify-items:center}
  .pair__desc{text-align:left}
  .anime__cols{grid-template-columns:1fr}
  .voices__grid{grid-template-columns:1fr}
  .charms{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{line-height:1.85}
  .wrap{width:min(100% - 2rem,var(--max))}
  .hero__inner{width:min(100% - 2rem,var(--max))}
  .profile__grid{grid-template-columns:1fr}
  .bonds{grid-template-columns:repeat(2,1fr)}
  .faces{grid-template-columns:1fr}
  .bond__desc{display:none}
  .epi__list li{grid-template-columns:auto 1fr;gap:.8rem}
  .epi__d{grid-column:2;font-size:.56rem}
  .totop{right:16px;bottom:16px;width:38px;height:38px}
  .quotecard__mark{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,[data-rise],.pcell,.pw,.ch,.bond,.vc,.cm{opacity:1!important;transform:none!important}
}

@media print{
  .veil,.rail,.motes,.grain,.vignette,.totop,.hero__scroll{display:none!important}
  body{background:#fff}
  .sec{padding:2rem 0;break-inside:avoid}
}