/* Articles (5 Oct 2026): the /articles index, each article, and their error pages. Page-only, loaded after
   the three shared sheets by the server-rendered shell in api/_lib/layout.js and by nothing in site/.

   The shared sheets were written for a marketing page, so three of their global rules fight prose: ul and ol
   lose their markers, links lose their underline, and refinement.css sets every h2 to a display size. Each is
   restored here only inside .article-body, never globally. Reading column 680px, body 18px at 1.7. Teal stays
   on the primary buttons, the eyebrows and the review tick (a positive status); links are blue and underlined,
   and the quote rule is blue.

   6 Oct 2026, linking and credibility: the breadcrumb, review line and update note, "In short", "Contents",
   "Sources", "About the author", the share row, the topic pages (/articles/topics/<line>) and the author pages
   (/articles/authors/<slug>). Those rules are written mobile first, with min-width queries for wide screens. */

/* ---------- Header: the current page in the nav ---------- */
.nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }
/* The desktop nav's hover underline, held on. In the open mobile menu (up to 1100px, polish.css) the links
   are full-width rows, where a full-width rule would read as a divider, so the weight carries it there. */
@media (min-width: 1101px) {
  .nav a[aria-current="page"] { font-weight: 500; }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* The closing call to action is the homepage's .section.final. Here the section before it already ends on
   its own padding, so the panel does not take a second section's worth of space above it. */
main > .final { padding-top: 0; }

/* ---------- Index ---------- */
.articles-index { padding: 20px 0 72px; }
.articles-head {
  position: relative; overflow: hidden;
  padding: 56px 48px 40px; margin-bottom: 32px;
  border-radius: var(--r-lg); border: 1px solid rgba(217,225,230,.65);
  background: radial-gradient(ellipse at 92% 30%, rgba(47,107,138,.16), transparent 58%), linear-gradient(110deg, #FFFFFF 30%, #EEF3F6);
}
.articles-head h1 { font-size: clamp(40px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.035em; margin: 0 0 16px; }
.articles-head__lede { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 560px; margin: 0 0 32px; }

.article-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.article-filters a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: rgba(255,255,255,.76);
  color: var(--navy); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.article-filters a:hover { text-decoration: none; border-color: var(--navy); }
.article-filters a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* .article-grid and .article-card live at the end of refinement.css (6 Oct 2026): the homepage's Latest
   articles uses them too, and the homepage loads only the shared sheets. They still come before this file,
   so every card rule below overrides them as it did. */
.articles-empty { padding: 48px 0; font-size: 18px; color: var(--muted); }

/* ---------- Article ---------- */
.article-page { padding: 28px 0 72px; }
/* One reading column; the cover alone is allowed wider. */
.article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr); }
.article > * { grid-column: 2; min-width: 0; }
.article > .article-cover { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 960px; }

.article-preview-note { margin: 0 0 24px; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--page-deep); color: var(--navy); font-size: 14px; line-height: 1.55; }
.article-preview-note strong { font-weight: 600; }

/* Breadcrumb: Articles, then the topic. The topic is the eyebrow above the headline and links to its topic
   page; both are 44px targets. When the topic has no page (a preview of a draft), the eyebrow is plain text
   after the nav. */
.article-crumbs { margin: 0; }
.article-crumbs ol { display: flex; flex-direction: column; align-items: flex-start; }
.article-crumbs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--blue); }
.article-crumbs svg { width: 16px; height: 16px; transform: scaleX(-1); transition: transform .18s var(--ease); }
.article-crumbs a:hover svg { transform: scaleX(-1) translateX(3px); }
.article-crumbs a.eyebrow { margin: 0; color: var(--teal); font-size: 12px; font-weight: 500; }
.article-crumbs a.eyebrow:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.article-header .eyebrow { margin-bottom: 16px; }
.article-header > .eyebrow { margin-top: 12px; }
.article-header h1 { font-size: clamp(38px, 4.3vw, 52px); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 20px; overflow-wrap: break-word; }
.article-lede { font-size: 20px; line-height: 1.6; color: var(--muted); margin: 0 0 28px; }
/* The byline, then the review line and the update note, above one hairline. */
.article-meta { padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.article-byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; color: var(--muted); }
.article-byline__author { color: var(--charcoal); font-weight: 600; }
/* Names that link to an author page. The padding, taken back by the margin, makes each a taller target without
   moving the line. */
.article-meta a { padding: 12px 0; margin: -12px 0; color: var(--charcoal); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-meta a:hover { color: var(--navy); text-decoration-color: currentColor; }
.article-review, .article-update { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.article-review { display: flex; align-items: flex-start; gap: 8px; }
.article-review svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--teal); }

.article-cover { margin: 36px 0 0; }
.article-cover img { width: 100%; height: auto; border-radius: var(--r-lg); background: var(--page-deep); }

