/* lane-publication-article.css
   Article reading components for the publication lane, recomposed as one
   editorial page: headline unit, ruled body spine, evidence component,
   corrections banner, read next, subscribe, and the rail ad slot. All
   color, type, spacing, measure, radius and shadow values come from
   01-settings.css. Imported into the components layer by manifest.css.
*/

@layer components {

/* --- Headline unit --------------------------------------------------------
   Breadcrumbs, desk eyebrow, headline scale, byline with the automated
   disclosure, and the standfirst read as one composed block above the
   ruled page spine. */

.article-crumbs {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: var(--space-0) solid var(--hairline);
}

.article-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  color: var(--muted);
}

.article-crumbs__item {
  min-width: 0;
  overflow-wrap: anywhere;
}

.article-crumbs__item + .article-crumbs__item::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--hairline);
}

.article-crumbs__item a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: var(--space-1);
}

.article-crumbs__item a:hover {
  text-decoration-color: currentColor;
}

/* Headline scale: a heavier, tighter display serif for the article page.
   The landing and section pages keep their own hero register. */

.pub-hero__title {
  max-width: var(--measure);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.pub-hero__kicker {
  max-width: var(--measure);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-700);
}

/* Byline: author, role, disclosure, and dates between the headline and the
   standfirst, per the editorial contract. Dates sit on the right on wide
   screens and stack on narrow ones. */

.article-byline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-5);
  max-width: var(--measure);
  padding-block: var(--space-4);
  border-top: var(--space-1) solid var(--ink);
  border-bottom: var(--space-0) solid var(--hairline);
  font-family: var(--font-sans);
}

.article-byline__author {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--ink);
}

.article-byline__desk {
  grid-column: 1;
  margin: var(--space-1) 0 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-700);
}

.article-byline__disclosure {
  grid-column: 1;
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--muted);
}

.article-byline__dates {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  display: grid;
  gap: var(--space-1);
  text-align: right;
}

.article-byline__date {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.article-byline__date time {
  font-variant-numeric: tabular-nums;
}

/* Standfirst sits on the same reading column as the headline and byline. */

.pub-hero__lede {
  max-width: var(--measure);
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-body);
  color: var(--ink);
  text-wrap: pretty;
}

/* --- Page spine -----------------------------------------------------------
   Corrections banner opens the article column; the body, evidence block,
   methodology, read next, and subscribe all sit on the same ruled spine. */

.article-layout {
  padding-block: var(--space-6) var(--space-9);
}

.article-main {
  min-width: 0;
}

/* Corrections: quiet banner above the first paragraph, per the contract.
   Records carry date, note, and reviewer only, no commentary. */

.article-layout .corrections {
  max-width: var(--measure);
  margin: 0 0 var(--space-7);
  padding: var(--space-4);
  border: var(--space-0) solid var(--hairline);
  border-left: var(--space-1) solid var(--ink);
  background: var(--surface);
}

.article-layout .corrections__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-700);
}

.article-layout .corrections__item {
  padding-block: var(--space-3);
  border-top: var(--space-0) solid var(--hairline);
}

.article-layout .corrections__item:first-child {
  border-top: 0;
}

.article-layout .corrections__item time {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.article-layout .corrections__item p {
  margin: var(--space-1) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--muted);
}

/* --- Body rhythm ----------------------------------------------------------
   One register serves a three-sentence brief and a long feature: a firm
   measure, even paragraph spacing, quiet subheads, and no drop cap. */

.article-body {
  max-width: 680px;
  margin-top: var(--space-7);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 30px;
  color: var(--ink);
}

.publication-article--brief .article-body { max-width: 620px; }
.publication-article--feature .article-body { max-width: 720px; }

.article-body > p {
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}

.article-body > p:first-of-type {
  margin-top: 0;
}

/* Neutralize the shared prose drop cap; briefs and features read clean. */

.article-body > p:first-of-type::first-letter {
  float: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.article-body > h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
}

.article-body > h3 {
  margin: var(--space-7) 0 var(--space-2);
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
}

.article-body > ul,
.article-body > ol {
  max-width: var(--measure);
  margin: 0 0 var(--space-5);
}

.article-body > ul li::marker,
.article-body > ol li::marker {
  color: var(--brand-700);
}

.article-body strong {
  font-weight: var(--weight-semibold);
}

.article-body a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: var(--space-0);
  text-underline-offset: var(--space-1);
}

.article-body a:hover {
  color: var(--brand-900);
}

.article-body blockquote {
  margin: var(--space-7) 0;
  padding: var(--space-2) var(--space-5);
  border-left: var(--space-1) solid var(--brand-700);
  color: var(--muted);
  font-style: italic;
}

.article-body hr {
  margin: var(--space-8) 0;
  border: 0;
  border-top: var(--space-0) solid var(--hairline);
}

/* Lead image: full-column figure with a three-line factual caption. */

.article-media {
  margin: 0 0 var(--space-7);
}

.article-media img {
  display: block;
  width: 100%;
  height: auto;
}

.article-media__caption {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--space-0) solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--muted);
}

.article-media__caption-line {
  margin: 0;
}

.article-media__caption-line + .article-media__caption-line {
  margin-top: var(--space-1);
}

.article-media__caption a {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* Key data: a stat table inside the body flow, ruled like a newspaper
   fact box. Values align right on wide screens, stack on narrow ones. */

.article-figure {
  max-width: var(--measure);
  margin: var(--space-8) 0;
  border-top: var(--space-1) solid var(--ink);
  border-bottom: var(--space-0) solid var(--hairline);
  background: var(--surface);
}

.article-figure__title {
  margin: 0;
  padding: var(--space-3) 0;
  border-bottom: var(--space-0) solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-700);
}

.article-figure__list {
  margin: 0;
  padding: 0;
}

.article-figure__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: var(--space-0) solid var(--hairline);
}

.article-figure__row:last-child {
  border-bottom: 0;
}

.article-figure__row dt {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--muted);
}

.article-figure__row dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
  color: var(--ink);
}

/* --- Evidence component ---------------------------------------------------
   Sources and citations as a designed block: an intro line, the primary
   source, then numbered records with an index column, labeled fields,
   and monospaced URLs. The record markup is emitted by the article
   loader and styled here. */

.article-citations {
  max-width: var(--measure);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--space-1) solid var(--ink);
  font-family: var(--font-sans);
}

.article-citations__head {
  margin-bottom: var(--space-4);
}

.article-citations__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--ink);
}

.article-citations__intro {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--muted);
}

.article-citations__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-citations__item {
  min-width: 0;
  padding-block: var(--space-4);
  border-top: var(--space-0) solid var(--hairline);
}

.article-citations__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.article-citations__item:last-child {
  padding-bottom: 0;
}

.article-citations__item--primary {
  display: grid;
  gap: var(--space-2);
}

.article-citations__label {
  display: block;
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-700);
}

.article-citations__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h); /* touch target, control height token */
  color: var(--brand-700);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: var(--space-0);
  text-underline-offset: var(--space-1);
  overflow-wrap: anywhere;
}

.article-citations__link:hover {
  color: var(--brand-900);
}

.article-citations__records {
  display: grid;
  gap: var(--space-5);
}

.article-citations__entry {
  display: grid;
  grid-template-columns: minmax(0, var(--space-8)) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
}

.article-citations__entry > .article-citations__label {
  grid-row: 1 / span 6;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--brand-700);
}

.article-citations__entry > .article-citations__note {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.article-citations__entry > .article-citations__note + .article-citations__note {
  margin-top: var(--space-1);
}

.article-citations__entry .article-citations__link {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}

/* --- Methodology ---------------------------------------------------------- */

.article-methodology {
  max-width: var(--measure);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--space-1) solid var(--ink);
  font-family: var(--font-sans);
}

.article-methodology__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-700);
}

.article-methodology__text {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--muted);
}

/* --- Read next ------------------------------------------------------------ */

