/* Lighthouse Observatory — deliberately static, without external dependencies. */
:root {
  color-scheme: dark;
  background: #030b12;
  color: #f3f6fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 240px; min-height: 100%; }
body { background: #030b12; }
.observatory {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 240px;
  overflow: hidden;
  background: #030b12;
}
.scene { position: absolute; inset: 0; z-index: 2; display: block; }
.scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* On desktop the accessible HTML heading sits beneath the approved image,
   which already contains the wordmark. It is also the image-failure fallback.
   On portrait displays it moves above the clean cropped image. */
.identity {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46.7%;
  transform: translate(-50%, -50%);
  width: calc(100% - 3rem);
  margin: 0;
  text-align: center;
  font-weight: 300;
}
.identity__name, .identity__descriptor { display: block; }
.identity__name {
  color: #f4f7fa;
  font-size: clamp(1.25rem, 2.8vw, 3rem);
  line-height: 1.4;
  letter-spacing: .45em;
  text-indent: .45em;
  text-transform: uppercase;
  font-weight: 300;
}
.identity__descriptor {
  margin-top: .55rem;
  color: #a4c2d5;
  font-size: clamp(.65rem, 1.35vw, 1.4rem);
  line-height: 1.6;
  letter-spacing: .65em;
  text-indent: .65em;
  text-transform: uppercase;
  font-weight: 300;
}
.identity::after {
  content: "";
  display: block;
  width: clamp(3.5rem, 6vw, 6rem);
  height: 1px;
  margin: clamp(1.5rem, 3.4vh, 3rem) auto 0;
  background: linear-gradient(90deg, transparent, #90a7b8 35%, #90a7b8 65%, transparent);
  opacity: .65;
}
.shade { display: none; }
/* Keep the complete composition rather than severing the beacon on very
   wide or short screens. The surrounding matte matches the night sky. */
@media (min-aspect-ratio: 12/5) {
  .scene img { object-fit: contain; }
}
/* Same artwork, art-directed for phones and portrait tablets. */
@media (max-aspect-ratio: 6/5) {
  .scene img { object-position: 20% 35%; }
  .shade {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 44%, rgba(3, 11, 18, .10) 53%, rgba(3, 11, 18, .45) 69%, rgba(3, 11, 18, .26) 84%, transparent);
  }
  .identity {
    z-index: 4;
    top: 70%;
    width: calc(100% - 2.5rem);
    text-shadow: 0 2px 22px rgba(0, 0, 0, .9);
  }
  .identity__name {
    font-size: clamp(1.125rem, 6.4vw, 2.75rem);
    letter-spacing: .3em;
    text-indent: .3em;
  }
  .identity__descriptor {
    font-size: clamp(.65rem, 3vw, 1.05rem);
    letter-spacing: .5em;
    text-indent: .5em;
    margin-top: .6rem;
  }
  .identity::after { width: 4rem; margin-top: 1.7rem; }
}
@media (max-aspect-ratio: 6/5) and (min-width: 600px) {
  .identity { top: 78%; }
}
/* Static by design: no animation, autoplay, pointer effects, or flashing. */
@media (forced-colors: active) {
  .scene, .shade { display: none; }
  .identity { z-index: 4; top: 50%; }
  .identity__name, .identity__descriptor { color: CanvasText; }
  .identity::after { background: CanvasText; }
}
.not-found {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}
.not-found h1 {
  font-size: clamp(1.1rem, 4vw, 1.7rem);
  font-weight: 300;
  letter-spacing: .12em;
  line-height: 1.7;
}
.not-found p { color: #aec1ce; margin: 1.5rem 0; }
.not-found a { display: inline-block; padding: .8rem 1rem; color: #d6e6f0; text-underline-offset: .3em; }
.not-found a:focus-visible { outline: 2px solid #b2d9f2; outline-offset: 4px; }