.access-page {
  min-height: calc(100vh - 190px);
  display: grid;
  place-items: center;
  padding-block: 72px;
}

.access-card {
  width: min(760px, 100%);
  padding: clamp(30px, 6vw, 72px);
  text-align: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 0%, #5f45232e, transparent 58%),
    linear-gradient(145deg, #211d16, #141310);
  box-shadow: 0 25px 60px #0005, inset 0 0 0 5px #92734212;
  position: relative;
}

.access-card::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 7px;
  border: 1px solid #92734222;
}

.access-code {
  color: var(--gold);
  font: 700 clamp(48px, 9vw, 88px) / 1 'Cinzel', serif;
  letter-spacing: .08em;
  margin-bottom: 22px;
}

.access-card h1 {
  font-size: clamp(38px, 5vw, 62px);
}

.access-card .lede {
  margin: 24px auto 0;
  max-width: 540px;
  color: #d8cdbb;
  font-size: clamp(20px, 2.5vw, 24px);
}

.access-card .small-copy {
  max-width: 500px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 16px;
}

.access-card .actions {
  justify-content: center;
  margin-top: 32px;
}

.access-card .text-link {
  margin-top: 24px;
  font-size: 15px;
}

@media (max-width: 700px) {
  .access-page {
    min-height: calc(100vh - 150px);
    padding-block: 38px;
  }

  .access-card {
    padding: 32px 20px 38px;
  }

  .access-card .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .access-card .actions .button {
    width: 100%;
  }
}