.guide-hero { min-height: 0; padding: 145px 0 75px; }
.guide-hero h1 { max-width: 1000px; font-size: clamp(3rem, 6vw, 6rem); line-height: .98; }
.guide-hero h1 em { margin-top: .1em; }
.guide-back { display: inline-block; margin-bottom: 38px; color: var(--gold-light); font-size: .8rem; }
.guide-note { padding: 24px; margin-bottom: 65px; border-left: 3px solid var(--gold); background: var(--cream); }
.guide-subtitle { font-style: italic; }
.guide-illustration { margin: 30px 0; padding: 24px; background: var(--cream); }
.guide-illustration img { width: 210px; height: auto; margin-inline: auto; }
.guide-illustration figcaption { margin-top: 16px; color: var(--muted); font-size: .8rem; text-align: center; }
.guide-points { padding-left: 1.3em; color: var(--muted); }
.guide-points li { margin-block: 18px; }
.guide-related { padding: 0; list-style: none; }
.guide-related li { padding-block: 15px; border-bottom: 1px solid var(--line); }
.guide-related a { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) { .guide-hero { padding: 115px 0 55px; } }
@media (max-width: 900px) {
  .article-index { display: block; position: static; }
  .article-index nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }