:root {
  --bg: #f5f2ea;
  --bg-deep: #ebe4d7;
  --ink: #191716;
  --line: rgba(25, 23, 22, 0.1);
  --line-strong: rgba(25, 23, 22, 0.15);
  --light: rgba(255, 255, 255, 0.68);
  --cool: rgba(83, 111, 126, 0.2);
  --warm: rgba(174, 134, 72, 0.18);
  --shadow: 0 24px 80px rgba(25, 23, 22, 0.08);
  --mx: 50%;
  --my: 50%;
  --dx: 0;
  --dy: 0;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  color-scheme: light;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 32%),
    linear-gradient(135deg, var(--bg), var(--bg-deep));
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Georgia", "Times New Roman", serif;
  background: transparent;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.page-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at var(--mx) var(--my), var(--light), transparent 30rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.page-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(25, 23, 22, 0.04) 36% 36.32%, transparent 36.32% 100%),
    linear-gradient(150deg, transparent 0 62%, rgba(255, 255, 255, 0.38) 62% 62.28%, transparent 62.28% 100%);
  opacity: 0.66;
  transform: translate3d(
    calc(var(--dx) * -0.6rem),
    calc(var(--dy) * -0.6rem),
    0
  );
  pointer-events: none;
}

.depth-scene {
  position: absolute;
  inset: -14vh -12vw;
  z-index: 0;
  overflow: hidden;
  perspective: 900px;
  pointer-events: none;
}

.depth-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      118deg,
      transparent 0 7rem,
      rgba(25, 23, 22, 0.055) 7rem 7.06rem,
      rgba(255, 255, 255, 0.34) 7.06rem 7.12rem,
      transparent 7.12rem 14rem
    ),
    repeating-linear-gradient(
      28deg,
      transparent 0 9.2rem,
      rgba(25, 23, 22, 0.045) 9.2rem 9.26rem,
      transparent 9.26rem 18.4rem
    );
  opacity: 0.42;
  transform:
    rotate(-8deg)
    translate3d(
      calc(var(--dx) * -1.2rem),
      calc(var(--dy) * -1rem),
      0
    );
}

.depth-plane {
  position: absolute;
  inset: 0;
  transform-origin: center;
  will-change: transform;
}

.depth-plane-back {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 4rem 4rem;
  opacity: 0.48;
  transform:
    rotateX(56deg)
    rotateZ(-13deg)
    translate3d(
      calc(var(--dx) * 0.8rem),
      calc(var(--dy) * 0.8rem),
      -9rem
    )
    scale(1.18);
}

.depth-plane-mid {
  background:
    repeating-linear-gradient(
      28deg,
      transparent 0 3.2rem,
      var(--line-strong) 3.2rem 3.26rem
    ),
    radial-gradient(circle at 72% 72%, var(--cool), transparent 26rem),
    radial-gradient(circle at 16% 18%, var(--warm), transparent 28rem);
  opacity: 0.38;
  transform:
    rotateX(50deg)
    rotateZ(17deg)
    translate3d(
      calc(var(--dx) * -1.4rem),
      calc(var(--dy) * -1.1rem),
      -3rem
    )
    scale(1.05);
}

.depth-plane-front {
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0 11rem,
      rgba(25, 23, 22, 0.06) 11rem 11.06rem,
      rgba(255, 255, 255, 0.38) 11.06rem 11.12rem,
      transparent 11.12rem 22rem
    ),
    linear-gradient(15deg, transparent 0 54%, rgba(255, 255, 255, 0.44) 54% 54.14%, transparent 54.14% 100%);
  opacity: 0.36;
  transform:
    translate3d(
      calc(var(--dx) * -2.6rem),
      calc(var(--dy) * -2rem),
      0
    );
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 1.15rem;
  padding: 9vh 8vw;
}

.wordmark {
  margin: 0;
  max-width: 9ch;
  font-size: clamp(4.8rem, 17vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.08em;
  font-weight: 600;
  text-wrap: balance;
  text-shadow:
    calc(var(--dx) * -0.18rem) calc(var(--dy) * -0.18rem) 0 rgba(255, 255, 255, 0.42),
    calc(var(--dx) * 1.1rem) calc(var(--dy) * 1.1rem) 4rem rgba(25, 23, 22, 0.16),
    var(--shadow);
}

.tagline {
  margin: 0;
  max-width: 24rem;
  color: rgba(25, 23, 22, 0.74);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.95rem, 1.7vw, 1.1rem);
  line-height: 1.55;
}

@media (max-width: 720px) {
  :root {
    --line: rgba(25, 23, 22, 0.14);
    --line-strong: rgba(25, 23, 22, 0.22);
    --cool: rgba(83, 111, 126, 0.28);
    --warm: rgba(174, 134, 72, 0.26);
  }

  .hero {
    padding: 7rem 1.6rem 3rem;
    align-content: start;
  }

  .wordmark {
    font-size: clamp(4.2rem, 24vw, 6.2rem);
  }

  .tagline {
    max-width: 17rem;
  }

  .depth-scene {
    inset: -10vh -40vw;
  }

  .depth-scene::before {
    opacity: 0.48;
  }

  .depth-plane-back {
    background-size: 3rem 3rem;
    opacity: 0.62;
  }

  .depth-plane-mid {
    opacity: 0.56;
  }

  .depth-plane-front {
    opacity: 0.5;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(25, 23, 22, 0.18);
    --line-strong: rgba(25, 23, 22, 0.24);
  }

  .page-shell::before,
  .page-shell::after,
  .depth-scene {
    opacity: 0.4;
  }

  .wordmark {
    text-shadow: none;
  }

  .tagline {
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dx: 0;
    --dy: 0;
  }

  .depth-plane,
  .page-shell::after,
  .wordmark {
    transition: none;
  }
}

@media (forced-colors: active) {
  html,
  body {
    background: Canvas;
  }

  body {
    color: CanvasText;
  }

  .page-shell::before,
  .page-shell::after,
  .depth-scene {
    display: none;
  }

  .wordmark,
  .tagline {
    color: CanvasText;
    text-shadow: none;
  }
}