/* ==========================================================================
   lusihan · dyxa-2026 · theme.css
   Mission Control 深色数据控制台（Grafana / Datadog / NASA mission control 口径）
   由 04_脚本/build_lusihan.py 步骤 4b 复制到 site/dyxa-2026/assets/theme.css，
   并把 11 个 dyxa 页的内联 <style> 全部换成
   <link rel="stylesheet" href="assets/theme.css">。
   本文件是唯一真源，改这里 + 重跑构建；直接改成品会被 copytree 覆盖。
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root{
  --bg:#06090c; --bg-2:#0a1013; --panel:#0e151a; --panel-2:#141d24;
  /* 🔴 --stage 必须独立成行，不能折进 --bg-2 那一行。
     它是封面舞台自己的底色（#1f2c30 比 --bg-2 亮一档），语义和 --bg-2 不同：
     --bg-2 是"次一级页面底"，--stage 是"封面那块抬起来的面"。
     折进同一行看着省事，但以后谁想单独调舞台色，就得先把它从 --bg-2 里抠出来。 */
  --stage:#1f2c30;
  --line:#1b252d; --rule:#2a3540;
  --ink:#e7edf3; --ink-2:#9fb0be; --ink-3:#8a9aa9;
  --accent:#3ecfb8; --accent-hi:#5ee0c8;
  --accent-soft:rgba(62,207,184,.12); --accent-line:rgba(62,207,184,.45);
  --st-ok:#3fb950; --st-warn:#d8a13a; --st-fault:#f4706a; --st-idle:#7d8fa0;
  --tint:rgba(8,30,38,.44);
  --focus:var(--accent-hi);
  --w-page:1400px; --w-read:760px; --gutter:20px;
  --nav-h:52px; --seg-h:36px; --sys-h:28px; --ctl-h:34px; --chip-h:22px;
  --gap:12px; --gap-t:6px;
  --r-0:0; --r-1:2px; --r-2:3px; --r-3:4px;
  --fs-0:11px; --fs-1:12px; --fs-2:13px; --fs-3:15px; --fs-4:17px;
  --fs-5:21px; --fs-6:27px; --fs-7:34px; --fs-num:44px;
  --fs-hero:clamp(34px,5.4vw,64px);
  --lh-body:1.70; --lh-head:1.25; --lh-meta:1.50; --lh-num:1.00; --lh-paper:1.85;
  --z-map:0; --z-nav:900; --z-prog:1000; --z-share:1100; --z-lb:1200; --z-toast:1300;
  /* 中文必须排在通用 monospace 之前，否则 Windows Chrome 回落宋体 */
  --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", "PingFang SC", "Microsoft YaHei", monospace;
}

/* ------------------------------------------------------------------ BASE */
*,*::before,*::after{ box-sizing:border-box }

html{
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:var(--f-sans); font-weight:400;
  font-size:var(--fs-3); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  margin:0; font-family:var(--f-sans); font-weight:700;
  line-height:var(--lh-head); letter-spacing:0;
}
p{ margin:0 0 1em }
p:last-child{ margin-bottom:0 }
a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--accent-hi) }
img{ display:block; max-width:100% }
ul,ol{ margin:0; padding:0 }
li{ list-style:none }
b,strong{ font-weight:700; color:var(--ink) }
small{ font-size:var(--fs-1) }
hr{ height:1px; border:0; background:var(--line); margin:16px 0 }
[id]{ scroll-margin-top:96px }

:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }

/* 等宽只承载数字/标识，不承载中文段落 */
.mono,.time,.amt,.num,.t,.lamp-txt,.cat-num,.cat-meta,.hdr-meta,
.sys-id,.sys-leg,.sys-line,.tag,.en,.km,.rec-stars,.legend-row .stars,
.teaser-day,.teaser-date,.figcaption,.day-sub,.fee-list .amt{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
}
/* 混排（中文+数字）字距压到 .04em；纯拉丁/数字标签才用 .06em */
.cat-meta,.en{ letter-spacing:.04em }

