@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  line-height: 1.7;
  color: #466050;
  background: #f5efe4;
  padding: 104px 24px 72px;
}
.container { max-width: 760px; margin: 0 auto; }
h1, h2 { color: #173322; font-weight: 400; }
h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}
h2 { font-size: 1.6rem; line-height: 1.25; margin: 40px 0 14px; }
p, li { font-size: 17px; margin-bottom: 14px; }
.updated {
  font-size: 15px;
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid #17332226;
}
ul { padding-left: 24px; margin-bottom: 20px; }
a { color: #173322; text-underline-offset: 4px; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid #173322; outline-offset: 5px; }
.home-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 12px 24px;
  background: #f5efe4;
  border-bottom: 1px solid #17332215;
}
.home-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #173322;
}
.home-link:hover { background: #17332210; }
@media (max-width: 600px) {
  body { padding: 96px 24px 40px; }
  h2 { font-size: 1.4rem; margin-top: 32px; }
}