@font-face {
  font-family: 'Hind';
  src: url('../fonts/hind-light-webfont.woff2') format('woff2');
  font-weight: 300;
}
@font-face {
  font-family: 'Hind';
  src: url('../fonts/hind-bold-webfont.woff2') format('woff2');
  font-weight: 700;
}

body { margin: 0; padding: 0; background-color: #000; color: #fff; font-family: 'Hind', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.page-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 2em; box-sizing: border-box; }
.content-wrapper { display: flex; gap: 4em; width: 100%; max-width: 1400px; align-items: stretch; }

.left-column { flex: 1; display: flex; justify-content: center; align-items: center; }
.habeez-logo { font-weight: 700; font-size: clamp(40px, 8vw, 120px); cursor: pointer; text-align: center; line-height: 1; }

.right-column { flex: 2; display: flex; flex-direction: column; }
.section-header {
  font-weight: 700;
  font-size: clamp(1em, 2vw, 1.5em);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1em;
}
.welcome-text { font-weight: 300; line-height: 1.7; max-width: 65ch; text-align: justify; font-size: 1.1em; }

.issues-section {
  flex-grow: 1;
  margin-top: 2em;
  display: flex;
  gap: 1.5em;
  min-height: 0;
  align-items: center;
}

.tumbler-wrapper {
  overflow-y: hidden;
  height: 7.8em;
  mask-image: linear-gradient(to bottom, transparent, black 33%, black 67%, transparent);
  overscroll-behavior-y: contain;
}
.tumbler-list span {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 2.2em;
  margin-bottom: 0.4em;
  transition: color 0.2s ease-in-out;
  padding: 0 0.5em;
  text-align: center;
}
.tumbler-list span.is-active { color: var(--theme-color, #FFD700); }

.tumbler-list span.scroll-buffer {
  color: #fff;
}

.tumbler-list .scroll-stop {
  color: #444;
  user-select: none;
}

.unlock-wrapper { padding-left: 2em; }
#unlock-button {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  background-color: transparent;
  padding: 0.6em 1em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--theme-color, #444);
  color: var(--theme-color, #555);
  transition: all 0.2s ease;
}
#unlock-button:hover {
  background-color: var(--theme-bg-hover, transparent);
  box-shadow: 0 0 10px var(--theme-shadow, transparent);
}
#unlock-button.disabled {
  border-color: #444;
  color: #555;
  background-color: transparent;
  pointer-events: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .content-wrapper { flex-direction: column; }
  .issues-section { flex-direction: column; }
  .tumbler-wrapper { overscroll-behavior-y: auto; }
}