.article-back {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: var(--display);
      font-weight: 700;
      color: var(--ink-soft);
      text-decoration: none;
      font-size: 0.95rem;
      margin-bottom: 1.5rem;
    }
    .article-back:hover { color: var(--ink); }

    .article-shell {
      max-width: 720px;
      margin: 0 auto;
      background: #fff;
      border: 2px solid var(--hair-strong);
      border-radius: 28px;
      box-shadow: 0 6px 0 var(--hair-strong);
      padding: 2rem 1.5rem;
      animation: popIn 0.6s 0.05s both var(--spring);
    }
    @media (min-width: 768px) { .article-shell { padding: 3rem 3rem; } }

    .article-header { margin-bottom: 2rem; text-align: center; }
    .article-header-category {
      display: inline-block;
      font-family: var(--display);
      font-weight: 800;
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--coral);
      background: var(--bg-soft);
      border: 2px solid var(--coral);
      padding: 0.3rem 0.75rem;
      border-radius: 999px;
      margin: 0 auto 1.2rem;
      box-shadow: 0 3px 0 var(--coral-shade);
    }
    .article-header h1 {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(1.9rem, 4vw, 2.8rem);
      line-height: 1.1;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin: 0 0 0.7rem;
    }
    .article-header-subtitle {
      font-family: var(--body);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--ink-soft);
      max-width: 540px;
      margin: 0 auto 1.2rem;
      line-height: 1.45;
    }
    .article-header-meta {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem 0.85rem;
      font-family: var(--body);
      font-weight: 700;
      font-size: 0.85rem;
      color: var(--ink-mute);
    }
    .article-header-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
    .article-header-meta span + span::before {
      content: "•";
      color: var(--hair-strong);
      margin-right: 0.5rem;
      margin-left: -0.85rem;
    }
    @media (max-width: 480px) {
      .article-header-meta span + span::before { display: none; }
    }

    .article-body {
      font-family: var(--body);
      color: var(--ink);
      font-size: 1.05rem;
      line-height: 1.65;
      font-weight: 600;
    }
    .article-body p { margin: 0 0 1.1rem; }
    .article-body strong { color: var(--ink); font-weight: 800; }
    .article-body a {
      color: var(--coral-shade);
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
      font-weight: 700;
    }
    .article-body a:hover { color: var(--coral); }
    .article-body h2,
    .article-body h3 {
      font-family: var(--display);
      font-weight: 800;
      color: var(--ink);
      margin: 1.8rem 0 0.7rem;
      letter-spacing: -0.005em;
    }
    .article-body h2 { font-size: 1.4rem; }
    .article-body h3 { font-size: 1.15rem; }

    .article-intro {
      font-size: 1.15rem;
      color: var(--ink);
      margin-bottom: 1.5rem;
      font-weight: 700;
    }
    .article-intro p:first-child::first-letter {
      font-family: var(--display);
      font-weight: 800;
      font-size: 3.4rem;
      line-height: 0.9;
      float: left;
      margin: 0.15rem 0.5rem 0 0;
      color: var(--coral);
    }

    .qa-section {
      display: grid;
      gap: 0.85rem;
      margin: 1.5rem 0 1.8rem;
      padding: 1.25rem;
      background: var(--bg-soft);
      border: 2px solid var(--hair-strong);
      border-radius: 20px;
    }
    .qa-section.highlight {
      background: rgba(244, 177, 63, 0.16);
      border-color: var(--gold);
    }
    .qa-question,
    .qa-answer {
      display: flex;
      gap: 0.85rem;
      align-items: flex-start;
    }
    .qa-avatar {
      flex-shrink: 0;
      width: 2.6rem;
      height: 2.6rem;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      border: 2px solid var(--ink);
      box-shadow: 0 3px 0 var(--ink);
    }
    .qa-avatar.grammar { background: var(--bg-soft); }
    .qa-avatar.bazaar { background: var(--teal); color: #fff; }
    .qa-question-text,
    .qa-answer-text { flex: 1; }
    .qa-question-label,
    .qa-answer-label {
      font-family: var(--display);
      font-weight: 800;
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 0.25rem;
    }
    .qa-question-text p,
    .qa-answer-text p {
      margin: 0;
      font-family: var(--body);
      font-weight: 700;
      color: var(--ink);
      line-height: 1.5;
    }

    .article-figure {
      margin: 1.8rem 0;
      text-align: center;
    }
    .article-figure img {
      width: 100%;
      max-width: 680px;
      height: auto;
      border-radius: 18px;
      border: 3px solid var(--ink);
      box-shadow: 0 6px 0 var(--ink);
    }
    .article-figure figcaption {
      font-family: var(--body);
      font-style: normal;
      font-weight: 700;
      font-size: 0.85rem;
      color: var(--ink-mute);
      margin-top: 0.6rem;
    }

    .article-richtext { margin: 1.5rem 0; }
    .article-richtext ul,
    .article-richtext ol { padding-left: 1.5rem; margin: 0 0 1.2rem; }
    .article-richtext li { margin-bottom: 0.45rem; }

    .article-takeaway {
      margin: 2rem 0;
      padding: 1.5rem 1.4rem;
      background: rgba(78, 199, 127, 0.12);
      border: 2px solid var(--done);
      border-radius: 20px;
    }
    .article-takeaway h2 {
      font-family: var(--display);
      font-weight: 800;
      font-size: 1.15rem;
      color: var(--done-shade);
      margin: 0 0 0.6rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .article-takeaway h2::before {
      content: "\2713";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      background: var(--done);
      color: #fff;
      font-weight: 900;
      font-size: 0.95rem;
      box-shadow: 0 2px 0 var(--done-shade);
    }

    .article-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin: 2rem 0 0;
      padding-top: 1.5rem;
      border-top: 2px dashed var(--hair-strong);
    }
    .article-tag {
      font-family: var(--body);
      font-weight: 700;
      font-size: 0.78rem;
      color: var(--ink-soft);
      background: var(--bg-soft);
      padding: 0.3rem 0.7rem;
      border-radius: 999px;
      border: 2px solid var(--hair-strong);
    }

    .blog-cta {
      max-width: 720px;
      margin: 2.5rem auto 1rem;
      padding: 2rem 1.5rem;
      background: var(--bg-soft);
      border: 2px solid var(--hair-strong);
      border-radius: 28px;
      text-align: center;
    }
    .blog-cta h3 {
      font-family: var(--display);
      font-weight: 800;
      font-size: 1.35rem;
      color: var(--ink);
      margin: 0 0 0.6rem;
    }
    .blog-cta p {
      font-family: var(--body);
      font-weight: 700;
      color: var(--ink-soft);
      margin: 0 0 1.2rem;
    }