/* Articles: the /guides/ index and every /guides/<slug>/ article. Contract: strategy/website/guides-template-contract.md. */
.guides-intro { max-width: var(--copy-width); margin: 0 0 var(--space-6); color: var(--color-muted); font-size: 1.1rem; }
.guides-list { max-width: var(--copy-width); margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.guides-list:empty { display: none; }
main:has(.guides-list li) .guides-intro__pending { display: none; }
.guides-list__item { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.guides-list__item a { color: var(--color-text); font-size: 1.2rem; font-weight: 700; line-height: 1.3; text-decoration: none; }
.guides-list__item a:hover, .guides-list__item a:focus-visible { text-decoration: underline; text-underline-offset: .3rem; }
.guides-list__item p { margin: var(--space-1) 0 0; color: var(--color-muted); }
.guides-list__item time { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: .85rem; }

.guide-article { max-width: var(--copy-width); }
.guide-article__back { margin: 0 0 var(--space-4); font-size: .9rem; }
.guide-article__back a { color: var(--color-muted); }
.guide-article__title { margin: 0 0 var(--space-3); font: 400 clamp(2.2rem, 6vw, 4rem)/1.08 Georgia, 'Times New Roman', serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
.guide-article__summary { margin: 0; color: var(--color-muted); font-size: 1.15rem; }
.guide-article__meta { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: .85rem; }
.guide-article__body { margin-top: var(--space-6); overflow-wrap: break-word; }
.guide-article__body h2 { margin: var(--space-6) 0 var(--space-2); font-size: 1.5rem; line-height: 1.25; }
.guide-article__body h3 { margin: var(--space-5) 0 var(--space-1); font-size: 1.15rem; }
.guide-article__body a { color: var(--color-accent-hover); }
.guide-article__body img, .guide-article__body video { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.guide-article__body pre { max-width: 100%; overflow-x: auto; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface); }
.guide-article__body code { font-size: .9em; }
.guide-article__body figure { margin: var(--space-5) 0; }
.guide-article__body figcaption { color: var(--color-muted); font-size: .85rem; }
.guide-cta { margin-top: var(--space-7); padding: var(--space-4); border-left: 3px solid var(--color-accent); background: var(--color-surface); }
.guide-cta p { margin: 0 0 var(--space-2); }
.guide-cta a { color: var(--color-accent-hover); }

@media (forced-colors: active) {
  .guides-list__item, .guide-cta { border: 1px solid CanvasText; }
}