:root {
  --ink: #272330;
  --paper: #f7f3fb;
  --muted: #777180;
  --line: #ddd6e8;
  --orange: #e87961;
  --yellow: #f3d58c;
  --lavender: #cbb8ea;
  --lavender-deep: #846cad;
}

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(132, 108, 173, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 108, 173, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}

::selection {
  background: var(--lavender);
  color: var(--ink);
}

.wordmark {
  display: inline;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--ink);
  font-size: 1.35rem;
  letter-spacing: -0.08em;
  line-height: normal;
}

.wordmark span {
  color: var(--orange);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}

main section[id] {
  scroll-margin-top: 104px;
}

.identity-name {
  margin: 0 0 30px;
  color: var(--lavender-deep);
  font-family: var(--sans);
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.09em;
}

.hero-copy h1 {
  max-width: 650px;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.98;
}

h1 em,
h2 em {
  color: var(--lavender-deep);
}

.button-dark:hover {
  background: var(--lavender-deep);
}

.hero-intro,
.experience-item > div:last-child > p:not(.company) {
  color: #5d5868;
}

.signal-mark span {
  background: var(--lavender-deep);
}

.signal-mark span:nth-child(3) {
  background: var(--orange);
}

.marquee {
  background: var(--lavender-deep);
}

.marquee span {
  color: var(--yellow);
}

.project-card-featured {
  background: #332c42;
}

.project-card-light {
  background: var(--yellow);
}

.project-card-accent {
  background: var(--orange);
}

.contact-section {
  background: #332c42;
}

@media (max-width: 720px) {
  .topbar {
    background: rgba(247, 243, 251, 0.9);
  }

  .identity-name {
    font-size: clamp(3.6rem, 16vw, 6rem);
  }

  .hero-copy h1 {
    font-size: clamp(2.6rem, 11vw, 4.5rem);
  }
}