:root {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #0b0b0b;
  color: #f7f7f5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

html, body { min-width: 320px; min-height: 100%; margin: 0; }

body { min-height: 100svh; }

.page {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(20px, 4vw, 64px);
  overflow: hidden;
}

.frame {
  position: absolute;
  inset: clamp(14px, 2vw, 28px);
  border: 1px solid rgba(247, 247, 245, .2);
  pointer-events: none;
}

.wordmark {
  z-index: 1;
  margin: 0 0 .06em;
  font-size: clamp(3.2rem, 10.8vw, 10.5rem);
  font-weight: 600;
  letter-spacing: -.082em;
  line-height: .93;
  white-space: nowrap;
}

.suffix { font-weight: 300; letter-spacing: -.07em; }

.rule {
  position: absolute;
  right: clamp(28px, 4vw, 64px);
  bottom: clamp(28px, 4vw, 64px);
  width: clamp(38px, 5vw, 78px);
  height: 1px;
  background: #f7f7f5;
}

@media (max-width: 600px) {
  .wordmark { font-size: clamp(2.8rem, 13.1vw, 5rem); }
  .rule { width: 36px; }
}