:root { --ink:#17231f; --muted:#6a7671; --deep:#12231f; --accent:#d59b49; --shell:#f1f2ec; --paper:#fffefa; --line:rgba(18,35,31,.13); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--shell); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
.site-header { display:flex; align-items:center; min-height:72px; padding:12px clamp(18px,5vw,70px); color:white; background:var(--deep); }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; color:var(--deep); background:var(--accent); border-radius:14px; font-weight:900; }
.brand strong,.brand small { display:block; }
.brand small { margin-top:2px; color:#acb9b3; font-size:10px; letter-spacing:.08em; }
.hero { padding:clamp(44px,6vw,76px) clamp(20px,8vw,120px) 58px; color:white; background:radial-gradient(circle at 82% 16%,rgba(213,155,73,.22),transparent 26rem),linear-gradient(135deg,#17382f,#12231f 68%); }
.eyebrow { margin:0 0 14px; color:#efbd76; font-size:12px; font-weight:900; letter-spacing:.15em; }
.hero h1 { max-width:820px; margin:0; font:700 clamp(32px,4vw,52px)/1.08 Georgia,"Times New Roman",serif; }
.hero>p:not(.eyebrow) { max-width:700px; margin:20px 0 0; color:#cbd6d1; font-size:16px; line-height:1.8; }
.search-box { display:flex; align-items:center; gap:10px; max-width:620px; margin-top:34px; padding:0 17px; color:#50605a; background:white; border-radius:14px; box-shadow:0 14px 35px rgba(0,0,0,.16); }
.search-box span { font-size:25px; }
.search-box input { width:100%; height:54px; color:var(--ink); background:transparent; border:0; outline:0; font:inherit; }
.library { max-width:1180px; margin:auto; padding:58px 22px 90px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.section-heading p { margin:0 0 5px; color:#9a6a2c; font-size:11px; font-weight:900; letter-spacing:.16em; }
.section-heading h2 { margin:0; font:700 34px/1.1 Georgia,"Songti SC",serif; }
.section-heading>span { color:var(--muted); font-size:13px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0; }
.filters button { padding:8px 14px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:999px; cursor:pointer; }
.filters button.active { color:white; background:var(--deep); border-color:var(--deep); }
.catalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.card { display:grid; grid-template-rows:210px 1fr; min-height:430px; overflow:hidden; color:inherit; background:var(--paper); border:1px solid var(--line); border-radius:19px; box-shadow:0 10px 28px rgba(35,48,43,.08); text-decoration:none; transition:.2s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 18px 38px rgba(35,48,43,.14); }
.cover { position:relative; overflow:hidden; background:#e5e8e1; }
.cover img { width:100%; height:100%; object-fit:cover; object-position:top; filter:saturate(.9); transition:.3s ease; }
.card:hover .cover img { transform:scale(1.025); }
.badge { position:absolute; top:14px; left:14px; padding:7px 10px; color:white; background:rgba(18,35,31,.9); border-radius:999px; font-size:11px; font-weight:800; }
.card-body { display:flex; flex-direction:column; padding:20px; }
.meta { margin:0 0 9px; color:#9a6a2c; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.card h3 { margin:0; font:700 22px/1.18 Georgia,"Times New Roman",serif; }
.subtitle { margin:8px 0 0; color:var(--muted); font-size:14px; }
.description { margin:16px 0; color:#58645f; font-size:13px; line-height:1.65; }
.open { margin-top:auto; color:#8b5e26; font-size:13px; font-weight:800; }
.empty { padding:50px; color:var(--muted); background:white; border:1px dashed var(--line); border-radius:16px; text-align:center; }
footer { padding:30px; color:var(--muted); text-align:center; font-size:12px; }
@media(max-width:600px){.site-header{min-height:64px}.hero{padding-top:48px;padding-bottom:58px}.hero h1{font-size:38px}.library{padding-top:42px}.card{grid-template-rows:190px 1fr}.section-heading h2{font-size:29px}}