/* 滚动条（控制台口径，Windows Chrome 有效） */
*::-webkit-scrollbar{ width:8px; height:8px }
*::-webkit-scrollbar-track{ background:var(--bg) }
*::-webkit-scrollbar-thumb{ background:var(--rule) }
*::-webkit-scrollbar-thumb:hover{ background:var(--line) }

/* ------------------------------------------------------- SYS BAR（28px） */
.sysbar{
  position:relative;            /* 不 sticky，随内容滚走 */
  display:flex; align-items:center; gap:var(--gap-t);
  height:var(--sys-h); padding:0 var(--gutter);
  background:var(--bg); border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:var(--fs-0); line-height:1;
  color:var(--ink-3); letter-spacing:.06em;
  white-space:nowrap; overflow:hidden;
}
.sysbar .sys-id{ color:var(--ink-2) }
.sysbar .sys-sep{ color:var(--rule) }
.sysbar .sys-spacer{ flex:1 1 auto }
.sysbar .sys-right{ display:flex; align-items:center; flex:0 0 auto }

/* 状态灯：6×6 方块 / 1px 圆角 / 零外发光 / 必须配文字标签 */
.lamp{
  flex:0 0 auto; display:inline-block;
  width:6px; height:6px; border-radius:1px;
  background:var(--st-idle); border:0; box-shadow:none;
}
.lamp-ok{ background:var(--st-ok) }
.lamp-warn{ background:var(--st-warn) }
.lamp-fault{ background:var(--st-fault) }
.lamp-idle{ background:var(--st-idle) }
.lamp + .lamp-txt{ margin-left:5px }
.lamp-txt{ margin-right:12px; font-size:var(--fs-0); color:var(--ink-3); letter-spacing:.06em }
.sys-right .lamp-txt:last-child{ margin-right:0 }

/* -------------------------------------- HEADER 导航行（52px sticky top:0） */
.travel-header{
  position:sticky; top:0; z-index:var(--z-nav);
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  gap:var(--gap); height:var(--nav-h); padding:0 var(--gutter);
  background:var(--bg-2); border-bottom:1px solid var(--line);
  flex-wrap:nowrap;
}
.travel-header .brand{
  flex:0 0 auto; white-space:nowrap;
  font-family:var(--f-mono); font-size:var(--fs-0);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}
.hdr-meta{
  flex:0 1 auto; min-width:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  font-family:var(--f-mono); font-size:var(--fs-0);
  letter-spacing:.06em; color:var(--ink-3);
}
/* 首页队徽（mission patch）：1px 框 + ≤72px，全站只出现一次 */
.logo-container{
  flex:0 0 auto; display:inline-flex; align-items:center;
  padding:4px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-1);
}
.site-logo{ height:64px; width:auto; display:block }

/* ------------------------------- 分段控件（36px sticky top:52px） */
.day-indices{
  position:sticky; top:var(--nav-h); z-index:var(--z-prog);
  display:flex; flex-wrap:nowrap; align-items:stretch;
  height:var(--seg-h); overflow-x:auto; overflow-y:hidden;
  background:var(--bg-2); border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.day-indices::-webkit-scrollbar{ height:0; width:0 }
.tab-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  height:100%; padding:0 14px; margin-left:-1px;      /* 折叠相邻边框 */
  background:var(--panel); border:1px solid var(--line); border-radius:0;
  font-family:var(--f-mono); font-size:var(--fs-0);
  letter-spacing:.04em; color:var(--ink-2);
  white-space:nowrap; text-decoration:none;
}
.tab-btn:hover{ background:var(--panel-2); border-color:var(--rule); color:var(--ink) }
.tab-btn.active,
.tab-btn[aria-current="page"]{
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent);
}
.tab-btn.active:hover,
.tab-btn[aria-current="page"]:hover{ color:var(--accent-hi) }

