body {
  background: #fff;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.4;
  margin: 1rem auto 1.8rem;
  max-width: 48rem;
  padding: 0 1.1rem;
}
h1 { font-size: 1.65em; font-weight: bold; margin: 0 0 .08em; }
h2 { font-size: 1.2em; font-weight: bold; margin: 0 0 .5em; }
p { margin: .35em 0; }
.nav { margin: 0 0 .25em; }
a:link { color: #0000ee; }
a:visited { color: #551a8b; }
hr { border: 0; border-top: 1px solid #000; margin: 0 0 .85em; }
.stamp {
  margin: -.4em 0 .85em;
  font-size: .78em;
  font-style: italic;
}

.box {
  border: 1px solid #000;
  margin: 0 0 .9em;
}
.box-head {
  margin: 0;
  padding: .2em .6em;
  border-bottom: 1px solid #000;
  background: #eee;
  font-weight: bold;
}
.box-body { padding: .4em .6em .5em; }
.box-body p:first-child { margin-top: 0; }
.box-body p:last-child { margin-bottom: 0; }
.box-foot {
  margin: 0;
  padding: .3em .6em;
  border-top: 1px solid #000;
}
.where { font-style: italic; margin: 0; }
.when { font-size: .9em; margin: 0 0 .35em; }

.boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .9em 1rem;
}
.boxes .box { margin: 0; }

.intro {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 1.1rem;
  align-items: start;
}
.intro > p { margin: 0; }
.intro img {
  width: 150px;
  height: auto;
  border: 1px solid #000;
}
.side { margin-top: 1em; }
.side .box { font-size: .92em; }
.currently {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .15em .7em;
  margin: 0;
  padding: .45em .6em .5em;
}
.currently dt { font-style: italic; }
.currently dd { margin: 0; }

.post {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  margin: 0;
  padding: .35em .6em;
  border-bottom: 1px solid #bbb;
}
.list .post:last-of-type { border-bottom: 0; }
.news .post { display: block; border: 0; padding: .45em .6em .5em; }
.date { font-size: .9em; white-space: nowrap; }
.news .date { display: block; margin-top: .1em; }

.lost { margin: 2.5em 0 3em; }
.lost .code { margin: 0 0 .1em; font-size: 4.5em; font-weight: bold; line-height: 1; }

footer {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.1em;
  padding-top: .55em;
  border-top: 1px solid #000;
}
.links {
  margin: 0 auto 0 0;
  white-space: nowrap;
}
.memory {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .4rem;
  margin: 0;
  font-size: .78em;
  font-style: italic;
  white-space: nowrap;
}
footer img {
  width: 44px;
  height: auto;
  border: 0;
}

@media (min-width: 1100px) {
  body { max-width: 64rem; }
  .home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19.5rem;
    gap: 0 2.2rem;
    align-items: start;
  }
  .side { margin-top: 0; }
  .intro { grid-template-columns: 170px minmax(0, 1fr); }
  .intro img { width: 170px; }
}

@media (min-width: 1500px) {
  body { max-width: 70rem; font-size: 18px; }
}

@media (max-width: 700px) {
  .intro { grid-template-columns: 1fr; }
  .intro img { width: 140px; }
  .post { display: block; }
  .date { display: block; white-space: normal; }
  footer { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .links { white-space: normal; margin-right: 0; }
}