@font-face {
  font-family: "RA Maintenance";
  src: url("/assets/GeneralSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "RA Maintenance Display";
  src: url("/assets/GeneralSans-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

html.ra-maintenance-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #000;
}

html.ra-maintenance-pending body {
  visibility: hidden !important;
}

html.ra-maintenance-active,
html.ra-maintenance-active body {
  min-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  color: #fff !important;
}

html.ra-maintenance-active body > :not(.ra-maintenance-wall) {
  display: none !important;
}

.ra-maintenance-wall,
.ra-maintenance-wall * {
  box-sizing: border-box;
}

.ra-maintenance-wall {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: hidden;
  padding: 32px 20px;
  background: #000;
  color: #fff;
  font-family: "RA Maintenance", Arial, sans-serif;
  text-align: center;
}

.ra-maintenance-wall__content {
  width: min(100%, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ra-maintenance-wall__content img {
  display: block;
  width: clamp(92px, 11vw, 144px);
  height: auto;
  margin: 0 0 clamp(30px, 5vh, 48px);
}

.ra-maintenance-wall__content h1 {
  margin: 0;
  color: #fff;
  font: clamp(2rem, 4.8vw, 4.5rem)/1 "RA Maintenance Display", Arial, sans-serif;
  letter-spacing: -.055em;
}

.ra-maintenance-wall__content p {
  margin: 14px 0 0;
  color: #f2ff00;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: .01em;
}

@media (max-width: 760px) {
  .ra-maintenance-wall { padding: 28px 20px; }
  .ra-maintenance-wall__content img { margin-bottom: 28px; }
  .ra-maintenance-wall__content p { margin-top: 11px; }
}

html.ra-intro-pending,
html.ra-intro-pending body {
  overflow: hidden !important;
  background: #000;
}

.ra-site-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  overflow: hidden;
  background: #000;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.ra-site-intro__mark {
  position: absolute;
  top: 43%;
  left: 50%;
  width: clamp(50px, 5vw, 72px);
  aspect-ratio: 1;
  display: block;
  background: #fff;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) rotate(-5deg) scale(.88);
  -webkit-mask: url("/assets/ra-icon.png") center / contain no-repeat;
  mask: url("/assets/ra-icon.png") center / contain no-repeat;
  will-change: transform, opacity;
}

.ra-site-intro__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: clamp(180px, 28vh, 300px);
  background: #000;
  overflow: hidden;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

.ra-site-intro__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ra-progress, 0%);
  background: rgb(255, 0, 0);
  box-shadow: 18px 0 42px rgba(255, 0, 0, .9);
  overflow: hidden;
  will-change: width;
}

.ra-site-intro__progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: rgba(255, 255, 255, .32);
  box-shadow: 0 0 28px 8px rgba(255, 30, 30, .8);
}

@supports (color: color(display-p3 1 0 0)) {
  .ra-site-intro__progress-fill {
    background: color(display-p3 1 0 0);
  }
}

.ra-site-intro__value {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(28px, 5vw, 76px);
  display: block;
  color: #fff;
  font: 400 clamp(5.5rem, 10.5vw, 11rem)/.8 "RSA FONT", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.075em;
  white-space: nowrap;
  transform: translateY(-50%);
}

.ra-site-intro__progress-fill .ra-site-intro__value {
  color: #000;
}

.ra-site-intro.is-running .ra-site-intro__mark {
  animation: ra-cypher-pulse 1.05s ease-in-out .12s infinite;
}

.ra-site-intro.is-running .ra-site-intro__progress {
  transform: translate3d(0, 0, 0);
  transition: transform .64s cubic-bezier(.16, 1, .3, 1);
}

.ra-site-intro.is-locked .ra-site-intro__mark {
  animation: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.94);
  transition: opacity .18s ease;
}

.ra-site-intro.is-complete {
  transform: translate3d(0, -100%, 0);
  transition: transform .72s cubic-bezier(.76, 0, .24, 1);
}

@keyframes ra-cypher-pulse {
  0%, 100% {
    opacity: .38;
    transform: translate3d(-50%, -50%, 0) scale(.92);
  }
  50% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.06);
  }
}

