:root {
  --swing-gold: #d99a28;
  --swing-gold-light: #f6c85f;
  --swing-ink: #17130f;
  --swing-navy: #07106d;
  --md-primary-fg-color: #17130f;
  --md-accent-fg-color: #d99a28;
}

[data-md-color-scheme="slate"] {
  --md-hue: 32;
  --md-default-bg-color: #12100e;
  --md-default-fg-color: #f3ead9;
  --md-primary-fg-color: #0f0c09;
  --md-accent-fg-color: #f6c85f;
}

.md-header,
.md-tabs {
  background: linear-gradient(90deg, #17130f 0%, #2d1b13 45%, #07106d 100%);
}

.md-main__inner {
  margin-top: 1.2rem;
}

.md-content__inner {
  margin-bottom: 3rem;
}

.event-hero {
  padding: clamp(2rem, 7vw, 5rem);
  overflow: hidden;
  color: #fff;
  text-align: center;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 12px;
  background:
    radial-gradient(circle at 15% 0%, rgb(246 200 95 / 25%), transparent 34%),
    linear-gradient(145deg, #111827 0%, var(--swing-navy) 100%);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 18%);
}

.event-hero h1 {
  max-width: 13ch;
  margin: .3rem auto .8rem;
  color: #fff;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: .98;
  text-wrap: balance;
}

.event-kicker {
  margin: 0;
  color: var(--swing-gold-light);
  font-size: clamp(.85rem, 2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.event-date {
  margin: 1.2rem 0 .5rem;
  color: #fff;
  font-size: clamp(1.05rem, 2.8vw, 1.5rem);
  font-weight: 650;
}

.event-credit {
  margin: 0;
  color: rgb(255 255 255 / 82%);
  font-size: 1rem;
}

.event-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.8rem;
}

.event-actions .md-button:not(.md-button--primary) {
  color: #fff;
  border-color: rgb(255 255 255 / 48%);
}

.event-actions .md-button:not(.md-button--primary):hover {
  color: var(--swing-ink);
  background: #fff;
  border-color: #fff;
}

.event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 4rem);
}

.event-details h2:first-child {
  margin-top: 0;
}

.event-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: 1rem 0 2.2rem;
}

.event-facts > div {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-default-bg-color) 94%, var(--swing-gold-light));
}

.event-facts dt {
  margin-bottom: .25rem;
  color: var(--md-accent-fg-color);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-facts dd {
  margin: 0;
  font-weight: 600;
}

.event-poster {
  position: sticky;
  top: 4.4rem;
  margin: 0;
}

.event-poster img {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 24%);
}

.event-poster figcaption {
  margin-top: .6rem;
  color: var(--md-default-fg-color--light);
  font-size: .72rem;
  text-align: center;
}

.community-links {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgb(217 154 40 / 14%), transparent 34%),
    color-mix(in srgb, var(--md-default-bg-color) 96%, var(--swing-navy));
}

.community-links__intro {
  max-width: 42rem;
}

.community-links__intro h2 {
  margin: .15rem 0 .45rem;
}

.community-links__intro p:last-child {
  margin: 0;
  color: var(--md-default-fg-color--light);
}

.community-links__kicker {
  margin: 0;
  color: var(--md-accent-fg-color);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 1.5rem;
}

.affiliate-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  padding: 1.2rem;
  color: var(--md-default-fg-color);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
  border-radius: 9px;
  background: var(--md-default-bg-color);
  box-shadow: 0 .35rem 1rem rgb(0 0 0 / 5%);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.affiliate-card:hover,
.affiliate-card:focus-visible {
  color: var(--md-default-fg-color);
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 .65rem 1.5rem rgb(0 0 0 / 12%);
  transform: translateY(-2px);
}

.affiliate-card strong {
  color: var(--md-default-fg-color);
  font-size: 1.02rem;
}

.affiliate-card > span:last-child {
  color: var(--md-default-fg-color--light);
  font-size: .82rem;
  line-height: 1.45;
}

.affiliate-card__type {
  color: var(--md-accent-fg-color);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.community-links__note {
  margin: 1rem 0 0;
  color: var(--md-default-fg-color--lighter);
  font-size: .68rem;
}

@media screen and (max-width: 760px) {
  .event-hero {
    padding: 2.2rem 1.2rem;
    border-radius: 8px;
  }

  .event-actions {
    display: grid;
  }

  .event-actions .md-button {
    width: 100%;
    text-align: center;
  }

  .event-layout,
  .event-facts,
  .affiliate-grid {
    grid-template-columns: 1fr;
  }

  .event-poster {
    position: static;
  }
}