:root { --night: #102033; --fog: #e6eef2; --ink: #17202a; --lamp: #f0c56e; --steel: #31516c; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fog); color: var(--ink); }
body { font-family: "Avenir Next", "Segoe UI", sans-serif; }
.compass {
  background: var(--night);
  color: var(--fog);
  height: 280px;
  position: relative;
}
.lantern {
  position: absolute;
  left: 50%;
  top: 46px;
  transform: translateX(-50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4d2 0 30%, #f0c56e 45%, #102033 70%);
  box-shadow: 0 0 40px #f0c56e;
}
.compass nav a {
  position: absolute;
  color: var(--fog);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.compass nav a.on { color: var(--lamp); }
.compass a.n { top: 18px; left: 50%; transform: translateX(-50%); }
.compass a.e { top: 120px; right: 8vw; }
.compass a.s { bottom: 16px; left: 50%; transform: translateX(-50%); }
.compass a.w { top: 120px; left: 8vw; }
.fog { padding: 28px 8vw 48px; max-width: 860px; margin: 0 auto; }
.fog h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; font-weight: 600; margin: 10px 0 12px; }
.band { font-size: 18px; line-height: 1.6; margin: 0 0 14px; }
.port, .star { width: min(100%, 420px); }
.port { margin-right: auto; }
.star { margin-left: auto; }
.port img, .star img, .port svg, .star svg { width: 100%; display: block; }
.port img, .star img { height: 460px; object-fit: cover; }
.port svg, .star svg { height: 200px; background: white; }
.cap { font-size: 14px; color: #41515f; margin: 8px 0 18px; }
footer.watch { padding: 0 8vw 36px; color: #41515f; font-size: 14px; max-width: 860px; margin: 0 auto; }
@media (max-width: 700px) {
  .compass { height: 220px; }
  .lantern { width: 70px; height: 70px; top: 58px; }
  .compass a.e, .compass a.w { top: 96px; }
  .port img, .star img { height: 260px; }
}