/* 大厅布局与卡片 · 幽暗史诗（金线描边 + 深色羊皮纸，Cinzel 标题 / Spectral 正文） */
.wrap{max-width:1160px;margin:0 auto;padding:0 44px}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);
  background:rgba(16,13,9,.88);backdrop-filter:blur(8px)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700;
  font-size:20px;color:var(--gold2);letter-spacing:2px}
.brand .logo{width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--gold);background:rgba(200,162,75,.06)}
.brand .logo svg{display:block}
.brand small{display:block;font-family:var(--serif);font-size:10.5px;letter-spacing:5px;
  color:var(--dim);margin-top:2px}
.topbar .sp{margin-left:auto;font-size:13px;letter-spacing:3px;color:var(--dim)}
.topbar .sp b{font-family:var(--disp);color:var(--gold2)}

/* 头部 */
.hero{position:relative;padding:70px 0 60px;text-align:center;border-bottom:1px solid var(--line)}
.hero .orn{color:var(--gold);opacity:.85;margin-bottom:22px}
.hero .kicker{font-size:13px;letter-spacing:6px;color:var(--dim);margin-bottom:18px}
.hero h1{font-family:var(--disp);font-weight:700;font-size:56px;line-height:1.1;
  color:#F5EAD0;letter-spacing:1px;text-shadow:0 2px 0 rgba(0,0,0,.6);margin-bottom:8px}
.hero h1 em{font-style:normal;color:var(--gold2)}
.hero .sub{font-size:17px;color:var(--dim);max-width:640px;margin:18px auto 0}

/* 目录标题 */
.head{text-align:center;padding:54px 0 0}
.head h2{font-family:var(--disp);font-weight:600;font-size:30px;color:var(--gold2);
  margin-bottom:10px;letter-spacing:2px}
.head p{color:var(--dim);font-size:14px;letter-spacing:2px}

/* 卡片网格 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;padding:36px 0 60px}
.card{display:flex;flex-direction:column;position:relative;background:var(--surface);
  border:1px solid var(--line);transition:border-color .2s ease,transform .2s ease}
.card::before{content:"";position:absolute;inset:5px;border:1px solid rgba(200,162,75,.16);pointer-events:none}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

.cover{height:142px;margin:14px 14px 0;display:grid;place-items:center;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 40%, rgba(200,162,75,.16), transparent 70%), var(--surface-2)}
.cover .icon{font-size:54px;line-height:1;filter:drop-shadow(0 0 18px rgba(200,162,75,.35));
  display:flex;align-items:center;justify-content:center}
/* 内联 SVG 图标（不依赖 emoji 字体） */
.cover .icon svg{width:52px;height:52px;display:block}
.accent-amber .cover{background:radial-gradient(circle at 50% 40%, rgba(200,120,40,.18), transparent 70%), #17100A}
.accent-violet .cover{background:radial-gradient(circle at 50% 40%, rgba(122,92,214,.18), transparent 70%), #120F1A}
.accent-red .cover{background:radial-gradient(circle at 50% 40%, rgba(160,50,50,.20), transparent 70%), #150E0E}
.accent-bone .cover{background:radial-gradient(circle at 50% 40%, rgba(233,227,210,.16), transparent 70%), #17140F}
.accent-teal .cover{background:radial-gradient(circle at 50% 40%, rgba(14,159,110,.18), transparent 70%), #0F1714}
.accent-rose .cover{background:radial-gradient(circle at 50% 40%, rgba(212,83,126,.18), transparent 70%), #1A0F14}

.body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;text-align:center}
.ttl{font-family:var(--disp);font-weight:600;font-size:19px;color:#F0E3C4;letter-spacing:1px}
.tagline{margin-top:5px;font-size:12.5px;letter-spacing:3px;color:var(--dim)}
.desc{margin-top:14px;font-size:14px;color:var(--dim);flex:1}
.tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:16px}
.chip{font-size:11.5px;letter-spacing:1px;color:var(--dim);border:1px solid var(--line);
  padding:3px 11px;background:rgba(200,162,75,.04)}
.go{margin:18px auto 0;display:inline-flex;align-items:center;gap:8px;font-weight:600;
  font-family:var(--serif);font-size:14px;letter-spacing:2px;color:var(--gold2);
  border:1px solid var(--gold);padding:10px 24px;
  background:linear-gradient(180deg,rgba(200,162,75,.16),rgba(200,162,75,.03))}
.card:hover .go{background:linear-gradient(180deg,rgba(200,162,75,.30),rgba(200,162,75,.09))}

.empty{color:var(--dim);padding:30px 0;text-align:center}

footer{border-top:1px solid var(--line);padding:34px 0 46px;
  font-size:12.5px;letter-spacing:3px;color:var(--dim)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
footer .sp{margin-left:auto;color:var(--leather)}

@media (prefers-reduced-motion:reduce){
  .card{transition:none}
  .card:hover{transform:none}
}
@media (max-width:900px){
  .wrap{padding:0 22px}
  .hero h1{font-size:40px}
}
@media (max-width:520px){
  .hero h1{font-size:31px}
  .grid{grid-template-columns:1fr}
}