:root {
  color: #17211b;
  background: #edf1eb;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
header {
  align-items: center;
  background: #143c2c;
  color: #fff;
  display: flex;
  justify-content: space-between;
  min-height: 132px;
  padding: 28px clamp(24px, 6vw, 88px);
}
h1, h2, p { margin: 0; }
h1 { font-family: Georgia, "Yu Mincho", serif; font-size: clamp(30px, 4vw, 48px); font-weight: 500; }
h2 { font-family: Georgia, "Yu Mincho", serif; font-size: 28px; font-weight: 500; }
.eyebrow { color: #9ed3b6; font-size: 12px; font-weight: 700; letter-spacing: 0; margin-bottom: 8px; }
button { background: #f4c95d; border: 0; border-radius: 4px; color: #17211b; cursor: pointer; font: inherit; font-weight: 700; padding: 12px 18px; }
main { margin: 0 auto; max-width: 1320px; padding: 48px clamp(20px, 5vw, 72px); }
.summary { border-top: 3px solid #143c2c; padding-top: 24px; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 28px; }
#updated-at { color: #58635c; font-size: 13px; }
.metrics { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { background: #fff; border-left: 4px solid #2c7252; border-radius: 4px; min-height: 128px; padding: 20px; }
.metric dt { color: #58635c; font-size: 13px; }
.metric dd { font-family: Georgia, serif; font-size: 34px; margin: 18px 0 0; }
.empty { background: #fff; border: 1px solid #c8d0c8; grid-column: 1 / -1; padding: 28px; }
@media (max-width: 760px) {
  header { align-items: flex-start; gap: 20px; min-height: 116px; }
  main { padding-top: 32px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}