.article-related {
  max-width: var(--measure);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--space-1) solid var(--ink);
  font-family: var(--font-sans);
}

.article-related__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-700);
}

.article-related__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-related__item {
  padding-block: var(--space-4);
  border-top: var(--space-0) solid var(--hairline);
}

.article-related__item:first-child {
  border-top: 0;
}

.article-related__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  line-height: var(--leading-tight);
}

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

.article-related__name a:hover {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.article-related__summary {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--muted);
}

/* --- Subscribe ------------------------------------------------------------
   The endcap conversion block in the same editorial register as the rest
   of the page spine. Reuses the newsletter partial classes, scoped here. */

.article-subscribe {
  max-width: var(--measure);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--space-1) solid var(--ink);
  font-family: var(--font-sans);
}

.article-subscribe__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--ink);
}

.article-subscribe .newsletter-form {
  margin: 0;
}

.article-subscribe .newsletter-form__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--muted);
}

.article-subscribe .newsletter-form__field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.article-subscribe .newsletter-form__input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--space-0) solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
}

.article-subscribe .newsletter-form__input:focus-visible {
  outline: var(--space-1) solid var(--focus-ring);
  outline-offset: var(--space-0);
}

.article-subscribe .newsletter-form__note,
.article-subscribe .newsletter-form__privacy {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--muted);
}

.article-subscribe .newsletter-form__privacy a {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* --- Rail -----------------------------------------------------------------
   The house ad slot sits beside the reading column on wide screens,
   sticky within the page, and stacks below the article on narrow ones. */

.article-rail {
  margin-top: var(--space-8);
}

.article-rail .house-ad {
  margin: 0;
}

@media (min-width: 64rem) {
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, calc(var(--space-9) * 2.5));
    column-gap: var(--space-7);
    align-items: start;
  }

  .article-rail {
    margin-top: 0;
    position: sticky;
    top: var(--space-6);
  }
}

/* --- Compact reading behavior, including 360-wide viewports -------------- */

@media (max-width: 40rem) {
  .pub-hero__title {
    font-size: var(--text-h1);
    line-height: 1.12;
  }

  .pub-hero__lede {
    margin-top: var(--space-4);
    font-size: var(--text-h4);
  }

  .article-layout {
    padding-block: var(--space-5) var(--space-8);
  }

  .article-byline {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-byline__author,
  .article-byline__desk,
  .article-byline__disclosure {
    grid-column: 1;
  }

  .article-byline__dates {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--space-0) solid var(--hairline);
    text-align: left;
  }

  .article-body {
    margin-top: var(--space-6);
  }

  .article-body blockquote {
    padding-inline: var(--space-4);
  }

  .article-figure {
    margin-block: var(--space-7);
  }

  .article-figure__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .article-figure__row dd {
    text-align: left;
  }

  .article-citations {
    margin-top: var(--space-7);
  }

  .article-citations__entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-citations__entry > .article-citations__label {
    grid-row: auto;
    margin-bottom: var(--space-2);
  }

  .article-methodology,
  .article-related,
  .article-subscribe {
    margin-top: var(--space-7);
  }

  .article-subscribe .newsletter-form__field {
    flex-direction: column;
    align-items: stretch;
  }

  .article-subscribe .newsletter-form__input,
  .article-subscribe .newsletter-form__submit {
    width: 100%;
  }
}

/* --- Print ----------------------------------------------------------------
   Article pages print clean: site chrome, rail and ads hidden, ink on
   white, citation URLs spelled out after each link. The shared print
   system (components/print.css) supplies @page margins and page numbers. */

@media print {
  body {
    background: var(--surface);
    color: var(--ink);
  }

  a {
    color: var(--ink);
  }

  .site-header,
  .site-footer,
  .article-rail,
  .house-ad {
    display: none !important;
  }

  .article-layout {
    display: block;
  }

  .article-citations a[href]::after {
    content: " (" attr(href) ")";
    overflow-wrap: anywhere;
  }
}

}