/* ============================================================
   Auxano Insights: article and index styles
   Layered on top of v2.css. Green is the editorial accent,
   orange stays reserved for calls to action.
   ============================================================ */

/* ---------- Article hero ---------- */
.post-hero { padding: 88px 0 72px; }
.post-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 18em; margin-bottom: 1.3rem; }
.post-hero .lede { color: rgba(255,255,255,0.82); max-width: 40em; }
.byline {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.byline strong { color: #FFFFFF; font-weight: 500; }
.crumbs { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.4rem; display: block; }
.crumbs a { color: rgba(255,255,255,0.7); }
.crumbs a:hover { color: #FFFFFF; }

/* ---------- Article body ---------- */
.article-wrap { padding: 72px 0 96px; }
.article { max-width: 760px; margin: 0 auto; font-size: 1.06rem; line-height: 1.72; color: #2A2F35; }
.article section { padding: 0; }
.article p { margin: 0 0 1.05em; }
.article a { color: var(--green); text-decoration: underline; text-decoration-color: rgba(62,85,36,0.35); text-underline-offset: 3px; }
.article a:hover { text-decoration-color: var(--green); }
.article b, .article strong { color: var(--ink); font-weight: 600; }

.article .note .lede { font-size: 1.2rem; line-height: 1.65; color: var(--ink); max-width: none; }

.article .kicker {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--green); margin: 0 0 0.6rem;
}
.article .section-head {
  max-width: none; margin: 3.6rem 0 1.4rem; padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--ink);
}
.article h2.section, .article .section-head h2 {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin: 0;
}

.article .item { padding: 1.7rem 0; border-bottom: 1px solid var(--hairline); }
.article .item:last-child { border-bottom: none; }
.article .item .cat {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray); margin: 0 0 0.5rem;
}
.article .item h3 { font-family: var(--display); font-weight: 500; font-size: 1.32rem; line-height: 1.3; margin: 0 0 0.5rem; }
.article .item h3 a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.article .item h3 a:hover { border-bottom-color: var(--green); }
.article .meta { font-size: 0.86rem; color: var(--gray); margin: 0 0 1rem; line-height: 1.6; }
.article .meta a { color: var(--gray); }

.article .why {
  background: var(--cream); border-left: 3px solid var(--green);
  padding: 16px 20px; margin: 1.1rem 0 0; font-size: 1rem; color: var(--ink); border-radius: 0 4px 4px 0;
}
.article .why b { color: var(--green); }

.article .claim {
  display: inline-block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray); border: 1px solid var(--hairline);
  background: #FFFFFF; border-radius: 3px; padding: 2px 8px; margin-right: 8px; vertical-align: 2px; font-weight: 500;
}

.article .takeaways { list-style: none; margin: 0; padding: 0; }
.article .takeaways li { position: relative; padding: 0.9rem 0 0.9rem 1.7rem; border-bottom: 1px solid var(--hairline); }
.article .takeaways li:last-child { border-bottom: none; }
.article .takeaways li::before {
  content: ""; position: absolute; left: 0; top: 1.55rem; width: 8px; height: 8px; background: var(--green);
}

.article .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.article .grid2 h4 {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray); margin: 0 0 0.6rem;
}
.article .grid2 ul { margin: 0 0 1.2rem; padding-left: 1.1rem; }
.article .grid2 li { margin: 0 0 0.5rem; font-size: 0.95rem; }
@media (max-width: 640px) { .article .grid2 { grid-template-columns: 1fr; } }

.article .disc {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline);
  font-size: 0.84rem; color: var(--gray); line-height: 1.6;
}

/* ---------- Inline call to action ---------- */
.cta-inline {
  margin: 2.6rem 0 0.6rem; padding: 28px 30px; background: var(--ink); color: #FFFFFF; border-radius: 6px;
}
.cta-inline .cta-kicker { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin: 0 0 0.6rem; }
.cta-inline .cta-head { font-family: var(--display); font-size: 1.35rem; line-height: 1.3; color: #FFFFFF; margin: 0 0 0.7rem; }
.cta-inline p { color: rgba(255,255,255,0.8); font-size: 1rem; }
.cta-inline .btn { margin-top: 0.4rem; text-decoration: none; }
.article .cta-inline a.btn { color: #FFFFFF; }

/* ---------- Prev / next ---------- */
.post-nav { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 96px; }
.post-nav a {
  display: block; border: 1px solid var(--hairline); border-radius: 6px; padding: 20px 22px; color: var(--ink);
}
.post-nav a:hover { text-decoration: none; border-color: var(--green); }
.post-nav span { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.post-nav strong { font-family: var(--display); font-weight: 500; font-size: 1.05rem; line-height: 1.35; }
.post-nav .next { text-align: right; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } .post-nav .next { text-align: left; } }

/* ---------- Index list ---------- */
.post-list { list-style: none; max-width: 860px; }
.post-list li { border-bottom: 1px solid var(--hairline); }
.post-list li:first-child { border-top: 1px solid var(--hairline); }
.post-list a { display: block; padding: 34px 0; color: var(--ink); }
.post-list a:hover { text-decoration: none; }
.post-list a:hover h2 { color: var(--green); }
.post-list .pl-meta { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); display: block; margin-bottom: 0.7rem; }
.post-list h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; margin-bottom: 0.7rem; transition: color 150ms ease; }
.post-list p { color: var(--gray); max-width: 44em; }
.post-list .pl-more { display: inline-block; margin-top: 0.8rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }
.post-list li.featured a { padding-top: 40px; }
.post-list li.featured h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.follow-link { margin-left: 18px; }
@media (max-width: 520px) { .follow-link { display: inline-block; margin: 16px 0 0; } }

/* ---------- Share ---------- */
.share-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.share-bar a, .share-bar button {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 16px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #FFFFFF; text-decoration: none;
}
.share-bar a:hover, .share-bar button:hover { border-color: #FFFFFF; text-decoration: none; }
.share-bar .share-li::before {
  content: "in"; font-family: var(--body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0; text-transform: none;
  background: #FFFFFF; color: var(--ink); border-radius: 2px; padding: 0 4px; line-height: 1.3;
}
.share-bar button:focus-visible, .share-bar a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.share-end { margin-top: 2.6rem; padding: 22px 0 0; border-top: 1px solid var(--hairline); }
.share-end p { margin: 0; color: var(--ink); font-weight: 500; }
.share-bar--light { margin-top: 1rem; }
.article .share-bar--light a, .share-bar--light button { color: var(--ink); border-color: var(--hairline); text-decoration: none; }
.share-bar--light a:hover, .share-bar--light button:hover { border-color: var(--ink); }
.share-bar--light .share-li::before { background: var(--ink); color: #FFFFFF; }