/* =========================================================
   FANTASY FUGBALL
   WEBSITE STYLES
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  /* ---------- COLORS ---------- */

  --ff-black: #111111;

  --ff-navy: #071726;

  --ff-navy-deep: #04111d;

  --ff-navy-light: #10283d;

  --ff-cream: #f2ead7;

  --ff-paper: #e5d5b5;

  --ff-gold: #c78a1e;

  --ff-red: #7d171b;

  --ff-gray: #a6a6a6;

  --ff-line:
    rgba(242, 234, 215, 0.13);


  /* ---------- TYPOGRAPHY ---------- */

  --font-body:
    "cronos-pro",
    sans-serif;

  --font-slab-narrow:
    "metronic-slab-narrow",
    serif;

  --font-slab:
    "metronic-slab",
    serif;


  /* ---------- LAYOUT ---------- */

  --content-width:
    1200px;

  --content-width-narrow:
    880px;

  --page-padding:
    clamp(22px, 4vw, 56px);

  --section-space:
    clamp(78px, 9vw, 135px);

  --radius:
    12px;

  --shadow:
    0 22px 55px rgba(0, 0, 0, 0.36);
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  position: relative;

  min-height: 100vh;

  margin: 0;

  overflow-x: hidden;

  background:
    var(--ff-navy);

  color:
    var(--ff-cream);

  font-family:
    var(--font-body);

  font-size:
    18px;

  font-weight:
    400;

  line-height:
    1.55;
}


img {
  display: block;

  max-width: 100%;

  height: auto;
}


a {
  color: inherit;

  text-decoration: none;
}


button {
  font: inherit;

  cursor: pointer;
}


h1,
h2,
h3,
p {
  margin-top: 0;
}


