@font-face{font-family:"ArtSerif";src:url("fonts/serif.woff2") format("woff2");font-weight:400 900;font-display:swap}

:root{
  --ink:#241e19; --ink-2:#5a5047; --ink-3:#8b8075; --paper:#f3ece0; --card:rgba(255,252,246,.78);
  --line:rgba(70,50,30,.14); --accent:#d9692b; --night:#14110e; --night-2:#1e1a16;
  --serif:"ArtSerif","Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .14  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:var(--sans);color:var(--ink);line-height:1.75;font-size:16px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}

/* ---------- shared top bar ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:10px max(14px,env(safe-area-inset-left)) 10px max(14px,env(safe-area-inset-right))}
.logo{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.06em;white-space:nowrap;display:flex;align-items:baseline;gap:5px}
.logo b{font-size:23px;color:var(--accent);font-weight:900}
.icon-btn{height:38px;padding:0 14px;border-radius:999px;border:1px solid currentColor;background:transparent;
  display:inline-flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}
.icon-btn svg{width:16px;height:16px}
.spacer{flex:1}

/* ---------- drawer (目录) ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,8,6,.5);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:41;background:#f6f0e6;color:var(--ink);
  transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;
  box-shadow:-20px 0 60px -20px rgba(0,0,0,.5)}
.drawer::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.35;pointer-events:none}
.drawer.open{transform:none}
.dr-head{position:relative;padding:18px 18px 12px;border-bottom:1px solid var(--line)}
.dr-title{display:flex;align-items:center;justify-content:space-between;font-family:var(--serif);font-size:22px;font-weight:700}
.dr-close{border:0;background:none;font-size:26px;line-height:1;padding:4px 6px}
.dr-search{width:100%;margin-top:12px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fffaf2;padding:0 12px;font:inherit;font-size:15px}
.dr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:13px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:#fffaf2;white-space:nowrap}
.chip.on{background:var(--ink);color:#f6f0e6;border-color:var(--ink)}
.dr-list{position:relative;flex:1;overflow:auto;padding:6px 8px 24px;overscroll-behavior:contain}
.dr-item{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:10px}
.dr-item:hover,.dr-item.cur{background:rgba(70,50,30,.08)}
.dr-item img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:#e7ddcf}
.dr-item .num{font-family:var(--serif);font-size:13px;color:var(--ink-3);width:22px;flex:none}
.dr-item .nm{font-size:15px;line-height:1.3}
.dr-item .en{font-size:12px;color:var(--ink-3);line-height:1.3}
.dr-item .heart{margin-left:auto;color:var(--accent)}
.dr-foot{position:relative;padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--ink-2)}
.dr-foot a,.dr-foot button{border:0;background:none;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.25)}
.dr-empty{padding:30px 12px;color:var(--ink-3);font-size:14px;text-align:center}

/* ---------- info sheet & lightbox ---------- */
.sheet{position:fixed;left:50%;top:50%;z-index:42;width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;
  transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:.25s;background:#f6f0e6;border-radius:18px;padding:24px 22px 20px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.sheet.open{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.sheet h3{font-family:var(--serif);font-size:24px;margin:0 0 4px}
.sheet .sub{color:var(--ink-3);font-size:14px;margin:0 0 14px}
.lens{display:grid;grid-template-columns:52px 1fr;gap:2px 12px;padding:12px 0;border-top:1px solid var(--line)}
.lens .k{grid-row:span 2;font-family:var(--serif);font-size:24px;font-weight:700;color:var(--accent)}
.lens .q{font-weight:600;font-size:15px}
.lens p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.65}
.sheet .ok{margin-top:10px;width:100%;height:44px;border-radius:12px;border:0;background:var(--ink);color:#f6f0e6;font-size:15px}

.lb{position:fixed;inset:0;z-index:60;background:rgba(12,10,8,.94);display:none;align-items:center;justify-content:center;padding:4vh 3vw;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:86vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb .cap{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;color:#e9dfd2;font-size:14px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}