/* The articles under /articles. Layered on /apps/apps.css, which sets the
   colours, type and layout; this adds only what longer reading pages need.
   Served by HAProxy from disk like the apps pages: no scripts, no fonts. */

article h2 { scroll-margin-top: 16px; }
ol { margin: 0 0 14px; padding-left: 1.4em; }

/* Move sequences in checkers notation, e.g. 11-15 22-18. */
.moves {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  color: var(--ink);
  white-space: nowrap;
}

/* A short aside: how the squares are numbered, a rule this site applies. */
.note {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 18px 0;
}
.note p:last-child { margin-bottom: 0; }

/* The list of articles on /articles. */
.articles { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.articles li { margin: 0; }
.articles a {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
}
.articles a:hover { border-color: var(--gold); }
.articles h2 { margin: 0 0 4px; font-size: 19px; }
.articles p { margin: 0; }
.articles .go { display: inline-block; margin-top: 10px; color: var(--gold); font-weight: 600; }

/* Variant comparison table. Scrolls sideways on a narrow screen rather
   than squeezing the columns. */
.table-wrap { overflow-x: auto; margin: 18px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 650; }
tbody tr:hover { background: var(--card); }

.more { margin-top: 34px; }
.more ul { margin-top: 8px; }

footer.links { border-top: 1px solid var(--line); padding-top: 18px; }