:root {
  --hc-me-bg: #1f1a14;
  --hc-me-panel: #fff8ea;
  --hc-me-ink: #251b12;
  --hc-me-muted: #756657;
  --hc-me-line: rgba(72, 52, 31, .18);
  --hc-me-honey: #c27e1c;
  --hc-me-producer: #536845;
  --hc-me-story: #7a5137;
  --hc-me-radius: 20px;
  --hc-me-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.hc-museum-entrance {
  color: var(--hc-me-ink);
  background:
    radial-gradient(circle at top left, rgba(194,126,28,.24), transparent 38%),
    linear-gradient(135deg, #211911 0%, #302316 48%, #18130e 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: inherit;
  isolation: isolate;
}

.hc-museum-entrance.is-producer {
  background:
    radial-gradient(circle at top left, rgba(83,104,69,.35), transparent 42%),
    linear-gradient(135deg, #172016 0%, #2c321f 54%, #151711 100%);
}

.hc-museum-entrance.is-honey {
  background:
    radial-gradient(circle at top left, rgba(244,197,66,.34), transparent 42%),
    linear-gradient(135deg, #2b1a08 0%, #4a2d0b 54%, #181109 100%);
}

.hc-museum-entrance.is-story {
  background:
    radial-gradient(circle at top left, rgba(122,81,55,.35), transparent 42%),
    linear-gradient(135deg, #211713 0%, #3b2b21 54%, #171210 100%);
}

.hc-me-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 14px 0;
}

.hc-me-topline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}

.hc-me-brand,
.hc-me-feature,
.hc-me-search,
.hc-me-nav a {
  text-decoration: none;
}

.hc-me-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  color: #fff8ea;
}

.hc-me-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #ffe0a3;
  font-weight: 800;
  letter-spacing: .04em;
}

.hc-me-title-wrap {
  display: grid;
  line-height: 1.1;
}

.hc-me-title-wrap strong {
  font-size: clamp(1rem, 2vw, 1.18rem);
  letter-spacing: .01em;
}

.hc-me-title-wrap span {
  color: rgba(255,248,234,.72);
  font-size: .78rem;
  margin-top: 3px;
}

.hc-me-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hc-me-nav::-webkit-scrollbar { display: none; }

.hc-me-nav a,
.hc-me-search {
  color: rgba(255,248,234,.88);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.055);
  padding: 9px 12px;
  border-radius: 999px;
  font-size: .84rem;
  line-height: 1;
  white-space: nowrap;
}

.hc-me-nav a:hover,
.hc-me-search:hover,
.hc-me-nav a:focus,
.hc-me-search:focus {
  color: #fff;
  background: rgba(255,255,255,.14);
  outline: none;
}

.hc-me-live-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 14px;
  margin-top: 14px;
}

.hc-me-note,
.hc-me-feature {
  background: rgba(255,248,234,.96);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--hc-me-radius);
  box-shadow: var(--hc-me-shadow);
}

.hc-me-note {
  padding: 16px 18px;
}

.hc-me-note-label,
.hc-me-eyebrow {
  display: block;
  color: var(--hc-me-honey);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hc-museum-entrance.is-producer .hc-me-note-label,
.hc-museum-entrance.is-producer .hc-me-eyebrow { color: var(--hc-me-producer); }
.hc-museum-entrance.is-story .hc-me-note-label,
.hc-museum-entrance.is-story .hc-me-eyebrow { color: var(--hc-me-story); }

.hc-me-note p {
  margin: 0;
  color: var(--hc-me-ink);
  font-size: clamp(.95rem, 1.8vw, 1.08rem);
  line-height: 1.45;
}

.hc-me-feature {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 10px;
  color: var(--hc-me-ink);
  transition: transform .18s ease, background .18s ease;
}

.hc-me-feature:hover,
.hc-me-feature:focus {
  transform: translateY(-1px);
  background: #fffdf7;
  outline: none;
}

.hc-me-feature-art {
  min-height: 86px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.72), transparent 14%),
    radial-gradient(circle at 65% 55%, rgba(255,255,255,.32), transparent 18%),
    linear-gradient(140deg, #f4c542, #c27e1c 58%, #7b4711);
  position: relative;
  overflow: hidden;
}

.hc-museum-entrance.is-producer .hc-me-feature-art {
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.46), transparent 14%),
    radial-gradient(circle at 65% 55%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(140deg, #9ba985, #536845 58%, #2b3523);
}

.hc-museum-entrance.is-story .hc-me-feature-art {
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.42), transparent 14%),
    radial-gradient(circle at 65% 55%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(140deg, #d2a36f, #7a5137 58%, #342119);
}

.hc-me-feature-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(30deg, rgba(255,255,255,.18) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.18) 87.5%, rgba(255,255,255,.18)),
    linear-gradient(150deg, rgba(255,255,255,.18) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.18) 87.5%, rgba(255,255,255,.18));
  background-size: 24px 42px;
  opacity: .42;
}

.hc-me-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.hc-me-feature-copy strong {
  color: var(--hc-me-ink);
  font-size: 1rem;
  line-height: 1.15;
  margin-bottom: 4px;
}

.hc-me-feature-copy span:last-child {
  color: var(--hc-me-muted);
  font-size: .84rem;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .hc-me-shell { width: min(100% - 20px, 680px); padding: 10px 0; }
  .hc-me-topline { grid-template-columns: 1fr auto; gap: 10px; }
  .hc-me-brand { min-width: 0; }
  .hc-me-title-wrap span { display: none; }
  .hc-me-search { grid-column: 2; }
  .hc-me-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    order: 3;
    padding-bottom: 2px;
  }
  .hc-me-live-row { grid-template-columns: 1fr; margin-top: 10px; }
  .hc-me-note { padding: 13px 14px; }
  .hc-me-feature { grid-template-columns: 76px 1fr; }
  .hc-me-feature-art { min-height: 76px; }
}

@media (max-width: 520px) {
  .hc-me-mark { width: 38px; height: 38px; font-size: .82rem; }
  .hc-me-title-wrap strong { font-size: .98rem; }
  .hc-me-nav a, .hc-me-search { padding: 8px 10px; font-size: .78rem; }
  .hc-me-feature { grid-template-columns: 1fr; }
  .hc-me-feature-art { min-height: 96px; }
}