@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Special+Elite&display=swap");

body.travelling-at-night-index-page {
  --night-index-void: #080a08;
  --night-index-paper: #d8d5c5;
  --night-index-dim: #858776;
  --night-index-lamp: #f2c94c;
  --night-index-hot: #ffe89a;
  --night-index-amber: #c78b2b;
  --night-index-line: rgba(242, 201, 76, 0.24);
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--night-index-paper);
  font-family: "Noto Serif SC", "Songti SC", serif;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 72% 36%, rgba(242, 201, 76, 0.07), transparent 34%),
    linear-gradient(110deg, #050705, #10130d 58%, #080908);
  overflow-x: hidden;
}

body.travelling-at-night-index-page::before {
  content: "";
  position: fixed;
  z-index: 10;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 20% 78%, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

.night-index-shell,
.night-index-shell * { box-sizing: border-box; }
.night-index-shell a { color: inherit; text-decoration: none; }
.night-index-shell button { font: inherit; }
.night-index-shell h1,
.night-index-shell h2 { font-family: "Noto Serif SC", "Songti SC", serif; }

.night-index-shell {
  position: relative;
  z-index: 1;
  width: min(1500px, 100%);
  min-height: 100vh;
  margin: auto;
  padding: 26px clamp(22px, 4vw, 68px) 34px;
}

.night-index-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 58px;
  border-bottom: 1px solid var(--night-index-line);
}

.night-index-identity { display: flex; align-items: center; gap: 14px; }
.night-index-identity strong,
.night-index-identity small { display: block; }
.night-index-identity strong { font-size: 16px; font-weight: 600; }
.night-index-identity small,
.night-index-topbar nav,
.night-index-intro > div > p,
.night-index-stamp span,
.night-index-detail-label,
.night-index-meta,
.night-index-rail-header {
  color: var(--night-index-dim);
  font-family: "Special Elite", monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.night-index-lamp {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--night-index-lamp);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(242, 201, 76, 0.48), inset 0 0 8px rgba(255, 232, 154, 0.35);
}

.night-index-lamp::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--night-index-hot);
  box-shadow: 0 0 16px var(--night-index-lamp);
}

.night-index-topbar nav { display: flex; gap: 24px; }
.night-index-topbar nav a:hover { color: var(--night-index-hot); }

.night-index-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 44px;
  padding: clamp(48px, 8vh, 90px) 0 38px;
}

.night-index-intro h1 {
  max-width: 850px;
  margin: 12px 0 0;
  color: var(--night-index-hot);
  font-size: clamp(46px, 7vw, 106px);
  font-weight: 700;
  line-height: 0.92;
  text-shadow: 0 0 42px rgba(242, 201, 76, 0.18);
}

.night-index-intro h1 span {
  display: block;
  margin-top: 15px;
  color: var(--night-index-paper);
  font-family: "Special Elite", monospace;
  font-size: 0.2em;
  font-weight: 400;
  text-transform: uppercase;
}

.night-index-copy {
  width: min(350px, 32vw);
  margin: 0 0 4px;
  color: #aaa999;
  font-size: 14px;
  line-height: 2;
}

.night-observatory {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.72fr);
  min-height: 500px;
  border-top: 1px solid var(--night-index-line);
  border-bottom: 1px solid var(--night-index-line);
  background: rgba(6, 8, 6, 0.46);
}

.night-index-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background:
    radial-gradient(circle at 68% 32%, rgba(255, 232, 154, 0.2), transparent 4%),
    radial-gradient(ellipse at 68% 34%, rgba(242, 201, 76, 0.12), transparent 24%),
    linear-gradient(164deg, transparent 54%, rgba(141, 75, 44, 0.26) 55%, transparent 56%),
    linear-gradient(12deg, #070907 48%, #171a12 49% 53%, #090b09 54%);
  overflow: hidden;
}

.night-index-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 10, 8, 0.9), transparent 34%, transparent 72%, rgba(8, 10, 8, 0.36)),
    linear-gradient(0deg, rgba(8, 10, 8, 0.88), transparent 42%);
  pointer-events: none;
}

.night-index-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.72) contrast(1.06) brightness(0.74);
  transform: scale(1.015);
  transition: opacity 260ms ease, transform 900ms ease;
}

.night-index-visual.loading img { opacity: 0.25; transform: scale(1.04); }
.night-index-visual.image-missing img { opacity: 0; }

.night-index-stamp {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 4vw, 58px);
  bottom: 36px;
  max-width: 560px;
}

.night-index-stamp span {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--night-index-amber);
}

.night-index-stamp span::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.night-index-stamp h2 {
  margin: 13px 0 0;
  color: var(--night-index-hot);
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.15;
}

.night-index-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px clamp(28px, 4vw, 56px);
  border-left: 1px solid var(--night-index-line);
  background: radial-gradient(circle at 50% 25%, rgba(242, 201, 76, 0.07), transparent 36%), rgba(10, 12, 9, 0.9);
}

