:root {
  color-scheme: light;
  --ink: #101113;
  --muted: #5e646b;
  --line: #121417;
  --line-soft: #e7e9ec;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.site-shell {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 32px 24px;
  overflow: hidden;
}

.logo-lockup {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: min(72vw, 620px);
  padding: 4px 0 0;
  isolation: isolate;
}

.logo-mark {
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: clamp(58px, 13vw, 132px);
  line-height: 0.85;
  font-weight: 850;
  letter-spacing: 0;
  color: var(--ink);
}

.tagline {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 17px);
  font-weight: 650;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.line {
  position: absolute;
  top: calc(50% - 8px);
  z-index: 0;
  height: 2px;
  opacity: 0.72;
  background: linear-gradient(90deg, transparent, var(--line-soft) 22%, var(--line));
  transform: translateY(-50%);
}

.line-in {
  right: calc(50% + clamp(104px, 19vw, 190px));
  width: min(26vw, 170px);
}

.line-out {
  left: calc(50% + clamp(104px, 19vw, 190px));
  width: min(26vw, 170px);
  background: linear-gradient(90deg, var(--line), var(--line-soft) 76%, transparent);
}

@media (max-width: 520px) {
  .logo-lockup {
    min-width: min(86vw, 380px);
  }

  .line {
    top: calc(50% - 6px);
  }

  .line-in {
    right: calc(50% + 98px);
    width: 19vw;
  }

  .line-out {
    left: calc(50% + 98px);
    width: 19vw;
  }
}