/* 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(720px, 100%);
      margin: 0 auto;
      padding: 36px 0 72px;
    }
    .page-intro h1 {
      margin: 0;
      color: var(--sage);
      font: 400 42px/1.12 var(--serif);
      letter-spacing: -1px;
    }
    .rule {
      width: 24px;
      margin: 18px 0 16px;
      border-top: 2px solid var(--rose);
    }
    .page-intro p {
      max-width: 34ch;
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.45;
    }

    .archive {
      margin-top: 40px;
    }
    .story-row {
      display: grid;
      grid-template-columns: 80px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      padding: 20px 0;
      border-top: 1px solid var(--line);
    }
    .story-row:last-child { border-bottom: 1px solid var(--line); }
    .story-row img {
      display: block;
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
    }
    .story-row h3 {
      margin: 0 0 6px;
      font: 500 18px/1.4 var(--thai);
    }
    .story-row h3 a:hover { color: var(--sage); }
    .date {
      color: var(--muted);
      font-size: 12px;
    }

    .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 48px; }
      .page-intro h1 { font-size: 34px; }
      .story-row {
        grid-template-columns: 64px 1fr;
        gap: 14px;
      }
      .story-row img {
        width: 64px;
        height: 64px;
      }
      .story-row h3 { font-size: 16px; }
      .newsletter-panel {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px;
        text-align: center;
      }
      .newsletter-panel img { display: none; }
    }

    /* Editorial archive polish */
    ::selection { background: rgb(224 145 141 / 0.24); }
    .reading {
      width: min(840px, 100%);
      padding: 64px 0 104px;
    }
    .page-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr);
      column-gap: 72px;
      align-items: end;
      padding: 24px 0 52px;
      border-bottom: 1px solid var(--line);
    }
    .page-intro h1 {
      max-width: 650px;
      font-size: clamp(44px, 5.2vw, 64px);
      line-height: 1.02;
      letter-spacing: -2.2px;
    }
    .page-intro .rule { display: none; }
    .page-intro p {
      max-width: 28ch;
      padding-bottom: 5px;
      font-size: 16px;
      line-height: 1.55;
    }
    .archive { margin-top: 0; }
    .story-row {
      grid-template-columns: 190px minmax(0, 1fr);
      gap: 32px;
      min-height: 174px;
      padding: 25px 0;
    }
    .story-row img {
      width: 190px;
      height: 124px;
      border-radius: 3px;
      transition: transform 350ms ease, filter 350ms ease;
    }
    .story-row > div { position: relative; padding-right: 54px; }
    .story-index {
      position: absolute;
      top: 1px;
      right: 0;
      color: #aaa095;
      font-size: 11px;
      letter-spacing: .08em;
    }
    .story-category {
      display: block;
      margin-bottom: 10px;
      color: var(--sage);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .story-row h3 {
      max-width: 26ch;
      margin-bottom: 12px;
      font-size: 23px;
      line-height: 1.38;
    }
    .story-row:hover img { transform: scale(1.018); filter: saturate(1.04); }
    .date { font-size: 11px; letter-spacing: .025em; }
    .newsletter-panel { margin-top: 0; }

    @media (max-width: 767px) {
      .reading { padding: 38px 0 64px; }
      .page-intro {
        display: block;
        padding: 12px 0 36px;
      }
      .page-intro h1 { max-width: 9ch; font-size: 40px; letter-spacing: -1.4px; }
      .page-intro p { margin-top: 22px; font-size: 15px; }
      .story-row {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 17px;
        min-height: 136px;
        padding: 20px 0;
      }
      .story-row img { width: 104px; height: 96px; }
      .story-row > div { padding-right: 0; }
      .story-index { display: none; }
      .story-category { margin-bottom: 6px; font-size: 9px; }
      .story-row h3 { margin-bottom: 7px; font-size: 16px; line-height: 1.48; }
    }

    @media (prefers-reduced-motion: reduce) {
      .story-row img { transition: none; }
    }

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

    .date,
    .story-index,
    .story-category { font-size: var(--text-xs); }