/* ============================================================
   HOME
   Built out of the club's own photographs. Everything on this
   page is written from the manager: the night, the flyer, the
   lineup, the pots, and the shots themselves.
   ============================================================ */

:root {
  --hm-ink: #08060A;
  --hm-plinth: #131017;
  --hm-edge: rgba(240, 234, 232, 0.08);
  --hm-red: #B0003A;
  --hm-rose: #D4406A;
  --hm-text: #F0EAE8;
  --hm-dim: rgba(240, 234, 232, 0.46);
  --hm-faint: rgba(240, 234, 232, 0.24);
  --hm-sign: 'Big Shoulders Display', 'Outfit', sans-serif;
  --hm-read: 'Inter', sans-serif;
  --hm-wide: 1560px;
}

.hm { position: relative; background: var(--hm-ink); overflow: hidden; }
.hm-band { position: relative; max-width: var(--hm-wide); margin: 0 auto; padding: 7rem 2.5rem; }

.hm-eyebrow {
  font-family: var(--hm-read);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--hm-rose);
  margin: 0 0 0.9rem;
}

.hm-title {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 0.84;
  text-transform: uppercase;
  color: var(--hm-text);
  margin: 0;
}

.hm-sub {
  font-family: var(--hm-read);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--hm-dim);
  margin-top: 1rem;
  max-width: 52ch;
}

.hm-empty {
  padding: 3rem 0;
  font-family: var(--hm-read);
  font-size: 0.86rem;
  color: var(--hm-faint);
}

/* ══ 1. the door ═══════════════════════════════════════════ */
.hm-door {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050308;
  text-align: center;
}

/* the venue itself, held still */
.hm-door-bg {
  position: absolute;
  inset: 0;
  background: url('../img/hero-bg.webp') center center / cover no-repeat;
  filter: brightness(0.46) saturate(0.85) blur(5px);
  transform: scale(1.05);
}

.hm-door::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 6, 10, 0.82) 0%, rgba(8, 6, 10, 0.45) 40%, var(--hm-ink) 100%),
    radial-gradient(ellipse 55% 45% at 50% 60%, rgba(176, 0, 58, 0.22), transparent 72%);
}

.hm-door-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 7rem 2rem 4rem;
}

.hm-place {
  font-family: var(--hm-read);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hm-dim);
  margin: 0 0 1.6rem;
}

.hm-place b { color: var(--hm-text); font-weight: 600; }
.hm-place .hm-dot { color: var(--hm-red); margin: 0 0.5rem; }

.hm-mark {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(4rem, 13vw, 12rem);
  line-height: 0.78;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--hm-text);
  margin: 0 0 1.4rem;
  text-shadow: 0 0 130px rgba(176, 0, 58, 0.6);
}

.hm-mark i { font-style: normal; color: var(--hm-red); }

.hm-line {
  font-family: var(--hm-read);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(240, 234, 232, 0.88);
  max-width: 58ch;
  margin: 0 auto 2.8rem;
}

/* the countdown: the loudest thing on the page after the name */
.hm-count-down {
  display: inline-block;
  padding: 1.6rem 2.4rem;
  border: 1px solid var(--hm-edge);
  border-radius: 16px;
  background: rgba(8, 6, 10, 0.5);
  backdrop-filter: blur(10px);
  margin-bottom: 2.4rem;
}

.hm-cd-head { margin-bottom: 1rem; }

.hm-cd-label {
  display: block;
  font-family: var(--hm-read);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hm-faint);
  margin-bottom: 0.35rem;
}

.hm-cd-night {
  display: block;
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--hm-rose);
}

.hm-cd-clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.hm-cd-clock > span { display: block; }

.hm-cd-clock b {
  display: block;
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 5.4rem);
  line-height: 0.86;
  color: var(--hm-text);
  min-width: 1.7em;
}

.hm-cd-clock i {
  display: block;
  font-family: var(--hm-read);
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hm-faint);
  margin-top: 0.4rem;
}

.hm-cd-colon {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  color: var(--hm-red);
}

.hm-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }

.hm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--hm-edge);
  background: rgba(8, 6, 10, 0.55);
  backdrop-filter: blur(6px);
  color: var(--hm-text);
  font-family: var(--hm-read);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.hm-btn:hover { border-color: var(--hm-rose); transform: translateY(-2px); }
