:root {
  --bg: #f7f3ec;
  --panel: rgba(255,255,255,0.86);
  --ink: #111827;
  --muted: #6b7280;
  --border: rgba(17,24,39,0.08);
  --shadow: 0 12px 32px rgba(15,23,42,0.08);
  --warm: #fff8ed;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.page-shell { max-width:1280px; margin:0 auto; padding:24px; }
.site-header { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; margin-bottom:24px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark { width:48px; height:48px; border-radius:18px; display:grid; place-items:center; background:#1f2937; color:#fff; font-weight:800; }
.brand-kicker { text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:#78716c; }
.brand-name { font-size:18px; font-weight:800; }
.site-nav { display:flex; gap:18px; justify-content:center; }
.site-nav a { padding:10px 14px; border-radius:999px; }
.site-nav a:hover { background:rgba(255,255,255,.6); }

.header-search { display:flex; gap:10px; }
.header-search input, .filter-bar input, .filter-bar select {
  height:44px; border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.75); padding:0 14px; font:inherit;
}
.header-search button, .filter-bar button, .button {
  height:44px; border:0; border-radius:14px; padding:0 16px; background:#111827; color:#fff;
  font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.button.secondary { background:#fff; color:var(--ink); border:1px solid var(--border); }
.button.small { height:36px; font-size:13px; padding:0 12px; }

.card { background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); backdrop-filter:blur(10px); }
.hero { display:grid; grid-template-columns:1.4fr .9fr; gap:22px; margin-bottom:26px; }
.hero-copy, .hero-panel, .page-top, .cover-panel, .detail-copy, .padded { border-radius:30px; padding:28px; }
.hero-panel.warm { background:linear-gradient(180deg, var(--warm), white); }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:#78716c; }
.hero-copy h1, .page-top h1, .detail-copy h1 { font-size:48px; line-height:1.03; margin:10px 0 12px; }
.hero-copy p, .body-copy, .page-top p { color:var(--muted); line-height:1.75; }
.chips, .meta-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.chip, .meta-pill { padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.95); border:1px solid var(--border); font-size:13px; font-weight:600; }

.section { margin:28px 0; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-head h2, .synopsis-block h3 { margin:0; font-size:30px; }
.book-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.book-card { border-radius:24px; overflow:hidden; }
.cover-shell { aspect-ratio:.78; background:linear-gradient(180deg,#f5efe5,#efe6d8); }
.cover-image, .cover-image-lg { width:100%; height:100%; object-fit:cover; }
.cover-image-lg { border-radius:22px; }
.cover-fallback, .cover-fallback.large { display:grid; place-items:center; width:100%; min-height:240px; font-size:56px; font-weight:800; color:#7c2d12; }
.cover-fallback.large { min-height:560px; }
.book-copy { padding:16px; }
.book-title { font-weight:700; line-height:1.4; }
.book-author, .list-author, .byline { color:var(--muted); margin-top:6px; }
.book-meta { display:flex; gap:12px; margin-top:10px; font-size:12px; color:#92400e; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.stack-list { display:flex; flex-direction:column; gap:14px; }
.list-card { display:flex; justify-content:space-between; align-items:center; border-radius:22px; padding:18px; }

.detail-hero { display:grid; grid-template-columns:.85fr 1.4fr; gap:22px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; }
.stat-card { background:rgba(255,255,255,.8); border:1px solid var(--border); border-radius:18px; padding:16px; }
.stat-card strong { display:block; font-size:28px; }
.stat-card span, .list-stats { color:var(--muted); font-size:14px; }
.rating-line { margin-top:12px; font-size:20px; letter-spacing:2px; color:#b45309; }
.synopsis-block { margin-top:22px; }
.filter-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.checkbox { display:flex; align-items:center; gap:8px; color:var(--muted); }
.detail-list { list-style:none; padding:0; margin:0; }
.detail-list li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }

.reader-shell { min-height:calc(100vh - 120px); }
.reader-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; background:rgba(255,255,255,.75); border:1px solid var(--border); border-radius:18px; padding:12px 16px; }
.reader-frame { background:white; border-radius:20px; border:1px solid var(--border); height:calc(100vh - 200px); overflow:hidden; }
.reader-iframe { width:100%; height:calc(100vh - 200px); border:0; border-radius:20px; background:white; }
.txt-reader { background:white; border-radius:20px; border:1px solid var(--border); padding:32px; line-height:1.9; font-size:18px; max-width:900px; margin:0 auto; white-space:pre-wrap; }
.reader-back { font-weight:700; }
.reader-meta { color:var(--muted); }

@media (max-width:1100px) {
  .hero, .two-col, .detail-hero, .book-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .site-header, .hero, .two-col, .detail-hero, .book-grid { grid-template-columns:1fr; }
  .site-nav { justify-content:flex-start; flex-wrap:wrap; }
  .hero-copy h1, .page-top h1, .detail-copy h1 { font-size:34px; }
}