@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/alegreya-medium-italic.ttf") format("truetype");
}

@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/alegreya-sans-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/alegreya-sans-medium.ttf") format("truetype");
}

:root {
  --forest: #002731;
  --forest-soft: #687a5d;
  --sage: #687a5d;
  --cream: #eee5a5;
  --paper: #fffdf8;
  --earth: #ee7d00;
  --sunflower: #faba20;
  --ink: #002731;
  --muted: #59685d;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: "Alegreya Sans", "Gill Sans", "Trebuchet MS", Arial, sans-serif; }
.login-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at 76% 24%, rgba(255,253,248,.88) 0 4%, transparent 4.2%),
    radial-gradient(circle at 76% 24%, transparent 0 13%, rgba(255,255,255,.26) 13.2% 13.5%, transparent 13.7%),
    linear-gradient(135deg, #eee5a5 0%, #687a5d 52%, #002731 100%);
}
.login-shell { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: 32px 20px; }
.login-shell::before,
.login-shell::after { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; pointer-events: none; }
.login-shell::before { width: 35vw; min-width: 340px; aspect-ratio: 1; top: -15vw; left: -8vw; }
.login-shell::after { width: 24vw; min-width: 260px; aspect-ratio: 1; right: -8vw; bottom: -10vw; }
.login-card {
  position: relative; z-index: 1; width: min(470px, 100%); padding: 44px;
  border: 1px solid rgba(255,255,255,.68); border-radius: 32px;
  background: rgba(255,253,248,.94); box-shadow: 0 35px 90px rgba(23,63,53,.30);
  backdrop-filter: blur(18px); animation: card-in .65s cubic-bezier(.2,.8,.2,1) both;
}
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 30px; color: var(--forest); font-size: 12px; letter-spacing: .16em; }
.login-brand img { width: 106px; height: 128px; object-fit: contain; }
.login-kicker { margin: 0 0 13px; color: var(--forest-soft); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
h1 { margin: 0 0 14px; font-family: "Alegreya", Georgia, serif; font-size: clamp(40px, 7vw, 54px); font-style: italic; font-weight: 500; letter-spacing: -.025em; line-height: .98; text-align: center; }
.login-copy { max-width: 350px; margin: 0 auto 30px; color: var(--muted); font-size: 14px; line-height: 1.65; text-align: center; }
.login-error { margin-bottom: 20px; padding: 13px 15px; border: 1px solid rgba(145,69,47,.2); border-radius: 14px; background: rgba(201,140,83,.12); color: #7d3e2e; font-size: 13px; font-weight: 700; text-align: center; }
.login-form { display: grid; gap: 11px; }
.login-form label { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.login-form input { width: 100%; height: 55px; padding: 0 17px; border: 1px solid rgba(36,53,46,.18); border-radius: 16px; outline: none; background: #fff; color: var(--ink); font-size: 18px; transition: border-color .2s, box-shadow .2s; }
.login-form input:focus { border-color: var(--forest); box-shadow: 0 0 0 4px rgba(23,63,53,.11); }
.login-form button { display: flex; height: 55px; align-items: center; justify-content: center; gap: 12px; margin-top: 7px; border: 1px solid var(--forest); border-radius: 999px; color: #fff; background: var(--forest); box-shadow: 0 13px 30px rgba(0,39,49,.2); cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: transform .25s, background .25s, box-shadow .25s; }
.login-form button:hover { color: #fff; background: var(--sage); box-shadow: 0 18px 36px rgba(0,39,49,.25); transform: translateY(-3px); }
.login-note { margin: 25px 0 0; color: #8b958f; font-size: 10px; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 520px) { .login-card { padding: 35px 22px; border-radius: 25px; } .login-brand { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }