/* ============================================================
   base.css — 铁影工坊 · 全站样式基座 v2.0
   包含：四主题令牌 / 重置 / 字阶 / 间距 / 网格 / 排版默认值
   只被 header.php 引用；详情页为独立 HTML，不受影响
   ============================================================ */

/* ── 四套主题令牌 ─────────────────────────────────────────────
   pine 松针绿   ← 22 型 / 25B 型绿皮车，橄榄绿
   warm 朱红     ← 25G 型客车，红白涂装
   teal 深青     ← 工业信号色
   cold 午夜蓝   ← 25T 型客车，午夜蓝（官方色号）
   未指定 data-theme 时按 pine 渲染
   ──────────────────────────────────────────────────────────── */
:root{
  --bg:#06100A; --bg-rgb:6,16,10; --bg-1:#0A150F; --bg-2:#0E1C15; --bg-3:#13241B;
  --metal:#6FB889; --metal-bright:#BFE3CC; --metal-dim:#4C9465;
  --text:#E3EAE4;
  --text-dim:rgba(227,234,228,.62);
  --text-mute:rgba(227,234,228,.50);
  --line:rgba(111,184,137,.10);
  --line-strong:rgba(111,184,137,.22);
  --accent:#5E8C6E;
  --accent-rgb:94,140,110;
  --ghost:rgba(111,184,137,.055);
  --hl:rgba(111,184,137,.15);
  --shade:rgba(6,16,10,.42);
  --edge:rgba(227,234,228,.05);
  --overlay:rgba(7,10,9,.66);
  --img-filter:saturate(.80) contrast(1.05) brightness(.95);
  --img-hover:saturate(.96) contrast(1.02) brightness(1);

  /* ── 旧模块兼容别名：首页 index.css / 博物馆等使用 --z-* 前缀 ── */
  --z-bg:var(--bg); --z-bg-1:var(--bg-1); --z-bg-2:var(--bg-2); --z-bg-3:var(--bg-3);
  --z-metal:var(--metal); --z-metal-bright:var(--metal-bright); --z-metal-dim:var(--metal-dim);
  --z-hl:var(--hl); --z-ghost:var(--ghost); --z-shade:var(--shade);
  --z-line:var(--line); --z-line-strong:var(--line-strong);
  --z-text:var(--text); --z-text-dim:var(--text-dim); --z-text-mute:var(--text-mute);
  --z-r:var(--r-1); --z-r-pill:var(--r-pill);
  --r:var(--r-1);
}
:root[data-theme="pine"]{
  --bg:#06100A; --bg-rgb:6,16,10; --bg-1:#0A150F; --bg-2:#0E1C15; --bg-3:#13241B;
  --metal:#6FB889; --metal-bright:#BFE3CC; --metal-dim:#4C9465;
  --text:#E3EAE4;
  --text-dim:rgba(227,234,228,.62);
  --text-mute:rgba(227,234,228,.50);
  --line:rgba(111,184,137,.10);
  --line-strong:rgba(111,184,137,.22);
  --accent:#5E8C6E;
  --accent-rgb:94,140,110;
  --ghost:rgba(111,184,137,.055);
  --hl:rgba(111,184,137,.15);
  --shade:rgba(6,16,10,.42);
  --edge:rgba(227,234,228,.05);
  --overlay:rgba(7,10,9,.66);
  --img-filter:saturate(.80) contrast(1.05) brightness(.95);
  --img-hover:saturate(.96) contrast(1.02) brightness(1);
  --hero-img-filter:saturate(.58) contrast(1.04) brightness(.88) sepia(.16);
  --glass:rgba(var(--bg-rgb),.72);
  --card-bg:rgba(255,255,255,.022);
  --card-shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 28px -14px rgba(0,0,0,.55);
  --card-shadow-hover:0 2px 6px rgba(0,0,0,.30), 0 20px 44px -18px rgba(0,0,0,.62);
  --hero-1:#FFFFFF; --hero-2:#E6E9EC; --hero-3:#BCC2C8;
}
:root[data-theme="warm"]{
  --bg:#120A05; --bg-rgb:18,10,5; --bg-1:#190F08; --bg-2:#20140B; --bg-3:#28190F;
  --metal:#D07458; --metal-bright:#E6C6BC; --metal-dim:#A75B44;
  --text:#EFE8DD;
  --text-dim:rgba(239,232,221,.62);
  --text-mute:rgba(239,232,221,.50);
  --line:rgba(208,116,88,.10);
  --line-strong:rgba(208,116,88,.22);
  --accent:#C4583A;
  --accent-rgb:196,88,58;
  --ghost:rgba(208,116,88,.055);
  --hl:rgba(208,116,88,.15);
  --shade:rgba(18,10,5,.42);
  --edge:rgba(239,232,221,.05);
  --overlay:rgba(11,8,6,.66);
  --img-filter:saturate(.90) contrast(1.04) brightness(.97);
  --img-hover:saturate(1) contrast(1.02) brightness(1.02);
  --hero-img-filter:saturate(.58) contrast(1.04) brightness(.88) sepia(.16);
  --glass:rgba(var(--bg-rgb),.72);
  --card-bg:rgba(255,255,255,.022);
  --card-shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 28px -14px rgba(0,0,0,.55);
  --card-shadow-hover:0 2px 6px rgba(0,0,0,.30), 0 20px 44px -18px rgba(0,0,0,.62);
  --hero-1:#FFFFFF; --hero-2:#E6E9EC; --hero-3:#BCC2C8;
}
:root[data-theme="teal"]{
  --bg:#051015; --bg-rgb:5,16,21; --bg-1:#08151B; --bg-2:#0B1C24; --bg-3:#0E232D;
  --metal:#63B3C5; --metal-bright:#BDDEE5; --metal-dim:#438D9D;
  --text:#E2EAEC;
  --text-dim:rgba(226,234,236,.62);
  --text-mute:rgba(226,234,236,.50);
  --line:rgba(99,179,197,.10);
  --line-strong:rgba(99,179,197,.22);
  --accent:#4FA3B5;
  --accent-rgb:79,163,181;
  --ghost:rgba(99,179,197,.055);
  --hl:rgba(99,179,197,.15);
  --shade:rgba(5,16,21,.42);
  --edge:rgba(226,234,236,.05);
  --overlay:rgba(6,9,11,.66);
  --img-filter:saturate(.80) contrast(1.05) brightness(.95);
  --img-hover:saturate(.96) contrast(1.02) brightness(1);
  --hero-img-filter:saturate(.58) contrast(1.04) brightness(.88) sepia(.16);
  --glass:rgba(var(--bg-rgb),.72);
  --card-bg:rgba(255,255,255,.022);
  --card-shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 28px -14px rgba(0,0,0,.55);
  --card-shadow-hover:0 2px 6px rgba(0,0,0,.30), 0 20px 44px -18px rgba(0,0,0,.62);
  --hero-1:#FFFFFF; --hero-2:#E6E9EC; --hero-3:#BCC2C8;
}
:root[data-theme="cold"]{
  --bg:#070C17; --bg-rgb:7,12,23; --bg-1:#0A1120; --bg-2:#0E1729; --bg-3:#121D33;
  --metal:#7E9DC8; --metal-bright:#C7D4E6; --metal-dim:#4D6F9D;
  --text:#E4E8F2;
  --text-dim:rgba(228,232,242,.62);
  --text-mute:rgba(228,232,242,.50);
  --line:rgba(126,157,200,.10);
  --line-strong:rgba(126,157,200,.22);
  --accent:#5E82B5;
  --accent-rgb:94,130,181;
  --ghost:rgba(126,157,200,.055);
  --hl:rgba(126,157,200,.15);
  --shade:rgba(7,12,23,.42);
  --edge:rgba(228,232,242,.05);
  --overlay:rgba(8,9,13,.66);
  --img-filter:saturate(.82) contrast(1.05) brightness(.95);
  --img-hover:saturate(.97) contrast(1.02) brightness(1);
  --hero-img-filter:saturate(.58) contrast(1.04) brightness(.88) sepia(.16);
  --glass:rgba(var(--bg-rgb),.72);
  --card-bg:rgba(255,255,255,.022);
  --card-shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 28px -14px rgba(0,0,0,.55);
  --card-shadow-hover:0 2px 6px rgba(0,0,0,.30), 0 20px 44px -18px rgba(0,0,0,.62);
  --hero-1:#FFFFFF; --hero-2:#E6E9EC; --hero-3:#BCC2C8;
}
:root[data-theme="gray"]{
  --bg:#0A0B0C; --bg-rgb:10,11,12; --bg-1:#111214; --bg-2:#17191C; --bg-3:#1E2125;
  --metal:#A8B0B8; --metal-bright:#D8DEE4; --metal-dim:#7C848C;
  --text:#E6E9EC;
  --text-dim:rgba(230,233,236,.62);
  --text-mute:rgba(230,233,236,.50);
  --line:rgba(168,176,184,.10);
  --line-strong:rgba(168,176,184,.22);
  --accent:#8B949C;
  --accent-rgb:139,148,156;
  --ghost:rgba(168,176,184,.055);
  --hl:rgba(168,176,184,.15);
  --shade:rgba(10,11,12,.45);
  --edge:rgba(230,233,236,.05);
  --overlay:rgba(10,11,12,.66);
  --img-filter:saturate(.72) contrast(1.04) brightness(.96);
  --img-hover:saturate(.90) contrast(1.02) brightness(1);
  --hero-img-filter:saturate(.58) contrast(1.04) brightness(.88) sepia(.16);
  --glass:rgba(var(--bg-rgb),.72);
  --card-bg:rgba(255,255,255,.022);
  --card-shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 28px -14px rgba(0,0,0,.55);
  --card-shadow-hover:0 2px 6px rgba(0,0,0,.30), 0 20px 44px -18px rgba(0,0,0,.62);
  --hero-1:#FFFFFF; --hero-2:#E8EBEE; --hero-3:#BEC4CA;
}
:root[data-theme="dawn"]{
  --bg:#E9EAEB; --bg-rgb:233,234,235; --bg-1:#DFE1E3; --bg-2:#D5D8DB; --bg-3:#CACED2;
  --metal:#4A525A; --metal-bright:#1C2127; --metal-dim:#6E7883;
  --text:#181C21;
  --text-dim:rgba(24,28,33,.66);
  --text-mute:rgba(24,28,33,.52);
  --line:rgba(24,28,33,.10);
  --line-strong:rgba(24,28,33,.20);
  --accent:#5A646E;
  --accent-rgb:90,100,110;
  --ghost:rgba(24,28,33,.045);
  --hl:rgba(24,28,33,.10);
  --shade:rgba(233,234,235,.22);
  --edge:rgba(24,28,33,.06);
  --overlay:rgba(233,234,235,.78);
  --img-filter:saturate(.90) contrast(1.00) brightness(1.04);
  --img-hover:saturate(.98) contrast(1.00) brightness(1.06);
  --hero-img-filter:saturate(.86) contrast(1.00) brightness(1.00) sepia(.02);
  --glass:rgba(var(--bg-rgb),.72);
  --card-bg:rgba(255,255,255,.52);
  --card-shadow:0 1px 2px rgba(24,28,33,.05), 0 10px 28px -14px rgba(24,28,33,.14);
  --card-shadow-hover:0 2px 6px rgba(24,28,33,.07), 0 20px 44px -18px rgba(24,28,33,.20);
  --hero-1:#0F1317; --hero-2:#2A3138; --hero-3:#525C66;
}

