/* =================================================================
   The Gilded Archive — Stylesheet
   Aesthetic: collectible library, oxblood + gilded gold, parchment
   ================================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --oxblood: #5A2D1C;
  --oxblood-deep: #3E1B12;
  --oxblood-soft: #7A3E2A;
  --gold: #C9A24B;
  --gold-soft: #D9BC6E;
  --gold-deep: #A87E2F;
  --cream: #F7F1E3;
  --cream-deep: #EFE6D2;
  --paper: #FFFCF5;
  --ink: #2E1C12;
  --ink-soft: #4A3528;
  --muted: #7A6A55;
  --line: rgba(90,45,28,.16);
  --gold-line: linear-gradient(90deg, transparent, var(--gold), transparent);

  --cat-fiction: #C44536;
  --cat-history: #2A6F6F;
  --cat-science: #B68B40;
  --cat-philosophy: #6B4E71;
  --cat-poetry: #A63A3A;
  --cat-other: #3A6B4E;

  --serif-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --serif-deco: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif-body: "Cormorant Garamond", Georgia, serif;

  --shadow-card: 0 1px 2px rgba(62,27,18,.08), 0 6px 18px rgba(62,27,18,.12);
  --shadow-card-hover: 0 6px 14px rgba(62,27,18,.16), 0 22px 46px rgba(62,27,18,.22);
  --shadow-panel: -22px 0 60px rgba(28,14,8,.34);

  --radius: 4px;
  --radius-lg: 10px;
  --header-h: 74px;
  --transition: 0.32s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(circle at 12% 12%, rgba(201,162,75,.10), transparent 42%),
    radial-gradient(circle at 88% 6%, rgba(90,45,28,.07), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(201,162,75,.06), transparent 55%);
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--oxblood); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
input, select { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--serif-display); font-weight: 700; color: var(--oxblood-deep); line-height: 1.18; }

/* paper grain overlay */
.paper-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.18 0 0 0 0 0.11 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =================================================================
   HEADER
   ================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, var(--oxblood-deep), var(--oxblood));
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 2px 0 0 rgba(201,162,75,.25), 0 6px 22px rgba(28,14,8,.22);
  transition: padding var(--transition), box-shadow var(--transition);
}
.header-inner {
  max-width: 1480px; margin: 0 auto;
  padding: 12px 32px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
}
.brand-link { display: flex; align-items: center; gap: 12px; color: var(--cream); text-decoration: none; }
.brand-link:hover { text-decoration: none; }
.brand-mark { color: var(--gold); display: flex; transition: color var(--transition); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-title { font-family: var(--serif-display); font-weight: 800; font-size: 22px; letter-spacing: .01em; color: var(--cream); }
.brand-motto { font-family: var(--serif-deco); font-style: italic; font-size: 13px; color: var(--gold-soft); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }

.primary-nav { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.nav-cat {
  background: transparent; border: 1px solid transparent; color: var(--cream);
  font-family: var(--serif-display); font-size: 14px; font-weight: 500; letter-spacing: .04em;
  padding: 8px 14px; border-radius: var(--radius); transition: all var(--transition);
}
.nav-cat:hover { background: rgba(201,162,75,.16); border-color: rgba(201,162,75,.4); color: var(--gold-soft); }

.header-tools { display: flex; align-items: center; gap: 10px; }
.header-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(247,241,227,.08); border: 1px solid rgba(201,162,75,.4);
  border-radius: 999px; padding: 7px 14px; color: var(--gold-soft);
  transition: border-color var(--transition), background var(--transition);
}
.header-search:focus-within { border-color: var(--gold); background: rgba(247,241,227,.14); }
.header-search input {
  background: transparent; border: 0; outline: 0; color: var(--cream);
  font-size: 14px; width: 180px;
}
.header-search input::placeholder { color: rgba(217,188,110,.7); }
.filter-toggle {
  display: none; background: rgba(201,162,75,.16); border: 1px solid rgba(201,162,75,.4);
  color: var(--cream); padding: 9px 12px; border-radius: var(--radius);
}

/* =================================================================
   HERO
   ================================================================= */
.hero { background: var(--cream-deep); border-bottom: 1px solid var(--line); position: relative; }
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--gold-line); opacity: .6;
}
.hero-inner {
  max-width: 1480px; margin: 0 auto; padding: 36px 32px 44px;
  display: grid; grid-template-columns: 62% 38%; gap: 32px;
}
.hero-eyebrow {
  font-family: var(--serif-deco); font-style: italic; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 12px;
}
.feature-card {
  display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; position: relative;
  box-shadow: var(--shadow-card);
  cursor: pointer; transition: box-shadow var(--transition), transform var(--transition);
}
.feature-card::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201,162,75,.35);
  border-radius: calc(var(--radius-lg) - 4px); pointer-events: none;
}
.feature-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.feature-cover { box-shadow: 4px 6px 0 0 rgba(90,45,28,.12), 0 12px 26px rgba(62,27,18,.28); border-radius: 2px; overflow: hidden; }
.feature-img, .feature-img.ph { width: 230px; height: 330px; object-fit: cover; }
.feature-img.ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--oxblood), var(--oxblood-soft)); color: var(--gold-soft); font-family: var(--serif-display); font-size: 64px; font-weight: 800; }
.feature-text { display: flex; flex-direction: column; gap: 8px; }
.feature-kicker { font-family: var(--serif-deco); font-style: italic; color: var(--gold-deep); letter-spacing: .12em; text-transform: uppercase; font-size: 13px; margin: 0; }
.feature-title { font-size: 38px; font-weight: 800; margin: 0; color: var(--oxblood-deep); }
.feature-author { font-family: var(--serif-deco); font-size: 19px; color: var(--ink-soft); margin: 0; }
.feature-sell { font-family: var(--serif-deco); font-size: 17px; color: var(--ink-soft); line-height: 1.55; margin: 6px 0; }
.feature-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.feature-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--oxblood); border: 1px solid var(--gold); padding: 4px 10px; border-radius: 999px; background: rgba(201,162,75,.08); }
.feature-btn {
  align-self: flex-start; background: var(--oxblood); color: var(--cream); border: 0;
  padding: 12px 22px; font-family: var(--serif-display); font-weight: 600; font-size: 14px; letter-spacing: .06em;
  border-radius: var(--radius); border: 1px solid var(--gold); box-shadow: 0 2px 0 var(--gold-deep);
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--gold-deep), 0 8px 18px rgba(62,27,18,.28); }

