@font-face {
  font-family: "Gotham Local";
  src: local("Gotham Book"), local("Gotham-Book"), local("Gotham");
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: dark; font-family: "Gotham Local", "Gotham", "Montserrat", "Avenir Next", Avenir, Arial, sans-serif; background: #111; color: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; }
.landing { isolation: isolate; position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 100svh; min-height: 100vh; overflow: hidden; }
@supports (height: 100svh) { .landing { min-height: 100svh; } }
.villa, .shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.villa { object-fit: cover; object-position: 58% 50%; }
.shade { z-index: -1; background: linear-gradient(180deg, rgba(4,6,7,.52), rgba(4,6,7,.48) 38%, rgba(4,6,7,.64) 74%, rgba(4,6,7,.88)); }
.identity { align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; padding: 96px 24px 36px; animation: arrive 1.4s ease-out both; }
.logo { display: block; width: clamp(228px, 28vw, 430px); height: auto; overflow: hidden; mix-blend-mode: screen; }
h1 { margin: 48px 0 0; padding-left: .44em; font-size: 12px; line-height: 1.6; font-weight: 400; letter-spacing: .44em; }
footer { padding: 32px 24px max(42px, env(safe-area-inset-bottom)); text-align: center; animation: arrive 1.6s ease-out both; }
a { display: inline-flex; align-items: center; min-height: 44px; color: #eee; font-size: 12px; font-weight: 400; letter-spacing: .13em; text-decoration: none; position: relative; transition: color .25s ease; }
a::after { content: ""; position: absolute; left: 0; right: .13em; bottom: 7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
a:hover { color: white; }
a:hover::after, a:focus-visible::after { transform: scaleX(1); }
a:focus-visible { outline: 1px solid #fff; outline-offset: 7px; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .villa { object-position: 64% 50%; }
  .logo { width: clamp(210px, 65vw, 300px); }
  .identity { padding-top: 80px; }
  h1 { margin-top: 34px; font-size: 10px; letter-spacing: .38em; }
  footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  a { font-size: 11px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .identity { padding: 32px 24px 0; }
  .logo { width: 180px; }
  h1 { margin-top: 18px; font-size: 10px; }
  footer { padding: 12px 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }