@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,650;9..40,800;9..40,1000&display=swap");

:root {
  --camful-bg: #080706;
  --camful-ink: #fff8ec;
  --camful-muted: rgba(255, 250, 240, 0.66);
  --camful-gold: #f0c84b;
  --camful-logo-dot: #c0832f;
  --camful-line: rgba(240, 200, 75, 0.14);
  --camful-font: "DM Sans", "Avenir Next", ui-sans-serif, sans-serif;
  --camful-shell-x: clamp(22px, 5vw, 72px);
  --camful-shell-header-height: 82px;
}

.camful-shell-header {
  border-bottom: 1px solid var(--camful-line);
  min-height: var(--camful-shell-header-height);
  padding: 0 var(--camful-shell-x);
  background: rgba(8, 7, 6, 0.92);
  color: var(--camful-ink);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  color: var(--ink, var(--camful-ink));
  font-family: var(--font-body, var(--camful-font));
  font-size: var(--camful-brand-size, 1.24rem);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.brand:visited {
  color: var(--ink, var(--camful-ink));
}

.brand-mark {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 25px;
  border: 4px solid currentColor;
  border-radius: 7px;
}

.brand-mark::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 8px;
  width: 14px;
  height: 7px;
  border-radius: 5px 5px 0 0;
  background: currentColor;
}

.brand-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold, var(--camful-logo-dot));
  transform: translate(-50%, -50%);
}

.camful-home-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border: 1px solid var(--camful-home-link-border, var(--camful-line));
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--camful-home-link-color, var(--camful-ink));
  background: var(--camful-home-link-bg, rgba(255, 250, 240, 0.06));
  font-family: var(--font-body, var(--camful-font));
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.camful-home-link:visited {
  color: var(--camful-home-link-color, var(--camful-ink));
}

.camful-home-link::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--camful-home-link-dot, var(--camful-gold));
}

@media (max-width: 620px) {
  :root {
    --camful-shell-x: 20px;
  }

  .camful-shell-header {
    min-height: 98px;
  }
}