/* MoneySwitch blog — article typography, reuses site.css variables/theme. */

.blog-article .wrap.narrow,
.blog-index .wrap.narrow { max-width: 720px; }

.blog-article h1 { font-size: clamp(28px, 4.4vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-top: 10px; }
.blog-article h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: -.02em; margin-top: 46px; margin-bottom: 4px; }
.blog-article h1 + p,
.blog-article h2 + p { margin-top: 14px; }

.blog-article p { margin-top: 16px; color: var(--dim); font-size: 16.5px; line-height: 1.75; }
.blog-article p:first-of-type { margin-top: 4px; }
.blog-article p em { color: var(--text); font-style: italic; }
.blog-article strong { color: var(--text); font-weight: 650; }

.blog-article ul,
.blog-article ol { margin-top: 16px; padding-left: 22px; color: var(--dim); font-size: 16.5px; line-height: 1.75; }
.blog-article li { margin-top: 8px; }
.blog-article li strong { color: var(--text); }

.blog-article .table-scroll { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); -webkit-overflow-scrolling: touch; }
.blog-article table { width: 100%; border-collapse: collapse; font-size: 14.5px; white-space: nowrap; }
.blog-article th { text-align: left; font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.blog-article td { padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--dim); vertical-align: top; white-space: normal; }
.blog-article tr:last-child td { border-bottom: 0; }
.blog-article td strong { color: var(--text); }

.blog-article a.tx-link,
.blog-article td a { font-family: var(--mono); font-size: 13px; color: var(--lime); white-space: nowrap; }
.blog-article a.tx-link code,
.blog-article td a code { color: inherit; background: none; border: none; padding: 0; }

.blog-article a { color: var(--purple-2); text-decoration: none; }
.blog-article a:hover { color: #cfc5ff; text-decoration: underline; text-underline-offset: 3px; }

.blog-article code { font-family: var(--mono); font-size: .88em; background: rgba(131, 110, 249, .14); border: 1px solid rgba(131, 110, 249, .22); padding: .05em .38em; border-radius: 6px; color: #e3dcff; white-space: nowrap; }

.blog-index .blog-list { list-style: none; margin: 32px 0 0; padding: 0; }
.blog-index .blog-list-item { padding: 22px 0; border-top: 1px solid var(--line); }
.blog-index .blog-list-item:first-child { border-top: 0; }
.blog-index .blog-list-item h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.blog-index .blog-list-item h2 a { color: var(--text); }
.blog-index .blog-list-item h2 a:hover { color: var(--purple-2); }
.blog-index .blog-list-item p { margin-top: 8px; font-size: 14.5px; }

@media (max-width: 640px) {
  .blog-article table { font-size: 13px; }
  .blog-article th, .blog-article td { padding: 9px 12px; }
}