/* Articles pages: page-only rules. Tokens, base, header (.site-header) and footer come from ../assets/site.css (lane B). */
img { height:auto; }
.ico { width:18px; height:18px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:16px; background:var(--paper-0); padding:8px 12px; z-index:9; }
footer .fb { color:var(--forest-800); text-decoration:none; }
/* Article */
.article { max-width:720px; margin:0 auto; padding:56px var(--gutter) 24px; }
.crumb { font-size:14px; font-weight:600; margin-bottom:22px; }
.crumb a { color:var(--teal-600); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.eyebrow { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-600); margin-bottom:12px; }
.article h1 { font-size:clamp(34px,5vw,52px); line-height:1.08; margin-bottom:22px; }
.byline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:15px; color:var(--forest-600); padding-bottom:28px; border-bottom:1px solid var(--border); margin-bottom:36px; }
.byline b { color:var(--forest-800); font-weight:600; }
.byline .xlink { display:inline-flex; align-items:center; gap:6px; color:var(--teal-600); font-weight:600; text-decoration:none; }
.byline .xlink:hover { text-decoration:underline; }
.byline .dot { width:4px; height:4px; border-radius:50%; background:var(--paper-300); }
.prose { font-size:18.5px; line-height:1.72; color:var(--forest-800); }
.prose > * + * { margin-top:1.1em; }
.prose h2 { font-size:clamp(26px,3.2vw,32px); line-height:1.15; margin-top:1.9em; }
.prose h2 + * { margin-top:.7em; }
.prose strong { font-weight:600; color:var(--forest-900); }
.prose ol, .prose ul { padding-left:1.3em; }
.prose li + li { margin-top:.6em; }
.prose li::marker { color:var(--sprout-700); font-weight:600; }
.prose code { font-family:var(--font-mono); font-size:.86em; background:var(--paper-100); border:1px solid var(--border); border-radius:6px; padding:1px 6px; }
.prose figure { margin:2em 0; }
.prose figure img { width:100%; border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--shadow-sm); background:var(--paper-0); }
.prose figcaption { font-size:14.5px; line-height:1.5; color:var(--forest-600); margin-top:10px; }
.prose .lede { font-size:21px; line-height:1.6; }

/* Closing CTA */
.cta-panel { max-width:720px; margin:48px auto 72px; padding:0 var(--gutter); }
.cta-inner { background:var(--forest-900); border:1px solid var(--forest-800); border-radius:var(--r-xl); padding:32px; color:var(--paper-0); box-shadow:var(--shadow-md); }
.cta-inner h2 { color:var(--paper-0); font-size:clamp(26px,3vw,32px); line-height:1.15; margin-bottom:10px; }
.cta-inner p { color:var(--mint-100); font-size:17px; margin-bottom:22px; }
.btns { display:flex; flex-wrap:wrap; gap:12px; }
.cta-inner .btn--ghost { background:transparent; color:var(--paper-0); border-color:var(--forest-600); }
.cta-inner .btn--ghost:hover { background:var(--forest-800); }
.cta-inner .btn--solid:hover { background:var(--sprout-300); color:var(--forest-900); }
.cta-inner :focus-visible { outline-color:var(--sprout-300); }

/* Shelf */
.shelf-hero { max-width:1240px; margin:0 auto; padding:56px var(--gutter) 8px; }
.shelf-hero h1 { font-size:clamp(40px,6vw,64px); line-height:1.04; margin-bottom:14px; }
.shelf-hero .sub { font-size:clamp(18px,2vw,21px); color:var(--forest-600); max-width:40ch; }
.shelf { max-width:1240px; margin:0 auto; padding:36px var(--gutter) 24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; list-style:none; }
.acard { display:flex; flex-direction:column; gap:12px; height:100%; padding:26px 24px 22px; background:var(--paper-0); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.acard:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.acard .thumb { aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--paper-100); border:1px solid var(--border); }
.acard .thumb img { width:100%; height:100%; object-fit:cover; }
.acard h2 { font-size:26px; line-height:1.15; }
.acard p { font-size:16px; color:var(--forest-600); }
.acard .meta { margin-top:auto; padding-top:6px; display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; color:var(--teal-600); }
.acard .meta span:last-child { display:inline-flex; align-items:center; gap:6px; color:var(--sprout-700); }
.shelf-cta { max-width:1240px; margin:24px auto 72px; padding:0 var(--gutter); }
.shelf-cta .cta-inner { display:flex; align-items:center; gap:20px 32px; flex-wrap:wrap; }
.shelf-cta .cta-inner > div { flex:1 1 360px; }
.shelf-cta .cta-inner p { margin-bottom:0; }

@media (max-width:760px) {
  .article { padding-top:36px; }
  .prose { font-size:17.5px; line-height:1.68; }
  .prose .lede { font-size:19px; }
  .cta-inner { padding:24px 20px; }
  .shelf { grid-template-columns:minmax(0,1fr); }
  .shelf-hero { padding-top:36px; }
  .acard h2 { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) { .acard { transition:none; } .acard:hover { transform:none; } }