/* Neutral foundations shared by Kojable resource articles. */
.resource-article {
  --resource-font: var(--font-sans, var(--font-family-body));
  --resource-surface: var(--surface-0);
  --resource-surface-soft: var(--surface-1);
  --resource-surface-muted: var(--surface-2);
  --resource-text: var(--ink-900);
  --resource-text-soft: var(--ink-500);
  --resource-border: var(--edge);
  --resource-border-strong: var(--edge-strong);
  --resource-radius-sm: var(--border-radius-sm, var(--radius-sm));
  --resource-radius-md: var(--border-radius-md, var(--radius-md));
  --resource-radius-lg: var(--border-radius-lg, var(--radius-lg));
  font-family: var(--resource-font);
}

.resource-article,
.resource-article *,
.resource-article *::before,
.resource-article *::after {
  box-sizing: border-box;
}

.resource-article h2[id],
.resource-article h3[id],
.resource-article section[id] {
  scroll-margin-top: 6rem;
}

.resource-article a:not(.btn):focus-visible,
.resource-article button:not(.btn):focus-visible {
  outline: 3px solid var(--signal-ring);
  outline-offset: 3px;
}

.resource-article .resource-detail-nav {
  width: min(1120px, calc(100% - 3rem));
  margin: 0 auto;
  padding: var(--spacing-xl, 2rem) 0 var(--spacing-3xl, 4rem);
  border-top: 1px solid var(--resource-border-strong);
}

.resource-article .resource-detail-nav a {
  font-weight: 700;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
}

.resource-article .resource-publication-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 1rem 0;
  color: var(--resource-text-soft);
  font-size: 0.95rem;
}

.resource-article .resource-publication-meta a {
  color: inherit;
  text-underline-offset: 0.2em;
}

@media (max-width: 520px) {
  .resource-article .resource-detail-nav {
    width: min(100% - 2rem, 1120px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-article *,
  .resource-article *::before,
  .resource-article *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}