/* 方向 A：檔案櫃 / ARCHIVE DRAWER
   令牌直接沿用 VC 站「地窖石壁」主題，讓門戶與站群同一套紙感。 */

:root{
  --bg:#EFE8DA; --panel:#FBF8F1; --panel2:#E7DECD; --line:#BFAE93;
  --ink:#221A13; --ink2:#4C4136; --accent:#96271E; --accent2:#3C5740;
  --serif:"Noto Serif CJK TC","Source Han Serif TC","Songti TC","STSong",Georgia,serif;
  --sans:system-ui,-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --w:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.75 var(--sans);
  /* 极轻的纸纹：两组错位细斜线，肉眼近不可见，只为避免大面积纯色发闷 */
  background-image:
    repeating-linear-gradient(78deg, rgba(90,70,40,.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-12deg, rgba(90,70,40,.014) 0 1px, transparent 1px 6px);
}
a{color:var(--accent); text-underline-offset:.22em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
img{max-width:100%; height:auto; display:block}

/* ── 页头：细窄书脊式，不是大 banner ───────────────────────── */
.bar{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  max-width:var(--w); margin:0 auto; padding:20px 24px;
  border-bottom:1px solid var(--line);
}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font:600 1rem/1 var(--serif); letter-spacing:.14em; color:var(--ink); text-decoration:none;
}
.brand svg{width:22px; height:22px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.bar nav{margin-left:auto; display:flex; gap:20px; font-size:.86rem; letter-spacing:.06em}
.bar nav a{color:var(--ink2); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent}
.bar nav a:hover{color:var(--accent); border-bottom-color:var(--accent)}

main{max-width:var(--w); margin:0 auto; padding:0 24px}

/* ── 引言：一句话交代来源与规模 ─────────────────────────── */
.intro{padding:56px 0 34px; max-width:52ch}
.intro h1{
  margin:0 0 14px; font:600 clamp(2rem,4.6vw,2.9rem)/1.1 var(--serif);
  letter-spacing:.03em; text-wrap:balance;
}
.lede{margin:0; color:var(--ink2); font-size:1.02rem}

/* ── 索引卡 ─────────────────────────────────────────────── */
.drawer{list-style:none; margin:0 0 64px; padding:0; display:flex; flex-direction:column; gap:18px}

.rec{
  display:grid; grid-template-columns:96px minmax(0,1fr) 336px;
  background:var(--panel); border:1px solid var(--line); border-radius:5px;
  position:relative; overflow:hidden;
  box-shadow:0 1px 0 rgba(34,26,19,.05);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.rec:hover{transform:translateY(-1px); box-shadow:0 3px 0 rgba(34,26,19,.09); border-color:var(--accent2)}

/* 左缘打孔：档案卡被穿在环上 */
.rec::before{
  content:""; position:absolute; left:11px; top:0; bottom:0; width:9px;
  background-image:radial-gradient(circle at 50% 50%, var(--bg) 0 3.1px, var(--line) 3.1px 4.4px, transparent 4.4px);
  background-size:9px 34px; background-repeat:repeat-y; opacity:.85;
}

/* 竖排编号：把「这个库有多大」做成书脊标签 */
.rail{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:22px 10px 22px 30px; border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.rail .n{font:600 1.9rem/1 var(--serif); letter-spacing:.02em; writing-mode:vertical-rl; color:var(--ink)}
.rail .lbl{font:.72rem/1 var(--mono); letter-spacing:.22em; color:var(--ink2); writing-mode:vertical-rl}

.body{padding:26px 26px 24px}
.body h2{
  margin:0 0 2px; font:600 1.42rem/1.35 var(--serif); letter-spacing:.02em;
}
.body h2 a{color:var(--ink); text-decoration:none}
.body h2 a:hover{color:var(--accent)}
.body h2 a::after{content:""; position:absolute; inset:0}   /* 整张卡是点击区，语义仍只有标题一个链接 */
.out{width:15px; height:15px; margin-left:4px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.55}
.en{margin:0 0 12px; font:.76rem/1 var(--mono); letter-spacing:.2em; color:var(--ink2)}
.desc{margin:0 0 20px; font-size:.95rem; color:var(--ink2); max-width:46ch}

.specs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px 16px; margin:0; border-top:1px solid var(--line); padding-top:14px}
.specs > div{display:flex; flex-direction:column-reverse; gap:3px}
.specs dt{font:.75rem/1.3 var(--mono); letter-spacing:.12em; color:var(--ink2)}
.specs dd{margin:0; font:600 1.18rem/1 var(--mono); font-variant-numeric:tabular-nums}

.plate{margin:0; border-left:1px solid var(--line); background:var(--panel2); padding:14px}
.plate img{width:100%; height:100%; object-fit:cover; min-height:200px; border:1px solid var(--line); background:#1A1614}

/* 待编目：虚线，明确不是条目 */
.rec--open{grid-template-columns:96px minmax(0,1fr); border-style:dashed; background:transparent; box-shadow:none}
.rec--open .rail{background:transparent}
.rec--open .body h2,.rec--open .en,.rec--open .desc{color:var(--ink2)}

/* ── 关于 ─────────────────────────────────────────────── */
.about{border-top:1px solid var(--line); padding:30px 0 56px}
.about h2{margin:0 0 10px; font:600 1.06rem/1.4 var(--serif); letter-spacing:.08em}
.about p{margin:0; font-size:.94rem; color:var(--ink2); max-width:62ch}

/* ── 页脚 ─────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); background:var(--panel2)}
footer p{max-width:var(--w); margin:0 auto; padding:0 24px}
footer p:first-child{padding-top:22px; font-size:.86rem; color:var(--ink2)}
footer .links{padding-bottom:24px; display:flex; flex-wrap:wrap; gap:18px; font-size:.86rem; align-items:baseline}
footer .links span{margin-left:auto; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--ink2)}

/* ── 窄屏：书脊变横眉，图移到卡下 ───────────────────────── */
@media (max-width:880px){
  .rec{grid-template-columns:1fr}
  .rail{flex-direction:row; gap:14px; padding:14px 18px 14px 32px; border-right:0; border-bottom:1px solid var(--line)}
  .rail .n,.rail .lbl{writing-mode:horizontal-tb}
  .rail .n{font-size:1.5rem}
  .body{padding:20px 18px}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px}
  .plate{border-left:0; border-top:1px solid var(--line); max-height:230px; overflow:hidden}
  .plate img{min-height:0; height:230px}
  .rec::before{left:12px}
}
@media (max-width:560px){
  .intro{padding:34px 0 24px}
  .bar{gap:14px; padding:16px 18px}
  .bar nav{gap:14px; font-size:.82rem}
  footer .links span{margin-left:0; width:100%}
}

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