:root { color-scheme: dark; background: #164b38; color: #edc867; font-family: Georgia, 'Times New Roman', serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100svh; }
header { position: absolute; inset: 0 0 auto; padding: max(24px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 0; }
nav { display: flex; justify-content: flex-end; }
.login { display: inline-flex; align-items: center; gap: 20px; min-height: 46px; padding: 10px 22px; border: 1px solid #edc867; border-radius: 5px; color: #ffe096; font: 600 15px/1.4 system-ui, sans-serif; text-decoration: none; }
.login:hover { background: #edc867; color: #164b38; }
.login:focus-visible { outline: 3px solid #fff3c8; outline-offset: 5px; }
main { min-height: 100svh; display: grid; place-items: center; padding: 110px 28px; }
.brand { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 0; font-size: clamp(52px, 6.8vw, 108px); font-weight: 400; line-height: 1.15; letter-spacing: .035em; }
.brand img { width: clamp(110px, 15vw, 192px); height: auto; }
.brand span { white-space: nowrap; }
@media (max-width: 600px) {
  header { padding-right: max(20px, env(safe-area-inset-right)); padding-top: max(20px, env(safe-area-inset-top)); }
  main { padding-inline: 20px; }
  .brand { flex-direction: column; gap: 14px; font-size: clamp(42px, 11vw, 64px); }
  .brand img { width: 156px; }
}