/* ==========================================================================
   Big Bear Associates — Insights article layout (private preview)
   Loaded after styles.css by article pages only. Uses the tokens defined in
   styles.css (:root) but none of the .legal-* layout rules: the article is a
   single centered reading column and must never be placed by .legal-grid's
   column rules. Shared typography classes (.kicker, .lede, .crumb,
   .article-meta, .inline-link) keep their site-wide definitions.
   ========================================================================== */

/* ------------------------------------------------------------ container -- */

.article-page { padding-block: clamp(2.5rem, 7vw, 5.5rem); }

/* One explicit container for breadcrumb, header, lead and body. The reading
   width is 58rem of content; the horizontal padding reuses the site gutter so
   the article's left edge lines up with the header logo and footer on
   viewports up to roughly 1070px. Above that the 76rem .shell keeps growing
   while this column stops, so the article sits as a centered column inset
   from the header edge. That is intentional. */
.article-shell {
  width: 100%;
  max-width: calc(58rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.article-shell > .crumb {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--ink-mute);
}

.article-header {
  padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
  border-bottom: 2px solid var(--ink);
}

.article-title {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- body -- */

/* ~17px on phones rising to ~19px on desktop. */
.article-content {
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

.article-content > p { margin-top: 1.15em; }

.article-content > .lede {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink);
}

.article-content h2 {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  margin-bottom: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.article-content h2 + p { margin-top: 0; }

.article-content p a {
  color: var(--ink);
  text-decoration-color: var(--red);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.article-content p a:hover { color: var(--red); }

/* Citation markers: small, red, no underline so they do not fight the prose. */
.article-content sup {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
}

.article-content sup a {
  color: var(--red);
  text-decoration: none;
}

.article-content sup a:hover { text-decoration: underline; }

/* Sources: restore list numbering removed by the global reset. */
.article-content .sources {
  margin-top: 0.25rem;
  padding-left: 1.6rem;
  list-style: decimal;
  font-size: 0.92em;
  line-height: 1.55;
}

.article-content .sources li { padding-left: 0.35rem; }

.article-content .sources li + li { margin-top: 0.8rem; }

.article-content .sources li::marker {
  font-family: var(--mono);
  color: var(--red);
}

.article-content .sources a { overflow-wrap: anywhere; }

/* Return path to the Insights hub, set off by a light rule. */
.article-content > p:last-child {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

@media print {
  .article-page { padding-block: 1.5rem; }
  .article-content sup a { color: inherit; }
}

/* Selected original illustration: full-width, uncropped and within the reading column. */
.article-content > .article-figure {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.article-figure figcaption {
  margin-top: 0.65rem;
  font-size: 0.78em;
  line-height: 1.45;
  color: var(--ink-mute);
}

/* Owner-selected two-part Why article heading. */
.article-header .article-subtitle {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-soft);
}