.hm-btn.primary { background: var(--hm-red); border-color: var(--hm-red); }
.hm-btn.primary:hover { background: #c8004a; }
.hm-btn img { height: 15px; width: auto; display: block; }
.hm-btn svg { width: 15px; height: 15px; }

.hm-open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--hm-read);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hm-rose);
}

.hm-open::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hm-red);
  animation: hmPulse 1.4s ease-in-out infinite;
}

@keyframes hmPulse { 50% { opacity: 0.2; } }

/* ══ 2. the invitation ═════════════════════════════════════ */
.hm-invite-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 4rem;
  align-items: center;
}

.hm-theme {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(3rem, 8.5vw, 7rem);
  line-height: 0.82;
  text-transform: uppercase;
  color: var(--hm-text);
  margin: 0 0 1.6rem;
}

.hm-when {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  font-family: var(--hm-read);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hm-dim);
  margin-bottom: 2.4rem;
}

.hm-when b { color: var(--hm-text); font-weight: 600; }
.hm-when .hm-dot { color: var(--hm-red); }

/* the flyer, hung slightly off square */
.hm-flyer {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--hm-edge);
  background: var(--hm-plinth);
  aspect-ratio: 3 / 4;
  margin: 0;
  transform: rotate(1.6deg);
  box-shadow: 0 50px 110px -55px var(--hm-red), 0 0 0 1px rgba(240, 234, 232, 0.04);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.hm-flyer:hover { transform: rotate(0deg) scale(1.015); }
.hm-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══ 3. the count ══════════════════════════════════════════ */
.hm-count {
  border-top: 1px solid var(--hm-edge);
  border-bottom: 1px solid var(--hm-edge);
  background: linear-gradient(180deg, rgba(176, 0, 58, 0.05), transparent);
}

.hm-count-row {
  max-width: var(--hm-wide);
  margin: 0 auto;
  padding: 3rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.hm-count-cell { text-align: center; }

.hm-count-val {
  display: block;
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 0.9;
  color: var(--hm-text);
}

.hm-count-label {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--hm-read);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hm-faint);
}

/* ══ 4. the set, inside the night ══════════════════════════ */
.hm-set {
  border-top: 1px solid var(--hm-edge);
  border-bottom: 1px solid var(--hm-edge);
  padding: 1.4rem 0 1.6rem;
  margin-bottom: 2.4rem;
}

.hm-set-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.hm-set-title, .hm-set-count {
  font-family: var(--hm-read);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hm-set-title { color: var(--hm-rose); }
.hm-set-count { color: var(--hm-faint); }

/* An even grid rather than wrapping pills: the last row lines up with the
   others, and every DJ gets the same room whatever the length of their name. */
.hm-set-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}

.hm-set-dj {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--hm-edge);
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(240, 234, 232, 0.035), rgba(240, 234, 232, 0.008));
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* the slot, drawn as a hairline along the bottom of the card */
.hm-set-dj::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--hm-red), transparent);
  opacity: 0.35;
  transition: opacity 0.2s;
}

.hm-set-dj:hover {
  border-color: var(--hm-red);
  background: rgba(176, 0, 58, 0.1);
  transform: translateY(-3px);
}

.hm-set-dj:hover::after { opacity: 1; }

.hm-set-face {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #0C0910;
  border: 1px solid var(--hm-edge);
}

.hm-set-face img { width: 100%; height: 100%; object-fit: cover; }
.hm-set-mark { font-family: var(--hm-sign); font-weight: 700; font-size: 1.25rem; color: var(--hm-faint); }

.hm-set-info { display: block; min-width: 0; }

.hm-set-name {
  display: block;
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-set-time {
  display: block;
  margin-top: 0.28rem;
  font-family: var(--hm-read);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-faint);
  transition: color 0.2s;
}

.hm-set-dj:hover .hm-set-time { color: var(--hm-rose); }

/* the small arrow only shows on a card that actually goes somewhere */
.hm-set-go {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--hm-faint);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.2s, transform 0.2s;
}

.hm-set-dj:hover .hm-set-go { opacity: 1; transform: none; color: var(--hm-rose); }

/* whoever is playing right now, on the night itself */
.hm-set-dj.on {
  border-color: var(--hm-red);
  background: rgba(176, 0, 58, 0.14);
}

.hm-set-dj.on::after { opacity: 1; }
.hm-set-dj.on .hm-set-face { border-color: var(--hm-rose); }

