.nox-dm {
  --nox-gold: #dab35d;
}

.nox-dm-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; margin: 0 0 1.25rem; flex-wrap: wrap;
}
.nox-dm-head__left { flex: 0 0 auto; }
.nox-dm-head__right {
  flex: 1 1 240px; text-align: right;
  font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.7);
}

.nox-dm-toggle {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0; width: max-content;
}
.nox-dm-toggle .nox-dm-toggle__btn {
  display: block; padding: .75rem 1.85rem;
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
  background: #000; color: #dab35d; border: 1px solid #dab35d;
  text-decoration: none; transition: background .15s, color .15s;
}
.nox-dm-toggle .nox-dm-toggle__btn:hover { text-decoration: none; }
.nox-dm-toggle li + li .nox-dm-toggle__btn { margin-left: -1px; }
.nox-dm-toggle .uk-active .nox-dm-toggle__btn {
  background: #dab35d; color: #fff; border-color: #dab35d;
}

.nox-dm-stage { position: relative; color: var(--nox-gold); }
.nox-dm-mapwrap { position: relative; line-height: 0; }
.nox-dm-map svg, .nox-dm-map img { width: 100%; height: auto; display: block; }

.nox-dm-pin {
  position: absolute; width: 16px; height: 16px;
  padding: 0; border-radius: 50%;
  background: var(--nox-gold); border: 2px solid rgba(255,255,255,.65);
  transform: translate(-50%, -50%); cursor: pointer;
  box-shadow: 0 0 0 0 rgba(218,179,93,.5);
  transition: transform .15s, box-shadow .15s;
}
.nox-dm-pin:hover,
.nox-dm-pin.is-active {
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 0 0 6px rgba(218,179,93,.25);
}

.nox-dm-line {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}

.nox-dm-card {
  position: absolute; top: 6%; right: 3%;
  width: 38%; max-width: 320px; aspect-ratio: 3 / 4;
  display: grid; grid-template-areas: "stack"; overflow: hidden;
  color: #fff; text-decoration: none; line-height: 1.3;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.nox-dm-card,
.nox-dm-card:hover,
.nox-dm-card:focus { text-decoration: none; }
.nox-dm-card.is-active { opacity: 1; transform: none; pointer-events: auto; }

.nox-dm-card__img {
  grid-area: stack;
  background-size: cover; background-position: center;
}
.nox-dm-card::after {
  content: ""; grid-area: stack; z-index: 1;
  background: linear-gradient(0deg, rgb(0 0 0 / 90%) 0%, rgb(0 0 0 / 0%) 50%);
  pointer-events: none;
}
.nox-dm-card__body {
  grid-area: stack; align-self: end; z-index: 2;
  display: block; padding: 1rem 1.1rem 1.2rem;
}
.nox-dm-card__nights {
  display: block; font-size: .72rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--nox-gold);
  font-weight: 500; margin-bottom: .35rem;
}
.nox-dm-card__title {
  display: block; font-size: 1.5rem; line-height: 1.1;
  font-family: 'Cormorant', Georgia, serif; font-style: normal;
  margin-bottom: .6rem;
}
.nox-dm-card__cta {
  display: block; font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
}
.nox-dm-card__line {
  display: block; height: 1px; margin-top: .7rem;
  background: rgba(255,255,255,.45);
}

@media (max-width: 640px) {
  .nox-dm-head { flex-direction: column; align-items: flex-start; }
  .nox-dm-head__right { text-align: left; flex: 1 1 20px; }

  .nox-dm-card {
    position: relative; top: auto; right: auto;
    width: 100%; max-width: none; aspect-ratio: 3 / 4;
    margin-top: 1rem; opacity: 1; transform: none; pointer-events: auto;
  }
  .nox-dm-line { display: none; }
}