/* ============================================================
   drbillmorgan.com — Articles
   Loads after about.css + services.css (navy page hero + page body grid)
============================================================ */

.article {
  grid-area: main;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.7;
}
.article h2 {
  margin: 48px 0 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  scroll-margin-top: 120px;
}
.article > h2:first-child { margin-top: 0; }
.article p + p,
.article ul + p,
.article p + ul { margin-top: 14px; }
.article ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article li {
  position: relative;
  padding-left: 22px;
}
.article li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.article strong { color: var(--navy); font-weight: 600; }
.article a { color: var(--orange); }

/* Worked example */
.article__example {
  margin-top: 18px;
  padding: 28px 32px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 12px;
}
.article__example h2 { margin-top: 0; }
.article__example + p { margin-top: 32px; }

.article__back {
  margin-top: 48px !important;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

@media (max-width: 860px) {
  .article { font-size: 16px; }
  .article h2 { margin-top: 40px; font-size: 21px; }
  .article__example { padding: 22px 20px; }
}