:root {
  --ink: #f6ead0;
  --paper: #fff8ea;
  --deep: #091817;
  --deep-2: #102721;
  --bronze: #c8913e;
  --gold: #f1c56b;
  --jade: #3cb28d;
  --vermillion: #b9402e;
  --blue: #5a94bd;
  --muted: rgba(246, 234, 208, 0.72);
  --line: rgba(246, 234, 208, 0.16);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--deep);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 72% 18%, rgba(200, 145, 62, 0.2), transparent 34%),
    linear-gradient(180deg, #061211 0%, #10251f 56%, #07110f 100%);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 74px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  background: rgba(7, 17, 15, 0.76);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-seal {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(241, 197, 107, 0.55);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-weight: 800;
  background: rgba(241, 197, 107, 0.08);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 18px;
}

.brand small {
  margin-top: 3px;
  color: var(--muted);
}

.top-nav {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.nav-link,
.ghost-button,
.primary-button,
.layer-switch button,
.report-card button,
td button {
  border: 0;
  min-height: 42px;
}

.nav-link {
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  transition: color 180ms ease, background 180ms ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--ink);
  background: rgba(246, 234, 208, 0.12);
}

.primary-button {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--bronze));
  color: #102016;
  padding: 0 18px;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(200, 145, 62, 0.2);
}

.primary-button.large {
  min-height: 50px;
  padding: 0 22px;
}

.ghost-button {
  border-radius: 999px;
  background: rgba(246, 234, 208, 0.1);
  color: var(--ink);
  padding: 0 18px;
  border: 1px solid var(--line);
}

main {
  padding-top: 74px;
}

.view {
  display: none;
  animation: reveal 420ms ease both;
}

.view.active {
  display: block;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero {
  min-height: calc(100svh - 74px);
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr);
  gap: 24px;
  align-items: center;
  padding: 52px clamp(24px, 5vw, 76px) 36px;
  overflow: hidden;
}

.story-front {
  min-height: calc(100svh - 74px);
  display: grid;
  grid-template-columns: minmax(280px, 0.48fr) minmax(420px, 0.92fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding: 56px clamp(24px, 7vw, 108px) 42px;
  background:
    linear-gradient(90deg, rgba(6, 18, 17, 0.94), rgba(6, 18, 17, 0.58)),
    url("data:image/svg+xml,%3Csvg width='1400' height='820' viewBox='0 0 1400 820' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1400' height='820' fill='%23081413'/%3E%3Cg stroke='%23c8913e' stroke-opacity='.25' fill='none'%3E%3Ccircle cx='1040' cy='410' r='310'/%3E%3Ccircle cx='1040' cy='410' r='220'/%3E%3Cpath d='M1040 100 V720 M730 410 H1350 M820 190 L1260 630 M1260 190 L820 630'/%3E%3C/g%3E%3Cpath d='M900 650 L1040 170 L1180 650' stroke='%23f1c56b' stroke-width='8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M950 510 H1130' stroke='%23f1c56b' stroke-width='8'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

.discovery-wall {
  position: relative;
  grid-template-columns: 1fr;
  padding: 0;
  min-height: calc(100svh - 74px);
  overflow: hidden;
}

.panorama-home {
  position: relative;
  min-height: calc(100svh - 74px);
  overflow: hidden;
  background: #d9e8ee;
}

.panorama-top {
  position: absolute;
  z-index: 8;
  top: 22px;
  left: 28px;
  right: 28px;
  display: grid;
  grid-template-columns: 120px 120px minmax(260px, 440px);
  justify-content: space-between;
  align-items: start;
  gap: 18px;
}

.wall-image,
.wall-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.illustration-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #cfe5ef 0%, #f3e5bb 54%, #16251e 55%, #0b1815 100%);
}

.scene-sky {
  position: absolute;
  inset: 0 0 45%;
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 239, 178, 0.85), transparent 11%),
    linear-gradient(120deg, rgba(255,255,255,.52), transparent 45%),
    repeating-linear-gradient(165deg, rgba(255,255,255,.22) 0 2px, transparent 2px 34px);
}