/* The prose. Every rule is scoped to .article-body, which is where body_html lands. */
.article-body { padding-top: 40px; font-size: 18px; line-height: 1.7; color: var(--charcoal); overflow-wrap: break-word; }
.article-cta + .article-body { padding-top: 0; }
.article-body > :first-child { margin-top: 0; }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote { margin: 0 0 24px; }
.article-body h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; margin: 52px 0 16px; }
.article-body h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.01em; margin: 36px 0 10px; }
.article-body h2 + h3 { margin-top: 20px; }
.article-body ul { list-style: disc; padding-left: 1.35em; }
.article-body ol { list-style: decimal; padding-left: 1.45em; }
.article-body li { margin: 0 0 10px; padding-left: 6px; }
.article-body li::marker { color: var(--blue); }
.article-body ol > li::marker { font-weight: 600; }
.article-body li > p { margin-bottom: 10px; }
.article-body li > ul, .article-body li > ol { margin: 10px 0 0; }
.article-body a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body a:hover { color: var(--navy); text-decoration-thickness: 2px; }
.article-body strong { font-weight: 600; }
.article-body blockquote { padding: 2px 0 2px 24px; border-left: 3px solid var(--blue); color: var(--navy); font-size: 20px; line-height: 1.6; }
.article-body blockquote p { margin-bottom: 12px; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body hr { height: 0; margin: 48px 0; border: 0; border-top: 1px solid var(--border); }
.article-body img { height: auto; margin: 8px 0; border-radius: var(--r-md); background: var(--page-deep); }
/* Every top-level heading carries an id (added at render), so a link to it lands below the sticky header. */
.article [id] { scroll-margin-top: 96px; }

/* ---------- Around the body: In short, Contents, Sources, About the author, share ---------- */
/* Light cards, never navy (contract): white, a hairline, 12px corners. Mobile first. */
.article-summary, .article-contents { margin: 28px 0 0; padding: 18px 18px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.article-summary + .article-contents { margin-top: 14px; }
.article-summary__title, .article-contents__title, .article-sources__title, .article-author__title {
  margin: 0 0 10px; font-size: 18px; line-height: 1.3; letter-spacing: -.005em; color: var(--navy);
}
.article-summary { padding-bottom: 18px; }
.article-summary__list { display: grid; gap: 10px; }
.article-summary__list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.6; color: var(--charcoal); }
.article-summary__list li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

.article-contents__title { margin-bottom: 2px; }
.article-contents__list { counter-reset: contents; }
.article-contents__list li { counter-increment: contents; border-top: 1px solid var(--page-deep); }
.article-contents__list li:first-child { border-top: 0; }
.article-contents__list a { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 11px 0; font-size: 16px; line-height: 1.4; color: var(--navy); }
.article-contents__list a::before { content: counter(contents); flex: none; min-width: 1.1em; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.article-contents__list a:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.article-sources { margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--border); }
.article-sources__list { list-style: decimal; padding-left: 1.4em; }
.article-sources__list li { padding: 0 0 8px 6px; font-size: 15px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.article-sources__list li::marker { color: var(--blue); font-weight: 600; }
.article-sources__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-sources__list a:hover { color: var(--navy); text-decoration-thickness: 2px; }
.article-sources__list span:first-child { display: inline-block; padding: 11px 0; color: var(--charcoal); }
.article-sources__publisher { display: block; margin-top: -8px; }

.article-author { margin: 40px 0 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.article-author__title { margin-bottom: 16px; }
.article-author__card { display: flex; align-items: flex-start; gap: 16px; }
.article-author__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--page-deep); }
.article-author__text { min-width: 0; }
.article-author__name { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--navy); }
.article-author__name a { padding: 10px 0; margin: -10px 0; color: var(--navy); text-decoration: underline; text-decoration-color: var(--border); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-author__name a:hover { text-decoration-color: currentColor; }
.article-author__role { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.article-author__bio { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--charcoal); }
.article-author__bio p { margin: 0 0 8px; }
.article-author__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--blue); }

.article-share { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
/* .btn sets display, which would otherwise outrank the hidden attribute: Copy link stays hidden without JS. */
.article-share .btn[hidden] { display: none; }
/* The input the Copy link fallback selects: never seen, and 16px so focusing it cannot zoom iOS Safari. */
.article-share__input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; pointer-events: none; }

@media (min-width: 769px) {
  .article-summary, .article-contents { margin-top: 36px; padding: 22px 26px 10px; }
  .article-summary { padding-bottom: 22px; }
  .article-summary + .article-contents { margin-top: 16px; }
  .article-sources { margin-top: 56px; padding-top: 28px; }
  .article-author { margin-top: 48px; padding: 26px 28px; }
  .article-author__card { gap: 20px; }
  .article-share { margin-top: 32px; }
}

/* Mid-article call to action, before the second h2. */
.article-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin: 44px 0 48px; padding: 28px 32px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: radial-gradient(ellipse at 100% 0%, rgba(47,107,138,.10), transparent 65%), linear-gradient(115deg, #FFFFFF, var(--page));
}
.article-cta p { max-width: 340px; margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--navy); text-wrap: balance; }
.article-cta .btn { flex: none; }

