/* 君のいない更新通知 — 捜査の寒色（紺・灰・青緑）を地にして、
   SNS のパステルだけを差し色に置く。作品の対比をそのまま意匠にする。
   Error Bouquet のサイト（明るい紙の色が地）とは配色で見分けがつくようにしている。 */
:root{
  --night:#151C28;     /* 夜の紺＝地の色 */
  --deep:#1E2735;      /* 少し明るい紺 */
  --steel:#3B4759;     /* 灰青 */
  --cyan:#6FA9A5;      /* アイの声・モニターの光 */
  --pink:#D98BA3;      /* Rina_Life のパステル＝差し色 */
  --paper:#F2F0EA;     /* 紙面の白 */
  --ink:#E8E9EC;       /* 暗い地の上の文字 */
  --ink-soft:#9AA3B0;
  --ink-dark:#26303A;  /* 明るい面の上の文字 */
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--night); color:var(--ink);
  font-family:var(--serif); font-feature-settings:"palt" 1;
  line-height:1.9; letter-spacing:.04em;
}
a{color:inherit}
img{display:block; max-width:100%}

/* ---------- 表紙 ---------- */
.cover{
  min-height:100svh; display:grid; place-items:center; position:relative;
  padding:8vh 24px 12vh;
  background:radial-gradient(120% 80% at 50% 0%,#24303F 0%,var(--night) 58%,#0F141D 100%);
}
.cover-inner{max-width:660px; width:100%; text-align:center}
.eyebrow{
  font-size:11px; letter-spacing:.42em; color:var(--ink-soft);
  text-transform:uppercase; margin:0 0 34px; padding-left:.42em;
}
.title{
  margin:0; font-weight:400; line-height:1.3;
  font-size:clamp(34px,8.4vw,60px); letter-spacing:.06em;
}
.title .en{
  display:block; font-size:clamp(10px,2.4vw,13px); letter-spacing:.34em;
  color:var(--cyan); margin-top:24px; padding-left:.34em;
}
.lede{
  margin:44px auto 0; max-width:30em; text-align:left;
  font-size:clamp(14px,3.5vw,16px); color:var(--ink-soft); line-height:2.15;
}
.lede b{font-weight:400; color:var(--ink)}
.lede .sns{color:var(--pink)}
.enter{
  display:inline-block; margin-top:52px; padding:15px 46px;
  border:1px solid var(--ink); border-radius:999px;
  font-size:14px; letter-spacing:.2em; padding-left:calc(46px + .2em);
  text-decoration:none; background:transparent;
  transition:background .45s ease,color .45s ease;
}
.enter:hover,.enter:focus-visible{background:var(--ink); color:var(--night)}
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.3em; color:var(--ink-soft); opacity:.7;
}

/* ---------- 話の一覧 ---------- */
.episodes{max-width:660px; margin:0 auto; padding:14vh 24px 16vh}
.section-label{
  font-size:10px; letter-spacing:.4em; color:var(--cyan);
  margin:0 0 40px; padding-left:.4em;
}
.ep{
  display:flex; align-items:baseline; gap:22px;
  padding:26px 4px; text-decoration:none;
  border-top:1px solid rgba(232,233,236,.14);
  transition:padding-left .4s cubic-bezier(.2,.7,.3,1);
}
.ep:last-of-type{border-bottom:1px solid rgba(232,233,236,.14)}
.ep:hover,.ep:focus-visible{padding-left:14px}
.ep-no{
  font-size:11px; letter-spacing:.24em; color:var(--ink-soft);
  min-width:4.4em; flex-shrink:0;
}
.ep-title{font-size:clamp(20px,5vw,26px); letter-spacing:.1em}
.ep-arrow{margin-left:auto; color:var(--ink-soft); font-size:13px}

/* ---------- 奥付 ---------- */
.colophon{
  border-top:1px solid rgba(232,233,236,.14);
  max-width:660px; margin:0 auto; padding:56px 24px 96px;
  font-size:12px; line-height:2.1; color:var(--ink-soft);
}
.colophon h2{
  font-size:10px; letter-spacing:.4em; font-weight:400;
  margin:0 0 20px; padding-left:.4em; color:var(--cyan);
}
.colophon p{margin:0 0 14px; max-width:34em}
.colophon a{color:var(--ink)}
.colophon .note{
  margin-top:26px; padding:16px 18px; background:var(--deep);
  border-left:2px solid var(--pink); font-size:11.5px; line-height:2;
}

/* ---------- 読む画面 ---------- */
body.reading{background:#0F141D}
.reader{max-width:800px; margin:0 auto; background:var(--paper)}
.reader img{width:100%; height:auto}
.reader-head{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:11px 16px; background:rgba(21,28,40,.93); color:var(--ink);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(232,233,236,.12);
  transition:transform .35s ease;
}
body.hide-ui .reader-head{transform:translateY(-100%)}
.reader-head a{text-decoration:none; font-size:12px; letter-spacing:.16em; color:var(--ink-soft)}
.reader-head .now{font-size:13px; letter-spacing:.14em; margin-left:auto}
.progress{
  position:fixed; left:0; top:0; height:2px; z-index:30;
  background:var(--cyan); width:0; transition:width .12s linear;
}
.ep-end{
  padding:15vh 24px 18vh; text-align:center; background:var(--night);
  border-top:1px solid rgba(232,233,236,.12);
}
.ep-end .fin{font-size:11px; letter-spacing:.4em; color:var(--ink-soft); padding-left:.4em}
.ep-end .next{
  display:inline-block; margin-top:34px; padding:15px 40px;
  border:1px solid var(--ink); border-radius:999px;
  text-decoration:none; font-size:13.5px; letter-spacing:.18em;
  padding-left:calc(40px + .18em);
  transition:background .45s ease,color .45s ease;
}
.ep-end .next:hover{background:var(--ink); color:var(--night)}
.ep-end .back{display:block; margin-top:26px; font-size:12px; color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}