.single-article {
  min-inline-size: 0;
}

.article-intro {
  max-inline-size: 62rem;
  margin-inline: auto;
}

.article-context {
  margin: 0 0 var(--space-12);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-title {
  max-inline-size: 19ch;
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.article-excerpt {
  max-inline-size: 58ch;
  margin: var(--space-24) 0 0;
  color: var(--color-text-muted);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.55;
}

.article-meta {
  margin-block-start: var(--space-24);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/*
 * Mobile Article Metadata Overflow Correction (PART 1 Capability Revision
 * 008, Editorial Core 0.5.6). Root cause: `.article-meta` already had
 * `display: flex; flex-wrap: wrap` (components.css), which correctly wraps
 * ordinary metadata onto multiple rows at narrow widths -- confirmed live
 * (real 375px CSS viewport, not a clamped/cropped screenshot) with normal
 * author/date/badge content: zero overflow, clean two-line wrap. The
 * latent gap flex-wrap alone can't cover: a flex item's `min-width`
 * defaults to `auto`, which floors it at its content's min-content size
 * (the width of its single longest unbreakable run of characters) even
 * though the item can move to its own new line. An unusually long,
 * space-/hyphen-free metadata value (e.g. an author display name with no
 * breakable characters) can therefore still force real horizontal
 * overflow at 375px, confirmed live in the same way (that exact case
 * measured genuine viewport growth beyond 375px before this fix).
 * `min-width: 0` lets each metadata item shrink to fit its row instead of
 * being floored by that default; `overflow-wrap: anywhere` on the item's
 * own text elements lets an unbreakable run wrap inside its own box (and,
 * per the CSS Text spec, also shrinks that min-content floor directly) --
 * together they let an outlier value wrap safely instead of overflowing,
 * without changing wrapping/spacing for any normal-length value.
 */
.article-meta > li {
  min-width: 0;
}

.article-meta a,
.article-meta time {
  overflow-wrap: anywhere;
}

.article-meta a {
  color: inherit;
}

.article-featured {
  max-inline-size: 75rem;
  margin: var(--space-48) auto var(--space-64);
}

.article-featured--reduced {
  max-inline-size: 48rem;
}

.article-featured__image {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(0, var(--article-reading-width)) minmax(11rem, 0.8fr);
  align-items: start;
  gap: clamp(var(--space-24), 3vw, var(--space-48));
}

.article-layout--without-toc {
  grid-template-columns: minmax(0, var(--article-reading-width)) minmax(11rem, 16rem);
  justify-content: center;
}

.article-rail,
.article-body {
  min-inline-size: 0;
}

.article-rail__sticky {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-24));
}

.article-rail__title {
  margin: 0 0 var(--space-12);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-toc__list,
.article-toc__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-toc__item--level-3 {
  margin-inline-start: var(--space-12);
  font-size: 0.9375rem;
}

.article-toc__link {
  display: block;
  padding-block: var(--space-8);
  color: var(--color-text-muted);
  text-decoration: none;
}

.article-toc__link:hover,
.article-toc__link:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
}

.article-body {
  color: var(--color-text);
  font-family: var(--font-reading);
  font-size: var(--text-body);
  line-height: var(--line-body);
  overflow-wrap: anywhere;
}

.article-body > * {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.article-body > :first-child {
  margin-block-start: 0;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.15;
  scroll-margin-block-start: calc(var(--header-height) + var(--space-24));
}

.article-body h2 {
  margin-block: var(--space-64) var(--space-16);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.article-body h3 {
  margin-block: var(--space-48) var(--space-12);
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body pre,
.article-body .wp-block-group,
.article-body .wp-block-table {
  margin-block: 0 var(--space-24);
}

.article-body li + li {
  margin-block-start: var(--space-8);
}

.article-body blockquote,
.article-body .wp-block-quote {
  margin-inline: 0;
  padding: var(--space-16) var(--space-24);
  border-inline-start: 0.25rem solid var(--color-link);
  background: var(--color-surface);
  font-size: 1.12em;
}

.article-body pre,
.article-body code,
.article-body kbd,
.article-body samp {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.article-body pre {
  max-inline-size: 100%;
  overflow-x: auto;
  padding: var(--space-16);
  border-radius: var(--radius-sm);
  background: #18212c;
  color: #f8fafc;
  font-size: 0.875em;
  line-height: 1.55;
}

.article-body :not(pre) > code {
  padding: 0.12em 0.3em;
  border-radius: var(--radius-sm);
  background: var(--color-surface-strong);
  font-size: 0.85em;
}

.article-body .wp-block-table {
  max-inline-size: 100%;
  overflow-x: auto;
}

.article-body table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

.article-body .wp-block-table table {
  min-inline-size: 40rem;
}

.article-body th,
.article-body td {
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  overflow-wrap: anywhere;
  text-align: start;
  vertical-align: top;
}

.article-body th {
  background: var(--color-surface);
  font-weight: 750;
}

.article-body .wp-block-group.has-background,
.article-body .is-style-callout,
.article-body .article-callout {
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.article-body figure,
.article-body .wp-caption {
  margin-inline: 0;
  margin-block: 0 var(--space-24);
}

.article-body figcaption,
.article-body .wp-caption-text,
.article-body .wp-element-caption {
  margin-block-start: var(--space-8);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
}

.article-rail--right {
  font-size: 0.9375rem;
}

.article-rail__section + .article-rail__section {
  margin-block-start: var(--space-32);
  padding-block-start: var(--space-24);
  border-block-start: 1px solid var(--color-border);
}

.article-taxonomy a {
  color: var(--color-text-muted);
}

@media (max-width: 67.5rem) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: var(--article-reading-width);
    margin-inline: auto;
  }

  .article-rail__sticky {
    position: static;
  }

  .article-rail--left {
    order: 1;
  }

  .article-body {
    order: 2;
  }

  .article-rail--right {
    order: 3;
  }

  .article-toc__list {
    columns: 1;
  }
}

@media (max-width: 40rem) {
  .site-main {
    padding-block: var(--space-48);
  }

  .article-featured {
    margin-block: var(--space-32) var(--space-48);
  }

  .article-body {
    font-size: 1.0625rem;
  }

  .article-body .wp-block-table table {
    min-inline-size: 34rem;
  }
}