/* Error Bouquet — 作品のパレットをそのまま意匠に使う。
   物語は「完璧に動くが空っぽな世界」から始まり、人の手触りへ着地する。
   サイトも上（表紙）は寒色で静かに、読み進めると余白が広がる設計にする。 */
:root{
  --pale:#C8D4DC;      /* ペールブルー天井 */
  --sage:#A8B0A0;      /* セージグリーン壁 */
  --cyan:#7BA8B8;      /* AI の光 */
  --indigo:#4A5468;    /* 夜の藍 */
  --paper:#F8F4ED;     /* ユリの白＝地の色 */
  --dust:#EDE8DC;      /* かすみ草 */
  --rose:#A87B73;      /* 退色したバラ＝最重要モチーフ */
  --ink:#26303A;
  --ink-soft:#5B6874;
  --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(--paper); 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:linear-gradient(178deg,var(--pale) 0%,#DDE4E8 42%,var(--paper) 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.14;
  font-size:clamp(44px,11vw,86px); letter-spacing:.03em;
}
.title .en{
  display:block; font-size:clamp(11px,2.6vw,14px); letter-spacing:.34em;
  color:var(--ink-soft); margin-top:22px; 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)}
.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(--paper)}
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.3em; color:var(--ink-soft); opacity:.75;
}

/* ---------- 話の一覧 ---------- */
.episodes{max-width:660px; margin:0 auto; padding:14vh 24px 16vh}
.section-label{
  font-size:10px; letter-spacing:.4em; color:var(--ink-soft);
  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(38,48,58,.13);
  transition:padding-left .4s cubic-bezier(.2,.7,.3,1);
}
.ep:last-of-type{border-bottom:1px solid rgba(38,48,58,.13)}
.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(21px,5.2vw,27px); letter-spacing:.1em}
.ep-arrow{margin-left:auto; color:var(--ink-soft); font-size:13px}

/* ---------- 奥付 ---------- */
.colophon{
  border-top:1px solid rgba(38,48,58,.13);
  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(--ink-soft);
}
.colophon p{margin:0 0 14px; max-width:34em}
.colophon .note{
  margin-top:26px; padding:16px 18px; background:var(--dust);
  border-left:2px solid var(--rose); font-size:11.5px; line-height:2;
}

/* ---------- 読む画面 ---------- */
body.reading{background:var(--indigo)}
.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(248,244,237,.93);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(38,48,58,.1);
  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(--paper);
  border-top:1px solid rgba(38,48,58,.1);
}
.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(--paper)}
.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}}