.sun {
  position: absolute;
  right: 17%;
  top: 13%;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #ffe08a;
  box-shadow: 0 0 70px rgba(255, 224, 138, .82);
}

.guo-figure {
  position: absolute;
  left: 13%;
  bottom: 18%;
  width: min(20vw, 260px);
  min-width: 160px;
  z-index: 2;
  text-align: center;
}

.guo-figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 8px solid rgba(246,234,208,.72);
  box-shadow: 0 28px 70px rgba(0,0,0,.36);
  filter: sepia(.2) contrast(1.05);
}

.guo-figure span,
.observatory-stage span {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-weight: 900;
}

.observatory-stage {
  position: absolute;
  left: 42%;
  bottom: 21%;
  width: min(22vw, 300px);
  min-width: 170px;
  z-index: 3;
  text-align: center;
}

.observatory-stage img {
  width: 100%;
  filter: drop-shadow(0 32px 38px rgba(0,0,0,.34));
}

.shadow-line {
  position: absolute;
  left: 51%;
  bottom: 18%;
  width: 30%;
  height: 18px;
  background: linear-gradient(90deg, rgba(0,0,0,.36), transparent);
  transform: skewX(-24deg);
  transform-origin: left;
}

.china-silhouette {
  position: absolute;
  right: 8%;
  bottom: 16%;
  width: min(34vw, 520px);
  opacity: .72;
  filter: sepia(.25) saturate(.7) drop-shadow(0 22px 34px rgba(0,0,0,.28));
}

.china-silhouette img {
  width: 100%;
}

.survey-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(241,197,107,.9), transparent);
  transform-origin: left center;
  z-index: 4;
}

.line-a { left: 53%; bottom: 39%; width: 28%; transform: rotate(-18deg); }
.line-b { left: 53%; bottom: 39%; width: 26%; transform: rotate(12deg); }
.line-c { left: 53%; bottom: 39%; width: 22%; transform: rotate(42deg); }

.school-dot {
  position: absolute;
  z-index: 5;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f1c56b;
  box-shadow: 0 0 0 9px rgba(241,197,107,.18);
}

.single-panorama {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dot-a { right: 23%; bottom: 51%; }
.dot-b { right: 16%; bottom: 38%; }
.dot-c { right: 29%; bottom: 27%; }

.wall-image {
  object-fit: cover;
  filter: saturate(0.95) contrast(1.04) brightness(0.74);
}

.wall-shade {
  background:
    linear-gradient(90deg, rgba(5, 17, 15, 0.82), rgba(5, 17, 15, 0.08) 48%, rgba(5, 17, 15, 0.46)),
    linear-gradient(0deg, rgba(5, 17, 15, 0.78), transparent 48%);
}

.wall-copy {
  position: absolute;
  left: clamp(24px, 6vw, 92px);
  bottom: clamp(42px, 8vw, 112px);
  z-index: 2;
  max-width: 760px;
}

.portrait-chip {
  position: absolute;
  z-index: 3;
  top: 28px;
  left: clamp(24px, 5vw, 72px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(246, 234, 208, 0.22);
  background: rgba(5, 17, 15, 0.66);
  backdrop-filter: blur(12px);
}

.portrait-chip img {
  width: 54px;
  height: 54px;
  object-fit: cover;
}

.portrait-chip strong,
.portrait-chip span {
  display: block;
}

.portrait-chip span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.wall-hotspot {
  position: absolute;
  z-index: 4;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
}

.wall-hotspot span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: #f07d10;
  font-size: 34px;
  line-height: 1;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.18), 0 18px 42px rgba(0, 0, 0, 0.3);
  transition: transform 160ms ease, background 160ms ease;
}

.wall-hotspot strong {
  padding: 8px 12px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.74);
  font-size: clamp(15px, 1.4vw, 22px);
}

.wall-hotspot:hover span {
  transform: scale(1.1);
  background: #fff;
}

.wall-hotspot.simple strong {
  font-size: 16px;
  padding: 7px 11px;
}

.h-guo { left: 33%; top: 48%; }
.h-observatory { left: 58%; top: 40%; }
.h-blueprint { left: 44%; top: 61%; }
.h-tools { left: 79%; top: 73%; }