/* -------------------------------------------------------------- LAYOUT */
.container,.day-detail{
  max-width:var(--w-page); margin:0 auto; padding:24px var(--gutter) 48px;
}
.day-detail{ max-width:1180px }
.wrap{ max-width:var(--w-page); margin:0 auto; padding:0 var(--gutter) }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap) }
.read{ max-width:42em }

/* 面板：--panel + 1px --line + 2px 圆角 + 16px 内边距，无投影 */
.panel,.card,.tip-card,.hotel-card,.day,.fc,.charge,.ranking-block,
.facts,.cat-card,.kpi-card,.rec-card,.teaser-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-2); padding:16px;
}
.panel:hover,.card:hover,.tip-card:hover,.hotel-card:hover,.fc:hover,
.rec-card:hover,.teaser-card:hover{
  background:var(--panel-2); border-color:var(--accent-line);
}

/* ------------------------------------------------------------ HEADINGS */
.day-detail h2,.container h2,.sec-title h2{
  font-size:var(--fs-6); font-weight:700; color:var(--ink); margin:0 0 8px;
}
.container h2 .tag,.tag{
  display:inline-block; vertical-align:3px; margin-right:8px; padding:2px 6px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-1);
  font-family:var(--f-mono); font-size:var(--fs-0);
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
}
.subtitle,.sec-title p{
  font-size:var(--fs-2); color:var(--ink-3); margin:0 0 16px;
}
.day-sub{
  font-size:var(--fs-1); color:var(--ink-3); letter-spacing:.06em; margin-bottom:var(--gap-t);
}
.day-theme{ font-size:var(--fs-3); color:var(--ink-2); margin-bottom:var(--gap) }
h3,.day-detail h3,.container h3,h4{
  margin:24px 0 10px; padding:6px 10px;
  background:var(--panel); border:1px solid var(--line);
  border-left:2px solid var(--accent); border-radius:var(--r-1);
  font-size:var(--fs-4); font-weight:700; color:var(--ink);
}
h4{ margin:0 0 6px; padding:0; border:0; background:none; font-size:var(--fs-3) }

/* --------------------------------------------------------- CHIP / 统计 */
.day-stats,.pills,.foodtags,.tips-actions{
  display:flex; flex-wrap:wrap; gap:var(--gap-t); margin:0 0 16px;
}
.day-stats span,.chip,.pill,.food-tag,.badge{
  display:inline-flex; align-items:center;
  height:var(--chip-h); padding:0 8px 0 10px;
  background:var(--panel); border:1px solid var(--line);
  border-left:2px solid var(--accent); border-radius:var(--r-1);
  font-size:var(--fs-1); color:var(--ink-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.day-stats .cost{ border-left-color:var(--st-warn); color:var(--ink) }
.food-tag,.badge{ border-left-color:var(--st-idle) }

/* ------------------------------------------------------------ 时间线 */
.timeline{
  margin:0 0 16px; padding:6px 0 6px 12px;
  border-left:1px solid var(--rule); background:transparent;
}
.timeline-item{
  position:relative; padding:7px 10px; min-height:34px;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-2); line-height:1.55;
}
.timeline-item:last-child{ border-bottom:0 }
.timeline-item:hover{ background:var(--panel) }
.timeline-item::before{          /* 8×8 直角节点，无发光 */
  content:""; position:absolute; left:-17px; top:13px;
  width:8px; height:8px; border-radius:0;
  background:var(--accent); border:1px solid var(--bg); box-shadow:none;
}
.timeline-item .time{
  font-family:var(--f-mono); font-size:var(--fs-1);
  font-variant-numeric:tabular-nums; color:var(--accent); margin-right:10px;
}
.timeline-item .place{ font-weight:700; color:var(--ink) }
.timeline-item .addr{
  display:block; margin-top:2px;
  font-size:var(--fs-0); color:var(--ink-3);
}

/* -------------------------------------------------------------- 地图 */
/* AMap SDK 会往容器上写内联样式，这两条必须 !important 才压得住（全站仅此 2 处） */
#map-container,#overview-map,#amap-container,.route-map{
  position:relative; z-index:var(--z-map);
  width:100% !important; height:420px;
  margin:12px 0 16px;
  background:var(--panel-2) !important;
  border:1px solid var(--line); border-radius:var(--r-1);
  overflow:hidden; isolation:isolate;      /* 挡住高德内部高 z-index 盖住 sticky nav */
}
.map-note,.map-legend,.route-info{
  margin:-6px 0 24px; font-size:var(--fs-0); color:var(--ink-3);
  line-height:var(--lh-meta);
}
.amap-logo,.amap-copyright{ opacity:.45 }
.amap-pin{
  width:24px; height:24px; line-height:22px;
  background:var(--panel-2); color:var(--accent);
  border:1px solid var(--accent-line); border-radius:var(--r-1);
  text-align:center; font-family:var(--f-mono); font-size:var(--fs-1);
  box-shadow:none;
}
.amap-pin.start{ color:var(--st-ok); border-color:var(--st-ok) }
.amap-pin.end{ color:var(--st-warn); border-color:var(--st-warn) }
.amap-info-window{
  padding:8px 10px; background:var(--panel); color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r-1);
  font-size:var(--fs-1); line-height:var(--lh-meta);
}
.amap-info-window b{ color:var(--ink); font-weight:700 }
.amap-info-window .day{ color:var(--accent); font-weight:400 }