@media (max-width: 700px) {
  .ra-site-intro__mark {
    top: 39%;
    width: clamp(46px, 14vw, 64px);
  }

  .ra-site-intro__progress {
    width: 100vw;
    height: min(30vh, 240px);
  }

  .ra-site-intro__value {
    left: 24px;
    font-size: clamp(5rem, 23vw, 8rem);
  }
}

/* Destination-specific internal page transitions. */
html.ra-page-transition-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #fcca08;
}

.ra-page-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.ra-page-transition__panel {
  position: absolute;
  z-index: 0;
  background: #fcca08;
  will-change: transform, clip-path;
}

.ra-page-transition__panel--a { inset: 0; }
.ra-page-transition__panel--b { display: none; }

.ra-page-transition__panel--a::before {
  content: "";
  position: absolute;
  display: none;
  background: #ff2b2b;
}

.ra-page-transition__accent {
  position: absolute;
  z-index: 1;
  display: none;
  background: #ff2b2b;
}

.ra-page-transition__mark {
  position: relative;
  z-index: 2;
  display: block;
  width: 96px;
  height: 96px;
  background: #000;
  opacity: 0;
  -webkit-mask: url("/assets/ra-icon.png") center / contain no-repeat;
  mask: url("/assets/ra-icon.png") center / contain no-repeat;
  will-change: opacity;
}

.ra-page-transition.is-covering,
.ra-page-transition.is-arrival,
.ra-page-transition.is-revealing {
  visibility: visible;
  pointer-events: auto;
}

.ra-page-transition.is-covering .ra-page-transition__mark {
  opacity: 1;
  transition: opacity .16s ease .16s;
}

.ra-page-transition.is-arrival .ra-page-transition__mark { opacity: 1; }

.ra-page-transition.is-revealing .ra-page-transition__mark {
  opacity: 0;
  transition: opacity .14s ease;
}

/* Videos: a vertical club-shutter movement. */
.ra-page-transition--up .ra-page-transition__panel--a {
  transform: translate3d(0, 100%, 0);
}

.ra-page-transition--up .ra-page-transition__panel--a::before {
  top: 0;
  right: 0;
  left: 0;
  display: block;
  height: 7px;
}

.ra-page-transition--up.is-covering .ra-page-transition__panel--a,
.ra-page-transition--up.is-arrival .ra-page-transition__panel--a {
  transform: translate3d(0, 0, 0);
}

.ra-page-transition--up.is-covering .ra-page-transition__panel--a {
  transition: transform .4s cubic-bezier(.76, 0, .24, 1);
}

.ra-page-transition--up.is-revealing .ra-page-transition__panel--a {
  transform: translate3d(0, -100%, 0);
  transition: transform .46s cubic-bezier(.76, 0, .24, 1) .04s;
}

/* Playlists: a side wipe, echoing a record sleeve sliding out. */
.ra-page-transition--side .ra-page-transition__panel--a {
  transform: translate3d(100%, 0, 0);
}

.ra-page-transition--side .ra-page-transition__panel--a::before {
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 7px;
}

.ra-page-transition--side.is-covering .ra-page-transition__panel--a,
.ra-page-transition--side.is-arrival .ra-page-transition__panel--a {
  transform: translate3d(0, 0, 0);
}

.ra-page-transition--side.is-covering .ra-page-transition__panel--a {
  transition: transform .4s cubic-bezier(.76, 0, .24, 1);
}

.ra-page-transition--side.is-revealing .ra-page-transition__panel--a {
  transform: translate3d(-100%, 0, 0);
  transition: transform .46s cubic-bezier(.76, 0, .24, 1) .04s;
}

/* Labels: two panels meet and separate like catalogue dividers. */
.ra-page-transition--split .ra-page-transition__panel--a {
  inset: 0 50% 0 0;
  transform: translate3d(-100%, 0, 0);
}

.ra-page-transition--split .ra-page-transition__panel--b {
  inset: 0 0 0 50%;
  display: block;
  transform: translate3d(100%, 0, 0);
}

.ra-page-transition--split .ra-page-transition__accent {
  top: 0;
  bottom: 0;
  left: calc(50% - 3px);
  display: block;
  width: 6px;
  opacity: 0;
}