p {
  margin-bottom: 1em;

  max-width: 70ch;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.sr-only {
  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


/* =========================================================
   CHALKBOARD BACKGROUND
   ========================================================= */

body::before {
  content: "";

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:
    url("../images/backgrounds/FF-Web-Background-Scribbles.webp");

  background-repeat:
    repeat;

  background-position:
    center top;

  background-size:
    760px auto;

  /*
     Slightly stronger than previous pass.
     Do not fade this without reviewing first.
  */

  opacity:
    0.072;
}


body > * {
  position: relative;

  z-index: 1;
}


/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

.section-inner {
  width:
    min(100%, var(--content-width));

  margin-inline:
    auto;

  padding-inline:
    var(--page-padding);
}


.section-inner--narrow {
  width:
    min(100%, var(--content-width-narrow));
}


.hero,
.books,
.what-section,
.how-it-works,
.wild-section,
.matchups,
.modes,
.faq,
.final-cta {
  padding-block:
    var(--section-space);
}


/* Section rhythm */

.books,
.how-it-works,
.matchups,
.faq {
  background:
    rgba(12, 31, 48, 0.43);
}


.what-section,
.modes,
.final-cta {
  background:
    rgba(4, 17, 29, 0.30);
}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

h2 {
  margin-bottom:
    30px;

  font-family:
    var(--font-slab);

  font-size:
    clamp(2.5rem, 5vw, 4.5rem);

  font-weight:
    700;

  line-height:
    0.94;

  letter-spacing:
    -0.015em;

  text-transform:
    uppercase;
}


h3 {
  margin-bottom:
    14px;

  font-family:
    var(--font-slab);

  font-size:
    clamp(1.45rem, 2vw, 1.8rem);

  font-weight:
    700;

  line-height:
    1;

  text-transform:
    uppercase;
}


.eyebrow {
  margin-bottom:
    15px;

  color:
    var(--ff-gold);

  font-family:
    var(--font-slab-narrow);

  font-size:
    0.95rem;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  line-height:
    1.1;

  text-transform:
    uppercase;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height:
    56px;

  padding:
    0.95rem 1.4rem;

  border:
    2px solid transparent;

  border-radius:
    8px;

  font-family:
    var(--font-slab-narrow);

  font-size:
    0.95rem;

  font-weight:
    700;

  letter-spacing:
    0.075em;

  line-height:
    1;

  text-align:
    center;

  text-transform:
    uppercase;

  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}


.button--primary {
  background:
    var(--ff-gold);

  color:
    var(--ff-black);
}


.button--primary:hover,
.button--primary:focus-visible {
  transform:
    translateY(-2px);

  background:
    #dfa02d;
}


.button--secondary {
  background:
    rgba(4, 17, 29, 0.68);

  border-color:
    rgba(242, 234, 215, 0.36);

  color:
    var(--ff-cream);
}


.button--secondary:hover,
.button--secondary:focus-visible {
  transform:
    translateY(-2px);

  border-color:
    rgba(242, 234, 215, 0.65);

  background:
    rgba(255, 255, 255, 0.06);
}


/* Coming-soon button */

.button--coming {
  background:
    rgba(4, 17, 29, 0.68);

  border-color:
    var(--ff-gold);

  color:
    var(--ff-gold);

  cursor:
    default;

  user-select:
    none;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  border-bottom:
    1px solid var(--ff-line);

  background:
    rgba(4, 17, 29, 0.96);

  backdrop-filter:
    blur(12px);
}


.site-header__inner {
  width:
    min(100%, var(--content-width));

  min-height:
    94px;

  margin-inline:
    auto;

  padding:
    13px var(--page-padding);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    32px;
}


/* =========================================================
   HEADER BRAND
   ========================================================= */

.header-brand {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    15px;

  flex-shrink:
    0;
}


.header-brand__u {
  width:
    54px;

  height:
    54px;

  flex-shrink:
    0;

  object-fit:
    contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(57%)
    sepia(90%)
    saturate(1068%)
    hue-rotate(4deg)
    brightness(91%)
    contrast(91%);
}


.header-brand__wordmark {
  display:
    block;

  width:
    330px;

  max-height:
    44px;

  object-fit:
    contain;

  object-position:
    left center;

  filter:
    brightness(0)
    saturate(100%)
    invert(93%)
    sepia(13%)
    saturate(350%)
    hue-rotate(355deg)
    brightness(102%)
    contrast(93%);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.site-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    clamp(22px, 2.3vw, 38px);
}


.site-nav a {
  color:
    var(--ff-cream);

  font-family:
    var(--font-slab-narrow);

  font-size:
    1rem;

  font-weight:
    700;

  letter-spacing:
    0.065em;

  text-transform:
    uppercase;

  opacity:
    0.94;
}


.site-nav a:hover,
.site-nav a:focus-visible {
  color:
    var(--ff-gold);

  opacity:
    1;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.site-menu-toggle {
  display:
    none;

  width:
    46px;

  height:
    46px;

  padding:
    10px;

  border:
    1px solid var(--ff-line);

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, 0.03);

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    5px;
}


.site-menu-toggle span {
  display:
    block;

  width:
    100%;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--ff-cream);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  padding-top:
    clamp(64px, 7vw, 105px);

  padding-bottom:
    clamp(85px, 9vw, 135px);

  background:
    radial-gradient(
      circle at 76% 38%,
      rgba(199, 138, 30, 0.12),
      transparent 27%
    );
}


.hero__grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(390px, 0.92fr);

  align-items:
    center;

  gap:
    clamp(40px, 5vw, 70px);
}


.hero__content {
  min-width:
    0;
}


.hero__eyebrow {
  font-size:
    1rem;
}


.hero-wordmark {
  width:
    min(100%, 650px);

  margin:
    0 0 28px;
}


.hero-wordmark img {
  width:
    100%;

  filter:
    brightness(0)
    saturate(100%)
    invert(93%)
    sepia(13%)
    saturate(350%)
    hue-rotate(355deg)
    brightness(102%)
    contrast(93%);
}


.hero__tagline {
  margin-bottom:
    20px;

  color:
    var(--ff-gold);

  font-family:
    var(--font-slab);

  font-size:
    clamp(1.75rem, 2.8vw, 2.7rem);

  font-weight:
    700;

  line-height:
    1.03;

  text-transform:
    uppercase;
}


.hero__intro {
  max-width:
    700px;

  margin-bottom:
    0;

  color:
    rgba(242, 234, 215, 0.98);

  font-size:
    clamp(1.15rem, 1.5vw, 1.3rem);

  line-height:
    1.52;
}


.hero__actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    15px;

  margin-top:
    32px;
}


/* =========================================================
   RED ROCKET
   ========================================================= */

.hero__art {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;
}


.hero__mascot-card {
  width:
    min(100%, 505px);

  margin-inline:
    auto;

  border:
    1px solid rgba(242, 234, 215, 0.14);

  border-radius:
    12px;

  box-shadow:
    var(--shadow);
}


/* =========================================================
   BOOKS
   ========================================================= */

.books__eyebrow {
  margin-bottom:
    34px;

  text-align:
    left;
}


