/*! Copyright (c) MatchFlow.gg. All rights reserved. Proprietary: see https://matchflow.gg/terms */
.wp-hero h1 {
  font-size: clamp(2.3rem, 4.2vw, 3.7rem);
  line-height: 1.04;
}
.wp-hero .wh-hero-stage {
  aspect-ratio: var(--wp-ratio, 1800 / 1012);
}
.wp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--wh-dim);
  font-size: 13.5px;
  font-weight: 700;
}
.wp-crumbs a {
  color: var(--wh-muted);
  text-decoration: none;
}
.wp-crumbs a:hover {
  color: #fff;
}
.wp-crumbs [aria-current] {
  color: #d9ccff;
}
.wp-hero-window .wh-hero-stage {
  right: var(--wh-gutter);
  width: min(50vw, 900px);
  aspect-ratio: auto;
}
.wp-hero-window .wh-hero-copy > * {
  max-width: min(500px, 40vw);
}
.wp-hero-window .wp-hero-shot {
  width: 100%;
}
.wp-hero-lineup .wh-hero-stage {
  right: max(var(--wh-gutter), calc((100vw - var(--wh-max)) / 2 + var(--wh-gutter)));
  width: min(46vw, 760px);
}
.wp-hero-lineup .wh-hero-stage::before {
  content: "";
  position: absolute;
  inset: 30% -6% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(142, 97, 255, 0.42), rgba(61, 139, 255, 0.14) 45%, transparent 70%);
  filter: blur(10px);
}
.wp-hero-lineup .wh-hero-art {
  object-fit: contain;
  -webkit-mask-image: none;
  mask-image: none;
}
.wp-hero-lineup .wh-hero-copy > * {
  max-width: min(500px, 42vw);
}
.wp-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  background: #0c0a2a;
  box-shadow: var(--wh-shadow);
}
.wp-figure img {
  width: 100%;
}
.wp-figure figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(9, 7, 32, 0.74);
  color: var(--wh-muted);
  font-size: 12.5px;
  font-weight: 700;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wp-figure-plain {
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
}
.wp-feature {
  max-width: 1100px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  overflow: hidden;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow);
}
.wp-feature img {
  width: 100%;
}
.wp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.wp-pair .wp-figure img {
  aspect-ratio: 11 / 7;
  object-fit: cover;
}
.wh-cards.wp-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wh-cards.wp-cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wh-safety-grid.wp-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wh-safety-grid.wp-tiles-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wh-steps.wp-steps-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wp-more {
  margin-top: 18px;
  font-weight: 800;
}
.wp-more a {
  color: #d9ccff;
  text-decoration: none;
}
.wp-more a:hover {
  color: #fff;
}
.wp-more i {
  margin-left: 6px;
  font-size: 0.85em;
}
.wp-more-center {
  margin-top: clamp(24px, 3vw, 36px);
  text-align: center;
}
.wp-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 860px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding: 16px 20px;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius-sm);
  background: var(--wh-surface);
  color: var(--wh-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.wp-note i {
  margin-top: 4px;
  color: #b9a8ff;
}
.wp-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.wp-flow-chat {
  position: relative;
  margin: 0;
  padding: 16px 18px 52px;
  border: 1px solid var(--wh-line-strong);
  border-radius: var(--wh-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 50%), var(--wh-surface-strong);
  box-shadow: var(--wh-shadow);
}
.wp-flow-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--wh-line);
}
.wp-flow-head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1c1650;
}
.wp-flow-head span {
  display: grid;
  line-height: 1.25;
}
.wp-flow-head em {
  color: var(--wh-dim);
  font-size: 12px;
  font-style: normal;
}
.wp-flow-hang {
  margin-left: auto;
  padding: 7px 12px;
  border: 1px solid var(--wh-gradient-rim);
  border-radius: 999px;
  background: var(--wh-gradient);
  background-origin: border-box;
  color: #fff;
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: 0 0 0 4px rgba(142, 97, 255, 0.22), 0 10px 26px rgba(142, 97, 255, 0.4);
}
.wp-flow-msg {
  width: fit-content;
  max-width: 85%;
  margin-top: 8px;
  padding: 8px 13px;
  border-radius: 16px 16px 16px 6px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
}
.wp-flow-mine {
  margin-left: auto;
  border-radius: 16px 16px 6px 16px;
  background: rgba(142, 97, 255, 0.36);
}
.wp-flow-chat figcaption {
  position: absolute;
  left: 18px;
  bottom: 14px;
  color: var(--wh-dim);
  font-size: 12.5px;
  font-weight: 700;
}
.wp-flow-arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wh-gradient);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 12px 30px rgba(142, 97, 255, 0.4);
}
.wp-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wp-related-card {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 12px 12px 18px;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  background: var(--wh-surface);
  text-decoration: none;
  transition: transform 260ms var(--wh-ease), border-color 260ms ease;
}
.wp-related-card:hover {
  transform: translateY(-4px);
  border-color: var(--wh-line-strong);
}
.wp-related-art {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
  border-radius: 14px;
  background: #140f3c;
}
.wp-related-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wp-related-card strong {
  margin-inline: 4px;
  color: #fff;
  font-family: "Outfit", "Manrope", system-ui, sans-serif;
  font-size: 1.12rem;
}
.wp-related-card span:last-child {
  margin-inline: 4px;
  color: var(--wh-muted);
  font-size: 14px;
}
.wp-venues {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wp-venue {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.wp-venue .wh-place-copy p {
  max-width: none;
}
.wp-venue-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #fff;
  font-weight: 800;
  font-size: 14.5px;
}
.wp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.wp-chips li {
  padding: 5px 12px;
  border: 1px solid var(--wh-line-strong);
  border-radius: 999px;
  background: rgba(14, 12, 46, 0.72);
  color: var(--wh-text);
  font-size: 13px;
  font-weight: 700;
}
.wp-prose {
  max-width: 780px;
  margin-inline: auto;
}
.wp-prose h2 {
  margin-top: clamp(36px, 5vw, 56px);
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.wp-prose h3 {
  margin-top: 28px;
  font-size: 1.2rem;
}
.wp-prose p,
.wp-prose ul,
.wp-prose ol {
  margin-top: 14px;
  color: var(--wh-muted);
  font-size: 16.5px;
  line-height: 1.7;
}
.wp-prose ul,
.wp-prose ol {
  padding-left: 22px;
}
.wp-prose li + li {
  margin-top: 6px;
}
.wp-prose strong {
  color: var(--wh-text);
}
.wp-prose .wp-figure {
  margin-top: 26px;
}
.wp-prose .wp-figure figcaption {
  position: static;
  display: block;
  border-radius: 0;
  background: none;
  padding: 10px 16px 12px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.wp-prose table {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  font-size: 15px;
}
.wp-prose th,
.wp-prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wh-line);
  color: var(--wh-muted);
  text-align: left;
  vertical-align: top;
}
.wp-prose th {
  color: var(--wh-text);
  font-weight: 800;
}
.wp-prose td:last-child {
  white-space: nowrap;
}
.wp-howto {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: wp-step;
}
.wp-howto li {
  position: relative;
  padding: 18px 20px 18px 74px;
  border: 1px solid var(--wh-line);
  border-radius: 18px;
  background: var(--wh-surface);
  counter-increment: wp-step;
  scroll-margin-top: calc(var(--wh-topbar) + 16px);
}
.wp-howto li::before {
  content: counter(wp-step);
  position: absolute;
  top: 16px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--wh-gradient);
  color: #fff;
  font-weight: 800;
}
.wp-howto strong {
  display: block;
  color: var(--wh-text);
  font-size: 1.05rem;
}
.wp-howto span {
  display: block;
  margin-top: 4px;
  color: var(--wh-muted);
  line-height: 1.6;
}
.wp-tip {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(82, 226, 255, 0.32);
  border-radius: 16px;
  background: rgba(82, 226, 255, 0.08);
  color: var(--wh-muted);
}
.wp-tip strong {
  color: var(--wh-cyan);
}
.wp-shelf + .wp-shelf {
  margin-top: clamp(32px, 5vw, 48px);
}
.wp-shelf h2 {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.wp-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.wp-guide-card {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  background: var(--wh-surface);
  color: inherit;
  text-decoration: none;
  transition: transform 260ms var(--wh-ease), border-color 260ms ease;
}
.wp-guide-card:hover {
  transform: translateY(-4px);
  border-color: var(--wh-line-strong);
}
.wp-guide-card strong {
  font-size: 1.15rem;
}
.wp-guide-card span {
  color: var(--wh-muted);
  font-size: 14.5px;
}
.wp-guide-card em {
  margin-top: 6px;
  color: #fff;
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
}
.wn-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--wh-dim);
  font-size: 13.5px;
  font-weight: 700;
}
.wn-hero-meta {
  display: flex;
  margin-bottom: 4px;
}
@media (min-width: 1001px) {
  .wn-hero {
    min-height: clamp(560px, 72vh, 760px);
  }
}
.wn-hero h1 {
  font-size: clamp(2.1rem, 3.5vw, 3.2rem);
}
.wn-updated {
  color: var(--wh-dim);
  font-size: 14px;
}
.wn-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  background: var(--wh-surface);
  box-shadow: var(--wh-shadow);
  color: inherit;
  text-decoration: none;
  transition: transform 260ms var(--wh-ease), border-color 260ms ease;
}
.wn-lead:hover {
  transform: translateY(-4px);
  border-color: var(--wh-line-strong);
}
.wn-lead-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wn-lead-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(24px, 3.4vw, 44px);
}
.wn-lead-copy h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
}
.wn-lead-copy p {
  color: var(--wh-muted);
  font-size: 1.05rem;
}
.wn-more {
  color: #fff;
  font-weight: 800;
}
.wn-more i {
  margin-left: 6px;
  font-size: 0.85em;
}
.wn-archive-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}
.wn-month + .wn-month {
  margin-top: clamp(28px, 4vw, 44px);
}
.wn-month-title {
  margin-top: 22px;
  color: #b9a8ff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.wn-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  background: var(--wh-surface);
  color: inherit;
  text-decoration: none;
  transition: transform 260ms var(--wh-ease), border-color 260ms ease;
}
.wn-card:hover {
  transform: translateY(-4px);
  border-color: var(--wh-line-strong);
}
.wn-card-art {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0c0a2a;
}
.wn-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--wh-ease);
}
.wn-card:hover .wn-card-art img {
  transform: scale(1.04);
}
.wn-card-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px 20px 22px;
}
.wn-card-copy h3,
.wn-card-copy h4 {
  margin: 0;
  font-family: "Outfit", "Manrope", system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.wn-card-summary {
  color: var(--wh-muted);
  font-size: 14.5px;
  line-height: 1.55;
}
.wn-steps {
  display: grid;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: wn-step;
}
.wn-step {
  position: relative;
  padding: 22px 24px 22px 82px;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  background: var(--wh-surface);
  counter-increment: wn-step;
  scroll-margin-top: calc(var(--wh-topbar) + 16px);
}
.wn-step::before {
  content: counter(wn-step);
  position: absolute;
  top: 20px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--wh-gradient);
  color: #fff;
  font-weight: 800;
}
.wn-step.has-shot {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.wn-step-copy {
  padding-top: 9px;
}
.wn-step-copy strong {
  display: block;
  color: var(--wh-text);
  font-family: "Outfit", "Manrope", system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.25;
}
.wn-step-copy span {
  display: block;
  margin-top: 8px;
  color: var(--wh-muted);
  font-size: 16px;
  line-height: 1.7;
}
.wn-step-shot {
  box-shadow: none;
}
.wn-step-shot figcaption {
  position: static;
  display: block;
  padding: 10px 14px 12px;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.wn-tips {
  margin-top: clamp(28px, 4vw, 44px);
  padding: 22px 26px 24px;
  border: 1px solid rgba(82, 226, 255, 0.32);
  border-radius: var(--wh-radius);
  background: rgba(82, 226, 255, 0.07);
}
.wn-extra .wn-tips:first-child {
  margin-top: 0;
}
.wn-tips h2 {
  margin-top: 0;
  font-size: 1.35rem;
}
.wn-tips h2 i {
  margin-right: 8px;
  color: var(--wh-cyan);
}
.wn-tips li::marker {
  color: var(--wh-cyan);
}
.wh-footer-current {
  color: var(--wh-text);
  font-size: 14px;
}
@media (max-width: 1180px) {
  .wh-cards.wp-cards-4,
  .wh-steps.wp-steps-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wh-steps.wp-steps-4 li::after {
    display: none;
  }
}
@media (max-width: 1000px) {
  .wp-guide-grid,
  .wn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wn-lead,
  .wn-step.has-shot {
    grid-template-columns: 1fr;
  }
  .wp-hero-window .wh-hero-stage,
  .wp-hero-lineup .wh-hero-stage {
    right: auto;
    width: 100%;
    margin-left: 0;
    padding-inline: var(--wh-gutter);
  }
  .wp-hero-window .wh-hero-copy > *,
  .wp-hero-lineup .wh-hero-copy > * {
    max-width: 640px;
  }
  .wp-hero-lineup .wh-hero-stage {
    width: min(100%, 720px);
    margin-inline: auto;
  }
  .wh-cards.wp-cards-3,
  .wh-safety-grid.wp-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wp-flow {
    grid-template-columns: 1fr;
  }
  .wp-flow-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}
@media (max-width: 720px) {
  .wp-venues,
  .wp-guide-grid,
  .wn-grid {
    grid-template-columns: 1fr;
  }
  .wn-step {
    padding: 74px 18px 20px;
  }
  .wn-step::before {
    top: 18px;
    left: 18px;
  }
  .wp-howto li {
    padding-left: 64px;
  }
  .wp-prose td:last-child {
    white-space: normal;
  }
  .wp-hero h1 {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .wp-pair,
  .wh-safety-grid.wp-tiles,
  .wh-safety-grid.wp-tiles-2,
  .wh-steps.wp-steps-4 {
    grid-template-columns: 1fr;
  }
  .wh-cards.wp-cards-3,
  .wh-cards.wp-cards-4 {
    display: flex;
  }
  .wp-flow-hang {
    padding: 6px 10px;
    font-size: 11.5px;
  }
}