@charset "UTF-8";
:root { color-scheme:dark; --bg:#0b1016; --surface:#131c22; --raised:#202b30; --ink:#f3f4f6; --muted:#b0bcc0; --line:#344447; --accent:#ff8969; --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK SC","Microsoft YaHei",sans-serif; font-family:var(--sans); background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; }
body { position:relative; isolation:isolate; min-height:100vh; margin:0; font-size:15px; line-height:1.8; background:radial-gradient(ellipse 60% 800px at 0 65%,#20343745,transparent); }
body::before { content:""; position:absolute; inset:0 0 auto; height:1050px; z-index:-2; pointer-events:none; background:linear-gradient(0deg,#0b1016,transparent 60%),linear-gradient(90deg,#0b1016ed 10%,#0b101680 55%,#0b101612),url("./assets/archive-night.webp") center top / max(1500px,100vw) auto no-repeat; }
body::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.5'/%3E%3C/svg%3E"); }

a { color:inherit; text-underline-offset:5px; }
a:focus-visible { outline:3px solid #ffad86; outline-offset:5px; }
.skip { position:absolute; left:20px; top:-100px; padding:10px 20px; color:#121318; background:#ffad86; z-index:10; }
.skip:focus { top:10px; }
.fiction-shell { max-width:1250px; margin:auto; padding:0 56px; }
.fiction-header { position:relative; min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #ffffff0e; }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; font-weight:700; font-size:15px; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; background:linear-gradient(135deg,#ff8452,#eb5369); color:#180e10; border-radius:10px; font:bold 27px/1 Georgia,serif; box-shadow:0 0 22px #f5684233; }
.brand small { display:block; font:8px/1.8 ui-monospace,monospace; letter-spacing:.09em; color:var(--muted); margin-top:3px; }
.fiction-header nav { display:flex; gap:12px; }
.fiction-header nav a { font-size:12px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; color:#cbd4d8; background:#101b22b8; border-radius:7px; }
.fiction-header nav a:hover,.fiction-header nav a[aria-current] { color:var(--ink); background:#1b1f27; }
h1,h2 { letter-spacing:-.035em; line-height:1.35; }
h1 { font-size:clamp(30px,3.6vw,44px); margin:8px 0 16px; }
h2 { margin:0 0 14px; font-size:26px; }
p { margin:0 0 16px; }
.eyebrow { font-size:12px; letter-spacing:.06em; color:var(--accent); margin:0 0 10px; }
.lead { font-size:15px; line-height:1.95; color:var(--muted); margin:0; max-width:680px; }
.original-title { color:#929baa; font:11px/1.7 ui-monospace,monospace; letter-spacing:.1em; margin:0 0 22px; }
.shelf-heading { position:relative; min-height:224px; display:flex; justify-content:space-between; align-items:center; gap:32px; padding:38px 0 34px; }
.shelf-heading .eyebrow { color:var(--muted); font-size:11px; }
.shelf-heading h1 { font-size:clamp(30px,3.4vw,42px); }
.shelf-count { position:relative; display:flex; align-items:center; gap:6px; color:#c4c8d0; white-space:nowrap; padding:3px 12px; margin:0 0 3px; background:#152126cc; border:1px solid #8d765452; border-radius:999px; font-size:11px; }
.shelf-count strong { font-weight:500; }
.story-grid { display:grid; gap:20px; }
.story-card { position:relative; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .2s,background .2s; }
.story-card:hover { border-color:#ae8756; background:#17242a; }
.story-card:focus-within { outline:3px solid #ffad86; outline-offset:4px; }
.story-link:focus-visible { outline:none; }
.story-link { display:grid; grid-template-columns:260px minmax(0,1fr); align-items:center; gap:36px; padding:30px; text-decoration:none; }
.featured-story { background:linear-gradient(110deg,#1d333ae8,#172125ed 60%,#30271ff2); border-color:#65747166; box-shadow:0 24px 65px #0004; }
.featured-story::before,.classic-story::before { content:""; position:absolute; inset:10px; pointer-events:none; border:1px solid #b8965a28; border-radius:5px; }
.story-card .eyebrow::before { content:"✧"; color:#dbad6d; margin-right:9px; }

.book-stage { position:relative; min-width:0; border-left:5px solid #365059; transform:perspective(700px) rotateY(-5deg) rotateZ(-1deg); transition:transform .3s ease; border-radius:12px; overflow:hidden; box-shadow:0 10px 40px #0005; }
.book-stage::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:8px; box-shadow:inset 6px 0 12px #0008,inset -3px 0 0 #dcc59444; }
.story-link:hover .book-stage,.story-link:focus-visible .book-stage { transform:perspective(700px) rotateY(0) rotateZ(0); }
.story-cover { display:block; width:100%; aspect-ratio:2/3; height:auto; object-fit:cover; border-radius:12px; background:#20272b; }
.story-copy { position:relative; min-width:0; padding:8px 0; }
.story-copy h2 { font-size:38px; margin:10px 0 10px; }
.story-summary { color:#bdc3cd; font-size:15px; line-height:1.95; max-width:650px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; margin:20px 0 26px; }
.tags li { border:1px solid #323640; padding:2px 10px; color:#c1c6d0; font-size:11px; border-radius:999px; background:#1a1e26; }
.story-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:20px; color:var(--muted); font-size:12px; }
.text-link { color:var(--accent); font-size:13px; }
.story-bottom .text-link { display:inline-flex; align-items:center; gap:28px; border-radius:9px; background:linear-gradient(115deg,#ff865c,#f36576); color:#211011; padding:11px 20px; font-size:14px; font-weight:700; box-shadow:0 5px 24px #ed614325; order:-1; }
.story-link:hover .text-link { filter:brightness(1.1); }
.shelf-subheading { padding-top:18px; display:flex; align-items:baseline; gap:22px; }
.shelf-subheading::after { content:""; flex:1; align-self:center; height:1px; background:linear-gradient(90deg,#b38d5355,transparent); }
.shelf-subheading h2 { font-size:20px; margin:0 0 4px; }
.shelf-subheading p { font-size:13px; color:var(--muted); margin:0; }
.classic-story { background:linear-gradient(110deg,#17282d,#172022); }
.classic-story .book-stage { border-left-color:#75644a; }
.classic-story .story-link { grid-template-columns:160px minmax(0,1fr); gap:28px; padding:22px; }
.classic-story .story-copy h2 { font-size:27px; margin-top:0; }
.classic-story .original-title { font-size:9px; margin-bottom:12px; }
.classic-story .story-summary { font-size:14px; }
.classic-story .tags { margin:12px 0 18px; }
.classic-story .story-bottom .text-link { background:#20252e; color:#f1f2f5; border:1px solid #3d444f; box-shadow:none; padding:8px 16px; font-size:12px; }
.shelf-note { display:grid; grid-template-columns:1fr 1.8fr; gap:36px; padding:30px 0 34px; margin-top:35px; border-top:1px solid var(--line); }
.shelf-note h2 { font-size:18px; }
.shelf-note p { font-size:13px; color:var(--muted); margin:0; }
.fiction-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; border-top:1px solid #ffffff12; padding:22px 0 30px; font-size:11px; color:var(--muted); }
.fiction-footer p { margin:0; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:16px; padding:26px 0 22px; font-size:12px; color:var(--muted); }
.breadcrumb a { text-decoration:none; }
.breadcrumb span::before { content:"/"; padding-right:16px; color:#676d79; }
.detail-hero { display:grid; grid-template-columns:300px minmax(0,1fr); gap:42px; align-items:start; padding:0 0 36px; }
.detail-art { position:relative; min-width:0; padding:10px; background:linear-gradient(135deg,#7b684c,#1f3036 45%,#4b4938); border:1px solid #9c805155; border-radius:12px; box-shadow:0 25px 65px #0006; }
.detail-art::after { content:"✧"; position:absolute; top:-17px; left:calc(50% - 16px); width:32px; text-align:center; color:#dcaf70; font-size:25px; background:#131f23; }

.detail-art .story-cover { border:1px solid var(--line); box-shadow:0 14px 50px #0004; }
.detail-copy { position:relative; isolation:isolate; min-width:0; padding-top:6px; }
.detail-copy::before { content:""; position:absolute; z-index:-1; inset:-12px -18px -18px; border-radius:12px; pointer-events:none; background:linear-gradient(90deg,#0b1016e8,#0b1016a8); }
.detail-copy h1 { margin:8px 0 12px; }
.story-tagline { font-size:17px; color:#e0e2e8; margin-bottom:12px; }
.detail-copy .lead { font-size:15px; }
.detail-copy .tags { margin:18px 0 22px; }
.story-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:24px 0; }
.story-facts > div { padding:14px 15px; background:#162229dd; border:1px solid var(--line); border-radius:12px; }
.story-facts dt { font-size:11px; color:var(--muted); }
.story-facts dd { margin:6px 0 0; font-weight:600; font-size:15px; line-height:1.5; }
.entry-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.play-link { display:inline-flex; align-items:center; justify-content:center; min-height:48px; gap:10px; background:linear-gradient(115deg,#ff865c,#f36576); color:#211011; padding:10px 22px; border:1px solid #ff9a7366; border-radius:10px; text-decoration:none; font-size:15px; font-weight:750; box-shadow:0 7px 24px #f2644426; }
.play-link:hover { filter:brightness(1.1); }
.secondary-link { border:1px solid #353a44; border-radius:10px; text-decoration:none; font-size:13px; padding:12px 18px; }
.secondary-link:hover { background:var(--raised); }
.entry-note { font-size:11px; color:var(--muted); margin:14px 0 0; }
.detail-sections { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:0 0 40px; }
.detail-sections section { position:relative; padding:26px 28px; border:1px solid var(--line); border-radius:14px; background:#121c22e8; }
.detail-sections h2 { font-size:20px; }
.detail-sections p:not(.eyebrow) { color:#b9bfca; font-size:14px; line-height:1.95; }
.detail-sections p:last-child { margin-bottom:0; }
.detail-sections .opening { border-top:2px solid #a77d45; background:radial-gradient(ellipse at top left,#66442455,transparent),#152024; }
.detail-sections .opening p:not(.eyebrow) { color:#d3d6df; }
@media(min-width:1500px) { .fiction-shell { max-width:1330px; } .story-link { grid-template-columns:280px minmax(0,1fr); gap:44px; } }
@media(max-width:1000px) {
  .fiction-shell { padding:0 30px; }
  .story-link { grid-template-columns:220px minmax(0,1fr); padding:24px; gap:28px; }
  .story-copy h2 { font-size:32px; }
  .detail-hero { grid-template-columns:240px minmax(0,1fr); gap:28px; }
  .story-facts > div { padding:12px 10px; }
  .story-facts dd { font-size:13px; }
}
@media(max-width:700px) {
  body::before { height:820px; background-position:center,center,82% top; background-size:auto,auto,1050px auto; opacity:.8; }
  .shelf-heading { min-height:194px; }
  .shelf-subheading { display:block; }
  .book-stage { transform:none; }

  .fiction-shell { padding:0 20px; }
  .fiction-header { position:relative; min-height:76px; gap:10px; }
  .brand { gap:10px; font-size:13px; }
  .brand small { font-size:7px; letter-spacing:0; }
  .brand-mark { width:31px; height:31px; font-size:24px; }
  .fiction-header nav { gap:0; }
  .fiction-header nav a { padding:8px 4px; font-size:11px; }
  .fiction-header .shelf-nav { display:none; }
  .shelf-heading { padding:28px 0 24px; gap:12px; align-items:start; }
  .shelf-heading h1 { font-size:26px; }
  .shelf-heading .lead { font-size:13px; }
  .shelf-count { margin-top:6px; padding:2px 8px; font-size:10px; }
  .story-link { grid-template-columns:1fr; padding:18px; gap:18px; }
  .featured-story .book-stage { width:100%; }
  .featured-story .story-cover { aspect-ratio:1.3; height:auto; object-position:50% 53%; }
  .story-copy { padding:0 2px 4px; }
  .story-copy h2 { font-size:29px; }
  .original-title { font-size:9px; margin-bottom:16px; }
  .story-summary { font-size:14px; }
  .tags { margin:16px 0 22px; }
  .story-bottom { gap:14px; font-size:11px; }
  .story-bottom .text-link { padding:10px 16px; font-size:13px; }
  .classic-story .story-link { grid-template-columns:1fr; gap:18px; padding:18px; align-items:start; }
  .classic-story .story-cover { aspect-ratio:1.7; object-position:50% 50%; }
  .classic-story .story-copy h2 { font-size:23px; }
  .classic-story .eyebrow { font-size:10px; }
  .classic-story .original-title { font-size:8px; overflow-wrap:anywhere; }
  .classic-story .story-bottom .text-link { padding:8px 12px; gap:14px; }
  .shelf-note { grid-template-columns:1fr; gap:4px; padding:24px 0; margin-top:28px; }
  .shelf-note h2 { font-size:18px; }
  .breadcrumb { padding:22px 0; }
  .detail-hero { grid-template-columns:1fr; gap:26px; padding-bottom:28px; }
  .detail-art { width:100%; }
  .detail-art .story-cover { aspect-ratio:1.3; object-position:50% 53%; }
  .detail-copy h1 { font-size:34px; }
  .story-tagline { font-size:16px; }
  .story-facts { gap:8px; }
  .story-facts > div { padding:12px 8px; }
  .story-facts dd { font-size:12px; }
  .detail-sections { grid-template-columns:1fr; gap:16px; padding-bottom:28px; }
  .detail-sections section { padding:23px 20px; }
  .fiction-footer { font-size:10px; }
}
@media(max-width:360px) { .fiction-shell { padding:0 15px; } .shelf-heading h1 { font-size:24px; } .shelf-count { display:none; } .classic-story .story-link { padding:15px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }