.login-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: .65rem .85rem;
  transform: translateY(-180%);
  border: 2px solid var(--ink);
  color: var(--paper-raised);
  background: var(--blue);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.login-topbar { position: relative; }
.access-label {
  min-height: 2rem;
  padding: .35rem .7rem;
  display: inline-flex;
  align-items: center;
  border: 1.5px dashed var(--line);
  color: var(--ink-soft);
  background: var(--paper-raised);
  font-size: .75rem;
  font-weight: 750;
}
.access-label i,
.login-footnote i,
.login-facts dd i {
  width: .48rem;
  height: .48rem;
  display: inline-block;
  margin-right: .45rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--green);
}

.login-shell {
  width: min(78rem, 100%);
  margin: auto;
  padding: clamp(2rem, 7vw, 6.5rem) clamp(1rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .72fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.login-story {
  max-width: 43rem;
  animation: login-rise 560ms cubic-bezier(.22, 1, .36, 1) both;
}
.login-kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--blue);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .14em;
}
.login-kicker span {
  padding: .34rem .54rem;
  border: 1.5px solid currentColor;
  border-radius: 48% 52% 43% 57%;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.login-story h1 {
  margin: 1.15rem 0 1.1rem -.05em;
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: .92;
  letter-spacing: -.065em;
}
.login-story h1 em {
  position: relative;
  display: inline-block;
  color: var(--ink);
  font-style: normal;
}
.login-story h1 em::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.12em;
  bottom: -.02em;
  z-index: -1;
  height: .17em;
  transform: rotate(-1.4deg);
  background: var(--marker);
}
.login-story > p {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}

.route-note {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: 1rem 0;
  display: grid;
  grid-template-columns: minmax(3rem, 1fr) auto auto;
  gap: .9rem;
  align-items: center;
  border-block: 1.5px dashed var(--line);
}
.route-line { height: 2px; background: var(--blue); }
.route-note small,
.route-note strong { display: block; }
.route-note small {
  color: var(--ink-soft);
  font: 700 .66rem/1.5 var(--font-mono);
  letter-spacing: .12em;
}
.route-note strong { margin-top: .18rem; font-size: .78rem; }
.route-note > b {
  padding: .38rem .52rem;
  border: 1.5px solid var(--green);
  color: var(--green);
  font: 800 .66rem var(--font-mono);
}

.login-facts {
  margin: 1.2rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
}
.login-facts div {
  padding: .7rem .8rem;
  border: 1.5px dashed var(--line);
  background: var(--paper-muted);
}
.login-facts dt {
  color: var(--ink-soft);
  font: 750 .62rem/1.4 var(--font-mono);
  letter-spacing: .1em;
}
.login-facts dd { margin: .22rem 0 0; font-size: .78rem; font-weight: 800; }

.login-desk {
  position: relative;
  animation: login-rise 620ms 70ms cubic-bezier(.22, 1, .36, 1) both;
}
.login-desk::before {
  content: "";
  position: absolute;
  width: 6rem;
  height: 1.3rem;
  left: 16%;
  top: -.65rem;
  z-index: 2;
  transform: rotate(-3deg);
  border: 1px solid oklch(76% 0.08 80 / .5);
  background: oklch(88% .1 82 / .78);
}
.login-panel {
  position: relative;
  padding: clamp(1.35rem, 4vw, 2.2rem);
  border: 2px solid var(--ink);
  border-radius: .65rem 1.15rem .72rem 1rem;
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.login-stamp {
  position: absolute;
  right: -1.2rem;
  top: -2rem;
  z-index: 3;
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  transform: rotate(8deg);
  border: 2px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
  background: var(--paper-raised);
  font: 850 .68rem/1.15 var(--font-mono);
  text-align: center;
  letter-spacing: .08em;
}
.login-heading {
  margin-bottom: 1.8rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.login-heading p { margin: 0 0 .15rem; color: var(--ink-soft); font: 700 .65rem var(--font-mono); letter-spacing: .12em; }
.login-heading h2 { margin: 0; font-size: 1.45rem; line-height: 1.15; }
.login-field { margin-bottom: 1.2rem; }

.password-control { position: relative; display: block; }
.password-control input { padding-right: 4.6rem; }
.password-control button {
  position: absolute;
  right: .42rem;
  top: 50%;
  min-width: 3.45rem;
  min-height: 2.15rem;
  transform: translateY(-50%);
  border: 0;
  border-left: 1.5px dashed var(--line);
  color: var(--blue);
  background: transparent;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}
.password-control button:active { transform: translateY(-48%); }

.login-message {
  margin: -.35rem 0 1.2rem;
  padding: .75rem .85rem;
  border: 1.5px solid var(--red);
  color: var(--red);
  background: color-mix(in oklch, var(--paper-raised) 88%, var(--red));
  font-size: .8rem;
  line-height: 1.55;
}
.login-message.success {
  border-color: var(--green);
  color: var(--green);
  background: color-mix(in oklch, var(--paper-raised) 90%, var(--green));
}
.login-help { margin: -.15rem 0 1.35rem; color: var(--ink-soft); font-size: .76rem; }
.login-button { width: 100%; justify-content: space-between; }
.login-button b { font: 900 1.15rem var(--font-mono); }
.login-button.is-loading { cursor: wait; opacity: .72; box-shadow: none; transform: translate(2px, 2px); }

.login-footnote {
  margin-top: 1.35rem;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  border-top: 1.5px dashed var(--line);
  color: var(--ink-soft);
  font-size: .68rem;
}
.login-footnote span { color: var(--green); font-weight: 800; }
.login-footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }

@keyframes login-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 58rem) {
  .login-shell { grid-template-columns: 1fr; gap: 3.5rem; }
  .login-story { max-width: 48rem; }
  .login-story h1 { font-size: clamp(3.2rem, 12vw, 6rem); }
  .login-desk { width: min(32rem, 100%); }
}

@media (max-width: 38rem) {
  .login-shell { padding: 2.4rem .8rem 3.5rem; gap: 2.8rem; }
  .access-label { display: none; }
  .login-story h1 { font-size: clamp(2.8rem, 15vw, 4.5rem); }
  .login-facts { grid-template-columns: 1fr; }
  .route-note { grid-template-columns: 2rem 1fr auto; }
  .login-stamp { right: .7rem; top: -2.5rem; }
  .login-footnote { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .login-story, .login-desk { animation: none; }
}