:root {
      --paper: #F6F8F1;
      --ink: #17251D;
      --green: #3D8B68;
      --green-deep: #246044;
      --green-pale: #DDEBDD;
      --muted: #718078;
      --line: #D7E2D7;
      --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      --article-width: 720px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.8; -webkit-font-smoothing: antialiased; }
    ::selection { color: var(--paper); background: var(--green-deep); }
    a { color: inherit; text-decoration: none; }
    .container { width: min(calc(100% - 48px), 1120px); margin: 0 auto; }
    .site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
    .nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
    .brand { display: inline-flex; min-width: 0; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
    .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--green-deep); border-radius: 50%; color: var(--green-deep); }
    .brand-mark svg { width: 29px; height: 29px; }
    .brand-copy { white-space: nowrap; }
    .brand-copy span { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .13em; }
    .back-link { flex: 0 0 auto; color: var(--green-deep); font-size: 13px; font-weight: 700; }
    .back-link:hover, .back-link:focus-visible { color: var(--green); }

    .article-header { padding: 105px 0 78px; border-bottom: 1px solid var(--line); }
    .article-header-inner, .article-body { width: calc(100% - 48px); max-width: var(--article-width); margin-right: auto; margin-left: auto; }
    .article-kicker { margin: 0 0 20px; color: var(--green-deep); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .article-title { max-width: 100%; margin: 0 0 27px; overflow-wrap: break-word; word-break: normal; font-family: var(--serif); font-size: clamp(43px, 7vw, 76px); font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
    .article-meta { display: flex; flex-wrap: wrap; gap: 9px 20px; color: var(--muted); font-size: 11px; }
    .article-meta span + span { position: relative; }
    .article-meta span + span::before { position: absolute; top: 50%; left: -12px; width: 3px; height: 3px; border-radius: 50%; background: var(--green); content: ""; transform: translateY(-50%); }
    .article-tags { margin-top: 11px; color: var(--green); font-size: 11px; line-height: 1.6; }
    .article-lede { margin: 0; padding: 29px 0 31px; border-bottom: 1px solid var(--line); color: #4D5F54; font-size: 17px; line-height: 1.95; }
    .article-gallery { display: grid; gap: 24px; margin: 0 0 62px; }
    .article-gallery-item { display: block; width: 100%; line-height: 0; }
    .article-gallery-item img { display: block; width: 100%; max-width: 100%; height: auto; }
    .article-gallery-item:hover img { opacity: .9; }
    .article-markdown { margin: 0 0 62px; color: #34473C; font-size: 17px; line-height: 1.95; }
    .article-markdown p { margin: 0 0 28px; }
    .article-markdown h2, .article-markdown h3, .article-markdown h4 { margin: 52px 0 18px; color: var(--ink); font-family: var(--serif); font-weight: 400; line-height: 1.25; }
    .article-markdown h2 { font-size: 34px; }
    .article-markdown h3 { font-size: 27px; }
    .article-markdown h4 { font-size: 22px; }
    .article-markdown blockquote { margin: 30px 0; padding-left: 20px; border-left: 2px solid var(--green); color: var(--muted); }
    .article-markdown ul, .article-markdown ol { margin: 0 0 28px; padding-left: 24px; }
    .article-markdown a:not(.article-markdown-image) { color: var(--green-deep); text-decoration: underline; text-decoration-color: var(--green-pale); text-underline-offset: 3px; }
    .article-markdown-image { display: block; width: 100%; margin: 24px 0; line-height: 0; }
    .article-markdown-image img { display: block; width: 100%; max-width: 100%; height: auto; }
    .source-link { display: inline-flex; margin-top: 18px; color: var(--green-deep); font-size: 12px; font-weight: 800; }
    .source-link:hover { color: var(--green); }
    .source-button { align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--green-deep); border-radius: 2px; }
    .source-button:hover, .source-button:focus-visible { color: var(--paper); background: var(--green-deep); }

    .article-body { padding: 56px 0 108px; }
    .article-source { padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
    .article-source p { margin: 0; }
    .not-found { padding: 100px 0; text-align: center; }
    .not-found h1 { margin: 0 0 17px; font-family: var(--serif); font-size: 48px; font-weight: 400; }
    .not-found p { color: var(--muted); }

    @media (max-width: 650px) {
      .container, .article-header-inner, .article-body { width: calc(100% - 32px); max-width: var(--article-width); }
      .nav-wrap { min-height: 68px; }
      .brand { gap: 9px; font-size: 13px; }
      .brand-mark { width: 34px; height: 34px; }
      .brand-mark svg { width: 26px; height: 26px; }
      .brand-copy span { display: none; }
      .back-link { font-size: 11px; }
      .article-header { padding: 68px 0 51px; }
      .article-title { font-size: clamp(38px, 11.5vw, 56px); letter-spacing: -.035em; line-height: 1.12; }
      .article-lede { padding: 24px 0 28px; font-size: 15px; }
      .article-body { padding: 42px 0 78px; }
      .article-gallery { gap: 18px; margin-bottom: 50px; }
      .article-markdown { margin-bottom: 50px; font-size: 16px; }
      .article-markdown h2 { font-size: 30px; }
      .article-markdown h3 { font-size: 25px; }
      .article-markdown-image { margin: 18px 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
    }