:root {
  color-scheme: light;
  --paper: #fbfaf8;
  --ink: #242321;
  --muted: #6e6a66;
  --line: #d9d4ce;
  --accent: #c76770;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.75;
}

header, main, footer {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}

.brand, a { color: inherit; }
.brand { font-weight: 700; text-decoration: none; }
nav a { margin-left: 18px; color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--accent); }

main { padding: 64px 0 80px; }
h1 { margin: 0 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 42px; line-height: 1.2; }
h2 { margin: 42px 0 8px; font-size: 20px; }
p, li { color: #3e3b38; }
.date { margin: 0 0 44px; color: var(--muted); }
.notice { margin: 28px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

footer {
  padding: 28px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 560px) {
  header { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; }
  nav a { margin: 0 14px 0 0; }
  main { padding-top: 42px; }
  h1 { font-size: 34px; }
}