.hero-arrivals {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.arrivals-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.arrivals-head h3 { margin: 0; font-size: 20px; }
.arrivals-sub { font-family: var(--serif-deco); font-style: italic; font-size: 13px; color: var(--muted); }
.arrivals-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.arrivals-list::-webkit-scrollbar { width: 6px; }
.arrivals-list::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }
.arrival { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 8px; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); align-items: center; }
.arrival:hover { background: rgba(201,162,75,.1); }
.arrival-cover { width: 44px; height: 60px; border-radius: 2px; overflow: hidden; box-shadow: 1px 2px 4px rgba(62,27,18,.2); }
.arrival-img, .arrival-img.ph { width: 44px; height: 60px; object-fit: cover; }
.arrival-img.ph { display: flex; align-items: center; justify-content: center; background: var(--oxblood-soft); color: var(--gold-soft); font-family: var(--serif-display); font-weight: 700; font-size: 18px; }
.arrival-meta { min-width: 0; }
.arrival-title { margin: 0; font-family: var(--serif-display); font-weight: 600; font-size: 14px; color: var(--oxblood-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrival-author { margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrival-foot { margin: 2px 0 0; display: flex; gap: 10px; font-size: 11px; color: var(--muted); }
.arrival-rate { color: var(--gold-deep); }

/* =================================================================
   THREE-COLUMN LAYOUT
   ================================================================= */
.layout {
  max-width: 1480px; margin: 0 auto; padding: 36px 32px;
  display: grid; grid-template-columns: 20% 1fr 25%; gap: 28px; align-items: start;
  position: relative; z-index: 2;
}
.side-left, .side-right { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 4px; }
.side-left::-webkit-scrollbar, .side-right::-webkit-scrollbar { width: 6px; }
.side-left::-webkit-scrollbar-thumb, .side-right::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }
.side-block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-card); }
.side-block.notice { background: linear-gradient(180deg, var(--cream-deep), var(--paper)); border-color: var(--gold); }
.side-title {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); position: relative;
}
.side-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 32px; height: 2px; background: var(--gold); }

.cat-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cat-tree button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 7px 8px; border-radius: var(--radius);
  font-family: var(--serif-deco); font-size: 15px; color: var(--ink-soft); text-align: left;
  transition: background var(--transition), color var(--transition), padding var(--transition);
}
.cat-tree button:hover { background: rgba(201,162,75,.12); color: var(--oxblood); padding-left: 12px; }
.cat-tree button em { font-style: normal; font-size: 11px; color: var(--gold-deep); background: rgba(201,162,75,.14); padding: 1px 7px; border-radius: 999px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 4px 10px; border-radius: 999px; font-size: 12px; transition: all var(--transition); }
.tag:hover { border-color: var(--gold); color: var(--oxblood); background: rgba(201,162,75,.1); }
.tag-md { font-size: 13px; }
.tag-lg { font-size: 14px; font-weight: 600; }

