.access-screen {
  min-height: calc(var(--size-viewport-height) - var(--layout-workspace-bar) - var(--size-control));
  padding: var(--space-12);
  background:
    linear-gradient(var(--color-overlay), var(--color-overlay)),
    repeating-linear-gradient(
      to right,
      transparent,
      transparent var(--space-12),
      var(--color-ink-700) var(--space-12),
      var(--color-ink-700) calc(var(--space-12) + var(--border-thin))
    ),
    var(--color-ink-900);
}

body:has(.access-screen:target) .app-shell {
  grid-template-columns: var(--grid-one);
}

body:has(.access-screen:target) .app-sidebar,
body:has(.access-screen:target) .workspace-bar {
  display: none;
}

body:has(.access-screen:target) .access-screen {
  min-height: calc(var(--size-viewport-height) - var(--size-control));
}

.access-screen__layout {
  display: grid;
  grid-template-columns: var(--grid-two);
  gap: var(--space-16);
  align-items: center;
  width: min(var(--size-full), var(--layout-content-max));
  min-height: calc(var(--size-viewport-height) - var(--layout-workspace-bar) - var(--size-control) - var(--space-24));
  margin: var(--space-0) auto;
}

.access-screen__statement {
  max-width: var(--layout-reading-max);
  color: var(--color-paper);
}

.access-screen__statement h1 {
  max-width: var(--layout-reading-max);
  color: var(--color-paper);
  font-size: var(--font-size-hero);
}

.access-screen__statement p {
  max-width: var(--layout-access-card);
  color: var(--color-slate-200);
  font-size: var(--font-size-lg);
}

.access-screen__trace {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.access-screen__switcher {
  margin-top: var(--space-5);
}

@media (max-width: 52rem) {
  .access-screen {
    padding: var(--space-6) var(--space-4);
  }

  .access-screen__layout {
    grid-template-columns: var(--grid-one);
    gap: var(--space-8);
    min-height: auto;
  }

  .access-screen__statement h1 {
    font-size: var(--font-size-3xl);
  }
}