/* 午後3時の終末論 — 作品のパレットをそのまま意匠に使う。
   世界が何度書き換えられても、ハイ・エルフの午後の茶は変わらない。
   表紙は羊皮紙と紅茶の琥珀で始め、読み進めると翠（エルフの魔力）が差す設計にする。 */
:root{
  --parch:#F6F0E2;     /* 羊皮紙＝地の色 */
  --parch-2:#EDE3CD;   /* 焼けた頁 */
  --amber:#B4762F;     /* 紅茶の琥珀 */
  --jade:#2F7D62;      /* 翡翠＝シルフィードの魔力 */
  --jade-pale:#8FBFA8;
  --navy:#26344F;      /* 緑紺の外衣 */
  --smoke:#5A5F63;     /* 改変後の世界の黒煙 */
  --ink:#241F1A;
  --ink-soft:#5E554A;
  --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(--parch); 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(--parch-2) 0%,#F2EADA 46%,var(--parch) 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.2;
  font-size:clamp(38px,9.5vw,74px); 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); border-bottom:1px solid var(--jade-pale)}
.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(--parch)}
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.3em; color:var(--ink-soft); opacity:.75;
  margin:0;
}

/* ---------- 目次 ---------- */
.episodes{max-width:660px; margin:0 auto; padding:14vh 24px 8vh}
.section-label{
  font-size:10px; letter-spacing:.4em; color:var(--ink-soft);
  text-transform:uppercase; margin:0 0 26px; padding-left:.4em;
}
.ep{
  display:flex; align-items:baseline; gap:18px; text-decoration:none;
  padding:22px 4px; border-top:1px solid rgba(36,31,26,.16);
  transition:padding-left .35s ease, background .35s ease;
}
.ep:last-of-type{border-bottom:1px solid rgba(36,31,26,.16)}
.ep:hover,.ep:focus-visible{padding-left:14px; background:rgba(143,191,168,.14)}
.ep-no{font-size:11px; letter-spacing:.24em; color:var(--amber); white-space:nowrap}
.ep-title{flex:1; font-size:clamp(17px,4.4vw,21px)}
.ep-arrow{color:var(--ink-soft)}

/* ---------- 奥付 ---------- */
.colophon{
  max-width:660px; margin:0 auto; padding:6vh 24px 14vh;
  color:var(--ink-soft); font-size:13px;
}
.colophon h2{
  font-size:10px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400; margin:0 0 18px; padding-left:.4em;
}
.colophon p{margin:0 0 6px}
.colophon .note{
  margin-top:26px; padding:16px 18px; border-left:2px solid var(--jade-pale);
  background:rgba(143,191,168,.12); font-size:12px; line-height:1.95;
}

/* ---------- 読みページ ---------- */
body.reading{background:#15120E}
.progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--jade-pale); z-index:20; transition:width .1s linear;
}
.reader{max-width:800px; margin:0 auto; background:#15120E}
.reader-head{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; background:rgba(21,18,14,.92); backdrop-filter:blur(6px);
  color:var(--parch); font-size:12px; letter-spacing:.14em;
  transition:transform .35s ease, opacity .35s ease;
}
.reader-head a{text-decoration:none; opacity:.85}
.reader-head a:hover{opacity:1}
body.hide-ui .reader-head{transform:translateY(-110%); opacity:0}
#strips img{width:100%; height:auto}
.ep-end{padding:64px 24px 96px; text-align:center; color:var(--parch)}
.ep-end .fin{margin:0 0 30px; font-size:13px; letter-spacing:.34em; opacity:.7}
.ep-end .next{
  display:inline-block; padding:14px 34px; border:1px solid rgba(246,240,226,.5);
  border-radius:999px; text-decoration:none; font-size:14px; letter-spacing:.14em;
}
.ep-end .next:hover{background:rgba(246,240,226,.1)}
.ep-end .back{display:block; margin-top:26px; font-size:12px; opacity:.6; text-decoration:none}