/* ==========================================================================
   RAILSDESK — article page layer.
   ==========================================================================
   Long-form reading, on top of site.css.

   One centred column, no sidebar. The first attempt put a table of contents
   in a right rail and squeezed the prose into the remaining two thirds, left
   against the viewport edge — on a wide screen the eye had to travel the full
   width and then back to a line start far to the left. A six-minute article
   does not need a contents list; it needs a measure it can read.

   Centred here means the *column* is centred. Text inside it stays flush left,
   so Modernist's rule holds — that rule is about ragged-right typesetting, not
   about pinning content to the viewport edge. The horizontal rules still run
   full-bleed, which is what keeps the page feeling like the rest of the site.

   Type is still Archivo. A serif would read better at this length, but the
   system is set entirely in Archivo and one page in Georgia would come apart
   from every other. Size, leading and measure do the work instead.
   ========================================================================== */

/* Content lands at ~672px inside the gutters — about 35 Chinese characters or
   70 Latin ones per line, which is the band long-form prose is easiest to read
   at, and roughly where Medium sets its own measure. */
.article__wrap {
  width: min(768px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.article { border-bottom: var(--rule); }

/* — sign-up banner ————————————————————————————————————————————————————
   Sits above every article. Full-bleed accent: the design system reserves a
   solid red field for the poster statement, and a single conversion band at
   the top of the page is exactly that — one field, once, not red scattered
   through the page.
   ———————————————————————————————————————————————————————————————————— */

.promo {
  background: var(--color-accent); color: #fff;
  border-bottom: var(--rule);
}
.promo__wrap {
  width: min(1140px, 100%); margin-inline: auto; padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.promo__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.promo__title {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.02em;
}
.promo__sub { font-size: 14px; line-height: 1.5; opacity: 0.92; max-width: 62ch; }
.promo__cta {
  display: inline-flex; align-items: center; flex: none;
  height: 48px; padding: 0 24px;
  background: #fff; color: var(--color-accent-700);
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  white-space: nowrap;
}
.promo__cta:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.promo :focus-visible { outline-color: #fff; }

@media (max-width: 620px) {
  .promo__wrap { padding: 18px var(--gutter); }
  .promo__title { font-size: 19px; }
  .promo__cta { width: 100%; justify-content: center; }
}

/* — masthead ————————————————————————————————————————————————————————— */

.article__head { padding: 48px 0 44px; border-bottom: var(--rule); }

.article__back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 36px;
}
.article__back::before { content: "←"; }

.article__meta {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: 24px; flex-wrap: wrap;
}
.article__date { font-size: 13px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.article__read { font-size: 13px; color: var(--color-neutral-700); }
.article__meta-sep { width: 3px; height: 3px; background: var(--color-neutral-500); }

.article__title {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -0.03em;
  margin: 0 0 24px; text-wrap: balance;
}
.article__lede {
  font-size: 21px; line-height: 1.6; margin: 0;
  color: var(--color-neutral-800); text-wrap: pretty;
}

/* — contents ——————————————————————————————————————————————————————————
   The first version of this page put the contents in a right rail and paid
   for it out of the reading measure. It does not have to cost anything: on a
   wide screen the margins beside a 672px column are dead space, so the list
   goes there and the prose keeps every pixel it had. Narrow screens get it as
   a plain block above the article instead of losing it.
   ———————————————————————————————————————————————————————————————————— */

.article__toc {
  border-top: var(--rule); border-bottom: var(--rule);
  padding: 20px 0; margin-bottom: 40px;
}
.article__body .article__toc-title {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 12px; line-height: 1.4;
}
.article__body .article__toc-list {
  list-style: none; font-size: 14px; line-height: 1.45;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.article__body .article__toc-list li { margin: 0; }
/* Scoped under .article__body for the same reason the small print is: the
   prose link rule there underlines and accents every <a> inside it, and a
   contents list is navigation, not a citation. */
.article__body .article__toc-link {
  display: block; padding: 7px 0 7px 12px;
  color: var(--color-neutral-700); text-decoration: none;
  border-left: 2px solid var(--color-divider);
}
.article__body .article__toc-link:hover {
  color: var(--color-text); border-left-color: var(--color-text);
}
.article__body .article__toc-link[aria-current="true"] {
  color: var(--color-text); font-weight: 700;
  border-left-color: var(--color-accent);
}

/* — body ——————————————————————————————————————————————————————————— */

.article__body { padding: 52px 0 72px; }

/* Wide enough for a 672px column plus a rail in the left margin and still
   symmetric — the prose stays dead centre, which is the whole point. */
@media (min-width: 1220px) {
  .article__body .article__wrap {
    width: 100%; max-width: 1360px;
    display: grid;
    grid-template-columns: 1fr min(672px, 100%) 1fr;
    column-gap: 40px;
  }
  .article__prose { grid-column: 2; min-width: 0; }
  .article__toc {
    grid-column: 1; justify-self: end; align-self: start;
    position: sticky; top: calc(var(--header-h) + 32px);
    width: 210px; margin-bottom: 0;
    border-top: 0; border-bottom: 0; padding: 0;
  }
}

.article__body p {
  font-size: 19px; line-height: 1.75; margin: 0 0 28px; text-wrap: pretty;
}
.article__body > *:last-child { margin-bottom: 0; }

.article__body h2 {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.02em;
  margin: 60px 0 20px; scroll-margin-top: 88px;
}
.article__body h2:first-child { margin-top: 0; }
.article__body h3 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 21px; line-height: 1.25; margin: 40px 0 12px;
}

.article__body strong { font-weight: 700; }
.article__body em { font-style: italic; }
.article__body a { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { color: var(--color-accent); }

.article__body ul, .article__body ol {
  font-size: 19px; line-height: 1.75; margin: 0 0 28px; padding-left: 1.2em;
}
.article__body li { margin-bottom: 14px; }
.article__body li::marker { color: var(--color-accent); }

/* A figure pulled out of the prose — the one place accent runs as a field. */
.article__stat {
  border-top: var(--rule); border-bottom: var(--rule);
  padding: 28px 0; margin: 48px 0;
}
.article__stat-value {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 60px; line-height: 1; letter-spacing: -0.04em;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
/* Scoped under .article__body deliberately. The prose rules above are written
   as `.article__body p`, which outweighs a lone utility class on a <p> inside
   it — every small-print element here has to match that specificity or it
   silently renders at 19px body size. */
.article__body .article__stat-note {
  font-size: 15px; line-height: 1.6; color: var(--color-neutral-700);
  margin: 14px 0 0;
}

/* Illustrations break the measure like tables do — they are looked at, not
   read along, so they get the full column. */
.article__figure { margin: 40px 0; }
.article__figure img {
  width: 100%; height: auto; display: block;
  border: 2px solid var(--color-text);
}
.article__figure figcaption {
  font-size: 13px; color: var(--color-neutral-700);
  margin-top: 12px; line-height: 1.5;
}

.article__note {
  background: var(--color-surface);
  padding: var(--space-6); margin: 40px 0;
  border-left: 3px solid var(--color-accent);
}
.article__note p { font-size: 16px; line-height: 1.65; margin: 0; }
.article__note p + p { margin-top: 14px; }

/* Tables break the measure on purpose — they are read by scanning, not by
   line, so they get the full column and scroll if they need more. */
.article__table-wrap { overflow-x: auto; margin: 40px 0; }
.article__table-wrap .table { min-width: 520px; }
.article__table-wrap .table td { font-variant-numeric: tabular-nums; }
.article__body .article__figcaption {
  font-size: 13px; color: var(--color-neutral-700);
  margin: 12px 0 0; line-height: 1.5;
}

/* — disclosure + foot ————————————————————————————————————————————————— */

.article__disclosure {
  border-top: var(--hairline); margin-top: 56px; padding-top: 24px;
}
.article__body .article__disclosure-title {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 10px;
}
.article__disclosure p {
  font-size: 13px; line-height: 1.65; color: var(--color-neutral-700); margin: 0;
}

.article__foot { padding: 36px 0; border-top: var(--rule); }
.article__foot .article__wrap {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-6); flex-wrap: wrap;
}
.article__foot-note {
  font-size: 13px; color: var(--color-neutral-700);
  max-width: 46ch; line-height: 1.6; margin: 0;
}

@media (max-width: 620px) {
  .article__head { padding-top: 32px; }
  .article__body { padding: 36px 0 48px; }
  .article__body p, .article__body ul, .article__body ol { font-size: 17px; }
  .article__lede { font-size: 18px; }
  .article__body h2 { font-size: 25px; margin-top: 44px; }
  .article__stat-value { font-size: 46px; }
}

/* ==========================================================================
   Article index — /articles/
   ========================================================================== */

/* The index is scanned, not read line by line, so it is not held to the
   article's reading measure — titles were wrapping to two lines inside 672px
   for no benefit. */
.article__wrap--wide { width: min(1140px, 100%); }

.list__head { padding: 48px 0 40px; border-bottom: var(--rule); }
.list__title {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 20px;
}
.list__lede {
  font-size: 18px; line-height: 1.6; margin: 0;
  color: var(--color-neutral-800); max-width: 56ch;
}

.post-list { border-bottom: var(--rule); }

/* Same three-part rhythm as the homepage rows — index, body, meta — but with
   room to breathe, since this page is the list rather than a summary of it. */
.post {
  display: grid; grid-template-columns: 72px 1fr 160px; gap: var(--space-8);
  align-items: start; padding: 32px 0;
  border-bottom: var(--hairline); color: var(--color-text);
}
.post:last-child { border-bottom: 0; }
a.post:hover { background: var(--color-accent-100); color: var(--color-text); }
a.post:hover .post__title { color: var(--color-accent-700); }

/* Rows without a target are not links: the piece is not published yet, and a
   dead anchor is worse than an honest non-link. */
.post--unpublished { color: var(--color-neutral-600); }
.post--unpublished .post__title { color: var(--color-neutral-700); }

.post__no {
  font-family: var(--font-heading); font-weight: 900; font-size: 13px;
  color: var(--color-neutral-500); font-variant-numeric: tabular-nums; padding-top: 6px;
}
.post__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.post__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 23px;
  line-height: 1.22; letter-spacing: -0.015em; text-wrap: pretty;
}
.post__summary { font-size: 14px; color: var(--color-neutral-700); line-height: 1.6; }
.post__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.post__date { font-size: 12px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }

/* — pagination — */

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: 28px 0; flex-wrap: wrap;
}
.pagination__pages { display: flex; align-items: center; gap: var(--space-2); }
.pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  border: 2px solid var(--color-divider); color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.pagination__link:hover { border-color: var(--color-accent); color: var(--color-text); }
.pagination__link[aria-current="page"] {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.pagination__link[aria-disabled="true"] {
  opacity: 0.4; pointer-events: none;
}
.pagination__count { font-size: 12px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .post { grid-template-columns: 1fr; gap: var(--space-2); padding: 24px 0; }
  .post__no { display: none; }
  .post__meta { flex-direction: row; align-items: center; gap: var(--space-3); }
  .pagination { justify-content: center; }
}