/* Shared article styles (externalised from head <style>, §9.3) */
/* ===================== BLOG POST (page-scoped) ===================== */
    .post-hero-band .container {
      display: block; text-align: center;
      padding-top: clamp(8rem, 12vw, 11rem);
      padding-bottom: clamp(3rem, 5vw, 4.5rem);
    }
    .post-meta-row {
      display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap;
      font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
      color: rgba(255,255,255,.65); margin-bottom: 1rem;
    }
    .post-meta-row .cat { color: var(--orange); }
    .post-hero-band h1 { color: #fff; font-weight: 700; max-width: 22ch; margin: 0 auto; font-size: clamp(2rem, 4vw, 2.85rem); line-height: 1.15; }
    @media (max-width: 600px) {
      /* Move the close cross up onto the same row as the date, right of it, clear of the burger menu. */
      .post-hero-band .hero-close { top: 6rem; right: 1.25rem; }
    }

    /* Two-column article layout */
    .post-layout {
      display: grid; grid-template-columns: minmax(0, 1fr) 340px;
      gap: clamp(2rem, 5vw, 4rem); align-items: start;
    }
    .post-featured-img { border-radius: var(--radius); overflow: hidden; margin-bottom: clamp(2rem, 4vw, 3rem); }
    .post-featured-img img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }

    .post-body p { color: var(--body); line-height: 1.4; margin-bottom: 1.4rem; }
    .post-body p a { color: var(--orange); font-weight: 700; }
    .post-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.2; margin: 2.75rem 0 1.1rem; }
    .post-body h2:first-child { margin-top: 0; }
    .post-body h3 { font-size: 1.15rem; line-height: 1.25; margin: 1.8rem 0 .5rem; }
    .post-body ul, .post-body ol { margin: 0 0 1.6rem; padding-left: 1.4rem; color: var(--body); line-height: 1.7; }
    .post-body li { margin-bottom: .6rem; text-wrap: balance; }
    .post-body li strong { color: var(--ink); }
    .post-body ol { list-style: decimal; }
    .post-body ol li::marker { font-weight: 800; color: var(--orange); }

    /* Sidebar */
    .post-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 7.5rem; }
    .sidebar-card {
      background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
      padding: clamp(1.5rem, 2.5vw, 1.85rem);
    }
    .sidebar-card h4 { font-size: 1.1rem; margin-bottom: 1.3rem; }
    .sidebar-card h4 .accent { color: var(--orange); }
    .related-item { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.2rem; }
    .related-item:last-child { margin-bottom: 0; }
    .related-icon {
      width: 34px; height: 34px; border-radius: 50%; background: #fdeee6; color: var(--orange);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem;
    }
    .related-icon svg { width: 16px; height: 16px; }
    .related-item a {
      color: var(--ink); font-weight: 700; font-size: .92rem; line-height: 1.35; text-decoration: none;
    }
    .related-item a:hover { color: var(--orange); }
    .related-item .cat { display: block; font-size: .78rem; color: var(--body); opacity: .65; margin-top: .25rem; font-weight: 600; }

    .sidebar-related {
      background: url("../img/blog/beige-pink-grads-landscape-02.2.jpg") center / cover no-repeat;
      border: none;
    }
    .sidebar-related h4 { font-size: 42px; }

    .sidebar-cta-inline {
      margin-top: 1.4rem;
    }
    .sidebar-cta-inline h4 { font-size: 25px; margin-bottom: 1rem; }

    @media (max-width: 980px) {
      .post-layout { grid-template-columns: 1fr; }
      .post-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
      .post-sidebar .sidebar-card { flex: 1 1 260px; }
    }

    /* "Discover more" grid — matches blog.html's card component */
    .blog-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 2.6rem 2rem;
      margin-top: clamp(2.5rem, 4vw, 3.5rem);
    }
    .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); }
    .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; }
    @media (max-width: 900px) {
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .blog-grid { grid-template-columns: 1fr; }
    }