.hm-set-live {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--hm-read);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hm-rose);
}

.hm-set-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hm-rose);
  box-shadow: 0 0 0 0 rgba(212, 64, 106, 0.7);
  animation: hmPulse 2s ease-out infinite;
}

@keyframes hmPulse {
  70%  { box-shadow: 0 0 0 8px rgba(212, 64, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 64, 106, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-set-live::before { animation: none; }
}

/* ══ 5. the board ══════════════════════════════════════════ */
.hm-pot {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin: 2rem 0 1.4rem;
}

.hm-pot-val {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(3.4rem, 11vw, 7rem);
  line-height: 0.8;
  color: var(--hm-text);
  text-shadow: 0 0 90px rgba(176, 0, 58, 0.55);
}

.hm-pot-label {
  font-family: var(--hm-read);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hm-dim);
}

.hm-act { border-top: 1px solid var(--hm-edge); }
.hm-act:last-child { border-bottom: 1px solid var(--hm-edge); }

.hm-act-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto 30px;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0.4rem;
  cursor: pointer;
  transition: background 0.18s;
}

.hm-act-row:hover { background: rgba(240, 234, 232, 0.03); }

.hm-act-num { font-family: var(--hm-read); font-size: 0.66rem; font-weight: 600; color: var(--hm-faint); }

.hm-act-name {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hm-text);
}

.hm-act-tag {
  font-family: var(--hm-read);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hm-faint);
  border: 1px solid var(--hm-edge);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.hm-act-pot { font-family: var(--hm-sign); font-weight: 700; font-size: 1.45rem; color: var(--hm-rose); white-space: nowrap; }
.hm-act-plus { font-family: var(--hm-read); font-size: 1.15rem; color: var(--hm-faint); text-align: center; transition: transform 0.25s, color 0.2s; }
.hm-act.open .hm-act-plus { transform: rotate(45deg); color: var(--hm-rose); }

.hm-act-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.3, 1, 0.35, 1); }
.hm-act.open .hm-act-body { grid-template-rows: 1fr; }
.hm-act-inner { overflow: hidden; }

.hm-act-lines {
  padding: 0 0.4rem 1.3rem 3.6rem;
  font-family: var(--hm-read);
  font-size: 0.87rem;
  line-height: 1.75;
  color: var(--hm-dim);
}

.hm-act-lines p { margin: 0 0 0.2rem; }
.hm-act-lines b { color: var(--hm-rose); font-weight: 600; margin-right: 0.3rem; }

/* ══ 6. from the floor ═════════════════════════════════════ */
.hm-floor { position: relative; padding: 6rem 0 7rem; overflow: hidden; }

.hm-floor-head {
  max-width: var(--hm-wide);
  margin: 0 auto 2.4rem;
  padding: 0 2.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* a slow drift of real shots, credited, running off both edges */
.hm-strip { display: flex; gap: 14px; width: max-content; animation: hmSlide 90s linear infinite; }
.hm-strip:hover { animation-play-state: paused; }

@keyframes hmSlide { to { transform: translateX(-50%); } }

.hm-shot {
  position: relative;
  width: 260px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hm-edge);
  background: var(--hm-plinth);
  flex-shrink: 0;
  text-decoration: none;
  display: block;
}

.hm-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.86);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.3s;
}

.hm-shot:hover img { transform: scale(1.06); filter: none; }

.hm-shot-by {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem 0.8rem 0.65rem;
  background: linear-gradient(to top, rgba(8, 6, 10, 0.92), transparent);
  font-family: var(--hm-read);
  font-size: 0.68rem;
  color: var(--hm-text);
  opacity: 0;
  transition: opacity 0.25s;
}

.hm-shot:hover .hm-shot-by { opacity: 1; }
.hm-shot-by b { color: var(--hm-rose); font-weight: 600; }