.product-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(42px, 6vw, 78px);
}


.product {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.product__position {
  width:
    100%;

  margin-bottom:
    18px;

  color:
    var(--ff-cream);

  font-family:
    var(--font-slab);

  font-size:
    clamp(2rem, 3.4vw, 3.35rem);

  font-weight:
    700;

  line-height:
    0.95;

  text-transform:
    uppercase;
}


.product__image {
  overflow:
    hidden;

  margin-bottom:
    27px;

  border:
    1px solid rgba(242, 234, 215, 0.09);

  border-radius:
    var(--radius);

  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.26);
}


.product__image img {
  width:
    100%;
}


.product__content {
  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  align-items:
    flex-start;
}


.product__content p:not(.eyebrow) {
  flex-grow:
    1;

  font-size:
    1.08rem;
}


.product__cta {
  min-width:
    220px;
}


/* =========================================================
   WHAT IS FUGBALL
   ========================================================= */

.what-grid {
  display:
    grid;

  grid-template-columns:
    minmax(300px, 0.8fr)
    minmax(0, 1.2fr);

  gap:
    clamp(50px, 7vw, 100px);

  align-items:
    start;
}


.what-heading h2 {
  max-width:
    520px;
}


.coach-stamp {
  width:
    165px;

  margin-top:
    34px;

  transform:
    rotate(-5deg);

  transform-origin:
    center;

  opacity:
    0.9;

  filter:
    brightness(0)
    saturate(100%)
    invert(57%)
    sepia(90%)
    saturate(1068%)
    hue-rotate(4deg)
    brightness(91%)
    contrast(91%);
}


.what-copy {
  padding-top:
    5px;
}


.what-copy p {
  max-width:
    720px;

  font-size:
    1.14rem;
}


.what-copy__lead {
  color:
    var(--ff-cream);

  font-family:
    var(--font-slab);

  font-size:
    clamp(1.45rem, 2.4vw, 2rem) !important;

  font-weight:
    600;

  line-height:
    1.18;
}


.what-facts {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    12px;

  margin-top:
    34px;
}


.what-facts div {
  padding:
    20px 16px;

  border:
    1px solid var(--ff-line);

  border-radius:
    var(--radius);

  background:
    rgba(4, 17, 29, 0.67);

  text-align:
    center;
}


.what-facts strong {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--ff-gold);

  font-family:
    var(--font-slab);

  font-size:
    2rem;
}


.what-facts span {
  font-family:
    var(--font-slab-narrow);

  font-size:
    0.78rem;

  font-weight:
    700;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.steps-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    20px;
}


.step-card {
  position:
    relative;

  min-height:
    245px;

  padding:
    25px 23px;

  overflow:
    hidden;

  border:
    1px solid rgba(242, 234, 215, 0.10);

  border-radius:
    var(--radius);

  background:
    rgba(4, 17, 29, 0.76);
}


.step-card__number {
  display:
    block;

  margin-bottom:
    22px;

  color:
    rgba(199, 138, 30, 0.80);

  font-family:
    var(--font-slab-narrow);

  font-size:
    0.95rem;

  font-weight:
    700;

  letter-spacing:
    0.12em;
}


.step-card h3 {
  font-size:
    1.55rem;
}


.step-card p {
  margin-bottom:
    0;

  font-size:
    1.02rem;
}


/* =========================================================
   WILD / CRA-CRA SECTION
   ========================================================= */

.wild-section {
  position:
    relative;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      rgba(86, 13, 18, 0.82),
      rgba(4, 17, 29, 0.90) 48%,
      rgba(104, 70, 12, 0.65)
    );

  border-top:
    1px solid rgba(199, 138, 30, 0.22);

  border-bottom:
    1px solid rgba(199, 138, 30, 0.22);
}


.wild-heading-row {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.8fr);

  gap:
    clamp(40px, 6vw, 80px);

  align-items:
    end;

  margin-bottom:
    42px;
}


.wild-eyebrow {
  color:
    var(--ff-paper);
}


.wild-heading-row h2 {
  margin-bottom:
    0;
}


.wild-intro {
  margin-bottom:
    4px;

  font-size:
    1.14rem;

  line-height:
    1.5;
}


.wild-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    18px;
}


.wild-card {
  min-height:
    225px;

  padding:
    25px 22px;

  border:
    1px solid rgba(242, 234, 215, 0.16);

  border-radius:
    var(--radius);

  background:
    rgba(4, 17, 29, 0.74);

  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.18);
}


