/* 本地内嵌字体：随网站提供，无 CDN 或在线字体请求。 */
@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/space-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("./fonts/space-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* 修改以下颜色可以调整页面配色。字体、图形均来自本地，无需联网。 */
:root {
  --background: #070b10;
  --text: #eef3f8;
  --accent: #9ae8f5;
  --muted: #80909e;
  --line: rgba(164, 200, 218, 0.18);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Space Grotesk", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--background); }

.page {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 42px clamp(24px, 6.25vw, 112px) 54px;
  background:
    radial-gradient(ellipse at 81% 43%, rgba(24, 80, 105, 0.13), transparent 47%),
    linear-gradient(120deg, #0a1018 0%, var(--background) 58%);
}

.page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 193, 214, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 193, 214, 0.025) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(90deg, transparent 25%, #000);
  pointer-events: none;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 32px;
  flex: 0 0 auto;
}

.insignia { width: 34px; height: 32px; color: var(--accent); }

.masthead-line { flex: 1; height: 1px; background: var(--line); }

.signal { display: flex; gap: 5px; }
.signal span { width: 3px; height: 12px; background: var(--accent); }
.signal span:nth-child(2) { opacity: 0.45; }
.signal span:nth-child(3) { opacity: 0.18; }

.hero {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  min-height: 510px;
  padding: 92px 0 104px;
}

h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 1100px;
  font-size: clamp(48px, 6.45vw, 108px);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.title-line { display: block; }
.conjunction { color: var(--muted); font-weight: 300; }

.corporation {
  display: block;
  color: var(--accent);
}

.orbital {
  position: absolute;
  z-index: -1;
  width: min(59vw, 830px);
  aspect-ratio: 1;
  top: 50%;
  right: -13%;
  transform: translateY(-50%);
  opacity: 0.75;
  pointer-events: none;
}

.orbital svg { display: block; width: 100%; height: 100%; overflow: visible; }

.orbit-path { transform-origin: 360px 360px; animation: orbit 100s linear infinite; }

.branches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
}

.branch {
  position: relative;
  padding: 32px 32px 16px 0;
}

.branch + .branch { padding-left: 34px; }

.branch + .branch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 16px;
  width: 1px;
  background: var(--line);
}

.branch::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(154, 232, 245, 0.25);
}

.branch + .branch::after { left: 34px; }

h2 { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.4; }

.section-name {
  display: block;
  margin-bottom: 15px;
  color: var(--accent);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.separator { color: var(--muted); }
.course-name { display: block; letter-spacing: -0.015em; }

@keyframes orbit { to { transform: rotate(360deg); } }

@media (min-width: 1600px) {
  .page { padding-top: 54px; padding-bottom: 64px; }
  .hero { min-height: 620px; }
  h2 { font-size: 23px; }
}

@media (max-width: 900px) {
  .page { padding: 30px 34px 36px; }
  .hero { min-height: 480px; padding: 100px 0; }
  h1 { font-size: clamp(48px, 7.5vw, 68px); }
  .orbital { width: 78vw; right: -32%; opacity: 0.45; }
  .branch { padding-right: 18px; }
  .branch + .branch { padding-left: 20px; }
  .branch + .branch::after { left: 20px; }
  h2 { font-size: 17px; }
  .section-name { font-size: 10px; letter-spacing: 0.1em; }
}

@media (max-width: 600px) {
  .page { padding: 25px 24px 28px; }
  .masthead { gap: 20px; }
  .insignia { width: 28px; height: 28px; }
  .hero { min-height: 380px; padding: 84px 0 78px; }
  h1 { font-size: clamp(30px, 8.4vw, 50px); letter-spacing: -0.05em; }
  .orbital { width: 110vw; right: -58%; top: 47%; opacity: 0.38; }
  .branches { grid-template-columns: 1fr; }
  .branch, .branch + .branch { padding: 24px 0; }
  .branch + .branch { border-top: 1px solid var(--line); }
  .branch + .branch::before { display: none; }
  .branch + .branch::after { left: 0; }
  .section-name { margin-bottom: 9px; font-size: 10px; }
  h2 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-path { animation: none; }
}