:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #3b2931;
  background: #fff8f7;
  line-height: 1.8;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #9f1d4a; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid #c72258; outline-offset: 4px; border-radius: 4px; }
.wrap { width: min(100% - 40px, 760px); margin-inline: auto; }
header { background: #ffe8ef; border-bottom: 1px solid #f3dce4; }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; }
.brand { font-weight: 800; font-size: 1.2rem; text-decoration: none; white-space: nowrap; }
nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
main { padding-block: 28px 64px; }
h1 { color: #9f1d4a; font-size: clamp(1.7rem, 5vw, 2.2rem); line-height: 1.4; }
h2 { margin-top: 2.3rem; padding-top: .5rem; border-top: 1px solid #f3dce4; font-size: 1.22rem; }
p, li { overflow-wrap: anywhere; }
ul { padding-left: 1.4rem; }
.lead { font-size: 1.08rem; }
.card { padding: 18px 20px; border: 1px solid #f3dce4; border-radius: 16px; background: #fff; }
.meta { color: #755e68; font-size: .92rem; }
footer { border-top: 1px solid #f3dce4; color: #755e68; font-size: .88rem; }
footer .wrap { padding-block: 18px 30px; }
@media (max-width: 500px) { header .wrap { align-items: flex-start; flex-direction: column; } }