/* Single article view */
  .article-hero {
    padding: 72px 0 36px;
    position: relative; overflow: hidden;
  }
  .article-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 600px 400px at 92% 8%, rgba(196,42,111,0.08), transparent 60%),
      radial-gradient(ellipse 500px 400px at 8% 70%, rgba(240,163,64,0.06), transparent 60%);
  }
  .article-hero-in { position: relative; max-width: 820px; margin: 0 auto; padding: 0 36px; }
  .article-hero .breadcrumb {
    margin: 0 0 32px; padding: 0;
    font-family: var(--he-font-sans); font-size: 12px; color: var(--he-fg-3);
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .article-hero .breadcrumb a { color: var(--he-fg-2); }
  .article-hero .breadcrumb a:hover { color: var(--c-clay); }
  .article-hero .cat-tag {
    font-family: var(--he-font-sans); font-size: 12px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-magenta);
    display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px;
  }
  .article-hero .cat-tag::before {
    content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; opacity: 0.7;
  }
  .article-hero h1 {
    font-family: var(--he-font-display); font-size: clamp(36px, 5vw, 64px);
    font-weight: 400; line-height: 1.08; letter-spacing: -0.022em;
    margin: 0 0 24px; color: var(--c-ink);
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .article-hero .meta-row {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    font-family: var(--he-font-sans); font-size: 13px; color: var(--he-fg-3);
    letter-spacing: 0.04em; padding-bottom: 8px;
  }
  .article-hero .meta-row .author {
    color: var(--c-ink); font-weight: 600;
  }
  .article-hero .meta-row .author-avatar {
    display: inline-block; width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-magenta), var(--c-violet));
    margin-inline-end: 8px; vertical-align: middle;
    color: var(--he-paper); text-align: center; line-height: 26px;
    font-family: var(--he-font-display); font-style: italic; font-size: 12px; font-weight: 600;
  }
  .article-hero .meta-row .dot {
    width: 4px; height: 4px; border-radius: 50%; background: var(--he-border-strong);
  }

  /* Cover */
  .article-cover-wrap {
    max-width: 1140px; margin: 0 auto 64px; padding: 0 36px;
  }
  .article-cover {
    aspect-ratio: 21 / 9;
    border-radius: var(--he-r-md);
    overflow: hidden;
    background: var(--he-surface-2);
    position: relative;
  }
  .article-cover img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .article-cover .cover-fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--he-font-display); font-style: italic; font-size: 120px;
    color: rgba(255,255,255,0.85);
  }
  .article-cover .cat-method { background: linear-gradient(135deg, var(--c-violet) 0%, var(--c-magenta) 100%); }
  .article-cover .cat-parents { background: linear-gradient(135deg, var(--c-magenta) 0%, var(--c-flame) 100%); }
  .article-cover .cat-fears { background: linear-gradient(135deg, var(--c-ember) 0%, var(--c-violet) 100%); }
  .article-cover .cat-models { background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-flame) 100%); }
  .article-cover .cat-awareness { background: linear-gradient(135deg, var(--c-flame) 0%, var(--c-amber) 100%); }
  .article-cover .cat-depression { background: linear-gradient(135deg, var(--c-violet) 0%, var(--c-ink) 100%); }
  .article-cover .cat-whole-person { background: linear-gradient(135deg, var(--c-violet) 0%, var(--c-amber) 100%); }
  .article-cover .cat-emotions { background: linear-gradient(135deg, var(--c-magenta) 0%, var(--c-ember) 100%); }
  .article-cover .cat-love { background: linear-gradient(135deg, var(--c-magenta) 0%, var(--c-rose-soft) 100%); }
  .article-cover .cat-adhd { background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-magenta) 100%); }
  .article-cover .cat-obsession { background: linear-gradient(135deg, var(--c-ember) 0%, var(--c-magenta) 100%); }
  .article-cover .cat-einstein { background: linear-gradient(135deg, var(--c-violet) 0%, var(--c-fog) 100%); }
  .article-cover .cat-self { background: linear-gradient(135deg, var(--c-flame) 0%, var(--c-violet) 100%); }
  .article-cover .cat-fulfillment { background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-flame) 100%); }
  .article-cover .cat-success { background: linear-gradient(135deg, var(--c-flame) 0%, var(--c-ember) 100%); }
  .article-cover .cat-holidays { background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-magenta) 100%); }
  .article-cover .cat-purpose { background: linear-gradient(135deg, var(--c-violet) 0%, var(--c-flame) 100%); }
  .article-cover .cat-change { background: linear-gradient(135deg, var(--c-flame) 0%, var(--c-amber) 100%); }
  .article-cover .cat-stuck { background: linear-gradient(135deg, var(--c-ember) 0%, var(--c-amber) 100%); }
  .article-cover .cat-pessimism { background: linear-gradient(135deg, var(--c-ink) 0%, var(--c-violet) 100%); }
  .article-cover .cat-confidence { background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-ember) 100%); }
  .article-cover .cat-avoidance { background: linear-gradient(135deg, var(--c-violet) 0%, var(--c-magenta) 100%); }
  .article-cover .cat-mental { background: linear-gradient(135deg, var(--c-violet) 0%, var(--c-ember) 100%); }
  .article-cover .cat-thoughts { background: linear-gradient(135deg, var(--c-ember) 0%, var(--c-violet) 100%); }
  .article-cover .cat-anger { background: linear-gradient(135deg, var(--c-ember) 0%, var(--c-flame) 100%); }
  .article-cover .cat-unsorted { background: linear-gradient(135deg, var(--c-fog) 0%, var(--c-violet) 100%); }

  /* Body */
  .article-body {
    max-width: 720px; margin: 0 auto; padding: 0 36px 96px;
    font-family: var(--he-font-body); font-size: 19px; line-height: 1.9; color: var(--he-fg-1);
  }
  .article-body p {
    margin: 0 0 1.6em;
  }
  .article-body p.lead-para {
    font-size: 23px; line-height: 1.7; color: var(--he-fg-1);
    border-inline-start: 2px solid var(--c-clay);
    padding-inline-start: 24px;
    font-family: var(--he-font-display); font-style: italic; font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    margin-bottom: 2em;
  }
  .article-body h2 {
    font-family: var(--he-font-display); font-size: 32px;
    font-weight: 400; font-style: italic; line-height: 1.18; letter-spacing: -0.015em;
    color: var(--c-ink); margin: 2em 0 0.7em;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .article-body h3 {
    font-family: var(--he-font-display); font-size: 24px;
    font-weight: 500; line-height: 1.25; color: var(--c-ink);
    margin: 1.8em 0 0.5em;
  }
  .article-body strong { color: var(--c-ink); font-weight: 700; }
  .article-body em.italic {
    font-family: var(--he-font-display); font-style: italic; font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .article-body ul {
    margin: 0 0 1.6em; padding-inline-start: 1.5em;
  }
  .article-body ul li {
    list-style: none; position: relative; margin-bottom: 0.5em;
    padding-inline-start: 1em;
  }
  .article-body ul li::before {
    content: ""; position: absolute; top: 0.9em; right: -1.2em;
    width: 14px; height: 1px; background: var(--c-clay);
  }

  /* Pullquote variant */
  .pullquote {
    margin: 2.4em 0; padding: 28px 36px;
    background: var(--he-base-2);
    border-radius: var(--he-r-md);
    font-family: var(--he-font-display); font-style: italic; font-size: 24px;
    line-height: 1.5; color: var(--c-ink);
    border-inline-start: 3px solid var(--c-magenta);
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }

  /* End block */
  .article-end {
    max-width: 720px; margin: 0 auto; padding: 0 36px;
    border-top: 1px solid var(--he-border);
    padding-top: 40px; margin-bottom: 80px;
  }
  /* End of article — quiet question CTA */
  .article-question-wrap {
    max-width: 760px;
    margin: 0 auto 80px;
  }
  .article-question-cta {
    padding: 28px 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--he-border-strong);
    border-radius: 18px;
    box-shadow: 0 18px 42px -26px rgba(135,43,100,0.24);
  }
  .article-question-cta .q-body h3 {
    font-family: var(--he-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0 0 6px;
  }
  .article-question-cta .q-body p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--he-fg-2);
    margin: 0;
  }
  .article-question-cta .q-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .article-question-cta .btn-soft-outline {
    border-color: var(--b-magenta);
    color: var(--b-magenta);
    background: rgba(135,43,100,0.04);
  }
  .article-question-cta .btn-soft-outline:hover {
    background: var(--b-magenta);
    color: #fff;
  }
  @media (max-width: 760px) {
    .article-question-wrap { margin-bottom: 56px; }
    .article-question-cta {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 26px 22px;
      gap: 18px;
    }
    .article-question-cta .q-actions {
      justify-content: center;
    }
    .article-question-cta .q-actions .btn {
      min-width: min(100%, 156px);
    }
  }

  /* Article end signature */
  .article-end .signature {
    font-family: var(--he-font-display); font-style: italic; font-size: 22px;
    color: var(--c-ink); margin-bottom: 6px;
  }
  .article-end .signature-sub {
    font-family: var(--he-font-sans); font-size: 13px; color: var(--he-fg-3);
    letter-spacing: 0.06em;
  }
  .article-end .actions {
    margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap;
  }

  /* Related */
  .related-section { padding: 96px 0 88px; background: var(--he-base-2); }
  .related-section .section-head { margin-bottom: 48px; }
  .related-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  .related-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    background: var(--he-paper); border-radius: var(--he-r-md);
    overflow: hidden;
    transition: transform var(--he-t-base) var(--he-ease);
    border: 1px solid var(--he-border);
  }
  .related-card:hover { transform: translateY(-3px); }
  .related-card .cover-wrap {
    aspect-ratio: 16 / 10; position: relative; background: var(--he-surface-2);
  }
  .related-card .cover-wrap img { width:100%; height:100%; object-fit:cover; }
  .related-card .cover-fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--he-font-display); font-style: italic; font-size: 36px; color: rgba(255,255,255,0.85);
  }
  .related-card .body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
  .related-card .cat-tag {
    font-family: var(--he-font-sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-magenta);
    margin-bottom: 8px;
  }
  .related-card h3 {
    font-family: var(--he-font-display); font-size: 20px; font-weight: 400; font-style: italic;
    line-height: 1.25; color: var(--c-ink); margin: 0 0 8px;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .related-card .meta {
    margin-top: auto; padding-top: 12px;
    font-family: var(--he-font-sans); font-size: 12px; color: var(--he-fg-3);
  }

  .not-found {
    text-align: center; padding: 160px 36px;
  }
  .not-found h1 {
    font-family: var(--he-font-display); font-size: 48px; font-weight: 400; font-style: italic;
    margin-bottom: 18px; color: var(--c-ink);
  }
  .not-found p { color: var(--he-fg-2); max-width: 520px; margin: 0 auto 28px; }

  @media (max-width: 1040px) {
    .related-grid { grid-template-columns: 1fr; }
    .article-cover .cover-fallback { font-size: 60px; }
  }
  @media (max-width: 640px) {
    .article-cover { aspect-ratio: 4/3; }
    .article-body { font-size: 17px; line-height: 1.85; }
    .article-body p.lead-para { font-size: 20px; }
  }