@font-face {
  font-family: "ALS Machinee Condensed";
  src: url("./assets/ALS_Machinee_Condensed_Medium_1.1.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ALS Machinee Compact";
  src: url("./assets/ALS_Machinee_Compact_Regular_1.1.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


article.announce{
  background: black;
}

.announce .credits {
  color: white;
  background-color: black;
}
.announce .credits a {
  color: white;
  border-color: white;
}
.announce .credits a:hover {
  color: #006047;
  border-color: #006047;
}

:root {
  color-scheme: dark;
  --white: #ffffff;
  --black: #000000;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--black);
}

body {
  font-family: "ALS Machinee Compact", Arial, sans-serif;
  color: var(--white);
}

img,
video {
  display: block;
  max-width: none;
}

.announce__text p {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
}

.announce__picture {
  display: block;
}

.site-shell {
  width: 100%;
  margin: 0 auto;
  background: var(--black);
  margin-top: -20vw;
}

.unison-frame {
  position: relative;
  width: 100%;
  max-width: 2560px;
  aspect-ratio: 2560 / 23025;
  margin: 0 auto;
  overflow: hidden;
  background: var(--black);
}

.media {
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.body-copy {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--white);
  text-align: center;
  font-style: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  word-break: break-word;
}

.als-text-title{
  max-width: 1200px;
}

.als-text-title h1 {
  color: var(--white);
  font-family: "ALS Machinee Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 240%;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media(max-width: 800px){
 .als-text-title h1 {
   font-size: 180%;
 } 
}

.body-copy {
  left: 50%;
  width: 38.632813%;
  transform: translateX(-50%);
  font-family: "ALS Machinee Compact", Arial, sans-serif;
  font-size: min(40px, 1.5625vw);
  font-weight: 400;
  line-height: 1.2;
}

.intro-copy {
  top: 2.823019%;
}

.concept-copy {
  top: 12.373507%;
}

.lettering-copy {
  top: 15.826276%;
}

.typeface-copy {
  top: 22.193268%;
}

.imbalance-copy {
  top: 44.165038%;
}

.numerals-copy {
  top: 53.537459%;
}

.captain-copy {
  top: 72.581976%;
}

.away-copy {
  top: 84.707926%;
}

.surnames-copy {
  top: 33.455749%;
  width: 41.523438%;
}

.template-copy {
  top: 37.246471%;
}

.media-1,
.media-2 {
  left: 0;
  top: 3.913138%;
  width: 100%;
  height: 7.583062%;
}

.media-1 img,
.media-2 img {
  transform-origin: 50% 50%;
  will-change: transform;
}

.media-1 img {
  transform: scale(var(--hero-rays-scale, 1.5));
}

.media-2 img {
  transform: scale(var(--hero-jersey-scale, 1));
}

.media-3 {
  left: 0.039063%;
  top: 11.4962%;
  width: 100%;
  height: 4.234528%;
}

.media-4 {
  left: 0;
  top: 16.395223%;
  width: 100%;
  height: calc(5.098806% - 2px);
}

.media-4 video {
  height: calc(100% + 2px);
}

.media-5 {
  left: -0.039063%;
  top: 22.927253%;
  width: 100.039063%;
  height: 4.234528%;
}

.media-6 {
  left: 0;
  top: 27.161781%;
  width: 100%;
  height: 5.912991%;
}

.media-7 {
  left: -0.039063%;
  top: 34.623236%;
  width: 100%;
  height: 2.557003%;
}

.media-8 {
  left: 0.039063%;
  top: 37.515744%;
  width: 99.921875%;
  height: 3.635179%;
}

.media-9 {
  left: 0.039063%;
  top: 41.150923%;
  width: 99.960938%;
  height: 2.562432%;
}

.media-10 {
  left: 0;
  top: 45.70684%;
  width: 100%;
  height: 3.561347%;
}

.media-11 {
  left: 0.039063%;
  top: 49.268187%;
  width: 99.960938%;
  height: 3.995657%;
}

.number-stack {
  position: absolute;
  left: -24.257813%;
  top: 54.888165%;
  width: 148.476563%;
  height: 8.2519%;
  overflow: hidden;
  isolation: isolate;
  --number-stack-fade-height:55%;
}

.number-stage {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 200.052632%;
  overflow: visible;
  pointer-events: none;
}

.number-stack::after {
  content: "";
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--number-stack-fade-height);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.18) 38%,
    rgba(0, 0, 0, 0.68) 76%,
    var(--black) 100%
  );
}