.distinction-list, .publisher-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.distinction-list a, .publisher-list li { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif-deco); font-size: 15px; color: var(--ink-soft); padding: 6px 8px; border-radius: var(--radius); transition: background var(--transition); }
.distinction-list a:hover { background: rgba(201,162,75,.12); color: var(--oxblood); text-decoration: none; }
.publisher-list li em { font-style: normal; font-size: 11px; color: var(--gold-deep); }

/* ----- main column ----- */
.main-col { min-width: 0; }

/* filter bar */
.filter-bar { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-card); margin-bottom: 18px; }
.filter-inner { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-search { flex: 1 1 220px; min-width: 200px; }
.filter-category, .filter-discover, .filter-sort { min-width: 150px; }
.filter-label { font-family: var(--serif-deco); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap .search-icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.search-wrap input, .select-wrap select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream); color: var(--ink); font-size: 14px; outline: 0; transition: border-color var(--transition), box-shadow var(--transition);
}
.search-wrap input { padding-left: 34px; }
.search-wrap input:focus, .select-wrap select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,75,.18); }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; }
.select-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--gold-deep); pointer-events: none; }
.range-wrap { position: relative; width: 200px; padding-top: 6px; }
.range-track { position: absolute; top: 12px; left: 0; right: 0; height: 3px; background: var(--line); border-radius: 2px; }
.range-track span { position: absolute; top: 0; height: 3px; background: var(--gold); border-radius: 2px; }
.range-wrap input[type="range"] { position: relative; width: 100%; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; height: 18px; margin: 0; }
.range-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--oxblood); border: 2px solid var(--gold); pointer-events: auto; cursor: pointer; margin-top: -7px; box-shadow: 0 1px 4px rgba(62,27,18,.3); }
.range-wrap input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--oxblood); border: 2px solid var(--gold); pointer-events: auto; cursor: pointer; }
.range-vals { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.reset-btn { align-self: flex-end; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 10px 16px; border-radius: var(--radius); font-size: 13px; letter-spacing: .04em; transition: all var(--transition); }
.reset-btn:hover { border-color: var(--oxblood); color: var(--oxblood); background: rgba(90,45,28,.04); }

.results-meta { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.results-count { margin: 0; font-family: var(--serif-display); font-size: 16px; color: var(--oxblood-deep); font-weight: 600; }
.results-hint { margin: 0; font-family: var(--serif-deco); font-style: italic; font-size: 13px; color: var(--muted); }

/* topic banner */
.topic-banner { background: linear-gradient(135deg, var(--oxblood-deep), var(--oxblood)); border: 1px solid var(--gold); border-radius: var(--radius-lg); padding: 26px 30px; margin-bottom: 24px; color: var(--cream); position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.topic-banner::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(201,162,75,.3); border-radius: calc(var(--radius-lg) - 4px); pointer-events: none; }
.topic-banner-inner { position: relative; }
.topic-eyebrow { font-family: var(--serif-deco); font-style: italic; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 6px; font-size: 13px; }
.topic-banner h3 { color: var(--cream); font-size: 26px; margin: 0 0 6px; }
.topic-banner p { margin: 0; font-family: var(--serif-deco); font-size: 16px; color: rgba(247,241,227,.85); }

/* =================================================================
   GRID + CARDS
   ================================================================= */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  animation: cardIn .5s both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--gold); }
.card-thumb { position: relative; aspect-ratio: 2/3; background: linear-gradient(135deg, var(--cream-deep), var(--cream)); overflow: hidden; }
.card-thumb-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif-display); font-weight: 800; font-size: 46px; color: var(--gold-deep); background: linear-gradient(135deg, var(--oxblood-soft), var(--oxblood)); }
.card-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.card-thumb-img.loaded { opacity: 1; }
.card-ribbon { position: absolute; top: 10px; left: 0; background: var(--gold); color: var(--oxblood-deep); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px 4px 8px; border-radius: 0 2px 2px 0; box-shadow: 1px 2px 4px rgba(62,27,18,.25); }
.card-medal { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; color: var(--gold); filter: drop-shadow(0 2px 3px rgba(62,27,18,.4)); }
.card-medal svg { width: 100%; height: 100%; }
.card-body { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--oxblood-deep); line-height: 1.25; }
.card-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0; font-family: var(--serif-deco); }
.card-sub .author { color: var(--ink-soft); font-style: italic; }
.card-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
.card-sub .year { font-variant-numeric: tabular-nums; }
.card-desc { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; font-family: var(--serif-deco); }
.card-meta { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--cream); }
.card-meta-text { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); letter-spacing: .03em; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.card-meta-text .sep { color: var(--gold); }
.card-links { display: flex; gap: 6px; }
.card-link { color: var(--oxblood); display: flex; padding: 4px; border-radius: 4px; transition: background var(--transition); }
.card-link:hover { background: rgba(201,162,75,.16); }
.card-link svg { width: 15px; height: 15px; }
.card-link.disabled { color: var(--muted); opacity: .4; }

