/* ==========================================================================
   blog.css — page-specific CSS for blog.html
   --------------------------------------------------------------------------
   Extracted from an inline <style> block on 2026-07-28. These rules style
   layout that exists only on this page, so they do not belong in the shared
   sheets — but they do not belong in the HTML either: as a file they are
   cacheable, diffable, and reviewable.

   Load order on this page:
       tokens.css -> licorp.css -> lic-system.css -> blog.css
   Last, so page-specific layout can adjust a shared component.
   ========================================================================== */

.blog-sec{padding-top:8px;padding-bottom:clamp(64px,9vw,120px)}
  .blog-list{max-width:var(--maxw);margin:0 auto}
  .blog-featured{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch;background:#fff;text-decoration:none;overflow:hidden;margin-bottom:44px;box-shadow:0 2px 6px rgba(19,28,36,.06);transition:transform .25s ease}
  .blog-featured:hover{box-shadow:0 18px 40px rgba(19,28,36,.12)}
  .bf-media{position:relative;overflow:hidden;min-height:340px}
  .bf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .blog-featured:hover .bf-media img{transform:scale(1.04)}
  .bf-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.5vw,48px)}
  .bf-date{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .blog-featured h2{font-size:clamp(26px,3vw,40px);color:var(--ink);line-height:1.15;margin:12px 0 14px}
  .bf-excerpt{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 20px;max-width:52ch}
  .bf-more{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--navy)}
  .bf-more .arw{display:inline-block;margin-left:6px;transition:transform .3s}
  .blog-featured:hover .bf-more{text-decoration:underline;text-underline-offset:3px}
  .blog-featured:hover .bf-more .arw{transform:translateX(5px)}
  .blog-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px}
  @media(max-width:1024px){.blog-feed{grid-template-columns:1fr 1fr}.blog-featured{grid-template-columns:1fr}.bf-media{min-height:220px}}
  @media(max-width:640px){.blog-feed{grid-template-columns:1fr}}