/* ══ responsive ════════════════════════════════════════════ */
@media (max-width: 1050px) {
  .hm-door-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hm-chip { min-width: 0; }
  .hm-invite-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hm-flyer { max-width: 400px; transform: none; }
  .hm-count-row { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
}

@media (max-width: 720px) {
  .hm-band { padding: 4.5rem 1.25rem; }
  .hm-door-inner { padding: 0 1.25rem 3.5rem; }
  .hm-floor-head { padding: 0 1.25rem; }
  .hm-act-row { grid-template-columns: 1fr auto 26px; gap: 0.7rem; }
  .hm-act-num, .hm-act-tag { display: none; }
  .hm-act-name { font-size: 1.3rem; }
  .hm-act-pot { font-size: 1.15rem; }
  .hm-act-lines { padding-left: 0.4rem; }
  .hm-shot { width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-wall span, .hm-strip { animation: none; }
  .hm-dj, .hm-flyer, .hm-act-body, .hm-shot img { transition: none; }
  .hm-open::before { animation: none; }
}

/* ══ past events ═══════════════════════════════════════════ */
.pe-year {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 3rem 0 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--hm-edge);
}

.pe-year:first-child { margin-top: 0; }

.pe-year-name {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--hm-text);
  margin: 0;
}

.pe-year-count {
  font-family: var(--hm-read);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hm-faint);
}

.pe-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.4rem;
}

.pe-card { margin: 0; }

.pe-flyer {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hm-edge);
  background: var(--hm-plinth);
  transition: border-color 0.25s, transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}

.pe-flyer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.84);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.3s;
}

.pe-card:hover .pe-flyer {
  border-color: var(--hm-red);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px var(--hm-red);
}

.pe-card:hover .pe-flyer img { transform: scale(1.05); filter: none; }

.pe-name {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hm-text);
}

.pe-date {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--hm-read);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hm-faint);
}

.pe-card:hover .pe-date { color: var(--hm-rose); }

/* ══ 5. our partners ═══════════════════════════════════════ */
.hm-friends-band { padding-top: 5rem; padding-bottom: 5rem; }

.hm-friends {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.4rem;
}

.hm-friend {
  flex: 1 1 190px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.6rem 1rem;
  border: 1px solid var(--hm-edge);
  border-radius: 12px;
  background: var(--hm-plinth);
  text-decoration: none;
  transition: border-color 0.22s, transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}

.hm-friend:hover {
  border-color: var(--hm-red);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -28px var(--hm-red);
}

.hm-friend-logo {
  width: 100%;
  height: 108px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0A0710;
}

/* contain, never cover: these are logos, and cropping them ruins them */
.hm-friend-logo img {
  max-width: 84%;
  max-height: 84%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(0.95) brightness(0.95);
  transition: filter 0.3s, transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.hm-friend:hover .hm-friend-logo img { transform: scale(1.06); }

.hm-friend:hover .hm-friend-logo img { filter: none; }

.hm-friend-name {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hm-text);
  text-align: center;
}

.hm-friend:hover .hm-friend-name { color: var(--hm-rose); }

@media (max-width: 720px) {
  .hm-count-row { padding: 2rem 1.25rem; }
  .hm-cd-clock b { min-width: 1.5em; }
  .hm-count-down { padding: 1.2rem 1.2rem; }
}

/* the night's buttons sit under its own column, not centred like the door's */
.hm-cta-left { justify-content: flex-start; }

/* ══ 7. sync ═══════════════════════════════════════════════ */
.hm-sync-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
  margin: 2.6rem 0 1.6rem;
}

.hm-key {
  border: 1px solid var(--hm-edge);
  border-radius: 12px;
  background: var(--hm-plinth);
  padding: 1.3rem;
}

.hm-key-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--hm-edge);
}

.hm-key-head svg { width: 20px; height: 20px; color: var(--hm-red); flex-shrink: 0; }

.hm-key-name {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hm-text);
}

/* the whole row is the copy button: no hunting for a tiny icon */
.hm-key-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.3rem 1rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--hm-edge);
  border-radius: 8px;
  background: rgba(240, 234, 232, 0.025);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s;
}

.hm-key-field:last-child { margin-bottom: 0; }
.hm-key-field:hover { border-color: var(--hm-red); background: rgba(176, 0, 58, 0.08); }

.hm-key-label {
  grid-column: 1;
  font-family: var(--hm-read);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hm-faint);
}

.hm-key-val {
  grid-column: 1;
  font-family: var(--hm-read);
  font-size: 1rem;
  font-weight: 600;
  color: var(--hm-text);
  word-break: break-all;
}

.hm-key-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--hm-read);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hm-faint);
  transition: color 0.18s;
}

.hm-key-field:hover .hm-key-copy { color: var(--hm-rose); }
.hm-key-field.copied { border-color: #2F8F5B; background: rgba(47, 143, 91, 0.12); }
.hm-key-field.copied .hm-key-copy { color: #4ade80; }

.hm-sync-note {
  font-family: var(--hm-read);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--hm-dim);
  text-align: center;
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--hm-edge);
  background: rgba(176, 0, 58, 0.05);
  border-radius: 10px;
  max-width: 68ch;
  margin: 0 auto;
}

