:root{
  --paper:#F2F6EC;
  --card:#FFFFFF;
  --ink:#132419;
  --muted:#4E6B58;
  --line:#D3DFCE;
  --lagoon:#0C7C6E;
  --sun:#E39A12;
  --pix:'DotGothic16','Zen Kaku Gothic New',sans-serif;
  --body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:700;
  font-size:16px;
  line-height:1.55;
  letter-spacing:.01em;
}
.wrap{max-width:940px;margin:0 auto;padding:0 12px}

/* ---------- header ---------- */
.hero{
  background:var(--ink);
  color:#F2F6EC;
  padding:18px 0 16px;
  border-bottom:5px solid var(--sun);
}
.hero .eyebrow{
  font-family:var(--pix);
  font-size:15px;letter-spacing:.18em;color:var(--sun);
}
.hero h1{font-size:32px;font-weight:900;line-height:1.2;margin:2px 0 4px}
.hero .lead{font-size:16px;color:#A9C4B2;font-weight:700}

/* ---------- cards ---------- */
main{padding:20px 0 40px}
.cards{list-style:none;display:grid;gap:12px}
.card a{
  display:block;text-decoration:none;color:inherit;
  background:var(--card);
  border:2px solid var(--line);
  border-left:8px solid var(--lagoon);
  border-radius:8px;
  padding:14px 16px;
}
.card a:hover{border-color:var(--lagoon);background:#FBFDF8}
.card .tag{
  display:inline-block;font-family:var(--pix);font-size:14px;font-weight:500;
  color:#fff;background:var(--muted);border-radius:4px;padding:2px 8px;margin-bottom:6px;
}
.card .name{display:block;font-size:21px;font-weight:900;line-height:1.3}
.card .desc{display:block;font-size:15px;color:var(--muted);margin-top:3px}

/* ---------- footer ---------- */
footer{
  border-top:3px solid var(--line);
  padding:14px 0 24px;
  font-size:14px;color:var(--muted);font-weight:500;text-align:center;
}

@media(min-width:700px){
  body{font-size:17px}
  .hero h1{font-size:40px}
  .cards{grid-template-columns:1fr 1fr}
}