:root {
  --white: rgba(255, 255, 255, 1);
  --black: #272727;
  --offwhite: #d4d4d4;
  --accent1: #ff6600;
  --accent2: #006699;
  --accent3: #e3ff00;
  --accent1-2: rgba(255, 102, 0, 0.2);
  --accent2-2: rgba(0, 102, 153, 0.2);
  --accent3-2: rgba(227, 255, 0, 0.2);

  --color-shadow: rgb(from var(--black) r g b / 13%);

  --base-size: 1.25vw;
  --golden-ratio: 1.618;
  --golden-ratio-2: calc(var(--golden-ratio) * var(--golden-ratio));
  --golden-ratio-3: calc(var(--golden-ratio-2) * var(--golden-ratio));
  --golden-ratio-4: calc(var(--golden-ratio-3) * var(--golden-ratio));

  font-family: sans-serif;
  font-size: max(100%, var(--base-size));
  background: var(--white);
  color: var(--black);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100svh;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--white);
}

.stage {
  display: grid;
  place-items: center;
  padding: calc(var(--base-size) * var(--golden-ratio-3));

  .card {
    width: 100%;
    padding: calc(var(--base-size) * var(--golden-ratio-3));
    border: calc(var(--base-size) / var(--golden-ratio-4)) solid var(--accent2);
    border-radius: calc(var(--base-size) * var(--golden-ratio-2));
    background: var(--white);
    box-shadow:
      0 calc(var(--base-size) * var(--golden-ratio-2))
        calc(var(--base-size) * var(--golden-ratio-4)) var(--color-shadow),
      inset 0 calc(var(--base-size) / var(--golden-ratio-4))
        var(--color-shadow);
    backdrop-filter: blur(calc(var(--base-size) * var(--golden-ratio)));

    .card__topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(var(--base-size) * var(--golden-ratio-2));
      text-transform: uppercase;

      .signal {
        display: inline-flex;
        align-items: center;
        gap: calc(var(--base-size) / var(--golden-ratio));

        i {
          width: calc(var(--base-size) / var(--golden-ratio));
          aspect-ratio: 1;
          border-radius: 50%;
          background: var(--accent1);
          box-shadow: 0 0 0 calc(var(--base-size) / var(--golden-ratio-2))
            var(--accent1-2);
        }
      }

      .card__status {
        padding: calc(var(--base-size) / var(--golden-ratio)) var(--base-size);
        border-radius: calc(var(--base-size) / var(--golden-ratio));
        background: var(--accent3);
      }
    }

    .mark {
      margin: calc(var(--base-size) * var(--golden-ratio-3)) 0 calc(var(--base-size) * var(--golden-ratio-2));
      font-size: calc(var(--base-size) * var(--golden-ratio-3));
    }

    .card__copy {
      .eyebrow {
        margin: 0 0 calc(var(--base-size));
        color: var(--accent2);
        text-transform: uppercase;
      }
    }
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--base-size) * var(--golden-ratio-2)) calc(var(--base-size) * var(--golden-ratio-3));
  padding: calc(var(--base-size) * var(--golden-ratio-2)) calc(var(--base-size) * var(--golden-ratio-3));

  a {
    color: var(--accent2);
    text-decoration: none;
    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  nav {
    display: flex;
    gap: calc(var(--base-size) * var(--golden-ratio));
  }
}