/* Member wins (see member-wins.js). Static by default: header, a swipeable
   row of win cards (a still wall in the compact variant), the headline and
   the call to action. With JavaScript and motion allowed, .mw-live turns it
   into a tall scroll track with a sticky stage. */
.mw {
  --mw-canvas: #FAF9F6;
  --mw-ink: #0A0A0F;
  --mw-ink-2: rgba(10, 10, 15, .70);
  --mw-ink-3: rgba(10, 10, 15, .62);
  --mw-accent: #6D28D9;
  --mw-card-w: clamp(240px, 24vw, 330px);
  position: relative;
  background: var(--mw-canvas);
  color: var(--mw-ink);
}
.mw-stage { position: relative; padding: clamp(56px, 8vw, 104px) 20px; }
.mw-wall, .mw-veil, .mw-glow, .mw-progress { display: none; }
.mw-head { max-width: 1120px; margin: 0 auto 28px; display: grid; gap: 10px; justify-items: start; }
.mw-lead { font-size: 1.0625rem; line-height: 1.55; color: var(--mw-ink-2); margin: 0; max-width: 46ch; }
.mw-deck {
  display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  max-width: 1120px; margin: 0 auto; padding: 8px 2px 18px;
}
.mw-card {
  flex: none; width: 260px; margin: 0; scroll-snap-align: start;
  background: #1E1F22; border-radius: 18px; padding: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 50px -24px rgba(10, 10, 15, .45);
}
.mw-card img { display: block; width: 100%; height: auto; border-radius: 12px; }
.mw-center { max-width: 1120px; margin: 36px auto 0; display: grid; gap: 22px; justify-items: start; }
.mw-title {
  font-family: 'Fustat', 'Inter', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2.25rem, 1.4rem + 4.2vw, 5rem); line-height: 1; letter-spacing: -.045em;
  margin: 0; text-wrap: balance;
}
.mw-nowrap { white-space: nowrap; }
/* The underline is a background, so it follows the words when they wrap and draws in line by line. */
.mw-hl {
  background-image: linear-gradient(var(--mw-accent), var(--mw-accent));
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: var(--mw-u, 100%) .09em; padding-bottom: .08em;
}
.mw-end { display: grid; gap: 14px; justify-items: start; }
.mw-note { font-size: 13px; line-height: 1.55; color: var(--mw-ink-3); margin: 0; max-width: 62ch; }

/* ---- Scroll story ---- */
.mw.mw-live { height: 520vh; }
.mw-live .mw-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden;
  contain: layout paint;
}
.mw-live .mw-wall {
  display: flex; gap: 14px; position: absolute; inset: -6% -4% auto; padding: 0 14px;
  transform-origin: 50% 40%;
}
.mw-col { flex: 1 1 0; display: grid; gap: 14px; align-content: start; }
.mw-col:nth-child(even) { margin-top: 80px; }
.mw-col img { display: block; width: 100%; height: auto; border-radius: 12px; background: #1E1F22; }
.mw-live .mw-veil {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 52% at 50% 54%, rgba(250, 249, 246, .92), rgba(250, 249, 246, .55) 55%, rgba(250, 249, 246, 0) 100%),
    linear-gradient(180deg, var(--mw-canvas) 0%, rgba(250, 249, 246, 0) 22%, rgba(250, 249, 246, 0) 78%, var(--mw-canvas) 100%);
}
.mw-live .mw-head {
  position: absolute; z-index: 60; top: max(96px, 13vh); left: 0; right: 0; margin: 0 auto;
  padding: 0 20px; justify-items: center; text-align: center;
}
.mw-live .mw-deck {
  display: block; position: absolute; inset: 0; overflow: visible; max-width: none; margin: 0; padding: 0;
  transform-origin: 50% 55%;
}
.mw-live .mw-card {
  position: absolute; left: 50%; top: 56%; width: var(--mw-card-w);
  opacity: 0; visibility: hidden; transform-origin: 50% 50%;
}
.mw-live .mw-card img { max-height: 64vh; max-height: 64svh; object-fit: cover; object-position: top center; }
.mw-live .mw-glow {
  display: block; position: absolute; inset: 0; z-index: 55; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 60% 46% at 50% 50%, rgba(250, 249, 246, .96), rgba(250, 249, 246, .7) 55%, rgba(250, 249, 246, 0) 100%);
}
.mw-live .mw-center {
  position: absolute; z-index: 58; inset: 0; margin: 0; padding: 0 20px; grid-template-columns: minmax(0, 1fr);
  align-content: center; justify-items: center; text-align: center; max-width: none; pointer-events: none;
}
.mw-live .mw-title { opacity: 0; }
.mw-live .mw-hl { --mw-u: 0%; }
.mw-live .mw-end { opacity: 0; visibility: hidden; justify-items: center; pointer-events: auto; }
.mw-live .mw-note { text-align: center; }
.mw-live .mw-progress {
  display: grid; gap: 10px; justify-items: center; position: absolute; z-index: 60;
  left: 0; right: 0; bottom: max(84px, 11vh); padding: 0 20px;
}
.mw-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mw-chip {
  font: 600 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .02em; color: var(--mw-ink-3);
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(10, 10, 15, .1); border-radius: 999px; padding: 8px 12px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mw-chip.is-on { background: var(--mw-ink); color: #fff; border-color: var(--mw-ink); }
.mw-bar { width: min(320px, 70vw); height: 3px; border-radius: 99px; background: rgba(10, 10, 15, .1); overflow: hidden; }
.mw-bar i { display: block; height: 100%; background: var(--mw-accent); transform-origin: left center; transform: scaleX(0); }

/* ---- Compact (homepage): a short beat, and a still wall when nothing moves ---- */
.mw.mw-compact.mw-live { height: 190vh; }
.mw-compact .mw-stage { overflow: hidden; }
.mw-compact .mw-title { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem); }
.mw-compact .mw-end { justify-items: center; }
.mw-sub {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--mw-ink-2);
  margin: 0; max-width: 52ch; text-align: center;
}
.mw-compact .mw-note { text-align: center; }
.mw-compact:not(.mw-live) .mw-stage { padding: clamp(80px, 11vw, 140px) 20px; }
.mw-compact:not(.mw-live) .mw-wall {
  display: flex; gap: 14px; position: absolute; inset: -40px -4% auto; padding: 0 14px;
  opacity: .35; filter: saturate(.4);
}
.mw-compact:not(.mw-live) .mw-glow {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 72% 62% at 50% 50%, rgba(250, 249, 246, .97), rgba(250, 249, 246, .78) 60%, rgba(250, 249, 246, .35) 100%);
}
.mw-compact:not(.mw-live) .mw-deck { display: none; }
.mw-compact:not(.mw-live) .mw-head,
.mw-compact:not(.mw-live) .mw-center { position: relative; z-index: 2; justify-items: center; text-align: center; }
.mw-compact:not(.mw-live) .mw-head { margin-bottom: 18px; }
.mw-compact:not(.mw-live) .mw-center { margin-top: 0; }

@media (max-width: 760px) {
  .mw.mw-live { height: 460vh; }
  .mw { --mw-card-w: min(68vw, 290px); }
  .mw-live .mw-wall { gap: 10px; inset: -4% -30% auto; }
  .mw-col { gap: 10px; }
  .mw-col:nth-child(n+5) { display: none; }
  .mw-live .mw-card img { max-height: 58vh; max-height: 58svh; }
  .mw-chip:not(.is-on) { display: none; }
  .mw-nowrap { white-space: normal; }
  .mw .mw-title { font-size: clamp(2.125rem, 1rem + 5vw, 3rem); }
  .mw.mw-compact.mw-live { height: 165vh; }
  .mw-compact .mw-title { font-size: clamp(2rem, .9rem + 5vw, 2.75rem); }
}
@media (max-height: 640px) and (min-width: 761px) {
  .mw { --mw-card-w: min(24vw, 46vh); }
}
@media (prefers-reduced-motion: reduce) {
  .mw-chip { transition: none; }
}