/* 茄子直播间 · 同城主播 —— layout 层：顶栏 / hero / 主体 / 页脚骨架（OOCSS 后代） */

.city .hd {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 14px 5%;
  background: rgba(14,18,32,.94);
  border-bottom: 1px solid var(--tc-line);
}
.city .hd-logo { font-size: 24px; font-weight: 800; letter-spacing: 3px; color: var(--tc-cyan); }
.city .hd-nav ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.city .hd-nav li { margin: 0; }
.city .hd-nav a { display: inline-block; padding: 7px 16px; border-radius: 8px; font-size: 15px; letter-spacing: 1px; color: var(--tc-dim); border: 1px solid var(--tc-line); transition: .2s; }
.city .hd-nav a:hover, .city .hd-nav a.is-on { background: var(--tc-cyan); color: #0e1220; border-color: var(--tc-cyan); }

.city .hero { text-align: center; padding: 68px 20px 54px; position: relative; overflow: hidden; }
.city .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(138,108,255,.28), transparent 60%); }
.city .hero-title { position: relative; font-size: 54px; letter-spacing: 8px; color: var(--tc-ink); margin: 0 0 16px; }
.city .hero-sub { position: relative; max-width: 640px; margin: 0 auto; font-size: 17px; color: var(--tc-dim); letter-spacing: 1px; }
.city .hero-tag { position: relative; display: inline-block; margin-top: 22px; padding: 7px 24px; border-radius: 6px; font-size: 14px; color: #0e1220; background: var(--tc-green); letter-spacing: 3px; }

.city .wrap { max-width: 1080px; margin: 0 auto; padding: 36px 20px 70px; display: flex; flex-direction: column; gap: 24px; }

.city .ft { border-top: 1px solid var(--tc-line); background: #0a0e1a; padding: 36px 20px 30px; text-align: center; color: var(--tc-dim); font-size: 14px; }
.city .ft-meta { margin: 10px 0 0; }

@media (max-width: 820px) {
  .city .hero-title { font-size: 36px; letter-spacing: 5px; }
  .city .hd { flex-direction: column; align-items: flex-start; }
}