/* The blog and the changelog. Loaded per page, the way account.css and leaderboard.css are: these
   are three pages and their prose scale has no business on every request.

   The site's type scale in DESIGN.md covers UI, not long-form reading. What is new here is the
   measure, the rhythm between blocks, and one rule about links. */

.blog-main {
  --measure: 46rem;
}

.blog-empty {
  margin-top: 2.5rem;
  color: var(--cream-soft);
}

/* The way to the feed, under the lede rather than beside the title: it is an offer, not the page. */
.blog-follow {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

.blog-follow a {
  color: var(--cream-soft);
}

/* A post's card is the lobby's card at a larger size: it carries a sentence rather than a variant's
   half-line, and the picture on it is the post's own rather than one of fourteen boards. */
.blog-main .choice-list {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.choice--post .choice__body {
  flex: 1;
  padding: 1rem 1.25rem 1.25rem;
}

.choice--post h2,
.choice--post h3 {
  margin: 0.25rem 0 0;
  font-size: 1.1875rem;
}

.choice--post p {
  font-size: 0.9375rem;
}

/* The date and how long the read is, separated the way the article's own facts are. */
.choice--post .choice__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.choice--post .choice__meta > * + *::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--panel-edge);
}

/* The newest post leads the first page across the whole row, so a blog of two posts is a lead and
   a card rather than two cards and a row of felt. It is still one link with its parts painting
   their own ground: the picture its own, the body the panel, side by side where there is room. */
.blog-lead {
  grid-column: 1 / -1;
}

.choice--lead h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.choice--lead p {
  font-size: 1rem;
}

@media (min-width: 48rem) {
  .choice--lead {
    flex-direction: row;
  }

  .choice--lead .choice__art {
    flex: 3 1 0;
  }

  .choice--lead .choice__body {
    display: flex;
    flex: 2 1 0;
    flex-direction: column;
    justify-content: center;
    padding: 1.75rem;
  }
}

.choice--post .choice__art:not(:has(img)) {
  background: var(--game-color);
}

.blog-pager {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 2.5rem;
}

.blog-pager__place {
  color: var(--cream-soft);
  font-size: 0.9375rem;
}

/* The article. One panel as wide as the shell, the width the profile and the changelog take; what
   is read inside it keeps the measure, and the hero runs the panel's full width. */
.article {
  overflow: hidden;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}

/* The card paints no ground and each part paints its own, which is the rule .choice follows: a
   light ground under the picture's rounded corner shows as a pale hairline tracing it. */
/* The picture is uploaded at the share card's 1200 by 630, which is what a feed shows. On the page it
   is cut to a band, so the title is on the first screen rather than under it. */
.article__hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.article__body {
  --focus-ring: var(--ink);
  padding: 1.75rem;
  background: var(--panel);
  color: var(--ink);
}

@media (min-width: 48rem) {
  .article__body {
    padding: 2.5rem 1.75rem 3rem;
  }
}

.article__head h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* Three facts on one line. A gap alone reads as one sentence with odd spacing, so the parts are
   separated the way the felt's own lists separate theirs: by a mark between them. */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  max-width: none;
  margin: 0.75rem 0 0 -1.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  clip-path: inset(0 0 0 1.5rem);
}

/* Every part carries the mark before it, and the line is pulled left by one mark and clipped there:
   whichever part starts a line, the first or one that wrapped, has its mark cut off. */
.article__meta > *::before {
  content: "·";
  display: inline-block;
  width: 1.5rem;
  color: var(--panel-edge);
  text-align: center;
}

/* Who wrote it is a fact like the date beside it, not a link and not a colour: a game's colour on a
   name read as a link that went nowhere, and on Mahjong's purple as an error. */
.article__by {
  color: var(--ink);
  font-weight: 600;
}

.article__untranslated {
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 0.1875rem solid var(--accent-edge);
  border-radius: var(--radius-control);
  background: rgba(245, 179, 53, 0.12);
  font-size: 0.9375rem;
}

/* Prose. Set a step larger than the UI and a little wider than the 60ch DESIGN.md sets for body
   copy, since the panel is the shell's width; the rest is the spacing ladder. */
.prose {
  max-width: var(--measure);
  font-size: 1.0625rem;
  margin-top: 1.75rem;
  line-height: 1.7;
}

/* The column is the measure, so a paragraph fills it: under the site's 60ch cap a centred or
   right-aligned line stopped short of the heading above it. */
.prose p {
  max-width: none;
}

.prose > * + * {
  margin-top: 1.25rem;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h2 {
  margin-top: 2.5rem;
  font-size: 1.5rem;
}

.prose h3 {
  margin-top: 1.75rem;
  font-size: 1.1875rem;
}

.prose h2 + *,
.prose h3 + * {
  margin-top: 0.75rem;
}

/* A prose link cannot wear the accent: --accent reads at 1.8:1 on a panel and --accent-edge at
   about 3:1, and neither is enough for text. So the word keeps the panel's ink and the accent is
   the underline under it, which carries the colour where contrast does not depend on it. */
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-edge);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.1875rem;
}

