.hero {
  background-image:
    radial-gradient(circle at 82% 24%, rgba(255,106,0,.34), transparent 30%),
    radial-gradient(circle at 68% 78%, rgba(244,185,66,.13), transparent 25%),
    repeating-linear-gradient(132deg, transparent 0 46px, rgba(255,255,255,.025) 46px 48px),
    linear-gradient(135deg, #050507 0%, #17100b 58%, #09090b 100%);
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
}

.hero::after {
  content: "BOOYAH";
  position: absolute;
  right: -0.04em;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,106,0,.22);
  font-size: clamp(8rem, 22vw, 22rem);
  font-weight: 950;
  line-height: .8;
  letter-spacing: -.08em;
  white-space: nowrap;
  pointer-events: none;
}

.hero .eyebrow,
.hero .lead,
.hero h1,
.hero .actions,
.hero .fine {
  text-shadow: 0 3px 16px rgba(0,0,0,.8);
}

.hero-inner { z-index: 1; }

.hero h1 {
  -webkit-text-stroke: 3px rgba(0,0,0,.9);
  paint-order: stroke fill;
  text-shadow: 7px 9px 0 rgba(0,0,0,.62), 0 18px 34px rgba(0,0,0,.58);
}

.page-hero h1 {
  -webkit-text-stroke: 2px rgba(0,0,0,.82);
  paint-order: stroke fill;
  text-shadow: 5px 7px 0 rgba(0,0,0,.48), 0 14px 28px rgba(0,0,0,.42);
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  -webkit-text-stroke: 1px rgba(0,0,0,.85);
  paint-order: stroke fill;
  text-shadow: 2px 3px 0 rgba(0,0,0,.72), 0 7px 14px rgba(0,0,0,.5);
}

.brand-emblem {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg,var(--orange),#c83d00);
  border: 3px solid var(--gold);
  box-shadow: 0 5px 18px rgba(0,0,0,.45);
  margin-right: 10px;
  color: #fff !important;
  font-size: .54rem;
  font-weight: 950;
  line-height: .85;
  letter-spacing: -.04em;
  text-align: center;
  -webkit-text-stroke: .55px rgba(0,0,0,.72);
  paint-order: stroke fill;
  text-shadow: 1px 2px 0 rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
}

.brand-emblem span { display:block; color:#fff; }

.nav { position: relative; }

.nav-dropdown { position: relative; margin-left: auto; }
.nav-dropdown summary { list-style: none; cursor: pointer; user-select: none; padding: 10px 18px; border: 1px solid #4a4a52; border-radius: 999px; background: #17171b; color: #fff; font-weight: 900; letter-spacing: .04em; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary:hover,
.nav-dropdown[open] summary { border-color: var(--orange); color: var(--orange); }
.nav-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; display: grid; padding: 10px; background: rgba(17,17,20,.98); border: 1px solid #3a3a42; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.nav-menu a { display: block; padding: 10px 12px; border-radius: 10px; color: #e8e8ec; text-decoration: none; font-size: .94rem; }
.nav-menu a:hover,
.nav-menu a:focus-visible { background: rgba(255,106,0,.14); color: var(--orange); outline: none; }

@media (max-width: 540px) {
  .nav { display:flex; align-items:center; min-height:64px; padding:10px 0; }
  .site-header .brand { margin:0; font-size:1.02rem; letter-spacing:.05em; }
  .nav-dropdown { position: relative; top: auto; right: auto; margin-left: auto; }
  .nav-dropdown summary { padding: 7px 11px; font-size:.78rem; }
  .nav-menu { min-width: 205px; }
}

@media (max-width: 820px) {
  .hero::after { right:-.1em; opacity:.72; }
}

@media (max-width: 540px) {
  .hero::after { top:27%; right:-.18em; font-size:8rem; opacity:.6; }

  .brand-emblem {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    margin-right:7px;
    font-size:.44rem;
  }
}