:root {
  color-scheme: light;
  --dark: #091424;
  --paper: #f3f2ee;
  --ink: #122038;
  --blue: #214bb2;
  --red: #ee534b;
  --silver: #b9cced;
  --line: #c6ceda;
  --mono: "Bahnschrift", "Consolas", monospace;
  --sans: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.7 var(--sans); color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #da654d; outline-offset: 5px; }
p, h1, h2, h3, ol, ul { margin: 0; }
img { display: block; max-width: 100%; }
.wrap { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.skip { position: absolute; top: -80px; left: 1rem; z-index: 10; padding: .65rem; background: white; color: black; }
.skip:focus { top: 1rem; }
.header { color: #f2f5fd; background: var(--dark); border-bottom: 1px solid #253653; }
.mast { display: flex; min-height: 77px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand strong, .brand small { display: block; line-height: 1.35; }
.brand strong { font-size: 17px; letter-spacing: .02em; }
.brand small { margin-top: 3px; color: var(--silver); font-size: 11px; }
.mast nav { display: flex; align-items: center; gap: clamp(18px, 4vw, 51px); color: #cdd9ee; font-size: 14px; }
.mast nav a:hover, .header-join:hover { color: #fff; }
.header-join { border: 1px solid #5272ae; padding: 8px 15px; font-size: 13px; white-space: nowrap; }
.header-join span { color: #9bbaff; margin-left: 6px; }
.hero { overflow: hidden; color: #f3f6fe; background: var(--dark); }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 18px; min-height: 586px; }
.hero-copy { padding: 60px 0 62px; z-index: 1; }
.signal-label, .kicker, .art-label, .art-caption, .dispatch-bar, footer a { font-family: var(--mono), var(--sans); letter-spacing: .13em; }
.signal-label { display: flex; align-items: center; gap: 13px; color: #c3d4f8; font-size: 13px; font-weight: bold; }
.signal { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; background: var(--red); border-radius: 50%; box-shadow: 0 0 13px #ee534b77; }
h1 { margin-block: 22px 20px; font-size: clamp(49px, 6.1vw, 88px); font-weight: 900; letter-spacing: -.07em; line-height: 1.15; }
h1 span { display: inline-block; color: #afcaff; }
.intro { max-width: 470px; color: #d1dbef; font-size: 17px; line-height: 1.95; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 29px; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 48px; padding: 9px 16px; font-size: 14px; font-weight: 700; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.button-primary { color: #fff; background: #2a54c0; border-color: #6688eb; }
.button-primary:hover { background: #2045a1; }
.button-outline { border-color: #536887; color: #e1ebff; }
.button-outline:hover { background: #182c50; border-color: #94b5ff; }
.fine { margin-top: 22px; font-size: 12px; color: #a5b7d6; }
.fine span { margin-inline: 4px; color: #7189b5; }
.hero-art { position: relative; display: grid; min-width: 0; place-items: center; min-height: 500px; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; z-index: -2; inset: -40px -90px -40px -125px; background: url("assets/switchyard.svg") center / cover no-repeat; }
.hero-art::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 49%, #3457ae42, transparent 70%); }
.badge-ring { width: min(100%, 425px); filter: drop-shadow(0 18px 39px #030813a8); }
.badge-ring img { width: 100%; height: auto; animation: arrive .7s ease-out both; }
@keyframes arrive { from { opacity: .25; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.art-label, .art-caption { position: absolute; font-size: 10px; color: #a3b8e4; }
.art-label { top: 24px; right: 5px; }
.art-label span { color: #ec7468; margin-right: 7px; }
.art-caption { bottom: 16px; left: 15px; right: 5px; display: flex; justify-content: space-between; gap: 9px; }
.rail-footer { height: 25px; display: flex; justify-content: space-around; align-items: center; border-block: 1px solid #31456a; opacity: .78; }
.rail-footer i { width: 1px; height: 9px; transform: rotate(26deg); background: #6480b5; }
.section { padding-block: 83px; scroll-margin-top: 24px; }
.section-intro { display: grid; grid-template-columns: 1fr .72fr; gap: 40px; align-items: end; margin-bottom: 42px; }
.kicker { color: #345a9f; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
h2 { font-size: clamp(35px, 4.2vw, 61px); letter-spacing: -.055em; line-height: 1.17; }
.section-intro > p, .about-grid > div > p:last-child { color: #435675; max-width: 430px; }
.route-list { padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); list-style: none; }
.route-list li { border-top: 2px solid #5676b0; position: relative; padding: 34px 24px 4px 0; }
.station { position: absolute; top: -16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 13px var(--mono); color: #fff; background: #214795; border: 3px solid var(--paper); }
.route-list li:nth-child(2) .station { background: #b73734; }
h3 { font-size: 25px; line-height: 1.3; }
.route-list li p { margin-block: 11px 17px; color: #425371; max-width: 255px; }
.route-list li a, .text-link { color: #21428c; font-size: 14px; font-weight: bold; }
.route-list li a:hover, .text-link:hover, .resource-list a:hover strong, footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.open { color: #edf4ff; background: #112342; border-block: 1px solid #2a416a; }
.open-grid, .about-grid { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(26px, 7vw, 105px); align-items: start; }
.open .kicker { color: #a8c6ff; }
.open-intro { color: #cfdbf2; margin-top: 18px; max-width: 505px; line-height: 1.9; }
.open .text-link { color: #c5d7ff; padding: 8px; }
.dispatch { border: 1px solid #5d759d; background: #152a4d; }
.dispatch-bar { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #4a658e; padding: 9px 18px; font-size: 11px; color: #c2d4f6; }
.dispatch h3 { padding: 19px 18px 0; font-size: 20px; }
.dispatch ol { padding: 11px 25px 6px 42px; color: #e1e9fa; font-size: 14px; }
.dispatch li { margin-bottom: 5px; padding-left: 4px; }
.dispatch li::marker { color: #a9c2ff; font-family: var(--mono); }
.dispatch > p { padding: 7px 18px 16px; color: #b4c6e9; font-size: 13px; }
.about-grid > div > p:last-child { margin-top: 17px; }
.resource-list { list-style: none; padding: 0; border-bottom: 1px solid var(--line); }
.resource-list li { border-top: 1px solid var(--line); }
.resource-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 4px; }
.resource-list strong, .resource-list small { display: block; }
.resource-list small { color: #506280; }
.resource-list a > span:last-child { color: #2550af; font-size: 19px; }
footer { border-top: 1px solid #253653; color: #c9d9f5; background: var(--dark); font-size: 13px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; min-height: 74px; gap: 12px; }
@media (max-width: 950px) {
  .wrap { width: calc(100% - 62px); }
  .hero-grid { min-height: 506px; }
  .hero-art { min-height: 420px; }
  .art-caption span:first-child { display: none; }
  .art-caption { justify-content: flex-end; }
  h1 { font-size: clamp(45px, 6.5vw, 65px); }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 38px); }
  .mast { min-height: 68px; gap: 7px; flex-wrap: wrap; padding-block: 9px; }
  .mast nav { order: 3; width: 100%; justify-content: space-between; gap: 8px; padding: 6px 2px 0; border-top: 1px solid #2b3c5a; font-size: 13px; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding: 43px 0 9px; }
  h1 { font-size: clamp(43px, 10vw, 67px); margin-block: 16px 15px; }
  .intro { font-size: 15px; }
  .actions { gap: 8px; margin-top: 21px; }
  .button { padding-inline: 12px; font-size: 13px; }
  .fine { margin-top: 13px; }
  .hero-art { min-height: 343px; }
  .hero-art::before { inset: -10px -24px -10px; }
  .badge-ring { width: min(79%, 320px); }
  .art-label { top: 11px; right: 0; }
  .art-caption { bottom: 8px; right: 0; }
  .rail-footer { height: 17px; }
  .rail-footer i:nth-child(even) { display: none; }
  .section { padding-block: 53px; }
  .section-intro, .open-grid, .about-grid { grid-template-columns: 1fr; gap: 16px; }
  .section-intro { margin-bottom: 25px; }
  .route-list { grid-template-columns: 1fr; padding-left: 18px; }
  .route-list li { border-top: 0; border-left: 2px solid #5676b0; padding: 4px 0 28px 24px; }
  .route-list li:last-child { padding-bottom: 3px; }
  .station { left: -17px; top: 1px; }
  .route-list li p { margin: 5px 0 7px; max-width: 100%; }
  .resource-list { margin-top: 8px; }
  .dispatch { margin-top: 9px; }
  .footer-row { flex-wrap: wrap; padding-block: 18px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}