* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: #050607; }
.page {
  position: relative;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: #050607;
}
.hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mobile { display: none; }
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .page { height: auto; overflow: auto; }
  .hero-image { display: none; }
  .mobile {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 4vh, 32px);
    overflow: hidden;
    padding: max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
    color: #f4f2ee;
    text-align: center;
  }
  .mobile::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    background-color: #050607;
    background-image:
      radial-gradient(ellipse at center, rgb(5 6 7 / 42%), rgb(5 6 7 / 88%) 72%),
      linear-gradient(rgb(5 6 7 / 42%), rgb(5 6 7 / 70%)),
      url('./assets/forge-coming-soon.png');
    background-position: center, center, left top;
    background-size: cover, cover, auto 160%;
  }
  .logo {
    width: min(82vw, 360px);
    aspect-ratio: 2.63;
    flex: none;
    background-image: url('./assets/forge-logo.png');
    background-position: 60% 54%;
    background-repeat: no-repeat;
    background-size: 137% auto;
    filter: invert(1);
    mix-blend-mode: screen;
  }
  .heading {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 8vw, 3.2rem);
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.1;
    text-transform: uppercase;
  }
  .message, .contact {
    max-width: 34ch;
    margin: 0;
    color: #d3d0ca;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(0.98rem, 4vw, 1.1rem);
    line-height: 1.75;
  }
  .contact a { color: #f4f2ee; text-underline-offset: 0.25em; }
}
@media (max-height: 620px) and (max-width: 1023px) {
  .mobile { gap: 12px; padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .logo { width: min(45vw, 230px); }
  .heading { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .message, .contact { font-size: 0.9rem; line-height: 1.45; }
}
@media (max-height: 620px) and (max-width: 1023px) and (orientation: landscape) {
  .mobile::before { background-size: cover, cover, auto 450%; }
}