.portrait-panel {
  position: relative;
  border: 1px solid rgba(241, 197, 107, 0.35);
  background: rgba(246, 234, 208, 0.08);
  box-shadow: var(--shadow);
  min-height: 600px;
  overflow: hidden;
}

.portrait-panel img {
  width: 100%;
  height: 100%;
  min-height: 600px;
  object-fit: cover;
  filter: sepia(0.28) contrast(1.06);
}

.portrait-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(6, 18, 17, 0.86));
}

.portrait-panel span {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  color: var(--muted);
  font-size: 13px;
}

.story-copy {
  max-width: 820px;
}

.story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-copy {
  max-width: 720px;
  position: relative;
  z-index: 2;
}

.kicker {
  margin: 0 0 14px;
  color: var(--gold);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 18px;
  font-size: clamp(44px, 7vw, 102px);
  line-height: 0.98;
  font-weight: 900;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.15;
}

p {
  color: var(--muted);
  line-height: 1.8;
}

.hero-lead {
  max-width: 640px;
  font-size: clamp(17px, 1.7vw, 22px);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hero-map,
.grand-map {
  position: relative;
  min-height: 650px;
  border: 1px solid rgba(246, 234, 208, 0.18);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(4, 13, 12, 0.12), rgba(4, 13, 12, 0.42)),
    url("data:image/svg+xml,%3Csvg width='1260' height='820' viewBox='0 0 1260 820' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1260' height='820' fill='%230c211d'/%3E%3Cpath d='M224 394 C244 300 320 226 458 190 C583 158 706 179 842 244 C974 306 1062 388 1050 505 C1038 622 925 694 781 702 C660 710 569 665 448 655 C320 644 198 606 166 504 C152 459 174 430 224 394Z' fill='%23254a3b' stroke='%23c8913e' stroke-width='3'/%3E%3Cpath d='M222 394 C366 426 502 403 626 438 C758 475 865 542 996 514' fill='none' stroke='%23597d65' stroke-width='2' stroke-dasharray='10 10'/%3E%3Cpath d='M475 193 C520 270 563 332 648 372 C735 413 842 388 944 446' fill='none' stroke='%23597d65' stroke-width='2' stroke-dasharray='10 10'/%3E%3Cpath d='M648 214 C610 316 606 442 658 681' fill='none' stroke='%23597d65' stroke-width='2' stroke-dasharray='10 10'/%3E%3Cpath d='M323 548 C432 505 544 492 664 520 C760 543 846 587 949 575' fill='none' stroke='%23597d65' stroke-width='2' stroke-dasharray='10 10'/%3E%3Ccircle cx='640' cy='420' r='270' fill='none' stroke='%23f1c56b' stroke-opacity='.12' stroke-width='1'/%3E%3Ccircle cx='640' cy='420' r='390' fill='none' stroke='%23f1c56b' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

.real-map {
  background: linear-gradient(135deg, rgba(8, 23, 21, 0.95), rgba(18, 47, 39, 0.84));
}

.china-map-img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  opacity: 0.86;
  filter: sepia(0.24) saturate(0.82) hue-rotate(8deg) contrast(1.08)
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.22));
}

.hero-map::before,
.grand-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(246, 234, 208, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 234, 208, 0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 55% 50%, black 0 62%, transparent 83%);
  z-index: -1;
}

.ancient-route {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(241, 197, 107, 0.9), transparent);
  height: 1px;
  transform-origin: left center;
  opacity: 0.88;
}

.route-north {
  width: 44%;
  left: 49%;
  top: 50%;
  transform: rotate(-82deg);
}

.route-south {
  width: 42%;
  left: 49%;
  top: 50%;
  transform: rotate(83deg);
}

.route-east {
  width: 38%;
  left: 49%;
  top: 50%;
  transform: rotate(14deg);
}

.map-label {
  position: absolute;
  color: var(--gold);
  font-weight: 800;
  font-size: 14px;
  padding: 5px 9px;
  background: rgba(9, 24, 23, 0.68);
  border: 1px solid rgba(241, 197, 107, 0.28);
}

