/* Vigilant — 高可见度路牌 / road-signage 风
   独立视觉身份:沥青黑 + 安全黄 + 信号绿,大号路线编号,chevron 警示条 (区别于 Navigat 的暗色霓虹控制台) */
:root {
  --paper: #f4f5f1;
  --card: #ffffff;
  --asphalt: #23262b;
  --asphalt2: #2e3238;
  --ink: #23262b;
  --soft: #5c6570;
  --faint: #8b949e;
  --line: #d9ddd6;
  --safety: #f2c200;
  --safety-deep: #c79a00;
  --green: #1f7a4d;
  --alert: #e8620d;
  --cond: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.7; font-size: 17px; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--cond); font-weight: 600; letter-spacing: .01em; line-height: 1.16; margin: 0; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }

/* hazard chevron stripe */
.hazard { height: 12px; background: repeating-linear-gradient(-45deg, var(--asphalt) 0 16px, var(--safety) 16px 32px); }
.hazard.thin { height: 8px; }

/* masthead */
.masthead { background: var(--asphalt); color: #fff; position: sticky; top: 0; z-index: 5; }
.mastrow { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.brand:hover { text-decoration: none; }
.sign { width: 26px; height: 26px; display: grid; place-items: center; background: var(--safety); color: var(--asphalt); font-family: var(--cond); font-weight: 700; font-size: 20px; transform: rotate(45deg); border-radius: 5px; }
.sign::first-letter { transform: rotate(-45deg); }
.brand-name { font-family: var(--cond); font-size: 24px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.brand-sub { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a9b1ba; }
.nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: #cfd5db; font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-size: 13.5px; padding: 8px 11px; border-bottom: 3px solid transparent; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.on { color: #fff; border-bottom-color: var(--safety); }

/* hero */
.hero { padding: 58px 0 34px; }
.eyebrow { font-family: var(--cond); text-transform: uppercase; letter-spacing: .18em; color: var(--alert); font-size: 13px; margin: 0 0 8px; }
.hero h1 { font-size: clamp(32px, 5.4vw, 52px); }
.lede { color: var(--soft); font-size: 18.5px; max-width: 680px; margin: 14px 0 26px; }
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--safety); border-radius: 8px; padding: 14px 20px; }
.stat b { display: block; font-family: var(--cond); font-size: 30px; }
.stat span { font-size: 12.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }

/* lanes */
.lane { padding: 40px 22px; }
.lane.alt { border-top: 1px solid var(--line); }
.lane.tint { background: #eef0ea; }
.lane-title { font-size: 25px; text-transform: uppercase; letter-spacing: .02em; }
.lane-intro { color: var(--soft); max-width: 720px; margin: 8px 0 10px; }
.lane-link { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: 13.5px; }

/* route list */
.route { list-style: none; margin: 20px 0 0; padding: 0; border-top: 2px solid var(--asphalt); }
.route-item { border-bottom: 1px solid var(--line); }
.route-item a { display: flex; align-items: center; gap: 18px; padding: 16px 10px; color: var(--ink); }
.route-item a:hover { background: #fff; text-decoration: none; }
.marker { flex: 0 0 46px; height: 46px; display: grid; place-items: center; background: var(--asphalt); color: var(--safety); font-family: var(--cond); font-weight: 700; font-size: 18px; border-radius: 6px; }
.route-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.route-head { display: flex; gap: 8px; }
.tag { font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; padding: 2px 8px; border-radius: 4px; background: #eceff0; color: var(--soft); }
.tag-everyday { background: #e2f0e6; color: #1f7a4d; }
.tag-challenging { background: #fbe6d8; color: #b34a08; }
.tag-alt { font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--faint); align-self: center; }
.route-main strong { font-family: var(--cond); font-size: 20px; font-weight: 600; }
.route-desc { color: var(--soft); font-size: 14.5px; }
.route-go { margin-left: auto; color: var(--safety-deep); font-size: 20px; }

/* sign list */
.signlist { list-style: none; margin: 14px 0 0; padding: 0; }
.signlist li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 12px; }
.signlist li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 11px; height: 11px; background: var(--safety); transform: rotate(45deg); }
.signlist a { color: var(--ink); }
.signlist a:hover { color: var(--green); }
.rel-cat { color: var(--faint); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }

/* chapter hero */
.chapter-hero { padding: 50px 22px 20px; }
.chapter-hero h1 { font-size: clamp(30px, 4.6vw, 42px); }
.count { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-size: 13px; margin-top: 18px; }

/* article */
.article { padding: 30px 22px 60px; }
.crumbs { font-size: 13px; color: var(--faint); display: flex; gap: 8px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .05em; font-family: var(--cond); }
.art-head { padding-bottom: 18px; }
.route-badge { display: inline-block; background: var(--asphalt); color: var(--safety); font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; padding: 4px 12px; border-radius: 4px; }
.art-head h1 { font-size: clamp(28px, 4.6vw, 44px); margin: 14px 0 6px; }
.art-sub { color: var(--soft); font-size: 15px; margin: 0 0 8px; }
.art-date { color: var(--faint); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; font-family: var(--cond); margin: 0; }

/* banner facts */
.banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; background: var(--asphalt); border-radius: 10px; overflow: hidden; margin: 26px 0 34px; }
.banner-cell { padding: 15px 18px; border-right: 1px solid #3b4046; }
.banner-cell:last-child { border-right: 0; }
.banner-k { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--safety); }
.banner-v { display: block; color: #fff; font-size: 16px; margin-top: 3px; }

.art-body { max-width: 780px; }
.sec { margin-bottom: 32px; }
.sec h2 { display: flex; align-items: baseline; gap: 12px; font-size: 22px; text-transform: uppercase; }
.mile { font-size: 13px; background: var(--safety); color: var(--asphalt); border-radius: 4px; padding: 2px 8px; font-family: var(--cond); }
.art-body p { color: #3a4048; margin: 12px 0; }

.related { margin-top: 40px; padding-top: 26px; border-top: 2px solid var(--asphalt); max-width: 780px; }
.related h2 { font-size: 22px; text-transform: uppercase; }

/* legal */
.legal { padding: 46px 22px 60px; max-width: 820px; }
.legal h1 { font-size: clamp(28px, 4.2vw, 38px); margin: 14px 0 20px; text-transform: uppercase; }
.prose p { color: var(--soft); margin: 12px 0; }

/* footer */
.foot { background: var(--asphalt); color: #cfd5db; margin-top: 40px; }
.foot-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 34px; padding-bottom: 8px; }
.foot-brand { font-family: var(--cond); color: #fff; font-size: 22px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; }
.foot-tag { margin: 0 0 6px; max-width: 440px; font-size: 14px; }
.foot-rule { margin: 0; color: var(--safety); font-size: 13.5px; }
.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot nav a { color: #cfd5db; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; font-family: var(--cond); }
.foot nav a:hover { color: var(--safety); }
.foot-note { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px 26px; color: #7f8892; font-size: 12.5px; }

@media (max-width: 780px) {
  .nav { gap: 0; }
  .brand-sub { display: none; }
  .route-go { display: none; }
}