/* Blog styles, shared by resources.html and the blog-*.html articles. */

/* ---- Reading path: the line and dots that link the series ---- */
.path { list-style: none; margin: 0; padding: 0; }
.path > li { position: relative; padding-left: 44px; }
.path > li::before {
  content: ""; position: absolute; left: 0; top: 6px; z-index: 1;
  width: 15px; height: 15px; border-radius: 50%;
  background: #FBFAF7; border: 2px solid #F88223;
}
.path > li::after {
  content: ""; position: absolute; left: 6.5px; top: 6px; bottom: -6px;
  width: 2px; background: #E5DFD6;
}
.path > li:last-child::after { display: none; }

/* Compact version beside an article */
.path-sm > li { padding-left: 26px; padding-bottom: 20px; }
.path-sm > li:last-child { padding-bottom: 0; }
.path-sm > li::before { width: 11px; height: 11px; top: 5px; }
.path-sm > li::after { left: 4.5px; top: 5px; bottom: -5px; }
.path-sm > li.is-current::before { background: #F88223; }
.path-sm a { display: block; font-size: 14px; line-height: 1.4; color: #6B6660; text-decoration: none; }
.path-sm a:hover { color: #343434; }
.path-sm a[aria-current="page"] { color: #343434; font-weight: 600; }

/* ---- Article text ---- */
.post-body { font-size: 17px; line-height: 1.72; color: #343434; }
.post-body > * { margin: 0; }
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 {
  font-family: Sora, sans-serif; font-weight: 600; font-size: 25px; line-height: 1.25;
  letter-spacing: -.01em; margin-top: 2.1em;
}
.post-body h2 + * { margin-top: .7em; }
.post-body a { color: #C2620B; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: #343434; }

.post-body ul { list-style: none; padding: 0; }
.post-body ul > li { position: relative; padding-left: 24px; }
.post-body ul > li + li { margin-top: .55em; }
.post-body ul > li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 8px; height: 8px; border-radius: 50%; background: #F88223;
}

/* Numbered steps, only where the order matters */
.post-steps { list-style: none; padding: 0; counter-reset: step; }
.post-steps > li { counter-increment: step; position: relative; padding-left: 46px; }
.post-steps > li + li { margin-top: 1em; }
.post-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 50%; background: #F6F2EB;
  display: flex; align-items: center; justify-content: center;
  font-family: Sora, sans-serif; font-weight: 600; font-size: 14px; color: #C2620B;
}

/* The short version, at the top of each article */
.post-summary { background: #F6F2EB; border-radius: 16px; padding: 22px 24px; font-size: 16px; line-height: 1.6; }
.post-summary-title { font-family: Sora, sans-serif; font-weight: 600; font-size: 16px; margin: 0 0 10px; }

/* One pulled-out line per article */
.post-pull {
  font-family: Sora, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.32; letter-spacing: -.01em;
  padding: 4px 0; margin-top: 1.7em !important; margin-bottom: 1.7em;
}
.post-pull::before { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; background: #F88223; margin-bottom: 16px; }

.post-badge { text-align: center; }
.post-badge img { width: 220px; max-width: 100%; height: auto; margin: 0 auto; display: block; }
@media (min-width: 640px) {
  .post-body .post-badge { float: right; width: 220px; margin: .4em 0 .8em 28px; }
}

@media (max-width: 639px) {
  .path > li { padding-left: 30px; }
  .post-body { font-size: 16.5px; }
  .post-body h2 { font-size: 22px; }
  .post-pull { font-size: 21px; }
}