/* Patreon-ish palette */
:root {
  --patreon-coral: #ff424d;
  --patreon-ink: #0f1f51;
  --patreon-border: #05133d1f;
  --patreon-border-strong: rgba(6, 16, 44, 0.18);
  --patreon-ink-hover: #464e6a;
}

/* Light scheme (Patreon-ish: white header, dark text, coral accent) */
:root,
[data-md-color-scheme="default"] {
  /* Header background */
  --md-primary-fg-color: #ffffff;

  /* Header text/icons */
  --md-primary-bg-color: #141518;

  /* Accent (links, focus, etc.) */
  --md-accent-fg-color: var(--patreon-ink);

  /* Page surfaces */
  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: rgba(137, 131, 161, 0.92);

  /* Body text */
  --md-default-fg-color: rgba(20, 21, 24, 0.92);
  --md-default-fg-color--light: rgba(20, 21, 24, 0.72);
}

/* Dark scheme */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0f1012;
  --md-default-bg-color--light: #141518;

  --md-primary-fg-color: #0f1012;
  --md-accent-fg-color: var(--patreon-ink);

  --md-default-fg-color: rgba(110, 106, 128, 0.92);
  --md-default-fg-color--light: rgba(137, 131, 161, 0.92);
}

/* Buttons */
.md-typeset .md-button {
  border-radius: 999px;
  padding: 0.55em 1.05em;
  border-color: var(--patreon-border-strong);
  font-weight: 600;
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
}

.md-typeset .md-button--primary {
  background-color: var(--patreon-ink);
  border-color: var(--patreon-ink);
  color: var(--patreon-ink);
}

/* Header / tabs */
.md-header,
.md-tabs {
  background: var(--md-default-bg-color);
  border-bottom: 1px solid var(--patreon-border);
}

/* Card grid */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--patreon-border);
  border-radius: 16px;
  background: var(--md-default-bg-color);
  box-shadow: 0 1px 0 rgba(20, 21, 24, 0.04);
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--patreon-ink-hover);
  transform: translateY(-1px);
  transition: transform 120ms ease, border-color 120ms ease;
}

/* Ensure links are always visible (not only on hover) */
.md-typeset a {
  color: var(--patreon-ink);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
.md-typeset a:hover {
  color: var(--patreon-ink-hover);
}

/* --- Buttons must NOT inherit normal link styling --- */
.md-typeset a.md-button,
.md-typeset a.md-button:hover {
  text-decoration: none;
}

/* Secondary buttons: visible label + clear border */
.md-typeset a.md-button:not(.md-button--primary) {
  color: #141518;                    /* dark ink text */
  border-color: rgba(20, 21, 24, 0.22);
  background: #ffffff;
}

/* Secondary hover: subtle surface */
.md-typeset a.md-button:not(.md-button--primary):hover {
  background: #f7f7f8;
  border-color: rgba(20, 21, 24, 0.28);
  color: #141518;
}

/* Primary button stays coral with white text */
.md-typeset a.md-button--primary {
  background: var(--patreon-ink);
  border-color: var(--patreon-ink);
  color: #ffffff;
}

.md-typeset a.md-button--primary:hover {
  background: var(--patreon-ink-hover);
  border-color: var(--patreon-ink);
  color: #ffffff;
}

/* Hero layout */
.hero {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Text takes remaining space */
.hero-text {
  flex: 1;
}

/* Avatar styling */
.hero-avatar {
  height: 256px;
  width: 256px;
  border-radius: 50%;
  object-fit: cover;
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  .hero {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .hero-avatar {
    height: 160px;
    margin-bottom: 1rem;
  }
}