/* ==========================================================================
   blog.css — THE BLOG AND NEWS ARTICLE STYLE, shared by every post under
   site/resources/blog/<slug>/ (10/06/2026). Loads after valere.css.

   Until 10/06/2026 these rules sat inline in every post, identical in all
   ten; they moved here when Caleb restyled the posts so one file changes
   all of them. The first block below is that original layout, unchanged
   except where the NEWS STYLE block further down overrides it.

   NEWS STYLE (Caleb, 10/06/2026, "for all blogs and news articles"):
     - The eyebrow is the site's H3 .eyebrow (orange #F88024) with a flow
       line under it, and the H1 sits on a dedicated navy #003262 band, white.
     - The body runs at the site's normal page width (--maxw), not the old
       condensed 720px column.
     - Every quote is a content card with the speaker's headshot. NO flow
       line inside the quote card (Caleb: "looks odd").
   ========================================================================== */

/* ---- Original article layout (moved from the posts' inline <style>) ---- */
.article-hero { padding: clamp(48px,7vw,88px) 0 8px; }
.article-hero .container { max-width: 760px; }
.article-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 0 0 18px; }
.article-hero h1 { font-size: clamp(32px,5vw,46px); font-weight: var(--w-regular); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 22px; }
.article-byline { font-size: 14px; color: #6b7684; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.article-byline .who { color: var(--navy); font-weight: 700; }
.article-byline .sep { color: var(--hairline); }
.article-lede { font-size: 20px; line-height: 1.5; color: var(--navy); margin: 26px 0 0; }

.article { max-width: 720px; margin: 0 auto; padding: 8px 0 clamp(56px,8vw,96px); }
.article > .container { max-width: 720px; }
.article p { font-size: 18px; line-height: 1.72; color: var(--body-gray); margin: 0 0 22px; max-width: none; }
.article h2 { font-size: 26px; font-weight: var(--w-bold); line-height: 1.25; color: var(--navy); margin: 44px 0 14px; }
.article strong { font-weight: var(--w-bold); color: var(--navy); }

.pullquote { margin: 40px 0; padding: 6px 0 6px 28px; border-left: 4px solid var(--orange); }
.pullquote p { font-size: 26px; line-height: 1.35; color: var(--navy); font-weight: var(--w-regular); margin: 0; }

.article-close { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.article-close p { font-size: 18px; color: var(--body-gray); }
.article-close .mark { font-weight: 700; color: var(--navy); }
.article-close .mark .dot { color: var(--orange); }

/* Added for the carried-over posts, which use more of HTML than Dewey's essay does. */
/* ⚠ LONG URLS. The carried-over posts print bare source URLs as visible
   text ("URL: https://en.wikipedia.org/wiki/Home_medical_equipment"), and an
   unbroken string that long cannot wrap: four posts pushed the page 24 to
   135px wider than a 375px phone and scrolled sideways. Found in the step-11
   layout sweep, 2026-09-11. This breaks the string instead of the layout.
   PRESENTATION ONLY - not a copy edit, so the posts still ship verbatim. */
.article { overflow-wrap: anywhere; word-break: break-word; }

.article h3 { font-size: 20px; font-weight: var(--w-bold); line-height: 1.3; color: var(--navy); margin: 34px 0 10px; }
.article h4 { font-size: 16px; font-weight: var(--w-bold); color: var(--navy); margin: 26px 0 8px; }
.article ul, .article ol { margin: 0 0 22px; padding-left: 26px; }
.article li { font-size: 18px; line-height: 1.6; color: var(--body-gray); margin: 0 0 8px; }
.article b { font-weight: var(--w-bold); color: var(--navy); }
.article a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.article img { max-width: 100%; height: auto; display: block; }
.article figure { margin: 30px 0; }
.article figure.is-portrait img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; margin: 0 auto; }
.article figure.on-navy { background: var(--navy); padding: 28px; border-radius: 10px; }
.article figure.on-navy img { max-width: 320px; margin: 0 auto; }
.article hr { border: 0; border-top: 3px solid var(--orange); width: 64px; margin: 34px 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 30px 0; }
.stat { border-top: 3px solid var(--orange); padding-top: 12px; }
.stat__n { display: block; font-size: 34px; font-weight: var(--w-bold); color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__t { display: block; font-size: 14px; color: var(--body-gray); margin-top: 6px; }
.article table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 16px; }
.article td, .article th { border-bottom: 1px solid var(--hairline); padding: 8px 10px; text-align: left; vertical-align: top; }
.article blockquote { margin: 30px 0; padding: 6px 0 6px 24px; border-left: 4px solid var(--orange); }
.article-figure a { text-decoration: none; }

/* ---- NEWS STYLE (overrides the layout above) ---------------------------- */
.article-hero { background: var(--navy); padding: clamp(48px,7vw,88px) 0 clamp(40px,6vw,64px); }
.article-hero .container, .article > .container { max-width: var(--maxw); }
.article-hero .eyebrow { color: var(--orange); margin: 0 0 12px; }
.article-hero .card__rule { margin: 0 0 22px; }
.article-hero h1 { color: #fff; max-width: 980px; }
.article-byline { color: rgba(255,255,255,.78); }
.article-byline .who { color: #fff; }
.article-byline .sep { color: rgba(255,255,255,.35); }
.article { max-width: none; padding-top: clamp(36px,5vw,60px); }
.release-dateline { color: var(--navy); font-weight: var(--w-bold); }

/* Quote card: white card, hairline, window shadow; headshot left, quote and
   speaker right; stacked on a phone. Initials in a navy disc stand in until
   a headshot is supplied. */
.quote-card { margin: 40px 0; background: #fff; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-window); padding: clamp(22px,3vw,36px); }
.quote-card__body { display: grid; grid-template-columns: 112px 1fr; gap: clamp(18px,3vw,36px); align-items: start; }
.article .quote-card__img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: block; margin: 0; }
.article .quote-card__img--initials { display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font-size: 34px; font-weight: var(--w-bold); letter-spacing: .02em; }
.article .quote-card__q { margin: 0; padding: 0; border: 0; }
.article .quote-card__q p { font-size: 22px; line-height: 1.45; color: var(--navy); margin: 0 0 18px; }
.article .quote-card__q strong { font-weight: var(--w-regular); color: inherit; }
.article .quote-card__by { font-size: 15px; line-height: 1.5; color: var(--body-gray); margin: 0; }
.article .quote-card__by strong { display: block; font-size: 16px; font-weight: var(--w-bold); color: var(--navy); }
@media (max-width: 640px) {
  .quote-card__body { grid-template-columns: 1fr; }
  .article .quote-card__img { width: 84px; height: 84px; }
  .article .quote-card__img--initials { font-size: 26px; }
  .article .quote-card__q p { font-size: 19px; }
}

/* A draft not yet approved for release (the partner press releases): one
   quiet line above the hero. Removed from a page once its quotes are signed off. */
.draft-note { background: var(--off-white); border-bottom: 1px solid var(--hairline); color: var(--navy); font-size: 14px; font-weight: var(--w-bold); text-align: center; padding: 10px 16px; margin: 0; }