/* Rui のページ。トップの tokens.css / site.css の上に足す。
   地はトップのヒーローと同じ紙。闇へ落ちる演出は無い。
   羽（.veil--paper）・音（.sound）はトップの指定のまま。トップの指定が読む変数は
   「紙のまま」に固定して渡す（--paper-mix:1 で羽と音のボタンが紙の側、--q:0 で墨は来ない）。

   重ね順：本文 z2 → 羽 z3（乗算）→ 戻る・音 z50 */
body.rui{background:var(--paper); color:var(--paper-ink); --paper-mix:1; --q:0}
main{position:relative; z-index:2}

/* ══ トップへ戻る ══════════════════════════════════
   左上に居続ける */
.r-back{position:fixed; z-index:50; left:clamp(16px,2.5vw,34px); top:clamp(14px,2.3vw,30px);
  display:inline-flex; align-items:center; gap:.85em; min-height:44px; padding:.4em .3em;
  text-decoration:none;
  color:var(--paper-ink); filter:drop-shadow(0 0 6px var(--paper));
  transition:color .4s var(--ease)}
.r-back svg{width:30px; height:12px; flex:none; overflow:visible;
  fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
  transition:translate .5s var(--ease)}
.r-back__en{font-family:var(--serif); font-size:12px; letter-spacing:.3em; white-space:nowrap}
.r-back__ja{font-size:11px; letter-spacing:.16em; padding-left:.95em;
  border-left:1px solid var(--paper-rule)}
