/* Smaller heading clamps for long-form content */
    h3 { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; }
    h4 { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.3; }

    /* Year filter (hero, right-aligned) — site pill styling */
    .cl-filter select {
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      font-size: 14px;
      color: #242424;
      background-color: #F2F1EE;
      border: 1px solid #E4E4E2;
      border-radius: 9999px;
      padding: 9px 40px 9px 18px;
      min-width: 132px;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='m1 1 4 4 4-4' stroke='%236B7280' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
    }
    .cl-filter select:focus { outline: none; border-color: #b9b9b3; }

    /* Date rail — site date pill, MM-DD-YYYY format like 05-11-2026 */
    .cl-date {
      display: inline-block;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: #6B7280;
      background: #F2F1EE;
      border: 1px solid #E4E4E2;
      border-radius: 4px;
      padding: 3px 8px;
      font-variant-numeric: tabular-nums;
    }

    /* Entry layout — hairline divider between entries */
    .cl-entry {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 36px 0;
    }
    .cl-entry + .cl-entry { border-top: 1px solid #E4E4E2; }
    @media (min-width: 768px) {
      .cl-entry {
        grid-template-columns: 120px 1fr;
        gap: 48px;
        padding: 56px 0;
      }
    }
    @media (min-width: 768px) {
      .cl-aside { position: sticky; top: 96px; align-self: start; }
    }

    .cl-body h2 {
      font-size: clamp(20px, 2vw, 24px);
      line-height: 1.2;
      letter-spacing: -0.025em;
      font-weight: 500;
      color: #242424;
    }
    .cl-body .lede {
      margin-top: 10px;
      color: #4D4B48;
      font-size: 14.5px;
      line-height: 1.6;
      max-width: 540px;
    }
    .cl-body ul.bullets {
      margin-top: 12px;
      max-width: 540px;
      list-style: none;
      padding: 0;
    }
    .cl-body ul.bullets li {
      position: relative;
      padding-left: 18px;
      font-size: 14.5px;
      line-height: 1.6;
      color: #4D4B48;
      margin-top: 6px;
    }
    .cl-body ul.bullets li:first-child { margin-top: 0; }
    .cl-body ul.bullets li::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 0.7em;
      width: 4px; height: 4px;
      border-radius: 9999px;
      background: #9B9995;
    }
    .cl-body ul.bullets li strong { color: #242424; font-weight: 500; }

    /* Rich-text bodies come from marked (GFM): cover the block types the
       renderer can emit beyond ul — preflight otherwise strips all of them. */
    .cl-richtext p { max-width: 540px; font-size: 14.5px; line-height: 1.6; color: #4D4B48; }
    .cl-richtext p + p, .cl-richtext ol + p, .cl-richtext p + ol { margin-top: 10px; }
    .cl-richtext ol {
      list-style: decimal;
      margin-top: 12px;
      padding-left: 20px;
      max-width: 540px;
      font-size: 14.5px;
      line-height: 1.6;
      color: #4D4B48;
    }
    .cl-richtext ol li { margin-top: 6px; }
    .cl-richtext pre {
      overflow-x: auto;
      max-width: 540px;
      margin-top: 12px;
      background: #F7F6F3;
      border: 1px solid #E4E4E2;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.6;
    }
    .cl-richtext :not(pre) > code {
      background: #F2F1EE;
      border-radius: 5px;
      padding: 1px 5px;
      font-size: 0.9em;
    }

    .cl-body figure {
      margin-top: 22px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #E4E4E2;
      background: #F2F1EE;
      max-width: 540px;
    }
    .cl-body figure img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    /* Load more */
    .loadmore {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 22px;
      border-radius: 9999px;
      background: #242424;
      color: #F8F8F7;
      font-size: 14px;
      font-weight: 500;
      transition: background .2s;
    }
    .loadmore:hover { background: #3F3D3A; }

    /* NOTE: the subscribe band styles (.cl-subscribe / .cl-consent / .cl-msg)
       live in site.css so the opt-in band works on any page (Changelog,
       Roadmap, …) via the shared SubscribeBand component. */