/* -------------------------------------------------------- 账目（表格） */
.fee-list{
  margin:0 0 16px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-1); overflow:hidden;
}
.fee-list li{
  display:grid; grid-template-columns:64px 56px 1fr 96px; gap:10px;
  align-items:baseline; min-height:34px;
  padding:7px 10px; border-bottom:1px solid var(--line);
  font-size:var(--fs-2); line-height:1.45;
}
.fee-list li:last-child{ border-bottom:0 }
.fee-list li:hover{ background:var(--panel-2) }
.fee-list .time{
  font-family:var(--f-mono); font-size:var(--fs-1);
  font-variant-numeric:tabular-nums; color:var(--ink-3);
}
.fee-list .tag-A,.fee-list .tag-AA,.fee-list .tag-receipt{
  display:inline-block; height:var(--chip-h); line-height:20px;
  padding:0 6px; text-align:center;
  background:var(--panel-2); border:1px solid var(--line);
  border-left:2px solid var(--accent); border-radius:var(--r-1);
  font-family:var(--f-mono); font-size:var(--fs-0); color:var(--ink-2);
}
.fee-list .tag-AA{ border-left-color:var(--st-warn) }
.fee-list .tag-receipt{ border-left-color:var(--st-idle) }
.fee-list .amt{
  text-align:right; font-family:var(--f-mono); font-size:var(--fs-2);
  font-variant-numeric:tabular-nums; color:var(--ink);
}

table{
  width:100%; border-collapse:collapse;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-1);
  font-size:var(--fs-2);
}
caption{
  padding:6px 10px; text-align:left;
  font-size:var(--fs-0); color:var(--ink-3);
}
th,td{
  padding:7px 10px; text-align:left; line-height:1.5;
  border-bottom:1px solid var(--line);
}
thead th{
  background:var(--panel-2); border-bottom:1px solid var(--rule);
  font-size:var(--fs-0); color:var(--ink-2); white-space:nowrap;
}
tbody tr:hover{ background:var(--panel-2) }
tbody tr:last-child td{ border-bottom:0 }
tfoot td,.total td{ border-top:1px solid var(--rule); font-weight:700 }
td.num,.td-num,.cell-num{
  text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------ 照片墙 */
.photos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--gap-t); margin-top:12px;
}
.photos figure{
  position:relative; margin:0; overflow:hidden;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-1);
}
.photos img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  cursor:pointer; border:0;
  filter:saturate(.58) contrast(1.06) brightness(.80);
}
.photos figure::after{          /* 冷色罩 */
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--tint); pointer-events:none;
  transition:opacity 160ms linear;
}
.photos figcaption{
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  padding:4px 6px; background:rgba(6,9,12,.82);
  font-family:var(--f-mono); font-size:var(--fs-0); color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.photos figure:hover{ border-color:var(--accent-line) }
.photos figure:hover img{ filter:none }
.photos figure:hover::after{ opacity:0 }
.photo-empty{
  padding:20px; text-align:center; font-style:normal;
  font-size:var(--fs-2); color:var(--ink-3);
  border:1px dashed var(--rule); border-radius:var(--r-1); background:var(--panel);
}
/* 卡片内缩略图同款处理 */
.teaser-card-images{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-t); margin-top:10px }
.teaser-card-images img,.main-image,.food-thumb{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line);
  filter:saturate(.58) contrast(1.06) brightness(.80);
}
.teaser-card:hover .teaser-card-images img{ filter:none }

