:root {
  --obsidian: #0d1113;
  --shell: #f2eee5;
  --ref: min(0.052083333vw, 0.092592593vh);
  --frame-w: calc(1920 * var(--ref));
  --frame-h: calc(1080 * var(--ref));
  --frame-x: calc((100vw - var(--frame-w)) / 2);
  --frame-y: calc((100vh - var(--frame-h)) / 2);
}

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

body {
  background: var(--obsidian);
  color: var(--shell);
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.hero {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--obsidian);
}

.hero__image {
  position: absolute;
  z-index: -1;
  width: 113%;
  height: 113%;
  left: -0.6%;
  top: -6.9%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  pointer-events: none;
}

.hero__content {
  position: absolute;
  left: calc(var(--frame-x) + 80 * var(--ref));
  top: calc(var(--frame-y) + 170 * var(--ref));
  color: #fff;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--ref));
  width: fit-content;
  height: calc(80 * var(--ref));
}

.brand-mark {
  display: block;
  flex: 0 0 calc(80 * var(--ref));
  width: calc(80 * var(--ref));
  height: calc(80 * var(--ref));
}

.brand-wordmark {
  display: block;
  height: calc(80 * var(--ref));
  width: auto;
}

.hero__copy {
  margin-top: calc(40 * var(--ref));
  margin-left: calc(120 * var(--ref));
  width: calc(588 * var(--ref));
  max-width: calc(588 * var(--ref));
  text-shadow: 0 calc(1 * var(--ref)) calc(14 * var(--ref)) rgba(0, 0, 0, .20);
}

.hero__line,
.hero__status {
  margin: 0;
  font-size: calc(22 * var(--ref));
  line-height: 1.28;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.hero__status {
  margin-top: calc(25 * var(--ref));
}

@media (max-aspect-ratio: 4 / 5) {
  :root { --ref: min(0.09vw, 0.06vh); }

  .hero__image {
    width: 146%;
    height: 146%;
    left: -33%;
    top: -20%;
    object-position: 57% 50%;
  }

  .hero__content {
    left: 5vw;
    top: 7vh;
  }

  .hero__copy {
    width: min(calc(588 * var(--ref)), 78vw);
    max-width: 78vw;
  }

  .hero__line,
  .hero__status {
    font-size: calc(46.2 * var(--ref));
    line-height: 1.24;
    white-space: normal;
  }
}