:root{
  --ink:#0b0c0b;
  --paper:#e9e6db;
  --paper-deep:#d6d1c2;
  --ash:#9f9d94;
  --rust:#d54d2d;
  --red:#e33325;
  --amber:#f2a43a;
  --line:#e9e6db38;
  --ink-soft:#3a3934;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}
.shell{width:min(1240px,100% - 64px);margin-inline:auto}
.site-header{
  border-bottom:1px solid var(--line);
  justify-content:space-between;align-items:center;
  height:88px;display:flex;
}
.brand{align-items:center;gap:12px;display:flex}
.brand-mark{
  border:1px solid #e9e6db9e;place-items:center;
  width:42px;height:42px;
  font-family:Songti SC,SimSun,serif;font-size:21px;font-weight:700;
  display:grid;transform:rotate(-2deg);
}
.brand>span:last-child{flex-direction:column;gap:2px;display:flex}
.brand strong{letter-spacing:.18em;font-size:15px}
.brand small{color:var(--ash);letter-spacing:.23em;font-size:8px}
.site-header nav{color:#e9e6dbbd;letter-spacing:.08em;gap:28px;font-size:12px;display:flex}
.site-header nav a,.header-link{transition:color .18s}
.site-header nav a:hover,.header-link:hover{color:var(--amber)}
.site-header nav a[aria-current="page"]{color:var(--amber)}
.header-link{font-family:ui-monospace,Consolas,monospace;letter-spacing:.08em;font-size:11px}
.eyebrow{
  color:var(--amber);font-family:ui-monospace,Consolas,monospace;
  letter-spacing:.18em;align-items:center;gap:18px;margin:0 0 22px;
  font-size:10px;font-weight:700;display:flex;
}
.eyebrow span{color:#e9e6db99;border-left:1px solid #e9e6db4d;padding-left:18px}
.eyebrow.ink{color:var(--rust)}
.eyebrow.ink span{color:#5e5d57;border-left-color:#a8a59b}

/* —— catalog —— */
.novel-hero{
  isolation:isolate;position:relative;overflow:hidden;
  padding:72px 0 96px;
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%,#d54d2d22,transparent 55%),
    linear-gradient(180deg,#080908,#0b0c0b);
}
.novel-hero:after{
  content:"";pointer-events:none;opacity:.14;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  position:absolute;inset:0;
}
.novel-hero-inner{position:relative;z-index:1;max-width:720px}
.novel-hero h1{
  margin:0;color:#f2efe5;
  font-family:Songti SC,STSong,SimSun,serif;
  font-size:clamp(56px,8vw,96px);font-weight:900;letter-spacing:-.06em;line-height:.95;
}
.novel-hero h1 span{
  display:block;margin-top:.12em;
  color:transparent;-webkit-text-stroke:1px #f2efe580;
  font-size:.42em;letter-spacing:.2em;font-weight:700;
}
.novel-lead{
  color:#e9e6dbb3;max-width:560px;margin:28px 0 0;
  font-size:15px;line-height:1.9;
}
.novel-meta{
  margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;
}
.pill{
  font-family:ui-monospace,Consolas,monospace;
  letter-spacing:.12em;font-size:9px;
  border:1px solid #e9e6db3d;color:#e9e6dbad;
  padding:8px 12px;
}
.pill.live{border-color:#f2a43a7a;color:var(--amber)}
.cta-row{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.button{
  letter-spacing:.08em;border:1px solid transparent;
  justify-content:center;align-items:center;gap:12px;
  min-height:48px;padding:0 20px;font-size:12px;font-weight:700;
  transition:transform .18s,background .18s,border .18s;display:inline-flex;
}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--red);color:#fff}
.button-ghost{border-color:#e9e6db5c;color:var(--paper)}
.button-ghost:hover{border-color:var(--paper);background:#e9e6db14}
.button-ink{background:var(--ink);color:var(--paper)}
.button-ink:hover{background:#1a1b19}
.button-outline-ink{border-color:#0b0c0b55;color:var(--ink)}
.button-outline-ink:hover{border-color:var(--ink);background:#0b0c0b0a}

.toc-section{background:var(--paper);color:var(--ink);padding:88px 0 120px}
.toc-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px}
.toc-head h2{
  margin:0;font-family:Songti SC,STSong,SimSun,serif;
  font-size:clamp(36px,5vw,56px);font-weight:900;letter-spacing:-.04em;line-height:1;
}
.toc-head p{margin:0;color:#5e5d57;font-size:13px;line-height:1.7;max-width:280px;text-align:right}
.chapter-list{border-top:1px solid #a8a59b;list-style:none;margin:0;padding:0}
.chapter-list li{border-bottom:1px solid #a8a59b}
.chapter-list a{
  display:grid;grid-template-columns:72px 1fr;gap:20px;
  padding:26px 8px;align-items:start;
  transition:background .18s,transform .18s;
}
.chapter-list a:hover{background:#0b0c0b08;transform:translateX(4px)}
.ch-num{
  font-family:ui-monospace,Consolas,monospace;
  letter-spacing:.14em;font-size:11px;color:var(--rust);padding-top:6px;
}
.ch-title{
  margin:0;font-family:Songti SC,STSong,SimSun,serif;
  font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:.04em;
}
.ch-excerpt{margin:10px 0 0;color:#6c6a63;font-size:13px;line-height:1.75;max-width:640px}
.toc-foot{
  margin-top:48px;padding-top:28px;border-top:1px dashed #a8a59b;
  color:#79776f;font-size:12px;letter-spacing:.06em;
}

/* —— bgm —— */
.bgm-toggle{
  position:fixed;z-index:80;right:18px;bottom:18px;
  width:46px;height:46px;border-radius:50%;
  border:1px solid #e9e6db55;background:#080908e6;color:var(--paper);
  box-shadow:0 12px 40px #00000073;
  display:grid;place-items:center;cursor:pointer;
  transition:transform .18s,border-color .18s,background .18s,color .18s;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.bgm-toggle:hover{transform:translateY(-2px);border-color:var(--amber);color:var(--amber)}
.bgm-toggle svg{width:18px;height:18px;display:block}
.bgm-toggle[aria-pressed="true"]{border-color:#e9e6db33;color:#e9e6db66}
.bgm-toggle .icon-muted{display:none}
.bgm-toggle[aria-pressed="true"] .icon-on{display:none}
.bgm-toggle[aria-pressed="true"] .icon-muted{display:block}
body.reader .bgm-toggle{
  border-color:#0b0c0b33;background:#e9e6dbe8;color:var(--ink);
  box-shadow:0 12px 36px #0b0c0b33;
}
body.reader .bgm-toggle:hover{border-color:var(--rust);color:var(--rust)}
body.reader .bgm-toggle[aria-pressed="true"]{color:#0b0c0b66;border-color:#0b0c0b22}

footer{color:#e9e6dba8;background:#080908;border-top:1px solid #e9e6db1f;padding:36px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-inner p{margin:0;font-size:11px}
.footer-inner>a{letter-spacing:.1em;font-size:10px;transition:color .18s}
.footer-inner>a:hover{color:var(--amber)}

/* —— reader —— */
body.reader{background:var(--paper);color:var(--ink)}
.reader-top{
  background:var(--ink);color:var(--paper);
  border-bottom:1px solid var(--line);
}
.reader-top .site-header{height:72px}
.reader-progress{
  height:2px;background:#e9e6db18;width:100%;
}
.reader-progress>span{
  display:block;height:100%;width:0;background:var(--red);
  transition:width .1s linear;
}
.reader-wrap{padding:56px 0 40px}
.reader-shell{width:min(720px,100% - 48px);margin-inline:auto}
.reader-kicker{
  font-family:ui-monospace,Consolas,monospace;
  letter-spacing:.16em;font-size:10px;color:var(--rust);margin:0 0 18px;
}
.reader-title{
  margin:0;font-family:Songti SC,STSong,SimSun,serif;
  font-size:clamp(36px,6vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1.15;
}
.reader-sub{
  margin:18px 0 0;color:#6c6a63;font-size:13px;letter-spacing:.04em;
}
.article{
  margin-top:48px;
  font-size:17px;line-height:2;color:var(--ink-soft);
  font-family:"Noto Serif SC","Source Han Serif SC",Songti SC,STSong,SimSun,serif;
}
.article p{margin:0 0 1.35em}
.article p:first-of-type::first-letter{
  font-size:2.4em;float:left;line-height:.85;
  margin:0.08em 0.08em 0 0;color:var(--ink);
  font-weight:900;
}
.reader-nav{
  margin:64px 0 0;padding-top:28px;border-top:1px solid #a8a59b;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.reader-nav a,.reader-nav span{
  color:var(--ink);
  font-size:13px;font-weight:700;letter-spacing:.08em;min-height:44px;
  display:inline-flex;align-items:center;gap:8px;
  transition:color .18s;
}
.reader-nav a:hover{color:var(--rust)}
.reader-nav .disabled{color:#a8a59b;font-weight:500;cursor:default}
.reader-nav .next{margin-left:auto;text-align:right}
.reader-end{
  margin-top:20px;padding:18px 20px;
  background:#0b0c0b08;border-left:2px solid var(--red);
  font-size:13px;line-height:1.7;color:#5e5d57;
}

@media (width<=980px){
  .shell{width:min(100% - 40px,760px)}
  .site-header nav{display:none}
  .toc-head{flex-direction:column;align-items:flex-start}
  .toc-head p{text-align:left;max-width:none}
  .chapter-list a{grid-template-columns:56px 1fr;gap:12px;padding:22px 4px}
}
@media (width<=640px){
  .shell,.reader-shell{width:calc(100% - 32px)}
  .site-header{height:72px}
  .brand-mark{width:36px;height:36px;font-size:18px}
  .brand small{display:none}
  .article{font-size:16px;line-height:1.95}
  .article p:first-of-type::first-letter{font-size:2.1em}
  .cta-row .button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
