:root {
  --st-ink: #16191B;
  --st-accent: #E2561B;
  --st-green: #1E3A2F;
  --st-bone: #F4F1EA;
  --st-paper: #FAF8F3;
  --st-muted: #4B5257;
  --st-cut: var(--bg, #ffffff);
  --st-wordmark: var(--st-ink);
}

:root[data-theme="dark"] {
  --st-cut: var(--bg, #151515);
  --st-wordmark: var(--st-bone);
}

.st-brand,
.nav-logo.st-brand,
.logo.st-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  color: var(--st-wordmark);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.st-brand .st-mark {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: var(--st-wordmark);
}

.st-brand .st-wordmark {
  color: var(--st-wordmark);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}

.st-brand .st-accent { color: var(--st-accent); }

@media (max-width: 400px) {
  .st-brand .st-mark { width: 30px; height: 30px; flex-basis: 30px; }
  .st-brand .st-wordmark { font-size: 24px; }
}