/* ============================================================
   dieselnsteelguide.wiki — 视觉：Bulacan 夜路 × 吉普尼彩绘
   依据 DESIGN-BRIEF.md 从零重写（禁舰队同模 / 禁近白底 / 视觉恒定）
   结构件类名沿用 build_site.py 的输出契约，不自造。
   ============================================================ */

/* ---- fonts（自托管，禁 Google Fonts） ---- */
@font-face{font-family:Anton;src:url(assets/fonts/Anton-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/Barlow-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/Barlow-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/Barlow-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/Barlow-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:"MonoTab";src:url(assets/fonts/RobotoMono-400.woff2) format('woff2');font-weight:400 600;font-display:swap}

:root{
  /* 沥青夜路 */
  --asphalt:#14161c; --road:#1b1e26; --plate:#232733; --plate-2:#2b3040;
  --line:#3b4254; --line-soft:#2a2f3d;
  /* 铬饰 */
  --chrome:#e9eef4; --chrome-dim:#a8b4c4; --steel:#7d8899;
  /* 吉普尼珐琅四色 */
  --red:#e2452f; --yellow:#ffc61a; --blue:#3b7dd8; --green:#31a06a;
  --signal:#ff7a1f; --hazard:#f0c419; --ink:#0b0d12; --paper:#efe0c4;
  /* 语义 */
  --bg:var(--asphalt); --panel:var(--plate); --ink-2:#e7ecf3; --muted:#a3aebe;
  --border:var(--line); --accent:var(--yellow); --accent-2:var(--signal);
  --radius:4px; --radius-sm:3px; --maxw:1280px;
  --font:Barlow,"Segoe UI",Roboto,system-ui,sans-serif;
  --display:Anton,"Arial Narrow",Impact,sans-serif;
  --mono:"MonoTab",ui-monospace,Consolas,monospace;
  --hard:#05060a;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--asphalt);scroll-behavior:smooth}
body{
  margin:0;color:var(--ink-2);font:16px/1.66 var(--font);-webkit-font-smoothing:antialiased;
  background-color:var(--asphalt);
  /* 两团大尺寸柔光（车灯掠过页面的感觉），无重复图案 */
  background-image:
    radial-gradient(900px 620px at 6% -6%,rgba(255,198,26,.10),transparent 62%),
    radial-gradient(1100px 700px at 104% 12%,rgba(59,125,216,.13),transparent 66%),
    radial-gradient(800px 700px at 50% 108%,rgba(226,69,47,.07),transparent 68%);
  background-repeat:no-repeat;background-attachment:fixed;
}
img{max-width:100%;height:auto}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px dashed var(--hazard);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--hazard);color:var(--ink);padding:8px 12px;z-index:80;font-weight:700}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.005em;line-height:1.04;text-transform:uppercase}
::selection{background:var(--yellow);color:var(--ink)}

/* ---- patok 棋盘格裙边（吉普尼车身裙边纹，只做 8px 贴边） ---- */
.checker{height:8px;background:
  repeating-conic-gradient(var(--hazard) 0 25%,var(--ink) 0 50%) 0 0/16px 16px;}

/* ---- 顶部公告条 = 路况通告牌 ---- */
.ribbon{background:var(--ink);border-bottom:1px solid var(--line);color:var(--chrome-dim);
  font:500 12.5px/1.5 var(--mono);letter-spacing:.02em;padding:7px 0}
.ribbon .wrap{display:flex;align-items:center;gap:10px;justify-content:center;text-align:center}
.ribbon .wrap::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hazard);
  box-shadow:0 0 0 3px rgba(240,196,25,.18);flex:none}