.label-north { left: 61%; top: 14%; }
.label-east { right: 6%; top: 38%; }
.label-west { left: 13%; top: 56%; }
.label-south { left: 55%; bottom: 11%; }

.map-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  border: 0;
  background: transparent;
  color: inherit;
  width: 38px;
  height: 46px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.map-marker::before {
  content: none;
  position: absolute;
  left: 15px;
  top: 8px;
  width: 3px;
  height: 35px;
  background: var(--gold);
}

.map-marker::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/observatory.jpeg") center / contain no-repeat;
  animation: markerfloat 2.8s ease-in-out infinite;
}

.map-marker.observatory::after {
  background-image: url("./assets/observatory.jpeg");
}

.map-marker.observatory::before {
  content: none;
}

.map-marker.ancient::after {
  background-image: url("./assets/observatory.jpeg");
  filter: sepia(0.9) saturate(1.15) brightness(1.18);
}

.map-marker.review::after {
  background-image: url("./assets/observatory.jpeg");
  filter: hue-rotate(145deg) saturate(1.25) brightness(1.05);
}

.map-marker.selected {
  transform: translate(-50%, -100%) scale(1.22);
}

.compact h1 {
  margin-bottom: 10px;
}

.compact p {
  margin-bottom: 0;
}

.resource-grid,
.upload-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.file-library {
  margin-top: 0;
  border: 1px solid var(--line);
  background: rgba(246, 234, 208, 0.08);
  padding: 24px;
  box-shadow: var(--shadow);
}

.catalog-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.catalog-tabs {
  display: grid;
  gap: 8px;
  align-content: start;
}

.catalog-tabs button {
  min-height: 54px;
  border: 1px solid var(--line);
  background: rgba(5, 17, 15, 0.34);
  color: var(--ink);
  text-align: left;
  padding: 0 14px;
}

.catalog-tabs button.active {
  background: rgba(241, 197, 107, 0.18);
  border-color: rgba(241, 197, 107, 0.45);
}

.file-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.file-link {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  background: rgba(5, 17, 15, 0.34);
}

.file-link strong {
  font-size: 15px;
}

.file-link span {
  color: var(--muted);
  font-size: 12px;
}

.resource-grid article,
.upload-grid article {
  min-height: 300px;
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(246, 234, 208, 0.08);
  box-shadow: var(--shadow);
}

.resource-grid span,
.upload-grid strong {
  display: block;
  color: var(--gold);
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
  margin-bottom: 24px;
}

.resource-grid button {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 14px;
  color: var(--ink);
  background: rgba(246, 234, 208, 0.1);
}

.upload-stage {
  padding: 118px clamp(22px, 5vw, 72px) 54px;
  min-height: calc(100svh - 74px);
}

.upload-table {
  margin-top: 18px;
}

.data-form {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(246, 234, 208, 0.08);
  box-shadow: var(--shadow);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.form-grid .wide {
  grid-column: span 4;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid rgba(246, 234, 208, 0.24);
  background: rgba(2, 8, 7, 0.48);
  color: var(--ink);
  border-radius: 8px;
  padding: 11px 12px;
  outline: none;
}

.form-grid textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(3, 9, 8, 0.68);
  backdrop-filter: blur(10px);
}

.modal.open {
  display: flex;
}

.modal-panel {
  width: min(1360px, 96vw);
  border: 1px solid rgba(241, 197, 107, 0.32);
  background: rgba(246, 242, 234, 0.98);
  box-shadow: var(--shadow);
  padding: 26px 28px 30px;
  position: relative;
  color: #3b3421;
}

.modal-panel h2 {
  font-size: clamp(28px, 3vw, 46px);
  color: #8a6b1c;
  text-align: center;
  margin-bottom: 18px;
}

.modal-panel p {
  font-size: 19px;
  line-height: 1.9;
  color: #5a5341;
}

.modal-close {
  position: absolute;
  right: 14px;
  top: 12px;
  border: 1px solid rgba(138, 107, 28, 0.35);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #a38948;
  background: rgba(255, 255, 255, 0.9);
  font-size: 30px;
}

