/* ----- Article page wrapper (white reading band) ----- */
    .article-page {
      background: #ffffff;
      padding: 96px 24px 96px;
    }
    .article-hero-min,
    .article-featured-min,
    .article-body {
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ----- Hero (title + meta) ----- */
    .article-back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 28px;
      transition: color 0.2s ease;
    }
    .article-back-link svg { width: 16px; height: 16px; }
    .article-back-link:hover { color: var(--purple-hover); }

    .article-hero-min {
      margin-top: 56px;
    }
    .article-hero-min h1 {
      font-size: clamp(32px, 4vw, 44px);
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text-heading);
      margin: 0 0 32px;
    }
    .article-meta-row {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 64px;
    }
    .article-cat-pill {
      display: inline-flex;
      align-items: center;
      padding: 6px 14px;
      border: 1px solid rgba(0,0,0,0.18);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-heading);
      background: #fff;
      transition: all 0.2s ease;
    }
    .article-cat-pill:hover {
      border-color: var(--purple);
      color: var(--purple-hover);
      background: var(--purple-light);
    }
    .article-meta-date {
      font-size: 14px;
      color: var(--text-muted);
      font-weight: 500;
    }
    .article-meta-sep { margin: 0 6px; opacity: 0.6; }

    /* ----- Featured image ----- */
    .article-featured-min {
      margin: 0 auto 64px;
      border-radius: 18px;
      overflow: hidden;
      max-height: 520px;
    }
    .article-featured-min img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ----- Body typography ----- */
    .article-body {
      color: var(--text-body);
      font-size: 18px;
      line-height: 1.75;
    }
    .article-body > * + * { margin-top: 1.4em; }
    .article-body p { font-size: 18px; line-height: 1.75; color: var(--text-body); }
    .article-body p:first-of-type {
      font-size: 19px;
      color: var(--text-heading);
      font-weight: 400;
      line-height: 1.7;
    }
    .article-body h2 {
      font-size: 28px;
      font-weight: 700;
      line-height: 1.3;
      color: var(--text-heading);
      margin-top: 2em;
      letter-spacing: -0.01em;
    }
    .article-body h3 {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--text-heading);
      margin-top: 1.8em;
    }
    .article-body h4 {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-heading);
      margin-top: 1.6em;
    }
    .article-body a {
      color: var(--purple-bright);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }
    .article-body a:hover { color: var(--purple-hover); }
    .article-body strong { color: var(--text-heading); font-weight: 700; }

    /* Numbered list — bold lead-in pattern */
    .article-body ol {
      list-style: none;
      counter-reset: art-li;
      padding-left: 0;
    }
    .article-body ol > li {
      counter-increment: art-li;
      padding-left: 36px;
      position: relative;
      margin-top: 1em;
    }
    .article-body ol > li::before {
      content: counter(art-li) ".";
      position: absolute;
      left: 0;
      top: 0;
      font-weight: 700;
      color: var(--text-heading);
    }
    .article-body ol > li > strong:first-child {
      color: var(--text-heading);
    }

    /* Unordered list */
    .article-body ul { padding-left: 1.4em; }
    .article-body ul > li { margin-top: 0.5em; }
    .article-body ul > li::marker { color: var(--purple); }

    /* Blockquote with quotation mark */
    .article-body blockquote {
      position: relative;
      margin: 2em 0;
      padding: 12px 0 12px 56px;
      font-size: 22px;
      line-height: 1.5;
      color: var(--text-heading);
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .article-body blockquote::before {
      content: "\201C";
      position: absolute;
      left: 0;
      top: -8px;
      font-size: 56px;
      line-height: 1;
      color: var(--purple);
      font-family: Georgia, 'Times New Roman', serif;
      font-weight: 700;
    }
    .article-body blockquote p {
      font-size: inherit !important;
      color: inherit !important;
      line-height: inherit !important;
      margin: 0 !important;
    }

    /* ----- Inline images / figures -----
       An image fills the reading column when its source is large enough, and
       sits centred at its natural size when it is not. Nothing is ever scaled
       up, so small or portrait images stay sharp instead of going blurry.
       A width set in the block sidebar arrives as an inline style and wins
       over this automatically. */
    .article-body figure,
    .article-body > img {
      margin: 2.8em 0;
    }
    .article-body figure > img,
    .article-body > img {
      display: block;
      width: auto;
      max-width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
      border-radius: 14px;
    }
    /* Tall portrait sources (phone screenshots) are capped by height so a
       single image cannot take over the whole screen. Width stays auto, so the
       aspect ratio is preserved without any cropping. */
    .article-body figure > img {
      max-height: 720px;
    }

    /* Alignment fallbacks, so these never render broken if they get used. */
    .article-body figure.aligncenter {
      margin-left: auto;
      margin-right: auto;
    }
    .article-body figure.alignleft,
    .article-body figure.alignright {
      width: 50%;
      max-width: 340px;
      margin-top: 0.4em;
      margin-bottom: 1.6em;
    }
    .article-body figure.alignleft  { float: left;  margin-right: 1.8em; }
    .article-body figure.alignright { float: right; margin-left: 1.8em; }
    .article-body::after { content: ""; display: block; clear: both; }

    /* style.css hides every .wp-block-image figcaption site-wide, which also
       swallowed captions inside articles. Bring them back here only. */
    .article-body figcaption,
    .article-body .wp-block-image figcaption {
      display: block;
      margin-top: 10px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-muted);
      text-align: center;
    }

    @media (max-width: 700px) {
      .article-body figure,
      .article-body > img { margin: 2em 0; }
      .article-body figure.alignleft,
      .article-body figure.alignright {
        float: none;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
      }
    }

    /* Gutenberg columns — keep side-by-side on desktop, stack on mobile */
    .article-body .wp-block-columns {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin: 2em 0;
      align-items: flex-start;
    }
    .article-body .wp-block-column {
      flex: 1 1 0%;
      min-width: 0;
      margin: 0;
    }
    .article-body .wp-block-column > figure,
    .article-body .wp-block-column > p,
    .article-body .wp-block-column > * {
      margin-top: 0;
    }
    .article-body .wp-block-column > * + * { margin-top: 1em; }
    .article-body .wp-block-column figure {
      margin: 0;
    }
    /* Inside a column the image fills the column, and the radius stays on the
       image itself so it is visible whatever the source size. */
    .article-body .wp-block-column figure > img {
      width: 100%;
      max-height: none;
      border-radius: 14px;
    }
    .article-body .wp-block-column figcaption {
      padding: 0 4px;
    }
    @media (max-width: 700px) {
      .article-body .wp-block-columns { flex-direction: column; gap: 24px; }
      .article-body .wp-block-column { flex-basis: 100%; width: 100%; }
    }
    .article-body hr {
      border: 0;
      border-top: 1px solid rgba(0,0,0,0.08);
      margin: 2.4em 0;
    }
    .article-body code {
      background: var(--bg-alt);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.92em;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .article-body pre {
      background: var(--bg-dark);
      color: #f1f1f5;
      padding: 18px 20px;
      border-radius: 12px;
      overflow-x: auto;
      font-size: 14px;
      line-height: 1.6;
    }
    .article-body pre code { background: transparent; padding: 0; color: inherit; }

    /* ----- Related ----- */
    .article-related {
      background: var(--bg-primary);
      padding: 80px 0;
    }
    .article-related-head { text-align: center; margin-bottom: 40px; }
    .article-related-head .section-label { text-align: center; margin-bottom: 10px; }
    .article-related-head h2 {
      font-size: 32px;
      font-weight: 700;
      color: var(--text-heading);
      line-height: 1.25;
    }
    .blog-card--link { display: block; color: inherit; }
    .blog-card-image-placeholder {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: linear-gradient(135deg, var(--purple-light), var(--bg-alt));
    }

    /* ----- Responsive ----- */
    @media (max-width: 900px) {
      .article-page { padding: 56px 20px 72px; }
      .article-hero-min { margin-top: 36px; }
      .article-hero-min h1 { font-size: 28px; margin-bottom: 24px; }
      .article-meta-row { margin-bottom: 44px; }
      .article-featured-min { margin-bottom: 44px; }
      .article-body { font-size: 17px; }
      .article-body p:first-of-type { font-size: 18px; }
      .article-body h2 { font-size: 24px; }
      .article-body h3 { font-size: 20px; }
      .article-body blockquote {
        font-size: 19px;
        padding-left: 44px;
      }
      .article-body blockquote::before { font-size: 44px; }
      .article-featured-min { max-height: 340px; margin-bottom: 36px; }
      .article-related { padding: 60px 0; }
    }