/* OpenRoad — FIELD GEAR CATALOG
   视觉手：utilitarian military gear spec-sheet（军旅装备规格目录）
   直角 / 顶部色条规格卡 / 等宽参数行 / 窄体大写标题 —— 无圆角 无阴影 无动效 */
:root {
  --ground: #ece7da;
  --ground-2: #e2dccb;
  --plate: #f4f1e7;
  --type: #2a2a22;
  --type-dim: #6b6b5e;
  --olive: #4a5a3a;
  --olive-2: #3b482e;
  --signal: #d0763a;
  --rule: #d5cfc0;
  --cond: "Arial Narrow", "Helvetica Neue", Impact, "PingFang SC", "Microsoft YaHei", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--type);
  background: var(--ground);
}
a { color: var(--olive); text-decoration: none; }
a:hover { color: var(--signal); }
img { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  line-height: 1.1;
}
.shell { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ============ 页首条 ============ */
.masthead {
  background: var(--olive);
  border-bottom: 3px solid var(--signal);
  position: sticky; top: 0; z-index: 30;
}
.masthead__row { display: flex; align-items: center; gap: 22px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: #f4f1e7; }
.brand:hover { color: #fff; }
.brand__mark {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  border: 1px solid #f4f1e7; padding: 3px 6px;
}
.brand__name {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; font-size: 1.1rem;
}
.navlist { display: flex; margin-left: auto; }
.navlist a {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .85rem; font-weight: 700; color: #ced6c3;
  padding: 19px 14px; border-left: 1px solid rgba(244, 241, 231, .18);
}
.navlist a:hover { color: #fff; background: var(--olive-2); }
.navlist a.is-on { color: #fff; background: var(--signal); }
.langsw {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: #f4f1e7; border: 1px solid rgba(244, 241, 231, .5); padding: 6px 9px;
}
.langsw:hover { background: #f4f1e7; color: var(--olive); }

.main { min-height: 60vh; }

/* ============ 目录封面 ============ */
.banner {
  background: var(--olive-2);
  color: #f4f1e7;
  border-bottom: 1px solid var(--rule);
  padding: 64px 0 56px;
}
.banner__kicker {
  margin: 0 0 14px; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--signal);
}
.banner__head {
  margin: 0 0 18px; padding-left: 18px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; max-width: 20ch;
  border-left: 6px solid var(--signal);
}
.banner__lede { margin: 0 0 28px; max-width: 62ch; color: #d9ddcc; font-size: 1rem; }
.cta {
  display: inline-block; background: var(--signal); color: #fff;
  border: 1px solid #b8602c; padding: 13px 28px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; font-size: .86rem;
}
.cta:hover { background: #b8602c; color: #fff; }

/* ============ 区块 ============ */
.band { padding: 44px 0; }
.band__label {
  margin: 0 0 20px; padding-bottom: 8px;
  font-size: 1.05rem; letter-spacing: .12em;
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--rule);
}
.band__label::before { content: "//"; font-family: var(--mono); font-size: .8rem; color: var(--signal); letter-spacing: 0; }

/* 分类索引（编号徽章 + 装备标签） */
.kitgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.kit {
  background: var(--plate); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.kit:hover { background: var(--ground-2); }
.kit__no { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--signal); }
.kit__name { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 1.02rem; color: var(--type); }
.kit__qty { font-family: var(--mono); font-size: .72rem; color: var(--type-dim); }
.kit__qty::after { content: " UNITS"; }

/* ============ 规格卡 ============ */
.riggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.rig { background: var(--plate); border-top: 3px solid var(--signal); display: flex; flex-direction: column; }
.rig__shot { display: block; aspect-ratio: 16 / 9; background: var(--ground-2); border-bottom: 1px solid var(--rule); overflow: hidden; }
.rig__shot img { width: 100%; height: 100%; object-fit: cover; }
.rig__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.rig__class { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--type-dim); }
.rig__class b { color: var(--signal); font-weight: 400; }
.rig__name { font-family: var(--cond); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 1.06rem; line-height: 1.25; color: var(--type); }
.rig__name:hover { color: var(--signal); }
.rig__specs { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.rig__spec { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.rig__spec dt { margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--type-dim); }
.rig__spec dd { margin: 0; font-family: var(--mono); font-size: .78rem; color: var(--type); text-align: right; }
.rig__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-family: var(--mono); font-size: .78rem; }
.rig__grade { color: var(--olive); }
.rig__cost { color: var(--type); font-weight: 600; }

/* ============ 页头 ============ */
.sheet { background: var(--ground-2); border-bottom: 1px solid var(--rule); padding: 34px 0 30px; }
.sheet__title { margin: 0 0 8px; padding-left: 14px; font-size: 1.7rem; letter-spacing: .08em; border-left: 6px solid var(--olive); }
.sheet__sub { margin: 0; padding-left: 20px; color: var(--type-dim); max-width: 70ch; }

/* ============ 筛选条 ============ */
.chips { display: flex; flex-wrap: wrap; margin-bottom: 24px; border: 1px solid var(--rule); }
.chip {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; background: var(--plate); color: var(--type-dim);
  border-right: 1px solid var(--rule);
}
.chip:hover { background: var(--ground-2); color: var(--type); }
.chip.is-on { background: var(--olive); color: #f4f1e7; }

.void { color: var(--type-dim); font-family: var(--mono); font-size: .85rem; padding: 26px 0; }

/* ============ 路径 ============ */
.trail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 24px 0 18px; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--type-dim); }
.trail a { color: var(--olive); }
.trail span[aria-hidden] { color: var(--rule); }

/* ============ 装备档案 ============ */
.dossier { padding-bottom: 52px; }
.dossier__head { margin-bottom: 26px; }
.dossier__class { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.dossier__title { margin: 10px 0 14px; font-size: clamp(1.6rem, 3.6vw, 2.4rem); letter-spacing: .04em; line-height: 1.05; }
.dossier__meta { display: flex; flex-wrap: wrap; margin-bottom: 16px; border: 1px solid var(--rule); }
.dossier__meta > span {
  padding: 7px 14px; background: var(--plate); border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--type-dim);
}
.dossier__meta > span:last-child { border-right: 0; }
.dossier__meta strong { color: var(--type); }
.dossier__grade { color: var(--signal); }
.dossier__cost { color: var(--type); font-weight: 600; }
.dossier__lede { margin: 0; font-size: 1rem; max-width: 76ch; }
.dossier__byline {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--type-dim); max-width: 76ch;
}
.dossier__layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.dossier__body { display: flex; flex-direction: column; gap: 20px; }

/* 参数表 */
.specsheet { background: var(--plate); border: 1px solid var(--rule); border-top: 3px solid var(--olive); padding-bottom: 16px; position: sticky; top: 78px; }
.specsheet__title { margin: 0; padding: 12px 16px; background: var(--olive); color: #f4f1e7; font-size: .9rem; letter-spacing: .12em; }
.specsheet__rows { margin: 0; }
.specrow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--rule); }
.specrow dt { margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--type-dim); }
.specrow dd { margin: 0; font-family: var(--mono); font-size: .8rem; color: var(--type); text-align: right; }
.specsheet__foot { margin: 12px 16px 0; padding-top: 10px; border-top: 1px dashed var(--rule); font-size: .82rem; color: var(--type-dim); }
.specsheet__foot strong { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }

/* 正负清单 */
.tally { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tally__plus, .tally__minus { background: var(--plate); border-top: 3px solid var(--olive); padding: 16px 18px; }
.tally__minus { border-top-color: var(--signal); }
.tally__label { margin: 0 0 10px; font-size: .92rem; letter-spacing: .1em; }
.tally__label--plus { color: var(--olive); }
.tally__label--minus { color: var(--signal); }
.tally ul { margin: 0; padding: 0; list-style: none; }
.tally li { position: relative; padding: 6px 0 6px 20px; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.tally li::before { content: "+"; position: absolute; left: 0; font-family: var(--mono); color: var(--olive); }
.tally__minus li::before { content: "−"; color: var(--signal); }

.callout { background: var(--ground-2); border-left: 6px solid var(--signal); padding: 18px 20px; }
.callout__title { margin: 0 0 8px; font-size: .92rem; letter-spacing: .12em; color: var(--signal); }
.callout__text { margin: 0; font-size: .98rem; }

/* ============ 评测正文（深入解读 + 常见问题） ============ */
.fieldnotes { margin-top: 38px; }
.fieldnotes__title,
.qa__title {
  margin: 0 0 16px; padding-bottom: 8px;
  font-size: 1rem; letter-spacing: .12em;
  border-bottom: 1px solid var(--rule);
}
.fieldnotes__block { border-left: 3px solid var(--rule); padding: 0 0 0 16px; margin: 0 0 26px; }
.fieldnotes__block:last-child { margin-bottom: 0; }
.fieldnotes__head {
  margin: 0 0 10px; font-size: .95rem; letter-spacing: .06em;
  color: var(--olive-2);
}
.fieldnotes__block p { margin: 0 0 12px; max-width: 78ch; }
.fieldnotes__block p:last-child { margin-bottom: 0; }

.qa { margin-top: 38px; }
.qa__list { border-top: 1px solid var(--rule); }
.qa__item { border-bottom: 1px solid var(--rule); background: var(--plate); }
.qa__q {
  cursor: pointer; padding: 13px 16px 13px 34px; position: relative;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; font-size: .93rem; line-height: 1.3;
}
.qa__q::before { content: "+"; position: absolute; left: 14px; font-family: var(--mono); color: var(--signal); }
.qa__item[open] .qa__q::before { content: "−"; }
.qa__q::-webkit-details-marker { display: none; }
.qa__a { margin: 0; padding: 0 16px 15px 34px; max-width: 78ch; font-size: .95rem; color: var(--type); }

/* 同类清单 */
.stacks { margin-top: 38px; }
.stacks__title { margin: 0 0 14px; padding-bottom: 8px; font-size: 1rem; letter-spacing: .12em; border-bottom: 1px solid var(--rule); }
.stacks__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.stack { background: var(--plate); border-top: 3px solid var(--olive); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.stack__no { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--signal); }
.stack__name { font-family: var(--cond); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: .95rem; line-height: 1.25; color: var(--type); }
.stack__grade { font-family: var(--mono); font-size: .74rem; color: var(--type-dim); }

/* ============ 对比矩阵 ============ */
.matrix__frame { overflow-x: auto; background: var(--plate); border: 1px solid var(--rule); }
.matrix { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 760px; }
.matrix th, .matrix td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.matrix thead th { background: var(--olive); color: #f4f1e7; font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; white-space: nowrap; }
.matrix tbody tr:nth-child(even) { background: var(--ground-2); }
.matrix tbody tr:hover { background: #e8e2d1; }
.matrix td:nth-child(n+3) { font-family: var(--mono); font-size: .8rem; }
.matrix td a { font-weight: 700; }

/* ============ 说明页 ============ */
.brief { background: var(--plate); border-left: 6px solid var(--olive); padding: 26px 28px; max-width: 780px; }
.prose { line-height: 1.68; }
.prose p { margin: 0 0 15px; }
.prose ul { margin: 0 0 15px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose h2 {
  margin: 28px 0 10px; padding-bottom: 7px;
  font-size: .92rem; letter-spacing: .12em; color: var(--olive);
  border-bottom: 1px solid var(--rule);
}
.prose h2:first-of-type { margin-top: 2px; }
.prose a { text-decoration: underline; }
.prose strong { color: var(--type); }
.prose em { font-style: italic; color: var(--type-dim); }
.prose__note {
  margin: 0 0 20px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--type-dim);
}

/* ============ 页脚 ============ */
.colophon { background: var(--type); color: #c9c6b8; padding: 34px 0 28px; margin-top: 24px; border-top: 3px solid var(--signal); }
.colophon__row { display: flex; flex-direction: column; gap: 12px; }
.colophon__brand { margin: 0; font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: 1.05rem; color: #f4f1e7; }
.colophon__nav { display: flex; flex-wrap: wrap; gap: 18px; }
.colophon__nav a { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #c9c6b8; }
.colophon__nav a:hover { color: var(--signal); }
.colophon__fine { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid rgba(244, 241, 231, .14); font-family: var(--mono); font-size: .72rem; color: #8b8878; }

@media (max-width: 820px) {
  .dossier__layout { grid-template-columns: 1fr; }
  .specsheet { position: static; }
  .tally { grid-template-columns: 1fr; }
  .masthead__row { flex-wrap: wrap; height: auto; padding: 10px 0; }
  .navlist { order: 3; width: 100%; margin-left: 0; }
  .navlist a:first-child { border-left: 0; }
}