/* styles.css */
:root {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light dark;
  color: #111;
  background: #f7f4ef;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --buncss-light: ;
    --buncss-dark: initial;
  }
}

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
  color: #111;
  background: radial-gradient(circle at 20% 15%, #dacbb173, #0000 32rem), #f7f4ef;
  min-height: 100vh;
  margin: 0;
}

.site-shell {
  position: relative;
  display: grid;
  isolation: isolate;
  place-items:  center;
  min-height: 100vh;
  padding: 2rem;
}

.background {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  inset: 0;
}

.background-orb {
  position: absolute;
  aspect-ratio: 1;
  filter: blur(42px);
  opacity: .46;
  will-change: transform;
  border-radius: 999px;
  width: min(42vw, 34rem);
  transform: translate3d(0, 0, 0);
}

.background-orb--one {
  background: radial-gradient(circle at 35% 35%, #f4e2bfbd, #c2a5796b 48%, #c2a57900 72%);
  top: 10%;
  left: 8%;
}

.background-orb--two {
  background: radial-gradient(circle at 65% 40%, #adb9d275, #74809b4d 52%, #74809b00 74%);
  bottom: 8%;
  right: 7%;
}

.wordmark {
  outline: none;
  margin: 0;
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 800;
  line-height: .95;
}

.wordmark__target:focus-visible {
  outline: 2px solid;
  outline-offset: .25em;
}

.wordmark__target {
  color: inherit;
  letter-spacing: -.08em;
  text-decoration: none;
  transition: letter-spacing .36s;
}

.wordmark__target:hover {
  letter-spacing: -.02em;
}

.wordmark__target:focus-visible {
  letter-spacing: -.02em;
}

.wordmark__letters {
  display: inline-flex;
}

[data-letter] {
  display: inline-block;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

@media (prefers-color-scheme: dark) {
  :root, body {
    color: #f5f2ea;
    background: #050505;
  }

  body {
    background: radial-gradient(circle at 25% 20%, #6054456b, #0000 30rem), #050505;
  }

  .background-orb--one {
    background: radial-gradient(circle at 35% 35%, #a5896285, #80694c52 48%, #80694c00 72%);
  }

  .background-orb--two {
    background: radial-gradient(circle at 65% 40%, #7a8bae6b, #58678447 52%, #58678400 74%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .background-orb, .wordmark__target, [data-letter] {
    will-change: auto;
    transition: none;
    transform: none;
  }
}