:root {
  --foe-rule: color-mix(in srgb, currentcolor 18%, transparent);
}

* {
  box-sizing: border-box;
}

::selection {
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--crimson);
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--crimson);
  outline-offset: 3px;
}

.wp-site-blocks {
  overflow: clip;
}

.foe-eyebrow {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.foe-hero {
  min-height: min(860px, 92svh);
}

.foe-hero::before {
  background: linear-gradient(90deg, rgb(5 6 6 / 82%), rgb(5 6 6 / 25%) 68%, transparent), radial-gradient(circle at 75% 35%, rgb(158 47 43 / 28%), transparent 35%);
}

.foe-media-placeholder {
  min-height: clamp(300px, 52vw, 720px);
  background: radial-gradient(circle at 68% 35%, rgb(158 47 43 / 38%), transparent 24%), linear-gradient(145deg, #2d2926, #0b0c0c 65%);
}

.foe-card {
  height: 100%;
  border-top: 1px solid var(--foe-rule);
}

.foe-card-media {
  aspect-ratio: 4 / 5;
  background: linear-gradient(145deg, #d9d0c2, #6f665d);
}

.foe-card:nth-child(even) .foe-card-media {
  background: radial-gradient(circle at 60% 28%, rgb(158 47 43 / 65%), transparent 25%), linear-gradient(160deg, #282624, #0b0c0c);
}

.foe-rule {
  border-top: 1px solid var(--foe-rule);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  color: currentcolor;
  background: transparent;
  border: 1px solid currentcolor;
}

@media (width <= 781px) {
  .foe-hero {
    min-height: 78svh;
  }

}

@media (prefers-reduced-motion: no-preference) {
  .wp-block-button__link,
  a {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }
}