/* pianzi-huang.cn — 传统黄色系色卡册：宣纸底 + 墨色字 + 赭石线 */
:root{
  --xuan:#fbf5e7;
  --xuan-2:#f4ecd9;
  --card:#fffdf7;
  --mo:#2d2416;
  --mo-2:#6c5f46;
  --zhe:#9a6b34;
  --zhe-2:#c89a5c;
  --line:#e2d7bd;
  --line-2:#cdbd9a;
  --zhu:#a8372a;
  --kai:"Kaiti SC","STKaiti","KaiTi",serif;
  --num:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--xuan);color:var(--mo);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.8;
}
.scroll{max-width:1200px;margin:0 auto;padding:0 20px}

/* ── 封面条 ─────────────────────────────────────── */
.cover{
  padding:40px 0 28px;
  background:
    linear-gradient(90deg,rgba(200,154,92,.14),transparent 46%),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(226,215,189,.5) 31px 32px);
  border-bottom:2px solid var(--line-2);
}
.cover .seal{
  display:inline-block;font-family:var(--kai);font-size:13px;color:#fff;background:var(--zhu);
  padding:3px 11px;border-radius:3px;letter-spacing:.3em;margin-bottom:16px;
}
h1{
  margin:0;font-family:var(--kai);font-weight:700;line-height:1.2;
  font-size:clamp(30px,8vw,56px);letter-spacing:.04em;
}
h1 .sub{
  display:block;margin-top:12px;font-family:inherit;font-weight:400;letter-spacing:.08em;
  font-size:clamp(14px,3.4vw,20px);color:var(--zhe);
}
.pitch{margin:18px 0 0;color:var(--mo-2);font-size:15.5px;max-width:56ch}
.square{
  margin:22px 0 0;padding:15px 18px;background:var(--card);
  border:1px solid var(--line-2);border-left:5px solid var(--zhe);border-radius:0 8px 8px 0;
  font-size:14.5px;color:#54492f;
}
.square b{color:var(--zhe)}

/* ── 工具条 ─────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:5;background:rgba(251,245,231,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
  padding:13px 0;
}
.bar .inner{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.fld{flex:1 1 180px;min-width:150px}
.fld.narrow{flex:0 1 190px}
label{display:block;font-size:12px;color:var(--mo-2);margin-bottom:5px;letter-spacing:.07em}
input[type=text],select{
  font:inherit;font-size:15px;width:100%;padding:8px 11px;background:#fff;color:var(--mo);
  border:1px solid var(--line-2);border-radius:5px;
}
input[type=text]:focus,select:focus{outline:2px solid var(--zhe);outline-offset:1px}
.hits{font-family:var(--num);font-size:12.5px;color:var(--mo-2);padding-bottom:9px}
.hits b{color:var(--zhu);font-size:16px}

/* ── 色卡册主体 ─────────────────────────────────── */
.spread{display:grid;gap:26px;grid-template-columns:minmax(0,1fr) 300px;padding:26px 0 10px}
@media (max-width:880px){ .spread{grid-template-columns:1fr} }

.tiles{
  display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));
  margin:0;padding:0;list-style:none;
}
.tile{
  cursor:pointer;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;
  background:var(--card);padding:0;font:inherit;text-align:left;width:100%;display:block;
}
.tile:hover{border-color:var(--zhe)}
.tile[aria-pressed=true]{border-color:var(--zhu);box-shadow:0 0 0 2px rgba(168,55,42,.28)}
.tile .swatch{display:block;height:58px;border-bottom:1px solid rgba(45,36,22,.1)}
.tile .cap{display:block;padding:6px 8px 8px}
.tile .nm{display:block;font-family:var(--kai);font-size:15px;line-height:1.3;color:var(--mo)}
.tile .hx{display:block;font-family:var(--num);font-size:10.5px;color:var(--mo-2);margin-top:2px}
.nothing{grid-column:1/-1;padding:34px 4px;color:var(--mo-2)}

/* ── 右侧详情 ───────────────────────────────────── */
.plate{align-self:start}
@media (min-width:881px){ .plate{position:sticky;top:78px} }
.plate .box{background:var(--card);border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.plate .big{height:120px;display:block}
.plate .body{padding:16px 17px}
.plate .nm{font-family:var(--kai);font-size:25px;line-height:1.25;margin:0}
.plate .py{font-family:var(--num);font-size:12px;color:var(--mo-2);letter-spacing:.14em;margin:3px 0 14px}
.vals{margin:0;padding:0}
.vals dt{font-size:11px;color:var(--mo-2);letter-spacing:.1em}
.vals dd{
  margin:1px 0 11px;font-family:var(--num);font-size:14.5px;color:var(--mo);
  word-break:break-all;
}
.near{border-top:1px solid var(--line);margin-top:4px;padding-top:13px}
.near h3{margin:0 0 9px;font-size:12px;color:var(--mo-2);letter-spacing:.1em;font-weight:400}
.nearlist{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.nearlist li{flex:1 1 0;min-width:0}
.nearlist button{
  display:block;width:100%;padding:0;border:1px solid var(--line-2);border-radius:5px;
  background:var(--card);cursor:pointer;font:inherit;overflow:hidden;
}
.nearlist button:hover{border-color:var(--zhe)}
.nearlist .sw{display:block;height:34px}
.nearlist .tx{display:block;font-family:var(--kai);font-size:12px;padding:4px 3px;line-height:1.3}

/* ── 文段 ───────────────────────────────────────── */
section.leaf{padding:38px 0;border-top:1px solid var(--line)}
section.leaf h2{margin:0 0 10px;font-family:var(--kai);font-size:clamp(21px,4.8vw,30px);font-weight:700;letter-spacing:.03em}
section.leaf p{margin:0 0 14px;max-width:70ch}
section.leaf p.dim{color:var(--mo-2);font-size:15px}
.ledger{margin:0;padding:0;list-style:none}
.ledger li{padding:12px 0;border-bottom:1px dotted var(--line-2);font-size:15px}
.ledger li:last-child{border-bottom:0}
.ledger b{color:var(--zhe)}
code{font-family:var(--num);font-size:13.5px;background:var(--xuan-2);padding:1px 5px;border-radius:3px}

footer{border-top:2px solid var(--line-2);padding:26px 0 44px;color:var(--mo-2);font-size:13.5px}
footer a{color:var(--zhe)}

/* ── 404 ────────────────────────────────────────── */
.blank{padding:60px 0 86px;max-width:620px}
.blank .sig{font-family:var(--num);letter-spacing:.2em;color:var(--zhu);font-size:12.5px}
.blank p{color:var(--mo-2)}
.blank a.ret{
  display:inline-block;margin-top:16px;padding:10px 22px;border-radius:5px;
  background:var(--zhe);color:#fff;text-decoration:none;font-size:15px;
}

@media (max-width:520px){
  .scroll{padding:0 14px}
  body{font-size:15.5px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
  .tile .swatch{height:48px}
  section.leaf{padding:30px 0}
}