/* ===== NEATO tour landing — styles ====================================== */
:root {
  --black: #050505;
  --gold: #f2b137;          /* 亮金，做强调/边框/文字 */
  --gold-deep: #c8821e;     /* 暗金，做阴影/描边 */
  --ink: #eae0cf;           /* 米白正文 */
  --muted: #9a9488;         /* 次要文字 */
  --font-display: "Black Ops One", Impact, system-ui, sans-serif;
  --font-body: "Barlow Semi Condensed", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 560px;            /* 手机优先；桌面居中成一张海报 */
  margin: 0 auto;
  background: var(--black);
  min-height: 100vh;
}

/* ---- Hero ---- */
.hero { position: relative; line-height: 0; }
.hero__img { width: 100%; height: auto; display: block; }
.hero__fade {                 /* 把海报底部渐隐到纯黑，和按钮区无缝衔接 */
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 22%;
  background: linear-gradient(to bottom, rgba(5,5,5,0) 0%, var(--black) 92%);
  pointer-events: none;
}

/* ---- Shows section ---- */
.shows {
  padding: 8px 22px 6px;
  text-align: center;
}
.shows__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 9.5vw, 46px);
  letter-spacing: 1px;
  line-height: 1.05;
  color: var(--gold);
}
.shows__sub {
  margin: 8px 0 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.shows__sub-line { display: block; }
.shows__door {
  margin-top: 5px;
  color: var(--gold);
  letter-spacing: 2px;
}

/* ---- Buttons ---- */
.btns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  text-decoration: none;
  color: var(--ink);
  background: #0e0e0e;
  border: 2px solid var(--gold);
  border-radius: 10px;
  transition: transform .08s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: scale(.985); }
@media (hover: hover) {
  .btn:hover { background: #161616; border-color: #ffd673; }
  .btn:hover .btn__cta { filter: brightness(1.08); }
  .btn:hover .btn__cta-arr { transform: translateX(2px); }
}

/* 日期：两行 JULY / 14，金色文字（去掉实心底，把"实心金"让给右侧 CTA） */
.btn__date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}
.btn__month { font-size: 12px; letter-spacing: 1px; }
.btn__day { font-size: 23px; margin-top: 4px; }

.btn__main { flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.1; }
.btn__city {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 4.7vw, 22px);
  letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn__venue {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--muted);
}

/* 右侧实心金色 CTA —— 引导点击的视觉焦点 */
.btn__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  background: var(--gold);
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 8px;
  white-space: nowrap;
  transition: filter .15s ease;
}
.btn__cta-arr {
  flex: 0 0 auto;
  width: 7px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}

/* 链接未填（url="#"）时的禁用态 */
.btn--pending {
  opacity: .55;
  border-style: dashed;
  pointer-events: none;
}
.btn--pending .btn__cta {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--muted);
}

.note {
  margin: 18px 4px 22px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}
.note-line { display: block; }
.note-line + .note-line { margin-top: 3px; }

/* ---- Checker footer ---- */
.checker {
  height: 26px;
  background:
    repeating-conic-gradient(#fff 0% 25%, #000 0% 50%) 0 0 / 26px 26px;
}
.foot {
  padding: 14px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
}