.topic-media-wrap {
  border-top: 1px solid rgba(138, 107, 28, 0.2);
  padding-top: 26px;
  margin-top: 6px;
  margin-bottom: 22px;
  display: grid;
  justify-items: center;
}

.topic-image {
  display: block;
  width: auto;
  max-width: min(1120px, 100%);
  max-height: 64vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.72);
}

.modal[data-layout="portrait"] .topic-image {
  width: min(540px, 100%);
  max-width: 100%;
  max-height: 68vh;
}

.modal[data-layout="landscape"] .topic-image {
  width: min(1120px, 100%);
  max-width: 100%;
  max-height: 62vh;
}

@keyframes flagwave {
  0%, 100% { transform: skewY(0deg); }
  50% { transform: skewY(-8deg); }
}

@keyframes markerfloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(60, 178, 141, 0.3); }
  50% { box-shadow: 0 0 0 12px rgba(60, 178, 141, 0); }
}

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(246, 234, 208, 0.06);
}

.stat-band div {
  min-height: 138px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-right: 1px solid var(--line);
}

.stat-band strong {
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1;
  color: var(--gold);
}

.stat-band span {
  color: var(--muted);
}

.narrative-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}

.narrative-grid article {
  min-height: 360px;
  padding: clamp(28px, 4vw, 56px);
  background: #0d211d;
}

.map-stage,
.work-panel,
.report-stage {
  padding: 118px clamp(22px, 5vw, 72px) 54px;
  min-height: calc(100svh - 74px);
}

.stage-head {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-end;
  margin-bottom: 22px;
}

.stage-head h1 {
  font-size: clamp(38px, 5vw, 70px);
}

.stage-head p {
  max-width: 760px;
}

.layer-switch {
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: rgba(246, 234, 208, 0.1);
  border: 1px solid var(--line);
}

.layer-switch button {
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: var(--muted);
}

.layer-switch button.active {
  background: var(--paper);
  color: #102016;
}

.map-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.grand-map {
  min-height: 680px;
}

.map-inspector,
.task-card,
.report-card {
  border: 1px solid var(--line);
  background: rgba(246, 234, 208, 0.08);
  box-shadow: var(--shadow);
}

.map-inspector {
  padding: 24px;
  min-height: 360px;
}

.map-inspector .big-number {
  font-size: 64px;
  line-height: 1;
  color: var(--gold);
  font-weight: 900;
  margin: 22px 0 10px;
}

.progress {
  height: 9px;
  background: rgba(246, 234, 208, 0.12);
  overflow: hidden;
  margin: 18px 0;
}

.map-legend {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}

.map-legend h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.map-legend div {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
}

.map-legend strong {
  font-size: 14px;
}

.map-legend small {
  grid-column: 2;
  color: var(--muted);
  line-height: 1.5;
}

.legend-icon {
  grid-row: 1 / span 2;
  width: 28px;
  height: 32px;
  display: block;
  background: url("./assets/observatory.jpeg") center / contain no-repeat;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

.legend-icon.ancient {
  filter: sepia(0.9) saturate(1.15) brightness(1.18) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

.legend-icon.review {
  filter: hue-rotate(145deg) saturate(1.25) brightness(1.05) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

.legend-icon.case {
  filter: brightness(1.2) saturate(1.12) drop-shadow(0 0 10px rgba(241, 197, 107, 0.45));
}

.progress span {
  display: block;
  height: 100%;
  width: var(--value);
  background: linear-gradient(90deg, var(--gold), var(--jade));
}

.story-hero {
  min-height: 58svh;
  display: grid;
  align-content: end;
  padding: 128px clamp(24px, 8vw, 120px) 56px;
  background:
    linear-gradient(90deg, rgba(6, 18, 17, 0.96), rgba(6, 18, 17, 0.52)),
    url("data:image/svg+xml,%3Csvg width='1400' height='760' viewBox='0 0 1400 760' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1400' height='760' fill='%23091715'/%3E%3Cg stroke='%23c8913e' stroke-opacity='.28' fill='none'%3E%3Ccircle cx='1020' cy='370' r='250'/%3E%3Ccircle cx='1020' cy='370' r='180'/%3E%3Cpath d='M1020 120 V620 M770 370 H1270 M844 194 L1196 546 M1196 194 L844 546'/%3E%3C/g%3E%3Cpath d='M920 580 L1020 200 L1120 580' stroke='%23f1c56b' stroke-width='8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M955 474 H1085' stroke='%23f1c56b' stroke-width='8'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

.story-hero p {
  max-width: 820px;
  font-size: 20px;
}

.story-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}

.story-timeline article {
  min-height: 380px;
  background: #0d211d;
  padding: 34px;
}

.story-timeline span {
  color: var(--gold);
  font-size: 56px;
  font-weight: 900;
}

.task-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 14px;
}

.task-card {
  min-height: 280px;
  padding: 20px;
}

.task-card small {
  display: block;
  color: var(--gold);
  margin-bottom: 18px;
  font-weight: 800;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: rgba(246, 234, 208, 0.06);
}

table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--gold);
}

td {
  color: var(--ink);
}

.status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(60, 178, 141, 0.16);
  color: #8af0cd;
  font-weight: 800;
  font-size: 12px;
}

