/* Typography for text that comes out of the database.

   `site.css` is carried over from the landing and regenerated by a script; anything written
   for the Django site lives here so a rebuild cannot erase it. Loaded second, so it wins
   where the two meet.

   Everything below is the prose of a post or a release: the landing had no long-form body,
   so none of these rules existed. */

/* A page that opens with a title and continues straight into prose does not need two full
   section paddings between them - on a phone the pair left a screen-high hole between a
   sentence and the thing it introduces. Halved rather than removed: the title is still a
   title, not the first line of the body. */
.section--head {
  padding-block-end: clamp(1.5rem, 3vw, 3rem);
}

.post__body {
  max-width: 68ch;
}

.post__body > * + * {
  margin-top: 1.1rem;
}

.post__body h2 {
  margin-top: 2.25rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.post__body h3 {
  margin-top: 1.75rem;
  font-size: 1.1875rem;
  font-weight: 700;
}

.post__body ul,
.post__body ol {
  padding-inline-start: 1.35rem;
  list-style: disc;
}

.post__body ol {
  list-style: decimal;
}

.post__body li + li {
  margin-top: 0.45rem;
}

.post__body a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.post__body blockquote {
  margin-inline: 0;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--cl-accent);
}

.post__body pre {
  padding: 0.9rem 1.1rem;
  border-radius: var(--cl-r-md);
  background: rgba(8, 14, 30, 0.4);
  border: 1px solid var(--cl-line);
  overflow-x: auto;
  font-family: var(--cl-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.post__body code {
  font-family: var(--cl-mono);
  font-size: 0.9em;
}

.post__body hr {
  border: 0;
  border-top: 1px solid var(--cl-line);
}

/* The listing: the title is a heading with a link inside it, not a link dressed as a
   heading - an outline made of anchors tells a crawler, and a screen reader, nothing about
   what this page contains. */
.rules__item .h3 a {
  color: inherit;
  text-decoration: none;
}

.rules__item .h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}