/* Colours and type from the Keeps Design System tokens (tokens/colors.css). */
@font-face { font-family: 'Neue Faktum'; font-weight: 500; font-display: swap; src: url(fonts/NeueFaktum-500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(fonts/Inter-400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url(fonts/Inter-500.woff2) format('woff2'); }

:root {
  --orange: #FF532D;
  --orange-hover: #E64B28;
  --navy: #0D0441;
  --cream: #FFF9EE;
  --grey-100: #EFECE5;
  --grey-300: #D7D4CE;
  --grey-600: #6C6A67;
  --down: #BF3E21;
}

* { box-sizing: border-box; }

/* The photograph is the page: it always covers, never stretches. The navy gradient over it keeps
   the white card legible whatever the crop lands on, and gives the Keeps mark and the footer line
   something dark to sit against. Navy stays underneath as the fallback if the image is slow. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: stretch center;
  padding: 32px 16px;
  padding-top: max(32px, env(safe-area-inset-top));
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  background: var(--navy) url(bg.jpg) center 42% / cover no-repeat fixed;
  color: var(--navy);
  font: 400 16px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,4,65,.58) 0%, rgba(13,4,65,.30) 38%, rgba(13,4,65,.74) 100%);
  pointer-events: none;
}

/* Three rows of equal outer height put the CARD on the viewport's centre line, not the stack.
   Centring the stack instead leaves the card low, because the logo above it is heavier than the
   footer below: 34.8 + 32 of margin against 19.5 + 22, a 25.3px difference that pushes the card
   12.65px under centre. With 1fr above and 1fr below, the card is centred whatever they weigh. */
main {
  position: relative; width: 100%; max-width: 420px;
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
}

/* The mark is drawn tight to its box, but the registered symbol sits out at 1425-1495 of 1495,
   so the wordmark's own centre is 35 units left of the file's. That is 2.34% of the width, which
   reads as the logo sitting slightly left. Nudging by the same percentage scales with the size. */
.logo {
  display: block; width: 132px; align-self: end; margin: 0 0 32px;
  transform: translateX(2.34%);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

form {
  width: 100%;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 36px 32px 32px;
  box-shadow: 0 30px 70px -18px rgba(5,10,30,.60), 0 2px 8px rgba(5,10,30,.22);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--orange);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 8px;
  font: 500 30px/1.15 'Neue Faktum', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.lede { margin: 0 0 28px; color: var(--grey-600); }

label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; }

input[type=password] {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--grey-300);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 16px;               /* anything under 16px makes iOS zoom the page on focus */
}

input[type=password]:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
input[aria-invalid=true] { border-color: var(--down); }

.error { margin: 8px 0 0; color: var(--down); font-size: 14px; }

button {
  width: 100%;
  margin-top: 24px;
  padding: 14px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font: 500 16px 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s;
}

button:hover { background: var(--orange-hover); }
button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

.foot {
  align-self: start;
  width: 100%;
  margin: 22px 0 0;
  text-align: center;
  color: var(--cream);
  opacity: .82;
  font-size: 13px;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* Phones: the photograph stops being fixed, which iOS renders badly and repaints on every scroll.
   The card takes the width it can and the type steps down a little. */
@media (max-width: 560px) {
  body { background-attachment: scroll; padding: 24px 14px; }
  .logo { width: 112px; margin-bottom: 24px; }
  form { padding: 30px 22px 26px; border-radius: 18px; }
  h1 { font-size: 25px; }
  .lede { margin-bottom: 22px; font-size: 15px; }
  .foot { font-size: 12px; }
}

/* A phone held sideways, or a short window: the logo must not push the button off the screen. */
@media (max-height: 560px) {
  body { place-items: stretch center; }
  main { grid-template-rows: auto auto 1fr; padding-top: 18px; }
  .logo { width: 96px; margin-bottom: 16px; }
  form { padding: 24px 22px 22px; }
  h1 { font-size: 22px; }
  .lede { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}