/* 总入口（WO-222 门面）。一纸一墨一朱：暖纸底、墨字、朱砂只做印与路线；宋体立题，黑体说话；
   气派靠尺度与留白——门楣整屏、平面图整幅、截图原比例；零外部资源（字体只用读者机器上有的）。 */
:root {
  --paper: #f6f1e8; --paper-2: #efe8db; --ink: #1d1c19; --mute: #6b665c; --line: #d9d3c7; --red: #c8102e; --card: #fcfaf5;
  --serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
  --sans: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --w: 72rem;
}
/* 主题：缺省跟随系统；页头按钮可钉成浅 / 深（html[data-theme]，theme.js 记在本机） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #15130f; --paper-2: #1c1914; --ink: #ebe5d9; --mute: #a39d90; --line: #35312a; --card: #1e1b15; }
}
:root[data-theme="dark"] { --paper: #15130f; --paper-2: #1c1914; --ink: #ebe5d9; --mute: #a39d90; --line: #35312a; --card: #1e1b15; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.85 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .seal, .station__no, .map__title, .card strong { font-family: var(--serif); font-weight: 500; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
.gate, main, .foot, .map { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* ── 门楣：日期行、印；左题右码；整屏高 ───────────────────────────── */
.bar { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: .82rem; letter-spacing: .14em; color: var(--mute); }
.bar__kind { margin-left: auto; }
.bar__theme { font: inherit; letter-spacing: .14em; color: var(--mute); background: none; border: 1px solid var(--line); border-radius: 999px; padding: .15em .9em; cursor: pointer; }
.bar__theme:hover, .bar__theme:focus-visible { color: var(--red); border-color: var(--red); background: none; }
.seal { display: inline-block; border: 2.5px solid var(--red); color: var(--red); padding: .32em .5em; line-height: 1.25; font-size: .74rem; letter-spacing: .14em; text-align: center; border-radius: 3px; transform: rotate(-4deg); white-space: nowrap; }
.seal--small { margin-left: .8rem; padding: .08em .45em; font-size: .7rem; transform: rotate(-2deg); vertical-align: middle; }
.gate__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; padding: 5rem 0 3.5rem; min-height: min(78vh, 46rem); }
.gate__hall { margin: 0 0 .4rem; letter-spacing: .3em; color: var(--mute); font-size: .95rem; }
.gate h1 { margin: 0; font-size: clamp(3rem, 8.5vw, 6.4rem); line-height: 1.08; letter-spacing: .06em; }
.gate__sub { margin: 1.6rem 0 0; font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 30em; color: var(--ink); }
.gate__promise { margin: .9rem 0 0; font-family: var(--serif); font-size: 1.15rem; letter-spacing: .14em; color: var(--red); }
.gate__nav { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .9rem; letter-spacing: .12em; }
.gate__nav a { color: var(--mute); border-bottom: 1px solid transparent; padding-bottom: .1em; }
.gate__nav a:hover, .gate__nav a:focus-visible { color: var(--red); border-color: var(--red); }
.take { margin: 0; text-align: center; color: var(--mute); font-size: .8rem; letter-spacing: .12em; }
.take svg { width: 10.5rem; height: 10.5rem; margin: 0 auto .6rem; background: #fff; padding: .6rem; border: 1px solid var(--line); }

/* ── 平面图：整幅，左题右图；路线画入一次 ─────────────────────────── */
.map { padding-top: 2rem; padding-bottom: 2rem; }
.map__inner { display: grid; grid-template-columns: minmax(16rem, 2fr) minmax(0, 5fr); gap: 3rem; align-items: center; padding: 3rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.map__title { margin: 0 0 .8rem; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: .06em; }
.map__lead { margin: 0; color: var(--mute); max-width: 24em; }
.map__stats { margin: 1.4rem 0 0; padding: 0; list-style: none; display: flex; gap: 2rem; flex-wrap: wrap; }
.map__stats b { display: block; font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: .02em; }
.map__stats span { font-size: .8rem; letter-spacing: .14em; color: var(--mute); }
.map__legend { margin: 1.4rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--mute); }
.map__legend i { display: inline-block; width: .7em; height: .7em; border-radius: 2px; margin-right: .35em; vertical-align: -.05em; }
svg.map { width: 100%; height: auto; }
.outline { fill: none; stroke: var(--ink); stroke-width: .35; stroke-linejoin: round; }
.zone { fill-opacity: .16; stroke-width: .18; stroke-opacity: .75; }
.lattice line { stroke: var(--ink); stroke-opacity: .06; stroke-width: .12; }
.counter { stroke-width: .6; stroke-linecap: round; }
.win { stroke: none; }
.door { fill: var(--paper); stroke: var(--ink); stroke-width: .3; }
.fac { fill: var(--line); stroke: none; }
.zl { font-family: var(--serif); font-size: 3px; text-anchor: middle; }
.fl { font-family: var(--sans); font-size: 1.6px; text-anchor: middle; fill: var(--mute); }
.route { fill: none; stroke: var(--red); stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--route-len); stroke-dashoffset: var(--route-len); animation: draw 2.6s .5s ease-out forwards; }
.you { fill: var(--red); } .goal { fill: none; stroke: var(--red); stroke-width: .35; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .route { animation: none; stroke-dashoffset: 0; } }

/* ── 站：编号、站名、端名；左文右图 ─────────────────────────────── */
.station { padding: 4.5rem 0 0; }
.station--aside { padding-top: 3rem; }
.station__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1.4rem; }
.station__no { font-size: .9rem; letter-spacing: .3em; color: var(--red); }
.station__head h2 { margin: 0; font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: .06em; line-height: 1.2; }
.station__end { font-size: 1rem; letter-spacing: .16em; color: var(--mute); }
.state { font-size: .8rem; letter-spacing: .14em; color: var(--mute); }
.state[data-online="1"] { color: var(--ink); }
.state[data-online="1"]::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .4em; border-radius: 50%; background: var(--red); vertical-align: middle; }
.station__grid { display: grid; grid-template-columns: minmax(18rem, 3fr) minmax(0, 4fr); gap: 2.5rem 4rem; align-items: start; }
.station__grid--wide { grid-template-columns: minmax(0, 1fr); }
.station__lead { margin: 0 0 1.4rem; font-size: 1.08rem; max-width: 34em; }
.station__note { margin: 1.2rem 0 0; color: var(--mute); font-size: .9rem; max-width: 34em; }
.off { margin: .4rem 0 0; color: var(--mute); letter-spacing: .14em; }
.built { margin: .8rem 0 0; color: var(--mute); font-size: .82rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* 链接卡：名字宋体加粗，一句说明；横排自动换行 */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.station__grid--wide .cards { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.card a { display: block; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 4px; transition: border-color .2s, transform .2s; }
.card a:hover, .card a:focus-visible { border-color: var(--red); transform: translateY(-2px); }
.card strong { display: block; font-size: 1.15rem; letter-spacing: .04em; }
.card span { display: block; color: var(--mute); font-size: .88rem; margin-top: .2rem; }
.card small { display: block; color: var(--mute); font-size: .74rem; margin-top: .5rem; letter-spacing: .04em; overflow-wrap: anywhere; }

/* 截图：原比例，细边；手机截图并排成一排 */
.shots { margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); align-items: start; }
.shots--wide { grid-template-columns: 1fr; }
.shots figure { margin: 0; }
.shots img { width: 100%; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.shots figcaption { margin-top: .4rem; font-size: .78rem; letter-spacing: .1em; color: var(--mute); text-align: center; }

/* 小程序码：一张图、码龄、一个按钮 */
.qr { margin: 0; display: flex; align-items: flex-end; gap: 1.2rem; flex-wrap: wrap; }
.qr img { width: 13.5rem; border: 1px solid var(--line); background: #fff; padding: .4rem; }
.qr figcaption { color: var(--mute); font-size: .82rem; font-variant-numeric: tabular-nums; }
.stale { color: var(--red); }
.act { margin: 1rem 0 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
button { font: inherit; font-family: var(--sans); letter-spacing: .14em; padding: .45em 1.3em; color: var(--paper); background: var(--ink); border: 0; border-radius: 3px; cursor: pointer; }
button:hover, button:focus-visible { background: var(--red); }
button[disabled] { background: var(--line); color: var(--mute); cursor: progress; }
.job { color: var(--mute); font-size: .85rem; font-variant-numeric: tabular-nums; }

.foot { margin-top: 6rem; padding-top: 1.4rem; padding-bottom: 3rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; color: var(--mute); font-size: .8rem; letter-spacing: .08em; }
.foot__version { margin: 0; }

@media (max-width: 900px) {
  .gate__grid, .map__inner, .station__grid { grid-template-columns: minmax(0, 1fr); }
  .gate__grid { min-height: 0; padding: 3rem 0 2.5rem; }
  .take { text-align: left; }
  .take svg { margin: 0 0 .5rem; }
}
@media (max-width: 600px) {
  .gate, main, .foot, .map { padding: 0 16px; }
  .bar { gap: .8rem; font-size: .74rem; }
  .gate h1 { font-size: 2.9rem; }
  .station { padding-top: 3.2rem; }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .shots--wide { grid-template-columns: 1fr; }
  .qr img { width: 11rem; }
}