/* Articles page (aff-kit/pages/articles.php). Uses the colours and components of aff.css. */
.arts-how { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.arts-how h2 { font-size: 26px; font-weight: 900; margin: 0 0 8px; }
.arts-how p { margin: 0 0 12px; }
.arts-tips { margin: 0; padding-left: 20px; }
.arts-tips li { margin: 6px 0; }
.arts-zip { display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: #fbefee; border: 1px solid var(--line); }
.arts-zip .btn { width: 100%; }
.arts-zip small { color: var(--muted); font-size: 16px; line-height: 1.5; }

.arts { display: grid; gap: 22px; }
.art { padding: 22px; scroll-margin-top: 130px; }
.art-top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: start; }
.art-thumb { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: #fbefee; display: block; }
.art-kind { margin: 0 0 6px; font-size: 16px; color: var(--muted); }
.art-kind span { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 999px; background: #fbefee; color: var(--gold-d); font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.art-title { margin: 0 0 8px; font-size: 23px; line-height: 1.3; font-weight: 900; color: var(--ink); }
.art-sum { margin: 0; color: var(--text); }
.art-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.art-tools-end { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }

.art-read { margin-top: 16px; border-top: 1px solid var(--line); }
.art-read > summary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0 0; cursor: pointer; list-style: none; color: var(--navy); font-weight: 900; font-size: 17px; }
.art-read > summary::-webkit-details-marker { display: none; }
.art-read > summary::after { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fbefee; color: var(--gold-d); font-size: 18px; }
.art-read[open] > summary::after { content: "\2212"; background: var(--gold); color: var(--gold-ink); }
.art-read .close-t, .art-read[open] .open-t { display: none; }
.art-read[open] .close-t { display: inline; }

.art-seo { margin: 20px 0 6px; padding: 16px 18px; border-radius: 12px; background: #f7fafc; border: 1px solid #dbe2ee; display: grid; gap: 12px; }
.seo-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.seo-row > span { font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); padding-top: 3px; }
.seo-row p { margin: 0; font-size: 16px; }

.art-body { margin-top: 22px; font-size: 18px; line-height: 1.7; color: var(--text); overflow-wrap: break-word; }
.art-body h1, .art-body h2 { font-size: 27px; line-height: 1.25; margin: 0 0 .5em; color: var(--ink); }
.art-body h3 { font-size: 22px; line-height: 1.3; margin: 1.4em 0 .4em; color: var(--ink); }
.art-body h4 { font-size: 19px; margin: 1.3em 0 .4em; color: var(--ink); }
.art-body p { margin: 0 0 1em; }
.art-body ul, .art-body ol { padding-left: 24px; margin: 0 0 1em; }
.art-body li { margin: .3em 0; }
.art-body .disclosure { font-size: 16px; color: var(--muted); font-style: italic; }
.art-body .cta { padding: 18px 20px; border-radius: 12px; background: #fff8e6; border: 1px solid #f4d58a; }
.art-body .cta p:last-child { margin-bottom: 0; }
.art-body .bio { display: flex; gap: 16px; align-items: flex-start; margin-top: 1.6em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: 16px; }
.art-body .bio img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.art-body .bio p { margin: 0 0 .4em; }
.art-body blockquote { margin: 1em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--gold); }
.art-body table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 16px; }
.art-body th, .art-body td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }

@media (max-width: 760px) {
  .arts-how { grid-template-columns: minmax(0, 1fr); }
  .art { padding: 16px; }
  .art-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .art-title { font-size: 21px; }
  .seo-row { grid-template-columns: minmax(0, 1fr) auto; }
  .seo-row > span { grid-column: 1 / -1; padding: 0; }
  .art-body { font-size: 17px; }
  .art-body h1, .art-body h2 { font-size: 24px; }
  .art-body h3 { font-size: 20px; }
  .art-body table { display: block; overflow-x: auto; }
  .art-tools .btn-mini { font-size: 16px; }
}

/* where to next */
.arts-next-h{font-size:24px;margin:0 0 14px}
.arts-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.arts-next a{min-height:44px;display:block;padding:18px 20px;border:1px solid #cfe3ef;border-radius:12px;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.arts-next a:hover{border-color:#a51d26;transform:translateY(-2px)}
.arts-next b{display:block;font-size:18px;margin-bottom:6px}
.arts-next b::after{content:" \2192"}
.arts-next span{display:block;font-size:16px;line-height:1.5;opacity:.85}

/* readability pass: nothing read under 16px, article body 18px desktop / 17px phone */
.arts-zip small, .art-kind, .art-kind span, .seo-row > span, .art-tools .btn-mini, .art-seo .btn-mini { font-size: 16px; }
.art-kind span { letter-spacing: .02em; }
.art-body p, .art-body li { font-size: 18px; }
.art-body .disclosure, .art-body .bio p { font-size: 16px; }
@media (max-width: 760px) { .art-body p, .art-body li { font-size: 17px; } .art-body .disclosure, .art-body .bio p { font-size: 16px; } }
.arts-note, .arts-note b, .arts-note a { font-size: 16px; }