/* 主题无关的常量 */
:root{
  /* 语义色：现状标记 */
  --st-active:#4E9E6A;
  --st-idle:#C9A227;
  --st-gone:#B5483F;

  /* 字阶 */
  --fs-display:clamp(2.4rem,5vw,3.5rem);
  --fs-h1:clamp(1.9rem,3.6vw,2.5rem);
  --fs-h2:clamp(1.35rem,2.2vw,1.75rem);
  --fs-h3:1.125rem;
  --fs-body:1rem;
  --fs-sm:.8125rem;
  --fs-meta:.6875rem;

  /* 间距（8 基数） */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;

  /* 布局 */
  --maxw:1280px;
  --maxw-read:720px;
  --gutter:40px;

  /* 形状：只留两档 */
  --r-1:2px;
  --r-pill:999px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --mono:"SF Mono","JetBrains Mono","Noto Sans Mono CJK SC",Consolas,monospace;

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:200ms;
}

/* ── 重置 ─────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.75;
  min-height:100vh;overflow-x:hidden;
  transition:background .4s var(--ease),color .4s var(--ease);
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:400;line-height:1.25}

/* ── 容器 ─────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-read{max-width:var(--maxw-read)}
.main-content{flex:1;padding-bottom:var(--sp-6)}

/* ── 排版默认值 ───────────────────────────────────────────── */
.t-display{font-size:var(--fs-display);font-weight:200;letter-spacing:-.02em;line-height:1.1;color:var(--metal-bright)}
.t-h1{font-size:var(--fs-h1);font-weight:300;letter-spacing:-.01em;color:var(--metal-bright)}
.t-h2{font-size:var(--fs-h2);font-weight:400;color:var(--metal-bright)}
.t-h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:.02em;color:var(--metal-bright)}
.t-body{font-size:var(--fs-body);color:var(--text)}
.t-sm{font-size:var(--fs-sm);color:var(--text-dim)}
.t-meta{font-family:var(--mono);font-size:var(--fs-meta);font-weight:500;letter-spacing:.16em;color:var(--text-mute);text-transform:uppercase}
.t-num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ── 分割线 ───────────────────────────────────────────────── */
.rule{height:1px;background:var(--line);border:0}

