/*
 * Shared guardrails for controls across all design directions.
 * Keep CTAs readable and prevent neighboring buttons from colliding.
 */
button {
  max-width: 100%;
  min-height: 48px;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/*
 * Scroll treatment shared by every direction:
 * - prevent accidental page-wide horizontal bars
 * - keep the vertical scrollbar slim and brand-aligned
 * - preserve scrolling in intentional horizontal galleries without native chrome
 */
html {
  scrollbar-width: thin;
  scrollbar-color: #8e7440 #111114;
}

body {
  overflow-x: clip;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #111114;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #111114;
  border-radius: 999px;
  background: #8e7440;
}

::-webkit-scrollbar-thumb:hover {
  background: #c19b50;
}

.speed-gallery {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-inline: contain;
  cursor: grab;
}

.speed-gallery:active {
  cursor: grabbing;
}

.speed-gallery::-webkit-scrollbar {
  display: none;
}

.speed-gallery:focus-visible {
  outline: 1px solid #d5ac1d;
  outline-offset: -2px;
}

/* Precise close control for every member preview. */
.club-preview .close-preview {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  background: rgb(12 12 14 / 72%);
  color: transparent;
  box-shadow: 0 10px 30px rgb(0 0 0 / 32%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.club-preview .close-preview::before,
.club-preview .close-preview::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 1.5px;
  border-radius: 999px;
  background: #f4efe6;
  transition: transform 180ms ease;
}

.club-preview .close-preview::before {
  transform: rotate(45deg);
}

.club-preview .close-preview::after {
  transform: rotate(-45deg);
}

.club-preview .close-preview:hover {
  border-color: rgb(213 172 29 / 82%);
  background: rgb(32 29 22 / 92%);
  transform: scale(1.04);
}

.club-preview .close-preview:hover::before {
  transform: rotate(135deg);
}

.club-preview .close-preview:hover::after {
  transform: rotate(45deg);
}

.club-preview .close-preview:active {
  transform: scale(0.96);
}

.club-preview .close-preview:focus-visible {
  outline: 2px solid #d5ac1d;
  outline-offset: 3px;
}

/*
 * Preview status: keep it as the final page element instead of allowing the
 * former sticky rule to float through the middle of the viewport.
 */
body .bottom-ghost {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 11px 18px calc(11px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 12%);
  background:
    linear-gradient(90deg, rgb(213 172 29 / 8%), transparent 26% 74%, rgb(213 172 29 / 8%)),
    rgb(9 9 11 / 90%);
  color: rgb(244 239 230 / 58%);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body .bottom-ghost::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background: #b9913a;
  box-shadow: 0 0 12px rgb(185 145 58 / 72%);
  vertical-align: 1px;
}

/*
 * Integrate the transparent, source-faithful wordmark in every direction.
 * The daylight direction intentionally presents it as a dark brand plaque so
 * the white subline stays legible.
 */
.v-a .logo,
.v-b .logo,
.v-c .logo,
.v-e .logo {
  display: block;
  height: auto;
  mix-blend-mode: normal;
  filter: drop-shadow(0 12px 24px rgb(0 0 0 / 26%));
}

.v-a .hero-content > .logo,
.v-b .top > .logo,
.v-c .hero-copy > .logo,
.v-e .invite > .logo {
  width: clamp(118px, 11vw, 148px);
}

.v-d .logo {
  display: block;
  height: auto;
  padding: 10px;
  border: 1px solid rgb(180 100 60 / 22%);
  border-radius: 2px;
  background: #09090b;
  box-shadow: 0 16px 40px rgb(67 43 31 / 18%);
  mix-blend-mode: normal;
}

.v-d .hero > div > .logo {
  width: clamp(112px, 10vw, 136px);
}

.v-a footer .logo,
.v-b footer .logo,
.v-c footer .logo,
.v-e footer .logo {
  width: 92px;
  margin: 0;
  opacity: 0.78;
}

.v-d footer .logo {
  width: 92px;
  margin: 0;
  padding: 7px;
  opacity: 0.9;
}

.v-a .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.v-a .actions > button {
  flex: 0 1 auto;
}

@media (max-width: 540px) {
  .v-a .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .v-a .actions > button {
    width: 100%;
  }
}

/* Variant B: the CTA row must span the complete facts grid. */
.v-b .facts > div:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.v-b .facts > div:last-child .mock {
  width: 100%;
  margin: 0;
}

@media (max-width: 540px) {
  .v-b .facts > div:last-child {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Inline CTA pairs used by the remaining variants. */
.v-d .hero > div > div:last-child,
.v-e .invite > div:last-of-type {
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  gap: 10px;
}

@media (max-width: 420px) {
  .v-d .hero > div > div:last-child,
  .v-e .invite > div:last-of-type {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .v-d .hero > div > div:last-child .mock,
  .v-e .invite > div:last-of-type .mock {
    width: 100%;
  }
}