:root {
  color-scheme: dark;
  --bg: #050607;
  --panel: #0b0d0f;
  --text: #f4f1ea;
  --muted: #b7bdc0;
  --soft: #7e878a;
  --line: rgba(244, 241, 234, 0.18);
  --accent: #c8c1b3;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 18%, rgba(150, 162, 166, 0.16), transparent 32rem),
    linear-gradient(135deg, #050607 0%, #0a0d0f 48%, #050607 100%);
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 5px;
  opacity: 0.34;
}

.site-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 3rem);
}

.hero {
  width: min(100%, 1180px);
  min-height: min(760px, calc(100vh - clamp(2.5rem, 6vw, 6rem)));
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 650px;
}

.eyebrow,
.status {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--accent);
}

h1 {
  margin: 1.15rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.7rem, 14vw, 11rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: 0;
}

.headline {
  max-width: 12ch;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  font-size: clamp(1.65rem, 4vw, 3.55rem);
  font-weight: 650;
  line-height: 1;
}

.intro {
  max-width: 38rem;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

.status {
  width: fit-content;
  margin-top: 2rem;
  padding-top: 1rem;
  color: var(--text);
  border-top: 1px solid var(--line);
}

.hero__visual {
  position: relative;
  margin: 0;
  min-height: 0;
}

.hero__visual::before {
  position: absolute;
  inset: 11% -6% -5% 14%;
  content: "";
  background: linear-gradient(180deg, rgba(200, 193, 179, 0.22), rgba(126, 135, 138, 0.02));
  filter: blur(42px);
  opacity: 0.55;
}

.hero__visual img {
  position: relative;
  display: block;
  width: min(100%, 470px);
  height: min(74vh, 680px);
  margin-left: auto;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(244, 241, 234, 0.14);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

@media (max-width: 820px) {
  .site-shell {
    place-items: start center;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero__content {
    padding-top: clamp(1rem, 5vh, 3rem);
  }

  h1 {
    font-size: clamp(4.4rem, 23vw, 7.5rem);
  }

  .headline {
    max-width: 11ch;
  }

  .hero__visual {
    width: 100%;
  }

  .hero__visual img {
    width: 100%;
    height: clamp(340px, 58vh, 560px);
    margin: 0;
    object-position: center 54%;
  }
}

@media (max-width: 460px) {
  .site-shell {
    padding: 1rem;
  }

  .eyebrow,
  .status {
    font-size: 0.7rem;
  }

  .intro {
    line-height: 1.55;
  }
}