/* Header */
.site-header {
  padding-block: 20px;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  --tone: var(--on-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--accent);
  font-weight: 750;
  font-stretch: 112%;
  text-decoration: none;
}

.brand .icon {
  font-size: 2.4rem;
}

.brand-name {
  color: var(--ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  padding: 0.55em 0.85em;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.nav a:hover {
  background: var(--surface);
}

.theme-toggle {
  --tone: light-dark(var(--c-violet-400), var(--c-lilac-300));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-size: 1.4rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.theme-toggle:hover {
  background: var(--surface-strong);
}

.theme-toggle .icon-sun,
:root[data-theme='dark'] .theme-toggle .icon-moon {
  display: none;
}

:root[data-theme='dark'] .theme-toggle .icon-sun {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-moon {
    display: none;
  }

  :root:not([data-theme='light']) .theme-toggle .icon-sun {
    display: block;
  }
}

@media (max-width: 680px) {
  .nav .nav-extra {
    display: none;
  }
}

/* Hero */
.hero {
  padding-block: clamp(24px, 3.5vw, 48px) 0;
}

.hero-name {
  margin-bottom: clamp(28px, 3.5vw, 48px);
  font-size: var(--step-hero);
  font-weight: 850;
  font-stretch: 125%;
  line-height: 0.88;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.hero-name span {
  display: block;
}

.hero-grid {
  display: grid;
  gap: 44px;
}

.hero-lede {
  max-width: 17ch;
  font-size: var(--step-2);
  font-weight: 750;
  font-stretch: 112%;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.hero-text {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 26px;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 600;
}

.status-dot {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--brand);
}

@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }

  .hero-intro {
    padding-top: 8px;
  }
}