/* Design tokens are global (/styles/tokens.css). Only page-local aliases
       remain, mapped onto the system tokens. */
    :root {
      --rose: var(--terracotta);
      --muted: var(--ink-muted);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-sans);
    }
    a { color: inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible, input:focus-visible {
      outline: 2px solid var(--sage);
      outline-offset: 3px;
    }
    button, input { font: inherit; }

    .shell {
      width: min(var(--max), calc(100% - 2 * var(--gutter)));
      margin: auto;
    }
    .brand { display: inline-block; }
    .logo-image { display: block; width: 120px; height: auto; }

    /* Old header rules removed — header is now <SiteHeader> (/styles/header.css). */

    .reading {
      width: min(640px, 100%);
      margin: 0 auto;
      padding: 36px 0 0;
    }
    .article-hero {
      display: block;
      width: 100%;
      height: 340px;
      margin: 28px 0 8px;
      border-radius: 12px;
      object-fit: cover;
      object-position: center;
    }
    .caption {
      width: min(640px, 100%);
      margin: 0 auto 36px;
      color: var(--muted);
      font-size: 13px;
    }
    .article-body {
      width: min(640px, 100%);
      margin: 0 auto;
      padding-bottom: 28px;
      font: 400 18px/2 var(--thai);
    }
    .back {
      display: inline-block;
      margin-bottom: 28px;
      color: var(--muted);
      font-size: 14px;
    }
    .back:hover { color: var(--ink); }
    .article-head h1 {
      margin: 0;
      font: 500 32px/1.4 var(--thai);
      letter-spacing: -.25px;
    }
    .article-meta {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 13px;
    }
    .article-meta span { color: var(--sage); }

    .article-body p { margin: 0 0 22px; }
    .article-body .lead {
      margin-bottom: 28px;
      color: #4d5b37;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.75;
    }
    .article-body blockquote {
      margin: 36px 0 40px;
      padding: 0;
      border: 0;
      color: var(--sage);
      font: 400 22px/1.5 var(--script);
    }
    .article-body blockquote:before {
      content: "";
      display: block;
      width: 24px;
      margin: 0 0 14px;
      border-top: 2px solid var(--rose);
    }

    .related {
      width: min(640px, 100%);
      margin: 8px auto 64px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
    }
    .related h2 {
      margin: 0 0 6px;
      font-size: 20px;
      font-weight: 500;
    }
    .related-row {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      padding: 16px 0;
      border-top: 1px solid var(--line);
    }
    .related-row:first-of-type { border-top: 0; padding-top: 18px; }
    .related-row img {
      display: block;
      width: 64px;
      height: 64px;
      border-radius: 8px;
      object-fit: cover;
    }
    .related-row p {
      margin: 0 0 4px;
      color: var(--sage);
      font-size: 12px;
    }
    .related-row h3 {
      margin: 0;
      font: 500 17px/1.4 var(--thai);
    }
    .related-row h3 a:hover { color: var(--sage); }

    .newsletter-panel {
      display: grid;
      grid-template-columns: 250px 1fr 250px;
      align-items: center;
      min-height: 72px;
      margin-top: 10px;
      padding: 12px 22px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #f7f0e6;
    }
    .newsletter-panel h2 {
      margin: 0;
      font-size: 22px;
      font-weight: 500;
    }
    .newsletter-panel p {
      margin: 1px 0 0;
      font-size: 11px;
    }
    .signup {
      display: flex;
      height: 33px;
    }
    .signup input {
      min-width: 0;
      width: 100%;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 7px 0 0 7px;
      background: #fffaf4;
    }
    .signup button {
      width: 130px;
      border: 0;
      border-radius: 8px;
      background: var(--sage);
      color: #fff;
      margin-left: -18px;
      cursor: pointer;
    }
    /* Old newsletter logo-image rule removed — it was capping the Instagram
       panel image at 64px (object-fit: contain). The panel image is now styled
       by /styles/instagram.css (.instagram-visual img, full height, cover). */

    /* Footer + legal styles moved to the global /styles/footer.css. */

    @media (max-width: 767px) {
      :root { --gutter: 20px; }
      .reading { padding: 28px 0 20px; }
      .article-head h1 { font-size: 26px; }
      .article-hero {
        width: 100%;
        height: 210px;
        margin-top: 22px;
      }
      .article-body { font-size: 17px; line-height: 1.9; }
      .article-body .lead { font-size: 18px; }
      .article-body blockquote { font-size: 20px; }
      .related { margin-bottom: 48px; }
      .newsletter-panel {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px;
        text-align: center;
      }
      .newsletter-panel img { display: none; }
    }

    /* Quiet long-form reading polish */
    ::selection { background: rgb(224 145 141 / 0.24); }
    .reading { width: min(720px, 100%); padding-top: 62px; }
    .back {
      margin-bottom: 58px;
      font-size: 12px;
      letter-spacing: .04em;
    }
    .article-head h1 {
      max-width: 17ch;
      font-size: clamp(38px, 4.4vw, 52px);
      line-height: 1.28;
      letter-spacing: -.8px;
    }
    .article-meta { margin-top: 20px; font-size: 12px; letter-spacing: .03em; }
    .article-subtitle { margin: 20px 0 0; color: var(--muted); font-family: var(--thai); font-size: 16px; line-height: 1.6; }
    .article-hero {
      width: min(840px, 100%);
      height: 470px;
      margin-top: 46px;
      border-radius: 4px;
    }
    .caption { width: min(720px, 100%); margin-top: 11px; margin-bottom: 58px; font-size: 11px; }
    .article-body { width: min(680px, 100%); padding-bottom: 64px; font-size: 19px; line-height: 2.05; }
    .article-body p { margin-bottom: 30px; }
    .article-body .lead {
      max-width: 31ch;
      margin-bottom: 44px;
      font-size: 23px;
      line-height: 1.8;
    }
    .article-body blockquote {
      max-width: 27ch;
      margin: 58px 0 62px -38px;
      padding-left: 38px;
      font-family: var(--thai);
      font-size: 25px;
      line-height: 1.75;
    }
    .article-body blockquote:before { margin-left: -38px; }
    .related {
      width: min(720px, 100%);
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 34px;
      margin-bottom: 88px;
      padding-top: 34px;
    }
    .related h2 { grid-column: 1 / -1; margin-bottom: 20px; font-size: 24px; }
    .related-row,
    .related-row:first-of-type {
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 18px;
      padding: 18px 0;
      border-top: 1px solid var(--line);
    }
    .related-row img { width: 96px; height: 82px; border-radius: 3px; }
    .related-row h3 { font-size: 15px; }
    .newsletter-panel { margin-top: 0; }

    @media (max-width: 767px) {
      .reading { padding-top: 34px; }
      .back { margin-bottom: 38px; }
      .article-subtitle { margin-top: 14px; font-size: 14px; }
      .article-head h1 { font-size: 30px; line-height: 1.4; letter-spacing: -.35px; }
      .article-hero { height: 255px; margin-top: 32px; border-radius: 3px; }
      .caption { margin-bottom: 42px; }
      .article-body { font-size: 17px; line-height: 2; }
      .article-body .lead { font-size: 20px; line-height: 1.8; }
      .article-body blockquote { margin: 44px 0 48px; padding-left: 22px; font-size: 21px; }
      .article-body blockquote:before { margin-left: -22px; }
      .related { grid-template-columns: 1fr; margin-bottom: 62px; }
      .related h2 { grid-column: auto; font-size: 21px; }
      .related-row,
      .related-row:first-of-type { grid-template-columns: 78px minmax(0, 1fr); }
      .related-row img { width: 78px; height: 70px; }
    }

    /* ---- Design system roll-in (see design-system/the-human-need/MASTER.md) ----
       Serif display for English headings (the Thai article title and pull quote
       keep Noto Sans Thai), and a 13px type floor for meta/labels. */
    .related h2,
    .newsletter-panel h2 {
      font-family: var(--font-display);
    }

    .article-meta,
    .caption,
    .related-row p { font-size: var(--text-xs); }

    /* Center the wide long-form hero image. The text columns were already
       centered, but the hero (840px) was flush-left, which made the whole
       article read as left-aligned. */
    .article-hero { margin-left: auto; margin-right: auto; }

/* Polish pass (2026-11-02): the English kicker above every Thai title was
   removed from markup; give the title room to wrap on Thai word boundaries
   instead of stranding one word on the second line. */
.article-head h1 { max-width: 22ch; text-wrap: balance; }