.wild-card--red {
  border-top:
    5px solid var(--ff-red);
}


.wild-card--gold {
  border-top:
    5px solid var(--ff-gold);
}


.wild-card__label {
  margin-bottom:
    12px;

  color:
    var(--ff-gold);

  font-family:
    var(--font-slab-narrow);

  font-size:
    0.75rem;

  font-weight:
    700;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.wild-card p:last-child {
  margin-bottom:
    0;
}


.wild-closer {
  max-width:
    none;

  margin:
    40px 0 0;

  color:
    var(--ff-gold);

  font-family:
    var(--font-slab);

  font-size:
    clamp(1.45rem, 2.4vw, 2rem);

  font-weight:
    700;

  text-align:
    center;

  text-transform:
    uppercase;
}


/* =========================================================
   MATCHUPS
   ========================================================= */

.matchup-grid {
  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap:
    15px;
}


.matchup-card {
  min-height:
    205px;

  padding:
    22px 17px;

  border:
    1px solid rgba(242, 234, 215, 0.10);

  border-radius:
    var(--radius);

  background:
    rgba(4, 17, 29, 0.74);
}


.matchup-card__sport {
  margin-bottom:
    18px;

  color:
    var(--ff-gold);

  font-family:
    var(--font-slab-narrow);

  font-size:
    0.8rem;

  font-weight:
    700;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.matchup-card h3 {
  font-size:
    1.35rem;
}


.matchup-card__aka {
  margin-bottom:
    0;

  color:
    rgba(242, 234, 215, 0.79);

  font-size:
    0.94rem;

  font-style:
    italic;
}


/* =========================================================
   PLAY YOUR WAY
   ========================================================= */

.modes-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    20px;
}


.mode-card {
  min-height:
    220px;

  padding:
    28px 25px;

  border:
    1px solid rgba(242, 234, 215, 0.10);

  border-top:
    5px solid var(--ff-gold);

  border-radius:
    var(--radius);

  background:
    rgba(4, 17, 29, 0.76);
}


.mode-card p {
  margin-bottom:
    0;

  font-size:
    1.04rem;
}


/* Tournament add-on */

.tournament-strip {
  margin-top:
    24px;

  padding:
    27px 28px;

  display:
    grid;

  grid-template-columns:
    minmax(260px, 0.7fr)
    minmax(0, 1.3fr);

  gap:
    35px;

  align-items:
    center;

  border:
    1px solid rgba(199, 138, 30, 0.38);

  border-radius:
    var(--radius);

  background:
    rgba(125, 23, 27, 0.26);
}


.tournament-strip .eyebrow {
  margin-bottom:
    8px;
}


.tournament-strip h3 {
  margin-bottom:
    0;
}


.tournament-strip > p {
  margin-bottom:
    0;

  font-size:
    1.04rem;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-list {
  display:
    grid;

  gap:
    12px;
}


.faq-item {
  border-bottom:
    1px solid var(--ff-line);
}


.faq__question {
  width:
    100%;

  padding:
    21px 0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  border:
    0;

  background:
    transparent;

  color:
    var(--ff-cream);

  text-align:
    left;

  font-family:
    var(--font-slab);

  font-size:
    1.25rem;

  font-weight:
    700;

  text-transform:
    uppercase;
}


.faq__question::after {
  content:
    "+";

  color:
    var(--ff-gold);

  font-size:
    1.4rem;

  flex-shrink:
    0;
}


.faq__question[aria-expanded="true"]::after {
  content:
    "–";
}


.faq__answer {
  display:
    none;

  padding:
    0 0 19px;

  color:
    rgba(242, 234, 215, 0.92);

  font-size:
    1.03rem;
}


.faq-item.is-open .faq__answer {
  display:
    block;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta__inner {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;
}


.final-cta h2 {
  margin-inline:
    auto;
}


.final-cta__button {
  margin-top:
    5px;
}


.final-brand-mark {
  width:
    min(100%, 400px);

  margin-top:
    55px;

  opacity:
    0.85;

  filter:
    brightness(0)
    saturate(100%)
    invert(93%)
    sepia(13%)
    saturate(350%)
    hue-rotate(355deg)
    brightness(102%)
    contrast(93%);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  border-top:
    1px solid var(--ff-line);

  background:
    rgba(0, 0, 0, 0.32);
}


.site-footer__inner {
  width:
    min(100%, var(--content-width));

  margin-inline:
    auto;

  padding:
    24px var(--page-padding);

  display:
    flex;

  justify-content:
    space-between;

  gap:
    24px;

  color:
    rgba(242, 234, 215, 0.72);

  font-size:
    0.85rem;
}


.site-footer p {
  max-width:
    none;

  margin:
    0;
}


/* =========================================================
   RESPONSIVE — SMALL DESKTOP
   ========================================================= */

@media (max-width: 1180px) {

  .header-brand__u {
    width:
      46px;

    height:
      46px;
  }


  .header-brand__wordmark {
    width:
      275px;
  }


  .site-nav {
    gap:
      22px;
  }


  .site-nav a {
    font-size:
      0.92rem;
  }


  .hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(340px, 0.85fr);
  }


  .matchup-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1020px) {

  /* ---------- NAV ---------- */

  .site-menu-toggle {
    display:
      inline-flex;
  }


  .site-nav {
    position:
      absolute;

    top:
      100%;

    left:
      0;

    right:
      0;

    display:
      none;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      0;

    padding:
      16px var(--page-padding) 20px;

    background:
      rgba(4, 17, 29, 0.99);

    border-bottom:
      1px solid var(--ff-line);
  }


  .site-nav a {
    width:
      100%;

    padding:
      13px 0;

    font-size:
      1rem;
  }


  .site-header.is-open .site-nav {
    display:
      flex;
  }


  /* ---------- HERO ---------- */

  .hero__grid {
    grid-template-columns:
      1fr;

    gap:
      58px;
  }


  .hero__art {
    justify-content:
      center;
  }


  .hero__mascot-card {
    width:
      min(100%, 520px);

    margin-inline:
      auto;
  }


  /* ---------- BOOKS ---------- */

  .product-grid {
    grid-template-columns:
      1fr;

    gap:
      90px;
  }


  .product {
    width:
      min(100%, 620px);

    margin-inline:
      auto;
  }


  .books__eyebrow {
    width:
      min(100%, 620px);

    margin-inline:
      auto;

    margin-bottom:
      34px;
  }


  /* ---------- WHAT ---------- */

  .what-grid {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }


  .coach-stamp {
    width:
      140px;

    margin-top:
      10px;
  }


  /* ---------- HOW ---------- */


  .steps-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* ---------- WILD ---------- */

  .wild-heading-row {
    grid-template-columns:
      1fr;
  }


  .wild-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* ---------- MODES ---------- */

  .tournament-strip {
    grid-template-columns:
      1fr;

    gap:
      15px;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body {
    font-size:
      17px;
  }


  body::before {
    background-size:
      620px auto;

    /*
      Keep the texture visible on mobile too.
    */

    opacity:
      0.07;
  }


  /* ---------- HEADER ---------- */

  .site-header__inner {
    min-height:
      72px;

    gap:
      12px;
  }


  .header-brand {
    gap:
      9px;
  }


  .header-brand__u {
    width:
      37px;

    height:
      37px;
  }


  .header-brand__wordmark {
    width:
      195px;

    max-height:
      30px;
  }


  /* ---------- HERO ---------- */

  .hero-wordmark {
    width:
      min(100%, 500px);
  }


  .hero__intro {
    font-size:
      1.1rem;
  }


  .hero__actions {
    flex-direction:
      column;
  }


  .hero__actions .button {
    width:
      100%;
  }


  /*
    Explicitly center Red Rocket.
    No inherited left alignment.
  */

  .hero__art {
    width:
      100%;

    justify-content:
      center;

    text-align:
      center;
  }


  .hero__mascot-card {
    width:
      min(100%, 520px);

    margin-left:
      auto;

    margin-right:
      auto;
  }


  /* ---------- FACTS ---------- */

  .what-facts {
    grid-template-columns:
      1fr;
  }


  /* ---------- HOW ---------- */

  .steps-grid {
    grid-template-columns:
      1fr;
  }


  /* ---------- WILD ---------- */

  .wild-grid {
    grid-template-columns:
      1fr;
  }


  /* ---------- MATCHUPS ---------- */

  .matchup-grid {
    grid-template-columns:
      1fr;
  }


  /* ---------- PLAY MODES ---------- */

  .modes-grid {
    grid-template-columns:
      1fr;
  }


  /* ---------- FOOTER ---------- */

  .site-footer__inner {
    flex-direction:
      column;

    gap:
      8px;
  }

}