/* Project page: light editorial treatment scoped away from technical tools. */
.project-page .guide-main {
  background: var(--color-surface);
}

.project-page .guide-breadcrumb {
  color: var(--color-text-muted);
}

.project-page .guide-breadcrumb li + li::before {
  color: var(--color-border-strong);
}

.project-page .guide-hero h1 em {
  color: var(--color-brand);
}

.project-page .guide-lead,
.project-page .guide-meta span,
.project-page .editorial-head > p:last-child,
.project-page .project-story p,
.project-page .project-thanks-signoff {
  color: var(--color-text-muted);
}

.project-page .guide-meta span {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
}

.project-page .project-story blockquote {
  border-left-color: var(--color-brand);
  color: var(--color-text);
}

.project-page :is(.guide-kicker, .mini-label) {
  color: var(--color-brand-strong);
}

.project-page :is(.trust-grid, .link-grid, .project-thanks-grid) {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.project-page :is(.trust-grid article, .link-grid a, .project-thanks-grid article) {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.project-page :is(.trust-grid span, .link-grid span, .project-thanks-grid span) {
  color: var(--color-brand-strong);
}

.project-page :is(.trust-grid h3, .link-grid h3, .project-thanks-grid h3) {
  color: var(--color-text);
}

.project-page :is(.trust-grid p, .link-grid p, .project-thanks-grid p) {
  color: var(--color-text-muted);
}

.project-page .link-grid a:is(:hover, :focus-visible) {
  background: var(--color-brand-soft);
}

.project-page .safety-note {
  border-left-color: var(--color-warning);
  background: var(--color-surface-raised);
  color: var(--color-text-soft);
}

.project-page .safety-note strong {
  color: var(--color-text);
}

.project-page .project-thanks-grid .project-thanks-featured {
  border-color: var(--color-border);
  background: var(--color-brand-soft);
  box-shadow: inset 0.25rem 0 0 var(--color-brand);
}

.project-page .project-thanks-grid .project-thanks-featured span {
  color: var(--color-brand-deep);
}

@media (forced-colors: active) {
  .project-page .project-thanks-grid .project-thanks-featured {
    border-left: 0.25rem solid CanvasText;
    box-shadow: none;
  }
}