.hm-sync-note b { color: var(--hm-text); font-weight: 600; }

/* ══ 4. what the night is made of ══════════════════════════ */
.hm-offer-band { padding-bottom: 5rem; }

.hm-offer { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2.6rem; }

.hm-card {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: stretch;
  min-height: 250px;
  border: 1px solid var(--hm-edge);
  border-radius: 14px;
  overflow: hidden;
  background: var(--hm-plinth);
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1),
              border-color 0.3s, box-shadow 0.4s;
}

.hm-card[data-slide="left"]  { transform: translateX(-46px); }
.hm-card[data-slide="right"] { transform: translateX(46px); }
.hm-card.seen { opacity: 1; transform: none; }

.hm-card:hover { border-color: var(--hm-red); box-shadow: 0 26px 60px -36px var(--hm-red); }

/* the art panel, alternating sides so the run of cards zigzags */
.hm-card-art {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 80% at 40% 40%, rgba(176, 0, 58, 0.22), transparent 70%), #0A0710;
}

.hm-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) 300px; }
.hm-card:nth-child(even) .hm-card-art { order: 2; }

.hm-card-body { padding: 2.2rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }

.hm-card-kicker {
  font-family: var(--hm-read);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hm-rose);
  margin: 0 0 0.6rem;
}

.hm-card-name {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--hm-text);
  margin: 0 0 0.9rem;
}

.hm-card-line {
  font-family: var(--hm-read);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(240, 234, 232, 0.7);
  margin: 0 0 1.4rem;
  max-width: 58ch;
}

.hm-card-link {
  align-self: flex-start;
  font-family: var(--hm-read);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hm-text);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--hm-red);
  transition: color 0.2s, letter-spacing 0.25s;
}

.hm-card-link:hover { color: var(--hm-rose); letter-spacing: 0.3em; }

/* gamba: suits drifting past a slowly turning wheel */







@keyframes hmFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-16px) rotate(6deg); }
}



@keyframes hmSpin { to { transform: rotate(360deg); } }

/* lewd: a slow breathing glow */






@keyframes hmBeat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.12); }
}

/* music: an equaliser that never stops */
.hm-eq {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.hm-eq i {
  display: block;
  width: 9px;
  border-radius: 4px;
  background: linear-gradient(to top, var(--hm-red), var(--hm-rose));
  animation: hmBar 1.1s ease-in-out infinite alternate;
}

.hm-eq i:nth-child(1) { height: 34px; animation-delay: -0.9s; }
.hm-eq i:nth-child(2) { height: 62px; animation-delay: -0.2s; }
.hm-eq i:nth-child(3) { height: 92px; animation-delay: -0.6s; }
.hm-eq i:nth-child(4) { height: 48px; animation-delay: -0.35s; }
.hm-eq i:nth-child(5) { height: 106px; animation-delay: -0.8s; }
.hm-eq i:nth-child(6) { height: 40px; animation-delay: -0.15s; }
.hm-eq i:nth-child(7) { height: 76px; animation-delay: -0.5s; }
.hm-eq i:nth-child(8) { height: 54px; animation-delay: -0.7s; }
.hm-eq i:nth-child(9) { height: 30px; animation-delay: -0.3s; }

@keyframes hmBar { to { transform: scaleY(0.35); } }

/* ══ the night sheet, opened from the flyer ════════════════ */
.hm-flyer { cursor: zoom-in; }

.hm-sheet {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  place-items: center;
  padding: 2rem 1.25rem;
  background: rgba(4, 3, 6, 0.9);
  backdrop-filter: blur(8px);
}

.hm-sheet.open { display: grid; }

.hm-sheet-box {
  position: relative;
  width: min(760px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  border: 1px solid var(--hm-edge);
  border-radius: 16px;
  background: var(--hm-plinth);
  box-shadow: 0 50px 120px -50px var(--hm-red);
  animation: hmRise 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes hmRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.hm-sheet-x {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hm-edge);
  background: rgba(8, 6, 10, 0.8);
  color: var(--hm-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.hm-sheet-x:hover { background: var(--hm-red); border-color: var(--hm-red); }

.hm-sheet-body { padding: 2.2rem 2.2rem 2.4rem; }

.hm-sheet-kicker {
  font-family: var(--hm-read);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hm-rose);
  margin: 0 0 0.5rem;
}

.hm-sheet-title {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--hm-text);
  margin: 0 0 1.8rem;
}

.hm-sheet-part { margin-bottom: 2rem; }
.hm-sheet-part:last-child { margin-bottom: 0; }

.hm-sheet-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--hm-read);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hm-faint);
  padding-bottom: 0.7rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--hm-edge);
}

