/* Stratum — article.
   Loaded on singular views only.

   Two widths are in play and they are deliberately different: the article
   column plus its rail sit inside --stx-content-w, and the featured image is
   allowed to break out to --stx-media-w. Both are settings.

   The article measure applies to the layouts with no rail. With a rail, the
   text fills its column instead — capping it there would leave a band of empty
   space between the end of the line and the rail, which reads as a bug. */

/* --------------------------------------------------------------- article head */

.stx-arthead { position: relative; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }

/* The featured image runs wider than the text, up to the media width. */
.stx-arthead--plate .stx-arthead__media,
.stx-arthead--above .stx-arthead__figure {
  width: min(100% - 2.4rem, var(--stx-media-w));
  margin-inline: auto;
  border-radius: var(--stx-radius);
  overflow: clip;
}

.stx-arthead__inner { position: relative; }

.stx-arthead__title {
  font-size: clamp(var(--stx-fs-xl), 5.4vw, var(--stx-fs-4xl));
  margin: 0 0 .6rem;
  max-width: none;
  text-wrap: pretty;
}

.stx-arthead__standfirst {
  font-size: var(--stx-fs-lg);
  color: var(--stx-fg-mid);
  max-width: none;
  margin-bottom: .9rem;
}

/* Plate: the title sits on a raised surface that overlaps the image. */
.stx-arthead--plate .stx-arthead__media { aspect-ratio: 21 / 9; overflow: clip; }
.stx-arthead--plate .stx-arthead__media img { width: 100%; height: 100%; object-fit: cover; }

.stx-arthead--plate .stx-arthead__box {
  margin-top: clamp(-6rem, -8vw, -3rem);
  padding: clamp(1.2rem, 3vw, 2.2rem);
  background: var(--stx-plane1);
  border: 1px solid var(--stx-rim);
  border-radius: var(--stx-radius);
  box-shadow: var(--stx-elev-3);
  position: relative;
  z-index: 2;
  /* The plate spans the article width. It used to be capped well short of it,
     which left the headline in a narrow column under a much wider image. */
  max-width: none;
}

/* Cover: full bleed, text over the image. */
.stx-arthead--cover { display: grid; min-height: clamp(18rem, 52vh, 34rem); }
.stx-arthead--cover .stx-arthead__media,
.stx-arthead--cover .stx-arthead__inner { grid-area: 1 / 1; }
.stx-arthead--cover .stx-arthead__media img { width: 100%; height: 100%; object-fit: cover; }

.stx-arthead--cover .stx-arthead__inner {
  align-self: end;
  padding-block: clamp(1.4rem, 4vw, 3rem);
  background: linear-gradient(to top, color-mix(in srgb, var(--stx-substrate) 94%, transparent) 20%, transparent);
}

.stx-arthead--above .stx-arthead__inner,
.stx-arthead--plain .stx-arthead__inner { padding-top: clamp(1.6rem, 4vw, 3rem); }

/* The header text tracks the article width, not the container width, so the
   headline sits directly above the column it introduces. */
.stx-arthead__inner { width: min(100% - 2.4rem, var(--stx-content-w)); margin-inline: auto; }

.stx-arthead__figure { margin: 1.5rem 0 0; }
.stx-arthead__figure img { border-radius: var(--stx-radius); }

.stx-arthead__caption {
  margin-top: .5rem;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  color: var(--stx-fg-dim);
}

/* ------------------------------------------------------------------- prose */

.stx-prose { max-width: var(--stx-measure); font-size: var(--stx-fs-md); }

/* The single-article shell is capped at the article width and the columns are
   pulled together, so the rail sits beside the text rather than across a gap. */
.stx-shell--single {
  width: min(100% - 2.4rem, var(--stx-content-w));
  gap: var(--stx-rail-gap, 32px);
}

.stx-shell--rail .stx-prose,
.stx-shell--rail .stx-share,
.stx-shell--rail .stx-authorbox,
.stx-shell--rail .stx-comments,
.stx-shell--rail .stx-tags { max-width: none; }

.stx-shell--margins .stx-prose { margin-inline-start: clamp(0px, 8vw, 6rem); }

.stx-prose > * + * { margin-top: 1.1em; }

.stx-prose h2 { font-size: var(--stx-fs-xl); margin-top: 2em; }
.stx-prose h3 { font-size: var(--stx-fs-lg); margin-top: 1.6em; }

.stx-prose a { color: var(--stx-z1); }

.stx-prose blockquote {
  margin: 1.6em 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--stx-z3);
  font-size: var(--stx-fs-lg);
  color: var(--stx-fg);
}

.stx-prose blockquote cite {
  display: block;
  margin-top: .5rem;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--stx-fg-dim);
}

.stx-prose img,
.stx-prose figure img { border-radius: var(--stx-radius); }

.stx-prose figcaption {
  margin-top: .5rem;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  color: var(--stx-fg-dim);
}

.stx-prose code,
.stx-prose kbd {
  font-family: var(--stx-font-utility);
  font-size: .88em;
  padding: .12em .35em;
  border-radius: 4px;
  background: var(--stx-plane3);
  border: 1px solid var(--stx-hairline);
}