.sentinel { height: 1px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); font-family: var(--serif-deco); }
.empty-ornament { font-size: 30px; color: var(--gold); margin-bottom: 10px; }

/* classic reprints rail */
.reprints { margin-top: 40px; }
.reprints-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.reprints-head h3 { margin: 0; font-size: 22px; }
.reprints-sub { font-family: var(--serif-deco); font-style: italic; font-size: 13px; color: var(--muted); }
.reprints-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.reprints-rail::-webkit-scrollbar { height: 6px; }
.reprints-rail::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }
.reprint { cursor: pointer; scroll-snap-align: start; }
.reprint-cover { aspect-ratio: 2/3; border-radius: 3px; overflow: hidden; box-shadow: var(--shadow-card); margin-bottom: 8px; background: var(--cream-deep); }
.reprint-img, .reprint-img.ph { width: 100%; height: 100%; object-fit: cover; }
.reprint-img.ph { display: flex; align-items: center; justify-content: center; background: var(--oxblood-soft); color: var(--gold-soft); font-family: var(--serif-display); font-weight: 800; font-size: 32px; }
.reprint-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--oxblood-deep); line-height: 1.25; }
.reprint-author { margin: 2px 0 0; font-size: 12px; color: var(--muted); font-family: var(--serif-deco); font-style: italic; }

/* ----- right sidebar widgets ----- */
.author-feature .af-author { margin: 0; font-family: var(--serif-display); font-weight: 700; font-size: 18px; color: var(--oxblood-deep); }
.author-feature .af-book { margin: 0 0 8px; font-family: var(--serif-deco); font-style: italic; font-size: 14px; color: var(--muted); }
.author-feature .af-bio { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); font-family: var(--serif-deco); }
.af-link { margin-top: 10px; background: transparent; border: 0; color: var(--oxblood); font-family: var(--serif-display); font-size: 13px; font-weight: 600; padding: 0; }
.af-link:hover { color: var(--gold-deep); }

.top10 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: none; }
.top10 li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 7px 6px; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); }
.top10 li:hover { background: rgba(201,162,75,.12); }
.top10 .rank { font-family: var(--serif-display); font-weight: 800; font-size: 18px; color: var(--gold-deep); text-align: center; }
.top-meta { min-width: 0; }
.top-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--oxblood-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-author { margin: 0; font-size: 12px; color: var(--muted); font-family: var(--serif-deco); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.review-wall { display: flex; flex-direction: column; gap: 14px; }
.review { margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--gold); }
.review p { margin: 0 0 4px; font-family: var(--serif-deco); font-style: italic; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.review cite { font-size: 12px; color: var(--muted); font-style: normal; }
.notice p { margin: 0; font-family: var(--serif-deco); font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

/* =================================================================
   LOWER FULL-WIDTH SECTIONS
   ================================================================= */
.lower { background: var(--cream-deep); border-top: 1px solid var(--line); padding: 50px 0; position: relative; }
.lower::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-line); opacity: .7; }
.lower-inner { max-width: 1480px; margin: 0 auto; padding: 0 32px; }
.lower-head { margin-bottom: 28px; }
.lower-eyebrow { font-family: var(--serif-deco); font-style: italic; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 6px; font-size: 13px; }
.lower-head h2 { margin: 0; font-size: 32px; }

.editor-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.epick { display: grid; grid-template-columns: 90px 1fr; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: all var(--transition); box-shadow: var(--shadow-card); }
.epick:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--gold); }
.epick-cover { width: 90px; aspect-ratio: 2/3; border-radius: 2px; overflow: hidden; box-shadow: 2px 3px 6px rgba(62,27,18,.2); }
.epick-img, .epick-img.ph { width: 100%; height: 100%; object-fit: cover; }
.epick-img.ph { display: flex; align-items: center; justify-content: center; background: var(--oxblood-soft); color: var(--gold-soft); font-family: var(--serif-display); font-weight: 800; font-size: 24px; }
.epick-body { min-width: 0; }
.epick-kicker { font-family: var(--serif-deco); font-style: italic; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 4px; }
.epick-body h3 { margin: 0 0 4px; font-size: 17px; }
.epick-body p { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-family: var(--serif-deco); }
.epick-desc { color: var(--ink-soft) !important; font-style: normal !important; line-height: 1.5; }

