/* Shared Gauntlet wordmark treatment. The eight SVG layers reproduce the canonical supplied vector artwork. */
:root {
  --gauntlet-wordmark-images:
    url("/assets/wordmark/gauntlet-wordmark-layer-1.svg"),
    url("/assets/wordmark/gauntlet-wordmark-layer-2.svg"),
    url("/assets/wordmark/gauntlet-wordmark-layer-3.svg"),
    url("/assets/wordmark/gauntlet-wordmark-layer-4.svg"),
    url("/assets/wordmark/gauntlet-wordmark-layer-5.svg"),
    url("/assets/wordmark/gauntlet-wordmark-layer-6.svg"),
    url("/assets/wordmark/gauntlet-wordmark-layer-7.svg"),
    url("/assets/wordmark/gauntlet-wordmark-layer-8.svg");
  --gauntlet-wordmark-ratio: 1871.79 / 493.58;
}

.brand {
  gap: 0 !important;
  min-width: 0;
}

.brand::before {
  content: "";
  display: block;
  width: 240px;
  aspect-ratio: var(--gauntlet-wordmark-ratio);
  flex: 0 0 auto;
  background-image: var(--gauntlet-wordmark-images);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Header implementations predate the shared wordmark and use several different child structures. The brand link itself supplies the accessible name, so suppress every legacy visual child consistently. */
.brand[aria-label] > * {
  display: none !important;
}

/* Older footer implementations use a plain Gauntlet label instead of the shared brand link. Keep their existing copy and layout, but render that label with the canonical vector wordmark so every current surface has the same footer identity. */
footer > div:first-child > strong:first-child {
  display: block;
  width: 240px;
  max-width: 100%;
  aspect-ratio: var(--gauntlet-wordmark-ratio);
  overflow: hidden;
  background-image: var(--gauntlet-wordmark-images);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Keep the global site chrome visually consistent without forcing every page onto one content width. Most public pages use the 1180px shell; wider surfaces can provide --gauntlet-header-max-width locally. */
:is(.site-header, .global-header, .rulebook-header, .arbiter-header) {
  width: min(var(--gauntlet-header-max-width, 1180px), calc(100% - 40px)) !important;
  margin-inline: auto !important;
  min-height: 86px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  border-bottom: 1px solid var(--line, rgba(49, 42, 32, 0.2)) !important;
  position: relative;
  z-index: 2;
}

:is(.site-header, .global-header, .rulebook-header, .arbiter-header) > :is(nav, .header-actions) {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: nowrap;
  font-family: var(--font-interface, var(--sans, Inter, ui-sans-serif, system-ui, sans-serif)) !important;
}

:is(.site-header, .global-header, .rulebook-header, .arbiter-header) > :is(nav, .header-actions) a {
  color: var(--muted, #655f56);
  font-size: 0.9rem !important;
  font-weight: 650 !important;
  text-decoration: none;
}

:is(.site-header, .global-header, .rulebook-header, .arbiter-header) > :is(nav, .header-actions) a:hover,
:is(.site-header, .global-header, .rulebook-header, .arbiter-header) > :is(nav, .header-actions) a:focus-visible,
:is(.site-header, .global-header, .rulebook-header, .arbiter-header) > :is(nav, .header-actions) a[aria-current="page"] {
  color: var(--crimson, var(--accent, #8f1f25));
}

/* Replace the source rulebook's display-title text with the canonical wordmark without changing the source markdown or heading semantics. */
.rulebook-content > h1:first-child {
  width: min(100%, 560px);
  aspect-ratio: var(--gauntlet-wordmark-ratio);
  margin: 0 auto 26px;
  padding: 0;
  border: 0;
  background-image: var(--gauntlet-wordmark-images);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.rulebook-content > h1:first-child .heading-anchor {
  display: none;
}

@media (max-width: 900px) {
  :is(.site-header, .global-header, .rulebook-header, .arbiter-header) > :is(nav, .header-actions) {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .brand::before,
  footer > div:first-child > strong:first-child {
    width: 180px;
  }

  .rulebook-content > h1:first-child {
    width: min(100%, 430px);
    margin-bottom: 22px;
  }
}