/* ── 可见性 ───────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 进场动效 ─────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.reveal{opacity:0;animation:fadeUp .4s var(--ease) forwards}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ── 响应式 ───────────────────────────────────────────────── */
@media(max-width:1024px){:root{--gutter:32px}}
@media(max-width:720px){:root{--gutter:20px;--fs-h3:1.0625rem}}

/* ── 可访问性：键盘焦点 ─────────────────────────────────── */
:focus-visible{outline:2px solid var(--metal);outline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--metal);outline-offset:3px}

/* ── 跳转到主内容 ─────────────────────────────────────── */
.skip-link{position:absolute;left:16px;top:-80px;z-index:200;padding:10px 18px;
  background:var(--metal);color:var(--bg);font-size:13px;letter-spacing:.06em;
  transition:top .2s var(--ease)}
.skip-link:focus{top:12px}

/* ── 移动端导航 ───────────────────────────────────────── */
.nav-toggle{display:none;align-items:center;justify-content:center;min-width:44px;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;color:var(--text-dim);padding:10px 0;margin-left:auto;min-height:44px}
.nav-toggle i{display:block;width:16px;height:1px;background:currentColor;position:relative}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:16px;height:1px;background:currentColor}
.nav-toggle i::before{top:-5px}
.nav-toggle i::after{top:5px}

