:root {
  --cyan: #1CABE2;
  --navy: #374EA2;
  --yellow: #FFC20E;
  --ink: #0B2B3C;
  --paper: #F2F8FC;
  --white: #fff;
  --line: #D6E6F0;
  --muted: #5A7183;
  --sans: "Roboto", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Roboto Condensed", "Roboto", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.mast {
  min-height: 58px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  background: var(--cyan);
  color: var(--white);
  box-shadow: 0 2px 10px rgb(11 43 60 / 18%);
}

.logo-slot {
  height: 38px;
  padding: 3px 11px;
  display: flex;
  align-items: center;
  border: 1.5px dashed rgb(255 255 255 / 55%);
  border-radius: 4px;
}

.wordmark {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.wordmark small {
  display: block;
  margin-top: 1px;
  font: 400 9.5px/1 var(--cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.access-page {
  min-height: calc(100vh - 58px);
  display: grid;
  grid-template-columns: minmax(330px, 0.88fr) minmax(430px, 1.18fr);
}

.access-panel {
  padding: clamp(40px, 9vh, 120px) clamp(28px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  border-right: 1px solid var(--line);
}

.eyebrow {
  margin: 0;
  color: var(--cyan);
  font: 700 11px/1.3 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  max-width: 12ch;
  margin: 16px 0 0;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.rule {
  width: 56px;
  height: 4px;
  margin: 28px 0;
  background: var(--yellow);
}

.access-panel p:not(.eyebrow) { max-width: 42ch; margin: 0; }

.login-form {
  width: min(100%, 400px);
  margin-top: 30px;
}

.login-form label {
  display: block;
  margin: 0 0 7px;
  color: var(--muted);
  font: 700 11px/1.3 var(--cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  min-height: 44px;
  margin: 0 0 18px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  font: inherit;
}

.login-form input:focus {
  border-color: var(--cyan);
  outline: 2px solid rgb(28 171 226 / 20%);
  outline-offset: 1px;
}

.login-form button {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  background: var(--cyan);
  color: var(--white);
  cursor: pointer;
  font: 700 13px/1 var(--cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-form button:hover:not(:disabled) { background: #1298ce; }
.login-form button:disabled { cursor: wait; opacity: 0.7; }

.form-error {
  margin: -2px 0 16px !important;
  color: #C91D16;
  font-size: 14px;
}

.context-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(115% 85% at 74% 6%, #E4F3FA 0%, var(--paper) 64%);
}

.grid {
  position: absolute;
  inset: 10% -14% -12% 8%;
  background-image:
    linear-gradient(rgb(28 171 226 / 15%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(28 171 226 / 15%) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotate(-12deg);
}

.marker {
  position: absolute;
  border-radius: 50%;
  border: 10px solid var(--white);
  background: var(--cyan);
  box-shadow: 0 8px 24px rgb(11 43 60 / 18%);
}

.marker-one { width: 150px; height: 150px; top: 22%; left: 24%; }
.marker-two { width: 84px; height: 84px; top: 54%; right: 21%; background: var(--navy); }
.marker-three { width: 52px; height: 52px; bottom: 18%; left: 42%; background: var(--yellow); }

@media (max-width: 720px) {
  .access-page { display: block; }
  .access-panel { min-height: calc(100vh - 58px); }
  .context-panel { display: none; }
}