:root {
  --text: #171717;
  --muted: #666;
  --line: #dedede;
  --background: #fff;
  --soft: #f7f7f7;
  --link: #174ea6;
  --container: min(960px, calc(100vw - 40px));
  --sans: Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--background); font: 16px/1.7 var(--sans); }
a { color: var(--link); }
.container { width: var(--container); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); }

.site-header { border-bottom: 1px solid var(--line); background: #fff; }
.header-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-name { color: var(--text); font-size: 1rem; font-weight: 700; text-decoration: none; }
nav { display: flex; gap: 24px; }
nav a { color: #444; font-size: .9rem; text-decoration: none; }
nav a:hover { color: var(--link); }

.intro { padding: 90px 0 70px; border-bottom: 1px solid var(--line); }
.intro-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
h1 { margin: 0; font-size: clamp(3rem, 8vw, 5.4rem); line-height: 1; letter-spacing: -.05em; }
.other-names { margin: 16px 0 0; color: var(--muted); font-size: 1.1rem; }
.intro-copy > p { margin: 0 0 12px; font-size: 1.05rem; }
.muted { color: var(--muted); }
.intro-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; }

.section { padding: 70px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
.section:nth-child(odd) { background: var(--soft); }
.two-column { display: grid; grid-template-columns: 180px 1fr; gap: 70px; }
h2 { margin: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.two-column > div > p:first-child { margin-top: 0; }
.list article { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.list article:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.meta { margin: 0 0 6px; color: var(--muted); font-size: .85rem; }
h3 { margin: 0 0 8px; font-size: 1.25rem; }
.list article > p:last-child { margin: 0; }

.project-list { border-top: 1px solid var(--line); }
.project-list > a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.project-list > a:hover strong { color: var(--link); }
.project-list strong, .project-list small { display: block; }
.project-list small { margin-top: 2px; color: var(--muted); font-size: .85rem; }
.project-list > a > span:last-child { flex: 0 0 auto; color: var(--link); font-size: .85rem; }
.contact-list p { margin: 0 0 8px; }
footer { padding: 28px 0; color: var(--muted); font-size: .85rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; }

@media (max-width: 700px) {
  :root { --container: min(100% - 32px, 560px); }
  nav { gap: 14px; }
  nav a:nth-child(2), nav a:nth-child(3) { display: none; }
  .intro { padding: 64px 0 52px; }
  .intro-grid, .two-column { grid-template-columns: 1fr; gap: 32px; }
  h1 { font-size: clamp(3rem, 18vw, 4.8rem); }
  .section { padding: 52px 0; }
  .project-list > a { align-items: flex-start; }
  .footer-inner { flex-direction: column; gap: 4px; }
}

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