/* ---------------------------------------------------------- LIGHTBOX */
.lightbox{
  position:fixed; inset:0; z-index:var(--z-lb);
  display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(6,9,12,.94); cursor:pointer;
}
.lightbox.on{ display:flex }
.lightbox img{
  max-width:92vw; max-height:88vh; object-fit:contain; filter:none;
  border:1px solid var(--line); border-radius:var(--r-1);
}
.lightbox .close{
  position:absolute; top:16px; right:20px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  /* 这是 <button>：button 通用规则的 padding:0 14px 会漏进来，
     border-box 下 34px 宽只剩 6px 内容区，× 会被挤扁。必须显式清零。 */
  padding:0; line-height:1;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-1);
  font-family:var(--f-mono); font-size:var(--fs-5); color:var(--ink-2); cursor:pointer;
}
.lightbox .close:hover{ color:var(--accent-hi); border-color:var(--accent-line) }

/* ------------------------------------------- KPI 大数字 / 数据条（总览页） */
.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin:12px 0 24px }
.kpi-card .num{
  display:block; font-size:var(--fs-num); line-height:var(--lh-num);
  font-weight:400; color:var(--ink);
}
.kpi-card .num sup{ font-size:var(--fs-0); vertical-align:top; color:var(--ink-3) }
.kpi-card .label{
  display:block; margin-top:8px; font-size:var(--fs-0); color:var(--ink-3);
}
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--gap); margin:12px 0 24px }
.cat-card{ border-left:2px solid var(--c,var(--accent)) }
.cat-name{ font-size:var(--fs-3); font-weight:700; color:var(--ink); margin-bottom:6px }
.cat-num{
  font-size:var(--fs-5); line-height:var(--lh-num); color:var(--accent);
}
.cat-bar{
  position:relative; height:6px; margin:8px 0;
  background:var(--panel-2); border:1px solid var(--line); overflow:hidden;
}
.cat-fill{ height:100%; border:0 }
.cat-bar::after{          /* 每 25% 一条刻度线 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(90deg,var(--rule) 0 1px,transparent 1px);
  background-size:25% 100%;
}
.cat-meta{ font-size:var(--fs-0); letter-spacing:.04em; color:var(--ink-3) }

/* ------------------------------------------------ 榜单 / 推荐卡（总览页） */
.rec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--gap) }
.rec-stars{ font-size:var(--fs-1); letter-spacing:.1em; color:var(--st-warn); margin-bottom:6px }
.rec-title{ font-size:var(--fs-3); font-weight:700; color:var(--ink); margin-bottom:4px }
.rec-addr{ font-size:var(--fs-0); color:var(--ink-3); margin-bottom:6px }
.rec-reason{ font-size:var(--fs-2); color:var(--ink-2); line-height:var(--lh-body); margin:0 }
.stars-legend{
  display:grid; gap:2px; margin:8px 0 16px; padding:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-1);
}
.legend-row{ display:flex; align-items:center; gap:10px; font-size:var(--fs-1); color:var(--ink-2) }
.legend-row .stars{ flex:0 0 auto; font-size:var(--fs-1); letter-spacing:.1em; color:var(--st-warn) }