.ra-page-transition--split.is-covering .ra-page-transition__panel,
.ra-page-transition--split.is-arrival .ra-page-transition__panel {
  transform: translate3d(0, 0, 0);
}

.ra-page-transition--split.is-covering .ra-page-transition__panel {
  transition: transform .4s cubic-bezier(.76, 0, .24, 1);
}

.ra-page-transition--split.is-covering .ra-page-transition__accent,
.ra-page-transition--split.is-arrival .ra-page-transition__accent {
  opacity: 1;
  transition: opacity .1s ease .3s;
}

.ra-page-transition--split.is-revealing .ra-page-transition__panel--a {
  transform: translate3d(-100%, 0, 0);
  transition: transform .46s cubic-bezier(.76, 0, .24, 1) .04s;
}

.ra-page-transition--split.is-revealing .ra-page-transition__panel--b {
  transform: translate3d(100%, 0, 0);
  transition: transform .46s cubic-bezier(.76, 0, .24, 1) .04s;
}

.ra-page-transition--split.is-revealing .ra-page-transition__accent { opacity: 0; }

/* News and articles: an editorial diagonal cut. */
.ra-page-transition--cut .ra-page-transition__panel--a {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.ra-page-transition--cut .ra-page-transition__panel--a::before {
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 8px;
}

.ra-page-transition--cut.is-covering .ra-page-transition__panel--a,
.ra-page-transition--cut.is-arrival .ra-page-transition__panel--a {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.ra-page-transition--cut.is-covering .ra-page-transition__panel--a {
  transition: clip-path .42s cubic-bezier(.76, 0, .24, 1);
}

.ra-page-transition--cut.is-revealing .ra-page-transition__panel--a {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path .46s cubic-bezier(.76, 0, .24, 1) .04s;
}

/* Submission/contact: a centred signal opens, then folds away. */
.ra-page-transition--center .ra-page-transition__panel--a {
  transform: scale3d(0, 1, 1);
  transform-origin: center;
}

.ra-page-transition--center .ra-page-transition__accent {
  top: calc(50% - 3px);
  right: 0;
  left: 0;
  display: block;
  height: 6px;
  transform: scaleX(0);
}

.ra-page-transition--center.is-covering .ra-page-transition__panel--a,
.ra-page-transition--center.is-arrival .ra-page-transition__panel--a {
  transform: scale3d(1, 1, 1);
}

.ra-page-transition--center.is-covering .ra-page-transition__panel--a {
  transition: transform .4s cubic-bezier(.76, 0, .24, 1);
}

.ra-page-transition--center.is-covering .ra-page-transition__accent,
.ra-page-transition--center.is-arrival .ra-page-transition__accent {
  transform: scaleX(1);
  transition: transform .34s cubic-bezier(.16, 1, .3, 1) .08s;
}

.ra-page-transition--center.is-revealing .ra-page-transition__panel--a {
  transform: scale3d(1, 0, 1);
  transition: transform .46s cubic-bezier(.76, 0, .24, 1) .04s;
}

.ra-page-transition--center.is-revealing .ra-page-transition__accent { opacity: 0; }

/* Home and fallback: the reverse shutter. */
.ra-page-transition--down .ra-page-transition__panel--a {
  transform: translate3d(0, -100%, 0);
}

.ra-page-transition--down .ra-page-transition__panel--a::before {
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 7px;
}

.ra-page-transition--down.is-covering .ra-page-transition__panel--a,
.ra-page-transition--down.is-arrival .ra-page-transition__panel--a {
  transform: translate3d(0, 0, 0);
}

.ra-page-transition--down.is-covering .ra-page-transition__panel--a {
  transition: transform .4s cubic-bezier(.76, 0, .24, 1);
}

.ra-page-transition--down.is-revealing .ra-page-transition__panel--a {
  transform: translate3d(0, 100%, 0);
  transition: transform .46s cubic-bezier(.76, 0, .24, 1) .04s;
}

@media (max-width: 700px) {
  .ra-page-transition__mark { width: 84px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-site-intro,
  html.ra-page-transition-pending::before,
  .ra-page-transition { display: none !important; }

  html.ra-intro-pending,
  html.ra-intro-pending body { overflow: auto !important; }
}