:root {
  --bg: #f5f5f3;
  --ink: #111111;
  --muted: #777772;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(135deg, #fafafa 0%, #f3f3f1 57%, #ececea 100%);
}

.relief {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -3vw;
  width: min(65vw, 1060px);
  height: 100%;
  background: url("octagon-relief.jpg") center right / cover no-repeat;
  filter: contrast(.94) brightness(1.035);
  opacity: .98;
  pointer-events: none;
}

.brand {
  position: absolute;
  top: clamp(28px, 5vw, 74px);
  left: clamp(26px, 5.2vw, 84px);
  z-index: 2;
}

.brand img {
  display: block;
  width: clamp(225px, 22vw, 355px);
  height: auto;
}

.hero {
  position: absolute;
  z-index: 2;
  left: clamp(26px, 12vw, 195px);
  top: 50%;
  transform: translateY(-42%);
  max-width: 48vw;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: clamp(10px, .8vw, 13px);
  font-weight: 400;
  letter-spacing: .52em;
}

h1 {
  margin: 0;
  font-size: clamp(34px, 4.35vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .23em;
  white-space: nowrap;
}

.line {
  display: block;
  width: clamp(68px, 6vw, 98px);
  height: 1px;
  margin-top: 34px;
  background: rgba(17,17,17,.7);
}

footer {
  position: absolute;
  left: clamp(26px, 5.2vw, 84px);
  bottom: max(26px, env(safe-area-inset-bottom));
  z-index: 2;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Tablet */
@media (max-width: 980px) {
  .relief {
    right: -19vw;
    width: 88vw;
    opacity: .86;
  }

  .hero {
    left: clamp(28px, 8vw, 78px);
    max-width: 58vw;
  }

  h1 {
    font-size: clamp(38px, 6.6vw, 62px);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .page {
    min-height: 100dvh;
    background:
      radial-gradient(circle at 30% 12%, rgba(255,255,255,.98), transparent 40%),
      linear-gradient(150deg, #fafafa 0%, #f1f1ef 100%);
  }

  .brand {
    top: max(24px, env(safe-area-inset-top));
    left: 22px;
  }

  .brand img {
    width: min(72vw, 285px);
  }

  .relief {
    top: 20%;
    right: -47vw;
    width: 145vw;
    height: 78%;
    background-position: center;
    background-size: cover;
    opacity: .82;
    filter: contrast(.91) brightness(1.045);
  }

  .hero {
    left: 22px;
    right: 22px;
    top: 49%;
    transform: translateY(-50%);
    max-width: none;
  }

  .eyebrow {
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: .42em;
  }

  h1 {
    font-size: clamp(31px, 10vw, 48px);
    line-height: 1.14;
    letter-spacing: .16em;
    white-space: normal;
    max-width: 8.5em;
  }

  .line {
    width: 64px;
    margin-top: 25px;
  }

  footer {
    left: 22px;
    right: 22px;
    bottom: max(20px, env(safe-area-inset-bottom));
    font-size: 9px;
    letter-spacing: .1em;
  }
}

/* Very small mobile */
@media (max-width: 360px) {
  .brand img {
    width: 78vw;
  }

  h1 {
    font-size: 29px;
  }
}

/* Landscape mobile */
@media (max-height: 520px) and (orientation: landscape) {
  .brand {
    top: 18px;
  }

  .brand img {
    width: 230px;
  }

  .hero {
    top: 58%;
  }

  .relief {
    top: 0;
    right: -15vw;
    width: 78vw;
    height: 100%;
  }

  footer {
    bottom: 14px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}