.prose a:hover {
  text-decoration-thickness: 0.1875rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

/* Quill writes every list as an `ol` and marks a bulleted item with `data-list="bullet"`. */
.prose li[data-list="bullet"] {
  list-style-type: disc;
}

.prose li + li {
  margin-top: 0.5rem;
}

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.25rem;
  border-left: 0.1875rem solid var(--game-color);
  color: var(--ink-soft);
}

.prose code {
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  background: rgba(27, 36, 32, 0.07);
  font-size: 0.9375rem;
}

.prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--radius-control);
  background: rgba(27, 36, 32, 0.07);
}

.prose pre code {
  padding: 0;
  background: none;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-control);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  padding: 0.5rem 0.75rem;
  border-bottom: 0.0625rem solid var(--panel-edge);
  text-align: left;
}

/* The way into the game the post is about. It is the article's last word, so it takes the game's
   colour as a rule down its side rather than as a second button fill. */
.article__play {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin-top: 2.5rem;
  padding: 1.25rem;
  border-left: 0.25rem solid var(--game-color);
  border-radius: var(--radius-control);
  background: rgba(27, 36, 32, 0.05);
}

.article__play p {
  margin: 0;
  color: var(--ink-soft);
}

/* What the post is filed under, as the panel's own pills: each is an address, the way a filter is. */
.article__tags {
  margin-top: 1.75rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

/* Everything on the article's panel that is read keeps the measure and centres in it. Scoped to the
   article: a release's prose sits left on the changelog, under its left-aligned head. */
.article__head,
.article__untranslated,
.article__body > .prose,
.article__tags,
.article__play {
  max-width: var(--measure);
  margin-inline: auto;
}

/* The posts either side, on the felt rather than on the panel: they are what comes after the read. */
.article__around {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 1.25rem auto 0;
}

.article__near {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: 0 0.375rem 0 rgba(0, 0, 0, 0.2);
  color: var(--ink);
  text-decoration: none;
}

.article__near span {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.article__near strong {
  font-family: var(--display);
  font-weight: 600;
}

.article__near--newer {
  text-align: right;
}

@media (prefers-reduced-motion: no-preference) {
  .article__near {
    transition: transform var(--duration-hover) ease;
  }
}

.article__near:hover {
  transform: translateY(-0.1875rem);
}

/* What to read next, on the felt under the article: the index's own cards, at the article's width. */
.blog-related {
  margin: 3rem auto 0;
}

.blog-related h2 {
  font-size: 1.1875rem;
}

.blog-related .choice-list {
  margin-top: 1rem;
}

/* The changelog. One panel, one list, newest first — and a list takes the shell the way the
   leaderboard and the activity strip do, rather than an article's measure. What is read inside a
   release keeps that measure; what is scanned down the column does not. */
.releases {
  margin-top: 2.5rem;
  padding: 1.75rem;
  list-style: none;
}

.release + .release {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 0.0625rem solid var(--panel-edge);
}

/* The date sits over the title rather than beside it: side by side, a long title dropped under its
   date on a phone while a short one stayed beside it, and the column read ragged. */
.release__head {
  display: grid;
  gap: 0.25rem;
}

.release__date {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.release__title {
  margin: 0;
  font-size: 1.5rem;
}

.release__title a {
  color: var(--ink);
  text-decoration: none;
}

.release__title a:hover {
  text-decoration: underline;
}

.release__summary {
  max-width: var(--measure);
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
}

.release__body {
  margin-top: 1rem;
}

/* Quill writes alignment as a class on the block, so the published article has to know the same
   three names the editor does. Without these, centring a line works while it is being written
   and does nothing at all once it is read, which is the worst of both. */
.prose .ql-align-center {
  text-align: center;
}

.prose .ql-align-right {
  text-align: right;
}

.prose .ql-align-justify {
  text-align: justify;
}

/* A picture set inside an article. It is a block on its own line rather than something text runs
   around: the measure is 46rem and a picture with a column of words beside it has neither. */
.prose img {
  display: block;
  margin-inline: auto;
}

/* Contact and privacy: an article with no head of its own. The page's title and lede sit on the felt
   the way the changelog's do, and the panel under them holds only what is read. */
.about {
  margin-top: 2.5rem;
}

.about .prose {
  margin-top: 0;
}

.about .prose > h2:first-child {
  margin-top: 0;
}

/* The one thing a reader came to the contact page for, so it is set at a heading's size. An address
   has no spaces to break at, so the markup offers a break after its @, and on a phone it steps down
   to the h3 size; only an address too long even for that breaks wherever it has to. */
.about__address {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  .about__address {
    font-size: 1.1875rem;
  }
}

/* Four short links, two to a row where there is room, so the page fits one screen. */
@media (min-width: 48rem) {
  .about__actions {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.5rem 3rem;
  }

  .about__actions li + li {
    margin-top: 0;
  }
}

/* Small print under the lede: a date, which is what --cream-soft is fine for on the felt. */
.about__updated {
  margin-top: 0.5rem;
  color: var(--cream-soft);
  font-size: 0.9375rem;
}