.hm-sheet-pot { color: var(--hm-rose); }

.hm-sheet-djs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.7rem;
}
.hm-sheet-acts { display: grid; gap: 0.7rem; }

.hm-sheet-act {
  border: 1px solid var(--hm-edge);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  background: rgba(240, 234, 232, 0.022);
}

.hm-sheet-act-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.hm-sheet-act-name {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hm-text);
}

.hm-sheet-act-pot {
  font-family: var(--hm-sign);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--hm-rose);
  white-space: nowrap;
}

.hm-sheet-act-lines {
  margin-top: 0.5rem;
  font-family: var(--hm-read);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--hm-dim);
}

.hm-sheet-act-lines p { margin: 0 0 0.15rem; }
.hm-sheet-act-lines b { color: var(--hm-rose); font-weight: 600; margin-right: 0.3rem; }

@media (max-width: 860px) {
  .hm-card, .hm-card:nth-child(even) { grid-template-columns: 1fr; }
  .hm-card-art { min-height: 190px; }
  .hm-card:nth-child(even) .hm-card-art { order: 0; }
  .hm-card-body { padding: 1.6rem 1.4rem 1.8rem; }
  .hm-sheet-body { padding: 1.6rem 1.3rem 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-card { opacity: 1; transform: none; transition: none; }
  .hm-eq i, .hm-sheet-box { animation: none; }
}

/* ══ gamba: a wheel that actually reads as a wheel ══════════ */
.hm-art-gamba { display: grid; place-items: center; }

.hm-roulette {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    #B0003A 0deg 15deg,
    #14101A 15deg 30deg
  );
  box-shadow: 0 0 60px -10px rgba(176, 0, 58, 0.7), inset 0 0 40px rgba(0, 0, 0, 0.7);
  animation: hmWheel 22s linear infinite;
}

@keyframes hmWheel { to { transform: rotate(360deg); } }

.hm-roulette-rim {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(201, 162, 39, 0.45);
}

.hm-roulette-hub {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #241C28, #0A070C);
  border: 1px solid rgba(201, 162, 39, 0.3);
}

/* the ball runs the other way, as it does on a real table */
.hm-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  animation: hmBall 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite reverse;
}

.hm-ball::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: #F0EAE8;
  box-shadow: 0 0 12px rgba(240, 234, 232, 0.8);
}

@keyframes hmBall { to { transform: rotate(360deg); } }

/* three cards fanned in the corner, breathing slowly */
.hm-card-fan {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
}

.hm-play-card {
  width: 34px;
  height: 48px;
  margin-left: -13px;
  border-radius: 4px;
  background: linear-gradient(160deg, #FBF7F4, #E4DCD6);
  color: #14101A;
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 4px 0 0 4px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.9);
  animation: hmFan 6s ease-in-out infinite;
}

.hm-play-card i { display: block; font-style: normal; font-size: 0.8rem; margin-top: 1px; }
.hm-play-card:nth-child(1) { transform: rotate(-14deg); animation-delay: 0s; }
.hm-play-card:nth-child(2) { transform: rotate(-2deg);  animation-delay: -2s; }
.hm-play-card:nth-child(3) { transform: rotate(10deg);  animation-delay: -4s; }
.hm-play-card:nth-child(2) i, .hm-play-card:nth-child(3) i { color: #C1002F; }

@keyframes hmFan {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* ══ partners and residents, side by side ══════════════════ */
.hm-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.hm-title-sm { font-size: clamp(2rem, 4vw, 3rem); }

.hm-friends {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 1.8rem;
}

.hm-friend {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 0.9rem 1.2rem;
  border: 1px solid var(--hm-edge);
  border-radius: 12px;
  background: var(--hm-plinth);
  text-decoration: none;
  transition: border-color 0.22s, transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}

/* A logo box that is nearly square and padded: every one of these images has
   a different shape, and none of them may be cropped. */
.hm-friend-logo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  padding: 14px;
  border-radius: 10px;
  background: #0A0710;
  display: block;
}

.hm-friend-logo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: saturate(0.95) brightness(0.95);
  transition: filter 0.3s, transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@media (max-width: 900px) {
  .hm-two { grid-template-columns: 1fr; gap: 2.8rem; }
}

@media (max-width: 460px) {
  .hm-friends { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-roulette, .hm-ball, .hm-play-card { animation: none; }
}

/* ══ partners hard left, residents hard right ══════════════ */
.hm-friends-band { max-width: none; padding-left: 3.5rem; padding-right: 3.5rem; }

.hm-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 4.5rem;
  align-items: start;
  max-width: 1900px;
  margin: 0 auto;
}

/* the seam between the two halves, with the wing hung in the middle of it */
.hm-two-rule {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: 1.5rem 0;
}

.hm-rule-line {
  flex: 1;
  width: 1px;
  min-height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(240, 234, 232, 0.16));
}

