@font-face {
  font-family: "Apercu Pro";
  src: url("/assets/fonts/ApercuPro-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Apercu Pro";
  src: url("/assets/fonts/ApercuPro-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: #11110f;
  color: #11110f;
  font-family: "Apercu Pro", "Helvetica Neue", sans-serif;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    #11110f;
  background-size: 38px 38px;
}

.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 20px;
}

.login-panel {
  width: min(100%, 560px);
  padding: clamp(26px, 8vw, 58px);
  background: #f4f3ee;
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
}

.brand,
.eyebrow {
  margin: 0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.eyebrow {
  margin-top: 28px;
  color: #6b6962;
}

h1 {
  max-width: 460px;
  margin: 7px 0 0;
  font-size: clamp(2.1rem, 9vw, 4.5rem);
  line-height: .93;
  letter-spacing: -.055em;
}

.intro,
.privacy {
  color: #6b6962;
}

.intro {
  max-width: 390px;
  margin: 20px 0 28px;
}

.privacy {
  margin: 20px 0 0;
  font-size: .72rem;
}

.login-alert {
  padding: 10px 12px;
  border-left: 4px solid #a34d2f;
  background: #f2e4de;
  color: #7e351f;
}

form {
  display: grid;
  gap: 8px;
}

label {
  margin-top: 4px;
  color: #6b6962;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

input,
button {
  width: 100%;
  min-height: 54px;
  border-radius: 0;
  font: inherit;
}

input {
  padding: 12px 14px;
  border: 1px solid #aaa79d;
  background: #fff;
}

button {
  margin-top: 7px;
  border: 1px solid #11110f;
  background: #11110f;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

input:focus-visible,
button:focus-visible {
  outline: 3px solid #1769aa;
  outline-offset: 3px;
}