/* ============================================================
   黄色仓库 主样式表
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Noto+Serif+SC:wght@400;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Caveat:wght@500;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg) url('../images/parchment-bg.webp') repeat;
  background-size:600px;
  line-height:1.7;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color .25s}
a:hover{color:var(--primary)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-heading);color:var(--primary);line-height:1.3;margin-bottom:.6em}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.6rem,3vw,2.25rem)}
h3{font-size:1.4rem}
p{margin-bottom:1em;color:var(--text)}

/* 容器 */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ============ 顶部导航 ============ */
.site-header{
  background:var(--primary);
  color:#fff3e0;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.nav-wrap{display:flex;align-items:center;gap:24px;padding:14px 24px;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-size:1.4rem;font-weight:900;color:#fff3e0}
.brand img{width:42px;height:42px;border-radius:50%;background:#fff3e0;padding:3px}
.main-nav{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center}
.main-nav a{color:#fff3e0;padding:8px 14px;border-radius:var(--radius);font-weight:500}
.main-nav a:hover,.main-nav a.active{background:var(--accent);color:#fff}
.search-box{display:flex;align-items:center;background:#fff3e0;border-radius:24px;padding:6px 14px;min-width:240px}
.search-box input{border:0;background:transparent;outline:0;flex:1;font-family:var(--font-body);color:var(--text)}
.search-box button{border:0;background:transparent;cursor:pointer;color:var(--primary);font-size:1.1rem}
.menu-toggle{display:none;background:transparent;border:0;color:#fff3e0;font-size:1.6rem;cursor:pointer}

/* 面包屑 */
.breadcrumb{padding:14px 0;font-size:.9rem;color:var(--text-muted)}
.breadcrumb a{color:var(--accent)}
.breadcrumb span{margin:0 8px}

/* ============ Hero ============ */
.hero{
  position:relative;height:78vh;min-height:520px;
  background:linear-gradient(rgba(40,25,20,.65),rgba(40,25,20,.78)),url('../images/hero-bg.webp') center/cover fixed;
  color:#fff3e0;display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
}
.hero-inner{max-width:900px;padding:0 24px;animation:fadeIn 1s ease both}
.hero h1{color:#fff3e0;font-size:clamp(2.4rem,5vw,4rem);text-shadow:0 4px 20px rgba(0,0,0,.5);margin-bottom:18px}
.hero p{font-size:1.15rem;color:#fff3e0;opacity:.92;margin-bottom:28px}
.btn{
  display:inline-block;padding:14px 32px;border-radius:var(--radius);
  font-weight:700;letter-spacing:.5px;cursor:pointer;border:0;
  transition:transform .25s,box-shadow .25s;font-family:var(--font-body);
}
.btn-primary{background:var(--accent);color:#fff3e0}
.btn-primary:hover{background:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-card);color:#fff}
.btn-outline{background:transparent;color:#fff3e0;border:2px solid #fff3e0;margin-left:10px}
.btn-outline:hover{background:#fff3e0;color:var(--primary)}

/* ============ 章节通用 ============ */
section{padding:64px 0}
.section-title{text-align:center;margin-bottom:14px}
.section-sub{text-align:center;color:var(--text-muted);max-width:720px;margin:0 auto 40px;font-style:italic}
.section-title::after{content:"";display:block;width:60px;height:3px;background:var(--accent);margin:14px auto 0}

/* 馆长推荐 */
.curator{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center;background:var(--card-bg);padding:40px;border-radius:8px;box-shadow:var(--shadow-card);border:1px solid #e8d9c0}
.curator-cover{position:relative}
.curator-cover img{box-shadow:var(--shadow-book);border-radius:4px;transform:rotateY(-8deg)}
.curator-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,243,224,.4),transparent 70%);pointer-events:none}
.curator-note{font-family:var(--font-accent);font-size:1.4rem;color:var(--text-muted);line-height:1.6}
.curator h3{color:var(--primary)}
.curator-meta{color:var(--text-muted);font-size:.95rem;margin-bottom:12px}

/* 分类网格 */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.cat-card{
  background:var(--card-bg);border:1px solid #e8d9c0;border-radius:var(--radius);
  padding:28px 20px;text-align:center;transition:transform .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:var(--accent)}
.cat-card .icon{font-size:2.4rem;margin-bottom:10px;color:var(--accent)}
.cat-card h4{color:var(--primary);margin-bottom:6px;font-family:var(--font-heading)}
.cat-card p{font-size:.85rem;color:var(--text-muted);margin:0}

/* 书架 + 书籍卡 */
.shelf{
  background:url('../images/shelf-wood.webp') bottom/100% 28px no-repeat,var(--bg);
  padding-bottom:32px;border-bottom:6px solid #3e2723;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.45);
  margin-bottom:32px;border-radius:4px;
}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px;padding:24px}
.book{
  position:relative;background:var(--card-bg);border-radius:4px;
  transition:transform .3s,box-shadow .3s;cursor:pointer;
  box-shadow:var(--shadow-book);overflow:hidden;
}
.book:hover{transform:translateY(-8px) scale(1.04)}
.book img{width:100%;aspect-ratio:2/3;object-fit:cover}
.book-info{padding:10px 12px;background:var(--card-bg)}
.book-info h5{font-family:var(--font-heading);font-size:1rem;color:var(--primary);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.book-info .author{font-size:.78rem;color:var(--text-muted)}
.book-info .rating{font-size:.78rem;color:var(--accent);margin-top:4px}
.book-overlay{
  position:absolute;inset:0;background:rgba(78,52,46,.92);color:#fff3e0;
  padding:18px;opacity:0;transition:opacity .25s;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
}
.book:hover .book-overlay{opacity:1}
.book-overlay p{color:#fff3e0;font-size:.85rem;margin-bottom:14px}
.book-overlay .btn{padding:8px 18px;font-size:.85rem}

/* 选项卡 */
.tabs{display:flex;gap:4px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
.tab{padding:10px 24px;background:transparent;border:2px solid var(--secondary);color:var(--secondary);cursor:pointer;border-radius:var(--radius);font-family:var(--font-heading);font-weight:700;transition:all .25s}
.tab.active,.tab:hover{background:var(--primary);color:#fff3e0;border-color:var(--primary)}

/* 有声试听区 */
.audio-zone{background:linear-gradient(135deg,#2c1810,#4E342E);color:#fff3e0;padding:80px 0;border-radius:8px;margin:32px 0}
.audio-zone h2{color:#fff3e0}
.audio-zone .section-sub{color:rgba(255,243,224,.75)}
.audio-zone .section-title::after{background:#d7a86e}
.gramophone-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:1100px;margin:0 auto;padding:0 24px}
.gramophone-img{filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));animation:bookFloat 4s ease infinite}
.gramophone-img.playing{animation:spin 8s linear infinite,breathe 3s ease infinite}
.playlist{display:flex;flex-direction:column;gap:12px}
.audio-item{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,243,224,.08);padding:14px 18px;border-radius:var(--radius);
  border:1px solid rgba(255,243,224,.12);cursor:pointer;transition:background .2s;
}
.audio-item:hover{background:rgba(255,243,224,.16)}
.audio-item .play-btn{
  width:42px;height:42px;border-radius:50%;background:#d7a86e;color:var(--primary);
  border:0;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;font-weight:bold;
}
.audio-item .info{flex:1}
.audio-item .info h5{color:#fff3e0;margin-bottom:2px;font-family:var(--font-heading)}
.audio-item .info span{font-size:.8rem;color:rgba(255,243,224,.7)}

/* 笔记/书评墙 */
.notes-grid{column-count:3;column-gap:22px}
.note{
  break-inside:avoid;background:#fffaf0;padding:22px;margin-bottom:22px;
  font-family:var(--font-accent);font-size:1.15rem;color:var(--text-muted);
  border-radius:2px;position:relative;
  box-shadow:0 6px 16px rgba(78,52,46,.18);transform:rotate(-1deg);
  border-left:4px solid var(--accent);
}
.note:nth-child(even){transform:rotate(1deg);background:#fef3e2}
.note .author{display:block;margin-top:14px;font-size:.95rem;color:var(--primary);font-family:var(--font-heading);font-weight:700}
.note::before{content:"❝";position:absolute;top:-12px;left:14px;font-size:3rem;color:var(--accent);opacity:.4;line-height:1}

/* 统计数据 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat{background:var(--card-bg);padding:32px 20px;border-radius:var(--radius);border:1px solid #e8d9c0}
.stat .num{font-family:var(--font-heading);font-size:2.6rem;color:var(--primary);font-weight:900;display:block}
.stat .label{color:var(--text-muted);font-size:.95rem;margin-top:6px;display:block}

/* ============ 页脚 ============ */
.site-footer{background:var(--primary);color:#fff3e0;padding:60px 0 24px;margin-top:64px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;padding-bottom:32px;border-bottom:1px solid rgba(255,243,224,.2)}
.site-footer h5{color:#fff3e0;font-family:var(--font-heading);margin-bottom:14px;font-size:1.1rem}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:8px}
.site-footer a{color:rgba(255,243,224,.78);font-size:.92rem}
.site-footer a:hover{color:#fff}
.footer-bottom{text-align:center;padding-top:24px;font-size:.85rem;color:rgba(255,243,224,.6)}
.footer-bottom a{color:rgba(255,243,224,.8);margin:0 8px}

/* ============ 阅读器/书架/详情 等 ============ */
.layout{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:24px 0}
.side-nav{background:var(--card-bg);padding:18px;border-radius:var(--radius);border:1px solid #e8d9c0;position:sticky;top:90px;align-self:start}
.side-nav h4{font-size:1rem;border-bottom:1px solid #e8d9c0;padding-bottom:8px}
.side-nav ul{list-style:none}
.side-nav li a{display:block;padding:8px 10px;color:var(--text-muted);border-radius:4px;font-size:.92rem}
.side-nav li a:hover,.side-nav li a.active{background:var(--bg);color:var(--primary)}

/* 详情页 */
.detail-hero{display:grid;grid-template-columns:300px 1fr;gap:48px;background:var(--card-bg);padding:36px;border-radius:8px;box-shadow:var(--shadow-card);border:1px solid #e8d9c0}
.detail-cover img{box-shadow:var(--shadow-book);transform:perspective(800px) rotateY(-12deg);border-radius:4px}
.meta-list{list-style:none;margin:16px 0;color:var(--text-muted)}
.meta-list li{padding:4px 0}
.meta-list strong{color:var(--primary);min-width:80px;display:inline-block}
.action-bar{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}

/* 阅读器页 */
.reader{
  max-width:780px;margin:32px auto;background:#fffaf0;padding:60px 80px;
  border-radius:4px;box-shadow:0 14px 60px rgba(78,52,46,.25);
  font-size:1.1rem;line-height:2;color:#2b1d18;
  position:relative;min-height:80vh;
}
.reader h2{text-align:center;color:var(--primary);margin-bottom:24px;border-bottom:1px solid #d7c4a0;padding-bottom:14px}
.reader p{text-indent:2em;margin-bottom:1em}
.reader-toolbar{position:fixed;top:80px;right:24px;background:var(--card-bg);padding:12px;border-radius:var(--radius);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:8px;z-index:20}
.reader-toolbar button{padding:8px 12px;background:var(--bg);border:1px solid #e8d9c0;border-radius:4px;cursor:pointer;color:var(--primary)}
.progress-bar{
  position:fixed;bottom:0;left:0;right:0;height:6px;background:rgba(78,52,46,.15);z-index:30;
}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--primary));transition:width .2s;width:35%}

/* 播放器 */
.audio-player-bar{
  position:fixed;bottom:0;left:0;right:0;background:linear-gradient(180deg,#3e2723,#2c1810);
  color:#fff3e0;padding:12px 24px;display:flex;align-items:center;gap:20px;
  border-top:2px solid #d7a86e;z-index:90;box-shadow:0 -8px 24px rgba(0,0,0,.4);
}
.audio-player-bar img{width:48px;height:48px;border-radius:50%;animation:spin 10s linear infinite}
.audio-player-bar .title{font-family:var(--font-heading);font-weight:700}
.audio-player-bar .ctrls{display:flex;gap:10px;align-items:center;flex:1;justify-content:center}
.audio-player-bar button{background:transparent;border:0;color:#fff3e0;cursor:pointer;font-size:1.1rem;padding:6px 10px}
.audio-player-bar .wave{flex:1;max-width:300px;height:24px;background:repeating-linear-gradient(90deg,#d7a86e 0 2px,transparent 2px 5px);opacity:.6;border-radius:4px}

/* 404 */
.error-page{text-align:center;padding:80px 24px}
.error-page img{max-width:560px;margin:0 auto 24px;border-radius:8px;box-shadow:var(--shadow-card)}
.error-page h1{font-size:5rem;color:var(--primary)}

/* Cookie 同意横幅 */
.cookie-banner{
  position:fixed;bottom:20px;left:20px;right:20px;max-width:680px;margin:0 auto;
  background:var(--primary);color:#fff3e0;padding:16px 22px;border-radius:8px;
  display:flex;gap:14px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.4);z-index:200;
}
.cookie-banner p{color:#fff3e0;font-size:.9rem;margin:0;flex:1}
.cookie-banner button{padding:8px 16px;border:0;border-radius:4px;background:#d7a86e;color:var(--primary);cursor:pointer;font-weight:700}
.cookie-banner.hidden{display:none}

/* APP 下载页 */
.app-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:60px 0}
.app-hero img{max-width:340px;margin:0 auto;filter:drop-shadow(0 20px 50px rgba(0,0,0,.4))}
.download-buttons{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap}
.download-btn{display:flex;align-items:center;gap:10px;background:var(--primary);color:#fff3e0;padding:14px 22px;border-radius:8px;font-weight:700}
.download-btn:hover{background:var(--accent);color:#fff3e0}

/* 专题页头 */
.topic-hero{
  height:340px;background:linear-gradient(rgba(60,30,15,.6),rgba(60,30,15,.6)),url('../images/topics/nobel.webp') center/cover;
  display:flex;align-items:center;justify-content:center;color:#fff3e0;text-align:center;margin-bottom:32px;
}
.topic-hero h1{color:#fff3e0;font-size:3rem;text-shadow:0 4px 18px rgba(0,0,0,.6)}

/* blockquote */
blockquote{
  border-left:4px solid var(--accent);background:rgba(121,85,72,.08);padding:16px 22px;margin:20px 0;
  font-family:var(--font-heading);font-style:italic;color:var(--text-muted);position:relative;
}

/* 表单 */
form{background:var(--card-bg);padding:28px;border-radius:8px;border:1px solid #e8d9c0;max-width:560px}
form label{display:block;margin-bottom:6px;color:var(--primary);font-weight:600}
form input,form textarea,form select{
  width:100%;padding:10px 14px;border:1px solid #d7c4a0;border-radius:4px;margin-bottom:16px;
  font-family:var(--font-body);font-size:1rem;background:#fff;
}

/* 响应式 */
@media (max-width:900px){
  .menu-toggle{display:block}
  .main-nav{display:none;width:100%;flex-direction:column}
  .main-nav.open{display:flex}
  .search-box{width:100%}
  .curator,.detail-hero,.gramophone-wrap,.app-hero{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .notes-grid{column-count:2}
  .layout{grid-template-columns:1fr}
  .side-nav{position:static}
  .reader{padding:32px 24px}
  .reader-toolbar{position:static;flex-direction:row;margin:16px auto;justify-content:center;max-width:560px}
}
@media (max-width:560px){
  .notes-grid{column-count:1}
  .book-grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:14px}
  .stats{grid-template-columns:1fr 1fr}
  section{padding:40px 0}
}