/* zh: full-bleed dark navy + gilt */
html { scroll-behavior: auto; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Palatino Linotype", "STSong", "Noto Serif SC", "Microsoft YaHei", serif;
  font-size: 14px;
  line-height: 1.8;
  color: #F5E6C8;
  background: #0B1C2C;
}
svg { display: block; max-width: 100%; }
a { color: #D4AF37; text-decoration: none; }
a:hover { color: #F5E6C8; }

.obsidian {
  border-bottom: 1px solid #2a4558;
  background: #07141f;
}
.obsidian-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 6vw;
}
.gilt-lock {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F5E6C8;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: none;
}
.gilt-lock svg { width: 28px; height: 28px; }
.gilt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.gilt-nav a {
  color: #c9b27a;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.gilt-nav a:hover {
  color: #D4AF37;
  border-bottom-color: #D4AF37;
}

.void-hero {
  padding: 64px 6vw 48px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(212, 175, 55, 0.12), transparent 46%),
    #0B1C2C;
}
.void-hero h1 {
  font-size: 40px;
  line-height: 1.28;
  font-weight: 600;
  color: #F5E6C8;
  margin-bottom: 20px;
}
.void-hero p {
  color: #d8c9a6;
  margin-bottom: 12px;
  font-size: 15px;
}
.pair-svg {
  border: 1px solid #D4AF37;
  padding: 18px;
  background: #163044;
}

.night-sec { padding: 52px 6vw 8px; }
.night-sec h2 {
  font-size: 22px;
  color: #D4AF37;
  margin-bottom: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.night-copy { margin-bottom: 24px; color: #e8dcc0; max-width: 78em; }

.chrono {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 12px;
}
.chrono:before {
  content: "";
  position: absolute;
  top: 18px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: #D4AF37;
}
.chrono-node { padding: 0 12px 8px; }
.chrono-dot {
  width: 14px;
  height: 14px;
  border: 2px solid #D4AF37;
  background: #0B1C2C;
  border-radius: 50%;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.chrono-node h3 {
  font-size: 15px;
  color: #F5E6C8;
  margin-bottom: 8px;
}

.gear-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #2c4a5e;
}
.gear-line {
  display: grid;
  grid-template-columns: 52px 1.2fr 1fr 0.8fr;
  gap: 16px;
  align-items: center;
  padding: 16px 8px;
  border-bottom: 1px solid #2c4a5e;
  background: #122838;
}
.gear-line:nth-child(even) { background: #163044; }
.gear-ico { width: 32px; height: 32px; color: #D4AF37; }
.gear-name { font-size: 15px; color: #F5E6C8; }
.gear-meta { color: #b9a77a; font-size: 13px; }
.gear-state { color: #D4AF37; font-size: 12px; letter-spacing: 0.08em; }

.sever-pack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sever-card {
  background: #163044;
  border-radius: 2px;
  padding: 22px 18px;
  border-top: 2px solid #D4AF37;
}
.sever-card h3 { font-size: 16px; margin: 10px 0 8px; color: #F5E6C8; }
.sever-card svg { width: 34px; height: 34px; color: #D4AF37; }

.single-id {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #D4AF37;
}
.single-id article {
  padding: 24px 22px;
}
.single-id article:first-child { background: #163044; }
.single-id article:last-child { background: #0f2433; }
.single-id h3 { font-size: 17px; margin-bottom: 10px; color: #D4AF37; }

.name-practice {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.name-card {
  padding: 18px;
  background: #122838;
  border-bottom: 3px solid #D4AF37;
}
.name-card h3 { font-size: 15px; margin-bottom: 8px; }

.tab-caution {
  background: #163044;
  padding: 24px;
  border-left: 3px solid #D4AF37;
}
.tab-caution ol { padding-left: 20px; }
.tab-caution li { margin: 10px 0; }

.night-q { display: grid; gap: 0; border-top: 1px solid #2c4a5e; }
.night-q details {
  border-bottom: 1px solid #2c4a5e;
  padding: 8px 0;
}
.night-q summary {
  cursor: pointer;
  color: #D4AF37;
  font-size: 15px;
  padding: 10px 0;
}
.night-q summary:hover { color: #F5E6C8; }
.night-q p { color: #e5d6b4; padding-bottom: 12px; }

.dusk-end {
  margin-top: 56px;
  padding: 28px 6vw 36px;
  background: #07141f;
  color: #b9a77a;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.dusk-end p { margin: 8px 0; }

@media (max-width: 900px) {
  .void-hero, .chrono, .sever-pack, .single-id, .name-practice, .gear-line {
    grid-template-columns: 1fr;
  }
  .chrono:before { display: none; }
  .void-hero h1 { font-size: 28px; }
}