:root {
  --page: #f7f4ee;
  --surface: #fffdf9;
  --ink: #344950;
  --muted: #667a80;
  --primary: #3e5a62;
  --accent: #b8896c;
  --border: #d5dede;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font: 17px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--primary); }
.shell { width: min(100% - 36px, 820px); margin: 0 auto; }
header { padding: 28px 0 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; }
.mark { display: grid; width: 38px; height: 38px; place-items: center; color: white; background: var(--primary); border-radius: 12px; }
main { margin: 26px 0 64px; padding: clamp(24px, 5vw, 54px); background: var(--surface); border: 1px solid var(--border); border-radius: 28px; }
h1 { margin: 0 0 6px; font: 600 clamp(38px, 7vw, 62px)/1.05 Georgia, serif; letter-spacing: -.03em; }
h2 { margin-top: 36px; font-size: 24px; }
h3 { margin-top: 24px; font-size: 19px; }
p, li { color: var(--muted); }
.updated { margin-top: 0; color: var(--accent); font-weight: 650; }
.notice { margin: 28px 0; padding: 20px 22px; background: #e9efee; border-left: 4px solid var(--primary); border-radius: 12px; }
.button { display: inline-block; margin: 8px 0 14px; padding: 13px 18px; color: white; background: var(--primary); border-radius: 12px; text-decoration: none; font-weight: 700; }
footer { padding: 0 0 40px; color: var(--muted); font-size: 14px; }
@media (max-width: 520px) { body { font-size: 16px; } main { padding: 24px 20px; border-radius: 20px; } }