/* More articles */
.article-more { padding: 56px 0 72px; border-top: 1px solid var(--border); }
.article-more h2 { font-size: 30px; margin: 0 0 24px; }
.article-more .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-more .article-card { padding: 26px 26px 20px; }
.article-more .article-card__title { font-size: 20px; line-height: 1.28; }
.article-more .article-card__desc { font-size: 15px; }

/* ---------- Topic and author pages ---------- */
/* Headings, intros, bios, notes and points are written in the back office: a long word or a pasted address
   wraps rather than pushing the page sideways on a phone. */
.articles-head h1, .articles-head__intro, .articles-head__lede, .author-head__bio, .author-head__role, .article-meta,
.article-summary__list, .article-contents__list, .article-author__text { overflow-wrap: break-word; }
/* The eyebrow above their heading is the way back to all articles: a link, 44px tall. Its negative top margin
   keeps the panel's top space as the index has it. */
.articles-crumbs { margin: -12px 0 2px; }
.articles-crumbs .eyebrow { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
.articles-crumbs .eyebrow:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.articles-head > :last-child { margin-bottom: 0; }
.articles-head__intro { max-width: 640px; }
.articles-head__intro p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.articles-head__intro p:last-child, .author-head__bio p:last-child, .article-author__bio p:last-child { margin-bottom: 0; }

/* The topic's cornerstone article leads, across the whole grid; with a cover, the cover sits beside the text
   on wide screens. */
.article-card.article-card--featured { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.article-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 24px 20px 18px; }
.article-card--featured .article-card__title { font-size: 26px; line-height: 1.18; }
.article-card__cover { margin: 0; background: var(--page-deep); }
.article-card__cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.topic-links { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); }
.topic-links__title { margin: 0 0 16px; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }

.author-head__id { display: flex; align-items: center; gap: 16px; }
.author-head__id > div { min-width: 0; }
.author-head__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--page-deep); }
.author-head h1 { margin: 0; overflow-wrap: break-word; }
.author-head__role { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--muted); }
.author-head__bio { max-width: 640px; margin-top: 18px; }
.author-head__bio p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: var(--charcoal); }
.author-head__link { margin-top: 8px; }
.author-articles__title { margin: 0 0 18px; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; }

@media (min-width: 769px) {
  .articles-head__intro p { font-size: 19px; }
  .article-card__body { padding: 30px 30px 22px; }
  .article-card--featured .article-card__body { padding: 34px 36px 24px; }
  .article-card--featured .article-card__title { font-size: 32px; }
  .topic-links { margin-top: 56px; padding-top: 32px; }
  .author-head__id { gap: 24px; }
  .author-head__photo { width: 112px; height: 112px; }
  .author-head__role { font-size: 18px; }
  .author-head__bio p { font-size: 18px; }
  .author-articles__title { font-size: 30px; margin-bottom: 24px; }
}
@media (min-width: 1000px) {
  .article-card--cover { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .article-card--cover .article-card__cover img { height: 100%; min-height: 320px; aspect-ratio: auto; }
}

/* ---------- Not found, unavailable, preview refused ---------- */
.article-status { padding: clamp(56px, 8vw, 112px) 0; }
.article-status__inner { max-width: 680px; }
.article-status h1 { font-size: clamp(34px, 4vw, 46px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 16px; }
.article-status p { margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .article-more .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .articles-index { padding: 12px 0 56px; }
  .articles-head { padding: 32px 20px 24px; margin-bottom: 20px; }
  .articles-head h1 { font-size: 38px; }
  .articles-head__lede { font-size: 17px; margin-bottom: 24px; }
  .article-filters a { padding: 0 16px; }
  .article-grid, .article-more .article-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .article-card, .article-more .article-card { padding: 24px 20px 18px; }
  .article-card__title { font-size: 22px; }

  .article-page { padding: 12px 0 56px; }
  .article-header h1 { font-size: 34px; line-height: 1.1; }
  .article-lede { font-size: 18px; margin-bottom: 22px; }
  .article-meta { padding-bottom: 22px; }
  .article-byline { font-size: 13px; }
  .article-cover { margin-top: 24px; }
  .article-cover img { border-radius: var(--r-md); }
  .article-body { padding-top: 32px; font-size: 17px; }
  .article-body h2 { font-size: 25px; margin-top: 40px; }
  .article-body h3 { font-size: 20px; margin-top: 30px; }
  .article-body blockquote { padding-left: 18px; font-size: 18px; }
  .article-body hr { margin: 36px 0; }
  .article-cta { flex-direction: column; align-items: stretch; margin: 36px 0 40px; padding: 24px 20px; }
  .article-cta p { max-width: none; font-size: 19px; }
  .article-cta .btn { width: 100%; }
  .article-more { padding: 44px 0 56px; }
  .article-more h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .article-card, .article-filters a, .article-crumbs svg { transition: none; }
  .article-card:hover { transform: none; }
  .article-crumbs a:hover svg { transform: scaleX(-1); }
}