@font-face {
  font-family: "Instrument Sans";
  src: url("/access-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #20483f;
  --paper: #f6f7f2;
  --muted: #5d7265;
  --line: #d5ddd0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: clamp(28px, 6vw, 88px);
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 "Instrument Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.access-panel {
  width: min(100%, 680px);
  margin-inline: auto;
  padding-block: 36px 44px;
  border-top: 1px solid var(--line);
}

p, h1 { margin: 0; }

.identity-label {
  margin-bottom: 44px;
  font-size: 14px;
}

h1 {
  max-width: 12ch;
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

#access-message {
  max-width: 39ch;
  margin-top: 24px;
  color: var(--muted);
}

button {
  display: inline-block;
  min-height: 48px;
  margin-top: 28px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}

button[hidden] { display: none; }
button:disabled { cursor: wait; }
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.no-script { margin-top: 28px; max-width: 42ch; font-size: 15px; }
::selection { background: var(--ink); color: var(--paper); }

@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
}

@media (max-width: 480px) {
  body { align-items: start; padding-top: max(70px, 17dvh); }
  .identity-label { margin-bottom: 36px; }
  #access-message { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}