:root {
  color-scheme: dark;
  --landing-gold: #e6c582;
  --landing-cream: #fff8e8;
  --landing-deep: #091510;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; }

.landing-page {
  min-height: 100svh;
  overflow: hidden;
  color: var(--landing-cream);
  background: var(--landing-deep);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.landing-stage {
  position: relative;
  display: grid;
  place-items: end center;
  isolation: isolate;
  min-height: 100svh;
  padding: clamp(28px, 5vh, 62px) 24px max(clamp(34px, 7vh, 78px), env(safe-area-inset-bottom));
  background-color: var(--landing-deep);
  background-image: url('/assets/west-side-bridge-landing.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.landing-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(3, 10, 8, .04) 0%, rgba(3, 10, 8, .02) 48%, rgba(3, 10, 8, .46) 100%),
    linear-gradient(to right, rgba(3, 10, 8, .10), transparent 45%, rgba(3, 10, 8, .03));
}

.landing-entry {
  display: grid;
  justify-items: center;
  gap: 13px;
  width: min(100%, 430px);
  text-align: center;
  animation: landing-rise .7s cubic-bezier(.2,.78,.25,1) both;
}

.landing-entry p {
  margin: 0;
  color: rgba(255, 248, 232, .86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.25vw, 17px);
  letter-spacing: .08em;
  text-shadow: 0 2px 18px rgba(0,0,0,.82);
}

.landing-enter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 178px;
  min-height: 58px;
  padding: 14px 29px;
  color: #152119;
  border: 1px solid rgba(255, 247, 224, .86);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 250, 238, .98), rgba(226, 195, 132, .96));
  box-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.8);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.landing-enter-button svg { width: 22px; height: 22px; }
.landing-enter-button:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
  box-shadow: 0 20px 52px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.9);
}
.landing-enter-button:active { transform: translateY(-1px); }
.landing-enter-button:focus-visible { outline: 3px solid white; outline-offset: 5px; }

.landing-noscript {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 10;
  padding: 14px;
  border-radius: 12px;
  background: #101d17;
  text-align: center;
}
.landing-noscript a { color: white; }

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .landing-page { overflow: auto; }
  .landing-stage {
    min-height: 100svh;
    padding: 0 20px max(38px, calc(env(safe-area-inset-bottom) + 24px));
    background-image: url('/assets/west-side-bridge-landing-mobile.jpg');
    background-position: center center;
    background-size: cover;
  }
  .landing-overlay {
    background: linear-gradient(to bottom, rgba(4,11,8,.02) 0%, rgba(4,11,8,.04) 39%, rgba(4,11,8,.38) 67%, rgba(4,11,8,.78) 100%);
  }
  .landing-entry { gap: 11px; }
  .landing-enter-button {
    min-width: 174px;
    min-height: 56px;
    padding: 13px 26px;
    font-size: 20px;
  }
  .landing-entry p { max-width: 310px; font-size: 13px; line-height: 1.4; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .landing-stage { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .landing-entry { gap: 7px; }
  .landing-enter-button { min-height: 48px; padding-block: 9px; }
  .landing-entry p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-entry { animation: none; }
  .landing-enter-button { transition: none; }
}