:root {
  color: #1e2928;
  background: #f5f3ed;
  font-family: ui-rounded, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

main { max-width: 1080px; margin: 0 auto; padding: clamp(72px, 12vw, 150px) 28px 80px; }

.hero { max-width: 720px; }

.eyebrow, .tag { margin: 0; color: #65746c; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

h1 { margin: 18px 0 20px; font-size: clamp(2.45rem, 6.2vw, 5.4rem); letter-spacing: -.055em; line-height: 1.06; }

.intro { max-width: 600px; color: #53605b; font-size: 1.08rem; line-height: 1.8; }

.projects { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(58px, 9vw, 105px); }

.project-card { min-height: 310px; padding: 34px; border: 1px solid rgba(30, 41, 40, .12); border-radius: 24px; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(30, 41, 40, .12); }
.planner { background: #e0ebf0; }

h2 { margin: 22px 0 12px; font-size: 2rem; letter-spacing: -.04em; }
.project-card > p:not(.tag) { margin: 0; color: #43504b; line-height: 1.72; }
a { margin-top: auto; padding-top: 30px; color: #1e2928; font-weight: 750; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

footer { display: flex; justify-content: space-between; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 28px; border-top: 1px solid rgba(30, 41, 40, .12); color: #66726e; font-size: .9rem; }

@media (max-width: 680px) {
  main { padding: 72px 20px 56px; }
  .projects { grid-template-columns: 1fr; margin-top: 56px; }
  .project-card { min-height: 270px; padding: 28px; }
  footer { flex-direction: column; padding: 22px 20px; }
}