:root {
  color: #f3ead9;
  background: #080d0d;
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-synthesis: none;
  --paper: #f3ead9;
  --muted: #e0e4e1;
  --brick: #d65736;
  --sandstone: #c99f64;
  --roof-blue: #16728f;
  --night: #080d0d;
  --line: rgb(243 234 217 / 0.2);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--night);
}

a {
  color: inherit;
}

.login-canvas {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100dvh;
  grid-template-areas:
    'header header'
    '. sign-in'
    'footer footer';
  grid-template-columns: minmax(0, 1fr) minmax(28rem, 36rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 4vw, 5rem);
  overflow: hidden;
  padding: clamp(1.35rem, 3.2vw, 3.5rem) clamp(1.35rem, 4.5vw, 5rem) clamp(1.2rem, 2.8vw, 2.8rem);
  background:
    radial-gradient(circle at 21% 58%, rgb(202 55 32 / 0.2), transparent 34rem),
    linear-gradient(110deg, #130c0a 0%, #091211 52%, #050909 100%);
}

.scene {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  animation: scene-enter 1.4s cubic-bezier(0.2, 0.78, 0.22, 1) both;
}

.scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.login-canvas::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgb(6 11 11 / 0.12) 0 34%,
      rgb(6 11 11 / 0.7) 56%,
      rgb(6 11 11 / 0.98) 80%
    ),
    linear-gradient(180deg, rgb(5 9 9 / 0.2), transparent 28%, rgb(5 9 9 / 0.68)),
    repeating-linear-gradient(0deg, transparent 0 43px, rgb(243 234 217 / 0.025) 44px);
  content: '';
}

.site-header,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-header {
  grid-area: header;
  animation: content-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-lockup span {
  display: grid;
  gap: 0.2rem;
}

.brand-lockup strong {
  color: var(--paper);
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  font-weight: 780;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.9);
}

.brand-lockup small,
.access-status,
.eyebrow,
footer {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.brand-lockup small {
  color: #d3d8d5;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.access-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: #e1e5e2;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.92);
}

.access-status span {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #7dd09a;
  box-shadow: 0 0 0 0.28rem rgb(125 208 154 / 0.12);
}

.sign-in {
  grid-area: sign-in;
  position: relative;
  z-index: 0;
  align-self: center;
  justify-self: stretch;
  width: min(100%, 36rem);
  margin: clamp(2rem, 5vh, 4rem) 0;
  padding: 0;
  animation: content-enter 680ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
}

.sign-in::before {
  position: absolute;
  z-index: -1;
  inset: -4rem -4rem -3rem -5rem;
  background: radial-gradient(
    ellipse at 60% 50%,
    rgb(5 10 10 / 0.88) 0%,
    rgb(5 10 10 / 0.7) 44%,
    transparent 75%
  );
  content: '';
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--sandstone);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sign-in h1 {
  max-width: 10ch;
  margin: 0;
  color: var(--paper);
  font-size: clamp(4rem, 6.5vw, 6.7rem);
  font-weight: 760;
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-shadow: 0 4px 28px rgb(0 0 0 / 0.85);
  text-wrap: balance;
}

.intro {
  max-width: 31rem;
  margin: 1.75rem 0 2rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.62;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.95);
}

.primary-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.4rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: #101615;
  font-size: 0.98rem;
  font-weight: 760;
  text-decoration: none;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.primary-action svg {
  width: 1.45rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.primary-action:hover {
  transform: translateY(-2px);
  border-color: #fff7ea;
  background: #fff7ea;
}

.primary-action:hover svg {
  transform: translateX(0.28rem);
}

.primary-action:focus-visible {
  outline: 3px solid var(--sandstone);
  outline-offset: 4px;
}

.security-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
  color: #d8ddda;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.98);
}

.security-note svg {
  width: 1.25rem;
  margin-top: 0.14rem;
  fill: none;
  stroke: var(--sandstone);
  stroke-width: 1.7;
}

.security-note p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.62;
}

footer {
  grid-area: footer;
  color: #d8ddda;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  animation: content-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) 420ms both;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.98);
}

footer p {
  margin: 0;
}

.capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem;
}

.capabilities span + span::before {
  margin-right: 0.72rem;
  color: var(--brick);
  content: '•';
}

@keyframes scene-enter {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@keyframes content-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (max-width: 960px) {
  .login-canvas {
    min-height: 100svh;
    grid-template-areas:
      'header'
      'scene'
      'sign-in'
      'footer';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 0;
    padding: 1.25rem;
    background:
      radial-gradient(circle at 25% 24%, rgb(202 55 32 / 0.22), transparent 22rem),
      linear-gradient(180deg, #120c0b 0%, #08100f 52%, #050909 100%);
  }

  .scene {
    display: none;
  }

  .login-canvas::before {
    background:
      linear-gradient(180deg, transparent 0 28%, rgb(5 9 9 / 0.32) 48%, #080d0d 72%),
      repeating-linear-gradient(0deg, transparent 0 38px, rgb(243 234 217 / 0.02) 39px);
  }

  .access-status {
    display: none;
  }

  .sign-in {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    margin: clamp(4rem, 11vh, 7rem) 0 2.5rem;
    padding: 0;
  }

  .sign-in::before {
    display: none;
  }

  .sign-in h1 {
    font-size: clamp(3.5rem, 18vw, 5.25rem);
  }

  .intro {
    margin: 1.25rem 0 1.5rem;
    font-size: 0.98rem;
  }

  footer {
    align-items: flex-start;
  }

  footer p {
    display: none;
  }
}

@media (max-width: 430px) {
  .brand-lockup small {
    font-size: 0.52rem;
  }

  .capabilities {
    gap: 0.45rem;
  }

  .capabilities span + span::before {
    margin-right: 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}