@media (hover:hover){
  .r-back:hover{color:#C2185B}
  .r-back:hover svg{translate:-5px 0}
}
/* 音のボタンは右上へ。左上は戻る導線に譲る */
html.js body.rui .sound{left:auto; right:clamp(16px,2.5vw,34px); color:var(--c1)}
@media (hover:hover){ body.rui .sound:hover{color:#C2185B} }
/* 「Special Music」。トップの音のボタンは文字を置かないが、このページだけ歌の名前として出す */
body.rui .sound__label{font-family:var(--serif); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; white-space:nowrap; line-height:1}
/* 狭い画面では左上の「トップへ戻る」とぶつかる。字間とスペクトラムを詰める */
@media (max-width:400px){
  html.js body.rui .sound{gap:.5em; padding-inline:.3em}
  body.rui .sound__label{font-size:10px; letter-spacing:.14em}
  body.rui .sound__eq{gap:1px}
}
body.rui .soundhint{left:auto; right:clamp(16px,2.5vw,34px)}
body.rui .soundhint::before{left:auto; right:22px}

/* ══ 名乗り ═══════════════════════════════════════ */
.r-hero{position:relative; min-height:100svh; color:var(--paper-ink); overflow-x:clip;
  /* main は z-index を持つので、合成はその中で閉じる。乗算の相手になる紙をこの節に敷く */
  background:var(--paper); isolation:isolate}
/* 立ち絵。原画は白地なので multiply で紙に置く（トップの人物と同じ手。白は紙に溶けて枠が消える）。
   全身を切らずに見せる。箱は絵と同じ縦横比にして、上下の余白の内側にまるごと収める。
   **合成は img に掛け、箱は重ね順の入れ物にしない**（z-index・transform・opacity を持たせない）。
   こうすると乗算の相手が「節の紙＋背後の輪」になり、絵の白いところから輪が透ける。
   箱が入れ物になると、img は箱の中だけで合成されて紙にも輪にも効かない */
.r-fig{position:absolute; top:clamp(56px,8svh,96px); right:clamp(0px, 9vw - 60px, 140px);
  height:calc(100svh - clamp(56px,8svh,96px) - clamp(16px,3svh,40px));
  aspect-ratio:1024/1536; pointer-events:none}
.r-fig img{position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:50% 0; filter:brightness(1.04) contrast(1.03);
  mix-blend-mode:multiply;
  /* 奥行き。マウス（--mx/--my, -1〜1）とスクロール（--hs, 0〜1）で、輪・人物・サインを別々の量だけずらす */
  translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -8px + var(--hs,0) * -5svh)}
/* 目の炎は img と同じだけずらす。ずらさないと炎だけ瞳から離れる */
.r-fig .eyefire{translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -8px + var(--hs,0) * -5svh)}
/* 読み込みで、紙の奥から浮かび上がる */
.js .r-fig img{opacity:0; scale:1.04; transition:opacity 2.2s var(--ease), scale 3.2s var(--ease)}
.js .is-lit .r-fig img{opacity:1; scale:1}

.r-hero__in{position:relative; z-index:2; min-height:100svh; max-width:var(--maxw);
  margin-inline:auto; padding:clamp(88px,14vh,150px) var(--pad) clamp(56px,10vh,110px);
  display:flex; flex-direction:column; justify-content:flex-end}
.r-kicker{display:flex; align-items:center; gap:1.1em; margin:0;
  font-family:var(--serif); font-size:clamp(10px,.6vw + 7px,12.5px); letter-spacing:.42em;
  text-transform:uppercase; color:var(--paper-soft); white-space:nowrap}
.r-kicker i{display:block; width:clamp(28px,4vw,56px); height:1px; background:currentColor; opacity:.5}

/* サイン。題字の代わりに、本人の署名で名乗る。左から書かれていく */
.r-sign{margin:clamp(6px,1.5vh,20px) 0 0 -1.2vw; font-weight:400; line-height:0;
  width:min(60vw, 860px); rotate:-5deg; transform-origin:0 60%;
  translate:calc(var(--mx,0) * 14px) calc(var(--my,0) * 10px + var(--hs,0) * -14svh)}
.r-sign img{width:100%; height:auto;
  filter:drop-shadow(0 0 18px rgba(255,46,136,.22))}
.js .r-sign img{
  -webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
  mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
  -webkit-mask-size:260% 100%; mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  transition:-webkit-mask-position 2.4s cubic-bezier(.5,.05,.2,1) .5s,
    mask-position 2.4s cubic-bezier(.5,.05,.2,1) .5s}
.js .is-lit .r-sign img{-webkit-mask-position:0 0; mask-position:0 0}

/* サインの読み。手書きが読めない人のために、カタカナで添える */
.r-yomi{display:flex; align-items:center; gap:.9em; margin:clamp(4px,1vh,12px) 0 0;
  font-family:var(--min); font-weight:600; font-size:clamp(18px,1vw + 12px,26px);
  letter-spacing:.5em; color:var(--paper-ink)}
.r-yomi::before{content:""; width:clamp(22px,3vw,40px); height:1px; background:#C2185B}

/* プロフィール。表組みにせず、雑誌のキャプションのように項目と値を点線でつなぐ。数字はディドー */
.r-prof{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(22px,3.2vw,52px);
  margin:clamp(20px,3.4vh,44px) 0 0; max-width:min(580px, 44vw)}
.r-prof div{display:flex; align-items:baseline; gap:.7em; padding:.5em 0 .45em; min-width:0}
.r-prof dt{display:flex; align-items:baseline; gap:.7em; flex:1; min-width:0; margin:0;
  font-family:var(--serif); font-size:10.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--paper-soft)}
.r-prof dt::after{content:""; flex:1; min-width:12px; translate:0 -.2em;
  border-bottom:1px dotted rgba(21,17,27,.32)}
.r-prof dd{margin:0; font-family:var(--min); font-size:clamp(14px,.5vw + 10.5px,17px);
  letter-spacing:.06em; line-height:1.4; white-space:nowrap}
.r-prof b{font-family:var(--serif); font-weight:400; font-size:1.6em; letter-spacing:.01em;
  font-variant-numeric:lining-nums; margin-right:.1em; line-height:1}

/* 上から順に出す。サインが書かれるのを待ってからプロフィール */
.js .r-hero__in > *{opacity:0; transform:translateY(-14px);
  transition:opacity 1.4s var(--ease), transform 1.6s var(--ease)}
.js .r-hero__in > .r-sign{transform:none}
.js .r-hero__in > :nth-child(1){transition-delay:.2s}
.js .r-hero__in > :nth-child(2){transition-delay:.4s}
.js .r-hero__in > :nth-child(3){transition-delay:2s}
.js .r-hero__in > :nth-child(4){transition-delay:2.4s}
.js .is-lit .r-hero__in > *{opacity:1; transform:none}

/* 下へ。細い線が上から落ちる */
.r-cue{position:absolute; z-index:2; left:50%; bottom:0; width:1px; height:clamp(40px,8vh,80px);
  background:linear-gradient(180deg, transparent, var(--paper-ink)); opacity:.3; overflow:hidden}
.r-cue::after{content:''; position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:var(--c1); animation:cue 2.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{to{top:100%}}

/* ══ 物語（縦書き） ═════════════════════════════════
   JS があるとき（.r-on）は、画面に貼りついた舞台の上で帯を右から左へ送る。
   無いときは、横に流して読める縦書きの帯として置く */
.r-story{position:relative}
.r-stage{position:relative; overflow-x:auto; padding-block:var(--sec)}
.r-on .r-stage{position:sticky; top:0; height:100svh; overflow:hidden; padding:0}
.r-track{writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl;
  font-family:var(--min); font-weight:400;
  font-size:clamp(13px, 1.9svh, 20px); line-height:2.3; letter-spacing:.1em;
  inline-size:min(78svh, 34em); margin-inline:auto;
  font-feature-settings:"vpal" 0;
  line-break:strict;
  color:var(--paper-ink);
  /* 羽が文字の上を流れるので、字のまわりに紙をにじませる */
  text-shadow:0 0 10px var(--paper), 0 0 26px var(--paper)}
.r-on .r-track{position:absolute; top:50%; translate:0 -50%; margin:0; will-change:transform}
.r-st{margin:0 0 0 0; margin-block-end:2.6em}
.r-st--last{margin-block-end:0}
.ln{display:block; opacity:calc(.1 + .9 * var(--o,1)); transition:opacity .35s linear}
/* 歌詞のまとまり（1番・サビ前など）の切れ目。縦書きなので右側（行の頭の側）に間を空ける */
.ln--brk{margin-block-start:.7em}
/* 縦中横。数字とローマ数字を1字ぶんに収める */
.tcy{text-combine-upright:all; -webkit-text-combine:horizontal}
/* 段の番号。行と同じく読む位置で濃くなる */
.r-no{display:block; margin-block-end:1.4em; font-family:var(--serif); font-size:.82em;
  letter-spacing:0; color:#C2185B; text-shadow:none; opacity:calc(.25 + .75 * var(--o,1))}
/* 結びの一行だけ、差し色で灯す */
.ln--end{color:#C2185B;
  text-shadow:0 0 10px var(--paper), 0 0 26px rgba(255,46,136,.28)}

/* 進み具合。読む向き（右から左）に満ちる */
.r-meter{display:none}
.r-on .r-meter{display:block; position:absolute; left:var(--pad); right:var(--pad);
  bottom:clamp(26px,6svh,64px); height:1px;
  background:var(--paper-rule)}
.r-meter i{position:absolute; inset:0; background:#C2185B; transform-origin:100% 50%;
  transform:scaleX(0)}

/* ══ 結び ══════════════════════════════════════════ */
.r-end{position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:var(--paper-ink);
  padding:var(--sec) var(--pad) clamp(40px,6vh,72px)}
.r-end__sign{width:min(64vw,700px); height:auto; margin:0 auto;
  filter:drop-shadow(0 0 22px rgba(255,46,136,.22));
  animation:r-breath 5.4s ease-in-out infinite}
/* トップの光と同じ拍。二拍打って、あとは間 */
@keyframes r-breath{
  0%,40%,100%{opacity:.82}
  7%{opacity:1}
  16%{opacity:.86}
  24%{opacity:.96}}
.r-end__yomi{margin:clamp(10px,2vh,20px) 0 0; font-family:var(--min); font-weight:600;
  font-size:clamp(16px,.6vw + 12px,20px); letter-spacing:.6em; padding-left:.6em}
.r-end__ev{margin:clamp(24px,5vh,56px) 0 0; font-family:var(--serif);
  font-size:clamp(13px,.6vw + 10px,16px); letter-spacing:.34em}
.r-end__ev span{display:block; margin-top:.9em; font-family:var(--min); letter-spacing:.3em;
  font-size:1.18em; color:#C2185B}
.r-end__meta{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.4em 1.2em;
  margin:1.3em 0 0; font-family:var(--serif); font-size:clamp(12px,.4vw + 10px,14px);
  letter-spacing:.24em; color:var(--paper-soft); font-variant-numeric:lining-nums}
.r-end__meta i{width:24px; height:1px; background:var(--paper-rule)}
/* ボタンとコピーはトップの闇の側の色で組んである。紙の上の色に置き換える */
body.rui .btn:not([data-buy]){color:var(--paper-ink); border-color:rgba(21,17,27,.4)}
body.rui .btn:not([data-buy]):hover{color:#C2185B; border-color:#C2185B; background:rgba(194,24,91,.06)}
body.rui .copy{color:var(--paper-soft)}
body.rui .copy > span:first-child{color:var(--paper-ink)}
.r-end__cta{display:flex; flex-wrap:wrap; justify-content:center; gap:0 clamp(12px,2vw,24px);
  margin-top:clamp(16px,3vh,32px)}
/* 戻るほうは線の矢印を左に。押すと左へ進む */
.r-end__back{flex-direction:row-reverse}
.r-end__back::after{width:22px}
.r-end .copy{margin-top:clamp(56px,10vh,110px)}
.js .r-end > *{opacity:0; transform:translateY(-16px);
  transition:opacity 1.3s var(--ease), transform 1.5s var(--ease)}
.js .r-end > :nth-child(2){transition-delay:.25s}
.js .r-end > :nth-child(3){transition-delay:.4s}
.js .r-end > :nth-child(4){transition-delay:.55s}
.js .r-end > :nth-child(5){transition-delay:.7s}
.js .r-end > :nth-child(6){transition-delay:.85s}
.js .r-end.is-in > *{opacity:1; transform:none}

/* ══ 狭い画面 ═══════════════════════════════════════ */
@media (max-width:760px){
  .r-back__en{display:none}
  .r-back__ja{padding-left:0; border-left:0}
  /* 立ち絵は全身を画面幅いっぱいに。名乗りはそのすぐ下（重ねると小見出しが靴に埋もれる） */
  .r-fig{position:relative; top:auto; right:auto; width:100%; height:auto; margin-top:clamp(52px,8svh,72px)}
  .r-hero__in{min-height:0; padding-top:0; margin-top:-1vw;
    text-shadow:0 0 6px var(--paper), 0 0 16px var(--paper), 0 0 34px var(--paper)}
  .r-sign{width:min(86vw,520px); margin-left:-2vw}
  .r-prof{max-width:none; column-gap:18px}
  .r-prof dt{letter-spacing:.18em; font-size:9.5px; gap:.5em}
  .r-prof dd{font-size:13.5px; letter-spacing:.03em}
  .r-track{font-size:clamp(13px, 1.9svh, 16px); line-height:2.15; inline-size:min(72svh, 34em)}
  .r-end__cta .btn{width:min(100%,320px); justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .js .r-fig img,.js .r-sign img{opacity:1; scale:1; -webkit-mask-image:none; mask-image:none}
  .js .r-hero__in > *,.js .r-end > *{opacity:1 !important; transform:none !important}
  .ln{transition:none}
  .r-cue::after{display:none}
}


/* ══ 底上げ（2026-10-02）══════════════════════════════
   筋は「堕天使の欠けた輪」と「署名」。紙肌・輪・奥行き・筆先のカーソルを足す */

/* 紙肌。単色の紙に、支給の水墨の紙目を overlay で重ねる。文字にも掛かる（刷った紙に見える） */
.r-grain{position:fixed; inset:0; z-index:4; pointer-events:none;
  background:url(../img/paper-grain.webp) 0 0 / 512px 512px repeat;
  mix-blend-mode:overlay; opacity:.55}

/* ── 欠けた輪 ──
   三重の細い輪。外は一部が欠けた線、中は細かい目盛り、内は桃色の短い弧。
   読み込みで線が引かれ、ゆっくり回る。絵の白いところから透けて見える（img の乗算の相手） */
.r-halo{position:absolute; left:58%; top:31%; width:112%; aspect-ratio:1; overflow:visible;
  pointer-events:none;
  translate:calc(-50% + var(--mx,0) * 22px) calc(-50% + var(--my,0) * 16px + var(--hs,0) * 6svh)}
.r-halo circle{fill:none; vector-effect:non-scaling-stroke}
.r-halo__g{transform-box:view-box; transform-origin:50% 50%; animation:r-halo 140s linear infinite}
.r-halo__a{stroke:var(--paper-ink); stroke-opacity:.42; stroke-width:1;
  stroke-dasharray:0 1000; stroke-dashoffset:-60}
.r-halo__b{stroke:var(--paper-ink); stroke-opacity:.26; stroke-width:7;
  stroke-dasharray:.6 7.4; opacity:0}
.r-halo__c{stroke:#C2185B; stroke-opacity:.8; stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:0 1000; stroke-dashoffset:-410}
.js .r-halo__a{transition:stroke-dasharray 3.2s cubic-bezier(.6,.05,.2,1) .4s}
.js .r-halo__b{transition:opacity 2.4s var(--ease) 1.4s}
.js .r-halo__c{transition:stroke-dasharray 2.6s cubic-bezier(.6,.05,.2,1) 1.6s}
.is-lit .r-halo__a{stroke-dasharray:820 180}
.is-lit .r-halo__b{opacity:1}
.is-lit .r-halo__c{stroke-dasharray:70 930}
@keyframes r-halo{to{transform:rotate(360deg)}}

/* 結びでは輪が閉じる。欠けていたところまで線が回り込み、桃色の弧が一周ぶん伸びる */
.r-end__mark{position:relative; display:grid; place-items:center; width:100%}
.r-halo--end{left:50%; top:50%; width:min(76vw,600px); translate:-50% -50%}
.r-halo--end .r-halo__a{stroke-dasharray:820 180}
.r-halo--end .r-halo__b{opacity:1}
.r-halo--end .r-halo__c{stroke-dasharray:70 930}
.js .r-end .r-halo__a{transition:stroke-dasharray 3.6s cubic-bezier(.6,.05,.2,1) .6s}
.js .r-end .r-halo__c{transition:stroke-dasharray 4.2s cubic-bezier(.6,.05,.2,1) .9s}
.r-end.is-in .r-halo__a{stroke-dasharray:1000 0}
.r-end.is-in .r-halo__c{stroke-dasharray:1000 0; stroke-opacity:.5}
.r-end__sign{position:relative}

/* ── 物語：背後の段番号と、読む位置の目印 ── */
.r-bgno{display:none}
.r-on .r-bgno{display:block; position:absolute; inset:0; pointer-events:none}
.r-bgno span{position:absolute; left:var(--pad); bottom:clamp(40px,9svh,110px);
  font-family:var(--min); font-weight:600; font-size:min(50svh,40vw); line-height:1;
  color:rgba(21,17,27,.045);
  /* ローマ数字（I〜IV）は大きくすると縦棒が灰色の帯に見え、数字として読めなかった。
     第壱章と同じ漢数字の、塗りのごく薄い影にする */
  opacity:0; translate:0 6%; transition:opacity 1.1s var(--ease), translate 1.4s var(--ease)}
.r-bgno span.is-on{opacity:1; translate:0 0}
.r-guide{display:none}
.r-on .r-guide{display:block; position:absolute; left:50%; top:clamp(14px,3.5svh,40px);
  width:1px; height:clamp(18px,4.5svh,44px); background:#C2185B; opacity:.75}
.r-on .r-guide::after{content:""; position:absolute; left:50%; bottom:-7px; width:5px; height:5px;
  translate:-50% 0; border-radius:50%; background:#C2185B}
.r-count{position:absolute; left:0; bottom:calc(100% + 12px); font-family:var(--serif); font-weight:400;
  font-size:11px; letter-spacing:.3em; color:var(--paper-soft); white-space:nowrap}
.r-count span{color:#C2185B}

/* ── 筆先のカーソル（マウスのときだけ）──
   桃色の点は指先に、細い輪は少し遅れてついてくる。押せるものに乗ると輪が開く */
.r-cursor{display:none}
.r-cur .r-cursor{display:block; position:fixed; left:0; top:0; z-index:60; pointer-events:none}
.r-cursor b,.r-cursor i{position:fixed; left:0; top:0; border-radius:50%; pointer-events:none;
  will-change:transform}
.r-cursor b{width:6px; height:6px; margin:-3px 0 0 -3px; background:#C2185B}
.r-cursor i{width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(21,17,27,.38);
  transition:width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease),
    border-color .45s var(--ease), background-color .45s var(--ease), opacity .3s}
.r-cursor.is-link i{width:66px; height:66px; margin:-33px 0 0 -33px; border-color:#C2185B;
  background:rgba(194,24,91,.06)}
.r-cursor.is-out b,.r-cursor.is-out i{opacity:0}
.r-cur, .r-cur a, .r-cur button{cursor:none}

@media (max-width:760px){
  .r-fig .r-halo{left:58%; top:24%; width:104%}
  .r-bgno span{font-size:min(36svh,62vw); bottom:clamp(60px,12svh,120px)}
}
@media (prefers-reduced-motion:reduce){
  .r-halo__g{animation:none}
  .js .r-halo__a,.js .r-halo__c{transition:none}
  .r-halo__a{stroke-dasharray:820 180}
  .r-halo__b{opacity:1}
  .r-halo__c{stroke-dasharray:70 930}
}

/* ── トップのサインから飛んできたとき ──
   遷移の写しは新しいページの最初の絵で撮られる。サインがまだ書かれていない（マスクで隠れている）と、
   伸びてきたサインが着地先で消える。遷移で来たときだけ、サインを最初から書き終えた状態で出す */
.r-sign img{view-transition-name:rui-sign}
.js.r-vt .r-hero__in > .r-sign{opacity:1; transition:none}
.js.r-vt .r-sign img{-webkit-mask-image:none; mask-image:none; transition:none}
/* 公式アカウント。Rui のページは紙の地なので墨で */
body.rui .sns{margin-top:clamp(40px,7vh,72px)}
body.rui .sns a{color:var(--paper-soft); border-color:var(--paper-rule)}
body.rui .sns a:hover{color:var(--paper-ink); border-color:#C2185B; background:rgba(194,24,91,.06)}
body.rui .sns + .copy{margin-top:clamp(18px,3vh,28px)}