/* ============================================================
   Blog articles and the two index pages.

   Loaded after styles.css and legal.css. Those already supply the palette,
   nav, footer, reading column, prose, links and tables, so this file only
   adds what an article has that a legal page does not: a byline, code
   blocks, the post list, and the right to left corrections.
   ============================================================ */

/* Articles carry more structure than a policy, so the headings need a
   little more room to separate sections at a glance. */
.article h2 { font-size: 25px; margin: 52px 0 16px; letter-spacing: -.02em; }
.article h3 { font-size: 18px; margin: 32px 0 10px; }
.article p { font-size: 16.5px; line-height: 1.72; }
.article li { font-size: 16.5px; line-height: 1.7; }

.crumb { margin: 0 0 24px; }
.crumb a {
  font-size: 14px; color: var(--mu); text-decoration: none;
  border-bottom: 0; font-weight: 500;
}
.crumb a:hover { color: var(--ac); }

.byline { font-size: 14px; color: var(--dim); margin: -8px 0 36px; }

.lede-sm {
  font-size: 18px; line-height: 1.65; color: var(--mu);
  max-width: 58ch; margin: 0 0 24px;
}

/* Code. Horizontal scroll on the block, never on the page. */
pre.code {
  background: var(--tx); color: #e8ece9;
  border-radius: var(--r-m); padding: 20px 22px; margin: 0 0 24px;
  overflow-x: auto; font-size: 13.5px; line-height: 1.72;
  box-shadow: var(--sh-s);
}
pre.code code { font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); }
:not(pre) > code {
  background: var(--sunk); border: 1px solid var(--bd);
  border-radius: 5px; padding: 1px 5px; font-size: .9em;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  color: var(--tx);
}

hr { border: 0; border-top: 1px solid var(--bd); margin: 44px 0; }

blockquote {
  margin: 0 0 22px; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--bd-s); color: var(--mu);
}
blockquote p:last-child { margin-bottom: 0; }

/* The offer at the end of a post. Quiet: somebody who read 1,500 words does
   not need to be shouted at. */
.endcap {
  margin: 56px 0 0; padding: 24px 26px;
  background: var(--ac-w); border: 1px solid var(--bd);
  border-radius: var(--r-m); box-shadow: var(--sh-s);
}
.endcap p { margin: 0 0 16px; color: var(--tx); }

/* ---------- index ---------- */
.posts { list-style: none; margin: 32px 0 0; padding: 0; }
.post { margin: 0 0 16px; }
.post > a {
  display: block; padding: 22px 24px; border: 1px solid var(--bd);
  border-radius: var(--r-m); background: var(--pnl); box-shadow: var(--sh-s);
  text-decoration: none; border-bottom: 1px solid var(--bd);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.post > a:hover {
  box-shadow: var(--sh-m); border-color: var(--bd-s); transform: translateY(-1px);
}
.post time { font-size: 13px; color: var(--dim); font-family: var(--mono, monospace); }
.post h2 {
  font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  margin: 8px 0 8px; color: var(--tx);
}
.post p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--mu); }

/* ---------- right to left ----------
   legal.css sets padding-left on lists and text-align on cells, which are
   both wrong once the document runs the other way. */
.ar { font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
.ar main ul, .ar main ol { padding-left: 0; padding-right: 22px; }
.ar th, .ar td { text-align: right; }
.ar blockquote { border-left: 0; border-right: 3px solid var(--bd-s); padding: 4px 20px 4px 0; }
.ar .crumb a { display: inline-block; transform: scaleX(-1); }
.ar .byline, .ar .post time { font-family: inherit; }
.ar .article p, .ar .article li { line-height: 1.9; }

@media (max-width: 767.98px) {
  .article h2 { font-size: 22px; margin-top: 40px; }
  pre.code { padding: 16px 16px; font-size: 12.5px; }
}