:root {
      color-scheme: light;
      --ink: #201d17;
      --muted: #756f63;
      --paper: #fffdf8;
      --canvas: #f3f0e9;
      --line: #dfd9cc;
      --brand: #776646;
      --brand-strong: #4f452f;
      --brand-soft: #eee7d7;
      --warm: #f7f3ea;
      --shadow: 0 20px 58px rgba(64, 53, 32, 0.13);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 10% 2%, rgba(174, 145, 92, 0.17), transparent 25rem),
        var(--canvas);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
      font-size: 18px;
      line-height: 1.82;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
    }

    .page {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 28px 0 80px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 72px;
      color: var(--muted);
      font-size: 14px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-weight: 750;
      text-decoration: none;
    }

    .brand-mark {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border-radius: 12px;
      color: white;
      background: var(--brand);
      box-shadow: 0 8px 20px rgba(91, 74, 42, 0.2);
      font-size: 17px;
    }

    .source-link {
      text-underline-offset: 4px;
    }

    .hero,
    .section,
    .status {
      width: min(100%, 780px);
      margin-inline: auto;
    }

    .eyebrow {
      display: inline-flex;
      padding: 7px 12px;
      border-radius: 999px;
      color: var(--brand-strong);
      background: var(--brand-soft);
      font-size: 14px;
      font-weight: 750;
      letter-spacing: 0.04em;
    }

    h1,
    h2 {
      margin: 0;
      line-height: 1.2;
      letter-spacing: -0.035em;
      text-wrap: balance;
    }

    h1 {
      max-width: 13ch;
      margin-top: 22px;
      font-size: clamp(46px, 7vw, 84px);
      font-weight: 850;
    }

    .lede {
      max-width: 39ch;
      margin: 26px 0 0;
      color: #514b40;
      font-size: clamp(20px, 2.6vw, 27px);
      line-height: 1.55;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
      padding: 0;
      list-style: none;
    }

    .meta li {
      padding: 7px 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255, 253, 248, 0.72);
      font-size: 13px;
      line-height: 1.3;
    }

    h2 {
      margin-bottom: 24px;
      font-size: clamp(29px, 4vw, 43px);
      font-weight: 820;
    }

    p {
      margin: 0 0 1.15em;
    }

    .section {
      padding: 60px 0 8px;
    }

    .section p {
      max-width: 69ch;
    }

    figure {
      width: min(100%, 1180px);
      margin: 48px auto 18px;
    }

    figure a {
      display: block;
      border-radius: 24px;
      outline: none;
    }

    figure a:focus-visible {
      box-shadow: 0 0 0 5px rgba(119, 102, 70, 0.28);
    }

    figure img {
      display: block;
      width: 100%;
      height: auto;
      border: 1px solid rgba(59, 48, 29, 0.13);
      border-radius: 24px;
      background: white;
      box-shadow: var(--shadow);
    }

    figcaption {
      width: min(100%, 780px);
      margin: 18px auto 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.65;
      text-align: center;
    }

    .aside {
      margin: 30px 0 6px;
      padding: 20px 22px;
      border-left: 4px solid var(--brand);
      border-radius: 0 16px 16px 0;
      background: var(--brand-soft);
    }

    .status {
      margin-top: 66px;
      padding: 36px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: var(--paper);
      box-shadow: 0 14px 42px rgba(65, 52, 29, 0.06);
    }

    .status h2 {
      font-size: 31px;
    }

    .status p:last-child {
      margin-bottom: 0;
    }

    footer {
      width: min(100%, 780px);
      margin: 72px auto 0;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
    }

    @media (max-width: 720px) {
      body {
        font-size: 17px;
      }

      .page {
        width: min(100% - 22px, 1180px);
        padding-top: 18px;
      }

      .topbar {
        margin-bottom: 46px;
      }

      .source-link {
        display: none;
      }

      .section {
        padding-top: 44px;
      }

      figure {
        margin-top: 32px;
      }

      figure a,
      figure img {
        border-radius: 15px;
      }

      .status {
        margin-top: 48px;
        padding: 25px 20px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }
  

    .hero {
      width: min(100%, 920px);
    }

    .hero h1 {
      max-width: 18ch;
      font-size: clamp(40px, 5vw, 60px);
      line-height: 1.15;
    }

    .hero .lede {
      max-width: 50rem;
      font-size: clamp(18px, 1.7vw, 21px);
      line-height: 1.62;
      text-wrap: pretty;
    }

    .project-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin: 34px 0 0;
      padding: 0;
    }

    .project-meta > div {
      min-width: 0;
      min-height: 132px;
      padding: 18px 20px 19px;
      border: 1px solid rgba(119, 102, 70, 0.16);
      border-radius: 18px;
      background: var(--paper);
      box-shadow: 0 10px 28px rgba(64, 53, 32, 0.07);
    }

    .project-meta dt {
      margin: 0 0 6px;
      color: var(--brand-strong);
      font-size: 12px;
      font-weight: 750;
    }

    .project-meta dd {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
      text-wrap: pretty;
      font-variant-numeric: tabular-nums;
    }

    .page > figure {
      width: min(calc(100% - 96px), 860px);
      margin-top: 34px;
    }

    figure a,
    figure img {
      border-radius: 18px;
    }

    @media (max-width: 620px) {
      .hero h1 {
        font-size: clamp(34px, 8.8vw, 40px);
      }

      .hero .lede {
        font-size: 17px;
      }

      .project-meta {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 28px;
      }

      .project-meta > div {
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
        padding: 13px 14px;
        border-radius: 15px;
      }

      .project-meta dt {
        margin: 1px 0 0;
      }

      .page > figure {
        width: calc(100% - 24px);
      }
    }
  
.case-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.case-actions a{padding:11px 12px;border-radius:10px;background:var(--brand-strong);color:white;text-decoration:none;font-size:14px;font-weight:650;white-space:nowrap}
.case-actions a.secondary{background:var(--brand-soft);color:var(--brand-strong)}
.case-actions a:focus-visible,.case-nav a:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
.case-nav{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:28px;font-size:14px}
.case-nav a{color:var(--brand-strong);text-underline-offset:5px}
.project-status{padding:22px 26px;margin:30px 0;background:var(--brand-soft);border-left:3px solid var(--brand);border-radius:0 12px 12px 0}
.project-status p{margin:8px 0 0}.project-status strong{font-size:16px}
.module-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}
.module-flow article{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.module-flow small{color:var(--brand);font-size:12px;letter-spacing:.06em}
.module-flow h3{font-size:19px;line-height:1.5;margin:6px 0}
.module-flow p{font-size:15px;line-height:1.7;margin:0;color:var(--muted)}
.section{scroll-margin-top:28px}.hero h1{max-width:17ch}
.project-meta dd{overflow-wrap:anywhere}.topbar{flex-wrap:wrap}
@media(max-width:620px){.module-flow{grid-template-columns:1fr}.project-status{padding:18px}.hero h1{font-size:clamp(32px,8vw,44px)}.case-actions a{flex:1;text-align:center}.topbar{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}