/* NeverMessy — article.css
   Version: 1.0
   Shared stylesheet for the content/article pages (the hub article and the
   three pattern articles). Pulled out of the individual page files so the
   four of them can't drift apart, and so it's cached across the cluster
   rather than re-sent inline on every article a reader clicks through to.

   The funnel pages (index, quiz, sales) deliberately keep their inline
   styles — they're single-visit pages where an extra request costs more
   than the duplication saves.

   Location: /home/nevermessy/public_html/article.css */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f7f5f1;
  color: #2a2a2a;
  line-height: 1.65;
  padding: 32px 16px 60px;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 660px; margin: 0 auto; }

header.site { margin-bottom: 22px; }
header.site a {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: #1f6b5a; font-weight: 700; font-size: 16px;
}
header.site img { width: 30px; height: 30px; border-radius: 7px; }

.crumbs { font-size: 13px; color: #999; margin-bottom: 26px; }
.crumbs a { color: #1f6b5a; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 5px; }

h1 { font-size: 30px; line-height: 1.25; font-weight: 800; margin-bottom: 14px; }
.standfirst { font-size: 17px; color: #555; margin-bottom: 30px; }

h2 { font-size: 21px; line-height: 1.3; font-weight: 700; margin: 34px 0 12px; }
h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
p  { font-size: 16px; color: #333; margin-bottom: 15px; }

ul { margin: 0 0 18px 20px; }
li { font-size: 16px; color: #333; margin-bottom: 7px; }

a { color: #1f6b5a; }

.callout {
  background: #fff;
  border: 1.5px solid #ddd;
  border-left: 4px solid #1f6b5a;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 26px 0;
}
.callout p:last-child { margin-bottom: 0; }

.cite { font-size: 13px; color: #767676; }

.cta {
  margin: 38px 0 10px;
  padding: 24px;
  background: #fff;
  border: 1.5px solid #ddd;
  border-radius: 14px;
  text-align: center;
}
.cta h2 { margin-top: 0; }
.cta-btn {
  display: inline-block; margin-top: 8px; padding: 14px 26px;
  border-radius: 12px; background: #1f6b5a; color: #fff;
  font-weight: 700; text-decoration: none;
}
.cta-btn:hover { background: #1a5b4c; }

footer.site {
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid #e5e2db;
  font-size: 13px; color: #767676;
}
footer.site a { color: #1f6b5a; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  h1 { font-size: 25px; }
  h2 { font-size: 19px; }
  body { padding: 24px 14px 48px; }
}