.status.warning {
  color: #f6ca74;
  background: rgba(241, 197, 107, 0.14);
}

.status.review {
  color: #ff998b;
  background: rgba(185, 64, 46, 0.14);
}

td button {
  border-radius: 999px;
  background: rgba(246, 234, 208, 0.12);
  color: var(--ink);
  padding: 0 14px;
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.7fr);
  gap: 18px;
}

.report-card {
  padding: 28px;
}

.report-card.dark {
  background: #07110f;
}

.report-card.dark button {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  background: rgba(246, 234, 208, 0.1);
  color: var(--ink);
  padding: 0 14px;
}

.report-bars {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.report-bars span {
  position: relative;
  display: block;
  padding-top: 18px;
  color: var(--muted);
}

.report-bars span::before,
.report-bars span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 9px;
}

.report-bars span::before {
  right: 0;
  background: rgba(246, 234, 208, 0.12);
}

.report-bars span::after {
  width: var(--value);
  background: linear-gradient(90deg, var(--gold), var(--jade));
}

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: 1fr auto;
    height: auto;
    min-height: 74px;
    padding: 12px 18px;
  }

  .top-nav {
    order: 3;
    grid-column: 1 / -1;
    overflow-x: auto;
    justify-content: flex-start;
  }

  main {
    padding-top: 122px;
  }

  .hero,
  .story-front,
  .map-shell,
  .report-grid {
    grid-template-columns: 1fr;
  }

  .hero-map,
  .grand-map {
    min-height: 520px;
  }

  .narrative-grid,
  .story-timeline,
  .task-lanes,
  .resource-grid,
  .upload-grid,
  .catalog-layout,
  .file-list,
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid .wide {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .site-header {
    position: sticky;
  }

  .brand small,
  .site-header > .primary-button {
    display: none;
  }

  main {
    padding-top: 0;
  }

  .hero {
    padding: 34px 18px;
    min-height: auto;
  }

  .story-front {
    padding: 34px 18px;
    min-height: auto;
  }

  .portrait-panel,
  .portrait-panel img {
    min-height: 380px;
  }

  h1 {
    font-size: clamp(40px, 16vw, 62px);
  }

  .hero-map,
  .grand-map {
    min-height: 390px;
  }

  .stat-band,
  .narrative-grid,
  .story-timeline,
  .task-lanes,
  .resource-grid,
  .upload-grid,
  .catalog-layout,
  .file-list,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid .wide {
    grid-column: span 1;
  }

  .wall-hotspot span {
    width: 46px;
    height: 46px;
    font-size: 28px;
  }

  .h-guo { left: 32%; top: 48%; }
  .h-observatory { left: 58%; top: 40%; }
  .h-blueprint { left: 45%; top: 62%; }
  .h-tools { left: 79%; top: 73%; }

  .stage-head {
    display: block;
  }

  .map-stage,
  .work-panel,
  .report-stage {
    padding: 38px 18px;
  }

  .layer-switch {
    margin-top: 12px;
    max-width: 100%;
    overflow-x: auto;
  }
}