:root {
  --ink: #081F2A;
  --hull: #0E4A5D;
  --sea: #6EC6CF;
  --cream: #F5F1E8;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink); color: var(--cream);
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: center;
}
main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 16px; max-width: 520px;
}
.mark { width: 96px; height: 96px; object-fit: contain; }
h1 {
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: 44px; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 20px 0 12px;
}
.lede { font-size: 16px; line-height: 1.6; color: rgba(245,241,232,0.78); margin: 0 0 32px; }
.signin {
  display: inline-block; background: var(--sea); color: var(--ink);
  font-weight: 700; font-size: 15px; text-decoration: none;
  padding: 13px 34px; border-radius: 10px;
}
.signin:hover, .signin:focus-visible { background: #8fd6dd; }
.signin:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
footer {
  padding: 20px 16px; font-size: 12px; color: rgba(245,241,232,0.45);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.contact {
  color: var(--cream); text-decoration: none; font-weight: 600; font-size: 13px;
  border: 1px solid rgba(245,241,232,0.35); border-radius: 8px; padding: 8px 18px;
}
.contact:hover, .contact:focus-visible { border-color: var(--sea); color: var(--sea); }
.contact:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }