/* ============================================================
   ARTICLES — /articles/*.html
   Loaded after style.css. Reuses the resource-page shell
   (.res-hero / .res-body / .res-table) and adds only what the
   articles track needs: the dateline, long-form prose rhythm,
   the card index, and the two subscribe placements.
   ============================================================ */

/* ---------- Breadcrumbs ---------- */
.articles-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.articles-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.articles-crumbs a:hover,
.articles-crumbs a:focus-visible {
  color: var(--green-primary);
  border-bottom-color: currentColor;
}

.articles-byline,
.articles-follow {
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.articles-byline a,
.articles-follow a,
.articles-more a {
  color: var(--green-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.articles-byline { color: var(--wop-muted); }
.articles-byline a,
.articles-follow a { color: var(--green-light); }
.articles-more {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

/* ---------- Dateline ----------
   First-class, not a byline afterthought: the whole promise of this
   section is that a claim carries the date it was last checked. */
.articles-dateline {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-5);
  background: var(--green-highlight);
  border-left: 3px solid var(--green-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-sans);
}

.articles-dateline__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-primary);
}

.articles-dateline__date {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

.articles-draft-flag {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-5);
  background: rgba(255, 103, 25, 0.1);
  border-left: 3px solid var(--orange-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-dark);
}

/* ---------- Tags ---------- */
.articles-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.articles-tags li {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
}

/* ---------- Prose ---------- */
.articles-prose {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-dark);
}

.articles-prose > p {
  max-width: 66ch;
  text-wrap: pretty;
}

.articles-prose h3,
.articles-prose h4,
.articles-prose h5,
.articles-prose h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: -0.01em;
  max-width: 66ch;
}

.articles-prose h3 { font-size: var(--text-xl); margin: var(--space-10) 0 var(--space-4); }
.articles-prose h4 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.articles-prose h5,
.articles-prose h6 { font-size: var(--text-base); margin: var(--space-6) 0 var(--space-3); }

.articles-prose a {
  color: var(--green-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.articles-prose a:hover { text-decoration-thickness: 2px; }

.articles-prose strong { font-weight: 600; }

/* ---------- TL;DR ----------
   The opener runs 2px below body scale: present, but visibly subordinate to
   the prose it summarizes. The wrapper div also takes the summary paragraph
   out of reach of the direct-child prose selectors (.articles-prose > p,
   .res-body__inner > p), so spacing and measure are restated here. */
.articles-tldr {
  max-width: 66ch;
  margin: 0 0 var(--space-6);
}

.articles-tldr h5,
.articles-tldr h6 {
  font-size: calc(var(--text-base) - 2px);
  margin: var(--space-6) 0 var(--space-3);
}

.articles-tldr p {
  margin: 0;
  font-size: calc(var(--text-base) - 2px);
  line-height: 1.7;
  max-width: 66ch;
  text-wrap: pretty;
}

.articles-list {
  max-width: 66ch;
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
}

.articles-list li {
  margin-bottom: var(--space-2);
  padding-left: var(--space-1);
}

.articles-list li::marker { color: var(--green-mid); }

.articles-quote {
  max-width: 66ch;
  margin: var(--space-8) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 3px solid var(--green-mid);
}

.articles-quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-dark);
}

.articles-pre {
  overflow-x: auto;
  margin: 0 0 var(--space-8);
  padding: var(--space-5);
  background: var(--surface-ink);
  border-radius: var(--radius-md);
}

.articles-pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #E8E6E1;
}

.articles-prose :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--light-grey);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

.articles-rule {
  max-width: 66ch;
  margin: var(--space-12) 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

/* Tables are the hero content, so they break the prose measure on purpose. */
.articles-table-wrap {
  max-width: none;
  margin-top: var(--space-8);
}

.articles-faq-q {
  font-family: var(--font-sans) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  margin-top: var(--space-8) !important;
  margin-bottom: var(--space-2) !important;
}

/* ---------- Section index ---------- */
.articles-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.articles-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--text-dark);
  padding: var(--space-6);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.articles-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

.articles-card__link { text-decoration: none; }

.articles-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0;
  text-wrap: balance;
}

.articles-card__link:hover .articles-card__title { color: var(--green-primary); }

.articles-card__desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.articles-card__meta {
  margin: auto 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-primary);
  font-weight: 600;
}

.articles-card .articles-tags { margin-top: var(--space-2); }

.articles-empty {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 55ch;
}

/* ---------- Inline subscribe (no gating) ----------
   Sits after the first table, where the reader has just been handed
   something useful. Nothing above it is hidden or blurred. */
.articles-subscribe {
  display: block;
  max-width: none;
  margin: var(--space-12) 0;
  background: var(--surface-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.articles-subscribe__inner {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
}

.articles-subscribe__hi {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #F9F9F9;
  margin: 0 0 var(--space-3);
}

.articles-subscribe__benefit {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #C9C7C1;
  margin: 0;
  max-width: 46ch;
}

/* CTA-hey-1 native form: site tokens only, no third-party iframe. */
.articles-subscribe__hi a,
.articles-slidein__hi a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--green-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.articles-subscribe__hi a:hover,
.articles-slidein__hi a:hover { color: var(--green-light); }

.articles-subscribe__row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.articles-subscribe__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--wop-ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--wop-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.articles-subscribe__input::placeholder { color: #8F8D88; }

.articles-subscribe__input:focus {
  border-color: var(--green-light);
}

.articles-subscribe__button {
  flex: 0 0 auto;
  padding: 12px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--surface-ink);
  background: var(--green-light);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.articles-subscribe__button:hover:not(:disabled) { filter: brightness(1.08); }
.articles-subscribe__button:disabled { opacity: 0.7; cursor: default; }

.articles-subscribe__status {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--green-light);
}

.articles-subscribe__status.is-error { color: #E8A87C; }

.articles-subscribe__form.is-done .articles-subscribe__fallback { display: none; }

.articles-subscribe__fallback,
.articles-slidein__fallback {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.articles-subscribe--standalone {
  border-radius: 0;
  margin: 0;
}

.articles-subscribe--standalone .articles-subscribe__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
}

/* ---------- Scroll slide-in ----------
   Revealed at 60% scroll depth by assets/articles-subscribe.js.
   Dismissible, and the dismissal is remembered. */
.articles-slidein {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  width: min(360px, calc(100vw - var(--space-8)));
  padding: var(--space-6);
  background: var(--surface-ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  transform: translateY(calc(100% + var(--space-8)));
  opacity: 0;
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}

.articles-slidein[hidden] { display: none; }

.articles-slidein.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.articles-slidein__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  color: #C9C7C1;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.articles-slidein__close:hover,
.articles-slidein__close:focus-visible { color: var(--green-light); }

.articles-slidein__hi {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: #F9F9F9;
  margin: 0 0 var(--space-2);
}

.articles-slidein__benefit {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #C9C7C1;
  margin: 0 0 var(--space-4);
}

.articles-slidein .articles-subscribe__row { margin-top: var(--space-1); }

/* ---------- Footer ----------
   Matches the live /faq footer (Dark Reading Room system): same wop tokens
   as body.blog-page .footer in style.css. */
body.articles-page .footer {
  background: var(--wop-page);
  color: var(--wop-muted);
  border-top-color: var(--wop-border);
}

@media (prefers-reduced-motion: reduce) {
  .articles-slidein { transition: none; }
  .articles-card { transition: none; }
  .articles-card:hover { transform: none; }
}

@media (max-width: 860px) {
  .articles-subscribe__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 700px) {
  .articles-cards { grid-template-columns: 1fr; }
  .articles-slidein {
    right: var(--space-3);
    left: var(--space-3);
    bottom: var(--space-3);
    width: auto;
  }
  .articles-dateline { width: 100%; }
  .articles-brief__grid { grid-template-columns: 1fr; }
  .articles-brief__grid .articles-brief__wide { grid-column: auto; }
}

/* Editorial refinements use the same Newsreader / DM Sans and house tokens. */
.articles-hero .res-hero__title { max-width: 18ch; font-weight: 500; }
.articles-index .res-hero__title { font-size: clamp(3.5rem, 8vw, 5.7rem); }
.articles-crumbs { color: #b7b7b7; font-size: .875rem; }
.articles-hero .articles-tags li { background: transparent; border-color: #454545; color: #d6d6d6; font-size: .875rem; }
.articles-byline { display: flex; gap: 12px; align-items: center; font-size: .9375rem; }
.articles-dateline { padding: 0; background: none; border: none; gap: 8px; margin-top: 12px; }
.articles-dateline__label, .articles-dateline__date { color: #b7b7b7; font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.articles-draft-flag { display: inline-block; margin-top: 20px; padding: 6px 12px; background: #242d29; border: 1px solid #456052; color: var(--green-light); font-size: .875rem; }
.articles-prose { font-size: 1.125rem; line-height: 1.8; }
.articles-prose > p { margin-bottom: 24px; }
.articles-prose .res-heading { margin-top: 48px; }
.articles-prose > .res-heading:first-child { margin-top: 0; }
.articles-tldr { padding: 24px 28px; background: #e6f0e1; border-left: 3px solid var(--green-primary); margin-bottom: 36px; }
.articles-tldr h6 { margin: 0 0 12px; font-family: var(--font-sans); font-size: .875rem; letter-spacing: .09em; text-transform: uppercase; }
.articles-tldr p { font-size: 1rem; }
.articles-card__desc { font-size: 1rem; color: #595950; }
.articles-card__meta, .articles-card__preview { font-size: .875rem; }
.articles-card__preview { color: var(--green-primary); font-weight: 600; }
.articles-card:only-child { grid-column: 1 / -1; padding: 32px; }
.articles-card:only-child .articles-card__title { font-size: var(--text-3xl); max-width: 26ch; }
.articles-card:only-child .articles-card__desc { max-width: 60ch; }
.articles-page > .articles-subscribe { max-width: 852px; margin: 48px auto; }
.articles-page > .articles-subscribe .articles-subscribe__inner { grid-template-columns: 1fr 1fr; }
.articles-list { list-style: disc; }
ol.articles-list { list-style: decimal; }
@media (max-width: 640px) {
  .articles-hero { padding-bottom: 40px; }
  .articles-hero .res-hero__title { font-size: clamp(2.35rem, 10vw, 3rem); }
  .articles-prose { font-size: 1rem; }
  .articles-cards { grid-template-columns: minmax(0, 1fr); }
  .articles-page > .articles-subscribe { margin: 32px 20px; }
  .articles-page > .articles-subscribe .articles-subscribe__inner { grid-template-columns: 1fr; }
  .articles-tldr { padding: 20px; }
}