:root {
  --red: #e31b12;
  --ink: #171717;
  --muted: #696969;
  --paper: #fbfbf8;
  --line: rgba(227, 27, 18, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 24% 16%, rgba(227, 27, 18, 0.075), transparent 30rem),
    linear-gradient(135deg, #ffffff 0%, var(--paper) 58%, #ffffff 100%);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
}

body::before,
body::after {
  position: fixed;
  inset: auto;
  pointer-events: none;
  content: "";
}

body::before {
  top: 28px;
  right: 28px;
  left: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

body::after {
  right: clamp(18px, 4vw, 56px);
  bottom: clamp(18px, 4vw, 56px);
  width: clamp(84px, 12vw, 160px);
  height: 2px;
  background: var(--red);
  opacity: 0.88;
}

.page-shell {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(24px, 5vw, 58px);
  align-items: start;
  justify-items: center;
}

.hero {
  display: grid;
  width: min(1060px, 100%);
  justify-items: center;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(22px, 3vw, 34px);
  color: var(--red);
  font-size: clamp(0.72rem, 1.2vw, 0.86rem);
  font-weight: 800;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow::before {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--red);
  border-radius: 999px;
  content: "";
}

.brand-logo {
  display: block;
  width: min(720px, 92vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto clamp(28px, 4vw, 44px);
  filter: drop-shadow(0 18px 34px rgba(227, 27, 18, 0.08));
}

.message {
  width: 100%;
  max-width: 1000px;
  min-height: clamp(160px, 20vw, 220px);
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.15rem, 4.25vw, 4rem);
  font-weight: 760;
  letter-spacing: -0.065em;
  line-height: 1.02;
  text-align: left;
  justify-self: center;
}

.typewriter {
  white-space: pre-line;
}

.cursor {
  display: inline-block;
  width: 0.075em;
  height: 0.88em;
  margin-left: 0.08em;
  transform: translateY(0.12em);
  background: var(--red);
  animation: blink 0.92s steps(1, end) infinite;
}

.no-script {
  min-height: auto;
}

@keyframes blink {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 680px) {
  body {
    overflow: auto;
  }

  .page-shell {
    padding: 42px 22px;
    align-items: start;
    justify-items: center;
  }

  .brand-logo {
    width: min(420px, 100%);
    margin-bottom: 48px;
  }

  .message {
    width: 100%;
    max-width: 100%;
    min-height: 285px;
    font-size: clamp(2.05rem, 11.6vw, 4rem);
    letter-spacing: -0.07em;
    line-height: 1;
  }

  .eyebrow {
    margin-bottom: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}