body {
  margin: 0;
  background: #f7f8f1;
  color: #22301c;
  font-family: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

a { color: #3f5c26; }
a:hover { color: #6b8f3f; }

#page {
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 1.2rem 3rem;
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0 2.4rem;
}

#head {
  grid-column: 1 / -1;
  padding: 1.6rem 0 1rem;
  border-bottom: 3px double #c9d2bb;
}
#head b { font-size: 1.35rem; letter-spacing: .02em; display: block; }
#head small { color: #6c7a62; font-size: .82rem; }

#side { padding: 1.4rem 0; font-size: .86rem; }
#side ul { list-style: none; margin: 0 0 1.6rem; padding: 0; }
#side li { margin: 0 0 .45rem; }
#side a { text-decoration: none; display: block; padding: .18rem 0 .18rem .6rem; border-left: 3px solid #dfe4d5; }
#side a:hover { border-left-color: #6b8f3f; background: #eef1e6; }
#side .aside { color: #6c7a62; border-top: 1px solid #dfe4d5; padding-top: .9rem; }

#body { padding: 1.4rem 0; min-width: 0; }
#body h1 { font-size: 1.4rem; margin: 0 0 .7rem; font-weight: 700; }
#body h2 { font-size: 1.02rem; margin: 2rem 0 .5rem; color: #3f5c26; }
#body p { margin: 0 0 .95rem; }
#body img { max-width: 100%; height: auto; display: block; }

.strip { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0; }
.strip figure { margin: 0; flex: 1 1 14rem; min-width: 0; }
.strip figcaption { font-size: .78rem; color: #6c7a62; padding-top: .3rem; }

table.cat { width: 100%; border-collapse: collapse; font-size: .85rem; margin: .8rem 0 1.4rem; }
table.cat caption { text-align: left; font-weight: 700; padding: 0 0 .4rem; }
table.cat th { text-align: left; background: #eaeee1; padding: .45rem .5rem; border: 1px solid #d5dcc7; }
table.cat td { padding: .45rem .5rem; border: 1px solid #e3e8da; vertical-align: top; }
table.cat td.p { white-space: nowrap; text-align: right; }
table.cat tr:nth-child(even) td { background: #fbfcf7; }

.tip { border: 1px dashed #b6c3a2; background: #f1f4ea; padding: .8rem 1rem; margin: 1.3rem 0; font-size: .88rem; }
.tip b { color: #3f5c26; }

#foot {
  grid-column: 1 / -1;
  border-top: 3px double #c9d2bb;
  padding: .9rem 0 0;
  font-size: .8rem;
  color: #6c7a62;
}

@media (max-width: 42rem) {
  #page { grid-template-columns: 1fr; }
  #side { border-bottom: 1px solid #dfe4d5; }
  #side ul { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
  #side a { border-left: 0; padding-left: 0; }
}