.night-index-panel::before {
  content: attr(data-number);
  position: absolute;
  top: 14px;
  right: 24px;
  color: rgba(242, 201, 76, 0.07);
  font-family: "Special Elite", monospace;
  font-size: clamp(90px, 12vw, 176px);
  line-height: 1;
}

.night-index-detail-label { color: var(--night-index-amber); }
#night-index-description {
  position: relative;
  min-height: 150px;
  margin: 30px 0;
  color: #c4c1b2;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 2;
}

.night-index-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 30px;
  padding-top: 19px;
  border-top: 1px solid var(--night-index-line);
}

.night-index-meta b {
  display: block;
  margin-top: 5px;
  color: var(--night-index-paper);
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}

.night-index-actions { display: flex; align-items: center; gap: 12px; }
#night-index-enter {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--night-index-amber);
  color: var(--night-index-hot);
  font-size: 13px;
  text-align: center;
  transition: background 180ms ease, box-shadow 180ms ease;
}

#night-index-enter:hover,
#night-index-enter:focus-visible { background: rgba(242, 201, 76, 0.09); box-shadow: 0 0 26px rgba(242, 201, 76, 0.11); }
.night-index-actions button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--night-index-line);
  color: var(--night-index-amber);
  background: transparent;
  cursor: pointer;
}
.night-index-actions button:hover { color: var(--night-index-hot); border-color: var(--night-index-amber); }
.night-index-actions button:disabled { opacity: 0.22; cursor: default; }

.night-index-rail-section { padding: 34px 0 22px; }
.night-index-rail-header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.night-index-rail-header span:last-child { text-align: right; }
.night-index-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(95px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.night-index-rail::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 7.14%;
  left: 7.14%;
  height: 1px;
  background: linear-gradient(90deg, rgba(141, 75, 44, 0.5), var(--night-index-amber), rgba(242, 201, 76, 0.2));
}
.night-index-rail button {
  position: relative;
  width: 100%;
  padding: 39px 8px 12px;
  border: 0;
  color: var(--night-index-dim);
  background: transparent;
  cursor: pointer;
  text-align: center;
}
.night-index-rail button::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid var(--night-index-amber);
  border-radius: 50%;
  background: var(--night-index-void);
  transform: translateX(-50%);
}
.night-index-rail button span,
.night-index-rail button small { display: block; }
.night-index-rail button span { color: var(--night-index-paper); font-family: "Special Elite", monospace; font-size: 11px; }
.night-index-rail button small { max-width: 130px; margin: 6px auto 0; font-size: 11px; line-height: 1.45; }
.night-index-rail button[aria-current="true"],
.night-index-rail button[aria-current="true"] span { color: var(--night-index-hot); }
.night-index-rail button[aria-current="true"]::before {
  top: 10px;
  width: 13px;
  height: 13px;
  border-color: var(--night-index-hot);
  box-shadow: 0 0 16px var(--night-index-lamp), 0 0 34px rgba(242, 201, 76, 0.48);
}

.night-index-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 18px; }
.night-index-footer a { color: var(--night-index-amber); font-size: 13px; }
.night-index-footer a:hover { color: var(--night-index-hot); }
.night-index-footer p { max-width: 600px; margin: 0; color: var(--night-index-dim); font-size: 12px; line-height: 1.8; text-align: right; }

@media (max-width: 900px) {
  .night-index-shell { padding-inline: 20px; }
  .night-index-intro { grid-template-columns: 1fr; gap: 24px; }
  .night-index-copy { width: min(620px, 100%); }
  .night-observatory { grid-template-columns: 1fr; }
  .night-index-panel { border-top: 1px solid var(--night-index-line); border-left: 0; }
  #night-index-description { min-height: 0; }
  .night-index-rail { grid-template-columns: repeat(7, 132px); padding-bottom: 8px; overflow-x: auto; }
  .night-index-rail::before { display: none; }
}

@media (max-width: 560px) {
  .night-index-shell { padding: 16px 14px 26px; }
  .night-index-topbar { align-items: flex-start; }
  .night-index-topbar nav { gap: 14px; padding-top: 4px; }
  .night-index-topbar nav a:first-child { display: none; }
  .night-index-intro { padding: 42px 0 30px; }
  .night-index-intro h1 { font-size: 48px; }
  .night-index-intro h1 span { font-size: 11px; line-height: 1.5; }
  .night-observatory { min-height: 0; }
  .night-index-visual { aspect-ratio: 4 / 3; }
  .night-index-stamp { right: 20px; bottom: 24px; left: 20px; }
  .night-index-stamp h2 { font-size: 32px; }
  .night-index-panel { padding: 32px 20px; }
  .night-index-meta { grid-template-columns: 1fr; }
  .night-index-rail-header { align-items: end; }
  .night-index-rail-header span:last-child { max-width: 140px; }
  .night-index-footer { align-items: flex-start; flex-direction: column; }
  .night-index-footer p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .night-index-shell *,
  .night-index-shell *::before,
  .night-index-shell *::after { transition: none !important; }
}