/* blog — externalised head <style> (§9.3) */
/* ===================== BLOG PAGE (page-scoped) ===================== */
    .blog-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 2.6rem 2rem;
      margin-top: clamp(2.5rem, 4vw, 3.5rem);
    }
    .blog-grid[hidden] { display: none; }
    .blog-card { display: flex; flex-direction: column; }
    .blog-card-media {
      display: block; border-radius: var(--radius-sm); overflow: hidden;
      aspect-ratio: 4 / 3; background: var(--bg-grey);
    }
    .blog-card-media img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .4s ease;
    }
    .blog-card:hover .blog-card-media img { transform: scale(1.05); }
    /* This one image is square (800x800) — cover crops it awkwardly against the
       card's 4:3 box, so let it sit in full without cropping. */
    a[href="eco-friendly-merchandise.html"].blog-card-media img { object-fit: contain; }
    .blog-card-body { padding-top: 1.4rem; }
    .blog-card h3 {
      font-size: 1.35rem; line-height: 1.15; margin-bottom: .7rem;
    }
    .blog-card h3 a { color: var(--ink); transition: color .2s; }
    .blog-card h3 a:hover { color: var(--orange); }
    .blog-card-meta {
      font-size: .82rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .04em; color: var(--body); opacity: .55;
      margin-bottom: .8rem;
    }
    .blog-card-excerpt { color: var(--body); font-size: .98rem; line-height: 1.55; opacity: .85; }
    .blog-pagination {
      display: flex; align-items: center; justify-content: center; gap: 1.2rem;
      margin-top: clamp(2.5rem, 4vw, 3.5rem);
    }
    .blog-pagination .arrow-circle:not(:hover) { border-color: #000; color: #000; }
    .blog-pagination .arrow-circle[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
    .pagination-nums { display: flex; align-items: center; gap: .4rem; }
    .pagination-num {
      width: 40px; height: 40px; border-radius: 50%;
      display: grid; place-items: center;
      border: 2px solid transparent; background: transparent;
      font-weight: 700; font-size: .95rem; color: var(--body); cursor: pointer;
      transition: background-color .2s, color .2s, border-color .2s;
    }
    .pagination-num:hover { border-color: var(--orange); }
    .pagination-num.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
    @media (max-width: 900px) {
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .blog-grid { grid-template-columns: 1fr; }
    }
    #blog-intro { margin-top: 80px; }
    #blog-intro .media { aspect-ratio: 1 / 1; }
    #blog-intro .media img { width: 100%; height: 100%; object-fit: cover; }