:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #111827; background: #F8FAFC; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: #F8FAFC; }
.skyline { position: absolute; width: 100%; height: 42%; bottom: 0; object-fit: cover; object-position: center bottom; opacity: .13; z-index: -1; pointer-events: none; }
main { min-height: 650px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 24px 80px; text-align: center; }
.logo { display: block; width: 420px; max-width: 100%; height: auto; margin: 0 0 64px; }
.accent { width: 36px; height: 3px; background: #FF6B4A; margin-bottom: 28px; }
h1 { font-size: 64px; line-height: 1.1; font-weight: 500; letter-spacing: 0; margin: 0; }
footer { padding: 24px 24px 32px; text-align: center; font-size: 12px; line-height: 1.8; color: #5E6673; }
footer p { margin: 0; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: #111827; text-decoration: underline; }
a:focus-visible { outline: 2px solid #E85A3C; outline-offset: 4px; }
.not-found h1 { font-size: 36px; max-width: 640px; }
.not-found > a { max-width: 100%; }
.not-found p { margin: 28px 0 0; }
.not-found p a { color: #111827; text-underline-offset: 4px; }
@media (max-width: 600px) {
  main { min-height: 500px; padding: 80px 28px 60px; }
  .logo { width: 300px; margin-bottom: 48px; }
  h1 { font-size: 42px; line-height: 1.15; }
  .not-found h1 { font-size: 28px; }
  .skyline { height: 34%; object-position: 60% bottom; }
  footer { padding-bottom: 24px; }
}
@media (max-height: 700px) and (min-width: 601px) { main { min-height: 450px; padding-top: 60px; padding-bottom: 60px; } }