/* Homepage art direction guided by Unslop by Damir Sokolovsky (CC BY 4.0):
   https://github.com/heydamir/unslop */
.is-home {
  --bg: #111211;
  --surface: #191a19;
  --line: #303230;
  --text: #f0f1ed;
  --muted: #a4a7a0;
  --lime: #c3ee65;
}
.is-home .container {
  width: min(1280px, calc(100% - 80px));
}
.is-home .site-header {
  background: #111211f5;
  backdrop-filter: none;
  border-color: #ffffff12;
}
.is-home .desktop-nav {
  gap: 24px;
}
.is-home .eyebrow,
.is-home .hero-eyebrow,
.is-home .community-copy .eyebrow,
.is-home .download-copy .eyebrow {
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 500;
  color: #c3ee65;
}
.is-home .status-dot {
  box-shadow: none;
}
.is-home .button {
  min-height: 48px;
  border-radius: 8px;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.is-home .button:hover {
  transform: none;
}
.is-home .button-primary:hover {
  background: #d0f284;
  border-color: #d0f284;
}
.is-home .button-outline {
  background: #191a19e6;
  border-color: #555951;
}
.is-home .button-outline:hover {
  background: #252724;
  border-color: #8b9e67;
}
.is-home .hero {
  min-height: min(760px, calc(100svh - 85px));
  background: #111211;
}
.is-home .hero-image {
  background-position: 73% 50%;
  filter: saturate(0.84) brightness(0.84);
}
.is-home .hero:before {
  background: linear-gradient(90deg, #111211f5 0%, #111211e8 28%, #111211a8 49%, #11121120 78%), linear-gradient(0deg, #111211 0%, transparent 24%, #11121130 100%);
}
.is-home .hero:after,
.is-home .hero-grid {
  display: none;
}
.is-home .hero-inner {
  min-height: calc(min(760px, 100svh - 85px) - 68px);
  display: flex;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 48px;
}
.is-home .hero-copy {
  max-width: 670px;
  padding-block: 16px;
}
.is-home .hero-eyebrow {
  margin-bottom: 24px;
  color: #d5d8d0;
  gap: 10px;
}
.is-home .hero-eyebrow .status-dot {
  width: 7px;
  height: 7px;
}
.is-home .hero h1 {
  max-width: 740px;
  font-size: clamp(64px, 7.2vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.is-home .hero h1 span {
  color: var(--lime);
}
.is-home .hero-description {
  max-width: 520px;
  margin-top: 24px;
  color: #c0c3bd;
  font-size: 18px;
  line-height: 1.65;
}
.is-home .hero-actions {
  gap: 12px;
  margin-top: 28px;
}
.is-home .hero-actions .button {
  padding-inline: 20px;
}
.is-home .hero-caption {
  right: 0;
  bottom: 56px;
  width: 280px;
  padding-block: 14px;
  border-color: #ffffff44;
}
.is-home .hero-caption > div > span,
.is-home .hero-caption small {
  font-size: 13px;
  letter-spacing: 0;
  color: #c0c3bd;
}
.is-home .hero-caption strong {
  letter-spacing: 0;
}
.is-home .hero-side-note {
  top: 44px;
  right: 0;
  color: #d1d4cc;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.is-home .hero-bottom {
  background: #111211e8;
  border-color: #ffffff20;
}
.is-home .hero-bottom-inner {
  min-height: 68px;
  gap: 32px;
}
.is-home .hero-bottom-inner > span {
  color: #c0c3bd;
}
.is-home .hero-bottom-inner > a {
  font-size: 14px;
  letter-spacing: 0;
  color: #d4d6d1;
}
.is-home .announcement {
  background: #191a19;
  border-color: #303230;
}
.is-home .announcement-inner {
  min-height: 68px;
  gap: 16px;
}
.is-home .announcement-label {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 0;
}
.is-home .announcement p {
  color: #e2e3df;
}
.is-home .announcement p > span {
  color: #a4a7a0;
}
.is-home .announcement a {
  color: var(--lime);
}
.is-home .section {
  padding-top: 88px;
  padding-bottom: 72px;
}
.is-home .section-heading {
  margin-bottom: 32px;
}
.is-home .section-number {
  color: #a4a7a0;
  font-family: var(--font);
  font-size: 13px;
  margin-right: 4px;
}
.is-home .section h2,
.is-home .community-section h2 {
  font-size: clamp(36px, 4vw, 48px);
  letter-spacing: -0.01em;
  margin-top: 14px;
}
.is-home .section h2 span,
.is-home .community-section h2 span {
  color: #b9bdb5;
}
.is-home .section-description {
  color: #b1b4ad;
  font-size: 16px;
  margin-top: 12px;
}
.is-home .text-button,
.is-home .text-link {
  color: #c3ee65;
}
.is-home .server-grid {
  gap: 20px;
}
.is-home .server-card {
  display: flex;
  flex-direction: column;
  border-color: #343634;
  border-radius: 12px;
  background: #191a19;
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.is-home .server-card:hover {
  border-color: #737c61;
  transform: none;
}
.is-home .server-art {
  height: 184px;
  background: #292b28;
}
.is-home .server-art > img {
  filter: saturate(0.78) brightness(0.76);
  transition: none;
}
.is-home .server-card:hover .server-art > img {
  transform: none;
}
.is-home .server-sd .server-art > img,
.is-home .server-tdm .server-art > img,
.is-home .server-sniper .server-art > img {
  filter: saturate(0.76) brightness(0.76);
}
.is-home .server-art:after {
  background: linear-gradient(0deg, #111211d9, transparent 84%);
}
.is-home .server-tag {
  top: 16px;
  left: 16px;
  padding: 5px 8px;
  border-color: #ffffff30;
  border-radius: 5px;
  background: #111211d9;
  color: #e1e3de;
  font-size: 12px;
  letter-spacing: 0;
}
.is-home .server-tag .status-dot {
  width: 6px;
  height: 6px;
}
.is-home .mode-watermark {
  bottom: 14px;
  left: 18px;
  font-size: 54px;
  letter-spacing: 0;
}
.is-home .game-tag {
  left: auto;
  right: 18px;
  bottom: 19px;
  font-size: 12px;
  letter-spacing: 0;
}
.is-home .server-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}
.is-home .card-eyebrow {
  color: #c3ee65;
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 500;
}
.is-home .server-content h3 {
  margin-top: 8px;
  font-size: 28px;
}
.is-home .server-content > p:not(.card-eyebrow) {
  color: #b1b4ad;
  font-size: 15px;
  line-height: 1.55;
}
.is-home .server-address {
  margin-top: auto;
  padding-block: 3px;
  border-color: #343634;
  border-radius: 6px;
  background: #121312;
}
.is-home .server-address code {
  color: #c1c5bd;
  font-variant-numeric: tabular-nums;
}
.is-home .server-actions {
  margin-top: 12px;
}
.is-home .button-server {
  min-height: 44px;
  border-color: #424640;
  border-radius: 7px;
  background: #242724;
  color: #e6e8e2;
}
.is-home .button-server:hover {
  border-color: #737c61;
  background: #2b2e2a;
}
.is-home .server-details {
  min-width: 44px;
  height: 44px;
  border-color: #424640;
  border-radius: 7px;
}
.is-home .server-footnote {
  color: #a4a7a0;
}
.is-home .server-footnote a {
  color: #d3d6ce;
}
.is-home .community-section {
  border-color: #343634;
  border-radius: 14px;
  background: #191a19;
}
.is-home .community-main {
  min-height: 280px;
  gap: 40px;
  padding: 40px 48px;
}
.is-home .community-main:after {
  display: none;
}
.is-home .community-orbit {
  position: relative;
  width: 76px;
  height: 76px;
  border: 1px solid #3b3e39;
  border-radius: 12px;
  background: #222522;
}
.is-home .community-orbit:before,
.is-home .community-orbit:after {
  display: none;
}
.is-home .community-orbit > .icon {
  width: 30px;
  height: 30px;
  color: #c3ee65;
  transform: none;
  stroke-width: 1.5;
}
.is-home .community-copy {
  max-width: 680px;
}
.is-home .community-section h2 {
  margin-top: 12px;
  font-size: clamp(34px, 3.5vw, 44px);
}
.is-home .community-section h2 > span {
  color: #c0c3bd;
}
.is-home .community-copy > p:not(.eyebrow) {
  max-width: 580px;
  color: #b1b4ad;
  font-size: 16px;
  line-height: 1.65;
}
.is-home .community-perks {
  justify-content: flex-start;
  gap: 36px;
  padding: 18px 48px;
  border-color: #303230;
  background: #161716;
}
.is-home .community-perks > span {
  color: #c0c3bd;
}
.is-home .community-perks .icon {
  color: #a4a7a0;
}
.is-home .about-section {
  grid-template-columns: 0.9fr 1fr;
  gap: 80px;
  padding-top: 96px;
  padding-bottom: 88px;
}
.is-home .about-intro > p:not(.eyebrow) {
  max-width: 440px;
  color: #b1b4ad;
  font-size: 16px;
  line-height: 1.75;
}
.is-home .about-values article {
  gap: 16px;
  padding: 20px 0;
  border-color: #303230;
}
.is-home .about-values article > .icon {
  color: #aab09e;
}
.is-home .about-values h3 {
  font-size: 17px;
}
.is-home .about-values p {
  max-width: 400px;
  color: #a4a7a0;
  font-size: 15px;
}
.is-home .about-values article > span {
  color: #858981;
}
.is-home .downloads-section {
  gap: 52px;
  align-items: center;
  border-color: #303230;
  border-radius: 14px;
  background: #191a19;
}
.is-home .download-copy > p:not(.eyebrow) {
  color: #b1b4ad;
  font-size: 16px;
  line-height: 1.65;
}
.is-home .download-copy h2 {
  font-size: clamp(36px, 4vw, 48px);
  letter-spacing: -0.01em;
}
.is-home .download-copy h2 > span {
  color: #b9bdb5;
}
.is-home .download-art {
  border-radius: 10px;
}
.is-home .download-help-links a {
  color: #c5c8c1;
}
.is-home .feature-banner {
  gap: 18px;
  border-color: #303230;
  border-radius: 12px;
  background: #191a19;
  padding: 24px;
}
.is-home .feature-banner-icon {
  border-color: #3a3d39;
  border-radius: 8px;
  background: #222522;
  color: #c3ee65;
}
.is-home .feature-banner h3 {
  font-size: 18px;
}
.is-home .feature-banner p {
  color: #a4a7a0;
  font-size: 15px;
}
.is-home .site-footer {
  background: #101110;
  border-color: #303230;
}
.is-home .footer-top > p,
.is-home .footer-bottom,
.is-home .footer-discord {
  color: #a4a7a0;
}
.is-home .live-round-label,
.is-home .live-round-team small,
.is-home .live-round-map,
.is-home .live-team-tabs button,
.is-home .live-player-table th {
  letter-spacing: 0;
  text-transform: none;
}
.is-home .live-player-table td[colspan] {
  color: #b1b4ad;
}
.is-home .join-dialog {
  border-color: #343634;
  border-radius: 14px;
  background: #191a19;
}
.is-home .join-dialog h2 {
  font-size: 34px;
}
.is-home kbd {
  border-color: #424640;
  border-radius: 5px;
  background: #242724;
}
@media (min-width: 1500px) {
  .is-home .hero {
    min-height: min(800px, calc(100svh - 85px));
  }
  .is-home .hero-inner {
    min-height: calc(min(800px, 100svh - 85px) - 68px);
  }
  .is-home .hero h1 {
    font-size: 100px;
  }
}
@media (max-width: 1100px) {
  .is-home .container {
    width: calc(100% - 64px);
  }
  .is-home .hero {
    min-height: min(720px, calc(100svh - 75px));
  }
  .is-home .hero-inner {
    min-height: calc(min(720px, 100svh - 75px) - 68px);
  }
  .is-home .hero h1 {
    font-size: clamp(60px, 8vw, 82px);
  }
  .is-home .hero-caption {
    width: 230px;
    bottom: 32px;
  }
  .is-home .hero-side-note {
    display: none;
  }
  .is-home .server-art {
    height: 160px;
  }
  .is-home .server-content {
    padding: 18px;
  }
  .is-home .server-content h3 {
    font-size: 25px;
  }
  .is-home .community-main {
    padding-inline: 32px;
  }
  .is-home .community-perks {
    gap: 24px;
    padding-inline: 32px;
  }
  .is-home .about-section {
    gap: 48px;
  }
}
@media (max-width: 720px) {
  .is-home .container {
    width: calc(100% - 40px);
  }
  .is-home .hero {
    min-height: auto;
  }
  .is-home .hero-inner {
    min-height: 0;
    padding-top: 60px;
    padding-bottom: 52px;
  }
  .is-home .hero-image {
    background-position: 64% center;
    filter: saturate(0.78) brightness(0.66);
  }
  .is-home .hero:before {
    background: linear-gradient(90deg, #111211ee, #111211bb 72%, #11121170), linear-gradient(0deg, #111211 0%, transparent 54%);
  }
  .is-home .hero-eyebrow {
    margin-bottom: 20px;
  }
  .is-home .hero h1 {
    font-size: clamp(48px, 12.5vw, 70px);
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .is-home .hero-description {
    max-width: 430px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.6;
  }
  .is-home .hero-actions {
    margin-top: 24px;
  }
  .is-home .hero-actions .button {
    padding-inline: 15px;
  }
  .is-home .hero-caption {
    display: none;
  }
  .is-home .hero-bottom-inner {
    min-height: 60px;
    justify-content: center;
    gap: 20px;
  }
  .is-home .hero-bottom-inner > span {
    font-size: 13px;
  }
  .is-home .hero-bottom-inner > span:last-of-type {
    display: none;
  }
  .is-home .announcement-inner {
    min-height: 68px;
    gap: 8px 12px;
    padding-block: 12px;
  }
  .is-home .announcement p {
    max-width: none;
    font-size: 14px;
  }
  .is-home .announcement a {
    margin-left: 0;
  }
  .is-home .section {
    padding-top: 64px;
    padding-bottom: 52px;
  }
  .is-home .section h2,
  .is-home .community-section h2 {
    font-size: 36px;
  }
  .is-home .section-description {
    font-size: 15px;
  }
  .is-home .server-grid {
    gap: 16px;
  }
  .is-home .server-art {
    height: 184px;
  }
  .is-home .server-content {
    padding: 18px;
  }
  .is-home .server-content h3 {
    font-size: 27px;
  }
  .is-home .community-main {
    min-height: 0;
    gap: 20px;
    padding: 28px 24px;
  }
  .is-home .community-perks {
    gap: 12px;
    padding: 18px 24px;
  }
  .is-home .about-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 64px;
    padding-bottom: 56px;
  }
  .is-home .downloads-section {
    gap: 24px;
  }
  .is-home .feature-banner {
    gap: 14px;
    padding: 20px;
    margin-bottom: 48px;
  }
}
@media (max-width: 380px) {
  .is-home .container {
    width: calc(100% - 32px);
  }
  .is-home .hero-actions .button {
    padding-inline: 11px;
    font-size: 14px;
  }
  .is-home .hero-bottom-inner {
    gap: 12px;
  }
  .is-home .hero-bottom-inner > span {
    font-size: 12px;
  }
}