.teaser-wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--gap) }
.teaser-card{ display:block; color:inherit }
.teaser-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px }
.teaser-day{ font-size:var(--fs-0); letter-spacing:.06em; color:var(--accent) }
.teaser-date{ font-size:var(--fs-0); color:var(--ink-3) }
.teaser-title{ font-size:var(--fs-4); font-weight:700; color:var(--ink); margin-bottom:6px }
.teaser-narr{ font-size:var(--fs-2); color:var(--ink-2); line-height:var(--lh-body); margin:0 }
.teaser-cta{ margin-top:8px; font-size:var(--fs-0); color:var(--ink-3) }
.teaser-empty{
  padding:20px; text-align:center; font-size:var(--fs-2); color:var(--ink-3);
  border:1px dashed var(--rule); border-radius:var(--r-1); background:var(--panel);
}

/* -------------------------------------------------------------- 按钮 */
button,.btn{
  height:var(--ctl-h); padding:0 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-1);
  font-family:var(--f-sans); font-size:var(--fs-2); color:var(--ink); cursor:pointer;
}
button:hover,.btn:hover{ background:var(--panel-2); border-color:var(--accent-line); color:var(--accent-hi) }

/* ============================================================ STORY 页 */
.hero{
  position:relative; overflow:hidden;
  background:var(--bg-2); border-bottom:1px solid var(--line);
  padding:32px 0 28px;
}
.hero .wrap{ text-align:center }
.hero h1{ font-size:var(--fs-hero); font-weight:700; color:var(--ink) }
.hero .sub{ margin-top:8px; font-size:var(--fs-1); color:var(--ink-3) }
.hero .route{ margin-top:10px; font-size:var(--fs-2); color:var(--ink-2) }
.hero .pills{ margin-top:16px }
.serif,.sans{ font-family:var(--f-sans) }

/* ---------------------------------------------- 顶层入口页（site/index.html） */
/* 顶层页是 HOMEPAGE 常量直接写出来的（build_lusihan.py 步骤 5），不进
   theme_pages() 那条链路，所以它的组件样式必须写在这里，没有别的入口。 */
.hero.masthead{
  /* 🔴 用 --stage 不用 --bg-2：--stage 是"封面那块抬起来的面"，比页面底亮
     一档，和 story 页的 .hero（用 --bg-2）在层级上是两个东西。共用 --bg-2
     的话，以后调 --stage 顶层页纹丝不动，等于 --stage 是个死令牌。 */
  background:var(--stage); border-bottom:1px solid var(--line);
  padding:40px 0 34px;
}
.mission-wall{
  display:grid; gap:var(--gap);
  /* auto-fit 不是 auto-fill：入口页只有 2 张卡，用 auto-fill 会撑出 4 条
     空轨道把两张卡挤到左边各 300px；auto-fit 会把空轨道收掉，卡片满宽两列。
     窄屏下 300px 的最小宽度自然把布局压成 1 列，不用再写断点。 */
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.mission{
  display:block; overflow:hidden; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-2);
}
.mission:hover{ background:var(--panel-2); border-color:var(--accent-line); color:inherit }
.mission-cover{
  aspect-ratio:1080/620; overflow:hidden;
  border-bottom:1px solid var(--line); background:var(--bg-2);
}
.mission-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* 与 .teaser-card-images img 同一套冷处理参数，别单独起一套 */
  filter:saturate(.58) contrast(1.06) brightness(.80);
}
.mission:hover .mission-cover img{ filter:none }
.mission-body{ padding:16px }
.mission-title{
  font-size:var(--fs-4); font-weight:700; color:var(--ink); margin-bottom:6px;
}
.mission-meta{
  font-family:var(--f-mono); font-size:var(--fs-0); line-height:var(--lh-meta);
  color:var(--accent); margin-bottom:8px;
}
.mission-desc{ font-size:var(--fs-2); color:var(--ink-2); line-height:var(--lh-body); margin:0 }
/* 顶层页页脚：不能直接套 .container，那会再来一份 24px/48px 的上下内边距，
   和 main 的 48px 底边叠成 96px 的空档 */
