body {
    margin: 40px auto;
    max-width: 650px;
    line-height: 1.6;
    font-size: 18px;
    color: #282828;
    background-color: #f9f5d7;
    padding: 0 10px;
}

h1 {
    text-align: center;
    font-size: 28px;
}

h3 {
  margin-bottom: 0.25em;
}

p {
  margin-top: 0;
}


.articles {
    margin-top: 20px;
}

.topic {
    margin-top: 30px;
}

/* book list */
.article-list {
    list-style: none;
    padding: 0;
}

.article-list li {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.article-list a {
    text-decoration: none;
    color: #0645AD;
    flex-grow: 1;
}

.article-list a:hover {
    text-decoration: underline;
}


summary {
  cursor: pointer;
  list-style: none; /* removes default triangle */
  outline: none;
}

summary::-webkit-details-marker { display: none; }

details[open] summary {
  font-style: italic;
}

summary:hover {
  text-decoration: underline dotted; /* subtle hover cue */
  color: #1d2021;
}

details .desc {
  margin-top: 5px;
  background: #ebdbb2;
  color: #282828;
  border: 1px solid #1d2021;
  padding: 4px 8px;
  border-radius: 0;   /* square corners */
  white-space: normal;
  word-wrap: break-word;
  max-width: 500px;
}

pre, code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

pre {
  background: #ebdbb2;   /* slightly darker than your page bg */
  padding: 0.75em 1em;
  border-radius: 0px;
  overflow-x: auto;
  margin: 1em 0;
}

code {
  background: #ebdbb2;
  padding: 0.1em 0.3em;
  border-radius: 0px;
}