.number-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

.number-layer-6 {
  z-index: 1;
  animation: number-spin-cw 60s linear infinite;
}

.number-layer-1 {
  z-index: 2;
}

.number-layer-2 {
  z-index: 3;
  animation: number-spin-cw 60s linear infinite;
}

.number-layer-3 {
  z-index: 4;
}

.number-layer-4 {
  z-index: 5;
  animation: number-spin-ccw 60s linear infinite;
}

.number-layer-5 {
  z-index: 6;
}

@keyframes number-spin-cw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes number-spin-ccw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.media-13 {
  left: -0.039063%;
  top: 63.139631%;
  width: 100.039063%;
  height: 9.128688%;
}

.media-14 {
  left: 0;
  top: 73.315961%;
  width: 100%;
  height: 5.168295%;
}

.media-15 {
  left: -0.039063%;
  top: 78.802389%;
  width: 100.039063%;
  height: 5.168295%;
}

.media-16 {
  left: 0;
  top: 85.294245%;
  width: 99.960938%;
  height: 14.380436%;
}

@media (max-width: 768px) {
  .unison-frame {
    --mobile-copy-gap: clamp(24px, 6.4vw, 48px);
    --mobile-copy-gap-tight: clamp(18px, 5.2vw, 38px);
    --mobile-intro-top: clamp(156px, 40vw, 236px);
    --mobile-intro-height: clamp(118px, 31vw, 144px);
    --mobile-concept-height: clamp(72px, 18.5vw, 104px);
    --mobile-short-copy-height: clamp(50px, 13vw, 72px);
    --mobile-typeface-height: clamp(72px, 18.5vw, 104px);
    --mobile-surnames-height: clamp(132px, 34vw, 172px);
    --mobile-template-height: clamp(20px, 5.4vw, 28px);
    --mobile-imbalance-height: clamp(150px, 39vw, 208px);
    --mobile-small-copy-height: clamp(42px, 10.8vw, 58px);
    --mobile-media-1-height: 68.203125vw;
    --mobile-media-3-height: 38.085938vw;
    --mobile-media-4-height: 45.859375vw;
    --mobile-media-5-height: 38.085938vw;
    --mobile-media-6-height: 53.182273vw;
    --mobile-media-7-height: 23.007813vw;
    --mobile-media-8-height: 32.695313vw;
    --mobile-media-9-height: 23.046875vw;
    --mobile-media-10-height: 32.03125vw;
    --mobile-media-11-height: 35.9375vw;
    --mobile-number-height: 74.21875vw;
    --mobile-media-13-height: 82.104702vw;
    --mobile-media-14-height: 46.484375vw;
    --mobile-media-15-height: 46.484375vw;
    --mobile-media-16-height: 129.339661vw;
    --mobile-media-1-top: calc(var(--mobile-intro-top) + var(--mobile-intro-height) + var(--mobile-copy-gap));
    --mobile-media-3-top: calc(var(--mobile-media-1-top) + var(--mobile-media-1-height));
    --mobile-concept-top: calc(var(--mobile-media-3-top) + clamp(34px, 10vw, 68px));
    --mobile-lettering-top: calc(var(--mobile-media-3-top) + var(--mobile-media-3-height) + var(--mobile-copy-gap));
    --mobile-media-4-top: calc(var(--mobile-lettering-top) + var(--mobile-short-copy-height) + var(--mobile-copy-gap-tight));
    --mobile-typeface-top: calc(var(--mobile-media-4-top) + var(--mobile-media-4-height) + var(--mobile-copy-gap));
    --mobile-media-5-top: calc(var(--mobile-typeface-top) + var(--mobile-typeface-height) + var(--mobile-copy-gap-tight));
    --mobile-media-6-top: calc(var(--mobile-media-5-top) + var(--mobile-media-5-height));
    --mobile-surnames-top: calc(var(--mobile-media-6-top) + var(--mobile-media-6-height) + var(--mobile-copy-gap));
    --mobile-media-7-top: calc(var(--mobile-surnames-top) + var(--mobile-surnames-height) + var(--mobile-copy-gap-tight));
    --mobile-template-top: calc(var(--mobile-media-7-top) + var(--mobile-media-7-height) + var(--mobile-copy-gap-tight));
    --mobile-media-8-top: calc(var(--mobile-template-top) + var(--mobile-template-height) + var(--mobile-copy-gap-tight));
    --mobile-media-9-top: calc(var(--mobile-media-8-top) + var(--mobile-media-8-height));
    --mobile-imbalance-top: calc(var(--mobile-media-9-top) + var(--mobile-media-9-height) + var(--mobile-copy-gap));
    --mobile-media-10-top: calc(var(--mobile-imbalance-top) + var(--mobile-imbalance-height) + var(--mobile-copy-gap));
    --mobile-media-11-top: calc(var(--mobile-media-10-top) + var(--mobile-media-10-height));
    --mobile-numerals-top: calc(var(--mobile-media-11-top) + var(--mobile-media-11-height) + var(--mobile-copy-gap));
    --mobile-number-top: calc(var(--mobile-numerals-top) + var(--mobile-small-copy-height) + var(--mobile-copy-gap));
    --mobile-media-13-top: calc(var(--mobile-number-top) + var(--mobile-number-height));
    --mobile-captain-top: calc(var(--mobile-media-13-top) + var(--mobile-media-13-height) + var(--mobile-copy-gap));
    --mobile-media-14-top: calc(var(--mobile-captain-top) + var(--mobile-small-copy-height) + var(--mobile-copy-gap-tight));
    --mobile-media-15-top: calc(var(--mobile-media-14-top) + var(--mobile-media-14-height) + var(--mobile-copy-gap-tight));
    --mobile-away-top: calc(var(--mobile-media-15-top) + var(--mobile-media-15-height) + var(--mobile-copy-gap));
    --mobile-media-16-top: calc(var(--mobile-away-top) + var(--mobile-small-copy-height) + var(--mobile-copy-gap-tight));

    height: calc(var(--mobile-media-16-top) + var(--mobile-media-16-height));
    aspect-ratio: auto;
  }

  .body-copy {
    width: 92%;
    font-size: clamp(15px, 4.1vw, 19px);
    line-height: 1.16;
  }

  .intro-copy {
    top: var(--mobile-intro-top);
  }

  .concept-copy {
    top: var(--mobile-concept-top);
  }

  .lettering-copy {
    top: var(--mobile-lettering-top);
  }

  .typeface-copy {
    top: var(--mobile-typeface-top);
  }

  .surnames-copy {
    top: var(--mobile-surnames-top);
    width: 92%;
  }

  .template-copy {
    top: var(--mobile-template-top);
  }

  .imbalance-copy {
    top: var(--mobile-imbalance-top);
  }

  .numerals-copy {
    top: var(--mobile-numerals-top);
  }

  .captain-copy {
    top: var(--mobile-captain-top);
  }

  .away-copy {
    top: var(--mobile-away-top);
  }

  .media-1,
  .media-2 {
    top: var(--mobile-media-1-top);
    height: var(--mobile-media-1-height);
  }

  .media-3 {
    top: var(--mobile-media-3-top);
    height: var(--mobile-media-3-height);
  }

  .media-4 {
    top: var(--mobile-media-4-top);
    height: calc(var(--mobile-media-4-height) - 2px);
  }

  .media-5 {
    top: var(--mobile-media-5-top);
    height: var(--mobile-media-5-height);
  }

  .media-6 {
    top: var(--mobile-media-6-top);
    height: var(--mobile-media-6-height);
  }

  .media-7 {
    top: var(--mobile-media-7-top);
    height: var(--mobile-media-7-height);
  }

  .media-8 {
    top: var(--mobile-media-8-top);
    height: var(--mobile-media-8-height);
  }

  .media-9 {
    top: var(--mobile-media-9-top);
    height: var(--mobile-media-9-height);
  }

  .media-10 {
    top: var(--mobile-media-10-top);
    height: var(--mobile-media-10-height);
  }

  .media-11 {
    top: var(--mobile-media-11-top);
    height: var(--mobile-media-11-height);
  }

  .number-stack {
    top: var(--mobile-number-top);
    height: var(--mobile-number-height);
  }

  .media-13 {
    top: var(--mobile-media-13-top);
    height: var(--mobile-media-13-height);
  }

  .media-14 {
    top: var(--mobile-media-14-top);
    height: var(--mobile-media-14-height);
  }

  .media-15 {
    top: var(--mobile-media-15-top);
    height: var(--mobile-media-15-height);
  }

  .media-16 {
    top: var(--mobile-media-16-top);
    height: var(--mobile-media-16-height);
  }
}

@media (min-width: 2560px) {
  .body-copy {
    font-size: 40px;
  }
}