.page-foot{ max-width:var(--w-page); margin:0 auto; padding:0 var(--gutter) 40px }

.sec-nav{
  position:sticky; top:0; z-index:var(--z-nav);
  background:var(--bg-2); border-bottom:1px solid var(--line);
}
.sec-nav .wrap{
  display:flex; flex-wrap:nowrap; align-items:center;
  height:var(--nav-h); overflow-x:auto; scrollbar-width:none;
}
.sec-nav .wrap::-webkit-scrollbar{ height:0 }
.sec-nav a{
  flex:0 0 auto; display:inline-flex; align-items:center; height:100%;
  padding:0 14px; margin-left:-1px;
  background:var(--panel);          /* 底色 + 1px 描边，不只靠发丝线撑"这里能点" */
  border:1px solid var(--line);
  font-family:var(--f-sans); font-size:var(--fs-0);
  color:var(--ink-2); white-space:nowrap;
}
.sec-nav a:hover{ background:var(--panel-2); border-color:var(--rule); color:var(--accent) }
.chip-nav{
  display:flex; flex-wrap:wrap; gap:var(--gap-t); margin:12px 0 16px;
}
.chip-nav a{
  display:inline-flex; align-items:center; height:var(--chip-h); padding:0 8px 0 10px;
  background:var(--panel); border:1px solid var(--line);
  border-left:2px solid var(--accent); border-radius:var(--r-1);
  font-size:var(--fs-1); color:var(--ink-2); white-space:nowrap;
}
.chip-nav a:hover{ background:var(--panel-2); border-color:var(--accent-line); color:var(--accent) }

section{ padding:24px 0 }
.sec-title{ margin-bottom:12px }
.divider{ height:1px; background:var(--line); margin:12px 0 }
.stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap) }
.stats .stat{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-2); padding:16px;
}
.stats .stat .num{
  font-size:var(--fs-5); line-height:var(--lh-num); color:var(--accent);
}
.stats .stat .lab{ font-size:var(--fs-0); color:var(--ink-3); margin-top:6px }
.callout,.speech,.note-box{
  margin:12px 0; padding:10px 12px;
  background:var(--panel); border:1px solid var(--line);
  border-left:2px solid var(--accent); border-radius:var(--r-1);
  font-size:var(--fs-2); color:var(--ink-2); line-height:var(--lh-body);
}
.callout p:last-child,.speech p:last-child{ margin-bottom:0 }

.food-region{ margin:20px 0 }
.food-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--gap) }
.fc .name{ font-size:var(--fs-3); font-weight:700; color:var(--ink); margin-bottom:4px }
.fc .desc{ font-size:var(--fs-2); color:var(--ink-2); line-height:var(--lh-body) }
.foodtags{ margin-top:8px }

.day{ margin-bottom:var(--gap) }
.day-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px }
.day-num{
  font-family:var(--f-mono); font-size:var(--fs-0);
  letter-spacing:.06em; color:var(--accent);
}
.date{ font-size:var(--fs-0); color:var(--ink-3) }
.day-body{ font-size:var(--fs-2); color:var(--ink-2) }
.sched{ margin:8px 0 0 }
.sched li,.sched div{ padding:7px 10px; border-bottom:1px solid var(--line); font-size:var(--fs-2) }
.sched li:last-child,.sched div:last-child{ border-bottom:0 }
.sched .t,.t{
  font-family:var(--f-mono); font-size:var(--fs-1);
  font-variant-numeric:tabular-nums; color:var(--accent); margin-right:10px;
}
.tips-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--gap) }
.hotel-info-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--gap) }
.phase{ font-size:var(--fs-0); color:var(--ink-3) }
.en,.km,.city,.hotel{ font-size:var(--fs-0); color:var(--ink-3) }
.lead{ font-size:var(--fs-3); color:var(--ink-2); line-height:var(--lh-body) }
.note{ font-size:var(--fs-1); color:var(--ink-3); line-height:var(--lh-meta) }
.meta{ font-size:var(--fs-0); color:var(--ink-3) }
.tip{ font-size:var(--fs-2); color:var(--ink-2); line-height:var(--lh-body) }
.seal{ font-size:var(--fs-1); color:var(--ink-3) }
.route-node,.route-arrow,.city-band{ font-size:var(--fs-1); color:var(--ink-2) }