@media(max-width:1024px){
  .nav-toggle{display:flex}
  .site-nav{display:none;position:fixed;left:0;right:0;top:64px;z-index:60;
    flex-direction:column;gap:0;margin:0;padding:6px var(--gutter) 20px;
    background:var(--bg);border-bottom:1px solid var(--line-strong);
    box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;min-height:48px;
    display:flex;align-items:center}
  .site-nav a[aria-current="page"]::after{display:none}
  .site-nav a[aria-current="page"]{color:var(--metal)}
  .pager a,.pager span{min-width:44px;min-height:44px}
  .filter-item{min-height:44px;display:inline-flex;align-items:center;padding-right:20px}
  .seg button{min-width:44px;min-height:44px;padding:0 10px}
  .card-py,.skind,.shot,.station-card .py{font-size:10px;letter-spacing:.12em}
}

/* 桌面端触控目标下限（隔离，避免覆盖移动端） */
@media(min-width:1025px){
  .seg button{min-height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center}
  .pager a,.pager span{min-width:28px;min-height:28px;display:inline-flex;align-items:center;justify-content:center}
  .filter-item{min-height:32px;display:inline-flex;align-items:center}
}

/* ── 配色下拉（替换原四按钮 seg） ───────────────────────────── */
.theme-pick{position:relative;display:inline-block}
.theme-pick>summary{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r-1);
  background:transparent;color:var(--text-dim);cursor:pointer;
  font:inherit;font-size:var(--fs-sm);line-height:1;
  list-style:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.theme-pick>summary::-webkit-details-marker{display:none}
.theme-pick>summary::marker{content:""}
.theme-pick>summary:hover{color:var(--text);border-color:var(--metal-dim)}
.theme-pick[open]>summary{color:var(--text);border-color:var(--metal-dim)}
.tp-dot{
  width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--c,var(--metal));
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
}
.tp-arrow{flex:none;opacity:.55;transition:transform .18s var(--ease)}
.theme-pick[open] .tp-arrow{transform:rotate(180deg)}
.tp-list{
  position:absolute;top:calc(100% + 8px);right:0;z-index:90;
  min-width:156px;margin:0;padding:6px;list-style:none;
  background:var(--bg-1);
  border:1px solid var(--line-strong);
  border-radius:var(--r-1);
  box-shadow:0 14px 36px rgba(0,0,0,.42);
}
.tp-list button{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;border:0;border-radius:2px;
  background:transparent;color:var(--text-dim);
  font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer;
}
.tp-list button i{width:11px;height:11px;border-radius:50%;background:var(--c);flex:none}
.tp-list button span{flex:1}
.tp-list button:hover{background:var(--ghost);color:var(--text)}
.tp-list button[aria-selected="true"]{color:var(--text);background:var(--hl)}
.tp-list button[aria-selected="true"]::after{content:"✓";font-size:11px;color:var(--metal);margin-left:4px}
@media (max-width:1024px){
  .tp-list{right:auto;left:0}
}