.st-stage {

  background: var(--paper);
  color: var(--ink);
  overflow: hidden;

  display: grid;

  align-content: center;
}

.st-stage::before,
.st-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.st-stage::before {
  background:
    radial-gradient(58% 54% at 74% 47%, rgba(201,160,99,.22) 0%, rgba(201,160,99,0) 66%),
    radial-gradient(48% 44% at 7% 53%, rgb(var(--dark-rgb) / .05) 0%, rgb(var(--dark-rgb) / 0) 64%);
}

.st-stage::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: .04;
}

.st-ring {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  border: var(--hair) solid rgba(201,160,99,.42);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}
.st-ring--a { right: -16rem; width: 58rem; height: 58rem; }
.st-ring--b {
  right: -4rem;
  width: 34rem; height: 34rem;
  border-color: rgba(201,160,99,.26);
}

.st-inner {
  position: relative;
  z-index: 1;
  align-self: center;
}
.st-body { grid-column: content-start / span 12; }

.st-runway { height: 14vh; }

@media (max-width: 991px) { .st-runway { height: 9vh; } }
@media (max-width: 767px) { .st-runway { height: 7vh; } }

.st-mark {
  display: block;

  width: 4.6rem;
  height: 4.6rem;

  margin-bottom: 2.4rem;
  color: var(--gold);
}
.st-mark svg { width: 100%; height: 100%; display: block; }

.st-para {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 4.4rem;
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--ink);

  max-width: 32ch;
}

.st-w { display: inline-block; }

@media (max-width: 1200px) {
  .st-para { font-size: 3.8rem; }
  .st-ring--a { width: 46rem; height: 46rem; right: -14rem; }
  .st-ring--b { width: 28rem; height: 28rem; }
}
@media (max-width: 991px) {
  .st-body { grid-column: content; }

  .st-para { font-size: 3.6rem; max-width: none; }
  .st-mark { width: 3.8rem; height: 3.8rem; margin-bottom: 1.8rem; }

  .st-media { display: none; }
}
@media (max-width: 767px) {
  .st-para { font-size: 2.9rem; max-width: none; line-height: 1.34; }
  .st-mark { width: 3.2rem; height: 3.2rem; margin-bottom: 1.7rem; }

  .st-ring--b { display: none; }
  .st-ring--a { width: 32rem; height: 32rem; right: -12rem; }
}

.st-media {
  position: absolute;
  inset: 0;
  z-index: 2;

  align-content: stretch;
  pointer-events: none;
}

.st-frame {
  grid-column: content;
  justify-self: end;
  align-self: center;
  width: 36%;

  aspect-ratio: 1;
  height: auto;
  visibility: hidden;
}

@media (max-width: 991px) {
  .st-frame { width: 52%; }
}
@media (max-width: 767px) {
  .st-frame { width: 64%; }
}

@keyframes st-turn   { to { transform: rotate(360deg); } }
@keyframes st-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

.st-mark svg {
  animation:
    st-turn    16s linear        infinite,
    st-breathe 5.5s ease-in-out  infinite;
}

@media (prefers-reduced-motion: reduce) {
  .st-mark svg { animation: none; }
}

.st-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }

.st-mark svg * {
  transform-origin: center;
  transform-box: fill-box;
}

.m-ring { stroke-width: 1.1; }

.m-ring--o {
  opacity: .5;
  stroke-dasharray: .17 .83;
  animation: m-spin 19s linear infinite, m-sweep 7s linear infinite;
}
.m-ring--i {
  opacity: .34;
  stroke-dasharray: .12 .88;
  animation: m-spin-r 13s linear infinite, m-sweep-r 5s linear infinite;
}

.m-cross { animation: m-spin 26s linear infinite; }
.m-arm {
  stroke-width: 1.25;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;

  animation: m-arm 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .38s);
}

.m-dot { animation: m-dot 3.1s ease-in-out infinite; }

@keyframes m-spin    { to { transform: rotate(360deg); } }
@keyframes m-spin-r  { to { transform: rotate(-360deg); } }
@keyframes m-sweep   { to { stroke-dashoffset: -1; } }
@keyframes m-sweep-r { to { stroke-dashoffset: 1; } }
@keyframes m-arm {
  0%,  10%  { stroke-dashoffset: 1; }
  40%, 60%  { stroke-dashoffset: 0; }
  90%, 100% { stroke-dashoffset: 1; }
}
@keyframes m-dot {
  0%, 100% { transform: scale(1);  opacity: 1; }
  50%      { transform: scale(.45); opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .st-mark svg * { animation: none; }
  .m-arm { stroke-dashoffset: 0; }
}

.st-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.st-mark svg * {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.m-track { stroke-width: 1; opacity: .22; }

.m-arc  { stroke-width: 1.4; }
.m-arc--o { stroke-dasharray: .13 .87; animation: m-run   2.4s linear infinite; }
.m-arc--i { stroke-dasharray: .18 .82; animation: m-run-r 1.7s linear infinite; }

.m-cross { stroke-width: 1.3; opacity: .85; animation: m-spin 4.2s linear infinite; }

.m-dot { animation: m-dot 1.3s ease-in-out infinite; }

@keyframes m-spin  { to { transform: rotate(360deg); } }
@keyframes m-run   { to { stroke-dashoffset: -1; } }
@keyframes m-run-r { to { stroke-dashoffset: 1; } }
@keyframes m-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.35); opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .st-mark svg * { animation: none; }
}

@media (max-width: 991px) {

  .st-stage {
    position: static;
    height: auto;
    min-height: 0;
    padding: 11rem 0;
    align-content: start;
  }
  .st-runway { display: none; }
}
@media (max-width: 767px) {
  .st-stage { padding: 8.5rem 0; }
}