/* ---- 页头：铬保险杠 + 目的地牌 ---- */
.topbar{position:sticky;top:0;z-index:40;background:
  linear-gradient(180deg,#2d323f,#1a1e28 62%,#12141a);
  border-bottom:3px solid var(--hard);
  box-shadow:0 1px 0 rgba(233,238,244,.35) inset,0 8px 20px rgba(0,0,0,.5)}
.topbar::after{content:"";display:block;height:4px;background:
  linear-gradient(90deg,var(--red) 0 25%,var(--yellow) 25% 50%,var(--blue) 50% 75%,var(--green) 75% 100%)}
.topbar .bar{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;color:var(--chrome);font-family:var(--display);
  font-size:20px;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.brand img{width:42px;height:42px;border-radius:3px;border:1px solid var(--line);
  box-shadow:0 0 0 2px rgba(0,0,0,.6)}
.brand:hover{text-decoration:none;color:var(--yellow)}

/* ---- 导航＝目的地牌 ---- */
.nav{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav ul{display:flex;gap:2px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.nav li{position:relative}
.nav ul > li > a{display:block;color:var(--chrome-dim);font:600 13.5px/1 var(--font);
  letter-spacing:.055em;text-transform:uppercase;padding:11px 10px;border-top:2px solid transparent}
.nav ul > li > a:hover{color:var(--ink);background:var(--yellow);border-top-color:var(--ink);text-decoration:none}
.nav .active > a{color:var(--yellow);background:linear-gradient(180deg,rgba(255,198,26,.22),rgba(255,198,26,.04))}
.nav li.has-kids > a::after{content:" ▾";opacity:.8}
.nav .kids{display:none;position:absolute;top:100%;left:0;min-width:224px;z-index:45;
  background:#12141a;border:1px solid var(--line);border-top:3px solid var(--yellow);
  padding:8px;flex-direction:column;gap:1px;box-shadow:0 14px 30px rgba(0,0,0,.66)}
.nav .kids::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--yellow)}
.nav li.has-kids::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:12px;z-index:44}
.nav .kids a{display:block;color:var(--chrome);font:500 13.5px/1.3 var(--font);padding:8px 10px;
  border-left:2px solid transparent}
.nav .kids a:hover{background:rgba(255,198,26,.12);border-left-color:var(--yellow);color:#fff;text-decoration:none}
.nav li.has-kids:hover .kids,.nav li.has-kids:has(:focus-visible) .kids{display:flex}
.nav .cta{background:var(--hazard);color:var(--ink);border:2px solid var(--ink);
  padding:9px 13px;font:700 13px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 3px 0 rgba(0,0,0,.65);white-space:nowrap}
.nav .cta:hover{background:var(--signal);color:#fff;text-decoration:none;transform:translateY(1px);box-shadow:0 2px 0 rgba(0,0,0,.65)}
.langchip{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);color:var(--chrome-dim);
  background:#101218;font:600 12px/1 var(--mono);letter-spacing:.05em;padding:6px 8px;white-space:nowrap}

/* ---- hero＝目的地牌 + 铬框官方图 ---- */
.hero{position:relative;border-bottom:1px solid var(--line-soft);overflow:hidden;
  background:linear-gradient(180deg,#171a22,#12141a)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,198,26,.05) 0 2px,transparent 2px 22px);
  mask-image:linear-gradient(180deg,#000,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:34px;
  align-items:center;padding:44px 20px 40px;position:relative}
.hero-in{position:relative}
.hero .eyebrow{display:inline-block;margin:0 0 14px;background:var(--ink);color:var(--hazard);
  border:1px solid var(--line);font:700 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding:7px 10px}
.hero h1{font-size:clamp(46px,8.4vw,104px);margin:0 0 14px;color:var(--chrome);line-height:.92}
.hero h1 .amp{color:var(--red);text-shadow:3px 3px 0 rgba(0,0,0,.55)}
.hero h1 .l2{display:block;color:var(--hazard);letter-spacing:.01em}
.lead{color:var(--chrome-dim);font-size:18.5px;max-width:54ch;margin:0 0 6px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{background:var(--hazard);color:var(--ink);border:2px solid var(--ink);padding:12px 18px;
  font:700 14px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 4px 0 rgba(0,0,0,.7);display:inline-block}
.btn:hover{background:var(--signal);color:#fff;text-decoration:none;transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.7)}
.btn.ghost{background:transparent;color:var(--chrome);border-color:var(--chrome)}
.btn.ghost:hover{background:var(--chrome);color:var(--ink)}
.hero-shot{margin:0;border:3px solid #101218;background:#0d0f15;
  box-shadow:0 0 0 1px rgba(233,238,244,.5),0 0 0 4px rgba(0,0,0,.75),10px 12px 0 rgba(0,0,0,.5)}
.hero-shot img{display:block;width:100%;height:auto}
.hero-shot figcaption{font:500 11.5px/1.5 var(--mono);color:var(--steel);
  padding:8px 10px;border-top:1px solid var(--line-soft);letter-spacing:.02em}

/* ---- 仪表事实条（fuel / oil / gauge 读数） ---- */
.facts-strip{background:linear-gradient(180deg,#101218,#171a22);border-bottom:1px solid var(--line-soft)}
.facts{display:flex;flex-wrap:wrap;gap:1px;padding:0 20px;background:var(--line-soft)}
.fact{flex:1 1 176px;background:#12141a;padding:13px 15px 15px;position:relative}
.fact-k{display:block;font:700 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:6px}
.fact-v{display:block;font:600 17px/1.24 var(--mono);color:var(--chrome)}
.fact::after{content:"";position:absolute;left:15px;right:15px;bottom:8px;height:4px;
  background:repeating-linear-gradient(90deg,var(--steel) 0 7px,transparent 7px 10px);opacity:.5}

/* ---- 分区标题 ---- */
.section-head{display:flex;align-items:baseline;gap:12px;margin:34px 0 14px;flex-wrap:wrap;
  border-bottom:2px solid var(--line);padding-bottom:8px}
.section-head h2{margin:0;font-size:27px;color:var(--chrome)}
.overline{font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.count-pill{margin-left:9px;background:var(--hazard);color:var(--ink);font:800 12px/1 var(--mono);
  padding:4px 8px;vertical-align:middle}

/* ---- 卡片＝珐琅漆板 ---- */
.grid{display:flex;flex-wrap:wrap;gap:18px;margin:16px 0 34px}
.grid[data-n="2"] .card{flex:1 1 46%}
.grid[data-n="3"] .card{flex:1 1 31%}
.card{flex:1 1 288px;min-width:0;display:flex;flex-direction:column;color:var(--chrome);
  background:linear-gradient(180deg,#242938,#1a1e28 70%);
  border:1px solid var(--line);border-top:4px solid var(--yellow);
  box-shadow:0 5px 0 rgba(0,0,0,.55);position:relative;overflow:hidden}
.card:nth-child(3n+2){border-top-color:var(--red)}
.card:nth-child(3n+3){border-top-color:var(--blue)}
.card:hover{border-color:var(--chrome);text-decoration:none;transform:translateY(-2px);
  box-shadow:0 7px 0 rgba(0,0,0,.55)}
.card .thumb{position:relative;display:block;background:#0d0f15;border-bottom:1px solid var(--line)}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}
.card-body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.card h3{margin:0 0 8px;font-size:19px;color:var(--chrome);letter-spacing:.01em}
.card p{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.55;flex:1}
.card .go{color:var(--hazard);font:700 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.card .stamp{display:inline-block;margin-top:10px;color:var(--red);border:1px solid var(--red);
  font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;
  transform:rotate(-1.6deg);align-self:flex-start;background:rgba(226,69,47,.07)}
.pill-tag{position:absolute;left:9px;bottom:9px;background:var(--hazard);color:var(--ink);
  font:800 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding:5px 8px;
  transform:rotate(-1.2deg);box-shadow:2px 2px 0 rgba(0,0,0,.6)}
.card.sm{flex:1 1 232px}
.card.sm h3{font-size:16.5px}

/* ---- 正文 ---- */
article{padding:26px 0 46px}
article h1{font-size:clamp(30px,4.6vw,50px);color:var(--chrome);margin:10px 0 0;line-height:1.02}
article h2{margin:40px 0 12px;font-size:24px;color:var(--hazard);padding-bottom:7px;
  border-bottom:1px solid var(--line);position:relative}
article h2::before{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:3px;background:var(--red)}
article h3{margin:26px 0 8px;font-size:18.5px;color:var(--chrome);font-family:var(--font);font-weight:700;
  text-transform:none;letter-spacing:.01em}
article p{max-width:92ch}
article ul,article ol{max-width:92ch;padding-left:22px}
article li{margin:5px 0}
article img.zoom{border:2px solid #101218;cursor:zoom-in;display:block;margin:18px 0;
  box-shadow:0 0 0 1px rgba(233,238,244,.35),6px 7px 0 rgba(0,0,0,.45);width:100%}
article img.zoom.open{max-width:min(1200px,96vw);cursor:zoom-out;border-color:var(--hazard)}
article strong{color:#fff}
article em{color:var(--yellow);font-style:normal;font-weight:600}
code{background:#0d0f15;border:1px solid var(--line);color:var(--hazard);padding:1px 6px;
  font-family:var(--mono);font-size:.92em}
blockquote{border-left:3px solid var(--chrome);margin:18px 0;padding:6px 16px;color:var(--chrome-dim);
  font-family:var(--display);font-size:19px;line-height:1.3}

/* ---- 表格＝票价牌（黄底黑字表头 + 等宽数字） ---- */
.tbl-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);
  box-shadow:0 5px 0 rgba(0,0,0,.45);background:#171a22}
table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:14px}
th,td{border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
  padding:9px 12px;text-align:left;vertical-align:top}
th{background:linear-gradient(180deg,var(--hazard),#e0ad10);color:var(--ink);
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:12.5px;white-space:nowrap}
tbody tr:nth-child(odd){background:rgba(233,238,244,.032)}
tbody tr:hover{background:rgba(255,198,26,.07)}
td:first-child{color:var(--chrome)}
table strong,table b{color:inherit}
table code{border:0;background:transparent;padding:0;color:var(--chrome);font-weight:700}

/* ---- callout：路障斜纹只用在 warning，有语义 ---- */
.callout{border:1px solid var(--line);border-left:6px solid var(--blue);background:#171a22;
  padding:14px 16px;margin:20px 0;max-width:96ch}
.callout p{margin:4px 0}
.callout.note{border-left-color:var(--blue)}
.callout.warn{border-left-color:var(--hazard);background:
  linear-gradient(90deg,rgba(240,196,25,.10),transparent 42%),#171a22;position:relative;padding-left:20px}
.callout.warn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:repeating-linear-gradient(-45deg,var(--hazard) 0 6px,var(--ink) 6px 12px)}
.callout.danger{border-left-color:var(--red);background:linear-gradient(90deg,rgba(226,69,47,.10),transparent 42%),#171a22}

/* ---- 油布车票（quick answer） ---- */
.quick-answer{background:var(--paper);color:var(--ink);border:0;padding:15px 18px;margin:18px 0;
  position:relative;max-width:94ch;
  background-image:radial-gradient(rgba(11,13,18,.06) 1px,transparent 1px);background-size:5px 5px;
  box-shadow:5px 6px 0 rgba(0,0,0,.5)}
.quick-answer::before,.quick-answer::after{content:"";position:absolute;top:0;bottom:0;width:9px;
  background-image:radial-gradient(circle at 4px 6px,var(--asphalt) 3.2px,transparent 3.6px);
  background-size:9px 12px}
.quick-answer::before{left:-1px}
.quick-answer::after{right:-1px}
.qa-stamp{display:inline-block;background:var(--ink);color:var(--hazard);font:800 10.5px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;margin-bottom:8px}
.quick-answer p{margin:4px 0;color:var(--ink);font-size:15.5px;font-weight:500}
.quick-answer strong,.quick-answer em{color:var(--red)}
.quick-answer em{font-style:normal;font-weight:700}

/* ---- 内页骨架：面包屑 / 导语 / 目录 ---- */
.crumb{font:500 12.5px/1.4 var(--mono);color:var(--steel);margin:16px 0 0;letter-spacing:.02em}
.crumb a{color:var(--chrome-dim)}
.crumb .sep{opacity:.45;margin:0 5px}
.crumb .here{color:var(--chrome);font-weight:700}
.art-lead{color:var(--chrome-dim);font-size:17.5px;margin:12px 0 4px;max-width:78ch}
.art-meta{color:var(--steel);font:500 12px/1.5 var(--mono);margin:0 0 20px;letter-spacing:.02em;
  text-transform:uppercase;border-bottom:1px dashed var(--line);padding-bottom:12px}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:34px;align-items:start;
  padding-top:6px;padding-bottom:40px}
.article-grid > div{min-width:0}
.toc{position:sticky;top:104px;background:#12141a;border:1px solid var(--line);border-top:3px solid var(--yellow);padding:13px}
.toc .overline{display:block;margin-bottom:9px}
.toc-list{display:flex;flex-direction:column;gap:1px;margin:0;padding:0;list-style:none;
  max-height:62vh;overflow:auto}
.toc-list a{font:500 13.5px/1.35 var(--font);color:var(--chrome-dim);padding:6px 8px;
  border-left:2px solid transparent;display:block}
.toc-list a:hover{color:#fff;background:rgba(255,198,26,.1);border-left-color:var(--yellow);text-decoration:none}
.all-guides{margin-top:40px;border-top:1px solid var(--line);padding-top:6px}
.all-more{margin:4px 0 0;font:700 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}

@media (max-width:1080px){
  .article-grid{grid-template-columns:minmax(0,1fr) 208px;gap:24px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:34px}
  .hero-shot{max-width:640px}
  .article-grid table{font-size:13.5px}
}
@media (max-width:980px){
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;max-width:520px}
  .toc-list{max-height:none}
}
@media (max-width:900px){
  .topbar .bar{flex-wrap:wrap;padding-top:9px;padding-bottom:10px;gap:8px}
  .brand{font-size:17px}
  .nav{margin-left:0;width:100%;flex-wrap:wrap;gap:8px}
  .nav ul{flex-wrap:wrap}
  .nav ul > li > a{padding:9px 8px}
  .nav .kids{position:static;display:flex;flex-direction:row;flex-wrap:wrap;min-width:0;
    border:0;border-top:2px solid var(--line);padding:4px 0 0;box-shadow:none;background:transparent}
  .nav li.has-kids::after{display:none}
  .nav li.has-kids:hover .kids{display:flex}
  .nav .kids a{border-left:0;border-bottom:2px solid transparent;padding:6px 8px}
  .nav .cta{width:100%;text-align:center}
  .langchip{display:none}
}
@media (max-width:620px){
  .wrap{padding:0 14px}
  .grid[data-n]{--x:0}
  .card,.card.sm,.grid[data-n="2"] .card,.grid[data-n="3"] .card{flex:1 1 100%}
  .fact{flex:1 1 45%}
  .hero h1{font-size:clamp(38px,13vw,64px)}
  article img.zoom{width:100%}
}

/* ---- 广告槽（本站留空：未配 key 时 build_site.py 整块不渲染） ---- */
@media (hover: hover) and (pointer: fine){.ad-slot{display:block}}
@media not all and (hover: hover) and (pointer: fine){.ad-slot{display:none}}
.ad-slot{margin:26px auto;max-width:var(--maxw)}
.ad-label{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ad-inner{min-height:90px;border:1px dashed var(--line);background:#171a22;overflow:hidden}

/* ---- 页脚：珐琅条纹 + 棋盘格裙边 ---- */
.foot{border-top:1px solid var(--line);background:linear-gradient(180deg,#12141a,#0d0f15);
  padding:26px 0 30px;margin-top:34px;position:relative}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:
  linear-gradient(90deg,var(--red) 0 25%,var(--yellow) 25% 50%,var(--blue) 50% 75%,var(--green) 75% 100%)}
.foot::after{content:"";position:absolute;bottom:0;left:0;right:0;height:8px;
  background:repeating-conic-gradient(var(--hazard) 0 25%,var(--ink) 0 50%) 0 0/16px 16px}
.foot .wrap{padding-top:10px}
.foot .muted{color:var(--steel);font:500 12px/1.6 var(--mono);letter-spacing:.02em}
.foot-links{margin:6px 0;font-family:var(--mono);font-size:13px}
.foot-links a{color:var(--chrome)}
.foot-extra{color:var(--steel);font-size:12.5px}
.disclaimer{color:var(--muted);font-size:13px;max-width:96ch}

/* ---- lightbox（点击正文图全屏） ---- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,6,10,.95);display:flex;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lightbox img{max-width:min(1500px,96vw);max-height:92vh;width:auto;height:auto;
  border:2px solid var(--hazard);box-shadow:10px 10px 0 rgba(0,0,0,.6)}
@media (max-width:700px){.lightbox{padding:10px}}