.stx-prose pre {
  padding: 1rem;
  border-radius: var(--stx-radius);
  background: var(--stx-plane3);
  border: 1px solid var(--stx-hairline);
  overflow-x: auto;
}

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

.stx-prose hr { border: 0; border-top: 1px solid var(--stx-hairline); margin: 2.4em 0; }

.stx-prose table { width: 100%; border-collapse: collapse; font-family: var(--stx-font-utility); font-size: var(--stx-fs-sm); }
.stx-prose th,
.stx-prose td { padding: .55rem .7rem; border-bottom: 1px solid var(--stx-hairline); text-align: left; }
.stx-prose th { color: var(--stx-fg-dim); text-transform: uppercase; letter-spacing: .08em; font-size: var(--stx-fs-xs); font-weight: 500; }
.stx-prose td { font-variant-numeric: tabular-nums; }

.stx-prose .alignwide { width: min(100vw - 3rem, var(--stx-media-w)); margin-inline: auto; }
.stx-prose .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }

/* --------------------------------------------------------------------- tags */

.stx-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.stx-tags__label {
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--stx-fg-dim);
  margin-right: .3rem;
}

.stx-tags a {
  display: inline-block;
  padding: .28rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--stx-hairline);
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-decoration: none;
  color: var(--stx-fg-mid);
}

.stx-tags a:hover { border-color: var(--stx-z1); color: var(--stx-z1); }

/* -------------------------------------------------------------------- share */

.stx-share {
  margin-top: 2rem;
  padding-block: 1rem;
  border-block: 1px solid var(--stx-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}

.stx-share__label {
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--stx-fg-dim);
}

.stx-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

.stx-share__link {
  display: inline-block;
  padding: .35rem .75rem;
  border-radius: var(--stx-radius-sm);
  border: 1px solid var(--stx-hairline);
  background: transparent;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--stx-fg-mid);
  cursor: pointer;
}

.stx-share__link:hover { border-color: var(--stx-z1); color: var(--stx-z1); }
.stx-share__link.is-copied { border-color: var(--stx-up); color: var(--stx-up); }

/* --------------------------------------------------------------- author box */

.stx-authorbox { margin-top: 2rem; display: flex; gap: 1rem; align-items: flex-start; }
.stx-authorbox__avatar { border-radius: 999px; flex: 0 0 auto; }

.stx-authorbox__label {
  display: block;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--stx-fg-dim);
  margin-bottom: .2rem;
}

.stx-authorbox__name { font-family: var(--stx-font-display); font-weight: 700; font-size: var(--stx-fs-lg); text-decoration: none; }
.stx-authorbox__bio { margin: .4rem 0 0; color: var(--stx-fg-mid); font-size: var(--stx-fs-sm); }

/* ----------------------------------------------------------------- comments */

.stx-comments { margin-top: 2.6rem; }

.stx-comments__title { font-size: var(--stx-fs-lg); margin-bottom: 1.2rem; }

.stx-comments__list,
.stx-comments__list .children { list-style: none; margin: 0; padding: 0; }
.stx-comments__list .children { margin-left: 1.4rem; padding-left: 1rem; border-left: 1px solid var(--stx-hairline); }

.stx-comments__list .comment-body {
  padding: 1rem 0;
  border-bottom: 1px solid var(--stx-hairline);
}

.stx-comments__list .comment-author { display: flex; align-items: center; gap: .6rem; font-family: var(--stx-font-utility); font-size: var(--stx-fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.stx-comments__list .comment-author img { border-radius: 999px; }
.stx-comments__list .comment-metadata { font-family: var(--stx-font-utility); font-size: var(--stx-fs-xs); color: var(--stx-fg-dim); margin-top: .2rem; }
.stx-comments__list .comment-metadata a { text-decoration: none; }
.stx-comments__list .reply { font-family: var(--stx-font-utility); font-size: var(--stx-fs-xs); text-transform: uppercase; letter-spacing: .08em; }

.stx-commentform { margin-top: 1.8rem; }
.stx-commentform__note { font-family: var(--stx-font-utility); font-size: var(--stx-fs-xs); color: var(--stx-fg-dim); }

.stx-commentform input[type="text"],
.stx-commentform input[type="email"],
.stx-commentform input[type="url"],
.stx-commentform textarea {
  width: 100%;
  padding: .7rem .9rem;
  border-radius: var(--stx-radius-sm);
  border: 1px solid var(--stx-rim);
  background: var(--stx-plane3);
  color: var(--stx-fg);
}

.stx-commentform label { display: block; font-family: var(--stx-font-utility); font-size: var(--stx-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--stx-fg-dim); margin-bottom: .3rem; }

/* -------------------------------------------------------------- page header */

.stx-pagehead { padding-top: clamp(1.6rem, 4vw, 3rem); }
.stx-pagehead__title { font-size: clamp(var(--stx-fs-xl), 5vw, var(--stx-fs-3xl)); }
.stx-pagehead__media { margin: 0 0 1.6rem; }
.stx-pagehead__media img { border-radius: var(--stx-radius); }

.stx-pagelinks { font-family: var(--stx-font-utility); font-size: var(--stx-fs-xs); margin-top: 1.5rem; }