.news { padding: 50px 0; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-card); transition: all var(--transition); }
.news-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-card-hover); }
.news-cat { font-family: var(--serif-deco); font-style: italic; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 10px; }
.news-card h3 { margin: 0 0 10px; font-size: 20px; }
.news-card p { margin: 0 0 14px; font-family: var(--serif-deco); font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.news-meta { font-size: 12px; color: var(--muted); letter-spacing: .04em; }

.publishers-band { padding: 36px 0 56px; }
.publishers-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pub-chip { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-family: var(--serif-deco); font-size: 15px; color: var(--ink-soft); box-shadow: var(--shadow-card); }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer { background: var(--oxblood-deep); color: var(--cream); border-top: 3px solid var(--gold); }
.footer-inner { max-width: 1480px; margin: 0 auto; padding: 48px 32px 36px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 36px; }
.footer-title { color: var(--cream); font-size: 22px; margin: 0 0 8px; }
.footer-motto { font-family: var(--serif-deco); font-style: italic; color: var(--gold-soft); margin: 0; font-size: 15px; }
.footer-col h4 { color: var(--gold-soft); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.footer-col a { display: block; color: rgba(247,241,227,.85); padding: 4px 0; font-size: 14px; }
.footer-col a:hover { color: var(--gold-soft); text-decoration: none; }
.footer-col p { color: rgba(247,241,227,.7); font-size: 14px; line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(201,162,75,.25); padding: 18px 32px; text-align: center; font-size: 13px; color: rgba(247,241,227,.6); font-family: var(--serif-deco); }

/* =================================================================
   DETAIL PANEL
   ================================================================= */
.panel-overlay { position: fixed; inset: 0; background: rgba(28,14,8,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 90; opacity: 0; transition: opacity .35s ease; }
.panel-overlay.show { opacity: 1; }
.detail-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(620px, 100vw); z-index: 100;
  background: var(--paper); box-shadow: var(--shadow-panel); transform: translateX(100%); transition: transform .38s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; border-left: 1px solid var(--gold);
}
.detail-panel.open { transform: translateX(0); }
.panel-close { position: absolute; top: 16px; right: 16px; z-index: 5; background: var(--cream); border: 1px solid var(--line); color: var(--oxblood); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
.panel-close:hover { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }
.panel-drag { display: none; }
.panel-scroll { flex: 1; overflow-y: auto; }
.panel-content { padding: 34px 38px 28px; }
.panel-hero { display: grid; grid-template-columns: 130px 1fr; gap: 22px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.panel-thumb { border-radius: 3px; overflow: hidden; box-shadow: 3px 4px 0 0 rgba(90,45,28,.12), 0 10px 22px rgba(62,27,18,.3); }
.panel-thumb img { width: 130px; height: 185px; object-fit: cover; }
.panel-hero-text { display: flex; flex-direction: column; gap: 6px; }
.panel-eyebrow { font-family: var(--serif-deco); font-style: italic; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-size: 12px; margin: 0; }
#panel-title { margin: 0; font-size: 30px; color: var(--oxblood-deep); }
.panel-author { margin: 0; font-family: var(--serif-deco); font-size: 18px; color: var(--ink-soft); font-style: italic; }
.panel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.panel-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--oxblood); border: 1px solid var(--gold); padding: 3px 9px; border-radius: 999px; background: rgba(201,162,75,.08); }
.panel-section { margin-bottom: 22px; }
.panel-section h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.panel-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel-meta-item { display: flex; flex-direction: column; gap: 2px; }
.panel-meta-item .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.panel-meta-item .v { font-family: var(--serif-deco); font-size: 15px; color: var(--ink); }
.panel-desc { font-family: var(--serif-body); font-size: 16px; line-height: 1.7; color: var(--ink); }
.panel-desc h2 { font-size: 18px; color: var(--oxblood); margin: 18px 0 8px; }
.panel-desc p { margin: 0 0 12px; }
.panel-discover { font-family: var(--serif-deco); font-style: italic; font-size: 16px; color: var(--ink-soft); margin: 0; }
.panel-award { display: flex; gap: 10px; align-items: flex-start; background: rgba(201,162,75,.1); border: 1px solid var(--gold); border-radius: var(--radius); padding: 12px 14px; }
.panel-award .medal-ico { color: var(--gold-deep); flex-shrink: 0; margin-top: 2px; }
.panel-award span { font-size: 14px; color: var(--ink-soft); }
.panel-author-bio { font-family: var(--serif-body); font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.panel-ext-link { display: inline-flex; align-items: center; gap: 8px; background: var(--oxblood); color: var(--cream); padding: 12px 20px; border-radius: var(--radius); border: 1px solid var(--gold); font-family: var(--serif-display); font-weight: 600; font-size: 14px; transition: all var(--transition); }
.panel-ext-link:hover { background: var(--oxblood-deep); color: var(--gold-soft); text-decoration: none; transform: translateY(-1px); }
.panel-ext-link.disabled { background: transparent; color: var(--muted); border-color: var(--line); pointer-events: none; }
.panel-nav { display: flex; gap: 10px; padding: 14px 38px; border-top: 1px solid var(--line); background: var(--cream); }
.panel-nav-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 1px solid var(--line); color: var(--oxblood); padding: 11px; border-radius: var(--radius); font-family: var(--serif-display); font-size: 14px; font-weight: 600; transition: all var(--transition); }
.panel-nav-btn:hover:not(:disabled) { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }
.panel-nav-btn:disabled { opacity: .4; cursor: not-allowed; }

/* =================================================================
   MOBILE FILTER SHEET
   ================================================================= */
.sheet-overlay { position: fixed; inset: 0; background: rgba(28,14,8,.5); z-index: 110; opacity: 0; transition: opacity .3s ease; }
.sheet-overlay.show { opacity: 1; }
.filter-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; background: var(--paper); border-radius: 18px 18px 0 0; border-top: 2px solid var(--gold); transform: translateY(100%); transition: transform .35s cubic-bezier(.22,.61,.36,1); max-height: 88vh; display: flex; flex-direction: column; }
.filter-sheet.open { transform: translateY(0); }
.sheet-handle { width: 44px; height: 4px; background: var(--gold-soft); border-radius: 2px; margin: 10px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.sheet-head h3 { margin: 0; font-size: 18px; }
.sheet-close { background: transparent; border: 0; color: var(--oxblood); padding: 4px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.sheet-foot { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
.apply-btn { flex: 1; background: var(--oxblood); color: var(--cream); border: 1px solid var(--gold); padding: 12px; border-radius: var(--radius); font-family: var(--serif-display); font-weight: 600; font-size: 14px; }
.sheet-foot .reset-btn { flex: 0 0 auto; }

/* =================================================================
   GENERIC PAGE (about/contact/policy)
   ================================================================= */
.page-main { max-width: 760px; margin: 0 auto; padding: 56px 32px 80px; position: relative; z-index: 2; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--oxblood); font-family: var(--serif-deco); font-style: italic; font-size: 14px; margin-bottom: 28px; }
.back-link:hover { color: var(--gold-deep); text-decoration: none; }
.page-eyebrow { font-family: var(--serif-deco); font-style: italic; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 8px; font-size: 13px; }
.page-title { font-size: 44px; margin: 0 0 16px; color: var(--oxblood-deep); }
.page-lede { font-family: var(--serif-deco); font-size: 20px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 36px; }
.page-section { margin-bottom: 30px; }
.page-section h2 { font-size: 22px; margin: 0 0 12px; color: var(--oxblood); }
.page-section p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 12px; }
.page-section ul { padding-left: 22px; color: var(--ink-soft); }
.page-section li { margin-bottom: 8px; line-height: 1.65; }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 20px 24px; margin-top: 12px; }
.contact-card .label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.contact-card .label:first-child { margin-top: 0; }
.contact-card .value { font-family: var(--serif-deco); font-size: 17px; color: var(--ink); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 22% 1fr; }
  .side-right { display: none; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .header-inner { grid-template-columns: auto 1fr; gap: 14px; }
  .primary-nav { display: none; }
  .filter-toggle { display: flex; margin-left: auto; }
  .header-search { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .feature-card { grid-template-columns: 1fr; text-align: center; }
  .feature-cover { margin: 0 auto; }
  .feature-tags, .feature-btn { align-self: center; }
  .layout { grid-template-columns: 1fr; padding: 24px 20px; }
  .side-left { position: static; max-height: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .editor-picks, .news-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .header-inner { padding: 10px 18px; }
  .brand-title { font-size: 18px; }
  .hero-inner { padding: 24px 18px 30px; }
  .feature-title { font-size: 28px; }
  .layout { padding: 20px 14px; }
  /* 移动端隐藏侧边栏，筛选功能通过筛选面板访问 */
  .side-left { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .filter-inner { gap: 14px; }
  .editor-picks, .news-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .panel-content { padding: 28px 22px; }
  .panel-hero { grid-template-columns: 1fr; }
  .panel-meta-grid { grid-template-columns: 1fr; }
  .detail-panel { width: 100vw; }
}
@media (max-width: 460px) {
  .grid { grid-template-columns: 1fr; }
  .feature-cover, .feature-img, .feature-img.ph { width: 100%; height: auto; aspect-ratio: 2/3; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =================================================================
   居中翻开式精装书弹窗 (Centered Open-Book Modal)
   —— 替换原右侧滑入面板：背景变暗 → 精装书中心放大翻开
   配色：oxblood (#5A2D1C) / gold (#C9A24B) / cream (#F7F1E3)
   ================================================================= */

/* 打开弹窗时锁定背景滚动 */
body.panel-open { overflow: hidden; }

/* —— 背景遮罩：深色 + 毛玻璃模糊 —— */
.book-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(28,14,8,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .4s ease;
}
.book-overlay[hidden] { display: none; }
.book-overlay.show { opacity: 1; }

/* —— 弹窗容器：居中 + 缩放过渡 + 3D 透视 —— */
.book-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px;
  opacity: 0; transform: scale(.9);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  perspective: 2200px;
  pointer-events: none;
}
.book-modal[hidden] { display: none; }
.book-modal.open { opacity: 1; transform: scale(1); pointer-events: auto; }

/* —— 书籍主体：左右双页 + 中央书脊 —— */
.book-volume {
  position: relative; display: flex;
  width: min(1080px, 92vw); height: min(680px, 84vh); max-height: 84vh;
  transform-style: preserve-3d;
  box-shadow: 0 30px 70px rgba(28,14,8,.55), 0 8px 20px rgba(28,14,8,.35);
}

/* 中央装订线（书脊） */
.book-spine {
  position: absolute; left: 45%; top: 0; bottom: 0; width: 14px; margin-left: -7px; z-index: 5;
  background: linear-gradient(90deg, rgba(28,14,8,.32) 0%, rgba(90,45,28,.18) 35%, rgba(28,14,8,.45) 50%, rgba(90,45,28,.18) 65%, rgba(28,14,8,.32) 100%);
  box-shadow: inset 0 0 6px rgba(28,14,8,.4);
  pointer-events: none;
}

/* —— 单页通用 —— */
.book-page {
  position: relative; flex: 0 0 auto; background: var(--paper); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(201,162,75,.18);
}
.book-page-left { width: 45%; border-radius: 4px 2px 2px 4px; }
.book-page-right {
  width: 55%; border-radius: 2px 4px 4px 2px;
  transform-origin: left center;
  transform: rotateY(-92deg);          /* 合上状态：右页翻起盖住 */
  transition: transform .5s ease;       /* 关闭动画：0.5s 无延迟 */
  backface-visibility: hidden;
}
.book-modal.open .book-page-right {
  transform: rotateY(0deg);             /* 打开状态：右页平铺 */
  transition: transform .62s cubic-bezier(.22,.61,.36,1) .12s; /* 打开动画：稍慢且延迟，先现身后翻开 */
}

/* 羊皮纸纹理覆层（固定在书页上，不随内容滚动） */
.book-page::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.18 0 0 0 0 0.11 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* —— 书页内部：可滚动 + 内容位于纹理之上 —— */
.book-page-inner {
  position: relative; z-index: 2; height: 100%; overflow-y: auto;
  padding: 30px 28px;
  scrollbar-width: thin; scrollbar-color: var(--gold-soft) transparent;
}
.book-page-inner::-webkit-scrollbar { width: 6px; }
.book-page-inner::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }
.book-page-inner::-webkit-scrollbar-track { background: transparent; }

/* —— 镀金分隔线（中央带装饰符号） —— */
.book-sep {
  height: 1px; margin: 16px 0; position: relative;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.book-sep::after {
  content: "\2767"; /* ❧ 装饰符号 */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: var(--paper); padding: 0 8px; color: var(--gold-deep); font-size: 12px; line-height: 1;
}

/* ============ 左页：封面 + 书名页式元数据 ============ */
.book-cover {
  width: 100%; aspect-ratio: 2/3; max-height: 320px; margin: 0 auto 18px;
  border-radius: 3px; overflow: hidden;
  box-shadow: 4px 6px 0 0 rgba(90,45,28,.12), 0 14px 28px rgba(62,27,18,.32);
  background: linear-gradient(135deg, var(--oxblood-soft), var(--oxblood));
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif-display); font-weight: 800; font-size: 72px; color: var(--gold-soft);
}

.book-titlepage { text-align: center; }
.book-tp-eyebrow { font-family: var(--serif-deco); font-style: italic; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 8px; }
.book-tp-title { font-family: var(--serif-display); font-weight: 800; font-size: 24px; color: var(--oxblood-deep); margin: 0 0 4px; line-height: 1.2; }
.book-tp-author { font-family: var(--serif-deco); font-style: italic; font-size: 16px; color: var(--ink-soft); margin: 0 0 4px; }

.book-meta { margin: 0; display: flex; flex-direction: column; gap: 0; text-align: left; }
.book-meta-row { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-bottom: 1px dotted rgba(90,45,28,.18); }
.book-meta-row:last-child { border-bottom: 0; }
.book-meta-row dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-family: var(--sans); }
.book-meta-row dd { margin: 0; font-family: var(--serif-deco); font-size: 14px; color: var(--ink); line-height: 1.4; }

.book-award { display: flex; gap: 8px; align-items: flex-start; background: rgba(201,162,75,.1); border: 1px solid var(--gold); border-radius: var(--radius); padding: 10px 12px; text-align: left; }
.book-award svg { color: var(--gold-deep); flex-shrink: 0; margin-top: 2px; }
.book-award span { font-size: 12px; color: var(--ink-soft); line-height: 1.5; font-family: var(--serif-deco); }

/* ============ 右页：标题 + 星级 + 描述 + 目录 + 作者简介 + 按钮 ============ */
.book-head { text-align: left; }
.book-eyebrow { font-family: var(--serif-deco); font-style: italic; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 6px; }
.book-title { font-family: var(--serif-display); font-weight: 800; font-size: 30px; color: var(--oxblood-deep); margin: 0 0 4px; line-height: 1.16; }
.book-byline { font-family: var(--serif-deco); font-style: italic; font-size: 17px; color: var(--ink-soft); margin: 0 0 8px; }
.book-rating { display: flex; align-items: center; gap: 8px; color: var(--gold-deep); }
.book-stars { font-size: 18px; letter-spacing: 2px; line-height: 1; }
.book-rating-num { font-size: 13px; color: var(--muted); font-family: var(--sans); }

.book-desc { font-family: var(--serif-body); font-size: 15px; line-height: 1.72; color: var(--ink); }
.book-desc h3 { font-family: var(--serif-display); font-size: 16px; color: var(--oxblood); margin: 16px 0 6px; font-weight: 700; }
.book-desc p { margin: 0 0 10px; }

.book-toc h4, .book-author-bio h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.book-toc ol { margin: 0; padding-left: 20px; font-family: var(--serif-deco); font-size: 14px; color: var(--ink-soft); line-height: 1.75; }
.book-toc li { margin-bottom: 2px; }
.book-toc li::marker { color: var(--gold-deep); }

.book-author-bio p { margin: 0; font-family: var(--serif-body); font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.book-muted { color: var(--muted) !important; font-style: italic; }

/* —— 底部操作按钮 —— */
.book-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.book-action {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream); border: 1px solid var(--line); color: var(--oxblood);
  padding: 9px 14px; border-radius: var(--radius);
  font-family: var(--serif-display); font-weight: 600; font-size: 13px; letter-spacing: .02em;
  transition: all var(--transition); text-decoration: none;
}
.book-action:hover { border-color: var(--gold); background: rgba(201,162,75,.12); }
.book-action.on { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }
.book-action.on svg { color: var(--gold-soft); }
.book-action.disabled { color: var(--muted); pointer-events: none; opacity: .5; }
.book-action-buy { background: var(--oxblood); color: var(--cream); border-color: var(--gold); }
.book-action-buy:hover { background: var(--oxblood-deep); color: var(--gold-soft); }

/* —— 关闭按钮（右上角，镀金描边） —— */
.book-close {
  position: absolute; top: 18px; right: 18px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--gold); color: var(--oxblood);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 4px 12px rgba(28,14,8,.25);
}
.book-close:hover { background: var(--oxblood); color: var(--cream); transform: rotate(90deg); }

/* —— 上一本 / 下一本 按钮（左右两侧，镀金主题） —— */
.book-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--gold); color: var(--oxblood);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 4px 12px rgba(28,14,8,.25);
}
.book-nav-btn:hover:not(:disabled) { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }
.book-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.book-prev { left: 24px; }
.book-next { right: 24px; }

/* ============ 响应式：移动端竖向堆叠 ============ */
@media (max-width: 820px) {
  .book-modal { padding: 20px 14px; }
  .book-volume { flex-direction: column; width: 96vw; height: 88vh; }
  .book-page-left, .book-page-right { width: 100%; border-radius: 4px; }
  .book-page-left { height: 38%; }
  .book-page-right { height: 62%; transform: none !important; transition: none !important; }
  .book-spine { display: none; }
  .book-cover { max-height: 180px; width: 58%; }
  .book-title { font-size: 24px; }
  .book-prev { left: 8px; }
  .book-next { right: 8px; }
  .book-page-inner { padding: 20px 16px; }
  .book-tp-title { font-size: 20px; }
}
@media (max-width: 460px) {
  .book-cover { width: 70%; }
  .book-title { font-size: 21px; }
  .book-action { font-size: 12px; padding: 8px 11px; }
}

/* 弹窗动画的降级处理：尊重 reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .book-page-right, .book-modal, .book-overlay { transition-duration: .001ms !important; }
  .book-page-right { transform: none !important; }
}