/* ================================================================ 页脚 */
footer{
  margin-top:32px; padding:24px var(--gutter) 32px;
  background:var(--bg); border-top:1px solid var(--line);
  text-align:center; color:var(--ink-3); font-size:var(--fs-1);
}
footer .big{ font-size:var(--fs-3); color:var(--ink); margin-bottom:6px }
footer .sm{ font-size:var(--fs-1); color:var(--ink-3); line-height:var(--lh-meta) }
.sys-line{
  margin-top:12px; font-family:var(--f-mono); font-size:var(--fs-0);
  letter-spacing:.06em; color:var(--ink-3);
}

/* --------------------------------- 4b 注入件：段标题序号 / 图片角标 */
.sec-idx{
  margin-right:8px; font-family:var(--f-mono); font-size:var(--fs-1);
  letter-spacing:.06em; color:var(--accent);
}
.photo-badge{
  position:absolute; z-index:1; padding:5px 8px;
  background:rgba(6,9,12,.82); border:1px solid var(--line); border-radius:var(--r-1);
  font-size:var(--fs-0); color:var(--ink-2);
}
/* 呈现类内联属性（颜色/圆角/投影/衬线/900 字重）由 4b 直接改源头，不在这里盖盖子：
   源页 style="background:#fff;border-radius:12px" 之类会被摘掉，留下来的只有
   width / padding / display 这类布局与数据。 */

/* ============================================================ 响应式 */
/*lusihan-mobile-fix*/
@media (max-width:600px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

@media (max-width:1280px){
  :root{ --gutter:16px }
  .stats{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:900px){
  #map-container,#overview-map,#amap-container,.route-map{ height:320px }
  .kpi-row{ grid-template-columns:repeat(3,1fr) }
  .rec-grid,.teaser-wall,.cat-grid,.food-cards,.tips-grid,.hotel-info-grid{
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  }
}
@media (max-width:640px){
  :root{ --nav-h:48px; --seg-h:32px; --sys-h:26px }
  .sysbar{ font-size:10px }
  #map-container,#overview-map,#amap-container,.route-map{ height:280px }
  .photos{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) }
  .kpi-row,.stats{ grid-template-columns:repeat(2,1fr) }
  .day-detail h2,.container h2,.sec-title h2{ font-size:var(--fs-5) }
  .fee-list li{ grid-template-columns:54px 46px 1fr 78px; gap:6px; padding:7px 8px; font-size:var(--fs-1) }
  .hero{ padding:24px 0 20px }
  .container,.day-detail{ padding:16px var(--gutter) 32px }
}

/* ========================================================= 动效降级 */
/* 🔴 必须放文件末尾：放在前面的话，后面那些 @media 响应式块里若新增了
   transition/animation，会盖回来。放末尾是唯一能保证"最后说的算"的位置。
   实测当前全文件只有两处动效：html 的 scroll-behavior:smooth（第 40 行）和
   .photos figure::after 的 opacity 160ms（第 355 行）；11 个 dyxa 页上内联
   style 的 transition 实测 0 处。这里仍带 !important，是防后面有人往标签上
   写内联 transition —— 内联样式压得过普通规则，压不过 !important。 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
  }
}