.hm-rule-line:last-child {
  background: linear-gradient(to bottom, rgba(240, 234, 232, 0.16), transparent);
}

.hm-rule-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  flex-shrink: 0;
}

/* a slow ring of light behind the wing, so the gap is not just empty */
.hm-rule-mark::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 0, 58, 0.34), transparent 68%);
  animation: hmMarkGlow 6s ease-in-out infinite;
}

.hm-rule-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(240, 234, 232, 0.1);
}

.hm-rule-mark img {
  position: relative;
  width: 46px;
  height: auto;
  opacity: 0.85;
}

@keyframes hmMarkGlow {
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.hm-col-left  { text-align: left; }
.hm-col-right { text-align: right; }

.hm-col-right .hm-eyebrow,
.hm-col-right .hm-title { text-align: right; }

/* each half keeps its own two-up grid, hugging its own edge */
.hm-col .hm-friends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 1rem;
  margin-top: 1.8rem;
}

.hm-col-right .hm-friends { justify-content: end; }

@media (max-width: 1050px) {
  .hm-friends-band { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hm-two { grid-template-columns: 1fr; gap: 2.6rem; }
  .hm-two-rule { flex-direction: row; padding: 0; gap: 1.1rem; }
  .hm-rule-line { width: auto; height: 1px; min-height: 0;
    background: linear-gradient(to right, transparent, rgba(240, 234, 232, 0.16)); }
  .hm-rule-line:last-child {
    background: linear-gradient(to right, rgba(240, 234, 232, 0.16), transparent); }
  .hm-rule-mark { width: 58px; height: 58px; }
  .hm-rule-mark img { width: 34px; }
  .hm-col-right, .hm-col-right .hm-eyebrow, .hm-col-right .hm-title { text-align: left; }
  .hm-col-right .hm-friends { justify-content: start; }
}

/* ══ lewd: cuffs on a chain, and a knot pulling tight ══════ */
.hm-art-lewd {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.hm-cuffs {
  position: relative;
  z-index: 2;
  width: 74%;
  max-width: 230px;
  height: auto;
  color: rgba(240, 234, 232, 0.72);
  filter: drop-shadow(0 0 18px rgba(176, 0, 58, 0.55));
}

/* the ratchet arm catches the light, so it reads as metal */
.hm-cuff-ratchet { stroke: var(--hm-rose); }

/* hung from above: the pair swings the way a real pair would */
.hm-cuffs-swing {
  transform-origin: 130px 20px;
  animation: hmSwing 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes hmSwing {
  0%, 100% { transform: rotate(-4.5deg); }
  50%      { transform: rotate(4.5deg); }
}

/* the free cuff hangs open and drifts against the swing */
.hm-cuff-open {
  transform-origin: 160px 71px;
  animation: hmDangle 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes hmDangle {
  0%, 100% { transform: rotate(9deg); }
  50%      { transform: rotate(-6deg); }
}

/* a knot in the corner, cinching and easing off */
.hm-knot {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 84px;
  height: auto;
  color: rgba(212, 64, 106, 0.4);
  transform-origin: center;
  animation: hmCinch 6s ease-in-out infinite;
}

@keyframes hmCinch {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.76); }
}

@media (max-width: 860px) {
  .hm-cuffs { max-width: 190px; }
  .hm-knot { width: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-cuffs-swing, .hm-cuff-open, .hm-knot { animation: none; }
}