/* Long-form pages. Deliberately quiet: a reading column, generous leading, and
   no chrome competing with the text. */
  .prose { max-width: 700px; margin: 44px auto 0; padding: 0 24px; }
  .crumb { margin: 0 0 18px; font-size: 13px; }
  .crumb a { color: var(--muted); text-decoration: none; }
  .crumb a:hover { color: var(--text); }

  .prose h1 { font-size: clamp(30px, 4.2vw, 44px); font-weight: 620;
              letter-spacing: -.032em; line-height: 1.08; margin: 0 0 14px;
              max-width: 20ch; }
  .prose .meta { color: var(--faint); font-size: 13px; margin: 0 0 34px; }

  .prose .lede { font-size: 19px; line-height: 1.62; color: var(--soft);
                 margin: 0 0 28px; }
  .prose p { font-size: 16.5px; line-height: 1.72; color: var(--muted);
             margin: 0 0 20px; }
  .prose h2 { font-size: 23px; font-weight: 600; letter-spacing: -.02em;
              line-height: 1.25; margin: 40px 0 14px; color: var(--text); }
  .prose strong { color: var(--text); font-weight: 600; }
  .prose em { color: var(--soft); }
  .prose a { color: var(--text); text-decoration: underline;
             text-underline-offset: 3px; text-decoration-thickness: 1px;
             text-decoration-color: var(--border2); }
  .prose a:hover { text-decoration-color: var(--text); }
  .prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px;
                         color: var(--muted); font-size: 16.5px;
                         line-height: 1.72; }
  .prose li { margin-bottom: 10px; }
  .prose code { background: var(--well); border-radius: 5px; padding: 2px 6px;
                font-size: 14.5px; color: var(--soft); }

  /* Index list */
  .cardlist { max-width: 700px; margin: 30px auto 0; padding: 0 24px;
              display: flex; flex-direction: column; gap: 14px; }
  .cardlist a { display: block; background: var(--panel); border-radius: 14px;
                padding: 20px 22px; text-decoration: none; color: inherit;
                box-shadow: var(--elev-1);
                transition: transform .18s ease, box-shadow .18s ease; }
  .cardlist a:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
  .cardlist b { display: block; font-size: 18px; font-weight: 600;
                letter-spacing: -.015em; margin-bottom: 7px; }
  .cardlist span { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

  /* Closing call to action, shared by both page types */
  .endcta { margin-top: 72px; padding: 64px 24px; background: var(--well);
            text-align: center; }
  .endcta .inner { max-width: 560px; margin: 0 auto; }
  .endcta h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 600;
               letter-spacing: -.026em; margin: 0 0 12px; }
  .endcta p { color: var(--muted); font-size: 16px; line-height: 1.6;
              margin: 0 0 26px; }
  .cta { display: inline-block; background: var(--accent);
         color: var(--accent-fg); text-decoration: none; font-weight: 580;
         font-size: 15px; padding: 14px 28px; border-radius: 11px; }
  .cta:hover { background: var(--accent-hover); }

  .sitefoot { display: flex; gap: 20px; justify-content: center;
              padding: 30px 24px 44px; font-size: 13.5px; }
  .sitefoot a { color: var(--muted); text-decoration: none; }
  .sitefoot a:hover { color: var(--text); }

  @media (max-width: 640px) {
    .prose { margin-top: 30px; padding: 0 20px; }
    .prose .lede { font-size: 17.5px; }
    .prose p, .prose ul, .prose ol { font-size: 16px; }
    .cardlist { padding: 0 20px; }
    .endcta { padding: 52px 20px; }
  }